@charset "UTF-8";


/*header-bottom*/
.header_bottom .gnb-sub-box .fix-layout{padding:0;}
.header_bottom h1 a{display:flex; align-items:center;}
.header_bottom h1 span{font-family:'Gmarket'; font-size:30px; color:#333333; margin-left:14px; font-weight:300;}
.header_bottom .header_logo {display:flex; align-items:center;}
.header_bottom .header_logo a{display: inline-flex; align-items: center;}
.header_bottom .header_logo .logo-text span {font-family: 'Gmarket'; color: #333333;  font-size: 30px; margin-left: 14px; font-weight:300;}
.header_bottom > .fix-layout{display:flex; align-items:center; justify-content:space-between; }
.header_bottom nav{flex:1;}
.header_bottom .m-open, .header_bottom .siteMap a, .header_bottom .login-btn{display:block; width:68px; height:68px; border-radius:50%; text-indent:-9999px;}
.header_bottom .login-btn{background: url(/resources/custom/images/guidance/common/ico-login.png) #2966b0 no-repeat center;}
.header_bottom .m-open, .header_bottom .siteMap a{background: url(/resources/custom/images/guidance/common/menu.png) #17964a no-repeat center;}
.header_bottom .m-open{display:none;}
header .util-menu{display:flex; align-items:center; justify-content:center; gap:10px;}
header .util-menu ul{display:flex; align-items:center; justify-content:center; gap:4px;}
header .util-menu ul li a{color:#222; }

/*GNB Menu Style*/
#gnb {float: none;  margin-left: auto; margin-right: 0; z-index:1; text-align:center;}
#gnb > ul {padding: 0; margin: 0;}
#gnb > ul:after{content: ""; display: block; clear: both;}
#gnb ul ul {display: block; }
#gnb > ul > li {width: calc(100% / 6); text-align: center; float: left; vertical-align:middle; position:relative;}
#gnb > ul > li > a {font-family:'Gmarket';  z-index:10; position: relative; font-size: 20px; text-align: center; line-height:140px; display: inline-block; color: #333333; font-weight: 300; letter-spacing: -1px; width:100%}
#gnb > ul > li > a span {color:#333; word-break:keep-all; font-weight:300; font-size:20px; font-family:'Gmarket';}
#gnb > ul > li > a:after {position:absolute; left:50%; content:""; display:block; bottom:0; right:0; width:0;  opacity:0.2;}
/*#gnb > ul > li.on > a:after {bottom: 0px;left: 0; width:100%; height: 4px; background: #2476dd; content: ""; opacity: 1; display: block; transition: all .3s ease;}*/
#gnb > ul > li.on > a:before {content:""; display:block; background-color:#121212; left:0; bottom:0; position:absolute;}˙
#gnb > ul > li.on > a span, #gnb > ul > li > a:hover span {color:#004baa;}
#gnb .open.has-sub-menu:after {content: "";}

/*gnb-sub-box 메뉴열기*/
#gnb .gnb-sub-box {box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); display:none; text-align:left; position: absolute; top: 94px; left: 0; width: 100%; background:#1c6796; background-repeat: repeat; background-size: contain; z-index: 5; padding:24px 12px; border-radius:32px 0 32px 0;}
#gnb .gnb-sub-box .fix-layout{height:auto;}
#gnb .gnb-sub-box .gnb-sub > li {display:inline-block; width:100%; vertical-align:top; max-width: 1071px; text-align: left; margin-bottom:4px; text-align:center;}
#gnb .gnb-sub-box .gnb-sub > li:hover > a {text-decoration:underline;}
#gnb .gnb-sub-box .gnb-sub > li > a {font-weight:300; font-size:16px;  vertical-align:middle; color:#fff; padding:8px 0; margin-right: 2px; display:block; width:100%; font-family:'Gmarket';}
#gnb .gnb-sub-box .gnb-sub > li ul li a {font-weight: 300; font-size:15px; padding-left:12px; position:relative; line-height:30px; display:none;}
#gnb .gnb-sub-box .gnb-sub > li ul li a:after {content:""; display:block; width:3px; height:3px; border-radius:12px; background-color:#121212; top:10px; left:0; position:absolute;}


/*Mobile-memnu Style*/
#m_gnb {display: none;}
#m_header.is-active {display: block;}
#m_header {display: none; transition: all .5s;}
#m_header .side {left: 0; display: none; z-index: 101; position: relative;}
#m_header .side .top-utill {display: none;}


/*E : 웹 끝*/

/***********
반응형시작
***********/
@media all and (max-width: 1600px) {
	#gnb .gnb-sub-box{padding:22px 20px;}
}
@media all and (max-width: 1400px) {
	.header_bottom h1 a img{width:200px;}
.header_bottom h1 span{font-size:24px;}
	.header_bottom .m-open, .header_bottom .siteMap a, .header_bottom .login-btn{width:50px; height:50px; background-size:24px auto;}
#gnb .gnb-sub-box .gnb-sub > li > a{font-size:16px; word-break:keep-all;}
#gnb > ul > li > a{line-height:100px;}
#gnb .gnb-sub-box .gnb-sub > li > a{font-size:14px;}
}
@media all and (max-width: 1200px) {
	#pc_header{position: relative; top: 0;}
	.header_bottom{padding:20px 0}
	.header_bottom .m-open{display:block;}
	.header_bottom .siteMap{display:none;}
		
	#m_header{position:absolute; top: 0; left: 0; width: 100%; background-color: #fff; z-index: 9999; overflow:hidden scroll; width:100%; height:100vh; padding-bottom:50px;}
	#m_header .side{display:block; top:50px;}
	#m_header .side .bg{ width: 100%; height: 100%; background-color:#023f8f; position:fixed; top:0; /*right:-9999px;*/ left:0;  position: fixed; z-index: 101;}
	#m_header .side .menu{position:relative;; top:0; width:100%;  width:100%; padding:0 24px; z-index: 200; ;}
	#m_header .side .menu .top-utill {padding: 0 24px;}
	#m_header .side .menu .top-utill ul li { float:left; width:33%;}
	#m_header .side .menu .bottom-utill {border-top: 1px solid #666666; border-bottom: 1px solid #666666; margin-bottom: 16px;}
	#m_header .side .menu .bottom-utill ul li a{display: block; width: 100%; padding: 12px 0 12px 20px; font-size: 16px; color:#ccc; background: url(/resources/custom/images/hrc/common/arrow.gif) no-repeat 95% center; line-height:30px;}
	#m_header .side .side-close{ position: absolute; top: -50px; right: 0;}
	#m_header .side .side-close a{font-size: 22px; width: 50px; height: 50px; position: absolute; right: 0; top: 0; color: #f5f5f5; line-height: 50px; text-align: center; background: url(/resources/custom/images/hrc/common/close.png) no-repeat center;}
   
    #m_header .utill{margin-top:24px; padding-bottom:50px;}
    #m_header .utill li{display:inline-block;}
    #m_header .utill a{font-size:18px; font-weight:600; text-decoration:underline; color:#333;}
    
	#tnb,
	#gnb {display: none; width: 320px;}
	
	#m-gnb{position:relative; z-index:102; text-align:center;}
	#m-gnb .gnb-sub-title{display: none;}
	#m-gnb .gnb-title-sub{display: none;}
	#m-gnb > ul > ul> li .gnb-sub-box{ display: none; border-bottom: 1px solid  #ddd;}
	#m-gnb > ul > li .gnb-sub-box .gnb-left-box{display:none;}
	#m-gnb .fix-layout{height:auto; padding:0;}
	#m-gnb > ul > li > .gnb-sub-box{display:none;}
	
	#m-gnb > ul > li .th1 {display:block; border-bottom: 1px solid  #ddd;transition:all 0.3s; color:#fff; padding:24px 12px; text-align:left; background: url(/resources/custom/images/hrc/common/mobile_more.png) no-repeat right center;}
	#m-gnb > ul > li .th1 > span {font-size: 22px; color: #fff; font-weight:bold;}
	/*#m-gnb > ul > li.on .th1 > span {color: #ed1c24;}*/
	#m-gnb > ul > li .th2{ color:#313131;/*color: #fff;*/ display: block; height:50px; line-height:50px; width: 100%; background-color:#fff; font-size:16px; padding:0 16px; text-align:left;}
	#m-gnb > ul > li .th2 > span, #m-gnb > ul > li .th2 > a{color: #313131;}
	#m-gnb .gnb-sub-depth{padding:0 12px;}
	#m-gnb > ul > li .th2 > span, #m-gnb > ul > li .th3 > a{color:#fff; text-align:left; padding-left:20px; position:relative; width:100%; display:block;}
	#m-gnb > ul > li .th2 > span, #m-gnb > ul > li .th3 > a:after{content:""; display:block; width:3px; height:3px; border-radius:32px; background:#fff; position:absolute; top:15px; left:0;}
	
	#m-gnb .gnb-sub-box .m1{display: none;}
	.header_con .login-menu{display: none;}
	
	.header_con{padding:12px 20px;}
	.header_con h1{margin-top:0;}
	.header_con h1 a img{width:unset;}
	.header_con .util-menu{margin-top:9px; }
	.header_con .util-menu .m-open{display:inline-block; text-align:center;}
	.header_con .util-menu .siteMap{display: none;}
	#m-gnb .gnb-sub-depth a{width:100%; line-height:40px;}
 }
@media all and (max-width: 767px){
	.header_bottom h1 span{font-size:18px;}
	.header_bottom h1 a img{width:150px;}
	.header_bottom .m-open, .header_bottom .siteMap a, .header_bottom .login-btn{width:40px; height:40px; background-size:20px auto;}
	.header_bottom h1 a img{width:120px;}
	.header_bottom h1 span{margin-left:4px; font-size:18px;}
	.header_bottom .header_logo .logo-text span {font-size:18px;}
}
@media all and (max-width: 350px){
	.header_bottom h1 a img{width:100px;}
	.header_bottom h1 span{margin-left:4px; font-size:16px;}
	.header_bottom .header_logo .logo-text span {margin-left:4px; font-size:16px;}
}