/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family:
    "Alibaba PuHuiTi 3.0",
    "PingFang SC",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  background: #ffffff;
  width: 100%;
  overflow-x: hidden;
  color: #000000;
}

/* 页面容器 */
.page-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  width: 100%;
  background: #ffffff;
}

/* 头部样式 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5.104vw;
  background: url("./fixed_header.png") no-repeat center;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  padding: 0 9.479vw;
  z-index: 100;
}

.header-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2.083vw;
  width: 31.198vw;
  height: 1.875vw;
}

.header-logo-text {
  font-family: "YouSheBiaoTiHei", sans-serif;
  font-weight: 400;
  font-size: 1.875vw;
  line-height: 1.875vw;
  color: #ffffff;
}

.header-slogan {
  font-weight: 500;
  font-size: 0.833vw;
  line-height: 1.146vw;
  color: #ffffff;
}

/* Banner 样式 */
.banner {
  position: relative;
  width: 100%;
  height: 56.25vw;
  background: #f3f4f6;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0vw;
  isolation: isolate;
}

.banner-overlay {
  position: absolute;
  width: 100%;
  height: 56.25vw;
  left: 0vw;
  top: 0vw;
  background: url("./top_bg.png") no-repeat center;
  background-size: 100% 100%;
  z-index: 1;
}

.banner-content {
  position: absolute;
  width: 37.146vw;
  height: 18.157vw;
  left: 9.479vw;
  top: 14.375vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 0.833vw;
  z-index: 2;
}

.banner-title {
  width: 37.094vw;
  height: 4.688vw;
  font-family: "Alibaba PuHuiTi 3.0", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 3.333vw;
  line-height: 4.688vw;
  color: #000000;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.banner-desc {
  width: 36.146vw;
  height: 10.104vw;
  font-family: "Alibaba PuHuiTi 3.0", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 1.042vw;
  line-height: 1.667vw;
  text-align: justify;
  color: #81858e;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

.banner-desc span {
  color: #3b91fe;
}

.banner-more {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: 0.938vw;
  width: 8.604vw;
  height: 1.698vw;
  cursor: pointer;
  text-decoration: none;
  flex: none;
  order: 2;
  flex-grow: 0;
}

.banner-more-text {
  width: 5vw;
  height: 1.667vw;
  font-family: "Alibaba PuHuiTi 3.0", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 1.25vw;
  line-height: 1.667vw;
  text-align: justify;
  color: #3b91fe;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.banner-more-icon {
  width: 1.719vw;
  height: 1.698vw;
  background: url("./jxlj_icon.png") no-repeat center;
  background-size: 100% 100%;
  flex: none;
  order: 1;
  flex-grow: 0;
}

/* 产品体系卡片 */
.product-system {
  position: absolute;
  width: 93.229vw;
  height: 8.281vw;
  left: 3.385vw;
  bottom: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0vw;
  gap: 0.521vw;
  z-index: 5;
}

.product-card {
  width: 22.917vw;
  height: 8.281vw;
  background: #fafbfd;
  box-shadow: 0vw 0.417vw 2.083vw #dde7f3;
  border-radius: 0.417vw;
  padding: 0.938vw 1vw;
  display: flex;
  flex-direction: column;
  gap: 0.417vw;
  position: relative;
  overflow: hidden;
}

.card-icon {
  width: 2.1875vw;
  height: 2.1875vw;
  background-size: contain;
  background-repeat: no-repeat;
}

.card-title {
  font-weight: 700;
  font-size: 1.354vw;
  line-height: 1.875vw;
  color: #000000;
}

.card-desc {
  font-weight: 400;
  font-size: 1.094vw;
  line-height: 1.51vw;
  color: #81858e;
}

.card-decoration {
  position: absolute;
  width: 5.99vw;
  height: 8.281vw;
  right: 0;
  top: 0;
  background: url("./card_dec.png") no-repeat center;
  background-size: 100% 100%;
}

/* 相关产品介绍 */
.related-intro {
  padding: 3.125vw 12.135vw;
  background: url("./public_bg.png") no-repeat center;
  background-size: 100% 100%;
  width: 100%;
}

.section-title {
  font-weight: 700;
  font-size: 2.708vw;
  line-height: 3.802vw;
  color: #000000;
  margin-bottom: 2.031vw;
}

.section-desc {
  font-weight: 500;
  font-size: 1.042vw;
  line-height: 1.458vw;
  color: #81858e;
  margin-bottom: 4.01vw;
  width: 73.854vw;
}

.intro-grid {
  display: flex;
  flex-direction: row;
  gap: 0.938vw;
}

.intro-card {
  width: 18.229vw;
  height: 23.021vw;
  background: #f6f9ff;
  border-radius: 0.417vw;
  padding: 2.24vw 1.25vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2.135vw;
}

.intro-card-icon {
  width: 5.313vw;
  height: 5.313vw;
  background-size: contain;
  background-repeat: no-repeat;
}

.intro-card-title {
  font-weight: 500;
  font-size: 1.042vw;
  line-height: 1.667vw;
  color: #000000;
}

.intro-card-desc {
  font-weight: 500;
  font-size: 0.729vw;
  line-height: 1.042vw;
  text-align: justify;
  color: #81858e;
}

/* 支持功能 */
.supported-functions {
  padding: 3.125vw 13.073vw;
  background: #ffffff;
  width: 100%;
}

.functions-grid {
  display: flex;
  flex-direction: column;
  gap: 1.042vw;
}

.functions-row {
  display: flex;
  flex-direction: row;
  gap: 1.042vw;
}

.function-card {
  background: #f6f9ff;
  border: 0.104vw solid #3a90fd;
  border-radius: 0.417vw;
  padding: 1.875vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.729vw;
}

.function-card.small {
  width: 23.906vw;
  height: 16.667vw;
}

.function-card.large {
  width: 36.406vw;
  height: 16.667vw;
}

.function-icon {
  width: 5.729vw;
  height: 5.729vw;
  background-size: contain;
  background-repeat: no-repeat;
}

/* 产品优势 */
.product-advantages {
  background: url("./cpys_area.png") no-repeat center;
  background-size: 100% 100%;
  width: 100%;
  height: 41.614vw;
}

.advantages-decoration {
  position: absolute;
  width: 31.563vw;
  height: 2.448vw;
  left: 50.677vw;
  top: 33.906vw;
  background: #0073ff;
  filter: blur(6.51vw);
  z-index: 1;
}

.advantages-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 73.854vw;
  position: relative;
  z-index: 2;
}

