body{
	background: rgba(242, 242, 242, 1.0);
}
/* clearfix */
.clearfix:after{ visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}
*html .clearfix{ zoom:1;}


.protop{ background:#fff; border-radius:5px; padding:20px 10px; display:flex; flex-wrap: wrap; justify-content: space-between; transition: width 1s;}

.proimage{ width: 300px;}
#magnifier {position: relative;width: 300px;}
.small-box {position: relative;width: 300px;height: 300px;}
.small-box img {display: block;}
.small-box .hover {
display: none;
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
border: 1px solid #aaa;
background: #0099ff;
opacity: .5;
filter: alpha(opacity: 50);
cursor: move;
}
.thumbnail-box {position: relative;width: 100%;}
.thumbnail-box .btn {position: absolute;top: 50%;width: 22px;height: 32px;margin-top: -16px;}
.thumbnail-box .btn-prev {left: 0;background: url(images/btn_prev.png) no-repeat;}
.thumbnail-box .btn-next {right: 0;background: url(images/btn_next.png) no-repeat;}
.thumbnail-box .list {overflow: hidden;margin: 0 auto;}
.thumbnail-box .wrapper {width: 100000px; display: flex;}
.thumbnail-box .list .item {width: 60px;height: 60px;border: 1px solid #e2e5ec;margin-bottom: 5px;padding: 4px;}
.thumbnail-box .list .item-cur {border: 2px solid #e53e41; padding: 3px;}
.thumbnail-box .list .item img {width: 50px;height: 50px;}
.big-box {display: none;overflow: hidden;position: absolute; left: 300px; top: 0; width: 360px;height: 360px;border: 1px solid #e4e4e4; z-index: 999;}
.big-box img {display: block;}

.proinfo{ width:calc(100% - 340px); }
.proinfo h4{ font-size: 24px; font-weight: 600; margin-bottom: 20px; line-height: 28px;}
.proinfo h4 span{ background:#e53e41; color: #fff; font-size: 12px; padding: 3px 5px; border-radius: 3px; font-weight: 500; letter-spacing: 2px; margin-right: 5px;}

.proinfo .star{ color:#c3c3c5; font-size:13px; }
.proinfo p{ color:#c3c3c5; font-size:13px; margin-bottom:20px; margin-top:10px; padding-left: 15px; }

.proinfo dl{display:flex; padding:10px 15px 0px 15px; margin:0; }
.proinfo dl dt{ width:150px; font-size:14px; font-weight:300; }
.proinfo dl dt label{ font-size:12px; color:#000; 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 label:nth-child(1){ width:100px; line-height: 40px; display: block; font-size:14px; color:#000; }
.proinfo dl dd:nth-child(2){ font-size:28px; color:#f03b28; }
.proinfo dl dd:nth-child(2) span{ font-size:14px; margin-left:10px; color:#c3c3c5; }
/*.Quantity dd{ display:flex; align-items:center; }
.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;}
*/
.Quantity dd{ display:flex; align-items:center; }
.Quantity i:nth-child(1){ background:#eee; cursor: pointer; color: #878c8b; height:30px; width:30px; display:block; line-height:30px; text-align:center; border-radius:5px 0px 0px 5px; }
.Quantity i:nth-child(3){ background:#eee; cursor: pointer; color: #878c8b; height:30px; width:30px; display:block; line-height:30px; text-align:center; border-radius:0px 5px 5px 0px; }
.Quantity input{ width: 50px; text-align: center; height: 30px; line-height: 30px; font-size: 16px; border: 1px solid #eee;}


.proinfo dl.price{ background: #f8f8f8; padding-bottom: 10px;}
.proinfo dl.coupons{ background: #f8f8f8;}
.proinfo dl.coupons dd:nth-child(2){ display:flex; flex-wrap:  wrap; align-items:center; }
.proinfo dl.coupons dd:nth-child(2) span{ border-top: 1px #f03b28 solid; border-bottom: 1px #f03b28 solid; font-size: 12px; color: #333; position: relative; display: flex; border-radius: 5px; line-height: 25px; margin-bottom: 5px;}
.proinfo dl.coupons dd:nth-child(2) span font{ padding: 0 10px;}
.proinfo dl.coupons dd:nth-child(2) span::after{content: ''; background: url(../icon/cour.png); background-size: 100% 100%; width: 3px; height: 25px; left: 0; top:0; display: block;}
.proinfo dl.coupons dd:nth-child(2) span::before{content: ''; background: url(../icon/coul.png); background-size: 100% 100%; width: 3px; height: 25px; left: 0; top:0; display: block;}
.proinfo dl.coupons dd:nth-child(2) span b{ font-weight: 500; margin-left: 10px; cursor: pointer; color: #f03b28;}
.proinfo .proSku{ display:flex; flex-wrap:wrap; padding:10px 15px 0px 15px; }
.proinfo .proSku .sku{ margin:0px 0px 10px 0px; padding:0 10px 0px 0px;}
.proinfo .proSku label{ line-height:50px; width:100px; color:#000; font-size:14px; }
.proinfo .proSku>div{ display:flex; flex-wrap:wrap; width:calc(100% - 100px); padding-top:10px; }
.proinfo .proSku dd{ line-height:50px; color:#666; }
.proinfo .proSku dl dd{ width:auto; line-height:30px; margin-right:10px; }
.proinfo .skulist select{ height:30px; line-height:30px; color: #999; min-width: 110px; margin:0px 0px 0px 0px; border-radius:5px; border-color:#ddd; }
.proinfo .skulist select option{ color:#000; }
.proinfo .skulist ul{ display: flex; flex-wrap: wrap; padding: 10px;}
.proinfo .skulist ul li{ display: flex; line-height: 20px; border: 1px #c3c3c5 solid; border-radius: 5px; padding: 3px 10px 3px 10px; margin-right: 10px; text-align: center; margin-bottom: 10px; cursor: pointer;}
.proinfo .skulist ul li img{ width: 20px; height: 20px; margin-right: 3px;}
.proinfo .skulist ul li.active{border: 1px #f03b28 solid; background: url('../icon/active1.png') right bottom no-repeat; background-size: 25px 25px;}

.btn { display:flex; justify-content:right; }
.btn button{ margin-left:20px; }
.btn button i{ margin-right:5px; }
/* .btn button:nth-child(1){ background:#d9f3fc; color:#17528e; margin-right:10px; }
.btn button:nth-child(2){ background:#17528e; color:#fff; margin-right:10px; } */
.btn button.buy{ background:#17528e; color:#fff;}
.btn button.addCar{ background:#ffce24; color:#000;}
.btn button.buy a{ color:#fff!important; display: block; padding: 0!important; margin: 0!important;}
.btn button.group{ background:#f00; color:#fff!important; text-align: center;}
.btn button.group a{ color: #fff!important;}
.proinfo dl a{ color:#17528e!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; align-items: flex-start; margin-top:20px; }
.proDescription .sell{
	width: 330px;
	margin-right: 20px;	
	display: none;
}
.shopinfo{background: #fff; border-radius: 5px; overflow: hidden; padding-bottom: 0px;}
.shopinfo h3{background: #17528e; height: 50px; line-height: 50px; font-size: 16px; color: #fff; padding: 0 20px; font-weight: 500;}
.shopinfo dd{ padding: 20px; display: flex; justify-content: space-between;}
.shopinfo dd button{ border: none; height: 40px; width: 48%;line-height: 40px; border-radius: 3px;}
.shopinfo dd button i{ color: #17528e; margin-right: 5px;}
.shopinfo dl{ font-size: 12px; padding: 0 20px; margin-top: 10px;}
.shopinfo dl label{ margin-right: 20px; color: #333;}
.shopinfo dl.g{ color: yellowgreen;}
.shopinfo dl.o{ color: orange;}
.shopinfo dl.r{ color: red;}

.shop{background: #fff; border-radius: 5px; overflow: hidden;}
.shop h3{background: #17528e; height: 50px; line-height: 50px; font-size: 16px; color: #fff; padding: 0 20px; font-weight: 500;}
.shop ul{padding: 20px;}
.shop ul li{ border-bottom: 1px solid #f2f3f8; padding-bottom: 10px;}
.shop ul li:last-child{ border-bottom:none; }
.shop ul li a{ display:flex; flex-wrap:wrap; }
.shop ul li a dd{ width: 40%; margin-right: 5%;}
.shop ul li a dd img{ width:100%; transition: all 0.5s;}
.shop ul li a dd:hover img{ width:100%; transform: scale(1.05);}
.shop ul li a dt{ width:55%;}
.star{ color: #c3c3c5; margin-top: 10px;}
.shop 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}
.shop ul li a dt h3{ padding:0; background: none; color: #17528e;}


.proDescription{transition: width 1s;}
.proDescription .description{
	width: calc(100%);
}
.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-this{ border:none; border-bottom:2px solid #17528e; }
.layui-tab-title .layui-this:after {
    display: none;
}
.layui-tab-content .proInfos{ text-align:center; }
/*.layui-tab-content img{ width:100%!important; }*/


.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; margin-bottom: 20px;}
.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: #17528e; 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 #17528e;}
.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: #17528e; 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: #17528e; 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}



.dec{max-width: 100%!important; height:100vh; transition: all 0.5s; position: fixed; z-index: 9999; background: rgba(242, 242, 242, 1.0); bottom: 0; display: flex; flex-wrap: wrap; justify-content: space-between;}
.dec .position{ display:none; }
.dec .protop{
	width:39%; 
	display: block;    
	transition: all 0.5s;
    margin-bottom: 0;
    overflow: auto;
    scrollbar-color: #c1c1c1 #f1f1f1;
    scrollbar-width: thin;
    border-radius: 0;
}
.dec .proinfo{width:100%; margin-top: 50px;}
.dec .proDescription{ width:60%; transition: all 0.5s; background: #fff; margin-top: 0; padding: 20px;}
.dec .proDescription img{ width:100%; }
.dec .proDescription .proInfos{ overflow-y: auto; height: calc(100vh - 100px);}