@charset "utf-8";

/* Home - Welcome */

@media(max-width: 1024px) {

    #main-content .hero {
        height: auto;
    }

    #main-content .hero .banner-wrap {
        width: calc(100% - 20rem);
        margin: 10rem auto;
        gap: 10rem;
    }

    #main-content .hero .banner-wrap>.banner {
        border-radius: 10rem;
        overflow: hidden;
    }

    #main-content .hero .content .title-wrap .title {
        opacity: 1;
        filter: none;
        transform: scale(1);
    }

}

@media(max-width: 767px) {

    #main-content .hero .content.active .car-main {
        left: 55%;
    }

    #main-content .hero .content .robot-main {
        max-width: 140rem;
        right: 4%;
    }

    #main-content .hero .content .quantum-main {
        max-width: 120rem;
        right: 4%;
        bottom: 4%;
    }

}

.layout-home {

    @media(max-width: 1023px) {

        .program {

            .program-content>.list {
                grid-template-columns: repeat(3, 1fr);
                gap: 10rem;
            }

        }

    }

    @media(max-width: 767px) {

        .program-participant::before {
            opacity: .2;
        }

        .program {

            .program-content {
                gap: 40rem;
                padding-bottom: 0;
            }

            .program-content>.title {
                align-items: center;
            }

            .program-content>.title>.wrap-title h1 {
                font-size: var(--font-size-50);
            }

            .program-content>.list {
                grid-template-columns: repeat(2, 1fr);
                gap: 10rem;
            }

            .program-content>.list>.card {
                gap: 20rem;
                padding: 15rem;
            }

            .program-content>.list>.card>.content h3 {
                font-size: 14rem;
            }

        }

        .participant {

            .participant-content {
                gap: 40rem;
            }

            .participant-content>.title>.wrap-title h1 {
                font-size: var(--font-size-50);
            }

            .participant-content>.list {
                grid-template-columns: repeat(2, 1fr);
                gap: 15rem;
            }

        }

        .statistic {

            .statistic-content {
                gap: 40rem;
            }

            .statistic-content .title .desc {
                margin-top: 20rem;
            }

            .statistic-content .tab-chart .tab-wrap {
                border-radius: 14px 14px 0 0;
            }

            .statistic-content .tab-chart .tab-wrap svg {
                display: none;
            }

            .statistic-content .tab-chart .tab-wrap .tab>p {
                padding: 10rem 20rem !important;
            }

            .statistic-content .tab-chart .tab-wrap .tab {
                margin: 0 !important;
            }

        }

        .event {

            .event-content>.title {
                margin-bottom: 40rem;
            }

            .event-content>.swiper>.swiper-wrapper>.swiper-slide {
                width: 100% !important;
            }

            .event-content {
                width: 90%;
                margin-inline: auto;
            }

        }

        .bast-cases {

            .bast-cases-content {
                gap: 40rem;
            }

            .bast-cases-content>.title {
                align-items: center;
            }

            .bast-cases-content>.title>.wrap-title h1 {}

            .bast-cases-content>.list {
                grid-template-columns: repeat(2, 1fr);
                gap: 10rem;
            }

            .bast-cases-content>.list>.card {
                padding: 15rem;
                gap: 40rem;
            }

            .bast-cases-content>.list>.card>.content h3 {
                font-size: 14rem;
            }

        }

    }

}

/* Main */

@media(max-width: 1023px) {

    .program {

        .program-content>.list {
            grid-template-columns: repeat(3, 1fr);
            gap: 10rem;
        }

    }

}

@media(max-width: 767px) {

    .program-participant::before {
        opacity: .2;
    }

    .program {

        .program-content {
            gap: 40rem;
            padding-bottom: 0;
        }

        .program-content>.title {
            align-items: center;
        }

        .program-content>.title>.wrap-title h1 {
            font-size: var(--font-size-50);
        }

        .program-content>.list {
            grid-template-columns: repeat(2, 1fr);
            gap: 10rem;
        }

        .program-content>.list>.card {
            gap: 20rem;
            padding: 15rem;
        }

        .program-content>.list>.card>.content h3 {
            font-size: 14rem;
        }

    }

    .participant {

        .participant-content {
            gap: 40rem;
        }

        .participant-content>.title>.wrap-title h1 {
            font-size: var(--font-size-50);
        }

        .participant-content>.list {
            grid-template-columns: repeat(2, 1fr);
            gap: 15rem;
        }

    }

    .statistic {

        .statistic-content {
            gap: 40rem;
        }

        .statistic-content .title .desc {
            margin-top: 20rem;
        }

        .statistic-content .tab-chart .tab-wrap {
            border-radius: 14px 14px 0 0;
        }

        .statistic-content .tab-chart .tab-wrap svg {
            display: none;
        }

        .statistic-content .tab-chart .tab-wrap .tab>p {
            padding: 10rem 20rem !important;
        }

        .statistic-content .tab-chart .tab-wrap .tab {
            margin: 0 !important;
        }

    }

    .event {

        .event-content>.title {
            margin-bottom: 40rem;
        }

        .event-content>.swiper>.swiper-wrapper>.swiper-slide {
            width: 100% !important;
        }

        .event-content {
            width: 90%;
            margin-inline: auto;
        }

    }

    .bast-cases {

        .bast-cases-content {
            gap: 40rem;
        }

        .bast-cases-content>.title {
            align-items: center;
        }

        .bast-cases-content>.title>.wrap-title h1 {}

        .bast-cases-content>.list {
            grid-template-columns: repeat(2, 1fr);
            gap: 10rem;
        }

        .bast-cases-content>.list>.card {
            padding: 15rem;
            gap: 40rem;
        }

        .bast-cases-content>.list>.card>.content h3 {
            font-size: 14rem;
        }

    }

}