@charset "UTF-8";

/********************************************************
■ Sub Menu : 서브 메뉴 부분
********************************************************/
#sub-menu { position:relative; left:0; border-bottom: 1px solid #ddd; color: white; transition-duration: 200ms; width:100vw; z-index:99; }
#sub-menu ul { }
#sub-menu li { float: left; position: relative; z-index: 3; transition: all 0.7s ease-in-out; width:250px; }

#sub-menu li:last-child { border-right: 1px solid #ddd; }

#sub-menu li .fa-angle-up, #sub-menu li.on .fa-angle-down { display:none; } 
#sub-menu li.on .fa-angle-up { display:inline-block; } 

#sub-menu .home { width:auto; }
#sub-menu .home .item { font-weight: 700; min-width:auto; padding-right:30px; color:#aaa; }
#sub-menu li .item { display: block; padding: 20px 30px; color: #333; font-size:1.1rem; border-left: 1px solid #ddd; }
#sub-menu li .item .arrow { position: absolute; right: 20px; top: 50%; transform:translateY(-50%); width: 25px; height: 25px; line-height: 25px; text-align: center; }
#sub-menu .sub { position: absolute; width: calc(100% + 1px); top:calc(100% - 1px); padding: 10px 0; background:#fff; border:1px solid #ddd; display:none; z-index:2; }
#sub-menu .sub:before { content:""; position:absolute; top:-1px; left:0; right:0; height:2px; }
#sub-menu .sub a { position: relative; display: block; color: #666; padding: 5px 30px; }

@media (min-width: 767px) {
	#sub-menu.on { position:fixed; left:0; top:0; background:#fff; }
}

@media (max-width: 767px) {
	#sub-menu > .c { padding: 0 !important; }
	#sub-menu li { width:50%; }
	#sub-menu li .item { padding:10px 15px; }
	#sub-menu li .item .arrow { right: 10px; }
	#sub-menu .sub a { padding:5px 15px; }
}