index.css 24 KB

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