tp3_activity/h5v2/yd20191203/css/page.css

/* 
* @Author: Wang
* @Date:   2019-12-03 16:53:40
* @Last Modified by:   Marte
* @Last Modified time: 2019-12-06 14:17:46
*/
html, body, ul, li, p, h1, h2, h3, h4, h5, h6, form, img { margin:0; padding:0; }
img,input,button { border:none; padding:0;margin:0;outline-style:none; }
ul{ list-style:none; }
iframe{display:none;}
input { padding-top:0; padding-bottom:0; font-family: "SimSun","Microsoft YaHei";}
select, input { vertical-align:middle;}
select, input{ font-size:12px; margin:0; }
img {border:0; vertical-align:middle; display:block;}
body { color:#666;background:#fff;}
h1,h2,h3,h4,h5,h6 {text-decoration:none;font-weight:normal;font-size:100%;}
s,i,em{font-style:normal;text-decoration:none;}
.fl {float:left;}
.fr {float:right;}

html {
    width: 1280px;
    height: 720px;
    margin: 0 auto;
}
body{
    font-size:20px;
    font-family:'Microsoft Yahei;Arial';
    color: #f1f1f1;
    background: url('../img/page_01.jpg') no-repeat center;
    background-attachment: fixed;
    background-size: 100%;
    overflow: hidden;
    width:1280px;
    height:720px;
    margin: 0 auto;
}

#content{
    width:1280px;
    height:720px;
    margin: 0 auto;
}

.gameNum{
    position: absolute;
    top: 654px;
    left: 560px;
    width: 130px;
    height: 31px;
    background: url('../img/timesTips.png') no-repeat 0 0;
}

.gameNum span{
    display: inline-block;
    font-weight: 500;
    font-size: 28px;
    position: absolute;
    left: 108px;
    top: -3px;
    color: #cffefe;
}

.boxGroup{
    width: 780px;
    height: 400px;
    position: relative;
    margin-top: 230px;
}

.boxGroup .box{
    width: 194px;
    height: 197px;
    background: url('../img/btn_box_def.png') no-repeat center;
    position: absolute;
    top: 0;
    left: 0;
}

.boxGroup .box_1{
    left: 70px;
}
.boxGroup .box_2{
    left: 274px;
}
.boxGroup .box_3{
    left: 478px;
}
.boxGroup .box_4,.boxGroup .box_5,.boxGroup .box_6,.boxGroup .box_7{
    top: 190px;
}
.boxGroup .box_5{
    left: 190px;
}
.boxGroup .box_6{
    left: 380px;
}
.boxGroup .box_7{
    left: 570px;
}

.boxGroup .current{
    background: url('../img/btn_box_sel.png') no-repeat center;
}


.pageLeft,.btnGroup{
    position: relative;
    width: 250px;
    height: 100%;
}
.pageLeft .myBox_btn{
    width: 220px;
    height: 145px;
    background: url('../img/btn_mh_def.png') no-repeat center;
    position: absolute;
    bottom: 0;
    left: 0;
}

.pageLeft .current{
    background: url('../img/btn_mh_sel.png') no-repeat center;
}


.btnGroup .page_btn{
    width: 227px;
    height: 91px;
    position: absolute;
    top: 26px;
    left: -10px;
}
.btnGroup .pb_1{
    background: url('../img/btn_fh_def.png') no-repeat center;
}

.btnGroup .pb_1.current{
    background: url('../img/btn_fh_sel.png') no-repeat center;
}
.btnGroup .pb_2{
    top: 90px;
    background: url('../img/btn_gz_def.png') no-repeat center;
}

.btnGroup .pb_2.current{
    background: url('../img/btn_gz_sel.png') no-repeat center;
}

.btnGroup .pb_3{
    top: 156px;
    background: url('../img/btn_dh_def.png') no-repeat center;
}

.btnGroup .pb_3.current{
    background: url('../img/btn_dh_sel.png') no-repeat center;
}

