@charset "UTF-8";
/* Fonts --------------------------- */
@font-face {
  font-family: "The Group TEXT";
  src: url("../fonts/en/TheGroupTEXT-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "The Group TEXT";
  src: url("../fonts/en/TheGroupTEXT-RegularItalic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "The Group TEXT";
  src: url("../fonts/en/TheGroupTEXT-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "The Group TEXT";
  src: url("../fonts/en/TheGroupTEXT-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "The Group HEAD";
  src: url("../fonts/en/TheGroupHEAD-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "The Group HEAD";
  src: url("../fonts/en/TheGroupHEAD-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "NanumSquareRound";
  src: url("../fonts/ko/NanumSquareRoundOTFL.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "NanumSquareRound";
  src: url("../fonts/ko/NanumSquareRoundOTFR.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "NanumSquareRound";
  src: url("../fonts/ko/NanumSquareRoundOTFB.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "NanumSquareRound";
  src: url("../fonts/ko/NanumSquareRoundOTFEB.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
}
:root {
  --header-height: 62px;
  /* Font Families */
  --font-head: "The Group HEAD", sans-serif;
  --font-title: "The Group TEXT", sans-serif;
  --font-body: "NanumSquareRound", sans-serif;
  /* Colors */
  --color-white: #fff;
  --color-black: #000;
}
@media (max-width: 1024px) {
  :root {
    --header-height: 67px;
  }
}

/* reset CSS --------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  word-break: keep-all;
  white-space: nowrap;
}

/* Base Styles ------------------------ */
/* 하단에서 새로고침 시 다른 섹션 깜빡임 방지: 스크롤 복원 전까지 숨김 */
.vwgk-scroll-restore-pending body {
  visibility: hidden;
}

html {
  width: 100%;
  height: auto;
  min-height: 100%;
}

body {
  overflow-x: hidden;
  overflow-y: scroll;
  width: 100%;
  height: auto;
  min-height: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.7px;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 1024px) {
  body {
    font-size: 15px;
    line-height: 22px;
    letter-spacing: -0.6px;
  }
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-white);
}

#wrap {
  position: relative;
  width: 100%;
}

/* 폰트 ------------------------- */
.color-wh {
  color: var(--color-white);
}

.color-bk {
  color: var(--color-black);
}

.nav-item-title {
  color: #FFF;
  font-family: "The Group TEXT";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}
.nav-item-title strong {
  font-weight: 700;
}

/* Body-eg-60-B — 60px@1920, 1440부터 축소 */
.body-eg-60-b {
  font-family: var(--font-title);
  font-size: clamp(36px, 4.167vw, 60px);
  font-style: normal;
  font-weight: 700;
  line-height: 1.133; /* 68/60 */
  letter-spacing: -2px;
}
@media (max-width: 1024px) {
  .body-eg-60-b {
    font-size: 36px;
    line-height: 1.222; /* 44/36 */
    letter-spacing: -1.5px;
  }
}

/* Title-eg-90-b — 90px@1920, 1440부터 축소 */
.title-eg-90-b {
  font-family: var(--font-title);
  font-size: clamp(52px, 6.25vw, 90px);
  font-weight: 700;
  letter-spacing: -3px;
  line-height: 1.044; /* 94/90 */
}
@media (max-width: 1024px) {
  .title-eg-90-b {
    font-size: 52px;
    letter-spacing: -2px;
    line-height: 1.077; /* 56/52 */
  }
}
.title-eg-90-b-v2 {
  font-family: var(--font-title);
  font-size: clamp(52px, 6.25vw, 90px);
  font-weight: 700;
  letter-spacing: -3px;
  line-height: 1.089; /* 98/90 */
}
@media (max-width: 1024px) {
  .title-eg-90-b-v2 {
    font-size: 52px;
    letter-spacing: -2px;
    line-height: 1.115; /* 58/52 */
  }
}

/* Body-en-30-b — 30px@1920, 1440부터 축소 */
.body-en-30-b {
  font-family: var(--font-title);
  font-size: clamp(21px, 2.083vw, 30px);
  font-weight: 700;
  line-height: 1; /* 30/30 */
  letter-spacing: -0.7px;
}
@media (max-width: 1024px) {
  .body-en-30-b {
    font-size: 24px;
    line-height: 1.333; /* 32/24 */
    letter-spacing: -0.6px;
  }
}

/* Body-en-20-b — 20px@1920, 1440부터 축소 */
.body-en-20-b {
  font-family: var(--font-title);
  font-size: clamp(14px, 1.389vw, 20px);
  font-weight: 700;
  line-height: 1.2; /* 24/20 */
}
@media (max-width: 1024px) {
  .body-en-20-b {
    font-size: 16px;
    line-height: 1.375; /* 22/16 */
  }
}

/* Body-ko-40-b — 40px@1920, 1440부터 축소 */
.body-ko-40-b {
  font-family: var(--font-body);
  font-size: clamp(28px, 2.778vw, 40px);
  font-weight: 700;
  line-height: 1.35; /* 54/40 */
  letter-spacing: -2px;
}
@media (max-width: 1024px) {
  .body-ko-40-b {
    font-size: 28px;
    line-height: 1.357; /* 38/28 */
    letter-spacing: -1.4px;
  }
}

/* Body-ko-30-b — 30px@1920, 1440부터 축소 */
.body-ko-30-b {
  font-family: var(--font-body);
  font-size: clamp(21px, 2.083vw, 30px);
  font-weight: 700;
  line-height: 1.533; /* 30/30 */
  letter-spacing: -1.6px;
}
@media (max-width: 1024px) {
  .body-ko-30-b {
    font-size: 22px;
    line-height: 1.455; /* 32/22 */
    letter-spacing: -1.2px;
  }
}

/* Body-kr-30-b — 30px@1920, 1440부터 축소 */
.body-kr-30-b {
  font-family: var(--font-body);
  font-size: clamp(21px, 2.083vw, 30px);
  font-weight: 700;
  line-height: 1; /* 30/30 */
  letter-spacing: -1.6px;
}
@media (max-width: 1024px) {
  .body-kr-30-b {
    font-size: 22px;
    line-height: 1.455; /* 32/22 */
    letter-spacing: -1.2px;
  }
}

/* Body-ko-20-b — 20px@1920, 1440부터 축소 */
.body-ko-20-b {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.389vw, 20px);
  font-weight: 700;
  line-height: 1.7; /* 34/20 */
  letter-spacing: -0.7px;
}
@media (max-width: 1024px) {
  .body-ko-20-b {
    font-size: 17px;
    line-height: 1.706; /* 29/17 */
    letter-spacing: -0.6px;
  }
}

/* Body-ko-17-r — 17px@1920, 1440부터 축소 */
.body-ko-17-r {
  font-family: var(--font-body);
  font-size: clamp(12px, 1.181vw, 17px);
  font-weight: 400;
  line-height: 1.412; /* 24/17 */
  letter-spacing: -0.7px;
}
@media (max-width: 1024px) {
  .body-ko-17-r {
    font-size: 15px;
    line-height: 1.467; /* 22/15 */
    letter-spacing: -0.6px;
  }
}

/* Body2-ko-17-r — 17px@1920, 1440부터 축소 */
.body2-ko-17-r {
  font-family: var(--font-body);
  font-size: clamp(12px, 1.181vw, 17px);
  font-weight: 400;
  line-height: 1.765; /* 30/17 */
  letter-spacing: -0.7px;
}
@media (max-width: 1024px) {
  .body2-ko-17-r {
    font-size: 15px;
    line-height: 1.733; /* 26/15 */
    letter-spacing: -0.6px;
  }
}

/* 레이아웃---------------------- */
.header {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  background: #002733;
  z-index: 99999;
  font-family: var(--font-body);
}
.header-inner {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: calc(2000px + 2 * clamp(20px, 6vw, 96px));
  width: 100%;
  height: var(--header-height);
  margin: 0 auto;
  z-index: 90;
  padding-left: clamp(20px, 6vw, 96px);
  padding-right: clamp(20px, 6vw, 96px);
  position: relative;
}
.header-inner h1 {
  color: var(--color-white);
  font-size: 18px;
}
@media (max-width: 1024px) {
  .header-inner {
    padding: 0;
  }
}
.header-logo a {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* section 내부 컨테이너 (좌우 260px 여백 적용된 section 내부 컨테이너) */
.container-inner {
  width: 100%;
  height: 100%;
  padding-top: var(--header-height);
  padding-left: clamp(20px, 13.5vw, 260px);
  padding-right: clamp(20px, 13.5vw, 260px);
}
@media (max-width: 1024px) {
  .container-inner {
    padding-left: clamp(20px, 6vw, 96px);
    padding-right: clamp(20px, 6vw, 96px);
  }
}

.sec-area {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  padding-top: var(--header-height);
  overflow: hidden;
}

.sec-split {
  display: flex;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
}
@media (max-width: 1024px) {
  .sec-split {
    flex-direction: column;
    height: auto;
  }
}
@media (max-width: 1024px) {
  .sec-split.sec-03 {
    flex-direction: column-reverse;
  }
}
.sec-split .split-text,
.sec-split .split-image {
  flex: 0 0 50%;
  position: relative;
  overflow: hidden;
}
.sec-split .split-text {
  display: flex;
  min-width: 0;
  box-sizing: border-box;
}
@media (max-width: 1024px) {
  .sec-split .split-text {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    padding: 80px 5%;
  }
}
.sec-split .split-image {
  flex: 0 0 50%;
  box-sizing: border-box;
}
.sec-split .split-image.single {
  width: 100%;
  height: 100%;
}
.sec-split .split-image .img-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.sec-split .split-image .img-box img {
  object-position: center;
}
@media (max-width: 1024px) {
  .sec-split .split-image {
    flex: 1 1 auto;
    width: 100%;
    height: 60dvh;
  }
}

.bg-white {
  background-color: var(--color-white);
  color: var(--color-black);
}

.text-box {
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(20px);
}
.text-box.gap-21 {
  gap: 21px;
}
@media (max-width: 1024px) {
  .text-box.gap-21 {
    gap: 15px;
  }
}
.text-box.gap-25 {
  gap: 25px;
}
@media (max-width: 1024px) {
  .text-box.gap-25 {
    gap: 15px;
  }
}

.mo-only {
  display: none;
}
@media (max-width: 1024px) {
  .mo-only {
    display: block;
  }
}

.pc-only {
  display: block;
}
@media (max-width: 1024px) {
  .pc-only {
    display: none;
  }
}

.img-letter * {
  height: auto;
  display: block;
}
.img-letter-a {
  width: 32.917vw; /* 632/1920 */
}
@media (max-width: 1024px) {
  .img-letter-a {
    max-width: 80%;
  }
}
.img-letter-b {
  width: 30.625vw; /* 588/1920 */
}
@media (max-width: 1024px) {
  .img-letter-b {
    max-width: 80%;
  }
}
.img-letter-c {
  width: 32.917vw; /* 632/1920 */
}
@media (max-width: 1024px) {
  .img-letter-c {
    max-width: 80%;
  }
}
.img-letter-d {
  width: 30.625vw; /* 588/1920 */
}
@media (max-width: 1024px) {
  .img-letter-d {
    max-width: 80%;
  }
}
.img-letter-e {
  width: 28.229vw; /* 542/1920 */
}
@media (max-width: 1024px) {
  .img-letter-e {
    max-width: 80%;
  }
}
.img-letter-f {
  width: 27.552vw; /* 529/1920 */
}
@media (max-width: 1024px) {
  .img-letter-f {
    max-width: 80%;
  }
}
.img-letter-g {
  width: 100%;
}
.img-letter-h {
  width: 100%;
}
.img-letter-i {
  width: 100%;
}
.img-letter-j {
  width: 100%;
}
.img-letter-k {
  width: 100%;
}
.img-letter-l {
  width: 100%;
}

.title-group {
  position: relative;
}

.year-label {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 30px;
  font-family: "The Group TEXT";
  font-size: clamp(17px, 1.667vw, 24px); /* 24px@1920, 1440부터 축소 */
  font-style: italic;
  font-weight: 400;
  line-height: 1.25; /* 30/24 */
  letter-spacing: -1.6px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
}
@media (max-width: 1024px) {
  .year-label {
    font-size: 20px;
    line-height: 1.6; /* 32/20 */
    margin-bottom: 4px;
  }
}

.pt-200 {
  padding-top: calc(16.666666vh - var(--header-height));
}
@media (max-width: 1024px) {
  .pt-200 {
    padding-top: 60px;
  }
}

/* 376px 이하 전역: 줄간격·갭 축소 */
@media (max-width: 376px) {
  body {
    line-height: 24px;
  }
  .body-eg-60-b {
    line-height: 1.3;
  }
  .title-eg-90-b,
  .title-eg-90-b-v2 {
    line-height: 1.25;
  }
  /* 알파벳 이미지 나오는 페이지의 타이틀만 줄간격 축소 */
  .content-alphabet .title-group .title-eg-90-b,
  .content-alphabet .title-group .title-eg-90-b-v2 {
    line-height: 1;
  }
  .body-en-30-b {
    line-height: 1.4;
  }
  .body-en-20-b {
    line-height: 1.4 0.5;
  }
  .body-ko-40-b {
    line-height: 1.4;
  }
  .body-kr-30-b {
    line-height: 1.4 0.5;
  }
  .body-ko-20-b {
    line-height: 1.5;
  }
  .body-ko-17-r {
    line-height: 1.5;
  }
  .body2-ko-17-r {
    line-height: 1.5;
  }
  .text-box.gap-21 {
    gap: 10px;
  }
  .text-box.gap-25 {
    gap: 12px;
  }
  .gap-40 {
    gap: 30px;
  }
  .gap-30 {
    gap: 22px;
  }
  .gap-24 {
    gap: 16px;
  }
  .gap-21 {
    gap: 12px;
  }
  .gap-20 {
    gap: 14px;
  }
  .gap-16 {
    gap: 10px;
  }
  /* E 알파벳 이미지만 376에서 더 축소 */
  .img-letter-e {
    width: 65%;
    max-width: 65%;
  }
}

/*# sourceMappingURL=history_common.css.map */