style.scss 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. box-sizing: border-box;
  5. font-family: 微軟正黑體;
  6. }
  7. $moblie: 767px;
  8. $desktop: 1025px;
  9. html {
  10. min-height: 100%;
  11. height: auto;
  12. /*Image only BG fallback*/
  13. /*background = gradient + image pattern combo*/
  14. /* background:
  15. linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6)); */
  16. }
  17. // basic reset
  18. body {
  19. font-family: "Montserrat", sans-serif;
  20. background-color: white;
  21. font-size: 1.05rem;
  22. }
  23. .ml {
  24. margin-left: 10px;
  25. }
  26. .mr {
  27. margin-right: 10px;
  28. }
  29. .mb {
  30. margin-bottom: 12px;
  31. }
  32. .top {
  33. margin-top: 20px;
  34. position: sticky;
  35. top: 0;
  36. left: 50%;
  37. z-index: 20;
  38. background-color: inherit;
  39. }
  40. .copy {
  41. cursor: pointer;
  42. }
  43. .navbar {
  44. background-color: white;
  45. }
  46. .propertytitle{
  47. -webkit-text-stroke:0.7px #fff;
  48. -moz-text-stroke:0.7px #fff;
  49. }
  50. p{
  51. font-size: 24px;
  52. }
  53. // .bgslider{
  54. // position: relative;
  55. // width: 100% !important;
  56. // }
  57. // ul{
  58. // list-style-type: none;
  59. // width: 100% !important;
  60. // }
  61. // ul>li{
  62. // position: absolute;
  63. // width: 100% !important;
  64. // }
  65. // ul>li:nth-child(3){
  66. // animation: li3 12s infinite;
  67. // }
  68. // ul>li:nth-child(2){
  69. // animation: li2 12s infinite;
  70. // }
  71. // ul>li:nth-child(1){
  72. // animation: li1 12s infinite;
  73. // }
  74. // @keyframes li3{
  75. // 0%{
  76. // opacity: 1;
  77. // }
  78. // 35%{
  79. // opacity: 0;
  80. // }
  81. // 75%{
  82. // opacity: 0;
  83. // }
  84. // }
  85. // @keyframes li2{
  86. // 40%{
  87. // opacity: 1;
  88. // }
  89. // 80%{
  90. // opacity: 0;
  91. // }
  92. // 75%{
  93. // opacity: 0;
  94. // }
  95. // }
  96. // @keyframes li1{
  97. // 80%{
  98. // opacity: 1;
  99. // }
  100. // 95%{
  101. // opacity: 0;
  102. // }
  103. // }
  104. .bg-item{
  105. display: none;
  106. // img{
  107. // // opacity: 0;
  108. // // animation-name:BgFadein;
  109. // // animation-duration: 5s;
  110. // // animation-delay: -3s;
  111. // // animation-fill-mode:forwards;
  112. // // animation-fill-mode:backwards;
  113. // // animation-timing-function:ease-out;
  114. // }
  115. }
  116. .bg-item2{
  117. display: none;
  118. img{
  119. animation-name:BgFadein;
  120. animation-duration: 3s;
  121. animation-timing-function:ease-out;
  122. }
  123. }
  124. .bg-active{
  125. display: block;
  126. }
  127. @keyframes BgFadein {
  128. 0% {
  129. opacity: 0.5;
  130. }
  131. 50% {opacity: 0.8;}
  132. // 50% {opacity: 1;}
  133. 100%{
  134. opacity: 1;
  135. }
  136. }
  137. // sec-usecase
  138. .sec-usecase {
  139. .usecase-block {
  140. border: none;
  141. position: relative;
  142. background-color: transparent;
  143. &::after {
  144. position: absolute;
  145. bottom: -1rem;
  146. left: 5%;
  147. width: 90%;
  148. height: 8rem;
  149. background-color: #FFEBE2;
  150. content: " ";
  151. z-index: -1;
  152. border-radius: 2rem;
  153. margin-left: auto;
  154. margin-right: auto;
  155. }
  156. .usecase-imgfr {
  157. width: 85%;
  158. margin: 0 auto;
  159. height: 45vh;
  160. background-position: center center;
  161. background-size: contain;
  162. background-repeat: no-repeat;
  163. margin-bottom: 1.5rem;
  164. }
  165. .usecase-sub {
  166. background-color: transparent;
  167. i {
  168. color: #EA5413;
  169. }
  170. }
  171. }
  172. }
  173. .sec-steps {
  174. .container {
  175. width: 100%;
  176. }
  177. .steps-title {
  178. font-size: 3rem;
  179. text-align: center;
  180. letter-spacing: 1px;
  181. }
  182. .steps-title strong {
  183. font-size: 5rem;
  184. }
  185. .steps-block {
  186. padding: 0 1rem;
  187. display: flex;
  188. flex-direction: column;
  189. align-items: center;
  190. justify-content: center;
  191. position: relative;
  192. &::after {
  193. position: absolute;
  194. bottom: -1rem;
  195. left: 0;
  196. width: 100%;
  197. height: 15rem;
  198. background-color: #FFEBE2;
  199. content: " ";
  200. z-index: -1;
  201. border-radius: 2rem;
  202. }
  203. .steps-imgfr {
  204. width: 85%;
  205. margin: 0 auto;
  206. height: 45vh;
  207. background-position: center center;
  208. background-size: contain;
  209. background-repeat: no-repeat;
  210. margin-bottom: 1.5rem;
  211. }
  212. .steps-txt {
  213. display: flex;
  214. align-items: center;
  215. span {
  216. display: inline-block;
  217. width: 35px;
  218. height: 35px;
  219. background-color: #EA5413;
  220. color: white;
  221. font-size: 1.4rem;
  222. line-height: 35px;
  223. border-radius: 50%;
  224. text-align: center;
  225. margin-right: .6rem;
  226. }
  227. .steps-sub {
  228. font-size: 1.6rem;
  229. }
  230. }
  231. }
  232. .step-videofr {
  233. width: 100%;
  234. }
  235. .step-videofr video {
  236. width: 100%;
  237. }
  238. }
  239. .btn-dark {
  240. display: inline-block;
  241. text-decoration: none;
  242. color: white;
  243. border: 1px solid #EA5413;
  244. padding: 1rem 2.5rem;
  245. outline: none;
  246. background-color: #EA5413;
  247. margin-top: 4rem;
  248. border-radius: 3rem;
  249. font-size: 1.8rem;
  250. box-shadow: 1px 1px 5px 1px rgba(201, 201, 201, 0.637);
  251. }
  252. /* sec-hero */
  253. .sec-hero {
  254. padding: 6rem 0;
  255. padding-bottom: 0;
  256. margin-bottom: 0 !important;
  257. h1,
  258. h2,
  259. h3,
  260. h4,
  261. h5,
  262. h6,
  263. .h1,
  264. .h2,
  265. .h3,
  266. .h4,
  267. .h5,
  268. .h6 {
  269. font-family: "Roboto", Helvetica, Arial, sans-serif;
  270. font-weight: 900;
  271. line-height: 1.1;
  272. color: #333333;
  273. }
  274. }
  275. .sec-hero .hero-title {
  276. font-size: 3.5rem;
  277. letter-spacing: 1px;
  278. padding-top: 0rem;
  279. }
  280. .sec-hero .hero-txt {
  281. font-size: 1.5em;
  282. letter-spacing: 1px;
  283. }
  284. .sec-hero .hero-btn {
  285. border: none;
  286. outline: none;
  287. border-radius: 3rem;
  288. margin-top: 2rem;
  289. padding: 1rem 2.5rem;
  290. background: linear-gradient(20deg, #EA5413, #920783);
  291. color: white;
  292. font-size: 1.8rem;
  293. box-shadow: 1px 1px 5px 1px rgba(207, 207, 207, 0.534);
  294. }
  295. .hero-orange {
  296. position: absolute;
  297. left: 10%;
  298. top: 0%;
  299. }
  300. .hero-purple {
  301. position: absolute;
  302. right: 0%;
  303. top: -10%;
  304. z-index: -1;
  305. width: 180px;
  306. }
  307. .hero-orange-s {
  308. position: absolute;
  309. left: -5%;
  310. bottom: 13%;
  311. z-index: -1;
  312. animation: floating 8s infinite ease-in-out;
  313. width: 80px;
  314. }
  315. .hero-textgrp {
  316. z-index: 3;
  317. position: absolute;
  318. left: 5%;
  319. top: 10%;
  320. animation: floating3 6s infinite 1s ease-in-out;
  321. width: 300px;
  322. }
  323. .hero-video {
  324. z-index: 3;
  325. position: absolute;
  326. right: 3%;
  327. top: -5%;
  328. animation: floating 8s infinite 1.5s ease-in-out;
  329. width: 120px;
  330. }
  331. .hero-amplify {
  332. z-index: 3;
  333. position: absolute;
  334. bottom: 5%;
  335. right: 0;
  336. animation: floating2 5s infinite ease-in-out;
  337. width: 120px;
  338. }
  339. .hero-imgfr {
  340. width: 100%;
  341. height: 95%;
  342. }
  343. .hero-imgfr img {
  344. width: 100%;
  345. }
  346. @keyframes floating {
  347. from { transform: translate(0px, 0); }
  348. 65% { transform: translate(25px, 0); }
  349. to { transform: translate(0, -0px); }
  350. }
  351. @keyframes floating3 {
  352. from { transform: translate(0px, 0); }
  353. 65% { transform: translate(-20px, 0); }
  354. to { transform: translate(0, -0px); }
  355. }
  356. @keyframes floating2 {
  357. from { transform: translate(0px, 0); }
  358. 65% { transform: translate(0px, 10px); }
  359. to { transform: translate(0, -0px); }
  360. }
  361. /* sec-features */
  362. .ai-spokesgril{
  363. margin-top: 50px;
  364. }
  365. .sec-features {
  366. padding: 5rem 0;
  367. }
  368. .sec-features .row {
  369. margin: 8rem 0;
  370. }
  371. .sec-features .row:nth-of-type(1) {
  372. margin: 4rem 0;
  373. }
  374. .sec-features .row:nth-of-type(4) {
  375. margin-bottom: 0;
  376. }
  377. .features-orangel {
  378. position: absolute;
  379. left: -150px;
  380. top: 5%;
  381. z-index: -1;
  382. }
  383. .features-purpler {
  384. position: absolute;
  385. right: -150px;
  386. top: 5%;
  387. z-index: -1;
  388. }
  389. .features-purplel {
  390. position: absolute;
  391. left: -150px;
  392. top: 5%;
  393. z-index: -1;
  394. }
  395. .features-oranger {
  396. position: absolute;
  397. right: -150px;
  398. top: 5%;
  399. z-index: -1;
  400. }
  401. .sec-features .row .d-block {
  402. display: none;
  403. }
  404. .sec-features .features-col {
  405. position: relative;
  406. }
  407. .sec-features .features-col .features-block {
  408. position: absolute;
  409. left: 10rem;
  410. top: 6rem;
  411. display: flex;
  412. opacity: 0;
  413. transition: all .8s;
  414. h3{
  415. font-family: "Roboto", Helvetica, Arial, sans-serif;
  416. font-weight: 900;
  417. line-height: 1.1;
  418. color: #333333;
  419. }
  420. }
  421. .sec-features .features-col .block-right {
  422. transform: translateX(-30%) scale(0.95);
  423. }
  424. .sec-features .features-col .block-left {
  425. transform: translateX(30%) scale(0.95);
  426. }
  427. .sec-features .features-col .features-block.active {
  428. opacity: 1;
  429. transform: translateX(0%) scale(1);
  430. }
  431. .sec-features .features-num {
  432. display: inline-block;
  433. font-size: 14rem;
  434. color: #F0F0F0;
  435. }
  436. .sec-features .features-title {
  437. font-size: 3rem;
  438. text-align: center;
  439. letter-spacing: 1px;
  440. padding-bottom: 6px;
  441. border-bottom: 8px solid #EA5413;
  442. display: inline-block;
  443. }
  444. .sec-features .features-title strong {
  445. font-size: 5rem;
  446. }
  447. .sec-features .features-imgfr {
  448. width: 100%;
  449. }
  450. .sec-features .features-imgfr video {
  451. width: 100%;
  452. }
  453. .sec-features .features-list {
  454. text-align: left;
  455. }
  456. .features-list{
  457. padding-left:40px;
  458. font-size: 18px;
  459. }
  460. .sec-blogtab {
  461. padding-bottom: 5rem;
  462. }
  463. .blog-tabs {
  464. display: flex;
  465. align-items: center;
  466. }
  467. .blogtab-title {
  468. font-size: 3rem;
  469. letter-spacing: 1px;
  470. padding-bottom: 6px;
  471. border-bottom: 8px solid #EA5413;
  472. display: inline-block;
  473. text-align: center;
  474. }
  475. .blog-tabs .blog-tabs-nav {
  476. width: 35%;
  477. background-color: #F0F0F0;
  478. padding: 4rem 2.5rem;
  479. list-style: none;
  480. box-shadow: 0 2px 5px -2px rgb(173, 173, 173);
  481. text-align: left;
  482. }
  483. .blog-tabs .blog-tabs-nav li {
  484. padding: 10px;
  485. border-bottom: 1px dashed grey;
  486. }
  487. .blog-tabs .blog-tabs-nav li a {
  488. color: #EA5413;
  489. }
  490. .blog-tabs .blog-tabs-stage {
  491. width: 65%;
  492. padding: 3.5rem;
  493. padding-bottom: 6rem;
  494. box-shadow: 1px 1px 10px 2px grey;
  495. height: 48rem;
  496. overflow: hidden;
  497. text-align: left;
  498. position: relative;
  499. }
  500. .blog-tab-box {
  501. height: 90%;
  502. overflow: scroll;
  503. }
  504. .blog-tabs .blog-tabs-stage .blog-txt {
  505. font-size: 1.6rem;
  506. }
  507. .btn-light {
  508. color: black;
  509. border: 1px solid #EA5413;
  510. padding: 1rem 2.5rem;
  511. outline: none;
  512. background-color: white;
  513. margin-top: 4rem;
  514. border-radius: 3rem;
  515. font-size: 1.8rem;
  516. box-shadow: 1px 1px 5px 1px rgba(201, 201, 201, 0.637);
  517. }
  518. .btn-dark {
  519. text-decoration: none;
  520. color: white;
  521. border: 1px solid #EA5413;
  522. padding: 1rem 2.5rem;
  523. outline: none;
  524. background-color: #EA5413;
  525. margin-top: 4rem;
  526. border-radius: 3rem;
  527. font-size: 1.8rem;
  528. box-shadow: 1px 1px 5px 1px rgba(201, 201, 201, 0.637);
  529. }
  530. .blog-tabs .btn-light {
  531. margin-top: 1.5rem;
  532. color: #EA5413;
  533. position: absolute;
  534. bottom: 1rem;
  535. left: 3.5rem;
  536. }