@charset "utf-8"; /* CSS Document */ #certify { position: relative; max-width: 1170px; margin: 0 auto; width: 100%; } #certify .swiper-container { padding-bottom: 60px; } #certify .swiper-slide { width: 700px; background: #fff; box-shadow: 0 8px 30px #ddd; opacity: .5; } .mengban { background: #000; position: fixed; top: 0px; z-index: 100; height: 100%; width: 100%; display: none; opacity: 0.2; } #certify .swiper-slide .mengban { display: block; } #certify .swiper-slide-active .mengban{ display: none; } #certify .swiper-slide img{ display:block; width: 100%; } #certify .swiper-slide p { font-size:14px; width: 100%; background: #243b8a; height: 2.8em; color: #fff; line-height: 2.8em; text-align: center; display: block; } #certify .swiper-pagination { width: 100%; bottom: 20px; display: none; } #certify .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 5px; border: 3px solid #fff; background-color: #d5d5d5; width: 10px; height: 10px; opacity: 1; } #certify .swiper-pagination-bullets .swiper-pagination-bullet-active { border: 3px solid #00aadc; background-color: #fff; } #certify .swiper-button-prev { left: -80px; top: 40%; outline: 0; width: 60px; height: 100px; background: url(../img/ple.png) no-repeat center rgba(40, 97, 149, .5); cursor: pointer; } #certify .swiper-button-prev:hover { background: url(../img/ple.png) no-repeat center #398bd5; } #certify .swiper-button-next { right: -80px; top: 40%; outline: 0; width: 60px; height: 100px; background: url(../img/pri.png) no-repeat center rgba(40, 97, 149, .5); cursor: pointer; } #certify .swiper-button-next:hover { background: url(../img/pri.png) no-repeat center #398bd5; } @media screen and (max-width: 1200px){ #certify { width: 100%; } } @media screen and (max-width: 768px){ .i_box1_list #certify .swiper-slide { width: 298px; opacity: 0.8; } #certify .swiper-container { padding-bottom: 30px; } } @media screen and (max-width: 450px){ .i_box1_list #certify .swiper-slide { width: 100%; opacity: 0.8; } .i_box1_list #certify .swiper-slide img { display: none; } .i_box1_list #certify .swiper-slide-active img { display: block; } #certify .swiper-button-prev { width: 30px; height: 50px; left: 5px; background-size: 50%; } #certify .swiper-button-next { width: 30px; height: 50px; right: 5px; background-size: 50%; } #certify { padding: 0 50px; } }