@charset "UTF-8";

/********************************************************
■ Sub Menu : 서브 메뉴 부분
********************************************************/
:root {
	--sub-menu-h:50px;
}
#sub-menu { position:relative; padding-top:20px; padding-bottom:20px; z-index:99; }
#sub-menu:before { content: ""; position: absolute; left:50%; top:0; bottom:0; background:#f8f8f8; transform: translateX(-50%); width:100vw; z-index:-1; }

#sub-menu .sub-wrap { position:relative; display:flex; justify-content:center; }
#sub-menu .sub-wrap ul { display:flex; transition-duration: 200ms; gap:10px; }
#sub-menu .sub-wrap .sub-a { text-align:center; display:flex; align-items:center; justify-content:center; padding:7px 20px; transition-duration: 200ms; white-space: nowrap; }


#sub-menu .depth2 .sub-a { color: #333; border-radius: 99px; background:#fff; border:2px solid transparent; box-shadow: 0 0 5px rgba(0,0,0,.1); }
#sub-menu .depth2 li:hover > .sub-a,
#sub-menu .depth2 li.on > .sub-a { border-color:var(--main-color1); color:var(--main-color1); }

#sub-menu .depth3 { position:relative; margin-top: 5px; width:calc(100vw - var(--top-padding)*2); left:50%; transform:translateX(-50%); border-radius:99px; background:#eee; }
#sub-menu .depth3 span { position:relative; display:block; height:100%; display:flex; align-items:center; justify-content:center; }
#sub-menu .depth3 span:before { content:""; position:absolute; left:0; right:0; bottom:0; height:0; background:var(--main-color1); transition-duration:300ms; }
#sub-menu .depth3 li:hover .sub-a span:before,
#sub-menu .depth3 li.on .sub-a span:before { height:4px; }


@media (max-width: 1024px) {
    #sub-menu { margin-top:var(--top-menu-height); padding-top:10px; padding-bottom:10px; }

    #sub-menu .sub-wrap ul { gap:5px; flex-wrap:wrap; }
    #sub-menu .sub-wrap .sub-a { font-size:.875rem; padding:5px 15px; }
}
@media (max-width: 767px) {
    #sub-menu .sub-wrap li { width:calc(33.33% - 3.5px); }
}




/*@media (min-width: 1024px) {
    #sub-menu .depth2 .sub-a { color: #333; border-radius: 99px; background:#fff; border:2px solid transparent; box-shadow: 0 0 5px rgba(0,0,0,.1); }
    #sub-menu .depth2 li:hover > .sub-a,
    #sub-menu .depth2 li.on > .sub-a { border-color:var(--main-color1); color:var(--main-color1); }

	#sub-menu .depth3 { position:relative; margin-top: 5px; width:calc(100vw - var(--top-padding)*2); left:50%; transform:translateX(-50%); border-radius:99px; background:#eee; }
	#sub-menu .depth3 span { position:relative; display:block; height:100%; display:flex; align-items:center; justify-content:center; }
	#sub-menu .depth3 span:before { content:""; position:absolute; left:0; right:0; bottom:0; height:0; background:var(--main-color1); transition-duration:300ms; }
	#sub-menu .depth3 li:hover .sub-a span:before,
	#sub-menu .depth3 li.on .sub-a span:before { height:4px; }
}*/
/*
@media (max-width: 1024px) {
	#sub-menu { display:flex; padding:0; margin-top:var(--top-menu-height); }
    #sub-menu:before { display:none; }

	#sub-menu .sub-wrap { flex:1; overflow:visible; }
	#sub-menu .sub-wrap > * { padding:0 var(--c-padding); }
	#sub-menu .sub-wrap ul { position:absolute; left:0; top:100%; right:0; display:block; height:0; padding:0; visibility:hidden; background:#333; overflow:hidden; }
	#sub-menu .sub-wrap .sub-a { display:block; padding:5px 15px; height:auto; font-size:1rem; }

	#sub-menu .menu-tit { display:block; font-size:1rem; line-height:var(--sub-menu-h); }

	#sub-menu .depth2 { background:#eee; }
	#sub-menu .depth3 { background:var(--main-color1); }
	#sub-menu .depth3:not(.on) .menu-tit { color:#fff; }


    #sub-menu .sub-wrap.on { background:#333; transition-delay:0ms; }
	#sub-menu .sub-wrap.on .menu-tit { border-color:#666; }

    #sub-menu .sub-wrap.on ul { height:auto; max-height:60vh; visibility:visible; overflow-y:auto; padding:15px 0; }
	#sub-menu .sub-wrap.on .sub-a { color:#888; }
}
 */