/* header-change -> 스크롤시에 header color 변경 */
body header{position: fixed; width: 100%; top:0; left: 0;  z-index: 9000; height: 60px; background: rgba(0, 0, 0, .5); }
body header.header-change{background: #fff; border-bottom: 1px solid #eee;}
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: #000 !important;
}
.hamburger-inner{background: #fff !important}

.sticky-top{top:60px;}
@media (min-width: 992px) {
	body header{height: 100px; }
	.sticky-top{top:100px;}
}

/* 메뉴 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:visible;}

.login{color: #1A3296; font-size: 11px;}
.header-wrapper {max-width: 1600px; 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 a{font-family: gmarket-bold; line-height:1; font-size: 20px;}
#logo a span{color:#fff;}
.header-change #logo a span{color:#000;}

@media (min-width: 992px){
	#logo{left: 20px; z-index: 2; }
	#logo a{font-size: 34px;}
}
@media (min-width: 1200px) {
	#logo{left: 40px;}
	#logo a{}
	#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 li{display: inline-block; vertical-align: top; text-align: center;}
#menu > li > a {padding: 55px 0 30px 0; position: relative; font-size: 15px; font-weight: 600; color: #fff; font-family: 'Roboto'}
@media (min-width: 1200px) {
	#menu li{margin-right: 40px;}
}

/* 메뉴 마우스 오버 */
#menu > li > a span:after{width:0; content: ''; height: 1px;  background: #648DC9; position: absolute; bottom: -7px; left: 50%; -webkit-transition:all .3s; transition:all .3s; }
#menu > li > a span {position: relative}
.menu-on #menu > li > a span {color: #fff; position: relative}
.menu-on #menu > li > a span:after{background: #fff; }
.menu-on header.header-change #menu > li > a span {color: #333;}
.menu-on header.header-change #menu > li > a span:after{background: #333 !important;}
.menu-on #menu > li.active > a span:after {width: 100%; left: 0%;}
#menu a {display: block;	 -webkit-transition: all .3s; transition: all .3s;}


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


/*------------------------------------
  모바일메뉴
------------------------------------*/
.mobile-nav .login{color: #1A3296; font-size: 14px;}
.mobile-nav-bg{visibility: hidden; opacity: 0; position: fixed; width: 100%; height: 100%; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, .8); z-index: 1000; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out }
.mobile-nav-bg.on{visibility: visible; opacity: 1; }
.mobile-nav{position: fixed; opacity: .5; top: 0; border-bottom: 0; right: -280px; background: #fff; width: 280px; height:100%; overflow: auto; z-index: 1001; }
.mobile-submenu-wrapper{background: #1A3296}
.mobile-nav{padding:20px 0 0 0;}
.mobile-nav > ul > li > a{color:#1A3296; padding: 15px 25px; background: #fff; display: block; font-size: 15px; font-weight: 500; position: relative; font-family: 'gmarket-medium'}
.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:last-child a{border-bottom: none;}
.mobile-submenu-wrapper .mobile-link-2 a{color: #1A3296; font-size: 13px; margin: 0 25px 0 40px; padding:10px 0 10px 0; display: block; border-bottom: 1px solid #1A3296; 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; }
}