:root {
  --page-max: 1200px;
  --safe-x: 16px;
}

.line_box{
  border: 2px solid #EFEEF4;
  background: #FFFFFF;
  border-radius: 16px;
  padding-bottom: 45px;
}


* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
  background: #fff;
}
.w1200{
  width: 1200px;
  margin: 0 auto;
}
body {
  margin: 0;
  font-family:"Microsoft YaHei", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica,
    Arial, "PingFang SC", "Hiragino Sans GB",  sans-serif;
  color: #0b1b3a;
  /* background: #f6fbff; */
}

.hero {
  position: relative;
  width: 100%;
  /* min-height: clamp(320px, 46vw, 520px); */
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    url("../ai_image/banenr_bg.png") center bottom / cover no-repeat;
}

.hero__inner {
  position: relative;
  width: min(var(--page-max), calc(100% - 2 * var(--safe-x)));
  display: grid;
  place-items: center;
  padding: 140px 0 198px;
}

.hero__title {
 max-width: 612px;
 /* max-height: 229px; */
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 20px rgba(12, 40, 90, 0.12));
}

.hero__badge {
  position: absolute;
  bottom: clamp(18px, 4vw, 44px);
  max-width: 193px;
  height: auto;
  display: block;
  opacity: 0.98;
  filter: drop-shadow(0 10px 20px rgba(12, 40, 90, 0.14));
  user-select: none;
  pointer-events: none;
}

.hero__badge--left {
  left: 0;
}

.hero__badge--right {
  right: 0;
}

.banner2-wrap {
  width: min(var(--page-max), calc(100% - 2 * var(--safe-x)));
  margin: -120px auto 0;
}

.scenes {
  padding: 80px 0 90px;
}

.scenes__inner {
  width: min(var(--page-max), calc(100% - 2 * var(--safe-x)));
  margin: 0 auto;
  text-align: center;
}

.scenes__title {
  font-size: 28px;
  font-weight: 600;
  color: #0B172A;
  margin: 0 0 18px;
}

.scenes__subtitle {
  font-weight: 400;
  font-size: 20px;
  color: #5D6A80;
  margin: 0 0 40px;
}

.scenes__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

