/* header-change -> 스크롤시에 header color 변경 */
body header{position: fixed; width: 100%; top:0; left: 0;  z-index: 1002; height: 60px; border-bottom: 1px solid rgba(244, 201, 1183, .2); background: rgba(0, 0, 0); }
/*body header.header-change{background: rgba(0, 0, 0, .6); border-bottom: 1px solid #eaeaea}*/
body header.header-change #menu > li > a {color: #333;}
.header-change .hamburger-inner, .header-change.hamburger-inner:after, .header-change.hamburger-inner:before {
	background-color: #fff;
}
.hamburger-inner{background: #fff !important}

body.menu-on header{position: fixed; width: 100%; top:0; left: 0; z-index: 9999; height: 80px; background: rgba(0, 0, 0, .9); }
/*body.menu-on header{position: fixed; width: 100%; top:0; left: 0; border-bottom: 1px solid #eaeaea; z-index: 9999; height: 80px; background: rgba(0, 0, 0, .9); }*/
.sticky-top{top:60px;}
@media (min-width: 992px) {
	.sticky-top{top:100px;}
}

@media (min-width: 1200px) {
	body header{height: 80px; }
}

/* 메뉴 hover 시에 body 흐리게 */
#menu-overlay {opacity: 0; visibility: hidden; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: #000; background: rgba(0, 0, 0, .6); z-index: 499; -webkit-transition: opacity .1s,visibility .3s; transition: opacity .3s,visibility .3s; }
body.menu-on #menu-overlay {opacity:1;visibility:hidden;}

.login{color: #003398; font-size: 11px;}
.header-wrapper {max-width: 1560px; height: 100%; margin: 0 auto; position: relative; }
#logo{height: auto; position: absolute; left: 20px; z-index: 2; -webkit-transition: all .3s; transition: all .3s;}
#logo img{width: 170px; height: auto; }
#sns-wrapper{height: auto; position: absolute; right: 20px; top: 55px; z-index: 2; -webkit-transition: all .3s; transition: all .3s;}

@media (min-width: 992px){
	#logo{left: 20px; z-index: 2; }
}
@media (min-width: 1200px) {
	#logo{left: 40px;}
	#logo img{width: 320px; height: auto; }
	#sns-wrapper{right: 40px;}
}

.menu-container {display: block; width: 100%; position: relative;  line-height: 1; z-index: 1;}
#menu {vertical-align: top; position: relative; z-index: 500; text-align: right; }
/*#menu {vertical-align: top; position: relative; z-index: 500; text-align: right; padding-right: 250px;}*/
#menu li{display: inline-block; vertical-align: top; text-align: center;}
#menu > li > a {padding: 47px 0 15px 0; position: relative; font-size: 17px; font-weight: 500; color: #fff; font-family: 'acumin-pro',  'Noto Sans KR', Roboto, 나눔고딕}
@media (min-width: 1200px) {
	#menu li{margin-right: 45px;}
	#menu li.long{width:150px;}
}

/* 메뉴 마우스 오버 */
#menu > li > a span {color: #fff; position: relative}
#menu > li > a span:before{width:6px; height:6px; content: '';  background: #02CE7F; position: absolute; bottom: 10px; left: calc(50% - 3px); -webkit-transition:all .3s; transition:all .3s; border-radius: 5px; opacity: 0}
#menu > li.active > a span:before {bottom: 25px; opacity: 1}

/*#menu > li > a span:after{width:0; content: ''; height: 1px;  background: #003398; position: absolute; bottom: -7px; left: 50%; -webkit-transition:all .3s; transition:all .3s; }*/
/*.menu-on #menu > li.active > a span:after {width: 100%; left: 0%;}*/
/*#menu > li > a.active span:after {width: 100%; left: 0%;}*/

#menu a {display: block;	 -webkit-transition: all .3s; transition: all .3s;}

/* 서브메뉴 */
.sub-menu-wrapper{background: transparent; height: 0; z-index: 1; width: 100%; overflow: hidden; opacity: 0;  visibility: hidden; text-align: right; padding-right: 250px;}
.sub-menu-wrapper ul li{width:100px; margin-right: 0 !important;  padding-top: 30px;  }
.sub-menu-li.active .sub-menu-link a span {color:#fff; font-family: 'gmarket-light'; letter-spacing: 0}
.sub-menu-wrapper .sub-menu-link {margin-bottom: 15px; text-align: center; min-height: 30px}
.sub-menu-wrapper .sub-menu-link a span{font-size: 12px; color: #fff; position: relative; -webkit-transition:all .3s; transition:all .3s; letter-spacing: 0; font-family: 'gmarket-light';}
.sub-menu-wrapper .sub-menu-link a span:after{width:0; content: ''; height: 1px;  background: #fff; position: absolute; bottom: -7px; left: 0; -webkit-transition:all .3s; transition:all .3s; }
.sub-menu-wrapper .sub-menu-link a:hover span{color: #fff; text-decoration: none;  }
.sub-menu-wrapper .sub-menu-link a:hover span:after{width:0; left:0%;}
@media (min-width: 1200px) {
	.sub-menu-wrapper ul li{width:100px;}
	.sub-menu-wrapper ul li.long{width:150px;}
	.sub-menu-wrapper .sub-menu-link a span{font-size: 12px;}
}

.hidden-menu-bg{ position: fixed; top: 100px; left: 0; right: 0; bottom: 0; opacity: 1;}



/*------------------------------------
  모바일메뉴
------------------------------------*/
.mobile-nav .login{color: #fff; font-size: 14px;}
.mobile-submenu-wrapper{background: #000}
.mobile-nav{padding:20px 0 0 0;}
#mobile-nav > ul > li > a{color:#fff; padding: 15px 25px 0 25px; background: #000; display: block; font-size: 25px; font-weight: 800; position: relative; font-family: 'alverata'}
#mobile-nav > ul > li span a{color:#fff; padding: 15px 0 0 0; background: #000; display: inline-block; font-size: 25px; font-weight: 800; position: relative; font-family: 'alverata'}
#mobile-nav > ul > li span.active{color:#fff; padding: 15px 0 0 0; background: #000; display: inline-block; font-size: 25px; font-weight: 800; position: relative; font-family: 'alverata'}
#mobile-nav > ul > li span.active:before{content:''; background: #56CECE; position: absolute; width:100%; height:5px; bottom:0;}
#mobile-nav > ul > li > a span:after{content: "\f107"; font: normal normal normal 16px/1 FontAwesome; position: absolute; top:21px; right: 25px; transition: .3s transform ease-in-out;}
#mobile-nav > ul > li > a[aria-expanded='true'] span:after{-webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg);} /* 모바일 collpase 메뉴 화살표 변경*/
.mobile-submenu-wrapper .mobile-link a{color: #fff; font-size: 14px; margin: 0 25px; padding:20px 0 20px 0; display: block; border-bottom: 1px solid #fff; font-family: 'gmarket-medium'}
.mobile-submenu-wrapper .mobile-link a{color: #fff; font-size: 14px; margin: 0 25px; padding:20px 0 20px 0; display: block; border-bottom: 1px solid #fff; font-family: 'gmarket-medium'}
.mobile-submenu-wrapper .mobile-link:last-child a{border-bottom: none;}
.mobile-submenu-wrapper .mobile-link-2 a{color: #000; font-size: 13px; margin: 0 25px 0 40px; padding:10px 0 10px 0; display: block; border-bottom: 1px solid #000; font-family: 'gmarket-medium'}
.mobile-submenu-wrapper .mobile-link-2:last-child a{border-bottom: none;}
.close-menu{text-align:right; padding-right: 20px; padding-bottom: 10px;  }
.close-menu i {cursor: pointer;}
.close-menu i:hover{transform: rotate( 270deg );}


.btn-login{background: #101C54; padding-left: 25px; padding-right: 25px; border-radius: 15px; padding-top: 2px; padding-bottom: 3px}

.navbar-toggler{top: 20px; }
@media (min-width: 992px) {
	/*.navbar-toggler{top: 30px; }*/
}


/*메뉴 overflow 스크롤 기능*/
.scroll {
	white-space: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: -ms-autohiding-scrollbar;
}
.scroll::-webkit-scrollbar {display: none; }

.sticky-top{top:60px; z-index: 10;}
@media (min-width: 992px) {
	.sticky-top{top:100px;}
}



/*------------------------------------
  플로팅 메뉴
------------------------------------*/
.mfp-zoom-out-cur .float-menu-wrapper{display: none; z-index: 9999}
/*.float-menu-wrapper .menu-box{border: 1px solid #003C6F; width:95px; line-height: 1.3; }*/
.float-menu-wrapper{position: relative; }
.float-menu-wrapper img{max-width: 122px}
.float-menu{text-align: right; right:10px; position: absolute; z-index: 3000; top:60px;}
@media (min-width: 768px) {
	.float-menu-wrapper{position: relative; margin:0 auto; text-align: center;}
	.float-menu{right:10px; position: absolute; z-index: 3000; top:90px;}
}
@media (min-width: 992px) {
	/*.float-menu-wrapper{ width:992px; }*/
	.float-menu{right:40px; }
}
@media (min-width: 1200px) {
	/*.float-menu-wrapper{width: 1200px;}*/
	.float-menu{right:40px; }
}


#mobile-nav{
	width: 100%;
	position: fixed;
	top: 10px;
	right:-100%; 
	list-style: none;
	z-index:3;
}

#mobile-nav ul li {
	position: relative;
	/*left: 100%;*/
	will-change: transform;
}

.mobile-nav-bg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: -100%;
  background-color: #000;
  will-change: transform;
}

/* 언어선택 */
.lang{font-family: acumin-pro; position: absolute; left: 270px; bottom: 25px; font-size: 12px; z-index: 1000; font-weight: 800}
.lang span{position: relative; padding-bottom: 2px; color: #003398; color: #8B8B8B; -webkit-transition:all .3s; transition:all .3s}
.lang span:after{content: ''; width:0; height:3px; background: #56CECE; position: absolute; bottom: -3px; left: 0; -webkit-transition:all .3s; transition:all .3s}
.lang .active span{color: #003398}
.lang .active span:after{width: 100%;}
.lang a:hover span{color: #003398}
.lang a:hover span:after{width: 100%;}


.mob-lang{padding:40px 0 0 25px;}
.mob-lang div{font-family: gmarket-medium;}
.mob-lang{font-family: gmarket-medium;  font-size: 15px; }
.mob-lang span{position: relative; padding-bottom: 2px; color: #003398; color: #8B8B8B; -webkit-transition:all .3s; transition:all .3s}
.mob-lang span:after{content: ''; width:0; height: 2px; background: #003398; position: absolute; bottom: 0; left: 0; -webkit-transition:all .3s; transition:all .3s}
.mob-lang .active span{color: #003398}
.mob-lang .active span:after{width: 100%;}
.mob-lang a:hover span{color: #003398}
.mob-lang a:hover span:after{width: 100%;}