index.css 26 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493
  1. body,
  2. html {
  3. width: 100%;
  4. height: 100%;
  5. margin: 0 auto;
  6. font-family: PingFangSC-Regular, sans-serif;
  7. }
  8. body {
  9. font-size: 16px;
  10. }
  11. a {
  12. color: #fff;
  13. }
  14. .container {
  15. width: 100%;
  16. background-color: #f2f2f2;
  17. overflow: hidden;
  18. }
  19. .pc-class{
  20. display: none;
  21. }
  22. .background-image-all {
  23. position: relative;
  24. display: flex;
  25. justify-content: center;
  26. height: 80%;
  27. }
  28. .banner-box {
  29. width: 100%;
  30. min-height: 2rem;
  31. background-color: white;
  32. position: relative;
  33. }
  34. .banner-title {
  35. position: absolute;
  36. top: 28%;
  37. font-size: 0.6rem;
  38. color: white;
  39. }
  40. .banner-title-content {
  41. position: absolute;
  42. top: 48%;
  43. font-size: 0.35rem;
  44. color: white;
  45. }
  46. .banner-img {
  47. width: 100%;
  48. height: auto;
  49. max-height: 100%;
  50. }
  51. .header .icon {
  52. width: 0.7rem;
  53. width: 70px\9;
  54. height: 1rem;
  55. height: 100px\9;
  56. float: left;
  57. }
  58. .icon img {
  59. display: block;
  60. height: 36%;
  61. width: auto;
  62. margin-top: 0.3rem;
  63. margin-top: 5px\9;
  64. }
  65. .main-content {
  66. position: relative;
  67. top: -0.8rem;
  68. z-index: 5;
  69. }
  70. .main-content-title {
  71. width: 100%;
  72. font-size: 0.35rem;
  73. text-align: center;
  74. border-bottom: 1px solid black;
  75. display: flex;
  76. justify-content: center;
  77. position: absolute;
  78. top: 0.2rem;
  79. }
  80. .main-content-title-border {
  81. border-bottom: 2px solid black;
  82. padding-bottom: 0.145rem;
  83. }
  84. .main-content-core {
  85. width: 100%;
  86. display: flex;
  87. justify-content: space-around;
  88. flex-wrap: wrap;
  89. }
  90. .core-box {
  91. margin: 0.5rem;
  92. width: 35%;
  93. display: flex;
  94. flex-direction: column;
  95. justify-content: center;
  96. align-items: center;
  97. }
  98. .core-box h5 {
  99. font-size: 0.24rem;
  100. }
  101. .core-box p {
  102. font-size: 0.16rem;
  103. }
  104. .core-ball {
  105. width: 1.6rem;
  106. height: 1.6rem;
  107. border-radius: 50%;
  108. background-color: #e8e8e8;
  109. margin-bottom: 0.235rem;
  110. position: relative;
  111. }
  112. .excellent-cases {
  113. }
  114. .case-title {
  115. margin-top: 0.375rem;
  116. text-align: left;
  117. font-size: 0.186rem;
  118. color: #ffffff;
  119. padding-left: 0.105rem;
  120. border-left: 2px solid #ffffff;
  121. }
  122. .case-box {
  123. display: flex;
  124. justify-content: space-between;
  125. height: 100%;
  126. }
  127. .case-box .case-one-box {
  128. height: 75%;
  129. width: 55%;
  130. display: flex;
  131. flex-direction: column;
  132. justify-content: space-around;
  133. color: #ffffff;
  134. font-weight: bold;
  135. cursor: pointer;
  136. }
  137. .case-bg-img {
  138. width: 100%;
  139. height: 4rem;
  140. }
  141. .case-box .case-one-box-right {
  142. height: 85%;
  143. width: 45%;
  144. display: flex;
  145. justify-content: center;
  146. align-items: center;
  147. color: #ffffff;
  148. font-weight: bold;
  149. cursor: pointer;
  150. }
  151. .left-box-title {
  152. text-align: left;
  153. }
  154. .left-box-title-active {
  155. color: #00aeff;
  156. margin-left: 0.65rem;
  157. transition: all 0.5s;
  158. }
  159. .active-hide {
  160. opacity: 0.5;
  161. transition: all 0.5s;
  162. }
  163. .left-box-title-big {
  164. font-size: 0.36rem;
  165. margin-bottom: 0.11rem;
  166. }
  167. .phone-none {
  168. display: none;
  169. }
  170. .left-box-title-small {
  171. font-size: 0.01rem;
  172. display: none;
  173. }
  174. .left-box-title-small-show {
  175. font-size: 0.001rem;
  176. /* display: none; */
  177. }
  178. .main-content-core ul {
  179. display: flex;
  180. justify-content: space-around;
  181. height: 2rem;
  182. }
  183. .time-horizontal-content {
  184. padding: 0.6rem 0;
  185. }
  186. .time-horizontal {
  187. list-style-type: none;
  188. border-top: 2px solid #1b1f25;
  189. padding: 0px;
  190. margin: 0px;
  191. position: relative;
  192. top: 1rem;
  193. font-size: 0.1453rem;
  194. width: 90%;
  195. font-weight: 400;
  196. }
  197. .time-horizontal li {
  198. float: left;
  199. position: absolute;
  200. text-align: center;
  201. width: 25%;
  202. padding-top: 10px;
  203. top: -1.6rem;
  204. }
  205. .time-horizontal li b:before {
  206. content: "";
  207. position: absolute;
  208. top: 1.46rem;
  209. left: 47%;
  210. width: 0.21rem;
  211. height: 0.21rem;
  212. border: 2px solid #1b1f25;
  213. border-radius: 50%;
  214. background-color: white;
  215. /* margin: 20px; */
  216. }
  217. .one:before {
  218. content: "2019年";
  219. position: absolute;
  220. top: 1.9rem;
  221. left: 36%;
  222. font-size: 0.1453rem;
  223. font-weight: 400;
  224. }
  225. .two:before {
  226. content: "2020年";
  227. position: absolute;
  228. top: 1.9rem;
  229. left: 36%;
  230. font-size: 0.1453rem;
  231. font-weight: 400;
  232. }
  233. .three:before {
  234. content: "2021年";
  235. position: absolute;
  236. top: 1.9rem;
  237. left: 36%;
  238. font-size: 0.1453rem;
  239. font-weight: 400;
  240. }
  241. .partner-bg-img {
  242. height: 6rem !important;
  243. }
  244. .partner1-main,.partner2-main,.partner3-main {
  245. width: 100%;
  246. display: flex;
  247. justify-content: space-around;
  248. /* flex-wrap: wrap; */
  249. /* margin-top: 0.5rem; */
  250. }
  251. .partner1-main .img-yuan,.partner2-main .img-yuan,.partner3-main .img-yuan {
  252. border-radius: 50%;
  253. overflow: hidden;
  254. background: white;
  255. /* position: absolute; */
  256. display: flex;
  257. align-items: center;
  258. width: 1.2rem;
  259. height: 1.2rem;
  260. margin: 0.1rem 0;
  261. flex-shrink: 0;
  262. }
  263. .partner1-main .img-yuan:hover {
  264. transform: scale(1.3);
  265. }
  266. .partner1-main .img-yuan img,.partner2-main .img-yuan img,.partner3-main .img-yuan img {
  267. width: 100%;
  268. }
  269. @media screen and (min-width: 414px) {
  270. .time-horizontal li {
  271. float: left;
  272. position: absolute;
  273. text-align: center;
  274. width: 25%;
  275. padding-top: 10px;
  276. top: -1.2rem;
  277. }
  278. .time-horizontal li b:before {
  279. content: "";
  280. position: absolute;
  281. top: 1.06rem;
  282. left: 47%;
  283. width: 0.21rem;
  284. height: 0.21rem;
  285. border: 2px solid #1b1f25;
  286. border-radius: 50%;
  287. background-color: white;
  288. /* margin: 20px; */
  289. }
  290. .one:before {
  291. content: "2019年";
  292. position: absolute;
  293. top: 1.5rem;
  294. left: 36%;
  295. font-size: 0.1453rem;
  296. font-weight: 400;
  297. }
  298. .two:before {
  299. content: "2020年";
  300. position: absolute;
  301. top: 1.5rem;
  302. left: 36%;
  303. font-size: 0.1453rem;
  304. font-weight: 400;
  305. }
  306. .three:before {
  307. content: "2021年";
  308. position: absolute;
  309. top: 1.5rem;
  310. left: 36%;
  311. font-size: 0.1453rem;
  312. font-weight: 400;
  313. }
  314. }
  315. @media screen and (min-width: 1025px) {
  316. .main {
  317. width: 62.5%;
  318. margin: 0 auto;
  319. }
  320. .header .icon {
  321. width: 0.7rem;
  322. width: 70px\9;
  323. height: 1rem;
  324. height: 100px\9;
  325. float: left;
  326. }
  327. .icon img {
  328. display: block;
  329. height: 50%;
  330. width: auto;
  331. margin-top: 0.3rem;
  332. margin-top: 5px\9;
  333. }
  334. .wenan::before {
  335. width: 25%;
  336. top: 0.15rem;
  337. left: 6%;
  338. }
  339. .wenan::after {
  340. width: 25%;
  341. top: 0.15rem;
  342. top: 15px\9;
  343. right: 6%;
  344. }
  345. .footer {
  346. padding: 0.2rem 20%;
  347. padding: 20px 20% \9;
  348. }
  349. .footer .infobox {
  350. float: left;
  351. }
  352. .chuli {
  353. position: relative;
  354. top: 0;
  355. left: 0.12rem;
  356. left: 12px\9;
  357. }
  358. .email {
  359. margin-left: 0.4rem;
  360. }
  361. .team .iconbox p {
  362. font-size: 0.18rem;
  363. font-size: 18px\9;
  364. }
  365. .team .iconbox {
  366. width: 20%;
  367. float: left;
  368. overflow: hidden;
  369. text-align: center;
  370. color: #b6885d;
  371. font-size: 0.18rem;
  372. font-size: 18px\9;
  373. }
  374. .team .iconbox img {
  375. width: 70%;
  376. }
  377. .team-bottm .KStip {
  378. right: 6%;
  379. top: 35%;
  380. }
  381. .team-bottm .DYtip {
  382. left: 10%;
  383. bottom: 20%;
  384. }
  385. }
  386. @media screen and (min-width: 768px) and (max-width: 1024px) {
  387. .main {
  388. width: 96%;
  389. margin: 0 auto;
  390. }
  391. .header .icon {
  392. width: 0.7rem;
  393. width: 70px\9;
  394. height: 1rem;
  395. height: 100px\9;
  396. float: left;
  397. }
  398. .icon img {
  399. display: block;
  400. height: 36%;
  401. width: auto;
  402. margin-top: 0.3rem;
  403. margin-top: 5px\9;
  404. }
  405. .wenan::before {
  406. width: 25%;
  407. top: 0.15rem;
  408. top: 15px\9;
  409. left: 0.6rem;
  410. left: 60px\9;
  411. }
  412. .wenan::after {
  413. width: 25%;
  414. top: 0.15rem;
  415. top: 15px\9;
  416. right: 0.6rem;
  417. left: 60px\9;
  418. }
  419. .footer {
  420. padding: 0.2rem 2%;
  421. }
  422. .footer .infobox {
  423. float: none;
  424. }
  425. .team .iconbox p {
  426. font-size: 0.12rem;
  427. }
  428. .team .iconbox {
  429. width: 20%;
  430. float: left;
  431. overflow: hidden;
  432. text-align: center;
  433. color: #b6885d;
  434. font-size: 0.18rem;
  435. }
  436. .team .iconbox img {
  437. width: 70%;
  438. }
  439. .team-bottm .KStip {
  440. right: 6%;
  441. top: 40%;
  442. }
  443. .team-bottm .DYtip {
  444. left: 10%;
  445. bottom: 15%;
  446. }
  447. .time-horizontal li {
  448. float: left;
  449. position: absolute;
  450. text-align: center;
  451. width: 25%;
  452. padding-top: 10px;
  453. top: -0.8rem;
  454. }
  455. .time-horizontal li b:before {
  456. content: "";
  457. position: absolute;
  458. top: 0.65rem;
  459. left: 47%;
  460. width: 0.21rem;
  461. height: 0.21rem;
  462. border: 2px solid #1b1f25;
  463. border-radius: 50%;
  464. background-color: white;
  465. /* margin: 20px; */
  466. }
  467. .one:before {
  468. content: "2019年";
  469. position: absolute;
  470. top: 1.1rem;
  471. left: 36%;
  472. font-size: 0.1453rem;
  473. font-weight: 400;
  474. }
  475. .two:before {
  476. content: "2020年";
  477. position: absolute;
  478. top: 1.1rem;
  479. left: 36%;
  480. font-size: 0.1453rem;
  481. font-weight: 400;
  482. }
  483. .three:before {
  484. content: "2021年";
  485. position: absolute;
  486. top: 1.1rem;
  487. left: 36%;
  488. font-size: 0.1453rem;
  489. font-weight: 400;
  490. }
  491. }
  492. @media screen and (max-width: 767px) {
  493. .main {
  494. width: 96%;
  495. margin: 0 auto;
  496. }
  497. .wenan::before {
  498. width: 1.8rem;
  499. top: 0.15rem;
  500. left: 0.3rem;
  501. }
  502. .wenan::after {
  503. width: 1.8rem;
  504. top: 0.15rem;
  505. right: 0.3rem;
  506. }
  507. .footer {
  508. padding: 0.2rem 2%;
  509. }
  510. .footer .infobox {
  511. float: none;
  512. }
  513. .team .iconbox p {
  514. font-size: 0.12rem;
  515. font-size: 12px\9;
  516. /* white-space:nowrap */
  517. }
  518. .team .iconbox {
  519. width: 33.3%;
  520. float: left;
  521. overflow: hidden;
  522. text-align: center;
  523. color: #b6885d;
  524. font-size: 0.18rem;
  525. font-size: 18px\9;
  526. margin-bottom: 0.3rem;
  527. }
  528. .team .iconbox img {
  529. width: 70%;
  530. }
  531. .team .iconbox:last-child,
  532. .team .iconbox.four {
  533. width: 50%;
  534. float: left;
  535. overflow: hidden;
  536. text-align: center;
  537. color: #b6885d;
  538. font-size: 0.18rem;
  539. font-size: 18px\9;
  540. margin-bottom: 0;
  541. }
  542. .team .iconbox.four img {
  543. width: 48%;
  544. margin-left: 30%;
  545. }
  546. .team .iconbox.four p {
  547. margin-left: 30%;
  548. }
  549. .team .iconbox.last img {
  550. width: 48.1%;
  551. margin-right: 20%;
  552. /* margin-bottom: 1.5px; */
  553. }
  554. .team .iconbox.last p {
  555. margin-right: 10%;
  556. }
  557. .team-bottm .KStip {
  558. right: 7%;
  559. top: 40%;
  560. }
  561. .team-bottm .DYtip {
  562. left: 11%;
  563. bottom: 15%;
  564. }
  565. .video {
  566. height: 3.55rem;
  567. }
  568. }
  569. .header {
  570. width: 100%;
  571. height: 1rem;
  572. height: 100px\9;
  573. overflow: hidden;
  574. }
  575. .nav {
  576. height: 100%;
  577. float: right;
  578. }
  579. .nav ul {
  580. margin: 0;
  581. padding: 0;
  582. height: 100%;
  583. overflow: hidden;
  584. line-height: 1rem;
  585. line-height: 100px\9;
  586. }
  587. .nav ul li {
  588. float: left;
  589. height: 100%;
  590. padding: 0 5px;
  591. line-height: 1rem;
  592. line-height: 100px\9;
  593. font-size: 0.36rem;
  594. font-size: 36px\9;
  595. color: #fff;
  596. }
  597. .nav a {
  598. display: inline-block;
  599. /* width: 1.08rem;
  600. width: 108px\9; */
  601. height: 0.98rem;
  602. height: 98px\9;
  603. line-height: 0.98rem;
  604. line-height: 98px\9;
  605. font-size: 0.18rem;
  606. font-size: 18px\9;
  607. font-family: PingFangSC-Regular, sans-serif;
  608. }
  609. .nav ul li.active {
  610. background-color: #b6885d;
  611. }
  612. /* bannner样式 */
  613. .banner {
  614. width: 100%;
  615. /* height: 6.64rem; */
  616. }
  617. #myvideo {
  618. width: 100%;
  619. height: 100%;
  620. }
  621. /* 作品展示 */
  622. .section {
  623. margin-top: 0.6rem;
  624. margin-top: 60px\9;
  625. }
  626. .showWork {
  627. position: relative;
  628. }
  629. .showWork .title {
  630. font-size: 0.36rem;
  631. color: #b6885d;
  632. margin-bottom: 0.22rem;
  633. }
  634. .showWork .title .yuandian {
  635. font-size: 0.4rem;
  636. }
  637. .showWork .desc {
  638. font-size: 0.24rem;
  639. color: #b6885d;
  640. margin-bottom: 0.55rem;
  641. position: relative;
  642. }
  643. .wenan::before {
  644. content: "";
  645. display: inline-block;
  646. height: 3px;
  647. background-image: url(../images/line.png);
  648. background-size: contain;
  649. position: absolute;
  650. }
  651. .wenan::after {
  652. content: "";
  653. display: inline-block;
  654. height: 3px;
  655. background-image: url(../images/line.png);
  656. background-size: contain;
  657. position: absolute;
  658. }
  659. .videoshow {
  660. overflow: hidden;
  661. width: 78%;
  662. /* height: 4.3rem; */
  663. margin: 0 auto;
  664. }
  665. .videoshow .leftArrow {
  666. width: 0.31rem;
  667. height: 0.648rem;
  668. position: absolute;
  669. left: 0;
  670. top: 50%;
  671. cursor: pointer;
  672. }
  673. .videoshow .leftArrow img {
  674. position: absolute;
  675. top: 0;
  676. right: 0;
  677. }
  678. .videoshow .video {
  679. width: 100%;
  680. }
  681. .videoshow .video-item .video-title {
  682. margin-top: 14px;
  683. font-size: 0.24rem;
  684. color: #fff;
  685. text-align: center;
  686. margin: 0;
  687. padding: 0;
  688. white-space: nowrap;
  689. }
  690. .videoshow .video-item {
  691. float: left;
  692. width: 30%;
  693. margin-right: 3%;
  694. font-size: 0.24rem;
  695. position: relative;
  696. }
  697. .box {
  698. font-size: 0.24rem;
  699. }
  700. .videoshow .video-item:nth-child(4) {
  701. margin-right: 0;
  702. }
  703. /* .videoshow .video-item:hover{
  704. transform: translateY(-10px);
  705. } */
  706. .hide {
  707. display: none;
  708. }
  709. .videoshow .video-item .play {
  710. width: 30%;
  711. position: absolute;
  712. top: 50%;
  713. margin-top: -15%;
  714. left: 50%;
  715. margin-left: -15%;
  716. cursor: pointer;
  717. z-index: 3;
  718. }
  719. .showWork .gomore {
  720. display: block;
  721. width: 1.42rem;
  722. height: 0.46rem;
  723. margin: 0 auto;
  724. font-size: 0.24rem;
  725. margin-top: 0.4rem;
  726. color: #b6885d;
  727. border: 1px solid #b6885d;
  728. border-radius: 0.1rem;
  729. line-height: 0.46rem;
  730. }
  731. .company {
  732. margin-top: 0.6rem;
  733. }
  734. .companyImg {
  735. width: 100%;
  736. margin-top: 0.38px;
  737. margin-bottom: 0.82rem;
  738. }
  739. .companyImg img {
  740. width: 100%;
  741. margin-top: 0.4rem;
  742. }
  743. .team {
  744. overflow: hidden;
  745. }
  746. .showicon {
  747. display: flex;
  748. justify-content: space-around;
  749. flex-wrap: wrap;
  750. }
  751. .team .iconbox p {
  752. margin-top: 0.1rem;
  753. /* white-space:nowrap */
  754. }
  755. .teamImg {
  756. width: 100%;
  757. }
  758. .teamImg img {
  759. width: 100%;
  760. margin-top: 0.38rem;
  761. }
  762. .team-bottm {
  763. text-align: center;
  764. position: relative;
  765. /* overflow: hidden; */
  766. }
  767. .team-bottm .yrzh1 {
  768. width: 25%;
  769. position: relative;
  770. top: 0.6rem;
  771. left: 0%;
  772. margin-left: -5%;
  773. }
  774. .team-bottm .kuaishou {
  775. width: 15%;
  776. position: absolute;
  777. top: 1rem;
  778. right: 22%;
  779. display: none;
  780. }
  781. .kuaishou.show {
  782. display: inline-block;
  783. animation: bounceInRight 1.5s linear;
  784. -ms-animation: bounceInRight 1.5s linear;
  785. }
  786. .team-bottm .douyin {
  787. width: 17%;
  788. position: absolute;
  789. top: 0.6rem;
  790. left: 23.5%;
  791. display: none;
  792. }
  793. .douyin.show {
  794. display: inline-block;
  795. animation: bounceInLeft 1.5s linear;
  796. -ms-animation: bounceInLeft 1.5s linear;
  797. }
  798. .team-bottm .KStip {
  799. width: 20%;
  800. position: absolute;
  801. display: inline-block;
  802. display: none;
  803. }
  804. .KStip.show {
  805. display: inline-block;
  806. animation: bounceInDown 1s linear;
  807. -ms-animation: bounceInDown 1s linear;
  808. }
  809. .team-bottm .DYtip {
  810. width: 20%;
  811. position: absolute;
  812. display: inline-block;
  813. display: none;
  814. }
  815. .DYtip.show {
  816. display: inline-block;
  817. animation: bounceInUp 1s linear;
  818. -ms-animation: bounceInUp 1s linear;
  819. }
  820. /* hezuokehu */
  821. .customers {
  822. margin-bottom: 0.42rem;
  823. }
  824. .show-customers {
  825. display: flex;
  826. justify-content: space-around;
  827. }
  828. .show-customers .itembox {
  829. width: 11%;
  830. }
  831. .itembox img {
  832. width: 100%;
  833. }
  834. /* 页脚 */
  835. .footer {
  836. box-sizing: border-box;
  837. width: 100%;
  838. background: rgb(27, 31, 37);
  839. }
  840. .footer .title {
  841. font-size: 0.2rem;
  842. margin-bottom: 0.2rem;
  843. }
  844. .footer ul {
  845. display: flex;
  846. justify-content: space-between;
  847. }
  848. .footer ul li {
  849. float: left;
  850. color: #fff;
  851. }
  852. .footer ul li span {
  853. font-size: 0.2rem;
  854. }
  855. .footer .info {
  856. font-size: 0.16rem;
  857. color: #fff;
  858. }
  859. .footer .infobox {
  860. text-align: left;
  861. margin-right: 0.3rem;
  862. font-size: 0.16rem;
  863. margin-bottom: 0.1rem;
  864. }
  865. .footer .box {
  866. overflow: hidden;
  867. font-size: 0.18rem;
  868. margin-right: 0.11rem;
  869. }
  870. .footer .infobox img {
  871. width: 0.2rem;
  872. }
  873. .clearfix::after {
  874. content: "";
  875. display: block;
  876. height: 0;
  877. clear: both;
  878. }
  879. .beian {
  880. text-align: left;
  881. }
  882. .beianinfo {
  883. display: inline-block;
  884. margin-left: 0.45rem;
  885. }
  886. .footer .clear-right {
  887. margin-right: 0;
  888. }
  889. /* 返回顶部按钮 */
  890. .aside {
  891. display: block;
  892. width: 0.3rem;
  893. height: 0.3rem;
  894. position: fixed;
  895. bottom: 0.4rem;
  896. right: 0.4rem;
  897. cursor: pointer;
  898. display: none;
  899. }
  900. .aside img {
  901. width: 100%;
  902. position: absolute;
  903. top: 0;
  904. left: 0;
  905. }
  906. .aside.show {
  907. display: block;
  908. }
  909. @keyframes bounceInDown {
  910. 0%,
  911. 60%,
  912. 75%,
  913. 90%,
  914. 100% {
  915. -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  916. transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  917. }
  918. 0% {
  919. opacity: 0;
  920. -webkit-transform: translate3d(0, -3000px, 0);
  921. transform: translate3d(0, -3000px, 0);
  922. }
  923. 60% {
  924. opacity: 1;
  925. -webkit-transform: translate3d(0, 25px, 0);
  926. transform: translate3d(0, 25px, 0);
  927. }
  928. 75% {
  929. -webkit-transform: translate3d(0, -10px, 0);
  930. transform: translate3d(0, -10px, 0);
  931. }
  932. 90% {
  933. -webkit-transform: translate3d(0, 5px, 0);
  934. transform: translate3d(0, 5px, 0);
  935. }
  936. 100% {
  937. -webkit-transform: none;
  938. transform: none;
  939. }
  940. }
  941. @-webkit-keyframes bounceInDown {
  942. 0%,
  943. 60%,
  944. 75%,
  945. 90%,
  946. 100% {
  947. -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  948. transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  949. }
  950. 0% {
  951. opacity: 0;
  952. -webkit-transform: translate3d(0, -3000px, 0);
  953. transform: translate3d(0, -3000px, 0);
  954. }
  955. 60% {
  956. opacity: 1;
  957. -webkit-transform: translate3d(0, 25px, 0);
  958. transform: translate3d(0, 25px, 0);
  959. }
  960. 75% {
  961. -webkit-transform: translate3d(0, -10px, 0);
  962. transform: translate3d(0, -10px, 0);
  963. }
  964. 90% {
  965. -webkit-transform: translate3d(0, 5px, 0);
  966. transform: translate3d(0, 5px, 0);
  967. }
  968. 100% {
  969. -webkit-transform: none;
  970. transform: none;
  971. }
  972. }
  973. @-webkit-keyframes bounceInDown {
  974. 0%,
  975. 60%,
  976. 75%,
  977. 90%,
  978. 100% {
  979. -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  980. transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  981. }
  982. 0% {
  983. opacity: 0;
  984. -webkit-transform: translate3d(0, -3000px, 0);
  985. transform: translate3d(0, -3000px, 0);
  986. }
  987. 60% {
  988. opacity: 1;
  989. -webkit-transform: translate3d(0, 25px, 0);
  990. transform: translate3d(0, 25px, 0);
  991. }
  992. 75% {
  993. -webkit-transform: translate3d(0, -10px, 0);
  994. transform: translate3d(0, -10px, 0);
  995. }
  996. 90% {
  997. -webkit-transform: translate3d(0, 5px, 0);
  998. transform: translate3d(0, 5px, 0);
  999. }
  1000. 100% {
  1001. -webkit-transform: none;
  1002. transform: none;
  1003. }
  1004. }
  1005. @-ms-keyframes bounceInDown {
  1006. 0%,
  1007. 60%,
  1008. 75%,
  1009. 90%,
  1010. 100% {
  1011. -ms-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  1012. transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  1013. }
  1014. 0% {
  1015. opacity: 0;
  1016. -ms-transform: translate3d(0, -3000px, 0);
  1017. transform: translate3d(0, -3000px, 0);
  1018. }
  1019. 60% {
  1020. opacity: 1;
  1021. -ms-transform: translate3d(0, 25px, 0);
  1022. transform: translate3d(0, 25px, 0);
  1023. }
  1024. 75% {
  1025. -ms-transform: translate3d(0, -10px, 0);
  1026. transform: translate3d(0, -10px, 0);
  1027. }
  1028. 90% {
  1029. -ms-transform: translate3d(0, 5px, 0);
  1030. transform: translate3d(0, 5px, 0);
  1031. }
  1032. 100% {
  1033. -ms-transform: none;
  1034. transform: none;
  1035. }
  1036. }
  1037. .bounceInDown {
  1038. -webkit-animation-name: bounceInDown;
  1039. -ms-animation-name: bounceInDown;
  1040. animation-name: bounceInDown;
  1041. }
  1042. @-webkit-keyframes bounceInLeft {
  1043. 0%,
  1044. 60%,
  1045. 75%,
  1046. 90%,
  1047. 100% {
  1048. -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  1049. transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  1050. }
  1051. 0% {
  1052. opacity: 0;
  1053. -webkit-transform: translate3d(-3000px, 0, 0);
  1054. transform: translate3d(-3000px, 0, 0);
  1055. }
  1056. 60% {
  1057. opacity: 1;
  1058. -webkit-transform: translate3d(25px, 0, 0);
  1059. transform: translate3d(25px, 0, 0);
  1060. }
  1061. 75% {
  1062. -webkit-transform: translate3d(-10px, 0, 0);
  1063. transform: translate3d(-10px, 0, 0);
  1064. }
  1065. 90% {
  1066. -webkit-transform: translate3d(5px, 0, 0);
  1067. transform: translate3d(5px, 0, 0);
  1068. }
  1069. 100% {
  1070. -webkit-transform: none;
  1071. transform: none;
  1072. }
  1073. }
  1074. @-webkit-keyframes bounceInLeft {
  1075. 0%,
  1076. 60%,
  1077. 75%,
  1078. 90%,
  1079. 100% {
  1080. -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  1081. transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  1082. }
  1083. 0% {
  1084. opacity: 0;
  1085. -webkit-transform: translate3d(-3000px, 0, 0);
  1086. transform: translate3d(-3000px, 0, 0);
  1087. }
  1088. 60% {
  1089. opacity: 1;
  1090. -webkit-transform: translate3d(25px, 0, 0);
  1091. transform: translate3d(25px, 0, 0);
  1092. }
  1093. 75% {
  1094. -webkit-transform: translate3d(-10px, 0, 0);
  1095. transform: translate3d(-10px, 0, 0);
  1096. }
  1097. 90% {
  1098. -webkit-transform: translate3d(5px, 0, 0);
  1099. transform: translate3d(5px, 0, 0);
  1100. }
  1101. 100% {
  1102. -webkit-transform: none;
  1103. transform: none;
  1104. }
  1105. }
  1106. @keyframes bounceInLeft {
  1107. 0%,
  1108. 60%,
  1109. 75%,
  1110. 90%,
  1111. 100% {
  1112. -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  1113. transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  1114. }
  1115. 0% {
  1116. opacity: 0;
  1117. -webkit-transform: translate3d(-3000px, 0, 0);
  1118. transform: translate3d(-3000px, 0, 0);
  1119. }
  1120. 60% {
  1121. opacity: 1;
  1122. -webkit-transform: translate3d(25px, 0, 0);
  1123. transform: translate3d(25px, 0, 0);
  1124. }
  1125. 75% {
  1126. -webkit-transform: translate3d(-10px, 0, 0);
  1127. transform: translate3d(-10px, 0, 0);
  1128. }
  1129. 90% {
  1130. -webkit-transform: translate3d(5px, 0, 0);
  1131. transform: translate3d(5px, 0, 0);
  1132. }
  1133. 100% {
  1134. -webkit-transform: none;
  1135. transform: none;
  1136. }
  1137. }
  1138. @-ms-keyframes bounceInLeft {
  1139. 0%,
  1140. 60%,
  1141. 75%,
  1142. 90%,
  1143. 100% {
  1144. -ms-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  1145. transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  1146. }
  1147. 0% {
  1148. opacity: 0;
  1149. -ms-transform: translate3d(-3000px, 0, 0);
  1150. transform: translate3d(-3000px, 0, 0);
  1151. }
  1152. 60% {
  1153. opacity: 1;
  1154. -ms-transform: translate3d(25px, 0, 0);
  1155. transform: translate3d(25px, 0, 0);
  1156. }
  1157. 75% {
  1158. -ms-transform: translate3d(-10px, 0, 0);
  1159. transform: translate3d(-10px, 0, 0);
  1160. }
  1161. 90% {
  1162. -ms-transform: translate3d(5px, 0, 0);
  1163. transform: translate3d(5px, 0, 0);
  1164. }
  1165. 100% {
  1166. -ms-transform: none;
  1167. transform: none;
  1168. }
  1169. }
  1170. .bounceInLeft {
  1171. -webkit-animation-name: bounceInLeft;
  1172. -ms-animation-name: bounceInLeft;
  1173. animation-name: bounceInLeft;
  1174. }
  1175. @-webkit-keyframes bounceInRight {
  1176. 0%,
  1177. 60%,
  1178. 75%,
  1179. 90%,
  1180. 100% {
  1181. -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  1182. transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  1183. }
  1184. 0% {
  1185. opacity: 0;
  1186. -webkit-transform: translate3d(3000px, 0, 0);
  1187. transform: translate3d(3000px, 0, 0);
  1188. }
  1189. 60% {
  1190. opacity: 1;
  1191. -webkit-transform: translate3d(-25px, 0, 0);
  1192. transform: translate3d(-25px, 0, 0);
  1193. }
  1194. 75% {
  1195. -webkit-transform: translate3d(10px, 0, 0);
  1196. transform: translate3d(10px, 0, 0);
  1197. }
  1198. 90% {
  1199. -webkit-transform: translate3d(-5px, 0, 0);
  1200. transform: translate3d(-5px, 0, 0);
  1201. }
  1202. 100% {
  1203. -webkit-transform: none;
  1204. transform: none;
  1205. }
  1206. }
  1207. @keyframes bounceInRight {
  1208. 0%,
  1209. 60%,
  1210. 75%,
  1211. 90%,
  1212. 100% {
  1213. -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  1214. transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  1215. }
  1216. 0% {
  1217. opacity: 0;
  1218. -webkit-transform: translate3d(3000px, 0, 0);
  1219. transform: translate3d(3000px, 0, 0);
  1220. }
  1221. 60% {
  1222. opacity: 1;
  1223. -webkit-transform: translate3d(-25px, 0, 0);
  1224. transform: translate3d(-25px, 0, 0);
  1225. }
  1226. 75% {
  1227. -webkit-transform: translate3d(10px, 0, 0);
  1228. transform: translate3d(10px, 0, 0);
  1229. }
  1230. 90% {
  1231. -webkit-transform: translate3d(-5px, 0, 0);
  1232. transform: translate3d(-5px, 0, 0);
  1233. }
  1234. 100% {
  1235. -webkit-transform: none;
  1236. transform: none;
  1237. }
  1238. }
  1239. @-ms-keyframes bounceInRight {
  1240. 0%,
  1241. 60%,
  1242. 75%,
  1243. 90%,
  1244. 100% {
  1245. -ms-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  1246. transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  1247. }
  1248. 0% {
  1249. opacity: 0;
  1250. -ms-transform: translate3d(3000px, 0, 0);
  1251. transform: translate3d(3000px, 0, 0);
  1252. }
  1253. 60% {
  1254. opacity: 1;
  1255. -ms-transform: translate3d(-25px, 0, 0);
  1256. transform: translate3d(-25px, 0, 0);
  1257. }
  1258. 75% {
  1259. -ms-transform: translate3d(10px, 0, 0);
  1260. transform: translate3d(10px, 0, 0);
  1261. }
  1262. 90% {
  1263. -ms-transform: translate3d(-5px, 0, 0);
  1264. transform: translate3d(-5px, 0, 0);
  1265. }
  1266. 100% {
  1267. -ms-transform: none;
  1268. transform: none;
  1269. }
  1270. }
  1271. .bounceInRight {
  1272. -webkit-animation-name: bounceInRight;
  1273. -ms-animation-name: bounceInRight;
  1274. animation-name: bounceInRight;
  1275. }
  1276. @-webkit-keyframes bounceInUp {
  1277. 0%,
  1278. 60%,
  1279. 75%,
  1280. 90%,
  1281. 100% {
  1282. -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  1283. transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  1284. }
  1285. 0% {
  1286. opacity: 0;
  1287. -webkit-transform: translate3d(0, 3000px, 0);
  1288. transform: translate3d(0, 3000px, 0);
  1289. }
  1290. 60% {
  1291. opacity: 1;
  1292. -webkit-transform: translate3d(0, -20px, 0);
  1293. transform: translate3d(0, -20px, 0);
  1294. }
  1295. 75% {
  1296. -webkit-transform: translate3d(0, 10px, 0);
  1297. transform: translate3d(0, 10px, 0);
  1298. }
  1299. 90% {
  1300. -webkit-transform: translate3d(0, -5px, 0);
  1301. transform: translate3d(0, -5px, 0);
  1302. }
  1303. 100% {
  1304. -webkit-transform: translate3d(0, 0, 0);
  1305. transform: translate3d(0, 0, 0);
  1306. }
  1307. }
  1308. @keyframes bounceInUp {
  1309. 0%,
  1310. 60%,
  1311. 75%,
  1312. 90%,
  1313. 100% {
  1314. -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  1315. transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  1316. }
  1317. 0% {
  1318. opacity: 0;
  1319. -webkit-transform: translate3d(0, 3000px, 0);
  1320. transform: translate3d(0, 3000px, 0);
  1321. }
  1322. 60% {
  1323. opacity: 1;
  1324. -webkit-transform: translate3d(0, -20px, 0);
  1325. transform: translate3d(0, -20px, 0);
  1326. }
  1327. 75% {
  1328. -webkit-transform: translate3d(0, 10px, 0);
  1329. transform: translate3d(0, 10px, 0);
  1330. }
  1331. 90% {
  1332. -webkit-transform: translate3d(0, -5px, 0);
  1333. transform: translate3d(0, -5px, 0);
  1334. }
  1335. 100% {
  1336. -webkit-transform: translate3d(0, 0, 0);
  1337. transform: translate3d(0, 0, 0);
  1338. }
  1339. }
  1340. .bounceInUp {
  1341. -webkit-animation-name: bounceInUp;
  1342. -ms-animation-name: bounceInUp;
  1343. animation-name: bounceInUp;
  1344. }
  1345. @-ms-keyframes bounceInUp {
  1346. 0%,
  1347. 60%,
  1348. 75%,
  1349. 90%,
  1350. 100% {
  1351. -ms-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  1352. transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  1353. }
  1354. 0% {
  1355. opacity: 0;
  1356. -ms-transform: translate3d(0, 3000px, 0);
  1357. transform: translate3d(0, 3000px, 0);
  1358. }
  1359. 60% {
  1360. opacity: 1;
  1361. -ms-transform: translate3d(0, -20px, 0);
  1362. transform: translate3d(0, -20px, 0);
  1363. }
  1364. 75% {
  1365. -ms-transform: translate3d(0, 10px, 0);
  1366. transform: translate3d(0, 10px, 0);
  1367. }
  1368. 90% {
  1369. -ms-transform: translate3d(0, -5px, 0);
  1370. transform: translate3d(0, -5px, 0);
  1371. }
  1372. 100% {
  1373. -ms-transform: translate3d(0, 0, 0);
  1374. transform: translate3d(0, 0, 0);
  1375. }
  1376. }