@charset "utf-8";
/* CSS Document */
.BreadCrumb{height: 40px; margin: 5px auto;}


.proContainer{padding:0px 0 20px 250px;}
.proSideBar {width: 230px;float: left;margin-left: -250px;background: #fff;min-height: 300px;border-radius: 5px;overflow: hidden;border: 1px solid #ddd;/* margin-top: 10px; */}
.proSideBar .title { background: url("../img/sidebar-bg.jpg") repeat-x 0 bottom #fff; text-align: center; line-height: 52px; font-size: 20px; color: #646464; }
.proSideBar .title strong { display: block; position: absolute; left: 0; top: 0; width: 100%; color: #333; font-size: 20px; text-indent: 0; font-weight: normal; }
.proSideBar ul { padding: 0; margin-bottom: 0; }
.proSideBar ul:after { }
.proSideBar ul:before { }
.proSideBar li.m { max-height: 500px; transition: max-height 0.5s; overflow: hidden; margin: 0; padding: 0; line-height: 0; }
.proSideBar a.hd {/* height: 40px; */ border: 1px solid #ddd; border-width: 1px 0 0 0; display: block; line-height: 38px; font-size: 16px; color: #333; text-indent: 20px; background: #fbfbfb; }
.proSideBar a.hd h2 { font-size: 14px; color: #646464; line-height: 48px; margin: 0; display: block; width: 100%; }
.proSideBar .hdBox { position: relative; }
.proSideBar .hdBox i { width: 20px; height: 20px; border-radius: 100%;/* background: #ddd; */ color: #ddd; text-align: center; line-height: 24px; text-indent: 0; position: absolute; right: 20px; top: 50%; margin-top: -10px; font-size: 16px; overflow: hidden; font-weight: bold; cursor: pointer; }
.proSideBar .on a.hd { color: #006edd;/* border-color: #006edd; *//* background: #006edd; */ color: #fff!important; }
.proSideBar .on .hdBox i {/* background: #006edd */ }
.proSideBar .on a.hd h2 { color: #032388 }
.proSideBar a.hd:hover { color: #006edd;/* border-color: #006edd */ }
.proSideBar a.hd:hover h2 { color: #032388; }
.proSideBar .hdBox:hover i {/* background: #032388; */ }
.proSideBar .sub { padding: 5px 0 5px 20px; border-top: 1px solid #ddd; list-style: none; }
.proSideBar .sub li { }
.proSideBar .sub a { font-size: 13px; color: #666; line-height: 30px; padding: 0 0 0 15px; height: 30px; display: block; }
.proSideBar .sub a:before { content: ''; width: 6px; height: 6px; border: 1px solid #ddd; float: left; margin-left: -15px; margin-top: 11px; border-radius: 6px; }
.proSideBar .sub a:hover, .proSideBar .sub a:hover:before, .proSideBar .sub li.on a, .proSideBar .sub li.on a:before {color: #032388;/* border-color: #006edd; */}
.proSideBar li.m.mClose { max-height: 39px; }
.proSideBar li.m.mClose .hdBox i { transform: rotate(-90deg); }

.proList{ overflow: hidden;}
.proList ul{ margin: -20px -10px 0;}
.proList li{ float: left; width: 33.3333%; padding: 20px 10px 0;}
.proList li a{display: block;padding: 0;border: 1px solid #dfdfdf;border-radius: 5px;overflow: hidden;text-align: center;padding: 0 0 10px;}
.proList li a .pic{position: relative; overflow: hidden;}
.proList li a .pic p{position: absolute;text-align: center;width: 90%;background-color: rgba(32, 32, 33,0.5);color: #fff;font-size: 14px;line-height: 30px;left: 5%;top:20%;margin-top: -30px; opacity: .0;transition: all 500ms;
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -o-transition: all 500ms;}
.proList li a .price{height: 30px;line-height: 30px;color: #e3101e;font-size: 20px;}
.proList li a .price em{font-size: 14px;}
.proList li a h2{font-size: 14px;font-weight: bold;color: #14191e;line-height: 1;padding: 10px 0;}
.proList li a .type{font-size: 12px;line-height: 20px;color: #787d82;}
.proList li a:hover .pic p{top: 100%;opacity: 1;}
.proList li a:hover{border-color: #f69603}

.proListWrap{float: left; width: 100%;}
.proList2{/* float: left;*/}
.proList2 .hdType{}
.proList2 .hdType a{font-size: 16px;line-height: 33px;float: left;color: #898989;padding:0 50px;border-radius: 5px;margin-bottom: 20px;}
.proList2 .hdType a.on{ background: #f69603; color: #fff;}
.proList2 ul{margin: 0 -10px;}
.proList2 li{float: left;width: 50%;padding: 0 10px 20px; }
.proList2 li a{display: block;border: 1px solid #e6e6e6;border-radius: 5px;overflow: hidden;padding: 10px 10px 10px 10px;}
.proList2 li a:hover{box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.15);border-color: #f69603;}
.proList2 li a .left{float: left;width: 230px;padding: 20px 0 0 20px;/* background: #cacaca; */}
.proList2 li a .picHull{width: 270px;height: 310px;float: right; position: relative;}
.proList2 li a .picHull .text{position: absolute;font-size: 13px;line-height: 18px;color: #666;text-align: center;right: 30px;top: 30px;}
.proList2 li a .picHull .text2{ }
.proList2 li a .picHull .text2 img{width: 110px;position: absolute;right: 0px;top: 10px;}
.proList2 li a .picHull .text2 em{
    top: 10px;
    right: 51px;
    position: absolute;
    line-height: 31px;
    font-size: 12px;
    color: #666!important;
}
.proList2 li a .picHull .text2 span{font-size: 12px;line-height: 16px;display: block;text-align: center;color: #666;position: absolute;right: 5px;top: 50px;/* width: 90px; */}
.proList2 li a .pic{width: 270px;height: 310px;/* background: #cacaca; *//* float: right; */text-align: center;display: table-cell;vertical-align: middle;/* position: absolute; */}
.proList2 li a .pic img{max-width: 95%;max-height: 95%;/* text-align: center; *//* display: table-cell; *//* vertical-align: middle; */}
.proList2 li a .brand{/*margin-bottom: 30px;*/ margin-bottom: 15px;}
.proList2 li a .brand img{}
.proList2 li a h2{font-size: 17px;color: #104ccb;line-height: 30px;margin-bottom: 3px;}
.proList2 li a h3{font-size: 17px;line-height: 25px;color: #000;margin-bottom: 7px;}
.proList2 li a .desc{font-size: 14px;line-height: 35px;border: 1px solid #ddd;border-width: 1px 0;display: inline-block;line-height: 30px;}
.proList2 li a .price{font-size: 24px;font-weight: bold;color: #222;line-height: 30px;padding: 15px 0 5px;}
.proList2 li a .price em{font-size: 16px;font-weight: normal;}
.proList2 li a .price span{font-size: 14px;color: #555;font-weight: normal;padding: 0 0 0 10px;}
.proList2 li a .more{display: inline-block!important;font-size: 14px;line-height: 30px;background: #f59503;color: #fff;border-radius: 30px;padding: 0 20px;}
.proList2 li a .more i{padding: 0 0 0 5px;}
.proList2 dd.desc{text-align: center;line-height: 52px;font-size: 22px;color: #333;border: 1px solid #e6e6e6;border-radius: 5px;margin-bottom: 20px;}
.proList2 dt{margin: 0 -10px;}
.proList2 .more {text-align: center;padding: 0px 0 40px 0;}
.proList2 .more a { display: inline-block; font-size: 15px; line-height: 40px; border: 1px solid #dcdcdc; padding: 0 20px; border-radius: 5px; }
.proList2 .more a:hover {background: #f59503;border-color: #f59503;color: #fff;}
.proList2.hide .more{display: none;}
.proList2.show .more{display: none;}




@media(max-width:1768px) {
   
}
@media(max-width:1600px) {
    .proList2 li a .picHull,.proList2 li a .pic{width: 210px;height: 280px;}
    .proList2 .hdType a{padding:0 30px;}
   
}

@media(max-width:1440px) {
    

}

@media(max-device-width:1440px) {
    

}

@media(max-width:1366px) {
  
}

@media(max-device-width:1024px) {
    .proList2 .hdType a{padding:0 20px 0 0;}
    .proList2 li a .left{padding:20px 0 0 0;width: 60%;}
    .proList2 li a h2{
    font-size: 15px;
}
    .proList2 li a h3{
    font-size: 14px;
}
    .proList2 li a .desc{
    font-size: 12px;
    line-height: 20px;
    padding: 4px 0;
}
    .proList2 li a .picHull,.proList2 li a .pic{width: 40%;height: 280px;}

}