index.css 29 KB

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