*{-webkit-box-sizing:border-box;box-sizing:border-box;}
html,body{width:100%;height:100%;}
html{font-size:40px;-webkit-text-size-adjust:100%;}
body{/* -webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none; */font-family:"PingFang SC","Apple LiGothic Medium","Droid Sans","Microsoft YaHei","Microsoft JhengHei","Helvetica Neue",Helvetica,sans-serif;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);}
a:link,a:visited,a:hover,a:active{color:#333;}
xmp{white-space:pre-wrap;word-break:break-all;word-wrap:break-word;font-size:.26rem;margin:0;padding:0;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;}
ol,ul,li,dl,dt,dd,article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary,video,audio,pre{margin:0;padding:0;}
ol,ul,li{list-style:none;}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:normal;}
h1,.bui-h1{font-size:.42rem;}
h2,.bui-h2{font-size:.38rem;}
h3,.bui-h3{font-size:.3rem;}
h4,.bui-h4{font-size:.26rem;}
h5,.bui-h5{font-size:.26rem;}
h6,.bui-h6{font-size:.26rem;}
p{margin:0;/* margin-bottom:.1rem; */}
article{padding:.1rem;}


.casebg{background-size: 100%;position: absolute;height:100%;}
/* .ca-content{width: 90%;margin:4rem 5% 0;height: 7rem;padding: .2rem .2rem;} */
.ca-content dl{float:left;width: 100%;margin:0.35rem 0rem;    display: flex;}
.ca-content dt{float: left;margin: 0;width: calc(100%/3);text-align: center;}
.ca-content dt img{width: 90%;}
.ca-msg{background: #FFF6C1;margin: 0 auto 0;border-radius: .2rem;border: #EECA38 solid 4px;width: 7rem;}
.ca-msg .ca-title{height: .6rem;line-height: .6rem;border-radius: .1rem;background: #FFF6C1;}
.ca-msg .ca-title span{display: inline-block;width: 50%;text-align: center;color: #B36206;float: left;border-radius: .1rem;}
.cactive{background:  #F1CF47;border-radius: .2rem;}
.ca-infor{padding: .2rem;height: 1.4rem;font-size: .25rem;}
.caseopen{animation: mymove 300ms linear 3;}
@keyframes mymove{
    from{transform: rotate(-15deg) scale(1.04);}
    to{transform: rotate(15deg) scale(0.97);}
}
@-webkit-keyframes mymove{
from{transform: rotate(-15deg) scale(1.04);}
to{transform: rotate(15deg) scale(0.97);}
}
@-moz-keyframes mymove{
    from{transform: rotate(-15deg) scale(1.04);}
    to{transform: rotate(15deg) scale(0.97);}
}
.ca-prmsg{width:100%;height:100%;background-color: rgba(0,0,0,0.7);position:fixed;top:0;left:0;z-index: 9;display: none;}
.ca-prmsg img{width: 80%;margin:0 10%;}
.ca-prmsg .eg-goods{position: absolute;width: 15%;height: 1rem;margin: 0;top: 4.2rem;margin: 0 42.5%;}
.ca-prmsg p{position: absolute;top: 5.2rem;width: 30%;text-align: center;margin: 0 35%;font-size: .2rem;}

*{
    padding: 0;
    margin: 0;
}
.W{
    width: 100%;
}
.W>img{
    width: 100%;
    display: block;

}
.exchange,.ColoredEggsList{
    width: 94%;
    margin: 0 auto;
    margin-bottom: 0;
}
.exchange{
  position: relative;
  margin: 0 auto;
  width: 100%;
  top: -0.2rem;
  left: 0;
}
.exchange span{
    position: absolute;
    left: 35%;
    top: 47%;
    color: #ffe6a2;
    font-size: 18px;
}
.LuckyDrawnum{
  text-align: center;
  color: #f3224e;
  position: relative;
  margin-top: -2%;
  overflow: initial;
  height: 0;
}
.LuckyDrawnum span{
  font-size: 0.30rem;
}
.LuckyDrawnum p{
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
  z-index: 100000000;
  font-size: 0.29rem;
  margin-top: -4.6%;
}

.ColoredEggsList{
    width: 100%;
    position: relative;
    overflow: hidden;
    min-height: 5.2rem;
}
.Eggbj{
  margin-top: -4.9rem;
}
.ca-content{
  opacity: 0;
}
.taskList_ul{
    background: url('https://cdn-ujia001.ujia007.com/activity/20201225/082a63ac-5663-4c19-9a07-a8c9fcd94c85.png');
    background-size: 100% 100%;
    padding-top: 10px;
}
.synthesis img{
    width: 92%;
    margin: 10px auto;
}
.time{
    text-align: center;
}
.time img{
    width: 86%;
    margin: 0 auto;
}
html,
body {
    background: #f54a42;
    padding: 0;
    margin: 0;
}
.taskList{
    padding-bottom: 20px;
}
.ca-content{
  position: absolute;
  left: 7.5%;
  width: 87%;
  top: 0%;
  z-index: 100;
}
.ca-content dt{
  width: 20%;
  margin-right: 0.13rem;
}
.ca-content dt >div{
    background: url('https://cdn-ujia001.ujia007.com/activity/20220124/8db9f4ce-cba5-485d-8b8f-1e5bb580725e.png') no-repeat center center;
    background-size: 110% 110%;
    margin-bottom: 8px;
    overflow: inherit;
}

.ca-content dt img{
  width: 80%;
  margin: 34% auto;
  margin-top: 23%;
}
.Eggtitle,.Eggnum{
    text-align: center;
    color: #ffe6a2;
    font-size: 14px;
}

.shareimg{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 101;
    background: #000 ;
    display: none;
    background: rgba(0, 0, 0, 0.7);
}
.shareimg img{
 width: 80%;
 display: block;
 margin: 25% auto;
}
header{
height: 0.88rem;
background-color: #fff;
position: relative;
text-align: center;
font-size: 0.32rem;
line-height: 0.88rem;
}
.icon{
display: block;
position: absolute;
width: 0.6rem;
height: 0.6rem;
top: 50%;
margin-top: -0.3rem;
}
.icon-back{
 background: url(https://uplus-saas.oss-cn-shenzhen.aliyuncs.com/uplus-integralMall/20200615/2cb674a0-6e9e-4849-8486-3b325274b733.png) no-repeat center center;
 width: 0.5rem;
 height: 0.5rem;
 top: 50%;
 margin-top: -0.25rem;
 left: 0.25rem;
 background-size: 85%;
}
.spinner {
 text-align: center;
 position: fixed;
 width: 100%;
 top: 0;
 height: 100%;
 padding-top: 63%;
 z-index: 1001;
}

.spinner > div {
 width: 30px;
 height: 30px;
 background-color: #64a4ff;

 border-radius: 100%;
 display: inline-block;
 -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
 animation: bouncedelay 1.4s infinite ease-in-out;
 /* Prevent first frame from flickering when animation starts */
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
}
.spinner .bounce1 {
 -webkit-animation-delay: -0.32s;
 animation-delay: -0.32s;
}

.spinner .bounce2 {
 -webkit-animation-delay: -0.16s;
 animation-delay: -0.16s;
}
.bounce4{
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.5;
    width: 100%;
    height: 100%;
    z-index: -1;
}
@-webkit-keyframes bouncedelay {
 0%, 80%, 100% { -webkit-transform: scale(0.0) }
 40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
 0%, 80%, 100% { 
   transform: scale(0.0);
   -webkit-transform: scale(0.0);
 } 40% { 
   transform: scale(1.0);
   -webkit-transform: scale(1.0);
 }
}



.animations  {
    position: relative;
    -webkit-animation: bouncedelays 3s ease-in-out 0s 1 alternate forwards;
    animation: bouncedelays 3s ease-in-out 0s 1 alternate forwards;
    /* Prevent first frame from flickering when animation starts */
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    /* -webkit-animation:'index' 5s ease-in-out 0s 1 alternate forwards; */
   }

   @keyframes bouncedelays {
    0% { 
      top: 0;
    } 
    20% { 
      transform: scale(1.0);
      -webkit-transform: scale(1.0);
      top: -18px;
    }
    40% { 
        top:2px;
      }
     60% { 
        top: -20px;
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
      }
      80% { 
        top: 120px;
      }
      100% { 
        top: 120px;
      }
   }
   .animations3  {
    position: relative;
    -webkit-animation: bouncedelaysy 3s ease-in-out 0s 1 alternate forwards;
    animation: bouncedelaysy 3s ease-in-out 0s 1 alternate forwards;
    /* Prevent first frame from flickering when animation starts */
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    /* -webkit-animation:'index' 5s ease-in-out 0s 1 alternate forwards; */
   }

   @keyframes bouncedelaysy {
    0% { 
      top: 0;
    } 
    15% { 
      transform: scale(1.0);
      -webkit-transform: scale(1.0);
      top: -28px;
    }
    30% { 
        top:2px;
      }
    40% { 
        top: -20px;
      }
      40% { 
        top:5px;
      }
     60% { 
        top: -16px;
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
      }
      80% { 
        top: 120px;
      }
      100% { 
        top: 120px;
      }
   }