@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.eventCard {
  opacity: 0;
  animation: cardShow 3s ease 0.3s forwards;
}

@keyframes cardShow {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
body .logo .custom-logo-link {
  max-width: 343px;
  width: 100%;
  display: inline-block;
}
@media (max-width: 768px) {
  body .logo .custom-logo-link {
    max-width: 200px;
  }
}
body .logo .custom-logo-link img {
  width: 100%;
  height: auto;
}
body .site-header {
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  background: rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(6px);
}
body header .designhuHeader > li > a {
  white-space: nowrap;
}
body header .designhuHeader > li > a span {
  font-family: inherit;
  transition: all 0.3s ease-in-out;
}
body header .designhuHeader li.current-menu-item > a,
body header .designhuHeader li.current_page_parent > a {
  color: #42809D !important;
}
body header .designhuHeader li.current-menu-item > a span,
body header .designhuHeader li.current_page_parent > a span {
  color: #42809D !important;
}
body header .designhuHeader li.current-menu-item > a > .line::before,
body header .designhuHeader li.current_page_parent > a > .line::before {
  opacity: 0;
  background-image: linear-gradient(to right, #FFF, #FFF 1px, transparent 1px, transparent 3px);
  opacity: 0;
}
body header .designhuHeader li.current-menu-item > a > .line::after,
body header .designhuHeader li.current_page_parent > a > .line::after {
  left: 0;
  width: 100%;
  background-color: #42809D;
}
body header .designhuHeader > li.current_page_item > a,
body header .designhuHeader > li.current-menu-item > a {
  color: #42809D;
}
body header .designhuHeader > li.current_page_item > a span,
body header .designhuHeader > li.current-menu-item > a span {
  color: #42809D;
}
body header .designhuHeader > li.current_page_item > a > .line::before,
body header .designhuHeader > li.current-menu-item > a > .line::before {
  opacity: 0;
  background-image: linear-gradient(to right, #FFF, #FFF 1px, transparent 1px, transparent 3px);
  opacity: 0;
}
body header .designhuHeader > li.current_page_item > a > .line::after,
body header .designhuHeader > li.current-menu-item > a > .line::after {
  left: 0;
  width: 100%;
  background-color: #42809D;
}

body header #webNavigation {
  display: inline-block;
}
@media (max-width: 768px) {
  body header #webNavigation {
    display: none;
  }
}
body header #webNavigation .designhuHeader {
  position: relative;
  display: flex;
  gap: 29px;
  align-items: center;
}
body header #webNavigation .designhuHeader > li {
  font-size: 1em;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0.16px;
}
body header #webNavigation .designhuHeader > li > a {
  font-size: 1em;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  position: relative;
}
body header #webNavigation .designhuHeader > li > a:hover {
  color: #42809D;
}
body header #webNavigation .designhuHeader > li > a:hover > span > span {
  color: #42809D;
}
body header #webNavigation .designhuHeader li.menu-item-has-children {
  position: relative;
}
body header #webNavigation .designhuHeader li.menu-item-has-children > nav {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 150px;
  background: white;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  display: grid;
  grid-template-rows: 0fr;
  transition: all 0.3s ease-in-out;
  margin-top: 20px;
}
body header #webNavigation .designhuHeader li.menu-item-has-children > nav::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 20px;
}
body header #webNavigation .designhuHeader li.menu-item-has-children > nav > ul {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(34, 34, 34, 0.85);
  box-shadow: 170px 73px 52px 0 rgba(34, 34, 34, 0), 109px 47px 47px 0 rgba(34, 34, 34, 0.01), 61px 26px 40px 0 rgba(34, 34, 34, 0.03), 27px 12px 30px 0 rgba(34, 34, 34, 0.06), 7px 3px 16px 0 rgba(34, 34, 34, 0.06);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  transition: all 0.3s ease-in-out;
  padding-left: 16px;
  padding-right: 16px;
  gap: 16px;
  width: -moz-fit-content;
  width: fit-content;
}
body header #webNavigation .designhuHeader li.menu-item-has-children > nav > ul > li {
  width: 100%;
  font-size: 1em;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0.16px;
  padding: 12px 8px 8px 8px;
}
body header #webNavigation .designhuHeader li.menu-item-has-children > nav > ul > li > a {
  display: inline-block;
  font-size: 1em;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: #DEDFFB;
  text-align: center;
  width: 100%;
  transition: all 0.3s ease-in-out;
  white-space: nowrap;
}
body header #webNavigation .designhuHeader li.menu-item-has-children > nav > ul > li > a > span > span {
  font-size: 1em;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: #DEDFFB;
  transition: all 0.3s ease-in-out;
  font-family: inherit;
}
body header #webNavigation .designhuHeader li.menu-item-has-children > nav > ul > li > a:hover > span > span {
  color: #42809D;
}
body header #webNavigation .designhuHeader li.menu-item-has-children.open > nav {
  grid-template-rows: 1fr;
}
body header #webNavigation .designhuHeader li.menu-item-has-children.open > nav > ul {
  padding-top: 8px;
  padding-bottom: 8px;
}
body header #webNavigationM {
  display: flex;
  width: 50%;
  position: absolute;
  right: -100%;
  flex-direction: column;
  height: calc(100vh - 100px);
  overflow-y: auto;
  transition: all 0.5s cubic-bezier(0.16, 0.5, 0.43, 1);
  z-index: 9999;
  background-color: white;
  top: 100%;
  background-color: rgba(34, 34, 34, 0.85);
  padding: 40px 16px 60px 16px;
}
@media (max-width: 768px) {
  body header #webNavigationM {
    width: 100%;
    height: calc(100vh - 85px);
  }
}
body header #webNavigationM .designhuHeader {
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
body header #webNavigationM .designhuHeader li.menu-item-has-children {
  position: relative;
}
body header #webNavigationM .designhuHeader li.menu-item-has-children > nav {
  background: white;
  display: grid;
  grid-template-rows: 0fr;
  transition: all 0.3s ease-in-out;
  position: relative;
  border-radius: 0;
  box-shadow: none;
  margin-top: 0;
}
body header #webNavigationM .designhuHeader li.menu-item-has-children > nav > ul {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
body header #webNavigationM .designhuHeader li.menu-item-has-children > nav > ul > li {
  width: 100%;
  padding: 0 16px;
}
body header #webNavigationM .designhuHeader li.menu-item-has-children > nav > ul > li > a {
  white-space: initial;
  width: 100%;
  padding: 12px 16px;
  text-align: left;
}
body header #webNavigationM .designhuHeader li.menu-item-has-children.open > nav {
  grid-template-rows: 1fr;
}
body header #webNavigationM .designhuHeader > li {
  width: 100%;
  font-size: 1em;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0.16px;
}
body header #webNavigationM .designhuHeader > li > a {
  font-size: 1em;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  padding: 12px 8px 8px 8px;
  color: white;
}
body header #webNavigationM .designhuHeader > li > a > span > span {
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: white;
}
body header #webNavigationM.active-menu_m {
  right: 0;
}
body header.scrolled {
  filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.1));
}
body header.awake {
  transform: translateY(0);
}
@media (max-width: 1100px) {
  body header.awake {
    transform: translateY(0);
  }
}
body header.sleep {
  transform: translateY(-100%);
}

