@charset "UTF-8";

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

#m-menu { position: fixed; top:0; right:0; bottom:100%; width: 500px; max-width:100%; overflow:hidden; padding:0 30px; z-index: 1100; transition-duration: 600ms; background: #111; }

#m-menu .logo { position:relative; height:50px; background:var(--main-color1); -webkit-mask:url('../img/logo.png') no-repeat left center/100px; mask:url('../img/logo.png') no-repeat left center/280px; }

#m-menu .m-menu-top-btns { position:absolute; top:20px; right:20px; display:flex; align-items:center; opacity:0; transition-duration: 600ms; z-index:2; }
body.m-menu-on #m-menu .m-menu-top-btns { opacity:1; }

#m-menu .m-menu-top-btns a { color:#fff; margin-right:5px; border-radius:5px; border:1px solid #fff; font-size:.75rem; padding:3px 13px; }
#m-menu .btn-close { position:relative; width:40px; height:40px; }
#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 .m-menu-list { position:relative; height:calc(100% - 175px);  overflow-y:auto; margin-top:25px; }


#m-menu .items { position:relative; }
#m-menu .item { display:flex; justify-content: space-between; border-top:1px solid rgba(255,255,255,.3); padding:20px 0; }
#m-menu .item a { height:35px; line-height:20px; }
#m-menu .item .is_sub { color:var(--main-color1); display: inline-block; position: relative; padding:5px 0; font-size:1.125rem; }
#m-menu .item .is_sub:hover, #m-menu .item .is_sub.on { color: #fff; }
#m-menu .item .is_sub.on:before { content:""; position:absolute; right:-5px; top:5px; border-radius:100%; width:5px; height:5px; background:#fff; }

#m-menu .item .sub { width:calc(100% - 160px); }
#m-menu .item .sub.on { color:#fff; }

#m-menu .item .sub .depth2-a { position: relative; color: #888; display: inline-block; padding:5px 0; }
#m-menu .item .sub .depth2-a:hover, #m-menu .item .sub .depth2-a.on { color:#fff; }
#m-menu .item .sub .depth2-a:before { content:""; position:absolute; left:0; bottom:5px; right:0; width:0; height:1px; background:#fff; transition-duration:400ms; }
#m-menu .item .sub .depth2-a:hover:before, #m-menu .item .sub .depth2-a.on:before { width:100%; }


#m-menu .m-menu-bottom-btns { display:flex; justify-content:space-between; align-items:center; margin-top:50px; height:40px; 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-bottom-btns { opacity:1; }



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


@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 { padding:15px 0; }
    #m-menu .item .is_sub { font-size:1.125rem; }
    #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 { width:calc(100% - 120px); }

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