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: #100f1e;margin: 0 auto;max-width: 600px;/*background: url(images/bg1.jpg) no-repeat; background-size: 100% 100%;*/}
.sec1,.sec2,.sec3{width: 100%;height: 100%;position: absolute;top: 0;}
.sec2,.sec3{display: none;}
.main .d1{position: absolute;z-index: 1;bottom: 0;}
.main .lian{position: absolute;z-index: 1;top: 7%;}
.main .tl{position: absolute;z-index: 1;top: 5%;display: none;}
.main .chosimg{position: absolute;z-index: 3;top: 75%;width: 50%;left: 25%;display: none;}
#canvas{position: absolute;z-index:1;top: 0;}
.noface{position: absolute;z-index: 3;top: 0;display: none;}
.sec2{z-index: 2;}
.tl2{margin: 7% auto;width: 72%;}

.tiyi{width:70%;margin: 0 auto;color: #fff;position: relative;/* margin-top: 4%; */}
.tiyi p{position: absolute;top: 22%;width: 80%;left: 13%;line-height: 1.5;font-size: 14px;}
.tiyi span {position: absolute;display:  block;top: 7%;left: 10%;font-size: 13px;}
.sec3 {z-index: 3;}
.face2 {width: 70%;position: relative;margin: 4% auto;/* margin-top: 12%; */}
.face2 .left, .face2 .right, .face2 .mid{display: inline-block;box-sizing: border-box;position: absolute;top: 0;}
.face2 .left, .face2 .right{width: 40%;}
.face2 .left{left:0;}
.face2 .right{right:0;padding: 16px;background: url(images/c3.png) no-repeat;background-size: 100% auto;}
.face2 .mid{width: 16px;left:50%;margin-left:-8px;height: 130%;top: -15%;}
.face2 .mid img{width:auto;height:100%;}
.face2 .list{
    /* padding: 10px; */
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    margin: 5% auto;
    width: 90%;
}
.face2 .list .wp{
    position: absolute;
    top: 0;
    transition: 0.3s;
    -webkit-transition: 0.3s;
}
.face2 .list .wp>div{width:100%;box-sizing: border-box;padding: 10px;background: url(images/c2.png) no-repeat;background-size: 100% auto;}
.face2 .top, .face2 .down{position: absolute;/* display: none; */}
.face2 .top{
    top: -10px;
} .face2 .down{
    bottom: -10px;
}
.screen{position: relative;width: 100%;height: 100%;background: #100f1e;margin: 0 auto;max-width: 600px;display: none; }
.screen .tip{position: absolute;z-index: 1;pointer-events: none;top: 20%;font-size: 13px;text-align: center;display: block;width: 100%;color: #fff;}
.face2 .w{width: 100%;height: 100%;border-radius: 200px;overflow: hidden;}
.back{color: #fff;position: fixed;z-index: 9;top: 0;display: none;}
.qrcode{width: 96px;margin: 0px auto;}
.copyright{text-align: center;color:#fff;font-size: 12px;line-height: 1.2;margin-top: 3px;}
.btns {width: 57%;margin: 0 auto;margin-top: 1%;}
.btns>div{width: 40%;display: inline-block;}
.trymore{}
.catchscreen{margin-left: 10%;}
.slideUp{ animation: slideUp 1s infinite; }
.slideDown{animation: slideDown 1s infinite;}
.mbtn{z-index:10;position: absolute;top: 5px;right: 5px; width: 40px; height: 40px; background:url(images/muteOn.png) no-repeat; background-size: 100% auto;display: none;}
.mbtn.off{background-image: url(images/muteOff.png);}
@keyframes slideUp {
  0%{
  
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
  }

  50% {
    transform: translateY(-0px);
    -webkit-transform: translateY(-0px);
  }
  100% {
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
  }
}

@keyframes slideDown {
  0%{
  
    transform: translateY(5px);
    -webkit-transform: translateY(5px);
  }

  50% {
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
  }
  100% {
    transform: translateY(5px);
    -webkit-transform: translateY(5px);
  }
}

@media only screen and (device-width: 375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {
    .tl2{margin-top: 13%;}
   .face2{margin-top: 16%;}
   .btns{    margin-top: 13%;}
   .qrcode{    margin-top: 7%;}
   .copyright{}
}