styles.a8df6ac1.chunk.css 38 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479
  1. .h-30vh {
  2. height: 30vh;
  3. }
  4. .overflow-hidden {
  5. overflow: hidden;
  6. }
  7. .absolute {
  8. position: absolute;
  9. }
  10. .relative {
  11. position: relative;
  12. }
  13. .left-1\/2 {
  14. left: 50%;
  15. }
  16. .-top-25 {
  17. top: -6.25rem;
  18. }
  19. .-bottom-1px {
  20. bottom: -1px;
  21. }
  22. .left-0 {
  23. left: 0px;
  24. }
  25. .right-0 {
  26. right: 0px;
  27. }
  28. .w-full {
  29. width: 100%;
  30. }
  31. .w-250 {
  32. width: 62.5rem;
  33. }
  34. .transform {
  35. --tw-translate-x: 0;
  36. --tw-translate-y: 0;
  37. --tw-translate-z: 0;
  38. --tw-rotate: 0;
  39. --tw-rotate-x: 0;
  40. --tw-rotate-y: 0;
  41. --tw-rotate-z: 0;
  42. --tw-skew-x: 0;
  43. --tw-skew-y: 0;
  44. --tw-scale-x: 1;
  45. --tw-scale-y: 1;
  46. --tw-scale-z: 1;
  47. -webkit-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z));
  48. -ms-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z));
  49. transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z));
  50. }
  51. .-translate-x-1\/2 {
  52. --tw-translate-x: -50%;
  53. }
  54. @keyframes spin {
  55. from {
  56. -webkit-transform: rotate(0deg);
  57. transform: rotate(0deg);
  58. }
  59. to {
  60. -webkit-transform: rotate(-360deg);
  61. transform: rotate(-360deg);
  62. }
  63. }
  64. @-webkit-keyframes spin {
  65. from {
  66. -webkit-transform: rotate(0deg);
  67. transform: rotate(0deg);
  68. }
  69. to {
  70. -webkit-transform: rotate(-360deg);
  71. transform: rotate(-360deg);
  72. }
  73. }
  74. .animate-spin {
  75. -webkit-animation: spin 1s linear infinite;
  76. animation: spin 1s linear infinite;
  77. }
  78. .animate-duration-200000 {
  79. -webkit-animation-duration: 200000ms;
  80. animation-duration: 200000ms;
  81. }
  82. @media (min-width: 768px) {
  83. .md\:-top-55 {
  84. top: -13.75rem;
  85. }
  86. .md\:w-360 {
  87. width: 90rem;
  88. }
  89. }
  90. @media (min-width: 1024px) {
  91. .lg\:-top-70 {
  92. top: -17.5rem;
  93. }
  94. .lg\:w-420 {
  95. width: 105rem;
  96. }
  97. }
  98. @media (min-width: 1536px) {
  99. .\32 xl\:-top-25vw {
  100. top: -25vw;
  101. }
  102. .\32 xl\:w-130vw {
  103. width: 130vw;
  104. }
  105. }
  106. @font-face {
  107. font-family: Outfit;
  108. src: url(/fonts/outfit/Outfit-Regular.ttf);
  109. font-weight: 400;
  110. unicode-range: U+30-39, U+61-7A, U+41-5A;
  111. }
  112. @font-face {
  113. font-family: Outfit;
  114. src: url(/fonts/outfit/Outfit-Medium.ttf);
  115. font-weight: 500;
  116. unicode-range: U+30-39, U+61-7A, U+41-5A;
  117. }
  118. @font-face {
  119. font-family: Outfit;
  120. src: url(/fonts/outfit/Outfit-Bold.ttf);
  121. font-weight: 700;
  122. unicode-range: U+30-39, U+61-7A, U+41-5A;
  123. }
  124. .anniversary-page .anniversary-page__container * {
  125. font-family: Outfit, -apple-system, "Noto Sans", "Helvetica Neue", Helvetica, sans-serif;
  126. }
  127. @media (min-width: 768px) {
  128. .md\:hidden {
  129. display: none;
  130. }
  131. }
  132. .text-right {
  133. text-align: right;
  134. }
  135. .max-w-22rem {
  136. max-width: 22rem !important;
  137. }
  138. .max-w-35rem {
  139. max-width: 35rem !important;
  140. }
  141. @media screen and (min-width: 768px) {
  142. .\>sm\:hidden {
  143. display: none;
  144. }
  145. }
  146. @media screen and (max-width: 640px) {
  147. .sm\:max-w-7rem {
  148. max-width: 7rem !important;
  149. }
  150. .sm\:max-w-8rem {
  151. max-width: 8rem !important;
  152. }
  153. .sm\:max-w-9rem {
  154. max-width: 9rem !important;
  155. }
  156. .sm\:max-w-10rem {
  157. max-width: 10rem !important;
  158. }
  159. .sm\:max-w-12rem {
  160. max-width: 12rem !important;
  161. }
  162. .sm\:max-w-14rem {
  163. max-width: 14rem !important;
  164. }
  165. .sm\:max-w-17rem {
  166. max-width: 17rem !important;
  167. }
  168. }
  169. .anniversary-page .anniversary-page__container {
  170. background-image: url(/images/anniversary/background.png);
  171. padding-bottom: 12.5rem;
  172. background-repeat: no-repeat;
  173. background-size: contain;
  174. display: flex;
  175. flex-direction: column;
  176. gap: 8rem;
  177. }
  178. @media screen and (max-width: 640px) {
  179. .anniversary-page .anniversary-page__container {
  180. padding-bottom: 4.5rem;
  181. gap: 1rem;
  182. }
  183. }
  184. .anniversary-page .anniversary-banner {
  185. min-height: calc(100vh - 80px);
  186. display: flex;
  187. align-items: center;
  188. }
  189. @media screen and (max-height: 700px) {
  190. .anniversary-page .anniversary-banner {
  191. align-items: flex-start;
  192. }
  193. }
  194. .anniversary-page .anniversary-banner .anniversary-banner__container {
  195. display: flex;
  196. flex-direction: column;
  197. align-items: center;
  198. max-width: 1168px;
  199. margin: 0 auto;
  200. padding-top: 6rem;
  201. padding-bottom: 6rem;
  202. }
  203. @media (max-height: 900px) {
  204. .anniversary-page .anniversary-banner .anniversary-banner__container {
  205. padding-top: 12rem;
  206. }
  207. }
  208. .anniversary-page .anniversary-banner .anniversary-banner__container .anniversary-banner__logo {
  209. width: 288px;
  210. height: 400px;
  211. }
  212. @media screen and (max-width: 640px) {
  213. .anniversary-page .anniversary-banner .anniversary-banner__container .anniversary-banner__logo {
  214. width: 122px;
  215. height: 175px;
  216. }
  217. }
  218. .anniversary-page .anniversary-banner .anniversary-banner__container .anniversary-banner__title {
  219. color: black;
  220. font-size: 74px;
  221. font-weight: 700;
  222. text-align: center;
  223. padding-top: 1rem;
  224. }
  225. .anniversary-page .anniversary-banner .anniversary-banner__container .anniversary-banner__title .comma {
  226. width: 4rem;
  227. height: 100%;
  228. }
  229. .anniversary-page .anniversary-banner .anniversary-banner__container .anniversary-banner__title .comma::before {
  230. content: "\FF0C";
  231. }
  232. @media screen and (max-width: 640px) {
  233. .anniversary-page .anniversary-banner .anniversary-banner__container .anniversary-banner__title .comma {
  234. display: none;
  235. }
  236. }
  237. .anniversary-page .anniversary-banner .anniversary-banner__container .anniversary-banner__title div {
  238. display: inline-block;
  239. }
  240. .anniversary-page .anniversary-banner .anniversary-banner__container .anniversary-banner__title span {
  241. color: #007FFF;
  242. }
  243. @media screen and (max-width: 640px) {
  244. .anniversary-page .anniversary-banner .anniversary-banner__container .anniversary-banner__title {
  245. display: flex;
  246. align-items: center;
  247. flex-direction: column;
  248. line-height: 62px;
  249. font-size: 42px;
  250. }
  251. }
  252. .anniversary-page .anniversary-banner .anniversary-banner__container .anniversary-banner__title.en {
  253. font-size: 68px;
  254. font-weight: 500;
  255. }
  256. @media screen and (max-width: 640px) {
  257. .anniversary-page .anniversary-banner .anniversary-banner__container .anniversary-banner__title.en {
  258. font-size: 36px;
  259. font-weight: 700;
  260. line-height: 42px;
  261. }
  262. }
  263. .anniversary-page .anniversary-banner .anniversary-banner__container .anniversary-banner__description {
  264. font-size: 21px;
  265. padding: 1rem 115px;
  266. text-align: center;
  267. margin-bottom: 0.75rem;
  268. }
  269. .anniversary-page .anniversary-banner .anniversary-banner__container .anniversary-banner__description.en {
  270. padding: 1rem 100px;
  271. }
  272. @media screen and (max-width: 640px) {
  273. .anniversary-page .anniversary-banner .anniversary-banner__container .anniversary-banner__description.en {
  274. padding: 1rem;
  275. font-size: 12px;
  276. }
  277. }
  278. @media screen and (max-width: 640px) {
  279. .anniversary-page .anniversary-banner .anniversary-banner__container .anniversary-banner__description {
  280. padding: 1rem;
  281. font-size: 12px;
  282. }
  283. }
  284. .anniversary-page .anniversary-banner .anniversary-banner__container .anniversary-banner__button {
  285. background-color: #007FFF;
  286. color: white;
  287. border-radius: 9999px;
  288. border: none;
  289. padding: 4px 2rem;
  290. font-size: 22px;
  291. }
  292. .anniversary-page .anniversary-section .anniversary-section__container {
  293. margin: 0 auto;
  294. padding: 0 1rem;
  295. max-width: 1168px;
  296. }
  297. .anniversary-page .anniversary-section.heading {
  298. margin-bottom: 6rem;
  299. }
  300. @media screen and (max-width: 768px) {
  301. .anniversary-page .anniversary-section.heading {
  302. margin-bottom: 5rem;
  303. }
  304. }
  305. .anniversary-page .anniversary-section.heading .anniversary-section__container {
  306. color: black;
  307. display: flex;
  308. flex-direction: column;
  309. gap: 2rem;
  310. }
  311. @media (max-width: 639.9px) {
  312. .anniversary-page .anniversary-section.heading .anniversary-section__container {
  313. gap: 1rem;
  314. width: unset;
  315. max-width: 27rem;
  316. }
  317. .anniversary-page .anniversary-section.heading .anniversary-section__container.zh {
  318. max-width: 25rem;
  319. }
  320. }
  321. .anniversary-page .anniversary-section.heading .anniversary-section__container .slide-from-bottom {
  322. transition: transform 800ms cubic-bezier(0.34, -0.32, 0.19, 1.08);
  323. transition-delay: var(--slide-delay, 0ms);
  324. }
  325. .anniversary-page .anniversary-section.heading .anniversary-section__container .slide-from-bottom:not(.windi-1109hck):not(.active) {
  326. transform: translateY(80%);
  327. }
  328. .anniversary-page .anniversary-section.heading .anniversary-section__container .slide-from-bottom.windi-1109hck:not(.active) {
  329. --tw-translate-y: calc(80% + -30px);
  330. }
  331. .anniversary-page .anniversary-section.heading .anniversary-section__container .tokens {
  332. display: -webkit-inline-box;
  333. display: -ms-inline-flexbox;
  334. display: -webkit-inline-flex;
  335. display: inline-flex;
  336. -webkit-box-align: center;
  337. -ms-flex-align: center;
  338. -webkit-align-items: center;
  339. align-items: center;
  340. -webkit-box-pack: center;
  341. -ms-flex-pack: center;
  342. -webkit-justify-content: center;
  343. justify-content: center;
  344. font-weight: 700;
  345. font-size: 104px;
  346. line-height: 1;
  347. margin-bottom: 1.2rem;
  348. grid-gap: 0.75rem;
  349. gap: 0.75rem;
  350. width: 100%;
  351. overflow: hidden;
  352. }
  353. @media screen and (max-width: 768px) {
  354. .anniversary-page .anniversary-section.heading .anniversary-section__container .tokens {
  355. font-size: 64px;
  356. line-height: 1;
  357. }
  358. }
  359. @media (max-width: 640px) {
  360. .anniversary-page .anniversary-section.heading .anniversary-section__container .tokens {
  361. font-size: 52px;
  362. line-height: 1;
  363. }
  364. }
  365. .anniversary-page .anniversary-section.heading .anniversary-section__container .tokens .tokens-icon {
  366. display: -webkit-inline-box;
  367. display: -ms-inline-flexbox;
  368. display: -webkit-inline-flex;
  369. display: inline-flex;
  370. -webkit-box-align: center;
  371. -ms-flex-align: center;
  372. -webkit-align-items: center;
  373. align-items: center;
  374. height: 100px;
  375. }
  376. @media (max-width: 639.9px) {
  377. .anniversary-page .anniversary-section.heading .anniversary-section__container .tokens .tokens-icon {
  378. height: 50px;
  379. }
  380. }
  381. .anniversary-page .anniversary-section.heading .anniversary-section__container .tokens .tokens-icon .icon-1 {
  382. height: 100%;
  383. }
  384. @media (max-width: 639.9px) {
  385. .anniversary-page .anniversary-section.heading .anniversary-section__container .tokens .tokens-icon .icon-1 {
  386. display: none;
  387. }
  388. }
  389. .anniversary-page .anniversary-section.heading .anniversary-section__container .tokens .tokens-icon .icon-2 {
  390. height: 100%;
  391. }
  392. .anniversary-page .anniversary-section.heading .anniversary-section__container .description-small {
  393. padding: 0 1rem;
  394. }
  395. @media (min-width: 640px) {
  396. .anniversary-page .anniversary-section.heading .anniversary-section__container .description-small {
  397. display: none;
  398. }
  399. }
  400. .anniversary-page .anniversary-section.heading .anniversary-section__container .description-small .change-how-we-innovate-share {
  401. font-weight: 700;
  402. font-size: 36px;
  403. line-height: 1;
  404. line-height: 70px;
  405. position: relative;
  406. text-indent: 68px;
  407. }
  408. .anniversary-page .anniversary-section.heading .anniversary-section__container .description-small .and-interact {
  409. font-weight: 700;
  410. font-size: 36px;
  411. line-height: 1;
  412. position: relative;
  413. text-align: right;
  414. }
  415. @media (max-width: 639.9px) {
  416. .anniversary-page .anniversary-section.heading .anniversary-section__container .description-large {
  417. display: none;
  418. }
  419. }
  420. .anniversary-page .anniversary-section.heading .anniversary-section__container .description-large .change-how-we-innovate {
  421. display: -webkit-box;
  422. display: -ms-flexbox;
  423. display: -webkit-flex;
  424. display: flex;
  425. -webkit-box-align: center;
  426. -ms-flex-align: center;
  427. -webkit-align-items: center;
  428. align-items: center;
  429. -webkit-box-pack: center;
  430. -ms-flex-pack: center;
  431. -webkit-justify-content: center;
  432. justify-content: center;
  433. font-weight: 700;
  434. font-size: 72px;
  435. line-height: 1;
  436. position: relative;
  437. overflow: hidden;
  438. }
  439. @media screen and (max-width: 768px) {
  440. .anniversary-page .anniversary-section.heading .anniversary-section__container .description-large .change-how-we-innovate {
  441. font-size: 50px;
  442. }
  443. }
  444. .anniversary-page .anniversary-section.heading .anniversary-section__container .description-large .share-and-interact {
  445. font-size: 72px;
  446. line-height: 1;
  447. padding-top: 30px;
  448. font-weight: 700;
  449. display: flex;
  450. justify-content: center;
  451. overflow: hidden;
  452. }
  453. @media screen and (max-width: 768px) {
  454. .anniversary-page .anniversary-section.heading .anniversary-section__container .description-large .share-and-interact {
  455. font-size: 50px;
  456. }
  457. }
  458. .anniversary-page .anniversary-section.heading .anniversary-section__container .description-large .share-and-interact.en {
  459. justify-content: flex-start;
  460. }
  461. .anniversary-page .anniversary-section.accessible {
  462. margin-bottom: -6rem;
  463. }
  464. @media screen and (max-width: 768px) {
  465. .anniversary-page .anniversary-section.accessible {
  466. margin-bottom: 0rem;
  467. }
  468. }
  469. .anniversary-page .anniversary-section.accessible .anniversary-section__container h2 {
  470. text-align: center;
  471. font-size: 62px;
  472. font-weight: 700;
  473. }
  474. .anniversary-page .anniversary-section.accessible .anniversary-section__container h2 span {
  475. color: #007fff;
  476. }
  477. @media screen and (max-width: 768px) {
  478. .anniversary-page .anniversary-section.accessible .anniversary-section__container h2 {
  479. font-size: 36px;
  480. }
  481. }
  482. @media screen and (max-width: 640px) {
  483. .anniversary-page .anniversary-section.accessible .anniversary-section__container h2 {
  484. font-size: 24px;
  485. }
  486. }
  487. .anniversary-page .anniversary-section.benifits {
  488. margin-bottom: -4.5rem;
  489. }
  490. @media screen and (max-width: 768px) {
  491. .anniversary-page .anniversary-section.benifits {
  492. margin-bottom: 0rem;
  493. }
  494. }
  495. .anniversary-page .anniversary-section.benifits .anniversary-section__container {
  496. display: grid;
  497. grid-template-columns: repeat(2, minmax(0, 1fr));
  498. align-items: end;
  499. gap: 3rem;
  500. }
  501. @media screen and (max-width: 768px) {
  502. .anniversary-page .anniversary-section.benifits .anniversary-section__container {
  503. gap: 1rem;
  504. }
  505. }
  506. .anniversary-page .anniversary-section.benifits .anniversary-section__container .wysiwys {
  507. display: flex;
  508. flex-direction: column;
  509. align-items: center;
  510. justify-content: flex-end;
  511. height: 100%;
  512. }
  513. .anniversary-page .anniversary-section.benifits .anniversary-section__container .wysiwys div:first-child {
  514. padding: 58px;
  515. color: #121314;
  516. font-weight: 500;
  517. font-size: 42px;
  518. flex: 1;
  519. width: 100%;
  520. display: flex;
  521. align-items: flex-end;
  522. justify-content: flex-start;
  523. }
  524. @media screen and (max-width: 768px) {
  525. .anniversary-page .anniversary-section.benifits .anniversary-section__container .wysiwys div:first-child {
  526. padding: 40px;
  527. font-size: 24px;
  528. }
  529. }
  530. @media screen and (max-width: 640px) {
  531. .anniversary-page .anniversary-section.benifits .anniversary-section__container .wysiwys div:first-child {
  532. padding: 16px;
  533. font-size: 14px;
  534. }
  535. }
  536. @media screen and (max-width: 640px) {
  537. .anniversary-page .anniversary-section.benifits .anniversary-section__container .wysiwys div:first-child.en {
  538. padding-right: 0;
  539. }
  540. }
  541. .anniversary-page .anniversary-section.benifits .anniversary-section__container .left-card {
  542. background-color: #f3f3f3;
  543. border-radius: 62px;
  544. overflow: hidden;
  545. }
  546. @media screen and (max-width: 640px) {
  547. .anniversary-page .anniversary-section.benifits .anniversary-section__container .left-card {
  548. border-radius: 18px;
  549. }
  550. }
  551. .anniversary-page .anniversary-section.benifits .anniversary-section__container .left-card > img:not(.active) {
  552. transform: translateY(-80%);
  553. }
  554. .anniversary-page .anniversary-section.benifits .anniversary-section__container .left-card > img.active {
  555. animation: 800ms 1 slide-from-top cubic-bezier(0.25, 0.46, 0.45, 0.94);
  556. }
  557. .anniversary-page .anniversary-section.benifits .anniversary-section__container .right-card {
  558. border-radius: 62px;
  559. overflow: hidden;
  560. background-size: contain;
  561. background-image: url(/images/anniversary/benifit-2-bg.png);
  562. }
  563. @media screen and (max-width: 640px) {
  564. .anniversary-page .anniversary-section.benifits .anniversary-section__container .right-card {
  565. border-radius: 18px;
  566. }
  567. }
  568. .anniversary-page .anniversary-section.benifits .anniversary-section__container .right-card > img:not(.active) {
  569. transform: translateY(80%);
  570. }
  571. .anniversary-page .anniversary-section.benifits .anniversary-section__container .right-card > img.active {
  572. animation: 800ms 1 slide-from-bottom cubic-bezier(0.25, 0.46, 0.45, 0.94);
  573. }
  574. .anniversary-page .anniversary-section.benifits .anniversary-section__container img {
  575. width: 100%;
  576. }
  577. .anniversary-page .anniversary-section.connect .card {
  578. position: relative;
  579. display: flex;
  580. align-items: flex-end;
  581. flex-direction: column;
  582. font-weight: 500;
  583. font-size: 42px;
  584. color: black;
  585. background-color: #f5f5f5;
  586. border-radius: 66px;
  587. background-image: url(/_next/static/images/connect-bg-f591277b05754272a67e028dcbc1e01a.png);
  588. background-size: contain;
  589. background-repeat: no-repeat;
  590. }
  591. @media screen and (max-width: 640px) {
  592. .anniversary-page .anniversary-section.connect .card {
  593. font-size: 16px;
  594. border-radius: 18px;
  595. }
  596. }
  597. .anniversary-page .anniversary-section.connect .navigate-button {
  598. padding-top: 2rem;
  599. }
  600. @media screen and (max-width: 640px) {
  601. .anniversary-page .anniversary-section.connect .navigate-button {
  602. padding-top: 1.1rem;
  603. }
  604. }
  605. .anniversary-page .anniversary-section.connect .navigate-button .button {
  606. display: inline-flex;
  607. align-items: center;
  608. justify-content: center;
  609. background-color: transparent;
  610. border: 2px black solid;
  611. padding: 0.75rem 2rem;
  612. border-radius: 4rem;
  613. }
  614. @media screen and (max-width: 768px) and (min-width: 640px) {
  615. .anniversary-page .anniversary-section.connect .navigate-button .button {
  616. border-width: 1px;
  617. padding: 0.45rem 1.2rem;
  618. }
  619. .anniversary-page .anniversary-section.connect .navigate-button .button .arrow-left {
  620. width: 81px;
  621. height: 45px;
  622. }
  623. }
  624. @media screen and (max-width: 640px) {
  625. .anniversary-page .anniversary-section.connect .navigate-button .button {
  626. border-width: 1px;
  627. padding: 0.25rem 1rem;
  628. }
  629. .anniversary-page .anniversary-section.connect .navigate-button .button .arrow-left {
  630. width: 54px;
  631. height: 30px;
  632. }
  633. }
  634. .anniversary-page .anniversary-section.connect .metamask-icon {
  635. position: absolute;
  636. left: 0;
  637. bottom: 0;
  638. transform: scale(0.4) translateX(-370px) translateY(640px);
  639. }
  640. @media screen and (max-width: 640px) {
  641. .anniversary-page .anniversary-section.connect .metamask-icon {
  642. transform: scale(0.15) translateX(-1580px) translateY(1840px);
  643. }
  644. }
  645. .anniversary-page .anniversary-section.connect .imkey-icon {
  646. position: absolute;
  647. left: 0;
  648. bottom: 0;
  649. transform: scale(0.8) translateX(20px) translateY(-90px);
  650. }
  651. @media screen and (max-width: 640px) {
  652. .anniversary-page .anniversary-section.connect .imkey-icon {
  653. transform: scale(0.3) translateX(-40px) translateY(-40px);
  654. }
  655. }
  656. .anniversary-page .anniversary-section.tokenhub {
  657. margin-top: 10rem;
  658. }
  659. @media screen and (max-width: 640px) {
  660. .anniversary-page .anniversary-section.tokenhub {
  661. margin-top: 5rem;
  662. }
  663. }
  664. .anniversary-page .anniversary-section.tokenhub .anniversary-section__container .title {
  665. text-align: center;
  666. margin: 0 auto;
  667. margin-bottom: 50px;
  668. display: flex;
  669. justify-content: center;
  670. }
  671. .anniversary-page .anniversary-section.tokenhub .anniversary-section__container .title h3 {
  672. font-size: 62px;
  673. font-weight: 700;
  674. }
  675. @media screen and (max-width: 640px) {
  676. .anniversary-page .anniversary-section.tokenhub .anniversary-section__container .title h3 {
  677. font-size: 24px;
  678. }
  679. }
  680. .anniversary-page .anniversary-section.tokenhub .anniversary-section__container .title span {
  681. color: #007FFF;
  682. }
  683. @media screen and (max-width: 640px) {
  684. .anniversary-page .anniversary-section.tokenhub .anniversary-section__container .title {
  685. margin-bottom: 20px;
  686. }
  687. }
  688. .anniversary-page .anniversary-section.tokenhub .anniversary-section__container .card {
  689. position: relative;
  690. background-repeat: no-repeat;
  691. background-size: cover;
  692. background-position: right;
  693. background-color: #f5f5f5;
  694. padding: 75px;
  695. border-radius: 66px;
  696. font-weight: 500;
  697. color: black;
  698. display: flex;
  699. flex-direction: column;
  700. height: 420px;
  701. overflow: hidden;
  702. }
  703. .anniversary-page .anniversary-section.tokenhub .anniversary-section__container .card .tokenhub-animation-container {
  704. position: absolute;
  705. top: 0;
  706. bottom: 0;
  707. right: 0;
  708. }
  709. .anniversary-page .anniversary-section.tokenhub .anniversary-section__container .card .tokenhub-animation {
  710. height: 100%;
  711. }
  712. @media screen and (max-width: 640px) {
  713. .anniversary-page .anniversary-section.tokenhub .anniversary-section__container .card {
  714. font-size: 16px;
  715. padding: 24px;
  716. border-radius: 18px;
  717. height: 150px;
  718. }
  719. .anniversary-page .anniversary-section.tokenhub .anniversary-section__container .card .tokenhub-animation {
  720. transform: translateX(20px);
  721. }
  722. }
  723. .anniversary-page .anniversary-section.tokenhub .anniversary-section__container .card a[role="button"] {
  724. margin-top: auto;
  725. display: inline-flex;
  726. align-items: center;
  727. justify-content: center;
  728. color: white;
  729. background-color: #007FFF;
  730. border: none;
  731. border-radius: 9999px;
  732. padding: 0.5rem 2rem;
  733. font-size: 32px;
  734. gap: 0.25rem;
  735. }
  736. @media screen and (max-width: 640px) {
  737. .anniversary-page .anniversary-section.tokenhub .anniversary-section__container .card a[role="button"] {
  738. font-size: 11px;
  739. padding: 0.25rem 1rem;
  740. }
  741. .anniversary-page .anniversary-section.tokenhub .anniversary-section__container .card a[role="button"] .arrow-left {
  742. width: 6px;
  743. height: 10px;
  744. }
  745. }
  746. .anniversary-page .anniversary-section.tokenhub .anniversary-section__container .card .description {
  747. max-width: 400px;
  748. flex: 1;
  749. font-size: 42px;
  750. position: relative;
  751. }
  752. .anniversary-page .anniversary-section.tokenhub .anniversary-section__container .card .description:not(.zh) {
  753. line-height: 1.3;
  754. max-width: 490px;
  755. }
  756. @media screen and (max-width: 640px) {
  757. .anniversary-page .anniversary-section.tokenhub .anniversary-section__container .card .description:not(.zh) {
  758. max-width: 150px;
  759. }
  760. }
  761. @media screen and (max-width: 640px) {
  762. .anniversary-page .anniversary-section.tokenhub .anniversary-section__container .card .description {
  763. padding-top: 0.25rem;
  764. max-width: 180px;
  765. font-size: 14px;
  766. }
  767. .anniversary-page .anniversary-section.tokenhub .anniversary-section__container .card .description.zh {
  768. font-size: 16px;
  769. max-width: 150px;
  770. }
  771. }
  772. .anniversary-page .anniversary-section.tokenhub .anniversary-section__container .card .description + div {
  773. position: relative;
  774. }
  775. @keyframes slide-from-top {
  776. 0% {
  777. transform: translateY(-80%);
  778. }
  779. 100% {
  780. transform: translateY(0%);
  781. }
  782. }
  783. @keyframes slide-from-bottom {
  784. 0% {
  785. transform: translateY(80%);
  786. }
  787. 100% {
  788. transform: translateY(0);
  789. }
  790. }
  791. .windi-o3zaxq {
  792. display: inline-block;
  793. height: 55px;
  794. margin-bottom: 5px;
  795. }
  796. .windi-o3zdct {
  797. display: inline-block;
  798. height: 65px;
  799. margin-bottom: 5px;
  800. }
  801. .windi-14d11x5 {
  802. height: 60px;
  803. position: absolute;
  804. top: -10px;
  805. left: 15%;
  806. }
  807. .windi-odphbs {
  808. display: inline-block;
  809. height: 100px;
  810. margin-right: 1rem;
  811. }
  812. .windi-1jkqlwy {
  813. display: inline-block;
  814. height: 100px;
  815. }
  816. .windi-1109hck {
  817. display: inline-block;
  818. height: 120px;
  819. margin-right: 3.75rem;
  820. --tw-translate-x: 0;
  821. --tw-translate-y: 0;
  822. --tw-translate-z: 0;
  823. --tw-rotate: 0;
  824. --tw-rotate-x: 0;
  825. --tw-rotate-y: 0;
  826. --tw-rotate-z: 0;
  827. --tw-skew-x: 0;
  828. --tw-skew-y: 0;
  829. --tw-scale-x: 1;
  830. --tw-scale-y: 1;
  831. --tw-scale-z: 1;
  832. -webkit-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z));
  833. -ms-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z));
  834. transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z)) rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z));
  835. --tw-translate-y: -30px;
  836. --tw-translate-x: 3rem;
  837. }
  838. .windi-10z9n45 {
  839. display: -webkit-box;
  840. display: -ms-flexbox;
  841. display: -webkit-flex;
  842. display: flex;
  843. -webkit-box-orient: vertical;
  844. -webkit-box-direction: normal;
  845. -ms-flex-direction: column;
  846. -webkit-flex-direction: column;
  847. flex-direction: column;
  848. -webkit-box-align: end;
  849. -ms-flex-align: end;
  850. -webkit-align-items: flex-end;
  851. align-items: flex-end;
  852. padding-top: 5%;
  853. padding-bottom: 5%;
  854. padding-right: 5%;
  855. }
  856. @media (max-width: 639.9px) {
  857. .windi-10z9n45 {
  858. font-size: 14px;
  859. }
  860. }
  861. .windi-e4wi42 {
  862. display: none;
  863. }
  864. @media (max-width: 639.9px) {
  865. .windi-e4wi42 {
  866. display: block;
  867. }
  868. }
  869. .download-btn {
  870. width: 190px;
  871. height: 48px;
  872. background: #468BDF;
  873. border-radius: 8px;
  874. display: flex;
  875. justify-content: center;
  876. align-items: center;
  877. font-weight: 500;
  878. font-size: 18px;
  879. color: #FAFCFF;
  880. }
  881. @media (max-width: 860px) {
  882. .download-wrapper {
  883. display: flex;
  884. justify-content: center;
  885. }
  886. }
  887. /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
  888. /* stylelint-disable no-duplicate-selectors */
  889. /* stylelint-disable */
  890. /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
  891. .ant-divider {
  892. -webkit-box-sizing: border-box;
  893. box-sizing: border-box;
  894. margin: 0;
  895. padding: 0;
  896. color: rgba(0, 0, 0, 0.65);
  897. font-size: 14px;
  898. font-variant: tabular-nums;
  899. line-height: 1.5;
  900. list-style: none;
  901. -webkit-font-feature-settings: 'tnum';
  902. font-feature-settings: 'tnum';
  903. background: #e8e8e8;
  904. }
  905. .ant-divider,
  906. .ant-divider-vertical {
  907. position: relative;
  908. top: -0.06em;
  909. display: inline-block;
  910. width: 1px;
  911. height: 0.9em;
  912. margin: 0 8px;
  913. vertical-align: middle;
  914. }
  915. .ant-divider-horizontal {
  916. display: block;
  917. clear: both;
  918. width: 100%;
  919. min-width: 100%;
  920. height: 1px;
  921. margin: 24px 0;
  922. }
  923. .ant-divider-horizontal.ant-divider-with-text-center,
  924. .ant-divider-horizontal.ant-divider-with-text-left,
  925. .ant-divider-horizontal.ant-divider-with-text-right {
  926. display: table;
  927. margin: 16px 0;
  928. color: rgba(0, 0, 0, 0.85);
  929. font-weight: 500;
  930. font-size: 16px;
  931. white-space: nowrap;
  932. text-align: center;
  933. background: transparent;
  934. }
  935. .ant-divider-horizontal.ant-divider-with-text-center::before,
  936. .ant-divider-horizontal.ant-divider-with-text-left::before,
  937. .ant-divider-horizontal.ant-divider-with-text-right::before,
  938. .ant-divider-horizontal.ant-divider-with-text-center::after,
  939. .ant-divider-horizontal.ant-divider-with-text-left::after,
  940. .ant-divider-horizontal.ant-divider-with-text-right::after {
  941. position: relative;
  942. top: 50%;
  943. display: table-cell;
  944. width: 50%;
  945. border-top: 1px solid #e8e8e8;
  946. -webkit-transform: translateY(50%);
  947. -ms-transform: translateY(50%);
  948. transform: translateY(50%);
  949. content: '';
  950. }
  951. .ant-divider-horizontal.ant-divider-with-text-left .ant-divider-inner-text,
  952. .ant-divider-horizontal.ant-divider-with-text-right .ant-divider-inner-text {
  953. display: inline-block;
  954. padding: 0 10px;
  955. }
  956. .ant-divider-horizontal.ant-divider-with-text-left::before {
  957. top: 50%;
  958. width: 5%;
  959. }
  960. .ant-divider-horizontal.ant-divider-with-text-left::after {
  961. top: 50%;
  962. width: 95%;
  963. }
  964. .ant-divider-horizontal.ant-divider-with-text-right::before {
  965. top: 50%;
  966. width: 95%;
  967. }
  968. .ant-divider-horizontal.ant-divider-with-text-right::after {
  969. top: 50%;
  970. width: 5%;
  971. }
  972. .ant-divider-inner-text {
  973. display: inline-block;
  974. padding: 0 24px;
  975. }
  976. .ant-divider-dashed {
  977. background: none;
  978. border-color: #e8e8e8;
  979. border-style: dashed;
  980. border-width: 1px 0 0;
  981. }
  982. .ant-divider-horizontal.ant-divider-with-text-center.ant-divider-dashed,
  983. .ant-divider-horizontal.ant-divider-with-text-left.ant-divider-dashed,
  984. .ant-divider-horizontal.ant-divider-with-text-right.ant-divider-dashed {
  985. border-top: 0;
  986. }
  987. .ant-divider-horizontal.ant-divider-with-text-center.ant-divider-dashed::before,
  988. .ant-divider-horizontal.ant-divider-with-text-left.ant-divider-dashed::before,
  989. .ant-divider-horizontal.ant-divider-with-text-right.ant-divider-dashed::before,
  990. .ant-divider-horizontal.ant-divider-with-text-center.ant-divider-dashed::after,
  991. .ant-divider-horizontal.ant-divider-with-text-left.ant-divider-dashed::after,
  992. .ant-divider-horizontal.ant-divider-with-text-right.ant-divider-dashed::after {
  993. border-style: dashed none none;
  994. }
  995. .ant-divider-vertical.ant-divider-dashed {
  996. border-width: 0 0 0 1px;
  997. }
  998. .section-wrap {
  999. display: flex;
  1000. justify-content: center;
  1001. margin: 0 auto;
  1002. padding: 70px 0 70px 0;
  1003. }
  1004. .section-wrap .section-inner {
  1005. width: 100%;
  1006. max-width: 1168px;
  1007. }
  1008. .section-wrap .section-inner .title {
  1009. font-size: 32px;
  1010. line-height: 42px;
  1011. text-align: center;
  1012. color: #191C1E;
  1013. font-weight: 300;
  1014. }
  1015. .section-wrap .section-inner .subtitle {
  1016. font-size: 17px;
  1017. line-height: 28px;
  1018. text-align: center;
  1019. color: #777A8C;
  1020. margin-top: 10px;
  1021. font-weight: 300;
  1022. }
  1023. @media (max-width: 1024px) {
  1024. .section-wrap .section-inner {
  1025. padding: 0 30px;
  1026. }
  1027. .section-wrap .section-inner .title {
  1028. font-size: 25px;
  1029. line-height: 29px;
  1030. text-align: left;
  1031. }
  1032. .section-wrap .section-inner .subtitle {
  1033. font-size: 15px;
  1034. line-height: 28px;
  1035. text-align: left;
  1036. }
  1037. }
  1038. .section-wrap .section-inner > .flex-row.feature-row {
  1039. justify-content: space-around;
  1040. align-items: flex-start;
  1041. margin-top: 45px;
  1042. margin-bottom: 45px;
  1043. }
  1044. .section-wrap .section-inner > .flex-row.feature-row .flex-column {
  1045. width: 290px;
  1046. }
  1047. .section-wrap .section-inner > .flex-row.feature-row .flex-column > div {
  1048. display: flex;
  1049. flex-flow: column nowrap;
  1050. align-items: center;
  1051. }
  1052. .section-wrap .section-inner > .flex-row.feature-row .flex-column > div .title {
  1053. font-size: 21px;
  1054. line-height: 25px;
  1055. color: #43454f;
  1056. margin-bottom: 14px;
  1057. margin-top: 24px;
  1058. }
  1059. .section-wrap .section-inner > .flex-row.feature-row .flex-column > div .subtitle {
  1060. font-size: 17px;
  1061. line-height: 25px;
  1062. color: #949ea6;
  1063. text-align: center;
  1064. margin-top: 0;
  1065. font-weight: 300;
  1066. }
  1067. @media (max-width: 1024px) {
  1068. .section-wrap .section-inner > .flex-row.feature-row {
  1069. flex-flow: column nowrap;
  1070. align-items: center;
  1071. }
  1072. .section-wrap .section-inner > .flex-row.feature-row .flex-column {
  1073. flex-flow: row nowrap;
  1074. width: calc(100vw - 50px);
  1075. margin-bottom: 30px;
  1076. }
  1077. .section-wrap .section-inner > .flex-row.feature-row .flex-column > div {
  1078. flex-flow: row nowrap;
  1079. align-items: flex-start;
  1080. }
  1081. .section-wrap .section-inner > .flex-row.feature-row .flex-column > div img {
  1082. width: 33px;
  1083. height: 33px;
  1084. flex: none;
  1085. }
  1086. .section-wrap .section-inner > .flex-row.feature-row .flex-column > div > div {
  1087. padding-left: 20px;
  1088. }
  1089. .section-wrap .section-inner > .flex-row.feature-row .flex-column > div > div .title {
  1090. text-align: left;
  1091. font-size: 17px;
  1092. margin-top: 0;
  1093. padding-left: 0;
  1094. margin-bottom: 9px;
  1095. font-weight: 400;
  1096. }
  1097. .section-wrap .section-inner > .flex-row.feature-row .flex-column > div > div .subtitle {
  1098. text-align: left;
  1099. font-size: 13px;
  1100. line-height: 19px;
  1101. }
  1102. }
  1103. .section-wrap .section-inner > .flex-row {
  1104. justify-content: space-around;
  1105. align-items: center;
  1106. margin-top: 45px;
  1107. }
  1108. .section-wrap .section-inner > .flex-row .text-part {
  1109. max-width: 440px;
  1110. }
  1111. .section-wrap .section-inner > .flex-row .text-part p {
  1112. text-align: left;
  1113. }
  1114. .floating-bar-wrapper {
  1115. position: sticky;
  1116. width: fit-content;
  1117. margin-right: 40px;
  1118. left: 100%;
  1119. bottom: 40px;
  1120. z-index: 99999;
  1121. cursor: pointer;
  1122. }
  1123. @media (max-width: 960px) {
  1124. .floating-bar-wrapper {
  1125. margin-right: 20px;
  1126. margin-bottom: 30px;
  1127. bottom: 20px;
  1128. }
  1129. }
  1130. .activity-entry-img {
  1131. width: 120px;
  1132. height: 90px;
  1133. image-rendering: pixelated;
  1134. }
  1135. .checksum-wrapper {
  1136. width: 457px;
  1137. background: #FAFAFA;
  1138. padding: 15px;
  1139. padding-top: 35px;
  1140. border-radius: 16px;
  1141. position: relative;
  1142. z-index: 0;
  1143. top: -25px;
  1144. }
  1145. .checksum-wrapper .checksum_header {
  1146. display: flex;
  1147. align-items: center;
  1148. justify-content: space-between;
  1149. cursor: pointer;
  1150. }
  1151. .checksum-wrapper .arrow-bottom {
  1152. transition: all 0.2s;
  1153. }
  1154. .checksum-wrapper .checksum_line {
  1155. display: flex;
  1156. align-items: center;
  1157. }
  1158. .checksum-wrapper .apk-version {
  1159. font-size: 12px;
  1160. font-weight: 400;
  1161. color: #191C1E;
  1162. text-align: left;
  1163. padding-top: 20px;
  1164. padding-left: 15px;
  1165. }
  1166. .checksum-wrapper .verify-security {
  1167. font-size: 12px;
  1168. font-weight: 400;
  1169. color: #191C1E;
  1170. }
  1171. .checksum-wrapper .learn-more-wrppaer {
  1172. display: flexbox;
  1173. padding: 15px 0;
  1174. }
  1175. .checksum-wrapper .learn-more {
  1176. line-height: 20px;
  1177. margin-top: 2px;
  1178. margin-bottom: 20px;
  1179. padding-bottom: 20px;
  1180. margin-right: 4px;
  1181. }
  1182. .checksum-wrapper .checksum_body {
  1183. margin-top: 10px;
  1184. background: #FFFFFF;
  1185. border-radius: 8px;
  1186. }
  1187. .checksum-wrapper .checksum_body .hash-block {
  1188. text-align: left;
  1189. width: 427px;
  1190. padding: 15px 15px 0 15px;
  1191. color: #555555;
  1192. font-size: 12px;
  1193. font-weight: normal;
  1194. }
  1195. .checksum-wrapper .checksum_body .hash-block .name {
  1196. word-wrap: break-word;
  1197. color: #191C1E;
  1198. }
  1199. .checksum-wrapper .checksum_body .hash-block .hash {
  1200. word-wrap: break-word;
  1201. color: #9598AB;
  1202. margin-top: 5px;
  1203. }
  1204. .checksum-wrapper .checksum_expand {
  1205. width: 16px;
  1206. height: 16px;
  1207. margin-left: 7px;
  1208. }
  1209. @media (max-width: 860px) {
  1210. .checksum-wrapper {
  1211. width: 100%;
  1212. }
  1213. .checksum-wrapper .checksum_body .hash-block {
  1214. width: 100%;
  1215. }
  1216. }
  1217. .fake-warning {
  1218. width: 457px;
  1219. background: #FFFAF0;
  1220. border: 0.5px solid #F9EAC8;
  1221. box-sizing: border-box;
  1222. border-radius: 16px;
  1223. position: relative;
  1224. margin-top: 35px;
  1225. padding: 15px 24px;
  1226. text-align: left;
  1227. z-index: 1;
  1228. }
  1229. .fake-warning a {
  1230. font-size: 13px;
  1231. font-weight: 400;
  1232. }
  1233. .fake-warning div {
  1234. font-size: 13px;
  1235. font-weight: 400;
  1236. }
  1237. .fake-warning .make-sure-correct-addr {
  1238. margin-right: 50px;
  1239. }
  1240. .fake-warning .fake-warning__line {
  1241. width: 418px;
  1242. height: 1px;
  1243. background: #F9EAC8;
  1244. border-radius: 16px;
  1245. margin: 10px 0;
  1246. }
  1247. .fake-warning .learn-more {
  1248. display: flex;
  1249. align-items: center;
  1250. }
  1251. .fake-warning .learn-more .learn-more-link {
  1252. color: #D87400;
  1253. font-size: 13px;
  1254. margin-right: 5px;
  1255. }
  1256. .guard-img {
  1257. position: absolute;
  1258. right: -2.89px;
  1259. top: -25px;
  1260. }
  1261. .right-domain {
  1262. margin-top: 6px;
  1263. }
  1264. .fake-tip-item {
  1265. display: flex;
  1266. align-items: center;
  1267. margin: 3px 0;
  1268. position: relative;
  1269. }
  1270. .fake-tip-item .list-prefix {
  1271. width: 4px;
  1272. height: 4px;
  1273. border-radius: 50%;
  1274. flex-shrink: 0;
  1275. background: black;
  1276. margin-right: 5px;
  1277. position: absolute;
  1278. top: 8px;
  1279. left: -8px;
  1280. }
  1281. @media (max-width: 860px) {
  1282. .fake-tip-wrapper {
  1283. display: flex;
  1284. flex-direction: column;
  1285. align-items: center;
  1286. width: 100%;
  1287. }
  1288. .fake-tip-wrapper .make-sure-correct-addr {
  1289. margin-right: 0;
  1290. }
  1291. .fake-warning {
  1292. width: 100%;
  1293. }
  1294. .fake-warning .fake-warning__line {
  1295. width: 100%;
  1296. }
  1297. .guard-img {
  1298. display: none;
  1299. }
  1300. }
  1301. .security-section-wrapper {
  1302. text-align: center;
  1303. }
  1304. .security-section-wrapper .security-section_title {
  1305. font-weight: 300;
  1306. font-size: 32px;
  1307. line-height: 42px;
  1308. text-align: center;
  1309. letter-spacing: 1px;
  1310. color: #191C1E;
  1311. }
  1312. .security-section-wrapper .security-section_desc {
  1313. font-family: PingFang SC, sans-serif;
  1314. font-size: 17px;
  1315. line-height: 28px;
  1316. letter-spacing: -0.128571px;
  1317. color: #9598AB;
  1318. margin: 20px 0;
  1319. }
  1320. .security-title-section-wrapper .security-title-section_title {
  1321. font-weight: 300;
  1322. font-size: 24px;
  1323. line-height: 42px;
  1324. letter-spacing: 1px;
  1325. color: #191C1E;
  1326. }
  1327. .security-title-section-wrapper .security-title-section_desc {
  1328. font-weight: 300;
  1329. font-size: 17px;
  1330. line-height: 18px;
  1331. color: #9598AB;
  1332. }
  1333. @media (max-width: 860px) {
  1334. .security-section-wrapper {
  1335. text-align: left;
  1336. width: 100%;
  1337. }
  1338. .security-section-wrapper .security-section_title {
  1339. text-align: left;
  1340. font-size: 25px;
  1341. }
  1342. .security-section-wrapper .security-section_desc {
  1343. text-align: left;
  1344. font-size: 15px;
  1345. margin-top: 0;
  1346. margin-bottom: 0;
  1347. }
  1348. }
  1349. .link-block-wrapper {
  1350. width: 1018px;
  1351. height: 115px;
  1352. background: #FFFFFF;
  1353. border: 1px solid #EEEFF0;
  1354. margin: 36px 0;
  1355. display: flex;
  1356. padding: 30px;
  1357. justify-content: space-between;
  1358. align-items: center;
  1359. transition: 0.2s background;
  1360. border-radius: 8px;
  1361. }
  1362. .link-block-wrapper .link-block_info-wrapper {
  1363. display: flex;
  1364. align-items: center;
  1365. }
  1366. .link-block-wrapper .link-block_info-wrapper .link-block_info {
  1367. margin-left: 20px;
  1368. }
  1369. .link-block-wrapper .link-block_title {
  1370. font-weight: 500;
  1371. font-size: 21px;
  1372. line-height: 26px;
  1373. color: #43454F;
  1374. }
  1375. .link-block-wrapper .link-block_desc {
  1376. font-weight: 300;
  1377. font-size: 17px;
  1378. line-height: 17px;
  1379. color: #9598AB;
  1380. margin-top: 12px;
  1381. }
  1382. .direction-link-block_arrow {
  1383. width: 24px;
  1384. height: 24px;
  1385. }
  1386. .action-link-block_action-button {
  1387. width: 150px;
  1388. height: 45px;
  1389. background: #538CD9;
  1390. border-radius: 8px;
  1391. font-size: 16px;
  1392. font-weight: 500;
  1393. line-height: 24px;
  1394. display: flex;
  1395. align-items: center;
  1396. justify-content: center;
  1397. color: #FFFFFF;
  1398. cursor: pointer;
  1399. }
  1400. .action-link-block_action-button:hover {
  1401. background: #468BDF;
  1402. }
  1403. @media (max-width: 860px) {
  1404. .link-block-wrapper {
  1405. width: 100%;
  1406. height: 120px;
  1407. padding: 24px 26px 24px 15px;
  1408. margin-top: 18px;
  1409. }
  1410. .link-block-wrapper .link-block_info-wrapper {
  1411. margin-right: 33px;
  1412. }
  1413. .link-block-wrapper .link-block_info-wrapper .link-block_info {
  1414. margin-left: 0;
  1415. }
  1416. .link-block-wrapper .link-block_title {
  1417. font-size: 17px;
  1418. font-weight: 400;
  1419. }
  1420. .link-block-wrapper .link-block_desc {
  1421. font-size: 13px;
  1422. }
  1423. }
  1424. .contact-block-wrapper {
  1425. width: 485px;
  1426. height: 157px;
  1427. display: flex;
  1428. flex-direction: column;
  1429. justify-content: center;
  1430. align-items: center;
  1431. border-radius: 8px;
  1432. border: 1px solid #EEEFF0;
  1433. }
  1434. .contact-block-wrapper .contact-block_desc {
  1435. margin-top: 20px;
  1436. font-weight: 300;
  1437. font-size: 15px;
  1438. line-height: 17px;
  1439. color: #9598AB;
  1440. }
  1441. .contact-block-wrapper .contact-block_action-button {
  1442. cursor: pointer;
  1443. display: flex;
  1444. justify-content: center;
  1445. align-items: center;
  1446. border-radius: 8px;
  1447. width: 340px;
  1448. height: 45px;
  1449. border: 1px solid #468BDF;
  1450. transition: 0.2s background;
  1451. }
  1452. @media (max-width: 860px) {
  1453. .contact-block-wrapper {
  1454. width: 100%;
  1455. margin-top: 18px;
  1456. height: 130px;
  1457. }
  1458. }
  1459. .bread-crumb_text {
  1460. color: #9598AB;
  1461. }
  1462. .breadcrumb-separator {
  1463. margin: 0 8px;
  1464. }