body,
html {
  font-family: 'SimHei', '黑体', 'Microsoft YaHei', 'PingFang SC', arial, ans-serif;
  height: 100%;
  background:#6b140f;
  position: relative;
  height: 100%;
  width: 100%;
  -webkit-overflow-scrolling:touch;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body.an{background:#000;}
.hide {
  display: none;
}
* {
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  tap-highlight-color: rgba(0, 0, 0, 0);
}

body, canvas, div {

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.overlay{display:none;position: absolute;left:0;top: 0;}
/*-----------------comment-----------------*/
.page {
  position: relative;
  overflow: hidden;
  opacity: 0;
  display: none;
  z-index: 89;
}
.page.in{
  opacity: 1;
  display: block;
}

.page-item {
  opacity: 0;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 89;
  overflow: hidden;
}
.page-item.active {
  display: block;
  animation: fadeIn 0.3s linear 1;
  -webkit-animation: fadeIn 0.3s linear 1;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

.p2_caishen,.p2_che{
  -webkit-animation: pulse 1s linear infinite;
  animation: pulse 1s linear infinite;
}


/*p1*/
.p1{background:url(../images/bg.jpg) no-repeat 0 center;}
.mask2{background:url(../images/mask2.jpg) no-repeat 0 center;position: absolute;left:0;top:0; width:100%; height:100%;}

.p1_mask_box{position: absolute;left:0;top:0;width:100%; height:100%; overflow: hidden;}


.mask1{background:url(../images/mask1.png) no-repeat center; width:910px;height:1710px;position: absolute; left:calc(50% - 455px);top:calc(50% - 855px);pointer-events: none;}
.mask3{background:url(../images/mask3.png) no-repeat center; width:910px;height:1710px;position: absolute; left:calc(50% - 455px);top:calc(50% - 855px);pointer-events: none;}

.p1_mask_box.active{ pointer-events: none;}
.mask1.active,
.mask3.active{
  animation: maskAnimation 5s linear infinite;
  -webkit-animation: maskAnimation 5s linear infinite;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}
.mask3.active2{opacity: 0;}

.rec{background:url(../images/rec.png) no-repeat 0 0; width:102px;height:90%; position: absolute; left:80px;top:50%; transform: translateY(-50%); pointer-events: none;}
.p1_border{background:url(../images/p1_border.png) no-repeat center center; background-size:100% 100%; position: absolute;left:50%;top:50%; transform: translate(-50%,-50%); width:640px; height:94%;pointer-events: none;}

.p1_btn{position: absolute;left:120px;top:65%;background:url(../images/p1_btn.png) no-repeat 0 0;  width:510px;height:200px; }

.p1_btn.active,
.mask2.active
{
  animation: fadeOut .3s linear 1;
  -webkit-animation: fadeOut .3s linear 1;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  pointer-events: none;
}

.p1_border.active,
.rec.active{
  animation: fadeOut .5s linear 1s;
  -webkit-animation: fadeOut .5s linear 1s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  pointer-events: none;
}

@keyframes maskAnimation {
  0% {
    transform: translate3d(-30px,20px, 0);
  }
  25% {
    transform: translate3d(20px,-30px, 0);
  }
  50% {
    transform: translate3d(20px, 20px, 0);
  }
  75% {
    transform: translate3d(-30px, -30px, 0);
  }
  100% {
    transform: translate3d(-30px,20px, 0);
  }
}
@keyframes scale3 {
  0%{
    transform:translate3d(0%,0%,0) scale(1);
    opacity:1;
    left:calc(50% - 455px);top:calc(50% - 855px);
  }
  50% {
    opacity:1;
    transform:translate3d(0%,0%,0) scale(1.5);
    left:calc(50% - 455px);top:calc(60% - 855px);
  }
  100% {
    opacity:0;
    transform:translate3d(0%,0%,0) scale(2);
    left:calc(50% - 455px);top:calc(70% - 855px);
  }
}
.mask1.active2{
  animation: scale3 1s linear 1;
  -webkit-animation: scale3 1s linear 1;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  pointer-events: none;
}

.p2_logo{background:url(../images/p2_logo.png) no-repeat 0 center; position: absolute;width:334px;height:80px; left:50%;transform: translateX(-50%); top:10%;opacity: 0;}
.p2_logo.active{
  animation: fadeIn .5s linear .5s;
  -webkit-animation: fadeIn .5s linear .5s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  pointer-events: none;
}


.p2{background:url(../images/p3_bg2.jpg) no-repeat 0 center;}


.p3_box_bg{position: absolute; width:636px;height:318px;  left:57px; bottom:5%; background:url(../images/p2_text_bg.png) no-repeat 0 0;}
.p3_play_btn{position: absolute; width:88px;height:88px; left:50%; bottom:20px; transform: translateX(-50%); background:url(../images/p2_play_btn.png) no-repeat 0 0;}
.p3_play_btn.pauseBtn{background:url(../images/p2_pause_btn.png) no-repeat 0 0;}
.p3_play_box{position: absolute;left:70px;top:50%; width:490px;height:80px;}
.p3_play_line{position: absolute;left:0;top:5px;width:490px;height:2px;background:rgba(255,255,255,0.6);}
.p3_play_index{position: absolute; left:0;top:2px;width:8px;height:8px;background:rgba(255,255,255,1); border-radius: 8px;overflow: hidden;-webkit-transition: all 1s;transition: all 1s;}
.p3_play_l_text{position: absolute;color:#fff; font-size:20px; left:0;top:26px;}
.p3_play_r_text{position: absolute;color:#fff; font-size:20px; right:0;top:26px;}

.p3_popup{position: absolute; left:0;top:0; width:100%;height:100%;
  /*background:rgba(0,0,0,.1);*/
}
.p3_popup_box{position: absolute; opacity: 0; -webkit-transition: all 1s;transition: all 1s;width:641px;height:726px; left:50%;top:50%;transform: translate(-50%,-50%);background: url(../images/p3_text_box.png) no-repeat 0 0;}
.p3_box_title{position: absolute; left:50%;transform: translateX(-50%);top:12%; width:370px;height:100px;background: url(../images/p2_text.png) no-repeat 0 0;}

.p3_pop_text1{ opacity: 0; visibility: hidden; position: absolute; left:0;top:0;width:641px;height:726px;background: url(../images/p3_text_1.png) no-repeat 0 0;-webkit-transition: all 1s;transition: all 1s;}
.p3_pop_text2{ opacity: 0; visibility: hidden; position: absolute; left:0;top:0;width:641px;height:726px;background: url(../images/p3_text_2.png) no-repeat 0 0;-webkit-transition: all 1s;transition: all 1s;}
.p3_popup_box.active{opacity: 1; visibility: visible;}
.p3_pop_text1.active{opacity: 1; visibility: visible;}
.p3_pop_text2.active{opacity: 1; visibility: visible;}

/**/
.p4{background:url(../images/p3_bg.jpg) no-repeat #6b140f 0 0; background-size:100% 100%;}
.p4_Text{position: absolute;left:141px; top:10%; width:496px;height:287px; background: url(../images/p3_text.png) no-repeat 0 0;}
.p4_redpack{position: absolute;left:100px; bottom:10%; width:558px;height:966px; background: url(../images/p3_redpack_bg.png) no-repeat 0 0;}

.page.h1200{}
.page.h1200 .p3_box_bg{height:260px; }
.page.h1200 .p3_box_title{top:8%;}
.page.h1200 .p4_Text{transform:scale(.8);}
.page.h1200 .p4_redpack{transform:scale(.85);}
.page.h1200 .p2_logo,
.page.h1200 .p4_Text{top:6%;}
.page.h1200 .p3_box_bg,
.page.h1200 .p4_redpack{bottom:6%;}

.page.h1470{}
.page.h1470 .p3_box_bg{height:260px; }
.page.h1470 .p3_box_title{top:8%;}
.page.h1470 .p4_Text{transform:scale(.9);}
.page.h1470 .p4_redpack{transform:scale(.9);}
.page.h1470 .p2_logo,
.page.h1470 .p4_Text{top:6%;}
.page.h1470 .p3_box_bg{bottom:6%;}
.page.h1470 .p4_redpack{bottom:10%;}


.page.h1550{}
.page.h1550 .p3_box_bg{height:260px; }
.page.h1550 .p3_box_title{top:8%;}
.page.h1550 .p4_Text{transform:scale(.9);}
.page.h1550 .p4_redpack{transform:scale(.9);}
.page.h1550 .p2_logo,
.page.h1550 .p4_Text{top:6%;}
.page.h1550 .p3_box_bg{bottom:6%;}
.page.h1550 .p4_redpack{bottom:10%;}

.virtuallyBox{ position: relative; margin: 0 auto;max-width: 750px; overflow: hidden; }