*{
  margin: 0;
  padding: 0;
  font-family: "微软雅黑"
}

li{
  list-style: none;
}

#raining{
  /* margin-top: 2%; */
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 9999;
  display: none;
}

#page_1{
  /* background: url(https://img.ingping.com/images/activity/template/342/page_03.png);
  background-size: 100% 100%;
  background-position: center center; */
  background: #fd156e;
  overflow: auto;
  width: 100%;
  height: 100%;
}

#page_1 .p1{
  font-size: 39px;
  color: #ffffff;
  padding-top: 73px;
}

#page_1 .p2{
  font-size: 31px;
  color: #ffff00;
  padding-top: 6px;
}

#page_1 .title{
  text-align: center;
}

#page_1,#page_2,#page_3{
  position: relative;
  z-index: 9999;
  width: 700px;
  height: 832px;
  margin: auto;
  overflow: hidden;
  margin-top: 2%;
  border-radius: 40px;
  background: url('../image/hby.png');
}

#page_1 h2{
  color: #fff;
  text-align: center;
  padding-top: 20%;
  font-size: 30px;
  margin-bottom: 8px;
}

#page_1 h3{
  color: #ffff00;
  font-weight: normal;
  text-align: center;
  font-size: 24px;
}

#page_1 .num{
  font-size: 95px;
  text-align: center;
  color: #fff;
  margin: 30px auto;
  width: 250px;
  height: 250px;
  line-height: 250px;
  background: url('../image/circle.png');

}

.page_foot{
  position: absolute;
  bottom: 0;
  border-bottom: 20px solid #d6003d;
  width: 100%;
}

#page_2{
  /* background: url(https://img.ingping.com/images/activity/template/342/page_01.png);
  background-size: 100% 100%;
  background-position: center center; */

  overflow: auto;
  overflow: hidden;
  display: none;
}

#page_2 .header{
  padding: 3.5% 5%;
  width: auto;
  background: none;
  min-width: auto;
}

#page_2 .header .gameTime{
  float: left;
  color: #fff;
  text-align: center;
}

#page_2 .header .gameTime h2{
  font-weight: normal;
  font-size: 24px;
}

#page_2 .header .gameTime h3{
  font-weight: normal;
  font-size: 28px;
  color: #ffff00;
  line-height: 40px;
}

#page_2 .header b{
  font-weight: normal;
  float: right;
  color: #fff;
  font-size: 32px;
  line-height: 78px;
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: 10000;
  -webkit-animation-delay: 0s;
  animation-name: fadeIn;
  animation-duration: 3s;
  animation-iteration-count: 10000;
  animation-delay: 0s;
}

#redEnvelopedRain{
  width: 750px;
  margin: auto;
  position: relative;
}

#redEnvelopedRain ul li{
  width: 130px;
  position: absolute;
  z-index: 100;
  top: -220px;
  cursor: pointer;
}

#redEnvelopedRain ul li img{
  width: 100%;
}


#redEnvelopedRain ul li:nth-child(1){
  left: 5%;
  animation: rain-1 3s infinite linear;
  -webkit-animation: rain-1 3s infinite linear;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
}

#redEnvelopedRain ul li:nth-child(2){
  left: 15%;
  animation: rain-2 4s infinite linear;
  -webkit-animation: rain-2 4s infinite linear;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
}

#redEnvelopedRain ul li:nth-child(3){
  left: 30%;
  animation: rain-3 3s infinite linear;
  -webkit-animation: rain-3 3s infinite linear;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
}

#redEnvelopedRain ul li:nth-child(4){
  left: 45%;
  animation: rain-4 4s infinite linear;
  -webkit-animation: rain-4 4s infinite linear;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
}

#redEnvelopedRain ul li:nth-child(5){
  left: 55%;
  animation: rain-5 3s infinite linear;
  -webkit-animation: rain-5 3s infinite linear;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
}

#redEnvelopedRain ul li:nth-child(6){
  right:5%;
  animation: rain-6 4s infinite linear;
  -webkit-animation: rain-6 4s infinite linear;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
}

#redEnvelopedRain ul li:nth-child(7){
  left: 72%;
  animation: rain-7 8s infinite linear;
  -webkit-animation: rain-7 8s infinite linear;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
}

