@media screen and (min-width: 981px) {

    /* kv */
    @media screen {
        .cbcn-kv-section {
            margin-top: 50px;
            width: 100vw;
            height: calc(1080 / 1920 * 100vw);
          }
      
        /* .cbcn-kv-remark {
            position: absolute;
            bottom: 1.5em;
            right: 1.5em;
            text-align: right!important;
        }

        .cbcn-kv-remark div {
            color: #555;
            line-height: 150%;
        } */
    }

    /* navigation */
    @media screen {
        .cbcn-navigation-section {
            background: var(--background-l2, #0d0d0d)!important;
        }

        .cbcn-navigation-swiper {
            width: 980px;
            height: 654px;
            position: relative;
        }

        .cbcn-navigation-swiper-slide {
            right: 0;
            width: 980px;
            height: 654px;
            flex-shrink: 0;
            border-radius: 32px;
            overflow: hidden;
            background: var(--background-l1, #000);
            z-index: 50;
            transition: all 0.5s;
        }

        .cbcn-navigation-desc {
            position: absolute;
            top: 40px;
            left: 50px;
            z-index: 99;
        }

        .cbcn-navigation-swiper-slide.prev3,
        .cbcn-navigation-swiper-slide.prev2,
        .cbcn-navigation-swiper-slide.prev1 {
            margin-right: calc(50vw + 50%);
        }

        .cbcn-navigation-swiper-slide.next1 {
            right: -40px;
            width: 800px;
            height: 545px;
            border-radius: 26.667px;
            background: #000;
            z-index: 40;
        }

        .cbcn-navigation-swiper-slide.next2 {
            right: -72px;
            width: 640px;
            height: 436px;
            border-radius: 21.333px;
            background: #000;
            z-index: 30;
        }

        .cbcn-navigation-swiper-slide.next3 {
            right: -96px;
            width: 480px;
            height: 327px;
            border-radius: 16px;
            background: #000;
            z-index: 20;
        }

        .cbcn-navigation-swiper-slide.active img {
            opacity: 1;
            transition: all 0.5s;
        }

        .cbcn-navigation-swiper-slide.next1 img,
        .cbcn-navigation-swiper-slide.next2 img,
        .cbcn-navigation-swiper-slide.next3 img {
            opacity: 0;
        }


        .cbcn-navigation-swiper-btnDiv {
            margin-top: 1.5em;
            gap: 0.5em;
            justify-content: center;
        }

        .cbcn-navigation-swiper-btnList {
            height: 2.2em;
            padding: 0px 0.7em;
            gap: 0.4em;
            border-radius: 1.8em;
            background: var(--bottom-bg-l4, rgba(255, 255, 255, 0.12));
            align-items: center;
        }

        .cbcn-navigation-swiper-btn {
            padding: 0.1em;
            cursor: pointer;
        }

        .cbcn-navigation-swiper-btn.active {
            padding: 0.1em 0.2em;
        }

        .cbcn-navigation-swiper-btn-c {
            width: 0.3em;
            height: 0.3em;
            border-radius: 0.3em;
            background: var(--bottom-bg-l2, rgba(255, 255, 255, 0.25));
            overflow: hidden;
        }

        .cbcn-navigation-swiper-btn.active .cbcn-navigation-swiper-btn-c {
            width: 2.3em;
        }

        .cbcn-navigation-swiper-btn-cb {
            width: 0.3em;
            height: 100%;
            background: linear-gradient(0deg, var(--bottom-bg-l2, rgba(255, 255, 255, 0.25)) 0%, var(--bottom-bg-l2, rgba(255, 255, 255, 0.25)) 100%), var(--icon-l4, rgba(255, 255, 255, 0.35));
        }

        .cbcn-navigation-swiper-btn.active .cbcn-navigation-swiper-btn-cb {
            transition: all 2.5s linear;
            width: 2.3em;
        }

        .cbcn-navigation-swiper-replaybtn {
            width: 2.2em;
            height: 2.2em;
            transform: rotate(-8.929deg);
            flex-shrink: 0;
            cursor: pointer;
        }
    }

    /* appearance */
    @media screen {
        #cbcn-dom-container .cbcn-appearance-p1 {
            gap: 30px;
            width: 100%;
            text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)!important;
        }
        .cbcn-appearance-p1::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-p1 p {
            position: relative;
            z-index: 2;
        }

        #cbcn-dom-container .cbcn-appearance-p2 {
            width: max-content;
            gap: 275px;
            text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)!important;
        }
        .cbcn-appearance-p2::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-p2 p {
            position: relative;
            z-index: 2;
            margin-left: -25px;
        }
    }

    /* color */
    @media screen {
        .cbcn-color-section {
            height: 50em;
        }
        .cbcn-color-swiper {
            width: 100%;
            height: 100%;
        }

        .cbcn-color-txt {
            width: 100%;
            bottom: 8.5em;
            opacity: 0;
        }
        .cbcn-color-txt.active{
            opacity: 1;
        }

        .cbcn-color-btnListDiv {
            bottom: 5em;
            z-index: 99;
            display: inline-flex;
        }

        .cbcn-color-btnList {
            display: inline-flex!important;
            width: auto;
            padding: 0.31em 0.35em;
            align-items: center;
            gap: 0.4em;
            border-radius: 49.95em;
            background: rgba(255, 255, 255, 0.12);
        }

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


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

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

        .cbcn-color-btn.index0 .cbcn-color-circle {
            stroke: #F6F6F6;
        }

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

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

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

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

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

        .cbcn-eyeCatching-imgDiv {
            position: relative;
            height: 477.783px;
            margin-top: 70px;
        }
        .cbcn-eyeCatching-img {
            width: 1000px;
            height: 477.783px;
        }

        .cbcn-eyeCatching-txt2 {
            position: relative;
            z-index: 20;
            margin-top: 800px;
            justify-content: space-between;
            margin-bottom: 50px;
        }

        .cbcn-eyeCatching-txt4 {
            margin-top: 70px;
            gap: 50px 150px;
            justify-content: space-between;
        }

        .cbcn-eyeCatching-txt4 .cbcn-param {
            text-align: center;
        }

        .cbcn-eyeCatching-txt4 .cbcn-param:nth-of-type(3n+1) {
            width: 116px;
        }

        .cbcn-eyeCatching-txt4 .cbcn-param:nth-of-type(3n+2) {
            width: 232px;
        }

        .cbcn-eyeCatching-txt4 .cbcn-param:nth-of-type(3n) {
            min-width: 150px;
        }

        .cbcn-eyeCatching-txt4 .cbcn-param:nth-of-type(3n+1) .cbcn-pc-h5 {
            background: linear-gradient(90deg, #FF7E22 0%, #FBD670 100%);
            background-clip: text;
            -webkit-background-clip: text;
        }

        .cbcn-eyeCatching-txt4 .cbcn-param:nth-of-type(3n+2) .cbcn-pc-h5 {
            background: linear-gradient(90deg, #FBD670 0%, #537BFF 100%);
            background-clip: text;
            -webkit-background-clip: text;
        }

        .cbcn-eyeCatching-txt4 .cbcn-param:nth-of-type(3n) .cbcn-pc-h5, .cbcn-eyeCatching-txt4 .cbcn-param:nth-of-type(3n) sup {
            background: linear-gradient(85deg, #4D62FF 19.19%, #629AF4 87.01%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .cbcn-eyeCatching-txt4 .cbcn-param .cbcn-pc-h5 {
            -webkit-text-fill-color: transparent;
        }

        .cbcn-eyeCatching-icon {
            width: 7.5925em;
            height: 3.3em;
        }
    }

    /* originalcolor */
    @media screen {
        .cbcn-originalcolor-content {
            padding-top: 6em;
            height: 100%;
        }
        .cbcn-originalcolor-txt1,
        .cbcn-originalcolor-txt2 {
            position: relative;
            z-index: 10;
        }

        .cbcn-originalcolor-txt1 {
            opacity: 1;
            margin-top: 0;
            transition: all 0.5s;
        }

        .cbcn-originalcolor-content.active .cbcn-originalcolor-txt1 {
            opacity: 0;
            margin-top: -1em;
        }

        .cbcn-originalcolor-txt2 {
            width: max-content;
            position: absolute;
            top: 6em;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            margin-top: 3em;
            transition: all 0.5s;
        }

        .cbcn-originalcolor-content.active .cbcn-originalcolor-txt2 {
            opacity: 1;
            margin-top: 0;
        }

        .cbcn-originalcolor-img2 {
            display: none;
        }

        .cbcn-originalcolor-img {
            width: 70em;
            height: 39.375em;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -25%);
        }
    }

    /* eyeprotection */
    @media screen {
        .cbcn-eyeprotection-title {
            position: relative;
            z-index: 9;
            width: 720px;
        }

        .cbcn-eyeprotection-img {
            width: 1600px;
            height: 900px;
            flex-shrink: 0;
            top: 240px;
        }

        .cbcn-eyeprotection-img-2 {
            opacity: 0;
        }

        .cbcn-eyeprotection-txt2 {
            width: 750px;
            margin-left: auto;
            margin-right: auto;
            position: relative;
            z-index: 20;
            margin-top: 680px;
            justify-content: space-between;
            margin-bottom: 50px;
        }

        .cbcn-eyeprotection-fn {
            z-index: 9;
            top: 920px;
            text-align: center;
            font-size: 8px;
            color: rgba(255, 255, 255, 0.35)!important;
        }
    }

    /* audiovisual */
    @media screen {
        .cbcn-audiovisual-txt1 {
            position: relative;
            z-index: 20;
        }

        .cbcn-audiovisual-img {
            width: 1778px;
            height: 1000px;
            flex-shrink: 0;
            top: 133px;
        }

        .cbcn-audiovisual-txt2 {
            position: relative;
            z-index: 20;
            margin-top: 637px;
            justify-content: center;
            gap: 400px;
        }

        .cbcn-audiovisual-txt3 {
            position: relative;
            z-index: 20;
            margin-top: 70px;
        }

        .cbcn-audiovisual-txt4 {
            position: relative;
            z-index: 20;
            margin-top: 50px;
            gap: 55px;
            justify-content: center;
        }

        .cbcn-audiovisual-txt4 .cbcn-pc-h5,
        .cbcn-audiovisual-txt4 .cbcn-pc-h5 sup {
            padding-top: 15px;
            border-top: 1px solid #4D4D4D;
            background: linear-gradient(0deg, #D8FAFF -16.98%, #0095FF 113.21%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }

    /* chip */
    @media screen {
        .cbcn-chip-img {
            width: 1920px;
            height: 1080px;
            top: 4em;
        }

        .cbcn-chip-txt1 {
            position: relative;
            z-index: 20;
        }

        .cbcn-chip-txt1 .cbcn-pc-h1 {
            position: relative;
            z-index: 20;
        }

        .cbcn-chip-txt1 .cbcn-chip-txt1-bg {
            position: absolute;
            top: -29px;
            z-index: 1;
            border-radius: 1200px;

        }

        .cbcn-chip-txt2 {
            position: relative;
            z-index: 20;
            margin-top: 600px;
            width: 472px;
            justify-content: space-between;
            margin-bottom: 40px;
        }

        .cbcn-chip-btn {
            width: 20px;
            padding: 8px 10px 8px 20px;
            position: fixed;
            left: 0;
            right: 0;
            z-index: 99;
            bottom: 20px;
            z-index: 20;
            justify-content: center;
            align-items: center;
            flex-wrap: nowrap;
            gap: 15px;
            cursor: pointer;

            opacity: 0;
            transform: translateY(10vh);
            transition: all 0.5s cubic-bezier(0.2, 0.75, 0.3, 1.3), width 0.3s ease-in-out;
        }
        .cbcn-chip-btn::after{
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
            border-radius: 56px;
            overflow: hidden;
            background: rgba(122, 122, 122, 0.50);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
        }
        .cbcn-chip-btn * {
            flex-shrink: 0;
        }
        .cbcn-chip-btn.active{
            width: 172px;
            opacity: 1;
            transform: translateY(0);
        }

        .cbcn-chip-btn p {
            color: var(--text-l2, rgba(0, 0, 0, 0.95))!important;
        }

        .cbcn-chip-icon {
            width: 36px;
            height: 36px;
        }

        .cbcn-chip-popup-txt1 {
            margin-top: 30px;
            width: 636px;
        }

        .cbcn-chip-popup-txt2 {
            margin-top: 27px;
            padding-top: 43px;
            border-top: 1px solid rgba(255, 255, 255, 0.50);
            width: 636px;
            justify-content: center;
            gap: 50px 25px;
        }

        .cbcn-chip-popup-txt2>div {
            width: 194px;
        }

        .cbcn-chip-popup-txt2 .cbcn-param:nth-of-type(n+4) {
            width: 210px;
        }

        .cbcn-chip-popup-txt2 .color1 {
            background: linear-gradient(90deg, #364EFF 32.28%, #5CB6FF 66.4%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .cbcn-chip-popup-txt2 .color2 {
            background: linear-gradient(90deg, #5AADF0 15.46%, #9068FF 88.14%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .cbcn-chip-popup-txt2 .color3 {
            background: linear-gradient(90deg, #8A60FF 25%, #FF62EA 75.28%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .cbcn-chip-popup-txt2 .color4 {
            background: linear-gradient(90deg, #8A60FF 26.8%, #FF62EA 115.46%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .cbcn-chip-popup-txt2 .color5 {
            background: linear-gradient(90deg, #5AADF0 0.28%, #9068FF 76.11%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .cbcn-chip-popup-txt2 .color6 {
            background: linear-gradient(88deg, #7D7AFB 33.16%, #9860FC 66.31%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }

    /* cooling */
    @media screen {
        .cbcn-cooling-img {
            width: 1600px;
            height: 898.8764px;
            flex-shrink: 0;
            margin-top: 50px;
        }

        .cbcn-cooling-section {
            height: 1000px;
        }

        .cbcn-cooling-txt1 {
            position: relative;
            z-index: 20;
            width: 740px;
        }

        .cbcn-cooling-txt2 {
            margin-top: 70px;
            position: relative;
            z-index: 20;
            justify-content: center;
            transition: all 0.5s;
            opacity: 0;
        }

        .cbcn-cooling-txt2.active {
            opacity: 1;
        }

        .cbcn-cooling-upicon {
            height: 26px;
            flex-shrink: 0;
            position: relative;
            top: 3px;
            left: 5px;
        }
    }

    /* game */
    @media screen {
        .cbcn-game-img {
            width: 1920px;
            height: 1080px;
            flex-shrink: 0;
            top: 280px;
        }

        .cbcn-game-txt1 {
            position: relative;
            z-index: 20;
        }

        .cbcn-game-txt2 {
            position: relative;
            z-index: 20;
            margin-top: 760px;
            height: 228px;
            justify-content: space-between;
        }

        .cbcn-game-txt2-item {
            width: 308px;
            padding: 30px 0;
            border-radius: 24px;
            transition: all 0.5s;
        }

        .cbcn-game-txt2-title {
            justify-content: center;
            align-items: center;
            gap: 10px;
            flex-wrap: nowrap;
        }

        .cbcn-game-txt2-icon {
            width: 32px;
            height: 32px;
        }

        .cbcn-game-txt2 .cbcn-pc-b3 {
            opacity: 0;
            transition: all 0.5s;
        }

        .cbcn-game-txt2-item:hover {
            background: rgba(52, 52, 52, 0.40);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
        }

        .cbcn-game-txt2-item:hover .cbcn-pc-b3 {
            opacity: 1;
        }

        .cbcn-game-txt2-item:hover .cbcn-game-txt2-icon {
            display: none;
        }

        .cbcn-game-txt2-item:hover .cbcn-game-txt2-title p {
            font-size: var(--font-size-body-1, 21px);
            font-style: normal;
            font-weight: 650;
            line-height: 150%;
        }
    }

    /* deltaaction */
    @media screen {
        .cbcn-deltaaction-section {
            padding: 30px;
        }

        .cbcn-deltaaction-content {
            max-width: 93em;
            width: 964px;
            height: 469px;
            position: relative;
            border-radius: 24px;
            overflow: hidden;
        }

        .cbcn-deltaaction-img {
            width: 93em;
            height: 69.75em;
            bottom: 0;
        }

        .cbcn-deltaaction-txt1 {
            width: 100%;
            height: 100%;
            padding-top: 280px;
            align-items: center;
            gap: 26px;
            position: relative;
            z-index: 9;
            opacity: 0;
        }

        .cbcn-deltaaction-title {
            height: 60px;
        }

        .cbcn-deltaaction-icon {
            width: 134.054px;
            height: 36px;
            flex-shrink: 0;
        }
    }

    /* livestreaming */
    @media screen {
        .cbcn-livestreaming-imgDiv {
            width: 100%;
            height: 712.993px;
            top: 323px;
        }

        .cbcn-livestreaming-img-1 {
            position: absolute;
            top: 41px;
            left: 50%;
            margin-left: -500px;
            width: 980px;
            height: 671.836px;
            z-index: 20;
        }

        .cbcn-livestreaming-img-2 {
            position: absolute;
            top: 70px;
            left: 50%;
            margin-left: -240px;
            width: 735.04px;
            height: 604.938px;
            opacity: 0;
            z-index: 10;
        }

        .cbcn-livestreaming-txt2 {
            margin-top: 831px;
            width: 636px;
            justify-content: space-between;
        }

        .cbcn-livestreaming-upicon {
            height: 28px;
            flex-shrink: 0;
            position: relative;
            top: 5px;
            left: 5px;
        }
    }

    /* battery */
    @media screen {
        .cbcn-battery-content {
            margin-top: 40px;
            justify-content: center;
        }

        .cbcn-battery-content,
        .cbcn-battery-img {
            width: 84em;
            height: 27em;
        }

        .cbcn-battery-txt2 {
            position: relative;
            top: 230px;
            width: 650px;
            gap: 50px 244px;
            opacity: 0;
        }

        .cbcn-battery-txt2 .cbcn-param {
            width: 200px;
            text-align: center;
        }

        .cbcn-battery-txt2 .cbcn-pc-h5 {
            background: linear-gradient(89deg, #629AF4 13.79%, #78ACFF 53.13%, #4D62FF 97.27%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }

    /* signal */
    @media screen {
        .cbcn-signal-content {
            margin-top: 70px;
            gap: 20px;
            justify-content: center;
        }

        .cbcn-signal-txt1 {
            width: 100%;
            border-radius: 24px;
            background: #0D0D0D;
            overflow: hidden;
            justify-content: center;
            align-items: center;
            gap: 180px;
        }

        .cbcn-signal-txt1 .cbcn-signal-title {
            width: 200px;
            align-items: center;
            gap: 30px;
            text-align: center;
        }

        .cbcn-signal-txt1 .cbcn-signal-title .cbcn-pc-h5 {
            background: linear-gradient(89deg, #629AF4 13.79%, #78ACFF 53.13%, #4D62FF 97.27%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .cbcn-signal-icon1 {
            width: 157.167px;
            height: 123px;
            flex-shrink: 0;
        }

        .cbcn-signal-icon2 {
            width: 124.952px;
            height: 128px;
            flex-shrink: 0;
        }

        .cbcn-signal-txt2{
            width: 370px;
            padding: 80px 0 97px;
        }

        .cbcn-signal-paramGroup {
            gap: 30px 126px;
            justify-content: space-between;
            margin-top: 50px;
        }

        .cbcn-signal-paramGroup .cbcn-param {
            min-width: 120px;
            align-items: flex-start;
        }

        .cbcn-signal-txt3{
            width: 370px;
            padding: 70px 0 65px;
        }
        .cbcn-signal-paramGroup2 {
            gap: 30px;
            margin-top: 70px;
        }
        .cbcn-signal-paramGroup2 .cbcn-param {
            min-width: 120px;
            align-items: flex-start;
        }
    }

    /* os */
    @media screen {
        .cbcn-os-section.wt {
            background: var(--background-l3, #EBEBEB);
        }

        .cbcn-os-img {
            width: 987px;
            height: 315px;
            margin-bottom: -36.5px;
        }
    }

    /* work */
    @media screen {
        .cbcn-work-section.wt {
            background: var(--background-l3, #EBEBEB);
        }

        .cbcn-work-imgDiv {
            width: 100%;
            height: 39.3em;
            position: relative;
            margin-top: 1.5em;
        }

        .cbcn-work-img-1 {
            width: 800px;
            height: 546px;
            position: absolute;
            top: 240px;
            right: 50%;
            margin-right: -400px;
            z-index: 3;
        }

        .cbcn-work-img-2 {
            width: 400px;
            height: 268px;
            position: absolute;
            top: 138px;
            right: 50%;
            margin-right: 0;
            z-index: 2;
        }


        .cbcn-work-img-3 {
            width: 400px;
            height: 268px;
            position: absolute;
            top: 138px;
            left: 50%;
            margin-left: 0;
            z-index: 2;
        }


        .cbcn-work-img-4 {
            width: 268px;
            height: 400px;
            position: absolute;
            top: 332px;
            right: 50%;
            margin-right: 270px;
            z-index: 1;
        }

        .cbcn-work-img-5 {
            width: 268px;
            height: 400px;
            position: absolute;
            top: 332px;
            left: 50%;
            margin-left: 278px;
            z-index: 1;
        }

        .cbcn-work-btn {
            width: 20px;
            padding: 8px 10px 8px 20px;
            position: fixed;
            left: 0;
            right: 0;
            z-index: 99;
            bottom: 20px;
            z-index: 20;
            justify-content: center;
            align-items: center;
            flex-wrap: nowrap;
            gap: 15px;
            cursor: pointer;
    
            opacity: 0;
            transform: translateY(10vh);
            transition: all 0.5s cubic-bezier(0.2, 0.75, 0.3, 1.3), width 0.3s ease-in-out;
        }
        .cbcn-work-btn::after{
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
            border-radius: 56px;
            overflow: hidden;
            background: rgba(217, 217, 217, 0.50);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
        }
        .cbcn-work-btn p {
            color: rgba(0, 0, 0, 0.9)!important;
        }
        .cbcn-work-btn * {
            flex-shrink: 0;
        }
        .cbcn-work-btn.active{
            width: 172px;
            opacity: 1;
            transform: translateY(0);
        }

        .cbcn-work-icon {
            width: 36px;
            height: 36px;
        }

        .cbcn-work-popup-content {
            gap: 70px;
            padding: 0 164px;
        }

        .cbcn-work-popup-item {
            align-items: center;
            gap: 50px;
        }

        .cbcn-work-popupimg {
            width: 636px;
            height: 428px;
            flex-shrink: 0;
        }

        .cbcn-work-txt2 .cbcn-title .cbcn-pc-b1 {
            color: var(--text-l2, rgba(0, 0, 0, 0.60))!important;
        }

        .cbcn-work-txt2 .cbcn-title .cbcn-pc-b3 {
            color: var(--text-l4, rgba(0, 0, 0, 0.40))!important;
        }

        .cbcn-work-popup .cbcn-pc-fn{
            text-align: center;
            font-size: 8px;
            color: rgba(0, 0, 0, 0.30)!important;
        }
    }

    /* softlight */
    @media screen {
        .cbcn-softlight-txt4 {
            justify-content: center;
            flex-wrap: nowrap;
            gap: 50px;
        }

        .cbcn-softlight-txt4 .cbcn-param {
            width: 207.5px;
        }

        .cbcn-softlight-txt4 .cbcn-pc-h5 {
            position: relative;
        }

        .cbcn-softlight-img {
            width: 964px;
            height: 486.81998px;
        }

        .cbcn-softlight-fn {
            padding-top: 20px;
            padding-bottom: 70px;
        }

        .cbcn-softlight-imgDiv {
            width: 100%;
            height: 486.81998px;
            margin-top: 70px;
        }

        .cbcn-softlight-txt4 .cbcn-param .cbcn-pc-h5 sup {
            position: static !important;
        }

        .cbcn-softlight-txt4 .cbcn-param:nth-child(1) .cbcn-pc-h5 {
            width: 170px;
            text-align: center;
            background: linear-gradient(73deg, #3D88FF 25.09%, #C86EFF 214.42%, #FF56B5 367.53%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .cbcn-softlight-txt4 .cbcn-param:nth-child(2) .cbcn-pc-h5 {
            width: 170px;
            text-align: center;
            background: linear-gradient(67deg, #3D88FF -60.86%, #C86EFF 120.43%, #FF56B5 267.04%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .cbcn-softlight-txt4 .cbcn-param:nth-child(3) .cbcn-pc-h5 {
            width: 170px;
            text-align: center;
            background: linear-gradient(67deg, #3D88FF -93.57%, #C86EFF 53.37%, #FF56B5 172.21%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .cbcn-softlight-txt4 .cbcn-param:nth-child(4) .cbcn-pc-h5 {
            width: 170px;
            text-align: center;
            background: linear-gradient(67deg, #3D88FF -241.82%, #C86EFF -40.72%, #FF56B5 121.9%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }

    /* AI */
    @media screen {
        .cbcn-ai-section {
            background: var(--background-l2, #F2F2F2)!important;
        }

        .cbcn-ai-content {
            margin-top: 70px;
            height: 520px;
            border-radius: 24px;
            background: var(--background-l1, #FFF);
            overflow: hidden;
            position: relative;
        }

        .cbcn-ai-imgDiv {
            right: 30px;
        }
        .cbcn-ai-img {
            width: 480px;
            height: 329.28px;
        }

        #cbcn-dom-container .cbcn-ai-img img.contain:not(.active), #cbcn-dom-container .cbcn-ai-img video.contain:not(.active) {
            display: none;
        }

        .cbcn-ai-drawer {
            margin-top: 50px;
            margin-left: 40px;
            width: 19em;
            position: relative;
        }

        .cbcn-ai-drawer-line {
        }

        .cbcn-ai-drawer-item {
            cursor: pointer;
            padding: 22px 0;
            border-bottom: 1px solid #b3b3b3;
        }
        .cbcn-ai-drawer-item:nth-last-of-type(1){
            border: none;
        }

        .cbcn-ai-drawer-item .title {
            justify-content: space-between;
            align-items: center;
        }

        .cbcn-ai-drawer-iconbox {
            width: 56px;
            height: 28px;
            justify-content: center;
            align-items: center;
            border-radius: 50px;
            background-color: rgba(0, 0, 0, 0.05);
        }

        .cbcn-ai-drawer-icon {
            width: 24px;
            height: 8px;
            transition: all 0.5s;
            transform: rotateX(180deg);
        }

        .cbcn-ai-drawer-item.active .cbcn-ai-drawer-icon {
            transform: rotateX(0);
        }

        #cbcn-dom-container .cbcn-ai-drawer-item .cbcn-pc-h5 {
            color: rgba(0, 0, 0, 0.60);
        }

        .cbcn-ai-drawer-item.active .cbcn-pc-h5,
        .cbcn-ai-drawer-item.active .cbcn-pc-h5 * {
            background: linear-gradient(93deg, #5266FF 1.69%, #629AF4 99.05%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .cbcn-ai-drawer-item .desc {
            box-sizing: border-box;
            overflow: hidden;
            padding-right: 1.5em;
            height: 0;
        }

        .cbcn-ai-drawer-item .desc p {
            padding-top: 22px;
        }

        .cbcn-ai-drawer-item:first-child .desc {
            height: auto;
        }

        .cbcn-ai-imgDiv .cbcn-pc-fn {
            width: 480px;
            margin-top: 32px;
            text-align: center;
            font-size: 8px;
            color: rgba(0, 0, 0, 0.30)!important;
            display: none;
        }
        .cbcn-ai-imgDiv .cbcn-pc-fn.active {
            display: block;
        }
    }

    /* multidevice */
    @media screen {
        .cbcn-multidevice-section {
            background: #EBEBEB!important;
        }

        .cbcn-multidevice-img {
            margin-top: 70px;
            width: 100%;
            height: 646px;
        }

        .cbcn-multidevice-btn {
            width: 20px;
            padding: 8px 10px 8px 20px;
            position: fixed;
            left: 0;
            right: 0;
            z-index: 99;
            bottom: 20px;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: center;
            gap: 15px;
            cursor: pointer;
    
            opacity: 0;
            transform: translateY(10vh);
            transition: all 0.5s cubic-bezier(0.2, 0.75, 0.3, 1.3), width 0.3s ease-in-out;
        }
        .cbcn-multidevice-btn::after{
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
            border-radius: 56px;
            overflow: hidden;
            background: rgba(217, 217, 217, 0.50);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
        }
        .cbcn-multidevice-btn p {
            color: rgba(0, 0, 0, 0.9)!important;
        }
        .cbcn-multidevice-btn * {
            flex-shrink: 0;
        }
        .cbcn-multidevice-btn.active{
            width: 172px;
            opacity: 1;
            transform: translateY(0);
        }

        .cbcn-multidevice-icon {
            width: 36px;
            height: 36px;
        }

        .cbcn-multidevice-popup .cbcn-popup-content {
            background: #F2F2F2;
        }

        .cbcn-multidevice-content {
            gap: 70px;
            width: 636px;
            margin-top: 30px;
        }

        .cbcn-multidevice-item {
            align-items: center;
        }

        .cbcn-multidevice-popup-img1 {
            width: 100%;
            height: 395px;
        }

        .cbcn-multidevice-popup-img2 {
            width: 100%;
            height: 445px;
        }

        .cbcn-multidevice-popup-img3 {
            width: 100%;
            height: 440px;
        }

        .cbcn-multidevice-popup-img4 {
            width: 100%;
            height: 317px;
        }

        .cbcn-multidevice-replaybtn {
            margin-top: 20px;
            padding: 5px 12px;
            align-items: center;
            gap: 4px;
            border-radius: 84.36px;
            background: var(--bottom-bg-l4, rgba(0, 0, 0, 0.05));
        }

        .cbcn-multidevice-replaybtn svg {
            width: 14px;
            height: 14px;
        }

        .cbcn-multidevice-replaybtn p {
            color: var(--icon-l4, rgba(0, 0, 0, 0.30))!important;
        }

        .cbcn-multidevice-txt {
            margin-top: 40px;
        }
    }

    /* accessory */
    @media screen {

        .cbcn-accessory-card1 {
            z-index: 9;
            width: 53em;
            min-width: 1060px;
            border-radius: 1.6em;
            flex-shrink: 0;
            text-align: center;
            background: #000;
        }

        .cbcn-accessory-txt2 {
            width: 800px;
        }

        .cbcn-accessory-card-btn {
            display: inline-flex!important;
            padding: 12px 24px;
            color: var(--text-l2, rgba(0, 0, 0, 0.60));
            border-radius: 51px;
            background: var(--bottom-bg-l4, rgba(0, 0, 0, 0.05));
            cursor: pointer;
        }

        .cbcn-accessory-card1 .cbcn-accessory-card-btn {
            margin-top: 70px;
        }

        .cbcn-accessory-card-btn p {
            color: var(--text-l2, rgba(0, 0, 0, 0.60))!important;
        }


        .cbcn-accessory-img1 {
            width: 53.5em;
            height: 2.92857em;
            margin-top: 13em;
            left: 50vw;
            z-index: 10;
            transform-origin: 50% 50%;
        }

        .cbcn-accessory-bg {
            width: 69em;
            height: 8em;
            margin-top: 13.65em;
            margin-left: 2em;
            opacity: 0;
            z-index: 9;
        }

        .cbcn-accessory-img2 {
            width: 80em;
            height: 54.7em;
            margin-top: 100em;
            z-index: 50;
        }


        .cbcn-accessory-card2 {
            z-index: 9;
            width: 980px;
            height: 630px;
            border-radius: 30px;
            background: #0D0D0D;
            opacity: 0;
        }

        .cbcn-accessory-card2-line {
            width: 2px;
            height: 500px;
            border-radius: 4px;
            background: rgba(244, 244, 244, 0.10);
            z-index: 50;
        }

        .cbcn-accessory-card2-left {
            width: 50%;
            text-align: center;
            position: relative;
        }

        .cbcn-accessory-card2-right {
            width: 50%;
            text-align: center;
            position: relative;
        }

        .cbcn-accessory-card2 .cbcn-title {
            width: 305px;
            margin-top: 376px;
            margin-bottom: 30px;
        }

        .cbcn-accessory-img3 {
            margin-top: 40vh;
            margin-left: 100vw;
            width: 75.317em;
            height: 59.4em;
            z-index: 50;
            opacity: 0;
        }
    }

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

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

        .cbcn-remark-section ol li {
            list-style: decimal;
            color: var(--text-l3, rgba(0, 0, 0, 0.50));
        }
    }
}


@media screen and (max-width: 1439px) and (min-width: 981px) {
    .cbcn-originalcolor-content {
        padding-top: 7.5em;
    }
  .cbcn-originalcolor-section .cbcn-pc-h1{
    font-size: 40px;
  }
  .cbcn-originalcolor-section .cbcn-pc-b1{
    font-size: 16px;
  }
}