@charset "UTF-8";

/********************************************************
■ Sub Menu : 서브 메뉴 부분
********************************************************/
:root {
	--sub-menu-h:50px;
}
#sub-menu { position:relative; transition-duration: 200ms; height:var(--sub-menu-h); border-radius:0 0 30px 30px; background:#eee; z-index:2; }
#sub-menu .c { transition-duration: 200ms; transition-delay:200ms; }
#sub-menu .menu-tit { position:relative; font-size:1.25rem; padding:15px; border-bottom: 1px solid transparent; color:var(--main-color1); display:none; }
#sub-menu .menu-tit .arrow { position:absolute; right:0; top:50%; transform:translateY(-50%); }
#sub-menu .menu-tit .arrow i { width:20px; height:20px; }
#sub-menu .menu-tit .fa-angle-up, #sub-menu .menu-tit.on .fa-angle-down { display:none; }
#sub-menu .menu-tit.on .fa-angle-up { display:block; }
#sub-menu .depth2 { display:flex; justify-content:center; align-items:center; transition-duration: 200ms; }
#sub-menu .depth2 a { text-align:center; position:relative; color: #666; padding:0 30px; line-height:50px; transition-duration: 200ms; white-space: nowrap; }

@media (min-width: 767px) {
	#sub-menu .depth2 a.on { background:#fff; }
}

@media (max-width: 1024px) {
    #sub-menu { border-radius:0; }
}
@media (max-width: 767px) {
	#sub-menu { margin-top:0; }
	#sub-menu .menu-tit { display:block; font-size:1.125rem; padding:0; line-height:var(--sub-menu-h); }

	#sub-menu .depth2 { display:block; height:0; padding:0; visibility:hidden; border:0; background:#333; overflow:hidden; margin:0 -20px; }
	#sub-menu .depth2 a { display:block; padding:0 35px; }

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

    #sub-menu.on .depth2 { height:auto; visibility:visible; padding:15px 0; }
	#sub-menu.on .depth2 a { padding:0 35px; color:#888; }
}