/* vote */
.wrapper{ min-height: 11.35rem; padding-bottom: 1rem; background: #5a211e url(../images/vote/bg.jpg) no-repeat center top; background-size: 19.2rem 13.95rem;}
.header{ height: 7.68rem;}
.slogan{ top: 4.1rem; height: 1.7rem;}
.surplusVote{ top: 5.9rem; width: 5.14rem; height: .48rem; line-height: .48rem; text-align: center; background: url(../images/vote/surplusVote.png) no-repeat 0 0; background-size: 100% auto; font-size: .22rem; color: #5a211e;}
.surplusVote i{ display: inline-block; margin: 0 .05rem; vertical-align: middle; width: .38rem; height: .34rem; background: url(../images/vote/voteIcon.png) no-repeat 0 0; background-size: 100% auto;}
.surplusVote span{ margin-left: .05rem;}
.showTaskBtn{ top: 6.62rem; width: 3.51rem; height: .52rem; background: url(../images/vote/showTaskBtn.png) no-repeat 0 0; background-size: 100% auto;}
.list{ width: 13.26rem; margin: 0 auto; border-radius: .4rem; border: .04rem solid #b5382e; }
.list-border{ width: 13.26rem; min-height: 6.4rem; box-sizing: border-box; padding-bottom: .44rem; border-radius: .4rem; border: .04rem solid #ff8f71; background-color: rgba(203, 82, 62, .85);}
.nav{ margin: 0 auto .4rem auto; width: 12.6rem; height: .86rem; border-bottom: .02rem solid #ee7b60; 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: #ee7b60;}
.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; align-items: center;}
.onType button{ color: #FFF;}
.onType button.active{ color: #ffdf88;}
.onType .line{ margin: 0 .12rem;}
.onTag{ width: 1.61rem; height: .38rem; background: rgba(255, 255, 255, .8); border: .01rem solid #FFF;}
.onTag .curr{ height: .38rem; line-height: .38rem; box-sizing: border-box; padding: 0 .36rem 0 .18rem; font-size: .22rem; color: #5a211e; cursor: pointer;}
.onTag .curr::after{ content: ""; position: absolute; top: 50%; right: .19rem; transform: translateY(-50%); width: .18rem; height: .09rem; background: url(../images/vote/arrowSel.png) no-repeat 0 0; background-size: 100% auto;}
.tags{ top: .38rem; width: 100%; background: rgba(255, 255, 255, .9); display: none;}
.tagOptions button{ display: block; margin: .05rem auto; width: 1.53rem; height: .36rem; box-sizing: border-box; padding: 0 .14rem; font-size: .22rem; line-height: .36rem; color: #9e9e9e; display: flex;}
.tagOptions button.active{ border-radius: .07rem; background: #5ed9dd url(../images/vote/selActive.png) no-repeat 1.2rem center; background-size: .2rem .2rem; color: #5a211e;}
.selSubmitBtn{ display: inline-block; width: .67rem; height: .29rem; background: url(../images/vote/selSubmitBtn.png) no-repeat 0 0; background-size: 100% auto;}
.tagOptionsSubmit{ display: block; margin: .2rem auto;}
.onText{ display: flex; align-items: center;}
.onText .type{ display: flex; align-items: center;}
.onText .type select{ margin-left: .14rem; width: 2.33rem; height: .4rem; box-sizing: border-box; padding: 0 .5rem 0 .18rem; font-size: .22rem; color: #5a211e; background: #f5dcd8 url(../images/vote/arrowSel.png) no-repeat 2rem center; background-size: .18rem .09rem; border: 0;} 
.onText .search{ display: flex; align-items: center; margin-left: .3rem;}
.onText .search div{ display: flex; justify-content: space-between; align-items: center; width: 2.32rem; height: .4rem; box-sizing: border-box; background: #f5dcd8; 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;}
.worksList{ display: flex; flex-wrap: wrap; min-height: 4rem; padding: .3rem 0 .1rem .47rem; box-sizing: border-box; background: #faf1ea; border-radius: .25rem;}
.item{ margin: 0 .23rem .2rem 0; width: 2.76rem; height: 3.97rem; background: url(../images/vote/item.png) no-repeat 0 0; background-size: 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; display: flex; justify-content: space-between; align-items: center;}
.item .tag{ display: flex;}
.item .tag span{ margin-right: .15rem; font-size: .14rem; color: #5a211e;}
.item .tag span:last-child{ margin-right: 0;}
.collect{ display: inline-block; width: .21rem; height: .2rem; background: url(../images/vote/collect.png) no-repeat 0 0; background-size: .21rem .4rem;}
.collect.active{ background-position: 0 100%;}
.changeWorkBtn{ display: inline-block; width: .19rem; height: .19rem; background: url(../images/vote/changeWorkBtn.png) no-repeat 0 0; background-size: .19rem .19rem;}
.item .pic{ display: block; margin: 0 auto .2rem auto; width: 2.18rem; height: 2.18rem; border: .02rem solid #d3a386; 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/vote/like.png) no-repeat 0 0; background-size: 100% auto;}
.itemInfo .right .vote{ margin-top: .05rem; width: .73rem; height: .2rem; background: url(../images/vote/voteBtn.png) no-repeat 0 0; background-size: 100% auto;}
.itemInfo .right .share{ width: .73rem; height: .2rem; margin-top: .05rem; font-size: .15rem; line-height: .2rem; color: #f5e5d4; text-align: center; background-color: #ec6a49;}
.pages{ margin-top: .4rem; height: .24rem;}
.pages div{ 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: 8.41rem; background: url(../images/vote/loadMore.png) no-repeat center center; background-size: 100% auto;}
.loadMore .txt{ color: #fff;}
.nullMore{ width: 3.29rem; background: url(../images/vote/nullMore.png) no-repeat center center; background-size: 100% auto;}
.nullMore .txt{ color: #ffdf88;}
.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/vote/jumpSubmissionBtn.png) no-repeat 0 0; background-size: 100% auto;}

/* 弹出框：任务列表 */
.popTaskWrap{ width: 10.17rem; height: 5.54rem; background: url(../images/vote/popTaskWrap.png) no-repeat 0 0; background-size: 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; background: url(../images/vote/voteInfoHead.png) no-repeat 0 0; background-size: 100% auto; display: flex; align-items: center;}
.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; background: url(../images/vote/roleType.png) no-repeat 0 0; background-size: 100% auto;}
[roleType="1"] .voteInfo .head .type{ background-position: 0 100%;}
[roleType="2"] .voteInfo .head .type{ background-position: 0 0;}
[roleType="3"] .voteInfo .head .type{ display: none;}
.voteInfo .done{ display: flex; justify-content: center; align-items: center; font-size: .27rem; color: #FFF;}
.voteInfo .done::before, .voteInfo .done::after{ content: ""; height: .44rem;}
.voteInfo .done::before{ width: 1.65rem; background: url(../images/vote/done_b.png) no-repeat 0 0; background-size: 100% auto;}
.voteInfo .done::after{ width: .47rem; background: url(../images/vote/done_a.png) no-repeat 0 0; background-size: 100% auto;}
.progressBox{ margin: .55rem 0 1.54rem .25rem; width: 4.94rem; height: .06rem; background: url(../images/vote/progressBox.png) no-repeat 0 0; background-size: 100% auto;}
.progressBox div{ width: 1.22rem; height: 1.7rem;}
[serverType="1"][roleType="1"] .progressBox div{ top: -0.36rem; background: url(../images/vote/s1.png) no-repeat 0 0; background-size: 4.96rem 3.4rem;}
[serverType="1"][roleType="2"] .progressBox div{ top: -0.36rem; background: url(../images/vote/s1.png) no-repeat 0 0; background-size: 4.96rem 3.4rem;}
[serverType="1"][roleType="3"] .progressBox div{ top: -0.36rem; background: url(../images/vote/s1.png) no-repeat 0 0; background-size: 4.96rem 3.4rem;}
[serverType="2"][roleType="1"] .progressBox div{ top: -0.36rem; background: url(../images/vote/s2.png) no-repeat 0 0; background-size: 4.96rem 3.4rem;}
[serverType="2"][roleType="3"] .progressBox div{ top: -0.36rem; background: url(../images/vote/s2.png) no-repeat 0 0; background-size: 4.96rem 3.4rem;}
.progressBox .p1{ left: 0; background-position: 0 0!important;}
.progressBox .p2{ left: 1.23rem; background-position: -1.23rem 0!important;}
.progressBox .p3{ left: 2.47rem; background-position: -2.47rem 0!important;}
.progressBox div.p4{ left: 3.71rem; width: 1.25rem; background-position: -3.71rem 0!important;}
.progressBox div.active{ background-position-y: 100%!important;}
.progressTip{ 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/vote/voteIcon.png) no-repeat 0 0; background-size: 100% auto;}
.progressVote span{ margin-left: .05rem;}
.taskList{ width: 4.36rem; padding: .08rem; margin-right: .2rem; background-color: #fb896b; box-sizing: border-box;}
.dailyList, .eventList{ width: 100%;}
.taskList .head{ height: .2rem; padding: 0 .08rem; box-sizing: border-box; font-weight: bold; font-size: .15rem; line-height: .2rem; color: #FFF; background-color: #dd684c;}
.eventList .head{ margin-top: .16rem;}
.taskList .task{ padding-left: .08rem; height: .38rem; margin-top: .02rem; display: flex; align-items: center; font-size: .14rem; background: #ce503a;}
.taskList .task div{ width: 1.35rem; color: #fff4dd;}
.taskList .task p{ width: 1.51rem; height: .33rem; line-height: .33rem; text-align: center; background: url(../images/vote/taskListVote.png) no-repeat 0 0; background-size: 100% auto; color: #FFF;}
.taskList .task p i{ display: inline-block; margin: 0 .05rem; vertical-align: middle; width: .27rem; height: .24rem; background: url(../images/vote/voteIcon.png) no-repeat 0 0; background-size: 100% auto;}
.taskList .task p span{ margin-left: .05rem;}
.taskList .task button{ width: 1.19rem; height: .33rem; background: url(../images/vote/taskBtn.png) no-repeat 0 0; background-size: 100% auto; cursor: default;}
.taskList .task button.ok{ background-position: 0 -0.33rem; cursor: pointer;}
.taskList .task button.on{ background-position: 0 -0.66rem;}