.page-service {
  background-color: #fff;
  transition: all 0.3s;
}

@media screen and (min-width: 521px) {
  .page-service > .banner {
    width: 100%;
  }

  .page-service > .banner > .bg {
    width: 100%;
    display: block;
  }

  .page-service .cus-news {
    width: 13.23rem;
    padding-top: .49rem;
    margin: -.8rem auto 0;
    background: linear-gradient(180deg, #fff 0%, #fff 30%, #00000000 70%);
    border-radius: .1rem .1rem 0 0;
    position: relative;
  }

  .page-service .cus-news > .sub-title {
    display: block;
    text-align: center;
    font-weight: 400;
    font-size: .14rem;
    color: #808080;
    margin-top: .192rem;
    margin-bottom: .29rem;
  }

  .page-service .cus-news > .cards {
    display: flex;
    justify-content: space-around;
    padding: .1rem .16rem;
  }

  .page-service .cus-news > .cards > .card {
    width: 3.6rem;
    height: 2.22rem;
    padding-left: .3rem;
    border-radius: .1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
  }

  .page-service .cus-news > .cards > .card.design {
    background: linear-gradient(180deg, #4CBEFF 0%, #2589FF 100%);
    /* box-shadow: 0px .04rem .1rem #4CBEFF88; */
  }

  .page-service .cus-news > .cards > .card.develop {
    background: linear-gradient(180deg, #76A8FF 0%, #0064FF 100%);
    /* box-shadow: 0px .04rem .1rem #76A8FF88; */
  }

  .page-service .cus-news > .cards > .card.added {
    background: linear-gradient(180deg, #BDBBFF 0%, #7D76FE 100%);
    /* box-shadow: 0px .04rem .1rem #BDBBFF88; */
  }

  .page-service .cus-news > .cards > .card > .title {
    font-weight: bolder;
    font-size: .24rem;
    color: #FFFFFF;
    text-shadow: 0px 2px 4px #288DFF;
  }

  .page-service .cus-news > .cards > .card > .desc {
    margin-top: .14rem;
    width: 2.47rem;
    font-size: .14rem;
    line-height: 1.4;
    color: #FFFFFF;
  }

  .page-service .cus-news > .cards > .card > .icon {
    position: absolute;
    width: .63rem;
    height: .63rem;
    right: .24rem;
    bottom: .16rem;
  }

  .page-service .cus-news > .flow-img {
    width: 11.16rem;
    height: 4.63rem;
    object-fit: contain;
    margin: .8rem auto;
    display: block;
  }
}

@media screen and (max-width: 520px) {
  .page-service {
    background-color: #fff;
    transition: all 0.3s;
  }

  .page-service > .banner {
    width: 100%;
  }

  .page-service > .banner > .bg {
    width: 100%;
    height: 2.4rem;
    object-fit: cover;
    display: block;
  }

  .page-service .cus-news {
    padding-bottom: .384rem;
    padding-top: .49rem;
    margin: -.6rem .24rem 0;
    background: linear-gradient(180deg, #fff 0%, #fff 30%, #00000000 70%);
    border-radius: .1rem .1rem 0 0;
    position: relative;
  }

  .page-service .cus-news > .sub-title {
    display: block;
    text-align: center;
    font-weight: 400;
    font-size: .14rem;
    color: #808080;
    margin-top: .12rem;
    margin-bottom: .29rem;
  }

  .page-service .cus-news > .cards {
    display: flex;
    flex-direction: column;
    padding: .1rem .16rem;
  }

  .page-service .cus-news > .cards > .card {
    margin: .1rem auto;
    width: 3.6rem;
    height: 2.22rem;
    padding-left: .3rem;
    border-radius: .1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    border: none;
  }

  .page-service .cus-news > .cards > .card.design {
    background: linear-gradient(180deg, #4CBEFF 0%, #2589FF 100%);
  }

  .page-service .cus-news > .cards > .card.develop {
    background: linear-gradient(180deg, #76A8FF 0%, #0064FF 100%);
  }

  .page-service .cus-news > .cards > .card.added {
    background: linear-gradient(180deg, #BDBBFF 0%, #7D76FE 100%);
  }

  .page-service .cus-news > .cards > .card > .title {
    font-weight: bolder;
    font-size: .24rem;
    color: #FFFFFF;
    text-shadow: 0px 2px 4px #288DFF;
  }

  .page-service .cus-news > .cards > .card > .desc {
    margin-top: .14rem;
    width: 2.47rem;
    font-size: .14rem;
    line-height: 1.4;
    color: #FFFFFF;
    text-align: justify;
  }

  .page-service .cus-news > .cards > .card > .icon {
    position: absolute;
    width: .63rem;
    height: .63rem;
    right: .24rem;
    bottom: .16rem;
  }

  .page-service .cus-news > .flow-img {
    width: 100%;
    object-fit: cover;
    display: block;
  }
}