style.css 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559
  1. /*
  2. 01 - Global styles
  3. */
  4. html,
  5. body {
  6. height: 100%;
  7. }
  8. body {
  9. font-family: Helvetica Neue,Hiragino Sans GB,stheiti,Microsoft Yahei,微软雅黑,tahoma,sans-serif;
  10. background: #fff;
  11. font-weight: 400;
  12. font-size: 15px;
  13. line-height: 1.8;
  14. -webkit-text-size-adjust: 100%;
  15. -moz-osx-font-smoothing: grayscale;
  16. -webkit-font-smoothing: antialiased;
  17. color: #333;
  18. }
  19. a,
  20. button {
  21. -moz-transition: all 0.3s;
  22. -o-transition: all 0.3s;
  23. -webkit-transition: all 0.3s;
  24. transition: all 0.3s;
  25. text-decoration: none;
  26. }
  27. a,
  28. a:hover,
  29. a:focus,
  30. button:hover,
  31. button:focus {
  32. outline: 0 !important;
  33. text-decoration: none;
  34. }
  35. .font-weight-900{
  36. font-weight: 900;
  37. }
  38. .f-50{
  39. font-size: 50px;
  40. }
  41. .btn {
  42. border-radius: 0px;
  43. text-transform: uppercase;
  44. padding: 12px 30px;
  45. }
  46. .section {
  47. padding: 100px 0px;
  48. position: relative;
  49. }
  50. .pb-70 {
  51. padding-bottom: 70px;
  52. }
  53. .pb-50 {
  54. padding-bottom: 50px;
  55. }
  56. .mb-100{
  57. margin-bottom: 100px;
  58. }
  59. .mb-50{
  60. margin-bottom: 50px;
  61. }
  62. .mb-30{
  63. margin-bottom: 30px;
  64. }
  65. .mt-30{
  66. margin-top: 30px;
  67. }
  68. .space-40 {
  69. height: 40px;
  70. width: 100%
  71. }
  72. .space-50 {
  73. height: 50px;
  74. width: 100%
  75. }
  76. .text-primary {
  77. color: #627aec !important;
  78. }
  79. .btn-primary {
  80. color: #fff;
  81. background-color: #627aec;
  82. border-color: #627aec;
  83. }
  84. .btn-dark:hover {
  85. color: #fff;
  86. background-color: #627aec;
  87. border-color: #627aec;
  88. }
  89. .btn.btn-round{ border-radius: 50px; }
  90. .bg-dark {
  91. background-color: #22232f !important;
  92. }
  93. .btn-outline-primary {
  94. color: #627aec;
  95. border-color: #627aec;
  96. }
  97. .bg-section {
  98. background-color: #f5f5f5;
  99. }
  100. .srction_title p {
  101. color: #000000;
  102. font-size: 18px;
  103. }
  104. /*02 Header*/
  105. div#header-sticky-wrapper {
  106. position: absolute;
  107. width: 100%;
  108. left: 0px;
  109. top: 0px;
  110. z-index: 999;
  111. }
  112. .navbar{
  113. padding: 0px 15px;
  114. }
  115. .is-sticky header {
  116. background-color: #22232f;
  117. }
  118. .bg-light.navbar-transparent {
  119. background-color: transparent !important;
  120. }
  121. .navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
  122. color: #627aec;
  123. }
  124. .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
  125. color: rgb(98, 122, 236);
  126. }
  127. .navbar-light .navbar-nav .nav-link {
  128. color: #fff;
  129. padding: 0 20px;
  130. text-transform: uppercase;
  131. }
  132. header .navbar-nav > li > a:not(.btn){ position: relative; line-height: 75px; }
  133. header .navbar-nav > li > a:not(.btn):before {
  134. content: "";
  135. position: absolute;
  136. right: 0;
  137. bottom: 0;
  138. width: 0px;
  139. height: 2px;
  140. background-color: #627aec;
  141. transition: 0.3s;
  142. }
  143. header .navbar-nav > li > a:not(.btn):hover:before,header .navbar-nav > li > a.active:not(.btn-round ):before {
  144. width: 100%;
  145. left: 0;
  146. right: auto;
  147. }
  148. .navbar-light .navbar-toggler {
  149. color: rgba(0,0,0,.5);
  150. border-color: rgba(0,0,0,.1);
  151. background-color: #fff;
  152. }
  153. /*hero*/
  154. .hero.section {
  155. padding-top: 200px;
  156. max-height: 800px; min-height: 800px;
  157. margin-bottom: 100px;
  158. }
  159. .home-desk {
  160. margin-bottom: -200px;
  161. }
  162. /*Box card*/
  163. .bos.bg-bos { padding: 30px 30px; }
  164. .bos h2{
  165. font-weight: 450;
  166. color: #000000; margin-bottom: 20px;
  167. }
  168. .bos.bg-bos img {
  169. height:207px;
  170. margin: 0 auto;
  171. display: block;
  172. text-align: center;
  173. margin-bottom:20px;
  174. }
  175. .bos .media h3 {
  176. margin-bottom: 10px;
  177. }
  178. /*Box card*/
  179. .bg-box {
  180. background-color: #f5f5f5;
  181. }
  182. .box.bg-box { padding: 30px 30px; }
  183. .box h3{
  184. font-size: 24px;
  185. font-weight: bold;
  186. color: #000000; margin-bottom: 20px;
  187. }
  188. .box.bg-box .icon {
  189. font-size: 36px;
  190. width: 80px;
  191. height: 80px;
  192. margin: 0 auto;
  193. border: 1px solid;
  194. display: block;
  195. line-height: 80px;
  196. margin-bottom: 20px;
  197. border-radius: 100%;
  198. text-align: center;
  199. }
  200. .box .media h3 {
  201. margin-bottom: 10px;
  202. }
  203. .box.bg-box:hover{
  204. background-color: #627aec;
  205. }
  206. .box.bg-box:hover .icon{
  207. background-color: #fff;
  208. color: #fff;
  209. }
  210. .box.bg-box:hover h3,.box.bg-box:hover p{
  211. color: #fff;
  212. }
  213. /*-- ==== Start Call Action ==== */
  214. .call_action .icon {
  215. width: 120px;
  216. height: 120px;
  217. background-color: #fff;
  218. border-radius: 100%;
  219. line-height: 125px;
  220. font-size: 40px;
  221. text-align: center;
  222. color: #627aec;
  223. margin: 0 auto 40px;
  224. }
  225. /*What people say*/
  226. span.blockquote_icon {
  227. position: absolute;
  228. right: 0;
  229. font-size: 150px;
  230. display: block;
  231. bottom: 84px;
  232. line-height: 0;
  233. color: #f0f0f0;
  234. transform: rotate(-180deg);
  235. pointer-events: none;
  236. }
  237. .what_say_sldier .media {
  238. position: relative;
  239. }
  240. .owl-dots .owl-dot {
  241. width: 10px;
  242. height: 10px;
  243. background: #ddd;
  244. border-radius: 100%;
  245. margin: 0 5px;
  246. }
  247. .owl-dots {
  248. display: flex;
  249. justify-content: center; margin-top: 30px;
  250. }
  251. .owl-dots .owl-dot.active {
  252. background-color: #000;
  253. }
  254. /*price*/
  255. section.section.pricing {
  256. position: relative;
  257. }
  258. section.section.pricing .bg_box {
  259. position: absolute;
  260. width: 100%;
  261. height: 450px;
  262. top: 0;
  263. background-repeat: no-repeat;
  264. background-size: cover;
  265. }
  266. section.section.pricing .container {
  267. position: relative;
  268. z-index: 10;
  269. }
  270. .card.price_box {
  271. box-shadow: 2.5px 4.33px 20px rgba(0,0,0,0.2);
  272. background-color: transparent;
  273. text-align: center;
  274. padding: 30px;
  275. }
  276. .card.price_box h2 {
  277. font-size: 15px;
  278. line-height: 40px;
  279. font-weight: 700;
  280. }
  281. .card.price_box h3 {
  282. font-size: 48px;
  283. line-height: 40px;
  284. font-weight: 900;
  285. text-align: center;
  286. }
  287. .card.price_box h3 sub{
  288. font-size: 24px; bottom: 0px; margin: 0 5px;
  289. }
  290. .card.price_box ul li{
  291. font-size: 16px;
  292. line-height: 45px;
  293. color: #939499;
  294. font-weight: 400;
  295. text-align: center;
  296. }
  297. .card.price_box.active {
  298. border: 2px solid rgba(255,255,255,0.04);
  299. }
  300. .pricing_slider .item {
  301. padding: 20px;
  302. }
  303. /*Our Team */
  304. .team_img {
  305. width: 255px;
  306. height: 256px;
  307. border-radius: 128px;
  308. background-color: #ffffff;
  309. border: 6px solid #a9aaae;
  310. text-align: center;
  311. padding: 30px; margin: 0 auto;
  312. }
  313. .team_img img{
  314. border-radius: 100%;
  315. }
  316. .social li a {
  317. background-color: transparent;
  318. border-radius: 100%;
  319. color: #828282; border:1px solid #828282;
  320. float: left;
  321. font-size: 14px;
  322. height: 36px;
  323. line-height: 36px;
  324. margin: 0;
  325. padding: 0;
  326. text-align: center;
  327. width: 36px;
  328. position: relative;
  329. }
  330. .social li a:hover {
  331. background-color: #627aec;
  332. color: #fff; border:1px solid #627aec;
  333. }
  334. .team-box:hover .team_img{ border: 6px solid #627aec; }
  335. /*newsletter*/
  336. .newsletter_input input.form-control {
  337. height: 60px;
  338. border-radius: 60px;
  339. }
  340. .newsletter_input {
  341. position: relative;
  342. }
  343. .newsletter_input .btn {
  344. position: absolute;
  345. right: 12px;
  346. top: 7px;
  347. min-width: 140px;
  348. }
  349. .newsletter_input .btn i{
  350. margin-left: 5px;
  351. }
  352. /*Form*/
  353. .form-control {
  354. border: 1px solid #ebebeb;
  355. width: 100%;
  356. max-width: 100%;
  357. color: #989ca2;
  358. background: 0 0;
  359. min-height: 60px;
  360. padding: 10px 15px;
  361. box-shadow: none;
  362. outline: none;
  363. }
  364. .form-control:focus{
  365. box-shadow: none;
  366. outline: none;
  367. }
  368. /*Footer*/
  369. .footer_menu a {
  370. font-weight: 300;
  371. padding: 0 15px;
  372. border-right: 1px solid #757575; color: #000; text-transform: uppercase; }
  373. .footer_menu a:hover{
  374. color: #627aec;
  375. }
  376. .footer_menu ul li {
  377. display: inline-block; }
  378. .footer_menu ul li:last-child a {
  379. border-right: none; }
  380. .footer_copywrite_area {
  381. display: block;
  382. padding: 30px 0 100px 0; }
  383. .footer_social_area {
  384. margin-bottom: 30px; }
  385. .footer_social_area a {
  386. border-radius: 50%;
  387. height: 40px;
  388. text-align: center;
  389. width: 40px; color: #000;
  390. display: inline-block;
  391. background-color: #ffffff;
  392. line-height: 40px;
  393. box-shadow: none;
  394. margin: 0 5px; }
  395. .footer_social_area a i {
  396. line-height: 36px; }
  397. .footer_social_area a:hover, .footer_social_area a:focus {
  398. color: #ffffff; background-color: #627aec;
  399. border-color: #627aec; }
  400. .footer_bottom_area {
  401. display: block;
  402. position: relative;
  403. text-align: center; }
  404. .footer_bottom_area .item {
  405. margin-bottom: 50px; }
  406. .footer_bottom p {
  407. margin: 0;
  408. font-size: 14px; }
  409. .contact_location h3 {
  410. font-size: 26px;
  411. font-weight: 900;
  412. padding-bottom: 10px;
  413. }
  414. .contact_location p {
  415. line-height: 40px;
  416. font-size: 20px;
  417. color: #677294;
  418. }
  419. .contact_location ul{
  420. margin-bottom: 0px;
  421. }
  422. .contact_location .location_info li {
  423. font-size: 20px;
  424. color: #677294;
  425. margin-bottom: 15px;
  426. }
  427. .contact_location .location_info li:last-child{
  428. margin-bottom: 0px;
  429. }
  430. .contact_location .location_info li a{
  431. font-size: 20px;
  432. color: #677294;
  433. }
  434. .contact_location a:hover,.contact_location .location_info li a:hover{
  435. color: #627aec;
  436. }
  437. .contact_location .location_info li i {
  438. margin-right: 15px; color: #627aec;
  439. }
  440. p.help-block ul {
  441. font-size: 13px;
  442. margin: 0px;
  443. padding: 0px;
  444. list-style: none;
  445. }
  446. p.help-block {
  447. margin: 0px;
  448. position: absolute;
  449. left: 0;
  450. }
  451. .form-group {
  452. position: relative;
  453. margin-bottom: 23px;
  454. }
  455. /*Responsive */
  456. @media(max-width: 991px){
  457. header#header{
  458. padding: 15px 0px;
  459. }
  460. .f-50 {
  461. font-size: 36px;
  462. }
  463. .lead {
  464. font-size: 1rem;}
  465. .home-desk,.hero.section {
  466. margin-bottom: 0;
  467. }
  468. .box.bg-box .icon {
  469. font-size: 20px;
  470. width: 50px;
  471. height: 50px;
  472. line-height: 50px;
  473. }
  474. .h1, h1 {
  475. font-size: 1.7rem;
  476. }
  477. .box.bg-box {
  478. padding: 30px 15px;
  479. }
  480. .box h3 {
  481. font-size: 20px;}
  482. .call_action .icon {
  483. width: 70px;
  484. height: 70px;
  485. border-radius: 100%;
  486. line-height: 70px;
  487. }
  488. .srction_title p {
  489. color: #000000;
  490. font-size: 14px;
  491. }
  492. .card.price_box h3 {
  493. font-size: 32px;}
  494. section.section.pricing .bg_box {
  495. position: absolute;
  496. width: 100%;
  497. height: 490px;}
  498. .team_img {
  499. width: 206px;
  500. height: 206px;
  501. border-radius: 128px;
  502. border-width: 4px;
  503. padding: 10px;
  504. margin: 0 auto;
  505. }
  506. header .navbar-nav > li > a:not(.btn) {
  507. position: relative;
  508. line-height: 45px;
  509. }
  510. .btn {
  511. padding: 12px 20px;
  512. }
  513. }
  514. @media(max-width: 640px){
  515. .f-50 {
  516. font-size:30px;
  517. }
  518. }
  519. /*loader*/
  520. .loader_pre{
  521. position: fixed;width: 100%;left: 0px; height: 100%; top: 0; background-color: #000; z-index: 100000;
  522. }
  523. #loader {
  524. position: absolute;
  525. left: 50%;
  526. margin-left: -50px;
  527. top: 50%;
  528. margin-top: -50px;
  529. border: 20px #ddd double;
  530. border-top: 20px double #627aec;
  531. border-radius: 100%;
  532. box-shadow: 0px 0px 5px inset #ccc;
  533. width: 100px;
  534. height: 100px;
  535. animation: spin 2s linear infinite;
  536. }
  537. @keyframes spin {
  538. 0% {
  539. transform: rotate(0deg);
  540. }
  541. 100% {
  542. transform: rotate(360deg);
  543. }
  544. }