@charset "UTF-8";

/********************************************************
■ Slide Menu : PC&모바일 슬라이드 메뉴 부분
********************************************************/
body.m-menu-on { overflow:hidden; }
body.m-menu-on #m-menu { transform:translateX(-100%); opacity:1; visibility: visible; }

#m-menu { position: fixed; top:0; left:100%; bottom:0; min-width:767px; width:var(--m-menu-w); z-index:9999; padding:var(--top-height) calc(var(--m-menu-padding)*3) 30px var(--m-menu-padding); visibility: hidden; opacity:0; display:flex; flex-direction: column; transition-duration: 800ms; --m-menu-padding:50px; --m-menu-w:50vw; }
#m-menu:before,
#m-menu:after { content:""; left:0; top:0; right:0; bottom:0; z-index:-1; }
#m-menu:before { position:fixed; background:#111; opacity:.4; }
#m-menu:after { position: absolute; background:var(--main-color3); }

#m-menu .logo { position:absolute; left:var(--m-menu-padding); top:0; width:200px; height:var(--top-height); padding:10px 0; }
#m-menu .logo img { position: relative; top:50%; transform: translateY(-50%); max-width:100%; max-height:100%; filter: grayscale(1) invert(1) brightness(100); }

#m-menu .btn-close { position:absolute; width:40px; height:40px; top:calc(var(--top-height)/2); right:var(--m-menu-padding); transform:translate(50%, -50%); z-index:9; }
#m-menu .btn-close:before,
#m-menu .btn-close:after { content:""; position:absolute; top:50%; left:50%; height:30px; width:2px; background:#fff; border-radius:2px; margin:-15px 0 0 -1px; }
#m-menu .btn-close:before { transform: rotate(45deg); }
#m-menu .btn-close:after { transform: rotate(-45deg); }

#m-menu .m-menu-container { left:0; right:0; flex:1; padding-top:50px; overflow:hidden; display:flex; justify-content: center; flex-direction: column; transition-duration:700ms; }
#m-menu .m-menu-container:before,
#m-menu .m-menu-container:after { content:""; position:absolute; background:#fff; opacity:.1; }
#m-menu .m-menu-container:before { left:0; top:var(--top-height); right:0; height:1px; }
#m-menu .m-menu-container:after { top:0; right:calc(var(--m-menu-padding)*2); bottom:0; width:1px; }


#m-menu .items { padding-left:30px; overflow:hidden; }
#m-menu .item { counter-increment:list-number; color:#fff; }
#m-menu .item:not(:last-child) { margin-bottom:40px; }

#m-menu .item > * { opacity:.5; transition-duration:400ms; }
#m-menu .item:hover > *,
#m-menu .item.on > * { opacity:1; }


#m-menu .item .is_sub { position:relative; display:inline-block; color:#fff; font-size:1.625rem; font-weight:700; margin-bottom:10px; }
#m-menu .item .is_sub span:before { content:"0" counter(list-number); position:absolute; left:-30px; top:50%; transform:translateY(-50%); color:#fff; font-size:.75rem; margin-right:15px; }

#m-menu .item .sub { display:flex; flex-wrap:wrap; }
#m-menu .item .sub .is_back { display:none; }
#m-menu .item .sub .sub-a { position:relative; color: rgba(255,255,255,.7); max-width:100px; z-index:1; }

#m-menu .item .depth2 > li { padding:5px 0; margin-right:30px; }
#m-menu .item .depth2 > li:hover > .sub-a,
#m-menu .item .depth2 > li.on > .sub-a { color:#fff; }

#m-menu .item .depth2 > li > .sub-a:after { content:""; position:absolute; left:0; top:calc(100% + 2px); width:100%; height:2px; background:#fff; transform:scaleX(0); transform-origin:right bottom; transition:transform 400ms cubic-bezier(1,0,0,1); }
#m-menu .item .depth2 > li:hover > .sub-a:after,
#m-menu .item .depth2 > li.on > .sub-a:after{ transform:scaleX(1); transform-origin:left bottom; }

