html,body{width:100%;overflow-x: hidden;margin: 0;padding: 0;font-size:28px;font-family:"微软雅黑";}

a{text-decoration:none;}
ul,li{list-style:none;padding:0;margin:0;}
.bg{background-repeat:no-repeat;background-position:center center;background-size:100%;}
.center{margin:0 auto;position:relative;}
.abs_center{position:absolute;left: 50%;transform: translateX(-50%);-webkit-transform:translateX(-50%);}
.all_center{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);}
/*滚动条统一样式*/
.scrollbar{overflow-x:hidden;scrollbar-track-color:none;}
.scrollbar::-webkit-scrollbar{width:.08rem;background-color:transparent;} /*滚动条整体部分*/
.scrollbar::-webkit-scrollbar-track{border-radius:4px;-webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0);background-color:transparent;display:none;} /* 滚动条的轨道*/
.scrollbar::-webkit-scrollbar-track-piece{background-color:transparent;display:none;}/* 滚动条的内层轨道*/
.scrollbar::-webkit-scrollbar-thumb{border-radius:4px;background: #475e9e;}/*滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）*/

[v-clock]{display: none;}

.main{width: 7.5rem;height: 9.44rem;background-image: url(../images/bg.jpg);background-repeat: no-repeat;background-size: 100%;position: relative;overflow: hidden;left: 50%;transform: translateX(-50%);}
.bg{background-repeat: no-repeat;background-size: 100%;}

.top, .bigPrize{position: absolute;width: 7.5rem;left: 0;}
.top{top: 0;height: 1.05rem;background-image: url(../images/title.png);z-index: 333;}
.bigPrize{top: .81rem;height: 1.88rem;background-image: url(../images/bigPrize.png);z-index: 222;}
.bigPrize_box{width: 5.14rem;height: 1.25rem;margin: .26rem auto 0;display: flex;justify-content: space-around;}
.bigPrize_box .item{height: 100%;width: 1.26rem;display: flex;flex-direction: column;align-items: center;justify-content: space-between;}
.bigPrize_box .item .title{width: 100%;height: 0.19rem;line-height: .19rem;color: #fff;font-size: .14rem;display: flex;justify-content: space-evenly;}
.bigPrize_box .item .prize{width: 1.26rem;height: 1.01rem;position: relative;}
.bigPrize_box .item.wood .prize{background-image: url(../images/wood/bg_bigPrize.png);}
.bigPrize_box .item.fire .prize{background-image: url(../images/fire/bg_bigPrize.png);}
.bigPrize_box .item.ice .prize{background-image: url(../images/ice/bg_bigPrize.png);}
.bigPrize_box .item .prize .img{width: 0.58rem;height: 0.58rem;margin: .06rem auto 0;display: flex;align-items: center;justify-content: center;}
.bigPrize_box .item .prize .img img{max-width: 100%;max-height: 100%;}
.bigPrize_box .item .prize .name{width: 100%;height: 0.32rem;line-height: .32rem;text-align: center;color: #fff;font-size: .18rem;position: absolute;bottom: 0;}


/* 背景动画 */
.bgAnim{width: 7.5rem;height: 4rem;font-size: 0;position: absolute;z-index: 111;top: 3.1rem;left: 0;}


.eggs{top: 3.16rem;display: flex;align-items: center;z-index: 222;}
.eggs:hover{cursor: none;}
.eggs .item{display: flex;flex-direction: column;align-items: center;position: relative;margin: 0 .09rem;}

.eggs .hammerBox{position: absolute;transform: translateY(-100%);pointer-events: none;display: none;}
.eggs .hammerBox .hammerBox_main{width: 1.31rem;height: 1.17rem;position: relative;}
.eggs .hammerBox .hammer{display: block;width: 1.31rem;height: 1.17rem;background-image: url(../images/hammer.png);}

.hammerAnim{position: absolute;width: 3.56rem;height: 3.56rem;top: -1.08rem;left: -1.2rem;display: none;}

.eggs .item.wood, .eggs .item.ice{height: 3.5rem;}
.eggs .item.fire{height: 4.26rem;}
.eggs .item .name{width: 100%;font-size: .18rem;color: #ffc882;text-align: center;transition: all 300ms;}
.eggs .item:hover .name{font-size: .3rem;color: #ffd86a;text-shadow: 0 0 .1rem #fff;}
.eggs .item .price{width: 1.93rem;height: 0.36rem;line-height: 0.34rem;background-image: url(../images/price.png);font-size: .18rem;color: #fff;text-align: center;margin: .06rem 0 .2rem}
.eggs .item img{position: absolute;bottom: 0;}
.eggs .item.wood img{width: 2.55rem;height: 3.61rem;}
.eggs .item.fire img{width: 2rem;height: 4.41rem;}
.eggs .item.ice img{width: 2.55rem;height: 3.61rem;}


.btns{top: 8.07rem;width: 6.83rem;height: .71rem;display: flex;justify-content: space-between;}
.btns .item{background-image: url(../images/btn.png);width: 2.23rem;height: 0.71rem;line-height: .71rem;display: flex;justify-content: center;align-items: center;cursor: pointer;}
.btns .item .check{background-image: url(../images/icon_unchecked.png);width: .3rem;height: 0.3rem;transition: all 300ms;margin-right: .15rem;}
.btns .item .check.on{background-image: url(../images/icon_checked.png);}
.btns .item .text{font-size: .3rem;color: #ffe2bd;}


.rule, .close, .explain{position: absolute;z-index: 444;}
.rule{background-image: url(../images/ico_rule.png);width: 0.48rem;height: 0.48rem;top: 0.18rem;left: 0.25rem;}
.close{background-image: url(../images/ico_close.png);width: 0.3rem;height: 0.3rem;top: 0.26rem;right: 0.22rem;}
.explain{font-size: .32rem;white-space: nowrap;color: #fff;top: .2rem;left: 1rem;font-weight: 600;}



.modal{position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 666;}
.modalBox{position: relative;width: 100%;height: 100%;box-sizing: border-box;}


.rule_modal{background-image: url(../images/rule/bg.png);width: 7.28rem;height: 7.88rem;}
.rule_modal .modalBox{padding: 0 .41rem;}
.rule_modal .back{background-image: url(../images/rule/ico_back.png);width: 0.39rem;height: 0.57rem;position: absolute;top: 0.37rem;left: 0.32rem;z-index: 555;}
.rule_modal .rule_tab{width: 100%;padding-top: .52rem;display: flex;justify-content: center;}
.rule_modal .rule_tab .item{font-size: .26rem;color: #fff;position: relative;height: 0.35rem;line-height: .25rem;margin: 0 .56rem;transition: all 300ms;cursor: pointer;}
.rule_modal .rule_tab .item:first-child{margin-left: 0;}
.rule_modal .rule_tab .item:last-child{margin-right: 0;}
.rule_modal .rule_tab .item.on, .rule_modal .rule_tab .item:hover{color: #f3c85d;}
.rule_modal .rule_tab .item::after, .rule_modal .rule_tab .item:after{content: "";width: 0;position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);transition: all 300ms;}
.rule_modal .rule_tab .item.on::after, .rule_modal .rule_tab .item:hover:after{content: "";width: .83rem;height: .06rem;background-image: url(../images/rule/ico_tab_on.png);background-repeat: no-repeat;background-size: 100%;}

.rule_modal .rule_text{margin-top: .45rem;}
.rule_modal .rule_text p{margin: 0;font-size: .24rem;color: #a3b2dd;height: .36rem;line-height: .36rem;}

.rule_modal .rule_rank{margin-top: .4rem;width: 6.19rem;}
.rule_modal .rule_rank table{border-collapse: collapse;width: 100%;}
.rule_modal .rule_rank table th, .rule_modal .rule_rank td{border: .01rem solid #8292a7;font-size: .26rem;color: #a3b2dd;width: 3.03rem;height: 0.6rem;line-height: 0.6rem;margin: 0;padding: 0;text-align: center;}
.rule_modal .rule_rank table th{color: #a3b2dd;font-weight: normal;height: 0.65rem;line-height: 0.65rem;}

.rule_rank .table_body{height: 3.65rem;border-bottom: .01rem solid #8292a7;}
.rule_rank .table_body td{color: #fff;}
.rule_rank .table_body td.prizeName{text-align: left;}
.rule_rank .table_body td .img{width: 0.6rem;height: 0.6rem;line-height: .6rem;display: inline-block;vertical-align: top;margin-left: .35rem;}
.rule_rank .table_body td img{max-width: 100%;max-height: 100%;}
.rule_rank .scrollbar::-webkit-scrollbar{width: 0;}


.history_rank{border: .01rem solid #8292a7;width: 6.75rem;height: 4.26rem;position: absolute;top: 1.35rem;left: 50%;transform: translateX(-50%);}
.history_rank .item span{height: .7rem;line-height: .7rem;font-size: .26rem;color: #a3b2dd;text-align: center;}
.history_rank .item .time{width: 1.08rem;height: .32rem;line-height: .32rem;}
.history_rank .item .count{width: 1.07rem;}
.history_rank .item .spend{width: 1.32rem;}
.history_rank .item .prize{width: 1.86rem;}
.history_rank .item .num{width: 1.44rem;}

.rank_list{width: 6.75rem;height: 3.6rem;}
.rank_list.scrollbar::-webkit-scrollbar{width: 0;}
.rank_list .item{width: 6.75rem;display: flex;border-top: .01rem solid #8292a7;}
.rank_list .item span{color: #fff;font-size: .2rem;}
.rank_list .item:first-child{border-top: unset;}
.rank_list .item .count{color: #a3b2dd;}
.rank_list .item .prize{display: flex;flex-wrap: wrap;align-items: center;justify-content: center;}
.rank_list .item .prize .img{width: .29rem;height: .29rem;display: flex;justify-content: center;align-items: center;}
.rank_list .item .prize .img img{max-width: 100%;max-height: 100%;}

.history_rank .rank_title{width: 6.75rem;display: flex;border-bottom: .01rem solid #8292a7;}
.history_rank .rank_title span{height: .65rem;line-height: .65rem;}
.history_rank .rank_title .time{height: .65rem;line-height: .65rem;}



.history_all{width: 7.19rem;height: .97rem;background-image: url(../images/his/all.png);background-repeat: no-repeat;background-size: 100%;position: absolute;bottom: .1rem;left: 50%;transform: translateX(-50%);display: flex;align-items: center;justify-content: flex-end;}
.history_all li{font-size: .26rem;color: #fff;display: flex;flex-direction: column;align-items: center;width: 2.14rem;}


.res_modal{background-image: url(../images/res/bg.png);width: 7.05rem;height: 7.3rem;}
.res_modal .close{background-image: url(../images/res/ico_close.png);width: 0.3rem;height: 0.3rem;position: absolute;top: 0.52rem;right: 0.53rem;}

.res_modal .list{position: absolute;top: 1.25rem;width: 6.28rem;height: 3.35rem;}
.res_modal .list .listBox{width: 6.19rem;height: 100%;box-sizing: border-box;padding: .04rem 0 0 .03rem;display: flex;flex-wrap: wrap;}
.res_modal .list .listBox .item{background-image: url(../images/res/bg_prize.png);width: 1.14rem;height: 1.5rem;position: relative;margin: .3rem .11rem 0 0;display: flex;align-items: center;flex-direction: column;}
.res_modal .list .listBox .item:nth-child(-n+5){margin-top: 0;}
.res_modal .list .listBox .item:nth-child(5n){margin-right: 0;}

.res_modal .list .listBox .item .img{width: 0.6rem;height: 0.6rem;margin: .19rem 0 .16rem;display: flex;}
.res_modal .list .listBox .item .img img{max-width: 100%;max-height: 100%;}
.res_modal .list .listBox .item .name{font-size: .2rem;color: #fff;text-align: center;line-height: .24rem;}

.res_modal .list .listBox .item i{position: absolute;width: 0.39rem;height: 0.39rem;line-height: 0.39rem;background-color: #cf381b;border-radius: 50%;font-style: normal;font-size: .2rem;color: #fff;text-align: center;top: -0.04rem;left: -0.03rem;z-index: 666;}

.res_modal .prompt{top: 5.16rem;font-size: .26rem;color: #fff;text-align: center;white-space: nowrap;margin: 0;}
.res_modal .angin{top: 5.74rem;background-image: url(../images/res/ico_again.png);width: 2.23rem;height: 0.71rem;line-height: .71rem;text-align: center;color: #ffe2bd;font-size: .3rem;}


.shade{background-color: rgba(53, 53, 53, 0.6);position: fixed;width: 100%;height: 100%;top: 0;left: 0;z-index: 555;}


/* 动画 */
/* 淡入淡出 */
.fade-enter-active, .fade-leave-active{transition: opacity 300ms;}
.fade-enter, .fade-leave-to{opacity: 0;}