index.css 24 KB

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