@charset "utf-8";
/* ===== franchise page styles ===== */

/* ==================== 프랜차이즈 랜딩 : 서브헤더 리모컨 ====================
   서브헤더는 브랜드 공통 .sub_header/.sub_header_pill 레이아웃 재사용. */
.franchise_land {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

/* 공통 네이비 바(.petmart_navy_bar) — 실적·수상 묶음 마감 */
.franchise_land .petmart_navy_bar {
  margin-bottom: 1vw;
}

/* 위치만 con02 상단에 맞춤 (공통 .sub_header 재사용 + top override) */
.franchise_subhd {
  display: flex;
  justify-content: center;
  align-items: center;
  top: 2.7vw;
}

/* 리모컨 5개 → 공통 pill gap(브랜드 3탭용) override */
.franchise_subhd .sub_header_pill {
  gap: calc(var(--px) * 88);
}

/* 스크롤 고정(script.js 공통 토글) 시 메인헤더 바로 아래(5.4068vw=103px) — 브랜드와 동일.
   ★ 위 .franchise_subhd{top:2.7vw}(franchise.css 나중 로드)가 공통 .subhd_stuck{top:5.4068vw}를
     덮어버려 고정이 헤더 위로 파고듦 → 복합선택자로 stuck 때 top 을 헤더 아래로 되돌린다. */
.franchise_subhd.subhd_stuck {
  top: 5.4068vw;
}

/* ==================== con02 : 전국 펫마트 160+ 호점 돌파 (히어로) ====================
   bg = econ2_bg 그라데이션(.bg_img). 데코(스포트라이트/마스코트) 삐짐 → overflow visible. */
/* 전역 #section_wrap section{overflow:hidden} 특정도 이겨서 데코 삐짐 허용 */
#section_wrap .con02 {
  overflow: visible;
}

.con02 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: calc(var(--px) * 969);
}

/* 상단 블루 딤 : econ2_bg 위(z1)·빛(beam z1, DOM 뒤라 위에서 blend)·램프(z2) 아래.
   시안 상단이 econ2_bg 보다 진해 스포트라이트 빛이 튀도록 살짝 어둡게. */
.con02::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 42%;
  background: linear-gradient(180deg, rgba(60, 98, 148, 0.52) 0%, rgba(66, 104, 152, 0) 100%);
  pointer-events: none;
}

.con02_iner {
  padding-top: 13.6vw;
}

.con02_eyb {
  color: #141414;
  font-weight: 700;
  font-size: calc(var(--px) * 26);
  line-height: 1;
}

/* 타이틀 = "전국 펫마트" + 160(대형) + "호점 돌파" 한 줄 (하단 정렬) */
.con02_tit {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-right: 3.8vw;
  margin-top: 1.8vw;
}

.con02_tit_t {
  color: #092d60;
  font-size: calc(var(--px) * 80);
  line-height: 1;
}

.con02_num_wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: 0 calc(var(--px) * 45);
}

.con02_num {
  flex-shrink: 0;
  width: calc(var(--px) * 391);
  white-space: nowrap;
  text-align: center;
  color: #0b1a2f;
  font-size: calc(var(--px) * 175);
  line-height: 1;
}

/* 하트+ 뱃지 (160 우상단) */
.con02_badge {
  top: calc(var(--px) * 4);
  right: calc(var(--px) * -42);
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 51);
  aspect-ratio: 51 / 43;
}

.con02_sub {
  margin-top: 1.5vw;
  font-size: calc(var(--px) * 40);
  line-height: 1.3;
  text-align: center;
}

.con02_btn {
  margin-top: 2.2vw;
}

/* ─ 상단 스포트라이트 (코너 조명) ─ 데코는 bg_img(DOM 마지막) 위로 z-index */
.con02_spot {
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  width: calc(var(--px) * 112);
  aspect-ratio: 112 / 194;
}

.con02_spot_l {
  left: 6.3%;
}

.con02_spot_r {
  right: 6.1%;
}

/* ─ 스포트라이트 빛(beam) — econ2_01a/02a. bg 위(z1)·램프 아래. screen 블렌드 + sunshine 펄스(좌우 딜레이 다르게) ─ */
.con02_light {
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 8vw;
  width: calc(var(--px) * 728);
  aspect-ratio: 728 / 974;
  mix-blend-mode: screen;
  animation: sunshine 3s ease-in-out infinite;
}

.con02_light_l {
  left: 5.7%;
}

.con02_light_r {
  right: 5.7%;
  animation-delay: 0.9s;
}

/* ─ 좌우 마스코트 (강아지/고양이) ─ */
.con02_mascot {
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  bottom: 4vw;

}

.con02_masc_l {
  left: 19.4%;
  width: calc(var(--px) * 541);
  aspect-ratio: 541 / 411;
}

.con02_masc_r {
  right: 9.6%;
  width: calc(var(--px) * 527);
  aspect-ratio: 527 / 385;

}

/* ─ 중앙 원형 장식 (동심원 2개, 은은한 흰 링 econ2_03/03a) — 가로는 flex-center 부모가 중앙. bg 위(z1)·콘텐츠 아래 ─ */
.con02_ring {
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.con02_ring1 {
  top: 0;
  width: calc(var(--px) * 969);
  aspect-ratio: 1 / 1;
}

.con02_ring2 {
  top: 5.8vw;
  width: calc(var(--px) * 750);
  aspect-ratio: 1 / 1;
}


/* ==================== con05 : 한눈에 보는 펫마트 핵심 경쟁력 (스크롤 타임라인) ====================
   다크 라운드 패널: sticky 타이틀 + 지그재그 9박스(econ5_04~04h) + 중앙선/노란점 + PETMILY.
   박스 fade in/out · 점 분기 snap = js/franchise.js (GSAP ScrollTrigger). sticky 위해 overflow visible. */


.con05 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100vh;
  /* 핀: 패널 = 뷰포트 1화면 (1100px 고정이면 뷰포트보다 커서 하단 페이드·petmily 가 잘림). 박스는 con05_flow 가 스크럽으로 흐름 */
}

/* 다크 라운드 패널 (콘텐츠 컨테이너, absol 자식 기준) */
.con05_iner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 96.69%;
  height: 100%;
  background: #141414;
  border-radius: calc(var(--px) * 40);
  overflow: hidden;
  /* 핀 컨베이어: flow 가 위/아래로 넘치는 박스를 패널 밖으로 안 보이게 clip */
}

/* 중앙 세로선 */
.con05_line {
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 15.1vw;
  width: calc(var(--px) * 1);
  height: 100%;
  background: #333;
}

.con05_line2 {
  top: 0;
  height: 3.9vw;
}

/* 노란점 = 밝은 중심 + 반투명 노란 글로우(디자인=투명한 요소). top 은 js 가 활성박스로 snap(transition) */
.con05_dot {
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 49.5%;
  top: 22.1vw;
  width: calc(var(--px) * 21);
  height: calc(var(--px) * 21);
  background: #ffd11e;
  border-radius: 50%;
  z-index: 2;
}

/* 점 주변 반투명 글로우 — 은은하게 커지며 fade (scale_opa) */
.con05_dot::before {
  content: '';
  position: absolute;
  inset: calc(var(--px) * -4);
  border-radius: 50%;
  background: rgba(255, 209, 30, 0.2);
  animation: scale_opa 2.4s ease-out infinite;
}

/* 타이틀 묶음 (sticky — 스크롤 따라옴). sticky top 은 메인헤더(fixed 5.4vw) 아래로 둬서 하트 안 가림 */
.con05_twrap {
  position: relative;
  /* z-index 유효화 → 페이드(3)·박스(2) 위에 타이틀 선명 유지 */
  z-index: 5;
  width: 100%;
  margin-top: 5.2vw;
}

.con05_heart {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 41);
  aspect-ratio: 41 / 35;
}

.con05_tit {
  margin-top: 0.6vw;
  color: #fff;
  font-size: calc(var(--px) * 50);
  line-height: 1.15;
  letter-spacing: -0.13vw;
  text-align: center;
}

.tit_sm {
  font-size: calc(var(--px) * 40);
}

.fz30 {
  font-size: calc(var(--px) * 30);
}

/* 박스 컨베이어 래퍼 — 핀 동안 GSAP 이 y 로 위로 끌어올려 박스가 아래→위 흐름.
   높이는 원래 박스 배치 캔버스(1760) 유지 → con05_iner(1화면)보다 커서 overflow hidden 으로 clip → js 가 위로 스크럽.
   타이틀 겹치기 전 소멸은 상단 페이드 오버레이(con05_fade_t)가 담당. */
.con05_flow {
  position: absolute;
  top: calc(var(--px) * 60);
  /* 첫 박스가 상단 페이드 밖(선명 구간)에서 시작하도록 캔버스를 내림 */
  left: 0;
  z-index: 2;
  width: 100%;
  height: calc(var(--px) * 1760);
}

/* 상단 페이드 — 박스 컨베이어가 타이틀 겹치기 전 배경(#141414)에 소멸. z: 박스(2) 위·타이틀(5) 아래 */
.con05_fade {
  left: 0;
  z-index: 3;
  width: 100%;
  pointer-events: none;
}

/* 불투명 구간(70% = 266px)이 타이틀 하단(260px)을 덮어야 박스가 글자와 안 겹침. 끝선(380px) = 첫 박스 카드 상단 */
.con05_fade_t {
  top: 0;
  height: calc(var(--px) * 380);
  background: linear-gradient(#141414 70%, rgba(20, 20, 20, 0));
}

/* 하단은 페이드 없음 : 패널 하단 = 뷰포트 하단이라 박스가 화면 끝에서 자연스레 올라오고,
   페이드를 깔면 그 아래 petmily(z1) 가 통째로 묻힌다. (박스는 iner overflow:hidden 으로 클립) */
.con05_fade_b {
  display: none;
}

/* 경쟁력 박스 공통 (완성형 이미지 = 그림자 51px 포함 export 672x342). 초기 opacity 는 js 제어 */
.con05_box {
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 672);
  aspect-ratio: 672 / 342;
}

.con05_box1 {
  left: 12.27%;
  top: 14.1vw;
}

.con05_box2 {
  left: 51.03%;
  top: 16.7vw;
}

.con05_box3 {
  left: 12.27%;
  top: 28.9vw;
}

.con05_box4 {
  left: 51.03%;
  top: 31.5vw;
}

.con05_box5 {
  left: 12.27%;
  top: 43.8vw;
}

.con05_box6 {
  left: 51.03%;
  top: 46.5vw;
}

.con05_box7 {
  left: 12.27%;
  top: 58.6vw;
}

.con05_box8 {
  left: 51.03%;
  top: 61.3vw;
}

.con05_box9 {
  left: 12.27%;
  top: 73.4vw;
}

/* 박스별 캐릭터 (con05_pop) — 카드 위에 걸터앉아 앞발로 카드 모서리를 짚는 배치.
   원본 econ5_03.png 는 앞발이 우측 → 좌측 박스(pop_r)는 원본 그대로, 우측 박스(pop_l)는 미러해야 앞발이 카드 모서리를 짚음.
   등장 = 붙어있는 모서리 쪽에서 옆으로 스윽 (clip 은 con05_pop). */
.con05_pop {
  position: absolute;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  top: calc(var(--px) * 107);
  width: calc(var(--px) * 70);
  aspect-ratio: 70 / 169;
  overflow: hidden;
  /* clip — 안쪽 img 가 카드 모서리 쪽에서 옆으로 슬라이드해 들어옴 */
}

