/* ==============================
    cm-header 
============================== */
.cm-header {position: fixed;width: 100%;top: 0;left: 0; z-index: 999;}
.header-wrapper {position: relative;width: 100%;display: flex;justify-content: space-between;align-items: center; padding: 0 160px;} 
#head-full{ flex: 2;}
#head-full a i{ line-height: 100px; transition: .3s;}
#head-full a{display: inline-block; transition: .3s;}
#head-full p{ display: inline-block; line-height: 100px; padding-left: 10px; vertical-align: top;  transition: .3s;}
.logo-wrap {width: auto;height: 100px; flex: 1; text-align: center;}
.logo-wrap a {display: block;width: 100%;height: 80px;margin-top: 10px; transition: .3s;}
.logo-wrap img {width: auto;height: 100%;object-fit: cover;}
.header.scroll #head-full a i{ line-height: 90px;}
.header.scroll #head-full a{ position: relative; top: -5px;}
.header.scroll #head-full p{ line-height: 90px;}
.header.scroll .logo-wrap a {display: block;width: 100%;height: 70px;margin-top: 10px; object-fit: cover;}
@media (max-width: 1024px){
    .header-wrapper {padding: 0 15px;}
    .logo-wrap {height: 60px; text-align: left;}
    .logo-wrap a {height: 40px; margin-top: 8px;}
    .header.scroll .logo-wrap a {height: 40px; margin-top: 8px;}
    #head-full{ display: none;}
}
/* ==============================
    header 
============================== */
.header {position: absolute; top: 0;left: 0; width: 100%; height: 100px; border-bottom: 1px solid #fff; z-index: 2002;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);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;}
.header.scroll {position: fixed; border-bottom: unset;  height: 90px; background-color: rgba(34, 34, 34, 0.7);-webkit-transition: -webkit-transform 0.3s;-moz-transition: -moz-transform 0.3s;transition: transform 0.3s;}
@media (max-width: 1024px){
    .header{ height: 60px;}
    .header.scroll{ height: 60px;  background-color: #fff;}
}
/* ==============================
    header icon
============================== */
.header-icon { flex: 2; text-align: right; -webkit-transition : all 0.3s ease-out;-moz-transition : all 0.3s ease-out;-o-transition :all 0.3s ease-out;transition : all 0.3s ease-out; height: 100px;}
.menu-icon {position: relative; z-index: 2; width: 30px; cursor: pointer;}
.menu-icon__line {display: block; width: 30px; height: 2px; background-color: #fff; margin-bottom: 7px;-webkit-transition: background-color .5s ease, -webkit-transform .2s ease;transition: background-color .5s ease, -webkit-transform .2s ease;transition: transform .2s ease, background-color .5s ease;transition: transform .2s ease, background-color .5s ease, -webkit-transform .2s ease;}
.line-a, .line-c {width: 100%;-webkit-transition: all 200ms linear;-moz-transition: all 200ms linear;-o-transition: all 200ms linear;-ms-transition: all 200ms linear;transition: all 200ms linear;}
.line-c {margin-left: auto;margin-bottom: 0;}
.menu-icon:hover .line-a, .menu-icon:hover .line-c {width: 100%;}
.header-icon > a{ display: inline-block; margin-top: 41px; margin-right: 40px; transition: .3s;}
.header.scroll .header-icon > a{ display: inline-block; margin-top: 25px; width: 140px; height: 40px; border-radius: 50px; line-height: 40px; background-color: #D17028; margin-right: 40px; transition: .3s; text-align: center;}
.header-icon > div{ display: inline-block; top: 5px;}
@media (max-width: 1024px){
    .header-icon{ height: 60px;}
    .header-icon > a{ display: inline-block; margin-top: 20px; margin-right: 10px; transition: .3s;}
    .header-icon > a i{ font-size: 20px; color: #fff; transition: .3s;}
    .header.scroll .header-icon > a{ display: inline-block; margin-top: 20px; width: unset; height: unset; border-radius:unset; line-height:unset; background-color: unset; margin-right: 10px; transition: .3s; text-align: center; color: #D17028;}
    .header.scroll .header-icon > a i{ color: #D17028;}
    .header-icon > div{ display: inline-block; top: 2px;}
    .menu-icon {position: relative; z-index: 2; width: 25px; cursor: pointer;}
    .menu-icon__line {display: block; width: 25px; height: 2px; background-color: #fff; margin-bottom: 5px;-webkit-transition: background-color .5s ease, -webkit-transform .2s ease;transition: background-color .5s ease, -webkit-transform .2s ease;transition: transform .2s ease, background-color .5s ease;transition: transform .2s ease, background-color .5s ease, -webkit-transform .2s ease;}
    .header.scroll .menu-icon__line {background-color: #D17028; }
    .line-c {margin-left: 0;margin-bottom: 0;}
}
/* ==============================
    nav
============================== */
.nav {position: fixed; z-index: 98;}
.nav:before, .nav:after {content: "";position: fixed;width: 100vw;height: 100vh;background: rgba(255,248,243,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(255,248,243,1);-webkit-transition-delay: 0s;transition-delay: 0s;}
.nav:before {-webkit-transition-delay: .2s;transition-delay: .2s;}
.nav-content {position: fixed;visibility: hidden;top: 190px; width: 100%;text-align: center;}
.nav-list {position: relative; z-index: 2; display: flex; justify-content: space-between;}
.nav-item {
	position: relative;
	display: inline-block;
	-webkit-transition-delay: 0.8s;
    transition-delay: 0.8s;
	opacity: 0;
	text-align: center;
	color: #D17028;
	overflow: hidden; 
	font-size: 24px;
	font-weight: 700;
	line-height: 28px;
	-webkit-transform: translate(0%, 100%);
    transform: translate(0%, 100%);
	-webkit-transition: opacity .2s ease, -webkit-transform .3s ease;
	transition: opacity .2s ease, -webkit-transform .3s ease;
	transition: opacity .2s ease, transform .3s ease;
	transition: opacity .2s ease, transform .3s ease, -webkit-transform .3s ease;
	margin-top: 0;
	margin-bottom: 0;
}
.nav-item a { 
	position: relative;
	color: rgba(209,112,40,0.8);
	overflow: hidden; 
	padding-left: 5px;
	padding-right: 5px;
    padding-bottom: 20px;
	z-index: 2;
	display: inline-block;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear; 
    text-transform: uppercase;
}
.nav-item a:hover:after {height: 20px;opacity: 1;}
.nav-item:hover a {color: rgba(209,112,40,1);}
.nav-item.active-nav a {color: rgba(209,112,40,1);}
.nav-item.active-nav a:after {height: 20px;opacity: 1;}
.nav-list .sub-links {position: relative;padding: 0;margin: 0;margin-bottom: 20px;display: none;}
.nav-list .sub-links li {padding: 0;margin: 0 auto;text-align: center;display: block;}
.nav-list .sub-links li:first-child {margin-top: 0;}
.nav-list .sub-links li a { 
	color: #B4B4B4;
	overflow: hidden;
	font-size: 16px;
	line-height: 21px;
	padding-bottom: 10px;
	margin: 0 auto;
	text-align: center;
	max-width: 250px;
	display: 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: #222;}
.nav-list .sub-links li.active-nav a {color: #222;}
@media (max-width: 1024px){
    .nav-content .wrap1600{ padding: 0;}
    .nav-list{ flex-direction: column; align-items: flex-start;}
    .nav-item { width: 100%; text-align: left; font-size: 0; line-height: 0;}
    .nav-content {position: fixed;visibility: hidden;top: 120px; width: 100%;text-align: center;}
    .nav-item a {  
        padding-left: 20px;
        padding-top: 11px;
        padding-right: 20px;
        padding-bottom: 20px;
        font-size: 16px; line-height: 18px;
    }
    .nav-item.active-nav a{
        background-color: #D17028;
        border-radius: 0 50px 50px 0;
        color: #fff;
    }
    .nav-list .sub-links{ padding-top: 29px; padding-bottom: 20px; background-color: #D17028; position: relative; margin-top: -29px;}
    .nav-list .sub-links li a { 
        color: #FFE8D9;
        overflow: hidden;
        font-size: 14px;
        line-height: 20px;
        padding-bottom: 10px;
        padding-top: 0;
        max-width: 100%;
        text-align: left; 
        border-radius: 0;
    }
    .nav-list .sub-links li a:hover {color: #fff;}
}
/* ==============================
    nav-active
============================== */
body.nav-active .nav-content {visibility: visible;}
body.nav-active .header{ background: rgba(255,248,243,1); border-bottom: unset;}
body.nav-active .menu-icon__line {
	background-color: #D17028;
	-webkit-transform: translate(0px, 0px) rotate(-45deg);
    transform: translate(0px, 0px) rotate(-45deg);
}
body.nav-active .line-a {
	width: 15px;
	-webkit-transform: translate(2px, 4px) rotate(45deg);
    transform: translate(2px, 4px) rotate(45deg);
}
body.nav-active .line-c {
	width: 15px;
	float: right;
	-webkit-transform: translate(-3px, -3.5px) rotate(45deg);
    transform: translate(-3px, -3.5px) rotate(45deg);
}
body.nav-active #head-full a i{ color: #D17028;}
body.nav-active #head-full p{ color: #D17028;}
body.nav-active .header-icon > a{ display: inline-block; margin-top: 25px; width: 140px; height: 40px; border-radius: 50px; line-height: 40px; background-color: #D17028; margin-right: 40px; transition: .3s; text-align: center;}

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 .nav-item {
	opacity: 1;
	-webkit-transform: translateX(0%);
    transform: translateX(0%);
	-webkit-transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease;
	transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease;
	transition: opacity .3s ease, transform .3s ease, color .3s ease;
	transition: opacity .3s ease, transform .3s ease, color .3s ease, -webkit-transform .3s ease;
}
body.nav-active .nav-item:nth-child(0) {-webkit-transition-delay: 0.4s;transition-delay: 0.4s;}
body.nav-active .nav-item:nth-child(1) {-webkit-transition-delay: 0.5s;transition-delay: 0.5s;}
body.nav-active .nav-item:nth-child(2) {-webkit-transition-delay: 0.6s;transition-delay: 0.6s;}
body.nav-active .nav-item:nth-child(3) {-webkit-transition-delay: 0.7s;transition-delay: 0.7s;}
body.nav-active .nav-item:nth-child(4) {-webkit-transition-delay: 0.8s;transition-delay: 0.8s;}
body.nav-active .nav-item:nth-child(5) {-webkit-transition-delay: 0.9s;transition-delay: 0.9s;}
body.nav-active .nav-item:nth-child(6) {-webkit-transition-delay: 1.0s;transition-delay: 1.0s;}
body.nav-active .nav-item:nth-child(7) {-webkit-transition-delay: 1.1s;transition-delay: 1.1s;}
body.nav-active .nav-item:nth-child(8) {-webkit-transition-delay: 1.2s;transition-delay: 1.2s;}
body.nav-active .nav-item:nth-child(9) {-webkit-transition-delay: 1.3s;transition-delay: 1.3s;}
body.nav-active .nav-item:nth-child(10) {-webkit-transition-delay: 1.4s;transition-delay: 1.4s;}
@media (max-width: 1024px){
    body.nav-active .line-c {
        width: 15px;
        float: right;
        position: relative; 
        left: 1px;
        -webkit-transform: translate(-3px, -3.5px) rotate(45deg);
        transform: translate(-3px, -3.5px) rotate(45deg);
    }
    body.nav-active .header-icon > a{display: inline-block; opacity: 0; pointer-events: none; margin-top: 20px; width: unset; height: unset; border-radius:unset; line-height:unset; background-color: unset; margin-right: 10px; transition: .3s; text-align: center; color: #D17028;}
    body.nav-active .header-icon > a i{ color: #D17028;}
}


/* footer */
footer{width: 100%; text-align: left; overflow: hidden; background-color: #D17028; padding: 40px 0 30px;}
footer .f-top{overflow: hidden; border-bottom: 1px solid #fff; padding-bottom: 30px; margin-bottom: 40px; position: relative;}
footer .f-top .logo{ position: absolute; top: 0; right: 0;}
footer .f-top ul{ padding-bottom: 40px;}
footer .f-top ul li{ display: inline-block; position: relative; padding-right: 16px; padding-left: 16px;}
footer .f-top ul li:nth-child(1){padding-left: 0;}
footer .f-top ul li img{ position: relative; top: 2px; padding-left: 10px;}
footer p.kor{ padding-bottom: 10px;}
footer p.kor span{ display: inline-block!important;}
footer p.line{ display: inline-block;}


#to-top{  display: block; position: fixed; bottom: 60px; right: 60px; z-index: 100; }
#to-top .to-top{ display: block; text-align: center; width: 64px; height: 64px;  border-radius: 50%; background-color: #fff; border: 2px solid #e93463;}
#to-top .to-top i{ font-size: 26px;line-height: 56px;}
#to-top a{opacity: 0; pointer-events: none; transition: .3s;}
#to-top a.show{ opacity: 1; pointer-events: inherit;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
    /* footer */
    footer{width: 100%; text-align: left; overflow: hidden; background-color: #D17028; padding: 40px 0 30px;}
    footer .f-top{ border-bottom: unset; padding-bottom: 0; margin-bottom: 40px; position: relative;}
    footer .f-top .logo{ position: relative;}
    footer .f-top ul{ padding-bottom: 30px; border-bottom: 1px solid #fff; margin-bottom: 40px;}
    footer .f-top ul li{ display: inline-block; position: relative; padding-right: 11px; padding-left: 11px; padding-bottom: 10px;}
    footer .f-top ul li:after{ content: '|'; position: absolute; right: 0; font-size: 10px; color: #fff; top: 1px;}
    footer .f-top ul li:nth-child(1), footer .f-top ul li:nth-child(6){padding-left: 0;}
    footer .f-top ul li:last-child:after{ content: '';}
    footer p.kor{ padding-bottom: 10px;}
    footer p.kor span{ display: none!important;}
    footer p.line{ display: block;}
    footer p.last{ padding-bottom: 40px;}
    footer .f-top ul li img{ position: relative; top: 4px; padding-left: 5px;}

    #to-top{  display: block; position: fixed; bottom: 15px; right: 15px; z-index: 100; }
    #to-top .to-top{ width: 23px; height: 23px;  border: 1px solid #e93463;}
    #to-top .to-top i{ font-size: 13px;line-height: 20px;}
    #to-top a{opacity: 0; pointer-events: none; transition: .3s;}
    #to-top a.show{ opacity: 1; pointer-events: inherit;}

}