.z-container{ width: 1200px; margin: 0 auto;}
.z_other{ }
.z_pro_h1{ font-size: 25px; font-weight: bold;}
.z_pro_p{ color: #5f5f5f; margin: 20px 0;}
.z_proclass{ margin: 30px 0;}
.z_proclass a{ display: inline-block; margin-right: 6px; padding: 0 30px; box-sizing: border-box; transition: all .4s; height: 40px; line-height: 40px; border: 1px solid #bfbfbf; box-sizing: border-box;}
.z_proclass a.active,.z_proclass a:hover{ background:#f76057; color: #fff; border-color: #F76057;} 
.z_proh2{ line-height: 70px;  font-size: 20px;}
.z_prolist {border-top: 1px solid #bfbfbf; padding-top: 20px;}
.z_prolist li{ width: 33.3%; float: left; padding-right: 30px; box-sizing: border-box; margin-bottom: 30px;}
.z_prolist h3{ font-size: 16px; color: #f76057;  margin-bottom: 15px; line-height: 24px; height: 24px; overflow: hidden;}
.z_prolist  p{ line-height: 24px; height: 48px; overflow: hidden; color: #5f5f5f; font-size: 13px;}
.z_safebox{border-bottom: 1px solid #bfbfbf; padding-top: 40px;}
.z_safebox:last-child{ border-bottom: none;}
.z_other{ position: relative;}
.z_leftnav{ width: 250px; position: absolute; left: 50px; top: 70px;  }
.z_search{ border-bottom: 1px solid #7d7d7d; line-height: 50px; margin-bottom: 20px;}
.z_search .text{ border: none; background: none; width: 80%;font-size: 18px;}
.z_search .text::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color:#333; font-size: 18px; }
.z_search .btn{ float: right; }
.z_search .btn i{font-size: 24px;}
.z_navwarp{ }
.z_navwarp li{ margin-bottom: 2px;}
.z_navwarp .z_first{ display: block; width: 100%; height: 54px; line-height: 54px; padding: 0 20px; box-sizing: border-box;font-size: 16px;background: #fff;}
.z_navwarp .z_first.on{ background:#f76057; color: #fff;font-weight: bold;}
.z_navwarp .icon-xiangyou{ float: right; transition: all .3s; }
.z_navwarp .z_first.on .icon-xiangyou{ color: #fff; transform: rotate(90deg);}
.z_navdown{ background: #f76057; padding: 0 20px; box-sizing: border-box; display: none;padding-bottom: 10px;}
.z_navdown a{ display: block; color: #fff; border-bottom: 1px dashed #fff; line-height: 40px;}
.z_navdown a:last-child{ border-bottom: none;}

.z_pagenav{ padding: 30px 0;}
.z_pagenav a{ color:#838383;}
.z_pagenav a.active{ color: #333;}
.z_proleft{ width: 50%; float: left;}
.z_proleft img{ max-width: 100%; max-height: 100%;}
.z_small{ width: 100px; float: left;}
.z_small{ margin-top: -15px;}
.z_small li{ width: 100%; height: 100px; box-sizing: border-box; margin-top: 15px; background: #fff;border: 2px solid #fff; transition: all .4s;display: flex;
    justify-content: center;
    align-items: center}
.z_small li.on{ border: 2px solid #f76057;}
.z_big{ width: 450px; float: left; margin-left:20px; height: 450px; display:flex; justify-content: center; align-items: center; background: #fff;}
.z_big img{ max-width: 100%;}
.z_proright{ width: 45%; float: right;}
.z_proright h3{ font-size: 28PX; font-weight: bold; margin: 30px 0;}
.z_proright .desc{ color: #5f5f5f; line-height: 30px;}
.z_protab{ height: 50px; line-height: 50px; display: flex; background: #d8d8d8; margin-top: 60px;}
.z_protab li{ flex: 1; text-align: center; font-weight: bold; transition: all .2s;}
.z_protab li.on{ background: #f76057; color: #fff; font-size: 16px;}
.z_protabcon{ background: #fff; padding: 40px 36px; box-sizing: border-box; background: #fff;}
.z_protabcon img{ max-width:100%;}
.z_protancon{}
.z_tuijian h3{ font-size: 24px;  padding: 30px 0;}
.z_tuijian h3 .dot{ display: inline-block; width: 17px; height: 17px; border-radius: 50%; border: 4px solid #f54339; box-sizing: border-box; margin-right: 15px;}
.z_tujianlist{ margin-left: -2%;}
.z_tujianlist li{ width: 23%; float: left; margin-left: 2%; height: 275px; position: relative; z-index: 1; margin-bottom: 30px;}
.z_tujianlist li:before{ content: ""; display: block; width: 100%; height: 100%; background: #F54339;position: absolute; left: 0; top: 0;  z-index: -1; transition: all .4s;}
.z_tujianlist li img{ width: 100%; height: 100%;}
.z_tujianlist li h4{ position: absolute; left: 0; top: 20px; padding:0 20px ; font-size: 16px; transition: all .4s;}
.z_tujianlist li em{ display: block; font-weight: bold; font-size: 30px; color: #939393;}
.z_tujianlist li .add1{ position: absolute; right: 20px; bottom: 10px;}
.z_tujianlist li a{ display: block; width: 100%; height: 100%;}
.z_tujianlist .z_promsk{ width: 100%; transition: all .4s; opacity: 0; height: 100%; background: rgba(0,0,0,.7); position: absolute; left: 0; top: 0; display: flex; justify-content: center; align-items: center; color: #fff; text-align: center;}
.z_promsk h5{ font-size: 16px; font-weight: bold;}
.z_promsk p{ margin: 15px 0;}
.z_promsk .add2{ width: 35px; height: 35px; border-radius: 50%; border: 2px solid #ffffff; box-sizing: border-box; line-height: 35px; color: #fff; margin: 0 auto;}
.z_tujianlist li:hover .z_promsk{ opacity: 1;}
.z_tujianlist li:hover:before{ opacity: 1; transform: translate(10px,10px);}
.z_tujianlist li:hover h4{ opacity: 0;}











@media screen and (max-width: 1280px){
	.z-container{ width: 94%;}
	.z_proleft{ width: 51%;}
}
@media screen and (max-width: 1200px){
	.z_proleft{ width: 50%;}
.z_big{ width:390px;}	
}
@media screen and (max-width: 1100px){
.z_big{ width:360px;}	
}
@media screen and (max-width: 780px){
.z_safebox{ padding-top: 20px;}	
.z_pro_h1{ font-size: 18px;}
.z_pro_p{ margin: 10px 0;}
.z_proclass{ margin: 10px 0;}
.z_proclass a{ padding: 0 10px; height: 30px; line-height: 30px; margin-bottom: 10px;}
.z_proh2{ line-height: 40px; font-size: 16px;}
.z_prolist li{ width: 100%; padding: 0; margin-bottom: 10px;}

.z_prolist h3{ margin-bottom: 5px;}
.z_prolist p{ height: auto;}
.z_proleft{ width: 100%;}
.z_small{ width: 100%; display: flex; justify-content: space-between;  margin-bottom: 10px;}
.z_small li{ display: inline-block; width: 80px; height: 80px; }
.z_big{ width: 100%; height: 320px; padding: 10px; box-sizing: border-box; margin-left:0}
.z_proleft img{ max-height: 280px;}
.z_proright{ width: 100%;}
.z_proright h3{ font-size: 18px; margin: 10px 0;}
.z_proright .desc{ line-height: 24px;}
.z_protab li,.z_protab li.on{ font-size: 12px;}
.z_protab{ margin-top: 30px; height: 40px; line-height: 40px;}
.z_protabcon{ padding: 10px;}
.z_tujianlist li{ width: 48%; height: auto; margin-bottom: 10px; height: 190px;}
.z_tujianlist li .z_promsk{ display: none;}
.z_tujianlist li:before{ display: none;}
.z_tujianlist li h4{ top: 10px; left: 0; font-size: 14px;}
.z_tujianlist li .add1{ font-size: 12px;}
.z_tuijian h3{ font-size: 18px; padding: 15px 0;}
}
@media screen and (max-width: 375px){
.z_tujianlist li{ height: 174px;}	
}
@media screen and (max-width: 320px){
.z_tujianlist li{ height: 148px;}	
}