/* 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{ padding: 100px 0 140px; }
#section01.cafe .title{ text-align: center; }
#section01 #tab-area{ border-bottom: 1px solid #aeadad;}
#section01 #tab-area .tab-btn{ display: flex; justify-content: flex-start;}
#section01 #tab-area a{ display: inline-block; position: relative; transition: .5s; margin-right: 100px; line-height: 60px;} 
#section01 #tab-area a:after{ content: ''; position: absolute; width: 100%; height: 1px; background-color: #111; bottom: -1px; left: 0; transition: .5s; transform: scaleX(0); transform-origin: center;}
#section01 #tab-area a:hover, #section01 #tab-area a.active{ color: #111;}
#section01 #tab-area a:hover:after, #section01 #tab-area a.active:after{ transform: scaleX(1);}
#section01 .content-wrap{ margin-top: 120px; height: max-content; height: 588px; }
#section01.menu .content-wrap{ margin-top: 120px; height: max-content; height: 800px; }
#section01 .content-wrap .inner{ display: flex; justify-content: space-between; width: 100%;}
#section01 .content-wrap .con .img-wrap{ width: 882px;}
#section01 .content-wrap .con .text-wrap{ width: calc(100% - 882px); padding-top: 50px; padding-right: 10px; position: relative; left: -50px; opacity: 0; transition: .5s;}
#section01 .content-wrap .con.active .text-wrap{left: 0; opacity: 1;}
#section01 .content-wrap .tit h3{ display: inline-block; padding-right: 10px;}
#section01 .content-wrap .tit p{ display: inline-block;}
#section01 .content-wrap .con .text-wrap .content{ line-height: 22px; word-break: keep-all;}
#section01 .content-wrap .con .text-wrap .content strong{ font-weight: 700;}
#section01 .content-wrap .con .img-wrap .sub-full-swiper{ position: relative; left: 50px; height: 588px; padding-bottom: 44px; opacity: 0; transition: .5s;}
#section01 .content-wrap .con.active .img-wrap .sub-full-swiper{ left: 0; opacity: 1; }
#section01 .content-wrap .con .img-wrap .sub-full-swiper .sub-full-pag{ bottom: 2px; text-align: left;}
#section01 .content-wrap .con .img-wrap .sub-full-swiper .sub-full-pag .swiper-pagination-bullet{ background: #aeadad;  }
#section01 .content-wrap .con .img-wrap .sub-full-swiper .sub-full-pag .swiper-pagination-bullet:after{ border: 1px solid rgba(174,173,173,0); }
#section01 .content-wrap .con .img-wrap .sub-full-swiper .sub-full-pag .swiper-pagination-bullet-active{ background: #aeadad; }
#section01 .content-wrap .con .img-wrap .sub-full-swiper .sub-full-pag .swiper-pagination-bullet-active:after{border: 1px solid rgba(174,173,173,1); }
.tab-con .con{ width: 100%; opacity: 0; position: absolute; top: 0;}
.tab-con .con.active{ opacity: 1;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section01 { padding: 40px 0 50px;}
    #section01 #tab-area .wrap1440{ overflow-x: auto; padding-bottom: 1px;}
    #section01 #tab-area .wrap1440::-webkit-scrollbar { display: none; }
    #section01 #tab-area .tab-btn{ width: fit-content;}
    #section01 #tab-area a{ width: max-content; margin-right: 40px; line-height: 36px;} 
    #section01 #tab-area a:after{ bottom: -1px;}
    #section01 .content-wrap{ margin-top: 45px; height: auto; }
    #section01.menu .content-wrap{ margin-top: 45px; height: auto; }
    #section01 .content-wrap .con .inner{ display: flex; justify-content: space-between; flex-direction: column;}
    #section01 .content-wrap .con .img-wrap{ width: 100%; order: -1;}
    #section01 .content-wrap .con .text-wrap{ width: 100%; padding-top: 28px; padding-right: 0;}
    #section01 .content-wrap .tit h3{ display: inline-block; padding-right: 10px;}
    #section01 .content-wrap .tit p{ display: inline-block;}
    #section01 .content-wrap .con .text-wrap .content{ line-height: 22px; word-break: keep-all;}
    #section01 .content-wrap .con .img-wrap .sub-full-swiper{ height: 60.67vw; padding-bottom: 6.40vw;}
    .tab-con .con{ width: 100%; opacity: 1; position: relative; top: 0; display: none;}
    .tab-con .con.active{ opacity: 1; display: block;}
}


#section02{ margin-top: 800px; background-color: #fff; padding: 0 0 40px; position: relative; text-align: left;}
#section02 .wrap1520{ padding: 0;}
#section02 .fac-wrap{ display: none;}
#section02 .fac-wrap.active{ display: block;}
#section02 .content{ display: flex; align-items: center;}
#section02 .content .img-wrap{ width: 740px; height: 500px; border-radius: 10px; position: relative; overflow: hidden; }
#section02 .content .text-wrap{ padding-left: 80px;}
#section02 .content .text-wrap .con{line-height: 28px;}
#section02.scroll{ margin-top: 0;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section02{ margin-top: 0; }
    #section02 .wrap1520{ padding: 0 20px;}
    #section02 .content{ flex-direction: column; }
    #section02 .content .img-wrap{ width: 100%; height: 56.41vw; order: 2; }
    #section02 .content .text-wrap{ padding-left: 0; width: 100%;}
    #section02 .content .text-wrap .con{ border: 10px; padding: 25px 20px; background-color: #F8F8F8; }
    #section02 .content .text-wrap img{ width: 50px; object-fit: cover;}
}

#section02.travel{ padding: 0;}
#section02.travel .tit{ padding: 40px 0 0;}
#section02.travel .tit img{ width: 50px; object-fit: cover;}
#section02.travel .img-wrap{ width: 100%; height: 1000px; position: relative;}
#section02.travel .img-wrap .wrap1520{ padding: 70px 80px 250px; border-radius: 10px 10px 0 0; background-color: #fff; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; height: fit-content; z-index: 10; transition: .3s; opacity: 0; pointer-events: none;}
#section02.travel .img-wrap .wrap1520.show{ opacity: 1; pointer-events: inherit;}
#section02.travel .circle{ width: 50px; height: 50px; position: absolute; border-radius: 50%; line-height: 50px; text-align: center; left: 0; right: 0; margin: 0 auto; bottom: 100px;}
#section02.travel .circle.close{ background-color: #D1972F;}
#section02.travel .circle.open{ border: 1px solid rgba(255, 255, 255, 0.75); transition: .3s;}
#section02.travel .circle.open:hover{ backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); background-color: rgba(255, 255, 255, 0.75); z-index: 5;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section02.travel .img-wrap{ width: 100%; height: auto; position: relative;}
    #section02.travel .img-wrap .img{ width: 100%; height: 56.41vw; position: relative;}
    #section02.travel .img-wrap .wrap1520{ padding: 40px 20px; border-radius:0; background-color: #fff; position: relative; bottom: 0; left: 0; right: 0; margin: 0 auto; height: suto; z-index: 10; transition: .3s; opacity: 1; pointer-events: inherit;}
    #section02.travel .img-wrap .wrap1520.show{ opacity: 1; pointer-events: inherit;}
    #section02.travel .circle{ display: none;}

}


/* ==========================================================================
    #fac-full-SWIPER
    ========================================================================== */
