/* ═══════════════════════════════════════════════════════════════════
   에센스치과 이야기 — page-story.php 전용.
   레퍼(연세오케이 /about/ok-special · /about/ok-doctors)의 sub.css·resp.css 를 **값 그대로** 옮겼다(2026-09-17 지시).
   레퍼는 루트 글자 크기를 단계형 rem 으로 쓴다 → 여기서는 --r 이 그 rem 이다.
     >2000: clamp(8px, .15625vw+5.5px, 10px) · ≤2000: 8px · ≤1640: 7.5px · ≤1240: 7px · ≤769: 6px
   변수 이름도 레퍼 것을 살렸다(--in2 --sectPd3 --subH0 --tit4 --txt1 --radius4 --aniY …).
   ⚠️ 2026-09-21 글자 크기·색은 **사이트 기준**(style.css 머리 주석)에 맞췄다 — 섹션 제목 --tit-sect · 카드 제목 3×--r3 · 본문 16/400
      · 제목색 --black · 본문색 --primary · 포인트 --brand-2. 레퍼 수치(#000 · 5r · 3.5r)로 되돌리지 말 것.
   선택자는 레퍼 클래스(.sub_tit_box .clinic_slider .system_sect .oknone .promise_sect .talk_sect .doctor_list)를 그대로 써서
   레퍼 CSS 와 1:1 로 대조할 수 있게 했다. 색은 사이트 남색(--brand-2)·밝은 파랑(#4F8EF7, 2026-09-22 노랑에서 교체) — 아트디렉션 확정 때 토큰만 바꾼다.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --r: clamp(8px, 0.15625vw + 5.5px, 10px);
  --in2: max(1200px, calc(154 * var(--r)));
  --inPd: 20px;
  --hdH: calc(9 * var(--r));
  --subVisPd: calc(15 * var(--r));
  --sectPd: calc(15 * var(--r));
  --sectPd2: calc(20 * var(--r));
  --sectPd3: calc(25 * var(--r));
  --mainSectSmPd: calc(24 * var(--r));
  --subH0: var(--tit-sect);
  --tit3: calc(3 * var(--r3)); /* 2026-09-21 22.5 → 카드 제목 단계 24 */
  --tit4: calc(3 * var(--r3));
  --tit5: max(calc(2.5 * var(--r)), 25px);
  --txt1: max(calc(2 * var(--r)), 20px);
  --txt2: max(calc(1.7 * var(--r)), 18px);
  --txt3: max(calc(1.6 * var(--r)), 16px);
  --smTxt1: max(calc(1.4 * var(--r)), 14px);
  --radius3: calc(3 * var(--r));
  --radius4: calc(4 * var(--r));
  --aniY: calc(10 * var(--r));
  --inpH: 3em;
  --lineColor: rgba(0, 0, 0, .2);
  --st-blue: var(--brand-2);
  --st-yellow: #4F8EF7; /* 2026-09-22 노랑(#F3B900) → 밝은 파랑(김치킨). 이름은 레퍼 시절 것 그대로 — 강조색 토큰으로 읽을 것 */
  --st-black: #1c1c1c;
  --st-ph: #d9d9d9
}

@media screen and (max-width:2000px) {
  :root {
    --r: 8px;
    --hdH: 80px;
    --txt1: max(calc(1.9 * var(--r)), 19px);
    --txt2: max(calc(1.7 * var(--r)), 17px);
    --txt3: max(calc(1.6 * var(--r)), 16px);
    --smTxt1: max(calc(1.4 * var(--r)), 14px)
  }
}

@media screen and (max-width:1640px) {
  :root {
    --r: 7.5px;
    --tit5: max(calc(2.2 * var(--r)), 22px);
    --txt1: max(calc(1.8 * var(--r)), 18px);
    --txt2: max(calc(1.6 * var(--r)), 16px);
    --txt3: max(calc(1.5 * var(--r)), 15px)
  }
}

@media screen and (max-width:1240px) {
  :root {
    --r: 7px;
    --hdH: 70px;
    --tit3: calc(2.5 * var(--r));
    --tit4: calc(3 * var(--r));
    --tit5: max(calc(2 * var(--r)), 20px);
    --txt1: max(calc(1.6 * var(--r)), 16px);
    --txt2: max(calc(1.5 * var(--r)), 15px);
    --txt3: max(calc(1.4 * var(--r)), 14px);
    --smTxt1: max(calc(1.3 * var(--r)), 13px);
    --mainSectSmPd: calc(16 * var(--r));
    --subH0: var(--tit-sect);
    --sectPd: calc(10 * var(--r));
    --sectPd2: calc(15 * var(--r));
    --sectPd3: calc(20 * var(--r))
  }
}

@media screen and (max-width:769px) {
  :root {
    --r: 6px;
    --hdH: 60px;
    --tit3: 20px;
    --tit4: 22px;
    --tit5: 18px;
    --txt1: 16px;
    --txt2: 15px;
    --txt3: 13px;
    --smTxt1: 13px;
    --mainSectSmPd: 100px;
    --subH0: var(--tit-sect);
    --subVisPd: calc(10 * var(--r));
    --sectPd: 80px;
    --sectPd2: 80px;
    --sectPd3: 100px;
    --radius3: 15px;
    --radius4: 15px
  }
}

@media screen and (max-width:600px) {
  :root {
    --tit3: 16px;
    --tit4: 18px;
    --tit5: 16px;
    --txt1: 15px;
    --txt2: 14px;
    --smTxt1: 12px;
    --mainSectSmPd: 75px;
    --subH0: var(--tit-sect);
    --sectPd: 60px;
    --sectPd2: 60px;
    --sectPd3: 70px
  }
}

/* 컨테이너 — 레퍼 .in (width in2, padding inPd) */
.st-in {
  width: var(--in2);
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--inPd);
  box-sizing: border-box
}

.st-sect {
  padding: var(--sectPd3) 0
}

/* 빈 이미지 자리 — 사용자 지시로 사진은 전부 비워 둔다 */
.is-empty,
.is-empty .ph {
  background: var(--st-ph)
}

/* ── 제목 상자 (레퍼 .sub_tit_box 그대로) ───────────────────────────
   자식이 위로 10rem 떠오르며 1초, 둘째 0.3s · 셋째 0.5s 늦게. 50% 보이면 .active (js) */
.sub_tit_box {
  margin-bottom: calc(10 * var(--r))
}

.sub_tit_box>* {
  transform: translateY(var(--aniY));
  opacity: 0;
  transition: all 1s ease
}

.sub_tit_box>*:nth-child(1) {
  transition-delay: 0s
}

.sub_tit_box>*:nth-child(2) {
  transition-delay: .3s
}

.sub_tit_box>*:nth-child(3) {
  transition-delay: .5s
}

.sub_tit_box.active>* {
  transform: unset;
  opacity: 1
}

.sub_tit_box .tit {
  margin: 0 0 calc(3 * var(--r));
  font-size: var(--subH0);
  line-height: 1.4;
  font-weight: 700;
  background: linear-gradient(90deg, #1554C7 0%, #0A2961 50%, #1554C7 100%);
  background-size: 200% 100%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: gradientMove 2s linear infinite
}

/* 2026-09-21 이야기 페이지 제목은 흐르는 파랑 대신 서브페이지와 같은 단색(--black).
   덴페이스(st-skin-beauty)는 자기 로즈 그라데이션을 쓰므로 그대로 둔다. */
body:not(.st-skin-beauty) .sub_tit_box .tit {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--black);
  animation: none
}

.sub_tit_box .tit2 {
  margin: 0 0 calc(3 * var(--r));
  font-size: var(--subH0);
  line-height: 1.4;
  font-weight: 700;
  color: var(--black)
}

.sub_tit_box .tit_desc {
  margin: 0;
  font-size: var(--txt2);
  line-height: 1.7;
  color: var(--primary);
  font-weight: 400
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%
  }

  100% {
    background-position: 200% 50%
  }
}

/* ── 1 고정 히어로 (레퍼 .visual_top) ─────────────────────────────── */
.st-visual {
  position: relative;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  margin-top: calc(var(--subVisPd) * -1)
}

.st-visual>* {
  height: 100vh
}

.st-visual .txt_box {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: var(--hdH)
}

.st-visual .txt_box .tit {
  margin: 0 0 calc(5 * var(--r));
  font-size: var(--txt1);
  font-weight: 700;
  opacity: 0;
  transform: translateY(var(--aniY))
}

.st-visual .txt_box .msg {
  margin: 0;
  font-size: calc(6 * var(--r));
  font-weight: 700;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(var(--aniY))
}

.st-visual .txt_box .msg span {
  background: linear-gradient(to right, rgb(255, 255, 255) 50%, rgba(255, 255, 255, .1) 50%);
  background-size: 200% 100%;
  background-position-x: 100%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  display: inline
}

.st-visual>.img {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  transform: scale(.6);
  border-radius: var(--radius4);
  background: #7FB2FF no-repeat 50% 50%;
  background-size: cover
}

.st-visual>.img.is-empty {
  background-image: linear-gradient(135deg, #EDF1FA 0%, #C7D8F5 100%)
}

.st-visual .bg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #0053EB;
  opacity: 0
}

.st-visual .scroll {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 3;
  height: auto;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end
}

.st-visual .scroll .txt {
  margin: 0 0 .8rem;
  font-weight: 700;
  font-size: var(--smTxt1)
}

.st-visual .scroll .line {
  position: relative;
  width: 1px;
  height: calc(13 * var(--r));
  margin: 0;
  background: rgba(255, 255, 255, .3);
  overflow: hidden
}

.st-visual .scroll .line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  transform: scaleY(0);
  transform-origin: top;
  animation: growLine 1.5s ease-in-out infinite
}

@keyframes growLine {
  0% {
    transform: scaleY(0);
    transform-origin: top
  }

  50% {
    transform: scaleY(1);
    transform-origin: top
  }

  50.1% {
    transform-origin: bottom
  }

  100% {
    transform: scaleY(0);
    transform-origin: bottom
  }
}

/* ── 2 POINT 슬라이더 (레퍼 .clinic_slider) ─────────────────────── */
.clinic_slider {
  position: relative;
  padding-left: max(calc((100% - var(--in2)) / 2 + var(--inPd)), var(--inPd));
  overflow: hidden;
  transform: translateY(var(--aniY));
  opacity: 0;
  transition: all 1s ease
}

.clinic_slider.active {
  transform: unset;
  opacity: 1
}

/* 2026-09-22 overflow: visible 을 뺐다 — 이전 장이 왼쪽 여백에 반투명으로 비쳤다. 레퍼는 슬라이더 칸 밖(왼쪽)을 자르고,
   다음 장은 칸 안(1.2장 중 0.2)에 들어 있어 오른쪽만 보인다. 되돌리지 말 것. */
.clinic_slider .swiper {
  overflow: hidden
}

.clinic_slider .item {
  display: flex;
  align-items: center;
  opacity: .3;
  transition: all 1s ease
}

.clinic_slider .swiper-slide-active .item {
  opacity: 1
}

.clinic_slider .item .img {
  flex-shrink: 0;
  width: 50%;
  padding-right: calc(7 * var(--r));
  box-sizing: border-box;
  background: none
}

.clinic_slider .item .img img,
.clinic_slider .item .img .ph {
  display: block;
  width: 100%;
  aspect-ratio: 530/380;
  object-fit: cover;
  border-radius: calc(50 * var(--r));
  transition: all 1s ease
}

.clinic_slider .swiper-slide-active .item .img img,
.clinic_slider .swiper-slide-active .item .img .ph {
  border-radius: var(--radius4)
}

.clinic_slider .item .info {
  flex: 1;
  min-width: 0;
  padding-left: calc(7 * var(--r));
  padding-top: calc(8 * var(--r))
}

.clinic_slider .item .info .tit {
  display: flex;
  align-items: flex-start;
  margin: 0
}

.clinic_slider .item .info .tit span {
  margin: .2em calc(2 * var(--r)) 0 0;
  padding: 0 1em;
  line-height: 2em;
  border-radius: 2em;
  background: var(--st-blue);
  color: #fff;
  font-size: var(--txt3);
  font-weight: 600;
  white-space: nowrap
}

.clinic_slider .item .info .tit strong {
  font-size: var(--tit4);
  font-weight: 700;
  line-height: 1.4;
  color: var(--black)
}

.clinic_slider .item .info .txt {
  max-width: 600px;
  margin: calc(3 * var(--r)) 0 calc(2 * var(--r));
  font-size: var(--txt2);
  font-weight: 400;
  line-height: 1.5;
  color: var(--primary)
}

.clinic_slider .item .info .tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(1 * var(--r)) 0
}

.clinic_slider .item .info .tags p {
  margin: 0 calc(1 * var(--r)) 0 0;
  padding: 0 .8em;
  line-height: 1.8em;
  border: 1px solid #bbb;
  border-radius: 1.8em;
  font-size: var(--txt3);
  color: var(--primary)
}

