@charset "UTF-8";
/*S : 웹 시작*/
#pc_header{background:#013895; position:relative;}
.header_con > .fix-layout{max-width:1874px; display:flex; justify-content:space-between; align-items: center;}
.header_con nav{flex:1; margin:0 100px;}

.header_con > .fix-layout .header_logo {display:flex; align-items:center;}
.header_con > .fix-layout .header_logo a{display: inline-flex; align-items: center;}
.header_con > .fix-layout .header_logo .logo-text span {font-family:"Gmarket"; font-size:28px; color:#fff; margin-left:12px;}


/*GNB Menu Style*/
#gnb {float: none;  margin-left: auto; margin-right: 0; z-index:1; text-align:center;}
#gnb > ul {padding: 0; margin: 0; display:flex;}
#gnb > ul > li {width: calc(100% / 6); text-align: center;  vertical-align:middle; position:relative;}
#gnb > ul > li > a {width:100%; z-index:10; position: relative;  text-align: center; letter-spacing: -1px;}
#gnb > ul > li > a span {color:#fff; word-break:keep-all; font-weight:500; font-size:20px; line-height:100px; display:block;}
#gnb > ul > li > a:after {position:absolute; left:50%; content:""; display:block; bottom:-6px; right:0; width:0;  opacity:0.2; transform:translateX(-50%);}
#gnb > ul > li.on > a:after {bottom: 0px;left: 0; width:100%; height: 4px; background: #00fff6; content: ""; opacity: 1; display: block; transition: all .3s ease;}


/*gnb-sub-box*/
#gnb .gnb-sub-box {display:none; text-align:left; position: absolute; top: 100px; left: 0; width: 100%; background:rgba(255,255,255,1); background-repeat: repeat; background-size: contain; z-index: 5; padding:30px 24px; border-radius:0 0 24px 24px; border:1px solid #ebebeb; border-top:none;}
#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; position:relative;}
#gnb .gnb-sub-box .gnb-sub > li:hover > a {text-decoration:underline;}
#gnb .gnb-sub-box .gnb-sub > li > a {font-weight:500; font-size:17px;  vertical-align:middle;color:#363636; padding:8px 0; margin-right: 2px; display:block; width:100%; word-break:keep-all;}
#gnb .gnb-sub-box .gnb-sub > li ul li a {font-weight: 300; font-size:15px; padding-left:12px; position:relative; line-height:1.3; display:block; padding-bottom:4px; padding-top:4px; color:#555;}
#gnb .gnb-sub-box .gnb-sub > li ul li a:after {content:""; display:block; width:3px; height:3px; border-radius:12px; background-color:#121212; bottom:13px; left:0; position:absolute;}
/*util-menu Style*/
.header_con .util-menu{display:flex; gap:30px}
.header_con .util-menu .m-open{display:none;}

/*Mobile-memnu Style*/
#m_header{display:none; right:-9999px;}
#m_gnb {display: none;}
/*E : 웹 끝*/

/***********
반응형시작
***********/
@media all and (max-width:1400px){
		.header_con nav{margin:0 20px;}
}
@media all and (max-width: 1200px) {
	#pc_header{padding:10px 0;}	
	.header_con nav{display:none;}
	.header_con .util-menu .m-open{display:block;}
	.header_con .util-menu .siteMap {display:none;}
		
	#m_header{position:absolute; top: 0;  width: 90%; background-color: #013895; z-index: 9999; height:100vh; max-width:500px; display:block;}
    #m_header .menu{padding-top:100px;} 
    
	#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 {height:50px; line-height:50px; display:block; transition:all 0.3s; color:#fff; padding:0 24px; text-align:left;}
	#m-gnb > ul > li .th1 > span {font-family:'Gmarket'; font-size:22px; color: #fff; font-weight:300;}
	#m-gnb > ul > li.on .th1 > span {text-decoration:underline;}
	#m-gnb > ul > li .th2{display: block; height:50px; line-height:50px; width: 100%; background-color:#eee; font-size:15px; padding:0 24px; text-align:left;}
	#m-gnb > ul > li .th2 > span, #m-gnb > ul > li .th2 > a{color: #333; font-family:'Gmarket'; font-size:20px; font-weight:300;}
}
	
.hd-search-box{position:absolute; top:100%; left:50%; transform:translateX(-50%); z-index:1; width:100%; background-color:#f4f7fa; height:190px; display:none;}
.hd-search-box.open{display:block;}
.hd-search-box form{    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;}
    .hd-search-box fieldset{
        display: block;
    height: 80px;
    max-width: 800px;
    width: 100%;
    position: relative; border:none;}
    .hd-search-box #searchText{
        display: block;
    width: 100%;
    height: 100%;
    padding: 0 45px 0 34px;
    margin: 0;
    float: none;
    line-height: 1.3;
    font-size: 20px;
    color: #101010;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #ededed;
    }
.hd-search-box input[type="submit"]{    
    position: absolute;
    right: 35px;
    top: 50%;
    transform: translateY(-50%);
    background-image:url(/resources/custom/images/news/common/ico-search-btn.png);
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 0;
    background-color: rgba(0, 0, 0, 0);
    margin: 0;
    padding: 0;
    transition: all .3s;
    background-size: cover;
}
.hd-search-box .search-close{position: absolute;
    left: calc(50% + 494px);
    top: 50%;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center;
    background-size:40px 40px;
    background-image:url(/resources/custom/images/news/common/ico-search-close.png);
    background-color: rgba(0, 0, 0, 0);
    border: none;
    padding: 0;
    font-size: 0;
    margin-top: -20px;
    transition: all .3s;
    background-size: 24px auto;
    }
    
    @media all and (max-width:1200px){
     .hd-search-box form{justify-content: left; padding-left:12px;}
    .hd-search-box fieldset{    width: calc(100% - 95px); max-width:unset;}
    .hd-search-box .search-close{right:30px; left:auto;}
    }
    @media all and (max-width:500px){
    .hd-search-box form{padding: 0 12px;}
    .hd-search-box #searchText{padding: 0 10px 0 10px;}
    .hd-search-box fieldset{width: 100%;}
    .hd-search-box .search-close{right:10px; top:30px;}
    .hd-search-box input[type="submit"]{right:10px;}
	
	.header_con > .fix-layout .header_logo img{width:120px;}
	.header_con > .fix-layout .header_logo a{font-size:20px; margin-left: 4px;}
	.header_con > .fix-layout .header_logo .logo-text span {font-size:20px; margin-left: 4px;}

    }
	
	#m_header .side-close{position:absolute; right:20px; top:30px;}