.text-img-icon-reverse { display: flex; justify-content: end; } .text-img-icon-reverse .box { width: 15.43rem; border-radius: 0px 30px 0px 0px; padding: 0.8rem 0; } .text-img-icon-reverse .box .inner { width: 99.5vw; position: relative; right: calc(99.5vw - 15.43rem); } .text-img-icon-reverse .box .inner .wrapper { display: flex; justify-content: space-between; } .text-img-icon-reverse .box .inner .wrapper .right { width: 6.5rem; margin-right: 0.66rem; } .text-img-icon-reverse .box .inner .wrapper .right .title { font-size: 0.36rem; font-weight: 700; color: #000000; line-height: 0.42rem; } .text-img-icon-reverse .box .inner .wrapper .right .des { font-size: 0.2rem; color: #444444; line-height: 0.37rem; margin-top: 0.15rem; max-height: 3.5rem; overflow: auto; } .text-img-icon-reverse .box .inner .wrapper .right .des::-webkit-scrollbar-thumb { background-color: transparent; } .text-img-icon-reverse .box .inner .wrapper .right .des:hover::-webkit-scrollbar-thumb { background-color: #ccc; } .text-img-icon-reverse .box .inner .wrapper .right .btn-box { margin-top: 0.35rem; margin-right: 0.2rem; display: flex; justify-content: end; } .text-img-icon-reverse .box .inner .wrapper .right .btn-box a { display: block; width: 1.04rem; height: 0.39rem; border: 1px solid #e60000; font-size: 0.16rem; text-align: center; color: #e60000; line-height: 0.39rem; } .text-img-icon-reverse .box .inner .wrapper .right .btn-box a:hover { background-color: #e60000; color: #fff; } .text-img-icon-reverse .box .inner .wrapper .right ul { display: flex; margin-top: 0.5rem; flex-wrap: wrap; justify-content: space-between; } .text-img-icon-reverse .box .inner .wrapper .right ul li .top { margin: 0 auto; display: flex; justify-content: center; align-items: center; width: 0.68rem; height: 0.68rem; background: #e9eff7; border-radius: 50%; } .text-img-icon-reverse .box .inner .wrapper .right ul li .top img { width: 0.4rem; height: 0.4rem; } .text-img-icon-reverse .box .inner .wrapper .right ul li .bottom { margin-top: 0.1rem; font-size: 0.16rem; text-align: center; color: #000000; width: 1rem; line-height: 0.2rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .text-img-icon-reverse .box .inner .wrapper .left { width: 7.56rem; } .text-img-icon-reverse .box .inner .wrapper .left img { width: 100%; } @media screen and (max-width: 750px) { .text-img-icon-reverse .box { width: 7.3rem; padding: 0; margin: 0 auto; background-color: initial; box-shadow: none; } .text-img-icon-reverse .box .inner { width: 100%; right: 0; } .text-img-icon-reverse .box .inner .wrapper { flex-direction: column; } .text-img-icon-reverse .box .inner .wrapper .right { width: 100%; margin-left: 0; } .text-img-icon-reverse .box .inner .wrapper .right .title { text-align: center; margin: 0.78rem 0 0.6rem; position: relative; font-size: 0.4rem; line-height: 0.4rem; color: #222; } .text-img-icon-reverse .box .inner .wrapper .right .title::after { content: ""; position: absolute; left: 50%; bottom: -0.18rem; width: 0.63rem; height: 0.06rem; background: #e60000; transform: translateX(-50%); } .text-img-icon-reverse .box .inner .wrapper .right .des { font-size: 0.3rem; line-height: 0.48rem; color: #444; height: auto; padding: 0 0.3rem; max-height: initial; } .text-img-icon-reverse .box .inner .wrapper .right ul { justify-content: start; gap: 0.4rem; padding: 0 0.15rem; } .text-img-icon-reverse .box .inner .wrapper .right ul li .top { width: 1.4rem; height: 1.4rem; } .text-img-icon-reverse .box .inner .wrapper .right ul li .top img { width: 0.8rem; height: 0.8rem; } .text-img-icon-reverse .box .inner .wrapper .right ul li .bottom { width: 1.4rem; font-size: 0.28rem; line-height: 0.48rem; color: #666; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-align: left; } .text-img-icon-reverse .box .inner .wrapper .right .btn-box { margin-top: 0.88rem; margin-right: 0; justify-content: center; width: 100%; margin-bottom: 0.5rem; } .text-img-icon-reverse .box .inner .wrapper .right .btn-box a { width: 1.9rem; height: 0.6rem; line-height: 0.6rem; font-size: 0.28rem; } .text-img-icon-reverse .box .inner .wrapper .left { width: 100%; } }