/*$$

{"color":[{"val":"#666e80","title":"默认分类标题文字颜色"},



{"val":"#fff","title":"鼠标滑过分类标题文字颜色"},



{"val":"#e0e2e5","title":"关键词文字颜色"},



{"val":"#999999","title":"栏目位置文字颜色"},



{"val":"#555555","title":"二级分类栏目选中文字颜色"},



{"val":"#26334c","title":"栏目标题文字颜色"}],



"background":[{"val":"#fff","title":"产品分类背景颜色"},



{"val":"#6666eb","title":"鼠标滑过产品分类背景/分页选中"}],



"border":[{"val":"#e6e6e6 ","title":"栏目标题边框"},



{"val":"#e6e6e6","title":"产品边框"},



{"val":"#dcdcdc","title":"查看更多按钮边框"}]}

$$*/



#proList_xxx{



	width: 1200px;



	margin: 0 auto;



	padding-bottom: 80px;



}



#proList_xxx .prBox{



	height: 110px;



	position: relative;



}



#proList_xxx .prClass{



	position: absolute;



	height: 100px;



	width: 100%;



	background: #fff;



	box-shadow: 0 0 15px 10px rgba(0,0,0,.1);



	bottom:20px;



	z-index:10;



}



#proList_xxx .classList{



	width: calc(100% - 200px);



	margin: 0 auto;



	height: 100%;



	overflow: hidden;



	position: relative;



}



#proList_xxx .classList .sBox{



	height: 100%;



	display: block;



	float: left;



	width:100%;



}







#proList_xxx .classList .active,



#proList_xxx .classList .swiper-slide:hover{



	background:rgba(152, 0, 0, 1);



}



#proList_xxx .classList .sBox .title{



	width: 100%;



	display: block;



	text-align: center;



	line-height: 100px;



	height: 100px;



	color: #666e80;



	font-size: 14px;



	overflow: hidden;



	text-overflow:ellipsis;



	white-space: nowrap;



	padding: 0 10px;



}



#proList_xxx .classList .active .title,



#proList_xxx .classList .swiper-slide:hover .title{



	color: #fff;



}



#proList_xxx .btnPrev{



	background: url(./../../../static/images/LT00001_03.png) no-repeat center center;



	background-size: 15px 25px;



	position: absolute;



	left:0;



	top:0;



	width: 100px;



	height: 100%;



	cursor: pointer;



}



#proList_xxx .btnNext{



	background: url(./../../../static/images/LT00001_04.png) no-repeat center center;



	background-size: 15px 25px;



	position: absolute;



	right:0;



	top:0;



	width: 100px;



	height: 100%;



	cursor: pointer;



}







#proList_xxx .prKey{



	width: 100%;



	min-height: 60px;



	height: auto;



	overflow-y: auto;



	zoom: 1;



	padding:15px 10px;



	background: #e0e2e5;



	line-height: 30px;



	font-size: 14px;



	display: none;



	margin-top: -20px;



}



#proList_xxx .prKey .con{



	width: 100%;



	height: 100%;



	padding: 0 10px;



}



#proList_xxx .prKey a{



	color: #666e80;



	margin: 0 20px;



	float: left;



	text-align: center;



}



#proList_xxx .prKey a.active{



	color: #555555;



	font-weight: bold;



}



#proList_xxx .className{



	height: 60px;



	line-height: 60px;



	border-bottom: #e6e6e6 solid 1px;



}



#proList_xxx .className .title-1{



	float: left;



	font-size: 20px;



	color: #26334c;



	position: relative;



	display: inline-block;



	font-weight: bold;



}



#proList_xxx .className .title-1::after{



	position: absolute;



	left: 0;



	bottom: 0;



	width: 100%;



	height: 1px;



	background: rgba(152, 0, 0, 1);



	content: '';



}



#proList_xxx .className .title-2{



	color: #999999;



	float: right;



	font-size: 14px;



}



