/* header */
.header .header-wrapper{ border-bottom: 1px solid rgba(74,74,72,.3);}
.header .logo-wrap img.logo-normal{display: none;}
.header .logo-wrap img.logo-scroll{display: inline-block;}
.header + .header-btn{ top: 0; opacity: 1; pointer-events: inherit;}
.header + .header-btn.active{top: 120px;}
.header {position: fixed; border-bottom: unset; transition: tranform 0.3s;  top: 0;}
.header:after{height: 100%; background-color: rgba(255,255,255,1); transform: scaleY(1); z-index: -1;}
.header .menu-icon__line{ background-color: #4A4A48;}
.header .header-icon > a.reser-btn{ display: inline-block; border: 1px solid rgba(112,112,112,.5); color: #707070; }
.header .header-icon > a i{ color: #707070;}
body.nav-active .header .header-wrapper{ border-bottom: 1px solid rgba(255,255,255,.3);}
body.nav-active .header:after{height: 100%; background-color: rgba(112,112,112,1); transform: scaleY(1); z-index: -1;}
body.nav-active .header .logo-wrap img.logo-normal{display: inline-block;}
body.nav-active .header .logo-wrap img.logo-scroll{display: none;}
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; }
.cm-header .op_show{ opacity: 1; transition: .5s; animation: unset;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    .header .header-wrapper{ border-bottom: 0;}
    body.nav-active .header .header-wrapper{ border-bottom: 0;}
    body.nav-active .header.scroll .header-wrapper{ border-bottom: 0;}
    body.nav-active .header{ border-bottom: 1px solid rgba(255,255,255,.3);}
    body.nav-active .header.scroll{ border-bottom: 1px solid rgba(255,255,255,.3);}
  }


/* section01 */
#section01{ overflow: hidden; width: 100%; height: 100vh; z-index: 1; top: 0; left: 0; margin-top: 113px; }
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section01 { overflow: hidden; position: relative; width: 100%; height:auto;  z-index: 0; margin-top: 60px; }
}


#section02{ position: relative; text-align: left; height: 730px;}
#section02 .wrap1440{ position: relative; padding: 120px 0; }
#section02 .box{ position: absolute; background-color: #707070; display: block; width: 1560px; height: 610px; top: 0; left: -240px; z-index: 1;}
#section02 .wrap1440 > img{ position: absolute; width: 474px; object-fit: cover; bottom: 0; left: 0; z-index: 0;}
#section02 .wrap1440 .con-wrap{ position: relative; z-index: 10; padding-top: 80px;}
#section02 .wrap1440 .con-wrap h3{ position: relative; padding-right: 90px; display: inline-block; overflow: hidden;}
#section02 .wrap1440 .con-wrap h3:after{ position: absolute; content: ''; display: block; width: 60px; height: 1px; background-color: #fff; opacity: .8; right: 0; bottom: 10px;}
#section02 .wrap1440 .con-wrap p{ line-height: 20px; overflow: hidden; position: relative; transform: translate(0%, 125%) rotate(4deg); opacity: 0; transition: .5s; transition-duration: 1s; bottom: -40px;}
#section02 .wrap1440 .con-wrap h3 span{ position: relative; transform: translate(0%, 100%); opacity: 0;  transition: .5s; transition-duration: 2s; bottom: -30px;}
#section02 .wrap1440 .con-wrap span.up{ transform: translate(0px, 0px); opacity: 1; bottom: 0; }
#section02 .wrap1440 .con-wrap p.up{ bottom: 0; transform: translate(0px, 0px); opacity: .5; }
#section02 .wrap1440 .con-wrap span:nth-child(2){ transition-delay: 300ms;}
#section02 .wrap1440 .con-wrap p:nth-child(2){ transition-delay: 200ms;}
#section02 .wrap1440 .con-wrap p:nth-child(3){ transition-delay: 400ms;}
#section02 .wrap1440 .con-wrap p:nth-child(4){ transition-delay: 600ms;}
#section02 .wrap1440 .con-wrap p:nth-child(5){ transition-delay: 800ms;}
#section02 .wrap1440 .con-wrap p:nth-child(6){ transition-delay: 1000ms;}
#section02 .wrap1440 .con-wrap p:nth-child(7){ transition-delay: 1200ms;}
#section02 .wrap1440 .con-wrap p:nth-child(8){ transition-delay: 1400ms;}
#section02 .wrap1440 .img-wrap{ position: absolute; width: 1050px; height: 610px; right: -240px; bottom: 0; overflow: hidden; z-index: 2;}
#section02 .wrap1440 .img-wrap .img{ transform: scale(1.2); transition: 1.5s; opacity: 0; transition-timing-function: ease;}
#section02 .wrap1440 .img-wrap .mask{ position: absolute; width: 100%; height: 100%; background-color: #707070; transform: translate(-100%, 0%); transition: 1.5s; transition-timing-function: cubic-bezier(0.88, -0.02, 0.38, 1);}
#section02 .wrap1440 .img-wrap.active .img{ transform: scale(1); opacity: 1; transition-delay: 700ms;}
#section02 .wrap1440 .img-wrap.active .mask{ transform: translate(100%, 0%);}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section02{ height: auto; background-color: #707070;}
    #section02 .wrap1440{ position: relative; padding: 50px 20px 0; }
    #section02 .box{ display: none;}
    #section02 .wrap1440 > img{ position: absolute; width: 63.20vw; object-fit: cover; bottom: unset; top: 62.27vw; left: unset; right: -13.33vw;}
    #section02 .wrap1440 .con-wrap{ padding-top: 0;}
    #section02 .wrap1440 .con-wrap h3{ padding-right: 50px; }
    #section02 .wrap1440 .con-wrap h3:after{ width: 30px; bottom: 5px;}
    #section02 .wrap1440 .con-wrap p{ word-break: keep-all; }
    #section02 .wrap1440 .img-wrap{ position: relative; width: calc(100% + 40px); height: 58.00vw; right: unset; left: -20px; }
    #section02 .wrap1440 .img-wrap .img{ transform: scale(1.2); transition: 1.5s; opacity: 0; transition-timing-function: ease;}
    #section02 .wrap1440 .img-wrap .mask{ position: absolute; width: 100%; height: 100%; background-color: #707070; transform: translate(-100%, 0%); transition: 1.5s; transition-timing-function: cubic-bezier(0.88, -0.02, 0.38, 1);}
    #section02 .wrap1440 .img-wrap.active .img{ transform: scale(1); opacity: 1; transition-delay: 700ms;}
    #section02 .wrap1440 .img-wrap.active .mask{ transform: translate(100%, 0%);}
}




#section03{ padding: 120px 0; text-align: center;}
#section03 .wrap1440{ display: flex; justify-content: space-between; align-items: center;}
#section03 #map{ width: 1050px; height: 472px; background-color: #4A4A48;}
#section03 .text-wrap{ width: calc(100% - 1050px); padding-left: 54px; text-align: left; }
#section03 .text-wrap .insta{ margin-right: 15px;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section03{ padding: 50px 0; text-align: center;}
    #section03 .wrap1440{ flex-direction: column;}
    #section03 #map{ width: 100%; height: 58vw; background-color: #4A4A48;}
    #section03 .text-wrap{ width: 100%; padding-left: 0; text-align: left; }
    #section03 .text-wrap .insta{ margin-right: 10px;}

}