body{
	background: #f8f8f8;
}
/* clearfix */
.clearfix:after{ visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}
*html .clearfix{ zoom:1;}
.protop{ background:#fff; margin-top:30px; border-radius:5px; padding:10px; display:flex;}
.banner{ display:none; }
.preview{width:450px; height:450px; margin:0px 0px 0px 0px; overflow: hidden; position: relative; margin-right:20px; }
/* smallImg */
.smallImg{position:relative; height:100%; width:60px; overflow:hidden; float:left; margin-right: 10px;}
.scrollbutton{width:14px; height:50px; overflow:hidden; position:relative; float:left; cursor:pointer; }
.scrollbutton.smallImgUp , .scrollbutton.smallImgUp.disabled{background:url(images/d_08.png) no-repeat;}
.scrollbutton.smallImgDown , .scrollbutton.smallImgDown.disabled{background:url(images/d_09.png) no-repeat; margin-left:375px; margin-top:-50px;}

#imageMenu {width:60px; overflow:hidden; margin-left:0; float:left;}
#imageMenu ul{ margin:0; padding:0; }
#imageMenu ul li{ padding:3px; border:1px solid #e2e5ec; margin-bottom: 3px;}
#imageMenu ul li img{ width:54px; height:54px;}
#imageMenu li#onlickImg, #imageMenu li:hover{ border:2px solid #01abec;}
#imageMenu li#onlickImg img, #imageMenu li:hover img{ width:50px; height:50px; border: none;}

/* bigImg */
.bigImg{position:relative; float:right; width:380px; height:450px; overflow:hidden;}
.bigImg #midimg{width:380px;}
.bigImg #winSelector{width:235px; height:210px;}
#winSelector{position:absolute; cursor:crosshair; filter:alpha(opacity=15); -moz-opacity:0.15; opacity:0.15; 
	background-color:#000; border:1px solid #fff;}
/* bigView */
#bigView{position:absolute;border: 1px solid #959595; overflow: hidden; z-index:999;}
#bigView img{position:absolute;}


.proinfo{ width:calc(100% - 470px); }
.proinfo .star{ color:#c3c3c5; font-size:13px; }
.proinfo p{ color:#c3c3c5; font-size:13px; margin-bottom:20px; margin-top:10px; }
.proinfo dl{ border-top:1px solid #e2e5ec; display:flex; padding:15px; margin:0; }
.proinfo dl dt{ width:150px; font-size:14px; font-weight:300; }
.proinfo dl dt label{ font-size:12px; color:#c3c3c5; display:block; }
.proinfo dl button{ background:#d9f3fc; border: none; height:40px; line-height:40px; font-size:14px; padding:0 20px; border-radius:5px; }
.proinfo dl dd{ margin:0; padding:0; }
.proinfo dl dd:nth-child(1){ width:150px; line-height: 40px; font-size:14px; font-weight:300; color:#c3c3c5; }
.proinfo dl dd:nth-child(2){ font-size:28px; color:#01abec; }
.proinfo dl dd:nth-child(2) span{ font-size:14px; margin-left:10px; color:#c3c3c5; }
.proinfo dl.oprice dd:nth-child(2) span:nth-child(1){ text-decoration:line-through; font-size:28px; }

.Quantity dd{ display:flex; }
.Quantity i{ background:#f2f3f8; cursor: pointer; color: #878c8b; height:30px; width:30px; display:block; line-height:30px; text-align:center; border-radius:30px; }
.Quantity input{ width: 50px; text-align: center; height: 30px; line-height: 30px; font-size: 16px; border: none;}
.btn button i{ margin-right:5px; }
.btn button:nth-child(1){ background:#d9f3fc; color:#01abec; margin-right:10px; }
.btn button.addCart{ background:#01abec; color:#fff; margin-right:10px; font-weight:bold; }
.btn button.buy a{ color:#000!important; font-weight:bold; }
.btn button.group{ background:#f00; color:#fff!important; text-align: center;}
.btn button.group a{ color: #fff!important; font-weight:bold;}
.btn button.addCart a{ color: #fff!important; font-weight:bold;}
.proinfo dl a{ color:#01abec!important; margin-top:10px; margin-right: 20px;}

.groups{ display: flex; flex-wrap: wrap; justify-content: space-between; }
.groups dd,.groups dd p{ color: #666; font-size: 16px;}
.groups dd b{ color: #f00; font-size: 18px;}
.groups dd p{ color: #c3c3c5;}
.groups .ygroup{}
.groups .ygroup li{ display: flex; margin-bottom: 20px;}
.groups .ygroup li div:nth-child(1){ display: flex; margin-right: 20px;}
.groups .ygroup li i{ width: 50px; height: 50px; border-radius: 50px; display: block; position: relative;}
.groups .ygroup li i span{ background: #f00; font-size: 12px; display: block; bottom: 0; position: absolute; text-align: center; border-radius: 3px; width: 40px; left: 5px; padding: 1px 0px; color: #fff; }
.groups .ygroup li img{ width: 50px; height: 50px; border-radius: 50px;}
.groups .ygroup li p{ line-height: 25px; margin: 0;}
.groups .join{ background:#f00; height: 35px; line-height: 35px; color:#fff!important; text-align: center; border: none; padding: 0 10px; border-radius: 5px; margin-left: 20px; margin-top: 7px;}
.groups .join a{ color: #fff!important;}

.proDescription{ display:flex; margin-top:20px; }
.proDescription .sell{
	width: 330px;
	margin-right: 20px;
	border-radius: 5px;
	overflow: hidden;
	background: #fff;
}
.sell h3{background: #01abec; height: 50px; line-height: 50px; font-size: 18px; color: #fff; padding: 0 20px}
.sell ul{padding: 20px;}
.sell ul li{ border-bottom: 1px solid #f2f3f8; padding-bottom: 10px;}
.sell ul li:last-child{ border-bottom:none; }
.sell ul li a{ display:flex; flex-wrap:wrap; }
.sell ul li a dd{ width: 40%; margin-right: 5%;}
.sell ul li a dd img{ width:100%; transition: all 0.5s;}
.sell ul li a dd:hover img{ width:100%; transform: scale(1.05);}
.sell ul li a dt{ width:55%;}
.star{ color: #c3c3c5; margin-top: 10px;}
.sell ul li a dt h4{ font-size:16px; font-weight: 100; color: #000; line-height: 28px; text-overflow:-o-ellipsis-lastline; 
	overflow:hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical}
.sell ul li a dt h3{ padding:0; background: none; color: #01abec;}



.proDescription .description{
	width: calc(100% - 350px);
}
.proDescription .description .descriptionTab{
	background: #fff; border-radius: 5px;
}
.proDescription .description .descriptionTab .layui-tab{
	margin: 0;
}
.layui-tab-title{
	 font-size: 16px; font-weight: bold;
}
.layui-tab-content .layui-tab-item{ padding:10px 15px; }
.layui-tab-content .layui-tab-item img{max-width: 100%;}


.layui-this{ border:none; border-bottom:2px solid #01abec; }
.layui-tab-title .layui-this:after {
    display: none;
}

.swiper-button-next{ background: #fff; text-align: center; width: 40px!important; height: 40px!important; border-radius: 30px; box-shadow: 0px 0px 5px #dadadc;}
.swiper-button-prev{ background: #fff; text-align: center; width: 40px!important; height: 40px!important; border-radius: 30px; box-shadow: 0px 0px 5px #dadadc;}
.swiper-button-next:after{ content: ''!important;}
.swiper-button-prev:after{ content: ''!important;}

.productList{ background: #fff; border-radius: 5px;  width: 100%; margin-top: 20px; padding: 0 0px 20PX 0PX; position: relative;}
.productList .title{ font-size: 16px; font-weight: bold; height: 50px; line-height: 50px; overflow: hidden; border-bottom: 1px solid #e2e5ec; }
.productList .title span{height: 49px; display: block; float: left; padding-left: 15PX;}
.productList .title a.more{ float: right; background: #01abec; display: block; width: 100px; height: 35px; line-height: 35px; 
text-align: center; color: #fff; font-size: 14px; margin-top: 7px; border-radius: 3px; font-weight: 500;}
.productList .pros{ overflow: hidden; margin: 20px 0px; padding: 0px 20px; width: 100%;}
.productList .pros .swiper-wrapper{ height: auto;}
.productList .pros .swiper-slide {
	text-align: center;
	border: 2px solid #f2f3f8;
	border-radius: 5px;
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	
}
.productList .pros .swiper-slide:hover{ border: 2px solid #01abec;}
.productList .pros .swiper-button-next{ right: 3px;}
.productList .pros .swiper-button-prev{ left: 3px;}
.productList .pros .swiper-slide dd{ height: 220px; position: relative; text-align: center; justify-content: space-around; display: flex; flex-direction: column; align-items: center; overflow: hidden;}
.productList .pros .swiper-slide dd img{ width: 100%; transition: all 0.5s;}
.productList .pros .swiper-slide dd:hover img{ transform: scale(1.1);}
.productList .pros .swiper-slide dd span{ display: block; 
width: 50px; height: 50px; line-height: 50px; border-radius: 50px; font-size: 14px; background: #007bff; color: #fff; padding: 0; margin: 0; position: absolute; left: 10px; top: 10px;}
.productList .pros .swiper-slide dt{ padding: 10px;}
.productList .pros .swiper-slide h3{ color: #007bff; font-size: 16px; font-weight: 700 !important; text-align: left;}
.productList .pros .swiper-slide .star{ text-align: left;}
.productList .pros .swiper-slide .star i{color: #c3c3c5;}
.productList .pros .swiper-slide h4{ 
	font-size: 14px; margin-top: 5px; text-align: left; line-height: 25px;
	text-overflow:-o-ellipsis-lastline; overflow:hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical}

.notPro{ text-align:center; margin:50px; }
.notPro img{ margin-bottom:50px; }
@media only screen and (max-width: 1400px){
.productList .pros .swiper-slide dd {
    height: 150px;
}



@media (max-width: 767px) {
	.protop{ display:block; }
	.proimage{ display:none; }
	.banner{ display:block; height:280px; width: 100%; overflow:hidden; margin-bottom:20px; }
	.banner .swiper-slide{ height:280px; text-align:center; }
	.banner img{ width:auto; height:100%; }

	.proinfo{ width:calc(100%); }
	.proinfo .star{ color:#c3c3c5; font-size:13px; }
	.proinfo p{ color:#c3c3c5; font-size:13px; margin-bottom:20px; margin-top:10px; }
	.proinfo dl{ border-top:1px solid #e2e5ec; display:flex; flex-wrap: wrap; padding:10px 0px; margin:0; }
	.proinfo dl dt{ width:150px; font-size:14px; font-weight:300; }
	.proinfo dl dt label{ font-size:12px; color:#c3c3c5; display:block; }
	.proinfo dl>button{ background:#d9f3fc; border: none; height:40px; line-height:40px; font-size:14px; padding:0 10px; border-radius:5px; width:calc(100% - 160px); }
	.proinfo dl dd{ margin:0; padding:0; }
	.proinfo dl dd:nth-child(1){ width:150px; line-height: 40px; font-size:14px; font-weight:300; color:#c3c3c5; }
	.proinfo dl dd:nth-child(2){ font-size:28px; color:#01abec; }
	.proinfo dl dd:nth-child(2) span{ font-size:14px; margin-left:10px; color:#c3c3c5; }
	.proinfo dl.oprice dd:nth-child(2) span:nth-child(1){ text-decoration:line-through; font-size:28px; }

	.Quantity dd{ display:flex; }
	.Quantity i{ background:#f2f3f8; cursor: pointer; color: #878c8b; height:30px; width:30px; display:block; line-height:30px; text-align:center; border-radius:30px; }
	.Quantity input{ width: 50px; text-align: center; height: 30px; line-height: 30px; font-size: 16px; border: none;}
	.btn button i{ margin-right:5px; }
	.btn button:nth-child(1){ background:#d9f3fc; color:#01abec; margin-right:10px; }
	.btn button.addCart{ background:#01abec; color:#fff; margin-right:2%; font-weight:bold; width:49%; }
	.btn button.buy{ width:49%; }
	.btn button.buy a{ color:#000!important; font-weight:bold; }
	.btn button.group{ background:#f00; color:#fff!important; text-align: center;}
	.btn button.group a{ color: #fff!important; font-weight:bold;}
	.btn button.addCart a{ color: #fff!important; font-weight:bold;}
	.proinfo dl a{ color:#01abec!important; margin-top:10px; margin-right: 20px;}

	.groups{ display: flex; flex-wrap: wrap; justify-content: space-between; }
	.groups dd,.groups dd p{ color: #666; font-size: 16px;}
	.groups dd b{ color: #f00; font-size: 18px;}
	.groups dd p{ color: #c3c3c5;}
	.groups .ygroup{}
	.groups .ygroup li{ display: flex; margin-bottom: 20px;}
	.groups .ygroup li div:nth-child(1){ display: flex; margin-right: 20px;}
	.groups .ygroup li i{ width: 50px; height: 50px; border-radius: 50px; display: block; position: relative;}
	.groups .ygroup li i span{ background: #f00; font-size: 12px; display: block; bottom: 0; position: absolute; text-align: center; border-radius: 3px; width: 40px; left: 5px; padding: 1px 0px; color: #fff; }
	.groups .ygroup li img{ width: 50px; height: 50px; border-radius: 50px;}
	.groups .ygroup li p{ line-height: 25px; margin: 0;}
	.groups .join{ background:#f00; height: 35px; line-height: 35px; color:#fff!important; text-align: center; border: none; padding: 0 10px; border-radius: 5px; margin-left: 20px; margin-top: 7px;}
	.groups .join a{ color: #fff!important;}

	.proDescription{ display:flex; margin-top:20px; }
	.proDescription .sell{
		width: 100%;
		margin-right: 20px;
		border-radius: 5px;
		overflow: hidden;
		background: #fff;
		display: none;
	}

	.proDescription .description{
		width: calc(100%);
	}

	.productList{ background: #fff; border-radius: 5px;  width: 100%; margin-top: 20px; display: none; padding: 0 0px 20PX 0PX; position: relative;}
	
}