/*@font-face
{
font-family: lt;
src: url(lt.TTF);
}*/

@charset "utf-8";

/* CSS Document */

html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
sub,
sup,
var,
i,
dl,
dd,
dt,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  background: transparent;
}

article,
aside,
figure,
footer,
header,
hgroup,
nav,
menu,
section {
  display: block;
  -webkit-appearance: none;
}

ol,
ul,
li {
  list-style: none;
}

html {
  font-family: helvetica,Microsoft YaHei;
}

a {
  text-decoration: none;
  padding: 0;
  margin: 0;
  color: #202030;
}

body,
div,
a,
button,
input,
textarea {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

a:active,
a:visited {
  /*color: #0066ab;*/
}

input,
select {
  vertical-align: bottom;
}

input:focus,
select:focus {
  border: 0;
  outline-offset: 0;
  outline: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

body {
  line-height: 1.5em;
  font-size: 0.16rem;
  /*background: #5c5c5c;*/
  overflow: scroll;
}

a {
  outline: none;
  /* for Forefox */
  cursor: pointer;
}

a {
  star: expression(this.onFocus=this.blur());
  /* for Ie*/
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

input,
textarea {
  margin: 0;
  padding: 0;
  border: medium none;
}

input,
textarea {
  background: none;
  outline: none;
  border: 0;
}

.none {
  display: none;
}

.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.8;
  z-index: 99;
  left: 0;
  top: 0;
}

.clear {
  clear: both;
}

.cr1 {
  color: #c8c3c1;
}

.col2 {
  color: #506591;
}

.col3 {
  color: #087dfd;
}

.ba1 {
  background: #fff;
}

.ba2 {
  background: #a0e75a;
}

.ba3 {
  background: url(../images/pape6/bk-bj.png);
}

.wid1 {
  width: 2.866667rem;
  height: 0.933333rem;
}

.c_fe {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #18000d;
  z-index: 1;
}

.c_fe .c_bg {
  width: 100%;
  height: 10.8rem;
  background: url(../images/zt/bg.png) no-repeat;
  background-size: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}

.c_fe .stage img {
  width: 100%;
}

.c_fe .click-bt {
  width: 2.24rem;
  height: 1.226667rem;
  position: absolute;
  left: 1.4rem;
  bottom: 4.4rem;
  z-index: 99;
}

.c_fe .bt-gz {
  left: 3.733333rem;
  bottom: 2.666667rem;
}

.c_fe .bt-bj {
  left: 7.133333rem;
  bottom: 3.973333rem;
}

.c_s .lg {
  width: 100%;
  position: absolute;
  z-index: 3;
  position: absolute;
  left: 0;
  top: 0;
}

.c_s .pe {
  width: 100%;
  position: absolute;
  z-index: 2;
  position: absolute;
  left: 0;
  bottom: 0;
}

.page1 {
  width: 100%;
  height: 100%;
  position: absolute;
}

.page1 .bg-img {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}

.page1 .time-box {
  position: absolute;
  top: 1.533333rem;
  -webkit-transform: translate(-50%,0);
  transform: translate(-50%,0);
  left: 50%;
  z-index: 2;
  color: #fff;
  text-align: center;
  font-family: Heiti SC;
}

.page1 .time-box .time-s {
  font-size: 2.133333rem;
  line-height: 2rem;
  width: 6.666667rem;
  padding-left: 0.266667rem;
  font-weight: inherit;
}

.page1 .time-box .time-text {
  font-size: 0.44rem;
  line-height: 0.44rem;
  margin-top: 0.4rem;
  width: 6.666667rem;
  letter-spacing: 0.053333rem;
}

.page1 .font-box {
  width: 95%;
  position: absolute;
  top: 5.36rem;
  left: 5%;
  z-index: 2;
  height: 2.226667rem;
  padding-left: 0.88rem;
}

.page1 .wx-right {
  width: 100%;
  padding: 0.4rem 0;
  height: 2.226667rem;
}

.page1 .wx-img {
  width: 0.546667rem;
  height: 0.546667rem;
  position: absolute;
  top: 0.306667rem;
  left: 0;
}

.wx-right p {
  color: #fff;
  font-size: 0.32rem;
  line-height: 0.32rem;
}

.wx-right p .wx-big {
  font-size: 0.426667rem;
  line-height: 0.426667rem;
}

.wx-right  .jmh {
  font-size: 0.453333rem;
  line-height: 0.453333rem;
  margin-top: 0.12rem;
}

.wx-right .hd {
  color: #c8c3c1;
  margin-top: 0.213333rem;
}

.page2 {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #EBEBEB;
}

/*.page2 .time{position: absolute;width: 3%;top: 55%;left: 49%;color: #909090;font-size: 26px;}*/

.left1 {
  position: relative;
  margin-top: 3%;
}

.left1 img {
  width: 100%;
  display: block;
}

.right,
.right1,
.right2 {
  position: relative;
}

.right,
.right1 .r1 {
  position: absolute;
  right: 0;
  width: 100%;
}

.page2 img {
  vertical-align: bottom;
  position: relative;
  width: 100%;
  margin-top: 4%;
}

.page2 .right2 .user-img {
  margin-top: 5%;
}

.right .user-img,
.right .user-img,
.right1 .user-img,
.page4 .right1 .user-img,
.page4 .right2 .user-img {
  position: absolute;
  right: 1%;
  width: 1rem;
  height: 1rem;
  background: #fff;
  top: 0;
}

.page4 .right,
.page4 .right1 .user-img,
.page4 .right2 .user-img {
  right: 1%;
}

.page2 .right .user-img {
  right: 2%;
  top: -0.013333rem;
}

.page2 .img-gif {
  width: 3.733333rem;
  bottom: 0;
  right: 16%;
  margin-top: 5%;
}

.page4 .left2 .img-gif,
.page4 .left12 .img-gif,
.page4 .left10 .img-gif {
  left: 14%;
  bottom: 0;
  top: auto;
}

.page4 .left2 .img-gif,
.page4 .left4 .img-gif {
  left: 14%;
  bottom: 0;
  top: auto;
}

.pyq {
  position: relative;
  color: #f43530;
}

.lr {
  position: relative;
}

.voice {
  width: 0.4rem;
  height: 0.4rem;
  background: #fff;
  position: absolute;
  left: 16%;
  top: 29%;
}

.vo-so {
  width: 0.266667rem;
  height: 0.4rem;
  background: #fff url(../images/page2/voice1.png) no-repeat;
  background-size: auto 100%;
  background-position: -1.12rem;
}

.white {
  width: 0.32rem;
  height: 0.32rem;
  background: #EBEBEB;
  position: absolute;
  left: 48%;
  top: -3%;
}

.uesr-boxr {
  width: 100%;
  min-height: 0.973333rem;
  position: relative;
  margin-top: 0.56rem;
  text-align: right;
}

.uesr-boxr img {
  margin-top: 0;
}

.uesr-boxr .text {
  padding: 0.28rem;
  border-radius: 0.08rem;
  font-size: 0.373333rem;
  max-width: 6.52rem;
  line-height: 0.4rem;
  float: right;
  position: relative;
}

.uesr-boxr .font-box {
  padding-right: 1.426667rem;
}

.page3 {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
  padding-bottom: 1.2rem;
}

.page3 img {
  width: 100%;
}

.page3 .p3-list {
  width: 100%;
  min-height: 1.68rem;
  position: relative;
  padding-left: 1.72rem;
}

.page3 .p3-img1 {
  width: 1.666667rem;
  height: 1.613333rem;
  position: absolute;
  left: 0;
  top: 0;
}

.p3-nrtitle {
  padding-top: 0.333333rem;
  font-size: 0.4rem;
  line-height: 0.4rem;
  position: relative;
}

.p3-nrtitle .img1 {
  left: 1.333333rem;
  width: 3.333333rem;
  height: 0.533333rem;
  top: -0.066667rem;
}

.p3-nrtext {
  font-size: 0.346667rem;
  line-height: 0.346667rem;
  margin-top: 0.226667rem;
  position: relative;
  color: #9a9a9a;
  line-height: 0.466667rem;
  padding-bottom: 0.266667rem;
  overflow: hidden;
  height: 0.373333rem;
}

.p3-nrtitle .tx {
  display: inline-block;
}

.p3-nrtitle .img1 {
  display: inline-block;
  vertical-align: middle;
}

.p3-nrtext .okk {
  width: 0.413333rem;
  height: 0.52rem;
  display: inline-block;
  vertical-align: middle;
}

.page3 .p3-uimg {
  width: 0.346667rem;
  height: 0.346667rem;
  position: absolute;
  top: 0.24rem;
  left: 1.066667rem;
}

.p3-num {
  position: absolute;
  width: 0.453333rem;
  height: 0.453333rem;
  background: #f43530;
  left: 1.093333rem;
  top: 0;
  border-radius: 1333.32rem;
  text-align: center;
  line-height: 0.453333rem;
  color: #fff;
  font-size: 0.266667rem;
}

.page3 .p3-footer img {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99;
}

.page3 .p3-tips {
  width: 3%;
  position: absolute;
  top: 10%;
  left: 63%;
}

.page3 .p3-cconet {
  width: 100%;
  height: 1.653333rem;
  opacity: 0.5;
  position: absolute;
  top: 6%;
  left: 0;
}

.page3 .t1 {
  position: absolute;
  right: 2%;
  top: 1.533333rem;
  font-size: 0.293333rem;
  color: #a9a9a9;
}

.page3 .t2 {
  position: absolute;
  right: 2%;
  top: 3.226667rem;
  font-size: 0.293333rem;
  color: #a9a9a9;
}

.page3 .t3 {
  position: absolute;
  right: 2%;
  top: 4.866667rem;
  font-size: 0.293333rem;
  color: #a9a9a9;
}

.page3 .t4 {
  position: absolute;
  right: 2%;
  top: 6.466667rem;
  font-size: 0.293333rem;
  color: #a9a9a9;
}

.page3 .t5 {
  position: absolute;
  right: 2%;
  top: 8.133333rem;
  font-size: 0.293333rem;
  color: #a9a9a9;
}

.page3 .t6 {
  position: absolute;
  right: 2%;
  top: 9.813333rem;
  font-size: 0.293333rem;
  color: #a9a9a9;
}

.page3 .t7 {
  position: absolute;
  right: 2%;
  top: 11.426667rem;
  font-size: 0.293333rem;
  color: #a9a9a9;
}

.page3 .t8 {
  position: absolute;
  right: 2%;
  top: 13.08rem;
  font-size: 0.293333rem;
  color: #a9a9a9;
}

.page3 .t9 {
  position: absolute;
  right: 2%;
  top: 14.76rem;
  font-size: 0.293333rem;
  color: #a9a9a9;
}

.page4 {
  background: #ebebeb;
  position: absolute;
  min-height: 100%;
  width: 100%;
  overflow: auto;
  color: #272727;
  padding-bottom: 2rem;
}

.conter1 {
  width: 8.4rem;
  background: #c7c7c7;
  border-radius: 0.08rem;
  padding: 0.2rem;
  margin: 0.266667rem auto 0 auto;
  font-size: 0.346667rem;
  color: #fff;
  line-height: 0.466667rem;
}

/*聊天室左边*/

.uesr-boxl {
  padding-left: 14.5%;
  margin-top: 0.56rem;
  padding-top: 0.4rem;
}

.page2 .user-imgl,
.page4 .user-imgl {
  width: 0.986667rem;
  height: 1rem;
  position: absolute;
  left: 2%;
  top: 0;
}

.uesr-boxl .title {
  position: absolute;
  top: 0;
  left: 14.5%;
  font-size: 0.306667rem;
  line-height: 0.306667rem;
  color: #6f6f6f;
}

.page2 .uesr-boxl .text,
.page4 .uesr-boxl .text {
  max-width: 6.52rem;
  padding: 0.293333rem 0.24rem;
  border: 0.013333rem solid #e6e6e6;
  border-radius: 0.08rem;
  position: relative;
  font-size: 0.373333rem;
  line-height: 0.466667rem;
  display: inline-block;
  position: relative;
}

.page4 .uesr-boxl .pnone,
.page4 .uesr-boxr .pnone {
  padding: 0.4rem 0 0 0;
}

.page4 .uesr-boxl .img-tips {
  width: 0.266667rem;
  position: absolute;
  left: 0.426667rem;
  top: 0.053333rem;
}

.uesr-boxl .time {
  position: absolute;
  top: 0.4rem;
  left: 3.013333rem;
  color: #909090;
  font-size: 0.346667rem;
}

.page4 .center1 {
  text-align: center;
}

.page4 .center1 img {
  width: 84%;
  margin: 5% auto 0 auto;
}

.page4 img {
  width: 100%;
  vertical-align: bottom;
}

.page4 .right1 img {
  position: relative;
}

.page4 .img-gif {
  width: 3.733333rem;
  left: 0;
  top: 0;
}

.page4 .uesr-boxl .tra {
  background: transparent;
}

.sjx2 {
  width: 0.133333rem !important;
  height: 0.266667rem;
  position: absolute !important;
  top: 0.693333rem;
  right: 1.32rem;
}

.hand {
  width: 0.866667rem;
  height: 0.92rem;
  position: absolute;
  z-index: 4;
  bottom: 4.16rem;
  left: 2rem;
}

.page5 {
  background: #fff;
  position: absolute;
  width: 100%;
  min-height: 100%;
  padding-bottom: 1.2rem;
}

.page5 .ff {
  position: relative;
}

.page5 .f5-img {
  position: absolute;
  top: 28.5%;
  left: 17%;
  width: 27.4%;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.page5 .f-img {
  width: 100%;
  margin-top: 1.066667rem;
}

.page5 .f1 img {
  margin-top: 0;
}

.page5 .f1 .user-img {
  width: 1.706667rem;
  height: 1.706667rem;
  background: #fff;
  position: absolute;
  right: 2.6%;
  top: 5.04rem;
}

.page5 .f1 .user-name {
  font-size: 0.506667rem;
  color: #fff;
  position: absolute;
  top: 5.626667rem;
  left: 41%;
  width: 3.333333rem;
  text-align: right;
  text-shadow: 0 0.026667rem 0.053333rem #000;
}

.page5 .vd-listbox {
  width: 100%;
  min-height: 5.32rem;
  padding: 1.013333rem 0.4rem 0.4rem 0.4rem;
  position: relative;
}

.page5 .vd-listbox .vd-nr {
  padding-left: 1.466667rem;
  width: 100%;
}

.page5 .vd-listbox .vd-uesrimg {
  width: 1.04rem;
  height: 1.04rem;
  position: absolute;
  left: 0.573333rem;
  top: 1.013333rem;
}

.page5 .vd-listbox .vd-name {
  font-size: 0.373333rem;
  color: #4c618e;
  line-height: 0.373333rem;
}

.page5 .vd-listbox .vd-title {
  padding: 0.266667rem 0;
  font-size: 0.373333rem;
  line-height: 0.533333rem;
  max-width: 7.333333rem;
  position: relative;
}

.vd-title img {
  width: 1.2rem;
  height: 0.44rem;
  vertical-align: middle;
}

.vd-img {
  position: relative;
  width: 100%;
  height: 2.773333rem;
  margin-bottom: 0.293333rem;
}

.vd-img img {
  width: 4.946667rem;
  height: 2.773333rem;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}

.vd-img .rs {
  width: 7.333333rem;
  height: 4.253333rem;
}

.vd-img .vd-tips {
  position: absolute;
  left: 30%;
  top: 46%;
  width: 0.24rem;
  height: 0.24rem;
  z-index: 3;
  pointer-events: none;
}

.vd-imgrs .vd-tips {
  left: 40%;
}

.page-video {
  width: 4.946667rem;
  height: 2.773333rem;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

.vd-time {
  font-size: 0.266667rem;
  color: #626262;
  position: relative;
  line-height: 0.266667rem;
  margin-bottom: 0.346667rem;
  max-width: 7.2rem;
}

.vd-imgpl {
  position: absolute;
  right: 0;
  top: 0;
  width: 0.493333rem;
  height: 0.373333rem;
}

.vd-text {
  background: #f3f3f5;
  min-height: 0.4rem;
  width: 100%;
  max-width: 7.2rem;
  position: relative;
}

.vd-tt {
  font-size: 0.333333rem;
  line-height: 0.466667rem;
  color: #506591;
  position: relative;
  padding: 0.146667rem 0 0.146667rem 0.773333rem;
  line-height: 0.466667rem;
  max-width: 6.933333rem;
}

.xx {
  width: 0.28rem;
  height: 0.253333rem;
  position: absolute;
  left: 0.32rem;
  top: 0.253333rem;
}

.vd-ttlbox {
  padding: 0.266667rem 0 0.133333rem 0.32rem;
  position: relative;
}

.vd-ttlbox p {
  font-size: 0.333333rem;
  line-height: 0.333333rem;
  padding-bottom: 0.213333rem;
  position: relative;
}

.zan {
  width: 1.346667rem;
  height: 0.453333rem;
  display: inline-block;
  vertical-align: middle;
}

.hx {
  width: 0.52rem;
  height: 0.493333rem;
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.133333rem;
}

.tu-img {
  height: 5.333333rem;
}

.vd-img .b-img {
  width: 6rem;
  height: auto;
  position: absolute;
  left: 0%;
  top: 0%;
}

.vd-title .x2 {
  width: 0.453333rem;
  height: 0.44rem;
  display: inline-block;
  vertical-align: middle;
}

.x3 {
  width: 1.213333rem;
  height: 0.44rem;
  display: inline-block;
  vertical-align: middle;
}

.vd-imgrs {
  height: 4.546667rem;
}

.vd-imgrs .vd-tips {
  top: 40%;
}

.dis {
  display: inline-block;
  vertical-align: middle;
}

.page6 {
  background: #000;
  position: relative;
}

.page6 .poster {
  width: 100%;
}

.error {
  width: 1.066667rem;
  height: 1.066667rem;
  background: url(../images/pape6/error.png) no-repeat;
  background-size: 100%;
  position: fixed;
  right: 5%;
  top: 3%;
}

.winningbox {
  padding: 0.533333rem 0;
  position: absolute;
  left: 50%;
  top: 35%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 7.013333rem;
  height: 4.24rem;
  border-radius: 0.266667rem;
  z-index: 100;
}

.winningbox .st-title {
  font-size: 0.48rem;
  color: #ca5852;
  width: 100%;
  margin: 0 auto;
  line-height: 0.8rem;
  text-align: center;
  letter-spacing: 0.013333rem;
  padding-bottom: 0.533333rem;
  border-bottom: 0.013333rem solid #ece6e3;
  padding: 0 1.613333rem 0.266667rem 1.613333rem;
}

.st-bt {
  margin: 0.48rem auto 0 auto;
  width: 3.92rem;
  height: 0.92rem;
  background: url(../images/pape6/bt-bj.png);
  background-size: 100% 100%;
  color: #78120b;
  font-size: 0.32rem;
  text-align: center;
  line-height: 0.92rem;
  letter-spacing: 0.013333rem;
  font-weight: bold;
}

.luck-draw {
  margin: 0.48rem auto 0 auto;
  width: 3.92rem;
  height: 0.92rem;
  background: url(../images/pape6/bt-bj.png);
  background-size: 100% 100%;
  color: #78120b;
  font-size: 0.32rem;
  text-align: center;
  line-height: 0.92rem;
  letter-spacing: 0.013333rem;
  font-weight: bold;
}

.st-back {
  margin: 0.48rem auto 0 auto;
  width: 3.92rem;
  height: 0.92rem;
  background: url(../images/pape6/bt-bj.png);
  background-size: 100% 100%;
  color: #78120b;
  font-size: 0.32rem;
  text-align: center;
  line-height: 0.92rem;
  letter-spacing: 0.013333rem;
  font-weight: bold;
}

.st-winning .close {
  position: absolute;
  width: 0.613333rem;
  height: 0.613333rem;
  right: 2%;
  top: 2%;
  z-index: 3;
}

.fire {
  position: absolute;
  pointer-events: none;
  width: 9.146667rem;
  height: 5.106667rem;
  left: -1.146667rem;
  top: -0.666667rem;
}

.fire img {
  width: 100%;
}

.city {
  font-weight: bold;
}

.prize {
  padding-bottom: 0.8rem;
  min-height: 6.666667rem;
  width: 7.053333rem;
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  top: 50%;
  border-radius: 0.266667rem;
  z-index: 100;
}

.prize-bj {
  width: 100%;
  min-height: 2.666667rem;
}

.prize-bj img {
  width: 100%;
  vertical-align: top;
}

.pr-title {
  padding-top: 0.6rem;
  text-align: center;
  font-size: 0.346667rem;
  color: #fff;
  letter-spacing: 0.026667rem;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 0;
  width: 100%;
  line-height: 0.533333rem;
}

.prize-ts {
  padding-top: 0.6rem;
  text-align: center;
  color: #ca5852;
  font-size: 0.266667rem;
  letter-spacing: 1px;
  padding-bottom: 0.586667rem;
}

.pr-inplsit {
  position: relative;
  width: 5.773333rem;
  height: 0.853333rem;
  border: 1px solid #b1b0ad;
  margin: 0 auto;
  border-radius: 0.106667rem;
  background: #fff;
}

.pr-inplsitb textarea,
.pr-inplsit input {
  width: 100%;
  height: 0.853333rem;
  padding-left: 0.8rem;
}

.pr-inplsit input::-webkit-input-placeholder {
  color: #b1b0ad;
}

.pr-inplsitb {
  height: 1.666667rem;
}

.pr-inplsitb textarea {
  height: 1.466667rem;
  padding: 0.2rem 0 0.2rem 0.8rem;
}

.prompt {
  font-size: 0.213333rem;
  width: 5.773333rem;
  left: 50%;
  margin: 0.24rem auto 0 auto;
  color: #676766;
  line-height: 0.333333rem;
}

.at .pr-title {
  padding-top: 0.333333rem;
}

.icon-ipone {
  background: url(../images/pape6/ip.png) no-repeat;
  background-size: 0.266667rem 0.413333rem;
  width: 0.8rem;
  height: 0.853333rem;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  background-position: center;
}

.icon-user {
  background: url(../images/pape6/us.png) no-repeat;
  background-size: 0.346667rem 0.4rem;
  width: 0.8rem;
  height: 0.853333rem;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  background-position: center;
}

.icon-ip {
  background: url(../images/pape6/lc.png) no-repeat;
  background-size: 0.306667rem 0.373333rem;
  width: 0.8rem;
  height: 0.853333rem;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  background-position: center;
}

.prize .st-bt {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: -1.333333rem;
}

.img-box {
  width: 6rem;
  height: 5.333333rem;
  position: absolute;
  left: 0%;
  top: 0%;
  background: #fff;
}

.img-box .img-list {
  width: 2rem;
  height: 1.773333rem;
}

.img-list {
  text-align: center;
  line-height: 1.36rem;
  width: 1.533333rem;
  height: 1.36rem;
  position: absolute;
  z-index: 1;
}

.img-list:nth-child(5) img {
  width: 100%;
  height: 100%;
}

.img-list img {
  height: 90%;
  vertical-align: middle;
  width: auto;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  top: 50%;
}

.page5 .line {
  width: 100%;
  height: 100%;
  background: url(../images/page5/line.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 2;
}

#img1 {
  left: 0;
  top: 0;
}

#img2 {
  left: 2rem;
  top: 0;
}

#img3 {
  left: 4rem;
  top: 0;
}

#img4 {
  left: 0;
  top: 1.773333rem;
}

#img5 {
  left: 2.013333rem;
  top: 1.773333rem;
}

