@charset "utf-8";
@layer reset, form;
/*Root*/
:root { --header-height: clamp(60rem, calc(100 / var(--container) * 100vw), 100rem); --container-narrow: 1280; --container: 1400; --container-wide: 1762; --container-scale: 0.92; --container-edge-offset: calc((1 - var(--container-scale)) / 2 * 100vw); --primary: #155cdd; --secondary: #e87a4a; --placeholder-bg: #444444; --white: #fff; --black: #222; --border-color: #ddd; --border-color-hover: #444; --font-pret: "Pretendard Variable", "Pretendard", "Malgun Gothic", "Dotum", "Gulim", sans-serif; --font-sans: var(--font-pret); --toggle-nav-button-size: 32rem; --placeholder-image-bg: #e0e0e0; --placeholder-image-url: url("/assets/images/layouts/placeholder-image.png"); --placeholder-image-size: min(60%, 200rem); }
/*Scroll Behavior*/
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/*Header*/
.site-header { --header-color: #fff; --header-muted-color: rgb(255 255 255 / 75%); --header-divider-color: rgb(255 255 255 / 45%); --header-search-bg: rgb(255 255 255 / 16%); --header-search-border: rgb(255 255 255 / 65%); --header-search-color: #fff; --header-search-placeholder: rgb(255 255 255 / 55%); position: absolute; inset: 0 0 auto; z-index: 10; width: 100%; color: var(--header-color); }
.site-header--inner { --header-color: #111; --header-muted-color: #596671; --header-divider-color: #d8dde3; --header-search-bg: #fff; --header-search-border: #ccd3da; --header-search-color: #111; --header-search-placeholder: #929aa3; position: relative; background: #fff; border-bottom: 1px solid #ddd; }
.site-header__container { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; height: var(--header-height); }
/*Logo*/
.logo { display: block; justify-self: start; width: fit-content; }
.logo-image { display: block; width: auto; }
/*Desktop Navigation*/
.main-nav { justify-self: center; }
.nav-menu-level-1 { display: flex; align-items: center; }
.nav-item-level-1 { position: relative; }
.nav-link-level-1 { display: flex; align-items: center; justify-content: center; padding: 0.4lh clamp(20rem, calc(36 / var(--container) * 100vw), 36rem); font: 500 18rem/1.5 var(--font-sans); white-space: nowrap; color: var(--header-color); }
.nav-menu-level-2 { position: absolute; top: 100%; left: 50%; width: max-content; min-width: 160rem; padding-top: 10rem; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(8rem); }
.nav-menu-level-2::before { position: absolute; inset: 10rem 0 0; z-index: -1; background: #fff; border: 1px solid var(--border-color); content: ""; }
.nav-item-level-1:hover > .nav-menu-level-2, .nav-item-level-1:focus-within > .nav-menu-level-2 { opacity: 1; visibility: visible; pointer-events: initial; transform: translateX(-50%) translateY(0); }
.nav-item-level-2 + .nav-item-level-2 { border-top: 1px solid var(--border-color); }
.nav-link-level-2 { position: relative; display: block; padding: 14rem 20rem; font-size: 14rem; text-align: center; color: #333; }
.nav-link-level-2:hover, .nav-link-level-2:focus-visible, .nav-link-level-2.is-current { color: #fff; background: var(--primary); }
/*Header Actions*/
.header-actions { display: inline-flex; align-items: center; justify-self: end; justify-content: flex-end; gap: 20rem; min-width: 0; }
.site-language { display: inline-flex; align-items: center; flex-shrink: 0; gap: 16rem; }
.site-language-link { display: inline-flex; align-items: center; gap: 7rem; font-size: 18rem; font-weight: 500; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; color: var(--header-muted-color); text-transform: uppercase; }
.site-language-link:hover, .site-language-link.is-active, .site-language-link[aria-current="page"] { font-weight: 600; color: var(--header-color); }
.site-language-arrow { display: block; width: 8rem; height: auto; }
.header-action-divider { flex-shrink: 0; width: 1px; height: 18rem; background: var(--header-divider-color); }
/*Header Search*/
.site-search { position: relative; flex: 0 0 24rem; width: 24rem; height: 54rem; }
.site-search-toggle { position: absolute; top: 50%; right: 0; z-index: 3; display: grid; place-items: center; width: 24rem; aspect-ratio: 1; list-style: none; cursor: pointer; transform: translateY(-50%); }
/*.site-search-toggle::-webkit-details-marker {

  display: none;

}*/
.site-search-toggle img { display: block; width: 24rem; height: 24rem; object-fit: contain; }
.site-search-box { position: absolute; top: 50%; right: -14rem; z-index: 2; display: flex; align-items: center; width: 280rem; height: 54rem; padding: 0 54rem 0 22rem; background: var(--header-search-bg); border: 1px solid var(--header-search-border); border-radius: 18rem; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-50%); }
.site-search-input { display: block; width: 100%; min-width: 0; height: 100%; padding: 0; background: transparent; border: 0; outline: 0; font-size: var(--font-size-16); color: var(--header-search-color); }
.site-search-input::placeholder { color: var(--header-search-placeholder); }
/*.site-search-input::-webkit-search-cancel-button {

  display: none;

}*/
.site-search[open] .site-search-box { opacity: 1; visibility: visible; pointer-events: initial; }
.header-actions:has(.site-search[open]) .site-language, .header-actions:has(.site-search[open]) .header-action-divider { opacity: 0; visibility: hidden; pointer-events: none; }
/*Hamburger*/
.toggle-nav-button { display: grid; place-items: center; flex-shrink: 0; width: var(--toggle-nav-button-size); aspect-ratio: 1; cursor: pointer; }
.toggle-nav-icon { display: block; width: 100%; height: 100%; object-fit: contain; }
/*Full Navigation*/
.toggle-nav { position: fixed; inset: 0; z-index: 100; width: 100%; max-width: none; height: 100dvh; margin: 0; padding: 0; overflow-y: auto; color: var(--black); background: #fff; border: 0; }
.toggle-nav::backdrop { background: transparent; }
.toggle-nav-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; height: var(--header-height); }
.toggle-nav-logo { display: block; justify-self: start; width: fit-content; }
.toggle-nav-logo-image { display: block; width: auto; height: clamp(40rem, calc(60 / var(--container) * 100vw), 72rem); }
.toggle-nav-close { display: grid; place-items: center; justify-self: end; width: 52rem; aspect-ratio: 1; border: 1px solid var(--border-color); border-radius: 50%; }
.toggle-nav-close-icon { display: block; width: 57%; height: auto; object-fit: contain; }
.toggle-nav-body { display: flex; align-items: center; min-height: calc(100dvh - var(--header-height)); padding-block: clamp(60rem, calc(100 / var(--container) * 100vw), 100rem); }
.toggle-nav-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220rem, 100%), 1fr)); border-top: 1px solid #dce7f0; border-left: 1px solid #dce7f0; }
.toggle-nav-item { position: relative; min-height: 310rem; padding: clamp(28rem, calc(42 / var(--container) * 100vw), 42rem); border-right: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.toggle-nav-parent { display: block; font-size: var(--font-size-28); font-weight: 700; line-height: 1.35; letter-spacing: -0.03em; color: var(--primary); }
.toggle-nav-parent::after { display: block; width: 38rem; height: 2rem; margin-top: 30rem; background: var(--primary); content: ""; }
.toggle-nav-submenu { display: grid; gap: 13rem; margin-top: 30rem; }
.toggle-nav-link { display: block; width: fit-content; font-size: var(--font-size-16); font-weight: 400; line-height: 1.5; color: #657586; }
.toggle-nav-link:hover, .toggle-nav-link:focus-visible, .toggle-nav-link.is-current, .toggle-nav-parent:hover, .toggle-nav-parent:focus-visible, .toggle-nav-parent.is-current { color: var(--primary); }
.toggle-nav-tools { display: none; }
/*Header Interaction*/
@media (any-hover: hover) {
  .toggle-nav-item { transition: background-color 0.25s ease, border-color 0.25s ease; }
  .toggle-nav-item:hover { background: #f7fafc; }
}
@media (prefers-reduced-motion: no-preference) {
  .nav-menu-level-2 { transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; }
  .site-search-box { transition: opacity 0.2s ease, visibility 0.2s ease; }
  .site-language, .header-action-divider { transition: opacity 0.2s ease, visibility 0.2s ease; }
  .toggle-nav { opacity: 0; translate: 0 -12rem; transition: opacity 0.3s ease, translate 0.3s ease; }
  .toggle-nav:popover-open { opacity: 1; translate: 0; }
}
/*Header Tablet*/
@media (width < 1280px) {
  .site-header__container { grid-template-columns: minmax(0, 1fr) auto; }
  .main-nav { display: none; }
  .header-actions { gap: 16rem; }
  .site-search-box { width: 240rem; }
  .toggle-nav-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toggle-nav-item { min-height: 260rem; }
}
/*Header Mobile*/
@media (width < 768px) {
  .site-header__container { grid-template-columns: minmax(0, 1fr) auto; }
  .site-language, .header-action-divider, .site-search { display: none; }
  .header-actions { gap: 0; }
  .toggle-nav-button { display: grid; }
  .toggle-nav-header { height: var(--header-height); }
  .toggle-nav-logo-image { height: 40rem; }
  .toggle-nav-close { width: 42rem; }
  .toggle-nav-close-icon { width: 17rem; }
  .toggle-nav-body { display: block; min-height: 0; padding-block: 24rem 50rem; }
  .toggle-nav-tools { display: grid; gap: 20rem; margin-bottom: 30rem; }
  .toggle-nav-language { display: flex; align-items: center; gap: 20rem; }
  .toggle-nav-language-link { font-size: 14rem; font-weight: 500; color: #8b969f; }
  .toggle-nav-language-link.is-current { font-weight: 700; color: var(--primary); }
  .toggle-nav-search { display: flex; align-items: center; height: 48rem; padding-inline: 16rem; border: 1px solid var(--border-color); border-radius: 12rem; }
  .toggle-nav-search-input { flex: 1; min-width: 0; height: 100%; padding: 0; background: transparent; border: 0; outline: 0; font-size: 14rem; color: var(--black); }
  .toggle-nav-search-input::placeholder { color: #999; }
  .toggle-nav-search-button { display: grid; place-items: center; flex-shrink: 0; width: 24rem; aspect-ratio: 1; }
  .toggle-nav-search-button img { display: block; width: 20rem; height: 20rem; object-fit: contain; }
  .toggle-nav-menu { grid-template-columns: 1fr; }
  .toggle-nav-item { min-height: 0; padding: 26rem 20rem; }
  .toggle-nav-parent { font-size: var(--font-size-24); }
  .toggle-nav-parent::after { width: 30rem; margin-top: 18rem; }
  .toggle-nav-submenu { gap: 10rem; margin-top: 20rem; }
}
/*Footer*/
.site-footer { padding-block: 64rem; color: rgb(255 255 255 / 68%); background: #032447; }
.site-footer__main { display: grid; grid-template-columns: minmax(360rem, 1fr) minmax(0, 1.4fr); gap: 64rem; }
/*Related Sites*/
.footer-related { min-width: 0; }
.footer-related__heading { display: inline-flex; margin: 0; align-items: center; gap: 10rem; font-size: var(--font-size-16); font-weight: 600; color: #fff; }
.footer-related__heading-icon { display: block; width: 12rem; height: auto; }
.footer-related__list { display: flex; flex-wrap: wrap; align-items: center; gap: 24rem 32rem; margin-top: 24rem; padding-top: 24rem; border-top: 1px solid rgb(255 255 255 / 12%); }
.footer-related__link { display: inline-flex; align-items: center; gap: 10rem; font-size: var(--font-size-16); font-weight: 500; white-space: nowrap; color: rgb(255 255 255 / 75%); }
.footer-related__icon { display: block; flex-shrink: 0; width: 30rem; height: 30rem; object-fit: contain; }
/*Footer Content*/
.footer-content { min-width: 0; }
.footer-nav { padding-bottom: 24rem; border-bottom: 1px solid rgb(255 255 255 / 12%); }
.footer-nav__list { display: flex; flex-wrap: wrap; align-items: center; gap: 12rem 36rem; }
.footer-nav__link { font-size: var(--font-size-16); font-weight: 500; color: rgb(255 255 255 / 72%); }
.footer-nav__item:first-child .footer-nav__link { font-weight: 700; color: #fff; }
.footer-content__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 40rem; margin-top: 20rem; }
/*Company Information*/
.footer-company { min-width: 0; }
.footer-company__name { display: block; margin-bottom: 12rem; font-size: var(--font-size-18); font-weight: 700; color: #fff; }
.footer-company__address { font-size: var(--font-size-18); font-style: normal; line-height: 1.6; color: rgb(255 255 255 / 68%); }
.footer-company__info { display: flex; flex-wrap: wrap; gap: 6rem 24rem; margin-top: 12rem; }
.footer-company__item { display: inline-flex; align-items: center; gap: 7rem; font-size: var(--font-size-16); line-height: 1.5; }
.footer-company__item dt { font-weight: 600; color: rgb(255 255 255 / 82%); }
.footer-company__item dd { color: rgb(255 255 255 / 62%); }
.footer-company__item a { color: inherit; }
/*Social*/
.footer-social { display: flex; align-items: center; flex-shrink: 0; gap: 12rem; display: none; }
.footer-social__link { display: grid; place-items: center; width: 42rem; aspect-ratio: 1; border: 1px solid rgb(255 255 255 / 24%); border-radius: 50%; }
.footer-social__link img { display: block; width: 18rem; height: 18rem; object-fit: contain; }
/*Copyright*/
.site-footer__copyright { margin-top: 28rem; padding-top: 20rem; border-top: 1px solid rgb(255 255 255 / 10%); font-size: var(--font-size-16); line-height: 1.5; text-align: center; color: rgb(255 255 255 / 45%); }
/*Footer Interaction*/
@media (any-hover: hover) {
  .footer-related__link:hover, .footer-nav__link:hover { color: #fff; }
  .footer-social__link:hover { background: rgb(255 255 255 / 10%); border-color: rgb(255 255 255 / 50%); }
}
@media (prefers-reduced-motion: no-preference) {
  .footer-related__link, .footer-nav__link, .footer-social__link { transition: 0.2s ease; }
}
/*Footer Tablet*/
@media (width < 1280px) {
  .site-footer__main { grid-template-columns: 1fr; gap: 36rem; }
  .footer-content__bottom { align-items: flex-start; }
}
/*Footer Mobile*/
@media (width < 768px) {
  .site-footer { padding-block: 36rem 24rem; }
  .site-footer__main { gap: 32rem; }
  .footer-related__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18rem 12rem; margin-top: 18rem; padding-top: 18rem; }
  .footer-related__link { white-space: normal; }
  .footer-related__icon { width: 26rem; height: 26rem; }
  .footer-nav__list { gap: 10rem 20rem; }
  .footer-content__bottom { display: grid; gap: 24rem; }
  .footer-company__info { display: grid; gap: 6rem; }
  .footer-social { justify-self: start; }
  .footer-social__link { width: 38rem; }
  .site-footer__copyright { margin-top: 24rem; text-align: left; }
}
@media (width < 480px) {
  .footer-related__list { grid-template-columns: 1fr; }
}