@charset "utf-8";






/************************************************** 
    #header
***************************************************/

#header {position:absolute; width: 100%; z-index: 9999;}
#header .inner {width: 100%; height: 100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;}

#header .head-logo {width: 100%; max-width: 210px; transition: all ease .3s;}
#header .head-logo a {display: block;}
#header .head-logo .logo-white {display: none;}

#header .theme-toggle{
    margin-left: 20px;
  --h: 34px;
  --pad: 6px;
  --radius: 999px;

  display:inline-flex;
  align-items:center;
  gap: 6px;
  height: var(--h);
  padding: 6px 8px;
  border: 1px solid #111;
  border-radius: var(--radius)
}

#header .theme-toggle-item{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: calc((var(--h) - (var(--pad) * 2)) + 2px);
  height: calc((var(--h) - (var(--pad) * 2)) + 2px);
  border-radius: var(--radius);
  cursor:pointer;
  user-select:none;
}

#header .theme-toggle-input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}

/* 선택된 쪽 하이라이트(회색 알약) */
#header .theme-toggle-item::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: var(--radius);
  background: transparent;
  transition: background .2s ease;
}

#header .theme-toggle-input:checked + .theme-toggle-icon{
  opacity: 1;
  transform: scale(1);
}

#header .theme-toggle-input:not(:checked) + .theme-toggle-icon{
  opacity: .6;
  transform: scale(.98);
}

#header .theme-toggle-input:checked ~ .sr-only{}
#header .theme-toggle-input:checked ~ .sr-only{} /* 유지용(무시 가능) */

.theme-toggle-input:checked + .theme-toggle-icon{
  z-index: 1;
}

.theme-toggle-input:checked ~ .sr-only{
  z-index: 1;
}

.theme-toggle-input:checked{
  z-index: 2;
}

#header .theme-toggle-item:has(.theme-toggle-input:checked)::before{
  background:#dbdbdb;
}

#header .theme-toggle-icon{
  position:relative;
  z-index: 1;
  font-size: 22px;
  line-height:1;
  transition: opacity .2s ease, transform .2s ease;
}

/* 키보드 포커스 */
#header .theme-toggle-input:focus-visible + .theme-toggle-icon{
  outline: 3px solid #3b82f6;
  outline-offset: 6px;
  border-radius: 10px;
}

#header .gnb {margin: 0 20px;}
#header .gnb .dep1 {display: flex; justify-content: center; gap: 40px;}
#header .gnb .dep1 > li {font-size: var(--fs-24); font-weight: var(--fw-500); height: 100px;}
#header .gnb .dep1 > li > a {position: relative; display: flex; align-items: center; height: 100%; padding: 0 5px;}
#header .gnb .dep1 > li.active > a, #header .gnb .dep1 > li > a:hover {color: var(--color-primary); font-weight: var(--fw-600);}
#header .gnb .dep1 > li > a::after {content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 4px; background: var(--color-primary); opacity:0; transition: .3s;}
#header .gnb .dep1 > li.active > a::after {width: 100%; opacity: 1;}

#header.is-active {background: #fff;}
#header.is-active .gnb .dep1 > li > a {color: #222;}

