index_cn.css 5.4 KB

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