:root {
  --height: 100px;
  --width: 200px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100vh;
  /*background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);*/
  background-image:url("../img/index.png");
  font-family: sans-serif;
  /*background-color:#000000;*/
}
.navigation{
  position: absolute;
  width: 100%;
  height: 400px;
  top: 450px;
  left: 0;
  border: 0px red solid;
  margin:0 auto;
  /* position: relative */

}
/*.wrapper {*/
/*  position: absolute;*/
/*  !*left: 537px;*!*/
/*  left: 30%; ;*/
/*  top: 450px;*/
/*  text-align:center;*/
/*  width: calc(4 * var(--width));*/
/*  height: calc(4 * var(--height));*/
/*  display: flex;*/
/*  justify-content: center;*/
/*  align-items: center;*/
/*  margin: 0 auto;*/
/*}*/
.wrapper {
  /* position: absolute; */
  position: relative
  /* left: 537px; */
  /*top: 450px;*/
  text-align:center;
  /*width: calc(4 * var(--width));*/
  /*height: calc(4 * var(--height));*/

  width: 1000px;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  /*border: 2px blue solid;*/

}
.button {
  position: relative;
  /*width: calc(0.8 * var(--width));*/
  /*height: calc(0.7 * var(--height));*/

  width:300px;
  height: 100px;


  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  overflow: hidden;
  margin: 0 0;
  /*border: 1px red solid;*/
/*   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 3px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0, 0.22, 0.3, 1); */
}
.button:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* background: rgba(0, 0, 0, 0.1); */
}
.button span {
  color: #fff;
  font-size: 1rem;
  z-index: 10;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.button .back {
  position: absolute;
  width: 0;
  height: 0;
  filter: url(#filter);
  border-radius: 50%;
  z-index: 5;
  transition: all 2.5s cubic-bezier(0.1, 0.22, 0.3, 1);
}
.button:hover span a img{
  -moz-transform:scale(1.1);
  -webkit-transform:scale(1.1);
  -o-transform:scale(1.1);
  transform:scale(1.1);
}

/*浮动横幅*/
@keyframes scaleDrawB {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
 /* 0%{
    transform: translateY(100px);
  }
  25%{
    transform: translateY(200px);
  }
  50%{
    transform: translateY(300px);
  }
  75%{
    transform: translateY(500px);
  }*/

  from {top:800px;}
  to {top:0px;}
}


/*浮动横幅*/
.showImgB {
  position: absolute;
  left: 0px;
  top: 0px;
  text-align:center;
  /*width: 200px;*/
  /*height: 100px;*/
  /* display: flex; */
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  animation: scaleDrawB 1.5s ease-in-out ;
}


.divimg:hover img{
  -moz-transform:scale(1.1);
  -webkit-transform:scale(1.1);
  -o-transform:scale(1.1);
  transform:scale(1.1);
}


@media only screen and (max-width: 750px) {
  .wrapper {
    flex-direction: column;
  }

  .button {
    margin: 0.8rem 0;
  }
}


.bg-video{
  width:100%;
  /*height:auto;*/
  left:0px;
  top:0px;
  z-index: -1;
  vertical-align:bottom;
  display:block;
  position:absolute;
}
.v1{
  width: 100%;
  height: auto;
}