.con05_pop>img {
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 좌측 박스 : 캐릭터가 박스 우측(중앙 방향)에 삐죽 — 원본. 초기엔 우측 모서리 밖으로 숨음 → .in 시 오른쪽에서 스윽 */
.pop_r .con05_pop {
  right: calc(var(--px) * 46);
}

.pop_r .con05_pop>img {
  transform: translateX(100%);
}

/* ★ pop_r/pop_l 은 .con05_box 자신에 붙은 클래스 → 자손선택자(공백)로 쓰면 매칭 안 됨(미러 풀림). 반드시 붙여쓸 것 */
.con05_box.in.pop_r .con05_pop>img {
  transform: translateX(0);
}

/* 우측 박스 : 캐릭터가 박스 좌측(중앙 방향)에 삐죽 — 미러. 초기엔 좌측 모서리 밖으로 숨음 → .in 시 왼쪽에서 스윽 */
.pop_l .con05_pop {
  left: calc(var(--px) * 46);
}

.pop_l .con05_pop>img {
  transform: translateX(-100%) scaleX(-1);
}

.con05_box.in.pop_l .con05_pop>img {
  transform: translateX(0) scaleX(-1);
}

/* WE ARE PETMILY (우하단) — 박스(z2) 뒤 배경 워터마크 */
.con05_petmily {
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 54.18%;
  bottom: -0.6vw;
  width: calc(var(--px) * 741);
  aspect-ratio: 741 / 236;
}


/* ==================== con06 : Fulfillment 물류 인프라 (3카드 + 신호등/호버/트럭) ====================
   PSD 05_창업 y4959~6825 흰배경. 카드폭 1484 중앙. 카드1 노랑/신호등, 카드2 연노랑/영상, 카드3 연파랑/스택아이템/트럭. */
/* 핀 패널 = 1화면. 핀 구간엔 고정 UI(헤더/퀵)가 페이드아웃되므로 화면 전체를 쓴다.
   패널이 뷰포트보다 크면 아래가 영영 안 보인다(gsap 핀.md §8-7) → height 100vh + 세로 중앙정렬. */
.con06 {
  background: #ffffff;
  height: 100vh;
  margin-top: 5.25vw;
  /* con05 와의 간격(1905 기준 100px) — 패널 안(padding)이 아니라 섹션을 밀어낸다. 핀 걸리기 전에 지나가는 여백 */
}

/* 상단 여백은 핀 이전 원래 값(7.7vw). "트럭 바닥이 화면 안" 제약과 아슬아슬하게 맞으므로
   여기서 더 벌리려면 덱 오프셋(16px)을 줄이거나 트럭 hang(-4vw)을 올려야 한다. */
.con06_iner {
  position: relative;
  /* 덱 offsetTop 의 기준(레이아웃 좌표 → transform 영향 없음) */
  height: 100%;
  padding-top: 7.7vw;
  padding-bottom: 0;
  /* 하단 여백은 js 가 덱 y 로 잡는다 */
}

/* 짧은 화면(1080 모니터의 실제 뷰포트 등)에서는 상단 여백을 줄여 트럭까지 담는다 */
@media (min-width: 600px) and (max-height: 930px) {
  .con06_iner {
    padding-top: 4vw;
  }
}

/* ── 헤더 ── */
.con06_eyb {
  color: #8a8a8a;
  font-size: calc(var(--px) * 18);
}

.con06_tit {
  margin-top: 1.4vw;
  color: #141414;
  font-size: calc(var(--px) * 42);
  line-height: 1.2;
  letter-spacing: -0.09vw;
  text-align: center;
}

/* Zero 이미지 — 줄높이(50)만 차지하고 실제 이미지(64)는 넘쳐 표시(라인 부풀림 방지) */
.con06_zero {
  display: inline-block;
  width: calc(var(--px) * 172);
  aspect-ratio: 172 / 64;
  margin-bottom: -1.2vw;
  margin-left: 0.5vw;
  margin-right: -0.9vw;
}

.con06_desc {
  margin-top: 1.3vw;
  color: #141414;
  font-size: calc(var(--px) * 20);
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

/* ── 카드 공통 ── */
.con06_card {
  position: relative;
  width: calc(var(--px) * 1484);
  border-radius: calc(var(--px) * 40);
}

/* ── 카드 덱 (핀 스택) ── 3장을 같은 원점에 겹쳐두고 26px 씩 어긋나게 착지시킨다.
   카드 높이가 361 → 362 → 478 로 단조 증가라 뒷장이 앞장을 완전히 덮음 → 윗변 띠만 노출.
   덱 높이 = 마지막 오프셋(52) + 카드3 높이(478). 마스코트·트럭이 넘치므로 overflow 는 절대 hidden 금지. */
.con06_deck {
  position: relative;
  width: calc(var(--px) * 1484);
  height: calc(var(--px) * 510);
  /* 마지막 오프셋(32) + 카드3 높이(478) */
  margin-top: 1.6vw;
  /* 원래 카드 간격(con06_card margin-top) 과 동일 */
}

.con06_deck>.con06_card {
  position: absolute;
  left: 0;
  margin-top: 0;
  /* 세로 스택용 1.6vw 해제 */
  transform-origin: 50% 0;
  /* 밑장 축소(scale) 시 윗변 고정 → 노출 띠 16px 유지 */
}

.con06_deck>.con06_card1 {
  top: 0;
  z-index: 1;
}

.con06_deck>.con06_card2 {
  top: calc(var(--px) * 16);
  z-index: 2;
}

.con06_deck>.con06_card3 {
  top: calc(var(--px) * 32);
  z-index: 3;
}

/* ── 카드1 : 노랑 (좌 텍스트 / 중앙 신호등3원 / 우 마스코트) ── */
/* 카드1 = 좌 텍스트(흐름) + 신호등/마스코트(absol 고정좌표) */
.con06_card1 {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  height: calc(var(--px) * 361);
  margin-top: 1.6vw;
  padding-left: calc(var(--px) * 179);
  overflow: visible;
  background: #ffd11e;
}

.con06_c1txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-shrink: 0;
  width: calc(var(--px) * 380);
}

.con06_c1_tt {
  color: #141414;
  font-size: calc(var(--px) * 28);
  line-height: 1.35;
  letter-spacing: -0.09vw;
}

.con06_c1_desc {
  margin-top: 0.9vw;
  color: #141414;
  font-size: calc(var(--px) * 16);
  font-weight: 500;
  line-height: 1.6;
}

/* 신호등 3원 (겹침 pitch 175) — absol 고정좌표 */
.con06_lights {
  left: calc(var(--px) * 633);
  top: calc(var(--px) * 83);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.con06_light {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 195);
  height: calc(var(--px) * 195);
  margin-left: calc(var(--px) * -20);
  border: 1px solid #141414;
  border-radius: 50%;
  background: #ffffff;
  transition: background 0.4s, border-color 0.4s;
}

.con06_light:first-child {
  margin-left: 0;
}

.con06_light_tx {
  color: #141414;
  font-size: calc(var(--px) * 21);
  line-height: 1.25;
  text-align: center;
  transition: color 0.4s;
}

.con06_light.on {
  background: #141414;
  border-color: #141414;
}

.con06_light.on .con06_light_tx {
  color: #ffffff;
}

/* 마스코트 (우, absol — 하단 넘침). econ6_02 콘텐츠 318/우여백107 → 폭400에 dog ~299 */
.con06_c1mascot {
  right: -6.2vw;
  top: 3.4vw;
  width: calc(var(--px) * 459);
  aspect-ratio: 459 / 332;
}

/* ── 카드2 : 연노랑 (좌 텍스트 / 우 영상) ── */
.con06_card2 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: calc(var(--px) * 362);
  margin-top: 1.6vw;
  padding-left: calc(var(--px) * 179);
  padding-right: calc(var(--px) * 28);
  border: 1px solid #dfdfdf;
  background: #fff7da;
}

.con06_c2txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-shrink: 0;
}

.con06_c2_tt {
  color: #141414;
  font-size: calc(var(--px) * 28);
  line-height: 1.35;
  letter-spacing: -0.09vw;
}

.con06_c2_desc {
  margin-top: 0.9vw;
  color: #141414;
  font-size: calc(var(--px) * 16);
  font-weight: 500;
  line-height: 1.6;
}

/* 영상 프레임 */
.con06_c2vid {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 715);
  height: calc(var(--px) * 310);
  border-radius: calc(var(--px) * 40);
  overflow: hidden;
  background: #0b1a2f;
}

.con06_video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/* ── 카드3 : 연파랑 (타이틀 / 아이템3 스택 / 트럭) ── */
.con06_card3 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: calc(var(--px) * 478);
  margin-top: 1.6vw;
  padding-top: 4.4vw;
  background: #dff1ff;
}

.con06_c3_tt {
  color: #141414;
  font-size: calc(var(--px) * 28);
  line-height: 1.35;
  letter-spacing: -0.09vw;
  text-align: center;
}

/* 아이템들 관통하는 1px 회색선(아이템 알약 보더색). z0 = 아이템 body/tab(z1~3) 뒤 → 갭·좌우여백에만 보임 */
.con06_c3line {
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  top: calc(var(--px) * 265);
  width: 100%;
  height: 1px;
  background: #becddb;
}

.con06_items {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  margin-top: 1.7vw;
  gap: calc(var(--px) * 25);
}

/* 아이템 = 탭(라벨+점) + 바디(제목+desc) 세로 스택. 활성 시 탭↑/바디↓ + navy + 노란점 */
.con06_item {
  position: relative;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: calc(var(--px) * 369);
  height: calc(var(--px) * 211);
}

.con06_item_body {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(var(--px) * 150);
  padding: 0 calc(var(--px) * 30);
  border: 1px solid #becddb;
  border-radius: calc(var(--px) * 75);
  background: #ffffff;
  transition: transform 0.45s;
}

.con06_item_btt {
  color: #141414;
  font-size: calc(var(--px) * 22);
  font-weight: 700;
  text-align: center;
}

.con06_item_desc {
  margin-top: 0.6vw;
  color: #141414;
  font-size: calc(var(--px) * 15);
  line-height: 1.45;
  text-align: center;
}

/* 탭 = 바디와 동일 높이(150), 항상 body 아래(z1). 비활성=아래로(하단 peek)/활성=위로(상단 peek). 라벨은 peek쪽 정렬 */
.con06_item_tab {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: calc(var(--px) * 150);
  padding: calc(var(--px) * 15) 0;
  transform: translateY(calc(var(--px) * 61));
  border: 1px solid #becddb;
  border-radius: calc(var(--px) * 75);
  background: #dff1ff;
  transition: transform 0.45s, background 0.45s;
}

.con06_item_label {
  color: #141414;
  font-size: calc(var(--px) * 24);
  transition: color 0.4s;
}

/* 점 2개 — 회색(비활성 하단 seam) / 노랑(활성 상단 seam), opacity 로 크로스페이드 */
.con06_item_dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: calc(var(--px) * 17);
  height: calc(var(--px) * 17);
  border-radius: 50%;
  transition: opacity 0.2s;
}

.con06_item_dot_g {
  top: calc(var(--px) * 142);
  background: #aabccb;
  opacity: 1;
}

.con06_item_dot_y {
  top: calc(var(--px) * 53);
  background: #ffd11e;
  opacity: 0;
}

.con06_item.change .con06_item_body {
  transform: translateY(calc(var(--px) * 61));
}

.con06_item.change .con06_item_tab {
  transform: translateY(0);
  background: #0b1a2f;
  align-items: flex-start;
}

.con06_item.change .con06_item_label {
  color: #ffffff;
}

.con06_item.change .con06_item_dot_g {
  opacity: 0;
}

.con06_item.change .con06_item_dot_y {
  opacity: 1;
}

/* 트럭 (좌하단, 카드 넘침, 덜덜 모션) */
.con06_truck {
  display: flex;
  justify-content: center;
  align-items: center;
  left: calc(var(--px) * -205);
  bottom: -4vw;
  width: calc(var(--px) * 606);
  aspect-ratio: 606 / 169;
  transition: left 0.6s ease;
  animation: truckIdle 0.3s ease-in-out infinite;
  z-index: 100;
}


/* ==================== con07 : 유통 거품을 걷어내면 수익이 보입니다 (마진 비교 + 순수익 공개 + 압도적 마진 이유) ====================
   흰 bg. 헤드+VS(완성형 econ7_02/01/03) → 크림패널(도넛 econ7_04 / 중앙 econ7_09+40카운트+econ7_08 / 표 econ7_05 / 불빛 econ7_06·06a screen)
   → 다크패널(마스코트 econ7_10 / ! econ7_11 펄스 / 박스3 신호등 순환 on=노랑). 좌표계: panel-rel top=vw·left=%(패널1845), dark-rel left=%(1481). */
.con07 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  background: #ffffff;
  padding-top: 5vw;
  padding-bottom: 2.5vw;
}

.con07_iner {
  width: 100%;
}

/* ─ A. 헤드 ─ */
.con07_tit {
  color: #141414;
  font-size: calc(var(--px) * 50);
  line-height: 1.1;
  text-align: center;
}

.con07_sub {
  margin-top: 1.2vw;
  color: #141414;
  font-weight: 600;
  font-size: calc(var(--px) * 20);
  line-height: 1;
  text-align: center;
}

/* ─ A. VS 비교 (완성형 이미지 절대배치 — econ7_02 카드=이미지전체 / econ7_03 카드=51px 글로우패딩 중앙) ─ */
.con07_vs {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(var(--px) * 209);
  margin-top: 2.5vw;
}

.con07_vs_card {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: unset;
}

.con07_vs_l {
  left: 13.5879%;
  top: 0;
  width: calc(var(--px) * 687);
  aspect-ratio: 687 / 207;
}

.con07_vs_r {
  left: 47.5329%;
  top: calc(var(--px) * -51);
  width: calc(var(--px) * 788);
  aspect-ratio: 788 / 308;
}

.con07_vs_badge {
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 48.399%;
  top: calc(var(--px) * 47);
  width: calc(var(--px) * 61);
  aspect-ratio: 61 / 115;
}

/* ─ B. 실제 매장 순수익 공개 (크림 패널) ─ */
.con07_panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 96.8504%;
  height: calc(var(--px) * 1340);
  margin-top: 3.1vw;
  border-radius: calc(var(--px) * 40);
  background: linear-gradient(180deg, #e8ddc4 0%, #f8f4eb 40%);
  overflow: visible;
}

.con07_panel_tit {
  margin-top: 5.7vw;
  color: #141414;
  font-size: calc(var(--px) * 50);
  line-height: 1;
  text-align: center;
}

.con07_panel_sub {
  margin-top: 1.2vw;
  color: #8a8a8a;
  font-weight: 600;
  font-size: calc(var(--px) * 20);
  line-height: 1;
  text-align: center;
}

/* 불빛 (검정블롭 → mix-blend screen + sunshine 펄스). z1 = 도넛/표 아래 */
.con07_light {
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  width: calc(var(--px) * 656);
  aspect-ratio: 656 / 897;
  mix-blend-mode: screen;
  animation: sunshine 3s ease-in-out infinite;
  pointer-events: none;
}

.con07_light_l {
  right: 5vw;
}

.con07_light_r {
  left: 5vw;
  animation-delay: 0.9s;
}

/* 좌 도넛차트 (econ7_04 완성형) */
.con07_donut {
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 7.2629%;
  top: 15.1vw;
  width: calc(var(--px) * 526);
  aspect-ratio: 526 / 413;
}

/* 중앙 노란 도넛 (econ7_09 ring + 40 카운트 + econ7_08 마스코트) */
.con07_center {
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 488);
  aspect-ratio: 1 / 1;
  margin-top: 1.9vw;
  border-radius: 50%;
  overflow: hidden;
}

.con07_center_ring {
  width: 100%;
}

/* 40 + % (부모 flex-center → inset 없는 absol 은 자동 중앙) */
.con07_40 {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}

.con07_40num {
  color: #141414;
  font-size: calc(var(--px) * 151);
  line-height: 1;
  letter-spacing: -0.55vw;
}

/* % 뱃지 = 노란 하트(econ7_07) + 그 위 작은 % — 40 우상단 */
.con07_pct {
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 71.9%;
  top: calc(var(--px) * 178);
  width: calc(var(--px) * 51);
  aspect-ratio: 51 / 43;
}

.con07_pct img {
  width: 100%;
}

.con07_pct_t {
  position: absolute;
  color: #141414;
  font-size: calc(var(--px) * 24);
  line-height: 1;
}

.con07_center_mas {
  z-index: 3;
  bottom: calc(var(--px) * -3);
  width: calc(var(--px) * 292);
  aspect-ratio: 292 / 194;
}

