@charset "utf-8";
/* CSS Document */
body,html{background: #0e0037;width: 100%;overflow-x: hidden;font-size: 16px;}
*{ margin: 0;padding: 0;box-sizing: border-box;font-family: "Noto Sans SC", sans-serif;}
a,button{text-decoration: none;cursor: pointer;}
.bg{background: url(../images/m_bg.jpg) center top no-repeat white;background-size: 100%;padding-bottom: 2rem;}
.w1000{width: 98%;margin: 0 auto;position: relative;}
.hidden{text-indent: -9999px;}
.top_link{ position:absolute; left:730px; top:51px; width:270px;display: flex;justify-content: left;display: none;}
.top_link a{ display:block; height:36px; margin-right:20px; width:132px; text-align:center; line-height:36px; text-decoration:none; color:#fff; background:#b97e00;font-size: 12px;}

.float-wrap{position: fixed;right: 50px;top: 100px;display: none;}
.float-wrap a{display: block;height: 100px;margin-bottom: 20px;}
#float_rule{background: url(../images/float_ruleBtn.png) no-repeat;width: 208px;background-size: 100%;}
#float_award{background: url(../images/float_awardBtn.png) no-repeat;width: 213px;background-size: 100%;}

.default-select{padding-top: 5.2rem;}
.eqp-wrap{padding-top: 4.5rem;position: relative;}
#petSel_wrap h2{margin: 0 auto;display: block;background: url(../images/petSel_title.png) no-repeat;width: 2.93rem;height: .77rem;background-size: 100%;}
.petSel-list{display: flex;justify-content: center;width: 100%;}
.pet-sel{position: relative;margin: -0.50rem .10rem 0;}
.pet-sel img{display: block;position: relative;z-index: 3;margin-bottom: .30rem;height: 3.79rem;}
.pet-sel input{display: block;position: absolute;left: 50%;top: 50%;}
.pet-sel label{display: block;width: 1.29rem;height: .44rem;margin: 0 auto;text-align: center;background: url(../images/pet_label.png) no-repeat;color: white;font-size: .20rem;line-height: .44rem;background-size: 100%; border: 0;}

#box_wrap{position: relative;width: 93%;margin: 0 auto;margin-top: 1rem;}
#box_wrap h2{margin: 0 auto 20px;background: url(../images/box_title.png) no-repeat;width: 3.87rem;height: 1.70rem;background-size: 100%; }
.box-list{position: relative;display: flex;justify-content: space-between;width: 100%;}

.box-list::after{display: block;position: absolute;left: 50%;top: 2rem;margin-left: -1.20rem; background: url(../images/box_tips.png) no-repeat;width: 2.31rem;height: .81rem;content: "";background-size: 100%;}
.box-wrap{width: 3.36rem;position: relative;padding-top: 2.98rem;height: 4.05rem;}
#box_L{background: url(../images/box_L.png) no-repeat;background-size: 100%;}
#box_R{background: url(../images/box_R.png) no-repeat;background-size: 100%;}
.box-wrap button{display: block;margin: 0 auto;border: 0;background: url(../images/boxOpen_btn.png) no-repeat;width: 1.38rem;height: .46rem;font-size: .2rem;color: white;font-weight: bold;background-size: 100%; }
.box-tips{text-align: center;line-height: .50rem;font-weight: bold;color: black;font-size: .22rem}
.box-tips span{color: #cb0000;}
.my-eqp{margin: 0 auto;position: relative;}
#maleEqp_wrap{padding-top: 1.7rem;}
#femaleEqp_wrap{padding-top: 1.7rem;}
#maleEqp_wrap::after{display: block;background: url(../images/m_maleTop.png) no-repeat;width: 3.13rem;height: 1.48rem;position: absolute;left: 50%;top: 0;margin-left: -1.5rem;content: "";background-size: 100%;}
#femaleEqp_wrap::after{display: block;background: url(../images/m_femaleTop.png) no-repeat;width: 3.11rem;height: 1.47rem;position: absolute;left: 50%;top: 0;margin-left: -1.5rem;content: "";background-size: 100%;}
.eqp-info{margin: 0 auto;display: flex;justify-content: space-between;flex-wrap: wrap;width: 5.5rem;margin-bottom: 1.3rem;}
.eqp-sel{height: 2rem;}
.eqp-sel p{text-align: center;line-height: .5rem;color: white;font-size: .2rem;font-weight: bold;}
.eqp-list{position: absolute;top: 1.6rem;left: 0;z-index: 3;width: 100%;justify-content: center;top: 6.3rem;text-align: center;}

.eqp-sel button{width: 1.5rem;height: 1.5rem;border: .02rem solid red;}
.eqp-sel .eqp-list button{width: 0.85rem;height: 0.85rem;border: .05rem solid black;display: inline-block;margin: 0 .2rem;border-radius: 100px;}
.eqp-sel img{width: 100%;}
.tops-sel{margin-bottom: .4rem;}
#femaleEqp_wrap .pants-sel{margin-bottom: 70px;}

.power-wrap{background: url(../images/power_bg.png) no-repeat;width: 4.23rem;height: .96rem;margin: 0 auto;background-size: 100%;}
.power-wrap p{font-size: .2rem;line-height: .3rem;color: black;font-weight: bold;height: .6rem;padding: .18rem 0;text-align: center;}
.power-wrap p b{color: #fab0b0;}
.power-wrap p span{color: white;}

#eqpGet_wrap{margin-bottom: .5rem;margin-top: .5rem;}
#eqpGet_wrap h2{margin: 0 auto;background: url(../images/eqp_title.png) no-repeat;width: 3.49rem;height: 1.47rem;background-size: 100%;}
#eqpGet_wrap .count{text-align: center;line-height: .60rem;font-weight: bold;font-size: .20rem;color: black;}
#eqpGet_wrap .count span{color: #cb0000;}
.eqpGet-tips{text-align: center;font-size: .2rem;color: #010100;line-height: .42rem;}
.action-wrap{margin: 0 auto;background: url(../images/actionImg_bg.png) no-repeat;display: flex;align-items: center;width: 6.6rem;height: 4.34rem;position: relative;background-size: 100%;}
.action{width: 6rem;margin: 0 auto;position: relative;}
.action-active video{display: block;}
.action-active::after{display: none;position: absolute;left: -50px;top: -50px;background: url(../images/action_icon.png) no-repeat;width: 271px;height: 330px;content: "";animation: stamp 0.3s ease-in-out;transform-origin: center center;}
.action img{width: 100%;}
.actiov-video{display: none;width: 6rem;height: 3.75rem;position: absolute;left: 0;top: 0;}
.action-defualt{margin: 0 auto;width: 6rem;}
#action_btn{display: block;margin: 0 auto;border: 0;background: url(../images/action_btn.png) no-repeat;width: 2.25rem;height: .51rem;font-size: .20rem;color: white;font-weight: bold;background-size: 100%;}
@keyframes stamp {
  0% {
    transform: scale(1.2);
    opacity: 0.8;
  }
  50% {
    /* 猛地压实 */
    transform: scale(0.9);
    opacity: 1;
  }
  100% {
    /* 轻微回弹定格 */
    transform: scale(1);
    opacity: 1;
  }
}


#eqpChange_wrap h2{margin: 0 auto .30rem;background: url(../images/change_title.png) no-repeat;width: 3.82rem;height: .96rem;background-size: 100%;}
#myEqp_btn{display: block;border: 0;background: url(../images/eqpBag_btn.png) no-repeat;width: 5.35rem;height: .71rem;margin: 0 auto .25rem;background-size: 100%;}
.changeBtn-wrap{display: flex;width: 82%;margin: 0 auto;justify-content: space-between;}
.changeBtn-wrap button{display: block;height: .87rem;border: 0;}
#eqpBtn_send{background: url(../images/eqpSend_btn.png) no-repeat;width: 2.57rem;background-size: 100%;}
#eqpBtn_get{background: url(../images/eqpGet_btn.png) no-repeat;width: 2.55rem;background-size: 100%;}
.record-wrap {width: 96%;height: 1.5rem;color: #a1a1a1;line-height: .3rem;text-align: center;margin: 0 auto; overflow-y: scroll; }
.record-wrap p{text-align: center;width: 100%;font-size: .2rem;}
#eqpChange_record{margin: .30rem 0;}
#eqpChange_record h2{margin: 0 auto 30px;background: url(../images/record_title.png) no-repeat;width: 3.12rem;height: .34rem;background-size: 100%;}

#rule_wrap{margin-bottom: .5rem;}
#rule_wrap h2{margin: 0 auto 30px;background: url(../images/rule_title.png) no-repeat;width: 3.69rem;height: 1.44rem;background-size: 100%;}
.rule-list{background: url(../images/rule_bg.png) no-repeat;width: 6.2rem;height: 6.06rem;margin: 0 auto;padding-left: .80rem;background-size: 100%;}
.rule-list p{height: .92rem;width: 5.20rem;color: #222;font-size: .2rem;line-height: .24rem;padding: .32rem 0;}
.rule-list p:first-child{height: .80rem;padding: .26rem 0;}
.rule-list p:nth-of-type(3){height: .72rem;padding: .32rem 0;}

#tasks_wrap{margin-bottom: .50rem;}
#tasks_wrap h2{margin: 0 auto;background: url(../images/task_title.png) no-repeat;width: 2.64rem;height: .64rem;background-size: 100%;}
.task-tips{text-align: center;color: #545454;font-size: .2rem;line-height: .35rem;margin-bottom: .20rem;}
.taskTop-intro{font-weight: bold;line-height: .64rem;font-size: .2rem;color: black;text-align: center;}
.tasks-list{background: url(../images/task_bg.png) no-repeat;margin: 0 auto;width: 6.6rem;height: 3.46rem;padding-left: .73rem;padding-right: .33rem;background-size: 100%;}
.task-detail{display: flex;justify-content: space-between;height: .57rem;align-items: center;}
.task-detail p{color: black;font-size: .2rem;}
.task-status{height: .57rem;display: flex;justify-content: right;align-items: center;}
.task-detail button,.task-detail span{display: block;width:.86rem;height: .33rem;line-height: .33rem;border: 0;border-radius: .05rem;}
.task-detail button{background: #008aff;color: white;margin-right: .25rem;font-size: .2rem;}
.task-detail span{background: #c5c5c4;color: black;text-align: center;font-size: .2rem;}

#awardShow_wrap h2{margin: 0 auto .20rem;background: url(../images/show_title.png) no-repeat;width: 3.91rem;height: 1.66rem;background-size: 100%;}
.award-tips{display: block;margin: 0 auto;width: 80%;}
.item-list{display: flex;justify-content: center;flex-wrap: wrap;width: 6.50rem;margin: 0 auto;}
.item-list div{width: 33%;}
.modal .item-list div{width: 50%;}
.item-list div.img-border{display: flex;align-items: center;background: url(../images/item_bg.png) no-repeat;width: 1.10rem;height: 1rem;margin: 0 auto .20rem;background-size: 100%;}
.img-border img{max-height: .65rem;display: block;margin: 0 auto;max-width: .77rem;}
.item-list p{text-align: center;font-size: 12px;line-height: 30px;font-weight: bold;}
#myAward_btn{display: block;border: 0;background: url(../images/myAward_btn.png) no-repeat;width: 5.35rem;height: .71rem;margin: 0 auto .25rem;background-size: 100%;}

.modal {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.8);display: flex;justify-content: center;align-items: center;z-index: 9999;}

.modal-content {background: url(../images/pop_bg.png) right top no-repeat #f1f1f1;width: 600px;border: 5px solid #1a1a1a;border-radius: 10px;padding: 100px 0;position: relative;background-size: 90%;}
.distid-select-wrap,.role-select-wrap{display: flex;justify-content: space-between;width: 380px;margin: 0 auto 35px;}
.modal-content label{display: block;font-size: 18px;font-weight: bold;color: #6d6d6d;width: 1rem;line-height: 60px;}
.modal-content select {height: 60px;width: 276px;border: 2px solid #979797;border-radius: 7px;}
.close-btn{display: block;margin: 0 auto ;background: url(../images/close.png) no-repeat;background-size: 100%;width: 39px;height: 39px;border: 0;text-indent: -9999px;position: absolute;right: 10px;top: 10px;}
.submit-btn{display: block;margin: 0 auto;border: 0;background: url(../images/boxOpen_btn.png) no-repeat;width: 138px;height: 46px;font-size: 20px;color: white;font-weight: bold;}
.pop-inputText {width: 100%;height: 40px; border: none;display: block;margin-bottom: 20px;text-align: center;font-weight: bold;border: 2px solid #979797;border-radius: 7px;}
.link-btn { width: 80%;margin: 0 auto;margin-top: 20px; }
.copy-btn {display: block;margin: 0 auto;border: 0;background: url(../images/boxOpen_btn.png) no-repeat;width: 138px;height: 46px;font-size: 20px;color: white;font-weight: bold;}
.pop-title{margin-bottom: 20px;}
.popEqp-sel{display: flex;margin: 0 auto;width: 90%;justify-content: center;flex-wrap: wrap;}
.popEqp-sel div {margin: 0 20px 30px;}
.popEqp-sel div img{display: block;width: 70px;margin: 0 auto 5px;}
.popEqp-sel div input{display: block;margin: 0 auto 10px;}
.popEqp-sel div p{text-align: center;font-size: 12px;font-weight: bold;color: black;}
.modal .item-list{width: 90%;}



.pop-tips{text-align: center;font-size: .18rem;color: #6d6d6d;line-height: .4rem;font-weight: bold;}
.pop-tips span{font-size: .3rem;color: #cb0000;}
.modal-btn-group {margin-top: 20px;display: flex;justify-content: center;}
.modal-btn-group button{margin: 0 10px;width: 1.6rem;height: .6rem;border-radius: 100px;font-size: .2rem;font-weight: bold;}
.cancel-btn{background: #2e00b3;color: #ff00ff;border: .05rem solid #ff00ff;}

.vote-ranking h2{display: block;background: url(../images/ranking_title.png) no-repeat;background-size: 100%;width: 4.41rem;height: .79rem;text-indent: -9999px;margin: 0 auto 1.15rem;}
.role-info{margin: 0 auto .7rem;width: 7rem;justify-content: center;height: .6rem;display: flex;position: relative;align-items: center;flex-wrap: wrap;}
.ranking-img{width: 1.1rem;height: 1.1rem;position: absolute;left: 0.25rem;top: -0.25rem;z-index: 3;}
.role-info img{display: block;width: 100%;}
.role-info:first-child .ranking-img{width: 1.6rem;height: 1.6rem;top: -0.6rem;left: 0rem;}
.role-info:first-child .ranking-img::after{display: block;position: absolute;content: "";background: url(../images/crown_pic.png) no-repeat;width: .66rem;height: .35rem;left: .47rem;top: -0.32rem;background-size: 100%;}
.role-bar{width: 3.8rem;height: .5rem;border: .05rem solid #24008d;background: white;border-radius: 100px;position: relative;z-index: 2;box-sizing: content-box;margin-left: 1rem;}
.role-bar span{display: block;position: absolute;left: 0;top: 0;background: #ff00ff;height: .5rem;}
.vote-count{margin-left: .2rem;font-size: .22rem;font-weight: bold;color: white;text-align: left;width: 1.8rem;}
.vote-count b{font-size: .32rem;color: #00ffff;}
.rule-wrap{margin: 0 auto .5rem;background: url(../images/rule_bg.png) no-repeat;background-size: 100%;width: 6.7rem;height: 5.77rem;position: relative;}
.rule-wrap::after{display: block;position: absolute;content: "";background: url(../images/rule_pic.png) no-repeat;width: 1.53rem;height: 2.26rem;left: 5.2rem;top: 0rem;background-size: 100%;}
.rule-content{width: 5.9rem;margin: 0 auto;font-size: .18rem;color: white;font-weight: bold;line-height: .36rem;padding-top: 1.33rem;}
.rule-content h3{display: block;background: url(../images/rule_title.png) no-repeat;width: 1.32rem;height: .28rem;line-height: .28rem;padding-left: .2rem;color: #00ffff;font-size: .24rem;background-size: 100%;}
#share_btn{display: block;margin: 0 auto;background: url(../images/share_btn.png) no-repeat;width: 4.23rem;height: 2.03rem;background-size: 100%;border: 0;}
#pop_share{align-items:flex-start;}
#pop_share .modal-content {background: none;border: 0;}
#pop_share img{display: block;margin: 0 auto 20px;}

.modal-content h2{text-align: center;text-align: center;color: #6d6d6d;font-size: 22px;}
.popAward-info{line-height: 45px;text-align: center;color: #6d6d6d;}
.btn-exit{display: block;width: 1.6rem;height: .6rem;background: #2e00b3;border: .05rem solid #ffff00;border-radius: 100px;font-size: .2rem;color: #ffff00;font-weight: bold;position: absolute;right: 20px;top: 20px;text-align: center;line-height: .6rem;box-sizing: content-box;z-index: 5;}