#header .gnb .sub-menu-cmn {position: absolute; top: 100%; left: 0; width : 100%; height:330px; box-shadow: 0px 20px 20px rgba(0,0,0,.1); padding: 50px 0; background: #F9F9F9; border-top: 1px solid #ddd;z-index: 999;  overflow: hidden; opacity: 0; visibility: hidden; transition: max-height .3s ease, padding .3s ease, opacity .3s ease;}
#header .gnb .dep1 > li.active > .sub-menu-cmn {max-height: 400px;  padding: 50px 0; opacity: 1; visibility: visible;}
#header .gnb .sub-menu-cmn .inner {display: flex; width: 100%; margin: 0 auto; transition: .3s;}
#header .gnb .sub-menu-cmn .sub-title {width: 22%; border-radius: 0 0 30px 0; position: relative;}
#header .gnb .sub-menu-cmn .sub-title h2 {font-size: var(--fs-28); display: flex; height: auto;}
#header .gnb .sub-menu-cmn .sub-title p {color: var(--color-gray); margin-top: 10px; font-size:20px;}
#header .gnb .dep2 {width: 78%; height:100%; display: grid; grid-template-columns: repeat(4,1fr); gap: 20px;}
#header .gnb .dep2 > li {font-size: var(--fs-18);}
#header .gnb .dep2 > li > a {display: flex; justify-content: space-between; align-items: center; padding : 14px 15px; width: 100%; border: 1px solid #ddd; border-radius: 10px; transition: .3s; background: #fff;}
#header .gnb .dep2 > li > a::after {content: ''; background: url(../images/main/icon_sub_menu_arrw.svg) center no-repeat; width: 8px; height: 14px; display: block;} 
#header .gnb .dep2 > li > a:is(:hover, :focus) {background: #004098; color: #fff;}
#header .gnb .dep2 > li > a:is(:hover, :focus)::after {background: url(../images/main/icon_sub_menu_arrw_w.svg) center no-repeat;}
#header .gnb .dep3 {width: 78%; display: flex; flex-direction: column; padding: 14px 15px; width: 100%; border: 1px solid #ddd; border-radius: 5px; transition: .3s; background: #fff; margin-top: 15px;}
#header .gnb .dep3 > li > a {display: block; padding: 8px 0; width: 100%; padding-left: 30px; color: #666; transition: color .3s; position: relative; }
#header .gnb .dep3 > li > a::before {content: '—';color: #004098;font-weight: bold;position: absolute;left: 0; top: 8px;}
#header .gnb .dep3 > li > a:hover {background: none;color: #004098;font-weight: bold;}


#header .util-list {display: flex; align-items: center; gap: 20px; }
#header .util-list .lang-btn {display: flex; align-items: center; gap: 10px; border: 1px solid #000; border-radius: 50px; padding: 6px 16px;}
#header .util-list .lang-btn::after {content: ''; background: url(../images/main/icon_lang_btn.svg); width: 18px; height: 18px; display: block;}
#header .util-list .sitemap-btn {display: flex; align-items: center; gap: 10px;}
#header .util-list .sitemap-btn .btn-ic {display: flex; flex-direction: column; gap: 7px; align-items: flex-end;}
#header .util-list .sitemap-btn .btn-ic > span {display: block; width: 23px; height: 3px; background: var(--color-dark); border-radius: 50px;}


#header.is-white .head-logo .logo-basic {display: none;}
#header.is-white .head-logo .logo-white {display: block;}
#header.is-white .gnb .dep1 > li > a{color: var(--color-white);}
#header.is-white .util-list .lang-btn {border-color: var(--color-white); color: var(--color-white);}
#header.is-white .util-list .lang-btn::after {filter: brightness(10);}
#header.is-white .util-list .sitemap-btn span {background: var(--color-white);}
#header.is-white .theme-toggle {border-color: var(--color-white);}
#header.is-white .theme-toggle-icon img {filter: brightness(10) ;}
#header.is-white .theme-toggle-item:has(.theme-toggle-input:checked)::before{background:#F9F9F9;}
#header.is-white .theme-toggle-item:has(.theme-toggle-input:checked) img {filter: none;}

/* is-active 덮어씀 */
#header.is-white.is-active .head-logo .logo-basic {display: block;}
#header.is-white.is-active .head-logo .logo-white {display: none;}
#header.is-white.is-active .gnb .dep1 > li > a {color: var(--color-dark);}
#header.is-white.is-active .util-list .lang-btn {border-color: var(--color-dark);color: var(--color-dark);}
#header.is-white.is-active .util-list .lang-btn::after {filter: none;}
#header.is-white.is-active .util-list .sitemap-btn span {background: var(--color-dark);}
#header.is-white.is-active .theme-toggle {border-color: var(--color-dark);}
#header.is-white.is-active .theme-toggle-icon img {filter: none;}

