@charset "UTF-8";
.mainColorBG {
  background-color: var(--mainColorBG);
}

.width100 {
  width: 100%;
  margin-inline: auto;
}

.width90 {
  width: 90%;
  margin-inline: auto;
}

.nitrous-oxide {
  aspect-ratio: 840/698;
  width: min(82%, 30rem);
  height: auto;
}

.widthFit {
  width: -moz-fit-content;
  width: fit-content;
}

.mg0 {
  margin: 0;
}

.mgTop5 {
  margin-top: min(5%, 1.5rem);
}

.mgTop8 {
  margin-top: min(8%, 2.5rem);
}

.mgBtm0 {
  margin-bottom: 0;
}

.mgBtm8 {
  margin-bottom: min(3rem, 8%);
}

.mgY7 {
  margin-block: min(7%, 2rem);
}

.pdBtm5pct {
  padding-bottom: min(5%, 1.5rem);
}

.pdBtm1rem {
  padding-bottom: 1rem;
}

.pdBtm2rem {
  padding-bottom: 2rem;
}

.pdTop0 {
  padding-top: 0;
}

.textCenter {
  text-align: center;
}

.h2Title {
  font-size: clamp(2rem, 3vw, 2.875rem);
  font-weight: 700;
  line-height: 120%;
  margin-top: 0.5rem;
}
.h2Title.lineH130 {
  line-height: 130%;
}
.h2Title.lineH90 {
  line-height: 90%;
}
.h2Title.lineH100 {
  line-height: 100%;
}
.h2Title .smaller {
  font-size: clamp(1.75rem, 3vw, 2.875rem);
  letter-spacing: -0.175rem;
}
.h2Title.smaller {
  font-size: clamp(1.75rem, 3vw, 2.875rem);
}
.h2Title .smaller2 {
  font-size: clamp(1.5rem, 3vw, 2.875rem);
}
.h2Title.smaller2 {
  font-size: clamp(1.5rem, 3vw, 2.875rem);
}
.h2Title .smaller3, .h2Title.smaller3 {
  font-size: clamp(1.25rem, 3vw, 2rem);
}
.h2Title .smaller4, .h2Title.smaller4 {
  font-size: clamp(1.15rem, 3vw, 2rem);
}
.h2Title.mg0 {
  margin: 0;
}

.fontWhite {
  color: #ffffff;
}

.readMoreBtn {
  border-radius: clamp(1.563rem, 3vw, 3.237rem);
  background-color: rgba(0, 0, 0, 0);
  margin-block: min(10%, 5vh);
  padding: min(2%, 0.5em) 4vw;
  font-weight: 700;
  line-height: 150%;
  text-align: center;
  letter-spacing: 0.1em;
  cursor: pointer;
  width: min(100%, 34em);
}

.pageContent hr.contentLine {
  margin-inline: auto;
  height: 1px;
  width: min(82%, 49rem);
}

.secondTitle5.pdBlock {
  padding-block: min(8%, 2.5rem);
}
.secondTitle5.pdBlock.pdTop0 {
  padding-top: 0;
}

@media (min-width: 1024px) {
  .secondTitle5.DtextCenter {
    text-align: center;
  }
}

.benefitsItemText {
  width: 80%;
  z-index: 1;
}

.benefitsItemGrid:hover img {
  filter: brightness(0) contrast(100) invert(93%) sepia(7%) saturate(0%) hue-rotate(147deg) brightness(106%) contrast(108%);
}

.custom-animated-handle {
  transition: transform 0.2s;
  cursor: pointer;
}

.slider-with-animated-handle:hover .custom-animated-handle {
  transform: scale(1.3);
}

.slider-with-animated-handle:focus {
  outline: none;
}

.slider-with-animated-handle {
  --default-handle-width: clamp(400px, 10vw, 2000px);
  cursor: ew-resize;
  box-shadow: -1px 10px 24px -3px rgba(0, 0, 0, 0.2);
}

.before,
.after {
  margin: 0;
}

.before figcaption,
.after figcaption {
  background-color: transparent;
  border: 1px solid #484848;
  border-radius: 6px;
  color: #484848;
  padding: min(0.75%, 0.75rem) min(1.25%, 1rem);
  position: absolute;
  top: max(1.2rem, 10%);
  transform: translateY(-50%);
  line-height: 100%;
  letter-spacing: 0.25px;
  font-size: clamp(0.85rem, 1.5vw, 1.25rem);
  font-weight: 500;
}

.before figcaption {
  left: min(3%, 1.5rem);
}

.after figcaption {
  right: min(3%, 1.5rem);
}

.contentContainer1 {
  width: min(82%, 82rem);
  margin-inline: auto;
  text-align: center;
}

.BGpadding {
  padding-block: 1vh;
}

.BGpaddingInside {
  padding-block: 2.5%;
}
.BGpaddingInside.pdBtm0 {
  padding-bottom: 0;
}

@media screen and (min-width: 1601px) {
  .mobile-only {
    display: none;
  }
  .desktop-only {
    display: block;
  }
  .desktop-only.contents {
    display: contents;
  }
  .desktop-only.inline {
    display: inline-block;
  }
  .h2Title.DsmallH2 {
    font-size: 1.875rem;
    text-align: center;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1600px) {
  .mobile-only {
    display: none;
  }
  .desktop-only {
    display: block;
  }
  .desktop-only.contents {
    display: contents;
  }
  .desktop-only.inline {
    display: inline-block;
  }
  .h2Title.DsmallH2 {
    font-size: 1.875rem;
    text-align: center;
  }
}
a {
  text-decoration: none;
}

.caseContainer {
  width: min(90%, 55rem);
  margin-inline: auto;
}

.caseCard {
  width: 100%;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #484848;
}
.caseCard:hover .caseImg {
  filter: brightness(50%);
}
.caseCard:hover .caseTitleWrapper {
  background-color: var(--mainColor);
  color: #fff;
}
.caseCard:hover .caseTitleWrapper::after {
  color: #fff;
  right: 0%;
}

.caseImg {
  width: 100%;
  height: auto;
  aspect-ratio: 445/569;
  background-color: #f4f4f4;
  transition: all 300ms ease-in-out;
}

.caseHr {
  border: 1px solid var(--mainColor) !important;
  width: 100% !important;
  height: auto !important;
  margin-block: 0.5em !important;
}

.caseTitleWrapper {
  border: 2px solid var(--mainColor);
  width: 100%;
  height: auto;
  background-color: #fff;
  text-align: left;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  transition: all 300ms ease-in-out;
}
.caseTitleWrapper::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: 3%;
  transform: translate(-50%, -50%);
  transition: all 300ms ease-in-out;
}

.caseTitle {
  font-size: clamp(0.7rem, 1.5vw, 1.392rem);
  font-weight: 500;
  margin: 0.25rem;
  margin-left: 0.5rem;
  width: 84%;
}

.caseDesc {
  font-size: clamp(0.531rem, 1.5vw, 1.044rem);
}

#moreBAWrapper {
  z-index: 1;
}

.after figcaption {
  background: var(--mainColor);
  color: #fff;
  border: 1px solid rgba(0, 0, 0, 0);
}

.compare-image {
  aspect-ratio: 300/160;
  object-fit: cover;
  object-position: 50% 25%;
}
@media (min-width: 1024px) {
  .compare-image {
    aspect-ratio: 300/120;
  }
}

.moreBAContainer {
  display: grid;
  margin-bottom: 2rem;
  gap: 2rem;
}
@media (min-width: 768px) {
  .moreBAContainer {
    grid-template-columns: 1fr 1fr;
  }
}
.moreBAContainer .after figcaption,
.moreBAContainer .before figcaption {
  top: 1.5rem;
}
.moreBAContainer .slider-with-animated-handle {
  box-shadow: unset;
}

.slider-with-animated-handle.no-shadow {
  box-shadow: unset;
}

.expandable-section .additional-content {
  margin-bottom: 50px;
}

/* Button style */
.expand-btn {
  justify-content: center;
  width: 20em;
  margin-inline: auto;
  margin-top: 4em;
  margin-bottom: 1.5em;
  display: flex;
  border-radius: 3.125rem;
  background: #fff;
  border: none;
  padding: max(1%, 0.5rem) max(4%, 1.5rem);
  transition: all 100ms ease-in-out;
  cursor: pointer;
  color: var(--mainColor);
  border: 1px solid var(--mainColor);
  text-align: center;
  font-family: Noto Sans HK;
  font-size: clamp(0.875rem, 1.5vw, 1.25rem);
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 0.0875rem;
  transition: all 300ms ease-in-out;
}
.expand-btn:hover {
  background: var(--mainColor);
  color: #fff;
}

.expandable-section .expand-btn:hover {
  background-color: #0056b3;
}

