:root {  
  --color-Main : #30cacb;
    --color-BG : #F7F8FD;
    --color-secondary : #3E298C;
    --color-p35: #24b3b3;
    --color-p40: #07b1b2;
    --font-main:#1a1a1a;

    --color-gray-g10-bg: #f2f4f6;
    --color-gray-g20: #e7ebf2;
    --color-gray-g30-stroke: #d0d6e1;
    --color-gray-g40-placeholder: #c1c8d3;
    --color-gray-g50: #a4abb6;
    --color-gray-g60: #71767e;
    --color-gray-g70: #4b4b4b;
    --color-gray-g80: #303030;
    --color-gray-g90-darkfont: #1a1a1a;
    --color-gray-g100-darkbg: #11082c;
}
/* 메인페이지 관련 CSS */

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.container {
  width: 100%;
  min-height: 700px;
}

.video_main_wrap{height:100vh}

.main-swiper {
  width: 100%;
  height: 100%;
}

.main-swiper .swiper-wrapper,
.main-swiper .swiper-slide {
  width: 100%;
  height: 100%;
}

.main {
  position: relative;
  display: flex !important;
  align-items: center;

  width: 100%;
  height: 100%;
  min-height: 700px;
  overflow: hidden;
}


/* 고정 제목 */
.fixed-title-wrap {
  position: absolute;
  top: 45%;
  left: 120px;
  z-index: 20;
  transform: translateY(-160px);
  pointer-events: none;
}

.fixed-title-wrap .tit {
  margin: 0;
  color: #fff;
  font-size: 56px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.03em;
}

/* 영상 */

.background-video {
  position: absolute;
  inset: 0;
  z-index: 0;

  display: block;
  width: 100%;
  height: 100%;

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

/* 영상 위 어두운 오버레이 */
.main::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.65) 0%,
      rgba(0, 0, 0, 0.25) 55%,
      rgba(0, 0, 0, 0.1) 100%
    );
  pointer-events: none;
}

.main-swiper,
.main-swiper .swiper-wrapper,
.main-swiper .swiper-slide {
  width: 100%;
  height: 100%;
}


/* 콘텐츠 */
.main-content {
  position: relative;
  z-index: 2;
  display: flex;
  width: min(100% - 240px, 1600px);
  flex-direction: column;
  margin: auto 120px;
  padding-inline: var(--side-padding);

  top: auto;
  bottom: auto;
}

.tit {
  margin: 0;
  font-size: clamp(36px, 3.5vw, 56px);  
  font-weight: 600;
  color:#fff;
  line-height: 1.4;
  letter-spacing: -0.025em;
}

.sub-tit {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 300px;
}

.slide-label {
  font-size: 26px;
  font-weight: 600;
  color:#fff
}

.slide-description {
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.7;
  color: #ddd;
}



/* =========================================
   메인 썸네일 진행 표시
========================================= */

.main-progress {
  position: absolute;
  right: max(48px, calc((100vw - 1680px) / 2));
  bottom: 64px;
  z-index: 20;

  display: grid;
  grid-template-columns: repeat(5, 96px);
  gap: 8px;
}

.main-progress-item {
  min-width: 0;
  padding: 0;

  border: 0;
  outline: none;
  background-color: transparent;

  color: rgba(255, 255, 255, 0.45);
  text-align: left;

  cursor: pointer;
}

/* 썸네일 */

.main-progress-thumb {
  position: relative;

  display: block;
  width: 100%;
  height: 70px;
  overflow: hidden;

  border: 1px solid transparent;
  background-color: rgba(0, 0, 0, 0.35);
  opacity: 0.45;

  transition:
    opacity 0.35s ease,
    border-color 0.35s ease,
    transform 0.35s ease;
}

.main-progress-thumb::after {
  position: absolute;
  inset: 0;

  background-color: rgba(5, 12, 35, 0.25);

  content: "";
  pointer-events: none;
}

.main-progress-thumb img {
  display: block;

  width: 100%;
  height: 100%;

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

  transition: transform 0.5s ease;
}

/* 진행선 */

.main-progress-track {
  display: block;

  width: 100%;
  height: 2px;
  margin-top: 6px;
  overflow: hidden;

  background-color: rgba(255, 255, 255, 0.25);
}

.main-progress-fill {
  display: block;

  width: 100%;
  height: 100%;

  background-color: #fff;
  transform: scaleX(0);
  transform-origin: left center;
}

/* 이름 */

.main-progress-name {
  display: block;
  overflow: hidden;

  margin-top: 7px;

  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;

  transition: color 0.35s ease;
}

/* 활성 상태 */

.main-progress-item.is-active .main-progress-thumb {
  border-color: rgba(255, 255, 255, 0.8);
  opacity: 1;
  transform: translateY(-3px);
}

.main-progress-item.is-active .main-progress-thumb::after {
  background-color: transparent;
}

.main-progress-item.is-active .main-progress-name {
  color: #fff;
}

.main-progress-item:hover .main-progress-thumb {
  opacity: 1;
}

.main-progress-item:hover .main-progress-thumb img {
  transform: scale(1.05);
}

/* 자동재생 진행 애니메이션 */

.main-progress-item.is-active .main-progress-fill {
  animation: mainProgressFill 6000ms linear forwards;
}

