/* vote */
.wrapper{ min-height: 1350px; padding-bottom: 100px; background: #5a211e url(../images/vote/bg.jpg) no-repeat center top; background-size: 750px 753px;}
.header{ height: 634px;}
.slogan{ top: 315px; height: 167px;}
.surplusVote{ top: 491px; left: 0; width: 100%; height: 48px; line-height: 48px; text-align: center; font-size: 22px; color: #5a211e; background: url(../images/vote/surplusVote.png) no-repeat center top;}
.surplusVote i{ display: inline-block; margin: 0 5px; vertical-align: middle; width: 38px; height: 34px; background: url(../images/vote/voteIcon.png) no-repeat 0 0; background-size: 100% auto;}
.surplusVote span{ margin-left: 5px;}
.showTaskBtn{ top: 558px; width: 351px; height: 52px; background: url(../images/vote/showTaskBtn.png) no-repeat 0 0; background-size: 100% auto;}
.list{ width: 700px;  margin: 0 auto; border-radius: 40px; border: 4px solid #b5382e; }
.list-border{ width: 700px; min-height: 740px;  box-sizing: border-box; padding-bottom: 44px; border-radius: 40px;  border: 4px solid #ff8f71; background-color: rgba(203, 82, 62, .85);}
.nav{ margin: 0 auto 35px auto; width: 658px; height: 95px; border-bottom: 2px solid #ee7b60; display: flex; justify-content: center; align-items: center;}
.nav button{ font-weight: bold; font-size: 36px; color: #5a211e;}
.nav button.active{ color: #ffdf88;}
.nav .line{ margin: 0 80px; width: 2px; height: 56px; background: #ee7b60;}
.listCont{ width: 658px; margin: 0 auto;}
.searchBar{ margin-bottom: 33px; font-size: 22px; color: #FFF;}
.onText{ display: flex; justify-content: center; align-items: center;}
.onText .type{ display: flex; align-items: center;}
.onText .type select{ margin-left: 14px; width: 233px; height: 40px; box-sizing: border-box; padding: 0 50px 0 18px; font-size: 22px; color: #5a211e; background: #f5dcd8 url(../images/vote/arrowSel.png) no-repeat 200px center; background-size: 18px 9px;}
.arrow_r{ width: 24px; height: 24px; margin: 0 11px;}
.onText .search{ display: flex; align-items: center;}
.onText .search div{ display: flex; justify-content: space-between; align-items: center; width: 233px; height: 40px; box-sizing: border-box; background: #f5dcd8; border: 1px solid #FFF;}
.onText .search input{ width: 135px; height: 100%; box-sizing: border-box; padding-left: 15px; border: none; font-size: 18px; color: #858585; background: none;}
.selSubmitBtn{ display: inline-block; width: 80px; height: 40px; background: url(../images/vote/selSubmitBtn.png) no-repeat 0 0; background-size: 100% auto;}
.onType{ margin-top: 30px; display: flex; justify-content: center; align-items: center;}
.onType button{ color: #FFF;}
.onType button.active{ color: #ffdf88;}
.onType .line{ margin: 0 14px;}
.onTag{ width: 267px; height: 40px; background: rgba(255, 255, 255, .8); border: 1px solid #FFF;}
.onTag .curr{ height: 38px; line-height: 38px; box-sizing: border-box; padding: 0 36px 0 18px; font-size: 22px; color: #422e61; cursor: pointer;}
.onTag .curr::after{ content: ""; position: absolute; top: 50%; right: 19px; transform: translateY(-50%); width: 18px; height: 9px; background: url(../images/vote/arrowSel.png) no-repeat 0 0; background-size: 100% auto;}
.tags{ top: 38px; width: 100%; background: rgba(255, 255, 255, .9); display: none;}
.tagOptions button{ display: block; margin: 5px auto; width: 246px; height: 36px; box-sizing: border-box; padding: 0 14px; font-size: 22px; color: #9e9e9e;}
.tagOptions button.active{ border-radius: 7px; background: #5ed9dd url(../images/vote/selActive.png) no-repeat 210px center; background-size: 20px 20px; color: #5a211e;}
.tagOptionsSubmit{ display: block; margin: 20px auto;}
.worksList{ display: flex; flex-wrap: wrap; min-height: 400px; padding: 30px 0 10px 40px; box-sizing: border-box; background: #faf1ea; border-radius: 25px;}
.item{ margin: 0 30px 23px 0; width: 276px; height: 397px; background: url(../images/vote/item.png) no-repeat 0 0; background-size: 100% auto;}
.item .tit{ margin: 15px auto 6px auto; width: 248px; height: 31px; line-height: 31px; box-sizing: border-box; padding: 0 14px; background: #ec6a49; font-size: 20px; color: #FFF; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.item .head{ margin: 0 auto 9px auto; width: 228px; display: flex; justify-content: space-between; align-items: center;}
.item .tag{ display: flex;}
.item .tag span{ margin-right: 15px; font-size: 14px; color: #5a211e;}
.item .tag span:last-child{ margin-right: 0;}
.collect{ display: inline-block; width: 21px; height: 20px; background: url(../images/vote/collect.png) no-repeat 0 0;}
.collect.active{ background-position: 0 -20px;}
.changeWorkBtn{ display: inline-block; width: 19px; height: 19px; background: url(../images/vote/changeWorkBtn.png) no-repeat 0 0; background-size: 100% auto;}
.item .pic{ display: block; margin: 0 auto 20px auto; width: 218px; height: 218px; border: 2px solid #d3a386; cursor: pointer;}
.itemInfo{ display: flex; justify-content: space-between; align-items: center; width: 228px; margin: 0 auto;}
.itemInfo .name{ width: 140px; font-weight: bold; font-size: 20px; color: #5a211e; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.itemInfo .date{ font-size: 15px; color: #828282;}
.itemInfo .right p{ font-size: 15px; color: #828282;}
.itemInfo .right p::before{ content: ""; display: inline-block; margin-right: 10px; width: 15px; height: 13px; background: url(../images/vote/like.png) no-repeat 0 0; background-size: 100% auto;}
.itemInfo .right .vote{ margin-top: 5px; width: 73px; height: 20px; background: url(../images/vote/voteBtn.png) no-repeat 0 0; background-size: 100% auto;}
.itemInfo .right .share{ width: 73px; height: 20px; margin-top: 5px; font-size: 15px; line-height: 20px; color: #f5e5d4; text-align: center; background-color: #ec6a49;}
.pages{ margin-top: 40px; height: 24px;}
.pages div{ height: 100%; margin: 0 auto; display: flex; justify-content: center; align-items: center;}
.pages .txt{ height: 100%; font-size: 24px; line-height: 24px;}
.loadMore{ width: 750px; background: url(../images/vote/loadMore.png) no-repeat center center; background-size: 100% auto;}
.loadMore .txt{ color: #fff;}
.nullMore{ width: 330px; background: url(../images/vote/nullMore.png) no-repeat center center; background-size: 100% auto;}
.nullMore .txt{ color: #ffdf88;}
.nullWorksTip{ margin: 20px auto 10px auto; width: 200px; line-height: 24px; font-size: 16px; color: #5a211e;}
.jumpSubmissionBtn{ display: block; margin: 0 auto; width: 223px; height: 223px; background: url(../images/vote/jumpSubmissionBtn.png) no-repeat 0 0; background-size: 100% auto;}

/* 弹出框：任务列表 */
.popTaskWrap{ width: 661px; height: 1100px; background: url(../images/vote/popTaskWrap.png) no-repeat 0 0; background-size: 100% auto;}
.popTaskCont{ height: 100%;}
.voteInfo{ margin-top: 18px;}
.voteInfo .head{ width: 556px; height: 130px; background: url(../images/vote/voteInfoHead.png) no-repeat 0 0; background-size: 100% auto; display: flex; align-items: center;}
.voteInfo .head .name{ width: 160px; margin-left: 143px; font-size: 22px; color: #FFF;}
.voteInfo .head .type{ margin-left: 10px; width: 55px; height: 26px; 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;}
[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: 27px; color: #FFF;}
.voteInfo .done::before, .voteInfo .done::after{ content: ""; height: 44px;}
.voteInfo .done::before{ width: 165px; background: url(../images/vote/done_b.png) no-repeat 0 0; background-size: 100% auto;}
.voteInfo .done::after{ width: 47px; background: url(../images/vote/done_a.png) no-repeat 0 0; background-size: 100% auto;}
.progressBox{ margin: 55px auto 154px auto; width: 494px; height: 6px; background: url(../images/vote/progressBox.png) no-repeat 0 0; background-size: 100% auto;}
.progressBox div{ width: 122px; height: 170px;}
[serverType="1"][roleType="1"] .progressBox div{ top: -36px; background: url(../images/vote/s1.png) no-repeat 0 0; background-size: 496px 340px;}
[serverType="1"][roleType="2"] .progressBox div{ top: -36px; background: url(../images/vote/s1.png) no-repeat 0 0; background-size: 496px 340px;}
[serverType="1"][roleType="3"] .progressBox div{ top: -36px; background: url(../images/vote/s1.png) no-repeat 0 0; background-size: 496px 340px;}
[serverType="2"][roleType="1"] .progressBox div{ top: -36px; background: url(../images/vote/s2.png) no-repeat 0 0; background-size: 496px 340px;}
[serverType="2"][roleType="3"] .progressBox div{ top: -36px; background: url(../images/vote/s2.png) no-repeat 0 0; background-size: 496px 340px;}
.progressBox .p1{ left: 0; background-position: 0 0!important;}
.progressBox .p2{ left: 123px; background-position: -123px 0!important;}
.progressBox .p3{ left: 247px; background-position: -247px 0!important;}
.progressBox div.p4{ left: 371px; width: 125px; background-position: -371px 0!important;}
.progressBox div.active{ background-position-y: 100%!important;}
.progressTip{ text-align: center; font-size: 15px; color: #ffd29d;}
.progressVote{ margin: 15px 0 10px 30px; font-size: 22px; color: #FFF;}
.progressVote i{ display: inline-block; margin: 0 5px; vertical-align: middle; width: 38px; height: 34px; background: url(../images/vote/voteIcon.png) no-repeat 0 0; background-size: 100% auto;}
.progressVote span{ margin-left: 5px;}
.taskList{ width: 620px; padding: 8px; margin: 0 auto; background-color: #fb896b; box-sizing: border-box;}
.dailyList, .eventList{ width: 100%;}
.taskList .head{ height: 36px; padding: 0 8px; box-sizing: border-box; font-weight: bold; font-size: 22px; line-height: 36px; color: #FFF; background-color: #dd684c;}
.taskList .task{ padding-left: 8px; height: 57px; margin-top: 2px; display: flex; align-items: center; font-size: 22px; background: #ce503a;}
.taskList .task div{ width: 200px; color: #fff4dd;}
.taskList .task p{ width: 216px; height: 46px; line-height: 46px; 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 5px; vertical-align: middle; width: 27px; height: 24px; background: url(../images/vote/voteIcon.png) no-repeat 0 0; background-size: 100% auto;}
.taskList .task p span{ margin-left: 5px;}
.taskList .task button{ width: 169px; height: 46px; background: url(../images/vote/taskBtn.png) no-repeat 0 0; background-size: 100% auto; cursor: default;}
.taskList .task button.ok{ background-position: 0 -46px; cursor: pointer;}
.taskList .task button.on{ background-position: 0 -92px;}