style.css 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889
  1. @charset "UTF-8";
  2. /* 顏色設定 */
  3. :root {
  4. --color-scheme: dark;
  5. --blue: #0084b4;
  6. --indigo: #6610f2;
  7. --purple: #6f42c1;
  8. --pink: #e83e8c;
  9. --red: #dc3545;
  10. --orange: #fd7e14;
  11. --yellow: beige;
  12. --green: #28a745;
  13. --teal: #20c997;
  14. --cyan: #17a2b8;
  15. --white: #fff;
  16. --gray: #6c757d;
  17. --gray-dark: #212529;
  18. --primary: #0084b4;
  19. --secondary: #6c757d;
  20. --success: #28a745;
  21. --info: #17a2b8;
  22. --warning: beige;
  23. --danger: #dc3545;
  24. --light: #dee2e6;
  25. --dark: #212529;
  26. --breakpoint-xs: 0;
  27. --breakpoint-sm: 576px;
  28. --breakpoint-md: 768px;
  29. --breakpoint-lg: 992px;
  30. --breakpoint-xl: 1200px;
  31. --font-family-sans-serif: "Roboto Condensed", sans-serif;
  32. --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
  33. ;
  34. }
  35. @media all {
  36. .bg-warning {
  37. color: #212529;
  38. }
  39. }
  40. @media all {
  41. #sidebar {
  42. background: #212529;
  43. }
  44. }
  45. .sidebar-close {
  46. background: transparent;
  47. }
  48. @media all {
  49. .sidebar-close {
  50. color: #f8f9fa;
  51. }
  52. }
  53. *,
  54. *::before,
  55. *::after {
  56. -webkit-box-sizing: border-box;
  57. box-sizing: border-box;
  58. }
  59. html {
  60. font-family: sans-serif;
  61. line-height: 1.15;
  62. -webkit-text-size-adjust: 100%;
  63. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  64. }
  65. article,
  66. aside,
  67. figcaption,
  68. figure,
  69. footer,
  70. header,
  71. hgroup,
  72. main,
  73. nav,
  74. section {
  75. display: block;
  76. }
  77. body {
  78. margin: 0;
  79. font-family: 'Noto Sans TC', sans-serif;
  80. font-weight: 400;
  81. line-height: 1.5;
  82. text-align: left;
  83. font-size: 1rem;
  84. letter-spacing: 2px;
  85. }
  86. @media all {
  87. body {
  88. color: #f8f9fa;
  89. background-color: #212529;
  90. }
  91. }
  92. [tabindex="-1"]:focus:not(:focus-visible) {
  93. outline: 0;
  94. }
  95. hr {
  96. -webkit-box-sizing: content-box;
  97. box-sizing: content-box;
  98. height: 0;
  99. overflow: visible;
  100. }
  101. p {
  102. margin-top: 0;
  103. margin-bottom: 1rem;
  104. }
  105. .mt-1 {
  106. margin-top: 0.25rem !important;
  107. }
  108. .mt-2 {
  109. margin-top: 0.5rem !important;
  110. }
  111. .mt-3 {
  112. margin-top: 1rem !important;
  113. }
  114. .mt-4 {
  115. margin-top: 1.5rem !important;
  116. }
  117. .mt-5 {
  118. margin-top: 3rem !important;
  119. }
  120. .mb-1 {
  121. margin-bottom: 0.25rem !important;
  122. }
  123. .mb-2 {
  124. margin-bottom: 0.5rem !important;
  125. }
  126. .mb-3 {
  127. margin-bottom: 1rem !important;
  128. }
  129. .mb-4 {
  130. margin-bottom: 1.5rem !important;
  131. }
  132. .mb-5 {
  133. margin-bottom: 3rem !important;
  134. }
  135. .ms-auto {
  136. margin-left: auto !important;
  137. }
  138. .ms-1 {
  139. margin-left: 0.25rem !important;
  140. }
  141. .ms-2 {
  142. margin-left: 0.5rem !important;
  143. }
  144. .ms-3 {
  145. margin-left: 1rem !important;
  146. }
  147. .ms-4 {
  148. margin-left: 1.5rem !important;
  149. }
  150. .ms-5 {
  151. margin-left: 3rem !important;
  152. }
  153. .me-auto {
  154. margin-right: auto !important;
  155. }
  156. .me-1 {
  157. margin-right: 0.25rem !important;
  158. }
  159. .me-2 {
  160. margin-right: 0.5rem !important;
  161. }
  162. .me-3 {
  163. margin-right: 1rem !important;
  164. }
  165. .me-4 {
  166. margin-right: 1.5rem !important;
  167. }
  168. .me-5 {
  169. margin-right: 3rem !important;
  170. }
  171. .mx-2 {
  172. margin-right: 0.5rem !important;
  173. margin-left: 0.5rem !important;
  174. }
  175. .p-1 {
  176. padding: 0.25rem !important;
  177. }
  178. .p-2 {
  179. padding: 0.5rem !important;
  180. }
  181. .p-3 {
  182. padding: 1rem !important;
  183. }
  184. .p-4 {
  185. padding: 1.5rem !important;
  186. }
  187. .p-5 {
  188. padding: 3rem !important;
  189. }
  190. .mx-auto {
  191. margin-right: auto !important;
  192. margin-left: auto !important;
  193. }
  194. .row {
  195. --bs-gutter-x: 1.5rem;
  196. --bs-gutter-y: 1rem;
  197. display: -webkit-box;
  198. display: -ms-flexbox;
  199. display: flex;
  200. -ms-flex-wrap: wrap;
  201. flex-wrap: wrap;
  202. margin-top: calc(var(--bs-gutter-y) * -1);
  203. margin-right: calc(var(--bs-gutter-x) / -2);
  204. margin-left: calc(var(--bs-gutter-x) / -2);
  205. }
  206. .col {
  207. -webkit-box-flex: 100%;
  208. -ms-flex: 100%;
  209. flex: 100%;
  210. }
  211. .w-50 {
  212. width: 50% !important;
  213. }
  214. .h-100 {
  215. height: 100% !important;
  216. }
  217. .row-cols-auto > * {
  218. -webkit-box-flex: 0;
  219. -ms-flex: 0 0 auto;
  220. flex: 0 0 auto;
  221. width: auto;
  222. }
  223. .row-cols-1 > * {
  224. -webkit-box-flex: 0;
  225. -ms-flex: 0 0 auto;
  226. flex: 0 0 auto;
  227. width: 100%;
  228. }
  229. .row-cols-2 > * {
  230. -webkit-box-flex: 0;
  231. -ms-flex: 0 0 auto;
  232. flex: 0 0 auto;
  233. width: 50%;
  234. }
  235. .row-cols-3 > * {
  236. -webkit-box-flex: 0;
  237. -ms-flex: 0 0 auto;
  238. flex: 0 0 auto;
  239. width: 33.3333333333%;
  240. }
  241. .row-cols-4 > * {
  242. -webkit-box-flex: 0;
  243. -ms-flex: 0 0 auto;
  244. flex: 0 0 auto;
  245. width: 25%;
  246. }
  247. .row-cols-5 > * {
  248. -webkit-box-flex: 0;
  249. -ms-flex: 0 0 auto;
  250. flex: 0 0 auto;
  251. width: 20%;
  252. }
  253. .row-cols-6 > * {
  254. -webkit-box-flex: 0;
  255. -ms-flex: 0 0 auto;
  256. flex: 0 0 auto;
  257. width: 16.6666666667%;
  258. }
  259. @media (min-width: 576px) {
  260. .col-sm {
  261. -webkit-box-flex: 1;
  262. -ms-flex: 1 0 0%;
  263. flex: 1 0 0%;
  264. }
  265. .row-cols-sm-auto > * {
  266. -webkit-box-flex: 0;
  267. -ms-flex: 0 0 auto;
  268. flex: 0 0 auto;
  269. width: auto;
  270. }
  271. .row-cols-sm-1 > * {
  272. -webkit-box-flex: 0;
  273. -ms-flex: 0 0 auto;
  274. flex: 0 0 auto;
  275. width: 100%;
  276. }
  277. .row-cols-sm-2 > * {
  278. -webkit-box-flex: 0;
  279. -ms-flex: 0 0 auto;
  280. flex: 0 0 auto;
  281. width: 50%;
  282. }
  283. .row-cols-sm-3 > * {
  284. -webkit-box-flex: 0;
  285. -ms-flex: 0 0 auto;
  286. flex: 0 0 auto;
  287. width: 33.3333333333%;
  288. }
  289. .row-cols-sm-4 > * {
  290. -webkit-box-flex: 0;
  291. -ms-flex: 0 0 auto;
  292. flex: 0 0 auto;
  293. width: 25%;
  294. }
  295. .row-cols-sm-5 > * {
  296. -webkit-box-flex: 0;
  297. -ms-flex: 0 0 auto;
  298. flex: 0 0 auto;
  299. width: 20%;
  300. }
  301. .row-cols-sm-6 > * {
  302. -webkit-box-flex: 0;
  303. -ms-flex: 0 0 auto;
  304. flex: 0 0 auto;
  305. width: 16.6666666667%;
  306. }
  307. .p-sm-1 {
  308. padding: 0.25rem !important;
  309. }
  310. .p-sm-2 {
  311. padding: 0.5rem !important;
  312. }
  313. .p-sm-3 {
  314. padding: 1rem !important;
  315. }
  316. .p-sm-4 {
  317. padding: 1.5rem !important;
  318. }
  319. .p-sm-5 {
  320. padding: 3rem !important;
  321. }
  322. }
  323. @media (min-width: 992px) {
  324. .col-lg {
  325. -webkit-box-flex: 100%;
  326. -ms-flex: 100%;
  327. flex: 100%;
  328. }
  329. .row-cols-lg-auto > * {
  330. -webkit-box-flex: 0;
  331. -ms-flex: 0 0 auto;
  332. flex: 0 0 auto;
  333. width: auto;
  334. }
  335. .row-cols-lg-1 > * {
  336. -webkit-box-flex: 0;
  337. -ms-flex: 0 0 auto;
  338. flex: 0 0 auto;
  339. width: 100%;
  340. }
  341. .row-cols-lg-2 > * {
  342. -webkit-box-flex: 0;
  343. -ms-flex: 0 0 auto;
  344. flex: 0 0 auto;
  345. width: 50%;
  346. }
  347. .row-cols-lg-3 > * {
  348. -webkit-box-flex: 0;
  349. -ms-flex: 0 0 auto;
  350. flex: 0 0 auto;
  351. width: 33.3333333333%;
  352. }
  353. .row-cols-lg-4 > * {
  354. -webkit-box-flex: 0;
  355. -ms-flex: 0 0 auto;
  356. flex: 0 0 auto;
  357. width: 25%;
  358. }
  359. .row-cols-lg-5 > * {
  360. -webkit-box-flex: 0;
  361. -ms-flex: 0 0 auto;
  362. flex: 0 0 auto;
  363. width: 20%;
  364. }
  365. .row-cols-lg-6 > * {
  366. -webkit-box-flex: 0;
  367. -ms-flex: 0 0 auto;
  368. flex: 0 0 auto;
  369. width: 16.6666666667%;
  370. }
  371. }
  372. @media (min-width: 1400px) {
  373. .col-xxl {
  374. -webkit-box-flex: 1;
  375. -ms-flex: 1 0 0%;
  376. flex: 1 0 0%;
  377. }
  378. .row-cols-xxl-auto > * {
  379. -webkit-box-flex: 0;
  380. -ms-flex: 0 0 auto;
  381. flex: 0 0 auto;
  382. width: auto;
  383. }
  384. .row-cols-xxl-1 > * {
  385. -webkit-box-flex: 0;
  386. -ms-flex: 0 0 auto;
  387. flex: 0 0 auto;
  388. width: 100%;
  389. }
  390. .row-cols-xxl-2 > * {
  391. -webkit-box-flex: 0;
  392. -ms-flex: 0 0 auto;
  393. flex: 0 0 auto;
  394. width: 50%;
  395. }
  396. .row-cols-xxl-3 > * {
  397. -webkit-box-flex: 0;
  398. -ms-flex: 0 0 auto;
  399. flex: 0 0 auto;
  400. width: 33.3333333333%;
  401. }
  402. .row-cols-xxl-4 > * {
  403. -webkit-box-flex: 0;
  404. -ms-flex: 0 0 auto;
  405. flex: 0 0 auto;
  406. width: 25%;
  407. }
  408. .row-cols-xxl-5 > * {
  409. -webkit-box-flex: 0;
  410. -ms-flex: 0 0 auto;
  411. flex: 0 0 auto;
  412. width: 20%;
  413. }
  414. .row-cols-xxl-6 > * {
  415. -webkit-box-flex: 0;
  416. -ms-flex: 0 0 auto;
  417. flex: 0 0 auto;
  418. width: 16.6666666667%;
  419. }
  420. }
  421. .toggle,
  422. [id^=drop] {
  423. display: none;
  424. }
  425. /* Change ' +' in order to change the Dropdown symbol */
  426. li > a:after {
  427. content: ' +';
  428. }
  429. li > a:only-child:after {
  430. content: '';
  431. }
  432. /* Media Queries
  433. --------------------------------------------- */
  434. .d-none {
  435. display: none !important;
  436. }
  437. .d-block {
  438. display: block !important;
  439. }
  440. @media (min-width: 576px) {
  441. .d-sm-block {
  442. display: block !important;
  443. }
  444. }
  445. @media (min-width: 768px) {
  446. .d-md-block {
  447. display: block !important;
  448. }
  449. .d-md-none {
  450. display: none !important;
  451. }
  452. }
  453. @media (min-width: 992px) {
  454. .d-lg-none {
  455. display: none !important;
  456. }
  457. }
  458. input[type="radio"][class="style"]:checked + label {
  459. color: white;
  460. background: #6666ff;
  461. }
  462. .align-items-center {
  463. -webkit-box-align: center !important;
  464. -ms-flex-align: center !important;
  465. align-items: center !important;
  466. }
  467. .order-1 {
  468. -webkit-box-ordinal-group: 2 !important;
  469. -ms-flex-order: 1 !important;
  470. order: 1 !important;
  471. }
  472. .order-2 {
  473. -webkit-box-ordinal-group: 3 !important;
  474. -ms-flex-order: 2 !important;
  475. order: 2 !important;
  476. }
  477. .title {
  478. font-size: 1.3rem;
  479. }
  480. .footer {
  481. color: #656565;
  482. }
  483. .footer a {
  484. color: #656565;
  485. text-decoration: none;
  486. }
  487. .footer a:hover {
  488. color: #78AD42;
  489. }
  490. .footer h5 {
  491. color: black;
  492. font-weight: 600;
  493. padding-bottom: 15px;
  494. }
  495. .footer .link {
  496. padding-bottom: 20px;
  497. }
  498. @media (min-width: 992px) {
  499. .order-lg-1 {
  500. -webkit-box-ordinal-group: 2 !important;
  501. -ms-flex-order: 1 !important;
  502. order: 1 !important;
  503. }
  504. .order-lg-2 {
  505. -webkit-box-ordinal-group: 3 !important;
  506. -ms-flex-order: 2 !important;
  507. order: 2 !important;
  508. }
  509. }
  510. /* Airspace Template SCSS */
  511. .w-25 {
  512. width: 25% !important;
  513. }
  514. .w-50 {
  515. width: 50% !important;
  516. }
  517. .w-75 {
  518. width: 75% !important;
  519. }
  520. .w-100 {
  521. width: 100% !important;
  522. }
  523. .blank {
  524. height: 130px;
  525. width: 100%;
  526. background-color: white;
  527. }
  528. .btn-yellow {
  529. outline: none;
  530. border: 3px solid #FFCC00;
  531. background-color: transparent;
  532. padding: .5rem 1rem;
  533. color: #FFCC00;
  534. }
  535. .btn-yellow__fill {
  536. color: black;
  537. background-color: #FFCC00;
  538. }
  539. .btn-blue {
  540. display: inline-block;
  541. outline: none;
  542. border: 3px solid #2980B8;
  543. background-color: #2980B8;
  544. color: white;
  545. padding: .5rem 1rem;
  546. }
  547. .hero {
  548. height: 42rem;
  549. background-position: center;
  550. background-size: cover;
  551. background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(41, 128, 184, 0.8)), to(rgba(41, 128, 184, 0.1))), url(../imgs/hero-img.jpg);
  552. background-image: linear-gradient(to bottom, rgba(41, 128, 184, 0.8), rgba(41, 128, 184, 0.1)), url(../imgs/hero-img.jpg);
  553. }
  554. .hero__imgfr {
  555. margin: 0 9rem;
  556. -webkit-transform: translateY(-90px);
  557. transform: translateY(-90px);
  558. position: relative;
  559. }
  560. @media (max-width: 992px) {
  561. .hero__imgfr {
  562. margin: 0 3rem;
  563. }
  564. }
  565. @media (max-width: 576px) {
  566. .hero__imgfr {
  567. margin: 0 0rem;
  568. }
  569. }
  570. .hero__stamp {
  571. position: absolute;
  572. left: -6rem;
  573. bottom: -4rem;
  574. width: 150px;
  575. }
  576. @media (max-width: 992px) {
  577. .hero__stamp {
  578. width: 120px;
  579. }
  580. }
  581. @media (max-width: 576px) {
  582. .hero__stamp {
  583. -webkit-transform: translateX(-50%);
  584. transform: translateX(-50%);
  585. left: 50%;
  586. bottom: -3rem;
  587. }
  588. }
  589. .hero__underline {
  590. width: 50%;
  591. height: 6px;
  592. background-color: transparent;
  593. border: none;
  594. border-top: 2px solid black;
  595. border-bottom: 2px solid black;
  596. margin: 2.5rem auto;
  597. }
  598. .hero__h2 {
  599. font-size: 3rem;
  600. letter-spacing: 2px;
  601. }
  602. @media (max-width: 992px) {
  603. .hero__h2 {
  604. margin: 0 6rem;
  605. }
  606. }
  607. @media (max-width: 576px) {
  608. .hero__h2 {
  609. font-size: 2rem;
  610. margin: 0rem;
  611. }
  612. }
  613. .hero__p {
  614. color: black;
  615. margin: 0 12rem;
  616. }
  617. @media (max-width: 992px) {
  618. .hero__p {
  619. margin: 0 6rem;
  620. }
  621. }
  622. .text-dark {
  623. color: black;
  624. }
  625. .footer {
  626. background-color: #CAD7E6;
  627. padding: 3rem;
  628. }
  629. .footer .right-column {
  630. border-left: 1px solid black;
  631. }
  632. @media (max-width: 830px) {
  633. .footer .right-column {
  634. border-left: none;
  635. }
  636. }
  637. .footer .row {
  638. display: -webkit-box;
  639. display: -ms-flexbox;
  640. display: flex;
  641. -webkit-box-align: center;
  642. -ms-flex-align: center;
  643. align-items: center;
  644. }
  645. .footer .footer-aigirl {
  646. font-weight: 600;
  647. font-size: 2rem;
  648. margin-top: 1rem;
  649. margin-bottom: 2.5rem;
  650. }
  651. .footer .footer-follow {
  652. font-size: 1.6rem;
  653. margin-bottom: 1rem;
  654. color: black;
  655. font-size: 1rem;
  656. font-weight: 600;
  657. margin-top: 2rem;
  658. }
  659. .footer .footer-socials a {
  660. margin-right: 5px;
  661. }
  662. .logos {
  663. padding-bottom: 10rem;
  664. }
  665. .logos__img {
  666. width: 22rem;
  667. height: 12rem;
  668. background-size: contain;
  669. background-repeat: no-repeat;
  670. background-position: center;
  671. }
  672. @media (max-width: 576px) {
  673. .logos {
  674. padding-bottom: 3rem;
  675. }
  676. }
  677. .cards .card__imgfr {
  678. position: relative;
  679. cursor: pointer;
  680. }
  681. .cards .card__play {
  682. position: absolute;
  683. left: 50%;
  684. top: 50%;
  685. -webkit-transform: translate(-50%, -50%);
  686. transform: translate(-50%, -50%);
  687. }
  688. .cards .card-text {
  689. color: #848484;
  690. }
  691. .cards .card-learn {
  692. color: #2980B8;
  693. text-decoration: none;
  694. }
  695. .cards .card-body {
  696. height: 340px;
  697. }
  698. .cards .card-img-top {
  699. height: 16rem;
  700. }
  701. @media (max-width: 576px) {
  702. .cards .card-img-top {
  703. height: 14rem;
  704. }
  705. }
  706. .condition .imgfr {
  707. position: absolute;
  708. left: 0;
  709. bottom: -3.5rem;
  710. width: 22rem;
  711. height: 22rem;
  712. background-image: url(../imgs/pexels-bess-hamiti-35537.png);
  713. background-size: cover;
  714. background-repeat: no-repeat;
  715. background-position: center;
  716. }
  717. @media (max-width: 860px) {
  718. .condition .imgfr {
  719. width: 16rem;
  720. height: 16rem;
  721. }
  722. }
  723. .carousels {
  724. color: black;
  725. background-color: white;
  726. }
  727. .carousels .items > .item {
  728. width: 100%;
  729. height: 16rem;
  730. }
  731. .carousels .strong {
  732. font-size: 2rem;
  733. position: relative;
  734. z-index: 2;
  735. }
  736. .carousels .strong::after {
  737. position: absolute;
  738. width: 100%;
  739. height: .8rem;
  740. background-color: #FFCC00;
  741. left: 0;
  742. bottom: 0;
  743. content: "";
  744. z-index: -1;
  745. }
  746. .carousels .left_quotation, .carousels .right_quotation {
  747. position: absolute;
  748. }
  749. .carousels .left_quotation {
  750. left: 0;
  751. top: 0;
  752. }
  753. .carousels .right_quotation {
  754. right: 0;
  755. bottom: 0;
  756. }
  757. .footer-contacts {
  758. width: 60%;
  759. }
  760. @media (max-width: 860px) {
  761. .footer-contacts {
  762. width: 90%;
  763. }
  764. }
  765. /*# sourceMappingURL=style.css.map */