@media screen and (max-width: 980px) {
    .cbcn-wap-p40 {
        font-size: 2em;
        font-weight: 650;
    }

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

    /* ksp */
    @media screen {
        .cbcn-ksp-section {
            background: #F5F5F5;
        }
        .cbcn-ksp-wrapper {
            gap: 0.6em;
        }

        .cbcn-ksp-item {
            position: relative;
            width: 100%;
            height: 23em;
            background-color: #fff;
            border-radius: 0.6em;
            overflow: hidden;
        }

        #cbcn-dom-container .cbcn-ksp-item .cbcn-hg5 {
            font-size: 1.2em;
        }

        #cbcn-dom-container .cbcn-ksp-item .cbcn-b2 {
            font-size: 0.8em;
        }

        .cbcn-ksp-title {
            position: absolute;
            left: 1.2em;
            top: 1.2em;
            z-index: 2;
        }

        .cbcn-ksp-btn {
            width: 1.35em;
            height: 1.35em;
            position: absolute;
            left: 1.2em;
            bottom: 1.2em;
            z-index: 2;
        }

        .cbcn-ksp-item3 .cbcn-ksp-btn {
            filter: brightness(0) invert(1);
        }
    }

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

        .cbcn-appearance-p {
            z-index: 2;
            opacity: 0;
            width: 16em;
        }

        .cbcn-appearance-p::after {
            content: "";
            width: 200vw;
            height: 200vh;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.2);
            z-index: 1;
        }

        .cbcn-appearance-p p {
            position: relative;
            z-index: 2;
        }
    } */

    /* color */
    @media screen {
        .cbcn-color-title {
            z-index: 9;
        }

        .cbcn-color-content {
            position: relative;
            z-index: 10;
        }

        .cbcn-color-txt,
        .cbcn-color-btnbox {
            position: relative;
            z-index: 9;
        }

        .cbcn-color-swiper {
            margin-top: 3em;
            width: 100%;
            height: 18em;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
        }

        .cbcn-color-btnbox {
            margin-top: 2.4em;
            width: 100%;
            gap: 2.65em;
            flex-direction: column-reverse;
            justify-content: space-between;
            align-items: center;
        }

        .cbcn-color-btnlist {
            width: fit-content;
            padding: 0.6em;
            gap: 0.8em;
            border-radius: 5em;
            background: rgba(0, 0, 0, 0.06);
        }

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

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

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

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

        .cbcn-color-btnname {
            flex-shrink: 0;
            height: 1.6em;
            position: relative;
        }

        .cbcn-color-btnname p:not(.active) {
            opacity: 0;
        }

        .cbcn-color-txt {
            position: absolute;
            left: 0;
            bottom: 4em;
            width: 100%;
            height: 1.25em;
        }

        .cbcn-color-txt p {
            opacity: 0;
        }

        .cbcn-color-txt p.active {
            opacity: 1;
        }

        .cbcn-color-bg {
            width: 18.75em;
            height: 46.6em;
            z-index: 1;
        }
    }

    /* design1 */
    @media screen {
        .cbcn-design1-content {
            width: 16.75em;
            height: 27.5em;
            border-radius: 0.8em;
            background: #fff;
            position: relative;
        }

        .cbcn-design1-img {
            width: 100%;
            height: 100%;
            bottom: 0;
        }

        .cbcn-design1-titleBox {
            padding: 2.4em;
        }

        .cbcn-design1-right {
            margin-top: 0.6em;
        }
    }

    /* design2 */
    @media screen {
        .cbcn-design2-content {
            margin-top: 3em;
            flex-direction: column-reverse;
        }

        .cbcn-design2-box {
            width: 100%;
            height: 21.5em;
        }

        .cbcn-design2-wrapper {
            flex-wrap: nowrap;
        }

        .cbcn-design2-slide {
            width: 100%;
            height: 100%;
            flex-shrink: 0;
        }

        .cbcn-design2-switchBtnList {
            margin-top: 1.6em;
        }

        .cbcn-design2-desc {
            margin-top: 3em;
            width: 100%;
            height: 4.7em;
            position: relative;
        }

        .cbcn-design2-txt {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
        }

        .cbcn-design2-txt.wapactive {
            opacity: 1;
        }
    }

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

    /* camera */
    @media screen {
        .cbcn-camera-bg {
            bottom: 0;
            width: 18.75em;
            height: 55.45em;
        }

        .cbcn-camera-content {
            position: relative;
            z-index: 9;
        }

        .cbcn-camera-img {
            margin-top: 3em;
            width: 18.75em;
            height: 18.1em;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
        }

        .cbcn-camera-param:not(.cbcn-camera-param1) {
            margin-top: 1.6em;
        }

        .cbcn-camera-param {
            gap: 0.4em;
            padding-top: 0.9em;
            border-top: 1px solid #ccc;
        }
    }

    /* cameramain */
    @media screen {
        .cbcn-cameramain-media {
            margin-top: 3em;
            width: 18.75em;
            height: 29em;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
        }
    }

    /* composition */
    @media screen {
        .cbcn-composition-media {
            margin-top: 3em;
            width: 18.75em;
            height: 21.5em;
            position: relative;
        }

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

    /* aivideo */
    @media screen {
        .cbcn-aivideo-swiper {
            margin: 3em 0 1.6em;
            width: 100%;
            height: 21.5em;
        }

        .cbcn-aivideo-sliderlist {
            position: absolute;
            left: 1em;
            bottom: 4.75em;
        }

        .cbcn-aivideo-sliderbtn {
            opacity: 0;
        }

        .cbcn-aivideo-sliderbtn.active {
            opacity: 1;
        }
    }

    /* meitu */
    @media screen {
        .cbcn-meitu-bg {
            width: 18.75em;
            height: 39.65em;
            bottom: 0;
        }

        .cbcn-meitu-content {
            position: relative;
            z-index: 9;
        }

        .cbcn-meitu-img {
            margin-top: 3em;
            width: 100%;
            height: 21.5em;
        }
    }

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

        .cbcn-focal-row {
            position: relative;
            z-index: 9;
        }

        .cbcn-focal-media {
            margin-top: -3.8em;
            width: 18.75em;
            height: 28.3em;
        }
    }

    /* telescope */
    @media screen {
        .cbcn-telescope-media {
            margin-top: 3em;
            width: 18.75em;
            height: 17.15em;
        }
    }

    /* stagemode */
    @media screen {
        .cbcn-stagemode-swiper {
            width: 100%;
            height: 21.5em;
            margin-top: 3em;
        }

        .cbcn-stagemode-img {
            width: 100%;
            height: 100%;
            border-radius: 0.8em;
            overflow: hidden;
        }

        .cbcn-stagemode-sliderlist {
            margin-top: 1.6em;
            width: 100%;
            height: 1.6em;
            position: relative;
        }

        .cbcn-stagemode-sliderbtn,
        .cbcn-stagemode-text p {
            opacity: 0;
        }

        .cbcn-stagemode-sliderbtn.active,
        .cbcn-stagemode-text p.active {
            opacity: 1;
        }

        .cbcn-stagemode-text {
            margin-top: 1.6em;
            width: 100%;
            height: 3.8em;
            position: relative;
        }

        .cbcn-stagemode-text>div {
            width: 100%;
        }

        .cbcn-stagemode-text p {
            position: absolute;
            top: 0;
            left: 0;
        }

        .cbcn-stagemode-remark {
            margin-top: -1em;
        }

        .cbcn-stagemode-remark.active {
            opacity: 0;
        }

        .cbcn-stagemode-switchBtnList {
            margin-top: 1.6em;
        }

        .cbcn-stagemode-note {
            margin-top: 0.6em;
        }
    }

    /* vlog */
    @media screen {
        .cbcn-vlog-content {
            padding-bottom: 4em;
        }

        .cbcn-vlog-section .cbcn-switchBtnList {
            margin-top: 1.6em;
        }

        .cbcn-vlog-swiper1,
        .cbcn-vlog-swiper2,
        .cbcn-vlog-swiper3 {
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            width: 100vw;
            height: 21.5em;
            margin-top: 3em;
        }

        .cbcn-vlog-mediaText1-content {
            gap: 1.6em;
        }

        .cbcn-vlog-mediaBox3 {
            margin-top: 4em;
            width: 100%;
        }

        .cbcn-vlog-media3 {
            width: 18.75em;
            height: 100vh;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
        }

        .cbcn-vlog-img3 {
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            height: 21.5em;
            width: 100vw;
            margin-top: 3em;
        }

        .cbcn-vlog-mediaText3 {
            margin-top: 3em;
        }
    }


    /* aiimage */
    @media screen {
        .cbcn-aiimage-swiper {
            width: 16.75em;
            height: 21.5em;
            margin-top: 3em;
            border-radius: 0.8em;
            overflow: hidden;
        }
        .cbcn-aiimage-img {
            height: 100%;
            width: 100%;
            overflow: hidden;
            border-radius: 0.8em;
        }

        .cbcn-aiimage-swiper2 {
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: all 0.3s;
        }

        .swiper-slide-active .cbcn-aiimage-swiper2 {
            opacity: 1;
        }
        .cbcn-aiimage-swiper .swiper-slide {
            opacity: 0!important;
        }
        .cbcn-aiimage-swiper .swiper-slide-active {
            opacity: 1!important;
        }
        .cbcn-aiimage-img2 {
            width: 100%;
            height: 100%;
            position: relative;
        }
        .cbcn-aiimage-img2 picture {
            opacity: 0;
            transition: all 0.3s 1.2s;
        }
        .cbcn-aiimage-img2:not(.active) picture:first-child,
        .cbcn-aiimage-img2.active picture:last-child{
            opacity: 1;
        }

        .cbcn-aiimage-swiper2 .swiper-slide picture {
            opacity: 0;
            transition: all 0.3s 1.2s;
        }

        .cbcn-aiimage-swiper2 .swiper-slide:not(.active) picture:first-child,
        .cbcn-aiimage-swiper2 .swiper-slide.active picture:last-child {
            opacity: 1;
        }

        .cbcn-aiimage-mbtnlist {
            bottom: 1.6em;
            z-index: 9;
            width: max-content;
            padding: 0.2em;
            gap: 0.2em;
            flex-wrap: nowrap;
            border-radius: 50em;
            background: rgba(255, 255, 255, 0.14);
            -webkit-backdrop-filter: blur(15px);
            backdrop-filter: blur(15px);
        }

        .cbcn-aiimage-mbtn {
            flex-shrink: 0;
            padding: 0.2em 0.4em;
            color: rgba(255, 255, 255, 0.31);
            transition: all 0.3s;
        }

        .cbcn-aiimage-mbtn.show {
            color: rgba(0, 0, 0, 0.93);
            background: rgba(255, 255, 255, 0.96);
            border-radius: 50em;
        }

        .cbcn-aiimage-sliderlist {
            margin-top: 1.6em;
            width: 100%;
            height: 1.6em;
            position: relative;
        }

        .cbcn-aiimage-sliderbtn,
        .cbcn-aiimage-text p {
            opacity: 0;
        }

        .cbcn-aiimage-sliderbtn.active,
        .cbcn-aiimage-text p.active {
            opacity: 1;
        }

        .cbcn-aiimage-text {
            margin-top: 0.6em;
            width: 100%;
            height: 5em;
            position: relative;
        }

        .cbcn-aiimage-text>div {
            width: 100%;
        }

        .cbcn-aiimage-text p {
            position: absolute;
            top: 0;
            left: 0;
        }

        .cbcn-aiimage-switchBtnlist {
            margin-top: 1.6em;
        }
    }

    /* fullfocusportrait */
    @media screen {
        .cbcn-fullfocusportrait-swiper {
            width: 16.75em;
            height: 21.5em;
            margin-top: 3em;
        }

        .cbcn-fullfocusportrait-InfoDiv {
            padding: 0 1em;
            margin-top: 1.6em;
        }

        .cbcn-fullfocusportrait-btnSwiper {
            position: absolute;
            left: 1em;
            bottom: 6.75em;
            height: 1.6em;
        }

        .cbcn-fullfocusportrait-img {
            width: 100%;
            height: 100%;
            display: block;
            border-radius: 0.8em;
            overflow: hidden;
        }

        .cbcn-fullfocusportrait-Info p {
            position: absolute;
            opacity: 0;
            --text-54a: var(--text-93a);
        }

        .cbcn-fullfocusportrait-Info p.active {
            opacity: 1;
        }
    }

    /* nature */
    @media screen {
        .cbcn-nature-media {
            width: 100%;
            height: 100vh;
            position: relative;
        }

        .cbcn-nature-img {
            width: 18.75em;
            height: 21.5em;
            position: absolute;
            bottom: 0;
            left: 0;
            transform-origin: 50% 100%;
            background: #000;
        }
        .cbcn-nature-img img {
            opacity: 0.6;
        }

        .cbcn-nature-box {
            margin-top: 1.6em;
        }

        .cbcn-nature-title .cbcn-title {
            top: 40%;
            width: 100%;
            text-align: center;
        }
    }

    /* night */
    @media screen {
        .cbcn-night-mediabox {
            width: 100%;
            height: 100vh;
            position: relative;
        }

        .cbcn-night-media {
            width: 18.75em;
            height: 21.5em;
            position: absolute;
            bottom: 0;
            left: 0;
            transform-origin: 50% 100%;
            background: #000;
        }
        .cbcn-night-media img {
            opacity: 0.6;
        }

        .cbcn-night-box {
            margin-top: 1.6em;
        }

        .cbcn-night-title2 {
            width: 100%;
            text-align: center;
        }
    }

    /* diagram */
    @media screen {
        .cbcn-diagram-bg {
            width: 18.75em;
            height: 32.95em;
            bottom: 0;
        }

        .cbcn-diagram-img {
            margin-top: 3em;
            width: 100%;
            height: 15em;
            position: relative;
            z-index: 9;
        }

        .cbcn-diagram-row {
            position: relative;
            z-index: 9;
        }
    }

    /* flash */
    @media screen {
        .cbcn-flash-media {
            width: 100%;
            height: 100vh;
            position: relative;
        }

        .cbcn-flash-img {
            width: 18.75em;
            height: 21.5em;
            position: absolute;
            bottom: 0;
            left: 0;
            transform-origin: 50% 100%;
            background: #000;
        }
        .cbcn-flash-img img {
            opacity: 0.6;
        }

        .cbcn-flash-title {
            margin-top: 1.6em;
        }

        .cbcn-flash-title .cbcn-title {
            width: 100%;
            text-align: center;
        }
    }

    /* fireworks */
    @media screen {
        .cbcn-fireworks-media {
            margin-top: 3em;
            width: 18.75em;
            position: relative;
        }

        .cbcn-fireworks-img {
            width: 100%;
            height: 21.5em;
        }
    }

    /* tonality */
    @media screen {
        .cbcn-tonality-img {
            width: 100%;
            height: 21.5em;
            margin-top: 3em;
        }

        .cbcn-tonality-b {
            margin-top: 1.6em;
        }
    }

    /* sports */
    @media screen {
        .cbcn-sports-swiper {
            margin-top: 3em;
            width: 100%;
            height: 22.25em;
        }

        .cbcn-sports-switchBtnlist {
            margin-top: 1.6em;
        }
    }

    /* frontshot */
    @media screen {
        .cbcn-frontshot-swiper {
            width: 16.75em;
            height: 21.5em;
            margin: 3em auto 0;
        }

        .cbcn-frontshot-sliderlist {
            margin-top: 1.6em;
            width: 100%;
            height: 1.6em;
            position: relative;
        }

        .cbcn-frontshot-sliderbtn,
        .cbcn-frontshot-text p {
            opacity: 0;
        }

        .cbcn-frontshot-sliderbtn.active,
        .cbcn-frontshot-text p.active {
            opacity: 1;
        }

        .cbcn-frontshot-text {
            margin-top: 0.6em;
            width: 100%;
            height: 5em;
            position: relative;
        }

        .cbcn-frontshot-text>div {
            width: 100%;
        }

        .cbcn-frontshot-text p {
            position: absolute;
            top: 0;
            left: 0;
        }

        .cbcn-frontshot-switchBtnlist {
            margin-top: 1.6em;
        }
    }


    /* live */
    @media screen {
        .cbcn-live-swiper {
            margin-top: 3em;
            width: 100%;
            height: 21.5em;
        }

        .cbcn-live-sliderlist {
            margin-top: 1.6em;
            width: 100%;
            height: 1.6em;
            position: relative;
        }

        .cbcn-live-img {
            width: 100%;
            height: 21.5em;
            border-radius: 0.8em;
            overflow: hidden;
            position: relative;
            z-index: 9;
        }
    
        .cbcn-live-icon {
            position: absolute;
            top: 1em;
            right: 1.05em;
            width: 1.8em;
            height: 1.8em;
            z-index: 10;
        }

        .cbcn-live-sliderbtn,
        .cbcn-live-text p {
            opacity: 0;
        }

        .cbcn-live-sliderbtn.active,
        .cbcn-live-text p.active {
            opacity: 1;
        }

        .cbcn-live-text {
            margin-top: 0.6em;
            width: 100%;
            height: 1.25em;
            position: relative;
        }

        .cbcn-live-text>div {
            width: 100%;
        }

        .cbcn-live-text p {
            position: absolute;
            top: 0;
            left: 0;
        }

        .cbcn-live-switchBtnlist {
            margin-top: 1.6em;
        }
        .cbcn-live-videobtn {
            padding: 0.2em 0.6em;
            width: max-content;
            bottom: 1.6em;
            margin-bottom: -10em;
            opacity: 0;
            border-radius: 49.95em;
            background: rgba(255, 255, 255, 0.46);
            -webkit-backdrop-filter: blur(15px);
            backdrop-filter: blur(15px);
        }
        .cbcn-live-videobtn.active {
            opacity: 1;
            margin-bottom: 0;
            transition: all 0.5s cubic-bezier(0, 0, 0.2, 1);
        }
    }

    /* selfiescreen */
    @media screen {
        .cbcn-selfiescreen-row {
            position: relative;
            z-index: 11;
        }

        .cbcn-selfiescreen-bg {
            width: 100vw;
            height: 22.6em;
            bottom: 0;
            z-index: 10;
        }

        .cbcn-selfiescreen-img {
            width: 18.75em;
            height: 26.15em;
            margin-left: -1em;
            margin-top: 2.75em;
        }

        .cbcn-selfiescreen-itemBox {
            display: flex;
            margin-top: 3em;
        }

        .cbcn-selfiescreen-item {
            width: 15em;
            height: auto;
            width: 15em;
            padding: 1.8em 1.2em;
            gap: 0.8em;
            border-radius: 0.6em;
            overflow: hidden;
            background: #FFF;
        }

        .cbcn-selfiescreen-switchBtnList {
            margin-top: 1.6em;
        }
    }

    /* selfiescreen2 */
    @media screen {
        .cbcn-selfiescreen2-img {
            margin-top: 3em;
            width: 100vw;
            height: 26em;
            margin-left: -1em;
        }
    }

    /* external */
    @media screen {

        .cbcn-external-section>.cbcn-pc-safeRow {
            position: relative;
            z-index: 13;
        }

        .cbcn-external-img {
            margin-top: 1.6em;
            width: 18.75em;
            height: 12.9em;
            position: relative;
            z-index: 11;
        }

        .cbcn-external-bg {
            height: 33.15em;
            width: 100vw;
            bottom: 0;
            z-index: 1;
        }

        .cbcn-external-note {
            margin-top: -2.4em;
            width: 16.75em;
            position: relative;
            z-index: 13;
            left: 50%;
            transform: translateX(-50%);
        }
    }

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

        .cbcn-handle-param {
            margin-top: 3em;
            gap: 0.4em !important;
        }

        .cbcn-handle-swiper {
            width: 100vw;
            height: 12em;
            left: 50%;
            position: relative;
            transform: translateX(-50%);
            margin: 3em 0;
        }

        .cbcn-handle-btnBox {
            gap: 0.6em;
            flex-wrap: nowrap;
            width: 100%;
            align-items: center;
            justify-content: center;
            height: 2.8em;
        }

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

        .cbcn-handle-btn {
            cursor: pointer;
            align-items: center;
        }

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

        .cbcn-handle-circle {
            fill: none;
            stroke-width: 0.09em;
            stroke-dasharray: 5.375em;
            stroke-dashoffset: 5.375em;
            opacity: 0;
        }

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

        .cbcn-handle-btnDec {
            width: 5.55em;
            height: 100%;
            position: relative;
            border-radius: 4.95em;
            background: rgba(0, 0, 0, 0.06);
        }

        .cbcn-handle-Dec {
            display: flex;
            text-wrap: nowrap;
            opacity: 0;
            transition: all 0.3s;
        }

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

    }


    /* performance */
    @media screen {
        .cbcn-performance-media {
            width: 100%;
            height: 29.45em;
            position: relative;
            z-index: 11;
        }

        .cbcn-performance-txt {
            gap: 0.6em;
            width: 16.75em;
            z-index: 12;
            bottom: 8.5em;
        }

        .cbcn-performance-txt p:nth-child(1) {
            font-size: 2em;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            background: linear-gradient(91deg, #FB6A98 -1.42%, #FF9B80 46.95%, #FFE966 106.14%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }

    /* chip */
    @media screen {
        .cbcn-chip-safe {
            position: relative;
            z-index: 11;
        }

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

        .cbcn-chip-param {
            margin-top: 3em;
            justify-content: space-between;
            gap: 1.2em 0;

            background: linear-gradient(90deg, #FB6A98 0%, #FF9B80 50%, #FFE966 100%);
            background-clip: text;
            -webkit-background-clip: text;
        }

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

        }

        .cbcn-chip-param .cbcn-param>p:nth-child(1) {
            width: fit-content;
        }

        .cbcn-chip-param .cbcn-param>p:nth-child(2) {
            position: relative;
            -webkit-text-fill-color: rgba(0, 0, 0, 0.54);
        }

        .cbcn-chip-box {
            margin-top: -3.5em;
            width: 18.75em;
            height: 20.4em;
            z-index: 10;
            position: relative;
        }

        .cbcn-chip-bg {
            width: 100%;
            height: 100%;
            top: 0;
            z-index: 1;
        }
    }

    /* game */
    @media screen {

        .cbcn-game-box,
        .cbcn-game-box .cbcn-title {
            position: relative;
            z-index: 11;
        }

        .cbcn-game-media {
            height: 15.5em;
            width: 18.75em;
            left: 50%;
            transform: translateX(-50%);
            position: relative;
            margin-top: 3em;
            z-index: 11;
        }

        .cbcn-game-swiper {
            margin: 2.4em 0 1.6em;
            width: 100%;
        }

        .cbcn-game-slide {
            border-radius: 0.6em;
            background: rgba(0, 0, 0, 0.04);
            overflow: hidden;
            height: 10.9em;
            width: 15em;
            padding: 1.8em 1.2em;
        }

        .cbcn-game-slide p {
            position: relative;
            z-index: 9;
        }

        .cbcn-game-bg {
            height: 29.25em;
            width: 100vw;
            z-index: 10;
            bottom: 0em;
        }
    }

    /* eyeshield */
    @media screen {
        .cbcn-eyeshield-box2 {
            margin-top: 3em;
        }

        .cbcn-eyeshield-param {
            margin-top: 3em;
        }

        .cbcn-eyeshield-param {
            gap: 1.2em 0;
            justify-content: space-between;
            background: linear-gradient(133deg, #FB6A98 5.44%, #FF9B80 34%, #FFE966 96.42%);
            background-clip: text;
            -webkit-background-clip: text;
        }

        .cbcn-eyeshield-param .cbcn-param>p:nth-child(1),
        .cbcn-eyeshield-param .cbcn-param>p:nth-child(1) sup {
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .cbcn-eyeshield-param .cbcn-param>p:nth-child(1) sup {
            position: static !important;
            margin-top: -1em;
        }

        .cbcn-eyeshield-param .cbcn-param>p:nth-child(2) {
            position: relative;
        }

        .cbcn-eyeshield-param .cbcn-param {
            width: 8.125em;
        }

        .cbcn-param-icon1 {
            width: 8.125em;
            height: 1.6em;
        }

        .cbcn-param-icon2,
        .cbcn-param-icon3 {
            width: 7.6em;
            height: 1.6em;
        }
        .cbcn-param-icon6 {
            width: 16.75em;
            height: 2.5em;
        }

        .cbcn-eyeshield-img {
            margin-top: -4em;
            width: 18.75em;
            height: 35.5123em;
            position: relative;
            z-index: 11;
        }

        .cbcn-eyeshield-box3 {
            position: relative;
            z-index: 12;
            margin-top: -9.5em;
        }

        .cbcn-eyeshield-txt2 .cbcn-desc {
            margin-top: 1.6em;
            margin-bottom: 3em;
            gap: 1.6em;
        }

        .cbcn-eyeshield-txt2 .cbcn-param {
            gap: 0.4em !important;
        }

        .cbcn-eyeshield-param2 {
            margin-top: 3em;
            gap: 1.6em 0;
            justify-content: space-between;
        }

        .cbcn-eyeshield-param2 .cbcn-param {
            width: 8.125em;
            gap: 0.4em !important;
        }

        .cbcn-eyeshield-iconbox {
            width: 100%;
            height: 4.65em;
        }
    }


    /* signalchapter */
    @media screen {
        .cbcn-signalchapter-img {
            width: 100vw;
            height: 21.45em;
        }

        .cbcn-signalchapter-p {
            width: 16.75em;
            opacity: 0;
            margin-top: 4em;
            transition: all 0.3s;
        }

        .cbcn-signalchapter-title {
            position: relative;
            z-index: 11;
        }

        .cbcn-signalchapter-p::after {
            content: "";
            width: 100vw;
            height: 44em;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.80) 100%);
            z-index: 1;
        }

        .cbcn-signalchapter-p.active {
            opacity: 1;
            margin-top: 0em;
        }
    }

    /* battery */
    @media screen {

        .cbcn-battery-title,
        .cbcn-battery-paramBox,
        .cbcn-battery-titleBox,
        .cbcn-battery-safe1,
        .cbcn-battery-safe2 {
            position: relative;
            z-index: 11;
        }

        .cbcn-battery-img {
            width: 18.75em;
            height: 21.9em;
            top: 11.5em;
            z-index: 10;
        }

        /* 控制图片位置 */
        .cbcn-battery-paramBox {
            margin-top: 14em;
            gap: 1.2em 0.5em;
        }

        .cbcn-battery-paramBox .cbcn-param {
            width: 6.5em;
        }

        .cbcn-battery-paramBox {
            background: linear-gradient(120deg, #FB6A98 0%, #FF9B80 50%, #FFE966 100%);
            background-clip: text;
            -webkit-background-clip: text;
        }

        .cbcn-battery-paramBox .cbcn-param .cbcn-hg2 {
            width: fit-content;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .cbcn-battery-paramBox .cbcn-param .cbcn-hg2 sup {
            position: static !important;
            margin-top: -1em;
        }

        .cbcn-battery-paramBox .cbcn-param .cbcn-b2 {
            position: relative;
        }

        .cbcn-battery-paramBox .cbcn-param:nth-child(1),
        .cbcn-battery-paramBox .cbcn-param:nth-child(2) {
            width: 100%;
        }


        /* ----------- */
        .cbcn-battery-swiperBox {
            margin-top: 5em;
        }

        .cbcn-battery-swiper {
            width: 15em;
            margin-top: 3em;
        }

        .cbcn-battery-slide {
            width: 100%;
            height: auto;
            padding: 1.8em 1.2em;
            border-radius: 0.6em;
            overflow: hidden;
            background: #FFF;
        }

        .cbcn-battery-switchBtnList {
            margin-top: 1.6em;
        }

        .cbcn-battery-bg {
            z-index: 10;
            bottom: 0;
            width: 100vw;
            height: 25.9em;
        }
    }

    /* signal1 */
    @media screen {

        .cbcn-signal1-img,
        .cbcn-signal1-video {
            width: 18.75em;
            height: 35.45em;
        }

        .cbcn-signal1-safe {
            z-index: 9;
        }

        .cbcn-signal1-video canvas {
            width: 100%;
            height: 100%;
        }
    }

    /* signal2 */
    @media screen {


        .cbcn-signal2-img {
            height: 21.5em;
            width: 100%;
            overflow: hidden;
            border-radius: 0.8em;
        }

        .cbcn-signal2-desc {
            margin-top: 1.6em;
        }

        .cbcn-signal2-switchBtnList {
            margin-top: 1.6em;
        }

        .cbcn-signal2-desc>div {
            gap: 0.6em !important;
        }
    }

    /* configurations */
    @media screen {
        .cbcn-configurations-swiper {
            height: 15em;
            width: 16.75em;
            margin-top: 3em;
            margin-bottom: 1.6em;
        }

        .cbcn-configurations-slide {
            border-radius: 0.6em;
            height: 100%;
            justify-content: space-between;
            padding: 1.2em;
            background: #fff;
            overflow: hidden;
        }

        .cbcn-configurations-img {
            width: 14.35em;
            height: 5em;
        }

        .cbcn-configurations-section {
            position: relative;
        }

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

        .cbcn-configurations-bg {
            bottom: 0;
            width: 100%;
            height: 34.5em;
            z-index: 10;
        }

    }

    /* os */
    @media screen {
        .cbcn-os-section {
            width: 100%;
        }

        .cbcn-os-box {
            width: 100%;
            align-items: center;
        }

        .cbcn-os-img {
            width: 14.45em;
            height: 15.25em;
        }

        .cbcn-os-title {
            margin-top: 0.6em;
            margin-bottom: 2.6em;
        }

        .cbcn-os-click {
            margin-top: 2.4em;
            align-items: center;
            gap: 0.2em;
            flex-wrap: nowrap !important;
            justify-content: center;
            background: linear-gradient(91deg, #FB6A98 -1.42%, #FF9B80 46.95%, #FFE966 106.14%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }

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

        .cbcn-smooth-box {
            margin-top: 3em;
            gap: 3em;
        }

        .cbcn-smooth-itemFlex {
            margin-top: 1.6em;
            width: 100%;
            gap: 0.5em;
            justify-content: space-between;
        }

        .cbcn-smooth-itemFlexBox {
            padding: 1em 0.8em;
            border-radius: 0.8em;
            overflow: hidden;
            background: #FFF;
            width: 8.125em;
        }

        .cbcn-smooth-img {
            width: 3.4em;
            height: 3.4em;
            margin-bottom: 0.7em;
        }

        .cbcn-smooth-dec {
            gap: 0.1em !important;
        }

        /* 丝滑流畅 */
        .cbcn-smooth-itemFlex.index2 {
            display: flex;
            gap: 0em !important;
        }

        .cbcn-smooth-itemFlex.index2 .cbcn-smooth-img {
            width: 16.75em;
            height: 15em;
            border-radius: 0.8em;
            overflow: hidden;
        }

        .cbcn-smooth-itemFlex.index2 .cbcn-smooth-dec {
            gap: 0.8em !important;
        }

        .cbcn-smooth-switchBtnList {
            margin-top: 1em;
        }

        .cbcn-smooth-icon {
            width: 14.35em;
            height: 2.4em;
            margin-top: 1.6em;
        }

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

        .cbcn-smooth-bg {
            width: 100%;
            height: 83.4em;
            bottom: 0;
            z-index: 1;
        }

        .cbcn-smooth-itemBox:nth-last-child(1) {
            border-radius: 0.8em;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
            padding: 1.2em;
        }
    }

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

        .cbcn-individuation-accordion {
            margin-top: 2.4em;
        }

        /* 图片上边距 */
        .cbcn-individuation-itemBox {
            display: flex;
        }

        .cbcn-individuation-media {
            margin-top: 2.4em;
            width: 16.75em;
            height: 25em;
            overflow: hidden;
            border-radius: 0.8em;
        }

        /* 文字间距 */
        .cbcn-individuation-dec {
            margin-top: 0.8em !important;
        }

        /* 按钮间距 */

        .cbcn-individuation-switchBtnList {
            margin-top: 1.6em;
        }
    }

    /* ecological */
    @media screen {
        .cbcn-ecological-safe {
            position: relative;
            z-index: 11;
        }

        .cbcn-ecological-section.wt {
            background: #F9F9FB;
        }

        .cbcn-ecological-accordion {
            margin-top: 1.6em;
        }

        .cbcn-ecological-itemBox {
            display: flex;
        }

        .cbcn-ecological-img {
            border-radius: 0.8em;
            overflow: hidden;
            height: 15.3em;
            width: 16.75em;
            margin: 1.6em 0;
        }

        .cbcn-ecological-dec {
            margin-top: 0.8em;
        }

        .cbcn-ecological-wapBtnList1,
        .cbcn-ecological-wapBtnList2 {
            margin-top: 1.6em;
        }

        .cbcn-ecological-accordion:nth-child(2) {
            margin-top: 4em;
        }

        .cbcn-ecological-bg {
            width: 100%;
            height: 63.35em;
            bottom: 0;
            z-index: 1;
        }
    }

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

        .cbcn-ai-itemBox {
            margin-top: 1.6em;
            width: 100%;
        }

        .cbcb-ai-dec {
            gap: 0.8em !important;
            margin-top: 1.6em;
        }

        .cbcn-ai-item {
            height: 100%;
            width: 100%;
        }

        .cbcn-ai-img {
            height: 15em;
            width: 16.75em;
            border-radius: 0.8em;
            overflow: hidden;
        }

        .cbcn-ai-switchBtnList {
            margin-top: 1.6em;
        }
    }

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

        .cbcn-jump-imgbox {
            height: 10em;
            width: 100%;
            border-radius: 0.8em;
            overflow: hidden;
        }
    }

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

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

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