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

    /* kv */
    @media screen {
        .cbcn-kv-txt {
            position: absolute;
            bottom: 47px;
            left: 40px;
        }

        .cbcn-kv-svg {
            width: 166px;
            height: 36px;
            margin-bottom: 19px;
        }
    }

    /* harder */
    @media screen {
        .cbcn-harder-section {
            padding-top: 49px;
            padding-bottom: 87px;
        }

        .cbcn-harder-progress {
            width: 100%;
            height: 1px;
            background: rgba(185, 185, 185, 0.4);
            position: relative;
        }

        .cbcn-harder-progressbar {
            position: absolute;
            top: 0;
            left: 0;
            width: 25%;
            height: 100%;
            background: #FF5A00;
        }

        .cbcn-harder-content {
            margin-top: 55px;
        }

        .cbcn-harder-img {
            width: 46rem;
            height: 30rem;
            border-radius: 1.5rem;
            overflow: hidden;
            flex-shrink: 0;
            position: relative;
        }

        .cbcn-harder-img video {
            opacity: 0;
        }

        .cbcn-harder-img video.active {
            opacity: 1;
        }

        .cbcn-harder-right {
            width: 43.75rem;
        }

        .cbcn-harder-title {
            font-size: 2rem;
        }

        .cbcn-harder-item {
            height: 4.4rem;
            border-bottom: 1px solid rgba(172, 172, 172, 0.4);
            cursor: pointer;
        }

        .cbcn-harder-item:last-child {
            border-bottom: 0;
        }

        .cbcn-harder-item svg {
            margin-right: 2rem;
            position: relative;
            top: 0.3rem;
            width: 1.5rem;
            height: 1.5rem;
        }

        .cbcn-harder-item p {
            line-height: 4.4rem;
        }

        .cbcn-harder-item-p1 {
            font-size: 1.2rem;
        }

        .cbcn-harder-item-p2 {
            font-size: 0.8rem;
        }

        .cbcn-harder-item:hover .cbcn-harder-p2 {
            top: 256px;
            left: 0;
        }

        .cbcn-harder-svg {
            transition: all 0.5s;
            position: absolute;
            left: 0;
            top: 120px;
            opacity: 0;
        }

        .cbcn-harder-item-p1,
        .cbcn-harder-item-p2 {
            opacity: 0.2;
        }

        .cbcn-harder-item.active .cbcn-harder-item-p1,
        .cbcn-harder-item.active .cbcn-harder-item-p2 {
            opacity: 1;
        }
    }

    /* tool */
    @media screen {
        .cbcn-tool-section {

            background: #F7F7F7;
        }

        .cbcn-tool-content {
            height: 100%;
        }

        .cbcn-tool-left {
            padding-top: 20px;
            position: relative;
        }

        .cbcn-tool-logo {
            width: 24.8rem;
        }

        .cbcn-tool-p1 {
            /* margin-top: 48px; */
            margin-bottom: 11px;
        }

        .cbcn-tool-p2 {
            width: 35.1rem;
        }

        .cbcn-tool-img {
            width: 30rem;
            height: 47.455rem;
            aspect-ratio: 55/87;
            position: absolute;
            top: 345px;
            left: 35px;
        }

        .cbcn-tool-right {
            position: relative;
            height: 100%;
            width: 45.5rem;
        }

        .cbcn-tool-list {
            padding-top: 20px;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }

        .cbcn-tool-item {
            position: relative;
            width: 45.5rem;
            border-top: 1px solid rgba(0, 0, 0, 0.3);
            overflow: hidden;
        }

        .cbcn-tool-item-p1 {
            margin-top: 13px;
        }

        .cbcn-tool-item-p2 {
            margin-top: 15px;
        }

        .cbcn-tool-item-img {
            margin: 50px 0;
            height: 90px;
        }

        .cbcn-tool-item-p3 {
            position: absolute;
            right: 0;
            top: 16px;
        }

        .cbcn-tool-item-list {
            overflow: hidden;
        }


        .cbcn-tool-item-title {
            border-radius: 4px;
            background: #434343;
            overflow: hidden;
            padding: 8px 20px;
            color: #FFF;
        }


        .cbcn-tool-item-row {
            padding: 23px 0;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
        }

        .cbcn-tool-item-row:first-child {
            border-top: 0;
        }

        .cbcn-tool-item-row-p1 {
            width: 110px;
            flex-shrink: 0;
        }
    }


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

        .cbcn-platformtitle-p1 {
            margin-bottom: 26px;
            color: #FF5A00;
        }

        .cbcn-platformtitle-p1 span {
            color: #CFCFCF;
        }

        .cbcn-platformtitle-p1 span.active {
            animation: missionPA 1.5s;
            -moz-animation: missionPA 1.5s;
            /* Firefox */
            -webkit-animation: missionPA 1.5s;
            /* Safari and Chrome */
            -o-animation: missionPA 1.5s;
            animation-fill-mode: forwards;

        }

        @keyframes missionPA {
            0% {
                color: #FF5A00;
            }

            100% {
                color: #000;
            }
        }

        @-webkit-keyframes missionPA {
            0% {
                color: #FF5A00;
            }

            100% {
                color: #000;
            }
        }

    }


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

        .cbcn-platform-div {
            position: relative;
            height: 958px;
            border-radius: 30px;
            overflow: hidden;
        }

        .cbcn-platform-txt {
            position: absolute;
            top: 57px;
            left: 57px;
            z-index: 2;
        }

        .cbcn-platform-txtp2 {
            margin-top: 6px;
        }
    }


    /* explore */
    @media screen {
        .cbcn-explore-section {
            padding-top: 135px;
            padding-bottom: 105px;
        }

        .cbcn-explore-item {
            width: 100%;
            overflow: hidden;
            border-radius: 1.5rem;
            background: #F5F5F5;
            height: 377px;
        }

        .cbcn-explore-p1 {
            margin-top: 35px;
            margin-left: 2.5rem;
        }

        .cbcn-explore-p1 span {
            color: #FF5A00;
        }


        .cbcn-explore-img {
            width: 25.35rem;
            height: 21.85rem;
            aspect-ratio: 239/206;
            position: absolute;
            right: 7.9rem;
            bottom: 0;
        }

        .cbcn-explore-btnlist {
            position: absolute;
            left: 2.5rem;
            bottom: 56px;
        }

        .cbcn-explore-morebtn {
            display: block;
            height: 2.55rem;
            border-radius: 28px;
            background: #FF5B00;
            color: #FFF;
            text-align: center;
            flex-shrink: 0;
            padding-left: 20px;
            padding-right: 20px;
            line-height: 2.55rem;
            font-size: 0.7rem;
        }

        .cbcn-explore-morebtn svg {
            margin-left: 8px;
            vertical-align: middle;
        }
    }

}