@keyframes mainProgressFill {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

/* 태블릿 */

@media (max-width: 1024px) {

  .main-progress {
    right: 32px;
    bottom: 44px;

    grid-template-columns: repeat(5, 76px);
    gap: 6px;
  }

  .main-progress-thumb {
    height: 44px;
  }

  .main-progress-name {
    font-size: 10px;
  }
  .ai-platform .section-description br{display: none;}
}

/* 모바일 */

@media (max-width: 767px) {
  .fixed-title-wrap {
    left: 50%;
    transform: translate(-50%, -160px);
    width:100%;
    
  }
  .fixed-title-wrap .tit {
    text-align: center;
    font-size: 36px;
  }
  
  .main-progress {
    right: 20px;
    bottom: 28px;
    left: 20px;

    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
  }

  .main-progress-thumb {
    height: 38px;
  }

  .main-progress-name {
    margin-top: 5px;
    font-size: 9px;
  }

  .main-progress-track {
    margin-top: 4px;
  }
}

/* 활성화된 슬라이드 텍스트 애니메이션 */
.main-content .tit,
.main-content .sub-tit {
  opacity: 0;
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.swiper-slide-active .main-content .tit {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

.swiper-slide-active .main-content .sub-tit {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

.slide-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.slide-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  /* backdrop-filter: blur(8px); */
  /* -webkit-backdrop-filter: blur(8px); */
}




@media (max-width: 768px) {
  .container {
    min-height: 600px;
  }

  .main-content {
    width: calc(100% - 40px);
    margin:auto 40px
  }

  .tit {
    font-size: 38px;
  }

  .sub-tit {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 18px;
    margin-top: 50px;
    width:100%
  }
  .slide-label{font-size: 20px;}

  .slide-description br {
    display: none;
  }

  .main-swiper .swiper-pagination {
    bottom: 30px;
    width: calc(100% - 40px);
  }

  .main-swiper .swiper-button-prev,
  .main-swiper .swiper-button-next {
    display: none;
  }
  .slide-tags{justify-content: center}
}

@media screen and (max-width:580px){

}


.eyebrow {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 10px;
  color: var(--color-p35);
  font-size: 22px;
  font-weight: 400;
}
.eyebrow span{color: var(--color-p35);}

.eyebrow-bar {
  display: block;
  width: 5px;
  height: 26px;
  background-color: var(--color-p35);
}

.main-title{
  font-size: 50px;
  font-weight: 700;
  line-height: 1.48;
  letter-spacing: -0.04em;
  word-break: keep-all;
}


.wrapper{
  display:flex;
  width: 100%;
  padding:120px;
  justify-content: center;
  height:100%;
}
.wrapper .inner{
   max-width: 1680px;
   width:100%;
   height:100%
}

.ai-platform {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background-color: #fff;
}



.ai-platform .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 80px;
  width: 100%;
  margin: 0 auto;
}

.ai-platform .text-area {
  position: relative;
  z-index: 2;

  flex: 1;
  min-width: 0;
  padding-top: 8px;
}

.ai-platform .section-title {
  color: #202020;
}

.ai-platform .section-description {
  margin-top: 80px;

  color: #555;
  font-size: 24px;
  line-height: 1.6;
  word-break: keep-all;
}

/* 이미지 영역 */
.ai-platform .image-area {
  position: relative;

  flex: 0 0 50%;
  height: clamp(420px, 42vw, 620px);
  overflow: hidden;

  background-color: var(--color-BG);
}

.ai-platform .platform-visual {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
  margin: 0;

  clip-path: inset(0 0 100% 0);
  will-change: clip-path, transform;
}

.ai-platform .platform-visual:first-child {
  clip-path: inset(0 0 0% 0);
}

.ai-platform .platform-visual img {
  display: block;

  width: 100%;
  height: 100%;

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

/* 태블릿 */
@media (max-width: 1024px) {
  .ai-platform {
    padding: 100px 0;
  }

  .ai-platform .wrapper {
    padding: 0 32px;
  }

  .ai-platform .inner {
    gap: 48px;
    min-height: calc(100vh - 200px);
  }

  .ai-platform .section-title {
    font-size: 30px;
  }

  .ai-platform .image-area {
    flex-basis: 46%;
    height: 480px;
  }
}

/* 모바일 */
@media (max-width: 767px) {
  .ai-platform {
    min-height: auto;
    padding: 70px 0;
    overflow: visible;
  }

  .ai-platform .wrapper {
    padding: 0 20px;
  }

  .ai-platform .inner {
    flex-direction: column;
    gap: 40px;

    min-height: auto;
  }

  .ai-platform .text-area {
    width: 100%;
    padding-top: 0;
  }





  .ai-platform .image-area {
    flex: none;

    width: 100%;
    height: 300px;
  }
  .eyebrow{
    gap:6px;
  }
  .eyebrow span{
    font-size: 16px;
  }
  .eyebrow-bar{
    width: 3px;
    height: 15px;
  }
  .wrapper{height:100%;}
}

/* 태블릿 */
@media (max-width: 1024px) {
  .digital-platform .platform-image{width:150px;height:150px;}
  .ai-platform {
    padding: 100px 0;
  }

  .ai-platform .wrapper {
    padding: 0 32px;
  }

  .ai-platform .inner {
    gap: 48px;
  }


  .ai-platform .image-area {
    flex-basis: 46%;
  }
}

/* 모바일 */
@media (max-width: 767px) {
  .ai-platform {
    padding: 70px 0;
  }

  .ai-platform .wrapper {
    padding: 0 20px;
  }

  .ai-platform .inner {
    flex-direction: column;
    gap: 40px;
  }

  .ai-platform .text-area {
    width: 100%;
    padding-top: 0;
  }

  .ai-platform .section-title {
    font-size: 34px;
    line-height: 1.45;
  }

  .ai-platform .section-title br,
  .ai-platform .section-description br {
    display: none;
  }

  .ai-platform .section-description {
    margin-top: 28px;
    font-size: 18px;
  }

  .ai-platform .image-area {
    flex: none;
    width: 100%;
  }
}


.digital-platform {
  position: relative;
  width: 100%;
  overflow: hidden;

  color: #fff;

  background:
    linear-gradient(
      rgba(4, 10, 14, 0.42),
      rgba(4, 10, 14, 0.72)
    ),
    url("../img/section_back_1.png") center / cover no-repeat;
}

.digital-platform .wrapper .inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 타이틀 */
.digital-platform .platform-title {
  position: relative;
  z-index: 2;

  margin: 0;

  color: #fff;
  font-size: 56px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;

  /* GSAP 선 애니메이션 */
  --title-line-scale: 0;
}

/* 타이틀 아래 중앙 세로선 */
.digital-platform .platform-title::after {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;

  width: 1px;
  height: 157px;

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

  content: "";

  transform:
    translateX(-50%)
    scaleY(var(--title-line-scale));

  transform-origin: top center;
  will-change: transform;
}

.digital-platform .platform-list {
  position: relative;

  display: grid;
  grid-template-columns: repeat(3, 1fr);

  margin-top: 200px;

  /* GSAP 선 애니메이션 */
  --horizontal-line-scale: 0;
}

/* 세 항목을 연결하는 가로선 */
.digital-platform .platform-list::before {
  position: absolute;
  top: -37px;
  right: calc(100% / 6);
  left: calc(100% / 6);

  height: 1px;

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

  content: "";

  transform: scaleX(var(--horizontal-line-scale));
  transform-origin: center center;
  will-change: transform;
}

.digital-platform .platform-item {
  position: relative;
  z-index: 2;

  min-width: 0;

  text-align: center;

  /* GSAP 선 애니메이션 */
  --item-line-scale: 0;
}

/* 가로선에서 원까지 내려오는 세로선 */
.digital-platform .platform-item::before {
  position: absolute;
  top: -37px;
  left: 50%;

  width: 1px;
  height: 64px;

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

  content: "";

  transform:
    translateX(-50%)
    scaleY(var(--item-line-scale));

  transform-origin: top center;
  will-change: transform;
}

.digital-platform .platform-image {
  position: relative;
  z-index: 2;

  width: 220px;
  height: 220px;
  margin: 20px auto 10px;
  overflow: hidden;

  border-radius: 50%;
  background-color: #b6c8ce;

  will-change: transform, opacity;
}

.digital-platform .platform-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.digital-platform .platform-image--empty {
  background-color: #afc0c6;
}

.digital-platform .platform-content h3 {
  margin: 0 0 4px;

  color: #fff;
  font-size: 30px;
  font-weight: 700;
}

.digital-platform .platform-content p {
  margin-top: 10px;

  color: #fff;
  font-size: 24px;
  font-weight: 500;
  word-break: keep-all;
}

.digital-platform .platform-content p span {
  display: block;

  margin-top: 6px;

  color: #bfbfbf;
  font-size: 20px;
  font-weight: 400;
}

/* 태블릿 */
@media (max-width: 1024px) {
  .digital-platform .inner {
    max-width: 760px;
  }

  .digital-platform .platform-list {
    gap: 30px;
  }

  .digital-platform .platform-title {
    font-size: 34px;
  }
}

/* 모바일 */@media (max-width: 767px) {
  .digital-platform {
    min-height: auto;
  }

  .digital-platform .wrapper {
    padding: 0 20px;
  }

  .digital-platform .inner {
    min-height: auto;
    padding: 70px 0;
  }

  .digital-platform .platform-title {
    font-size: 34px;
  }

  /*
    PC용 가로선만 숨김
  */
  .digital-platform .platform-list::before {
    display: none;
  }

  /*
    타이틀 아래 세로선은 표시
    타이틀과 첫 번째 이미지 연결
  */
  .digital-platform .platform-title::after {
    display: block;
    height: 50px;
  }

  .digital-platform .platform-list {
    grid-template-columns: 1fr;
    gap: 46px;

    margin-top: 54px;
  }

  /*
    각 카드 사이의 세로선
  */
  .digital-platform .platform-item::before {
    display: block;
    top: -35px;

    width: 1px;
    height: 40px;

    transform:
      translateX(-50%)
      scaleY(var(--item-line-scale));

    transform-origin: top center;
  }

  /*
    첫 번째 카드는 타이틀 세로선이 연결하므로
    별도 세로선 제거
  */
  .digital-platform .platform-item:first-child::before {
    display: none;
  }

  .digital-platform .platform-image {
    width: 110px;
    height: 110px;
    margin-bottom: 14px;
  }

  .digital-platform .platform-content h3 {
    font-size: 20px;
  }

  .digital-platform .platform-content p {
    font-size: 20px;
  }

  .digital-platform .platform-content p span {
    font-size: 16px;
  }
}



.why-education {
  width: 100%;
  background-color: #fff;
}

.why-education .wrapper {
  width: 100%;
  padding: 0 40px;
}

.why-education .inner {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 800px;
  margin: 0 auto;
}

.why-education .section-heading {
  text-align: center;
}

.why-education .heading-line {
  display: block;

  width: 3px;
  height: 20px;
  margin: 0 auto 16px;

  background-color: var(--color-Main);
}

.why-education .eyebrow {
 justify-content: center;
 margin-bottom: 24px;
}

.why-education .title {
  margin: 0;

  color: var(--font-main);
  font-size: 56px;
  font-weight: 700;
  text-align: center;
  word-break: keep-all;
}

@media (max-width: 1024px) {
  .why-education .inner {
    min-height: 650px;
  }

  .why-education .title {
    font-size: 44px;
  }

  .why-education .eyebrow {
    font-size: 20px;
  }
}

@media (max-width: 767px) {
  .why-education .wrapper {
    padding: 0 20px;
  }

  .why-education .inner {
    min-height: 500px;
  }

  .why-education .eyebrow {
    font-size: 16px;
  }

  .why-education .title {
    font-size: 32px;
  }
}






/* ==================================================
   3섹션 → 4섹션 전환 영역
================================================== */

.education-sequence {
  position: relative;
  width: 100%;
  height: 100vh;
}

.education-stage {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #fff;
}

.education-sequence .wrapper {
  width: 100%;
  height: 100%;
  padding: 0 40px;
}

.education-sequence .inner {
  width: 100%;
  max-width: 1440px;
  height: 100%;
  margin: 0 auto;
}

/* 3섹션과 4섹션을 동일한 위치에 겹침 */
.why-education,
.market-section {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ==================================================
   3섹션
================================================== */

.why-education {
  z-index: 1;
  background-color: #fff;
  transform-origin: center center;
  will-change: opacity, transform;
}

.why-education .inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-education .section-heading {
  text-align: center;
}

.why-education .heading-line {
  display: block;
  width: 3px;
  height: 20px;
  margin: 0 auto 16px;
  background-color: var(--color-Main);
}

.why-education .eyebrow {
  margin: 0 0 24px;
  color: var(--color-Main);
  font-size: 22px;
  font-weight: 400;
}

.why-education .title {
  margin: 0;
  color: var(--font-main);
  font-size: 56px;
  font-weight: 700;
  text-align: center;
  word-break: keep-all;
}

/* ==================================================
   4섹션
================================================== */

.market-section {
  z-index: 2;
  visibility: hidden;
  overflow: hidden;
  background-color: var(--font-main);
  opacity: 0;
  transform: scale(0.14);
  transform-origin: center center;
  will-change: opacity, transform, border-radius;
}

/* 변경되는 배경 */

.market-backgrounds {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.market-bg {
  position: absolute;
  inset: 0;
  visibility: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  transform: scale(1.05);
  will-change: opacity, transform;
}

.market-dim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      rgba(22, 30, 39, 0.30) 0%,
      rgba(22, 30, 39, 0.80) 100%
    );
}

/* 4섹션 내부 */

.market-section .wrapper {
  position: relative;
  z-index: 2;
}

.market-section .inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 상단 미니 텍스트 */

.market-tabs {
  position: absolute;
  top: 35%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  padding: 0 20px;
  transform: translateX(-50%);
}

.market-tab {
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: rgba(255, 255, 255, 0.35);
  font-family: inherit;
  font-size: 20px;
  font-weight: 400;
}

.market-tab.is-active {
  color: var(--color-Main);
}

.market-tab-line {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.3);
  font-size: 18px;
}

/* 변경되는 메인 콘텐츠 */

.market-content-list {
  position: relative;
  width: 100%;
  height: 350px;
  margin-top: 90px;
}

.market-content {
  position: absolute;
  inset: 0;
  display: flex;
  visibility: hidden;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  text-align: center;
  will-change: opacity, transform;
}

.market-content h2 {
  margin: 0;
  color: #fff;
  font-size: 56px;
  font-weight: 700;
  word-break: keep-all;
}

.market-content p {
  margin: 32px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 20px;
  font-weight: 400;
  word-break: keep-all;
  line-height: 1.6;
}

/* View More 버튼 */

.market-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-width: 156px;
  height: 54px;
  margin-top: 48px;
  padding: 0 30px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  font-size: 18px;
  text-decoration: none;
  color:#fff;
  transition:
    0.3s ease-in-out;
}
.market-button span {
  color:#ddd;
  transition:
    0.3s ease-in-out;
}
.market-button:hover {
  border-color: var(--color-Main);
  color: #fff;
}
.market-button:hover span{
  color: #fff;
}

/* ==================================================
   태블릿
================================================== */

@media (max-width: 1024px) {
  .education-sequence .wrapper {
    padding: 0 30px;
  }

  .why-education .title,
  .market-content h2 {
    font-size: 44px;
  }

  .market-tabs {
    gap: 12px;
  }

  .market-tab {
    font-size: 18px;
  }
}

/* ==================================================
   모바일
================================================== */

@media (max-width: 767px) {
  .education-sequence .wrapper {
    padding: 0 20px;
  }

  .why-education .heading-line {
    height: 16px;
    margin-bottom: 12px;
  }

  .why-education .eyebrow {
    margin-bottom: 18px;
    font-size: 16px;
  }

  .why-education .title {
    font-size: 32px;
  }

  .why-education .title br {
    display: none;
  }

  .market-section {
    overflow: hidden;
  }

  .market-tabs {
    left: 50%;

    justify-content: flex-start;

    width: max-content;
    min-width: max-content;
    max-width: none;
    padding: 0;

    white-space: nowrap;
    transform: translateX(-50%);

    will-change: transform;
  }

  .market-tab,
  .market-tab-line {
    flex: 0 0 auto;
  }

  .market-tab {
    font-size: 16px;
  }

  .market-tab-line {
    font-size: 14px;
  }

  .market-content-list {
    height: 320px;
    margin-top: 100px;
  }

  .market-content h2 {
    font-size: 34px;
  }

  .market-content p {
    margin-top: 24px;
    font-size: 15px;
  }

  .market-content p br {
    display: none;
  }

  .market-button {
    height: 48px;
    margin-top: 36px;
  }
}




/* ==================================================
   5섹션
================================================== */

.vision-section {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background-color: #192737;
  
}

.vision-section .wrapper {
  width: 100%;
  min-height: 100vh;
  padding:0
}

.vision-section .inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width:inherit;
  width: 100%;
  min-height: 100vh;
}