#img6 {
  left: 4rem;
  top: 1.773333rem;
}

#img7 {
  left: 0;
  top: 3.546667rem;
}

#img8 {
  left: 2rem;
  top: 3.546667rem;
}

#img9 {
  left: 4rem;
  top: 3.546667rem;
}

.voice {
  top: 50%;
  margin-top: -0.24rem;
  width: 0.493333rem;
  height: 0.493333rem;
}

.vo-so {
  width: 0.493333rem;
  height: 0.493333rem;
  background: url('../images/voice_play.png') no-repeat;
  background-size: 1.973333rem 0.493333rem;
  background-position: 0 0;
}

.vo-so.playing {
  background-position: -0.493333rem 0;
  -webkit-animation: voiceplay 1.5s infinite step-start;
  animation: voiceplay 1.5s infinite step-start;
}

.footer img {
  width: 100%;
  height: 1.2rem;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99;
}

.animation1 {
  -webkit-animation: fadeout 2s linear infinite;
  animation: fadeout 2s linear infinite;
}

.animation2 {
  -webkit-animation: fadeout 1s linear infinite;
  animation: fadeout 1s linear infinite;
}

.animation3 {
  -webkit-animation: hands .5s linear infinite;
  animation: hands .5s linear infinite;
}

.animation4 {
  -webkit-animation: hands .5s linear infinite;
  animation: hands .5s linear infinite;
}

