index_cn.css 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
  1. @charset "utf-8";
  2. .hidden {
  3. display: none
  4. }
  5. a:hover,
  6. a:active {
  7. text-decoration: none
  8. }
  9. .service_list {
  10. padding: 0px 0
  11. }
  12. .service_list.bgcolor {
  13. background-color: #ffffff;
  14. background-color: #f5f8f6
  15. }
  16. .service_list.bgimg {
  17. background: url() no-repeat top center;
  18. background-size: cover
  19. }
  20. .service_list ul {
  21. padding: 0;
  22. list-style: none
  23. }
  24. .service_list .btn-more {
  25. padding: 5px 15px;
  26. border: 1px solid;
  27. color: #21cd97;
  28. background: #21cd97;
  29. background: #ffffff;
  30. display: block;
  31. width: 110px;
  32. text-align: center;
  33. -webkit-transition: all .5s ease-out;
  34. transition: all .5s ease-out;
  35. width: 100px;
  36. border-radius: 16px;
  37. border-color: #21cd97;
  38. border-color: #ffffff
  39. }
  40. .service_list .btn-more:hover {
  41. opacity: .58;
  42. padding-left: 15px;
  43. text-decoration: none
  44. }
  45. .service_list .service-list {
  46. padding: 0px;
  47. overflow: hidden
  48. }
  49. .service_list .service-list .nav-item:nth-child(1) a {
  50. border-top-left-radius: px
  51. }
  52. .service_list .service-list .nav-item:last-child a {
  53. border-bottom-left-radius: px
  54. }
  55. .service_list .head {
  56. margin-bottom: 36px
  57. }
  58. .service_list .head h2 {
  59. margin-top: 0px;
  60. color: #212121;
  61. color: ;
  62. font-size: 25px;
  63. text-align: center
  64. }
  65. .service_list .head p {
  66. text-align: center;
  67. color: #666666;
  68. color:
  69. }
  70. .service_list .indeximg {
  71. max-width: 80%
  72. }
  73. .service_list .service-list .nav-tabs-div {
  74. overflow: hidden;
  75. background-color: #ffffff;
  76. background-color: ;
  77. border-radius: px
  78. }
  79. .service_list .service-list .server-tab {
  80. display: inline-block;
  81. background-color: #ffffff;
  82. border-radius: 4px;
  83. margin: 0
  84. }
  85. .service_list .service-list .server-tab .nav-item {
  86. overflow: hidden;
  87. }
  88. .service_list .service-list .server-tab .nav-item p {
  89. margin: 0;
  90. float: left;
  91. }
  92. .service_list .service-list .server-tab .nav-item p i {
  93. font-size: 45px
  94. }
  95. .service_list .server-tab li {
  96. text-align: center;
  97. padding: 40px 0 40px 0;
  98. color: #666666;
  99. color: ;
  100. -webkit-transition: all .2s;
  101. transition: all .2s;
  102. font-size: 14px
  103. }
  104. .service_list .server-tab .cur {
  105. background: #004080;
  106. background: #004080;
  107. color: #212121;
  108. color: #ffffff
  109. }
  110. .service_list .server-tab li.cur p,
  111. .service_list .server-tab li.cur span {
  112. color: #ffffff
  113. }
  114. .service_list .server-tab li span {
  115. display: block
  116. }
  117. .service_list .server-tab li:last-child {
  118. border-bottom-left-radius: 4px;
  119. border-bottom-right-radius: 4px
  120. }
  121. .service_list .server-wrapper {
  122. vertical-align: top;
  123. padding-right: 0;
  124. padding-left: 0
  125. }
  126. .service_list .server-con-item {
  127. width: 100%;
  128. height: 100%;
  129. background-size: cover;
  130. background-repeat: no-repeat;
  131. background-position: top;
  132. text-align: left;
  133. padding: 80px 60px;
  134. background-color: #21cd97
  135. }
  136. .service_list .service-list .server-tab .nav-item div p {
  137. font-size: 20px;
  138. float: left;
  139. }
  140. .service_list .server-tab .nav-item span {
  141. float: left;
  142. }
  143. .service_list .server-tab .nav-item span {
  144. font-size: 12px;
  145. color: #666666;
  146. float: left;
  147. }
  148. .service_list .server-con-item-wrapper-con {}
  149. .service_list .server-con-item-title {
  150. color: #212121;
  151. color: #ffffff;
  152. font-size: 26px
  153. }
  154. .service_list .server-con-item-des {
  155. width: 60px;
  156. height: 3px;
  157. background-color: #ffffff;
  158. background-color: ;
  159. margin-top: 10px
  160. }
  161. .service_list .server-con-item-text {
  162. color: #666666;
  163. color: #ffffff;
  164. font-size: 14px;
  165. margin-top: 20px;
  166. margin-bottom: 30px;
  167. width: 62%;
  168. line-height: 2
  169. }
  170. .service_list .server-con-item-product {
  171. margin-top: 43px
  172. }
  173. .service_list .server-con-product-item {
  174. display: inline-block;
  175. vertical-align: top;
  176. text-align: center;
  177. position: relative;
  178. overflow: hidden
  179. }
  180. .service_list .server-con-product-item p {
  181. overflow: hidden;
  182. white-space: nowrap;
  183. text-overflow: ellipsis;
  184. color: #212121;
  185. color: #ffffff
  186. }
  187. .service_list .server-con-product-item img {
  188. max-width: 100%
  189. }
  190. @-webkit-keyframes fadeInUp {
  191. 0% {
  192. opacity: 0;
  193. filter: alpha(opacity=0);
  194. -webkit-transform: translate3d(0, 10%, 0);
  195. transform: translate3d(0, 10%, 0)
  196. }
  197. to {
  198. opacity: 1;
  199. filter: alpha(opacity=100);
  200. -webkit-transform: none;
  201. transform: none
  202. }
  203. }
  204. .service_list .fadeInUp {
  205. -webkit-animation-name: fadeInUp;
  206. animation-name: fadeInUp
  207. }
  208. .service_list .animated {
  209. -webkit-animation-duration: 1s;
  210. animation-duration: 1s;
  211. -webkit-animation-fill-mode: both;
  212. animation-fill-mode: both
  213. }
  214. .service_list .slick-dots {
  215. bottom: 0
  216. }
  217. .service_list .slick-dots li button:before {
  218. color: #000000
  219. }
  220. .service_list .slick-dots li.slick-active button:before {
  221. color: #000000
  222. }
  223. @media (max-width:991px) {
  224. .service_list .service-list .severs-top {
  225. display: none
  226. }
  227. .service_list .server-wrapper {
  228. padding: 0
  229. }
  230. }
  231. @media (max-width:767px) {
  232. .service_list .server-con-item-text {
  233. margin-bottom: 25px
  234. }
  235. .service_list .server-con-item-product {
  236. margin-top: 25px
  237. }
  238. .service_list .server-con-item-text {
  239. width: 100%
  240. }
  241. }
  242. @media (max-width:1024px) and (min-width:768px) {
  243. .service_list {
  244. padding: 0px 0
  245. }
  246. }
  247. @media (max-width:767px) {
  248. .service_list {
  249. padding: 0px 0
  250. }
  251. }