.pro_el.vf_section-full .container{max-width:100%;padding:20px}
.pro_el.vf_section-full.vf_gp_0 .container{padding:0}
.pro_el.vf-container_p .container{padding:20px}
.pro_el .row{margin-right:-20px;margin-left:0;margin-bottom:-20px}
.pro_el .row .grid{padding:0 20px 20px 0}
.pro_el.vf_gp_0 .row{padding-left:1px}
.pro_el.vf_gp_0 .row .grid .box{margin-left:-1px;margin-bottom:-1px;box-shadow:none}

.pro_box{border:1px solid #e1e1e1;height:100%;background:#fff}
.pro_box{border-radius:3px;overflow:hidden;transform:rotate(0);-webkit-transform:rotate(0)}
.pro_box .pro_image{overflow:hidden}
.pro_box .pro_image:only-child{height:100%}
.pro_box .pro_image img{width:100%}
.pro_box .pro_image:only-child img{height:100%}
.pro_box .pro_image img:nth-of-type(2){opacity:0;top:0;position:absolute;top:0;z-index:3;width:100%}
.pro_box picture:nth-of-type(2) img{opacity:0;top:0;position:absolute;top:0;z-index:3;width:100%}

.pro_box .img_info{padding:0;color:#fff;z-index:5}
.pro_box .pro_img_info{padding:5% 8%;width:100%;margin-top:auto}
.pro_box .pro_img_info:before{content:'';position:absolute;top:60%;right:0;bottom:0;left:0;z-index:-1;height:auto;pointer-events:none;background:-moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.6) 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(0,0,0,0)),color-stop(100%,rgba(0,0,0,.6)));background:-webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.6) 100%);background:-o-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.6) 100%);background:-ms-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.6) 100%);background:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.6) 100%)}
.pro_box .pro_img_info_title{letter-spacing:-.25px;padding:0 0 5px;color:#fff;position:relative;overflow:hidden;line-height: 1.3;}
.pro_box .pro_img_info_text,.pro_box .pro_img_info_title{text-shadow:2px 1px 1px rgba(0,0,0,.2)}
.pro_box .pro_img_info_title:only-child{margin:0}
.pro_box .pro_info{padding:15px 10px;text-align:center}
.pro_box .pro_info:empty{display:none}
.pro_box .pro_info_title{font-size:16px;margin-bottom:10px}
.pro_box .pro_info_title{height:auto;-webkit-line-clamp:2;line-height:20px;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical}
.pro_box .pro_info_title:only-child{margin-bottom:0}
.pro_box .pro_info_text{margin-bottom:0}
.pro_box:hover{box-shadow:0 4px 20px rgba(0,0,0,.19)}
.pro_box:hover .pro_image img:first-of-type{left:-100%}
.pro_box:hover .pro_image img:nth-of-type(2){opacity:1}
.pro_box:hover .pro_image img:only-of-type{opacity:1}


.pro_box:hover picture:first-of-type img{left:-100%}
.pro_box:hover picture:nth-of-type(2) img{opacity:1}
.pro_box:hover picture:only-of-type img{opacity:1}


[class*=side] .pro_box{padding:5px}
[class*=side] .pro_box .pro_info{padding:5px 10px 10px 10px;text-align:left}
[class*=side] .pro_box .pro_info .pro_info_title{margin:0 0 10px 0}
[class*=side] .pro_box .pro_image img{border-radius:3px}



/**布局的区别 **/
.vf_pro_default{border:1px solid #e1e1e1;height:100%;background:#fff}
.vf_pro_default{border-radius:3px;overflow:hidden;transform:rotate(0);-webkit-transform:rotate(0)}
.vf_pro_default:hover{box-shadow:0 4px 20px rgba(0,0,0,.19)}

.vf_pro_default .image{overflow:hidden}
.vf_pro_default .image img{width:100%;height: 100%;}


.vf_pro_default .img_info{padding:0;color:#fff;z-index:5}
.vf_pro_default .img_info_content{padding:5% 8%;width:100%;margin-top:auto}
.vf_pro_default .img_info_content:before{content:'';position:absolute;top:60%;right:0;bottom:0;left:0;z-index:-1;height:auto;pointer-events:none;background:-moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.6) 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(0,0,0,0)),color-stop(100%,rgba(0,0,0,.6)));background:-webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.6) 100%);background:-o-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.6) 100%);background:-ms-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.6) 100%);background:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.6) 100%)}
.vf_pro_default .img_info_title{letter-spacing:-.25px;padding:0 0 5px;color:#fff;position:relative;overflow:hidden;}
.vf_pro_default .img_info_text,
.vf_pro_default .img_info_title{text-shadow:2px 1px 1px rgba(0,0,0,.2);line-height: 1.3;}
.vf_pro_default .img_info_title:only-child{margin:0}

.vf_pro_default .info{padding:15px 10px;text-align:center}
.vf_pro_default .info:empty{display:none}
.vf_pro_default .info_title{font-size:16px;margin-bottom:10px}
.vf_pro_default .info_title{height:auto;-webkit-line-clamp:2;line-height:20px;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical}
.vf_pro_default .info_title:only-child{margin-bottom:0}
.vf_pro_default .info_text{margin-bottom:0}
.vf_pro_default .info_text{height:auto;-webkit-line-clamp:2;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical}

.vf_pro_default figure:nth-of-type(2) {opacity:0;top:0;position:absolute;top:0;z-index:3;width:100%}
.vf_pro_default:hover figure:first-of-type{opacity:1}
.vf_pro_default:hover figure:nth-of-type(2){opacity:1}

.vf_pro_default picture:nth-of-type(2) {opacity:0;top:0;position:absolute;top:0;z-index:3;width:100%}
.vf_pro_default:hover picture:first-of-type{opacity:1}
.vf_pro_default:hover picture:nth-of-type(2){opacity:1}

[class*=side] .vf_pro_default{padding:5px}
[class*=side] .vf_pro_default .info{padding:5px 10px 10px 10px;text-align:left}
[class*=side] .vf_pro_default .info .pro_info_title{margin:0 0 10px 0}
[class*=side] .vf_pro_default .image img{border-radius:3px}