@charset "UTF-8";
/* ============================================================
   진료시간 안내 (dental.php?page=6) 전용 스타일
   참고 디자인: https://www.wanplant.com/html/introduce/time.html
   - 원본은 아이콘 웹폰트(icon_font) 사용 → 이 사이트에는 폰트가 없어
     동일한 아이콘을 인라인 SVG(data URI)로 재현함.
   - 모든 선택자를 .info_time 하위로 한정하여 전역 스타일 오염 방지.
   ============================================================ */

/* ---------- 폰트: S-CoreDream (원본과 동일한 공개 CDN 사용) ---------- */
@font-face {
  font-family: "S-CoreDream";
  font-weight: 400;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff")
    format("woff");
}
@font-face {
  font-family: "S-CoreDream";
  font-weight: 500;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff")
    format("woff");
}
@font-face {
  font-family: "S-CoreDream";
  font-weight: 600;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff")
    format("woff");
}
@font-face {
  font-family: "S-CoreDream";
  font-weight: 700;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff")
    format("woff");
}

/* ---------- 아이콘 폰트: 원본(icon_font)과 동일 (프로젝트에 파일 포함) ---------- */
@font-face {
  font-family: "icon_font";
  font-display: block;
  src: url("../fonts/icon_font.woff2") format("woff2"),
    url("../fonts/icon_font.woff") format("woff");
}

.info_time {
  --color_main: #253771; /* 네이비 */
  --color_sub: #f47a36; /* 주황 */
  --color_pen: #ffe580; /* 형광펜 노랑 */
  --color_kakao: #fae80c; /* 카카오 노랑 */
  padding: 90px 20px 100px;
  box-sizing: border-box;
  color: #222;
  font-family: "S-CoreDream", "Noto Sans KR", "Malgun Gothic", sans-serif;
  line-height: 1.5;
}
.info_time * {
  box-sizing: border-box;
}
.info_time .content_wrap.center {
  text-align: center;
}
.info_time .inwrap {
  max-width: 1200px;
  margin: 0 auto;
}

/* ---------- 제목 ---------- */
.info_time .title {
  position: relative;
}
.info_time .title h2 {
  font-size: 50px;
  font-weight: 700;
  line-height: 1.2;
  color: #333;
  margin: 0;
}
.info_time .title h2 em {
  display: none;
}
.info_time .title h5 {
  font-size: 24px;
  font-weight: 400;
  color: #181818;
  margin: 10px 0 0;
}
/* 부제 아래 아래방향 화살표(쉐브론) — 위아래로 계속 움직임 */

@keyframes infoTimeArrow {
  0%,
  100% {
    bottom: 24px;
    opacity: 0.4;
  }
  50% {
    bottom: 8px;
    opacity: 1;
  }
}

/* ---------- 진료시간 박스 ---------- */
.info_time .time {
  position: relative;
  background: #f4f4f4;
  margin-top: 90px;
  padding: 60px;
}
/* 상단 주황 원 + 흰 시계 아이콘 (원본 icon_font 글리프 \E828 그대로 사용) */
.info_time .time::before {
  content: "\E828";
  font-family: "icon_font";
  font-size: 63px;
  font-weight: 400;
  display: block;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--color_sub);
  color: #fff;
  line-height: 120px;
  text-align: center;
  position: absolute;
  left: 50%;
  margin-left: -60px;
  margin-top: -120px;
}
.info_time .time h4 {
  padding-top: 40px;
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4 !important;
  color: #222;
}

/* 형광펜 강조 (마우스 오버 시 노란 밑줄이 채워짐) */
.info_time .pen {
  font-style: normal;
  position: relative;
  display: inline-block;
  z-index: 1;
}
.info_time .pen::after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  bottom: 20%;
  width: 0;
  height: 50%;
  background-color: var(--color_pen);
  z-index: -1;
  transition: width 0.5s;
}
.info_time .time:hover .pen {
  color: var(--color_main);
}
.info_time .time:hover .pen::after {
  width: 100%;
}

