/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 26 2026 | 08:03:15 */
@charset "utf-8";
/*
  page-intro : 다모아치과 소개 (1depth 통합)
  약어 정의
  - intr : intro (병원 소개)
  - dnt  : dentist (의료진 소개)
  - sl   : slide
  - pos  : position (전문의 자격)
  - jb   : jangbi (장비 소개)
  - br   : branch (지점 소개)
*/


/* ============================================================
   병원 소개
============================================================ */

/* ── 섹션1 : full-row 교차 레이아웃 ── */

.intr-full-sec .full-row-wrap {
  padding: var(--one-space-lg) 0;
}

.intr-full-sec .full-row-item {
  display: flex;
  align-items: stretch;
}

.intr-full-sec .full-row-img {
  width: 50%;
  flex-shrink: 0;
  overflow: hidden;
}

.intr-full-sec .full-row-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.intr-full-sec .full-row-content {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--one-space-r) var(--one-space-s) var(--one-space-r) var(--one-space-lg);
}

/* 짝수 행: 이미지 우 / 텍스트 좌 */
.intr-full-sec .full-row-item:nth-child(even) .full-row-img {
  order: 2;
}

.intr-full-sec .full-row-item:nth-child(even) .full-row-content {
  order: 1;
  padding-left: 14%;
}

/* 영문 라벨 — .cp-txt .txt-uc .gray-color02 공통 클래스 활용, 추가 조정만 선언 */
.intr-full-sec .full-row-label {
  display: block;
  letter-spacing: 0;
  margin-bottom: 0.8em;
  font-size: var(--one-body);
  opacity: 0.3;
}

.intr-full-sec .full-row-title {
  margin-bottom: 0.6em;
}


/* ── 섹션2 : 슬라이드 ── */

/* 배경색·이미지 수동 추가 */

.con-inner-lg.intr-sl-outer {
  margin: 0 0 0 auto;
  max-width: 1550px;
}

.intr-sl-hd {
  margin-bottom: var(--one-space-r);
  padding-bottom: var(--one-gap-xl);
  border-bottom: 1px solid var(--gray-color03);
}

.intr-sl-item {
  display: flex;
  flex-direction: column;
}

.intr-sl-item-txt {
  padding-bottom: var(--one-gap-xl);
  padding-left: var(--one-gap-r);
}

.intr-sl-item-txt .p-tit {
  margin-bottom: var(--one-gap-sm);
}

.intr-sl-item-img {
  width: 100%;
  overflow: hidden;
}

.intr-sl-item-img img {
  width: 100%;
  height: auto;
  display: block;
}

.intr-sl-wrap .tour-slide-progress {
  margin-top: var(--one-gap-xl);
}

.intr-sl-wrap .tour-slide-progress .swiper-pagination {
  background: var(--gray-color03);
}

.intr-sl-wrap .tour-slide-progress .swiper-pagination-progressbar-fill {
  background: var(--main-color);
}


/* ============================================================
   의료진 소개
============================================================ */

/* ── 섹션1 : 히어로 — 단체 사진 ── */

.dnt-hero-sec {
  /* 배경색·이미지 수동 추가 */
  padding-top: 0;
  padding-bottom: 0;
}

.dnt-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #F1F8FF;
  background: linear-gradient(0deg, rgba(241, 248, 255, 1) 0%, rgba(244, 249, 255, 1) 35%, rgba(255, 255, 255, 1) 100%);
}

.dnt-hero-txt {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: var(--one-space-lg) 0;
  text-align: center;
}

/* 타이틀 — 색상은 배경 확정 후 수동 클래스 추가 */
.txt-wrap .hd1.dnt-hero-title {
  margin-bottom: var(--one-gap-xl);
  font-size: clamp(var(--one-hd1), 6vw, 116px);
  line-height: 1.3;
  color: var(--sub-color01);
  opacity: 0.3;
}

.dnt-hero-desc {
  margin: 0 auto;
}

/* 이미지 컨테이너 — GSAP이 width → 100vw 확장, height는 이미지 비율 자연 유지 */
.dnt-hero-img-wrap {
  width: 75%;
  margin: 0 auto;
  overflow: hidden;
}

.dnt-hero-img {
  width: 100%;
}

.dnt-hero-img img {
  width: 100%;
  height: auto;
  display: block;
  transform-origin: center bottom;
}


/* ── 섹션2 : 의료진 슬라이드 — full width ── */

/* 배경색·이미지 수동 추가 */
.section.dnt-sl-sec {
  padding: calc(var(--one-space-xl)*1.2) 0 var(--one-space-xl);
}

.dnt-sl-hd {
  max-width: var(--one-layout);
  margin: 0 auto var(--one-space-xl);
}

.dnt-sl-hd-title-wrap {
  display: flex;
  align-items: center;
  gap: var(--one-gap-lg);
  margin-bottom: var(--one-gap-xl);
  justify-content: space-between;
  position: relative;
}

.dnt-sl-logo-wrap {
  flex-shrink: 0;
  position: absolute;
  right: -15%;
  top: -72%;
  width: 19%;
  z-index: -1;
}

.dnt-sl-logo {
  display: block;
  width: auto;
  height: auto;
}

.dnt-slide-wrap {
  position: relative;
}


/* ── 의료진 카드 ── */

/* Swiper 기본 overflow:hidden 재정의 — 이미지 위로 올라갈 공간 확보 */
.dnt-slide.swiper {
  overflow: visible;
}

.dnt-slide .swiper-slide {
  height: auto;
  overflow: visible;
}

