@charset "UTF-8";

/********************************************************
■ Slide Menu : PC&모바일 슬라이드 메뉴 부분
********************************************************/
body.m-menu-on { overflow:hidden; }
body.m-menu-on #m-menu { bottom:0; }

#m-menu { position: fixed; top:0; left:0; right:0; bottom:100%; z-index:180; overflow:hidden; transition:bottom 1s, background 300ms; background:var(--m-menu-bg) no-repeat center/cover; --m-menu-bg:url('../img/sub-visual-01.jpg'); }

/* 클래스 숫자에 맞춰서 비주얼이미지 업로드 후 숫자도 변경 */
#m-menu.bg1 { --m-menu-bg:url('../img/sub-visual-01.jpg'); }
#m-menu.bg2 { --m-menu-bg:url('../img/sub-visual-02.jpg'); }
#m-menu.bg3 { --m-menu-bg:url('../img/sub-visual-01.jpg'); }
#m-menu.bg4 { --m-menu-bg:url('../img/sub-visual-02.jpg'); }
#m-menu.bg5 { --m-menu-bg:url('../img/sub-visual-01.jpg'); }
#m-menu.bg6 { --m-menu-bg:url('../img/sub-visual-02.jpg'); }
#m-menu.bg7 { --m-menu-bg:url('../img/sub-visual-01.jpg'); }
#m-menu.bg8 { --m-menu-bg:url('../img/sub-visual-02.jpg'); }
#m-menu.bg9 { --m-menu-bg:url('../img/sub-visual-01.jpg'); }



#m-menu .m-menu-container { position:absolute; left:0; top:0; right:0; bottom:0; z-index:2; display:flex; align-items:center; transition-duration:700ms; z-index:2; }
#m-menu .m-menu-container:after { content:""; position:fixed; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,.8); visibility:hidden; z-index:-1; opacity:0; transition-delay:750ms; }
body.m-menu-on #m-menu .m-menu-container:after { opacity:1; visibility:visible; transition-delay:0ms; }

#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; }
#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.4rem; 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; }

	#m-menu { background:var(--main-color1); }
	#m-menu .m-menu-container:after { opacity:.5; }
	#m-menu .m-menu-container.on { left:-50%; right:50%; }

    #m-menu .items { flex-direction:column; overflow:hidden; }
    #m-menu .item:not(:last-child) { border:none; }

    #m-menu .item .is_sub { font-size:1.25rem; transition-duration:700ms; }
    #m-menu .item .is_sub:before { display:none; }

	#m-menu .m-menu-container.on .items { padding:0; }
	#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; }
	#m-menu .item .depth2 { position:absolute; left:50%; top:5%; width:100%; height:100%; display:flex; justify-content:center; align-items:center; flex-direction:column; opacity:0; overflow:hidden; visibility:hidden; transition-duration:700ms; }

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

}