@charset "UTF-8";

section {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-direction: column;
}

section {
  font-family: "Pretendard Variable";
  font-weight: 300;
  font-size: calc(var(--px) * 18);
  letter-spacing: -0.04vw;
}

section img {
  width: 100%;
}

/* 퍼블시작 */

/* ===== main ===== */
.main {
  /* 헤더(fixed 87px) 아래 시안 y96 — 5vw(95.25)가 아니라 정확히: 패딩 95 + 헤더 밑 선(.main_hdline 1px, 시안 y95) = 프레임 시작 y96
     (모바일은 mobile_style.css 가 vw 로 재정의) */
  padding-top: calc(var(--px) * 95);
  justify-content: flex-start;
  background-image: url('/images/main_bg.jpg');
}

/* 헤더 밑 빨간 1px 선 #2 — 시안 y95 (헤더 밖이라 헤더가 아닌 main 상단 흐름에 둔다. 첫 선 y85 는 헤더 안 .header_line) */
.main_hdline {
  flex-shrink: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-point);
}

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

.main_line {
  width: 1px;
  height: 7.6vw;
  background-color: var(--color-point);
}

.main_badge {
  box-sizing: border-box;
  width: 17.6903%;
  padding: calc(var(--px) * 24) 0;
  border: 1px solid var(--color-point);
  border-radius: 50%;
  box-shadow: inset 0 0 calc(var(--px) * 20) calc(var(--px) * 6) rgba(255, 39, 36, 0.85);
}

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

.main_subtitle {
  margin-top: 3.3vw;
  font-size: calc(var(--px) * 45);
}

.main_title {
  margin-top: 1.7vw;
  font-size: calc(var(--px) * 70);
  text-shadow:
    calc(var(--px) * 1.8) 0 0 #000000,
    calc(var(--px) * 1.27) calc(var(--px) * 1.27) 0 #000000,
    0 calc(var(--px) * 1.8) 0 #000000,
    calc(var(--px) * -1.27) calc(var(--px) * 1.27) 0 #000000,
    calc(var(--px) * -1.8) 0 0 #000000,
    calc(var(--px) * -1.27) calc(var(--px) * -1.27) 0 #000000,
    0 calc(var(--px) * -1.8) 0 #000000,
    calc(var(--px) * 1.27) calc(var(--px) * -1.27) 0 #000000,
    calc(var(--px) * 5) 0 0 var(--color-point),
    calc(var(--px) * 4.33) calc(var(--px) * 2.5) 0 var(--color-point),
    calc(var(--px) * 2.5) calc(var(--px) * 4.33) 0 var(--color-point),
    0 calc(var(--px) * 5) 0 var(--color-point),
    calc(var(--px) * -2.5) calc(var(--px) * 4.33) 0 var(--color-point),
    calc(var(--px) * -4.33) calc(var(--px) * 2.5) 0 var(--color-point),
    calc(var(--px) * -5) 0 0 var(--color-point),
    calc(var(--px) * -4.33) calc(var(--px) * -2.5) 0 var(--color-point),
    calc(var(--px) * -2.5) calc(var(--px) * -4.33) 0 var(--color-point),
    0 calc(var(--px) * -5) 0 var(--color-point),
    calc(var(--px) * 2.5) calc(var(--px) * -4.33) 0 var(--color-point),
    calc(var(--px) * 4.33) calc(var(--px) * -2.5) 0 var(--color-point),
    0 0 calc(var(--px) * 16) #c91d22,
    0 0 calc(var(--px) * 16) #c91d22,
    0 0 calc(var(--px) * 16) #c91d22;
}

.main_desc_1 {
  margin-top: 2.8vw;
}

.main_desc_2 {
  margin-top: 1.6vw;
}

.main_band {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  margin-top: 9.5vw;
  padding: calc(var(--px) * 26) 0 calc(var(--px) * 27);
  background-color: var(--color-point);
  overflow: hidden;
}

.main_band_sd {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  flex-shrink: 0;
  width: calc(var(--px) * 3114);
  aspect-ratio: 3114 / 27;
}

/* ===== con01 ===== */
.con01 {
  padding-top: 4.2vw;
  padding-bottom: 6.6vw;
  background-color: #000000;
  background-image: url('/images/con01_bg.jpg');
}

.con01_rail {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  gap: calc(var(--px) * 9);
  top: 0;
  bottom: 0;
}

.con01_rail_l {
  left: 1.7%;
}

.con01_rail_r {
  right: 1.7%;
}

.con01_line {
  width: 1px;
  background-color: var(--color-point);
}

/* 세로 문구 2개 — 시안은 흰 글자 + 빨간 외곽 글로우(PSD outerGlow #ff2724 30% 13px)라 텍스트로 재현 불가 → PSD 레이어에 글로우를 구운 PNG.
   글리프 36×150 / 37×268 + 글로우 여백(L 사방 15 = 66×180 · R 좌14·상27·우15·하15 = 66×310) — 1자리 % / vw 좌표가 글리프를 정수 px 에 앉히도록 R 의 상·좌 여백을 키웠다.
   회전(THIS IS 아래→위 · REAL JEYUK 위→아래)도 이미지에 포함 */
.con01_side_l {
  left: 4.1%;
  top: 37.0vw;
  width: calc(var(--px) * 66);
  aspect-ratio: 66 / 180;
}

.con01_side_r {
  left: 92.7%;
  top: 5.3vw;
  width: calc(var(--px) * 66);
  aspect-ratio: 66 / 310;
}

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

/* con01-m02 은은하게 빛나는 모션 — 링 바깥 타원(PNG x40.5~965.5 · y50.5~522 실측)에 글로우만 얹고 opacity 맥동.
   box-shadow 는 타원 안쪽에 그려지지 않아 글자·링 내부는 불변. 링 박스 자체 opacity 는 글자까지 흐려져 쓰지 않는다 */
.con01_ring::after {
  content: "";
  position: absolute;
  top: 9%;
  bottom: 7.1%;
  width: 92%;
  border-radius: 50%;
  box-shadow: 0 0 calc(var(--px) * 30) calc(var(--px) * 4) rgba(255, 39, 36, 0.6);
  animation: mo_halo 3.2s ease-in-out infinite;
}

.con01_icon {
  width: calc(var(--px) * 49);
  aspect-ratio: 49 / 46;
  margin-top: 5.8vw;
}

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

.con01_pill {
  margin-top: 1.3vw;
  padding: 0 calc(var(--px) * 32);
  border-radius: 50vw;
  background-color: var(--color-point);
  font-family: "esamanru";
  font-size: calc(var(--px) * 28);
  font-weight: 500;
  line-height: 2.7vw;
  letter-spacing: -0.07vw;
  color: #ffffff;
}

.con01_sub {
  margin-top: 1.6vw;
  font-size: calc(var(--px) * 45);
}

.con01_title {
  margin-top: 1.4vw;
  font-size: calc(var(--px) * 75);
}

.con01_curve {
  width: calc(var(--px) * 246);
  aspect-ratio: 246 / 24;
  margin-top: 2.9vw;
}

.con01_stats {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 4.8vw;
  margin-top: 1.8vw;
  margin-right: 0.3vw;
}

.con01_stat {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 0.5vw 0;
}

.con01_stat_r {
  padding-left: 4.5vw;
  border-left: 1px solid var(--color-point);
}

.con01_stat_label {
  font-family: "esamanru";
  font-size: calc(var(--px) * 26);
  font-weight: 300;
  line-height: 1.5vw;
  letter-spacing: -0.07vw;
  color: #ffffff;
}

.con01_stat_num {
  margin-top: 0.9vw;
  font-family: "esamanru";
  font-size: calc(var(--px) * 90);
  font-weight: 700;
  line-height: 4.7vw;
  letter-spacing: -0.24vw;
  color: var(--color-point);
}

.con01_plus {
  left: calc(100% + 0.5vw);
  top: -1vw;
  font-family: "esamanru";
  font-size: calc(var(--px) * 60);
  font-weight: 700;
  line-height: 3.2vw;
  letter-spacing: -0.16vw;
  color: var(--color-point);
}

/* ===== con02 ===== */
.con02 {
  padding-top: 7vw;
  background-image: url('/images/con02_bg.jpg');
}

.con02_title {
  margin-top: 0.7vw;
}

.con02_subtt {
  margin-top: 0.9vw;
}

.con02_row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 3.3vw;
}

.con02_card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 392);
  height: calc(var(--px) * 269);
  border: 1px solid var(--color-point);
  border-radius: calc(var(--px) * 30);
  background: rgba(0, 0, 0, 0.7);
}

.con02_card_menu {
  margin-right: 2.0%;
}

.con02_card_meat {
  margin-left: 2.1%;
}

.con02_plus {
  flex-shrink: 0;
  width: calc(var(--px) * 58);
  height: calc(var(--px) * 58);
  border-radius: 50%;
  background: var(--color-point);
  font-family: "esamanru";
  font-size: calc(var(--px) * 30);
  font-weight: 500;
  line-height: 1.6vw;
  color: #ffffff;
}

