@media (min-width: 992px) {}

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

/* ≤ 992px (lg และต่ำกว่า) */
@media (max-width: 991.98px) {}

/* ≤ 768px (md และต่ำกว่า) */
@media (max-width: 767.98px) {
    .banner_content_layout {
        position: relative;
        z-index: 2;
        width: 550px;
        min-width: 550px;
        height: 460px;
        padding: 50px 60px;
    }

    .banner_content_title {
        width: 350px;
    }

    .banner_content_footer {
        width: 480px;
        min-width: 480px;
        height: 180px;
        padding: 50px 20px;
        padding-bottom: 20px;
    }

    .banner_content {
        position: relative;
        width: 100%;
        height: 1150px;
    }

    .map_miniMainLayout {
        max-width: 170px;
    }

    .content_map_mainLayout {
        width: 600px;
    }

    .herosriasiege_mapMain {
        width: 580px;
    }

    .map_miniMainLayout.TheThirdHerosGateway {
        top: -32%;
    }

    .modal_mainContentLayout {
        flex-direction: column;
    }

    .modal_contentopic {
        width: 100%;
        min-width: 100%;
    }

}

@media (max-width: 620px) {
    .banner_content {
        height: 1020px;
    }

    .tab_mainLayout {
        height: 150px;
    }

    .tab_layout {
        height: 100px;
    }

    .tab_menu {
        width: 160px;
        height: 150px;
        padding: 0 40px 15px;
        font-size: 18px;
        line-height: 20px;
    }
}

/* ≤ 576px (sm และต่ำกว่า — mobile เล็กสุด) */
@media (max-width: 575.98px) {
    .content_mainLayout {
        padding: 20px;
    }

    .banner_content {
        height: 900px;
    }

    .banner_content_layout {
        width: 450px;
        min-width: 450px;
        height: 370px;
        padding: 50px 40px;
    }

    .banner_content_title {
        width: 300px;
    }

    .banner_content_layout h4 {
        position: relative;
        bottom: 0;
    }

    .banner_content_footer {
        width: 400px;
        min-width: 400px;
        height: 160px;
        padding: 50px 20px;
        padding-bottom: 20px;
        bottom: 0px;
    }

    .tab_menu {
        width: 140px;
        height: 130px;
        padding: 0 30px 15px;
        font-size: 15px;
        line-height: 18px;
    }

    .content_titleLayout {
        width: 400px;
    }

    .map_mainImg {
        width: 350px;
    }

    .content_map_mainLayout {
        width: 500px;
    }

    .map_miniMainLayout {
        max-width: 130px;
    }

    .map_miniMainLayout.Racusarium {
        top: -30px;
        left: 15px;
    }

    .map_miniMainLayout.Vastitarium {
        bottom: 70px;
        left: 10px;
    }

    .map_miniMainLayout.Silvarium {
        top: -30px;
        right: 15px;
    }

    .map_miniMainLayout.Ravinarium {
        bottom: 70px;
        right: 10px;
    }

    .herosriasiege_mapMain {
        width: 470px;
    }

    .herosriasiege_detailLayout {
        font-size: 12px;
        justify-content: center;
    }

    .herosriasiege_bottom {
        margin-bottom: 100px;
    }

    .object_footer {
        bottom: 90px;
    }

    .herosriasiege_thirdBg,
    .herosriasiege_chamberBg {
        height: 300px;
    }

    .herosriasiege_third_map {
        height: auto;
        width: 150px;
    }

    .herosriasiege_third_map_02 {
        width: 200px;
    }

    .siege_rewardMainLayout {
        width: 100%;
        gap: 20px;
    }

    .siege_tableContentMainLayout {
        flex-direction: column;
    }

    .siege_tableRewardTitle {
        font-size: 25px;
        line-height: 23px;
    }

    .btn.primary {
        width: 205px;
        height: 80px;
        font-size: 16px;
    }

    .modal_contentDetailLayout {
        flex-direction: column;
        align-items: center;
    }

    .modal_contentImg {
        width: 100px;
        min-width: 100px;
    }
}

@media (max-width: 470px) {
    .banner_content {
        height: 790px;
    }

    .banner_content_layout {
        width: 350px;
        min-width: 350px;
        height: 350px;
        padding: 50px 35px;
    }

    .banner_content_footer {
        width: 300px;
        min-width: 300px;
        height: auto;
        padding: 50px 10px;
        padding-bottom: 20px;
        bottom: -20px;
    }

    .map_mainImg {
        width: 280px;
    }

    .map_miniMainLayout {
        max-width: 110px;
    }

    .map_miniMainLayout.Racusarium {
        top: -20px;
        left: 60px;
    }

    .map_miniMainLayout.Vastitarium {
        bottom: 50px;
        left: 62px;
    }

    .map_miniMainLayout.Silvarium {
        top: -20px;
        right: 60px;
    }

    .map_miniMainLayout.Ravinarium {
        bottom: 50px;
        right: 62px;
    }

    .herosriasiege_mapMain {
        width: 100%;
    }

    .tab_menu {
        width: 110px;
        height: 100px;
        padding: 0 30px 15px;
        font-size: 15px;
        line-height: 18px;
    }

    .tab_mainLayout {
        height: 70px;
    }

    .tab_layout {
        height: 70px;
    }
}

@media (max-width: 340px) {
    .tab_menu {
        width: 90px;
        height: 100px;
        padding: 0 20px 15px;
        font-size: 13px;
        line-height: 15px;
    }
}