.volist{margin: 0 -15px; position: relative;}
.volist .item{ width: 33.33333333%; float: left;}
.volist .item:nth-child(3n+1){ clear: both;}
.volist .item .box{ display: block; padding:15px;}
.volist .item .inner-box{ display: block;}
.volist .item .img-box{ display: block; overflow: hidden; max-height: 300px;position: relative;}
.volist .item .inner-box img{ display: block; width: 100%;min-height: 100%;}

.img-box:before {transition: all 0.5s;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-ms-transition: all 0.5s;-o-transition: all 0.5s;content: '';display: block;position: absolute;top: 0;left: 0;right: 0;bottom: 0;border: 1px solid rgba(255,255,255,0);z-index: 100;}
.inner-box:hover .img-box:before {top: 10px;left: 10px;right: 10px;bottom: 10px;border: 1px solid rgba(255,255,255,0.5);}
.inner-box .img-box .bg{transition: all 0.5s;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-ms-transition: all 0.5s;-o-transition: all 0.5s;content: "";background:rgba(0,0,0,0.7);position: absolute;top: 0;left: 0;right: 0;bottom: 0;opacity: 0;}
.inner-box .img-box .bg i{position: absolute;top: 50%;left: 50%;font-size: 60px;color: #fff;transform: translate(-50%, -50%);}
.inner-box:hover .bg{opacity: 1;z-index: 9;}
.inner-box:hover .img-box img {transform: scale(1.1) rotate(3deg);-o-transform: scale(1.1) rotate(1deg); -webkit-transform: scale(1.1) rotate(1deg);-moz-transform: scale(1.1) rotate(1deg);-ms-transform: scale(1.1) rotate(1deg);display: block;}

.item .txt-box{    padding: 20px;padding-bottom: 0;background: #fff;border: 1px solid #e8e8e8;line-height: 30px;}
.item .txt-box h3 {color: #333;font-size: 18px;font-weight: normal;}
.item .txt-box p {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color: #999;font-size:14px;}
.item .txt-box .more {border-top: 1px solid #e8e8e8;margin-top: 10px;text-transform: uppercase;font-size: 15px;line-height: 46px;text-align: center;color: #999;position: relative;}
.item .txt-box .more:before{content:"";position: absolute;top:-1px;border-top:1px solid #FB7E22;left:0;    transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s;-o-transition: all 0.5s;display: block;width: 0;}
.item .txt-box .more label {display: block;text-align: left;position: relative;}
.item .txt-box .more label i{float:right;line-height:46px;font-size: 26px;margin-right: 20px;}
.inner-box:hover .txt-box h3,.inner-box:hover .txt-box p,.inner-box:hover .txt-box .more label{color: #FB7E22;}
.inner-box:hover .txt-box .more label i{margin:0;}
.inner-box:hover .txt-box .more:before{width: 100%;}
.volist .item .img-box{height: 360px;}
@media all and (max-width: 1680px) {
    .volist .item .img-box{height: 360px;}

}
@media all and (max-width: 1560px) {
    .volist .item .img-box{height: 300px;}
}
@media all and (max-width: 1440px) {
    .volist .item .img-box{height: 250px;}

}
@media all and (max-width: 1340px) {
    .volist .item .img-box{height: 200px;}

}
@media only screen and (max-width: 768px){
	.volist { margin: 0 1%;}
	.volist .item {width: 50%;float: left;}
	.volist .item .box {padding: 3%;}
	.volist .item:nth-child(3n+1) {clear: none;}
	.volist .item:nth-child(2n+1) {clear: both;}
	
    .item .txt-box {padding: 10px;}
    .item .txt-box h3 {font-size: 16px;    overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
    .item .txt-box p {font-size: 12px;}
    .item .txt-box .more{font-size: 12px;line-height: 34px;}
    .item .txt-box .more label i {line-height: 34px;font-size: 18px;}
    .inner-box .img-box .bg i {font-size: 30px;}
}
@media only screen and (max-width: 567px){
    .volist .item .img-box {height: 170px;}
}
@media only screen and (max-width: 450px){
    .volist .item .img-box {height: 200px;}
    .item .txt-box {padding: 10px;}
    .item .txt-box h3 {font-size: 16px;}
    .item .txt-box p {font-size: 12px;}
    .item .txt-box .more{font-size: 12px;line-height: 34px;}
    .item .txt-box .more label i {line-height: 34px;font-size: 18px;}
    .inner-box .img-box .bg i {font-size: 46px;}
}