.header{position: relative;}


.gnb{position: fixed;left:0;top:0;min-width:230px;background-color: #312e27;height:100%;
    transition:0.5s all ease-in-out;transform: translateX(-250px);z-index: 111;}
.gnb.actives{transform: translateX(0);border-right: 1px solid #e3e3e3;box-shadow: 1px 1px 5px 1px rgb(0,0,0,0.2);}


.gnb ul {
    height: 50px;
    list-style: none;
    margin: 0;
    padding: 0;
}



.gnb li a {

    color: #333;
    display: block;
    font-weight: normal;
    line-height: 50px;
    margin: 0px;
    padding: 0px 20px;
    font-size: 10pt;
    text-decoration: none;
    border-bottom:1px solid #e3e3e3;color:#fff;
}

.gnb li a:hover
{
    background: rgb(71, 71, 71);
    color: #FFFFFF;
    text-decoration: none;
}

.gnb li ul {
    background: rgb(109, 109, 109);
    display: none;
    /* 평상시에는 드랍메뉴가 안보이게 하기 */
    height: auto;
    padding: 0px;
    margin: 0px;
    border: 0px;
    position: relative;
    width: 230px;
    z-index: 200;
    /*top:1em;
    /*left:0;*/
}



.gnb li li {
    background: rgb(109, 109, 109);
    display: block;
    float: none;
    margin: 0px;
    padding: 0px;
    width: 230px;
}

/*
.gnb li:hover li a {
background: none;
}
*/

.gnb li ul a {
    display: block;
    font-size: 12px;
    font-style: normal;
    margin: 0px;
    padding: 0px 10px 0px 30px;
    text-align: left;
    color: #fff;
    line-height: 40px;
}

.gnb li ul a:hover,
.gnb li ul li:hover a {
    background: rgb(71, 71, 71);
    border: 0px;
    color: #ffffff;
    text-decoration: none;
}

.gnb p {
    clear: left;
}

.gnb li a.actives{color:#fff;background-color:rgb(71, 71, 71);}



.header_menu{display:flex;justify-content: space-between}



.mobile_logo{padding:10px;max-width: 80px;}
.mobile_logo img{width:200px}


.ninja-btn3 {
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    display: inline-block;
    float: left;
    cursor: pointer;
    /*  padding: 30.285714px 31px;*/
    position:absolute;
    right:0;
    top: 30% !important;
    z-index: 2;
    top: 0;
    width: 46px;
    height: 46px;
    display:flex;
    align-items: center;
    justify-content: center;

}


.ninja-btn3 span,
.ninja-btn3 span:before,
.ninja-btn3 span:after {
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    width: 26px;
    height: 4px;
    border-radius: 5px;
    background-color: #000;
}

.ninja-btn3 span {
    position: relative;
    display: inline-block;
    float: left;
    margin-top: 0
}

.ninja-btn3 span:before,
.ninja-btn3 span:after {
    content: "";
    position: absolute;
    left: 0;
}

.ninja-btn3 span:before {
    top: -9.09090909px;
}

.ninja-btn3 span:after {
    top: 9.09090909px;
}
.ninja-btn3.active     {
    background-color: transparent;
} 

.ninja-btn3.active span {
    background-color: transparent;
}
.ninja-btn3.active span:before {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    top:0;
}
.ninja-btn3.active span:after {
    -webkit-transition-delay: 0.09s;
    -moz-transition-delay: 0.09s;
    -o-transition-delay: 0.09s;
    -msa-transition-delay: 0.09s;
    transition-delay: 0.09s;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    top:0;
}  


.mo_gnb{height:100%!important}

.pc_view_menu{display:none !important}



@media screen and (min-width:950px){
    .gnb li ul{position: absolute}

    .gnb{transform: translateX(0px);}

    .gnb li:hover ul {
        display: block !important;
    }
    .mobile_view{display:none !important;}
    .header .container{display:flex;justify-content: space-between}

    .gnb {

        border: none;
        border: 0px;
        margin: 0px;
        padding: 0px;
        font-size: 14px;
        font-weight: bold;
        background-color:#fff;
        position: static;
        width:auto;
        height:auto;
        min-width: unset
    }

    .gnb li {
        float: left;
        padding: 0px;
    }

    .gnb li a{
        text-align: center;
        color:#000;
        border-bottom:none;
    }

    .ninja-btn3{display:none !important}

    .mobile_view_menu{display:none !important}
    .pc_view_menu{display:block !important}
}