/* 카드 래퍼 — overflow visible로 이미지 상단 잘림 방지 */
.dnt-card {
  position: relative;
  cursor: pointer;
  border-radius: 12px;
  overflow: visible;
}

/* 이미지 영역 */
.dnt-card-front {
  position: relative;
  width: 100%;
  border-radius: 12px;
}

.dnt-card-front .img-box {
  overflow: visible;
}

/* 이미지 두 장
   - img-off : 기본 노출 (오버레이 포함)
   - img-on  : 활성 시 노출 (원본)
*/
.dnt-card-img-on,
.dnt-card-img-off {
  width: 100%;
  height: auto;
  display: block;
  will-change: transform, opacity;
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dnt-card-img-on {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

/* 이미지 전환 — JS 클래스 제어 */
.dnt-card-img-on.is-visible {
  opacity: 1;
}

.dnt-card-img-off.is-hidden {
  opacity: 0;
}

.dnt-card-front-info {
  display: none;
}

/* 텍스트 박스 — 이미지 하단 오버레이 고정, 하단 여백 없음 */
.dnt-card-back {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--one-gap-r) var(--one-gap-lg) 0;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 2;
  border-radius: 0 0 12px 12px;
  text-align: center;
}

/* 활성화 시 텍스트 박스 fade in — 위치 변화 없음 */
.dnt-slide .swiper-slide.is-open .dnt-card-back {
  opacity: 1;
}

.dnt-card-back .dnt-card-branch {
  margin-bottom: 0.3em;
}

.dnt-card-back .dnt-card-branch {
  color: var(--gray-color01);
}

.dnt-card-pos {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dnt-card-pos-item {
  display: flex;
  align-items: center;
  gap: var(--one-gap-sm);
}

.dnt-card-pos-icon {
  flex-shrink: 0;
  max-width: var(--one-icon-r);
}

.dnt-card-pos-icon img {
  width: 100%;
  height: auto;
  display: block;
}

.tour-slide-progress.dnt-slide-progress {
  max-width: 1600px;
  margin: var(--one-gap-xl) 0 0 auto;
  display: flex;
  justify-content: flex-end;
}


/* ============================================================
   장비 소개
============================================================ */

/* 3열 그리드 */
.jb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--one-gap-xl);
}

.jb-card-img {
  margin-bottom: var(--one-gap-lg);
}

.jb-card-txt .p-tit {
  margin-bottom: 0.5em;
}


/* ============================================================
   지점 소개
============================================================ */

/* 토글 버튼 영역 */
.br-toggle-wrap {
  padding-bottom: var(--one-space-s);
  padding-left: var(--one-space-safe);
  padding-right: var(--one-space-safe);
}

/* 슬라이드 래퍼 — con-inner 좌측 기준 맞춤, 우측 끝까지 */
.br-slide-wrap {
  padding-left: calc((100% - var(--one-layout)) / 2);
  padding-bottom: var(--one-space-xl);
}

.br-panel-inner01 {
  padding-top: var(--one-space-xl);
  background: var(--sub-color04);
}

.br-panel-inner02 {
  padding-top: var(--one-space-xl);
}

/* ============================================================
   반응형 — 태블릿 (max-width: 1024px)
============================================================ */

@media all and (max-width: 1024px) {

  /* 병원 소개 */
  .intr-full-sec .full-row-content {
    padding: var(--one-space-s) var(--one-gap-xl);
  }

  .intr-full-sec .full-row-item:nth-child(even) .full-row-content {
    padding-left: var(--one-gap-xl);
  }

  /* 의료진 소개 */
  .section.dnt-sl-sec {
    padding: var(--one-space-xl) var(--one-space-safe);
  }

  .dnt-sl-logo-wrap {
    right: -15%;
    top: -33%;
    width: 43%;
  }

  .dnt-sl-logo {
    max-width: 120px;
  }

  /* 장비 소개 */
  .jb-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 지점 소개 */
  .br-slide-wrap {
    padding-left: var(--one-space-safe);
  }
}


/* ============================================================
   반응형 — 모바일 (max-width: 639px)
============================================================ */

@media all and (max-width: 639px) {
  .br-toggle-wrap {
    text-align: center;
  }

  /* 병원 소개 섹션1 */
  .intr-full-sec .full-row-item {
    flex-direction: column;
  }

  .intr-full-sec .full-row-label,
  .intr-full-sec .full-row-desc {
    text-align: center;
  }

  .intr-full-sec .full-row-img,
  .intr-full-sec .full-row-content {
    width: 100%;
  }

  .intr-full-sec .full-row-item:nth-child(even) .full-row-img,
  .intr-full-sec .full-row-item:nth-child(even) .full-row-content {
    order: 0;
  }

  .intr-full-sec .full-row-content {
    padding: var(--one-space-s) 0;
  }

  .intr-sl-hd {
    margin-bottom: var(--one-gap-xl);
  }

  .intr-sl-item-txt {
    min-height: 36.5vw;
  }

  /* 의료진 소개 */
  .dnt-hero-txt {
    padding: var(--one-space-s) 0;
  }

  .dnt-sl-hd-title-wrap {
    gap: var(--one-gap-r);
  }

  .dnt-sl-logo {
    max-width: 130px;
  }

  .dnt-card-pos-icon {
    max-width: var(--one-icon-s);
  }

  .dnt-slide .swiper-slide.is-open .dnt-card-back {
    opacity: 1;
  }

  /* 장비 소개 */
  .jb-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--one-gap-lg);
  }

  /* 지점 소개 */
  .br-slide-wrap {
    padding-left: var(--one-space-safe);
  }
}