/* Show the content when expanded */
.expandable-section.expanded .additional-content {
  display: block;
}

.baContainer {
  padding-bottom: min(7%, 2rem);
  width: min(84%, 55rem);
  margin-inline: auto;
}

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

picture img {
  vertical-align: top;
}

.posRe {
  position: relative;
}

.zIndex1 {
  position: relative;
  z-index: 1;
}

.aR349-299 {
  aspect-ratio: 349/299;
}

.widthFit {
  width: fit-content;
}

.width100 {
  width: 100%;
  height: auto;
}

.width80 {
  width: 80%;
  height: auto;
}

.mg0 {
  margin: 0;
}

.pdTop5pct {
  padding-top: 5%;
}

.pdTop7pct3rem {
  padding-top: min(7%, 3rem);
}

.pdBtm0 {
  padding-bottom: 0%;
}

.pdBtm1pct {
  padding-bottom: 1%;
}

.pdBtm3pct {
  padding-bottom: 3%;
}

.pdBtm5pct {
  padding-bottom: min(5%, 1rem);
}

.pdBtm7pct {
  padding-bottom: 7%;
}

.pdBtm10pct {
  padding-bottom: min(10%, 4rem);
}

.pdY7pct3rem {
  padding-block: min(7%, 3rem);
}

.pdY5pct2rem {
  padding-block: min(5%, 2rem);
}

.pd2p4p {
  padding: 2% 4%;
}

.gridCenter {
  display: grid;
  justify-items: center;
}

.mgXauto {
  margin-inline: auto;
}

.mgBlock0 {
  margin-block: 0;
}

.mgBlock2pct {
  margin-block: 2%;
}

.mgBlock10pct {
  margin-block: 10%;
}

.mgTop0 {
  margin-top: 0;
}

.mgTop5 {
  margin-top: min(5%, 2rem);
}

.mgTop7 {
  margin-top: 7%;
}

.mgTop10 {
  margin-top: 10%;
}

.mgTop13 {
  margin-top: 13%;
}

.mgBtm0 {
  margin-bottom: 0;
}

.mgBtm5pct {
  margin-bottom: min(5%, 3rem);
}

.mgBtm10pct {
  margin-bottom: min(10%, 6rem);
}

:root {
  --mainColor: #005d83;
}

.fontMainColor {
  color: #005d83;
}

.fontMainColor2 {
  color: #d3dfec;
}

.fontBlack {
  color: #484848;
}

.fontUdline {
  text-decoration: underline;
}

.textCenter {
  text-align: center;
}

.lineHeight0 {
  line-height: 0;
}

.lineHeight50 {
  line-height: 50%;
}

.fontW400 {
  font-weight: 400;
}

.fontW500 {
  font-weight: 500;
}

.fontW600 {
  font-weight: 600;
}

.fontW700 {
  font-weight: 700;
}

.justifyStart {
  justify-content: start;
}

.flexFAQ {
  display: flex;
  flex-direction: row;
  align-items: center;
}

#bannerContainer {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  /* 確保超出的部分不會顯示 */
}
@media screen and (min-width: 1024px) {
  #bannerContainer {
    aspect-ratio: 1920/1080;
    max-height: 100vh;
  }
}

#banner {
  position: relative;
  margin: 0;
  vertical-align: top;
  width: 100%;
  height: auto;
  aspect-ratio: 780/1240;
}

.hidden-for-seo {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

#bannerVideo {
  position: absolute;
  -o-object-fit: cover;
  object-fit: cover;
  pointer-events: none;
  /* 這會裁切影片使其填滿容器 */
  aspect-ratio: 1920/1080;
  width: 100%;
  height: auto;
  left: 0;
  top: 0;
  bottom: auto;
}

.scrollArrow {
  display: none;
}
@media (min-width: 1025px) {
  .scrollArrow {
    display: block;
    opacity: 1;
    transition: opacity 0.5s ease-out;
    position: absolute;
    bottom: 5%;
    left: 2.5%;
    z-index: 1;
  }
  @keyframes hideMask {
    0% {
      transform: translateY(-100%);
    }
    50% {
      transform: translateY(0%);
    }
    100% {
      transform: translateY(100%);
    }
  }
  .scrollArrow .hiding-mask {
    animation: hideMask 3s infinite;
  }
  .scrollArrow.scrolled {
    opacity: 0;
  }
}

.video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}
@media (min-width: 568px) {
  .video-wrapper {
    aspect-ratio: 16/9;
  }
}

.video-element {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.video-element::-webkit-media-controls {
  display: none !important;
}
.video-element::-webkit-media-controls-panel {
  display: none !important;
}
.video-element::-webkit-media-controls-play-button {
  display: none !important;
}
.video-element::-webkit-media-controls-start-playback-button {
  display: none !important;
}

.video-container {
  display: block;
}

.hidden-for-seo {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.desktop-only {
  display: none;
}

#surgeryPointsSection {
  width: 100%;
  background-color: rgb(250, 249, 247);
}

.surgeryPointsGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-inline: min(10%, 1rem);
  padding-block: 3%;
}

.surgeryPoints {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.surgeryPointsCircle {
  width: 2.625rem;
  height: 2.625rem;
  flex-shrink: 0;
  border-radius: 2.625rem;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.surgeryPointsCircle img {
  aspect-ratio: 1/1;
  width: 1.875rem;
  height: 1.875rem;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(19%) sepia(93%) saturate(2110%) hue-rotate(178deg) brightness(93%) contrast(101%);
}

.surgeryPointsText {
  text-align: center;
  line-height: 0.9;
}

.surgeryPointsTitle {
  color: #484848;
  font-size: 0.875rem;
  font-size: clamp(0.875rem, 2vw, 1.25rem);
  font-weight: 700;
}

.surgeryPointsContent {
  color: #484848;
  font-size: clamp(0.75rem, 2vw, 1rem);
  font-weight: 350;
}

.sectionContainer {
  width: min(90%, 72rem);
  margin-inline: auto;
  margin-block: clamp(2rem, 10%, 7rem);
}
.sectionContainer.withLine {
  border: 2px solid #005d83;
}
.sectionContainer.mgTop0 {
  margin-block: unset;
  margin-bottom: clamp(2rem, 10%, 7rem);
  margin-top: 0;
}
.sectionContainer.mgBtm0 {
  margin-block: unset;
  margin-top: clamp(2rem, 10%, 7rem);
  margin-bottom: 0;
}
.sectionContainer.mgBlock0 {
  margin-block: unset;
}

.pageContent hr {
  width: 2.813rem;
  height: 0.375rem;
  background: #005d83;
  border: none;
  margin: 0;
}
.pageContent hr.white {
  background: #fff;
}

.h2TitleContainer {
  text-align: left;
  margin-top: 3rem;
  margin-left: 2rem;
}

.h2TitleContainerCenter {
  text-align: center;
  margin-top: min(3rem, 5%);
}
.h2TitleContainerCenter.mgTop0 {
  margin-top: 0;
}
@media (min-width: 1024px) {
  .h2TitleContainerCenter.DmgTop0 {
    margin-top: 0;
  }
}

.h2Title {
  font-size: clamp(2rem, 3vw, 2.875rem);
  font-weight: 700;
  line-height: 120%;
  margin-top: 0.5rem;
}
.h2Title.lineH130 {
  line-height: 130%;
}
.h2Title.lineH90 {
  line-height: 90%;
}
.h2Title .smaller {
  font-size: clamp(1.75rem, 3vw, 2.875rem);
  letter-spacing: -0.175rem;
}
.h2Title.mg0 {
  margin: 0;
}

.titleCheckIt {
  font-size: clamp(2rem, 3vw, 3.75rem);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 0.9;
}

.whiteStroke {
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

.fourItemGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.313rem, 1fr));
  justify-items: center;
  place-content: center;
  gap: 0 0.9rem;
  margin-top: min(5vh, 1.5rem);
}

.painImage {
  aspect-ratio: 84/89;
  width: 100%;
  height: auto;
}

.numberCircle {
  display: flex;
  align-items: center;
  justify-content: center;
  position: static;
  margin: 0;
  background-color: #fff;
  border-radius: 50%;
  width: clamp(1.25rem, 3vw, 2.233rem);
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  font-size: clamp(0.875rem, 2vw, 1.563rem);
  line-height: 150%;
  letter-spacing: 0em;
  color: #005d83;
}

.painText {
  font-weight: 400;
  font-size: clamp(1.125rem, 4vw, 1.25rem);
  line-height: 150%;
  text-align: center;
  color: #484848;
  margin-top: 2%;
}

