@charset "UTF-8";

/*S : 웹 시작*/
#pc_header{margin-bottom:58px;}
/*header-bottom*/
.header_con{position: relative; top: 0; z-index: 2; width: 100%; margin: 0 auto; border-bottom:1px solid #C50D17;}
.header_con > .fix-layout{display:flex; align-items:center;}
.header_con h1 a {display:flex;  align-items:center; gap:8px; align-items: baseline;}
.header_con h1 span{font-family:'SongMyung'; font-size:30px; font-weight:300;}
.header_con .header_logo {display:flex; align-items:center;}
.header_con .header_logo a{display: inline-flex; align-items: center; gap:8px;}
.header_con .header_logo .logo-text span {font-family:'SongMyung'; font-size:30px; font-weight:300;}
.header_con nav{flex:1; max-width:700px; margin-left:auto; margin-right:30px;}
.header_con .top_wrap {position: relative; width: 100%; max-width: 1200px; margin: 0 auto; z-index: 99999;}


/*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 ul {display: block; }
#gnb > ul > li {width: calc(100% / 3); text-align: center; display:inline-block; vertical-align:middle; position:relative;}
#gnb > ul > li > a {width:100%; z-index:10; position: relative; font-size: 18px; text-align: center; line-height:70px; display: inline-block; color: #666; font-weight: 500; letter-spacing: -1px; padding-bottom:1px;}
#gnb > ul > li > a span {color:#222; word-break:keep-all; font-weight:500; font-size:18px; line-height:110px;}
#gnb > ul > li > a:after {position:absolute; left:50%; content:""; display:block; bottom:-16px; width:0;  opacity:0.2; transform:translateY(-50%);}
#gnb > ul > li.on > a:after {left: 50%; width:1px; height: 35px; background: #C50D17; content: ""; opacity: 1; display: block; transition: all .3s ease;}
#gnb > ul > li.on > a, #gnb li a:hover {color: #fc9b5c;}
#gnb .open.has-sub-menu:after {content: "";}

/*gnb-sub-box*/
#gnb .gnb-sub-box {display:none; text-align:left;  position: absolute; top: 111px; left: 0; width: 100vw; padding:16px 0; background-repeat: repeat; background-size: contain; z-index: 5; transform:translateX(-35.7%); }
#gnb .gnb-sub-box .gnb-sub {max-width:770px; margin-left:auto; }
#gnb .gnb-sub-box .gnb-sub > li {display:inline-block; width:auto; vertical-align:top;  text-align: left; margin-right:40px;}
#gnb .gnb-sub-box .gnb-sub > li > a {font-size:15px;  vertical-align:middle; color:#000; padding:4px; margin-right: 2px; display:inline-block; position:relative;}
#gnb .gnb-sub-box .gnb-sub > li > a:after{content:""; display:block; width:0; height:6px; background:#FFE0E1; z-index:-1; position:absolute; bottom:3px; left:50%; transition:all .3s;}
#gnb .gnb-sub-box .gnb-sub > li > a:hover:after{left:0; width:100%;}
#gnb .gnb-sub-box .gnb-sub > li ul li a {font-weight: 300; font-family: 'Gmarket'; font-size:15px; padding-left:12px; position:relative; line-height:30px;}
#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;}
#gnb .gnb-sub-box .gnb-sub .depth3 {display: inline-block;  vertical-align: middle; width: calc(100% - 185px - 6px); }
#gnb .gnb-sub-box .gnb-sub .depth3  li {display: inline-block; margin-right: 8px; }
#gnb .gnb-sub-box .gnb-sub .depth3  li a {font-family: 'Gmarket'; padding: 8px; color: #666; background: url(/resources/custom/images/main/common/sub-menu-dep3.png) no-repeat 2px center;}
#gnb .gnb-sub-box .gnb-sub .gnb-sub-depth {padding-left:20px; margin-top:10px; margin-bottom:20px;}
.gnb-sub-box  .fix-layout {max-width:1200px}

/*util-menu Style*/
.header_con .util-menu{display:flex; gap:12px; align-items: center;}
.header_con .util-menu .bnue-btn{width:125px; line-height:34px; background:#C50D17; color:#fff; text-align:center; color:#fff; border-radius:6px;}
.header_con .util-menu .m-open{display:none; }

/*Mobile-memnu Style*/
#m_gnb {display: none;}
#m_header.is-active {display: block;}
#m_header {display: none; transition: all .5s;}
/*E : 웹 끝*/

/***********
반응형시작
***********/
@media all and (max-width: 1200px) {
	#pc_header{margin-bottom:0;}
	.header_con{padding-top:20px; padding-bottom:20px; border-bottom:0;}
	.header_con .util-menu .m-open{display: block;}
	.header_con .util-menu .siteMap{display: none;}
	#tnb,
	#gnb {display: none; width: 320px;}
	
	#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 20px; display: none;}
    #m-gnb .gnb-sub-box.show{display:block !important; width: 100%;}
    #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;}
    #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: 500px) {
		.header_con .util-menu .bnue-btn{display:none;}
		.header_con h1 span{font-size:20px;}
		.header_con .header_logo .logo-text span {font-size:20px;}
}