@charset "UTF-8";
@import url(./base.css);
.content {
  width: 100%;
  height: 100vh;
  /*margin: 0;*/
  background: url(../image/c3f.jpg) no-repeat 0/100% 100%;
  position: relative; }
  .content .doorl {
    z-index: 10;
    width: 50%;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    background: url(../image/l.png) no-repeat 0/100% 100%; }
    .content .doorl.l {
      transition: animation 2s ease;
      animation: left 2s ease forwards; }

@keyframes left {
  0% {
    left: 0; }
  100% {
    left: -50%; } }
  .content .doorr {
    z-index: 10;
    width: 50%;
    height: 100vh;
    position: absolute;
    left: 50%;
    top: 0;
    background: url(../image/r.png) no-repeat 0/100% 100%; }
    .content .doorr.r {
      transition: animation 2s ease;
      animation: right 2s ease forwards; }

@keyframes right {
  0% {
    left: 50%; }
  100% {
    left: 100%; } }
  .content .item {
    z-index: 10;
    width: 250px;
    height: 60px;
    position: fixed;
    left: 0;
    right: 0;
    top: 80vh;
    margin: 0 auto;
    font-family: 楷体;
    font-size: 50px;
    text-align: center;
    font-weight: bolder;
    color: #7b0e11;
    transition: animation 2s ease;
    cursor: pointer; }
    .content .item.up {
      animation: top 2s ease forwards;
      color: #736eea;
      text-shadow: 0 0 .5em, 0 0 .3em; }
    .content .item:hover {
      color: #736eea;
      text-shadow: 0 0 .1em, 0 0 .3em; }

@keyframes top {
  0% {
    top: 80vh; }
  100% {
    top: 0vh; } }
  .content .btn {
    width: 100%;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0; }
    .content .btn:hover {
      cursor: pointer; }
    .content .btn .fapai {
      width: 300px;
      height: 100px;
      position: fixed;
      left: 20px;
      top: 20vh;
      background: url("./../image/fapai .png"); }
    .content .btn .restart {
      width: 300px;
      height: 100px;
      position: fixed;
      right: 20px;
      top: 20vh;
      background: url("./../image/restart.png"); }
  .content .box {
    width: 1000px;
    height: 600px;
    position: relative;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto; }
    .content .box .poke {
      width: 120px;
      height: 168px;
      border-radius: 10px;
      box-sizing: border-box;
      border: 5px solid #736eea;
      background-size: 100%;
      position: absolute;
      top: -168px;
      left: 440px;
      opacity: 0; }

.move-right {
  width: 100px;
  height: 30px;
  position: fixed;
  bottom: 15vh;
  left: 46%;
  background: url("./../image/left1.png");
  opacity: 0; }
  .move-right:hover {
    cursor: pointer; }

.move-left {
  width: 100px;
  height: 30px;
  position: fixed;
  bottom: 10vh;
  left: 46%;
  background: url("./../image/left2.png");
  opacity: 0; }
  .move-left:hover {
    cursor: pointer; }