@charset "utf-8";
/* 모바일 하위 섹션 레이아웃 — 767px 이하에서만 동작한다.
   구 사이트의 본문 섹션은 1920px 화면을 전제로 좌표·크기가 박혀 있어
   좁은 화면에서 제목·버튼·사진이 오른쪽으로 잘려 나간다.
   기존 CSS 와 앞서 얹은 mobile-layout / mobile-ui / mobile-hero 는 한 줄도 고치지 않고
   여기서만 덮어쓴다. 768px 이상은 이 파일이 비어 있는 것과 같다.

   첫 화면(#section01)은 별도 규칙이 맡으므로 이 파일은 건드리지 않는다. */

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

  
  html body #wrap #section02,
  html body #wrap #section03,
  html body #wrap #section04,
  html body #wrap #section05,
  html body #wrap #section06,
  html body #wrap #section07,
  html body #wrap #section08,
  html body #wrap #section09,
  html body #wrap #section10,
  html body #wrap #section11 {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-x: clip;
  }

  html body #wrap #section02 > .container,
  html body #wrap #section03 > .container,
  html body #wrap #section04 > .container,
  html body #wrap #section05 > .container,
  html body #wrap #section06 > .container,
  html body #wrap #section07 > .container,
  html body #wrap #section08 > .container,
  html body #wrap #section09 > .container,
  html body #wrap #section10 > .container,
  html body #wrap #section11 > .container {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  
  html body div[id] > [id^="section"]:not(#section01),
  html body div[id] [id^="section"]:not(#section01) {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  html body div[id] [id^="section"]:not(#section01) > .container {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  
  div[id] [id^="section"]:not(#section01) h1 {
    font-size: 26px !important;
    line-height: 1.32 !important;
    height: auto !important;
  }

  div[id] [id^="section"]:not(#section01) h2 {
    font-size: 24px !important;
    line-height: 1.34 !important;
    height: auto !important;
  }

  div[id] [id^="section"]:not(#section01) h3 {
    font-size: 20px !important;
    line-height: 1.4 !important;
    height: auto !important;
  }

  div[id] [id^="section"]:not(#section01) h4 {
    font-size: 17px !important;
    line-height: 1.45 !important;
    height: auto !important;
  }

  div[id] [id^="section"]:not(#section01) h5 {
    font-size: 16px !important;
    line-height: 1.45 !important;
    height: auto !important;
  }

  div[id] [id^="section"]:not(#section01) h6,
  div[id] [id^="section"]:not(#section01) p,
  div[id] [id^="section"]:not(#section01) li {
    font-size: 15px !important;
    line-height: 1.6 !important;
    height: auto !important;
  }

  div[id] [id^="section"]:not(#section01) label,
  div[id] [id^="section"]:not(#section01) span {
    line-height: 1.5;
  }

  
  html body div[id]:not(#wrap) #section01 h1,
  html body div[id]:not(#wrap) #section01 h2 {
    font-size: 26px !important;
    line-height: 1.32 !important;
    height: auto !important;
    white-space: normal !important;
  }

  html body div[id]:not(#wrap) #section01 h1 span,
  html body div[id]:not(#wrap) #section01 h2 span {
    font-size: inherit !important;
    white-space: normal !important;
  }

  html body div[id]:not(#wrap) #section01 h3,
  html body div[id]:not(#wrap) #section01 h4,
  html body div[id]:not(#wrap) #section01 h5,
  html body div[id]:not(#wrap) #section01 h6,
  html body div[id]:not(#wrap) #section01 p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    height: auto !important;
    white-space: normal !important;
  }

  
  div[id] [id^="section"]:not(#section01) .d-flex:not(.swiper-wrapper):not(.swiper-slide) {
    flex-wrap: wrap !important;
    gap: 14px !important;
  }

  div[id] [id^="section"]:not(#section01) .title.d-flex,
  div[id] [id^="section"]:not(#section01) .justify-content-between:not(.swiper-wrapper) {
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  /* ── 4. 큰 여백 계단을 줄인다 ───────────────────────────
     PC 기준 100~200px 여백이 남으면 화면 절반이 빈 칸으로 남는다. */
  div[id] [id^="section"]:not(#section01) .title {
    margin-bottom: 24px !important;
  }

  
  html body #wrap #section05 .container div img.position-absolute {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto 10px !important;
    object-fit: contain;
    object-position: center;
  }

  html body #wrap #section04 .container > div {
    right: auto !important;
    left: auto !important;
  }

  html body #wrap #section07 .swiperTab {
    width: auto !important;
    height: auto !important;
    right: auto !important;
    gap: 18px !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* 탭 목록이 세로 260px 고정이라 좁은 화면에서 옆칸을 밀어낸다 */
  html body #wrap #section07 .tab-buttons {
    width: 100% !important;
    height: auto !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  html body #wrap #section07 .tab-btn {
    width: auto !important;
    height: auto !important;
    min-height: 44px !important;
    flex: 1 1 auto !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  
  html body #wrap #section07 .swiper-container {
    right: auto !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
    max-width: 100% !important;
  }

  html body #wrap #section07 .swiper-fade-overlay {
    display: none !important;
  }

  /* ── 6. 슬라이드 칸 ─────────────────────────────────────
     한 칸이 1000px 로 못박혀 있어 화면을 넘어간다. */
  html body #wrap #section09 .tour-swiper-wrapper,
  html body #wrap #section09 .tour-tabs,
  html body #wrap #section08 .custom-line-pagination,
  html body #wrap #section08 .pagination-line-active {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  html body #wrap #section09 .swiper-slide {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  html body #wrap #section09 .tour-tabs {
    gap: 10px !important;
    flex-wrap: wrap !important;
  }

  /* ── 7. 진료시간·오시는 길 ──────────────────────────────
     한 줄에 두 칸을 600px 씩 잡아 두어 오른쪽 칸이 잘린다. */
  html body #wrap #section10 .container .info {
    gap: 28px !important;
    flex-wrap: wrap !important;
  }

  html body #wrap #section10 .container .time ul li,
  html body #wrap #section10 .container .time ul li h6,
  html body #wrap #section10 .container .time .box,
  html body #wrap #section10 .container .road .box {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    gap: 10px !important;
  }

  html body #wrap #section10 .container .time ul li h6 span {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    gap: 8px !important;
  }

  html body #wrap #section10 .container .road .box {
    position: static !important;
    left: auto !important;
    top: auto !important;
  }

  html body #wrap #section10 .container .road h4 {
    width: auto !important;
    min-width: 0 !important;
  }

  html body #wrap #section10 .container .road div,
  html body #wrap #section10 .container .tel {
    gap: 12px !important;
    flex-wrap: wrap !important;
  }

  /* ── 7-b. 배경으로 깔린 인물 사진 ───────────────────────
     의료진 세 분과 이름·자격 표기가 그림 «안에» 인쇄돼 있는데
     1920 화면용이라 background-size:cover 로 깔면 좁은 화면에서
     가운데만 남고 양옆 인물이 통째로 잘려 나간다.
     폭에 맞추고 세로는 비율대로 두어 «한 사람도 잘리지 않게» 한다.
     그림이 차지할 세로(원본 3840×2482 → 폭의 0.65배)를 아래 여백으로 비워 둔다. */
  html body #wrap #section05,
  html body #wrap #section05.v260501 {
    background-size: 100% auto !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    background-color: #eef2f6;
    padding-bottom: 66vw !important;
  }

  /* ── 7-c. 하위 지면에서 PC 좌표로 띄운 그림 ─────────────
     left 197px 로 못박혀 있어 좁은 화면에서 오른쪽으로 밀려 잘린다. */
  html body div[id] #section08 img.position-absolute {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  
  div[id] [id^="section"]:not(#section01) img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain;
    object-position: center;
  }

  /* 배경으로 깔린 그림은 예외 — 자기 칸을 채워야 한다 */
  div[id] [id^="section"]:not(#section01) .swiper-slide > img,
  div[id] [id^="section"]:not(#section01) .article img {
    object-fit: cover;
  }

  /* ── 9. 누를 칸 ─────────────────────────────────────────
     195×59 로 박힌 버튼을 화면 안에 두되 44px 이상을 지킨다. */
  div[id] [id^="section"]:not(#section01) button {
    max-width: 100% !important;
    min-height: 44px !important;
    height: auto !important;
  }

  div[id] [id^="section"]:not(#section01) button > a {
    min-height: 44px !important;
    height: auto !important;
    line-height: 1.4 !important;
    font-size: 15px !important;
    gap: 10px !important;
    padding: 10px 14px !important;
  }

  div[id] [id^="section"]:not(#section01) button > a img {
    width: 7px !important;
    height: auto !important;
    flex: 0 0 auto;
  }
}