.product-banner {
  margin-top: 1rem;
  background: url(../images/product/bg.png);
  background-size: cover;
  color: #fff;
  min-height: calc(100vh - 1rem);
}

.product-banner h3 {
  padding-top: 2.16rem;
  font-size: .36rem;
  text-align: center;
  margin-bottom: .32rem;
}

.product-banner p {
  width: 6.9rem;
  height: 6.6rem;
  padding: 1rem .4rem;
  box-sizing: border-box;
  margin: 0 auto;
  background: linear-gradient(to bottom, rgba(95, 151, 250, 0.29) 0%, #5290f8 100%);
  box-shadow: 0.04rem 0.06rem 0.08rem 0rem rgba(95, 151, 250, 0.29);
  opacity: 0.9;
  border-radius: .4rem;
  font-size: .24rem;
  line-height: .48rem;
}

.product-category,
.product-virtue {
  color: #333;
  padding: .9rem 0 .4rem;
}

.product-category h3,
.product-virtue h3 {
  font-size: .32rem;
  font-weight: 500;
}

.product-category > p,
.product-virtue > p {
  font-size: .24rem;
  font-weight: 300;
  line-height: .42rem;
  color: #333;
  margin: .32rem 0 .8rem 0;
}

.product-category ul,
.product-virtue ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.product-category {
  text-align: center;
}

.product-category ul {
  display: flex;
  flex-wrap: wrap;
}

.product-category ul li {
  background: rgba(76, 145, 248, 0.1);
  width: 3rem;
  height: 3.8rem;
  margin-bottom: .26rem;
  padding: .6rem 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.product-category ul li img {
  max-width: 1.3rem;
}

.product-category ul li:hover {
  background: rgba(76, 145, 248, 0.18);
  box-shadow: 0.1rem 0.16rem 0.34rem 0.02rem rgba(103, 118, 232, 0.08);
  border-radius: .2rem;
}

.product-category ul li:hover p {
  color: #4C91F8;
}

.product-virtue {
  padding: .9rem 0;
  background-color: #F4F5FE;
}

.product-virtue h3 {
  text-align: center;
}

.product-virtue > p {
  padding: 0 .3rem;
  margin: .6rem 0 0;
}

.product-virtue ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0 .3rem;
  color: #fff;
  font-size: .48rem;
}

.product-virtue ul > li {
  flex-basis: 3.4rem;
  margin-top: .3rem;
  height: 3.6rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: center;
  background-size: cover;
}

.product-virtue ul > li h4 {
  font-size: .28rem;
}

.product-virtue ul > li:nth-child(1) {
  background: url(../images/product/1.png) center center no-repeat;
}

.product-virtue ul > li:nth-child(2) {
  background: url(../images/product/2.png) center center no-repeat;
}

.product-virtue ul > li:nth-child(3) {
  background: url(../images/product/3.png) center center no-repeat;
}

.product-virtue ul > li:nth-child(4) {
  background: url(../images/product/4.png) center center no-repeat;
}

.product-virtue ul > li:nth-child(5) {
  background: url(../images/product/5.png) center center no-repeat;
}

.product-virtue ul > li:nth-child(6) {
  background: url(../images/product/6.png) center center no-repeat;
}

.product-virtue ul > li p {
  font-size: .22rem;
  display: none;
  width: 95%;
  margin: 0 auto;
  font-weight: 300;
}

.product-virtue ul > li:hover {
  background: #6776E8;
}

.product-virtue ul > li:hover h4 {
  line-height: .3rem;
}

.product-virtue ul > li:hover p {
  display: block;
  line-height: .36rem;
  text-align: left;
}

.product-process {
  height: 11.08rem;
  background: url(../images/product/process.jpg);
  background-size: cover;
}