@charset "UTF-8";

/********************************************************
■ Slide Menu : PC&모바일 슬라이드 메뉴 부분
********************************************************/
body.m-menu-on #m-menu { opacity:1; visibility: visible; transform:scale(1); }
body.m-menu-on { overflow:hidden; }

#m-menu { position: fixed; left:0; top:0; right:0; bottom:0; transform:scale(.8); z-index: 1100; opacity:0; visibility: hidden; text-align:center; transition-duration: 400ms; }
#m-menu:before { content:""; position:absolute; left:0; top:0; right:0; bottom:0; opacity:.95; background:#fff; }
#m-menu .m-menu-container { position:relative; padding:var(--top-height) 30px 30px; height:100%; overflow-y:auto; display:flex; flex-direction: column; align-items: center; transition-duration: 500ms; }

#m-menu .item .is_sub { position:relative; display: block; padding:5px; font-size:2rem; font-weight:500; }

#m-menu .item:hover .is_sub,
#m-menu .item.on .is_sub { color:var(--main-color1); }


#m-menu .item .is_sub.plus + .sub { height:0; opacity:0; }
#m-menu .item .sub { height:auto; opacity:1; overflow:hidden; }

#m-menu .item .sub li { display:flex; flex-direction: column; align-items: baseline; padding:0 10px; }
#m-menu .item .sub li:last-child { margin-bottom:10px; }
#m-menu .item .sub li .sub-a { position: relative; transition: all 0.3s ease; }
#m-menu .item .sub li:hover > .sub-a,
#m-menu .item .sub li.on > .sub-a { }


#m-menu .item .depth2 > li > .sub-a { margin:7px 0; font-size:1.25rem; }

#m-menu .item .depth3 .sub-a { margin:4px 0; }
#m-menu .item .depth3 .sub-a:before { content:"- "; }
#m-menu .item .depth3 li:hover .sub-a { margin-left:10px; }

body.m-menu-on #m-menu .m-menu-list { opacity:1; }

#m-menu .m-menu-container > ul { margin-top:30px; }
#m-menu .m-menu-container > ul li { opacity:0; transition-duration: 400ms; }
body.m-menu-on #m-menu .m-menu-container > ul li { opacity:1; }
body.m-menu-on #m-menu .m-menu-container > ul li:nth-child(1) { transition-delay: 600ms; }
body.m-menu-on #m-menu .m-menu-container > ul li:nth-child(2) { transition-delay: 800ms; }
body.m-menu-on #m-menu .m-menu-container > ul li:nth-child(3) { transition-delay: 1000ms; }
body.m-menu-on #m-menu .m-menu-container > ul li:nth-child(4) { transition-delay: 1200ms; }
body.m-menu-on #m-menu .m-menu-container > ul li:nth-child(5) { transition-delay: 1400ms; }
body.m-menu-on #m-menu .m-menu-container > ul li:nth-child(6) { transition-delay: 1600ms; }

#m-menu .m-menu-btns { font-size:1.125rem; line-height:1.7; }
#m-menu .m-menu-btns a { display:inline-block; text-decoration: underline; }
#m-menu .m-menu-btns a:after { content:"\f061"; display:inline-block; font-family:"Font Awesome 6 Free"; font-weight: 900; font-size:1rem; margin-left:2px; transform: rotate(-45deg); text-decoration: none; }
#m-menu .m-menu-btns a:hover { color:var(--main-color1); }


#m-menu .login-bths { align-content: flex-end; flex:1; }
#m-menu .login-bths a { opacity:.05; }
#m-menu .login-bths a:hover,
#m-menu .login-bths a.on { opacity:1; }


@media (max-width: 767px) {
	body.m-menu-on #m-menu .m-menu-container { padding:20px; }

    #m-menu .logo { height:40px; }

    #m-menu a.btn-close { width:20px; height:20px; }
    #m-menu a.btn-close:before,
    #m-menu a.btn-close:after { height:20px; margin:-10px 0 0 -1px; }

    #m-menu .m-menu-list { height:calc(100% - 125px); }
	#m-menu {padding-top: 80px;}
    #m-menu .item .is_sub { font-size:1.5rem; }
    #m-menu .item .is_sub.plus:before { width:2px; height:16px; margin:-8px 7px 0 0; }
    #m-menu .item .is_sub.minus:after { width:16px; height:2px; margin-top:-1px; }

	#m-menu .item .sub li:last-child .sub-a { margin-bottom:25px; }

	#m-menu .m-menu-btns { margin-top:30px; }
    #m-menu .family-box { --family-padding:5px 10px; }
    #m-menu .family-box .family-btn i { margin-left:15px; }
}