/* vote */
.wrapper{ min-height: 13.43rem; padding-bottom: 1rem; background: #5a211e url(../images/bg_vote.jpg) no-repeat center top / 19.2rem 13.43rem;}
.header{ height: 7.68rem;}
.slogan{ top: 4.13rem; height: 1.69rem;}
.surplusVote{ top: 5.91rem; width: 5.57rem; height: .48rem; line-height: .48rem; text-align: center; font-size: .22rem; color: #5a211e; background: url(../images/surplusVote.png) no-repeat 0 0 / 100% auto;}
.surplusVote i{ display: inline-block; margin: 0 .05rem; vertical-align: middle; width: .38rem; height: .34rem; background: url(../images/voteIcon.png) no-repeat 0 0 / 100% auto;}
.surplusVote span{ margin-left: .05rem;}
.showTaskBtn{ top: 6.65rem; width: 3.51rem; height: .52rem;}
.list{ width: 13.26rem; min-height: 6.4rem; margin: 0 auto; box-sizing: border-box; padding-bottom: .44rem; border-radius: .4rem; border: .04rem solid #ff8f71; outline: .04rem solid #b5382e; background: rgba(203, 82, 62, .8);}
.nav{ margin: 0 auto .4rem auto; width: 12.6rem; height: .86rem; border-bottom: .02rem solid #ff8f71; display: flex; justify-content: center; align-items: center;}
.nav button{ font-weight: bold; font-size: .36rem; color: #5a211e;}
.nav button.active{ color: #ffdf88;}
.nav .line{ margin: 0 1.75rem; width: .02rem; height: .56rem; background: #ff8f71;}
.listCont{ width: 12.6rem; margin: 0 auto;}
.searchBar{ margin-bottom: .4rem; display: flex; justify-content: space-between; align-items: center; font-size: .22rem; color: #FFF;}
.onType{ display: flex;}
.onType button{ color: #FFF;}
.onType button.active{ color: #ffdf88;}
.onType .line{ margin: 0 .05rem; overflow: hidden;}
.onTag{ width: 2.5rem; height: .38rem; background: rgba(255, 255, 255, .8); border: .01rem solid #FFF;}
.onTag .curr{ width: 1.9rem; height: .38rem; line-height: .38rem; box-sizing: border-box; padding: 0 .36rem 0 .18rem; font-size: .22rem; color: #422e61; cursor: pointer; white-space: nowrap; overflow: hidden;}
.onTag::after{ content: ""; position: absolute; top: 50%; right: .19rem; transform: translateY(-50%); width: .18rem; height: .09rem; background: url(../images/arrowSel.png) no-repeat 0 0; background-size: 100% auto;}
.tags{ top: .38rem; left: -.005rem; width: calc(100% + .01rem); background: rgba(255, 255, 255, .9); display: none;}
.tagOptions button{ display: block; width: 90%; margin: .05rem auto; height: .36rem; box-sizing: border-box; padding: 0 0.44rem 0 .14rem; font-size: .22rem; color: #9e9e9e; text-align: left;}
.tagOptions button.active{ border-radius: .07rem; color: #422e61; background: #5ed9dd url(../images/selActive.png) no-repeat right .1rem center; background-size: .2rem .2rem;}
.tagOptionsSubmit{ display: block; width: 90%; margin: .2rem auto; height: .28rem; background: #ec6a49; border-radius: .14rem; font-size: .18rem; color: #f5e5d4;}
.onText{ display: flex; align-items: center;}
.onText .type{ display: flex; align-items: center;}
.onText .type select{ margin-left: .14rem; width: 1.5rem; height: .4rem; box-sizing: border-box; padding: 0 .5rem 0 .18rem; font-size: .22rem; color: #422e61; background: #f6e0db url(../images/arrowSel.png) no-repeat 1.17rem center; background-size: .18rem .09rem;}
.onText .search{ display: flex; align-items: center; margin-left: .2rem;}
.onText .search div{ display: flex; justify-content: space-between; align-items: center; width: 2.32rem; height: .4rem; box-sizing: border-box; background: #f6e0db; border: .01rem solid #FFF;}
.onText .search input{ width: 1.35rem; height: 100%; box-sizing: border-box; padding-left: .15rem; border: none; font-size: .18rem; color: #858585; background: none;}
.searchBtn{ margin-right: .05rem; display: inline-block; width: .67rem; height: .29rem; font-size: .14rem; color: #f5e5d4; background: #ec6a49;}
.worksList{ display: flex; flex-wrap: wrap; min-height: 4rem; padding: .3rem 0 .1rem .47rem; box-sizing: border-box; background: #ecf5fc; border-radius: .25rem;}
.item{ margin: 0 .23rem .2rem 0; width: 2.76rem; height: 3.97rem; background: url(../images/item.png) no-repeat 0 0 / 100% auto;}
.item .tit{ margin: .15rem auto .06rem auto; width: 2.48rem; height: .31rem; line-height: .31rem; box-sizing: border-box; padding: 0 .14rem; background: #ec6a49; font-size: .2rem; color: #FFF; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.item .head{ margin: 0 auto .09rem auto; width: 2.28rem; height: .4rem; display: flex; justify-content: space-between; align-items: center;}
.item .tag{ display: flex; flex-wrap: wrap; width: 2rem;}
.item .tag span{ margin-right: .15rem; line-height: .16rem; font-size: .14rem; color: #5a211e;}
.myWorksList .tag span{ color: #5a211e;}
.item .tag span:last-child{ margin-right: 0;}
.collect{ width: .21rem; height: .2rem; background: url(../images/collect.png) no-repeat 0 0 / 100% auto;}
.collect.active{ background-position: 0 100%;}
.changeWorkBtn{ display: inline-block; width: .19rem; height: .19rem; background: url(../images/changeWorkBtn.png) no-repeat 0 0 / .19rem .19rem;}
.item .pic{ display: block; margin: 0 auto .1rem auto; width: 2.18rem; height: 2.18rem; border: .02rem solid #ecb28c; cursor: pointer;}
.itemInfo{ display: flex; justify-content: space-between; align-items: center; width: 2.28rem; margin: 0 auto;}
.itemInfo .name{ width: 1.4rem; font-weight: bold; font-size: .2rem; color: #5a211e; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.itemInfo .date{ font-size: .15rem; color: #828282;}
.itemInfo .right p{ font-size: .15rem; color: #828282;}
.itemInfo .right p::before{ content: ""; display: inline-block; margin-right: .1rem; width: .15rem; height: .13rem; background: url(../images/like.png) no-repeat 0 0 / 100% auto;}
.itemInfo .right .vote{ margin-top: .05rem; width: .73rem; height: .2rem; background: #ec6a49; font-size: .14rem; color: #f5e5d4;}
.itemInfo .right .share{ margin-top: .05rem; font-size: .15rem; color: #f5e5d4; background: #ec6a49;}
.pages{ margin-top: .4rem; height: .24rem;}
.pages div{ width: 100%; height: 100%; margin: 0 auto; display: flex; justify-content: center; align-items: center;}
.pages .txt{ height: 100%; font-size: .24rem; line-height: .24rem;}
.loadMore{ width: 9rem; background: url(../images/loadMore.png) no-repeat center center / 8.41rem .11rem;}
.loadMore .txt{ color: #FFF;}
.nullMore{ width: 4.09rem; background: url(../images/nullMore.png) no-repeat center center / 4.09rem .11rem;}
.nullMore .txt{ color: #ffdf88; text-transform: none;}
.nullWorksTip{ margin: .2rem auto .1rem auto; width: 2rem; line-height: .24rem; font-size: .16rem; color: #5a211e;}
.jumpSubmissionBtn{ display: block; margin: 0 auto; width: 2.23rem; height: 2.23rem; background: url(../images/jumpSubmissionBtn.png) no-repeat 0 0 / 100% auto;}

/* 弹出框：任务列表 */
.popTaskWrap{ width: 10.17rem; height: 5.54rem; background: url(../images/popTaskWrap.png) no-repeat 0 0 / 100% auto;}
.popTaskCont{ height: 100%; display: flex; justify-content: space-between; align-items: center;}
.voteInfo{ width: 5.6rem;}
.voteInfo .head{ width: 4.76rem; height: 1.12rem; display: flex; align-items: center; background: url(../images/voteInfoHead.png) no-repeat 0 0 / 100% auto;}
.voteInfo .head .name{ width: 1.6rem; margin-left: 1.43rem; font-size: .22rem; color: #FFF;}
.voteInfo .head .type{ margin-left: .1rem; width: .55rem; height: .26rem;}
[roleType="1"] .voteInfo .head .type{ background-position: 0 100%!important;}
[roleType="2"] .voteInfo .head .type{ background-position: 0 0!important;}
[roleType="3"] .voteInfo .head .type{ display: none;}
.voteInfo .done{ display: flex; justify-content: center; align-items: center; font-size: .27rem; color: #FFF;}
.progressBox{ margin: .55rem 0 1.54rem .25rem; width: 4.94rem; height: .06rem; background: url(../images/progressBox.png) no-repeat 0 0 / 100% auto;}
[serverType="1"][roleType="1"] .progressBox div{ top: -0.36rem; height: 1.7rem; background: url(../images/s1_new.png) no-repeat 0 0 / 4.96rem 3.4rem;}
[serverType="1"][roleType="2"] .progressBox div{ top: -0.36rem; height: 1.7rem; background: url(../images/s1_back.png) no-repeat 0 0 / 4.96rem 3.4rem;}
[serverType="1"][roleType="3"] .progressBox div{ top: -0.36rem; height: 1.7rem; background: url(../images/s1_active.png) no-repeat 0 0 / 4.96rem 3.4rem;}
[serverType="2"][roleType="1"] .progressBox div{ top: -0.36rem; height: 1.7rem; background: url(../images/s2_new.png) no-repeat 0 0 / 4.96rem 3.4rem;}
[serverType="2"][roleType="2"] .progressBox div{ top: -0.36rem; height: 1.7rem; background: url(../images/s2_back.png) no-repeat 0 0 / 4.96rem 3.4rem;}
[serverType="2"][roleType="3"] .progressBox div{ top: -0.36rem; height: 1.7rem; background: url(../images/s2_active.png) no-repeat 0 0 / 4.96rem 3.4rem;}
.progressBox .p1{ left: 0; width: 1.23rem; background-position: 0 0!important;}
.progressBox .p2{ left: 1.23rem; width: 1.24rem; background-position: -1.23rem 0!important;}
.progressBox .p3{ left: 2.47rem; width: 1.24rem; background-position: -2.47rem 0!important;}
.progressBox .p4{ left: 3.71rem; width: 1.25rem; background-position: -3.71rem 0!important;}
.progressBox div.active{ background-position-y: 100%!important;}
.progressTip{ padding: 0 .3rem; text-align: center; font-size: .15rem; color: #ffd29d;}
.progressVote{ margin: .25rem 0 .5rem .3rem; font-size: .22rem; color: #FFF;}
.progressVote i{ display: inline-block; margin: 0 .05rem; vertical-align: middle; width: .38rem; height: .34rem; background: url(../images/voteIcon.png) no-repeat 0 0 / 100% auto;}
.progressVote span{ margin-left: .05rem;}
.taskList{ width: 4.36rem; margin-right: .2rem;}
.dailyList, .eventList{ width: 4.36rem; box-sizing: border-box;}
.dailyList{ padding: .08rem; background: #fb896b;}
.eventList{ padding: .08rem; background: #fb896b;}
.taskList .head{ margin-bottom: .05rem; font-weight: bold; font-size: .16rem; color: #FFF; background: #dd684c; text-transform: uppercase; padding-left: .1rem;}
.taskList .task{ padding-left: .05rem; height: .38rem; line-height: .12rem; margin-bottom: .02rem; display: flex; align-items: center; font-size: .12rem; background: #ce4f3a;}
.taskList .task div{ width: 1.4rem; color: #fff4dd;}
.taskList .task p{ width: 1.51rem; height: .33rem; line-height: .33rem; text-align: center; color: #FFF; background: url(../images/taskListVote.png) no-repeat 0 0 / 100% auto;}
.taskList .task p i{ display: inline-block; margin: 0 .05rem; vertical-align: middle; width: .27rem; height: .24rem; background: url(../images/voteIcon.png) no-repeat 0 0 / 100% auto;}
.taskList .task p span{ margin-left: .05rem;}
.taskList .task button{ width: 1.19rem; height: .33rem; cursor: default;}
.taskList .task button.ok{ background-position: 0 -0.33rem!important; cursor: pointer;}
.taskList .task button.on{ background-position: 0 -0.66rem!important;}


/************************************************* 语言分支 *************************************************/
/* lang-en */
.lang-en .showTaskBtn{  background: url(../images/en/vote/showTaskBtn.png) no-repeat 0 0; background-size: 100% auto;}
.lang-en .voteInfo .head .type{ background: url(../images/en/vote/roleType.png) no-repeat 0 0; background-size: 100% auto;}
.lang-en .taskList .task button{ background: url(../images/en/vote/taskBtn.png) no-repeat 0 0; background-size: 100% auto;}

/* lang-jp */
.lang-jp .showTaskBtn{ width: 3.51rem; height: .52rem; background: url(../images/jp/vote/showTaskBtn.png) no-repeat 0 0; background-size: 100% auto;}
.lang-jp .voteInfo .head .type{ width: .55rem; background: url(../images/jp/vote/roleType.png) no-repeat 0 0; background-size: 100% auto;}
.lang-jp .taskList .task button{ background: url(../images/jp/vote/taskBtn.png) no-repeat 0 0; background-size: 100% auto;}