div.pro{padding:0px 0 0px 0 ; margin: 0 -0.5%;}
div.li3 div.item {/*width:31.33333% !important ;*/}
div.pro div.item_big {width:48% !important; float:left; text-align:center; border:1px solid #dfdfdf; height:762px !important; 
margin:1% 1%;  position:relative; }
div.pro div.item {width:23%; float:left; text-align:center; border:1px solid #dfdfdf; height:370px; 
margin:1% 1%;  position:relative; }
div.pro div.item .img {position:absolute; top:15px; width:100%; z-index: 1; }
div.pro div.item_big .tit {   bottom:58px !important; font-size:25px !important; color:#333; text-align:center; width:100%;}
div.pro div.item .tit { position:absolute; z-index:10; transition:all 0.3s ease; letter-spacing:-0.3px;  bottom:18px; font-size:18px; color:#333; text-align:center; width:100%;}
div.pro div.item .tit span {display:block; font-weight:500;}
div.pro div.item .tit span.txt { font-size:18px; font-weight:400; padding-top:10px;}
div.pro div.item_big .tit span.txt { font-size:25px; font-weight:400;}
div.pro div.item:hover .tit {bottom:160px;}
div.pro div.item:hover .tit span { transition:all 0.3s ease;  color:#fff; text-shadow:1px 1px 6px #000; }
div.pro div.item .hover {position:absolute; top:0; background-color:rgba(0,0,0,0.1); height:100%; width:100%; 
opacity:0; transition:all 0.3s ease; z-index: 9}
div.pro div.item:hover .hover{opacity:1; transition:all 0.3s ease }

div.pro h3 {font-size:20px; padding:0 0 20px 16px; position:relative; clear:both; }
div.pro h3::before {content:""; height:20px; width:4px; background-color:#555; position:absolute; top:6px;  left:0px; }

/*div.pro div.item .hover .more {transition:all 0.3s ease; width:70px; height:70px; border:1px solid #fff; 
position:absolute; left:50%; transform:translate(-50%,0); bottom:0px;}
div.pro div.item .hover .more::after{content:""; color:#fff;  width:30px; height:2px; background-color:#fff; position:absolute; 
  left:50%; top:50%; transform:translate(-50%,-50%);}
div.pro div.item .hover .more::before{content:""; color:#fff;  width:2px; height:30px; background-color:#fff; position:absolute; 
  left:50%; top:50%; transform:translate(-50%,-50%);}
div.pro div.item:hover .hover .more {transition:all 0.3s ease; bottom:80px; }*/
/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {
div.pro div.item {width:49%; float:left; text-align:center; border:1px solid #dfdfdf; height:270px; 
margin:0.5% 0.5%;  position:relative; }
div.pro div.item_big {width:49% !important; height:270px !important;  position:relative; }
div.pro div.item img {height:180px;}
div.pro div.item .tit {   font-size:14px;} 
div.pro div.item .tit span.txt { font-size:14px; padding-top:0; }
div.pro div.item_big .tit {   bottom:18px !important; font-size:14px !important;}
div.pro div.item_big .tit span.txt { font-size:14px; font-weight:400;}
}
@media (max-width: 768px) {
}
@media (max-width: 640px) {
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}