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

/* ===== 탭 영역 래퍼 — 서브헤더(absolute 오버레이)의 기준(relative). 패널이 흐름을 채움 ===== */
.brand_tabs {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-top: -0.6vw;
  /* bcon1 하단 여백 보정 → 히어로 시작 갭 시안(32px) 맞춤 */
}

/* ===== 탭 패널 — 활성(.on)만 노출 (동작은 brand.js) ===== */
.brand_panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.brand_panel:not(.on) {
  display: none;
}

/* ===== 3탭 공통 인트로 히어로 (bcon2 ABOUT / bcon7 선진펫 / bcon10 CSR) =====
   구조: section.btab_hero > .btab_iner front fdccc(중앙 텍스트) + img/video.bg_img(풀블리드 배경) */
.btab_hero {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 41.995vw;
  padding-top: 15.748vw;
  overflow: hidden;
}

/* 선진펫 = 영상 배경(.bg_img video). 영상 로드 전 검정 (이미지 배경 bcon2/bcon10 은 시안이 이미 어두워 별도 처리 불필요) */
.bcon7 {
  background: #000;
}

.bcon7_video {
  height: 135%;
}

/* 영상 위 딤 (밝은 주간 항공영상 → 텍스트 가독성) */
.btab_dim {
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

/* 중앙 텍스트 래퍼 — flex/positioning 은 HTML 의 front + fdccc 유틸에 위임, 위로 살짝 올림만 */
.btab_iner {
  margin-bottom: 2.6vw;
}

.btab_tit {
  color: #fff;
  font-size: calc(var(--px) * 50);
  line-height: 1.25;
  letter-spacing: -0.13vw;
  text-align: center;
}

.btab_pt {
  color: #facd1d;
}

/* 영문 라벨 (tab1 eyebrow / tab2·3 subtitle) — .ria lt01 */
.btab_eng {
  margin-top: 1.8vw;
  color: #fff;
  font-size: calc(var(--px) * 18);
  line-height: 1;
}

/* eyebrow(타이틀 위) 위치 변형 — tab1 */
.btab_eng_top {
  margin-top: 0;
  margin-bottom: 1.7vw;
}

/* 국문 설명 (tab1 desc) — Pretendard Medium(fw500) */
.btab_desc {
  margin-top: 1.5vw;
  color: #fff;
  font-size: calc(var(--px) * 20);
  line-height: 1.55;
  text-align: center;
}


/* ==================== con03 : 브랜드 3대 가치 (GROWTH / GREEN / GOOD) — 3 원형 카드 ====================
   각 원 = 마스코트(bcon3_0Na) + 영문(Ria) + 국문타이틀(nnsq fw900) + 설명(Pretendard).
   영문은 이미지 아님 = Ria 라이브 텍스트(RiaSans-ExtraBold 54px). GROWTH/GOOD=흰 글자·노랑 원, GREEN=노랑 글자·흰 원. */
.con03 {
  background: #f8f4eb;
}

.con03_iner {
  padding-top: 5.5vw;
  padding-bottom: 3.5vw;
}

.con03_row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: calc(var(--px) * 26);
}

.con03_circle {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 398);
  height: calc(var(--px) * 398);
  border-radius: 50%;
  transition: box-shadow 0.3s ease;
}

.con03_circle:hover {
  box-shadow: 0 0 calc(var(--px) * 40) calc(var(--px) * 10) rgba(0, 0, 0, 0.13);
}

.con03_circle_y {
  background: #ffd11e;
}

.con03_circle_w {
  background: #fff;
}

/* 마스코트 래퍼 — 폭 고정 + 각 에셋 자연비(aspect-ratio) 로 세로 예약(레이지 로딩 시프트 방지) */
.con03_mas {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 244);
  margin-top: calc(var(--px) * 29);
}

/* 에셋 초점(지구/새싹/상점)이 우측 투명여백 탓에 좌측편향 → 초점이 원 중앙 오게 우측 시프트 */
.con03_mas_a {
  aspect-ratio: 252 / 152;
  transform: translateX(calc(var(--px) * 46));
}

.con03_mas_b {
  aspect-ratio: 252 / 143;
  transform: translateX(calc(var(--px) * 58));
}

.con03_mas_c {
  aspect-ratio: 252 / 131;
  transform: translateX(calc(var(--px) * 48));
}

/* 영문 라벨 — Ria 라이브 텍스트, 마스코트 하단에 겹침 */
.con03_en {
  margin-top: calc(var(--px) * -45);
  color: #fff;
  font-size: calc(var(--px) * 54);
  line-height: 1;
}

.con03_en_grn {
  color: #facd1d;
}

.con03_tt {
  margin-top: calc(var(--px) * 17);
  color: #141414;
  font-size: calc(var(--px) * 24);
  line-height: 1.15;
  text-align: center;
}

.con03_desc {
  margin-top: calc(var(--px) * 14);
  color: #141414;
  font-size: calc(var(--px) * 16);
  line-height: 1.3;
  text-align: center;
}


/* ==================== con05 : AWARDS 배너 — 한국 프랜차이즈 대상 4년 연속 수상 ====================
   스택(flex컬럼 fdcc) = 회장상수상(bcon5_01) / 타이틀(HTML) / 메달(bcon5_05) / 흐린텍스트(bcon5_13, 메달 뒤 z1).
   나머지 absol(AWARDS·트로피·강아지·고양이) + 불빛 4장(screen 블렌드, animate.css sunshine 반짝). */
.con05 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: calc(var(--px) * 819);
}

/* 스택 컨테이너 — padding-top 으로 첫 요소(회장상수상) 위치. flex 는 front+fdcc 위임 */
.con05_iner {
  padding-top: 11.1vw;
}

/* 스택1 : 회장상수상 텍스트 이미지 */
.con05_hint {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 287);
  aspect-ratio: 287 / 23;
}

/* 스택2 : 타이틀 (HTML, NanumSquareNeo Heavy 흰색) — 1줄 40 / 2줄 50 */
.con05_tit {
  position: relative;
  z-index: 3;
  margin-top: 2.2vw;
  color: #fff;
  font-size: calc(var(--px) * 40);
  line-height: 1.1;
  letter-spacing: -0.13vw;
  text-align: center;
}

.con05_tit_st {
  font-size: calc(var(--px) * 50);
  font-weight: 900;
}