@media screen and (max-width: 1400px) {
    #header .inner {padding: 0 20px;}
    #header .head-logo {max-width: 200px;}
    #header .gnb .dep1 {width: 100%; gap: 30px;}
    #header .gnb .dep1 > li {font-size: var(--fs-20);}
}
@media screen and (max-width: 1200px) {
    #header .gnb .dep1 {gap: 20px;}
}
@media screen and (max-width: 1080px) {
    #header .head-top {display: none;}
    #header .gnb {display: none;}
    #header .util-list .sitemap-btn {display: none;}
    #header .theme-toggle {margin-left: auto; margin-right: 10px;}
}
@media screen and (max-width: 768px) {
  #header .util-list .lang-btn {font-size: var(--fs-16);}
       
}
@media screen and (max-width: 480px) {
  #header .head-logo {margin-right: 10px;}
  #header .theme-toggle {margin-right: 5px;}
  #header .util-list {gap: 0px;}
  #header .util-list .lang-btn {font-size: var(--fs-14); padding: 4px 10px;}
  #header .theme-toggle {zoom: .8;}
  
  

}



/************************************************** 
    사이트맵
***************************************************/

#header .sitemap-popup {position: fixed;inset: 0;z-index: 1000;background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); display: flex;align-items: center;justify-content: center;opacity: 0;visibility: hidden;transition: opacity .3s ease;}
#header .sitemap-popup.active {opacity: 1;visibility: visible;}
#header .sitemap-popup .right-box {width: 100%;max-width: 1600px;background: #fff;border-radius: 20px;padding: 60px 70px;position: relative;}
#header .sitemap-popup .sitemap-cls-btn {position: absolute;top: 32px;right: 32px;width: 24px;height: 24px;background: url(../images/icon/icon_cls_btn.svg) no-repeat center;background-size: contain;border: 0;cursor: pointer;}
#header .sitemap-popup .menu-wrap {display: grid;grid-template-columns: repeat(5, 1fr);gap: 48px; margin-top: 50px}
#header .sitemap-popup .menu-list {min-width: 0;}
#header .sitemap-popup .menu-list .hd {padding-bottom: 14px;border-bottom: 1px solid #e6e6e6;margin-bottom: 20px;}
#header .sitemap-popup .menu-list .hd h3 {font-weight: 900;color: #092f64;}
#header .sitemap-popup .menu-list .list {margin: 0;padding: 0;list-style: none;}
#header .sitemap-popup .menu-list .group {display: grid;grid-template-columns: 120px 1fr;column-gap: 24px;margin-top: 18px;}
#header .sitemap-popup .menu-list .group:first-child {margin-top: 0;}
#header .sitemap-popup .menu-list .group-title {grid-column: 1;font-size: 15px;font-weight: 600;color: #111;}
#header .sitemap-popup .menu-list .depth3 {grid-column: 2; margin: 0;padding: 0;list-style: none;display: flex;flex-direction: column;gap: 6px;}
#header .sitemap-popup .menu-list .depth3 li a {display: inline-block;font-size: 14px;color: #555;line-height: 1.6;}
#header .sitemap-popup .menu-list .depth3 li a:hover {color: var(--color-primary);text-decoration: underline;text-underline-offset: 3px; font-weight: 600;}

#header .sitemap-popup .sitemap-logo {position: absolute; top: 40px; left: 65px; display: flex; align-items: center;}
#header .sitemap-popup .sitemap-logo img {height: 24px;width: auto;}


@media (max-width: 1400px) {
  #header .sitemap-popup .menu-wrap {grid-template-columns: repeat(4, 1fr);}
}

@media (max-width: 1100px) {
  #header .sitemap-popup .menu-wrap {grid-template-columns: repeat(3, 1fr);}
}

@media (max-width: 768px) {
  #header .sitemap-popup .right-box {padding: 40px 24px;border-radius: 12px;}
  #header .sitemap-popup .menu-wrap {grid-template-columns: repeat(2, 1fr);gap: 32px;}
  #header .sitemap-popup .menu-list .group {grid-template-columns: 1fr;row-gap: 6px;}
  #header .sitemap-popup .menu-list .group-title {font-size: 14px;}
}

@media (max-width: 480px) {
  #header .sitemap-popup .sitemap-logo {top: 20px;left: 20px;}
  #header .sitemap-popup .sitemap-logo img {height: 26px;}
}

/* html {scrollbar-gutter: stable;} */



