#btn-menu-m, #btn-menu-m span {display: inline-block;transition: all 0.4s;box-sizing: border-box;}
#btn-menu-m {position: fixed;width: 30px;height: 40px;top: 10px;right: 15px;z-index: 120;display: none;}
#btn-menu-m span {position: absolute;left: 0;width: 100%;height: 2px;background-color: #171c8f;}
#btn-menu-m.active span {background-color: #171c8f;height: 1px}
#btn-menu-m span:nth-of-type(1) {top: 8px;}
#btn-menu-m span:nth-of-type(2) {top: 16px;	width: 25px}
#btn-menu-m span:nth-of-type(3) {bottom: 13px;}
#btn-menu-m.active span:nth-of-type(1) {-webkit-transform: translateY (16px) rotate (-45deg);transform: translateY(16px) rotate(-45deg);top: 0px; background-color: #171c8f;}
#btn-menu-m.active span:nth-of-type(2) {opacity: 0;background-color: #171c8f;}
#btn-menu-m.active span:nth-of-type(3) {-webkit-transform: translateY(-23px) rotate(45deg);	transform: translateY(-23px) rotate(45deg);	bottom: 0px;background-color: #171c8f;}

@media screen and (max-width: 980px) {   
    #btn-menu-m {display: inline-block; top: 12px;}
}


#m-lnb-wrapper {position: fixed;top: 0;right: -400px;z-index: 110;max-width: 400px;	width: 100%;height: 100vh;	overflow: auto;	background-color: #fff;	opacity: 1;	box-sizing: border-box;	padding-top: 30px;padding-left: 2em;	padding-right: 1em;	transition: all 0.5s; box-shadow: -1px 0px 5px rgba(0,0,0,.3);}
#m-lnb-wrapper.on {right: 0px;}
#m-lnb .all_menu {overflow-y:auto;height: 100%;}
#m-lnb .gnb_wrap {}
#m-lnb .gnb_logo {padding: 15px 15px 20px 15px;}
#m-lnb .gnb_logo img {width: 300px;}
#m-lnb .m_util {text-align: left; margin: 30px 0 0; padding: 0 10px;}
#m-lnb .m_util li {display: inline-block; margin: 0 20px 0 7px;}
#m-lnb .m_util li a {display: block;  text-align: left; padding: 0px 10px 10px 0; color: #333; transition:.25s; font-size: 16px;}
#m-lnb .m_util li a i{margin-right: 4px; position: relative; top: 1px;}
#m-lnb .m_util li a:hover { color: #171c8f;}
#m-lnb .m_util p { padding:  0 0 0 7px; font-size: 16px; margin: 0 0 10px; color: #090043;}
#m-lnb .dep1_wrap { width: 100%;  padding: 0px 10px;}
#m-lnb .dep1_wrap .dep1_con { 
    padding: 0;
    color: #000;
}
#m-lnb .dep1_wrap .dep1_con .dep1 {display: block; height: 45px; padding-left: 10px; line-height: 45px; font-size: 16px; color: #333; border-bottom: 1px solid #dedede; font-weight: 500; position: relative; transition:0.25s;}
#m-lnb .dep1_wrap .dep1_con:first-child .dep1 {border-top: 1px solid #dedede;}
#m-lnb .dep1_wrap .dep1_con:hover .dep1,
#m-lnb .dep1_wrap .dep1_con.active .dep1 {color: #fff ; background-color: #171c8f;padding-left: 15px;}
#m-lnb .dep2_wrap { display: none; padding: 10px 0; border-bottom: 1px solid #dedede;}
#m-lnb .dep1_con.active .dep2_wrap {display: block;}
#m-lnb .dep2_wrap .dep2_con {padding: 7px 7px; }
#m-lnb .dep2_wrap .dep2_con .dep2 { display: block; font-size: 16px; padding: 0 10px; transition:0.5s; -webkit-transition:0.5s; color: #333;}
#m-lnb .dep2_wrap .dep2_con:hover .dep2,
#m-lnb .dep2_wrap .dep2_con.active .dep2 {color: #171c8f; padding-left:15px;}

#m-lnb .dep1_wrap .dep1_link .dep1{display: block; height: 45px;  padding-left: 10px;  line-height: 45px;  font-size: 16px;  color: #333;  border-bottom: 1px solid #dedede;  font-weight: 500;  position: relative;  transition: 0.25s;}
.dep1_wrap > .menu-item > a{display: block; height: 45px;  padding-left: 10px;  line-height: 45px;  font-size: 16px;  color: #333;  border-bottom: 1px solid #dedede;  font-weight: 500;  position: relative;  transition: 0.25s;}
.dep1_wrap > .menu-item > a:hover{
    background: #171c8f;
    color: #fff;
    padding-left: 15px;
}
#m-lnb .sys_menu {width: 100%;  padding:0 10px; margin: 30px 10px 0; }
#m-lnb .sys_menu li{display: block; width: 100%; margin-bottom: 10px;}
#m-lnb .sys_menu li a{font-size: 14px; color: #53565a;}
#m-lnb .sys_menu li a:hover{color: #171c8f;}

.m_lan_flag{position: absolute; right: 30px; margin-top: -1px;}
.m_lan_flag img{width: 30px; height: 21px;}
.m_lan_flag span {
    color: #333;
    transition: all .3s ease;
}
.m_lan_flag span:hover{
    color: #337ab7;
}



.lnb_wrapper .sub-menu {
    display: none;
    position: absolute; /* 필요에 따라 */
    top: 100%; /* 필요에 따라 */
    left: 0;
    z-index: 100;
    /* 부드럽게 나타나게 하고 싶으면 아래처럼 추가 가능 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
  
.lnb_wrapper .menu-item:hover .sub-menu {
    display: block;
    opacity: 1;
    visibility: visible;
}

.menu-item > .sub-menu {
   
}


.gnb_wrap .dep1_wrap .sub-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 20px;
    max-height: 0;
    overflow: hidden;
    transition: all .4s ease;
    opacity: 0;
}
  
.gnb_wrap .dep1_wrap > li.active > .sub-menu {
    max-height: 500px; /* 충분히 큰 값 */
    opacity: 1;
    border-bottom: 1px solid #dedede;  
}
  

.gnb_wrap .sub-menu > .menu-item > a {
    font-size: 16px;
    padding: 7px;
    color: #333;
    transition: all .6s ease;
}
.gnb_wrap .sub-menu > .menu-item > a:hover{
    padding-left: 10px;
    color: #171c8f;
}
.gnb_wrap .sub-menu > .menu-item:nth-child(1){
    margin-top: 20px;
}
.gnb_wrap .sub-menu > .menu-item:last-child{
    margin-bottom: 20px;
}

.gnb_wrap .dep1_wrap > .menu-item:nth-child(1) > a{
    border-top: 1px solid #dedede;
}
.gnb_wrap .dep1_wrap > .menu-item.active > a {
    background: #171c8f;
    padding-left: 20px;
    color: #fff;
}

.pd_buy{
    display: block; 
    height: 45px;  
    padding-left: 20px;  
    line-height: 45px;  
    font-size: 16px;  
    color: #333;  
    border-bottom: 1px solid #dedede;  
    font-weight: 500;  
    position: relative;  
    transition: all 0.3s ease;
}
.pd_buy:hover{
    padding-left: 30px;
    color: #fff;
    background: #171c8f;
}

@media screen and (max-width: 992px) {
    #m-lnb .gnb_logo img {width: 150px;}
}