富茂链客Pcg官网
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
 
 
 

1527 linhas
27 KiB

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