@charset "UTF-8";

/********************************************************
■ Sub Menu : 서브 메뉴 부분
********************************************************/
#sub-menu { position:relative; left:0; z-index:99; }

#sub-menu .c div ul { position:relative; display:flex; justify-content:center; height:70px; transition-duration: 400ms; }
#sub-menu .c div ul:before { content:""; position:absolute; left:-100%; right:-100%; bottom:0; }
#sub-menu .c div.depth2 ul:before { height:1px; background:#ddd; }
#sub-menu .c div.depth3 ul:before { top:0; background:#f3f3f3; }

#sub-menu .c div ul li { position:relative; }

#sub-menu .c div ul li .sub-a { position:relative; display:flex; align-items:center; justify-content:center; height:100%; padding:0 40px; font-size:1.125rem; color:#666; transition-duration: 400ms; }
#sub-menu .c div ul li .sub-a.on, #sub-menu .c div ul li .sub-a:hover { font-weight:600; color:#333; }
#sub-menu .c div ul li .sub-a:before { content:""; position:absolute; left:50%; transform:translateX(-50%); width:0; transition-duration: 400ms; }
#sub-menu .c div ul li .sub-a span { line-height:1.2; word-break: normal; }

#sub-menu .c div.depth2 ul li .sub-a:before { bottom:0; height:3px; background:#333; }
#sub-menu .c div.depth2 ul li .sub-a.on:before, #sub-menu .c div.depth2 ul li .sub-a:hover:before { width:100%; }

#sub-menu .c div.depth3 ul li .sub-a:before { top:50%; height:15px; opacity:.3; }
#sub-menu .c div.depth3 ul li .sub-a.on:before, #sub-menu .c div.depth3 ul li .sub-a:hover:before { width:90%; }
#sub-menu .c div.depth3 ul li .sub-a span { position:relative; }


#sub-menu .a-btn { position:relative; height:50px; display:block; font-size:1.125rem; padding:0 10px; display:flex; align-items:center; }
#sub-menu .a-btn .fa { position:absolute; top:50%; transform:translateY(-50%); right:10px; }


@media (min-width: 767px) {
	#sub-menu { overflow:hidden; }
	#sub-menu.on { position:fixed; left:0; top:0; background:#fff; }
	.at-content.on { margin-top:90px; }
	#sub-menu .c div ul li .sub-a.on, #sub-menu .c div ul li .sub-a:hover { color:#333 !important; }
}

@media (max-width: 1024px) {
	#sub-menu .c div ul li { padding:0 15px; }
	#sub-menu .c div ul li .sub-a { padding:0 20px; }
}

@media (max-width: 767px) {
	#sub-menu .c div ul { height:50px; }
	#sub-menu .c div.depth2 ul { position:absolute; top:50px; left:0; right:0; display:block; height:0; padding:0 5px; overflow:hidden; background:#fff; border-bottom:1px solid #ddd; z-index:2; }
	#sub-menu .c div.depth2 ul:before { display:none; }
	#sub-menu .c div.depth2.on ul { height:auto; padding:5px; visibility:visible; overflow:visible; }

	#sub-menu .c div ul li { padding:10px; }
	#sub-menu .c div.depth2 ul li:after { display:none; }

	#sub-menu .c div ul li .sub-a { padding:0 15px; }
	#sub-menu .c div.depth2 ul li .sub-a:hover { font-weight:300; }
	#sub-menu .c div.depth2 ul li .sub-a { display:block; }
	#sub-menu .c div.depth2 ul li .sub-a:before { display:none; }
}