html,
body,
#root {
  width: 100%;
  min-height: 100%;
  background: #fff;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

@font-face {
  font-family: "Portfolio HY QiHei 50S";
  src: url("../assets/fonts/HYQiHei-50S.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
#root::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

body {
  overflow: auto;
  overscroll-behavior: none;
}

body:has([class^="_page_1fuvm_"]),
body:has([class*=" _page_1fuvm_"]) {
  overflow: hidden;
}

/* The embedded portfolio view has no demo header, so it must own the full iframe. */
[class^="_page_1fuvm_"],
[class*=" _page_1fuvm_"] {
  width: 100%;
  height: 100vh;
  min-height: 100svh;
  background: #fff;
}

[class^="_titleBlock_1fuvm_"],
[class*=" _titleBlock_1fuvm_"] {
  top: clamp(78px, 9vh, 102px);
  left: 50%;
  right: auto;
  display: flex;
  justify-content: center;
  width: 100%;
  transform: translateX(-50%);
}

[class^="_eyebrow_1fuvm_"],
[class*=" _eyebrow_1fuvm_"],
[class^="_hint_1fuvm_"],
[class*=" _hint_1fuvm_"] {
  display: none;
}

.portfolio-cylinder-title-image {
  width: min(84vw, 1400px);
  margin: 0;
  line-height: 0;
}

.portfolio-cylinder-title-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.portfolio-cards-title-image {
  width: min(87.4vw, 1196px);
  margin: 0 auto 1.5rem;
  line-height: 0;
}

.portfolio-cards-title-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

[class^="_scrollItem_zihla_"],
[class*=" _scrollItem_zihla_"] {
  font-family: "Portfolio HY QiHei 50S", "Microsoft YaHei", sans-serif;
  font-weight: 500;
}

[class^="_sectionText_zihla_"],
[class*=" _sectionText_zihla_"] {
  font-family: "Portfolio HY QiHei 50S", "Microsoft YaHei", sans-serif;
  font-weight: 500;
}

[class^="_stage_1fuvm_"],
[class*=" _stage_1fuvm_"] {
  top: clamp(250px, 29vh, 330px);
}

[class^="_view_zihla_"],
[class*=" _view_zihla_"] {
  height: 100vh;
  min-height: 100svh;
  top: 0;
}

[class^="_hint_zihla_"],
[class*=" _hint_zihla_"] {
  display: none;
}

[class^="_content_zihla_"],
[class*=" _content_zihla_"] {
  min-height: 46vh;
  background: #fff;
}

.kinetic-preloader {
  color: #b9ff59;
}

@media (max-width: 640px) {
  [class^="_page_1fuvm_"],
  [class*=" _page_1fuvm_"] {
    height: 100svh;
    min-height: 100svh;
  }

  .portfolio-cylinder-title-image {
    width: 94vw;
  }

  .portfolio-cards-title-image {
    width: 96vw;
  }
}
html.cards-view,
html.cards-view body,
html.cards-view #root {
  width: 100%;
  min-height: 100%;
  overscroll-behavior: none;
}

html.cards-view {
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

html.cards-view::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

html.cards-view body,
html.cards-view #root {
  overflow: visible;
}