﻿@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);

@font-face {
    font-family: 'NanumBarunGothic';
    src: url(webfont/NanumBarunGothic/NanumBarunGothicWeb.eot);
    src: url(webfont/NanumBarunGothic/NanumBarunGothicWeb.eot?#iefix) format('embedded-opentype'), url(webfont/NanumBarunGothic/NanumBarunGothicWeb.woff) format('woff'), url(webfont/NanumBarunGothic/NanumBarunGothicWeb.ttf) format('truetype');
}

@font-face {
    font-family: 'NanumSquare';
    src: url(webfont/NanumSquare/NanumSquareR.eot);
    src: url(webfont/NanumSquare/NanumSquareR.eot?#iefix) format('embedded-opentype'), url(webfont/NanumSquare/NanumSquareR.woff) format('woff'), url(webfont/NanumSquare/NanumSquareR.ttf) format('truetype');
}


html, body, .bodyWrapper {
    font-family: 'NanumSquare', sans-serif;
    letter-spacing:-0.5px;
}

#header .left { float:left; margin:20px 0; }
#header .right { float:right; text-align:right; }
#header .right .right-top { background:#2d3238; margin-bottom:30px; display:inline-block; }
#header .right .right-top a { color:#c6c6c7; font-size:13px; text-decoration:none; }
#header .right ul { padding:8px 15px; }
#header .right li:last-child { border-right:none; }
#header .right li img { margin-right:8px; position:relative; top:-1px; }
#header .right li { display:inline-block; padding:0 10px; border-right:1px solid #c6c6c7; }
#header .right .right-bottom { font-size:14px; font-weight:bold; }

.navbar-collapse.collapse { padding:0; }
#header .header-gnb .gnb > ul > li:first-child { display:none; }
#header .header-gnb .gnb > ul > li > a { color: #555; display: inline-block; font-weight: bold; font-size:17px; width:100%; }
#header .header-gnb .gnb > ul > li { text-align: center; border-left: 1px solid #cccccc; width:14.2%; }
.layout-header { border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; position: relative; }
#header .header-gnb .gnb .home > a > img { padding: 15px 15px 15px 17px; }
#header .header-gnb .gnb .home { display: inline-block; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; float: left; }
#header .header-gnb .gnb .click-hidden > a > img { padding: 18px; }
#header .header-gnb .gnb .click-hidden { display: inline-block; border-right: 1px solid #cccccc; float: left; }
.wrap-depth {display:none; padding-top:30px; border-top:1px solid #cccccc; padding-bottom: 30px; position:absolute; background-color:#fff; z-index:50; width:100%;}
.gnb-ul-li{width:89%;}
.wrap-depth li {vertical-align:top; padding:0px;}
.wrap-depth li a{color:#555; text-align:center; font-size:15px; }
.depth2 li { padding-bottom:10px; text-align:center;}
.wrap-depth > .container > ul > li:nth-child(1) { display:none;}
.wrap-depth > .container > ul > li:nth-child(2) { width:160px;}
.wrap-depth > .container > ul > li:nth-child(3) { width:115px;}
.wrap-depth > .container > ul > li:nth-child(4) { width:175px;}
.wrap-depth > .container > ul > li:nth-child(5) { width:120px;}
.wrap-depth > .container > ul > li:nth-child(6) { width:170px;}
.wrap-depth > .container > ul > li:nth-child(7) { width:130px;}
.wrap-depth > .container > ul > li:nth-child(8) { width:155px;}

#footer-quick { border-top:1px solid #b1b1b1; margin-bottom:-4px;  }
#footer-quick .foot-1 { float:left; margin-top:13px; }
#footer-quick .foot-2 { float:right; }
#footer-quick ul { margin-left:30px; overflow:hidden; display:inline-block;}
#footer-quick ul a { font-size:15px; color:#333; }
#footer-quick li { float:left; padding:17px; }
#footer-quick li:hover { background:#f2f2f2; transition:0.3s all; }

#footer { padding:50px 0; background:#313131; }
#footer img { float:left; }
#footer p { display:inline-block; font-size:17px; color:#f2f2f2; line-height:28px; margin-left:40px; margin-bottom:0;  }
#footer a { text-decoration: none; color:#f2f2f2; }
#footer a:hover { font-weight:bold; }

.gnb-all { display: none; position: fixed; z-index: 9999; background: rgba(0, 0, 0, 0.7); top: 0; left: 0; width: 100%; height: 100%; text-align:center;}
.gnb-all a {color:#fff; text-decoration:none;}
.gnb-all img {margin:80px 0px 50px; max-width:300px; }
.gnb-all .all-wrapper .all-close { color: #fff; cursor: pointer; font-weight: 600; font-size: 5em; float:right; }
.gnb-all .all-wrapper .container a { display: block; color: #fff; }
.gnb-all .all-wrapper .container > ul > li { display: inline-block; vertical-align: top; padding:0px 25px;}
.gnb-all .all-wrapper .container > ul > li > a { margin:0px 0px 18px; font-size: 22px; font-weight: 600; text-decoration:none;}
.gnb-all .all-wrapper .container > ul > li:first-child { display: none; }
.gnb-all .all-wrapper .container > ul > li > ul > li > a { color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:18px; padding:6px 0px;}
.gnb-all .all-wrapper .container > ul > li > ul > li > a:hover { font-weight:bold; transition:0.2s all ease;}
.gnb-all .all-wrapper .container > ul > li > ul > li > ul > li > a { color: #fff; display: block; margin-bottom: 9px; height: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: 1px; }
.all-wrapper h2 { margin:50px 0; color:#fff; font-weight:bold; }

/* mobile */

.header-mobile-gnb .toggle {color:#333333!important;}
.mm-panels > #mm-1 {background-color:#03529D!important; }
.mm-panels > #mm-2,
.mm-panels > #mm-3,
.mm-panels > #mm-4,
.mm-panels > #mm-5,
.mm-panels > #mm-6,
.mm-panels > #mm-7,
.mm-panels > #mm-8,
.mm-panels > #mm-9,
.mm-panels > #mm-10,
.mm-panels > #mm-11,
.mm-panels > #mm-12 { background-color: #00A2E5!important; }
.mm-navbar { padding:20px 0px!important; height:inherit!important;}
.mm-navbar a { font-size:22px; color:#fff!important;}
.mm-listview>li>a, .mm-listview>li>span { padding:20px 25px!important; font-size:17px;}
.mm-panels>.mm-panel>.mm-listview { margin:20px 0px!important;}
.mm-btn {top:unset!important;}

@media (min-width:1200px) and (max-width:1499px) {
	    .wrap-depth > .container > ul > li:nth-child(1) { display:none;}
.wrap-depth > .container > ul > li:nth-child(2) { width:160px;}
.wrap-depth > .container > ul > li:nth-child(3) { width:115px;}
.wrap-depth > .container > ul > li:nth-child(4) { width:175px;}
.wrap-depth > .container > ul > li:nth-child(5) { width:120px;}
.wrap-depth > .container > ul > li:nth-child(6) { width:170px;}
.wrap-depth > .container > ul > li:nth-child(7) { width:130px;}
.wrap-depth > .container > ul > li:nth-child(8) { width:155px;}
}


@media (min-width:993px) and (max-width:1199px) {
    #footer p { font-size:15px;}
    .wrap-depth > .container > ul > li:nth-child(1) { display:none;}
.wrap-depth > .container > ul > li:nth-child(2) { width:135px;}
.wrap-depth > .container > ul > li:nth-child(3) { width:115px;}
.wrap-depth > .container > ul > li:nth-child(4) { width:135px;}
.wrap-depth > .container > ul > li:nth-child(5) { width:85px;}
.wrap-depth > .container > ul > li:nth-child(6) { width:140px;}
.wrap-depth > .container > ul > li:nth-child(7) { width:100px;}
.wrap-depth > .container > ul > li:nth-child(8) { width:110px;}
}

@media (min-width:768px) and (max-width:992px) {
    #footer { text-align:center; }
    #footer p { font-size:15px; margin:15px 0 0;}
    #footer img { float:none; display:block; margin:0 auto; }
    #header .right .right-bottom  { display:none; }
    .gnb-container { display:none; }
    .header-mobile-gnb {float:right; margin:35px 0px 0px; font-size:30px; margin-right:15px; }
    #header .right .right-top { display:none; }
}

@media (max-width:767px) {

    #header .left img { position:relative; left:-8px; }
    #header .row { margin:0; }
    .header-mobile-gnb {float:right; margin:25px 0px 0px; font-size:30px;}
        #footer { text-align:center; }
    #footer p { font-size:15px; margin:14px 0 0;}
    #footer img { float:none; display:block; margin:0 auto; max-width:150px; }
    #header .right .right-bottom  { display:none; }
    .gnb-container { display:none; }
    #header .left img {max-width:150px; }
    #footer-quick { display:none; }
    #header .right { display:none; }
}
