.product{height:800px; margin:10px 0px 200px 0px; background-color:#000;}
.product dl{ padding:0px;width:1200px; position:relative;}
.product dl dt{margin:0px;padding:0px;color:#333; text-align:center;}
.product dl dt i{ background:#07983B; height:6px; border-radius:3px; display:inline-block; width:100px;}
.product dl dt h2{font-size:48px;color:#000; margin:0px; padding:20px 0px 0px 0px;}
.product dl dt p{font-size:24px; margin:0px; padding:20px 0px;color:#777;}
.product dl dt a{color:#fff; font-size:22px; display:block;padding:0px;height:520px;}
.product dl dt.righttext{text-align:right;}
.product dl dt.lefttext{ text-align:left;}

.product dl dd{margin:0px;padding:0px; text-align:center; position:absolute;left:0px;right:0px;bottom:-450px;}
.product dl dd article{width:22%; margin:0 1%; background:#fff; display:inline-block; border-radius:5px; position:relative;box-shadow: 0px 1px 4px rgba(0,0,0,0.1)}
				
				
.product dl dd article::before,
.shadow::after {content:"";position:absolute;z-index:-1;}
.product dl dd article::before,
.product dl dd article::after {content:"";position:absolute;z-index:-1; bottom:15px;left:10px;width:50%;height:20%;}
.product dl dd article::before,
.product dl dd article::after {content:"";position:absolute;z-index:-1;bottom:15px;left:10px;width:50%; height:20%;box-shadow:0 15px 10px rgba(0, 0, 0, 0.3);transform:rotate(-3deg);}
.product dl dd article::after{right:10px;left:auto;transform:rotate(3deg);}
				
				
.product dl dd article img{ max-width:100%;border-radius:5px 5px 0px 0px;}
.product dl dd article font{ display:block; padding:10px 15px; text-align:left; font-size:14px;color:#666;height:22px;}
.product dl dd article b{ display:block; padding:0px 15px; height:50px; line-height:25px; font-size:20px; text-align:left;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
.product dl dd article strong{ display:block; padding:10px 15px 20px 15px; font-size:18px;color:#009A3D; text-align:left;}

.product dl dd article i.iconcart{ position:absolute;right:10px;bottom:10px;color:#07983B; font-size:22px; border-radius:50%; padding:8px;}
.product dl dd article i.iconcart:hover{ background:#07983B;color:#fff;}
.product article i.promotion{background:#07983B;color:#fff;font-style:normal; border-radius:5px; display:inline-block; padding:2px 5px; font-size:12px;max-width: 100px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}


.productcontent{ margin:0px auto; padding:0px;}
.productcontent article{width:23%; margin:20px 1%; background:#fff;-moz-box-shadow:0 0 12px #eee;-webkit-box-shadow:0 0 12px #eee;box-shadow:0 0 12px #eee; display:inline-block; border-radius:5px; position:relative;}
.productcontent article img{width:327px;height:327px;border-radius:5px 5px 0px 0px;}
.productcontent article font{ display:block; padding:10px 15px; text-align:left; font-size:14px;color:#666;height:22px;}
.productcontent article b{ display:block; padding:0px 15px; min-height:50px;height:50px;line-height:25px; font-size:20px; text-align:left;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
.productcontent article strong{ display:block; padding:10px 15px 20px 15px; font-size:20px;color:#009A3D; text-align:left;}
.productcontent article:hover{-moz-box-shadow:0 0 12px #ddd;-webkit-box-shadow:0 0 12px #ddd;box-shadow:0 0 12px #ddd;}

.productcontent article i.promotion{background:#07983B;color:#fff;font-style:normal; border-radius:5px; display:inline-block; padding:2px 5px; font-size:12px;}

.productcontent article i.iconcart{ position:absolute;right:10px;bottom:10px;color:#07983B; font-size:22px; border-radius:50%; padding:8px;}
.productcontent article i.iconcart:hover{ background:#07983B;color:#fff;}