html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }
html { scroll-behavior: smooth; }

:root {
  --bodycolor: #fff;
  --black: black;
  --white: white;
  --redColor: #364C70;
  --blackColor2: #202633;
  --blueColor: #68758A;
  --lightGrey: #F5F6F8;
  --cofoSansVf: "Geist", Arial, sans-serif;
  --thanatosVf: "Geist Mono", "Geist", Arial, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0 auto; background: var(--white); font-family: var(--cofoSansVf); font-size: 16px; color: var(--black); line-height: normal; }
header, section, footer { float: left; width: 100%; }
h1, h2, h3, h4, h5, h6, p, a, button, input { padding: 0; margin: 0; font-weight: normal; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; }
h1, h2, h3, h4, h5, h6 { font-family: var(--cofoSansVf); }
p { font-size: 16px; line-height: 28px; font-weight: 200; }
ul, ol { list-style: none; margin: 0; padding: 0; }
a, button, input[type="submit"], input[type="button"] { transition: all .4s ease-in-out 0s; }
a:focus, button:focus { outline: none; }
img { max-width: 100%; }

.fw-thin { font-weight: 200; }
.thanatosVf { font-family: var(--thanatosVf) !important; }
.text-none { text-transform: none !important; }
.bg-red { background-color: var(--redColor) !important; }
.bg-black2 { background-color: var(--blackColor2) !important; }
.bg-Blue { background-color: var(--blueColor) !important; }
.bg-lightGrey { background-color: var(--lightGrey) !important; }
.color-red { color: var(--redColor) !important; }
.color-black2 { color: var(--blackColor2) !important; }
.color-lightGrey { color: var(--lightGrey) !important; }
.img-object-cover { object-fit: cover; }
.img-position-center { object-position: center; }
.transition-all { transition: all .6s ease-in-out 0s; }
.container-fluid { padding: 0 2vw; }

