@charset "UTF-8";

/********************************************************
■ Slide Menu : PC&모바일 슬라이드 메뉴 부분
********************************************************/
body.m-menu-on { overflow:hidden; }
body.m-menu-on #m-menu { opacity:1; visibility:visible; z-index: 1100; padding:var(--top-height) 0; }


#m-menu { position: fixed; left:0; top:0; right:0; bottom:0; z-index: 1; overflow:hidden; opacity:0; background:rgba(0,0,0,.6); visibility:hidden; display:flex; justify-content: center; align-items:center; transition-duration:400ms; padding:calc(var(--top-height) - 20px) 0; }
#m-menu:before { content:""; position:absolute; left:100px; bottom:calc(var(--top-height) - 20px); width:50%; height:160px; background:url('../img/logo-menu.png') no-repeat left bottom/contain; opacity:.1; }

#m-menu .btn-close { position:absolute; top:calc(var(--top-height)/2); right:calc(var(--top-padding) - var(--line-h)/2.5); width:calc(var(--line-h)*2); height:calc(var(--line-h)*2); transform: translateY(-50%); background:var(--main-color1); border-radius: 99px; transition-duration: 300ms; --line-h:20px; --line-w:3px; }
#m-menu .btn-close:before,
#m-menu .btn-close:after { content:""; position:absolute; top:50%; left:50%; height:var(--line-h); width:var(--line-w); background:#fff; border-radius:4px; margin:calc(-1 * var(--line-h)/2) 0 0 calc(-1 * var(--line-w)/2); }
#m-menu .btn-close:before { transform: rotate(45deg); }
#m-menu .btn-close:after { transform: rotate(-45deg); }
#m-menu .btn-close:hover { transform: translateY(-50%) rotate(180deg); }


#m-menu .m-menu-container { height:100%; max-width:calc(100% - var(--top-padding)*2); width: calc(var(--main-width) + var(--top-padding)*5); padding:60px var(--top-padding); background:#fff; transition:all 600ms, border-radius 600ms 300ms; overflow-y:auto; overflow-x:hidden; display:flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; align-content: space-between; }
body.m-menu-on #m-menu .m-menu-container { border-radius:15px; }

#m-menu .m-menu-container > div { opacity:0; transition-duration: 1s; transition-delay: 0s; }
body.m-menu-on #m-menu .m-menu-container > div { opacity:1; transition-delay: 300ms; }


#m-menu .items { width:100%; display:flex; margin:50px 0; }
#m-menu .item { padding:0 20px; flex:1; text-align:center; }
#m-menu .item:not(:first-child) { border-left:1px solid rgba(0,0,0,.1); }

#m-menu .item .is_sub { font-size:1.5rem; font-weight:700; }
#m-menu .item .sub .sub-a { display:block; color: rgba(0,0,0,.8); 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-color1); }

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 { position:relative; display:block; margin:40px 0; }
    #m-menu .items:before { content:""; position: absolute; left:50%; top:0; bottom:0; background:#ddd; width:1px; }
    #m-menu .item { text-align:left; display:flex; padding:0; --sub-gap:10px; }
    #m-menu .item:not(:first-child) { border:none; }

    #m-menu .item > * { width:50%; }
    #m-menu .item .is_sub { font-size:1.25rem; margin:var(--sub-gap) 0; }
    #m-menu .item .sub { position:absolute; left:50%; top:0; margin-top:0; padding-left:30px; display:none; }
    #m-menu .item.on .sub { display:block; }
    #m-menu .item .sub li { margin:calc(var(--sub-gap)*2) 0; }

}

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

    #m-menu .sns a { width:36px; height:36px; }
    #m-menu .sns a:after { background-size:22px; }

    #m-menu .sns a.kakao:after { background-size:21px; }

    #m-menu .m-menu-login { flex-direction: column; }
    #m-menu .m-menu-login a { margin-top:5px; padding:10px 30px; }


}

@media (max-width: 767px) {
    #m-menu .btn-close { --line-h:20px; --line-w:2px; }

    #m-menu .m-menu-container { padding:20px var(--top-padding); }

    #m-menu .items { margin:10px 0 20px; }
    #m-menu .item { --sub-gap:5px; }
    #m-menu .item .sub { padding-left:25px; }

}