@charset "utf-8";

/* ============================================================
   slide.css — section09 장비소개 / 치과 둘러보기 슬라이드 (메인 전용)
   마크업·초기화는 기존 테마 index.php 이식본. 여기서는 유동폭만 담당.
   · slidesPerView 는 CSS 로 못 바꾼다 → section09.php 의 swiper `breakpoints` 와 같이 수정
   · 의존: Swiper 4.5.0 + jQuery
============================================================ */

.jangbi_container {
  text-align: center;
  background-color: #e5f6f7;
}
.jangbi_container img {
  max-width: 280px;
}
.jangbi-top {
  margin: 0 auto;
  overflow: hidden;
  padding: 1rem 0 3rem 0;
}
.jangbi-pagination {
  padding: 3rem 0;
}
.jangbi-pagination .swiper-pagination-bullet {
  background: transparent;
  border: 2px solid #818383;
  width: 12px;
  height: 12px;
  opacity: 1;
}
.jangbi-pagination .swiper-pagination-bullet-active {
  background: #727171;
  border: 2px solid #727171;
}
.tour_container {
  padding-bottom: 5rem;
}
.tour-top {
  margin: 0 auto;
  overflow: hidden;
  padding-bottom: 3rem;
}
/* 화살표 배경은 상대경로 — 절대경로면 테마 폴더명 변경 시 깨진다 */
.tour_container .swiper-button-next {
  background-image: url("../img/next.jpg");
  background-size: contain;
  width: 50px;
  top: 40%;
}
.tour_container .swiper-button-prev {
  background-image: url("../img/prev.jpg");
  background-size: contain;
  width: 50px;
  top: 40%;
}


/* ============================================================
   유동폭 (기존 고정폭 1240 / 980px 대체)
============================================================ */

/* 구 마크업의 id="container" 를 걷어내고 필요한 선언만 가져왔다.
   ⚠️ 되살리지 말 것 — #container 의 min-height:450px(모바일 300px) 이 반응형 축소를 막았다 */
.jangbi_container,
.tour_container {
  position : relative;
  width    : 100%;
  max-width: 1240px;
  margin   : 0 auto;
  overflow : hidden;
}
.jangbi_container::after,
.tour_container::after {
  display   : block;
  visibility: hidden;
  clear     : both;
  content   : "";
}
.jangbi_container { max-width: 1903px; }

.jangbi-top {
  width: 100%;
  max-width: 1240px;
  padding-right: var(--one-space-safe, 16px);
  padding-left : var(--one-space-safe, 16px);
}
.tour-top { width: 100%; max-width: 980px; }


@media all and (max-width: 1024px) {
  /* 터치기기에서는 화살표만 숨김 (슬라이드는 노출 · 스와이프로 조작) */
  .tour_container .swiper-button-next,
  .tour_container .swiper-button-prev { display: none; }

  .jangbi-top { padding-bottom: 2rem; }
  .tour_container {
    padding-right : var(--one-space-safe, 16px);
    padding-bottom: 3rem;
    padding-left  : var(--one-space-safe, 16px);
  }
  .tour-top { padding-bottom: 2rem; }
  .jangbi-pagination { padding: 2rem 0; }
}

@media all and (max-width: 639px) {
  .jangbi-top { padding-bottom: 1.5rem; }
  .tour_container { padding-bottom: 2rem; }
  .tour-top { padding-bottom: 1.5rem; }
  .jangbi-pagination { padding: 1.5rem 0; }
  .jangbi-pagination .swiper-pagination-bullet { width: 9px; height: 9px; }
}