/* ==================================================
   왼쪽 콘텐츠
================================================== */

.vision-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding:120px;
  min-width: 0;
  padding-right: 80px;
  color: #fff;
}


.vision-heading .title {
  margin: 0;
  color: #fff;
  font-size: 50px;
  font-weight: 700;
  word-break: keep-all;
}

.vision-heading .description {
  margin-top: 40px;
}

.vision-heading .description p {
  margin: 0;

  color: rgba(255, 255, 255, 0.82);
  font-size: 20px;
  font-weight: 400;
  word-break: keep-all;
}

.vision-heading .description p + p {
  margin-top: 22px;
}

/* ==================================================
   하단 진행 목록
================================================== */

.vision-list {
  width: 100%;
  margin-top: 100px;

  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.vision-item {
  position: relative;

  min-height: 100px;
  padding: 24px 20px 26px;
  overflow: hidden;

  border-bottom: 1px solid rgba(255, 255, 255, 0.3);

  transition: background-color 0.4s ease;
}

.vision-item.is-active {
  background-color: rgba(255, 255, 255, 0.06);
}

.vision-item-content {
  position: relative;
  z-index: 1;
}

.vision-item strong {
  display: block;

  color: rgba(255, 255, 255, 0.55);
  font-size: 22px;
  font-weight: 600;

  transition: color 0.4s ease;
}

.vision-item p {
  margin: 12px 0 0;
  color: #ddd;
  font-size: 18px;
  transition: color 0.4s ease;
}

.vision-item.is-active strong {
  color: #fff;
}

.vision-item.is-active p {
  color: rgba(255, 255, 255, 0.75);
}

/* 진행선 배경 */

.vision-progress {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;

  height: 2px;
  overflow: hidden;

  background-color: rgba(255, 255, 255, 0.15);
}

/* 왼쪽에서 오른쪽으로 채워지는 선 */

.vision-progress-fill {
  display: block;

  width: 100%;
  height: 100%;

  background-color: #fff;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* ==================================================
   오른쪽 이미지
================================================== */

.vision-image {
  position: relative;

  min-width: 0;
  min-height: 100vh;
  overflow: hidden;

  background-color: var(--font-main);
}

.vision-image-item {
  position: absolute;
  inset: 0;

  visibility: hidden;
  opacity: 0;
  transform: scale(1.04);

  will-change: opacity, transform;
}

.vision-image-item img {
  display: block;

  width: 100%;
  height: 100%;
  min-height: 100vh;

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

/* 왼쪽 경계가 너무 딱 잘리지 않도록 */

.vision-image::after {
  position: absolute;
  inset: 0;
  z-index: 2;

  background:
    linear-gradient(
      90deg,
      rgba(25, 25, 25, 0.12) 0%,
      transparent 18%
    );

  content: "";
  pointer-events: none;
}

/* ==================================================
   태블릿
================================================== */

@media (max-width: 1200px) {
  .vision-content {
    padding: 90px 50px 70px;
  }

  .vision-heading .title {
    font-size: 44px;
  }

  .vision-heading .eyebrow {
    font-size: 20px;
  }

  .vision-list {
    margin-top: 70px;
  }
  .vision-section .inner{height:100%; min-height:100%}
  .vision-section .wrapper{ height:100%; min-height:100%}
}

/* ==================================================
   모바일
================================================== */

@media (max-width: 767px) {
  .vision-section,
  .vision-section .wrapper,
  .vision-section .inner {
    min-height: auto;
  }

  .vision-section .inner {
    display: flex;
    flex-direction: column;
  }

  .vision-content {
    order: 2;

    width: 100%;
    padding: 64px 20px 70px;
  }

  .vision-image {
    order: 1;
    /* display:none; */
    width: 100%;
    min-height: 440px;
  }

  .vision-image-item img {
    min-height: 440px;
  }

  .vision-heading .eyebrow {
    margin-bottom: 16px;
    font-size: 16px;
  }

  .vision-heading .eyebrow-line {
    height: 16px;
  }

  .vision-heading .title {
    font-size: 34px;
  }

  .vision-heading .description {
    margin-top: 30px;
  }

  .vision-heading .description p {
    font-size: 20px;
  }

  .vision-heading .description br {
    display: none;
  }

  .vision-list {
    margin-top: 50px;
  }

  .vision-item {
    min-height: 90px;
    padding: 20px 14px 22px;
  }

  .vision-item strong {
    font-size: 20px;
  }

  .vision-item p {
    font-size: 16px;
  }
}





/* ==================================================
   News Room
================================================== */

.newsroom-section {
  width: 100%;
  background-color: #fff;
}

/* 상단 제목 */



.newsroom-heading .title {
  font-size: 50px;
  font-weight: 700;
}

.newsroom-heading .description {
  margin: 10px 0 0;
  color: var(--font-main);
  font-size: 20px;
  font-weight: 400;
}

/* 카드 목록 */

.newsroom-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;

  margin-top: 62px;
}

.newsroom-card {
  min-width: 0;
}

.newsroom-link {
  display: block;

  color: inherit;
  text-decoration: none;
}

.newsroom-image {
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  background-color: var(--color-BG);
  aspect-ratio: 1.5 / 1;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.newsroom-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.newsroom-info {
  padding: 20px 4px 0;
}

/* 카테고리 및 날짜 */

.newsroom-meta {
  display: flex;
  align-items: center;
  gap: 14px;

  margin-bottom: 14px;
}

.newsroom-meta .category {
  color: var(--color-p35);
  font-size: 14px;
  font-weight: 500;
}

.newsroom-meta time {
  color: #4b4b4b;
  font-size: 14px;
  font-weight: 400;
}

/* 제목 */

.newsroom-title {
  display: -webkit-box;
  color: var(--font-main);
  font-size: 22px;
  font-weight: 600;
  word-break: keep-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* 설명 */

.newsroom-summary {
  display: -webkit-box;
  overflow: hidden;

  margin: 16px 0 0;

  color: #777;
  font-size: 16px;
  font-weight: 400;
  word-break: keep-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* hover */

.newsroom-link:hover .newsroom-image img {
  transform: scale(1.04);
}


/* ==================================================
   태블릿
================================================== */

@media (max-width: 1200px) {
  .newsroom-section {
    padding: 110px 0 120px;
  }

  .newsroom-section .wrapper {
    padding: 0 40px;
    height:100%
  }

  .newsroom-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 50px 24px;
  }

  .newsroom-heading .title {
    font-size: 46px;
  }
}

/* ==================================================
   모바일
================================================== */

@media (max-width: 767px) {
  .newsroom-section {
    padding: 80px 0 90px;
  }

  .newsroom-section .wrapper {
    padding: 0 20px;
  }

  .newsroom-heading .eyebrow {
    margin-bottom: 14px;
    font-size: 16px;
  }

  .newsroom-heading .eyebrow-line {
    height: 16px;
  }

  .newsroom-heading .title {
    font-size: 36px;
  }

  .newsroom-heading .description {
    margin-top: 16px;
    font-size: 18px;
  }

  .newsroom-list {
    grid-template-columns: 1fr;
    gap: 46px;
    margin-top: 46px;
  }

  .newsroom-info {
    padding-top: 16px;
  }

  .newsroom-title {
    font-size: 20px;
  }

  .newsroom-summary {
    margin-top: 12px;
    font-size: 16px;
  }
}






/* ========================================
   페이지 로딩 중 스크롤 방지
======================================== */

body.is-loading {
  overflow: hidden;
}

/* ========================================
   전체 로딩 화면
======================================== */

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;

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

  width: 100%;
  height: 100vh;
  height: 100dvh;

  overflow: hidden;

  background-color: #080b12;
}

.page-loader-inner {
  position: relative;

  display: flex;
  align-items: center;
  flex-direction: column;

  width: min(80%, 900px);

  text-align: center;
}

/* 큰 로고 */

.page-loader-logo {
  overflow: hidden;
}

.page-loader-logo img {
  display: block;

  width: clamp(260px, 34vw, 620px);
  height: auto;

  opacity: 0;
  transform: translateY(60px) scale(1);

  will-change: opacity, transform;
}

/* 진행선 */

.page-loader-progress {
  position: relative;

  width: min(420px, 70vw);
  height: 1px;
  margin-top: 48px;
  overflow: hidden;

  background-color: rgba(255, 255, 255, 0.18);
}

.page-loader-progress-bar {
  display: block;

  width: 100%;
  height: 100%;

  background-color: var(--color-Main, #30cacb);

  transform: scaleX(0);
  transform-origin: left center;

  will-change: transform;
}

/* 하단 문구 */

.page-loader-text {
  margin-top: 18px;

  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;

  opacity: 0;
  transform: translateY(10px);
}

/* 로딩 종료 후 완전히 제거 */

.page-loader.is-hidden {
  visibility: hidden;
  pointer-events: none;
}

/* 모바일 */

@media (max-width: 768px) {
  .page-loader-inner {
    width: calc(100% - 40px);
  }

  .page-loader-logo img {
    width: min(72vw, 340px);
  }

  .page-loader-progress {
    width: min(260px, 66vw);
    margin-top: 34px;
  }

  .page-loader-text {
    font-size: 9px;
  }
}

/* 모션 최소화 설정 */

@media (prefers-reduced-motion: reduce) {
  .page-loader-logo img,
  .page-loader-text {
    transform: none;
  }
}




/* ========================================
   Platform Structure
======================================== */

.platform-structure {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 72% 48%,
      rgba(111, 177, 245, 0.1) 0%,
      rgba(111, 177, 245, 0) 38%
    ),
    #fff;
}

.platform-structure::after {
  position: absolute;
  left: -180px;
  bottom: -180px;
  z-index: 0;

  width: 520px;
  height: 520px;
  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(123, 188, 255, 0.42) 0%,
    rgba(123, 188, 255, 0.22) 35%,
    rgba(123, 188, 255, 0.1) 55%,
    rgba(123, 188, 255, 0) 75%
  );

  filter: blur(70px);
  content: "";
  pointer-events: none;
}
/* 왼쪽 아래 점 패턴 */
.platform-structure::before {
  position: absolute;
  bottom: -12%;
  left: -10%;

  width: 58%;
  height: 54%;

  background-image:
    radial-gradient(
      circle,
      rgba(100, 171, 244, 0.34) 1.4px,
      transparent 1.7px
    );
  background-size: 13px 13px;

  opacity: 0.34;

  content: "";
  pointer-events: none;
  transform: rotate(7deg);

  -webkit-mask-image:
    linear-gradient(
      90deg,
      #000 0%,
      rgba(0, 0, 0, 0.55) 48%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      90deg,
      #000 0%,
      rgba(0, 0, 0, 0.55) 48%,
      transparent 100%
    );
}

.platform-structure .wrapper {
  position: relative;
  z-index: 2;

  width: 100%;
  min-height: 100vh;
  padding: 60px 120px;
}

.platform-structure .inner {
  display: grid;
  grid-template-columns:
    minmax(340px, 0.8fr)
    minmax(600px, 1.2fr);
  align-items: center;
  gap: 60px;

  width: 100%;
  max-width: 1680px;
  min-height: calc(100vh - 240px);
  margin: 0 auto;
}

/* ========================================
   왼쪽 텍스트
======================================== */

.platform-structure-copy {
  position: relative;
  z-index: 5;
}

.platform-structure-title {
  margin: 0;

  color: #1a1a1a;
  font-size: 56px;
  font-weight: 700;
  line-height: 1.25;
  word-break: keep-all;

  opacity: 0;
  transform: translateY(30px);

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

.platform-structure-title span {
  display: block;
}

.platform-structure-description {
  display: flex;
  flex-direction: column;
  gap: 28px;

  margin-top: 64px;

  opacity: 0;
  transform: translateY(30px);

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

.platform-structure-description p {
  margin: 0;

  color: #666;
  font-size: 24px;
  line-height: 1.75;
  word-break: keep-all;
}

/* ========================================
   다이어그램 전체
======================================== */

.platform-diagram {
  position: relative;

  width: min(100%, 800px);
  aspect-ratio: 1 / 1;
  margin-left: auto;

  container-type: inline-size;
}

.platform-diagram-svg {
  position: absolute;
  inset: 0;
  z-index: 3;

  display: block;

  width: 100%;
  height: 100%;

  overflow: visible;
  opacity: 0;

  pointer-events: none;

  transition: opacity 0.8s ease 0.2s;
}

/* ========================================
   외곽 점선 원
======================================== */

.platform-orbit-line {
  fill: none;

  stroke: rgba(107, 136, 165, 0.48);
  stroke-width: 1;
  stroke-dasharray: 8 12;

  vector-effect: non-scaling-stroke;

  transform-box: fill-box;
  transform-origin: center;

  animation:
    platformOrbitRotate 38s linear infinite,
    platformOrbitFlow 22s linear infinite;

  animation-play-state: paused;
}

/* ========================================
   연결선
======================================== */

.platform-connector-base,
.platform-connector-flow {
  fill: none;

  stroke-linecap: round;
  stroke-linejoin: round;

  vector-effect: non-scaling-stroke;
}

/* 연결선 기본 라인 */
.platform-connector-base {
  stroke: rgba(112, 181, 255, 0.55);
  stroke-width: 1.2;
}

/* 기본선 위로 흐르는 라인 */
.platform-connector-flow {
  stroke: rgba(112, 181, 255, 0.95);
  stroke-width: 1.5;
  stroke-dasharray: 12 26;

  animation: platformConnectorFlow 8s linear infinite;
  animation-play-state: paused;
}

/* 항목별 흐름 시간차 */
.platform-connector-set[data-connector="interface"]
.platform-connector-flow {
  animation-delay: -0.5s;
}

.platform-connector-set[data-connector="data"]
.platform-connector-flow {
  animation-delay: -2.2s;
}

.platform-connector-set[data-connector="operation"]
.platform-connector-flow {
  animation-delay: -4.2s;
}

/* 포인트는 움직이지 않음 */
.platform-point-glow {
  fill: rgba(111, 180, 255, 0.2);

  opacity: 1;
  transform: none;

  vector-effect: non-scaling-stroke;
}

.platform-point {
  fill: #70b4ff;

  opacity: 1;
  transform: none;

  vector-effect: non-scaling-stroke;
}

/* ========================================
   중앙 원
======================================== */

.platform-diagram-halo {
  position: absolute;
  inset: 14%;
  z-index: 1;

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

  border-radius: 50%;

  background:
    radial-gradient(
      circle at center,
      rgba(209, 237, 255, 0.94) 0%,
      rgba(209, 237, 255, 0.72) 64%,
      rgba(218, 241, 255, 0.48) 100%
    );

  box-shadow:
    0 0 80px rgba(110, 176, 241, 0.13);

  opacity: 0;
  transform: scale(0.9);

  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.platform-diagram-core {
  position: relative;

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

  width: 72%;
  aspect-ratio: 1 / 1;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #76b5f7 0%,
      #6da3eb 100%
    );

  box-shadow:
    0 24px 55px rgba(82, 143, 215, 0.18);

  color: #fff;
  text-align: center;

  animation: platformCoreFloat 8s ease-in-out infinite;
  animation-play-state: paused;
}

.platform-diagram-core strong {
  font-size: clamp(24px, 4.8cqw, 46px);
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}

.platform-diagram-spark {
  position: absolute;
  top: 35%;
  right: 19%;

  color: #fff;
  font-size: clamp(14px, 2.5cqw, 22px);

  animation: platformSparkBlink 4s ease-in-out infinite;
  animation-play-state: paused;
}

/* ========================================
   설명 노드
======================================== */

.platform-node {
  position: absolute;
  z-index: 5;

  min-width: 0;

  color: #202020;

  opacity: 0;
  transform: translateY(20px);

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

.platform-node-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 108px;
  margin: 0 0 12px;
  padding: 7px 20px;

  border: 1px solid #72b4ff;
  border-radius: 999px;

  background-color: rgba(245, 250, 255, 0.96);

  color: #202020;
  font-size: clamp(14px, 2.6cqw, 26px);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.platform-node-main {
  margin: 0;

  color: #202020;
  font-size: clamp(18px, 2.6cqw, 26px);
  font-weight: 600;
  line-height: 1.5;
  word-break: keep-all;
}

.platform-node-sub {
  margin: 6px 0 0;

  color: #999;
  font-size: clamp(12px, 2.2cqw, 18px);
  font-weight: 400;
  line-height: 1.5;
  word-break: keep-all;
}

/* Interface */
.platform-node--interface {
  top:5%;
  left: 65%;

  width: 35%;

  transition-delay: 0.32s;
}

/* Data */
.platform-node--data {
  top: 84.5%;
  left: 2.5%;

  width: 38%;

  transition-delay: 0.42s;
}

/* Operation OS */
.platform-node--operation {
  top: 84%;
  left: 67%;

  width: 33%;

  transition-delay: 0.52s;
}

/* ========================================
   섹션 진입 후 상태
======================================== */

.platform-structure.is-visible
.platform-structure-title,
.platform-structure.is-visible
.platform-structure-description {
  opacity: 1;
  transform: translateY(0);
}

.platform-structure.is-visible
.platform-diagram-svg {
  opacity: 1;
}

.platform-structure.is-visible
.platform-diagram-halo {
  opacity: 1;
  transform: scale(1);
}

.platform-structure.is-visible
.platform-node {
  opacity: 1;
  transform: translateY(0);
}

.platform-structure.is-visible
.platform-orbit-line,
.platform-structure.is-visible
.platform-connector-flow,
.platform-structure.is-visible
.platform-diagram-core,
.platform-structure.is-visible
.platform-diagram-spark {
  animation-play-state: running;
}

/* ========================================
   애니메이션
======================================== */

@keyframes platformOrbitRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes platformOrbitFlow {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -220;
  }
}

@keyframes platformConnectorFlow {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -76;
  }
}

@keyframes platformCoreFloat {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.015);
  }
}

@keyframes platformSparkBlink {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.92);
  }

  50% {
    opacity: 1;
    transform: scale(1.12);
  }
}

