.w1200{
    min-width: 1200px;
    margin: 0 auto;width:auto;
}
.w_1200{
    width: 1200px;
    margin: 0px auto;
}
.titleIcon{
    background: url(../images/new/title.png) 0 0 no-repeat;
}
.icon{
    background: url(../images/img/icon.png) 0 0 no-repeat;
}
.clear {
    zoom: 1;
}
.clear:after {
    content: ".";
    display: block;
    clear: both;
    height: 0px;
    visibility: hidden;
}
body{
    /*color: #926629;*/
    background: #f6eed9;
    font-family: '思源黑体 CN';
}
body::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 0.5rem rgba(91,131,229,0.2);
    background: #e8dcc5;
}
body::-webkit-scrollbar-thumb {
    border-radius: 20px;
    -webkit-box-shadow:  0 0 0.5rem rgba(243,212,250,0.2);
    background: #c7a666;
}
.flex{display: flex;align-items: center;}
.normalBtn{color: #666a85;text-decoration: underline;cursor: pointer;}
.normalBtn:hover{color: #fe4200;}
[v-cloak]{opacity: 0 !important;}
.fl{float: left;}
.fr{float: right;}
.numImg{background: url(../images/new/num.png?v=01) 0 0 no-repeat;}
.iconImg{background: url(../images/iconImg.png) 0 0 no-repeat;}
.iconImg1{background: url(../images/iconImg1.png?v=001) 0 0 no-repeat;}
.iconImg3{background: url(../images/iconImg3.png) 0 0 no-repeat;}
.iconImg4{background: url(../images/iconImg4.png) 0 0 no-repeat;}
.iconImg2{background: url(../images/img/icon2.png) 0 0 no-repeat;}
.btnIcon{background: url(../images/new/btnIcon1.png) 0 0 no-repeat;}
/*.asideIcon{background: url(../images/asideIcon.png) 0 0 no-repeat;}*/
.guildGiftTitleIcon{background: url(../images/guildGiftTitle.png) 0 0 no-repeat;}
.page-title-bg{background: url(../images/title.png) center 0 no-repeat;}
#app .page .head{
    position: absolute;
    width: 1920px;
    height: 1004px;
    top: 0;
    background: url(../images/new/head_bg.jpg?v=1) bottom center; no-repeat;
    left: 50%;
     z-index: -1;
    transform: translate(-50%);
}
#app .page.isShowSign .head{
    background: url(../images/new/head2.jpg?v=003) center 0 no-repeat;
}
#app .page .headTitle{
    position: absolute;
    top: 562px;
    left: 50%;
    width:706px;height:70px;margin-left:-350px;
    /* background:url(//cdn.51img3.com/game/2024/202412/20241227/9681e23c6d4398974cea95054ce044f6.png) 0 0 no-repeat; */
}
#app .page .headTitle .leftHeadTitle{
    position: absolute;
    top: 56px;
    left: 50%;
    transform: translate(-145%);
    width: 521px;
    height: 247px;
    background: url(../images/img/headTitleL.png?v=005) center no-repeat;
}
#app .page .headTitle .rightHeadTitle{
    position: absolute;
    width: 558px;
    height: 230px;
    top: 56px;
    left: 50%;
    transform: translate(-29%);
    background: url(../images/img/headTitleR.png) center no-repeat;
}
#app .page .headTitle.isShowSign{
    width: 1485px;
    top: 226px;
    transform: translate(-50%);
    height: 599px;
    background: url(../images/img/title_new.png?v=001) center no-repeat;
}
#app .page .headTitle.isShowSign .rightHeadTitle, #app .page .headTitle.isShowSign .leftHeadTitle, #app .page .headTitle.isShowSign .time{display: none;}
#app .page{margin-top: -1px;overflow: hidden;}
#app .page1{width: 100%;height: 1004px;padding-top: 0;position: relative;overflow: hidden;transition: all 0.3s;}
#app .page1.isShowSign{margin-top: 0px;}
#app .page2{width: 100%;height: 866px;background: url(../images/new/page1.jpg?v=002) top center no-repeat;position: relative;overflow: inherit;}
#app .page3{width: 100%;height: 637px;background: url(../images/new/page2.jpg?v=002) top center no-repeat;}
/*#app .page4{width: 100%;height: 722px;background: url(../images/new/page3.jpg?v=003) top center no-repeat;padding-top: 24px;overflow: inherit;}*/
#app .page5{width: 100%;height: 1025px;background: url(../images/new/page3.jpg?v=003) top center no-repeat;overflow: initial;}
#app .page6{width: 100%;height: 1782px;background: url(../images/new/page4.jpg?v=003) top center no-repeat;overflow: inherit;}

/*#app .page2 .content{margin-top: 38px;}*/

.allA{position: relative;}
/* .allA a{position: absolute;left: 0;right: 0;top: 0;bottom: 0;} */
#app .aside{
    width: 208px;
    height: 712px;
    background: url(../images/new/popup/asideBg1.png?v=01) center no-repeat;
    position: fixed;
    right: -185px;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    text-align: center;
}
#app .aside .openBtn{
    position: absolute;
    top: 63%;
    cursor: pointer;
    transform: translateY(-50%);
    left: 3px;
    width: 16px;
    height: 40px;
    z-index: 1;
    background-position:-365px -62px;
}
#app .aside.open{
    right: 10px;
}
#app .aside.open .openBtn{
    background-position-x: -400px;
}
#app .aside .topContent{
    color: #f3f9ff;
    font-size:14px;margin-top: 42px;
}
#app .aside .topContent dt p{font-size:16px;margin-top:-10px;  text-shadow:
    -1px -1px 2px #000,
    1px -1px 2px #000,
    -1px 1px 2px #000,
    1px 1px 2px #000; }
#app .aside .topContent dt p span{font-size:26px;color:#ffac35}
#app .aside .topContent dt img{display:block;width:76px;height:76px;margin:4px auto 0;}
#app .aside .topContent dd{height:22px;line-height:21px;}
#app .aside .topContent dd:last-child{color:#bee2f3;font-size:12px}
#app .aside .topContent dd:last-child span{color:#ffac35}
.aside_info{background:url(../images/new/popup/aside_info.png?v=01) 0 0 no-repeat;}
#app .aside ul{position: relative;width:142px;height:204px;margin:-11px auto 0;box-sizing:border-box;padding-top:26px;z-index:2}
#app .aside ul li{height:22px;line-height:22px;margin:0 0 21px;color:transparent;font-size:0;cursor:pointer;position:relative;z-index:2}
#app .aside .btn_bg{width:192px;height:66px;background:url(../images/new/popup/asideBtnBg.png) 0 0 no-repeat;position:absolute;top: 182px;z-index: 1;left: 0;}
#app .aside .qr_code{width:90px;height:90px;margin:8px 0 0 62px;background-position:-176px -26px}
.aside .server_info{font-size:14px;color:#d0d0d0;width:156px;height:66px;border-radius:4px;margin:-2px auto 0;padding-top: 3px;box-sizing: border-box;}
.aside .server_info div{display:flex;align-items:center;justify-content:center;margin:0 8px;border-bottom:1px solid rgba(255,227,145,0);height:26px;cursor:pointer;}
.aside .server_info div p{width:90px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.aside .server_info div span{color:transparent;}
#app .aside.step1 .btn_bg{top:226px}
#app .aside.step2 .btn_bg{top:269px}
#app .aside.step3 .btn_bg{top:312px}

.aside .edit_btn{display:flex;align-items:center;justify-content:center;margin:36px 0 6px 5px}
.aside .edit_btn a{width:72px;height:26px;background-position:-148px -148px;display:block;font-size:0;color:transparent;margin:0 5px}
.aside .edit_btn a.rules{background-position-x:-231px}


#app .aside .goTop{
    position: absolute;
    bottom: 38px;
    width: 30px;
    height: 24px;
    left: 50%;
    cursor: pointer;
    transition: all 0.1s;
    margin-left:-10px;
}
#app .aside .goTop:hover , .aside .edit_btn a:hover{
    filter: brightness(1.1);
}
.aside .gift_log{font-size:14px;color:#ffdd55;text-align:center;display:block;text-decoration:underline;width: 100px;margin: 4px auto 0;cursor:pointer;}
#app .top{
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 1200px;
    height: 80px;top: 24px;
}
#app .top.isShowSign{background: url(../images/img/nav_bg.png) center no-repeat;}
#app .top .topInfo{display: flex;align-items: center;height: 100%;width: 1200px;justify-content: space-between;}
#app .top .topInfo .logo{width: 226px;height:110px;background: url(../images/img/logo.png) center no-repeat;cursor: pointer;}
#app .top .topInfo .topTitle{width: 199px;height: 35px;background: url(../images/new/topTitle.png) center / 100% no-repeat;margin: 0 24px 0 36px;}
#app .top .topInfo .home .homeBtn a, #app .top .topInfo .home .gameBtn a{display:block;height:100%}
#app .top .topInfo .home .homeBtn, #app .top .topInfo .home .gameBtn{
    width:130px;
    height: 36px;
    margin-left: 10px;
    cursor: pointer;
    background: url(../images/img/btn-enter.png) 0 0 no-repeat;
}
#app .top .topInfo .home .gameBtn{background-position-x: -143px;}
#app .top .topInfo .home .gameBtn:hover, #app .top .topInfo .home .homeBtn:hover{
    background-position-y:-46px;
}
#app .top .topInfo .home{display: flex;}
#app .top .topInfo .nav{display: flex;color: #ffffff;height: 100%;line-height: 60px;font-size: 18px;}
#app .top .topInfo .nav .navLi{cursor: pointer;margin: 0 14px;}
#app .top .topInfo .nav .navLi:hover{color: #ffc35c;}
#app .hiddenTop{position: absolute;width: 100%;justify-content: center;background: rgba(0,0,0,0.5);height: 80px;top: -80px;transition: all 0.3s;}
#app .hiddenTop.show{top: 0;position: fixed;z-index: 10;display: flex;min-width: 1200px;}

