/* 본명조 (Noto Serif KR / Source Han Serif) 구글 웹폰트 로드 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap');

/* 라엘라 병원소개 (info) 스타일 */
:root {
  --info-coral: #d3646c;
  --info-dark: #111111;
  --info-body: #333333;
  --info-title-font: 'Noto Serif KR', serif;
  --info-body-font: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
}

/* 공통 스타일(.content > div { width:800px }) 무력화 및 100% 와이드 확장 */
.content>.info-new-wrap,
.info-new-wrap {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: #ffffff;
  overflow-x: hidden;
  word-break: keep-all;
}

/* 이미지 전체 드래그 및 선택(파란색 하이라이트) 방지 */
.info-new-wrap img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* 우측 하단 플로팅 상담문의 버튼 최상단 고정 (본문 사진에 가려짐 방지) */
.sub_quick_square {
  z-index: 9999 !important;
}

/* =============================================================
   1. 히어로 영역 (PC 가로 100% 와이드)
   ============================================================= */
.info-hero-section {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.info-hero-bg {
  width: 100% !important;
}

.info-hero-bg picture,
.info-hero-bg img {
  width: 100% !important;
  max-width: none !important;
  height: auto;
  display: block;
}

/* 텍스트 오버레이 (PC) */
.info-hero-content {
  position: absolute;
  top: 32%;
  left: 24.8%;
  z-index: 2;
}

.info-hero-title {
  font-family: var(--info-title-font);
  font-size: 2.1vw;
  font-weight: 700;
  color: var(--info-dark);
  letter-spacing: -0.07em;
  line-height: 1.35;
  margin-bottom: 1.6vw;
}

.info-hero-title .highlight {
  color: var(--info-coral);
}

.info-hero-desc {
  font-family: var(--info-body-font);
  font-size: 1.0vw;
  font-weight: 400;
  color: var(--info-body);
  line-height: 1.85;
  letter-spacing: -0.01em;
}

.info-hero-desc .highlight-bold {
  color: var(--info-coral);
  font-weight: 700;
}

.m-br {
  display: none;
}

.mob-text {
  display: none;
}

.pc-text {
  display: inline;
}

.info-hero-arrow {
  display: none;
}

/* =============================================================
   2. 구분선 섹션
   ============================================================= */
.info-divider-section {
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 120px 20px 0;
  background-color: #ffffff;
}

.info-divider-title {
  font-family: var(--info-title-font);
  font-size: clamp(26px, 2.2vw, 36px);
  font-weight: 400;
  color: var(--info-dark);
  letter-spacing: -0.03em;
  margin-bottom: 70px;
}

.info-divider-title strong {
  font-weight: 700;
}

.info-dotted-line {
  position: relative;
  width: 6px;
  height: 120px;
  margin: 0 auto 70px;
  /* 배경 바탕: 은은하게 깔려있는 기본 연한 도트 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='15' viewBox='0 0 6 15'%3E%3Ccircle cx='3' cy='3' r='2.8' fill='%23d3646c' fill-opacity='0.25'/%3E%3C/svg%3E");
  background-repeat: repeat-y;
  background-position: center top;
}

/* 위에서부터 동그라미가 하나씩 주르르륵 채워지며 내려오는 애니메이션 레이어 */
.info-dotted-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='15' viewBox='0 0 6 15'%3E%3Ccircle cx='3' cy='3' r='2.8' fill='%23d3646c'/%3E%3C/svg%3E");
  background-repeat: repeat-y;
  background-position: center top;
  animation: flowDotsDown 2.2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes flowDotsDown {
  0% {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  65% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }

  85% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }

  100% {
    clip-path: inset(100% 0 0 0);
    opacity: 0;
  }
}

/* =============================================================
   3. 본문 공통 섹션 (PC 레이아웃)
   ============================================================= */
.info-feature-section {
  padding: 0 0 150px;
  background-color: #ffffff;
}

.info-feature-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.info-feature-text {
  flex: 1 1 50%;
  max-width: 600px;
}

/* 섹션 2 텍스트 (우측 60px 이동 및 디스크립션 간격) */
.info-sec-2 .info-feature-text {
  position: relative;
  left: 60px;
}

.info-sec-2 .info-sec-body {
  margin-top: 20px;
}

/* 섹션 3 (PC: 하단 여백 30px 적용, 모바일은 0 유지) */
.info-sec-3 {
  padding-bottom: 50px;
}

.info-sec-3 .info-feature-text {
  position: relative;
  top: -90px;
  z-index: 2;
}

.info-sec-3 .info-sec-title {
  white-space: nowrap;
}

.info-inner-reverse .info-feature-image {
  justify-content: flex-start;
}

/* 우측 이미지(섹션 1, 3) 60px 이동 */
.info-sec-1 .info-feature-image img,
.info-sec-3 .info-feature-image img {
  position: relative;
  left: 60px;
}

.info-sec-title .fw-normal {
  font-weight: 400;
}

.info-sec-title strong {
  font-weight: 700;
}

.info-quote-icon {
  width: 38px;
  height: auto;
  margin-bottom: 20px;
}

.info-quote-icon img {
  width: 100%;
  height: auto;
  display: block;
}

.info-sec-title {
  font-family: var(--info-title-font);
  font-size: clamp(28px, 2.2vw, 35px);
  font-weight: 700;
  color: var(--info-dark);
  letter-spacing: -0.07em;
  line-height: 1.35;
  margin-bottom: 12px;
}

.info-sec-subtitle {
  font-family: var(--info-body-font);
  font-size: clamp(16px, 1.15vw, 20px);
  font-weight: 700;
  color: var(--info-coral);
  letter-spacing: -0.02em;
  margin-bottom: 32px;
}

.info-sec-body {
  font-family: var(--info-body-font);
  font-size: clamp(14px, 1.0vw, 17px);
  font-weight: 400;
  color: #444444;
  line-height: 1.8;
  letter-spacing: -0.01em;
}

.info-sec-body p+p {
  margin-top: 24px;
}

.info-feature-image {
  flex: 1 1 50%;
  display: flex;
  justify-content: flex-end;
}

.info-feature-image img {
  width: 80%;
  max-width: 600px;
  height: auto;
  display: block;
}

/* =============================================================
   4. 모바일 반응형 (max-width: 768px)
   ============================================================= */
@media (max-width: 768px) {
  .info-hero-content {
    top: auto;
    bottom: calc(5.5% + -40px);
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    text-align: center;
  }

  .m-br {
    display: inline;
  }

  .pc-text {
    display: none;
  }

  .mob-text {
    display: inline;
  }

  .info-hero-title {
    font-size: 6.8vw;
    line-height: 1.35;
    margin-bottom: 40px;
  }

  .info-hero-desc {
    font-size: 3.7vw;
    line-height: 1.75;
  }

  .info-hero-arrow {
    display: block;
    width: 10vw;
    max-width: 48px;
    margin: 120px auto 0;
    position: relative;
    top: -50px;
    animation: bounceDown 1.6s infinite ease-in-out;
  }

  .info-hero-arrow img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* 구분선 섹션 */
  .info-divider-section {
    padding: 70px 20px 0;
  }

  .info-divider-title {
    font-size: clamp(20px, 5.8vw, 28px);
    line-height: 1.35;
    margin-bottom: 35px;
  }

  .info-dotted-line {
    height: 75px;
    margin: 0 auto 50px;
  }

  /* 섹션 모바일 공통 간격 */
  .info-feature-section {
    padding: 0 0 120px;
  }

  .info-feature-inner {
    display: grid;
    grid-template-columns: 100%;
    padding: 0;
    gap: 0;
    position: relative;
  }

  .info-feature-text {
    display: contents;
    left: 0;
  }

  .info-feature-image {
    grid-row: 1;
    grid-column: 1;
    width: 100%;
    height: 300px;
    background-color: #ffffff;
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }

  .info-feature-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #ffffff 30%, rgba(255, 255, 255, 0.95) 45%, rgba(255, 255, 255, 0) 75%);
    pointer-events: none;
    z-index: 2;
  }

  .info-feature-image picture {
    height: 300px;
    display: flex;
    justify-content: flex-end;
  }

  .info-feature-image img {
    height: 300px;
    width: auto;
    max-width: none;
    display: block;
    left: 0;
  }

  /* 모바일에서 PC의 left: 60px 상속 방지 및 좌측 정렬 복귀 */
  .info-sec-1 .info-feature-image img,
  .info-sec-3 .info-feature-image img {
    position: relative;
    left: 0;
  }

  .info-sec-header {
    grid-row: 1;
    grid-column: 1;
    z-index: 3;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 6% 0 7%;
    pointer-events: none;
  }

  .info-sec-header .info-quote-icon {
    width: 24px;
    margin-bottom: 12px;
  }

  .info-sec-title {
    font-size: clamp(21px, 6.2vw, 27px);
    font-weight: 700;
    line-height: 1.32;
    margin-bottom: 10px;
    letter-spacing: -0.04em;
    color: var(--info-dark);
  }

  .info-sec-subtitle {
    font-size: clamp(12.5px, 3.5vw, 15px);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.02em;
    margin-bottom: 0;
    color: var(--info-coral);
  }

  .info-sec-body {
    grid-row: 2;
    grid-column: 1;
    padding: 35px 7% 0 7%;
    font-size: clamp(14px, 3.8vw, 16px);
    line-height: 1.75;
    letter-spacing: -0.02em;
    color: #444444;
  }

  .info-sec-body p+p {
    margin-top: 18px;
  }

  /* 섹션 2 모바일 (잘림 현상 해결 및 반응형 최적화) */
  .info-sec-2 .info-feature-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    min-height: 280px;
    height: auto;
    padding: 0 10px 0 20px;
    overflow: visible;
    left: 0;
  }

  .info-sec-2 .info-feature-image {
    flex: 0 0 auto;
    width: auto;
    height: clamp(240px, 62vw, 290px);
    background-color: transparent;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    overflow: visible;
  }

  .info-sec-2 .info-feature-image::after {
    display: none;
  }

  .info-sec-2 .info-feature-image picture,
  .info-sec-2 .info-feature-image img {
    height: 100%;
    max-height: 290px;
    width: auto;
    max-width: none;
    display: block;
    object-fit: contain;
  }

  .info-sec-2 .info-feature-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    height: auto;
    min-width: 0;
    padding: 10px 10px 10px 15px;
    left: 0;
  }

  .info-sec-2 .info-sec-header {
    height: auto;
    padding: 0;
    margin-bottom: 16px;
    display: block;
    position: relative;
    top: 0;
  }

  .info-sec-2 .info-sec-header .info-quote-icon {
    width: 24px;
    margin-bottom: 12px;
  }

  .info-sec-2 .info-sec-title {
    font-size: clamp(21px, 6.2vw, 27px);
    font-weight: 700;
    line-height: 1.32;
    margin-bottom: 10px;
    letter-spacing: -0.04em;
    color: var(--info-dark);
  }

  .info-sec-2 .info-sec-body {
    margin-top: 0;
    padding: 0;
    font-size: clamp(14px, 3.8vw, 16px);
    line-height: 1.75;
    letter-spacing: -0.02em;
    word-break: keep-all;
  }

  /* 섹션 3 모바일 */
  .info-sec-3 {
    padding: 0;
  }

  .info-sec-3 .info-feature-inner {
    display: flex;
    flex-direction: column;
    padding: 0;
    left: 0;
  }

  .info-sec-3 .info-feature-image {
    order: 1;
    width: 100%;
    height: 380px;
    background-color: transparent;
    display: flex;
    justify-content: flex-end;
    padding-right: 20px;
    overflow: hidden;
    left: 0;
  }

  .info-sec-3 .info-feature-image::after {
    display: none;
  }

  .info-sec-3 .info-feature-image picture,
  .info-sec-3 .info-feature-image img {
    height: 380px;
    width: auto;
    max-width: none;
    object-fit: contain;
    display: block;
  }

  .info-sec-3 .info-feature-text {
    order: 2;
    display: block;
    width: 100%;
    padding: 0 20px 0 40px;
    margin-top: 30px;
    position: relative;
    z-index: 2;
    left: 0;
  }

  .info-sec-3 .info-sec-header {
    height: auto;
    padding: 0;
    margin-bottom: 25px;
    display: block;
  }

  .info-sec-3 .info-sec-header .info-quote-icon {
    width: 24px;
    margin-bottom: 14px;
  }

  .info-sec-3 .info-sec-title {
    font-size: clamp(21px, 6.2vw, 27px);
    font-weight: 700;
    line-height: 1.32;
    margin-bottom: 10px;
    letter-spacing: -0.04em;
    color: var(--info-dark);
    white-space: normal;
  }

  .info-sec-3 .info-sec-subtitle {
    font-size: clamp(13px, 3.6vw, 15px);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.02em;
    margin-bottom: 0;
    color: var(--info-coral);
  }

  .info-sec-3 .info-sec-body {
    padding: 0;
    font-size: clamp(14px, 3.8vw, 16px);
    line-height: 1.75;
    letter-spacing: -0.02em;
    color: #444444;
    word-break: keep-all;
  }

  .info-sec-3 .info-sec-body p+p {
    margin-top: 18px;
  }
}

@keyframes bounceDown {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(12px);
  }
}