.bangdan {
	padding: 0 10px 10px;
}

.bangdan .brandlist li {
	border-radius: 5px;
	margin-top: 20px;
	background-color: #F6F6F6;
	overflow: hidden;
}

.bangdan .brandlist li a {
	display: block;
	color: #FFF;
	line-height: 80px;
	height: 80px;
	padding: 0 105px 0 2px;
	font-size:12px;
	position: relative;
	border-radius: 5px 0 6px 5px;
	transition: all ease-in-out 500ms;
	transform: translateX(-110%);
	opacity: 0
}



.bangdan .brandlist li a:after {
	content: "";
	width: 20px;
	height: 84px;;
	margin-left: -13px;
	border-radius: 0 6px 8px 0;
	position: absolute;
	left: 100%;
	top: -3px;
}

.bangdan.active .brandlist li a {
	transform: translateX(0);
	opacity: 1;
}

.bangdan .brandlist li a .l {
	height: 80px;
}

.bangdan .brandlist li a .l .num {
	width: 60px;
}

.bangdan .brandlist li a .l .bname {
	margin-left: 20px;
}

.bangdan .brandlist li a .r {
	position: absolute;
	right: 15%;
	top: 0;
}

.bangdan .brandlist li a .r .score {
	float: right;
	margin-right: 5px;
}

.bangdan .brandlist li a .r .shuiyin {
	float: right;
	margin-right: 8px;
	padding-top: 24px;
}

.bangdan .brandlist li a .r .shuiyin img {
	width: 32px;
	display: block;
}

.bangdan .brandlist li a .num, .bangdan .brandlist li a .score {
	font-family: 'oswald';
}

.bangdan .brandlist li:after {
	content: "";
	clear: both;
	display: block;
}

