@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; margin-top:30px; 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%; padding:8px 30px; transition-duration: 400ms; border-radius:99px; color:#888; }

#sub-menu .depth2 .sub-a { border:1px solid #ddd; }
#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 !important; }
#sub-menu .depth3 .sub-a { background:#eee; }
#sub-menu .depth3 li:hover .sub-a,
#sub-menu .depth3 li.on .sub-a { background:#fff; border:1px solid var(--main-color1); color:var(--main-color1); box-shadow:2px 2px 3px rgba(0,0,0,.15); }

#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:2px; }
#sub-menu .next { right:2px; }
#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 { margin-top:15px; }
    #sub-menu .sub-wrap .swiper-wrapper { margin:0 -2px; }
    #sub-menu .sub-wrap li { margin:2px; }

	#sub-menu .sub-wrap li .sub-a { padding:10px 25px; 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 .sub-wrap li .sub-a { padding:5px 15px; }
}