@charset "UTF-8";
/* ============================================================
 * 반짝이는 우리 아이 — 더 좋은 양육 캠페인 시즌 4  [PC]
 * source : assets/_dev/2026/scss/strength/strength_web.scss  (git 제외 dev 소스)
 * out    : assets/css/campaign/strength/strength.css
 * 페이지 : /strength.gn (SignCampaignController, device 분기)
 *          → views/web/microSite/campaign/strength/strength.jsp
 * 기준   : [PC]_양육캠페인.psd (1920x12095)
 *          타이포/쉐도우/라운드 = PSD 레이어 값 그대로 (단일행 텍스트 line-height:1)
 *          absolute 요소 = 컨테이너 중앙 기준 사분면 앵커 (좌상 left/top · 우상 right/top ·
 *          좌하 left/bottom · 우하 right/bottom, 폭 가변 텍스트는 y만)
 * 단위   : 1920 아트보드 fluid rem (1rem = 10px @1920)
 * 아이콘 : ico-star(type1 라인별/type2 채움별/type3 십자) · ico-clip — 이미지 컷 대기
 * ============================================================ */
@font-face {
  font-family: "PyeongChangPeace-Bold";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/PyeongChangPeace-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Katuri";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_13@1.0/Katuri.woff") format("woff");
  font-weight: normal;
  font-display: swap;
}
/* 나눔스퀘어 네오 — 정본 스태틱 TTF 웨이트별 (눈누 Variable 배포본은 글립이 라운드체라 폐기) */
@font-face {
  font-family: "NanumSquareNeo";
  src: url("https://cdn.jsdelivr.net/gh/moonspam/NanumSquareNeo@1.0/NanumSquareNeoTTF-bRg.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "NanumSquareNeo";
  src: url("https://cdn.jsdelivr.net/gh/moonspam/NanumSquareNeo@1.0/NanumSquareNeoTTF-cBd.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "NanumSquareNeo";
  src: url("https://cdn.jsdelivr.net/gh/moonspam/NanumSquareNeo@1.0/NanumSquareNeoTTF-dEb.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "NanumSquareNeo";
  src: url("https://cdn.jsdelivr.net/gh/moonspam/NanumSquareNeo@1.0/NanumSquareNeoTTF-eHv.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}
/* ── 팔레트 (PSD) ── */
/* ── PSD 레이어 스타일 (쉐도우) ── */
/* ── 모눈종이 패턴 (PSD PatternOverlay, 캡처 실측: 10.75px 셀 / #FFF7F7 라인) ── */
/* ── 1920 fluid rem ── */
html {
  font-size: 0.5208333333vw;
}
@media (min-width: 1920px) {
  html {
    font-size: 10px;
  }
}
@media (max-width: 1280px) {
  html {
    font-size: 6.667px;
  }
}

/* ── 베이스 ── */
.str-wrap {
  overflow: clip;
  background: #fff;
  min-width: 1280px;
  font-family: "NanumSquareNeo", sans-serif;
  color: #221F1F;
  letter-spacing: -0.05em;
}
.str-wrap, .str-wrap * {
  box-sizing: border-box;
}
.str-wrap * {
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
}
.str-wrap [class^=img-box] {
  font-size: 0;
}
.str-wrap [class^=img-box] > img {
  width: 100%;
  display: block;
}
.str-wrap .hide-txt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.str-wrap .pyeong {
  font-family: "PyeongChangPeace-Bold", sans-serif;
  letter-spacing: 0;
}
.str-wrap .pyeong-img {
  display: inline-block;
  vertical-align: -1rem;
}
.str-wrap section {
  position: relative;
}
.str-wrap img {
  -webkit-user-drag: none;
}

.str-inner {
  position: relative;
  width: 100.4rem;
  margin: 0 auto;
}

/* 카드 호버 커스텀 커서 — 애니 webp 가 마우스 추적 (JS 생성) */
.str-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 12rem;
  z-index: 999;
  pointer-events: none;
  display: none;
}
.str-cursor img {
  width: 100%;
  display: block;
}

/* ── 공용 아이콘 ── */
.ico-star {
  position: absolute;
  display: block;
  background: no-repeat center/contain;
  animation: str-star-pulse 2.2s ease-in-out infinite;
}
.ico-star.type1 {
  background-image: url("https://cdn.gni.kr/assets/images/strength/ico/ico-star_type1.webp");
}
.ico-star.type2 {
  background-image: url("https://cdn.gni.kr/assets/images/strength/ico/ico-star_type2.webp");
}
.ico-star.type1.size3 {
  background-image: url("https://cdn.gni.kr/assets/images/strength/ico/ico_star_type01_size01.webp");
}
.ico-star.type1.size1 {
  width: 7rem;
  height: 7.3rem;
}
.ico-star.type1.size2 {
  width: 4.8rem;
  height: 5rem;
}
.ico-star.type1.size3 {
  width: 3.3rem;
  height: 3.5rem;
}
.ico-star.type2.size1 {
  width: 4.3rem;
  height: 4.6rem;
}
.ico-star.type2.size2 {
  width: 3rem;
  height: 3.2rem;
}
.ico-star.type2.size3 {
  width: 2rem;
  height: 2.2rem;
}
.ico-star.type3.size1 {
  width: 5.5rem;
  height: 5.5rem;
}
.ico-star.d1 {
  animation-delay: 0.4s;
}
.ico-star.d2 {
  animation-delay: 0.8s;
}
.ico-star.d3 {
  animation-delay: 1.2s;
}

.ico-clip {
  position: absolute;
  display: block;
  width: 6.3rem;
  height: 7.2rem;
  background: url("https://cdn.gni.kr/assets/images/strength/ico/ico_clip.webp") no-repeat center/contain;
}

.ico-refresh {
  display: block;
  width: 3rem;
  height: 2.5rem;
  background: url("https://cdn.gni.kr/assets/images/strength/ico/ico-refresh.webp") no-repeat center/contain;
}

/* ── 진입 모션 공통 ── */
.str-wrap .motion-fade-up {
  opacity: 0;
  transform: translateY(4rem);
  transition: opacity 0.84s cubic-bezier(0.4, 0, 0.2, 1), transform 0.84s cubic-bezier(0.4, 0, 0.2, 1);
}
.str-wrap .motion-scale-up {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.84s cubic-bezier(0.4, 0, 0.2, 1), transform 0.84s cubic-bezier(0.4, 0, 0.2, 1);
}
.str-wrap .motion-fade-up.motion-play {
  opacity: 1;
  transform: translateY(0);
}
.str-wrap .motion-scale-up.motion-play {
  opacity: 1;
  transform: scale(1);
}
.str-wrap {
  /* 풍선 — 좌측은 좌하단에서, 우측은 우하단에서 대각 슬라이드 인 (좌 먼저, 우는 .3s 뒤 — 하나~둘) */
}
.str-wrap .motion-balloon-l {
  opacity: 0;
  transform: translate(-4rem, 4rem);
  transition: opacity 0.84s cubic-bezier(0.4, 0, 0.2, 1), transform 0.84s cubic-bezier(0.4, 0, 0.2, 1);
}
.str-wrap .motion-balloon-r {
  opacity: 0;
  transform: translate(4rem, 4rem);
  transition: opacity 0.84s cubic-bezier(0.4, 0, 0.2, 1) 0.36s, transform 0.84s cubic-bezier(0.4, 0, 0.2, 1) 0.36s;
}
.str-wrap .motion-balloon-l.motion-play, .str-wrap .motion-balloon-r.motion-play {
  opacity: 1;
  transform: translate(0, 0);
}
.str-wrap {
  /* 슬라이드 인 후 둥실둥실 (div 는 진입 트랜지션, img 가 부유 — transform 충돌 방지) */
}
.str-wrap .motion-balloon-l.motion-play img {
  animation: str-float 3.8s ease-in-out 1s infinite;
}
.str-wrap .motion-balloon-r.motion-play img {
  animation: str-float 4.4s ease-in-out 1.5s infinite;
}
.str-wrap {
  /* 타이틀 마스크 리빌 — h2(오버플로 hidden) 안에서 내용 블록이 아래→위 (줄 단위) */
  /* 타이틀 크롭 리빌 — tl-line (★ 공통 컨벤션, 35letter 프로젝트에서 이식. CLAUDE.md 참조) */
}
.str-wrap .mt-hide {
  visibility: hidden;
}
.str-wrap .tl-line {
  display: block;
  overflow: hidden;
}
.str-wrap .tl-line.is-open {
  overflow: visible;
}
.str-wrap .tl-ch, .str-wrap .tl-in {
  display: inline-block;
}

body.str-notwinkle .mt-hide {
  visibility: visible;
}

/* 타이틀 색 강조부 — 리빌 동안 주변색(inherit), 리빌 완료(is-open) 후 원래 강조색으로 전환 */
.str-wrap .mt-text--line .green, .str-wrap .mt-text--line em {
  transition: color 0.5s ease 0.2s;
}
.str-wrap .mt-text--line .tl-line:not(.is-open) .green, .str-wrap .mt-text--line .tl-line:not(.is-open) em {
  color: inherit;
}

/* ── 리본 뱃지 — 3겹: 맨뒤 badge-t(img-box09) / 중간 badge-b(img-box08) / 맨앞 badge-txt ── */
/* 모두 가로 중앙 정렬. top/bottom 은 호출 측에서 지정. */
/* 모션 = 뱃지 묶음 통째로 y20 -> 0, alpha 0 -> 1 (.badge-play 시) */
/* ============================================================
 * SECTION 1 · 인트로 스포트라이트
 * ============================================================ */
.str-sec1 {
  height: 117.1rem;
  overflow: hidden;
}
.str-sec1__stage {
  position: relative;
  width: 192rem;
  height: 100%;
  margin: 0 auto;
}
.str-sec1__room {
  position: absolute;
  left: 0;
  top: 0;
  width: 192rem;
}
.str-sec1__room--after {
  opacity: 0;
}
.is-after .str-sec1__room--after {
  opacity: 1;
}
.str-sec1__toy {
  position: absolute;
  right: 71.1rem;
  top: 42.5rem;
  width: 24.4rem;
}
.str-sec1__toy--on {
  opacity: 0;
}
.is-after .str-sec1__toy--on {
  opacity: 1;
}
.is-after .str-sec1__toy--off {
  visibility: hidden;
}
.str-sec1__child {
  position: absolute;
}
.str-sec1__child--off {
  left: 68.8rem;
  top: 44.4rem;
  width: 32.3rem;
  transition: opacity 0.8s ease;
}
.str-sec1__child--on {
  left: 58.5rem;
  top: 41.7rem;
  width: 43rem;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.is-after .str-sec1__child--off {
  opacity: 0;
}
.is-after .str-sec1__child--on {
  opacity: 1;
}
.str-sec1__logos {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 11rem;
  z-index: 5;
}
.str-sec1__bi {
  position: absolute;
  left: 36rem;
  top: 2rem;
  width: 12.4rem;
}
.str-sec1__gn {
  position: absolute;
  right: 36.2rem;
  top: 3.7rem;
  display: block;
}
.str-sec1__gn [class^=img-box] {
  width: 16.2rem;
}
.str-sec1__title {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  text-align: center;
  z-index: 4;
}
.str-sec1__badge {
  margin-top: 8rem;
  width: 38.4rem;
  height: 11.3rem;
  position: relative;
  display: inline-block;
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.str-sec1__badge .badge-b, .str-sec1__badge .badge-t, .str-sec1__badge .badge-txt {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.str-sec1__badge .badge-t {
  z-index: 1;
}
.str-sec1__badge .badge-b {
  z-index: 2;
}
.str-sec1__badge .badge-txt {
  z-index: 3;
}
.str-sec1__badge .badge-b > img, .str-sec1__badge .badge-t > img {
  width: 100%;
  display: block;
}
.str-sec1__badge.badge-play {
  opacity: 1;
  transform: translateY(0);
}
.str-sec1__badge {
  opacity: 1;
  transform: none;
  transition: none;
}
.str-sec1__badge .badge-b {
  width: 34.1rem;
  top: 0;
}
.str-sec1__badge .badge-t {
  width: 38.2rem;
  bottom: 0;
}
.str-sec1__badge .badge-txt {
  top: 1.8rem;
  width: 38.4rem;
}
.str-sec1__badge-txt svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.str-sec1__badge-txt {
  /* viewBox(356) 단위 숫자 — rem 아님. SVG 스케일에 비례해 뱃지와 함께 커/작아짐 */
}
.str-sec1__badge-txt text {
  font-family: "Katuri", sans-serif;
  font-size: 26px;
  fill: #fff;
  letter-spacing: -0.05em;
}
.str-sec1 {
  /* 타이틀 — "반짝이는 우리" 라이브 텍스트 + "아이" 이미지, 반짝이(img04) 데코 */
}
.str-sec1__h1 {
  margin-top: 2.4rem;
  text-align: center;
  font-family: "PyeongChangPeace-Bold", sans-serif;
  font-size: 9.86rem;
  font-weight: 700;
  color: #FFB700;
  letter-spacing: -0.05em;
  line-height: 1;
}
.str-sec1__h1 .t1 {
  color: #FFB700;
}
.str-sec1__h1 .t2 {
  color: #FF9000;
}
.str-sec1__h1 .t3 {
  color: #00BA60;
}
.str-sec1__titletxt {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.str-sec1__ai {
  display: inline-block;
  width: 16.4rem;
  vertical-align: -0.8rem;
}
.str-sec1__light {
  position: absolute;
  left: -2.5rem;
  top: -2.4rem;
  width: 5.1rem;
  height: 5.2rem;
  z-index: 5;
  background: url("https://cdn.gni.kr/assets/images/strength/pc/section01_img04.webp") no-repeat 0 0/100% 100%;
  opacity: 0;
}
.str-sec1__light.blink-once {
  animation: str-blink 2s steps(1, end) 1 forwards;
}
.str-sec1 {
  /* 7/30 검수 — 줄단위 마스크 리빌 제거(로딩 지연), 정적 노출 */
}
.str-sec1 .tl {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.str-sec1 .tl__in {
  display: inline-block;
}
.str-sec1__sub {
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 3rem;
  font-weight: 400;
  color: #221F1F;
  letter-spacing: -0.05em;
  line-height: 1;
  margin-top: 3.6rem;
}
.str-sec1__sub b {
  font-weight: 800;
}
.str-sec1__talk {
  /* 텍스트 폭에 맞춘 pill. inline-block(공백 보존, flex 는 공백 제거됨) + line-height 로 세로중앙 */
  position: absolute;
  z-index: 4;
  height: 7.3rem;
  border-radius: 3.65rem;
  display: inline-block;
  text-align: center;
  padding: 0 4.6rem;
  white-space: nowrap;
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 2.6rem;
  font-weight: 400;
  color: #CDAA85;
  letter-spacing: -0.05em;
  line-height: 7.3rem;
  background: #8B6843;
  box-shadow: 0 1rem 1rem rgba(209, 118, 0, 0.22);
  transition: background 0.8s ease, color 0.8s ease;
}
.str-sec1__talk em {
  font-style: normal;
  font-weight: 800;
  color: #CDAA85;
  transition: color 0.8s ease;
}
.str-sec1__talk--1 {
  left: 55.1rem;
  bottom: 18.5rem;
}
.str-sec1__talk--2 {
  right: 55.3rem;
  bottom: 9.8rem;
}
.str-sec1 {
  /* Before: talk1 활성 / After: talk2 활성 */
}
.str-sec1__talk--1 {
  background: #fff;
  color: #221F1F;
}
.str-sec1__talk--1 em {
  color: #FF8519;
}
.is-after .str-sec1__talk--1 {
  background: #8B6843;
  color: #CDAA85;
}
.is-after .str-sec1__talk--1 em {
  color: #CDAA85;
}
.is-after .str-sec1__talk--2 {
  background: #fff;
  color: #221F1F;
  /* 2 step: ① 반전 시 em 도 일단 검정 ② 이어서 주황 + scale 팝 */
}
.is-after .str-sec1__talk--2 em {
  display: inline-block;
  animation: str-em-2step 1.4s ease both;
}

@keyframes str-twinkle {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.25;
    transform: scale(0.55);
  }
}
/* 별 펄스 — .8 → 1.2 커졌다가 .8 로, 75~100% 유지, opacity 변화 없음 */
@keyframes str-star-pulse {
  0% {
    transform: scale(1);
  }
  60% {
    transform: scale(0.8);
  }
  65% {
    transform: scale(1.06);
  }
  70% {
    transform: scale(0.98);
  }
  72%, 100% {
    transform: scale(1);
  }
}
/* 반짝이 — 기본 보임, steps 로 딱딱 끊김. 반짝 반짝 → 멈춤(보임) → 반짝 반짝 */
@keyframes str-blink {
  0% {
    opacity: 1;
  }
  4% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  } /* 반짝 1 */
  12% {
    opacity: 0;
  }
  16% {
    opacity: 1;
  } /* 반짝 2 */
  55% {
    opacity: 1;
  } /* 멈춤 (보이는 상태 유지) */
  59% {
    opacity: 0;
  }
  63% {
    opacity: 1;
  } /* 반짝 3 */
  67% {
    opacity: 0;
  }
  71% {
    opacity: 1;
  } /* 반짝 4 */
  100% {
    opacity: 1;
  } /* 멈춤 (보이는 상태 유지) */
}
/* ============================================================
 * SECTION 2 · 약점/강점 카드 뒤집기 — bg 모눈종이
 * ============================================================ */
.str-sec2 {
  background: #fff;
  padding: 14.1rem 0 14.6rem;
}
.str-sec2 .img-box01 {
  position: absolute;
  right: 1.6rem;
  top: 48.4rem;
  width: 26.1rem;
}
.str-sec2 .img-box02 {
  position: absolute;
  left: 8.5rem;
  top: 12.4rem;
  width: 21.8rem;
}
.str-sec2__title {
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 4.4rem;
  font-weight: 400;
  color: #3C3833;
  letter-spacing: -0.05em;
  line-height: 7.5rem;
  text-align: center;
}
.str-sec2__title em {
  font-style: normal;
  font-weight: 800;
  color: #FF9000;
}
.str-sec2__title b {
  font-weight: 700;
}
.str-sec2__title .tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10.1rem;
  height: 6rem;
  border-radius: 5px;
  font-family: "PyeongChangPeace-Bold", sans-serif;
  font-size: 4.4rem;
  font-weight: 700;
  color: #221F1F;
  letter-spacing: 0;
  line-height: 1;
  vertical-align: 0.4rem;
  background: #fff;
  transition: background 0.4s ease, color 0.4s ease;
}
.str-sec2__title {
  /* tl-line 리빌 완료(is-open) 후 순차 반전 — 약점 먼저, 강점 .3s 뒤 */
}
.str-sec2__title .tl-line.is-open .tag--brown {
  background: #96786C;
  color: #fff;
}
.str-sec2__title .tl-line.is-open .tag--orange {
  background: #FF9000;
  color: #fff;
  transition-delay: 0.3s;
}
.str-sec2__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 3.1rem 2.8rem;
  margin-top: 7.6rem;
  list-style: none;
  padding: 0;
}

.str-card {
  position: relative;
  width: 48.7rem;
  height: 40.2rem;
  perspective: 160rem;
  opacity: 0;
  transform: translateY(5rem);
  transition: opacity 0.72s cubic-bezier(0.4, 0, 0.2, 1), transform 0.72s cubic-bezier(0.4, 0, 0.2, 1);
}
.str-card.motion-play {
  opacity: 1;
  transform: translateY(0);
}
.str-card__flip {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: none;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.str-card.is-flip .str-card__flip {
  transform: rotateY(180deg);
  cursor: default;
}
.str-card__front, .str-card__back {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 2rem;
}
.str-card__front {
  box-shadow: 0.3rem 0.4rem 1rem rgba(53, 53, 53, 0.17);
  overflow: hidden;
}
.str-card__back {
  transform: rotateY(180deg);
  overflow: hidden;
  box-shadow: 0.4rem 0.6rem 1.8rem rgba(53, 53, 53, 0.3);
}
.str-card {
  /* 뒷면 상단 보더선 (카드별 색) */
}
.str-card[data-card="1"] .str-card__back {
  background: linear-gradient(180deg, #FFD247, #FFCB2F);
  border-top: 3px solid #EAB209;
}
.str-card[data-card="2"] .str-card__back {
  background: #65F5AE;
  border-top: 3px solid #20C574;
}
.str-card[data-card="3"] .str-card__back {
  background: linear-gradient(180deg, #D1ABFF, #B490DD);
  border-top: 3px solid #8556BA;
}
.str-card[data-card="4"] .str-card__back {
  background: linear-gradient(180deg, #C8E02D, #B4CC25);
  border-top: 3px solid #899D11;
}
.str-card__frame, .str-card__heart {
  position: absolute;
  left: 0;
  top: 0;
  width: 48.7rem;
}
.str-card {
  /* 앞면 상단 보더선 — frame(이미지) 위에 겹치는 바(오버레이), 카드별 색 */
}
.str-card__frame::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 17.2rem;
  border-radius: 2rem;
  z-index: 1;
}
.str-card[data-card="1"] .str-card__frame::before {
  border-top: 3px solid #EAB209;
}
.str-card[data-card="2"] .str-card__frame::before {
  border-top: 3px solid #20C574;
}
.str-card[data-card="3"] .str-card__frame::before {
  border-top: 3px solid #8556BA;
}
.str-card[data-card="4"] .str-card__frame::before {
  border-top: 3px solid #899D11;
}
.str-card__name {
  position: absolute;
  left: 0;
  top: 4.6rem;
  width: 100%;
  text-align: center;
  z-index: 3;
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 3rem;
  font-weight: 700;
  color: #221F1F;
  letter-spacing: -0.05em;
  line-height: 4.4rem;
}
.str-card__name--after {
  font-weight: 800;
  color: #000;
}
.str-card {
  /* 뒤집기 회전 끝난 뒤(hearts-play, JS 에서 transitionend 후 부여) 하트 두 개 순차 확대 */
}
.str-card__hearts {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  border-radius: 2rem;
}
.str-card__heart-lg, .str-card__heart-sm {
  position: absolute;
  left: 50%;
  top: 33rem;
  background: no-repeat center/contain;
  transform: translate(-50%, -50%) scale(0.8);
  transition: transform 0.66s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.str-card__heart-lg {
  width: 41.8rem;
  height: 34.4rem;
}
.str-card__heart-sm {
  width: 32.4rem;
  height: 26.8rem;
}
.str-card.hearts-play .str-card__heart-lg {
  transform: translate(-50%, -50%) scale(1);
}
.str-card.hearts-play .str-card__heart-sm {
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 0.24s;
}
.str-card {
  /* 카드별 하트 — 색상 베이크된 컷 8종 (bg_heartNN / bg_heartNN_sm, 컷 대기) */
}
.str-card[data-card="1"] .str-card__heart-lg {
  background-image: url("https://cdn.gni.kr/assets/images/strength/ico/bg_heart01.webp");
}
.str-card[data-card="1"] .str-card__heart-sm {
  background-image: url("https://cdn.gni.kr/assets/images/strength/ico/bg_heart01_sm.webp");
}
.str-card[data-card="2"] .str-card__heart-lg {
  background-image: url("https://cdn.gni.kr/assets/images/strength/ico/bg_heart02.webp");
}
.str-card[data-card="2"] .str-card__heart-sm {
  background-image: url("https://cdn.gni.kr/assets/images/strength/ico/bg_heart02_sm.webp");
}
.str-card[data-card="3"] .str-card__heart-lg {
  background-image: url("https://cdn.gni.kr/assets/images/strength/ico/bg_heart03.webp");
}
.str-card[data-card="3"] .str-card__heart-sm {
  background-image: url("https://cdn.gni.kr/assets/images/strength/ico/bg_heart03_sm.webp");
}
.str-card[data-card="4"] .str-card__heart-lg {
  background-image: url("https://cdn.gni.kr/assets/images/strength/ico/bg_heart04.webp");
}
.str-card[data-card="4"] .str-card__heart-sm {
  background-image: url("https://cdn.gni.kr/assets/images/strength/ico/bg_heart04_sm.webp");
}
.str-card {
  /* 카드별 전면 아동 — 바닥 접지라 bottom 앵커 */
}
.str-card[data-card="1"] .str-card__child {
  left: 15.9rem;
  bottom: 5rem;
  width: 17.1rem;
}
.str-card[data-card="2"] .str-card__child {
  left: 18.1rem;
  bottom: 6.3rem;
  width: 12.5rem;
}
.str-card[data-card="3"] .str-card__child {
  left: 16.2rem;
  bottom: 7rem;
  width: 17rem;
}
.str-card[data-card="4"] .str-card__child {
  left: 16.6rem;
  bottom: 6.7rem;
  width: 15.4rem;
}
.str-card__child {
  position: absolute;
  transform: translateY(1px);
}
.str-card__child-on {
  position: absolute;
  left: 0.1rem;
  bottom: 0.1rem;
  width: 48.5rem;
  z-index: 2;
  transform: translateY(1px);
}
.str-card {
  /* 뒤집어 보기 — 카드별 그림자색 (PSD dist2 ang-90 size8 28%) */
}
.str-card__turn {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20.7rem;
  height: 6rem;
  border-radius: 2.55rem 2.55rem 0 0;
  background: #fff;
}
.str-card__turn > span {
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  color: #221F1F;
  letter-spacing: -0.05em;
  line-height: 1;
}
.str-card__turn i {
  display: block;
  width: 2.9rem;
  margin-left: 0.8rem;
}
.str-card[data-card="1"] .str-card__turn {
  box-shadow: 0 -0.2rem 0.8rem rgba(221, 169, 13, 0.28);
}
.str-card[data-card="2"] .str-card__turn {
  box-shadow: 0 -0.2rem 0.8rem rgba(37, 175, 107, 0.28);
}
.str-card[data-card="3"] .str-card__turn {
  box-shadow: 0 -0.2rem 0.8rem rgba(171, 125, 225, 0.28);
}
.str-card[data-card="4"] .str-card__turn {
  box-shadow: 0 -0.2rem 0.8rem rgba(136, 157, 9, 0.28);
}

/* ============================================================
 * SECTION 3 · 약점/강점 주목 — 세모 카드 마스크 리빌
 * ============================================================ */
.str-sec3 {
  background: url("https://cdn.gni.kr/assets/images/strength/pc/section3_bg.webp") center top/100% no-repeat;
  padding: 12.7rem 0 20.2rem;
  overflow: hidden;
  /* 얼굴 데코 — PSD 모서리 기준 사분면 앵커 (좌상/우상/좌하/우하) */
  /* 얼굴 데코 1~4 — 단일 모서리 앵커 + 도착 시 역순(4→3→2→1) 진입 (해당 모서리 방향에서 슬라이드 인) */
}
.str-sec3__face {
  position: absolute;
  z-index: 0;
  transition: transform 0.84s cubic-bezier(0.4, 0, 0.2, 1);
}
.str-sec3__face--1 {
  right: 0;
  bottom: 16rem;
  width: 16.7rem;
  transform: translateX(100%);
  transition-delay: 0.54s;
}
.str-sec3__face--2 {
  bottom: 0;
  width: 39rem;
  transform: translateY(100%);
  transition-delay: 0.36s;
}
.str-sec3__face--3 {
  left: 0;
  top: 21rem;
  width: 14.2rem;
  transform: translateX(-100%);
  transition-delay: 0.18s;
}
.str-sec3__face--4 {
  top: 0;
  right: 0.9rem;
  width: 42.4rem;
  transform: translateY(-100%);
  transition-delay: 0s;
}
.is-in .str-sec3__face {
  transform: translate(0, 0);
}
.str-sec3 {
  /* 용수철 띠요잉 — 붙은 벽면 중앙이 origin (4 상 / 1 우 / 2 하 / 3 좌), 재생 순서 4 → 1 → 2 → 3
     각자 슬라이드 도착 이후 발동. 반복: 2.6s 주기 중 앞 35%만 재생(뒤는 유휴) → 매 반복 사이 쉼 */
}
.is-in .str-sec3__face--4 img {
  transform-origin: 50% 0;
  animation: str-face-boing 2.6s ease-in-out 0.84s infinite;
}
.is-in .str-sec3__face--1 img {
  transform-origin: 100% 50%;
  animation: str-face-boing 2.6s ease-in-out 1.38s infinite;
}
.is-in .str-sec3__face--2 img {
  transform-origin: 50% 100%;
  animation: str-face-boing 2.6s ease-in-out 1.56s infinite;
}
.is-in .str-sec3__face--3 img {
  transform-origin: 0 50%;
  animation: str-face-boing 2.6s ease-in-out 1.74s infinite;
}
.str-sec3__titlewrap {
  position: relative;
  text-align: center;
  /* 별 = 캔버스 중앙(960) 기준 calc (PSD Sparkle bbox 절대좌표 환산) */
}
.str-sec3__titlewrap .ico-star.st-l1 {
  left: calc(50% - 43.5rem);
  top: 4.9rem;
}
.str-sec3__titlewrap .ico-star.st-l2 {
  left: calc(50% - 37.7rem);
  top: 9.8rem;
}
.str-sec3__titlewrap .ico-star.st-r1 {
  left: calc(50% + 36.2rem);
  top: 8.3rem;
}
.str-sec3__title {
  position: relative;
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 4.4rem;
  font-weight: 400;
  color: #3C3833;
  letter-spacing: -0.025em;
  line-height: 7.6rem;
}
.str-sec3__title b {
  font-weight: 800;
}
.str-sec3__title .pyeong {
  font-size: 6.5rem;
  line-height: 8rem;
  color: #00BA60;
}
.str-sec3__title .pyeong-img {
  width: 50.7rem;
}
.str-sec3__cards {
  display: flex;
  gap: 2.8rem;
  margin-top: 6.4rem;
}
.str-sec3__card {
  position: relative;
  width: 48.7rem;
  height: 64.8rem;
}
.str-sec3__badge {
  width: 38.4rem;
  height: 10.7rem;
  z-index: 3;
  position: relative;
  display: inline-block;
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.str-sec3__badge .badge-b, .str-sec3__badge .badge-t, .str-sec3__badge .badge-txt {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.str-sec3__badge .badge-t {
  z-index: 1;
}
.str-sec3__badge .badge-b {
  z-index: 2;
}
.str-sec3__badge .badge-txt {
  z-index: 3;
}
.str-sec3__badge .badge-b > img, .str-sec3__badge .badge-t > img {
  width: 100%;
  display: block;
}
.str-sec3__badge.badge-play {
  opacity: 1;
  transform: translateY(0);
}
.str-sec3__badge {
  /* @include 뒤에 재선언 — mixin 의 position:relative/transform:translateY 가 앞선 값을 덮으므로 마지막에 확정 */
  position: absolute;
  left: 50%;
  top: 0.8rem;
  transform: translateX(-50%) translateY(2rem);
}
.str-sec3__badge.badge-play {
  transform: translateX(-50%) translateY(0);
}
.str-sec3__badge .badge-b {
  top: 0;
}
.str-sec3__badge .badge-t {
  bottom: 0;
}
.str-sec3__badge .badge-txt {
  top: 2rem;
  width: 38.4rem;
}
.str-sec3__badge--weak .badge-b {
  width: 34.1rem;
}
.str-sec3__badge--weak .badge-t {
  width: 38.2rem;
}
.str-sec3__badge--strong .badge-b {
  width: 34.1rem;
}
.str-sec3__badge--strong .badge-t {
  width: 38.2rem;
}
.str-sec3__badge-txt svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.str-sec3__badge-txt text {
  font-family: "Katuri", sans-serif;
  font-size: 26px;
  fill: #fff;
  letter-spacing: -0.05em;
}
.str-sec3__badge-txt .em {
  fill: #FFBD55;
}
.str-sec3__card--strong .str-sec3__badge-txt .em {
  fill: #221F1F;
}
.str-sec3__adult {
  position: absolute;
  left: 0;
  top: 6.2rem;
  width: 48.7rem;
  height: 46.1rem;
  z-index: 2;
  overflow: hidden;
  border-radius: 3rem;
  opacity: 0;
  transform: translateY(4rem);
  transition: opacity 0.84s cubic-bezier(0.4, 0, 0.2, 1), transform 0.84s cubic-bezier(0.4, 0, 0.2, 1);
}
.is-in .str-sec3__adult {
  opacity: 1;
  transform: translateY(0);
}
.is-in .str-sec3__card--strong .str-sec3__adult {
  transition-delay: 0.42s;
}
.str-sec3__adult-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 48.7rem;
}
.str-sec3__adult-txt {
  position: absolute;
  left: 0;
  top: 6.4rem;
  width: 100%;
  text-align: center;
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: #000;
  letter-spacing: -0.05em;
  line-height: 4.4rem;
}
.str-sec3__card--strong .str-sec3__adult-txt {
  top: 5.6rem;
}
.str-sec3__card--weak .str-sec3__adult-illust {
  position: absolute;
  left: 4.8rem;
  bottom: 3rem;
  width: 23.7rem;
}
.str-sec3__card--strong .str-sec3__adult-illust {
  position: absolute;
  left: 2.6rem;
  bottom: -12.9rem;
  width: 22.2rem;
}
.str-sec3__accent {
  position: absolute;
  right: 21.4rem;
  top: 24rem;
  width: 3.2rem;
}
.str-sec3 {
  /* 세모 칸 리빌 — 마스크 고정, 이미지 translateY(-100%) → 0 */
}
.str-sec3__fold {
  position: absolute;
  left: 0;
  top: 24.4rem;
  width: 48.7rem;
  height: 40.4rem;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.str-sec3__kid {
  position: relative;
  width: 48.7rem;
  height: 40.4rem;
  overflow: hidden;
  transform: translateY(-100%);
  transition: transform 1.08s cubic-bezier(0.4, 0, 0.2, 1);
}
.is-open .str-sec3__kid {
  transform: translateY(0);
}
.str-sec3__kid-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 48.6rem;
}
.str-sec3__card--weak .str-sec3__kid-illust {
  position: absolute;
  right: 2.3rem;
  bottom: -0.8rem;
  width: 20.2rem;
}
.str-sec3__card--strong .str-sec3__kid-illust {
  position: absolute;
  right: 2rem;
  bottom: -1.3rem;
  width: 24.1rem;
}
.str-sec3__kid-txt {
  position: absolute;
  left: 0;
  bottom: 3.6rem;
  width: 100%;
  text-align: center;
  font-family: "Katuri", sans-serif;
  font-size: 3.4rem;
  font-weight: 400;
  color: #fff;
  letter-spacing: -0.05em;
  line-height: 1;
}
.str-sec3__kid-txt em {
  font-style: normal;
  color: #FFBD55;
}
.str-sec3__kid-txt em.dark {
  color: #221F1F;
}
.str-sec3 {
  /* 세모 카드 순차 리빌 — 약점(.9s) 끝나기 .1s 전에 강점 시작 (글자는 패널에 노출된 채) */
}
.is-open .str-sec3__card--strong .str-sec3__kid {
  transition-delay: 0.96s;
}

/* ============================================================
 * SECTION 4 · 연구 인용 + 약점/강점 문단
 * ============================================================ */
.str-sec4 {
  background: linear-gradient(180deg, #FDEECC 0, #FDEECC 87rem, #fff 138.3rem);
  padding: 9.6rem 0 18.2rem;
  /* 데코 3종 — 글로우/이너섀도우 베이크 컷 (bbox + 여백 40, 앵커 = bbox − 40), 둥실둥실 부유 */
}
.str-sec4 .img-box01 {
  position: absolute;
  right: 6.2rem;
  top: 11.1rem;
  width: 30.7rem;
  animation: str-float 3.4s ease-in-out infinite;
}
.str-sec4 .img-box02 {
  position: absolute;
  right: 16.9rem;
  top: 30.7rem;
  width: 33.9rem;
  animation: str-float 3.4s ease-in-out 1.1s infinite;
}
.str-sec4 .img-box03 {
  position: absolute;
  left: 5.8rem;
  top: 21.8rem;
  width: 32.5rem;
  animation: str-float 3.4s ease-in-out 0.6s infinite;
}
.str-sec4__file {
  position: relative;
  width: 109rem;
  margin-left: 0.1rem;
}
.str-sec4__file-bg {
  width: 109rem;
}
.str-sec4__file-bg img {
  filter: drop-shadow(0 1.1rem 1.6rem rgba(53, 53, 53, 0.12));
}
.str-sec4__quote {
  position: absolute;
  left: 0;
  top: 15.4rem;
  width: 100.4rem;
  margin: 0;
  text-align: center;
}
.str-sec4__quote p:not(.str-sec4__source) {
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 3.2rem;
  font-weight: 400;
  color: #3C3833;
  letter-spacing: -0.05em;
  line-height: 5.6rem;
}
.str-sec4__quote p:not(.str-sec4__source) b {
  font-weight: 800;
}
.str-sec4__quote p:not(.str-sec4__source) b.orange {
  color: #FF9000;
}
.str-sec4__source {
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 2rem;
  font-weight: 400;
  color: #A2A2A2;
  letter-spacing: -0.05em;
  line-height: 3.2rem;
  margin-top: 3rem;
}
.str-sec4__result {
  position: relative;
  margin-top: -3.9rem;
  text-align: center;
}
.str-sec4__bar {
  display: block;
  width: 2px;
  height: 10rem;
  margin: 0 auto;
  background: #000;
}
.str-sec4__para {
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 4rem;
  font-weight: 400;
  color: #221F1F;
  letter-spacing: -0.05em;
  line-height: 7rem;
}
.str-sec4__para b {
  font-weight: 800;
}
.str-sec4__para {
  /* 하이라이트 — 형광펜 스윕: ::before 게이지가 좌→우로 그어지며 글자 반전 */
}
.str-sec4__para .hl {
  position: relative;
  display: inline-block;
  font-weight: 800;
  color: #221F1F;
  padding: 0 1.4rem;
  line-height: 6.3rem;
  transition: color 0.3s ease;
}
.str-sec4__para .hl::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.str-sec4__para .hl--teal::before {
  background: #00BA60;
}
.str-sec4__para .hl--orange::before {
  background: #FF9000;
}
.str-sec4__para {
  /* 인용부호 점 — 약/점(강/점) 글자 중심 위 (PSD accent 10x10, 중심간 35) */
}
.str-sec4__para .dotted {
  position: relative;
}
.str-sec4__para .dotted::before, .str-sec4__para .dotted::after {
  content: "";
  position: absolute;
  top: -1.7rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #221F1F;
  transform-origin: 50% 100%;
}
.str-sec4__para .dotted::before {
  left: calc(50% - 2.25rem);
}
.str-sec4__para .dotted::after {
  left: calc(50% + 1.25rem);
}
.str-sec4__para .dotted .ch {
  display: inline-block;
  transform-origin: 50% 100%;
}
.str-sec4__para--weak {
  margin-top: 4.8rem;
}
.str-sec4__para--strong {
  margin-top: 7rem;
}
.str-sec4__para {
  opacity: 0;
  transform: translateY(3rem);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.str-sec4__bar {
  transform-origin: 50% 0;
  transform: scaleY(0);
  transition: transform 0.72s ease;
}
.is-in .str-sec4__bar {
  transform: scaleY(1);
}
.is-in .str-sec4__para--weak {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.54s;
}
.is-in .str-sec4__para--strong {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.26s;
}
.str-sec4 {
  /* ── V1 시퀀스: 문단 리빌 → 점 탕탕(글자 눌림 동반) → 하이라이트 스윕, 약점 → 강점 순 ── */
}
.is-in .str-sec4__para--weak .dotted::before {
  animation: str-dot-tap 0.42s ease 1.44s both;
}
.is-in .str-sec4__para--weak .dotted::after {
  animation: str-dot-tap 0.42s ease 1.68s both;
}
.is-in .str-sec4__para--weak .dotted .ch:first-child {
  animation: str-ch-press 0.42s ease 1.44s both;
}
.is-in .str-sec4__para--weak .dotted .ch:last-child {
  animation: str-ch-press 0.42s ease 1.68s both;
}
.is-in .str-sec4__para--weak .hl {
  color: #fff;
  transition-delay: 2.4s;
}
.is-in .str-sec4__para--weak .hl::before {
  clip-path: inset(0 0 0 0);
  transition-delay: 2.16s;
}
.is-in .str-sec4__para--strong .dotted::before {
  animation: str-dot-tap 0.42s ease 2.88s both;
}
.is-in .str-sec4__para--strong .dotted::after {
  animation: str-dot-tap 0.42s ease 3.12s both;
}
.is-in .str-sec4__para--strong .dotted .ch:first-child {
  animation: str-ch-press 0.42s ease 2.88s both;
}
.is-in .str-sec4__para--strong .dotted .ch:last-child {
  animation: str-ch-press 0.42s ease 3.12s both;
}
.is-in .str-sec4__para--strong .hl {
  color: #fff;
  transition-delay: 3.84s;
}
.is-in .str-sec4__para--strong .hl::before {
  clip-path: inset(0 0 0 0);
  transition-delay: 3.6s;
}
.is-in .str-sec4__para--strong .hl:last-of-type {
  transition-delay: 4.32s;
}
.is-in .str-sec4__para--strong .hl:last-of-type::before {
  transition-delay: 4.08s;
}

/* 점 탕탕 — 살짝 Y 로 눌렸다 올라옴 */
@keyframes str-dot-tap {
  0% {
    transform: translateY(0) scaleY(1);
  }
  40% {
    transform: translateY(0.4rem) scaleY(0.6);
  }
  100% {
    transform: translateY(0) scaleY(1);
  }
}
/* 캠페인 화살표 호버 — 쫀득하게 우상단으로 사라졌다(페이드) 좌하단 완전 밖에서 재진입 */
@keyframes str-arrow-swish {
  0% {
    transform: translateY(-50%);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0);
  }
  40% {
    transform: translateY(-50%) translate(7rem, -7rem);
    opacity: 0;
  }
  50% {
    transform: translateY(-50%) translate(-9rem, 9rem);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.22, 0.9, 0.36, 1);
  }
  62% {
    opacity: 1;
  }
  100% {
    transform: translateY(-50%);
    opacity: 1;
  }
}
/* 구름 유영 — 좌에서 우로 지나감 (자기 폭 기준 ±45%) */
@keyframes str-cloud-pass {
  0% {
    transform: translateX(-45%);
    opacity: 0;
  }
  20%, 80% {
    opacity: 1;
  }
  100% {
    transform: translateX(45%);
    opacity: 0;
  }
}
/* 둥실둥실 부유 */
@keyframes str-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1.4rem);
  }
}
/* 위쪽 별 — 72도씩 5번 딱딱 끊어 한 바퀴 (구간마다 ease, 사이 홀드) */
@keyframes str-star-step {
  0% {
    transform: rotate(0);
  }
  14%, 20% {
    transform: rotate(72deg);
  }
  34%, 40% {
    transform: rotate(144deg);
  }
  54%, 60% {
    transform: rotate(216deg);
  }
  74%, 80% {
    transform: rotate(288deg);
  }
  94%, 100% {
    transform: rotate(360deg);
  }
}
/* 아래쪽 별 — 위(-y)에서 떨어지며 안착. opacity 0 1 1 1 0 0 / scale .8 1 1 1 .9 .9 / 살짝 회전 (--fx/--fy = JS 랜덤) */
@keyframes str-star-fall {
  0% {
    transform: translate(var(--fx, 0px), var(--fy, -60px)) rotate(0deg) scale(0.8);
    opacity: 0;
  }
  20% {
    transform: translate(calc(var(--fx, 0px) * 0.8), calc(var(--fy, -60px) * 0.8)) rotate(5deg) scale(1);
    opacity: 1;
  }
  40% {
    transform: translate(calc(var(--fx, 0px) * 0.6), calc(var(--fy, -60px) * 0.6)) rotate(10deg) scale(1);
    opacity: 1;
  }
  60% {
    transform: translate(calc(var(--fx, 0px) * 0.4), calc(var(--fy, -60px) * 0.4)) rotate(15deg) scale(1);
    opacity: 1;
  }
  80% {
    transform: translate(calc(var(--fx, 0px) * 0.2), calc(var(--fy, -60px) * 0.2)) rotate(20deg) scale(0.9);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0) rotate(25deg) scale(0.9);
    opacity: 0;
  }
}
/* 용수철 띠요잉 — X 수축했다 풀리며 Y 반동 (0~35% 재생, 35~100% 유휴 = 반복 간 쉼) */
@keyframes str-face-boing {
  0% {
    transform: scale(1, 1);
  }
  9% {
    transform: scale(0.92, 1.06);
  } /* X 수축 + Y 살짝 늘어남 */
  17% {
    transform: scale(1.08, 0.95);
  } /* 풀리며 반동 */
  24% {
    transform: scale(0.97, 1.02);
  }
  30% {
    transform: scale(1.02, 0.99);
  }
  35%, 100% {
    transform: scale(1, 1);
  } /* 유휴 구간 */
}
/* 다짐 참여 버튼 깜빡 */
@keyframes str-cta-blink {
  0% {
    background-color: #00BA60;
  }
  12% {
    background-color: #0BD570;
  } /* 깜빡 1 */
  24% {
    background-color: #00BA60;
  }
  36% {
    background-color: #0BD570;
  } /* 깜빡 2 */
  48%, 100% {
    background-color: #00BA60;
  } /* 쉼 */
}
/* 강조 글자 2단계 — dim -> 검정(1단계 반전) -> 주황 + scale 팝(2단계) */
@keyframes str-em-2step {
  0% {
    color: #CDAA85;
    transform: scale(1);
  }
  15%, 50% {
    color: #221F1F;
    transform: scale(1);
  }
  65%, 85% {
    color: #FF8519;
    transform: scale(1.05);
  }
  100% {
    color: #FF8519;
    transform: scale(1);
  }
}
/* 점 탕에 글자가 살짝 눌렸다 복귀 */
@keyframes str-ch-press {
  0% {
    transform: scaleY(1);
  }
  40% {
    transform: scaleY(0.9);
  }
  100% {
    transform: scaleY(1);
  }
}
/* ============================================================
 * SECTION 5 · 반짝이게 하는 방법 (핀 고정 스텝) — bg 모눈종이
 * ============================================================ */
.str-sec5__scroll {
  position: relative;
  height: 300vh;
}
.str-sec5__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  /* 배경 = 디자이너 컷(구름 포함) — 위/아래 여백은 이미지 상/하단 색으로 잇기 */
  background: linear-gradient(180deg, #555CAD 0, #555CAD 50%, #9377B6 50%, #9377B6 100%);
}
.str-sec5__canvas {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 113.9rem;
  background: url("https://cdn.gni.kr/assets/images/strength/pc/section5_bg.webp") no-repeat center/100% 100%;
}
.str-sec5__star {
  position: absolute;
}
.str-sec5__star--1 {
  right: 10.5rem;
  bottom: 13.7rem;
  width: 16.6rem;
}
.str-sec5__star--2 {
  left: 0;
  top: 14rem;
  width: 15.1rem;
  opacity: 0.2;
}
.str-sec5__star--3 {
  right: 0;
  top: 22.2rem;
  width: 20.8rem;
  opacity: 0.2;
}
.str-sec5__star--4 {
  left: 12.8rem;
  bottom: 13.7rem;
  width: 15.2rem;
}
.str-sec5__star--5 {
  left: 26.6rem;
  bottom: 8.3rem;
  width: 2.4rem;
}
.str-sec5__star--6 {
  right: 27.7rem;
  bottom: 14.9rem;
  width: 2.6rem;
}
.str-sec5 {
  /* 위쪽(--2/--3) = 정적(모션 없음) / 아래쪽(--1/4/5/6) = 랜덤 낙하 (--fx/--fy·duration·delay 는 JS 랜덤) */
}
.str-sec5__star--1, .str-sec5__star--4, .str-sec5__star--5, .str-sec5__star--6 {
  animation: str-star-fall 5s linear infinite;
}
.str-sec5__titlewrap {
  position: absolute;
  left: 0;
  top: 13.9rem;
  width: 100%;
  text-align: center;
  /* 별 = 제목 그룹(811) 기준 중앙 calc (PSD 상대좌표) — sec5 전용 흰 별 컷 + native 치수 */
}
.str-sec5__titlewrap .ico-star.st-l1 {
  background-image: url("https://cdn.gni.kr/assets/images/strength/pc/section05_img12.webp");
  width: 5.5rem;
  height: 5.5rem;
}
.str-sec5__titlewrap .ico-star.st-l2 {
  background-image: url("https://cdn.gni.kr/assets/images/strength/pc/section05_img13.webp");
  width: 2rem;
  height: 2.2rem;
}
.str-sec5__titlewrap .ico-star.st-r1 {
  background-image: url("https://cdn.gni.kr/assets/images/strength/pc/section05_img14.webp");
  width: 4.8rem;
  height: 5rem;
}
.str-sec5__titlewrap .ico-star.st-r2 {
  background-image: url("https://cdn.gni.kr/assets/images/strength/pc/section05_img15.webp");
  width: 3rem;
  height: 3.2rem;
}
.str-sec5__titlewrap .ico-star.st-l1 {
  left: calc(50% - 40.55rem);
  top: 5.5rem;
}
.str-sec5__titlewrap .ico-star.st-l2 {
  left: calc(50% - 37.15rem);
  top: 11.8rem;
}
.str-sec5__titlewrap .ico-star.st-r1 {
  left: calc(50% + 33.35rem);
  top: 1.7rem;
}
.str-sec5__titlewrap .ico-star.st-r2 {
  left: calc(50% + 37.55rem);
  top: 4.7rem;
}
.str-sec5__title {
  position: relative;
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 4.4rem;
  font-weight: 400;
  color: #fff;
  letter-spacing: -0.025em;
  line-height: 7.6rem;
}
.str-sec5__title b {
  font-weight: 800;
}
.str-sec5__title .pyeong {
  font-size: 6.5rem;
  line-height: 8rem;
  color: #FFF048;
}
.str-sec5__hows {
  position: absolute;
  left: 50%;
  bottom: 12.5rem;
  transform: translateX(-50%);
  width: 120.2rem;
  height: 64.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.str-sec5__source {
  position: absolute;
  left: 0;
  bottom: 5.2rem;
  width: 100%;
  text-align: center;
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 2rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: -0.05em;
  line-height: 1;
}

.str-how {
  position: absolute;
  bottom: 0;
  width: 38.3rem;
}
.str-how[data-how="1"] {
  left: 0;
}
.str-how[data-how="2"] {
  left: 41rem;
}
.str-how[data-how="3"] {
  right: 0;
}
.str-how__box {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 28.8rem;
  border-radius: 2rem;
  box-shadow: 0.3rem 0.4rem 1rem rgba(53, 53, 53, 0.3);
  overflow: hidden;
  transition: height 0.96s cubic-bezier(0.4, 0, 0.2, 1);
}
.str-how {
  /* 박스별 그라데이션 (캡쳐 실측) — 끝색은 펴기 전/후 동일, 높이 따라 스트레치 */
}
.str-how[data-how="1"] .str-how__box {
  background: linear-gradient(180deg, #00BA60, #65F5AE);
}
.str-how[data-how="2"] .str-how__box {
  background: linear-gradient(180deg, #FB964F, #FFD147);
}
.str-how[data-how="3"] .str-how__box {
  background: linear-gradient(180deg, #B28EDC, #D1ABFF);
}
.str-how.is-on .str-how__box {
  height: 64.2rem;
}
.str-how__desc {
  position: absolute;
  left: 0;
  bottom: 50.4rem;
  width: 100%;
  text-align: center;
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 2.5rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.025em;
  line-height: 3.6rem;
  opacity: 0;
  transition: opacity 0.6s ease 0.3s;
}
.str-how {
  /* 말풍선 — PSD 컷 이미지 (꼬리 포함 301x168), 텍스트는 라이브 */
}
.str-how__talk {
  position: absolute;
  left: 4rem;
  bottom: 30.5rem;
  width: 30.1rem;
  height: 16.8rem;
  background: url("https://cdn.gni.kr/assets/images/strength/pc/section05_img16.webp") no-repeat 0 0/100% 100%;
  opacity: 0;
  transition: opacity 0.6s ease 0.42s;
}
.str-how__talk p {
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  color: #221F1F;
  letter-spacing: -0.025em;
  line-height: 3.4rem;
  text-align: center;
  margin-top: 2.2rem;
}
.str-how__talk p em {
  font-style: normal;
  font-weight: 800;
}
.str-how__talk p em.green {
  color: #02BA60;
}
.str-how__talk p em.orange {
  color: #FF7D00;
}
.str-how__talk p em.purple {
  color: #934FE3;
}
.str-how[data-how="2"] .str-how__talk {
  width: 30.2rem;
  background-image: url("https://cdn.gni.kr/assets/images/strength/pc/section05_img17.webp");
}
.str-how[data-how="3"] .str-how__talk {
  left: 4.2rem;
  background-image: url("https://cdn.gni.kr/assets/images/strength/pc/section05_img18.webp");
}
.str-how.is-on .str-how__desc, .str-how.is-on .str-how__talk {
  opacity: 1;
}
.str-how {
  /* 아동 — 그림자 베이크 컷 (여백 16 포함, 앵커 -16 보정) */
}
.str-how__child {
  position: absolute;
}
.str-how[data-how="1"] .str-how__child--off {
  left: 6.4rem;
  bottom: 8.9rem;
  width: 27rem;
}
.str-how[data-how="1"] .str-how__child--on {
  left: 4.3rem;
  bottom: 8.9rem;
  width: 30.3rem;
  opacity: 0;
  transition: opacity 0.48s ease 0.36s;
}
.str-how[data-how="2"] .str-how__child--off {
  left: 3.7rem;
  bottom: 12.2rem;
  width: 30.6rem;
}
.str-how[data-how="2"] .str-how__child--on {
  right: 3.3rem;
  bottom: 20.2rem;
  width: 21.5rem;
  opacity: 0;
  transition: opacity 0.48s ease 0.36s;
}
.str-how[data-how="3"] .str-how__child--off {
  left: 6.9rem;
  bottom: 10.8rem;
  width: 25.7rem;
}
.str-how[data-how="3"] .str-how__child--on {
  left: 5.4rem;
  bottom: 13.6rem;
  width: 27.9rem;
  opacity: 0;
  transition: opacity 0.48s ease 0.36s;
}
.str-how.is-on .str-how__child--on {
  opacity: 1;
}
.str-how {
  /* 아동은 고정 — --on(아동+반짝)의 아동부가 --off 와 동일 좌표(PSD x439)라 off 를 숨기지 않고 그대로 덮음 (깜빡임 방지) */
}
.str-how__ribbon {
  position: absolute;
  left: 50%;
  bottom: 2.7rem;
  transform: translateX(-50%);
  width: 31.4rem;
  z-index: 1;
}
.str-how__ribbon h3 {
  position: absolute;
  left: 0;
  top: 3.5rem;
  width: 100%;
  text-align: center;
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 3rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.025em;
  line-height: 1;
  margin: 0;
}

/* ============================================================
 * SECTION 6 · 다짐(서명) 참여
 * ============================================================ */
.str-sec6 {
  background: #FFFDED;
  padding: 14rem 0 5rem;
  z-index: 1;
}
.str-sec6 .img-box01 {
  position: absolute;
  right: 20rem;
  top: 19rem;
  width: 19.8rem;
}
.str-sec6__title {
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 4.4rem;
  font-weight: 400;
  color: #221F1F;
  letter-spacing: -0.025em;
  line-height: 7.6rem;
  text-align: center;
}
.str-sec6__title b {
  font-weight: 800;
}
.str-sec6__title .pyeong {
  font-size: 6.5rem;
  line-height: 8rem;
  color: #FF8E22;
}
.str-sec6__pledges {
  list-style: none;
  margin: 7.9rem 0 0;
  padding: 0;
}
.str-sec6__form {
  margin-top: 8rem;
}
.str-sec6__fields {
  display: flex;
}
.str-sec6__field {
  flex: none;
}
.str-sec6__field label {
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 3rem;
  font-weight: 700;
  color: #221F1F;
  letter-spacing: -0.025em;
  line-height: 7.2rem;
  vertical-align: top;
}
.str-sec6__field input[type=text], .str-sec6__field input[type=tel] {
  height: 7.2rem;
  border: 2px solid #FF8E22;
  border-radius: 0.5rem;
  background: #FFF8C4;
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  color: #221F1F;
  letter-spacing: -0.025em;
  line-height: 7.2rem;
  text-align: center;
  padding: 0 2rem;
}
.str-sec6__field input[type=text]:focus, .str-sec6__field input[type=tel]:focus {
  outline: none;
}
.str-sec6__field--name {
  width: 31.6rem;
}
.str-sec6__field--name label {
  margin-right: 2.5rem;
}
.str-sec6__field--name input {
  width: 23.3rem;
}
.str-sec6__field--phone {
  margin-left: 8rem;
  white-space: nowrap;
}
.str-sec6__field--phone label {
  margin-right: 3.4rem;
}
.str-sec6__phone {
  display: inline-flex;
  align-items: center;
}
.str-sec6__phone input {
  width: 14.7rem;
  padding: 0;
}
.str-sec6__phone .dash {
  display: block;
  width: 1.9rem;
  height: 0.5rem;
  margin: 0 0.4rem;
  background: #221F1F;
}
.str-sec6__privacy {
  position: relative;
  margin: 8.7rem 0 0;
  padding: 2rem 4.3rem 5.6rem;
  border: 2px solid #FFD14B;
  background: #fff url("https://cdn.gni.kr/assets/images/strength/pc/section06_img04.webp") repeat 0 0/4.3rem 4.3rem;
  border-radius: 2rem;
  overflow: visible;
  box-shadow: 0 0.5rem 0 rgba(255, 141, 33, 0.2);
}
.str-sec6__privacy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2rem;
  background: #FFD14B;
  border-radius: 1.6rem 1.6rem 0 0;
}
.str-sec6__clip {
  left: 4.5rem;
  top: -2.8rem;
  z-index: 2;
}
.str-sec6__privacy-title {
  /* float:left = fieldset legend 특수 렌더링 해제 — ::before 띠/클립이 타이틀 위(박스 최상단)에 위치하도록 */
  display: block;
  width: 100%;
  text-align: center;
  float: left;
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 3rem;
  font-weight: 800;
  color: #221F1F;
  letter-spacing: -0.025em;
  line-height: 1;
  padding-top: 4.6rem;
  margin-bottom: 5.7rem;
}
.str-sec6__agree {
  position: relative;
  clear: both;
}
.str-sec6__agree p {
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: #3C3833;
  letter-spacing: -0.025em;
  line-height: 1;
}
.str-sec6__agree p b {
  font-weight: 700;
}
.str-sec6__agree {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.str-sec6__radios label {
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: #3C3833;
  letter-spacing: -0.025em;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.str-sec6__radios label + label {
  margin-left: 6rem;
}
.str-sec6__radios input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.str-sec6__radios i {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  margin-right: 1rem;
  border-radius: 50%;
  background: #fff;
  border: 0.2rem solid #959595;
  position: relative;
}
.str-sec6__radios input:checked + i {
  border-color: #FF8E22;
}
.str-sec6__radios input:checked + i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: #FF8E22;
}
.str-sec6__radios input:focus-visible + i {
  outline: 0.2rem solid #FF8E22;
  outline-offset: 0.2rem;
}
.str-sec6__table {
  width: 91.8rem;
  margin: 4.2rem auto 0;
  border-collapse: collapse;
  table-layout: fixed;
}
.str-sec6__table .col-1 {
  width: 44.5rem;
}
.str-sec6__table .col-2 {
  width: 23.8rem;
}
.str-sec6__table .col-3 {
  width: 23.5rem;
}
.str-sec6__table th {
  background: #FFE7C4;
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: #3C3833;
  letter-spacing: -0.025em;
  line-height: 1;
  height: 5.3rem;
}
.str-sec6__table td {
  background: #FFF9F0;
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 2rem;
  font-weight: 400;
  color: #3C3833;
  letter-spacing: -0.025em;
  line-height: 3rem;
  padding: 1.5rem 1rem;
}
.str-sec6__table th, .str-sec6__table td {
  border: 0.2rem solid #221F1F;
  text-align: center;
  vertical-align: middle;
}
.str-sec6__table tr > *:first-child {
  border-left: 0;
}
.str-sec6__table tr > *:last-child {
  border-right: 0;
}
.str-sec6__notes {
  list-style: none;
  width: 91.8rem;
  margin: 3.8rem auto 0;
  padding: 0;
}
.str-sec6__notes li {
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  color: #7D756C;
  letter-spacing: -0.025em;
  line-height: 3rem;
}
.str-sec6__cta-wrap {
  text-align: center;
  margin-top: 7.4rem;
}
.str-sec6__cta {
  position: relative;
  width: 51.2rem;
  height: 11.3rem;
  border: 0;
  cursor: pointer;
  background: #00BA60;
  border-radius: 5.5rem;
  box-shadow: 0 0.5rem 0 rgba(0, 185, 95, 0.34);
  animation: str-cta-blink 2.4s steps(1, end) infinite;
}
.str-sec6__cta span {
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 4rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.025em;
  line-height: 1;
  margin-left: 12rem;
}
.str-sec6__cta:hover {
  background: #00A957;
}
.str-sec6__cta-hand {
  position: absolute;
  left: 2.4rem;
  top: -5.5rem;
  width: 13.3rem;
}

.str-pledge {
  position: relative;
  height: 13.3rem;
  margin-top: 2.1rem;
  cursor: pointer;
  background: #fff;
  border: 2px solid #FFD14B;
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 0.5rem 0 rgba(255, 141, 33, 0.2);
}
.str-pledge:first-child {
  margin-top: 0;
}
.str-pledge::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 11.3rem;
  height: 100%;
  background: #FFD14B;
}
.str-pledge__check {
  position: absolute;
  left: 2.6rem;
  top: 3.2rem;
  width: 6.6rem;
  height: 6.8rem;
  background: #fff;
  border: 0.3rem solid #221F1F;
  border-radius: 0.5rem;
}
.str-pledge__check i {
  position: absolute;
  left: 0.9rem;
  top: -1rem;
  width: 0;
  overflow: hidden;
  transition: width 0.3s ease;
}
.str-wrap .str-pledge__check i > img {
  width: 5.5rem;
  max-width: none;
}
.str-pledge.on .str-pledge__check i {
  width: 5.5rem;
}
.str-pledge__txt {
  position: absolute;
  left: 13.3rem;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 2.8rem;
  font-weight: 800;
  color: #221F1F;
  letter-spacing: -0.045em;
  line-height: 1;
  white-space: nowrap;
}
.str-pledge__txt .hl {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  padding: 0.8rem 0.9rem;
  margin-left: 0.8rem;
  border: 2px dashed #DADADA;
  border-radius: 0.4rem;
  background: transparent;
  color: #DADADA;
  transition: color 0.3s ease 0.2s, border-color 0.3s ease 0.2s;
}
.str-pledge__txt .hl .hl-txt {
  position: relative;
  z-index: 1;
}
.str-pledge__txt .hl::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  z-index: 0;
  background: #FFE242;
  border-radius: 0.2rem;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.str-pledge.on .str-pledge__txt .hl {
  color: #221F1F;
  border-style: solid;
  border-color: #FFE242;
}
.str-pledge.on .str-pledge__txt .hl::before {
  width: 100%;
}
.str-pledge.c2 .str-pledge__txt {
  letter-spacing: -0.05em;
}

/* ============================================================
 * SECTION 7 · 선물 안내
 * ============================================================ */
.str-sec7 {
  height: 167.2rem;
  /* 상단 = sec6 크림 → 흰 페이드 (곡선 경계 위 노출 영역, 캡쳐 실측 y8040~8115), r160 아래는 곡선 이미지가 덮음 */
  background: linear-gradient(180deg, #FFFDED 0, #FFFDED 1rem, #fff 8.5rem, #fff 16rem, #E9F8F7 16rem, #E9F8F7 56.9rem, #BEF0CD 116.9rem, #BEF0CD 100%);
  overflow: visible;
}
.str-sec7 .img-box01 {
  position: absolute;
  left: 50%;
  top: -6.9rem;
  transform: translateX(-50%);
  width: 192rem;
}
.str-sec7__titlewrap {
  position: absolute;
  left: 0;
  top: 32.9rem;
  width: 100%;
  text-align: center;
  z-index: 3;
}
.str-sec7 {
  /* 별+밑줄 데코 = 100명(b.hundred)에 상대 배치 — 줄 위치와 무관하게 항상 정렬 (PSD 상대좌표: 별 -28/-9, 밑줄 폭 155) */
}
.str-sec7__title b.hundred {
  position: relative;
  z-index: 0;
}
.str-sec7__title b.hundred .str-sec7__deco {
  position: absolute;
  left: -2.8rem;
  top: -0.9rem;
  width: 15.5rem;
  height: 6.1rem;
  z-index: -1;
  background: url("https://cdn.gni.kr/assets/images/strength/pc/section07_img06.webp") no-repeat 0 0/100% 100%;
}
.str-sec7__title {
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 4.4rem;
  font-weight: 400;
  color: #221F1F;
  letter-spacing: -0.025em;
  line-height: 7.6rem;
}
.str-sec7__title b {
  font-weight: 900;
}
.str-sec7__title .pyeong {
  font-size: 6.5rem;
  line-height: 8rem;
  color: #00BA60;
}
.str-sec7__title .pyeong-img {
  width: 45.6rem;
}
.str-sec7__stage {
  position: absolute;
  left: 50%;
  top: 0;
  width: 192rem;
  height: 100%;
  transform: translateX(-50%);
}
.str-sec7 {
  /* 구름 4분할 — 상시 좌->우 유영 (familyletteraward fla-pass 이식, 구름별 주기/위상 디싱크) */
}
.str-sec7__cloud {
  position: absolute;
  opacity: 0;
  animation: str-cloud-pass linear infinite;
}
.str-sec7__cloud img {
  animation: str-face-boing 2.6s ease-in-out infinite;
}
.str-sec7__cloud--1 img {
  animation-delay: 0s;
}
.str-sec7__cloud--2 img {
  animation-delay: -0.7s;
}
.str-sec7__cloud--3 img {
  animation-delay: -1.3s;
}
.str-sec7__cloud--4 img {
  animation-delay: -2s;
}
.str-sec7__cloud--1 {
  left: 30.8rem;
  top: 34.2rem;
  width: 24rem;
  animation-duration: 15s;
  animation-delay: -4s;
}
.str-sec7__cloud--2 {
  left: 153.2rem;
  top: 68rem;
  width: 29.8rem;
  animation-duration: 20s;
  animation-delay: -9s;
}
.str-sec7__cloud--3 {
  left: 135rem;
  top: 38.7rem;
  width: 19.2rem;
  animation-duration: 17s;
  animation-delay: -13s;
}
.str-sec7__cloud--4 {
  left: 7.7rem;
  top: 65.3rem;
  width: 27.6rem;
  animation-duration: 18s;
  animation-delay: -2s;
}
.str-sec7__beam {
  position: absolute;
  left: 6.4rem;
  top: 46rem;
  width: 180.4rem;
}
.str-sec7__hill {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 192rem;
  z-index: 1;
}
.str-sec7__bush--r {
  position: absolute;
  right: 0;
  bottom: 42.4rem;
  width: 30.1rem;
}
.str-sec7__bush--l {
  position: absolute;
  left: -3.2rem;
  bottom: 43.3rem;
  width: 33.5rem;
}
.str-sec7__bush--l img {
  transform: scaleX(-1);
}
.str-sec7__gift {
  position: absolute;
  left: 47.1rem;
  bottom: 46.8rem;
  width: 93.8rem;
  z-index: 2;
}
.str-sec7__children {
  position: absolute;
  left: 32.4rem;
  bottom: 54.9rem;
  width: 30.8rem;
  z-index: 2;
}
.str-sec7__butterfly {
  position: absolute;
  left: 36.1rem;
  bottom: 71.3rem;
  width: 4.3rem;
  z-index: 2;
}
.str-sec7 .str-inner {
  height: 100%;
}
.str-sec7__info {
  position: absolute;
  left: 0;
  bottom: 18.2rem;
  width: 100%;
  z-index: 3;
}
.str-sec7__info dl {
  position: relative;
  height: 24.5rem;
  margin: 0;
  border-radius: 2rem;
  overflow: hidden;
  padding: 6.2rem 0 0 8.5rem;
  background-color: #fff;
  background-image: repeating-linear-gradient(0deg, #FFF7F7 0, #FFF7F7 0.1rem, transparent 0.1rem, transparent 1.075rem), repeating-linear-gradient(90deg, #FFF7F7 0, #FFF7F7 0.1rem, transparent 0.1rem, transparent 1.075rem);
  box-shadow: 0 0.5rem 0 rgba(39, 135, 93, 0.28);
  border: 2px solid #FFD14B;
}
.str-sec7__info dl::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1.9rem;
  background: #FFD14B;
  border-radius: 1.6rem 1.6rem 0 0;
}
.str-sec7__info-row {
  display: flex;
  align-items: center;
  margin-top: 1.1rem;
}
.str-sec7__info-row:first-child {
  margin-top: 0;
}
.str-sec7__info-row dt {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20.7rem;
  height: 6.3rem;
  background: #FFA50A;
  border-radius: 3.15rem;
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 2.97rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.025em;
  line-height: 1;
}
.str-sec7__info-row dd {
  margin-left: 2.3rem;
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 2.97rem;
  font-weight: 700;
  color: #221F1F;
  letter-spacing: -0.025em;
  line-height: 1;
}

/* ============================================================
 * SECTION 8 · 사업 소개 + 더 좋은 양육 캠페인
 * ============================================================ */
.str-sec8 {
  background: #fff;
  padding: 15.1rem 0 0;
}
.str-sec8__title {
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 4.8rem;
  font-weight: 400;
  color: #221F1F;
  letter-spacing: -0.025em;
  line-height: 8rem;
  text-align: center;
}
.str-sec8__title b {
  font-weight: 800;
}
.str-sec8__title b.green {
  color: #00BA60;
}
.str-sec8__biz {
  display: flex;
  justify-content: center;
  gap: 2.9rem;
  list-style: none;
  margin: 12rem 0 0;
  padding: 0;
  width: 120.2rem;
  margin-left: -9.9rem;
}
.str-sec8__campaigns {
  margin-top: 6.2rem;
  /* 사업 ↔ 캠페인 사이 세로 디바이더 (PSD 모양36: 4x103, 중앙) */
}
.str-sec8__campaigns::before {
  content: "";
  display: block;
  width: 2px;
  height: 10.3rem;
  margin: 0 auto;
  background: #000;
}
.str-sec8__camp-title {
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 4.8rem;
  font-weight: 400;
  color: #221F1F;
  letter-spacing: -0.025em;
  line-height: 7.6rem;
  text-align: center;
  margin: 4rem 0 0;
}
.str-sec8__camp-title b {
  font-weight: 800;
}
.str-sec8__camp-title b.green {
  color: #00BA60;
}
.str-sec8__camp-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8.8rem 2.8rem;
  list-style: none;
  margin: 10rem 0 0 -9.9rem;
  padding: 0;
  width: 120.2rem;
}

.str-biz {
  position: relative;
  width: 38.2rem;
  height: 53.1rem;
  /* 카드 박스 — PSD 사각형23: 세로 그라데이션 + 상단 2px 라인(#BEE2B8) + DropShadow(#506B1E 25%) */
  background: linear-gradient(180deg, #E8F8EB, #E9F5D4);
  border-top: 2px solid #BEE2B8;
  border-radius: 2rem;
  box-shadow: 0 0.5rem 0.5rem rgba(80, 107, 30, 0.25);
  /* 하트 대(40%)/소 — 카드 진입(motion-play) 시 순차 스케일 업 */
}
.str-biz__hearts {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.str-biz__heart-lg, .str-biz__heart-sm {
  position: absolute;
  background: no-repeat center/contain;
  opacity: 0;
  transition: transform 0.66s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.48s ease;
}
.str-biz {
  /* 신규 컷 (section08_heart / _sm) — PSD 하트 중심(카드 x중앙, y 10248-10101=147) 기준 중앙 배치 */
}
.str-biz__heart-lg {
  left: 50%;
  top: 14.7rem;
  transform: translate(-50%, -50%) scale(0.8);
  width: 34.6rem;
  height: 29rem;
  background-image: url("https://cdn.gni.kr/assets/images/strength/pc/section08_heart.webp");
}
.str-biz__heart-sm {
  left: 50%;
  top: 14.7rem;
  transform: translate(-50%, -50%) scale(0.8);
  width: 31.8rem;
  height: 26.4rem;
  background-image: url("https://cdn.gni.kr/assets/images/strength/pc/section08_heart_sm.webp");
}
.str-biz.motion-play .str-biz__heart-lg {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  transition-delay: 0.42s;
}
.str-biz.motion-play .str-biz__heart-sm {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  transition-delay: 0.72s;
}
.str-biz {
  /* 일러스트 — 그림자 베이크 컷 (여백 16, 앵커 -16 보정), 카드별 PSD 좌표 */
}
.str-biz__art {
  position: absolute;
}
.str-biz:nth-child(1) .str-biz__art {
  left: 7.6rem;
  top: 2.9rem;
  width: 23.8rem;
}
.str-biz:nth-child(2) .str-biz__art {
  left: 8rem;
  top: 1rem;
  width: 22.8rem;
}
.str-biz:nth-child(3) .str-biz__art {
  left: 3.6rem;
  top: 0.4rem;
  width: 31.6rem;
}
.str-biz h3 {
  position: absolute;
  left: 0;
  top: 27.5rem;
  width: 100%;
  text-align: center;
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 3rem;
  font-weight: 800;
  color: #221F1F;
  letter-spacing: -0.025em;
  line-height: 1;
  margin: 0;
}
.str-biz ul {
  position: absolute;
  left: 3.8rem;
  top: 34.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.str-biz ul li {
  position: relative;
  padding-left: 2.8rem;
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 2.2rem;
  font-weight: 400;
  color: #221F1F;
  letter-spacing: -0.025em;
  line-height: 3.6rem;
}
.str-biz ul li::before {
  content: "";
  position: absolute;
  left: 0.8rem;
  top: 1.4rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: #221F1F;
}

.str-camp {
  position: relative;
  width: 58.7rem;
}
.str-camp a {
  display: block;
  text-decoration: none;
  border-radius: 2rem;
  box-shadow: 0 0 1rem rgba(97, 97, 97, 0.21);
}
.str-camp__thumb {
  width: 58.7rem;
  height: 26.1rem;
  border-radius: 2rem 2rem 0 0;
  overflow: hidden;
}
.str-camp__thumb img {
  height: 100%;
  object-fit: cover;
}
.str-camp__name {
  position: relative;
  display: flex;
  align-items: center;
  height: 10.3rem;
  background: #56CA92;
  border-radius: 0 0 2rem 2rem;
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 3rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.025em;
  line-height: 1;
  padding-left: 4.1rem;
  overflow: hidden;
}
a:hover .str-camp__arrow {
  animation: str-arrow-swish 0.7s;
}
.str-camp__arrow {
  position: absolute;
  right: 3.9rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.7rem;
  height: 2.7rem;
  background: url("https://cdn.gni.kr/assets/images/strength/pc/section08_img08.webp") no-repeat center/contain;
}

/* ── FOOTER ── */
.str-footer {
  margin-top: 12.5rem;
  height: 16rem;
  background: linear-gradient(90deg, #E9F5D1, #E8F8ED);
}
.str-footer .str-inner {
  width: 120.2rem;
  display: flex;
  align-items: center;
  height: 100%;
}
.str-footer p {
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 2.4rem;
  font-weight: 400;
  color: #221F1F;
  letter-spacing: -0.025em;
  line-height: 1;
  margin: 0;
}
.str-footer p b {
  font-weight: 800;
}
.str-footer__btn {
  position: relative;
  margin-left: auto;
  display: flex;
  align-items: center;
  width: 21.7rem;
  height: 6rem;
  background: #fff;
  border: 0.2rem solid #221F1F;
  border-radius: 2.85rem;
  text-decoration: none;
  font-family: "NanumSquareNeo", sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: #221F1F;
  letter-spacing: -0.025em;
  line-height: 1;
  padding-left: 4.4rem;
}
.str-footer__btn i {
  position: absolute;
  right: 2.8rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.4rem;
  height: 1.3rem;
  background: url("https://cdn.gni.kr/assets/images/strength/pc/section08_img09.webp") no-repeat center/contain;
}

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