/* CSS Document */

.zh {width: 100%;margin: 0 auto;}
.product{width:100%;height:auto;clear:both;position:relative;padding: 0px 0px 90px 0px;background:url(../images/product.jpg) no-repeat center top;}
.zh .left{width:50%;height:64vh;float:left;background:#fff;overflow:hidden;}
.zh .left ul{width:100%;height:100%;}
.zh .left ul li{width:33%;height:50%;float:left;border-right: solid 1px #ccc;border-bottom: solid 1px #ccc;padding: 3% 0%;}
.zh .left ul li .img{display:block;padding:5%;overflow:hidden;height:80%;text-align: center;}
.zh .left ul li .img img{max-width:100%;width:auto;height:auto;transition: all 0.6s;  -ms-transition: all 0.8s;}
.zh .left ul li:nth-child(3){border-right: none;}
.zh .left ul li:nth-child(4){border-bottom: none;}
.zh .left ul li:nth-child(5){border-bottom: none;}
.zh .left ul li:nth-child(6){border-right: none;border-bottom: none;}




.zh .left ul li h1{padding:5%;text-align: center;height:20%;overflow:hidden;}
.zh .left ul li h1 a{text-align:center;color:#000;font-size:2rem;font-weight:normal;letter-spacing:1px;transition:all 0.6s;}
.zh .left ul li:hover h1 a{color:#d9000b;letter-spacing:4px;transition:all 0.6s;}
.zh .left ul li:hover .img img{transform: scale(1.2);  -ms-transform: scale(1.2);margin:0 auto;display:block;}
.zh .right{width:50%;height:64vh;float:left;background:#fff;overflow:hidden;position:relative;}

.zh .right img{width:100%;height:100%;}
.zh .right h1{width:80%;position:absolute;left:10%;top:18%;transition:all 0.6s;}
.zh .right h1 a{color:#fff;font-size:2.4rem;line-height:2;font-weight:normal;letter-spacing:2px;}
.zh .right p{width:80%;position:absolute;left:10%;top:28%;color:#fff;font-size:1.6rem;transition:all 0.6s;}
.zh .right .more{width:165px;height:45px;line-height:45px;border:solid #fff 1px;text-align:center;position:absolute;left:10%;top:38%;color:#fff;font-size:1.4rem;transition:all 0.6s;}

.zh .right:hover h1{top:15%;transition:all 0.6s;}
.zh .right:hover p{top:25%;transition:all 0.6s;}
.zh .right:hover .more{top:35%;transition:all 0.6s;}
.zh .right:hover h2{transition:all 0.6s;height:22%;}
.zh .right:hover h2 a{letter-spacing:10px;transition:all 0.6s;}

.zh .right h2{width:100%;height:20%;display:block;background:#d9000b;position:absolute;left:0px;bottom:0px;transition:all 0.6s;}
.zh .right h2 a{color:#fff;font-size:3rem;font-weight:normal;text-align:center;display:block;width:100%;line-height:4;transition:all 0.6s;}




@media (max-width:468px){
.product{padding: 0px 0px 0px 0px !important;}
.zh .left {width:100%;height:60vh !important;}
.zh .left ul li h1 a{font-size:1.6rem;}
.zh .right{width:100%;}
.zh .left ul li{width:50%;}
.zh .left ul li:nth-child(2){border-right: none;}
.zh .left ul li:nth-child(3){border-right: solid 1px #ccc;}
.zh .left ul li:nth-child(4){border-bottom: none;border-right: none;}
}
@media (min-width:469px) and (max-width:768px){
.product{padding: 0px 0px 0px 0px !important;}
.zh .left {width:100%;height:60vh !important;}
.zh .left ul li h1 a{font-size:1.6rem;}
.zh .right{width:100%;}
.zh .left ul li{width:50%;}
.zh .left ul li:nth-child(2){border-right: none;}
.zh .left ul li:nth-child(3){border-right: solid 1px #ccc;}
.zh .left ul li:nth-child(4){border-bottom: none;border-right: none;}
}
@media (min-width:769px) and (max-width:990px){
.zh .left {width:100%;height:65vh !important;}
.zh .left ul li h1 a{font-size:1.6rem;}
.zh .right{width:100%;}
.zh .left ul li{width:50%;}
.zh .left ul li:nth-child(2){border-right: none;}
.zh .left ul li:nth-child(3){border-right: solid 1px #ccc;}
.zh .left ul li:nth-child(4){border-bottom: none;border-right: none;}
}
@media (min-width:991px) and (max-width:1080px){
.zh .left {height:50vh !important;}
.zh .left ul li h1 a{font-size:1.6rem;}
.zh .right {height:50vh !important;}
.zh .left ul li{width:50%;}
.zh .left ul li:nth-child(2){border-right: none;}
.zh .left ul li:nth-child(3){border-right: solid 1px #ccc;}
.zh .left ul li:nth-child(4){border-bottom: none;border-right: none;}

}
@media (min-width:1081px) and (max-width:1200px){
.zh .left {height:60vh !important;}
.zh .left ul li h1 a{font-size:1.6rem;}
.zh .right {height:60vh !important;}
.zh .left ul li{width:50%;}
.zh .left ul li:nth-child(2){border-right: none;}
.zh .left ul li:nth-child(3){border-right: solid 1px #ccc;}
.zh .left ul li:nth-child(4){border-bottom: none;border-right: none;}
}
@media (min-width:1201px) and (max-width:1320px){
.zh .left {height:60vh !important;}
.zh .left ul li h1 a{font-size:1.6rem;}
.zh .right {height:60vh !important;}
.zh .left ul li{width:50%;}
.zh .left ul li:nth-child(2){border-right: none;}
.zh .left ul li:nth-child(3){border-right: solid 1px #ccc;}
.zh .left ul li:nth-child(4){border-bottom: none;border-right: none;}
}