.r1 {
  padding: 0 2.4rem 0.8rem;
}
.r1 h2 {
  font-family: Source Han Sans;
  font-size: var(--font30);
  font-weight: 500;
  line-height: 0.36rem;
  color: #181818;
  padding: 0.8rem 0 0.68rem;
  text-align: center;
}
.r1 .capacity {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.r1 .capacity .publicImgBox {
  width: 6.36rem;
  height: 4.68rem;
  flex-shrink: 0;
}
.r1 .capacity .info .title {
  font-family: Source Han Sans;
  font-size: var(--font20);
  font-weight: 500;
  line-height: normal;
  color: #181818;
  margin-bottom: 0.24rem;
}
.r1 .capacity .info .content {
  font-family: Source Han Sans;
  font-size: var(--font16);
  font-weight: normal;
  line-height: 0.22rem;
  color: #525252;
  white-space: pre-line;
}
.r1 .capacity .info .content + .title {
  margin-top: 0.3rem;
}
.r1 .capacity .info .tips {
  display: flex;
  /*gap: 0.12rem;*/
  margin-top: 0.2rem;
}
.r1 .capacity .info .tips .tip {
  border-radius: 2px;
  box-sizing: border-box;
  border: 1px solid #BBBECA;
  min-width: 1.16rem;
  padding: 0 0.12rem;
  height: 0.3rem;
  font-family: Source Han Sans;
  font-size: var(--font14);
  font-weight: normal;
  line-height: 0.28rem;
  color: #9E9E9E;
  text-align: center;
  width: auto;
}
.r1 .introduce {
  display: flex;
  margin-top: 0.36rem;
  gap: 0.24rem;
}
.r1 .introduce .item {
  width: calc(33.33% - 0.16rem);
  height: auto;
  border-radius: 4px;
  background: #E3ECF7;
  box-sizing: border-box;
  border: 2px solid #FFFFFF;
  box-shadow: -8px -8px 20px 0px #FFFFFF, 8px 8px 20px 0px rgba(55, 99, 170, 0.1);
  padding: 0 0.32rem 0.36rem;
  position: relative;
}
.r1 .introduce .item .itemBg {
  position: absolute;
  width: 1.44rem;
  height: 1.58rem;
  bottom: 3px;
  right: 3px;
}
.r1 .introduce .item .publicImgBox {
  width: 1.27rem;
  height: 1.55rem;
  margin: -0.36rem auto;
}
.r1 .introduce .item .title {
  margin: 0.72rem 0 0.24rem;
  font-family: Source Han Sans;
  font-size: var(--font20);
  font-weight: 500;
  line-height: normal;
  color: #181818;
  position: relative;
  z-index: 9;
}
.r1 .introduce .item .content {
  font-family: Source Han Sans;
  font-size: var(--font14);
  font-weight: normal;
  line-height: 0.24rem;
  color: #6B7280;
  position: relative;
  z-index: 9;
  white-space: break-spaces;
}
.r2 {
  width: 100vw;
  height: 2.43rem;
  background: url('../assets/images/bg5.png') no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.24rem;
  text-align: center;
}
.r2 .title {
  font-family: Source Han Sans;
  font-size: var(--font30);
  font-weight: 500;
  line-height: 0.36rem;
  color: #181818;
}
.r2 .subtitle {
  font-family: Source Han Sans;
  font-size: var(--font16);
  font-weight: normal;
  color: #525252;
}
.r3 {
  padding: 0.8rem 2.4rem;
}
.r3 h2 {
  font-family: Source Han Sans;
  font-size: var(--font30);
  font-weight: 500;
  line-height: 0.36rem;
  color: #181818;
  text-align: center;
}
.r3 .productList {
  margin-top: 0.68rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.24rem;
}
.r3 .productList .item {
  width: calc(50% - 0.12rem);
  box-shadow: 6px 6px 20px 0px rgba(120, 160, 255, 0.1);
  position: relative;
}
.r3 .productList .item .itemIcon {
  position: absolute;
  width: 0.25rem;
  height: 0.25rem;
  bottom: -0.05rem;
  right: -0.05rem;
}
.r3 .productList .item .content {
  padding: 0.18rem;
  font-family: Source Han Sans;
  font-size: var(--font16);
  font-weight: 350;
  line-height: 0.24rem;
  letter-spacing: normal;
  /* 次要文字2 */
  color: #525252;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.r3 .productList .item .header {
  height: 0.8rem;
  background: rgba(66, 166, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 0.32rem;
}
.r3 .productList .item .header .name {
  font-family: Source Han Sans;
  font-size: var(--font16);
  font-weight: 500;
  color: #181818;
}
.r3 .productList .item .header .imgBox {
  width: 0.8rem;
  height: 0.8rem;
  background: #42A6FF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.r3 .productList .item .header .imgBox .img {
  width: 0.36rem;
  height: 0.36rem;
}
@media screen and (orientation: portrait) {
  .r1 {
    padding: 0 0.24rem 0.8rem;
  }
  .r1 .introduce .item {
    width: 100%;
  }
  .r1 .introduce .item .content {
    line-height: normal;
  }
  .r1 .capacity {
    flex-wrap: wrap;
  }
  .r1 .capacity .publicImgBox {
    width: 100%;
    aspect-ratio: 636 / 468;
  }
  .r1 .capacity .info .content {
    line-height: normal;
  }
  .r3 {
    padding: 0.8rem 0.24rem;
  }
  .r3 .productList .item {
    width: 100%;
  }
}