/* header-change -> 스크롤시에 header color 변경 */
body header{position: fixed; width: 100%; top:0; left: 0;  z-index: 1000; height: 60px; background: #fff; }
/*body header{position: fixed; width: 100%; top:0; left: 0;  z-index: 1000; height: 60px; border-bottom: 1px solid rgba(244, 201, 1183, .2); background: transparent; }*/
body header.header-change{background: #fff; 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: 91px; background: #fff; }
.sticky-top{top:60px;}
@media (min-width: 992px) {
	body header{height: 91px; }
	.sticky-top{top:90px;}
}

/* 메뉴 hover 시에 body 흐리게 */
#bg-overlay {opacity: 0; visibility:hidden; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, .6); z-index: 1000; -webkit-transition: opacity .1s,visibility .2s; transition: opacity .2s,visibility .2s; width: 100%; height: 100%;}
body.menu-on #bg-overlay {opacity:1; visibility:visible;}

.login{color: #1A3296; font-size: 11px;}
.header-wrapper {max-width: 1600px; height: 100%; margin: 0 auto; position: relative; }
#logo{margin-right: 20px;}
/*#logo{height: auto; position: absolute; left: 20px; z-index: 2; -webkit-transition: all .3s; transition: all .3s;}
#logo img{width: 100px; 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: 190px; 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; }
#menu li{display: inline-block; vertical-align: top; text-align: center; margin-right: 20px; }
#menu li > a {padding: 0 0 0 0; position: relative; font-size: 13px; font-weight: 600; color: #001F6D; }
@media (min-width: 1200px) {
}

/* 메뉴 마우스 오버 */
#menu >ul > li > a span {color: #001F6D; position: relative; -webkit-transition:all .3s; transition:all .3s; }
#menu >ul > li > a span:after{width:0; content: ''; height: 1px;  background: #001F6D; position: absolute; bottom: -7px; left: 50%; -webkit-transition:all .3s; transition:all .3s; }
#menu >ul > li.active > a span {color: #001F6D !important;}
#menu >ul > li.active > a span:after {width: 100%; left: 0%;}
#menu >ul > li > a.active span {color: #001F6D !important;}
#menu >ul > 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; }
.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: #333; 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: #001F6D}
.mobile-nav{padding:20px 0 0 0;}
.mobile-nav > ul > li > a{color:#333; padding: 12px 25px; background: #fff; display: block; font-size: 16px; font-weight: 600; position: relative;}
.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:15px 0 15px 0; display: block; border-bottom: 1px solid #fff;}
.mobile-submenu-wrapper .mobile-link:last-child a{border-bottom: none;}
.mobile-submenu-wrapper .mobile-link-2 a{color: #333; font-size: 13px; margin: 0 25px 0 40px; padding:10px 0 10px 0; display: block; border-bottom: 1px solid #333;}
.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: 10px; }


/*------------------------------------
  Crumb
------------------------------------*/
.crumb-wrapper{
	opacity: 1;
	background: #fff;
	border-bottom: 1px solid #ebebeb;
	margin-bottom: 40px;
}

.menu-on .crumb-wrapper{
	/*visibility: hidden;*/
	/*opacity: 0;*/
}

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

.scroll::-webkit-scrollbar {display: none; }

.crumb{position: relative;  width: 100% !important;}
.crumb .item {display: inline-block; position: relative;}
.crumb .item a{padding-top: 10px; padding-bottom: 10px; padding-right: 20px; padding-left: 20px; font-size: 12px; display: inline-block; -webkit-transition:all .3s; transition:all .3s}
.crumb .item a span{color: #A2A2A2; font-family: gmarket-medium; -webkit-transition:all .3s; transition:all .3s; position: relative;}
.crumb .item:after{content: ""; width: 0; height: 2px; background: #1A3296; position: absolute; bottom: 0; left:50%; -webkit-transition:all .3s; transition:all .3s}
.crumb .item.active:after{width:100%; left:0;}
.crumb .item:hover:after{width:100%; left:0;}

/*.crumb .item:hover {border-bottom: 2px solid #1A3296;}*/
.crumb .item:hover a span{color: #1A3296; }
.crumb .item.active a span{color: #1A3296; }

/*.crumb .item.active{border-bottom: 2px solid #1A3296;}*/

@media (min-width: 768px) {
	.crumb-wrapper{margin-bottom: 60px;}

	.crumb .item a{padding-top: 12px; padding-bottom: 12px; font-size: 14px; display: block}
	/*.crumb .item a{padding-top: 12px; padding-bottom: 12px; font-size: 14px; display: block}*/
	.crumb {display: inline-block !important}
}


/*------------------------------------
  플로팅 메뉴
------------------------------------*/
.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; }
}