@charset "UTF-8";
/*S : 웹 시작*/
.header_con > .fix-layout{display:flex; align-items:center;     justify-content: space-between;}
.header_con nav{flex:1; margin:0 20px;}
.header_con .header_logo a{display:flex; align-items:center;}

/*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% / 5); 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:#212121; word-break:keep-all; font-weight:300; font-size:22px; line-height:140px; display:block; font-family:'Gmarket';}
#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: #f4c921; content: ""; opacity: 1; display: block; transition: all .3s ease;} */
#gnb > ul > li.on > a > span{color:#fff;}

/*gnb-sub-box*/
#gnb .gnb-sub-box {text-align:left; position: absolute; top: 0; left: 0; width: 100%; background:#1f335d; background-repeat: repeat; background-size: contain; z-index: 5;
padding:110px 12px 30px 12px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); display:none;}
#gnb .gnb-sub-box .fix-layout{height:auto;}
#gnb .gnb-sub-box .gnb-sub > li {display:inline-block; width:100%; vertical-align:top;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:300; font-size:16px;  color:#fff; padding:4px; display:block; width:100%; word-break:keep-all;text-align:center; font-family:'Gmarket';}
#gnb .gnb-sub-box .gnb-sub > li ul{display:none;}
/*util-menu Style*/
.header_con .util-menu{display:flex; gap:20px; align-items: center;}
.header_con .util-menu > ul{display:flex; gap:10px;}
.header_con .util-menu > ul a{font-family:'Gmarket';}
.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;}
        .header_con .header_logo a span{font-size:20px;}
        #gnb > ul > li > a span{font-size:20px;}
}
@media all and (max-width: 1200px) {
    #pc_header{padding:30px 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; left: 0; width: 100%; background-color: #fff; z-index: 9999; }
    #m_header .side{display:block; right:0; max-width:320px; width:100%; position:absolute; background:#fff; min-height:100vh; z-index: 1;}
    #m_header .bg{ width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); position:fixed; top:0; /*right:-9999px;*/ left:0;  position: fixed; z-index: 1;}
    #m_header .side .menu{position:absolute; top:0; right:-9999px;  width: 80%; background-color: #fff; max-width: 250px; z-index: 200; ;}
    #m_header .side-close{position:absolute; top:16px; right:16px;}
    
    /*모바일 메뉴 스타일*/
    #m_header .side:after{content:""; display:block; width:150px; height:100%; background:#eee; position: absolute;
        top: 0px;}
    #m-gnb{position:relative; z-index:1;}
    #m-gnb  > ul {position:relative; margin-top:50px;}
    /*모바일 메뉴 > 원뎁스*/
    #m-gnb  > ul > li{width:170px; }
    #m-gnb  > ul > li > a{font-family:'Gmarket'; padding:12px 4px 12px 22px; display:block; position:relative;}
    #m-gnb  > ul > li.on > a:after{z-index:-1; content:""; display:block; width:150px; height:100%; background:#0e2265; position:absolute; left:10px; top:0; border-radius:0 30px 30px 0;}
    #m-gnb  > ul > li > a > span{font-family:'Gmarket'; font-weight:300;}
    #m-gnb  > ul > li.on > a > span{color:#fff; }
    /*모바일 메뉴 > 서브 뎁스*/
    #m-gnb .gnb-sub-box{position:absolute; left:150px; top:0; position:absolute; padding:10px 12px 10px 20px; display: none;}
    #m-gnb .gnb-sub-box.show{display:block !important; width: calc(100% - 150px);}
    #m-gnb .gnb-sub-box .gnb-sub > li{margin-bottom:10px;}
    #m-gnb .gnb-sub-box .gnb-sub > li > a{font-family:'Gmarket'; display:block; padding:4px; font-weight:300;         word-break: keep-all;}
    #m-gnb .gnb-sub-box .gnb-sub .gnb-sub-depth{padding-left:20px; margin-top: 10px;}
    #m-gnb .gnb-sub-box .gnb-sub .gnb-sub-depth li {margin-bottom:10px;}
    #m-gnb .gnb-sub-box .gnb-sub .gnb-sub-depth li a{font-family:'Gmarket'; font-size:15px; font-weight:300; color:#929292;}
}
@media all and (max-width: 767px) {
		#pc_header{padding:20px 0;}
        .header_con .header_logo a img{width:120px}
}
@media all and (max-width: 400px) {
        .header_con .header_logo a img{width:100px;}
}