@media screen and (max-width: 980px) {
    /* kv */
    @media screen {
        .cbcn-kv-section {
            width: 100%;
            height: 37.5em;
            position: relative;
            display: block;
        }
    }

    /* navigation */
    @media screen {
        .cbcn-navigation-section.wt {
            background: #EBEBEB;
        }

        .cbcn-navigation-title {
            padding-bottom: 1em;
        }

        .cbcn-navigation-txt {
            padding-bottom: 0.5em;
        }

        .cbcn-navigation-item1 {
            order: 1;
            gap: 0.5em;
            background: linear-gradient(150deg, #FFF9F3 5.19%, #FFFEFA 60.71%, #FFEEC9 97.87%);
        }

        .cbcn-navigation-item2 {
            order: 5;
        }

        .cbcn-navigation-item3 {
            order: 3;
        }

        .cbcn-navigation-item4 {
            order: 2;
        }

        .cbcn-navigation-item5 {
            order: 4;
        }

        .cbcn-navigation-p24 {
            color: rgba(0, 0, 0, 0.60) !important;
        }

        .cbcn-navigation-info {
            gap: 1em;
        }

        .cbcn-navigation-img5,
        .cbcn-navigation-img4,
        .cbcn-navigation-img3,
        .cbcn-navigation-img2,
        .cbcn-navigation-img1 {
            width: 100%;
            height: 27.5em;
        }

        .cbcn-navigation-item-txt {
            position: absolute;
            z-index: 9;
            width: 14.75em;
        }

        .cbcn-navigation-item {
            width: 100%;
            height: 27.5em;
            padding: 1.5em 1em 0 1em;
            border-radius: 1em;
            overflow: hidden;
            position: relative;
            display: block;
        }
    }



    /* appearance */
    @media screen {
        .cbcn-appearance-video {
            overflow: hidden;
            height: 10.5592em;
            width: 100%;
        }
    }


    /* color */
    @media screen {
        .cbcn-color-section {
            position: relative;
        }

        .cbcn-color-section.wt {
            background: #F5F5F5;
        }

        .cbcn-color-h1 {
            /* 小语种注意 */
            height: 2.4em;
        }

        .cbcn-color-swiper {
            height: 17.85em;
            width: 100vw;
            position: relative;
            z-index: 12;
            margin: 1em 0;
        }

        .cbcn-color-swiper .swiper-slide {
            opacity: 0 !important;
            transition: all 0.3s;
        }

        .cbcn-color-swiper .swiper-slide-active {
            opacity: 1 !important;
        }


        .cbcn-color-btnListDiv {
            width: fit-content;
            z-index: 13;
        }

        .cbcn-color-btnList {
            display: inline-flex !important;
            flex-wrap: nowrap !important;
            width: auto;
            padding: 0.5em;
            align-items: center;
            gap: 0.5em;
            border-radius: 2.5em;
            background: var(--background-background-A-state-2, rgba(0, 0, 0, 0.05));
        }


        .cbcn-color-btn {
            width: 2em;
            height: 2em;
            cursor: pointer;
            position: relative;
        }

        .cbcn-color-btn svg {
            width: 2em;
            height: 2em;
        }

        .cbcn-color-circle {
            fill: none;
            stroke-width: 2.5px;
            stroke-dasharray: 125.6px;
            stroke-dashoffset: 125.6px;
        }

        .cbcn-color-btn.index1 .cbcn-color-circle {
            stroke: #E1BD8B;
        }

        .cbcn-color-btn.index2 .cbcn-color-circle {
            stroke: #883F62;
        }

        .cbcn-color-btn.index3 .cbcn-color-circle {
            stroke: #717078;
        }

        .cbcn-color-btn.index4 .cbcn-color-circle {
            stroke: #3B4587;
        }

        .cbcn-color-btn.index5 .cbcn-color-circle {
            stroke: #9DC2EF;
        }

        .cbcn-color-btn.active .cbcn-color-circle {
            stroke-dashoffset: 0;
            transition: stroke-dashoffset 3s ease-out;
        }

        .cbcn-color-h1 .cbcn-pc-h1.index1 {
            background: linear-gradient(90deg, #F4B75F 11.98%, #F2B35F 86.92%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .cbcn-color-h1 .cbcn-pc-h1.index2 {
            background: linear-gradient(90deg, #B35180 11.98%, #BB5485 86.92%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .cbcn-color-h1 .cbcn-pc-h1.index3 {
            background: linear-gradient(90deg, #7C7B83 11.98%, #76757D 86.92%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .cbcn-color-h1 .cbcn-pc-h1.index4 {
            background: linear-gradient(90deg, #3060A1 11.98%, #4586C4 86.92%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .cbcn-color-h1 .cbcn-pc-h1.index5 {
            background: linear-gradient(91deg, #55B5E5 0.39%, #D0B9E6 103.61%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }


        .cbcn-color-h1 {
            /* 小语种 */
            height: 2.4em;
            width: 100%;
            position: relative;
        }

        .cbcn-color-h1>.cbcn-pc-h1 {
            opacity: 0;
            transition: all 0.3s;
            width: 100%;
            top: 0;
        }

        .cbcn-color-h1>.cbcn-pc-h1.active {
            opacity: 1;
        }

        .cbcn-color-b1 {
            /* 小语种 */
            height: 6em;
            width: 100%;
            position: relative;
        }

        .cbcn-color-b1>.cbcn-pc-b1 {
            opacity: 0;
            top: 0;
            transition: all 0.3s;
            width: 100%;
        }

        .cbcn-color-b1>.cbcn-pc-b1.active {
            opacity: 1;
        }
    }


    /* curved */
    @media screen {
        .cbcn-curved-vido {
            margin-top: 2.5em;
            height: 16.4em;
            width: 100vw;
        }
    }


    /* slim */
    @media screen {
        .cbcn-slim-img {
            width: 100vw;
            height: 17.25em;
            margin-top: 1em;
        }
    }


    /* rearcamera */
    @media screen {

        /* camera */
        .cbcn-rearcamera-video {
            height: 18.75em;
            width: 100vw;
            position: relative;
        }

        .cbcn-camera-title {
            padding: 0 1em;
            text-align: center;
            width: 100%;
        }

        .cbcn-camera-p {
            background: linear-gradient(90deg, #F4B75F 11.98%, #F2B35F 86.92%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 800 !important;
        }

        .cbcn-camera-txt {
            background: linear-gradient(91deg, #F6C47D -9.58%, #F3A95F 49.99%, #F6C47D 106.64%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
            font-family: "vivo Sans Global";
            font-size: 1.6em;
            font-style: normal;
            font-weight: 800;
            text-transform: uppercase;
            margin-top: 0.2em;
        }

        .cbcn-rearcamera-section2 {
            position: relative;
        }

        .cbcn-rearcamera-img {
            position: absolute;
            bottom: -9em;
            left: 7.95em;
            width: 16.35em;
            height: 33.45em;
        }

        .cbcn-rearcamera-txtBox {
            height: 100%;
            width: 100%;
        }

        .cbcn-rearcamera-param {
            position: absolute;
        }

        .cbcn-rearcamera-dec {
            margin-top: 0.5em;
        }

        .cbcn-rearcamera-param .cbcn-wap-b3 {
            opacity: 1 !important;
        }

        .cbcn-rearcamera-dec .cbcn-wap-fn {
            color: rgba(0, 0, 0, 0.60) !important;
        }

        .cbcn-rearcamera-param1 {
            width: 11.9em;
            height: 6.6em;
            border-top: 1px solid #999;
            border-right: 1px solid #999;
            bottom: 18.6em;
            left: 1.2em;
        }

        .cbcn-rearcamera-param1 .cbcn-rearcamera-item {
            position: absolute;
            /* 这里的top小语种要手动调整 */
            top: -6.35em;
            width: 11.35em;
            left: 0em;
        }

        .cbcn-rearcamera-param2 {
            width: 11.8em;
            height: 1px;
            border-bottom: 1px solid #999;
            bottom: 14em;
            left: 1.2em;
        }

        .cbcn-rearcamera-param2 .cbcn-rearcamera-item {
            position: absolute;
            width: 6.7em;
            left: 0em;
            bottom: 1em;
        }


        .cbcn-rearcamera-param3 {
            width: 14em;
            height: 2em;
            border-top: 1px solid #999;
            border-right: 1px solid #999;
            bottom: 23em;
            opacity: 0;
            left: 1.2em;
        }

        .cbcn-rearcamera-param3 .cbcn-rearcamera-item {
            position: absolute;
            width: 11.35em;
            left: 0em;
            /* 这里的top小语种要手动调整 */
            top: -4.85em;
        }

        .cbcn-rearcamera-param4 {
            width: 15.55em;
            height: 4.25em;
            border-bottom: 1px solid #999;
            border-right: 1px solid #999;
            bottom: 14em;
            opacity: 0;
            left: 1.34em;
        }

        .cbcn-rearcamera-param4 .cbcn-rearcamera-item {
            position: absolute;
            width: 6.75em;
            left: 0em;
            bottom: 1em;
        }
    }


    /* structure */
    @media screen {
        .cbcn-structure-section {
            position: relative;
        }

        .cbcn-structure-section.wt {
            background: #f7f7f7;
        }

        .cbcn-structure-title {
            margin-bottom: 19.15em;
            position: relative;
            z-index: 11;
        }

        .cbcn-structure-img {
            height: 37.5em;
            width: 100vw;
            bottom: 0;
            z-index: 10;
        }
    }


    /* stage */
    @media screen {
        .cbcn-stage-img {
            margin-top: 1.5em;
            height: 14.9em;
            width: 100vw;
        }
    }


    /* fullfocusportraitcomparison */
    @media screen {

        .cbcn-fullfocusportrait-txt.wt,
        .cbcn-fullfocusportrait-section.wt {
            background: #FBFBFB;
        }

        .cbcn-fullfocusportrait-txt {
            padding-top: 4em;
        }

        .cbcn-fullfocusportrait-txt>div {
            /* 小语种要手动调整 */
            height: 16.75em;
            width: 100%;
            position: relative;
        }

        .cbcn-fullfocusportrait-txt2,
        .cbcn-fullfocusportrait-txt1 {
            width: calc(100vw - 2em);
            top: 0em;
            left: 1em;
            position: absolute;
            transition: all 0.3s;
        }

        .cbcn-fullfocusportrait-txt2 {
            opacity: 1;
        }

        .cbcn-fullfocusportrait-txt1 {
            opacity: 0;
        }

        .cbcn-fullfocusportrait-txt2.active {
            opacity: 0;
        }

        .cbcn-fullfocusportrait-txt1.active {
            opacity: 1;
        }

        .cbcn-fullfocusportrait-InfoDiv {
            position: relative;
            z-index: 10;
        }

        .cbcn-fullfocusportrait-div {
            margin-top: 1.5em;
        }

        .cbcn-fullfocusportrait-img {
            width: 100%;
            height: 22.35em;
            display: block;
            overflow: hidden;
            border-radius: 1em;
            margin-bottom: 1.85em;
        }

        .cbcn-fullfocusportrait-Info .cbcn-wap-left {
            background: linear-gradient(90deg, #F4B75F 11.98%, #F2B35F 86.92%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            width: fit-content;
            margin-bottom: 0.35em !important;
        }

        .cbcn-fullfocusportrait-switchBtn-list {
            position: absolute;
            bottom: 4em;
            right: 1em;
            z-index: 12;
        }
    }


    /* telephoto */
    @media screen {
        .cbcn-telephoto-titleBox {
            padding-bottom: 2.5em;
        }

        .cbcn-telephoto-img {
            display: flex;
            width: 16.75em;
            height: 22.35em;
            border-radius: 1em;
            overflow: hidden;
        }

        .cbcn-telephoto-txt {
            display: flex;
            padding: 0.25em 0.75em;
            border-radius: 49.95em;
            background: #FFF;
            backdrop-filter: blur(25px);
            justify-content: center;
            align-items: center;
            position: absolute;
            bottom: 1em;
            left: 1em;
            z-index: 9;
            color: rgba(0, 0, 0, 0.60) !important;
            font-family: "vivo Sans Global";
            font-size: 0.8em;
            font-style: normal;
            font-weight: 600;
            line-height: 150%;
        }

        .cbcn-telephoto-imgBox {
            height: 22.35em;
        }
    }


    /* enhancement */
    @media screen {
        .cbcn-enhancement-section>div {
            flex-direction: column-reverse;
        }

        .cbcn-enhancement-imgbox {
            margin-top: 2.5em;
        }

        .cbcn-enhancement-btn {
            border-radius: 49.95em;
            background: #FFF;
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            padding: 0.25em 1em;
            left: 1em;
            position: absolute;
        }

        .cbcn-enhancement-imgbox {
            width: 100%;
            height: 22.35em;
            border-radius: 1em;
            overflow: hidden;
            position: relative;
        }

        .cbcn-enhancement-img1,
        .cbcn-enhancement-img2 {
            z-index: 9;
            width: 100%;
            height: 100%;
            opacity: 1;
        }

        .cbcn-enhancement-btn1 {
            top: 1em;
        }

        /* .cbcn-enhancement-border {
                z-index: 11;
                width: 100%;
                height: 100%;
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
                background-color: #FFF;
                clip-path: inset(100% 0px 0px);
            } */

        .cbcn-enhancement-btn2 {
            top: 1em;
        }

        /* .cbcn-enhancement-img2 {
                z-index: 12;
                clip-path: inset(100% 0px 0px);
            }

            .cbcn-enhancement-section.active .cbcn-enhancement-img2 {
                clip-path: inset(0% 0px 0px);
                transition: all 1s ease;
            }

            .cbcn-enhancement-section.active .cbcn-enhancement-img1 {
                transition: all 1s ease;
                opacity: 0.6;
            }

            .cbcn-enhancement-section.active .cbcn-enhancement-btn2 {
                transition: all 1s ease;
                top: 3%;
            }

            .cbcn-enhancement-section.active .cbcn-enhancement-border {
                transition: all 0.995s ease;
                clip-path: inset(0% 0px 0px);

            } */
    }


    /* selfie */
    @media screen {
        .cbcn-selfie-img1 {
            margin-top: 2.5em;
            height: 12.61175em;
            width: 100%;
            overflow: hidden;
            border-radius: 1em;
        }

        .cbcn-selfie-img2 {
            margin-top: 1em;
            height: 22.25em;
            width: 100%;
            overflow: hidden;
            border-radius: 1em;
        }
    }


    /* auralight */
    @media screen {
        .cbcn-auralight-section.wt {
            background: #F5F5F5;
        }

        .cbcn-auralight-imgBox {
            margin-top: 0.3em;
            height: 14.05em;
            width: 100%;
        }
    }


    /* auralight */
    @media screen {
        .cbcn-auraportrait-swiper {
            margin-top: 2.5em;
        }

        .cbcn-auraportrait-img {
            height: 19.55em;
            width: 100%;
            border-radius: 1em;
            overflow: hidden;
            position: relative;
        }

        .cbcn-auraportrait-btn {
            border-radius: 49.95em;
            background: #FFF;
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            position: absolute;
            bottom: 1em;
            left: 1em;
            padding: 0.25em 1em;
        }

        .cbcn-auraportrait-btn-txt {
            font-family: "vivo Sans Global" !important;
            font-size: 0.8em;
            font-style: normal;
            font-weight: 600;
            line-height: 150%;
            color: rgba(0, 0, 0, 0.60) !important;
        }

        .cbcn-auraportrait-switchBtn-list {
            margin-top: 2.5em;
        }
    }



    /* stage */
    @media screen {
        .cbcn-aiseason-img {
            height: 22.35em;
            width: 100%;
            overflow: hidden;
            border-radius: 1em;
            margin-top: 1.5em;
            position: relative;
        }

        .cbcn-aiseason-img>picture {
            width: 100%;
            height: 100%;
            opacity: 0;
            animation: aiseasonChange 4.5s ease infinite;
        }

        .cbcn-aiseason-btn {
            background: rgba(255, 255, 255, 0.30);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            border-radius: 49.95em;
            padding: 0.25em 1em;
            justify-content: center;
            align-items: center;
            position: absolute;
            bottom: 1em;
            right: 1em;
            display: flex;
            align-items: center;
            justify-content: center;
            /* opacity: 0; */
            /* animation: aiseasonChange 4s steps(1) infinite; */
        }

        .cbcn-aiseason-img>picture:nth-child(1) {
            z-index: 4;
            animation-delay: 0s;
        }

        .cbcn-aiseason-img>picture:nth-child(2) {
            z-index: 3;
            animation-delay: 1s;
        }

        .cbcn-aiseason-img>picture:nth-child(3) {
            z-index: 2;
            animation-delay: 2s;
        }

        .cbcn-aiseason-img>picture:nth-child(4) {
            z-index: 1;
            animation-delay: 3s;
        }

        @keyframes aiseasonChange {
            0% {
                opacity: 0;
            }

            10% {
                opacity: 1;
            }

            40% {
                opacity: 1;
            }

            50% {
                opacity: 0;
            }

            100% {
                opacity: 0;
            }

        }
    }


    /* stage */
    @media screen {
        .cbcn-aiimage2-titleDiv {
            position: relative;
            height: 10.8em;
        }

        .cbcn-aiimage2-icon {
            margin: auto;
            width: 3.25em;
            height: 3em;
            object-fit: contain;
        }

        .cbcn-aiimage2-title {
            position: absolute;
            top: 3.75em;
            left: 0;
            width: 100%;
            align-items: center;
            gap: 0.75em;
            opacity: 0;
        }

        .cbcn-aiimage2-title.active {
            opacity: 1;
        }

        .cbcn-aiimage2-swiper {
            margin: 1.45em auto 0;
            width: 16.75em;
            height: 29em;
            position: relative;
            overflow: hidden;
        }

        .cbcn-aiimage2-bg {
            position: absolute;
            top: -1.32em;
            left: -2.73em;
            width: 16.75em;
            height: 29em;
            z-index: 99;
        }

        .cbcn-aiimage2-img {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }


        .cbcn-aiimage2-videoBtnList {
            margin-top: -1.2em;
            justify-content: center;
            gap: 0.5em;
            z-index: 100;
            position: relative;
        }

        .cbcn-aiimage2-videoBtn-box {
            padding: 0 0.77em;
            height: 1.8375em;
            gap: 0.41em;
            align-items: center;
            border-radius: 1.8375em;
            overflow: hidden;
            background-color: #f0f0f0;
        }

        .cbcn-aiimage2-videoBtn {
            padding: 0.2em;
            cursor: pointer;
            position: relative;
            justify-content: center;
            align-items: center;
        }

        .cbcn-aiimage2-videoBtn::before {
            content: "";
            width: 0.425em;
            height: 0.425em;
            border-radius: 50%;
            background-color: #b3b3b3;
            overflow: hidden;
            transition: all 1s;
        }

        .cbcn-aiimage2-videoBtn::after {
            content: "";
            width: 0;
            height: calc(100% - 0.4em);
            background-color: #fff;
            position: absolute;
            left: 0.2em;
            top: 0.2em;
            border-radius: 5em;
            overflow: hidden;
        }

        .cbcn-aiimage2-videoBtn.active::before {
            width: 3em;
            border-radius: 5em;
        }

        .cbcn-aiimage2-videoBtn.progress::after {
            animation: videoBtn 6.5s linear forwards;
        }

        @keyframes videoBtn {
            0% {
                width: 0;
            }

            100% {
                width: calc(100% - 0.4em);
            }
        }

        .cbcn-aiimage2-videoBtn-play {
            width: 1.8375em;
            height: 1.8375em;
            flex-shrink: 0;
            cursor: pointer;
        }

        .cbcn-pc-videoBtn-play.active {
            animation: videoPlay 2s forwards;
        }

        @keyframes videoPlay {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    }


    /* fourvideo */
    @media screen {

        .cbcn-fourvideo-phone {
            width: 16.75em;
            height: 7.81095em;
            margin-top: 2.5em;
            overflow: hidden;
        }

        .cbcn-fourvideo-canvasVideo {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }


    /* performance */
    @media screen {
        .cbcn-performance-section {
            width: 100%;
            height: 18.75em;
        }

        .cbcn-performance-p {
            text-align: center;
            font-family: "vivo Sans Global";
            font-size: 1.6em;
            font-style: normal;
            font-weight: 800;
            width: 90vw;
            text-transform: uppercase;
            background: linear-gradient(91deg, #559DF8 0.76%, #327EDD 49.2%, #559DF8 98.34%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }


    /* battery */
    @media screen {
        .cbcn-battery-section {
            justify-content: space-between !important;
        }

        .cbcn-battery-section.wt {
            background: #F5F5F5;
        }

        .cbcn-battery-txtBox {
            z-index: 11;
            width: 100%;
            position: relative;
            bottom: -2em;
        }


        .cbcn-battery-title1 {
            justify-content: center;
            align-items: baseline;
            transition: all 0.3s;
            opacity: 1;
            width: 14.9em;
            height: 5.65em;
        }

        .cbcn-battery-title2 {
            transition: all 0.3s;
            opacity: 0;
            width: 10.6em;
            height: 5.65em;
        }

        .cbcn-battery-section.active .cbcn-battery-title1 {
            transition: all 0.3s;
            opacity: 0;
        }

        .cbcn-battery-section.active .cbcn-battery-title2 {
            transition: all 0.3s;
            opacity: 1;
        }

        .cbcn-battery-video {
            width: 100%;
            height: 6.6em;
        }
    }


    /* lasting */
    @media screen {
        .cbcn-lasting-drag {
            width: 16.75em;
            height: 7.99em;
            position: relative;
            margin-top: 3em;
            user-select: none;
        }

        .cbcn-lasting-drag-img1,
        .cbcn-lasting-drag-img2 {
            z-index: 11;
            height: 100%;
            overflow: hidden;
        }

        .cbcn-lasting-drag-img1 {
            width: 100%;
            left: 0;
        }

        .cbcn-lasting-drag-img2 {
            width: 7.37em;
            position: absolute;
            top: 0;
            right: 0;
        }

        .cbcn-lasting-black {
            width: 7.37em;
            height: 7.3em;
            z-index: 15;
            position: absolute;
            top: 0;
            bottom: 0em;
            margin: auto;
            right: -5px;
            background-color: #000;
        }

        #cbcn-dom-container .cbcn-lasting-drag-img2 img {
            width: 16.75em;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            background-position: center;
            background-size: cover;
            object-fit: cover;
            object-position: 100% 50%;
        }

        .cbcn-lasting-drag-controlBtn {
            position: absolute;
            top: 0.4em;
            left: 0.3em;
            width: 16.15em;
            height: 7.3em;
            z-index: 11;
            border-radius: 0.8em;
            overflow: hidden;
        }

        .cbcn-lasting-drag-controlBtn .cbcn-lasting-line {
            position: absolute;
            top: 0px;
            left: 56%;
            width: 0.1em;
            height: 7.5em;
            background-color: #000;
            cursor: ew-resize;
            z-index: 15;
        }

        .cbcn-lasting-camera {
            position: absolute;
            top: 3.33em;
            left: 0.2em;
            z-index: 16;
            width: 0.525em;
            height: 0.525em;
            cursor: ew-resize;
        }

        .cbcn-lasting-param {
            width: 100%;
            gap: 1.5em 2em;
            justify-content: center;
            margin-top: 3em;
        }

        .cbcn-lasting-param .cbcn-param {
            width: 7.3em;
            border-top: 1px solid #b3b3b3;
            padding-top: 1em;
        }

        .cbcn-lasting-param .cbcn-param p:last-child {
            opacity: 0.4 !important;
        }

        .cbcn-lasting-bg {
            top: -0.5em;
            right: -1em;
            position: absolute;
            z-index: 99;
            width: 17.45em;
            height: 20.1em;
            z-index: 1;
        }
    }


    /* resistance */
    @media screen {
        .cbcn-resistance-drawer-img {
            height: 13.75em;
            width: 100%;
            border-radius: 0.6em;
            overflow: hidden;
            margin-bottom: 2em;
        }

        .cbcn-resistance-h5 {
            width: fit-content;
        }

        .cbcn-resistance-drawer-item .desc {
            margin-top: 0.75em;
            margin-bottom: 1em;
        }
    }


    /* chip */
    @media screen {
        .cbcn-chip-img {
            border-radius: 1em;
            overflow: hidden;
            height: 9.25em;
            width: 100%;
            margin-top: 2.5em;
        }
    }


    /* chip */
    @media screen {
        .cbcn-cooling-section.wt {
            background: linear-gradient(71deg, rgba(229, 237, 255, 0.66) 9.11%, rgba(239, 244, 255, 0.60) 35.42%, rgba(255, 255, 255, 0.52) 57.32%, #E5EDFF 88.53%), #FFF;
        }

        .cbcn-cooling-img {
            margin-top: 2.5em;
            width: 100vw;
            height: 14.3em;
        }
    }


    /* superlink */
    @media screen {

        .cbcn-superlink-video {
            margin-top: 2em;
            width: 17.25em;
            height: 10em;
        }
    }


    /* superlink */
    @media screen {
        .cbcn-speaker-imgDiv {
            margin-top: 2.5em;
            width: 100%;
            height: 6.2em;
            position: relative;
        }

        .cbcn-speaker-img {
            width: 18.05em;
            height: 6.25em;
        }
    }


    /* superlink */
    @media screen {
        .cbcn-display-img {
            width: 16.75em;
            height: 9.70115em;
            margin-top: 2.5em;
        }

        .cbcn-display-param {
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 1em;
            margin-top: -0.2em;
        }

        .cbcn-display-param .cbcn-param {
            border-top: 1px solid #b3b3b3;
            padding-top: 0.75em;
        }

        .cbcn-display-icon {
            width: 100%;
            height: 2.28565em;
            object-fit: cover;
        }

        .cbcn-display-icon2 {
            width: 3em;
            height: 1.45em;
            object-fit: contain;
        }

        .cbcn-display-param .cbcn-param {
            width: 41.4vw;
        }

        .cbcn-display-param .cbcn-param p:last-child {
            opacity: 0.4 !important;
        }
    }


    /* os */
    @media screen {
        .cbcn-os-icon {
            width: 100%;
            height: 18.75em;
        }
    }


    /* preview */
    @media screen {
        .cbcn-preview-screen {
            padding: 4em 5.3vw 6em;
            display: flex;
            height: 100vh;
            gap: 1em;
            justify-content: space-between;
            flex-direction: column;
        }

        .cbcn-preview-box1 {
            width: 100%;
            height: 4.05em;
        }

        .cbcn-preview-box1 p {
            font-size: 3.7em;
            line-height: 110%;
        }

        .cbcn-preview-txt2 {
            opacity: 0;
        }

        .cbcn-preview-txt3 {
            opacity: 0;
        }

        .cbcn-preview-box2 {
            height: 20em;
            position: relative;
            justify-content: center;
            display: flex;
        }

        .cbcn-preview-box2 .cbcn-preview-img {
            position: absolute;
            height: 16.7em;
            width: 14em;
            border-radius: 0.56115em;
            overflow: hidden;
        }

        .cbcn-preview-img2 {
            z-index: 9;
        }

        .cbcn-preview-img1::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0);
            transition: background 0.3s;
        }

        .cbcn-preview-img1.masked::before {
            background: rgba(0, 0, 0, 0.1);
        }

        .cbcn-preview-img1.masked2::before {
            background: rgba(0, 0, 0, 0.2);
        }

        .cbcn-preview-img2::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0);
            transition: background 0.3s;
        }

        .cbcn-preview-img2.masked::before {
            background: #e6e6e6;
        }

        .cbcn-preview-img3 {
            z-index: 10;
        }
    }


    /* gemini */
    @media screen {
        .cbcn-gemini-section.wt {
            background: linear-gradient(0deg, #FFF 0%, #FFF) 100%, linear-gradient(0deg, #FFFAEE 0%, #FFFAEE 100%), conic-gradient(from 180deg at 50% 50%, #FCF2D8 0deg, #FFF 179.96479868888855deg, #FCF2D8 360deg), #EBEBEB;
        }

        .cbcn-gemini-swiper {
            margin-top: 2.5em;
        }

        .cbcn-gemini-swiper>.swiper-wrapper {
            height: 9.9em;
        }

        .cbcn-gemini-title {
            gap: 0.75em;
        }

        .cbcn-gemini-slide {
            width: 100%;
            height: 9.9em;
            overflow: hidden;
            border-radius: 1em;
        }

        .cbcn-gemini-switchBtn-list {
            margin-top: 2.5em;
        }
    }


    /* smart */
    @media screen {
        .cbcn-smart-section.wt {
            background: #F5F5F5;
        }

        .cbcn-smart-section>div {
            gap: 8em;
        }

        .cbcn-smart-icon {
            padding: 1.5em 1em;
            justify-content: space-between;
            align-items: center;
            border-radius: 1em;
            background: linear-gradient(162deg, #DEA145 12.78%, #FFE9C2 126.41%);
        }

        .cbcn-smart-iconimg {
            width: 3em;
            height: 3em;
        }

        .cbcn-smart-img {
            margin: 1em 0;
            width: 100%;
        }

        .cbcn-smart-item2 .cbcn-smart-img,
        .cbcn-smart-item3 .cbcn-smart-img {
            height: 18.6em;
        }

        .cbcn-smart-swiper {
            height: 23em;
            width: 100%;
            border-radius: 1em;
            margin: 1em 0;
            position: relative;
            background: #FFF;
            overflow: hidden;
        }

        .cbcn-smart-swiper .swiper-wrapper {
            position: relative;
            z-index: 9;
        }

        .cbcn-smart-bg {
            width: 8em;
            height: 16.9em;
            display: block;
            margin: 1.5em auto;
            position: relative;
        }

        .cbcn-smart-slideVideo {
            width: 8em;
            height: 16.9em;
            display: block;
            overflow: hidden;
        }

        .cbcn-smart-videoBtn-list {
            bottom: 1em;
            z-index: 10;
            width: fit-content;
        }

        .cbcn-smart-videoBtn.progress::after {
            width: calc(100% - 0.4em);
            transition: width 10s linear;
        }


        .cbcn-smart-videoBtn:nth-child(1).progress::after {
            transition: width 3s linear !important;
        }

        .cbcn-smart-title {
            position: relative;
        }

        .cbcn-smart-title .cbcn-title.index1 {
            position: absolute;
            top: 0px;
            transition: all 0.3s;
            left: 0px;
            opacity: 0;
        }

        .cbcn-smart-title .cbcn-title.index2 {
            transition: all 0.3s;
            opacity: 0;
        }

        .cbcn-smart-title .cbcn-title.index1.active {
            opacity: 1;
            transition: all 0.3s;

        }

        .cbcn-smart-title .cbcn-title.index2.active {
            transition: all 0.3s;
            opacity: 1;
        }
    }


    /* remark */
    @media screen {
        .cbcn-remark-section.bk {
            background: #EBEBEB;
        }

        .cbcn-remark-section ul,
        .cbcn-remark-section ol {
            padding-inline-start: 1em;
        }

        .cbcn-remark-section ol li,
        .cbcn-remark-section p {
            list-style: decimal;
            color: rgba(0, 0, 0, 0.60) !important;
            opacity: 0.6 !important;
        }
    }

}