@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/bg.jpg) center top no-repeat;height: 6000px;}
.w1000{width: 1000px;margin: 0 auto;position: relative;}
.hidden{text-indent: -9999px;}
.top_link{ position:absolute; left:730px; top:51px; width:270px;display: flex;justify-content: left;}
.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;}
.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: 410px;}
.eqp-wrap{padding-top: 292px;position: relative;}
#petSel_wrap h2{margin: 0 auto;display: block;background: url(../images/petSel_title.png) no-repeat;width: 293px;height: 77px;}
.petSel-list{display: flex;justify-content: center;width: 100%;}
.pet-sel{position: relative;margin: -50px 10px 0;}
.pet-sel img{display: block;position: relative;z-index: 3;margin-bottom: 30px;}
.pet-sel input{display: block;position: absolute;left: 50%;top: 50%;}
.pet-sel label{display: block;width: 129px;height: 44px;margin: 0 auto;text-align: center;background: url(../images/pet_label.png) no-repeat;color: white;font-size: 20px;line-height: 44px;cursor: pointer;border: 0;}
.pet-sel label:hover{background-position: 0 -44px;}
#box_wrap{position: relative;width: 930px;margin: 0 auto;margin-top: 100px;}
#box_wrap h2{margin: 0 auto 20px;background: url(../images/box_title.png) no-repeat;width: 387px;height: 170px;}
.box-list{position: relative;display: flex;justify-content: space-between;width: 100%;}
#box_wrap::after{display: block;position: absolute;right: -200px;top: 500px;background: url(../images/box_char.png) no-repeat;width: 271px;height: 330px;content: "";}
.box-list::after{display: block;position: absolute;left: 50%;top: 400px;margin-left: -120px; background: url(../images/box_tips.png) no-repeat;width: 231px;height: 81px;content: "";}
.box-wrap{width: 443px;position: relative;padding-top: 385px;}
#box_L{height: 534px;background: url(../images/box_L.png) no-repeat;}
#box_R{height: 535px;background: url(../images/box_R.png) no-repeat;}
.box-wrap button{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;}
.box-tips{text-align: center;line-height: 80px;font-weight: bold;color: black;font-size: 22px;}
.box-tips span{color: #cb0000;}
.my-eqp{margin: 0 auto;position: relative;}
#maleEqp_wrap{background: url(../images/male_eqp.png) center top no-repeat;width: 854px;height: 780px;padding-top: 133px;}
#femaleEqp_wrap{background: url(../images/female_eqp.png) center top no-repeat;width: 854px;height: 780px;padding-top: 133px;}
.eqp-info{margin-left: 494px;}
.eqp-sel{height: 50px;display: flex;margin-bottom: 20px;}
.eqp-sel p{display: none;}
.eqp-sel button{width: 50px;height: 50px;border: 2px solid #ffc700;margin-right: 15px;}
.eqp-sel .eqp-list button{width: 50px;height: 50px;border: 2px solid #8d8d8d;}
.eqp-sel img{width: 100%;}
.tops-sel{margin-bottom: 120px;}
#femaleEqp_wrap .pants-sel{margin-bottom: 70px;}

.power-wrap{position: absolute;background: url(../images/power_bg.png) no-repeat;width: 283px;height: 64px;bottom: 20px;right: 170px;}
.power-wrap p{font-size: 12px;line-height: 24px;color: black;font-weight: bold;height: 48px;padding: 8px 0;text-align: center;}
.power-wrap p b{font-size: 20px;color: #fab0b0;}
.power-wrap p span{color: white;}

#eqpGet_wrap{margin-bottom: 160px;margin-top: 80px;}
#eqpGet_wrap h2{margin: 0 auto;background: url(../images/eqp_title.png) no-repeat;width: 349px;height: 147px;}
#eqpGet_wrap .count{text-align: center;line-height: 60px;font-weight: bold;font-size: 20px;color: black;}
#eqpGet_wrap .count span{color: #cb0000;}
.eqpGet-tips{text-align: center;font-size: 18px;color: #010100;line-height: 42px;}
.action-wrap{margin: 0 auto;background: url(../images/actionImg_bg.png) no-repeat;display: flex;align-items: center;width: 830px;height: 546px;position: relative;}
.action{width: 768px;margin: 0 auto;position: relative;}
.action-active video{display: block;}
.action-active::after{display: block;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: 768px;height: 480px;position: absolute;left: 0;top: 0;}
.action-defualt{margin: 0 auto;width: 768px;}
#action_btn{display: block;margin: 0 auto;border: 0;background: url(../images/action_btn.png) no-repeat;width: 225px;height: 51px;font-size: 20px;color: white;font-weight: bold;}
@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 30px;background: url(../images/change_title.png) no-repeat;width: 382px;height: 96px;}
#myEqp_btn{display: block;border: 0;background: url(../images/eqpBag_btn.png) no-repeat;width: 535px;height: 71px;margin: 0 auto 25px;}
.changeBtn-wrap{display: flex;width: 620px;margin: 0 auto;justify-content: space-between;}
.changeBtn-wrap button{display: block;height: 87px;border: 0;}
#eqpBtn_send{background: url(../images/eqpSend_btn.png) no-repeat;width: 257px;}
#eqpBtn_get{background: url(../images/eqpGet_btn.png) no-repeat;width: 255px;}
.record-wrap {width: 50%;height: 125px;color: #a1a1a1;line-height: 25px;text-align: center;margin: 0 auto; overflow-y: scroll; }
.record-wrap p{text-align: center;width: 100%;}
#eqpChange_record{margin: 30px 0;}
#eqpChange_record h2{margin: 0 auto 30px;background: url(../images/record_title.png) no-repeat;width: 312px;height: 34px;}

#rule_wrap{margin-bottom: 90px;}
#rule_wrap h2{margin: 0 auto 30px;background: url(../images/rule_title.png) no-repeat;width: 369px;height: 144px;}
.rule-list{background: url(../images/rule_bg.png) no-repeat;width: 536px;height: 524px;margin: 0 auto;padding-left: 70px;}
.rule-list p{height: 92px;width: 420px;color: #222;font-size: 15px;line-height: 24px;padding: 22px 0;}
.rule-list p:first-child{height: 80px;padding: 16px 0;}
.rule-list p:nth-of-type(3){height: 72px;padding: 12px 0;}

#tasks_wrap{margin-bottom: 60px;}
#tasks_wrap h2{margin: 0 auto;background: url(../images/task_title.png) no-repeat;width: 264px;height: 64px;}
.task-tips{text-align: center;color: #545454;font-size: 16px;line-height: 24px;margin-bottom: 20px;}
.taskTop-intro{font-weight: bold;line-height: 64px;font-size: 22px;color: black;text-align: center;}
.tasks-list{background: url(../images/task_bg.png) no-repeat;margin: 0 auto;width: 545px;height: 286px;padding-left: 53px;padding-right: 33px;}
.task-detail{display: flex;justify-content: space-between;height: 47px;align-items: center;}
.task-status{height: 47px;display: flex;justify-content: right;align-items: center;}
.task-detail button,.task-detail span{display: block;width: 86px;height: 30px;line-height: 30px;border: 0;border-radius: 5px;}
.task-detail button{background: #008aff;color: white;margin-right: 25px;}
.task-detail span{background: #c5c5c4;color: black;text-align: center;}

#awardShow_wrap h2{margin: 0 auto 20px;background: url(../images/show_title.png) no-repeat;width: 391px;height: 166px;}
.award-tips{display: block;margin: 0 auto;}
.item-list{display: flex;justify-content: center;flex-wrap: wrap;width: 650px;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: 110px;height: 100px;margin: 0 auto 20px;}
.img-border img{max-height: 65px;display: block;margin: 0 auto;max-width: 77px;}
.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: 535px;height: 71px;margin: 0 auto 25px;}

.modal {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);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;}