@charset 'utf-8';
body { font-family: 'microsoft yahei', Arial, Helvetica, sans-serif;  }
ul, li { list-style: none; }
a { color: #777; }
.progress-bar { position: relative; height: 100%; margin: 0 auto 5px auto; padding: 0; -webkit-border-radius: 100px 100px 35px 35px; -moz-border-radius: 100px 100px 35px 35px; border-radius: 100px 100px 35px 35px; }
.progress-bar span { display: inline-block; width: 100%; -webkit-transition: height .4s ease-in-out; -moz-transition: height .4s ease-in-out; -ms-transition: height .4s ease-in-out; -o-transition: height .4s ease-in-out; transition: height .4s ease-in-out; -webkit-border-radius: 100px 100px 35px 35px; -moz-border-radius: 100px 100px 35px 35px; border-radius: 100px 100px 35px 35px; background-color: #777; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset; }
.toupiao li:nth-child(10n+1) span { background-color: #34c2e3; }
.toupiao li:nth-child(10n+2) span { background-color: #08b40f; }
.toupiao li:nth-child(10n+3) span { background-color: #ff4141; }
.toupiao li:nth-child(10n+4) span { background-color: #d3c203; }
.toupiao li:nth-child(10n+5) span { background-color: #06f; }
.toupiao li:nth-child(10n+6) span { background-color: #6e08db; }
.toupiao li:nth-child(10n+7) span { background-color: #ff8f00; }
.toupiao li:nth-child(10n+8) span { background-color: #8cb609; }
.toupiao li:nth-child(10n+9) span { background-color: #ce4fff; }
.toupiao li:nth-child(10n+10) span { background-color: #949494; }

/*---------------------------*/
.stripes span { -webkit-animation: animate-stripes 3s linear infinite; -moz-animation: animate-stripes 3s linear infinite; background-image: -webkit-gradient(linear, left top, right bottom, color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)), color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(-135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(-135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(-135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(-135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(-135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); -webkit-background-size: 30px 30px; -moz-background-size: 30px 30px; background-size: 30px 30px; }
@-webkit-keyframes animate-stripes {
	0% { background-position: 0 0; }
	100% { background-position: 60px 0; }
}
@-moz-keyframes animate-stripes {
	0% { background-position: 0 0; }
	100% { background-position: 60px 0; }
}
span[data-value] { position: absolute; bottom: 68px; left: 50%; width: 40px; margin-left: -20px; }
span[data-value]:after { font-size: 14px; position: absolute; top: -25px; left: 0; width: 40px; margin-left: 0; content: attr(data-value); text-align: center; color: #fff; }
.title { font-size: 16px; position: absolute; bottom: 25px; overflow: hidden; width: 100%; max-height: 40px; margin: 0 auto; padding: 0; text-align: center; color: #fff; }
.title2 { font-size: 16px; position: absolute; bottom: 0; width: 100%; margin: 0 auto; padding: 0; text-align: center; white-space: nowrap; color: #f00; }
.toupiao { position: absolute; bottom: 80px; display: -moz-box; display: -webkit-box; display: box; width: 100%; height: 50%; margin: 0 auto; -webkit-box-pack: center; -webkit-box-align: center; }
.toupiao li { font-size: 18px; height: 100%; -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; }
.votebody { position: relative; width: 100%; height: 100%; background: rgba(0, 0, 0, .6); }
.votebox { position: absolute; z-index: 3; top: 15px; right: 15px; display: inline-block; vertical-align: middle; }
.votestart { display: inline-block; width: 90px; height: 35px; vertical-align: middle; background: url(../images/votestart.png) no-repeat; background-size: 90px auto; }
.voteend { display: inline-block; width: 90px; height: 35px; vertical-align: middle; background: url(../images/voteend.png) no-repeat; background-size: 90px auto; }
.vote-wall { position: relative; box-sizing: border-box; width: 100%; height: 100%; padding: 50px 0 0 265px; }
.vote-wall-side { position: absolute; top: 0; left: 10px; box-sizing: border-box; width: 245px; height: 100%; padding: 50px 0; }
.echart-table { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.maintaible { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 100%; padding: 15px 30px; }
#scene_body_bar_head { position: relative; position: absolute; z-index: 2; top: 10px; left: 0; overflow: hidden; width: 100%; height: 38px; cursor: pointer; -webkit-transition: all .2s; -o-transition: all .2s; transition: all .2s; color: #fff; border-radius: 5px; background: rgba(51, 51, 51, 1); }
#scene_body_bar_head_val { font-size: 16px; font-weight: bold; line-height: 38px; height: 38px; padding-left: 10px; }
.arrow-down { position: absolute; top: 7px; right: 10px; display: inline-block; width: 24px; height: 24px; cursor: pointer; background: url(../images/arrow-down.png) no-repeat; background-size: cover; }
.table-tyle-select li { font-size: 14px; line-height: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 30px; padding: 0 10px; }
.table-tyle-select li:hover { background: #222; }
.btnItem { position: relative; overflow: hidden; height: 60px; margin: 10px 0; padding-left: 70px; cursor: pointer; -webkit-transition: all .2s; -o-transition: all .2s; transition: all .2s; color: #fff; border-radius: 5px; }
.btnItem:hover { box-shadow: inset 0 0 100px rgba(0, 0, 0, .5); }
.btnItem img { position: absolute; top: 0; left: 0; display: block; width: 60px; height: 60px; border-radius: 5px 0 0 5px; }
.btnItem div { font-size: 16px; }
.btnItem div p { font-size: 20px; display: block; padding: 5px 0 0 0; }
#scene_body_bar_rcd { height: 100%; }
.vote-wall-btns { display: inline-block; vertical-align: middle; }
.vote-wall-btns .vote-btn { font-size: 16px; line-height: 30px; display: inline-block; height: 30px; margin-left: 10px; padding: 0 20px; cursor: pointer; -webkit-transition: all .2s; -o-transition: all .2s; transition: all .2s; color: #fff; border: 1px solid #fff; border-radius: 1000px; }
.vote-wall-btns .vote-btn:hover { color: #72c700; border-color: transparent; background: #fff; }
.viewRank-line { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 49px; margin: 25px 0; padding: 0 0 0 49px; }
.viewRank-item-index { font-size: 24px; font-weight: 700; line-height: 49px; position: absolute; top: 0; left: 0; overflow: hidden; width: 49px; height: 100%; text-align: center; color: #fff; }
.viewRank-item-con { position: relative; width: 100%; height: 49px; background: rgba(0, 0, 0, .5); border-radius: 1000px; overflow: hidden; }
.rUser { position: absolute; top: 50%; display: inline-block; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); vertical-align: middle; height: 100%; background-image: -webkit-linear-gradient(left, #a54ffe, #5d3dff); background-image: -o-linear-gradient(left, #a54ffe, #5d3dff); background-image: linear-gradient(left, #a54ffe, #5d3dff); border-radius: 1000px; }
.viewRank-item-con p { font-size: 24px; line-height: 60px; display: inline-block; margin-left: 5px; vertical-align: middle; color: rgba(255, 255, 255, .5); position: absolute; left: 10px; top: 50%; transform: translateY(-50%); }
.rUser-avatar { float: left; width: 60px; height: 60px; border-radius: 50%; background: #4bbf6b; }
.rUser-avatar img { width: 48px; height: 48px; margin: 6px; }
.viewRank-item-val { font-size: 20px; line-height: 49px; position: absolute; top: 0; right: 10px; overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 100%; text-align: center; color: #fff; }
.vote-horizontal { width: 100%; height: 95%; }
.vote-pics { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; height: 100%; }
.vote-pics-item { overflow: hidden; width: 23%; margin: 0 1% 15px 1%; text-align: center; color: #fff; }
.vote-item-pic { position: relative; overflow: hidden; border-radius: 5px; background: rgb(0, 174, 204); }

/*min-height: 120px;*/
.vote-item-pic img { position: absolute; width: 100%; height: 100%; z-index: 2; left: 0; top: 0; }
.vote-item-pic p { font-size: 20px; position: absolute; width: 100%; left: 0; bottom: 0; text-align: center; z-index: 3; padding: 5px 0; background: rgba(0, 0, 0, .5); color: #fff; }
.vote-item-pic p b { font-size: 25px; }
.rb-arrow { position: absolute; left: -40px; top: -40px; display: inline-block; width: 0; height: 0; transform: rotate(135deg); border-width: 40px; border-style: solid; border-color: transparent; border-top-color: #fff; z-index: 4; box-shadow: 0 0 5px rbga(0, 0, 0, .5) }
.vote-rank { font-size: 25px; font-weight: bold; line-height: 35px; position: absolute; left: 0; top: 0; display: inline-block; width: 30px; text-align: center; color: #72c700; z-index: 5; }
.vote-name { font-size: 20px; line-height: 40px; color: #fff; }
*, *:before, *:after { box-sizing: border-box; }
.vote-horizontal { margin:auto; max-width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;color: #fff; }
@media(max-width:610px) {
	.vote-horizontal { padding: 0 5%; }
}
.bar { height:40px; width: 0; transition: width 1.2s ease-in-out; position: relative; border-radius: 4px;min-width: 2px; }
@media(max-width:350px) {
	.bar { margin: 2.5rem 0 0.5rem; }
}
.bar.mint { background-color: #14c3a2; background-image: repeating-linear-gradient(-37deg, #14c3a2, #14c3a2 30px, #22e8c3 30px, #22e8c3 60px); background-size: 600px 100%; animation: barberpole 12s linear infinite; border-bottom: 0.2rem solid #0d7e68; }
.bar.red { background-color: #cf4647; background-image: repeating-linear-gradient(-37deg, #cf4647, #cf4647 30px, #da6e6f 30px, #da6e6f 60px); background-size: 600px 100%; animation: barberpole 12s linear infinite; border-bottom: 0.2rem solid #9f292a; }
.bar.orange { background-color: #eb7b59; background-image: repeating-linear-gradient(-37deg, #eb7b59, #eb7b59 30px, #f09f87 30px, #f09f87 60px); background-size: 600px 100%; animation: barberpole 12s linear infinite; border-bottom: 0.2rem solid #dd481b; }
.bar.lila { background-color: #524656; background-image: repeating-linear-gradient(-37deg, #524656, #524656 30px, #6d5d72 30px, #6d5d72 60px); background-size: 600px 100%; animation: barberpole 12s linear infinite; border-bottom: 0.2rem solid #2a242c; }
.bar.gray { background-color: #595b5a; background-image: repeating-linear-gradient(-37deg, #595b5a, #595b5a 30px, #727574 30px, #727574 60px); background-size: 600px 100%; animation: barberpole 12s linear infinite; border-bottom: 0.2rem solid #333434; }
.bar.active:after, .bar.active:before { opacity: 1; }
.bar:before { content: attr(data-skill); display: block; position: absolute; top: 0; left: 0; padding: 10px; height: 40px; font-style: italic; opacity: 0; transition: opacity 2s 0.6s; }
.bar-item{width:100%; padding-left: 60px;position: relative;margin-bottom: 15px}
.num-rank{position: absolute;left: 0;top: 50%;width: 60px;text-align: center;font-weight: bold;font-size: 25px;-webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
     -o-transform: translateY(-50%);
        transform: translateY(-50%);}
.data-skill{position: absolute;left:70px; top:50%;font-size: 16px;-webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
     -o-transform: translateY(-50%);
        transform: translateY(-50%);text-shadow:1px 1px 0 rgba(0,0,0,.8);}
.data-skill span{margin-left: 10px;}
.data-percent{position: absolute;right:0;top:0;line-height: 40px;font-size: 18px;}
@media(max-width:350px) {
	.bar:before { top: -100%; color: black; padding: 10px 0 0; }
}
.bar:after { content: attr(data-percent); display: block; position: absolute; top: 0; right: 0; height: 40px; padding: 10px; opacity: 0; transition: opacity 2s 0.6s; }
@media(max-width:350px) {
	.bar:after { P
	left: 0; }
}
@keyframes barberpole {
	from { background-position: 0% 0%; }
	to { background-position: 600px 0%; }
}
