/* 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{ padding: 160px 0; position: relative; overflow: hidden; background-color: #EEF7F5; text-align: center;}
#section01 #tit{ padding-bottom: 40px;}
#section01 .con{ width: calc(50% - 10px);}
#section01 .con h3{ padding-bottom: 20px;}
#section01 .con .img-wrap{ width: 100%; height: 506px; background-color: #000; position: relative; margin-bottom: 15px;}
#section01 .con .img-wrap h4{ position: absolute; z-index: 10; width: fit-content; left: 0; right: 0; margin: 0 auto; top: calc(50% - 10px); opacity: 0; transition: .5s;}
#section01 .con .img-wrap h4 i{ display: block;}
#section01 .con:hover .img-wrap h4{ opacity: 1;}
#section01 .con:hover .img-wrap .img{opacity: .4;}
#section01 .con p{ padding-bottom: 10px;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section01{ padding: 80px 0 50px; text-align: center;}
  #section01 #tit{ padding-bottom: 20px;}
  #section01 .con{ width: 100%; padding-bottom: 40px;}
  #section01 .con .img-wrap{ height: 50.26vw; margin-bottom: 10px;}
}