@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.wt {
            background: linear-gradient(154deg, #F0E7DB 15.02%, #FAF8F4 56.15%), var(--semantic-background-quinary, #FFF);
        }

        .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,
        .cbcn-ksp-item4 .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;
        }

        .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-section.wt {
            background: linear-gradient(296deg, #EADCCB -18.88%, #FCFAF8 93.87%), var(--semantic-background-quinary, #FFF);
            transition: all 0.3s;
        }

        .cbcn-color-title {
            width: 100%;
            top: 7em;
        }

        .cbcn-color-swiper {
            width: 16.25em;
            height: 18em;
            margin: 2.4em auto 1.6em;
        }

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

        .cbcn-color-btnbox {
            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;
        }
    }

    /* design1 */
    @media screen {
        .cbcn-design1-content {
            width: 16.75em;
            height: 27.5em;
            border-radius: var(--semantic-corner-primary, 0.8rem);
            background: linear-gradient(142deg, #EADDCC 20.71%, #F9F5F1 79.17%);
            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-title {
            padding: 0 1em;
        }

        .cbcn-design2-swiper {
            margin-top: 3em;
            width: 100%;
            height: 29em;
            border-radius: 0.8em;
            overflow: hidden;
        }
        .swiper-slide .cbcn-design2-media{
            opacity: 0;
        }
        .swiper-slide-active .cbcn-design2-media{
            opacity: 1;
        }

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

        .cbcn-design2-btnlist {
            width: 100%;
            height: 1.6em;
            position: relative;
        }

        .cbcn-design2-btn,
        .cbcn-design2-txt p {
            opacity: 0;
        }

        .cbcn-design2-btn.active,
        .cbcn-design2-txt p.active {
            opacity: 1;
        }

        .cbcn-design2-txt {
            margin-top: 0.6em;
            width: 100%;
            height: 2.5em;
            position: relative;
        }

        .cbcn-design2-txt>div {
            width: 100%;
        }

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

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

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

        .cbcn-image-txt {
            gap: 0.6em;
        }

        .cbcn-image-txt .cbcn-h1 {
            padding-left: 0.5em;
        }
    }

    /* camera */
    @media screen {
        .cbcn-camera-img {
            width: 18.75em;
            height: 12em;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
        }

        .cbcn-camera-param1 {
            margin-top: 3em;
        }

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

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

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

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

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

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

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

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

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

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

    /* longfocal */
    @media screen {
        .cbcn-longfocal-right {
            margin-top: 1.6em;
            position: relative;
            z-index: 12;
        }

        .cbcn-longfocal-data {
            margin-top: 3em;
            width: 100%;
            flex-wrap: wrap;
            gap: 1em 0.5em;
            position: relative;
            z-index: 9;
        }

        .cbcn-longfocal-data .cbcn-param {
            min-width: 8.125em;
        }
        .cbcn-longfocal-data .cbcn-param:nth-last-child(3) {
            order: 3;
        }
        .cbcn-longfocal-data .cbcn-param:nth-last-child(2) {
            order: 2;
        }
        .cbcn-longfocal-data .cbcn-param:nth-last-child(1) {
            order: 1;
        }

        .cbcn-longfocal-media {
            width: 100%;
            height: 34.38em;
            margin-top: -15em;
            z-index: 9;
        }
    }

    /* stagemode */
    @media screen {
        .cbcn-stagemode-swiper {
            width: 16.75em;
            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: 0.6em;
            width: 100%;
            height: 5.6em;
            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;
        }
    }

    /* photography */
    @media screen {
        .cbcn-photography-media {
            width: 100%;
            height: 21.5em;
            border-radius: 0.8em;
            overflow: hidden;
            position: relative;
            margin: 3em auto 1.6em;
        }

        .cbcn-photography-img {
            width: 18.75em;
            height: 21.5em;
            position: relative;
        }

        .cbcn-photography-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
            transform-origin: 50% 0%;
        }

        .cbcn-photography-content {
            margin-top: 3em;
        }
    }

    /* 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-mediaBox {
            margin-top: 4em;
        }

        .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;
        }
    }

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

        .cbcn-fullfocusportrait-swiper .swiper-slide {
            border-radius: 0.8em;
            overflow: hidden;
        }

        .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-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-title .cbcn-title {
            width: 100%;
            text-align: center;
        }
    }

    /* diagram */
    @media screen {
        .cbcn-diagram-section.wt {
            background: linear-gradient(180deg, rgba(245, 239, 230, 0.00) 39.39%, #F5EFE6 99.22%), var(--semantic-background-quinary, #FFF);
        }

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

    /* 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 {
            width: 18.75em;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
        }

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

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

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

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

        .cbcn-affocus-text {
            margin-top: 1.6em;
        }
    }


    /* live */
    @media screen {
        .cbcn-live-desc {
            margin-top: 2.5em;
        }
    
        .cbcn-live-desc .txt {
            opacity: 0.7 !important;
        }
    
        .cbcn-live-swiper {
            margin-top: 3em;
        }
    
        .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-switchBtnList {
            margin-top: 1.6em;
        }
    }

    /* aiimage */
    @media screen {
        .cbcn-aiimage-swiper {
            width: 16.75em;
            height: 21.5em;
            margin-top: 3em;
            border-radius: 0.8em;
            overflow: hidden;
        }
        .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;
        }
        .cbcn-aiimage-img2.active picture {
            transition-delay: 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 {
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: all 0.3s;
        }
        .swiper-slide-active .cbcn-aiimage-swiper2 {
            opacity: 1;
        }
        .cbcn-aiimage-swiper2 .swiper-slide picture {
            opacity: 0;
            transition: all 0.3s;
        }
        .cbcn-aiimage-swiper2 .swiper-slide.active picture {
            transition-delay: 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;
        }
    }

    /* external */
    @media screen {
        .cbcn-external-media {
            width: 18.75em;
            height: 12.3em;
            margin-top: 3em;
            position: relative;
            left: -1em;
        }

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

        .cbcn-external-swiper {
            width: 16.75em;
            height: 12em;
            margin-top: 1.6em;
        }

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

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

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

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

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

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

        .cbcn-external-switchBtnList {
            margin-top: 1.6em;
        }
        .cbcn-external-note {
             margin-top: 0.6em;
        }
    }

    /* 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-top: 3em;
        }

        .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;
        }

    }

    /* selfiescreen */
    @media screen {
        .cbcn-selfiescreen-img {
            width: 100vw;
            height: 34em;
            margin-top: 3em;
        }
    }

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

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

        .cbcn-performance-txt p:nth-child(1) {
            font-size: 2em;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
        }
    }

    /* chip */
    @media screen {
        .cbcn-chip-section.bk {
            background: var(--semantic-background-secondary, #161617);
        }

        .cbcn-chip-safe {
            position: relative;
            z-index: 9;
        }

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

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

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

        .cbcn-chip-param .cbcn-param:nth-child(2n) {
            width: 7.6em;
        }

        .cbcn-chip-box {
            height: 20.7em;
            width: 18.75em;
            margin-top: -3.8em;
        }
    }

    /* game */
    @media screen {
        .cbcn-game-box {
            background: linear-gradient(180deg, rgba(91, 53, 6, 0.00) 30.74%, #27160E 100%), var(--semantic-background-quinary, #000);
        }

        .cbcn-game-media {
            height: 11.15em;
            width: 18.5em;
            left: 50%;
            transform: translateX(-50%);
            position: relative;
            margin-top: 3em;
        }

        .cbcn-game-swiper {
            margin: 2.4em 1em 1.6em;
            width: 15em;
        }

        .cbcn-game-slide {
            border-radius: 0.6em;
            background: #161617;
            overflow: hidden;
            height: 10.9em;
            padding: 1.8em 1.2em;
        }
    }

    /* 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;
        }

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

        .cbcn-param-icon1 {
            width: 100%;
            height: 3.1em;
        }

        .cbcn-param-icon2,
        .cbcn-param-icon3 {
            width: 100%;
            height: 1.5em;
        }
        .cbcn-param-icon6 {
            width: 16.75em;
            height: 3.1em;
        }

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

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

        .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: 1.6em;
            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%;
            justify-content: space-between;
        }

        .cbcn-eyeshield-icon4 {
            height: 4.65em;
            width: 8.125em;
        }
        .cbcn-eyeshield-icon5 {
            height: 4.65em;
            width: 9.295em;
            margin-left: -1.17em;
        }
    }

    /* battery */
    @media screen {
        .cbcn-battery-section.bk {
            background: linear-gradient(358deg, rgba(204, 192, 185, 0.10) -1.89%, rgba(0, 0, 0, 0.00) 93.52%), var(--semantic-background-quinary, #000);
        }

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

        .cbcn-battery-img {
            width: 100vw;
            height: 27.65em;
            z-index: 10;
            bottom: 6em;
        }

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

        .cbcn-battery-param {
            gap: 1.2em;
            flex-wrap: nowrap;
        }

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

        .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: #000;
        }

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

    /* 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;
        }
    }

    /* signal2 */
    @media screen {
        .cbcn-signal2-section.bk {
            background: transparent;
        }

        .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-signal2-bg {
            background: linear-gradient(309deg, rgba(204, 192, 185, 0.10) 0%, rgba(0, 0, 0, 0.00) 59.68%), var(--semantic-background-tertiary, #111112);
        }

        .cbcn-configurations-section.bk {
            background: transparent;
        }

        .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: #000;
            overflow: hidden;
        }

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

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

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

        .cbcn-os-img {
            width: 16.4em;
            height: 4.9em;
            margin-bottom: 2.4em;
        }

        .cbcn-os-click {
            align-items: center;
            gap: 0.2em;
            flex-wrap: nowrap !important;
            justify-content: center;
            background: linear-gradient(274deg, #E2CBBB -40.73%, #754A2B 192.27%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }

    /* smooth */
    @media screen {
        .cbcn-os-bg {
            background: linear-gradient(347deg, rgba(204, 192, 185, 0.10) -7.25%, rgba(0, 0, 0, 0.00) 51.05%), linear-gradient(170deg, rgba(153, 144, 135, 0.20) 1.45%, rgba(0, 0, 0, 0.00) 32.76%), linear-gradient(354deg, #161617 20.58%, #2D2925 103.65%), var(--semantic-background-tertiary, #111112);
        }

        .cbcn-smooth-section.bk {
            background: transparent;
        }

        .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;
            background: #000;
            width: 8.125em;
            overflow: hidden;
            border-radius: 0.8em;
        }

        .cbcn-smooth-img {
            width: 3.4em;
            height: 3.4em;
            margin-bottom: 0.7em;
            overflow: hidden;
            border-radius: 0.8em;
        }

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

        .cbcn-smooth-itemFlexBox:nth-last-child(1) {
            width: 100%;
        }

        /* 丝滑流畅 */
        .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.5em;
            margin-top: 1.6em;
        }

        .cbcn-smooth-itemBox:nth-last-child(1) {
            border-radius: 0.8em;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) -1.97%, rgba(153, 144, 135, 0.20) 129.16%);
            padding: 1.2em;
         }
    }

    /* individuation */
    @media screen {
        .cbcn-individuation-section.bk {
            background: transparent;
        }

        .cbcn-individuation-media {
            height: 25em;
            width: 100%;
            overflow: hidden;
            border-radius: 0.8em;
            margin-top: 2.4em;
            background: linear-gradient(182deg, rgba(0, 0, 0, 0.00) 34.57%, rgba(153, 144, 135, 0.20) 106.64%);
        }
    }

    /* ecological */
    @media screen {
        .cbcn-ecological-section.bk {
            background: transparent;
        }

        .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;
        }
    }

    /* ai */
    @media screen {
        .cbcn-ai-section.bk {
            background: #0C0C0D;
        }

        .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.bk {
            background: #0C0C0D;
        }

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

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

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

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