.content-box {
  flex: 1;
  max-width: 1200px;
  margin: auto
}

@media (max-width: 1000px) {
  .content-box {
    padding: 10px
  }
}

.block-title {
  text-align: center;
  color: #333;
  font-size: 48px;
  font-weight: 600;
  padding: 24px 10px;
  position: relative;
  word-break: auto-phrase
}

.block-title:before {
  content: "";
  width: 60px;
  height: 8px;
  background: #333;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%)
}

.block-1 {
  background: url("../image/H1.png") no-repeat 0 0;
  background-size: 100% 100%;
  height: 638px;
  display: flex;
  align-items: center
}

.block-1 .content-box .text-wrap {
  color: #fff;
  margin-bottom: 35px
}

.block-1 .content-box .text-wrap .p1 {
  font-size: 38px;
  font-weight: 600;
  margin-bottom: 15px
}

.block-1 .content-box .text-wrap .p2 {
  color: #fffc;
  font-size: 26px;
  margin-bottom: 10px
}

.block-1 .content-box .text-wrap .p3 {
  font-size: 26px
}

.block-1 .content-box .download-box {
  display: flex;
  flex-direction: column;
  gap: 21px
}

.block-1 .content-box .download-box .download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 369px;
  height: 86px;
  border-radius: 8px;
  background: var(--Linear, linear-gradient(90deg, #c6ab66 13.97%, #a28438 94.63%))
}

.block-1 .content-box .download-box .download-btn .btn-icon {
  width: 35px
}

.block-1 .content-box .download-box .download-btn .btn-text {
  color: #fff;
  font-size: 32px;
  font-weight: 500
}

.block-2 .content-box .about-wrap {
  padding: 60px 0;
  display: flex;
  justify-content: center;
  gap: 83px
}

.block-2 .content-box .about-wrap .base-img {
  flex: 1;
  max-width: 587px
}

.block-2 .content-box .about-wrap .p1 {
  flex: 1;
  color: #333c;
  text-align: justify;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px
}

.block-3 {
  background: url("../image/H5.png") no-repeat center, #d0dbf2;
  background-size: cover
}

.block-3 .content-box {
  padding: 30px 0 15px
}

.block-3 .content-box .p1 {
  color: #333;
  font-size: 28px;
  font-weight: 500;
  line-height: 36px;
  margin-bottom: 40px
}

.block-3 .content-box .p2 {
  color: #181717cc;
  font-size: 22px;
  line-height: 28px;
  text-align: right
}

.block-4 {
  overflow: hidden;
  height: 850px;
  background: url("../image/H2.png") no-repeat center center, linear-gradient(201deg, #040d62 -23.2%, #1c224b 96.94%);
  background-size: cover
}

.block-4 .block-title {
  margin-top: 120px;
  margin-bottom: 100px;
  color: #fff
}

.block-4 .block-title:before {
  background: #ebcda7
}

.block-5 {
  padding: 107px 0 152px;
  background: #d9e5fd
}

.block-5 .content-box {
  padding-top: 76px
}

.block-5 .year-wrap {
  position: relative;
  display: flex;
  justify-content: flex-end
}

.block-5 .year-wrap .cur-year {
  width: 326px;
  height: 392px;
  padding: 30px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 10px #0000000f;
  position: absolute;
  left: 0;
  bottom: -20px;
  z-index: 8;
  display: flex;
  flex-direction: column
}

.block-5 .year-wrap .cur-year .icon-img {
  margin: auto;
  flex: 1;
  overflow: hidden;
  max-width: 236px;
  display: flex;
  align-items: center;
  justify-content: center
}

.block-5 .year-wrap .cur-year .year {
  position: relative;
  padding-left: 23px;
  color: #333;
  font-size: 32px;
  font-weight: 500
}

.block-5 .year-wrap .cur-year .year:before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ceb493, #685b4a)
}

.block-5 .year-wrap .scroll-data-wrap {
  max-width: 924px
}

.block-5 .info-box {
  margin-bottom: 37px;
  width: 924px;
  height: 332px;
  background: url("../image/H3.png") no-repeat 0 0;
  background-size: cover;
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-direction: column;
  padding-left: 80px;
  border-radius: 8px;
  overflow: hidden
}

.block-5 .year-list {
  padding-left: 74px
}

.block-5 .year-list .item {
  width: 76px;
  height: 96px;
  flex-shrink: 0;
  color: #999;
  font-size: 22px;
  font-weight: 500;
  background: #fff;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #fff;
  cursor: pointer
}

.block-5 .year-list .item.active {
  border: 1px solid #15235c;
  color: #15235c
}

.block-6 {
  padding: 73px 0
}

.block-6 .content-box .brand-list {
  display: flex;
  gap: 30px;
  margin-top: 50px;
  margin-bottom: 80px;
  overflow: hidden
}

.block-6 .content-box .brand-list .brand-item {
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid #eef1fb;
  background: #1c224b;
  width: 190px;
  height: 124px;
  flex-shrink: 0
}

.block-6 .content-box .brand-list .brand-item img {
  height: 80%
}

.block-6 .content-box .faq-box {
  margin-top: 56px
}

.block-6 .content-box .faq-box .faq-item {
  display: flex;
  gap: 7px
}

.block-6 .content-box .faq-box .faq-item.question {
  margin-bottom: 19px
}

.block-6 .content-box .faq-box .faq-item.question .people-icon {
  background: #181949
}

.block-6 .content-box .faq-box .faq-item.question .text {
  color: #333;
  font-size: 20px;
  font-weight: 500
}

.block-6 .content-box .faq-box .faq-item.answer {
  margin-bottom: 14px
}

.block-6 .content-box .faq-box .faq-item.answer .people-icon {
  background: #eea70a
}

.block-6 .content-box .faq-box .faq-item.answer .text {
  color: #333c;
  font-size: 16px;
  line-height: 28px
}

.block-6 .content-box .faq-box .faq-item .people-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  color: #fff;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px
}

.block-6 .content-box .faq-box .faq-item .text {
  flex: 1;
  padding: 6px 16px;
  border-radius: 4px;
  background: #eef1fb
}

@media (max-width: 900px) {
  .block-1 .content-box {
    overflow: hidden
  }

  .block-1 .content-box .text-wrap {
    transform: scale(.9)
  }

  .block-1 .content-box .download-box {
    transform: scale(.8)
  }

  .block-2 .content-box .about-wrap {
    display: block
  }

  .block-2 .content-box .about-wrap .base-img {
    width: 60%;
    margin: auto
  }

  .block-2 .content-box .about-wrap .p1 {
    font-size: 16px;
    line-height: 2;
    text-align: justify
  }

  .block-3 .content-box {
    padding: 10px
  }

  .block-3 .content-box .p1 {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 10px
  }

  .block-3 .content-box .p2 {
    font-size: 16px
  }

  .block-4 {
    height: auto;
    padding: 30px 0
  }

  .block-4 .block-title {
    margin: auto;
    font-size: 32px
  }

  .block-5 .content-box .year-wrap .cur-year {
    display: none
  }

  .block-5 .content-box .year-wrap .scroll-data-wrap {
    width: 100%
  }

  .block-5 .content-box .year-wrap .scroll-data-wrap .info-box {
    width: auto;
    height: auto;
    padding: 30px 15px;
    font-size: 14px
  }

  .block-5 .content-box .year-wrap .scroll-data-wrap .year-list {
    padding-left: 0
  }
}
