@charset "utf-8"; 
/* 바디 오퍼플로우 */
body.on { height: 100% !important; overflow: hidden !important; } 

/* 서브 공통 레이아웃 */
.layout { position: relative; width: 100%; margin: 0 auto; max-width: 1400px; } 
@media (max-width:1400px){
.layout { padding:0 2rem; }
}

/* 공통 블라인드 */
.blind-bg { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 3; opacity: 0; transition: .3s; } 
.blind-bg.on { display: block;opacity: .5; } 

/* 헤더 */
.header { position: fixed;top:0;left:0;width:100%; z-index: 4; }  
.scroll .header, .header.on { border-bottom:1px solid #D9D9D9; }       

/* 헤더 상단 */
.header .header-logo {display: flex; width:13rem;height: 100%;align-items: center;justify-content: center; z-index: 3;flex-shrink: 0; }
.header .header-logo a { display: flex; height: 5rem; overflow: hidden;width: 100%; }
.header .header-logo a img { flex-shrink: 0; width:100%; height: 10rem;transition: all .3s; }
.header .header-container { display: flex;position: relative; } 
.header .header-container .layout { display: flex; max-width:1720px;  align-items: center; }
.header .header-container.top { background: #003C73; }
.header .header-container.top .layout { justify-content: flex-end;gap:0 2.4rem; }
.header .header-container.top .layout>div>button,
.header .header-container.top .layout>div>a { display: flex;gap:.4rem; }
.header .header-container.top .layout>div>button>i,
.header .header-container.top .layout>div>a>i { font-size:1.6rem;color:#fff;opacity: .7; }
.header .header-container.top .layout>div>button>span,
.header .header-container.top .layout>div>a>span { font-size:1.5rem;color:#fff; }
.header .header-container.top .layout .header-search  { max-width:32rem; width:100%; background: #315485; height: 4.5rem; }
.header .header-container.top .layout .header-search form { display: flex;align-items: center;padding:0 2.2rem;height:100%; }   
.header .header-container.top .layout .header-search form input[type="text"] { background: none;border:0;width:100%;height: auto;padding:0;color: rgba(255, 255, 255, 1);font-size:1.5rem;font-weight: 500;max-width:100%; }
.header .header-container.top .layout .header-search form input[type="text"]::placeholder{color: rgba(255, 255, 255, .7); }
.header .header-container.top .layout .header-search form i { font-size:1.8rem;opacity: 1;color:#fff; }
.header .header-container.top .layout .header-banner.empty { display:none; }
.header .header-container.top .layout .header-popup span, 
.header .header-container.top .layout .header-banner span { position:relative;display:flex;align-items: center;gap: .5rem; } 
.header .header-container.top .layout .header-popup span em,
.header .header-container.top .layout .header-banner span em { font-size: 1.2rem;width: 1.6rem;height: 1.6rem;border-radius: 50%;background: #1877CF;color: #fff;display: inline-flex;align-items: center;justify-content: center;}
@media (max-width:640px){
.header .header-container.top .layout { gap:0 1rem;justify-content: flex-start; padding:0 0 0 2rem; } 
.header .header-container.top .layout .header-search { margin-left:auto; }     
.header .header-container.top .layout .header-language { margin-right:2rem; }
.header .header-container.top .layout .header-search form { padding:0 2rem 0 1rem; } 
}      
@media (max-width:480px){
.header .header-container.top .layout .header-popup span em, .header .header-container.top .layout .header-banner span em { display:none; }
}   

/* 헤더 하단 */
.header .header-container.bottom { height: 8.8rem; }
.header .header-container.bottom .layout { justify-content: space-between;gap:0 4rem; }
.header .header-container .layout .header-menu { height: 100%; }
.header .header-container .layout .header-menu.on { display: none; }
.header .header-container .layout .header-menu>ul { display: flex; gap:7.2rem;height: 100%; }
.header .header-container .layout .header-menu>ul>li>a { height: 100%;display: flex;align-items: center; }
.header .header-container .layout .header-menu>ul>li>a>span {  color: #FFF;font-size: 2rem;font-style: normal;font-weight: 600;line-height: normal;text-align: center;}
.header .header-container .layout .header-menu>ul>li>div { visibility: hidden;opacity: 0; position: absolute;top:100%; padding:8rem 0;background: #fff; left:0; width:100%;max-width:1570px;left:50%;transform: translateX(-50%); display: flex; gap:10rem;height: 0; }
.header .header-container .layout .header-menu>ul>li>div.on { visibility: visible;opacity: 1;height: auto; }
.header .header-container .layout .header-menu>ul>li>div:before { width:100vw;left:50%;transform: translateX(-50%);content:"";height: 100%;position: absolute; top:0;background: #fff; z-index: -1; border-bottom:1px solid #d9d9d9;border-top:1px solid #d9d9d9; } 
.header .header-container .layout .header-menu>ul>li>div>strong { color:#222;font-size: 3.2rem;font-weight: 700;line-height: normal; min-width: 23rem;}
.header .header-container .layout .header-menu>ul>li>div>ul { display: flex; gap:4rem;width:100%;flex-wrap: wrap; }
.header .header-container .layout .header-menu>ul>li>div>ul>li { width:calc(25% - 3rem); }
.header .header-container .layout .header-menu>ul>li>div>ul>li>a { padding-left:1.6rem;position: relative;display: block;line-height: 1; }
.header .header-container .layout .header-menu>ul>li>div>ul>li>a:before { height: 2.4rem;position: absolute;top:0;left:0;content:"";display: block; border-left:1px solid #222; }
.header .header-container .layout .header-menu>ul>li>div>ul>li>a>span { color:#222;font-size: 2rem;font-style: normal;font-weight: 700;line-height: normal; }
.header .header-container .layout .header-menu>ul>li>div>ul>li>ul { display: flex;flex-direction: column;gap:1.2rem; padding:3.2rem 1.6rem 0 1.6rem;border-left:1px solid #d9d9d9;  }
.header .header-container .layout .header-menu>ul>li>div>ul>li>ul>li>a>span { color:#555;font-size: 1.6rem;font-style: normal;font-weight: 500;line-height: normal; }
.header .header-container .layout .header-menu>ul>li>div>ul>li>ul>li>a:hover>span { text-decoration: underline;color:#222; }
.header-blit { position: absolute;display: none;border-bottom:3px solid #003C73;bottom:0;height: 3px; }
.header-blit.on { transition: all .3s;display: block; }
.header .header-container .layout .header-menu>ul>li>div>ul>li:hover>a>span { color:#003C73;font-weight: 700; }
.header .header-container .layout .header-menu>ul>li>div>ul>li:hover>a:before { border-left:3px solid #003C73; }
@media (max-width:1600px){
.header .header-container .layout .header-menu>ul>li>div { padding: 6rem 2rem; }
}

/* 사이트맵 버튼 */
.header .header-container .layout .header-util .header-sitemap button i { font-size:2.4rem;color:#fff; }
.header.all { background: #fff; }
.header.all:before { display: none; }
.header.all .header-container .layout .header-util { margin-left:auto; }
.header.all .header-container .layout .header-util .header-sitemap button i { color:#222; font-size:2.4rem; }
.header.all .header-container .layout .header-util .header-sitemap button.on i { font-size:3rem; }
@media (max-width:1720px){
.header .header-container .layout { padding:0 2rem; }
.header .header-container .layout .header-menu>ul { gap:6rem; }
.header .header-container .layout .header-menu>ul>li>a>span { font-size:1.8rem; } 
}
@media (min-width:1024px){
.header.all .header-logo { display: none; }
.header.all .header-logo img { transform: translateY(-50%); }
}
@media (max-width:1280px){
.header .header-container .layout .header-menu>ul { gap:4rem; }
}
@media (max-width:1024px){
.header .header-container.bottom { height: 8rem; }
.header .header-container .layout .header-menu { display: none; }
}

/* 사이트맵 리스트 */
.sitemap-list { display: none; position: absolute;top:100%;width:calc(100vw + 1px);left:50%; height: calc(100vh - 12.5rem); background: #fff;overflow: hidden; transform: translateX(-50%); }
.pop-on .sitemap-list{ height: calc(100vh - 27.2rem); }  
.sitemap-list.on { display: block; }
.sitemap-list>ul { max-width:1560px; margin:0 auto; }
.sitemap-list ul li a { position: relative; display: block;line-height: 1; }
.sitemap-list>ul::-webkit-scrollbar { width: 8px; height: 5px;}
.sitemap-list>ul::-webkit-scrollbar-thumb { background-color: #003C73;}
.sitemap-list>ul::-webkit-scrollbar-track { background-color: transparent; }
@media (max-width:1570px){
.sitemap-list>ul { padding:0 2rem; }
}
@media (min-width:1024px){
.sitemap-list>ul { display: flex !important;flex-direction: column;overflow-y: auto;height: 100%; } 
.sitemap-list>ul>li { display: flex;flex-direction: column;gap:4rem;border-top:1px solid #D9D9D9;padding:4.8rem 0; }
.sitemap-list>ul>li:first-of-type { border-top:0;padding-top:0; }
.sitemap-list>ul>li>a>span { color:#222;font-size: 3.2rem;font-style: normal;font-weight: 700;line-height: normal; }
.sitemap-list>ul>li>ul { display: flex !important;gap:4rem;flex-wrap: wrap; }
.sitemap-list>ul>li>ul>li { width:calc(20% - 3.2rem); display: flex;flex-direction: column; }
.sitemap-list>ul>li>ul>li>a { padding: 0 1.6rem; }
.sitemap-list>ul>li>ul>li>a>span { color:#222;font-size: 2rem;font-style: normal;font-weight: 600;line-height: normal; }
.sitemap-list>ul>li>ul>li:hover>a>span { color: #003C73;font-weight: 700; }
.sitemap-list>ul>li>ul>li>a.on>span { color: #003C73;font-weight: 700; }
.sitemap-list>ul>li>ul>li>ul { padding:1.6rem 1.6rem 0 1.6rem; border-left:1px solid #D9D9D9;display: flex !important;gap:1.2rem;flex-direction: column; }
.sitemap-list>ul>li>ul>li>a.on>span { color:#003C73; font-weight: 700; } 
.sitemap-list>ul>li>ul>li>a:before { content:"";display: block;position: absolute; top:0; left:0;border-left:1px solid #222;height: 2.4rem; }
.sitemap-list>ul>li>ul>li>a.on:before { border-left:3px solid #003C73; }
.sitemap-list>ul>li>ul>li>ul>li>a>span { display:block;color:#555;font-size: 1.6rem;font-weight: 500;line-height:2.3rem; }
.sitemap-list>ul>li>ul>li>ul>li>a:hover>span { color:#222;text-decoration: underline; }
.sitemap-list>ul>li>ul>li>ul>li>a.on>span { color:#222;text-decoration: underline; }
} 
@media (max-width:1024px) {
.sitemap-list { width:50rem; left:auto; right:0; transform: none; border-top:1px solid #d9d9d9; }
.sitemap-list ul { display: none; } 
.sitemap-list>ul { display: block; padding:0;overflow-y: auto;height: 100%; }
.sitemap-list>ul>li { border-top:1px solid #d9d9d9; }
.sitemap-list>ul>li:first-of-type { border-top:0; }
.sitemap-list>ul>li>a { padding: 2rem;position: relative; }
.sitemap-list>ul>li>a.is:before { position: absolute;top:50%;right:2rem;transform: translateY(-50%); content:"\ea4e";font-family: "remixicon"; font-size: 2.4rem; transition: all .3s; }
.sitemap-list>ul>li>a.is.on:before { transform: translateY(-50%) rotate(180deg); }
.sitemap-list>ul>li>a>span { font-size:2rem;color:#222; }
.sitemap-list>ul>li>ul { border-top:1px solid #d9d9d9;padding:2rem;background: #003C73; }
.sitemap-list>ul>li>ul.on { border-color:#003c73;display:block; }
.sitemap-list>ul>li>ul>li>a{ padding:1rem 0;position: relative; }
.sitemap-list>ul>li>ul>li>a.is:before { position: absolute;top:50%;right:0;transform: translateY(-50%); content:"\ea12";font-family: "remixicon"; font-size: 2rem; transition: all .3s; color:#fff; }
.sitemap-list>ul>li>ul>li>a.is.on:before { transform: translateY(-50%) rotate(45deg); }
.sitemap-list>ul>li>ul>li>a>span { font-size:1.8rem; color:#fff; }
.sitemap-list>ul>li>ul>li>a.on>span { text-decoration: underline; } 
.sitemap-list>ul>li>ul>li>ul { border-radius:.5rem; border-top:1px solid #d9d9d9; padding:1rem; background: #fff; }
.sitemap-list>ul>li>ul>li>ul.on { display:block; }
.sitemap-list>ul>li>ul>li>ul>li { position: relative;padding-left:.3rem; }
.sitemap-list>ul>li>ul>li>ul>li:before { border-radius:50%; content:"";display: block;position: absolute;top:1.4rem; width:.5rem; height: .5rem; background: #222; left:0; }
.sitemap-list>ul>li>ul>li>ul>li>a { padding:1rem; }
.sitemap-list>ul>li>ul>li>ul>li>a>span { font-size:1.6rem; color:#424242; }
.sitemap-list>ul>li>ul>li>ul>li>a.on>span { text-decoration: underline; }
} 
@media (max-width:640px){  
.sitemap-list { width:100%; }
}

/* 퀵메뉴 */    
.quickmenu { position: fixed; top:50%; z-index: 2; transform: translateY(-50%);  display: flex;border-radius: 1.6rem 0 0 1.6rem;overflow: hidden; right: calc(-39.2rem + 6rem); transition: all .5s; }
.quickmenu.on { right:0; } 
.quickmenu .quickmenu-btn { width:6rem;background: #253747; padding:2.6rem 0 0 0; display: flex; flex-direction: column; align-items: center; }
.quickmenu .quickmenu-btn .quickmenu-open { display: flex;gap:.6rem;flex-direction: column;align-items: center; }
.quickmenu .quickmenu-btn .quickmenu-open span {  writing-mode: vertical-rl;color: #FFF;font-family: "Montserrat";font-size: 1.6rem;font-style: normal;font-weight: 600;line-height: 150%;}
.quickmenu .quickmenu-btn .quickmenu-open i { color:#fff;font-size:2rem; }
.quickmenu.on .quickmenu-btn .quickmenu-open i { transform: rotate(180deg); }
.quickmenu .quickmenu-btn .quickmenu-sns { margin-top:auto; padding-bottom:2.8rem; }
.quickmenu .quickmenu-btn .quickmenu-sns  ul { display: flex;flex-direction: column; gap:1.8rem;  }
.quickmenu .quickmenu-btn .quickmenu-sns  ul li a img { width:2rem; }
.quickmenu .quickmenu-list { padding:4rem;background: #243F57; width:33.2rem; height:46.6rem; }
.quickmenu .quickmenu-list ul { display: flex;flex-wrap: wrap; width:calc(24rem + 1.2rem);gap:1.2rem;display:none; }
.quickmenu.on .quickmenu-list ul { display:flex; }
.quickmenu .quickmenu-list ul li a { width:12rem;height: 12rem;display: flex; background: rgba(245, 248, 253, 0.10); border-radius: .8rem;align-items: center;justify-content: center; gap:.8rem; flex-direction: column; }
.quickmenu .quickmenu-list ul li a img { width:4.8rem; }
.quickmenu .quickmenu-list ul li a img:last-of-type { display: none; } 
.quickmenu .quickmenu-list ul li a span { color: #FFF;font-size: 1.6rem; font-style: normal;font-weight: 500; line-height: normal; }
.quickmenu .quickmenu-list ul li a:hover img:first-of-type { display: none; }
.quickmenu .quickmenu-list ul li a:hover img:last-of-type { display: block; }
.quickmenu .quickmenu-list ul li a:hover { background: #fff; }
.quickmenu .quickmenu-list ul li a:hover span { color:#003C73; }
@media (max-width:640px){
.quickmenu { bottom:-26.5rem;top:auto;transform: none;right:auto;width:100%;flex-direction: column; height:auto; border-radius: 1.6rem 1.6rem 0 0; } 
.quickmenu.on { right: auto;bottom:0; }
.quickmenu .quickmenu-btn { width:100%; flex-direction: row;padding:2.6rem 2rem;justify-content: space-between; }        
.quickmenu .quickmenu-btn .quickmenu-open i { transform: rotate(90deg); }
.quickmenu.on .quickmenu-btn .quickmenu-open i { transform: rotate(-90deg); }    
.quickmenu .quickmenu-btn .quickmenu-open { flex-direction: row; }
.quickmenu .quickmenu-btn .quickmenu-open span { writing-mode:inherit; } 
.quickmenu .quickmenu-btn .quickmenu-sns { margin:0;padding:0; }
.quickmenu .quickmenu-btn .quickmenu-sns ul { flex-direction:row; }    
.quickmenu .quickmenu-list { padding:2.6rem 2rem;width:auto;height:auto; }  
.quickmenu .quickmenu-list ul { width:100%; display:flex; }     
.quickmenu .quickmenu-list ul li { width: calc(33.333% - .8rem); }
.quickmenu .quickmenu-list ul li a { width:100%;height: 10rem; }  
.quickmenu .quickmenu-list ul li a span { font-size:1.4rem; } 
}
@media (min-width:640px) and (max-height:800px){ 
.quickmenu { top: auto;bottom: 10rem;transform: none;right: calc(-39.2rem + 10rem); }   
.quickmenu .quickmenu-list { padding:2rem;width: 29.2rem;height: 42.5rem; }         
}   
  
/* 상단으로 이동 */
.page-top { width:5.6rem;height: 5.6rem;display: flex;align-items: center; justify-content: center;background: #003C73; position: fixed; right:2.4rem;bottom:10rem;z-index: 2;border-radius: 50%; visibility: hidden; opacity: 0; transform: translateY(-5rem);transition: all .6s; }
.page-top i { color:#fff;font-size:2.4rem; }
.page-top.on { transform: translateY(0);opacity: 1; visibility: visible; }
@media (min-width:640px) and (max-height:800px){ 
.page-top { bottom:2rem; }
}   

/* 푸터 */
#footer { position: relative; padding:6rem 0 8rem 0; background: #253747; } 
#footer .layout { padding:0 27rem 0 0; }
#footer .layout .footer-logo { display: flex; position: absolute; bottom:0; right:0;  align-items: center;gap:2.4rem; } 
#footer .layout .footer-logo .logo01 { width:8.6rem; }
#footer .layout .footer-logo .logo02 { width:8rem; }
#footer .layout .footer-util { margin-bottom:3rem; } 
#footer .layout .footer-util ul { display: flex; gap:3rem; } 
#footer .layout .footer-util ul li:first-of-type a span { color:#fff; font-weight: 700; } 
#footer .layout .footer-util ul li a { position: relative;display: flex; gap:.5rem; }
#footer .layout .footer-util ul li a span { color: rgba(255, 255, 255, 0.70);font-size: 1.6rem;font-style: normal;font-weight: 400;line-height: 150%; } 
#footer .layout .footer-util ul li a:hover span { text-decoration: underline; }
#footer .layout .footer-util ul li a[target=_blank]:after { display: block; color:#fff; font-size:2rem; font-family: "remixicon"; content:"\f0f3"; } 
#footer .layout address { display: flex; flex-direction: column; gap:.5rem; } 
#footer .layout address p { color: rgba(255, 255, 255, 0.70);
font-size: 1.6rem;font-style: normal;font-weight: 400;line-height: 150%; } 
#footer .layout address p:has(span) { display:flex;gap:0 1rem; }
#footer .layout address p br { display: none; }
#footer .layout address p span a { color: rgba(255, 255, 255, 0.70); }
#footer .layout .footer-site { position: absolute;top:0;right:0; max-width:19rem; width:100%; }
#footer .layout .footer-site button { padding:1.2rem 0;border-bottom:2px solid #fff;width:100%;display: flex;justify-content: space-between; }
#footer .layout .footer-site button span { color: #FFF;font-size: 1.6rem;font-style: normal;font-weight: 400;line-height: 150%; }
#footer .layout .footer-site button i { color:#fff; font-size:1.6rem; }
#footer .layout .footer-site button.on i { transform: rotate(180deg); }
#footer .layout .footer-site ul { position: absolute;bottom:100%;width:100%;background: #fff;padding:2rem;display: none;gap:1rem; border-radius: 1rem;}
#footer .layout .footer-site ul.on { display: flex;flex-direction: column; }
#footer .layout .footer-site ul li a span { color:#222; font-weight: 400; }
#footer .layout .footer-site ul li a:hover span { color:#1877CF;text-decoration: underline;font-weight: 500; }
@media (max-width:1400px){
#footer .layout { padding:0 27rem 0 2rem; }
#footer .layout .footer-logo { right:2rem; }   
#footer .layout .footer-site { right:2rem; }
}
@media (max-width:640px){
#footer { padding:6rem 0 10rem 0; }
#footer .layout { padding:0 2rem; }
#footer .layout .footer-logo { right: auto;position: relative;top: auto;margin-bottom:2rem; }
#footer .layout .footer-site { right: auto;position: relative;top:auto;margin-top:2rem; }
#footer .layout address p { flex-direction: column; }
#footer .layout address p span { display: block; }
}
@media (max-width:420px){
#footer .layout .footer-site { max-width:calc(100% - 10rem); }     
}