#app .hiddenTop .hiddenTopLi{
    width: 196px;
    height: 48px;
    cursor: pointer;
    margin: 0 10px;
    background: url(../images/new/hiddenTop.png) 0 0 no-repeat;
}
#app .hiddenTop .hiddenTopLi.hiddenTopLi1{background-position-x: 0;}
#app .hiddenTop .hiddenTopLi.hiddenTopLi2{background-position-x: 0;}
#app .hiddenTop .hiddenTopLi.hiddenTopLi3{background-position-x: 0;}
#app .hiddenTop .hiddenTopLi.hiddenTopLi4{background-position-x: 0;}
#app .hiddenTop .hiddenTopLi:hover, #app .hiddenTop .hiddenTopLi.cur{background-position-y: -90px;}
/* page1 */
#app .page1 .time{
    text-align: center;
    line-height: 48px;
    color: #fff;
    background:radial-gradient(circle at center,#000,rgba(0,0,0,.7),rgba(0,0,0,.8),rgba(0,0,0,0));
    font-size: 26px;font-weight: bold;font-family:宋体;display:none;
}
#app .page1 .btnBox {
    /*width: 800px;*/
    display: flex;
    justify-content: center;
    margin-top:582px;
}
#app .page1 .btnBox.isShowSign{
    display: none;
}
#app .page1 .btnBox .signBtn{
    width: 374px;
    height: 74px;
    background: url(../images/new/gameBtn.png) 0 -15px no-repeat;
    margin: 0 34px;
    cursor: pointer;
}
#app .page1 .btnBox .signBtn:hover{background-position-x: -420px;}
#app .page1 .btnBox .signBtn.sign.geted{background-position:0 -265px;}
/*#app .page1 .btnBox .signBtn.sign.waitGet:hover,#app .page1 .btnBox .signBtn.entry:hover{background-position-y: -134px;}*/
#app .page1 .btnBox .signBtn.entry{background-position: 1px -178px;}
#app .page1 .btnBox .signBtn.cq{background-position: 0 -94px;}
#app .page1 .btnBox .signBtn.cq:hover{background-position-x:-419px;}
/*#app .page1 .btnBox .signBtn.entry:hover{background-image: url(../images/img/entry_mut.png);}*/
#app .page1 .progressBg{
    position: relative;
    width: 982px;
    height: 38px;
    background: url(../images/img/jdtBg.png) center no-repeat;
    /*overflow: hidden;*/
    border-radius: 60px;
}
#app .page1 .progressBox{
    position: relative;
    margin: 0 auto 14px;
    display: flex;
    transition: all 0.3s;
    justify-content: center;
}
#app .page1 .timelinebox{margin:28px auto 0;position:relative}
#app .page1 .time_line_div{justify-content: center;font-size: 16px;color: #537e7a;}
#app .page1 .time_line_div p{background:url(../images/new/timeline.png) 0 0 no-repeat;width:256px;height:226px;}
#app .page1 .time_line_div p:nth-child(2){background-position-x: -259px;}
#app .page1 .time_line_div p:nth-child(3){background-position-x: -519px;}
#app .page1 .time_line_div p:nth-child(4){background-position-x: -778px;width: 222px;}
#app .page1 .time_line_div p.cur{background-position-y: -259px;}
#app .page1 .time_line_div span{display: block;width: 146px;margin: 220px 0 0 39px}
#app .page1 .progressBox.isShowSign{margin: 716px auto 40px;}
#app .page1 .progressBox .progress{
    position: absolute;
    left: 2px;
    top: 12px;
    border-radius: 6px;
    width: 0%;
    height: 14px;
    background: url(../images/img/jdt1.png?v=002) 0 0 / 100% 100% no-repeat;
}
#app .page1 .progressBox .progress .light{
    position: absolute;
    right: -120px;
    top: 50%;
    transform: translateY(-50%);
    width: 244px;
    height: 35px;
    background: url(../images/img/light.png) center no-repeat;
}
#app .page1 .progressBox .progress .pf{
    width: 528px;
    height: 324px;
    background: url(../images/img/pf.png) -50px -136px no-repeat;
    position: absolute;
    right: -274px;
    top: -227px;
    transform: scale(0.5);
    animation: pf 1s steps(8) infinite;
}
@keyframes pf{
    0%{background-position-x: -50px;}
    100%{background-position-x: -4960px;}
}
#app .page1 .progressBox .progress .pf .yyt{
    position: absolute;
    left: -76px;
    top: 138px;
    color: #f1b06a;
    font-size: 12px;
    transform: scale(2);
    width: 164px;
    height: 35px;
    /*background: url(../images/img/yyt.png) center no-repeat;*/
}
#app .page1 .progressBox .progress .pf .yyt .signTimesBg{
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 164px;
    height: 35px;
    transition: all 0.3s;
    background: url(../images/img/yyt.png) center no-repeat;
}
#app .page1 .progressBox .progress .pf .yyt.inset{left: 430px;}
#app .page1 .progressBox .progress .pf .yyt.inset .signTimesBg{transform: rotateY(180deg);left: -6px;}
#app .page1 .signGiftBox{
    width: 1065px;
    height: 207px;
    margin: 0 auto;
    background: url(../images/new/signGiftBg.png) center no-repeat;
}
#app .page1 .signGiftBox.isShowSign{display: none;}
#app .page1 .signGiftBox .signGiftBoxDiv{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
#app .page1 .signGiftBox .giftBox{
    position: relative;
    width: 145px;
    height: 134px;
    margin-top: 45px;
}
#app .page1 .signGiftBox .giftBox .gift{
    width: 70px;
    height: 66px;
    background: center no-repeat;
    margin: 0 auto;
}
#app .page1 .signGiftBox .giftBox.giftBox5 .gift{
    width: 404px;
    height: 203px;
    background: 0 -48px no-repeat;
    background-image: url(../images/new/ch.png) !important;
    animation: giftCh 1s steps(8) infinite;
    position: absolute;
    top: -69px;
    left: -130px;
    transform: scale(0.6);
}
#app .page1 .signGiftBox .giftBox.giftBox5 .giftName{margin-top: 76px;}
@keyframes giftCh{
    0%{background-position-x: 0;}
    100%{background-position-x: -3200px;}
}
#app .page1 .signGiftBox .giftBox .giftName{
    color: #74563c;
    font-size: 12px;
    text-align: center;
    margin-top: 10px;
}
#app .page1 .signGiftBox .giftBox .giftBtn{
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translate(-50%);
    width: 138px;
    height: 34px;
    background-position: 2px 0;
    cursor: pointer;
}
#app .page1 .signGiftBox .giftBox .giftBtn.waitGet:hover{background-position-x: -146px;}
#app .page1 .signGiftBox .giftBox .giftBtn.notAllow{background-position-x: -295px;}
#app .page1 .signGiftBox .giftBox .giftBtn.isGet{background-position-x: -443px;}
#app .page2 .taskBox{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 1200px;
    height: 113px;
    background: url(../images/new/taskBg.png) center no-repeat;
    margin:30px auto 0;
}
#app .page2 .taskBox.isShowSign{display: none;}
#app .page2 .taskBox .left{
    display: flex;justify-content:space-between;width:1196px;font-weight:normal;
}
#app .page2 .taskBox .left .task{
    width: 278px;
    height:113px;
    font-size: 16px;box-sizing:border-box;padding:0 16px;
}
#app .page2 .taskBox .left .task .title{
    color: #f1ebd2;padding-top:52px;
}
#app .page2 .taskBox .left .task .taskDesc{
    color: #ffd945;
}
#app .page2 .taskBox .left .task .taskBtn{
    width: 114px;
    height: 38px;
    background-position:0 -88px;
    margin: -10px -6px 0 0;
    cursor: pointer;
}
#app .page2 .taskBox .left .task .taskBtn:hover{background-position-x: -157px;}
#app .page2 .taskBox .left .task .taskBtn.cannot:hover, #app .page2 .taskBox .left .task .taskBtn.get:hover{background-position-x: -157px;}
#app .page2 .taskBox .left .task .taskBtn.geted{background-position-x: -665px;position:relative;}
#app .page2 .taskBox .left .task .taskBtn.get{background-position-y: -136px;}
#app .page2 .taskBox .left .task .taskBtn.geted::after{content:"";width:98px;height:88px;background:url(../images/new/btnIcon1.png) -318px -92px no-repeat; position:absolute;top:-48px;right:0}
/*#app .page2 .taskBox .left .task .taskBtn.get:hover{background: url(../images/img/taskBtn_mut.png) center no-repeat;}*/
#app .page2 .taskBox .left .bottom{
    display: flex;
    justify-content: space-between;
    margin-top: -2px;
}
#app .page2 .taskBox .right{
    font-size: 16px;
    /*color: red;*/
    margin-right: 66px;
}

