@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
@font-face {
    font-family: 'Arita-buri-SemiBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Arita-buri-SemiBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Arita-buriM';
    src: url(webfont/AritaBuriM/Arita-buriM.ttf) format('truetype');
}


.board-theme.gallery .theme-list > .each-document > a.title { width:100%!important; }
.modal-backdrop { z-index:0!important; }
.board-theme .theme-list { font-family: inherit!important; }
.board-theme.gallery .theme-list > .each-document > a.title { height:auto!important; margin:0!important; text-decoration:none!important; }
.board-theme.gallery .theme-list > .each-document { margin-bottom:10px!important; }


body * { font-family: 'NanumSquare'; word-break: keep-all; letter-spacing: -.3px; }
.kr {font-family: 'Arita-buriM';}
div, p, span {margin: 0; padding: 0; word-break: keep-all; line-height: 1.6;}
a, a:hover {text-decoration: unset!important; cursor: pointer; color: inherit;}
ul, li {list-style: none;}
h1, h2, h3, h4, h5 {margin: 0; font-weight: bold; line-height: normal;}
.flex {display: flex; align-items: center;}
#joinForm {margin: 0 auto 3em auto!important;}
#loginForm, #joinForm, #memberInfoForm {margin: 5em auto !important; }


header .gnb-wrap {
    justify-content: space-around;
    width: 100%;
    height: 100px;
    align-items: center;
    width: 100%;
    position: fixed;
    /*position : sticky;*/
    top: 0;
    text-align: center;
    z-index: 99;
    background: #fff;
    transition: all .4s ease-in-out;
    box-shadow: 0 15px 30px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.20);
}
header .gnb { text-align:center; display:inline-block; float:none; }
header .header-right { }
header .header-right li {padding: 0 10px;}
header .header-right li:last-child {padding-left: 1.5em;}
header .header-right li a {color: #121212; font-size: 1.5rem;  font-weight: bold;}

#gnb , header .header-right { position: relative; top: .8em; left: 0; height: inherit; }
#gnb > li.depth1 { text-align:center; line-height: 100px; height: inherit; transition: all .2s ease-in-out; outline:none;}
#gnb > li > a { font-size: 1.7em; font-weight: bold; color: #121212; transition:all ease 0.2s; display: block; }
#gnb > li > a.active {border-top:4px solid #4096CA; padding-top:7px; transition:all ease 0.2s; font-weight:bold; }
.subal {width: 150px; padding: 10px 5px 5px; background-color:#0C81AC; /*background-color: #0C82AF;*/ color: #fff; position: relative;left: 50%; z-index: 9999!important; visibility: hidden;
    -webkit-transform: translateX(-50%);-ms-transform: translateX(-50%); transform: translateX(-50%);opacity: 0;top: 30px;-webkit-transition: opacity .2s ease-in-out,top .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out,top .2s ease-in-out;-o-transition: opacity .2s ease-in-out,top .2s ease-in-out; transition: opacity .2s ease-in-out,top .2s ease-in-out;
    word-break: keep-all; border-radius:10px; box-shadow: rgba(113, 113, 113, 0.28) 0px 4px 7px; }
.subal:before {
    content: '';
    position: absolute; 
    left: 50%; 
    top: -8px; 
    transform: translateX(-50%); 
    border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #0C81AC; 
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%); 
    -webkit-transition: opacity .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out;
    -o-transition: opacity .2s ease-in-out; 
    transition: opacity .2s ease-in-out; }
.subal li { height:auto; text-align:center; line-height:normal;}
.subal a { display: block; color:#fff; font-size:1.4em; padding:.5em 0; margin-bottom: 5px; transition:.3s all ease; }
.subal li:hover a { font-weight: bold; }


/* footer */
.footer { clear: both;  background: #221E1F;}
.footer div.container {padding: 2em 5px 1em; color: #fff; text-align: center; position: relative;}
.footer h4 {font-size: 1.6em; font-weight: normal; margin: 0 0 1em; line-height: 1.8;}
.footer p {font-size: 1.4em; font-weight: normal; line-height: 1.8; letter-spacing: .3px;}
.footer .topBtn { position: absolute; right: 0; top: 0; z-index: 1;}




/* mymenu */
#my-menu {background-color: rgba(22, 133, 175, .5);}
#mm-0:before { height:0!important; }
#mm-1 > ul > li:hover > a.mma1 { color: #34b4c7 !important; }
.mm-btn {top:unset!important;}
.mm-menu .mm-listview>li .mm-next:after { border-color:#fff; }
.mm-navbar { display:none!important; }
.mm-panels>.mm-panel>.mm-listview { margin:0px!important;}
.mm-panels>.mm-panel.mm-hasnavbar { padding-top:0!important; }
.mm-panels > .mm-panel { padding:0; }
.mm-panels, .mm-panels>.mm-panel { z-index:9999; }
.mm-listview { margin:0; }
.mm-listview > li > a, .mm-listview > li > span { padding: 10px 10px 10px 20px; margin: 0; }
.mm-menu .mm-listview > li .mm-next:after { border-color: #fff!important;}
.mm-listview .mm-vertical .mm-panel, .mm-vertical .mm-listview .mm-panel { padding:0 0 0 10px; }
.mm-listview>li>a, .mm-listview>li>span { padding:10px 20px!important; font-size:17px; }
.mm-listview>li.mmenu-depth2>a, .mm-listview>li.mmenu-depth2>span { padding-left: 2em!important; }
.mob-login { overflow:hidden; padding:3em 0 1em; border-bottom:1px solid #eee; margin-bottom: 2em; }
.mob-login li { float:right; overflow:hidden; }
.mob-login a { display: inline-block !important; font-size: 17px !important; border: 0px !important; box-shadow: none !important; color: #f9f9f9 !important; padding: 0px 10px !important; }
.mob-login a .fa { font-size:20px!important; }
.mmenu-depth1 > a { color:#fff!important; }
.mmenu-depth2 > a { color:#c0ffb2!important; }


/* responsive */
@media (min-width:1550px) { .container { max-width:1350px; width: 100%; padding-top: 5em;} }
@media  (max-width:1499px) {
    .section .container {padding-top: 5em;}

    #gnb > li > a {font-size: 1.5em;}
    .subal {width: 10em;}
 
    header .header-right li { padding: 0 5px;}


}

@media  (max-width:1199px) {
    header .gnb-wrap {padding: 0 1em;}
    header .gnb-wrap > a > img {max-width: 15em;}
     #gnb > li > a {font-size: 1.25em;}
    .subal {width: 8em;}
    .subal a {font-size: 1.2em;}
    header .header-right li a {font-size: 1em;}
    header .header-right li:last-child { padding-left: 1em; }



}

@media (max-width:992px) {

    header .gnb-wrap { padding: 1em; justify-content: space-between;}

}

@media (max-width: 767px) {
    .direct-popup .visible-popups > .each { margin-left: 30px !important;}
    header .header-right li:first-child, header .header-right li:nth-child(2) { display: none;}
        .footer h4 { font-size: 1.3em;}
    .footer p { font-size: 1.1em;}
}