@charset "UTF-8"; 

/********************************************************
■ Sub Menu : 서브 메뉴 부분
********************************************************/
:root { 
--sub-menu-h:70px; 
 } 
#sub-menu { position:relative; z-index:99; } 
#sub-menu:before,
#sub-menu:after { content:""; position:absolute; left:50%; top:0; bottom:0; transform:translateX(-50%); width:100vw; z-index:-1; } 
#sub-menu.depth3on:before { background:#f8f8f8; } 
#sub-menu:after { height:var(--sub-menu-h); background:#fff; border-bottom:1px solid #ddd; } 

body.submenu-fix #sub-menu { position:fixed; left:0; top:0; right:0; } 
body.submenu-fix #sub-menu.depth3on:before { top:0; z-index:5; } 
body.submenu-fix #sub-top { padding-bottom:var(--sub-menu-h); } 
body.submenu-fix #sub-menu .depth3 {  z-index:9; } 

#sub-menu .depth2 > ul { display:flex; justify-content:center; height:var(--sub-menu-h); } 
#sub-menu .depth2 > ul > li { position:relative; flex:0 1 14.5%; padding:0 .5em; } 
#sub-menu .depth2 > ul > li:not(:last-child):after { content:""; position:absolute; top:50%; transform:translateY(-50%); left:100%; height:10px; width:1px; background:#ddd; } 

#sub-menu .depth2 > ul > li > .sub-a { position:relative; display:flex; align-items:center; justify-content:center; height:100%; width:100%; white-space: nowrap; color:#666; transition-duration: 400ms; } 
#sub-menu .depth2 > ul > li > .sub-a:before { content:""; position:absolute; left:50%; transform:translateX(-50%); width:0; bottom:0; height:3px; background:#333; transition-duration: 400ms; } 
#sub-menu .depth2 > ul > li > .sub-a span { line-height:1.2; word-break: normal; } 
#sub-menu .depth2 > ul > li > .sub-a i { font-size: var(--label-xs);margin-left :var(--spacing-4);} 
#sub-menu .depth2 > ul > li:hover > .sub-a,
#sub-menu .depth2 > ul > li.on > .sub-a { font-weight:600; color:#333; } 
#sub-menu .depth2 > ul > li:hover > .sub-a:before,
#sub-menu .depth2 > ul > li.on > .sub-a:before { width:100%; } 

#sub-menu .menu-tit { position:relative; width:100%; height:50px; font-size:1.125rem; align-items:center; justify-content:space-between; display:none; } 
#sub-menu .menu-tit i { font-size:.875rem; } 


#sub-menu .depth2 { } 
#sub-menu .depth2 > ul { transition-duration: 400ms; } 
#sub-menu .depth2 .sub-a { font-size:1.125rem; } 
#sub-menu .depth3 { 
display: flex; 
flex-direction: column; 
justify-content: center; 
width: 120%; 
max-width: 200px; 
position: absolute; 
top: 100%; 
left: 50%; 
transform: translateX(-50%); 
background: var(--color-primary80); 
color: var(--color-silver0); 
white-space: unset; 
height: 0;
max-height: 0px; 
overflow: hidden; 
padding: 0rem 0.5rem; 
word-break: keep-all; 
transition-duration: 400ms; 
 } 

#sub-menu .depth3 .sub-a { 
font-size: var(--links-sm); 
color: var( --color-silver0); 
padding: 0 var(--spacing-4); 
display: block; 
word-break: keep-all; 
white-space: unset; 
transition-duration: 400ms; 
 } 
 #sub-menu .depth3 .sub-a:hover { 
color: var( --color-silver50)
 } 
#sub-menu .depth2 > ul > li:hover .depth3 { 
overflow: visible; 
padding: 1rem 0.5rem; 
height: auto;
max-height: unset; 
 } 
#sub-menu .depth2 > ul > li:hover .depth3 .sub-a { 
padding: var(--spacing-4); 
 } 

#sub-menu .nav { position:absolute; top:calc(var(--sub-menu-h)*1.5); 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 (min-width: 1024px) { 
#sub-menu { padding-right:var(--top-right-w); } 
 } 

@media (max-width: 1024px) { 
:root { 
--sub-menu-h:50px; 
 } 
#sub-menu { background:#fff; transition-delay:350ms;  } 

body.scrolled #sub-menu { z-index:999; } 
#sub-menu:after { height:calc(100% - var(--sub-menu-h)); border:none; } 

#sub-menu .depth2 > ul > li { padding:5px 0; } 
#sub-menu .depth2 > ul > li > .sub-a { padding:5px var(--c-padding); color:#999; } 
#sub-menu .depth2 > ul > li > .sub-a:before { display:none; } 
#sub-menu .depth2 > ul > li:hover > .sub-a,
#sub-menu .depth2 > ul > li.on > .sub-a { color:var(--color-primary80); } 
#sub-menu .depth2 > ul > li > .sub-a i {margin-left :0;} 
#sub-menu .menu-tit { border-bottom:1px solid transparent; transition-delay:350ms; display:flex; font-size:1rem; } 


#sub-menu .depth2 > ul { position:absolute; top:50px; left:0; right:0; display:block; height:0; padding:0 5px; overflow:hidden; background:#fff; border-bottom: 1px solid #ddd; z-index:99; } 
#sub-menu .depth2 > ul > li:after { display:none; } 
#sub-menu .depth2 .sub-a { font-size:1rem; } 


#sub-menu.on { transition-delay:0ms; border-bottom:1px solid #666; } 
#sub-menu.on .depth2 ul { height:auto; padding-bottom:15px; visibility:visible; overflow:visible; } 
#sub-menu.on .depth2 > ul { padding-left: 1rem; padding-right: 1rem; } 
#sub-menu.on .depth3 ul { font-size: var(--link-sm); } 
#sub-menu .depth3 { 
position: relative; 
background: var(--color-silver0); 
color: var(--color-silver70); 
padding: 1rem 0.5rem; 
height: auto;
max-height: unset; 
text-align: center; 
overflow: visible; 
} 
#sub-menu .depth3 .sub-a { 
color: var( --color-silver70); 
padding:var(--spacing-2) var(--spacing-4); 
 } 
 #sub-menu .depth3 .sub-a:hover { 
color: var( --color-silver50)
 } 
 #sub-menu .depth2 > ul > li:hover .depth3 { 
padding: 1rem 0.5rem; 
height: auto;
max-height: unset; 
 } 
#sub-menu .depth2 > ul > li:hover .depth3 .sub-a { 
padding:var(--spacing-2) var(--spacing-4); 
 } 

 }