.con02_circle {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 346);
  height: calc(var(--px) * 346);
  margin-left: 2.5%;
  margin-right: 2.5%;
  border-radius: 50%;
  background: var(--color-point);
  box-shadow: 0 0 calc(var(--px) * 30) 0 rgba(255, 39, 36, 0.79);
  /* con02-m01 빛나는 모션 — common.css mo_glow_pulse (정지값 = 위 box-shadow) */
  animation: mo_glow_pulse 3.2s ease-in-out infinite;
}

.con02_pill {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 156);
  height: calc(var(--px) * 43);
  border-radius: 50vw;
  font-family: "esamanru";
  font-size: calc(var(--px) * 22);
  font-weight: 500;
  line-height: 1.6vw;
  color: #ffffff;
}

.con02_pill_red {
  margin-top: -1.0vw;
  background: var(--color-point);
}

.con02_pill_black {
  margin-top: 3.6vw;
  background: #000000;
}

.con02_menu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  width: calc(var(--px) * 317);
  margin-top: 0.9vw;
  /* 시안 사진 그룹이 카드 중심보다 +2px 우측(실측: 사진 mean abs diff 26.0 → 7.1) — margin-left 4px 로 중심 이동 */
  margin-left: calc(var(--px) * 4);
  row-gap: 0.7vw;
}

.con02_menu_item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 33.3333%;
}

.con02_menu_img {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 93);
  aspect-ratio: 93 / 93;
}

.con02_meat {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  margin-top: 2.6vw;
  column-gap: 0.8vw;
}

.con02_meat_item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.con02_meat_img {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 120);
  aspect-ratio: 120 / 120;
}

.con02_logo {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 215);
  aspect-ratio: 215 / 125;
  margin-top: 1.4vw;
}

.con02_label {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 231);
  height: calc(var(--px) * 51);
  /* con02-r01: 등장 중 transform 이 걸린 숫자(.con02_num)가 알약 위로 튀어나오지 않게 순서 고정(skill §10) */
  z-index: 1;
  margin-top: 2.5vw;
  border-radius: 50vw;
  background: #ffffff;
  box-shadow: 0 calc(var(--px) * 12) calc(var(--px) * 13) 0 rgba(0, 0, 0, 0.47);
  font-family: "esamanru";
  font-size: calc(var(--px) * 22);
  font-weight: 500;
  line-height: 1.6vw;
  color: var(--color-point);
}

.con02_num {
  margin-top: -1.3vw;
  margin-right: 0.6%;
  margin-bottom: -2.1vw;
  font-family: "esamanru";
  font-size: calc(var(--px) * 180);
  font-weight: 700;
  line-height: 10vw;
  letter-spacing: -0.5vw;
  color: var(--color-point);
}

.con02_num_won {
  margin-left: 0.8vw;
  font-size: calc(var(--px) * 100);
  line-height: 0;
}

/* ===== con03 ===== */
.con03 {
  padding-top: 3.4vw;
  padding-bottom: 3.3vw;
  background-color: var(--color-point);
}

.con03_panel {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 1780);
  height: calc(var(--px) * 845);
  padding: calc(var(--px) * 10);
  background-color: #000;
}

.con03_frame {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 1774);
  height: calc(var(--px) * 770);
  padding-top: 3.6vw;
  border: 3px solid var(--color-point);
  background-image: linear-gradient(rgba(255, 20, 20, 0.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 20, 20, 0.18) 1px, transparent 1px);
  background-size: calc(var(--px) * 18) calc(var(--px) * 18);
  background-position: calc(var(--px) * 6) calc(var(--px) * 3);
}

.con03_top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-shrink: 0;
  width: 100%;
}

.con03_mark {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 292);
  height: calc(var(--px) * 292);
  border: 1px solid transparent;
  border-radius: 50%;
  /* 링 = 위(밝은 빨강) → 아래(진한 빨강) 그라데이션 테두리, 원판은 검정. 안팎 글로우는 box-shadow 로 번지게 (댓글 con03-r02) */
  background:
    linear-gradient(#000, #000) padding-box,
    linear-gradient(180deg, #ff5a52 0%, var(--color-point) 45%, #8c0f0d 100%) border-box;
  box-shadow:
    0 0 calc(var(--px) * 12) 0 rgba(255, 39, 36, 0.7),
    0 0 calc(var(--px) * 38) 0 rgba(255, 39, 36, 0.3),
    inset 0 0 calc(var(--px) * 34) 0 rgba(255, 39, 36, 0.4);
}

.con03_mark_l {
  margin-left: calc(var(--px) * 70);
}

.con03_mark_r {
  margin-right: calc(var(--px) * 69);
}

.con03_glyph {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.con03_glyph_l {
  width: calc(var(--px) * 203);
  aspect-ratio: 203 / 204;
}

.con03_glyph_r {
  width: calc(var(--px) * 193);
  aspect-ratio: 193 / 204;
}

.con03_head {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: 3.2vw;
}

.con03_subtt {
  margin-top: 0.8vw;
}

.con03_band {
  width: calc(var(--px) * 2077);
  margin-top: 8.2vw;
  margin-right: 0;
  margin-left: 0;
  flex-shrink: 0;
}

.con03_slide {
  width: auto !important;
  margin-right: calc(var(--px) * 20);
}

.con03_card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  flex-shrink: 0;
  width: calc(var(--px) * 397);
  height: calc(var(--px) * 229);
  border: 1px solid #000;
  background-color: #fff;
}

.con03_card_hd {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: calc(var(--px) * 71);
  border-bottom: 1px solid #000;
  background-color: var(--color-point);
  font-family: "esamanru";
  font-size: calc(var(--px) * 22);
  font-weight: 500;
  line-height: 1.6vw;
  letter-spacing: -0.06vw;
  color: #ffffff;
}

.con03_card_bd {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  padding-top: 1.8vw;
}

.con03_card_mo {
  font-size: calc(var(--px) * 18);
  font-weight: 400;
  line-height: 1.3vw;
  letter-spacing: 0.04vw;
  color: #000;
}

.con03_card_amt {
  margin-top: 0.7vw;
  font-family: "esamanru";
  font-size: calc(var(--px) * 40);
  font-weight: 700;
  line-height: 2.3vw;
  letter-spacing: -0.2vw;
  color: #000;
}

.con03_plate {
  width: calc(var(--px) * 740);
  margin-top: -19.2vw;
  /* 시안 접시 left 582 (정수) vs 패널이 62.5px 에 걸려 582.5 → 583 으로 스냅 — margin-right 2px 로 중심을 0.5px 이동해
     582 에 맞춘다(실측: 사진 mean abs diff 19.45 → 5.94). swiper 의 좌우 auto 마진은 해제해야 margin-right 가 먹는다. */
  margin-left: 0;
  margin-right: calc(var(--px) * 2);
  flex-shrink: 0;
}

.con03_plate_img {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 740);
  aspect-ratio: 740 / 513;
}

/* ===== con04 ===== */
.con04 {
  padding-top: 6.9vw;
  padding-bottom: 4.1vw;
  background-image: url('/images/con04_bg.jpg');
}

.con04_title {
  margin-top: 0.5vw;
}

.con04_subtt {
  margin-top: 0.7vw;
}

.con04_panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 75.5381%;
  height: calc(var(--px) * 567);
  margin-top: 3.0vw;
  border: 1px solid var(--color-point);
  background: rgba(0, 0, 0, 0.8);
}

.con04_edge {
  height: calc(var(--px) * 13);
  background: rgba(0, 0, 0, 0.8);
}

.con04_edge_t {
  border-bottom: 1px solid var(--color-point);
}

.con04_edge_b {
  border-top: 1px solid var(--color-point);
}

.con04_body {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  padding-left: calc(var(--px) * 4);
}

.con04_circle_l {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 419);
  height: calc(var(--px) * 419);
  border: 1px solid var(--color-point);
  border-radius: 50%;
  background: url('/images/con04_01.jpg') center / 100% 100% no-repeat;
  background-origin: border-box;
}

.con04_l_label {
  font-family: "esamanru";
  font-size: calc(var(--px) * 23);
  font-weight: 300;
  line-height: 1.4vw;
  letter-spacing: -0.1vw;
  color: #ffffff;
}

.con04_l_label_1 {
  margin-top: 4.5vw;
}

.con04_l_label_2 {
  margin-top: 1.7vw;
}

.con04_l_num {
  margin-top: 0.9vw;
  font-family: "esamanru";
  font-size: calc(var(--px) * 45);
  font-weight: 700;
  line-height: 2.7vw;
  letter-spacing: -0.2vw;
  color: #ffffff;
}

.con04_l_line {
  flex-shrink: 0;
  width: calc(var(--px) * 254);
  height: 1px;
  margin-top: 1.3vw;
  background: #ffffff;
}

