index.css 29 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813
  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: 177.5px;
  350. left: 613.5px;
  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: 598px;
  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: 574px;
  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: 342px;
  416. left: 630px;
  417. border-radius: 6px;
  418. }
  419. /* 昆明-小圆点的位置 */
  420. .about_left>.ten {
  421. top: 438px;
  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: 383px;
  454. left: 622px;
  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: 688px;
  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: 205px;
  481. left: 531px;
  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: 122.5px;
  503. left: 728.5px;
  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: 122.5px;
  525. left: 283.5px;
  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. .about_left>.twenty-two {
  546. top: 260px;
  547. left: 400px;
  548. border-radius: 6px;
  549. }
  550. .twenty-two.active>.bubble {
  551. top: -91px;
  552. right: 31px;
  553. width: 244px;
  554. }
  555. /* 气泡 */
  556. .bubble>div:nth-child(2),
  557. .bubble>div:nth-child(5),
  558. .bubble>div:nth-child(3),
  559. .bubble>div:nth-child(4),
  560. .bubble>div:nth-child(6),
  561. .bubble>div:nth-child(7),
  562. .bubble>div:nth-child(8) {
  563. display: block;
  564. font-size: 16px;
  565. color: #666666;
  566. margin-top: 10px;
  567. }
  568. .bubble>.z_c {
  569. display: block;
  570. font-size: 16px;
  571. color: #333333;
  572. font-weight: bold;
  573. }
  574. .bubble {
  575. position: absolute;
  576. padding: 16px;
  577. top: -91px;
  578. right: -159px;
  579. width: 229px;
  580. background-color: #fff;
  581. border: 1px solid #dddedf;
  582. border-radius: 5px;
  583. box-shadow: 0 5px 20px rgba(153, 153, 153, .4);
  584. box-sizing: border-box;
  585. z-index: 99;
  586. display: none;
  587. }
  588. /* 小圆点 */
  589. .about-dot {
  590. width: 20px;
  591. height: 20px;
  592. background-size: cover;
  593. }
  594. /* .about_left>.about-dot:before {
  595. position: relative;
  596. z-index: 3;
  597. display: block;
  598. width: 100%;
  599. height: 100%;
  600. border-radius: 50%;
  601. background: #d5a57a;
  602. content: "";
  603. -webkit-transition: all .8s;
  604. -moz-transition: all .8s;
  605. -o-transition: all .8s;
  606. transition: all .8s;
  607. } */
  608. .about_left>.active.about-dot::before {
  609. background: #0058FA;
  610. }
  611. .about-dot.active em {
  612. margin-top: -13px;
  613. margin-left: -13px;
  614. border: 1px solid #bab4f6;
  615. background-color: rgba(0, 77, 240, 0.1);
  616. }
  617. .about-dot em {
  618. position: absolute;
  619. top: 50%;
  620. left: 50%;
  621. box-sizing: border-box;
  622. margin-top: -13px;
  623. margin-left: -12px;
  624. width: 25px;
  625. height: 25px;
  626. border: 1px solid #e4c9b2;
  627. border-radius: 50%;
  628. background-color: rgba(255, 255, 255, .4);
  629. -webkit-transform: scale(.6);
  630. transform: scale(.6);
  631. display: none;
  632. -webkit-animation: dotanimo 4s linear infinite;
  633. -moz-animation: dotanimo 4s linear infinite;
  634. -o-animation: dotanimo 4s linear infinite;
  635. animation: dotanimo 4s linear infinite;
  636. -webkit-animation-timing-function: linear;
  637. -moz-animation-timing-function: linear;
  638. -o-animation-timing-function: linear;
  639. animation-timing-function: linear;
  640. }
  641. .about-dot.active em {
  642. display: inline-block;
  643. }
  644. /* .about-dot.two em {
  645. display: none;
  646. } */
  647. .about_left>.about-dot>.dot-radio1 {
  648. z-index: 0;
  649. border: 1px dashed #e4c9b2;
  650. }
  651. .about-dot>.dot-radio2 {
  652. z-index: 1;
  653. background-color: rgba(255, 255, 255, .3);
  654. -webkit-animation-delay: 2s;
  655. -moz-animation-delay: 2s;
  656. -o-animation-delay: 2s;
  657. animation-delay: 2s;
  658. }
  659. .about-dot>.dot-radio3 {
  660. z-index: 2;
  661. background-color: rgba(255, 255, 255, .3);
  662. -webkit-animation-delay: 3s;
  663. -moz-animation-delay: 3s;
  664. -o-animation-delay: 3s;
  665. animation-delay: 3s;
  666. }
  667. .dot-radio1,
  668. .dot-radio2,
  669. .dot-radio3 {
  670. border: 1px dashed #f6b4b5;
  671. }
  672. /* 小圆点动画 */
  673. @keyframes dotanimo {
  674. 0% {
  675. transform: scale(.6);
  676. -webkit-transform: scale(.6);
  677. opacity: 1;
  678. }
  679. 70% {
  680. transform: scale(1.5);
  681. -webkit-transform: scale(1.5);
  682. opacity: .8;
  683. }
  684. 100% {
  685. transform: scale(2);
  686. -webkit-transform: scale(2);
  687. opacity: 0;
  688. }
  689. }
  690. .about_right {
  691. box-shadow: 7px 12.1px 43px 0 rgba(0, 0, 0, .1);
  692. }
  693. .about_right>.img {
  694. position: relative;
  695. }
  696. .about_right>.img>img {
  697. width: 100%;
  698. height: 200px;
  699. object-fit: cover;
  700. }
  701. .about_right>.img>.videox {
  702. position: absolute;
  703. width: 100%;
  704. height: 100%;
  705. background: #0000008a;
  706. top: 0;
  707. left: 0;
  708. display: none;
  709. }
  710. .about_right>.img:hover>.videox {
  711. display: block;
  712. }
  713. .about_right>.img>.videox>div {
  714. width: 46px;
  715. margin: 88px auto;
  716. cursor: pointer;
  717. }
  718. .about_right>.img>.videox>div img {
  719. width: 100%;
  720. }
  721. .about_right>.text {
  722. padding: 12px 30px;
  723. background: #ffffff;
  724. color: #333333;
  725. }
  726. .about_right>.text>p {
  727. color: #666666;
  728. margin-top: 20px;
  729. line-height: 26px;
  730. }
  731. .map-item {
  732. position: absolute;
  733. display: none;
  734. bottom: 13px;
  735. left: 0;
  736. }
  737. .map-item li {
  738. position: relative;
  739. display: block;
  740. padding: 12px 10px 12px 8px;
  741. line-height: 20px;
  742. }
  743. .map-item li p {
  744. color: rgba(51, 51, 51, .7);
  745. font-size: 17px;
  746. }
  747. .map-item li p>i {
  748. color: #1296DB;
  749. margin-right: 10px;
  750. }
  751. .map-item li h5 {
  752. overflow: hidden;
  753. padding-left: 5px;
  754. height: 18px;
  755. color: #333;
  756. font-size: 16px;
  757. margin: 0;
  758. }
  759. .map-item h5 strong {
  760. display: block;
  761. font-weight: 400;
  762. -webkit-transition: all .8s;
  763. -moz-transition: all .8s;
  764. -o-transition: all .8s;
  765. transition: all .8s;
  766. }
  767. .map-item li:hover h5 strong:first-child {
  768. margin-top: -20px;
  769. }
  770. .map-item li em {
  771. position: absolute;
  772. bottom: -1px;
  773. left: 0;
  774. width: 160px;
  775. height: 1px;
  776. background-color: #eceded;
  777. }
  778. .map-item li .icon-kede {
  779. display: inline-block;
  780. margin-right: 5px;
  781. width: 20px;
  782. height: 20px;
  783. }
  784. .map-item li em:before {
  785. display: block;
  786. margin-left: 0;
  787. width: 10px;
  788. height: 1px;
  789. background-color: #999;
  790. content: "";
  791. -webkit-animation: marginl 2s linear infinite;
  792. -moz-animation: marginl 2s linear infinite;
  793. -ms-animation: marginl 2s linear infinite;
  794. -o-animation: marginl 2s linear infinite;
  795. animation: marginl 2s linear infinite;
  796. }
  797. @keyframes marginl {
  798. 0% {
  799. margin-left: 0;
  800. }
  801. 50% {
  802. margin-left: 50%;
  803. }
  804. 100% {
  805. margin-left: 100%;
  806. }
  807. }
  808. /* 关于我们 end */
  809. /* 资质荣誉 */
  810. .honor-list{
  811. display: flex;
  812. justify-content: center;
  813. }
  814. .honor-list::after {
  815. content: "";
  816. display: block;
  817. clear: both;
  818. }
  819. .honor-box {
  820. width: 194px;
  821. background: #F3F3F3;
  822. height: 212px;
  823. text-align: center;
  824. padding-top: 20px;
  825. float: left;
  826. margin-right: 13px;
  827. position: relative;
  828. top: 0;
  829. transition: all 0.36s;
  830. -webkit-transition: all 0.36s;
  831. -o-transition: all 0.36s;
  832. -moz-transition: all 0.36s;
  833. }
  834. .honor-box:hover {
  835. top: -10px;
  836. box-shadow: 0 3px 10px #C9C9C9;
  837. }
  838. .honor-icon {
  839. width: 52%;
  840. margin: 10px auto;
  841. }
  842. .honor-icon img {
  843. width: 100%;
  844. }
  845. .honor-box div>p {
  846. font-size: 16px;
  847. }
  848. .honor-box div>span {
  849. font-size: 12px;
  850. color: #999999;
  851. }
  852. /* 资质荣誉 end */
  853. /* 服务客户 */
  854. .client {
  855. background: url("../images/kehu.jpg");
  856. background-attachment: fixed;
  857. background-repeat: no-repeat;
  858. background-position: center center;
  859. -webkit-background-size: cover;
  860. -moz-background-size: cover;
  861. -o-background-size: cover;
  862. background-size: cover;
  863. -webkit-backface-visibility: hidden;
  864. backface-visibility: hidden;
  865. }
  866. .client>.container>h2>a {
  867. color: #ffffff;
  868. }
  869. .client-list {
  870. width: 100%;
  871. }
  872. .client-list::after {
  873. content: "";
  874. display: block;
  875. clear: both;
  876. }
  877. #swiper2 {
  878. padding: 20px 0;
  879. }
  880. .client-list>div {
  881. width: 20%;
  882. float: left;
  883. transition: all .5s;
  884. -webkit-transition: all .5s;
  885. /* Safari */
  886. }
  887. .client-list>div>img {
  888. width: 100%;
  889. }
  890. .client-list>div:hover {
  891. position: relative;
  892. box-shadow: -4px 6px 19px 2px rgba(177, 171, 171, 0.38);
  893. transform: scale(1.1);
  894. -ms-transform: scale(1.1);
  895. /* IE 9 */
  896. -moz-transform: scale(1.1);
  897. /* Firefox */
  898. -webkit-transform: scale(1.1);
  899. /* Safari 和 Chrome */
  900. -o-transform: scale(1.1);
  901. }
  902. #swiper2 .swiper-wrapper {
  903. height: 440px;
  904. }
  905. #swiper2 .swiper-pagination-bullet {
  906. width: 64px;
  907. height: 6px;
  908. display: inline-block;
  909. border-radius: 5px;
  910. background: #333333;
  911. opacity: 1;
  912. }
  913. #swiper2 .swiper-pagination-bullet-active {
  914. background: #ffffff;
  915. }
  916. /* 服务客户 end */
  917. /* 新闻 */
  918. .news {
  919. background: #ffffff;
  920. }
  921. .item_p img {
  922. display: none;
  923. }
  924. .news .mainnews {
  925. box-sizing: border-box;
  926. padding: 44px 60px;
  927. width: 520px;
  928. height: 544px;
  929. text-align: center;
  930. background: #f8f8f8;
  931. -webkit-transition: all 0.3s ease;
  932. -o-transition: all 0.3s ease;
  933. transition: all 0.3s ease;
  934. float: left;
  935. }
  936. .newslist-left .text span {
  937. color: inherit;
  938. font-size: 24px;
  939. font-family: inherit;
  940. line-height: 30px;
  941. color: #000000;
  942. }
  943. .newslist-left .text h4 {
  944. margin-top: 8px;
  945. color: #333;
  946. font-size: 18px;
  947. line-height: 30px;
  948. font-weight: 400;
  949. }
  950. .mainnews:hover .descript p {
  951. padding-left: 15px;
  952. }
  953. .text {
  954. text-align: left;
  955. }
  956. .text .descript {
  957. margin-top: 8px;
  958. margin-bottom: 15px;
  959. }
  960. .text .descript p {
  961. overflow: hidden;
  962. color: #7d7d7d;
  963. box-sizing: border-box;
  964. padding-left: 0;
  965. max-height: 52px;
  966. width: 380px;
  967. height: auto;
  968. border-left: 1px solid transparent;
  969. font-size: 13px;
  970. line-height: 26px;
  971. -moz-transition: all .36s ease;
  972. -o-transition: all .36s ease;
  973. transition: all .36s ease;
  974. webkit-transition: all .36s ease;
  975. overflow: hidden;
  976. display: -webkit-box;
  977. text-overflow: ellipsis;
  978. -webkit-box-orient: vertical;
  979. -webkit-line-clamp: 3;
  980. }
  981. .text .descript p img {
  982. display: none;
  983. }
  984. .item_img {
  985. overflow: hidden;
  986. width: 380px;
  987. height: 180px;
  988. }
  989. .item_img img {
  990. width: 100%;
  991. transition: all 0.4s;
  992. }
  993. .mainnews:hover .item_img img {
  994. -webkit-transform: scale(1.08);
  995. -ms-transform: scale(1.08);
  996. transform: scale(1.08);
  997. }
  998. .more_button {
  999. display: block;
  1000. width: 140px;
  1001. height: 36px;
  1002. border-radius: 2px;
  1003. margin-top: 55px;
  1004. background: #276ace;
  1005. background: -moz-linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
  1006. background: -webkit-linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
  1007. background: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
  1008. box-shadow: 0 5px 20px rgba(9, 83, 187, 0.31);
  1009. color: #fff;
  1010. text-align: center;
  1011. line-height: 36px;
  1012. -moz-transition: all .36s ease;
  1013. -o-transition: all .36s ease;
  1014. transition: all .36s ease;
  1015. webkit-transition: all .36s ease;
  1016. }
  1017. .mainnews:hover .more_button {
  1018. margin-top: 35px;
  1019. }
  1020. .newslist-right {
  1021. float: left;
  1022. width: 57%;
  1023. }
  1024. .newslist-right>ul {
  1025. padding-left: 40px;
  1026. }
  1027. .newslist-right>ul>li {
  1028. position: relative;
  1029. border-top: 1px solid #e5e5e5;
  1030. padding: 0px 20px 19px 38px;
  1031. padding-top: 26px;
  1032. }
  1033. .newslist-right>ul>li::after {
  1034. content: "";
  1035. position: absolute;
  1036. bottom: 0;
  1037. left: 0;
  1038. width: 0;
  1039. height: 3px;
  1040. background: #1296D8;
  1041. -moz-transition: all .36s ease;
  1042. -o-transition: all .36s ease;
  1043. transition: all .36s ease;
  1044. webkit-transition: all .36s ease;
  1045. }
  1046. .newslist-right>ul>li:hover::after {
  1047. width: 100%;
  1048. }
  1049. .newslist-right>ul>li h4 {
  1050. color: #000000;
  1051. -moz-transition: all .36s ease;
  1052. -o-transition: all .36s ease;
  1053. transition: all .36s ease;
  1054. webkit-transition: all .36s ease;
  1055. }
  1056. .newslist-right>ul>li .item_p p {
  1057. overflow: hidden;
  1058. display: -webkit-box;
  1059. text-overflow: ellipsis;
  1060. -webkit-box-orient: vertical;
  1061. -webkit-line-clamp: 3;
  1062. -moz-transition: all .36s ease;
  1063. -o-transition: all .36s ease;
  1064. transition: all .36s ease;
  1065. webkit-transition: all .36s ease;
  1066. }
  1067. .newslist-right>ul>li:hover .item_p p {
  1068. padding-left: 18px;
  1069. }
  1070. .newslist-right>ul>li:hover {
  1071. box-shadow: 0 0 40px rgba(0, 0, 0, .08);
  1072. }
  1073. .newslist-right>ul>li:hover h4 {
  1074. color: #1296D8;
  1075. padding-left: 18px;
  1076. }
  1077. .newsitem .time {
  1078. float: right;
  1079. font-size: 24px;
  1080. color: #959595;
  1081. }
  1082. .item_p {
  1083. color: #AEAEAE;
  1084. padding-right: 85px;
  1085. }
  1086. .news-fenlei {
  1087. width: 100%;
  1088. padding-left: 40px;
  1089. margin-bottom: 15px;
  1090. }
  1091. .news-fenlei span {
  1092. font-size: 20px;
  1093. margin-right: 20px;
  1094. cursor: pointer;
  1095. }
  1096. .news-fenlei span.active {
  1097. color: #1296DB;
  1098. }
  1099. .news-list-it {
  1100. display: none;
  1101. }
  1102. .news-list-it.active {
  1103. display: block;
  1104. }
  1105. /* 新闻 end */
  1106. /* 战略合作 */
  1107. .hezuo {
  1108. background: url("../images/banner/ad_bg4.png");
  1109. background-attachment: fixed;
  1110. background-repeat: no-repeat;
  1111. background-position: center center;
  1112. -webkit-background-size: cover;
  1113. -moz-background-size: cover;
  1114. -o-background-size: cover;
  1115. background-size: cover;
  1116. -webkit-backface-visibility: hidden;
  1117. backface-visibility: hidden;
  1118. position: relative;
  1119. }
  1120. .hezuo>.container>h2>a {
  1121. color: #ffffff;
  1122. }
  1123. .hezuo-list {
  1124. width: 100%;
  1125. }
  1126. .hezuo-list::after {
  1127. content: "";
  1128. display: block;
  1129. clear: both;
  1130. }
  1131. .hezuo-list>div {
  1132. width: 24.2%;
  1133. float: left;
  1134. margin-bottom: 20px;
  1135. margin-right: 10px;
  1136. }
  1137. .client-list>div>img {
  1138. width: 100%;
  1139. }
  1140. #swiper22 .swiper-pagination-bullet {
  1141. width: 64px;
  1142. height: 6px;
  1143. display: inline-block;
  1144. border-radius: 5px;
  1145. background: #333333;
  1146. opacity: 1;
  1147. }
  1148. #swiper22 .swiper-pagination-bullet-active {
  1149. opacity: 1;
  1150. background: #ffffff;
  1151. }
  1152. /* 战略合作 end */
  1153. /* 模态框 */
  1154. .modalKede {
  1155. display: none;
  1156. position: fixed;
  1157. z-index: 999;
  1158. width: 100%;
  1159. height: 100%;
  1160. top: 0;
  1161. left: 0;
  1162. background-color: rgba(0, 0, 0, 0.73);
  1163. filter: progid: DXImageTransform.Microsoft.Gradient(startColorStr=iWidth, endColorStr=iWidth);
  1164. }
  1165. .modal_video {
  1166. position: relative;
  1167. text-align: center;
  1168. margin-top: 100px;
  1169. }
  1170. .modalx_kede {
  1171. position: absolute;
  1172. top: -53px;
  1173. right: 400px;
  1174. width: 50px;
  1175. height: 50px;
  1176. cursor: pointer;
  1177. }
  1178. .modalx_kede img {
  1179. width: 100%;
  1180. }
  1181. .tp-banner-dom .m_top {
  1182. display: none;
  1183. width: 100%;
  1184. }
  1185. #swiper21 {
  1186. display: none;
  1187. height: 176px;
  1188. }
  1189. #swiper22 {
  1190. height: 277px;
  1191. }
  1192. .hezuo-list img {
  1193. width: 100%;
  1194. }
  1195. #swiper23 {
  1196. display: none;
  1197. height: 129px;
  1198. }
  1199. #swiper23 .hezuo-list>div {
  1200. width: 31.2%;
  1201. }
  1202. #swiper23 .hezuo-list>div:nth-child(3),
  1203. #swiper23 .hezuo-list>div:nth-child(6) {
  1204. margin-right: 0;
  1205. }
  1206. .map_m {
  1207. display: none;
  1208. }
  1209. .banner-index {
  1210. position: relative;
  1211. }
  1212. /* 响应式 */
  1213. @media screen and (max-width: 768px) {
  1214. .tp-banner-dom {
  1215. position: absolute;
  1216. bottom: -78px;
  1217. left: 0;
  1218. transform: translateX(0);
  1219. width: 100%;
  1220. height: 78px;
  1221. box-shadow: none;
  1222. }
  1223. .main>div:first-child {
  1224. margin-top: 70px;
  1225. }
  1226. .tp-banner-dom .tp-banner-item {
  1227. display: none;
  1228. }
  1229. .tp-banner-dom .m_top {
  1230. display: block;
  1231. }
  1232. #swiper22 {
  1233. display: none;
  1234. }
  1235. #swiper23 {
  1236. display: block;
  1237. }
  1238. #swiper1 .swiper-button-prev,
  1239. .swiper-container-rtl .swiper-button-next,
  1240. #swiper1 .swiper-button-next,
  1241. .swiper-container-rtl .swiper-button-prev {
  1242. display: none;
  1243. }
  1244. .video-button {
  1245. position: absolute;
  1246. top: 75%;
  1247. left: 36%;
  1248. background: transparent;
  1249. padding: 3px 4px;
  1250. border-radius: 5px;
  1251. line-height: 21px;
  1252. font-size: 14px;
  1253. border: 2px solid #ffffff;
  1254. color: #ffffff;
  1255. cursor: pointer;
  1256. }
  1257. header {
  1258. position: relative;
  1259. margin-bottom: 77px;
  1260. }
  1261. .video-button img {
  1262. width: 23%;
  1263. }
  1264. .main h2.item-title {
  1265. font-size: 18px;
  1266. line-height: 27px;
  1267. }
  1268. .main .item-dec {
  1269. font-size: 12px;
  1270. margin-bottom: 20px;
  1271. }
  1272. .serve-list>li {
  1273. float: left;
  1274. width: 24.5%;
  1275. height: 98px;
  1276. margin-bottom: 5px;
  1277. padding: 0px;
  1278. background: #EFEFEF;
  1279. border-radius: 5px;
  1280. padding-top: 12px;
  1281. }
  1282. .serve-list>li:hover .serve_text {
  1283. top: -15px;
  1284. }
  1285. .serve-list>li.active .serve_text {
  1286. top: -15px;
  1287. }
  1288. .serve-list>li:hover .p-fontsiz,
  1289. .serve-list>li.active .p-fontsiz {
  1290. top: -9px;
  1291. }
  1292. .serve-list>li.active .p-fontsiz,
  1293. .serve-list>li.active .p-fontsiz {
  1294. top: -9px;
  1295. }
  1296. .serve-list>li:not(:first-child) {
  1297. margin-left: 2px;
  1298. }
  1299. .serve-list>li:nth-child(5) {
  1300. margin-left: 0px;
  1301. }
  1302. .serve-list .serve_text>p {
  1303. font-size: 13px;
  1304. margin-top: 7px;
  1305. }
  1306. .serve-list .serve_text>span {
  1307. display: none;
  1308. }
  1309. .serve-list .serve-button {
  1310. display: none;
  1311. }
  1312. .serve-list .p-fontsiz {
  1313. font-size: 32px;
  1314. }
  1315. .main>div {
  1316. padding: 0px 0px;
  1317. padding-bottom: 30px;
  1318. }
  1319. .main .about .col-lg-8 {
  1320. display: none;
  1321. }
  1322. .news .mainnews {
  1323. box-sizing: border-box;
  1324. padding: 44px 60px;
  1325. width: 100%;
  1326. }
  1327. #swiper2 {
  1328. display: none;
  1329. }
  1330. #swiper21 {
  1331. display: block;
  1332. height: 208px;
  1333. }
  1334. #swiper21 .client-list>div {
  1335. width: 33.3%;
  1336. float: left;
  1337. }
  1338. .news .mainnews {
  1339. padding: 21px 24px;
  1340. height: 475px;
  1341. }
  1342. .item_img {
  1343. width: 100%;
  1344. }
  1345. .text .descript p {
  1346. max-height: 52px;
  1347. width: 100%;
  1348. }
  1349. .newslist-right {
  1350. width: 100%;
  1351. }
  1352. .news-fenlei {
  1353. margin-top: 20px;
  1354. text-align: center;
  1355. }
  1356. .news-fenlei span {
  1357. font-size: 16px;
  1358. }
  1359. .newslist-right>ul {
  1360. padding-left: 0px;
  1361. }
  1362. .newslist-right>ul>li {
  1363. padding: 0px 2px 8px 1px;
  1364. padding-top: 14px;
  1365. }
  1366. .newsitem .time {
  1367. position: absolute;
  1368. right: 0;
  1369. font-size: 20px;
  1370. top: 17px;
  1371. }
  1372. .newslist-left .text span {
  1373. font-size: 20px;
  1374. }
  1375. .newslist-left .text h4 {
  1376. font-size: 16px;
  1377. }
  1378. .newslist-right>ul>li h4 {
  1379. width: 86%;
  1380. font-size: 16px;
  1381. white-space: nowrap;
  1382. overflow: hidden;
  1383. text-overflow: ellipsis;
  1384. }
  1385. .item_p {
  1386. padding-right: 0px;
  1387. }
  1388. .about_right>.text h3 {
  1389. font-size: 23px;
  1390. }
  1391. .map_m {
  1392. display: block;
  1393. }
  1394. .modalx_kede {
  1395. position: absolute;
  1396. top: -53px;
  1397. right: 0;
  1398. width: 33px;
  1399. height: 33px;
  1400. }
  1401. #video_ {
  1402. width: 100%;
  1403. height: auto;
  1404. }
  1405. .hezuo {
  1406. margin-bottom: 0;
  1407. }
  1408. .honor-box:nth-child(3),
  1409. .honor-box:nth-child(6) {
  1410. margin-right: 0;
  1411. }
  1412. .honor-box div>p {
  1413. font-size: 12px;
  1414. margin-bottom: 0;
  1415. }
  1416. .honor-box {
  1417. width: 32.3%;
  1418. height: 140px;
  1419. margin-bottom: 5px;
  1420. padding-top: 0px;
  1421. margin-right: 5px;
  1422. }
  1423. .serve-list li {
  1424. float: left;
  1425. width: 100%;
  1426. height: 96px;
  1427. margin-bottom: 5px;
  1428. padding: 0px;
  1429. border-radius: 5px;
  1430. padding-top: 9px;
  1431. }
  1432. .serve-list a {
  1433. float: left;
  1434. width: 23.88%;
  1435. }
  1436. .serve-list a:not(:first-child) {
  1437. margin-left: 5px;
  1438. }
  1439. .serve-list a:nth-child(5) {
  1440. margin-left: 0px;
  1441. }
  1442. .serve-list li.active .serve_text {
  1443. top: -6px;
  1444. }
  1445. .serve-list a:not(:first-child) li {
  1446. margin-left: 0px;
  1447. }
  1448. .serve-list li:hover .p-fontsiz,
  1449. .serve-list li.active .p-fontsiz {
  1450. top: -3px;
  1451. color: #ffffff;
  1452. }
  1453. .serve-list li:hover .serve_text {
  1454. top: -8px;
  1455. }
  1456. }
  1457. @media screen and (max-width: 360px) {
  1458. .serve-list a {
  1459. float: left;
  1460. width: 23.8%;
  1461. }
  1462. }