div.business{padding:50px 0  100px 0;}
div.business div.item {width:383px; float:left; text-align:center; height:455px; margin-right:25px; position:relative; }
div.business div.item:before {content:""; width:100%; height:100%; background-color:rgba(0,0,0,0.2); 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; 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:200px; font-size:30px; font-weight:500; 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.item02 .img span { /*padding-top:150px;*/}

div.business div.item .hover {position:absolute; top:0; background-color:rgba(0,0,0,0.85); height:100%; width:100%; 
opacity:0; transition:all 0.3s ease}
div.business div.item .hover .txt { transition:all 0.3s ease; font-size:30px; color:#fff; position:absolute; top:270px;
 left:50%;transform:translate(-50%,0); width:90%; }
div.business div.item02 .hover .txt {  top:250px;}
div.business div.item .hover .more { display:none; 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:200px; }
div.business div.item02 a:hover .hover .txt{ /* top:150px;*/ }
div.business div.item a:hover .hover .more {transition:all 0.3s ease; bottom:80px; }

div.business div.item2 {padding-top:20px; clear:both; overflow:hidden;}
div.business div.item2 ul{}
div.business div.item2 ul li{width:33.3333333%; float:left; background-color:#000; color:#fff; font-size:25px; 
font-weight:500; background-image:url(../img/bg.png); background-repeat:no-repeat; background-position:left top;}
div.business div.item2 ul li a {display: block; padding:50px 55px 60px 55px;  background-position:80% 35%; }
div.business div.item2 ul li a:hover {background-image:url(../img/bg2.png); color:#666;
background-repeat:no-repeat; transition:all 0.5s}
div.business div.item2 ul li span {display:block; font-size:16px; color:#666; padding-top:10px; font-weight:400;}

/*---------------------------------------
  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:100%; float:left; text-align:center; height:170px; margin-right:0%; margin-bottom:2%; 
position:relative; background-size:cover; }
div.business div.item .img span { padding-top:50px; font-size:22px; color:#fff; }
div.business div.item02 .img span { padding-top:38px;}
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; }

div.business div.item2 ul li a {display: block; padding:40px 45px 40px 45px;  background-position:80% 35%; }
div.business div.item2 ul li{width:100%; float:none;font-size:25px; margin-bottom:2%; position:relative;
background-image:url(../img/bg.png); background-repeat:no-repeat;  background-position:left top;}
div.business div.item2 ul li:before {content:""; position:absolute; background:url(../img/bg2.png)no-repeat ;
width:100px; height:20px; right:0%; top:34%;}
}
@media (max-width: 768px) {
}
@media (max-width: 640px) {
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}