a{
    text-decoration:none;
}
html,
body {
  margin:0 auto;
  height: 100%;
  font-size: 14px;
  color:#333;
  cursor: pointer;
}

.response-img{
    width: 100%;
    height: auto;
}
.text-center{
    text-align: center;
}
.text-left{
    text-align: left;
}

/*  --------------------------------------------------
    Horizontal_screen
    -------------------------------------------------- */ 
#horizontal_screen{
    width: 100%;
    height:100%;
    display:none;
}
@media screen and (orientation: landscape){
    #horizontal_screen{
        display: inline;
        text-align: center;
        font-size: 20px;
        padding-top: 1rem;
        background-color:#FFF;
        position:absolute;
        z-index: 999;
    }
    .mian{
        display:none;
    }
}
/*  --------------------------------------------------
    End Horizontal_screen
    -------------------------------------------------- */ 


/*  --------------------------------------------------
    Reveal Modals
    -------------------------------------------------- */     
.reveal-modal-bg { 
    position: fixed; 
    height: 100%;
    width: 100%;
    background: #000;
    background: rgba(0,0,0,.8);
    z-index: 100;
    display: none;
    top: 0;
    left: 0; 
    box-sizing:content-box;
}

.reveal-modal {
    visibility: hidden;
    top: 50px; 
    left: 50%;
    margin-left: -300px;
    width: 520px;
    /*background: #eee url(../modal-gloss.png) no-repeat -200px -80px;*/
    position: absolute;
    z-index: 101;
    padding: 10px 10px 34px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    box-sizing:content-box;
/*    -moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
    -box-shadow: 0 0 10px rgba(0,0,0,.4);*/
}
    
.reveal-modal.small { width: 240px; margin-left: -130px;}
.reveal-modal.medium { width: 400px; margin-left: -240px;}
.reveal-modal.large { width: 600px; margin-left: -340px;}
.reveal-modal.xlarge { width: 800px; margin-left: -440px;}

.reveal-modal .close-reveal-modal {
    font-size: 16px;
    line-height: 24px;
    position: absolute;
    top: 15px;
    right: 0px;
    color: #fff;
    text-shadow: 0 -1px 1px rbga(0,0,0,.6);
    font-weight: bold;
    cursor: pointer;
    background-color: #00b8e6;
    height: 24px;
    width: 24px;
    border-radius: 25px;
    text-align: center;
     text-decoration: none;
} 

/*  --------------------------------------------------
    End Reveal Modals
    -------------------------------------------------- */   
.gbc_modal_title,.gbc_info_modal_title{
    position: absolute;
    right: 0;
    left: 0;
    margin: 0 auto;
    margin-top: -42px;
    text-align: center;
    color:white;
    font-size: 20px;
}
.gbc_modal_text{
    font-size: 18px;
    padding:20px;
    color:#f52636;
}
.gbc_modal_text .modal-red{
    color:#f52636;
}
.gbc_modal_content,.gbc_info_modal_content{
    margin:0;
    background-color:#f9fde1;
    text-align:center;
    border-radius: 0 0 2% 2%;
}
.gbc_modal_btn,.gbc_info_modal_btn{
    background: url('modal_btn_bg.png') no-repeat;
    background-position: 50% 50%;
    height: 23px;
    font-size: 20px;
    color: white;
    padding:20px;
    box-sizing:content-box;
}
.gbc_modal_img{
    display: none;
}

#end_modal{
    /*background: url('endpage_bg.png') no-repeat;*/
    background-size: 100% 100%;
    height: 400px;
    top: 50px;
}
#end_modal .img{
    position: absolute;
    width: 90%;
    left: 0;
    right: 0;
    top: 10%;
    margin: 0 auto;
}


.gbc_info_modal_head,.gbc_modal_head_1,.gbc_modal_head_0{width: 240px;}
@media (max-width : 320px) and (min-width: 320px) {
    .reveal-modal{padding-top:0;}
    .reveal-modal.small { width: 200px; margin-left: -110px;}
    .gbc_info_modal_head,.gbc_modal_head_1,.gbc_modal_head_0{width: 200px;}
}

/*  --------------------------------------------------
      Page Index 
    -------------------------------------------------- */  
.landpage{
    background: url('landpage_bg.png') no-repeat;
    background-size: 100% 100%;
    height: 100%;
}

.landpage .logo{
    position: absolute;
    width: 24%;
    left: 8%;
    top: 15%;
}
.landpage .title{
    position: absolute;
    width: 74%;
    left: 0;
    right: 0;
    top: 25%;
    margin: 0 auto;
}

.landpage .title_small{
    position: absolute;
    width: 70%;
    left: 0;
    right: 0;
    top: 47%;
    margin: 0 auto;
}

.landpage .time{
    position: absolute;
    width: 60%;
    left: 0;
    right: 0;
    top: 55%;
    margin: 0 auto;
}

