/* --------------------------- Header */
.header { display: flex; align-items: center; justify-content: space-between; padding:0 3.75rem; position: absolute; top:0; left:0; z-index: 999; width:100%; height:5rem; background-color: #fff; transition: all 0.35s; } 
.header h1 { position: relative; z-index: 5; font-family: var(--prostoOne); font-size: 1.625rem; } 

@media screen and (max-width:1430px) {
  .header { padding:0 16px; } 
 }

@media screen and (max-width:1024px){
 .header {box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);} 
}

@media screen and (max-width:640px){
 .header {position: fixed;} 
}






.header .navbar { display: flex; align-items: center; justify-content: center; height:inherit; } 
.header .navbar::after { display: block; position: absolute; top:100%; left:0; z-index: 0; width:100%; height:0; background:#fff url("../../images/bg_gnb.png") no-repeat top center; background-color: #fff; transition: all 0.3s; content: ''; opacity: 0; } 

.header .navbar > ul { display: flex; position: relative; z-index: 2; height:inherit; font-weight: 500; letter-spacing: -0.64px; } 
.header .navbar > ul > li > a { display: flex; align-items: center; padding:0 50px; height:100%; font-size: 1.1875rem; font-weight: 600; color: var(--gray-900, #1A1A1A); letter-spacing: -0.34px;} 
.header .navbar > ul > li > ul { display: flex; gap: 1.25rem; flex-direction: column; padding-top: 1.5rem; visibility: hidden; text-align: center; transition: none; opacity: 0; transform: translateY(6px); } 
.header .navbar > ul > li > ul li a {font-size:1.0625rem;}
.header .navbar > ul > li > ul li a:hover { text-decoration: underline; } 

/** 메뉴가 늘어날시 여기를 수정하세요.**/
.header.open .navbar::after { border-top: 1px solid #ddd; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04); height: 230px; opacity: 1; } 
.header.open .navbar > ul > li > ul { visibility: visible; transition:opacity 0.2s ease, transform 0.2s ease, visibility 0s; transition-delay: 0.35s, 0.35s, 0s; opacity: 1; transform: translateY(0); } 

.header .sidebar {flex-shrink: 0;}
.header #btn_sitemap { width:40px; height:40px; background:url("../../images/btn_sitemap.svg"); background-size: cover; } 


html[lang="en"] .header .navbar > ul > li > a { padding:1rem 56px; } 
html[lang="en"] .header .navbar > ul > li > ul li a { font-size:1rem;}



@media screen and (max-width:1280px){
 .header .navbar { display: none; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); position: absolute; top:100%; left:0; width:100%; height:auto; background-color: #fff; } 
 .header .navbar ul { flex-direction: column; width:100%; background-color: #fff; color:#000; } 
 .header .navbar > ul > li > a { justify-content: center; padding:1rem; border-top:1px solid #e6e6e6; font-size:1.2rem; } 
 .header .navbar > ul > li > ul { gap:0; flex-direction: column; padding:1rem; background-color: #fafafa; color:#000; text-align: left; text-align: center; } 
 .header .navbar > ul > li > ul > li > a { display: block; padding:1rem; font-size:1.125rem; } 
 html[lang="en"] .header .navbar > ul > li > ul li a { font-size:1.125rem;}
 .header .navbar::after { display: none; } 

 .header.open .navbar { display: block; } 
 .header.open .navbar > ul > li > ul { display: none; } 
 }