@charset "UTF-8";

/*S : 웹 시작*/
/*header-top*/
#pc_header{position:relative;}
.header_top {width:100%; background:#222;}
.header_top .fix-layout{display:flex; justify-content:space-between;}
.header_top .bnue-btn{color:#fff; position:relative; padding-right:26px; line-height:45px;}
.header_top .bnue-btn:after{content:""; display:block; width:12px; height:12px; background:url(/resources/custom/images/edu/common/ico-link.png); position:absolute; top:50%; right:0; transform: translateY(-50%);}
.header_top .hd-usr-info{display:flex; gap:30px; }
.header_top .hd-usr-info a{color:#fff; line-height:45px; display:flex; align-items:center; gap:10px;}
.header_top .hd-usr-info a i{display:flex; align-items:center;}
.header_top .hd-usr-info .mypage-btn{background:#ffc11d; color:#222; font-weight:600; width:130px; justify-content: center;}

/*header-bottom*/
.header_bottom {position: relative; top: 0; z-index: 99; width: 100%; margin: 0 auto; border-bottom:1px solid #ddd;}
.header_bottom > .fix-layout{display:flex; align-items:center;}
.header_bottom h1 a {display: flex; align-items:center;}
.header_bottom h1 span{font-family:'Gmarket'; font-size:23px; color:#163298; margin-left:10px; display:block; 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'; font-size:23px; color:#163298; margin-left:10px; display:block; font-weight:300;}
.header_bottom nav{flex:1;}

/*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% / 4); text-align: center;}
#gnb > ul > li > a {width:100%; z-index:10; position: relative; font-size: 18px; text-align: center;  display: inline-block; color: #666; font-weight: 500; letter-spacing: -1px;}
#gnb > ul > li > a span {color:#222; word-break:keep-all; font-weight:600; font-size:20px; line-height:90px;}
#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: #2e55c1; content: ""; opacity: 1; display: block; transition: all .3s ease;}
#gnb > ul > li.on > a, #gnb li a:hover {color: #2e55c1;}

/*gnb-sub-box*/
#gnb .gnb-sub-box {background: #fff; display:none; min-height:380px;  text-align:left;  position: absolute; top: 91px; left: 0; width: 100%;  background-repeat: repeat; background-size: contain; z-index: 5; border-bottom:1px solid #ccc;}
#gnb .gnb-sub-box .fix-layout{height:auto;}
#gnb .gnb-sub-box .gnb-left-box {position:absolute; height:100%; float: left; width :380px; background:url(/resources/custom/images/edu/common/gnb-left-box.png)no-repeat #f6f9fc right bottom; padding-top:80px; padding-right:24px;}
#gnb .gnb-sub-box .gnb-left-box:before{width:800px; height:100%; position:absolute; right:100%; top:0; content:""; display:block; background:#f6f9fc;}
#gnb .gnb-left-box .gnb-main-title{color:#163298; font-weight:bold; margin-bottom:12px; font-size:35px;}
#gnb .gnb-left-box .gnb-sub-title{color:#000000; font-weight:600;  margin-bottom:30px; font-size:25px;}
#gnb .gnb-left-box .gnb-desc-title{color:#56595b;  font-weight:400; word-break:keep-all;}
#gnb .gnb-sub-box .gnb-sub {display:flex; align-items: baseline;float: right;  width: calc(100% - 380px);   padding: 80px 12px 20px 70px; background:#fff; flex-wrap:wrap; gap:10px 30px;}
#gnb .gnb-sub-box .gnb-sub > li {width:calc((100% - 90px) / 4);text-align: left; }
#gnb .gnb-sub-box .gnb-sub > li:nth-child(4n){margin-right:0;}
#gnb .gnb-sub-box .gnb-sub > li > a {font-size:18px; width:100%; color:#434343; padding:4px; margin-right: 2px; display:flex; align-items: center; height:50px;  padding: 0px 12px 0px 20px; width:100%; border:1px solid #cfd5dc;}
#gnb .gnb-sub-box .gnb-sub > li > a:hover{border:1px solid #000;}
#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;}

/*util-menu Style*/
.header_bottom .util-menu{display:flex; gap:20px; align-items:center;}
.header_bottom .util-menu .m-open{display:none; }
/*Mobile-memnu Style*/
#m_gnb {display: none;}
#m_header.is-active {display: block;}
#m_header {transition: all .5s; position: absolute; display:none;}
#m_header .side { z-index: 101; position: relative;}
#m_header .side .top-utill {display: none;}
/*E : 웹 끝*/

/***********
반응형시작
***********/
@media all and (max-width:1600px){
		#gnb .gnb-sub-box .gnb-left-box{padding-top:50px;}
        #gnb .gnb-sub-box .gnb-sub{padding:50px 12px 12px 12px;}
}
@media all and (max-width:1450px){
		#gnb > ul > li > a span{font-size:17px;}
		
}
@media all and (max-width: 1200px) {
        
    .header_bottom{padding:20px 0;}
    .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; right: 0;  /*background: rgba(0,0,0,.3); */z-index: 9999;width:100%; height:100%; display:none;}
    #m_header .side{display:block; width:100%; max-width:500px;  position:absolute; background:#fff; min-height:100vh; z-index: 1; right:0;}
    #m_header .side-close{position:absolute; top:16px; right:16px;}
    
    /*모바일 메뉴 스타일*/
    #m_header .gnb-left-box{display:none;}
    #m_header .side:after{content:""; display:block; width:200px; height:100%; background:#eee; position: absolute;
        top: 0px;}
    #m-gnb{position:relative; z-index:1;}
    #m-gnb  > ul {position:relative; margin-top:30px;}
    #m-gnb .gnb-title{display:none;}
    /*모바일 메뉴 > 원뎁스*/
    #m-gnb  > ul > li{width:190px; }
    #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:200px; 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:200px; top:0; position:absolute; padding:20px 10px 10px 0; display: none;}
    #m-gnb .gnb-sub-box.show{display:block !important; width: calc(100% - 170px);}
    #m-gnb .gnb-sub-box .gnb-sub > li{margin-bottom:2px;}
    #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:12px; margin-top: 10px;        margin-bottom: 10px;}
    #m-gnb .gnb-sub-box .gnb-sub .gnb-sub-depth li {margin-bottom:2px; margin-bottom:4px;}
    #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 a{width:180px;}
        .header_top .bnue-btn{display:none;}
        .header_top .hd-usr-info a i{display:none;}
        .header_top .hd-usr-info .mypage-btn{position:absolute; right:0;}
}
@media all and (max-width: 430px) {
		.header_bottom h1 a img{width:100px;}
		.header_bottom h1 span{font-size:18px;}
		.header_bottom .header_logo .logo-text span {font-size:18px;}
}

.hd-search-box{position:absolute; top:100%; left:50%; transform:translateX(-50%); z-index:5; 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/edu/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/edu/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 #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;}
    }