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

    /* appearance */
    @media screen {
        .cbcn-appearance-media {
            width: 100%;
            height: 10.5469em;
        }
    }

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

        .cbcn-color-box {
            margin-top: 2.4em;
            height: 26.7em;
            width: 100%;
        }

        .cbcn-color-swiper {
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 11;
        }

        .cbcn-color-video1>*,
        .cbcn-color-video2>* {
            width: 100vw !important;
            height: 26.7em !important;
        }

        .cbcn-color-swiper .swiper-slide {
            background-color: #FAFAFA;
        }

        .cbcn-color-btnBox {
            justify-content: center;
            gap: 0.6em;
            bottom: 4em;
            z-index: 12;
            width: 100%;
        }

        .cbcn-color-btnList {
            gap: 0.6em;
            border-radius: 7.15em;
            background: rgba(0, 0, 0, 0.08);
            overflow: hidden;
            width: fit-content;
            padding: 0.5em;
        }

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

        .cbcn-color-btnDec {
            width: 5.55em;
            position: relative;
        }

        .cbcn-color-Dec {
            left: 0;
            text-wrap: nowrap;
            opacity: 0;
            transition: all 0.3s;
            border-radius: 4.95em;
            background: rgba(0, 0, 0, 0.08);
            padding: 0.5em 1.2em;
            align-items: center;
            overflow: hidden;
        }

        .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-Dec.active {
            opacity: 1;
        }


    }

    /* noise */
    @media screen {
        .cbcn-noise-media {
            height: 12.2em;
            width: 100%;
            overflow: hidden;
        }
    }

    /* design */
    @media screen {
        .cbcn-design-desc {
            margin-top: 1.6em;
        }

        .cbcn-design-media {
            margin-top: 2.4em;
            width: 16.75em;
            height: 12.35em;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
        }

        .cbcn-design-parambox2 {
            margin-top: 2.4em;
            gap: 1em 0.5em;
        }

        .cbcn-design-parambox2 .cbcn-param:nth-child(2n-1) {
            width: 7em;
        }
    }

    /* custom */
    @media screen {
        .cbcn-custom-content {
            margin-top: 2.4em;
        }

        .cbcn-custom-titleBox {
            flex-wrap: nowrap;
        }

        .cbcn-custom-title {
            width: 100%;
            flex-shrink: 0;
            position: relative;
            padding-top: 21.6em;
        }

        .cbcn-custom-img {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 18.75em;
            height: 20em;
        }

        .cbcn-custom-switchBtnList {
            margin-top: 2.4em;
        }

    }

    /* call */
    @media screen {
        .cbcn-call-section>.cbcn-wap-safeRow {
            position: relative;
            z-index: 13;
        }

        .cbcn-call-txt {
            margin-top: 1.6em;
        }

        .cbcn-call-txt .cbcn-param {
            margin-top: 21.1em;
        }

        .cbcn-call-media {
            width: 100vw;
            height: 16.3em;
            z-index: 12;
            bottom: 9.3em;
        }
    }

    /* sound */
    @media screen {
        .cbcn-sound-img {
            width: 100%;
            height: 12.8em;
            overflow: hidden;
        }
    }

    /* transfer */
    @media screen {
        .cbcn-transfer-txtBox {
            margin-top: 1.6em;
            align-items: center;
            justify-content: space-between;
            position: relative;
        }

        .cbcn-transfer-txt {
            margin-bottom: 22.5em;
        }

        .cbcn-transfer-img {
            width: 100vw;
            height: 19.5em;
            bottom: 3.85em;
            overflow: hidden;
        }

        .cbcn-transfer-icon {
            width: 7.85em;
            height: 2.45em;
        }
    }

    /* tonetuning */
    @media screen {
        .cbcn-tonetuning-dec {
            margin-top: 1.6em;
            height: 100%;
            position: relative;
        }

        .cbcn-tonetuning-img {
            position: relative;
            height: 20.85em;
            width: 100vw;
            left: 50%;
            z-index: 11;
            transform: translateX(-50%);
            overflow: hidden;
        }

        .cbcn-tonetuning-icon {
            width: 9.425em;
            height: 1.7em;
            position: absolute;
            top: auto !important;
            bottom: 0em;
            right: 0em;
            z-index: 12;
        }


    }

    /* soundeffect */
    @media screen {
        .cbcn-soundeffect-txt {
            margin-top: 1.6em;
        }

        .cbcn-soundeffect-img {
            margin-top: 2.4em;
            width: 100vw;
            height: 14em;
        }
    }

    /* tuner */
    @media screen {
        .cbcn-tuner-section.wt {
            background: linear-gradient(180deg, #F9F9FB 0%, #FEFEFE 44.96%, #FEFEFE 100.07%);
        }

        .cbcn-tuner-title {
            position: relative;
            z-index: 9;
        }

        .cbcn-tuner-img {
            width: 100%;
            height: 23em;
            margin-top: -6.03em;
            position: relative;
            z-index: 8;
        }

        .cbcn-tuner-itemBox {
            margin-top: 2.4em;
            background-color: #FEFEFE;
            justify-content: space-between;
            gap: 1.6em 0;
        }

        .cbcn-tuner-item-icon {
            margin-bottom: 0.4em;
        }

        .cbcn-tuner-item-icon svg {
            width: 1.6em;
            height: 1.6em;
        }


        .cbcn-tuner-item .cbcn-param {
            gap: 0.2em !important;
        }

        .cbcn-tuner-item {
            width: 7.8em;
        }

        .cbcn-tuner-item1 {
            order: 1;
        }

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

        .cbcn-tuner-item2 {
            order: 3;
        }

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

        .cbcn-tuner-item6 {
            order: 5;
        }
    }

    /* batterychapter */
    @media screen {
        .cbcn-batterychapter-img {
            height: 13.5em;
            width: 100%;
            overflow: hidden;
        }
    }

    /* battery */
    @media screen {
        .cbcn-battery-video {
            width: 18.75em;
            height: 20.35em;
            margin-left: -1em;
            overflow: hidden;
        }

        .cbcn-battery-paramBox {
            gap: 1.2em 0.5em;
        }

        .cbcn-battery-param {
            width: 8.125em;
            gap: 0.2em;
        }
    }

    /* connectivity */
    @media screen {
        .cbcn-connectivity-content {
            gap: var(--primitives-spacing-48, 2.4em);
        }

        .cbcn-connectivity-title {
            text-align: left !important;
        }

        .cbcn-connectivity-box {
            gap: var(--primitives-spacing-20, 1em);
        }

        .cbcn-connectivity-img {
            height: 14em;
            width: 100%;
            overflow: hidden;
            border-radius: 0.6em;
            overflow: hidden;
            position: relative;
            clip-path: inset(0 0 0.1em 0);
        }

        .cbcn-connectivity-imgSwiper {
            position: relative;
            z-index: 11;
        }

        .cbcn-connectivity-btnDiv {
            bottom: 0.5em;
            width: fit-content;
            z-index: 12;
        }
    }

    /* interconnect */
    @media screen {
        .cbcn-interconnect-desc {
            margin-top: 1.6em;
        }

        .cbcn-interconnect-img {
            width: 14.05em;
            height: 15.7em;
            margin: 2.4em auto 0;
            display: block;
            overflow: hidden;
            clip-path: inset(0px 0.1em 0px 0px)
        }

        .cbcn-interconnect-content {
            margin-top: 1.7em;
        }

        .cbcn-interconnect-swiper .swiper-slide {
            background-color: #FFF;
        }

        .cbcn-interconnect-btnlist {
            width: fit-content;
            margin-top: 2.4em;
            justify-content: center;
            align-items: center;
            gap: 0.2em;
            padding: 0.2em;
            border-radius: 49.95em;
            background: rgba(0, 0, 0, 0.06);
            backdrop-filter: blur(15px);
            flex-wrap: nowrap !important;
        }

        .cbcn-interconnect-btn {
            color: rgba(0, 0, 0, 0.32);
            padding: 0.2em 0.4em;
        }

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

        .cbcn-interconnect-btnbg {
            overflow: hidden;
            background: rgba(0, 0, 0, 0.93);
            border-radius: 49.95em;
            position: absolute;
            left: 0px;
            height: calc(100% - 0.4em);
            z-index: -1;
            transition: all 0.3s;
        }
    }

    /* unique */
    @media screen {
        .cbcn-unique-item {
            margin-top: 1.6em;
        }

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

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

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

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



        .cbcn-unique-swiper {
            width: 13.3798em;
            height: 16.5em;
            margin-top: 2.4em;
        }

        .cbcn-unique-slide .cbcn-videoFrame {
            height: 100%;
            width: 100%;
        }

        .cbcn-unique-btnList {
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            width: fit-content;
            overflow: hidden;
            position: relative;
            padding: 0.2em;
            align-items: center;
            gap: 0.2e;
            border-radius: 49.95em;
            background: rgba(0, 0, 0, 0.06);
            margin-top: 1.6em;
        }

        .cbcn-unique-btn {
            overflow: hidden;
            z-index: 11;
            position: relative;
            color: rgba(0, 0, 0, 0.32);
            padding: 0.2em 0.4em;
            justify-content: center;
            align-items: center;
            border-radius: 49.95em;
        }

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

        .cbcn-unique-btnbg {
            overflow: hidden;
            background: rgba(0, 0, 0, 0.93);
            border-radius: 49.95em;
            position: absolute;
            left: 0px;
            height: calc(100% - 0.4em);
            z-index: 10;
            transition: all 0.3s;
        }

        .cbcn-unique-img1 {
            height: 100%;
            width: 100%;
            overflow: hidden;
            object-fit: cover;
        }
    }

    /* latency */
    @media screen {
        .cbcn-latency-section.wt {
            background: linear-gradient(180deg, #FFF 58.6%, #FDFDFD 100.01%);
        }

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

        .cbcn-latency-img {
            height: 13.5em;
            margin-top: -1.5em;
            width: 100%;
            z-index: 10;
            position: relative;
            overflow: hidden;
        }

        .cbcn-latency-img>div {
            width: 100%;
            height: 100%;
        }
    }

    /* steward */
    @media screen {
        .cbcn-steward-media1 {
            height: 6.4em;
            width: 100%;
            margin-top: 2.4em;
            position: relative;
        }

        .cbcn-steward-img1 {
            width: 13.925em;
            height: 4.425em;
            position: absolute;
            left: -1em;
            top: 0.1em;
            transform: translateX(-100vw);
        }

        .cbcn-steward-img2 {
            width: 14.57em;
            height: 5.32em;
            position: absolute;
            left: 3em;
            top: 4em;
            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 {
            width: 16.75em;
            height: 14.25em;
            position: relative;
            margin-top: 2.4em;
        }

        .cbcn-steward-img {
            width: 3.8em;
            height: 3.85em;
            display: block;
            position: relative;
            z-index: 12;
            top: 3.25em;
        }

        .cbcn-steward-img3 {
            width: 13.875em;
            height: 5.025em;
            top: 0em;
            left: 3.5em;
            z-index: 11;
            position: absolute;
            transform: translateX(-100vw);
        }

        .cbcn-steward-img4 {
            width: 14.175em;
            height: 5.025em;
            top: 6.2em;
            left: -0.5em;
            z-index: 11;
            position: absolute;
            transform: translateX(100vw);
        }

        .cbcn-steward-img5 {
            width: 10.525em;
            height: 5.025em;
            top: 11.3em;
            left: 7em;
            z-index: 11;
            position: absolute;
            transform: translateX(-100vw);
        }

        .cbcn-steward-media2.active :is(.cbcn-steward-img3, .cbcn-steward-img4, .cbcn-steward-img5) {
            transform: translateX(0);
            transition-property: all;
            transition-duration: 0.5s;
        }

    }

    /* easy */
    @media screen {
        .cbcn-easy-img {
            height: 19.65745em;
            margin-top: 1.35em;
            width: 100vw;
            margin-left: -1em;
        }
    }

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

        .cbcn-pressure-itemBox {
            margin-top: 2.4em;
            gap: 0.4em;
        }

        .cbcn-pressure-img {
            width: 2.6em;
            height: 2.6em;
        }

        .cbcn-pressure-item {
            border-radius: 0.36855em;
            background: #FFF;
            padding: 0 0.8em;
            gap: 0.8em;
            width: 100%;
            align-items: center;
            height: 5.7em;
        }

        .cbcn-pressure-txt {
            width: 11em;
        }
    }


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

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

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