#app .left{
    display: flex;
    align-items: center;
    font-size: 24px;
    color: #767677;
    font-weight: bold;
}
#app #page6 .left{margin-top: -90px;}
#app .page2 .topTitle{justify-content: space-between;}
#app .page2 .topTitle .guessLog{
    margin-right: 22px;
    font-size: 16px;
}
#app .page2 .topTitle .guessRule{font-size: 16px;}
#app .pageTitle{
    width: 645px;
    height: 140px;
    background-position:0 -14px;margin:0 auto;
}
#app .page2 .gameInfo{
    transition: all 0.3s;
    display: flex;
    flex-flow: wrap;
    width: 882px;
    margin: 22px 22px 0 0;
    float:right;height: 366px;
  align-items: center;overflow-y:auto;
  justify-content: center;
}
#app .page2 .toggleBtnBox{width:1215px;height:553px;background:url(../images/new/jcbg.png) 0 0 no-repeat;margin:0 auto;}
#app .page2 .toggleBtnBox .toggleTop{
    justify-content: flex-end;
    margin-top: 14px;
    margin-bottom: 12px;
}
#app .page2 .toggleBtnBox .toggleTop .guessCoin{
    color: #2f4e5b;width:400px;height:56px;
    font-size: 16px;margin-top: 2px;
    display:flex;align-items:center;justify-content:flex-start;
}
#app .page2 .toggleBtnBox .toggleTop .guessCoin p{margin-right: 14px;width:180px}
#app .page2 .toggleBtnBox .toggleTop .guessCoin span{color:#b73818;font-size:22px;width: 62px;display: inline-block;text-align:center;font-weight: bold;}
#app .page2 .toggleBtnBox .toggleTop .guessCoin a{color:#529587;font-size:14px;text-decoration:underline;margin-right:16px}
.transition{
    transition: all 0.3s;
}
.secendTop{display:flex;align-items:center;justify-content:flex-end;width:1100px;margin:-2px 0 0 60px}
.secendTop div{width:166px;height:54px;background-position:-218px -602px;cursor:pointer;}
.secendTop div.match_8{background-position-y:-717px}
.secendTop div.match_4{background-position-y:-774px}
.secendTop div.match_3{background-position-y:-659px}
.secendTop div.match_1{background-position-y:-831px}
.secendTop div:hover,.secendTop div.cur{background-position-x:3px}
.toggleLeft .toggleServerBtn{
    width:250px;height:108px;background-position:0 -220px;margin:16px 0 16px 50px;cursor:pointer;
}
.toggleLeft{float:left;margin-top:7px}
.toggleLeft .toggleServerBtn.hundun{background-position-y:-316px}
.toggleLeft .toggleServerBtn.kaitian{background-position-y:-341px}
.toggleLeft .toggleServerBtn.wanjian{background-position-y:-462px}
.toggleLeft .toggleServerBtn:hover, .toggleLeft .toggleServerBtn.cur{
    background-position-x:-262px;
}
#app .page2 .toggleBtnBox .toggleBottom .toggleGame{
    margin-right: 62px;
}
#app .page2 .toggleBtnBox .toggleBottom .toggleGame.cur,#app .page4 .toggleType div.cur{color: #fe4200;}
#app .page2 .gameInfo .gameBox{
    position: relative;
    width: 428px;
    height: 188px;
    background: url(../images/new/jcitem.png) 0 0 no-repeat;float:left;

}
#app .page2 .gameInfo .gameBox.jifen{
    height: 232px;
}
#app .page2 .gameInfo .gameBox .gameTop{
    width: 354px;
    height: 34px;
    /*background: url(../images/img/scroll.png) 0 0;*/
    line-height: 40px;
    color: #fff;
    font-size: 16px;
    justify-content: space-between;
    padding:3px 0 0 38px;
}
#app .page2 .gameTime {justify-content:flex-start;color: #1c6357;}
#app .page2 .gameTime p{color:#1c6357;font-weight:bold;font-size:16px}
#app .page2 .gameInfo.center{justify-content: center;margin: 0;width:884px;height:388px;transition: none;align-items: center;}
#app .page2 .gameInfo .gameBox .gameTop .scroll{display: none;}
#app .page2 .gameInfo .gameBox .gameTop.underway{
    position: relative;
    background-image: url(../images/img/redbg.png);
}
#app .page2 .gameInfo .gameBox .gameTop.underway .scroll{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../images/img/jt.png?v=001) 0 0;
    animation: jt 5s linear infinite;
}
@keyframes jt{
    0%{background-position-x: -373px;}
    100%{background-position-x: 0;}
}
/*#app .page2 .gameInfo .gameBox .gameTop.notStart{
    background-position-y: -108px;
}
#app .page2 .gameInfo .gameBox .gameTop .gameTime .date{
    margin-left: 20px;
}*/
#app .page2 .gameInfo .gameBox .info{display: flex;justify-content: space-between;width:368px;margin:0 auto;}
#app .page2 .gameInfo .gameBox .info .gamerGuildName{font-size:16px;color:#b54315;font-weight:bold;white-space:nowrap;}
#app .page2 .gameInfo .gameBox .info .gamerServerName{line-height:16px;margin:6px 0 2px}
#app .page2 .gameInfo .gameBox .info .gameServerInfo{
    position: relative;
    display: flex;
    flex-flow: column;
    cursor: pointer;
    align-items: center;
    color: #686e76;
    font-size: 12px;
    width: 140px;
    height: 84px;
    padding-top: 16px;
    line-height: 16px;margin:0 4px;
}
#app .page2 .info .gameServerInfo .guess_coin span{color:#2059d1}
#app .page2 .gameInfo .gameBox.jifen .info .gameServerInfo{
    position: relative;
    display: flex;
    flex-flow: column;
    /*cursor: pointer;*/
    align-items: center;
    color: #686e76;
    font-size: 12px;
    width: 132px;
    height: 160px;
    padding-top: 32px;
    line-height: 16px;
}
#app .page2 .gameInfo .gameBox .info .gameServerInfo .gamerImg{
    width: 56px;
    height: 56px;
    background: center / 100% no-repeat;
}
#app .page2 .gameInfo .gameBox .info .gameServerInfo .score{
    position: absolute;
    right: -32px;
    top: 24px;
    width: 34px;
    height: 52px;
    /*display: none;*/
    background-position: -208px -242px;
}
#app .page2 .gameInfo .gameBox .info .gameServerInfo .isChoose{
    position: absolute;
    left: 14px;
    top: 6px;
    width: 46px;
    height: 46px;
    text-align: center;
    line-height: 58px;
    font-size: 22px;
    font-weight: bold;
    color: #bf4c00;
    background: url(../images/img/ya.png) center no-repeat;
}
#app .page2 .gameInfo .gameBox .info .gameServerInfo.gameServerInfo1 .score{
    right: 134px;
}
#app .page2 .gameInfo .gameBox .info .gameServerInfo .jifenRank{
    width: 30px;
    height: 34px;
    background: url(../images/new/jifen1.png) center no-repeat;
    position: absolute;
    right: 24px;
    top: 27px;
}
#app .page2 .gameInfo .gameBox .info .gameServerInfo .jifenRank.jifen2{background-image: url(../images/new/jifen2.png);}
#app .page2 .gameInfo .gameBox .info .gameServerInfo .jifenRank.jifen3{background-image: url(../images/new/jifen3.png);}
#app .page2 .gameInfo .gameBox .info .gameServerInfo.gameServerInfo .score.win{background-position-x: -208px;}
#app .page2 .gameInfo .gameBox .info .gameServerInfo.gameServerInfo .score.lose{background-position-x: -273px;}
#app .page2 .gameInfo .gameBox .info .gameServerInfo.gameServerInfo .score.not{background-position-x: -338px;}
#app .page2 .gameInfo .gameBox .scoreCenter{
    position: absolute;
    top: 86px;
    left: 50%;
    width: 8px;
    height: 14px;
    background-position:-627px -268px;
}
#app .page2 .gameInfo .gameBox .info .gameServerInfo .gamerBtn{
    position: relative;
    width: 109px;
    height: 24px;
    background-position: -291px -123px;
    cursor: pointer;
}
#app .page2 .gameInfo .gameBox .info .gameServerInfo .gamerBtn:hover{
    filter: brightness(1.1);
}
#app .page2 .gameInfo .gameBox .info .gameServerInfo .gamerBtn.waitGet.notAllow:hover{/*background-position-x: -384px;*/}
#app .page2 .gameInfo .gameBox .info .gameServerInfo .gamerBtn.notAllow{
    filter: grayscale(1);
}
#app .page2 .gameInfo .gameBox .info .gameServerInfo .gamerBtn.geted{background-position-y: -86px;}
#app .page2 .gameInfo .gameBox .info .gameServerInfo .gamerBtn.get{background-position-y:-123px}
#app .page2 .gameInfo .gameBox .gameBtn{
    position: absolute;
    top: 126px;
    left: 50%;
    width: 150px;
    height: 32px;
    background-position: -291px -167px;margin-left:-75px;
}
#app .page2 .gameInfo .gameBox .gameBtn.live{
    background-position-y:-216px;
}
#app .page2 .gameInfo .gameBox .gameBtn:hover{
    background-position-x: -448px
}
/*#app .page2 .gameInfo .gameBox .gameBtn.notStart:hover{background-position-x:-268px}*/
#app .page2 .gameInfo .gameBox .gameBtn.notStart{background-position:-291px -257px;}
#app .page2 .gameInfo .gameBox .gameBtn a{display:block;height:100%;width:100%}
#app .page2 .gameInfo .gameBox.jifen .gameBtn{
    position: absolute;
    top: 46px;
    left: 89%;
    transform: translate(-50%);
    width: 56px;
    height: 16px;
    text-decoration: underline;
    text-align: center;
    color: #fe4f12;
    background-position: -292px -168px;
}
#app .page2 .gameInfo .gameBox.jifen .gameBtn.live{
    background-position-y: -215px;
}
#app .page2 .gameInfo .gameBox.jifen .gameBtn.notStart{background-position-y: -262px;}
#app .page2 .gameInfo .gameBox.jifen .gameBtn:hover{
    background-position-x: -416px;
    color: #ff7d4f;
}
#app .page2 .gameInfo .gameBox.jifen .gameBtn.notStart:hover{background-position-x: -292px;}
#app .page3 .gameVideo{
    width: 500px;
    height: 350px;
    overflow: hidden;margin:10px 0px 0 4px;
}
.page3 .news_con_box{width:1198px;height:462px;background:url(../images/new/page3_con.png) 0 0 no-repeat;margin:0 auto;display:flex;align-items:flex-start;justify-content:flex-start;box-sizing:border-box;padding-left:66px;position: relative;}
.news_con_box .zhiboBox{width:508px;height:370px;background:url(../images/new/popup/page3_bg.png) 0 0 no-repeat;margin-top: 44px;}
#app .page3 .gameVideo .mSwiper {
    width: 100%;
    height: 100%;
}
.swiper-pagination .swiper-pagination-bullet{width:24px;height:16px;background:url(../images/new/popup/aside_info.png) -396px -150px no-repeat;opacity:1;margin:0 2px;border-radius:0;}
.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background-position-x:-359px}
.swiper-pagination-box .swiper-pagination{width: 500px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 16px;}
#app .page3 .gameVideo img{width:100%;height:100%}
#app .page3 .toggleBox{
    /*width: 418px;*/
    margin: 14px 0 16px;
}
#app .page3 .content{
    display: flex;
    flex-wrap:wrap;
    margin-top: 16px;width:1220px;
}
#app .page3 .newsBox{
    width: 502px;margin:-10px 0 0 48px;
}
#app .page3 .newsBox .more{
    font-size: 16px;
}
#app .page3 .news_type{display:flex;align-items:center;justify-content:space-between;}
#app .page3 .news_type p{width:164px;height:36px;background-position:0 -902px;cursor:pointer;float:left;}
#app .page3 .news_type p:nth-child(2){background-position-x:-176px}
#app .page3 .news_type p:hover,#app .page3 .news_type p.cur{background-position-y:-949px}
#app .page3 .news_type a{font-size:16px;color:#00fff6;text-decoration:underline;position: absolute;right: 82px;bottom: 32px;}
#app .page3 .newsBox .left{justify-content: space-between;}
#app .page3 .newsBox .newsUl{
    color: #808080;
    font-size: 16px;
    display: flex;
    flex-flow: column;
    margin-top:68px;justify-content: flex-start;
}
/*#app .page3 .newsBox .newsUl .newsLi{cursor: pointer;}*/
.cursor{cursor: pointer;}
#app .page3 .newsBox .newsUl .newsLi{display: flex;align-items: center;position: relative;transition: all 0.1s;padding: 0 0 0 14px;font-size: 16px;color:#b5b5b5;height:38px;}
#app .page3 .newsBox .newsUl .newsLi a{color: #e5dcd0;font-size: 16px;}
#app .page3 .newsBox .newsUl .newsLi .times{width: 82px;position: absolute;right: 0;bottom: 8px;font-size: 14px;}
#app .page3 .newsBox .newsUl .newsLi .title{
    width: 390px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#app .page3 .newsBox .newsUl .newsLi.newtop{
    font-size: 22px;
    color: #ffda5a;
    border: none;
    margin: 2px auto 0;
    text-align: center;
    width: 100%;
    padding: 0;
    justify-content: center;
    height:79px;
    flex-direction: column;
}
#app .page3 .newsBox .newsUl .newsLi.newtop a{display: block;font-size: 22px;color: #ffda5a;text-align: center;width: 100%;line-height: 34px;}
#app .page3 .newsBox .newsUl .newsLi.newtop .point {opacity: 0;}
#app .page3 .newsBox .newsUl .newsLi.newtop .title{font-size: 22px;font-weight: bold;
    white-space: wrap;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;}
#app .page3 .newsBox .newsUl .newsLi:hover{color: #e8a966;}
#app .page3 .newsBox .newsUl .newsLi.newtop .time{font-size: 14px;}
#app .page3 .newsBox .newsUl .newsLi .point{
    position: absolute;
    width: 8px;
    height: 8px;
    left: 2px;
    top: 53%;
    transform: translateY(-50%);
    background: url(../images/img/point.png) center no-repeat;
}
#app .page3 .newsBox .newsUl .newsLi:hover .time{font-size: 14px;}
/* #app .page3 .newsBox .newsUl .newsLi.newtop:hover{color: #ff8f19;} */
#app .page3 .newsBox .newsUl .newsLi .time{position: absolute;right: 0;bottom: 8px;}
#app .page3 .pageTitle{background-position-y: -179px;}
#app .page3 .newsBox .pageTitle{background-position-y: -118px;width: 198px;background-position-x: -10px;}
/*#app .page3 .newsBox .newsUl .newsLi .*/
#app .page3 .newsBox .togglePageBtnBox{
    justify-content: flex-end;
    /*margin-top: 18px;*/
}
#app .page3 .newsBox .togglePageBtnBox .togglePage{
    width: 25px;
    height: 24px;
    margin: 0 4px;
    border: 1px solid;
    color: #808080;
    font-size: 14px;
    text-align: center;
    line-height: 25px;
}
#app .page3 .newsBox .togglePageBtnBox .togglePage:hover, #app .page3 .newsBox .togglePageBtnBox .togglePage.cur{color: #1c1c1c;background: url(../images/new/pageBg.png) 0 0 no-repeat;border-color: #cfb277;}

