.page-index .banner {
  height: 6.58rem;
  background-size: 19.20rem 6.58rem;
  position: relative; }
  .page-index .banner .main {
    height: 6.58rem;
    position: relative; }
    .page-index .banner .main .title {
      position: absolute;
      top: 1.80rem;
      font-size: .54rem;
      font-weight: bold;
      color: #FFFFFF; }
    .page-index .banner .main .title2 {
      position: absolute;
      top: 2.87rem;
      font-size: .42rem;
      color: #FFFFFF; }
    .page-index .banner .main .image {
      position: absolute;
      right: 0;
      top: 1.60rem;
      width: 5.09rem;
      height: 2.89rem; }
    .page-index .banner .main .feature {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 1.05rem;
      position: absolute;
      bottom: 0;
      width: 100%; }
      .page-index .banner .main .feature .item {
        flex: 1;
        display: flex;
        height: .50rem; }
        .page-index .banner .main .feature .item .icon {
          width: .50rem;
          height: .50rem;
          margin-right: .17rem; }
        .page-index .banner .main .feature .item .text {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          color: #FFFFFF; }
          .page-index .banner .main .feature .item .text .name {
            font-size: .18rem;
            font-weight: 400; }
            .page-index .banner .main .feature .item .text .name .smaller {
              font-size: .14rem; }
          .page-index .banner .main .feature .item .text .desc {
            font-size: .14rem;
            font-weight: 400; }
  .page-index .banner .feature-bg {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1.05rem;
    background-color: rgba(0, 0, 0, 0.1); }

.page-index .func {
  background-color: #fff; }
  .page-index .func .title {
    margin-top: 1.04rem;
    font-size: .30rem;
    font-weight: 400;
    color: #010101;
    text-align: center; }
    .page-index .func .title .high {
      color: #059FFF; }
  .page-index .func .title2 {
    margin-top: .21rem;
    font-size: .16rem;
    font-weight: 400;
    color: #7C7B7B;
    text-align: center; }
  .page-index .func .list {
    display: flex;
    justify-content: space-between;
    margin: 1.01rem 0 1.14rem; }
    .page-index .func .list .item {
      box-sizing: border-box;
      width: 1.77rem;
      height: 3.19rem;
      border: .02rem dashed #3797FF;
      border-radius: .80rem;
      position: relative;
      background: #FFFFFF no-repeat center center;
      background-size: 1.73rem 3.15rem; }
      .page-index .func .list .item .icon, .page-index .func .list .item .icon-trans {
        position: absolute;
        width: 1.16rem;
        height: 1.16rem;
        top: .54rem;
        left: .30rem;
        transition: all .2s; }
      .page-index .func .list .item .icon {
        opacity: 1; }
      .page-index .func .list .item .icon-trans {
        opacity: 0; }
      .page-index .func .list .item .desc {
        position: relative;
        text-align: center;
        font-size: .18rem;
        font-weight: 300;
        color: #717171;
        margin-top: 2.03rem; }
      .page-index .func .list .item .arrow {
        width: .20rem;
        height: .11rem;
        margin: .35rem auto 0;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        background-color: #3797FF;
        transition: all .2s; }
      .page-index .func .list .item:before {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        background-color: #fff;
        border-radius: .80rem;
        transition: all .2s; }
      .page-index .func .list .item:hover {
        border-color: transparent; }
        .page-index .func .list .item:hover .arrow {
          background-color: #fff; }
        .page-index .func .list .item:hover .desc {
          color: #fff; }
        .page-index .func .list .item:hover:before {
          opacity: 0; }
        .page-index .func .list .item:hover .icon {
          opacity: 0; }
        .page-index .func .list .item:hover .icon-trans {
          opacity: 1; }

.page-index .slogan {
  text-align: center;
  background-color: #f7f7f7; }
  .page-index .slogan .main {
    box-sizing: border-box;
    height: 2.38rem;
    padding: .91rem 0 .70rem; }
    .page-index .slogan .main .title {
      font-size: .30rem;
      font-weight: 400;
      color: #1C1C1C; }
    .page-index .slogan .main .title2 {
      font-size: .18rem;
      font-weight: 400;
      color: #6A6A6A;
      margin-top: .28rem; }

.page-index .card {
  display: flex;
  height: 4.95rem; }
  .page-index .card .item {
    flex: 1;
    position: relative;
    background-size: cover;
    background-position: center center;
    overflow: hidden; }
    .page-index .card .item .title {
      margin: 1.90rem auto 0;
      font-size: .42rem;
      font-weight: bold;
      color: #FFFFFF;
      text-align: center;
      transition: all .2s;
      position: relative;
      z-index: 1; }
      .page-index .card .item .title .inner {
        position: relative; }
        .page-index .card .item .title .inner:before {
          position: absolute;
          content: '';
          height: .04rem;
          bottom: -.30rem;
          left: .24rem;
          right: .24rem;
          background-color: #13A83F; }
    .page-index .card .item .mask {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3);
      transition: all .2s;
      font-size: .16rem; }
      .page-index .card .item .mask .desc {
        font-weight: 400;
        color: #FFFFFF;
        text-align: center;
        margin-top: 2.58rem;
        transition: all .2s;
        transform: translateY(0.5rem);
        opacity: 0; }
      .page-index .card .item .mask .btn {
        width: 1.30rem;
        height: .35rem;
        line-height: .35rem;
        text-align: center;
        background-color: #13a83f;
        color: #fff;
        border-radius: .18rem;
        margin: .76rem auto 0;
        transition: all .2s;
        transform: translateY(0.5rem);
        opacity: 0; }
        .page-index .card .item .mask .btn:hover {
          cursor: pointer; }
    .page-index .card .item:hover .title {
      transform: translateY(-0.63rem); }
      .page-index .card .item:hover .title .inner:before {
        opacity: 0; }
    .page-index .card .item:hover .mask {
      background: rgba(18, 39, 166, 0.47); }
      .page-index .card .item:hover .mask .desc, .page-index .card .item:hover .mask .btn {
        transform: translateY(0);
        opacity: 1; }

.page-index .case .main {
  padding-bottom: 1.20rem; }
  .page-index .case .main .title {
    font-size: .30rem;
    font-weight: 400;
    color: #010101;
    text-align: center;
    margin-top: .82rem; }
  .page-index .case .main .title2 {
    font-size: .16rem;
    font-weight: 400;
    color: #7C7B7B;
    text-align: center;
    margin-top: .24rem; }
  .page-index .case .main .list {
    margin-top: 1.05rem;
    display: flex;
    justify-content: space-evenly; }
    .page-index .case .main .list .item {
      width: 2.17rem;
      height: 1.40rem;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 1.00rem auto;
      transition: box-shadow .2s; }
      .page-index .case .main .list .item:hover {
        box-shadow: 0 0 .07rem #cccccc;
        cursor: pointer; }

.page-index .final {
  text-align: center;
  height: 1.90rem;
  background-color: #00aaff;
  padding-top: .50rem;
  box-sizing: border-box;
  position: relative;
  overflow: hidden; }
  .page-index .final .title {
    position: relative;
    font-size: .36rem;
    font-weight: bold;
    color: #FFFFFF;
    z-index: 1; }
  .page-index .final .title2 {
    position: relative;
    font-size: .30rem;
    font-weight: 400;
    color: #FFFFFF;
    margin-top: .35rem; }
  .page-index .final .circle1, .page-index .final .circle2, .page-index .final .circle3 {
    animation-duration: 1.2s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: linear; }
  .page-index .final .circle1 {
    background-color: rgba(56, 124, 249, 0.7);
    width: 2.40rem;
    height: 2.40rem;
    border-radius: 50%;
    position: absolute;
    top: -1.20rem;
    left: calc(50% - 1.9rem);
    z-index: 1;
    animation-name: circle1; }
  .page-index .final .circle2 {
    background-color: rgba(19, 187, 248, 0.7);
    width: 4.00rem;
    height: 4.00rem;
    border-radius: 50%;
    position: absolute;
    bottom: -2.80rem;
    left: calc(50% - 3.40rem);
    animation-name: circle2; }
  .page-index .final .circle3 {
    background-color: rgba(37, 203, 242, 0.7);
    width: 4.00rem;
    height: 4.00rem;
    border-radius: 50%;
    position: absolute;
    bottom: -2.50rem;
    left: calc(50% + 1.2rem);
    animation-name: circle2; }

@keyframes circle1 {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(1.5rem); } }

@keyframes circle2 {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-1.2rem); } }