.wrap{
	overflow:visible;
}

.history-wrap {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 40px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 100px 0 60px;
}

/* ── 좌측: 단일 sticky 미디어 (이미지 클론 겹침) ── */
.history-wrap .hs-media {
  flex: 0 0 44%;
  align-self: flex-start;
  position: -webkit-sticky;
  position: sticky;
  top: 22%;
  display: grid;
}
.history-wrap .hs-media__layer {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.history-wrap .hs-media__layer.is-active { opacity: 1; }
.history-wrap .hs-media__layer .t-year {
  margin: 0 0 16px;
  color: #1b2973;
  font-size: 48px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.96px;
  text-align: center;
}
.history-wrap .hs-media__layer img {
  display: block;
  width: 100%;
  border-radius: 12px;
  margin:auto
}
.history-wrap .hs-media__layer img.sm {
	max-width:340px;
}

/* 원본 이미지는 데스크탑에서 숨김 (모바일에서만 사용) */
.history-wrap .block .history-image { display: none; }

/* ── 우측: 트랙 컬럼 ── */
.history-wrap .hs-trackcol {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
}
/* 연속 회색 라인 — 트랙(1915) 시작부터 끝까지 */
.history-wrap .hs-trackcol::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 20px;
  bottom: 0;
  width: 2px;
  background: #cccccc;
}
/* 연속 파란 진행바 — 위에서부터 차오름 (left·top 은 CSS, height 만 JS) */
.history-wrap .hs-prog {
  position: absolute;
  left: 19px;
  top: 20px;
  width: 2px;
  height: 0;
  background: #0067f3;
  z-index: 1;
  pointer-events: none;
  transition: height 0.15s linear;
}

.history-wrap .hs-trackcol .block {
  position: relative;
  padding-left: clamp(60px, 12vw, 153px);
}
.history-wrap .hs-trackcol .block::before{
  content:'';
  display:block;
  position:absolute;
  top: 29px;
  left: 20px;
  width:clamp(40px, 9vw, 120px);
  height: 1.5px;
  background:#ccc;
}

/* 점 — 블록마다 좌측 레일에 고정 */
.history-wrap .point-cir {
  position: absolute;
  left: 10px;
  top: 20px;
  margin: 0;
  z-index: 2;
}

.history-wrap .point-cir .bar { display: none; }   /* 라인은 ::before 로 대체 */
.history-wrap .point-cir .dot {
  display: block;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #0067f3;
  font-size: 0;
}
.history-wrap .block.is-on .point-cir .dot { background: #0067f3; }

/* 우측 텍스트 */
.history-wrap .history-inner {
  min-height: 240px;
  padding-bottom: 40px;
}
.history-wrap .history-year {
  position:relative;
  margin: 0 0 8px;
  color: #111111;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.8px;
}
.history-wrap .history-desc .txt-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.history-wrap .history-desc .txt-box li + li {
  margin-top: 4px;
}
.history-wrap .history-desc .txt-box p {
  margin: 0;
  color: #111111;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.48px;
}

/* ── 반응형 ── */
@media (max-width: 1024px) {
  .history-wrap { gap: 28px; }
  .history-wrap .hs-media { flex-basis: 40%; top: 160px; }
  .history-wrap .hs-media__layer .t-year { font-size: 36px; }
  .history-wrap .history-inner { min-height: 200px; }
  .history-wrap .history-year { font-size: 30px; }
  .history-wrap .history-desc .txt-box p { font-size: 18px; }
}


@media (max-width: 768px) {
  /* 모바일: 크로스페이드 모션 없음. 좌측 진행 레일(라인+점+진행바) 유지·동작. */
  .history-wrap { display: block; padding: 10px 0 40px; }
  .history-wrap .hs-media { display: none; }

  .history-wrap .hs-trackcol::before { left: 13px; }
  .history-wrap .hs-prog { left: 13px; }

	.history-wrap .hs-trackcol .block {padding-left: 48px;padding-bottom: 24px;padding: 16px 16px 16px 64px;margin-bottom:20px;position:relative;}
	.history-wrap .hs-trackcol .block::before {width: 25px;top: 12.5px;left: 15px;}
	.history-wrap .hs-trackcol .block::after{display:block; content: ''; background: #f8f8f8; width:calc(100% - 48px); height:100%; position:absolute; top:0; left:48px; z-index:-1; border-radius:16px; border:1px solid #E2E2E2;}
  .history-wrap .point-cir { left: 7px; top: 6px; }
  .history-wrap .point-cir .dot { width: 14px; height: 14px; }

  .history-wrap .block .history-image { display: block; margin-bottom: 12px; }
  .history-wrap .block .history-image .t-year { display: none; }
  .history-wrap .block .history-image img { width: 100%; border-radius: 12px; display: block; }

  .history-wrap .history-inner { min-height: 0; padding-bottom: 0; }
  .history-wrap .history-year { font-size: 24px; }
  .history-wrap .history-desc .txt-box p { font-size: 15px; }
}