@charset "UTF-8";

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

#m-menu { position: fixed; right:-100%; width: 350px; opacity: 0.7; top: 0; bottom: 0; z-index: 1100; height: 100%; background-color: #fff; box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.3); transition-duration: 400ms; }
#m-menu .m-menu-container { height:calc(100% - 60px); overflow-y:auto; }

#m-menu a.btn-close { position: absolute; top: 5px; right: 5px; color: #aaa; overflow: hidden; z-index:2; }
#m-menu a.btn-close > div { position: relative; width: 50px; height: 50px; }
#m-menu a.btn-close > div > div { position: absolute; width: 25px; height: 2px; left: 50%; top: 50%; border-radius: 2px; background-color: #333; }
#m-menu a.btn-close > div > div:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg) scaleX(1.2); }
#m-menu a.btn-close > div > div:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg) scaleX(1.2); }

#m-menu .m-menu-login { display:flex; justify-content:center; padding:20px; border-top:1px solid #ddd; border-bottom:1px solid #ddd; margin-top:60px; }
#m-menu .m-menu-login a { flex:1; text-align:center; font-size:.875em; color:#333; }
#m-menu .m-menu-login a .icon { display:inline-block; vertical-align:middle; width:20px; height:20px; background:none center/contain no-repeat; margin-right:2px; }
#m-menu .m-menu-login a .icon.adm { background-image:url('../img/m-menu-login-adm.png'); }
#m-menu .m-menu-login a .icon.logout { background-image:url('../img/m-menu-login-logout.png'); }
#m-menu .m-menu-login a .icon.login { background-image:url('../img/m-menu-login-login.png'); }
#m-menu .m-menu-login a .icon.join { background-image:url('../img/m-menu-login-join.png'); }
#m-menu .m-menu-login a .icon.kakao { background-image:url('../img/m-menu-login-kakao.png'); }

#m-menu .item { border-bottom:1px solid #ddd; }
#m-menu .item .is_sub { display: block; position: relative; width: 100%; padding: 10px 15px; color: #333; font-size: 1.1rem; }
#m-menu .item .is_sub .fa { position: absolute; top: 15px; right: 20px; transition: all .3s ease; }
#m-menu .item .is_sub.on .fa:nth-of-type(1) { display:none; }
#m-menu .item .is_sub .fa:nth-of-type(2) { display:none; }
#m-menu .item .is_sub.on .fa:nth-of-type(2) { display:block; }

#m-menu .item .sub { display:none; background:#f8f8f8; padding:15px 0; }
#m-menu .item .sub li { }
#m-menu .item .sub > li > a { position: relative; display: block; padding: 10px 15px; color: #888; transition: all .3s ease; }
#m-menu .item .sub > li:hover > a, #m-menu .item .sub > li > a.on { color: #333; }

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

#m-menu .m-menu-bottom { position: fixed; bottom: 0; right: -100%; width:350px; align-items: center; display: flex; justify-content: space-between; background:#666; padding:20px; transition-duration: 400ms; z-index:3; }
#m-menu .m-menu-bottom a { color:#ddd; font-size:.875em; }
#m-menu .m-menu-bottom .sns-btn { display: flex; flex-wrap: wrap; justify-content: center; }
#m-menu .m-menu-bottom .sns-btn a { margin:0 5px; }

body.m-menu-on #m-menu .m-menu-bottom { right:0; }


@media (max-width: 768px) { 
	#m-menu .m-menu-login { margin-top:0; }

	#m-menu .sub a { padding:5px 15px; }
	#m-menu, #m-menu .m-menu-bottom { right:-100%; width: 80%; transition-duration: 200ms; }
}

#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; }