﻿.pinpai-toupiao{  }
.pinpai-toupiao h2{ font-size:30px; padding:40px; text-align:center; font-weight:bold; color: var(--primary);}
.pinpai-toupiao h2 .l,.pinpai-toupiao h2 .r{width: 36px; display:inline-block; position:relative; margin:0 15px;
    height: 3px;
    border-radius: 10px;
    background: #bbbbbb;
 }
.pinpai-toupiao h2 .l:before{ position:absolute;
    content: "";
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #bbbbbb; left:-12px;
}
.pinpai-toupiao h2 .l:after{ position:absolute; right:0;
    content: "";
    display: block;
    width: 24px;
    height: 3px;
    border-radius: 10px;
    background: #bbbbbb;
    top: -9px;
}

.pinpai-toupiao h2 .r:before { position:absolute;
    content: "";
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #bbbbbb; right:-12px;
}
.pinpai-toupiao h2 .r:after { position:absolute; left:0;
    content: "";
    display: block;
    width: 24px;
    height: 3px;
    border-radius: 10px;
    background: #bbbbbb;
    top: -9px;
}
.pinpai-toupiao .toupiao-content{ padding:15px; line-height:2; border:1px solid #e8e8e8;}
.pinpai-toupiao .toupiao-content a{ color:#d01414;}



.pinpai-toupiao ul.toupiao{}
.pinpai-toupiao ul.toupiao li{ line-height:2; border-bottom:1px solid #e8e8e8; position:relative; padding:20px 0;  }

.pinpai-toupiao ul.toupiao li .t-1 i{  background:url(../images/brand-top3.png) no-repeat center top; background-size:auto 40px; display:block; float:left; width:28px; height:40px; text-align:center; margin-right:15px; line-height:46px; color:#fff; font-style:normal; position:absolute; top:0; left:0; z-index:2;}
.pinpai-toupiao ul.toupiao.first li:nth-child(1) .t-1 i{background:url(../images/brand-top1.png) no-repeat center top;background-size:auto 40px;}
.pinpai-toupiao ul.toupiao.first li:nth-child(2) .t-1 i{background:url(../images/brand-top2.png) no-repeat center top;background-size:auto 40px;}
.pinpai-toupiao ul.toupiao.first li:nth-child(3) .t-1 i{background:url(../images/brand-top3.png) no-repeat center top;background-size:auto 40px;}
.pinpai-toupiao ul.toupiao li .t-1{ width:15%; background:#fff; float:left; margin-right:3%;position:relative; border-radius:6px; overflow:hidden;}
.pinpai-toupiao ul.toupiao li .t-1 img{ display:block; max-width:100%;}
.pinpai-toupiao ul.toupiao li .t-w{ width:35px; position:relative; height:100px; background:none;}

.pinpai-toupiao ul.toupiao li .t-2{ width:67%; float:left;}
.pinpai-toupiao ul.toupiao li .t-2 h3{ font-size:18px; font-weight:bold; display:block; color:#000; line-height:1.7;text-overflow:ellipsis; overflow:hidden; margin-bottom:10px;
	-o-text-overflow:ellipsis;
	-webkit-text-overflow:ellipsis;
	-moz-text-overflow:ellipsis;
	white-space:nowrap;}
.pinpai-toupiao ul.toupiao li .t-2 h3 a{color:#000;}
.pinpai-toupiao ul.toupiao.first li:nth-child(1) .t-2 h3 a{ color:#d01414;}
.pinpai-toupiao ul.toupiao.first li:nth-child(2) .t-2 h3 a{ color:#ff7640;}
.pinpai-toupiao ul.toupiao.first li:nth-child(3) .t-2 h3 a{ color:#fdc45c;}
.pinpai-toupiao ul.toupiao li .t-mark{position: absolute; z-index: 1; margin-top: -30px;}


.pinpai-toupiao ul.toupiao li .t-2 p{ line-height:2;margin-bottom:10px; color:#999;
word-break:break-all;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;}
.pinpai-toupiao ul.toupiao li .t-2 span{}
.pinpai-toupiao ul.toupiao li .t-2 i{font-size:12px; font-style:normal; color:#aaa; line-height:1.2; display:inline-block;}
.pinpai-toupiao ul.toupiao li .t-2 i:before{ content:'\e697'; font-size:17px; color:#aaa; line-height:1; font-family:'iconfont'; margin-right:5px; float:left;}

.pinpai-toupiao ul.toupiao li .t-2-label.label{background-color: rgba(208, 20, 20, 0.05); color:#d01414; padding:3px 5px; line-height: 1.2;}
.pinpai-toupiao ul.toupiao li .t-2-label{display: inline-block; margin-right: 30px;}
.pinpai-toupiao ul.toupiao li .t-2-label.label span + span:before{content: '-'; padding: 0 3px; color:rgba(208, 20, 20, 0.5);}
.pinpai-toupiao ul.toupiao li .t-2-intro{}

.pinpai-toupiao ul.toupiao li .t-3{ width:12%; float:right; font-size:30px; line-height:2.8; border-radius:6px; overflow:hidden; box-shadow:0 0 15px rgba(0,0,0,0.15); font-weight:bold; color:#d01414; text-align:center; background:#fff;}
.pinpai-toupiao ul.toupiao li .t-3 a.t{ background:#d01414; height:33px; line-height:33px; border-radius:0; color:#fff; display:block; padding:0 18px; font-size:14px;}
.pinpai-toupiao ul.toupiao li .t-3 span{ background:#ddd;  height:33px; line-height:33px;  color:#fff; display:block; padding:0 18px; font-size:14px; }



/**************************************/

.pinpai-toupiao ul.toupiao-list{}
.pinpai-toupiao ul.toupiao-list li{ padding:15px 0;border-bottom:1px solid #e8e8e8;}
.pinpai-toupiao ul.toupiao-list li img{ float:right; margin-left:30px;}
.pinpai-toupiao ul.toupiao-list li h3{ font-size:18px; font-weight:bold; color:#000; margin-bottom:12px;
text-overflow:ellipsis; overflow:hidden;
	-o-text-overflow:ellipsis;
	-webkit-text-overflow:ellipsis;
	-moz-text-overflow:ellipsis;
	white-space:nowrap;
	}
.pinpai-toupiao ul.toupiao-list li p{ line-height:2;margin-bottom:12px;

word-break:break-all;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;}
.pinpai-toupiao ul.toupiao-list li span{ border:1px solid #d01414; color:#d01414; padding:0 15px; font-size:12px; line-height:1.8; display:inline-block;}
.pinpai-toupiao ul.toupiao-list li i{ float:right; font-size:12px; font-style:normal; color:#aaa; line-height:1.2;}
.pinpai-toupiao ul.toupiao-list li i:before{ content:'\e697'; font-size:17px; color:#aaa; line-height:1; font-family:'iconfont'; margin-right:5px; float:left;}
.pinpai-toupiao ul.toupiao-list li:last-child{ border-bottom:0;}



/*新版本榜单*/
.bodybg{ background:url(../images/brand-ten-bg.jpg) no-repeat center top; height:996px;overflow:hidden; }
.bodybg2{  background:url(../images/brand-ten-top.png) no-repeat center bottom;background-size:100% auto;height:1000px; padding:60px 0; overflow:hidden; }
.pinpai{ max-width:999px; margin:0 auto;}
.pinpai ul.title{ font-size:48px; font-weight:bold; color:#FFF2A0; text-align:center;}
.pinpai ul.about{ font-size:16px; text-align:center; line-height:2; padding:15px;color:#FFF2A0;  margin:30px auto; background:rgba(255,255,255,0.15); padding:20px; border-radius:5px; box-shadow:0 10px 10px rgba(0,0,0,0.1);}
.pinpai ul.list{ display:flex;}
.pinpai ul.list li{ flex:1; text-align:center; padding-top:70px;}
.pinpai ul.list li:nth-child(2){ padding-top:10px;}
.pinpai ul.list li img.jiang{ display:block; margin:0 auto; width:140px;}
.pinpai ul.list li .com{ border-radius:5px; overflow:hidden; width:110px; height:110px; margin:0 auto; border:1px solid transparent;}
.pinpai ul.list li .com img{ display:block; width:108px; height: 108px; margin: 0 auto;}
.pinpai ul.list li .zhu{ color:#FFF2A0; margin-top:-20px; padding:60px 20px; line-height:1.8;}
.pinpai ul.list li .zhu .zhu-shortname{ font-size:20px; font-weight:bold;}
.pinpai ul.list li .zhu .zhu-name{ font-size:16px; display:block; margin:15px auto;}
.pinpai ul.list li .zhu .vote-btn{ background:#FFF2A0; display:block; height:46px; line-height:46px; border-radius:40px; color:#be0502; font-size:25px; font-weight:bold; width:200px; margin:20px auto; cursor: pointer;}
.pinpai ul.list li .zhu .vote-btn i{ margin-right:6px;}
.pinpai ul.list li .zhu .vote-btn-gray{ cursor: default;}
.pinpai ul.list li .zhu a{color:#FFF2A0;}
.pinpai ul.list li .zhu2{ height:306px; background:url(../images/brand-ten-z1.png) no-repeat top;}
.pinpai ul.list li .zhu1{ height:368px; background:url(../images/brand-ten-z2.png) no-repeat top;}
.pinpai ul.list li .zhu3{ height:306px; background:url(../images/brand-ten-z3.png) no-repeat top;}

.pinpaibg{ background: linear-gradient(180deg, #971515 0%, #BF2B2B 8%, #C63434 100%); padding:60px 0;}
.pinpailist{ margin:0 auto;}
.pinpailist li{ max-width:1200px; margin:0 auto 40px auto; border:2px solid #FFF2A0; color:#FFF2A0; line-height:2; border-radius:10px; padding:30px; position:relative; padding-left:140px; display:flex;}
.pinpailist li .pic{ float:left;  flex:2;}
.pinpailist li .pic a{display: block; width:134px; height:134px;}
.pinpailist li .pic img{border-radius:5px;}
.pinpailist li .text{ flex:6;}
.pinpailist li .text .item-name{ font-size:18px;}
.pinpailist li .text .item-name a{color: #FFF2A0;}
.pinpailist li .text .item-intro{ font-size:12px; margin:6px 0;}
.pinpailist li .text .item-label{padding-top:2px;}
.pinpailist li .text .item-label span{ display: inline-block; background:rgba(255,255,255,0.15); padding:6px 8px; line-height: 1; border-radius: 2px;}
.pinpailist li .piao{ flex:1.2; text-align:center; background:#FFF2A0; border-radius:10px; padding:10px 0 0 0;  color:#aa1412; margin-left:40px;}
.pinpailist li .piao .vote-num{ font-size:32px; font-weight:bold; margin:5px auto;}
.pinpailist li .piao .vote-btn{ background:#C63434; color:#FFF2A0; display:block; padding:5px 12px; font-size:14px; cursor: pointer}
.pinpailist li .piao .vote-btn i{ font-size:14px; margin-right:5px;}
.pinpailist li .piao .vote-btn-gray{ background: rgba(198,52,52,0.25); cursor: default;}
.pinpailist li:before{ content:attr(data-id); float:left; height:50px; line-height:50px; background:#FFF2A0;  width:50px; display:block; border-radius:50px; color:#aa1412; font-size:30px; font-weight:bold; text-align:center; position:absolute; top:50%; margin-top:-25px; left:40px;}
.pinpailist li:hover{ background:#aa1412;}

.pinpaituijian{  margin:80px auto 60px;}
.pinpaituijian ul.title{ font-size:48px; font-weight:bold; color:#FFF2A0; text-align:center;}
.pinpaituijian ul.list{ margin:50px auto;max-width:1200px;}
.pinpaituijian ul.list li{ float:left; width:150px; margin-bottom:20px; color:#FFF2A0; margin-right:60px;}
.pinpaituijian ul.list li:nth-child(6n){ margin-right:0;}
.pinpaituijian ul.list li .pic{ height:150px; overflow:hidden; position:relative; width:100%; border-radius:5px; box-shadow:0 5px 5px rgba(0,0,0,0.1); }
.pinpaituijian ul.list li .pic img{ position:absolute; top:50%;-webkit-transform: translate(0,-50%);transform: translate(0,-50%);}
.pinpaituijian ul.list li h3{ padding:15px 0; text-align:center;}
.pinpaituijian ul.list li h3 a{color: #FFF2A0;}

.pinpaibangdan{ margin:60px auto; background:url(../images/brand-ten-top.png) no-repeat center bottom; padding-bottom:1px; background-size:100% auto;}
.pinpaibangdan ul.title{ font-size:48px; font-weight:bold; color:#FFF2A0; text-align:center;}
.pinpaibangdan ul.list{ margin:50px auto;  max-width:1200px; padding-top:10px;}
.pinpaibangdan ul.list li{ float:left; background:#FFF2A0; text-align:center; padding:15px 0; border-radius:5px; color:#000; font-size:18px; width:210px; margin-bottom:35px; margin-right:37.5px;}
.pinpaibangdan ul.list li:nth-child(5n){ margin-right:0;}

/*榜单介绍按钮*/
.dialog-btn{}
.dialog-btn a{ background-color:#FFF2A0; display:inline-block;  border-radius:100px; color:#be0502; font-size:14px; margin:12px 10px 0; padding:8px 20px; line-height: 1;}


/*更多按钮*/
.toupiao-more{text-align: center;}
.more-btn{ background-color:#FFF2A0; display:inline-block;  border-radius:100px; color:#be0502; font-size:25px; margin:0 auto; padding: 10px 50px;}
.more-btn:not(.more-btn-gray):hover{color:red;}
.more-btn i{ margin-right:6px;}
.more-btn-gray{ background-color:rgba(255,242,160,0.75);}

/*投票说明*/
.toupiao-intro{padding:20px 0; height: 100%;}
.title-intro{ padding-bottom: 30px; font-size:48px; font-weight: bold; color: #FFF2A0; text-align: center;}
.title-intro{ padding:40px; text-align:center; font-weight:bold; }
.title-intro .l,
.title-intro .r{width: 36px; display:inline-block; position:relative; margin:0 15px;height: 3px;border-radius: 10px; background: #fff6bb;}
.title-intro .l:before{ position:absolute;content: "";display: block;width: 3px;height: 3px;border-radius: 50%;background: #fff6bb; left:-12px;}
.title-intro .l:after{ position:absolute; right:0;content: "";display: block;width: 24px;height: 3px;border-radius: 10px;background: #fff6bb;top: -9px;}
.title-intro .r:before { position:absolute;content: "";display: block;width: 3px;height: 3px;border-radius: 50%;background: #fff6bb; right:-12px;}
.title-intro .r:after { position:absolute; left:0;content: "";display: block;width: 24px;height: 3px;border-radius: 10px;background: #fff6bb;top: -9px;}
.toupiao-intro .content{  margin: 0 auto; padding:0 30px; line-height:2.5; font-size: 16px; color:#FFF2A0;}

.bg{background: linear-gradient(180deg, #971515 0%, #BF2B2B 8%, #C63434 100%);}