.content-box {
  font-family: PingFangSC;
}

.content-box .area-select {
  padding: 0.2rem;
}

.content-box .area-select .sub-title {
  font-size: .30rem;
  font-family: PingFangSC;
  font-weight: 600;
  color: #1C232B;
  line-height: .4rem;
  margin-bottom: 0.2rem;
}

.content-box .area-select .area-list {
  height: 1.86rem;
  background: #FAFAFA;
  box-shadow: 0px 0.04rem 0.08rem 0px rgba(0, 0, 0, 0.2);
  border-radius: .1rem;
  padding: 0.12rem 0.1rem;
}

.content-box .area-select .area-list .area-swiper {
  width: 100%;
  height: 1.74rem;
}

.content-box .area-select .area-list .area-swiper .swiper-wrapper .swiper-slide {
  height: 1.4rem;
  border-radius: .1rem;
  overflow: hidden;
}

.content-box .area-select .area-list .area-swiper .swiper-wrapper .swiper-slide .area {
  position: relative;
  width: 100%;
  height: 100%;
}

.content-box .area-select .area-list .area-swiper .swiper-wrapper .swiper-slide .area span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  height: 0.5rem;
  line-height: 0.5rem;
  font-size: 0.24rem;
  font-family: PingFangSC;
  color: #FFFFFF;
  background: rgba(64, 119, 246, 0.5);
  text-align: center;
}

.content-box .area-select .area-list .area-swiper .swiper-wrapper .swiper-slide.active .area span {
  font-size: .26rem;
  font-weight: 600;
}

.content-box .area-introduce {
  width: 100%;
  background: #5A8CF8;
  margin-bottom: 0.2rem;
}

.content-box .area-introduce .area-name {
  height: .88rem;
  background: linear-gradient(135deg, #D93D77 0%, #D644EB 21%, #6797F7 64%, #3870F6 100%);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
  font-size: .36rem;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 0.88rem;
  text-align: center;
}

.content-box .area-introduce .area-content {
  padding: 0.2rem 0.2rem 0.1rem;
}

.content-box .area-introduce .area-content .subheading {
  font-size: .28rem;
  font-weight: 600;
  color: #FFFFFF;
  border-bottom: solid #FFFFFF 0.04rem;
  padding-bottom: 0.1rem;
}

.content-box .area-introduce .area-content .content {
  padding-top: 0.1rem;
  font-size: .24rem;
  color: #FFFFFF;
}

.content-box .company {
  margin: 0 0.2rem 0.2rem;
}

.content-box .company .subheading {
  font-size: .28rem;
  font-weight: 600;
  color: #1C232B;
  border-bottom: solid #BABABA 0.04rem;
  padding-bottom: 0.1rem;
}

.content-box .company .content {
  padding: 0.2rem 0;
}

.content-box .company .content .swiper-container {
  padding-bottom: 0.6rem;
}

.content-box .company .content .swiper-container .swiper-wrapper .swiper-slide {
  height: 2.2rem;
}

.content-box .company .content .swiper-container .swiper-wrapper .swiper-slide a {
  display: block;
  height: 2.2rem;
}

.content-box .product {
  padding: 0.2rem;
  background: #5A8CF8;
}

.content-box .product .subheading {
  font-size: .28rem;
  font-weight: 600;
  color: #FFFFFF;
  border-bottom: solid #FFFFFF 0.04rem;
  padding-bottom: 0.1rem;
}

.content-box .product .content .sort-list {
  overflow: hidden;
  white-space: nowrap;
  overflow-x: auto;
  padding-bottom: 0.2rem;
  margin-bottom: 0.1rem;
}

.content-box .product .content .sort-list .item {
  display: inline-block;
  width: 50%;
  height: .78rem;
  background: #1F48A9;
  text-align: center;
  font-size: .28rem;
  color: #FFFFFF;
  line-height: 0.78rem;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
}

.content-box .product .content .sort-list .item.active {
  font-weight: 600;
  background: linear-gradient(135deg, #D93D77 0%, #D644EB 21%, #6797F7 64%, #3870F6 100%);
}

.content-box .product .content .swiper-container {
  padding-bottom: 0.48rem;
}

.content-box .product .content .swiper-container .swiper-wrapper .swiper-slide .slide-item {
  height: 1.46rem;
}

.content-box .product .content .swiper-container .swiper-pagination .swiper-pagination-bullet {
  background: #2F5DC7;
  border: 1px solid #FFFFFF;
}

.content-box .product .content .swiper-container .swiper-pagination .swiper-pagination-bullet-active {
  background: #FFFFFF;
}

.swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: 0;
}
