@charset "UTF-8";

/*S : 웹 시작*/
.backdrop{position:fixed; top:0; left:0; width:100%;  height:100vh; background:rgba(0,0,0,.5);display:block; content:""; z-index:11;}
#pc_header{position:absolute; width:100%; z-index:12;}
#pc_header > .header_top .fix-layout, #pc_header > .header_bottom .fix-layout{margin:0 auto; display:flex; justify-content: space-between; align-items: center;}
/*header-top*/
.header_top {padding:7px 0;}
.header_top .fix-layout{padding:0;}
.header_top .hd-top-left{display:flex; gap:24px; align-items:center;}
.header_top .bnue-link{position:relative; display:block; width:170px; line-height:48px; background:#184bc3; text-align:center; color:#fff; border-radius:50px;}
.header_top .popup-open-btn{color:#fff; display:flex; align-items:center; gap:10px;}
.header_top .popup-open-btn i{display:flex; width:36px; height:36px; background:#f39200; border-radius:50px; align-items:center; justify-content:center;}
.header_top .fsitelink{border:none; padding:10px 0;}
.header_top .fsitelink .tit a{padding-left:0; padding-right:50px;}
.header_top .fsitelink .tit a:after{right:0; width:21px; height:12px;  background:url(/resources/custom/images/rnd/common/ico-slink-link.png) no-repeat center;}
.header_top .fsitelink .fsitelink-cate-box{top:100%;}

/*header-bottom*/
.header_bottom {position: relative; top: 0; z-index: 99; width: 100%;  margin: 0 auto; }
.header_bottom.on{background:#fff; border-bottom:1px solid #ddd;}
.header_bottom .fix-layout{background:#fff; padding:0 30px;}
.header_bottom h1{display: inline-block;}
.header_bottom h1 > a{display:flex; align-items:center;}
.header_bottom h1 > a > span{font-family:"Gmarket"; font-size:25px; color:#2a2a24; margin-left:10px; 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: #2a2a24;  font-size: 25px; margin-left: 10px; font-weight:300;}
.header_bottom nav{flex:1; max-width: 750px;}
.header_bottom .login-btn{display:block; width:30px; height:28px; background:url(/resources/custom/images/rnd/common/ico-login.png) no-repeat center; text-indent:-9999px;}
.header_bottom .util-menu{display:flex; gap:16px;align-items: center;}
.header_bottom .util-menu > ul{display:flex;}
.header_bottom .util-menu .m-open{display:none; }
.header_bottom .util-menu a{display:block; padding:4px;}



/*변경부분*/
.header_bottom .bg{display:none; width:100%; height:250px; background:#fff; position:absolute; left:0; top:90px;}

/*GNB Menu Style*/
#gnb {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 > li {float:left; position:relative; width: calc(100% / 3); text-align: center;}
#gnb > ul > li > a {width:100%; z-index:10; position: relative; font-size: 18px; text-align: left; line-height:90px; display: inline-block; color: #666; font-weight: 500; letter-spacing: -1px;}
#gnb > ul > li > a span {color:#191919; word-break:keep-all; font-weight:300; font-size:22px; 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: 0;left: 0; width:100%; height: 4px; background: #1422a3; 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{color: #1422a3;}
#gnb .open.has-sub-menu:after {content: "";}

/*header_on일 시*/
#gnb.on > ul > li > a span{color:#191919;}

/*gnb-sub-box*/
#gnb .gnb-sub-box {display:none; position:absolute; top: 90px; left: 0; width: 100%; min-height:210px; z-index: 5; padding-top:20px;}
#gnb .gnb-sub-box .gnb-sub {position:absolute; width:100%; }
#gnb .gnb-sub-box .gnb-sub > li {display:inline-block; width:100%; margin-bottom:4px;}
#gnb .gnb-sub-box .gnb-sub > li:hover > a {color: #1422a3;}
#gnb .gnb-sub-box .gnb-sub > li > a {font-size:16px; color:#363636; display:inline-block; width:100%; text-align:left; padding:8px;}
#gnb .gnb-sub-box .gnb-sub > li ul{display:none;}


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

/***********
반응형시작
***********/
@media all and (max-width: 1644px) {
		.header_top .fix-layout{padding:0 12px;}
		.header_bottom .fix-layout{padding:0 12px;}
}
@media all and (max-width:1400px){
		.header_bottom nav{margin:0 50px;}
}
@media all and (max-width: 1200px) {
	.header_bottom .fix-layout{padding:20px 12px;}
	.header_bottom .util-menu .m-open{display: block;}
	.header_bottom .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;}
	#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: 101;}
	#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;         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:767px){
 .header_top .bnue-link{line-height:35px; font-size:15px;}
 .header_top .fsitelink{width:auto;}
 .header_top .popup-open-btn{text-indent:-9999px;}
 .header_bottom h1 img{width:120px;}
 .header_bottom h1 > a > span{font-size:20px; margin-left: 4px;}
 .header_bottom .header_logo .logo-text span {font-size:20px;}
 }
@media all and (max-width: 500px) {
		.header_top .bnue-link{width:110px;}
		.header_bottom h1 > a > span{font-size:15px;}
		.header_bottom .header_logo .logo-text span {font-size:15px;}
		.header_bottom .util-menu{gap:4px;}
		.header_bottom .fix-layout{padding-left:4px; padding-right:4px;}
}
@media all and (max-width: 400px) {
		.header_bottom h1 > a > span{font-size:8px;}
		.header_bottom .header_logo .logo-text span {font-size:8px;}
		.header_top .popup-open-btn{gap:0;}
		.header_top .fsitelink{display:none;}
		
}
.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/rnd/common/ico-search.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/rnd/common/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-left:0;}
    .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;}
    }