index.css 29 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798
  1. /* 首页主体内容样式 */
  2. .main {
  3. background: #ffffff;
  4. }
  5. /* 所有主体内容标题 */
  6. .main h2.item-title {
  7. text-align: center;
  8. font-size: 32px;
  9. line-height: 56px;
  10. }
  11. .main h2>a {
  12. color: #000000;
  13. }
  14. /* 所有主体内容描述 */
  15. .main .item-dec {
  16. text-align: center;
  17. font-size: 22px;
  18. margin-bottom: 32px;
  19. color: #AEAEAE;
  20. }
  21. .main>div {
  22. padding: 35px 0px;
  23. }
  24. /* 轮播图 */
  25. .swiper-slide>img {
  26. width: 100%;
  27. }
  28. #swiper1 .swiper-button-next:after,
  29. .swiper-button-prev:after {
  30. font-size: 69px !important;
  31. }
  32. #swiper1 .swiper-button-prev,
  33. .swiper-container-rtl .swiper-button-next {
  34. color: #ffffff !important;
  35. }
  36. #swiper1 .swiper-button-next,
  37. .swiper-container-rtl .swiper-button-prev {
  38. color: #ffffff !important;
  39. }
  40. /* 视频按钮 */
  41. .video-button {
  42. position: absolute;
  43. top: 67%;
  44. left: 46%;
  45. background: transparent;
  46. padding: 3px 20px;
  47. border-radius: 5px;
  48. line-height: 44px;
  49. font-size: 22px;
  50. border: 3px solid #ffffff;
  51. color: #ffffff;
  52. cursor: pointer;
  53. z-index: 99;
  54. -webkit-transition: all .5;
  55. -moz-transition: all .5;
  56. -o-transition: all .5;
  57. transition: all .5s;
  58. }
  59. .video-button:hover {
  60. -webkit-animation-name: bounceln;
  61. -o-animation-name: bounceln;
  62. animation-name: bounceln;
  63. -webkit-animation-duration: 1s;
  64. -o-animation-duration: 1s;
  65. animation-duration: 1s;
  66. -webkit-animation-timing-function: ease-out;
  67. -o-animation-timing-function: ease-out;
  68. animation-timing-function: ease-out;
  69. -webkit-animation-fill-mode: both;
  70. -o-animation-fill-mode: both;
  71. animation-fill-mode: both;
  72. }
  73. /* 轮播图下方展示栏 */
  74. .tp-banner-dom {
  75. position: absolute;
  76. bottom: -35px;
  77. left: 50%;
  78. transform: translateX(-50%);
  79. width: 1210px;
  80. height: 122px;
  81. border-radius: 5px;
  82. background: #ffffff;
  83. box-shadow: 7px 12.1px 43px 0 rgba(0, 0, 0, .1);
  84. z-index: 99;
  85. }
  86. .tp-banner-item {
  87. width: 25%;
  88. border-radius: 5px;
  89. height: 100%;
  90. float: left;
  91. padding: 22px 0px;
  92. padding-left: 42px;
  93. }
  94. .tp-banner-item:hover {
  95. background: #1296DB;
  96. box-shadow: 0px 4px 15px 0 #1296dbbd;
  97. }
  98. .tp-banner-item>div>span {
  99. font-size: 25px;
  100. color: #000000;
  101. }
  102. .tp-banner-item>div>p {
  103. margin-top: 14px;
  104. color: #666666;
  105. }
  106. .tp-banner-item>div {
  107. float: left;
  108. }
  109. .tp-banner-item>em {
  110. display: inline-block;
  111. float: left;
  112. font-size: 52px;
  113. margin-right: 20px;
  114. color: #1296DB;
  115. }
  116. .tp-banner-item:hover>div>span,
  117. .tp-banner-item:hover>em {
  118. color: #ffffff;
  119. }
  120. .tp-banner-item:hover>div>p {
  121. color: #ffffff;
  122. }
  123. /* 产品服务 */
  124. .serve-list {
  125. width: 100%;
  126. }
  127. .serve-list::after {
  128. content: "";
  129. display: block;
  130. clear: both;
  131. }
  132. .serve-list li {
  133. float: left;
  134. width: 287px;
  135. height: 270px;
  136. margin-bottom: 30px;
  137. padding: 20px;
  138. background: #EFEFEF;
  139. border-radius: 5px;
  140. padding-top: 40px;
  141. text-align: center;
  142. position: relative;
  143. -webkit-transition: all .5;
  144. -moz-transition: all .5;
  145. -o-transition: all .5;
  146. transition: all .5s;
  147. }
  148. .serve-list a:not(:first-child) li {
  149. margin-left: 32px;
  150. }
  151. .serve-list a:nth-child(5) li {
  152. margin: 0px;
  153. }
  154. .serve-list li>div {
  155. width: 100%;
  156. }
  157. .p-fontsiz {
  158. font-size: 50px;
  159. color: #1296D8;
  160. font-weight: bold;
  161. position: relative;
  162. top: 0;
  163. -webkit-transition: all .5;
  164. -moz-transition: all .5;
  165. -o-transition: all .5;
  166. transition: all .5s;
  167. }
  168. .serve-list li:hover .p-fontsiz,
  169. .serve-list li.active .p-fontsiz {
  170. top: -26px;
  171. color: #ffffff;
  172. }
  173. .serve_text {
  174. position: relative;
  175. top: 0;
  176. -moz-transition: all .36s ease;
  177. -o-transition: all .36s ease;
  178. transition: all .36s ease;
  179. webkit-transition: all .36s ease;
  180. }
  181. .serve_text ul::after {
  182. content: "";
  183. display: block;
  184. clear: both;
  185. }
  186. .serve_text li {
  187. float: left;
  188. width: 50%;
  189. color: #999999;
  190. white-space: nowrap;
  191. text-overflow: ellipsis;
  192. }
  193. .serve_text li:nth-child(2n) {
  194. text-align: right;
  195. }
  196. .serve_text li:nth-child(2n-1) {
  197. text-align: left;
  198. }
  199. .serve-list a {
  200. display: inline-block;
  201. float: left;
  202. }
  203. .serve-list .serve-button {
  204. width: 100px;
  205. height: 30px;
  206. background: #ffffff;
  207. border-radius: 7px;
  208. line-height: 30px;
  209. margin: 20px auto;
  210. color: black;
  211. opacity: 0;
  212. position: relative;
  213. top: 0px;
  214. -moz-transition: all .36s ease;
  215. -o-transition: all .36s ease;
  216. transition: all .36s ease;
  217. webkit-transition: all .36s ease;
  218. }
  219. .serve-list .serve_icon {
  220. width: 69px;
  221. height: 60px;
  222. margin: 0 auto;
  223. transition: 0.36s;
  224. position: relative;
  225. top: 0;
  226. }
  227. .serve-list .serve_text>p {
  228. font-size: 18px;
  229. color: #343434;
  230. margin-top: 18px;
  231. margin-bottom: 15px;
  232. }
  233. .serve-list .serve_text>span {
  234. font-size: 14px;
  235. width: 100%;
  236. color: #999999;
  237. margin-top: 3px;
  238. display: inline-block;
  239. overflow: hidden;
  240. display: -webkit-box;
  241. text-overflow: ellipsis;
  242. -webkit-box-orient: vertical;
  243. -webkit-line-clamp: 3
  244. }
  245. .serve-list li:hover {
  246. background: #1296DB;
  247. }
  248. .serve-list li:hover .serve_text {
  249. top: -36px;
  250. }
  251. .serve-list li:hover .serve_text>p {
  252. color: #ffffff;
  253. }
  254. .serve-list li:hover .serve_text li {
  255. color: #ffffff;
  256. }
  257. .serve-list li.active .serve_text li {
  258. color: #ffffff;
  259. }
  260. .serve-list li:hover .serve_text>span {
  261. color: #ffffff;
  262. margin-top: 0;
  263. }
  264. .serve-list li:hover .serve_icon {
  265. top: -26px;
  266. }
  267. .serve-list li:hover .serve-button {
  268. opacity: 1;
  269. top: -20px;
  270. }
  271. .serve-list li.active {
  272. background: #1296DB;
  273. }
  274. .serve-list li.active .serve_text {
  275. top: -36px;
  276. }
  277. .serve-list li.active .serve_text>p {
  278. color: #ffffff;
  279. }
  280. .serve-list li.active .serve_text>span {
  281. color: #ffffff;
  282. margin-top: 0;
  283. }
  284. .serve-list li.active .serve_icon {
  285. top: -26px;
  286. }
  287. .serve-list li.active .serve-button {
  288. opacity: 1;
  289. top: -20px;
  290. }
  291. /* 产品服务 end*/
  292. /* 关于我们 */
  293. .about {
  294. width: 100%;
  295. background: #f9f9fb;
  296. }
  297. .about_left {
  298. height: 684px;
  299. background: url(../images/about/chinamap.png) no-repeat;
  300. background-size: contain;
  301. background-position-x: 102px;
  302. }
  303. .about-dot {
  304. position: absolute;
  305. width: 9px;
  306. height: 9px;
  307. }
  308. .aboutinfo {
  309. position: absolute;
  310. top: -45px;
  311. left: 0;
  312. width: 248px;
  313. height: 197px;
  314. font-size: 46px;
  315. color: #d9dbdc;
  316. }
  317. .aboutinfo>.line {
  318. position: absolute;
  319. bottom: 0;
  320. width: 41%;
  321. height: 7px;
  322. background: #d9dbdc;
  323. }
  324. /* 福建-小圆点的位置 */
  325. .about_left>.one {
  326. top: 424px;
  327. left: 646px;
  328. border-radius: 6px;
  329. }
  330. .one.active>.bubble {
  331. width: 274px;
  332. }
  333. /* 长沙-小圆点的位置 */
  334. .about_left>.two {
  335. /* width: 30px;
  336. height: 30px; */
  337. top: 397px;
  338. left: 548px;
  339. border-radius: 6px;
  340. /* background-size: cover; */
  341. }
  342. .two.active>.bubble {
  343. top: -91px;
  344. left: -370px;
  345. width: 352px;
  346. }
  347. /* 北京-小圆点的位置 */
  348. .about_left>.three {
  349. top: 177px;
  350. left: 613px;
  351. border-radius: 6px;
  352. }
  353. .three.active>.bubble {
  354. top: -99px;
  355. right: -233px;
  356. width: 271px;
  357. }
  358. /* 武汉-小圆点的位置 */
  359. .about_left>.four {
  360. top: 356px;
  361. left: 572px;
  362. border-radius: 6px;
  363. }
  364. .four.active>.bubble {
  365. top: 20px;
  366. right: 20px;
  367. width: 229px;
  368. }
  369. /* 广西-小圆点的位置 */
  370. .about_left>.five {
  371. top: 451px;
  372. left: 531px;
  373. border-radius: 6px;
  374. }
  375. .five.active>.bubble {
  376. top: -88px;
  377. right: 20px;
  378. width: 293px;
  379. }
  380. /* 济南-小圆点的位置 */
  381. .about_left>.six {
  382. top: 260px;
  383. left: 630px;
  384. border-radius: 6px;
  385. }
  386. .six.active>.bubble {
  387. top: -104px;
  388. right: -243px;
  389. width: 266px;
  390. }
  391. /* 广州-小圆点的位置 */
  392. .about_left>.seven {
  393. top: 479px;
  394. left: 595px;
  395. border-radius: 6px;
  396. }
  397. .seven.active>.bubble {
  398. top: -160px;
  399. right: -193px;
  400. width: 264px;
  401. }
  402. /* 郑州-小圆点的位置 */
  403. .about_left>.eight {
  404. top: 301px;
  405. left: 589px;
  406. border-radius: 6px;
  407. }
  408. .eight.active>.bubble {
  409. top: -100px;
  410. left: -50px;
  411. width: 264px;
  412. }
  413. /* 合肥-小圆点的位置 */
  414. .about_left>.nine {
  415. top: 341px;
  416. left: 629px;
  417. border-radius: 6px;
  418. }
  419. /* 昆明-小圆点的位置 */
  420. .about_left>.ten {
  421. top: 437px;
  422. left: 441px;
  423. border-radius: 6px;
  424. }
  425. .ten.active>.bubble {
  426. top: -105px;
  427. right: 7px;
  428. width: 236px;
  429. }
  430. /* 成都-小圆点的位置 */
  431. .about_left>.eleven {
  432. top: 356px;
  433. left: 457px;
  434. border-radius: 6px;
  435. }
  436. .eleven.active>.bubble {
  437. top: -130px;
  438. right: 10px;
  439. width: 283px;
  440. }
  441. /* 沈阳-小圆点的位置 */
  442. .about_left>.twelve {
  443. top: 164px;
  444. left: 687px;
  445. border-radius: 6px;
  446. }
  447. .twelve.active>.bubble {
  448. top: -95px;
  449. right: 10px;
  450. }
  451. /* 南昌-小圆点的位置 */
  452. .about_left>.thirteen {
  453. top: 396px;
  454. left: 613px;
  455. border-radius: 6px;
  456. }
  457. .thirteen.active>.bubble {
  458. left: -230px;
  459. width: 235px;
  460. }
  461. /* 大连-小圆点的位置 */
  462. .about_left>.fourteen {
  463. top: 191px;
  464. left: 687px;
  465. border-radius: 6px;
  466. }
  467. /* 拉萨-小圆点的位置 */
  468. .about_left>.fifteen {
  469. top: 329px;
  470. left: 260px;
  471. border-radius: 6px;
  472. }
  473. .fifteen.active>.bubble {
  474. top: -96px;
  475. right: 9px;
  476. width: 350px;
  477. }
  478. /* 内蒙古-小圆点的位置 */
  479. .about_left>.sixteen {
  480. top: 218px;
  481. left: 474px;
  482. border-radius: 6px;
  483. }
  484. .sixteen.active>.bubble {
  485. top: -91px;
  486. right: 31px;
  487. width: 244px;
  488. }
  489. /* 石家庄-小圆点的位置 */
  490. .about_left>.seventeen {
  491. top: 218px;
  492. left: 589px;
  493. border-radius: 6px;
  494. }
  495. .seventeen.active>.bubble {
  496. top: -91px;
  497. right: 14px;
  498. width: 294px;
  499. }
  500. /* 长春-小圆点的位置 */
  501. .about_left>.eighteen {
  502. top: 122px;
  503. left: 728px;
  504. border-radius: 6px;
  505. }
  506. .eighteen.active>.bubble {
  507. top: -91px;
  508. right: 34px;
  509. width: 235px;
  510. }
  511. /* 贵州-小圆点的位置 */
  512. .about_left>.nineteen {
  513. top: 397px;
  514. left: 482px;
  515. border-radius: 6px;
  516. }
  517. .nineteen.active>.bubble {
  518. width: 268px;
  519. top: 20px;
  520. right: 20px;
  521. }
  522. /* 新疆-小圆点的位置 */
  523. .about_left>.twenty {
  524. top: 122px;
  525. left: 283px;
  526. border-radius: 6px;
  527. }
  528. .twenty.active>.bubble {
  529. top: -61px;
  530. right: 33px;
  531. width: 258px;
  532. }
  533. /* 宁夏-小圆点的位置 */
  534. .about_left>.twenty-one {
  535. top: 246px;
  536. left: 441px;
  537. border-radius: 6px;
  538. }
  539. .twenty-one.active>.bubble {
  540. top: -91px;
  541. right: 31px;
  542. width: 244px;
  543. }
  544. /* 气泡 */
  545. .bubble>div:nth-child(2),
  546. .bubble>div:nth-child(5),
  547. .bubble>div:nth-child(3),
  548. .bubble>div:nth-child(4),
  549. .bubble>div:nth-child(6),
  550. .bubble>div:nth-child(7) {
  551. display: block;
  552. font-size: 16px;
  553. color: #666666;
  554. margin-top: 10px;
  555. }
  556. .bubble>.z_c {
  557. display: block;
  558. font-size: 16px;
  559. color: #333333;
  560. font-weight: bold;
  561. }
  562. .bubble {
  563. position: absolute;
  564. padding: 16px;
  565. top: -91px;
  566. right: -159px;
  567. width: 229px;
  568. background-color: #fff;
  569. border: 1px solid #dddedf;
  570. border-radius: 5px;
  571. box-shadow: 0 5px 20px rgba(153, 153, 153, .4);
  572. box-sizing: border-box;
  573. z-index: 99;
  574. display: none;
  575. }
  576. /* 小圆点 */
  577. .about-dot {
  578. width: 20px;
  579. height: 20px;
  580. background-size: cover;
  581. }
  582. /* .about_left>.about-dot:before {
  583. position: relative;
  584. z-index: 3;
  585. display: block;
  586. width: 100%;
  587. height: 100%;
  588. border-radius: 50%;
  589. background: #d5a57a;
  590. content: "";
  591. -webkit-transition: all .8s;
  592. -moz-transition: all .8s;
  593. -o-transition: all .8s;
  594. transition: all .8s;
  595. } */
  596. .about_left>.active.about-dot::before {
  597. background: #0058FA;
  598. }
  599. .about-dot.active em {
  600. margin-top: -13px;
  601. margin-left: -13px;
  602. border: 1px solid #bab4f6;
  603. background-color: rgba(0, 77, 240, 0.1);
  604. }
  605. .about-dot em {
  606. position: absolute;
  607. top: 50%;
  608. left: 50%;
  609. box-sizing: border-box;
  610. margin-top: -13px;
  611. margin-left: -12px;
  612. width: 25px;
  613. height: 25px;
  614. border: 1px solid #e4c9b2;
  615. border-radius: 50%;
  616. background-color: rgba(255, 255, 255, .4);
  617. -webkit-transform: scale(.6);
  618. transform: scale(.6);
  619. display: none;
  620. -webkit-animation: dotanimo 4s linear infinite;
  621. -moz-animation: dotanimo 4s linear infinite;
  622. -o-animation: dotanimo 4s linear infinite;
  623. animation: dotanimo 4s linear infinite;
  624. -webkit-animation-timing-function: linear;
  625. -moz-animation-timing-function: linear;
  626. -o-animation-timing-function: linear;
  627. animation-timing-function: linear;
  628. }
  629. .about-dot.active em {
  630. display: inline-block;
  631. }
  632. /* .about-dot.two em {
  633. display: none;
  634. } */
  635. .about_left>.about-dot>.dot-radio1 {
  636. z-index: 0;
  637. border: 1px dashed #e4c9b2;
  638. }
  639. .about-dot>.dot-radio2 {
  640. z-index: 1;
  641. background-color: rgba(255, 255, 255, .3);
  642. -webkit-animation-delay: 2s;
  643. -moz-animation-delay: 2s;
  644. -o-animation-delay: 2s;
  645. animation-delay: 2s;
  646. }
  647. .about-dot>.dot-radio3 {
  648. z-index: 2;
  649. background-color: rgba(255, 255, 255, .3);
  650. -webkit-animation-delay: 3s;
  651. -moz-animation-delay: 3s;
  652. -o-animation-delay: 3s;
  653. animation-delay: 3s;
  654. }
  655. .dot-radio1,
  656. .dot-radio2,
  657. .dot-radio3 {
  658. border: 1px dashed #f6b4b5;
  659. }
  660. /* 小圆点动画 */
  661. @keyframes dotanimo {
  662. 0% {
  663. transform: scale(.6);
  664. -webkit-transform: scale(.6);
  665. opacity: 1;
  666. }
  667. 70% {
  668. transform: scale(1.5);
  669. -webkit-transform: scale(1.5);
  670. opacity: .8;
  671. }
  672. 100% {
  673. transform: scale(2);
  674. -webkit-transform: scale(2);
  675. opacity: 0;
  676. }
  677. }
  678. .about_right {
  679. box-shadow: 7px 12.1px 43px 0 rgba(0, 0, 0, .1);
  680. }
  681. .about_right>.img {
  682. position: relative;
  683. }
  684. .about_right>.img>img {
  685. width: 100%;
  686. height: 200px;
  687. object-fit: cover;
  688. }
  689. .about_right>.img>.videox {
  690. position: absolute;
  691. width: 100%;
  692. height: 100%;
  693. background: #0000008a;
  694. top: 0;
  695. left: 0;
  696. display: none;
  697. }
  698. .about_right>.img:hover>.videox {
  699. display: block;
  700. }
  701. .about_right>.img>.videox>div {
  702. width: 46px;
  703. margin: 88px auto;
  704. cursor: pointer;
  705. }
  706. .about_right>.img>.videox>div img {
  707. width: 100%;
  708. }
  709. .about_right>.text {
  710. padding: 12px 30px;
  711. background: #ffffff;
  712. color: #333333;
  713. }
  714. .about_right>.text>p {
  715. color: #666666;
  716. margin-top: 20px;
  717. line-height: 26px;
  718. }
  719. .map-item {
  720. position: absolute;
  721. display: none;
  722. bottom: 13px;
  723. left: 0;
  724. }
  725. .map-item li {
  726. position: relative;
  727. display: block;
  728. padding: 12px 10px 12px 8px;
  729. line-height: 20px;
  730. }
  731. .map-item li p {
  732. color: rgba(51, 51, 51, .7);
  733. font-size: 17px;
  734. }
  735. .map-item li p>i {
  736. color: #1296DB;
  737. margin-right: 10px;
  738. }
  739. .map-item li h5 {
  740. overflow: hidden;
  741. padding-left: 5px;
  742. height: 18px;
  743. color: #333;
  744. font-size: 16px;
  745. margin: 0;
  746. }
  747. .map-item h5 strong {
  748. display: block;
  749. font-weight: 400;
  750. -webkit-transition: all .8s;
  751. -moz-transition: all .8s;
  752. -o-transition: all .8s;
  753. transition: all .8s;
  754. }
  755. .map-item li:hover h5 strong:first-child {
  756. margin-top: -20px;
  757. }
  758. .map-item li em {
  759. position: absolute;
  760. bottom: -1px;
  761. left: 0;
  762. width: 160px;
  763. height: 1px;
  764. background-color: #eceded;
  765. }
  766. .map-item li .icon-kede {
  767. display: inline-block;
  768. margin-right: 5px;
  769. width: 20px;
  770. height: 20px;
  771. }
  772. .map-item li em:before {
  773. display: block;
  774. margin-left: 0;
  775. width: 10px;
  776. height: 1px;
  777. background-color: #999;
  778. content: "";
  779. -webkit-animation: marginl 2s linear infinite;
  780. -moz-animation: marginl 2s linear infinite;
  781. -ms-animation: marginl 2s linear infinite;
  782. -o-animation: marginl 2s linear infinite;
  783. animation: marginl 2s linear infinite;
  784. }
  785. @keyframes marginl {
  786. 0% {
  787. margin-left: 0;
  788. }
  789. 50% {
  790. margin-left: 50%;
  791. }
  792. 100% {
  793. margin-left: 100%;
  794. }
  795. }
  796. /* 关于我们 end */
  797. /* 资质荣誉 */
  798. .honor-list{
  799. display: flex;
  800. justify-content: center;
  801. }
  802. .honor-list::after {
  803. content: "";
  804. display: block;
  805. clear: both;
  806. }
  807. .honor-box {
  808. width: 194px;
  809. background: #F3F3F3;
  810. height: 212px;
  811. text-align: center;
  812. padding-top: 20px;
  813. float: left;
  814. margin-right: 13px;
  815. position: relative;
  816. top: 0;
  817. transition: all 0.36s;
  818. -webkit-transition: all 0.36s;
  819. -o-transition: all 0.36s;
  820. -moz-transition: all 0.36s;
  821. }
  822. .honor-box:hover {
  823. top: -10px;
  824. box-shadow: 0 3px 10px #C9C9C9;
  825. }
  826. .honor-icon {
  827. width: 52%;
  828. margin: 10px auto;
  829. }
  830. .honor-icon img {
  831. width: 100%;
  832. }
  833. .honor-box div>p {
  834. font-size: 16px;
  835. }
  836. .honor-box div>span {
  837. font-size: 12px;
  838. color: #999999;
  839. }
  840. /* 资质荣誉 end */
  841. /* 服务客户 */
  842. .client {
  843. background: url("../images/kehu.jpg");
  844. background-attachment: fixed;
  845. background-repeat: no-repeat;
  846. background-position: center center;
  847. -webkit-background-size: cover;
  848. -moz-background-size: cover;
  849. -o-background-size: cover;
  850. background-size: cover;
  851. -webkit-backface-visibility: hidden;
  852. backface-visibility: hidden;
  853. }
  854. .client>.container>h2>a {
  855. color: #ffffff;
  856. }
  857. .client-list {
  858. width: 100%;
  859. }
  860. .client-list::after {
  861. content: "";
  862. display: block;
  863. clear: both;
  864. }
  865. #swiper2 {
  866. padding: 20px 0;
  867. }
  868. .client-list>div {
  869. width: 20%;
  870. float: left;
  871. transition: all .5s;
  872. -webkit-transition: all .5s;
  873. /* Safari */
  874. }
  875. .client-list>div>img {
  876. width: 100%;
  877. }
  878. .client-list>div:hover {
  879. position: relative;
  880. box-shadow: -4px 6px 19px 2px rgba(177, 171, 171, 0.38);
  881. transform: scale(1.1);
  882. -ms-transform: scale(1.1);
  883. /* IE 9 */
  884. -moz-transform: scale(1.1);
  885. /* Firefox */
  886. -webkit-transform: scale(1.1);
  887. /* Safari 和 Chrome */
  888. -o-transform: scale(1.1);
  889. }
  890. #swiper2 .swiper-wrapper {
  891. height: 440px;
  892. }
  893. #swiper2 .swiper-pagination-bullet {
  894. width: 64px;
  895. height: 6px;
  896. display: inline-block;
  897. border-radius: 5px;
  898. background: #333333;
  899. opacity: 1;
  900. }
  901. #swiper2 .swiper-pagination-bullet-active {
  902. background: #ffffff;
  903. }
  904. /* 服务客户 end */
  905. /* 新闻 */
  906. .news {
  907. background: #ffffff;
  908. }
  909. .item_p img {
  910. display: none;
  911. }
  912. .news .mainnews {
  913. box-sizing: border-box;
  914. padding: 44px 60px;
  915. width: 520px;
  916. height: 544px;
  917. text-align: center;
  918. background: #f8f8f8;
  919. -webkit-transition: all 0.3s ease;
  920. -o-transition: all 0.3s ease;
  921. transition: all 0.3s ease;
  922. float: left;
  923. }
  924. .newslist-left .text span {
  925. color: inherit;
  926. font-size: 24px;
  927. font-family: inherit;
  928. line-height: 30px;
  929. color: #000000;
  930. }
  931. .newslist-left .text h4 {
  932. margin-top: 8px;
  933. color: #333;
  934. font-size: 18px;
  935. line-height: 30px;
  936. font-weight: 400;
  937. }
  938. .mainnews:hover .descript p {
  939. padding-left: 15px;
  940. }
  941. .text {
  942. text-align: left;
  943. }
  944. .text .descript {
  945. margin-top: 8px;
  946. margin-bottom: 15px;
  947. }
  948. .text .descript p {
  949. overflow: hidden;
  950. color: #7d7d7d;
  951. box-sizing: border-box;
  952. padding-left: 0;
  953. max-height: 52px;
  954. width: 380px;
  955. height: auto;
  956. border-left: 1px solid transparent;
  957. font-size: 13px;
  958. line-height: 26px;
  959. -moz-transition: all .36s ease;
  960. -o-transition: all .36s ease;
  961. transition: all .36s ease;
  962. webkit-transition: all .36s ease;
  963. overflow: hidden;
  964. display: -webkit-box;
  965. text-overflow: ellipsis;
  966. -webkit-box-orient: vertical;
  967. -webkit-line-clamp: 3;
  968. }
  969. .text .descript p img {
  970. display: none;
  971. }
  972. .item_img {
  973. overflow: hidden;
  974. width: 380px;
  975. height: 180px;
  976. }
  977. .item_img img {
  978. width: 100%;
  979. transition: all 0.4s;
  980. }
  981. .mainnews:hover .item_img img {
  982. -webkit-transform: scale(1.08);
  983. -ms-transform: scale(1.08);
  984. transform: scale(1.08);
  985. }
  986. .more_button {
  987. display: block;
  988. width: 140px;
  989. height: 36px;
  990. border-radius: 2px;
  991. margin-top: 55px;
  992. background: #276ace;
  993. background: -moz-linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
  994. background: -webkit-linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
  995. background: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
  996. box-shadow: 0 5px 20px rgba(9, 83, 187, 0.31);
  997. color: #fff;
  998. text-align: center;
  999. line-height: 36px;
  1000. -moz-transition: all .36s ease;
  1001. -o-transition: all .36s ease;
  1002. transition: all .36s ease;
  1003. webkit-transition: all .36s ease;
  1004. }
  1005. .mainnews:hover .more_button {
  1006. margin-top: 35px;
  1007. }
  1008. .newslist-right {
  1009. float: left;
  1010. width: 57%;
  1011. }
  1012. .newslist-right>ul {
  1013. padding-left: 40px;
  1014. }
  1015. .newslist-right>ul>li {
  1016. position: relative;
  1017. border-top: 1px solid #e5e5e5;
  1018. padding: 0px 20px 19px 38px;
  1019. padding-top: 26px;
  1020. }
  1021. .newslist-right>ul>li::after {
  1022. content: "";
  1023. position: absolute;
  1024. bottom: 0;
  1025. left: 0;
  1026. width: 0;
  1027. height: 3px;
  1028. background: #1296D8;
  1029. -moz-transition: all .36s ease;
  1030. -o-transition: all .36s ease;
  1031. transition: all .36s ease;
  1032. webkit-transition: all .36s ease;
  1033. }
  1034. .newslist-right>ul>li:hover::after {
  1035. width: 100%;
  1036. }
  1037. .newslist-right>ul>li h4 {
  1038. color: #000000;
  1039. -moz-transition: all .36s ease;
  1040. -o-transition: all .36s ease;
  1041. transition: all .36s ease;
  1042. webkit-transition: all .36s ease;
  1043. }
  1044. .newslist-right>ul>li .item_p p {
  1045. overflow: hidden;
  1046. display: -webkit-box;
  1047. text-overflow: ellipsis;
  1048. -webkit-box-orient: vertical;
  1049. -webkit-line-clamp: 3;
  1050. -moz-transition: all .36s ease;
  1051. -o-transition: all .36s ease;
  1052. transition: all .36s ease;
  1053. webkit-transition: all .36s ease;
  1054. }
  1055. .newslist-right>ul>li:hover .item_p p {
  1056. padding-left: 18px;
  1057. }
  1058. .newslist-right>ul>li:hover {
  1059. box-shadow: 0 0 40px rgba(0, 0, 0, .08);
  1060. }
  1061. .newslist-right>ul>li:hover h4 {
  1062. color: #1296D8;
  1063. padding-left: 18px;
  1064. }
  1065. .newsitem .time {
  1066. float: right;
  1067. font-size: 24px;
  1068. color: #959595;
  1069. }
  1070. .item_p {
  1071. color: #AEAEAE;
  1072. padding-right: 85px;
  1073. }
  1074. .news-fenlei {
  1075. width: 100%;
  1076. padding-left: 40px;
  1077. margin-bottom: 15px;
  1078. }
  1079. .news-fenlei span {
  1080. font-size: 20px;
  1081. margin-right: 20px;
  1082. cursor: pointer;
  1083. }
  1084. .news-fenlei span.active {
  1085. color: #1296DB;
  1086. }
  1087. .news-list-it {
  1088. display: none;
  1089. }
  1090. .news-list-it.active {
  1091. display: block;
  1092. }
  1093. /* 新闻 end */
  1094. /* 战略合作 */
  1095. .hezuo {
  1096. background: url("../images/banner/ad_bg4.png");
  1097. background-attachment: fixed;
  1098. background-repeat: no-repeat;
  1099. background-position: center center;
  1100. -webkit-background-size: cover;
  1101. -moz-background-size: cover;
  1102. -o-background-size: cover;
  1103. background-size: cover;
  1104. -webkit-backface-visibility: hidden;
  1105. backface-visibility: hidden;
  1106. position: relative;
  1107. }
  1108. .hezuo>.container>h2>a {
  1109. color: #ffffff;
  1110. }
  1111. .hezuo-list {
  1112. width: 100%;
  1113. }
  1114. .hezuo-list::after {
  1115. content: "";
  1116. display: block;
  1117. clear: both;
  1118. }
  1119. .hezuo-list>div {
  1120. width: 24.2%;
  1121. float: left;
  1122. margin-bottom: 20px;
  1123. margin-right: 10px;
  1124. }
  1125. .client-list>div>img {
  1126. width: 100%;
  1127. }
  1128. #swiper22 .swiper-pagination-bullet {
  1129. width: 64px;
  1130. height: 6px;
  1131. display: inline-block;
  1132. border-radius: 5px;
  1133. background: #333333;
  1134. opacity: 1;
  1135. }
  1136. #swiper22 .swiper-pagination-bullet-active {
  1137. opacity: 1;
  1138. background: #ffffff;
  1139. }
  1140. /* 战略合作 end */
  1141. /* 模态框 */
  1142. .modalKede {
  1143. display: none;
  1144. position: fixed;
  1145. z-index: 999;
  1146. width: 100%;
  1147. height: 100%;
  1148. top: 0;
  1149. left: 0;
  1150. background-color: rgba(0, 0, 0, 0.73);
  1151. filter: progid: DXImageTransform.Microsoft.Gradient(startColorStr=iWidth, endColorStr=iWidth);
  1152. }
  1153. .modal_video {
  1154. position: relative;
  1155. text-align: center;
  1156. margin-top: 100px;
  1157. }
  1158. .modalx_kede {
  1159. position: absolute;
  1160. top: -53px;
  1161. right: 400px;
  1162. width: 50px;
  1163. height: 50px;
  1164. cursor: pointer;
  1165. }
  1166. .modalx_kede img {
  1167. width: 100%;
  1168. }
  1169. .tp-banner-dom .m_top {
  1170. display: none;
  1171. width: 100%;
  1172. }
  1173. #swiper21 {
  1174. display: none;
  1175. height: 176px;
  1176. }
  1177. #swiper22 {
  1178. height: 277px;
  1179. }
  1180. .hezuo-list img {
  1181. width: 100%;
  1182. }
  1183. #swiper23 {
  1184. display: none;
  1185. height: 129px;
  1186. }
  1187. #swiper23 .hezuo-list>div {
  1188. width: 31.2%;
  1189. }
  1190. #swiper23 .hezuo-list>div:nth-child(3),
  1191. #swiper23 .hezuo-list>div:nth-child(6) {
  1192. margin-right: 0;
  1193. }
  1194. .map_m {
  1195. display: none;
  1196. }
  1197. .banner-index {
  1198. position: relative;
  1199. }
  1200. /* 响应式 */
  1201. @media screen and (max-width: 768px) {
  1202. .tp-banner-dom {
  1203. position: absolute;
  1204. bottom: -78px;
  1205. left: 0;
  1206. transform: translateX(0);
  1207. width: 100%;
  1208. height: 78px;
  1209. box-shadow: none;
  1210. }
  1211. .main>div:first-child {
  1212. margin-top: 70px;
  1213. }
  1214. .tp-banner-dom .tp-banner-item {
  1215. display: none;
  1216. }
  1217. .tp-banner-dom .m_top {
  1218. display: block;
  1219. }
  1220. #swiper22 {
  1221. display: none;
  1222. }
  1223. #swiper23 {
  1224. display: block;
  1225. }
  1226. #swiper1 .swiper-button-prev,
  1227. .swiper-container-rtl .swiper-button-next,
  1228. #swiper1 .swiper-button-next,
  1229. .swiper-container-rtl .swiper-button-prev {
  1230. display: none;
  1231. }
  1232. .video-button {
  1233. position: absolute;
  1234. top: 75%;
  1235. left: 36%;
  1236. background: transparent;
  1237. padding: 3px 4px;
  1238. border-radius: 5px;
  1239. line-height: 21px;
  1240. font-size: 14px;
  1241. border: 2px solid #ffffff;
  1242. color: #ffffff;
  1243. cursor: pointer;
  1244. }
  1245. header {
  1246. position: relative;
  1247. margin-bottom: 77px;
  1248. }
  1249. .video-button img {
  1250. width: 23%;
  1251. }
  1252. .main h2.item-title {
  1253. font-size: 18px;
  1254. line-height: 27px;
  1255. }
  1256. .main .item-dec {
  1257. font-size: 12px;
  1258. margin-bottom: 20px;
  1259. }
  1260. .serve-list>li {
  1261. float: left;
  1262. width: 24.5%;
  1263. height: 98px;
  1264. margin-bottom: 5px;
  1265. padding: 0px;
  1266. background: #EFEFEF;
  1267. border-radius: 5px;
  1268. padding-top: 12px;
  1269. }
  1270. .serve-list>li:hover .serve_text {
  1271. top: -15px;
  1272. }
  1273. .serve-list>li.active .serve_text {
  1274. top: -15px;
  1275. }
  1276. .serve-list>li:hover .p-fontsiz,
  1277. .serve-list>li.active .p-fontsiz {
  1278. top: -9px;
  1279. }
  1280. .serve-list>li.active .p-fontsiz,
  1281. .serve-list>li.active .p-fontsiz {
  1282. top: -9px;
  1283. }
  1284. .serve-list>li:not(:first-child) {
  1285. margin-left: 2px;
  1286. }
  1287. .serve-list>li:nth-child(5) {
  1288. margin-left: 0px;
  1289. }
  1290. .serve-list .serve_text>p {
  1291. font-size: 13px;
  1292. margin-top: 7px;
  1293. }
  1294. .serve-list .serve_text>span {
  1295. display: none;
  1296. }
  1297. .serve-list .serve-button {
  1298. display: none;
  1299. }
  1300. .serve-list .p-fontsiz {
  1301. font-size: 32px;
  1302. }
  1303. .main>div {
  1304. padding: 0px 0px;
  1305. padding-bottom: 30px;
  1306. }
  1307. .main .about .col-lg-8 {
  1308. display: none;
  1309. }
  1310. .news .mainnews {
  1311. box-sizing: border-box;
  1312. padding: 44px 60px;
  1313. width: 100%;
  1314. }
  1315. #swiper2 {
  1316. display: none;
  1317. }
  1318. #swiper21 {
  1319. display: block;
  1320. height: 208px;
  1321. }
  1322. #swiper21 .client-list>div {
  1323. width: 33.3%;
  1324. float: left;
  1325. }
  1326. .news .mainnews {
  1327. padding: 21px 24px;
  1328. height: 475px;
  1329. }
  1330. .item_img {
  1331. width: 100%;
  1332. }
  1333. .text .descript p {
  1334. max-height: 52px;
  1335. width: 100%;
  1336. }
  1337. .newslist-right {
  1338. width: 100%;
  1339. }
  1340. .news-fenlei {
  1341. margin-top: 20px;
  1342. text-align: center;
  1343. }
  1344. .news-fenlei span {
  1345. font-size: 16px;
  1346. }
  1347. .newslist-right>ul {
  1348. padding-left: 0px;
  1349. }
  1350. .newslist-right>ul>li {
  1351. padding: 0px 2px 8px 1px;
  1352. padding-top: 14px;
  1353. }
  1354. .newsitem .time {
  1355. position: absolute;
  1356. right: 0;
  1357. font-size: 20px;
  1358. top: 17px;
  1359. }
  1360. .newslist-left .text span {
  1361. font-size: 20px;
  1362. }
  1363. .newslist-left .text h4 {
  1364. font-size: 16px;
  1365. }
  1366. .newslist-right>ul>li h4 {
  1367. width: 86%;
  1368. font-size: 16px;
  1369. white-space: nowrap;
  1370. overflow: hidden;
  1371. text-overflow: ellipsis;
  1372. }
  1373. .item_p {
  1374. padding-right: 0px;
  1375. }
  1376. .about_right>.text h3 {
  1377. font-size: 23px;
  1378. }
  1379. .map_m {
  1380. display: block;
  1381. }
  1382. .modalx_kede {
  1383. position: absolute;
  1384. top: -53px;
  1385. right: 0;
  1386. width: 33px;
  1387. height: 33px;
  1388. }
  1389. #video_ {
  1390. width: 100%;
  1391. height: auto;
  1392. }
  1393. .hezuo {
  1394. margin-bottom: 0;
  1395. }
  1396. .honor-box:nth-child(3),
  1397. .honor-box:nth-child(6) {
  1398. margin-right: 0;
  1399. }
  1400. .honor-box div>p {
  1401. font-size: 12px;
  1402. margin-bottom: 0;
  1403. }
  1404. .honor-box {
  1405. width: 32.3%;
  1406. height: 140px;
  1407. margin-bottom: 5px;
  1408. padding-top: 0px;
  1409. margin-right: 5px;
  1410. }
  1411. .serve-list li {
  1412. float: left;
  1413. width: 100%;
  1414. height: 96px;
  1415. margin-bottom: 5px;
  1416. padding: 0px;
  1417. border-radius: 5px;
  1418. padding-top: 9px;
  1419. }
  1420. .serve-list a {
  1421. float: left;
  1422. width: 23.88%;
  1423. }
  1424. .serve-list a:not(:first-child) {
  1425. margin-left: 5px;
  1426. }
  1427. .serve-list a:nth-child(5) {
  1428. margin-left: 0px;
  1429. }
  1430. .serve-list li.active .serve_text {
  1431. top: -6px;
  1432. }
  1433. .serve-list a:not(:first-child) li {
  1434. margin-left: 0px;
  1435. }
  1436. .serve-list li:hover .p-fontsiz,
  1437. .serve-list li.active .p-fontsiz {
  1438. top: -3px;
  1439. color: #ffffff;
  1440. }
  1441. .serve-list li:hover .serve_text {
  1442. top: -8px;
  1443. }
  1444. }
  1445. @media screen and (max-width: 360px) {
  1446. .serve-list a {
  1447. float: left;
  1448. width: 23.8%;
  1449. }
  1450. }