.clinic_slider .controls {
  position: absolute;
  z-index: 2;
  top: calc(7 * var(--r));
  left: max(calc((100% - var(--in2)) / 2 + var(--inPd)), var(--inPd));
  display: flex;
  align-items: center
}

.clinic_slider .controls .swiper-button-prev,
.clinic_slider .controls .swiper-button-next {
  position: static;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center
}

.clinic_slider .controls .swiper-button-prev::after,
.clinic_slider .controls .swiper-button-next::after {
  display: none
}

.clinic_slider .controls svg {
  width: .8em;
  height: auto;
  fill: #000
}

.clinic_slider .controls .pg {
  display: flex;
  align-items: center;
  width: auto;
  margin: 0 calc(1 * var(--r));
  font-size: var(--txt3)
}

.clinic_slider .controls .pg .swiper-pagination-current,
.clinic_slider .controls .pg .swiper-pagination-total {
  width: calc(4.8 * var(--r));
  text-align: center
}

.clinic_slider .controls .pg .swiper-pagination-current {
  font-weight: 700
}

.clinic_slider .controls .pg .swiper-pagination-total {
  color: rgba(0, 0, 0, .5)
}

.clinic_slider .controls .pg .bar {
  position: relative;
  width: 4px;
  height: 4px;
  margin: 0 calc(.5 * var(--r));
  border-radius: 50%;
  background: var(--st-black);
  opacity: .3
}

/* ── 3 인사말 (레퍼 .hello_sect) ─────────────────────────────────── */
.hello_sect {
  padding: var(--sectPd3) 0;
  background: linear-gradient(180deg, #EDF1FA 0%, rgba(237, 241, 250, 0) 87.69%)
}

.hello_sect .in {
  display: flex;
  justify-content: space-between
}

.hello_sect .item {
  width: 45%
}

.hello_sect .item .img {
  position: relative;
  padding-top: 61%;
  margin-bottom: calc(5 * var(--r));
  border-radius: var(--radius4);
  overflow: hidden;
  transform: translateY(var(--aniY));
  opacity: 0;
  cursor: pointer;
  transition: opacity 1s ease .3s, transform 1s ease .3s
}

.hello_sect .item .img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .3s ease-in-out
}

.hello_sect .item .img img:hover {
  transform: scale(1.1)
}

.hello_sect .item .txt {
  font-size: var(--txt2);
  line-height: 1.6;
  color: var(--primary);
  transform: translateY(var(--aniY));
  opacity: 0;
  transition: all 1s ease .6s
}

.hello_sect .item .txt p {
  margin: 0
}

/* 2026-09-22 인사말 줄바꿈 — 데이터의 <br> 은 1241px 이상에서만 쓰고, 좁은 화면에서는 끄고 흐르게 한다.
   text-wrap: pretty 는 문단 끝에 한 단어만 남는 줄을 피한다. */
.hello_sect .item .txt p {
  text-wrap: pretty
}

@media (max-width:1240px) {
  .hello_sect .item .txt p br {
    display: none
  }
}

.hello_sect .item .txt p+p {
  margin-top: calc(3 * var(--r))
}

.hello_sect .sub_tit_box.active+.item .img,
.hello_sect .sub_tit_box.active+.item .txt {
  transform: unset;
  opacity: 1
}

/* ── 4 어두운 띠 (레퍼 .system_sect) ─────────────────────────────── */
.system_sect {
  position: relative;
  padding-top: var(--mainSectSmPd);
  overflow: hidden;
  background: var(--st-blue);
  color: #fff
}

.system_sect .in {
  position: relative;
  z-index: 3
}

.system_sect .bg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(180deg, var(--st-blue) 0%, #030F23 100%); /* 2026-09-22 시작 색만 섹션 바탕색에 맞췄다(전 #0A2961 — 바탕 --st-blue 와 달라 경계가 보였다). 끝 색은 원래대로 */
  z-index: 2;
  opacity: 0
}


.system_sect .sub_tit_box {
  margin-bottom: 0
}

.system_sect .sub_tit_box .tit2 {
  text-align: center;
  color: #fff
}

/* 제목 글자 채움 — 노랑이 왼쪽에서 차오른다(스크롤 연동, js) */
.system_sect .sub_tit_box .tit2 span {
  background: linear-gradient(to right, #fff 50%, rgba(255, 255, 255, .3) 50%); /* 2026-09-22 채워지는 색 노랑 → 흰색 */
  background-size: 200% 100%;
  background-position-x: 100%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  display: inline
}

.system_sect .circles {
  position: relative;
  display: flex;
  padding: calc(30 * var(--r)) calc(3 * var(--r))
}

.system_sect .circles .item {
  position: relative;
  width: calc(100% / 3 + 4 * var(--r));
  padding-top: calc(100% / 3 + 4 * var(--r));
  border: 1px solid var(--st-yellow);
  border-radius: 100%;
  background: rgba(79, 142, 247, 0);
  opacity: 1
}

.system_sect .circles .item:nth-child(2) {
  margin: 0 calc(-6 * var(--r))
}

.system_sect .circles .item dl {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  color: #fff; /* 2026-09-22 노랑 → 흰색 */
  font-weight: 700
}

.system_sect .circles .item dl dt {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: var(--txt1)
}

.system_sect .circles .item dl dt::before,
.system_sect .circles .item dl dt::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background: var(--st-yellow)
}

.system_sect .circles .item dl dd {
  margin: 0;
  font-size: calc(6 * var(--r))
}

.system_sect .circles .last_item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: calc(5 * var(--r));
  font-weight: 700;
  letter-spacing: .1em;
  opacity: 0
}

.system_sect .main_tit_box {
  text-align: center;
  color: #fff;
  transform: translateY(var(--aniY));
  opacity: 0;
  transition: all 1s ease
}

.system_sect .main_tit_box.active {
  transform: unset;
  opacity: 1
}

.system_sect .main_tit_box .tit {
  margin: 0 0 calc(8 * var(--r));
  font-size: var(--subH0);
  font-weight: 700;
  line-height: 1.5
}

.system_sect .main_tit_box .txt2 {
  margin: 0;
  font-size: var(--txt2);
  line-height: 1.6
}

/* ── 5 진료 슬라이더 (레퍼 .okclinic_sect / .okslider) ───────────── */
.okclinic_sect {
  padding: var(--sectPd3) 0;
  overflow: hidden
}

.okslider {
  padding-left: max(calc((100% - var(--in2)) / 2 + var(--inPd)), var(--inPd));
  transform: translateX(var(--aniY));
  opacity: 0;
  transition: opacity 1s ease-in-out .2s, transform 1s ease-in-out .2s
}

.okslider.active {
  transform: unset;
  opacity: 1
}

.okslider .swiper {
  overflow: visible
}

.okslider .swiper-slide a {
  position: relative;
  display: block;
  border-radius: var(--radius3);
  overflow: hidden
}

.okslider .swiper-slide a img,
.okslider .swiper-slide a .ph {
  display: block;
  width: 100%;
  aspect-ratio: 380/460;
  object-fit: cover
}

.okslider .swiper-slide a .txt {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: var(--tit4);
  font-weight: 700;
  color: #fff;
  transition: all .5s ease
}

.okslider .swiper-slide a .txt p {
  position: relative;
  z-index: 2;
  margin: 0 0 calc(2 * var(--r))
}

.okslider .swiper-slide a .txt i {
  position: relative;
  z-index: 2;
  display: block;
  line-height: 0
}

.okslider .swiper-slide a svg {
  width: 1.1em;
  height: auto
}

.okslider .swiper-slide a .txt::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .3);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: all .5s ease
}

@media (min-width:1241px) {
  .okslider .swiper-slide a:hover .txt::after {
    opacity: 1
  }
}

.okclinic_sect .paging,
.talk_sect .paging {
  position: relative;
  width: calc(18 * var(--r));
  height: calc(.6 * var(--r));
  margin: calc(5 * var(--r)) auto 0;
  border-radius: 5em;
  background: #E9EBF0;
  overflow: hidden
}

.talk_sect .paging {
  margin-top: calc(3 * var(--r))
}

.okclinic_sect .paging .swiper-pagination-progressbar-fill,
.talk_sect .paging .swiper-pagination-progressbar-fill {
  background: #000;
  border-radius: 5em
}

/* ── 6 왼쪽 고정 사진 + 오른쪽 탭 (레퍼 .oknone) ─────────────────── */
.oknone_sect {
  padding: var(--sectPd3) 0 0
}

.oknone {
  position: relative;
  display: flex;
  align-items: flex-start;
  height: 400vh
}

.oknone .img_box {
  position: sticky;
  top: 0;
  width: 50%;
  min-height: 100vh
}

.oknone .img_box ul {
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  list-style: none
}

.oknone .img_box li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  will-change: clip-path
}

.oknone .img_box li p {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0
}

.oknone .img_box li p.is-empty {
  background: color-mix(in srgb, #d9d9d9, #0A2961 calc(var(--i) * 10%))
}

.oknone .img_box li p img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.oknone .txt_wrap {
  position: sticky;
  top: 0;
  width: 50%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center
}

.oknone .txt_wrap .txt_box {
  width: 100%;
  max-width: 80%
}

.oknone .txt_wrap .txt_box .num {
  display: flex;
  margin-bottom: calc(10 * var(--r))
}

.oknone .txt_wrap .txt_box .num p {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3em;
  height: 3em;
  margin: 0 calc(1.5 * var(--r)) 0 0;
  border: 1px solid var(--st-blue);
  border-radius: 100%;
  font-size: var(--txt3);
  font-weight: 700;
  color: var(--st-blue);
  cursor: pointer;
  transition: background-color .3s, color .3s
}

.oknone .txt_wrap .txt_box .num p.active {
  background: var(--st-blue);
  color: #fff
}

.oknone .txt_wrap .txt_box ul {
  position: relative;
  height: 50vh;
  margin: 0;
  padding: 0;
  list-style: none
}

.oknone .txt_wrap .txt_box ul>li {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
  transition: all .5s ease
}

.oknone .txt_wrap .txt_box ul>li.active {
  opacity: 1;
  transform: translateY(0)
}

.oknone .txt_wrap .img_box.mo_show {
  display: none
}

/* 2026-09-21 탭 제목은 카드 제목 단계(24). 섹션 제목(38)과 같은 크기라 한 섹션에 큰 제목이 둘이었다. */
.oknone .txts .t1 {
  margin: 0;
  font-size: var(--tit4);
  font-weight: 700;
  line-height: 1.4;
  color: var(--black)
}

.oknone .txts .t2 {
  margin: calc(3 * var(--r)) 0 calc(5 * var(--r));
  font-size: var(--txt2);
  font-weight: 400;
  line-height: 1.7;
  color: var(--primary)
}

.oknone .txts .icos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(2 * var(--r))
}

.oknone .txts .icos div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
  padding: 0 .5em;
  border-radius: calc(1 * var(--r));
  background: #f6f6f6;
  font-size: var(--txt2);
  color: var(--primary);
  text-align: center
}

.oknone .txts .icos .ico {
  width: 2.2em;
  height: 2.2em;
  border: 1.5px solid var(--st-blue);
  border-radius: 50%;
  background: no-repeat center/45% url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230A2961" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>')
}

.oknone .txts .icos div p {
  margin: calc(2 * var(--r)) 0 0;
  line-height: 1.3
}

/* ── 7 2열 엇갈림 포토카드 (레퍼 .promise_sect) ─────────────────── */
.promise_sect {
  padding: var(--sectPd3) 0
}

.promise_sect .sub_tit_box {
  text-align: center
}

.promise_sect .cont {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(4 * var(--r));
  align-items: center;
  max-width: max(1000px, calc(120 * var(--r)));
  margin: 0 auto
}

.promise_sect .cont .img_box {
  position: relative;
  width: 100%;
  padding-top: 117%;
  border-radius: var(--radius3);
  overflow: hidden;
  filter: blur(10px);
  opacity: 0;
  transform: translateY(100px);
  transition-property: opacity, transform, filter;
  transition-duration: 1s;
  transition-timing-function: ease-in-out
}

.promise_sect .cont .img_box.active {
  filter: blur(0);
  opacity: 1;
  transform: unset
}

.promise_sect .cont .img_box:nth-child(1) {
  grid-row: 1 / 3
}

.promise_sect .cont .img_box:nth-child(2) {
  grid-row: 2 / 4
}

.promise_sect .cont .img_box:nth-child(3) {
  grid-row: 3 / 5
}

.promise_sect .cont .img_box:nth-child(4) {
  grid-row: 4 / 6
}

.promise_sect .cont .img_box:nth-child(5) {
  grid-row: 5 / 7
}

.promise_sect .cont .img_box:nth-child(6) {
  grid-row: 6 / 8
}

.promise_sect .cont .img_box .img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.promise_sect .cont .img_box .img.is-empty {
  background: color-mix(in srgb, #d9d9d9, #0A2961 calc(var(--i) * 6%))
}

.promise_sect .cont .img_box .img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.promise_sect .cont .img_box .bg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(9, 27, 60, 0) 38.97%, rgba(9, 27, 60, .5) 77.72%);
  z-index: 10
}

