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

.solution{width: 100%; display: table; margin:30px auto 10px auto}
.solution a{text-decoration: none;}
.solution li{ float:left; width:33.33%; padding:0 1%; margin-bottom:20px;}
.solution li .img{ width:100%; overflow: hidden;}
.solution li .img img{ width:100%; display:block;}
.solution li .zi{padding: 2% 3%; background:#ffffff;}
.solution li .zi span{ color:#232323; font-size:22px; display:block; overflow: hidden;text-overflow: ellipsis;white-space:nowrap;}
.solution li .zi p{ color:#565656; font-size:14px; height:48px; overflow: hidden;
 margin-bottom: 10px}
.solution li .zi i{background: url(../images/ico-more.png) no-repeat; width: 28px; height: 16px;
display: block;}
.solution li:hover .img img{opacity: 0.8; filter:alpha(opacity=80);transform: scale(1.05); -webkit-transform: scale(1.05);-o-transform: scale(1.05); -ms-transform: scale(1.05); -moz-transform: scale(1.05);}
.solution li:hover .zi{background: #999; }
.solution li:hover span{ color:#fff;}
.solution li:hover p{ color:#fff;}
.solution li:hover .zi i{margin-left: 10%;background: url(../images/ico-more_h.png) no-repeat;}


@media screen and (max-width: 1024px){
    .solution li{width:50%;}
}

@media screen and (max-width: 640px){
	.solution li{width:100%;}
	.solution li .zi span{overflow: auto;white-space:normal;}
	.solution li .zi p{overflow: auto;height: auto;}
}