.hamberger {
  width: 120px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1000;
  transition: cubic-bezier(0.25, 0.1, 0.25, 1) 0.5s;
  margin: 0 auto;
  gap: 18px;
}
@media (max-width: 1100px) {
  .hamberger {
    width: 76px;
    gap: 8px;
  }
}
.hamberger .bar {
  display: block;
  width: 20px;
  height: 1px;
  border-radius: 9999px;
  background-color: #545860;
  transition: all 0.2s ease-in-out;
}

body.home .hamberger .bar {
  background-color: #29ADB1;
}

.hamberger.active {
  transition-delay: 0.4s;
}

.hamberger.active > .bar:nth-child(2) {
  width: 0;
}

.hamberger.active > .bar:nth-child(1),
.hamberger.active > .bar:nth-child(3) {
  transition-delay: 0.2s;
}

.hamberger.active > .bar:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}

.hamberger.active > .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/*
*連結底線
*/
a.lineBottom,
button.lineBottom {
  padding-top: 5px;
  padding-bottom: 5px;
  position: relative;
  transition: all 0.5s cubic-bezier(0.43, 0.05, 0.17, 1);
}
a.lineBottom .line,
button.lineBottom .line {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.5s cubic-bezier(0.43, 0.05, 0.17, 1);
}
a.lineBottom .line:before, a.lineBottom .line:after,
button.lineBottom .line:before,
button.lineBottom .line:after {
  content: "";
  display: block;
  position: absolute;
  top: calc(100% + 6px);
  bottom: 0;
  height: 1px;
  transition: all 0.5s cubic-bezier(0.43, 0.05, 0.17, 1);
}
a.lineBottom .line::before,
button.lineBottom .line::before {
  left: 0;
  right: 0;
  width: 100%;
  height: 2px;
}
a.lineBottom .line::after,
button.lineBottom .line::after {
  right: 0;
  width: 0;
  background: #42809D;
}
a.lineBottom:hover .line::before,
button.lineBottom:hover .line::before {
  opacity: 0;
  background-image: linear-gradient(to right, #FFF, #FFF 1px, transparent 1px, transparent 3px);
  opacity: 0;
}
a.lineBottom:hover .line::after,
button.lineBottom:hover .line::after {
  left: 0;
  width: 100%;
  background-color: #42809D;
}/*# sourceMappingURL=main.css.map */


.web_nav ul.designhuHeader {
  width: 100%;
  height: 104px;
  display: flex;
  align-items: center;
  align-self: stretch;

  border-top: 1px solid rgba(66, 128, 157, 0.15);
  border-bottom: 1px solid rgba(66, 128, 157, 0.15);
  border-left: 1px solid rgba(66, 128, 157, 0.15);
}
.web_nav li.accordion-item-li {
  display: flex;
  padding: 40px 24px;
  align-items: center;
  /* flex: 1 0 0; */
  max-height: 104px;

  border-left: 1px solid rgba(66, 128, 157, 0.15);
}
.designhuHeader__schedule {
  margin-left: -30px;
}
body header .designhuHeader > li > a span {
  color: var(--Color-Gray-01, #1C1917);

  /* btn 01 */
  font-family: "Noto Sans TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  letter-spacing: 2px;
}

.footer_nav ul.designhuFooter {
  display: flex;
  align-items: center;
  gap: 24px;
}

#footer_nav .designhuFooter li {
  display: flex;
  align-items: center;
  gap: 12px;
}

#footer_nav .designhuFooter li::before {
  content: "";
  display: block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle opacity='0.2' cx='8' cy='8' r='8' fill='url(%23footer-dot-gradient)'/%3E%3Ccircle cx='8' cy='8' r='2' fill='%2342809D'/%3E%3Cdefs%3E%3ClinearGradient id='footer-dot-gradient' x1='0' y1='8' x2='16' y2='8' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.5' stop-color='%2342809D'/%3E%3Cstop offset='1' stop-color='%23F4F7F7'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

#footer_nav .designhuFooter li > a span {
  color: var(--Color-Gray-01, #1C1917);
  text-align: right;
  font-family: "Noto Sans TC";
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 22.5px */
  letter-spacing: 2px;
}

.doctorColumnProfile__dataItem::before {
  content: "";
  display: block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle opacity='0.2' cx='8' cy='8' r='8' fill='url(%23footer-dot-gradient)'/%3E%3Ccircle cx='8' cy='8' r='2' fill='%2342809D'/%3E%3Cdefs%3E%3ClinearGradient id='footer-dot-gradient' x1='0' y1='8' x2='16' y2='8' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.5' stop-color='%2342809D'/%3E%3Cstop offset='1' stop-color='%23F4F7F7'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.doctorColumnCareerList__item::before {
  content: "";
  display: block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle opacity='0.2' cx='8' cy='8' r='8' fill='url(%23footer-dot-gradient)'/%3E%3Ccircle cx='8' cy='8' r='2' fill='%2342809D'/%3E%3Cdefs%3E%3ClinearGradient id='footer-dot-gradient' x1='0' y1='8' x2='16' y2='8' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.5' stop-color='%2342809D'/%3E%3Cstop offset='1' stop-color='%23F4F7F7'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.doctorColumnSection-more-button::after {
  content: "";
  display: block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle opacity='0.2' cx='8' cy='8' r='8' fill='url(%23footer-dot-gradient)'/%3E%3Ccircle cx='8' cy='8' r='2' fill='%2342809D'/%3E%3Cdefs%3E%3ClinearGradient id='footer-dot-gradient' x1='0' y1='8' x2='16' y2='8' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.5' stop-color='%2342809D'/%3E%3Cstop offset='1' stop-color='%23F4F7F7'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

#breadcrumbs {
  position: relative;
  z-index: 50;
}
#breadcrumbs > span {
  display: flex;
  align-items: center;
  gap: 8px;
}
#breadcrumbs span {
  color: var(--Color-Gray-03, #57534E);

  /* small */
  font-family: "Noto Sans TC";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 1px;
}
#breadcrumbs span:last-child {
  color: var(--Steel-Primary, #42809D);
}

