/*-------------------------------- 해더 */
.header { border-bottom:1px solid rgba(255, 255, 255, 0.10); position: fixed; top:0; left:0; z-index: 9999; width:100%; height:75px; transition:background 0.3s; } 
.header .inner { display: flex; align-items: center; margin: 0 auto; position: relative; max-width: 1760px; height:100%;justify-content:space-between} 

.header .gnb::after { display: block; position: absolute; top:100%;left: 50%; transform: translateX(-50%); z-index: 0; width:100vw;  background:url(../../images/common/gnb_bg.svg) no-repeat #f5f5f5;background-size: cover; content: ''; opacity: 0;height: 0;border-top:1px solid var(--gray-100);transition: all 0.1s;} 
.header.active .gnb::after{height: 194px;opacity: 1;}

.header h1 a { display: block; width:180px; height:24px; background-image: url("../../images/common/logo_white.svg"); background-repeat: no-repeat; background-size: cover; } 

.header .gnb{display: flex;height: 100%;}
.header .gnb > li{margin-right: 5rem;position: relative;display: flex;justify-content: center;align-items: center;}
.header .gnb > li:last-child{margin-right: 0;}
.header .gnb > li > a{color: #fff;font-size: 1.125rem;letter-spacing: -0.72px;}
.header .gnb > li > ul{position: absolute;left: 50%;top: calc(100% + 10px);z-index: 999;transform: translateX(-50%);overflow: hidden;min-width:130px;transition:transform 0.4s;opacity: 0;display: none;}
.header .gnb > li > ul > li{margin-bottom: 5px;}
.header .gnb > li > ul > li > a{display:block;padding: 14px;text-align: center;font-size:17px;transition: all 0.5s;margin-bottom: 5px;font-weight: 500;letter-spacing: -0.68px;}
.header.active .gnb > li:nth-child(1) a{border-bottom: 0;}
.header.active .gnb > li:nth-child(1) ul{display: none !important;}
.header.active .gnb > li ul{opacity: 1;display: block;}
.header .gnb > li > ul > li > a:hover{color: #717FC1;font-weight: 700;}
.header .gnb > li > a .text_gnb_wrap { display: block; overflow: hidden; position: relative;font-weight: 500;} 
.header .gnb > li > a .text_gnb { display: block; overflow: hidden; position: relative; } 
.header .gnb > li > a .text_gnb_hidden { position: absolute; top: 100%; left: 0; width: auto; width: 100%; text-align: center } 

.header.active { border-color:var(--gray-100, #E5E5E5); background-color: rgba(255, 255, 255, 1); } 
.header.active h1 a { background-image: url("../../images/common/logo_color.svg"); } 
.header.active .gnb li a{color: var(--gray-950);}
.header.active .btn_menu,
.header.active .btn_search { background-color: #132254; } 

.gnb_line { position:absolute; bottom:0; height:0.1875rem; background:var(--primary);z-index: 9999;} 


.header .btn_nav{display: flex;}
.header .btn_menu,
.header .btn_search { display: flex; align-items: center; justify-content: center; width:50px; height:50px; transition:background 0.3s; border-radius: 8px } 
.header .btn_search{margin-right: 2px;}

.search_layer{background: url(../../images/common/gnb_bg.svg) no-repeat #f5f5f5;background-size: cover;padding-top: 3.5rem;padding-bottom: 4.75rem;display: none;transition: opacity .25s, transform .25s;}
.search_layer .search_box{max-width: 593px;width: calc(100% - 32px);margin: auto;display: flex;justify-content: center;border-bottom: 2px solid var(--primary, #102169);padding-bottom: .625rem;}
.search_layer input{border: 0;background: transparent;height: 50px;font-weight: 500;font-size: 1.375rem;letter-spacing: -0.88px;width: calc(100% - 120px);}
.search_layer input::placeholder{color: var(--gray-350, #A6A6A6);}
.search_layer .search_btn{background: url(../../images/common/search_btn.svg) no-repeat center;width: 50px;height: 50px;text-indent: -9999px;margin-left: auto;}
.search_layer .search_close{background: url(../../images/common/search_close.svg) no-repeat center;width: 50px;height: 50px;text-indent: -9999px;margin-left: 5px;}
.search_layer input:focus {outline: none;box-shadow: none;}

@media screen and (max-width:1780px){
 .header .inner { padding-right:16px; padding-left:16px; } 
 }

/** 스크롤 on **/
.header.on { border-color:var(--gray-100, #E5E5E5); background-color: rgba(255, 255, 255, 1); } 
.header.on h1 a { background-image: url("../../images/common/logo_color.svg"); } 
.header.on .gnb li a{color: var(--gray-950);}
.header.on .btn_menu,
.header.on .btn_search { background-color: #132254; } 



/*-------------------------------- 레이어 메뉴 */
.layer_menu { position: fixed; top:0; bottom:0; right:0; z-index: 9999; width:630px; height:100%; visibility: hidden; background-color: #fff; transition: all 0.5s ease-out; transform: translateX(100%); } 
.layer_menu .layer_cont { display: flex; justify-content: space-between; flex-direction: column; padding:64px 36px 36px; overflow-y:auto; height:100%; } 

/** 다국어 **/
.layer_menu .layer_cont .lang_list { display: flex; gap:4px; align-items: center; } 
.layer_menu .layer_cont .lang_list li a { display: flex; align-items: center; justify-content: center; border: 1px solid rgba(113, 128, 193, 0.50); width:70px; height:28px; font-family: var(--kanit); font-size: 15px; font-weight: 500; color: var(--gray-500, #808080); text-transform: uppercase; border-radius: 10px; } 
.layer_menu .layer_cont .lang_list li.active a { border-color: var(--primary); background: var(--primary, #102169); color:#fff; } 

/** 메뉴 **/
.layer_menu .menu_wrap { display: flex; align-items: flex-start; justify-content: center; flex:1;padding-top:100px; padding-bottom:60px;} 
.layer_menu .menu_wrap .menu_list { display: flex; gap:30px;  flex-direction: column; width: 100%; } 
.layer_menu .menu_wrap .menu_list > li { text-align: center; transition: transform .5s ease, opacity .5s ease; opacity: 0; transform: translateX(-50px); } 
.layer_menu.closing .menu_wrap .menu_list > li { transition-delay: 0s !important; opacity: 0; transform: translateX(-50px); } 

.layer_menu .menu_wrap .menu_list > li:nth-child(1) { transition-delay: 0.15s; } 
.layer_menu .menu_wrap .menu_list > li:nth-child(2) { transition-delay: 0.30s; } 
.layer_menu .menu_wrap .menu_list > li:nth-child(3) { transition-delay: 0.45s; } 
.layer_menu .menu_wrap .menu_list > li:nth-child(4) { transition-delay: 0.60s; } 
.layer_menu .menu_wrap .menu_list > li:nth-child(5) { transition-delay: 0.75s; } 
.layer_menu .menu_wrap .menu_list > li:nth-child(6) { transition-delay: 0.90s; } 
.layer_menu .menu_wrap .menu_list > li > a { font-size: 40px; font-weight: 600; color: var(--gray-yk, #888); letter-spacing: -0.04em; transition: all 0.3s; } 
.layer_menu .menu_wrap .menu_list > li > a:hover {color:var(--primary);}

/* 닫힘 */
.menu_wrap .menu_list > li > ul { display:flex; gap:20px; flex-direction:column; padding-top:0;  overflow:hidden;  max-height:0; transition:none;  pointer-events:none; }
/* 열림 */
.menu_wrap .menu_list > li.is-open > a {color:var(--primary);}
.menu_wrap .menu_list > li.is-open > ul {padding-top:24px; ; max-height:600px; font-size:20px; font-weight: 500;   transition:max-height 1s ease; pointer-events:auto;} 
.menu_wrap .menu_list > li.is-open > ul li a {color:#555555;}
.menu_wrap .menu_list > li.is-open > ul li a:hover {text-decoration: underline;}

/** 로고 **/
.layer_menu .layer_footer { display: flex; gap:40px; align-items: center; flex-direction: column; } 
.layer_menu .layer_footer .yk img { width:100%; max-width:auto; } 

/** 닫기 **/
.layer_menu .btn_layer_close { position: absolute; top:40px; right:36px; width:64px; height:64px; } 
.layer_menu .btn_layer_close img { width:100%; height:100%; } 

/** 배경 **/
.layer_dimm { position:fixed; top:0; left:0; z-index:1000; width:100%; height:100%; visibility:hidden; background: rgba(35, 35, 35, 0.70); transition: opacity .3s ease; opacity:0; } 


/** 오픈 **/
.layer_menu.on { visibility: visible; transform: translateX(0%); } 
.layer_menu.on .menu_wrap .menu_list li { opacity: 1; transform: translateX(0); } 

.layer_dimm.on { visibility: visible; opacity:1; } 


/*-------------------------------- 반응형 시작 */
@media screen and (max-width:1024px) {
    .header .gnb{display: none;}
}


@media screen and (max-width:768px) {
.layer_menu.on{width:100%}
.layer_menu .menu_wrap .menu_list > li > a{font-size: 1.125rem;}
.menu_wrap .menu_list > li.is-open > ul li a{font-size: 1rem;}
}

@media screen and (max-width:480px) {
    .header h1 a{width:140px;background-size: 140px;}
    .layer_menu .btn_layer_close{width:40px;height: 40px;top:20px;right:20px}
    .layer_menu .btn_layer_close img{width:40px}

    .layer_menu .menu_wrap{padding-top: 50px;}

}