html,body{background: #bb2320;height: 100%;}
.page-bg-box{font-size: 0;}
.page-bg-box img{width: 100%;}
.gPopupLayer{left:0;text-align: center;left: 0;z-index: -1000;}
.pop-pic{position: relative;}
.pop-pic img{width: 100%;}
.pop-pic .user-name{display: inline-block;}
.pop-pic .txt{opacity: .8;color: #fff;font-size: 12px;position: absolute;top:3rem;left:1.8rem;right:1.8rem;text-align: left;}
.pop-pic p{text-indent: 0.8rem;line-height: 1.6;text-align: justify;}
.pop-close {display: inline-block;position: absolute;top:.4rem;right: .4rem;}
.pop-close img{width: 1rem;}
.pop-btn img{width: 80%; margin-top: -.6rem;}



.blood-flash-box{position: absolute;top:11.2rem;left: 50%;margin-left: -2.34rem;}
.blood-btn1 {text-align: center;width: 100%;}
.blood-btn1 .btn1{width: 4.68rem;height:5.533333rem;}
.blood-btn1 .btn2{width: 2.386667rem;animation: sansuo .3s infinite ease;-o-animation: sansuo .3s infinite ease;-moz-animation: sansuo .3s infinite ease;-webkit-animation: sansuo .3s infinite ease;position: absolute;left:1.18rem;bottom: 2px}
#lottie{
    display: none;
    width:4.68rem;
    height:5.533333rem;
    overflow: hidden;
    transform: translate3d(0,0,0);
    text-align: center;
    opacity: 1;
    position: absolute;top:0;left: 0;
}

@media screen and (max-width: 320px) {
  .pop-pic p{line-height: normal;font-size: 11px;}
}
@media screen and (max-width: 414px) {
  .pop-btn{display: inline-block;margin-top: -1.4rem;position: relative;}
  .pop-btn img{width: 65%}
}
@media screen and (min-width: 414px) {
  .pop-pic p{line-height: 1.8;font-size: 13px;}
}
/*iphone 678p*/
@media only screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3){
   .pop-pic p{line-height: 1.6;font-size: 13px;}
}
/*iphone X*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){
   .pop-pic{margin-top: .8rem;}
   .blood-flash-box{top:11.8rem;}
   .pop-btn{display: inline-block;margin-top: 0;position: relative;}
   .pop-btn img{margin-top: -.3rem;width: 100%;}
}
@media screen and (min-width: 600px) {
  .blood-flash-box{top:14rem;}
  .pop-pic .user-name,.pop-pic p{line-height: 1.8;font-size: 24px;}
}

.notWeixin .pop-btn,.notWeixin .pop-btn img{margin-top: 0 !important;}

.show-index{
animation:show 0.36s ease 0s;-webkit-animation:show 0.36s ease 0s;-o-animation:show 0.36s ease 0s;-moz-animation:show 0.36s ease 0s;
animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;-o-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;
}

@keyframes show{
  from{
    opacity:0;
  }
  50%{
    opacity:0.3;
  }
  80%{
    opacity:0.7;
  }
  to{
    opacity:1;
    z-index:888;
  }
}
@-o-keyframes show{
  from{
    opacity:0;
  }
  50%{
    opacity:0.3;
  }
  80%{
    opacity:0.7;
  }
  to{
    opacity:1;
    z-index:888;
  }
}
@-webkit-keyframes show{
  from{
    opacity:0;
  }
  50%{
    opacity:0.3;
  }
  80%{
    opacity:0.7;
  }
  to{
    opacity:1;
    z-index:888;
  }
}
@-moz-keyframes show{
  from{
    opacity:0;
  }
  50%{
    opacity:0.3;
  }
  80%{
    opacity:0.7;
  }
  to{
    opacity:1;
    z-index:888;
  }
}

@keyframes sansuo{
  0{transform: scale(0.96);opacity: 1;}
  30%{transform: scale(1);opacity: 1;}
  70%{transform: scale(.96);opacity: 1;}
  100%{transform: scale(1);opacity: 1;}
}
@-moz-keyframes sansuo{
  0{transform: scale(0.96);opacity: 1;}
  30%{transform: scale(1);opacity: 1;}
  70%{transform: scale(.96);opacity: 1;}
  100%{transform: scale(1);opacity: 1;}
}
@-o-keyframes sansuo{
  0{transform: scale(0.96);opacity: 1;}
  30%{transform: scale(1);opacity: 1;}
  70%{transform: scale(.96);opacity: 1;}
  100%{transform: scale(1);opacity: 1;}
}
@-webkit-keyframes sansuo{
  0{transform: scale(0.96);opacity: 1;}
  30%{transform: scale(1);opacity: 1;}
  70%{transform: scale(.96);opacity: 1;}
  100%{transform: scale(1);opacity: 1;}
}