@charset "utf-8";
/* CSS Document */

body {
  width: 100%;
  height: 100vh;
  background: url(../images/bg.jpg) no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
}

header {
  width: 94%;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  margin-top: 50px;
}

header .logo img {
  width: 214px;
}

header .right img {
  width: 250px;
}

.conter {
  width: 900px;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.conter ul {
  display: flex;
  justify-content: space-between;
}

.conter ul li {
  position: relative;
  width: 228px;
}

.conter ul li img {
  width: 100%;
}

.correct {
  position: absolute;
  width: 100%;
}

@-webkit-keyframes flipOutYtest {
  from {
    -webkit-transform: perspective(1400px);
    transform: perspective(1400px);
  }
  40% {
    -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, 60deg);
    transform: perspective(1400px) rotate3d(0, 1, 0, 60deg);
    opacity: 1;
  }
  50% {
    -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(1400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
  to {
    -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, 180deg);
    transform: perspective(1400px) rotate3d(0, 1, 0, 180deg);
    opacity: 0;
  }
}

@-webkit-keyframes flipInYtest {
  from {
    -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, -180deg);
    transform: perspective(1400px) rotate3d(0, 1, 0, -180deg);
    opacity: 0;
  }
  50% {
    -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, -90deg);
    transform: perspective(1400px) rotate3d(0, 1, 0, -90deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, -60deg);
    transform: perspective(1400px) rotate3d(0, 1, 0, -60deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(1400px);
    transform: perspective(1400px);
    opacity: 1;
  }
}

.Flip {
  -webkit-animation: flipOutYtest 0.75s linear;
  animation: flipOutYtest 0.75s linear;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.Flips {
  -webkit-animation: flipInYtest 0.75s linear;
  animation: flipInYtest 0.75s linear;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

footer {
  width: 100%;
  font-size: 26px;
  color: #fff;
  letter-spacing: 5px;
  text-align: center;
  position: absolute;
  left: 0;
  bottom: 30px;
}
.footer{
  width: 100%;
  font-size: 20px;
  color: #000;
  letter-spacing: 5px;
  text-align: center;
  position: absolute;
  left: 0;
  bottom: 5px;
}
.footer a{ color:#000/*颜色自定义*/;font-family:"楷体"; font-size:20px;}
.footer a:hover{ color:#000/*颜色自定义*/}}