.landpage .btn{
    position: absolute;
    width: 54%;
    left: 0;
    right: 0;
    bottom: 12%;
    margin: 0 auto;
}

.landpage .title{
    -webkit-animation: bounceIn 1.5s 0.5s both;
}
.landpage .title_small{
    -webkit-animation: fadeInLeft 1.5s 1s both;
}
.landpage .time{
    -webkit-animation: fadeInRight 1.5s 1s both;
}
.landpage .btn{
    -webkit-animation: fadeInUp 1.5s 1s both,jello 1s 2.5s both;
}
@media (max-width : 360px) and (min-width: 320px) {
.landpage .title_small{
    top:49%;
}
.landpage .time{
    top:57%;
}
}

@media (max-width : 375px) and (min-width: 375px) {
}

@media (max-width : 768px) and (min-width: 414px) {
.landpage .title_small{
    top:52%;
}
.landpage .time{
    top:62%;
}
}
/*  --------------------------------------------------
      End Page Index 
    -------------------------------------------------- */  

/*  --------------------------------------------------
      Page Lottery
    -------------------------------------------------- */  
.lottery{
    background: url('lottery_bg.png') no-repeat;
    background-size: 100% 100%;
    height: 100%;
}
.lottery .logo{
    position: absolute;
    width: 22%;
    left: 8%;
    top: 15%;
}
.lottery .title{
    position: absolute;
    width: 60%;
    left: 0;
    right: 0;
    top: 19%;
    margin: 0 auto;
}

.lottery .myprizes_btn{
    position: absolute;
    width: 11%;
    right: 6%;
    top: 11%;
}

#lottery{
    background: url('lottery_squares_bg.png') no-repeat;
    background-size: 80% 80%;
    background-position: 50% 50%;
    position: absolute;
    top: 40%;
    width:252px;
    height:210px;
    left: 0;
    right: 0;
    margin:0px auto;
}

#lottery table td{
    position:relative;
    width:70px;
    height:56px;
    text-align:center;
    color:#333;
    font-index:-999
}
#lottery table td img{
    display:block;
    width:70px;
    height:56px;
    padding:7px;
    box-sizing: content-box;
}

#lottery table td.active .mask{
    display:block;
}
#lottery .lottery_mask img,#lottery .lottery_mask .mask img{
    height: 70px;
}
.mask{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    display:none;
}

.lottery .lucky_times{
    position: absolute;
    top: 71%;
    left: 0;
    right: 0;
    margin:0px auto;
}

.lottery .luckyUser{
    position: absolute;
    top: 75%;
    left: 0;
    right: 0;
    margin:0px auto;
}

.luckyUser{ z-index:1;width:80%; height:30px; overflow:hidden;position:fixed;top:-5px;}
.luckyUser li{ width:100%; height:50px; line-height:50px; color:#555;text-shadow:2px 2px 2px white;}
.luckyUser ul{
    list-style-type:none;
    -webkit-padding-start: 10px;
    -webkit-padding-end: 10px;
}
.luckyUser .prize{
    color:#f52636;
}

@media screen and (max-width:375px){
.lottery .luckyUser ul{margin-left:-10px;}
}  

.lottery .lucky_list{
    position: absolute;
    width: 36%;
    top: 81%;
    left: 0;
    right: 0;
    margin:0px auto;
}

.lottery .activity_btn{
    position: absolute;
    width: 36%;
    bottom: 3%;
    left: 5%;
    margin:0px auto;
}

.lottery .member_center_btn{
    position: absolute;
    width: 36%;
    bottom: 3%;
    right: 5%;
    margin:0px auto;
}

.lottery .myprizes_btn{
    -webkit-animation: pulse 1s infinite linear;
}

@media (max-width : 360px) and (min-width: 320px) {
    .lottery .title {
        width: 58%;
    }
    #lottery{   
        top:38%;
        width: 222px;
        height: 180px;
    }
    #lottery table td{
        width:60px;
        height:46px;
    }
    #lottery table td img {
        display: block;
        width: 60px;
        height: 46px;
    }
    #lottery .lottery_mask img,#lottery .lottery_mask .mask img{
        height: 60px;
    }
    .luckyUser{
        width: 100%;
    }
    .lottery .lucky_list{
        top:83%;
    }
}

@media (max-width : 413px) and (min-width: 375px) {
    #lottery{ 
        top:37%;
    }
}

@media (max-width : 800px) and (min-width: 415px) {
    .lottery .title{
        top:15%;
    }
    .lottery .logo{
        width: 20%;
    }
    #lottery{  
        top:39%;
        width: 372px;
        height: 330px;
    }
    #lottery table td{
        width:110px;
        height:96px;
    }
    #lottery table td img {
        display: block;
        width: 110px;
        height: 96px;
    }
    #lottery .lottery_mask img,#lottery .lottery_mask .mask img{
        height: 110px;
    }
}

/*  --------------------------------------------------
      End Page Lottery
    -------------------------------------------------- */  