#app .page4 .content{margin-top: 24px;}
#app .page4 .toggleType div{margin-right: 30px;margin-top: 10px;margin-bottom: 10px;}
#app .page4 .pageTitle{
    background-position-y: -176px;
    background-position-x: -10px;
    width: 206px;
}
#app .page4 .gamerBox .gamerInfo{
    width: 156px;
    color: #fff;
}
#app .page4 .gamerBox.sixth .gamerInfo{
    margin-right: 46px;
    width: 178px;
    margin-bottom: 28px;
}
#app .page4 .gamerBox.sixth .gamerInfo:nth-child(4n){
    margin-right: 0;
}
#app .page4 .gamerBox.sixth .jifenRankBox{
    position: relative;
    width: 330px;
    height: 608px;
    background: url(../images/new/jifenRankBox.png) center no-repeat;
}
#app .page4 .gamerBox.sixth .jifenRankBox .desc{
    position: absolute;
    bottom: 28px;
    padding: 0 42px;
    color: #bb4b00;
}
#app .page4 .gamerBox.sixth .jifenRankBox .jifenList{
    display: flex;
    justify-content: space-between;
    width: 95%;
    text-align: center;
    margin: 68px auto -58px;
    color: #6b370c;
    font-size: 14px;
}
#app .page4 .gamerBox.sixth .jifenRankBox .jifenList div{flex: 1;white-space: nowrap;}
#app .page4 .gamerBox.sixth .gamerInfoBox{
    display: flex;
    flex-wrap: wrap;
    flex: 1;
}
#app .page4 .gamerInfo .gameInfoTop{color: #71758b;font-size: 12px;justify-content: space-between;margin-bottom: 2px;}
#app .page4 .gamerInfo .gameInfoTop .gameBtn{color: #f4d178;text-decoration: underline;}
#app .page4 .gamerInfo .gameInfoTop .timeBox div{margin-right: 10px;}
#app .page4 .gamerInfo .gameServerInfoBox .gameServerInfo{position: relative;border-left: 2px solid #242532;height: 36px;justify-content: space-between;font-size: 12px;background: #3d3e4d;margin-bottom: 1px;}
#app .page4 .gamerInfo .gameServerInfoBox .gameServerInfo .stauts{
    font-size: 20px;
    font-weight: bold;
    height: 100%;
    width: 28px;
    text-align: center;
    line-height: 36px;
    background: #242532;
}
#app .page4 .sixth .gamerInfo .gameServerInfoBox .gameServerInfo .stauts{
    width: 48px;
    font-size: 28px;
}
#app .page4 .sixth .gamerInfo .gameServerInfoBox .gameServerInfo .stauts span{
    font-size: 13px;
    font-weight: 200;
}
#app .page4 .gamerInfo .gameServerInfoBox .gameServerInfo .hoverServer{
    position: absolute;
    display: flex;
    flex-flow: column;
    align-items: center;
    bottom: 36px;
    left: 50%;
    transform: translate(-50%);
    width: 117px;
    overflow: hidden;
    color: #885c38;
    height: 0px;
    transition: all 0.3s;
    background: url(../images/new/popup/mutBg.png) center no-repeat;
}
#app .page4 .gamerInfo .gameServerInfoBox .gameServerInfo:hover .hoverServer .hoverServerImg{
    width: 72px;
    height: 72px;
    margin-top: 6px;
    background: center / 100% no-repeat;
}
#app .page4 .gamerInfo .gameServerInfoBox .gameServerInfo:hover .hoverServer .hoverServerGuildCC{margin-top: 6px;}
#app .page4 .gamerInfo .gameServerInfoBox .gameServerInfo:hover .hoverServer .hoverServerGuildName{margin-top: 6px;color: #bb4b00;}
#app .page4 .gamerInfo .gameServerInfoBox .gameServerInfo:hover .hoverServer .hoverServerName{margin-top: 6px;}
#app .page4 .gamerInfo .gameServerInfoBox .gameServerInfo:hover .hoverServer {height: 156px;opacity: 1;}
#app .page4 .gamerInfo .gameServerInfoBox .gameServerInfo .gameImg{width: 26px;height: 26px;background: center/100% no-repeat;margin: 0 4px;}
#app .page4 .gamerInfo .gameServerInfoBox .gameServerInfo .gameName{width: 89px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
#app .page4 .gamerInfo.end .gameServerInfo.win{background: #b08960;border-color: #987355;}
#app .page4 .gamerInfo.end .gameServerInfo.win .stauts{background-image: linear-gradient(to bottom, #dcb161, #a5693f);border-color: #e84949;}
#app .page4 .gamerInfo.end .gameServerInfo.loser{background: #3d3e4d;border-color: #242532;}
#app .page4 .gamerInfo.end .gameServerInfo.loser .stauts{background: #242532;border-color: #787878;}
/*#app .page4 .gamerInfo.notStart .gameServerInfo0{background: #770f0e;border-color: #e95251;}*/
/*#app .page4 .gamerInfo.notStart .gameServerInfo0 .stauts{background: #f33c3c;border-color: #f33c3c;}*/
/*#app .page4 .gamerInfo.notStart .gameServerInfo1{background: #4e0100;border-color: #e95251;}*/
/*#app .page4 .gamerInfo.notStart .gameServerInfo1 .stauts{background: #f34140;border-color: #f34140;}*/

#app .page4 .gamerInfo.notGamer .gameServerInfo0{background: #c08245;border-color: #f6dc80;}
#app .page4 .gamerInfo.notGamer .gameServerInfo0 .stauts{background: #f6dc80;border-color: #f6dc80;}
#app .page4 .gamerInfo.notGamer .gameServerInfo1{background: #ca925c;border-color: #f6dc80;}
#app .page4 .gamerInfo.notGamer .gameServerInfo1 .stauts{background: #f6dc80;border-color: #f6dc80;}

#app .page4 .gamerBox{flex-flow: wrap;}
#app .page4 .gamerBox.sixth{margin-top: 0;justify-content: space-between;align-items: flex-start;}
#app .page4 .gamerBox.eight{
    display: none;
    width: 980px;
    height: 500px;
    margin: 252px auto 0;
    /*background: url(../images/img/line.png?v=001) center no-repeat;*/
}
#app .page4 .gamerBox.eight .listBox{position: relative;justify-content: space-between;}
#app .page4 .gamerBox.eight .listBox .trophy{
    position: absolute;
    width: 205px;
    height: 170px;
    top: -160px;
    left: 50%;
    transform: translate(-47%);
    background: url(../images/img/trophy.png) center top no-repeat;
}
#app .page4 .gamerBox.eight .gamerList{width: 156px;position: relative;display: flex;flex-flow: column;justify-content: space-between;}
#app .page4 .gamerBox.eight .gamerList .gamerInfo{margin: 0;}
#app .page4 .gamerBox.eight .gamerList.eight .gamerInfo.gamerInfo0{position: relative;top: 14px;}
/*#app .page5 .content{margin-top: 20px;}*/
#app .page5 .pageTitle{
    font-size: 14px;
    color: #537e7a;
    text-align: center;
    background-position-y: -336px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 164px;margin-top:-20px;
}
#app .page4 .gamerBox.eight .gamerList .img{
    position: absolute;
    width: 21px;
    height: 82px;
    top: 50%;
    left: -21px;
    transform: translateY(-50%);
    background: url(../images/img/eightImg.png) center no-repeat;
}
#app .page4 .gamerBox.eight .gamerList.right .img{left: 156px;}
#app .page4 .gamerBox.eight .gamerList.four .img{background-image: url(../images/img/eightImg.png);}
#app .page4 .gamerBox.eight .gamerList.three .img{background-image: url(../images/img/fourImg.png);}
#app .page4 .gamerBox.eight .gamerList.two .img{background-image: url(../images/img/twoImg.png);}
#app .page4 .gamerBox.eight .gamerList.one .img{background-image: url(../images/img/oneImg.png);}
#app .page4 .gamerBox.eight .gamerList .gameServerInfoBox{position: relative;}
#app .page4 .gamerBox.eight .gamerList .gameServerInfoBox:hover{z-index: 1;}
#app .page4 .gamerBox.eight .gamerList.eight{height: 468px;}
#app .page4 .gamerBox.eight .gamerList.four{position: relative;left: 18px;}
#app .page4 .gamerBox.eight .gamerList.four.right{left: -38px;}
#app .page4 .gamerBox.eight .gamerList.four .gamerInfo.gamerInfo0{position: relative;top: -66px;}
#app .page4 .gamerBox.eight .gamerList.four .gamerInfo.gamerInfo1{position: relative;top: 82px;}
#app .page4 .gamerBox.eight .gamerList.three .gamerInfo.gamerInfo0{position: relative;left: -40px;top: 7px;}
#app .page4 .gamerBox.eight .gamerList.three.right .gamerInfo.gamerInfo0{position: relative;left: 40px;}
#app .page4 .gamerBox.eight .gamerList.one .gamerInfo.gamerInfo0{position: relative;top: 6px;left: 10px;}
#app .page4 .gamerBox.eight .gamerList.two .gamerInfo.gamerInfo0{position: relative;top: 41px;left: 10px;}
#app .page4 .gamerBox.eight .gamerList.three{z-index: 1;}
#app .page4 .gamerBox.eight .gamerList.two{}
#app .page4 .gamerBox.eight .gamerList.one{}
#app .page5 .topInfo {justify-content: space-between;}
#app .page5 .topInfo .rightInfo{display:flex;align-items:center;justify-content:flex-end;width:100%;margin-top:-28px;color: #537e7a;font-size: 14px;}
#app .page5 .topInfo .rightInfo span{color:#cd4015;font-size:22px;}
#app .page5 .topInfo .rightInfo .normalBtn{font-size:14px;color:#cd4015;margin:0 16px}
#app .page5 .topInfo .rightInfo .guessCoin{
    color: #537e7a;
    font-size: 14px;
}
#app .page5 .giftContent{
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    /*width: 952px;*/
    margin:-14px auto 0;
}
#app .page5 .giftContent .giftBox{
    position: relative;
    width: 191px;
    height: 212px;
    display: flex;
    flex-flow: column;
    align-items: center;
    color: #f3f9ff;
    margin: 24px 22px 0;
    font-size: 14px;
    background: url(../images/new/exchangeGiftBg.png) 0 0 no-repeat;
}
#app .page5 .giftContent .giftBox .giftImg{
    width: 70px;
    height: 70px;
    background: center no-repeat;
    margin:58px 0 2px 6px;flex-shrink:0;
}
#app .page5 .giftContent .giftBox .giftName{
    width: 100px;
    white-space: nowrap;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    text-align: center;margin:4px 0;
    /*height: 34px;*/
}
#app .page5 .giftContent.special{width:660px;margin-top: 50px;}
#app .page5 .giftContent.special li{
    width:234px;height:314px;margin:0 35px;
    background-position-x:-255px;color:#f3f9ff;
}
#app .page5 .giftContent.special .giftBox .giftCoin{width:190px;height:46px;left:22px;font-size:16px;color:#e4dad6;top:0;align-items:center;justify-content:center;flex-direction:column;font-weight:bold;}
#app .page5 .giftContent.special .giftBox .giftImg{width:166px;height:140px;margin-top:60px;background-position:center;position:relative;margin-bottom:0}
#app .page5 .giftContent.special .giftImg p{width:320px;height:150px;background:url(../images/txdy.png?v=01) 0 0 no-repeat;position:absolute;left: -88px;top: -2px;animation: txdy_p 1s steps(12) infinite;}
#app .page5 .giftContent.special .sjms .giftImg p{background:url(../images/jcgj.png?v=1) 0 0 / 2100px auto no-repeat;animation:sjms_p 1s steps(8) infinite;height:178px;top: -18px;left: -44px;width:252px}
@keyframes sjms_p {
    0% {background-position-x: 0;}
    100% {background-position-x: -2100px;}
}
@keyframes txdy_p {
    0% {background-position-x: 0;}
    100% {background-position-x: -3840px;}
}



