@layer media_query {
    @media(max-width: 767px) {
        .grid2 {
            grid-template-columns: 100%;
        }

        .grid2>*:first-child {
            padding-right: 0;
            border-right: 0;
        }

        .grid2>*:last-child {
            padding-left: 0;
        }
    }
}

@layer media_query {
    @media(max-width: 767px) {
        .app_wrapper {
            grid-template-columns: 100%;
        }

        .app_wrapper .qr_wrap {
            max-width: 10rem;
        }

        .grid3 {
            grid-template-columns: 100%;
        }
    }
}

@layer media_query {
    @media(max-width: 1100px) {
        .grid1 {
            grid-template-columns: 100%;
            row-gap: 2.5rem;
        }

        .grid1 h2 {
            grid-row: unset;
        }

        .grid1 .mobile_graphic {
            grid-row: unset;
            order: 3;
            padding-top: 0;
        }

        .grid1>*:last-child {
            grid-row: unset;
        }
    }
}

@layer media_query{
    @media(max-width: 1165px){
        .main_area2{
            margin-top: -26vw;
        }
    }
    @media(max-width: 767px){
        .main_area2{
            /*margin-top: -26vw;*/
        }
    }
}

@layer print_query {
    @media print {
        .indexswiper .swiper-slide {
            width: 100% !important;
        }
        .banner_row {
            grid-template-columns: 100%;
        }

        .banner_img{
            width: 100% !important;
        }
        .banner_img .img1 {
            width: 100%;
        }
    }
}