/* 스택3 : 2022 대상 메달 4개 */
.con05_medal {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2.3vw;
  width: calc(var(--px) * 562);
  aspect-ratio: 562 / 217;
}

/* 스택4 : THE LEADER IN PET SERVICES (흐린 배경 텍스트) — 메달과 겹쳐 뒤(z1) */
.con05_leader {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -8vw;
  width: calc(var(--px) * 1110);
  aspect-ratio: 1110 / 220;
}

/* AWARDS 로고 (좌상단) */
.con05_awards {
  z-index: 3;
  top: 5.2vw;
  left: 11.5%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 180);
  aspect-ratio: 180 / 31;
}

/* 트로피 (우측, 상하로 섹션 밖까지 → overflow 클립) */
.con05_trophy {
  z-index: 4;
  top: -2.6vw;
  left: 51.5%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 842);
  aspect-ratio: 842 / 1084;
}

/* 강아지 (좌) */
.con05_dog {
  z-index: 5;
  top: 13.9vw;
  left: 5.5%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 407);
  aspect-ratio: 407 / 472;
}

/* 고양이 (우, 트로피 옆) */
.con05_cat {
  z-index: 5;
  top: 15.6vw;
  left: 76.4%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 381);
  aspect-ratio: 381 / 438;
}

/* ===== 불빛 4장 (bcon5_06~09) — screen 블렌드 글로우 =====
   z-index 최상단(콘텐츠 앞). screen 블렌드는 밝게만 하고 어둡게 안 하므로 앞에 둬도 트로피·글자 안 씻기고 shine 만 얹힘. 스케일 없이 opacity 반짝만. */
.con05_light {
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  mix-blend-mode: screen;
}

/* ★ 위치 = 디자인 실제 glow 레이어(LIGHT linear-dodge) 중심에 각 웹글로우의 glow중심을 안착.
   06~09 는 PSD 레이어 직접 export 아님(크기·비율 불일치) → 디자인 glow 레이어 A/B/C/D 중심에 매핑.
   10 = Layer12 크기 정확일치 → top-left 정확 배치. */

/* 07 : 상단 대형 앰비언트 (유저 육안 조정) */
.con05_light1 {
  top: -0.3vw;
  left: 28vw;
  width: calc(var(--px) * 1373);
  aspect-ratio: 1373 / 819;
  animation: sunshine 3.2s ease-in-out infinite;
}

/* 08 : 트로피 컵 (유저 육안 조정) */
.con05_light2 {
  top: -0.2vw;
  left: 44.6%;
  width: calc(var(--px) * 1013);
  aspect-ratio: 1013 / 819;
  animation: sunshine 4.5s ease-in-out 0.6s infinite;
}

/* 06 : 좌측 (유저 육안 조정) */
.con05_light3 {
  top: 7.9vw;
  left: 17.9%;
  width: calc(var(--px) * 664);
  aspect-ratio: 664 / 655;
  animation: sunshineFlare 3.8s ease-in-out 0.3s infinite;
}

/* 09 : 트로피 베이스 (유저 육안 조정) */
.con05_light4 {
  top: 10.4vw;
  left: 50.3%;
  width: calc(var(--px) * 948);
  aspect-ratio: 948 / 609;
  animation: sunshine 2.8s ease-in-out 0.9s infinite;
}

/* 월계수 (배경 데코) — 캐릭터·메달 뒤(z2). 네이비 위 금색 = 정상 블렌드(불빛 아님) */
.con05_leaf {
  z-index: 2;
  top: 8.8vw;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 1392);
  aspect-ratio: 1392 / 554;
}


/* ==================== con04 : HISTORY 연혁 스와이퍼 (about 탭, con03↔bcon5 사이) ====================
   상단행(HISTORY / 공통 프로그레스바 / 공통 네비) + 풀블리드 카드 스와이퍼 4장.
   .swiper-slide-active 카드 = 위로 상승 + 쉐도우 + 불투명(비활성 반투명). 연도=Ria, 소제목=nnsq, 리스트=Pretendard. 이미지 미사용. absolute 0개. */
.con04 {
  background: #f8f4eb;
}

.con04_iner {
  padding-top: 4.8vw;
  padding-bottom: 3vw;
}

/* con04 하단 CTA (선진펫 con08 이동) — 공통 .pet_btn 상속 · 위 여백만 (con08_btn 패턴) */
.con04_btn {
  position: relative;
  z-index: 10;
  margin-top: 1.5vw;
}

/* 상단행 — HISTORY(슬롯284) + 프로그레스(1061) + 네비. head 폭1469 가운데정렬(iner fdcc) */
.con04_head {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 1469);
}

.con04_htit {
  width: calc(var(--px) * 284);
  color: #141414;
  font-size: calc(var(--px) * 32);
  line-height: 1;
}

.con04_prog {
  width: calc(var(--px) * 1061);
}

.con04_nav {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: calc(var(--px) * 40);
  margin-left: calc(var(--px) * 41);
}

/* 카드 스와이퍼 — 풀블리드(양끝 잘림). pt=head갭+상승 클리핑룸, pb=쉐도우 클리핑룸 */
.con04_swiper {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-top: 1.7vw;
  padding-top: 5.2vw;
  padding-bottom: 0;
  overflow: hidden;
}

.con04_swiper .swiper-slide {
  width: calc(var(--px) * 517);
  justify-content: flex-start;
}

/* 카드 — 기본(비활성): 반투명 + 쉐도우 없음. active 에서 상승/불투명/쉐도우 (transition) */
.con04_sitem {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: calc(var(--px) * 500);
  padding: calc(var(--px) * 38) calc(var(--px) * 42) calc(var(--px) * 54) calc(var(--px) * 64);
  border-radius: calc(var(--px) * 40);
  background: #fff;
  opacity: 0.55;
  transition: transform 0.45s ease, box-shadow 0.45s ease, opacity 0.45s ease;
}

.con04_swiper .swiper-slide-active .con04_sitem {
  opacity: 1;
  transform: translateY(-4.7vw);
  box-shadow: 0 calc(var(--px) * 20) calc(var(--px) * 45) rgba(20, 20, 20, 0.13);
}

/* 연도(우측정렬 노랑 Ria) / 소제목(nnsq Heavy) */
.con04_year {
  color: #ffd11e;
  font-size: calc(var(--px) * 35);
  line-height: 1;
  text-align: right;
}

.con04_stit {
  margin-top: 2.2vw;
  color: #141414;
  font-size: calc(var(--px) * 24);
  line-height: 1;
}

