@charset "utf-8";
* { margin:0; padding:0; }
body,html { 
    width:100%; 
    height:100%; 
    font-family:'Nanum Square';
    overflow-x:hidden; 
    -ms-overflow-style:none; 
}
::-webkit-scrollbar { display:none; }
ul { list-style:none; }
a { text-decoration:none; }
button, input, label, a { 
    border:0; 
    outline:0; 
}
img { border:0; }
a, img, span { display:block; }
#left { 
    width:200px; 
    height:100%; 
    position:fixed; 
    top:0; 
    left:0; 
    background:#333; 
    z-index:10; 
}
.logo { 
    width:150px;
    height:60px;
    margin:30px auto;
    background:url("./image/logo.png");
    background-size:100%;
    background-repeat:no-repeat;
}
.logo:hover {
    background:url(./image/logo-green.png);
    background-size:100%;
    background-repeat:no-repeat;
}
.open {
    width:30px;
    height:30px;
    position:absolute;
    top:25px;
    right:14px;
    display:none;
}
.open span {
    width:20px;
    height:2px;
    margin:8px;
    background:#fff;
}
.open span:before {
    content:"";
    width:20px;
    height:2px;
    margin: 8px 0;
    background:#fff;
    display:block;
    position: absolute;
    top: -8px;
}
.open span:after {
    content:"";
    width:20px;
    height:2px;
    margin:8px 0px;
    background:#fff;
    display:block;
    position: absolute;
}
#gnb { 
    clear:both; 
    margin-top:30px; 
}
#gnb div { 
    line-height:42px; 
}
#gnb a { 
    color:#f1f1f1;
    line-height:42px; 
    text-indent:25px; 
}
#gnb ul li {
    position:fixed;
    left:0;
    top:0; 
    left:200px;
    z-index:9;
    transition:0.7s;
}
.sub {
    width:160px;
    margin-left:20px;
    display:none;
}
.menu {
    width:200px; 
    height:100%; 
    position:fixed; 
    top:0; 
    left:0; 
    background:rgba(0, 0, 0,0.5); 
    z-index:8;
    transition:0.7s;
}
.sub li, .sub li a {
    line-height:32px;
}
#gnb a:hover {
    color:#7ead51;
    font-weight:900;
}
#gnb a:hover .sub li {
    top:0; 
    left:200px;
}
#gnb a:hover .menu {
    left:200px;
}

#ft { 
    width:200px; 
    position:fixed; 
    bottom:0; 
    left:0; 
    z-index:11; 
}
#fnb { 
    clear:both; 
    border-top:1px solid #ececec; 
}
#fnb li { 
    float:left; 
    width:33.3333%; 
    line-height:40px;
}
#fnb li a { 
    line-height:40px; 
    color:#ececec; 
    text-align:center;
    font-size:.8em;
}
.copyright { 
    padding:15px; 
    color:#fff; 
    font-size:0.75em; }
.copy { padding-top:35px; text-align:center; }


#content {width: calc(100% - 200px);float:right;}