.overseasReserve__noticeDesc-block::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 3.5C8 3.36739 7.94732 3.24021 7.85355 3.14645C7.75979 3.05268 7.63261 3 7.5 3C7.36739 3 7.24021 3.05268 7.14645 3.14645C7.05268 3.24021 7 3.36739 7 3.5V9C7.00003 9.08813 7.02335 9.17469 7.06761 9.25091C7.11186 9.32712 7.17547 9.39029 7.252 9.434L10.752 11.434C10.8669 11.4961 11.0014 11.5108 11.127 11.4749C11.2525 11.4391 11.3591 11.3556 11.4238 11.2422C11.4886 11.1288 11.5065 10.9946 11.4736 10.8683C11.4408 10.7419 11.3598 10.6334 11.248 10.566L8 8.71V3.5Z' fill='%2342809D'/%3E%3Cpath d='M8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.84344 15.1571 5.87827 16 8 16ZM15 8C15 9.85652 14.2625 11.637 12.9497 12.9497C11.637 14.2625 9.85652 15 8 15C6.14348 15 4.36301 14.2625 3.05025 12.9497C1.7375 11.637 1 9.85652 1 8C1 6.14348 1.7375 4.36301 3.05025 3.05025C4.36301 1.7375 6.14348 1 8 1C9.85652 1 11.637 1.7375 12.9497 3.05025C14.2625 4.36301 15 6.14348 15 8Z' fill='%2342809D'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ========================================
   CF7 醫療諮詢表單
======================================== */

/* 所在區域 */
.medicalContactForm__regionRow {
  width: 100%;
}

.medicalContactForm__choice--region .wpcf7-form-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.medicalContactForm__choice--region .wpcf7-list-item {
  margin: 0;
}

.medicalContactForm__choice--region .wpcf7-list-item > label {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}

.medicalContactForm__choice--region .wpcf7-list-item:first-child > label {
  min-width: 320px;
}

.medicalContactForm__choice--region .wpcf7-list-item:last-child > label {
  min-width: 430px;
}

/* CF7 原本的文字容器 */
.medicalContactForm__choice--region .wpcf7-list-item-label {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: #57534e;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 1px;
}

/* Radio */
.medicalContactForm__choice--region input[type="radio"] {
  position: relative;
  width: 14px;
  height: 14px;
  margin: 0 10px 0 0;
  flex: 0 0 14px;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 50%;
  background: #f4f7f7;
  cursor: pointer;
}

