@charset "UTF-8";

/********************************************************
■ Sub Menu : 서브 메뉴 부분
********************************************************/
:root {
	--sub-menu-h:70px;
}
#sub-menu { position:relative; z-index:99; }
body.submenu-fix #sub-menu { position:fixed; background:#fff; left:0; top:0; right:0; }
body.submenu-fix #sub-top { padding-bottom:var(--sub-menu-h); }

#sub-menu .c div ul { position:relative; display:flex; justify-content:center; height:var(--sub-menu-h); transition-duration: 400ms; }
#sub-menu .c div ul:before { content:""; position:absolute; left:50%; transform:translateX(-50%); width:100vw; bottom:0; }
#sub-menu .c div.depth2 ul:before { height:1px; background:#ddd; }

#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.325rem; font-weight: 700; 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:700; 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:#e64a20; }
#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 .menu-tit {position: relative; width: 100%; color: #fff; height: 50px; font-size: 1.125rem; padding: 0 10px; font-weight: 700; align-items: center; justify-content: space-between; display: none;}
#sub-menu .menu-tit i { font-size:.875rem; }

@media (min-width: 1025px) {
	#sub-menu .c div ul li .sub-a.on,
	#sub-menu .c div ul li .sub-a:hover { color:#e64a20 !important; }
}

@media (max-width: 1024px) {

	#sub-menu { background:#333 !important; transition-delay:350ms; }
	#sub-menu .c div ul { background:#333; text-align:center; }
	#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; z-index:2; }
	#sub-menu .c div.depth2 ul:before { display:none; }

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

	#sub-menu .menu-tit { transition-delay:350ms; display:flex; }

	#sub-menu .c div ul li .sub-a { padding:0 20px; color:#999; }
	#sub-menu .c div.depth2 ul li .sub-a:hover { font-weight:300; color:var(--main-color1); }
	#sub-menu .c div.depth2 ul li .sub-a { display:block; }
	#sub-menu .c div.depth2 ul li .sub-a:before { display:none; }

	#sub-menu.on { background:#333; transition-delay:0ms; }
	#sub-menu.on .c { border-bottom:1px solid #666; }
	#sub-menu.on .c div ul { background:#333; }
	#sub-menu.on .c div.depth2 ul { height:auto; padding:15px 5px; visibility:visible; overflow:visible; }
	#sub-menu.on .menu-tit { color:var(--main-color1); border-bottom:1px solid #666; transition-delay:0ms; }
}

@media (max-width: 767px) {
	:root {
		--sub-menu-h:50px;
	}
	#sub-menu .c div ul li { padding:3px; }
	#sub-menu .c div ul li .sub-a { padding:0 15px; }

}