/* 우 표 (econ7_05 완성형) */
.con07_table {
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 66.5041%;
  top: 16.9vw;
  width: calc(var(--px) * 433);
  aspect-ratio: 433 / 385;
}

/* ─ C. 다크 패널 : 타사보다 압도적으로 마진율이 높은 이유 ─ */
.con07_reasons {
  z-index: 3;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  left: 9.9187%;
  top: 41.8vw;
  width: 80.271%;
  height: calc(var(--px) * 466);
  border-radius: calc(var(--px) * 30);
  background: #141414;
}

/* 좌 마스코트 (패널 좌측 걸쳐 삐짐) — visual-check SAD: 우15/위4 보정 */
.con07_reasons_mas {
  display: flex;
  justify-content: center;
  align-items: center;
  left: calc(var(--px) * -14);
  top: calc(var(--px) * -14);
  width: calc(var(--px) * 185);
  aspect-ratio: 180 / 513;
}

/* ! 아이콘 (econ7_11) + 바깥 퍼지는 펄스 */
.con07_excl {
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 13.44%;
  top: 3.6vw;
  width: calc(var(--px) * 71);
  aspect-ratio: 1 / 1;
}

.con07_excl::before {
  content: "";
  position: absolute;
  inset: calc(var(--px) * 19);
  border-radius: 50%;
  background: rgba(255, 233, 71, 0.5);
  animation: scale_opa 2.4s ease-out infinite;
  pointer-events: none;
}

.con07_excl img {
  position: relative;
  z-index: 1;
}

.con07_reasons_tit {
  left: 19.31%;
  top: 6.7vw;
  color: #ffffff;
  font-size: calc(var(--px) * 40);
  line-height: 1.25;
}

/* 오른쪽 박스 묶음 (신호등 순환 on=노랑) */
.con07_boxes {
  display: flex;
  justify-content: center;
  align-items: center;
  left: 47.87%;
  top: 3vw;
  width: calc(var(--px) * 682);
  height: calc(var(--px) * 352);
}

.con07_box {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 348);
  height: calc(var(--px) * 180);
  border-radius: calc(var(--px) * 20);
  background: #ffffff;
  box-shadow: 0 0 calc(var(--px) * 59) rgba(85, 74, 48, 0.2);
  transition: background-color 0.5s ease;
}

.con07_box.on {
  background: #ffd11e;
}

.con07_box1 {
  z-index: 2;
  left: 0;
  top: calc(var(--px) * -12);
}

.con07_box2 {
  z-index: 3;
  left: calc(var(--px) * 334);
  top: calc(var(--px) * 91);
}

.con07_box3 {
  z-index: 1;
  left: 0;
  top: calc(var(--px) * 186);
}

.con07_box_tit {
  font-weight: 700;
  font-size: calc(var(--px) * 23);
  line-height: 1;
}

.con07_box_desc {
  margin-top: calc(var(--px) * 13);
  font-weight: 500;
  font-size: calc(var(--px) * 16);
  line-height: 1.5;
  text-align: center;
}

/* 다크 패널 관통 세로선 (박스 뒤 · #434343 1px, PSD x=1102/1436) */
.con07_vline {
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  width: 1px;
  height: 100%;
  background: #434343;
}

.con07_vline1 {
  left: 59.2%;
}

.con07_vline2 {
  left: 80.8%;
}


/* ==================== con08 : 대한민국 최대 규모 상품군 (센터 헤더 + 노란박스 3슬라이드 + 좌우 매장사진) ==================== */
.con08 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.con08_iner {
  position: relative;
  width: 100%;
  padding-top: 8.2vw;
  padding-bottom: 3.3vw;
}

/* 좌우 매장사진 — 좌/우 그룹 각각 absol(top+left/right 1회) + 내부 flex 컬럼(3장 스택) */
.con08_pics {
  position: absolute;
  top: 5vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 1.2vw;
}

.con08_pics_l {
  left: 5.5%;
}

.con08_pics_r {
  right: 5.5%;
}

/* 모바일 마퀴 seamless 복제본 — PC 숨김(모바일 @media 599 에서 노출) */
.con08_pics_dup {
  display: none;
}

/* 사진 1장 (스타디움 라운드) */
.con08_pic {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 515);
  aspect-ratio: 515 / 231;
  border-radius: calc(var(--px) * 115);
  overflow: hidden;
}

.con08_pic img {
  width: 100%;
}

/* 센터 헤더 (정적) */
.con08_eyb {
  font-size: calc(var(--px) * 30);
  color: #8a8a8a;
  line-height: 1;
}

.con08_tit {
  margin-top: 1.5vw;
  font-size: calc(var(--px) * 50);
  line-height: 1.15;
  text-align: center;
}

.con08_desc {
  margin-top: 1.9vw;
  font-size: calc(var(--px) * 20);
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

/* 노란박스 (3슬라이드 fade) */
.con08_ybox {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 574);
  height: calc(var(--px) * 295);
  margin-top: 4.5vw;
  border-radius: calc(var(--px) * 30);
  background: #ffd11e;
}

/* POINT 뱃지 (상단 걸침 · 번호 JS 갱신) */
.con08_point {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: -2.2vw;
  width: calc(var(--px) * 94);
  height: calc(var(--px) * 94);
  border-radius: 50%;
  background: #141414;
}

.con08_point_l {
  font-size: calc(var(--px) * 13);
  color: #fff;
  line-height: 1;
}

.con08_point_n {
  margin-top: calc(var(--px) * 7);
  font-size: calc(var(--px) * 30);
  color: #fff;
  line-height: 1;
}

/* 화살표 (공통 swiper_navbtn 검정 + 흰 쉐브론 · 호버 외곽선 #141414) */
.con08_navbtn {
  position: absolute;
  z-index: 3;
  top: calc(var(--px) * 134);
  --sbtn-ring: #141414;
}

.con08_prev {
  left: calc(var(--px) * 32);
}

.con08_next {
  right: calc(var(--px) * 31);
}

/* 슬라이드 (fade — 타이틀/설명/키워드만 바뀜) */
.con08_swiper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.con08_sitem {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-top: calc(var(--px) * 90);
}

.con08_stit {
  font-size: calc(var(--px) * 24);
  line-height: 1;
}

.con08_sdesc {
  margin-top: 0.9vw;
  font-size: calc(var(--px) * 16);
  line-height: 1.4;
  text-align: center;
}

.con08_skey {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.3vw;
  font-size: calc(var(--px) * 70);
  line-height: 1;
  text-align: center;
}

.con08_navbtn:hover::after {
  width: 220%;
}

/* ==================== con03 : PET COMMERCE NO.1 — 압도적 브랜드 파워 (어워드/트로피 배너) ====================
   ★ 중첩 iner 박스 구조: con03_iner > con03_box(라운드 네이비, 폭 재스코프 96.48%) > con03_box_iner + bg_img.
   브랜드 con05 기법: 불빛 screen+sunshine · 메달/트로피/PET COMMERCE 완성형. 수상이력=HTML 무한 세로스크롤(중앙).
   데코 left% = 박스(1838) 기준. 박스 overflow hidden 으로 bg_img 라운드 클립. */
.con03 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: calc(var(--px) * 645);
  background: linear-gradient(180deg, #f3faff 0%, #f3faff 36%, #fff7da 79%, #fff7da 100%);
}

/* iner = 박스 센터링 컨테이너 */
.con03_iner {
  display: flex;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  height: 100%;
}

/* 라운드 네이비 박스 (폭 재스코프 + border-radius + bg_img 라운드 클립) */
.con03_box {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 96.4829%;
  height: 100%;
  border-radius: calc(var(--px) * 50);
  background: #0b1a2f;
  overflow: hidden;
}

/* 박스 내부 콘텐츠 iner (absol 데코 기준점) */
.con03_box_iner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  z-index: auto;
  /* .front 의 z-index:10 이 stacking context 를 만들어 con03_light(screen)를 가둠 →
     네이비 배경(box)이 컨텍스트 밖이라 검정 halo 가 안 사라짐. z-index 풀어 해제 (relative 유지) */
}

/* 좌 텍스트칼럼 (타이틀 + 부제, 좌정렬) */
.con03_txt {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  left: 14.2818%;
  top: 5.4vw;
}

.con03_tit {
  color: #ffffff;
  font-size: calc(var(--px) * 50);
  line-height: 1.2;
}

.con03_tit_sm {
  font-size: calc(var(--px) * 40);
}

.con03_tit_pt {
  color: #ffd11e;
}

.con03_sub {
  margin-top: 1.8vw;
  color: #d8dde5;
  font-weight: 500;
  font-size: calc(var(--px) * 20);
  line-height: 1.5;
}

/* 금메달 4개 (econ3_03) */
.con03_medal {
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 3.91%;
  top: 11.1vw;
  width: calc(var(--px) * 789);
  aspect-ratio: 789 / 479;
}

/* 트로피 (econ3_07, 우측) */
.con03_trophy {
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 48.8184%;
  top: -3.1vw;
  width: calc(var(--px) * 700);
  aspect-ratio: 823 / 1058;
}

/* PET COMMERCE NO.1 (econ3_04) */
.con03_pet {
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 61.8361%;
  top: 14.6vw;
  width: calc(var(--px) * 639);
  aspect-ratio: 639 / 303;
}

/* 캡션 (텍스트) — 한국프랜차이즈대상 회장상 수상 */
.con03_cap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  left: 75.5881%;
  top: 22vw;
  width: calc(var(--px) * 148);
  z-index: 50;
}

.con03_cap_tx {
  text-align: left;
  font-weight: 700;
  font-size: calc(var(--px) * 20);
  line-height: 1.2;
  letter-spacing: -0.05vw;
  background: linear-gradient(180deg, #fffbec 0%, #fffdf5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 수상이력 무한 세로 스크롤 (뒷글씨, dim, 중앙, 콘텐츠 뒤 z1) */
.con03_award {
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  left: 40.321%;
  top: 0;
  width: calc(var(--px) * 419);
  height: 100%;
  overflow: hidden;
}

.con03_award_track {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  animation: con03AwardScroll 22s linear infinite;
}

.con03_award_item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: calc(var(--px) * 28) 0;
}

.con03_award_y {
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
  font-size: calc(var(--px) * 17);
  line-height: 1.4;
  margin-bottom: 0.6vw;
}

.con03_award_d {
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
  font-size: calc(var(--px) * 17);
  line-height: 1.4;
}

@keyframes con03AwardScroll {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-50%);
  }
}

/* 불빛 4장 (econ3_05/02/01/06) — screen 블렌드 + sunshine (브랜드 con05 동일 기법). z 최상단(밝게만) */
.con03_light {
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  mix-blend-mode: screen;
  pointer-events: none;
}

.con03_light1 {
  top: 0;
  left: 22.1064%;
  width: calc(var(--px) * 1340);
  aspect-ratio: 1340 / 757;
  animation: sunshine 3.2s ease-in-out infinite;
}

.con03_light2 {
  top: 2vw;
  left: 55.1823%;
  width: calc(var(--px) * 605);
  aspect-ratio: 605 / 586;
  animation: sunshine 4.5s ease-in-out 0.6s infinite;
}

.con03_light3 {
  top: 8.6vw;
  left: -1.931%;
  width: calc(var(--px) * 550);
  aspect-ratio: 550 / 565;
  animation: sunshineFlare 3.8s ease-in-out 0.3s infinite;
}

.con03_light4 {
  top: 1vw;
  left: 60.3645%;
  width: calc(var(--px) * 648);
  aspect-ratio: 648 / 634;
  z-index: 20;
}


/* ==================== con09 : Brand Marketing (콘텐츠 마케팅 + 영상 iframe + 쇼츠 게시판 + 신호등 3박스) ==================== */
.con09 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  background: #ffd11e url('/images/econ9_bg.jpg') center top / cover no-repeat;
}

.con09_iner {
  position: relative;
  width: 100%;
  height: calc(var(--px) * 1280);
}

/* ─ 좌상 : 텍스트 (Brand Marketing + 타이틀 + 설명) ─ */
.con09_txt {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  left: 16.6929%;
  top: 8vw;
}

.con09_eyb {
  color: #fff;
  font-size: calc(var(--px) * 18);
  line-height: 1;
}

.con09_tit {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 1.7vw;
  color: #141414;
}

.con09_tit1 {
  font-size: calc(var(--px) * 40);
  line-height: 1.3;
}

.con09_tit2 {
  font-size: calc(var(--px) * 50);
  line-height: 1.2;
}

.con09_desc {
  margin-top: 1.8vw;
  color: #141414;
  font-weight: 500;
  font-size: calc(var(--px) * 20);
  line-height: 1.5;
}

/* ─ 우상 : 영상 (lazy-youtube 자동재생/뮤트) ─ */
.con09_video {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 55vw;
  top: 4.2vw;
  width: calc(var(--px) * 680);
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--px) * 30);
  overflow: hidden;
}

.con09_vwrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.con09_shorts_swiper {
  position: absolute;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 29vw;
  top: 27.1vw;
  width: calc(var(--px) * 360);
  height: calc(var(--px) * 640);
  border-radius: calc(var(--px) * 30);
  overflow: hidden;
}

.con09_sitem {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.con09_svid {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #141414;
}

/* 좌하 뒤 : 쇼츠 썸네일 무한 흐름 띠 (메인 쇼츠 z2 뒤 z1 · 신호등 z3·네비 z4 아래 · 연동X 마퀴) */
.con09_flow {
  position: absolute;
  z-index: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  left: 0%;
  top: 27.1vw;
  width: 34%;
  overflow: hidden;

}

/* 갭 = 슬롯(밴드폭/slidesPerView) − fitem폭. 다른 슬라이더처럼 sitem 고정폭으로만(§7-1) */
.con09_fitem {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 270);
  height: calc(var(--px) * 485);
  border-radius: calc(var(--px) * 30);
  overflow: hidden;
  aspect-ratio: unset;
  background: #141414;

  opacity: 0.7;
  filter: grayscale(0.8);
}