.medicalContactForm__choice--region input[type="radio"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #42809d;
  opacity: 0;
  transform: translate(-50%, -50%);
}

.medicalContactForm__choice--region input[type="radio"]:checked::after {
  opacity: 1;
}

/* JS 搬進 radio label 裡的區域欄位 */
.medicalContactForm__regionDetail {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  margin-left: 4px;
  color: #a8a29e;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 1px;
  white-space: nowrap;
}

.medicalContactForm__regionDetail .wpcf7-form-control-wrap {
  display: inline-flex;
  width: auto;
  margin: 0;
}

/* 縣市／國家／城市 */
.medicalContactForm__regionTextInput {
  width: 62px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  color: #57534e !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: 1px !important;
}

.medicalContactForm__regionTextInput[name="overseas-country"] {
  width: 50px !important;
}

.medicalContactForm__regionTextInput[name="overseas-city"] {
  width: 58px !important;
}

.medicalContactForm__regionTextInput::placeholder {
  color: #d6d3d1 !important;
  opacity: 1;
}

.medicalContactForm__regionTextInput:disabled {
  cursor: default;
  color: #d6d3d1 !important;
  -webkit-text-fill-color: #d6d3d1;
  opacity: 1;
}

.medicalContactForm__regionBracket,
.medicalContactForm__regionDivider {
  color: #a8a29e;
}

/* 未選中的卡片內輸入內容稍微淡一點 */
.medicalContactForm__choice--region .wpcf7-list-item:not(.is-active) .medicalContactForm__regionDetail {
  opacity: 0.55;
}

/* 選中項目 */
.medicalContactForm__choice--region .wpcf7-list-item.is-active .medicalContactForm__regionDetail {
  opacity: 1;
}

/* 隱藏原始欄位容器 */
.medicalContactForm__regionFieldSource {
  display: none !important;
}

@media (max-width: 767px) {
  .medicalContactForm__choice--region .wpcf7-form-control {
    align-items: stretch;
    flex-direction: column;
  }

  .medicalContactForm__choice--region .wpcf7-list-item > label,
  .medicalContactForm__choice--region .wpcf7-list-item:first-child > label,
  .medicalContactForm__choice--region .wpcf7-list-item:last-child > label {
    width: 100%;
    min-width: 0;
  }

  .medicalContactForm__regionDetail {
    flex-wrap: wrap;
    white-space: normal;
  }
}

