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

}
@media(max-width: 767px){

    #main-content .hero .content.active .car-main { left: 55%; }
    #main-content .hero .content .robot-main { max-width: 140rem; right: 0%; }
    #main-content .hero .content .quantum-main { max-width: 120rem; right: 0%; bottom: 3%; }

}

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

    }
    
}