style.css 22 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321
  1. @charset "UTF-8";
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. -webkit-box-sizing: border-box;
  6. box-sizing: border-box;
  7. }
  8. .container-fluid {
  9. width: 80vw;
  10. margin: 0 auto;
  11. }
  12. @media screen and (max-width: 767px) {
  13. .container-fluid {
  14. width: 100vw;
  15. }
  16. }
  17. body {
  18. background: #fff;
  19. }
  20. body .learn-more {
  21. color: #fff;
  22. width: 30%;
  23. height: 50px;
  24. margin: 10px 0px;
  25. font-size: 16px;
  26. border-radius: 0%;
  27. border: none;
  28. font-weight: 900;
  29. background: #93000a;
  30. vertical-align: top;
  31. -webkit-transition: 0.3s;
  32. transition: 0.3s;
  33. }
  34. body .learn-more:hover {
  35. color: #93000a;
  36. background: #fff;
  37. border: 1px solid #93000a;
  38. }
  39. #Navigation {
  40. width: 100vw;
  41. background-color: #000;
  42. color: #fff;
  43. position: fixed;
  44. z-index: 20;
  45. }
  46. #Navigation #logo {
  47. padding-top: 1.3vw;
  48. }
  49. @media screen and (max-width: 767px) {
  50. #Navigation #logo {
  51. padding-top: 0;
  52. }
  53. }
  54. #Navigation #logo img {
  55. width: 180px;
  56. }
  57. @media screen and (max-width: 767px) {
  58. #Navigation #logo img {
  59. width: 150px;
  60. }
  61. }
  62. #Navigation #link {
  63. padding: 4vw 1vw 2vw 1vw;
  64. }
  65. @media screen and (max-width: 767px) {
  66. #Navigation #link {
  67. display: none;
  68. }
  69. }
  70. #Navigation a {
  71. text-decoration: none;
  72. color: #fff;
  73. letter-spacing: 1px;
  74. font-size: 0.9rem;
  75. font-weight: 600;
  76. cursor: pointer;
  77. padding: 15px;
  78. position: relative;
  79. }
  80. #Navigation a :hover {
  81. opacity: 0.8;
  82. }
  83. #Navigation a:after {
  84. content: "";
  85. display: block;
  86. width: 80%;
  87. height: 3px;
  88. background-color: #fff;
  89. position: absolute;
  90. left: 12%;
  91. bottom: 0;
  92. -webkit-transition: all 0.3s;
  93. transition: all 0.3s;
  94. opacity: 0;
  95. }
  96. #Navigation a:hover:after {
  97. width: 80%;
  98. opacity: 1;
  99. }
  100. @media screen and (max-width: 1024px) {
  101. #Navigation a {
  102. padding: 5px;
  103. padding-top: 2vw;
  104. }
  105. }
  106. #Navigation #menu-btn1 {
  107. position: absolute;
  108. right: 1vw;
  109. top: 5vw;
  110. width: 15vw;
  111. z-index: 6;
  112. }
  113. @media screen and (min-width: 1025px) {
  114. #Navigation #menu-btn1 {
  115. display: none;
  116. }
  117. }
  118. @media screen and (min-width: 768px) {
  119. #Navigation #menu-btn1 {
  120. display: none;
  121. }
  122. }
  123. #menu-box {
  124. width: 40vw;
  125. right: 0px;
  126. position: fixed;
  127. z-index: 20;
  128. overflow: hidden;
  129. }
  130. @media screen and (min-width: 1025px) {
  131. #menu-box {
  132. display: none;
  133. }
  134. }
  135. #menu-box hr {
  136. margin: 5px auto !important;
  137. width: 25vw;
  138. background: #fff;
  139. opacity: 1 !important;
  140. }
  141. #menu-box #menu-box2 {
  142. padding-bottom: 5vw;
  143. position: relative;
  144. width: 40vw;
  145. background-color: #313131;
  146. z-index: 7;
  147. text-align: center;
  148. }
  149. #menu-box #menu-box2 .close {
  150. padding: 30px 15px 15px 15px;
  151. }
  152. #menu-box #menu-box2 a {
  153. display: inline-block;
  154. text-decoration: none;
  155. color: #fff;
  156. font-size: 14px;
  157. font-weight: 900;
  158. text-align: center;
  159. padding: 0 !important;
  160. }
  161. #banner {
  162. width: 100vw;
  163. display: inline-block;
  164. background: linear-gradient(115deg, #313131 38%, transparent 30%, #707070 27%);
  165. background-blend-mode: overlay;
  166. }
  167. @media screen and (max-width: 767px) {
  168. #banner {
  169. background: linear-gradient(115deg, #414141 100%, transparent 30%, #707070 0%);
  170. }
  171. }
  172. #banner #banner-container {
  173. width: 80vw;
  174. margin: 50px auto;
  175. padding-bottom: 5vw;
  176. }
  177. @media screen and (max-width: 767px) {
  178. #banner #banner-container {
  179. width: 100vw;
  180. margin: 0;
  181. padding-bottom: 15vw;
  182. }
  183. }
  184. #banner #banner-container .youtube {
  185. width: 80vw;
  186. padding-top: 10vw;
  187. margin: 0 auto;
  188. color: #fff;
  189. }
  190. @media screen and (max-width: 767px) {
  191. #banner #banner-container .youtube {
  192. padding-top: 30vw;
  193. }
  194. }
  195. #banner #banner-container .youtube #youtube-text {
  196. height: 500px;
  197. }
  198. #banner #banner-container .youtube hr {
  199. width: 12vw;
  200. height: 2px;
  201. color: #fff;
  202. margin: 20px 0px;
  203. opacity: 1 !important;
  204. }
  205. @media screen and (max-width: 767px) {
  206. #banner #banner-container .youtube hr {
  207. width: 30vw;
  208. }
  209. }
  210. #banner #banner-container .youtube p {
  211. font-size: 18px;
  212. }
  213. #banner #banner-container .youtube h1 {
  214. font-size: 35px;
  215. padding-top: 0;
  216. }
  217. @media screen and (max-width: 767px) {
  218. #banner #banner-container .youtube h1 {
  219. font-size: 25px;
  220. padding: 15px 0px;
  221. }
  222. }
  223. @media screen and (max-width: 767px) {
  224. #banner #banner-container .youtube .learn-more {
  225. width: 100%;
  226. margin: 10px 0px;
  227. }
  228. }
  229. #banner #banner-container h1 {
  230. padding-top: 3vw;
  231. text-align: center;
  232. color: #fff;
  233. }
  234. @media screen and (max-width: 767px) {
  235. #banner #banner-container h1 {
  236. font-size: 20px;
  237. padding: 15px;
  238. }
  239. }
  240. #banner #banner-container #email {
  241. width: 75%;
  242. font-size: 16px;
  243. margin: 10px 0px;
  244. padding: 10px 15px;
  245. border: none;
  246. height: 50px;
  247. }
  248. @media screen and (max-width: 767px) {
  249. #banner #banner-container #email {
  250. display: none;
  251. }
  252. }
  253. #banner #banner-container #email-moblie {
  254. margin: 10px auto;
  255. width: 75%;
  256. padding: 10px 15px;
  257. border: none;
  258. height: 50px;
  259. background: url(./img/email.png) 5% 50% no-repeat scroll transparent;
  260. background-size: 20px 15px;
  261. background-color: #fff;
  262. text-align: center;
  263. color: #313131;
  264. font-weight: 900;
  265. }
  266. @media screen and (min-width: 1025px) {
  267. #banner #banner-container #email-moblie {
  268. display: none;
  269. }
  270. }
  271. #banner #banner-container .btn {
  272. color: #fff;
  273. width: 25%;
  274. height: 50px;
  275. margin: 10px 0px;
  276. font-size: 16px;
  277. border-radius: 0%;
  278. border: none;
  279. font-weight: 900;
  280. background: #93000a;
  281. vertical-align: top;
  282. -webkit-transition: 0.3s;
  283. transition: 0.3s;
  284. }
  285. @media screen and (max-width: 767px) {
  286. #banner #banner-container .btn {
  287. display: none;
  288. }
  289. }
  290. #banner #banner-container .btn:hover {
  291. font-size: 17px;
  292. }
  293. #banner #banner-container #email-arrow {
  294. width: 15%;
  295. background: url(./img/button-arrow.png) 55% 50% no-repeat scroll transparent;
  296. background-size: 10px 15px;
  297. background-color: #93000a;
  298. height: 50px;
  299. margin: 10px auto;
  300. font-size: 16px;
  301. border-radius: 0%;
  302. border: none;
  303. font-weight: 900;
  304. vertical-align: top;
  305. }
  306. @media screen and (min-width: 1025px) {
  307. #banner #banner-container #email-arrow {
  308. display: none;
  309. }
  310. }
  311. #sec01 {
  312. padding-top: 5vw;
  313. padding-bottom: 5vw;
  314. }
  315. #sec01 .NEWS {
  316. width: 80vw;
  317. margin: 0 auto;
  318. margin-top: -130px;
  319. margin-bottom: 100px;
  320. }
  321. @media screen and (max-width: 767px) {
  322. #sec01 .NEWS {
  323. margin-top: -70px;
  324. width: 90vw;
  325. }
  326. }
  327. #sec01 .NEWS h1 {
  328. padding: 0;
  329. margin: 0;
  330. font-weight: 900;
  331. color: #fff;
  332. letter-spacing: 3px;
  333. font-size: 60px;
  334. }
  335. @media screen and (max-width: 767px) {
  336. #sec01 .NEWS h1 {
  337. font-size: 50px;
  338. }
  339. }
  340. #sec01 #sec01-container {
  341. -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  342. box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  343. margin: 0 auto !important;
  344. }
  345. @media screen and (max-width: 767px) {
  346. #sec01 #sec01-container {
  347. width: 90vw;
  348. margin: 0 auto;
  349. }
  350. }
  351. #sec01 #sec01-container #sec01-container-card .card {
  352. padding: 30px;
  353. border: none !important;
  354. }
  355. @media screen and (max-width: 767px) {
  356. #sec01 #sec01-container #sec01-container-card .card {
  357. padding: 15px;
  358. }
  359. }
  360. #sec01 #sec01-container #sec01-container-card .card h1 {
  361. padding: 15px;
  362. font-size: 40px;
  363. font-weight: 900;
  364. color: #9b9b9b;
  365. }
  366. #sec01 #sec01-container #sec01-container-card .card p {
  367. padding: 5px;
  368. font-size: 18px;
  369. margin-bottom: 0 !important;
  370. }
  371. @media screen and (max-width: 767px) {
  372. #sec01 #sec01-container #sec01-container-card .card p {
  373. padding: 0px;
  374. font-size: 16px;
  375. }
  376. }
  377. #sec01 #sec01-container #sec01-container-card .card .sec01-title {
  378. padding: 15px 0px;
  379. font-weight: 900;
  380. font-size: 22px;
  381. }
  382. @media screen and (max-width: 767px) {
  383. #sec01 #sec01-container #sec01-container-card .card .sec01-title {
  384. font-size: 18px;
  385. }
  386. }
  387. #sec01 #sec01-container #sec01-container-card .card a {
  388. text-decoration: none;
  389. color: #000;
  390. -webkit-transition: 0.3s;
  391. transition: 0.3s;
  392. cursor: pointer;
  393. }
  394. #sec01 #sec01-container #sec01-container-card .card a:hover {
  395. color: #2828ff;
  396. }
  397. #sec01 #sec01-container #sec01-container-card .card img {
  398. text-align: center;
  399. width: 38vw;
  400. height: 240px;
  401. -o-object-fit: cover;
  402. object-fit: cover;
  403. }
  404. @media screen and (max-width: 767px) {
  405. #sec01 #sec01-container #sec01-container-card .card img {
  406. width: 85vw;
  407. height: 200px;
  408. margin: 0 auto;
  409. }
  410. }
  411. #sec02 {
  412. background: #414141;
  413. padding-top: 3vw;
  414. }
  415. @media screen and (max-width: 767px) {
  416. #sec02 {
  417. display: none;
  418. }
  419. }
  420. #sec02 #sec02-container {
  421. width: 90vw;
  422. padding: 15px;
  423. font-weight: 900;
  424. color: #fff;
  425. position: relative;
  426. }
  427. #sec02 #sec02-container #sec02-top-box {
  428. position: relative;
  429. }
  430. #sec02 #sec02-container #sec02-top-box #sec02-content {
  431. position: absolute;
  432. top: 10px;
  433. left: 300px;
  434. }
  435. #sec02 #sec02-container #sec02-top-box .sec02-box1 {
  436. color: #000;
  437. width: 13vw;
  438. }
  439. #sec02 #sec02-container #sec02-top-box .sec02-box1 img {
  440. border-radius: 50%;
  441. width: 150px;
  442. height: 200px;
  443. -o-object-fit: cover;
  444. object-fit: cover;
  445. }
  446. #sec02 #sec02-container #sec02-top-box .sec02-box1 .sec02-top-text span {
  447. font-size: 30px;
  448. }
  449. #sec02-moblie {
  450. background: #414141;
  451. padding-top: 3vw;
  452. padding-bottom: 20vw;
  453. }
  454. @media screen and (min-width: 1025px) {
  455. #sec02-moblie {
  456. display: none;
  457. }
  458. }
  459. #sec02-moblie #sec02-container {
  460. padding: 15px;
  461. font-weight: 900;
  462. color: #fff;
  463. text-align: right;
  464. }
  465. #sec02-moblie #sec02-container .sec02-top1-box img {
  466. width: 80px;
  467. }
  468. #sec02-moblie #sec02-container .sec02-top1-box span {
  469. font-size: 30px;
  470. }
  471. #sec02-moblie #sec02-container .sec02-top1-box .sec02-top-text {
  472. text-align: center;
  473. }
  474. #sec02-moblie #sec02-container #sec02-content {
  475. position: relative;
  476. }
  477. #sec02-moblie #sec02-container #sec02-top-box {
  478. position: absolute;
  479. top: 1px;
  480. left: 20px;
  481. }
  482. @media screen and (max-width: 350px) {
  483. #sec02-moblie #sec02-container #sec02-top-box {
  484. left: 10px;
  485. }
  486. }
  487. #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 {
  488. color: #000;
  489. }
  490. #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 #top1 {
  491. width: 120px;
  492. height: 150px;
  493. }
  494. @media screen and (max-width: 350px) {
  495. #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 #top1 {
  496. width: 100px;
  497. height: 130px;
  498. }
  499. }
  500. #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 img {
  501. width: 80px;
  502. height: 120px;
  503. border-radius: 50%;
  504. }
  505. @media screen and (max-width: 350px) {
  506. #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 img {
  507. width: 70px;
  508. height: 100px;
  509. }
  510. }
  511. #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 .sec02-top-text {
  512. font-size: 12px;
  513. text-align: left;
  514. }
  515. #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 .sec02-top-text span {
  516. font-size: 30px;
  517. }
  518. @media screen and (max-width: 350px) {
  519. #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 .sec02-top-text span {
  520. font-size: 25px;
  521. }
  522. }
  523. #sec03 {
  524. padding-top: 15vw;
  525. padding-bottom: 5vw;
  526. }
  527. @media screen and (max-width: 767px) {
  528. #sec03 {
  529. display: none;
  530. }
  531. }
  532. #sec03 #sec03-table .sec03-table-title {
  533. font-family: 微軟正黑體;
  534. font-weight: 900;
  535. padding: 15px;
  536. font-size: 35px;
  537. }
  538. #sec03 #sec03-table .table th {
  539. font-size: 40px;
  540. display: table-cell;
  541. vertical-align: middle;
  542. }
  543. #sec03 #sec03-table .table td {
  544. padding: 15px;
  545. }
  546. #sec03 #sec03-table .table img {
  547. width: 50px;
  548. }
  549. #sec03 #sec03-table .table .sec03-table-text {
  550. padding: 10px;
  551. display: table-cell;
  552. vertical-align: middle;
  553. }
  554. #sec03 #sec03-table .table .sec03-table-text h1 {
  555. font-size: 20px;
  556. margin: 0;
  557. }
  558. #sec03 #sec03-table .table .sec03-table-text p {
  559. margin: 0;
  560. }
  561. #sec03-moblie {
  562. padding-top: 40vw;
  563. position: relative;
  564. }
  565. #sec03-moblie .arrow-table {
  566. position: fixed;
  567. width: 25px;
  568. right: 15px;
  569. bottom: 250px;
  570. z-index: 6;
  571. }
  572. @media screen and (max-width: 350px) {
  573. #sec03-moblie .arrow-table {
  574. right: 10px;
  575. bottom: 200px;
  576. }
  577. }
  578. #sec03-moblie .sec03-table-title, #sec03-moblie .sec03-table-title2 {
  579. font-family: 微軟正黑體;
  580. font-weight: 900;
  581. font-size: 14px;
  582. display: inline-block;
  583. color: #9B9B9B;
  584. }
  585. #sec03-moblie .contant-toggle {
  586. display: inline-block;
  587. color: #000;
  588. padding-bottom: 10px;
  589. border-bottom: 2px solid #000;
  590. }
  591. #sec03-moblie #sec03-slider {
  592. padding-top: 5vw;
  593. }
  594. #sec03-moblie #sec03-slider .slick-slide img {
  595. display: inline;
  596. }
  597. #sec03-moblie #sec03-slider #sec03-slider1,
  598. #sec03-moblie #sec03-slider #sec03-slider2 {
  599. margin: 0 5px;
  600. }
  601. @media screen and (max-width: 350px) {
  602. #sec03-moblie #sec03-slider #sec03-slider1,
  603. #sec03-moblie #sec03-slider #sec03-slider2 {
  604. margin: 0 5px;
  605. }
  606. }
  607. #sec03-moblie #sec03-slider .table th {
  608. font-size: 40px;
  609. display: table-cell;
  610. vertical-align: middle;
  611. padding: 15px;
  612. }
  613. @media screen and (max-width: 350px) {
  614. #sec03-moblie #sec03-slider .table th {
  615. font-size: 30px;
  616. }
  617. }
  618. #sec03-moblie #sec03-slider .table td {
  619. display: table-cell;
  620. vertical-align: middle;
  621. padding: 15px;
  622. padding: 10px;
  623. }
  624. @media screen and (max-width: 350px) {
  625. #sec03-moblie #sec03-slider .table td {
  626. padding: 0px;
  627. }
  628. }
  629. #sec03-moblie #sec03-slider .table img {
  630. width: 50px;
  631. }
  632. #sec03-moblie #sec03-slider .table .sec03-table-text {
  633. padding: 0px 0px 0px 3px;
  634. display: table-cell;
  635. vertical-align: middle;
  636. }
  637. @media screen and (max-width: 350px) {
  638. #sec03-moblie #sec03-slider .table .sec03-table-text {
  639. padding: 0px;
  640. }
  641. }
  642. #sec03-moblie #sec03-slider .table .sec03-table-text h1 {
  643. font-size: 14px;
  644. margin: 0;
  645. }
  646. #sec03-moblie #sec03-slider .table .sec03-table-text p {
  647. margin: 0;
  648. font-size: 12px;
  649. }
  650. @media screen and (min-width: 1025px) {
  651. #sec03-moblie {
  652. display: none;
  653. }
  654. }
  655. #sec04 {
  656. padding-top: 5vw;
  657. padding-bottom: 5vw;
  658. background: #414141;
  659. }
  660. @media screen and (max-width: 767px) {
  661. #sec04 {
  662. display: none;
  663. }
  664. }
  665. #sec04 h1 {
  666. color: #fff;
  667. font-size: 45px;
  668. font-weight: 900;
  669. padding: 5px 10px;
  670. }
  671. @media screen and (max-width: 767px) {
  672. #sec04 h1 {
  673. font-weight: 900;
  674. font-size: 32px;
  675. }
  676. }
  677. #sec04 hr {
  678. width: 12vw;
  679. height: 2px;
  680. color: #fff;
  681. margin: 10px;
  682. opacity: 1 !important;
  683. }
  684. @media screen and (max-width: 767px) {
  685. #sec04 hr {
  686. width: 30vw;
  687. }
  688. }
  689. #sec04 .learn-more {
  690. width: 45%;
  691. }
  692. #sec04 #sec04-container .card {
  693. border-radius: 0%;
  694. -webkit-box-shadow: 0 10px 1px rgba(155, 155, 155, 0.8);
  695. box-shadow: 0 10px 1px rgba(155, 155, 155, 0.8);
  696. }
  697. #sec04 #sec04-container .card img {
  698. padding: 5px;
  699. height: 150px;
  700. -o-object-fit: cover;
  701. object-fit: cover;
  702. }
  703. #sec04 #sec04-container .card .card-title {
  704. font-weight: 900;
  705. }
  706. #sec04-moblie {
  707. padding-top: 5vw;
  708. padding-bottom: 5vw;
  709. background: #414141;
  710. position: relative;
  711. overflow: hidden;
  712. }
  713. #sec04-moblie .arrow-table {
  714. position: fixed;
  715. width: 25px;
  716. right: 15px;
  717. bottom: 240px;
  718. z-index: 6;
  719. }
  720. @media screen and (max-width: 350px) {
  721. #sec04-moblie .arrow-table {
  722. right: 10px;
  723. }
  724. }
  725. @media screen and (min-width: 1025px) {
  726. #sec04-moblie {
  727. display: none;
  728. }
  729. }
  730. #sec04-moblie h1 {
  731. color: #fff;
  732. font-size: 45px;
  733. font-weight: 900;
  734. padding: 5px 10px;
  735. }
  736. @media screen and (max-width: 767px) {
  737. #sec04-moblie h1 {
  738. font-weight: 900;
  739. font-size: 32px;
  740. }
  741. }
  742. #sec04-moblie hr {
  743. width: 30vw;
  744. height: 2px;
  745. color: #fff;
  746. margin: 10px;
  747. opacity: 1 !important;
  748. }
  749. #sec04-moblie #sec04-moblie-container {
  750. padding-top: 10vw;
  751. }
  752. #sec04-moblie #sec04-moblie-container .col {
  753. margin: 10px;
  754. }
  755. #sec04-moblie #sec04-moblie-container .col .card {
  756. border-radius: 0%;
  757. -webkit-box-shadow: 0 10px 1px rgba(155, 155, 155, 0.8);
  758. box-shadow: 0 10px 1px rgba(155, 155, 155, 0.8);
  759. }
  760. #sec04-moblie #sec04-moblie-container .col .card img {
  761. height: 150px;
  762. -o-object-fit: cover;
  763. object-fit: cover;
  764. }
  765. #sec04-moblie #sec04-moblie-container .col .card .card-title {
  766. font-weight: 900;
  767. }
  768. #sec04-moblie #sec04-moblie-container .col .card .learn-more {
  769. width: 120px;
  770. }
  771. #sec05 {
  772. width: 85vw;
  773. margin: 0 auto;
  774. padding-top: 5vw;
  775. padding-bottom: 5vw;
  776. }
  777. @media screen and (max-width: 767px) {
  778. #sec05 {
  779. display: none;
  780. }
  781. }
  782. #sec05 h1 {
  783. font-size: 45px;
  784. font-weight: 900;
  785. padding: 15px;
  786. }
  787. #sec05 #sec05-container #sec05-destop-slider .slick-prev:before,
  788. #sec05 #sec05-container #sec05-destop-slider .slick-next:before {
  789. opacity: 0;
  790. }
  791. #sec05 #sec05-container #sec05-destop-slider .slick-prev,
  792. #sec05 #sec05-container #sec05-destop-slider .slick-next {
  793. width: 40px;
  794. height: 40px;
  795. content: none;
  796. }
  797. #sec05 #sec05-container #sec05-destop-slider .slick-prev {
  798. background-image: url(./img/arrow-table2.png);
  799. background-repeat: no-repeat;
  800. left: -40px;
  801. }
  802. #sec05 #sec05-container #sec05-destop-slider .slick-prev:hover, #sec05 #sec05-container #sec05-destop-slider .slick-prev:focus {
  803. background-image: url(./img/arrow-table2.png);
  804. background-repeat: no-repeat;
  805. }
  806. #sec05 #sec05-container #sec05-destop-slider .slick-next {
  807. background-image: url(./img/arrow-table.png);
  808. background-repeat: no-repeat;
  809. right: -50px;
  810. }
  811. #sec05 #sec05-container #sec05-destop-slider .slick-next:hover, #sec05 #sec05-container #sec05-destop-slider .slick-next:focus {
  812. background-image: url(./img/arrow-table.png);
  813. background-repeat: no-repeat;
  814. }
  815. #sec05 #sec05-container .col {
  816. margin: 5px;
  817. }
  818. #sec05 #sec05-container .card {
  819. -webkit-box-shadow: 0 10px 1px rgba(155, 155, 155, 0.8);
  820. box-shadow: 0 10px 1px rgba(155, 155, 155, 0.8);
  821. }
  822. #sec05-moblie {
  823. padding-top: 5vw;
  824. padding-bottom: 5vw;
  825. overflow: hidden;
  826. }
  827. @media screen and (min-width: 1025px) {
  828. #sec05-moblie {
  829. display: none;
  830. }
  831. }
  832. #sec05-moblie #sec05-moblie-container {
  833. position: relative;
  834. }
  835. #sec05-moblie #sec05-moblie-container .arrow-table {
  836. position: fixed;
  837. width: 25px;
  838. right: 5px;
  839. bottom: 300px;
  840. z-index: 6;
  841. }
  842. @media screen and (max-width: 350px) {
  843. #sec05-moblie #sec05-moblie-container .arrow-table {
  844. right: 10px;
  845. }
  846. }
  847. #sec05-moblie h1 {
  848. font-size: 45px;
  849. font-weight: 900;
  850. padding: 15px;
  851. }
  852. #sec05-moblie #sec05-moblie-slider .sec05-moblie-box {
  853. padding: 20px;
  854. margin: 30px;
  855. }
  856. @media screen and (max-width: 400px) {
  857. #sec05-moblie #sec05-moblie-slider .sec05-moblie-box {
  858. padding: 5px;
  859. margin: 20px;
  860. }
  861. }
  862. #sec05-moblie #sec05-moblie-slider .sec05-moblie-box .card {
  863. border: none;
  864. }
  865. #sec06 {
  866. padding-top: 5vw;
  867. padding-bottom: 5vw;
  868. background: #525252;
  869. }
  870. @media screen and (max-width: 767px) {
  871. #sec06 {
  872. background: #313131;
  873. }
  874. }
  875. #sec06 h1 {
  876. font-size: 45px;
  877. font-weight: 900;
  878. padding: 15px;
  879. color: #fff;
  880. }
  881. #sec06 hr {
  882. width: 12vw;
  883. height: 2px;
  884. color: #fff;
  885. margin: 10px;
  886. opacity: 1 !important;
  887. }
  888. @media screen and (max-width: 767px) {
  889. #sec06 hr {
  890. width: 30vw;
  891. }
  892. }
  893. #sec06 #sec06-container .card {
  894. height: 480px;
  895. margin: 10px;
  896. border-radius: 0%;
  897. -webkit-box-shadow: 0 10px 1px rgba(155, 155, 155, 0.8);
  898. box-shadow: 0 10px 1px rgba(155, 155, 155, 0.8);
  899. }
  900. #sec06 #sec06-container .card img {
  901. padding: 5px;
  902. height: 150px;
  903. -o-object-fit: cover;
  904. object-fit: cover;
  905. }
  906. #sec06 #sec06-container .card .card-title {
  907. font-weight: 900;
  908. }
  909. #sec06 #sec06-container .card .learn-more {
  910. width: 120px;
  911. }
  912. #sec07 {
  913. padding-top: 5vw;
  914. padding-bottom: 5vw;
  915. }
  916. @media screen and (max-width: 767px) {
  917. #sec07 {
  918. display: none;
  919. }
  920. }
  921. #sec07 .NFT-Collections-Sales-Volume {
  922. width: 80vw;
  923. margin: 0 auto;
  924. margin-top: -120px;
  925. margin-bottom: 50px;
  926. }
  927. @media screen and (max-width: 767px) {
  928. #sec07 .NFT-Collections-Sales-Volume {
  929. display: none;
  930. }
  931. }
  932. #sec07 .NFT-Collections-Sales-Volume h1 {
  933. padding: 0;
  934. margin: 0;
  935. font-weight: normal;
  936. color: #fff;
  937. letter-spacing: 3px;
  938. font-size: 50px;
  939. }
  940. #sec07 .table {
  941. text-align: center;
  942. }
  943. #sec07 .table thead tr th {
  944. border: 0;
  945. }
  946. #sec07 .table td {
  947. display: table-cell;
  948. vertical-align: middle;
  949. text-align: left;
  950. }
  951. #sec07 .table td img {
  952. width: 50px;
  953. }
  954. #sec07 .table td .data-line {
  955. width: 100px;
  956. }
  957. #sec07 .table th {
  958. display: table-cell;
  959. vertical-align: middle;
  960. text-align: left;
  961. }
  962. #sec07 .table img {
  963. padding: 5px;
  964. }
  965. #sec07 .sec07-table-button {
  966. text-align: right;
  967. }
  968. #sec07 .sec07-table-button .data-button {
  969. text-align: left;
  970. border-radius: 25px;
  971. width: 10vw;
  972. padding: 5px 20px;
  973. color: #000;
  974. background: url(./img/play.png) 80% 40% no-repeat scroll transparent;
  975. background-size: 18px 18px;
  976. background-color: #fff;
  977. border: 1px solid #000;
  978. }
  979. #sec07-moblir-title {
  980. background: #414141;
  981. }
  982. @media screen and (min-width: 1025px) {
  983. #sec07-moblir-title {
  984. display: none;
  985. }
  986. }
  987. #sec07-moblir-title #sec07-container {
  988. padding: 15px;
  989. font-weight: 900;
  990. color: #fff;
  991. }
  992. #sec07-moblie {
  993. padding-top: 5vw;
  994. padding-bottom: 5vw;
  995. }
  996. @media screen and (min-width: 1025px) {
  997. #sec07-moblie {
  998. display: none;
  999. }
  1000. }
  1001. #sec07-moblie .table {
  1002. text-align: center;
  1003. }
  1004. #sec07-moblie .table thead tr th {
  1005. border: 0;
  1006. }
  1007. #sec07-moblie .table td {
  1008. display: table-cell;
  1009. vertical-align: middle;
  1010. text-align-last: left;
  1011. font-size: 14px;
  1012. }
  1013. #sec07-moblie .table td img {
  1014. width: 30px;
  1015. }
  1016. #sec07-moblie .table td .data-line {
  1017. width: 80px;
  1018. }
  1019. #sec07-moblie .table th {
  1020. display: table-cell;
  1021. vertical-align: middle;
  1022. text-align: left;
  1023. font-size: 14px;
  1024. }
  1025. #sec07-moblie .table img {
  1026. padding: 5px;
  1027. width: 50px;
  1028. }
  1029. #sec07-moblie .sec07-table-button {
  1030. text-align: right;
  1031. }
  1032. #sec07-moblie .sec07-table-button .data-button {
  1033. text-align: left;
  1034. border-radius: 25px;
  1035. width: 35vw;
  1036. padding: 5px 20px;
  1037. color: #000;
  1038. background: url(./img/play.png) 80% 40% no-repeat scroll transparent;
  1039. background-size: 18px 18px;
  1040. background-color: #fff;
  1041. border: 1px solid #000;
  1042. }
  1043. #footer {
  1044. width: 100vw;
  1045. text-align: center;
  1046. line-height: 2;
  1047. background: #313131;
  1048. color: #fff;
  1049. padding-bottom: 3vw !important;
  1050. }
  1051. #footer .footer-link {
  1052. padding-top: 3vw;
  1053. }
  1054. #footer .footer-link a {
  1055. text-decoration: none;
  1056. font-size: 20px;
  1057. padding: 10px;
  1058. color: #fff;
  1059. }
  1060. @media screen and (max-width: 767px) {
  1061. #footer .footer-link a {
  1062. font-size: 14px;
  1063. padding: 0 !important;
  1064. }
  1065. }
  1066. @media screen and (max-width: 400px) {
  1067. #footer .footer-link a {
  1068. font-size: 12px;
  1069. }
  1070. }
  1071. #footer .footer-link a span {
  1072. font-size: 28px;
  1073. }
  1074. @media screen and (max-width: 767px) {
  1075. #footer .footer-link a span {
  1076. font-size: 16px;
  1077. }
  1078. }
  1079. @media screen and (max-width: 350px) {
  1080. #footer .footer-link a span {
  1081. font-size: 14px;
  1082. }
  1083. }
  1084. #footer .text {
  1085. padding-top: 3vw;
  1086. }
  1087. #footer .text a {
  1088. text-decoration: none;
  1089. color: #fff;
  1090. }
  1091. #footer .text h2 {
  1092. font-size: 20px;
  1093. margin: 10px;
  1094. letter-spacing: 1px;
  1095. display: inline;
  1096. }
  1097. @media screen and (max-width: 767px) {
  1098. #footer .text h2 {
  1099. display: block;
  1100. font-size: 16px;
  1101. margin: 8px;
  1102. }
  1103. }
  1104. #footer .text p {
  1105. margin: 0 !important;
  1106. }
  1107. /*# sourceMappingURL=style.css.map */