@charset "utf-8";
/* CSS Document */

body{position: relative; background: #f5f5f5;}
body.on:before{content:"";width: 100%;height: 100%;background: #878787;position: absolute;z-index: 4;left:0;top: 0;opacity: .9;filter: alpha(opacity=90);filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=90);-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';}

.filter_brand{ position: relative; height: 50px;}
.filter_brand .hd{position: absolute;left: 0;top: 0;width: 100%;z-index: 3;background-color: #f5f5f5;height: 50px;/* padding: 10px 0; */}
.filter_brand .hd .breadCrumb{line-height: 50px;font-size: 16px;color: #01b4b4;}
.filter_brand .hd .breadCrumb a{ color: #01b4b4;}
.filter_brand .hd .search{width: 145px;height: 24px;line-height: 24px;border-radius: 24px;background: #fff;padding: 0 30px 0 10px;position: relative;float: left;margin: 13px 12px 0 0;}
.filter_brand .hd .search .text{background: none;text-indent: 5px;font-size: 14px;}
.filter_brand .hd .search .btn{width: 30px;height: 24px;text-align: left;color: #01b4b4;line-height: 24px;background: none;top: 0;right: 0;position: absolute;cursor: pointer;}
.filter_brand .hd .filterBtn{position: relative;padding: 0 30px 0 0;color: #01b4b4;float: left;line-height: 50px;}
.filter_brand .hd .filterBtn i{width: 30px;height: 30px;text-align: center;line-height: 30px;font-size: 14px;position: absolute;right: 0;top: 10px;}
.filter_brand .hd .filterBtn.on i{transform: rotate(180deg);}
.filter_brand .bd{position: absolute;left: 0;top: -150px;z-index: 2;width: 100%;min-height:200px;background: #e6e6e6;padding: 18px 0 0 0;
-webkit-transition:top .2s,z-index 0s;-o-transition:top .2s,z-index 0s;transition:top .2s,z-index 0s;}
.filter_brand.on{z-index:4}
.filter_brand.on .bd{top: 50px;z-index: 3;-webkit-transition:top .2s,z-index 0.6s;-o-transition:top .2s,z-index 0.6s;transition:top .2s,z-index 0.6s;}
.filter_cangKu{float: left; width: 32%; position: relative; border-radius: 5px; overflow: hidden;}
.filter_cangKu p{ font-size: 22px; line-height: 50px; color: #fff; text-align: center; position: absolute; left: 0;bottom: 0;width: 100%; background-color: #01b4b4;}       
.filter_cangKu:hover{/*transform: translate3d(0,-5px,0);box-shadow: 0 10px 30px rgb(0 0 0 / 10%);*/}
.filterBtn_close{position: absolute;/*background: #000;*/height: 55px;right: 0;top: -68px;min-width: 86px;text-indent: -99999px;}

.filter_BrandList{width: 68%;float: right;position: relative;}
.filter_BrandList ul{}
.filter_BrandList li{float:left;width: 25%;text-align: right;margin: 20px 0 0 0;}
.filter_BrandList li a{border: 1px solid #b9b9b9;height: 52px;width: 172px;display: inline-block;vertical-align: top;border-radius: 52px;overflow: hidden;}
.filter_BrandList li a span{width: 170px;height: 50px;position: relative;display: block;overflow: hidden;transform: scale(.9);}
.filter_BrandList li a img{position:absolute;left: 0;top: 0;transition: top 0s;}
.filter_BrandList li a:hover img,.filter_BrandList li.on a img{top:-50px;}
.filter_BrandList li.on a,.filter_BrandList li a:hover{background-color: #fff;border-color: #fff;}
.filter_BrandList li a:hover{transform: translate3d(0,-5px,0);box-shadow: 0 10px 30px rgb(0 0 0 / 10%);}
.filter_BrandList li a:hover span,.filter_BrandList li.on a span{transform: scale(1);}

.proListWrap{padding: 0 0 0 220px;top: 0;}
.filter_pro{width: 220px;float: left;margin-left: -220px; padding: 0 20px 0 0;}
.filter_pro ul{}
.filter_pro li{padding: 0 0 20px;}
.filter_pro li a{position: relative;display: block;background: #fff;border-radius: 5px;color: #333;}
.filter_pro li a img{border-radius:5px}
.filter_pro li a span{position: absolute;left: 0;bottom: 6px;width: 100%;text-align: center;font-size: 18px;line-height: 1;}
.filter_pro li a:before{content: ''; background-image: url("/products/img/filterPro_arrow.png"); width: 10px;height: 21px; position: absolute; right: -10px; top: 50%; margin-top: -10px; display: none;}
.filter_pro li a:hover,.filter_pro li.on a{ color: #fff; background: #01b4b4;}
.filter_pro li a:hover:before,.filter_pro li.on a:before{display: block;}

.section_proList{ width: 100%; float: left;}
.section_proList ul{}
.section_proList li{ float: left; width: 50%; padding: 0 10px 20px; }
.section_proList li a{display: block;background: #fff;border-radius: 5px;padding: 10px 10px 25px;text-align: center;position: relative;/*z-index: 3;-webkit-transition: transform .2s,z-index 0.6s;-o-transition: transform .2s,z-index 0.6s;transition: transform .2s,z-index .6s*/;}
.section_proList li a .pic{position: relative;border-radius: 5px;overflow: hidden;}
.section_proList li a .pic img{width: 100%;}
.section_proList li a .pic span{position: absolute;left: 0;bottom: 0;width: 100%;background-color: #01b4b4;font-size: 24px;line-height: 46px;height: 46px;color: #fff;}
.section_proList li a h2{font-size: 24px;color: #202020;line-height: 1;margin: 30px 0 15px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.section_proList li a h3{ display: inline-block; font-size: 18px; line-height: 20px; color: #747474;}
.section_proList li a p{ display: inline-block; font-size: 18px; line-height: 20px; color: #747474; border-left: 1px solid #c9c9c9; padding: 0 0 0 15px; margin-left: 15px;}
.section_proList li a .bd{padding: 15px 0 0 0;line-height: 30px;/* height: 30px; */}
.section_proList li a .price{ display: inline-block; font-size: 29px; color: #01b4b4; vertical-align: top; display: none;}
.section_proList li a .price i{font-weight: normal;}
.section_proList li a .bd span{ display: inline-block;border: 1px solid #01b4b4;color: #01b4b4;height: 30px;line-height: 28px;border-radius: 30px;padding: 0 11px 0 18px;vertical-align: top;/*margin-left: 15px;*/}
.section_proList li a .bd span i{ vertical-align: top;padding: 0 0 0 5px;}
.section_proList li a:hover{transform: translate3d(0,-5px,0);box-shadow: 0 10px 30px rgb(0 0 0 / 10%);/* z-index: 4;-webkit-transition:transform .2s,z-index 0s;-o-transition:transform .2s,z-index 0s;transition:transform .2s,z-index 0s;*/}
.section_proList li a:hover .bd span{ background: #01b4b4; color: #fff;}

.page{text-align:center;padding: 40px 0 60px;float: left;width: 100%;}
.page .pagesnums{display:none}
.page .pages{float: none;width: auto;padding: 0;}
.page .pages a{font-size: 14px;color: #1a1a1a;height: 42px;line-height: 40px;border: 1px solid #b2b2b2;padding: 0 15px;margin: 0 10px;background: none;display: inline-block;border-radius: 5px;}
.page .pages a.disabled,.page .pages a:hover{ border-color: #39c5c6; background: #39c5c6; color: #fff;}