#banner {
  background: url("https://statichk.cmermedical.com/newopd/services/lens/banner-lal-mb-v1.webp") no-repeat center /
    cover;
  text-shadow: -0.682px 0.227px 0.909px #00000040;
}
#what .what-main {
  box-shadow: 0 4px 4px 0 #8476ee40;
  background: linear-gradient(3deg, #fff 60.38%, #edebfa 93.58%);
  border: 1px solid #d0d5f4;
  border-radius: 24px;
  overflow: hidden;
}
#what .what-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#comparison {
  background: url("https://statichk.cmermedical.com/newopd/services/lens/lal-comparison-bg-mb-v1.webp") no-repeat
    center / cover;
}
.lal-table thead th:first-child div {
  background-color: #7c86be;
  height: 56px;
}
.lal-table thead th:nth-child(2) div {
  background-color: #9252a9;
  height: 84px;
}
.lal-table thead th:last-child div {
  background-color: #dddddd;
  height: 56px;
}
.lal-table tbody td:first-child {
  background-color: #f3f7fd;
}
.lal-table tbody td:nth-child(2) {
  background-color: #f6efff;
}
.lal-table tbody td:last-child {
  background-color: #eff7ff;
  font-weight: 500;
}
.lal-table tbody tr:not(:last-child) td {
  border-bottom: 0.5px solid #8f8f8f;
}
.lal-table tbody strong {
  color: var(--color-lal);
}
.lal-table td {
  min-height: 56px;
  padding: 12px 28px;
}
.comparison-intro::before,
.comparison-intro::after {
  position: absolute;
  color: var(--color-lal);
  font-size: 52px;
  font-weight: 900;
  letter-spacing: 0.1em;
  top: -16px;
}
.comparison-intro::before {
  content: "“";
  left: -36px;
}
.comparison-intro::after {
  content: "”";
  right: -36px;
}
.why-main .why-title {
  position: relative;
  color: var(--color-lal);
  font-size: 20px;
  letter-spacing: 0.1em;
  padding-bottom: 12px;
  margin-bottom: 20px;
  white-space: nowrap;
}
.why-main .why-title::before {
  content: "";
  width: 106px;
  height: 1px;
  background-color: var(--color-lal);
  position: absolute;
  left: 0;
  bottom: 0;
}
.why-main .why-intro {
  color: var(--color-lal-text);
  line-height: 1.6;
  text-align: justify;
  letter-spacing: 0.1em;
}
.why-main .why-cover {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
}
#why .why-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 28px;
}
#why .why-pagination .swiper-pagination-bullet {
  background-color: #d9d9d9;
}
#why .why-pagination .swiper-pagination-bullet-active {
  background-color: var(--color-lal);
}
@keyframes buttonGrow {
  0% {
    transform: translateX(-10px);
    box-shadow: 0px 0px 5px 0px rgba(230, 11, 221, 0.29);
  }

  50% {
    box-shadow:
      0px 0px 8px 1px rgba(230, 11, 221, 0.29),
      0px 0px 12px 2px rgba(230, 11, 221, 0.29),
      0px 0px 15px 4px rgba(230, 11, 221, 0.29);
  }

  100% {
    transform: translateX(10px);
    box-shadow: 0px 0px 5px 0px rgba(230, 11, 221, 0.29);
  }
}
.button-lal {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 28px;
  background: linear-gradient(180deg, #d3f3f4 0%, #ffedfb 100%);
  box-shadow: 0 0 6.849px 1.827px rgba(230, 11, 221, 0.29);
  width: fit-content;
  padding: 8px 28px;
  margin-left: auto;
  margin-right: auto;
  animation: buttonGrow 2s infinite alternate;
}
.button-lal span {
  font-size: 14px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--color-lal);
}
@media screen and (min-width: 768px) {
  #banner {
    background-image: url("https://statichk.cmermedical.com/newopd/services/lens/banner-lal-pc-v1.webp");
    text-shadow: -1.829px 0.61px 2.439px #00000040;
  }
  .comparison-intro::before,
  .comparison-intro::after {
    font-size: 80px;
    top: -32px;
  }
  .comparison-intro::before {
    left: -100px;
  }
  .comparison-intro::after {
    right: -100px;
  }
}
@media screen and (min-width: 1024px) {
  #what .what-main {
    background: linear-gradient(90deg, #fff 72.82%, #edebfa 99.85%);
  }
  #comparison {
    background-image: url("https://statichk.cmermedical.com/newopd/services/lens/lal-comparison-bg-pc-v1.webp");
  }
  .lal-table thead th:first-child div,
  .lal-table thead th:last-child div {
    height: 72px;
  }
  .lal-table thead th:nth-child(2) div {
    height: 120px;
  }
  .lal-table td {
    min-height: 108px;
    padding: 28px;
  }
  .lal-table tbody td:nth-child(2) {
    font-size: 24px;
  }
  .lal-table tbody tr:not(:last-child) td {
    border-bottom-width: 1px;
  }
  .why-main .why-title {
    font-size: 36px;
    font-weight: 300;
    padding-bottom: 20px;
    margin-bottom: 24px;
  }
  .why-main .why-intro {
    font-size: 18px;
    line-height: 2;
  }
  .button-lal {
    gap: 32px;
    border-radius: 36px;
    box-shadow: 0 0 15px 4px rgba(230, 11, 221, 0.29);
    padding: 24px 16px;
  }
  .button-lal span {
    font-size: 30px;
  }
}
@media screen and (max-width: 1279px) {
  .why-main .why-item {
    border-radius: 28px;
    overflow: hidden;
    background: url("https://statichk.cmermedical.com/newopd/services/lens/lal-why-bg-item.webp") no-repeat center /
      cover;
  }
}
@media screen and (min-width: 1280px) {
  .comparison-intro::before,
  .comparison-intro::after {
    font-size: 124px;
    top: -56px;
  }
  .comparison-intro::before {
    left: -152px;
  }
  .comparison-intro::after {
    right: -152px;
  }
  #why .why-main {
    background: url("https://statichk.cmermedical.com/newopd/services/lens/lal-why-bg-pc-v1.webp") no-repeat center /
      cover;
  }
  #why .why-swiper .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    transform: none !important;
    gap: 200px;
  }
  #why .why-swiper .swiper-slide {
    width: 100% !important;
    margin: 0 !important;
  }
  #why .why-pagination {
    display: none;
  }
  .why-main .why-item {
    gap: 20px;
  }
  .why-main .why-title {
    font-size: 48px;
    padding-top: 40px;
    padding-bottom: 28px;
    margin-bottom: 36px;
  }
  .why-main .why-intro {
    font-size: 20px;
  }
}