.con04_circle_r {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
  overflow: hidden;
  width: calc(var(--px) * 420);
  height: calc(var(--px) * 420);
  margin-left: calc(var(--px) * -74);
  border-radius: 50%;
  background: var(--color-point);
}

.con04_r_label {
  margin-top: 3.0vw;
  font-family: "esamanru";
  font-size: calc(var(--px) * 28);
  font-weight: 300;
  line-height: 1.6vw;
  letter-spacing: -0.1vw;
  color: #ffffff;
}

.con04_r_num {
  margin-top: 1.1vw;
  font-family: "esamanru";
  font-size: calc(var(--px) * 75);
  font-weight: 700;
  line-height: 4.2vw;
  letter-spacing: -0.3vw;
  color: #ffffff;
}

.con04_r_dish {
  flex-shrink: 0;
  width: calc(var(--px) * 383);
  aspect-ratio: 383 / 275;
  margin-top: 0.5vw;
}

.con04_table {
  flex-shrink: 0;
  width: calc(var(--px) * 438);
  margin-left: calc(var(--px) * 32);
  margin-bottom: calc(var(--px) * 4);
  border-top: 2px solid #ffffff;
  border-collapse: separate;
  table-layout: fixed;
}

.con04_col_1 {
  width: 30.137%;
}

.con04_col_2 {
  width: 36.9863%;
}

.con04_col_3 {
  width: 32.8767%;
}

.con04_th {
  height: calc(var(--px) * 60);
  padding-top: calc(var(--px) * 4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  font-size: calc(var(--px) * 19);
  font-weight: 700;
  line-height: 1.5vw;
  letter-spacing: -0.1vw;
  color: #ffffff;
  text-align: center;
  vertical-align: middle;
}

.con04_th_amt {
  padding-left: calc(var(--px) * 31);
}

.con04_td {
  height: calc(var(--px) * 49);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  font-size: calc(var(--px) * 19);
  line-height: 1.5vw;
  color: #ffffff;
  text-align: center;
  vertical-align: middle;
}

.con04_td_amt {
  padding-right: calc(var(--px) * 14);
  text-align: right;
}

.con04_td_end {
  height: calc(var(--px) * 50);
  border-bottom: 0;
}

.con04_tf {
  height: calc(var(--px) * 62);
  background: var(--color-point);
  color: #ffffff;
  text-align: center;
  vertical-align: middle;
}

.con04_tf_name {
  font-family: "esamanru";
  font-size: calc(var(--px) * 19);
  font-weight: 500;
  line-height: 1.5vw;
  letter-spacing: -0.1vw;
}

.con04_tf_amt,
.con04_tf_rate {
  font-family: "esamanru";
  font-size: calc(var(--px) * 23);
  font-weight: 700;
  line-height: 1.5vw;
  letter-spacing: -0.1vw;
}

.con04_tf_amt {
  padding-right: calc(var(--px) * 7);
  white-space: nowrap;
}

/* ===== con05 ===== */
/* sticky 조상 해제 — basic_css.php 인라인 body/#content_wrap 의 overflow:hidden 이 스크롤 컨테이너가 되어 position:sticky 를 죽인다 (style.css 는 메인 전용·인라인 뒤 로드라 !important 불필요)
   ★ visible 로 둔다 — 예전 overflow-x: clip 은 iOS/WebKit 에서 body 높이가 0 인 이 구조와 만나 섹션이 통째로 안 그려지고(흰 화면·히트테스트 실패) 하얗게 보였다. 가로 넘침은 각 section{overflow:hidden} 이 이미 막는다 */
body {
  overflow-x: visible;
  overflow-y: visible;
}

#content_wrap {
  overflow: visible;
}

.con05 {
  /* 고정 프레임 높이 = 뷰포트 높이(최소 939, 최대 섹션 높이) — 뷰포트가 939 보다 크면 프레임 아래로 흰 바닥이 노출되던 것 제거. .con05_list 음수 margin 과 같은 값을 쓴다 */
  --con05-frame: clamp(calc(var(--px) * 939), 100vh, calc(var(--px) * 1821));
  overflow: visible;
  justify-content: flex-start;
  align-items: flex-start;
}

.con05_frame {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  width: 100%;
  height: var(--con05-frame);
  padding-top: 10vw;
  background-image: url('/images/con05_bg.jpg');
}

/* 불 영상 — 검정 바탕 불꽃이라 screen 합성(검정 = 투명, 불꽃만 얹힘). 영상이 안 그려지는 환경은 위 con05_bg.jpg 가 폴백. 하단 불꽃이 잘리지 않게 하단 기준 */
.con05_fire {
  object-position: center bottom;
  mix-blend-mode: screen;
  opacity: 0.6;
}

.con05_left {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: flex-start;
  align-items: center;
  width: 58.2152%;
}

.con05_title {
  margin-top: 0.6vw;
}

.con05_subtt {
  margin-top: 1vw;
}

.con05_dish {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 759);
  aspect-ratio: 759 / 436;
  /* auto = 프레임이 939 일 땐 3.6vw 와 같고, 더 커지면 접시를 프레임 하단에 맞닿게 유지 */
  margin-top: auto;
  /* 시안 접시 left 172 (실측: 사진 mean abs diff 47.0 → 6.7 @ −3px) — 헤드 가운데정렬 기준(554.5)보다 3px 좌측 → margin-right 6px 로 중심 이동 */
  margin-right: calc(var(--px) * 6);
}

.con05_list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 34.6982%;
  margin-top: calc(var(--px) * 103 - var(--con05-frame));
  margin-left: 56.2%;
  row-gap: 0.9vw;
}

.con05_item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  width: 100%;
  height: calc(var(--px) * 401);
  padding-left: calc(var(--px) * 64);
  border: 1px solid #000;
  background-color: #fff;
}

.con05_item_04 {
  margin-top: 0.2vw;
}

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

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

.con05_tag {
  width: calc(var(--px) * 98);
  height: calc(var(--px) * 40);
  margin-top: 2.6vw;
  margin-left: calc(var(--px) * -83);
  font-family: "esamanru";
  font-size: calc(var(--px) * 24);
  font-weight: 500;
  line-height: 1.4vw;
  color: #ffffff;
  background: var(--color-point);
}

.con05_name {
  margin-top: 3vw;
  font-family: "esamanru";
  font-size: calc(var(--px) * 28);
  font-weight: 500;
  line-height: 1.8vw;
  color: #000000;
}

.con05_sub {
  margin-top: 1.4vw;
  font-weight: 700;
  line-height: 1.5vw;
  color: #000000;
}

.con05_img {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 241);
  aspect-ratio: 241 / 159;
  margin-top: 2.5vw;
  margin-right: calc(var(--px) * 51);
}

.con05_desc {
  margin-top: 1.5vw;
  line-height: 1.5vw;
  color: #000000;
}

/* ===== con06 ===== */
.con06 {
  background-color: #000000;
}

.con06_band {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  padding: calc(var(--px) * 25) 0 calc(var(--px) * 26);
  background-color: var(--color-point);
  overflow: hidden;
}

.con06_band_sd {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  flex-shrink: 0;
  width: calc(var(--px) * 3114);
  height: calc(var(--px) * 27);
}

.con06_body {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
  padding: 0 calc(var(--px) * 52);
}

.con06_rail {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  width: calc(var(--px) * 11);
  margin-top: 0.1vw;
}

.con06_line {
  width: 1px;
  background-color: var(--color-point);
}

.con06_main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 7.1vw;
  padding-bottom: 5.6vw;
}

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

.con06_title {
  margin-top: 0.7vw;
}

.con06_desc {
  margin-top: 0.7vw;
}

.con06_panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 1442);
  margin-top: 3.7vw;
  padding-bottom: 2.4vw;
  border-radius: calc(var(--px) * 31);
  background-color: #000000;
  background-image:
    linear-gradient(to right, rgba(255, 39, 36, 0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 39, 36, 0.12) 1px, transparent 1px);
  background-size: calc(var(--px) * 18) calc(var(--px) * 18);
  background-position: calc(var(--px) * 2) calc(var(--px) * 8);
  box-shadow: 0 0 calc(var(--px) * 29) calc(var(--px) * 15) rgba(255, 39, 36, 0.38);
}

.con06_brand {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  column-gap: calc(var(--px) * 19.3);
  margin-top: -1.2vw;
}

.con06_brand_box {
  width: calc(var(--px) * 290);
  padding: calc(var(--px) * 22.5) 0;
  border-radius: calc(var(--px) * 20);
  background-color: var(--color-point);
}

.con06_logo_01 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 232);
  aspect-ratio: 232 / 50;
}

.con06_logo_02 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 172);
  aspect-ratio: 172 / 63;
}

.con06_plus {
  padding-top: calc(var(--px) * 5);
  font-family: "esamanru";
  font-size: calc(var(--px) * 34);
  font-weight: 300;
  line-height: 1.8vw;
  color: #ffffff;
}

.con06_menu {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  column-gap: 5.2vw;
  margin-top: 1.5vw;
}

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