.header { padding: 28px 0; position: fixed; top: 0; z-index: 999; transition: all .6s ease-in-out 0s; }
.logo { width: 9vw; }
.header .logo img { display: block; width: 100%; height: auto; }
.header_right { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.header_rightRow { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.navigation { display: flex; flex-wrap: wrap; flex: 1; justify-content: center; }
.navigation ul { display: flex; flex-wrap: wrap; gap: 50px; }
.navigation ul li { position: relative; }
.navigation ul li a { font-size: 1.25vw; color: var(--lightGrey); text-decoration: none; text-transform: uppercase; position: relative; display: inline-block; z-index: 1; }
.navigation ul li a:hover, .navigation ul li.active a { color: var(--lightGrey); }
.header_end { gap: 1vw; }
.languages { gap: 10px; align-items: center; justify-content: flex-end; }
.language-link { appearance: none; border: 0; padding: 0; background: transparent; color: var(--lightGrey); font-family: var(--cofoSansVf); font-size: 1.1vw; line-height: 1; letter-spacing: -.16px; cursor: pointer; }
.language-link.active { text-decoration: underline; text-underline-offset: 3px; }
.startPrjctLnk a { font-size: 1.5vw; letter-spacing: .022vw; color: var(--lightGrey); font-family: var(--thanatosVf); gap: 1.042vw; }

.HeaderPad { padding-top: 8.177vw; }
.Hmebanner { padding: 20px 0 30px; min-height: calc(100vh - 175px); }
.hme_hero_title { z-index: 2; }
.hero_heading_style { font-size: 11.4vw; text-transform: uppercase; letter-spacing: .044vw; line-height: 1.1; color: var(--lightGrey); }
.hero_paragrph_style { font-size: 1.6vw; letter-spacing: -.033px; text-align: justify; line-height: 1.14; color: var(--white); max-width: 57.819vw; padding: 0 60px; font-weight: 200; }
.HmebannerImg { position: absolute; top: 0; left: 40.5%; transform: translateX(-40.5%); max-width: 20vw; }
.downArrowB { position: absolute; bottom: 40px; right: 20px; color: var(--lightGrey); font-family: var(--thanatosVf); font-size: 3rem; font-weight: 200; }

.richtext { padding: 90px 0; }
.richtextWrap { max-width: 71.819vw; display: grid; gap: 80px; position: relative; z-index: 1; }
.richtext h2 { font-size: 1.111vw; color: var(--lightGrey); line-height: 1.14; letter-spacing: -.044vw; text-transform: uppercase; font-weight: 400; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; position: absolute; top: 23px; left: 0; }
.richtext p { text-indent: 23.889vw; font-size: 3vw; color: var(--lightGrey); letter-spacing: -.044vw; text-align: justify; text-transform: uppercase; line-height: 1.25; }
.richtext p strong { font-weight: 400; color: var(--redColor); }
.richtext--two p { text-transform: none; line-height: 1.21; }

.hme_gallery_sec { padding-bottom: 80px; }
.galleryGrid { display: flex; flex-direction: column; row-gap: 7.708vw; }
.galleryGridrow { column-gap: 9.792vw; }
.galleryGridBox { aspect-ratio: 1; width: 100%; background: var(--black); overflow: hidden; opacity: 0; transform: translateY(6.944vw); transition: opacity .8s ease, transform .8s ease; }
.galleryGridBox.is-visible { opacity: 1; transform: translateY(0); }
.galleryGridBox:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .5); transition: all .4s ease-in-out 0s; opacity: 0; visibility: hidden; z-index: 1; }
.galleryGridrow .galleryGridBox:last-child { margin-top: 7.014vw; }
.galleryGrid .galleryGridrow:nth-child(even) .galleryGridBox:first-child, .galleryGrid .galleryGridrow:last-child .galleryGridBox:first-child { margin-top: 12.5vw; }
.galleryGrid .galleryGridrow:nth-child(even) .galleryGridBox:last-child, .galleryGrid .galleryGridrow:last-child .galleryGridBox:last-child { margin-top: 0; }
.galleryGridBox picture { height: 120%; width: 100%; float: left; will-change: transform; transform: translateY(0%); }
.galleryGridBox picture img { height: 100%; }
.overlayBox { opacity: 0; visibility: hidden; background: var(--blueColor); mix-blend-mode: normal; transition: all .4s ease-in-out 0s; z-index: 1; }
.galleryGridBoxDes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 25px 30px; opacity: 0; visibility: hidden; z-index: 1; }
.galleryGridBoxDes h2, .galleryGridBoxDes h3 { font-size: 4.028vw; color: var(--white); letter-spacing: -.044vw; line-height: 1.29; text-transform: uppercase; }
.galleryGridBoxDes p { color: var(--white); letter-spacing: -.044vw; line-height: 1.14; text-transform: uppercase; text-align: right; }
.galleryGridBoxDes p a { color: var(--white); text-decoration: none; }
.galleryGridBox:hover:before, .galleryGridBox:hover .overlayBox, .galleryGridBox:hover .galleryGridBoxDes { opacity: 1; visibility: visible; }
.galleryGridBox:hover .overlayBox { mix-blend-mode: difference; }

.wrkbannerdes { padding: 116px 0 70px; }
.wrkbannerdes .hero_heading_style { line-height: 1; }
.animationSpread { position: absolute; top: 50%; left: 0; right: 0; z-index: 1; max-width: 66.319vw; padding: 179px 6vw 80px; margin: 0 auto; text-align: center; opacity: 0; transform: translateY(-50%); }
.animationSpread h3 { font-size: 2.361vw; color: var(--white); line-height: 1.14; letter-spacing: -.044vw; text-transform: uppercase; white-space: pre-line; }
.blurred-background { position: absolute; inset: 0; filter: blur(50.6px); background: var(--redColor); z-index: -1; pointer-events: none; opacity: 1; border-radius: 12px; }
.spread-arrow { margin: 28px 0; color: var(--lightGrey); font-family: var(--thanatosVf); font-size: 5.5vw; line-height: 1; font-weight: 200; }

.hmeSrvc { padding: 60px 0; }
.hmeSrvc .hero_heading_style { font-size: 7vw; line-height: 1; }
.hme_hero_title_indent { text-indent: 18.056vw; }
.hmeSrvcBoxBlur .hero_heading_style { filter: blur(0); transition: filter .4s ease; }
.hmeSrvcBoxBlur .hero_paragrph_style { opacity: 0; pointer-events: none; transition: all .4s ease-in-out 0s; flex: 1; font-size: 1.3vw; padding: 0 35px; }
.hmeSrvcBoxBlur:hover .hero_heading_style { filter: blur(10px); }
.hmeSrvcBoxBlur:hover .hero_paragrph_style { opacity: 1; pointer-events: visible; }
.view_srvBtn { padding: 60px 0 0; }
.view_srvBtn a { font-size: 1.25vw; color: var(--blackColor2); line-height: 1.14; text-decoration: none; text-transform: uppercase; letter-spacing: -.044vw; }
.view_srvBtn a:hover { color: var(--redColor); }