#redEnvelopedRain ul li:nth-child(8){
  left: 65%;
  animation: rain-8 7s infinite linear;
  -webkit-animation: rain-8 7s infinite linear;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
}


#redEnvelopedRain ul li:nth-child(9){
  left: 7%;
  animation: rain-9 8s infinite linear;
  -webkit-animation: rain-9 8s infinite linear;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
}

#redEnvelopedRain ul li:nth-child(10){
  left: 15%;
  animation: rain-10 7s infinite linear;
  -webkit-animation: rain-10 7s infinite linear;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
}

#redEnvelopedRain ul li:nth-child(11){
  left: 30%;
  animation: rain-11 8s infinite linear;
  -webkit-animation: rain-11 8s infinite linear;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
}

#redEnvelopedRain ul li:nth-child(12){
  left: 45%;
  animation: rain-12 7s infinite linear;
  -webkit-animation: rain-12 7s infinite linear;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
}

#redEnvelopedRain ul li:nth-child(13){
  left: 5%;
  animation: rain-13 10s infinite linear;
  -webkit-animation: rain-13 10s infinite linear;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
}

#redEnvelopedRain ul li:nth-child(14){
  left: 15%;
  animation: rain-14 10s infinite linear;
  -webkit-animation: rain-14 10s infinite linear;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
}

#redEnvelopedRain ul li:nth-child(15){
  left: 30%;
  animation: rain-15 9s infinite linear;
  -webkit-animation: rain-15 9s infinite linear;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
}


#redEnvelopedRain ul li:nth-child(16){
  left: 45%;
  animation: rain-15 9s infinite linear;
  -webkit-animation: rain-15 9s infinite linear;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
}

#redEnvelopedRain ul li:nth-child(17){
  left: 60%;
  animation: rain-15 10s infinite linear;
  -webkit-animation: rain-15 10s infinite linear;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
}

#redEnvelopedRain ul li:nth-child(18){
  right:5%;
  animation: rain-15 12s infinite linear;
  -webkit-animation: rain-15 12s infinite linear;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
}



@keyframes rain-1
{
  from {top: -20px;}
  to {top:800px;}
}
@-webkit-keyframes rain-1
{
  from {top: -20px;}
  to {top:800px;}
}

@keyframes rain-2
{
  from {top: -150px;}
  to {top:800px;}
}
@-webkit-keyframes rain-2
{
  from {top: -150px;}
  to {top:800px;}
}

@keyframes rain-3
{
  from {top: 0px;}
  to {top:800px;}
}
@-webkit-keyframes rain-3
{
  from {top: 0px;}
  to {top:800px;}
}

@keyframes rain-4
{
  from {top: -30px;}
  to {top:800px;}
}
@-webkit-keyframes rain-4
{
  from {top: -30px;}
  to {top:800px;}
}

@keyframes rain-5
{
  from {top: 0;}
  to {top:800px;}
}
@-webkit-keyframes rain-5
{
  from {top: 0;}
  to {top:800px;}
}

@keyframes rain-6
{
  from {top: 0;}
  to {top:800px;}
}
@-webkit-keyframes rain-6
{
  from {top: 0;}
  to {top:800px;}
}

@keyframes rain-7
{
  from {top: -700px;}
  to {top:800px;}
}
@-webkit-keyframes rain-7
{
  from {top: -700px;}
  to {top:800px;}
}

@keyframes rain-8
{
  from {top: -700px;}
  to {top:800px;}
}
@-webkit-keyframes rain-8
{
  from {top: -700px;}
  to {top:800px;}
}


@keyframes rain-9
{
  from {top: -700px;}
  to {top:800px; }
}
@-webkit-keyframes rain-9
{
  from {top: -700px;}
  to {top:800px;}
}

@keyframes rain-10
{
  from {top: -700px;}
  to {top:800px;}
}
@-webkit-keyframes rain-10
{
  from {top: -700px;}
  to {top:800px;}
}

@keyframes rain-11
{
  from {top: -700px;}
  to {top:800px;}
}
@-webkit-keyframes rain-11
{
  from {top: -700px;}
  to {top:800px;}
}

