Index.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613
  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 .big_title1_norm {
  191. position: absolute;
  192. display: flex;
  193. justify-content: center;
  194. width: 749px;
  195. height: 67px;
  196. font: 400 37px/1.21 "Inter", Helvetica, Arial, serif;
  197. color: #3b3b41;
  198. text-align: left;
  199. padding: 20px;
  200. }
  201. .index .big_title1_norm2 {
  202. position: absolute;
  203. display: flex;
  204. justify-content: center;
  205. align-items: flex-start;
  206. width: 749px;
  207. height: 797px;
  208. font: 400 37px/1.21 "Inter", Helvetica, Arial, serif;
  209. color: #3b3b41;
  210. text-align: left;
  211. padding: 20px;
  212. }
  213. .index .image {
  214. position: absolute;
  215. top: 2747px;
  216. right: 1404px;
  217. bottom: 2066px;
  218. left: 129px;
  219. width: 387px;
  220. height: 387px;
  221. border-radius: 40px 40px 40px 40px;
  222. }
  223. .index .hero_title {
  224. position: absolute;
  225. top: 3146px;
  226. right: 1523.5px;
  227. bottom: 2000px;
  228. left: 226.5px;
  229. display: flex;
  230. justify-content: center;
  231. width: 170px;
  232. height: 54px;
  233. font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
  234. color: white;
  235. text-align: center;
  236. }
  237. .index .rect2 {
  238. position: absolute;
  239. top: 2715px;
  240. right: 731px;
  241. bottom: 1431px;
  242. left: 730px;
  243. width: 459px;
  244. height: 1054px;
  245. background-color: #3b3b41;
  246. border-radius: 40px 40px 40px 40px;
  247. }
  248. .index .rect21 {
  249. position: absolute;
  250. top: 3242px;
  251. right: 767px;
  252. bottom: 1467px;
  253. left: 766px;
  254. width: 387px;
  255. height: 491px;
  256. background-color: #d9d9d9;
  257. border-radius: 40px 40px 40px 40px;
  258. }
  259. .index .big_title2 {
  260. position: absolute;
  261. top: 3264px;
  262. right: 787px;
  263. bottom: 1531px;
  264. left: 775px;
  265. display: flex;
  266. justify-content: center;
  267. width: 358px;
  268. height: 405px;
  269. font: 400 37px/1.21 "Inter", Helvetica, Arial, serif;
  270. color: black;
  271. text-align: center;
  272. }
  273. .index .image1 {
  274. position: absolute;
  275. top: 2747px;
  276. right: 767px;
  277. bottom: 2066px;
  278. left: 766px;
  279. width: 387px;
  280. height: 387px;
  281. border-radius: 40px 40px 40px 40px;
  282. }
  283. .index .hero_title1 {
  284. position: absolute;
  285. top: 3145px;
  286. right: 881px;
  287. bottom: 2001px;
  288. left: 880px;
  289. display: flex;
  290. justify-content: center;
  291. width: 159px;
  292. height: 54px;
  293. font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
  294. color: white;
  295. text-align: center;
  296. }
  297. .index .rect3 {
  298. position: absolute;
  299. top: 2715px;
  300. right: 93px;
  301. bottom: 1431px;
  302. left: 1368px;
  303. width: 459px;
  304. height: 1054px;
  305. background-color: #3b3b41;
  306. border-radius: 40px 40px 40px 40px;
  307. }
  308. .index .rect22 {
  309. position: absolute;
  310. top: 3242px;
  311. right: 129px;
  312. bottom: 1467px;
  313. left: 1404px;
  314. width: 387px;
  315. height: 491px;
  316. background-color: #d9d9d9;
  317. border-radius: 40px 40px 40px 40px;
  318. }
  319. .index .big_title21 {
  320. position: absolute;
  321. top: 3264px;
  322. right: 149px;
  323. bottom: 1540px;
  324. left: 1413px;
  325. display: flex;
  326. justify-content: center;
  327. width: 358px;
  328. height: 396px;
  329. font: 400 36px/1.22 "Inter", Helvetica, Arial, serif;
  330. color: black;
  331. text-align: center;
  332. }
  333. .index .image2 {
  334. position: absolute;
  335. top: 2747px;
  336. right: 129px;
  337. bottom: 2066px;
  338. left: 1404px;
  339. width: 387px;
  340. height: 387px;
  341. border-radius: 40px 40px 40px 40px;
  342. }
  343. .index .hero_title2 {
  344. position: absolute;
  345. top: 3138px;
  346. right: 207.5px;
  347. bottom: 2008px;
  348. left: 1482.5px;
  349. display: flex;
  350. justify-content: center;
  351. width: 230px;
  352. height: 54px;
  353. font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
  354. color: white;
  355. text-align: center;
  356. }
  357. .index .wrapper {
  358. position: absolute;
  359. top: 1300px;
  360. right: 0px;
  361. bottom: 2600px;
  362. left: 0px;
  363. display: flex;
  364. flex-direction: column;
  365. width: auto;
  366. height: 1300px;
  367. min-height: 1300px;
  368. background-color: #3b3c41;
  369. }
  370. .index .image11 {
  371. position: absolute;
  372. top: 155px;
  373. right: 1011px;
  374. bottom: 828px;
  375. left: 93px;
  376. width: auto;
  377. height: 317px;
  378. border-radius: 40px 40px 40px 40px;
  379. display: flex;
  380. justify-content: center;
  381. flex-direction: column;
  382. text-align: center;
  383. }
  384. .index .image21 {
  385. position: absolute;
  386. top: 155px;
  387. right: 93px;
  388. bottom: 828px;
  389. left: 1012px;
  390. width: auto;
  391. height: 317px;
  392. border-radius: 40px 40px 40px 40px;
  393. display: flex;
  394. justify-content: center;
  395. flex-direction: column;
  396. text-align: center;
  397. }
  398. .index .image12 {
  399. position: absolute;
  400. top: 697px;
  401. right: 1011px;
  402. bottom: 286px;
  403. left: 93px;
  404. width: auto;
  405. height: 317px;
  406. border-radius: 40px 40px 40px 40px;
  407. display: flex;
  408. justify-content: center;
  409. flex-direction: column;
  410. text-align: center;
  411. }
  412. .index .image22 {
  413. width:815px;
  414. height:317px;
  415. position: absolute;
  416. top: 697px;
  417. left:1012px;
  418. border-radius: 40px 40px 40px 40px;
  419. display: flex;
  420. justify-content: center;
  421. flex-direction: column;
  422. text-align: center;
  423. }
  424. .index .hero_title3 {
  425. position: absolute;
  426. top: 491px;
  427. right: 1011px;
  428. bottom: 701px;
  429. left: 93px;
  430. display: flex;
  431. justify-content: center;
  432. flex-direction: column;
  433. width: auto;
  434. height: 108px;
  435. font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
  436. color: white;
  437. text-align: center;
  438. }
  439. .index .hero_title4 {
  440. position: absolute;
  441. top: 491px;
  442. right: 93px;
  443. bottom: 701px;
  444. left: 1012px;
  445. display: flex;
  446. justify-content: center;
  447. width: auto;
  448. height: 108px;
  449. font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
  450. color: white;
  451. text-align: center;
  452. }
  453. .index .hero_title5 {
  454. position: absolute;
  455. top: 1028px;
  456. right: 93px;
  457. bottom: 164px;
  458. left: 1012px;
  459. display: flex;
  460. justify-content: center;
  461. width: auto;
  462. height: 108px;
  463. font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
  464. color: white;
  465. text-align: center;
  466. }
  467. .index .hero_title6 {
  468. position: absolute;
  469. top: 1033px;
  470. right: 1012px;
  471. bottom: 159px;
  472. left: 93px;
  473. display: flex;
  474. justify-content: center;
  475. width: auto;
  476. height: 108px;
  477. font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
  478. color: white;
  479. text-align: center;
  480. }
  481. .index .wrapper1 {
  482. position: absolute;
  483. top: 100px;
  484. right: 0px;
  485. bottom: 3900px;
  486. left: 0px;
  487. display: flex;
  488. flex-direction: column;
  489. width: auto;
  490. height: 1200px;
  491. min-height: 1200px;
  492. background: var(--src) center center/100% 100% no-repeat;
  493. }
  494. .index .rect4 {
  495. position: absolute;
  496. top: 345px;
  497. right: 1011px;
  498. bottom: 413px;
  499. left: 93px;
  500. width: 816px;
  501. height: 442px;
  502. background-color: rgba(217, 217, 217, 0.149);
  503. }
  504. .index .hero_title11 {
  505. position: absolute;
  506. top: 375px;
  507. right: 893px;
  508. bottom: 459px;
  509. left: 108px;
  510. width: 919px;
  511. height: 366px;
  512. font: 700 101px/1.2 "Inter", Helvetica, Arial, serif;
  513. color: #3b3b41;
  514. }
  515. .index .rect5 {
  516. position: absolute;
  517. top: 0px;
  518. right: 0px;
  519. bottom: 5100px;
  520. left: 0px;
  521. width: auto;
  522. height: 100px;
  523. background-color: #3b3c41;
  524. }
  525. .index .cover1 {
  526. position: absolute;
  527. top: 0px;
  528. right: 1737px;
  529. bottom: 5075px;
  530. left: 49px;
  531. width: 134px;
  532. height: 125px;
  533. }
  534. .index .image4 {
  535. position: absolute;
  536. top: 21px;
  537. right: 1762px;
  538. bottom: 5112px;
  539. left: 75px;
  540. width: 83px;
  541. height: 67px;
  542. }
  543. .index .hero_title7 {
  544. position: absolute;
  545. top: 23px;
  546. right: 934px;
  547. bottom: 5123px;
  548. flex-direction: column;
  549. width: 124px;
  550. height: 54px;
  551. font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
  552. color: white;
  553. }
  554. .index .hero_title8 {
  555. position: absolute;
  556. top: 23px;
  557. right: 576px;
  558. bottom: 5123px;
  559. flex-direction: column;
  560. width: 283px;
  561. height: 54px;
  562. font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
  563. color: white;
  564. }
  565. .index .hero_title9 {
  566. position: absolute;
  567. top: 23px;
  568. right: 43px;
  569. bottom: 5123px;
  570. flex-direction: column;
  571. width: 209px;
  572. height: 54px;
  573. font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
  574. color: white;
  575. }
  576. .index .hero_title10 {
  577. position: absolute;
  578. top: 23px;
  579. right: 327px;
  580. bottom: 5123px;
  581. flex-direction: column;
  582. width: 174px;
  583. height: 54px;
  584. font: 400 45px/1.2 "Inter", Helvetica, Arial, serif;
  585. color: white;
  586. }
  587. .index .hero_title21_box {
  588. position: absolute;
  589. top: 4px;
  590. right: 1489px;
  591. bottom: 5097px;
  592. left: 116px;
  593. display: flex;
  594. justify-content: center;
  595. width: 315px;
  596. height: 99px;
  597. }
  598. .index .hero_title21 {
  599. font: 400 46px/1.21 "Inter", Helvetica, Arial, serif;
  600. color: white;
  601. text-align: center;
  602. }
  603. .index .hero_title21_span0 {
  604. font: 1em/1.21 "Inter", Helvetica, Arial, serif;
  605. }
  606. .index .hero_title21_span1 {
  607. font: 1.7826086957em/1.2 "Inter", Helvetica, Arial, serif;
  608. }
  609. html {
  610. scroll-behavior: smooth; /* Добавление плавного скролла ко всем прокруткам на странице */
  611. }