.bigweb {
	background: #fafafa;@extend .cf;
}

.breadcrumb {
	@extend .web;padding: 15px 0;
	color: $c99;
}

.bar {
	width: 160px;float: left;
	.bar_box {
		margin-bottom: 15px;background: $cff;padding: 15px;
		.bar_box_head {
			height: 30px;line-height: 30px;color:$c22;
			font-size: 16px;
			.more {float: right;font-size: 12px;padding-right: 10px;font-weight: normal;color: $c55;}
		}
		.bar_goods {
			li {
				padding: 5px 0; position: relative;
				&:last-child {border: none;}
				a {display: block;@extend .cf;text-decoration: none;}
				img {width: 60px;height: 60px;float: left;margin-right: 5px;}
				strong {display: block; max-height: 36px; line-height: 18px; overflow: hidden; font-weight: normal;}
				em {
					display: block; margin-top: 5px; font-size: 12px; color: darken($red, 10%); font-weight: bold;
					line-height: 18px; width: 65px; overflow: hidden;
					position: absolute; bottom: 5px; left: 65px;
				}
			}
			&.ranking {
				counter-reset: num;
				li {
					position: relative;
					&:before {
						content: counter(num);counter-increment: num;
						display: block;position: absolute;right: 5px;bottom: 3px;font-size: 14px;
						font-style: italic;z-index: 1;color: $cff;
					}
					&:after {
						content: "";position: absolute;right: 0;bottom: 0;width: 0;height: 0;display: block;
						border-style: solid;border-width: 14px;border-color: transparent $red $red transparent;
					}
					&:nth-child(n+4):after {
						border-color: transparent $c99 $c99 transparent;
					}
				}
			}
		}
		.bar_nav {
			li {
				height: 28px;line-height: 28px;overflow: hidden;padding-left: 20px;

			}
		}
	}
	.bar_goods_nav {
		dl {
			@extend .cf;
			border-bottom: 1px dashed $cdd;padding: 10px;
			&:last-child {border: none;}
			dt {
				height: 24px;line-height: 24px;font-weight: bold;
				a {color: $c99;}
			}
			dd {
				width: 100%;float: left;text-indent: 10px;position: relative;
				@include oneline(20px);
				&:after {
					content: "";width: 3px;height: 3px;background: $cf60;display: block;
					position: absolute;left: 0;top: 8px;
				}
			}
		}
	}
}

.main {
	width: 1200-200px;float: right;background: $cff;padding: 15px;margin-bottom: 15px;
}

.main_head {
	height: 30px;line-height: 30px;color: $c22;font-size: 18px;

	mark {padding: 0 5px;background: none;color: $pink;}
	.barnd_web {
		float: right;margin-right: 15px;text-decoration: none;@include dz();
	}
}
.article_list {
	li {
		height: 45px;line-height: 45px;padding: 0 10px; font-size: 15px;
		a {
			white-space: nowrap; overflow: hidden; text-overflow:ellipsis; display: block; padding: 0 15px 0 0;
		}
		time {float: right;color: $c99;font-size: 12px;}
		&:hover {
			background: $cfa;
		}
	}
}

.pages_bar {
	margin: 20px;text-align:center;color:$c55;
	a,span {
		display:inline-block;margin:0 3px;padding:5px 8px;border-radius: 4px;
		text-align:center;color:$c55;background: $cf5;@include dz();
	}
	a:hover {background: $cf60;color: $cff;text-decoration: none;}
	a.current_page {background: $cf60;color:$cff}
	span{color:$c99}
}


/* article read page style */
$artWidth:895px;
$artLineColor:#ddd;
$artTitleColor:#f60;
$artBgColor:#fafafa;
$artAColor:#555;
.article {width: $artWidth;overflow: hidden;line-height: 2;padding: 10px;}
.article_title{color:$artTitleColor; font-size: 22px;padding: 10px 0}
.article_date{height:28px; line-height:28px;color: $c99;display: block;background: $cfa;text-indent: 2em;}
.article_content {
	padding: 10px 0;
	font-size:13px;width:895px; overflow:hidden;
	p { padding:5px 0;text-indent: 2em;}
	a,span,em,i,u,strong,b {padding: 0 5px;}
	u {text-decoration: none;border-bottom: 1px solid $c55;}
	img {
		max-width: 895px;
		text-align:center; display:block; margin: 0 auto;
	}
	.img-brk {display: none;}
	a:link,a:visited,a:active{color: $blue;}
	a:hover{color:$cf60;}
	h1,h2,h3,h4,h5,h6{
		color: $c22;font-weight: bold;
	}
	embed {width:510px; height:400px; display:block; margin:10px auto;}
	table {
		width:100%; border:1px solid $cdd;font-size:12px;background: $cff;margin: 5px auto;
		th {color:$cff;font-size:14px;background: $c55;}
		th,td {border:1px solid $cdd;padding:3px 8px;}
		h1,
		h2,
		h3,
		h4,
		h5,
		h6 { line-height:150%; overflow:hidden; font-size:12px; background:none; border:none;}
		tr:hover { background:$cff;}
		img {display:inline; border:none}
		tr td a:link,tr td a:visited,tr td a:active,tr td a:hover{ font-size:12px;}
	}

	h1 {font-size:24px;}
	h2 {font-size:20px;}
	h3 {font-size:18px;}
	h4 {font-size:16px;}
	h5 {font-size:14px;}
	h6 {font-size:14px;}
	h1 a:link,h1 a:visited,h1 a:active,h1 a:hover{font-size:20px;}
	h2 a:link,h2 a:visited,h2 a:active,h2 a:hover{font-size:18px;}
	h3 a:link,h3 a:visited,h3 a:active,h3 a:hover{font-size:16px;}
	h4 a:link,h4 a:visited,h4 a:active,h4 a:hover{font-size:14px;}
	h5 a:link,h5 a:visited,h5 a:active,h5 a:hover{font-size:14px;}
	h6 a:link,h6 a:visited,h6 a:active,h6 a:hover{font-size:14px;}
}
// 推荐
.artice_goods {
	margin-top: 30px;
	h3 {
		height: 40px;line-height: 40px;text-indent: 15px; border-top: 15px solid $cf0;
		font-size: 14px;color: $c22; border-bottom: 1px solid #ddd;
	}
	ul{@extend .cf; width: 980px; margin: 0 auto;}
	li {
		width: 222px; height: 285px; float: left; background: $cff; margin: 21px 21px 0 0;
		border: 1px solid #f1f0ec;
		a {
			width: 222px; height: 285px; display: block; text-decoration: none; float: left;
			&:hover {
				box-shadow: 3px 5px 15px rgba($c99,.5);
			}
			img {width: 200px; height: 200px; display: block; margin: 11px;}
			div {
				height: 63px; padding: 8px 10px; width: 100%; box-sizing: border-box;
				background: #F5F5F5;
				strong {display: block;;margin: 5px auto;font-weight: normal;@include oneline(20px);}
				em {
					font-size: 16px; font-weight: bold; color: $red; display: block;
					span {
						float: right; display: inline-block; width: 47px; height: 16px; color: #FFF;
						line-height: 16px; text-align: center; background: #fa4b4b; border-radius: 2px;
						font-size: 12px; font-weight: lighter;
					}
				}
			}
		}
	}
}
