Index.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587
  1. .index.main {
  2. display: flex;
  3. flex-direction: column;
  4. background-color: white;
  5. overflow: hidden;
  6. }
  7. .index .section1 {
  8. display: flex;
  9. flex-direction: column;
  10. width: auto;
  11. height: 5200px;
  12. min-height: 5200px;
  13. }
  14. .e20_36 {
  15. position: absolute;
  16. top: 3900px;
  17. right: 0px;
  18. bottom: 0px;
  19. left: 0px;
  20. width: auto;
  21. height: 1300px;
  22. }
  23. .e11_2 {
  24. background-color:rgba(59.00000028312206, 59.00000028312206, 65.0000037252903, 1);
  25. position: absolute;
  26. top: 10px;
  27. right: 0px;
  28. bottom: 0px;
  29. left: 0px;
  30. height: 1300px;
  31. }
  32. .e17_26 {
  33. width:815px;
  34. height:1015px;
  35. position:absolute;
  36. left:1012px;
  37. top:142px;
  38. border-top-left-radius:40px;
  39. border-top-right-radius:40px;
  40. border-bottom-left-radius:40px;
  41. border-bottom-right-radius:40px;
  42. background-image:url(woman.png);
  43. background-size:cover;
  44. background-repeat:no-repeat;
  45. }
  46. .e20_33 {
  47. width:76px;
  48. height:76px;
  49. position:absolute;
  50. left:124px;
  51. top:356px;
  52. background-image:url(chat.png);
  53. background-repeat:no-repeat;
  54. background-size:cover;
  55. }
  56. .e20_34 {
  57. width:75px;
  58. height:75px;
  59. position:absolute;
  60. left:125px;
  61. top:254px;
  62. background-image:url(sms.png);
  63. background-repeat:no-repeat;
  64. background-size:cover;
  65. }
  66. .e20_35 {
  67. width:73px;
  68. height:73px;
  69. position:absolute;
  70. left:125px;
  71. top:151px;
  72. background-image:url(contact.png);
  73. background-repeat:no-repeat;
  74. background-size:cover;
  75. }
  76. .e20_15 {
  77. background-color:rgba(217.0000022649765, 217.0000022649765, 217.0000022649765, 1);
  78. width:749px;
  79. height:67px;
  80. position:absolute;
  81. left:228px;
  82. top:154px;
  83. border-top-left-radius:20px;
  84. border-top-right-radius:20px;
  85. border-bottom-left-radius:20px;
  86. border-bottom-right-radius:20px;
  87. }
  88. .e20_21 {
  89. background-color:rgba(217.0000022649765, 217.0000022649765, 217.0000022649765, 1);
  90. width:749px;
  91. height:67px;
  92. position:absolute;
  93. left:225px;
  94. top:258px;
  95. border-top-left-radius:20px;
  96. border-top-right-radius:20px;
  97. border-bottom-left-radius:20px;
  98. border-bottom-right-radius:20px;
  99. }
  100. .e20_24 {
  101. background-color:rgba(217.0000022649765, 217.0000022649765, 217.0000022649765, 1);
  102. width:749px;
  103. height:797px;
  104. position:absolute;
  105. left:225px;
  106. top:360px;
  107. border-top-left-radius:20px;
  108. border-top-right-radius:20px;
  109. border-bottom-left-radius:20px;
  110. border-bottom-right-radius:20px;
  111. }
  112. .index .rect {
  113. position: absolute;
  114. top: 2715px;
  115. right: 1368px;
  116. bottom: 1431px;
  117. left: 93px;
  118. width: 459px;
  119. height: 1054px;
  120. background-color: #3b3b41;
  121. border-radius: 40px 40px 40px 40px;
  122. }
  123. .index .rect1 {
  124. position: absolute;
  125. top: 3242px;
  126. right: 1404px;
  127. bottom: 1472px;
  128. left: 129px;
  129. width: 387px;
  130. height: 486px;
  131. background-color: #d9d9d9;
  132. border-radius: 40px 40px 40px 40px;
  133. }
  134. .index .big_title {
  135. position: absolute;
  136. top: 3264px;
  137. right: 1415px;
  138. bottom: 1576px;
  139. left: 136px;
  140. display: flex;
  141. justify-content: center;
  142. width: 369px;
  143. height: 360px;
  144. font: 400 37px/1.21 "Inter", Helvetica, Arial, serif;
  145. color: black;
  146. text-align: center;
  147. }
  148. .index .big_title1 {
  149. position: absolute;
  150. top: 4057px;
  151. right: 1587px;
  152. bottom: 1098px;
  153. left: 247px;
  154. display: flex;
  155. justify-content: center;
  156. width: 86px;
  157. height: 45px;
  158. font: 400 37px/1.21 "Inter", Helvetica, Arial, serif;
  159. color: #3b3b41;
  160. text-align: center;
  161. }
  162. .index .big_title11 {
  163. position: absolute;
  164. top: 4161px;
  165. right: 1564px;
  166. bottom: 994px;
  167. left: 247px;
  168. display: flex;
  169. justify-content: center;
  170. width: 109px;
  171. height: 45px;
  172. font: 400 37px/1.21 "Inter", Helvetica, Arial, serif;
  173. color: #3b3b41;
  174. text-align: center;
  175. }
  176. .index .big_title12 {
  177. position: absolute;
  178. top: 4263px;
  179. right: 1445px;
  180. bottom: 892px;
  181. left: 247px;
  182. display: flex;
  183. justify-content: center;
  184. width: 228px;
  185. height: 45px;
  186. font: 400 37px/1.21 "Inter", Helvetica, Arial, serif;
  187. color: #3b3b41;
  188. text-align: center;
  189. }
  190. .index .image {
  191. position: absolute;
  192. top: 2747px;
  193. right: 1404px;
  194. bottom: 2066px;
  195. left: 129px;
  196. width: 387px;
  197. height: 387px;
  198. border-radius: 40px 40px 40px 40px;
  199. }
  200. .index .hero_title {
  201. position: absolute;
  202. top: 3146px;
  203. right: 1523.5px;
  204. bottom: 2000px;
  205. left: 226.5px;
  206. display: flex;
  207. justify-content: center;
  208. width: 170px;
  209. height: 54px;
  210. font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
  211. color: white;
  212. text-align: center;
  213. }
  214. .index .rect2 {
  215. position: absolute;
  216. top: 2715px;
  217. right: 731px;
  218. bottom: 1431px;
  219. left: 730px;
  220. width: 459px;
  221. height: 1054px;
  222. background-color: #3b3b41;
  223. border-radius: 40px 40px 40px 40px;
  224. }
  225. .index .rect21 {
  226. position: absolute;
  227. top: 3242px;
  228. right: 767px;
  229. bottom: 1467px;
  230. left: 766px;
  231. width: 387px;
  232. height: 491px;
  233. background-color: #d9d9d9;
  234. border-radius: 40px 40px 40px 40px;
  235. }
  236. .index .big_title2 {
  237. position: absolute;
  238. top: 3264px;
  239. right: 787px;
  240. bottom: 1531px;
  241. left: 775px;
  242. display: flex;
  243. justify-content: center;
  244. width: 358px;
  245. height: 405px;
  246. font: 400 37px/1.21 "Inter", Helvetica, Arial, serif;
  247. color: black;
  248. text-align: center;
  249. }
  250. .index .image1 {
  251. position: absolute;
  252. top: 2747px;
  253. right: 767px;
  254. bottom: 2066px;
  255. left: 766px;
  256. width: 387px;
  257. height: 387px;
  258. border-radius: 40px 40px 40px 40px;
  259. }
  260. .index .hero_title1 {
  261. position: absolute;
  262. top: 3145px;
  263. right: 881px;
  264. bottom: 2001px;
  265. left: 880px;
  266. display: flex;
  267. justify-content: center;
  268. width: 159px;
  269. height: 54px;
  270. font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
  271. color: white;
  272. text-align: center;
  273. }
  274. .index .rect3 {
  275. position: absolute;
  276. top: 2715px;
  277. right: 93px;
  278. bottom: 1431px;
  279. left: 1368px;
  280. width: 459px;
  281. height: 1054px;
  282. background-color: #3b3b41;
  283. border-radius: 40px 40px 40px 40px;
  284. }
  285. .index .rect22 {
  286. position: absolute;
  287. top: 3242px;
  288. right: 129px;
  289. bottom: 1467px;
  290. left: 1404px;
  291. width: 387px;
  292. height: 491px;
  293. background-color: #d9d9d9;
  294. border-radius: 40px 40px 40px 40px;
  295. }
  296. .index .big_title21 {
  297. position: absolute;
  298. top: 3264px;
  299. right: 149px;
  300. bottom: 1540px;
  301. left: 1413px;
  302. display: flex;
  303. justify-content: center;
  304. width: 358px;
  305. height: 396px;
  306. font: 400 36px/1.22 "Inter", Helvetica, Arial, serif;
  307. color: black;
  308. text-align: center;
  309. }
  310. .index .image2 {
  311. position: absolute;
  312. top: 2747px;
  313. right: 129px;
  314. bottom: 2066px;
  315. left: 1404px;
  316. width: 387px;
  317. height: 387px;
  318. border-radius: 40px 40px 40px 40px;
  319. }
  320. .index .hero_title2 {
  321. position: absolute;
  322. top: 3138px;
  323. right: 207.5px;
  324. bottom: 2008px;
  325. left: 1482.5px;
  326. display: flex;
  327. justify-content: center;
  328. width: 230px;
  329. height: 54px;
  330. font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
  331. color: white;
  332. text-align: center;
  333. }
  334. .index .wrapper {
  335. position: absolute;
  336. top: 1300px;
  337. right: 0px;
  338. bottom: 2600px;
  339. left: 0px;
  340. display: flex;
  341. flex-direction: column;
  342. width: auto;
  343. height: 1300px;
  344. min-height: 1300px;
  345. background-color: #3b3c41;
  346. }
  347. .index .image11 {
  348. position: absolute;
  349. top: 155px;
  350. right: 1011px;
  351. bottom: 828px;
  352. left: 93px;
  353. width: auto;
  354. height: 317px;
  355. border-radius: 40px 40px 40px 40px;
  356. display: flex;
  357. justify-content: center;
  358. flex-direction: column;
  359. text-align: center;
  360. }
  361. .index .image21 {
  362. position: absolute;
  363. top: 155px;
  364. right: 93px;
  365. bottom: 828px;
  366. left: 1012px;
  367. width: auto;
  368. height: 317px;
  369. border-radius: 40px 40px 40px 40px;
  370. display: flex;
  371. justify-content: center;
  372. flex-direction: column;
  373. text-align: center;
  374. }
  375. .index .image12 {
  376. position: absolute;
  377. top: 697px;
  378. right: 1011px;
  379. bottom: 286px;
  380. left: 93px;
  381. width: auto;
  382. height: 317px;
  383. border-radius: 40px 40px 40px 40px;
  384. display: flex;
  385. justify-content: center;
  386. flex-direction: column;
  387. text-align: center;
  388. }
  389. .index .image22 {
  390. width:815px;
  391. height:317px;
  392. position: absolute;
  393. top: 697px;
  394. left:1012px;
  395. border-radius: 40px 40px 40px 40px;
  396. display: flex;
  397. justify-content: center;
  398. flex-direction: column;
  399. text-align: center;
  400. }
  401. .index .hero_title3 {
  402. position: absolute;
  403. top: 491px;
  404. right: 1011px;
  405. bottom: 701px;
  406. left: 93px;
  407. display: flex;
  408. justify-content: center;
  409. flex-direction: column;
  410. width: auto;
  411. height: 108px;
  412. font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
  413. color: white;
  414. text-align: center;
  415. }
  416. .index .hero_title4 {
  417. position: absolute;
  418. top: 491px;
  419. right: 93px;
  420. bottom: 701px;
  421. left: 1012px;
  422. display: flex;
  423. justify-content: center;
  424. width: auto;
  425. height: 108px;
  426. font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
  427. color: white;
  428. text-align: center;
  429. }
  430. .index .hero_title5 {
  431. position: absolute;
  432. top: 1028px;
  433. right: 93px;
  434. bottom: 164px;
  435. left: 1012px;
  436. display: flex;
  437. justify-content: center;
  438. width: auto;
  439. height: 108px;
  440. font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
  441. color: white;
  442. text-align: center;
  443. }
  444. .index .hero_title6 {
  445. position: absolute;
  446. top: 1033px;
  447. right: 1012px;
  448. bottom: 159px;
  449. left: 93px;
  450. display: flex;
  451. justify-content: center;
  452. width: auto;
  453. height: 108px;
  454. font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
  455. color: white;
  456. text-align: center;
  457. }
  458. .index .wrapper1 {
  459. position: absolute;
  460. top: 100px;
  461. right: 0px;
  462. bottom: 3900px;
  463. left: 0px;
  464. display: flex;
  465. flex-direction: column;
  466. width: auto;
  467. height: 1200px;
  468. min-height: 1200px;
  469. background: var(--src) center center/100% 100% no-repeat;
  470. }
  471. .index .rect4 {
  472. position: absolute;
  473. top: 345px;
  474. right: 1011px;
  475. bottom: 413px;
  476. left: 93px;
  477. width: 816px;
  478. height: 442px;
  479. background-color: rgba(217, 217, 217, 0.149);
  480. }
  481. .index .hero_title11 {
  482. position: absolute;
  483. top: 375px;
  484. right: 893px;
  485. bottom: 459px;
  486. left: 108px;
  487. width: 919px;
  488. height: 366px;
  489. font: 700 101px/1.2 "Inter", Helvetica, Arial, serif;
  490. color: #3b3b41;
  491. }
  492. .index .rect5 {
  493. position: absolute;
  494. top: 0px;
  495. right: 0px;
  496. bottom: 5100px;
  497. left: 0px;
  498. width: auto;
  499. height: 100px;
  500. background-color: #3b3c41;
  501. }
  502. .index .cover1 {
  503. position: absolute;
  504. top: 0px;
  505. right: 1737px;
  506. bottom: 5075px;
  507. left: 49px;
  508. width: 134px;
  509. height: 125px;
  510. }
  511. .index .image4 {
  512. position: absolute;
  513. top: 21px;
  514. right: 1762px;
  515. bottom: 5112px;
  516. left: 75px;
  517. width: 83px;
  518. height: 67px;
  519. }
  520. .index .hero_title7 {
  521. position: absolute;
  522. top: 23px;
  523. right: 934px;
  524. bottom: 5123px;
  525. flex-direction: column;
  526. width: 124px;
  527. height: 54px;
  528. font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
  529. color: white;
  530. }
  531. .index .hero_title8 {
  532. position: absolute;
  533. top: 23px;
  534. right: 576px;
  535. bottom: 5123px;
  536. flex-direction: column;
  537. width: 283px;
  538. height: 54px;
  539. font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
  540. color: white;
  541. }
  542. .index .hero_title9 {
  543. position: absolute;
  544. top: 23px;
  545. right: 43px;
  546. bottom: 5123px;
  547. flex-direction: column;
  548. width: 209px;
  549. height: 54px;
  550. font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
  551. color: white;
  552. }
  553. .index .hero_title10 {
  554. position: absolute;
  555. top: 23px;
  556. right: 327px;
  557. bottom: 5123px;
  558. flex-direction: column;
  559. width: 174px;
  560. height: 54px;
  561. font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
  562. color: white;
  563. }
  564. .index .hero_title21_box {
  565. position: absolute;
  566. top: 4px;
  567. right: 1489px;
  568. bottom: 5097px;
  569. left: 116px;
  570. display: flex;
  571. justify-content: center;
  572. width: 315px;
  573. height: 99px;
  574. }
  575. .index .hero_title21 {
  576. font: 400 46px/1.21 "Inter", Helvetica, Arial, serif;
  577. color: white;
  578. text-align: center;
  579. }
  580. .index .hero_title21_span0 {
  581. font: 1em/1.21 "Inter", Helvetica, Arial, serif;
  582. }
  583. .index .hero_title21_span1 {
  584. font: 1.7826086957em/1.2 "Inter", Helvetica, Arial, serif;
  585. }