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



.floor1,.floor3,.floor5{
  background-color: #fff;
  height: 520px;
}
.floor2,.floor4{
  background-color: #f2f7fa;
  height: 520px;
}
.floor1Con,.floor2Con,.floor3Con,.floor4Con,.floor5Con{
  position: relative;
  width: 1200px;
  margin: 0 auto;
}
.floorTit{
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 50px;
}
.floorCon{
  font-size: 14px;
  line-height: 32px;
}

.floor1L,.floor3L,.floor5L{
  position: absolute;
  width: 530px;
  color: #333;
  left: 0px;
  top: 150px;
}
 .floor1R,.floor3R,.floor5R{
  position: absolute;
  right: 0;
  top: 70px;
}

.floor2L,.floor4L{
  position: absolute;
  color: #333;
  left: 0;
  top: 100px;
}
 .floor2R,.floor4R{
  position: absolute;
  width: 530px;
  right: 0;
  top: 120px;
  text-align: right;
}
.floor2 img{
  width:450px ;
  height: 340px;
}
.floor3R{
  top: 100px;
}
.floor4L{
  top: 30px;
}
.floor4R{
  top: 137px;
}
.floor5L{
  top: 160px;
}
.floor5 .floor5R{
  top: 120px;
}
.floor2R{
  width: 540px;
}


/* 动画 */
@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        /* -webkit-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0) */
    }

    100% {
        opacity: 1;
        /* -webkit-transform: none;
        transform: none */
        transform: translate3d(0,0,0);
    }
}


@-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)
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
  -webkit-animation-duration: .75s;
  animation-duration: .75s
}

.floor1:hover  .floor1L,.floor2:hover  .floor2R,.floor3:hover  .floor3L,.floor4:hover  .floor4R,.floor5:hover  .floor5L{
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
  -webkit-animation-duration: 2s;
  animation-duration: 2s
}

/* 
@-webkit-keyframes fadeIn {
  0% {
      opacity: 0
  }

  100% {
      opacity: 1
  }
}

@keyframes fadeIn {
  0% {
      opacity: 0
  }

  100% {
      opacity: 1
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn
}

.floor1:hover  .floor1R,.floor2:hover  .floor2L,.floor3:hover  .floor3R,.floor4:hover  .floor4L,.floor5:hover  .floor1R{
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn
  -webkit-animation-duration: 2s;
  animation-duration: 2s
} */