.img-text-col4-click ul { display: flex; flex-wrap: wrap; gap: 0.3rem 0.35rem; justify-content: center; } .img-text-col4-click ul li { width: 3.52rem; background: #f6faff; box-shadow: 0px 20px 45px 2px rgba(222, 233, 248, 0.8); position: relative; cursor: pointer; } .img-text-col4-click ul li::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: radial-gradient(#28597a, #051c36); z-index: -1; opacity: 0; transition: all 0.5s; } .img-text-col4-click ul li:hover .top { border-color: #e90000; } .img-text-col4-click ul li:hover .title i { color: #4ba4ff; left: 0.1rem; } .img-text-col4-click ul li:hover .title, .img-text-col4-click ul li:hover .des { color: #fff; } .img-text-col4-click ul li:hover::before { opacity: 1; } .img-text-col4-click ul li a { display: block; width: 100%; height: 100%; padding: 0.36rem 0.3rem 0.3rem; } .img-text-col4-click ul li a .top { width: 0.95rem; height: 0.95rem; border: 3px solid transparent; position: relative; border-radius: 50%; left: 0.1rem; top: 0.1rem; margin: 0 auto; } .img-text-col4-click ul li a .top .img-box { position: absolute; left: -0.1rem; top: -0.1rem; width: 100%; height: 100%; background-color: #E9EFF7; display: flex; justify-content: center; align-items: center; border-radius: 50%; } .img-text-col4-click ul li a .top .img-box img { width: 0.6rem; height: 0.6rem; } .img-text-col4-click ul li a .title { margin: 0.4rem 0 0.25rem 0; font-size: 0.24rem; font-family: Source Han Sans CN, Source Han Sans CN-700; font-weight: 700; color: #333333; line-height: 0.36rem; } .img-text-col4-click ul li a .title i { position: relative; transition: all 0.3s; } .img-text-col4-click ul li a .des { font-size: 0.2rem; font-family: Source Han Sans CN, Source Han Sans CN-400; font-weight: 400; color: #333333; line-height: 0.34rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }