@charset "UTF-8";

/********************************************************
■ Sub Menu : 서브 메뉴 부분
********************************************************/
:root {
	--sub-menu-h:50px;
}
#sub-menu { position:relative; transition-duration: 200ms; transition-delay:200ms; z-index:99; }
#sub-menu:before { content:""; position:absolute; left:50%; top:0; height:var(--sub-menu-h); transform:translateX(-50%); width:calc(100vw - var(--top-padding)*2); background:#eee; border-radius:0 0 30px 30px; overflow:hidden; z-index:-1; }
body.submenu-fix #sub-menu { position:fixed; left:0; top:0; right:0; }
body.submenu-fix #sub-menu:before { border-radius:0; }

#sub-menu .sub-wrap { position:relative; display:flex; flex-wrap:wrap; overflow-x:auto; }
#sub-menu .sub-wrap ul { display:flex; justify-content:center; flex:1; transition-duration: 200ms; }
#sub-menu .sub-wrap .sub-a { text-align:center; display:flex; align-items:center; justify-content:center; height:var(--sub-menu-h); padding:0 30px; transition-duration: 200ms; white-space: nowrap; }
#sub-menu .sub-wrap li:hover .sub-a,
#sub-menu .sub-wrap li.on .sub-a { color:var(--main-color1); }

#sub-menu .menu-tit { position:relative; width:100%; text-align:left; font-size:1.25rem; border-bottom: 1px solid transparent; color:var(--main-color1); display:none; }
#sub-menu .menu-tit .arrow { position:absolute; right:var(--c-padding); top:50%; transform:translateY(-50%); }
#sub-menu .menu-tit .arrow i { height:20px; }
#sub-menu .menu-tit .fa-angle-up,
#sub-menu .menu-tit.on .fa-angle-down { display:none; }
#sub-menu .menu-tit.on .fa-angle-up { display:block; }


#sub-menu .depth2 .sub-a { color: #666; }


@media (min-width: 1024px) {
	#sub-menu .depth2 li.on .sub-a { background:#fff; }

	#sub-menu .depth3 { position:relative; margin-top: 5px; width:calc(100vw - var(--top-padding)*2); left:50%; transform:translateX(-50%); border-radius:99px; background:#eee; }
	#sub-menu .depth3 span { position:relative; display:block; height:100%; display:flex; align-items:center; justify-content:center; }
	#sub-menu .depth3 span:before { content:""; position:absolute; left:0; right:0; bottom:0; height:0; background:var(--main-color1); transition-duration:300ms; }
	#sub-menu .depth3 li:hover .sub-a span:before,
	#sub-menu .depth3 li.on .sub-a span:before { height:4px; }
}

@media (max-width: 1024px) {
	#sub-menu { display:flex; padding:0; }
    #sub-menu:before { display:none; }

	#sub-menu .sub-wrap { flex:1; overflow:visible; }
	#sub-menu .sub-wrap > * { padding:0 var(--c-padding); }
	#sub-menu .sub-wrap ul { position:absolute; left:0; top:100%; right:0; display:block; height:0; padding:0; visibility:hidden; background:#333; overflow:hidden; }
	#sub-menu .sub-wrap .sub-a { display:block; padding:5px 15px; height:auto; font-size:1rem; }

	#sub-menu .menu-tit { display:block; font-size:1rem; line-height:var(--sub-menu-h); }

	#sub-menu .depth2 { background:#eee; }
	#sub-menu .depth3 { background:var(--main-color1); }
	#sub-menu .depth3:not(.on) .menu-tit { color:#fff; }


    #sub-menu .sub-wrap.on { background:#333; transition-delay:0ms; }
	#sub-menu .sub-wrap.on .menu-tit { border-color:#666; }

    #sub-menu .sub-wrap.on ul { height:auto; max-height:60vh; visibility:visible; overflow-y:auto; padding:15px 0; }
	#sub-menu .sub-wrap.on .sub-a { color:#888; }
}