/* 연도+설명 리스트 (row = 연도컬럼 71 + 설명) */
.con04_rows {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-top: 1.6vw;
  row-gap: calc(var(--px) * 3);
}

.con04_row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}

.con04_yr {
  flex-shrink: 0;
  width: calc(var(--px) * 71);
  color: #141414;
  font-size: calc(var(--px) * 16);
  line-height: 1.6;
}

.con04_desc {
  color: #141414;
  font-size: calc(var(--px) * 16);
  line-height: 1.6;
}



/* ==================== con06 : BRAND IDENTITY (로고타입 / 컬러 / 캐릭터) ====================
   흰 배경. flex column stack: 헤딩 → LOGO TYPE → COLOR → CHARACTER.
   absol 2개 = .con06_arc(노란 dome, bottom) / .con06_mascot(bcon6_03, 중앙 bottom앵커). 그 외 rltv. */
.con06 {
  background: #ffffff;
}

.con06_iner {
  padding-top: 5.6vw;
  padding-bottom: 12.2vw;
}

/* 헤딩 (Ria, 중앙, caps 렌더) */
.con06_tit {
  color: #141414;
  font-size: calc(var(--px) * 32);
  letter-spacing: -0.08vw;
  line-height: 1;
}

.con06_pb_img {
  background: #ddd;
  width: calc(var(--px) * 1284);
  border-radius: 1vw;

  margin-bottom: 4vw;

  aspect-ratio: 1284 / 660;
  overflow: hidden;
}

/* 블록 공통 (LOGO/COLOR/CHARACTER) — 폭 1284, 라벨 좌정렬 세로스택. 블록 간 간격(visual-check 실측: 89~90px) */
.con06_block {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 1284);
  margin-top: 3.3vw;
}

/* 서브 라벨 (LOGO TYPE / COLOR / CHARACTER — Ria caps, 회색, 좌 12px 인셋) */
.con06_slabel {
  margin-left: calc(var(--px) * 12);
  color: #8a8a8a;
  font-size: calc(var(--px) * 20);
  letter-spacing: -0.05vw;
  line-height: 1;
}

.con06_slabel1 {
  margin-left: 0;
  margin-top: 1vw;
}

/* LOGO 박스 행 (2박스, space-between) */
.con06_lrow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin-top: 1vw;
}

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

/* 로고박스 이미지 래퍼 (bcon6_01/02, 그리드 포함 626×226) */
.con06_limg {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 626);
  aspect-ratio: 626 / 226;
}

/* 로고박스 캡션 (한글/영문 타입 — Pretendard Bold). visual-check 실측: 이미지 bottom→캡션 24px */
.con06_lcap {
  margin-top: 1.3vw;
  color: #000000;
  font-size: calc(var(--px) * 22);
  font-weight: 700;
  letter-spacing: -0.05vw;
  line-height: 1;
}

/* COLOR 박스 행 */
.con06_crow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin-top: 0.9vw;
}

/* 색박스 공통 (라벨 하단좌측, 보더 없음) */
.con06_cbox {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  width: calc(var(--px) * 627);
  height: calc(var(--px) * 158);
  padding-left: calc(var(--px) * 61);
  padding-bottom: calc(var(--px) * 33);
  border-radius: calc(var(--px) * 30);
  box-sizing: border-box;
}

.con06_cbox_bk {
  background: #000000;
}

.con06_cbox_yl {
  background: #e8bf1f;
}

/* 색박스 라벨 (PetMart Black/Yellow — Pretendard SemiBold, 흰색) */
.con06_ccap {
  color: #ffffff;
  font-size: calc(var(--px) * 22);
  font-weight: 600;
  letter-spacing: -0.03vw;
  line-height: 1;
}

/* CHARACTER 텍스트 행 (width100% + 양옆패딩 + space-between: 좌 BENTLY / 우 RUI) */
.con06_chrow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin-top: 4.8vw;
  padding-left: 4.7vw;
  padding-right: 4.6vw;
  box-sizing: border-box;
}

/* 캐릭터 텍스트 칼럼 (좌 = 좌정렬) */
.con06_chtxt {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

/* 우 칼럼 = 우정렬 */
.con06_chtxt_r {
  align-items: flex-end;
  text-align: right;
}

/* 캐릭터 이름 (BENTLY/RUI — Ria, 밝은 노랑) */
.con06_cname {
  color: #ffd11e;
  font-size: calc(var(--px) * 35);
  letter-spacing: -0.09vw;
  line-height: 1;
}

/* 마스코트 서브 (마스코트 벤틀리/루이 — NanumSquareNeo Heavy) */
.con06_csub {
  margin-top: 1.3vw;
  color: #141414;
  font-size: calc(var(--px) * 26);
  font-weight: 800;
  letter-spacing: -0.07vw;
  line-height: 1;
}

/* "마스코트" 부분만 회색 (이름=#141414 유지) — visual-check 실측 #8a8a8a */
.con06_ms {
  color: #8a8a8a;
}

/* 캐릭터 설명 (Pretendard Medium, 3줄) */
.con06_cdesc {
  margin-top: 1vw;
  color: #000000;
  font-size: calc(var(--px) * 16);
  font-weight: 500;
  letter-spacing: -0.03vw;
  line-height: 1.34;
}

/* ★ 노란 아치 (full-bleed dome, bottom 고정, CSS shape) */
.con06_arc {
  /* left: 5%; */
  bottom: -6.6vw;
  width: calc(var(--px) * 1795);
  height: calc(var(--px) * 342);
  background: #ffd11e;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

/* ★ 마스코트 (bcon6_03, 중앙 + bottom 앵커 — 아치 위)
   파일 자연비(561×297) 무왜곡. 폭 500(디자인 표시폭) → 높이 자동. flex-center 로 가운데. */
.con06_mascot {
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 8.2vw;
  width: calc(var(--px) * 500);
  aspect-ratio: 561 / 297;
  left: 37.5vw;
}



/* ==================== con08 : 선진펫 소개 (The Global Engine) — 동심원 + 본사 이미지 슬라이더(센터 확대) ====================
   센터(활성) 슬라이드 = 높이 증가 / prev·next = 살짝 위로. overflow:visible 로 좌우 partial·raise 노출(섹션이 뷰포트 끝 클립).
   버튼 = custom.css 공통 pet_btn. 동심원 = front con05 패턴(1px 스트로크, calc 중앙정렬). */
.con08 {
  background: #fff;
}

.con08_iner {
  padding-top: 14.8vw;
  padding-bottom: 6.5vw;
}

/* 동심원 배경 (센터 = 슬라이더 중심 29.8vw) */
.con08_circ {
  position: absolute;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #e2e2e2;
  border-radius: 50%;
}

.con08_circ_l {
  width: calc(var(--px) * 1120);
  height: calc(var(--px) * 1120);
  top: calc(29.8vw - var(--px) * 560);
}

.con08_circ_s {
  width: calc(var(--px) * 866);
  height: calc(var(--px) * 866);
  top: calc(29.8vw - var(--px) * 433);
}

/* 타이틀 (Ria ExtraBold, 검정) */
.con08_tit {
  position: relative;
  z-index: 2;
  color: #000;
  font-size: calc(var(--px) * 46);
  line-height: 1.15;
  text-align: center;
}

/* 슬라이더 — overflow:visible 로 센터확대·양옆 raise·좌우 partial 노출.
   height 고정(활성 슬라이드 높이) = 흐름상 서브타이틀 위치 확정(스와이퍼 자동높이 편차 방지) */
.con08_swiper {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: calc(var(--px) * 268);
  margin-top: 2.2vw;
  overflow: visible;
}

.con08_swiper .swiper-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  height: 100%;
}

.con08_swiper .swiper-slide {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 555);
}