/* ========================================
   태블릿
======================================== */

@media (max-width: 1200px) {
  .platform-structure .wrapper {
    padding: 100px 48px;
  }

  .platform-structure .inner {
    grid-template-columns:
      minmax(280px, 0.75fr)
      minmax(500px, 1.25fr);
    gap: 30px;

    min-height: calc(100vh - 200px);
  }

  .platform-structure-title {
    font-size: 44px;
  }

  .platform-structure-description {
    margin-top: 48px;
  }

  .platform-diagram {
    width: min(100%, 680px);
  }

  .platform-node-title {
    min-width: 90px;
    padding: 6px 14px;
  }
}

/* ========================================
   모바일
======================================== */

@media (max-width: 767px) {
  .platform-structure {
    min-height: auto;
  }

  .platform-structure::before {
    bottom: 10%;
    left: -38%;

    width: 110%;
    height: 34%;
  }

  .platform-structure .wrapper {
    min-height: auto;
    padding: 80px 20px;
  }

  .platform-structure .inner {
    display: flex;
    flex-direction: column;
    gap: 60px;

    min-height: auto;
  }

  .platform-structure-copy {
    width: 100%;
  }

  .platform-structure-title {
    font-size: 44px;
  }

  .platform-structure-description {
    gap: 22px;
    margin-top: 36px;
  }

  .platform-structure-description p {
    font-size: 20px;
  }

  .platform-structure-description br {
    display: none;
  }

  .platform-diagram {
    display: flex;
    flex-direction: column;
    gap: 14px;

    width: 100%;
    aspect-ratio: auto;
    margin: 0;
    position: relative;
  }

  /* 원형 다이어그램 공간 */
  .platform-diagram::before {
    display: block;
    flex: 0 0 auto;

    width: min(100%, 420px);
    aspect-ratio: 1 / 1;
    margin: 0 auto 28px;

    content: "";
  }

  .platform-diagram-svg {
    top: 0;
    left: 50%;

    width: min(100%, 420px);
    height: auto;
    aspect-ratio: 1 / 1;
    position: absolute;
    transform: translateX(-50%);
  }

  /* 모바일에서는 연결선과 포인트 숨김 */
  .platform-connector-set,
  .platform-point,
  .platform-point-glow {
    display: none;
  }

  .platform-diagram-halo {
    position: absolute;
    top: calc((min(100vw - 40px, 420px)) * 0.14);
    left: 50%;

    width: calc((min(100vw - 40px, 420px)) * 0.72);
    aspect-ratio: 1 / 1;

    right: auto;
    bottom: auto;

    transform: translateX(-50%) scale(0.9);
  }

  .platform-structure.is-visible
  .platform-diagram-halo {
    transform: translateX(-50%) scale(1);
  }

  .platform-diagram-core strong {
    font-size: 24px;
  }

  .platform-diagram-spark {
    font-size: 16px;
    top:30%;
  }

  /* 모바일 설명 카드 */
  .platform-node {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;

    width: 100%;
    min-width: 0;
    padding: 20px;

    border: 1px solid rgba(112, 180, 255, 0.25);
    border-radius: 16px;

    background-color: rgba(247, 251, 255, 0.94);
  }

  .platform-node-title {
    min-width: auto;
    margin-bottom: 10px;
    padding: 6px 16px;

    font-size: 16px;
  }

  .platform-node-main {
    font-size: 16px;
  }

  .platform-node-sub {
    font-size: 14px;
  }
}