.fac-full-swiper{ height: 100vh; position: relative;}
.fac-full-swiper .img-wrap{ width: 100%; height: 100%; position: relative; border-radius: 10px; overflow: hidden; }
.fac-full-swiper .swiper-button-next, .fac-full-swiper .swiper-button-prev{ width: 50px; height: 120px; text-align: center; transition: .3s;}
.fac-full-swiper .swiper-button-next img, .fac-full-swiper .swiper-button-prev img{ width: 100%; object-fit: cover;}
.fac-full-swiper .swiper-button-next:hover i, .fac-full-swiper .swiper-button-prev:hover i{ color: #fff;}
.fac-full-swiper .fac-full-prev{ left: 60px;}
.fac-full-swiper .fac-full-next{ right: 60px;}
.fac-full-swiper .fac-full-pag{ bottom: 40px; text-align: center; width: 100%;}
.fac-full-swiper h3{ position: absolute; top: 50%; text-align: center; z-index: 10; width: 500px; left: 0; right: 0; margin: 0 auto;}
.fac-full-swiper h3 span{ position: relative; top:-10px; letter-spacing: 0.3em;}

/* =================== 1024px =================== */
@media (max-width: 1024px) {
    .fac-full-swiper{ height: auto;}
    .fac-full-swiper .img-wrap{ width: 100%; height: 0; padding-top: 56.25%; position: relative; }
    .fac-full-swiper .swiper-button-next, .fac-full-swiper .swiper-button-prev{ width: 20px; height: 40px; top: calc(50% + 10px)!important;}
    .fac-full-swiper .fac-full-prev{ left: 20px;}
    .fac-full-swiper .fac-full-next{ right: 20px;}
    .fac-full-swiper .fac-full-pag{ bottom: 20px; text-align: center; width: 100%;}
}


#section03{ padding: 80px 0; position: relative; text-align: left; background-color: #F9F7F7;}
#section03 .tit{overflow: hidden; }
#section03 a.btn01{ display: inline-block; text-align: left; transition: .3s; width: 200px; height: 40px; line-height: 40px; border: 1px solid #D1972F; position: relative; padding: 0 20px; }
#section03 a.btn01 i{ width: 60%; line-height: 40px; text-align: left; float: left; transition: .3s;}
#section03 a.btn01 p{ width: 40%; line-height: 40px; text-align: right; padding-right: 5px; float: left; transition: .3s;}
#section03 a.btn01:hover{ background-color: #D1972F; }
#section03 a.btn01:hover i{ padding-left: 50px; color: #fff;}
#section03 a.btn01:hover p{ padding-right: 0; color: #fff;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #section03{ padding: 50px 0; }
    #section03 .wrap1520{ padding: 0;}
    #section03 .tit{overflow: hidden;  padding: 0 20px;}
    #section03 a.btn01{ width: 175px; height: 40px; display: block; float: unset; clear: both; margin-top: 20px;}
}