.promise_sect .cont .img_box .txt_box {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: calc(6 * var(--r));
  z-index: 15;
  color: #fff
}

.promise_sect .cont .img_box .txt_box .tit {
  margin: 0 0 calc(2 * var(--r));
  font-size: var(--tit4);
  font-weight: 700;
  line-height: 1.5
}

.promise_sect .cont .img_box .txt_box .txt {
  margin: 0;
  font-size: var(--txt3);
  font-weight: 500;
  line-height: 1.5
}

/* ── 8 영상 카드 (레퍼 .talk_sect / .talk_item) ─────────────────── */
.talk_sect {
  padding: var(--sectPd2) 0
}

.promise_sect+.talk_sect {
  padding-top: 0
}

.talk_sect .sub_tit_box {
  position: relative
}

.talk_sect .sub_tit_box .btn_type1 {
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(16 * var(--r));
  height: var(--inpH);
  padding: 0 1.5em;
  border: 1px solid var(--st-black);
  border-radius: calc(1 * var(--r));
  background: #fff;
  color: #000;
  font-size: max(calc(1.8 * var(--r)), 15px);
  font-weight: 600;
  line-height: var(--inpH);
  transform: translateY(var(--aniY));
  transition: transform 1s ease .7s, background .3s ease, color .3s ease, opacity 1s ease .7s
}

.talk_sect .sub_tit_box .btn_type1 svg {
  width: 1.4em;
  height: auto;
  margin-right: calc(1 * var(--r))
}

.talk_sect .sub_tit_box .btn_type1:hover {
  background: var(--st-black);
  color: #fff
}

.talk_sect .sub_tit_box.active .btn_type1 {
  transform: unset
}

.talk_sect .video_talk {
  opacity: 0;
  transform: translateY(100px);
  transition: all 1s ease
}

.talk_sect .sub_tit_box.active+.video_talk,
.talk_sect.active .video_talk {
  opacity: 1;
  transform: unset
}

.talk_sect .swiper {
  overflow: visible
}

.talk_item {
  display: block;
  border-radius: calc(1.6 * var(--r));
  background: #f6f6f6;
  overflow: hidden
}

.talk_item .img {
  position: relative;
  padding-top: 56.25%;
  overflow: hidden
}

.talk_item .img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: all 1s ease
}

.talk_item .text {
  padding: calc(3 * var(--r))
}

.talk_item .text .subj {
  display: -webkit-box;
  height: 3.5em;
  margin-bottom: calc(1.5 * var(--r));
  font-size: max(calc(1.8 * var(--r)), 19px);
  font-weight: 700;
  line-height: 1.75;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2
}

.talk_item .text .tag_box {
  display: block;
  margin-bottom: calc(1 * var(--r));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.talk_item .text .tag_box .tag {
  display: inline-block;
  margin: 0 calc(1 * var(--r)) calc(1 * var(--r)) 0;
  padding: .1em .5em;
  border-radius: calc(.5 * var(--r));
  background: #fff;
  font-size: max(calc(1.3 * var(--r)), 14px);
  font-weight: 500;
  vertical-align: middle
}

.talk_item .text .date {
  color: #aeaeae;
  font-size: max(calc(1.3 * var(--r)), 14px);
  font-weight: 600
}

/* ── 의료진 (레퍼 .doctor_page) ─────────────────────────────────── */
.doctor_page {
  position: relative;
  overflow: hidden;
  padding-top: var(--sectPd3)
}

.doctor_page .top_sec {
  position: relative;
  overflow: hidden
}

.doctor_page .top_sec::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100vw;
  aspect-ratio: 1/1;
  background: radial-gradient(50% 50% at 50% 50%, #5983CF 0%, rgba(211, 227, 255, 0) 100%);
  opacity: .3;
  pointer-events: none
}

.doctor_page .top_sec .in {
  position: relative
}

.doctor_page .top_sec .photo {
  text-align: center;
  transform: translateY(var(--aniY));
  opacity: 0;
  transition: all 1s ease .7s
}

.doctor_page .top_sec .photo.is-empty {
  max-width: 1000px;
  margin: 0 auto;
  aspect-ratio: 1000/480;
  border-radius: var(--radius3) var(--radius3) 0 0;
  background: linear-gradient(180deg, #e3e6ec 0%, #f4f6fa 100%)
}

.doctor_page .top_sec .photo img {
  max-width: 100%;
  height: auto
}

.doctor_page .top_sec .sub_tit_box.active+.photo {
  transform: unset;
  opacity: 1
}

.marqee_sect {
  margin: calc(5 * var(--r)) 0 calc(15 * var(--r))
}

.marqee_sect .marqee_text {
  display: flex;
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: hidden;
  font-size: calc(10 * var(--r));
  font-weight: 700;
  letter-spacing: .05em;
  transition: .3s
}

.marqee_sect .marqee_text p {
  margin: 0;
  padding-right: calc(4 * var(--r));
  line-height: 1.1;
  color: rgba(111, 109, 107, .1);
  animation: textLoop 50s linear infinite
}

@keyframes textLoop {
  0% {
    transform: translate3d(0, 0, 0)
  }

  100% {
    transform: translate3d(-100%, 0, 0)
  }
}

.doctor_page .doctor_list {
  padding-bottom: var(--sectPd3)
}

.doctor_list .item {
  display: flex;
  justify-content: flex-start;
  transform: translateY(var(--aniY));
  opacity: 0;
  transition: all 1s ease
}

.doctor_list .item.active {
  transform: unset;
  opacity: 1
}

.doctor_list .item+.item {
  margin-top: var(--sectPd)
}

.doctor_list .item .photo {
  display: flex;
  flex-direction: column;
  width: 37%;
  margin-right: calc(7 * var(--r))
}

.doctor_list .item .msg {
  margin: 0 0 calc(5 * var(--r));
  font-family: 'Noto Serif KR', 'Cormorant Garamond', serif;
  font-size: var(--tit5);
  font-weight: 500;
  line-height: 1.7;
  color: var(--black)
}

.doctor_list .item .photo .img {
  position: relative;
  padding-top: 124%;
  border-radius: calc(3 * var(--r));
  overflow: hidden
}

.doctor_list .item .photo .img.is-empty {
  background: #e3e6ec
}

.doctor_list .item .img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

/* 박선영 원장 사진은 원본 촬영 범위가 넓어 인물 배율을 맞춘다. */
.doctor_list .item .img img[alt="박선영 원장"] {
  width: 130%;
  height: 130%;
  left: -15%;
  top: -4%;
}

.doctor_list .item .info {
  flex: 1;
  min-width: 0
}

/* 2026-09-21 이름 옆 직책. 없어진 .type(분야 줄) 규칙을 그대로 물려받았다. */
.doctor_list .item .info .name .pos {
  margin-left: calc(1.5 * var(--r));
  font-size: var(--txt2);
  font-weight: 700;
  color: var(--st-blue)
}

.doctor_list .item .info .name {
  margin: calc(1 * var(--r)) 0 calc(4.5 * var(--r));
  font-size: var(--tit4);
  font-weight: 700;
  color: var(--black)
}

.doctor_list .item .info .tit {
  margin: 0 0 calc(2 * var(--r));
  font-size: var(--txt1);
  font-weight: 700;
  color: var(--black)
}

.doctor_list .item .info .desc {
  margin-top: calc(2 * var(--r))
}

.doctor_list .item .info .desc p {
  margin: 0;
  padding-left: .8em;
  text-indent: -.8em;
  font-size: var(--txt3);
  line-height: 1.6;
  color: #444
}

.doctor_list .item .info .body {
  margin-top: calc(5 * var(--r));
  padding-top: calc(5 * var(--r));
  border-top: 1px solid var(--lineColor)
}

.doctor_list .item .info .body .his {
  margin: 0;
  padding: 0;
  list-style: none
}

/* 2026-09-21 2열(50%) → 1열(100%). 항목마다 한 줄씩. */
.doctor_list .item .info .body .his li {
  display: inline-block;
  width: 100%;
  padding-left: calc(1 * var(--r));
  text-indent: calc(-1 * var(--r));
  box-sizing: border-box;
  font-size: var(--txt2);
  line-height: 1.6;
  color: var(--primary);
  vertical-align: top
}

/* 진료시간표 — 레퍼 .list_tbl */
.list_tbl {
  overflow: hidden
}

.list_tbl .tbl_box {
  width: 100%
}

.list_tbl .tbl_box .box {
  display: flex
}

.list_tbl .tbl_box .box>div {
  flex: 1;
  min-width: 0;
  line-height: 1;
  font-size: var(--txt3)
}

.list_tbl .tbl_box .th_box {
  padding: 1em 0;
  border-radius: 10px 10px 0 0;
  background: var(--lineColor);
  color: var(--black);
  font-weight: 700
}

.list_tbl .tbl_box .th_box .th {
  display: flex;
  align-items: flex-end;
  justify-content: center
}

.list_tbl .tbl_box .td_box .td {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.5em
}

.list_tbl .tbl_box .td_box .td:first-child {
  border-left: 1px solid var(--lineColor)
}

.list_tbl .tbl_box .td_box .td:last-child {
  border-right: 1px solid var(--lineColor)
}

.list_tbl .tbl_box .td_box:last-child .td {
  border-bottom: 1px solid var(--lineColor)
}

.list_tbl .tbl_box .td_box:last-child .td:first-child {
  border-bottom-left-radius: 10px
}

.list_tbl .tbl_box .td_box:last-child .td:last-child {
  border-bottom-right-radius: 10px
}

.list_tbl .tbl_box .td_box .td.time {
  background: #fff;
  font-weight: 700;
  border-right: 1px solid var(--lineColor)
}

.list_tbl .tbl_box .td_box .td .badge {
  display: inline-block;
  padding: .5em .9em .45em;
  border-radius: 3em;
  font-size: var(--smTxt1);
  font-weight: 600;
  line-height: 1;
  text-align: center
}

.list_tbl .tbl_box .td_box .td .badge.ing {
  background: #1554C7;
  color: #fff
}

.list_tbl .tbl_box .td_box .td .badge.close {
  background: var(--lineColor);
  color: rgba(0, 0, 0, .3)
}

/* ── 모션 감소 ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  .sub_tit_box>*,
  .clinic_slider,
  .okslider,
  .hello_sect .item .img,
  .hello_sect .item .txt,
  .system_sect .main_tit_box,
  .promise_sect .cont .img_box,
  .talk_sect .video_talk,
  .talk_sect .sub_tit_box .btn_type1,
  .doctor_page .top_sec .photo,
  .doctor_list .item {
    transform: none;
    opacity: 1;
    filter: none;
    transition: none
  }

  .sub_tit_box .tit,
  .marqee_sect .marqee_text p,
  .st-visual .scroll .line::after {
    animation: none
  }

  .st-visual>.img {
    transform: none;
    border-radius: 0
  }

  .st-visual .bg {
    opacity: .5
  }

  .st-visual .txt_box .tit,
  .st-visual .txt_box .msg {
    opacity: 1;
    transform: none
  }

  .st-visual .txt_box .msg span,
  .system_sect .sub_tit_box .tit2 span {
    background-position-x: 0
  }
}

/* ── 1240 이하 (레퍼 resp.css) ──────────────────────────────────── */
@media screen and (max-width:1240px) {
  .clinic_slider .controls {
    top: calc(4 * var(--r))
  }

  
}

/* ── 1000 이하 — 왼쪽 사진 스택 해제, 글을 가로로 넘긴다(레퍼) ───── */
@media screen and (max-width:1000px) {
  .oknone {
    height: auto
  }

  .oknone .img_box {
    display: none
  }

  .oknone .txt_wrap {
    position: relative;
    width: auto;
    min-width: 0;
    min-height: 0;
    justify-content: flex-start;
    align-items: flex-start
  }

  .oknone .txt_wrap .txt_box {
    max-width: 100%;
    width: 100%
  }

  .oknone .txt_wrap .txt_box .num {
    display: none
  }

  .oknone .txt_wrap .txt_box ul {
    display: flex;
    height: auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 var(--inPd);
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth
  }

  .oknone .txt_wrap .txt_box ul::-webkit-scrollbar {
    display: none
  }

  .oknone .txt_wrap .txt_box ul>li {
    position: static;
    flex-shrink: 0;
    width: 500px;
    max-width: 85vw;
    opacity: 1;
    transform: none;
    scroll-snap-align: start;
    scroll-snap-stop: always
  }

  .oknone .txt_wrap .txt_box ul>li+li {
    margin-left: 30px
  }

  .oknone .txt_wrap .img_box.mo_show {
    position: relative;
    display: block;
    width: 100%;
    min-height: 0;
    margin-bottom: 25px;
    padding-top: 60%;
    border-radius: var(--radius3);
    overflow: hidden
  }

  .oknone .txt_wrap .img_box.mo_show.is-empty {
    background: color-mix(in srgb, #d9d9d9, #0A2961 calc(var(--i) * 10%))
  }

  .oknone .txt_wrap .img_box.mo_show img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
  }

  .oknone .txts .t1 {
    font-size: 20px
  }

  .oknone .txts .t2 {
    margin: 10px 0 30px;
    font-size: var(--txt2)
  }

  .oknone .txts .icos {
    max-width: 400px;
    gap: 10px
  }

  .oknone .txts .icos div {
    font-size: var(--smTxt1)
  }
}

/* ── 769 이하 ───────────────────────────────────────────────────── */
@media screen and (max-width:769px) {
  .st-visual>* {
    height: 75vh;
    min-height: 500px
  }

  .st-visual .txt_box {
    padding: 0 var(--inPd) calc(10 * var(--r))
  }

  .st-visual .txt_box .tit {
    margin-bottom: 12px
  }

  .st-visual .txt_box .msg {
    font-size: 22px
  }

  .st-visual .scroll .line {
    height: 50px
  }

  .clinic_slider .controls {
    display: none
  }

  .clinic_slider .item {
    flex-direction: column
  }

  .clinic_slider .item .img {
    width: 100%;
    padding-right: 0
  }

  .clinic_slider .item .info {
    padding-left: 0;
    padding-top: 20px
  }

  .clinic_slider .item .info .txt {
    margin-top: 10px
  }

  .clinic_slider .item .info .tit span {
    font-size: 10px;
    padding: 0 .7em;
    margin-right: .7em;
    margin-top: .3em
  }

  .hello_sect .in {
    flex-direction: column
  }

  .hello_sect .item {
    width: 100%
  }

  .hello_sect .item .txt p+p {
    margin-top: 10px
  }

  .system_sect .circles {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    padding: calc(10 * var(--r)) 0
  }

  .system_sect .circles .item {
    width: 150px;
    padding-top: 150px;
    margin: 0 !important;
    transform: none !important;
    background: none !important
  }

  .system_sect .circles .item dl dd {
    font-size: 26px
  }

  .system_sect .circles .last_item {
    display: none
  }

  .system_sect .main_tit_box .tit {
    margin-bottom: 30px
  }

  

  

  

  

  

  

  

  .promise_sect .cont {
    display: flex;
    flex-wrap: nowrap;
    gap: 15px;
    width: calc(100% + var(--inPd) * 2);
    margin-left: calc(var(--inPd) * -1);
    padding: 0 var(--inPd);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth
  }

  .promise_sect .cont::-webkit-scrollbar {
    display: none
  }

  .promise_sect .cont .img_box {
    flex-shrink: 0;
    width: 80%;
    padding-top: 100%;
    filter: blur(0);
    opacity: 1;
    transform: unset;
    scroll-snap-align: center;
    scroll-snap-stop: always
  }

  .promise_sect .cont .img_box .txt_box {
    padding: 20px 15px
  }

  .promise_sect .cont .img_box .txt_box .tit {
    margin-bottom: 5px
  }

  .talk_sect .sub_tit_box .btn_type1 {
    position: static;
    margin-top: 10px
  }

  .talk_sect .video_talk {
    margin: 0 -20px;
    padding: 0 0 0 20px
  }

  .marqee_sect {
    margin: 30px 0 60px
  }

  .doctor_list .item {
    flex-direction: column
  }

  .doctor_list .item .photo {
    width: 100%;
    margin-right: 0
  }

  .doctor_list .item .photo .img {
    max-width: 400px;
    padding-top: 0;
    aspect-ratio: 4/5
  }

  .doctor_list .item .msg {
    margin-bottom: 15px;
    font-size: 18px
  }

  .doctor_list .item .info {
    margin-top: 20px
  }

  .doctor_list .item .info .name {
    margin-top: 0;
    margin-bottom: 20px
  }

  .doctor_list .item .info .tit {
    margin-bottom: 5px
  }

  .doctor_list .item+.item {
    margin-top: var(--sectPd3)
  }
}

/* ── 4-2 6단계 가로 흐름 (2026-09-18, 원형 링 구성에서 교체) ─────────────
   한 줄에 여섯 단계. 가는 선이 점과 점을 잇고, 현재 단계까지 노랑으로 차오른다.
   --flow-p(0~1)는 js/story.js 가 넣는다. 좁은 화면(≤768)은 세로로 선다. */
.system_sect .st-flow {
  --flow-p: 0;
  --dot: calc(7*var(--r3));
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--flow-n, 6), minmax(0, 1fr)); /* 칸 수 = 단계 수(system.php 가 넘긴다) */
  gap: 0 calc(2*var(--r3));
  max-width: 1300px;
  margin: calc(12*var(--r3)) auto 0;
  padding: 0 0 calc(18*var(--r3));
  list-style: none
}

