.text-red{color: #f9601e !important;padding:0 .4rem;}
.text-white{color: #fff !important;}
.text-gray{color: #999;}
.bg-red{background-color: #f9601e !important;padding:.1rem .4rem;border-radius: .2rem;margin-right: 0.5rem;}
.order-number{
    display: inline-block;
    border-radius: 100%;
    width: 1.4rem;
    height: 1.4rem;
    vertical-align: middle;
    background-color: #f9601e;
    color: #fff;
    font-size: 1.2rem;
    text-align: center;
    margin-right: 0.5rem;
    margin-bottom: 0.2rem;
}
.ico{
    float: left;
    width: 1.2rem;
}
.ico-box{
    margin-left: 1.7rem;
    display: block;
}
.scroll-body{
    max-height:25rem;overflow:hidden;overflow-y:scroll;
}
.modal-style h1{
    font-size: 1.8rem;
    color: #e32a36;
    text-align: center;
    margin: 1rem 0 0;
}
.modal-style h1 img{
    width: 3rem;
    vertical-align: middle;
    margin-bottom: 0.6rem;
    margin-right: 0.6rem;
}
.modal-style .sub-tit{
    text-align: center;
    margin: 1rem 0;
	font-size: 1.5rem;
}
.modal-style form{
    display: block;
}
.modal-style form.join-from p{
    margin: 0 0 1rem;
    border: .1rem solid #eee;
    padding: .6rem .2rem;
    border-radius: .4rem;
}
.modal-style form.join-from .icon{
    float: left;
    width: 3rem;
    height: 1.6rem;
    text-align: center;
    border-right: .1rem solid #eee;
}
.modal-style form.join-from .icon img{
    max-height: 100%;
}
.modal-style form.join-from p .input{
    display: block;
    margin-left: 4rem;
    height: 1.6rem;
}
.modal-style form.join-from p input{
    width: 100%;
    height: 100%;
    font-size: 1.4rem;
    border: 0;
    outline: none;
    background-color: transparent;
    -webkit-appearance:none;
}
.modal-footer a{
    display: block;
    position: relative;
}
.modal-footer a span{
    position: absolute;
    width: 100%;
    height: 74%;
    top: 0;
    left: 0;
    right: 0;
    font-size: 2rem;
    color: #fff;
    text-align: center;
    line-height: 350%;
}
.rule-modal{
    line-height: 1.6;
    color: #333;
}
.rule-modal p{
    margin: .8rem 0;
}
.rule-tab{
    list-style: none;
    display: block;
    overflow: hidden;
    padding: 0;
    margin: 2rem 0 1rem;
    font-size: 1.5rem;
}
.rule-tab li{
    float: left;
    width: 25%;
    text-align: center;
}
.rule-tab li label{
    display: block;
    font-weight: 700;
}
.rule-tab li span{
    display: block;
    margin: 0 auto;
    width: 3rem;
    height: 3rem;
    background-repeat: no-repeat;
    background-size: 100%;
    margin-bottom: .6rem;
}
.rule-tab li span.rule1{
    background-image: url(../images/rule-tab-1.jpg);
}
.rule-tab li span.rule2{
    background-image: url(../images/rule-tab-2.jpg);
}
.rule-tab li span.rule3{
    background-image: url(../images/rule-tab-3.jpg);
}
.rule-tab li span.rule4{
    background-image: url(../images/rule-tab-4.jpg);
}
input#rule1:checked ~ .rule-tab li:first-child,
input#rule2:checked ~ .rule-tab li:nth-child(2),
input#rule3:checked ~ .rule-tab li:nth-child(3),
input#rule4:checked ~ .rule-tab li:last-child{
    color: #e32a36 !important;
}
input#rule1:checked ~ .rule-tab li:first-child span.rule1,
input#rule2:checked ~ .rule-tab li:nth-child(2) span.rule2,
input#rule3:checked ~ .rule-tab li:nth-child(3) span.rule3,
input#rule4:checked ~ .rule-tab li:last-child span.rule4{
    background-position: bottom !important;            
}
.tab-content div{
    display: none;
}
input#rule1:checked ~ .tab-content div:first-child,
input#rule2:checked ~ .tab-content div:nth-child(2),
input#rule3:checked ~ .tab-content div:nth-child(3),
input#rule4:checked ~ .tab-content div:last-child{
    display: block !important;
}
.tab-arrow{
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 0;
    border-top: .1rem solid #eee;
    margin: 1.2rem 0;
    line-height: 0;
    font-size: 0;
}
.tab-arrow img{
    position: absolute;
    width: 1.6rem;
    bottom: 0;
    left: 9.5%;
    transition: left .2s;
    -moz-transition: left .2s;
    -webkit-transition: left .2s;
    -o-transition: left .2s;
}
input#rule1:checked ~ .tab-arrow img{
    left: 9.5% !important;
} 
input#rule2:checked ~ .tab-arrow img{
    left: 34.5% !important;
} 
input#rule3:checked ~ .tab-arrow img{
    left: 59.5% !important;
} 
input#rule4:checked ~ .tab-arrow img{
    left: 84.5% !important;
}
.tab-content{
    max-height: 24rem;
    overflow-y: scroll;
    font-size: 1.5rem;
}
.redbag-modal{
    position: relative;
}
.open-redbag{
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    left: 50%;
    top: 58%;
    margin-left: -4rem;
    margin-top: -4rem;
    z-index: 1;
}
.open-redbag input{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 2;
}
.open-redbag img{
    transition: transform 1s;
    transform-style: preserve-3d;
}
.open-redbag input:checked ~ img{
    transform: rotateY(720deg);
}
.got-redbag{
    position: absolute;
    z-index: 1;
    width: 100%;
    color: #dd292a;
    top: 24%;
    font-size: 1.4rem;
}
.got-redbag h1{
    font-size: 2.6rem;
    font-weight: 700;
    margin: 0 0 .5rem;
}
.got-redbag p{
    margin: 0 0 .5rem;
}
.got-redbag big{
    font-size: 4.6rem;
    font-weight: 700;
}
.got-redbag big sub{
    font-size: 1.4rem;
    font-weight: 400;
    vertical-align: middle;
    padding-left: 1rem;
}

