/*
 * 购买页首页样式
 */
@CHARSET "UTF-8";

/*产品列表*/
.products{
	text-align: center;
	background-color: #F4F4F4;
	overflow: hidden;
}
.products .content{
	margin-top: 20px;
	margin-bottom: 20px;
}
.single-product{
	float: left;
	width: 335px;
	margin-left: 52px;
	position: relative;
	background-color: white;
	box-shadow: 0 0 9px #AAAAAA;
}
.single-product:first-child{
	margin-left: 0;
}
.single-product .product-title{
	height: 78px;
	padding-top: 25px;
	font-size: 20px;
	color: #777777;
}
.single-product .product-title-inner{
	width: 290px;
	height: 100%;
	margin: 0 auto;
	border-bottom: 1px solid #DCDCDC;
}
.single-product .product-price{
	height: 90px;
	margin: 20px 0 0 0;
}
.single-product .product-price-month{
	font-size: 26px;
	color: #EB6100;
}
.single-product .product-price-sum{
	font-size: 14px;
	color: #828282;
}
.single-product .product-extra-info .important-info{
	font-size: 20px;
	color: red;
	font-weight: bold;
}
.single-product .product-extra-info span.click-new-page{
	color: blue;
	cursor: pointer;
	text-decoration: underline;
}
.single-product .pay-button{
	height: 50px;
	width: 220px;
	margin: 10px auto 30px auto;
	padding-top: 12px;
	border: 1px solid #B5ACA3;
}
.single-product .pay-button a{
	color: #B5ACA3;
	font-size: 18px;
}
.single-product.important-product .product-title{
	padding-top: 20px;
	color: #FBF1A5;
	font-size: 24px;
	background-color: #E93424;
}
.single-product.important-product .product-title-inner{
	border-bottom: none;
}
.single-product.important-product .pay-button{
	background-color: #E93424;
}
.single-product.important-product .pay-button a{
	color: white;
}
.single-product .edge{
   	position: absolute;
   	right: 0;
   	top: 0;
}
.single-product .edge p{
	text-align: center;
	width: 100%;
	color: #EF2B19;
	font-size: 15px;
	font-weight: bold;
	margin-top: 16px;
	margin-left: 8px;
	transform: rotate(45deg);
	-ms-transform: rotate(45deg); 	/* IE 9 */
	-moz-transform: rotate(45deg); 	/* Firefox */
	-webkit-transform: rotate(45deg);/* Safari 和 Chrome */
	-o-transform: rotate(45deg); 	/* Opera */
	/* IE8 */
	margin-top: -2px \9;
	margin-left: 16px \9;
	font-size: 13px \9;
	font-weight: 100 \9;
	letter-spacing: 2px \9;
	color: blue \9;
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.707,M12=-0.707,M21=0.707,M22=0.707,sizingMethod="auto expand") \9;
}


