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

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

        .cbcn-kv-logo {
            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:not(.noScale):hover {
            background-size: 105% 105%;
        }

        .cbcn-ksp-item2 {
            height: 18rem;
        }

        .cbcn-ksp-item3 {
            height: 11.7rem;
        }

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

    /* color */
    @media screen {
        .cbcn-color-p1 {
            width: 100%;
            top: 5rem;
            z-index: 2;
        }

        .cbcn-color-mask {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.2);
            z-index: 2;
            opacity: 0;
        }
    }

    /* param */
    @media screen {
        .cbcn-param-imgdiv {
            width: 36em;
            height: 107em;
            top: -1.95em;
            z-index: 1;
        }

        .cbcn-param-img {
            opacity: 0;
        }

        .cbcn-param-img.active {
            opacity: 1;
        }

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

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


        .cbcn-param-point.index1 {
            top: 75.6em;
            left: 10.7em;
        }

        .cbcn-param-point.index2 {
            top: 44em;
            left: 5.6em;
        }

        .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-txt {
            padding-bottom: 3em;
            left: 15em;
            z-index: 5;
        }

        .cbcn-param-logo {
            display: block;
            width: auto;
            height: 40px;
            margin-bottom: 1.8rem;
            padding-bottom: 0;
        }

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

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

        .cbcn-param-btnlist {
            width: 6em;
            user-select: none;
        }

        .cbcn-param-btn {
            width: 1.45em;
            height: 1.45em;
            border-radius: 1.45em;
            border: 0.1em solid rgba(255, 255, 255, 0);
            position: relative;
            cursor: pointer;
            user-select: none;
        }

        .cbcn-param-btn.active {
            border: 0.1em solid rgba(255, 255, 255, 0.5);
        }

        .cbcn-param-btn-c {
            width: 0.85em;
            height: 0.85em;
            border-radius: 50%;
        }

        .cbcn-param-btn.index1 .cbcn-param-btn-c {
            background: #415CAE;
        }

        .cbcn-param-btn.index2 .cbcn-param-btn-c {
            background: #7F7F7F;
        }

        .cbcn-param-btn.index3 .cbcn-param-btn-c {
            background: #FFF;
        }
    }

    /* realworld */
    @media screen {
        .cbcn-realworld-imgdiv {
            width: 100%;
            height: 91em;
            transform-origin: center center;
            transform: translateY(-50%) scale(1);
        }

        .cbcn-realworld-imgrow {
            width: 100%;
            height: 30em;
            margin-bottom: 0.5em;
            position: relative;
            overflow: hidden;
        }

        .cbcn-realworld-imglist {
            height: 30em;
            animation: marquee 12s linear infinite;
        }

        .cbcn-realworld-imgrow.index2 .cbcn-realworld-imglist {
            height: 30em;
            animation: marquee2 20s linear infinite;
        }


        .cbcn-realworld-imgrow.index3 {
            margin-bottom: 0;
        }

        .cbcn-realworld-img {
            width: 50em;
            height: 30em;
            object-fit: cover;
            margin-right: 0.5em;
        }

        .cbcn-realworld-mask {
            width: 100%;
            height: 100%;
            z-index: 5;
            opacity: 0;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .cbcn-realworld-p1 {
            z-index: 6;
            opacity: 0;
        }

        @keyframes marquee {
            0% {
                transform: translateX(0em);
            }

            100% {
                transform: translateX(-101em);
            }
        }

        @keyframes marquee2 {
            0% {
                transform: translateX(-151.5em);
            }

            100% {
                transform: translateX(0em);
            }
        }
    }

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

        .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: 1.95rem;
        }

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

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

        .cbcn-ksp-item {
            position: relative;
            width: 100%;
            height: 25.15rem;
            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: 0;
            padding-top: 0;
        }
    }

    /* color */
    @media screen {
        .cbcn-color-p1 {
            width: 100%;
            top: 3.35rem;
            z-index: 3;
            font-size: 2rem;
            line-height: 2.2rem;
        }
    }

    /* param */
    @media screen {
        .cbcn-param-imgdiv {
            width: 18rem;
            height: 53.5rem;
            z-index: 1;
            margin-top: -4rem;
        }

        .cbcn-param-img {
            opacity: 0;
        }

        .cbcn-param-img.active {
            opacity: 1;
        }

        .cbcn-param-mask1 {
            top: 0;
            width: 100%;
            height: 23.8rem;
            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: 23.8rem;
            background: linear-gradient(0deg, #000 -2%, rgba(0, 0, 0, 0.00) 102.31%);
            z-index: 3;
        }

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

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

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

        .cbcn-param-btnlist {
            width: 6rem;
            user-select: none;
        }

        .cbcn-param-btn {
            width: 1.45rem;
            height: 1.45rem;
            border-radius: 1.45rem;
            border: 0.1rem solid rgba(255, 255, 255, 0);
            position: relative;
            cursor: pointer;
            user-select: none;
        }

        .cbcn-param-btn.active {
            border: 0.1rem solid rgba(255, 255, 255, 0.5);
        }

        .cbcn-param-btn-c {
            width: 0.85rem;
            height: 0.85rem;
            border-radius: 50%;
        }

        .cbcn-param-btn.index1 .cbcn-param-btn-c {
            background: #415CAE;
        }

        .cbcn-param-btn.index2 .cbcn-param-btn-c {
            background: #7F7F7F;
        }

        .cbcn-param-btn.index3 .cbcn-param-btn-c {
            background: #FFF;
        }
    }

    /* realworld */
    @media screen {
        .cbcn-realworld-imgdiv {
            width: 100%;
            height: 54rem;
        }

        .cbcn-realworld-p1 {
            z-index: 6;
            font-size: 2rem;
        }
    }

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

    }

}