.title28and32 {
  font-size: clamp(1.75rem, 5vw, 2.875rem);
  line-height: 120%;
  text-transform: uppercase;
  color: #484848;
  font-style: normal;
  font-weight: 700;
  margin-top: 1rem;
  margin-bottom: 0;
}
.title28and32 .secondLine {
  font-size: clamp(2rem, 5vw, 2.875rem);
}

.secondTitle {
  font-size: clamp(1rem, 3vw, 1.875rem);
  color: rgba(72, 72, 72, 0.8);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  margin-left: 1%;
}

.secondTitle2 {
  font-size: clamp(0.875rem, 3vw, 1.875rem);
  color: #484848;
  text-align: center;
  font-style: normal;
  font-weight: 350;
  line-height: normal;
  letter-spacing: 0.0875rem;
  margin-left: unset;
}

.secondTitle3 {
  color: #484848;
  font-size: clamp(1rem, 3vw, 1.875rem);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
}

.secondTitle4 {
  color: #484848;
  font-size: clamp(0.875rem, 3vw, 1.875rem);
  text-align: center;
  font-weight: 700;
  line-height: 150%;
}

.secondTitle5 {
  font-size: clamp(1.125rem, 3vw, 1.875rem);
  color: #484848;
  text-align: center;
  font-weight: 700;
  line-height: 120%;
}

.secondTitle6 {
  font-size: clamp(1.5rem, 2vw, 1.875rem);
  text-align: center;
  font-weight: 700;
  line-height: 130%;
}

.secondTitle7 {
  color: #484848;
  font-size: clamp(0.875rem, 2vw, 1.25rem);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.0875rem;
  text-transform: uppercase;
}

.mainCaseReDiv {
  position: relative;
  aspect-ratio: 350/235;
  margin-top: 25%;
}

.mainCaseAbImg {
  position: absolute;
  top: -59%;
  object-fit: cover;
  object-position: 10% 5%;
  aspect-ratio: 350/366;
  width: 100%;
  height: auto;
}

.doctorDiv {
  position: relative;
  background: var(--design-linear, linear-gradient(180deg, #005d83 0%, #d3dfec 100%));
  aspect-ratio: 328/275;
  width: 100%;
  height: auto;
  margin-inline: auto;
  margin-block: 2%;
}

.mainDoctor {
  position: absolute;
  bottom: 0;
  object-fit: cover;
  aspect-ratio: 328/314;
  object-position: 50% 10%;
}

.doctorEN {
  color: #fff;
  font-size: clamp(3.125rem, 7vw, 7.852rem);
  font-weight: 700;
  line-height: 4.375rem;
  letter-spacing: 0.09375rem;
  text-transform: uppercase;
  margin-left: 3%;
}
.doctorEN .bigger {
  font-size: clamp(5rem, 11vw, 12.563rem);
}

.doctorQuote {
  position: absolute;
  right: 1%;
  top: 32%;
  color: #ffffff;
  font-size: clamp(0.8125rem, 2vw, 1.52969rem);
  font-weight: 300;
  line-height: 1rem;
  letter-spacing: -0.04063rem;
}
.doctorQuote .quote1,
.doctorQuote .quote2 {
  font-family: "RocknRoll One", sans-serif;
  color: rgba(72, 72, 72, 0.3);
  font-size: 3.125rem;
  font-size: clamp(3.125rem, 5vw, 5.88344rem);
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.09375rem;
  position: absolute;
}
.doctorQuote .quote1 {
  top: -77%;
  right: 65%;
  transform: rotate(180deg);
}
.doctorQuote .quote2 {
  right: 10%;
  top: 88%;
}

.niceLogoAb {
  position: absolute;
  aspect-ratio: 170/146;
  z-index: 0;
  width: 50%;
  top: -40%;
  left: 0;
}

.mainDoctorGrid {
  display: grid;
  grid-template-columns: 6.9fr 4fr;
}

.mainDoctorText {
  font-size: clamp(0.875rem, 2vw, 1.625rem);
  font-weight: 350;
  letter-spacing: -0.0875rem;
}

.doctorSkillsText {
  text-align: center;
  font-size: 0.75rem;
  font-size: clamp(0.75rem, 2vw, 1.625rem);
  font-weight: 500;
  letter-spacing: -0.0375rem;
}

.doctorSkillsGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  width: 90%;
  align-items: start;
}
.doctorSkillsGrid div {
  display: grid;
  align-items: center;
  justify-items: center;
  align-items: start;
}
.doctorSkillsGrid div > * {
  display: grid;
  align-items: start;
}

.doctorSkillIcon {
  background-color: #005d83;
  border-radius: 50%;
}

.mainDoctorCerContainer {
  aspect-ratio: 103/100;
  position: relative;
}

.mainDoctorCer {
  position: absolute;
  top: -20%;
  width: 100%;
}
@media (min-width: 1024px) {
  .mainDoctorCer {
    aspect-ratio: 863/614;
  }
}

.mainDoctorCerText {
  color: #fff;
  text-align: center;
  font-size: clamp(0.75rem, 2vw, 1.375rem);
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -0.04875rem;
  padding-inline: 4%;
  position: relative;
  z-index: 1;
  background: #484848;
}

.mainDoctorSurgeryGrid {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding-top: 0.5rem;
}

.equipmentImg1Div {
  aspect-ratio: 390/341;
  width: 100%;
  height: auto;
  position: relative;
}

.equipmentImg1 {
  aspect-ratio: 390/409;
  width: 100%;
  height: auto;
  position: absolute;
  top: -20%;
  z-index: 0;
}

.equipmentImg2 {
  aspect-ratio: 390/253;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 0;
}

.equipmentTitle {
  position: absolute;
  z-index: 1;
  top: min(-1rem, -30%);
  left: max(1rem, 4%);
}

.equipment2TextDiv {
  position: absolute;
  padding-block: min(3%, 2rem);
  background-color: #fff;
  top: 50%;
  left: 70%;
  height: fit-content;
  width: 50%;
  transform: translate(-50%, -50%);
}

.equipment2Title {
  text-align: center;
  font-size: clamp(1.125rem, 2vw, 1.875rem);
  font-weight: 700;
  line-height: 130%;
  margin-block: 0;
}

.equipment2Content {
  text-align: justify;
  font-size: clamp(0.625rem, 2vw, 1.25rem);
  font-weight: 350;
  width: 85%;
  margin-inline: auto;
  margin-block: 0;
}

.equipmentGrid {
  display: grid;
  grid-template-columns: auto auto;
  padding: 3% 4%;
  position: absolute;
  top: max(5rem, 102%);
}

.equipmentItemGrid {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: start;
}

.equipmentGridText {
  font-size: 0.75rem;
  font-size: clamp(0.75rem, 2vw, 1.625rem);
  font-weight: 350;
  margin-block: 0;
}

.checkIcon {
  aspect-ratio: 1/1;
  width: clamp(1.375rem, 2vw, 2.011rem);
  height: auto;
}
.checkIcon.mainColor {
  scale: 0.5;
  filter: brightness(0) saturate(100%) invert(19%) sepia(93%) saturate(2110%) hue-rotate(178deg) brightness(93%) contrast(101%);
}

.contentTextContainer {
  width: min(82%, 49rem);
  margin-inline: auto;
}

.contentTextContainer2 {
  width: min(82%, 49rem);
  margin-inline: auto;
}

.mainColorBG {
  background-color: #d3dfec;
}
.mainColorBG.forDfTitle {
  width: 7em;
}

.whiteBG {
  background-color: #fff;
}

.grayBG {
  background: #f6f3ee;
}

.BGpadding {
  padding-block: 1vh;
}

.BGpaddingInside {
  padding-block: 2.5%;
}
.BGpaddingInside.pdBtm0 {
  padding-bottom: 0;
}

.insideContainer {
  padding-block: min(7%, 6rem);
  width: min(90%, 75rem);
  margin-inline: auto;
}

.insideContainer2 {
  padding-block: min(7%, 6rem);
  width: min(90%, 55rem);
  margin-inline: auto;
  position: relative;
}

.insideContainer3 {
  width: min(100%, 55rem);
  margin-inline: auto;
}

.mBtmForTitles {
  margin-bottom: min(0.5rem, 1%);
  margin-top: 0.5rem;
}

.comparison-slider-wrapper {
  position: relative;
  width: 100%;
  background-color: white;
}
.comparison-slider-wrapper .comparison-slider {
  position: relative;
  width: 100%;
  margin: 0;
  -webkit-background-clip: padding-box;
  /* for Safari */
  background-clip: padding-box;
  /* for IE9+, Firefox 4+, Opera, Chrome */
  box-sizing: border-box;
}
.comparison-slider-wrapper .comparison-slider img {
  aspect-ratio: 350/280;
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  object-position: 50% 80%;
}
.comparison-slider-wrapper .comparison-slider .resize {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  overflow: hidden;
}
.comparison-slider-wrapper .comparison-slider .resize > img {
  display: block;
}
.comparison-slider-wrapper .comparison-slider .divider {
  position: absolute;
  width: 2px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  left: 50%;
  top: 0;
  bottom: 0;
  margin-left: -1px;
  cursor: ew-resize;
}
.comparison-slider-wrapper .comparison-slider .divider:before {
  content: url(../img/RWD_img/BAButton.svg);
  position: absolute;
  left: -0.8rem;
  top: 50%;
  margin-top: -10px;
  transition: all 0.1s ease-in-out;
}
.comparison-slider-wrapper .comparison-slider .divider:hover:before, .comparison-slider-wrapper .comparison-slider .divider.draggable:before {
  scale: 1.25;
}

.moreCaseDivGrid {
  width: min(85%, 32rem);
  margin-inline: auto;
}

.moreCaseGrid {
  display: grid;
  grid-template-rows: auto 1.1fr 1fr;
  justify-items: center;
  align-items: center;
}

.moreCaseBorder {
  border: 1px solid #005d83;
}

.moreCaseImg {
  aspect-ratio: 274/229;
  width: 100%;
  min-height: 7.1275rem;
  background-color: #005d83;
}

.moreCaseTitle {
  color: #484848;
  text-align: center;
  font-size: clamp(0.875rem, 2.5vw, 1.59331rem);
  font-style: normal;
  font-weight: 500;
  line-height: 110%;
}

.moreCaseButton {
  cursor: pointer;
  border: 1px solid #005d83;
  width: 5.22119rem;
  height: 1.55225rem;
  flex-shrink: 0;
  background-color: transparent;
  color: #005d83;
  text-align: center;
  font-size: clamp(0.75rem, 2vw, 1.25rem);
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 0.0225rem;
  margin-top: 0.3rem;
  margin-bottom: 12%;
}
.moreCaseButton:hover {
  background-color: #005d83;
  color: #ffffff;
  transition: all 250ms ease-in;
}

.serviceItem {
  position: relative;
  width: 100%;
  justify-self: center;
}

.serviceWrapper {
  display: flex;
  align-items: stretch;
  position: relative;
}

.serviceImage {
  aspect-ratio: 21/20;
  width: 100%;
  height: auto;
  vertical-align: top;
}

.serviceOverlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
  width: 100%;
  opacity: 0;
  transition: 0.5s ease;
  background-color: rgba(157, 157, 157, 0.71);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
.serviceOverlay ul {
  padding-inline-start: 1rem;
}

.overlayText {
  font-weight: 500;
  font-size: clamp(0.875rem, 3vw, 1.25rem);
  line-height: 150%;
  color: #fff;
  text-align: left;
  width: 80%;
}

.serviceItem:hover .serviceOverlay {
  opacity: 1;
}

.serviceTitleDiv {
  background: #005d83;
  border-radius: 0px 0px 10px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 0.1em;
  color: #fff;
  height: clamp(2.125rem, 15%, 3.75rem);
  position: relative;
  z-index: 2;
}
.serviceTitleDiv h3 {
  margin-left: 0.5rem;
  font-size: clamp(1rem, 3vw, 1.75rem);
}

.suitableGrid {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
}
.suitableGrid div:last-child {
  border-bottom: 0px;
}

.suitableItemGrid {
  display: grid;
  grid-template-columns: minmax(auto, 8em) auto;
  width: 80%;
  align-items: center;
  align-content: center;
  margin-inline: auto;
  border-bottom: 0.5px dashed #d9d9d9;
}
.suitableItemGrid img {
  scale: 0.6;
  filter: brightness(0) saturate(100%) invert(19%) sepia(93%) saturate(2110%) hue-rotate(178deg) brightness(93%) contrast(101%);
}
.suitableItemGrid.switch {
  grid-template-columns: auto minmax(auto, 8em);
}
.suitableItemGrid.switch img {
  order: 1;
}

.suitableItemText {
  text-align: center;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 400;
  line-height: 150%;
}

.order1 {
  order: 1;
}

.order2 {
  order: 2;
}

.surgeryPro {
  position: relative;
  transition: all 300ms ease-in-out;
}

.surgeryProImg {
  aspect-ratio: 285/165;
  width: 100%;
  height: auto;
  border-radius: clamp(1.25rem, 3vw, 2.0395rem);
}

.surgeryProText {
  color: #fff;
  font-size: clamp(0.875rem, 2vw, 1.25rem);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
}

.surgeryProNumber {
  position: absolute;
  bottom: 2%;
  right: 3%;
  color: rgba(228, 238, 248, 0.6);
  font-size: clamp(4rem, 5vw, 6.52631rem);
  font-weight: 700;
  line-height: 130%;
}

.surgeryPro:hover {
  scale: 1.1;
}
.surgeryPro:hover .surgeryProImg {
  box-shadow: 7px 8px 9px -1px rgba(0, 93, 131, 0.5);
  -webkit-box-shadow: 7px 8px 9px -1px rgba(0, 93, 131, 0.5);
  -moz-box-shadow: 7px 8px 9px -1px rgba(0, 93, 131, 0.5);
  border: 3px inset #005d83;
}

.benefitsGrid:has(.surgeryPro:hover) .surgeryPro:not(:hover) {
  scale: 0.925;
  opacity: 0.5;
}

.contentImg1 {
  aspect-ratio: 288/204;
  width: min(85%, 49rem);
  height: auto;
}

.contentImg2 {
  aspect-ratio: 288/204;
  width: min(85%, 49rem);
  height: auto;
}

.contentImg3 {
  aspect-ratio: 286/573;
  width: min(85%, 49rem);
  height: auto;
}
@media (min-width: 578px) {
  .contentImg3 {
    aspect-ratio: 850/465;
  }
}

.modelLogo {
  aspect-ratio: 856/292;
  width: clamp(12.1875rem, 20vw, 18.125rem);
  height: auto;
  background-color: transparent;
}

.IntroBtnGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-inline: auto;
  width: min(90%, 32rem);
  justify-items: center;
  margin-top: min(2rem, 5%);
  gap: 2rem 0rem;
}

