#company{ width: 100%; display: flex; justify-content: space-between; } #company li{ width: 120px; overflow: hidden; background: #000; position: relative; min-height: 450px; transition: all ease .5s; } #company li .list_text,#company li .more_btn { display:none; } #company li:before { content: ""; position: absolute; top: 0; height: 100%; width: 120px; left: 0; right: auto; margin: auto; background: linear-gradient(90deg, rgba(20, 20, 20, 1), rgba(0, 0, 0, 1)); z-index:1; } #company li > img{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); opacity: .8; } #company li > a{ position: absolute; bottom: 0px; left: 20px; right: 20px; z-index: 99; transition: all ease .5s; display: flex; height: 100%; padding-top: 30px; flex-direction: column; justify-content: flex-start; align-items: flex-start; } #company li > a .icon { width:40px; height:40px; left:15px; bottom:20px; position:absolute; fill:#173373; } #company li > a .icon2 { display:none; } #company li.active1:before { background:#fbdd00; } #company li.active1 svg { fill:#333333; } #company li.active1 .icon { display:none; } #company li.active1 .icon2 { display:flex; width:40px; height:40px; left:15px; bottom:20px; position:absolute; fill:#333333; } #company li.active1 * { color:#333333 !important; } #company li > a img{ width: 40px; margin-left:15px; } #company li > a h3{ color: #fff; font-size: 16px; margin-top: 25px; padding-left:12px; margin-bottom: 10px; line-height: 1; word-break: break-all; display:flex; flex-wrap:wrap; -webkit-writing-mode: vertical-rl;writing-mode: vertical-rl;*writing-mode: tb-rl; /* writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; *writing-mode: tb-rl; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;*/ overflow: hidden; } #company li > a h4 { font-family:arial; font-size:40px; font-weight:700; text-align:center; padding-left:12px; } #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: #fff; font-family: arial; opacity: .4; margin: 0; line-height: 1; margin-bottom: 19px; font-size: 13px; } #company li > a span{ color: #fff; background: rgb(64 158 255); padding: 5px 12px; border-radius: 2px; font-size: 12px; position: absolute; bottom: 0; opacity: 0; transition: all ease .5s; } #company li:hover > a{ padding-bottom: 30px; } #company li:hover > a span{ opacity: 1; } #company li.active1{ width: 70%; }