@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; }
#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 a.btn-close { position:relative; display:block; margin-left:auto; margin-bottom:25px; width:30px; height:30px; }
#m-menu a.btn-close:before, #m-menu a.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 a.btn-close:before { transform: rotate(45deg); }
#m-menu a.btn-close:after { transform: rotate(-45deg); }

#m-menu .items { position:relative; margin-bottom:20px; opacity:0; transition-duration: 600ms; }
#m-menu .item { }
#m-menu .item .is_sub { position:relative; color: #fff; display: block; padding:10px 0; font-size:1.875rem; font-weight:600; transition-duration:500ms; }
#m-menu .item .is_sub:hover { margin-left:10px; }
#m-menu .item .is_sub:before, #m-menu .item .is_sub:after { content:""; position: absolute; top:50%; right:0; background:#fff; }
#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:-1.5px 0 0 -10px; }

#m-menu .item .sub { display: none; }
#m-menu .item .sub.on { display: block !Important; }

#m-menu .item .sub li { display:flex; flex-direction: column; align-items: baseline; padding:0 10px; }
#m-menu .item .sub .depth2-a { color: rgba(255,255,255,.5); margin:7px 0; position: relative; transition: all 0.3s ease; }
#m-menu .item .sub .depth2-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 .sub .depth2-a:hover:before,
#m-menu .item.on .sub .depth2-a.on:before { width:100%; }
#m-menu .item .sub .depth2-a:hover, #m-menu .item .sub .depth2-a.on { color:rgba(255,255,255,.85); }

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

#m-menu .item .depth3 { }
#m-menu .item .depth3 .depth3-a { position:relative; display:block; color:rgba(255,255,255,.65); padding:5px; margin-left:10px; }
#m-menu .item .depth3 .depth3-a:before { content:"·"; position:absolute; left:-5px; top:50%; transform:translateY(-50%); }
#m-menu .item .depth3 .depth3-a:hover, #m-menu .item .depth3 .depth3-a.on { text-decoration:underline; color:rgba(255,255,255,.85); }

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


#m-menu .m-menu-login { display:flex; margin-top:50px; opacity:0; transition-duration: 600ms; transition-delay:500ms; }
#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; }

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


#m-menu-overlay { position: fixed; left: 0; top: 0; z-index: 1050; width: 100%; height: 100%; opacity: 0; display:none; }


@media (max-width: 767px) {
	body.m-menu-on #m-menu .m-menu-container { padding:20px; overflow-y:auto; }
	#m-menu a.btn-close { margin-bottom:20px; }
	#m-menu .items { margin-bottom:20px; }
	#m-menu .item .sub li:last-child .depth2-a { margin-bottom:25px; }

	#m-menu .m-menu-login { margin-top:30px; }
}