#app .page5 .giftContent.special .giftBox .giftCoin span{color:#fff600;font-size:14px}
#app .page5 .giftContent .giftBox .giftLimit{
    color: #397d63;font-size:14px;position: relative;top: 13px;
}
#app .page5 .giftContent .giftBox .giftBtn{
    width: 154px;
    height: 62px;
    cursor: pointer;
    background: url(../images/new/exchange.png) 0 -7px no-repeat;
    margin: -4px 0;
}
#app .page5 .giftContent .giftBox .giftBtn:hover{background-position-y: -68px;}
/*#app .page5 .giftContent .giftBox .giftBtn.waitGet:hover{background-position-x: -150px;}*/
#app .page5 .giftContent .giftBox .giftBtn.notAllow{background-position: -362px -7px;}
#app .page5 .giftContent .giftBox .giftBtn.Geted{background-position: -551px -7px;}
#app .page5 .giftContent .giftBox .giftBtn.waitGet{background-position-x: -182px;}
#app .page5 .giftContent.special .giftBox .giftBtn.notAllow{background-position: -736px 1px;}
#app .page5 .giftContent.special .giftBox .giftBtn.isGet{background-position: -920px 1px;}
#app .page5 .giftContent .giftBox .giftCoin{
    position: absolute;
    left: 126px;
    top: 10px;
    display: flex;
}
#app .page5 .giftContent .giftBox .giftCoin .Coin{
    width: 15px;
    height: 24px;background-position:0 0
}
#app .page5 .giftContent  .giftBox .giftCoin .giftCoin0{background-position-y: -230px}
#app .page5 .giftContent  .giftBox .giftCoin .giftCoin1{background-position-y: 0}
#app .page5 .giftContent  .giftBox .giftCoin .giftCoin2{background-position-y: -45px}
#app .page5 .giftContent  .giftBox .giftCoin .giftCoin3{background-position-y: -92px}
#app .page5 .giftContent  .giftBox .giftCoin .giftCoin4{background-position-y: -138px}
#app .page5 .giftContent  .giftBox .giftCoin .giftCoin5{background-position-y: -184px}
/*#app .page6 .content{padding-top: 160px;}*/
#app .page6 .pageTitle{
    background-position-y: -500px;
    margin-top:-34px;
}
#app .page6 .list{
    position: relative;
    flex-flow: column;
    height: 580px;
    justify-content: space-between;
    align-items: self-start;
    margin: 56px 0;
}
.rank_ul{width:1125px;height:707px;background:url(../images/rank.png) 0 0 no-repeat;margin:26px auto 0;padding-top: 568px;position:relative;}
.rank_ul li{margin:0 auto;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;padding-top:130px;position:relative;}
.rank_ul li:nth-child(1){width:398px;height:550px;padding:0;position:absolute;top:0;left:50%;margin-left:-198px}
.rank_ul li:nth-child(2),.rank_ul li:nth-child(3){width:350px;height:475px;padding:0;position:absolute;top:36px;left:0}
.rank_ul li:nth-child(3){left:auto;right:-2px}
.rank_ul li:nth-child(7),.rank_ul li:nth-child(5),.rank_ul li:nth-child(6){background:url(../images/rankinfo.png?v=01) 0 0 no-repeat;width:1216px;height:207px;padding:8px 0 0 259px;margin-top:0;box-sizing:border-box;justify-content:flex-start;margin-bottom:46px;margin-left:-44px}
.rank_ul li:nth-child(7) dl,
.rank_ul li:nth-child(5) dl,
.rank_ul li:nth-child(6) dl{margin:0 -23px 0 0}

.rank_ul li:nth-child(7) dd,.rank_ul li:nth-child(6) dd,.rank_ul li:nth-child(5) dd{width:90px}
.rank_ul li:nth-child(7),.rank_ul li:nth-child(6){background-position-y: -211px;padding-top: 19px;margin-top:0}
.rank_ul li:nth-child(7) dl,.rank_ul li:nth-child(6) dl{margin-top:-12px}
.rank_ul li:nth-child(7){background-position-y: -422px;}
.rank_ul dl dt{width:70px;height:70px;margin:0 auto;position:relative;display: flex;align-items: center;justify-content: center;}
.rank_ul dl img{height:60px;margin:0 auto 0;}
.rank_ul dl {font-size:14px;color:#f3f9ff;text-align:center;width:134px;margin:0 5px 13px;height:94px}
.rank_ul dl dd{margin:4px auto 0;}
.rank_ul dl dt p,.rank_ul li>div div span i{width:369px;height:272px;background:url(../images/new/ch_mask.png) 0 0 no-repeat;position:absolute;z-index: 1;bottom: 38px;left:50%;display:none;margin-left: -188px;}
.rank_ul dl dt:hover p{display:block;}
/*.rank_ul dl dt span{display:block;width:200px;background:url(../images/lshy.png) 0 0 no-repeat;height:300px}*/
#all_gifts_top3{position:fixed;width:100%;height:100%;z-index:3;background:rgba(0,0,0,0.5);left:0;top:0}
.all_award_div{width:1198px;height:530px;background:url(../images/tbg.png) 0 0 no-repeat;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
.all_award_div h5{width:174px;height:34px;background-position:-240px -314px;}
.all_award_div ul li{position:relative;}
.all_award_div ul li>div{position:absolute;width:100%;height:100%;display:none;}
.all_award_div ul{padding:44px 28px 30px 48px;width:100%;height:100%;box-sizing:border-box;}
.all_award_div .c_tabs{width:134px;height:40px;background-position:0 -200px;float:left;cursor:pointer;margin:0 4px}
.all_award_div li:nth-child(1) .c_tabs{margin-left:634px}
.all_award_div li:nth-child(2) .c_tabs{background-position-x:-142px}
.all_award_div li:nth-child(3) .c_tabs{background-position-x:-284px}
.all_award_div .curr .c_tabs,.all_award_div .c_tabs:hover{background-position-y:-253px}
.all_award_div .curr>div{display:block;}
.hz_div{width:580px;height:330px;float:left;margin:52px 0 0 14px;padding-left:256px;}
.jl_div{flex-wrap:wrap;position:relative;box-sizing:border-box;align-content:center;}
.jl_div dl dt{width:92px;height:92px;background-position:-10px -315px;justify-content:center;}
.jl_div dl img{width:70px}
.jl_div dl{width:92px;text-align:center;font-size:14px;color:#4d3c38;margin:8px 4px}
.jl_div dl dd{padding:0;line-height:16px}
.hz_div dl:nth-child(1){width:210px;position:absolute;left:16px;top:12px}
.hz_div dl:nth-child(1) dt{height:294px;width:100%;background:url(../images/p1_1_02.png) 2px -6px no-repeat;}
.all_award_div ul li:nth-child(2) .hz_div dl:nth-child(1) dt{background-position-x:-242px}
.all_award_div ul li:nth-child(3) .hz_div dl:nth-child(1) dt{background-position-x:-486px}

.hz_div dl:nth-child(1) img{width:170px}
.hz_div dl:nth-child(1) dd{font-size: 16px;color: #ffc901;margin-top: -50px;}
.cy_div{width:500px;float:right;margin-top:78px;justify-content:center;}
.cy_div dl{height:106px;margin-bottom:14px}
.cy_div dl dt{width: 74px;height: 74px;background-position: -116px -326px;margin:0 auto;position:relative;}
.cy_div dl img{width:60px}
.cy_div dl dd{padding:0}
#all_gifts_top3 .close_t3{position: absolute;
  width: 27px;
  height: 26px;
  background: url(../images/new/popup/closePopup.png) center no-repeat;
  right: 50px;
  top: 42px;
  cursor: pointer;}
/*.rank_ul li:nth-child(2) dl{margin:0px 12px 13px}*/
/*
.rank_ul li>div{font-size:14px;color:#f1be66;text-decoration:underline;position:absolute;right: -134px;top: 68px;}
.rank_ul li:nth-child(2)>div{right:-60px}
.rank_ul li:nth-child(3)>div{right:-96px}
.rank_ul li>div div{z-index: 2;width:585px;height:340px;background:url(../images/tips.png) 0 0 no-repeat;font-size:14px;color:#f3f9ff;position:absolute;text-decoration:none;right:0;display: none;cursor:pointer;align-items: center;justify-content: center;align-content: center;flex-wrap: wrap;box-sizing:border-box;padding:68px 0 0}
.rank_ul li>div div p{width:80px;text-align:center;margin:0 18px 10px;height:110px}
.rank_ul li>div div span{display:flex;width:70px;height:70px;background-position: -393px -914px;align-items:center;justify-content:center;margin: 0 auto;position:relative;}
.rank_ul li>div div span img{display:block;height:64px;margin:0 auto;}
.rank_ul li>div:hover div{display:flex;}
.rank_ul li:nth-child(3)>div div{background-position-y:-343px}
.rank_ul li:nth-child(2)>div div{background-position-y:-684px}
.rank_ul li:nth-child(1)>div div p{margin:0 12px 10px}
.rank_ul li>div div span>span:hover i{display:block;}
.rank_ul li>div div span a{display:block;width:100%;height:100%}
.rank_ul li>div div span i a,.rank_ul dl dt div .move_bg span.szwg{transform:scale(1);left: -98px;position: absolute;top: -34px;display:block;width:500px;background:url(../images/lshy.png) 0 -52px / 4200px auto no-repeat;height:336px;animation:lszj 1s steps(8) infinite;}
*/
.d_bg{background:url(../images/gbg.png) 0 0 no-repeat;}
.masksaward{width:410px;height:316px;background:url(../images/masks.png) 0 18px no-repeat;flex-shrink:0}
.rank_ul li:nth-child(1)>div{top:-100px}
.rank_ul li:nth-child(1) .masksaward{height:400px;background-position-y:-310px}
.rank_ul li:nth-child(3) .masksaward{background-position-y:-718px}
.rank_ul li>div dl{width:74px;height:74px;background-position:-116px -326px;}
.rank_ul li>div dl dt{width:74px;height:58px}
.rank_ul li>div dl:nth-child(6),.rank_ul li>div dl:nth-child(5){display:none;}
.rank_ul li>div dd{font-size:14px;color:#fef2d1;text-shadow:-2px -2px 2px #c55131,  
     2px -2px 2px #c55131,
    -2px  2px 2px #c55131,
     2px  2px 2px #c55131;margin-top:0}

.rank_ul li>div dl dt div span{transform: scale(0.5);}
.rank_ul li>div dl dt div span.zjwg{top:-70px}
.rank_ul li>div dl dt div span.szwg{left:-83px;top:-70px}
.rank_ul li>div dl dt div span.yywg{left:-58px;top:-54px}
.rank_ul li>div {position:relative;top:-80px}
.show_all_award{width:430px;height:78px;background-position:0 -10px;margin:0 auto;cursor:pointer;}
.show_all_award:hover{background-position-y:-101px}
@keyframes lszj {
    0% {background-position-x: 0;}
    100% {background-position-x: -4200px;}
}
.rank_ul li>div div span .s6ch a,.rank_ul dl dt .s6ch,.cy_div dl dt .s6ch{width: 148px;height: 76px;background: url(../images/dfwz.png?v=1) 0 0 /1800px auto no-repeat;position: absolute;left: -39px;top: -2px;animation:s6ch_mov 1s steps(12) infinite;}
@keyframes s6ch_mov {
    0% {background-position-x: 0;}
    100% {background-position-x: -1800px;}
}
.rank_ul li>div div span .s6ch i a,.rank_ul dl dt div span{background: url(../images/dfwz.png?v=1) 0 0 /2800px auto no-repeat;width: 351px;height: 194px;left: 11px;top: 28px;animation:s6ch_mov_i 1s steps(12) infinite;display:block;position:absolute;}
@keyframes s6ch_mov_i {
    0% {background-position-x: 0;}
    100% {background-position-x: -2800px;}
}

.rank_ul dl dt div span.yywg,.rank_ul li > div div span .yywg a{background:url(../images/yywg.png) -54px -5px /2000px auto no-repeat;animation:yywg_an 1s steps(7) infinite;width: 200px;height: 174px;top: -70px;left: -55px;}
.rank_ul dl dt div .move_bg span.yywg,.rank_ul li > div div span .yywg i a{transform: scale(1);width:354px;left:7px;top:-8px;height:254px;background-size:3584px auto;animation:yywg_an_move 1s steps(7) infinite;}
.rank_ul li > div div span .yywg a{top: -52px;left: -57px;position: absolute;transform: scale(.6);}
@keyframes yywg_an {
    0% {background-position-x: -54px;}
    100% {background-position-x: -2054px;}
}
@keyframes yywg_an_move {
    0% {background-position-x: -80px;}
    100% {background-position-x: -3664px;}
}
.rank_ul dl dt div span.zjwg,.rank_ul li > div div span .zjwg a{background:url(../images/zjwg.png) 0 0 /1000px auto no-repeat;animation:zjwg_an 1s steps(6) infinite;width:164px;left:-48px;top:-70px}
.rank_ul li > div div span .zjwg a{top: -60px;left: -48px;position: absolute;transform: scale(.6);height:186px}
.rank_ul dl dt div .move_bg span.zjwg,.rank_ul li > div div span .zjwg i a{transform: scale(1);width:300px;left:34px;top:-42px;height:312px;background-size:1800px auto;animation:zjwg_an_move 1s steps(6) infinite;}
@keyframes zjwg_an {
    0% {background-position-x: -0px;}
    100% {background-position-x: -1000px;}
}
@keyframes zjwg_an_move {
    0% {background-position-x: -0px;}
    100% {background-position-x: -1800px;}
}





.rank_ul dl dt div span.szwg,.rank_ul li > div div span .szwg>a{background:url(../images/lshy.png) 0 0 / 2000px auto no-repeat;animation:szwg_an 1s steps(8) infinite;width:200px;top:-80px;left:-94px;}
.rank_ul li > div div span .szwg>a{top: -70px;left: -88px;position: absolute;transform: scale(.7);height: 190px;}
@keyframes szwg_an {
    0% {background-position-x: 0;}
    100% {background-position-x: -2000px;}
}

.rank_ul dl dt div span.hzsz{background:url(../images/hzsz.png) -22px 0 /2000px auto no-repeat;animation:hzsz_an 1s steps(8) infinite;width:200px;left: -72px;top: -76px;}
.rank_ul dl dt div .move_bg span.hzsz{background-size:5000px auto;animation:hzsz_an_move 1s steps(8) infinite;width: 470px;height: 358px;background-position: -62px -94px;top:-40px;left:-90px}
@keyframes hzsz_an {
    0% {background-position-x: -22px;}
    100% {background-position-x: -2022px;}
}
@keyframes hzsz_an_move {
    0% {background-position-x: -62px;}
    100% {background-position-x: -5062px;}
}

#app .page6 .list .rule p{
    font-size: 16px;
    margin: 22px 0;
    padding: 0 108px 0 0;
    line-height: 28px;
    color: #767677;
}
#app .page6 .list .rule a{color: #47b5ff;}
#app .page6 .list .giftLi{
    position: relative;
    width: ;
    height: 102px;
    background: url(../images/img/bottomGiftBg.png) 0 0;
}
#app .page6 .list .giftLi .giftBox.inGift{
    position: absolute;
    width: ;
    height: 0;
    opacity: 0;
    bottom: -110px;
    z-index: -1;
    transition: all 0.3s;
}
#app .page6 .list .giftLi.top_1 .inGift,#app .page6 .list .giftLi.top_2 .inGift,#app .page6 .list .giftLi.top_3 .inGift{
    width: 1130px;
    height: 213px;
    display: flex;
    flex-flow: wrap;
    bottom: -110px;
    background: url(../images/img/giftBg/one.png) center no-repeat;
}
#app .page6 .list .a{position: absolute;right: 0;top: -62px;font-size: 18px !important;}
#app .page6 .list .a a:hover{color: #8ac8f1;}
#app .page6 .list .giftLi.top_2 .inGift{
    background-image: url(../images/img/giftBg/two.png);
}
#app .page6 .list .giftLi.top_3 .inGift{
    background-image: url(../images/img/giftBg/three.png);
}
#app .page6 .list .giftLi.top_1:hover .inGift{height: 213px;opacity: 1;bottom: -214px;z-index: 1;}
#app .page6 .list .giftLi.top_2:hover .inGift{height: 213px;opacity: 1;bottom: -214px;z-index: 1;}
#app .page6 .list .giftLi.top_3:hover .inGift{height: 102px;opacity: 1;bottom: -103px;z-index: 1;}
#app .page6 .list .giftLi .inGift .box{
    flex-flow: wrap;
    margin-left: 112px;
    margin-top: -4px;
}
#app .page6 .list .giftLi .inGift .box .gift{margin-bottom: 20px;margin-top: 12px;background: url(../images/img/giftBg/giftBg.png) center no-repeat !important;}
#app .page6 .list .giftLi.top_3 .inGift .box .gift{margin: 0 28px;}
#app .page6 .list .giftLi.top_3 .inGift .box{margin-top: -16px;}
#app .page6 .list .giftLi .hoverText{
    position: absolute;
    top: -24px;
    left: 0;
    color: #f1b06a;
    text-decoration: underline;
    height: 26px;
}
#app .page6 .list .giftLi .leftTitle{width: 113px;height: 102px;background: url(../images/img/giftBg/bg1.png) center no-repeat;}
#app .page6 .list .giftLi.top_2 .leftTitle{background-image: url(../images/img/giftBg/bg2.png);}
#app .page6 .list .giftLi.top_3 .leftTitle{background-image: url(../images/img/giftBg/bg3.png);}
#app .page6 .list .giftLi.top_4 .leftTitle{background-image: url(../images/img/giftBg/bg4.png);}
#app .page6 .list .giftLi.top_8 .leftTitle{background-image: url(../images/img/giftBg/bg5.png);}
#app .page6 .list .giftLi.top_16 .leftTitle{width: 127px;background-image: url(../images/img/giftBg/bg6.png);}
#app .page6 .list .giftLi.top_32 .leftTitle{width: 127px;background-image: url(../images/img/giftBg/bg7.png);}
#app .page6 .list .giftLi .giftBox .gift{
    position: relative;
    display: flex;
    justify-content: center;
    flex-flow: column;
    width: 70px;
    color: #f1b06a;
    font-size: 12px;
    height: 70px;
    margin: 0 37.65px;
    background: url(../images/img/giftBg/giftBg.png) center no-repeat;
}
#app .page6 .list .giftLi .giftBox{display: flex;align-items: center;margin-top: -14px;}
#app .page6 .list .giftLi .giftBox .gift .giftImg{width: 70px;height: 70px;background: center no-repeat;margin: -5px 0 0 1px;}
#app .page6 .list .giftLi .giftBox .gift .giftName{position: absolute;width: 140px;text-align: center;left: 50%;transform: translate(-50%);bottom: -20px;}
#app .page6 .list .giftLi.top_16 .gift,#app .page6 .list .giftLi.top_32 .gift{margin: 0 36.65px;}
#app .page6 .list .giftLi.top_1 .giftBox .gift,#app .page6 .list .giftLi.top_2 .giftBox .gift,#app .page6 .list .giftLi.top_3 .giftBox .gift{background: none;}
#app .page6 .list .giftLi.top_1,#app .page6 .list .giftLi.top_2,#app .page6 .list .giftLi.top_3{
    width: 1130px;
    height: 103px;
    background: url(../images/img/giftBg/oneBg.png) center no-repeat;
}
#app .page6 .list .giftLi.top_2{width: 770px;background-image: url(../images/img/giftBg/twoBg.png);}
#app .page6 .list .giftLi.top_3{width: 645px;background-image: url(../images/img/giftBg/threeBg.png);}
#app .page6 .list .giftLi.top_1 .giftBox.outGift{margin-left: 13px;margin-top: -15px;}
#app .page6 .list .giftLi.top_1 .giftBox.outGift .gift{margin: 0 24px;
    margin-right: 30px;background: none;}
