@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 .m-menu-top { position:relative; height:70px; padding:15px; background: url("../img/logo.png") 15px center no-repeat; background-size:150px; border-bottom:1px solid #ddd; }

#m-menu a.btn-close { position: absolute; top: 10px; 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 .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:#555; padding:15px 0; }
#m-menu .item .sub li { }
#m-menu .item .sub a { position: relative; display: block; padding: 10px 15px; color: #ccc; transition: all .3s ease; }
#m-menu .item .sub a:hover, #m-menu .item.on .sub a.on { color: #fff; }

#m-menu .sns-btn { padding:30px 20px; }
#m-menu .sns-btn a { border-radius:3px; display:inline-block; width:25px; height:25px; background:none center/contain no-repeat; margin-right:5px; }
#m-menu .sns-btn a.facebook { background-image:url('../img/sns_icon_facebook_bg.jpg'); }
#m-menu .sns-btn a.kakao { background-image:url('../img/sns_icon_kakao_bg.jpg'); }
#m-menu .sns-btn a.instagram { background-image:url('../img/sns_icon_instagram_bg.jpg'); }
#m-menu .sns-btn a.twitter { background-image:url('../img/sns_icon_twitter_bg.jpg'); }
#m-menu .sns-btn a.youtube { background-image:url('../img/sns_icon_youtube_bg.jpg'); }

#m-menu .m-menu-bottom { position: fixed; bottom: 0; right: -100%; width:350px; background:#f8f8f8; border-top-style:solid; border-top-width:2px; transition-duration: 400ms; z-index:3; }
#m-menu .m-menu-login { display:flex; }
#m-menu .m-menu-login a { flex:1; border-right:1px solid #ddd; text-align:center; font-size:.875em; padding:10px 0; }
#m-menu .m-menu-login a:last-child { margin-right:0; }
#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'); }

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