.con09_fitem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 쇼츠 하단 캡션 바 (검정 알약 + 흰 텍스트, sitem flex-center 로 가로 자동중앙) */
.con09_scap {
  position: absolute;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: calc(var(--px) * 20);
  width: 88%;
  height: calc(var(--px) * 40);
  border-radius: 50vw;
  background: rgba(0, 0, 0, 0.85);
}

.con09_scap p {
  color: #fff;
  font-weight: 500;
  font-size: calc(var(--px) * 16);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
}

/* 우측 네비+프로그레스 묶음 (flex column center — absolute 1개로 최소화, 서브 띠 위 z4) */
.con09_nav_wrap {
  position: absolute;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  left: 49.7638%;
  top: 28.2vw;
  gap: calc(var(--px) * 40);
}

/* 세로 네비 버튼 (공통 swiper_navbtn 검정 + 흰 쉐브론) — nav_wrap flex 아이템 */
.con09_snav {
  --sbtn-bg: #141414;
  --sbtn-chev: #fff;
  --sbtn-ring: #141414;
}

.con09_chev_up {
  transform: rotate(-135deg);
  margin-left: calc(var(--px) * 2);
}

.con09_chev_down {
  transform: rotate(45deg);
  margin-right: calc(var(--px) * 2);
}

/* 세로 프로그레스바 (공통 swiper_prog 세로 override) — nav_wrap flex 아이템 */
.con09_prog {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 2);
  height: calc(var(--px) * 503);
}

.con09_prog_fill {
  width: 100%;
  height: 0;
  transition: height 0.4s ease;
  /* 세로바 = height 로 차오름 (공통 fill 은 width 만 transition → 세로는 점프) */
}

/* ─ 우하 : 신호등 3박스 (자동호버 순환, 초기 1번 하트 ON) ─ */
.con09_lights {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  left: 56.9029%;
  top: 28vw;
  gap: 0.5vw;
}

.con09_lbox {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 645);
  height: calc(var(--px) * 153);
  padding-left: calc(var(--px) * 34);
  border-radius: calc(var(--px) * 75);
  background: #ffd11e;
  border: 1px solid rgba(255, 255, 255, 0.7);
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

.con09_lbox.on {
  background: #fff;
  border-color: #fff;
}

.con09_lbox_ico {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 53);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.9);
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

.con09_lbox_ico img {
  width: calc(var(--px) * 53);
  aspect-ratio: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.con09_lbox.on .con09_lbox_ico img {
  opacity: 1;
}

.con09_lbox_txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin-left: calc(var(--px) * 38);
}

.con09_lbox_tit {
  font-weight: 700;
  font-size: calc(var(--px) * 22);
  line-height: 1;
}

.con09_lbox_desc {
  margin-top: calc(var(--px) * 12);
  font-weight: 400;
  font-size: calc(var(--px) * 15);
  line-height: 1.5;
}

/* ==================== con10 : 성공스토리 점주 인터뷰 (네이비 · 좌 CASE3 / 우 메인영상+썸네일3+prog/nav · front_story 연동) ==================== */
/* 전역 #section_wrap section{overflow:hidden} 이겨서 상단 마스코트 데코 삐짐 허용 + 위 섹션보다 앞으로 */
#section_wrap .con10 {
  overflow: visible;
  z-index: 3;
}

.con10 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  background: #0b1a2f;
}

/* 상단 우측 마스코트(강아지+고양이) — con10 위로 삐져나옴 */
.con10_mascot {
  position: absolute;
  z-index: 4;
  top: -9.9738vw;
  right: 12.388%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 623);
  aspect-ratio: 623 / 210;

  display: none;
}

.con10_iner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding-top: 7.3491vw;
  padding-bottom: 4.6719vw;
}

/* ---- 좌 : Success Story + 타이틀 + CASE 3 (절대배치) ---- */
.con10_left {
  position: absolute;
  z-index: 2;
  left: 15.4331%;
  top: 8.5039vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 27.9265%;
}

.con10_eyb {
  margin-left: calc(var(--px) * 22);
  font-size: calc(var(--px) * 18);
  color: #8a8a8a;
  line-height: 1;
}

.con10_tit {
  margin-top: 1.6798vw;
  margin-left: calc(var(--px) * 22);
  color: #fff;
  font-size: calc(var(--px) * 34);
  font-weight: 800;
  line-height: 1.42;
}

.con10_tit_big {
  font-size: calc(var(--px) * 44);
  font-weight: 900;
  line-height: 1.35;
}

.con10_cases {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-top: 3.727vw;
  row-gap: 0.21vw;
}

.con10_case {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: calc(var(--px) * 89);
  padding-left: calc(var(--px) * 24);
  padding-right: calc(var(--px) * 22);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: calc(var(--px) * 45);
  background: transparent;
  box-sizing: border-box;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.con10_case_no {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 84);
  flex-shrink: 0;
  color: #ffd11e;
  font-size: calc(var(--px) * 13);
  line-height: 1;
  transition: color 0.3s ease;
}

.con10_case_txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex: 1 1 auto;
  min-width: 0;
}

.con10_case_tt {
  color: #fff;
  font-size: calc(var(--px) * 16);
  font-weight: 500;
  line-height: 1.2;
  transition: color 0.3s ease;
}

.con10_case_sub {
  margin-top: calc(var(--px) * 4);
  color: #a8a8a8;
  font-size: calc(var(--px) * 15);
  font-weight: 500;
  line-height: 1;
  transition: color 0.3s ease;
}

.con10_case_arw {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 27);
  height: calc(var(--px) * 27);
  flex-shrink: 0;
  margin-left: calc(var(--px) * 12);
  border-radius: 50%;
  background: #fff;
  --sbtn-chev: #0b1a2f;
  transition: background 0.3s ease;
}

.con10_case_arw .swiper_chev {
  width: calc(var(--px) * 7);
  height: calc(var(--px) * 7);
}

/* CASE 활성 = 흰 배경 + 검정 텍스트 (좌 박스/우 썸네일/prog/nav 동시 연동) */
.con10_case.on {
  background: #fff;
  border-color: #fff;
}

.con10_case.on .con10_case_no {
  color: #0b1a2f;
}

.con10_case.on .con10_case_tt {
  color: #141414;
}

.con10_case.on .con10_case_sub {
  color: #666;
}

.con10_case.on .con10_case_arw {
  background: #0b1a2f;
  --sbtn-chev: #fff;
}

/* ---- 우 : 메인영상 + 라벨 + 썸네일3 + prog/nav (흐름 · margin-left 로 우측 배치) ---- */
.con10_right {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 42.2047%;
  margin-left: 50.2362%;
}

.con10_vidwrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 802 / 425;
  border-radius: calc(var(--px) * 30);
  overflow: hidden;
  background: #000;
}

.con10_iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.con10_vidlabel {
  position: absolute;
  z-index: 2;
  left: calc(var(--px) * 29);
  bottom: calc(var(--px) * 22);
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(var(--px) * 54);
  padding: 0 calc(var(--px) * 22);
  border-radius: calc(var(--px) * 27);
  background: #fff;
}

.con10_vidlabel_t {
  color: #0b1a2f;
  font-size: calc(var(--px) * 18);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.con10_vidlabel_bar {
  margin: 0 calc(var(--px) * 6);
  color: #c8c8c8;
}

.con10_thumbs {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 1.5223vw;
}

.con10_thumb {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 261);
  aspect-ratio: 261 / 118;
  border: 2px solid transparent;
  border-radius: calc(var(--px) * 20);
  overflow: hidden;
  background: #0b1a2f;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

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

.con10_thumb.on {
  border-color: #ffd11e;
}

.con10_ctrl {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 3.0971vw;
}

.con10_prog {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 82%;
  height: calc(var(--px) * 2);
  border-radius: 50vw;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

.con10_prog_fill {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 33.3333%;
  height: 100%;
  border-radius: 50vw;
  background: #fff;
  transition: width 0.4s ease;
}

.con10_nav {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: calc(var(--px) * 40);
}

/* prev/next 둘 다 흰 원 + 네이비 셰브론, 호버 시 흰 외곽선 링 확장(공통 swiper_btn::after) */
.con10_prev.swiper_navbtn,
.con10_next.swiper_navbtn {
  --sbtn-bg: #fff;
  --sbtn-chev: #0b1a2f;
  --sbtn-ring: #fff;
}


/* ============================================================================
   con12 : 창업 스토리 (게시판 franchise_story 3분류) — 공통 탭 섹션 (brand con10 과 동일 골격)
   탭(.pet_tabs) + 헤더(.pet_tabhead*) + 카드그리드(.pet_card*) 전부 공통(custom.css).
   con12 고유 = 하트 크기(41×35) + 빈카드 그라데이션 폴백 + 페이징 간격뿐.
   ============================================================================ */
.con12 {
  background: #fff;
}

/* 섹션 상하 여백 = iner (탭 pill 상단 / 페이징 하단). 탭 섹션이라 con10 과 동일 스페이싱 */
.con12_iner {
  padding-top: 3.6vw;
  padding-bottom: 5vw;
}

/* 하트만 con12 고유 크기 (econ5_01.png 41×35, 노랑) — 나머지 헤더는 공통 .pet_tabhead* */
.con12 .pet_tabhead_heart {
  width: calc(var(--px) * 41);
  aspect-ratio: 41 / 35;
}

/* 썸네일 축소는 그리드폭·카드폭을 같이 줄여서 처리 — 카드만 줄이면 그 차이가 전부 간격으로 가서 멀어 보임.
   1320/410(간격 30) → 1080/330(간격 30) : 카드 80% 축소, 카드 사이 간격은 공통값 그대로. */
.con12 .pet_cardgrid {
  width: calc(var(--px) * 1080);
}

.con12 .pet_card {
  width: calc(var(--px) * 330);
}

/* 빈 카드(게시판 미등록) 회색 그라데이션 폴백 — 공통 .pet_card_img 위에 배경만 추가.
   썸네일 비율은 공통(414:245) 대신 1:1 정사각. 선택자 2단계라 모바일 공통값(height:26vw)도 덮음 = 모바일도 1:1. */
.con12 .pet_card_img {
  position: relative;
  height: auto;
  aspect-ratio: 1 / 1;
  background: linear-gradient(180deg, #f8f8f8 0%, #dfdfdf 55%, #b6b6b6 100%);
}

/* 프레임 꽉 채움(여백 0). 부모 높이가 aspect-ratio 계산값(=auto)이라 자식 height:100% 가
   확정 높이로 안 풀림 → 퍼센트 높이 대신 absolute inset:0 으로 채움. */
.con12 .pet_card_img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 폴백(sddefault 640×480) 은 16:9 영상을 4:3 캔버스에 넣은 그림 = 위아래 검은띠.
   1:1 cover 로 잘라도 띠는 그대로 남으므로, 실제 화면부가 프레임을 꽉 채우도록 확대.
   배율 1.35 = 480/355.6. 이론상 띠는 60px(4/3=1.3334)이지만 실측 62px 라 여유를 준 값
   (부족하면 위아래에 검은 1~2px 이 남는다). 부모가 overflow:hidden 이라 넘치는 좌우는 잘린다.
   PC·모바일 공통(둘 다 aspect-ratio 1/1). 클래스는 franchise.js 가 폴백 시에만 붙인다. */
.con12 .pet_card_img img.yt_lb {
  transform: scale(1.35);
}

/* 페이지네이션 — 시각=공통 .pet_paging (custom.css), 여기선 상단 간격만 */
.con12_paging {
  margin-top: 2.9vw;
}

/* ==================== con11 : 인테리어 거품, 펫마트엔 없습니다 (개설비용 / 창업특전 / 창업절차) ====================
   PSD 05_창업 y12423~14364 크림(#f8f4eb). 전부 완성형 통이미지 배치(카드·뱃지·버튼·라벨). 헤더만 텍스트.
   패널3(흰/노랑/흰, 폭1284, radius 0 40 40 40 = 좌상단 라벨탭 자리만 각짐). 좌측 세로라벨=PC / 가로라벨=모바일 스왑. */
.con11 {
  background: #f8f4eb;
}

.con11_iner {
  padding-top: 5.6vw;
  padding-bottom: 3.5vw;
}

/* 재배치된 창업절차는 헤더 없는 독립 섹션이므로 상단 여백만 별도 조정 */
.con11_process_section .con11_process_iner {
  padding-top: 4vw;
}

.con11_process_section .con11_process {
  margin-top: 0;
}

/* ── 헤더 (센터) ── */
.con11_eyb {
  color: #8a8a8a;
  font-size: calc(var(--px) * 18);
}

/* 타이틀 : line1(span)=작게 42 / line2=크게 52 (유저 강조 = line1 조금 작게) */
.con11_tit {
  margin-top: 1.2vw;
  font-size: calc(var(--px) * 52);
  line-height: 1.05;
  letter-spacing: -0.13vw;
  text-align: center;
}

.con11_tit_sm {
  font-size: calc(var(--px) * 42);
  line-height: 1.5;
}

.con11_desc {
  margin-top: 1.3vw;
  font-weight: 600;
  font-size: calc(var(--px) * 20);
  line-height: 1.5;
  text-align: center;
}

/* ── 패널 공통 (흰/노랑 라운드박스, 기본 flex-center = 개설비용 표 중앙용) ── */
.con11_box {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 1284);
  border-radius: 0 calc(var(--px) * 40) calc(var(--px) * 40) calc(var(--px) * 40);
}

/* 세로 라벨 (PC) — 패널 좌측 68px 돌출(3px 침범), 상단 정렬 */
.con11_label {
  position: absolute;
  top: 0;
  left: calc(var(--px) * -68);
  width: calc(var(--px) * 71);
  aspect-ratio: 71 / 276;
}

/* 가로 라벨 (모바일 전용) — 표시/숨김은 .mobile-pc 유틸이 처리, 위치는 향후 전체 모바일 패스에서 */
.con11_label_m {
  width: calc(var(--px) * 296);
  aspect-ratio: 296 / 71;
}

/* ── 개설비용 : 흰 패널 + 요금표(중앙) + 창업문의 뱃지(상단중앙 overlay) ── */
.con11_cost {
  margin-top: 1.2vw;
  height: calc(var(--px) * 559);
  background: #fff;
}

.con11_cost_table {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 1016);
  aspect-ratio: 1016 / 452;
}

/* 모바일 전용 HTML 요금표 — PC 에서는 숨김(간섭 방지). 표출/스타일은 @media 599 에서 처리 */
.con11_cost_table_m {
  display: none;
}

/* 뱃지 = flex-center 부모라 좌우 inset 없이 가로 자동중앙, top 만 지정 */
.con11_badge {
  top: 2.5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 417);
  aspect-ratio: 1 / 1;
}

