@charset "utf-8";
/* 헤더 */
.header {position: fixed;width: 100%;left: 0;top: 0;z-index: 999999;}
.header__top {padding:1.5rem 0;background: #fff;border-bottom: 1px solid #01B49F;}
.header__top .inner{display: flex;justify-content: space-between;align-items: center;}
.header__top .logo a{display: flex;}
.header__top .top-right{display: flex;gap:1.4rem;border-radius:4.0rem;border: 1px solid #DEE5EE;background: #F7F9FB;padding: 0 1rem;}
.header__top .top-right a{padding: .8rem;color: var(--Gray_80, #565656);font-size: 1.4rem;font-weight: 600;letter-spacing: -0.056rem;}
.header__top .top-right .top-sitemap{display: flex;align-items: center;gap: .6rem;}
.header__top .top-right .top-sitemap__icon{width: 16px;height: 16px;background: url(../images/common/ico_sitemap.svg) no-repeat center;background-size: contain;}
.header .header__bottom{max-width: var(--Size_Inner); margin: 0 auto;width: calc(100% - 40px);padding: 0 6rem;}
.header .header__bottom .inner{display: flex;justify-content: space-between;align-items: center;background: #fff;padding: 0 2.1rem;border-radius: 0 0 2rem 2rem;background: #FFF;border-right: 1px solid #2E98D0;border-bottom: 1px solid #2E98D0;border-left: 1px solid #2E98D0;box-shadow: 2px 4px 4px 0 rgba(0, 0, 0, 0.04);width: 100%;}
.header .gnb .gnb__list{display: flex;align-items: center;}
.header .gnb .gnb__item{position: relative;}
.header .gnb .gnb__link{font-size: 1.8rem;letter-spacing: -0.072rem;font-weight: 600;padding:1.5rem 3.5rem;display: block;white-space: nowrap;}
.header .gnb .gnb__depth{position: absolute;left: 0;top: calc(100%);background: var(--Primary);z-index: 5;display: none;min-width: 140px;padding: 15px;width: 100%;}
.header .gnb .gnb__depth li a{display: block;padding: 5px;font-size: 1.5rem;transition: all 0.3s;font-weight: 500;color: #fff;letter-spacing: -.5px;}
.header .gnb .gnb__depth li a:hover,
.header .gnb .gnb__depth li a:focus,
.header .gnb .gnb__depth li a:active{text-decoration: underline;}

/* 전체메뉴 드롭다운 - header__menu-button 클릭 시 gnb에 on 클래스 + data-navi="sitemap"이 붙으며(common.js 참고),
   전체 gnb__list를 헤더 바로 아래 드롭다운 패널로 펼쳐 모든 메뉴/서브메뉴를 한 번에 보여준다. */
#gnb[data-navi="sitemap"]{display: none;}
#header.on{box-shadow: 2px 4px 12px 0 rgba(0, 0, 0, 0.1);}
#gnb.on[data-navi="sitemap"]{display: block;position: absolute;left: 0;top: 100%;width: 100%;background: #fff;border-top: 1px solid #EEF1F4;box-shadow: 0 2rem 3.2rem 0 rgba(0, 0, 0, 0.12);z-index: 20;padding: 4rem 6rem;}
#gnb.on[data-navi="sitemap"] .gnb__list{max-width: var(--Size_Inner);margin: 0 auto;align-items: flex-start;gap: 2rem;}
#gnb.on[data-navi="sitemap"] .gnb__item{position: static;flex: 1 1 0;display: flex;flex-direction: column;align-items: stretch;}
/* 좌측메뉴(lnb) 아코디언과 동일한 그라디언트 타이틀 톤으로 대메뉴를 표시해 사이트 전반의 서브메뉴 톤과 통일한다 */
#gnb.on[data-navi="sitemap"] .gnb__link{width: 100%;padding: 1.4rem 1rem;margin-bottom: 1.2rem;border-radius: 1rem;background: linear-gradient(265deg, #DEE4F8 11.31%, #D3F3EE 88.99%);color: #191919;font-size: 1.6rem;text-align: center;white-space: normal;}
#gnb.on[data-navi="sitemap"] .gnb__depth{position: static;display: block;width: 100%;min-width: 0;padding: 0;background: none;}
#gnb.on[data-navi="sitemap"] .gnb__depth li a{display: flex;align-items: center;justify-content: space-between;gap: 1rem;padding: 1.1rem .4rem;border-bottom: 1px solid var(--bdl, #d7d7d7);color: var(--Gray_80, #565656);font-size: 1.4rem;font-weight: 500;letter-spacing: normal;}
#gnb.on[data-navi="sitemap"] .gnb__depth li:last-child a{border-bottom: 0;}
#gnb.on[data-navi="sitemap"] .gnb__depth li a:after{content: '';flex: 0 0 auto;width: 1.6rem;height: 1.6rem;background: url(../images/sub/ico_arrow-right.svg) no-repeat center;background-size: 1.6rem;opacity: 0;transition: opacity .2s;}
#gnb.on[data-navi="sitemap"] .gnb__depth li a:hover,
#gnb.on[data-navi="sitemap"] .gnb__depth li a:focus,
#gnb.on[data-navi="sitemap"] .gnb__depth li a:active{color: var(--Primary);}
#gnb.on[data-navi="sitemap"] .gnb__depth li a:hover:after,
#gnb.on[data-navi="sitemap"] .gnb__depth li a:focus:after{opacity: 1;}

.header__tools{display: flex;align-items: center;margin-left: auto;}
.header__tools > li{position: relative;padding-right:1.4rem;margin-right: 1.4rem;display: inline-flex;}
.header__tools > li > *{text-indent: -9999px;display: block;}
.header__tools > li:after{content: '';display: inline-flex;width: 1px;height: 1.4rem;background: #000;position: absolute;right: 0;top: 50%;transform: translateY(-50%);}
.header__tools > li:last-child{padding-right: 0;margin-right: 0;}
.header__tools > li:last-child:after{display: none;}
.header__tools > li.header__menu-item{display: none;}
.header__tools > li.header__search-button-item:after{display: none;}
.header__tools .header__search-button{width:22px;height: 22px;background: url(../images/common/ico_common_search.svg) no-repeat center;}
.header-search{position: absolute;right: 0;top: calc(100% + 1.2rem);width: 36rem;max-width: calc(100vw - 4rem);padding: 1rem;border-radius: 1.4rem;background: #fff;box-shadow: 2px 4px 12px 0 rgba(0, 0, 0, 0.12);opacity: 0;visibility: hidden;pointer-events: none;transform: translateY(-.8rem);transition: opacity .2s ease, transform .2s ease, visibility .2s;z-index: 10;text-indent: 0;}
.header-search.is-open{opacity: 1;visibility: visible;pointer-events: auto;transform: translateY(0);}
.header-search__form{display: flex;align-items: center;gap: .6rem;}
.header-search__form input{flex: 1 1 auto;min-width: 0;padding: 1rem 1.4rem;border-radius: var(--Radius_Pill, 3rem);border: 1px solid #DEE5EE;font-size: 1.4rem;color: var(--Gray_100, #141414);}
.header-search__submit{flex: 0 0 auto;width: 4rem;height: 4rem;border-radius: 50%;background: var(--Primary) url(../images/main/ico_search_white.svg) no-repeat center;background-size: 16px;}
.header__tools .header__lang{width: 22px;height:22px;background: url(../images/common/ico_lang.svg) no-repeat center;}
.header__tools .header__menu-button{display: flex;align-items: center;justify-content: center;width: 18px;height: 18px;text-indent: 0;color: #1D1D1D;font-size: 1.8rem;line-height: 1;}
.header__tools .header__menu-button::before{content: "☰";}
.header__tools .header__menu-button span{display: none;}
.top-m-lang{display: none;}
.gnb__item.is-active .gnb__depth, .gnb__item:hover .gnb__depth{display: block;}

@media (max-width: 1424px) {
  .header .gnb .gnb__link{padding: 1.5rem 2.5rem;}
  .header .gnb .gnb__depth {padding: 10px 5px;}

}

/* 헤더 반응형 - 태블릿 */
@media (max-width: 1200px) {
  .header .gnb .gnb__list{gap: 0;}
  .header .gnb .gnb__link{padding: 1.5rem 2rem;font-size: 1.8rem;}
}

/* 헤더 반응형 - 태블릿 */
@media (max-width: 1024px) {
  .header{background: #fff;}
  .header__top .top-right{position: fixed;top: 0;width:100%;border-radius: 0;height: 35px;align-items: center;left: 0;top: 0;justify-content: flex-end;}
  .header{top: 35px;}
  .header .header__bottom .inner{padding: 0;background: transparent;border-radius:0}
  .header__tools{position: absolute;right:20px;top: 50%;transform: translateY(-50%);}
  .header .gnb{display: none;}
  .header .header__bottom .inner{padding: 0;background: none;}
  .header__tools > li.header__lang-item {display: none;}
  .top-m-lang{position: absolute;left: 20px;top: -25px;color: var(--Gray_80, #565656);font-weight: 600;font-size: 1.2rem;background: url(../images/common/ico_lang.svg) no-repeat left center;background-size: 10px;padding-left: 12px;display: block;}

  /* 전체메뉴 버튼은 가로 gnb가 숨는 모바일/태블릿에서만 노출 */
  .header__tools > li.header__menu-item{display: inline-flex;}
  .header__tools > li.header__search-button-item:after{display: inline-flex;}

  /* 전체메뉴 드롭다운 - 모바일 아코디언 */
  #gnb.on[data-navi="sitemap"]{max-height: 75vh;overflow-y: auto;padding: 2rem;-webkit-overflow-scrolling: touch;}
  #gnb.on[data-navi="sitemap"] .gnb__list{flex-direction: column;align-items: stretch;max-width: none;margin: 0;gap: 1.2rem;}
  #gnb.on[data-navi="sitemap"] .gnb__item{flex: none;width: 100%;margin-bottom: 0;}
  #gnb.on[data-navi="sitemap"] .gnb__link{display: flex;justify-content: space-between;align-items: center;margin-bottom: 0;cursor: pointer;}
  #gnb.on[data-navi="sitemap"] .gnb__link::after{content: '';width: 2rem;height: 2rem;flex-shrink: 0;background: url(../images/sub/ico_arrow-right.svg) no-repeat center / 2rem;transform: rotate(90deg);transition: transform .25s;}
  #gnb.on[data-navi="sitemap"] .gnb__item.is-open .gnb__link{border-radius: 1rem 1rem 0 0;}
  #gnb.on[data-navi="sitemap"] .gnb__item.is-open .gnb__link::after{transform: rotate(-90deg);}
  #gnb.on[data-navi="sitemap"] .gnb__depth{display: none;padding: 0 1rem;border: 1px solid #EEF1F4;border-top: 0;border-radius: 0 0 1rem 1rem;}
  #gnb.on[data-navi="sitemap"] .gnb__item.is-open .gnb__depth{display: block;}
}

/* 헤더 반응형 - 모바일 */
@media (max-width: 768px) {
  .header .logo img{max-width: 220px;}

}
@media (max-width: 480px) {
  .header__top .inner{align-items: flex-start;gap: 1rem;}
  .header__top .top-right{gap: .4rem;padding: 0 .6rem;}
  .header__top .top-right a{padding: .7rem .5rem;font-size: 1.2rem;}
}




/* 퀵메뉴 */
.quick-menu {position: fixed; right: max(2rem, calc((100vw - 1780px) / 2)); top: 27.7rem; z-index: 400; width: 8.1rem;}
.quick-menu__list {display: flex; flex-direction: column; gap: 2rem; align-items: center; padding: 1.4rem 0 3rem; border-radius: 7rem; background-color: var(--Primary);}
.quick-menu__item {position: relative; display: flex; flex-direction: column; align-items: center; gap: .5rem; width: 100%; color: #fff; text-align: center;;}
.quick-menu__link, .quick-menu__button {display: flex; flex-direction: column; align-items: center; gap: .5rem; width: 100%; color: #fff; font-size: 1.4rem; font-weight: 600; line-height: 1.3; letter-spacing: -.02em;}
.quick-menu__link:hover, .quick-menu__link:focus, .quick-menu__link:active, .quick-menu__button:hover, .quick-menu__button:focus, .quick-menu__button:active {text-decoration: none;}
.quick-menu__icon {display: flex; align-items: center; justify-content: center; width: 6rem; height: 6rem; border-radius: 50%;}
.quick-menu__icon {color: #fff; font-size: 2.3rem; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.18);}
.quick-menu__icon img {width: 2.4rem; height: 2.4rem;}
.quick-menu__icon--apply {background:url(../images/common/ico_main_quick01.svg) no-repeat center  #85C44B}
.quick-menu__icon--dictionary {background:url(../images/common/ico_main_quick02.svg) no-repeat center  #59B892}
.quick-menu__icon--staff {background:url(../images/common/ico_main_quick03.svg) no-repeat center  #27AAE1}
.quick-menu__depth {display: none; position: absolute; right: 8.6rem; top: 0; width: 21rem; padding: 1rem; border-radius: 1.4rem; background-color: #fff; box-shadow: var(--Shadow_Surface);}
.quick-menu__item:hover .quick-menu__depth, 
.quick-menu__item:focus .quick-menu__depth, 
.quick-menu__item:active .quick-menu__depth, 
.quick-menu__item:focus-within .quick-menu__depth {display: block;}
.quick-menu__depth a {display: block; padding: 1rem 1.2rem; border-radius: .8rem; color: var(--Gray_100); font-size: 1.4rem; font-weight: 700; text-align: left;}
.quick-menu__depth a:hover, .quick-menu__depth a:focus, .quick-menu__depth a:active {background-color: #f5f9ff; color: var(--Primary); text-decoration: none;}
.quick-menu__memo {position: relative; display: flex; align-items: center; justify-content: center; width: 8.1rem; height: 8rem;padding: 4px 5px 0 0;}
.quick-menu__memo-button {width: 62px; height: 72px; background:url(../images/common/bg_quick_write.svg) no-repeat  center; color: #fff; font-size: 1.8rem; font-weight: 800; line-height: 1;}
.quick-menu__memo-count {position: absolute; right: 0; top: 0; min-width: 2.4rem;padding: .4rem 1rem; border-radius: 3rem; background-color: var(--Warning); color: #111; font-size: 1.8rem; font-weight: 700; line-height: 100%; text-align: center;letter-spacing: -0.72px;}


/* 퀵메뉴 반응형 - 태블릿 */
@media (max-width: 1200px) {
  .quick-menu {right: 1rem; top: auto; bottom: 2rem; transform: scale(.86); transform-origin: right bottom;}
}

/* 퀵메뉴 반응형 - 모바일 */
@media (max-width: 768px) {
  .quick-menu {display: none;}
}


/* 푸터 */
.footer {background-color: #222; color: #d6d6d6;padding: 7rem 0;}
.footer .inner {display: flex; align-items: flex-start; justify-content: space-between; gap: 4rem;gap: 0.6rem;}
.footer__links {display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 3rem;}
.footer__links a {color: #f1f1f1; font-size: 1.6rem; font-weight: 600;display: flex;align-items: center;letter-spacing: -0.32px}
.footer__links a.footer__links--privacy {color: #86c7ff;}
.footer__links a:after{content: '';width: 1px;height: 14px;background: #565656;margin: 0 28px;}
.footer__links a:last-child:after{display: none;}
.footer__info-address{display: flex;align-items: center;gap: 1.8rem;color: var(--Gray_40, #C1C1C1);font-size: 1.6rem;font-weight: 500;line-height: 100%;letter-spacing: -0.32px;}
.footer__info-address strong{color: #FFF;font-size: 2rem;font-weight: 600;line-height: 100%;letter-spacing: -0.4px;text-transform: uppercase;}
.footer__info .copyright{margin-top: 1.8rem;color: var(--Gray_40, #C1C1C1);font-size: 1.4rem;font-weight: 500;line-height: 100%;letter-spacing: -0.28px;display: block;text-transform: uppercase;}
.footer__family {width: 20.8rem;  padding: 2rem 4rem 2rem 4rem; border: 1px solid var(--Gray_70, #747474);border-radius: 1.1rem; -webkit-appearance: none; appearance: none;background: url(../images/common/ico_sitemap_select.svg) no-repeat right 2rem center #222; color: #fff;font-size: 1.6rem;font-weight: 600;line-height: 100%;letter-spacing: -0.32px;}

/* 푸터 반응형 - 태블릿 */
@media (max-width: 1024px) {
  .footer .inner {flex-direction: column; gap: 2.4rem;}
}

/* 푸터 반응형 - 모바일 */
@media (max-width: 768px) {
  .footer {padding: 5rem 0;}
  .footer__info-address{flex-direction: column;align-items: flex-start;gap: 10px;}
  .footer__links a:after{margin: 0 1.4rem;}
  .footer__family{padding: 1.5rem 3rem 1.5rem 2rem;background-size: 1.5rem;}
}

/* 푸터 반응형 - 모바일 */
@media (max-width: 480px) {
  .footer__links{gap: 1rem 0;}
  .footer__links a{font-size: 1.4rem;}
  .footer__links a:after{margin: 0 0.6rem;height: 8px;}
  .footer__family{width: 100%;}
}