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

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

/* ========== Large ≥992px ========== */
@media (max-width: 992px) {
    .objectLv {
        right: 50px;
    }

    .introBoxLayout {
        width: 700px;
        height: 395px;
        padding: 40px;
    }

    .introKumamon {
        width: 250px;
    }

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

    .lcpPackageRewardPreview {
        width: 150px;
        height: 175px;
    }

    .dailyMissionRewardLayout {
        width: 100%;
    }

    #modalImage {
        width: 95%;
    }

}

/* ========== Medium ≥768px ========== */
@media (max-width: 768px) {
    .bannerMainLayout {
        min-height: 1200px;
    }

    .objectKumamon {
        bottom: -35px;
        width: 500px;
    }

    .objectTomato_2 {
        bottom: 80px;
    }

    .objectTomato_1 {
        bottom: 80px;
    }

    .objectLv {
        right: 5px;
        width: 90px;
    }

    .introMainLayout {
        width: 100%;
        height: 500px;
        margin-top: -180px;
        padding: 70px 20px 40px;
    }

    .introBoxLayout {
        width: 600px;
        height: 345px;
        padding: 30px;
    }

    .introKumamon {
        width: 200px;
    }

    .introTextBox span {
        font-size: 22px;
        line-height: 22px;
    }

    .contentTitleLayout {
        height: auto;
        min-height: 60px;
    }

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

    .tableHeader.FixW {
        width: 150px;
        min-width: 150px;
    }

    .tableContent.FixW {
        width: 150px;
        min-width: 150px;
    }

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

    .tableHeaderLayout {
        height: 50px;
    }

    .lcpPackageRewardPreview {
        width: 100px;
        height: 140px;
        border-radius: 10px;
    }

    .lcpPackageRewardPreviewTitle {
        min-height: 40px;
        height: auto;
    }

    .lcpPackageMainLayout {
        padding: 80px 20px 50px;
    }

    .kmtTripMainLayout {
        padding: 0px 20px 150px;
    }

    .kmtTripRewardLayout {
        width: 100%;
    }

    .kmtTripContentLayout {
        padding: 70px 20px 30px;
    }

    .dailyMissionMainLayout {
        padding: 0px 20px 50px;
    }

    .dmTableContent.fixW,
    .dmTableHeaderContent.fixW {
        width: 120px;
        min-width: 120px;
    }

    .dmTableHeaderContent {
        min-width: 480px;
    }

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

    .dmTableContent {
        min-width: 330px;
    }

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

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

    .dmTableHeaderContent {
        font-size: 22px;
        line-height: 22px;
    }

    .dailyMissionSpMainLayout {
        padding: 50px 20px;
    }

    .dailyMissionSpMainLayout {
        padding: 90px 20px 50px;
    }

    .dmsTitlePoring {
        position: absolute;
        top: 30%;
        right: -5px;
        transform: translateY(-50%);
        width: 80px;
    }

    .dmsTitleLayout {
        max-width: 550px;
        padding: 10px 82px 10px 20px;
        font-size: 20px;
        line-height: 20px;
    }

    .btnBack {
        min-width: 90px;
        height: 30px;
    }

    .btnBack span {
        font-size: 22px;
        line-height: 22px;
    }
}

@media (max-width: 600px) {
    .introBoxLayout {
        width: 500px;
        height: 285px;
        padding: 28px;
    }
}

/* ========== Small ≥576px ========== */
@media (max-width: 576px) {
    .bannerTitle {
        max-width: 400px;
    }

    .bannerLogo {
        max-width: 150px;
    }

    .bannerMainLayout {
        min-height: 1000px;
    }

    .objectTomato_2 {
        width: 200px;
    }

    .objectKumamon {
        bottom: -0px;
        width: 400px;
    }

    .introMainLayout {
        min-height: 400px;
        height: auto;

    }

    .introBoxLayout {
        width: 450px;
        height: 255px;
        padding: 28px;
    }

    .introKumamon {
        width: 150px;
    }

    .introTextBox span {
        font-size: 18px;
        line-height: 20px;
    }

    .contentTitleLayout span {
        font-size: 40px;
        line-height: 25px;
    }

    .contentTitleLayout {
        min-width: auto;
    }

    .tableHeaderLayout {
        height: 50px;
        min-width: fit-content;
    }

    .tableMainLayout {
        overflow: auto;
    }

    .tableHeader {
        width: 300px;
        min-width: 300px;
    }

    .tableContent {
        width: 300px;
        min-width: 300px;
    }

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

    .lcpTopic {
        width: 240px;
        height: 65px;
        padding: 20px;
        font-size: 30px;
        line-height: 30px;
    }

    .lcpPackageTitleLayout {
        width: 100%;
        min-width: fit-content;
        min-height: 50px;
        height: auto;
        padding: 5px 20px;
        font-size: 30px;
        line-height: 25px;
    }

    .lcpPackageTitleObject {
        top: -33px;
    }

    .lcpMainLayout {
        padding: 50px 15px 120px;
    }

    .lcpPackageMainReward {
        position: relative;
        width: 190px;
        height: 205px;
        padding: 28px 13px 20px 13px;
    }

    .lcpPackageReward {
        width: 164px;
        height: 170px;
        border-radius: 10px;
        overflow: hidden;
    }

    .lcpPackageRewardObject {
        position: absolute;
        top: 10px;
        right: -20px;
        width: 60px;
    }

    .lcpPackageTopicLayout {
        width: 250px;
        height: 40px;
    }

    .lcpPackageSkillsLayout {
        padding: 20px;
    }

    .lcpPackageRewardPreview {
        width: 120px;
        height: 150px;
    }

    .contentTitleLayout.success span {
        font-size: 30px;
        line-height: 30px;
    }

    .kmtTripRewardItem {
        width: 90px;
        min-width: 90px;
        height: 90px;
        padding: 10px;
    }

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

    .kmtTripRewardLayout {
        text-align: start;
    }

    .dailyMissionMainLayout .contentTitleLayout.danger span {
        font-size: 30px;
        line-height: 30px;
    }

    .dailyMissionContentLayout {
        padding: 70px 20px 30px;
    }

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

    #modalImage {
        width: 100%;
    }

    .imageModal.show {
        padding: 10px;
    }

    .lcpPackageRewardMain {
        width: 164px;
        height: 163px;
    }
}

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

    .introBoxLayout {
        width: 100%;
        height: auto;
        padding: 30px 20px;
        border-radius: 30px;
        border: 5px solid #e01f06;
        box-shadow: inset 1px 1px 5px #222222;

        background: url("../images/intro/box_2.png");
        background-position: center;
        background-size: cover;
    }

    .kmtTripRewardLayout {
        text-align: center;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 30px;
    }

    .dailyMissionRewardLayout {
        text-align: center;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 30px;
    }

    .dailyMissionContentTopic {
        width: 270px;
    }

    .dailyMissionLocationNpc {
        border-radius: 15px;
    }
}

@media (max-width: 340px) {
    .contentTitleLayout.success span {
        font-size: 22px;
        line-height: 22px;
    }
}

@media (max-width: 320px) {
    .lcpPackageTitleLayout {
        font-size: 25px;
        line-height: 18px;
    }

    .lcpPackageStatusLayout {
        padding: 10px;
    }
}