#loading{width:100%;height:100%;position:fixed;top:0;left:0;background:#000;z-index:20;font-size:18px;color:#cfd1cc;z-index:101}#loading .box{width:100%;height:1px;background:#414141;margin:0 auto;position:relative;top:50%;transform:translateY(-50%);left:0}#loading .box span{height:1px;background:#c4c4c4;position:relative;top:0;left:0;display:block}#loading .box p{font-size:16px;line-height:30px;color:silver;text-align:center}



body{min-width: 1200px;background-color:#fff;}
.warp{width: 100%;min-width: 1200px;position: relative;overflow: hidden;}
.bg{position: absolute;width: 1920px;height: 6000px;left: calc(50% - 1920px/2);z-index: 10;}
.bgbox{width: 1920px;height:6000px;}
.bg_01{background: url("../images/bg_02.jpg") no-repeat 50% 0;height:1515px}
.bg_02{background: url("../images/bg_03.jpg") no-repeat 50% 0;height: 1880px;}
.bg_03{background: url("../images/bg_04.jpg") no-repeat 50% 0;height:1862px}
.slogan{
    position: absolute;background: url(../images/slogan.png);width: 1087px;height:295px ;left: calc(50% - 545px);top: 195px; z-index: 5;
}

.roles{
    position: absolute;background: url(../images/roles.png);width: 1694px;height:620px ;left: calc(50% - 838px);top: 545px; z-index: 5;
}

.bg .btn-login,.bg .btn-logout {top:970px;left:calc(50% - 78px);width:157px;height:53px;background: url(../images/btn-login.png) no-repeat 0 0;text-align: center;line-height: 53px;color:#57306f;font-size:24px;font-weight: bold;z-index:10}
.bg .btn-logout {font-size:16px;font-weight: normal;}
.bg .btn-login:hover,.bg .btn-logout:hover {background-image: url(../images/btn-login-on.png);color:#fff}

.con1{
    position: relative;
    background: url(../images/con-1.png) no-repeat 50% 0;
    width:1200px;
    height: 1650px;
    margin-left: calc(50% - 1200px/2);
    margin-top: 1555px;
    z-index: 10;
}
.con1 .tp-list {width: 100%;display: flex;flex-wrap: wrap;}
.con1 .tp-list li {width:300px;height:390px;flex:0 0 300px;padding-top: 320px;box-sizing: border-box;position: relative;}
.con1 .tp-list li .btn-tp {width:77px;height:71px;background: url(../images/btn-tp.png) no-repeat 0 0;top:185px;left:10px;}
.con1 .tp-list li .btn-tp:hover,
.con1 .tp-list li .btn-tp.on {background-image: url(../images/btn-tp-on.png);}
.con1 .tp-list li p {line-height: 26px;font-size: 18px;color:#f35663;text-align: center;}
.con1 .text-lj,.con1 .text-sy {color:#00fcff;font-size: 22px;top:1587px;left:50%;margin-left:-240px;}
.con1 .text-sy {margin-left: 60px;}
.con1 .btn-record {width:164px;height:49px;background: url(../images/btn-record.png) no-repeat 0 0;top:1580px;left:50%;margin-left:220px;}
.con1 .btn-record:hover {background-image: url(../images/btn-record-on.png);}
.con2{
    position: relative;
    background: url(../images/con-2.png) no-repeat 50% 0;
    width:1200px;
    height: 420px;
    margin-left: calc(50% - 1200px/2);
    z-index: 10;
    padding-top:1630px;
}

.con2 .text-sy {color:#fff;font-size: 22px;top:212px;left:50%;margin-left:-130px;z-index: 1;}
.con2 .btn-cj {width:228px;height:207px;background: url(../images/btn-cj.png) no-repeat 0 0 ;top:20px;left:calc(50% - 114px);z-index: 10;}

.con2 .btn-list {width:164px;height:52px;background: url(../images/btn-list.png) no-repeat 0 0;top:200px;left:50%;margin-left:120px;}
.con2 .btn-list:hover {background-image: url(../images/btn-list-on.png);}
.con2 .rules {width:1000px;margin:0 auto;font-size:18px;color:#f3e3ff}
.con2 .rules .title {font-size:32px;color:#ffb400;font-weight: bold;line-height: 55px;height: 55px;}
.con2 .rules li {line-height: 22px;position: relative;counter-increment: list-counter;}
.con2 .rules li a {color:#00fff6;text-decoration: underline;}
.con2 .rules li::before {content: counter(list-counter) "";position: absolute;left:-30px;width:17px;height:17px;text-align: center;line-height: 17px;border-radius: 50%;background-color: #ddbed6;color:#323284;font-size: 15px;}


/* .pop {display: none;} */
.pop-text {width: 732px;height:320px;background: url(../images/pop.png) no-repeat 0 0;padding-top: 45px;box-sizing: border-box;}
.pop-confirm {width: 732px;height:320px;background: url(../images/pop-confirm.png) no-repeat 0 0;padding-top: 45px;box-sizing: border-box;}
.pop .btn_close {width:50px;height:50px;top:45px;right:30px;}
.pop .btn-confirm,
.pop .btn-cancel {width:160px;height:52px;bottom:40px;left:50%;margin-left:-80px;}
.pop-text .text-info,
.pop-confirm .text-info {width:640px;height:170px;display: flex;justify-content: center;align-items: center;flex-direction: column;color:#cb3634;font-size: 24px;line-height: 40px;margin:0 auto;font-weight: bold;text-align: center;}

.pop-text .text-info a {font-size: 20px;font-weight: normal;color:#cb3634;text-decoration: underline;}
.pop-text .text-info .gift-name {color:#ff8400}
.pop-text .text-info .tips,
.pop-text .text-info .tips a {font-size: 16px;font-weight: normal;color:#ca3331;}
.pop-text .text-info .coupon {width: 390px;height:40px;background-color: #ca3331;color:#fefefe;font-size: 18px;text-align: center;line-height: 40px;border-radius: 20px;margin-top: 10px;font-weight: normal;}

.pop-confirm .btn-confirm {margin-left:-183px}
.pop-confirm .btn-cancel {margin-left:22px}

.pop-record{width: 732px;height:424px;background: url(../images/pop-record.png) no-repeat 0 0;padding-top: 130px;box-sizing: border-box;}
.pop-list{width: 876px;height:626px;background: url(../images/pop-list.png) no-repeat 0 0;padding-top: 130px;box-sizing: border-box;}

.pop-list .listBox,
.pop-record .listBox {
    width: 580px;
    height: 180px;
    position: relative;
    overflow: hidden;
    text-align: center;
    margin: 0 auto;
}
.pop-list .listBox{width: 750px;height:360px}

.pop-list .myPrize,
.pop-record .myPrize {
    text-align: center;
    width: 556px;
    color: #cb3634;
    
}
.pop-record .myPrize{margin: 0 auto;}
.pop-list .myPrize {width: 734px;margin-left:-8px}

.pop-list .listBox .myPrize td,
.pop-record .listBox .myPrize td {
    height: 30px;
    line-height: 30px;
    font-size: 16px;
}
.pop-list .listBox .myPrize td a {color:#cb3634;text-decoration: underline;}