@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; }
body.m-menu-on #m-menu:before { left:0; }

#m-menu { position: fixed; top:0; right:0; bottom:0; width:100vw; z-index: 1; overflow:hidden; opacity:0; visibility:hidden; color:#fff; display:flex; transition-duration:400ms; }
#m-menu:before { content:""; position:absolute; left:100%; top:0; right:0; bottom:0; background:#222; transition-duration:600ms; z-index:-1; }

#m-menu .m-menu-container { display:flex; justify-content:space-between; align-items:center; align-content: space-between; flex-wrap:wrap; flex:1; padding: var(--top-padding); }

#m-menu a { display:block; overflow:hidden; }
#m-menu span { display:block; transform: translateY(100%); }
body.m-menu-on #m-menu span { transform: translateY(0); }


#m-menu .title { font-size:4rem; margin-bottom:0; line-height:1; overflow:hidden; }

#m-menu .btn-close { position:relative; width:calc(var(--line-h) + 10px); height:calc(var(--line-h) + 10px); transition-duration: 300ms; --line-h:40px; --line-w:4px; }
#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: rotate(180deg); }


#m-menu .items { width:100%; max-height:calc(100vh - 250px); overflow-y:auto; overflow-x:hidden; display:flex; margin:0 auto 20px; max-width:calc(var(--main-width) + var(--top-padding)*2); }
#m-menu .item { position:relative; padding:35px 20px; flex:1; border-left: 1px solid rgba(255,255,255,.2); }
#m-menu .item:last-child { border-right:1px solid rgba(255,255,255,.2); }
#m-menu .item .is_sub { font-size:1.625rem; font-weight:700; color:#ffd413;}

#m-menu .item .sub li { margin:10px 0; }
#m-menu .item .sub .sub-a { position:relative; color: rgba(255,255,255,.8); white-space: nowrap; text-overflow: ellipsis; }
#m-menu .item .sub .sub-a:before { content:""; position:absolute; background:#fff; transition-duration: 400ms; }
#m-menu .item .sub li:hover .sub-a,
#m-menu .item .sub li.on .sub-a { color:#fff; font-weight:600; }


#m-menu .item .depth2 { margin-top:30px; }
#m-menu .item .depth2 > li > .sub-a { font-size:1.125rem; }
#m-menu .item .depth2 > li > .sub-a:before { left:0; top:50%; transform:translateY(-50%); width:4px; height:4px; border-radius: 4px; }
#m-menu .item .depth2 > li:not(:hover):not(.on) > .sub-a:before { opacity:0; }
#m-menu .item .depth2 > li:hover > .sub-a span,
#m-menu .item .depth2 > li.on > .sub-a span { padding-left:10px; transition-duration:400ms; }

#m-menu .item .depth3 { margin:5px 0 15px; }
#m-menu .item .depth3 .sub-a { display:inline-block; opacity:.5; }
#m-menu .item .depth3 .sub-a:before { left:0; bottom:0; width:100%; height:2px; border-radius: 4px; }
#m-menu .item .depth3 li:not(:hover):not(.on) .sub-a:before { width:0; }
#m-menu .item .depth3 li:hover .sub-a,
#m-menu .item .depth3 li.on .sub-a { opacity:1; }


#m-menu .m-menu-login { display:flex; width:50%; }
#m-menu .m-menu-login a { position:relative; font-size:.875em; color:rgba(255,255,255,.7); height:25px; line-height:25px; margin-right:15px; }
#m-menu .m-menu-login a:hover { color:#fff; }


#m-menu .sns { display:flex; }
#m-menu .sns a { position:relative; transition:all 400ms; width:35px; height:35px; z-index:1; }
#m-menu .sns a:before,
#m-menu .sns a:after { content:""; position:absolute; left:calc(50% - 15px); top:calc(50% - 15px); width:30px; height:30px; border-radius:99px; }
#m-menu .sns a:before { z-index:-1; }
#m-menu .sns a:after { background:none no-repeat center/22px; filter:brightness(200); }


#m-menu .sns a.kakao:after { background-image:url('../img/sns_icon_kakao_gray.png'); }
#m-menu .sns a.instagram:after { background-image:url('../img/sns_icon_instagram_gray.png'); }
#m-menu .sns a.naver:after { background-image:url('../img/sns_icon_naver_gray.png'); }
#m-menu .sns a.facebook:after { background-image:url('../img/sns_icon_facebook_gray.png'); }
#m-menu .sns a.youtube:after { background-image:url('../img/sns_icon_youtube_gray.png'); }
#m-menu .sns a.twiter:after { background-image:url('../img/sns_icon_twiter_gray.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); }


@media (max-width: 1200px) {
    #m-menu { max-width:500px; }
    #m-menu .title { font-size:2.8rem; }

    #m-menu .btn-close { --line-h:30px; }

    #m-menu .items { display:block; height:calc(100vh - 250px); max-height:none; }
    #m-menu .item { padding:10px 20px; }
    #m-menu .item .is_sub { font-size:1.5rem; }
    #m-menu .item .sub { margin:20px 0; }
}

@media (max-width: 1024px) {
	body.m-menu-on { overflow:hidden !important; height:100vh !important; }
}

@media (max-width: 767px) {
    #m-menu .title { font-size:2.5rem; }

    #m-menu .btn-close { --line-h:20px; --line-w:2px; }

    #m-menu .items { margin:30px 0; height:calc(100vh - 180px); }
    #m-menu .item { padding:5px 15px;}
    #m-menu .item .is_sub { font-size:1.375rem; }
    #m-menu .item .sub { margin:10px 0 20px; }

    #m-menu .item .sub .sub-a { font-size:1rem; }
}