@charset "UTF-8";

/********************************************************
■ Sub Menu : 서브 메뉴 부분
********************************************************/
#sub-top { padding-top:var(--top-height); }

#sub-menu { position:relative; z-index:9; margin:var(--top-height) auto 50px; display:grid; grid-template-columns: 1fr auto; align-items: center; }

#sub-menu .navi { grid-column: 2/3; color:#aaa; font-size:.875rem; }
#sub-menu .navi span:not(:first-child) { padding-left:10px; }
#sub-menu .navi span:not(:last-child) { position:relative; padding-right:10px; margin-right:10px; }
#sub-menu .navi span:not(:last-child):after { content:"\f105"; position:absolute; left:100%; top:50%; transform:translateY(-50%); font-family: "Font Awesome 6 Free"; font-weight:900; }

#sub-menu .menu-tit { font-size:3.5rem; grid-row: 1/2; grid-column: 1/2; margin-bottom:0; }

#sub-menu .sub-wrap { position:relative; grid-column: 1/3; }
#sub-menu .sub-wrap .swiper-wrapper { margin:0 -5px; }
#sub-menu .sub-wrap li { width:auto; margin:5px; }
#sub-menu .sub-wrap .sub-a { position:relative; display:flex; align-items:center; justify-content:center; height:100%; transition-duration: 400ms; color:#888; }

#sub-menu .depth2 { margin-top:20px; }
#sub-menu .depth2 .sub-a { border:1px solid #ddd; font-size:1.125rem; padding:8px 30px; border-radius:99px; }
#sub-menu .depth2 li:hover .sub-a,
#sub-menu .depth2 li.on .sub-a { background:var(--main-color1); border-color:var(--main-color1); color:#fff; }

#sub-menu .depth3 { margin-top:5px; }
#sub-menu .depth3 .sub-a { padding:10px; }
#sub-menu .depth3 li:hover .sub-a,
#sub-menu .depth3 li.on .sub-a { color:var(--main-color1); }

#sub-menu .depth3 .sub-a span { position:relative; z-index:1; padding:0 10px; }
#sub-menu .depth3 .sub-a span:before { content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:0; height:10px; background:var(--main-color1); opacity:.3; z-index:-1; transition-duration: 400ms; }
#sub-menu .depth3 li:hover .sub-a span:before,
#sub-menu .depth3 li.on .sub-a span:before { width:100%; }


#sub-menu .nav { position:absolute; top:50%; transform:translateY(-50%); width:30px; height:30px; border-radius:99px; background:#fff; box-shadow:0 0 5px rgba(0,0,0,.2); display:flex; justify-content:center; align-items:center; color:#666; background:#fff; cursor:pointer; z-index:9; }
#sub-menu .prev { left:-5px; }
#sub-menu .next { right:-5px; }
#sub-menu .swiper-button-disabled { display:none; }


@media (max-width: 1024px) {
    #sub-menu { margin-bottom:40px; padding-top:10px; display:block; }

    #sub-menu .navi { margin-bottom:5px; }
    #sub-menu .menu-tit { font-size:2.5rem; }

	#sub-menu .sub-wrap { padding:0 10px; margin:0 -10px; }
    #sub-menu .sub-wrap .swiper-wrapper { margin:0 -2px; }
    #sub-menu .sub-wrap li { margin:2px; }

	#sub-menu .depth2 { margin-top:15px; }
	#sub-menu .depth2 .sub-a  { padding:10px 25px; font-size:1rem; }
	#sub-menu .depth3 { margin-top:0; }
	#sub-menu .depth3 .sub-a { font-size:.875rem; }
}

@media (max-width: 767px) {
    #sub-menu { margin-bottom:25px; }

    #sub-menu .menu-tit { font-size:2rem; }

    #sub-menu .sub-wrap { margin-top:10px; }

	#sub-menu .depth2 .sub-a { padding:5px 15px; }
	#sub-menu .depth3 .sub-a { padding:0 5px; }
}