.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;}

.gnb li li {background: rgb(109, 109, 109);display: block;float: none;margin: 0px;padding: 0px;width: 230px;}
.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;}
.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;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 ul{height:auto;}
    .gnb ul a{line-height: 60px;font-weight: bold;font-size:11pt;}

    .mobile_view{display:none !important;}
    .header .container{align-items: center;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}
}