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

div.business div.item .img {position:absolute; bottom:0px; width:100%; height:70px; padding-top:0px; border:0px solid #dfdfdf;
background:; z-index:1; color:#fff;  }
div.business div.item .img span {display:block;height:70px;  transition:all 0.3s ease; font-size:20px; font-weight:500; 
text-align:center; width:100%; margin: 0 auto;  background:rgb(0,0,0,0.5); padding:18px 0 10px 0; border-radius: 0px 0px  }

div.business div.item .hover {position:absolute; top:0;  /*background-color:rgba(33,36,167,0.8);블루*/ height:100%; width:100%; 
opacity:1; transition:all 0.3s ease; height:390px;}
div.business div.item .hover .txt {opacity:0; transition:all 0.1s ease; font-size:18px; color:#fff; position:absolute; top:110px;
 left:50%;transform:translate(-50%,0); width:90%; }
 
div.business div.item .hover .more {transition:all 0.3s ease; width:100%; border:0px solid #fff; 
position:absolute; height:100%;  color:#333;  padding-top:10px;  }
div.business div.item .hover .more span {z-index: 1; position:absolute; transition:all 0.3s ; left:50%; top:50%;
transform:translate(-50%,-50%);  opacity:0; }
  
div.business div.item a .hover:before{content:""; position:absolute; width:100%; height:100%;
 transition:all 0.3s ease; background-color:rgba(0,0,0,0.1); left:0; top:0; }
div.business div.item a:hover .hover:before{content:""; position:absolute; width:100%; height:100%;
 transition:all 0.3s ease; background-color:rgba(0,0,0,0.1); left:0; top:0; }
div.business div.item a:hover .hover .txt{opacity:0; transition:all 0.5s ease; top:70px; }
div.business div.item a:hover .hover .more {transition:all 0.5s ease; }
div.business div.item a:hover .more span {transition:all 0.5s ease; top:45%; opacity:1}

/*---------------------------------------
  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:48%; float:left; text-align:center;  margin-right:0%; margin-bottom:4%; 
position:relative; background-size:cover; height:250px;}
div.business div.item:nth-child(odd){float:right;}
div.business div.item .hover{width:100%; float:left; text-align:center; height:100%; margin-right:10px; position:relative;
background-repeat:no-repeat; background-position:center top; background-size:cover;  }

div.business div.item .img {bottom:auto; top:0px; }
div.business div.item .img span { padding-top:12px; font-size:22px; height:60px; 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 { width:100%; }
div.business div.item a .hover .more:after {width:100%; }
div.business div.item a:hover .hover .more:after {width:100%; }
div.business div.item .hover .more span {  opacity:1; top:50%; }
div.business div.item a .hover:before{content:""; position:absolute; width:100%; height:100%;
 transition:all 0.3s ease; background-color:rgba(0,0,0,0.2); left:0; top:0; }
/*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) {
}