.con06_dish {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 350);
}

/* 접시 3장 위치 보정 — 시안 사진과 ±4px 브루트포스 실측(사진 mean abs diff 30.6/35.4/32.3 → 5.9/6.7/5.4).
   이동량 s 는 좌우(상하) margin 을 +s/−s 쌍으로 줘서 박스 폭(높이)을 유지한다 — 한쪽만 주면 아이템 폭이 늘어 행 전체가 재가운데정렬되며 다른 접시가 밀린다 */
.con06_dish_01 {
  aspect-ratio: 350 / 252;
  margin-left: calc(var(--px) * 1);
  margin-right: calc(var(--px) * -1);
  margin-top: calc(var(--px) * 1);
  margin-bottom: calc(var(--px) * -1);
}

.con06_dish_02 {
  aspect-ratio: 350 / 251;
  margin-left: calc(var(--px) * -1);
  margin-right: calc(var(--px) * 1);
  margin-top: calc(var(--px) * 2);
  margin-bottom: calc(var(--px) * -2);
}

.con06_dish_03 {
  aspect-ratio: 350 / 253;
  margin-left: calc(var(--px) * 2);
  margin-right: calc(var(--px) * -2);
  margin-top: calc(var(--px) * 1);
  margin-bottom: calc(var(--px) * -1);
}

.con06_cap {
  margin-top: 1.5vw;
}

.con06_sticker {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 306);
  height: calc(var(--px) * 227);
  left: 86.6%;
  top: -3.4vw;
  border-radius: 50%;
  background-color: var(--color-point);
  box-shadow:
    inset 0 0 0 calc(var(--px) * 8) var(--color-point),
    inset 0 0 0 calc(var(--px) * 10) #ffffff;
  transform: rotate(8.6deg);
}

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

.con06_sticker_s {
  font-family: "esamanru";
  font-size: calc(var(--px) * 33.7);
  font-weight: 700;
  line-height: 2.3vw;
  letter-spacing: -0.09vw;
  color: #ffffff;
}

.con06_sticker_b {
  font-family: "esamanru";
  font-size: calc(var(--px) * 51.7);
  font-weight: 700;
  line-height: 3vw;
  letter-spacing: -0.14vw;
  color: #ffffff;
}

/* ===== main~con06 섹션 높이 정수화 (PC 전용) =====
   섹션 자연 높이가 vw/% 환산으로 소수(941.48 · 956.28 · 992.63 …)가 되면 뒤따르는 섹션의 시작 y 가 비정수로 밀려
   큰 사진이 서브픽셀 스냅으로 1px 어긋난다(실측: con06 추가 후 con07 3.5% → 7.2%). 시안 크롭 높이(정수)로 고정해 누적 오프셋을 0 으로 맞춘다.
   모바일은 height:auto 가 기본이라 이 블록은 600px 이상에서만 적용. 값 = crop_config 높이(main 은 헤더 아래 96 포함 1038).
   ★ reset.css 가 box-sizing:unset(content-box)이라 섹션 padding 이 height 에 더해진다 → border-box 필수. */
@media screen and (min-width: 600px) {
  .main {
    box-sizing: border-box;
    height: calc(var(--px) * 1038);
  }
  .con01 {
    box-sizing: border-box;
    height: calc(var(--px) * 957);
  }
  .con02 {
    box-sizing: border-box;
    height: calc(var(--px) * 938);
  }
  .con03 {
    box-sizing: border-box;
    height: calc(var(--px) * 992);
  }
  .con04 {
    box-sizing: border-box;
    height: calc(var(--px) * 1000);
  }
  .con05 {
    box-sizing: border-box;
    height: calc(var(--px) * 1821);
  }
  .con06 {
    box-sizing: border-box;
    height: calc(var(--px) * 1036);
  }
}

/* ===== con07~con12 섹션 높이 정수화 (PC 전용) — 이후 섹션은 구현 시 같은 방식으로 추가 =====
   위 main~con06 블록과 같은 이유 — 섹션 자연 높이가 소수(860.5 · 990.4 · 942.1 …)면 뒤따르는 섹션 시작 y 가 비정수로 밀려
   사진·텍스트가 서브픽셀 스냅으로 1px 어긋난다. 값 = crop_config 높이(정수). 모바일은 height:auto. border-box 필수(reset.css 가 content-box). */
@media screen and (min-width: 600px) {
  .con07 {
    box-sizing: border-box;
    height: calc(var(--px) * 898);
  }
  .con08 {
    box-sizing: border-box;
    height: calc(var(--px) * 861);
  }
  .con09 {
    box-sizing: border-box;
    height: calc(var(--px) * 990);
  }
  .con10 {
    box-sizing: border-box;
    height: calc(var(--px) * 943);
  }
  .con11 {
    box-sizing: border-box;
    height: calc(var(--px) * 790);
  }
  .con12 {
    box-sizing: border-box;
    height: calc(var(--px) * 2091);
  }
  .con13 {
    box-sizing: border-box;
    height: calc(var(--px) * 1077);
  }
  .con14 {
    box-sizing: border-box;
    height: calc(var(--px) * 916);
  }
}

/* ===== con07 ===== */
.con07 {
  flex-direction: row;
  justify-content: space-between;
  padding-top: 8.2vw;
  padding-bottom: 8vw;
  background-image: url('/images/con07_bg.jpg');
}

.con07_img01 {
  width: calc(var(--px) * 524);
  aspect-ratio: 524 / 413;
  left: calc(var(--px) * 618);
  top: 0;
}

.con07_img02 {
  width: calc(var(--px) * 303);
  aspect-ratio: 303 / 344;
  left: 0;
  top: 0;
}

.con07_img03 {
  width: calc(var(--px) * 439);
  aspect-ratio: 439 / 271;
  left: calc(var(--px) * 374);
  top: 32.9vw;
}

.con07_img04 {
  width: calc(var(--px) * 181);
  aspect-ratio: 181 / 234;
  left: 0;
  top: 26.5vw;
}

.con07_head {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: 12.2%;
  margin-bottom: 0.2vw;
}

.con07_subtitle {
  text-align: left;
}

.con07_title {
  margin-top: 0.8vw;
  text-align: left;
}

.con07_desc {
  margin-top: 1vw;
  text-align: left;
  letter-spacing: -0.06vw;
}

.con07_right {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-right: 4.1%;
}

.con07_card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 809);
  height: calc(var(--px) * 590);
  border-radius: calc(var(--px) * 50);
  background-color: #ffffff;
  box-shadow: 0 calc(var(--px) * 12) calc(var(--px) * 13) rgba(0, 0, 0, 0.22);
  color: #000000;
}

.con07_pill {
  width: calc(var(--px) * 229);
  height: calc(var(--px) * 46);
  margin-top: 2.3vw;
  padding-top: calc(var(--px) * 4);
  border-radius: 50vw;
  background-color: var(--color-point);
  font-family: "esamanru";
  font-size: calc(var(--px) * 25);
  font-weight: 500;
  line-height: 1.5vw;
  color: #ffffff;
}

.con07_chart {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  column-gap: calc(var(--px) * 60);
  margin-top: 1.3vw;
}

.con07_col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 80);
}

.con07_val {
  font-family: "esamanru";
  font-size: calc(var(--px) * 24);
  font-weight: 500;
  line-height: 1.4vw;
}

.con07_bar {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-top: 0.8vw;
  border-radius: 50vw;
  background-color: #000000;
}

.con07_bar_01 {
  height: calc(var(--px) * 187);
}

.con07_bar_02 {
  height: calc(var(--px) * 240);
}

.con07_bar_03 {
  height: calc(var(--px) * 272);
}

.con07_bar_04 {
  height: calc(var(--px) * 297);
}

.con07_bar_05 {
  height: calc(var(--px) * 320);
}

.con07_dot {
  width: calc(var(--px) * 15);
  height: calc(var(--px) * 15);
  margin-top: calc(var(--px) * -7.5);
  border-radius: 50%;
  background-color: var(--color-point);
}

.con07_ring {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: var(--color-point);
}

.con07_ring_a {
  width: calc(var(--px) * 42);
  height: calc(var(--px) * 42);
  opacity: 0.1;
}

.con07_ring_b {
  width: calc(var(--px) * 29);
  height: calc(var(--px) * 29);
  opacity: 0.3;
  animation-delay: -0.7s;
}

.con07_year {
  margin-top: 0.3vw;
  font-weight: 700;
  line-height: 1.5vw;
}

.con07_src {
  margin-top: 1vw;
  line-height: 1.5vw;
}

.con07_side {
  margin-left: calc(var(--px) * 73);
  font-family: "esamanru";
  font-size: calc(var(--px) * 20);
  font-weight: 500;
  line-height: 1.1vw;
  letter-spacing: 0.3vw;
  color: #ffffff;
  writing-mode: vertical-rl;
}

