/****************
 모바일 메뉴
****************/
.m_menu_wrap{display:none;}

@media screen and (max-width:1024px){
  .m_menu_wrap{display:block; position:fixed; top:11rem; right:-100%; width:100%; height:calc(100% - 11rem); background-color:#fff; z-index:900; transition:transform 0.3s ease-in-out;}
  .m_menu_wrap.opened{transform:translateX(-100%);}
  .m_menu_area{height:calc(100% - 9.6rem); overflow-x:hidden; overflow-y:auto;}

  /* 사용자 정보 */
  .util{display:flex; align-items: center; justify-content: space-between; min-height:9.6rem; padding:1.5rem 3.5rem; font-size:2.8rem; font-weight:500; border-bottom:0.8rem solid #eff1f6;}
  .util p{width:40rem; word-break: break-all;}
  .util .user{margin-right:1rem; font-size:3.4rem;}
  .util .btns{display: flex;}
  .util .btns a{line-height:1;}
  .util .btns a+a{margin-left:4rem;}

  /* 메뉴 하단 링크 */
  .gnb_other_link{padding:4rem 5.4rem; border-top:1px solid #e4e6eb; letter-spacing: -0.2rem;}
  .gnb_other_link .links li{float:left; width:26rem; margin-bottom:2.4rem;}
  .gnb_other_link .links li:nth-of-type(2n+1){clear:left;}
  .gnb_other_link .links a{display:block; font-size:2.4rem; font-weight:500; color:#767676; line-height:1;}

  .gnb_other_link .gnb_sns{display:flex; margin-top:0.8rem;}
  .gnb_other_link .gnb_sns li+li{margin-left:2.5rem;}
  .gnb_other_link .gnb_sns a{display:block; width:5.6rem;}
  .gnb_other_link .gnb_sns a img{width:100%;}

  /* 주요메뉴 */
  .m_gnb{display:flex;}

  /* 좌측 1depth 메뉴 */
  .m_menu_depth01{display:flex; flex-direction: column; width:21.5rem; border-right:1px solid #e4e6eb;}
  .btn_inner{display:flex; flex-direction: column; align-items: center; justify-content: center; position:relative; text-align:center; z-index:1;}

  .m_menu_depth01_top{padding:1.5rem 0;}
  .m_menu_depth01_top button{display:block; position:relative; width:13.8rem; height:13.8rem; margin:0 auto; padding-top:0; padding-left:0; font-size:2.8rem; line-height:1;}
  .m_menu_depth01_top button:before{content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; border-radius: 50%; background-color: #eff1f6; transform:scale(0); transition:all 0.2s ease; opacity: 0; z-index:-1;}
  .m_menu_depth01_top button img{display:block; width:6.6rem; margin-bottom:1.5rem;}
  .m_menu_depth01_top button.on:before{transform:scale(1); opacity:1;}
  .m_menu_depth01_top li+li{margin-top:2rem;}

  .m_menu_depth01_bottom{flex:1; padding:2rem 0.6rem; background-color:#eff1f6;}
  .m_menu_depth01_bottom a,
  .m_menu_depth01_bottom button{display:flex; align-items: center; justify-content: center; position:relative; width:100%; height:11.4rem; font-size:2.4rem; text-align: center; font-weight:500; line-height:1; border-radius:0.5rem; transition:all 0.2s ease;}

  .m_bottom_btn_my:before{content:""; display:block; width:4rem; height:4.2rem; margin-bottom:1.5rem; background:url(../img/ico_m_quick06.png) no-repeat top left / 9rem 4.2rem;}
  .m_bottom_btn_company:before{content:""; display:block; width:4rem; height:4.2rem; margin-bottom:1.5rem; background:url(../img/ico_m_quick02.png) no-repeat top left / 9rem 4.2rem;}
  .m_bottom_btn_quick:before{content:""; display:block; width:4rem; height:1.6rem; margin-bottom:1.5rem; background:url(../img/ico_m_quick05.png) no-repeat top left / 9rem 1.6rem;}

  .m_menu_depth01_bottom a img,
  .m_menu_depth01_bottom button img{width:4rem; margin-bottom:1.5rem;}
  .m_menu_depth01_bottom button.on{color:#4E83EB;}

  .m_menu_depth01_bottom button.on .m_bottom_btn_my:before,
  .m_menu_depth01_bottom button.on .m_bottom_btn_company:before,
  .m_menu_depth01_bottom button.on .m_bottom_btn_quick:before{background-position:top right;}

  /* 우측 2depth 메뉴 */
  .m_menu_depth02{width:calc(100% - 21.5rem); padding:4.8rem 5.5rem; font-size:2.8rem;}
  .m_menu_depth02 a{display:flex; align-items: center; width:100%; height:4.8rem; font-size:3.3rem;}
  .m_menu_depth02 li{margin-top:0;}
  .m_menu_depth02 li+li{margin-top:4rem;}
  .m_menu_depth02 .ico_menuType{margin-left:1.5rem;}
  .m_menu_depth02 .ico_menuType+.ico_menuType{margin-left:0.5rem;}

  .m_menu_depth02 .depth02 .on{color:#5186EE; font-weight:700;}

  .depth02_item{display:none;}
  .depth02_item.on{display:block; opacity:0; animation:mMenu_show 0.3s ease-in-out alternate forwards;}

  @keyframes mMenu_show {
    0%{
      opacity:0;
      transform:translateX(3rem);
    }
    100%{
      opacity:1;
      transform:translateX(0);
    }
  }

  /* quick menu 2depth */
  .m_quick_subdepth_group+.m_quick_subdepth_group{margin-top:4rem;}
  .m_quick_subdepth_group ul{display:none; padding-left:1rem;}
  .tit_quick_subdepth_group{position:relative; width:100%; margin-bottom:1.2rem; padding-bottom:1.5rem; font-size:2.8rem;}
  .tit_quick_subdepth_group:before{content:""; display: block; position:absolute; bottom:0; left:0; width:100%; height:1px; background-color:#222; opacity:0; transform:scaleX(0); transition:transform 0.2s ease-in-out;}
  .tit_quick_subdepth_group:after{content:""; display: block; position:absolute; top:calc((100% - 2rem) / 2); right:0.1rem; width:2.7rem; height:1.5rem; background:url(../img/ico_gnb_arrow_m.png) no-repeat top left / contain; transform:translateY(-50%);}
  .tit_quick_subdepth_group.on:before{transform:scaleX(1); opacity:1;}
  .tit_quick_subdepth_group.on:after{transform:rotate(180deg);}
  .tit_quick_subdepth_group.on+ul{display:block; margin-top:2rem;}
}

/**********************************
   모바일 메뉴 - 모바일에서만 노출
**********************************/
.m_direct_menu{display:none;}

@media screen and (max-width:767px){
  .m_direct_menu{display:flex;}
  .m_direct_menu select{padding:2.9rem 10rem 2.9rem 5rem; font-size:3.2rem; line-height: 1; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden; border:1px solid #cbcbcb; background:url(../img/ico_dropdown_arrow_footer.png) no-repeat right 5rem center / 1.6rem 1.6rem; -webkit-appearance: none; appearance: none;}
  .m_direct_menu .m_direct_depth01{flex:1;}
  .m_direct_menu .m_direct_depth02{width:62%; border-left:0;}
}