body {
    background: #9CEBEF;
}
.rankContent{
    background: #9CEBEF;
    position: relative;
    overflow: hidden;
}
.text-overflow {
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.rankContent .rank_box{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 99;
}
.rankContent .rank_box p {
    width: 200px;
    height: 50px;
    line-height: 50px;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    top: 50%;
    color: #ffffff;
    left: 50%;
    margin-top: -50px;
    margin-left: -100px;
    border-radius: 60px;
    position: relative;
}

.rankContent .topRank{
    height: 734px;
    margin-top: 48px;
    position: relative;
    background: url("//pic.cgyouxi.com/orange/upload/202104/25322333_bd759b5f4f7075b543b616f3d2eda3c9.png!n1920") center top / auto 100% no-repeat;
}

.rankBack {
    background: url(//pic.cgyouxi.com/orange/upload/202104/25322333_a3fae4518721e60d2c4b1f066c583b47.png);
    background-size: auto 1828px;
    background-repeat: no-repeat;
    padding-top: 38px;
    background-position: center;
    position: relative;
}
.topBanner{
    margin: 0 auto;
    /* margin-top: 38px; */
    display: block;
    width: 300px;
    height:96px;
    background: url(//pic.cgyouxi.com/orange/upload/202104/25322333_9f243e2223010a3c0ef4aeeec1029754.png) no-repeat center top;
    -o-background-size:cover;
       background-size:cover;
    font-size: 38px;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: center;
    line-height: 78px;
}
.topBanner:hover{
    opacity: 0.9;
}
.rankContent .topRank .topTitle{
    width: 370px;
    height:40px;
    position: absolute;
    left:50%;
    top:473px;
    margin-left:-175px; 
}

.rankContent .topRank .topTitle p{
    text-align: center;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 20px;
}

.rankContent .listContent{
    position: relative;
    /* background: url(//pic.cgyouxi.com/orange/upload/202101/22274736_b7074546b81fb62e1c483568bbf6570e.png) no-repeat center center; */
    -o-background-size: 1569px 1950px;
       background-size: 1569px 1950px;
    background-position-y: 0px;
}
.rankContent .listContent .mainList{
    padding-top: 56px;
}
.mainList .smallList{
    overflow: hidden;
    margin: 0 auto;
    margin-top: 27px;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 2; 
    width: 800px;
    -o-background-size: 100%;
       background-size: 100%; 
}
.mainList .smallList>div{
    float: left;
    height: 336px;
    width: 371px;
    background: rgba(74,0,0,0.10);
    border-radius: 5px;
    border-radius: 5px;
}

.mainList .smallList .smallList2{
   float:right; 
}
.mainList .smallList .title{
    font-size: 36px;
    color: #FFFFFF;
    letter-spacing: 0;
    line-height: 47px;
    text-align: center;  
    margin: 6px auto 16px;
    margin-bottom: 0;
}
.mainList .smallList .time{
    font-size: 12px;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: center;
    width: 204px;
    margin: 0 auto;
    line-height: 20px;
    border-radius: 56px;
    border-radius: 10px;
    margin-top: 20px;
}
.mainList .smallList .time1{
    /* background-image: -webkit-linear-gradient(right, rgba(247,194,41,0.10) 0%, #FFC31E 100%);
    background-image: -moz-linear-gradient(right, rgba(247,194,41,0.10) 0%, #FFC31E 100%);
    background-image: -o-linear-gradient(right, rgba(247,194,41,0.10) 0%, #FFC31E 100%);
    background-image: linear-gradient(270deg, rgba(247,194,41,0.10) 0%, #FFC31E 100%); */
   
}
.timeStatus0, .timeStatus2, .timeStatus3 {
    background-image: -webkit-linear-gradient(top, #FAD961 0%, #F76B1C 100%);
    background-image: -moz-linear-gradient(top, #FAD961 0%, #F76B1C 100%);
    background-image: -o-linear-gradient(top, #FAD961 0%, #F76B1C 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FAD961), to(#F76B1C));
    background-image: linear-gradient(180deg, #FAD961 0%, #F76B1C 100%);
    background-color: #e9b73b\9\0;
}
.mainList .smallList .time2{
    /* background-image: -webkit-linear-gradient(right, rgba(255,50,50,0.20) 1%, #E73939 100%);
    background-image: -moz-linear-gradient(right, rgba(255,50,50,0.20) 1%, #E73939 100%);
    background-image: -o-linear-gradient(right, rgba(255,50,50,0.20) 1%, #E73939 100%);
    background-image: linear-gradient(270deg, rgba(255,50,50,0.20) 1%, #E73939 100%); */
   
}
.timeStatus1 {
    background-image: -webkit-linear-gradient(right, #FF854C 9%, #FF4F51 94%);
    background-image: -moz-linear-gradient(right, #FF854C 9%, #FF4F51 94%);
    background-image: -o-linear-gradient(right, #FF854C 9%, #FF4F51 94%);
    background-image: -webkit-gradient(linear, right top, left top, color-stop(9%, #FF854C), color-stop(94%, #FF4F51));
    background-image: linear-gradient(270deg, #FF854C 9%, #FF4F51 94%);
    background-color: #e63838\9\0;
}
.mainList .smallList .rangClock{
    width: 80px;
    height: 80px;
    margin: 85px auto 78px;
}
.mainList .smallList .rangClock img{
    height: 100%;
}
.mainList .smallList ul{
    overflow: hidden;
    width: 317px;
    margin: 15px auto 0;
}
.mainList .smallList ul li{
    position: relative;
    width: 100%;
    height: 50px;
    background: #d24038;
    margin-top: 10px;
    border-radius: 5px;
}
.mainList .smallList ul li img{
    width: 40px;
    height: 40px;
    border-radius: 20px;
    position: absolute;
    left: 49px;
    margin-top: 5px;
}
.mainList .smallList ul li .num{
    position: absolute;
    left: 0;
    display: inline-block;
    width: 49px;
    line-height: 49px;
    text-align: center;
    font-size: 14px;
    color: #FFBBBB;
    letter-spacing: 0;
}
.mainList .smallList ul li .name{
    position: absolute;
    left: 110px;
    font-size: 14px;
    color: #FFFFFF;
    letter-spacing: 0;
    display: inline-block;
    line-height: 49px;
    width: 200px;
}
.mainList .listNote{
     width: 800px;
     margin: 74px auto 52px;
}
.mainList .listNote .showTitle{
    width: 180px;
    height: 30px;
    /* background-image: -webkit-linear-gradient(right, rgba(247,194,41,0.10) 0%, #FFC31E 100%);
    background-image: -moz-linear-gradient(right, rgba(247,194,41,0.10) 0%, #FFC31E 100%);
    background-image: -o-linear-gradient(right, rgba(247,194,41,0.10) 0%, #FFC31E 100%);
    background-image: linear-gradient(270deg, rgba(247,194,41,0.10) 0%, #FFC31E 100%); */
    background-image: -webkit-linear-gradient(top, #FAD961 0%, #F76B1C 100%);
    background-image: -moz-linear-gradient(top, #FAD961 0%, #F76B1C 100%);
    background-image: -o-linear-gradient(top, #FAD961 0%, #F76B1C 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FAD961), to(#F76B1C));
    background-image: linear-gradient(180deg, #FAD961 0%, #F76B1C 100%);
    background-color: #e9b73b\9\0;
    border-radius: 15px;
}
.mainList .listNote .showTitle p{
    font-size: 36px;
    color: #FFFFFF;
    line-height: 8px;
    margin-top: 18px;
    padding-left:3px;
}
.mainList .listNote .shows p{
    margin-top:26px;
    font-family: MicrosoftYaHei;
    font-size: 14px;
    color: #FFBBBB;
    letter-spacing: 0;
    line-height: 26px;
}
.mainList .prizeList{
    background: url(//pic.cgyouxi.com/orange/upload/202104/25322333_4320995b8bef32ee962c8cd23fb2a1ac.png);
    -o-background-size: 100%;
       background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    -moz-box-sizing:border-box;
         -webkit-box-sizing:border-box;
            box-sizing:border-box;
    width: 1200px;
    height: 620px;
    margin: 0 auto;
    position: relative;
    z-index: 3;
}

.prizeActive {
    width: 1200px;
    height: 456px;
    margin: 0 auto;
    background: url(//pic.cgyouxi.com/orange/upload/202104/25322333_a76f979f65d5427e83c9f49c3c6e4440.png);
    -o-background-size: 100%;
       background-size: 100%;
    background-repeat: no-repeat;
    margin-top: -30px;
    z-index: 2;
    position: relative;
}

.prizeActive .prizeAward {
    width: 350px;
    margin: 0 auto;
}

.prizeRules {
    width: 1200px;
    height: 425px;
    margin: 0 auto;
    background: url(//pic.cgyouxi.com/orange/upload/202104/25322333_243cf01e4b330eaa87b1755e68467ac0.png);
    -o-background-size: 100%;
       background-size: 100%;
    background-repeat: no-repeat;
    margin-top: -30px;
    z-index: 1;
    position: relative;

}

.prizeRules .prizeContent {
    height: 246px;
    width: 954px;
}
.prizeTitle{
    margin: 0 auto;
    -moz-box-sizing:border-box;
         -webkit-box-sizing:border-box;
            box-sizing:border-box;
    width:564px;
    height: 82px;
    line-height:82px;
    text-align: center;
    background: url(//pic.cgyouxi.com/orange/upload/202104/25322333_280d2c0726064eedda4bfd972f6c962c.png);
    -o-background-size: 100%;
       background-size: 100%;
    background-repeat: no-repeat;
    font-size: 30px;
    color: #FFFFFF;
    letter-spacing: 0;
}

.prizeActive .prizeTitle {
    background: url(//pic.cgyouxi.com/orange/upload/202104/25322333_3b23b35ae8a81155a6b0d2944dae22a5.png);
    -o-background-size: 100%;
       background-size: 100%;
    background-repeat: no-repeat;
}

.prizeRules .prizeTitle {
    background: url(//pic.cgyouxi.com/orange/upload/202104/25322333_e21a7d00f49af5c18c9b90931977463d.png);
    -o-background-size: 100%;
       background-size: 100%;
    background-repeat: no-repeat;
}

.prizeContent {
    background: #F6F3E0;
    border-radius: 13px;
    width: 954px;
    height: 200px;
    margin: 0 auto;
    margin-top: 28px;
    padding: 22px 35px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    border: 1px solid #FACBA2;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #58A1A7;
    letter-spacing: 0;
    text-align: left;
    line-height: 23px;
}
.mainList .prizeList .prizeMain{
    margin-top: 100px;
    /* background: rgba(74,0,0,0.10);
    border: 2px solid rgba(255,207,0,0.30);
    border-radius: 0 0 5px 5px;
    position: relative; */
    /* -moz-box-sizing: border-box;
         box-sizing: border-box;
    width: 1200px;
    height: 242px;
    border-top: none; */
}
.mainList .prizeList .prizeBg,.mainList .prizeList .prizeEnergy{
    width: 650px;
    height: 10px;
    position: absolute;
    top:51px;
    left:75px;
    background: #BC2513;
    z-index: 1;
}
.mainList .prizeList .prizeEnergy{
    z-index: 2;
    overflow: hidden;
    /* background:#FFEF00; */
    opacity: 0.9;
    background: #FFC310;    
    width: 0px;
    -webkit-transition: width .8s ease;
    -o-transition: width .8s ease;
    -moz-transition: width .8s ease;
    transition: width .8s ease;
}
.mainList .prizeList ul{
    width: 700px;
    height: 80px;
    margin: 0 auto;
    position: relative;
    z-index: 3;
    padding-top:35px;
}
.mainList .prizeList ul li{
    position: relative;
    height:77px;
    float: left;
    width:50px;
    margin-right: 42px;
    text-align: center;
    /* background: url(//pic.cgyouxi.com/orange/upload/202101/22274736_8d66f1c5490820ddd9bfef717b334f30.png) no-repeat left center;  */
    /* background-size: 50px 50px; */
    /* background-position-y: top; */
}
.mainList .prizeList ul li.act{
    /* background: url(//pic.cgyouxi.com/orange/upload/202101/22274736_ec2e4e08503421e9c9ee98c9a804557a.png) no-repeat left center; 
    background-size: 50px 50px;
    background-position-y: top;   */
}
.mainList .prizeList ul li:last-child{
    margin-right: 0;
}

.mainList .prizeList ul li span{
    display: inline-block;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #FFFFFF;
    letter-spacing: 0;
    margin-top: 15px;
    line-height: 17px;
    width: 50px;
    text-align: center;
    cursor: pointer;
}
.prizeList .prize-box-txt {
  position: absolute;
  top: -35px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 12px;
}
/* .prizeList li:first-child .prize-box-txt{
    left: -18px !important;
} */
.prizeList li:last-child .prize-box-txt{
    /* left: -92px !important; */
}
.prizeList .prize-box-txt:after {
  margin-left: -6px;
  position: absolute;
  left: 50%;
  bottom: -6px;
  opacity: .6;
  content: '';
  width: 0;
  height: 0;
  border-width: 6px 6px 0;
  border-style: solid;
  border-color: #000 transparent transparent;
  /*灰 透明 透明 */
}
/* .prizeList li:first-child .prize-box-txt:after{
   left:70% !important;
} */
.prizeList li:last-child .prize-box-txt:after{
   /* left:64% !important; */
}
.mainList .prizeList .prizeNote{
    width: 500px;
    margin: 15px auto 0;
    text-align: center;
    font-size: 12px;
    letter-spacing: 0;
    color: #FFEF00;
}
.mainList .prizeList .prizeNote .rechargeNum{
    width: 170px;
    height: 42px; 
    margin: 0 auto;
    background: rgba(69,126,130,.7);
    border-radius: 20px;
    line-height: 42px;
    font-family: MicrosoftYaHei; 
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: center;
}
.mainList .prizeList .prizeNote .needNum{
    height: 22px;
    font-family: PingFangSC-Regular;
    line-height: 22px;
    margin: 22px auto 24px;
    font-family: PingFangSC-Medium;
    font-size: 16px;
    color: #F49C69;
    letter-spacing: 0;
    text-align: center;
}
.mainList .prizeList .prizeNote a{
    line-height: 22px;
    font-family: PingFangSC-Medium;
    font-size: 16px;
    color: #F49C69;
    letter-spacing: 0;
    text-align: center;
    height: 22px;
}
.mainList .prizeList .cracker{
    position: absolute;
    width: 78px;
    height: 78px;
    bottom: 4px;
    right: 0;
}
.mainList .prizeList .cracker img{
    width: 100%;
}
.mainList .rankList{
    display: none;
    width: 796px;
    margin:0 auto 57px;  
}
.mainList .rankList:before{
    display: table;
    content: " ";
}
.mainList .rankList .note{
   font-family: MicrosoftYaHei;
    letter-spacing: 0;
    text-align: right;
    line-height: 40px;
    margin: 6px 0 -32px 0; 
}
.mainList .rankList .note p{
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-size: 14px;
    color: #F3F5FF;
    letter-spacing: 0;
    line-height: 40px;
}
.mainList .rankList li{
   width: 100%;
   position: relative;
   width: 100%; 
   margin-top: 45px;
   overflow: visible;
   height: 55px;
   background: rgba(74,0,0,0.10);
    border: 2px solid rgba(255,207,0,0.30);
    border-radius: 5px;
    -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
            box-sizing: border-box;

}
.mainList .rankList .userlistInfo{
    width: 335px; 
    height: 51px;
}
.mainList .rankList .userlistInfo .rankNo{
    position: absolute;
    left: 14px;
    top: -38px;
    z-index: 1;
    height: 86px;
    width: 58px;
}
.mainList .rankList .userlistInfo .rankNo1{ 
    background: url(//pic.cgyouxi.com/orange/upload/202101/22274736_094c5fc2abf764d6db4c31ba1fb96ce8.png) center center no-repeat;
    -o-background-size: 100%;
       background-size: 100%;
}
.mainList .rankList .userlistInfo .rankNo2{
    background: url(//pic.cgyouxi.com/orange/upload/202101/22274736_c16d018d190d59d1ab0b72f51fffe72a.png) center center no-repeat;
    -o-background-size: 100%;
       background-size: 100%;
}
.mainList .rankList .userlistInfo .rankNo3{
    background: url(//pic.cgyouxi.com/orange/upload/202101/22274736_6cb4c4b99bcd9a99722b1ca7906765c7.png) center center no-repeat;
    -o-background-size: 100%;
       background-size: 100%;
}
.mainList .rankList .userlistInfo .rankNo4{
    top: 10px;
    font-size: 20px;
    color: #FFBBBB;
    line-height: 28px;
    left: 46px;
}
.mainList .rankList .userlistInfo p{
    position: absolute;
    left: 98px;
    top: -32px;
    width: 86px;
    height: 86px;
}
.mainList .rankList .userlistInfo .userAvatar{
    width: 86px;
    height: 86px; 
    position: absolute;
    left: 95px;
    top: -29px;
}
.mainList .rankList .userlistInfo .userAvatar1{
    width: 100px;
    height: 100px; 
    position: absolute;
    left:88px;
    top: -41px;
}
.mainList .rankList .userlistInfo .userPendant{
    position: absolute;
    width: 100%;
    height: 100%;
}
.mainList .rankList .userlistInfo .userPendant1{
    background: url(//pic.cgyouxi.com/orange/upload/202101/22274736_063a4ab4893e2f4e107ec90e36e43f05.gif) center center no-repeat;
    -o-background-size: 100%;
       background-size: 100%; 
}
.mainList .rankList .userlistInfo .userPendant2{
    background: url(//pic.cgyouxi.com/orange/upload/202101/22274736_5869e5e89a7d3d89feb2630152a3d6ee.gif) center center no-repeat;
    -o-background-size: 100%;
       background-size: 100%; 
}
.mainList .rankList .userlistInfo .userPendant3{
    background: url(//pic.cgyouxi.com/orange/upload/202101/22274736_d50b884d1b2f6958e1437247c72bf4a8.gif) center center no-repeat;
    -o-background-size: 100%;
       background-size: 100%; 
}
.mainList .rankList .userlistInfo .userPendant4{
    background: url(//pic.cgyouxi.com/orange/upload/202101/22274736_0f15f0d2812f10a7c5159d12913aa619.gif) center center no-repeat;
    -o-background-size: 100%;
       background-size: 100%; 
}
.mainList .rankList .userlistInfo .userAvatar img{
    width: 70px;
    height: 70px;
    border-radius: 35px;
    margin-left: 8px;
    margin-top: 8px;
}
.mainList .rankList .userlistInfo .userAvatar1 img{
    width: 80px;
    height: 80px;
    border-radius: 80px;
    margin-left: 10px;
    margin-top: 10px;
}
.mainList .rankList .userlistInfo .name{
    position: absolute;
    left: 205px;
    top:14px;
    font-size: 20px;
    color: #FFFFFF ;
    display: inline-block;
    width: 145px;
    line-height: 26px;
}
.mainList  .rankList .bar{
    /* width: 458px; */
    position: absolute;
    top: 0px;
    height: 51px;
    margin-left: 337px;
}
.mainList .rankList .bar .barBg{
    width: 241px;
    height: 100%;
    transform: translateX(15px) skewX(-30deg);
    -webkit-transform: translateX(15px) skewX(-30deg);
    -ms-transform:translateX(15px) skewX(-30deg);  
    -moz-transform:translateX(15px) skewX(-30deg);  
    -o-transform:translateX(15px) skewX(-30deg);  
    position: relative;
}
.mainList .rankList .bar .barNo1{
    background-image: -webkit-linear-gradient(right, rgba(249,77,203,0.00) 7%, #FE56C7 95%);
    background-image: -moz-linear-gradient(right, rgba(249,77,203,0.00) 7%, #FE56C7 95%);
    background-image: -o-linear-gradient(right, rgba(249,77,203,0.00) 7%, #FE56C7 95%);
    background-image: -webkit-gradient(linear, right top, left top, color-stop(7%, rgba(249,77,203,0.00)), color-stop(95%, #FE56C7));
    background-image: linear-gradient(270deg, rgba(249,77,203,0.00) 7%, #FE56C7 95%);
   background-color: #ff6e6e\9\0;
}
.mainList .rankList .bar .barNo2{
    background-image: -webkit-linear-gradient(right, rgba(70,173,255,0.00) 7%, #23A7FF 93%);
    background-image: -moz-linear-gradient(right, rgba(70,173,255,0.00) 7%, #23A7FF 93%);
    background-image: -o-linear-gradient(right, rgba(70,173,255,0.00) 7%, #23A7FF 93%);
    background-image: -webkit-gradient(linear, right top, left top, color-stop(7%, rgba(70,173,255,0.00)), color-stop(93%, #23A7FF));
    background-image: linear-gradient(270deg, rgba(70,173,255,0.00) 7%, #23A7FF 93%);
    background-color: #3191ff\9\0;
}
.mainList .rankList .bar .barNo3{
    background-image: -webkit-linear-gradient(right, rgba(229,154,22,0.00) 7%, #C68A20 93%);
    background-image: -moz-linear-gradient(right, rgba(229,154,22,0.00) 7%, #C68A20 93%);
    background-image: -o-linear-gradient(right, rgba(229,154,22,0.00) 7%, #C68A20 93%);
    background-image: -webkit-gradient(linear, right top, left top, color-stop(7%, rgba(229,154,22,0.00)), color-stop(93%, #C68A20));
    background-image: linear-gradient(270deg, rgba(229,154,22,0.00) 7%, #C68A20 93%);
   background-color: #b08347\9\0;
}
.mainList .rankList .bar .barNo4{
    background-image: -webkit-linear-gradient(right, rgba(22,144,229,0.00) 7%, #3590EC 92%);
    background-image: -moz-linear-gradient(right, rgba(22,144,229,0.00) 7%, #3590EC 92%);
    background-image: -o-linear-gradient(right, rgba(22,144,229,0.00) 7%, #3590EC 92%);
    background-image: -webkit-gradient(linear, right top, left top, color-stop(7%, rgba(22,144,229,0.00)), color-stop(92%, #3590EC));
    background-image: linear-gradient(270deg, rgba(22,144,229,0.00) 7%, #3590EC 92%);
    background-color: #e6832d\9\0;
}
.rankList ul .progress{
    position: relative;
    height: 10px;
    overflow: visible;
    width: 370px;
    margin-left: 60px;
    position: absolute;
    top: 22px;
    background:transparent;
    border-radius: 5px;
    background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.40) 2%, rgba(255,255,255,0.10) 98%);
    background-image: -moz-linear-gradient(top, rgba(255,255,255,0.40) 2%, rgba(255,255,255,0.10) 98%);
    background-image: -o-linear-gradient(top, rgba(255,255,255,0.40) 2%, rgba(255,255,255,0.10) 98%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(2%, rgba(255,255,255,0.40)), color-stop(98%, rgba(255,255,255,0.10)));
    background-image: linear-gradient(180deg, rgba(255,255,255,0.40) 2%, rgba(255,255,255,0.10) 98%);
    background-color: #d16862\9\0 !important;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
            box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
    -webkit-filter:none;
            filter:none;
}

.progress-bar {
    position: relative;
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    /* background-color: #337ab7; */
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    -moz-transition: width .6s ease;
    transition: width .6s ease;
}
.mainList .rankList .progress>.progress-bar-show:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2;
    background-image: -webkit-linear-gradient(150deg,rgba(255,255,255,.25) 25%, transparent 25%,transparent 50%,rgba(255,255,255,.25) 50%,rgba(255,255,255,.25) 75%,transparent 75%,transparent);
    background-image: -moz-linear-gradient(150deg,rgba(255,255,255,.25) 25%, transparent 25%,transparent 50%,rgba(255,255,255,.25) 50%,rgba(255,255,255,.25) 75%,transparent 75%,transparent);
    background-image: -o-linear-gradient(150deg,rgba(255,255,255,.25) 25%, transparent 25%,transparent 50%,rgba(255,255,255,.25) 50%,rgba(255,255,255,.25) 75%,transparent 75%,transparent);
    background-image: linear-gradient(300deg,rgba(255,255,255,.25) 25%, transparent 25%,transparent 50%,rgba(255,255,255,.25) 50%,rgba(255,255,255,.25) 75%,transparent 75%,transparent);
    -o-background-size: 16px 22px;
       background-size: 16px 22px;
    overflow: hidden;
}
.progress-bar-no1{
    background-image: -webkit-linear-gradient(bottom, #FF9631 0%, #F8D353 100%);
    background-image: -moz-linear-gradient(bottom, #FF9631 0%, #F8D353 100%);
    background-image: -o-linear-gradient(bottom, #FF9631 0%, #F8D353 100%);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#FF9631), to(#F8D353));
    background-image: linear-gradient(0deg, #FF9631 0%, #F8D353 100%);
    -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.20);
            box-shadow: 0 1px 3px 0 rgba(0,0,0,0.20);
    /* background-image: linear-gradient(0deg, #FF0000 0%, #FFB4B4 100%); */
    background-color:#ff2626\9\0;
    border-radius: 5px;
}
.progress-bar-no2{
    background-image: -webkit-linear-gradient(top, #E183F0 0%, #9555ED 100%);
    background-image: -moz-linear-gradient(top, #E183F0 0%, #9555ED 100%);
    background-image: -o-linear-gradient(top, #E183F0 0%, #9555ED 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#E183F0), to(#9555ED));
    background-image: linear-gradient(180deg, #E183F0 0%, #9555ED 100%);
    /* background-image: linear-gradient(180deg, #93C6DA 2%, #5795CD 100%); */
   background-color: #6da7d2\9\0;
   border-radius: 5px;
}
.progress-bar-no3{
    background-image: -webkit-linear-gradient(left, #FB424E 0%, #CD58E0 100%);
    background-image: -moz-linear-gradient(left, #FB424E 0%, #CD58E0 100%);
    background-image: -o-linear-gradient(left, #FB424E 0%, #CD58E0 100%);
    background-image: -webkit-gradient(linear, left top, right top, from(#FB424E), to(#CD58E0));
    background-image: linear-gradient(90deg, #FB424E 0%, #CD58E0 100%);
   /* background-image: linear-gradient(180deg, #FFDF53 2%, #DB8B00 100%); */
   background-color: #ebb025\9\0;
   border-radius: 5px;
}
.progress .progress-bar-no4{
    background-image: -webkit-linear-gradient(top, #FF956A 4%, #D37600 96%);
    background-image: -moz-linear-gradient(top, #FF956A 4%, #D37600 96%);
    background-image: -o-linear-gradient(top, #FF956A 4%, #D37600 96%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(4%, #FF956A), color-stop(96%, #D37600));
    background-image: linear-gradient(180deg, #FF956A 4%, #D37600 96%);
    border-radius: 5px;
    background-color: #e6832d\9\0;
}

.progress-bar-danger {
    background-color: #d9534f;
}

.progressHidden{
    position: absolute;
    margin: 0 auto;
    height: 46%;
    opacity: 0.2;
    background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.00) 0%, #FFFFFF 100%);
    background-image: -moz-linear-gradient(top, rgba(255,255,255,0.00) 0%, #FFFFFF 100%);
    background-image: -o-linear-gradient(top, rgba(255,255,255,0.00) 0%, #FFFFFF 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.00)), to(#FFFFFF));
    background-image: linear-gradient(180deg, rgba(255,255,255,0.00) 0%, #FFFFFF 100%);
}
.progress .progress-value{
  display: block;
  padding: 3px 7px;
  font-size: 13px;
  color: #fff;
  border-radius: 4px;
  background: #191919;
  border: 1px solid #000;
  position: absolute;
  top: -40px;
  right: -10px;
}
.progress .progress-value:after{
  content: "";
  border-top: 10px solid #191919;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  position: absolute;
  bottom: -6px;
  left: 26%;
}
.progress-bar.active{
  animation: reverse progress-bar-stripes 0.40s linear 1, animate-positive 2s;
}
@-webkit-keyframes animate-positive{
  0% { width: 0; }
}
@-moz-keyframes animate-positive{
  0% { width: 0; }
}
@-o-keyframes animate-positive{
  0% { width: 0; }
}
@keyframes animate-positive{
  0% { width: 0; }
}

.awardImg {
    width: 39px;
    height: 39px;
    background: url(//pic.cgyouxi.com/orange/upload/202101/22274736_8d66f1c5490820ddd9bfef717b334f30.png);
    -o-background-size: 100%;
       background-size: 100%;
    background-repeat: no-repeat;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
}
.awardImg.acted{
    background: url(//pic.cgyouxi.com/orange/upload/202101/22274736_eccd569be8f01de633ecccaf2d8c1bc6.png);
    -o-background-size: 100%;
       background-size: 100%;
    background-repeat: no-repeat;
}
.awardImg.received{
    background: url(//pic.cgyouxi.com/orange/upload/202101/22274736_56e9d28d1b351cb2972223c0547952d6.png);
    -o-background-size: 100%;
       background-size: 100%;
    background-repeat: no-repeat;
}
.awardItem {
    display: inline-block;
    vertical-align: middle;
}

.hiddenBox {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10;;

    
}

.hiddenReceiveBox {
    -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
            box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
   
    width:500px;
    height: 292px;
}
.hiddenBottomBox {
    width: 100%;
    overflow: hidden;
    height: 183px;
    background: white;
    margin-top: -1px;
    position: relative;
}

.hiddenTitle {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    padding-top: 24px;
    font-family: PingFangSC-Semibold;
    font-size: 18px;
    color: #FFFFFF;
    height: 109px;
    letter-spacing: 0.51px;
    text-align: center;
    background: url(//pic.cgyouxi.com/orange/upload/202104/25322333_b95e90fb904c5c53dba699d358dc8b89.png);
    -o-background-size: 500px 109px;
       background-size: 500px 109px;
    background-repeat: no-repeat;
}

.hiddenHr {
    display: block;
    width:120px;
    margin: 0 auto;
    margin-top: 8px;

}

.hiddenContent{
    position: absolute;
    top: 20px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
       -moz-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
         -o-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    
}

.hiddenBtn {
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
       -moz-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
         -o-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    width: 100%;
    height: 55px;
    line-height: 55px;
    font-family: PingFangSC-Medium;
    background: white;
    text-align: center;
    /* background-image: -webkit-linear-gradient(top, #FEE08E 0%, #FFCC73 100%);
    background-image: -moz-linear-gradient(top, #FEE08E 0%, #FFCC73 100%);
    background-image: -o-linear-gradient(top, #FEE08E 0%, #FFCC73 100%);
    background-image: linear-gradient(180deg, #FEE08E 0%, #FFCC73 100%); */
    cursor: pointer;
    font-size: 16px;
    color: #F49C69;
    letter-spacing: 0;
    text-align: center;
    border-top: 1px solid #EEEEEE;
}

.hiddenAwardItem {
       
    font-size: 0;
    text-align: center;
    margin-bottom: 10px;

    
}

.hiddenAwardItem:last-child {
    margin-bottom: 0;
}

.hiddenAwardItem img {
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
}
.hiddenAwardItem span {
    margin-left: 21px;
    display: inline-block;
    vertical-align: middle;
    width: 70px;
    font-family: PingFangSC-Semibold;
    font-size: 18px;
    color: #00001E;
    letter-spacing: 0;
    text-align: center;
    line-height: 24px;
    font-weight: bold;
}

.timeTips {
    font-family: MicrosoftYaHei;
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 0;
    display: block;
    text-align: center;
    padding-bottom: 5px;
}

.currentStatus0, .currentStatus2, .currentStatus3 {
    background: url(//pic.cgyouxi.com/orange/upload/202101/22274736_56658015797e57374c53378fc87af272.png)!important;
    -o-background-size: 100%!important;
       background-size: 100%!important;
}

.currentStatus1 {
    background: url(//pic.cgyouxi.com/orange/upload/202101/22274736_eb70a8ea2d698ccd2cd2413c7b02452b.png)!important;
    -o-background-size: 100%!important;
       background-size: 100%!important;
}

.listContent {
    padding-bottom: 40px;
}
.footer {
    margin-top: 0;
}

.prizeBox {
    margin: 0 auto;
    width: 1024px;
}

.prizeImg {

}

.prizeProcess {
    margin-top: 15px;
    background: #DADADA;
    border-radius: 29px;
    height: 7px;
    position: relative;
}


.prizeImgItem, .prizeProcessItem, .prizePriceItem {
    display: inline-block;
    width: 124px;
    text-align: center;
    margin-left: 26px;
}
.prizeImgItem:first-child, .prizeProcessItem:first-child, .prizePriceItem:first-child {
    margin-left: 0;
}
.prizeImgItem {
    background: url(//pic.cgyouxi.com/orange/upload/202104/25322333_3a4cea3cb3e4dc9505fc66fda83c468e.png);
    -o-background-size: 83px 59px;
       background-size: 83px 59px;
    background-position: center center;
    background-repeat: no-repeat;
    height: 59px;
    cursor: pointer;
    position: relative;
}

.prizeImgItem:hover > .Itemtips{
    display: block;
}

.prizeImgItem.canClick {
    background: url(//pic.cgyouxi.com/orange/upload/202104/25322333_d99f41428bdf010216836274ca75b242.png);
    -o-background-size: 100%;
       background-size: 100%;
    background-repeat: no-repeat;
    height: 116px;
}

.prizeImgItem.clicked {
    background: url(//pic.cgyouxi.com/orange/upload/202104/25322333_ea96971652037149521fb8a1239d2c11.png);
    -o-background-size: 100%;
       background-size: 100%;
    background-repeat: no-repeat;
    height: 112px;
}

.prizeProcessItem {
    height: 18px;
}

.allline {
    position:absolute;
    left: 0;
    top: 0;
    height: 7px;
    background: #FBD8D1;
    border-radius: 29px;
    border-radius: 13.5px;
}

.dot {
    width: 18px;
    height: 18px;
    border-radius: 18px;
    margin: 0 auto;
    margin-top: -6px;
    z-index: 10;
    position: relative;
    background: url(//pic.cgyouxi.com/orange/upload/202104/25322333_d5933ff70f0f00ae18c64405cb77172f.png);
    -o-background-size: 100%;
       background-size: 100%;
    background-repeat: no-repeat;
}
.dot.active {
    background: url(//pic.cgyouxi.com/orange/upload/202104/25322333_baff68ce04b30c9c6f05dfeaaf32fe86.png);
    -o-background-size: 100%;
       background-size: 100%;
    background-repeat: no-repeat;
}

.prizePrice {
    margin-top: 13px;
}

.prizePriceItem {
    font-size: 16px;
    color: #58A1A7;
    letter-spacing: 0;
    text-align: center;
}

.Itemtips {
    display: none;
    position: absolute;
    top: -15px;
    left: 50%;
    -webkit-transform: translate(-50%, -100%);
       -moz-transform: translate(-50%, -100%);
        -ms-transform: translate(-50%, -100%);
         -o-transform: translate(-50%, -100%);
            transform: translate(-50%, -100%);
    font-size: 14px;
    white-space: nowrap;
    background: #F49C69;
    padding: 6px 12px;
    border-radius: 4px;
    font-family: PingFangSC-Regular;
    font-size: 11px;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: center;
}

.Itemtips:after {
    margin-left: -10px;
    left: 50%;
    bottom: -6px;
    position: absolute;
    opacity: 0.8;
    content: '';
    width: 0;
    height: 0;
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: #F49C69 transparent transparent;
}

.leftgreen {
    position:absolute;
    left: 0;
    bottom: 0;
    width: 730px;
    height: 437px;
    background: url(//pic.cgyouxi.com/orange/upload/202104/25322333_524d3d76c971a4bf3a3c0608e64c6935.png);
    background-size: 100%;
    background-repeat: no-repeat;
    z-index: 0;
}

.rightgreen {
    position:absolute;
    right: 0;
    bottom: 0;
    width: 717px;
    height: 402px;
    background: url(//pic.cgyouxi.com/orange/upload/202104/25322333_5cabca7f9f4be4951b43c74142468056.png);
    background-size: 100%;
    background-repeat: no-repeat;
    z-index: 0;
}

body .footer {
    margin-top: 0;
}