/* sitem = 알약(pill) 프레임. 라디우스 = 높이 반으로 클램프(시안: 양옆 h188→r92 / 센터 h268→r132) */
.con08_sitem {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 517);
  height: calc(var(--px) * 188);
  border-radius: 50vw;
  overflow: hidden;
  transition: height 0.4s ease, transform 0.4s ease;
}

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

/* 센터(활성) = 높이 증가 */
.swiper-slide-active .con08_sitem {
  height: calc(var(--px) * 268);
}

/* prev·next = 살짝 위로 */
.swiper-slide-prev .con08_sitem,
.swiper-slide-next .con08_sitem {
  transform: translateY(calc(var(--px) * -58));
}

/* 서브타이틀 (Pretendard Bold) */
.con08_stt {
  position: relative;
  z-index: 2;
  margin-top: 1.8vw;
  color: #000;
  font-weight: 700;
  font-size: calc(var(--px) * 22);
  text-align: center;
}

/* 설명 (Pretendard Medium, 2문단) */
.con08_desc {
  position: relative;
  z-index: 2;
  margin-top: 1vw;
  color: #000;
  font-weight: 500;
  font-size: calc(var(--px) * 19);
  line-height: 1.4;
  text-align: center;
}

.con08_desc2 {
  margin-top: 1vw;
}

.con08_btn {
  position: relative;
  z-index: 10;
  margin-top: 1.5vw;
}


/* ==================== con09 : 선진펫 3대 활동 (GLOBAL VISION / LOCAL CONNECTION / CUSTOMER EXPERIENCE) ====================
   3행 = 텍스트 + 이미지. HTML 은 행마다 텍스트>이미지 순, 행2(LOCAL)만 이미지 order:-1 로 좌측.
   버튼=공통 pet_btn(2줄 변형), 이미지=bcon9_*, 마스코트/슬라이더 nav·prog 만 absol. */
.con09 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background: #fff;
  padding-bottom: 4vw;
}

/* 라운드 컨테이너 (bcon9_bg 라이트블루) */
.con09_box {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 1851);
  border-radius: calc(var(--px) * 100);
  overflow: hidden;
}

/* 콘텐츠 레이어 (front) — 3행 세로 나열 */
.con09_iner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-top: 8.8vw;
  padding-bottom: 7vw;
  row-gap: 8.4vw;
}

/* 한 행 = 텍스트 + 이미지 (space-between) */
.con09_row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: calc(var(--px) * 1385);
}

/* 행2(LOCAL) = 이미지 좌측으로, 텍스트 우측 */
.con09_row_rev .con09_img {
  order: -1;
}

/* ─ 텍스트 블록 ─ */
.con09_txt {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 624);
  padding-left: calc(var(--px) * 63);
  /* 텍스트 들여쓰기(배지 오른쪽) */
}

/* 배지 = 텍스트 왼쪽으로 걸침(outdent) */
.con09_badge {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 51);
  aspect-ratio: 51 / 43;
  margin-left: calc(var(--px) * -63);
}

.con09_eyb {
  margin-top: 1.5vw;
  color: #8a8a8a;
  font-size: calc(var(--px) * 17);
  line-height: 1;
}

.con09_tt {
  margin-top: 1.2vw;
  color: #000;
  font-size: calc(var(--px) * 38);
  line-height: 1.15;
}

.con09_sub {
  margin-top: 1.1vw;
  color: #000;
  font-size: calc(var(--px) * 22);
  line-height: 1.4;
}

.con09_desc {
  margin-top: 0.8vw;
  color: #000;
  font-size: calc(var(--px) * 16);
  line-height: 1.55;
}

/* 문단 분리(빈 줄 대체 — 연속 br 금지) */
.con09_desc2 {
  margin-top: 0.7vw;
}

/* ─ 버튼 (공통 pet_btn + con09 2줄 변형) ─ */
.con09_btns {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: calc(var(--px) * 12);
  margin-top: 1.9vw;
}

.con09_btn {
  height: calc(var(--px) * 74);
  padding-left: calc(var(--px) * 82);
  padding-right: calc(var(--px) * 32);
}

.con09_btn .pet_btn_hv {
  top: calc(var(--px) * 15);
  left: calc(var(--px) * 15);
  width: calc(var(--px) * 44);
  height: calc(var(--px) * 44);
}

.con09_btn .pet_btn_arw {
  top: 50%;
  left: calc(var(--px) * 31);
  transform: translateY(-50%);
}

.con09_btn_txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  font-size: calc(var(--px) * 16);
  line-height: 1.35;
  text-align: left;
  white-space: nowrap;
}

/* ─ 이미지 블록 ─ */
.con09_img {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 664);
}

.con09_img1 {
  width: calc(var(--px) * 663);
}

.con09_card {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 663 / 402;
  border-radius: calc(var(--px) * 30);
  overflow: hidden;
  box-shadow: 0 calc(var(--px) * 14) calc(var(--px) * 42) rgba(11, 26, 47, 0.3);
}

/* 마스코트 (카드 밖 우하단 오버랩) */
.con09_mascot {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 3;
}

