@charset "UTF-8";

/********************************************************
■ Sub Menu : 서브 메뉴 부분
********************************************************/
:root {
	--sub-menu-h:80px;
}
#sub-menu { position:relative; display:flex; flex-wrap:wrap; justify-content:center;padding:0; z-index:99; transition-duration:400ms; }
#sub-menu:before { content:""; position:absolute; left:0; top:0; right:0; bottom:0; background:#f8f8f8; border-radius:0 0 20px 20px; z-index:-1; }

#sub-menu .sub-wrap { display:flex; flex-wrap:wrap; height:var(--sub-menu-h); }
#sub-menu .sub-wrap ul { position:relative; display:flex; justify-content:center; flex:1; height:100%; margin:0 auto; transition-duration: 400ms; }

#sub-menu .sub-wrap .sub-a { position:relative; display:flex; align-items:center; justify-content:center; height:100%; font-size:1.125rem; padding:0 15px; }

#sub-menu .menu-tit { position:relative; width:100%; height:var(--sub-menu-h); padding:0 30px; align-items:center; justify-content:space-between; display:none; color:#fff; }
#sub-menu .menu-tit i { font-size:.875rem; }


#sub-menu .depth2 { overflow-x:auto; }
#sub-menu .depth2 { position:absolute; left:0; right:0; bottom:100%; border-radius:20px 20px 0 0; background:var(--main-color3); }
#sub-menu .depth2 li { position:relative; flex:1; transition-duration: 400ms; }
#sub-menu .depth2 li .sub-a { color:#fff; transition-duration: 300ms; }
#sub-menu .depth2 li:hover .sub-a,
#sub-menu .depth2 li.on .sub-a { background:#fff; color:#333; }

#sub-menu .depth3 li { width:auto; }
#sub-menu .depth3 li:hover .sub-a,
#sub-menu .depth3 li.on .sub-a { font-weight:600; color:var(--main-color1); }

#sub-menu .depth3 .sub-a span { position:relative; z-index:1; padding:0 10px; }
#sub-menu .depth3 .sub-a span:before { content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:0; height:10px; background:var(--main-color1); opacity:.3; z-index:-1; transition-duration: 400ms; }
#sub-menu .depth3 li:hover .sub-a span:before,
#sub-menu .depth3 li.on .sub-a span:before { width:100%; }


#sub-menu .nav { position:absolute; top:50%; transform:translateY(-50%); width:30px; height:30px; border-radius:99px; background:#fff; box-shadow:0 0 5px rgba(0,0,0,.2); display:flex; justify-content:center; align-items:center; color:#666; background:#fff; cursor:pointer; z-index:9; }
#sub-menu .prev { left:0; }
#sub-menu .next { right:0; }
#sub-menu .swiper-button-disabled { display:none; }


@media (max-width: 1800px) {
	#sub-menu { width:90%; }
}

@media (max-width: 1400px) {
	#sub-menu { width:calc(100% - 20px); }
}

@media (max-width: 1024px) {
	:root {
		--sub-menu-h:50px;
	}

	#sub-menu { margin-left:0; }
	#sub-menu:before { border-radius:0; width:100vw; }

	#sub-menu .menu-tit { display:flex; }
	#sub-menu .menu-tit:after { content:""; position:absolute; left:100%; top:50%; width:0; height:0; border:26px solid transparent; border-left:15px solid var(--main-color3); border-right:none; transform:translateY(-50%); }

	#sub-menu .sub-wrap .sub-a { font-size:1rem; }

	#sub-menu .depth2 { border-radius:0; overflow:visible; }
	#sub-menu .depth2 ul { position:absolute; top:100%; left:0; right:0; display:block; max-height:0; height:auto; background:#fff; border:1px solid transparent; padding:0 5px; overflow:hidden; z-index:99; transition-duration:400ms; }
	#sub-menu.on .depth2 ul { border-color:var(--main-color3); }

	#sub-menu .depth2 li { padding:10px; opacity:0; }
	#sub-menu.on .depth2 ul li { opacity:1; }

	#sub-menu .depth2 li .sub-a { padding:0 15px; color:#999; text-align:center; }
	#sub-menu .depth2 li:hover .sub-a,
	#sub-menu .depth2 li.on .sub-a { color:var(--main-color1); }

	#sub-menu .depth3 { margin-left:var(--c-padding); }
	#sub-menu .depth3 ul { justify-content:flex-start; }

	#sub-menu .prev { left:var(--c-padding); }

	#sub-menu.on { transition-delay:0ms; }
	#sub-menu.on .depth2 ul { max-height:100vh; padding:15px 5px; visibility:visible; overflow:visible; transition-duration:800ms; }
}


@media (max-width: 767px) {
	#sub-menu .menu-tit { padding:0 var(--c-padding); }

	#sub-menu .sub-wrap .sub-a { padding:0 10px; }
}