@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; align-items: center; justify-content: center; transition-duration:400ms; }
#m-menu:before { content:""; position:absolute; left:100%; top:0; right:0; bottom:0; background:var(--main-color2); opacity:.99; filter:sepia(.7) brightness(var(--m-brightness)); transition-duration:600ms; z-index:-1; --m-brightness:.8; }

/*#m-menu .m-menu-container { display:flex; justify-content:space-between; align-items:center; align-content: space-between; flex-wrap:wrap; flex:1; min-height:75vh; opacity:0; max-width:var(--main-width); padding:0 var(--m-menu-padding); --m-menu-padding:var(--c-padding); }*/
#m-menu .m-menu-container {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    flex:1;
    min-height:75vh;
    opacity:0;
    max-width:var(--main-width);
    padding:0 var(--m-menu-padding);
    --m-menu-padding:var(--c-padding);
}
body.m-menu-on #m-menu .m-menu-container { opacity:1; transition: opacity .8s .4s; }

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




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

#m-menu .lang_wrap{margin-right: auto; padding-left: 30px;}
#m-menu .lang_wrap a{font-size: 0.825rem; color:#fff; border: 1px solid #fff; padding: 5px 7px 4px; display:inline-block; }
#m-menu .lang_wrap a:hover{color:#111; border: 1px solid #fff; background: #fff}


#m-menu .btn-close { position:relative; width:40px; height:40px; border-radius: 99px; background:#fff; transition-duration: 300ms; --line-h:16px; --line-w:1px; }
#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:#111; 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: grid; grid-auto-flow: column; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); margin:20px auto; --circle-size:8px; }
#m-menu .item { padding:3.5vw 1.5vw; flex:1; border-left: 1px solid transparent; }
#m-menu .item:last-child { border-right:1px solid transparent; }
#m-menu .item .is_sub { position:relative; font-size:1.625rem; font-weight:700; }
#m-menu .item .is_sub:before { content:""; position:absolute; top:0; left:0; transform:translateY(-100%); margin-top:-5px; border-radius: 99px; width:var(--circle-size); height:var(--circle-size); background:var(--main-color1); opacity:0; transition-duration: .4s; }

#m-menu .item:hover .is_sub:before,
#m-menu .item.on .is_sub:before { opacity:1; margin-top:0; }

body.m-menu-on #m-menu .item { border-color: rgba(255,255,255,.2); transition: border 400ms 500ms; }

#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:hover li:not(:hover) .sub-a { opacity:.4; }
#m-menu .item .sub li.on .sub-a span { display: inline-block; border-bottom:2px solid rgba(255,255,255,.8); }


#m-menu .item .depth2 { margin-top:30px; }
#m-menu .item .depth2 > li > .sub-a { font-size:1.125rem; }
#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: 1024px) {
    #m-menu:before { --m-brightness:.2; }
    #m-menu .m-menu-container { height:90vh; --m-menu-padding:5vw; }
    #m-menu .title { font-size:2.5rem; }

    #m-menu .items { position:relative; grid-auto-flow: row; grid-template-columns: none; align-content: flex-start; grid-auto-rows: min-content; justify-content: left; padding-left:var(--item-gap); margin-left:calc(-1 * var(--item-gap)); --item-size:200px; --item-gap:20px; }
    #m-menu .item { width:var(--item-size); padding:10px 0; border:none !important; }
    #m-menu .item .is_sub { padding:0 var(--item-gap); margin-left:calc(-1 * var(--item-gap)); }
    #m-menu .item .is_sub:before { top:50%; transform:translateY(-50%); margin-top:0px; }

    #m-menu .item .sub { position:absolute; left:calc(var(--item-size) - 5px); top:3px; margin:0 20px; opacity:0; visibility: hidden; transition-duration: .2s; }
    #m-menu .item:hover .sub { opacity:1; visibility: visible; }

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

@media (max-width: 767px) {
    #m-menu .m-menu-container { height:95vh; }
    #m-menu .title { font-size:2rem; }

    #m-menu .btn-close { width:30px; height:30px; --line-h:12px; --item-gap:15px; }

    #m-menu .items { margin:30px 0 60px; --item-size:150px; }
    #m-menu .item { padding:5px 0; }
    #m-menu .item .sub { top:-2px; }
}