/************************************************** 
   모바일 메뉴
***************************************************/
#header .mob-menu-open {width: 23px; height: 23px; display: none; margin-left: 10px;}
#header .mob-menu-open span {display: block; width: 100%; height: 3px; border-radius: 2px; background-color: var(--color-white); transition: background-color .4s; position: relative;}
#header .mob-menu-open span+span {margin-top: 6px;}
#header .mob-menu-open span:nth-child(1) {animation: ease .8s menu-icon-top-2 forwards;} 
#header .mob-menu-open span:nth-child(2) {animation: ease .8s menu-icon-scaled-2 forwards;} 
#header .mob-menu-open span:nth-child(3) {animation: ease .8s menu-icon-bottom-2 forwards;} 
#header .mob-menu-open:hover span:nth-child(1) {animation: ease .8s menu-icon-top forwards;} 
#header .mob-menu-open:hover span:nth-child(2) {animation: ease .8s menu-icon-scaled forwards;} 
#header .mob-menu-open:hover span:nth-child(3) {animation: ease .8s menu-icon-bottom forwards;}

#mob-gnb {background: var(--color-white); width: 100%; height: 100%; overflow: auto; position: fixed; top: 0; right: 0; z-index: 50; padding-bottom: 50px; display: none;}
#mob-gnb::-webkit-scrollbar {display: none;}
#mob-gnb::-webkit-scrollbar-thumb {display: none;}
#mob-gnb_bg_black {content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.55); z-index: 49; display: none;}
#mob-gnb.active {display: none; right: 0;}
#mob-gnb .mob-gnb-hd {display: flex; align-items: center; justify-content: space-between; padding: 18px 0px;  margin-bottom: 24px; border-bottom: 1px solid var(--color-gray)}

#mob-gnb .mob-close-btn {width: 35px; height: 35px; overflow: hidden;}
#mob-gnb .mob-close-btn img { transition: all .35s ease; filter: invert(10);}
#mob-gnb .mob-close-btn:hover img {transform: rotate(180deg);}

#mob-gnb .depth-list {display: grid; overflow: auto; max-height: calc(100% - 240px);  }
#mob-gnb .depth-list a {display: block; color: #222; font-size: var(--fs-18); transition: all ease .3s; border-bottom: 1px solid #ddd; padding: 20px 16px; display: flex; align-items: center; justify-content: space-between;}
#mob-gnb .depth-list a p {font-weight: 600;}
#mob-gnb .depth-list a span {display: block; font-size: var(--fs-14); color: var(--color-gray); transition: all ease .3s; word-break: keep-all; text-transform: uppercase;}
#mob-gnb .dep-02-list {border-top: 1px solid #ddd; margin-top: -1px; display: none; background: #F6F6F6;}
#mob-gnb .dep-02-list li {}
#mob-gnb .dep-02-list a {display: flex; gap: 5px; width: 100%; font-size: var(--fs-16); font-weight: var(--fw-500); color: #666; padding: 14px 16px;}
#mob-gnb .dep-02-list a img {filter: brightness(0.65); width: 12px;}
#mob-gnb .dep-02-list a:hover {color: #000; font-weight: 500;}
#mob-gnb .dep-02-list a:hover img {filter: brightness(0.1);}

#mob-gnb .mob-toggle-btn {height: 14px; width: 20px; overflow: hidden; border-radius: 50%;}
#mob-gnb .mob-toggle-btn img {transition: all .35s ease; margin: 0 auto;}
#mob-gnb .mob-toggle-btn:hover img {}
#mob-gnb .mob-toggle-btn.active {}
#mob-gnb .mob-toggle-btn.active img {transform: rotate(90deg);}

#mob-gnb .login-box {margin-top: 50px; width: 100%; display: flex; align-items: center; gap: 15px;}
#mob-gnb .login-box button {display: flex; align-items: center; justify-content: flex-end; gap: 5px; color: #585858;}
#mob-gnb .login-box button img {transition: all ease .3s;}
#mob-gnb .login-box button:hover {color: #191B1D;}
#mob-gnb .login-box button:hover img {filter: invert(1);}

