@charset "UTF-8";

/********************************************************
■ Sub Menu : 서브 메뉴 부분
********************************************************/
#sub-menu { position:relative; transition-duration: 200ms; height:50px; margin-top:-50px; background:#eee; z-index:2; }
#sub-menu .c { transition-duration: 200ms; transition-delay:200ms; }
#sub-menu .menu-tit { position:relative; padding:15px; border-bottom: 1px solid transparent; ; 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 .menu-list { display:flex; justify-content:center; align-items:center; transition-duration: 200ms; }
#sub-menu .menu-list 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 .menu-list a.on { background:#fff; }
}

@media (max-width: 767px) {
	#sub-menu.on .c { background:#333; transition-delay:0ms; }
	#sub-menu { height:50px; margin-top:0; }
	#sub-menu .menu-tit { display:block; padding:0; line-height:50px;  }
	#sub-menu.on .menu-tit { border-color:#666; }
	#sub-menu .menu-list { display:block; height:0; padding:0; visibility:hidden; border:0; background:#333; overflow:hidden; margin:0 -20px; }
	#sub-menu.on .menu-list { height:auto; visibility:visible; padding:15px 0; }
	#sub-menu .menu-list a { display:block; padding:0 35px; }
	#sub-menu.on .menu-list a { padding:0 35px; color:#888; }

}