.system_sect .st-flow::before,
.system_sect .st-flow::after {
  content: '';
  position: absolute;
  top: calc(var(--dot)/2 - 1px);
  left: calc(100% / (2 * var(--flow-n, 6)));
  height: 2px
}

.system_sect .st-flow::before {
  right: calc(100% / (2 * var(--flow-n, 6)));
  background: rgba(255, 255, 255, .18)
}

.system_sect .st-flow::after {
  width: calc((100% - 100% / var(--flow-n, 6)) * var(--flow-p));
  background: var(--st-yellow);
  transition: width .6s ease
}

.system_sect .st-flow-step {
  position: relative;
  z-index: 1;
  text-align: center;
  cursor: pointer;
  outline: 0;
  word-break: keep-all
}

.system_sect .st-flow-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--dot);
  height: var(--dot);
  margin: 0 auto;
  border: 2px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: #14336d;
  color: rgba(255, 255, 255, .6);
  font-size: max(14px, calc(2*var(--r3)));
  font-weight: 700;
  transition: background-color .4s, color .4s, border-color .4s, box-shadow .4s
}

.system_sect .st-flow-step.is-done .st-flow-dot {
  border-color: #fff;
  background: #fff;
  color: var(--st-blue)
}

.system_sect .st-flow-step.is-on .st-flow-dot {
  border-color: var(--st-yellow);
  background: var(--st-yellow);
  color: #fff;
  box-shadow: 0 0 0 calc(1*var(--r3)) rgba(79, 142, 247, .25)
}

.system_sect .st-flow-step:focus-visible .st-flow-dot {
  outline: 2px solid #fff;
  outline-offset: 4px
}

.system_sect .st-flow-tit {
  margin: calc(3*var(--r3)) 0 0;
  font-size: max(17px, calc(2.5*var(--r3)));
  font-weight: 700;
  line-height: 1.4;
  color: rgba(255, 255, 255, .7);
  transition: color .4s
}

.system_sect .st-flow-tit em {
  display: block;
  margin-top: .3em;
  font-size: max(12px, calc(1.5*var(--r3)));
  font-style: normal;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .4)
}

.system_sect .st-flow-txt {
  margin: calc(1.5*var(--r3)) 0 0;
  font-size: min(calc(2*var(--r3)), 18px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .5);
  transition: color .4s
}

.system_sect .st-flow-step.is-on .st-flow-tit { color: #fff }
.system_sect .st-flow-step.is-on .st-flow-tit em { color: var(--st-yellow) }
.system_sect .st-flow-step.is-on .st-flow-txt { color: rgba(255, 255, 255, .92) }

@media (max-width:1000px) {
  .system_sect .st-flow { gap: 0 calc(1*var(--r3)) }
  .system_sect .st-flow-txt { font-size: 13px }
}

@media (max-width:768px) {
  .system_sect .st-flow {
    --dot: 40px;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    margin-top: 48px;
    padding: 0 0 80px
  }
  /* 세로에선 목록 전체 선 대신 단계마다 다음 점까지 잇는다 — 글 길이가 달라도 끝이 정확히 맞는다 */
  .system_sect .st-flow::before,
  .system_sect .st-flow::after { display: none }
  .system_sect .st-flow-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 40px;
    bottom: -28px;
    width: 2px;
    background: rgba(255, 255, 255, .18);
    transition: background-color .4s
  }
  .system_sect .st-flow-step.is-done::before { background: var(--st-yellow) }
  .system_sect .st-flow-step { padding-left: 60px; text-align: left }
  .system_sect .st-flow-dot { position: absolute; left: 0; top: 0; margin: 0 }
  .system_sect .st-flow-tit { margin-top: 6px }
  .system_sect .st-flow-tit em { display: inline; margin: 0 0 0 .5em }
  .system_sect .st-flow-txt { font-size: 14px }
}

/* ═══ 덴페이스(/denface/) — 레퍼 /ok-change-club 새 섹션 5개. 값은 레퍼 sub.css·resp.css 그대로(rem → --r) ═══ */

/* 상단 문구 (.top_sec) */
.top_sec { padding: calc(15 * var(--r)) 0 0 }
.top_sec { margin-bottom: calc(10 * var(--r)) }
.top_sec .sub_tit_box { margin-bottom: 0 }
.top_sec .tit_desc { font-size: var(--txt2); line-height: 1.7 }
.top_sec .tit_note { margin: calc(3 * var(--r)) 0 0; font-size: var(--txt2); line-height: 1.7; font-weight: 700; color: var(--black) }

/* 흐르는 글자 띠 (.marqee_sect) */
.marqee_sect { margin: 0 0 calc(5 * var(--r)); overflow: hidden }
.marqee_sect .marqee_text { display: flex; flex: 0 0 auto; white-space: nowrap; font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; font-size: calc(9*var(--r3)); font-weight: 400; letter-spacing: normal }
.marqee_sect .marqee_text p { margin: 0; padding-right: calc(4 * var(--r)); line-height: 1; color: rgba(1, 51, 127, .1); animation: textLoop 50s linear infinite }
@keyframes textLoop { 0% { transform: translate3d(0, 0, 0) } 100% { transform: translate3d(-100%, 0, 0) } }