.mob_util_list {width: 100%; display: flex; gap: 10px;}
.mob_util_list a {display: block; width: 100%; border: 1px solid #ddd; padding: 14px 10px; text-align: center; font-weight: 500;}

/* 외부창 연결 */
#mob-gnb .dep-02-list a[target=_blank]::after {content: ''; display: inline-block; width: 15px; height: 15px; background: url(../images/icon/icon_external.svg) no-repeat center;}

@media screen and (max-width: 1080px) {
    #header .mob-menu-open {display: block;}
    #mob-gnb {padding: 0 20px;}
    #mob-gnb .mob-gnb-hd .lb a {font-size: 16px;}

}

@media screen and (max-width: 480px) {
    .mob_util_list a {font-size: 15px;}
    .mob_util_list a {padding: 10px;}
}




/************************************************** 
    footer
***************************************************/

#ft {background: #fff;border-top: 1px solid #777777;}
#ft .footer-inner {max-width: 1740px;margin: 0 auto;padding: 60px;}
#ft .footer-top {display: flex;justify-content: space-between;align-items: flex-start;gap: 40px;}
#ft .footer-left {display: flex;flex-direction: column; gap: 30px;}
#ft .footer-logo img {height: 36px;}
#ft .footer-info p {margin: 0 0 6px;line-height: 1.6; font-size: 17px;}
#ft .family-site-btn {display: flex;align-items: center;gap: 12px;padding: 16px 30px;border: 1px solid #222;border-radius: 24px;background: #fff;font-size: 14px;cursor: pointer;gap:50px;}
#ft .family-site-btn .arrow {width: 10px;height: 10px;border-right: 2px solid #444;border-bottom: 2px solid #444;transform: rotate(45deg);}
#ft .footer-line {height: 1px;background: #bbb;margin: 32px 0 20px;}
#ft .footer-bottom {display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;gap: 12px;}
#ft .footer-links {display: flex;flex-wrap: wrap;gap: 10px;list-style: none;margin: 0;padding: 0;}
#ft .footer-links a {font-size: 16px;color: #555; border-right: 1px solid #ccc; padding-right: 10px;}
#ft .footer-links li:last-child a {border: none;}
#ft .footer-bottom p {margin: 0;font-size: 16px;color: #777;}
#ft .footer-links .blue a {color: var(--color-primary);}


@media (max-width: 1024px) {
  #ft .footer-inner {padding: 40px 24px;}
  #ft .footer-top {gap: 20px;}
  #ft .family-site-btn {padding: 14px 24px;gap: 40px;}
}

@media (max-width: 768px) {
  #ft .footer-inner {padding: 32px 20px;}
  #ft .footer-top {flex-direction: column;align-items: flex-start;gap: 24px;}
  #ft .family-site-btn {width: 100%;justify-content: space-between;padding: 14px 20px;}
  #ft .footer-bottom {flex-direction: column;align-items: flex-start;gap: 16px;}
  #ft .footer-links a {border-right: none;padding-right: 0;}
  #ft .footer-links li::after {content: '·';margin: 0 6px;color: #bbb;}
  #ft .footer-links li:last-child::after {content: '';}
}


/* 마키텍스트 애니메이션 */
@keyframes marquee {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes marquee02 {
    0% {
        transform: translateY(0%);
    }
    100% {
        transform: translateY(-50%);
    }
}

@keyframes menu-icon-top {
    0% {
      top: 0;
      transform: rotate(0);
    }
  
    50% {
      top: 10px;
      transform: rotate(0);
    }
  
    100% {
      top: 10px;
      transform: rotate(45deg);
    }
}

@keyframes menu-icon-top-2 {
    0% {
        top: 10px;
        transform: rotate(45deg);
    }

    50% {
        top: 10px;
        transform: rotate(0);
    }

    100% {
        top: 0;
        transform: rotate(0);
    }
}

@keyframes menu-icon-bottom {
    0% {
        bottom: 0;
        transform: rotate(0);
    }

    50% {
        bottom: 8px;
        transform: rotate(0);
    }

    100% {
        bottom: 8px;
        transform: rotate(135deg);
    }
}

@keyframes menu-icon-bottom-2 {
    0% {
        bottom: 8px;
        transform: rotate(135deg);
    }

    50% {
        bottom: 8px;
        transform: rotate(0);
    }

    100% {
        bottom: 0;
        transform: rotate(0);
    }
}

@keyframes menu-icon-scaled {
    50% {
        transform: scale(0);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes menu-icon-scaled-2 {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}