@charset "utf-8";
@import url(https://cdn.rawgit.com/openhiun/hangul/14c0f6faa2941116bb53001d6a7dcd5e82300c3f/nanumbarungothic.css);

/* reset.css */
body{font-family: 'Nanum Barun Gothic', sans-serif; font-size: 14px; line-height: 20px;}
html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, address, dl, dt, dd, ol, ul, li, fieldset, form, legend, table, caption, tbody, tfoot, thead, tr, th, td, input, select, textarea, strong {margin:0; padding:0; color:#303030;}
h1, h2, h3, h4, h5, h6{font-size:100%;}
img, fieldset{border:0px;}
table{border-collapse:collapse;}
ul, ol, li{list-style:none;}
address, em{font-style:normal;}
li img, object{vertical-align:top;}
input, select, textarea, form img{vertical-align:middle;}
a{ outline:0; text-decoration:none; border:none; color: #000;}

/* layout */

.headerWrap{
    border-top: 5px solid #000000;
   background-color: #fff;
    background-size: cover;
    width: 100%; height: 85px;
    z-index: 10;
    border-bottom: 1px solid #e0e0e0;
}

header{
    width: 80%; height: 85px;
    margin: 0 auto;
}

h1{float: left; position: absolute; top: 28px;}
h1 a img{}

.menu .bnt{
    float: right;
    cursor: pointer;
    margin-top: 17px;
    position: absolute;
    top: 5px; right: 10%;
}
.open{display: none;}


#gnb{ font-size: 19px; font-weight:400;}
#gnb>ul {
    width: 570px;
    height: 85px;
    margin: 0 auto;
}
#gnb>ul>li{
    float: left;
    margin-right: 27px;
    background: url(../images/dot.png) no-repeat right center;
    padding-right: 27px; }
#gnb>ul>li:nth-child(1) a{
    color: #E0002A;
}
#gnb>ul>li:last-child{
    background: none; 
    margin-right: 0px; 
    padding-right: 0px;
}
#gnb>ul>li>a{ 
    display: block; 
    line-height: 90px;
    color: #0f171f;
    transition: all 0.5s;
}
 #gnb>ul>li>a:hover{
    color: #E1002A;
    width: auto;
}



header .gnb_layer{
    position: absolute;
    left: 50%; margin-left: -295px;
    width: 510px;
    overflow: hidden;
    z-index: 20; /*display: none;*/
}
 .gnb_layerInner1{
    background-color: #fff;
    width: 100px; height: 180px;
     float: left;
    overflow: hidden;
    position: relative;
    opacity: 0;
}
.gnb_layerInner2{
    width: 100px; height: 180px;
    margin-left: 230px;
    background-color: #fff;
    opacity: 0;
    
}

.gnb_layerInner ul{
    float: left;
    font-size: 15px;
    padding-top: 15px;
}

.gnb_layerInner ul li{
   /* margin-bottom: 6px;*/
    line-height: 3em;
}

.gnb_layerInner a{color: #272727;}
.gnb_layerInner a:hover{color: #777; text-decoration: none;}

.gnb_layerInner .sub_m1{
    position: absolute;
    left: 20px; top: 0;
}
.gnb_layerInner .sub_m2{
    margin-left: 20px;
}



.footerWrap{
    height: 100px; width: 100%;
    background-color: #00056C;
    border-top: 1px solid #383737;    
}

.footer{
    width: 80%; margin: 0 auto;font-size: 11px; line-height: 14px; }

.footer .footLogo{
    float: left; margin-right:50px; margin-top: 0px;}
.footer .footLogo img{height: 50px;}

.footer .addrWrap p{color: #888888;line-height: 16px; margin-top: 20Px;}







@media screen and (max-width : 699px){
    
    /* layout */

    .headerWrap{
        background-size: cover;
        width: 100%; height: 60px;
    }

    header{
        width: 80%; height: 60px;
    }

    h1{float: left; position: absolute; top: 17px;}
    h1 a img{width: 80px;}
    
    .menu .bnt{display: none;}  
    .menu .open{
        display: block;
        cursor: pointer;
        float: right;
        margin-top: 10px;
        position: absolute;
        top: 3px; right: 10%;
    }
    .menu .open img{width: 80%;}


    
    .gnb_layer{
           display: none;
        }
    
    #gnb{
        float: right; 
        font-size: 17px;
        font-weight: bold;
        background-color:#fff; 
        width: 35%;
        padding: 0px;
        border: 1px solid #ddd;
        position: absolute;
        top: 64px; right: 10%;
        z-index: 222222222;
        

        -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.65);
        -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.65);
        box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.65);
        display: none;
    }
   
    #gnb ul li{
        padding-bottom: 10px;
        float: none;
    }
    
    #gnb>ul {
        width: 100px; height: 250px; 
        margin: 0 auto; text-align: center;
    }
      #gnb ul li{
        padding-bottom: 10px;
        float: none;
    }
    #gnb .gnb{ 
        width: 100px; height: 30px;
        background:none;
    }
    
 
    #gnb>ul>li>a{ 
        display: block; 
        color: #454545;
    }
     #gnb>ul>li>a:hover{ color: #454545;}
    
    

    .footerWrap{
        height: 100px; width: 100%;
        background-color: #1c1c1c;
        border-top: 1px solid #383737;    
    }

    .footer{
        width: 90%; margin: 0 auto;font-size: 11px; line-height: 14px; }

    .footer .footLogo{display: none;}
    .footer .footLogo img{height: 50px;}

    .footer .addrWrap p{color: #888888;line-height: 16px; margin-top: 20Px;}
    
}