@charset "utf-8";

/* 회원가입 이메일 자동완성 */
.autocomplete-suggestions {
  border: 1px solid #ccc;
  max-height: 150px;
  overflow-y: auto;
  position: relative;
  /* 	position: absolute;  */
  background-color: white;
  z-index: 1000;
  width: calc(100% - 22px);
}


* {
  word-break: keep-all;
}

/*----------------------------진료 항목 서브페이지 탭 메뉴----------------------------*/

/* ===== Base ===== */
.tabwrap {
  font-family: Pretendard, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #0C0C0C;
  background: #fff;
  box-sizing: border-box;
  word-break: keep-all;
  min-height: 800px;
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: clamp(80px, 8vw, 140px) 0;
  margin-top: 80px;
}

.tabwrap .inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(40px, 5vw, 100px);
}

/* ===== Left / Right ===== */
.tab-left {
  width: 30%;
  flex: 0 0 auto;
  padding-right: clamp(40px, 8vw, 122px);
  border-right: 1px solid #E6E6E6;
  position: relative;
  z-index: 2;
}

.tab-right {
  flex: 1;
  padding-left: clamp(40px, 8vw, 122px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

.divider {
  display: block;
  width: 2px;
  height: 100%;
  background: #E6E6E6;
  align-self: stretch;
  pointer-events: none;
}

/* ===== Header ===== */
.tab-header {
  margin-bottom: clamp(16px, 3vw, 56px);
}

.eyebrow {
  margin-top: 6px;
  color: var(--Blue-blue-600, #A7C2E8);
  font-size: clamp(16px, 1.5vw, 18px);
  font-weight: 500;
  line-height: 130%;
  letter-spacing: 0.18px;
  text-align: left;
}

.tab_title {
  color: var(--GREY-900, #171717);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: -0.4px;
  text-align: left;
  padding-top: clamp(4px, 0.5vw, 8px);
}

/* ===== Tabs ===== */
.tab-btns {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.5vw, 20px);
  width: 100%;
  max-width: 480px;
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 12px);
  background: none;
  border: none;
  padding: clamp(6px, 1vw, 10px) clamp(8px, 1vw, 12px);
  cursor: pointer;
  outline: none;
  text-align: left;
  border-radius: 6px;
  transition: background .25s ease, transform .25s ease;
}

.tab-btn:hover {
  /* background: rgba(167, 194, 232, 0.1); */
  transform: translateY(-2px);
}

.tab-btn:hover .label {
  position: relative;
}

.tab-btn:hover .label::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 56px;
  height: 1px;
  background-color: #A7C2E8;
}

.tab-btn .num {
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 500;
  line-height: 1.3;
  color: rgba(12, 12, 12, 0.3);
  transition: color .25s ease;
}

.tab-btn .text {
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.3;
  color: rgba(12, 12, 12, 0.3);
  font-weight: 400;
  transition: color .25s ease;
  white-space: nowrap;
}

.tab-btn .underline {
  display: none;
}

/* 한 줄 구성이므로 underline 제거 */

/* ===== Active ===== */
.tab-btn.is-active .label {
  position: relative;
}

.tab-btn.is-active .label::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 56px;
  height: 1px;
  background-color: #A7C2E8;
}

