/* --------------------------- Header */
#header { display: flex; align-items: center; justify-content: space-between; padding:0 60px; position: fixed; top:0; left:0; z-index: 500; width:100%; height:70px; transition: all 0.35s; border-bottom: 1px solid rgba(255, 255, 255, 0.20); } 


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

@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-color: #F8F8F8; transition: all 0.3s; content: ''; opacity: 0; border-bottom:1px solid #ddd; } 

#header .navbar > ul { display: flex; position: relative; z-index: 2; height:inherit; font-weight: 500; } 
#header .navbar > ul > li > a { display: flex; align-items: center; padding:0 2.5rem; height:100%; font-size: 1.125rem; font-weight: 700; color:#fff; text-align: center; } 
#header .navbar > ul > li > ul { display: flex; gap: 0.625rem; flex-direction: column; padding-top: 1.5rem; visibility: hidden; text-align: center; transition: none; opacity: 0; transform: translateY(0.375rem); } 
#header .navbar > ul > li > ul li a:hover { text-decoration: underline; } 

@media screen and (max-width:1200px){
 #header .navbar > ul > li > a { font-size: 1rem; padding:0 2rem; } 
 #header .navbar > ul > li > ul li a { font-size:0.9375rem; } 
 }


#header .sidebar { display: flex; align-items: center; } 


/** 오픈 **/
#header.open { background-color: #fff; } 
#header.open .navbar > ul > li > a { color:#000; } 
/** 메뉴가 늘어날시 여기를 수정하세요.**/
#header.open .navbar::after { border-top: 1px solid #ddd; height: 260px; 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.open .sidebar img { filter: brightness(0) invert(0); } 

/** 스크롤 & 서브 **/
#header.on { background-color: #fff; border-color: rgba(229, 229, 229, 0.70); } 
#header.on .navbar > ul > li > a { color:#000; } 
#header.on .sidebar img { filter: brightness(0) invert(0); } 


@media screen and (max-width:1024px){
 #header { background-color: #fff; border-color: rgba(229, 229, 229, 0.70); } 
 #header .navbar > ul > li > a { color:#000; } 
 #header .sidebar img { filter: brightness(0) invert(0); } 

 #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; color:#000; } 
 #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:0.625rem; font-size:1.125rem; } 
 #header .navbar::after { display: none; } 
 #header.open .navbar { display: block; } 
 #header.open .navbar > ul > li > ul { display: none; } 

}

 @media screen and (min-width:1024px){
 .fp-viewing-media #header,
 .fp-viewing-family #header,
 .fp-viewing-global #header,
 .fp-viewing-careers #header,
 .fp-viewing-bottom #header { background-color: #fff; border-color:#E5E5E5; } 
 .fp-viewing-media #header .navbar > ul > li > a ,
 .fp-viewing-family #header .navbar > ul > li > a ,
 .fp-viewing-global #header .navbar > ul > li > a ,
 .fp-viewing-careers #header .navbar > ul > li > a ,
 .fp-viewing-bottom #header .navbar > ul > li > a { color:#000; } 
 .fp-viewing-media #header .sidebar img,
 .fp-viewing-family #header .sidebar img,
 .fp-viewing-global #header .sidebar img,
 .fp-viewing-careers #header .sidebar img ,
 .fp-viewing-bottom #header .sidebar img { filter: brightness(0) invert(0); } 
 }




#header .search_layer { display: flex; align-items: center; justify-content: center; position: absolute; top:0; left:0; width:100%; height:12.5rem; background-color: #fff; z-index: 9999; transform: translateY(-110%); transition: transform .35s ease; } 
#header .search_layer .search { display: flex; gap:1.25rem; border-bottom:2px solid #697078; width:40rem; height:4rem; padding:0 1rem; } 
#header .search_layer .search input[type="text"] { flex:1; font-size:1.5rem; border:0 none; outline: none; padding:0; } 
#header .search_layer #close_search { width:3.25rem; height:3.25rem; background-color:#000; border-radius: 100%; position: absolute; top:50%; transform: translateY(-50%); right:4rem; } 

@media screen and (max-width:1024px){
 #header .search_layer { padding:0 16px; } 
 #header .search_layer .search { width:100%; } 
 #header .search_layer #close_search { width:2.5rem; height:2.5rem; top:10px; right:10px; transform: translateY(0); } 
 }



/* 열림 상태 */
#header .search_layer.is-open { transform: translateY(0); } 
#header .dim { position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; visibility: hidden; transition: opacity .25s ease; z-index: 1000; } 
#header .dim.is-visible { opacity: 1; visibility: visible; }