@media (max-width: 768px) {
    .dragon_logo {
        width: 550px;
    }

    .dragon_titleEvent {
        width: 500px;
    }

    .dragon_dateDetail {
        font-size: 20px;
    }

    .dragon_frameLayout {
        width: 650px;
        height: 370px;
    }

    .dragon_frameDetail {
        width: 500px;
    }

    .dragon_detail02,
    .dragon_quest {
        width: 500px;
    }

    .dragon_frameLayout02 {
        width: 650px;
        min-height: 800px;
        padding: 30px;
        padding-top: 90px;
        margin-bottom: 150px;
    }

    .dragon_frameLayout03 {
        width: 650px;
        padding: 40px;
        padding-top: 70px;
    }

    .dragon_frameLayout04 {
        width: 670px;
        padding: 80px;
        padding-top: 110px;
    }

    .dragon_frameLayout04 {
        width: 670px;
        padding: 80px;
        padding-top: 110px;
        padding-bottom: 150px;
        margin-bottom: 80px;
    }

    .dragon_frameLayout04_footer {
        display: none;
    }
}

@media (max-width: 660px) {
    .dragon_frameLayout {
        width: 500px;
        height: 285px;
    }

    .dragon_frameDetail {
        width: 400px;
        height: 200px;
        min-height: 200px;
        transform: translate(-50%, 30%);
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .dragon_Title {
        width: 500px;
    }

    .dragon_detail {
        width: 250px;
    }

    .dragon_frameLayout02 {
        width: 530px;
        min-height: 650px;
        padding-top: 80px;
        justify-content: start;
        gap: 60px;
        margin-bottom: 100px;
    }

    .dragon_detail02 {
        width: 400px;
        transform: translate(-50%, -45%);
    }

    .dragon_quest {
        width: 400px
    }

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

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

    .dragon_character02 img,
    .dragon_character02_2 img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .dragon_detail03 {
        font-size: 30px;
    }

    .dragon-text-18 {
        font-size: 15px;
    }

    .dragon_des {
        width: 250px;
        font-size: 15px;
    }

    .dragon_frameLayout03 {
        width: 550px;
        padding: 30px;
    }

    .reward_layoutTitle {
        width: 150px;
        min-width: 150px;
        font-size: 15px;
    }

    .dragon_frameLayout04 {
        width: 550px;
        padding: 50px;
        padding-top: 110px;
        padding-bottom: 150px;
    }

    .dragon_rewardLayout02 {
        height: 300px;
    }

    .dragon_questImg {
        width: 500px;
    }

    .dragon_frameLayoutQuest {
        padding: 0;
    }
}

@media (max-width: 570px) {
    .dragon_logo {
        width: 400px;
    }

    .dragon_titleEvent {
        width: 400px;
    }

    .dragon_dateDetail {
        font-size: 20px;
    }

    .sun-flare {
        width: 600px;
        height: 600px;
    }

    .dragon-text-end {
        text-align: start;
    }

    .dragon_des {
        width: 100%;
    }

    .dragon_frameLayout02 {
        gap: 10px;
    }

    .dragon_questBg {
        width: 500px;
        padding: 30px 20px;
    }

    .dragon_questImg {
        width: 450px;
    }

    .dragon_quest02 {
        width: 350px;
    }
}

@media (max-width: 530px) {

    .dragon_detail02,
    .dragon_quest {
        width: 350px;
    }

    .dragon_frameLayout02 {
        width: 450px;
    }

    .dragon_character02 {
        width: 120px;
        min-width: 120px;
    }

    .dragon_character02_2 {
        width: 200px;
        min-width: 200px;
    }

    .dragon_frameLayout03 {
        width: 450px;
        padding: 30px;
        padding-top: 70px;
    }

    .reward_layoutDetail,
    .reward_layoutTitle {
        height: 230px;
    }

    .reward_TableDetail,
    .reward_TableTitle {
        height: 230px;
    }

    .dragon_frameLayout04 {
        width: 450px;
        padding: 30px;
        padding-top: 115px;
        padding-bottom: 150px;
    }

    .dragon_rewardImg04 {
        width: 350px;
    }

    .dragon_rewardImg {
        width: 150px;
        height: 150px;
    }

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

    .dragon_questImg {
        width: 400px;
    }

    .dragon_questBg_sm {
        height: 280px;
        padding: 30px;
        justify-content: center;
        gap: 20px;
    }

    .dragon_quest02 {
        width: 350px;
    }
}

@media (max-width: 510px) {
    .dragon_frameLayout {
        width: 400px;
        height: 225px;
    }

    .dragon_frameDetail {
        width: 350px;
        height: 130px;
        min-height: 130px;
        font-size: 14px;
        padding: 10px;
    }

    .dragon_Title {
        width: 400px;
    }

    .dragon_detail {
        width: 200px;
    }

    .dragon_copyRight {
        font-size: 12px;
    }

    .dragon_rewardTitle {
        width: 300px;
    }

    .dragon_title02 {
        width: 300px;
        padding-top: 0;
        padding-bottom: 80px;
    }

    .dragon_questBg {
        width: 100%;
        padding: 30px 20px;
    }

    .dragon_quest03 {
        width: 150px;
    }
}

@media (max-width: 460px) {
    .dragon_frameLayout02 {
        width: 380px;
    }

    .dragon_character02 {
        width: 120px;
        min-width: 120px;
    }

    .dragon_character02_2 {
        width: 200px;
        min-width: 200px;
    }

}

@media (max-width: 420px) {
    .logo_Ro {
        width: 120px;
    }

    .dragon_logo {
        width: 320px;
    }

    .dragon_titleEvent {
        width: 320px;
    }

    .dragon_dateDetail {
        font-size: 16px;
    }

    .sun-flare {
        width: 400px;
        height: 400px;
    }

    .dragon_Cloud01 {
        width: 350px;
    }
}

@media (max-width: 400px) {
    .dragon_frameLayout {
        width: 330px;
        height: 185px;
        padding: 15px;
        margin-bottom: 220px;

    }

    .dragon_frameDetail {
        width: 330px;
        height: 140px;
        min-height: 140px;

    }

    .dragon_Title {
        width: 350px;
    }

    .dragon_questImg {
        width: 350px;
    }

    .quest_tableTitle {
        width: 80px;
        font-size: 14px;

    }

    .quest_tableDetail {
        font-size: 14px;
    }

    .dragon_questImg {
        width: 100%;
    }

    .dragon_quest02 {
        width: 300px;
    }
}