﻿@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap');
@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;
}


/* common */
body * { font-family: 'NanumSquareRound', sans-serif; font-size: 17px; letter-spacing: -.3px;}
a, a:hover { text-decoration: none!important; word-break: keep-all; cursor: pointer;}
p, span, div {word-break: keep-all; margin: 0; padding: 0;}
.flex { display: flex; align-items: center; }
#loginForm, #joinForm {margin: 4% auto 80px auto!important;}
#unit9184 #daumRoughmapContainer1643870893368 {width: 100%!important;}
#dimodeBoard {margin-top: 50px;}
.ui-datepicker, #dimodePage .page-theme .context-pop {width: auto!important;}


#header { background:#303030; color:#fff; width: 100%; margin: 0 auto; padding: 3px 0;}
#loginbox { float:right;  }
#loginbox .widget-login a { color:#fff; }


/* gnb-wrap */
#gnb-wrap {
    position: relative;
    width: 100%;
    height: 100px;
    margin: 0 auto;
    border-bottom: 2px solid #2F6395;
}
#gnb-wrap div.flex { max-width: 1500px; margin: 0 auto; justify-content: center; height: inherit;}
#gnb-wrap img {display: block;}
.gnb { margin-left:30px; position: relative;}
.gnb .depth1 > li {
    position: relative;
    text-align: center;
    height: inherit;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}
.gnb .depth1 > li > a {
    font-size: 18px;
    font-weight: bold;
    display: block;
    padding: 2vw 25px;
    color: #121212;
    transition: all .2s ease-in-out;
}
/*.gnb .depth1 > li > a:hover {font-size: 18px;}*/
#gnb .depth2 {display: none;}
#gnb .depth2 li a {display: inline-block;}
#gnb ul.depth2 li > a {color: #252525; font-size: 1.6rem; font-weight: 500; line-height: 2; word-break: keep-all;}


