index.css 29 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793
  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. }
  688. .about_right>.img>.videox {
  689. position: absolute;
  690. width: 100%;
  691. height: 100%;
  692. background: #0000008a;
  693. top: 0;
  694. left: 0;
  695. display: none;
  696. }
  697. .about_right>.img:hover>.videox {
  698. display: block;
  699. }
  700. .about_right>.img>.videox>div {
  701. width: 46px;
  702. margin: 88px auto;
  703. cursor: pointer;
  704. }
  705. .about_right>.img>.videox>div img {
  706. width: 100%;
  707. }
  708. .about_right>.text {
  709. padding: 12px 30px;
  710. background: #ffffff;
  711. color: #333333;
  712. }
  713. .about_right>.text>p {
  714. color: #666666;
  715. margin-top: 20px;
  716. line-height: 26px;
  717. }
  718. .map-item {
  719. position: absolute;
  720. display: none;
  721. bottom: 13px;
  722. left: 0;
  723. }
  724. .map-item li {
  725. position: relative;
  726. display: block;
  727. padding: 12px 10px 12px 8px;
  728. line-height: 20px;
  729. }
  730. .map-item li p {
  731. color: rgba(51, 51, 51, .7);
  732. font-size: 17px;
  733. }
  734. .map-item li p>i {
  735. color: #1296DB;
  736. margin-right: 10px;
  737. }
  738. .map-item li h5 {
  739. overflow: hidden;
  740. padding-left: 5px;
  741. height: 18px;
  742. color: #333;
  743. font-size: 16px;
  744. margin: 0;
  745. }
  746. .map-item h5 strong {
  747. display: block;
  748. font-weight: 400;
  749. -webkit-transition: all .8s;
  750. -moz-transition: all .8s;
  751. -o-transition: all .8s;
  752. transition: all .8s;
  753. }
  754. .map-item li:hover h5 strong:first-child {
  755. margin-top: -20px;
  756. }
  757. .map-item li em {
  758. position: absolute;
  759. bottom: -1px;
  760. left: 0;
  761. width: 160px;
  762. height: 1px;
  763. background-color: #eceded;
  764. }
  765. .map-item li .icon-kede {
  766. display: inline-block;
  767. margin-right: 5px;
  768. width: 20px;
  769. height: 20px;
  770. }
  771. .map-item li em:before {
  772. display: block;
  773. margin-left: 0;
  774. width: 10px;
  775. height: 1px;
  776. background-color: #999;
  777. content: "";
  778. -webkit-animation: marginl 2s linear infinite;
  779. -moz-animation: marginl 2s linear infinite;
  780. -ms-animation: marginl 2s linear infinite;
  781. -o-animation: marginl 2s linear infinite;
  782. animation: marginl 2s linear infinite;
  783. }
  784. @keyframes marginl {
  785. 0% {
  786. margin-left: 0;
  787. }
  788. 50% {
  789. margin-left: 50%;
  790. }
  791. 100% {
  792. margin-left: 100%;
  793. }
  794. }
  795. /* 关于我们 end */
  796. /* 资质荣誉 */
  797. .honor-list::after {
  798. content: "";
  799. display: block;
  800. clear: both;
  801. }
  802. .honor-box {
  803. width: 194px;
  804. background: #F3F3F3;
  805. height: 212px;
  806. text-align: center;
  807. padding-top: 20px;
  808. float: left;
  809. margin-right: 13px;
  810. position: relative;
  811. top: 0;
  812. transition: all 0.36s;
  813. -webkit-transition: all 0.36s;
  814. -o-transition: all 0.36s;
  815. -moz-transition: all 0.36s;
  816. }
  817. .honor-box:hover {
  818. top: -10px;
  819. box-shadow: 0 3px 10px #C9C9C9;
  820. }
  821. .honor-icon {
  822. width: 52%;
  823. margin: 10px auto;
  824. }
  825. .honor-icon img {
  826. width: 100%;
  827. }
  828. .honor-box div>p {
  829. font-size: 16px;
  830. }
  831. .honor-box div>span {
  832. font-size: 12px;
  833. color: #999999;
  834. }
  835. /* 资质荣誉 end */
  836. /* 服务客户 */
  837. .client {
  838. background: url("../images/kehu.jpg");
  839. background-attachment: fixed;
  840. background-repeat: no-repeat;
  841. background-position: center center;
  842. -webkit-background-size: cover;
  843. -moz-background-size: cover;
  844. -o-background-size: cover;
  845. background-size: cover;
  846. -webkit-backface-visibility: hidden;
  847. backface-visibility: hidden;
  848. }
  849. .client>.container>h2>a {
  850. color: #ffffff;
  851. }
  852. .client-list {
  853. width: 100%;
  854. }
  855. .client-list::after {
  856. content: "";
  857. display: block;
  858. clear: both;
  859. }
  860. #swiper2 {
  861. padding: 20px 0;
  862. }
  863. .client-list>div {
  864. width: 20%;
  865. float: left;
  866. transition: all .5s;
  867. -webkit-transition: all .5s;
  868. /* Safari */
  869. }
  870. .client-list>div>img {
  871. width: 100%;
  872. }
  873. .client-list>div:hover {
  874. position: relative;
  875. box-shadow: -4px 6px 19px 2px rgba(177, 171, 171, 0.38);
  876. transform: scale(1.1);
  877. -ms-transform: scale(1.1);
  878. /* IE 9 */
  879. -moz-transform: scale(1.1);
  880. /* Firefox */
  881. -webkit-transform: scale(1.1);
  882. /* Safari 和 Chrome */
  883. -o-transform: scale(1.1);
  884. }
  885. #swiper2 .swiper-wrapper {
  886. height: 440px;
  887. }
  888. #swiper2 .swiper-pagination-bullet {
  889. width: 64px;
  890. height: 6px;
  891. display: inline-block;
  892. border-radius: 5px;
  893. background: #333333;
  894. opacity: 1;
  895. }
  896. #swiper2 .swiper-pagination-bullet-active {
  897. background: #ffffff;
  898. }
  899. /* 服务客户 end */
  900. /* 新闻 */
  901. .news {
  902. background: #ffffff;
  903. }
  904. .item_p img {
  905. display: none;
  906. }
  907. .news .mainnews {
  908. box-sizing: border-box;
  909. padding: 44px 60px;
  910. width: 520px;
  911. height: 544px;
  912. text-align: center;
  913. background: #f8f8f8;
  914. -webkit-transition: all 0.3s ease;
  915. -o-transition: all 0.3s ease;
  916. transition: all 0.3s ease;
  917. float: left;
  918. }
  919. .newslist-left .text span {
  920. color: inherit;
  921. font-size: 24px;
  922. font-family: inherit;
  923. line-height: 30px;
  924. color: #000000;
  925. }
  926. .newslist-left .text h4 {
  927. margin-top: 8px;
  928. color: #333;
  929. font-size: 18px;
  930. line-height: 30px;
  931. font-weight: 400;
  932. }
  933. .mainnews:hover .descript p {
  934. padding-left: 15px;
  935. }
  936. .text {
  937. text-align: left;
  938. }
  939. .text .descript {
  940. margin-top: 8px;
  941. margin-bottom: 15px;
  942. }
  943. .text .descript p {
  944. overflow: hidden;
  945. color: #7d7d7d;
  946. box-sizing: border-box;
  947. padding-left: 0;
  948. max-height: 52px;
  949. width: 380px;
  950. height: auto;
  951. border-left: 1px solid transparent;
  952. font-size: 13px;
  953. line-height: 26px;
  954. -moz-transition: all .36s ease;
  955. -o-transition: all .36s ease;
  956. transition: all .36s ease;
  957. webkit-transition: all .36s ease;
  958. overflow: hidden;
  959. display: -webkit-box;
  960. text-overflow: ellipsis;
  961. -webkit-box-orient: vertical;
  962. -webkit-line-clamp: 3;
  963. }
  964. .text .descript p img {
  965. display: none;
  966. }
  967. .item_img {
  968. overflow: hidden;
  969. width: 380px;
  970. height: 180px;
  971. }
  972. .item_img img {
  973. width: 100%;
  974. transition: all 0.4s;
  975. }
  976. .mainnews:hover .item_img img {
  977. -webkit-transform: scale(1.08);
  978. -ms-transform: scale(1.08);
  979. transform: scale(1.08);
  980. }
  981. .more_button {
  982. display: block;
  983. width: 140px;
  984. height: 36px;
  985. border-radius: 2px;
  986. margin-top: 55px;
  987. background: #276ace;
  988. background: -moz-linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
  989. background: -webkit-linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
  990. background: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
  991. box-shadow: 0 5px 20px rgba(9, 83, 187, 0.31);
  992. color: #fff;
  993. text-align: center;
  994. line-height: 36px;
  995. -moz-transition: all .36s ease;
  996. -o-transition: all .36s ease;
  997. transition: all .36s ease;
  998. webkit-transition: all .36s ease;
  999. }
  1000. .mainnews:hover .more_button {
  1001. margin-top: 35px;
  1002. }
  1003. .newslist-right {
  1004. float: left;
  1005. width: 57%;
  1006. }
  1007. .newslist-right>ul {
  1008. padding-left: 40px;
  1009. }
  1010. .newslist-right>ul>li {
  1011. position: relative;
  1012. border-top: 1px solid #e5e5e5;
  1013. padding: 0px 20px 19px 38px;
  1014. padding-top: 26px;
  1015. }
  1016. .newslist-right>ul>li::after {
  1017. content: "";
  1018. position: absolute;
  1019. bottom: 0;
  1020. left: 0;
  1021. width: 0;
  1022. height: 3px;
  1023. background: #1296D8;
  1024. -moz-transition: all .36s ease;
  1025. -o-transition: all .36s ease;
  1026. transition: all .36s ease;
  1027. webkit-transition: all .36s ease;
  1028. }
  1029. .newslist-right>ul>li:hover::after {
  1030. width: 100%;
  1031. }
  1032. .newslist-right>ul>li h4 {
  1033. color: #000000;
  1034. -moz-transition: all .36s ease;
  1035. -o-transition: all .36s ease;
  1036. transition: all .36s ease;
  1037. webkit-transition: all .36s ease;
  1038. }
  1039. .newslist-right>ul>li .item_p p {
  1040. overflow: hidden;
  1041. display: -webkit-box;
  1042. text-overflow: ellipsis;
  1043. -webkit-box-orient: vertical;
  1044. -webkit-line-clamp: 3;
  1045. -moz-transition: all .36s ease;
  1046. -o-transition: all .36s ease;
  1047. transition: all .36s ease;
  1048. webkit-transition: all .36s ease;
  1049. }
  1050. .newslist-right>ul>li:hover .item_p p {
  1051. padding-left: 18px;
  1052. }
  1053. .newslist-right>ul>li:hover {
  1054. box-shadow: 0 0 40px rgba(0, 0, 0, .08);
  1055. }
  1056. .newslist-right>ul>li:hover h4 {
  1057. color: #1296D8;
  1058. padding-left: 18px;
  1059. }
  1060. .newsitem .time {
  1061. float: right;
  1062. font-size: 24px;
  1063. color: #959595;
  1064. }
  1065. .item_p {
  1066. color: #AEAEAE;
  1067. padding-right: 85px;
  1068. }
  1069. .news-fenlei {
  1070. width: 100%;
  1071. padding-left: 40px;
  1072. margin-bottom: 15px;
  1073. }
  1074. .news-fenlei span {
  1075. font-size: 20px;
  1076. margin-right: 20px;
  1077. cursor: pointer;
  1078. }
  1079. .news-fenlei span.active {
  1080. color: #1296DB;
  1081. }
  1082. .news-list-it {
  1083. display: none;
  1084. }
  1085. .news-list-it.active {
  1086. display: block;
  1087. }
  1088. /* 新闻 end */
  1089. /* 战略合作 */
  1090. .hezuo {
  1091. background: url("../images/banner/ad_bg4.png");
  1092. background-attachment: fixed;
  1093. background-repeat: no-repeat;
  1094. background-position: center center;
  1095. -webkit-background-size: cover;
  1096. -moz-background-size: cover;
  1097. -o-background-size: cover;
  1098. background-size: cover;
  1099. -webkit-backface-visibility: hidden;
  1100. backface-visibility: hidden;
  1101. position: relative;
  1102. }
  1103. .hezuo>.container>h2>a {
  1104. color: #ffffff;
  1105. }
  1106. .hezuo-list {
  1107. width: 100%;
  1108. }
  1109. .hezuo-list::after {
  1110. content: "";
  1111. display: block;
  1112. clear: both;
  1113. }
  1114. .hezuo-list>div {
  1115. width: 24.2%;
  1116. float: left;
  1117. margin-bottom: 20px;
  1118. margin-right: 10px;
  1119. }
  1120. .client-list>div>img {
  1121. width: 100%;
  1122. }
  1123. #swiper22 .swiper-pagination-bullet {
  1124. width: 64px;
  1125. height: 6px;
  1126. display: inline-block;
  1127. border-radius: 5px;
  1128. background: #333333;
  1129. opacity: 1;
  1130. }
  1131. #swiper22 .swiper-pagination-bullet-active {
  1132. opacity: 1;
  1133. background: #ffffff;
  1134. }
  1135. /* 战略合作 end */
  1136. /* 模态框 */
  1137. .modalKede {
  1138. display: none;
  1139. position: fixed;
  1140. z-index: 999;
  1141. width: 100%;
  1142. height: 100%;
  1143. top: 0;
  1144. left: 0;
  1145. background-color: rgba(0, 0, 0, 0.73);
  1146. filter: progid: DXImageTransform.Microsoft.Gradient(startColorStr=iWidth, endColorStr=iWidth);
  1147. }
  1148. .modal_video {
  1149. position: relative;
  1150. text-align: center;
  1151. margin-top: 100px;
  1152. }
  1153. .modalx_kede {
  1154. position: absolute;
  1155. top: -53px;
  1156. right: 400px;
  1157. width: 50px;
  1158. height: 50px;
  1159. cursor: pointer;
  1160. }
  1161. .modalx_kede img {
  1162. width: 100%;
  1163. }
  1164. .tp-banner-dom .m_top {
  1165. display: none;
  1166. width: 100%;
  1167. }
  1168. #swiper21 {
  1169. display: none;
  1170. height: 176px;
  1171. }
  1172. #swiper22 {
  1173. height: 277px;
  1174. }
  1175. .hezuo-list img {
  1176. width: 100%;
  1177. }
  1178. #swiper23 {
  1179. display: none;
  1180. height: 129px;
  1181. }
  1182. #swiper23 .hezuo-list>div {
  1183. width: 31.2%;
  1184. }
  1185. #swiper23 .hezuo-list>div:nth-child(3),
  1186. #swiper23 .hezuo-list>div:nth-child(6) {
  1187. margin-right: 0;
  1188. }
  1189. .map_m {
  1190. display: none;
  1191. }
  1192. .banner-index {
  1193. position: relative;
  1194. }
  1195. /* 响应式 */
  1196. @media screen and (max-width: 768px) {
  1197. .tp-banner-dom {
  1198. position: absolute;
  1199. bottom: -78px;
  1200. left: 0;
  1201. transform: translateX(0);
  1202. width: 100%;
  1203. height: 78px;
  1204. box-shadow: none;
  1205. }
  1206. .main>div:first-child {
  1207. margin-top: 70px;
  1208. }
  1209. .tp-banner-dom .tp-banner-item {
  1210. display: none;
  1211. }
  1212. .tp-banner-dom .m_top {
  1213. display: block;
  1214. }
  1215. #swiper22 {
  1216. display: none;
  1217. }
  1218. #swiper23 {
  1219. display: block;
  1220. }
  1221. #swiper1 .swiper-button-prev,
  1222. .swiper-container-rtl .swiper-button-next,
  1223. #swiper1 .swiper-button-next,
  1224. .swiper-container-rtl .swiper-button-prev {
  1225. display: none;
  1226. }
  1227. .video-button {
  1228. position: absolute;
  1229. top: 75%;
  1230. left: 36%;
  1231. background: transparent;
  1232. padding: 3px 4px;
  1233. border-radius: 5px;
  1234. line-height: 21px;
  1235. font-size: 14px;
  1236. border: 2px solid #ffffff;
  1237. color: #ffffff;
  1238. cursor: pointer;
  1239. }
  1240. header {
  1241. position: relative;
  1242. margin-bottom: 77px;
  1243. }
  1244. .video-button img {
  1245. width: 23%;
  1246. }
  1247. .main h2.item-title {
  1248. font-size: 18px;
  1249. line-height: 27px;
  1250. }
  1251. .main .item-dec {
  1252. font-size: 12px;
  1253. margin-bottom: 20px;
  1254. }
  1255. .serve-list>li {
  1256. float: left;
  1257. width: 24.5%;
  1258. height: 98px;
  1259. margin-bottom: 5px;
  1260. padding: 0px;
  1261. background: #EFEFEF;
  1262. border-radius: 5px;
  1263. padding-top: 12px;
  1264. }
  1265. .serve-list>li:hover .serve_text {
  1266. top: -15px;
  1267. }
  1268. .serve-list>li.active .serve_text {
  1269. top: -15px;
  1270. }
  1271. .serve-list>li:hover .p-fontsiz,
  1272. .serve-list>li.active .p-fontsiz {
  1273. top: -9px;
  1274. }
  1275. .serve-list>li.active .p-fontsiz,
  1276. .serve-list>li.active .p-fontsiz {
  1277. top: -9px;
  1278. }
  1279. .serve-list>li:not(:first-child) {
  1280. margin-left: 2px;
  1281. }
  1282. .serve-list>li:nth-child(5) {
  1283. margin-left: 0px;
  1284. }
  1285. .serve-list .serve_text>p {
  1286. font-size: 13px;
  1287. margin-top: 7px;
  1288. }
  1289. .serve-list .serve_text>span {
  1290. display: none;
  1291. }
  1292. .serve-list .serve-button {
  1293. display: none;
  1294. }
  1295. .serve-list .p-fontsiz {
  1296. font-size: 32px;
  1297. }
  1298. .main>div {
  1299. padding: 0px 0px;
  1300. padding-bottom: 30px;
  1301. }
  1302. .main .about .col-lg-8 {
  1303. display: none;
  1304. }
  1305. .news .mainnews {
  1306. box-sizing: border-box;
  1307. padding: 44px 60px;
  1308. width: 100%;
  1309. }
  1310. #swiper2 {
  1311. display: none;
  1312. }
  1313. #swiper21 {
  1314. display: block;
  1315. height: 208px;
  1316. }
  1317. #swiper21 .client-list>div {
  1318. width: 33.3%;
  1319. float: left;
  1320. }
  1321. .news .mainnews {
  1322. padding: 21px 24px;
  1323. height: 475px;
  1324. }
  1325. .item_img {
  1326. width: 100%;
  1327. }
  1328. .text .descript p {
  1329. max-height: 52px;
  1330. width: 100%;
  1331. }
  1332. .newslist-right {
  1333. width: 100%;
  1334. }
  1335. .news-fenlei {
  1336. margin-top: 20px;
  1337. text-align: center;
  1338. }
  1339. .news-fenlei span {
  1340. font-size: 16px;
  1341. }
  1342. .newslist-right>ul {
  1343. padding-left: 0px;
  1344. }
  1345. .newslist-right>ul>li {
  1346. padding: 0px 2px 8px 1px;
  1347. padding-top: 14px;
  1348. }
  1349. .newsitem .time {
  1350. position: absolute;
  1351. right: 0;
  1352. font-size: 20px;
  1353. top: 17px;
  1354. }
  1355. .newslist-left .text span {
  1356. font-size: 20px;
  1357. }
  1358. .newslist-left .text h4 {
  1359. font-size: 16px;
  1360. }
  1361. .newslist-right>ul>li h4 {
  1362. width: 86%;
  1363. font-size: 16px;
  1364. white-space: nowrap;
  1365. overflow: hidden;
  1366. text-overflow: ellipsis;
  1367. }
  1368. .item_p {
  1369. padding-right: 0px;
  1370. }
  1371. .about_right>.text h3 {
  1372. font-size: 23px;
  1373. }
  1374. .map_m {
  1375. display: block;
  1376. }
  1377. .modalx_kede {
  1378. position: absolute;
  1379. top: -53px;
  1380. right: 0;
  1381. width: 33px;
  1382. height: 33px;
  1383. }
  1384. #video_ {
  1385. width: 100%;
  1386. height: auto;
  1387. }
  1388. .hezuo {
  1389. margin-bottom: 0;
  1390. }
  1391. .honor-box:nth-child(3),
  1392. .honor-box:nth-child(6) {
  1393. margin-right: 0;
  1394. }
  1395. .honor-box div>p {
  1396. font-size: 12px;
  1397. margin-bottom: 0;
  1398. }
  1399. .honor-box {
  1400. width: 32.3%;
  1401. height: 140px;
  1402. margin-bottom: 5px;
  1403. padding-top: 0px;
  1404. margin-right: 5px;
  1405. }
  1406. .serve-list li {
  1407. float: left;
  1408. width: 100%;
  1409. height: 96px;
  1410. margin-bottom: 5px;
  1411. padding: 0px;
  1412. border-radius: 5px;
  1413. padding-top: 9px;
  1414. }
  1415. .serve-list a {
  1416. float: left;
  1417. width: 23.88%;
  1418. }
  1419. .serve-list a:not(:first-child) {
  1420. margin-left: 5px;
  1421. }
  1422. .serve-list a:nth-child(5) {
  1423. margin-left: 0px;
  1424. }
  1425. .serve-list li.active .serve_text {
  1426. top: -6px;
  1427. }
  1428. .serve-list a:not(:first-child) li {
  1429. margin-left: 0px;
  1430. }
  1431. .serve-list li:hover .p-fontsiz,
  1432. .serve-list li.active .p-fontsiz {
  1433. top: -3px;
  1434. color: #ffffff;
  1435. }
  1436. .serve-list li:hover .serve_text {
  1437. top: -8px;
  1438. }
  1439. }
  1440. @media screen and (max-width: 360px) {
  1441. .serve-list a {
  1442. float: left;
  1443. width: 23.8%;
  1444. }
  1445. }