ul, li {
    list-style: none;
    line-height: 0px;
}

body, div, ul, li, img, p, a, h1, h2, h3 {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

html, body {
    font-family: "微软雅黑", "黑体", Helvetica, Verdana, sans-serif;
    font-size: 14px;
    height: 100%;
    overflow: hidden;
}

body {
    width: 100%;
    height: 100%;
    background: #fff;
}
div>img{display: block;width: 100%;}
.load{height: 100%;width: 100%;margin: 0 auto;max-width: 600px;background: #f1f1f1;top: 0;z-index: 9;}
.load img{width: 30%;left: 35%;top:45%;position: absolute;}
.main{position: relative;width: 100%;height: 100%;background: #7a53b7;margin: 0 auto;max-width: 600px;background: url(images/bj.jpg) no-repeat; background-size: 100% 100%;}
.wp{width: 100%;height: 100%;position: relative;}
.fm{position: absolute;width: 100%;height: 95%;z-index: 4;top: 5%;display: none;}
.fm>div{position: absolute;}
.fm .zuohua{top: 84%;z-index: 2}
.fm .zi{width: 24%;top: 13%;z-index: 2;left: 43.3%;}
.fm .dht{z-index: 1;}
.zuohua {top:84%;position: absolute;z-index: 3;animation:  1.5s 1s slideLeft infinite }
.gd{width: 100%;height: 100%;position: absolute;z-index: 2;display: none;}
.turn{display: none;position: absolute;z-index: 2;top: 4%;background: url(images/bg.png)  no-repeat;background-size: 100% 100%;width: 100%;}
#flipbook {position: relative;left: 11.33%;width: 88.67%;perspective:1500;-webkit-perspective:1500;height: 100%;}
#flipbook>div{background: url(images/bg2.png) no-repeat;background-size: 100% 100%;position: absolute;top: 0;z-index: 1;}
.hard{transform-origin: 0 50%;}
#flipbook .bf{position: absolute;top: 0;}

.turning {animation: 2.5s turn linear;-webkit-animation: 2.5s turn linear; }
.copyright {text-align: center;position: absolute;bottom: 0px;width: 80%;left: 10%; z-index: 9;color: #fff;display: none;}

.copyright img{max-width: 100%;display: block;}
@keyframes slideLeft {
  0%{
  
    transform: translateX(-20px);
    -webkit-transform: translateX(-20px);
  }

  50% {
    transform: translateX(-0px);
    -webkit-transform: translateX(-0px);
  }
  100% {
    transform: translateX(-20px);
    -webkit-transform: translateX(-20px);
  }
}

@-webkit-keyframes turn {
  0%{
    opacity: 1;
    transform: rotateY(-0deg);
    -webkit-transform: rotateY(-0deg);
  }

  75% {
    opacity: 0.9;
    -webkit-transform: rotateY(-90deg);
    -webkit-transform: rotateY(-90deg);
  }
  100% {
    opacity: 0
  }
}

@keyframes turn {
  0%{
    opacity: 1;
    transform: rotateY(-0deg);
    -webkit-transform: rotateY(-0deg);
  }

  75% {
    opacity: 0.9;
    -webkit-transform: rotateY(-90deg);
    -webkit-transform: rotateY(-90deg);
  }
  100% {
    opacity: 0
  }
}