/* ===== con08 ===== */
.con08 {
  padding-top: 7.7vw;
  padding-bottom: 7.4vw;
  background-color: #000000;
  /* 1층 세로 줄무늬(주기 20px) → 2층 사진. 줄무늬는 사진 위, 카드 아래 */
  background-image:
    repeating-linear-gradient(90deg, transparent 0 calc(var(--px) * 1.5), rgba(138, 52, 49, 0.13) calc(var(--px) * 1.5) calc(var(--px) * 3.5), transparent calc(var(--px) * 3.5) calc(var(--px) * 20)),
    url('/images/con08_bg.jpg');
}

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

.con08_title {
  margin-top: 0.5vw;
}

.con08_subtt {
  margin-top: 1.2vw;
  letter-spacing: -0.06vw;
}

.con08_list {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 75.4856%;
  margin-top: 3vw;
}

/* height: 호버 시 질문면/답변면 내용 높이가 달라 콘텐츠로는 카드 크기가 안 잡힘. 두 면이 같은 박스를 공유 (470×310 = 32.6843% × 비율).
   plan 은 aspect-ratio 470/310 이었으나 css-check 훅이 이미지 직계 부모 외 aspect-ratio 를 차단 → 동일 결과의 height 로 대체 */
.con08_card {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  box-sizing: border-box;
  width: 32.6843%;
  height: calc(var(--px) * 310);
  padding: calc(var(--px) * 4);
  border-radius: calc(var(--px) * 30);
  background-color: var(--color-point);
  transition: background-color 0.4s;
}

.con08_ring {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  border: 2px solid #000000;
  border-radius: calc(var(--px) * 26);
  transition: border-color 0.4s;
}

.con08_face_q {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-top: calc(var(--px) * 67);
  transition: opacity 0.4s;
}

.con08_face_a {
  padding-top: calc(var(--px) * 52);
  opacity: 0;
  transition: opacity 0.4s;
}

.con08_pill {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 100);
  height: calc(var(--px) * 41);
  padding-top: calc(var(--px) * 4);
  border-radius: 50vw;
  background-color: #ffffff;
  font-family: "esamanru";
  font-size: calc(var(--px) * 20);
  font-weight: 500;
  line-height: 1.1vw;
  color: var(--color-point);
}

.con08_pill_a {
  background-color: var(--color-point);
  color: #ffffff;
}

.con08_q {
  margin-top: 1.3vw;
  font-family: "esamanru";
  font-size: calc(var(--px) * 33);
  font-weight: 500;
  line-height: 2.3vw;
  letter-spacing: -0.1vw;
}

.con08_a_tt {
  margin-top: 2vw;
  font-family: "esamanru";
  font-size: calc(var(--px) * 28);
  font-weight: 500;
  line-height: 1.6vw;
  letter-spacing: -0.1vw;
}

.con08_a_desc {
  margin-top: 0.8vw;
  line-height: 1.4vw;
}

/* con08-m01 호버 답변 노출 — PC 마우스(hover:hover)는 :hover, 터치는 .on(js/animation.js 탭 토글). 같은 선언 두 벌 */
@media (hover: hover) {
  .con08_card:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }

  .con08_card:hover .con08_ring {
    border-color: var(--color-point);
  }

  .con08_card:hover .con08_face_q {
    opacity: 0;
  }

  .con08_card:hover .con08_face_a {
    opacity: 1;
  }
}

.con08_card.on {
  background-color: rgba(0, 0, 0, 0.8);
}

.con08_card.on .con08_ring {
  border-color: var(--color-point);
}

.con08_card.on .con08_face_q {
  opacity: 0;
}

.con08_card.on .con08_face_a {
  opacity: 1;
}

/* ===== con09 ===== */
.con09 {
  padding-top: 4.7vw;
  padding-bottom: 5vw;
  background-color: #000000;
  background-image: url('/images/con09_bg.jpg');
}

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

.con09_icon {
  width: calc(var(--px) * 36);
  aspect-ratio: 36 / 34;
}

.con09_subtitle {
  margin-top: 1.2vw;
}

.con09_title {
  margin-top: 0.6vw;
}

.con09_tabs {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  margin-top: 3.5vw;
}

.con09_tab {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  width: calc(var(--px) * 257);
}

.con09_tab_btn {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  font-family: "esamanru";
  font-weight: 300;
  font-size: calc(var(--px) * 28);
  letter-spacing: -0.1vw;
  line-height: 1.7vw;
  color: #ffffff;
  transition: color 0.3s ease;
}

/* 밑줄 바 — 모든 탭에 투명으로 깔고 활성만 색을 입힌다 */
.con09_tab_btn::after {
  content: "";
  width: calc(var(--px) * 55);
  height: calc(var(--px) * 8);
  margin-top: 0.9vw;
  margin-right: calc(var(--px) * 3);
  background-color: transparent;
  transition: background-color 0.3s ease;
}

.con09_tab.on .con09_tab_btn {
  color: var(--color-point);
}

.con09_tab.on .con09_tab_btn::after {
  background-color: var(--color-point);
}

.con09_stage {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  margin-top: 2.6vw;
  background-image: url('/images/con09_line.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 9.9vw;
}

.con09_prev {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 61);
  aspect-ratio: 1 / 1;
  margin-top: 10.6vw;
  margin-right: calc(var(--px) * -2);
  border-radius: 50%;
  background-color: var(--color-point);
}

.con09_next {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 61);
  aspect-ratio: 1 / 1;
  margin-top: 10.6vw;
  margin-left: calc(var(--px) * -2);
  border-radius: 50%;
  background-color: var(--color-point);
}

.con09_arr_img {
  width: calc(var(--px) * 25);
}

/* 3카드 창 — 번들 .swiper 의 margin auto·z-index 1 을 덮는다. 화살표(.btn_arr z-index 2)가 그 위로 올라온다 */
.con09_swiper {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-shrink: 0;
  width: calc(var(--px) * 1407);
  margin-left: 0;
  margin-right: 0;
  /* 가로만 잘라 양옆 카드를 창 안에 가두고, 세로는 열어 둔다 — 높이를 JS(lockCon09Height)가 고정하는 동안 전환 중 카드가 잠깐 더 커져도 안 잘린다 */
  overflow-x: clip;
  overflow-y: visible;
}

/* 활성 상태 값은 li 변수로만 바꾼다 (카드·프레임·캡션 블록을 다시 쓰지 않는다) */
.con09_slide {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 469);
  --cw: 379;
  --ct: 3.6vw;
  --ar: 379 / 259;
  --ch: 76;
  --cpt: 8;
  --cbg: #000000;
  --cjc: center;
}

.con09_slide.swiper-slide-active {
  --cw: 479;
  --ct: 0vw;
  --ar: 479 / 299;
  --ch: 121;
  --cpt: 32;
  --cbg: var(--color-point);
  --cjc: flex-start;
}

.con09_card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: calc(var(--px) * var(--cw));
  margin-top: var(--ct);
  border: 1px solid var(--color-point);
  transition: width 0.5s ease, margin-top 0.5s ease;
}

.con09_frame {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: var(--ar);
  overflow: hidden;
  background-color: #111111;
  transition: aspect-ratio 0.5s ease;
}

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

.con09_cap {
  display: flex;
  flex-direction: column;
  justify-content: var(--cjc);
  align-items: center;
  height: calc(var(--px) * var(--ch));
  padding-top: calc(var(--px) * var(--cpt));
  border-top: 1px solid var(--color-point);
  background-color: var(--cbg);
  transition: height 0.5s ease, padding-top 0.5s ease, background-color 0.5s ease;
}

/* 높이 측정 중에는 카드 크기 전환을 잠시 끈다 — js/animation.js lockCon09Height() 가 활성 상태 높이를 재서 swiper min-height 로 잠근다
   (전환 중에 컨테이너 높이가 출렁여 아래 섹션이 덜컹이던 것 방지) */
.con09_measure .con09_card,
.con09_measure .con09_frame,
.con09_measure .con09_cap {
  transition: none !important;
}

.con09_name {
  font-family: "esamanru";
  font-weight: 500;
  font-size: calc(var(--px) * 24);
  letter-spacing: -0.1vw;
  line-height: 1.4vw;
  color: #ffffff;
  text-align: center;
}

.con09_desc {
  display: none;
  margin-top: 0.5vw;
  font-size: calc(var(--px) * 20);
  line-height: 1.6vw;
  color: #ffffff;
  text-align: center;
}

.con09_slide.swiper-slide-active .con09_desc {
  display: block;
}

/* ===== con10 ===== */
.con10 {
  padding-top: 5.4vw;
  padding-bottom: 2.9vw;
  background-color: #030303;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 calc(var(--px) * 2), #55100a calc(var(--px) * 2) calc(var(--px) * 3), transparent calc(var(--px) * 3) calc(var(--px) * 15)),
    linear-gradient(var(--color-point), var(--color-point));
  background-size: 100% calc(var(--px) * 387), 100% calc(var(--px) * 387);
  background-position: left bottom;
  background-repeat: no-repeat;
}

