/* ==========================================================================
  products
========================================================================== */
.product_main{ width: 100%; padding:10px 0 10px; position: relative; color: #fff;}
.products_title{ position: absolute; top: 10px; left: 0; }
.products{ width: 858px;  margin:0 auto; }
.products_top{}
.products_top .title{ padding:0; }
.products_top .txt{ padding-top:30px; color: #777; font-size: 13px; line-height: 24px; }
.pro_waterfall{ width: 858px; position: relative; }
.pro_waterfall ul{ width: 880px; }
.pro_waterfall li{ position: relative; float: left; margin:0 20px 20px 0; background-color: #f6f6f8; overflow: hidden; }
.pro_waterfall li a{ display: block; }
.proBox .img{
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}


.proBox .info{
	position: absolute;
	width: 100%; 
	height: 100%;
	color: #fff;
	top: 0;
	left: 0;
    background: url(../Images/bluebg.png) 0 0 repeat; 
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.proBox .info h1{
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    line-height: 39px;
    font-size: 20px;
    padding: 10px 20px 20px;
    margin: 20px 0 0 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
}


.proBox .info i{
	display: block;
	width: 20px; 
	height: 1px;
	background-color: #fff;
    margin:0 auto 20px;
}

.proBox .info  h4{
    text-transform: uppercase;
    color: #fff;
    font-size: 14px;
     line-height: 22px;
    padding: 0 20px 5px;
   	text-align:left;
   
}
.proBox .info .info_zhaiyao1{
    font-size: 14px;
	position: relative;
    line-height: 22px;
    padding: 0 20px 5px;
    text-align:left;
    -webkit-transition: all 0.4s 0.1s linear;
    -moz-transition: all 0.4s 0.1s linear;
    transition: all 0.4s 0.1s linear;
}

.proBox .info_zhaiyao{
	height:255px;
	overflow:hidden;
	text-overflow:ellipsis;
	word-wrap: break-word;
	word-break: normal;}


.proBox .info i,.proBox .info .info_zhaiyao{
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
}

.proBox:hover .img{
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);	
}

.proBox:hover .info{
    visibility: visible;
    opacity: 1;
}
.proBox:hover .info h1,
.proBox:hover .info .info_zhaiyao ,
.proBox:hover .info i{
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}