@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:2;}

/*header top Style*/
#pc_header{background:#162a5d; position: relative; z-index:2; }
.header_top{padding:10px 0; border-bottom:1px solid rgba(255,255,255,.3);}
.header_top .con{display:flex; align-items:center; justify-content:space-between;}
.hd-fslink a{color:#fff; position:relative; padding:0 15px;}
.hd-fslink a:after{content:""; display:block; width:1px;  height:18px; position:absolute; right:0; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.3);}
.hd-fslink a:last-child:after{display:none;}
.hd-util{display:flex; gap:30px; align-items:center;}
.hd-util > ul {display:flex; gap:16px;}
.hd-util > ul > li > a{color:#fff; }
.hd-util .mypage-link { color: #ffcc00; /* 원하는 색상 */ font-weight:600;}
.hd-util .m-open{display:none;}
.hd-util .mypage-link .icon-mypage { display: inline-block; width: 14px;height: 16px; background-image: url('/resources/custom/images/apply/common/icon-mypage.png'); /* 아이콘 이미지 경로 */ background-size: contain;background-repeat: no-repeat;margin-right: 0px;vertical-align: middle;}

/*header bottom Style*/
.header_bottom {position:relative;}
.header_bottom .con{display:flex; align-items:center; justify-content:space-between;     gap: 80px;}
.header_logo a{/*display:flex; align-items:center; */gap:8px; }
.header_logo a span{font-family:'Gmarket'; font-size:25px; color:#57bbff;   }
.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'; font-size:25px; color:#57bbff; margin-left: 8px;  }

/*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:after{content:""; display:block; clear:both;}
#gnb > ul > li { position:relative; width: calc(100% / 7);}
#gnb > ul > li > a {width:100%; z-index:10; position: relative;     display: block;}
#gnb > ul > li > a span {color:#fff; word-break:keep-all; font-weight:500; font-size:22px; line-height:85px; font-family:'Gmarket'; display:block;}
#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: 3px; background: #6dc4ff; content: ""; opacity: 1; display: block; transition: all .3s ease;}
#gnb > ul > li.on > a, #gnb li a:hover {color: #6dc4ff;}
#gnb .open.has-sub-menu:after {content: "";}

/*gnb-sub-box > left*/
.gnb-sub-wrap{flex:1;}
.gnb-sub-left{position:absolute; left:0; width:100%; top:100%;  min-height:350px; background:#fff; padding-top:35px; display:none; border-radius:0 0 32px 32px;}
.gnb-sub-left .box{width:380px; height:187px; padding:30px; background:url(/resources/custom/images/apply/common/left-sub-ch.png)#fff1e5 no-repeat right bottom; border-radius:30px;}
.gnb-sub-left .box .gnb-sub-title{display:inline-block; width:60px; line-height:28px; background:#f88359; border-radius:30px; color:#fff; margin-bottom:16px; text-align:center;}
.gnb-sub-left .box .gnb-sub-desc{font-family:'Gmarket'; font-weight:300; color:#303030; line-height:1.5em; }

#gnb .gnb-sub-box {position:absolute; left: 0; width: 100%; z-index: 5; text-align:left; padding-top: 35px; min-height:350px; display:none;}
#gnb .gnb-sub-box .gnb-sub {position:absolute; width:100%; text-align:center; }
#gnb .gnb-sub-box .gnb-sub > li{margin-bottom:10px;}
#gnb .gnb-sub-box .gnb-sub > li > a {font-size:16px; color:#363636; padding:6px; position:relative; word-break: auto-phrase; display:inline-block; font-weight:600;}
#gnb .gnb-sub-box .gnb-sub > li > a:hover{color:#008bc5; }
#gnb .gnb-sub-box .gnb-sub > li > a:before{content:""; display:block;  height:1px; width:100%;  transition:all .3s; position:absolute; bottom:0; left:0;}
#gnb .gnb-sub-box .gnb-sub > li > a:hover:before{ background:#008bc5;}
#gnb .gnb-sub-box .gnb-sub > li ul {display:none;}


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

/*searchbox 공통*/
.hd-search-box{position:absolute; top:100%; left:50%; transform:translateX(-50%);  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 #sText{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/apply/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/apply/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: 0 12px;}
    .hd-search-box #sText{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;}
}

/***********
반응형시작
***********/
@media all and (max-width: 1400px) {
		.header_bottom .con{gap:30px;}
		#gnb > ul > li > a span{font-size:18px;}
		.gnb-sub-left .box{width:320px;}
		.header_logo a span{font-size:18px;}
		.header_bottom .header_logo .logo-text span {font-size:18px;}
		
}

@media all and (max-width: 1200px) {
    .header_bottom nav{display:none;}
    .hd-util .m-open{display:block;}
    .hd-util .siteMap{display:none;}
    
    #pc_header{display:flex; justify-content:space-between; align-items: center; padding:20px 12px;}
    .hd-fslink{display:none}
    .header_top{order:1; border-bottom:none; padding:0;}
    .header_top .con{padding:0;}
    .header_bottom .con{display:block; padding:0;}
    .header_bottom{order:0;  padding:0;}
    
        
    #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) {
		.hd-util{gap:10px;}
		.header_logo a span{font-size:16px; display: block;}
		.header_bottom .header_logo {display: block; /* 부모도 block으로 변경 */}
		.header_bottom .header_logo a { display: block; align-items: unset; /* inline-flex에서 쓰던 속성 해제 */ }
		.header_bottom .header_logo .logo-text span {font-size:16px; display: block; margin-left:0px; }
        .header_logo a img{width:120px}
}
@media all and (max-width:560px) {
	.header_logo a { display:block;}
	.header_logo a span{display: block;}
	.header_bottom .header_logo .logo-text span {display: block !important;}
	.header_logo a img{width:100px}
		
}
@media all and (max-width: 400px) {
        .header_logo a img{width:100px;}
		.hd-util > ul {gap: 8px;}
}