/* header */
header{ z-index: 1000; transition: .3s; background:#fff; box-shadow: 2px 0 6px rgba(0,0,0,.2); height: 80px; border-bottom: 1px solid #ddd;}
header h1.logo img{opacity: 0;}
header h1.logo img.scroll{ opacity: 1;}
header .wrap1740 a p{ color: #333;}
header .wrap1740 #reser-btn{ border: 1px solid #333; transition: .3s; color: #333;}
/* =================== 1460px =================== */
@media (max-width: 1460px) {
    header{ height: 130px;}
    header .wrap1740 .flex-wrap{ padding-top: 10px;}
    header.scrolldown{ top: -130px;}
    header.scroll{ height: 130px;}
    header h1.logo{ order: 0;}
    header .gnb{ order: 2; width: 100%; text-align: center;}
    header #reser-btn{ order: 1; }
    header .subnavbg.active{ top: 130px; opacity: 1;}
}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    header{height: 50px; transition: .3s;}
    header .wrap1740 .flex-wrap{ padding-top:0;}
    header.scrolldown{ top: -50px;}
    header.scroll{ height: 50px;}
    header #panelbtn span{background-color: #333;} 
    header #m-reser-btn{ color: #333;}
    header:hover{ box-shadow: 2px 0 6px rgba(0,0,0,.2); border-bottom: 1px solid #ddd; background:#fff; }
    header:hover h1.logo img{opacity: 0;}
    header:hover h1.logo img.scroll{ opacity: 1;}
    header:hover .wrap1740 a p{ color: #333;}
    header:hover .wrap1740 #reser-btn{ border: 1px solid #333; transition: .3s; color: #333;}
}


#section01{ width: 100%; height: 1080px; position: relative; margin-top: 80px;}
#section01 .travel-pag-swiper{ width: 100%; height: 100%;}
#section01 .bgi{ width: 100%; height: 100%;}
#section01 .text-wrap{ display: inline-block; width: 417px; height: 789px; padding: 50px; background-color: #fff; position: relative; top: calc(50% - 394px); text-align: left; position: absolute; right: 90px;}
#section01 .text-wrap p{ font-size: 15px; font-weight: 300; transform:rotate(-0.03deg); padding-bottom: 20px;}
#section01 .text-wrap p i{ padding-right: 10px; }
#section01 .text-wrap h3{ font-size: 40px; padding-bottom: 40px; word-break: keep-all;}
#section01 .text-wrap .content{ font-size: 14px; line-height: 24px; word-break: keep-all;}
#section01 .text-wrap a{ position: absolute; bottom: 50px; right: 50px; font-size: 16px;}
.btn-wrap{ position: absolute; display: flex; width: fit-content; right: 90px; bottom: 80px;}
.travel-pag-btn{ width: 64px; height: 64px; line-height: 64px; text-align: center; background-color: #2A2A22; opacity: 1; font-size: 30px; font-weight: 400; color: #fff;}
.btn-wrap .swiper-button-next.swiper-button-disabled, .btn-wrap .swiper-button-prev.swiper-button-disabled{ opacity: 1;}
.travel-pag-next{position: relative; right: 0;}
.travel-pag-prev{position: relative; left: 0;}

/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section01{ width: 100%; height: auto; position: relative; margin-top: 50px; padding-bottom: 100px;}
    #section01 .none-pc{ width: 100%; height: auto;}
    #section01 .bgi{ width: 100%; height: 133.33vw; margin-bottom: 40px;}
    #section01 .text-wrap{ display: inline-block; width: 100%; height: auto; padding: 0 15px; background-color: transparent; position: relative; top: unset; text-align: center; position: relative; right: unset;}
    #section01 .text-wrap p{ font-size: 14px; padding-bottom: 40px;}
    #section01 .text-wrap p i{ padding-right: 5px; }
    #section01 .text-wrap h3{ font-size: 24px; padding-bottom: 30px; line-height: 46px;}
    #section01 .text-wrap .content{ font-size: 16px; line-height: 28px;}
}



#section02{ padding:0 0 200px; width: 100%;}
#section02 h3{ font-size: 24px; position: relative; text-align: left; width: 100%; padding: 0 15px 30px;}
#section02 h3 a{ float: right; font-size: 14px; padding-top: 5px;}
#section02 .more-room-swiper{ width: 100%;}
#section02 .more-room-swiper .bgi{ height: 44.80vw; border-radius: 4px;}
#section02 .more-room-swiper p{ text-align: left; padding-top: 10px; font-size: 14px; padding-bottom: 5px;}
#section02 .more-room-swiper span{  font-size: 8px;}