style.css 19 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157
  1. body {
  2. font-family: PingFang-SC-Medium, PingFang-SC;
  3. font-size: 16px;
  4. font-weight: 300;
  5. color: #888;
  6. line-height: 30px;
  7. text-align: center;
  8. }
  9. strong {
  10. font-weight: 500;
  11. }
  12. a,
  13. a:hover,
  14. a:focus {
  15. color: #3498db;
  16. text-decoration: none;
  17. -o-transition: all 0.3s;
  18. -moz-transition: all 0.3s;
  19. -webkit-transition: all 0.3s;
  20. -ms-transition: all 0.3s;
  21. transition: all 0.3s;
  22. }
  23. h1,
  24. h2 {
  25. margin-top: 10px;
  26. font-size: 60px;
  27. font-weight: 100;
  28. color: #555;
  29. line-height: 90px;
  30. }
  31. h3 {
  32. font-size: 24px;
  33. font-weight: 300;
  34. color: #555;
  35. line-height: 30px;
  36. }
  37. img {
  38. max-width: 100%;
  39. }
  40. .qqq {
  41. width: 36px;
  42. height: 3px;
  43. background: #FFFFFF;
  44. border-radius: 2px;
  45. margin: 0 auto;
  46. }
  47. .medium-paragraph {
  48. font-size: 18px;
  49. line-height: 32px;
  50. }
  51. .colored-text {
  52. color: #19b9e7;
  53. }
  54. ::-moz-selection {
  55. background: #19b9e7;
  56. color: #fff;
  57. text-shadow: none;
  58. }
  59. ::selection {
  60. background: #19b9e7;
  61. color: #fff;
  62. text-shadow: none;
  63. }
  64. /***** Loader *****/
  65. .loader {
  66. position: fixed;
  67. top: 0;
  68. left: 0;
  69. right: 0;
  70. bottom: 0;
  71. width: 100%;
  72. height: 100%;
  73. background: #fff;
  74. overflow: hidden !important;
  75. z-index: 99999;
  76. display: none;
  77. }
  78. .loader-img {
  79. position: absolute;
  80. left: 50%;
  81. top: 50%;
  82. margin: -30px 0 0 -30px;
  83. width: 60px;
  84. height: 60px;
  85. background: url(../img/loading.gif) center center no-repeat;
  86. }
  87. /***** General style, all sections *****/
  88. .section-container {
  89. margin: 0 auto;
  90. padding-bottom: 80px;
  91. }
  92. .section-container-gray-bg {
  93. background: #f8f8f8;
  94. border-top: 1px solid #ddd;
  95. border-bottom: 1px solid #ddd;
  96. }
  97. .section-container-image-bg,
  98. .section-container-image-bg h2,
  99. .section-container-image-bg h3 {
  100. color: #fff;
  101. }
  102. .section-container-image-bg .divider-1 span {
  103. background: #fff;
  104. }
  105. .section-description {
  106. margin-top: 60px;
  107. padding-bottom: 10px;
  108. }
  109. .section-description p {
  110. margin-top: 20px;
  111. padding: 0 120px;
  112. }
  113. .section-container-image-bg .section-description p {
  114. opacity: 0.8;
  115. }
  116. .section-bottom-button {
  117. padding-top: 60px;
  118. }
  119. .btn-link-1 {
  120. position: relative;
  121. display: inline-block;
  122. height: 50px;
  123. margin: 0 5px;
  124. padding: 16px 20px 0 20px;
  125. background: #f03949;
  126. font-size: 16px;
  127. font-weight: 300;
  128. line-height: 16px;
  129. color: #fff;
  130. -moz-border-radius: 4px;
  131. -webkit-border-radius: 4px;
  132. border-radius: 4px;
  133. }
  134. .btn-link-1:hover,
  135. .btn-link-1:focus,
  136. .btn-link-1:active {
  137. outline: 0;
  138. opacity: 0.6;
  139. color: #fff;
  140. }
  141. .btn-link-1:before {
  142. content: '';
  143. position: absolute;
  144. top: 50%;
  145. left: 0;
  146. width: 100%;
  147. height: 50%;
  148. background: rgba(0, 0, 0, 0.1);
  149. }
  150. .btn-link-2 {
  151. display: inline-block;
  152. height: 50px;
  153. margin: 0 5px;
  154. padding: 15px 20px 0 20px;
  155. background: rgba(0, 0, 0, 0.3);
  156. border: 1px solid #fff;
  157. font-size: 16px;
  158. font-weight: 300;
  159. line-height: 16px;
  160. color: #fff;
  161. -moz-border-radius: 4px;
  162. -webkit-border-radius: 4px;
  163. border-radius: 4px;
  164. }
  165. .btn-link-2:hover,
  166. .btn-link-2:focus,
  167. .btn-link-2:active,
  168. .btn-link-2:active:focus {
  169. outline: 0;
  170. opacity: 0.6;
  171. background: rgba(0, 0, 0, 0.3);
  172. color: #fff;
  173. }
  174. /***** Divider *****/
  175. .divider-1 span {
  176. display: inline-block;
  177. width: 200px;
  178. height: 1px;
  179. background: #ddd;
  180. }
  181. /***** Modal *****/
  182. .modal-content {
  183. -moz-border-radius: 0;
  184. -webkit-border-radius: 0;
  185. border-radius: 0;
  186. text-align: left;
  187. }
  188. .modal-body {
  189. padding: 0 25px 15px 25px;
  190. }
  191. .modal-body img {
  192. margin-bottom: 15px;
  193. }
  194. .modal-header {
  195. padding: 25px 25px 15px 25px;
  196. }
  197. .modal-footer {
  198. padding: 15px 25px 25px 25px;
  199. }
  200. .modal-header,
  201. .modal-footer {
  202. border: 0;
  203. }
  204. .modal-header .close {
  205. font-size: 36px;
  206. color: #888;
  207. font-weight: 300;
  208. text-shadow: none;
  209. opacity: 1;
  210. }
  211. .modal-footer button {
  212. height: 50px;
  213. margin: 0;
  214. padding: 0 20px;
  215. background: none;
  216. border: 1px solid #888;
  217. font-size: 16px;
  218. font-weight: 300;
  219. color: #888;
  220. -moz-border-radius: 4px;
  221. -webkit-border-radius: 4px;
  222. border-radius: 4px;
  223. text-shadow: none;
  224. -moz-box-shadow: none;
  225. -webkit-box-shadow: none;
  226. box-shadow: none;
  227. -o-transition: all 0.3s;
  228. -moz-transition: all 0.3s;
  229. -webkit-transition: all 0.3s;
  230. -ms-transition: all 0.3s;
  231. transition: all 0.3s;
  232. }
  233. .modal-footer button:hover {
  234. outline: 0;
  235. opacity: 0.6;
  236. background: none;
  237. border: 1px solid #888;
  238. color: #888;
  239. }
  240. .modal-footer button:focus,
  241. .modal-footer button:active:focus,
  242. .modal-footer button.active:focus {
  243. outline: 0;
  244. opacity: 0.6;
  245. background: none;
  246. border: 1px solid #888;
  247. color: #888;
  248. -moz-box-shadow: none;
  249. -webkit-box-shadow: none;
  250. box-shadow: none;
  251. }
  252. .modal-footer button:before {
  253. background: none;
  254. }
  255. .top-logo {
  256. width: 100%;
  257. height: 130px;
  258. background: rgb(0, 18, 1, 0.1);
  259. padding: 8px 0 0 0;
  260. }
  261. /***** Top menu *****/
  262. .navbar {
  263. padding-top: 16px;
  264. background: #333;
  265. background: rgba(51, 51, 51, 0.3);
  266. border: 0;
  267. -o-transition: all 0.3s;
  268. -moz-transition: all 0.3s;
  269. -webkit-transition: all 0.3s;
  270. -ms-transition: all 0.3s;
  271. transition: all 0.3s;
  272. position: relative;
  273. }
  274. .navbar-inverse .navbar-nav>.open>a,
  275. .navbar-inverse .navbar-nav>.open>a:focus,
  276. .navbar-inverse .navbar-nav>.open>a:hover {
  277. background: #3498db;
  278. }
  279. .navbar.navbar-no-bg {
  280. background: none;
  281. }
  282. .navbar-toggle {
  283. padding: 6px 7px;
  284. margin-top: 9px;
  285. }
  286. ul.navbar-nav {
  287. margin: 0 auto;
  288. font-size: 16px;
  289. color: #fff;
  290. }
  291. .navbar-inverse ul.navbar-nav li a {
  292. height: 50px;
  293. line-height: 25px;
  294. color: #fff;
  295. opacity: 0.8;
  296. border-bottom: 1px solid transparent;
  297. font-size: 17px;
  298. font-family: PingFang-SC-Medium, PingFang-SC;
  299. font-weight: 500;
  300. }
  301. .navbar-inverse ul.navbar-nav li a:hover {
  302. color: #fff;
  303. opacity: 1;
  304. background: #4CB4E7;
  305. }
  306. .navbar-inverse ul.navbar-nav li a:focus {
  307. color: #fff;
  308. outline: 0;
  309. opacity: 1;
  310. background: #4CB4E7;
  311. }
  312. .navbar-inverse ul.navbar-nav li a.btn-link-2 {
  313. height: auto;
  314. margin: 4px 0 0 10px;
  315. padding-top: 10px;
  316. padding-bottom: 10px;
  317. border: 1px solid #fff;
  318. }
  319. .navbar-brand {
  320. display: none;
  321. width: 40px;
  322. height: 40px;
  323. background: url(../img/gef/logo.png) left center no-repeat;
  324. background-size: contain;
  325. text-indent: -99999px;
  326. }
  327. /***** Top content *****/
  328. .inner-bg {
  329. padding: 60px 0 0 0;
  330. }
  331. .top-content {
  332. /* min-height: 1080px; */
  333. }
  334. .top-content .text {
  335. padding-bottom: 60px;
  336. color: #fff;
  337. }
  338. .top-content .text h1 {
  339. color: #fff;
  340. }
  341. .top-content .description {
  342. margin: 90px 0 10px 0;
  343. }
  344. .top-content .description p {
  345. font-size: 24px;
  346. font-family: PingFang-SC-Light, PingFang-SC;
  347. font-weight: 300;
  348. color: #c2c0c0;
  349. line-height: 24px;
  350. }
  351. .top-content .top-big-link {
  352. margin-top: 35px;
  353. }
  354. #slider-1 {
  355. max-width: 760px;
  356. margin: 0 auto;
  357. }
  358. #slider-1 .item img {
  359. -moz-border-radius: 4px 4px 0 0;
  360. -webkit-border-radius: 4px 4px 0 0;
  361. border-radius: 4px 4px 0 0;
  362. }
  363. /***** Features *****/
  364. .col_161717 {
  365. color: #161717;
  366. }
  367. .features-content {
  368. /* width: 1258px;
  369. height: 802px; */
  370. background: #FFFFFF;
  371. box-shadow: 0px 0px 48px 0px rgba(0, 20, 24, 0.08);
  372. /* margin: -49px auto 0; */
  373. }
  374. .features {
  375. padding-bottom: 30px;
  376. }
  377. .features-title {
  378. font-size: 48px;
  379. font-family: PingFang-SC-Medium, PingFang-SC;
  380. font-weight: 500;
  381. color: #4CB4E7;
  382. line-height: 80px;
  383. padding-top: 30px;
  384. }
  385. .features-box {
  386. padding-top: 15px;
  387. padding-bottom: 15px;
  388. /* transition: all .5s linear; */
  389. }
  390. /* .features-box:hover {
  391. transform: translateY(-10px);
  392. background: #000;
  393. } */
  394. .features-trans {
  395. transition: all .5s linear;
  396. }
  397. .features-trans:hover {
  398. transform: translateY(-15px);
  399. }
  400. .features-box-gray {
  401. background: #f8f8f8;
  402. }
  403. .features-box .features-box-icon {
  404. font-size: 80px;
  405. color: #3498db;
  406. line-height: 80px;
  407. }
  408. .features-box h3 {
  409. margin-top: 15px;
  410. }
  411. .features-list {
  412. margin-top: 40px;
  413. }
  414. .features-list div {
  415. margin-bottom: 15px;
  416. }
  417. .features-list img {
  418. margin-right: 8px;
  419. }
  420. /***** More features *****/
  421. .more-features-container {
  422. padding-bottom: 60px;
  423. }
  424. .more-features-box {
  425. margin-top: 30px;
  426. margin-bottom: 20px;
  427. }
  428. .more-features-box-text {
  429. margin-top: 40px;
  430. padding-left: 30px;
  431. overflow: hidden;
  432. text-align: left;
  433. }
  434. .more-features-box-text:first-child {
  435. margin-top: 20px;
  436. }
  437. .more-features-box-text-left {
  438. padding-left: 0;
  439. padding-right: 30px;
  440. }
  441. .more-features-box-text-icon {
  442. float: left;
  443. width: 60px;
  444. height: 60px;
  445. padding-top: 6px;
  446. background: #19b9e7;
  447. -moz-border-radius: 50%;
  448. -webkit-border-radius: 50%;
  449. border-radius: 50%;
  450. font-size: 40px;
  451. color: #fff;
  452. line-height: 40px;
  453. text-align: center;
  454. }
  455. .more-features-box-text h3 {
  456. float: right;
  457. width: 86%;
  458. margin-top: 0;
  459. }
  460. .more-features-box-text-description {
  461. float: right;
  462. width: 86%;
  463. }
  464. /***** Always beautiful *****/
  465. .always-beautiful-container {
  466. padding-bottom: 60px;
  467. }
  468. .always-beautiful-box {
  469. margin-top: 30px;
  470. margin-bottom: 20px;
  471. }
  472. .always-beautiful-box-text {
  473. margin-top: 40px;
  474. padding-left: 30px;
  475. overflow: hidden;
  476. text-align: left;
  477. }
  478. .always-beautiful-box-text:first-child {
  479. margin-top: 20px;
  480. }
  481. .always-beautiful-box-text-left {
  482. padding-left: 0;
  483. padding-right: 30px;
  484. }
  485. .always-beautiful-box-text h3 {
  486. margin-top: 0;
  487. }
  488. .always-beautiful-box-text .medium-paragraph {
  489. margin-top: 20px;
  490. margin-bottom: 20px;
  491. }
  492. /***** How it works *****/
  493. .how-it-works {
  494. padding-bottom: 30px;
  495. }
  496. .how-it-works-box {
  497. padding-top: 15px;
  498. padding-bottom: 15px;
  499. }
  500. .how-it-works-box .how-it-works-box-icon {
  501. position: relative;
  502. font-size: 80px;
  503. line-height: 80px;
  504. }
  505. .how-it-works-box-icon .how-it-works-step {
  506. position: absolute;
  507. top: 0;
  508. left: 95px;
  509. width: 32px;
  510. height: 32px;
  511. background: #19b9e7;
  512. -moz-border-radius: 50%;
  513. -webkit-border-radius: 50%;
  514. border-radius: 50%;
  515. font-size: 24px;
  516. color: #fff;
  517. line-height: 32px;
  518. }
  519. .how-it-works-box h3 {
  520. margin-top: 15px;
  521. }
  522. .how-it-works-box p {
  523. opacity: 0.8;
  524. }
  525. /***** Pricing *****/
  526. .pricing {
  527. padding-bottom: 30px;
  528. }
  529. .pricing-box {
  530. padding-top: 30px;
  531. padding-bottom: 20px;
  532. }
  533. .pricing-box-inner {
  534. background: #f8f8f8;
  535. }
  536. .pricing-box-price {
  537. position: relative;
  538. padding: 20px 0 7px 0;
  539. background: #eee;
  540. font-size: 42px;
  541. color: #555;
  542. line-height: 54px;
  543. }
  544. .pricing-box-best .pricing-box-price {
  545. background: #19b9e7;
  546. color: #fff;
  547. }
  548. .pricing-box-price span {
  549. font-size: 18px;
  550. color: #888;
  551. line-height: 32px;
  552. }
  553. .pricing-box-best .pricing-box-price span {
  554. color: #fff;
  555. }
  556. .pricing-box-icon {
  557. position: absolute;
  558. top: -32px;
  559. right: 20px;
  560. width: 63px;
  561. height: 63px;
  562. padding-top: 5px;
  563. background: #19b9e7;
  564. border: 3px solid #fff;
  565. -moz-border-radius: 50%;
  566. -webkit-border-radius: 50%;
  567. border-radius: 50%;
  568. }
  569. .pricing-box-icon span {
  570. display: block;
  571. font-size: 40px;
  572. line-height: 40px;
  573. }
  574. .pricing-box h3 {
  575. margin-top: 0;
  576. margin-bottom: 0;
  577. padding: 10px 20px;
  578. background: #eee;
  579. color: #888;
  580. }
  581. .pricing-box.pricing-box-best h3 {
  582. background: #19b9e7;
  583. color: #fff;
  584. }
  585. .pricing-box h4 {
  586. margin-top: 0;
  587. margin-bottom: 2px;
  588. padding: 10px 20px;
  589. background: #e8e8e8;
  590. font-size: 16px;
  591. line-height: 30px;
  592. font-weight: 300;
  593. text-transform: uppercase;
  594. }
  595. .pricing-box.pricing-box-best h4 {
  596. background: #17a7d0;
  597. color: #fff;
  598. }
  599. .pricing-box-features ul {
  600. margin: 0;
  601. padding: 0;
  602. list-style: none;
  603. }
  604. .pricing-box-features li {
  605. padding: 7px 20px;
  606. border-bottom: 1px solid #eee;
  607. }
  608. .pricing-box-sign-up {
  609. padding: 25px 0;
  610. }
  611. /***** Call to action *****/
  612. .call-to-action-container .section-bottom-button {
  613. padding-top: 30px;
  614. }
  615. /***** About us *****/
  616. .about-us-container {
  617. padding-bottom: 65px;
  618. }
  619. .about-us-box {
  620. padding-top: 30px;
  621. padding-bottom: 15px;
  622. }
  623. .about-us-box .about-us-photo {
  624. position: relative;
  625. width: 160px;
  626. margin: 0 auto;
  627. }
  628. .about-us-box .about-us-photo img {
  629. -moz-border-radius: 4px;
  630. -webkit-border-radius: 4px;
  631. border-radius: 4px;
  632. }
  633. .about-us-box .about-us-photo .about-us-role {
  634. position: absolute;
  635. bottom: 10px;
  636. left: 0;
  637. padding: 3px 5px;
  638. background: #19b9e7;
  639. font-size: 14px;
  640. color: #fff;
  641. line-height: 15px;
  642. text-transform: uppercase;
  643. }
  644. .about-us-box .about-us-social {
  645. margin-top: 5px;
  646. font-size: 36px;
  647. line-height: 36px;
  648. }
  649. .about-us-box .about-us-social a {
  650. color: #ddd;
  651. }
  652. .about-us-box .about-us-social a:hover,
  653. .about-us-box .about-us-social a:focus {
  654. color: #19b9e7;
  655. }
  656. /***** Testimonials *****/
  657. .testimonials-container {
  658. padding-bottom: 70px;
  659. }
  660. .testimonial-list {
  661. margin-top: 30px;
  662. text-align: left;
  663. }
  664. .testimonial-list .tab-pane {
  665. overflow: hidden;
  666. }
  667. .testimonial-list .testimonial-image {
  668. position: relative;
  669. float: left;
  670. width: 17%;
  671. margin: 10px 0 0 0;
  672. }
  673. .testimonial-list .testimonial-image img {
  674. max-width: 120px;
  675. -moz-border-radius: 50%;
  676. -webkit-border-radius: 50%;
  677. border-radius: 50%;
  678. }
  679. .testimonial-list .testimonial-image .testimonial-icon {
  680. position: absolute;
  681. top: 0;
  682. left: 0;
  683. width: 42px;
  684. height: 42px;
  685. padding-top: 3px;
  686. background: #19b9e7;
  687. -moz-border-radius: 50%;
  688. -webkit-border-radius: 50%;
  689. border-radius: 50%;
  690. font-size: 32px;
  691. color: #fff;
  692. line-height: 32px;
  693. text-align: center;
  694. -o-transition: all 0.3s;
  695. -moz-transition: all 0.3s;
  696. -webkit-transition: all 0.3s;
  697. -ms-transition: all 0.3s;
  698. transition: all 0.3s;
  699. }
  700. .testimonial-list .testimonial-image:hover .testimonial-icon {
  701. opacity: 0;
  702. }
  703. .testimonial-list .testimonial-text {
  704. float: left;
  705. width: 83%;
  706. }
  707. .testimonial-list .nav-tabs {
  708. border: 0;
  709. text-align: right;
  710. }
  711. .testimonial-list .nav-tabs li {
  712. float: none;
  713. display: inline-block;
  714. margin-left: 5px;
  715. margin-right: 5px;
  716. }
  717. .testimonial-list .nav-tabs li a {
  718. width: 14px;
  719. height: 14px;
  720. padding: 0;
  721. background: #ddd;
  722. border: 0;
  723. -moz-border-radius: 0;
  724. -webkit-border-radius: 0;
  725. border-radius: 0;
  726. }
  727. .testimonial-list .nav-tabs li a:hover {
  728. border: 0;
  729. background: #19b9e7;
  730. }
  731. .testimonial-list .nav-tabs li.active a {
  732. background: #19b9e7;
  733. }
  734. .testimonial-list .nav-tabs li.active a:focus {
  735. border: 0;
  736. }
  737. /***** Footer *****/
  738. footer {
  739. padding: 40px 0 35px 0;
  740. }
  741. .footer-social {
  742. font-size: 50px;
  743. line-height: 50px;
  744. }
  745. .footer-social a {
  746. color: #ddd;
  747. }
  748. .footer-social a:hover,
  749. .footer-social a:focus {
  750. color: #19b9e7;
  751. }
  752. .footer-copyright {
  753. margin-top: 25px;
  754. }
  755. .nav>li>a.social-github {
  756. padding-bottom: 7px;
  757. }
  758. .nav>li>a.social-changelog {
  759. padding-bottom: 12px;
  760. }
  761. .typcn-social-github {
  762. font-size: 25px;
  763. line-height: 10px;
  764. }
  765. .typcn-document-text {
  766. font-size: 18px;
  767. line-height: 10px;
  768. }
  769. .badges-container {
  770. padding: 20px 0;
  771. }
  772. .badges-container .badges-line {
  773. display: flex;
  774. align-items: center;
  775. justify-content: center;
  776. }
  777. .badges-container .badges-line a,
  778. .badges-container .badges-line iframe {
  779. margin: 0 5px;
  780. }
  781. .highlight-dark {
  782. color: #9feaf9;
  783. background-color: #2b2e3b;
  784. border-color: #111218;
  785. border-radius: 4px;
  786. padding: 12px;
  787. }
  788. .highlight-dark code {
  789. color: inherit;
  790. }
  791. .highlight span {
  792. display: block;
  793. }
  794. code {
  795. padding: 0;
  796. padding-top: 0.2em;
  797. padding-bottom: 0.2em;
  798. margin: 0;
  799. font-size: 85%;
  800. background-color: rgba(0, 0, 0, 0.04);
  801. border-radius: 3px;
  802. }
  803. .highlight .c1 {
  804. color: #3498db;
  805. font-style: italic;
  806. }
  807. .highlight .c2 {
  808. color: #fff;
  809. }
  810. .getting-started-container h3 {
  811. text-align: center;
  812. padding-top: 10px;
  813. }
  814. .screenshot {
  815. border: 1px solid #dddddd;
  816. }
  817. .carousel-indicators li {
  818. border: 1px solid #737272;
  819. }
  820. .carousel-indicators .active {
  821. background: #737272;
  822. }
  823. .carousel-indicators {
  824. bottom: 0px;
  825. }
  826. .carousel-caption {
  827. padding-bottom: 15px;
  828. text-shadow: 0 1px 2px rgba(0, 0, 0, 1);
  829. }
  830. .carousel-caption h3 {
  831. color: #fff;
  832. }
  833. .navbar-inverse .navbar-toggle,
  834. .navbar-inverse .navbar-toggle:focus,
  835. .navbar-inverse .navbar-toggle:hover {
  836. border-color: #fff;
  837. }
  838. .navbar-inverse .navbar-toggle:focus,
  839. .navbar-inverse .navbar-toggle:hover {
  840. background-color: transparent;
  841. }
  842. .social-changelog .typcn {
  843. margin-right: 5px;
  844. }
  845. .mdl-layout__drawer {
  846. width: 315px;
  847. -webkit-transform: translateX(-315px);
  848. transform: translateX(-315px);
  849. }
  850. .mdl-layout__content {
  851. margin-left: 315px;
  852. }
  853. footer object {
  854. width: 100%;
  855. height: 110px;
  856. }
  857. .swiper {}
  858. .swiper-item-content {
  859. padding: 33px 40px;
  860. /* width: 617px; */
  861. height: auto;
  862. background: #FFFFFF;
  863. box-shadow: 0px 4px 40px 0px rgba(43, 89, 255, 0.08);
  864. border-radius: 10px;
  865. font-size: 24px;
  866. font-family: PingFang-SC-Medium, PingFang-SC;
  867. font-weight: 500;
  868. color: #000B33;
  869. line-height: 33px;
  870. display: flex;
  871. flex-flow: column;
  872. justify-content: space-between;
  873. }
  874. .swiper_userinfo {
  875. display: flex;
  876. justify-content: start;
  877. text-align: left;
  878. align-items: center;
  879. }
  880. .pltx {
  881. width: 60px;
  882. height: 60px;
  883. }
  884. .plname {
  885. font-size: 24px;
  886. }
  887. .wer {
  888. font-size: 18px;
  889. font-family: PingFang-SC-Medium, PingFang-SC;
  890. font-weight: 500;
  891. color: #000B33;
  892. line-height: 18px;
  893. }
  894. .gsareg {
  895. display: flex;
  896. justify-content: end;
  897. }
  898. .gsareg img {
  899. width: 20px;
  900. height: 20px;
  901. }
  902. .bg-bottom {
  903. display: flex;
  904. flex-flow: column;
  905. justify-content: center;
  906. height: 835px;
  907. }
  908. .formbox {
  909. margin-top: 95px;
  910. }
  911. .mobile input[type="text"] {
  912. width: 100%;
  913. height: 56px;
  914. background: #FFFFFF;
  915. border-radius: 28px;
  916. border: 1px solid #979797;
  917. outline: none;
  918. margin-top: 20px;
  919. }
  920. #submit {
  921. margin-top: 20px;
  922. width: 144px;
  923. height: 56px;
  924. background: #4CB4E7;
  925. border-radius: 28px;
  926. font-size: 20px;
  927. font-family: PingFang-SC-Medium, PingFang-SC;
  928. font-weight: 500;
  929. color: #FFFFFF;
  930. line-height: 20px;
  931. outline: none;
  932. border-color: transparent;
  933. box-shadow: none;
  934. }
  935. /*
  936. #scrollUp {
  937. background-color: #777;
  938. color: #eee;
  939. font-size: 40px;
  940. line-height: 1;
  941. text-align: center;
  942. text-decoration: none;
  943. bottom: 20px;
  944. right: 20px;
  945. overflow: hidden;
  946. width: 46px;
  947. height: 46px;
  948. border: none;
  949. opacity: .8;
  950. } */