/* 뱃지 이미지를 tel 링크로 감쌈 → 앵커가 뱃지 폭을 채워 이미지 크기 유지 */
.con11_badge a {
  display: block;
  width: 100%;
}

/* ── 창업특전 : 노란 패널 + 헤더2줄 + 선물(top-right 돌출) + 3 티켓카드 ── */
.con11_benefit {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.9vw;
  padding-top: 2.9vw;
  height: calc(var(--px) * 397);
  overflow: visible;
  background: #ffe947;
}

.con11_bh_sm {
  color: #141414;
  font-size: calc(var(--px) * 31);
  line-height: 1;
  text-align: center;
}

.con11_bh_lg {
  margin-top: 0.7vw;
  color: #141414;
  font-size: calc(var(--px) * 41);
  line-height: 1;
  text-align: center;
}

.con11_gift {
  top: -0.8vw;
  right: calc(var(--px) * -26);
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 442);
  aspect-ratio: 442 / 271;
}

.con11_bcards {
  display: flex;
  position: relative;
  z-index: 2;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  column-gap: calc(var(--px) * 16);
  margin-top: 1.7vw;
}

.con11_bcard {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 321);
  aspect-ratio: 321 / 170;
}

/* ── 창업절차 : 흰 패널 + 8 단계카드(4열×2행) + 다운로드 버튼2 ── */
.con11_process {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.7vw;
  padding-top: 4.7vw;
  height: calc(var(--px) * 547);
  overflow: visible;
  background: #fff;
}

/* 셀=25%(비율) + row-gap 만 (§4-1 wrap 안정화). 카드 고정폭 267, 좌우 갭은 셀 여백으로 자동(6px) */
.con11_pcards {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 1092);
  row-gap: 1.3vw;
  box-sizing: border-box;
  overflow: visible;
}

.con11_pcard {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% / 4);
}

/* 단계카드 = HTML(흰박스+보더30 + 우상단 번호원 + 타이틀 + 설명). 셀(25%)보다 좁은 고정폭 268 */
.con11_pcard_in {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 268);
  height: calc(var(--px) * 140);
  padding: calc(var(--px) * 34) calc(var(--px) * 22) 0 calc(var(--px) * 43);
  border: 1px solid #dfdfdf;
  border-radius: calc(var(--px) * 30);
  background: #fff;
  box-sizing: border-box;
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

/* 신호등 active(자동순환 4s + 호버) = elevated : 보더제거 + 드롭쉐도우 (con06 패턴) */
.con11_pcard.change .con11_pcard_in {
  border-color: transparent;
  box-shadow: 0 calc(var(--px) * 8) calc(var(--px) * 24) rgba(0, 0, 0, 0.12);
}

/* 번호원 (우상단, 위로 튀어나옴) — Ria 흰 숫자 on 노랑 */
.con11_pnum {
  position: absolute;
  top: calc(var(--px) * -15);
  right: calc(var(--px) * 28);
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 58);
  height: calc(var(--px) * 58);
  border-radius: 50%;
  background: #ffd11e;
  color: #fff;
  font-size: calc(var(--px) * 20);
  line-height: 1;
}

.con11_ptit {
  color: #000;
  font-weight: 700;
  font-size: calc(var(--px) * 20);
  line-height: 1;
}

.con11_pdesc {
  margin-top: calc(var(--px) * 13);
  color: #585858;
  font-weight: 400;
  font-size: calc(var(--px) * 16);
  line-height: 1.4;
}

.con11_dlbtns {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  column-gap: calc(var(--px) * 12);
  margin-top: 1.5vw;
}

.con11_dlbtn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 218);
  aspect-ratio: 218 / 55;
  transition: filter 0.25s ease;
}

.con11_dlbtn:hover {
  filter: brightness(1.22);
}


/* ==================== con04 : 비교를 거부합니다 — 펫마트가 펫 산업의 '표준' (3카드 비교) ====================
   full-bleed 크림(econ4_bg). iner fdcc 중앙컬럼: eyb + 타이틀 + 3카드(플렉스) + 워터마크(Ria, rltv).
   카드=완성형 이미지(econ4_02/04/03). 센터카드(유일) 살짝 위 + z상위. 마스코트=absol. */
.con04 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 3vw;
}

.con04_iner {
  padding-top: 9vw;
}

/* eyb (공통 .eyb = Ria) + 색 */
.con04_eyb {
  color: #8a8a8a;
  font-size: calc(var(--px) * 18);
  line-height: 1;
}

/* 타이틀 : line1(비교를 거부합니다) 작게 / line2 크게 */
.con04_tit {
  margin-top: 0.8vw;
  font-size: calc(var(--px) * 48);
  line-height: 1.1;
  text-align: center;
}

.con04_tit_sm {
  font-size: calc(var(--px) * 37);
  line-height: 1.4;
}

/* 3 카드 플렉스 row (완성형 이미지, 그림자 겹침 → margin-left 음수로 오버랩) */
.con04_cards {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  margin-top: 0.1vw;
}

.con04_card {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 649);
  aspect-ratio: 649 / 372;
}

/* 좌/우 카드는 센터보다 아래(디자인: 센터 72px 위) */
.con04_card1 {
  margin-top: calc(var(--px) * 72);
}

.con04_card2 {
  z-index: 2;
  margin-left: calc(var(--px) * -90);
  aspect-ratio: 649 / 373;
}

.con04_card3 {
  margin-top: calc(var(--px) * 72);
  margin-left: calc(var(--px) * -90);
}

/* 마스코트 (센터카드 하단, absol — 부모 flex-center 로 가로 자동중앙) */
.con04_mascot {
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  top: calc(var(--px) * 264);
  transform: translateX(calc(var(--px) * 29));
  width: calc(var(--px) * 493);
  aspect-ratio: 493 / 294;
}

/* 워터마크 (Ria 폰트, 카드 아래 rltv, dim 크림) */
.con04_mark {
  position: relative;
  z-index: 0;
  margin-top: -1.6vw;
  color: #f5efe0;
  font-size: calc(var(--px) * 100);
  line-height: 1.05;
  text-align: center;
}

/* ==================== con15 : 창업 FAQ (아코디언 · 게시판 franchise_faq 연동) ====================
   기준 = .planning/con15/design_crop.png. 흰 박스 고정높이(720)로 섹션 높이 불변(유저 확정 넉넉).
   첫 아이템 열림 + one-at-a-time(franchise.js). Q뱃지=노란원 / 셰브론=연회색원+다크원+흰 v / 구분선 #dfdfdf 1px. absol 0. */
.con15 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background: #f8f4eb;
}

.con15_iner {
  padding-top: 5.2vw;
  padding-bottom: 3.3vw;
}

/* ---- 센터 헤더 ---- */
.con15_tit {
  font-size: calc(var(--px) * 40);
  line-height: 1;
  letter-spacing: -0.1vw;
}

.con15_sub {
  margin-top: 1.3vw;
  font-weight: 600;
  font-size: calc(var(--px) * 18);
  line-height: 1;
}

/* ---- 흰 박스 (고정높이 → 열고닫아도 섹션 높이 불변. overflow hidden = 라운드 클립)
   space-between: 리스트=상단, 페이지네이션=하단. 상단 패딩 68=박스top→첫 Q헤더. ---- */
.con15_box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  box-sizing: border-box;
  width: 77.7428%;
  height: calc(var(--px) * 720);
  padding-top: calc(var(--px) * 68);
  padding-bottom: calc(var(--px) * 55);
  margin-top: 2.2vw;
  border-radius: calc(var(--px) * 36);
  background: #fff;
  overflow: hidden;
}

.con15_list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
}

/* 페이지네이션 (공통 .pet_paging · con12 와 동일 마크업 — 박스 하단) */
.con15_paging {
  flex-shrink: 0;
}

/* 아코디언 아이템 (하단 구분선) */
.con15_item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  border-bottom: 1px solid #dfdfdf;
}

/* 질문 헤더 (72px · 클릭영역) */
.con15_q {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: calc(var(--px) * 72);
  padding-left: calc(var(--px) * 196);
  padding-right: calc(var(--px) * 123);
}

/* Q/A 뱃지 공통 (중앙정렬) */
.con15_badge {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  color: #141414;
  font-weight: 900;
  line-height: 1;
}

.con15_badge_q {
  width: calc(var(--px) * 48);
  height: calc(var(--px) * 48);
  border-radius: 50%;
  background: #ffd11e;
  font-size: calc(var(--px) * 24);
}

.con15_qtxt {
  margin-left: calc(var(--px) * 28);
  color: #141414;
  font-weight: 700;
  font-size: calc(var(--px) * 22);
  line-height: 1.2;
}

/* 셰브론 버튼 (우측 · 기본 = 화살표만 보임 / 호버 = 외곽 연회색원 나타남) */
.con15_toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
  width: calc(var(--px) * 52);
  height: calc(var(--px) * 52);
  border: 1px solid transparent;
  border-radius: 50%;
  transition: border-color 0.25s ease;
}

.con15_toggle_ic {
  width: calc(var(--px) * 24);
  height: calc(var(--px) * 24);
  background: #1a1a1a;
  transition: transform 0.35s ease;
}

.con15_chev_dn {
  width: calc(var(--px) * 8);
  height: calc(var(--px) * 8);
  border-top: 2.5px solid #fff;
  border-right: 2.5px solid #fff;
  transform: rotate(135deg);
  margin-top: calc(var(--px) * -3);
}

/* ---- 답변 (collapse) : grid-template-rows 0fr↔1fr = 콘텐츠 실제높이로 부드럽게(반응형) ---- */
.con15_a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s ease;
}

/* grid item = 클립 (패딩 없음 → 0fr 에서 완전 접힘) */
.con15_a_in {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  min-height: 0;
}

/* 실제 내용 (패딩 + 좌 A뱃지 + 답변) — 클립 안에서 접힘 */
.con15_a_body {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  width: 100%;
  padding: 1.4vw calc(var(--px) * 123) 1.8vw calc(var(--px) * 196);
  border-top: 1px solid #dfdfdf;
}

.con15_badge_a {
  width: calc(var(--px) * 48);
  font-size: calc(var(--px) * 26);
  font-weight: 900;
}

.con15_atxt {
  margin-left: calc(var(--px) * 28);
  font-size: calc(var(--px) * 15);
  line-height: 1.3;
  font-weight: 500;
}

/* ---- 열림(.on) ---- */
.con15_item.on .con15_a {
  grid-template-rows: 1fr;
}

.con15_item.on .con15_toggle_ic {
  transform: rotate(180deg);
}

/* 호버(질문 행 위) 시에만 외곽 연회색원 표시 — 기본은 화살표만 */
.con15_q:hover .con15_toggle {
  border-color: #d0d0d0;
}


/* ============================================================================
   📱 MOBILE ( max-width:599px ) — FRANCHISE (창업)
   ============================================================================ */
