@charset "UTF-8";

/********************************************************
■ Sub Menu : 서브 메뉴 부분
********************************************************/
:root {
	--sub-menu-h:70px;
}
#sub-menu { position:relative; z-index:99; }
#sub-menu:before,
#sub-menu:after { content:""; position:absolute; left:50%; top:0; bottom:0; transform:translateX(-50%); width:100vw; z-index:-1; }
#sub-menu.depth3on:before { background:#eee; }
#sub-menu:after { height:var(--sub-menu-h); background:#fff; border-bottom:1px solid #ddd; }

body.submenu-fix #sub-menu { position:fixed; left:0; top:0; right:0; }
body.submenu-fix #sub-menu.depth3on:before { top:0; z-index:5; }
body.submenu-fix #sub-top { padding-bottom:var(--sub-menu-h); }
body.submenu-fix #sub-menu .depth3 { margin-top:calc(-1 * var(--sub-menu-h)); z-index:9; }

#sub-menu .sub-wrap { position:relative; display:flex; flex-wrap:wrap; transition-duration: 10ms; }
#sub-menu .sub-wrap ul { position:relative; display:flex; justify-content:center; height:var(--sub-menu-h); flex:1; transition-duration: 300ms; }

#sub-menu .sub-wrap .sub-a { position:relative; display:flex; align-items:center; justify-content:center; height:100%; padding:0 35px; font-size:1.125rem; word-break: normal; white-space: nowrap; color:#666; transition-duration: 400ms; }
#sub-menu .sub-wrap li.on .sub-a,
#sub-menu .sub-wrap li:hover .sub-a { font-weight:600; color:#333; }
#sub-menu .sub-wrap .sub-a:before { content:""; position:absolute; left:50%; transform:translateX(-50%); width:0; transition-duration: 400ms; }

#sub-menu .menu-tit { position:relative; width:100%; height:50px; font-size:1.125rem; align-items:center; justify-content:space-between; display:none; }
#sub-menu .menu-tit i { font-size:.875rem; }


#sub-menu .depth2 { overflow-x:auto; }
#sub-menu .depth2 ul:before { content:""; position:absolute; left:50%; transform:translateX(-50%); width:100vw; bottom:0; }
#sub-menu .depth2 li { position:relative; }
#sub-menu .depth2 .sub-a:before { bottom:0; height:3px; background:#333; }
#sub-menu .depth2 li:hover .sub-a:before,
#sub-menu .depth2 li.on .sub-a:before { width:100%; }


#sub-menu .depth3 li { width:auto; }
#sub-menu .depth3 li:not(:last-child):before { content:""; position:absolute; top:calc(50% - 2px); right:-2px; width:4px; height:4px; border-radius:5px; background:#ddd; }

#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:calc(var(--sub-menu-h)*1.5); 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:5px; }
#sub-menu .next { right:5px; }
#sub-menu .swiper-button-disabled { display:none; }



@media (min-width: 1025px) {
	#sub-menu .sub-wrap .sub-a.on,
	#sub-menu .sub-wrap .sub-a:hover { color:#333 !important; }
}

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

	#sub-menu { transition-delay:350ms; }
	#sub-menu:after { height:calc(100% - var(--sub-menu-h)); }

	#sub-menu .sub-wrap .sub-a { padding:0 20px; color:#999; }

	#sub-menu .menu-tit { transition-delay:350ms; display:flex; }

	#sub-menu .depth2 { overflow-x:visible; }
	#sub-menu .depth2 ul { position:absolute; top:50px; left:calc(-1 * var(--c-padding)); right:calc(-1 * var(--c-padding)); display:block; height:0; padding:0 5px; background:#333; text-align:center; overflow:hidden; background:#fff; z-index:99; }
	#sub-menu .depth2 li { padding:10px 15px; }
	#sub-menu .depth2 .sub-a:before { display:none; }
	#sub-menu .depth2 li:hover .sub-a,
	#sub-menu .depth2 li.on .sub-a { color:var(--main-color1) !important; }

	#sub-menu .depth3 ul { justify-content:flex-start; }


	#sub-menu.on { background:#333; transition-delay:0ms; }
	#sub-menu.on .c { border-bottom:1px solid #666; }
	#sub-menu.on .menu-tit { color:var(--main-color1); border-bottom:1px solid #666; transition-delay:0ms; }

	#sub-menu.on .depth2 ul { height:auto; max-height:60vh; padding:15px 5px; visibility:visible; overflow:visible; overflow-y:auto; background:#333; }
}

@media (max-width: 767px) {
	#sub-menu .sub-wrap .sub-a { padding:0 15px; }

	#sub-menu .depth2 li { padding:5px; }
}