@charset "UTF-8";

/********************************************************
■ Slide Menu : PC&모바일 슬라이드 메뉴 부분
********************************************************/
body.m-menu-on { overflow:hidden; }
body.m-menu-on #m-menu { opacity:1; visibility: visible; transition-delay: 0ms; }
body.m-menu-on #m-menu:before { transform: translateY(50%) scale(200); }

#m-menu { position: fixed; top:0; left:0; right:0; bottom:0; z-index:180; visibility: hidden; opacity:0; transition-delay: 500ms; }
#m-menu:before { content:""; position:absolute; right:var(--top-padding); bottom:calc(100% - var(--top-height)/2); width:25px; height:25px; border-radius: 100%; background:var(--main-color3); transition-duration: 700ms; transform: translateY(50%) scale(0.1); }


#m-menu .m-menu-container { position:absolute; left:0; top:0; right:0; bottom:0; display:flex; align-items:center; opacity:0; transition-duration:700ms; z-index:1; }
#m-menu .m-menu-container:before { content:""; position:fixed; left:0; top:0; right:0; bottom:0; background:url('../img/sub-visual-01.jpg') no-repeat center/cover; z-index:-1; opacity: .1; }
body.m-menu-on #m-menu .m-menu-container { opacity:1; transition:all 700ms, opacity 700ms 600ms; }


#m-menu .items { width:100%; display:flex; counter-reset:list-number; margin-top:var(--top-height); max-height:calc(100% - var(--top-height));  overflow-y:auto; overflow-x:hidden; margin-top: -30px; }
#m-menu .item { flex:1; counter-increment:list-number; color:#fff; display:flex; flex-direction:column; align-items:center; }
#m-menu .item:not(:last-child) { border-right:1px solid rgba(255,255,255,.1); }

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



#m-menu .item .is_sub { color:#fff; display: block; font-size:1.875rem; font-weight:700; margin-bottom:30px; }
#m-menu .item .is_sub:before { content:"0" counter(list-number); display:block; color:var(--main-color2); font-size:1.375rem; text-align:center; margin-bottom:15px; }

#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:10px 0; }
#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 { margin-top:5px; }
#m-menu .item .depth3 .sub-a { font-size:.875rem; padding:5px; }
#m-menu .item .depth3 .sub-a:before { content:"- "; }

#m-menu .item .depth3 li:hover .sub-a,
#m-menu .item .depth3 li.on .sub-a { color:var(--main-color2); }



@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) {
	body.m-menu-on { height:100vh !important; overflow:hidden !important; }
    body.m-menu-on #m-menu:before { transform: translateY(50%) scale(100); }

	#m-menu .m-menu-container.on { left:-50%; right:50%; }

    #m-menu .items { flex-direction:column; margin-top:0; }
    #m-menu .item { margin:10px 20px; }
    #m-menu .item:not(:last-child) { border:none; }


    #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 { 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:before { 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 .m-menu-container.on .items { padding:0; overflow:hidden !important; }
	#m-menu .m-menu-container.on .is_sub { opacity:0; visibility:hidden; }

	#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%; display:flex; justify-content:safe center; align-items:center; flex-direction:column; opacity:0; overflow:hidden; visibility:hidden; transition-duration:700ms; }
	#m-menu .item .depth3 { display:none; }
}