/* 요일별 진료시간 목록 */
.info_time .time dl {
  text-align: center;
  font-size: 23px;
  line-height: 1.6;
  margin: 40px 0 0;
  background: #fff;
  padding: 60px 20px;
  color: #222;
  font-weight: 600;
}
.info_time .time dl dt {
  width: 104px;
  display: inline-block;
  text-align: justify;
  text-align-last: justify;
  margin-right: 20px;
  font-weight: 600;
  vertical-align: top;
  white-space: nowrap;
}
.info_time .time dl dd {
  display: inline-flex;
  width: 330px;
  text-align: left;
  margin: 0;
  vertical-align: top;
  white-space: nowrap;
  align-items: center;
  gap: 5px;
}
.info_time .time dl dd span {
  font-size: 0.7em;
}
.info_time .time dl p {
  text-align: center;
  font-size: 0.8em;
  font-weight: 400;
  margin: 20px 0 0;
}
.info_time .color_main {
  color: var(--color_main);
}
.info_time .fontw_500 {
  font-weight: 500;
}
/* 데스크톱: 모바일 전용 개행은 숨김 (h4의 "(오후 8시까지)" 붙이기, dl 2단 유지) */
.info_time br.mobile {
  display: none;
}

/* ---------- 하단 상담 버튼 ---------- */
.info_time .counsel {
  padding: 50px 0 0;
  margin: 0;
  list-style: none;
}
.info_time .counsel li {
  display: inline-block;
  margin: 0 6px;
  vertical-align: top;
}
.info_time .counsel li a {
  font-size: 26px;
  background: #03C75A;
  color: #fff;
  display: inline-block;
  width: 330px;
  height: 70px;
  line-height: 70px;
  border-radius: 100px;
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
  font-weight: 600;
}
.info_time .counsel li a::before {
  content: "";
  display: inline-block;
  width: 34px;
  height: 34px;
  margin-right: 12px;
  vertical-align: middle;
  margin-top: -4px;
  background: no-repeat center / contain;
}
/* 1) 온라인 상담 - 네이비 + 말풍선 */
.info_time .counsel li:nth-child(1) a {
  background: #6CE1F8;
}
.info_time .counsel li:nth-child(1) a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
/* 2) 전화 - 주황 + 전화기 */
.info_time .counsel li:nth-child(2) a::before {
  background-image: url("https://white2ydp.com/renew/img/tail_naver.svg");
}
/* 3) 카카오 - 노랑 + 진한 말풍선 */
.info_time .counsel li:last-child a {
  background: var(--color_kakao);
  color: #3b2b30;
  letter-spacing: -1px;
}
.info_time .counsel li:last-child a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233b2b30'%3E%3Cpath d='M12 3C6.48 3 2 6.58 2 11c0 2.83 1.87 5.31 4.68 6.72-.2.71-.73 2.65-.84 3.06-.13.51.19.5.4.37.16-.11 2.6-1.77 3.66-2.49.68.1 1.38.15 2.1.15 5.52 0 10-3.58 10-8S17.52 3 12 3z'/%3E%3C/svg%3E");
}

/* ============================================================
   모바일 (max-width: 767px)
   ============================================================ */
@media screen and (max-width: 767px) {
  .info_time {
    padding: 50px 15px 60px;
  }
  .info_time .title {
    padding-bottom: 46px;
  }
  .info_time .title h2 {
    font-size: 28px;
  }
  .info_time .title h5 {
    font-size: 16px;
  }

  .info_time .time {
    margin-top: 10px;
    padding: 20px 15px;
  }
  .info_time .time::before {
    width: 70px;
    height: 70px;
    /* 아이콘 폰트 글리프이므로 원 크기에 맞춰 글자 크기·행높이도 함께 줄여야 함 */
    font-size: 36px;
    line-height: 70px;
    margin-left: -35px;
    margin-top: -50px;
  }
  .info_time .time h4 {
    padding-top: 45px;
    font-size: 17px;
  }

  .info_time .time dl {
    font-size: 16px;
    padding: 24px 10px;
    margin-top: 20px;
  }
  /* 원본과 동일하게 모바일에서도 고정폭 2단 유지 (자간을 좁혀 한 줄에 들어가게) */
  .info_time .time dl dt {
    width: 62px;
    margin-right: 0;
    padding-right: 10px;
    letter-spacing: -2px;
  }
  .info_time .time dl dd {
    width: 200px;
    letter-spacing: -1px;
  }
  /* 모바일: 모든 개행 살려 한 줄에 요일 하나씩 */
  .info_time br.mobile {
    display: block;
  }

  .info_time .counsel {
    padding: 30px 0 0;
  }
  .info_time .counsel li {
    display: block;
    margin: 10px auto 0;
    width: 270px;
  }
  .info_time .counsel li a {
    width: 100%;
    font-size: 20px;
    height: 54px;
    line-height: 54px;
  }
  .info_time .counsel li a::before {
    width: 26px;
    height: 26px;
    margin-right: 8px;
  }
}