.IntroBtn {
  width: min(100%, 15.69163rem);
  border: none;
  cursor: pointer;
  appearance: none;
  background-color: inherit;
  display: grid;
  justify-items: center;
  transition: scale 300ms ease-in-out;
}
.IntroBtn:hover .IntroBtnText, .IntroBtn.active .IntroBtnText {
  background: transparent;
}
.IntroBtn:hover .IntroBtnText::before, .IntroBtn.active .IntroBtnText::before {
  opacity: 1;
  transition: opacity 300ms ease-in-out;
}
.IntroBtn:hover {
  scale: 1.1;
}

.IntroBtnText {
  display: grid;
  align-items: center;
  width: min(90%, 15.08594rem);
  height: clamp(2.1875rem, 3vw, 3.54325rem);
  border-radius: 3.125rem;
  background: #005d83;
  transition: background 300ms ease-in-out;
  color: #fff;
  text-align: center;
  font-size: clamp(1.125rem, 2vw, 1.75rem);
  font-weight: 400;
  line-height: 150%;
  position: relative;
  /* 為了定位偽元素 */
}
.IntroBtnText::before {
  content: "";
  position: absolute;
  border-radius: 3.125rem;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--design-linear, linear-gradient(180deg, #005d83 0%, #d3dfec 100%));
  opacity: 0;
  z-index: -1;
  transition: opacity 300ms ease-in-out;
}

.arrow2 {
  animation: slideUpDown 2s ease-in-out infinite;
}

@keyframes slideUpDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1.5rem);
  }
  100% {
    transform: translateY(0);
  }
}
.mentorImg1 {
  aspect-ratio: 807/367;
  width: min(100%, 49rem);
  height: auto;
}

.mentorImg2 {
  aspect-ratio: 950/383;
  width: min(100%, 49rem);
  height: auto;
}

.mentorImg3 {
  aspect-ratio: 807/407;
  width: min(100%, 49rem);
  height: auto;
}

.mentorImg4 {
  aspect-ratio: 807/403;
  width: min(100%, 49rem);
  height: auto;
}

.tabsContentDiv {
  position: relative;
  width: 100%;
  height: auto;
  margin-inline: auto;
  margin-top: min(8%, 2.5rem);
}
.tabContent {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  visibility: hidden;
  pointer-events: none;
}
.tabContent.choose {
  position: relative;
}
.tabContent.active {
  opacity: 1;
  visibility: visible;
  transition: all 500ms ease-in;
  pointer-events: auto;
}

.benefitsGrid {
  display: grid;
  gap: 1rem;
  padding-bottom: min(7%, 2rem);
  width: min(84%, 55rem);
  margin-inline: auto;
}