.con09_mascot_cat {
  right: calc(var(--px) * -34);
  bottom: calc(var(--px) * -44);
  width: calc(var(--px) * 517);
  aspect-ratio: 517 / 294;
}

.con09_mascot_dog {
  right: calc(var(--px) * -20);
  bottom: calc(var(--px) * -49);
  width: calc(var(--px) * 387);
  aspect-ratio: 387 / 293;
  display: none;
}

/* ─ 행2 슬라이더 (플리마켓 6장) ─ */
.con09_swiper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 663 / 402;
  border-radius: calc(var(--px) * 30);
  overflow: hidden;
  box-shadow: 0 calc(var(--px) * 14) calc(var(--px) * 42) rgba(0, 0, 0, 0.3);
}

/* 슬라이더 위 프로그레스 (흰색) — 공통 swiper_prog 색만 override */
.con09_prog {
  position: absolute;
  left: calc(var(--px) * 61);
  bottom: calc(var(--px) * 41);
  z-index: 5;
  width: calc(var(--px) * 444);
  background: rgba(255, 255, 255, 0.3);
}

.con09_prog_fill {
  background: #fff;
}

/* 슬라이더 위 네비 (흰원+다크 셰브론) — 공통 swiper_navbtn/chev 색 override */
.con09_nav {
  position: absolute;
  right: calc(var(--px) * 40);
  bottom: calc(var(--px) * 30);
  z-index: 5;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: calc(var(--px) * 30);
  --sbtn-bg: #fff;
  --sbtn-chev: #141414;
  --sbtn-ring: #fff;
}


/* ==================== con10 : 사회나눔(CSR) 게시판 (brand_csr) — 후원활동 / 함께하는 보호소 탭 전환 ====================
   구조 전부 공통: 탭(.pet_tabs/.pet_tab/.pet_tab_panel) + 헤더(.pet_tabhead*) + 카드그리드(.pet_card*) — custom.css.
   탭 전환 = script.js 공통 핸들러. con10 고유 = 더보기(sup_hide/sup_more) + 하트 크기뿐. */
.con10 {
  background: #fff;
}

.con10_iner {
  padding-top: 3.6vw;
  padding-bottom: 5vw;
}

/* 탭 pill + 탭 + 패널 전환 = 공통 .pet_tabs / .pet_tab / .pet_tab_panel (custom.css) 로 이전.
   HTML 은 .pet_tabs > a.pet_tab[data-tab] + .pet_tab_panel[data-panel] 사용, 전환 JS 는 공통 핸들러(script.js). */

/* 헤더(하트+타이틀+설명) · 카드그리드 = 공통 .pet_tabhead* / .pet_card* (custom.css) 사용.
   con10 고유값은 하트 크기(46×42)만. 그리드/카드/이미지 치수는 공통 기본값(brand con10 기준)이라 별도 지정 불필요. */
.con10 .pet_tabhead_heart {
  width: calc(var(--px) * 46);
  aspect-ratio: 46 / 42;
}

/* 후원활동 패널만 카드 축소 — 그리드폭·카드폭을 같이 줄여야 함. 카드만 줄이면 그 차이가 전부
   간격으로 가서 카드가 멀어 보임. 1320/410(간격 30) → 1080/330(간격 30) : community·franchise 와 동일. */
.con10 .pet_tab_panel[data-panel="donation"] .pet_cardgrid {
  width: calc(var(--px) * 1080);
}

.con10 .pet_tab_panel[data-panel="donation"] .pet_card {
  width: calc(var(--px) * 330);
}

/* 후원활동 카드 썸네일만 1:1 정사각 (보호소 패널은 로고라 기존 비율 그대로 유지).
   선택자 4단계라 모바일 공통값(.con10 .pet_card_img{height:26vw})도 덮음 = 모바일도 1:1. */
.con10 .pet_tab_panel[data-panel="donation"] .pet_card_img {
  position: relative;
  height: auto;
  aspect-ratio: 1 / 1;
}

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

/* 함께하는 보호소는 제목 없이 로고 이미지만 노출합니다.
   카드 프레임 크기는 공통값을 유지하고 내부 이미지만 contain 처리해 어떤 비율의 로고도 잘리지 않습니다. */
.con10 .pet_tab_panel[data-panel="shelter"] .pet_card_img {
  box-sizing: border-box;
  padding: calc(var(--px) * 26);
  border: 1px solid #eee;
  background: #fff;
}

.con10 .pet_tab_panel[data-panel="shelter"] .pet_card_img img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

/* 더보기로 한 줄씩 노출될 초기 숨김 카드셀 (brand.js · 공통 .pet_cardcell + 이 모디파이어) */
.sup_hide {
  display: none;
}

/* 더보기 버튼 (pet_btn 공통 — margin 만) */
.sup_more {
  margin-top: 3.5vw;
}


/* ============================================================================
   📱 MOBILE ( max-width:599px ) — BRAND (브랜드)
   ============================================================================ */
