@charset "UTF-8";

/********************************************************
■ Sub Menu : 서브 메뉴 부분
********************************************************/
:root {
	--sub-menu-h:60px;
}
#sub-menu { position:sticky; left:0; top:0; right:0; display:flex; flex-wrap:wrap; padding:0; z-index:99; --side-padding:20px; }
#sub-menu:before { content:""; position:absolute; left:50%; top:0; bottom:0; transform:translateX(-50%); background:var(--main-color1); color:#fff; width:100vw; z-index:-1; }


#sub-menu > div { border-right:1px solid rgba(255,255,255,.1); }

#sub-menu .sub-wrap { position:relative; min-width:230px; z-index:9; }
#sub-menu .sub-wrap ul { position:absolute; top:100%; left:0; right:0; display:block; max-height:0; z-index:1; background:#fff; box-shadow: 0 2px 10px rgba(0,0,0,.1); }
#sub-menu .sub-wrap li { position:relative; opacity:0; visibility: hidden; height:0; }
#sub-menu .sub-wrap li:first-child { margin-top:10px; }
#sub-menu .sub-wrap li:last-child { margin-bottom:10px; }
#sub-menu .sub-wrap .sub-a { display:block; white-space: nowrap; transition-duration: 0ms; padding:10px var(--side-padding); }

#sub-menu .sub-wrap:hover ul { max-height:350px; overflow-y:auto; transition-duration: 400ms; }
#sub-menu .sub-wrap:hover li { opacity:1; visibility: visible; height:auto; transition-duration: 400ms; }
#sub-menu .sub-wrap li.on .sub-a,
#sub-menu .sub-wrap li:hover .sub-a { color:var(--main-color1); transition-duration: 400ms; }
#sub-menu .sub-wrap li.on .sub-a { text-decoration: underline; }

#sub-menu .menu-tit { position:relative; width:100%; height:var(--sub-menu-h); padding:0 var(--side-padding); font-size:1.125rem; display:flex; align-items:center; justify-content:space-between; z-index:2; color:#fff; }
#sub-menu .sub-wrap i { font-size:12px; width:20px; height:20px; border-radius:99px; border:1px solid #fff; display:flex; align-items: center; justify-content: center; transition-duration: 300ms; }
#sub-menu .sub-wrap:hover i { transform:rotate(90deg); }


@media (max-width: 1024px) {
	#sub-menu .sub-wrap { min-width:0; flex:1; }
	#sub-menu .menu-tit { font-size:1rem; }
}

@media (max-width: 767px) {
	:root {
		--sub-menu-h:45px;
	}
	#sub-menu { --side-padding:10px; }
	#sub-menu .home .menu-tit { font-size:.875rem; }

	#sub-menu .sub-wrap .sub-a { padding:5px var(--side-padding); }
	#sub-menu .sub-wrap i { width:16px; height:16px; }

	#sub-menu .sub-wrap:hover ul { max-height:250px; }

	#sub-menu .sub-wrap:nth-child(4) { display:none; }
}