.medicalContactForm {
  display: flex;
  padding: 60px;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  align-self: stretch;

  border-radius: 40px;
  background: var(--Color-Gray-bg, #F4F7F7);

  /* Shadow/Card-Light */
  box-shadow: 0 15px 20px 0 rgba(66, 128, 157, 0.05);
}

.medicalContactForm *,
.medicalContactForm *::before,
.medicalContactForm *::after {
  box-sizing: border-box;
}

/* 必填提示 */
.medicalContactForm__requiredHint {
  display: flex;
  width: 164px;
  height: 44px;
  justify-content: center;
  align-items: center;

  border-radius: 999px;
  background: linear-gradient(
    0deg,
    #2e6f8d 0%,
    #42809d 50%,
    rgba(66, 128, 157, 0.7) 100%
  );

  /* Shadow/Card-Light */
  box-shadow: 0 15px 20px 0 rgba(66, 128, 157, 0.05);

  color: var(--Color-Gray-White, #FFF);

  /* btn 02 */
  font-family: "Noto Sans TC";
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 19.5px */
  letter-spacing: 1px;
}

/* 區塊 */
.medicalContactForm__section {
  width: 100%;
}

.medicalContactForm__sectionTitle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
}

.medicalContactForm__sectionTitle h2 {
  color: var(--Color-Gray-01, #1C1917);

  /* sub-title */
  font-family: "Noto Serif TC";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 30px */
  letter-spacing: 2px;
}

.medicalContactForm__sectionNumber {
  display: flex;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;

  border-radius: 999px;
  background: var(--Steel-Primary, #42809D);

  color: var(--Color-Gray-White, #FFF);

  /* E/E5 */
  font-family: Marcellus;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 27px */
  letter-spacing: 1px;
}

.medicalContactForm__optionalText {
  color: #777777;
  font-size: 12px;
  line-height: 1.5;
}

/* 欄位 */
.medicalContactForm__fields {
  width: 100%;
}

.medicalContactForm__field {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 12px;
  height: 97px;
  padding: 24px 0;

  border-bottom: 1px solid #D6D3D1;
}
.medicalContactForm__fields .medicalContactForm__field:nth-last-child(-n + 2) {
  grid-template-columns: 1fr;
  height: 128px;
}

.medicalContactForm__field:first-child,
.medicalContactForm__field:last-child {
  border-bottom: none;
}

.medicalContactForm__field:first-child {
  height: 93px;
}

.medicalContactForm__field--textarea {
  align-items: flex-start;
  min-height: 150px;
  padding-top: 0;
  border-bottom: 0;
}

.medicalContactForm__label {
  color: var(--Color-Gray-01, #1C1917);

  /* btn 01 */
  font-family: "Noto Sans TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  letter-spacing: 2px;
}

.medicalContactForm .is-required {
  margin-left: 2px;
  color: var(--form-primary);
}

.medicalContactForm__control {
  display: flex;
  padding: 16px;
  align-items: center;
  flex: 1 0 0;
  height: 49px;
}
.medicalContactForm__fields .medicalContactForm__field:nth-last-child(-n + 2) .medicalContactForm__control {
  padding-left: 0;
}
.medicalContactForm__field--textarea .medicalContactForm__control {
  height: auto;
  padding: 0;
}


/* CF7 wrapper */
.medicalContactForm .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* 文字、信箱、日期、選單、文字區域 */
.medicalContactForm input[type="text"],
.medicalContactForm input[type="email"],
.medicalContactForm input[type="tel"],
.medicalContactForm input[type="date"],
.medicalContactForm select,
.medicalContactForm textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  color: var(--Color-Gray-04, #44403C);

  /* body */
  font-family: "Noto Sans TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%; /* 28.8px */

  border: 1px solid transparent;
  border-radius: 10px;
  outline: none;
  background: #ffffff;
  box-shadow: none;
  appearance: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.medicalContactForm input[type="text"],
.medicalContactForm input[type="email"],
.medicalContactForm input[type="tel"],
.medicalContactForm input[type="date"],
.medicalContactForm select {
  height: 44px;
  padding: 0 18px;
}

.medicalContactForm textarea {
  height: 160px;
  padding: 16px;
  resize: vertical;
}

.medicalContactForm input::placeholder,
.medicalContactForm textarea::placeholder {
  color: #bdc3c3;
  opacity: 1;
}

.medicalContactForm input:focus,
.medicalContactForm select:focus,
.medicalContactForm textarea:focus {
  border-color: var(--form-primary);
  box-shadow: 0 0 0 3px rgba(66, 128, 157, 0.12);
}

/* 日期欄位 */
.medicalContactForm input[type="date"] {
  position: relative;
  color: #a6adad;
}

.medicalContactForm input[type="date"]:valid {
  color: var(--form-text);
}

.medicalContactForm input[type="date"]::-webkit-calendar-picker-indicator {
  width: 16px;
  height: 16px;
  cursor: pointer;
  opacity: 0.55;
}

/* 下拉選單箭頭 */
.medicalContactForm select {
  cursor: pointer;
  padding-right: 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M4 5.5L7 8.5L10 5.5' stroke='%235C5C5C' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 14px 14px;
}

/* 所在區域 */
.medicalContactForm__regionRow {
  display: flex;
  align-items: center;
  gap: 12px;
}

.medicalContactForm__choice--region {
  flex: 0 0 auto;
}

.medicalContactForm__regionInput {
  width: min(250px, 100%);
}

.medicalContactForm__regionInput input {
  height: 40px !important;
  font-size: 12px !important;
}

/* ========================================
   Radio 與 Checkbox
======================================== */

.medicalContactForm__choice .wpcf7-form-control {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.medicalContactForm__choice .wpcf7-list-item {
  display: inline-flex;
  margin: 0;
}

.medicalContactForm__choice .wpcf7-list-item label {
  position: relative;
  display: flex;
  padding: 12px;
  align-items: center;
  gap: 8px;
  align-self: stretch;

  border-radius: 10px;
  background: var(--Color-Gray-White, #FFF);

  color: var(--Color-Gray-02, #44403C);

  /* btn 02 */
  font-family: "Noto Sans TC";
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 19.5px */
  letter-spacing: 1px; 

  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

/* 隱藏 CF7 原生 Radio／Checkbox */
.medicalContactForm__choice input[type="radio"],
.medicalContactForm__choice input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* 選項文字與 SVG 圖示 */
.medicalContactForm__choice .wpcf7-list-item-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* 未勾選：16 × 16 灰色圓形 SVG */
.medicalContactForm__choice .wpcf7-list-item-label::before {
  display: block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23F4F7F7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

/* 已勾選：16 × 16 灰色圓形＋8 × 8 藍色圓點 SVG */
.medicalContactForm__choice input:checked + .wpcf7-list-item-label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23F4F7F7'/%3E%3Ccircle cx='8' cy='8' r='4' fill='%2342809D'/%3E%3C/svg%3E");
}

.medicalContactForm__choice label:has(input:checked) {
  color: var(--form-primary-dark);
  border-color: rgba(66, 128, 157, 0.25);
  background: rgba(255, 255, 255, 0.95);
}

.medicalContactForm__choice label:hover {
  border-color: rgba(66, 128, 157, 0.25);
}

/* 鍵盤操作焦點 */
.medicalContactForm__choice input:focus-visible + .wpcf7-list-item-label {
  outline: 2px solid var(--form-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* 療程 */
.medicalContactForm__choice--treatment {
  margin-bottom: 18px;
}

/* ========================================
   海外提示
======================================== */

.medicalContactForm__overseasNotice {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  padding: 8px 0 8px 12px;
  align-items: flex-start;
  align-self: stretch;

  border-left: 2px solid var(--Steel-Primary, #42809D);
}

.medicalContactForm__overseasNoticeTitle {
  display: flex;
  gap: 12px;
  align-items: center;

  color: var(--Steel-Primary, #42809D);

  /* thr-title */
  font-family: "Noto Serif TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  letter-spacing: 2px;

  margin-bottom: 12px;
}

.medicalContactForm__overseasNotice p {
  color: var(--Color-Gray-03, #57534E);

  /* body */
  font-family: "Noto Sans TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%; /* 28.8px */

  padding-left: 28px;
}

/* ========================================
   檔案上傳
======================================== */

.medicalContactForm__uploadGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.medicalContactForm__uploadBox {
  position: relative;
  display: flex;
  min-width: 0;
  padding: 24px 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex: 1 0 0;
  overflow: hidden;
  cursor: pointer;

  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--Color-Gray-White, #FFF);

  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.medicalContactForm__uploadBox:hover {
  border-color: rgba(66, 128, 157, 0.35);
  box-shadow: 0 8px 24px rgba(66, 128, 157, 0.08);
  transform: translateY(-0.5px);
}

.medicalContactForm__uploadIcon {
  position: relative;
  z-index: 1;
  display: flex;
  color: var(--form-primary);
  pointer-events: none;
}

.medicalContactForm__uploadFormat,
.medicalContactForm__uploadTitle {
  position: relative;
  z-index: 1;
  color: var(--Color-Gray-02, #44403C);
  text-align: center;

  /* small */
  font-family: "Noto Sans TC", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 1px;

  pointer-events: none;
}

.medicalContactForm__uploadFileName {
  position: relative;
  z-index: 1;
  display: none;
  max-width: 90%;
  margin-top: 5px;
  overflow: hidden;
  color: var(--Color-Gray-02, #44403C);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;

  /* small */
  font-family: "Noto Sans TC", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 1px;

  pointer-events: none;
}

.medicalContactForm__uploadFileName.is-active {
  display: block;
}

/* CF7 產生的檔案欄位外層，只能覆蓋自己的 uploadBox */
.medicalContactForm__uploadBox > .wpcf7-form-control-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
}

/* 真正可點擊的檔案 input */
.medicalContactForm__uploadBox .medicalContactForm__fileInput {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  margin: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  border: 0;
}

.medicalContactForm__uploadDescription {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 24px;
  color: var(--Color-Gray-03, #57534E);

  /* small */
  font-family: "Noto Sans TC", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 1px;
}

.medicalContactForm__infoIcon {
  display: flex;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  padding: 4px;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1 / 1;

  border-radius: 99px;
  background: var(
    --Gradient-Icon-tab-item-default,
    linear-gradient(
      90deg,
      rgba(244, 247, 247, 0.20) 0%,
      rgba(66, 128, 157, 0.20) 50%
    )
  );
}

/* ========================================
   隱私權同意 Checkbox
======================================== */
.medicalContactForm__privacy {
  width: 100%;
  border-top: 1px solid var(--Color-Gray-04, #D6D3D1);
  padding: 24px 0;
}

.medicalContactForm__privacy .wpcf7-list-item {
  margin: 0;
}

.medicalContactForm__privacy .wpcf7-list-item label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.medicalContactForm__privacy input[type="checkbox"] {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  padding: 0;

  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;

  border: 1px solid #1c1917;
  border-radius: 2px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;

  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.medicalContactForm__privacy input[type="checkbox"]:checked {
  border-color: #42809d;
  background-color: #42809d;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6L5 8.5L9.5 3.5' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.medicalContactForm__privacy input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(66, 128, 157, 0.35);
  outline-offset: 3px;
}

.medicalContactForm__privacy .wpcf7-list-item-label {
  color: var(--Color-Gray-01, #1C1917);

  /* body */
  font-family: "Noto Sans TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%; /* 28.8px */
}
.medicalContactForm__privacy .wpcf7-list-item-label a {
  color: var(--Steel-Primary, #42809D);

  /* body */
  font-family: "Noto Sans TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%;
}

.medicalContactForm__privacy a {
  color: #42809d;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ========================================
   Footer 與送出按鈕
======================================== */

.medicalContactForm__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;

  margin-top: -40px;
}

.medicalContactForm__footerNotice {
  color: var(--Color-Gray-03, #57534E);
  text-align: center;

  /* small */
  font-family: "Noto Sans TC";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 1px;
}

.medicalContactForm__submitWrap {
  position: relative;
  display: flex;
  height: 56px;
  padding: 16px 24px;
  align-items: center;
  gap: 12px;

  border-radius: 99px;
  border: 1.5px solid var(--Steel-Primary, #42809D);
  background: var(--Color-Gray-White, #FFF);

  transition: all 0.25s ease;
}

.medicalContactForm__submitWrap::after {
  content: "";
  display: block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle opacity='0.2' cx='8' cy='8' r='8' fill='url(%23footer-dot-gradient)'/%3E%3Ccircle cx='8' cy='8' r='2' fill='%2342809D'/%3E%3Cdefs%3E%3ClinearGradient id='footer-dot-gradient' x1='0' y1='8' x2='16' y2='8' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.5' stop-color='%2342809D'/%3E%3Cstop offset='1' stop-color='%23F4F7F7'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.medicalContactForm .medicalContactForm__submit {
  position: absolute;
  inset: 0;
  z-index: 2;

  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;

  cursor: pointer;
  opacity: 0;
  border: 0;

}

.medicalContactForm .medicalContactForm__submit:hover {
  color: #42809D;
}

.medicalContactForm__submitText {
  color: var(--Color-Gray-01, #1C1917);
  text-align: center;

  /* btn 01 */
  font-family: "Noto Sans TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  letter-spacing: 2px;
}

/* CF7 spinner */
.medicalContactForm .wpcf7-spinner {
  position: absolute;
  top: 50%;
  left: -30px;
  margin: 0;
  transform: translateY(-50%);
}

/* ========================================
   CF7 驗證訊息
======================================== */

.medicalContactForm .wpcf7-not-valid {
  border-color: rgba(200, 75, 75, 0.7) !important;
}

.medicalContactForm .wpcf7-not-valid-tip {
  margin-top: 5px;
  color: var(--form-danger);
  font-size: 11px;
  line-height: 1.5;
}

.medicalContactForm + .wpcf7-response-output,
.wpcf7 form .medicalContactForm ~ .wpcf7-response-output {
  margin: 20px 0 0 !important;
  padding: 13px 16px !important;
  color: #4b5151;
  font-size: 12px;
  line-height: 1.7;
  border-width: 1px !important;
  border-radius: 8px;
}

/* ========================================
   平板
======================================== */

@media (max-width: 1024px) {
  .medicalContactForm {
    padding: 40px 32px 32px;
  }

  .medicalContactForm__field {
    grid-template-columns: 160px minmax(0, 1fr);
  }
}

/* ========================================
   手機
======================================== */

@media (max-width: 767px) {
  .medicalContactForm {
    padding: 28px 18px 24px;
    border-radius: 22px;
  }

  .medicalContactForm__requiredHint {
    margin-bottom: 28px;
  }

  .medicalContactForm__section {
    margin-bottom: 36px;
  }

  .medicalContactForm__sectionTitle {
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
  }

  .medicalContactForm__sectionTitle h2 {
    font-size: 18px;
  }

  .medicalContactForm__sectionNumber {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
    font-size: 13px;
  }

  .medicalContactForm__field,
  .medicalContactForm__field--textarea {
    display: flex;
    min-height: auto;
    padding: 18px 0;
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .medicalContactForm__field:first-child {
    padding-top: 0;
  }

  .medicalContactForm__regionRow {
    align-items: stretch;
    flex-direction: column;
  }

  .medicalContactForm__regionInput {
    width: 100%;
  }

  .medicalContactForm__choice .wpcf7-form-control {
    gap: 8px;
  }

  .medicalContactForm__choice .wpcf7-list-item label {
    min-height: 36px;
    padding: 8px 12px 8px 29px;
    white-space: normal;
  }

  .medicalContactForm__choice .wpcf7-list-item-label::before {
    left: 12px;
  }

  .medicalContactForm__choice--time .wpcf7-list-item {
    flex: 1 1 calc(50% - 4px);
  }

  .medicalContactForm__choice--time .wpcf7-list-item label {
    width: 100%;
    min-width: 0;
  }

  .medicalContactForm__uploadGrid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .medicalContactForm__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .medicalContactForm__submitWrap {
    width: 100%;
  }

  .medicalContactForm .medicalContactForm__submit {
    width: 100%;
  }
}


/* ========================================
   Sassy Social Share 自訂圖示
======================================== */

.social-share-icon .heateor_sss_sharing_ul {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* 外層分享按鈕 */
.social-share-icon .heateor_sss_sharing_ul > a {
  position: relative !important;
  display: inline-flex !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
  flex: 0 0 36px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  vertical-align: middle !important;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.social-share-icon .heateor_sss_sharing_ul > a:hover {
  background-color: #e7eeee !important;
  transform: translateY(-1px);
}

/* Sassy 原始圖示容器 */
.social-share-icon .heateor_sss_sharing_ul > a > .heateor_sss_svg {
  display: inline-flex !important;
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
  flex: 0 0 18px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  line-height: 0 !important;
}

/* 自訂 SVG */
.social-share-icon .customSocialIcon {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  flex: 0 0 18px !important;
  transform: none !important;
}

/* 複製成功提示 */
.socialShareCopyMessage {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  z-index: 50;
  width: max-content;
  padding: 6px 10px;
  transform: translateX(-50%);
  border-radius: 6px;
  background: #1c1917;
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 1px;
  pointer-events: none;
}

.socialShareCopyMessage::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top: 5px solid #1c1917;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

/* 複製成功提示 */
.socialShareCopyMessage {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  z-index: 50;
  width: max-content;
  padding: 6px 10px;
  transform: translateX(-50%);
  border-radius: 6px;
  background: #1c1917;
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 1px;
  pointer-events: none;
}

.socialShareCopyMessage::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top: 5px solid #1c1917;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

/* 複製成功提醒文字 */
.socialShareCopyMessage {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  z-index: 20;
  width: max-content;
  padding: 6px 10px;
  transform: translateX(-50%);
  border-radius: 6px;
  background: #1c1917;
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 1px;
  pointer-events: none;
  animation: socialShareCopyMessageIn 0.2s ease;
}

.socialShareCopyMessage::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top: 5px solid #1c1917;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

@keyframes socialShareCopyMessageIn {
  from {
    opacity: 0;
    transform: translate(-50%, 4px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}


.doctorColumnToc__link.is-active {
  border-left-width: 2px;
  border-left-color: #42809D;
  color: #42809D;
}

.doctorColumnToc__link.is-active .doctorColumnToc__number {
  color: var(--Steel-Primary, #42809D);

  /* E/small */
  font-family: Marcellus;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 1px;
}

.doctorColumnToc__link.is-active .doctorColumnToc__menu-title {
  color: var(--Steel-Primary, #42809D);

  /* btn 01 */
  font-family: "Noto Sans TC";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 2px;
}

.caseArchive__tab {
  background: linear-gradient(
    0deg,
    rgba(244, 247, 247, 0.2) 0%,
    rgba(66, 128, 157, 0.2) 100%
  );
  color: #57534e;
  transition: all 0.3s ease;
}

.caseArchive__tab.is-active {
  background: linear-gradient(
    0deg,
    #2e6f8d 0%,
    #42809d 50%,
    rgba(66, 128, 157, 0.7) 100%
  );
  color: #fff;
}

/* ========================================
   Home Banner Swiper
======================================== */

.homeBannerSwiperWrap {
  position: relative;
  z-index: 10;
  width: 100%;
  margin-top: 60px;
  overflow: hidden;
  padding-top: 40px;
  padding-bottom: 40px;
}

.homeBannerSwiper {
  position: relative;
  width: 100%;
  overflow: visible;
}

.homeBannerSwiper .swiper-wrapper {
  display: flex;
  align-items: center;
}


/* ========================================
   Slide
======================================== */

.homeBannerSwiper__slide {
  position: relative;
  height: auto;
  flex-shrink: 0;

  /*
   * 重要：
   * 不設定 width
   * 不 scale
   * 不 translate
   *
   * slide 的位置與寬度全部交給 Swiper。
   */
}


/* ========================================
   圖片容器
======================================== */

.homeBannerSwiper__image {
  position: relative;
  width: 100%;
  aspect-ratio: 792 / 581;
  overflow: hidden;
  border-radius: 40px;
  background: #f4f7f7;

  /*
   * 預設為非 active 狀態。
   */
  opacity: 0.15;

  transform:
    translateY(24.5%)
    scale(0.653);

  transition:
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.55s ease;

  will-change: transform, opacity;
}

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


/* ========================================
   圖片漸層
======================================== */

.homeBannerSwiper__image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;

  background:
    linear-gradient(
      129deg,
      rgba(66, 128, 157, 0.15) 4.36%,
      rgba(66, 128, 157, 0.05) 100%
    ),
    linear-gradient(
      270deg,
      rgba(244, 247, 247, 0.80) 0%,
      rgba(244, 247, 247, 0.00) 20.41%
    ),
    linear-gradient(
      270deg,
      rgba(244, 247, 247, 0.00) 80%,
      rgba(244, 247, 247, 0.60) 100%
    ),
    linear-gradient(
      180deg,
      rgba(244, 247, 247, 0.00) 80%,
      rgba(244, 247, 247, 0.60) 100%
    ),
    linear-gradient(
      180deg,
      rgba(244, 247, 247, 0.80) 0%,
      rgba(244, 247, 247, 0.00) 20%
    );

  background-blend-mode:
    plus-darker,
    normal,
    normal,
    normal,
    normal;

  pointer-events: none;
}


/* ========================================
   左右相鄰圖片
======================================== */

.homeBannerSwiper__slide.swiper-slide-prev,
.homeBannerSwiper__slide.swiper-slide-next {
  z-index: 2;
}

.homeBannerSwiper__slide.swiper-slide-prev .homeBannerSwiper__image,
.homeBannerSwiper__slide.swiper-slide-next .homeBannerSwiper__image {
  opacity: 1;

  transform:
    translateY(24.5%)
    scale(0.627);
  
  aspect-ratio: 87/67;
}


/* ========================================
   Active 中央主圖
======================================== */

.homeBannerSwiper__slide.swiper-slide-active {
  z-index: 5;
}

.homeBannerSwiper__slide.swiper-slide-active .homeBannerSwiper__image {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);
}


/* ========================================
   Doctor Links
======================================== */

.homeDoctorLink:hover .homeDoctorLink__icon img {
  filter: brightness(0) invert(1);
}


/* ========================================
    匯集頁 Tabs
======================================== */
.archiveTabs__tab {
  background: linear-gradient(
    0deg,
    rgba(244, 247, 247, 0.20) 0%,
    rgba(66, 128, 157, 0.20) 100%
  );
  color: #57534E;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  transition: background 0.3s ease, color 0.3s ease;
}

.archiveTabs__tab:hover,
.archiveTabs__tab.is-active {
  background: linear-gradient(
    0deg,
    #2E6F8D 0%,
    #42809D 50%,
    rgba(66, 128, 157, 0.70) 100%
  );
  color: #FFFFFF;
}

.archivePagination .page-numbers {
  display: inline-flex;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #FFFFFF;
  color: #57534E;
  transition: background 0.3s ease, color 0.3s ease;
}

.archivePagination .page-numbers:hover,
.archivePagination .page-numbers.current {
  background: #42809D;
  color: #FFFFFF;
}

.archivePagination .page-numbers:hover svg path {
  stroke: #FFFFFF;
}

.archivePagination .page-numbers.prev,
.archivePagination .page-numbers.next {
  width: 40px;
  padding: 0;
}

.archivePagination .page-numbers svg {
  width: 16px;
  height: 16px;
}