@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:var(--main-color3)/*var(--main-color1)*/; }

#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 .items { position:relative; width:100%; display:flex; padding-top:var(--top-height); max-height:calc(100% - var(--top-height)); overflow-y:auto; overflow-x:hidden; }
#m-menu .items:before { content:"SITE MAP"; position: absolute; left:50%; top:0; transform: translateX(-50%); font-size:3rem; color:#fff; opacity:0; transition-duration: 400ms; }
body.m-menu-on #m-menu .items:before { opacity:1; transition-delay: 300ms; }


#m-menu .item { flex:1; color:#fff; display:flex; flex-direction:column; align-items:center; margin:0 15px; }
#m-menu .item .is_sub,
#m-menu .item .depth2-a { font-size:1.25rem; }

#m-menu .item .is_sub { color:var(--main-color1); width:100%; text-align:center; border-radius:99px; background:#fff; padding:15px 20px 13px; font-weight:700; margin-bottom:20px; }


#m-menu .item .sub li { padding:10px 0; text-align:center; }
#m-menu .item .sub .is_back { display:none; }
#m-menu .item .sub .depth2-a { position:relative; z-index:1; color: rgba(255,255,255,.7); max-width:100px; }
#m-menu .item .sub .depth2-a:hover,
#m-menu .item .sub .depth2-a.on { color:#fff; }

#m-menu .item .sub .depth2-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 .sub .depth2-a:hover:after { transform:scaleX(1); transform-origin:left bottom; }





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

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

    #m-menu .items { position:static; flex-direction:column; padding-top:0; margin-top:var(--top-height); overflow:hidden; }
    #m-menu .items:before { display:none; }

    #m-menu .item { flex:none; height:auto; }
    #m-menu .item .is_sub { background:none; color:#fff; margin-bottom:0; opacity:.7; }
    #m-menu .item .is_sub:hover { opacity:1; }

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

	#m-menu .item .is_sub.on + .sub { top:0; opacity:1; visibility:visible; }

	#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); }
}