.benefitsItemGrid {
  border-radius: 1.25rem;
  border: 2px solid #005d83;
  border-radius: 1.25rem;
  display: grid;
  position: relative;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  align-content: center;
  margin-inline: auto;
  width: 100%;
  transition: all 250ms ease-in-out;
}
.benefitsItemGrid img {
  scale: 0.7;
  filter: brightness(0) saturate(100%) invert(19%) sepia(93%) saturate(2110%) hue-rotate(178deg) brightness(93%) contrast(101%);
}
.benefitsItemGrid .fluffProIcon {
  scale: 0.8;
}
.benefitsItemGrid:hover {
  scale: 1.1;
  z-index: 1;
  background-color: #005d83;
}
.benefitsItemGrid:hover img {
  filter: brightness(100) contrast(3);
}
.benefitsItemGrid:hover .fluffProIcon {
  filter: brightness(1) contrast(2);
}
.benefitsItemGrid:hover .benefitsItemText {
  color: #fff;
}
.benefitsItemGrid:hover .benefitsNumber {
  color: rgba(255, 255, 255, 0.2);
}

.benefitsGrid:has(.benefitsItemGrid:hover) .benefitsItemGrid:not(:hover) {
  scale: 0.95;
  opacity: 0.5;
}

.benefitsItemText {
  font-size: 0.875rem;
  font-size: clamp(0.875rem, 2vw, 1.25rem);
  font-weight: 350;
}

.fluffProTextDcr {
  position: absolute;
  top: 74%;
  left: 39%;
  transform: translate(-50%, -50%);
  width: 31%;
}

.benefitsNumber {
  position: absolute;
  bottom: -4%;
  right: 0%;
  color: #d3dfec;
  font-size: clamp(4rem, 5vw, 6.52631rem);
  font-weight: 700;
  line-height: 130%;
}

.font18to30 {
  font-weight: 700;
  font-size: 1.125rem;
  font-size: clamp(1.125rem, 3vw, 1.875rem);
  line-height: 130%;
}

.contentText {
  font-weight: 350;
  font-size: clamp(14px, 3vw, 18px);
  line-height: 150%;
  text-align: justify;
  color: #484848;
}
.contentText.font14to30 {
  font-size: clamp(0.875rem, 2vw, 1.875rem);
}
.contentText.textCenter {
  text-align: center;
}

.tableGrid {
  display: grid;
  grid-template-columns: auto auto;
  position: relative;
  grid-template-rows: 20rem;
}

.tableLeftDiv {
  height: 100%;
}

.tableRightDiv {
  overflow-x: auto;
  overflow-y: hidden;
  height: 100%;
}

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

.tableLeft {
  aspect-ratio: 91/330;
  height: 100%;
}

.tableRight {
  aspect-ratio: 740/330;
  height: 100%;
}

.tableFull {
  aspect-ratio: 832/330;
  width: 75rem;
  height: auto;
  margin-inline: auto;
}

.tableGrid,
.tableFull {
  box-shadow: -1px 9px 13px 1px rgba(66, 66, 66, 0.14);
  -webkit-box-shadow: -1px 9px 13px 1px rgba(66, 66, 66, 0.14);
  -moz-box-shadow: -1px 9px 13px 1px rgba(66, 66, 66, 0.14);
}

.differentText {
  font-size: clamp(0.875rem, 2vw, 1.625rem);
  font-weight: 350;
  width: min(82%, 46rem);
  margin-inline: auto;
}

.contentContainer1 {
  width: min(82%, 82rem);
  margin-inline: auto;
  text-align: center;
}

.contentContainer2 {
  width: min(82%, 35rem);
  margin-inline: auto;
}

.readMoreBtn {
  border: clamp(0.063rem, 0.5vw, 0.125rem) solid #005d83;
  border-radius: clamp(1.563rem, 3vw, 3.237rem);
  background-color: rgba(0, 0, 0, 0);
  margin-block: min(10%, 5vh);
  padding: min(2%, 0.5em) 5vw;
  font-weight: 700;
  line-height: 150%;
  text-align: center;
  letter-spacing: 0.1em;
  cursor: pointer;
  width: min(100%, 34em);
}
.readMoreBtn:hover {
  background-color: #005d83;
  color: #fff;
  transition: all 250ms ease-in;
}
.readMoreBtn.whiteBG {
  background-color: #fff;
}
.readMoreBtn.whiteBG:hover {
  background-color: #005d83;
  color: #fff;
}

.font12to20 {
  font-size: clamp(0.75rem, 3vw, 1.25rem);
}

.ENTitle {
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3.75rem);
  line-height: 0.8;
  color: #484848;
}
.ENTitle.sm {
  font-size: clamp(1.75rem, 3vw, 3.6445rem);
}

.differentGrid {
  display: grid;
  width: min(95%, 35rem);
  margin-inline: auto;
  align-items: center;
}

.differentTable {
  aspect-ratio: 362/391;
  width: 100%;
  height: auto;
}

.attentionGrid {
  display: grid;
  justify-content: center;
  width: min(90%, 55rem);
  margin-inline: auto;
  gap: 1.5rem;
  justify-content: center;
  padding-inline: 0;
  list-style: none;
}
.attentionGrid p {
  margin-block: 0;
}

.attentionItemGrid {
  display: grid;
  grid-template-columns: 0.75fr 9fr;
}
@media (min-width: 1024px) {
  .attentionItemGrid {
    gap: 1rem;
    align-items: center;
  }
}

.attentionCircle {
  display: flex;
  justify-content: center;
  position: static;
  margin: 0;
  border-radius: 50%;
  width: clamp(1.25rem, 4vw, 3.51rem);
  height: clamp(1.25rem, 4vw, 3.51rem);
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  font-size: clamp(0.875rem, 2vw, 2.457rem);
  line-height: 150%;
  letter-spacing: 0em;
  align-items: flex-end;
  background-color: #005d83;
  color: #fff;
}

.pageContent hr.contentLine {
  color: #d3dfec;
}

.accordion.active, .accordion.accordion:hover {
  background-color: #d3dfec;
}

.panel {
  border-bottom: 0.063rem solid #d3dfec;
}

