@charset "UTF-8";

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

#sub-menu { position:relative; z-index:9; margin-bottom:50px; }
#sub-menu .c { display:grid; grid-template-columns: 1fr auto; grid-template-rows: repeat(2, auto); gap: 30px; 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 .depth2 { display:flex; flex-wrap:wrap; transition-duration: 400ms; margin:0 -5px; width:100%; grid-column: 1/3;}
#sub-menu .depth2 li { position:relative; margin:5px; }
/* #sub-menu .depth2 li:not(:last-child):before { content:""; position:absolute; left:100%; top:50%; transform:translateY(-50%); width:1px; height:14px; background:#ddd; } */

#sub-menu .depth2 li .sub-a { position:relative; display:flex; align-items:center; justify-content:center; height:100%; padding:8px 30px; color:#888; transition-duration: 400ms; border-radius:99px; border:1px solid #ddd; }



@media (max-width: 1024px) {
    #sub-top { padding-top:calc(var(--top-height)*2 + 10px); }

    #sub-menu { margin-bottom:40px; }
	#sub-menu .c { display:block; }

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

    #sub-menu .depth2 { margin:15px -2px 0; }
    #sub-menu .depth2 li { margin:2px; }
	#sub-menu .depth2 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 .depth2 { margin-top:10px; }
	#sub-menu .depth2 li .sub-a { padding:5px 15px; }
}