@charset "UTF-8";

/********************************************************
■ Sub Menu : 서브 메뉴 부분
********************************************************/
:root {
	--sub-menu-h:70px;
}
#sub-menu { position:relative; margin-top:calc(-1 * var(--sub-menu-h)); background:#fff; border-radius: 20px 20px 0 0; z-index:1; }
#sub-menu:not(.depth3on):before { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:#eee; z-index:-1; }
.submenu-fix #sub-menu { position:fixed; left:0; top:0; right:0; bottom:auto; max-width:none; border-radius:0; margin-top:0; z-index:999; }
.submenu-fix #sub-menu.depth3on { background:#f8f8f8; }

#sub-menu .sub-wrap { position:relative; display:flex; justify-content:center; }

#sub-menu li { width:auto; }
#sub-menu li .sub-a { font-weight:600; height:var(--sub-menu-h); display:flex; justify-content:center; align-items:center; white-space: nowrap; transition-duration:0s; }

#sub-menu .depth2 li { padding:0 20px; }
#sub-menu .depth2 li .sub-a { position:relative; font-size:1.125rem; color:#aaa; }
#sub-menu .depth2 li .sub-a:before { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:transparent; }
#sub-menu .depth2 li:hover .sub-a,
#sub-menu .depth2 li.on .sub-a { color:var(--main-color1); font-weight:400; }
#sub-menu .depth2 li:hover .sub-a:before,
#sub-menu .depth2 li.on .sub-a:before { background:var(--main-color1); }

#sub-menu .depth3 { background:#f5f5f5; border-radius:20px; color:#bbb; }
#sub-menu .depth3 li { padding:0 10px; }
#sub-menu .depth3 li .sub-a { height:calc(var(--sub-menu-h) - 10px); }
#sub-menu .depth3 li:hover .sub-a,
#sub-menu .depth3 li.on .sub-a { 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%; }

.submenu-fix #sub-menu .depth3 { position:absolute; left:0; top:0; right:0; bottom:0; z-index:9; }

#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:calc(-1 * var(--c-padding)/2); }
#sub-menu .next { right:-10px; }
#sub-menu .swiper-button-disabled { display:none; }



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

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

@media (max-width: 767px) {
    #sub-menu .depth2 li { padding:0 7px; }
	#sub-menu .depth3 li { padding:0 3px; }
}