@media screen and (min-width: 1601px) {
  .mobile-only {
    display: none;
  }
  .mobile-only.contentTextContainer {
    display: none;
  }
  .desktop-only {
    display: block;
  }
  .desktop-only.contents {
    display: contents;
  }
  .desktop-only.inline {
    display: inline-block;
  }
  .h2Title {
    letter-spacing: 0.05em;
  }
  .h2Title.DsmallH2 {
    font-size: 1.875rem;
    text-align: center;
  }
  .DmgTop3pct {
    margin-top: 3%;
  }
  .DmgTop5pct {
    margin-top: 5%;
  }
  .DmgBtm3pct {
    margin-bottom: 3%;
  }
  .DmgBtm10pct {
    margin-bottom: 10%;
  }
  .DmgBlock4pct {
    margin-block: 4%;
  }
  .Dwidth70 {
    width: 70%;
  }
  .Dwidth85 {
    width: 85%;
  }
  .DmgY5pct {
    margin-block: 5%;
  }
  .DpdTop5pct {
    padding-top: 5%;
  }
  .DpdTop10pct {
    padding-top: 10%;
  }
  .DpdBtm10pct {
    padding-bottom: 10%;
  }
  .DfontBlack {
    color: #484848;
  }
  .DmarginAuto {
    margin: auto;
  }
  .DmarginY10rem {
    margin-block: 10rem;
  }
  .Dmargin0 {
    margin: 0;
  }
  .DmarginTop1rem {
    margin-top: 1rem;
  }
  .DmarginTop1-5rem {
    margin-top: 1.5rem;
  }
  .DmarginTop3rem {
    margin-top: 3rem;
  }
  .DmgTop5rem {
    margin-top: 5rem;
  }
  .DmarginTop10rem {
    margin-top: 10rem;
  }
  .DmarginBtm1-5rem {
    margin-bottom: 1.5rem;
  }
  .DmarginBtm4rem {
    margin-bottom: 4rem;
  }
  .DmarginBtm7rem {
    margin-bottom: 7rem;
  }
  .DmarginLeft0 {
    margin-left: 0;
  }
  .DalignStart {
    align-items: flex-start;
  }
  .DpaddingLeft47 {
    padding-left: 47%;
  }
  .DpaddingLeft50 {
    padding-left: 50%;
  }
  .Dpadding0 {
    padding: 0;
  }
  .Dpadding5rem {
    padding: 5rem;
  }
  .DpaddingX4rem {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .DpaddingX5rem {
    padding-left: 5rem;
    padding-right: 5rem;
  }
  .DpaddingX6rem {
    padding-left: 6rem;
    padding-right: 6rem;
  }
  .DpaddingX6-8rem {
    padding-left: 6.8rem;
    padding-right: 6.8rem;
  }
  .DpaddingX9rem {
    padding-left: 9rem;
    padding-right: 9rem;
  }
  .DpaddingX10rem {
    padding-inline: 10rem;
  }
  .DpaddingY5rem {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  .DpaddingTop3rem {
    padding-top: 3rem;
  }
  .DpaddingTop5rem {
    padding-top: 5rem;
  }
  .DpaddingTop7rem {
    padding-top: 7rem;
  }
  .DpaddingTop10rem {
    padding-top: 10rem;
  }
  .DpaddingBtm0-1rem {
    padding-bottom: 0.1rem;
  }
  .DpaddingBtm3rem {
    padding-bottom: 3rem;
  }
  .DpaddingBtm10rem {
    padding-bottom: 10rem;
  }
  .Dgap5rem {
    gap: 5rem;
  }
  .DtextCenter {
    text-align: center;
  }
  .DtextLeft {
    text-align: left;
  }
  .Drelative {
    position: relative;
  }
  .DrightImage {
    position: absolute;
    top: -100%;
    right: 10%;
  }
  .DrightImageV2 {
    position: absolute;
    top: -60%;
    right: 10%;
  }
  .DrightImageTop-30 {
    position: absolute;
    top: -30%;
    right: 0;
  }
  .DrightImageV3 {
    position: absolute;
    top: -80%;
    right: 11%;
  }
  .DrightImageV4 {
    position: absolute;
    top: -50%;
    right: 5%;
  }
  .DrightImageV5 {
    position: absolute;
    top: 30%;
    right: 10%;
  }
  .Dwidth35 {
    width: 35%;
  }
  .Dwidth40 {
    width: 40%;
  }
  .Dwidth50 {
    width: 50%;
  }
  .Dwidth55 {
    width: 55%;
  }
  .Dwidth100 {
    width: 100%;
  }
  .DgridCol1fr1fr {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .Dorder1 {
    order: 1;
  }
  .pageContent hr {
    width: 5.25rem;
    height: 0.563rem;
    margin-inline: auto;
  }
  .pageContent hr.white {
    width: 7.313rem;
    height: 0.813rem;
    margin-inline: unset;
  }
  .pageContent hr.Dleft {
    width: 7.3125rem;
    height: 0.8125rem;
    flex-shrink: 0;
    margin-inline: unset;
  }
  #banner img {
    aspect-ratio: 1903/744;
  }
  .surgeryPointsGrid {
    padding-block: 0.5%;
    margin-inline: 22%;
  }
  .surgeryPointsCircle {
    width: 4.52188rem;
    height: 4.52188rem;
    flex-shrink: 0;
  }
  .surgeryPointsCircle img {
    width: 3.01463rem;
    height: 3.01463rem;
    flex-shrink: 0;
  }
  .surgeryPoints {
    flex-direction: row;
    gap: 0.5rem;
  }
  .surgeryPointsText {
    text-align: left;
    line-height: normal;
  }
  .fourItemGrid {
    margin-top: min(5vh, 4rem);
  }
  .painCircle {
    font-weight: 500;
    font-size: 1.875rem;
    line-height: 150%;
    border: 0.25rem dashed rgba(255, 255, 255, 0.81);
    width: 5.289rem;
    height: 5.289rem;
  }
  .painText {
    font-weight: 500;
  }
  .DmainCaseInsideWidth {
    width: min(80%, 82rem);
    margin-inline: auto;
  }
  .mainCaseGrid1 {
    display: grid;
    grid-template-columns: 4.5fr 5.5fr;
    gap: 2rem;
  }
  .mainCaseAbImg {
    right: 0;
    top: -348%;
    aspect-ratio: 502/554;
    object-fit: contain;
    width: 100%;
    height: auto;
  }
  .DmainCaseGrid2 {
    display: grid;
    grid-template-columns: 4.5fr 5.5fr;
  }
  .DmainCaseGrid3 {
    display: grid;
    grid-template-columns: 4.65fr 5.35fr;
    margin-top: 1rem;
  }
  .DmainCaseGrid3.DmgTop0 {
    margin-top: 0;
  }
  .DmainCaseGrid3.alignCenter {
    align-items: center;
  }
  .mainCaseReDiv {
    aspect-ratio: 502/115;
  }
  .DimgCover {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .DimgCover.leftPosition {
    object-position: 0% 53%;
  }
  .DpdTop0 {
    padding-top: 0;
  }
  .DgrayBG {
    background-color: rgb(250, 249, 247);
  }
  .DimgCover {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .DimgCover.leftPosition {
    object-position: 53% 53%;
  }
  .secondTitle {
    line-height: 2.063rem;
  }
  .comparison-slider-wrapper .comparison-slider .divider::before {
    scale: 1.5;
  }
  .comparison-slider-wrapper .comparison-slider .divider:hover:before, .comparison-slider-wrapper .comparison-slider .divider.draggable:before {
    scale: 1.75;
  }
  .comparison-slider-wrapper .comparison-slider img {
    aspect-ratio: 802/379;
    object-position: 50% 60%;
  }
  .moreCaseDivGrid {
    width: 100%;
  }
  .moreCaseGrid {
    gap: 1rem;
  }
  .moreCaseButton {
    letter-spacing: 0.0375rem;
    width: 9.50738rem;
    height: 2.8265rem;
    border: 2px solid #005d83;
  }
  .moreCaseBorder {
    border: 2px solid #005d83;
  }
  .niceLogoAb {
    scale: 0.8;
    left: -28.5%;
  }
  .mainDoctor {
    aspect-ratio: 452/554;
    width: 64%;
    left: 18%;
  }
  .doctorDiv {
    aspect-ratio: 833/574;
    margin-bottom: 0;
  }
  .doctorEN {
    line-height: 10.99263rem;
  }
  .doctorQuote {
    line-height: 1.88269rem;
    letter-spacing: -0.0765rem;
  }
  .doctorQuote .quote2 {
    right: 15%;
  }
  .mainDoctorText {
    letter-spacing: 0.04875rem;
    margin-block: 2% 5%;
  }
  .doctorSkillsGrid {
    width: 67%;
    gap: 1rem;
  }
  .mainDoctorCerContainer {
    aspect-ratio: 103/70;
  }
  .mainDoctorCer {
    aspect-ratio: 863/614;
    top: 60%;
    right: 0%;
    width: 120%;
  }
  .mainDoctorSurgeryGrid {
    grid-template-columns: 1fr 1fr;
  }
  .mainDoctorSurgeryImg1 {
    transform: translate(-3em, 2em);
    scale: 1.7;
  }
  .mainDoctorSurgeryImg2 {
    transform: translate(-1em, 2em);
    scale: 1.7;
  }
  .equipmentImg1Div {
    /* aspect-ratio: 390/120; */
    height: 50rem;
    aspect-ratio: auto;
  }
  .equipmentImg1 {
    aspect-ratio: 1219/1009;
    height: auto;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .equipmentTitle {
    position: absolute;
    z-index: 1;
  }
  .equipment2Title {
    margin-block: 2%;
  }
  .equipmentGrid {
    background: rgba(255, 255, 255, 0.7);
    padding: 2% 2%;
    gap: 1.5em;
    top: min(8rem, 70%);
  }
  .checkIcon.mainColor {
    scale: 1;
  }
  .equipmentItemGrid {
    gap: 0.5em;
  }
  .equipmentImg2 {
    aspect-ratio: 85/44;
  }
  .DinsideContainer {
    width: min(90%, 75rem);
    margin-inline: auto;
  }
  .suitableGrid {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 0;
    width: 80%;
    margin-inline: auto;
  }
  .suitableGrid :nth-last-child(-n+2) {
    border-bottom: 0;
  }
  .suitableItemGrid {
    width: 100%;
  }
  .suitableItemGrid img {
    scale: 0.8;
  }
  .suitableItemGrid.switch {
    grid-template-columns: minmax(auto, 8em) auto;
  }
  .suitableItemGrid.switch img {
    order: 0;
  }
  .benefitsGrid {
    grid-template-columns: repeat(2, 1fr);
  }
  .sectionContainer.withLine {
    border: 4px solid #005d83;
  }
  .eyeBagGrid {
    gap: 2rem;
  }
  .judgeItemTextDiv {
    height: fit-content;
  }
  .typeGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
  .differentContent.DletSpc1 {
    letter-spacing: -0.045rem;
  }
  .differentContent.DletSpc2 {
    letter-spacing: 0.075rem;
  }
  .h2TitleContainer {
    margin: unset;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1600px) {
  .mobile-only {
    display: none;
  }
  .mobile-only.contentTextContainer {
    display: none;
  }
  .desktop-only {
    display: block;
  }
  .desktop-only.contents {
    display: contents;
  }
  .desktop-only.inline {
    display: inline-block;
  }
  .h2Title {
    letter-spacing: 0.05em;
  }
  .h2Title.DsmallH2 {
    font-size: 1.875rem;
    text-align: center;
  }
  .DmgTop3pct {
    margin-top: 3%;
  }
  .DmgTop5pct {
    margin-top: 5%;
  }
  .DmgBtm3pct {
    margin-bottom: 3%;
  }
  .DmgBtm10pct {
    margin-bottom: 10%;
  }
  .DmgBlock4pct {
    margin-block: 4%;
  }
  .Dwidth70 {
    width: 70%;
  }
  .Dwidth85 {
    width: 85%;
  }
  .DmgY5pct {
    margin-block: 5%;
  }
  .DpdTop5pct {
    padding-top: 5%;
  }
  .DpdTop10pct {
    padding-top: 10%;
  }
  .DpdBtm10pct {
    padding-bottom: 10%;
  }
  .DfontBlack {
    color: #484848;
  }
  .DmarginAuto {
    margin: auto;
  }
  .DmarginY10rem {
    margin-block: 10rem;
  }
  .Dmargin0 {
    margin: 0;
  }
  .DmarginTop1rem {
    margin-top: 1rem;
  }
  .DmarginTop1-5rem {
    margin-top: 1.5rem;
  }
  .DmarginTop3rem {
    margin-top: 3rem;
  }
  .DmgTop5rem {
    margin-top: 5rem;
  }
  .DmarginTop10rem {
    margin-top: 10rem;
  }
  .DmarginBtm1-5rem {
    margin-bottom: 1.5rem;
  }
  .DmarginBtm4rem {
    margin-bottom: 4rem;
  }
  .DmarginBtm7rem {
    margin-bottom: 7rem;
  }
  .DmarginLeft0 {
    margin-left: 0;
  }
  .DalignStart {
    align-items: flex-start;
  }
  .DpaddingLeft47 {
    padding-left: 47%;
  }
  .DpaddingLeft50 {
    padding-left: 50%;
  }
  .Dpadding0 {
    padding: 0;
  }
  .Dpadding5rem {
    padding: 5rem;
  }
  .DpaddingX4rem {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .DpaddingX5rem {
    padding-left: 5rem;
    padding-right: 5rem;
  }
  .DpaddingX6rem {
    padding-left: 6rem;
    padding-right: 6rem;
  }
  .DpaddingX6-8rem {
    padding-left: 6.8rem;
    padding-right: 6.8rem;
  }
  .DpaddingX9rem {
    padding-left: 9rem;
    padding-right: 9rem;
  }
  .DpaddingX10rem {
    padding-inline: 10rem;
  }
  .DpaddingY5rem {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  .DpaddingTop3rem {
    padding-top: 3rem;
  }
  .DpaddingTop5rem {
    padding-top: 5rem;
  }
  .DpaddingTop7rem {
    padding-top: 7rem;
  }
  .DpaddingTop10rem {
    padding-top: 10rem;
  }
  .DpaddingBtm0-1rem {
    padding-bottom: 0.1rem;
  }
  .DpaddingBtm3rem {
    padding-bottom: 3rem;
  }
  .DpaddingBtm10rem {
    padding-bottom: 10rem;
  }
  .Dgap5rem {
    gap: 5rem;
  }
  .DtextCenter {
    text-align: center;
  }
  .DtextLeft {
    text-align: left;
  }
  .Drelative {
    position: relative;
  }
  .DrightImage {
    position: absolute;
    top: -100%;
    right: 10%;
  }
  .DrightImageV2 {
    position: absolute;
    top: -60%;
    right: 10%;
  }
  .DrightImageTop-30 {
    position: absolute;
    top: -30%;
    right: 0;
  }
  .DrightImageV3 {
    position: absolute;
    top: -80%;
    right: 11%;
  }
  .DrightImageV4 {
    position: absolute;
    top: -50%;
    right: 5%;
  }
  .DrightImageV5 {
    position: absolute;
    top: 30%;
    right: 10%;
  }
  .Dwidth35 {
    width: 35%;
  }
  .Dwidth40 {
    width: 40%;
  }
  .Dwidth50 {
    width: 50%;
  }
  .Dwidth55 {
    width: 55%;
  }
  .Dwidth100 {
    width: 100%;
  }
  .DgridCol1fr1fr {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .Dorder1 {
    order: 1;
  }
  .pageContent hr {
    width: 5.25rem;
    height: 0.563rem;
    margin-inline: auto;
  }
  .pageContent hr.white {
    width: 7.313rem;
    height: 0.813rem;
    margin-inline: unset;
  }
  .pageContent hr.Dleft {
    width: 7.3125rem;
    height: 0.8125rem;
    flex-shrink: 0;
    margin-inline: unset;
  }
  #banner img {
    aspect-ratio: 1903/744;
  }
  .surgeryPointsGrid {
    padding-block: 0.5%;
    margin-inline: 22%;
  }
  .surgeryPointsCircle {
    width: 4.52188rem;
    height: 4.52188rem;
    flex-shrink: 0;
  }
  .surgeryPointsCircle img {
    width: 3.01463rem;
    height: 3.01463rem;
    flex-shrink: 0;
  }
  .surgeryPoints {
    flex-direction: row;
    gap: 0.5rem;
  }
  .surgeryPointsText {
    text-align: left;
    line-height: normal;
  }
  .fourItemGrid {
    margin-top: min(5vh, 4rem);
  }
  .painCircle {
    font-weight: 500;
    font-size: 1.875rem;
    line-height: 150%;
    border: 0.25rem dashed rgba(255, 255, 255, 0.81);
    width: 5.289rem;
    height: 5.289rem;
  }
  .painText {
    font-weight: 500;
  }
  .DmainCaseInsideWidth {
    width: min(80%, 82rem);
    margin-inline: auto;
  }
  .mainCaseGrid1 {
    display: grid;
    grid-template-columns: 4.5fr 5.5fr;
    gap: 2rem;
  }
  .mainCaseAbImg {
    right: 0;
    top: -348%;
    aspect-ratio: 502/554;
    object-fit: contain;
    width: 100%;
    height: auto;
  }
  .DmainCaseGrid2 {
    display: grid;
    grid-template-columns: 4.5fr 5.5fr;
  }
  .DmainCaseGrid3 {
    display: grid;
    grid-template-columns: 4.65fr 5.35fr;
    margin-top: 1rem;
  }
  .DmainCaseGrid3.DmgTop0 {
    margin-top: 0;
  }
  .DmainCaseGrid3.alignCenter {
    align-items: center;
  }
  .mainCaseReDiv {
    aspect-ratio: 502/115;
  }
  .DimgCover {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .DimgCover.leftPosition {
    object-position: 0% 53%;
  }
  .DpdTop0 {
    padding-top: 0;
  }
  .DgrayBG {
    background-color: rgb(250, 249, 247);
  }
  .DimgCover {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .DimgCover.leftPosition {
    object-position: 53% 53%;
  }
  .secondTitle {
    line-height: 2.063rem;
  }
  .comparison-slider-wrapper .comparison-slider .divider::before {
    scale: 1.5;
  }
  .comparison-slider-wrapper .comparison-slider .divider:hover:before, .comparison-slider-wrapper .comparison-slider .divider.draggable:before {
    scale: 1.75;
  }
  .comparison-slider-wrapper .comparison-slider img {
    aspect-ratio: 802/379;
    object-position: 50% 60%;
  }
  .moreCaseDivGrid {
    width: 100%;
  }
  .moreCaseGrid {
    gap: 1rem;
  }
  .moreCaseButton {
    letter-spacing: 0.0375rem;
    width: 9.50738rem;
    height: 2.8265rem;
    border: 2px solid #005d83;
  }
  .moreCaseBorder {
    border: 2px solid #005d83;
  }
  .niceLogoAb {
    scale: 0.8;
    left: -28.5%;
  }
  .mainDoctor {
    aspect-ratio: 452/554;
    width: 64%;
    left: 18%;
  }
  .doctorDiv {
    aspect-ratio: 833/574;
    margin-bottom: 0;
  }
  .doctorEN {
    line-height: 10.99263rem;
  }
  .doctorQuote {
    line-height: 1.88269rem;
    letter-spacing: -0.0765rem;
  }
  .doctorQuote .quote2 {
    right: 15%;
  }
  .mainDoctorText {
    letter-spacing: 0.04875rem;
    margin-block: 2% 5%;
  }
  .doctorSkillsGrid {
    width: 67%;
    gap: 1rem;
  }
  .mainDoctorCerContainer {
    aspect-ratio: 103/70;
  }
  .mainDoctorCer {
    aspect-ratio: 863/614;
    top: 60%;
    right: 0%;
    width: 120%;
  }
  .mainDoctorSurgeryGrid {
    grid-template-columns: 1fr 1fr;
  }
  .mainDoctorSurgeryImg1 {
    transform: translate(-3em, 2em);
    scale: 1.7;
  }
  .mainDoctorSurgeryImg2 {
    transform: translate(-1em, 2em);
    scale: 1.7;
  }
  .equipmentImg1Div {
    /* aspect-ratio: 390/120; */
    height: 50rem;
    aspect-ratio: auto;
  }
  .equipmentImg1 {
    aspect-ratio: 1219/1009;
    height: auto;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .equipmentTitle {
    position: absolute;
    z-index: 1;
  }
  .equipment2Title {
    margin-block: 2%;
  }
  .equipmentGrid {
    background: rgba(255, 255, 255, 0.7);
    padding: 2% 2%;
    gap: 1.5em;
    top: min(8rem, 70%);
  }
  .checkIcon.mainColor {
    scale: 1;
  }
  .equipmentItemGrid {
    gap: 0.5em;
  }
  .equipmentImg2 {
    aspect-ratio: 85/44;
  }
  .DinsideContainer {
    width: min(90%, 75rem);
    margin-inline: auto;
  }
  .suitableGrid {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 0;
    width: 80%;
    margin-inline: auto;
  }
  .suitableGrid :nth-last-child(-n+2) {
    border-bottom: 0;
  }
  .suitableItemGrid {
    width: 100%;
  }
  .suitableItemGrid img {
    scale: 0.8;
  }
  .suitableItemGrid.switch {
    grid-template-columns: minmax(auto, 8em) auto;
  }
  .suitableItemGrid.switch img {
    order: 0;
  }
  .benefitsGrid {
    grid-template-columns: repeat(2, 1fr);
  }
  .sectionContainer.withLine {
    border: 4px solid #005d83;
  }
  .eyeBagGrid {
    gap: 2rem;
  }
  .judgeItemTextDiv {
    height: fit-content;
  }
  .typeGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
  .differentContent.DletSpc1 {
    letter-spacing: -0.045rem;
  }
  .differentContent.DletSpc2 {
    letter-spacing: 0.075rem;
  }
  .h2TitleContainer {
    margin: unset;
  }
}
.ctaButton {
  width: 20em;
  border-radius: 3.125rem;
  background: #005d83;
  border: none;
  padding: max(1%, 0.5rem) max(4%, 1.5rem);
  transition: all 100ms ease-in-out;
  cursor: pointer;
  color: #fff;
  text-align: center;
  font-family: Noto Sans HK;
  font-size: clamp(0.875rem, 1.5vw, 1.25rem);
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  /* 1.3125rem */
  letter-spacing: 0.0875rem;
}
.ctaButton:hover {
  background-color: rgb(0, 129.2061068702, 182);
}
.ctaButton:active {
  transform: translate(0px, 3px);
  background-color: rgb(0, 56.7938931298, 80);
}
.ctaButton.wide {
  width: min(100%, 34em);
  font-size: clamp(0.75rem, 3vw, 1.25rem);
}

.gridCenter.tight {
  margin-top: 0;
}
.gridCenter.tight .ctaButton.wide {
  margin-top: 0;
}

a:has(> .readMoreBtn):has(+ .gridCenter.tight) > .readMoreBtn,
.contentContainer1:has(.readMoreBtn):has(+ .gridCenter.tight) .readMoreBtn {
  margin-bottom: 0.75rem;
}

.after figcaption {
  background: #005d83;
  color: #fff;
  border: 1px solid rgba(0, 0, 0, 0);
}

.compare-image {
  aspect-ratio: 300/160;
  object-fit: cover;
  object-position: 50% 25%;
}
@media (min-width: 1024px) {
  .compare-image {
    aspect-ratio: 300/120;
  }
}

.table-container {
  position: relative;
  margin-bottom: min(10%, 2rem);
  margin-inline: auto;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.table-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.scroll-indicator {
  position: absolute;
  bottom: -30px; /* Position below the table */
  left: 0;
  width: 100%;
  text-align: right;
  font-size: 14px;
  color: #6d6d6d;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

thead {
  background: linear-gradient(to right, #8bd0ff 0%, #005d83 50%);
  position: relative;
}
thead::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: inherit;
  z-index: -1;
}
thead .imageTitle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
thead .imageTitle img {
  aspect-ratio: 156/129;
  width: 100px;
  height: auto;
  margin-right: 10px;
}

th,
td {
  padding: 12px 15px;
  font-size: clamp(0.875rem, 2vw, 1.25rem);
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
  border-left: 1px solid #e0e0e0;
}

th {
  color: white;
  position: sticky;
  top: 0;
  padding-bottom: 0;
}
th::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  z-index: -1;
}

tr:last-child td {
  border-bottom: none;
}

th:not(:first-child),
td:not(:first-child) {
  min-width: 25rem;
}
@media (max-width: 1200px) and (min-width: 968px) {
  th:not(:first-child),
  td:not(:first-child) {
    min-width: 20rem;
  }
}
@media (max-width: 967px) {
  th:not(:first-child),
  td:not(:first-child) {
    min-width: 14rem;
  }
}

.badge {
  background-color: #005d83;
  color: white;
  border-radius: 12px;
  padding: 2px 6px;
  margin-left: 5%;
  font-size: 0.8em;
  white-space: nowrap;
}

.feature {
  font-weight: bold;
  color: #484848;
  left: 0;
  background-color: #f8f8f8;
  z-index: 1;
  position: sticky;
}

th:first-child {
  background: linear-gradient(to right, #8bd0ff 0%, #75b0e4 100%);
  position: sticky;
  left: 0;
  z-index: 2;
}

@media (max-width: 600px) {
  thead,
  tbody {
    display: block;
    width: 100%;
  }
  tr {
    display: flex;
    width: 100%;
  }
  th,
  td {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px;
    min-width: 200px;
  }
  th {
    padding-bottom: 0;
  }
  .feature,
  td:first-child {
    position: sticky;
    left: 0;
    background-color: #f8f8f8;
    z-index: 1;
  }
  th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
  }
  thead::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(to right, #8bd0ff 0%, #73ade1 100%);
    z-index: -1;
  }
  .feature,
  td:first-child,
  th:first-child {
    min-width: 5rem;
  }
  th:not(:first-child),
  td:not(:first-child) {
    flex: 1;
  }
}
@media (min-width: 1230px) {
  .scroll-indicator {
    display: none;
  }
}

thead {
  background: linear-gradient(to right, #005d83 0%, #d3dfec 150%);
}
thead .imageTitle {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
thead .imageTitle img {
  aspect-ratio: 200/108;
  max-width: 11rem;
  margin-right: unset;
}

th {
  padding-bottom: 10px;
  border-bottom: 1px solid #484848;
}

th,
td {
  text-align: center;
  min-width: auto;
  place-content: center;
}

th:not(:first-child) {
  border-left: none;
}

th:not(:first-child),
td:not(:first-child) {
  min-width: 10.5rem;
}
@media (max-width: 967px) {
  th:not(:first-child),
  td:not(:first-child) {
    min-width: 9rem;
  }
}

.product-image {
  aspect-ratio: 200/108;
  max-width: 11rem;
}

.feature,
td:first-child,
th:first-child {
  min-width: 7rem;
}

@media (max-width: 600px) {
  .feature,
  td:first-child,
  th:first-child {
    min-width: 5rem;
  }
}
th:first-child {
  background: linear-gradient(to right, #005d83 0%, #0d658a 100%);
}

.pageContent hr.contentLine {
  margin-inline: auto;
  background: #d0edf8;
  height: 1px;
  width: min(82%, 49rem);
  margin-block: 1.5rem;
}
@media (min-width: 768px) {
  .pageContent hr.contentLine {
    margin-block: 2rem;
  }
}

.sliderWidth {
  width: min(100%, 49rem);
  margin-inline: auto;
  display: block;
}

.caseContainer {
  margin-top: 3rem;
}

@media (min-width: 1024px) {
  #mainNav.transparent {
    background-color: transparent;
    transition: all 300ms ease-in-out;
  }
  #mainNav.transparent .logo {
    filter: brightness(0) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
  }
  #mainNav.transparent .menu-item > button,
  #mainNav.transparent .menu-item > a,
  #mainNav.transparent .lang-toggle {
    color: rgba(255, 255, 255, 0.75);
  }
  #mainNav.transparent .navbar-cta {
    color: rgba(0, 0, 0, 0.35);
    background-color: rgba(255, 255, 255, 0.75);
  }
}