#pwdModal .dialog-frame{width: 70%; max-width: 70%;}
.pwd-modal{text-align: center;}
.pwd-modal p{ text-align: left; padding:0 1rem; font-size: 1.4rem; line-height: 1.6; }

.red-modal h2{ font-size: 1.6rem; font-weight:normal; margin-top: -3px; }
.red-modal ul{ margin: 0; padding:0; margin-top: -1rem; }
.red-modal li{ margin: 0; padding:.5rem 0; position: relative; display: flex;flex-wrap: wrap; list-style: none; border-bottom: solid 1px #eee;}
.red-modal li span.icon-le{ display: block; width: 3.2rem;height: 3.2rem;margin: .3rem .4rem 0 0;}
.red-modal li span.icon-le img{ width:100%; }
.red-modal li p{ font-size: 1.4rem;max-width: 16rem;overflow: hidden;}
.red-modal li a{ display: block; background:linear-gradient(to right,#fd8b03,#fd503b);position: absolute; right: 0; top: 1.1rem; color: #fff;  padding: .8rem 1.6rem; text-decoration:none; border-radius: 20px;font-size: 1.4rem;}
.red-modal li a.active{ background: #afafaf; }
.red-modal .beizhu{ line-height: 1.8; margin-bottom: 0; }

#saveModal .dialog-frame,#prizeModalFun .dialog-frame{ width: 95%; max-width: 95%; border-radius: 0px;}
.save-modal{width: 100%; height: 100%; box-sizing: border-box; }
.screen{ position: relative; max-width: 100%; min-height: 576px;background:url(/images/savebg.jpg)no-repeat bottom center #fff; background-size: 100% auto;}
.screen::before{ border: solid 1px #feb491; content: ""; display: block; position: absolute; top: 5px; left: 5px; bottom: 5px; right: 5px;}
.screen-box{ position: absolute; top: 4.5%; width:100%; left: 0; right: 0; bottom: 0; }
.hd-date{background:url(/images/maisui.png)no-repeat bottom center; min-height: 48px; margin: 5% 0; background-size: 60% auto;}
.hd-date h2{ font-size: 1.6rem; color: #fd4e3d;margin: .5rem 0; font-weight: normal; }
.hd-date p{ margin:0;font-size: 1.2rem; color: #999; padding-top: .5rem; }
.screen-box .my-pic{ width:100px; height:100px; margin:.5rem auto;}
.screen-box .my-pic span.upic{ position: absolute; top: 6px; left: 0;border-radius: 50%;width: 100%; height: auto;}
.screen-box .my-pic span.upic>img{ width:100%; height: 100%; border-radius: 50%;}
.screen-box .my-pic span.ubg{ position: absolute; top: 0; left: 0; width:100px; height:100px;}
.btn-result{ margin: 0 3rem; font-size: 1.5rem; padding:.8rem 0; background:url(/images/btn-1.png) no-repeat; background-size:100% 100%;}
.btn-result strong{ font-size: 1.8rem; }

.saveBtn{ text-align:center; display: block; }
.saveBtn>img{ width:70%; margin-top:1.5rem;}

.my-grid{/*background:url(/images/line.png)no-repeat bottom center; background-size: 95%;*/ display: flex;flex-wrap: wrap; margin: 0 1rem;}
.my-grid .grid-row{display: inline-block; position: relative; width: 25%; padding: 2rem 0;}
.my-grid .grid-row::before{ content: ""; display: block; width: 1px; height: 40px; background: #e2e2e2; position: absolute; right: 0;}
.my-grid .grid-row:last-child::before{width: 0;}
.my-grid .grid-row:first-child::before{ right: 5px; }
.my-grid .grid-row:nth-child(2)::before{ right: -5px; }
.my-grid .grid-row h3{font-size: 1.4rem; color: #333;  margin: 0; padding-bottom: 1rem;}
.my-grid .grid-row p{ font-size: 1.6rem; margin: 0;}

.myfot{ display: flex;margin:0 1.5rem 0;text-align: center;}
.myfl{ width: 100%;}
.myfl p{display: flex;flex-wrap: wrap; margin-bottom: 1rem;}
.myfl p span{ width: 50%; display: inline-block;text-align: left;font-size: 1.5rem; color: #333; white-space: nowrap;}
.myfl p span img{ vertical-align: middle; width: 20%; margin-right: 5px; position: relative; top:-1px;}
.myfl p span strong{ color: #f64426;}


.mylogo{ width: 30%;position: absolute; left: 1rem; bottom: 1rem;}
.myfr{ width: 30%;position: absolute; right: 1rem; bottom: 1rem;}

/*�콱*/
.prizescreen{ position: relative; max-width: 100%; min-height: 545px;background:#fff;}
.prizescreen .screen-box{ top: 1.5rem;}
.prizescreen .screen-box .hd-date{ margin: 0 0 4% 0;}
.prizescreen .my-grid .grid-row{ padding-bottom: 0; padding-top: 1.5rem;}
.prizescreen .my-grid h3{ color: #999;}
.prizescreen .my-grid-1{background:url(/images/line.png)no-repeat bottom center; background-size: 95%; display: flex;flex-wrap: wrap; margin: 0 1rem;}
.prizescreen .my-grid-1 .grid-row-1{display: inline-block;width: 33.3333%; color: #333;padding-bottom: .5rem; font-size: 1.2rem;}
.prizescreen .my-grid-1 .grid-row-1 p img{ width: 15%; vertical-align: middle; position: relative; top: -2px; margin-right: 1%;}
.prizescreen .myfot{ display: block;}
.jine-wz{ width: 80%; margin: 0  auto; padding: 2rem 0 1rem; text-align: center;}
.prizescreen ul{ margin: 0; padding:0; width: 100%;}
.prizescreen li{ margin: 0; position: relative; display: flex;flex-wrap: wrap; list-style: none;}
.prizescreen li span.icon-le{ display: block; width: 3.2rem;height: 3.2rem;margin: .3rem .4rem 0 0;}
.prizescreen li span.icon-le img{ width:100%; }
.prizescreen li p{ text-align: left; color: #333; font-size: 1.4rem;width: 60%;overflow: hidden;}
.prizescreen li a{ display: block;position: absolute; background: #afafaf;  width:45px; right: .5rem; top: 1rem; color: #fff;  padding: .5rem 1rem; text-decoration:none; border-radius: 20px;font-size: 1.4rem;}
.prizescreen li a.active{ background:linear-gradient(to right,#fd8b03,#fd503b);}
/*�����*/
#endModal .dialog-frame{width: 70%; max-width: 70%; }
#endModal .closed{ width: 2em; height: 2em; top: 5px; right: 5px;}
#endModal .end-ibox{text-align: center; position: absolute; top: 3%; left:0; right: 0;}
#endModal .end-ibox h1{ margin: 0; font-size: 1.8rem; color: #ee1f02; margin-top: -10%;}
#endModal .end-ibox p{ margin: 0;font-size: 1.5rem; padding-top: 5px; color: #333;}
.end-btn{ margin-top: 14%;}
.end-btn img:first-child{ margin-bottom: 5%;}

#yzModalFun .dialog-frame{width: 80%; max-width: 80%; }
#yzModalFun .closed{ width: 2em; height: 2em; top: 5px; right: 5px;}
#yzModalFun .end-ibox{text-align: center; position: absolute; top: 6%; left:0; right: 0;}
#yzModalFun .end-ibox h1{ margin: 0; font-size: 1.8rem; color: #ee1f02; padding-top: 3%;}
#yzModalFun .end-ibox p{ margin: 0;font-size: 1.5rem; line-height: 1.5; padding-top: 3%; color: #333;}

/**�ҽ�**/
#cashModalFun .dialog-frame{ width: 75%;}
#cashModalFun .toptiped{ text-align: center;}
#cashModalFun .toptiped h1{ font-size: 1.6rem; margin-top: -10px; color: #333;}
#cashModalFun .toptiped h1 span{ color: #e32a36;}
#cashModalFun .toptiped h1 strong{ font-size: 24px; font-weight: normal; margin: 0 .5rem;}
#cashModalFun .toptiped p{ font-size: 1.4rem; line-height: 1.4; text-align: left;}
#cashModalFun .toptiped p img{ position: relative; top: 3px; margin-right: 5px;}
#cashModalFun .dialog-frame .modal-footer{ text-align: center;}
#cashModalFun .dialog-frame .diy-modal-body{ padding-bottom: 0;}

.yzmput{ position: relative;}
.yzmput input{ width: 50%;}
.yzmput button{position: absolute;
    right: 2px; border: none;
    top: -4px;
    background: #6f6f6f;
    color: #fff; border-radius: 20px;
    padding: 6px 10px 5px 10px;
	outline: none;
}
.sendyzm:disabled{ cursor: default; background: #ccc; }