/*VIP功能介绍*/
.vip-functions .vip-functions-title{
	width: 100%;
	height: 20px;
	margin-top: 20px;
	font-size: 16px;
	font-weight: bold;
	color: #4C4C4C;
	position: relative;
}
.vip-functions .vip-functions-title >div{
	position: absolute;
}
.vip-functions .vip-functions-title .left{
	left: 0;
}
.vip-functions .vip-functions-title .right{
	right: 0;
}
.vip-functions .vip-functions-title .right a{
	font-size: 14px;
	color: #1F99F3;
}
.vip-functions .vip-functions-content{
	margin-top: 0;
	margin-bottom: 80px;
}
.single-vip-function{
	position: relative;
	float: left;
	width: 158px;
	height: 120px;
	text-align: center;
	font-size: 14px;
	color: #0E0517;
	margin-top: 20px;
}
.single-vip-function .single-vip-function-inner{
	position: relative;
	top: 25px;
	width: 156px;
	margin: 0 0 0 0;
}
.single-vip-function .single-vip-function-image-container{
	border: solid 1px #DDDDDD;
	border-radius: 8px;
	position: relative;
	width: 90px;
	height: 90px;
	margin-left: 30px;
}
.single-vip-function .single-vip-function-image-container:hover{
	border: solid 1px #C29E41;
}
.single-vip-function .single-vip-function-edge{
	position: absolute;
	top: 0;
	left: 0;
	width: 48px;
	height: 48px;
	background: url(//yuntu-f.kuaicad.com/cad/web/images/payment/payment_vip_function_edge20230220.png) no-repeat;
}
.single-vip-function .single-vip-function-image{
	margin: 15px auto 0 auto;
}
.single-vip-function .single-vip-function-title{
	margin-top: 10px;
}
.single-vip-function .popover{
	position: absolute;
	top: 115px;
	left: -25px;
	width: 202px;
}
.single-vip-function .popover .title{
	font-size:16px;
	font-weight:bold;
}


/*优惠券*/
.get-coupon{
	position: fixed;
	left: 50%;
	top: -200px;
	margin-left: -250px;
	width: 500px;
	border: 4px solid #E93524;
	border-radius: 8px;
	cursor: pointer;
	background-color: white;
	text-align: center;
}
.get-coupon .coupon-money{
	border-top: solid 3px #E93524;
	font-size: 16px;
	color: #F10214;
}
.get-coupon .coupon-money .amount{
	font-size: 34px;
}
.get-coupon .coupon-notes{
	padding: 0 5px;
	font-size: 16px;
	font-weight:bold; 
	color: #E93524;
}
.get-coupon .coupon-condition{
	margin: 0;
	padding: 15px 5px;
	background-color: #E7E7E7;
}
.get-coupon .coupon-collect{
	margin: 0;
	padding: 10px;
	color: white;
	background-color: #E93524;
}
.get-coupon-close{
	position: fixed;
	left: 50%;
	top: -200px;
	margin-left: 245px; 
	cursor: pointer;
}
.coupon-modal{
	top: 200px;
}
.coupon-modal .modal-header{
	background-color: #E93524;
	color: white;
}
.coupon-modal .modal-body{
	padding-bottom: 5px;
}
.coupon-modal .modal-footer{
	text-align: center;
}
.coupon-modal .modal-footer .use-coupon{
	background-color: #E93524;
	color: white;
}
.coupon-modal .coupon-money{
	font-size: 16px;
}
.coupon-modal .coupon-money .amount{
	font-size: 18px;
	font-weight: bold;
	color:red;
}
.coupon-modal .coupon-expire{
	font-size: 16px;
}
.coupon-modal .coupon-expire-hint{
	color: red;
	font-weight: bold;
}


/*背景图片*/
.vip-functions .vip-functions-title .position-left.background-mixed{
	width: 84px;
	height: 16px;
	background-position: -813px -70px;
}
.vip-functions .vip-functions-title .position-right.background-mixed{
	width: 84px;
	height: 16px;
	background-position: -907px -70px;
}
.products .edge.background-mixed{
	width: 66px;
	height: 67px;
	background-position: -1001px -70px;
}
.get-coupon-close.background-mixed{
	width: 32px;
	height: 32px;
	background-position: -1117px -70px;
}
.single-vip-function .background-mixed{
	width: 60px;
	height: 60px;
}

/* 移动端适配 */
@media screen and (max-width: 700px){
	/* 产品 */
	.products .content{
		margin: 20px 2%;
	}
	.single-product{
		width: 48%;
		margin-left: 4%;
		box-shadow: none;
	}
	.single-product .product-title{
		height: 40px;
		padding-top: 10px;
		font-size: 14px;
	}
	.single-product .product-title-inner{
		width: 90%;
	}
	.single-product .product-price{
		height: 60px;
		margin-top: 10px;
	}
	.single-product .product-price-month{
		font-size: 16px;
	}
	.single-product .product-price-sum{
		font-size: 12px;
	}
	.single-product .pay-button{
		height: 30px;
		width: 60%;
		margin: 10px auto;
		padding-top: 4px;
	}
	.single-product .pay-button a{
		font-size: 14px;
	}
	.single-product .edge{
		display: none;
	}
	.products .product-title.background-mixed{
		background: #EB6100;
		width: initial !important;
		height: 40px;
	}
	.single-product.important-product{
		margin-left: 0;
		margin-top: 15px;
		border: solid 1px #EB6100;
	}
	.single-product.important-product .product-title{
		padding-top: 10px;
		font-size: 14px;
	}
	.single-product .product-extra-info{
		padding: 0 5px;
		font-size: 12px;
	}
	.single-product .product-extra-info .important-info{
		font-size: 18px;
	}
	/* VIP功能介绍 */
	.vip-functions .vip-functions-title{
		width: 100%;
		height: 20px;
		margin-top: 30px;
		font-size: 18px;
	}
	.vip-functions .vip-functions-title .left{
		width: 100%;
		margin: 0;
		text-align: center;
	}
	.vip-functions .vip-functions-content{
		margin: 0 2% 0 2%;
	}
	.single-vip-function{
		width: 50%;
		height: 120px;
		font-size: 14px;
	}
	.single-vip-function .single-vip-function-inner{
		width: 100%;
		margin: 0;
	}
	.single-vip-function .single-vip-function-image-container{
		margin-left: 45px;
	}
	.single-vip-function .single-vip-function-image{
		margin-top: 15px;
	}
	.single-vip-function .single-vip-function-title{
		margin-top: 10px;
	}
	/* 优惠券相关 */
	.get-coupon{
		left: 8%;
		margin-left: 0;
		width: 84%;
	}
	.get-coupon-close{
		left: 91%;
		margin-left: 0; 
	}
	.get-coupon .coupon-money{
		font-size: 14px;
	}
	.get-coupon .coupon-money .amount{
		font-size: 26px;
	}
	.get-coupon .coupon-notes{
		font-size: 14px;
	}
	.get-coupon .coupon-condition{
		margin: 0;
		padding: 15px 5px;
		background-color: #E7E7E7;
	}
	.get-coupon .coupon-collect{
		margin: 0;
		padding: 10px;
		color: white;
		background-color: #E93524;
	}
	.coupon-modal .modal-title{
		font-size: 16px;
	}
	.coupon-modal .coupon-money{
		font-size: 14px;
	}
	.coupon-modal .coupon-money .amount{
		font-size: 16px;
	}
	.coupon-modal .coupon-expire{
		font-size: 14px;
	}
}