#app .page6 .list .giftLi.top_1 .giftBox.outGift .gift.gift4{}
#app .page6 .list .giftLi.top_1 .inGift .box .gift .giftImg.zq_s,#app .page6 .list .giftLi.top_2 .inGift .box .gift .giftImg.zq_s,#app .page6 .list .giftLi.top_1 .giftBox.outGift .gift .giftImg.zq_s,#app .page6 .list .giftLi.top_2 .giftBox.outGift .gift .giftImg.zq_s,#app .page6 .list .giftLi.top_3 .giftBox.outGift .gift .giftImg.zq_s{
    width: 154px !important;
    height: 129px !important;
    background: url(../images/img/giftBg/zj.png) -82px -105px no-repeat;
     animation: zq_s 1s steps(8) infinite;
    left: -45px !important;
    top: -8px !important;
    position: absolute;
}
@keyframes zq_s {
    0% {
        background-position-x: -82px;
    }

    100% {
        background-position-x: -2642px;
    }
}
#app .page6 .list .giftLi.top_1 .inGift .box .gift .giftImg.cb_s,#app .page6 .list .giftLi.top_2 .giftBox.inGift .gift .giftImg.cb_s,#app .page6 .list .giftLi.top_3 .giftBox.inGift .gift .giftImg.cb_s,#app .page6 .list .giftLi.top_1 .giftBox.outGift .gift .giftImg.cb_s,#app .page6 .list .giftLi.top_2 .giftBox.outGift .gift .giftImg.cb_s,#app .page6 .list .giftLi.top_3 .giftBox.outGift .gift .giftImg.cb_s{
    width: 120px;
    height: 138px;
    background: url(../images/img/giftBg/cb.png) -52px -40px no-repeat;
     animation: cb_s 1s steps(8) infinite; 
    left: -26px;
    top: -36px;
    position: absolute;
}
#app .page6 .list.thirdTwo .giftLi .giftBox .gift.gift6 .giftImg,
#app .page6 .list .giftLi.top_1 .inGift .box .gift:nth-child(10) .giftImg,
#app .page6 .list .giftLi.top_2 .inGift .box .gift:nth-child(9) .giftImg,
#app .page6 .list .giftLi.top_3 .inGift .box .gift:nth-child(8) .giftImg{
    position: absolute;
    width: 134px;
    height: 164px;
    top: -60px;
    left: -38px;
    transform: scale(0.8);
    background: 0 0 no-repeat;
    background-image: url(../images/img/jbch.png) !important;
    animation: jbch 1s steps(10) infinite;
}
@keyframes jbch {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: -1500px;
    }
}

#app .page6 .list .giftLi .inGift .box .gift .giftImg.cb_s{background-image: url(../images/img/giftBg/cb.png) !important;}
#app .page6 .list .giftLi .inGift .box .gift .giftImg.zq_s{background-image: url(../images/img/giftBg/zj.png) !important;}
@keyframes cb_s {
    0% {
        background-position-x: -52px;
    }

    100% {
        background-position-x: -1772px;
    }
}
#app .page6 .list .giftLi.top_2 .giftBox.outGift .gift{
    margin: -4px 16px 0 38px;
}
#app .page6 .list .giftLi.top_3 .giftBox.outGift .gift{
    margin: -4px 16px 0 38px;
}


