@charset "UTF-8";

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

#m-menu-overlay { position:fixed; left:0; top:0; right:0; bottom:0; background:rgba(255,255,255,.7); opacity:0; width:0; z-index:99; }
body.m-menu-on #m-menu-overlay { width:100%; }

#m-menu { position: fixed; right:0; top:0; bottom:0; opacity:1; font-size:16px; z-index:1100; transition-duration:600ms; }


#m-menu a.btn-close { position:absolute; top:15px; right:25px; width:25px; height:50px; overflow:hidden; z-index:9; display:none; }
#m-menu a.btn-close.on { display:block; }
#m-menu a.btn-close div { position:absolute; width:100%; height:2px; left:50%; top:50%; border-radius:2px; background:#ddd; }
#m-menu a.btn-close div:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg) scaleX(1.2); }
#m-menu a.btn-close div:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg) scaleX(1.2); }


#m-menu .m-menu-container { display:flex; height:100%; }
#m-menu .m-menu-container .slide-box { width:400px; box-shadow:-10px 0px 15px rgba(0,0,0,.2); display:none; }
#m-menu .m-menu-container .slide-box > div { display:flex; flex-direction: column; justify-content: space-between; height:100%; }
#m-menu .m-menu-container .slide-box > div > * { opacity:0; white-space: nowrap; transition-duration:100ms; }

body.m-menu-on #m-menu .m-menu-container .slide-box > div > * { opacity:1; }

#m-menu .info { position:relative; padding:350px 40px 50px; }

#m-menu .info .logo { position:absolute; left:0; top:0; right:0; height:300px; background:#fff url('../img/logo.png') no-repeat center/160px; box-shadow:0 0 30px #ddd inset; }

#m-menu .info .sns { display:flex; }
#m-menu .info .sns li { margin-right:10px; }
#m-menu .info .sns a { display:block; width:30px; height:30px; background:none no-repeat center/contain; }
#m-menu .info .sns a.kakao { background-image:url('../img/m-menu-icon-kakao.png'); }
#m-menu .info .sns a.youtube { background-image:url('../img/m-menu-icon-youtube.png'); }
#m-menu .info .sns a.instagram { background-image:url('../img/m-menu-icon-instagram.png'); }
#m-menu .info .sns a.facebook { background-image:url('../img/m-menu-icon-facebook.png'); }
#m-menu .info .sns a.naver { background-image:url('../img/m-menu-icon-naver.png'); }
#m-menu .info .sns a.twiter { background-image:url('../img/m-menu-icon-twiter.png'); }


#m-menu .info .detail { font-size:.813em; line-height:1.6; }
#m-menu .info .detail .call { margin-bottom:60px; }
#m-menu .info .detail .copyright { color:rgba(255,255,255,.5); margin:20px 0 0; }

#m-menu .m-menu-wrap { position:relative; background:#444; height:100%; padding:50px; overflow-y:auto; z-index:2; }

#m-menu .member { position:absolute; left:50px; top:50px; display:flex; }
#m-menu .member a { height:15px; line-height:15px; padding-left:20px; margin-right:20px; background:none no-repeat left center/contain; color:#eee; font-size:.813em; opacity:.5; }
#m-menu .member a.login { background-image:url('../img/m-menu-member-login.png'); }
#m-menu .member a.join { background-image:url('../img/m-menu-member-join.png'); }
#m-menu .member a.logout { background-image:url('../img/m-menu-member-logout.png'); }
#m-menu .member a.admin { background-image:url('../img/m-menu-member-admin.png'); }
#m-menu .member a.mypage { background-image:url('../img/m-menu-member-mypage.png'); }
#m-menu .member a:hover { opacity:1; }

#m-menu .items { display:flex; flex-wrap: wrap; margin:50px -10px 0; }
#m-menu .items .item { width:50%; padding:0 10px; }
#m-menu .items .item .is_sub { display: block; position: relative; width: 100%; padding:10px 0; color: #fff; font-size: 1.25em; }

#m-menu .items .item .sub { margin-bottom:40px; }
#m-menu .items .item .sub li { }
#m-menu .items .item .sub li > a { position: relative; display:block; padding:10px 0; color:#aaa; transition: all .3s ease; }
#m-menu .items .item .sub li:hover > a, #m-menu .item .sub li > a.on { color: #ddd; }
#m-menu .items .item .sub li > a span { position:relative; display:inline-block; }
#m-menu .items .item .sub li > a span:before { content:""; position:absolute; left:0; top:100%; right:0; width:0; height:1px; background:#ddd; transition-duration:400ms; }
#m-menu .items .item .sub li > a:hover span:before { width:100%; }

#m-menu .items .item .depth3 { padding:0 5px; }
#m-menu .items .item .depth3 a { display:block; padding:0 15px 5px; color:#aaa; }
#m-menu .items .item .depth3 a:before { content:"- "; }
#m-menu .items .item .depth3 a:hover, #m-menu .item .depth3 a.on { text-decoration:underline; }


#m-menu .m-menu-wrap .links { display:flex; align-items:center; font-size:.813em; margin:30px 0 0; }
#m-menu .m-menu-wrap .links li { position:relative; color:#888; padding-right:10px; margin-right:10px; }
#m-menu .m-menu-wrap .links li:after { content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); height:10px; width:1px; background:#666; }
#m-menu .m-menu-wrap .links li:last-child:after { display:none; }
#m-menu .m-menu-wrap .links li a { color:#888; }
#m-menu .m-menu-wrap .links li a:hover { color:#aaa; }



@media (max-width: 1024px) { 
	#m-menu .info { opacity:0; visibility:hidden; }
	body.m-menu-on #m-menu .m-menu-container .slide-box:first-child { display:none !Important; }
}

@media (max-width: 767px) { 
	#m-menu { font-size:14px; }
	#m-menu a.btn-close { top:5px; }
	#m-menu .m-menu-container .slide-box { width:100%; }
}


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