/* header */
.header .logo-wrap img.logo-normal{opacity: 0;}
.header .logo-wrap img.logo-scroll{opacity: 1;}
.header {position: fixed; height: 80px; transition: tranform 0.3s;  top: 0;}
.header:after{height: 100%; background-color: rgba(255,255,255,.6); backdrop-filter: blur(10px); transform: scaleY(1); z-index: -1;}
.header .menu-icon_wrap{ color: #222;}
.header .menu-icon_wrap .line{ background-color: #222;}
.header .header-icon{ color: #81A69B;}
body.nav-active .header .header-wrapper{ border-bottom: 1px solid rgba(255,255,255,.3);}
body.nav-active .header:after{height: 100%; background-color: transparent; transform: scaleY(1); z-index: -1;}
body.nav-active .header .logo-wrap img.logo-normal{opacity: 0;}
body.nav-active .header .logo-wrap img.logo-scroll{opacity: 1;}
body.nav-active .header .header-icon > a.reser-btn{ display: inline-block; border: 1px solid #fff; background-color: transparent; color: #fff; }
body.nav-active .header .header-icon > a i{ color: #fff;}
body.nav-active .header .menu-icon__line{ background-color: #fff; }
body.nav-active .header{ background: transparent;}
body.nav-active .header .header-icon i, body.nav-active .header .header-icon div{color:#fff;}

/* =================== 1024px =================== */
@media (max-width: 1024px) {
  .header{ height: 50px; top: 0;}
  .header:after{height: 100%; background-color: #EEF7F5; backdrop-filter: unset; transform: scaleY(1); z-index: -1;}
  body.nav-active .header .header-icon > a.reser-btn {border: 1px solid rgba(255,255,255,.5); position: relative; color: #fff; }

}





/* section01 */
#section01{ width: 100%; height: 100vh;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section01{ width: 100%; height: 64.10vw; margin-top: 50px;}
}


/* section02 */
#section02{ padding: 160px 0 118px; position: relative; overflow: hidden; text-align: center; background-color: #EEF7F5;}
#section02 img{ padding-bottom: 20px;}
#section02 h3{ padding-bottom: 30px;}
#section02 p{ padding-bottom: 20px; line-height: 32px; word-break: keep-all;}
#section02 p span{ font-size: 24px;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section02{ padding: 80px 0; text-align: center; }
  #section02 img{ padding-bottom: 15px;}
  #section02 h3{ padding-bottom: 25px;}
  #section02 p{ line-height: 24px;}
  #section02 p span{ font-size: 14px;}
}

/* img-section */
#img-section{ position: relative; background-color: #EEF7F5; font-size: 0;}
#img-section .top{ padding-bottom: 160px; align-items: flex-start;}
#img-section .top > div:first-child{ width: 655px; justify-content: flex-end;}
#img-section .top > div:last-child{ width: 790px; padding-top: 185px;}
#img-section .top > div:first-child .bg-img{ width: 100%; height: 497px; margin-bottom: 25px;}
#img-section .top > div:last-child .bg-img{ width: 100%; height: 600px; order: 2; margin-top: 25px;}
#img-section h2{ padding-bottom: 100px;}
#img-section .btm .bg-img{ width: 520px; height: 395px;}
/* =================== 1640px =================== */
@media (max-width: 1640px) {
  #img-section .top > div:first-child{ width: 39.94vw; }
  #img-section .top > div:last-child{ width: 48.17vw; padding-top: 11.28vw;}
  #img-section .top > div:first-child .bg-img{ height: 30.30vw; }
  #img-section .top > div:last-child .bg-img{ height: 36.59vw; }
  #img-section h2{ font-size: 7.25vw;}
  #img-section .btm .bg-img{ width: 31.71vw; height: 24.09vw;}
}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #img-section .top{ padding-bottom: 80px; }
  #img-section .top > div:first-child{ width: 100%; }
  #img-section .top > div:last-child{ width: 100%; padding-top: 40px;}
  #img-section .top > div:first-child .bg-img{ height: 61.54vw; margin-bottom: 10px;}
  #img-section .top > div:last-child .bg-img{ height: 61.54vw; order: 0; margin-top: 0; margin-bottom: 10px;}
  #img-section h2{ padding-bottom: 25px; text-align: center; width: 100%;}
  #img-section .btm .bg-img{ width: 100%; height: 61.54vw; margin-bottom: 10px;}
}




#section03{ background-color: #EEF7F5; padding: 160px 0; overflow: hidden; font-size: 0;}
#section03 #map{ display: block; width: 1220px; height: 800px; position: relative; right: -160px; background-color: #81A69B; order: 2;}
#section03 .content{ width: calc(100% - 1220px);}
#section03 .content #tit{ padding-bottom: 100px;}
#section03 .content h4{ padding-bottom: 10px;}
#section03 .content p.top{ padding-bottom: 60px;}
/* =================== 1640px =================== */
@media (max-width: 1640px) {
  #section03 #map{ width: calc(64.63vw + 20px); right: -20px; }
  #section03 .content{ width: calc(100% - 64.63vw - 20px);}
}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section03{ padding: 80px 0; }
  #section03 .wrap1600{ padding: 0;}
  #section03 #map{ display: block; width: 100%; height: 64.10vw; right: 0; order: 0;}
  #section03 .content{ width: 100%; padding: 20px 20px 0;}
  #section03 .content #tit{ padding-bottom: 40px;}
  #section03 .content p.top{ padding-bottom: 40px;}
}