@charset "utf-8"; #certify { position: relative; width: 100%; margin: 0 auto } #certify .swiper-container { padding-bottom: 40px; } #certify .swiper-slide { width: 60%; border-radius: 20px; overflow: hidden; } /*#certify .swiper-slide.swiper-slide-active{width:60%;}*/ #certify .swiper-slide.swiper-slide-active p{bottom:0;} #certify .swiper-slide img{ display: block; width: 100%; } #certify .swiper-slide p { line-height: 60px; color: #fff; font-size: 18px; margin: 0; bottom: -100%; text-align: center; background-color: rgba(0,0,0,0.6); width: 100%; position: absolute; transition: all 0.8s ease; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;padding:0 2%; } #certify .swiper-pagination { width: 100%; bottom: 0px; } #certify .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 5px; border: 7px solid #b3b3b3; width: 14px; height: 14px; opacity: 1; } #certify .swiper-pagination-bullets .swiper-pagination-bullet-active { border: 7px solid #fd8204; } #certify .swiper-button-prev { left: 11%; font-size: 26px; width: 60px; height: 60px; border-radius: 50%; line-height: 60px; color: #fff; text-align: center; overflow: hidden; background-image: none; transform: translateY(-50%); top: 50%; background-color: rgba(0,0,0,0.6); } #certify .swiper-button-prev:hover { background-color: rgb(253 130 4); } #certify .swiper-button-next { right: 11%; top: 45%; font-size: 26px; width: 60px; height: 60px; border-radius: 50%; line-height: 60px; color: #fff; text-align: center; overflow: hidden; background-image: none; background-color: rgba(0,0,0,0.6); } #certify .swiper-button-next:hover { background-color: rgb(253 130 4); }