/*$$


{"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: contain;





	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;





	}





}