@charset "UTF-8";

/********************************************************
■ Sub Menu : 서브 메뉴 부분
********************************************************/
:root {
	--sub-menu-h:60px;
}
#sub-menu { position:relative; margin-top:calc(-1 * var(--sub-menu-h)); display:flex; flex-wrap:wrap; padding:0; z-index:9; --side-padding:20px; }
#sub-menu:before,
#sub-menu:after { content:""; position:absolute; left:0; bottom:0; z-index:-1; }
#sub-menu:before { top:0; background:#fff; width:calc(100% + (50vw - var(--main-width)/2)); }
#sub-menu:after { right:0; height:1px; }

.submenu-fix #sub-menu { position:fixed; background:#fff; left:0; top:0; right:0; bottom:auto; transition-duration: 300ms; }
.submenu-fix #sub-menu:before { background:#ddd; }


#sub-menu .home { background:#666; color:#fff; }

#sub-menu .sub-wrap:not(.depth3) { position:relative; min-width:250px; z-index:9; }
#sub-menu .sub-wrap:not(.depth3) ul { position:absolute; top:100%; left:0; right:0; display:block; max-height:0; z-index:1; box-shadow: 0 2px 10px rgba(0,0,0,.1); }
#sub-menu .sub-wrap:not(.depth3) li { position:relative; opacity:0; visibility: hidden; }
#sub-menu .sub-wrap:not(.depth3) .sub-a { display:block; white-space: nowrap; opacity:.6; transition-duration: 0ms; padding:15px 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; transition-duration: 400ms; }
#sub-menu .sub-wrap li.on .sub-a,
#sub-menu .sub-wrap li:hover .sub-a { opacity:1; transition-duration: 400ms; }

#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; }
#sub-menu .menu-tit i { font-size:.875rem; }


#sub-menu .depth1 > * { background:#fff; }
#sub-menu .depth1 li:hover .sub-a { background:#eee; }
#sub-menu .depth1 li.on .sub-a { background:rgba(var(--main-color1-rgb),.2); }

#sub-menu .depth2 > * { background:#282828; color:#fff; }
#sub-menu .depth2 li:hover .sub-a { background:#666; }
#sub-menu .depth2 li.on .sub-a { background:var(--main-color2); }

/* #sub-menu .depth3 > * { background:var(--main-color1); color:#fff; }
#sub-menu .depth3 li:hover .sub-a { background:rgba(255,255,255,.3); }
#sub-menu .depth3 li.on .sub-a { background:#fff; color:var(--main-color1); } */

#sub-menu .depth3 { width:100%; overflow:visible; }
#sub-menu .depth3:before { content:""; position:absolute; left:50%; top:0; bottom:0; transform:translateX(-50%); width:100vw; background:#f8f8f8; z-index:-1; }
#sub-menu .depth3 ul { display: flex; justify-content: center; }
#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 { height:var(--sub-menu-h); display:flex; align-items: center; justify-content: center; padding:0 20px; }
#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 (max-width: 1024px) {
	#sub-menu .sub-wrap:not(.depth3) { min-width:0; flex:1; }
	#sub-menu .menu-tit { font-size:1rem; }


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

@media (max-width: 767px) {
	:root {
		--sub-menu-h:50px;
	}
	#sub-menu { --side-padding:10px; }
	#sub-menu .sub-wrap .sub-a { padding:10px var(--side-padding); }
}