index.css 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495
  1. @charset "UTF-8";
  2. /*主色调*/
  3. /*单行省略号*/
  4. /*多行省略号*/
  5. /**清除浮动**/
  6. /**fit img**/
  7. .banner-video {
  8. width: 100%;
  9. }
  10. .banner-video video {
  11. width: 100%;
  12. height: auto;
  13. }
  14. .banner-a,
  15. .banner-img {
  16. width: 100%;
  17. display: block;
  18. }
  19. .img-banner .swiper-pagination {
  20. bottom: 40px;
  21. }
  22. .img-banner .swiper-pagination .swiper-pagination-bullet {
  23. width: 24px;
  24. height: 24px;
  25. margin: 0 10px;
  26. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  27. opacity: 1;
  28. display: -webkit-inline-box;
  29. display: inline-flex;
  30. -webkit-box-align: center;
  31. align-items: center;
  32. -webkit-box-pack: center;
  33. justify-content: center;
  34. background-color: transparent;
  35. }
  36. .img-banner .swiper-pagination .swiper-pagination-bullet::after {
  37. content: "";
  38. width: 8px;
  39. height: 8px;
  40. border-radius: 50%;
  41. background-color: #fff;
  42. }
  43. .img-banner .swiper-pagination-bullet-active {
  44. position: relative;
  45. }
  46. .img-banner .swiper-pagination-bullet-active::before {
  47. content: "";
  48. width: 100%;
  49. height: 100%;
  50. border-radius: 50%;
  51. border: 1px solid #fff;
  52. position: absolute;
  53. top: -0.5px;
  54. left: -0.5px;
  55. z-index: 1;
  56. }
  57. .img-banner .swiper-button-prev,
  58. .img-banner .swiper-button-next {
  59. width: 60px;
  60. height: 160px;
  61. background-color: #000000;
  62. background-color: rgba(0, 0, 0, 0.5);
  63. border-radius: 12px;
  64. -webkit-transform: translate(0, -50%);
  65. transform: translate(0, -50%);
  66. }
  67. .img-banner .swiper-button-prev::after,
  68. .img-banner .swiper-button-next::after {
  69. content: "";
  70. display: none;
  71. }
  72. .img-banner .swiper-button-prev::before,
  73. .img-banner .swiper-button-next::before {
  74. content: "";
  75. width: 14px;
  76. height: 28px;
  77. background: url(/assets/images/banner-arrow.svg) no-repeat center;
  78. background-size: contain;
  79. }
  80. .img-banner .swiper-button-prev {
  81. left: 60px;
  82. }
  83. .img-banner .swiper-button-next {
  84. right: 60px;
  85. }
  86. .img-banner .swiper-button-next::before {
  87. -webkit-transform: rotate(180deg);
  88. transform: rotate(180deg);
  89. }
  90. .department {
  91. padding-top: 60px;
  92. }
  93. .department .department-list {
  94. display: -webkit-box;
  95. display: flex;
  96. -webkit-box-pack: justify;
  97. justify-content: space-between;
  98. }
  99. .department .department-item {
  100. text-align: center;
  101. padding: 20px;
  102. -webkit-transition: all 0.3s;
  103. transition: all 0.3s;
  104. }
  105. .department .department-item:hover {
  106. box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
  107. }
  108. .department .department-item:hover .department-text {
  109. font-weight: 600;
  110. }
  111. .department .department-img {
  112. width: 140px;
  113. height: 140px;
  114. }
  115. .department .department-text {
  116. margin-top: 24px;
  117. color: #3A4B99;
  118. font-size: 20;
  119. font-weight: 500;
  120. }
  121. .summary {
  122. margin-top: 100px;
  123. }
  124. .summary .summary-warp {
  125. position: relative;
  126. }
  127. .summary .summary-img {
  128. width: 740px;
  129. height: 660px;
  130. }
  131. .summary .summary-img img {
  132. width: 100%;
  133. height: 100%;
  134. -o-object-fit: cover;
  135. object-fit: cover;
  136. }
  137. .summary .summary-main {
  138. box-sizing: border-box;
  139. width: 636px;
  140. padding: 55px 68px;
  141. box-shadow: 0 12px 47px rgba(63, 63, 75, 0.11);
  142. position: absolute;
  143. right: 0;
  144. top: 50%;
  145. -webkit-transform: translate(0, -50%);
  146. transform: translate(0, -50%);
  147. z-index: 1;
  148. background-color: #fff;
  149. }
  150. .summary .symbol {
  151. width: 43px;
  152. height: auto;
  153. }
  154. .summary .content {
  155. margin-top: 30px;
  156. font-size: 16px;
  157. line-height: 28px;
  158. color: #3A4B99;
  159. max-height: 252px;
  160. white-space: pre-line;
  161. overflow: hidden;
  162. text-overflow: ellipsis;
  163. display: -webkit-box;
  164. -webkit-box-orient: vertical;
  165. -webkit-line-clamp: 9;
  166. }
  167. .summary .bottom {
  168. margin-top: 22px;
  169. display: -webkit-box;
  170. display: flex;
  171. -webkit-box-pack: justify;
  172. justify-content: space-between;
  173. }
  174. .summary .bottom .logo {
  175. height: 40px;
  176. padding-top: 30px;
  177. }
  178. .summary .bottom .logo img {
  179. height: 40px;
  180. width: auto;
  181. }
  182. .index-team {
  183. margin-top: 120px;
  184. padding-bottom: 120px;
  185. }
  186. .info-consult {
  187. height: 977px;
  188. background: url(/assets/images/info-consult.jpg) no-repeat center;
  189. background-size: cover;
  190. box-sizing: border-box;
  191. padding: 120px 0;
  192. }
  193. .info-consult .info-consult-wp {
  194. padding: 80px;
  195. background-color: #fff;
  196. box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
  197. display: -webkit-box;
  198. display: flex;
  199. -webkit-box-pack: justify;
  200. justify-content: space-between;
  201. -webkit-box-align: center;
  202. align-items: center;
  203. box-sizing: border-box;
  204. }
  205. .info-consult .info {
  206. width: 520px;
  207. height: 580px;
  208. background-color: #0767f6;
  209. background-color: rgba(7, 103, 246, 0.85);
  210. color: #fff;
  211. box-sizing: border-box;
  212. padding: 55px 66px;
  213. background: url(/assets/images/info-consult-info.jpg) no-repeat center;
  214. background-size: cover;
  215. }
  216. .info-consult .info .index-block-title {
  217. color: #fff;
  218. display: -webkit-box;
  219. display: flex;
  220. -webkit-box-orient: vertical;
  221. -webkit-box-direction: normal;
  222. flex-direction: column;
  223. -webkit-box-align: start;
  224. align-items: flex-start;
  225. gap: 3px;
  226. padding-bottom: 33px;
  227. }
  228. .info-consult .info .list {
  229. margin-top: 33px;
  230. }
  231. .info-consult .info .item {
  232. font-size: 16px;
  233. line-height: 34px;
  234. overflow: hidden;
  235. text-overflow: ellipsis;
  236. white-space: nowrap;
  237. word-wrap: normal;
  238. -webkit-box-align: center;
  239. align-items: center;
  240. -webkit-transition: all 0.3s;
  241. transition: all 0.3s;
  242. }
  243. .info-consult .info .item:hover {
  244. -webkit-transform: translate(3px, 0);
  245. transform: translate(3px, 0);
  246. text-decoration: underline;
  247. }
  248. .info-consult .info .item::before {
  249. content: "";
  250. display: inline-block;
  251. width: 6px;
  252. height: 6px;
  253. border-radius: 50%;
  254. background-color: #fff;
  255. margin: 0 10px;
  256. }
  257. .info-consult .info .item ~ .item {
  258. margin-top: 10px;
  259. }
  260. .info-consult .info .first-item {
  261. margin-bottom: 33px;
  262. font-size: 24px;
  263. line-height: 34px;
  264. overflow: hidden;
  265. text-overflow: ellipsis;
  266. white-space: nowrap;
  267. word-wrap: normal;
  268. }
  269. .info-consult .info .first-item::before {
  270. display: none;
  271. }
  272. .info-consult .consult {
  273. width: 535px;
  274. }
  275. .info-consult .consult .index-block-title {
  276. white-space: nowrap;
  277. }
  278. .info-consult .consult .desc {
  279. margin-top: 12px;
  280. font-size: 14px;
  281. line-height: 24px;
  282. color: #595757;
  283. }
  284. .info-consult .consult .form {
  285. display: -webkit-box;
  286. display: flex;
  287. flex-wrap: wrap;
  288. margin-top: 40px;
  289. -webkit-box-pack: justify;
  290. justify-content: space-between;
  291. }
  292. .info-consult .consult .item {
  293. width: calc((100% - 40px) / 2);
  294. -webkit-box-pack: justify;
  295. justify-content: space-between;
  296. padding-bottom: 35px;
  297. }
  298. .info-consult .consult .name {
  299. color: #3A4B99;
  300. font-size: 20px;
  301. line-height: 28px;
  302. font-weight: 500;
  303. }
  304. .info-consult .consult .item-input {
  305. margin-top: 10px;
  306. background-color: #edf2f6;
  307. width: 100%;
  308. height: 60px;
  309. box-sizing: border-box;
  310. padding: 20px;
  311. font-size: 16px;
  312. line-height: 22px;
  313. }
  314. .info-consult .consult .form-btn {
  315. width: 100%;
  316. margin-top: 45px;
  317. font-size: 20px;
  318. font-weight: 500;
  319. }
  320. .news {
  321. margin-top: 120px;
  322. }
  323. .news .news-head {
  324. display: -webkit-box;
  325. display: flex;
  326. -webkit-box-pack: justify;
  327. justify-content: space-between;
  328. -webkit-box-align: center;
  329. align-items: center;
  330. }
  331. .news .news-main {
  332. margin-top: 40px;
  333. display: -webkit-box;
  334. display: flex;
  335. -webkit-box-pack: justify;
  336. justify-content: space-between;
  337. }
  338. .news .news-item {
  339. width: 620px;
  340. box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
  341. }
  342. .news .cover {
  343. width: 100%;
  344. height: 280px;
  345. display: block;
  346. overflow: hidden;
  347. }
  348. .news .cover img {
  349. width: 100%;
  350. height: 100%;
  351. -o-object-fit: cover;
  352. object-fit: cover;
  353. -webkit-transition: all 0.3s;
  354. transition: all 0.3s;
  355. }
  356. .news .cover:hover img {
  357. -webkit-transform: scale(1.05);
  358. transform: scale(1.05);
  359. }
  360. .news .content {
  361. padding: 24px;
  362. }
  363. .news .title {
  364. font-size: 24px;
  365. font-weight: 600;
  366. line-height: 34px;
  367. color: #3A4B99;
  368. overflow: hidden;
  369. text-overflow: ellipsis;
  370. white-space: nowrap;
  371. word-wrap: normal;
  372. }
  373. .news .desc {
  374. font-size: 16px;
  375. line-height: 28px;
  376. color: #3A4B99;
  377. margin-top: 12px;
  378. max-height: 56px;
  379. overflow: hidden;
  380. text-overflow: ellipsis;
  381. display: -webkit-box;
  382. -webkit-box-orient: vertical;
  383. -webkit-line-clamp: 2;
  384. }
  385. .news .link {
  386. font-size: 16px;
  387. line-height: 28px;
  388. color: #074af6;
  389. display: -webkit-inline-box;
  390. display: inline-flex;
  391. -webkit-box-align: center;
  392. align-items: center;
  393. gap: 10px;
  394. margin-top: 24px;
  395. -webkit-transition: all 0.3s;
  396. transition: all 0.3s;
  397. }
  398. .news .link .icon {
  399. width: 20px;
  400. height: auto;
  401. }
  402. .news .link:hover {
  403. text-decoration: underline;
  404. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
  405. opacity: 0.85;
  406. gap: 15px;
  407. }
  408. .environment {
  409. margin-top: 120px;
  410. padding-bottom: 60px;
  411. }
  412. .environment .img-list {
  413. display: -webkit-box;
  414. display: flex;
  415. -webkit-box-pack: justify;
  416. justify-content: space-between;
  417. flex-wrap: wrap;
  418. }
  419. .environment .img-item {
  420. width: 400px;
  421. height: 300px;
  422. }
  423. .environment .img-item:nth-of-type(n + 4) {
  424. margin-top: 50px;
  425. }
  426. /*# sourceMappingURL=maps/index.css.map */