.con10_head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  padding-left: 5.8%;
  padding-right: 6%;
}

.con10_bn {
  width: calc(var(--px) * 371);
  height: calc(var(--px) * 74);
  margin-top: 5.6vw;
  background-color: var(--color-point);
  box-shadow: 0 0 6px 8px rgba(255, 39, 36, 0.15);
}

.con10_bn_txt {
  padding-top: calc(var(--px) * 4);
  font-family: "esamanru";
  font-weight: 500;
  font-size: calc(var(--px) * 22);
  letter-spacing: -0.06vw;
  color: #ffffff;
  white-space: nowrap;
}

.con10_stars {
  font-size: calc(var(--px) * 30);
  line-height: 1.4vw;
  color: var(--color-point);
}

.con10_subtitle {
  margin-top: 1.7vw;
}

.con10_title {
  margin-top: 0.8vw;
}

.con10_subtt {
  margin-top: 1.3vw;
  letter-spacing: -0.06vw;
}

.con10_slider {
  width: 100%;
  margin-top: calc(var(--px) * 62);
}

/* 번들 .swiper 의 margin auto 가 flex column 부모에서 shrink-to-fit 을 일으켜 loop 위치가 깨지므로 폭을 고정한다 */
.con10_swiper {
  width: 100%;
}

/* 비활성 = 아래로 42 · 왼쪽 이웃 −79 / 활성 = 위로 올라옴 · 오른쪽 이웃 +81 (모두 Swiper 상태 클래스로만 전환) */
.con10_slide.swiper-slide {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: auto !important;
  padding: calc(var(--px) * 42) calc(var(--px) * 12) 0 calc(var(--px) * 11);
  transform: translateX(calc(var(--px) * -79));
  transition: transform 0.4s, padding-top 0.4s;
}

.con10_slide.swiper-slide-active {
  padding-top: 0;
  transform: none;
}

.con10_slide.swiper-slide-active ~ .con10_slide {
  transform: translateX(calc(var(--px) * 81));
}

.con10_card {
  width: calc(var(--px) * 280);
  aspect-ratio: 280 / 440;
}

.con10_arr {
  width: calc(var(--px) * 60);
  height: calc(var(--px) * 60);
  top: 10vw;
  border-radius: 50%;
  background-color: #000000;
}

.con10_prev {
  left: 38.5%;
}

.con10_next {
  right: 38.4%;
}

.con10_arr_img {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 25);
  aspect-ratio: 25 / 24;
}

/* ===== con11 ===== */
.con11 {
  box-sizing: border-box;
  padding-top: 10.5vw;
  padding-bottom: 10.8vw;
  padding-left: calc(var(--px) * 52);
  padding-right: calc(var(--px) * 53);
  background-color: #000000;
  background-image: url('/images/con11_bg.jpg');
}

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

.con11_head {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: 2.9vw;
}

.con11_title {
  margin-top: 0.8vw;
}

.con11_subtt {
  margin-top: 1.1vw;
  letter-spacing: -0.06vw;
}

.con11_col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 26.6667%;
  gap: calc(var(--px) * 15);
}

/* 화면 순서 [좌 col | head | 우 col] — DOM 은 head 가 먼저(h2 → h3) */
.con11_col_l {
  order: -1;
}

/* height: 카드 크기는 문구 줄수가 아니라 시안 박스 크기(480×185)이고 활성/비활성 전환에서도 같다. 문구는 위쪽 정렬이라 콘텐츠로 박스가 안 잡힘 */
.con11_card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: calc(var(--px) * 185);
  padding-top: calc(var(--px) * 47);
  border: 4px solid #000000;
  box-shadow: inset 0 0 0 1px var(--color-point);
  background-color: rgba(0, 0, 0, 0.9);
  transition: background-color 0.4s, border-color 0.4s, box-shadow 0.4s;
}

.con11_card_b {
  padding-top: calc(var(--px) * 44);
}

/* 활성(신호등) — 시안 정지 상태 = 카드1. 순환은 Animation Pass 가 이 클래스를 옮긴다 */
.con11_on {
  border-color: var(--color-point);
  box-shadow: inset 0 0 0 1px #000000;
  background-color: var(--color-point);
}

.con11_card_tt {
  font-family: "esamanru";
  font-weight: 500;
  font-size: calc(var(--px) * 26);
  line-height: 1.4vw;
  letter-spacing: -0.07vw;
}

.con11_card_desc {
  margin-top: 0.8vw;
  line-height: 1.5vw;
}

.con11_img01 {
  width: calc(var(--px) * 735);
  aspect-ratio: 735 / 379;
  left: 0;
  top: calc(var(--px) * 411);
}

.con11_img02 {
  width: calc(var(--px) * 578);
  aspect-ratio: 578 / 271;
  right: 0;
  top: 0.5vw;
}

/* 아웃라인 글자 마퀴 창 — 시안 위치(left 38%)에서 오른쪽 끝까지가 창이고, 안의 글자가 우→좌로 흐른다 (con11-r02) */
.con11_outline_sd {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  left: 38%;
  right: 0;
  top: 35.3vw;
}

.con11_outline {
  padding-right: calc(var(--px) * 80);
  font-family: "esamanru";
  font-weight: 700;
  font-size: calc(var(--px) * 103.55);
  line-height: 4.4vw;
  letter-spacing: 0;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 39, 36, 0.3);
}

/* ===== con12 ===== */
.con12 {
  padding-top: 6vw;
  padding-bottom: 6.3vw;
  background-color: var(--color-point);
}

/* 패널 공통 — 패널1(비용)·패널2(절차). 텍스트 기본 흰색은 여기서 상속(th·할인가·태그라인만 별도 색) */
.con12_panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: 88.189%;
  border-radius: calc(var(--px) * 50);
  background-color: #000000;
  color: #ffffff;
}

.con12_panel_01 {
  padding-top: 7.9vw;
  padding-bottom: 5.4vw;
  background-image: url('/images/con12_bg.jpg');
}

.con12_panel_02 {
  flex-direction: row;
  justify-content: space-between;
  margin-top: 2vw;
  padding-left: 3.5%;
  padding-right: 3.7%;
  background-image:
    linear-gradient(90deg, rgba(255, 39, 36, 0.12) 0 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 39, 36, 0.12) 0 1px, transparent 1px);
  background-size: calc(var(--px) * 20) calc(var(--px) * 20);
  background-position: calc(var(--px) * 8) 0, 0 calc(var(--px) * 2);
}

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

.con12_flame_l {
  top: 2.2vw;
  left: 2.9%;
}

.con12_flame_r {
  top: 2.2vw;
  right: 2.9%;
}

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

.con12_title {
  margin-top: 0.7vw;
}

.con12_cost {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 78.5714%;
  margin-top: 1.1vw;
}

.con12_vat {
  font-size: calc(var(--px) * 16);
  line-height: 1.5vw;
  letter-spacing: -0.03vw;
  text-align: right;
}

.con12_tbl {
  width: 100%;
  margin-top: calc(var(--px) * 3);
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.con12_col_1 {
  width: 31.0606%;
}

.con12_col_2 {
  width: 30.2273%;
}

.con12_col_3 {
  width: 38.7121%;
}

/* height: 표 행 높이 — 시안 행 높이가 불규칙(47~51)해 콘텐츠로 안 잡힘. 균등 분할 시 행선이 최대 4.4px 어긋남 */
.con12_th {
  height: calc(var(--px) * 57);
  padding-top: calc(var(--px) * 2);
  font-size: calc(var(--px) * 20);
  font-weight: 700;
  letter-spacing: -0.03vw;
  text-align: center;
  vertical-align: middle;
  color: #000000;
  background-color: #f2f2f2;
}

.con12_th_1 {
  padding-left: calc(var(--px) * 20);
}

.con12_th_2 {
  padding-right: calc(var(--px) * 7);
}

.con12_th_3 {
  padding-right: calc(var(--px) * 14);
}

.con12_vl {
  border-left: 1px solid rgba(221, 221, 221, 0.3);
}

.con12_hl {
  border-bottom: 1px solid rgba(221, 221, 221, 0.3);
}

.con12_row_01 {
  height: calc(var(--px) * 51);
}

.con12_row_02 {
  height: calc(var(--px) * 50);
}

.con12_row_03 {
  height: calc(var(--px) * 48);
}

.con12_row_04 {
  height: calc(var(--px) * 47);
}

.con12_row_05 {
  height: calc(var(--px) * 47);
}

.con12_row_06 {
  height: calc(var(--px) * 47);
}

.con12_row_07 {
  height: calc(var(--px) * 48);
}

.con12_name {
  padding-left: calc(var(--px) * 20);
  font-size: calc(var(--px) * 19);
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
}

.con12_td_amt {
  font-size: calc(var(--px) * 19);
  vertical-align: middle;
}

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

/* 정가·할인가 폭 고정 = 가운데 고정열 정렬용 (가장 긴 「1,500만 원」 77 < 86) */
.con12_old {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 86);
  text-decoration: line-through;
}