/* ========================================
   모션 최소화 설정
======================================== */

@media (prefers-reduced-motion: reduce) {
  .platform-orbit-line,
  .platform-connector-flow,
  .platform-diagram-core,
  .platform-diagram-spark {
    animation: none;
  }

  .platform-structure-title,
  .platform-structure-description,
  .platform-diagram-svg,
  .platform-diagram-halo,
  .platform-node {
    opacity: 1;
    transition: none;
  }

  .platform-structure-title,
  .platform-structure-description,
  .platform-node {
    transform: none;
  }
}

@media (
  prefers-reduced-motion: reduce
) and (
  max-width: 767px
) {
  .platform-diagram-halo {
    transform: translateX(-50%);
  }
}

/* ========================================
   AI Digital Human ELEA Section
======================================== */

.elea-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;

  background-color: #192a3b;
  color: #fff;
}

.elea-section .wrapper {
  position: relative;
  z-index: 1;

  width: 100%;
  min-height: 100vh;
  padding: 80px 40px 72px;
}

.elea-section .inner {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

/* ========================================
   영상 영역
======================================== */

.elea-visual {
  position: relative;

  width: min(100%, 900px);
  aspect-ratio: 16 / 9;
  overflow: hidden;

  background-color: #d8dbe2;
}

.elea-video {
  display: block;

  width: 100%;
  height: 100%;

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

  border: 0;
}

/* ========================================
   중앙 타이틀
======================================== */

.elea-heading {
  width: 100%;
  margin-top: 52px;

  text-align: center;
}

.elea-title {
  margin: 0;

  color: #fff;
  font-size: 50px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.035em;
  word-break: keep-all;
}

.elea-description {
  margin: 18px 0 0;

  color: rgba(255, 255, 255, 0.66);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.025em;
  word-break: keep-all;
}

/* ========================================
   특징 목록
======================================== */

.elea-feature-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 70px;

  width: 100%;
  max-width: 1140px;
  margin: 78px 0 0;
  padding: 0;

  list-style: none;
}

