div.business{padding:60px 0 100px 0 ;}
div.business div.item {width:267px; float:left; text-align:center; height:455px; margin-right:10px; position:relative; }
div.business div.item:before {content:""; width:100%; height:100%; position:absolute; left:0; top:0;  }
div.business div.item01 {background:url("../img/img1.jpg")no-repeat center center;}
div.business div.item02 {background:url("../img/img2.jpg")no-repeat center center;}
div.business div.item03 {background:url("../img/img3.jpg")no-repeat center center;}
div.business div.item04 {background:url("../img/img4.jpg")no-repeat center center; margin-right:0;}

div.business div.item .img {position:absolute; top:0; width:100%; }
div.business div.item .img span {display:block; transition:all 0.3s ease; padding-top:70px; font-size:32px; color:#fff; text-align:center; width:100%;}
div.business div.item a:hover .img span {transform: translate(0,-30px); transition:all 0.3s ease; opacity:0; }

div.business div.item .hover {position:absolute; top:0; background-color:rgba(33,36,167,0.8); height:100%; width:100%; 
opacity:0; transition:all 0.3s ease}
div.business div.item .hover .txt { transition:all 0.3s ease; font-size:22px; color:#fff; position:absolute; top:180px;
 left:50%;transform:translate(-50%,0); width:90%; }
div.business 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.business 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.business 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.business div.item a:hover .hover{opacity:1; transition:all 0.3s ease }
div.business div.item a:hover .hover .txt{ transition:all 0.3s ease; top:80px; }
div.business div.item a:hover .hover .more {transition:all 0.3s ease; bottom:80px; }

/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {
div.business{padding:40px 0 60px 0 ;}
div.business div.item .hover {opacity:1; background-color:rgba(33,36,167,0);}
div.business div.item {width:49%; float:left; text-align:center; height:319px; margin-right:1%; margin-bottom:1%; 
position:relative; background-size:cover;}
div.business div.item .img span { padding-top:50px; font-size:25px; color:#fff; }
div.business div.item a:hover .img span {transform: translate(0,-0px);  opacity:1; }
div.business div.item .hover .txt { display:none;  }
div.business div.item .hover .more {transition:all 0.3s ease; width:60px; height:60px; border:1px solid #fff; 
position:absolute; left:50%; transform:translate(-50%,0); bottom:0px; bottom:50px; opacity:1 !important;}
div.business div.item a:hover .hover .more {transition:all 0.3s ease; bottom:50px; }

}
@media (max-width: 768px) {
}
@media (max-width: 640px) {
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}