@media screen and (max-aspect-ratio: 1219/685) {
    .main_banner_mp4 {
        width: auto !important;
        height: 100% !important;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

@media (max-width:1500px) {
    .page2_main-rf_li img {
        height: 330px;
    }
} 


@media (max-width:1240px) {
    #header>.inner {
        width: 90%;
        margin: auto;
    }

    #header #nav .menu_tit {
        font-size: 18px;
    }

    .page1_contents h1 {
        font-size: 35px;
    }

    .page1_contents p {
        font-size: 22px;
    }

    .page2_main-rf_li span {
        font-size: 18px;
    }

    .page2_main-rf_li img {
        height: 230px;
    }

    #page2 .page2_main-lf {
        width: 90%;
        margin: 0 auto 30px;
    }
    #page2 .subpage div .page2_main-rf {
        width: 90%;
        margin: 50px auto 0;
    }

    #page2 .page_contents {
        width: 90%;
        margin: auto;
    }

    h1 {
        font-size: 45px;
    }

    h3 {
        font-size: 30px;
    }

    .lf_sec2-2 {
        padding-left: 50%;
    }

    .main03 {
        width: 90%;
        margin: auto;
    }

    .main04_bottom-content {
        width: 90%;
        margin: 60px auto 0;
    }

    .main04_middle-content {
        width: 90%;
        margin: 30px auto 0;
    }

    #page5 .swiper-button-prev {
        left: 45%;
    }

    #page5 .swiper-button-next {
        right: 45%;
    }

    #page2 .swiper-button-prev {
        left: 45%;
    }

    #page2 .swiper-button-next {
        right: 45%;
    }

    .page6_top-content {
        width: 90%;
        margin: 0 auto;
    }

    .page6_bottom-content {
        width: 90%;
        margin: 60px auto 0;
    }

    .page6_card h3 a {
        font-size: 17px;
    }

    .page6_card-info {
        font-size: 14px;
    }

    .foo-inner {
        width: 90%;
        margin: auto;
    }
}

@media (max-width:1024px) {
    #header #nav .menu_ul {
        gap: 30px;
    }

    #header .logo img {
        width: 180px;
    }

    h1 {
        font-size: 35px;
    }

    h3 {
        font-size: 25px;
    }

    p {
        font-size: 16px;
    }

    .page6_bottom-content {
        flex-direction: column;
        gap: 20px;
        margin-top: 20px;
    }

    .page6_bottom-li {
        max-width: initial;
        margin: 0;
        height: auto;
    }

    .page6_card .color-overlay {
        max-width: initial;
    }

    .page6_card {
        max-width: initial;
        height: 150px;
        background-size: cover !important;
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 5px;
        justify-content: center;
    }

    .page6_bottom-li_top {
        margin-bottom: 10px;
        font-size: 15px;
    }

    .page6_card-info {
        position: initial;
        padding: 0;
        width: 90%;
        margin: 0 auto;
    }

    .page6_card:hover .page6_title-content {
        margin: 0;
    }

    .page6_title-content {
        margin: 0;
        position: initial;
    }

    .page6_card-info br:last-child {
        display: none;
    }

    .mapBigCon {
        padding: 0 0 0 30px;
    }

    .aerabox {
        width: 40%;
    }
}

