@charset "utf-8";


.content{
   margin-top: 140px;
}

.title{ padding: 0; width: 100%; overflow: hidden; border-bottom: 1px solid #f1f1f1;}
.title .left-box{ display: block; padding-top: 10px; color: #888;}
.title a{display: inline-block; color: #666; margin-bottom: 10px; font-size: 12px;}
.title a img{width: 40px; display: inline-block; vertical-align: middle; margin-right: .05rem;}
.title a span{display: inline-block; vertical-align: middle;}
.title a:hover{color: #D3B264;}
.title a.on{color: #D3B264;}


.main .product{ display: flex; padding-bottom: 40px; margin: 0 auto;}
.main .proinfo{overflow: hidden; padding-top: 40px; position: relative;}
.main .proinfo .pro-box{display: inline-block; vertical-align: middle; width: 12.8rem; height: 11.5rem; overflow: hidden; position: relative;}
.main .proinfo .pro-box .swiper-slide{background-color: #F4F7F9;}
.main .proinfo  .swiper-button-prev, .main .proinfo .swiper-button-next{margin-top: -50px;}
.main .proinfo  .swiper-button-prev{left: 0;}
.main .proinfo  .swiper-button-next{right: 0;}

.main .proinfo  .swiper-button-prev:after{font-size: 32px; padding: 15px 10px; color: #000; opacity: 0.7;}
.main .proinfo .swiper-button-next:after, 
.main .proinfo .swiper-container-rtl .swiper-button-prev:after{font-size: 32px; padding: 15px 10px; color: #000; opacity: 0.7;}

.main .proinfo .swiper-pagination-bullets{display: none;}
	.thumbnail {width: 1rem; height: 11rem; float: left;overflow: hidden;box-sizing: border-box;}
	.thumbnail .swiper-slide {width: .9rem !important;height: .8rem !important;border: 1px solid #f1f1f1;	box-sizing: border-box;	}
	.thumbnail .swiper-slide-thumb-active{border: 1px solid #D3B264;}
	.thumbnail .swiper-slide img {width: 100% !important;height: 100% !important;display: block;object-fit: cover;}
	.pic-box{position: relative; width: 11rem; float: left;}
	.pic-box img{width: 11rem;}


.main .product .shop-info{flex: 1; margin-top: 40px;}
.main .product .shop-info h2{font-size: 12px; font-weight: normal; color: #888; padding-bottom: 10px; }
.main .product .shop-info h1{font-size: 32px; line-height: 1.1em; color: #D3B264; padding-bottom: 10px; }
.main .product .shop-info>span{ display: block; margin: 10px 0 30px; color: #888;}
.main .product .shop-info h3{font-size: 13px; color: #333; padding-bottom: 20px; }
.main .product .shop-info h4{font-size: 12px; color: #888; padding-bottom: 20px; font-weight: normal; }

.main .product .shop-info .specs{color: #333; margin-top: .3rem; padding: .3rem; line-height: 1.6em; background-color: #f1f1f1; border-radius: 5px;}
.main .product .shop-info .specs .list-box{display: flex; flex-wrap: wrap;}
.main .product .shop-info .specs .list-box .list{margin: 0 6px 6px 0;  border: 2px solid #f1f1f1;}
.main .product .shop-info .specs .list-box .list.on{border: 2px solid #D3B264;}
.main .product .shop-info .specs .list-box .list img{display: block; width: 30px; height: 30px; object-fit: cover;}

.main .product .shop-info .choice{color: #333; margin-top: .3rem; padding: .3rem; line-height: 1.6em; background-color: #f1f1f1; border-radius: 5px;}
.main .product .shop-info .choice .list-box{display: flex; margin: -6px;}
.main .product .shop-info .choice .list-box .list{padding: 8px; width: 50%; margin: 6px; text-align: center; border: 2px solid #ccc; color: #000; border-radius: 3px; }
.main .product .shop-info .choice .list-box .list.on{border: 2px solid #D3B264; background-color: #fff;}
.main .product .shop-info .choice .logo-print{padding: 10px 0;}
.main .product .shop-info .choice .checkbox{display: flex; align-items: center; line-height: 1em;}
.main .product .shop-info .choice .img-box{display: flex; margin: -6px;}
.main .product .shop-info .choice .img-box .list{padding: 8px 8px 12px; width: 50%; margin: 6px; text-align: center; border: 2px solid #ccc; color: #000; border-radius: 3px; }
.main .product .shop-info .choice .img-box .list .pic{display: flex; justify-content: center;}
.main .product .shop-info .choice .img-box .list .pic img{display: block; width: 50px; height: 50px; margin: 4px; object-fit: cover;}
.main .product .shop-info .choice .btn{display: block; width: 7em; margin: 0 auto; border-radius: 3px; justify-content: center; overflow: hidden; height: 32px; line-height: 32px; position: relative; background-color: #449a0f; margin-top: 10px; font-size: 12px; color: #fff; transition: all 0.2s ease-in-out; }
.main .product .shop-info a:hover{background-color: #2F6C0A;}

.main .product .shop-info .quantity-box{color: #333; margin-top: .3rem; padding: .3rem; line-height: 1.6em; background-color: #f1f1f1; border-radius: 5px;}
.main .product .shop-info .quantity-box .list{
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #ddd;
	padding: 8px 0;
}
.main .product .shop-info .quantity-box .list div:first-child{
	flex: 1;
}
.main .product .shop-info .quantity-box .list div:last-child{
	width: 60px;
	text-align: right;
}
.main .product .shop-info .quantity{
	padding: 20px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.main .product .shop-info .quantity input{
	height: 32px;
	border: 1px solid #ddd;
	width: 3em;
	padding: 0;
	text-align: center;
	margin: 0 6px;
}
.main .product .shop-info .quantity span{
	margin-left: 10px;
}
.main .product .shop-info .quantity div:first-child{
	display: flex;
	align-items: center;
}

.main .product .shop-info .tag{}
.main .product .shop-info .tag span{ opacity: .8; display: inline-block; background-color: #f5f5f5; height: 26px; line-height: 24px; border-radius: 20px; text-align: center; padding: 0 15px; border: 1px solid #eee; color: #000; font-size: 12px; font-weight: bold; margin-right: 5px;}
.main .product .shop-info .tag span.eco{color: rgb(68, 154, 15)}

.main .product .shop-info a{width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; height: 50px; line-height: 50px; position: relative; background-color: #449a0f; margin-top: 10px; font-size: 16px; color: #fff; border-radius: 6px; transition: all 0.2s ease-in-out; }
.main .product .shop-info a span{font-size: 32px; margin-right: 6px;}
.main .product .shop-info a:hover{background-color: #2F6C0A;}

.main .prodetail{margin: 50px 0 0; display: flex; padding-bottom: 30px; margin: 0 auto;background-color: #fff;}
.main .prodetail .left-box,
.main .prodetail .right-box{width: 50%;}
.main .prodetail .product-con-title{
	font-size: 16px;
	color: #333;
	font-weight: bold;
	margin-bottom: .2rem;
}
.main .prodetail .right-box .list{
	display: flex;
	padding: 5px 0;
}
.main .prodetail .right-box .list div:first-child{
	width: 40%;
	font-weight: bold;
}
.main .prodetail .right-box .list div:last-child{
	flex: 1;
}


	.checkbox[type="checkbox"] {
	  position: relative;
	  top: -1px;
	  margin-right: 10px;
	  padding: 0;
	  width: 22px;
	  height: 22px;
	  background: #FFF;
	  border: 1px solid #D1D1D1;
	  overflow: hidden;
	  border-radius: 5px;
	  transition: all .3s;
	  -webkit-appearance: none;
	  appearance: none;
	  cursor: pointer;
	}
	
	.checkbox[type=checkbox]:focus {
		border: 1px solid #1D1D1F
	}
	
	.checkbox[type=checkbox]:checked {
		background: #D3B264;
		border-color: #D3B264;
		border: 0;
		-webkit-appearance: none;
		appearance: none
	}
	
	.checkbox[type=checkbox]:checked:after {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 20px;
		height: 15px;
		background-position: center center;
		background-repeat: no-repeat;
		background-image: url(../img/check-white.svg);
		background-size: 70%;
		transform: translate(-50%, -50%);
		content: ''
	}

	.radio label{position: relative; }
	input[type="radio"] + label::before {
	    content: " "; 
	    display: inline-block;
	    vertical-align: middle;
	    width: 20px;
	    height: 20px;
	    margin-right: .4em;
	    background: #fff;
	    border: 1px solid #ccc;
	    border-radius: 100%;
	}
	input[type="radio"]:checked + label::before {
	    border: 1px solid #2F6C0A;
	    background-color: #2f6c0a;
		background-image: url(../img/check-white.svg);
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 70%;
	}	
	/*input[type="radio"]:checked + label::after{
		content: " "; 
	    background: #2F6C0A;
	    width: 16px;
		position: absolute;
		top: 3px;
		left: 3px;
	    height: 16px;
	    border-radius: 100%;
	    font-size: 14px;
	overflow: hidden;}	*/



/* 侧边栏 */
.side-box{margin-top: 50px; overflow: hidden;}
.side-box .slideProBox{padding: 20px 0 50px; margin-bottom: 20px; position: relative;}
.side-box .slideProBox .swiper-button-prev{left: 0; margin-top: -80px; background-color: rgba(255, 255, 255, .9);}
.side-box .slideProBox .swiper-button-next{right: 0; margin-top: -80px; background-color: rgba(255, 255, 255, .9);}
.side-box .slideProBox .swiper-button-disabled{opacity: .1;}
.side-box .slideProBox .swiper-button-prev:after,
.side-box .slideProBox .swiper-button-next:after{font-size: 22px; font-weight: bold; padding: 15px 10px; color: #666;}

.side-box .slideProBox .list{display: block; position: relative;float: left;top: 0;background: #fff;transition: all 0.4s ease-in-out;margin-bottom: 2%;}
.side-box .slideProBox .list .pic{overflow: hidden; }
.side-box .slideProBox .list .pic img{width: 100%; display: block; transition: all 0.4s ease-in-out; background-size: cover; background-position: center; border: 1px solid #fff;}
.side-box .slideProBox .list:hover .pic img{transform: scale(1.05);}
.side-box .slideProBox .list .con{ position: relative; padding: 10px 10px 20px;}
.side-box .slideProBox .list .con h2{font-size: 14px; line-height: 1.4em; margin-bottom: 10px; font-weight: normal; color: #000; text-align: center; transition: all 0.5s ease-in-out; }
.side-box .slideProBox .list:hover .con h2{color: #D3B264;}
.side-box .slideProBox .list .con span{ display: block; font-size: 12px; color: #888; text-align: center;}
.side-box .slideProBox .list .tag{position: absolute; opacity: .8; top: .1rem; right: .1rem; }
.side-box .slideProBox .list .tag span{ opacity: .8; display: inline-block; background-color: #f5f5f5; height: 26px; line-height: 24px; border-radius: 20px; text-align: center; padding: 0 10px; border: 1px solid #eee; color: #000; font-size: 12px; font-weight: bold; margin-left: 5px;}
.side-box .slideProBox .list .tag span.eco{color: rgb(68, 154, 15)}

.window_hide .content{
	padding: 0;
}
.window_hide .content h3{
	font-size: 18px;
}
.window_hide .content .window-con{
	padding: 25px 30px;
}
.window_hide .content p{
	line-height: 1.6em;
}
.window_hide .content .up-img{
	margin: 20px 0 0px;
	padding: 15px 0;
	position: relative;
}
.window_hide .content .up-img .con{
	display: flex;
	align-items: center;
}
.window_hide .content .up-img img{
	width: 100px;
	height: 100px;
	border: 0;
	display: block;border:1px solid #f1f1f1;
	margin:0 10px 10px 0;
}
.window_hide .content .btn-box{padding:20px 30px; display: flex; justify-content:end; box-shadow: 0 0 10px rgba(0,0,0,0.1);}
.window_hide .content .btn{width: 130px; display: flex; align-items: center; justify-content: center; overflow: hidden; height: 40px; line-height: 40px; position: relative; background-color: #449a0f; font-size: 14px; color: #fff; border-radius: 6px; transition: all 0.2s ease-in-out; }
.window_hide .content .btn:hover{background-color: #2F6C0A;}

.window_hide .content .pic-btn{
	position: absolute;
	width: 100px;
	height: 100px;
	opacity: 0;
	top: 0;
	left: 0;
}
.color-win .list-box{
	display: flex;
	flex-wrap: wrap;
	min-height: 360px;
	align-content: baseline;
}
.color-win .list-box .list{
	width: 90px;
	margin: 10px 10px 10px 0;
	border: 1px solid #f1f1f1;
	padding: 4px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	cursor: pointer;
}
.color-win .list-box .list .pic img{
	width: 80px;
	height: 80px;
	display: block;
	object-fit: cover;
}
.color-win .list-box .list:hover,
.color-win .list-box .list.on{
	border: 1px solid #D3B264;
}


@media screen and (max-width: 768px) {
	
	#breadcrumbs{border-bottom: 1px solid #E3E3E3; overflow: hidden; padding: 20px 0 5px; display: none;}
	
	.main{ overflow: hidden; margin-top: 50px;}
	
	.main .product{ border-bottom: 1px solid #F4F7F9; padding-bottom: 0px; width: 100%; max-width: 1600px; margin: 0 auto;}
	.main .proinfo{overflow: hidden; padding-top: 0px; position: relative;}
	.main .proinfo .pro-box{display: block; vertical-align: middle; width: 100%; height: auto; overflow: hidden; position: relative; }
	.main .proinfo .pro-box .swiper-slide{background-color: #fff;}
	.main .proinfo  .swiper-button-prev, .main .proinfo .swiper-button-next{margin-top: -50px; display: none;}
	.main .proinfo  .swiper-button-prev{left: 0;}
	.main .proinfo  .swiper-button-next{right: 0;}
	.main .proinfo  .swiper-button-prev:after{font-size: 22px;padding: 15px 10px;color: #ccc;border-top-right-radius: 5px;border-bottom-right-radius: 5px;}
	.main .proinfo  .swiper-button-next:after, .main .proinfo .swiper-container-rtl .swiper-button-prev:after{font-size: 22px;padding: 15px 10px;color: #ccc;border-top-left-radius: 5px;border-bottom-left-radius: 5px;}
	.main .proinfo .swiper-pagination-bullets{display: block;}
	.main .proinfo .swiper-pagination-bullets .swiper-pagination-bullet {
		margin: 0 3px;
		background-color: #fff;
		width: 6px;
		height: 6px;
		opacity: 1;
	}
	
	.main .proinfo .swiper-pagination-bullets .swiper-pagination-bullet-active {
		background-color: #E40012;
	}
	
		.thumbnail {width: 100px;height: 550px;	float: left;overflow: hidden;box-sizing: border-box; display: none;}
		.thumbnail .swiper-slide {width: 80px !important;height: 80px !important;border: 1px solid #f1f1f1;	box-sizing: border-box;	}
		.thumbnail .swiper-slide-thumb-active{border: 1px solid #FFCBCB;}
		.thumbnail .swiper-slide img {width: 100% !important;height: 100% !important;display: block;object-fit: cover;}
		
		.pic-box{position: relative;width: 100%;float: none;}
		.pic-box img{width: 100vw;}
	
	
	.main .product .shop-info{display: block; vertical-align: middle; width: 100%; padding: 20px;}
	.main .product .shop-info h2{font-size: 18px; color: #E40012; padding-bottom: 0px; }
	.main .product .shop-info>span{ display: block; font-size: 12px; margin: 10px 0 10px; color: #888;}
	.main .product .shop-info h4{font-size: 12px; color: #888; padding-bottom: 20px; font-weight: normal; }
	.main .product .shop-info .specs{color: #333; line-height: 1.6em; font-size: 14px;}
	.main .product .shop-info .specs P{color: #333; margin-bottom: .5em;}
	.main .product .shop-info div{margin-bottom: .5em; overflow: ;}
	.main .product .shop-info div b{font-weight: normal; font-size: 15px; width: 8.2em; display: block; float: left;}
	.main .product .shop-info div span{font-weight: normal; font-size: 16px; display: block; padding-left: 5.5em;}
	/* .main .product .shop-info a{width: 90px; margin-top: 20px; border-radius: 20px; height: 40px; background: #D70021 url(../img/icon/side-10.png) no-repeat 15px 8px; background-size: 25px; padding-left: 50px; line-height: 40px; display: block; color: #fff; font-size: 15px; text-transform: uppercase;} */
	.main .product .shop-info a{width: 125px; overflow: hidden; height: 42px; line-height: 42px; position: fixed; left: auto; margin-top: 0px; text-align: center; display: block; font-size: 16px; color: #fff; border-radius: 10px; bottom: 60px; right: 10px; left: auto;}
	.main .product .shop-info a span{width: 300%; height: 42px; position: absolute; z-index: 0; right: 0; background-image: linear-gradient(295deg,  #FF677B 0%, #E40012 33%); border-radius: 10px; transition: all 0.4s ease-in-out;}
	.main .product .shop-info a b{position: relative; padding-left: 15px; font-size: 15px; display: block; width: 100%; line-height: 42px; background: url(../img/cart.png) no-repeat 15px center; background-size: 25px; }
	.main .product .shop-info a:hover span{ right: -100px;}
	
	.main .prodetail{margin: 0px 0 0; padding-bottom: 0px; margin: 0 auto;background-color: #fff;}
	.main .prodetail .product-con{max-width: 100%; margin: 0 auto;}
	.main .prodetail .left-box{float: none; padding: 0px;}
	.main .prodetail .left-box img{display: block; margin: 0 auto; width: 100%;}
	.main .prodetail table{width: 100%;}
	
	.main .product-con1{padding: 20px 0;}
	.main .product-con1 img { max-width: 100%; width: 750px; display: block; margin: 0 auto;}
	
	/* 侧边栏 */
	.side-box{margin-top: 0px; padding: 20px !important;}
	.side-box .slideProBox{padding: 20px 0 40px; margin-bottom: 20px; position: relative;}
	.side-box .slideProBox .swiper-button-prev{left: -55px; margin-top: -50px;}
	.side-box .slideProBox .swiper-button-next{right: -55px; margin-top: -50px;}
	.side-box .slideProBox .swiper-button-disabled{opacity: .1;}
	.side-box .slideProBox .swiper-button-prev:after,
	.side-box .slideProBox .swiper-button-next:after{font-size: 40px; font-weight: bold; padding: 15px 10px; color: #888;}
	.side-box .slideProBox .list{position: relative; background-color: #fff; border: 1px solid #f1f1f1; transition: all 0.3s ease-in-out; top:0;cursor: pointer;}
	.side-box .slideProBox .list .pic{transition: all 0.3s ease-in-out; background-color: #fff; overflow: hidden;}
	.side-box .slideProBox .list:hover{box-shadow: 0 2px 25px rgba(0,0,0,0.15);}
	.side-box .slideProBox .list img{width: 100%;display: block;background-size: cover;background-position: center;background-repeat: no-repeat;	transition: all 0.3s ease-in-out;}
	.side-box .slideProBox .list:hover img{	transform: scale(1.02);}
	.side-box .slideProBox .list .con{padding: 10px 10px 10px;text-align: center;}
	.side-box .slideProBox .list h2{text-align: center; height: 3.2em; font-size: .6rem; font-weight: normal; transition: all 0.3s ease-in-out;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
	.side-box .slideProBox .list span{display: block; font-size: 14px; color: #888; text-align: center;color: #888;}
	.side-box .slideProBox .list:hover h2{color: #E40012;}
	
	.side-box {position: relative; padding-bottom: .7rem;}
	.side-box .swiper-pagination-bullets{}
	.side-box .swiper-pagination-bullets .swiper-pagination-bullet {
		margin: 0 5px;
		border: 3px solid #fff;
		background-color: #d5d5d5;
		width: 10px;
		height: 10px;
		opacity: 1;
	}
	.side-box .swiper-pagination-bullets .swiper-pagination-bullet-active {
		border: 3px solid #E40012;
		background-color: #fff;
	}
}