.hanaBanner{
  height: 695px;
  background-color: #00227c;
  padding-top: 165px;
  position: relative;
  margin-bottom: 130px;
}
.cloudSum{
  display: flex;
  justify-content: space-between;
  color: #fff;
}
.cloudSum img{
  padding-top: 30px;
  width: 630px;
}
.cloudSumL{
  width: 520px;
}
.cloudSumL h4{
  font-size: 36px;
  font-weight: 500;
  margin-bottom: 50px;
}
.cloudSumL p{
  color: #fff;
  font-size: 17px;
  line-height: 32px
}

.cloudVisitor{
  padding-bottom: 120px;
}
.yfk{
  width: 980px;
  margin: 140px auto;
  position: relative;
}
.yfkBig{
  width: 100%;
}
.cloudImg{
  position: absolute;
  top: 289px;
  width: 110px;
}
.img1{
  left: 8px;
}
.img2{
  left: 222px;
}
.img3{
  left: 435px;
}
.img4{
  left: 650px;
}
.img5{
  left: 862px;
}
.cloudP{
  position: absolute;
  font-size: 16px;
  line-height: 26px;
}
.p1{
  width: 160px;
  top: 200px;
  left: -130px;
}
.p2{
  width: 180px;
  top: 430px;
  left: 160px;
}
.p3{
  width: 150px;
  top: 430px;
  left: 423px;
}
.p4{
  width: 270px;
  top: 430px;
  left: 650px;
}
.p5{
  width: 165px;
  top: 200px;
  left: 955px;
}


/* 动画 */
@-webkit-keyframes bounceIn {
  0%,100%,20%,40%,60%,80% {
      -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
      transition-timing-function: cubic-bezier(0.215,.61,.355,1)
  }

  0% {
      opacity: 0;
      -webkit-transform: scale3d(.3,.3,.3);
      transform: scale3d(.3,.3,.3)
  }

  20% {
      -webkit-transform: scale3d(1.1,1.1,1.1);
      transform: scale3d(1.1,1.1,1.1)
  }

  40% {
      -webkit-transform: scale3d(.9,.9,.9);
      transform: scale3d(.9,.9,.9)
  }

  60% {
      opacity: 1;
      -webkit-transform: scale3d(1.03,1.03,1.03);
      transform: scale3d(1.03,1.03,1.03)
  }

  80% {
      -webkit-transform: scale3d(.97,.97,.97);
      transform: scale3d(.97,.97,.97)
  }

  100% {
      opacity: 1;
      -webkit-transform: scale3d(1,1,1);
      transform: scale3d(1,1,1)
  }
}

@keyframes bounceIn {
  0%,100%,20%,40%,60%,80% {
      -webkit-transition-timing-function: cubic-bezier(0.215,.61,.355,1);
      transition-timing-function: cubic-bezier(0.215,.61,.355,1)
  }

  0% {
      opacity: 0;
      -webkit-transform: scale3d(.3,.3,.3);
      -ms-transform: scale3d(.3,.3,.3);
      transform: scale3d(.3,.3,.3)
  }

  20% {
      -webkit-transform: scale3d(1.1,1.1,1.1);
      -ms-transform: scale3d(1.1,1.1,1.1);
      transform: scale3d(1.1,1.1,1.1)
  }

  40% {
      -webkit-transform: scale3d(.9,.9,.9);
      -ms-transform: scale3d(.9,.9,.9);
      transform: scale3d(.9,.9,.9)
  }

  60% {
      opacity: 1;
      -webkit-transform: scale3d(1.03,1.03,1.03);
      -ms-transform: scale3d(1.03,1.03,1.03);
      transform: scale3d(1.03,1.03,1.03)
  }

  80% {
      -webkit-transform: scale3d(.97,.97,.97);
      -ms-transform: scale3d(.97,.97,.97);
      transform: scale3d(.97,.97,.97)
  }

  100% {
      opacity: 1;
      -webkit-transform: scale3d(1,1,1);
      -ms-transform: scale3d(1,1,1);
      transform: scale3d(1,1,1)
  }
}
@-webkit-keyframes zoomInUp {
  0% {
      opacity: 0;
      -webkit-transform: scale3d(.1,.1,.1) translate3d(0,1000px,0);
      transform: scale3d(.1,.1,.1) translate3d(0,1000px,0);
      -webkit-animation-timing-function: cubic-bezier(0.55,.055,.675,.19);
      animation-timing-function: cubic-bezier(0.55,.055,.675,.19)
  }

  60% {
      opacity: 1;
      -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
      transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
      -webkit-animation-timing-function: cubic-bezier(0.175,.885,.32,1);
      animation-timing-function: cubic-bezier(0.175,.885,.32,1)
  }
}

@keyframes zoomInUp {
  0% {
      opacity: 0;
      -webkit-transform: scale3d(.1,.1,.1) translate3d(0,1000px,0);
      -ms-transform: scale3d(.1,.1,.1) translate3d(0,1000px,0);
      transform: scale3d(.1,.1,.1) translate3d(0,1000px,0);
      -webkit-animation-timing-function: cubic-bezier(0.55,.055,.675,.19);
      animation-timing-function: cubic-bezier(0.55,.055,.675,.19)
  }

  60% {
      opacity: 1;
      -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
      -ms-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
      transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
      -webkit-animation-timing-function: cubic-bezier(0.175,.885,.32,1);
      animation-timing-function: cubic-bezier(0.175,.885,.32,1)
  }
}


.cloudVisitor:hover .cloudImg{
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s
}

.cloudVisitor:hover .cloudP{
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
}