.tab-btn.is-active .num,
.tab-btn.is-active .text {
  color: var(--GREY-900, #171717);
  font-weight: 500;
}

/* ===== Panels ===== */
.tab-panel {
  opacity: 0;
  transform: translateY(12px);
  text-align: left;
  transition: opacity .3s ease, transform .3s ease;
}

.tab-panel.active {
  opacity: 1;
  transform: translateY(0);
}

.tab-panel.anim-in {
  animation: fadeUp .36s ease both;
}

.tab-panel .question {
  color: #6191D4;
  font-size: clamp(24px, 2vw, 32px);
  font-weight: 700;
  line-height: 120%;
  letter-spacing: -0.16px;
  padding-bottom: clamp(12px, 2vw, 20px);
}

.tab-panel .desc {
  color: var(--GREY-600, #5B5B5B);
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: 400;
  line-height: 110%;
  letter-spacing: 0.09px;
}

.tab-panel .desc+.desc {
  margin-top: clamp(6px, 1vw, 8px);
}

/* ===== Tab Image ===== */
.tab-image {
  width: clamp(80px, 10vw, 120px);
  margin: 0 0 clamp(24px, 4vw, 56px) 0;
}

.tab-image img {
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
  display: block;
}

/* ===== Animation ===== */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Responsive ===== */

@media all and (max-width:1440px) {
  .tabwrap .inner {
    width: 93.75%;
  }
}


@media (max-width:1024px) {
  .tabwrap .inner {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(40px, 6vw, 80px);
  }

  .tab-left {
    width: 100%;
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid #E6E6E6;
    padding-bottom: clamp(24px, 4vw, 48px);
  }

  .tab-right {
    width: 100%;
    padding-left: 0;
  }

  .tab-btns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(8px, 2vw, 20px);
    width: 100%;
  }

  .tab-btn {
    justify-content: center;
    text-align: center;
    border-radius: 8px;
  }

  .tab-btn .num,
  .tab-btn .text {
    font-size: clamp(16px, 1.8vw, 20px);
  }
}

@media (max-width:600px) {
  .tab-btns {
    grid-template-columns: repeat(2, 1fr);
  }

  .tab-btn {
    padding: clamp(8px, 2vw, 12px);
  }

  .tabwrap {
    padding: clamp(60px, 10vw, 100px) 0;
  }

  .tab-left,
  .tab-right {
    padding: 0;
  }
}


/* ================================================================================== */


/* 20251020 추가 */
.p_18 {
  color: #171717;
  /* Headline 1/Medium - 18 */
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  /* 23.4px */
  letter-spacing: 0.09px;
}

.blue_p {
  color: var(--Blue-blue-600, #A7C2E8);
}

.h_40 {
  color: var(--GREY-900, #171717);
  /* Title 1/Medium - 40 */
  font-family: Pretendard;
  font-size: clamp(38px, 3.2vw, 40px);
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  /* 40px */
  letter-spacing: -0.4px;

}

.section {
  padding: 120px 0;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.sub_head_tit {
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center
}

.equip_list ul {
  gap: 24px;
  align-items: flex-start;
}

.equip_list ul li {
  width: calc(33.333% - 16px);
}

.equip_img_box {
  border-radius: 8px;
  border: 2px solid var(--GREY-100, #F1F1F1);
  padding: 30px;
  aspect-ratio: 1 / 0.6896;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  transition: all 0.4s ease-in-out;
  position: relative;
  overflow: hidden;
}

.equip_list_li {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.equip_img_box img.equip_img_first {
  width: 243px;
  height: 254px;
  aspect-ratio: 243/254;
}

.p_20 {
  color: var(--GREY-900, #171717);

  /* Headline 1/Medium - 20 */
  font-family: Pretendard;
  font-size: clamp(18px, 3.2vw, 20px);
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  /* 26px */
  letter-spacing: 0.2px;
}

.center {
  text-align: center !important;
}

.equip_badge_box {
  margin-top: 12px;
}

.equip_badge {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.equip_badge::-webkit-scrollbar {
  display: none;
}

.equip_badge {
  scrollbar-width: none;
}

.equip_badge ul {
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
  padding: 2px 0;
}

.equip_badge ul li {
  color: var(--GREY-600, #5B5B5B);
  font-family: Pretendard;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  /* 12px */
  letter-spacing: 0.12px;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--GREY-70, #F6F6F6);
  text-align: center;
  width: fit-content;
}

.equip_badge {
  cursor: grab;
  user-select: none;
}

.equip_badge.dragging {
  cursor: grabbing;
}

.equip_badge.tit_badge {
  display: flex;
  gap: 12px;
  align-items: center;
}

.p_14 {
  color: var(--GREY-900, #171717);
  text-align: center;

  /* Label 1/Normal - Medium */
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  /* 14px */
  letter-spacing: 0.07px;
}

.middle_p {
  font-weight: 500 !important;
}

.blue_p {
  color: #8397B5 !important;
}

.h_36 {
  color: #0C0C0C;
  font-family: Pretendard;
  font-size: 36px;
  font-style: normal;
  line-height: 130%;
  /* 46.8px */
  letter-spacing: -0.36px;
}


.h_34 {
  color: #0C0C0C;
  font-family: Pretendard;
  font-size: 34px;
  font-style: normal;
  line-height: 130%;
  /* 46.8px */
  letter-spacing: -0.36px;
}


.equip_list_li:hover .equip_img_box {
  border: 2px solid var(--Blue-blue-200, #DEECFF);
}

.equip_list_li:hover .equip_hover_img {
  display: block;
  transition: all 0.4s ease-in-out;
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.equip_hover_img {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.02);
  transition: opacity .4s ease,
    visibility .4s step-end,
    transform .4s ease;
  z-index: -1;
  pointer-events: none;
}


#equip_pop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none
}

#equip_pop.on {
  display: block
}

#equip_pop .equip_popup_overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: opacity .38s ease;
  /* -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px); */
}

#equip_pop .equip_popup {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(980px, 92vw);
  max-height: 86vh;
  overflow: auto;
  transform: translate(-50%, -50%) scale(.98);
  background: #fff;
  border-radius: 8px;
  opacity: 0;
  transition: opacity .38s ease, transform .38s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25)
}

#equip_pop.on .equip_popup_overlay {
  opacity: 1
}

#equip_pop.on .equip_popup {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1)
}

#equip_pop .equip_popup_close {
  position: absolute;
  right: 18px;
  top: 14px;
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  font-size: 28px;
  cursor: pointer;
  z-index: 9;
}

#equip_pop .equip_popup_inner {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr;
  gap: 36px;
  /* padding: 32px 28px 28px */
}

@media (max-width:860px) {
  #equip_pop .equip_popup_inner {
    grid-template-columns: 1fr;
    padding: 22px;
    gap: 18px
  }
}

#equip_pop .equip_popup_left {
  background: #E9F2FF;
  /* border-radius: 10px; */
  overflow: hidden
}

