#company { width: 100%; display: flex; justify-content: space-between; }
#company li {width: 25%; overflow: hidden; background: #000; position: relative; min-height: 500px;  transition: all ease .5s;
border-right:solid 2px #fff }
#company li > img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity:1; }
#company li > a { position: absolute; bottom: 40px; left: 20px; right: 20px;  transition: all ease .5s;
}
#company li > a img {max-width:100%; height:auto;}
#company li > a h3 { color: #fff; font-size:20px; margin-top: 25px; margin-bottom: 30px; line-height: 1; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; font-weight: bold; font-family:"Arial Black", Gadget, sans-serif;}
#company li > a p { word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; color: #000; font-family: arial; opacity: .8; margin: 0; line-height: 1; margin-bottom: 19px; font-size: 13px; }
#company li > a span { color: #fff; background: #ffa200; padding: 5px 30px; border-radius: 50px; font-size: 14px; position: absolute; bottom: 0; opacity: 0;  transition: all ease .5s;
}
#company li > a span:hover {background: #ffa200;}
#company li:hover > a { padding-bottom: 30px; }
#company li:hover > a span { opacity: 1; }
#company li:hover > .list_box img { position: absolute; left:75%; top:-80%; transform: translate(-50%, -60%); max-width:100%; height:auto;}
#company li.active1 {width:100%; background: #000; }
#company li:hover > img { position: absolute; left: 22%; top: 50%; transform: translate(-22%, -50%); opacity:1; }