/*foot*/
.wrapper-footer {position: relative; min-width: 1200px; background: #000; height: 202px;margin-top: -5px;margin-top: -12px;}
.wrapper-inner { width: 1000px; margin: 0 auto; position: relative }
.wrapper-inner .qr-left { float: left; width: 282px; height: 138px; background: url(//cdn.51img3.com/game/2024/202411/20241105/a3616904892947f98499a76890cf413a.png) center / 100% no-repeat; margin: 30px 0 0 90px }
/*.x .wrapper-inner .qr-left {background-image: url(//cdn.51img3.com/game/2022/202204/20220426/42447f6b33f221a841d3a593bb2994cc.png);}*/
.wrapper-inner .f-info-right { float: right; width: 500px; height: 40px; margin: 35px 40px 0 0; text-align: center }
.wrapper-inner .f-info-right a { color: #fff; }
.f-info-right .footer-logo { display: block; width: 127px; height: 45px; margin: 10px auto }
.f-info-right p { color: #fff; line-height: 30px }


/* 弹框 */
.alert-wrap{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 90;
}
.alert-wrap .btn-close{
    position: absolute;
    width: 27px;
    height: 26px;
    background: url(../images/new/popup/closePopup.png) center no-repeat;
    right: 50px;
    top: 42px;
    cursor: pointer;
    transition: transform 0.3s;
}
.alert-wrap .btn-close:hover{
    transform: rotate(180deg);
}
.alert-wrap .shadow-box{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,0.5);
}
.alert-wrap .msg-alert{
    width: 858px;
    height: 514px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(../images/new/popup/normalPopupBg.png) center no-repeat;
}
.alert-wrap .msg-alert.myGiftTableGuessLog{
    width: 800px;
    background-image: url(../images/new/popup/guessPopupBg.png);
}
/*.alert-wrap .msg-alert.calendar{
    background-image: url();
}*/
.alert-wrap .msg-alert .msg-tit{
    text-align: center;
}
.alert-wrap .msg-alert h3{
    font-size: 26px;
    padding: 26px 40px 6px 48px;
    color: #4b545d;font-weight:normal;margin:22px auto 0;
}
.alert-wrap .msg-alert.myGuessRules .msg-con{
    font-size: 16px;
    margin: 0px 40px 0 48px;
    width: auto;
    height: 366px;
}

.alert-wrap .msg-alert .msg-con{
    margin:0 40px 0 48px;
    height: 335px;
    color: #1d2127;
    font-size:24px;
    margin: 14px 34px 0 46px;
    overflow-y: auto;
    overflow-x: hidden;
}
.alert-wrap .msg-alert.showHDRule .msg-con{
    font-size: 16px;
    width:774px;height:368px;
}
.alert-wrap .msg-alert .msg-con p{
    line-height: 30px;text-align:center;
}
.alert-wrap .msg-alert.showHDRule .msg-con p,.alert-wrap .msg-alert.myGuessRules p{text-align: left;line-height: 26px;margin: 0 0 14px;text-align:left;}
.alert-wrap .msg-alert.myGuessRules .msg-con p{margin:0}
.alert-wrap .msg-alert .msg-con::-webkit-scrollbar {
    width: 6px;
    height: 5px;
}
.alert-wrap .msg-alert .msg-con::-webkit-scrollbar-track {
    /*-webkit-box-shadow: inset 0 0 0.5rem rgba(91,131,229,0.2);*/
    background: #e8dcc5;
    border-radius: 20px;
}
.alert-wrap .msg-alert .msg-con::-webkit-scrollbar-thumb {
    border-radius: 20px;
    /*-webkit-box-shadow:  0 0 0.5rem rgba(243,212,250,0.2);*/
    background: #c7a666;
}
.alert-wrap .msg-alert.myGiftTable .msg-con{
    margin-top: 22px;
    height: 310px;
}
.alert-wrap .msg-alert.myGiftTable.guessRankPopup .msg-con{
    height: 234px;
}
.alert-wrap .msg-alert.myGiftTable.myGiftTableLog .msg-con{margin-top: 0;width:800px;height:362px}
.alert-wrap .msg-alert.myGiftTable .msg-con .myRank{
    position: absolute;
    display: flex;
    top: 72px;
    left: 50%;
    transform: translate(-50%);
    color: #ff9500;
    font-weight: bold;
    font-size: 20px;
    white-space: nowrap;
    justify-content: space-between;
    width: 66%;
}
.alert-wrap .msg-alert .msg-con table{
    width:800px;margin:0 auto;
    text-align: center;
}
.alert-wrap .msg-alert .msg-con table.guessRank {
    width: 84%;
    text-align: center;
    margin: 0 auto;
}
.alert-wrap .msg-alert .msg-con table th,.alert-wrap .msg-alert .msg-con table td{text-align: center;width: 118px;}
.alert-wrap .msg-alert .msg-con table th{color:#b54315;font-size:18px;font-weight:normal;}
.alert-wrap .msg-alert.myGiftTableGuessLog .msg-con table th, .alert-wrap .msg-alert.myGiftTableGuessLog .msg-con table td{width: 117px;white-space: nowrap;}
.alert-wrap .msg-alert .msg-con table.guessRank th,.alert-wrap .msg-alert .msg-con table.guessRank td{text-align: center;width: 106px;white-space: nowrap;}
.alert-wrap .msg-alert .msg-con table tbody tr{
    display: flex;
    justify-content: space-around;
    margin-bottom: 8px;
    font-size: 15px;
}
.alert-wrap .msg-alert .msg-con .luckGiftBox{
    margin-top: 35px;
    font-size: 16px;
}
.alert-wrap .msg-alert .msg-con .luckGiftBox .pimg{display: flex;justify-content: center;margin-bottom: 20px;}
.alert-wrap .msg-alert .msg-con .luckGiftBox p{text-align: center;}
.alert-wrap .msg-alert .msg-con .tip2{text-align: center;font-size: 16px;margin-top: 62px;}
.alert-wrap .msg-alert .msg-con .service-nav{
    z-index: 1;
    width: 286px;
    margin: 50px auto 0;
    position: absolute;
    left: 52%;
    transform: translate(-50%);
    top: 124px;
}
.alert-wrap .msg-alert .msg-con .service-nav .uname{margin-top: 18px;}
.alert-wrap .msg-alert .msg-con .service-nav .uname .searchable-select-caret{display: none;}
.alert-wrap .msg-alert .msg-con .service-nav #comment_role_name{
    border: 1px solid #cccccc;
    border-radius: 4px;
    width: 200px;
    height: 33px;text-align:center;
    appearance: none;
    color: #555;
    outline: none;
    padding-left: 7px;
}
.alert-wrap .msg-alert .msg-con .btn-alert{
    position: absolute;
    left: 50%;
    bottom: 45px;
    transform: translateX(-48%);
    width: 166px;
    height: 43px;
    color: #fff5d6;
    background: url(../images/new/popup/popupBtn.png) center no-repeat;
    text-align: center;
    line-height: 46px;
    font-weight: bold;
    font-size: 22px;
    cursor: pointer;
    transition: filter 0.2s;font-family: 宋体;
      font-style: italic;
      font-weight: bold;
}
.alert-wrap.resPopup .msg-alert .msg-con .btn-alert .btn-alert{
    bottom: 30px;
}
.alert-wrap .msg-alert .msg-con .btn-alert:hover{
    filter: brightness(1.1);
}
.alert-wrap .msg-alert.myGuessRules tr{
    margin: 0 !important;
}
.alert-wrap .msg-alert.myGuessRules tr th{
    background: #525961;
    color: #fff;
    border: 1px solid #525961;width:200px;
    padding: 8px 4px;
}
.alert-wrap .msg-alert.myGuessRules tr th:last-child{
    /*border-right-color: #525961;*/
}
.alert-wrap .msg-alert.myGuessRules tr td{
    color: #1d2127;
    /*border: 1px solid;*/
    margin-bottom: -1px;
    margin-left: 0px;
    padding: 8px 4px;width:200px;
}
/*.alert-wrap .msg-alert.myGuessRules .msg-con p{
    padding: 0 70px;
    line-height: 32px;
    color: #525961;
}*/
.alert-wrap .msg-alert.myGuessRules .msg-con p:first-child{
    margin-top: 20px;
}
.alert-wrap .msg-alert.myGuessRules .msg-con table{
    width: 436px;
    margin: 0 auto 10px;border-color:#525961;
}
/* 兑换框 */
.alert-wrap.exchangePopup{display: none;}
.alert-wrap.exchangePopup .msg-alert{
    width: 470px;
    height: 335px;
    background: url(../images/new/popup/smallPopupBg.png) center no-repeat;
}
.alert-wrap.exchangePopup .msg-alert .bottom{justify-content: center;margin: 34px 0 24px 0;}
.alert-wrap.exchangePopup .msg-alert .bottom .add, .alert-wrap.exchangePopup .msg-alert .bottom .cut{
    color: #525961;
    border: 1px solid;
    /* padding: 0px 10px; */
    font-size: 42px;
    cursor: pointer;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;overflow:hidden;
}
.notdisplay{display: block !important;}
.alert-wrap.exchangePopup .msg-alert .bottom .add:hover, .alert-wrap.exchangePopup .msg-alert .bottom .cut:hover{
    color: #fff;
    background: #525961;
    border-color: #525961;
}
.alert-wrap.exchangePopup .msg-alert .bottom .cut span{margin-top: -12px;font-size: 66px;}
.alert-wrap.exchangePopup .msg-alert .bottom .input{
    position: relative;
    height: 32px;
    width: 200px;
    background: none;
    margin: 0 10px;
    color: #3b0100;
    line-height: 32px;
}
.alert-wrap.exchangePopup .msg-alert .bottom .input .giftNum{
    position: absolute;
    color: #e8a865;
    background: rgba(0,0,0,0.6);
    width: 20px;
    top: -27px;
    display: flex;
    justify-content: center;
    border-radius: 14px 14px 48px 48px;
}
.alert-wrap.exchangePopup .msg-alert .msg-con{text-align: center;}
.alert-wrap.exchangePopup .msg-alert .msg-con .mtitle{
    margin: 14px 0 14px 0;
}
.alert-wrap.votePopup div{text-align: center;}
.alert-wrap.votePopup .mtitle{font-size: 18px;color: #1d2127;margin-bottom:4px}
.alert-wrap.votePopup.resPopup .mtitle.text1{
    margin-top: 28px;
    font-size: 22px;
}
.alert-wrap.votePopup.resPopup .mtitle.text3{
    font-size: 22px;
}
.alert-wrap.votePopup.resPopup .mtitle.text2, .alert-wrap.votePopup.resPopup .mtitle.text4{
    font-size: 32px;
    color: #b54315;
    font-weight: bold;
    margin:-6px 0 16px ;
}
.alert-wrap.votePopup.resPopup .mtitle.text5{color: #1d2127;font-size: 14px;margin-top: 16px;width: 400px;
  top: 392px;
  left: 65px;position:absolute;}
.alert-wrap.votePopup .guildName{
    font-size: 20px;
    color: #bb4b00;
}
.alert-wrap.votePopup .tips_error{color: #f36027;font-size: 14px;margin-top: 16px;}
.alert-wrap.votePopup .bottom{
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.alert-wrap.votePopup .bottom .add, .alert-wrap.votePopup .bottom .cut{
    color: #525961;
    border: 1px solid;
    font-size: 42px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;overflow:hidden;
}
.alert-wrap.votePopup .bottom .input{
    background: url(../images/new/input.png) center no-repeat;
    margin: 0 16px;
    width: 104px;
    color: #3b0100;
    line-height: 32px;
}
.alert-wrap.votePopup .msg-alert .bottom .add:hover, .alert-wrap.votePopup .msg-alert .bottom .cut:hover{
    color: #fff;
    background: #525961;
    border-color: #525961;
}
.alert-wrap.votePopup .msg-alert {
    width: 515px;
    height: 384px;
    background-image: url(../images/new/newspaper.png);
}


.searchable-select-dropdown{z-index: 1;}

/* 隐藏range控件默认样式 */
    [type="range"] {
      -webkit-appearance: none;
      appearance: none;
      margin: 0;
      outline: 0;
      background-color: transparent;
      width: 200px;
      border-radius: 10px;
    }
    /* 定义range控件轨道的样式 */
    [type="range"]::-webkit-slider-runnable-track {
      height: 4px;
      background: #e8a865;
      border-radius: 10px;
    }
    /* 定义range控件容器的样式 */
    [type="range" i]::-webkit-slider-container {
      height: 20px;
      overflow: hidden;
      border-radius: 10px;
    }
    /* 定义range控件拇指的样式 */
    [type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      border-radius: 10px;
      appearance: none;
      cursor: grab;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #e8a865;
      border: 1px solid transparent;
      margin-top: -8px;
      /* 使用border-image属性给拇指添加渐变边框 */
      border-image: linear-gradient(#525961, #525961) 0 fill / 8 20 8 0 / 0px 0px 0 2000px;
    }
    ul, ol, li {
    list-style: none;
}
video{
    position: absolute;
    left: 50%;
    z-index: -1;
    width: 1920px;
    height: 1080px;
    transform: translate(-50%);
    top:-96px;
    transition: all 0.3s;display:none;
}
/*.page1 video{display: none;}*/
video.isShowSign{top: 0;}
#news_mask{
    left: -1304px;
}
.page1_card_group {
    width: 1128px;
    top: 9px;
    position: relative;
    display: flex;
    justify-content: space-between;
    margin: 36px auto;
}

.page1_card_1 {
    background: url(../images/rank1.png?v=2432703) top center no-repeat;
    width: 333px;
    height: 677px;
    position: relative;
}

.page1_card_2 {
    background: url(../images/rank2.png?v=2432702) top center no-repeat;
    width: 333px;
    height: 573px;
    margin-top: 44px;
    position: relative;
}

.page1_card_3 {
    background: url(../images/rank3.png?v=2432702) top center no-repeat;
    width: 333px;
    height: 573px;
    margin-top: 44px;
    position: relative;
}

.page1_card_box {
    width: 260px;
    margin: 34px auto 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.page1_card_top {
    margin: 64px auto 0px;
    width: 286px;
    height: 94px;
    background: url(../images/rank_top.png) top center no-repeat;
    position: relative;
    left: -2px;
}

.page1_award {
    width: 116px;
    height: 96px;
    margin-bottom: 42px;
    position: relative;
}

.page1_award .page1_award_img {
    width: 100%;
    height: 100%;
    display: block;
}

.page1_card_2 .page1_award_name {
    white-space: nowrap;
    font-size: 14px;
    color: #48597b;
    margin-top: 5px;
    text-align: center;
    position: absolute;
    bottom: -25px;
    width: 100%;
    text-align: center;
}

.page1_card_1 .page1_award {
    margin-bottom: 36px;
    width: 116px;
}

.page1_card_1 .page1_award_name {
    white-space: nowrap;
    font-size: 14px;
    color: #6f4a1a;
    margin-top: 5px;
    text-align: center;
    position: absolute;
    bottom: -25px;
    width: 100%;
    text-align: center;
}

.page1_card_3 .page1_card_box {
    margin-top: 47px;
}

.page1_card_3 .page1_card_box .page1_award:first-child {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.page1_card_3 .page1_card_box .page1_award:first-child .page1_award_img {
    width: 96px;
}

.page1_card_3 .page1_award_name {
    font-size: 14px;
    color: #934940;
    margin-top: 5px;
    text-align: center;
    position: absolute;
    bottom: -25px;
    width: 100%;
    text-align: center;
}

.page1_btn_1.page1_btn_active {
    background-position: -0px -632px;
}

.page1_btn_2.page1_btn_active {
    background-position: -340px -632px;
}

.page1_btn_3.page1_btn_active {
    background-position: -677px -632px;
}

.si_div {
    position: absolute;
    top: 5px;
    left: 164px;
    padding-top: 20px;
    display: flex;
}

.si_div li {
    width: 106px;
    height: 94px;
    float: left;
    margin: 0 17.5px;
    text-align: center;
    white-space: nowrap;
}

.si_div li div {
    width: 72px;
    height: 72px;
    background-position: -589px -33px;
    margin: 0 auto 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.si_div li div img {
    display: block;
    width: 70px;
}

.si_div.gu5 {
    top: 178px;
}

.si_div.gu6 {
    top: 352px;
}

.page1_card1_tip,.page1_card2_tip,.page1_card3_tip {
    font-size: 16px;
    color: #767677;
    text-decoration: underline;
    position: absolute;
    bottom: -30px;
    width: 100%;
    text-align: center;
    cursor: pointer;
}

.page1_card1_box {
    width: 1173px;
    height: 0px;
    position: absolute;
    bottom: 30px;
    left: 209px;
    margin-left: -207px;
    transition: 0.5s height;
    overflow: hidden;
    color: #feefcb
}

.page1_card1_pop {
    width: 1173px;
    height: 246px;
    background: url(//cdn3.51img1.com/v7/huodong/xb/xbs5booking/images/images/card2_pop.png?v=120211) no-repeat;
    position: absolute;
    z-index: 99;
    cursor: default;
}

.page1_card1_tip:hover .page1_card1_box {
    height: 246px
}

.page1_card2_box {
    width: 1173px;
    height: 0px;
    position: absolute;
    bottom: 30px;
    left: -214px;
    margin-left: -207px;
    transition: 0.5s height;
    overflow: hidden;
    color: #feefcb
}

.page1_card2_pop {
    width: 1173px;
    height: 246px;
    background: url(//cdn3.51img1.com/v7/huodong/xb/xbs5booking/images/images/card1_pop.png?v=120211) no-repeat;
    position: absolute;
    z-index: 99;
    cursor: default;
}

.page1_card2_tip:hover .page1_card2_box {
    height: 246px
}

.page1_card3_box {
    width: 1173px;
    height: 0px;
    position: absolute;
    bottom: 30px;
    left: -590px;
    margin-left: -207px;
    transition: 0.5s height;
    overflow: hidden;
    color: #feefcb
}

.page1_card3_pop {
    width: 1173px;
    height: 246px;
    background: url(//cdn3.51img1.com/v7/huodong/xb/xbs5booking/images/images/card3_pop.png?v=120211) no-repeat;
    position: absolute;
    z-index: 99;
    cursor: default;
}

.page1_card3_tip:hover .page1_card3_box {
    height: 246px
}

.page1_award2 {
    padding-top: 1px;
    margin-bottom: 70px;
}

.page1_award2 .page1_award_box {
    margin-top: 5px;
}

.page1_card4_pop {
    width: 1130px;
    height: 110px;
    background: url(//cdn3.51img1.com/v7/huodong/xb/xbs5booking/images/images/card4_pop.png?v=120211) no-repeat;
}

.page1_card5_pop {
    width: 1130px;
    height: 110px;
    background: url(//cdn3.51img1.com/v7/huodong/xb/xbs5booking/images/images/card5_pop.png?v=120211) no-repeat;
}

.page1_card6_pop {
    width: 1130px;
    height: 110px;
    background: url(//cdn3.51img1.com/v7/huodong/xb/xbs5booking/images/images/card6_pop.png?v=120211) no-repeat;
}

.page1_card7_pop {
    width: 1130px;
    height: 110px;
    background: url(//cdn3.51img1.com/v7/huodong/xb/xbs5booking/images/images/card7_pop.png?v=120211) no-repeat;
}

/*.page1_card4_pop .page1_award_box,.page1_card5_pop .page1_award_box,.page1_card6_pop .page1_award_box,.page1_card7_pop .page1_award_box {padding-right:40px;box-sizing: border-box;;justify-content: space-between;width: 1033px;}*/
.page1_award_group {
    position: relative;
    width: 1173px;
    height: 487px;
    background: url(../images/new/bottomGiftBg.png);
    top: 96px;
    margin: 0 auto;

}

/*.page1_award_group>div{margin-top: -5px;width: 100%}*/
.award_title {
    background: url(//cdn3.51img1.com/v7/huodong/xb/xbs5booking/images/images/award_title.png) 0 0 no-repeat;
    height: 45px;
    width: 444px;
    margin-bottom: 7px;
}

.page1_award_box {
    width: 1074px;
    margin: -3px auto;
    height: 92px;
    text-align: center;
    color: #f1b06a;
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 26px;
    margin-left: 154px
}

.page1_award_item {
    width: 72px;
    height: 94px;
    background: url(//cdn3.51img1.com/v7/huodong/xb/xbs5booking/images/images/icon.png) -589px -33px no-repeat;
    margin: 0 14px 14px 53px;
}

.page1_award_item img {
    display: block;
    width: 64px;
    height: 64px;
    margin: 3px auto 6px;
}

.page1_award_item span {
    display: block;
    width: 150px;
    margin-left: -39px;
    font-size: 12px;
    color: #333
}

.page1_award_line {
    background: url(//cdn3.51img1.com/v7/huodong/xb/xbs5booking/images/images/award_line.png) top center no-repeat;
    width: 1229px;
    height: 23px;
    margin-left: -15px;
}

.page1_award_16_title {
    background-position: 0px -82px
}

.page1_award_8_title {
    background-position: 0px -154px
}

.page1_award_4_title {
    background-position: 0px -240px
}

.page1_award_3_title {
    background-position: 0px -314px
}

.page1_award_2_title {
    background-position: 0px -383px
}

.page1_award_1_title {
    background-position: 0px -449px
}

.page1_rule_group {
    width: 1018px;
    color: #f1b06a;
    font-size: 14px;
    line-height: 26px;
    position: absolute;
    top: 100px ;
    left: 90px;
}

.top_three_group {
    position: absolute;
    top: 894px;
}

.cy_div dl dt .s6ch{left:-35px}
.ani.ani1 {
    width: 160px;
    height: 160px;
    background: url(//cdn3.51img1.com/v7/huodong/xb/xbs5booking/images/images/hz.png) -36px -26px no-repeat;
    animation: ani1 1s steps(8) infinite;
    left: -30px;
    top: -60px;
    position: absolute;
}

@keyframes ani1 {
    0% {
        background-position-x: -36px;
    }

    100% {
        background-position-x: -2236px;
    }
}

.ani.ani0 {
    width: 160px;
    height: 160px;
    background: url(//cdn3.51img1.com/v7/huodong/xb/xbs5booking/images/images/cy.png) -40px -24px no-repeat;
    animation: ani0 1s steps(8) infinite;
    left: -30px;
    top: -60px;
    position: absolute;
}

@keyframes ani0 {
    0% {
        background-position-x: -40px;
    }

    100% {
        background-position-x: -2240px;
    }
}

.ani.ani2 {
    width: 160px;
    height: 160px;
    background: url(//cdn3.51img1.com/v7/huodong/xb/xbs5booking/images/images/lscb.png) 0 0 no-repeat;
    animation: cb_s 1s steps(8) infinite;
    left: -28px;
    top: -44px;
    position: absolute;
}

@keyframes cb_s {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: -1400px;
    }
}

.ani.ani3 {
    width: 230px;
    height: 200px;
    background: url(//cdn3.51img1.com/v7/huodong/xb/xbs5booking/images/images/sj.png) 0 0 no-repeat;
    animation: zq_s .5s steps(4) infinite;
    left: -67px;
    top: -84px;
    position: absolute;
}

@keyframes zq_s {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: -1170px;
    }
}
.el-tooltip__popper.is-dark{
    color: #fff !important;
    background: rgba(0, 0, 0, 0.6) !important;
    min-width: 2px !important;
    display: flex !important;
    font-size: 14px;
    justify-content: center;
    border-radius: 14px 14px 48px 48px;
}
.el-slider__button {border-color: #525961 !important;background-color: #fff !important;}
.el-slider__bar{background-color: #525961 !important;}
.el-slider__runway{background-color: #a1a2a2 !important;}

.alert-wrap.votePopup .msg-alert .msg-con{height:352px;text-align:left;}
.alert-wrap.votePopup .msg-alert .msg-tit{margin-top:0;padding-bottom:26px}
.news_div_alert{border:3px solid #434d57;width:820px;height:420px;position:absolute;transform: scale(.466);top: 88px;left: -148px;}
#newsPaper{width:820px;height:420px;background:center no-repeat;position:relative;}
#newsPaper .news_role_name{font-size:46px;color:#434d57;text-align:left;font-weight:bold;top:86px;left:64px;position:absolute;}
#newsPaper p,#newsPaper h5{text-align:left;}
#newsPaper h5{font-size:26px;color:#ffffff;font-weight:bold;position:absolute;top:340px;left:66px}
#newsPaper h5 p{font-size:20px;color:#dcc0ff}
#newsPaper h5 p span{font-size:12px;color:#dedede;font-weight:normal;}