#equip_pop .equip_popup_imgwrap {
  padding: 72px 62px;
  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;
}

.equip_pop_hover {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 0;
}


#equip_pop .equip_popup_img {
  width: 245px;
  height: 256px;
  flex-shrink: 0;
  aspect-ratio: 245/256;
  display: block;
  z-index: 1;
}

#equip_pop .equip_popup_right {
  /* padding-right: 68px; */
  padding: 30px 68px 30px 56px;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
}

#equip_pop .equip_popup_tit {
  font: 700 26px/1.35 Pretendard, system-ui;
  /* margin: 6px 0 14px */
}

#equip_pop .equip_popup_desc {
  font: 400 15px/1.7 Pretendard, system-ui;
  color: #444;
  /* margin: 0 0 16px */
}

#equip_pop .equip_popup_badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;
  /* margin: 10px 0 6px; */
  padding: 0;
  list-style: none
}

#equip_pop .equip_popup_badges li {
  font: 500 13px/1 Pretendard, system-ui;
  color: #3b4453;
  padding: 8px 12px;
  border-radius: 999px;
  background: #eef3fb;
  white-space: nowrap
}

body.equip_pop_lock {
  overflow: hidden
}

#equip_popup_title {
  display: flex;
  align-items: center;
  gap: 5px;

}

#equip_popup_title p {
  color: var(--GREY-900, #171717);
  font-family: Pretendard;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  /* 24px */
  letter-spacing: 0.06px;
}

.sub_visual_box {
  width: 100%;
  height: 400px;
  margin-top: 80px;
}

.sub_visual_box .inner {
  align-items: center;
  justify-content: center;
  height: 100%;
}



.white {
  color: #FFF !important;
}

/* 의료진 안내 */
.doc_circle {
  gap: 120px;
  align-items: center;
  justify-content: center;
}

.doc_cir_img {
  width: 610px;
  /* height: 610px; */
  aspect-ratio: 1/1;
  max-width: 100%;
}

.doc_info {
  flex-direction: column;
  gap: 8px;
}

.bold {
  font-weight: 700 !important;
}

.mt12 {
  margin-top: 12px !important;
}