.elea-feature-item {
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr);
  align-items: start;
  gap: 16px;

  min-width: 0;
}

.elea-feature-line {
  display: block;

  width: 3px;
  height: 48px;
  margin-top: 2px;

  background-color: #30cacb;
}

.elea-feature-content {
  min-width: 0;
}

.elea-feature-title {
  margin: 0;

  color: rgba(255, 255, 255, 0.96);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.025em;
  word-break: keep-all;
}

.elea-feature-en {
  display: block;

  margin-top: 10px;

  color: rgba(255, 255, 255, 0.38);
  font-size: 18px;
  line-height: 1.4;
}



/* ========================================
   View More 버튼
======================================== */

.elea-more-link {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  min-width: 160px;
  margin-top: 40px;
  padding: 0 16px 14px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.85);

  color: #fff;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;

  transition:
    color 0.3s ease,
    border-color 0.3s ease;
}
.elea-more-link span{color: #fff; transition: color 0.3s ease;}

.elea-more-arrow {
  display: inline-block;

  font-size: 22px;

  transition: transform 0.3s ease;
}

.elea-more-link:hover {
  color: #30cacb;
  border-color: #30cacb;
}

.elea-more-link:hover .elea-more-arrow {
  transform: translateX(6px);
}

.elea-more-link:focus-visible {
  outline: 2px solid #30cacb;
  outline-offset: 6px;
}

/* 태블릿 */
@media (max-width: 1024px) {
  .elea-more-link {
    margin-top: 60px;
  }
}

/* 모바일 */
@media (max-width: 767px) {
  .elea-more-link {
    min-width: 150px;
    margin-top: 50px;
    padding-right: 12px;
    padding-left: 12px;

    font-size: 18px;
  }

  .elea-more-arrow {
    font-size: 20px;
  }
}


/* ========================================
   노트북
======================================== */

@media (max-width: 1440px) {
  .elea-section .wrapper {
    padding-top: 72px;
    padding-bottom: 64px;
  }

  .elea-section .inner {
    max-width: 1180px;
  }

  .elea-visual {
    width: min(72vw, 900px);
  }

  .elea-title {
    font-size: 40px;
  }

  .elea-description {
    font-size: 18px;
  }

  .elea-feature-list {
    max-width: 1080px;
    gap: 52px;
    margin-top: 68px;
  }

  .elea-feature-title {
    font-size: 20px;
  }

  .elea-feature-en {
    font-size: 16px;
  }
}

/* ========================================
   태블릿
======================================== */

@media (max-width: 1024px) {
  .elea-section {
    min-height: auto;
  }

  .elea-section .wrapper {
    min-height: auto;
    padding: 80px 32px;
  }

  .elea-visual {
    width: 100%;
    max-width: 900px;
  }

  .elea-heading {
    margin-top: 44px;
  }

  .elea-title {
    font-size: 34px;
  }

  .elea-description {
    margin-top: 16px;
    font-size: 16px;
  }

  .elea-feature-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 60px;

    max-width: 760px;
    margin-top: 40px;
  }

  .elea-feature-title {
    font-size: 20px;
  }
}

/* ========================================
   모바일
======================================== */

@media (max-width: 767px) {
  .elea-section .wrapper {
    padding: 64px 20px;
  }

  .elea-visual {
    width: 100%;
    aspect-ratio: 16 / 10;
  }

  .elea-heading {
    margin-top: 34px;
  }

  .elea-title {
    font-size: 30px;
  }

  .elea-description {
    margin-top: 14px;

    font-size: 16px;
    line-height: 1.7;
  }

  .elea-description br {
    display: none;
  }

  .elea-feature-list {
    grid-template-columns: 1fr;
    gap: 28px;

    width: 100%;
    max-width: 480px;
    margin-top: 46px;
  }

  .elea-feature-item {
    grid-template-columns: 3px minmax(0, 1fr);
    gap: 14px;
  }

  .elea-feature-line {
    height: 42px;
  }

  .elea-feature-title {
    font-size: 20px;
  }

  .elea-feature-title br {
    display: none;
  }

  .elea-feature-en {
    margin-top: 6px;
    font-size: 16px;
  }
}

/* ========================================
   소형 모바일
======================================== */

@media (max-width: 480px) {
  .elea-section .wrapper {
    padding-right: 16px;
    padding-left: 16px;
  }

  .elea-title {
    font-size: 24px;
  }

  .elea-description {
    font-size: 13px;
  }
}





/* ========================================
   Expansion Area
======================================== */

.expansion-section {
  position: relative;

  width: 100%;
  min-height: 100vh;
  overflow: hidden;

  background-color: #fff;
  color: #1c1c1c;
}

.expansion-section .wrapper {
  width: 100%;
  min-height: 100vh;
  padding: 110px 60px;
}

.expansion-section .inner {
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
}

/* ========================================
   상단 타이틀
======================================== */

.expansion-heading {
  width: 100%;
}

.expansion-label {
  display: flex;
  align-items: center;
  gap: 14px;

  margin: 0;

  color: #16b9bb;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
}

.expansion-label span {
  display: block;

  width: 4px;
  height: 26px;

  background-color: #30cacb;
}

.expansion-title {
  margin: 16px 0 0;

  color: #1c1c1c;
  font-size: 50px;
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: -0.045em;
  word-break: keep-all;
}

.expansion-description {
  margin: 24px 0 0;

  color: #7b7b7b;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -0.025em;
  word-break: keep-all;
}

/* ========================================
   카드 목록
======================================== */

