body{
    font-size: 0.14rem;
    font-family: "Microsoft YaHei";
    color: #fff;
}
#container {
    /* width: 100%; */
    /* height: 100%; */
    width: 7.2rem;
    height: 43rem;
    background: url(../images/bg04.jpg) top center no-repeat;
    /*background-size: cover;*/
     background-size: 100% auto; 
    margin: 0 auto;
    /* max-width: 6.25rem; */
    max-width: 1000px;
    position: relative;
    overflow-x: hidden;
}
.topbar{
    height: 0.9rem;
    position: relative;
    background-color: #000;
}
.topbar .topbar-bg{
    height:100%;
    width: 100%;
    position: absolute;
    top:0;
    left:0;
    background-color: #000;
    opacity:0.6;
    z-index: 0;
}
.logo-wrap{
    padding-top: 0.1rem;
    position: relative;
    z-index: 1;
}
.tools .t-btn,
.tools-cont .code i,
.lottery .lottery-container li.on,
.feature .gallery_prev,
.feature .gallery_next,
.inviteWay a{
    background: url(../images/icons04.png);
}
.logo-wrap .logo{
    float: left;
    margin-left: 0.35rem;
}
.logo-wrap .logo img{
    width:0.93rem;
    height:0.93rem;
}
.logo-wrap .subtitlt{
    float: left;
    margin-left: 0.2rem;
}
.logo-wrap .subtitlt h2{
    font-size: 0.22rem;
    color: #fff;
    margin-top: 5px;
}
.logo-wrap .subtitlt p{
    font-size: 0.14rem;
}
#J_loginContainer .J_login,#J_loginContainer .J-logout{
    color: #ffe226;
}
.tools{
    float: right;
    padding: 0.2rem 0.35rem 0px 0;
    position: relative;
}
.tools .news{
    float: left;
    width:0.44rem;
    height:0.33rem;
    background-position:-1.13rem -0.71rem;
    background-size:1400%
}
.tools .news.on{
    background-position:-171px -78px;
}
.tools-cont .newslist{
    position: absolute;
    left: 0;
    top: 0.9rem;
}
.newslist a{
    color:#999;
}
.newslist{
    width: 465px;
    top: 70px;
    right: 0;
    padding:10px 0;
}
.newslist{
    background-color: #1b1c1e;
}
.newslist ul{
    margin:0 0.3rem;
    color: #cccccc;
}
.newslist ul li{
    height: 35px;
    line-height: 35px;
}
.newslist ul li a *{
    float: left;
}
.newslist li p{
    width: 5.1rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.newslist li i{
    margin-left: 10px;
}
.top{
    height: 6.38rem;
    padding-top: 2rem;
}
.top .downloads{
    width: 4.08rem;
    height: 1.48rem;
    background: url(../images/downloadbg.png);
    padding-top: 0.15rem;
    margin: 1rem auto 0;
    background-size: 100%;
}
.top .downloads img{
    margin-left: 25px;
    float: left;
}
.top .downloads .downloadbtns{
    margin: 0.1rem 0 0 0.41rem;
}
.top .downloads .downloadbtns a{
    display: block;
    background: url(../images/downloadbtn.png);
    width: 1.8rem;
    height: 0.52rem;
    margin-top: 7px;
    background-size: 100%
}
.top .downloads .downloadbtns a.android{
    background-position: 0 0.54rem;
}
.top .video-btn{
    display: block;
    background: url(../images/v_btn.png?v=20180522);
    width: 1.23rem;
    height: 1.22rem;
    
    margin: 0 auto;
    background-size: 100%;
}
.top .goto-question{
    width: 1.35rem;
    height: 1.45rem;
    background: url(../images/goto_q.png?v=20180911) no-repeat;
    margin:0rem 0 0 0.25rem;
    background-size: 95%;
}

.login-wrap{
    width: 61%;
    margin: 1.87rem auto 0;
    background-color: #101d36;
    padding: 0 0.2rem;
    border-radius: 25px;
    text-align: center;
    height: 0.4rem;
    line-height: 0.4rem;
}
.mask {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    background-color: #000;
    opacity: 0.8;
    z-index: 2;
}
.part h2,.part p{
    text-align: center;
}
.yuyue {
    height: 12.4rem;
    overflow-x:hidden;
}
.yuyue h2{
    font-size: 0.48rem;
    font-weight: bold;
    color: #fde127;
    height: 0.72rem;
}
.yuyue span{
    color: #fff;
}
.yuyue p{
    font-size: 0.24rem;
    color: #fff;
    height: 0.54rem;
}
.yuyue p span{
    font-size: 0.36rem;
    font-weight: bold;
    color: #fde127;
    padding: 0 5px;
    line-height: 0.36rem;
}
.yuyue ul.stars {
    height: 7.5rem;
    position: relative;
}
.yuyue ul.stars li div{
    position: absolute;
}
.yuyue ul.stars li .dark{
    background: url(../images/darkstar.png); 
}
.yuyue ul.stars li .dark.on{
    animation:fade 3000ms infinite;  
    -webkit-animation:fade 800ms infinite; 
}
@keyframes fade {  
    from { opacity: 1.0; transform:scale(1, 1);}  
    50% { opacity: 0.4; transform:scale(1.2, 1.2);}  
    to { opacity: 1.0; transform:scale(1, 1);}  
}  
   
@-webkit-keyframes fade {  
    from { opacity: 1.0; }  
    50% { opacity: 0.4; }  
    to { opacity: 1.0; }  
}
.yuyue ul.stars li .light{
    background: url(../images/lightstar.png);
}
.yuyue ul.stars li.step1 .dark{
    width:0.78rem;
    height:0.73rem;
    /*background-position:-1.28rem -0.39rem;*/
    background-position: -1.98rem -0.49rem;
    left: 2.26rem;
    top: 0.99rem;
    background-size: 1137%;
}
.yuyue ul.stars li.step2 .dark{
    width:0.96rem;
    height:0.93rem;
    background-position:-4.9rem 0;
    left: 4.1rem;
    top: 0.18rem;
    background-size: 887%;
}
.yuyue ul.stars li.step3 .dark{
    width:1.41rem;
    height:1.34rem;
    background-position:-7.46rem -1.45rem;
    left: 5.10rem;
    top: 5.28rem;
    background-size: 633%;

}
.yuyue ul.stars li.step4 .dark{
    width:1.79rem;
    height:1.56rem;
    background-position:0 -2.35rem;
    left: 0.23rem;
    top: 3.87rem;
    background-size: 495%;
}
.yuyue ul.stars li.step5 .dark{
    width:2.14rem;height:2.10rem;
    background-position:-3.05rem -0.74rem;
    left: 2.58rem;
    top: 1.9rem;
    background-size: 414%;
}

.yuyue ul.stars li.step1 .light{
    width:1.10rem;height:0.75rem;
    background-position:-1.84rem -2.47rem;
    left: 2.07rem;
    top: 0.93rem;
    background-size: 639%;
}
.yuyue ul.stars li.step2 .light{
    width:1.04rem;height:0.94rem;
    background-position:-4.09rem -2.41rem;
    left: 4.07rem;
    top: 0.18rem;
    background-size:676%; 
}
.yuyue ul.stars li.step3 .light{
    width:2.03rem;height:1.4rem;
    background-position:-5.00rem -0.69rem;
    left: 4.86rem;
    top: 5.28rem;
    background-size: 346%;
}
.yuyue ul.stars li.step4 .light{
    width:1.80rem;height:1.61rem;
    background-position:-2.41rem -3.28rem;
    left: 0.23rem;
    top: 3.87rem;
    background-size: 390%
}
.yuyue ul.stars li.step5 .light{
    width:4.45rem;height:2.28rem;
    background-position:0 0;
    left: 1.50rem;
    top: 1.95rem;
    background-size: 158%;
}
.yuyue .progress{
    background-color:#0c1a33;
    width: 7rem;
    height: 0.19rem;
    border-radius: 25px;
    margin: 0 auto;
}
.yuyue .progress .bar{
    height: 0.19rem;
    width: 80%;
    background: url(../images/bar.png) repeat-x;
    border-radius: 25px;
    position: relative;
}
.yuyue .progress .bar img{
    width: 0.67rem;
    position: absolute;
    top: -0.5rem;
}
.yuyue ul.partbar{
    width: 7.2rem;
    margin: 0.3rem auto 0;
    height: 0.5rem;
}
.yuyue ul.partbar li{
    float: left;
    color: #7ca9ff;
    font-size: 0.25rem;
    font-weight: bold;
    margin-left: 0.83rem;
}
.yuyue .yuyue-btn{
    display: block;
    width: 3rem;
    height: 1rem;
    margin: 0.25rem auto 0;
    position: relative;
    z-index: 1;
}
.lottery{
    height: 9.6rem;
}
.part h2{
    font-weight: bold;
    font-size: 0.48rem;
}
.lottery h2,.join h2{
    color: #000;
    height: 0.72rem;
}
.lottery h2 span{
    color: #d05b42;
}
.part p{
    font-size: 0.2rem;
}
.lottery p,.join p{
    color: #333333;
    height: 0.6rem;
}
.lottery p span{
    color: #d05b42;
    font-weight: bold;
    font-size: 30px;
    line-height: 0.36rem;
}
.lottery p .my-award{
    color: #fff;
    background-color: #000;
    padding: 3px 20px;
    border-radius: 25px;
    margin-left: 10px;
}
.lottery .lottery-container{
    width: 5.32rem;
    margin: 0.15rem auto 0.12rem;
}
.lottery .lottery-container li{
    width:1.24rem;
    height:1.24rem;
    float: left;
    visibility: visible;
    margin-right: 0.12rem;
    margin-top: 0.06rem;
}
.lottery .lottery-container li.on{
    background-position: 0 -1.02rem;
    background-size: 454%;
}
.lottery .lottery-container li.lott4,.lottery .lottery-container li.lott8{
    margin-right: 0;
}
.lottery .lottery-container .lottery-reward{
    border: none; 
} 
.lottery .btns{
    margin: 0.4rem auto 0;
    width: 3.2rem;
}
.lottery .btns a{
    float: left;
    width: 1.55rem;
    height: 1.55rem;
    margin-left: 0.05rem;
    border-radius: 25px;
}
.lott-rules{
    width: 7rem;
    margin: 0 auto;
    color: #545454;
}
.lott-rules dt,.join .join-rules dt{
    font-size: 0.24rem;
    font-weight: bold;
    color: #000;
    line-height: 0.55rem;
}
.lott-rules dd,.join .join-rules dd{
    line-height:0.32rem;
}
.join{
    height: 11.1rem;
}
.join h2,.join p{
    color: #fff;
}
.join h2 span{
    color: #fff660;
}
.join .apply-btn{
    display: block;
    width: 3rem;
    height: 1rem;
    margin: 5.7rem auto 0;

}
.join .join-rules{
    color: #fff;
    width: 7rem;
    margin: 0.3rem auto 0;
}
.join .join-rules dt{
    color: #fff;
}
.feature{
    height: 7rem;
}
.feature h2{
    color: #333333;
}
.feature h2 span{
    color: #d05b42;
}
.feature .gallery_item img{
    width: 2.76rem;
    /*height: 4.70rem;*/
}
.feature .gallery_item{
    width: 2.76rem;
    /*height: 4.70rem;*/
}
.feature .gallery_prev,.feature .gallery_next{
    width:0.80rem;
    height:1.04rem;
    position: absolute;
    top: 50%;
    margin-top: -0.35rem;
    cursor: pointer;
    z-index: 2;
    background-size: 835%;
    transform: scale(0.6);
}
.feature .gallery_prev.swiper-button-disabled{
    background-position:-1.49rem -1.19rem;
}
.feature .gallery_prev{
    background-position:-3.03rem 0;
    left: -2rem;
}
.feature .gallery_next.swiper-button-disabled{
    background-position:-2.31rem -1.17rem;
}
.feature .gallery_next{
    background-position:-2.21rem 0;
    right: -2rem;
}
/*//gallery*/
.gallery_item{position:absolute;left:50%;top:0;z-index:100;opacity:0;-webkit-transition:all ease;-moz-transition:all ease;-ms-transition:all ease;-o-transition:all ease;transition:all ease}
.gallery_container{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;perspective:300px;-webkit-perspective:300px;position:relative;width:100%;height:100%}
.gallery_active{opacity:1;z-index:105}
.gallery_right_middle{z-index:103;opacity:1}
.gallery_left_middle{z-index:103;opacity:1}
.outer_wrap{width:3.5rem; height: 5rem;margin:0.3rem auto 0;position:relative;moz-user-select:-moz-none;-moz-user-select:none;-o-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}
.outer_wrap .gallery_container{width:100%!important;z-index:2}
.gallery_item{width:3.1rem;border: 3px solid #fff;border-radius: 25px;overflow: hidden;}
.feature .attention{
    background-color: #d05b42;
    color: #fff;
    width: 5.5rem;
    height: 0.4rem;
    text-align: center;
    line-height:0.40rem;
    margin: 0.5rem auto 0;
    border-radius: 25px;
    font-size: 14px;
}
element.style {
    transform: scale(0.702083);
    display: block;
    margin-left: -315px;
}
.boxMain {
    position: fixed;
    left: 50%;
    top: 2.5rem;
    background-color: #fff;
    border-radius: 25px;
    border: 5px solid #4c74c0;
    z-index: 3;
    padding: 0.13rem 0.15rem;
    font-size: 18px;
    color: #666;
    /*width: 5.6rem;*/
    /*margin-left: -2.8rem;*/
}
.boxMain h2 {
    font-size: 0.36rem;
    color: #4c74c0;
    text-align: center;
    border-bottom: 1px solid #d4d4d4;
    font-weight: bold;
    line-height: 0.60rem;
}
.inviteWay{
    width: 4.75rem;
    margin: 0.30rem auto 0;
}
.inviteWay a{
    float:left;
    width:0.94rem;
    height:0.94rem;
    margin-left: 0.50rem;
    background: url("../images/icons04.png");
    background-size: 711%;
}
.inviteWay a.sina{
    background-position: -3.83rem 0;

}
.inviteWay a.qzone{
    background-position: -4.78rem 0;
}
.inviteWay a.qq{
    background-position: -5.73rem 0;
}
.boxMain .boxCont .user-info input{
    border: 1px solid #d4d4d4;
    height: 0.60rem;
    text-align: center;
    font-size: 0.20rem;
}
input::-webkit-input-placeholder {
    color:#d4d4d4;
    font-size: 0.24rem;
    text-align: center;

}
input:-moz-placeholder {
    color:#d4d4d4;
    font-size: 0.24rem;
    text-align: center;

}
input::-moz-placeholder {
    color:#d4d4d4;
    font-size: 0.24rem;
    text-align: center;

}
input:-ms-input-placeholder {
    color:#d4d4d4;
    font-size: 0.24rem;
    text-align: center;

}
#telBox{
    width: 4.35rem;
}
#codeBox{
    width: 2.80rem;
}
.boxCont button.send{
    float: right;
}
#submitBtn{
    display: block;
    margin: 20px auto 0;
}
.boxCont{
    width:5rem;
}
.boxCont button{
    width: 1.40rem;
    height:0.60rem;
    background-color: #4c74c0;
    font-size: 0.18rem;
    color: #fff;
    border: none;
    border-radius: 20px;
}
.boxCont .declare{
    font-size: 0.18rem;
    margin: 0.2rem;
}
.boxCont .code-wrap{
    margin-top: 0.2rem;
}
.boxCont .user-info {
    width: 4.36rem;
    margin: 0 auto;
}
.video-box {
    position: fixed;
    width: 100%;
    left: 50%;
    top: 30%;
    z-index: 100;
}
table td{
    font-size: 0.2rem;
    text-align: center;
}
.applyBox{
    color: #999999;
}
.applyBox .boxCont{
    padding-top: 0.1rem;
}
.applyBox .boxCont li{
    margin-top: 0.15rem;
}
.applyBox .boxCont li > input{
    margin-left: 0.2rem;
}
.applyBox .boxCont input{
    border: 1px solid #d4d4d4;
    height: 0.4rem;
    text-align: center;
    font-size: 0.2rem;
}
.applyBox p{
    font-size: 0.18rem;
    color: #666;
}
.applyBox label{
    float: left;
    line-height: 0.35rem;
    margin-left: 0.15rem;
    font-size: 0.18rem;
}
.applyBox label input{
    float: left;
}
.applyBox #wj_submitBtn{
    display: block;
    background-color: #232323;
    border-radius: 25px;
    margin: 0.2rem auto 0;
}