.advantages-list {
  display: flex;
  flex-direction: column;
  gap: 2.292vw;
  width: 28.958vw;
}

.advantage-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.042vw;
}

.advantage-number {
  font-weight: 500;
  font-size: 4.271vw;
  line-height: 4.271vw;
  background: linear-gradient(180deg,
      #0070ff 0%,
      rgba(0, 112, 255, 0) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.advantage-text {
  display: flex;
  flex-direction: column;
  gap: 0.469vw;
}

.advantage-title {
  font-weight: 500;
  font-size: 1.25vw;
  line-height: 1.771vw;
  color: #000000;
}

.advantage-desc {
  font-weight: 500;
  font-size: 0.781vw;
  line-height: 1.094vw;
  color: #81858e;
}

.advantages-image {
  width: 30.521vw;
  height: 30.521vw;
}

/* CTA 区域 */
.cta-section {
  position: relative;
  width: 100%;
  height: 16.458vw;
  background: url("./contactUs.png") no-repeat center;
  background-size: 100% 100%;
}

.cta-button {
  position: absolute;
  bottom: 4.6875vw;
  left: 50%;
  transform: translateX(-50%);
}

.cta-bg {
  position: absolute;
  width: 100%;
  height: 16.458vw;
  left: 0vw;
  top: 0vw;
  background: #2563eb;
  opacity: 0.5;
}

.cta-title {
  width: 78.802vw;
  height: 3.229vw;
  font-family: "YouSheBiaoTiHei", sans-serif;
  font-weight: 400;
  font-size: 2.5vw;
  line-height: 3.229vw;
  color: #ffffff;
  text-align: center;
  z-index: 1;
}

.cta-button {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0.521vw;
  gap: 0.521vw;
  width: 7.708vw;
  height: 2.604vw;
  border: 0.052vw solid #ffffff;
  border-radius: 0.208vw;
  color: #ffffff;
  font-size: 1.146vw;
  text-decoration: none;
  z-index: 1;
}

/* 页脚 */
.footer {
  background: #0d0f1b;
  width: 100%;
  height: 12.708vw;
  padding: 3.125vw 13.073vw;
  display: flex;
  flex-direction: column;
  gap: 0.521vw;
}

.footer-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 73.854vw;
  height: 6.458vw;
}

.footer-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0vw;
  gap: 1.25vw;
  width: 21.198vw;
  height: 3.854vw;
}

.footer-title {
  width: 11.51vw;
  height: 1.458vw;
  font-size: 1.042vw;
  line-height: 1.458vw;
  color: #ffffff;
}

.footer-contact {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0vw;
  gap: 1.25vw;
  width: 24.198vw;
  height: 1.146vw;
  font-size: 0.833vw;
  line-height: 1.146vw;
  color: #ffffff;
}

.footer-qr {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 6.458vw;
  height: 6.458vw;
}

.qr-placeholder {
  width: 6.458vw;
  height: 6.458vw;
}

.footer-bottom {
  background: #0d0f1b;
  width: 100%;
  height: 3.229vw;
  padding: 1.042vw 13.073vw;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.521vw;
  color: #ffffff;
  font-size: 0.833vw;
  line-height: 1.146vw;
}