@charset "UTF-8";

/********************************************************
■ Slide Menu : PC&모바일 슬라이드 메뉴 부분
********************************************************/
body.m-menu-on { overflow:hidden; }
body.m-menu-on #top:before,
body.m-menu-on #menu { display:none !important; }
body.m-menu-on #m-menu { bottom:0; opacity:1; visibility:visible; z-index: 180; }


#m-menu { position: fixed; left:0; top:0; right:0; bottom:100%; z-index: 1; overflow:hidden; opacity:0; background:rgba(0,0,0,.6); visibility:hidden;  transition-duration:600ms; padding-top:var(--top-height); background:#000; }

#m-menu .m-menu-container { padding:0 var(--top-padding); color:#fff; display:flex; align-items: center; height:100%; opacity:0; transition: opacity 400ms 400ms; }
body.m-menu-on #m-menu .m-menu-container { opacity:1; }

#m-menu .items { width:100%; padding:30px 0; margin-bottom:calc(var(--top-height)/2); overflow-y:auto; overflow-x:hidden; max-height:calc(100% - var(--top-height)/2); display:flex; }
#m-menu .item { padding:0 20px; flex:1; text-align:center; }

#m-menu .item .is_sub { position:relative; font-size:1.875rem; font-weight:700; }
#m-menu .item .is_sub:before { content: ""; position: absolute; left:50%; top:-30px; width:10px; height:10px; transform: translateX(-50%); background:var(--main-color2); border-radius: 99px; opacity:0; transition-duration: 300ms; }
#m-menu .item:hover .is_sub:before { top:-20px; opacity:1; }

#m-menu .item .sub .sub-a { display:block; color: rgba(255,255,255,.5); white-space: nowrap; text-overflow: ellipsis; transform:translateY(100%); opacity:0; }
#m-menu .item .sub li:hover > .sub-a,
#m-menu .item .sub li.on > .sub-a { color:var(--main-color2); }

body.m-menu-on #m-menu .item .sub .sub-a { transform:translateY(0); opacity:1; }


#m-menu .item .depth2 { margin-top:30px; }
#m-menu .item .depth2 > li { margin:15px 0; }
#m-menu .item .depth2 > li > .sub-a { font-size:1.125rem; }

#m-menu .item .depth3 { margin:5px 0 10px; }
#m-menu .item .depth3 li { margin:10px 0; }
#m-menu .item .depth3 .sub-a:before { content:"- "; }


#m-menu .sns { display:flex; --icon-size:40px; }
#m-menu .sns a { position:relative; transition:all 400ms; width:42px; height:42px; z-index:1; }
#m-menu .sns a:before,
#m-menu .sns a:after { content:""; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); border-radius:99px; }
#m-menu .sns a:before { z-index:-1; width:0; height:0; transition-duration: 200ms; }
#m-menu .sns a:after { background:none no-repeat center/26px; width:var(--icon-size); height:var(--icon-size); }
#m-menu .sns a:hover:before { width:var(--icon-size); height:var(--icon-size); }
#m-menu .sns a:hover:after { filter:brightness(200); }

#m-menu .sns a.kakao:after { background-image:url('../img/sns_icon_kakao.png'); background-size:25px; }
#m-menu .sns a.instagram:after { background-image:url('../img/sns_icon_instagram.png'); }
#m-menu .sns a.naver:after { background-image:url('../img/sns_icon_naver.png'); }
#m-menu .sns a.facebook:after { background-image:url('../img/sns_icon_facebook.png'); }
#m-menu .sns a.youtube:after { background-image:url('../img/sns_icon_youtube.png'); }
#m-menu .sns a.twiter:after { background-image:url('../img/sns_icon_twiter.png'); }

#m-menu .sns a.kakao:hover:before { background:var(--kakao-color); }
#m-menu .sns a.kakao:hover:after { filter:brightness(200) invert(1); }

#m-menu .sns a.instagram:hover:before { background:var(--instagram-color); }
#m-menu .sns a.naver:hover:before { background:var(--naver-color); }
#m-menu .sns a.facebook:hover:before { background:var(--facebook-color); }
#m-menu .sns a.youtube:hover:before { background:var(--youtube-color); }
#m-menu .sns a.twiter:hover:before { background:var(--twiter-color); }


#m-menu .m-menu-login { display:flex; }
#m-menu .m-menu-login a { position:relative; font-size:.875em; color:rgba(0,0,0,.7); border-radius:5px; background:#eee; text-align:center; padding:15px 50px; margin-left:10px; font-weight:600; }
#m-menu .m-menu-login a:before { content:""; display:inline-block; vertical-align: middle; margin-right: 3px; width:16px; height:16px; background:var(--main-color1); mask:none no-repeat center/contain; transition-duration: 300ms; }
#m-menu .m-menu-login a.login:before { mask-image:url('../img/m-menu-icon-login.png'); }
#m-menu .m-menu-login a.logout:before { mask-image:url('../img/m-menu-icon-logout.png'); }
#m-menu .m-menu-login a.admin:before { mask-image:url('../img/m-menu-icon-admin.png'); }
#m-menu .m-menu-login a.join:before { mask-image:url('../img/m-menu-icon-join.png'); }

#m-menu .m-menu-login a:hover { background:var(--main-color1); color:#fff; }
#m-menu .m-menu-login a:hover:before { background:#fff; }



@media (max-width: 1200px) {
    #m-menu .m-menu-container { padding:30px calc(var(--top-padding)*2); }

    #m-menu .items { display:block; }
    #m-menu .item { text-align:left; padding:25px 0; }
    #m-menu .item:not(:last-child) { border-bottom:1px solid rgba(255,255,255,.1); }

    #m-menu .item .is_sub { font-size:1.5rem; }
    #m-menu .item .is_sub:before { left:100%; top:-20px; transform:translateX(0); }
    #m-menu .item:hover .is_sub:before { top:-10px; }

    #m-menu .item .sub li { margin:0; width:25%; }

	#m-menu .item .depth2 { margin-top:10px; display:flex; flex-wrap:wrap; }
}

@media (max-width: 1024px) {
    #m-menu .m-menu-container { padding:20px calc(var(--top-padding)*2); }
}

@media (max-width: 767px) {
    #m-menu .m-menu-container { padding:20px var(--top-padding); }

    #m-menu .item .sub li { width:33.33%; }
}