.con12_new {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 86);
  font-weight: 700;
  color: var(--color-point);
}

.con12_td_cnt {
  padding-right: calc(var(--px) * 13);
  text-align: center;
  vertical-align: middle;
}

/* height: 텍스트 길이와 무관한 고정 알약 도형(156×34) */
.con12_pill {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  width: calc(var(--px) * 156);
  height: calc(var(--px) * 34);
  font-family: "esamanru";
  font-size: calc(var(--px) * 20);
  font-weight: 700;
  letter-spacing: -0.05vw;
  background-color: var(--color-point);
}

/* height: 합계 바 고정 높이(시안 70) */
.con12_sum_td {
  height: calc(var(--px) * 70);
  vertical-align: middle;
  background-color: var(--color-point);
}

.con12_sum {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-family: "esamanru";
  font-size: calc(var(--px) * 30);
  font-weight: 700;
  letter-spacing: -0.08vw;
}

.con12_note {
  margin-top: 0.4vw;
  font-size: calc(var(--px) * 15);
  line-height: 1.2vw;
}

/* 태그라인 — 후행 letter-spacing 만큼 ink 가 치우쳐 같은 값(0.4vw)을 시작 쪽 padding 으로 상쇄 */
.con12_side {
  padding-top: 0.4vw;
  font-family: "esamanru";
  font-size: calc(var(--px) * 20);
  font-weight: 500;
  line-height: 1.1vw;
  letter-spacing: 0.42vw;
  writing-mode: vertical-rl;
  color: var(--color-point);
}

.con12_side_l {
  transform: rotate(180deg);
}

.con12_main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 7.6vw;
  padding-bottom: 6.6vw;
  padding-left: calc(var(--px) * 4);
}

.con12_subtt {
  margin-top: 0.7vw;
  letter-spacing: -0.06vw;
}

.con12_steps {
  display: grid;
  grid-template-columns: 209fr 41fr 209fr 41fr 209fr 41fr 209fr;
  row-gap: 0.8vw;
  width: calc(var(--px) * 959);
  margin-top: 2.6vw;
}

/* height: 카드 고정 박스(209×209) — 원+텍스트 2줄은 내용 높이 ≈ 140 이라 콘텐츠로 안 잡히고 padding 우회는 금지 패턴 */
.con12_step {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: calc(var(--px) * 209);
  padding-top: calc(var(--px) * 42);
  border: 1px solid var(--color-point);
  border-radius: calc(var(--px) * 30);
  background-color: #000000;
}

/* 07 활성 카드 — 바깥 1px 은 검정, 안쪽 207×207 만 빨강 */
.con12_step_on {
  border-color: #000000;
  background-color: #f92421;
}

/* height: 고정 크기 원 도형(66×66) */
.con12_ico {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 66);
  height: calc(var(--px) * 66);
  border-radius: 50%;
  background-color: var(--color-point);
}

.con12_ico_on {
  background-color: #000000;
}

.con12_ico_img {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.con12_ico_img_02 {
  width: calc(var(--px) * 36);
  aspect-ratio: 36 / 33;
}

.con12_ico_img_03 {
  width: calc(var(--px) * 36);
  aspect-ratio: 36 / 34;
}

.con12_ico_img_04 {
  width: calc(var(--px) * 32);
  aspect-ratio: 32 / 35;
}

.con12_ico_img_05 {
  width: calc(var(--px) * 33);
  aspect-ratio: 33 / 32;
}

.con12_ico_img_06 {
  width: calc(var(--px) * 32);
  aspect-ratio: 32 / 32;
}

.con12_ico_img_07 {
  width: calc(var(--px) * 32);
  aspect-ratio: 32 / 32;
}

.con12_ico_img_08 {
  width: calc(var(--px) * 32);
  aspect-ratio: 32 / 33;
}

.con12_ico_img_09 {
  width: calc(var(--px) * 32);
  aspect-ratio: 32 / 32;
}

.con12_stepno {
  margin-top: 0.7vw;
  font-family: "esamanru";
  font-size: calc(var(--px) * 20);
  font-weight: 500;
  line-height: 1.1vw;
  letter-spacing: -0.05vw;
}

.con12_stepnm {
  margin-top: 0.6vw;
  font-size: calc(var(--px) * 19);
  line-height: 1.1vw;
}

.con12_arrow {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.con12_arrow_img {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 18);
  aspect-ratio: 18 / 17;
}

/* ===== con13 ===== */
.con13 {
  padding-top: 7.5vw;
  padding-bottom: 5.1vw;
  background-color: #000000;
  background-image: url("/images/con13_bg.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center bottom;
}

.con13_logo {
  width: calc(var(--px) * 116);
  aspect-ratio: 116 / 112;
}

.con13_logo_l {
  left: 1.6%;
  top: 1.9vw;
}

.con13_logo_r {
  right: 1.8%;
  top: 1.9vw;
}

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

.con13_subtt {
  margin-top: 0.7vw;
  letter-spacing: -0.06vw;
}

.con13_stage {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  margin-top: 3.7vw;
}

.con13_panel {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 81.8373%;
  height: calc(var(--px) * 649);
  border-radius: calc(var(--px) * 50);
  overflow: hidden;
  isolation: isolate;
  background: #000000;
}

.con13_side {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 25.5933%;
  height: 100%;
  border-right: 1px solid #000000;
  background: #ffffff;
}

.con13_list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 394);
  height: calc(var(--px) * 652);
  margin-top: calc(var(--px) * -3);
  overflow-y: auto;
}

.con13_list::-webkit-scrollbar {
  width: calc(var(--px) * 5);
}

.con13_list::-webkit-scrollbar-track {
  margin: calc(var(--px) * 58) 0;
  background: transparent;
}

.con13_list::-webkit-scrollbar-thumb {
  background: var(--color-point);
  border-radius: calc(var(--px) * 2.5);
}

@supports (-moz-appearance: none) {
  .con13_list {
    scrollbar-width: thin;
    scrollbar-color: var(--color-point) transparent;
  }
}

.con13_item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-shrink: 0;
  box-sizing: border-box;
  width: calc(var(--px) * 325);
  min-height: calc(var(--px) * 163);
  margin-left: calc(var(--px) * 41);
  padding: calc(var(--px) * 42) calc(var(--px) * 23) 0 calc(var(--px) * 16);
  border-bottom: 1px solid #dddddd;
}

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

.con13_name {
  font-family: "Suit";
  font-size: calc(var(--px) * 20);
  font-weight: 700;
  line-height: 1.4vw;
  letter-spacing: -0.05vw;
  color: #131313;
}

.con13_addr {
  margin-top: 0.5vw;
  font-family: "Suit";
  font-size: calc(var(--px) * 18);
  font-weight: 400;
  line-height: 1.2vw;
  letter-spacing: -0.05vw;
  color: #131313;
}

.con13_tel {
  font-family: "Suit";
  font-size: calc(var(--px) * 16);
  font-weight: 100;
  line-height: 1.1vw;
  color: #131313;
}

.con13_plus {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 34);
  height: calc(var(--px) * 34);
  margin-top: calc(var(--px) * 42);
  border-radius: 50%;
  background: #000000;
}

.con13_plus span {
  margin-top: 0.1vw;
  font-family: "Suit";
  font-size: calc(var(--px) * 20);
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
}

.con13_nores {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-shrink: 0;
  box-sizing: border-box;
  width: calc(var(--px) * 325);
  min-height: calc(var(--px) * 163);
  margin-left: calc(var(--px) * 41);
  padding: calc(var(--px) * 42) 0 0 calc(var(--px) * 16);
  font-family: "Suit";
  font-size: calc(var(--px) * 18);
  font-weight: 400;
  line-height: 1.2vw;
  color: #8a8a8a;
}

.con13_map {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 74.3425%;
  height: 100%;
}

.con13_mapfb_pin {
  width: calc(var(--px) * 49);
  aspect-ratio: 49 / 60;
  left: 16.5%;
  top: 9.9vw;
}

.con13_kmap {
  display: block;
  opacity: 0;
}

.con13_map.live .con13_kmap {
  opacity: 1;
}

.con13_map.live .con13_mapfb {
  display: none;
}

.con13_map.live .con13_mapfb_pin {
  display: none;
}

.con13_search {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  top: -1.9vw;
  width: calc(var(--px) * 799);
  height: calc(var(--px) * 69);
  border: 1px solid #000000;
  border-radius: 50vw;
  background: #ffffff;
}

.con13_input {
  width: calc(var(--px) * 695);
  margin-left: calc(var(--px) * 42);
  font-family: "Suit";
  font-size: calc(var(--px) * 20);
  font-weight: 400;
  letter-spacing: -0.06vw;
  color: #131313;
}

.con13_input::placeholder {
  color: #8a8a8a;
  opacity: 1;
}

.con13_sbtn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 53);
  height: calc(var(--px) * 53);
  margin-right: calc(var(--px) * 9);
  border-radius: 50%;
  background: var(--color-point);
}

