index.css 28 KB

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