.btnGroup .order_btn,#othersProduct,#oursProduct{
    width: 220px;
    height: 150px;
}

.btnGroup .order_btn{
    position: absolute;
    bottom: 0;
    left: 0;
}

.btnGroup .ob_1,#oursProduct{
    background: url('../img/btn_ours_def.png') no-repeat center;
}

.btnGroup .ob_1{
    bottom:146px;
}
.btnGroup .ob_1.current,#oursProduct.current{
    background: url('../img/btn_ours_sel.png') no-repeat center;
}


.btnGroup .ob_2,#othersProduct{
    background: url('../img/btn_others_def.png') no-repeat center;
}
.btnGroup .ob_2.current,#othersProduct.current{
    background: url('../img/btn_others_sel.png') no-repeat center;
}

.btnGroup .ob_1.hasOrder,#oursProduct.hasOrder{
    background: url('../img/btn_ours_hasOrder.png') no-repeat center;
}
.btnGroup .ob_2.hasOrder,#othersProduct.hasOrder{
    background: url('../img/btn_others_hasOrder.png') no-repeat center;
}


.popup{
    width: 1280px;
    height: 720px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99; 
    visibility: hidden;
}

#rulesPopup{
    background: url('../img/page_02.png') no-repeat center;
}

#myBoxPopup{
    background: url('../img/page_03.png') no-repeat center;
}

#exchangePopup{
    background: url('../img/page_04.png') no-repeat center;
}
#unExchangePopup{
    background: url('../img/page_13.png') no-repeat center;
}

#winToyPopup{
    background: url('../img/page_10.png') no-repeat center;
}

#unWinToyPopup{
    background: url('../img/page_05.png') no-repeat center;
}
#unWinToyVipPopup{
    background: url('../img/page_06.png') no-repeat center;
}

#noChancePopup{
    background: url('../img/page_07.png') no-repeat center;
}

#noChanceVipPopup{
    background: url('../img/page_08.png') no-repeat center;
}

#CollectedSuccessPopup{
    background: url('../img/page_09.png') no-repeat center;
}

#markDownPopup{
     background: url('../img/page_12.png') no-repeat center;
}


.rulesBtn,.myBoxBtn,.unExchangeBtn,.confirm,.cancel,.markDownBtn,.unWinToyVipBtn,.runOutBtn,.submittedBtn,.timeOutBtn{
    width: 227px;
    height: 91px;
    /*background: url('../img/btn_qd_def.png') no-repeat center;*/
    position: absolute;
    top: 590px;
    left: 524px;
}

.rulesBtn.current,.myBoxBtn.current,.unExchangeBtn.current,.confirm.current,.markDownBtn.current,.unWinToyVipBtn.current,.runOutBtn.current,.submittedBtn.current,.timeOutBtn.current{
    background: url('../img/btn_qd_sel.png') no-repeat center;
}

#phone{
    width: 331px;
    height: 71px;
    position: absolute;
    top: 283px;
    left: 667px;
    line-height: 71px;
    font-size: 26px;
    text-align: center;
}

#phone.current{
    background: url('../img/input.png') no-repeat center;
}

.confirm{
    left: 400px;
    background: url('../img/btn_qd_def.png') no-repeat center;
}

.unWinToyVipBtn{
    background: url('../img/btn_qd_def.png') no-repeat center;
}

.cancel{
    left: 650px;
    background: url('../img/btn_qx_def.png') no-repeat center;
}

.cancel.current{
    background: url('../img/btn_qx_sel.png') no-repeat center;
}

#keyBoard{
    width: 340px;
    height: 110px;
    position: absolute;
    top: 364px;
    left: 674px;
}

.phoneNum{
    float: left;
    font-size: 20px;
    background:#5988eb;
    width: 46px;
    height: 46px;
    text-align: center;
    line-height: 50px;
    border:3px solid transparent;
    margin-right: 2px;
    margin-bottom: 2px;
    box-shadow: 0px 0px 5px 5px #4068d3 inset;
}

