@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: 200ms; }
#m-menu .m-menu-container { position:relative; height:calc(100% - 60px); }
#m-menu .m-menu-container:before { content:""; position:absolute; left:0; top:135px; bottom:0; width:130px; background:#eee; }

#m-menu .m-menu-top { position:relative; height:70px; padding:15px; background: url("../img/logo.png") 15px center no-repeat; background-size:150px; }

#m-menu a.btn-close { color: #aaa; position: absolute; right:15px; top:15px; }
#m-menu a.btn-close > div { height: 40px; position: relative; width: 40px; }
#m-menu a.btn-close > div > div { background-color: #333; border-radius: 2px; height: 2px; left: 50%; position: absolute; top: 50%; width: 25px; }
#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 { position:relative; display:flex; justify-content:center; padding:20px; border-top:1px solid #ddd; border-bottom:1px solid #ddd; height:65px;font-size:.875em;  }
#m-menu .m-menu-login a { flex:1; text-align:center; font-size:.875em; color:#333; height:25px; line-height:25px; }
#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 .items { position:relative; padding:20px 0; overflow:hidden; overflow-y:auto; height:calc(100% - 132px); }
#m-menu .item { }
#m-menu .item .is_sub { width:130px; color: #333; display: block; padding:15px 20px; position: relative; z-index:2; }
#m-menu .item .is_sub > span { position: relative; }
#m-menu .item .is_sub.on { position:relative; color: #fff !important; }
#m-menu .item .is_sub.on:before { content:""; position:absolute; left:0; top:0; right:-15px; bottom:0; }

#m-menu .item .sub { display: none; position:absolute; right:0; top:20px; bottom:80px; z-index:2; width:calc(100% - 160px); }
#m-menu .item .sub.on { display: block !Important; }

#m-menu .item .sub .depth2-a { color: #888; display: block; padding:15px 5px; position: relative; transition: all 0.3s ease; }
#m-menu .item .sub .depth2-a:hover,
#m-menu .item.on .sub .depth2-a.on { color: #333; }
#m-menu .item .sub .depth2-a:hover::after,
#m-menu .item.on .sub .depth2-a.on::after { left: 0; opacity: 1; right: 0; }
#m-menu .item .sub .depth2-a span { color: #eee; }

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

#m-menu .item .depth3 { margin-top:-10px; }
#m-menu .item .depth3 .depth3-a { display:block; color:#aaa; padding:5px; }
#m-menu .item .depth3 .depth3-a:before { content:"·"; }
#m-menu .item .depth3 .depth3-a:hover { text-decoration:underline; }

#m-menu .m-menu-bottom { position: relative; align-items: center; display: flex; justify-content: space-between; padding:20px; transition-duration: 400ms; z-index:999; height:60px; }
#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; }


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