@charset "UTF-8";


/* ========================================
   News Page
======================================== */

html,
body {
  width: 100%;
  max-width: 100%;

  overflow-x: hidden;
}


.news-page {
  width: 100%;
  max-width: 100%;

  overflow-x: hidden;
}


.news-page img,
.news-page video {
  max-width: 100%;
}


/* ========================================
   Section One
   News Hero
======================================== */

.news-hero {
  position: relative;

  width: 100%;
  height: 43.75rem;

  overflow: hidden;

  background-color: #111;
}


/* ========================================
   Hero Video
======================================== */

.news-hero-video {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  opacity: 0;

  transform:
    scale(1.025);

  will-change:
    opacity,
    transform;
}


/* ========================================
   Section Two
   News Poster
======================================== */

.news-poster {
  position: relative;

  width: 100%;
  max-width: 100%;

  padding-top: 7.5rem;
  padding-bottom: 7.5rem;

  overflow: hidden;

  background-color: #333;

  background-image:
    url("../../images/news/poster/poster-background.webp");

  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}


/* ========================================
   Poster Inner
======================================== */

.news-poster-inner {
  width: min(
    calc(100% - 2.5rem),
    91.25rem
  );

  max-width: 100%;

  margin: 0 auto;
}


/* ========================================
   Poster Heading
======================================== */

.news-poster-heading {
  margin-bottom: 3.5rem;

  text-align: center;
}


.news-poster-title {
  margin: 0;

  color: #fff;

  font-family:
    var(--font-joseon-100-years),
    "Joseon100Years",
    serif;

  font-size: 2rem;
  font-weight: 400;
  line-height: 1.5;

  letter-spacing: -0.02em;

  word-break: keep-all;

  will-change:
    opacity,
    transform,
    filter;
}


/* ========================================
   Poster Divider
======================================== */

.news-poster-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;

  width: min(
    100%,
    62.5rem
  );

  margin:
    2rem
    auto
    0;

  color:
    rgba(255, 255, 255, 0.7);
}


.news-poster-divider-line {
  display: block;
  flex: 1;

  height: 0.0625rem;

  background-color:
    currentColor;
}


.news-poster-divider-symbol {
  display: block;

  width: 0.75rem;
  height: 0.75rem;

  object-fit: contain;

  filter:
    brightness(0)
    invert(1);
}


/* ========================================
   Poster Carousel
======================================== */

.news-poster-carousel.swiper {
  width: 100%;
  max-width: 100%;

  overflow: hidden;
}


.news-poster-list.swiper-wrapper {
  display: flex;
  align-items: center;
}


.news-poster-slide.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  min-width: 0;
  height: auto;

  transition:
    transform 0.8s ease,
    opacity 0.8s ease;
}


/* ========================================
   Poster Card
======================================== */

.news-poster-card {
  position: relative;

  width: 100%;

  overflow: hidden;

  opacity: 0.6;

  transform:
    scale(0.9);

  transition:
    transform 0.9s ease,
    opacity 0.9s ease;

  will-change:
    transform,
    opacity;
}


.news-poster-image {
  display: block;

  width: 100%;
  height: auto;

  object-fit: cover;

  pointer-events: none;
}


/* ========================================
   Poster White Overlay
======================================== */

.news-poster-overlay {
  position: absolute;
  z-index: 2;

  inset: 0;

  display: block;

  background-color:
    rgba(255, 255, 255, 0.42);

  opacity: 1;

  pointer-events: none;

  transition:
    opacity 0.8s ease;
}


/* Active */

.news-poster-slide.swiper-slide-active
.news-poster-card {
  opacity: 1;

  transform:
    scale(1);
}


.news-poster-slide.swiper-slide-active
.news-poster-overlay {
  opacity: 0;
}


/* Previous / Next */

.news-poster-slide.swiper-slide-prev
.news-poster-card,
.news-poster-slide.swiper-slide-next
.news-poster-card {
  opacity: 0.6;

  transform:
    scale(0.9);
}


.news-poster-slide.swiper-slide-prev
.news-poster-overlay,
.news-poster-slide.swiper-slide-next
.news-poster-overlay {
  opacity: 1;
}


/* ========================================
   Section Three
   News CTA
======================================== */

.news-cta {
  position: relative;
  isolation: isolate;

  width: 100%;
  max-width: 100%;
  height: 43.75rem;

  overflow: hidden;

  background-color: #eee;
}


/* ========================================
   CTA Image
======================================== */

.news-cta-image {
  position: absolute;
  z-index: 0;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  will-change:
    opacity,
    transform;
}


/* ========================================
   CTA Overlay
======================================== */

