猎豆优选小程序

main.css 16KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771
  1. /* ------------------------------------------------------------------------------
  2. Typography
  3. -------------------------------------------------------------------------------*/
  4. @import url(4a8e6531bd3d4a69bce60a46a5836201.css);
  5. p {
  6. font-size: 14px;
  7. line-height: 22.4px;
  8. color: #6c7279;
  9. }
  10. h1 {
  11. font-size:35px;
  12. color: #2d3033;
  13. font-weight:100;
  14. }
  15. h2 {
  16. font-size: 30px;
  17. color: #000;
  18. font-weight:100;
  19. }
  20. h3 {
  21. font-size: 28px;
  22. color: #2d3033;
  23. font-weight: 300;
  24. letter-spacing:1px;
  25. }
  26. h4 {
  27. font-size: 17px;
  28. color: #000;
  29. font-weight: 400;
  30. }
  31. h5 {
  32. font-size: 14px;
  33. color: #2d3033;
  34. text-transform: uppercase;
  35. font-weight: 700;
  36. }
  37. .btn {
  38. background-color: #e84545;
  39. color: #fff;
  40. font-size: 13px;
  41. font-weight: 600;
  42. border: 0;
  43. -moz-border-radius: 2px;
  44. -webkit-border-radius: 2px;
  45. border-radius: 2px;
  46. display: inline-block;
  47. text-transform: uppercase;
  48. }
  49. .btn:hover, .btn:focus {
  50. background-color: #e52e2e;
  51. color: #fff;
  52. }
  53. .btn-large {
  54. padding: 15px 40px;
  55. }
  56. .copyrights{
  57. text-indent:-9999px;
  58. height:0;
  59. line-height:0;
  60. font-size:0;
  61. overflow:hidden;
  62. }
  63. /* ------------------------------------------------------------------------------
  64. Global Styles
  65. -------------------------------------------------------------------------------*/
  66. a {
  67. color: #e84545;
  68. }
  69. a:hover, a:focus {
  70. text-decoration: none;
  71. -moz-transition: background-color, color, 0.3s;
  72. -o-transition: background-color, color, 0.3s;
  73. -webkit-transition: background-color, color, 0.3s;
  74. transition: background-color, color, 0.3s;
  75. }
  76. body {
  77. font-family: Arial,Helvetica,"\5FAE\8F6F\96C5\9ED1";
  78. font-weight: 400;
  79. color: #333;
  80. }
  81. ul, ol {
  82. margin: 0;
  83. padding: 0;
  84. }
  85. ul li {
  86. list-style: none;
  87. }
  88. .section {
  89. padding: 28px 0;
  90. }
  91. .no-padding {
  92. padding: 0;
  93. }
  94. .no-gutter [class*=col-] {
  95. padding-right: 0;
  96. padding-left: 0;
  97. }
  98. .section-title {
  99. margin-top: 0;
  100. letter-spacing:2px;
  101. line-height: 39px;
  102. }
  103. .section-title span {
  104. font-weight: 600;
  105. }
  106. .section-intro {
  107. margin:5% 10% 12% 10%;
  108. color: #636363;
  109. font-size:14px;
  110. line-height:21px;
  111. font-weight: 300;
  112. letter-spacing:1px;
  113. }
  114. .icon {
  115. font-size:33px;
  116. color:#000;
  117. }
  118. .img-responsive {
  119. margin:auto;
  120. }
  121. /* ------------------------------------------------------------------------------
  122. Header
  123. -------------------------------------------------------------------------------*/
  124. #header {
  125. position: fixed;
  126. width: 100%;
  127. z-index: 999;
  128. }
  129. #header .header-content {
  130. margin: 0 auto;
  131. max-width: 1170px;
  132. padding: 20px 0;
  133. width: 100%;
  134. -moz-transition: padding 0.3s;
  135. -o-transition: padding 0.3s;
  136. -webkit-transition: padding 0.3s;
  137. transition: padding 0.3s;
  138. }
  139. #header .logo {
  140. float: left;
  141. }
  142. #header.fixed {
  143. background-color: #000;
  144. filter:alpha(Opacity=80);
  145. -moz-opacity:0.8;
  146. opacity: 0.8;
  147. }
  148. #header.fixed .header-content {
  149. border-bottom: 0;
  150. padding: 10px 0;
  151. }
  152. #header.fixed .nav-toggle {
  153. top: 18px;
  154. }
  155. .navigation.open {
  156. opacity: 0.9;
  157. visibility: visible;
  158. -moz-transition: opacity 0.5s;
  159. -o-transition: opacity 0.5s;
  160. -webkit-transition: opacity 0.5s;
  161. transition: opacity 0.5s;
  162. }
  163. .navigation {
  164. float: right;
  165. padding: 20px 0;
  166. }
  167. .navigation li {
  168. display: inline-block;
  169. }
  170. .navigation a {
  171. color: rgba(255, 255, 255, 0.8);
  172. font-size: 12px;
  173. font-weight: 400;
  174. margin-left: 40px;
  175. letter-spacing: 1px;
  176. text-transform: uppercase;
  177. }
  178. .navigation a:hover, .navigation a.active {
  179. color: #fff;
  180. }
  181. .nav-toggle {
  182. display: none;
  183. height: 44px;
  184. overflow: hidden;
  185. position: fixed;
  186. right: 5%;
  187. text-indent: 100%;
  188. top: 32px;
  189. white-space: nowrap;
  190. width: 44px;
  191. z-index: 99999;
  192. -moz-transition: all 0.3s;
  193. -o-transition: all 0.3s;
  194. -webkit-transition: all 0.3s;
  195. transition: all 0.3s;
  196. }
  197. .nav-toggle:before, .nav-toggle:after {
  198. border-radius: 50%;
  199. content: "";
  200. height: 100%;
  201. left: 0;
  202. position: absolute;
  203. top: 0;
  204. width: 100%;
  205. -moz-transform: translateZ(0);
  206. -ms-transform: translateZ(0);
  207. -webkit-transform: translateZ(0);
  208. transform: translateZ(0);
  209. -moz-backface-visibility: hidden;
  210. -webkit-backface-visibility: hidden;
  211. backface-visibility: hidden;
  212. -moz-transition-property: -moz-transform;
  213. -o-transition-property: -o-transform;
  214. -webkit-transition-property: -webkit-transform;
  215. transition-property: transform;
  216. }
  217. .nav-toggle:before {
  218. background-color: #e84545;
  219. -moz-transform: scale(1);
  220. -ms-transform: scale(1);
  221. -webkit-transform: scale(1);
  222. transform: scale(1);
  223. -moz-transition-duration: 0.3s;
  224. -o-transition-duration: 0.3s;
  225. -webkit-transition-duration: 0.3s;
  226. transition-duration: 0.3s;
  227. }
  228. .nav-toggle:after {
  229. background-color: #e84545;
  230. -moz-transform: scale(0);
  231. -ms-transform: scale(0);
  232. -webkit-transform: scale(0);
  233. transform: scale(0);
  234. -moz-transition-duration: 0s;
  235. -o-transition-duration: 0s;
  236. -webkit-transition-duration: 0s;
  237. transition-duration: 0s;
  238. }
  239. .nav-toggle span {
  240. background-color: #fff;
  241. bottom: auto;
  242. display: inline-block;
  243. height: 3px;
  244. left: 50%;
  245. position: absolute;
  246. right: auto;
  247. top: 50%;
  248. width: 18px;
  249. z-index: 10;
  250. -moz-transform: translateX(-50%) translateY(-50%);
  251. -ms-transform: translateX(-50%) translateY(-50%);
  252. -webkit-transform: translateX(-50%) translateY(-50%);
  253. transform: translateX(-50%) translateY(-50%);
  254. }
  255. .nav-toggle span:before, .nav-toggle span:after {
  256. background-color: #fff;
  257. content: "";
  258. height: 100%;
  259. position: absolute;
  260. right: 0;
  261. top: 0;
  262. width: 100%;
  263. -moz-transform: translateZ(0);
  264. -ms-transform: translateZ(0);
  265. -webkit-transform: translateZ(0);
  266. transform: translateZ(0);
  267. -moz-backface-visibility: hidden;
  268. -webkit-backface-visibility: hidden;
  269. backface-visibility: hidden;
  270. -moz-transition: -moz-transform 0.3s;
  271. -o-transition: -o-transform 0.3s;
  272. -webkit-transition: -webkit-transform 0.3s;
  273. transition: transform 0.3s;
  274. }
  275. .nav-toggle span:before {
  276. -moz-transform: translateY(-6px) rotate(0deg);
  277. -ms-transform: translateY(-6px) rotate(0deg);
  278. -webkit-transform: translateY(-6px) rotate(0deg);
  279. transform: translateY(-6px) rotate(0deg);
  280. }
  281. .nav-toggle span:after {
  282. -moz-transform: translateY(6px) rotate(0deg);
  283. -ms-transform: translateY(6px) rotate(0deg);
  284. -webkit-transform: translateY(6px) rotate(0deg);
  285. transform: translateY(6px) rotate(0deg);
  286. }
  287. .nav-toggle.close-nav:before {
  288. -moz-transform: scale(0);
  289. -ms-transform: scale(0);
  290. -webkit-transform: scale(0);
  291. transform: scale(0);
  292. }
  293. .nav-toggle.close-nav:after {
  294. -moz-transform: scale(1);
  295. -ms-transform: scale(1);
  296. -webkit-transform: scale(1);
  297. transform: scale(1);
  298. }
  299. .nav-toggle.close-nav span {
  300. background-color: rgba(255, 255, 255, 0);
  301. }
  302. .nav-toggle.close-nav span:before, .nav-toggle.close-nav span:after {
  303. background-color: #fff;
  304. }
  305. .nav-toggle.close-nav span:before {
  306. -moz-transform: translateY(0) rotate(45deg);
  307. -ms-transform: translateY(0) rotate(45deg);
  308. -webkit-transform: translateY(0) rotate(45deg);
  309. transform: translateY(0) rotate(45deg);
  310. }
  311. .nav-toggle.close-nav span:after {
  312. -moz-transform: translateY(0) rotate(-45deg);
  313. -ms-transform: translateY(0) rotate(-45deg);
  314. -webkit-transform: translateY(0) rotate(-45deg);
  315. transform: translateY(0) rotate(-45deg);
  316. }
  317. /* ------------------------------------------------------------------------------
  318. Banner
  319. -------------------------------------------------------------------------------*/
  320. .banner {
  321. background-color: #ce2200;
  322. min-height: 750px;
  323. }
  324. .banner-text {
  325. padding-top: 30%;
  326. }
  327. .banner-text h1 {
  328. color: #fff;
  329. font-weight: 600;
  330. font-size:38px;
  331. line-height: 48px;
  332. margin-bottom: 0%;
  333. }
  334. .banner-text h2 {
  335. color: #fff;
  336. font-size: 33px;
  337. line-height: 48px;}
  338. }
  339. .banner-text span {
  340. font-weight: 600;
  341. font-size:38px;}
  342. .banner-text p {
  343. color: #fff;
  344. font-size: 16px;
  345. font-weight: 300;
  346. line-height: 24px;
  347. margin-bottom: 7%;
  348. }
  349. .banner-img {
  350. bottom: -142px;
  351. position: relative;
  352. }
  353. .banner-btn a {
  354. margin-right: 15px;
  355. /*display:inline-block*/
  356. }
  357. /* ------------------------------------------------------------------------------
  358. Overview
  359. -------------------------------------------------------------------------------*/
  360. .overview-content h4 {
  361. text-transform:uppercase;
  362. letter-spacing:1px;
  363. }
  364. .overview-content p {
  365. font-size:13px;
  366. font-weight: 300;
  367. line-height: 21px;
  368. letter-spacing:1px;
  369. padding-right:12%;
  370. }
  371. .overview-video {
  372. margin:auto;
  373. margin-bottom:7%;
  374. z-index:1;
  375. }
  376. .overview-video iframe {
  377. width:800px;
  378. height:450px;
  379. }
  380. /* ------------------------------------------------------------------------------
  381. Feature 1
  382. -------------------------------------------------------------------------------*/
  383. .features1 {
  384. background-color:#FFF;
  385. }
  386. .left {
  387. text-align:right;
  388. padding-right:5%;
  389. }
  390. .middle {
  391. padding-left:3.5%;
  392. }
  393. .right {
  394. padding-left:5%;
  395. }
  396. .features1-content {
  397. margin-top:20%;
  398. }
  399. .features1-content h4 {
  400. text-transform:uppercase;
  401. letter-spacing:1px;
  402. margin-top:20px;
  403. }
  404. .features1-content p {
  405. font-size:13px;
  406. font-weight: 300;
  407. line-height: 21px;
  408. letter-spacing:1px;
  409. margin-top:24px;
  410. }
  411. /* ------------------------------------------------------------------------------
  412. Feature 2 & 3
  413. -------------------------------------------------------------------------------*/
  414. .features2 {
  415. padding-bottom:0;
  416. }
  417. .features2-content {
  418. margin-top:10%;
  419. }
  420. .features2-content img {
  421. bottom: -100px;
  422. }
  423. .features2-content p {
  424. font-size:14px;
  425. font-weight: 300;
  426. line-height: 21px;
  427. letter-spacing:1px;
  428. margin-top:7%;
  429. }
  430. .features2-content ul {
  431. margin-top:7%;
  432. line-height:36px;
  433. font-weight: 300;
  434. }
  435. .features2-content h2 {
  436. margin-top: 0;
  437. letter-spacing:2px;
  438. line-height: 39px;
  439. }
  440. .container span {
  441. font-size: 30px;
  442. }
  443. .features3 {
  444. background-color:#f2f2f2;
  445. padding-bottom:0;
  446. }
  447. .features3 img {
  448. bottom: -100px;
  449. padding-left:15%;
  450. }
  451. .banner-btn {
  452. margin-bottom:3%;
  453. }
  454. .banner-btn img{
  455. padding:3%;
  456. }
  457. /* ------------------------------------------------------------------------------
  458. Owl Coursol
  459. -------------------------------------------------------------------------------*/
  460. #owl-demo .item {
  461. text-align:center;
  462. }
  463. /* ------------------------------------------------------------------------------
  464. Subscribe
  465. -------------------------------------------------------------------------------*/
  466. .overlay {
  467. background-color: rgba(60, 57, 162, 0.9);
  468. height: 100%;
  469. left: 0;
  470. position: absolute;
  471. right: 0;
  472. top: 0;
  473. width: 100%;
  474. }
  475. .subscribe {
  476. width:100%;
  477. background-image:url('../images/parallax-bg.jpg');
  478. background-attachment: fixed;
  479. background-repeat: no-repeat;
  480. background-position: 50% 0;
  481. -webkit-background-size: cover;
  482. -moz-background-size: cover;
  483. -o-background-size: cover;
  484. background-size: cover;
  485. position: relative;
  486. }
  487. .subscribe h2 {
  488. margin-top: 0;
  489. color: #fff;
  490. letter-spacing:2px;
  491. }
  492. .subscribe span {
  493. font-weight:600;
  494. }
  495. .subscribe h3 {
  496. margin-bottom: 30px;
  497. font-size:24px;
  498. font-weight:100;
  499. color: #fff;
  500. letter-spacing:1px;
  501. }
  502. .subscribe p {
  503. margin:5% 10% 7% 10%;
  504. color: #fff;
  505. font-size:14px;
  506. line-height:21px;
  507. font-weight: 300;
  508. letter-spacing:1px;
  509. }
  510. .subscribe-form {
  511. margin-top: 45px;
  512. }
  513. .subscribe-form input[type=text] {
  514. width: 75%;
  515. height: 60px;
  516. display: block;
  517. padding: 0 20px;
  518. background-color: #fff;
  519. border: 1px solid #fff;
  520. -webkit-border-top-left-radius: 2px;
  521. -webkit-border-bottom-left-radius: 2px;
  522. -moz-border-radius-topleft: 2px;
  523. -moz-border-radius-bottomleft: 2px;
  524. border-top-left-radius: 2px;
  525. border-bottom-left-radius: 2px;
  526. line-height: 60px;
  527. letter-spacing:1px;
  528. font-size:15px;
  529. font-weight:300;
  530. float: left;
  531. }
  532. .subscribe-form input:focus {
  533. outline: 0;
  534. }
  535. .subscribe-form input[type=submit] {
  536. width: 25%;
  537. height: 60px;
  538. display: block;
  539. padding: 0 10px;
  540. background-color: #a0ce4e;
  541. border: 1px solid #a0ce4e;
  542. color: #fff;
  543. -webkit-border-top-right-radius: 2px;
  544. -webkit-border-bottom-right-radius: 2px;
  545. -moz-border-radius-topright: 2px;
  546. -moz-border-radius-bottomright: 2px;
  547. border-top-right-radius: 2px;
  548. border-bottom-right-radius: 2px;
  549. font-weight: 700;
  550. transition: all 0.125s ease-in-out 0s;
  551. -moz-transition: all 0.125s ease-in-out 0s;
  552. -webkit-transition: all 0.125s ease-in-out 0s;
  553. -o-transition: all 0.125s ease-in-out 0s;
  554. -ms-transition: all 0.125s ease-in-out 0s;
  555. float: right;
  556. }
  557. .subscribe-form input[type=submit]:hover {
  558. background-color: #7ebb12;
  559. border: 1px solid #7ebb12;
  560. color: #fff;
  561. }
  562. .error_message {
  563. color:#fc6e51;
  564. padding-bottom:15px;
  565. font-size:13px;
  566. line-height:30px;
  567. }
  568. #success_page {
  569. color:#9ce726;
  570. padding-bottom:10px;
  571. font-size:12px;
  572. }
  573. #success_page h3 {
  574. font-size:17px;
  575. font-weight:400px;
  576. color:#4ab217;
  577. }
  578. #success_page p {
  579. font-size:12px;
  580. font-weight:400px;
  581. color:#b3b3b3;
  582. }
  583. /* ------------------------------------------------------------------------------
  584. Contact form
  585. -------------------------------------------------------------------------------*/
  586. .conForm {
  587. padding-left:50px;
  588. padding-right:50px;
  589. }
  590. .conForm input {
  591. background:#fff;
  592. color:#797979;
  593. padding:15px 30px;
  594. border:none;
  595. margin-right:3%;
  596. margin-bottom:20px;
  597. outline:none;
  598. font-style:normal;
  599. border:#dedede 1px solid;
  600. font-size:15px;
  601. }
  602. .conForm input.noMarr {
  603. margin-right:0px;
  604. }
  605. .conForm textarea {
  606. background:#fff;
  607. color:#797979;
  608. padding:15px 30px;
  609. margin-bottom:18px;
  610. outline:none;
  611. height:140px;
  612. font-style:normal;
  613. resize:none;
  614. font-size:15px;
  615. border:#dedede 1px solid;
  616. }
  617. .conForm .submitBnt {
  618. background:#a0ce4e;
  619. color: #fff;
  620. padding: 15px 40px;
  621. font-size: 13px;
  622. font-weight: 600;
  623. letter-spacing: 5px;
  624. border: 0;
  625. -moz-border-radius: 2px;
  626. -webkit-border-radius: 2px;
  627. border-radius: 2px;
  628. display: inline-block;
  629. text-transform: uppercase;
  630. }
  631. .conForm .submitBnt:hover {
  632. background:#3d3d3d;
  633. color:#fff;
  634. }
  635. .error_message {
  636. color: #ff675f;
  637. font-weight: 500;
  638. padding-bottom: 15px;
  639. }
  640. #success_page h3 {
  641. color: #5ed07b;
  642. font-size: 17px;
  643. font-weight: 700;
  644. }
  645. /* ------------------------------------------------------------------------------
  646. Footer
  647. -------------------------------------------------------------------------------*/
  648. .footer {
  649. text-align: center;
  650. background-color:#201f22;
  651. }
  652. .footer p {
  653. font-size: 14px;
  654. color: #636363;
  655. }
  656. .footer p > a {
  657. font-size: 14px;
  658. color: #636363;
  659. }
  660. .footer a {
  661. font-size:18px;
  662. color: #7f7f7f;
  663. }
  664. .footer a:hover {
  665. color: #e84545;
  666. }
  667. .footer .footer-share {
  668. margin-top: 0;
  669. }
  670. .footer .footer-share li {
  671. border: 1px solid rgba(255, 255, 255, 0.2);
  672. border-radius: 50%;
  673. color: #ffffff;
  674. width: 70px;
  675. height: 70px;
  676. border-radius: 50%;
  677. padding: 22px 0;
  678. margin: 0 10px;
  679. display: inline-block;
  680. float: none;
  681. }
  682. .footer .footer-share a {
  683. color: #fff;
  684. }
  685. .footer .fa-heart {
  686. color: #e84545;
  687. font-size: 11px;
  688. margin: 0 2px;
  689. }
  690. .wxkf{
  691. width: 120px;
  692. }
  693. @media (max-width: 767px) {
  694. .wxkf {
  695. width: 60px;
  696. }
  697. }
  698. /**
  699. * pricing
  700. * --------------------------------------------------
  701. */
  702. .pricing-table {
  703. border: 1px solid rgba(0, 0, 0, 0.1);
  704. -webkit-border-radius: 4px;
  705. border-radius: 4px;
  706. }
  707. @media (max-width: 767px) {
  708. .pricing-table {
  709. margin-top: 20px;
  710. }
  711. }
  712. .pricing-table-header {
  713. position: relative;
  714. padding: 20px 15px;
  715. }
  716. .pricing-table-content {
  717. background-color: #fff;
  718. padding-left:18px;
  719. }
  720. .pricing-table-footer {
  721. background-color: #fff;
  722. border-top: 1px solid rgba(0, 0, 0, 0.1);
  723. padding: 20px;
  724. }
  725. .pricing-table-list {
  726. list-style: none;
  727. padding-left: 0;
  728. }
  729. .pricing-table-list li {
  730. padding: 12px 20px;
  731. }
  732. .pricing-table-list li:not(:first-child) {
  733. border-top: 1px solid rgba(0, 0, 0, 0.1);
  734. }
  735. .pricing-table-list li i {
  736. margin-right: .5em;
  737. color: #10cfbd;
  738. }
  739. .pricing-table-title {
  740. font-size: 22px;
  741. font-weight: 600;
  742. text-transform: none;
  743. margin-bottom: 0;
  744. }
  745. @media (min-width: 768px) {
  746. .pricing-table-title {
  747. font-size: 32px;
  748. }
  749. }
  750. .section-content li {
  751. padding: 6px 0px;}
  752. .align-l {
  753. text-align: left !important;
  754. }