.home-intro { display: none; font-family: "Microsoft YaHei", Arial, sans-serif; }
html { scrollbar-gutter: stable; }
html.has-home-intro { overflow: hidden; }
html.has-home-intro .home-intro { display: block; z-index: 2147483647; opacity: 1; transition: opacity .9s cubic-bezier(.4, 0, .2, 1); }
html.has-home-intro .home-intro.is-leaving { opacity: 0; pointer-events: none; }
.home-intro img { display: block; }


.intro-stage {
  position: fixed;
  inset: 0;
  background: #fff;
}
.intro-page {
  position: absolute;
  inset: 0;
  background: #fff;
}
.intro-page1 {
  animation: introPage1Out .28s ease 2.65s forwards;
}
.intro-logo-wrap {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(58vw, 820px);
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.intro-logo {
  width: 100%;
  height: auto;
  opacity: 0;
  transform: scale(.95);
  filter: blur(3px);
  clip-path: inset(0 100% 0 0);
  animation:
    introLogoReveal .72s cubic-bezier(.16,1,.3,1) .08s forwards,
    introLogoFade .75s cubic-bezier(.16,1,.3,1) forwards,
    introLogoSharp .50s ease forwards;
}
.intro-percent {
  position: absolute;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%);
  color: #063E6C;
  font-size: clamp(24px, 2vw, 34px);
  letter-spacing: .5px;
  line-height: 1;
  animation: introPage1Out .28s ease 2.65s forwards;
}
.intro-page2 {
  opacity: 0;
  animation: introPage2In .38s ease 3.00s forwards;
}
.intro-tagline {
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%) translateY(14px);
  color: #373737;
  font-size: clamp(34px, 2.5vw, 52px);
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  animation: introTaglineIn .60s cubic-bezier(.16,1,.3,1) 3.12s forwards;
}
@keyframes introLogoReveal {
  from { clip-path: inset(0 100% 0 0); transform: scale(.95); }
  to { clip-path: inset(0 0 0 0); transform: scale(1); }
}
@keyframes introLogoFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes introLogoSharp {
  from { filter: blur(3px); }
  to { filter: blur(0); }
}
@keyframes introPage1Out {
  to { opacity: 0; }
}
@keyframes introPage2In {
  to { opacity: 1; }
}
@keyframes introTaglineIn {
  to { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
}
@media (max-width: 640px) {
  .intro-logo-wrap { width: 78vw; }
  .intro-tagline { font-size:18px !important; width:100% !important; text-align: center !important; padding: 0 !important; margin: 0  auto!important;}
  .intro-percent { bottom: 48px; }
  .tagline{font-size:14px;}
}