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

    /* kv */
    @media screen {
        #cbcn-dom-container .cbcn-kv-section img {
            object-position: center top;
        }

        .cbcn-kv-svg {
            width: 253.981px;
            height: 40px;
            margin-bottom: 19px;
        }
    }

    /* ksp */
    @media screen {
        .cbcn-ksp-section {
            padding: 47px 0;
        }

        .cbcn-ksp-item {
            position: relative;
            width: 30rem;
            height: 30.6rem;
            border-radius: 30px;
            overflow: hidden;
            background-size: 100% 100%;
            transition: background 0.5s;
            background-position: center;
        }

        .cbcn-ksp-item:hover {
            background-size: 105% 105%;
        }

        .cbcn-ksp-item2,
        .cbcn-ksp-item3 {
            height: 14.8rem;
        }

        .cbcn-ksp-p1 {
            margin-top: 2rem;
            padding-left: 2.5rem;
            width: 100%;
            font-size: 1.1rem;
        }

        .cbcn-ksp-item2 .cbcn-ksp-p1,
        .cbcn-ksp-item3 .cbcn-ksp-p1 {
            font-size: 1.1rem;
        }

        .cbcn-ksp-p2 {
            position: absolute;
            bottom: 2rem;
            left: 2.5rem;
            width: 100%;
            font-size: 0.7rem;
        }
    }

    /* color */
    @media screen {
        .cbcn-color-txt {
            top: 4.6rem;
            width: 47em;
        }

        .cbcn-color-svg {
            width: 12.69905em;
            height: 2em;
        }

        .cbcn-color-p2 {
            margin-top: 38px;
            font-size: 0.8em;
        }
    }

    /* param */
    @media screen {

        .cbcn-param-mask1 {
            top: 0;
            width: 100%;
            height: 12em;
            background: linear-gradient(180deg, #000 -2%, rgba(0, 0, 0, 0.00) 102.31%);
            z-index: 3;
        }

        .cbcn-param-mask2 {
            bottom: 0;
            width: 100%;
            height: 12em;
            background: linear-gradient(0deg, #000 -2%, rgba(0, 0, 0, 0.00) 102.31%);
            z-index: 3;
        }

        .cbcn-param-mask3 {
            left: 0;
            width: 36.3em;
            height: 100%;
            background: linear-gradient(90deg, #010101 39.05%, rgba(0, 0, 0, 0.00) 100%);
            z-index: 3;
        }

        .cbcn-param-btndiv {
            z-index: 6;
            bottom: 4.35rem;
            width: 14.15rem;
            height: 2.95rem;
            border-radius: 5rem;
            background: rgba(255, 255, 255, 0.20);
            backdrop-filter: blur(25px);
            user-select: none;
            padding: 0.25rem 0.3rem;
        }


        .cbcn-param-btn {
            width: 6.65rem;
            height: 2.45rem;
            position: relative;
            cursor: pointer;
            user-select: none;
            z-index: 3;
        }

        .cbcn-param-btn-a {
            width: 6.65rem;
            height: 2.45rem;
            border-radius: 5rem;
            background: #FF5A00;
            backdrop-filter: blur(25px);
            left: 0.3rem;
            z-index: 2;
        }

        .cbcn-param1-imgdiv {
            width: 79.2em;
            height: 54em;
            z-index: 1;
        }

        .cbcn-param1-point {
            position: absolute;
            width: 1.2em;
            height: 1.2em;
            z-index: 20;
            opacity: 0;
        }

        .cbcn-param1-point svg {
            width: 100%;
            height: 100%;
        }


        .cbcn-param1-point.index1 {
            top: 33.8em;
            left: 24.5em;
        }

        .cbcn-param1-point.index2 {
            top: 35em;
            left: 53em;
        }

        .cbcn-param1-txt {
            padding-bottom: 5em;
            left: 15em;
            z-index: 5;
        }

        .cbcn-param1-logo {
            margin-bottom: 1.8rem;
            height: 40px;
        }

        .cbcn-param1-txt-item {
            margin-top: 1.25em;
        }

        .cbcn-param2-imgdiv {
            width: 145em;
            height: 54em;
            left: 26.3em;
            z-index: 1;
            opacity: 0;
        }

        .cbcn-param2-point {
            position: absolute;
            width: 1.2em;
            height: 1.2em;
            z-index: 20;
            opacity: 0;
        }

        .cbcn-param2-point svg {
            width: 100%;
            height: 100%;
        }


        .cbcn-param2-point.index1 {
            top: 29em;
            left: 83em;
        }

        .cbcn-param2-txt {
            padding-bottom: 5em;
            left: 15em;
            z-index: 5;
            opacity: 0;
        }

        .cbcn-param2-logo {
            margin-bottom: 1.8rem;
            height: 40px;
        }

        .cbcn-param2-txt-item {
            margin-top: 1.25em;
        }
    }

    /* scene */
    @media screen {
        .cbcn-scene-section {
            padding-top: 128px;
        }

        .cbcn-scene-content {
            overflow: hidden;
        }

        .cbcn-scene-swiperdiv {
            margin-top: 3.71rem;
            width: 100%;
            height: 360px;
        }

        .cbcn-scene-swiper {
            width: 1800px;
            height: 360px;
        }

        .cbcn-scene-slide {
            overflow: hidden;
            border-radius: 30px;
        }

        .cbcn-scene-swiper-pagediv {
            margin-top: 3rem;
            width: 37px;
        }

        .cbcn-scene-swiper-page {
            width: 7px;
            height: 7px;
            background-color: #D9D9D9;
            border-radius: 50%;
        }

        .cbcn-scene-swiper-page.active {
            background-color: #FF5A00;
        }

        .cbcn-scene-swiper-btndiv {
            margin-top: 1.5rem;
            width: 15.55rem;
            height: 2.95rem;
            border-radius: 100px;
            background: #FF5A00;
            backdrop-filter: blur(25px);
        }

        .cbcn-scene-swiper-btndiv p {
            line-height: 2.95rem;
            font-size: 0.8rem;
        }

        .cbcn-scene-swiper-p {
            display: none;
        }

        .cbcn-scene-swiper-p.active {
            display: block;
        }

        .cbcn-scene-swiper-btn.prev {
            padding-left: 20px;
            cursor: pointer;
        }

        .cbcn-scene-swiper-btn.next {
            padding-right: 20px;
            cursor: pointer;
        }

        .cbcn-scene-swiper-btn svg {
            height: 100%;
        }
    }

    /* solution */
    @media screen {
        .cbcn-solution-section {
            padding-top: 150px;
            padding-bottom: 130px;
        }

        .cbcn-solution-item {
            width: 45.64885rem;
        }

        .cbcn-solution-imgdiv {
            width: 100%;
            height: 23.87785rem;
            border-radius: 1.5rem;
            overflow: hidden;
            margin-bottom: 35px;
            background-size: 100%;
            background-position: center;
            transition: all 0.5s;
        }

        .cbcn-solution-item:hover .cbcn-solution-imgdiv {
            background-size: 110%;
        }

    }

}

/*    1024 */
@media screen and (max-width: 1023px) {

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

        .cbcn-kv-txt {
            position: absolute;
            bottom: 3.2rem;
            left: 1.5rem;
        }

        .cbcn-kv-logo {
            height: 2rem;
        }

        .cbcn-kv-p1 {
            font-size: 1.5rem;
            margin-top: 1.55rem;
        }
    }

    /* ksp */
    @media screen {
        .cbcn-ksp-section {
            padding-top: 2.6rem;
            padding-bottom: 2.94rem;
        }

        .cbcn-ksp-item {
            position: relative;
            width: 100%;
            height: 25.1rem;
            border-radius: 1.5rem;
            overflow: hidden;
            background-size: cover;
            background-position: center;
            margin-bottom: 0.6rem;
        }

        .cbcn-ksp-item2 {
            width: 17rem;
            height: 10.2rem;
        }

        .cbcn-ksp-item3 {
            width: 17rem;
            height: 6.617rem;
        }

        .cbcn-ksp-item4 {
            width: 17rem;
            height: 17.3rem;
        }

        .cbcn-ksp-p {
            padding-top: 1.22rem;
            padding-left: 1.5rem;
            font-size: 0.8rem;
        }

        .cbcn-ksp-item1 p {
            font-size: 1.5rem;
            padding-top: 2.15rem;
            padding-left: 2.65rem;
        }

        .cbcn-ksp-item3 p {
            padding-left: 6.96rem;
            padding-top: 0;
        }
    }

    /* color */
    @media screen {
        .cbcn-color-section {
            height: 54rem;
        }

        .cbcn-color-txt {
            width: 32.65rem;
            top: 3.75rem;
        }

        .cbcn-color-p2 {
            margin-top: 1.35rem;
        }
    }

    /* param */
    @media screen {
        .cbcn-param-img {
            width: 110rem;
            height: 54rem;
            left: 26.3rem;
        }

        .cbcn-param-svg1 {
            position: absolute;
            left: 55.25rem;
            top: 27.95rem;
            width: 1.4rem;
            opacity: 0;
        }

        .cbcn-param-svg2 {
            position: absolute;
            left: 81.05rem;
            top: 31.05rem;
            width: 1.4rem;
            opacity: 0;
        }

        .cbcn-param-txt {
            padding-bottom: 7rem;
            left: 1.5rem;
        }

        .cbcn-param-p1 {
            padding-bottom: 1.8rem;
            font-size: 2rem;
        }

        .cbcn-param-txt-item {
            margin-top: 3rem;
        }

        .cbcn-param-txt-item p {
            font-size: 0.8rem;
        }
    }

    /* scene */
    @media screen {
        .cbcn-scene-section {
            padding-top: 5.5rem;
        }

        .cbcn-scene-p1 {
            font-size: 2rem;
        }

        .cbcn-scene-swiperdiv {
            margin-top: 5.51rem;
            width: 100%;
            height: 18.07465rem;
        }

        .cbcn-scene-swiper {
            width: 30.12445rem;
            height: 18.07465rem;
        }


        .cbcn-scene-swiper {
            width: 90.37335rem;
            height: 18.07465rem;
        }

        .cbcn-scene-slide {
            overflow: hidden;
            border-radius: 0.90375rem;
        }

        .cbcn-scene-swiper-pagediv {
            margin-top: 2.38rem;
            width: 4.24955rem;
        }

        .cbcn-scene-swiper-page {
            width: 0.80385rem;
            height: 0.80385rem;
            background-color: #D9D9D9;
            border-radius: 50%;
        }

        .cbcn-scene-swiper-page.active {
            background-color: #FF5A00;
        }

        .cbcn-scene-swiper-btndiv {
            margin-top: 3rem;
            width: 17.28195rem;
            height: 3.27005rem;
            border-radius: 5.5399rem;
            background: #FF5A00;
            backdrop-filter: blur(27.699512481689453px);
        }

        .cbcn-scene-swiper-btndiv p {
            line-height: 3.27005rem;
        }

        .cbcn-scene-swiper-btndiv svg {
            height: 3.27005rem;
        }

        .cbcn-scene-swiper-btn.prev {
            padding-left: 1.39rem;
            cursor: pointer;
        }

        .cbcn-scene-swiper-btn.next {
            padding-right: 1.13rem;
            cursor: pointer;
        }
    }

    /* solution */
    @media screen {
        .cbcn-solution-section {
            padding-top: 5.5rem;
            padding-bottom: 4.05rem;
        }

        .cbcn-solution-item {
            display: block;
            width: 100%;
            margin-bottom: 4.1rem;
        }

        .cbcn-solution-imgdiv {
            width: 100%;
            height: 18.1rem;
            border-radius: 1.5rem;
            overflow: hidden;
            margin-bottom: 1.75rem;
            background-size: cover;
        }

        .cbcn-solution-p2 {
            font-size: 1.2rem;
        }

    }
}