/* ==============================
    cm-header 
============================== */
.cm-header {position: absolute; width: 100%; top: 0; left: 0; z-index: 999;}
.header-wrapper { height: 100%; position: relative;  display: flex; justify-content: space-between; align-items: center;  } 
.logo-wrap {width: 115px; height: auto; text-align: center;}
.logo-wrap a {display: inline-block; width: 100%; height: 42px; transition: .5s; position: relative; }
.logo-wrap img { position: absolute; width: 100%; height: 100%; object-fit: cover; transition: .5s; z-index: 100; left: 0; top: 0;}
.logo-wrap img.logo-normal{opacity: 1;}
.logo-wrap img.logo-scroll{opacity: 0;}

.header.scroll .logo-wrap img.logo-normal{opacity: 0;}
.header.scroll .logo-wrap img.logo-scroll{opacity: 1;}


@media (max-width: 1024px){
    .header-wrapper { padding: 0;}
    .logo-wrap {width: 80px; }
    .logo-wrap a {height: 30px; text-align: center; padding: 9px 0;}
}
/* ==============================
    header 
============================== */
.header {position: fixed; top: 0;left: 0; width: 100%; height: 80px; z-index: 2002; background: transparent; box-shadow: none;-webkit-transition: all 300ms linear;-moz-transition: all 300ms linear;-o-transition: all 300ms linear;-ms-transition: all 300ms linear;transition: all 300ms linear; -webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);-webkit-backface-visibility: hidden;backface-visibility: hidden; border-bottom: 1px solid rgb(255,255,255,0.2); }
.header:after{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 0; background-color: rgba(255,255,255,0); transform: scaleY(0); transform-origin: top; transition: .5s;}
.header.scroll {position: fixed; height: 80px; transition: tranform 0.3s;  top: 0;}
.header.scroll:after{height: 100%; background-color: rgba(255,255,255,.6); backdrop-filter: blur(10px); transform: scaleY(1); z-index: -1;}
@media (max-width: 1024px){
    .header{ height: 50px; }
    .header.scroll{ height: 50px; top: 0;}
    .header.scroll:after{height: 100%; background-color: #EEF7F5; backdrop-filter: unset; transform: scaleY(1); z-index: -1;}
}
/* ==============================
    header icon
============================== */
.meun-reser-wrap{ width: 175px; height: 100%;}
.header-icon{ display: inline-block; line-height: 19px; transition: .5s;}
.menu-icon_wrap{ overflow: hidden; position: relative; display: inline-block; line-height: 19px; transition: .5s;}
.menu-icon_wrap p{ display: inline-block;}
.menu-icon_wrap .plus-minus{ display: inline-block; width: 7px; height: 7px; position: relative; margin-left: 5px; top: -1px;}
.menu-icon_wrap .plus-minus .line{ display: block; width: 7px; height: 1px; background-color: #fff; transition: .5s; position: absolute;}
.menu-icon_wrap .plus-minus .line1{ top: 3px;}
.menu-icon_wrap .plus-minus .line2{ top: 3px; transform: rotate(90deg);}

.header.scroll .menu-icon_wrap{ color: #222;}
.header.scroll .menu-icon_wrap .line{ background-color: #222;}
.header.scroll .header-icon{ color: #81A69B;}
@media (max-width: 1024px){
    .meun-reser-wrap{ width: 136px; }
}
/* ==============================
    nav
============================== */
.nav {position: fixed; z-index: 98;}
.nav:before, .nav:after {content: "";position: fixed; width: 100%; height: 100%; top: 0; background: rgba(238,247,245,0.6); z-index: -1;-webkit-transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s, -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;-webkit-transform: translateX(0%) translateY(-100%);transform: translateX(0%) translateY(-100%);}
.nav:after {background: rgba(238,247,245,1);-webkit-transition-delay: 0s;transition-delay: 0s; }
.nav:before {-webkit-transition-delay: .2s;transition-delay: .2s;}
.nav-content {position: fixed;visibility: hidden; top: 0; width: 100%; text-align: center; height: 100vh;}
.nav-content .wrap1600{ display: flex; justify-content: center; align-items: center; padding: 0 50px;}
.nav-list {position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center;}
.nav-item {
	position: relative;
	display: inline-block;
	text-align: center;
	color: #fff;
	overflow: hidden; 
    font-size: 0;
	font-weight: 700;
	margin-top: 0;
	margin-bottom: 0;
    max-width: max-content;
}
.nav-item > a.hover-target{ position: relative; padding-bottom: 5px;}
.nav-item > a.hover-target:after{ content: ''; position: absolute; width: 100%; height: 2px!important; background-color: #222; display: block; bottom: 0; left: 0; transition: .5s; transform: scaleX(0);}
.nav-item > a.hover-target:hover:after{ transform: scaleX(1); height: 2px;}
.nav-item.active-nav a.hover-target:after{ transform: scaleX(1); height: 2px;}
.nav-item a{ 
	position: relative;
	overflow: hidden; 
    margin-bottom: 25px;
	z-index: 2;
	display: inline-block;
    text-transform: uppercase;
    opacity: 0;
    top: -50px;
    transition: .5s;
}

.nav-item a p{
    transition: .5s;
}

.nav-item a:hover:after {height: 20px; opacity: 1;}
.nav-item.active-nav a:after {height: 20px;opacity: 1;}
.nav-list .sub-links {position: relative; padding: 0; margin: 0 0 30px 0; display: none;}
.nav-list .sub-links li {padding: 0; margin: 0 auto 10px 0; text-align: center; }
.nav-list .sub-links li:first-child {margin-top: 0;}
.nav-list .sub-links li a { 
	color: #999;
	overflow: hidden;
	margin: 0 auto;
    font-size: 16px;
    line-height: 19px;
    padding-bottom: 10px;
	text-align: left;
	display: inline-block;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear; 
}
.nav-list .sub-links li a:after {display: none;}
.nav-list .sub-links li a:hover {color: #999; opacity: 1;}
.nav-list .sub-links li.active-nav a {color: #999; opacity: 1;}
.navlogo{ position: absolute; right: 0; bottom: 0; opacity: 0; transition: .5s; transition-delay: .3s;}
@media (max-width: 1024px){
    .nav-content {position: fixed; visibility: hidden;top: 50px; width: 100%;text-align: center;}
    .nav-content .wrap1600{ flex-direction: column; position: relative; height: calc(100vh - 120px); padding: 0 24px; justify-content: center;}
    .nav-item a {  
        color: rgba(255,255,255,1);
        padding-left: 0;
        margin-bottom: 15px;
        padding-top: 10px;
        font-size: 16px;
        line-height: 16px;
    }
    .nav-list .sub-links{ padding-bottom: 0; margin: 0!important; position: relative; }
    .nav-list .sub-links li a { 
        overflow: hidden;
        line-height: 16px;
        padding-bottom: 10px;
        padding-top: 0;
        max-width: 100%;
        text-align: left; 
        border-radius: 0;
        font-size: 14px; 
    }
    .navlogo{ position: absolute; right: 24px; bottom: 80px; width: 78px; object-fit: cover;}
}
/* ==============================
    nav-active
============================== */
body.nav-active{ overflow: hidden;}
body.nav-active .header-icon{ color: #81A69B;}
body.nav-active .menu-icon_wrap{ color: #222;}
body.nav-active .menu-icon_wrap .line{ background-color: #222;}
body.nav-active .menu-icon_wrap .plus-minus .line2{ transform: rotate(0);}
body.nav-active .logo-wrap img.logo-normal{opacity: 0;}
body.nav-active .logo-wrap img.logo-scroll{opacity: 1;}


body.nav-active .nav-item a{ opacity: 1; top: 0;}
body.nav-active .header.scroll .header-wrapper{ border-bottom: 1px solid rgba(255,255,255,.3);}
body.nav-active .nav-content {visibility: visible;}
body.nav-active .header.scroll:after{height: 100%; background-color: transparent; transform: scaleY(1); z-index: -1;}
body.nav-active .header.scroll .logo-wrap img.logo-normal{opacity: 0;}
body.nav-active .header.scroll .logo-wrap img.logo-scroll{opacity: 1;}
body.nav-active .header.scroll .header-icon > a.reser-btn{ display: inline-block; border: 1px solid #fff; background-color: transparent; color: #fff; }
body.nav-active .header.scroll .header-icon > a i{ color: #fff;}
body.nav-active .header.scroll .menu-icon__line{ background-color: #fff; }
body.nav-active .header{ background: transparent; border-bottom: unset;}
body.nav-active .header.scroll{ background: transparent;}
body.nav-active .nav-content .wrap1600 .img-wrap{opacity: 1; top: 0;}
body.nav-active .header.scroll .header-icon i, body.nav-active .header.scroll .header-icon div{color:#fff;}

body.nav-active .menu-icon__line {
	background-color: #fff;
	-webkit-transform: translate(0px, 0px) rotate(-45deg);
    transform: translate(0px, 0px) rotate(-45deg);
}
body.nav-active .line-a {
	width: 15px;
	-webkit-transform: translate(3px, 5px) rotate(45deg);
    transform: translate(3px, 5px) rotate(45deg);
}
body.nav-active .line-c {
	width: 15px;
	float: right;
	-webkit-transform: translate(-2px, -6.5px) rotate(45deg);
    transform: translate(-2px, -6.5px) rotate(45deg);
}

body.nav-active .menu-icon:hover .line-a, body.nav-active .menu-icon:hover .line-c {width: 15px;}
body.nav-active .nav {visibility: visible;}
body.nav-active .nav:before, body.nav-active .nav:after {-webkit-transform: translateX(0%) translateY(0%);transform: translateX(0%) translateY(0%);}
body.nav-active .nav:after {-webkit-transition-delay: .1s;transition-delay: .1s;}
body.nav-active .nav:before {-webkit-transition-delay: 0s;transition-delay: 0s;}
body.nav-active .curent-page-name-shadow {margin-top: -25px;opacity: 0.08;-webkit-transition-delay: 0.5s;transition-delay: 0.5s;}
body.nav-active .mo-sns{ display: none;}
body.nav-active .navlogo{ opacity: 1;}
@media (max-width: 1024px){
    body.nav-active .header-icon > a.reser-btn{border: 1px solid rgba(255,255,255,.5); position: relative; color: #fff; }
    body.nav-active .header.scroll .header-icon > a.reser-btn {border: 1px solid rgba(255,255,255,.5); position: relative; color: #fff; }
    body.nav-active .nav-content .wrap1600 .img-wrap{ display: none;}
    body.nav-active .logo-wrap img.logo-normal{ opacity: 0;}
    body.nav-active .logo-wrap img.logo-scroll{ opacity: 1;}

    body.nav-active .mo-sns{ display: block; }
    body.nav-active .mo-sns.nav-item a{ padding-right: 15px; padding-bottom: 0; }
    body.nav-active .mo-sns.nav-item a i{ font-size: 24px;}
}





/* footer */
footer{ position: relative; background-color: #81A69B; padding: 60px 0;}
footer .flex-wrap{ align-items: flex-start;}
footer .left img{ padding-bottom: 40px; width: 115px; object-fit: cover;}
footer .left .license{ padding-bottom: 20px;}
footer .left .license li{ display: inline-block; padding-right: 20px;}
footer .left .info{ padding-bottom: 30px;}
footer .left .info li{ padding-bottom: 10px; }
footer .right .f-nav > li{ padding-left: 40px; display: inline-block; vertical-align: top;}
footer .right .f-nav a.upp{ display: inline-block; padding-bottom: 25px;}
footer .right .f-nav ul li a{ display: inline-block; padding-bottom: 10px;}
@media (max-width: 1024px){
    footer .left img{ width: 115px; object-fit: cover; }
    footer .left .license{ padding-bottom: 10px;}
    footer .left .license li{ padding-bottom: 10px;}
}