/* ========== Extra Extra Large ≥1400px ========== */
@media (max-width: 1400px) {}

/* ========== Extra Large ≥1200px ========== */
@media (max-width: 1200px) {}

/* ========== Large ≥992px ========== */
@media (max-width: 992px) {

    #content_mjolnirUndergroundCaverns,
    #content_powerTwistedPlains {
        padding: 20px;
    }

    .btntab.back {
        position: fixed;
        z-index: 2;
        top: 70px;
        left: 10px;
        width: 80px;
        height: 40px;
        filter: drop-shadow(1px 1px 5px #ffffff4e);
        font-size: 14px;
    }


    .ptpContentHeaderTitle {
        align-items: start;
        flex-direction: column;
    }

    .ptpContentObject {
        left: 0px;
        width: 120px;
    }

    .ptpContentObject_2 {
        right: 0px;
        width: 130px;
    }

    .ptpContentHeader {
        padding: 50px 10px 0px 0px;
    }

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

    .tableMainLayout {
        font-size: 12px;
    }

    .bannerMainLayout {
        position: relative;
        width: 700px;
        min-height: 1240px;
    }

    .bannerMapImg {
        width: 200px;
        height: 200px;
    }

    .btntab {
        width: 150px;
        height: 55px;
        font-size: 11px;
        line-height: 12px;
    }

    .bannerMapMainLayout {
        width: fit-content;
        min-width: fit-content;
    }

    .bannerContentMapLayout {
        width: 100%;
        height: 370px;
        padding: 50px 80px;
    }
}

/* ========== Medium ≥768px ========== */
@media (max-width: 768px) {
    .ptpTable_Header {
        flex-direction: column;
        height: fit-content;
    }

    .ptpTableHeader_map {
        width: 100%;
        min-width: fit-content;
        height: 250px;
        padding: 10px;
        background: #000;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ptpTableHeader_map img {
        object-fit: contain !important;
        width: 150px;
    }

    .ptpTableHeader_titleLayout {
        width: 100%;
        min-width: fit-content;
        height: 100%;
        min-height: 90px;
        font-size: 14px;
        text-align: center;
    }

    .ptpTableHeaderTitle {
        min-height: 40px;
    }

    .ptpTableHeader_detailLayout {
        height: 100%;
        min-height: 100px;
    }

    .ptpTableHeader_detailLayout {
        font-size: 12px;
    }

    #DungeonRewards_PTP .tableContentLayout,
    #DungeonRewards_PTP .tableHeaderLayout,
    #ExchangePowerTwistedPlains_PTP .tableHeaderLayout,
    #ExchangePowerTwistedPlains_PTP .tableContentLayout {
        flex-direction: column;
    }

    #DungeonRewards_PTP .tableContentItemLayout,
    #ExchangePowerTwistedPlains_PTP .tableContentItemLayout {
        width: 100%;
        min-width: fit-content;
        border-right: 0px solid transparent;
        border-bottom: 2px solid #7a7ca1;
        align-items: center !important;
        text-align: center;
    }

    #ExchangePowerTwistedPlains_PTP .tableContentDesLayout {
        border-bottom: 2px solid #7a7ca1;
    }

    #DungeonRewards_PTP .tableContentDesLayout.content {
        align-items: center;
        text-align: center;
    }

    p,
    .p {
        font-size: 14px;
    }

    .tableEquipmentMainLayout {
        flex-direction: column;
        gap: 40px;
    }

    .enchantTable {
        min-width: 780px;
    }

    .enchantTable th,
    .enchantTable td {
        font-size: 12px;
    }

    .ptpContentTitle {
        font-size: 60px;
        line-height: 40px;
    }
}

@media (max-width: 670px) {
    .bannerMainLayout {
        position: relative;
        width: 500px;
        min-height: 885px;
    }

    .bannerContentMapLayout {
        width: 100%;
        height: 320px;
        padding: 50px 80px;
        bottom: 13%;
    }

    .bannerMapImg {
        width: 130px;
        height: 130px;
    }
}

/* ========== Small ≥576px ========== */
@media (max-width: 576px) {
    .ptpContentHeaderTitle #title {
        width: fit-content;
        white-space: normal;
        text-align: center;
        font-size: 16px;
    }

    .ptpContentObject,
    .ptpContentObject_2 {
        display: none;
    }

    .ptpContentTopic {
        width: 100%;
        height: fit-content;
        min-height: 60px;
        font-size: 15px;
        padding: 10px;
    }

    .ptpContentTopicLayout {
        padding: 10px;
    }


    .tableContentItemLayout {
        width: 130px;
        min-width: 130px;
    }

    .tableMainLayout {
        font-size: 12px;
    }

    .ptpContentTitle {
        font-size: 40px;
        line-height: 30px;
    }

    .tableContentItemLayout_2 {
        width: 100%;
        min-width: fit-content;
    }

    #EquipmentReward_MUC .tableHeaderLayout {
        flex-direction: column;
    }

    #EquipmentReward_MUC .tableContentDesLayout {
        border-top: 2px solid #7a7ca1;
        border-bottom: 2px solid #7a7ca1;
    }

    #EquipmentReward_MUC .tableContentLayout {
        flex-direction: column;
    }

    .ptpContentHeader_object {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 430px) {
    .bannerMainLayout {
        position: relative;
        width: 300px;
        min-height: 515px;
        margin-top: 70px;
    }

    .bannerContentMapLayout {
        width: 100%;
        height: fit-content;
        padding: 50px 0px;
        bottom: 40px;
        gap: 10px;
    }

    .bannerMapImg {
        width: 80px;
        height: 80px;
    }

    .btntab {
        width: 100px;
        height: 40px;
        font-size: 8px;
        line-height: 10px;
        padding: 0px;
    }

    .mainLayoutBody {
        overflow: hidden;
    }
}