.con13_sbtn_icon {
  width: calc(var(--px) * 28);
}

/* 말풍선 (map.js 가 CustomOverlay 로 주입) */
.con13_bubble {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.con13_bubble_text {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: calc(var(--px) * 8) calc(var(--px) * 18);
  border-radius: 50vw;
  background: #131313;
  font-family: "Suit";
  font-size: calc(var(--px) * 16);
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
}

.con13_bubble_tail {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 0;
  height: 0;
  border-left: calc(var(--px) * 7) solid transparent;
  border-right: calc(var(--px) * 7) solid transparent;
  border-top: calc(var(--px) * 8) solid #131313;
}

/* 상세 팝업 (section 밖 — section 전역 규칙을 받지 못해 img·button 리셋을 직접 한다) */
.con13_pop {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
}

.con13_pop_card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  box-sizing: border-box;
  width: calc(var(--px) * 560);
  max-height: 90%;
  overflow-y: auto;
  padding: calc(var(--px) * 24) calc(var(--px) * 40) calc(var(--px) * 40);
  border-radius: calc(var(--px) * 30);
  background: #ffffff;
}

.con13_pop_top {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 0.6vw;
}

.con13_pop_close {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 34);
  height: calc(var(--px) * 34);
  border: 0;
  border-radius: 50%;
  background: #000000;
  cursor: pointer;
}

.con13_pop_close span {
  font-family: "Suit";
  font-size: calc(var(--px) * 20);
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  transform: rotate(45deg);
}

.con13_pop_frame {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f2f2f2;
}

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

.con13_pop_name {
  margin-top: 1.3vw;
  font-family: "Suit";
  font-size: calc(var(--px) * 28);
  font-weight: 700;
  line-height: 1.6vw;
  letter-spacing: -0.05vw;
  color: #131313;
}

.con13_pop_info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  row-gap: 0.6vw;
  margin-top: 1vw;
}

.con13_pop_row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

.con13_pop_k {
  width: calc(var(--px) * 90);
  flex-shrink: 0;
  font-family: "Suit";
  font-size: calc(var(--px) * 16);
  font-weight: 700;
  line-height: 1.5vw;
  color: #8a8a8a;
}

.con13_pop_v {
  font-family: "Suit";
  font-size: calc(var(--px) * 18);
  font-weight: 400;
  line-height: 1.5vw;
  color: #131313;
}

.con13_pop_link {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(var(--px) * 56);
  margin-top: 1.6vw;
  border-radius: 50vw;
  background: var(--color-point);
  font-family: "Suit";
  font-size: calc(var(--px) * 18);
  font-weight: 700;
  color: #ffffff;
}

/* ===== con14 ===== */
.con14 {
  border-top: calc(var(--px) * 21) solid var(--color-point);
  background-color: #000000;
}

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

.con14_left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 58.3727%;
  padding-top: calc(var(--px) * 2);
  overflow: hidden;
  background-image: url("/images/con14_bg_l.jpg");
}

.con14_sd {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 107);
  left: 0;
}

.con14_track {
  margin-top: -6.1vw;
}

.con14_plate_img {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 665);
  aspect-ratio: 665 / 665;
  left: 70.4%;
}

/* 접시 제자리 회전 — 공통 .rotate_img(10s)보다 느리게 (con14-r02) */
.con14_plate_img img {
  animation-duration: 20s;
}

.con14_info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: 21.1%;
  margin-top: 0.1vw;
}

.con14_subtitle {
  text-align: left;
}

.con14_title {
  margin-top: 0.6vw;
  text-align: left;
}

.con14_subtt {
  margin-top: 0.7vw;
  letter-spacing: -0.06vw;
  text-align: left;
}

.con14_call {
  box-sizing: border-box;
  width: calc(var(--px) * 414);
  height: calc(var(--px) * 114);
  margin-top: 1.4vw;
  margin-left: 1px;
  padding-top: calc(var(--px) * 6);
  outline: 1px solid #ffffff;
  outline-offset: calc(var(--px) * -4);
  box-shadow: 0 calc(var(--px) * 20) calc(var(--px) * 18) rgba(0, 0, 0, 0.4);
  background-color: var(--color-point);
  font-family: "esamanru";
  font-size: calc(var(--px) * 55);
  font-weight: 700;
  line-height: 2.9vw;
  letter-spacing: -0.14vw;
  color: #ffffff;
}

.con14_right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 41.6273%;
  padding-top: calc(var(--px) * 206);
  padding-bottom: calc(var(--px) * 190);
  background-image: url("/images/con14_bg_r.jpg");
}

.con14_form {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 70.1135%;
  margin-left: 15.6%;
}

.con14_row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.7vw;
  padding-right: calc(var(--px) * 2);
}

.con14_row_01 {
  margin-top: 0;
}

.con14_row_04 {
  margin-top: 0.5vw;
  padding-top: calc(var(--px) * 20);
  padding-bottom: calc(var(--px) * 20);
}

.con14_label {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  column-gap: calc(var(--px) * 11);
  padding-top: calc(var(--px) * 2);
}

.con14_dot {
  display: block;
  width: calc(var(--px) * 8);
  height: calc(var(--px) * 8);
  border-radius: 50%;
  background-color: var(--color-point);
}

.con14_label_txt {
  font-size: calc(var(--px) * 22);
  font-weight: 700;
  line-height: 1.1vw;
  letter-spacing: -0.06vw;
  color: #ffffff;
}

.con14_input {
  box-sizing: border-box;
  width: calc(var(--px) * 366);
  height: calc(var(--px) * 63);
  padding: 0 calc(var(--px) * 25);
  background-color: #ffffff;
  font-size: calc(var(--px) * 20);
  font-weight: 400;
  letter-spacing: -0.05vw;
  color: #000000;
}

.con14_select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='7' viewBox='0 0 14 7'%3E%3Cpolygon points='0,0 14,0 7,7' fill='%23000000'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: calc(var(--px) * 14) calc(var(--px) * 7);
  background-position: right calc(var(--px) * 16) top calc(var(--px) * 29);
}

.con14_select:has(option[value=""]:checked) {
  font-weight: 300;
  color: #cfcfcf;
}

.con14_select option {
  color: #000000;
}

.con14_textarea {
  padding-top: calc(var(--px) * 20);
  padding-bottom: calc(var(--px) * 20);
  line-height: 1.2vw;
  resize: none;
}

.con14_radios {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 366);
  padding-left: 1px;
  column-gap: calc(var(--px) * 37);
}

.con14_radio {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  column-gap: calc(var(--px) * 10);
}

.con14_radio_in {
  box-sizing: border-box;
  width: calc(var(--px) * 21);
  height: calc(var(--px) * 21);
  border: calc(var(--px) * 3) solid #ffffff;
  border-radius: 50%;
  background-color: #ffffff;
}

.con14_radio_in:checked {
  background-color: var(--color-point);
}

.con14_radio_txt {
  font-size: calc(var(--px) * 22);
  font-weight: 700;
  line-height: 1.1vw;
  letter-spacing: -0.08vw;
  color: #ffffff;
}

.con14_agree {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  margin-top: 1.4vw;
  padding-right: calc(var(--px) * 5);
  column-gap: calc(var(--px) * 5);
}

.con14_agree_box {
  box-sizing: border-box;
  width: calc(var(--px) * 16);
  height: calc(var(--px) * 16);
  border: 1px solid #ffffff;
  background-color: transparent;
}

.con14_agree_box:checked {
  background-image: linear-gradient(var(--color-point), var(--color-point));
  background-repeat: no-repeat;
  background-position: center;
  background-size: calc(var(--px) * 10) calc(var(--px) * 10);
}

.con14_agree_txt {
  font-size: calc(var(--px) * 18);
  line-height: 1vw;
  letter-spacing: -0.06vw;
  color: #ffffff;
}

.con14_submit {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: calc(var(--px) * 63);
  margin-top: 1.3vw;
  padding-top: calc(var(--px) * 7);
  background-color: var(--color-point);
  font-family: "esamanru";
  font-size: calc(var(--px) * 24);
  font-weight: 500;
  line-height: 1.3vw;
  letter-spacing: -0.09vw;
  color: #ffffff;
}

/* ===== 모바일 지도 터치 잠금 오버레이 (md/map_zoom_control.md §3) ===== */
.map-touch-lock-parent {
  position: relative;
}

.map-touch-lock {
  position: absolute;
  z-index: 30;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  color: #fff;
  background: rgba(0, 0, 0, 0.58);
  border: 0;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}

.map-touch-lock-text {
  display: block;
  padding: 0 calc(var(--px) * 20);
  font-size: calc(var(--px) * 16);
  font-weight: 700;
  line-height: 1.3;
  word-break: keep-all;
}

.is-map-touch-unlocked .map-touch-lock {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 599px) {
  .map-touch-lock-text {
    font-size: 4.3vw;
    padding: 0 4vw;
  }
}