.expansion-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px 30px;

  width: 100%;
  margin: 82px 0 0;
  padding: 0;

  list-style: none;
}

/* 첫 번째 줄 3개 */
.expansion-item:nth-child(1) {
  grid-column: 1 / span 2;
}

.expansion-item:nth-child(2) {
  grid-column: 3 / span 2;
}

.expansion-item:nth-child(3) {
  grid-column: 5 / span 2;
}

/* 두 번째 줄 2개 중앙 정렬 */
.expansion-item:nth-child(4) {
  grid-column: 2 / span 2;
}

.expansion-item:nth-child(5) {
  grid-column: 4 / span 2;
}

.expansion-item {
  display: flex;
  flex-direction: column;
  justify-content: center;

  min-height: 160px;
  padding: 34px 28px;

  border: 1px solid #c9c9c9;
  border-radius: 15px;

  background-color: #fff;

  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.expansion-item:hover {
  border-color: rgba(48, 202, 203, 0.75);

  box-shadow:
    0 18px 42px rgba(31, 73, 94, 0.08);

  transform: translateY(-5px);
}

.expansion-item-title {
  margin: 0;

  color: #1d1d1d;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.035em;
}

.expansion-item-description {
  margin: 22px 0 0;

  color: #292929;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.025em;
  word-break: keep-all;
}

/* ========================================
   JavaScript 실행 시 등장 효과
======================================== */

.expansion-section.is-animated
.expansion-label,
.expansion-section.is-animated
.expansion-title,
.expansion-section.is-animated
.expansion-description,
.expansion-section.is-animated
.expansion-item {
  animation:
    expansionFadeUp 0.8s
    cubic-bezier(0.22, 1, 0.36, 1)
    both;
}

.expansion-section.is-animated
.expansion-title {
  animation-delay: 0.08s;
}

.expansion-section.is-animated
.expansion-description {
  animation-delay: 0.16s;
}

.expansion-section.is-animated
.expansion-item:nth-child(1) {
  animation-delay: 0.22s;
}

.expansion-section.is-animated
.expansion-item:nth-child(2) {
  animation-delay: 0.3s;
}

.expansion-section.is-animated
.expansion-item:nth-child(3) {
  animation-delay: 0.38s;
}

.expansion-section.is-animated
.expansion-item:nth-child(4) {
  animation-delay: 0.46s;
}

.expansion-section.is-animated
.expansion-item:nth-child(5) {
  animation-delay: 0.54s;
}

@keyframes expansionFadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   노트북
======================================== */

@media (max-width: 1440px) {
  .expansion-section .wrapper {
    padding: 90px 60px;
  }

  .expansion-section .inner {
    max-width: 1280px;
  }

  .expansion-title {
    font-size: 46px;
  }

  .expansion-description {
    font-size: 18px;
  }

  .expansion-list {
    margin-top: 68px;
  }

  .expansion-item {
    min-height: 150px;
    padding: 30px 24px;
  }

  .expansion-item-title {
    font-size: 27px;
  }

  .expansion-item-description {
    font-size: 17px;
  }
}

/* ========================================
   태블릿
======================================== */

@media (max-width: 1024px) {
  .expansion-section {
    min-height: auto;
  }

  .expansion-section .wrapper {
    min-height: auto;
    padding: 80px 32px;
  }

  .expansion-label {
    font-size: 18px;
  }

  .expansion-title {
    font-size: 38px;
  }

  .expansion-description {
    font-size: 17px;
  }

  .expansion-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;

    margin-top: 58px;
  }

  .expansion-item:nth-child(n) {
    grid-column: auto;
  }

  .expansion-item:last-child {
    grid-column: 1 / -1;
  }

  .expansion-item {
    min-height: 145px;
  }

  .expansion-item-title {
    font-size: 25px;
  }

  .expansion-item-description {
    margin-top: 18px;

    font-size: 16px;
  }
}

/* ========================================
   모바일
======================================== */

@media (max-width: 767px) {
  .expansion-section .wrapper {
    padding: 70px 20px;
  }

  .expansion-label {
    gap: 10px;

    font-size: 16px;
  }

  .expansion-label span {
    width: 3px;
    height: 22px;
  }

  .expansion-title {
    margin-top: 22px;

    font-size: 30px;
    line-height: 1.45;
  }

  .expansion-title br {
    display: none;
  }

  .expansion-description {
    margin-top: 20px;

    font-size: 18px;
    line-height: 1.7;
  }

  .expansion-list {
    gap: 16px;

    margin-top: 46px;
  }

  .expansion-item:nth-child(n) {
    grid-column: auto;
  }

  .expansion-item {
    min-height: 130px;
    padding: 26px 22px;

    border-radius: 13px;
  }

  .expansion-item-title {
    font-size: 23px;
  }

  .expansion-item-description {
    margin-top: 14px;

    font-size: 15px;
  }
}

/* ========================================
   작은 모바일
======================================== */

@media (max-width: 480px) {
  .expansion-section .wrapper {
    padding-right: 16px;
    padding-left: 16px;
  }

  .expansion-title {
    font-size: 27px;
  }
}

/* ========================================
   모션 최소화
======================================== */

@media (prefers-reduced-motion: reduce) {
  .expansion-section.is-animated
  .expansion-label,
  .expansion-section.is-animated
  .expansion-title,
  .expansion-section.is-animated
  .expansion-description,
  .expansion-section.is-animated
  .expansion-item {
    animation: none;
  }
}




/* ========================================
   CEO Message
======================================== */

.ceo-message {
  position: relative;

  width: 100%;
  min-height: 100vh;
  overflow: hidden;

  background-color: #fff;
  color: #1d1d1d;
}

.ceo-message .wrapper {
  width: 100%;
  min-height: 100vh;
  padding: 150px 120px;
}

.ceo-message .inner {
  display: grid;
  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(340px, 0.75fr);
  align-items: center;
  gap: 110px;

  width: 100%;
  max-width: 1500px;
  min-height: calc(100vh - 220px);
  margin: 0 auto;
}

/* ========================================
   왼쪽 인사말
======================================== */

