@media screen and (min-width: 981px) {
    /* kv */
    @media screen {
        .cbcn-kv-section.wt {
            background: #FFFFFF;
        }

        .cbcn-kv-section {
            width: 100%;
            height: calc(100vh - 56px) !important;
            margin-top: 56px;
        }

        #cbcn-dom-container .cbcn-kv-section img {
            object-position: center top;
        }
    }

    /* appearance */
    @media screen {
        .cbcn-appearance-section.bk {
            background-color: #fff;
        }

        .cbcn-appearance-section>video {
            z-index: 1;
            position: relative;
            height: 100%;
            width: 100%;
        }

        .cbcn-appearance-p {
            z-index: 2;
        }
    }

    /* color */
    @media screen {
        .cbcn-color-title {
            width: 843px;
            margin-bottom: 80px;
        }

        .cbcn-color-box {
            width: 100%;
            height: 52.25em;
            background-color: #F9F9FA;
            position: relative;
        }

        .cbcn-color-swiper {
            width: 100%;
            height: 52.24em;
        }

        .cbcn-color-img {
            height: 103%;
            width: 102%;
        }

        .cbcn-color-btnBox {
            gap: 1em;
            flex-wrap: nowrap;
            width: 100%;
            align-items: center;
            justify-content: center;
            height: 68px;
            top: 40.85em;
            z-index: 9;
            opacity: 0;
        }

        .cbcn-color-btnBox.active {
            opacity: 1;
            transition: all 1s;
        }

        .cbcn-color-btnList {
            gap: 20px;
            border-radius: 143px;
            background: rgba(0, 0, 0, 0.06);
            overflow: hidden;
            width: fit-content;
            padding: 16px;
        }

        .cbcn-color-btn {
            cursor: pointer;
            align-items: center;
            width: 30px;
            height: 30px;
        }

        .cbcn-color-btn svg {
            width: 30px;
            height: 30px;
        }

        .cbcn-color-circle {
            fill: none;
            stroke-width: 1.8px;
            stroke-dasharray: 107.5px;
            stroke-dashoffset: 107.5px;
            opacity: 0;
        }

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

        .cbcn-color-btnDec {
            width: 140px;
            position: relative;
        }

        .cbcn-color-Dec {
            left: 0;
            border-radius: 99px;
            background: rgba(0, 0, 0, 0.06);
            display: flex;
            padding: 16px 32px;
            text-wrap: nowrap;
            opacity: 0;
            transition: all 0.3s;
        }

        .cbcn-color-Dec.active {
            opacity: 1;
        }
    }

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



    /* design */
    @media screen {
        .cbcn-design-titleBox {
            width: 100%;
            position: absolute;
            top: 0em;
        }

        .cbcn-design-desc {
            margin-top: 3em;
            justify-content: flex-end;
        }

        .cbcn-design-desc p {
            width: 399px;
        }

        .cbcn-design-mediabox {
            width: 100%;
            position: relative;
            overflow: visible;
            margin-top: 12em;
        }

        .cbcn-design-media {
            width: 24.25em;
            height: 35.85em;
            margin-left: 2.5em;
        }

        .cbcn-design-parambox {
            top: 0;
            width: 41.25em;
            height: 36.25em;
            margin-left: 1em;
        }

        .cbcn-design-param1 {
            position: absolute;
            top: 7.6em;
            right: 22.5em;
            z-index: 9;
            align-items: center;
            opacity: 0;
            gap: 20em;
        }

        .cbcn-design-param2 {
            position: absolute;
            top: 19.5em;
            left: 26.4em;
            z-index: 9;
            align-items: center;
            gap: 20em;
            opacity: 0;
        }

        .cbcn-design-param3 {
            position: absolute;
            top: 22.2em;
            left: 24.5em;
            z-index: 9;
            align-items: center;
            gap: 20em;
            opacity: 0;
        }

        .cbcn-design-param4 {
            position: absolute;
            bottom: 13.8em;
            right: 28.2em;
            z-index: 9;
            align-items: center;
            opacity: 0;
            gap: 20em;
        }

        .cbcn-design-line {
            position: relative;
            display: flex;
            align-items: center;
            height: 6px;
        }

        .cbcn-design-line::before {
            content: "";
            width: 6px;
            height: 6px;
            background: #818181;
            border-radius: 50%;
        }

        .cbcn-design-lineafter {
            height: 1px;
            width: 0px;
            background: #818181;
            transition: all 0.5s;
            position: relative;
        }

        .cbcn-design-param1 .cbcn-design-line {
            width: 307px;
            flex-direction: row-reverse;
        }

        .cbcn-design-param2 .cbcn-design-line {
            width: 144px;
        }

        .cbcn-design-param3 .cbcn-design-line {
            width: 180px;
            position: relative;
        }

        .cbcn-design-param3 .cbcn-design-line::before {
            position: relative;
            margin-top: -120px;
            left: 3px;
        }

        .cbcn-design-linebefore {
            transform: rotate(90deg);
            width: 62px;
            height: 1px;
            background: #818181;
            transition: all 0.5s;
            position: absolute;
            top: -30px;
            left: -31px;
        }

        .cbcn-design-param4 .cbcn-design-line {
            width: 201px;
            flex-direction: row-reverse;
        }

        .cbcn-design-parambox p {
            opacity: 0;
        }

        .cbcn-design-param1 p,
        .cbcn-design-param4 p {
            position: relative;
            left: 1em;
        }

        .cbcn-design-parambox2 {
            width: 420px;
            gap: 22px;
            flex-wrap: wrap;
            opacity: 0;
            right: -10em;
        }

        .cbcn-design-parambox2 .cbcn-param {
            min-width: 165px;
        }
    }



    /* custom */
    @media screen {
        .cbcn-custom-section {
            position: relative;
            z-index: 0;
        }

        .cbcn-custom-swiper {
            height: 46.5em;
            width: 100%;
            margin-top: 4em;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
        }

        .cbcn-custom-img {
            height: 100%;
        }

        .cbcn-custom-content {
            z-index: 2;
            width: 980px;
            bottom: 5em;
        }

        .cbcn-custom-txt {
            width: 100%;
            display: inline-block;
            position: relative;
        }

        .cbcn-custom-titleBox {
            position: relative;
            height: 200px;
            margin-bottom: 3.6em;
        }

        .cbcn-custom-title {
            position: absolute;
            opacity: 0;
            width: 498px;
            transition: none !important;
            margin-top: 50px;
        }

        .cbcn-custom-title.active {
            opacity: 1;
            transition: all 0.8s !important;
            margin-top: 0px;
        }

        .cbcn-custom-btnBox {
            height: 63px;
            justify-content: center;
            position: relative;
        }

        .cbcn-custom-btnList {
            padding: 0.4em;
            align-items: center;
            gap: 0.4em;
            border-radius: 49.95em;
            background: rgba(255, 255, 255, 0.14);
            backdrop-filter: blur(calc(30px / 2));
            width: fit-content;
            overflow: hidden;
            position: relative;
        }

        .cbcn-custom-btn {
            display: flex;
            padding: 0.4em 0.8em;
            justify-content: center;
            align-items: center;
            border-radius: 49.95em;
            color: rgba(255, 255, 255, 0.31);
            cursor: pointer;
        }

        .cbcn-custom-btn.active {
            color: rgba(0, 0, 0, 0.93);
        }

        .cbcn-custom-btnbg {
            overflow: hidden;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.96);
            position: absolute;
            left: 0;
            height: calc(100% - 16px);
            z-index: -1;
            transition: all 0.3s;
        }
    }

    /* call */
    @media screen {
        .cbcn-call-media {
            margin-top: 80px;
            width: 100vw;
            height: 37.1em;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
        }

        .cbcn-call-txt {
            margin-top: 4em;
            justify-content: space-between;
        }

        .cbcn-call-desc {
            width: 24.1em;
        }
    }

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

    /* transfer */
    @media screen {
        .cbcn-tuner-section.wt {
            background: linear-gradient(180deg, #FFF 0%, #EBEAE8 100%);
        }

        .cbcn-transfer-title {
            z-index: 10;
            position: relative;
        }

        .cbcn-transfer-box {
            margin-top: 68px;
            flex-wrap: nowrap;
            height: 100%;
            align-items: center;
            position: relative;
            z-index: 9;
        }

        .cbcn-transfer-imgBox {
            height: 746px;
            width: 648px;
            position: relative;
            z-index: 8;
        }

        .cbcn-transfer-img {
            clip-path: inset(0px 0px 2px 0px);
            width: 1500px;
            height: 844px;
            position: absolute;
            right: -566px;
            top: -160px;
        }

        .cbcn-transfer-txtBox {
            height: 100%;
            width: 332px;
            gap: 32px;
            position: relative;
            z-index: 10;
            opacity: 0;
            margin-top: 20px;
            transition: none;
        }

        .cbcn-transfer-txtBox.active {
            opacity: 1;
            margin-top: 0;
            transition: all 1s 1s;
        }

        .cbcn-transfer-icon {
            width: 141px;
            height: 52px;
        }
    }

    /* tonetuning */
    @media screen {
        .cbcn-tonetuning-title {
            position: relative;
            z-index: 13;
        }

        .cbcn-tonetuning-box {
            margin-top: 80px;
            width: 100%;
            height: 952px;
            position: relative;
            z-index: 12;
        }

        .cbcn-tonetuning-img {
            width: 1600px;
            height: 1067px;
            margin-top: -150px;
            clip-path: inset(1px 2px 0px 0px);
        }

        .cbcn-tonetuning-dec {
            position: absolute;
            width: 482px;
            bottom: 0;
            right: 0;
            z-index: 10;
        }

        .cbcn-tonetuning-icon {
            height: 52px;
            width: 315.8px;
            margin-top: 36px;
        }
    }




    /* tuner */
    @media screen {
        .cbcn-tuner-section.wt {
            background: linear-gradient(180deg, #FFF 0%, #EBEAE8 100%);
        }

        .cbcn-tuner-safeRow {
            position: relative;
            z-index: 11;
        }

        .cbcn-tuner-img {
            width: 96em;
            height: 62.6em;
            bottom: 0;
            z-index: 10;
        }

        .cbcn-tuner-itemBox {
            width: 96em;
            height: 48.35em;
            bottom: 0;
            transform-origin: 50% 100%;
            transform: translateX(-50%) scale(calc(100vh / 48.35em));
        }

        .cbcn-tuner-item-icon {
            width: 56px;
            height: 56px;
            display: flex;
            justify-content: flex-end;
        }

        .cbcn-tuner-item {
            gap: 1.2em;
            z-index: 11;
        }

        .cbcn-tuner-item1 .cbcn-tuner-item-txt {
            width: 250px;
        }

        .cbcn-tuner-item5 .cbcn-tuner-item-txt {
            width: 231px;
        }

        .cbcn-tuner-item4 .cbcn-tuner-item-txt {
            width: 222px;
        }

        .cbcn-tuner-item6 .cbcn-tuner-item-txt {
            width: 254px;
        }

        .cbcn-tuner-item2 .cbcn-tuner-item-txt,
        .cbcn-tuner-item3 .cbcn-tuner-item-txt {
            width: 250px;
        }


        .cbcn-tuner-item1,
        .cbcn-tuner-item5 {
            margin-top: -13em;
            margin-left: -17.5em;
        }

        .cbcn-tuner-item4 {
            margin-top: 3em;
            margin-left: 20.5em;
        }

        .cbcn-tuner-item6 {
            margin-top: 2em;
            margin-left: 21em;
        }

        .cbcn-tuner-item2,
        .cbcn-tuner-item3 {
            margin-top: 17.5em;
            margin-left: 15.3em;
        }


        .cbcn-tuner-item5,
        .cbcn-tuner-item6,
        .cbcn-tuner-item3 {
            opacity: 0;
            transform: translate(-50%, calc(-50% + 3em));
        }
    }

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

    /* battery */
    @media screen {
        .cbcn-battery-title {
            padding-left: 40px;
        }

        .cbcn-battery-video {
            width: 52.8em;
            height: 35.2em;
        }

        .cbcn-battery-video video {
            width: 101%;
            height: 101%;
            clip-path: inset(1%);
        }

        .cbcn-battery-paramBox {
            width: 100%;
            gap: 1em 7em;
            flex-wrap: wrap;
            justify-content: center;
            transition: all 0.7s;
        }

        .cbcn-battery-param:nth-child(2n-1) {
            width: 285px;
        }

        .cbcn-battery-param:nth-child(2n) {
            width: 228px;
        }
    }


    /* connectivity */
    @media screen {
        .cbcn-connectivity-title {
            justify-content: center;
            align-items: center;
        }

        .cbcn-connectivity-box {
            margin-top: 4em;
            gap: 1em;
        }

        .cbcn-connectivity-img {
            height: 25em;
            width: 24em;
            border-radius: 1.2em;
            overflow: hidden;
            background-color: #F2F2F4;
        }

        .cbcn-connectivity-img video {
            height: 101%;
            width: 101%;
            clip-path: inset(1%);
        }
    }

    /* interconnect */
    @media screen {
        .cbcn-interconnect-desc {
            margin-top: 3em;
            justify-content: flex-end;
        }

        .cbcn-interconnect-desc p {
            width: 401px;
        }

        .cbcn-interconnect-titleBox {
            position: relative;
            z-index: 12;
        }

        .cbcn-interconnect-swiper {
            margin-top: -12em;
            width: 49em;
            height: 30em;
            position: relative;
            z-index: 11;
            left: 50%;
            transform: translateX(-50%);
        }


        .cbcn-interconnect-box {
            width: 49em;
            justify-content: space-between;
            flex-direction: row-reverse;
        }

        .cbcn-interconnect-media {
            width: 24.1em;
            height: 30em;
            position: relative;
            /* clip-path: inset(1px 5px 1px 1px); */
        }

        .cbcn-interconnect-content {
            width: 20em;
            margin-top: 11em;
            opacity: 0 !important;
            position: relative;
        }


        .swiper-slide-active .cbcn-interconnect-content {
            transition: none !important;
            opacity: 1 !important;
        }


        .cbcn-interconnect-txt {
            position: absolute;
            left: 0;
            bottom: 5.85em;
        }

        .cbcn-interconnect-btnlist {
            position: absolute;
            left: 0;
            bottom: 0.3em;
            z-index: 9;
            width: fit-content;
            padding: 0.4em;
            gap: 0.4em;
            border-radius: 50em;
            background-color: rgba(0, 0, 0, 0.06);
            -webkit-backdrop-filter: blur(15px);
            backdrop-filter: blur(15px);

            --btnWidth: 196px;
            --btnLeft: 0.4em;
        }

        .cbcn-interconnect-btn {
            position: relative;
            z-index: 2;
            padding: 0.4em 0.8em;
            border-radius: 50em;
            color: rgba(0, 0, 0, 0.32);
            cursor: pointer;
        }

        .cbcn-interconnect-btn.active {
            transition: all 0.5s;
            color: rgba(255, 255, 255, 0.96);
        }

        .cbcn-interconnect-btnlist::after {
            content: "";
            position: absolute;
            top: 0.4em;
            left: var(--btnLeft);
            width: var(--btnWidth);
            height: calc(100% - 0.8em);
            z-index: 1;
            border-radius: 50em;
            background: rgba(0, 0, 0, 0.93);
            transition: all 0.3s;
        }

        .cbcn-interconnect-btnbg {
            position: absolute;
        }
    }

    /* unique */
    @media screen {
        .cbcn-unique-safe {
            flex-wrap: nowrap !important;
            justify-content: flex-end;
            position: relative;
            gap: 50px;
        }

        .cbcn-unique-title {
            width: 360px;
            position: absolute;
            top: 58px;
            margin-left: -310px;
            z-index: 11;
        }

        .cbcn-unique-swiper {
            width: 506px;
            height: 624px;
            z-index: 10;
        }

        .cbcn-unique-btnBox {
            width: 263px;
            justify-content: flex-end;
            gap: 48px;
            margin-bottom: 36px;
        }

        .cbcn-unique-btnList {
            padding: 8px;
            align-items: center;
            gap: 8px;
            border-radius: 999px;
            background: rgba(0, 0, 0, 0.06);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            width: fit-content;
            overflow: hidden;
            position: relative;
            --btnWidth: 74px;
            --btnLeft: 0.4em;
        }

        .cbcn-unique-btn {
            border-radius: 999px;
            display: flex;
            padding: 8px 16px;
            justify-content: center;
            overflow: hidden;
            align-items: center;
            z-index: 11;
            position: relative;
            color: rgba(0, 0, 0, 0.32);
            cursor: pointer;
        }

        .cbcn-unique-btn.active {
            color: rgba(255, 255, 255, 0.96);
            transition: all 0.5s;
        }

        .cbcn-unique-btnbg {
            overflow: hidden;
            border-radius: 999px;
            background: rgba(0, 0, 0, 0.93);
            position: absolute;
            left: var(--btnLeft);
            width: var(--btnWidth);
            height: calc(100% - 16px);
            z-index: 10;
            transition: all 0.3s;
        }


        .cbcn-unique-item {
            position: relative;
        }

        .cbcn-unique-p:nth-child(1) {
            position: absolute;
            bottom: 0;
            left: 0;
        }

        .cbcn-unique-p {
            opacity: 0;
            transition: all 0.3s;
        }

        .cbcn-unique-p.active {
            opacity: 1;
        }
    }


    /* latency */
    @media screen {
        .cbcn-latency-section {
            position: relative;
            height: 100%;
        }

        .cbcn-latency-safeRow {
            position: relative;
            z-index: 11;
        }


        .cbcn-latency-title {
            width: 648px;
            margin-bottom: 28.8em;
        }

        .cbcn-latency-img {
            width: 96em;
            height: 38.9em;
            bottom: 0em;
            z-index: 9;
            clip-path: inset(1px 6px 10px 6px);
            overflow: hidden;
        }
    }

    /* steward */
    @media screen {
        .cbcn-steward-title {
            width: 811px;
            margin: auto;
            text-align: center;
            position: relative;
            z-index: 11;
        }

        .cbcn-steward-media1 {
            margin: 4em auto 0;
            width: 49em;
            height: 11.2em;
            position: relative;
        }

        .cbcn-steward-img1 {
            width: 27.8em;
            height: 8.95em;
            position: absolute;
            top: 0;
            left: 3em;
            transform: translateX(-100vw);
        }

        /* .cbcn-steward-img12 {
            width: 29.9em;
            height: 8.95em;
            position: absolute;
            top: 13.1em;
            left: 4.5em;
            transform: translateX(-100vw);
        } */

        .cbcn-steward-img2 {
            width: 41.15em;
            height: 10.55em;
            position: absolute;
            top: 4.5em;
            right: 0em;
            transform: translateX(100vw);
        }

        /* .cbcn-steward-img22 {
            width: 37.9em;
            height: 10.55em;
            position: absolute;
            top: 17.5em;
            right: 0em;
            transform: translateX(100vw);
        } */

        .cbcn-steward-media1.active :is(.cbcn-steward-img1, .cbcn-steward-img2) {
            transform: translateX(0);
            transition-property: all;
            transition-duration: 0.5s;
        }

        .cbcn-steward-media2 {
            margin-top: -80px;
            width: 1921px;
            height: 686px;
            left: 50%;
            z-index: 10;
            transform: translateX(-50%);
            position: relative;
        }

        .cbcn-steward-box2 {
            margin-bottom: 40px;
        }

    }

    /* easy */
    @media screen {
        .cbcn-easy-section.wt {
            background-color: #fff;
        }

        .cbcn-easy-title {
            justify-content: center;
            align-items: center;
        }

        .cbcn-easy-img {
            height: 558px;
            width: 100%;
            margin-top: 80px;
        }
    }

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

        .cbcn-pressure-title {
            width: 814px;
        }

        .cbcn-pressure-img {
            width: 70px;
            height: 70px;
        }

        .cbcn-pressure-itemBox {
            margin-top: 80px;
            flex-wrap: wrap;
            gap: 16px;
            align-items: center;
            justify-content: center;
        }

        .cbcn-pressure-item {
            width: 399px;
            height: 180px;
            border-radius: 16px;
            overflow: hidden;
            background: #FFF;
            padding: 48px 20px;
            align-items: center;
            gap: 20px;
            flex-wrap: nowrap !important;
        }
    }

    /* remark */
    @media screen {

        .cbcn-remark-section ul,
        .cbcn-remark-section ol {
            padding-inline-start: 2em;
            /* 耳机特例，设计没有用v3规划 */
        }

        .cbcn-remark-section ol li {
            list-style: decimal;
            color: #7F7F7F !important;
        }
    }


    /* 小于1439px 大于 981px */
    @media screen and (max-width: 1439px) and (min-width: 981px) {
        .cbcn-tuner-img {
            margin-left: 2em;
        }

        .cbcn-latency-img {
            width: 80em;
            height: 32.4em;
        }

        .cbcn-latency-title {
            margin-bottom: 24.8em;
        }

        .cbcn-kv-section {
            margin-top: 50px;
        }

        .cbcn-tuner-itemBox {
            transform: translateX(-50%) scale(calc(100vh / 55.35em));
        }

        .cbcn-custom-content {
            bottom: 1em;
            margin-bottom: 1em;
        }

        .cbcn-custom-title {
            width: 503px;
        }

        .cbcn-custom-titleBox {
            height: 155px;
            width: 80%;
            left: 5%;
        }

        /* soundeffect */
        .cbcn-soundeffect-section>.cbcn-pc-safeRow2 {
            width: 980px !important;
        }

        .cbcn-soundeffect-txt {
            width: 410px;
        }

        .cbcn-interconnect-box {
            gap: 0.8em;
            width: 980px !important;
            margin: auto;
        }

        .cbcn-unique-safe {
            width: 980px !important;
        }

        .cbcn-unique-slide {
            margin-top: 70px;
            background-color: #fff;
        }

        .cbcn-unique-title {
            margin-left: -310px;
        }


        .cbcn-steward-img3 {
            width: 23.816em;
        }

        .cbcn-steward-img5 {
            width: 30.05em;
            --left: -12em;
        }

        .cbcn-steward-img4 {
            width: 24.3em;
            --left: 15em;
        }

        .cbcn-steward-img6 {
            width: 23.75em;
            margin-top: 9em;
            --left: 13em;
        }
    }
}