@media (max-width:840px) {
    #header>.inner {
        height: 55px;
        padding-top: 0px;
    }
    .pop-pagination span[aria-label="Go to slide 4"]{
        display: inline-block !important;
    }
    .dtmbpop,
    .dtmbVideo1{
        display: block !important;
    }
    .dtmbVideoCon{
        display: flex !important;
    }
    .dtmbVideo2{
        display: none !important;
    }
    #info {
        display: none;
    }

    .m_info {
        display: flex;
    }

    .m_info img {
        height: 21px;
    }

    .all_ul {
        padding-top: 10px;
    }

    #header {
        height: 60px;
    }


    #header .logo img {
        width: 90px;
    }

    #header #nav .menu_tit {
        font-size: 14px;
    }

    #header #nav .menu_ul {
        gap: 20px;
    }

    #header #nav {
        display: none;
    }

    .swiper-pagination,
    .swiper-pagination2 {
        display: none;
    }

    .header_top_menu {
        display: none;
    }

    .hamburger {
        display: block;
    }

    .header2_li {
        font-size: 15px;
        height: 25px;
    }

    .mainImg {
        background: url(../img/common/main-bg01.png) center / cover no-repeat;
    }

    .page1_contents {
        right: auto;
        left: 5%;
    }

    .page2_main-rf_li {
        width: 32%;
        margin: 0;
    }

    .rf_sec2,
    .rf_sec2-2 {
        width: 100%;
    }

    #page2 .page_contents {
        position: absolute;
        z-index: 10;
        color: #fff;
        text-shadow: 3px 3px 10px black;
    }

    .lf_sec2-2 {
        padding: 0;
        width: 90%;
        margin: 0 auto;
    }

    .flbox {
        padding: 0 24px;
    }

    .flitem02-inbox {
        gap: 1.5% !important;
    }

    .flbox .flitem02 .flitem02-inbox>div:first-child {
        padding-left: 25px;
    }

    .flbox .flitem02 .flitem02-inbox>div:last-child div {
        padding: 20px 0 20px 25px;
    }

    .flbox .flitem02 .flitem02-inbox div .strFT {
        font-size: 25px !important;
    }

    .flbox .flitem02 .flitem02-inbox div ul li {
        font-size: 18px !important;
        margin-top: 10px;
    }

    .flitem02-inbox>:last-child {
        gap: 2%;
    }

    #page4 .main04_li h1 {
        margin: 10px auto;
        font-size: 30px;
    }

    .main05 p {
        width: 90%;
        margin: 10px auto 0;
    }

    .main05 p br {
        display: none;
    }

    #page5 .swiper-pagination2 {
        display: none;
    }

    .foo-info {
        flex-direction: column;
        gap: 20px;
    }

    .foo-info p {
        font-size: 13px;
    }

    .foo-info ul li {
        font-size: 14px;
    }

    .foo-inner .logo {
        margin-bottom: 20px !important;
        width: 120px;
    }

    .foo-inner .logo img {
        width: 100%;
    }

    .foo-info ul li img {
        width: 30px !important;
    }

    .all_li {
        font-size: 20px;
        margin-bottom: 9px;
        margin-top: 9px;
        text-align: left;
        padding-left: 40px;
    }

    .go_page_btn {
        display: none;
    }

    .pop_up_tcontent,
    .popup {
        width: 300px;
        height: 450px;
    }

    .s_slide {
        height: 100%;
    }

    .pop_up_spans {
        font-size: 14px;
    }

    .pop-pagination {
        position: absolute;
        top: var(--swiper-pagination-top, auto) !important;
        display: block;
        width: 100%;
    }

    .pop_text_content {
        font-size: 13px;
    }

    .pop_text {
        width: 200px;
    }

    .pop_text_title {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .regionBtn{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        margin: 20px 0;
    }
    .regionBtn li {
        font-size: clamp(14px, 1.5vw, 23px);
        line-height: clamp(22px, 3vw, 35px);
        font-weight: 500;
        color: #13568D;
        border: 2px solid #13568D;
        border-radius: 5vw;
        padding: 0 3.5vw;
        transition: background-color 0.2s linear, color 0.2s linear;
    }

    .mapBigCon {
        flex-direction: column;
        padding: 0 10px;
    }
    

    .mapbox {
        width: 50%;
        padding: 0;
        display: none;
    }

    .aerabox {
        flex-direction: column;
        height: 40%;
        justify-content: center;
        width: 100%;
    }

    .regionBox ul{
        padding: 4.16vw 3vw;
    }


    .regionBox ul li {
        font-size: clamp(14px, 1.5vw, 23px);
        font-weight: 500;
        line-height: clamp(18px, 1.5vw, 25px);
        margin: 0 5px;
    }

    .with_tcontent {
        margin: 0 10px;
        width:100%;
    }

    .with_items{
        width:99%;
        height:58px;
    }

    .with_item {
        position:absolute;
        opacity: 0;
        transition: all 1s;
        width:100%;
    }

    .with_item.on {
        opacity: 1;
    }

    .with_content{
        line-height: 1.7;
    }
}

@media (max-width:499px) {
    #header .logo img {
        width: 120px;
    }

    #header #nav .menu_tit {
        display: none;
    }

    .page1_contents h1 {
        font-size: 30px;
    }

    #page1 p {
        font-size: 18px;
    }

    .scroll_ani {
        width: 20px;
        height: 40px;
    }

    h1 {
        font-size: 28px;
    }

    h3 {
        font-size: 20px;
    }

    #page2 .swiper-slide p br {
        display: none;
    }

    #page4 .main04_li h1,
    #page4 .main04_li h3 {
        font-size: 20px;
    }

    .pdWithMo {
        padding-top: 70px;
    }

    .flbox {
        padding: 0 10px;
    }

    .flbox .flitem02 .flitem02-inbox {
        display: block;
        min-height: 360px;
    }

    .flbox .flitem02 .flitem02-inbox>div:first-child {
        min-width: none !important;
        padding: 20px 0 20px 25px;
        margin-bottom: 10px;
    }

    .flbox .flitem02 .flitem02-inbox>div:last-child {
        display: block;
        min-width: none;
    }

    .flbox .flitem02 .flitem02-inbox>div:last-child div:first-child {
        margin-bottom: 10px;
    }

    .flbox .flitem02 .flitem02-inbox div .strFT {
        font-size: 18px !important;
    }

    .flbox .flitem02 .flitem02-inbox div ul li {
        font-size: 14px !important;
        margin-top: 5px;
    }

    .main04_li img {
        width: 50%
    }

    .main04_bottom-content {
        margin-top: 20px;
    }

    .page6_card-info {
        display: none;
    }

    .page6_card {
        height: 80px;
    }

    .foo-info ul li a {
        font-size: 11px;
    }

}

@media (min-width: 1400px) {
    .pop_text_title {
        font-size: 27px;
    }

    .pop_text_content {
        font-size: 20px;
    }

    .pop_text {
        width: 340px;
    }
}