@charset "UTF-8";

/********************************************************
■ Slide Menu : PC&모바일 슬라이드 메뉴 부분
********************************************************/
body.m-menu-on { overflow:hidden; }

body.m-menu-on #m-menu { left:0; right:0; visibility:visible; }
body.m-menu-on #m-menu:before,
body.m-menu-on #m-menu:after { left:0; right:0; }
body.m-menu-on #m-menu:after { transition-delay:600ms; }
body.m-menu-on #m-menu > div { transition-delay:1s; opacity:1; }

#m-menu { position: fixed; left:100%; top:0; right:-100%; bottom:0; z-index: 180; overflow:hidden; visibility:hidden; padding:var(--top-height) var(--top-padding) 30px; display:flex; flex-direction:column; align-items:center; }
#m-menu:before,
#m-menu:after { content: ""; left:100%; top:0; right:-100%; bottom:0; z-index:-1; transition-duration:800ms; }
#m-menu:before { position:fixed; background:var(--main-color3); }
#m-menu:after { position:absolute; background:var(--main-color1); }

#m-menu > div { width:100%; opacity:0; transition-duration:800ms; }
#m-menu .m-menu-btns { display:flex; justify-content:space-between; align-items:center; }

#m-menu .m-menu-login { display:flex; }
#m-menu .m-menu-login a { position:relative; font-size:.875em; height:25px; line-height:25px; padding-right:10px; margin-right:10px; }
#m-menu .m-menu-login a:hover { color:#000; }
#m-menu .m-menu-login a:before { content:""; position:absolute; top:50%; left:100%; width:2px; height:10px; background:#666; margin-top:-6px; }
#m-menu .m-menu-login a:last-child:before { display:none; }

#m-menu .family-box { position:relative; font-size:.875rem; --family-padding:10px 15px; }
#m-menu .family-box .family-btn { padding:var(--family-padding); border:1px solid #666; }
#m-menu .family-box .family-btn i { margin-left:20px; font-size:.75rem; transition-duration:400ms; }
#m-menu .family-box.on .family-btn i { transform:rotate(180deg); }
#m-menu .family-box .sub { position:absolute; left:0; right:0; bottom:calc(100% - 1px); opacity:0; border:1px solid #666; visibility:hidden; max-height:0; z-index:-1; transition-duration:400ms; }
#m-menu .family-box.on .sub { max-height:300px; opacity:1; visibility:visible; z-index:1; }
#m-menu .family-box .sub a { display:block; color:inherit; padding:var(--family-padding); border-bottom:1px solid #666; }
#m-menu .family-box .sub a:last-child { border:none; }
#m-menu .family-box .sub a:hover { background:#fff; color:#333; }


#m-menu .m-menu-container { flex:1; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }


#m-menu .btns { display:flex; align-items:center; justify-content:center; }
#m-menu .btns a { display:inline-block; padding:7px 25px; border:1px solid #444; margin-left:5px; font-size:.875rem; transition-duration:400ms; }
#m-menu .btns a:hover { background:#444; color:#fff; }

#m-menu .btn-close { position:relative; width:var(--btns-h); height:100%; background:#222; color:#eee; margin-left:20px; }
#m-menu .btn-close:before,
#m-menu .btn-close:after { content:""; position:absolute; top:50%; left:50%; height:40px; width:4px; background:#fff; border-radius:4px; margin:-20px 0 0 -2px; }
#m-menu .btn-close:before { transform: rotate(45deg); }
#m-menu .btn-close:after { transform: rotate(-45deg); }
#m-menu .btn-close:hover { background-color: var(--main-color1, #444) !important; color:#fff; }


#m-menu .items { overflow-y:auto; overflow-x:hidden; display:flex; align-items:center; flex-direction:column; margin-top:20px; }

#m-menu .item .is_sub { display: block; text-align:center; padding:15px 0px; font-size:1.875rem; font-weight:700; }
#m-menu .item:hover .is_sub,
#m-menu .item.on .is_sub{ color:var(--main-color2); }

#m-menu .item .sub { text-align:center; overflow:hidden; }
#m-menu .item .sub li { padding:5px 0; }

#m-menu .item .sub .sub-a { opacity:0.5; text-align:center; max-width:100px; }
#m-menu .item .sub li:hover > .sub-a,
#m-menu .item .sub li.on > .sub-a { opacity:1; font-weight:600; }

#m-menu .item .depth2 > li:first-child { margin-top:5px; }
#m-menu .item .depth2 > li:last-child { margin-bottom:20px; }
#m-menu .item .depth2 > li > .sub-a { font-size:1.25rem; }



@media (max-width: 1400px) {
    #m-menu .item .is_sub { font-size:1.5rem; }
}

@media (max-width: 1024px) {
	body.m-menu-on { height:100vh !important; overflow:hidden !important; }
}

@media (max-width: 767px) {

    #m-menu .btns a { padding:3px 10px; margin:0 2.5px; font-size:.75rem; }

    #m-menu .item .is_sub { font-size:1.25rem; padding:10px 0; }

    #m-menu .item .depth2 > li:first-child { margin-top:0; }
    #m-menu .item .depth2 > li:last-child { margin-bottom:10px; }
	#m-menu .item .depth2 > li > .sub-a { font-size:1rem; }

	#m-menu .item .depth3 .sub-a { font-size:.875rem; }
}