.ceo-message-content {
  width: 100%;
  /* max-width: 760px; */

  opacity: 0;
  transform: translateY(30px);

  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.ceo-message-title {
  margin: 0;

  color: #1d1d1d;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.045em;
  word-break: keep-all;
}

.ceo-message-text {
  display: flex;
  flex-direction: column;
  gap: 28px;

  margin-top: 54px;
}

.ceo-message-text p {
  margin: 0;

  color: #6c6c6c;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.025em;
  word-break: keep-all;
}

/* ========================================
   대표 서명
======================================== */

.ceo-signature {
  display: flex;
  align-items: center;
  gap: 28px;

  margin-top: 52px;
}

.ceo-signature strong {
  color: #262626;
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
}

.ceo-signature img {
  display: block;

  width: auto;
  max-width: 200px;
  height: 80px;

  object-fit: contain;
  object-position: left center;
}

/* ========================================
   오른쪽 대표 이미지
======================================== */

.ceo-message-visual {
  position: relative;

  width: 100%;
  max-width: 420px;
  margin-left: auto;
  overflow: hidden;

  background-color: #e1e1e5;

  opacity: 0;
  transform: translateY(40px);

  transition:
    opacity 1s ease 0.15s,
    transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.ceo-message-visual img {
  display: block;

  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4.5;

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

/* ========================================
   화면 진입 후
======================================== */

.ceo-message.is-visible
.ceo-message-content,
.ceo-message.is-visible
.ceo-message-visual {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
   노트북
======================================== */

@media (max-width: 1440px) {
  .ceo-message .wrapper {
    padding: 90px 60px;
  }

  .ceo-message .inner {
    grid-template-columns:
      minmax(0, 1.2fr)
      minmax(320px, 0.8fr);
    gap: 80px;

    max-width: 1280px;
    min-height: calc(100vh - 180px);
  }

  .ceo-message-title {
    font-size: 38px;
  }

  .ceo-message-text {
    gap: 24px;
    margin-top: 44px;
  }

  .ceo-message-text p {
    font-size: 18px;
  }

  .ceo-message-visual {
    max-width: 380px;
  }
}

/* ========================================
   태블릿
======================================== */

@media (max-width: 1024px) {
  .ceo-message {
    min-height: auto;
  }

  .ceo-message .wrapper {
    min-height: auto;
    padding: 90px 32px;
  }

  .ceo-message .inner {
    grid-template-columns:
      minmax(0, 1.1fr)
      minmax(280px, 0.9fr);
    align-items: start;
    gap: 50px;

    min-height: auto;
  }

  .ceo-message-title {
    font-size: 33px;
  }

  .ceo-message-text {
    margin-top: 36px;
  }

  .ceo-message-text p {
    font-size: 18px;
    line-height: 1.8;
  }

  .ceo-signature {
    margin-top: 40px;
  }
}

/* ========================================
   모바일
======================================== */

@media (max-width: 767px) {
  .ceo-message .wrapper {
    padding: 70px 20px;
  }

  .ceo-message .inner {
    display: flex;
    flex-direction: column;
    gap: 48px;
  }

  .ceo-message-content {
    max-width: none;
  }

  .ceo-message-title {
    font-size: 28px;
    line-height: 1.5;
  }

  .ceo-message-text {
    gap: 22px;
    margin-top: 32px;
  }

  .ceo-message-text p {
    font-size: 17px;
    line-height: 1.85;
  }

  .ceo-signature {
    gap: 20px;
    margin-top: 36px;
  }

  .ceo-signature strong {
    font-size: 15px;
  }

  .ceo-signature img {
    max-width: 125px;
    height: 48px;
  }

  .ceo-message-visual {
    order: -1;

    width: min(100%, 420px);
    margin: 0 auto;
  }

  .ceo-message-visual img {
    aspect-ratio: 4 / 5;
  }
}

/* ========================================
   소형 모바일
======================================== */

@media (max-width: 480px) {
  .ceo-message .wrapper {
    padding-right: 16px;
    padding-left: 16px;
  }

  .ceo-message-title {
    font-size: 25px;
  }

  .ceo-message-title br {
    display: none;
  }

  .ceo-message-text p {
    font-size: 18px;
  }

  .ceo-signature {
    align-items: center;
    /* flex-direction: column; */
    gap: 12px;
  }
}

/* ========================================
   모션 최소화
======================================== */

@media (prefers-reduced-motion: reduce) {
  .ceo-message-content,
  .ceo-message-visual {
    opacity: 1;
    transform: none;
    transition: none;
  }
}



/* ========================================
   History Section
======================================== */

.history-section {
  position: relative;

  width: 100%;

  background-color: #fff;
  color: #1e1e1e;
}

.history-section .wrapper {
  width: 100%;
  padding: 120px 60px;
}

.history-section .inner {
  display: grid;
  grid-template-columns:
    minmax(300px, 0.75fr)
    minmax(520px, 1.25fr);
  align-items: start;
  gap: clamp(80px, 10vw, 180px);

  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
}

/* ========================================
   왼쪽 Sticky 영역
======================================== */

.history-intro {
  position: relative;
  min-width: 0;
}

.history-intro-sticky {
  position: sticky;
  top: 140px;

  width: 100%;
  max-width: 440px;
}

.history-label {
  display: flex;
  align-items: center;
  gap: 10px;

  margin: 0;

  color: #20bfc1;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

.history-label span {
  display: block;

  width: 3px;
  height: 20px;

  background-color: #30cacb;
}

.history-title {
  margin: 18px 0 0;

  color: #1a1a1a;
  font-size: 50px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.04em;
}

.history-description {
  max-width: 420px;
  margin: 16px 0 0;

  color: #666;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -0.025em;
  word-break: keep-all;
}

/* ========================================
   오른쪽 타임라인
======================================== */

.history-timeline {
  --history-line-top: 0px;
  --history-line-height: 0px;
  --history-progress-height: 0px;

  position: relative;

  width: 100%;
  max-width: 700px;
  padding-left: 58px;
}

/* 기본선과 진행선 */

.history-line {
  position: absolute;
  top: var(--history-line-top);
  left: 12px;
  z-index: 0;

  display: block;

  width: 2px;

  border-radius: 999px;

  pointer-events: none;
}

.history-line--base {
  height: var(--history-line-height);

  background-color: #e2e8eb;
}

.history-line--progress {
  height: var(--history-progress-height);

  background:
    linear-gradient(
      180deg,
      #30cacb 0%,
      #71dfe0 100%
    );

  box-shadow:
    0 0 12px rgba(48, 202, 203, 0.28);

  transition: height 0.08s linear;
}

/* ========================================
   연도 블록
======================================== */

.history-year {
  position: relative;
  z-index: 1;

  padding-bottom: 110px;

  opacity: 0.35;
  transform: translateY(30px);

  transition:
    opacity 0.65s ease,
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.history-year:last-child {
  padding-bottom: 0;
}

.history-year.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* 연도 포인트 */

.history-year-dot {
  position: absolute;
  top: 13px;
  left: -52px;

  width: 14px;
  height: 14px;

  border: 3px solid #fff;
  border-radius: 50%;

  background-color: #d9e1e5;

  box-shadow:
    0 0 0 2px #d9e1e5;

  transition:
    background-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s ease;
}

.history-year.is-active .history-year-dot {
  background-color: #30cacb;

  box-shadow:
    0 0 0 2px rgba(48, 202, 203, 0.25),
    0 0 18px rgba(48, 202, 203, 0.35);

  transform: scale(1.08);
}

.history-year-title {
  margin: 0;

  color: #1d1d1d;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.035em;
}

/* ========================================
   이미지
======================================== */

.history-year-content {
  margin-top: 28px;
}

.history-image {
  width: 100%;
  overflow: hidden;

  border-radius: 5px;

  background-color: #eef0f2;
  border:1px solid #ededed
}

.history-image img {
  display: block;

  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;

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

/* ========================================
   연혁 목록
======================================== */

.history-list {
  display: flex;
  flex-direction: column;
  gap: 18px;

  margin: 26px 0 0;
  padding: 0;

  list-style: none;
}

.history-list li {
  position: relative;

  margin: 0;
  padding-left: 18px;

  color: #727272;
  font-size: 20px;
  line-height: 1.65;
  word-break: keep-all;
}

.history-list li::before {
  position: absolute;
  top: 0.78em;
  left: 0;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background-color: #30cacb;

  content: "";
  transform: translateY(-50%);
}

/* ========================================
   노트북
======================================== */

@media (max-width: 1440px) {
  .history-section .wrapper {
    padding: 100px 60px;
  }

  .history-section .inner {
    grid-template-columns:
      minmax(280px, 0.75fr)
      minmax(480px, 1.25fr);
    gap: 100px;

    max-width: 1250px;
  }

  .history-intro-sticky {
    top: 120px;
  }

  .history-title {
    font-size: 36px;
  }

  .history-description {
    font-size: 15px;
  }

  .history-year-title {
    font-size: 36px;
  }

  .history-year {
    padding-bottom: 90px;
  }

  .history-list li {
    font-size: 18px;
  }
}

/* ========================================
   태블릿
======================================== */

@media (max-width: 1024px) {
  .history-section .wrapper {
    padding: 90px 32px;
  }

  .history-section .inner {
    grid-template-columns:
      minmax(240px, 0.7fr)
      minmax(400px, 1.3fr);
    gap: 60px;
  }

  .history-intro-sticky {
    top: 100px;
  }

  .history-title {
    font-size: 32px;
  }

  .history-description {
    font-size: 16px;
  }

  .history-timeline {
    padding-left: 48px;
  }

  .history-line {
    left: 10px;
  }

  .history-year-dot {
    left: -44px;
  }

  .history-year-title {
    font-size: 32px;
  }
}

/* ========================================
   모바일
======================================== */

@media (max-width: 767px) {
  .history-section .wrapper {
    padding: 70px 20px;
  }

  .history-section .inner {
    display: block;
  }

  .history-intro-sticky {
    position: relative;
    top: auto;

    max-width: none;
  }

  .history-title {
    font-size: 36px;
  }

  .history-description {
    font-size: 17px;
  }

  .history-timeline {
    max-width: none;
    margin-top: 64px;
    padding-left: 42px;
  }

  .history-line {
    left: 8px;
  }

  .history-year {
    padding-bottom: 74px;
  }

  .history-year-dot {
    top: 10px;
    left: -40px;

    width: 12px;
    height: 12px;
  }

  .history-year-title {
    font-size: 28px;
  }

  .history-year-content {
    margin-top: 22px;
  }

  .history-list {
    gap: 14px;
    margin-top: 22px;
  }

  .history-list li {
    font-size: 18px;
  }
}

/* ========================================
   모션 최소화 설정
======================================== */

@media (prefers-reduced-motion: reduce) {
  .history-line--progress {
    transition: none;
  }

  .history-year {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.ai-use-caption {
  margin: 18px 0 0;

  color: rgba(255, 255, 255, 0.42);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-align: center;
}

@media (max-width: 767px) {
  .ai-use-caption {
    margin-top: 14px;
    font-size: 12px;
  }
}