@media (max-width: 599px) {

  /* ===== con04 : HISTORY 연혁 스와이퍼 — 모바일 (헤더 1줄 유지 + 카드 확대) =====
     치수가 --px(1905 캔버스 비례)라 모바일서 microscopic → vw 재정의(폰트 min 3.3vw).
     스와이퍼 slidesPerView:'auto' 라 카드 width 만 CSS override(JS 무수정). active 상승 연출 유지. */
  .con04_iner {
    padding-top: 11vw;
    padding-bottom: 15vw;
  }

  /* 헤더행 — HISTORY + 프로그레스(flex 채움) + 네비 1줄 유지 */
  .con04_head {
    width: 90vw;
    justify-content: center;
  }

  .con04_htit {
    width: auto;
    font-size: 7vw;
  }

  .con04_prog {
    flex: 1;
    margin: 0 7vw 0 6.5vw;
  }

  .con04_nav {
    gap: 3vw;
    margin-left: 0;
  }

  /* 카드 스와이퍼 — 상승/쉐도우 클리핑룸 확보 */
  .con04_swiper .swiper-slide {
    width: 74vw;
  }

  /* 슬롯폭 */
  .con04_sitem {
    width: 70vw;
    padding: 5.5vw 6vw 7vw 8vw;
    border-radius: 4vw;
  }

  .con04_swiper .swiper-slide-active .con04_sitem {
    transform: none;
  }

  .con04_year {
    font-size: 5.5vw;
  }

  /* 연도(2000s) */
  .con04_stit {
    margin-top: 3vw;
    font-size: 4.2vw;
  }

  /* 소제목 */
  .con04_rows {
    margin-top: 4vw;
    row-gap: 1.5vw;
  }

  .con04_yr {
    width: 14vw;
    font-size: 3.3vw;
  }

  /* 연도컬럼(1993) */
  .con04_desc {
    flex: 1;
    min-width: 0;
    font-size: 3.3vw;
    line-height: 1.6;
    text-wrap: balance;
  }



  /* con04 HISTORY : 모바일은 Swiper 해제 후 세로 리스트 */
  .con04_prog,
  .con04_nav {
    display: none;
  }

  .con04_swiper {
    width: 90vw;
    margin-top: 6vw;
    padding-top: 0;
    padding-bottom: 0;
    overflow: visible;
  }

  .con04_swiper .swiper-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4vw;
    transform: none;
  }

  .con04_swiper .swiper-slide {
    width: 100%;
    height: auto;
  }

  .con04_swiper .swiper-slide:nth-child(n+5) {
    display: none;
  }

  .con04_sitem {
    width: 100%;
    opacity: 1;
    transform: none;
  }

  .con04_swiper .swiper-slide-active .con04_sitem {
    transform: none;
    box-shadow: none;
  }

  /* con04 하단 CTA — 공통 .pet_btn(70vw) 상속 · 위 여백만 */
  .con04_btn {
    margin-top: 7vw;
  }

  /* ==================== con05 : AWARDS 배너 (about 탭) — 모바일 확대·재배치 ====================
     PC 가로구성(강아지↔트로피·고양이)이 --px 축소로 390×168 초미니 띠 + 타이틀 8px(판독불가).
     → 섹션 세로 확대(min-height) + 텍스트 스택 가독화 + 데코 스케일·재앵커. 트로피 넘침은
     overflow:hidden 으로 클립(PC도 섹션 밖 클립 의도). in-flow 자식은 con05_iner 하나라 flex:1
     로 섹션높이 채워 하단앵커(캐릭터·트로피 bottom) 기준선 = 섹션바닥으로 안정화. */
  .con05 {
    position: relative;
    /* 자식 absol 앵커 기준 명시 */
    height: 130vw;
  }

  .con05_iner {
    flex: 1;
    /* 섹션 높이 채움 → bottom 앵커 기준선 확보 */
    padding-top: 20vw;
  }

  /* 불빛 글로우 4장 — 모바일에서는 PC 기준 width의 1.5배 */
  .con05_light1 {
    width: calc(var(--px) * 2059.5);
    top: 77vw;
    left: -27vw;
  }

  .con05_light2 {
    width: calc(var(--px) * 1519.5);
    top: 80vw;
    left: -4vw;
  }

  .con05_light3 {
    width: calc(var(--px) * 996);
    top: 99.9vw;
    left: 27vw;
  }

  .con05_light4 {
    width: calc(var(--px) * 1422);
    top: 28.4vw;
    left: -17.7%;
  }

  /* 중앙 스택 : 회장상수상 라벨 / 타이틀 / 메달 / 흐린텍스트 */
  .con05_hint {
    width: 48vw;
  }

  .con05_tit {
    margin-top: 4vw;
    font-size: 4.5vw;
    letter-spacing: -0.02em;
  }

  .con05_tit_st {
    font-size: 6.9vw;
    display: block;
    margin-top: 2vw;
  }

  .con05_medal {
    width: 53vw;
    margin-top: 5vw;
  }

  .con05_leader {
    width: 94vw;
    margin-top: -2vw;
  }

  /* 월계수 (배경 프레임) */
  .con05_leaf {
    top: 31vw;
    width: 104vw;
  }

  /* AWARDS 로고 (좌상단) */
  .con05_awards {
    top: 5vw;
    left: 4%;
    width: 26vw;
  }

  /* 트로피 (우측 히어로, 하단 앵커) */
  .con05_trophy {
    top: auto;
    bottom: -31vw;
    left: 10vw;
    right: auto;
    width: 69vw;
    rotate: -15deg;
  }

  /* 강아지 (좌 하단 앵커) */
  .con05_dog {
    top: auto;
    bottom: -1vw;
    left: -3%;
    width: 30vw;
  }

  /* 고양이 (우 하단 앵커) */
  .con05_cat {
    top: auto;
    bottom: -1vw;
    left: auto;
    right: -3%;
    width: 30vw;
  }

  .con05>.bg_img {
    height: 120%;
  }

  /* ==================== con08 : 선진펫 소개 (The Global Engine) — 모바일 ====================
     폰트·슬라이더 치수가 --px(1905 캔버스 비례)라 모바일서 microscopic → vw 재정의(min 3.3vw).
     슬라이더는 JS slidesPerView:'auto' 라 카드 width 만 CSS override 가능(JS 무수정). PC 알약비율 유지. */
  .con08_tit {
    font-size: 6vw;
    line-height: 1.4;
  }

  .con08_stt {
    width: 90vw;
    margin-top: 7vw;
    font-size: 4vw;
    text-align: center;
    text-wrap: balance;
  }

  .con08_desc {
    width: 90vw;
    margin-top: 2.4vw;
    font-size: 3.4vw;
    line-height: 1.65;
    text-align: center;
    text-wrap: balance;
  }

  .con08_desc2 {
    margin-top: 2vw;
  }

  .con08_swiper {
    height: 32vw;
    margin-top: 7vw;
  }

  /* = 센터(활성) 알약 높이 */
  .con08_swiper .swiper-slide {
    width: 66.5vw;
  }

  /* 슬롯폭 (555/517) */
  .con08_sitem {
    width: 62vw;
    height: 22.5vw;
  }

  /* 비활성 알약 (188/517) */
  .swiper-slide-active .con08_sitem {
    height: 32vw;
  }

  /* 활성 알약 (268/517) */
  .swiper-slide-prev .con08_sitem,
  .swiper-slide-next .con08_sitem {
    transform: translateY(-7vw);
  }

  /* 양옆 살짝 위로 (58/517) */

  .con08_btn {
    margin-top: 7vw;
  }

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

  /* 공통 .pet_btn(70vw) 상속 · 위 여백만 */

  /* ==================== btab_hero : 3탭 공통 인트로 히어로 (bcon2 ABOUT / bcon7 선진펫 / bcon10 CSR) ====================
     PC 고정높이(41.995vw)·거대 top-padding(15.748vw)·microscopic 폰트(--px×N) 해제.
     높이는 콘텐츠가 결정(height:auto) + 상하 대칭 여백. .bg_img(height:100%)는 그대로 풀커버. */
  .btab_hero {
    height: 79vw;
    padding-top: 28vw;
  }

  .btab_iner {
    margin-bottom: 0;
  }

  .btab_tit {
    font-size: 5.8vw;
    line-height: 1.35;
  }

  .btab_eng {
    margin-top: 5vw;
    font-size: 3.4vw;
  }

  .btab_eng_top {
    margin-top: 0;
    margin-bottom: 4vw;
  }

  .btab_desc {
    width: 90vw;
    margin-top: 4vw;
    font-size: 3.4vw;
    line-height: 1.6;
    text-wrap: balance;
  }




  /* ==================== con03 : 브랜드 3대 가치 — 가로 3열 → 세로 스택 + 원/텍스트 확대 ====================
     원/폰트가 --px(1905 캔버스 비례)라 모바일서 원 81px·설명 3.3px로 뭉갬 → 세로 스택 + vw 재정의(min 3.3vw).
     내부요소는 원 확대비율(≈3.73×)로 비례 스케일. mas_a/b/c 는 transform 만 덮어 aspect-ratio 유지. */
  .con03_row {
    flex-direction: column;
    align-items: center;
    gap: 4vw;
  }

  .con03_iner {
    padding-top: 10vw;
    padding-bottom: 4vw;
  }

  .con03_circle {
    width: 90vw;
    height: auto;
    border-radius: 3vw;
    padding-bottom: 8vw;
  }

  /* 원 20.9vw → 78vw */

  .con03_mas {
    width: 47vw;
    margin-top: 5.5vw;
  }

  /* 마스코트 래퍼 12.8vw → 47vw */
  .con03_mas_a {
    transform: translateX(9vw);
  }

  /* 초점 우측시프트 비례 확대 */
  .con03_mas_b {
    transform: translateX(11vw);
  }

  .con03_mas_c {
    transform: translateX(9.4vw);
  }

  .con03_en {
    margin-top: -8.8vw;
    font-size: 10.5vw;
  }

  /* 영문 라벨 2.83vw → 10.5vw */
  .con03_tt {
    margin-top: 4vw;
    font-size: 6vw;
  }

  /* 국문 타이틀 1.26vw → 4.7vw */
  .con03_desc {
    width: 84vw;
    margin-top: 3vw;
    font-size: 3.5vw;
    line-height: 1.6;
    text-wrap: balance;
  }



  /* 설명 0.84vw → 3.3vw (최소) */

  /* ==================== con10 : 사회나눔(CSR) 게시판 탭 섹션 — 모바일 ====================
     탭 알약(.pet_tabs/.pet_tab)은 공통(custom.css)에서 처리. 여기선 con10 스코프로
     헤더(.pet_tabhead*)·카드그리드(.pet_card*)를 vw 재정의(공통 무손상). 카드 3열 → 2열. */
  .con10_iner {
    padding-top: 6vw;
    padding-bottom: 15vw;
  }

  .con10 .pet_tabhead_heart {
    width: 9vw;
    /* PC 46·--px → vw (aspect 46/42 는 desktop 규칙 유지) */
  }

  .con10 .pet_tabhead_tit {
    margin-top: 3vw;
    font-size: 7.5vw;
  }

  .con10 .pet_tabhead_desc {
    max-width: 86vw;
    margin-top: 4vw;
    font-size: 3.4vw;
    text-wrap: balance;
  }

  .con10 .pet_cardgrid {
    width: 92vw;
    margin-top: 6vw;
    column-gap: 4vw;
    row-gap: 5vw;
  }

  .con10 .pet_cardcell {
    width: calc((100% - 4vw) / 2);
    /* 3열 → 2열 */
  }

  .con10 .pet_card {
    width: 100%;
    /* 셀 채움 (PC 410·--px 고정 해제) */
  }

  .con10 .pet_card_img {
    height: 26vw;
    /* 카드폭 44vw 기준 PC 비율(410:240) 유지 */
    border-radius: 3vw;
  }

  .con10 .pet_tab_panel[data-panel="shelter"] .pet_card_img {
    padding: 4vw;
  }

  /* 후원활동 PC 축소값(--px 1080/330)이 선택자 4단계라 모바일까지 이겨버림 → 공통 모바일값(2열 92vw)으로 되돌림 */
  .con10 .pet_tab_panel[data-panel="donation"] .pet_cardgrid {
    width: 92vw;
  }

  .con10 .pet_tab_panel[data-panel="donation"] .pet_card {
    width: 100%;
  }

  .con10 .pet_card_subj {
    margin-top: 2.4vw;
    font-size: 3.4vw;
  }

  .sup_more {
    margin-top: 8vw;
    /* 더보기 버튼 위 여백 (버튼 자체는 공통 .pet_btn 모바일) */
  }

  /* ==================== con06 : BRAND IDENTITY (모바일) ====================
     PC 축소·좌우플랭킹 → 세로 스택, 폰트 vw화(≥3.3vw), 블록 90vw.
     arch(돔)·mascot 은 하단 absol 유지(straddle) — iner padding-bottom 으로 자리 확보. */
  .con06_iner {
    padding-top: 15vw;
    padding-bottom: 15vw;
  }

  .con06_tit {
    font-size: 6vw;
    margin-bottom: 6vw;
    letter-spacing: -0.15vw;
  }

  /* 블록 공통 — 좁은 263px → 90vw, 블록 간 간격 */
  .con06_block {
    width: 90vw;
    margin-top: 0;
    padding: 7vw 2vw 7vw;
    border: 1px solid #eeeeee;
    border-radius: 5vw;
    background: #fafafa;
    box-sizing: border-box;
  }

  .con06_slabel {
    width: 100%;
    margin-left: 0;
    font-size: 3.5vw;
    text-align: center;
  }

  /* LOGO — 2박스 가로 유지, 이미지·캡션 확대 */
  .con06_lrow,
  .con06_crow {
    justify-content: center;
    gap: 2vw;
    margin-top: 6vw;
  }

  .con06_lbox,
  .con06_cbox {
    width: 40vw;
  }

  .con06_limg {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 3vw;
    overflow: hidden;
  }

  .con06_lcap {
    margin-top: 2.5vw;
    font-size: 3.4vw;
  }

  /* COLOR — 2박스 가로 유지, 높이·라벨 패딩 vw화 */


  .con06_cbox {
    height: auto;
    aspect-ratio: 626 / 226;
    padding-left: 5vw;
    padding-bottom: 4vw;
    border: 1px solid #ddd;
    border-radius: 3vw;
    overflow: hidden;
  }

  .con06_ccap {
    font-size: 3.4vw;
  }

  /* CHARACTER — 좌우 플랭킹 → 세로 스택 중앙정렬 */
  .con06_chrow {
    flex-direction: column;
    align-items: center;
    row-gap: 4vw;
    margin-top: 6vw;
    padding-left: 0;
    padding-right: 0;
  }

  .con06_chtxt,
  .con06_chtxt_r {
    position: relative;
    align-items: center;
    width: 86vw;
    min-height: 57vw;
    padding: 8vw 4vw 22vw;
    border: 1px solid #ddd;
    border-radius: 5vw;
    background: #fff;
    text-align: center;
    overflow: visible;
    box-sizing: border-box;
  }

  .con06_chtxt::after,
  .con06_chtxt_r::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2vw;
    transform: translateX(-50%);
    display: block;
    width: 27vw;
    aspect-ratio: 1 / 1;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    pointer-events: none;
  }

  .con06_chtxt::after {
    background-image: url('/images/econ6_08.png');
  }

  .con06_chtxt_r::after {
    background-image: url('/images/econ6_08a.png');
  }

  .con06_cname {
    font-size: 5.5vw;
    letter-spacing: -0.2vw;
  }

  .con06_csub {
    margin-top: 2.5vw;
    font-size: 4vw;
  }

  .con06_cdesc {
    width: 78vw;
    margin-top: 2.2vw;
    font-size: 3.1vw;
    line-height: 1.65;
    text-wrap: balance;
  }

  /* 모바일에서는 개별 캐릭터 카드 이미지를 사용하므로 하단 공통 장식은 숨김 */
  .con06_arc,
  .con06_mascot {
    display: none;
  }


  /* ==================== con09 : 선진펫 3대 활동 — 모바일 ====================
     PC 3행(텍스트+이미지 가로) → 세로 스택 · 폰트 vw 상향(≥3.3vw) · 중앙정렬.
     공통 .pet_btn / .swiper_navbtn / .swiper_chev 모바일은 custom.css 에 이미 있음(무손상).
     행1 버튼은 target=_blank 라 슬라이드 제외(script.js) → 원 손잡이는 정적(좌측 세로중앙). */

  /* 콘텐츠 레이어 — 세로 gap 확보(마스코트 overhang 감안) */
  .con09_iner {
    row-gap: 11vw;
    padding-top: 10vw;
    padding-bottom: 10vw;
  }

  /* 행 = 세로 스택(텍스트 위 / 이미지 아래), 전 행 통일 */
  .con09_row {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 6vw;
  }

  .con09_row_rev .con09_img {
    order: 0;
    /* PC 좌측배치(order:-1) 해제 → 모바일은 텍스트 먼저 */
  }

  /* ─ 텍스트 (중앙정렬) ─ */
  .con09_txt {
    width: 100%;
    align-items: center;
    padding-left: 0;
    text-align: center;
  }

  .con09_badge {
    width: 9vw;
    margin-left: 0;
    margin-bottom: 1vw;
  }

  .con09_eyb {
    margin-top: 2vw;
    font-size: 3.5vw;
  }

  .con09_tt {
    margin-top: 6vw;
    font-size: 6.3vw;
  }

  .con09_sub {
    margin-top: 3vw;
    font-size: 4.2vw;
  }

  .con09_desc {
    width: 88vw;
    margin-top: 4vw;
    font-size: 3.4vw;
    line-height: 1.65;
    text-wrap: balance;
  }

  .con09_desc2 {
    margin-top: 2vw;
  }

  /* ─ 행1 버튼 : 세로 스택 + PC leak(height/padding/원위치) 리셋 ─ */
  .con09_btns {
    flex-direction: column;
    align-items: stretch;
    width: 69vw;
    gap: 3vw;
    margin-top: 5vw;
  }

  .con09_btn {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 11vw;
    padding: 2.8vw 11vw 2.8vw 5.8vw;
    justify-content: flex-start;
  }

  .con09_btn .pet_btn_hv {
    display: none;
  }

  .con09_btn .pet_btn_arw {
    top: 50%;
    left: auto;
    right: 4.2vw;
    width: 3vw;
    transform: translateY(-50%);
  }

  .con09_btn_txt {
    font-size: 3.3vw;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    flex-direction: row;
    gap: 1vw;
  }

  /* ─ 이미지 (풀폭 확대) ─ */
  .con09_img,
  .con09_img1 {
    width: 100%;
    isolation: isolate;
  }

  .con09_card,
  .con09_swiper {
    width: 88vw;
    border-radius: 4vw;
    background: #fff;
    box-shadow: 0 2.6vw 7vw rgba(11, 26, 47, 0.16);
  }

  .con09_card img,
  .con09_swiper .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .con09_mascot {
    z-index: 4;
    pointer-events: none;
    filter: drop-shadow(0 1.4vw 2.4vw rgba(0, 0, 0, 0.14));
  }

  /* 마스코트는 카드 우하단에 살짝만 걸치게 정리 */
  .con09_mascot_cat {
    right: -1.5vw;
    bottom: -3.2vw;
    width: 54vw;
  }

  .con09_mascot_dog {
    right: -12vw;
    bottom: -11.5vw;
    width: 40vw;
  }

  /* ─ 행2 슬라이더 prog/nav — 위치만 vw화 (prog 높이·nav 원크기는 공통 custom.css: 0.9vw / 9vw) ─ */
  .con09_prog {
    left: 8vw;
    bottom: 4vw;
    width: 40vw;
  }

  .con09_nav {
    right: 7vw;
    bottom: 3.5vw;
    gap: 4vw;
  }

  .con08_circ {
    display: none;
  }

  .con09_box {
    width: 95vw;
  }


  .con06_pb_img {
    width: 100vw;
    margin-top: 3vw;
    margin-bottom: 10vw;
    border-radius: 4vw;
    aspect-ratio: 1000 / 1600;
  }

  .con06_slabel1 {
    margin-top: 0;
  }

  .con06_tit1 {
    margin-bottom: 3vw;
  }
}