@charset "utf-8";
body,ul,h1,h2,h3,h4,form{ margin:0; padding:0;}
h1,h2,h3,h4{ font-weight:normal;}
body{ font-family:"Microsoft YaHei";}
input{ outline:0; vertical-align:middle;}
img{ border:0;}
li{ list-style-type:none;}
a{ text-decoration:none;}
button{outline: none;cursor: pointer;font-family: "Microsoft YaHei";}
html{background-color: #fff;}

body {
  background-color: #333;
}
.main {
  width: 100%;
  height: 100vh;
  font-size: 0;
}
header {
  position: fixed;
  z-index: 6;
  width: 100%;
  display: flex;
  align-items: center;
  padding-left: 20px;
  height: 90px;
}
header img {
  height: 40px;
}
.noActive {
  display: block;
}
.acitve {
  display: none;
}
header:hover {
  background-color: rgba(255, 255, 255, .9);
}
header:hover .acitve{
  display: block;
}
header:hover .noActive{
  display: none;
}
.video {
  /* display: flex;
  align-items: center;
  justify-content: center; */
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  color: #fff;
}
.video .text {
  position: absolute;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  font-size: 56px;
  font-family: Roboto-Regular, Roboto;
  padding: 32vh 0 6vh;
  text-align: center;
  box-sizing: border-box;
  -webkit-animation: opam 3s linear;
          animation: opam 3s linear;
  -webkit-animation-fill-mode: forwards; 
  animation-fill-mode: forwards;
}
.video .text .copyright {
  font-size: 18px;
}
video {
  min-width: 100vw;
  min-height: 100vh;
  z-index: 2;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

@-webkit-keyframes opam {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: .5;
  }
}

@keyframes opam {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: .5;
  }
}