.indexTabs .indexTabs-level1-tab {
  background-color: #f8f7f7;
}
.indexTabs #tab-clinic:checked ~ label[for="tab-clinic"],
.indexTabs #tab-medical:checked ~ label[for="tab-medical"] {
  background-color: #fff;
  box-shadow: -4px -1px 4px 0 rgba(166, 192, 245, 0.25);
}
.indexTabs .clinic,
.indexTabs .medical {
  display: none;
}
.indexTabs #tab-clinic:checked ~ .clinic,
.indexTabs #tab-medical:checked ~ .medical {
  display: block;
}
.indexTabs .clinic-content {
  background-color: #f5fafe;
}
.indexTabs .indexTabs-level2::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 65%;
  height: 1px;
  background-color: var(--color-primary);
}
.indexTabs .indexTabs-level2 label:not(:last-child)::after,
.indexTabs .indexTabs-level3 label:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: var(--color-primary);
}
.indexTabs .tab-hk-list,
.indexTabs .tab-kl-list,
.indexTabs .tab-nt-list {
  display: none;
}
.indexTabs #tab-hk:checked ~ .indexTabs-level3 .tab-hk-list,
.indexTabs #tab-kl:checked ~ .indexTabs-level3 .tab-kl-list,
.indexTabs #tab-nt:checked ~ .indexTabs-level3 .tab-nt-list {
  display: flex;
}
.indexTabs #tab-hk:checked ~ .indexTabs-level2 label[for="tab-hk"],
.indexTabs #tab-kl:checked ~ .indexTabs-level2 label[for="tab-kl"],
.indexTabs #tab-nt:checked ~ .indexTabs-level2 label[for="tab-nt"] {
  background-color: #ecf6fc;
}
.indexTabs .clinic-Central1,
.indexTabs .clinic-Central2,
.indexTabs .clinic-CausewayBay,
.indexTabs .clinic-MongKok,
.indexTabs .clinic-KwunTong,
.indexTabs .clinic-Shatin,
.indexTabs .clinic-YuenLong,
.indexTabs .clinic-TsuenWan,
.indexTabs .clinic-TseungKwanO {
  display: none;
}
.indexTabs #clinic-Central1:checked ~ .clinic-content article.clinic-Central1,
.indexTabs #clinic-Central2:checked ~ .clinic-content article.clinic-Central2,
.indexTabs #clinic-CausewayBay:checked ~ .clinic-content article.clinic-CausewayBay,
.indexTabs #clinic-MongKok:checked ~ .clinic-content article.clinic-MongKok,
.indexTabs #clinic-KwunTong:checked ~ .clinic-content article.clinic-KwunTong,
.indexTabs #clinic-Shatin:checked ~ .clinic-content article.clinic-Shatin,
.indexTabs #clinic-YuenLong:checked ~ .clinic-content article.clinic-YuenLong,
.indexTabs #clinic-TsuenWan:checked ~ .clinic-content article.clinic-TsuenWan,
.indexTabs #clinic-TseungKwanO:checked ~ .clinic-content article.clinic-TseungKwanO {
  display: block;
}
.indexTabs #clinic-Central1:checked ~ .indexTabs-level3 label[for="clinic-Central1"],
.indexTabs #clinic-Central2:checked ~ .indexTabs-level3 label[for="clinic-Central2"],
.indexTabs #clinic-CausewayBay:checked ~ .indexTabs-level3 label[for="clinic-CausewayBay"],
.indexTabs #clinic-MongKok:checked ~ .indexTabs-level3 label[for="clinic-MongKok"],
.indexTabs #clinic-KwunTong:checked ~ .indexTabs-level3 label[for="clinic-KwunTong"],
.indexTabs #clinic-Shatin:checked ~ .indexTabs-level3 label[for="clinic-Shatin"],
.indexTabs #clinic-YuenLong:checked ~ .indexTabs-level3 label[for="clinic-YuenLong"],
.indexTabs #clinic-TsuenWan:checked ~ .indexTabs-level3 label[for="clinic-TsuenWan"],
.indexTabs #clinic-TseungKwanO:checked ~ .indexTabs-level3 label[for="clinic-TseungKwanO"] {
  background-color: #ecf6fc;
}
.indexTabs .medical {
  background-color: #f8f8f8;
}
.indexTabs .medical-item {
  line-height: 1.56;
  background-color: #f5fafe;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  box-shadow: 0.679px 1.698px 1.358px 0 rgba(61, 143, 238, 0.27);
}
.indexTabs .medical-item:hover {
  background-color: #fcf3ec;
  color: var(--color-hover-index);
  text-decoration: underline;
  text-underline-offset: 6px;
}
.indexTabs .medical-cover {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 85%;
}
.indexTabs .medical-cover img {
  height: 100%;
}
@media screen and (min-width: 1024px) {
  .indexTabs {
    margin-top: -60px;
  }
  .indexTabs .indexTabs-level1-tab {
    background-color: rgba(255, 255, 255, 0.75);
  }
  .indexTabs .medical-item {
    box-shadow: 1.669px 4.171px 3.337px 0 rgba(61, 143, 238, 0.27);
  }
  .indexTabs .clinic-cover {
    width: 292px;
  }
  .indexTabs #clinic-Central1:checked ~ .clinic-content article.clinic-Central1,
  .indexTabs #clinic-Central2:checked ~ .clinic-content article.clinic-Central2,
  .indexTabs #clinic-CausewayBay:checked ~ .clinic-content article.clinic-CausewayBay,
  .indexTabs #clinic-MongKok:checked ~ .clinic-content article.clinic-MongKok,
  .indexTabs #clinic-KwunTong:checked ~ .clinic-content article.clinic-KwunTong,
  .indexTabs #clinic-Shatin:checked ~ .clinic-content article.clinic-Shatin,
  .indexTabs #clinic-YuenLong:checked ~ .clinic-content article.clinic-YuenLong,
  .indexTabs #clinic-TsuenWan:checked ~ .clinic-content article.clinic-TsuenWan,
  .indexTabs #clinic-TseungKwanO:checked ~ .clinic-content article.clinic-TseungKwanO {
    display: flex;
  }
  .indexTabs .indexTabs-level2::after {
    bottom: 50%;
    left: unset;
    right: -8px;
    transform: translateY(50%);
    height: 100%;
    width: 1.5px;
  }
  .indexTabs .indexTabs-level2 label:not(:last-child)::after,
  .indexTabs .indexTabs-level3 label:not(:last-child)::after {
    right: 50%;
    top: unset;
    transform: translateX(50%);
    bottom: -8px;
    width: 50%;
    height: 1.5px;
  }
}