@keyframes rain-12
{
  from {top: -700px;}
  to {top:800px;}
}
@-webkit-keyframes rain-12
{
  from {top: -700px;}
  to {top:800px;}
}

@keyframes rain-13
{
  from {top: -600px;}
  to {top:800px;}
}
@-webkit-keyframes rain-13
{
  from {top: -1200px;}
  to {top:800px;}
}

@keyframes rain-14
{
  from {top: -1200px;}
  to {top:800px;}
}
@-webkit-keyframes rain-14
{
  from {top: -1200px;}
  to {top:800px;}
}

@keyframes rain-15
{
  from {top: -1200px;}
  to {top:800px;}
}
@-webkit-keyframes rain-15
{
  from {top: -1200px;}
  to {top:800px;}
}




@-webkit-keyframes fadeIn {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


#page_3{
  /* background: url(https://img.ingping.com/images/activity/template/342/page_01.png);
  background-size: 100% 100%;
  background-position: center center; */
  overflow: auto;
  display: none;
}

#page_3 h2{
  font-size: 49px;
  text-align: center;
  color: #ff284c;
  font-weight: normal;
  padding-top: 35px;
  letter-spacing: 2px;
}

#page_3 h4{
  font-size: 36px;
  text-align: center;
  color: #fff;
  font-weight: normal;
  margin-top: 15%;
}

#raining .grayBg{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,.6);
}

#page_3 .redEnvelopes{
  width: 700px;
  height: 450px;
  margin: auto;
  position: relative;
  top: -100%;

}

#page_3 .redEnvelopes .bg{
  position: absolute;
}

#page_3 .redEnvelopes .bg img{
  width: 100%;
}

#page_3 .redEnvelopes .content{
  position: absolute;
  width: 100%;
}

#page_3 .redEnvelopes .content .price{
  color: #f63c44;
  text-align: center;
  font-size: 66px;
  margin-top: 180px;
}

#page_3 .redEnvelopes .content .price small{
  font-size: 17px;
  position: relative;
  top: -2px;
}

#page_3 .redEnvelopes .content p{
  text-align: center;
  font-size: 16px;
}

#page_3 .redEnvelopes .content p.p1{
  color: #fff;
  margin-top: 55px;
  font-size: 22px;
}

#page_3 .redEnvelopes .content p.p1 b{
  font-weight: normal;
  font-size: 36px;
}

#page_3 .redEnvelopes .content p.p2{
  color: #f10021;
  font-size: 14px;
  margin-top: -7px;
  line-height: 22px;
}

.twoBtn{
  width: 380px;
  margin: 89px auto;
  position: relative;
  left: -7px;
}

.twoBtn a{
  float: left;
  display: block;
  /* width: 135px;
  color: #fdf4d4;
  font-size: 19px;
  text-align: center;
  line-height: 43px;
  text-decoration: none;
  border-radius: 35px;
  background: linear-gradient(to bottom,#ff94fc,#ff0099);
  letter-spacing: 1px; */
  width: 185px;

}

.twoBtn a img{
  width: 100%;
}

.twoBtn a:last-of-type{
  float: right;
  /* color: #802c07;
  background: linear-gradient(to bottom,#fffc01,#fcc80d); */
}


@media(max-width:350px){
  #page_1 h2{
    font-size: 26px;
  }
  #page_1 h3{
    font-size: 20px;
  }
}



#page_3 .close {
  width: 55px;
  height: 55px;
  position: absolute;
  left: 50%;
  margin-left: -30px;
  z-index: 9999;
  opacity: 1;
  bottom: 122px;
  cursor: pointer;
}

#page_3 .close img{
  width: 100%;
}


.redEnvelopesGif .grayBg{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,.6);
  z-index: 999;
}
.redEnvelopesGif .img{
  width: 600px;
  height: 780px;
  position: fixed;
  left: 50%;
  margin-left: -300px;
  top: 55%;
  margin-top: -445px;
  z-index: 999;
}
.redEnvelopesGif .img img{
  width: 600px;
}
.gifClose {
  cursor: pointer;
  position: absolute;
  right: 42px;
  top: 70px;
  z-index: 999;
}