.home-first-section {
  height: 90vh;
  min-height: 650px;
  // background: linear-gradient(
  //   #1a2358 0%,
  //   #12277b 33%,
  //   #0c2d8f 67%,
  //   #002a89 100%
  // );
  background: linear-gradient(
    #0037AF 0%,
    #0c2d8f 100%,
  );

  .grid-picture {
    position: relative;
    height: 100%;
    background: url(../img/grid.png) no-repeat;
    background-size: 100% auto;
    .waves {
      position: absolute;
      left: 0;
      right: 0;
      bottom: -2px;
      height: 10vh;
    }
  }

  .website-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80vh;
    min-height: 600px;
  }

  .website {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    margin-right: 3.5%;
    color: #fff;
    .website-title {
      color: #fff;
      font-size: 2.4em;
    }
    .website-vision {
      display: flex;
      justify-content: space-between;
      margin-bottom: 1.3em;
      color: #ff832b;
      font-size: 1.5em;
    }
    .website-des {
      font-size: 1em;
      line-height: 2.3;
      margin-bottom: 1.5em;
      opacity: 0.8;
    }

    .website-more {
      margin: 0;
    }
  }

  .play-img {
    display: flex;
    flex: none;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    width: 680px;
    height: 580px;
    img {
      opacity: 0;
    }

    .play-glass {
      position: relative;
      width: 351px;
      z-index: 1;
    }
    .play-circle {
      position: absolute;
      width: 165px;
      height: 160px;
      right: 17%;
      bottom: -6.5%;
      z-index: 2;
    }

    .play-circle-circle1,.play-circle-circle2,.play-circle-circle3,.play-circle-circle4,.play-circle-circle5 {
      position: absolute;
      width: 85px;
      height: 53px;
      right: 23.2%;
      bottom: 9%;
      z-index: 2;
      border: 1px solid rgb(73, 169, 241);
      border-radius: 50%;
    }

    .play-pillar {
      position: absolute;
      left: -11%;
      top: 37%;
      width: 230px;
    }
    .play-box1 {
      position: absolute;
      left: -6%;
      bottom: 30%;
      width: 57px;
    }
    .play-box2 {
      position: absolute;
      left: 0%;
      bottom: 34%;
      width: 57px;
    }
    .play-box3 {
      position: absolute;
      left: 6%;
      bottom: 38%;
      width: 57px;
    }
    .play-box4 {
      position: absolute;
      left: 12%;
      bottom: 42%;
      width: 57px;
    }
    .play-code1 {
      position: absolute;
      right: 0%;
      top: 33%;
      width: 128px;
      z-index: 1;
    }
    .play-code-bed {
      position: absolute;
      right: -5%;
      top: 44%;
      width: 211px;
      z-index: 1;
      opacity: 1;
    }
    .play-logo {
      position: absolute;
      top: 25%;
      width: 87px;
      z-index: 10;
      color: #fff;
      font-size: 40px;
    }
    .play-text1 {
      position: absolute;
      z-index: 2;
    }
    .play-text2 {
      position: absolute;
      z-index: 2;
    }
    .play-text3 {
      position: absolute;
    }
    .play-text4 {
      position: absolute;
    }
  }

  .active {
    .website {
      animation: website 0.75s 1 forwards;
    }
    .play-glass {
      animation: glass 0.75s 1 forwards;
    }
    .play-circle {
      animation: circle 0.75s 1 forwards;
    }
    .play-circle-circle1,.play-circle-circle2,.play-circle-circle3,.play-circle-circle4,.play-circle-circle5{
      animation: circle-before 0.75s 1 forwards;
    }
    .play-box1 {
      animation: box1 0.75s 1 forwards;
    }
    .play-box2 {
      animation: box2 0.75s 1 forwards;
    }
    .play-box3 {
      animation: box3 0.75s 1 forwards;
    }
    .play-box4 {
      animation: box4 0.75s 1 forwards;
    }
    // .play-code {
    //   animation: code 0.75s 1 forwards;
    // }
    .play-code1 {
      animation: code1 0.75s 1 forwards;
    }
    .play-code-bed {
      animation: codeBed 0.75s 1 forwards;
    }
    .play-logo {
      animation: logo 6s 0.5s infinite; //linear
    }
    .play-text1 {
      // animation: text1-show 0.5s 1 0.5s forwards;
      animation: text1-show 6s 0.5s infinite;
    }
    .play-text2 {
      animation: text2-show 6s 0.5s infinite;
    }
    .play-text3 {
      animation: text3-show 6s 0.5s infinite;
    }
    .play-text4 {
      animation: text4-show 6s 0.5s infinite;
    }

    .circulation {
      .play-code1 {
        animation: code1-circulation 6s infinite;
      }

      .play-box1 {
        animation: box1-circulation 2s infinite;
      }

      .play-box2 {
        animation: box2-circulation 2s infinite;
      }

      .play-box3 {
        animation: box3-circulation 2s infinite;
      }

      .play-box4 {
        animation: box4-circulation 2s infinite;
      }

      .play-circle-circle1{
        animation: circle-circle 6s 0.25s infinite;
      }
      .play-circle-circle2{
        animation: circle-circle 6s 2.25s infinite;
      }
      .play-circle-circle3{
        animation: circle-circle 6s 4.25s infinite;
      }
      // .play-circle-circle4{
      //   animation: circle-circle 6s 4.5s infinite;
      // }
      // .play-circle-circle5{
      //   animation: circle-circle 6s 6s infinite;
      // }
    }
  }

  @keyframes website {
    0% {
      top: 25vh;
      opacity: 0;
    }
    100% {
      top: 0;
      opacity: 1;
    }
  }

  @keyframes glass {
    0% {
      opacity: 0;
      transform: rotate(-25deg);
      top: 5.5%;
    }
    100% {
      opacity: 1;
      transform: rotate(0deg);
      top: 0;
    }
  }

  @keyframes logo {
    0% {
      opacity: 1;
      top: 23%;
    }
    50% {
      opacity: 1;
      top: 12%;
    }
    100% {
      opacity: 1;
      top: 23%;
    }
  }

  // logo动效方案一
  // @keyframes logo {
  //   10% {
  //     opacity: 0;
  //     top: 33%;
  //     transform: rotateY(0deg);
  //   }
  //   50% {
  //     opacity: 1;
  //     top: 12%;
  //     transform: rotateY(360deg);
  //   }
  //   90% {
  //     opacity: 0;
  //     top: 33%;
  //     transform: rotateY(360deg);
  //   }
  // }

  // logo动效方案二
  // @keyframes logo {
  //   15% {
  //     opacity: 0;
  //     top: 33%;
  //     // transform: rotate(0deg);
  //   }
  //   40% {
  //     opacity: 1;
  //     top: 10%;
  //     transform: rotateX(0deg);
  //   }
  //   60% {
  //     opacity: 1;
  //     top: 10%;
  //     transform: rotateX(360deg);
  //   }
  //   85% {
  //     opacity: 0;
  //     top: 40%;
  //     // transform: rotateY(360deg);
  //   }
  // }

  // logo动效方案三
  // @keyframes logo {
  //   0% {
  //     opacity: 1;
  //     top: 10%;
  //     transform: rotateY(0deg);
  //   }

  //   25% {
  //     opacity: 1;
  //     top: 10%;
  //     transform: rotateY(90deg);
  //   }
  //   50% {
  //     opacity: 1;
  //     top: 10%;
  //     transform: rotateY(180deg);
  //   }

  //   75% {
  //     opacity: 1;
  //     top: 10%;
  //     transform: rotateY(270deg);
  //   }

  //   100% {
  //     opacity: 1;
  //     top: 10%;
  //     transform: rotateY(360deg);
  //   }
  // }

  @keyframes circle {
    0% {
      opacity: 0;
      bottom: -10%;
    }
    100% {
      opacity: 1;
      bottom: -6.5%;
    }
  }

  @keyframes circle-before {
    0% {
      opacity: 0;
      bottom: -1%;
    }
    100% {
      opacity: 1;
      bottom: 9%;
    }
  }


  @keyframes box1 {
    0% {
      opacity: 0;
      bottom: 20%;
    }
    100% {
      opacity: 1;
      bottom: 30%;
    }
  }

  @keyframes box2 {
    0% {
      opacity: 0;
      bottom: 24%;
    }
    100% {
      opacity: 1;
      bottom: 34%;
    }
  }

  @keyframes box3 {
    0% {
      opacity: 0;
      bottom: 28%;
    }
    100% {
      opacity: 1;
      bottom: 38%;
    }
  }

  @keyframes box4 {
    0% {
      opacity: 0;
      bottom: 32%;
    }
    100% {
      opacity: 1;
      bottom: 42%;
    }
  }

  @keyframes box1-circulation {
    0% {
      opacity: 1;
      height: 60px;
    }
    48% {
      height: 65px;
    }
    52% {
      height: 65px;
    }
    100% {
      height: 60px;
      opacity: 1;
    }
  }

  @keyframes box2-circulation {
    0% {
      height: 96px;
      opacity: 1;
    }
    48% {
      height: 90px;
    }
    52% {
      height: 90px;
    }
    100% {
      height: 96px;
      opacity: 1;
    }
  }

  @keyframes box3-circulation {
    0% {
      height: 128px;
      opacity: 1;
    }
    48% {
      height: 135px;
    }
    52% {
      height: 135px;
    }
    100% {
      height: 128px;
      opacity: 1;
    }
  }

  @keyframes box4-circulation {
    0% {
      height: 113px;
      opacity: 1;
    }
    48% {
      height: 108px;
    }
    52% {
      height: 108px;
    }
    100% {
      height: 113px;
      opacity: 1;
    }
  }

  // @keyframes code {
  //   0% {
  //     opacity: 0;
  //     top: 40%;
  //   }
  //   100% {
  //     opacity: 1;
  //     top: 30%;
  //   }
  // }

  @keyframes code1 {
    0% {
      opacity: 0;
      top: 43%;
    }
    100% {
      opacity: 1;
      top: 33%;
    }
  }

  @keyframes code1-circulation {
    0% {
      opacity: 1;
      top: 33%;
    }
    50% {
      opacity: 1;
      top: 30%;
    }
    100% {
      opacity: 1;
      top: 33%;
    }
  }

  @keyframes codeBed {
    0% {
      opacity: 0;
      top: 54%;
    }
    100% {
      opacity: 1;
      top: 44%;
    }
  }

  @keyframes text1-show {
    5% {
      opacity: 0;
      width: 0;
      bottom: 36%;
      right: 60%;
    }
    20% {
      opacity: 1;
      width: 262px;
      bottom: 12%;
      left: 55%;
    }
    80% {
      opacity: 1;
      width: 262px;
      bottom: 12%;
      left: 55%;
    }
    100% {
      opacity: 0;
      width: 0;
      bottom: 36%;
      right: 60%;
    }
  }

  @keyframes text2-show {
    5% {
      opacity: 0;
      width: 0;
      bottom: 36%;
      right: 60%;
    }
    20% {
      opacity: 1;
      width: 262px;
      bottom: 10%;
      right: 56%;
    }
    80% {
      opacity: 1;
      width: 262px;
      bottom: 10%;
      right: 56%;
    }
    100% {
      opacity: 0;
      width: 0;
      bottom: 36%;
      right: 60%;
    }
  }

  @keyframes text3-show {
    5% {
      opacity: 0;
      width: 0;
      right: 36%;
      top: 50%;
    }
    20% {
      opacity: 1;
      right: 8%;
      top: 6%;
      width: 227px;
    }
    80% {
      opacity: 1;
      right: 8%;
      top: 6%;
      width: 227px;
    }
    100% {
      opacity: 0;
      width: 0;
      right: 36%;
      top: 50%;
    }
  }

  @keyframes text4-show {
    5% {
      opacity: 0;
      width: 0;
      right: 50%;
      top: 50%;
    }
    20% {
      opacity: 1;
      top: 14%;
      right: 55%;
      width: 206px;
    }
    80% {
      opacity: 1;
      top: 14%;
      right: 55%;
      width: 206px;
    }
    100% {
      opacity: 0;
      width: 0;
      right: 50%;
      top: 50%;
    }
  }

  @keyframes circle-circle {

    0% {
      transform: scale(1);
      opacity: 1;
      bottom: 9%;
    }

    33% {
      transform: scale(1.2);
      opacity: 0.7;
      bottom: 9.5%;
    }


    67% {
      transform: scale(1.5);
      opacity: 0.35;
      bottom: 10.2%;
    }

    100% {
      transform: scale(2);
      opacity: 0;
      bottom: 11.5%;
    }
  }
}
