富茂链客Pcg官网
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

1579 lines
28 KiB

  1. body {
  2. overflow-x: hidden;
  3. }
  4. .mySwiper {
  5. width: 100vw!important;
  6. }
  7. .swiper-wrapper {
  8. width: 100vw!important;
  9. }
  10. .swiper-slide {
  11. width: 100%!important;
  12. }
  13. .concentrationBox {
  14. width: 100%;
  15. margin-top: 80px;
  16. /* background: linear-gradient(0deg, #071688, #163FC4); */
  17. cursor: pointer;
  18. }
  19. h3 {
  20. text-align: center;
  21. height: 228px;
  22. line-height: 228px;
  23. font-size: 54px;
  24. font-family: OPPOSans;
  25. font-weight: bold;
  26. color: #202530;
  27. }
  28. .modeBox {
  29. width: 96%;
  30. margin: 0 auto;
  31. }
  32. .privateBox {
  33. overflow: hidden;
  34. }
  35. .private {
  36. width: 49%;
  37. height: 310px;
  38. margin-right: 1%;
  39. /* background: #0E1542; */
  40. background-image: url('https://formall.oss-accelerate.aliyuncs.com/home/pc/fmPcImg/shouye/home_jjfa_img_1.png');
  41. background-repeat: no-repeat;
  42. background-size: 100% 100%;
  43. float: left;
  44. position: relative;
  45. }
  46. .private:hover .goIntegration {
  47. display: block;
  48. margin-top: 88px;
  49. margin-left: 30px;
  50. width: 168px;
  51. height: 50px;
  52. line-height: 50px;
  53. text-align: center;
  54. background: #FFFFFF;
  55. box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.53);
  56. border-radius: 6px;
  57. font-size: 20px;
  58. font-family: OPPOSans;
  59. font-weight: 500;
  60. color: #08188A;
  61. }
  62. .private:hover .privateHie {
  63. display: none;
  64. }
  65. .privateHie {
  66. position: absolute;
  67. width: 100%;
  68. height: 100%;
  69. background-color: rgba(0, 0, 0, 0.3);
  70. top: 0;
  71. left: 0;
  72. display: block;
  73. }
  74. .privateText {
  75. width: 312px;
  76. height: 69px;
  77. font-size: 24px;
  78. font-family: Microsoft YaHei;
  79. font-weight: bold;
  80. color: #FFFFFF;
  81. line-height: 45px;
  82. text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.53);
  83. margin-top: 63px;
  84. margin-left: 30px;
  85. }
  86. .goPrivate {
  87. display: block;
  88. margin-top: 88px;
  89. margin-left: 30px;
  90. width: 168px;
  91. height: 50px;
  92. line-height: 50px;
  93. text-align: center;
  94. background: #FFFFFF;
  95. box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.53);
  96. border-radius: 6px;
  97. font-size: 20px;
  98. font-family: OPPOSans;
  99. font-weight: 500;
  100. color: #08188A;
  101. }
  102. .goDigitization {
  103. display: block;
  104. margin-top: 88px;
  105. margin-left: 30px;
  106. width: 168px;
  107. height: 50px;
  108. line-height: 50px;
  109. text-align: center;
  110. /* box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.53); */
  111. border-radius: 6px;
  112. border: 2px solid #FFFFFF;
  113. font-size: 20px;
  114. font-family: OPPOSans;
  115. font-weight: 500;
  116. color: #ffffff;
  117. border: 2px solid #FFFFFF;
  118. }
  119. .digitization {
  120. background-image: url("https://formall.oss-accelerate.aliyuncs.com/home/pc/fmPcImg/shouye/home_jjfa_img4_1.png");
  121. background-repeat: no-repeat;
  122. width: 49%;
  123. height: 310px;
  124. float: right;
  125. position: relative;
  126. background-size: 100% 100%;
  127. }
  128. .digitization:hover .goIntegration {
  129. display: block;
  130. margin-top: 88px;
  131. margin-left: 30px;
  132. width: 168px;
  133. height: 50px;
  134. line-height: 50px;
  135. text-align: center;
  136. background: #FFFFFF;
  137. box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.53);
  138. border-radius: 6px;
  139. font-size: 20px;
  140. font-family: OPPOSans;
  141. font-weight: 500;
  142. color: #08188A;
  143. }
  144. .digitization:hover .digitizationHie {
  145. display: none;
  146. }
  147. .digitizationHie {
  148. position: absolute;
  149. width: 100%;
  150. height: 100%;
  151. background-color: rgba(0, 0, 0, 0.3);
  152. top: 0;
  153. left: 0;
  154. display: block;
  155. }
  156. .integrationBox {
  157. margin-top: 30px;
  158. margin-bottom: 102px;
  159. display: flex;
  160. justify-content: space-between;
  161. }
  162. .integrationItem {
  163. position: relative;
  164. width: 32%;
  165. height: 310px;
  166. background-image: url("https://formall.oss-accelerate.aliyuncs.com/home/pc/fmPcImg/shouye/home_jjfa_img3.png");
  167. background-repeat: no-repeat;
  168. background-size: 100% 100%;
  169. }
  170. .integrationItemHie {
  171. position: absolute;
  172. width: 100%;
  173. height: 100%;
  174. background-color: rgba(0, 0, 0, 0.3);
  175. top: 0;
  176. left: 0;
  177. display: block;
  178. }
  179. .integrationItem:hover .goIntegration {
  180. display: block;
  181. margin-top: 88px;
  182. margin-left: 30px;
  183. width: 168px;
  184. height: 50px;
  185. line-height: 50px;
  186. text-align: center;
  187. background: #FFFFFF;
  188. box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.53);
  189. border-radius: 6px;
  190. font-size: 20px;
  191. font-family: OPPOSans;
  192. font-weight: 500;
  193. color: #08188A;
  194. }
  195. .integrationItem:hover .integrationItemHie {
  196. display: none;
  197. }
  198. .integrationItem2 {
  199. position: relative;
  200. width: 32%;
  201. height: 310px;
  202. background-image: url("https://formall.oss-accelerate.aliyuncs.com/home/pc/fmPcImg/shouye/home_jjfa_img2_1.png");
  203. background-repeat: no-repeat;
  204. background-size: 100% 100%;
  205. }
  206. .integrationItem2Hie {
  207. position: absolute;
  208. width: 100%;
  209. height: 100%;
  210. background-color: rgba(0, 0, 0, 0.3);
  211. top: 0;
  212. left: 0;
  213. display: block;
  214. }
  215. .integrationItem2:hover .goIntegration {
  216. display: block;
  217. margin-top: 88px;
  218. margin-left: 30px;
  219. width: 168px;
  220. height: 50px;
  221. line-height: 50px;
  222. text-align: center;
  223. background: #FFFFFF;
  224. box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.53);
  225. border-radius: 6px;
  226. font-size: 20px;
  227. font-family: OPPOSans;
  228. font-weight: 500;
  229. color: #08188A;
  230. }
  231. .integrationItem2:hover .integrationItem2Hie {
  232. display: none;
  233. }
  234. .integrationItem3 {
  235. position: relative;
  236. width: 32%;
  237. height: 310px;
  238. background-image: url("https://formall.oss-accelerate.aliyuncs.com/home/pc/fmPcImg/shouye/home_jjfa_img5_1.png");
  239. background-repeat: no-repeat;
  240. background-size: 100% 100%;
  241. }
  242. .integrationItem3Hie {
  243. position: absolute;
  244. width: 100%;
  245. height: 100%;
  246. background-color: rgba(0, 0, 0, 0.3);
  247. top: 0;
  248. left: 0;
  249. display: block;
  250. }
  251. .integrationItem3:hover .goIntegration {
  252. display: block;
  253. margin-top: 88px;
  254. margin-left: 30px;
  255. width: 168px;
  256. height: 50px;
  257. line-height: 50px;
  258. text-align: center;
  259. background: #FFFFFF;
  260. box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.53);
  261. border-radius: 6px;
  262. font-size: 20px;
  263. font-family: OPPOSans;
  264. font-weight: 500;
  265. color: #08188A;
  266. }
  267. .integrationItem3:hover .integrationItem3Hie {
  268. display: none;
  269. }
  270. .integrationText {
  271. /* width: 287px; */
  272. height: 69px;
  273. font-size: 24px;
  274. font-family: OPPOSans;
  275. font-weight: bold;
  276. color: #FFFFFF;
  277. line-height: 38px;
  278. margin-top: 50px;
  279. margin-left: 30px;
  280. }
  281. .integrationText2 {
  282. /* width: 215px; */
  283. height: 69px;
  284. font-size: 24px;
  285. font-family: OPPOSans;
  286. font-weight: bold;
  287. color: #FFFFFF;
  288. line-height: 38px;
  289. margin-top: 50px;
  290. margin-left: 30px;
  291. }
  292. .integrationText3 {
  293. /* width: 180px; */
  294. height: 69px;
  295. font-size: 24px;
  296. font-family: OPPOSans;
  297. font-weight: bold;
  298. color: #FFFFFF;
  299. line-height: 38px;
  300. margin-top: 50px;
  301. margin-left: 30px;
  302. }
  303. .goIntegration {
  304. display: block;
  305. margin-top: 88px;
  306. margin-left: 30px;
  307. width: 168px;
  308. height: 50px;
  309. line-height: 50px;
  310. text-align: center;
  311. /* box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.53); */
  312. border-radius: 6px;
  313. border: 2px solid #FFFFFF;
  314. font-size: 20px;
  315. font-family: OPPOSans;
  316. font-weight: 500;
  317. color: #ffffff;
  318. border: 2px solid #FFFFFF;
  319. transition: all .3s;
  320. }
  321. .serveBox {
  322. overflow: hidden;
  323. background: #F8FAFF;
  324. }
  325. .title {
  326. text-align: center;
  327. padding-top: 94px;
  328. padding-bottom: 80px;
  329. font-size: 54px;
  330. font-family: OPPOSans;
  331. font-weight: bold;
  332. color: #202530;
  333. }
  334. .textBox {
  335. width: 1200px;
  336. margin: 0 auto;
  337. }
  338. .itemBox4 {
  339. border-bottom: #E3E4FF 1px dotted;
  340. display: flex;
  341. justify-content: center;
  342. }
  343. .itemImgBox1 {
  344. width: 25%;
  345. cursor: pointer;
  346. }
  347. .itemImgBox1 .img {
  348. width: 40px;
  349. height: 40px;
  350. /* background: cadetblue; */
  351. display: block;
  352. margin: 0 auto
  353. }
  354. .itemImgBox2 {
  355. width: 25%;
  356. cursor: pointer;
  357. }
  358. .itemImgBox2 .img {
  359. width: 40px;
  360. height: 40px;
  361. /* background: cadetblue; */
  362. display: block;
  363. margin: 0 auto
  364. }
  365. .itemImgBox3 {
  366. width: 25%;
  367. cursor: pointer;
  368. }
  369. .itemImgBox3 .img {
  370. width: 40px;
  371. height: 40px;
  372. /* background: cadetblue; */
  373. display: block;
  374. margin: 0 auto
  375. }
  376. .itemImgBox4 {
  377. width: 25%;
  378. cursor: pointer;
  379. }
  380. .itemImgBox4 .img {
  381. width: 40px;
  382. height: 40px;
  383. /* background: cadetblue; */
  384. display: block;
  385. margin: 0 auto
  386. }
  387. .imgText {
  388. font-size: 24px;
  389. font-family: OPPOSans;
  390. font-weight: 400;
  391. color: #202530;
  392. text-align: center;
  393. margin-top: 17px;
  394. }
  395. .activity1 {
  396. width: 68px;
  397. height: 8px;
  398. background: #0067ED;
  399. border-radius: 4px;
  400. /* text-align: center; */
  401. margin: 10px auto;
  402. }
  403. .activity2 {
  404. width: 68px;
  405. height: 8px;
  406. background: #0067ED;
  407. border-radius: 4px;
  408. /* text-align: center; */
  409. margin: 10px auto;
  410. display: none;
  411. }
  412. .activity3 {
  413. width: 68px;
  414. height: 8px;
  415. background: #0067ED;
  416. border-radius: 4px;
  417. /* text-align: center; */
  418. margin: 10px auto;
  419. display: none;
  420. }
  421. .activity4 {
  422. width: 68px;
  423. height: 8px;
  424. background: #0067ED;
  425. border-radius: 4px;
  426. /* text-align: center; */
  427. margin: 10px auto;
  428. display: none;
  429. }
  430. .explainBox1 {
  431. overflow: hidden;
  432. margin-top: 150px;
  433. position: relative;
  434. }
  435. .explainBox2 {
  436. overflow: hidden;
  437. margin-top: 150px;
  438. position: relative;
  439. display: none
  440. }
  441. .explainBox3 {
  442. overflow: hidden;
  443. margin-top: 150px;
  444. position: relative;
  445. display: none
  446. }
  447. .explainBox4 {
  448. overflow: hidden;
  449. margin-top: 150px;
  450. position: relative;
  451. display: none
  452. }
  453. .explainImg {
  454. position: absolute;
  455. left: 0;
  456. top: 0;
  457. }
  458. .explainTextBox {
  459. float: left;
  460. width: 510px;
  461. margin-left: 16px;
  462. margin-top: 4px;
  463. }
  464. .explainH3 {
  465. font-size: 36px;
  466. font-family: OPPOSans;
  467. font-weight: 500;
  468. color: #131D2E;
  469. line-height: 54px;
  470. }
  471. .explainP {
  472. width: 510px;
  473. height: 78px;
  474. font-size: 18px;
  475. font-family: Microsoft YaHei;
  476. font-weight: 400;
  477. color: #737780;
  478. line-height: 30px;
  479. margin-top: 35px;
  480. }
  481. .explainText {
  482. margin-top: 10px;
  483. font-size: 36px;
  484. font-family: OPPOSans;
  485. font-weight: 500;
  486. color: #131D2E;
  487. line-height: 54px;
  488. }
  489. .explainImgBox {
  490. float: right;
  491. width: 599px;
  492. height: 400px;
  493. }
  494. .partner {
  495. font-size: 54px;
  496. font-family: OPPOSans;
  497. font-weight: bold;
  498. color: #202530;
  499. text-align: center;
  500. margin-top: 80px;
  501. margin-bottom: 60px;
  502. }
  503. .partnerLogo {
  504. height: 79px;
  505. /* background-color: chartreuse; */
  506. display: block;
  507. margin: 0 auto;
  508. }
  509. .partnerLogoBox {
  510. width: 100%;
  511. height: 79px;
  512. margin-bottom: 74px;
  513. background-color: #ffffff;
  514. overflow: hidden;
  515. }
  516. .caseBox {
  517. overflow: hidden;
  518. background-image: url("https://formall.oss-accelerate.aliyuncs.com/home/pc/fmPcImg/all/home_jxal_bnt.png");
  519. background-repeat: no-repeat;
  520. }
  521. .caseText {
  522. padding-top: 74px;
  523. padding-bottom: 84px;
  524. text-align: center;
  525. font-size: 54px;
  526. font-family: OPPOSans;
  527. font-weight: bold;
  528. color: #202530;
  529. }
  530. .caseLogoBox {
  531. width: 1500px;
  532. margin: 0 auto;
  533. display: flex;
  534. justify-content: space-between;
  535. margin-bottom: 104px;
  536. }
  537. .caseLogo1 {
  538. width: 443px;
  539. height: 415px;
  540. background-image: url("https://formall.oss-accelerate.aliyuncs.com/home/pc/fmPcImg/shouye/home_jxal_jmh.png");
  541. background-repeat: no-repeat;
  542. border-radius: 10px;
  543. position: relative;
  544. }
  545. .jinbaoBoxA1 {
  546. position: absolute;
  547. left: 30px;
  548. top: 240px;
  549. overflow: hidden;
  550. margin: 0 auto;
  551. }
  552. .jinbaoBoxA2 {
  553. position: absolute;
  554. left: 30px;
  555. top: 240px;
  556. overflow: hidden;
  557. display: none;
  558. }
  559. .jinbaoBoxA3 {
  560. position: absolute;
  561. left: 30px;
  562. top: 240px;
  563. overflow: hidden;
  564. display: none;
  565. }
  566. .jinbaoBoxA4 {
  567. position: absolute;
  568. left: 30px;
  569. top: 240px;
  570. overflow: hidden;
  571. display: none;
  572. }
  573. .jinbaoBoxA5 {
  574. position: absolute;
  575. left: 30px;
  576. top: 240px;
  577. overflow: hidden;
  578. display: none;
  579. }
  580. .jinbaoF {
  581. float: left;
  582. width: 210px;
  583. }
  584. .jinbaoText {
  585. font-size: 24px;
  586. font-family: OPPOSans;
  587. font-weight: bold;
  588. color: #FFFFFF;
  589. margin-bottom: 16px;
  590. }
  591. .jinbaop {
  592. font-size: 14px;
  593. font-family: Microsoft YaHei;
  594. font-weight: 400;
  595. color: #FDFEFF;
  596. overflow: hidden;
  597. text-overflow: ellipsis;
  598. height: 96px;
  599. display: -webkit-box;
  600. -webkit-box-orient: vertical;
  601. -webkit-line-clamp: 5;
  602. }
  603. .jinbaoR {
  604. float: right;
  605. margin-left: 46px;
  606. width: 130px;
  607. }
  608. .rqCode {
  609. width: 130px;
  610. height: 130px;
  611. margin-bottom: 10px;
  612. background-color: #ffffff;
  613. border-radius: 50%;
  614. }
  615. .rqText {
  616. font-size: 14px;
  617. font-family: Microsoft YaHei;
  618. font-weight: 400;
  619. color: #A5A9B4;
  620. }
  621. .caseLogo2 {
  622. width: 222px;
  623. height: 415px;
  624. background-image: url("https://formall.oss-accelerate.aliyuncs.com/home/pc/fmPcImg/all/home_jxal_hlc.png");
  625. background-repeat: no-repeat;
  626. border-radius: 10px;
  627. position: relative;
  628. /* width: 222px;
  629. height: 415px;
  630. background-image: url("https://formall.oss-accelerate.aliyuncs.com/home/pc/fmPcImg/shouye/home_jxal_hlc1.png");
  631. background-repeat: no-repeat;
  632. border-radius: 10px;
  633. position: relative; */
  634. }
  635. .logoBox1 {
  636. width: 100%;
  637. position: absolute;
  638. display: none;
  639. /* left: 40px; */
  640. top: 330px;
  641. }
  642. .logoBox2 {
  643. width: 100%;
  644. position: absolute;
  645. /* left: 40px; */
  646. top: 330px;
  647. }
  648. .logoBox3 {
  649. width: 100%;
  650. position: absolute;
  651. /* left: 40px; */
  652. top: 330px;
  653. }
  654. .logoBox4 {
  655. width: 100%;
  656. position: absolute;
  657. /* left: 40px; */
  658. top: 330px;
  659. }
  660. .logoBox5 {
  661. width: 100%;
  662. position: absolute;
  663. /* left: 40px; */
  664. top: 330px;
  665. }
  666. .LOGO {
  667. text-align: center;
  668. font-size: 30px;
  669. font-family: OPPOSans;
  670. font-weight: 800;
  671. color: #FDFEFF;
  672. margin-bottom: 10px;
  673. }
  674. .name {
  675. font-size: 16px;
  676. font-family: Microsoft YaHei;
  677. font-weight: 400;
  678. color: #FDFEFF;
  679. text-align: center;
  680. margin-top: 40px;
  681. }
  682. .caseLogo3 {
  683. width: 222px;
  684. height: 415px;
  685. background-image: url("https://formall.oss-accelerate.aliyuncs.com/home/pc/fmPcImg/all/home_jxal_hzdz.png");
  686. background-repeat: no-repeat;
  687. border-radius: 10px;
  688. position: relative;
  689. }
  690. .caseLogo4 {
  691. width: 222px;
  692. height: 415px;
  693. background-image: url("https://formall.oss-accelerate.aliyuncs.com/home/pc/fmPcImg/all/home_jxal_wxgc.png");
  694. background-repeat: no-repeat;
  695. border-radius: 10px;
  696. position: relative;
  697. }
  698. .caseLogo5 {
  699. width: 222px;
  700. height: 415px;
  701. background-image: url("https://formall.oss-accelerate.aliyuncs.com/home/pc/fmPcImg/jinpeng-1.png");
  702. background-repeat: no-repeat;
  703. border-radius: 10px;
  704. position: relative;
  705. }
  706. .aboutUt {
  707. background-color: #Fff;
  708. overflow: hidden;
  709. position: relative;
  710. }
  711. .aboutTextBoxw {
  712. margin-top: 142px;
  713. margin-left: 10%;
  714. background-image: url("https://formall.oss-accelerate.aliyuncs.com/home/pc/fmPcImg/shouye/home_gywm_qq.png");
  715. background-repeat: no-repeat;
  716. }
  717. .aboutTextBox {
  718. margin-top: 172px;
  719. margin-left: 10%;
  720. overflow: hidden;
  721. }
  722. .bgImg {
  723. position: absolute;
  724. top: 13%;
  725. left: 38%;
  726. }
  727. .aboutTitle {
  728. width: 340px;
  729. font-size: 56px;
  730. font-family: OPPOSans;
  731. font-weight: 500;
  732. color: #131D2E;
  733. padding-top: 30px;
  734. }
  735. .xian {
  736. width: 340px;
  737. height: 4px;
  738. background: #E3E8EF;
  739. position: relative;
  740. margin-bottom: 54px;
  741. margin-top: 35px;
  742. }
  743. .zixian {
  744. position: absolute;
  745. top: 0;
  746. right: 0;
  747. width: 147px;
  748. height: 4px;
  749. background: #0067ED;
  750. }
  751. .aboutText1 {
  752. margin-top: 54px;
  753. font-size: 18px;
  754. font-family: Microsoft YaHei;
  755. font-weight: 400;
  756. color: #666F80;
  757. width: 464px;
  758. line-height: 36px;
  759. margin-bottom: 20px;
  760. }
  761. .aboutText2 {
  762. margin-top: 54px;
  763. font-size: 18px;
  764. font-family: Microsoft YaHei;
  765. font-weight: 400;
  766. color: #666F80;
  767. width: 464px;
  768. line-height: 36px;
  769. margin-bottom: 218px;
  770. }
  771. .select {
  772. background: #F8FAFF;
  773. overflow: hidden;
  774. }
  775. .companyLogoBox {
  776. overflow: hidden;
  777. position: relative;
  778. width: 1200px;
  779. height: 1000px;
  780. margin: 120px auto 0 auto;
  781. }
  782. .companyLogo1 {
  783. width: 142px;
  784. height: 142px;
  785. background: #FFFFFF;
  786. box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16);
  787. border-radius: 8px;
  788. position: absolute;
  789. top: 21%;
  790. left: 0%;
  791. }
  792. .companyLogo1 img {
  793. width: 100%;
  794. height: 100%;
  795. position: absolute;
  796. top: 50%;
  797. left: 50%;
  798. transform: translate(-50%, -50%);
  799. }
  800. .companyLogo8 {
  801. width: 142px;
  802. height: 142px;
  803. background: #FFFFFF;
  804. box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16);
  805. border-radius: 8px;
  806. position: absolute;
  807. top: 39%;
  808. left: 0%;
  809. }
  810. .companyLogo8 img {
  811. width: 90%;
  812. height: 85%;
  813. position: absolute;
  814. top: 50%;
  815. left: 50%;
  816. transform: translate(-50%, -50%);
  817. }
  818. .companyLogo15 {
  819. width: 142px;
  820. height: 142px;
  821. background: #FFFFFF;
  822. box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16);
  823. border-radius: 8px;
  824. position: absolute;
  825. top: 57%;
  826. left: 0%;
  827. }
  828. .companyLogo15 img {
  829. width: 90%;
  830. height: 90%;
  831. position: absolute;
  832. top: 50%;
  833. left: 50%;
  834. transform: translate(-50%, -50%);
  835. }
  836. .companyLogo22 {
  837. width: 142px;
  838. height: 142px;
  839. background: #FFFFFF;
  840. box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16);
  841. border-radius: 8px;
  842. position: absolute;
  843. top: 66%;
  844. left: 0%;
  845. }
  846. .companyLogo22 img {
  847. width: 100%;
  848. height: 100%;
  849. position: absolute;
  850. top: 50%;
  851. left: 50%;
  852. transform: translate(-50%, -50%);
  853. }
  854. .companyLogo2 {
  855. width: 142px;
  856. height: 142px;
  857. background: #FFFFFF;
  858. box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16);
  859. border-radius: 8px;
  860. position: absolute;
  861. top: 14%;
  862. left: 14%;
  863. text-align: center;
  864. }
  865. .companyLogo2 img {
  866. width: 90%;
  867. height: 57%;
  868. /* margin: auto 0; */
  869. display: block;
  870. position: absolute;
  871. top: 50%;
  872. left: 50%;
  873. transform: translate(-50%, -50%);
  874. }
  875. .companyLogo9 {
  876. width: 142px;
  877. height: 142px;
  878. background: #FFFFFF;
  879. box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16);
  880. border-radius: 8px;
  881. position: absolute;
  882. top: 32%;
  883. left: 14%;
  884. }
  885. .companyLogo9 img {
  886. width: 90%;
  887. height: 90%;
  888. position: absolute;
  889. top: 50%;
  890. left: 50%;
  891. transform: translate(-50%, -50%);
  892. }
  893. .companyLogo16 {
  894. width: 142px;
  895. height: 142px;
  896. background: #FFFFFF;
  897. box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16);
  898. border-radius: 8px;
  899. position: absolute;
  900. top: 50%;
  901. left: 14%;
  902. }
  903. .companyLogo16 img {
  904. width: 90%;
  905. height: 80%;
  906. position: absolute;
  907. top: 50%;
  908. left: 50%;
  909. transform: translate(-50%, -50%);
  910. }
  911. .companyLogo23 {
  912. width: 142px;
  913. height: 142px;
  914. background: #FFFFFF;
  915. box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16);
  916. border-radius: 8px;
  917. position: absolute;
  918. top: 68%;
  919. left: 14%;
  920. }
  921. .companyLogo23 img {
  922. width: 90%;
  923. height: 70%;
  924. position: absolute;
  925. top: 50%;
  926. left: 50%;
  927. transform: translate(-50%, -50%);
  928. }
  929. .companyLogo3 {
  930. width: 142px;
  931. height: 142px;
  932. background: #FFFFFF;
  933. box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16);
  934. border-radius: 8px;
  935. position: absolute;
  936. top: 7%;
  937. left: 29%;
  938. }
  939. .companyLogo3 img {
  940. width: 100%;
  941. height: 100%;
  942. position: absolute;
  943. top: 50%;
  944. left: 50%;
  945. transform: translate(-50%, -50%);
  946. }
  947. .companyLogo10 {
  948. width: 142px;
  949. height: 142px;
  950. background: #FFFFFF;
  951. box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16);
  952. border-radius: 8px;
  953. position: absolute;
  954. top: 25%;
  955. left: 29%;
  956. }
  957. .companyLogo10 img {
  958. width: 100%;
  959. height: 100%;
  960. position: absolute;
  961. top: 50%;
  962. left: 50%;
  963. transform: translate(-50%, -50%);
  964. }
  965. .companyLogo17 {
  966. width: 142px;
  967. height: 142px;
  968. background: #FFFFFF;
  969. box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16);
  970. border-radius: 8px;
  971. position: absolute;
  972. top: 43%;
  973. left: 29%;
  974. }
  975. .companyLogo17 img {
  976. width: 100%;
  977. height: 100%;
  978. position: absolute;
  979. top: 50%;
  980. left: 50%;
  981. transform: translate(-50%, -50%);
  982. }
  983. .companyLogo24 {
  984. width: 142px;
  985. height: 142px;
  986. background: #FFFFFF;
  987. box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16);
  988. border-radius: 8px;
  989. position: absolute;
  990. top: 61%;
  991. left: 29%;
  992. }
  993. .companyLogo24 img {
  994. width: 93%;
  995. height: 28%;
  996. position: absolute;
  997. top: 50%;
  998. left: 50%;
  999. transform: translate(-50%, -50%);
  1000. }
  1001. .companyLogo4 {
  1002. width: 142px;
  1003. height: 142px;
  1004. background: #FFFFFF;
  1005. box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16);
  1006. border-radius: 8px;
  1007. position: absolute;
  1008. top: 0%;
  1009. left: 44%;
  1010. }
  1011. .companyLogo4 img {
  1012. width: 100%;
  1013. height: 40%;
  1014. position: absolute;
  1015. top: 50%;
  1016. left: 50%;
  1017. transform: translate(-50%, -50%);
  1018. }
  1019. .companyLogo11 {
  1020. width: 142px;
  1021. height: 142px;
  1022. background: #FFFFFF;
  1023. box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16);
  1024. border-radius: 8px;
  1025. position: absolute;
  1026. top: 18%;
  1027. left: 44%;
  1028. }
  1029. .companyLogo11 img {
  1030. width: 90%;
  1031. height: 90%;
  1032. position: absolute;
  1033. top: 50%;
  1034. left: 50%;
  1035. transform: translate(-50%, -50%);
  1036. }
  1037. .companyLogo18 {
  1038. width: 142px;
  1039. height: 142px;
  1040. background: #FFFFFF;
  1041. box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16);
  1042. border-radius: 8px;
  1043. position: absolute;
  1044. top: 36%;
  1045. left: 44%;
  1046. }
  1047. .companyLogo18 img {
  1048. width: 100%;
  1049. height: 100%;
  1050. position: absolute;
  1051. top: 50%;
  1052. left: 50%;
  1053. transform: translate(-50%, -50%);
  1054. }
  1055. .companyLogo25 {
  1056. width: 142px;
  1057. height: 142px;
  1058. background: #FFFFFF;
  1059. box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16);
  1060. border-radius: 8px;
  1061. position: absolute;
  1062. top: 54%;
  1063. left: 44%;
  1064. }
  1065. .companyLogo25 img {
  1066. width: 100%;
  1067. height: 100%;
  1068. position: absolute;
  1069. top: 50%;
  1070. left: 50%;
  1071. transform: translate(-50%, -50%);
  1072. }
  1073. .companyLogo26 {
  1074. width: 142px;
  1075. height: 142px;
  1076. background: #FFFFFF;
  1077. box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16);
  1078. border-radius: 8px;
  1079. position: absolute;
  1080. top: 72%;
  1081. left: 44%;
  1082. }
  1083. .companyLogo26 img {
  1084. width: 90%;
  1085. height: 51%;
  1086. position: absolute;
  1087. top: 50%;
  1088. left: 50%;
  1089. transform: translate(-50%, -50%);
  1090. }
  1091. .companyLogo5 {
  1092. width: 142px;
  1093. height: 142px;
  1094. background: #FFFFFF;
  1095. box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16);
  1096. border-radius: 8px;
  1097. position: absolute;
  1098. top: 8%;
  1099. left: 59%;
  1100. }
  1101. .companyLogo5 img {
  1102. width: 100%;
  1103. height: 55%;
  1104. position: absolute;
  1105. top: 50%;
  1106. left: 50%;
  1107. transform: translate(-50%, -50%);
  1108. }
  1109. .companyLogo12 {
  1110. width: 142px;
  1111. height: 142px;
  1112. background: #FFFFFF;
  1113. box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16);
  1114. border-radius: 8px;
  1115. position: absolute;
  1116. top: 26%;
  1117. left: 59%;
  1118. }
  1119. .companyLogo12 img {
  1120. width: 90%;
  1121. height: 50%;
  1122. position: absolute;
  1123. top: 50%;
  1124. left: 50%;
  1125. transform: translate(-50%, -50%);
  1126. }
  1127. .companyLogo19 {
  1128. width: 142px;
  1129. height: 142px;
  1130. background: #FFFFFF;
  1131. box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16);
  1132. border-radius: 8px;
  1133. position: absolute;
  1134. top: 44%;
  1135. left: 59%;
  1136. }
  1137. .companyLogo19 img {
  1138. width: 100%;
  1139. height: 100%;
  1140. position: absolute;
  1141. top: 50%;
  1142. left: 50%;
  1143. transform: translate(-50%, -50%);
  1144. }
  1145. .companyLogo27 {
  1146. width: 142px;
  1147. height: 142px;
  1148. background: #FFFFFF;
  1149. box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16);
  1150. border-radius: 8px;
  1151. position: absolute;
  1152. top: 62%;
  1153. left: 59%;
  1154. }
  1155. .companyLogo27 img {
  1156. width: 90%;
  1157. height: 90%;
  1158. position: absolute;
  1159. top: 50%;
  1160. left: 50%;
  1161. transform: translate(-50%, -50%);
  1162. }
  1163. .companyLogo6 {
  1164. width: 142px;
  1165. height: 142px;
  1166. background: #FFFFFF;
  1167. box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16);
  1168. border-radius: 8px;
  1169. position: absolute;
  1170. top: 2%;
  1171. left: 74%;
  1172. }
  1173. .companyLogo6 img {
  1174. width: 100%;
  1175. height: 100%;
  1176. position: absolute;
  1177. top: 50%;
  1178. left: 50%;
  1179. transform: translate(-50%, -50%);
  1180. }
  1181. .companyLogo13 {
  1182. width: 142px;
  1183. height: 142px;
  1184. background: #FFFFFF;
  1185. box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16);
  1186. border-radius: 8px;
  1187. position: absolute;
  1188. top: 20%;
  1189. left: 74%;
  1190. }
  1191. .companyLogo13 img {
  1192. width: 100%;
  1193. height: 100%;
  1194. position: absolute;
  1195. top: 50%;
  1196. left: 50%;
  1197. transform: translate(-50%, -50%);
  1198. }
  1199. .companyLogo20 {
  1200. width: 142px;
  1201. height: 142px;
  1202. background: #FFFFFF;
  1203. box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16);
  1204. border-radius: 8px;
  1205. position: absolute;
  1206. top: 38%;
  1207. left: 74%;
  1208. }
  1209. .companyLogo20 img {
  1210. width: 100%;
  1211. height: 100%;
  1212. position: absolute;
  1213. top: 50%;
  1214. left: 50%;
  1215. transform: translate(-50%, -50%);
  1216. }
  1217. .companyLogo28 {
  1218. width: 142px;
  1219. height: 142px;
  1220. background: #FFFFFF;
  1221. box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16);
  1222. border-radius: 8px;
  1223. position: absolute;
  1224. top: 56%;
  1225. left: 74%;
  1226. }
  1227. .companyLogo28 img {
  1228. width: 90%;
  1229. height: 80%;
  1230. position: absolute;
  1231. top: 50%;
  1232. left: 50%;
  1233. transform: translate(-50%, -50%);
  1234. }
  1235. .companyLogo7 {
  1236. width: 142px;
  1237. height: 142px;
  1238. background: #FFFFFF;
  1239. box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16);
  1240. border-radius: 8px;
  1241. position: absolute;
  1242. top: 19%;
  1243. right: 0;
  1244. }
  1245. .companyLogo7 img {
  1246. width: 100%;
  1247. height: 80%;
  1248. position: absolute;
  1249. top: 50%;
  1250. left: 50%;
  1251. transform: translate(-50%, -50%);
  1252. }
  1253. .companyLogo14 {
  1254. width: 142px;
  1255. height: 142px;
  1256. background: #FFFFFF;
  1257. box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16);
  1258. border-radius: 8px;
  1259. position: absolute;
  1260. top: 37%;
  1261. right: 0;
  1262. }
  1263. .companyLogo14 img {
  1264. width: 90%;
  1265. height: 40%;
  1266. position: absolute;
  1267. top: 50%;
  1268. left: 50%;
  1269. transform: translate(-50%, -50%);
  1270. }
  1271. .companyLogo21 {
  1272. width: 142px;
  1273. height: 142px;
  1274. background: #FFFFFF;
  1275. box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16);
  1276. border-radius: 8px;
  1277. position: absolute;
  1278. top: 55%;
  1279. right: 0;
  1280. }
  1281. .companyLogo21 img {
  1282. width: 90%;
  1283. height: 80%;
  1284. position: absolute;
  1285. top: 50%;
  1286. left: 50%;
  1287. transform: translate(-50%, -50%);
  1288. }
  1289. .companyLogo29 {
  1290. width: 142px;
  1291. height: 142px;
  1292. background: #FFFFFF;
  1293. box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16);
  1294. border-radius: 8px;
  1295. position: absolute;
  1296. top: 3%;
  1297. left: 0;
  1298. }
  1299. .companyLogo29 img {
  1300. width: 90%;
  1301. height: 80%;
  1302. position: absolute;
  1303. top: 50%;
  1304. left: 50%;
  1305. transform: translate(-50%, -50%);
  1306. }
  1307. .companyLogo30 {
  1308. width: 142px;
  1309. height: 142px;
  1310. background: #FFFFFF;
  1311. box-shadow: 0px 5px 15px 0px rgba(159, 169, 193, 0.16);
  1312. border-radius: 8px;
  1313. position: absolute;
  1314. top: 1%;
  1315. right:0 ;
  1316. }
  1317. .companyLogo30 img {
  1318. width: 90%;
  1319. height: 80%;
  1320. position: absolute;
  1321. top: 50%;
  1322. left: 50%;
  1323. transform: translate(-50%, -50%);
  1324. }
  1325. .selectTitle {
  1326. width: 100%;
  1327. font-size: 54px;
  1328. font-family: OPPOSans;
  1329. font-weight: bold;
  1330. color: #202530;
  1331. margin: 86px 0 0 0;
  1332. text-align: center;
  1333. }
  1334. .selectImg {
  1335. width: 100%;
  1336. height: 100%;
  1337. margin: 0 auto;
  1338. display: block;
  1339. }
  1340. /**/
  1341. .headerBox {
  1342. width: 100%;
  1343. height: 80px;
  1344. background: #FFFFFF;
  1345. overflow: hidden;
  1346. position: fixed;
  1347. top: 0;
  1348. left: 0;
  1349. z-index: 10000;
  1350. }
  1351. .imgBox {
  1352. float: left;
  1353. margin-left: 40px;
  1354. margin-top: 17px;
  1355. width: 158px;
  1356. height: 45px;
  1357. }
  1358. .contenBox {
  1359. float: left;
  1360. margin-left: 10%;
  1361. margin-top: 32px;
  1362. overflow: hidden;
  1363. }
  1364. .item {
  1365. font-size: 16px;
  1366. font-family: Microsoft YaHei;
  1367. font-weight: 400;
  1368. color: #333333;
  1369. /* line-height: 16px; */
  1370. float: left;
  1371. cursor: pointer;
  1372. margin-right: 80px;
  1373. padding: 4px 0;
  1374. }
  1375. .goBox {
  1376. overflow: hidden;
  1377. float: right;
  1378. margin-top: 22px;
  1379. margin-right: 2%;
  1380. }
  1381. .zx {
  1382. width: 108px;
  1383. height: 36px;
  1384. background: #FF4800;
  1385. border-radius: 6px;
  1386. float: left;
  1387. margin-right: 14px;
  1388. font-size: 16px;
  1389. font-family: Microsoft YaHei;
  1390. font-weight: 400;
  1391. color: #FFFFFF;
  1392. line-height: 36px;
  1393. text-align: center;
  1394. cursor: pointer;
  1395. }
  1396. .goA {
  1397. width: 78px;
  1398. height: 36px;
  1399. background: #0067ED;
  1400. border-radius: 6px;
  1401. float: left;
  1402. font-size: 16px;
  1403. font-family: Microsoft YaHei;
  1404. font-weight: 400;
  1405. color: #FFFFFF;
  1406. line-height: 36px;
  1407. text-align: center;
  1408. }