/* 인포그래픽 + 형광펜 제목 (.info_sect) */
.info_sect { padding: var(--mainSectSmPd) 0 }
.info_sect .info_box { padding: calc(6.4 * var(--r)); border-radius: calc(2.4 * var(--r)); background: #F5F6F7 }
.info_sect .info_box .tit { margin: 0; font-size: calc(3.8 * var(--r)); font-weight: 700; line-height: 1.5 }
.info_sect .img_wrap { display: flex; justify-content: center; align-items: flex-end; gap: calc(2.6 * var(--r)); height: calc(24 * var(--r)); margin: calc(7 * var(--r)) 0 0; padding: 0; list-style: none }
.info_sect .img_box { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; width: max(calc(var(--w) * 14.5 * var(--r)), calc(8 * var(--r))); /* 레퍼 아이콘처럼 높이에 비례해 넓어지되, 아래 글자가 붙지 않게 최소 8rem */ opacity: 0; transform: translateX(-3rem); transition: opacity .5s ease-in-out var(--d), transform .5s ease-in-out var(--d) }
.info_sect.active .img_box { opacity: 1; transform: unset }
.info_sect .img_box .bar { display: block; width: 100%; height: var(--h); border-radius: calc(1.2 * var(--r)) calc(1.2 * var(--r)) 0 0; background: #cfd3d9 }
.info_sect .img_box.is-last .bar { background: var(--st-yellow) }
.info_sect .img_box .lbl { margin-top: calc(1.2 * var(--r)); font-size: var(--smTxt1); font-weight: 600; white-space: nowrap; color: #555 }
.info_sect .img_box.is-last .lbl { color: #000 }
.info_sect .img_box .txt { position: absolute; left: 50%; bottom: calc(var(--h) + 4.4 * var(--r)); margin: 0; padding: .6em .8em; border-radius: 10rem; background: var(--st-yellow); color: #fff; font-size: calc(3 * var(--r)); font-weight: 700; line-height: 1; white-space: nowrap; opacity: 0; transform: translate(-50%, 3rem); transition: .5s ease-in-out 1s }
.info_sect.active .img_box .txt { opacity: 1; transform: translateX(-50%) }
.info_sect .sub_tit_box { display: flex; justify-content: space-between; margin: calc(6.4 * var(--r)) 0 0 }
.info_sect .sub_tit_box .tit2 span { position: relative; z-index: 0 }
.info_sect .sub_tit_box .tit2 span:before { content: ""; position: absolute; left: 0; bottom: 0; z-index: -1; width: 100%; height: 25%; background: var(--st-yellow); clip-path: inset(0 100% 0 0); transition: all 1s cubic-bezier(.83, 0, .17, 1) .3s }
.info_sect .sub_tit_box.active .tit2 span:before { clip-path: inset(0 0 0 0) }
.info_sect .sub_tit_box .txt_box { margin-left: calc(27 * var(--r)) }
@media screen and (max-width: 1240px) { .info_sect .sub_tit_box .txt_box { margin-left: calc(10 * var(--r)) } }
.info_sect .sub_tit_box .txt { margin: 0; font-size: var(--txt2); line-height: 1.7 }
.info_sect .sub_tit_box .txt + .txt { margin-top: calc(2.4 * var(--r)) }

/* 반반 색 면 (.seniar_sect) */
.seniar_sect { position: relative; height: 100vh; min-height: 640px; opacity: 0; transform: translateY(50px); transition: .8s ease-in-out }
.seniar_sect.active { opacity: 1; transform: unset }
.seniar_sect .cont { position: relative; height: 100% }
.seniar_sect .img { position: absolute; inset: 0; background: var(--st-ph) }
.seniar_sect .over { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; background: #E69B01; clip-path: inset(0 100% 0 0); transition: all 2s cubic-bezier(.83, 0, .17, 1) .3s }
.seniar_sect.active .over { clip-path: inset(0 0 0 0) }
.seniar_sect2 .over { background: var(--st-blue) }
.seniar_sect .txt_box { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #fff }
.seniar_sect .txt_box .box { width: 100%; max-width: calc(64 * var(--r)) }
.seniar_sect .box .tit { margin: 0 0 calc(5 * var(--r)); font-size: var(--subH0); font-weight: 700; line-height: 1.5 }
.seniar_sect .box .txt p { margin: 0; font-size: var(--txt2); line-height: 1.5 }
.seniar_sect .box .txt p + p { margin-top: calc(3 * var(--r)) }
.seniar_sect .box .txt p strong { font-size: var(--txt1); font-weight: 700 }

/* 이런 분께 (.need_sect) */
.need_sect { padding: 0 0 var(--mainSectSmPd); overflow: hidden; text-align: center }
.need_sect .sub_tit_box { padding: 0 var(--inPd) }
.need_sect .cont + .cont { margin-top: calc(4 * var(--r)) }
.need_sect .track { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; animation: loopLeft 50s linear infinite }
.need_sect .cont2 .track { animation-name: loopRight }
.need_sect .item_box { display: flex; align-items: center; flex: 0 0 auto }
.need_sect .item_box .txt { margin: 0; padding: calc(2.4 * var(--r)) calc(3.2 * var(--r)); border-radius: 100px; background: #EDF1FA; color: #12439C; font-size: var(--txt2); font-weight: 600; white-space: nowrap }
.need_sect .item_box .img_box { flex: 0 0 auto; width: 100px; height: 100px; margin: 0 calc(2.4 * var(--r)); border-radius: 50%; background: var(--st-ph) } /* 레퍼는 padding 0 2.4rem 에 100px 둥근 사진 */
@keyframes loopLeft { 0% { transform: translateX(0) } 100% { transform: translateX(-50%) } }
@keyframes loopRight { 0% { transform: translateX(-50%) } 100% { transform: translateX(0) } }

@media (prefers-reduced-motion: reduce) {
  .marqee_sect .marqee_text p, .need_sect .track { animation: none }
}
@media screen and (max-width: 1240px) {
  .seniar_sect .txt_box .box { max-width: 85% }
  .need_sect .item_box .img_box { width: 80px; height: 80px }
}
@media screen and (max-width: 1000px) {
  .seniar_sect .over { width: 100%; top: auto; clip-path: inset(100% 0 0 0) }
  .seniar_sect .txt_box .box { max-width: 100%; padding: calc(5 * var(--r)) var(--inPd) }
  .seniar_sect .box .tit { margin-bottom: calc(3 * var(--r)) }
}
@media screen and (max-width: 769px) {
  .top_sec { padding-top: 60px }
  .marqee_sect { margin: 0 0 30px }
  .info_sect .info_box { padding: 25px }
  .info_sect .img_wrap { gap: 8px; height: 15rem; margin-top: 60px }
  .info_sect .img_box { width: auto; flex: 1 }
  .info_sect .img_box .lbl { font-size: 11px; white-space: normal; text-align: center; word-break: keep-all }
  .info_sect .img_box .txt { font-size: 14px }
  .info_sect .sub_tit_box { flex-direction: column }
  .info_sect .sub_tit_box .txt_box { margin: 10px 0 0 }
  .info_sect .sub_tit_box .txt br { display: none }
  .info_sect .sub_tit_box .txt + .txt { margin-top: 10px }
  .seniar_sect { height: 600px; min-height: 0 }
  .seniar_sect .box .tit { font-size: 22px; margin-bottom: 12px }
  .seniar_sect .box .txt p br { display: none }
  .seniar_sect .box .txt p + p { margin-top: 5px }
  .need_sect .item_box .img_box { width: 60px; height: 60px }
  .need_sect .track { animation-duration: 25s }
}

/* ═══ 6단계 링 — 레퍼 .cont(원형 링 + 글자 강조 + 설명 상자). 2026-09-18 오전 이야기 페이지에서 뺐던 것을 되살려
       데이터에 'ring' => true 가 있는 페이지(덴페이스)에서만 쓴다. 이야기 페이지는 가로 흐름(.st-flow) 그대로. ═══ */
/* 6단계 링 — 레퍼 .cont.dark */
.system_sect .cont {
  position: relative;
  width: calc(90 * var(--r));
  max-width: 100%;
  margin: calc(10 * var(--r)) auto 0;
  transform: translateY(20%);
  z-index: 3
}

.system_sect .cont .cir_wrap {
  position: relative;
  padding-top: 100%;
  transition: transform .5s linear
}

.system_sect .cont .cir_wrap .cir_line {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(from 200deg, rgba(255, 255, 255, 0) 0deg, var(--ring-a, #A7C8EF) 60deg, rgba(255, 255, 255, 0) 120deg, rgba(255, 255, 255, .18) 120deg, rgba(255, 255, 255, .18) 360deg);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 2px), #000 calc(50% - 1px));
  mask: radial-gradient(circle, transparent calc(50% - 2px), #000 calc(50% - 1px))
}

.system_sect .cont .cir_wrap .cir_bg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 85%;
  height: 85%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(65.5% 65.5% at 50% 50%, var(--ring-b1, #335694) 0%, var(--ring-b2, #51678F) 100%)
}

.system_sect .cont .cir_wrap .active_cir {
  position: absolute;
  right: 16%;
  bottom: 64%;
  width: calc(2 * var(--r));
  height: calc(2 * var(--r));
  border-radius: 50%;
  background: radial-gradient(203.82% 203.82% at 50% 50%, var(--ring-y1, #FFC300) 0%, var(--ring-y2, #FFDC67) 100%);
  box-shadow: 0 0 20px var(--ring-glow, #FFE32B)
}

.system_sect .cont.num1 .cir_wrap {
  transform: rotate(-170deg)
}

.system_sect .cont.num2 .cir_wrap {
  transform: rotate(-135deg)
}

.system_sect .cont.num3 .cir_wrap {
  transform: rotate(-100deg)
}

.system_sect .cont.num4 .cir_wrap {
  transform: rotate(-35deg)
}

.system_sect .cont.num5 .cir_wrap {
  transform: rotate(0deg)
}

.system_sect .cont.num6 .cir_wrap {
  transform: rotate(35deg)
}

.system_sect .cont .light_txt {
  position: absolute;
  left: 50%;
  bottom: 24%;
  margin: 0;
  transform: translateX(-50%);
  font-size: calc(11 * var(--r));
  font-weight: 700;
  white-space: nowrap;
  background: linear-gradient(89deg, var(--ring-a, #A7C8EF) 1.39%, var(--ring-a, #A7C8EF) 128.34%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent
}

.system_sect .cont .light_txt::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 12px rgba(255, 255, 255, .9);
  pointer-events: none
}

.system_sect .cont .light_txt .copy_txt {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  font-size: 1em;
  color: #fff;
  z-index: 2;
  -webkit-text-fill-color: transparent
}

.system_sect .cont .light_txt .copy_txt span {
  opacity: 0;
  transition: opacity .3s ease-in-out
}

.system_sect .cont.num1 .copy_txt span.num1,
.system_sect .cont.num2 .copy_txt span.num2,
.system_sect .cont.num3 .copy_txt span.num3,
.system_sect .cont.num4 .copy_txt span.num4,
.system_sect .cont.num5 .copy_txt span.num5,
.system_sect .cont.num6 .copy_txt span.num6 {
  background: linear-gradient(60deg, var(--ring-y2, #FFDC67) 6.45%, var(--ring-y1, #FFC300) 53.73%, var(--ring-y2, #FFDC67) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(255, 195, 0, .8), 0 0 3px rgba(255, 195, 0, .6);
  opacity: 1
}

.system_sect .cont .txt_wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%
}

.system_sect .cont .txt_wrap .txt_cont {
  position: absolute;
  cursor: pointer
}

.system_sect .cont .txt_wrap .txt_cont .num_txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: var(--tit3);
  font-weight: 700;
  color: #fff;
  transition: color .3s ease-in-out
}

.system_sect .cont .txt_wrap .txt_cont .num_txt .num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5em;
  height: 2.5em;
  line-height: 1;
  border-radius: 50%;
  background: var(--ring-c1, #697DA2);
  color: #000;
  font-size: var(--txt1);
  font-weight: 700;
  transition: color .3s ease-in-out, background-color .3s ease-in-out
}

.system_sect .cont .txt_wrap .txt_cont .num_txt .lbl {
  margin-top: .3em;
  white-space: nowrap
}

.system_sect .cont .txt_wrap .txt_cont.active {
  z-index: 5
}

.system_sect .cont .txt_wrap .txt_cont.active .num_txt {
  color: var(--st-yellow)
}

.system_sect .cont .txt_wrap .txt_cont.active .num_txt .num {
  background: var(--st-yellow)
}

.system_sect .cont .txt_wrap .txt_cont.num1 {
  left: -15%;
  bottom: 35%
}

.system_sect .cont .txt_wrap .txt_cont.num2 {
  left: -11%;
  top: 17%
}

.system_sect .cont .txt_wrap .txt_cont.num3 {
  left: 15%;
  top: -9%
}

.system_sect .cont .txt_wrap .txt_cont.num4 {
  right: 15%;
  top: -9%
}

.system_sect .cont .txt_wrap .txt_cont.num5 {
  right: -11%;
  top: 17%
}

.system_sect .cont .txt_wrap .txt_cont.num6 {
  right: -15%;
  bottom: 35%
}

/* 활성 단계 카드 — 링 오른쪽 위(레퍼 스크린샷 위치). 왼쪽 항목이면 왼쪽으로 */
.system_sect .cont .txt_cont .spe_box {
  position: absolute;
  top: 50%;
  left: calc(100% + 3 * var(--r));
  width: calc(30 * var(--r));
  transform: translateY(-50%) translateX(10px);
  border-radius: calc(1.5 * var(--r));
  background: #fff;
  color: #000;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease-in-out, transform .4s ease-in-out
}

.system_sect .cont .txt_cont.right .spe_box {
  left: auto;
  right: calc(100% + 3 * var(--r));
  transform: translateY(-50%) translateX(-10px)
}

.system_sect .cont .txt_cont.active .spe_box {
  opacity: 1;
  transform: translateY(-50%)
}

.system_sect .cont .txt_cont .spe_box .img {
  height: calc(17 * var(--r))
}

.system_sect .cont .txt_cont .spe_box .img img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.system_sect .cont .txt_cont .spe_box .txt_box {
  padding: calc(2.5 * var(--r)) calc(2.5 * var(--r)) calc(3 * var(--r))
}

.system_sect .cont .spe_box .tit_box {
  margin: 0 0 .6em;
  font-size: var(--tit5);
  font-weight: 700;
  line-height: 1.3
}

.system_sect .cont .spe_box .tit_box em {
  margin-left: .5em;
  font-style: normal;
  font-size: var(--txt3);
  font-weight: 500;
  color: var(--ring-c2, #4B69AD)
}

.system_sect .cont .spe_box .txt {
  margin: 0;
  font-size: var(--txt3);
  line-height: 1.5;
  color: #444
}

.system_sect .spe_box_wrap.mo_show {
  display: none
}
@media screen and (max-width:1240px) {
  .system_sect .cont .txt_cont .spe_box { display: none }
}
@media screen and (max-width:769px) {
  .system_sect .cont {
    display: none
  }

  .system_sect .spe_box_wrap.mo_show {
    display: block;
    margin-top: 40px;
    padding-bottom: 80px
  }

  .system_sect .spe_box_wrap .spe_box {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, .15)
  }

  .system_sect .spe_box_wrap .spe_box .num {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0;
    border-radius: 50%;
    background: var(--st-yellow);
    color: #000;
    font-size: 13px;
    font-weight: 700
  }

  .system_sect .spe_box_wrap .spe_box .tit_box {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700
  }

  .system_sect .spe_box_wrap .spe_box .tit_box em {
    margin-left: 6px;
    font-style: normal;
    font-size: 13px;
    color: var(--ring-a, #A7C8EF)
  }

  .system_sect .spe_box_wrap .spe_box .txt {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .85)
  }
}

/* 히어로 겹친 장면 — 레퍼 /ok-change-club .motion_box .img p×4 (margin-left -75/-50/-25/0rem · 왼쪽 200px 에서 들어옴) */
.st-visual>.img .layers { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: inherit }
.st-visual>.img .layers p { position: absolute; left: 50%; top: 18%; bottom: 0; width: calc(36 * var(--r)); margin: 0; border-radius: calc(18 * var(--r)) calc(18 * var(--r)) 0 0; opacity: 0; transform: translateX(-200px); will-change: transform, opacity }
.st-visual>.img .layers p:nth-child(1) { margin-left: calc(-75 * var(--r)); z-index: 2; background: rgba(255, 255, 255, .18) }
.st-visual>.img .layers p:nth-child(2) { margin-left: calc(-50 * var(--r)); z-index: 3; background: rgba(255, 255, 255, .3) }
.st-visual>.img .layers p:nth-child(3) { margin-left: calc(-25 * var(--r)); z-index: 4; background: rgba(255, 255, 255, .45) }
.st-visual>.img .layers p:nth-child(4) { margin-left: 0; z-index: 5; background: rgba(255, 255, 255, .7) }
@media screen and (max-width: 1240px) {
  .st-visual>.img .layers p:nth-child(1) { margin-left: calc(-60 * var(--r)) }
  .st-visual>.img .layers p:nth-child(2) { margin-left: calc(-40 * var(--r)) }
  .st-visual>.img .layers p:nth-child(3) { margin-left: calc(-20 * var(--r)) }
}
@media screen and (max-width: 769px) {
  .st-visual>.img .layers p { width: calc(26 * var(--r)); transform: translateX(-10rem) }
  .st-visual>.img .layers p:nth-child(1) { margin-left: calc(-30 * var(--r)) }
  .st-visual>.img .layers p:nth-child(2) { margin-left: calc(-20 * var(--r)) }
  .st-visual>.img .layers p:nth-child(3) { margin-left: calc(-10 * var(--r)) }
}
@media (prefers-reduced-motion: reduce) { .st-visual>.img .layers p { opacity: 1; transform: none } }

/* ═══ 뷰티 스킨 — 데이터 'skin' => 'beauty' 인 페이지(덴페이스)만. body.st-skin-beauty (functions.php body_class)
       레퍼의 남색·노랑·주황을 모브 플럼 · 로즈 · 더스티 로즈로 바꾼다. 구조·연출 값은 그대로. ═══ */
body.st-skin-beauty {
  --st-blue: #5E3346;
  --st-yellow: #E3A1A6;
  --st-ph: #EFE3E2;
  --ring-a: #F0CFD1;
  --ring-b1: #7E4A5D;
  --ring-b2: #926377;
  --ring-y1: #E3A1A6;
  --ring-y2: #F6D4D6;
  --ring-glow: #F4BCC1;
  --ring-c1: #A57A89;
  --ring-c2: #B0697A
}
body.st-skin-beauty .sub_tit_box .tit { background-image: linear-gradient(90deg, #C27685 0%, #5E3346 50%, #C27685 100%) }
body.st-skin-beauty .st-visual>.img.is-empty { background-image: linear-gradient(135deg, #FBF1EF 0%, #EDC9CB 55%, #D9A7AE 100%) }
body.st-skin-beauty .st-visual .bg { background: #B56C7B }
body.st-skin-beauty .system_sect { background: var(--st-blue) }
body.st-skin-beauty .system_sect .bg { background: linear-gradient(180deg, #5E3346 0%, #2B141F 100%) }
body.st-skin-beauty .system_sect .sub_tit_box .tit2 span { background-image: linear-gradient(to right, #F6D4D6 50%, rgba(255, 255, 255, .25) 50%) }
body.st-skin-beauty .promise_sect .cont .img_box .img.is-empty { background: color-mix(in srgb, #EFE3E2, #5E3346 calc(var(--i) * 6%)) }
body.st-skin-beauty .promise_sect .cont .img_box .bg { background: linear-gradient(180deg, rgba(60, 25, 40, 0) 46.54%, rgba(60, 25, 40, .65) 80.96%) }
body.st-skin-beauty .marqee_sect .marqee_text p { color: rgba(94, 51, 70, .09) }
body.st-skin-beauty .info_sect .info_box { background: #FAF4F3 }
body.st-skin-beauty .info_sect .img_box .bar { background: #E7D8D7 }
body.st-skin-beauty .info_sect .sub_tit_box .tit2 span:before { background: #F4C9CC }
body.st-skin-beauty .seniar_sect .over { background: #C98B92 }
body.st-skin-beauty .seniar_sect2 .over { background: var(--st-blue) }
body.st-skin-beauty .need_sect .item_box .txt { background: #FBEFF0; color: #8E4A5C }
body.st-skin-beauty .system_sect .circles .item { background: rgba(227, 161, 166, 0) }

/* 왜 치과 — 세 항목 (.info_pts) */
.info_sect .info_pts { margin: calc(3 * var(--r)) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--lineColor) }
.info_sect .info_pts li { display: flex; gap: calc(2 * var(--r)); padding: calc(2.2 * var(--r)) 0; border-bottom: 1px solid var(--lineColor) }
.info_sect .info_pts .no { flex: none; font-size: var(--smTxt1); font-weight: 700; line-height: 1.9; color: var(--st-yellow) }
.info_sect .info_pts .t { margin: 0; font-size: var(--txt2); font-weight: 700; line-height: 1.5 }
.info_sect .info_pts .d { margin: .3em 0 0; font-size: var(--txt3); line-height: 1.6; color: #555 }
.seniar_sect .box .txt p.q + p.q { margin-top: calc(1 * var(--r)) }

/* 진행 — 세 단계 + 네 방향 (.st-process) */
.st-process { padding: var(--mainSectSmPd) 0 }
.st-process .sub_tit_box { text-align: center }
.st-process .pc-steps, .st-process .pc-dirs { display: grid; gap: calc(2.4 * var(--r)); margin: 0; padding: 0; list-style: none }
.st-process .pc-steps { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.st-process .pc-dirs { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.st-process li { padding: calc(4 * var(--r)) calc(3.2 * var(--r)); border-radius: var(--radius4); background: #F5F6F7; opacity: 0; transform: translateY(var(--aniY)); transition: opacity 1s ease calc(var(--k) * .15s), transform 1s ease calc(var(--k) * .15s) }
.st-process [data-story-seq].active li { opacity: 1; transform: unset }
.st-process .no { display: inline-block; padding: .5em 1em; border-radius: 10rem; background: var(--st-blue); color: #fff; font-size: var(--smTxt1); font-weight: 700; line-height: 1 }
.st-process .t { margin: calc(2 * var(--r)) 0 0; font-size: var(--tit5); font-weight: 700; line-height: 1.4 }
.st-process .d { margin: calc(1.2 * var(--r)) 0 0; font-size: var(--txt3); line-height: 1.6; color: #555 }
.st-process .pc-sub { margin: calc(10 * var(--r)) 0 calc(3 * var(--r)); text-align: center; font-size: var(--txt1); font-weight: 700 }
.st-process .pc-dirs li { text-align: center; background: #fff; border: 1px solid var(--lineColor) }
.st-process .pc-dirs em { font-style: normal; font-size: var(--smTxt1); font-weight: 600; letter-spacing: .08em; color: var(--st-yellow) }
.st-process .pc-dirs .t { margin-top: calc(1 * var(--r)) }
.st-process .pc-note { margin: calc(4 * var(--r)) 0 0; text-align: center; font-size: var(--txt3); color: #666 }
body.st-skin-beauty .st-process .pc-steps li { background: #FAF4F3 }
@media (prefers-reduced-motion: reduce) { .st-process li { opacity: 1; transform: none } }
@media screen and (max-width: 1000px) {
  .st-process .pc-steps { grid-template-columns: minmax(0, 1fr) }
  .st-process .pc-dirs { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media screen and (max-width: 769px) {
  .st-process li { padding: 22px 18px }
  .st-process .pc-sub { margin-top: 50px }
}
body.st-skin-beauty .oknone .img_box li p.is-empty,
body.st-skin-beauty .oknone .txt_wrap .img_box.mo_show.is-empty { background: color-mix(in srgb, #EFE3E2, #5E3346 calc(var(--i) * 8%)) }
/* 자주 묻는 질문 — 사이트 공통 파랑 대신 스킨 색(열린 칸) */
body.st-skin-beauty .faq-row.is-open { background: var(--st-blue) }
body.st-skin-beauty .faq-q .tit::before { color: #B0697A }
body.st-skin-beauty .faq-row.is-open .faq-q .tit::before { color: #F6D4D6 }
body.st-skin-beauty .faq-row.is-open .faq-ico { color: var(--st-blue) }

/* ═══ 프로그램 링(밝은 띠) — 레퍼 /ok-change-club .system_sect 규칙을 그대로 옮겼다(parts/story/club.php).
       선택자 .system_sect → .club_sys, .okclub_page .system_sect → .club_sys.club_sys(레퍼 특이도 유지), rem → var(--r),
       파랑 계열 → 로즈·모브(스킨), 링 선 이미지(img) → 아래 CSS 원. 이야기 페이지 어두운 띠(.system_sect)와 따로 논다. ═══ */
.club_sys {
  --club-blue: var(--st-blue);
  --club-yellow: var(--st-yellow);
  --circle-fill: var(--st-blue);
  --txt0: max(calc(2.2 * var(--r)), 22px);
  --txt4: max(calc(1.5 * var(--r)), 15px);
  --serif: "Noto Serif KR", serif
}
.club_sys {position: relative; padding-top:var(--mainSectSmPd);overflow: hidden; transition: background 0.3s ease-in-out 0.3s}
/* 2026-09-22 위 색 면(사진)에서 넘어올 때 흰 바탕이 뚝 끊겨 보여서, 섹션 위쪽을 연한 분홍에서 흰색으로 흘린다.
   아래쪽 그라데이션(.bg)은 스크롤에 따라 따로 덮인다. */
.club_sys .bg {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(180deg, #FBF3F3 0%, #EBD5D8 100%); z-index: 2; opacity: 0;}
.club_sys .in {z-index: 3}
.club_sys .main_tit_box {text-align: center;}
.club_sys .cont {margin: calc(10 * var(--r)) auto 0; position: relative; width: calc(90 * var(--r)); transform: translateY(20%); z-index: 3}
.club_sys .cont .cir_wrap {padding-top: 100%; transition: transform 0.5s linear;}
.club_sys .cont .cir_wrap .cir_line {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.club_sys .cont .cir_wrap .cir_line img {width: 100%;}
.club_sys .cont .cir_wrap .cir_bg {position: absolute; left: 50%; top: 50%; width: 85%; height: 85%; transform: translate(-50%,-50%) ;background: radial-gradient(circle,rgba(240, 222, 224, 1) 10%, rgba(255, 255, 255, 1) 100%); border-radius: 50%;}
.club_sys .cont .cir_wrap .active_cir {position: absolute;right: 16%;bottom: 64%;background: radial-gradient(circle, rgba(227, 161, 166, 1) 0%, rgb(214 128 141) 100%);width: calc(2 * var(--r));height: calc(2 * var(--r));border-radius: 50%;box-shadow: 0 0 15px 5px rgb(6 174 255 / 41%);}
.club_sys .cont .light_txt {font-size: calc(11 * var(--r)); font-weight: 700; color: #fff; position: absolute; left: 50%; bottom: 24%; transform: translateX(-50%);color: #fff;}
.club_sys .cont .light_txt::after {content: attr(data-text);position: absolute;top: 0; left: 0;width: 100%; height: 100%;color: transparent;text-shadow: 0 0 12px rgba(255,255,255,0.9);pointer-events: none;}
.club_sys .cont .light_txt span {transition:  0.3s ease-in-out;}
.club_sys .cont .light_txt .copy_txt {position: absolute; left: 0; top: 0; width: 100%; height: 100%; font-size: 1em; color: #fff; z-index: 2;}
.club_sys .cont .light_txt .copy_txt span {opacity: 0;  transition: opacity 0.3s ease-in-out}
.club_sys .cont.num1 .cir_wrap {transform: rotate(-170deg);}
.club_sys .cont.num1 .light_txt .copy_txt span.num1 {background: linear-gradient(61deg, #E3A1A6 -2.56%, #C27685 45.81%, #E3A1A6 94.18%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent; text-shadow:0 0 10px rgba(33,150,243,0.8),0 0 3px rgba(33,150,243,0.6); opacity: 1;;}
.club_sys .cont.num2 .cir_wrap {transform: rotate(-135deg);}
.club_sys .cont.num2 .light_txt .copy_txt span.num2 {background: linear-gradient(61deg, #E3A1A6 -2.56%, #C27685 45.81%, #E3A1A6 94.18%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent; text-shadow:0 0 10px rgba(33,150,243,0.8),0 0 3px rgba(33,150,243,0.6); opacity: 1;;}
.club_sys .cont.num3 .cir_wrap {transform: rotate(-100deg);}
.club_sys .cont.num3 .light_txt .copy_txt span.num3 {background: linear-gradient(61deg, #E3A1A6 -2.56%, #C27685 45.81%, #E3A1A6 94.18%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent; text-shadow:0 0 10px rgba(33,150,243,0.8),0 0 3px rgba(33,150,243,0.6); opacity: 1;;}
.club_sys .cont.num4 .cir_wrap {transform: rotate(-35deg);}
.club_sys .cont.num4 .light_txt .copy_txt span.num4 {background: linear-gradient(61deg, #E3A1A6 -2.56%, #C27685 45.81%, #E3A1A6 94.18%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent; text-shadow:0 0 10px rgba(33,150,243,0.8),0 0 3px rgba(33,150,243,0.6); opacity: 1;;}
.club_sys .cont.num5 .cir_wrap {transform: rotate(0deg);}
.club_sys .cont.num5 .light_txt .copy_txt span.num5 {background: linear-gradient(61deg, #E3A1A6 -2.56%, #C27685 45.81%, #E3A1A6 94.18%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent; text-shadow:0 0 10px rgba(33,150,243,0.8),0 0 3px rgba(33,150,243,0.6); opacity: 1;;}
.club_sys .cont.num6 .cir_wrap {transform: rotate(35deg);}
.club_sys .cont.num6 .light_txt .copy_txt span.num6 {background: linear-gradient(61deg, #E3A1A6 -2.56%, #C27685 45.81%, #E3A1A6 94.18%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent; text-shadow:0 0 10px rgba(33,150,243,0.8),0 0 3px rgba(33,150,243,0.6); opacity: 1;;}
.club_sys .cont.type2.num3 .cir_wrap {transform: rotate(-67.5deg);}
.club_sys .cont.type2.num3 .light_txt .copy_txt span.num3 {background: linear-gradient(61deg, #E3A1A6 -2.56%, #C27685 45.81%, #E3A1A6 94.18%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent; text-shadow:0 0 10px rgba(33,150,243,0.8),0 0 3px rgba(33,150,243,0.6); opacity: 1;;}
.club_sys .cont.type2.num4 .cir_wrap {transform: rotate(0deg);}
.club_sys .cont.type2.num4 .light_txt .copy_txt span.num4 {background: linear-gradient(61deg, #E3A1A6 -2.56%, #C27685 45.81%, #E3A1A6 94.18%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent; text-shadow:0 0 10px rgba(33,150,243,0.8),0 0 3px rgba(33,150,243,0.6); opacity: 1;;}
.club_sys .cont .txt_wrap {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.club_sys .cont .txt_wrap .txt_cont {position: absolute;}
.club_sys .cont .txt_wrap .txt_cont .num_txt {color: rgba(0,0,0,0.2); font-weight: 700; font-size: var(--tit3); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: color 0.3s ease-in-out;}
.club_sys .cont .txt_wrap .txt_cont .num_txt .num {font-size: var(--txt1); width: 2.5em; height: 2.5em; line-height: 1; background-color: #fff; color: rgba(0,0,0,0.2); font-weight: 700; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: color 0.3s ease-in-out , background-color 0.3s ease-in-out;}
.club_sys .cont.type2 .txt_wrap .txt_cont .num_txt {line-height: 1.3; text-align: center;}
.club_sys .cont.type2 .txt_wrap .txt_cont .num_txt .num {margin-bottom: 0.5em;}
.club_sys .cont .spe_box {position: absolute; bottom:-20%; width: 20em; opacity: 0; pointer-events: none; transition: 0.3s ease-in-out;}
.club_sys .cont .spe_box .img {position: relative; width: 100%; padding-top: 56%; border-radius: calc(2 * var(--r)) calc(2 * var(--r)) 0 0; overflow: hidden;}
.club_sys .cont .spe_box .img img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;}
.club_sys .cont .spe_box .txt_box {position: relative; padding: calc(2 * var(--r)) calc(3 * var(--r)) calc(4 * var(--r)); background-color: #fff; border-radius: 0 0 calc(2 * var(--r)) calc(2 * var(--r));}
.club_sys .cont .spe_box .txt_box .tit_box {display: flex; align-items: center;}
.club_sys .cont .spe_box .txt_box .tit_box .tit {font-size: var(--tit5); font-weight: 700;}
.club_sys .cont .spe_box .txt_box .tit_box .en {font-size: var(--txt1); font-weight: 600; color: #B9A8AD; margin-left: calc(1 * var(--r));}
.club_sys .cont .spe_box .txt_box .tit_box .en span {color: #B0697A;}
.club_sys .cont .spe_box .txt_box .txt {margin-top: calc(1 * var(--r));}
.club_sys .cont.type2 .spe_box .txt_box .tit_box .tit {line-height: 1.3; margin-top: 0.5em;}
@media (min-width:1201px) { .club_sys .cont.type2 .spe_box .txt_box .tit_box .tit {font-size: max(18px, calc(2.5*var(--r3)));} } /* 21 → 줄 제목 단계 20 */
@media (min-width:1201px) { .club_sys.club_sys .cont.type2 .spe_box .serif_txt {font-size: 17px;} }
@media (min-width:1201px) { .club_sys .cont.type2 .txt_wrap .txt_cont .spe_box .txt_box .txt {font-size: var(--txt2);} } /* 2026-09-21 15px → 본문 16 */
.club_sys .cont .txt_wrap .txt_cont.left .spe_box {left: 0; transform: translate(-100%,0%);}
.club_sys .cont .txt_wrap .txt_cont.right .spe_box {right: 0; transform: translate(100%,0%);}
.club_sys .cont .txt_wrap .txt_cont .spe_box::before {content:none; position: absolute; bottom: calc(0.5 * var(--r)); transform: rotate(180deg) translateY(-90%) ;width: calc(3 * var(--r)); height: calc(3 * var(--r)); font-size: var(--txt1);background: none no-repeat center / contain}
.club_sys .cont .txt_wrap .txt_cont.left .spe_box::before {right:1.2em;}
.club_sys .cont .txt_wrap .txt_cont.right .spe_box::before {left:1.2em;}
.club_sys .cont .spe_box_wrap {display: none;}
.club_sys .cont .txt_wrap .txt_cont.active {z-index: 5;}
.club_sys .cont .txt_wrap .txt_cont.active .spe_box {opacity: 1; pointer-events: visible;}
.club_sys .cont .txt_wrap .txt_cont.active.left .spe_box {left: calc(-4 * var(--r));}
.club_sys .cont .txt_wrap .txt_cont.active.right .spe_box {right:calc(-4 * var(--r));}
.club_sys .cont .txt_wrap .txt_cont.active .num_txt {color: var(--black);}
.club_sys .cont .txt_wrap .txt_cont.active .num_txt .num {color: #fff; background-color: #B0697A;}
.club_sys .cont .txt_wrap .txt_cont.num1 {left: -15% ;bottom: 35%;}
.club_sys .cont .txt_wrap .txt_cont.num2 {left: -11% ;top: 17%;}
.club_sys .cont .txt_wrap .txt_cont.num3 {left: 15% ;top: -9%;}
.club_sys .cont .txt_wrap .txt_cont.num6 {right: -15% ;bottom: 35%;}
.club_sys .cont .txt_wrap .txt_cont.num5 {right: -11% ;top: 17%;}
.club_sys .cont .txt_wrap .txt_cont.num4 {right: 15% ;top: -9%;}
.club_sys {background-color: var(--club-blue);}
.club_sys .bg {background: linear-gradient(180deg, #5E3346 0%, #030F23 100%); top:inherit; bottom:0; height: 100vh;}
.club_sys .sub_tit_box .tit2 {text-align: center; ;}
.club_sys .sub_tit_box .tit2 span {background: linear-gradient(to right, #FFCD2A 50%, rgba(255,255,255,0.3) 50%);background-size: 200% 100%;background-position-x: 100%;color: transparent;background-clip: text;-webkit-background-clip: text;display: inline;}
.club_sys .circles {position: relative; display: flex; padding:calc(30 * var(--r)) calc(3 * var(--r));}
.club_sys .circles .item {position:relative; padding-top: calc(100%/3 + calc(4 * var(--r))); width:calc(100%/3 + calc(4 * var(--r))); background:rgba(243, 185, 0, 0);  border-radius:100%; border:1px solid #F3B900; opacity:1;}
.club_sys .circles .item dl {position:absolute; top: 0; left: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; color:var(--club-yellow); font-weight:700;}
.club_sys .circles .item dl dt {margin:0; font-size:var(--txt1); display:flex; align-items:center; gap:calc(0.8 * var(--r));}
.club_sys .circles .item dl dt:before {content:''; width:4px; height:4px; border-radius:100%; background:var(--club-yellow);}
.club_sys .circles .item dl dt:after {content:''; width:4px; height:4px; border-radius:100%; background:var(--club-yellow);}
.club_sys .circles .item dl dd {margin:0; font-size:calc(6 * var(--r));} /* 2026-09-21 margin:0 — <dd> 기본 여백 40px 때문에 글자가 원 중심에서 20px 밀려 있었다 */
.club_sys .circles .item:nth-child(2) {margin: 0 calc(-6 * var(--r));}
.club_sys .circles .last_item {position: absolute; color:#fff; font-size:calc(5 * var(--r)); font-weight:700; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0;}
.club_sys .main_tit_box {color:#fff;}
.club_sys .main_tit_box .tit {font-size:var(--subH0);  margin-bottom: calc(8 * var(--r)); font-weight:700;  line-height: 1.4;}
.club_sys .main_tit_box .txt {font-size:max(17px, calc(2.5*var(--r3))); margin-bottom: calc(3 * var(--r)); font-weight:700}
.club_sys .main_tit_box .txt2 {font-size:var(--txt2);}
.club_sys.club_sys {background: linear-gradient(180deg, #EFE3E2 0, #FFF calc(70 * var(--r)), #FFF 22.56%, #F4E6E7 61.28%, #EBD5D8 100%);} /* 2026-09-22 맨 위를 윗 섹션 색에서 흘려 내려 경계선을 없앴다 */
.club_sys.club_sys .sub_tit_box .tit2 span {background: linear-gradient(to right, #C27685 50%, #5E3346 50%);background-size: 200% 100%;background-position-x: 100%;color: transparent;background-clip: text;-webkit-background-clip: text;display: inline;}
.club_sys.club_sys .bg {background: linear-gradient(180deg, #FBF3F3 0%, #EBD5D8 100%); top:inherit; bottom:0; height: 100vh;}
.club_sys.club_sys .circles .item {border-color:#C27685; background:rgba(194, 118, 133, 0);}
.club_sys.club_sys .circles .item dl {color:#5E3346;}
.club_sys.club_sys .circles .item dl dt:before, .club_sys.club_sys .circles .item dl dt:after {background-color: #5E3346;}
.club_sys.club_sys .main_tit_box {color:var(--black);} /* 2026-09-21 #000 → 사이트 제목색 */
.club_sys.club_sys .main_tit_box .txt2 {color:var(--primary);}
.club_sys.club_sys .cont {transform: translateY(40%); margin-top: calc(-10 * var(--r));}
.club_sys.club_sys .cont .light_txt {white-space: nowrap; bottom: 40%;}
.club_sys.club_sys .cont .spe_box .txt_box {padding-top: calc(3.2 * var(--r));}
.club_sys.club_sys .cont .spe_box {width: 22em;}
.club_sys.club_sys .cont .txt_wrap .txt_cont.active.num3 .spe_box {left:calc(-8 * var(--r));}
.club_sys.club_sys .cont .txt_wrap .txt_cont.active.num4 .spe_box {right:calc(-8 * var(--r));}
.club_sys.club_sys .spe_box .badge {font-size: var(--smTxt1); width:max-content; background-color: var(--club-blue); color:#fff; margin-bottom: calc(0.3 * var(--r)); font-weight: 700; border-radius: calc(10 * var(--r)); line-height: 1; padding: 0.7em 1em; border-radius: calc(10 * var(--r));}
.club_sys.club_sys .spe_box .serif_txt {font-family: var(--serif); font-size:var(--txt0); font-weight: 600; margin-top: calc(2 * var(--r));}
.club_sys.club_sys .spe_box .btm_txt_box {margin-top: calc(2.4 * var(--r));}
.club_sys.club_sys .spe_box .btm_txt_box .txt {font-size:var(--txt2); font-weight: 700;} /* 15 → 본문 16 · 모바일 13 → 14 */
.club_sys.club_sys .spe_box .btm_txt_box .txt_list {margin-top:calc(0.5 * var(--r));}
.club_sys.club_sys .spe_box .btm_txt_box .txt_list .txt {position:relative; font-size:var(--txt2) !important; color:var(--primary); padding-left: 0.5em; font-weight: 400; margin-top: 0;}
.club_sys.club_sys .spe_box .btm_txt_box .txt_list .txt:before {content:'·';position: absolute; left: 0;}
.club_sys.club_sys .cont.type2 .spe_box .badge {max-width: 100%;}
.club_sys.club_sys .cont.type2 .txt_wrap .txt_cont.num3 .spe_box {bottom: -40%; left: 50% !important; transform: translateX(-50%);}
.club_sys.club_sys .cont.type2 .txt_wrap .txt_cont.active.num3 .spe_box {bottom: -20%;}
.club_sys.club_sys .cont .txt_wrap .txt_cont.num2 {top:22%;}
.club_sys.club_sys .cont .txt_wrap .txt_cont.num3 {top: -8%; left: 14%;}
.club_sys.club_sys .cont .txt_wrap .txt_cont.num4 {top: -8%; right: 14%;}
.club_sys.club_sys .cont .txt_wrap .txt_cont.num5 {top:22%;}
.club_sys.club_sys .cont.type2 .txt_wrap .txt_cont.num2 {left: -19%;}
.club_sys.club_sys .cont.type2 .txt_wrap .txt_cont.num3 {top: -18%; left: calc(50% - 91px);}
.club_sys.club_sys .cont.type2 .txt_wrap .txt_cont.num4 {top: 22%; right: -19%;}
@media (max-width: 1640px) { .club_sys .cont {width: calc(70 * var(--r));} }
@media (max-width: 1640px) { .club_sys .cont .txt_wrap .txt_cont.num3, .club_sys .cont .txt_wrap .txt_cont.num4 {top: -15%;} }
@media (max-width: 1640px) { .club_sys .cont .txt_wrap .txt_cont.num2 {left: -17%;} }
@media (max-width: 1640px) { .club_sys .cont .txt_wrap .txt_cont.num5 {right: -17%;} }
@media (max-width: 1640px) { .club_sys .cont .txt_wrap .txt_cont.num1 {left: -20%;} }
@media (max-width: 1640px) { .club_sys .cont .txt_wrap .txt_cont.num6 {right: -20%;} }
@media (max-width: 1640px) { .club_sys .cont .light_txt {font-size: calc(8 * var(--r));} }
@media (max-width: 1640px) { .club_sys .cont .txt_wrap .txt_cont .spe_box .txt_box {padding: calc(2 * var(--r)) calc(2.5 * var(--r)) calc(3 * var(--r));} }
@media (max-width: 1640px) { .club_sys .cont .txt_wrap .txt_cont .spe_box .txt_box .tit_box .en {font-size:var(--txt2); line-height: 1.2;} }
@media (max-width: 1640px) { .club_sys .cont .txt_wrap .txt_cont.num3.left.active .spe_box {left: calc(-8 * var(--r));} }
@media (max-width: 1640px) { .club_sys .cont .txt_wrap .txt_cont.num4.right.active .spe_box {right: calc(-8 * var(--r));} }
@media (max-width: 1640px) { .club_sys.club_sys .cont .txt_wrap .txt_cont.num2 {left: -14%;} }
@media (max-width: 1640px) { .club_sys.club_sys .cont .txt_wrap .txt_cont.num5 {right: -14%;} }
@media (max-width: 1640px) { .club_sys.club_sys .cont .txt_wrap .txt_cont.num3, .club_sys.club_sys .cont .txt_wrap .txt_cont.num4 {top: -14%;} }
@media (max-width: 1640px) { .club_sys.club_sys .cont .txt_wrap .txt_cont.num3 {left: 10%;} }
@media (max-width: 1640px) { .club_sys.club_sys .cont .txt_wrap .txt_cont.num4 {right: 10%;} }
@media (max-width: 1640px) { .club_sys.club_sys .cont .txt_wrap .txt_cont.active.num3 .spe_box {left: calc(-10 * var(--r));} }
@media (max-width: 1640px) { .club_sys.club_sys .cont .txt_wrap .txt_cont.active.num4 .spe_box {right: calc(-10 * var(--r));} }
@media (max-width: 1640px) { .club_sys.club_sys .cont.type2 .txt_wrap .txt_cont.num2 {left: -24%;} }
@media (max-width: 1640px) { .club_sys.club_sys .cont.type2 .txt_wrap .txt_cont.num3 {top: -22%;} }
@media (max-width: 1640px) { .club_sys.club_sys .cont.type2 .txt_wrap .txt_cont.num4 {right: -24%;} }
@media (max-width: 1440px) { .club_sys .cont {width: calc(58 * var(--r));} }
@media (max-width: 1440px) { .club_sys .cont .txt_wrap .txt_cont .spe_box {width: 18em;} }
@media (max-width: 1440px) { .club_sys .cont .light_txt {font-size:calc(7 * var(--r));} }
@media (max-width: 1440px) { .club_sys.club_sys .cont.type2 .txt_wrap .txt_cont.num2 {left: -30%;} }
@media (max-width: 1440px) { .club_sys.club_sys .cont.type2 .txt_wrap .txt_cont.num3 {top: -27%;} }
@media (max-width: 1440px) { .club_sys.club_sys .cont.type2 .txt_wrap .txt_cont.num4 {right: -30%;} }
@media (max-width: 1200px) { .club_sys .cont {width: calc(65 * var(--r)); transform: translateY(24%); margin-top: calc(45 * var(--r));} }
@media (max-width: 1200px) { .club_sys .cont .txt_wrap .txt_cont .spe_box {display: none;} }
@media (max-width: 1200px) { .club_sys .cont .spe_box_wrap {display: block;  position: absolute;top: calc(-55 * var(--r)); left: 50%; transform: translateX(-50%);} }
@media (max-width: 1200px) { .club_sys .cont .spe_box_wrap .spe_box {bottom: unset; left: 50%; transform: translateX(-50%);} }
@media (max-width: 1200px) { .club_sys .cont .spe_box_wrap .spe_box.active {opacity: 1;} }
@media (max-width: 1200px) { .club_sys .cont .spe_box .txt_box {padding: 18px 25px 20px;} }
@media (max-width: 1200px) { .club_sys .cont .spe_box .txt_box .txt {margin-top:0;} }
@media (max-width: 1200px) { .club_sys.club_sys {padding-bottom: var(--sectPd3);} }
@media (max-width: 1200px) { .club_sys .cir_wrap, .club_sys.club_sys .cont .light_txt {display: none;} }
@media (max-width: 1200px) { .club_sys.club_sys .cont .txt_wrap .txt_cont {display: none;} }
@media (max-width: 1200px) { .club_sys.club_sys .cont {width: 100%; margin-top: calc(5 * var(--r)); transform: translateY(0);} }
@media (max-width: 1200px) { .club_sys.club_sys .cont .txt_wrap {position: relative;} }
@media (max-width: 1200px) { .club_sys.club_sys .cont .spe_box_wrap {position: relative; display: flex; top: 0; transform: unset; left: 0; padding: 0 var(--inPd); overflow-x:auto;  -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; scroll-padding-left:16px; overscroll-behavior-x:contain; scroll-behavior:smooth;} }
@media (max-width: 1200px) { .club_sys.club_sys .cont .spe_box_wrap::-webkit-scrollbar {display: none;} }
@media (max-width: 1200px) { .club_sys.club_sys .cont .spe_box {position: relative;opacity: 1; left: 0; transform: unset; width: 360px; flex-shrink: 0;  scroll-snap-align:start; scroll-snap-stop:always; background:#fff; border-radius: calc(2 * var(--r));} }
@media (max-width: 1200px) { .club_sys.club_sys .main_tit_box .tit {margin-bottom: calc(5 * var(--r));} }
@media (max-width: 1200px) { .club_sys.club_sys .cont .spe_box + .spe_box {margin-left: calc(3 * var(--r));} }
@media (max-width: 1200px) { .club_sys.club_sys .cont .spe_box .txt_box {} }
@media (max-width: 1200px) { .club_sys.club_sys .cont .spe_box .txt_box {padding-top: 30px; padding-bottom: 30px;} }
@media (max-width: 769px) { .club_sys .cont {width: calc(62 * var(--r)); margin-top: calc(50 * var(--r));} }
@media (max-width: 769px) { .club_sys .cont .spe_box_wrap {top:calc(-60 * var(--r));} }
@media (max-width: 769px) { .club_sys .cont .spe_box .txt_box .tit_box .en {font-size: var(--txt2);} }
@media (max-width: 769px) { .club_sys .cont .txt_wrap .txt_cont .num_txt {font-size:0;} }
@media (max-width: 769px) { .club_sys .cont .txt_wrap .txt_cont.num1 {left: -15%} }
@media (max-width: 769px) { .club_sys .cont .txt_wrap .txt_cont.num6 {right: -15%} }
@media (max-width: 769px) { .club_sys .cont .txt_wrap .txt_cont.num2 {left: -10%;} }
@media (max-width: 769px) { .club_sys .cont .txt_wrap .txt_cont.num5 {right: -10%;} }
@media (max-width: 769px) { .club_sys .cont .txt_wrap .txt_cont.num3, .club_sys .cont .txt_wrap .txt_cont.num4 {top: -10%;} }
@media (max-width: 769px) { .club_sys .circles {padding: 60px 0;} }
@media (max-width: 769px) { .club_sys .circles .item {padding-top: calc(100%/3 + 5px); width:calc(100%/3 + 15px); height: 0;} }
@media (max-width: 769px) { .club_sys .circles .item:nth-child(2) {margin: 0 -10px;} }
@media (max-width: 769px) { .club_sys .circles .item dl dd {font-size:30px;} }
@media (max-width: 769px) { .club_sys .main_tit_box .tit {margin-bottom: 30px;} }
@media (max-width: 769px) { .club_sys.club_sys .spe_box .badge {margin-bottom:5px;} }
@media (max-width: 600px) { .club_sys .cont {width: 235px;} }
@media (max-width: 600px) { .club_sys .main_tit_box .tit {margin-bottom:20px;} }
@media (max-width: 600px) { .club_sys .main_tit_box .txt {margin-bottom: 10px;} }
@media (max-width: 600px) { .club_sys .main_tit_box .txt br, .club_sys .main_tit_box .txt2 br {display: none;} }
@media (max-width: 600px) { .club_sys .cont .light_txt {font-size: 28px;} }
@media (max-width: 600px) { .club_sys .cont .txt_wrap .txt_cont .num_txt .num {font-size: 12px; line-height: 1;} }
@media (max-width: 600px) { .club_sys .cont {margin-top: 310px;} }
@media (max-width: 600px) { .club_sys .cont .spe_box_wrap {top: -325px;} }
@media (max-width: 600px) { .club_sys .cont .cir_wrap .active_cir {width: 8px; height: 8px;} }
@media (max-width: 600px) { .club_sys .cont .txt_wrap .txt_cont.num3, .club_sys .cont .txt_wrap .txt_cont.num4 {top: -19%;} }
@media (max-width: 600px) { .club_sys .cont .spe_box .txt_box .txt {line-height: 1.5;} }
@media (max-width: 600px) { .club_sys .cont .spe_box .txt_box {padding: 16px 20px 18px;} }
@media (max-width: 600px) { .club_sys .cont .txt_wrap .txt_cont.num1 {left: -17%;} }
@media (max-width: 600px) { .club_sys .cont .txt_wrap .txt_cont.num6 {right: -17%} }
@media (max-width: 600px) { .club_sys .cont .txt_wrap .txt_cont.num2 {top: 14%; left: -9%;} }
@media (max-width: 600px) { .club_sys .cont .txt_wrap .txt_cont.num5 {top: 14%; right: -9%;} }
@media (max-width: 600px) { .club_sys .cont .txt_wrap .txt_cont.num3, .club_sys .cont .txt_wrap .txt_cont.num4 {top: -11%;} }
@media (max-width: 600px) { .club_sys .circles .item dl dt {font-size:13px;} }
@media (max-width: 600px) { .club_sys .circles .item dl dd {font-size:20px;} }
@media (max-width: 600px) { .club_sys .circles .last_item {font-size:20px;} }
@media (max-width: 600px) { .club_sys.club_sys .main_tit_box .tit br {display:none;} }
@media (max-width: 600px) { .club_sys.club_sys .cont .spe_box {width:320px;} }
.club_sys .cont .cir_wrap { position: relative }
.club_sys .cont .cir_wrap .cir_line { border-radius: 50%; background: conic-gradient(from 200deg, rgba(194, 118, 133, 0) 0deg, #C27685 300deg, rgba(194, 118, 133, 0) 360deg); -webkit-mask: radial-gradient(circle, transparent calc(50% - 2px), #000 calc(50% - 1px)); mask: radial-gradient(circle, transparent calc(50% - 2px), #000 calc(50% - 1px)) }
.club_sys .cont .cir_wrap .cir_bg { border-radius: 50% }
.club_sys .cont .cir_wrap .active_cir { border-radius: 50% }
.club_sys .cont .light_txt span { background: linear-gradient(61deg, #E3A1A6 -2.56%, #C27685 45.81%, #E3A1A6 94.18%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent }
.club_sys .spe_box .img.is-empty { background: color-mix(in srgb, #EFE3E2, #5E3346 8%) }
.club_sys .cont .txt_wrap .txt_cont .num_txt { cursor: pointer }
.club_sys .in { position: relative } /* 레퍼 common.css .in 은 relative — 없으면 .bg(z2) 가 제목을 덮는다 */
/* 레퍼 목록은 ::before 가운뎃점만 쓴다 — 테마 기본 불릿·들여쓰기 제거 */
.club_sys .spe_box .txt_list { margin: 0; padding: 0; list-style: none }
/* 레퍼 need_sect 는 위 여백 0(앞 섹션 아래 여백에 기댄다). 여기선 앞이 여백 없는 사진 스택이라 벌려 준다 */
.oknone_sect + .need_sect { padding-top: var(--sectPd) }