.p_24 {
  color: var(--GREY-700, #444);
  font-family: Pretendard;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  /* 31.2px */
  letter-spacing: 0.24px;
}

.doc_brief {
  flex-direction: column;
  gap: 8px;
}

.gray {
  color: #444 !important;
}

/* 진료시간 */
.map-section .inner.time_inner {
  padding: 64px;
  max-width: 1920px;
  margin: 0 auto;
  gap: clamp(60px, 5vw, 120px);
}

.time_inner .map-left,
.time_inner .map-right {
  flex: unset;
}

.map_tit {
  align-items: center;
  gap: 24px;
}

.time_inner .map-right .time-info strong {
  color: #65758C;
  font-size: 24px;
  width: 105px;
}

.time_inner .map-right .time-info p {
  font-size: 24px;
}

.time_inner .map-right .time-info li {
  gap: 56px;
}

.address.location_p_custom {
  flex-direction: column;
  gap: 20px;
}

.address.location_p_custom span {
  display: block;
}

.location_flex {
  gap: 24px;
}

.location_flex .flex {
  width: calc(100% - 45px - 24px);
  flex-direction: column;
  gap: 20px;
}

.location_flex .flex p {
  color: #0C0C0C;
  font-family: Pretendard;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  /* 30px */
  letter-spacing: 0.1px;
  position: relative;
  padding-left: 13px;
}

.location_flex .flex p::after {
  content: '';
  left: 0;
  top: 12px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #0c0c0c;
  position: absolute;
}


/* 병원둘러보기 */
.around_tab {
  align-items: center;

}

.around_tab_con {
  width: calc(100% / 7);
  color: var(--GREY-900, #C7C7C7);

  /* Headline 1/Medium - 24 */
  font-family: Pretendard;
  font-size: clamp(14px, 3.2vw, 24px);
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  /* 31.2px */
  letter-spacing: 0.24px;
  border-bottom: 1px solid var(--GREY-, #E6E6E6);
  text-align: center;
  padding-bottom: 3px;
  cursor: pointer;
}

.around_tab_con.active {
  color: #171717;
  border-bottom: 2px solid #000;
}

.around_gallery {
  height: 800px;
}


.around_img {
  border-radius: 8px;
  overflow: hidden;
  height: 100%;
  cursor: pointer;
  flex: 1 1 0;
  transition: flex-grow .35s ease;
}

.around_img:first-child {
  flex-grow: 3;
}

.around_img:last-child {
  flex-grow: 1;
}

.around_gallery:has(.around_img:hover) .around_img {
  flex-grow: 1;
}

.around_gallery:has(.around_img:hover) .around_img:hover {
  flex-grow: 3;
}

.around_img>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.around_gallery_wrapper {
  position: relative;
}

.around_gallery {
  display: none;
  opacity: 0;
  transition: opacity .25s ease;
}

.around_gallery.active {
  display: flex;
  gap: 24px;
  opacity: 1;
}

.h130 {
  line-height: 130% !important;
}

.h150 {
  line-height: 150% !important;
}

.gray_p {
  color: #5B5B5B !important;
}


@media all and (max-width: 1400px) {
  .map-section .inner.time_inner {
    padding: 0;
    flex-direction: column;
  }

  .map-section.location_custom .inner {
    flex-direction: column !important;
  }

  .location_custom .map-left {
    width: 100%;
  }
}


@media all and (max-width: 1200px) {
  .equip_list ul li {
    width: calc(50% - 12px);
  }
}

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

  .around_img:first-child,
  .around_img:last-child {
    flex-grow: unset;
    flex: unset;
  }

  .around_gallery.active {
    flex-direction: column;
  }

  .around_gallery {
    height: fit-content;
  }

  .around_img {
    aspect-ratio: 1 / 0.6714;
  }
}

@media all and (max-width: 768px) {
  .equip_list ul li {
    width: calc(100%);
  }

  .equip_list>ul {
    gap: 36px;
  }

}


/* 자궁경 수술 */
.flex_box {
  gap: 24px;
  align-items: center;
}

.flex_side.right {
  width: 586px;
}


.flex_side.left {
  width: calc(100% - 586px - 24px);
}


.flex_txt {
  flex-direction: column;
  gap: 30px;
}

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

  .flex_side.left {
    width: 100%;
    order: 2;
  }

  .flex_side.right {
    width: 100%;
    text-align: center;
    order: 1;
  }

  .flex_box {
    gap: 60px;
  }
}

/* 질성형 */
.flex_white_txt_box {
  flex-direction: column;
  gap: 12px;
}

.flex_white_txt {
  border-radius: 8px;
  border: 1px solid var(--Blue-blue-500, #B8D5FF);
  background: var(--GREY-gr-50, #FAFAFA);
  padding: 56px 24px;
  flex-direction: column;
  gap: 24px;
}

.flex_side.right img {
  border-radius: 8px;
}

.bold_blue_tit p {
  color: #3B6FB9;
}

.gray_tit_box {
  flex-direction: column;
  gap: 20px;
}

.gray_txt {
  gap: 12px;
  align-items: baseline;
}

.p_16 {
  color: var(--GREY-900, #171717);
  font-family: var(--Family-KO, Pretendard);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
}

.bold_gray_tit {
  padding: 8px 12px;
  border-radius: 999px;
  background: #FAFAFA;
}

.bold_gray_tit p {
  color: var(--GREY-600, #5B5B5B);

}

.sub_visual_box p {
  color: var(--Blue-blue-200, #DEECFF) !important;

}

.bg_circle {
  position: absolute;
  bottom: 0;
  left: 0;
}

@media all and (max-width: 768px) {
  .bg_circle {
    display: none;
  }
}


/* 간질성 방광염 */
.no_column {
  flex-direction: unset !important;
}

.no_column .flex_white_txt {
  width: calc(50% - 12px);
}

.flex_white_txt_box.no_column {
  gap: 24px;
}

.mt8 {
  margin-top: 8px !important;
}

/* .clinic-list li {
  align-items: baseline;
} */

@media all and (max-width: 1400px) {
  .gray_txt {
    flex-direction: column;
    align-items: flex-start;
  }

  .gray_txt p br {
    display: none;
  }

}

@media all and (max-width: 1000px) {
  .no_column .flex_white_txt {
    width: 100%;
  }

  .flex_logo_side.right {
    margin: 0 auto;
    order: 1;
  }

  .flex_logo_side.left {
    order: 2;
  }

  .section {
    padding: 80px 0;
  }

}


.root_daum_roughmap .cont {
  display: none;
}

.root_daum_roughmap_landing {
  width: 100% !important;
}


/* 요실금 */
.yosil_custom .flex_white_txt {
  border-radius: 8px;
  background: var(--GREY-gr-50, #FAFAFA);
  border: 0;
}

.yosil_custom .bold_blue_tit p {
  border-radius: 2px;
  background: rgba(194, 219, 255, 0.20);
  width: fit-content;
  padding: 4px 10px;
}

.yosil_custom .bold_gray_tit {
  border-radius: 4px;
  background: var(--Greyscale-Grey-300, #F1F1F1);
  padding: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yosil_custom .bold_gray_tit p {
  color: var(--Greyscale-Grey-600, #8E8E8E);

}

.flex_logo_box {
  align-items: center;
  justify-content: space-between;
}

.p_28 {

  /* Title 1/Bold - 28 */
  font-family: Pretendard;
  font-size: 28px;
  font-style: normal;
  line-height: 100%;
  /* 28px */
  letter-spacing: 0.07px;
}

.long_white_box {
  align-items: center;
  gap: 48px;
}

.long_white_tit {
  width: 153px;
}

.long_txt_list {
  width: calc(100% - 201px);
  border-radius: 8px;
  border: 1px solid var(--Blue-blue-200, #DEECFF);
  background: #FFF;
}

.long_txt_list li {
  width: 25%;
  padding: 22px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 64px;
  color: #3B6FB9;
  /* Headline 1/Medium - 20 */
  font-family: Pretendard;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  /* 26px */
  letter-spacing: 0.2px;
  position: relative;
}

.long_txt_list li::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  background: #F1F1F1;
  height: 48px;
  width: 1px;
}

.long_txt_list li:last-child:after {
  display: none
}

.sangdam_btn a {
  border-radius: 8px;
  border: 1px solid var(--3-b-6-fb-9, #3B6FB9);
  background: #FFF;

  display: inline-flex;

  align-items: center;
  justify-content: space-between;
  height: 44px;
  gap: 12px;
  padding: 0 23.5px;
}

.sangdam_btn a p {
  color: #3B6FB9;

  /* Label 1/Normal - Medium */
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  /* 14px */
  letter-spacing: 0.07px;
}


.yosil_list ul {
  /* gap: 80px; */
  gap: 24px;
}

.yosil_list ul li {
  width: calc(25% - 60px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  justify-content: center;
}

.yosil_list ul li img {
  max-width: 300px;
  max-height: 300px;
  width: 100%;
}

.yosil_transform_custom {
  transform: translateY(-120px);
}


.clinic-list li .text {
  font-size: 18px;
}

.main_body .clinic-list li .text {
  font-size: 24px;
}


@media all and (max-width: 1280px) {
  .yosil_list ul li {
    width: calc(50% - 20px);
  }

  .yosil_list ul {
    gap: 40px;
  }

}

.br_pc_only {
  display: block;
}

@media all and (max-width: 768px) {
  .long_txt_list {
    width: 100%;
  }

  .long_white_box {
    gap: 30px;
  }

  .long_txt_list li {
    font-size: 18px;
  }

  .yosil_list ul li p {
    font-size: 15px !important;
  }

  .br_pc_only {
    display: none;
  }

}


/* 20251028 추가 */

.new_sub_visual_box {
  width: 100%;
  /* height: 880px; */
  aspect-ratio: 1 / 0.45833333;
}

.new_sub_visual_box .inner {
  height: 100%;
  align-items: center;
  justify-content: left;
}

.new_center_tit .p_20 {
  color: #8397B5;
}

.new_center_tit .h_40 {
  color: #6191D4;
  font-weight: 700;
  margin-top: 4px;
}

.blue_bar_svg {
  align-items: center;
  justify-content: center;
  margin: 8px 0;
}

.c_5b5b {
  color: var(--GREY-600, #5B5B5B);
}

.w500 {
  font-weight: 500 !important;
}

.h_56 {
  /* color: #FFF; */
  font-family: Pretendard;
  font-size: 56px;
  font-style: normal;
  font-weight: 500;
  /* letter-spacing: 1.12px; */
}

.new_sub_visual_box p {
  color: var(--Blue-blue-200, #DEECFF);
}

.new_sub_visual_box .sub_head_tit {
  align-items: flex-start;
}

.new_white_tit_box {
  border-radius: 88px;
  border: 1px solid var(--Blue-blue-200, #DEECFF);
  background: var(--GREY-00, #FFF);
  padding: 20px 30px;

  align-items: center;
  gap: 40px;
}

.dot_txt_box {
  flex-direction: column;
  gap: 5px;
}

.dot_txt_box p {
  position: relative;
  padding-left: 13px;
}

.dot_txt_box p:after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #171717;
}

.row_reverse {
  flex-direction: row-reverse;
}

/* .row_reverse .flex_side.left {
  text-align: end;
} */

.center_banner {
  width: 100%;
  min-height: 384px;
  aspect-ratio: 1 / 0.2;
}

.center_banner.hpv {
  background: url('/img/hpv_banner.jpg') no-repeat center / cover;
}

.center_banner .inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg_circle.big {
  right: 0;
  left: unset;
  top: 0;
  bottom: unset;
}

.list_flex_box.three ul {
  gap: 24px;
  align-items: stretch;
}

.hpv_list li {
  flex-direction: column;
  gap: 24px;
  align-items: center;
  justify-content: center;

  width: calc(33.333% - 16px);
}

/* .flex_box.flex.wide .flex_side.right {
  width: 660px;
}

.flex_box.flex.wide .flex_side.left {
  width: calc(100% - 660px - 120px);
} */

.center_banner p {
  color: #DEECFF;
}

.center_banner p.p_18 {
  font-weight: 400;
}

.clinic-section.wide .clinic-list {
  width: 708px;
}

.cloud_txt_circle ul {
  gap: 8px;
  align-items: center;
  width: 100%;
}

.cloud_txt_circle ul li {
  border-radius: 88px;
  border: 1px solid var(--Blue-blue-200, #DEECFF);
  background: var(--GREY-00, #FFF);
  color: #3B6FB9;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  /* 20.8px */
  letter-spacing: 0.16px;
  width: calc(33.333% - 6px);
  padding: 20px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cloud_txt_circle.blue ul li {
  background: var(--Blue-blue-700, #8397B5);
  color: var(--GREY-00, #FFF);
  height: 40px;
}


.cloud_txt_circle {
  width: 100%;
  margin: 8px 0;
}

.dot_p p {
  position: relative;
  padding-left: 22px;
}

.dot_p p::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #3B6FB9;
  opacity: 0.2;
}


@media all and (max-width: 1440px) {
  .cloud_txt_circle ul li {
    width: fit-content;
    padding: 20px 24px;
  }

  .cloud_txt_circle ul {
    flex-direction: column;
    align-items: end;
  }
}

@media all and (max-width: 1400px) {
  .new_white_tit_box {
    border-radius: 60px;
  }
}

@media all and (max-width: 1200px) {
  .flex_box.flex.wide .flex_side.right {
    width: 100%;
  }

  .flex_box.flex.wide .flex_side.left {
    width: 100%;
  }
}


@media all and (max-width: 1200px) {
  .hpv_list li {
    width: calc(50% - 12px);
  }
}

@media (max-width: 1024px) {
  .clinic-section.wide .clinic-list {
    width: 100%;
  }
}

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

  .hpv_list li,
  .cloud_txt_circle ul li {
    width: 100%;
  }

  .flex_txt.flex p br,
  .center_banner p br,
  .new_center_tit p br {
    display: none;
  }
}


/* 20251030 추가 */
.list_flex_box.four ul {
  align-items: stretch;
  gap: 24px;
}

.new_intro_list li {
  flex-direction: column;
  gap: 24px;
  border-radius: 50%;
  /* background: rgba(209, 222, 241, 0.20); */
  width: calc(25% - 18px);
  aspect-ratio: 1/1;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  background: rgba(209, 222, 241, 0.20);
  border: 1px solid rgba(209, 222, 241, 0.4);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.3),
    0 6px 24px rgba(0, 0, 0, 0.1);
}

/* .new_intro_list li::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(-45deg,
      rgba(255, 255, 255, 0.25) 0%,
      rgba(255, 255, 255, 0.05) 100%);
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: screen;
} */

@media all and (max-width: 1400px) {
  .new_intro_list li {
    width: calc(50% - 12px);
    max-width: 80%;
    margin: 0 auto;
  }
}

@media all and (max-width: 768px) {
  .new_intro_list li {
    width: 100%;
  }
}


/* 20251105 추가 */
.list_flex_box.two ul {
  gap: 24px;
}

.list_flex_box.two ul li {
  width: calc(50% - 12px);
}

.new_blue_box li {
  flex-direction: column;
  gap: 12px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(59, 111, 185, 0.40) 0%, #3B6FB9 100%);
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
  padding: 24px;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  height: 100%;
  text-align: center;
}

.list_flex_box.three ul li {
  width: calc(33.333% - 16px);
}


.gray_txt .bold_gray_tit:not(.yosil_custom .bold_gray_tit) {
  padding: 8px 12px;
  width: 200px;
  text-align: center;
  border-radius: 999px;
  background: var(--Blue-blue-700, #8397B5);
}

.gray_txt .bold_gray_tit p:not(.yosil_custom .bold_gray_tit p) {
  color: #fff;
}

.pc120 {
  margin-top: 120px;
}

.mt28 {
  margin-top: 28px;
}

.gray_txt.flex .p_16.h150.middle_p {
  width: calc(100% - 200px - 12px);
}

@media all and (max-width: 1400px) {
  .gray_txt.flex .p_16.h150.middle_p {
    width: 100%;
  }
}

@media all and (max-width: 1200px) {
  .list_flex_box.two ul li {
    width: 100%;
  }

  .list_flex_box.two ul {
    gap: 30px;
  }

  /* .pc120 {
  margin-top: 60px;
} */

}

@media all and (max-width: 900px) {
  .list_flex_box.three ul li {
    width: calc(50% - 12px);
  }
}

@media all and (max-width: 768px) {
  .list_flex_box.three ul li {
    width: 100%;
  }
}


/* 20251106 추가 */
.list_flex_box.five ul {
  gap: 24px;
  align-items: stretch;
}

.list_flex_box.five ul li {
  width: calc(20% - 20px);
}

.new_gray_box li {
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(131, 151, 181, 0.40) 0%, #8397B5 100%);
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
  /* min-height: 172px; */
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 28px 24px;
  gap: 24px;
  text-align: center;
}

.mt24 {
  margin-top: 24px;
}

.cloud_flex_box {
  align-items: flex-start;
  gap: 24px;
}

.cloud_flex_box .left {
  flex-direction: column;
  padding-top: 24px;
  width: 464px;
}

.cloud_flex_box .right {
  width: calc(100% - 488px);
}

.cloud_list li {
  border-radius: 8px;
  background: rgba(209, 222, 241, 0.20);
  padding: 0 31px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
  color: var(--GREY-600, #5B5B5B);
  font-size: clamp(18px, 3.2vw, 20px);
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  /* 20px */
}

.cloud_list.num_cloud li {
  color: var(--GREY-600, #5B5B5B);
font-family: Pretendard;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 130%; /* 23.4px */
letter-spacing: 0.18px;
}

.cloud_list.num_cloud li {
  align-items: center;
  height: auto;
  gap: 24px;
  padding: 24px;

}

.cloud_list.num_cloud {
  align-items: stretch;
}

.cloud_list.num_cloud li span {
  width: 51px;
  color: var(--Blue-blue-700, #8397B5);
text-align: center;

/* Title 1/Medium - 40 */
font-family: Pretendard;
font-size: 40px;
font-style: normal;
font-weight: 500;
line-height: 100%; /* 40px */
letter-spacing: -0.4px;
}

.cloud_list.num_cloud li p {
  width: calc(100% - 75px);
  color: #5B5B5B;
}


.new_gray_txt_list ul {
  gap: 8px;
  align-items: stretch;
}

.new_gray_txt_list ul li {
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(131, 151, 181, 0.40) 0%, #8397B5 100%);
  padding: 24px;
  width: calc(50% - 4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--GREY-00, #FFF);
  text-align: center;

  /* Headline 1/Medium - 20 */
  font-family: Pretendard;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  /* 26px */
  letter-spacing: 0.2px;
}


.new_check_tit_box {
  flex-direction: column;
  gap: 8px;
}

.blue_check_tit {
  align-items: center;
  gap: 8px;
  color: var(--3-b-6-fb-9, #3B6FB9);
  font-family: Pretendard;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  /* 30px */
}

.new_blue_circlr_list {
  width: 100%;
}

.new_blue_circlr_list ul {
  gap: 8px;
  align-items: stretch;
}

.new_blue_circlr_list ul li {
  border-radius: 999px;
  border: 1px solid var(--Blue-blue-500, #B8D5FF);
  background: var(--GREY-00, #FFF);
  padding: 8px;
  width: calc(33.333% - 6px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--Blue-blue-700, #8397B5);
  text-align: center;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  /* 24px */
}

.pyo_flex_box {
  align-items: flex-start;
  gap: 24px;
}

.pyo_flex_box .flex_tit {
  width: 342px;
}

.pyo_flex_box .pyo_img {
  width: calc(100% - 366px);
}

.pyo_flex_box .pyo_img img {
  width: 100%;
}

.blue_system_box ul {
  border-radius: 8px;
  border: 1px solid var(--Blue-blue-500, #B8D5FF);
  background: var(--GREY-00, #FFF);
  align-items: stretch;
}

.blue_system_box ul li {
  padding: 28px 56px;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: calc(25%);
  position: relative;
}

.blue_system_box ul li:after {
  position: absolute;
  content: '';
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 1px;
  height: 60%;
  background: #B8D5FF;
}

.blue_system_box ul li:last-child::after {
  display: none;
}

.img_flex_box {
  align-items: center;
  gap: 24px;
}

.img_flex_box .img {
  width: 622px;
  margin: 0 auto;
}
.img_flex_box .img img {
  width: 100%;
}

.img_flex_box .txt {
  width: calc(100% - 646px);
}


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

  .blue_system_box ul li {
    width: 50%;
  }

  .list_flex_box.five ul li {
    width: calc(33.333% - 16px);
  }

  .pyo_flex_box .pyo_img,
  .pyo_flex_box .flex_tit,
  .img_flex_box .txt 
   {
    width: 100%;
  }
}

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

  .cloud_flex_box .left,
  .cloud_flex_box .right {
    width: 100%;
  }

  .cloud_flex_box {
    gap: 60px;
  }
}

@media all and (max-width: 768px) {
  .list_flex_box.five ul li {
    width: calc(50% - 12px);
  }

  .new_blue_circlr_list ul li,
  .new_gray_txt_list ul li,
  .blue_system_box ul li,
  .img_flex_box .img
   {
    width: 100%;
  }

  .blue_system_box ul li::after {
    display: none;
  }

  .img_flex_box {
    gap: 30px;
  }

}