@charset "utf-8";

body.open-menu {overflow:hidden; height:100%;}
#wrap {overflow-x:hidden; padding-top:160px;}
.inner {max-width:1240px; width:100%; margin:0 auto; padding:0 20px;}

/** skip **/
#skip a {display:block; overflow:hidden; position:absolute; top:-1px; left:0; width:1px; height:1px; font-size:0; line-height:0; text-align:center;} 
#skip a:active,
#skip a:focus {top:0; z-index:9999; width:100%; height:auto; margin:0; padding:5px; background:#272d34; font-weight:bold; font-size:15px; line-height:25px; color:#fff;} 

/** Header **/
#header {position:fixed; top:0; left:0; z-index:100; width:100%;}

.header-wrap {position:relative; padding-top:20px; background:#fff;}
.header-wrap .gnb-bg {display:none; position:absolute; top:80px; left:0; z-index:100; width:100%; height:326px; border-top:1px solid #ececec; background:#fff; box-shadow:0 12px 32px -12px rgba(0,0,0,.2)}
.header-wrap .inner {display:flex; justify-content:space-between;}
.header-wrap .logo {width:137px; height:42px;}
.header-wrap .logo a {display:block; width:100%; height:100%; background:url(../images/common/logo.png) no-repeat center / contain;}
.header-wrap .menu-btn {display:none;}

.gnb-wrap {width:80%;}
.gnb-wrap .gnb-top {display:none;}
#gnb .depth1 {display:flex;}
#gnb .depth1 > li {position:relative; width:calc(100% / 4);}
#gnb .depth1 > li > a {display:block; font-weight:500; font-size:18px; line-height:60px; text-align:center;}
#gnb .depth1 > li.on > a {border-radius:30px 0 0 0; background:#004098; color:#fff;}
#gnb .depth2 {display:none; position:absolute; top:60px; left:0; z-index:100; width:100%; height:326px; padding:10px; border-left:1px solid #ececec;}
#gnb .depth1 > li:last-child .depth2 {border-right:1px solid #ececec;}
#gnb .depth2 > li > a {display:block; padding:5px 0; color:#666; text-align:center; transition:all .3s;}
#gnb .depth2 > li > a:hover,
#gnb .depth2 > li > a:active,
#gnb .depth2 > li > a:focus {background:#666; color:#fff;}

.header-search {padding:15px 0; background:#004098;}
.header-search .search-box {position:relative; max-width:560px; width:100%; height:50px; margin:0 auto; padding:5px 50px; border-radius:30px; background:#fff;}
.header-search .search-input {width:calc(100% - 50px); height:100%; outline:none;}
.header-search .search-btn {position:absolute; top:50%; right:50px; width:40px; height:40px; background-image:url(../images/common/ico_search.svg); background-repeat:no-repeat; background-position:center; transform:translateY(-50%);}

/** Footer **/
#footer .footer-head {padding:10px 0; background:#3b3b3b;}
#footer .footer-nav {display:flex; align-items:center; justify-content:center;}
#footer .footer-nav li + li {margin-left:50px;}
#footer .footer-nav li a {color:#ccc;}
#footer .footer-nav li a.privacy {font-weight:bold;}
#footer .footer-body {padding:70px 0; background:#363e4b;}
#footer .footer-body .inner {display:flex; justify-content:space-between;}
#footer .footer-logo {width:137px; height:42px;}
#footer .footer-logo img {display:block; width:100%; height:100%;}
#footer .footer-info {color:#fff;}
#footer .footer-info ul {display:flex; flex-wrap:wrap; line-height:2;}
#footer .footer-info ul li + li {margin-left:20px;}
#footer .footer-info .copyright {line-height:2;}
#footer .footer-ico {display:flex; align-items:center;}
#footer .footer-ico li + li {margin-left:10px;}


/** 1200px 시작 **/
@media screen and (max-width:1200px) {
    #wrap {padding-top:122px;}

    /** Header **/
    #header {box-shadow:0px 3px 20px 0px rgba(0,0,0,.1);}

    .header-wrap {padding:10px 0;}
    .header-wrap .inner {align-items:center;}
    .header-wrap .menu-btn {display:block; width:25px; height:21px; background:url(../images/common/ico_menu.svg);}

    /** GNB mobile **/
    .gnb-wrap {display:block; opacity:0; visibility:hidden; position:fixed; top:0; left:0; z-index:9999; width:100%; height:100%; background:rgba(0,0,0,.7); transition:all .3s;}
    .gnb-wrap .gnb-cont {position:absolute; top:0; bottom:0; right:-320px; z-index:500; width:320px; background:#fff; transition:all .3s;}
    .gnb-wrap .gnb-top {display:flex; align-items:center; justify-content:space-between; height:50px; padding:0 15px; border-bottom:1px solid #ececec;}
    .gnb-wrap .gnb-top .mo-logo {width:98px; height:30px;}
    .gnb-wrap .gnb-top .mo-logo img {display:block; width:100%; height:100%;}
    .gnb-wrap .gnb-top .menu-close {display:block; width:21px; height:21px; background:url(../images/common/ico_close.svg);}

    .gnb-wrap.on {opacity:1; visibility:visible;}
    .gnb-wrap.on .gnb-cont {right:0;}

    #gnb {position:relative; height:100%;}
    #gnb::before {content:''; position:absolute; top:0; left:0; width:120px; height:100%; background:#f8f8f8;}
    #gnb .depth1 {display:block;}
    #gnb .depth1 > li {position:static; width:100%;}
    #gnb .depth1 > li > a {position:relative; width:120px; padding:0 15px; font-size:15px; line-height:40px; text-align:left;}
    #gnb .depth2 {overflow-y:auto; top:0; left:120px; width:calc(100% - 120px); height:100%; padding:0;}
    #gnb .depth2 > li > a {padding:0 15px; font-size:14px; line-height:40px; text-align:left;}

    #gnb .depth1 > li.on > a {border-radius:0;}
    #gnb .depth1 > li.on .depth2 {display:block;}
    
    .header-search {padding:10px 0; background:#fff;}
    .header-search .search-box {height:40px; padding:0; border:1px solid #004098;}
    .header-search .search-input {padding:0 10px; border-radius:30px 0 0 30px;}
    .header-search .search-btn {right:0; width:50px; border-radius:0 30px 30px 0; background-color:#004098; background-image:url(../images/common/ico_search_w.svg);}
}
/** 1200px 끝 **/

/** 1024px 시작 **/
@media screen and (max-width:1024px) {
    /** Footer **/
    #footer .footer-body {padding:30px 0;}
    #footer .footer-body .inner {flex-direction:column; align-items:center;}
    #footer .footer-logo {margin-bottom:10px;}
    #footer .footer-info {margin-bottom:20px; text-align:center;}
    #footer .footer-info ul {justify-content:center;}
    #footer .footer-info .copyright {color:#959595;}
}
/** 1024px 끝 **/

/** 767px 시작 **/
@media screen and (max-width:767px) {
    body {font-size:14px;}
    #wrap {padding-top:110px;}

    /** Header **/
    .header-wrap .logo {width:98px; height:30px;}

    .header-search .search-box {max-width:330px;}

    /** Footer **/
    #footer {font-size:12px;}
    #footer .footer-nav li + li {margin-left:15px;}
    #footer .footer-logo {width:98px; height:30px;}
    #footer .footer-info ul li + li {margin-left:10px;}
    #footer .footer-ico {justify-content:center;}
    #footer .footer-ico li {width:30%;}
    #footer .footer-ico li a img {display:block; width:100%;}
}
/** 767px 끝 **/