details:focus,
summary:focus {
  outline: none;
}
details,
summary {
  list-style: none;
}
summary::-webkit-details-marker {
  display: none; /* 兼容旧版浏览器 */
}
.collapse {
  visibility: visible;
}
.container {
  max-width: 100% !important;
}
@media screen and (min-width: 80rem) {
  .container {
    max-width: 80rem !important;
  }
}
@keyframes tagHighlight {
  0%,
  100% {
    transform: translateY(0);
    box-shadow: none;
  }
  25% {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
  }
  50% {
    transform: translateY(0);
    box-shadow: none;
  }
}
.text-primary {
  color: var(--color-primary) !important;
}
.bg-primary {
  background-color: var(--color-primary) !important;
}
.banner .banner-title {
  order: 2;
  color: var(--color-primary);
  background-color: #fff2d5;
  font-size: 24px;
  font-weight: 500;
  padding: 16px;
  margin-bottom: 0;
  line-height: normal;
  text-shadow:
    rgb(255, 255, 255) 3px 0px 0px,
    rgb(255, 255, 255) 2.83333px 0.983333px 0px,
    rgb(255, 255, 255) 2.35px 1.85px 0px,
    rgb(255, 255, 255) 1.61667px 2.51667px 0px,
    rgb(255, 255, 255) 0.7px 2.91667px 0px,
    rgb(255, 255, 255) -0.283333px 2.98333px 0px,
    rgb(255, 255, 255) -1.25px 2.73333px 0px,
    rgb(255, 255, 255) -2.06667px 2.16667px 0px,
    rgb(255, 255, 255) -2.66667px 1.36667px 0px,
    rgb(255, 255, 255) -2.96667px 0.416667px 0px,
    rgb(255, 255, 255) -2.95px -0.566667px 0px,
    rgb(255, 255, 255) -2.6px -1.5px 0px,
    rgb(255, 255, 255) -1.96667px -2.26667px 0px,
    rgb(255, 255, 255) -1.11667px -2.78333px 0px,
    rgb(255, 255, 255) -0.133333px -3px 0px,
    rgb(255, 255, 255) 0.85px -2.88333px 0px,
    rgb(255, 255, 255) 1.75px -2.43333px 0px,
    rgb(255, 255, 255) 2.45px -1.73333px 0px,
    rgb(255, 255, 255) 2.88333px -0.833333px 0px;
}
.title-normal {
  font-size: 24px;
  font-weight: bold;
  color: var(--color-primary);
  margin-bottom: 0;
}
.content-more .title-normal {
  margin-bottom: 12px;
}
label[for="showmore"] span:nth-child(1) {
  display: block;
}
label[for="showmore"] span:nth-child(2) {
  display: none;
}
#showmore:checked ~ .content-init label[for="showmore"] span:nth-child(1) {
  display: none;
}
#showmore:checked ~ .content-init label[for="showmore"] span:nth-child(2) {
  display: block;
}
#showmore:checked ~ .content-init label[for="showmore"] i {
  transform: rotate(180deg);
  transform-origin: center center;
}
#showmore:checked ~ .content-more {
  display: block;
}
.csp-btns a {
  animation: tagHighlight 2s infinite;
  display: flex;
  align-items: center;
  width: fit-content;
  padding: 8px clamp(0.5rem, 0.142rem + 1.79vw, 1rem);
  border-radius: 24px;
  border: 1.2px solid;
  gap: 12px;
  font-weight: 900;
}
.csp-btns a.csp-tel {
  color: #2958a3;
  border-color: #2958a3;
}
.csp-btns a.csp-whatsapp {
  color: #33ab38;
  border-color: #33ab38;
  animation-delay: 1s;
}
.csp-btns a.csp-tel:hover {
  color: #fff;
  background-color: #2958a3;
}
.csp-btns a.csp-whatsapp:hover {
  color: #fff;
  background-color: #33ab38;
}
.csp-btns a.csp-clinic {
  color: #e37863;
  border-color: #e37863;
}
.csp-btns a.csp-clinic:hover {
  color: #fff;
  background-color: #e37863;
}
.doctor .csp-btns a {
  animation: tagHighlight 3s infinite;
}
.doctor .csp-btns a.csp-tel {
  animation-delay: 1s;
}
.doctor .csp-btns a.csp-whatsapp {
  animation-delay: 2s;
}
.doctor-list a {
  color: #4b4b4b;
}
.doctor .field li {
  list-style-type: disc;
}
.doctor-list .doctor-name {
  background-color: var(--color-primary);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: end;
  padding: 8px 0;
  white-space: nowrap;
  gap: 8px;
}
.doctor-list .doctor-name h2 {
  font-size: 24px;
  margin-bottom: 0;
  line-height: 1;
}
.doctor-list .doctor-name span {
  font-size: 16px;
  line-height: 1;
}
.doctor-list .doctor-main {
  background-color: #e3eaf4;
  display: flex;
}
.doctor-list .field-key {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
}
.doctor-list .doctor-icon {
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.doctor .tab {
  cursor: pointer;
  display: block;
  border: 1px solid #1b407a;
  padding: 8px 0;
}
.doctor #tab-hk:checked ~ div .doctor-tabs label[for="tab-hk"],
.doctor #tab-kl:checked ~ div .doctor-tabs label[for="tab-kl"],
.doctor #tab-nt:checked ~ div .doctor-tabs label[for="tab-nt"] {
  background-color: #1b407a;
  color: #fff;
}
.pagination .page {
  border: 0.6px solid #c7c5c5;
  background-color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pagination .page.active {
  background-color: #e3eaf4;
  font-weight: bold;
}
.serial {
  position: relative;
  padding-left: 16px;
}
.serial::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #4b4b4b;
  left: 0;
  top: 8px;
}
.faq-list {
  list-style: none;
  counter-reset: faq-counter;
}
.faq-item {
  list-style: none;
  background-color: #fff;
  position: relative;
  counter-increment: faq-counter;
}
.faq-item::before {
  content: counter(faq-counter);
  position: absolute;
  top: 20px;
  left: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
  border: 0.5px solid #000;
}
.csp-steps {
  counter-reset: step-counter;
}
.csp-steps li h4 {
  padding-left: 72px;
  font-weight: bold;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 40px;
}
.csp-steps li {
  counter-increment: step-counter;
  position: relative;
}
.csp-steps li::before {
  content: "步驟" counter(step-counter, cjk-ideographic);
  position: absolute;
  left: 0;
  background-color: var(--color-primary);
  color: #fff;
  padding: 4px 8px;
  border-radius: 16px;
  font-size: 16px;
  line-height: 1;
}
@media screen and (max-width: 1023px) {
  .transform-top {
    transform: translateY(-312px);
  }
}
@media screen and (min-width: 1024px) {
  .banner .banner-title {
    font-size: 48px;
    padding: 60px 48px;
  }
  .title-normal {
    font-size: 48px;
  }
  .content-more .title-normal {
    margin-bottom: 28px;
  }
  .eyesight-btns a {
    border-radius: 60px;
    padding: 16px 36px;
    border-width: 2.4px;
    gap: 20px;
  }
  .doctor-list .doctor-name {
    width: 316px;
    align-items: center;
    flex-direction: column;
  }
  .doctor-list .doctor-name h2 {
    font-size: 60px;
  }
  .doctor-list .doctor-name span {
    font-size: 36px;
  }
  .doctor-list .doctor-name .en {
    font-size: 30px;
  }
  .doctor-list .doctor-main {
    gap: 5%;
  }
  .doctor-list .field-key {
    gap: 20px;
    font-size: 24px;
  }
  .pagination .page {
    border-width: 1px;
    width: 60px;
    height: 60px;
    border-radius: 12px;
  }
  .serial {
    position: relative;
    padding-left: 32px;
  }
  .serial::before {
    width: 8px;
    height: 8px;
    top: 12px;
  }
  .faq-item::before {
    width: 60px;
    height: 60px;
    top: 36px;
    left: 56px;
    border-width: 1px;
  }
  .csp-steps li h4 {
    font-size: 24px;
    line-height: 42px;
    padding-left: 120px;
  }
  .csp-steps li::before {
    padding: 8px 16px;
    font-size: 24px;
  }
}