@charset "utf-8";

/* ---------- #open-menu ---------- */
#om-bg { padding-top: env(safe-area-inset-top);
	padding-top: constant(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
	padding-left: constant(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
	padding-right: constant(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom); 
	padding-bottom: constant(safe-area-inset-bottom);
    opacity: 0; visibility: hidden; transition: opacity 0s, visibility 0s;
    position: fixed; 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; transition: right 0.5s; }
#open-menu .top { padding: 12px 0; height: 80px; background: #fff; box-sizing: border-box; border-bottom: 2px solid var(--mc); }  
#open-menu .top .container-xxl { display: flex; justify-content: space-between; align-items: flex-start; height: 100%; }
#open-menu .logo { flex-shrink: 0; width: 250px; height: 100%; }  
#open-menu .logo > a { display: block; width: 100%; height: 100%; }  
#open-menu .right { height: 100%; display: flex; justify-content: flex-end; align-items: center; }  
#open-menu .login-wrap { display: flex; justify-content: space-between; align-items: center; }
#open-menu .login-wrap > li { flex-shrink: 0; position: relative; padding: 0 10px; }
#open-menu .login-wrap > li.line::after { position: absolute; top: 6px; left: 0px; width: 1px; height: 10px; background: var(--gray-bd); display: block; content: ""; }
#open-menu .login-wrap > li > a { font-size: 13px; font-weight: 400; color: var(--gray-61); }
#open-menu .btn-wrap { display: flex; justify-content: flex-end; align-items: center; }
#open-menu .btn-wrap > li > * { display: block; width: 40px; height: 100%; margin-left: 10px; cursor: pointer; }

/* 메뉴*/
#open-menu::after { position: absolute; bottom: 30px; right: 30px; width: 406px; height: 348px; background: url(/theme/gospelch_2024/images/img/symbol.png) no-repeat center/contain; display: block; content: ""; }
#open-menu .gnb { height: calc(100vh - 80px); height: calc(calc(var(--vh, 1vh) * 100) - 80px); display: flex; align-items: flex-start; }
#open-menu .gnb > li { padding: 30px; width: 20%; height: 100%; box-sizing: border-box; }
#open-menu .gnb > li:nth-child(2n+1) { background: #FAFAFA; }
#open-menu h2 { font-size: 20px; font-weight: 700; color: var(--mc); }
#open-menu h3 a, #open-menu .sub-h3 { margin: 20px 0 0 20px; font-size: 17px; font-weight: 500; color: var(--gray-55); display: block; }
#open-menu h4 { margin: 10px 0 0 40px; font-size: 15px; font-weight: 500; color: var(--gray-75); }


/*** responsive ***/
/* 1200px or less */
@media all and (max-width : 1200px){
    #open-menu { max-width: 650px; }
    #open-menu .top { padding: 15px 0; height: 70px; border-bottom: 2px solid var(--mc); }  
    #open-menu .logo { width: auto; height: 100%; }   
    #open-menu .login-wrap > li > a { font-size: 12px; }
    #open-menu .btn-wrap > li:nth-child(1) { display: none; }
    #open-menu .btn-wrap > li:nth-child(2) { display: none; }
    #open-menu .btn-wrap > li > * { width: 34px; margin-left: 7px; }

    /* 메뉴*/
    #open-menu > .container-xxl { padding: 0 !important; }
    #open-menu::after { display: none; }
    #open-menu .gnb { height: calc(100vh - 70px); height: calc(calc(var(--vh, 1vh) * 100) - 70px); display: block; overflow: auto; }
    #open-menu .gnb > li { padding: 0; width: 100%; /*height: 61px;*/ height: auto; max-height: 61px; background: transparent; overflow: hidden; }
    #open-menu .gnb > li:nth-child(2n+1) { background: transparent; }
    #open-menu h2 { position: relative; padding-left: 25px; line-height: 60px; color: var(--gray-11); border-bottom: 1px solid var(--border-01); }
    #open-menu h2::after { position: absolute; top: 0; right: 18px; width: 26px; height: 100%; background: url(/theme/gospelch_2024/images/ico/arr_bottom_g75.svg) no-repeat center/contain; display: block; content: ""; }
    #open-menu h3 { position: relative; margin: 0; border-bottom: 1px solid var(--border-01); }
    #open-menu h3 a { margin: 0; padding-left: 45px; line-height: 45px; }
    #open-menu .sub-h3 { position: relative; margin: 0; padding-left: 45px; line-height: 45px; }
    #open-menu .sub-h3::after { position: absolute; top: 0; right: 28px; width: 26px; height: 100%; background: url(/theme/gospelch_2024/images/ico/arr_bottom_g75.svg) no-repeat center/contain; display: block; content: ""; }
    #open-menu h4 { margin: 0; padding-left: 65px; line-height: 30px; }
    #open-menu .sub { background: var(--gray-f5); box-shadow: inset 0 2px 10px 0 rgba(0,0,0,0.05); }
    #open-menu .sub h4:first-child { padding-top: 10px; }
    #open-menu .sub h4:last-child { padding-bottom: 10px; border-bottom: 1px solid var(--border-01); }

    #open-menu .gnb > li.on { /*height: auto;*/ max-height: 100%; }
    #open-menu .gnb > li.on h2 { background: var(--mc); color: #fff; }
    #open-menu .gnb > li.on h2::after { transform: rotate(180deg); background: url(/theme/gospelch_2024/images/ico/arr_bottom_ff.svg) no-repeat center/contain; transition-duration: 0.4s; }

    #open-menu .sub-wrap  { max-height: 46px; overflow: hidden; transition-duration: 0.4s; }
    #open-menu .sub-wrap.on { max-height: 360px; overflow: hidden; }
    #open-menu .sub-wrap.on .sub-h3::after { transform: rotate(180deg); }
}


/* 767px or less */
@media all and (max-width : 767px){
    #open-menu { max-width: 90%; }
    #open-menu .top { padding: 10px 0; height: 56px; }  
    #open-menu .btn-wrap > li > * { width: 28px; margin-left: 5px; }

    /* 메뉴*/
    #open-menu .gnb { height: calc(100vh - 56px); height: calc(calc(var(--vh, 1vh) * 100) - 56px); }
    #open-menu .gnb > li { max-height: 51px; }
    #open-menu h2 { padding-left: 20px; line-height: 50px; font-size: 17px; }
    #open-menu h2::after { right: 15px; top: -2px; }
    #open-menu h3::after { right: 25px; }
    #open-menu h3 a, #open-menu .sub-h3 { padding-left: 30px; line-height: 40px; font-size: 15px; }
    #open-menu h4 { padding-left: 40px; line-height: 30px; font-size: 13px; }
    #open-menu .sub h4:first-child { padding-top: 5px; }
    #open-menu .sub h4:last-child { padding-bottom: 5px; }
    
    #open-menu .gnb > li.on { max-height: 100%; }

    #open-menu .sub-wrap  { max-height: 41px; overflow: hidden; transition-duration: 0.4s; }
    #open-menu .sub-wrap.on { max-height: 360px; overflow: hidden; }
    #open-menu .sub-wrap.on .sub-h3::after { transform: rotate(180deg); }
}



/* 575px or less */
@media all and (max-width : 575px){
    #open-menu .top .container-xxl { justify-content: flex-end; }  
    #open-menu .logo { display: none;}   
}