@media (max-width: 599px) {

  /* ===== con12 : 창업 스토리 (공통 탭섹션) — 탭/헤더/카드그리드/페이징 모바일은 공통 .pet_* (custom.css).
     여기선 con12 고유값(하트 크기·섹션 여백)만 재정의. ===== */
  .con12_iner {
    padding-top: 8vw;
    padding-bottom: 12vw;
  }

  /* 하트 (econ5_01 41x35) — PC --px*41 극소 → vw (aspect 41/35 는 desktop 규칙 유지) */
  .con12 .pet_tabhead_heart {
    width: 8vw;
  }

  /* PC 축소값(--px 1080/330)이 선택자 2단계라 모바일까지 이겨버림 → 공통 모바일값(2열 92vw)으로 되돌림 */
  .con12 .pet_cardgrid {
    width: 92vw;
  }

  .con12 .pet_card {
    width: 100%;
  }

  /* 페이지네이션 상단 간격 (PC 2.9vw → 모바일 카드그리드와 균형) */
  .con12_paging {
    margin-top: 8vw;
  }

  /* ===== con08 : 대한민국 최대 규모 상품군 (PC 중앙 헤더+노란박스 슬라이더를 좌우 사진 스트립이 flank) =====
     모바일: iner(fdcc 세로스택) → row-wrap 전환. 헤더 3줄은 각 width:100%로 한 줄씩,
     노란박스는 88vw 한 줄, 좌/우 사진 6장은 in-flow 2열×3행 갤러리로 아래 배치. */
  .con08_iner {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    padding-top: 11vw;
    padding-bottom: 10vw;
  }

  /* 센터 헤더 3줄 — 각자 한 줄(width:100%) + 중앙정렬 + vw 폰트 */
  .con08_eyb {
    width: 100%;
    font-size: 4vw;
    /* 30*--px(6.1px) -> 3.5vw */
    text-align: center;
  }

  .con08_tit {
    width: 100%;
    margin-top: 5vw;
    font-size: 8vw;
    /* 줄바꿈 없이 확대 (기존 6.5vw) */
  }

  .con08_desc {
    width: 100%;
    margin-top: 5vw;
    font-size: 3.6vw;
    /* 20*--px(4.1px) -> 3.3vw */
  }

  /* 노란박스 — 한 줄(88vw) 중앙, 세로 확장(내부 슬라이드 3요소 수용) */
  .con08_ybox {
    width: 88vw;
    height: auto;
    aspect-ratio: 574 / 340;
    margin-top: 10vw;
    border-radius: 5vw;
  }

  /* POINT 뱃지 — 상단 걸침 확대 */
  .con08_point {
    top: -7vw;
    width: 16vw;
    height: 16vw;
  }

  .con08_point_l {
    font-size: 2.6vw;
    margin-top: 1vw;
  }

  /* 13*--px(2.7px) -> 3.3vw */
  .con08_point_n {
    margin-top: 1.6vw;
    font-size: 4.8vw;
  }

  /* 화살표 — 새 박스 높이 기준 세로 중앙 재배치(원/셰브론 크기는 공통 9vw/3vw 상속) */
  .con08_navbtn {
    top: 50%;
    transform: translateY(-50%);
  }

  .con08_prev {
    left: -3.5vw;
  }

  .con08_next {
    right: -3.5vw;
  }

  /* 슬라이드 내부 — 뱃지 아래로 밀기 + vw 폰트. 좌우 화살표 사이 폭으로 desc 제한 */
  .con08_sitem {
    padding-top: 14vw;
  }

  /* 90*--px(18px) -> 14vw (뱃지 클리어) */
  .con08_stit {
    font-size: 4.6vw;
  }

  /* 24*--px(4.9px) -> 4.6vw */
  .con08_sdesc {
    width: 100%;
    margin-top: 4vw;
    font-size: 3.3vw;
    /* 16*--px(3.3px) -> 3.3vw */
  }

  .con08_skey {
    bottom: -0.5vw;
    font-size: 11vw;
    /* 70*--px(14.3px) -> 11vw */
  }

  /* 매장사진 6장 → 두 그룹 하나로 묶어 한 줄 오른→왼 연속 마퀴
     (좌3+우3 = 1 set + 복제 6장 = 12장 트랙, -50% 이동 = seamless) */
  .con08_picsband {
    position: relative;
    width: 100%;
    margin-top: 9vw;
    overflow: hidden;
  }

  .con08_picstrack {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: max-content;
    animation: con08PicsScroll 20s linear infinite;
  }

  /* 좌/우/복제 그룹: absol 해제하고 한 줄(row)로 이어붙임(자체 여백 제거) */
  .con08 .con08_pics {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    flex-direction: row;
    width: auto;
    margin: 0;
    gap: 0;
  }

  .con08_pics_dup {
    display: flex;
  }

  /* 사진 1장 — 확대(64vw) + trailing 피치갭(margin-right) 균일 → -50% seamless */
  .con08 .con08_pic {
    flex-shrink: 0;
    width: 57vw;
    margin-right: 4vw;
    border-radius: 999px;
  }

  @keyframes con08PicsScroll {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(-50%);
    }
  }


  /* ============================================================
     con10 : 성공스토리 점주 인터뷰
     PC 2컬럼(좌 absolute 타이틀+CASE3 / 우 margin-left 영상+썸네일3+prog/nav)
     → 모바일 세로 스택(풀폭 중앙): 타이틀 → CASE3 → 영상 → 썸네일3 → prog/nav
     nav 원/셰브론은 공통 custom.css(9vw/3vw) 상속, con10 고유값만 재정의. */

  /* iner : 좌우 배치 해제 → 중앙 세로 스택 */
  .con10_iner {
    align-items: center;
    padding-top: 15vw;
    padding-bottom: 15vw;
    row-gap: 0;
    /* 좌블록 해제로 eyb·tit·cases가 직접 나열됨 → 간격은 각 요소 margin으로 제어 */
  }

  /* 좌 블록 박스 해제(display:contents) → 자식(eyb·tit·cases)이 con10_iner 직속 flex item
     → order로 con10_cases만 con10_right 아래로 이동 가능 */
  .con10_left {
    display: contents;
  }

  .con10_eyb {
    margin-left: 0;
    font-size: 3.6vw;
  }

  .con10_tit {
    margin-top: 6vw;
    margin-left: 0;
    font-size: 5.4vw;
    text-align: center;
  }

  .con10_tit_big {
    font-size: 8vw;
    line-height: 1.7;
  }

  /* CASE 셀렉터 : con10_right 아래로 이동(order:10) + 카드 내부 세로(컬럼) 구조 */
  .con10_cases {
    width: 88%;
    margin-top: 8vw;
    row-gap: 3vw;
    order: 10;
  }

  /* no + txt 세로 스택, 화살표는 우측 중앙 고정(위치 유지) */
  .con10_case {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: auto;
    border-radius: 3vw;
    padding: 4vw 13vw 4vw 4vw;
    row-gap: 2vw;
  }

  .con10_case_no {
    width: auto;
    font-size: 2.8vw;

  }

  .con10_case_tt {
    font-size: 3.2vw;
  }

  .con10_case_sub {
    margin-top: 2vw;
    font-size: 3vw;
  }

  .con10_case_arw {
    position: absolute;
    right: 3vw;
    top: 50%;
    transform: translateY(-50%);
    width: 8vw;
    height: 8vw;
    margin-left: 0;
  }

  /* 화살표 셰브론 : con10 고유 override(--px*7)라 모바일서 안 보임 → vw 재정의 */
  .con10_case_arw .swiper_chev {
    width: 2.4vw;
    height: 2.4vw;
  }

  /* 우 블록 : margin-left 해제 → 풀폭 중앙 */
  .con10_right {
    width: 88%;
    margin-left: 0;
    margin-top: 8vw;
  }

  .con10_vidwrap {
    border-radius: 4vw;
  }

  .con10_vidlabel {
    height: auto;
    left: 4vw;
    bottom: 4vw;
    padding: 2.2vw 4vw;
    border-radius: 6vw;
  }

  .con10_vidlabel_t {
    font-size: 3.3vw;
  }

  /* 썸네일 3 : 한 줄 균등(space-between 유지) */
  .con10_thumbs {
    margin-top: 3vw;
  }

  .con10_thumb {
    width: 32.6%;
    border-radius: 3vw;
  }

  /* 컨트롤 : product con02_nav 형 — 세로 중앙 스택(prog 위 / prev·next 아래) */
  .con10_ctrl {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: 7vw;
    gap: 8vw;
  }

  .con10_prog {
    width: 50%;
    height: 0.9vw;
  }

  .con10_nav {
    gap: 8vw;
  }

  /* 상단 마스코트(강아지+고양이) : 우상단 데코, 살짝만 삐짐 */
  .con10_mascot {
    width: 50vw;
    top: -15vw;
    right: -10vw;

    display: none;
  }

  /* ============================ con07 : 마진 인포그래픽 ============================
     PC = 전부 absolute (VS 가로3분할 / 크림패널 안 도넛·40%·표 3분할 / 다크패널 스태거 3박스).
     모바일 = 콘텐츠를 in-flow(relative)로 풀어 세로 1열 스택, 장식(불빛·세로선·좌측마스코트)은 숨김.
     폰트 --px*N → vw 재정의(≥3.3vw). 카드 내부 좌표는 카드폭 비율(%)로 환산. */

  /* ─ A. 헤드 ─ */
  .con07_tit {
    font-size: 8.2vw;
  }

  .con07_tit .tit_sm {
    font-size: 5.7vw;
    line-height: 1.8;
  }

  .con07_sub {
    margin-top: 4vw;
    padding: 0 22vw;
    font-size: 3.4vw;
    line-height: 1.45;
    word-break: keep-all;
  }

  /* ─ B. VS 비교 : 가로 3분할 → 세로 스택 (완성형 이미지, 위 일반프랜차이즈 / VS / 아래 펫마트) ─ */
  .con07_vs {
    flex-direction: column;
    height: auto;
    margin-top: 6vw;
  }

  .con07_vs_l,
  .con07_vs_r {
    position: relative;
    top: auto;
    left: auto;
  }

  .con07_vs_l {
    width: 93vw;
  }

  .con07_vs_r {
    width: 107vw;
    margin-top: -7.9vw;
  }

  .con07_vs_badge {
    top: 24.4vw;
    left: 3vw;
    width: 6vw;

    display: none;
  }

  /* ─ C. 크림 패널 : 고정높이 → 자식결정(auto) + 도넛/40%/표 세로 스택 ─ */
  .con07_panel {
    width: 94vw;
    height: auto;
    margin-top: -1vw;
    padding-bottom: 4vw;
    border-radius: 5vw;
    /* --px*40(8px) 각짐 → 5vw (페이지 카드 토큰 통일) */
  }

  .con07_panel_tit {
    margin-top: 11vw;
    font-size: 6.6vw;
  }

  .con07_panel_sub {
    margin-top: 3vw;
    font-size: 3.8vw;
  }

  /* 불빛(screen 블롭) 장식 — 재배치 시 노이즈라 숨김 */
  .con07_light {
    display: none;
  }

  /* 좌 도넛차트 / 우 표 : absol → in-flow 중앙 */
  .con07_donut,
  .con07_table {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
  }

  .con07_donut {
    width: 69vw;
    margin-top: 6vw;
    margin-left: -18.8vw;
  }

  .con07_table {
    width: 86vw;
    margin-top: 7vw;
  }

  /* 중앙 40% 도넛 (이미 in-flow) — 내부 좌표는 카드폭 비율로 환산 */
  .con07_center {
    width: 66vw;
    margin-top: 7vw;
  }

  .con07_40num {
    font-size: 20.7vw;
  }

  .con07_pct {
    top: 35.8%;
    width: 8.7vw;
  }

  .con07_pct_t {
    font-size: 3.3vw;
  }

  .con07_center_mas {
    width: 38vw;
  }

  /* ─ D. 다크 패널 : 좌마스코트+타이틀 / 우 스태거 3박스 → 세로 1열 ─ */
  .con07_reasons {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    flex-direction: column;
    width: 87vw;
    height: auto;
    margin-top: 10vw;
    padding: 6vw 6vw;
    border-radius: 5vw;
    /* --px*30(6px) 각짐 → 5vw */
  }

  /* 관통 세로선·좌측 마스코트 장식 숨김 */
  .con07_vline,
  .con07_reasons_mas {
    display: none;
  }

  /* ! 아이콘 → 타이틀 위 중앙 */
  .con07_excl {
    position: relative;
    top: auto;
    left: auto;
    width: 13vw;
    margin: 0 auto;
  }

  .con07_reasons_tit {
    position: relative;
    top: auto;
    left: auto;
    font-size: 6.6vw;
    text-align: center;
    margin-top: 3vw;
    margin-bottom: 6vw;
  }

  .con07_reasons_tit .fz30 {
    font-size: 4.5vw;
    line-height: 1.9;
  }

  /* 3박스 : 스태거 absol → 세로 스택 */
  .con07_boxes {
    position: relative;
    top: auto;
    left: auto;
    flex-direction: column;
    width: 100%;
    height: auto;
    gap: 3.5vw;
  }

  .con07_box1,
  .con07_box2,
  .con07_box3 {
    position: relative;
    top: auto;
    left: auto;
  }

  .con07_box {
    width: 100%;
    height: auto;
    padding: 6vw 4vw;
    border-radius: 3.5vw;
    /* --px*20(4px) 각짐 → 3.5vw (내부 박스, 패널보다 타이트) */
  }

  .con07_box_tit {
    font-size: 4vw;
  }

  .con07_box_desc {
    margin-top: 2vw;
    font-size: 3.3vw;
  }


  /* ===== con02 : 전국 펫마트 160+ 호점 돌파 (히어로) =====
     데스크톱 --px 기반 → 모바일서 폰트 microscopic(eyb 5px·sub 8px)·섹션 198px로 찌부.
     콘텐츠가 높이 결정(height:auto), 폰트 vw 재정의, 타이틀 2줄 리플로우,
     마스코트는 하단 코너로 내려 콘텐츠 아래에서 프레이밍. */

  /* 섹션: 고정높이(969*--px) 해제 → 콘텐츠가 결정. bg_img(height:100%)는 풀커버 유지 */
  .con02 {
    height: auto;
  }

  .con02_iner {
    padding-top: 25vw;
    padding-bottom: 19vw;
    /* 하단 마스코트(≈25vw) 공간 확보 */
  }

  .con02_eyb {
    font-size: 4vw;
  }

  /* 26*--px(5.3px) → 3.4vw */

  /* 타이틀 1줄 → 2줄 : line1 "전국 펫마트" / line2 "160 호점 돌파" (160 dominant, 하단정렬) */
  .con02_tit {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* line2에서 160·호점돌파 baseline 정렬 */
    margin-right: 0;
    /* PC 좌측 넛지(3.8vw) 해제 */
    margin-top: 7vw;
    gap: 2vw;
  }

  .con02_tit>.con02_tit_t:first-child {
    flex-basis: 100%;
    text-align: center;
  }

  /* "전국 펫마트" 단독 1줄 — line2 위 중앙정렬(좌치우침 해소) */
  .con02_tit_t {
    font-size: 7vw;
  }

  /* 80*--px(16.4px) → 5.6vw */
  .con02_num_wrap {
    margin: 0 4vw;
  }

  /* 45*--px → 4vw (160↔호점돌파 간격) */
  .con02_num {
    width: auto;
    /* 391*--px(80px) 고정폭 해제 → 글리프폭 */
    font-size: 18vw;
    /* 175*--px(35.8px) → 16vw (히어로 넘버) */
  }

  .con02_badge {
    top: 0;
    right: -9vw;
    width: 9vw;
  }

  .con02_sub {
    margin-top: 6vw;
    font-size: 4vw;
    /* 40*--px(8.2px) → 3.5vw */
    line-height: 1.4;
  }

  .con02_btn {
    margin-top: 5.5vw;
  }

  /* pet_btn 본체는 custom.css 공통 모바일 */

  /* 마스코트(강아지/고양이) : 하단 코너로 내려 콘텐츠 아래 프레이밍
     bottom:4vw → 0, PC % 좌표 해제, 폭 vw 재정의(aspect base 유지 → 높이 자동) */
  /* PC는 좌우 대형 마스코트가 히어로를 감싸는 프레이밍 구도 → 모바일도 코너서 크게 프레임
     (33→44vw). 머리가 버튼/서브 높이까지 올라와 중앙 콘텐츠를 감쌈. */
  .con02_mascot {
    bottom: 11vw;
  }

  .con02_masc_l {
    left: -8vw;
    width: 55vw;
  }

  /* 541*--px·left19.4% → 프레이밍 확대 */
  .con02_masc_r {
    right: -28.7vw;
    width: 56.4vw;
  }

  /* 527*--px·right9.6% → 프레이밍 확대 */

  /* ===== con09 : Brand Marketing (PC 절대배치 캔버스 → 세로 스택) =====
     PC는 con09_iner(높이 1280*--px) 안에 4클러스터 절대배치(좌상 텍스트/우상 영상/
     좌하 쇼츠플레이어+마퀴+네비/우하 신호등3). 모바일선 캔버스 붕괴(262px)+폰트 3~10px.
     → iner 높이 auto·flex column, 콘텐츠(텍스트/영상/쇼츠/신호등)는 in-flow 세로 스택,
        배경 마퀴·세로 프로그레스(장식)는 hide, 네비는 가로 prev/next("<"">")로 전환. */

  /* 절대 캔버스 → 세로 flex 컨테이너 (자식이 높이 결정) */
  .con09_iner {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15vw 0 15vw;
  }

  /* ─ 좌상 텍스트 → in-flow 중앙정렬 ─ */
  .con09_txt {
    position: relative;
    left: auto;
    top: auto;
    align-items: center;
    width: 86vw;
    text-align: center;
  }

  .con09_eyb {
    font-size: 3.6vw;
  }

  /* 18*--px(3.7px) → 3.6vw */
  .con09_tit {
    align-items: center;
    margin-top: 5vw;
  }

  .con09_tit1 {
    font-size: 5.3vw;
    line-height: 1.7;
  }

  /* 40*--px(8.2px) → 5vw */
  .con09_tit2 {
    font-size: 7.4vw;
  }

  /* 50*--px(10.2px) → 6vw */
  .con09_desc {
    margin-top: 5vw;
    font-size: 3.6vw;
    word-break: keep-all;
    text-wrap: balance;
  }

  .con09_desc br {
    display: none;
  }

  /* PC 줄바꿈 해제 → 86vw 자연 흐름 */

  /* ─ 우상 영상 → in-flow 풀폭 (16:9 유지) ─ */
  .con09_video {
    position: relative;
    left: auto;
    top: auto;
    width: 90vw;
    border-radius: 3vw;
    margin-top: 6vw;
    margin-bottom: 2vw;
  }

  /* ─ 좌하 쇼츠 : 배경 썸네일 마퀴(장식) 숨김 ─ */
  .con09_flow {
    width: 100%;
    position: relative;
    top: auto;
    left: auto;
    margin-bottom: -97vw;
    margin-top: 23vw;
    order: 1;
  }

  /* ─ 좌하 쇼츠 메인 플레이어 → in-flow 중앙 세로형(9:16) ─ */
  .con09_shorts_swiper {
    position: relative;
    left: auto;
    top: auto;
    width: 65vw;
    height: auto;
    aspect-ratio: 9 / 16;
    border-radius: 4vw;
    z-index: 100;
    order: 2;
  }

  /* 캡션 알약 : --px 극소(8px·3px) → 가독 크기 (nowrap+ellipsis 유지) */
  .con09_scap {
    width: 86%;
    height: auto;
    padding: 1.4vw 4vw;
    bottom: 3vw;
  }

  .con09_scap p {
    font-size: 3.3vw;
  }

  /* ─ 네비 : 세로 묶음 → 플레이어 아래 가로 prev/next ("<" ">" 그대로 활용) ─ */
  .con09_nav_wrap {
    position: relative;
    left: auto;
    top: auto;
    flex-direction: row;
    gap: 8vw;
    margin-top: -5vw;
    order: 3;
    margin-top: 7vw;
  }

  .con09_prog {
    display: none;
  }

  /* 세로 프로그레스바 : 가로 네비엔 부적합 → 숨김 */

  /* ─ 우하 신호등 3박스 → in-flow 풀폭 세로 스택 ─ */
  .con09_lights {
    position: relative;
    left: auto;
    top: auto;
    width: 90vw;
    gap: 2vw;
    margin-bottom: 8vw;
  }

  .con09_lbox {
    width: 100%;
    height: auto;
    padding: 5vw 5vw;
    border-radius: 3vw;
  }

  .con09_lbox_ico {
    width: 10vw;
  }

  .con09_lbox_ico img {
    width: 10vw;
  }

  .con09_lbox_txt {
    margin-left: 4vw;
  }

  .con09_lbox_tit {
    font-size: 3.8vw;
  }

  /* 22*--px(4.5px) → 4vw */
  .con09_lbox_desc {
    margin-top: 2vw;
    font-size: 3.3vw;
    /* 15*--px(3.1px) → 3.3vw */
    word-break: keep-all;
  }

  /* lbox_desc <br>는 인라인(앞뒤 공백X)이라 hide 시 단어 붙음("함께하는더") → PC 줄바꿈 유지 */

  /* ============================================================
     con06 : Fulfillment 물류 인프라 — 3카드 세로 스택
     ============================================================ */

  /* 덱 스택 = PC 핀 전용. 모바일은 래퍼를 없애 카드가 iner 직속처럼 세로 스택(핀 CSS 무해화) */
  .con06 {
    height: auto;
    margin-top: 0;
    /* 섹션 간격은 PC 핀 전용 */
  }

  .con06_deck {
    display: contents;
  }

  .con06_deck>.con06_card {
    position: relative;
    top: auto;
    margin-top: 3vw;
    transform: none;
  }

  .con06_deck>.con06_card1 {
    margin-top: 8vw;
  }

  /* ── 헤더 ── */
  .con06_iner {
    height: auto;
    justify-content: flex-start;
    padding-top: 15vw;
    padding-bottom: 13vw;
  }

  .con06_eyb {
    font-size: 3.5vw;
  }

  .con06_tit {
    font-size: 6.8vw;
    margin-top: 6vw;
    letter-spacing: -0.2vw;
    word-break: keep-all;
    text-wrap: balance;
    max-width: 82vw;
    line-height: 1.3;
  }

  .con06_zero {
    width: 23vw;
    margin-bottom: -2.4vw;
    margin-left: 0.8vw;
    margin-right: -2.5vw;
  }

  .con06_desc {
    font-size: 3.8vw;
    margin-top: 4vw;
  }

  /* 한글 자동 줄바꿈 단어깨짐 방지 (줄바꿈 가이드 규칙4) */
  .con06_desc,
  .con06_c1_desc,
  .con06_c2_desc,
  .con06_item_desc {
    word-break: keep-all;
  }

  /* ── 카드 공통 (폭 확대 + 모서리/간격) ── */
  .con06_card {
    width: 92vw;
    border-radius: 5vw;
    margin-top: 3vw;
  }

  /* ── 카드1 : 텍스트 → 신호등3원 → 마스코트 세로 스택 ── */
  .con06_card1 {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: auto;
    padding: 9vw 0 7vw;
    gap: 5vw;
    margin-top: 8vw;
  }

  .con06_c1txt {
    width: 100%;
    align-items: center;
    text-align: center;
  }

  .con06_c1_tt,
  .con06_c2_tt,
  .con06_c3_tt {
    font-size: 4.6vw;
    font-weight: 900;
  }

  .con06_c1_desc,
  .con06_c2_desc {
    font-size: 3.3vw;
    margin-top: 4vw;
  }

  /* 신호등 3원 : absol → in-flow 중앙 row (겹침 유지) */
  .con06_lights {
    position: relative;
    left: auto;
    top: auto;
    margin-top: 1vw;
  }

  .con06_light {
    width: 25vw;
    height: 25vw;
    margin-left: -2.5vw;
  }

  .con06_light_tx {
    font-size: 3.3vw;
  }

  /* 마스코트 : absol → in-flow 중앙 하단 */
  .con06_c1mascot {
    display: none;
  }

  /* ── 카드2 : 텍스트 → 영상 세로 스택 ── */
  .con06_card2 {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: auto;
    padding: 9vw 4vw 4vw;
    gap: 6vw;
  }

  .con06_c2txt {
    width: 100%;
    align-items: center;
    text-align: center;
  }

  .con06_c2_tt {
    font-size: 4.6vw;
  }


  .con06_c2vid {
    width: 100%;
    height: auto;
    aspect-ratio: 715 / 310;
    border-radius: 4vw;
  }

  /* ── 카드3 : 타이틀 → 아이템3 세로 스택 (연결선·트럭 숨김) ── */
  .con06_card3 {
    height: auto;
    padding: 9vw 0 11vw;
  }



  .con06_c3line {
    display: none;
  }

  .con06_truck {
    width: 90vw;
    bottom: -14vw;
    left: -38vw !important;
  }

  .con06_items {
    flex-direction: column;
    align-items: center;
    gap: 5vw;
    margin-top: 7vw;
  }

  /* 알약 슬라이드 기구(탭 peek + 바디 + 점) vw 재정의 */
  .con06_item {
    width: 82vw;
    height: 42vw;
  }

  .con06_item_body {
    height: 30vw;
    border-radius: 15vw;
    padding: 0 7vw;
  }

  .con06_item_btt {
    font-size: 3.7vw;
  }

  .con06_item_desc {
    font-size: 3.3vw;
    margin-top: 1.4vw;
  }

  .con06_item_tab {
    height: 30vw;
    padding: 3.5vw 0;
    border-radius: 15vw;
    transform: translateY(12vw);
  }

  .con06_item_label {
    font-size: 3.6vw;
  }

  .con06_item_dot {
    width: 3.2vw;
    height: 3.2vw;
  }

  .con06_item_dot_g {
    top: 28.5vw;
  }

  .con06_item_dot_y {
    top: 10.5vw;
  }

  .con06_item.change .con06_item_body {
    transform: translateY(12vw);
  }

  /* ===== con03 : 압도적 브랜드 파워 — ★구성 보존(brand con05식) =====
     PC 구도 = 네이비박스 좌(타이틀+부제+메달) / 우(트로피 히어로가 PET COMMERCE NO.1에 겹침)+캡션.
     모바일: 납작한 등간격 스택(트로피가 死공간에 붕 뜸) 폐기 → 세로 중앙 스택이되
     트로피를 크게 히어로로, PET COMMERCE에 겹쳐 "한 덩어리"로 압축. row-gap 대신 요소별 margin. */
  .con03 {
    height: auto;
    margin-top: -3vw;
    padding-bottom: 6vw;
    /* 그라데이션 배경 위 박스 상하 여백 */
  }

  .con03_iner {
    height: auto;
  }

  .con03_box {
    height: auto;
    border-radius: 5vw;
    /* 50*--px(10px) → 5vw (라운드 유지) */
  }

  .con03_box_iner {
    flex-direction: column;
    justify-content: center;
    height: auto;
    padding: 11vw 6vw 8vw;
    row-gap: 0;
    /* 겹침 제어 위해 요소별 margin 사용 */
  }

  /* 콘텐츠 자식만 in-flow 세로 스택 (장식/BG는 absol 유지) */
  .con03_txt,
  .con03_medal,
  .con03_pet,
  .con03_cap {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
  }

  /* 1) 텍스트 (타이틀 + 부제) — 중앙정렬 */
  .con03_txt {
    align-items: center;
    width: 100%;
    order: 1;
  }

  .con03_tit {
    font-size: 7.1vw;
    /* 50*--px(10px) → 6vw */
    text-align: center;
  }

  .con03_tit_sm {
    font-size: 4.8vw;
    line-height: 1.9;
  }

  .con03_sub {
    margin-top: 4vw;
    font-size: 3.5vw;
    text-align: center;
    line-height: 1.6;
  }

  /* 2) 금메달 4개 — 타이틀 아래 */
  .con03_medal {
    width: 96vw;
    margin-top: -11vw;
    order: 2;
  }

  /* 789*--px → 74% */

  /* 3) 트로피 (히어로) — 크게, PET COMMERCE 위로 올라탐(z4) */
  .con03_trophy {
    width: 78vw;
    z-index: 4;
    order: 4;
    bottom: -35vw;
    top: auto;
    left: 2.4vw;
    rotate: -15.1deg;
  }

  /* 4) PET COMMERCE NO.1 — 트로피 밑동에 겹쳐 한 덩어리(음수 margin, z3 뒤) */
  .con03_pet {
    width: 66vw;
    margin-top: 6vw;
    z-index: 3;
    order: 5;
    margin-left: 13vw;
  }

  /* 5) 캡션 (한국프랜차이즈대상 회장상 수상) — 중앙정렬 */
  .con03_cap {
    justify-content: center;
    width: auto;
    margin-top: 3vw;
  }

  .con03_cap_tx {
    text-align: center;
    font-size: 4vw;

    letter-spacing: 2px;
    line-height: 1.4;
    margin-bottom: 2vw;
  }

  /* 불빛4(econ3_06=장식) → 모바일 노이즈, 숨김 */
  .con03_light4 {
    display: none;
  }

  /* 불빛(screen) — 모바일 노출 + 각자 본인 비율 1.5배 확대(vw = 데스크톱 폭 N×1.5÷19.05) */
  .con03_light1 {
    width: 116.51vw;
    top: 145vw;
    left: -36vw;
  }

  /* 1340×1.5 */
  .con03_light3 {
    top: 51vw;
    left: 1.069%;
    width: 43.31vw;
  }

  /* 550×1.5 */

  /* 수상이력(정보성) — PC 뒤배경 dim스크롤은 모바일서 트로피/PET에 가려짐 →
     캡션 아래 독립 세로 마퀴로 표출(무한 스크롤 유지·폰트 vw 확대). order로 스택 맨끝 */
  .con03_award {
    order: 4;
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: 60vw;

    margin-top: -19vw;
    margin-bottom: 5vw;
  }

  .con03_award_item {
    padding: 3vw 0;
  }

  .con03_award_y {
    font-size: 3.6vw;
    margin-bottom: 1vw;
  }

  .con03_award_d {
    font-size: 3.3vw;
  }


  /* ===== con15 : 창업 FAQ 아코디언 — --px 축소 해제(vw 재정의) + 흰박스 고정높이(720) 풀어 콘텐츠 흐름 ===== */
  .con15_iner {
    padding-top: 15vw;
    padding-bottom: 15vw;
  }

  .con15_tit {
    font-size: 7.6vw;
    letter-spacing: -0.2vw;
  }

  .con15_sub {
    margin-top: 4vw;
    font-size: 3.8vw;
  }

  .con15_box {
    width: 90vw;
    height: 135vw;
    padding: 1vw 0 6vw;
    margin-top: 8vw;
    border-radius: 3.5vw;
  }

  /* height:auto 라 space-between 무효 → 페이지네이션 위 간격 명시 */
  .con15_paging {
    margin-top: 6vw;
  }

  /* 질문 헤더 : 고정높이(72=14.7px) 해제 → 줄바꿈 허용 + 터치 타깃 */
  .con15_q {
    height: auto;
    min-height: 13vw;
    padding: 3vw 4.5vw 3vw 5.5vw;
  }

  .con15_badge_q {
    width: 7vw;
    height: 7vw;
    font-size: 3.8vw;
  }

  .con15_qtxt {
    margin-left: 3vw;
    font-size: 3.7vw;
    line-height: 1.35;
  }

  .con15_toggle {
    width: 8vw;
    height: 8vw;
  }

  /* 다크 원 : 공통 .swiper_navbtn 모바일(9vw) 오버라이드 */
  .con15_toggle_ic {
    width: 6vw;
    height: 6vw;
  }

  /* 흰 화살표 : 공통 .swiper_chev 모바일(3vw) 오버라이드 (원 대비 1/3 유지) */
  .con15_chev_dn {
    width: 2vw;
    height: 2vw;
    margin-top: -0.7vw;
  }

  /* 답변 본문 : 좌 인셋을 질문(5.5vw)과 정렬 */
  .con15_a_body {
    padding: 3.5vw 4.5vw 5vw 5.5vw;
  }

  .con15_badge_a {
    width: 7vw;
    font-size: 3.8vw;
  }

  .con15_atxt {
    margin-left: 3vw;
    font-size: 3vw;
    line-height: 1.5;
  }

  .con15_atxt>br {
    display: none;
  }

  /* ===== con04 : 표준 3카드 (가로 row → 세로 스택) =====
     데스크톱은 --px 기반이라 모바일서 폰트 microscopic·카드 133px로 찌부.
     완성형 이미지(649×372, 텍스트 구움)라 카드는 폭만 키워 세로로 쌓음. */
  .con04_eyb {
    font-size: 3.5vw;
  }

  .con04_tit {
    margin-top: 4vw;
    font-size: 6.4vw;
  }

  .con04_tit_sm {
    font-size: 5.5vw;
    line-height: 1.8;
  }

  /* 37*--px → 4.6vw (line1 작게 유지) */

  /* 3카드 가로 row → 세로 스택 (완성형 이미지 중앙정렬) */
  .con04_cards {
    flex-direction: column;
    align-items: center;
    margin-top: 0vw;
  }

  .con04_card {
    width: 113vw;
    margin-bottom: -22vw;
  }


  /* 649*--px(133px) → 84vw, aspect 649/372 유지 → 높이 자동 */

  /* 데스크톱 가로 스태거/오버랩 margin 리셋 */
  .con04_card1 {
    margin-top: 0;
  }

  .con04_card3 {
    margin-top: 0;
    margin-left: 0;
  }

  /* 센터(업계 유일) 카드: PC는 마스코트가 이 카드 "밑동에 붙어" 위를 가리킴 → 모바일도
     큰 gap에 붕 뜨지 말고 카드 밑동에 밀착. margin-bottom 축소(24→17vw)로 card3 끌어올림. */
  .con04_card2 {
    margin-left: 0;
  }

  /* 마스코트(고양이+강아지) : 센터카드 밑동 밀착 — 살짝 축소(64→58)+위로(34→31vw)로 float 제거.
     강아지 손가락이 위(트로피 카드)를 가리키는 구도 유지 */
  .con04_mascot {
    top: 40vw;
    width: 41vw;
    transform: translateX(33.8vw);
  }

  /* 워터마크 First, Only, Most : 모바일 존재감 상향 */
  .con04_mark {
    margin-top: 12vw;
    font-size: 9vw;
  }

  /* ===== con11 : 인테리어 거품 (개설비용 / 창업특전 / 창업절차) =====
     3 패널(흰/노랑/흰) + 완성형 통이미지(요금표·뱃지·티켓·다운로드버튼).
     --px 기반이라 모바일서 패널 67vw·폰트 microscopic → 패널 90vw로 키우고
     세로라벨→가로라벨(.mobile-pc 자동스왑), 각 패널 column 스택. */

  /* 헤더 (센터) */
  .con11_eyb {
    font-size: 3.4vw;
  }

  /* 18*--px(3.7px) → 3.4vw */
  .con11_tit {
    margin-top: 2.5vw;
    font-size: 7.6vw;
    /* 52*--px(10.6px) → 7.6vw */
    letter-spacing: -0.2vw;
  }

  .con11_tit_sm {
    font-size: 5.8vw;
  }

  /* 42*--px → 5.8vw (line1 작게 유지) */
  .con11_desc {
    margin-top: 4vw;
    font-size: 3.6vw;
  }

  /* 패널 공통 : 67vw(1284*--px) → 90vw, 고정높이 해제(내용이 높이 결정), 세로스택 */
  .con11_box {
    flex-direction: column;
    justify-content: flex-start;
    width: 90vw;
    height: auto;
    border-radius: 4vw;
  }

  /* 가로 라벨(.mobile-pc 자동표시) : 패널 좌상단 정렬 */
  .con11_label_m {
    position: absolute;
    top: -7.9vw;
    left: 2vw;
    width: 34vw;
  }

  /* ── 개설비용 : 흰 패널 + 요금표 + 창업문의 뱃지(요금표 상단 overlay) ── */
  .con11_cost {
    margin-top: 11vw;
    padding: 8vw 0;
  }

  /* 이미지 요금표(가로형)는 세로 확대 불가 → 모바일은 숨기고 아래 HTML 표로 대체 (PC 전용) */
  .con11_cost_table {
    display: none;
  }

  /* HTML 요금표 : 세로로 길게, 블러 티저. 실제 금액은 가려 창업문의 유도 */
  .con11_cost_table_m {
    display: block;
    width: 80vw;
    filter: blur(3.2px);
    -webkit-filter: blur(3.2px);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
  }

  .con11_cost_tbl {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    text-align: center;
    font-size: 3vw;
    color: #333;
  }

  .con11_cost_tbl th,
  .con11_cost_tbl td {
    border: 1px solid #e4e4e4;
    padding: 3.2vw 1.4vw;
    line-height: 1.35;
    word-break: keep-all;
  }

  .con11_cost_tbl thead th {
    background: #6f6f6f;
    color: #fff;
    font-weight: 700;
    padding: 3.6vw 1.4vw;
  }

  .con11_cost_tbl tbody td:first-child {
    background: #f6f6f6;
    font-weight: 700;
    color: #444;
  }

  .con11_cost_tbl tbody td:last-child {
    font-weight: 700;
    color: #222;
  }

  .con11_cost_tbl tfoot td {
    background: #efefef;
    font-weight: 800;
    color: #111;
    padding: 3.8vw 1.4vw;
  }

  /* 열 폭 : 구분(좁게) / 내용(넓게) / 금액(중간) */
  .con11_cost_tbl th:nth-child(1),
  .con11_cost_tbl td:nth-child(1) {
    width: 22%;
  }

  .con11_cost_tbl th:nth-child(2),
  .con11_cost_tbl td:nth-child(2) {
    width: 46%;
  }

  .con11_cost_tbl th:nth-child(3),
  .con11_cost_tbl td:nth-child(3) {
    width: 32%;
  }

  /* 뱃지 = 세로로 길어진 블러 표의 정중앙 overlay (top:50% + translateY 로 중앙 정렬) */
  .con11_badge {
    top: 50%;
    transform: translateY(-50%);
    width: 70vw;
  }

  /* ── 창업특전 : 노란 패널 + 헤더2줄 + 선물(우상단 돌출) + 3 티켓카드(row 유지) ── */
  .con11_benefit {
    margin-top: 10vw;
    padding: 9vw 0;
  }

  .con11_bh_sm {
    font-size: 4.6vw;
  }

  /* 31*--px → 4.2vw */
  .con11_bh_lg {
    margin-top: 2vw;
    font-size: 6.5vw;
  }

  /* 41*--px → 5.6vw */
  .con11_gift {
    top: -15vw;
    right: -3vw;
    width: 42vw;
    rotate: 36deg;
  }

  .con11_bcards {
    flex-direction: column;
    column-gap: 0;
    row-gap: 3vw;
    margin-top: 6vw;
  }

  .con11_bcard {
    width: 63vw;
  }

  /* 321*--px → 28vw ×3 + gap = 88vw */

  /* ── 창업절차 : 흰 패널 + 8 단계카드 + 다운로드 버튼2 ── */
  .con11_process {
    margin-top: 11vw;
    padding: 5vw 0;
  }

  /* PC는 4×2 카드그리드지만, 모바일은 억지 2열을 버리고 單열 세로 스텝리스트로 재구성.
     번호원 = 좌측 세로중앙 노드(우상단 팝아웃 해제) / 타이틀·설명 = 우측.
     순서 01→08 세로로 자연스럽게 읽힘. 신호등(.change) 순환 그대로 유지.
     HTML 구조 변경 없음(번호원이 이미 absolute라 위치만 재배치). */
  .con11_pcards {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 84vw;
    row-gap: 3.5vw;
  }

  .con11_pcard {
    width: 100%;
  }

  /* 카드 = 가로형(번호 좌·글 우). 높이는 내용따라, 좌패딩으로 번호원 자리 확보 */
  .con11_pcard_in {
    justify-content: center;
    width: 100%;
    height: auto;
    min-height: 20vw;
    padding: 4.8vw 5.5vw 4.8vw 22vw;
    border-radius: 3.5vw;
  }

  /* 번호원 = 좌측 세로중앙 노드 */
  .con11_pnum {
    top: 50%;
    left: 4.5vw;
    right: auto;
    transform: translateY(-50%);
    width: 13vw;
    height: 13vw;
    font-size: 4.6vw;
  }

  .con11_ptit {
    font-size: 4.3vw;
  }

  /* 20*--px → 4vw */
  .con11_pdesc {
    margin-top: 1.8vw;
    font-size: 3.3vw;
    line-height: 1.45;
    /* 16*--px → 3.3vw */
    word-break: keep-all;
    /* 단어 단위 줄바꿈(음절 끊김 방지) */
  }

  /* 다운로드 버튼2 (row 유지, 확대) */
  .con11_dlbtns {
    column-gap: 3vw;
    margin-top: 7vw;
  }

  .con11_dlbtn {
    width: 40vw;
  }

  /* 218*--px → 40vw ×2 + gap = 83vw */


  /* ===== con05 : 핵심 경쟁력 타임라인 (지그재그 9카드 → 세로 풀폭 스택) =====
     데스크톱은 --px·vw 혼합이라 모바일서 전체가 ~20% 균등축소(카드 138px, 텍스트 구움 → 판독불가).
     타임라인(중앙선/노란점)·캐릭터는 지그재그 전용 장식 → 숨김. 완성형 카드(672×342)만 세로로 크게 쌓음. */
  .con05 {
    height: auto;
  }

  /* --px*1760 고정높이 해제 → 자식이 높이 결정 */
  .con05_iner {
    width: 94vw;
    height: auto;
    padding-top: 10vw;
    border-radius: 5vw;
    /* --px*40 → 5vw */
    overflow: hidden;
    /* 라운드 코너 클립 */
  }

  /* 타이틀 — 정적 흐름 유지, 폰트 확대 */
  .con05_twrap {
    margin-top: 0;
  }

  .con05_heart {
    width: 9vw;
  }

  /* --px*41(8.4px) → 9vw */
  .con05_tit {
    margin-top: 2vw;
    font-size: 7.2vw;
    /* --px*50(10px) → 6.5vw */
    letter-spacing: -0.2vw;
  }

  .tit_sm {
    font-size: 5vw;
  }

  .con05_tit .tit_sm {
    line-height: 1.8;
  }

  /* --px*40(8px) → 5vw */

  /* 중앙 타임라인 선·노란점, 박스별 캐릭터 = 지그재그 전용 장식 → 세로 스택선 무의미, 숨김 */
  .con05_line,
  .con05_dot,
  .con05_pop {
    display: none;
  }

  /* 핀 컨베이어 래퍼 = PC 전용. 모바일은 display:contents 로 래퍼를 없애 박스가 iner 직속처럼 세로 스택(핀 CSS 무해화) */
  .con05_flow {
    display: contents;
  }

  /* 상/하단 페이드 = PC 핀 전용 장식, 모바일 숨김 */
  .con05_fade {
    display: none;
  }

  /* 9개 경쟁력 카드 : absol 지그재그 → in-flow 세로 풀폭 스택 (완성형 이미지, aspect 유지) */
  .con05_box {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 103vw;
    margin-top: 0;
    margin-bottom: -13vw;
  }


  /* 타이틀과 첫 카드 사이 */

  /* WE ARE PETMILY — 우하단 absol → 하단 중앙 흐름 */
  .con05_petmily {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 70vw;
    margin-top: 4vw;
    margin-right: 26vw;
    margin-bottom: -1vw;
  }

  .con02_ring {
    display: none;
  }

  .con02_light {
    width: 60vw;
    top: 19vw;
  }

  .con02_light_l {
    left: 7.7%;
  }

  .con02_light_r {
    right: 7.7%;
  }

  .con02_spot {
    width: 12vw;
  }

  .con07 {
    padding-top: 14vw;
    padding-bottom: 0;
  }

  .con08_iner {
    padding-top: 15vw;
    padding-bottom: 10vw;
  }

  .con07_excl::before {
    inset: calc(var(--px) * 65);
  }

  .con09_fitem {
    width: calc(var(--px) * 790);
    height: unset;
    aspect-ratio: 9 / 16;
    border-radius: 3vw;

  }

  .con09_chev_up {
    margin-left: calc(var(--px) * 19);
  }

  .con09_chev_down {
    margin-right: calc(var(--px) * 19);
  }

  .con11_iner {
    padding-top: 15vw;
    padding-bottom: 15vw;
  }

  .con11_process_section .con11_process_iner {
    padding-top: 10vw;
  }

  .form_section_iner {
    padding-top: 0;
    padding-bottom: 15vw;
  }
}