/* thepaper vote 1.4 by lintao@thepaper.cn, latest update 20210823 16:40 */
html,body{margin:0; padding:0; width:100%; height:100%;}
body{font:normal 16px/1.6em "Microsoft Yahei","Lucida Grande",Tahoma,Verdana,STXihei,hei; background-color: #323543; color:#fff;}
ul,ol,li,em,p,span,h1,h2,h3{margin:0; padding:0; font-weight:normal; list-style:none; font-style:normal}
a {text-decoration: none;}
.hide {display: none !important;}

/*loading page*/
.loadpage{position:fixed; width:100%; height:100%; left:0; top:0; background-color:#01a5ec; z-index:100; color:#fff;}
.loadpage .tips{position:absolute; top:0; left:0; width:100%; height:100%; display: table; font-size:14px; line-height:1.6em; letter-spacing:2px; text-align: center;}
.tipbox {display: table-cell; vertical-align: middle;}
.tipbox p {padding: 0 15px;}
.loader {position:relative; margin-top:2em;}
.loader span {position:absolute; left:0; top:12px; width:100%; font-size:10px; letter-spacing:0;}
.loader img{animation:rolling 3s linear infinite; -webkit-animation:rolling 3s linear infinite;}

/*share box*/
.footer {padding: 30px 0 10px; text-align: center;}
.pcmode .footer {background-color: #323543; padding: 60px 0;}

/* main style */
.voteflag {width:160px; height:45px; overflow:hidden; margin:0 auto; text-align:center; background:#1e9ad7 url("paper-logo-w.png") center center no-repeat; -webkit-background-size:90px; background-size:90px; padding-top:115px; margin-bottom:50px;}
.voteflag h1 {font-size:28px; border-top:1px solid rgba(255,255,255,0.5); width:90px; margin-left:35px; padding-top:5px; line-height: 1em;}

.ptitle {padding:0 15px 20px;}
.pcmode .ptitle{border-bottom: 1px dashed #445f66;}
.ptitle h1 { font-size: 24px; margin-bottom:20px; text-align:center;}
.ptitle p {max-height: 40vh; overflow-y: auto; text-align: justify;}
.maindesc {line-height:1.6em; font-size:14px;}
.pcmode .ptitle h1 {font-size: 36px;}
.pcmode .maindesc {font-size:16px;}
.actionbar {position:absolute; left:0; bottom:30px; width:100%;}
.pcmode .actionbar {position:static; margin:30px 0;}
.btn-start {display:inline-block; background-color:#1b4da0; width:90%; margin:0 5%; text-align:center; font-size:16px; color:#fff; text-decoration:none; padding:10px 0;}

.container{position:relative; margin:0 auto; width:100%; max-width:640px; background-color:#323543; height:100%; overflow-x: hidden;}
.box{position:absolute;top:0px;left:0px;width:100%;height:100%}
.pcmode .container{background-color:transparent;}

.wrapper {width:100%;}
.votelist-wrap {background-color: #323543;}
.voteresults-wrap {background-color: #e8e4dd; padding: 20px 0;}

.topbar {position:relative;}
.vote-title{font-size:2.5em;}
.votemark {width:70px; height:25px; margin:0 auto; text-align:center; background-color:#335167; padding-top:45px; font-size:14px;}
.voteindex{position:absolute; top:50px; right:15px; color:#666;}
.prepage {position:absolute; top:40px; left:15px; height:30px; line-height:30px; vertical-align:top; color:#036eb8;}
.prepage span {display:inline-block; width:30px; height:30px; margin-right:10px; background:transparent url("icon-prev.svg") 0 0 no-repeat; -webkit-background-size:30px; background-size:30px;}
.votelist, .vote-results {padding:50px 15px 15px;}
.pcmode .votelist, .pcmode .vote-results {padding:0;}
.vote-results .voterlist {
    min-height: 50vh;
    background: transparent url("loading.png") no-repeat center center;
    background-size: 50px;
}
.vote-results .voterlist.active {
    background-image: none;
}
.pcmode .voteitem {border-bottom: 1px dashed #445f66; clear: both; padding: 50px 0;}
.voteitem h2 {font-size:20px; text-align:left; margin-bottom:20px;}
.pcmode .voteitem h2, .pcmode .vote-results h1 {font-size:24px; line-height: 1.6em; margin-bottom: 20px; text-align: left;}
.voteitem h2 em{font-size: 20px; color: #036eb8;}
.titleimg {text-align: center; margin-bottom: 20px; width: 100%; max-height: 400px; overflow: hidden; background-color: #fff;}
.titleimg img {vertical-align: top; max-width: 100%; max-height: 200px;}
.pcmode .titleimg img {vertical-align: top; max-width: 640px; max-height: 400px;}
.optionlist {font-size: 14px;}
.pcmode .optionlist {font-size: 16px;}
.optionlist li {margin-bottom:5px;}
.pcmode .optionlist li {margin-bottom:10px;}
.votelist .oimode li {display: inline-block; margin-right: 10px; margin-bottom: 5px;}
.votelist .oimode li:nth-child(even) {margin-right: 0;}
.pcmode .oimode li {width:300px; margin: 0 10px;}
.textbar {display:block; background-color:#1e9ad7; color:#fff;}
.active .textbar {background-color:#ea5414;}
.textbar .icon-opt {float:left; width:30px; height:30px; margin-top:5px; margin-right:5px;  background:transparent url(icon-opt.svg) 0 0 no-repeat; -webkit-background-size:60px; background-size:60px;}
.pcmode .textbar .icon-opt {margin-top:10px; margin-left: 10px;}
.oimode .icon-opt {display: none;}
.optionlist .textbar em {overflow: hidden; display: block; line-height: 20px; padding: 10px 10px 10px 0;}
.oimode .textbar em {padding: 10px;}
.pcmode .textbar em {line-height: 30px;}
.ops .active .textbar .icon-opt {background-position:0 -30px;}
.opm .textbar .icon-opt {background-position:-30px 0;}
.opm .active .textbar .icon-opt {background-position:-30px -30px;}
.optimg {background-color:#1e9ad7; overflow: hidden; text-align: center; vertical-align: middle; display:none;}
.pcmode .optimg {width: 280px; height:280px; padding: 10px 10px 0;}
.active .optimg {background-color:#ea5414;}
.oimode .optimg {display:block;}
.voteri .optimg {display:table-cell;}
.pcmode .oimode .optimg {display:table-cell;}
.optimg img {max-width: 90%; max-height: 90%; margin: 5%; vertical-align: top;}
.pcmode .optimg img {width:100%; max-height: 280px; margin: 0;}
.submit-opt {display:inline-block; background-color:#1b4da0; width:100%; text-align:center; font-size:16px; color:#fff; text-decoration:none; padding:10px 0; margin-top:20px;}
.pcmode .submit-opt {margin-top:80px; margin-bottom: 50px;}

.question{margin:5px 10px; }
.question p{position:relative;top:-15px;
    font-size:1.8em;text-align:justify;
    line-height:25px;}
.question p:nth-child(2){opacity:0;}
.option-box{position:absolute;left:0;bottom:0px;
     width:100%;}
.options-list{margin:10px;}
.option{width:100%; height:50px;
    color:white;
    text-align:center;
    font-size:14px;
    cursor:pointer;
    -webkit-perspective:1000;
    -moz-perspective:1000;
    -o-perspective:1000;
    perspective:1000;
}

#end{height:100%;}
.vote-results h1 { font-size: 20px; text-align: center; margin-bottom:5px;}
.vote-results p {text-align:center; font-size:12px; margin-bottom:10px;}
.pcmode .vote-results h1 {color: #009fe8; text-align: center; font-size: 36px; line-height: 1em;}
.pcmode .vote-results p {color: #9e9e9f; text-align: center; font-size: 18px;}
.voteri {background-color:#E9E5DE; margin-bottom:20px; color:#666;}
.pcmode .voteri {background-color:transparent;}
.voteri h2 {
    padding: 5px 10px;
    border-bottom: 1px solid #999;
    color: #333;
    line-height: 1.4em;
    font-size: 16px;
    font-weight: bold;
}
.pcmode .voteri h2 {border-top:2px solid #999; border-bottom: 0 none; color:#000; font-size: 24px; margin-bottom: 10px; padding: 20px 0 0; line-height: 1.6em;}
.voteri ul {padding:5px 10px; font-size:14px;}
.pcmode .voteri ul {padding:0;}
.voteri li {color:#1e9ad7; border-top: 1px dotted #ccc; clear: both; padding:10px 0;}
.voteri li:after {content:""; display:table; clear:both;}
.pcmode .voteri li {margin:0 0 20px; width: 640px;}
.voteri li:first-child {border-top:0 none;}
.rtimg {text-align:center; margin-bottom: 0; background-color: #fff;}
.pcmode .rtimg {margin-bottom: 10px;}
.rtimg img {max-width: 100%; max-height: 160px; vertical-align: top;}
.pcmode .rtimg img {max-height: 420px;}
.voteri h3 {margin-bottom:5px; font-size: 14px; line-height: 1.4em;}
.pcmode .voteri h3 {font-size: 18px;}
.pcmode .voteri h3 {color: #1b99d7;}
.voteri .roptimg {display: none; float: left; height: 40px; width: 40px; margin-right: 10px; background-color: #fff; text-align: center; overflow: hidden;}
.pcmode .voteri .roptimg {height: 80px; width: 80px;}
.oimode .roptimg {display: table-cell; vertical-align: middle; font-size: 22px;}
.pcmode .oimode .roptimg {font-size: 45px;}
.voteri .roptimg img {max-height: 40px; max-width: 40px; vertical-align: middle;}
.pcmode .voteri .roptimg img {max-height: 80px; max-width: 80px;}
.roptchart {overflow: hidden;}
.bar {width: 90%; height:15px; font-size: 12px !important;}
.oimode .bar {float:left; width:70%;}
.bar .inner {position:relative; min-width: 2px; height:15px; background-color:#1e9ad7; width: 1%;}
.bar .inner em {position:absolute; right:-35px; top:-5px; width: 30px;}
.pcmode .bar {height:22px; width: 600px;}
.pcmode .bar .inner {height:22px;}
.pcmode .bar .inner em {color: #ea6000; font-size: 16px;}

/*  animation */
@-webkit-keyframes rolling{
    0%{-webkit-transform:rotate(0deg);}
    100%{-webkit-transform:rotate(-360deg);}
}
@keyframes rolling{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(-360deg);}
}