#proList_xxx .className .title-2 a{



	color: #999999;



}



#proList_xxx .proliCon{



	width: 100%;



}



#proList_xxx .proliCon .itemLi{



	width: 25%;



	float: left;



	padding: 0 5px;



	margin: 25px 0;



}



#proList_xxx .proliCon .itemLi i{



	width: 100%;



	height: 200px;



	float: left;



	border: #e6e6e6  solid 1px;



	overflow: hidden;



}



#proList_xxx .proliCon .itemLi i img{



	width: 100%;



	height: 100%;



	object-fit: cover;



	transition:transform .3s ease;



}



#proList_xxx .proliCon .itemLi:hover img{



	transform: scale(1.1);



}



#proList_xxx .proliCon .itemLi .titCon{



	border:#e6e6e6 solid 1px;



	border-top: none;



	width: 100%;



	float: left;



}



#proList_xxx .proliCon .itemLi .titCon:hover{



	background: rgba(152, 0, 0, 1);



}



#proList_xxx .proliCon .itemLi .name{



	width: 100%;



	display: block;



	color: #26334c;



	font-size: 20px;



	line-height: 60px;



	text-align: center;



	overflow: hidden;



	text-overflow:ellipsis;



	white-space: nowrap;



	padding: 0 10px;



}



#proList_xxx .proliCon .itemLi .titCon:hover .name{



	color: #fff;



}







#proList_xxx .proliCon .itemLi .btnMore{



	width: 160px;



	height: 30px;



	border:#dcdcdc 1px solid;



	line-height: 30px;



	background: url(./../../../static/images/LT00001_01.png) no-repeat 100px center;



	background-size: 26px 14px;



	padding-right: 40px;



	text-align: center;



	display: block;



	margin: 0 auto;



	color: #999999;



	margin-bottom: 20px;



}



#proList_xxx .proliCon .itemLi .titCon:hover .btnMore{



	border: #fff 1px solid;



	color: #fff;



	background: url(./../../../static/images/LT00001_02.png) no-repeat 100px center;



	background-size: 26px 14px;



}







.pages{



	width: 100%;



	margin: 20px auto;



	height: 30px;



	line-height: 30px;



}



.pages .pagination{



	text-align: center;



	font-size: 16px;



	font-weight: bold;



}



.pages .pagination li{



	color: #bfbfbf;



	padding: 0 5px;



	line-height: 30px;



	display: inline-block;



	margin: 0 5px;



}



.pages .pagination li a{



	color: #bfbfbf;



}



.pages .pagination li.active{



	background: rgba(152, 0, 0, 1);



	color: #fff;



	border-radius: 50%;



	height: 30px;



	padding: 0 10px;



}







@media screen and (max-width:1200px) {



	#proList_xxx{



		width: 96%;



	}



}



@media screen and (max-width:992px){



	#proList_xxx .proliCon .itemLi{



		width:33.3%;



		margin: 15px 0;



	}



}



@media screen and (max-width:767px){



	#proList_xxx{



		width: 96%;



	}



	#proList_xxx .className .title-2{



		width: 100%;



	}



	#proList_xxx .proliCon .itemLi{



		width:50%;



		margin: 0 0 15px 0;



	}



	#proList_xxx .classList .sBox{



		height: 100%;



	}



	#proList_xxx .classList .sBox i{



		padding-top: 0;



		height: 80px;



	}



	#proList_xxx .classList{



		width: calc(100% - 100px);



	}



	#proList_xxx .btnNext,#proList_xxx .btnPrev{



		width: 50px;



	}



	#proList_xxx .classList .sBox .title{



		line-height: 60px;



		height: 60px;



	}



	#proList_xxx .prBox{



		height: 70px;



	}



	#proList_xxx .prClass{



		height: 60px;



	}



	#proList_xxx .prKey a{



		margin: 0 5px;



	}



	#proList_xxx .proliCon .itemLi .name{



		font-size: 18px;



		line-height: 40px;



	}



}