body.page-ai-solution,
body.page-product-detail {
  --detail-hero-bg-image: url("../../image/generalBanner.png");
  --detail-hero-bg-position: center center;
  --detail-hero-bg-position-mobile: var(--detail-hero-bg-position);
  --detail-hero-bg-size: cover;
  --detail-hero-bg-size-mobile: var(--detail-hero-bg-size);
}

body.page-ai-solution[data-solution-key="medical"],
body.page-product-detail[data-solution-key="medical"] {
  --detail-hero-bg-image: url("../../image/solution/highResolution/医疗.png");
  --detail-hero-bg-position: 68% center;
  --detail-hero-bg-position-mobile: 62% center;
}

body.page-ai-solution[data-solution-key="edu"],
body.page-product-detail[data-solution-key="edu"] {
  --detail-hero-bg-image: url("../../image/solution/highResolution/教育.png");
  --detail-hero-bg-position: center center;
}

body.page-ai-solution[data-solution-key="culture"],
body.page-product-detail[data-solution-key="culture"] {
  --detail-hero-bg-image: url("../../image/solution/highResolution/文博.png");
  --detail-hero-bg-position: center center;
}

body.page-ai-solution[data-solution-key="expo"],
body.page-product-detail[data-solution-key="expo"] {
  --detail-hero-bg-image: url("../../image/solution/highResolution/会展.png");
  --detail-hero-bg-position: center center;
}

body.page-ai-solution[data-solution-key="industry"],
body.page-product-detail[data-solution-key="industry"] {
  --detail-hero-bg-image: url("../../image/solution/highResolution/工业.png");
  --detail-hero-bg-position: center center;
}

body.page-ai-solution[data-solution-key="safe"],
body.page-product-detail[data-solution-key="safe"] {
  --detail-hero-bg-image: url("../../image/solution/highResolution/安防.png");
  --detail-hero-bg-position: 56% center;
  --detail-hero-bg-position-mobile: 56% center;
}

body.page-ai-solution
  .site-header:not(.is-solid):not(.is-menu-active):not(.is-nav-open):not(.is-focus-active),
body.page-product-detail
  .site-header:not(.is-solid):not(.is-menu-active):not(.is-nav-open):not(.is-focus-active) {
  background: transparent;
  border-bottom-color: transparent;
}

body.page-ai-solution .site-header.is-nav-open,
body.page-ai-solution .site-header.is-menu-active,
body.page-ai-solution .site-header.is-focus-active,
body.page-ai-solution .site-header.is-solid,
body.page-product-detail .site-header.is-nav-open,
body.page-product-detail .site-header.is-menu-active,
body.page-product-detail .site-header.is-focus-active,
body.page-product-detail .site-header.is-solid {
  background: #ffffff;
  border-bottom-color: rgba(16, 24, 40, 0.1);
  box-shadow: var(--shadow-header);
}

body.page-ai-solution .hero,
body.page-product-detail .hero {
  min-height: var(--subpage-banner-image-min-height);
  padding: var(--subpage-banner-padding-top) 0 var(--subpage-banner-padding-bottom);
  color: rgba(255, 255, 255, 0.94);
}

body.page-ai-solution .hero-bg,
body.page-ai-solution .hero-ai-medical-bg,
body.page-product-detail .hero-bg,
body.page-product-detail .hero-ai-medical-bg,
.hero-ai-medical-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-ai-medical-bg {
  background:
    linear-gradient(
      135deg,
      rgba(6, 16, 32, 0.72) 0%,
      rgba(10, 22, 40, 0.68) 25%,
      rgba(13, 31, 60, 0.62) 50%,
      rgba(11, 26, 50, 0.58) 100%
    ),
    url("../../image/generalBanner.png");
  background-size: cover;
  background-position: center;
}

body.page-ai-solution .hero-ai-medical-bg,
body.page-product-detail .hero-ai-medical-bg {
  background:
    linear-gradient(
      135deg,
      rgba(6, 16, 32, 0.72) 0%,
      rgba(10, 22, 40, 0.68) 25%,
      rgba(13, 31, 60, 0.62) 50%,
      rgba(11, 26, 50, 0.58) 100%
    ),
    var(--detail-hero-bg-image);
  background-size: var(--detail-hero-bg-size);
  background-position: var(--detail-hero-bg-position);
}

.hero-ai-medical-graphic {
  position: absolute;
  top: 0;
  right: 0;
  width: 65%;
  height: 100%;
  opacity: 0.95;
  background:
    linear-gradient(
      118deg,
      rgba(var(--brand-rgb), 0) 18%,
      rgba(var(--brand-rgb), 0.24) 46%,
      rgba(var(--brand-rgb), 0) 74%
    ),
    linear-gradient(
      136deg,
      rgba(89, 171, 245, 0) 20%,
      rgba(89, 171, 245, 0.16) 50%,
      rgba(89, 171, 245, 0) 76%
    ),
    linear-gradient(
      180deg,
      rgba(89, 171, 245, 0.08) 0%,
      rgba(89, 171, 245, 0) 82%
    );
  background-repeat: no-repeat;
  background-position:
    94% center,
    80% center,
    right center;
  background-size:
    68% 100%,
    54% 100%,
    100% 100%;
  pointer-events: none;
}

.hero-ai-medical-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(56, 139, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 139, 255, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.hero-ai-medical-bg::after {
  content: "";
  position: absolute;
  top: 0;
  right: 18%;
  width: 168px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(66, 165, 245, 0) 0%,
    rgba(66, 165, 245, 0.14) 34%,
    rgba(66, 165, 245, 0.08) 62%,
    rgba(66, 165, 245, 0) 100%
  );
  opacity: 0.8;
  transform: skewX(-18deg);
  pointer-events: none;
}

.hero-ai-medical-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: start;
  max-width: none;
}

.hero-ai-medical-copy {
  width: 100%;
  max-width: 640px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  text-align: left;
}

.hero-ai-medical-copy::before {
  display: none;
}

.hero-ai-medical-title {
  margin: 0 0 24px;
  color: #ffffff;
  font-size: var(--page-title-size);
  font-weight: 800;
  line-height: var(--line-title);
  letter-spacing: -0.02em;
}

.hero-ai-medical-desc {
  max-width: 560px;
  margin: 0 0 32px;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--body-lg-size);
  line-height: 1.8;
}

body.page-ai-solution .hero-actions,
body.page-product-detail .hero-actions,
.page-products-overview .hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 12px;
}

@media (max-width: 768px) {
  body.page-ai-solution .hero-ai-medical-bg,
  body.page-product-detail .hero-ai-medical-bg {
    background-size: var(--detail-hero-bg-size-mobile);
    background-position: var(--detail-hero-bg-position-mobile);
  }

  .hero-ai-medical-graphic {
    width: 44%;
    opacity: 0.66;
  }

  .hero-ai-medical-bg::after {
    right: 12%;
    width: 90px;
  }

  .hero-ai-medical-inner {
    grid-template-columns: 1fr;
  }

  .hero-ai-medical-title {
    font-size: var(--page-title-size-sm);
  }

  .hero-ai-medical-desc {
    font-size: var(--body-lg-size-sm);
  }
}