@charset "UTF-8";
/* ============================================
   메인 페이지 스타일 (main = INTRO / 헤더·푸터 없음, 신규 작성 영역)
   공통(reset·custom·import·animate·font) = head.sub.php 전역 로드
   ============================================ */


#section_wrap {
  margin-top: 0;
}

html,
body {
  overflow: hidden
}

.intro {
  height: 100svh;
}

.intro_lr {
  width: 50vw;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.intro_lr_iner {
  height: 100%;
  padding-top: 10.9vw;
}

.intro_t1 {
  font-size: 1.26vw;
  font-weight: 800;
  color: #fff;
  margin-bottom: 1.7vw;
}

.intro_t2 {
  font-size: 3.4121vw;
  font-weight: 900;
  margin-bottom: 0.3vw;
}

.intro_t3 {
  font-size: 1.05vw;
  font-weight: 500;
  margin-bottom: 2.1vw;
}

.intro_02 {
  width: 87.98%;
  aspect-ratio: 838 / 212;
  bottom: 0;
}

.intro_01 {
  width: 79.896%;
  aspect-ratio: 761 / 415;
  bottom: 2.8vw;
  z-index: 1;
  left: 9.5vw;
}

.intro_05 {
  width: 90.7097%;
  aspect-ratio: 864 / 432;
  bottom: 0;
}

.intro_04 {
  width: 37.4813%;
  aspect-ratio: 357 / 188;
  right: -8.1vw;
  top: 4.3vw;
}

.intro_04 img {
  animation-delay: 0.4s;
}

.intro_03 {
  width: 36.0115%;
  aspect-ratio: 343 / 171;
  left: -8.2vw;
  top: 16.6vw;
}


/* ==================================================================
   모바일 (max-width:599px) — main.css 모바일은 전부 이 블록에 쌓을 것
   ================================================================== */
@media (max-width: 599px) {

  /* ---- INTRO : PC 좌우 2분할 → 세로 2스택 (위 BRAND / 아래 FRANCHISE) ----
     .intro(100vh) 안에서 두 갈래를 상하로. 각 갈래 = 상단 텍스트+버튼 / 하단 마스코트 */
  .intro_iner {
    flex-direction: column;
  }

  .intro_lr {
    width: 100%;
    height: 50vh;
  }

  .intro_lr_iner {
    padding-top: 14vw;
  }

  /* 텍스트 그룹 */
  .intro_t1 {
    font-size: 3.8vw;
    margin-bottom: 2vw;
  }

  .intro_t2 {
    font-size: 7.6vw;
    margin-bottom: 2vw;
  }

  .intro_t3 {
    font-size: 3.5vw;
    margin-bottom: 4.5vw;
  }


  /* 왼쪽 — 강아지·고양이 마스코트 (받침 위 정중앙 · 부모 flex-center 에 맡김) */
  .intro_02 {
    width: 76%;
    left: auto;
    right: auto;
  }

  .intro_01 {
    width: 79%;
    left: 18.6vw;
    bottom: 3vw;
  }

  /* 오른쪽 — 매장 건물 (정중앙) + 구름 데코 (양옆) */
  .intro_05 {
    width: 98%;
    left: 3.4vw;
    bottom: -1vw;
  }

  .intro_04 {
    width: 26%;
    right: -3vw;
    top: 10vw;
  }

  .intro_03 {
    width: 29%;
    left: -7vw;
    top: 20vw;
  }

  .intro_pet_btn {
    width: fit-content;
    min-width: 54vw;
    padding: 0 7vw;
    height: 11vw;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    backdrop-filter: blur(12px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 1vw 2.6vw rgba(0, 0, 0, 0.13);
    position: absolute;
    bottom: 3vw;
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  /* 브랜드/창업 CTA — 모바일에선 버튼(intro_pet_btn)만이 아니라 패널(intro_lr) 전체가 눌리게(탭 쉽게).
     버튼 모양은 그대로 두고 ::before 히트영역만 패널 밖까지 늘린 뒤 .intro_lr(overflow:hidden)로 패널에 클리핑.
     같은 <a href> 를 그대로 재사용 · PC 는 미변경(이 규칙은 모바일 블록 안에만 존재). */
  .intro_pet_btn::before {
    content: "";
    position: absolute;
    inset: -100vh -100vw;
    /* 시각효과 없음 — 탭 타겟 영역만 패널 전체로 확장 */
  }

  .intro_pet_btn .pet_btn_txt {
    font-size: 3.7vw;
    font-weight: 700;
    color: #1a1a1a;
  }

  .intro_pet_btn .pet_btn_arw img {
    filter: none;
    opacity: 1;
  }

}