.news-cta-overlay {
  position: absolute;
  z-index: 1;

  inset: 0;

  display: block;

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.82) 0%,
      rgba(255, 255, 255, 0.58) 38%,
      rgba(255, 255, 255, 0.12) 68%,
      rgba(255, 255, 255, 0) 100%
    );

  pointer-events: none;
}


/* ========================================
   CTA Inner
======================================== */

.news-cta-inner {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;

  width: min(
    calc(100% - 2.5rem),
    91.25rem
  );

  height: 100%;

  margin: 0 auto;
}


/* ========================================
   CTA Content
======================================== */

.news-cta-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  width: 100%;
  max-width: 31.25rem;
}


/* ========================================
   CTA Title
======================================== */

.news-cta-title {
  display: flex;
  flex-direction: column;

  margin: 0;

  font-family:
    var(--font-joseon-100-years),
    "Joseon100Years",
    serif;

  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1.45;

  letter-spacing: -0.02em;

  word-break: keep-all;

  will-change:
    opacity,
    transform,
    filter;
}


/* 첫 번째 줄 */

.news-cta-title-main {
  display: block;

  color: #181818;

  font-family:
    var(--font-joseon-100-years),
    "Joseon100Years",
    serif;
}


/* 한자 */

.news-cta-title-hanja {
  font-family:
    var(--font-yuji-syuku),
    "Yuji Syuku",
    serif;

  font-weight: 400;
}


/* 두 번째 · 세 번째 줄 */

.news-cta-title-sub {
  display: block;

  color: #77736d;

  font-family:
    var(--font-joseon-100-years),
    "Joseon100Years",
    serif;
}


/* ========================================
   CTA Button
======================================== */

.news-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;

  min-width: 12.5rem;

  margin-top: 2rem;

  padding:
    0.875rem
    1.5rem;

  color: #fff;

  background-color: #333;

  border:
    0.0625rem solid
    #333;

  border-radius: 0.25rem;

  font-family:
    var(--font-noto-serif-kr),
    "Noto Serif KR",
    serif;

  font-size: 1rem;
  font-weight: 400;
  line-height: 1;

  text-decoration: none;

  cursor: pointer;

  transition:
    color 0.35s ease,
    background-color 0.35s ease,
    border-color 0.35s ease;
}


/* ========================================
   CTA Arrow
======================================== */

.news-cta-button-arrow {
  display: block;

  font-size: 1.125rem;
  line-height: 1;

  transition:
    transform 0.35s ease;
}


/* ========================================
   CTA Hover
======================================== */

@media (hover: hover) and (pointer: fine) {

  .news-cta-button:hover {
    color: #333;

    background-color: #fff;

    border-color: #333;
  }


  .news-cta-button:hover
  .news-cta-button-arrow {
    transform:
      translateX(0.375rem);
  }

}


/* Focus */

.news-cta-button:focus-visible {
  outline:
    0.125rem solid
    #333;

  outline-offset:
    0.25rem;
}


/* ========================================
   Section Four
   News List
======================================== */

.news-list {
  position: relative;

  width: 100%;
  max-width: 100%;

  padding-top: 7.5rem;
  padding-bottom: 7.5rem;

  overflow: hidden;

  background-color: #fff;
}


/* ========================================
   News List Inner
======================================== */

.news-list-inner {
  width: min(
    calc(100% - 2.5rem),
    91.25rem
  );

  max-width: 100%;

  margin: 0 auto;
}


/* ========================================
   News Carousel
======================================== */

.news-list-carousel.swiper {
  width: 100%;
  max-width: 100%;

  overflow: hidden;
}


.news-list-track.swiper-wrapper {
  display: flex;
  align-items: stretch;

  width: 100%;
}


/* ========================================
   News Card
======================================== */

.news-list-card.swiper-slide {
  display: flex;
  flex-direction: column;

  flex-shrink: 0;

  min-width: 0;
  height: auto;

  background-color: #fff;

  box-shadow:
    0
    0.125rem
    0.5rem
    rgba(0, 0, 0, 0.08);
}


/* ========================================
   News Image
======================================== */

.news-list-image-wrap {
  width: 100%;
  height: 25rem;

  overflow: hidden;

  background-color: #f2f2f2;
}


.news-list-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transition:
    transform 0.5s ease;

  will-change:
    transform;
}


/* ========================================
   Image Hover Only
======================================== */

@media (hover: hover) and (pointer: fine) {

  .news-list-card:hover
  .news-list-image {
    transform:
      scale(1.06);
  }

}


/* ========================================
   News Content
======================================== */

.news-list-content {
  display: flex;
  flex-direction: column;

  flex: 1;

  min-width: 0;

  padding:
    1.75rem
    1.875rem
    2rem;
}


