div.company{padding:0px 0 30px 0 ;}
div.company div.item {width:24.5%; float:left; overflow:hidden;  height:480px; margin-right:0.5%; position:relative; }
div.company div.item:before {content:""; width:100%; height:100%; background-color:rgba(0,0,0,0.2);
 position:absolute; left:0; top:0; background-size:cover; }
div.company div.item01 {background:url("../img/img1.jpg")no-repeat center center; background-size:cover}
div.company div.item02 {background:url("../img/img2.jpg")no-repeat center center;background-size:cover}
div.company div.item03 {background:url("../img/img3.jpg")no-repeat center center;background-size:cover}
div.company div.item04 {background:url("../img/img4.jpg")no-repeat center center; margin-right:0;background-size:cover}

div.company div.item .img {position:absolute; top:0; width:100%;z-index: 1; }
div.company div.item .img span {display:block; transition:all 0.3s ease; padding-top:0px; font-size:20px; color:#fff; 
 width:100%; padding:8px 25px 10px 25px; text-align:left;  background-color:rgba(0,0,0,0.6); position: relative }
 div.company div.item .img span:after {content:""; z-index:99; position:absolute; width:24px; height:24px;
 top:11px; right:15px;  background-image:url(../img/arrow_w.png); background-repeat:no-repeat; }
div.company div.item a:hover .img span {transform: translate(0,130px); transition:all 0.3s ease; opacity:1; }
 div.company div.item a:hover .img span:after {transform:rotate(180deg); }

div.company div.item .hover {position:absolute; height:100%; top:0px; background-color:rgba(0,0,0,0);
 /*background-color:rgba(33,36,167,0.8);블루*/ width:100%; opacity:1; transition:all 0.3s ease}
div.company div.item .hover .txt { transition:all 0.3s ease; font-size:14px; color:#fff; position:absolute; top:-130px;
  width:100%; background-color:rgba(0,0,0,0.6); height:176px; z-index: 0; padding:25px 25px;}
 
div.company div.item .hover .more {display:none; transition:all 0.3s ease; width:235px; height:45px; border:0px solid #fff; 
position:absolute; left:0%;  bottom:0px; color:#333; bottom:50px; padding-top:10px;  }
div.company div.item .hover .more span {z-index: 1; position:absolute; transition:all 0.3s ; left:0px; 
font-weight:500; font-size:14px !important; background:url("../img/arrow.png")no-repeat right 5px; padding-right:35px; }
div.company div.item a .hover .more:after {content:""; width:0px; height:calc(100% );  transition:all 0.4s ease;  background-color:#fff; position:absolute; left:0; top:0; }
div.company div.item a:hover .hover .more:after {content:""; width:calc(100% ); color:#333;  transition: all 0.4s ease cubic-bezier(0.25, 0.25, 0.75, 0.75); }

/*div.company div.item .hover .more::after{content:""; color:#fff;  width:15px; height:1px; background-color:#fff; position:absolute; 
  right:10%; top:50%; }
div.company div.item .hover .more::before{content:""; color:#fff;  width:1px; height:15px; background-color:#fff; position:absolute; 
  right:13.5%; top:40%; }*/
  
div.company div.item a:hover .hover{opacity:1; transition:all 0.3s ease; top:0; }
div.company div.item a:hover .hover .txt{ transition:all 0.3s ease; top:0px; }
div.company div.item a:hover .hover .more {transition:all 0.3s ease; }
div.company div.item a:hover .more span {transition:all 0.3s ease; left:50px;}

/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {
div.company{padding:40px 0 60px 0 ;}
div.company div.item .hover {opacity:1; background-color:rgba(33,36,167,0);}
div.company div.item {width:48%; float:left; text-align:center; height:200px; margin:1%; 
position:relative; background-size:cover;}
div.company div.item .img span {  font-size:18px; color:#fff; }
div.company div.item .img span:after {display:none;}
div.company div.item a:hover .img span {transform: translate(0,-0px);  opacity:1; }
div.company div.item .hover .txt { display:none;  }
div.company div.item .hover .more { width:90%; bottom:35px;}
div.company div.item a .hover .more:after {width:90%; }
div.company div.item a:hover .hover .more:after {width:90%; }
div.company div.item .hover .more span { left:30px; }
div.company div.item a:hover .more span {left:30px;}}
/*div.company 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.company 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) {
}