.site-header {
  position: fixed;
  left: 50%;
  top: 0;
  z-index: 50;
  width: 10rem;
  height: 0.625rem;
  transform: translateX(-50%);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(13, 59, 127, 0.28), rgba(0, 0, 0, 0.08));
  backdrop-filter: blur(0.078125rem);
}

.site-logo {
  position: absolute;
  z-index: 1;
  left: 1.28125rem;
  top: 0.15625rem;
  width: 1.140625rem;
  height: 0.3125rem;
}

.site-logo__mark {
  position: absolute;
  left: 0;
  top: 0;
  width: 1.140625rem;
  height: 0.3125rem;
  object-fit: contain;
}

.site-nav {
  position: absolute;
  z-index: 1;
  left: 4.885417rem;
  top: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.395833rem;
  height: 0.432292rem;
}

.site-nav__item {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0.510417rem;
  height: 0.432292rem;
  padding-top: 0.239583rem;
  font-family: var(--font-cn-medium);
  font-size: 0.083333rem;
  font-weight: 500;
  letter-spacing: 0.003333rem;
  color: #cfd8e5;
}

.site-nav__item--active::before,
.site-nav__item:hover::before,
.site-nav__item:focus-visible::before,
.page-home .site-nav__item--home::before,
.page-scenarios .site-nav__item--scenarios::before,
.page-product .site-nav__item--product::before,
.page-about .site-nav__item--about::before,
.page-news .site-nav__item--about::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  z-index: -1;
  width: 0.510417rem;
  height: 0.432292rem;
  transform: translateX(-50%);
  background: #45e5d8;
}

.site-nav__item::before {
  transition: opacity 160ms ease;
}

.site-nav__item:hover,
.site-nav__item:focus-visible,
.page-home .site-nav__item--home,
.page-scenarios .site-nav__item--scenarios,
.page-product .site-nav__item--product,
.page-about .site-nav__item--about,
.page-news .site-nav__item--about {
  color: #0d3b7f;
}

.site-nav__group {
  position: relative;
  width: 0.833333rem;
  height: 0.432292rem;
}

.site-subnav {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 0.833333rem;
  height: 2rem;
  padding-top: 0.697917rem;
  border-radius: 0 0 0.052083rem 0.052083rem;
  background: rgba(255, 134, 13, 0.05);
  box-shadow:
    inset 0 0 0.104167rem rgba(13, 59, 127, 0.3),
    inset 0 0.130208rem 0.15625rem rgba(255, 255, 255, 0.2),
    inset 0 0 0.010417rem rgba(0, 0, 0, 0.7),
    0.078125rem 0 0.052083rem rgba(23, 70, 165, 0.02);
  backdrop-filter: blur(0.078125rem);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.041667rem);
  transition: opacity 160ms ease, transform 160ms ease;
}

.site-nav__group > .site-nav__item:hover + .site-subnav,
.site-nav__group > .site-nav__item:focus + .site-subnav,
.site-nav__group:focus-within .site-subnav,
.site-subnav:hover {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.site-subnav a {
  display: block;
  margin-bottom: 0.208333rem;
  text-align: center;
  font-family: var(--font-cn-medium);
  font-size: 0.083333rem;
  font-weight: 500;
  letter-spacing: 0.003333rem;
  color: #fff;
  white-space: nowrap;
}
<!--ºÄʱ1784981589.5517Ãë-->