#m-menu .item .depth3 { display:none; }


#m-menu .m-menu-btns { display:flex; flex-wrap: wrap; align-items: center; justify-content: right; color:#fff; margin-top:50px; font-size:.875rem; }
#m-menu .m-menu-btns a { opacity:.7; }
#m-menu .m-menu-btns a:not(:last-child):after { content:""; display:inline-block; vertical-align: middle; width:1px; height:12px; background:#fff; margin:-3px 10px 0; opacity:.7; }

@media (max-width: 1400px) {
    #m-menu .item .is_sub { font-size:1.625rem; }
}

@media (max-width: 1200px) {
    #m-menu .item .is_sub { font-size:1.375rem; }
}
@media (max-width: 1024px) {
    #m-menu { --m-menu-w:100vw; }
}
@media (max-width: 767px) {
	body.m-menu-on { height:100vh !important; overflow:hidden !important; }

    #m-menu { min-width:0; --m-menu-padding:5vw; --m-menu-w:100vw; padding-right:var(--m-menu-padding); padding-bottom:20px; }

    #m-menu .btn-close { width:25px; height:25px; transform:translate(0, -50%); }

    #m-menu .m-menu-container { position:relative; padding-top:0; max-height:calc(100vh - 50px - var(--top-height) - 20px); }
    #m-menu .m-menu-container.on { left:-50%; right:50%; overflow:visible; }
    #m-menu .m-menu-container:before,
    #m-menu .m-menu-container:after { display:none; }

    #m-menu .items { padding-left:0; display:flex; flex-direction: column; justify-content: safe center; }

    #m-menu .item { margin:10px 0 !important; opacity:1; }

    #m-menu .item .is_sub { background:none; color:#fff; margin-bottom:0; opacity:1; font-size:1.5rem; width:100%; border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 20px; }
    #m-menu .item .is_sub span:before { display:none; }
    #m-menu .item .is_sub span:after { content:""; position:absolute; left:0; right:0; bottom:0; width:0; height:1px; background:linear-gradient(to right, rgba(255,255,255,.1), #fff); transition-duration: 600ms; }

    #m-menu .item .is_sub:hover { color:var(--main-color1); }
    #m-menu .item .is_sub:hover span:after { width:100%; }

    #m-menu .item .is_sub.plus { position:relative; }
    #m-menu .item .is_sub.plus:before,
    #m-menu .item .is_sub.plus:after { content: ""; position:absolute; top:50%; right:0; width:20px; height:3px; border-radius: 3px; background:#fff; transform: translateY(-50%); margin-top:-10px; }
    #m-menu .item .is_sub.plus:after { transform:translateY(-50%) rotate(90deg); }

    #m-menu .item .sub { opacity:0; }
	#m-menu .item .sub .is_back { display:block; }
	#m-menu .item .sub .is_back a { display:flex; justify-content:center; align-items:center; width:30px; height:30px; border-radius:99px; background:#fff; color:var(--main-color1); }

	#m-menu .item .is_sub.on + .depth2 { top:0; opacity:1; visibility:visible; overflow-x: hidden; overflow-y: auto; }
	#m-menu .item .depth2 { position:absolute; left:50%; top:5%; width:100%; height:100%; justify-content:safe center; align-items:center; flex-direction:column; flex-wrap: nowrap; opacity:0; overflow:hidden; visibility:hidden; transition-duration:0ms; opacity:0; }
    #m-menu .item .depth2 > li { padding:10px 0; margin-right:0; opacity:1; }


    #m-menu .m-menu-container.on .items { overflow:visible !important; }
    #m-menu .m-menu-container.on .item .depth2 { transition-duration:700ms; }
	#m-menu .m-menu-container.on .is_sub { opacity:0; visibility:hidden; }


    #m-menu .m-menu-btns { margin-top:30px; }
}