@charset "utf-8";

/* ---------- #open_menu ---------- */
#om_bg { display: none; position: absolute; z-index: 999; top: 0; left: 0; width: 100%; height: 100vh; height: calc(var(--vh, 1vh) * 100); background: rgba(0,0,0,0.85); }
#open_menu { position: absolute; top: 0; right: -50%; width: 100%; max-width: 650px; height: 100%; background: #fff; }
#open_menu .top { display: flex; justify-content: flex-end; align-items: center; 
    padding: 0 var(--wrap-space); width: 100%; height: 100px; border-bottom: 3px solid var(--main-color); box-sizing: border-box; }
#open_menu .login_wrap { display: flex; }
#open_menu .btn_wrap { margin-left: 12px; display: flex; justify-content: flex-end; align-items: center; }
#open_menu .btn_wrap > * { margin-left: 7px; width: 50px; height: 50px; cursor: pointer; }

/* 1차메뉴 */
#open_menu .gnb_wrap { height: calc(100vh - 123px - 40px - 50px); height: calc(calc(var(--vh, 1vh) * 100) - 123px - 40px - 50px); overflow: auto; }
#open_menu .gnb_wrap > li { border-bottom: 1px solid var(--border-color); height: 65px; overflow: hidden; cursor: pointer; }
#open_menu .gnb_wrap > li > h2 { position: relative; padding-left: 50px; line-height: 65px; font-size: 20px; font-weight: 700; color: var(--gray-11); box-sizing: border-box; }
#open_menu .gnb_wrap > li > h2::after { position: absolute; top: 0; right: 30px; width: 26px; height: 100%; background: url(/theme/jahye/images/ico/open_g75.svg) no-repeat center/contain; display: block; content: "";  }

/* 2차메뉴 */
#open_menu .lnb_wrap { padding: 20px 0; background: var(--gray-f5); }
#open_menu .lnb_wrap > li > a > h3 { padding-left: 70px; line-height: 25px; font-size: 14px; font-weight: 400; color: var(--gray-55); box-sizing: border-box; }

/* SNS */
#open_menu .sns_wrap { display: flex; position: absolute; bottom: 30px; right: 20px; }
#open_menu .sns_wrap > a { margin: 0 5px; width: 40px; height: 40px; }

/*** click => addClass('on') ***/
#open_menu .gnb_wrap > li.on { height: auto; }
#open_menu .gnb_wrap > li.on h2::after{ transform: rotate(180deg); }
#open_menu .gnb_wrap > li,
#open_menu .gnb_wrap > li h2::after { transition-duration: 0.4s; }

/*** responsive ***/
/* 1200px or less */
@media all and (max-width: 1200px){

    /* ---------- #open_menu ---------- */
    #open_menu .top { height: 75px; }
    #open_menu .btn_wrap { margin-left: 0; }
    #open_menu .btn_wrap > * { width: 35px; height: 35px; }

    /* 1차메뉴 */
    #open_menu .gnb_wrap { height: calc(100vh - 78px - 35px - 50px); height: calc(calc(var(--vh, 1vh) * 100) - 78px - 35px - 50px); }
    #open_menu .gnb_wrap > li { border-bottom: 1px solid var(--border-color); height: 65px; overflow: hidden; cursor: pointer; }
    #open_menu .gnb_wrap > li > h2 { position: relative; padding-left: 50px; line-height: 65px; font-size: 20px; font-weight: 700; color: var(--gray-11); box-sizing: border-box; }
    #open_menu .gnb_wrap > li > h2::after { position: absolute; top: 0; right: 30px; width: 26px; height: 100%; background: url(/theme/jahye/images/ico/open_g75.svg) no-repeat center/contain; display: block; content: "";  }

    /* 2차메뉴 */
    #open_menu .lnb_wrap { padding: 20px 0; background: var(--gray-f5); }
    #open_menu .lnb_wrap > li > a > h3 { padding-left: 70px; line-height: 25px; font-size: 14px; font-weight: 400; color: var(--gray-55); box-sizing: border-box; }

    /* SNS */
    #open_menu .sns_wrap > a { width: 35px; height: 35px; }
}
/* 767px or less */
@media all and (width <= 767px){
   /* ---------- #open_menu ---------- */
    #open_menu .top {  height: 70px; }
    #open_menu .btn_wrap > * { width: 30px; height: 30px; }

    #open_menu .gnb_wrap { height: calc(100vh - 73px - 25px - 30px); height: calc(calc(var(--vh, 1vh) * 100) - 73px - 25px - 30px); }
    #open_menu .gnb_wrap > li { height: 60px; }
    #open_menu .gnb_wrap > li > h2 { padding-left: var(--wrap-space); line-height: 60px; font-size: 17px; }
    #open_menu .gnb_wrap > li > h2::after { right: var(--wrap-space); width: 26px; }
    #open_menu .lnb_wrap > li > a > h3 { padding-left: 40px; font-size: 13px; }

    #open_menu .sns_wrap { bottom: 15px; right: 15px; }
    #open_menu .sns_wrap > a { width: 25px; height: 25px; }
}