/* 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;}
}


/* section */
#section01{ padding: 80px 0 120px; text-align: center;}
#section01 .bgi{ padding-bottom: 80px; width: 100%; height: 746px;}
#section01 .text-wrap h3{ font-size: 40px; line-height: 56px; padding-bottom: 50px; padding-top: 80px;}
#section01 .text-wrap p{ font-size: 14px; line-height: 24px; padding-bottom: 20px;}
#section01 .text-wrap p.color2{ padding-bottom: 0; padding-top: 20px;}
/* =================== 1780px =================== */
@media (max-width: 1780px) {
    #section01 .bgi{ height:41.91vw; }
}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section01{ padding: 50px 0 60px; }
    #section01 .wrap1740{ padding: 0;}
    #section01 .bgi{ padding-bottom: 30px; width: 100%; height: 74.93vw;}
    #section01 .text-wrap h3{ font-size: 24px; line-height: 36px; padding-bottom: 30px; padding-top: 30px;}
    #section01 .text-wrap p{ padding-bottom: 20px;}
    #section01 .text-wrap p.color2{ padding-bottom: 0; padding-top: 0;}
}


#section02{ position: relative; padding-bottom: 180px; overflow: hidden;}
#section02 .landscape-pag-swiper{ width: 100%; height: 43.39vw; position: relative;}
#section02 .landscape-pag-pag{ display: none;}
#section02 .thumb{ padding-top: 40px;}
#section02 .wrap1740{ overflow: visible;}
#section02 .thumb-swiper{ width: 100%; max-width: 1446px; position: relative; left: 0; right: 0; margin: 0 auto; overflow: hidden;}
#section02 .thumb .bgi{ width: 100%; height: 152px;}
#section02 .thumb-btn{ width: 30px; height: 30px; line-height: 30px; font-size: 20px; top: calc(50% - 15px); bottom: unset; opacity: 1; }
#section02 .thumb .swiper-button-prev i, #section02 .thumb .swiper-button-next i{ width: 100%; height: 100%; line-height: 30px; position: relative; background-color: transparent; }
#section02 .thumb .swiper-button-prev i{ left: 45px;}
#section02 .thumb .swiper-button-next i{ right: 45px;}
#section02 .thumb .swiper-button-next.swiper-button-disabled, #section02 .thumb .swiper-button-prev.swiper-button-disabled{ opacity: .4;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section02{ position: relative; padding-bottom: 60px; overflow: hidden;}
    #section02 .landscape-pag-swiper{ width: 100%; height: 74.93vw; position: relative;}
    #section02 .landscape-pag-pag{ display: block;}
    #section02 .thumb{ display: none;}
}

#section03{ width: 100%; height: 56.25vw;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
     #section03{ height: 100.00vw;} 
}



#section04{ padding: 180px 0 200px; position: relative;}
#section04 #map{ width: 100%; height: 620px; background-color: antiquewhite; margin-bottom: 50px;}
#section04 .wrap1446 > .flex-wrap{ border-top: 1px solid #000; padding-top: 50px; align-items: flex-start;}
#section04 .wrap1446 > .flex-wrap > .wrap > div{ width: 360px;}
#section04 .wrap1446 .flex-wrap .add{ margin-right: 25px;}
#section04 .wrap1446 .flex-wrap h3{ font-size: 40px;}
#section04 .wrap1446 .flex-wrap h4{ font-size: 20px; padding-bottom: 15px;}
#section04 .wrap1446 .flex-wrap p{ font-size: 14px; line-height: 24px; font-weight: 300; color:#888}
/* =================== 1486px =================== */
@media (max-width: 1486px) {
    #section04 #map{ height: 40.38vw;}
}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section04{ padding: 60px 0 200px; }
    #section04 #map{ height: 42.93vw; margin-bottom: 20px;}
    #section04 .wrap1446 > .flex-wrap{ padding-top: 30px; align-items: center; flex-direction: column; text-align: center;}
    #section04 .wrap1446 > .flex-wrap > .wrap > div{ width: 100%;}
    #section04 .wrap1446 .flex-wrap .add{ margin-right: 0; padding-bottom: 30px;}
    #section04 .wrap1446 .flex-wrap h3{ font-size: 24px; padding-bottom: 40px;}
    #section04 .wrap1446 .flex-wrap h4{ font-size: 16px; padding-bottom: 10px;}
    #section04 .wrap1446 .flex-wrap p{ font-size: 14px; line-height: 24px;}
}