@charset "UTF-8";

/********************************************************
■ Sub Menu : 서브 메뉴 부분
********************************************************/
:root {
	--sub-menu-h:60px;
}
#sub-menu { position:relative; transition-duration: 200ms; min-height:var(--sub-menu-h); z-index:99; margin-top:10px; }
#sub-menu:before { content:""; position:absolute; left:50%; top:0; bottom:0; background:#fff; width:100vw; transform:translateX(-50%); z-index:-1; }
body.submenu-fix #sub-menu { position:fixed; left:0; top:0; right:0; margin-top:0; }
body.submenu-fix #sub-menu .sub-wrap:before { left:calc(-1 * var(--c-padding) + 50%); }
body.submenu-fix #sub-menu .depth3 { position:absolute; top:0; bottom:0; z-index:9; }

#sub-menu .swiper { margin:0; }
#sub-menu .sub-wrap { position:relative; display:flex; flex-wrap:wrap; align-items:center; width:100%; transition-duration: 200ms; }
#sub-menu .sub-wrap:before { content:""; position:absolute; left:50%; bottom:0; width:100vw; transform:translateX(-50%); z-index:-1; }
#sub-menu .sub-wrap li { width:auto; }
#sub-menu .sub-wrap li:not(:last-child) { margin-right:50px; }
#sub-menu .sub-wrap li.base:not(:last-child) { margin-right:25px; }
#sub-menu .sub-wrap li.base .sub-a {font-size: 1.2rem;}
#sub-menu .sub-wrap .sub-a { position:relative; display:block; color: #ddd; line-height:var(--sub-menu-h); font-weight:600; transition-duration: 200ms; white-space: nowrap; }
#sub-menu .sub-wrap .sub-a:before { content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; transition-duration:400ms; }

#sub-menu .sub-wrap li:hover .sub-a,
#sub-menu .sub-wrap li.on .sub-a { color:var(--main-color1); }
#sub-menu .sub-wrap li:hover .sub-a:before,
#sub-menu .sub-wrap li.on .sub-a:before { right:0; background:var(--main-color1); }

#sub-menu .depth2:before { height:1px; background:#eee; }
#sub-menu .depth2 .sub-a { font-size:1.25rem; }
#sub-menu .depth3:before { top:0; background:#f5f5f5; }
#sub-menu .depth3 .sub-a { font-size:1.125rem; color:#ccc; }

#sub-menu .nav { position:absolute; top:50%; transform:translateY(-50%); width:20px; height:20px; border-radius:99px; display:flex; justify-content:center; align-items:center; cursor:pointer; z-index:9; }
#sub-menu .prev { left:-20px; }
#sub-menu .next { right:-20px; }
#sub-menu .swiper-button-disabled { display:none; }


@media (max-width: 1024px) {
	#sub-menu .prev { left:calc(-1 * var(--c-padding)); }
	#sub-menu .next { right:calc(-1 * var(--c-padding)); }
}

@media (max-width: 767px) {
	:root {
		--sub-menu-h:40px;
	}

	#sub-menu { margin-top:30px; }

	#sub-menu .sub-wrap li:not(:last-child) { margin-right:20px; }
	#sub-menu .depth2 .sub-a { font-size:1.125rem; }
	#sub-menu .depth3 .sub-a { font-size:1rem; }

	#sub-menu.on:before { opacity:0; }
    #sub-menu.on .c { background:#333; transition-delay:0ms; }
	#sub-menu.on .menu-tit { border-color:#666; }

    #sub-menu.on .sub-wrap { height:auto; visibility:visible; padding:15px 0; }
	#sub-menu.on .sub-wrap .sub-a { color:#888; }
}

#sub-top-navi {display: flex; justify-content: space-between; align-items: end;}
#sub-top-navi .head { font-size: 1.875rem; font-weight: 700; padding: 36px 0 16px 0}
#sub-top-navi .navi { display:flex; align-items:center; flex-wrap:wrap; font-size:.875rem; margin-bottom:30px; }
#sub-top-navi .navi span {color:#111;}
#sub-top-navi .navi svg:not(:first-of-type) { margin:0 5px; }

@media (max-width: 767px) {
	
	#sub-top-navi .navi { margin-bottom:20px; }
}