.serve {
  /* height: 3.9rem; */
  width: 7.5rem;
  background: #ffffff;
  margin-bottom: .4rem;
}

.serve-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  align-items: center;
}

.serve-title {

  font-weight: bold;
  font-size: .32rem;
  letter-spacing: .04rem;
  position: relative;
  font-weight: bold;
  margin-top: .6rem;
}

.serve-title::after {
  display: block;
  content: '';
  position: absolute;
  width: .56rem;
  height: .04rem;

  background-color: #3665D9;
  bottom: -0.18rem;
  left: 50%;
  transform: translateX(-50%);
}

.serve-wrap {
  width: 100%;
  box-sizing: border-box;
  padding: 0 .24rem;
  margin-top: .42rem;
  display: flex;
  flex-direction: column;
  align-items: center;


}

.serve-item {
  width: 6.94rem;
  height: 3.2rem;
  margin-bottom: .2rem;
}


.serve-item.item1 {
  background-image: url('../images/serve-live.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.serve-item.item2 {
  background-image: url('../images/serve-camera.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.serve-item.item3 {
  background-image: url('../images/serve-video.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.serve-item-mask {
  width: 6.94rem;
  height: 3.2rem;
  background: linear-gradient(180deg, rgba(51, 51, 51, 0) 0%, #333333 100%);
  border-radius: .2rem .2rem .2rem .2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.serve-item-mask-title {


  font-weight: bold;
  font-size: .32rem;
  color: #FFFFFF;
  margin-top: .8rem;
  margin-bottom: .2rem;
}

.serve-item-mask-desc {



  font-size: .28rem;
  color: #FFFFFF;
  line-height: .4rem;
  text-align: center;
}

.extension {
  /* height: 18.4rem; */
  width: 7.5rem;
  background-color: #3665D9;
  box-sizing: border-box;
  padding: 0 .28rem;
}

.extension-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  align-items: center;
}

.extension-title {

  font-weight: bold;
  font-size: .32rem;
  letter-spacing: .04rem;
  position: relative;
  font-weight: bold;
  margin-top: .6rem;
  color: white;
}

.extension-title::after {
  display: block;
  content: '';
  position: absolute;
  width: .56rem;
  height: .04rem;

  background-color: #ffffff;
  bottom: -0.18rem;
  left: 50%;
  transform: translateX(-50%);
}

.extension-desc {
  width: 6.94rem;
  font-size: .28rem;
  color: #ffffff;
  text-indent: 2em;
  line-height: .4rem;
}

.extension-wrap {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
  margin-bottom: .6rem;
}

.extension-item {

  width: 3.36rem;
  height: 2.4rem;
  background: #FFFFFF;
  border-radius: .24rem;
  margin-top: .4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.extension-item-img{
  width: .88rem;
  height: .88rem;
  margin: .4rem 0;
}
.extension-item-desc{
  font-size: .28rem;
  color: #666666;
  line-height: .4rem;
}
.buy {
  /* height: 9.4rem;
   */
  width: 7.5rem;
  box-sizing: border-box;
  padding: 0 .28rem;
  margin-bottom: .6rem;

}

.buy-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  align-items: center;
}

.buy-title {

  font-weight: bold;
  font-size: .32rem;
  letter-spacing: .04rem;
  position: relative;
  font-weight: bold;
  margin-top: .6rem;
}

.buy-title::after {
  display: block;
  content: '';
  position: absolute;
  width: .56rem;
  height: .04rem;

  background-color: #3665D9;
  bottom: -0.18rem;
  left: 50%;
  transform: translateX(-50%);
}

.buy-img {
  width: 6.94rem;
  height: 3.76rem;
  margin-top: .4rem;
}
.buy-desc{
  font-size: .28rem;
  color: #666666;
  line-height: .4rem;
  text-indent: 2em;
  width: 100%;
}