/* ========================================
   News Meta
======================================== */

.news-list-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}


.news-list-date {
  color: #888;

  font-family:
    var(--font-noto-serif-kr),
    "Noto Serif KR",
    serif;

  font-size: 0.875rem;
  line-height: 1;

  white-space: nowrap;
}


.news-list-category {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 5.5rem;

  padding:
    0.5rem
    0.75rem;

  color: #737373;

  background-color: #f5f5f5;

  font-family:
    var(--font-noto-serif-kr),
    "Noto Serif KR",
    serif;

  font-size: 0.875rem;
  line-height: 1;

  white-space: nowrap;
}


/* ========================================
   News Title
======================================== */

.news-list-title {
  margin:
    1.75rem
    0
    0;

  color: #111;

  font-family:
    var(--font-joseon-100-years),
    "Joseon100Years",
    serif;

  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.5;

  word-break: keep-all;
}


/* ========================================
   News Description
======================================== */

.news-list-description {
  margin:
    auto
    0
    0;

  padding-top: 2rem;

  color: #888;

  font-family:
    var(--font-noto-serif-kr),
    "Noto Serif KR",
    serif;

  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.65;

  word-break: keep-all;
}


/* ========================================
   News Progress
======================================== */

.news-list-progress {
  display: flex;
  align-items: center;
  gap: 1rem;

  width: 35%;

  margin:
    2rem
    auto
    0;

  color: #333;

  font-family:
    var(--font-noto-serif-kr),
    "Noto Serif KR",
    serif;

  font-size: 0.875rem;
  line-height: 1;
}


.news-list-current,
.news-list-total {
  flex: 0 0 auto;

  min-width: 1.75rem;
}


.news-list-total {
  text-align: right;
}


/* ========================================
   Progress Track
======================================== */

.news-list-progress-track {
  position: relative;

  flex: 1;

  height: 1.5rem;
}


.news-list-progress-line {
  position: absolute;

  top: 50%;
  right: 0;
  left: 0;

  height: 0.0625rem;

  background-color:
    rgba(51, 51, 51, 0.4);

  transform:
    translateY(-50%);
}


/* ========================================
   Progress Thumb
======================================== */

.news-list-progress-thumb {
  position: absolute;

  top: 50%;
  left: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 1.5rem;
  height: 1.5rem;

  background-color: #fff;

  transform:
    translate3d(
      0,
      -50%,
      0
    );

  will-change:
    transform;
}


.news-list-progress-symbol {
  display: block;

  width: 0.75rem;
  height: 0.75rem;

  object-fit: contain;
}


/* ========================================
   Tablet
======================================== */

@media (
  min-width: 48rem
) and (
  max-width: 64rem
) {

  /* Hero */

  .news-hero {
    height: 37.5rem;
  }


  /* Poster */

  .news-poster {
    padding-top: 6.25rem;
    padding-bottom: 6.25rem;
  }


  .news-poster-inner {
    width:
      calc(100% - 2.5rem);
  }


  .news-poster-heading {
    margin-bottom: 3rem;
  }


  .news-poster-title {
    font-size: 1.75rem;
  }


  /* CTA */

  .news-cta {
    height: 37.5rem;
  }


  .news-cta-inner {
    width:
      calc(100% - 2.5rem);
  }


  .news-cta-content {
    max-width: 27.5rem;
  }


  .news-cta-title {
    font-size: 2rem;
  }


  .news-cta-button {
    min-width: 11.25rem;

    margin-top: 1.75rem;

    font-size: 0.9375rem;
  }


  /* News List */

  .news-list {
    padding-top: 6.25rem;
    padding-bottom: 6.25rem;
  }


  .news-list-inner {
    width:
      calc(100% - 2.5rem);
  }


  .news-list-image-wrap {
    height: 20rem;
  }


  .news-list-content {
    padding:
      1.5rem
      1.5rem
      1.75rem;
  }


  .news-list-title {
    font-size: 1.125rem;
  }


  .news-list-description {
    font-size: 0.8125rem;
  }


  .news-list-progress {
    width: 50%;
  }

}


/* ========================================
   Mobile
======================================== */

