﻿
@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');
}

@font-face {
    font-family: 'NanumSquareRound';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap');

@font-face {
    font-family: 'Do Hyeon';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMDOHYEON.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* 크롬에서 하늘색 테두리 없애는 방법 */
*:focus { outline: none;}

/* font select */
body * { font-family: 'NanumSquare'; font-size: 18px; letter-spacing: .3px; word-break: keep-all;}
a * , a:hover {text-decoration: none!important;}
div, p, h1, h2, h3, h4, h5, h6, span {padding: 0; margin: 0; word-break: keep-all; line-height: 1;}
.flex {display: flex; align-items: center;}
#loginForm {margin:5% auto 50px auto!important;}
#joinForm {margin:2% auto 0px!important;}

@media (min-width: 1499px) { .container {width: 1400px;}}

/* header */
#header { background: #121212; padding: 5px 0px;}
#header a { color:#fff; font-size: 1.4rem;}
#header .header-box-right { justify-content: space-between; }
#header .header-box-right ul li a {padding:0px 10px; border-right: 1px solid #fff; }
#header .header-box-right ul li:last-child a { border-right:none; }

.logo img {max-width: 250px; width: 100%;}
.youtube-btn img {max-width: 135px; width: 100%;}

/* gnb */
#gnb-wrap { width: 100%; height: 100px; border-bottom:1px solid #eee; box-shadow: rgba(0 0 0 / 5%) 0px 1px 2px 0px; position: relative; top: 0; left: 0;}
#gnb-wrap > div.container {height: inherit;}
#gnb-wrap > div div.flex { width: 100%; height: inherit; justify-content: space-between; margin: 0 auto;}
#gnb {}
#gnb > li {position: relative;}
    #gnb > li > a {
        font-size: 1.3em;
        padding: 3em 2vw;
        box-sizing: border-box;
        color: #121212;
        font-weight: bold;
        transition: all .3s ease-in-out;
        letter-spacing: 1.5px;
        display: inline-block;
        transition: all .25s ease;
        white-space: nowrap;
    }
#gnb > li > a:hover, #gnb > li > a.active  { color:#132345;}
#gnb > li > ul { display:none; }


/* 상단바 서브탑 누르면 나오는 것들 */
.gnb2 {background: #132345; width:100%; top: 100px; height: 0; position:absolute; left:0px; z-index:999; overflow: hidden;}
.gnb2 > div { position: relative; overflow: hidden;}
.gnb2 .subul {text-align: center; left: 56%; transform: translateX(-50%); position: relative; justify-content: center;}
.gnb2 .subul > li { box-sizing: border-box; justify-content: space-between;}
.gnb2 .subul > li a { display: block; font-size: 1.8rem; padding: 1.5em 1.5vw; transition: all .4s ease-in-out; color: #fff;}
.gnb2 .subul > li a:hover {font-weight: bold;}

/* footer */
footer {clear: both; background: #132345; padding: 4em 15px 6em; box-sizing: border-box;}
footer > div.flex { max-width: 1280px; margin: 0 auto;}
div.footer-left {flex-direction: column; align-items: flex-start;}
div.footer-left > ul.flex {width: 100%; justify-content: space-between; padding-top: 30px;} 
div.footer-left > ul.flex li {}
footer p { padding-left: 5em; text-align: left; color: #fff; line-height: 1.6; word-break: keep-all;}




/* sitemap all s */
.gnb-all { display: none; position: fixed; z-index: 99999; background: rgba(0, 0, 0, 0.7); top: 0; left: 0; width: 100%; height: 100%; }
.gnb-all .all-wrapper { width: 1170px; margin: 0px auto; }
.gnb-all .all-wrapper .all-top { color: white; font-size: 24px; font-weight: 600; }
.gnb-all .all-wrapper .junce { text-align: center; margin: 48px 0 27px 0; }
.gnb-all .all-wrapper .all-close { color: #fff; position: fixed; right: 14px; top: -9px; cursor: pointer; font-weight: 600; font-size: 5em; }
.gnb-all .all-wrapper > ul > li { display: inline-block; vertical-align: top; margin-right: 105px; }
.gnb-all .all-wrapper > ul > li > a { margin-bottom: 12px; font-size: 20px; font-weight: 600; }
.gnb-all .all-wrapper > ul > li:first-child { display: none; }
.gnb-all .all-wrapper > ul > li:last-child { display: none; }
.gnb-all .all-wrapper > ul > li > ul > li > a { color: #fff; display: block; margin-bottom: 9px; height: 21px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:14px; }
.gnb-all .all-wrapper > 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; }
.gnb-all .all-wrapper a { display: block; color: #fff; }


/*지도*/
#unit5219 #daumRoughmapContainer1649904112720{ width:100% !important; }


.lnb { padding-right:40px;}
.lnb_title { font-size:30px; border-bottom:1px solid #000; padding-bottom:25px; font-weight:600; font-family:NanumBarunGothic; margin-bottom:0px; text-align:center;}
.sub_depth2 { margin-top:0px; padding-top:0px; }
.sub_depth2 > li { padding: 15px; border-bottom:1px solid #ddd; transition:all ease 0.3s; }
.sub_depth2 > li.active,
.sub_depth2 > li:hover { background:#f0f0f0; }
.sub_depth2 > li > a { color:#777; font-weight:600;  font-size:16px; text-decoration:none; }
.sub_depth2 > li > i { position:relative; margin-right:10px; cursor:pointer; }
.sub_depth2 > li > i.fa-minus { display:none; }
.sub_depth2 > li:last-child { border-color:#000; }
.sub_depth3 { padding-left:20px; margin-top:10px; display:none; }
.sub_depth3.active { display:block; }
.sub_depth3 li { padding:3px 0px; }
.sub_depth3 li a  { color:#999; font-size:15px;  text-decoration:none;  transition:all ease 0.3s; }
.sub_depth3 li a:hover  { color:#739AB9; }
.sub_depth3.a_96 li a:hover { color:#4E5397; }
.sub_depth3.a_98 li a:hover { color:#E4C640; }


/* mobile */
#my-menu {display: none; max-width: 340px;  width: 100%;}
.mm-navbar {border-bottom: none!important;}
.header-mobile-gnb .toggle {color:#333333!important;}
.mm-panels > #mm-1 {background:#132444!important; }
.mm-front .mm-menu.mm-offcanvas { background:#C3CFF0!important; }
.mm-menu .mm-listview > li .mm-next:after {border-color: #fff!important;}
/* .mm-panels > #mm-1 {background:#f6d6d!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,
.mm-panels > #mm-13,
.mm-panels > #mm-14,
.mm-panels > #mm-15,
.mm-panels > #mm-16,
.mm-panels > #mm-17,
.mm-panels > #mm-18,
.mm-panels > #mm-19,
.mm-panels > #mm-20,
.mm-panels > #mm-21,
.mm-panels > #mm-22,
.mm-panels > #mm-23,
.mm-panels > #mm-24,
.mm-panels > #mm-25,
.mm-panels > #mm-26,
.mm-panels > #mm-27,
.mm-panels > #mm-28,
.mm-panels > #mm-29,
.mm-panels > #mm-30,
/* .mm-panels > #mm-31 { background-color: #00649c !important; } */
.mm-panels > .mm-panel {
    padding: 0 10px !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 {color:#fff!important; padding:20px 25px!important; font-size:17px;}
.mm-panels>.mm-panel>.mm-listview { margin:60px 0px!important;}
.mm-btn {top:unset!important;}
.mm-listview li.login {display: flex; position: absolute; right: 0; bottom: 0;}
.mm-listview > li.login:not(.mm-divider):after {display: none!important;}
.mm-listview > li.login > a {padding: 25px 15px!important;}


@media (max-width:1499px) {
    
}

@media (max-width:1199px) {
    #gnb > li > a {font-size: 1.85rem;}
    .gnb2 > div { max-width: 750px;}
	/* .gnb2 .subul {left: 15%;} */
	.gnb2 .subul > li a {font-size: 1.7rem;}

    footer {padding: 2em 15px;}
    footer p {padding-left: 0; font-size: 1.1em; text-align: center;}
    div.footer-left {padding-bottom: 1em;}
    footer > div {flex-direction: column;}

}

@media (max-width:991px) { 
	#gnb-wrap {width: 100%; padding: 10px 0; height: unset;}
    /* #gnb-wrap img {max-height: 65px; height: 100%;} */
    #gnb-wrap div div.flex { padding:0;}
    /*.header-mobile-gnb {position:absolute; right: -10px;}*/
	.header-mobile-gnb, .visible-xs {display: flex!important;}
    .header-mobile-gnb a { font-size: 3rem; }
    .header-mobile-gnb .toggle {position: relative; top: 3px;}
    .header-mobile-gnb a.youtube-btn {padding-right:8px;}

    .youtube-btn img {width: 2.5em;}
    #sitemap > li {padding: 0 20px;}
   
}

@media (max-width:767px) {
    .slider .slider-dots .each-dot {width: 8px!important; height: 8px!important;}
    #header a {padding: 0 5px;}
    #header .header-box-right {font-size: 13px;}
	#header .header-box-right li a {font-size: 14px;}
    #gnb-wrap a.logo img {max-width: 185px;}
    /*.header-mobile-gnb a.youtube-btn { padding-right:3px;}*/

    #sitemap {display: none;}
    footer {padding: 20px 10px;}
    footer p, footer a {font-size: .9em;}
    div.footer-left {align-items: center;}
    div.footer-left img {max-width: 200px;}
    footer > div > div {width: 100%; margin: 0 auto; text-align: center; padding-top: 0; justify-content: center;}
    footer > div > div > p {margin-left: 20px;}
}

@media (max-width:414px) {
    #gnb-wrap > div.container {padding: 0 10px!important;}

    footer > div > div {flex-direction: column;}
    footer > div > div > p {margin-left: 0; text-align: center; padding-top: 10px;}
    #my-menu {max-width: 75%;}
}



