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

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

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

/* ≤ 768px (md และต่ำกว่า) */
@media (max-width: 767.98px) {
    .banner_titleMain {
        width: 600px;
    }

    .banner_logo_roc {
        width: 120px;
    }

    .content00_layoutDes {
        width: 570px;
        bottom: 80px;
    }

    .content00_title {
        width: 550px;
    }

    .content00_titleLayout {
        padding-bottom: 100px;
    }

    .content00_goalLayout {
        position: absolute;
        top: 125px;
    }

    .banner_object_po {
        width: 500px;
    }

    .banner_mainLayout {
        width: 100%;
        height: 980px;
    }

    .content01_layout {
        width: 100%;
        padding: 30px;
    }

    .content01_npcTitleLayout {
        width: 250px;
        min-width: 250px;
    }

    .content01_character {
        width: 150px;
        min-width: 150px;
    }

    .content01_character_02 {
        width: 180px;
        min-width: 180px;
    }

    .content01_layoutcontent {
        height: 350px;
    }

    .content00_mainLayout {
        margin-bottom: 50px;
    }

    .content02_title {
        top: -55px;
        width: 580px;
    }

    .content_mainLayout {
        padding-bottom: 120px;
    }

    .content02_layout {
        width: 100%;
    }

    .content02_costumeObject01 {
        width: 100%;
        top: -15px;
        left: 0;
    }

    .content02_costumeObject02 {
        width: 100%;
        left: 0;
    }

    .content02_costumeMainLayout {
        padding: 30px 21px;
    }

    .content03_titleImg {
        width: 450px;
    }

    .content03_titleLayout {
        width: 300px;
        height: 40px;
        font-size: 30px;
        line-height: 30px;
    }

    .table_topicLayout {
        width: 150px;
        min-width: 150px;
        font-size: 20px;
        line-height: 20px;
    }

    .table_contentLayout {
        font-size: 20px;
        line-height: 20px;
    }
}

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

    .banner_mainLayout {
        padding: 50px 20px;
    }

    .banner_object_po {
        width: 500px;
    }

    .banner_mainLayout {
        height: 800px;
    }

    .content00_layoutDes {
        width: 450px;
        bottom: 30px;
    }

    .content00_title {
        width: 450px;
    }

    .content00_titleLayout {
        padding-bottom: 75px;
        height: 200px;
    }

    .content00_goalLayout {
        position: absolute;
        top: 91px;
        width: 400px;
        height: 80px;
        font-size: 30px;
    }

    .content00_object_01.left {
        top: 100px;
        left: -50px;
    }

    .content00_object_01.right {
        top: 100px;
        right: -50px;
    }

    .content00_object_01 {
        position: absolute;
        width: 120px;
    }

    .content00_layoutDes {
        width: 90%;
        padding: 15px 20px;
        font-size: 18px;
        bottom: 60px;

    }

    .content01_layoutcontent {
        height: 100%;
        flex-direction: column;
        padding: 20px 10px;
    }

    .content01_layout {
        height: 100%;
    }

    .content01_title {
        position: absolute;
        z-index: 2;
        top: -45px;
        width: 300px;
    }

    .content01_npcTitleLayout {
        align-items: center !important;
        text-align: center !important;
    }

    .content01_npcTitleLayout h5 {
        font-size: 22px;
    }

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

    .content02_title {
        top: -40px;
        width: 480px;
    }

    .content02_layout {
        width: 100%;
        min-height: 1200px;
        padding: 40px 20px;
    }

    .content02_desDetail {
        padding: 30px;
        text-align: center;
        font-size: 20px;
        line-height: 20px;
    }

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

    .content02_tableReward {
        flex-direction: column;
        gap: 0px;
    }

    .content02_tableImgLayout {
        width: 100%;
        min-width: 100%;
        height: 100%;
        padding: 10px;
        border-right: 0px solid #bc7150;
        border-bottom: 1px solid #bc7150;
    }

    .content02_tableDetailLayout {
        padding: 10px;
        font-size: 18px;
        line-height: 18px;
        text-align: center;
    }

    .content02_costumeMainLayout {
        padding: 30px 10px;
    }

    .content02_costumeSubLayout {
        padding: 50px 10px;
    }

    .costume_detailLayout #costumeTitle01 {
        font-size: 30px;
        line-height: 30px;
    }

    .costume_title {
        font-size: 28px;
        line-height: 18px;
    }

    .costume_title span {
        width: 230px;
    }

    .content03_object01 {
        display: none;
    }
}

@media (max-width: 480px) {
    .content02_title {
        top: -30px;
        width: 100%;
    }
}

@media (max-width: 450px) {
    .content00_title {
        width: 350px;
    }

    .content00_titleLayout {
        padding-bottom: 65px;
        height: 170px;
    }

    .content00_goalLayout {
        position: absolute;
        top: 73px;
        width: 350px;
        height: 65px;
        font-size: 28px;
    }

    .costume_allImg {
        width: 90px;
        min-width: 90px;
    }

    .costume_itemImg {
        width: 200px;
    }

    .content03_titleImg {
        width: 300px;
    }

    .content03_titleLayout {
        width: 250px;
        height: 34px;
        font-size: 20px;
        line-height: 20px;
    }
}

@media (max-width: 400px) {
    .banner_logo_roc {
        width: 90px;
    }

    .banner_logo_DW {
        width: 120px;
    }

    .banner_titleMain {
        width: 350px;
    }

    .banner_object_po {
        width: 400px;
    }

    .content00_layoutDes {
        bottom: 25px;
    }

    .content00_title {
        width: 95%;
    }

    .content00_titleLayout {
        padding-bottom: 58px;
        height: 150px;
    }

    .content00_titleLayout span {
        font-size: 10px;
    }

    .content00_goalLayout {
        position: absolute;
        top: 60px;
        width: 290px;
        height: 52px;
        font-size: 22px;
    }
}