@charset "UTF-8";

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

#m-menu { position: fixed; top:0; right:0; bottom:100%; width: 500px; max-width:100%; z-index: 1100; overflow:hidden; transition-duration: 600ms; }
#m-menu:before { content:""; position:absolute; left:0; top:0; right:0; bottom:0; opacity:.95; background:var(--main-color4); }
#m-menu .m-menu-container { position:relative; height:100%; display:flex; flex-direction: column; justify-content:space-between; transition-duration: 500ms; }
body.m-menu-on #m-menu .m-menu-container { padding:30px; }


#m-menu .m-menu-list { position:relative; margin-bottom:20px; display:flex; flex-wrap:wrap; justify-content:space-between; opacity:0; height:calc(100% - 150px); transition-duration:600ms; }

#m-menu .logo { display:block; width:168px; height:90px; margin-bottom:20px; background:url('../img/mple_logo.png') no-repeat left center/contain; }

#m-menu .btn-close { position:relative; display:block; margin-left:auto; width:30px; height:30px; }
#m-menu .btn-close:before,
#m-menu .btn-close:after { content:""; position:absolute; top:50%; left:50%; height:30px; width:2px; background:#fff; border-radius:2px; margin:-15px 0 0 -1px; }
#m-menu .btn-close:before { transform: rotate(45deg); }
#m-menu .btn-close:after { transform: rotate(-45deg); }


#m-menu .items { width:100%; overflow-y:auto; height:100%; margin-top:40px;}
#m-menu .item .is_sub { position:relative; color: #fff; display: block; padding:10px ; font-size:1.875rem; font-weight:700; }
#m-menu .item .is_sub:before,
#m-menu .item .is_sub:after { content:""; position: absolute; top:50%; right:0; background:#fff; }

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

#m-menu .item:hover .is_sub:before,
#m-menu .item:hover .is_sub:after,
#m-menu .item.on .is_sub:before,
#m-menu .item.on .is_sub:after { background:var(--main-color5); }

#m-menu .item .is_sub.plus:before { width:3px; height:20px; margin:-10px 8.5px 0 0; }
#m-menu .item .is_sub.minus:after { width:20px; height:3px; margin-top:-1.5px; }

#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 { color: rgba(255,255,255,.5); position: relative; transition: all 0.3s ease; }
#m-menu .item .sub li:hover > .sub-a,
#m-menu .item .sub li.on > .sub-a { color:rgba(255,255,255,.95); }


#m-menu .item .depth2 > li > .sub-a { margin:7px 0; font-size:1.25rem; }
#m-menu .item .depth2 > li > .sub-a:before { content:""; position:absolute; left:0; top:100%; right:0; width:0; height:1px; background:rgba(255,255,255,.85); transition-duration: 400ms; }
#m-menu .item .depth2 > li:hover > .sub-a:before,
#m-menu .item .depth2 > li.on > .sub-a:before { width:100%; }

#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-btns { display:flex; justify-content:space-between; align-items:center; margin-top:50px; opacity:0; transition-duration: 600ms; transition-delay:500ms; }

#m-menu .m-menu-login { display:flex; }
#m-menu .m-menu-login a { position:relative; font-size:.875em; color:rgba(255,255,255,.5); height:25px; line-height:25px; padding-right:10px; margin-right:10px; }
#m-menu .m-menu-login a:hover { color:rgba(255,255,255,.85); }
#m-menu .m-menu-login a:before { content:""; position:absolute; top:50%; right:0; width:2px; height:10px; background:rgba(255,255,255,.1); margin-top:-6px; }
#m-menu .m-menu-login a:last-child:before { display:none; }

#m-menu .family-box { position:relative; font-size:.875rem; color:rgba(255,255,255,.7); --family-padding:10px 15px; }
#m-menu .family-box .family-btn { padding:var(--family-padding); border:1px solid rgba(255,255,255,.5); }
#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 rgba(255,255,255,.5); 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 rgba(255,255,255,.5); }
#m-menu .family-box .sub a:last-child { border:none; }
#m-menu .family-box .sub a:hover { background:#fff; color:#333; }

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



#m-menu-overlay { position: fixed; left: 0; top: 0; width: 100%; height:100%; background:#111; opacity: 0; visibility:hidden; z-index:-9; transition-duration:400ms; }
body.m-menu-on #m-menu-overlay { opacity:0.8; visibility:visible; }


@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 .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; }
}