@charset "UTF-8";

/********************************************************
■ Sub Menu : 서브 메뉴 부분
********************************************************/
#sub-menu { position:relative; transition-duration: 200ms; width:1500px; max-width:95%; margin:-150px auto 0; height:150px; background:#fff; z-index:2; }
#sub-menu .c { transition-duration: 200ms; transition-delay:200ms; }
#sub-menu .menu-tit { position:relative; padding:15px; border-bottom: 1px solid #ddd; display:none; }
#sub-menu .menu-tit .arrow { position:absolute; right:10px; 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; border-bottom:1px solid #ddd; transition-duration: 200ms; }
#sub-menu .menu-list a { text-align:center; position:relative; color: #666; padding:40px 30px; transition-duration: 200ms; white-space: nowrap; }

@media (min-width: 767px) {
	#sub-menu .menu-list a:before { content:""; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:0; height:2px; transition-duration: 200ms; }
	#sub-menu .menu-list a:after { content:""; position:absolute; top:50%; left:100%; width:2px; height:15px; background:#ddd; transform: translateY(-50%) skew(-20deg); }
	#sub-menu .menu-list a:last-child:after { display:none; }
	#sub-menu .menu-list a:hover:before, #sub-menu a.on:before { width:95%; }
}

@media (max-width: 1500px) {
	#sub-menu .c { padding:0 30px; }
}

@media (max-width: 767px) {
	#sub-menu .c { padding-left:20px; padding-right:20px; }
	#sub-menu.on .c { background:#333; transition-delay:0ms; }
	#sub-menu { height:70px; margin-top:-70px; }
	#sub-menu .menu-tit { display:block; }
	#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:5px 35px; color:#888; }

}