/* all-menu container */
.gnb-all { display: none; z-index: 999; position: fixed; top: 0px; left: 0; width: 100%; margin: 0 auto; text-align: center;}
.all-wrapper { background: #fff; box-sizing: border-box; border-bottom: 2px solid #42698A; border-top: 2px solid #42698A; }
.gnb-all .all-wrapper .container a { display: block; color: #42698A;}
.gnb-all .all-wrapper .container > ul {display: flex; justify-content: center; }
.gnb-all .all-wrapper .container > ul > li { /*max-width: 20%;*/ line-height: 1.6; text-align: left; padding: 25px 20px; border-right: 1px solid #ddd;}
.gnb-all .all-wrapper .container > ul > li:first-child {border-left: 1px solid #ddd;}
.gnb-all .all-wrapper .container > ul > li > a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0px 0px 10px;
    font-size: 1.8rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid #ddd;
    padding-bottom: 8px;
}
.gnb-all .all-wrapper .container > ul > li > ul > li > a {
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
    font-size: 1.6rem;
    padding: 0px;
    margin: 5px 0;
    transform: skew(-0.05deg);
    font-weight: 600;
    white-space: nowrap;
    display: block;
}
.gnb-all .all-wrapper .container > ul > li > ul > li > a:hover {transition: all .25s ease-in-out; color: #42698A!important;}
.gnb-all .all-wrapper .container > ul > li > ul > li > ul > li > a { font-weight:normal; color: #666!important; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;font-size: 1.5rem; line-height: 1.6; padding: 0 15px; transform: skew(-0.05deg);}
.gnb-all  ul li a.ready{ font-size:1.9rem; font-weight:bold; opacity:1; color:#000;}
.hover-color {background:#333;}
.hover-font-color { color:white!important;}

/* all-menu ul li */
.gnb-all { display: none; position: fixed; z-index: 999; background: rgba(0, 0, 0, 0.7); top: 125px; left: 0; width: 100%; height: 100%; }
.gnb-all .all-wrapper > ul > li { display: inline-block; vertical-align: top; margin-right: 90px; }
.gnb-all .all-wrapper > ul > li > a { margin-bottom: 30px; font-size: 20px; font-weight: 600; }
.gnb-all .all-wrapper a { display: block; color: #fff; }
.gnb-all .all-wrapper > ul > li:first-child, .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: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }



/* sub */
#subtop img { width:100%;}
#subgnb { border-bottom: 1px solid #ddd;padding: 0px;}
#subgnb span, #subgnb a {
    font-size: 16px;
    color: #777;
    position: relative;
    top: 3px;
}
#subgnb .dropdown {
    display: inline-block;
    float: left;
    border-right: 1px solid #D3D3D3;
    color: gray;
}
#subgnb .dropdown .btn { padding: 15px 15px;font-size: 16px; }
#subgnb .dropdown .btn-default { border: none;}
#subgnb .dropdown .btn:hover { background-color: #9fb2b3; transition: 0.3s all ease;}
#subgnb .dropdown .btn .active { background-color: #9fb2b3; }
#subgnb .dropdown .btn p { margin: 0px;}
#subgnb .open > .dropdown-menu {margin: 0!important; }
#subgnb .dropdown-menu > li > a { padding: 10px 10px; transition: 0.3s all ease; font-size: 16px;}
#subgnb .caret {
        border-top: 2px solid #000;
        border-right: 0px solid transparent;
        border-left: 2px solid #000;
        position: relative;
        margin: 0;
        height: 8px;
        width: 8px;
        transform: rotate(225deg);
        transition: all 0.6s;
        margin-top: -10px;
        margin-left: 20px;
    }
#content { /*padding-top:30px; min-height:600px; padding-bottom:50px;*/ width: 100%; margin: 5% auto 80px; box-sizing: border-box;}
#content .third-menus { margin:10px 0 42px 0;text-align:center; }
#content .third-menus ul{ display:inline-block; }
#content .third-menus ul li { border: 1px solid #dedede; float:left; margin-left:-1px;}
#content .third-menus ul li a { color: #333;text-decoration: none;padding: 8px 17px;font-size: 12px;min-width: 160px;display: inline-block;text-align: center; }
#content .third-menus ul li.active a { color:#fff; }



/*.lnb { padding-right:20px;}*/
.lnb_title { font-size:2.4rem; text-align: left; word-break: keep-all; border-bottom:1px solid #000; padding-bottom:35px; font-weight:600; margin-bottom:0px; }
.sub_depth2 { margin-top:0px; padding-top:0px; }
.sub_depth2 > li { padding: 15px 10px; border-bottom:1px solid #ddd; transition:all ease 0.3s; justify-content: space-between; /*flex-wrap: wrap;*/}
.sub_depth2 > li.active,
.sub_depth2 > li:hover { background:#f0f0f0; }
.sub_depth2 > li > a {
    display: block;
    width: 100%;
    color: #666;
    font-weight: 600;
    font-size: 17px;
    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 {width: 100%; padding-left:20px; margin-top:10px; display:none; }
.sub_depth3.active { display:block; }
.sub_depth3 li { padding:3px 0px; }
.sub_depth3 li a  { color:#777; font-size:16px; text-decoration:none; transition:all ease 0.3s; }
.sub_depth3 li a:hover  { color:#476E8F; font-weight:bold; }
.sub_depth3.a_96 li a:hover { color:#4E5397; }
.sub_depth3.a_98 li a:hover { color:#E4C640; }




#sitemap-wrap { border-top:1px solid #ddd; padding-top:10px; }
#sitemap-wrap  img { float:left; }
#sitemap { float:left; margin-top:50px; padding-bottom:30px; margin-bottom:0px; }
#sitemap a { text-decoration:none; }
#sitemap > li { float:left; padding:0px 30px; }
#sitemap > li > a { color:#739AB9; font-size:18px; font-weight:600; }
#sitemap > li > ul { margin-top:10px;}
#sitemap > li > ul > li { padding:2px 0px;}
#sitemap > li > ul > li > a { color:#777; font-size:15px;  }
#sitemap > li > ul > li > a:hover { color:#739AB9; transition:all ease 0.3s; }
#sitemap > li > ul > li > ul > li { padding-left:10px; }
#sitemap > li > ul > li > ul > li > a { color:#777; font-size:13px; }


footer { width: 100%; margin: 0 auto; overflow: hidden; background: #42698A; padding:30px 0 50px; box-sizing: border-box; position:relative;}
footer .flex {align-items: unset; justify-content: space-between;}
footer img {height: 100%;}
footer p {  color: #fff;font-size: 1.6rem;  line-height: 1.6;}



.widget-inner { position:absolute; }

.w1 { top:20px; left:40px; }
.w2 { top:20px; left:40px; color: #333; }

.w1 .wtitle, .w2 .wtitle  { color:#000; font-size: 2rem; margin: 0; font-weight: bold;}
.weng { color:#000; font-size: 1.7rem; margin: 0 0 20px; font-weight: bold; }

.w1 button { border:1px solid #fff; background:none; padding:2px 22px; font-size:16px; color:#fff; transition:all ease 0.3s; }
/* .notice-title { */
    /* position: absolute; */
    /* top: 50%; */
    /* transform: translateY(-50%); */
    /* right: 0; */
    /* text-align: right; */
	
/* 추가수정 */


.notice-title { position: absolute; top: 55%; transform: translateY(-50%); width: 100%; overflow: hidden ;}
.notice-title li {position: relative; width: 100%; overflow: hidden;  padding-bottom: 15px;}
.notice-title a {
    font-weight: bold;
    color: #000;
    /* position: absolute; */
    /* top: 50%; */
    /* transform: translateY(-50%); */
    right: 0;
    /* text-align: right; */
    display:flex;
	align-items: flex-end;
    width: 100%;
    /* padding: 0 40px; */
}
.notice-title a h3 {margin: 0; font-weight: bold; font-size: 1.8rem; line-height: 1.4;
	 display: block; 
    /* white-space: nowrap; */
    /* overflow: hidden; */
    /* text-overflow: ellipsis; */} 
.notice-title a p {font-size: 1.7rem; padding-right: 30px;  padding-left: 0;}
.w2 .wcontent { color:#fff;  font-size:22px; margin-top:20px; margin-bottom: 15px; }

.i0 { text-align:center; cursor:pointer; }
.i0 img { float:none !important; margin-top:0px !important; }
.i0 p:nth-child(2) { color:#fff; font-size:22px; font-weight:600; margin-top:10px; margin-bottom:10px; }
.i0 p:nth-child(3) { color:#fff; font-size:14px; color:#fff; margin-bottom:15px; }


.board-theme .theme-list table td { white-space: nowrap; }
.board-theme .theme-list table td:first-child, .board-theme .theme-list table td:last-child { white-space: nowrap; }
.vr_nav_xs {
     position:absolute; left:0px; top:0px; width:100%;  z-index:1;
     border:2px solid #000; border-top:1px solid #aaa; border-bottom-left-radius:15px; border-bottom-right-radius:15px; 
     background:rgba(255,255,255,0.6);
}
.vr_nav_xs table { width:100%; border:0px; table-layout:fixed; }
.vr_nav_xs table td { text-align:center; font-size:14px; padding:8px 0px; line-height:100% }
.vr_nav_xs table td a { color:#000; font-weight:600; text-decoration:none; }

#onlineadmin { float:right; margin-top:10px; margin-right:10px;  }
#onlineadmin a { color:#fff; font-weight:600; font-size:14px; text-decoration:none; }
.ui-sortable-handle {     
-ms-touch-action: inherit !important;
  touch-action: inherit !important; 
}

.dimode-widget.popup .popup-content .each-content { background:#fff !important; border:1px solid #999 !important; }
.content-core { text-align:left !important; padding:15px; }
.content-core p { margin-bottom:15px !important; }
.content-core p span { font-size:16px !important; }
.content-core p:first-child span { font-size:20px !important; }


 /* */
#my-menu {display: none;}
.mm-navbar {border-bottom: none!important;}
.mm-panels > #mm-1 {background: #436A88!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:rgba(19, 36, 53, 1)!important; }
.mm-navbar { padding:20px 0px!important; height:inherit!important;}
.mm-navbar a {font-size: 2.4rem; font-weight: bold; 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:20px 0px!important;}
.mm-btn {top:unset!important;}
.mm-front .mm-menu.mm-offcanvas { background:#00649c!important; }
.mm-menu .mm-listview>li .mm-next:after {border-color: rgba(255, 255, 255, 255)!important;}





/* responsive */

@media (max-width: 1499px){
    #gnb-wrap div.flex {padding: 0 25px;}

    .gnb-all .all-wrapper .container > ul > li {max-width: 15%; padding: 20px 10px;}
    .gnb-all .all-wrapper .container > ul > li > a {font-size: 16px;}
    .gnb-all .all-wrapper .container > ul > li > ul > li > a, 
    .gnb-all .all-wrapper .container > ul > li > ul > li > ul > li > a {font-size: 14px;}

   
}

@media screen and (max-width: 1199px) {

    .gnb .depth1 > li > a { font-size: 16px; padding: 2vw 15px;}
    .gnb .depth1 > li > a:hover {font-size: 15px;}
    footer div.container {padding: 0;}

}


@media screen and (max-width: 992px) {
    footer img {margin-right: 50px;}
    #header > div.container {width: 100%!important;}
    #loginbox .widget-login a {font-size: 14px;}
    .widget-login span {margin: 0!important;}
    #gnb-wrap div.flex {justify-content: space-between;}
    .header-mobile-gnb a { font-size: 1.5em; color:#121212; }
	
	
	
	
}


@media (max-width:768px){

    #gnb-wrap {height: 85px;}
    #gnb-wrap img {max-width: 165px;}

    #subgnb div.container {padding: 0;}
    #subgnb .dropdown .btn,
    #subgnb .dropdown-menu > li > a {padding: 10px; font-size: 15px;}


    footer {padding: 30px 10px 15px;}
    footer .flex {flex-direction: column; align-items: center; text-align: center;}
    footer img {max-width: 200px; width: 100%; margin-right: 0;}
    footer p {margin: 20px 0 0; font-size: 15px;}



}