
.bar_groupon {

	li {
		padding:14px;
		a {display: block;position: relative;text-decoration: none;}
		img {display: block;width: 200px;height: 200px;margin-bottom: 10px;}
		strong {
			display: block;position: absolute;top: 176px;left: 0;right: 0;
			background:rgba($c00,.5);text-align: center;color: $cff;
			@include oneline(24px);
		}
		del {text-decoration: line-through;color: $c99;}
		em {display: block;color: $red;font-size: 16px;margin-top: 10px;}
		span {float: right;color: $green;}
	}
}


.bar_tip {
	padding: 10px;counter-reset: num;
	li {
		line-height: 1.6;
		&:before {
			content: counter(num) ". ";counter-increment: num;color: $c99;
		}
	}
}


.groupon {
	.bar {float: right;}
	.main {float: left;}
	.groupon_item {
		border: 1px solid $cdd;margin-bottom: 20px;@extend .cf;
		.groupon_header {
			border-bottom: 1px solid $cdd;height: 60px;line-height: 60px;
			i {display: block;width: 70px;float: left;background:darken($red,10%);color: $cff;text-align: center;font-size: 24px;box-shadow: 0 0 0 1px darken($red,10%);}
			strong {display: block;float: left;font-size: 18px;color: $red;padding: 0 20px;}
			h2 {float: left;font-size: 24px;}
		}
		.groupon_info {
			float: left;width: 300px;padding: 20px;
			.price {
				height: 65px;background:$red;
				border-radius: 10px;position: relative;
				@include jb(lighten($red,10%),darken($red,10%));
				box-shadow: 0 0 0 1px darken($red,10%) inset,0 0 0 2px rgba($cff,.8) inset,-2px -2px 20px rgba($c00,.3) inset;
				a {
					padding:0 20px;font-size: 20px;color: $cff;display: block;background:$yellow;position: absolute;
					top: 12px;right: 10px;border-radius: 20px;height: 40px;line-height: 40px;
					@include jb(lighten($yellow,10%),darken($yellow,10%));
					box-shadow: 0 0 0 1px darken($yellow,20%) inset,0 0 0 2px rgba($cff,.8) inset,0 0 0 1px rgba($cff,.5);
					text-shadow: 1px 1px 0 $red;text-decoration: none;
					&:hover {
						@include jb(lighten($blue,10%),darken($blue,10%));
						box-shadow: 0 0 0 1px darken($blue,20%) inset,0 0 0 2px rgba($cff,.8) inset,0 0 0 1px rgba($cff,.5);
					}
				}
				em {
					position: absolute;left: 10px;bottom: 10px;font-size: 26px;color: $cff;
				}
				&:before {
					content: "团购价：";display: block;position: absolute;left: 15px;top: 10px;font-size: 14px;color: $cff;
				}
			}
			.detali {
				padding: 15px;margin-top: 10px;border-radius: 10px;
				background:lighten($yellow,20%);
				@include jb(lighten($yellow,25%),lighten($yellow,15%));
				box-shadow: 0 0 0 1px rgba($c00,.1) inset,0 0 0 2px rgba($cff,1) inset;
				.compare {
					@extend .cf;width: 290px;
					dl {
						margin-right:10px;padding: 10px 0;border-radius: 5px;
						width: 83.33px;float: left;text-align: center;
						background: rgba($cff,.7);color: darken($yellow,30%);
						dt {font-size: 14px;font-weight: bold;margin-bottom: 5px;color: $c22;}
					}
				}
				.time {
					margin-top: 20px;padding-bottom: 10px;border-bottom:1px dashed $cff;
					strong {display: block;margin: 10px 0;}
					time {display: inline-block;font-size: 32px; color: $c00;}
					span {display: inline-block;padding: 0 5px;}
				}
				.volume {
					padding: 10px 0;
					span {font-size: 18px;color: $red;}
				}
				.only {margin-bottom: 10px;}
			}
		}
		.goods {
			float: right;position: relative;
			width: 480px;margin: 20px;
			&:hover {
				strong ,a {display: block;}
			}
			strong {
				display:none;position: absolute;left: 0;top: 0;right: 0;padding:15px 20px;color: $cff;font-size: 15px;
				background: rgba($c00,.5);line-height: 2;
			}
			a {
				position: absolute;left: 0;bottom: 0;right: 0;text-align: center;line-height: 3;color: $cff;text-decoration: none;font-size: 18px;
				background: rgba($red,.5);display: none;
			}
		}
	}
}

.groupon_list {
	width: 916px;
	ul {
		@extend .cf;
		li {
			width: 229px;float: left;
			@extend .cf;
			a {
				display: block;text-decoration: none;position: relative;padding: 10px;
				@include dz();top: 0;
				&:hover {
					background: $cff;
					top: -5px;box-shadow: 3px 5px 15px rgba($c99,.5);
				}
			}
			img {display: block;width: 209px;height: 209px;margin-bottom: 5px;}
			strong {
				display: block;position: absolute;top: 195px;left: 10px;right: 10px;
				background:rgba($c00,.5);text-align: center;color: $cff;
				@include oneline(24px);
			}
			del {text-decoration: line-through;color: $c99;}
			em {display: block;color: $red;font-size: 16px;margin-top: 10px;}
			span {float: right;color: $green;}
		}
	}
}
