/* vote */
.wrapper{ min-height: 11.35rem; padding-bottom: 1rem;}
.header{ height: 7.68rem;}
.slogan{ top: 3.9rem; height: 1.92rem;}
.surplusVote{ top: 5.88rem; width: 5.14rem; height: .48rem; line-height: .48rem; text-align: center; font-size: .22rem; color: #FFF;}
.surplusVote i{ display: inline-block; margin: 0 .05rem; vertical-align: middle; width: .38rem; height: .34rem;}
.surplusVote span{ margin-left: .05rem;}
.showTaskBtn{ top: 6.62rem; width: 4.19rem; height: .56rem;}
.list{ width: 13.26rem; min-height: 6.4rem; margin: 0 auto; box-sizing: border-box; padding-bottom: .44rem; border-radius: .4rem; border: .04rem solid #8099cf;}
.nav{ margin: 0 auto .4rem auto; width: 12.6rem; height: .86rem; border-bottom: .02rem solid #7d96cc; display: flex; justify-content: center; align-items: center;}
.nav button{ font-weight: bold; font-size: .36rem; color: #b2c6f5;}
.nav button.active{ color: #ffdf88;}
.nav .line{ margin: 0 1.75rem; width: .02rem; height: .56rem; background: #7d96cc;}
.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{ width: 1.1rem; 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: -.01rem; min-width: 100%; background: rgba(255, 255, 255, .9); display: none;}
.tagOptions button{ display: block; margin: .05rem; 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: #a39afb url(../images/selActive.png) no-repeat right .1rem center; background-size: .2rem .2rem;}
.selSubmitBtn{ display: inline-block; width: .81rem; height: .29rem;}
.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: #422e61; background: #dbe0ef url(../images/arrowSel.png) no-repeat 2rem center;
  background-size: .18rem .09rem;}
.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: #dbe0ef; 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: #ecf5fc; border-radius: .25rem;}
.item{ margin: 0 .23rem .2rem 0; width: 2.76rem; height: 3.97rem;}
.item .tit{ margin: .15rem auto .06rem auto; width: 2.48rem; height: .31rem; line-height: .31rem; box-sizing: border-box; padding: 0 .14rem; background: #8577ff; 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: #6cb5ff;}
.myWorksList .tag span{ color: #ababab;}
.item .tag span:last-child{ margin-right: 0;}
.collect{ width: .21rem; height: .2rem;}
.collect.active{ background-position: 0 100%!important;}
.changeWorkBtn{ display: inline-block; width: .19rem; height: .19rem;}
.item .pic{ display: block; margin: 0 auto .1rem auto; width: 2.18rem; height: 2.18rem; border: .02rem solid #c5c5d3; 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: #FFF; 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;}
.itemInfo .right .vote{ margin-top: .05rem; width: .73rem; height: .2rem;}
.itemInfo .right .share{ margin-top: .05rem; font-size: .15rem; color: #ffdf88;}
.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;}
.loadMore .txt{ color: #FFF;}
.nullMore{ width: 4.09rem;}
.nullMore .txt{ color: #ffdf88;}
.nullWorksTip{ margin: .2rem auto .1rem auto; width: 2rem; line-height: .24rem; font-size: .16rem; color: #8577ff;}
.jumpSubmissionBtn{ display: block; margin: 0 auto; width: 2.23rem; height: 2.23rem;}

/* 弹出框：任务列表 */
.popTaskWrap{ width: 10.17rem; height: 5.54rem;}
.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;}
.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;}
[serverType="1"][roleType="1"] .progressBox div{ top: -0.36rem; height: 1.7rem;}
[serverType="1"][roleType="2"] .progressBox div{ top: -0.36rem; height: 1.7rem;}
[serverType="1"][roleType="3"] .progressBox div{ top: -0.36rem; height: 1.7rem;}
/* [serverType="2"][roleType="1"] .progressBox div{ top: -0.36rem; height: 1.7rem;}
[serverType="2"][roleType="2"] .progressBox div{ top: -0.36rem; height: 1.7rem;}
[serverType="2"][roleType="3"] .progressBox div{ top: -0.36rem; height: 1.7rem;} */
.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: #c6baff;}
.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;}
.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: #846bfb;}
.eventList{ padding: .08rem; background: #6b76fb;}
.taskList .head{ margin-bottom: .05rem; font-weight: bold; font-size: .16rem; color: #FFF;}
.taskList .task{ padding-left: .1rem; height: .38rem; line-height: .16rem; margin-bottom: .02rem; display: flex; align-items: center; font-size: .14rem;}
.dailyList .task{ background: #4d4589;}
.eventList .task{ background: #46598a;}
.taskList .task div{ width: 1.35rem;}
.taskList .task p{ width: 1.51rem; height: .33rem; line-height: .33rem; text-align: center; color: #FFF;}
.taskList .task p i{ display: inline-block; margin: 0 .05rem; vertical-align: middle; width: .27rem; height: .24rem;}
.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;}
[roleType="1"] .task div{ color: #a4ffff;}
[roleType="2"] .task div{ color: #f3da95;}
[roleType="3"] .task div{ color: #e47fff;}


/************************************************* 语言分支 *************************************************/
/* lang-en */
.lang-en .wrapper{ background: #46588b url(../images/en/vote/bg.jpg) no-repeat center top; background-size: 19.2rem 11.35rem;}
.lang-en .surplusVote{ background: url(../images/en/vote/surplusVote.png) no-repeat 0 0; background-size: 100% auto;}
.lang-en .surplusVote i{ background: url(../images/en/vote/voteIcon.png) no-repeat 0 0; background-size: 100% auto;}
.lang-en .showTaskBtn{  background: url(../images/en/vote/showTaskBtn.png) no-repeat 0 0; background-size: 100% auto;}
.lang-en .list{ background: url(../images/en/vote/list.jpg) repeat-y center top; background-size: 13.26rem .02rem;}
.lang-en .selSubmitBtn{  background: url(../images/en/vote/selSubmitBtn.png) no-repeat 0 0; background-size: 100% auto;}
.lang-en .item{ background: url(../images/en/vote/item.png) no-repeat 0 0; background-size: 100% auto;}
.lang-en .collect{ background: url(../images/en/vote/collect.png) no-repeat 0 0; background-size: 100% auto;}
.lang-en .changeWorkBtn{ background: url(../images/en/vote/changeWorkBtn.png) no-repeat 0 0; background-size: .19rem .19rem;}
.lang-en .itemInfo .right p::before{ background: url(../images/en/vote/like.png) no-repeat 0 0; background-size: 100% auto;}
.lang-en .itemInfo .right .vote{ background: url(../images/en/vote/voteBtn.png) no-repeat 0 0; background-size: 100% auto;}
.lang-en .loadMore{ background: url(../images/en/vote/loadMore.png) no-repeat center center; background-size: 8.41rem .11rem;}
.lang-en .nullMore{ background: url(../images/en/vote/nullMore.png) no-repeat center center; background-size: 4.09rem .11rem;}
.lang-en .jumpSubmissionBtn{ background: url(../images/en/vote/jumpSubmissionBtn.png) no-repeat 0 0; background-size: 100% auto;}
.lang-en .popTaskWrap{ background: url(../images/en/vote/popTaskWrap.png) no-repeat 0 0; background-size: 100% auto;}
.lang-en .voteInfo .head{ background: url(../images/en/vote/voteInfoHead.png) no-repeat 0 0; background-size: 100% auto;}
.lang-en .voteInfo .head .type{ width: .79rem; background: url(../images/en/vote/roleType.png) no-repeat 0 0; background-size: 100% auto;}
.lang-en .progressBox{ background: url(../images/en/vote/progressBox.png) no-repeat 0 0; background-size: 100% auto;}
.lang-en [serverType="1"][roleType="1"] .progressBox div{ background: url(../images/en/vote/s1_new.png) no-repeat 0 0; background-size: 4.96rem 3.4rem;}
.lang-en [serverType="1"][roleType="2"] .progressBox div{ background: url(../images/en/vote/s1_back.png) no-repeat 0 0; background-size: 4.96rem 3.4rem;}
.lang-en [serverType="1"][roleType="3"] .progressBox div{ background: url(../images/en/vote/s1_active.png) no-repeat 0 0; background-size: 4.96rem 3.4rem;}
/* .lang-en [serverType="2"][roleType="1"] .progressBox div{ background: url(../images/en/vote/s2_new.png) no-repeat 0 0; background-size: 4.96rem 3.4rem;}
.lang-en [serverType="2"][roleType="2"] .progressBox div{ background: url(../images/en/vote/s2_back.png) no-repeat 0 0; background-size: 4.96rem 3.4rem;}
.lang-en [serverType="2"][roleType="3"] .progressBox div{ background: url(../images/en/vote/s2_active.png) no-repeat 0 0; background-size: 4.96rem 3.4rem;} */
.lang-en .progressVote i{ background: url(../images/en/vote/voteIcon.png) no-repeat 0 0; background-size: 100% auto;}
.lang-en .taskList .task p{ background: url(../images/en/vote/taskListVote.png) no-repeat 0 0; background-size: 100% auto;}
.lang-en .taskList .task p i{ background: url(../images/en/vote/voteIcon.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 .wrapper{ background: #46588b url(../images/jp/vote/bg.jpg) no-repeat center top; background-size: 19.2rem 11.35rem;}
.lang-jp .surplusVote{ background: url(../images/jp/vote/surplusVote.png) no-repeat 0 0; background-size: 100% auto;}
.lang-jp .surplusVote i{ background: url(../images/jp/vote/voteIcon.png) no-repeat 0 0; background-size: 100% auto;}
.lang-jp .showTaskBtn{ width: 3.25rem; height: .55rem; background: url(../images/jp/vote/showTaskBtn.png) no-repeat 0 0; background-size: 100% auto;}
.lang-jp .list{ background: url(../images/jp/vote/list.jpg) repeat-y center top; background-size: 13.26rem .02rem;}
.lang-jp .selSubmitBtn{ width: .67rem; background: url(../images/jp/vote/selSubmitBtn.png) no-repeat 0 0; background-size: 100% auto;}
.lang-jp .item{ background: url(../images/jp/vote/item.png) no-repeat 0 0; background-size: 100% auto;}
.lang-jp .collect{ background: url(../images/jp/vote/collect.png) no-repeat 0 0; background-size: 100% auto;}
.lang-jp .changeWorkBtn{ background: url(../images/jp/vote/changeWorkBtn.png) no-repeat 0 0; background-size: .19rem .19rem;}
.lang-jp .itemInfo .right p::before{ background: url(../images/jp/vote/like.png) no-repeat 0 0; background-size: 100% auto;}
.lang-jp .itemInfo .right .vote{ background: url(../images/jp/vote/voteBtn.png) no-repeat 0 0; background-size: 100% auto;}
.lang-jp .loadMore{ background: url(../images/jp/vote/loadMore.png) no-repeat center center; background-size: 9rem .12rem;}
.lang-jp .nullMore{ background: url(../images/jp/vote/nullMore.png) no-repeat center center; background-size: 4.6rem .11rem;}
.lang-jp .jumpSubmissionBtn{ background: url(../images/jp/vote/jumpSubmissionBtn.png) no-repeat 0 0; background-size: 100% auto;}
.lang-jp .popTaskWrap{ background: url(../images/jp/vote/popTaskWrap.png) no-repeat 0 0; background-size: 100% auto;}
.lang-jp .voteInfo .head{ background: url(../images/jp/vote/voteInfoHead.png) no-repeat 0 0; background-size: 100% auto;}
.lang-jp .voteInfo .head .type{ width: .62rem; background: url(../images/jp/vote/roleType.png) no-repeat 0 0; background-size: 100% auto;}
.lang-jp .progressBox{ background: url(../images/jp/vote/progressBox.png) no-repeat 0 0; background-size: 100% auto;}
.lang-jp [serverType="1"][roleType="1"] .progressBox div{ background: url(../images/jp/vote/s1_new.png) no-repeat 0 0; background-size: 4.96rem 3.4rem;}
.lang-jp [serverType="1"][roleType="2"] .progressBox div{ background: url(../images/jp/vote/s1_back.png) no-repeat 0 0; background-size: 4.96rem 3.4rem;}
.lang-jp [serverType="1"][roleType="3"] .progressBox div{ background: url(../images/jp/vote/s1_active.png) no-repeat 0 0; background-size: 4.96rem 3.4rem;}
/* .lang-jp [serverType="2"][roleType="1"] .progressBox div{ background: url(../images/jp/vote/s2_new.png) no-repeat 0 0; background-size: 4.96rem 3.4rem;}
.lang-jp [serverType="2"][roleType="2"] .progressBox div{ background: url(../images/jp/vote/s2_back.png) no-repeat 0 0; background-size: 4.96rem 3.4rem;}
.lang-jp [serverType="2"][roleType="3"] .progressBox div{ background: url(../images/jp/vote/s2_active.png) no-repeat 0 0; background-size: 4.96rem 3.4rem;} */
.lang-jp .progressVote i{ background: url(../images/jp/vote/voteIcon.png) no-repeat 0 0; background-size: 100% auto;}
.lang-jp .taskList .task p{ background: url(../images/jp/vote/taskListVote.png) no-repeat 0 0; background-size: 100% auto;}
.lang-jp .taskList .task p i{ background: url(../images/jp/vote/voteIcon.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;}

/* lang-kr */
.lang-kr .wrapper{ background: #46588b url(../images/kr/vote/bg.jpg) no-repeat center top; background-size: 19.2rem 11.35rem;}
.lang-kr .surplusVote{ background: url(../images/kr/vote/surplusVote.png) no-repeat 0 0; background-size: 100% auto;}
.lang-kr .surplusVote i{ background: url(../images/kr/vote/voteIcon.png) no-repeat 0 0; background-size: 100% auto;}
.lang-kr .showTaskBtn{ width: 3.19rem; height: .55rem; background: url(../images/kr/vote/showTaskBtn.png) no-repeat 0 0; background-size: 100% auto;}
.lang-kr .list{ background: url(../images/kr/vote/list.jpg) repeat-y center top; background-size: 13.26rem .02rem;}
.lang-kr .selSubmitBtn{ width: .67rem; background: url(../images/kr/vote/selSubmitBtn.png) no-repeat 0 0; background-size: 100% auto;}
.lang-kr .item{ background: url(../images/kr/vote/item.png) no-repeat 0 0; background-size: 100% auto;}
.lang-kr .collect{ background: url(../images/kr/vote/collect.png) no-repeat 0 0; background-size: 100% auto;}
.lang-kr .changeWorkBtn{ background: url(../images/kr/vote/changeWorkBtn.png) no-repeat 0 0; background-size: .19rem .19rem;}
.lang-kr .itemInfo .right p::before{ background: url(../images/kr/vote/like.png) no-repeat 0 0; background-size: 100% auto;}
.lang-kr .itemInfo .right .vote{ background: url(../images/kr/vote/voteBtn.png) no-repeat 0 0; background-size: 100% auto;}
.lang-kr .loadMore{ background: url(../images/kr/vote/loadMore.png) no-repeat center center; background-size: 8.41rem .12rem;}
.lang-kr .nullMore{ background: url(../images/kr/vote/nullMore.png) no-repeat center center; background-size: 4.6rem .11rem;}
.lang-kr .jumpSubmissionBtn{ background: url(../images/kr/vote/jumpSubmissionBtn.png) no-repeat 0 0; background-size: 100% auto;}
.lang-kr .popTaskWrap{ background: url(../images/kr/vote/popTaskWrap.png) no-repeat 0 0; background-size: 100% auto;}
.lang-kr .voteInfo .head{ background: url(../images/kr/vote/voteInfoHead.png) no-repeat 0 0; background-size: 100% auto;}
.lang-kr .voteInfo .head .type{ width: .55rem; background: url(../images/kr/vote/roleType.png) no-repeat 0 0; background-size: 100% auto;}
.lang-kr .progressBox{ background: url(../images/kr/vote/progressBox.png) no-repeat 0 0; background-size: 100% auto;}
.lang-kr [serverType="1"][roleType="1"] .progressBox div{ background: url(../images/kr/vote/s1_new.png) no-repeat 0 0; background-size: 4.96rem 3.4rem;}
.lang-kr [serverType="1"][roleType="2"] .progressBox div{ background: url(../images/kr/vote/s1_back.png) no-repeat 0 0; background-size: 4.96rem 3.4rem;}
.lang-kr [serverType="1"][roleType="3"] .progressBox div{ background: url(../images/kr/vote/s1_active.png) no-repeat 0 0; background-size: 4.96rem 3.4rem;}
/* .lang-kr [serverType="2"][roleType="1"] .progressBox div{ background: url(../images/kr/vote/s2_new.png) no-repeat 0 0; background-size: 4.96rem 3.4rem;}
.lang-kr [serverType="2"][roleType="2"] .progressBox div{ background: url(../images/kr/vote/s2_back.png) no-repeat 0 0; background-size: 4.96rem 3.4rem;}
.lang-kr [serverType="2"][roleType="3"] .progressBox div{ background: url(../images/kr/vote/s2_active.png) no-repeat 0 0; background-size: 4.96rem 3.4rem;} */
.lang-kr .progressVote i{ background: url(../images/kr/vote/voteIcon.png) no-repeat 0 0; background-size: 100% auto;}
.lang-kr .taskList .task p{ background: url(../images/kr/vote/taskListVote.png) no-repeat 0 0; background-size: 100% auto;}
.lang-kr .taskList .task p i{ background: url(../images/kr/vote/voteIcon.png) no-repeat 0 0; background-size: 100% auto;}
.lang-kr .taskList .task button{ background: url(../images/kr/vote/taskBtn.png) no-repeat 0 0; background-size: 100% auto;}