.bangdan .brandlist li.li1 a {
	background: -webkit-linear-gradient(to right, rgba(39, 44, 25, 0.6),
		#2777b6);
	background: -o-linear-gradient(to right, rgba(251, 44, 25, 0.6), #2777b6);
	background: -moz-linear-gradient(to right, rgba(251, 44, 25, 0.6),
		#2777b6);
	background: linear-gradient(to right, rgba(39, 139, 182, 1), #2777b6);
	width: 678px;
}

.bangdan .brandlist li.li1 a:after {
	background: #2777b6;
}

.bangdan .brandlist li.li2 a {
	background: -webkit-linear-gradient(to right, rgba(251, 123, 68, 0.6),
		#fb7b44);
	background: -o-linear-gradient(to right, rgba(251, 123, 68, 0.6),
		#fb7b44);
	background: -moz-linear-gradient(to right, rgba(251, 123, 68, 0.6),
		#fb7b44);
	background: linear-gradient(to right, rgba(251, 123, 68, 0.6), #fb7b44);
	width: 665px;
	transition-delay: 400ms;
}

.bangdan .brandlist li.li2 a:after {
	background: #fb7b44;
}

.bangdan .brandlist li.li2 a .starbox .mbg {
	background: linear-gradient(to right, transparent, #FA8D4E);
}

.bangdan .brandlist li.li3 a {
	background: -webkit-linear-gradient(to right, rgba(136, 168, 119, 0.6),
		#88A877);
	background: -o-linear-gradient(to right, rgba(136, 168, 119, 0.6),
		#88A877);
	background: -moz-linear-gradient(to right, rgba(136, 168, 119, 0.6),
		#88A877);
	background: linear-gradient(to right, rgba(136, 168, 119, 0.6), #88A877);
	width: 652px;
	transition-delay: 800ms;
}

.bangdan .brandlist li.li3 a:after {
	background: #88A877;
}

.bangdan .brandlist li.li3 a .starbox .mbg {
	background: linear-gradient(to right, transparent, #8EAC7E);
}

.bangdan .brandlist li.li4 a {
	background: -webkit-linear-gradient(to right, rgba(18, 198, 172, 0.6),
		#12C6AC);
	background: -o-linear-gradient(to right, rgba(18, 198, 172, 0.6),
		#12C6AC);
	background: -moz-linear-gradient(to right, rgba(18, 198, 172, 0.6),
		#12C6AC);
	background: linear-gradient(to right, rgba(18, 198, 172, 0.6), #12C6AC);
	width: 639px;
	transition-delay: 1200ms;
}

.bangdan .brandlist li.li4 a:after {
	background: #12C6AC;
}

.bangdan .brandlist li.li4 a .starbox .mbg {
	background: linear-gradient(to right, transparent, #20C9B0);
}

.bangdan .brandlist li.li5 a {
	background: -webkit-linear-gradient(to right, rgba(69, 108, 166, 0.6),
		#456CA6);
	background: -o-linear-gradient(to right, rgba(69, 108, 166, 0.6),
		#456CA6);
	background: -moz-linear-gradient(to right, rgba(69, 108, 166, 0.6),
		#456CA6);
	background: linear-gradient(to right, rgba(69, 108, 166, 0.6), #456CA6);
	width: 626px;
	transition-delay: 1600ms;
}

.bangdan .brandlist li.li5 a:after {
	background: #456CA6;
}

.bangdan .brandlist li.li5 a .starbox .mbg {
	background: linear-gradient(to right, transparent, #5074AB);
}

.bangdan .brandlist li.li6 a {
	background: -webkit-linear-gradient(to right, rgba(62, 76, 79, 0.5),
		#3e4c4f);
	background: -o-linear-gradient(to right, rgba(62, 76, 79, 0.5), #3e4c4f);
	background: -moz-linear-gradient(to right, rgba(62, 76, 79, 0.5),
		#3e4c4f);
	background: linear-gradient(to right, rgba(62, 76, 79, 0.5), #3e4c4f);
	width: 613px;
	transition-delay: 2000ms;
}

.bangdan .brandlist li.li6 a:after {
	background: #3e4c4f;
}

.bangdan .brandlist li.li6 a .starbox .mbg {
	background: linear-gradient(to right, transparent, #4C595C);
}

.bangdan .brandlist li.li7 a {
	background: -webkit-linear-gradient(to right, rgba(62, 76, 79, 0.5),
		rgba(62, 76, 79, 0.9));
	background: -o-linear-gradient(to right, rgba(62, 76, 79, 0.5),
		rgba(62, 76, 79, 0.9));
	background: -moz-linear-gradient(to right, rgba(62, 76, 79, 0.5),
		rgba(62, 76, 79, 0.9));
	background: linear-gradient(to right, rgba(62, 76, 79, 0.5),
		rgba(62, 76, 79, 0.9));
	width: 600px;
	transition-delay: 2400ms;
}

.bangdan .brandlist li.li7 a:after {
	background: #505D5F;
}

.bangdan .brandlist li.li7 a .starbox .mbg {
	background: linear-gradient(to right, transparent, #5C686A);
}

.bangdan .brandlist li.li8 a {
	background: -webkit-linear-gradient(to right, rgba(62, 76, 79, 0.4),
		rgba(62, 76, 79, 0.8));
	background: -o-linear-gradient(to right, rgba(62, 76, 79, 0.4),
		rgba(62, 76, 79, 0.8));
	background: -moz-linear-gradient(to right, rgba(62, 76, 79, 0.4),
		rgba(62, 76, 79, 0.8));
	background: linear-gradient(to right, rgba(62, 76, 79, 0.4),
		rgba(62, 76, 79, 0.8));
	width: 587px;
	transition-delay: 2800ms;
}

.bangdan .brandlist li.li8 a:after {
	background: #636E70;
}

.bangdan .brandlist li.li8 a .starbox .mbg {
	background: linear-gradient(to right, transparent, #6F7A7C);
}

.bangdan .brandlist li.li9 a {
	background: -webkit-linear-gradient(to right, rgba(62, 76, 79, 0.4),
		rgba(62, 76, 79, 0.7));
	background: -o-linear-gradient(to right, rgba(62, 76, 79, 0.4),
		rgba(62, 76, 79, 0.7));
	background: -moz-linear-gradient(to right, rgba(62, 76, 79, 0.4),
		rgba(62, 76, 79, 0.7));
	background: linear-gradient(to right, rgba(62, 76, 79, 0.4),
		rgba(62, 76, 79, 0.7));
	width: 574px;
	transition-delay: 3200ms;
}

.bangdan .brandlist li.li9 a:after {
	background: #757E80;
}

.bangdan .brandlist li.li9 a .starbox .mbg {
	background: linear-gradient(to right, transparent, #7E8789);
}

.bangdan .brandlist li.li10 a {
	background: -webkit-linear-gradient(to right, rgba(62, 76, 79, 0.3),
		rgba(62, 76, 79, 0.6));
	background: -o-linear-gradient(to right, rgba(62, 76, 79, 0.3),
		rgba(62, 76, 79, 0.6));
	background: -moz-linear-gradient(to right, rgba(62, 76, 79, 0.3),
		rgba(62, 76, 79, 0.6));
	background: linear-gradient(to right, rgba(62, 76, 79, 0.3),
		rgba(62, 76, 79, 0.6));
	width: 561px;
	transition-delay: 3600ms;
}

.bangdan .brandlist li.li10 a:after {
	background: #879091;
}

.bangdan .brandlist li.li10 a .starbox .mbg {
	background: linear-gradient(to right, transparent, #91999A);
}

.bangdan .morebtn {
	height: 2.2em;
	line-height: 2.2em;
	padding: 0 30px;
	background: -webkit-linear-gradient(to right, #2777b6, #fe741c);
	background: -o-linear-gradient(to right, #2777b6, #fe741c);
	background: -moz-linear-gradient(to right, #2777b6, #fe741c);
	background: linear-gradient(to right, #2777b6, #fe741c);
	text-align: center;
	border-radius: 10px;
	display: inline-block;
	margin-top: 30px;
}

.bangdan .zhiminglist {
	margin-top: 10px;
}

.bangdan .zhiminglist li {
	text-align: center;
	box-sizing: border-box;
	width: 32%;
	float: left;
	margin-top: 15px;
	border-width: 1px;
	border-style: solid;
	border-radius: 6px 0 6px 0;
	line-height: 2.4em;
}

.bangdan .zhiminglist li:nth-child(3n+2) {
	margin-left: 2%;
	margin-right: 2%;
}

.bangdan .zhiminglist li img {
	margin-top: 6px;
}

.bangdan .bttlist {
	text-align: center;
	margin-top: 30px;
}

.bangdan .bttlist li {
	display: inline-block;
	line-height: 2.2em;
	border-radius: 1.1em;
	padding: 0 10px;
	margin: 0 5px;
}

.bangdan .bttlist li .iconfont {
	display: inline-block;
	font-size: 1.5em;
	margin-right: 4px;
}

.bangdan .warntext {
	padding: 20px;
	background: #f6f6f6;
	border: 1px solid #e6e6e6;
	margin-top: 30px;
}

.bangdan .warntext b {
	color: #333;
}



@media screen and (max-width: 1080px) {
	.bangdan .brandlist li a .r {
	position: absolute;
	right: 55%;
	top: 0;
}
}