d18bc92b46f4641bb60c03160567bac1489876c1.svn-base 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. @charset "utf-8";
  2. /* CSS Document */
  3. #certify {
  4. position: relative;
  5. max-width: 1170px;
  6. margin: 0 auto;
  7. width: 100%;
  8. }
  9. #certify .swiper-container {
  10. padding-bottom: 60px;
  11. }
  12. #certify .swiper-slide {
  13. width: 700px;
  14. background: #fff;
  15. box-shadow: 0 8px 30px #ddd;
  16. opacity: .5;
  17. }
  18. .mengban {
  19. background: #000;
  20. position: fixed;
  21. top: 0px;
  22. z-index: 100;
  23. height: 100%;
  24. width: 100%;
  25. display: none;
  26. opacity: 0.2;
  27. }
  28. #certify .swiper-slide .mengban {
  29. display: block;
  30. }
  31. #certify .swiper-slide-active .mengban{
  32. display: none;
  33. }
  34. #certify .swiper-slide img{
  35. display:block;
  36. width: 100%;
  37. }
  38. #certify .swiper-slide p {
  39. font-size:14px;
  40. width: 100%;
  41. background: #243b8a;
  42. height: 2.8em;
  43. color: #fff;
  44. line-height: 2.8em;
  45. text-align: center;
  46. display: block;
  47. }
  48. #certify .swiper-pagination {
  49. width: 100%;
  50. bottom: 20px;
  51. display: none;
  52. }
  53. #certify .swiper-pagination-bullets .swiper-pagination-bullet {
  54. margin: 0 5px;
  55. border: 3px solid #fff;
  56. background-color: #d5d5d5;
  57. width: 10px;
  58. height: 10px;
  59. opacity: 1;
  60. }
  61. #certify .swiper-pagination-bullets .swiper-pagination-bullet-active {
  62. border: 3px solid #00aadc;
  63. background-color: #fff;
  64. }
  65. #certify .swiper-button-prev {
  66. left: -80px;
  67. top: 40%;
  68. outline: 0;
  69. width: 60px;
  70. height: 100px;
  71. background: url(../img/ple.png) no-repeat center rgba(40, 97, 149, .5);
  72. cursor: pointer;
  73. }
  74. #certify .swiper-button-prev:hover {
  75. background: url(../img/ple.png) no-repeat center #398bd5;
  76. }
  77. #certify .swiper-button-next {
  78. right: -80px;
  79. top: 40%;
  80. outline: 0;
  81. width: 60px;
  82. height: 100px;
  83. background: url(../img/pri.png) no-repeat center rgba(40, 97, 149, .5);
  84. cursor: pointer;
  85. }
  86. #certify .swiper-button-next:hover {
  87. background: url(../img/pri.png) no-repeat center #398bd5;
  88. }
  89. @media screen and (max-width: 1200px){
  90. #certify {
  91. width: 100%;
  92. }
  93. }
  94. @media screen and (max-width: 768px){
  95. .i_box1_list #certify .swiper-slide {
  96. width: 298px;
  97. opacity: 0.8;
  98. }
  99. #certify .swiper-container {
  100. padding-bottom: 30px;
  101. }
  102. }
  103. @media screen and (max-width: 450px){
  104. .i_box1_list #certify .swiper-slide {
  105. width: 100%;
  106. opacity: 0.8;
  107. }
  108. .i_box1_list #certify .swiper-slide img {
  109. display: none;
  110. }
  111. .i_box1_list #certify .swiper-slide-active img {
  112. display: block;
  113. }
  114. #certify .swiper-button-prev {
  115. width: 30px;
  116. height: 50px;
  117. left: 5px;
  118. background-size: 50%;
  119. }
  120. #certify .swiper-button-next {
  121. width: 30px;
  122. height: 50px;
  123. right: 5px;
  124. background-size: 50%;
  125. }
  126. #certify {
  127. padding: 0 50px;
  128. }
  129. }