*{ margin:0; padding:0; list-style-type:none; } a,img{ border:0; } .diepic{ position: relative; width: 100%; margin:2rem auto 0 auto } .diepic h2{ font-size:3.6rem; margin-bottom:1.7rem; text-align:center; font-weight:normal; line-height:4.2rem; height:6rem; } .diepic .swiper-container { padding-bottom: 6rem; } .diepic .swiper-slide { width: 50%; height: auto; background: #fff; transition: all .4s cubic-bezier(.4, 0, .2, 1); } .diepic .swiper-slide img { width:95%; height: auto; margin: 0 auto; display: block; box-shadow: 0 0.6rem 1rem 0 rgba(20, 34, 67, .1); } .diepic .swiper-slide span { font-size: 1.2rem; display: block; width: 100%; text-align: center; line-height: 1.5; margin-top: 1.5rem; } .diepic .swiper-slide p { line-height: 9.8rem; padding-top: 0; text-align: center; color: #636363; font-size: 1.1em; margin: 0; } .diepic .swiper-pagination { width: 100%; bottom: -8.5rem; display: none; } .diepic .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 0.5rem; border: 3px solid #fff; background-color: #030000; width: 1rem; height: 1rem; opacity: .6; } .diepic .swiper-pagination-bullets .swiper-pagination-bullet-active { width: 3.4rem; display: inline-block; height: 1rem; border-radius: 1rem; transition: width .4s cubic-bezier(.4, 0, .2, 1); background-image: linear-gradient(80deg, #0989c5, #995cb6); opacity: 1; } .diepic .swiper-button-prev { left: 0; top: 12.5rem; width: 2rem; height: 3rem; background: url(../../images/icon_09.png) no-repeat center center #666; transform: rotate(180deg); } .diepic .swiper-button-next { right: 0; top: 12.5rem; width: 2rem; height: 3rem; background: #666; background: url(../../images/icon_09.png) no-repeat center center #666; }