.hmePrjct_sects { background: var(--blackColor2); padding: 125px 0; }
.hmePrjctImg { max-width: 85vw; min-height: 54.653vw; }
.hmePrjctImg img { height: 100%; }
.coming-project-field { background: var(--blackColor2); }
.coming-project-field img { width: min(44vw, 680px); max-height: 54.653vw; object-fit: contain; }
.hmePrjctName { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; transition: all .4s ease-in-out 0s; z-index: 2; }
.hmePrjctName h2 { font-size: 9vw; color: var(--white); letter-spacing: -.044vw; text-align: left; text-transform: uppercase; line-height: 1; max-width: 55.278vw; }
.hmePrjctName a { font-size: 1.111vw; color: var(--lightGrey); text-transform: uppercase; letter-spacing: -.044vw; text-decoration: none; position: relative; z-index: 1; }
.letsBuiltBtn { position: absolute; bottom: 0; left: 0; z-index: 2; }
.letsBuiltBtn a { font-size: 1.458vw; color: var(--redColor); letter-spacing: -.044vw; text-transform: uppercase; text-decoration: none; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.hmePrjct_sects:hover .hmePrjctName { opacity: 1; pointer-events: all; }
.hmePrjct_sects .overlayBox { background: var(--redColor); z-index: 1; }
.hmePrjct_sects:hover .overlayBox { opacity: 1; visibility: visible; mix-blend-mode: difference; }

.hmeSticky_sect { padding: 8vw 0 5.875vw; }
.hmeSticky_sect .container-fluid { padding: 0 2.813vw; gap: 5.694vw; }
.hmeStickyBoxes { padding: 57px 16px; position: sticky; top: 0; min-height: 666px; }
.hmeStickyBoxes:nth-child(1) { top: 7.5%; }
.hmeStickyBoxes:nth-child(2) { top: 15%; }
.hmeStickyBoxes:nth-child(3) { top: 22.5%; }
.hmeStickyBoxes h2, .hmeStickyBoxes h3 { font-size: 5.694vw; line-height: 1.08; text-transform: uppercase; letter-spacing: -.044vw; }
.hmeStickyBoxes.bg-lightGrey h2, .hmeStickyBoxes.bg-Blue h2, .hmeStickyBoxes.bg-red h2 { color: var(--blackColor2); }
.hmeStickyBoxes.bg-lightGrey h3 { color: var(--redColor); }
.hmeStickyBoxes.bg-Blue h3, .hmeStickyBoxes.bg-red h3 { color: var(--white); }
.sticky-arrow { color: var(--lightGrey); font-family: var(--thanatosVf); font-size: 7rem; line-height: 1; font-weight: 200; }

.hmelastHeroSec { padding: 20px 0 50px; min-height: 100vh; }
.hmelastHeroSec .hero_heading_style { font-weight: 100; font-size: 10.313vw; line-height: 1.05; letter-spacing: 0; }
.hmelastHeroDes { padding-left: 5.938vw; padding-top: 50px; padding-bottom: 30px; }
.hmelastHeroDes p { max-width: 59.375vw; color: var(--lightGrey); font-size: 2.625vw; line-height: 1.14; letter-spacing: -.044vw; text-align: justify; text-transform: uppercase; }
.footer { padding: 15px 0; }
.footer ul { gap: 35px; }
.footer ul li { font-size: .938vw; color: var(--lightGrey); line-height: 1.38; text-transform: uppercase; letter-spacing: -.044vw; }
.footer ul li a { color: var(--lightGrey); text-decoration: none; }

.footer_cta-link { grid-column-gap: .625rem; grid-row-gap: .625rem; justify-content: flex-start; align-items: center; display: inline-flex; text-decoration: none; }
.mask-wrap { position: relative; overflow: hidden; }
.mask-wrap > * { transition: transform 1s cubic-bezier(.19, 1, .22, 1); }
.cta-small { color: var(--redColor); font-size: 1.458vw; font-weight: 400; line-height: 1.14; letter-spacing: -.64px; text-transform: uppercase; }
.cta-Lrg { color: var(--white); font-size: 7.639vw; font-weight: 400; line-height: 1.14; letter-spacing: -.64px; text-transform: uppercase; }
.mask-wrap > :nth-child(2) { position: absolute; top: 0; transform: translateY(100%); }
.home-projects_link-icon { justify-content: center; align-items: center; display: flex; }
.mask-wrap.is-horizontal > :nth-child(2) { position: absolute; top: 0; transform: translateX(-100%); }
@media (hover: hover) {
  [data-mask-btn]:hover .mask-wrap > :nth-child(1) { transform: translateY(-100%); }
  [data-mask-btn]:hover .mask-wrap > :nth-child(2) { transform: translateY(0); }
  [data-mask-btn]:hover .mask-wrap.is-horizontal > :nth-child(1) { transform: translateX(100%); }
  [data-mask-btn]:hover .mask-wrap.is-horizontal > :nth-child(2) { transform: translateX(0); }
}

.hdr__rgt-mbl { display: none; }
.navigation-mbl { display: none; }

html[lang="zh-Hans"] body,
html[lang="zh-Hans"] .hero_heading_style,
html[lang="zh-Hans"] .richtext p,
html[lang="zh-Hans"] .hmeStickyBoxes h2,
html[lang="zh-Hans"] .hmeStickyBoxes h3 { font-family: "Noto Sans SC", var(--cofoSansVf); }

@media only screen and (max-width: 1440px) {
  .hero_heading_style { font-size: 11vw; line-height: 1.1; }
  .hmelastHeroSec .hero_heading_style { font-size: 10.5vw; line-height: 1; }
  .hmeSrvc .hero_heading_style { font-size: 6.25vw; }
}

@media only screen and (max-width: 1199px) {
  .Hmebanner, .hmelastHeroSec { min-height: 0; }
  .richtext { min-height: 0 !important; }
  .richtext h2 { font-size: 1.5vw; top: 9px; }
  .footer .container-fluid { flex-direction: column; gap: 10px; }
  .footer ul { gap: 12px; }
  .footer ul li { font-size: 14px; }
}

@media only screen and (max-width: 991px) {
  .container-fluid { padding: 0 25px; }
  .header { position: fixed; top: 0; left: 0; padding: 15px 0; }
  .logo, .header .logo { width: 110px; position: relative; z-index: 2; }
  .hdr__rgt-mbl { display: block; position: absolute; right: 13px; top: 55%; transform: translateY(-50%); z-index: 3; }
  .hdr__nav-icon { width: 40px; height: 30px; position: relative; cursor: pointer; }
  .hdr__nav-icon span { display: block; position: absolute; z-index: 999; height: 2px; width: 50%; background: var(--white); opacity: 1; transition: .25s ease-in-out; }
  .hdr__nav-icon span:nth-child(even) { left: 50%; }
  .hdr__nav-icon span:nth-child(odd) { left: 0; }
  .hdr__nav-icon span:nth-child(1), .hdr__nav-icon span:nth-child(2) { top: 0; }
  .hdr__nav-icon span:nth-child(3), .hdr__nav-icon span:nth-child(4) { top: 10px; }
  .hdr__nav-icon span:nth-child(5), .hdr__nav-icon span:nth-child(6) { top: 20px; }
  .hdr__nav-icon.open span:nth-child(1) { transform: rotate(45deg); left: 2px; top: 3px; }
  .hdr__nav-icon.open span:nth-child(6) { transform: rotate(45deg); left: calc(50% - 5px); top: 16px; }
  .hdr__nav-icon.open span:nth-child(2) { transform: rotate(-45deg); left: calc(50% - 5px); top: 4px; }
  .hdr__nav-icon.open span:nth-child(5) { transform: rotate(-45deg); left: 2px; top: 16px; }
  .hdr__nav-icon.open span:nth-child(3) { left: -50%; opacity: 0; }
  .hdr__nav-icon.open span:nth-child(4) { left: 100%; opacity: 0; }
  .header_right { position: fixed; top: 0; left: 0; flex-direction: column; height: 100%; width: 100%; background: var(--black); display: none; padding: 140px 0 20px; }
  .header_rightRow { justify-content: space-between; height: 100%; align-items: flex-start; align-content: space-between; }
  .navigation-mbl { float: left; width: 100%; padding: 0; margin-bottom: 20px; }
  .navigation-mbl ul { width: 100%; display: flex; flex-wrap: wrap; flex-direction: column; text-align: center; gap: 23px; }
  .navigation-mbl ul li { width: 100%; border-bottom: 1px solid rgba(0, 56, 101, .15); }
  .navigation-mbl ul li a { display: block; padding: 0 20px; font-size: 6.357vw; line-height: 1; color: var(--white); letter-spacing: .64px; text-align: left; text-decoration: none; font-weight: 400; text-transform: uppercase; }
  .header_end { width: 100%; gap: 24px; align-items: flex-start; padding: 0 20px; }
  .languages { width: 100%; justify-content: flex-start; }
  .language-link { font-size: 14px; }
  .HeaderPad { padding-top: 73px; }
  .sticky-arrow { font-size: 4.5rem; }
}

@media only screen and (max-width: 767px) {
  .container-fluid { padding: 0 20px; }
  .navigation-mbl ul li a { font-size: 63px; line-height: .82; }
  .HmebannerRow { min-height: 380px; margin-bottom: 40px; }
  .hero_heading_style { font-size: 40px; }
  .hero_paragrph_style { font-size: 18px; max-width: 100%; }
  .HmebannerImg { max-width: 298px; }
  .richtext { padding: 40px 0; }
  .richtextWrap { max-width: 100%; gap: 27px; }
  .richtext h2 { font-size: 14px; top: 11px; }
  .richtext p { font-size: 30px; text-indent: 115px; }
  .richtext--two p { font-size: 20px; text-indent: 90px; }
  .hme_gallery_sec { padding-bottom: 30px; }
  .galleryGridrow { flex-direction: column; row-gap: 30px; }
  .galleryGrid { gap: 30px; }
  .galleryGridBox, .galleryGridrow .galleryGridBox:last-child, .galleryGrid .galleryGridrow:nth-child(2n) .galleryGridBox:first-child, .galleryGrid .galleryGridrow:last-child .galleryGridBox:first-child, .galleryGrid .galleryGridrow:nth-child(2n) .galleryGridBox:last-child, .galleryGrid .galleryGridrow:last-child .galleryGridBox:last-child { height: 436px; margin: 0; }
  .wrkbannerdes { min-height: 0; padding: 50px 0 100px; }
  .wrkbannerdes .hero_heading_style { font-size: 50px; line-height: 1.47; }
  .animationSpread { max-width: 640px; padding: 100px 20px 50px; }
  .animationSpread h3 { font-size: 16px; }
  .hmeSrvc { padding: 0 0 30px; }
  .hmeSrvc .container-fluid { gap: 40px; }
  .hmeSrvc .hero_heading_style { font-size: 37px; }
  .hmeSrvc .hero_heading_style--srvcmblscnd { text-indent: 116px; }
  .hme_hero_title_indent { text-indent: 0; }
  .hmeSrvcBoxBlur .hero_paragrph_style { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); padding: 15px 25px; font-size: 16px; }
  .view_srvBtn { padding: 0; }
  .view_srvBtn a { font-size: 18px; }
  .hmePrjct_sects { padding: 100px 0 35px; }
  .hmePrjct_sects .container-fluid { padding: 0; }
  .hmePrjctImg { margin-bottom: 70px; max-width: 100%; min-height: 0; }
  .coming-project-field { min-height: 690px; }
  .coming-project-field img { width: min(78vw, 420px); max-height: 620px; }
  .letsBuiltBtn { position: relative; }
  .letsBuiltBtn a { font-size: 22px; margin: 0 auto; justify-content: center; }
  .hmePrjctName h2 { font-size: 50px; }
  .hmeStickyBoxes { padding: 57px 16px; min-height: 500px; }
  .hmeStickyBoxes h2, .hmeStickyBoxes h3 { font-size: 34px; }
  .hmeStickyBoxes:nth-child(1) { top: 5%; }
  .hmeStickyBoxes:nth-child(2) { top: 10%; }
  .hmeStickyBoxes:nth-child(3) { top: 15%; }
  .hmelastHeroSec .hero_heading_style { font-size: 65px; word-break: break-all; }
  .hmelastHeroDes { padding: 30px 0; }
  .hmelastHeroDes p { font-size: 20px; max-width: 95%; }
  .footer { padding: 40px 0; }
  .footer .container-fluid { gap: 35px; flex-direction: column-reverse; }
  .footer ul { flex-direction: column; justify-content: center; text-align: center; }
}

@media only screen and (max-width: 375px) {
  .navigation-mbl ul li a { font-size: 14vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}