.phoneNum.current{
    border:3px solid #d4c020;
}

.otherBtn{
    font-size: 18px;
}

#othersProduct,#oursProduct{
    position: absolute;
    top: 354px;
    left: 400px;
}

#othersProduct{
    left: 680px;
}

#unWinToyPopup .confirm{
    left: 524px;
}

.pmodel{
    width: 162px;
    height: 220px;
    position: absolute;
    left: 380px;
    top: 260px;
}


.poster{
    width: 185px;
    height: 236px;
    position: absolute;
    left: 368.5px;
    top: 252px;
}

.poster_2{
    left: 558.5px;
}

.poster_3{
    left: 748.5px;
}

.poster.current{
    background: url('../img/content_f.png') no-repeat center;
}

.pmodel_1{
    background: url('../img/content0.jpg') no-repeat center;
}
.pmodel_2{
    left: 570px;
    background: url('../img/content1.jpg') no-repeat center;
}
.pmodel_3{
    left: 760px;
    background: url('../img/content2.jpg') no-repeat center;
}

#winToyPopup .confirm{
    left: 660px;
}

#toyImg{
    position: absolute;
    left: 560px;
    top: 268px;  
}
.myBox{
    width: 227px;
    height: 91px;
    background: url('../img/btn_hg_def.png') no-repeat center;
    position: absolute;
    left: 400px;
    top: 590px;
}

.myBox.current{
    background: url('../img/btn_hg_sel.png') no-repeat center;
}

.toyGroup {
    position: relative;
}
.toyGroup li{
    width: 120px;
    height: 134px;
    position: absolute;
    top: 184px;
    left: 436px;
}
.toyGroup  .toyLi1{
    left: 590px;
}

.toyGroup  .toyLi2{
    left: 740px;
}
.toyGroup  .toyLi3,.toyGroup  .toyLi4,.toyGroup  .toyLi5,.toyGroup  .toyLi6{
    top: 354px;
}
.toyGroup  .toyLi3{
    left: 362px;
}
.toyGroup  .toyLi4{
    left: 516px;
}
.toyGroup  .toyLi5{
    left: 670px;
}
.toyGroup  .toyLi6{
    left: 824px;
}

.toyGroup li span{
    width: 40px;
    height: 40px;
    font-weight: bold;
    text-align: center;
    line-height: 40px;
    display: inline-block;
    position: absolute;
    right: -18px;
    top: -12px;
    background: #da1c75;
    border-radius: 20px;
}

.toyGroup li i{
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    top: 132px;
    left: 0;
}

#CollectedSuccessPopup{
    z-index: 999;
}

.CollectedSuccessBtn{
    width: 227px;
    height: 91px;
    position: absolute;
    top: 590px;
    left: 524px;
}
.CollectedSuccessBtn.current{
    background: url('../img/btn_dj_sel.png') no-repeat center;
}

#openBoxPopup{
    background: url('../img/page_11.png') no-repeat center;
}

#bigPrize{
    position: absolute;
    top: 400px;
    left: 500px;
}

.oBbtn_1,.oBbtn_2 {
    width: 227px;
    height: 91px;
    position: absolute;
    top: 590px;
    left: 400px;
}

.oBbtn_1{
    background: url('../img/btn_dj_def.png') no-repeat center;
}
.oBbtn_1.current{
    background: url('../img/btn_dj_sel.png') no-repeat center;
}

.oBbtn_2{
    left: 650px;
    background: url('../img/btn_qx_def.png') no-repeat center;
}

.oBbtn_2.current{
    background: url('../img/btn_qx_sel.png') no-repeat center;
}

#myPrize{
    position: absolute;
    top: 310px;
    left: 248px;
}

#runOutPopup{
    background: url('../img/page_14.png') no-repeat center;
}

#submittedPopup{
    background: url('../img/page_15.png') no-repeat center;
}

#timeOutPopup{
    background: url('../img/page_16.png') no-repeat center;
}