/*    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-p1 {
            margin-bottom: 0.5rem;
        }

    }

    /* harder */
    @media screen {
        .cbcn-harder-section {
            padding-top: 5rem;
            padding-bottom: 5.75rem;
        }

        .cbcn-harder-img {
            width: 100%;
            height: 22.5rem;
            aspect-ratio: 23/15;
            border-radius: 1.5rem;
            overflow: hidden;
        }

        .cbcn-harder-right {
            margin-top: 2rem;
            width: 100%;
        }

        .cbcn-harder-item {
            height: 4.4rem;
            border-bottom: 1px solid rgba(172, 172, 172, 0.4);
        }

        .cbcn-harder-item:last-child {
            border-bottom: 0;
        }

        .cbcn-harder-item svg {
            margin-right: 2rem;
            position: relative;
            top: 0.3rem;
        }

        .cbcn-harder-item p {
            line-height: 4.4rem;
        }

    }

    /* tool */
    @media screen {
        .cbcn-tool-section {
            background: #F7F7F7;
            padding-top: 3.1rem;
        }

        .cbcn-tool-logo {
            width: 24.75rem;
        }

        .cbcn-tool-p1 {
            margin-top: 2.39rem;
            font-size: 1.5rem;
        }

        .cbcn-tool-p2 {
            margin-top: 0.85rem;
        }

        .cbcn-tool-list {
            padding-top: 2.7rem;
        }

        .cbcn-tool-item {
            position: relative;
            width: 100%;
            margin-top: 3.45rem;
            border-top: 1px solid rgba(0, 0, 0, 0.3);
        }


        .cbcn-tool-item-p1 {
            margin-top: 0.62rem;
            font-size: 1.5rem;
            color: #FF5A00;
        }

        .cbcn-tool-item-p2 {
            margin-top: 0.75rem;
        }

        .cbcn-tool-item-p3 {
            position: absolute;
            right: 0;
            top: 0.8rem;
            font-size: 1.5rem;
        }

        .cbcn-tool-item-img {
            margin: 2rem 0;
            height: 4.5rem;
        }

        .cbcn-tool-item-list {
            display: none;
            padding-top: 1rem;
        }


        .cbcn-tool-item-title {
            border-radius: 0.2rem;
            background: #FF5A00;
            overflow: hidden;
            padding: 0.3rem 1rem;
            color: #FFF;
        }


        .cbcn-tool-item-row {
            padding: 1rem 0;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            flex-wrap: nowrap;
        }

        .cbcn-tool-item-row:first-child {
            border-top: 0;
        }

        .cbcn-tool-item-row-p1 {
            width: 7.5rem;
            flex-shrink: 0;
        }

        .cbcn-tool-img {
            width: 29.5rem;
            height: 33.75rem;
            aspect-ratio: 118/135;
            margin-top: 2.7rem;
        }
    }


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


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

        .cbcn-platform-div {
            position: relative;
            height: 47.9rem;
            border-radius: 1.5rem;
            overflow: hidden;
        }

        .cbcn-platform-txt {
            position: absolute;
            top: 2.85rem;
            left: 2.4rem;
            z-index: 2;
        }

        .cbcn-platform-txtp1 {
            font-size: 1.5rem;
            line-height: 1.7rem;
        }

        .cbcn-platform-txtp2 {
            margin-top: 0.85rem;
        }
    }


    /* explore */
    @media screen {
        .cbcn-explore-section {
            padding-top: 1.75rem;
            padding-bottom: 2.45rem;
        }

        .cbcn-explore-item {
            width: 100%;
            overflow: hidden;
            border-radius: 1.5rem;
            background: #F5F5F5;
            height: 23.25rem;
            position: relative;
        }

        .cbcn-explore-p1 {
            margin-top: 35px;
            margin-left: 2.5rem;
        }

        .cbcn-explore-img {
            width: 20.05rem;
            height: 18.2rem;
            aspect-ratio: 65/59;
            position: absolute;
            right: 0.4rem;
            bottom: 0;
        }

        .cbcn-explore-btnlist {
            position: absolute;
            left: 2.45em;
            bottom: 2.4rem;
        }

        .cbcn-explore-morebtn {
            display: block;
            width: 17.3rem;
            height: 3.15rem;
            border-radius: 1.575rem;
            background: #FF5B00;
            color: #FFF;
            text-align: center;
            line-height: 3.15rem;
            flex-shrink: 0;
            text-align: center;
        }
    }

}