#menuWrap { position : fixed; top : 0; right : -100%; width : 100%; height : 100%; background-color: rgba(0, 0, 0, 0.5); z-index : 9; transition : all .3s ease }
#menuWrap #menuPanel { width : 80%; position : fixed; top : 0; right : -100%; background-color: #fff; height : 100%; overflow : auto; transition : right .3s ease-in-out }
#menuWrap.active { right : 0 }
#menuWrap.active #menuPanel{ right : 0; }

#menuHeaderWrap { background-color: #0c66aa; padding : 1rem }
#menuHeaderWrap p { display : flex; text-align : right; margin-top : 3rem; justify-content: space-between; }
#menuHeaderWrap p span { color : #fff }
#menuHeaderWrap p a { font-size : 15px; color : rgba(255, 255, 255, 0.8)}
#menuHeaderWrap p a + a { margin-left : 10px }
#menuHeader > h1 a { display : flex; align-items: center; } 
#menuHeader > h1 span { display : block; width : 1px; height : 30px; background-color: var(--gray20); margin : 0 1rem }  
#menuHeader button { position : absolute; top : 0; right : 0; padding : 10px }
#menuHeader button svg { fill : #fff !important; width : 30px; height : 30px }
#menuPanel ul li { padding : 0 10px }
#menuPanel ul li a { display : block; padding : 15px 10px; font-weight: bold; border-bottom : 1px solid #0c66aa }

#menuToolBar {position : fixed;bottom : 0;left : 0;width : 100%;display : flex;justify-content: space-between;background-color: rgba(0, 0, 0, 0.7);}
#menuToolBar a {display : flex;flex-direction: column;align-items: center;justify-content: center;padding: 5px 10px;color : #fff;width : 33.33%;flex-grow: 1;font-size : 14px}
#menuToolBar a span { display : flex; align-items : center; justify-content: center; height : 30px }
#menuToolBar a svg { fill : #fff; width : 30px; height : 25px }



header { position : absolute; top : 0; left : 0; width : 100%; display : flex; justify-content: space-between; padding : .8rem 2rem; align-items: center } 
header > h1 a { display : flex; align-items: center; } 
header > h1 span { display : block; width : 1px; height : 30px; background-color: var(--gray20); margin : 0 1rem }  
header button img { width : 25px } 



 
footer {background-color : var(--gray5);padding: 1.5rem 1.5rem;font-size : 15px;text-align : center;margin-bottom: 50px;}  
footer * { font-size : 15px !important } 
footer img { display : block; margin : 0 auto } 
footer > a img { width : 100px; filter : grayscale(1); margin-bottom : 1rem } 
footer strong { display : block; margin : 5px 0 } 
footer .footer_sns { display : flex; align-items: center; gap : .5rem; justify-content: center; margin : 1rem 0 } 
footer .footer_sns img { max-width : 45px } 
footer .footer_link { margin-top : 2rem; border-top : 1px solid var(--gray20); padding-top : 1.5rem; margin-bottom : .7rem } 
footer .footer_link a { display : inline-block; padding : 0 .3rem } 
footer > span { display : block; font-size : 14px; margin-top : 1rem } 


#mobileMenu { display : block !important }
#mobileMenu ul {display : flex;justify-content: space-between;align-items: center;height: 50px;}
#mobileMenu ul li { flex-grow: 1; width : 33.33% }
#mobileMenu > ul > li a { display : inline-flex; align-items: center;}
#mobileMenu > ul > li a span { display : none !important }




.menu_qr_info { border-radius : 1rem; background-color: #f1f1f1; padding : 2rem; margin : 1rem }
.menu_qr_info h2 { font-size : 18px; text-align : center; }
.menu_qr_info p { font-size : 16px; text-align: center; }
.menu_qr_info strong { display : block; text-align : center; font-weight: bold; margin : 10px 0 2px 0; font-size : 18px  }
.menu_qr_info p + p { margin-top : 10px; font-size : 14px }

.menu_qr_wrap {background : url('/images/ko/ic_qr_line.png') no-repeat center center / contain;height : 200px;overflow : hidden;display: flex;padding : 1rem;justify-content: center;margin-top: 1rem;align-items: center;}
.menu_qr_wrap img { max-width : 150px; max-height : 150px; margin : 0 auto }