@media (max-width: 47.9375rem) {

  /* ========================================
     Hero
  ======================================== */

  .news-hero {
    height: 31.25rem;
  }


  .news-hero-video {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
  }


  /* ========================================
     Poster
  ======================================== */

  .news-poster {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }


  .news-poster-inner {
    width:
      calc(100% - 2.5rem);

    max-width: 100%;
  }


  .news-poster-heading {
    margin-bottom: 2.5rem;
  }


  .news-poster-title {
    font-size: 1.125rem;
    line-height: 1.55;
  }


  .news-poster-divider {
    width: 100%;

    margin-top: 1.25rem;
  }


  /*
   * 중요:
   * 모바일에서도 overflow visible 사용하지 않습니다.
   * slidesPerView 1.45 때문에 컨테이너 안에서
   * 양쪽 포스터가 일부 보입니다.
   */
  .news-poster-carousel.swiper {
    width: 100%;

    overflow: hidden;
  }


  .news-poster-card {
    opacity: 0.55;

    transform:
      scale(0.88);
  }


  .news-poster-slide.swiper-slide-active
  .news-poster-card {
    opacity: 1;

    transform:
      scale(1);
  }


  .news-poster-overlay {
    background-color:
      rgba(255, 255, 255, 0.58);
  }


  .news-poster-slide.swiper-slide-active
  .news-poster-overlay {
    opacity: 0;
  }


  /* ========================================
     CTA
  ======================================== */

  .news-cta {
    height: 31.25rem;
  }


  .news-cta-image {
    object-position:
      62%
      center;
  }


  .news-cta-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.88) 0%,
        rgba(255, 255, 255, 0.7) 55%,
        rgba(255, 255, 255, 0.15) 88%,
        rgba(255, 255, 255, 0) 100%
      );
  }


  .news-cta-inner {
    width:
      calc(100% - 2.5rem);
  }


  .news-cta-content {
    width: 72%;
    max-width: 18.75rem;
  }


  .news-cta-title {
    font-size: 1.5rem;
    line-height: 1.5;
  }


  .news-cta-button {
    min-width: 9.375rem;

    margin-top: 1.5rem;

    padding:
      0.75rem
      1rem;

    gap: 0.75rem;

    font-size: 0.8125rem;
  }


  .news-cta-button-arrow {
    font-size: 1rem;
  }


  /* ========================================
     News List
  ======================================== */

  .news-list {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }


  .news-list-inner {
    width:
      calc(100% - 2.5rem);

    max-width: 100%;
  }


  /*
   * 모바일에서는 Swiper 형태를 해제하고
   * 세로 리스트로 사용
   */
  .news-list-carousel.swiper {
    width: 100%;
    max-width: 100%;

    overflow: hidden;
  }


  .news-list-track.swiper-wrapper {
    display: flex;
    flex-direction: column;

    gap: 1rem;

    width: 100% !important;

    transform: none !important;
  }


  .news-list-card.swiper-slide {
    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    align-items: stretch;

    width: 100% !important;
    max-width: 100%;

    min-width: 0;
    min-height: 7.5rem;

    margin: 0 !important;
    margin-right: 0 !important;
  }


  /* Image */

  .news-list-image-wrap {
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 7.5rem;
  }


  .news-list-image {
    width: 100%;
    height: 100%;

    object-fit: cover;
  }


  /* Content */

  .news-list-content {
    justify-content: center;

    min-width: 0;

    padding:
      0.875rem
      0.75rem;
  }


  .news-list-meta {
    gap: 0.375rem;
  }


  .news-list-date {
    font-size: 0.5625rem;
  }


  .news-list-category {
    min-width: auto;

    padding:
      0.3125rem
      0.4375rem;

    font-size: 0.5625rem;
  }


  .news-list-title {
    margin-top: 0.625rem;

    font-size: 0.6875rem;
    line-height: 1.45;
  }


  .news-list-description {
    display: none;
  }


  /*
   * 모바일 진행바 숨김
   */
  .news-list-progress {
    display: none;
  }

}


/* ========================================
   Small Mobile
======================================== */

@media (max-width: 30rem) {

  .news-hero {
    height: 28.125rem;
  }


  .news-cta {
    height: 28.125rem;
  }


  .news-cta-content {
    width: 78%;
  }


  .news-cta-title {
    font-size: 1.375rem;
  }


  .news-cta-button {
    min-width: 8.75rem;

    font-size: 0.75rem;
  }

}


/* ========================================
   Reduced Motion
======================================== */

@media (prefers-reduced-motion: reduce) {

  .news-hero-video,
  .news-poster-title,
  .news-poster-card,
  .news-poster-overlay,
  .news-cta-image,
  .news-cta-title,
  .news-cta-button,
  .news-cta-button-arrow,
  .news-list-card,
  .news-list-image {
    animation: none !important;
    transition: none !important;
  }


  .news-hero-video,
  .news-cta-image,
  .news-cta-title,
  .news-cta-button,
  .news-list-card {
    visibility: visible !important;
    opacity: 1 !important;

    filter: none !important;
  }

}