.scene-card {
  /* background: #f5fbff; */
  border-radius: 24px;
  /* padding: 32px 24px 28px;
  box-shadow: 0 18px 40px rgba(15, 70, 140, 0.06); */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.scene-card__image {
  width: 100%;
  max-width: 390px;
  display: block;
  /* margin: 0 auto 20px; */
}

.scene-card__title {
  font-size: 16px;
  color: #222;
  margin: 0;
  margin-top: 30px;
}

.knowledge {
  position: relative;
  padding: 80px 0 90px;
  margin-top: -1px; /* 避免背景与上一块之间出现白色缝隙 */
  background: url("../ai_image/bg2.png") center top / cover no-repeat;
  /* width: 1200px;
  margin: 0 auto; */
}

.knowledge__inner {
  width: min(var(--page-max), calc(100% - 2 * var(--safe-x)));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 40px;
}

.knowledge__title {
  font-size: 26px;
  font-weight: 600;
  color: #0b172a;
  margin: 0 0 52px;
}

.knowledge__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.knowledge__item {
  display: flex;
  align-items: flex-start;
  align-items: center;
  font-weight: 400;
  font-size: 20px;
  color: #5D6A80;
  line-height: 1.7;
  margin-bottom: 8px;
}

.knowledge__item-icon {
  width: 12px;
  height: 12px;
  margin-right: 8px;
  margin-top: 6px;
}

.knowledge__graphic {
  /* justify-self: end; */
  max-width: 360px;
  width: 100%;
}

.knowledge--reverse {
  padding-top: 40px;
  padding-bottom: 345px;
  /* padding-bottom: 0; */
  margin-top: -1px; /* 避免两块背景之间出现白色缝隙 */
}

.knowledge--reverse .knowledge__inner {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.knowledge--reverse .knowledge__graphic {
  justify-self: start;
  max-width: 400px;
}

.core-value {
  padding:  0  0  90px;
  margin-top: -250px;
  position: relative;
  z-index: 22;
  /* background: #f6f9ff; */
}

.core-value__inner,
.core-feature__inner {
  width: min(var(--page-max), calc(100% - 2 * var(--safe-x)));
  margin: 0 auto;
  text-align: center;
}

.core-section-title {
  font-size: 26px;
  font-weight: 600;
  color: #0b172a;
  margin: 0 0 18px;
}

.core-section-subtitle {
  font-weight: 400;
  font-size: 20px;
  color: #5D6A80;
  margin: 0 0 60px;
}

.core-value__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 35px 40px;
}

.core-value-card {
  display: flex;
  align-items: flex-start;
  padding: 37px 40px;
  border-radius: 16px;
  background: #EEF3F6;
  /* box-shadow: 0 10px 30px rgba(17, 91, 180, 0.06); */
}

.core-value-card__icon {
  width: 64px;
  height: 64px;
  margin-right: 25px;
  flex-shrink: 0;
}

.core-value-card__title {
  font-weight: bold;
  font-size: 20px;
  color: #1C234C;
  margin: 0 0 6px;
  text-align: left;
}

.core-value-card__desc {
  font-weight: 400;
  font-size: 16px;
  color: #72748F;
  margin: 0;
  text-align: left;
  line-height: 1.7;
}

.core-feature {
  padding: 40px 0 0px;
  padding-top: 0;
  /* background: url("./images/hxbg.png") center top / cover no-repeat; */  
}

.core-feature__badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.core-feature-card {
  width: 180px;
  padding: 37px 34px 50px;
  border-radius: 18px;
  background: #E7F4FF;
  max-height: 270px;
  /* box-shadow: 0 12px 32px rgba(12, 71, 158, 0.08); */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.core-feature-card:nth-child(2n){
  margin-top: 50px;
}
.core-feature-card__icon {
  width: 60px;
  height: 60px;
  margin-bottom: 20px;
}

.core-feature-card__title {
  font-size: 14px;
  font-weight: 600;
  color: #182238;
  margin: 0 0 4px;
}

.core-feature-card__desc {
  font-weight: 400;
  font-size: 16px;
  color: #1C234C;
  line-height: 36px;
}

.benefit {
  padding: 90px 0 90px;   
  background:
    /* linear-gradient(to bottom, #ffffff 0%, #ffffff 55%, rgba(246, 249, 255, 0) 55%), */
    url("../ai_image/hxbg.png") left 100% no-repeat ;
    background-size: 100% 467px;
}

.benefit__inner {
  width: min(var(--page-max), calc(100% - 2 * var(--safe-x)));
  margin: 0 auto;
  text-align: center;

  /* border: 2px solid #EFEEF4; */
}

.benefit__title {
  font-size: 26px;
  font-weight: 600;
  color: #0b172a;
  margin: 0 0 18px;
}

.benefit__subtitle {
  font-weight: 400;
  font-size: 20px;
  color: #5D6A80;
  margin: 0 0 50px;
}

.benefit__banner {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(9, 46, 109, 0.12);
}

.benefit__banner img {
  width: 100%;
  display: block;
}

.benefit__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 178px;
  padding: 45px 56px 0 80px;
  /* margin: 28px auto 0; */
  text-align: left;
  max-width: 1200px;
}

.benefit__item {
  display: flex;
  align-items: flex-start;
  align-items: center;
  font-weight: bold;
  font-size: 20px;
  color: #1C234C;
}

.benefit__item-icon {
  width: 33px;
  height: 33px;
  margin-right: 8px;
  margin-top: 4px;
  flex-shrink: 0;
}

.benefit__tagline {
  margin: 76px 0 0;
  font-weight: 400;
  font-size: 28px;
  color: #2872E8;
}

/* ---------------- Responsive (merged) ---------------- */
@media (max-width: 1400px) {
  .w1200{
    width: 100%;
  }
}

@media (max-width: 1200px) {
  .banner2-wrap {
    margin-top: calc(-120px * (100vw / 1200));
  }
}

@media (max-width: 900px) {
  .hero {
    background-position: center top;
  }
  .hero__inner {
    padding: 40px var(--safe-x) 56px;
    justify-items: center;
  }
  .hero__title {
    max-width: 90%;
  }
  .hero__badge {
    position: static;
    max-width: 180px;
    margin-top: 16px;
  }
  .hero__badges-row {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 8px;
  }

  .banner2-wrap {
    margin-top: 24px;
  }

  .scene-card__title {
    margin-top: 20px;
  }
  .scenes {
    padding: 56px 0 72px;
  }
  .scenes__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .scene-card {
    padding: 24px 16px 20px;
  }

  .knowledge,
  .knowledge--reverse {
    padding: 56px 0 40px;
  }
  .knowledge__inner,
  .knowledge--reverse .knowledge__inner {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .knowledge__graphic,
  .knowledge--reverse .knowledge__graphic {
    justify-self: center;
    margin-top: 24px;
  }
  .knowledge__item{
    font-size: 13px;
  }

  .benefit__tagline{
    margin-top: 25px !important;
  }
  .core-value {
    padding: 56px 0 10px;
    margin-top: 0;
  }
  .core-value__grid {
    grid-template-columns: 1fr;
  }
  .core-feature {
    padding: 40px 0 0px;
  }
  .core-feature-card {
    width: 45%;
    min-width: 350px;
  }
  .core-feature-card:nth-child(2n){
    margin-top: 0;
  }

  .benefit {
    padding: 56px 0 24px;
  }
  .scenes__title,
  .knowledge__title,
  .core-section-title,
  .benefit__title {
    font-size: 20px;
  }

  .scenes__subtitle,
  .core-section-subtitle,
  .benefit__subtitle {
    font-size: 16px;
  }
  .benefit__item{
    font-size: 16px;
  }
  .benefit__item-icon{
    width: 15px;
    height: 15px;
  }
  .line_box{
    padding: 0;
  }
  .benefit__list {
    grid-template-columns: 1fr;
    gap: 10px 0;
    padding: 20px;
  }
  .benefit__tagline{
    font-size: 16px;
  }
}

@media (max-width: 600px) {
  .core-value__grid{
    gap: 20px;
  }
  .scene-card{
    padding: 0 ;
  }
  .scenes__inner{
    width: 100%;
  }
  .scenes__grid {
    grid-template-columns: 1fr;
    /* max-width: 360px; */
    width: 100%;
    margin: 0 auto;
  }

  .core-feature-card {
    width: 100%;
    /* max-width: 220px; */
  }
  .core-value-card__title{
     font-size: 16px;
  }
  .core-value-card__desc{
    font-size: 13px;
  }
  .benefit__item{
    font-size: 13px;
  }
}

@media (max-width: 560px) {
  .hero__title{
    width: 100%;
  }
}

@media (max-width: 420px) {
  .hero__badge {
    width: 128px;
    bottom: 12px;
  }
}