index.css 29 KB

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