.animation5 {
  -webkit-animation: hands .5s linear 1s infinite;
  animation: hands .5s linear 1s infinite;
}

.animation6 {
  -webkit-animation: hands .5s linear 2s infinite;
  animation: hands .5s linear 2s infinite;
}

@-webkit-keyframes leftam {
  0% {
    -webkit-transform: translateX(-0.4rem);
    transform: translateX(-0.4rem);
  }

  100% {
    -webkit-transform: translateX(0.666667rem);
    transform: translateX(0.666667rem);
  }
}

@keyframes leftam {
  0% {
    -webkit-transform: translateX(-0.4rem);
    transform: translateX(-0.4rem);
  }

  100% {
    -webkit-transform: translateX(0.666667rem);
    transform: translateX(0.666667rem);
  }
}

#container {
  overflow: hidden;
}

#aniCanvas {
  position: absolute;
  left: 0;
  bottom: 0;
}

@-webkit-keyframes fadeout {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeout {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes hands {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  50% {
    -webkit-transform: scale(0.87);
    transform: scale(0.87);
    opacity: 1;
  }
}

@keyframes hands {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  50% {
    -webkit-transform: scale(0.87);
    transform: scale(0.87);
    opacity: 1;
  }
}

.video-hide video {
  display: none;
}

canvas {
  position: absolute;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
}

#container {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 2;
}

.hidden {
  position: absolute;
  visibility: hidden;
}

.voice {
  left: 0.186667rem;
}

/*page1*/

.page1 {
  font-family: 'Heiti SC';
}

.page1 .time-box .time-s {
  font-size: 1.866667rem;
  line-height: 1;
  font-weight: 200;
}

.page1 .time-box .time-text {
  margin-top: 0.266667rem;
}

.page1 .font-box {
  top: 5.333333rem;
}

.page1 .font-box:after {
  border-color: rgba(255,255,255,.4) !important;
}

.wx-right  .jmh {
  font-size: 0.426667rem;
}

/*page2*/

.uesr-boxr .font-box {
  padding-top: 0;
}

/*page4*/

.page4 .left8 .voice {
  /*top:104px;*/
  top: 0.453333rem;
}

/*page6*/

.page6 {
  background: #fff;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.page6 #poster {
  position: absolute;
  z-index: 1;
  top: 0.133333rem;
  right: 0.133333rem;
  left: 0.133333rem;
  bottom: 0.133333rem;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

.page6 .error {
  position: absolute;
  z-index: 2;
  width: 0.72rem;
  height: 0.72rem;
  right: 0.666667rem;
  top: 0.666667rem;
  background: url('../images/close_poster.png') center center no-repeat;
  background-size: cover;
}

.c_fe   .music {
  position: absolute;
  z-index: 2;
  width: 0.72rem;
  height: 0.72rem;
  right: 0.533333rem;
  top: 0.533333rem;
  background: url('../images/pape6/music.png') center center no-repeat;
  background-size: cover;
  z-index: 9999;
}

.c_fe .hand1,
.c_fe .hand2,
.c_fe .hand3 {
  bottom: 0;
  left: 30%;
  pointer-events: none;
}

/*三角形*/

.arrow {
  position: relative;
  border-width: 1px;
}

.arrow:before,
.arrow:after {
  content: '';
  position: absolute;
  border: solid transparent;
  width: 0;
  height: 0;
  pointer-events: none;
}

.arrow-left:before,
.arrow-left:after {
  right: 100%;
  top: 0.466667rem;
}

.arrow-left:before {
  border-color: rgba(220, 220, 220, 0);
  border-right-color: #dcdcdc;
  border-width: 0.146667rem;
  margin-top: -0.146667rem;
}

.arrow-left:after {
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #fff;
  border-width: 0.133333rem;
  margin-top: -0.133333rem;
}

.arrow-right:before,
.arrow-right:after {
  left: 100%;
  top: 0.466667rem;
}

.arrow-right:before {
  border-color: rgba(118, 189, 76, 0);
  border-left-color: #76bd4c;
  border-width: 0.146667rem;
  margin-top: -0.146667rem;
}

.arrow-right:after {
  border-color: rgba(160, 231, 90, 0);
  border-left-color: #a0e75a;
  border-width: 0.133333rem;
  margin-top: -0.133333rem;
}

.arrow-top:before,
.arrow-top:after {
  bottom: 100%;
  left: 0.466667rem;
}

.arrow-top:before {
  border-color: rgba(243, 243, 245, 0);
  border-bottom-color: #f3f3f5;
  border-width: 0.146667rem;
  margin-left: -0.146667rem;
}

.arrow-top:after {
  border-color: rgba(243, 243, 245, 0);
  border-bottom-color: #f3f3f5;
  border-width: 0.133333rem;
  margin-left: -0.133333rem;
}

/*play voice*/

.voice {
  top: 50%;
  margin-top: -0.24rem;
  width: 0.493333rem;
  height: 0.493333rem;
}

.vo-so {
  width: 0.493333rem;
  height: 0.493333rem;
  background: url('../images/voice_play.png') no-repeat;
  background-size: 1.973333rem 0.493333rem;
  background-position: 0 0;
}

.vo-so.playing {
  background-position: -0.493333rem 0;
  -webkit-animation: voiceplay 1.5s infinite step-start;
  animation: voiceplay 1.5s infinite step-start;
}

@-webkit-keyframes voiceplay {
  0%, 100% {
    background-position: -0.493333rem 0;
  }

  33.333333% {
    background-position: -0.986667rem 0;
  }

  66.666666% {
    background-position: -1.48rem 0;
  }
}

@keyframes voiceplay {
  0%, 100% {
    background-position: -0.493333rem 0;
  }

  33.333333% {
    background-position: -0.986667rem 0;
  }

  66.666666% {
    background-position: -1.48rem 0;
  }
}

.mar1 {
  margin-top: 0.24rem;
}

.layui-m-layer-msg .layui-m-layercont {
  padding: 0.133333rem 0.266667rem !important;
  font-size: 0.32rem;
  font-family: "Microsoft YaHei", "Helvetica";
}

body .layui-m-layer .layui-m-layer-msg {
  top: 0 !important;
}

.vd-img .hand {
  width: 0.866667rem;
  height: 0.92rem;
  left: 29%;
  top: 43%;
  pointer-events: none;
}

.vd-img .tips-hands {
  left: 42%;
}

.page4 .hand {
  width: 0.866667rem;
  bottom: -35%;
  pointer-events: none;
}

.page4 .pyq .hand {
  bottom: -160%;
  left: 29%;
}