/*  --------------------------------------------------
      Page MyPrizes 
    -------------------------------------------------- */  
.myprizes{
    background: url('myprizes_bg.png') no-repeat;
    background-size: 100% 100%;
    height: 100%;
    text-align: center;
}

.myprizes .btn{
    /*position: absolute;*/
    width: 40%;
    left: 0;
    right: 0;
    bottom: 5%;
    margin: 0 auto;
}

.myprizes .title{
    width: 60%;
    padding-top: 10%;
}
.myprizes .myprizes_list{
    margin-top: -3px;
}
.myprizes .myprizes_item{
    position: relative;
    height: 82px;
    margin-bottom: 10px;
    margin-left: 10%;
    margin-right:10%;
}
.myprizes .myprizes_item table{
    width: 100%;
    height: 100%;
}
.myprizes_item .myprizes_type{
    position: relative;
    width: 1%;
    left: 60%;
    color: white;
}
.myprizes_item .myprizes_value{
    position: relative;
    font-size: 24px;
    left: -33%;
    color:#f52636;
}
.myprizes_item .btn{
    position: relative;
    width: 90%;
    left: -40%;
    padding-top: 4%;
}

.myprizes .xu{
    background: url('myprizes_item_x.png') no-repeat;
    background-size: 100% 100%;
}
.myprizes .xu_u{
    background: url('myprizes_item_x_u.png') no-repeat;
    background-size: 100% 100%;
}

.myprizes .shi{
    background: url('myprizes_item_s.png') no-repeat;
    background-size: 100% 100%;
}
.myprizes .shi_u{
    background: url('myprizes_item_s_u.png') no-repeat;
    background-size: 100% 100%;
}
.shi .myprizes_type,.shi .myprizes_value,.shi_u .myprizes_type,.shi_u .myprizes_value{
    display: none;
}

.xu_u .myprizes_type,.xu_u .myprizes_value{
    color:#ccc;
}

.myprizes .preservation{
    color:#555;
    padding:20px;
}
.myprizes .preservation a{
    color:#f52636;
    text-decoration: underline;
}

/*  --------------------------------------------------
      End Page MyPrizes 
    -------------------------------------------------- */  


/*  --------------------------------------------------
      Page LuckyList
    -------------------------------------------------- */  
.luckylist{
    background: url('luckylist_bg.png') no-repeat;
    background-size: 100% 100%;
    height: 100%;
}

.luckylist .title{
    position: absolute;
    width: 60%;
    left: 0;
    right: 0;
    top: 16%;
    margin: 0 auto;
}

.luckylist #wrapper{
    top:23%;
    height: 65%;
    margin-top: 20px;
}

.luckylist .btn{
    position: fixed;
    width: 47%;
    bottom: 2%;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.luckylist #scroller li {
    padding: 0 10px;
    height: 40px;
    line-height: 40px;
    border-bottom: none;
    border-top: none;
    background-color: transparent;
   /*  font-size: 16px; */
    text-align: center;
}
/*  --------------------------------------------------
      End Page LuckyList 
    -------------------------------------------------- */ 



/*  --------------------------------------------------
      Page Activity 
    -------------------------------------------------- */
.activity{
    background: url('activity_bg.png') no-repeat;
    background-size: 100% 100%;
   /*  height: 100%; */
    text-align: center;
    padding: 0 20px 0 20px;
    font-family: "SimHei";
}

.activity .title{
    width: 100%;
    margin-top: 16%;
}

.activity .activity_text{
    text-align: left;
}

.activity .btn{
    width: 40%;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.activity .prizes{
    width: 90%;
}

/*  --------------------------------------------------
      End Page Membercenter 
    -------------------------------------------------- */ 

    /*  --------------------------------------------------
      Page Membercenter 
    -------------------------------------------------- */
.membercenter{
    background: url('membercenter_bg.png') no-repeat;
    background-size: 100% 100%;
 /*    height: 100%; */
    text-align: center;
    padding: 0 20px 0 20px;
    font-family: "SimHei";
}

.membercenter .title{
    width: 80%;
    margin-top: 20%;
}

.membercenter .btn{
    width: 40%;
    left: 0;
    right: 0;
    margin: 0 auto;
}


/*  --------------------------------------------------
      End Page Activity 
    -------------------------------------------------- */ 

    /*  --------------------------------------------------
      Page Endpage 
    -------------------------------------------------- */  
.endpage{
    background: url('endpage_bg.png') no-repeat;
    background-size: 100% 100%;
    height: 100%;
}

.endpage .title{
    position: absolute;
    width: 70%;
    left: 0;
    right: 0;
    top: 18%;
    margin: 0 auto;
}

.endpage .txt{
    position: absolute;
    width: 70%;
    left: 0;
    right: 0;
    top: 43%;
    margin: 0 auto;
}

    /*  --------------------------------------------------
      End Page Endpage 
    -------------------------------------------------- */