index_cn.css 5.3 KB

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