@charset "utf-8";
@import url("reset.css");
@import url("header.css");
@import url("footer.css");

.ztzl{width: 100%; padding: 20px; height: auto; min-height: 350px; background: #FFFFFF; overflow: hidden;}
.title{width: 100%; height: 48px; overflow: hidden;}
.title ul{width: 100%; height: 36px; background: #f5f5f5;}
.title ul li{width: 120px; height: 36px; text-align: center; float: left; position: relative;}
.title ul li a{width: 100%; height: 36px; line-height: 36px; display: block; color: #333333; font-size: 18px;}
.title ul li em{display: none;}
.title ul li.on a{background: #004eaf; color: #FFFFFF;}
.title ul li.on em{width: 100%; height: 11px; background: url(ztzl_img_01.png) center bottom no-repeat; display: block; position: absolute; left: 0; bottom: -11px;}
.title ul li:hover a{background: #004eaf; color: #FFFFFF;}

.bd{height:auto;  overflow: hidden; width: 100%;}
.bd ul{width:100%; height:auto;  overflow: hidden;}
.bd ul li{width:282px;height: 215px;float: left; margin: 15px 10px 5px 0px; overflow: hidden;}
.bd ul li a{width:100%; height: 100%; display: block;}
.bd ul li img{width:100%; height:152px;}
.bd ul li p{color: #333333; font-size: 18px; width: 100%; text-align: center; height: auto; line-height: 23px; padding-top: 15px; display: block;}
.bd ul li.move{margin-right: 0px;}
.bd ul li a:hover img{transform:scale(1.05); transition: transform 0.7s ease-out 0s; -moz-transition: transform 0.7s ease-out 0s;}
.bd ul li a:hover p{color: #004eaf;}
.hd{height: 5px;text-align: center;margin-top: 20px;}
.hd li{display: inline-block;margin: 0px 8px;width:40px;height: 5px;background: #a6a6a6; cursor: pointer;}
.hd li.on{background: #004eaf;}

@media screen and (max-width:750px ) {
	.ztzl{width: 100%; padding: 10px;}
	.title ul li{width: 25%;}
	.bd ul li{width:calc((100% - 10px) / 2);}
	.hd{display: none;}
}