style.css 46 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569
  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: 90vw;
  15. }
  16. }
  17. body {
  18. width: 100vw;
  19. background: #fff;
  20. }
  21. body .learn-more {
  22. color: #fff;
  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. @media screen and (max-width: 767px) {
  47. #Navigation {
  48. width: 100vw;
  49. }
  50. }
  51. #Navigation #logo {
  52. padding-top: 1.3vw;
  53. }
  54. @media screen and (max-width: 767px) {
  55. #Navigation #logo {
  56. padding: 10px;
  57. }
  58. }
  59. #Navigation #logo img {
  60. width: 180px;
  61. }
  62. @media screen and (max-width: 767px) {
  63. #Navigation #logo img {
  64. width: 140px;
  65. }
  66. }
  67. #Navigation #link {
  68. padding: 4vw 1vw 2vw 1vw;
  69. }
  70. @media screen and (max-width: 767px) {
  71. #Navigation #link {
  72. display: none;
  73. }
  74. }
  75. #Navigation #link a {
  76. text-decoration: none;
  77. color: #fff;
  78. letter-spacing: 1px;
  79. font-size: 0.9rem;
  80. font-weight: 600;
  81. cursor: pointer;
  82. padding: 15px;
  83. position: relative;
  84. }
  85. #Navigation #link a :hover {
  86. opacity: 0.8;
  87. }
  88. #Navigation #link a:after {
  89. content: "";
  90. display: block;
  91. width: 80%;
  92. height: 3px;
  93. background-color: #fff;
  94. position: absolute;
  95. left: 12%;
  96. bottom: 0;
  97. -webkit-transition: all 0.3s;
  98. transition: all 0.3s;
  99. opacity: 0;
  100. }
  101. #Navigation #link a:hover:after {
  102. width: 80%;
  103. opacity: 1;
  104. }
  105. @media screen and (max-width: 1024px) {
  106. #Navigation #link a {
  107. padding: 5px;
  108. padding-top: 2vw;
  109. }
  110. }
  111. #Navigation #socail-link {
  112. padding: 4vw 5vw 2vw 1vw;
  113. text-align: right;
  114. }
  115. @media screen and (max-width: 767px) {
  116. #Navigation #socail-link {
  117. display: none;
  118. }
  119. }
  120. #Navigation #socail-link img {
  121. width: 30px;
  122. margin: 0 10px;
  123. -webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(138deg) brightness(103%) contrast(102%);
  124. filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(138deg) brightness(103%) contrast(102%);
  125. -webkit-transition: 0.3s;
  126. transition: 0.3s;
  127. }
  128. #Navigation #socail-link img:hover {
  129. -webkit-filter: invert(14%) sepia(5%) saturate(8%) hue-rotate(320deg) brightness(95%) contrast(84%);
  130. filter: invert(14%) sepia(5%) saturate(8%) hue-rotate(320deg) brightness(95%) contrast(84%);
  131. }
  132. #Navigation #menu-btn1 {
  133. position: absolute;
  134. right: 2vw;
  135. top: 8vw;
  136. width: 15vw;
  137. z-index: 6;
  138. }
  139. @media screen and (min-width: 1025px) {
  140. #Navigation #menu-btn1 {
  141. display: none;
  142. }
  143. }
  144. @media screen and (min-width: 768px) {
  145. #Navigation #menu-btn1 {
  146. display: none;
  147. }
  148. }
  149. #menu-box {
  150. width: 40vw;
  151. right: 0px;
  152. position: fixed;
  153. z-index: 20;
  154. overflow: hidden;
  155. display: none;
  156. }
  157. @media screen and (min-width: 1025px) {
  158. #menu-box {
  159. display: none;
  160. }
  161. }
  162. #menu-box hr {
  163. margin: 5px auto !important;
  164. width: 25vw;
  165. background: #fff;
  166. opacity: 1 !important;
  167. }
  168. #menu-box #menu-box2 {
  169. padding-bottom: 5vw;
  170. position: relative;
  171. width: 40vw;
  172. background-color: #313131;
  173. z-index: 7;
  174. text-align: center;
  175. }
  176. #menu-box #menu-box2 .close {
  177. padding: 30px 15px 15px 15px;
  178. }
  179. #menu-box #menu-box2 a {
  180. display: inline-block;
  181. text-decoration: none;
  182. color: #fff;
  183. font-size: 14px;
  184. font-weight: 900;
  185. text-align: center;
  186. padding: 0 !important;
  187. }
  188. #banner {
  189. width: 100vw;
  190. display: inline-block;
  191. background: url(./img/banner2.jpg), linear-gradient(75deg, rgba(0, 0, 0, 0.52) 35%, transparent 30%);
  192. background-position: center center;
  193. background-size: cover;
  194. background-blend-mode: overlay;
  195. }
  196. @media screen and (max-width: 767px) {
  197. #banner {
  198. background: url(./img/mobile-banner1.jpg);
  199. }
  200. }
  201. #banner #banner-container {
  202. width: 80vw;
  203. margin: 50px auto;
  204. padding-bottom: 5vw;
  205. }
  206. @media screen and (max-width: 767px) {
  207. #banner #banner-container {
  208. width: 100vw;
  209. padding-bottom: 10vw;
  210. }
  211. }
  212. #banner #banner-container .youtube {
  213. width: 80vw;
  214. padding-top: 10vw;
  215. margin: 0 auto;
  216. color: #fff;
  217. }
  218. #banner #banner-container .youtube a {
  219. text-decoration: none;
  220. color: #fff;
  221. }
  222. @media screen and (max-width: 767px) {
  223. #banner #banner-container .youtube {
  224. padding-top: 10vw;
  225. width: 95vw;
  226. }
  227. }
  228. #banner #banner-container .youtube #youtube-text h1 {
  229. font-size: 40px;
  230. text-align: left;
  231. }
  232. @media screen and (max-width: 767px) {
  233. #banner #banner-container .youtube #youtube-text h1 {
  234. font-size: 30px;
  235. margin: 0;
  236. }
  237. }
  238. #banner #banner-container .youtube #youtube-text .youtube-text-title1 {
  239. width: 380px;
  240. }
  241. @media screen and (max-width: 767px) {
  242. #banner #banner-container .youtube #youtube-text .youtube-text-title1 {
  243. width: 80vw;
  244. }
  245. }
  246. #banner #banner-container .youtube #youtube-text .youtube-text-title2 {
  247. width: 350px;
  248. }
  249. @media screen and (max-width: 767px) {
  250. #banner #banner-container .youtube #youtube-text .youtube-text-title2 {
  251. width: 80vw;
  252. }
  253. }
  254. #banner #banner-container .youtube #youtube-text p {
  255. width: 350px;
  256. }
  257. @media screen and (max-width: 767px) {
  258. #banner #banner-container .youtube #youtube-text p {
  259. width: 80vw;
  260. }
  261. }
  262. #banner #banner-container .youtube hr {
  263. width: 12vw;
  264. height: 2px;
  265. color: #fff;
  266. margin: 20px 0px;
  267. opacity: 1 !important;
  268. }
  269. @media screen and (max-width: 767px) {
  270. #banner #banner-container .youtube hr {
  271. width: 80vw;
  272. }
  273. }
  274. #banner #banner-container .youtube .youtube-text-hr {
  275. width: 20vw;
  276. padding: 10px;
  277. }
  278. @media screen and (max-width: 767px) {
  279. #banner #banner-container .youtube .youtube-text-hr {
  280. width: 80vw;
  281. }
  282. }
  283. #banner #banner-container .youtube p {
  284. font-size: 18px;
  285. }
  286. #banner #banner-container .youtube h1 {
  287. font-size: 30px;
  288. }
  289. @media screen and (max-width: 767px) {
  290. #banner #banner-container .youtube h1 {
  291. font-size: 25px;
  292. padding: 15px 0px;
  293. }
  294. }
  295. @media screen and (max-width: 767px) {
  296. #banner #banner-container .youtube .learn-more {
  297. width: 100%;
  298. margin: 10px 0px;
  299. }
  300. }
  301. #banner #banner-container #youtube2 #youtube-text h1 {
  302. font-size: 30px;
  303. }
  304. @media screen and (max-width: 767px) {
  305. #banner #banner-container #youtube2 #youtube-text h1 {
  306. font-size: 23px;
  307. margin: 0;
  308. }
  309. }
  310. #banner #banner-container #youtube2 #youtube-text .youtube-text-title1 {
  311. width: 450px;
  312. }
  313. @media screen and (max-width: 767px) {
  314. #banner #banner-container #youtube2 #youtube-text .youtube-text-title1 {
  315. width: 80vw;
  316. }
  317. }
  318. #banner #banner-container #youtube2 #youtube-text .youtube-text-title2 {
  319. width: 450px;
  320. }
  321. @media screen and (max-width: 767px) {
  322. #banner #banner-container #youtube2 #youtube-text .youtube-text-title2 {
  323. width: 80vw;
  324. }
  325. }
  326. #banner #banner-container .youtube7-10 {
  327. width: 80vw;
  328. padding-top: 10vw;
  329. margin: 0 auto;
  330. color: #fff;
  331. }
  332. #banner #banner-container .youtube7-10 a {
  333. text-decoration: none;
  334. color: #fff;
  335. }
  336. @media screen and (max-width: 767px) {
  337. #banner #banner-container .youtube7-10 {
  338. padding-top: 10vw;
  339. width: 95vw;
  340. }
  341. }
  342. #banner #banner-container .youtube7-10 #youtube-text h1 {
  343. font-size: 40px;
  344. text-align: left;
  345. }
  346. @media screen and (max-width: 767px) {
  347. #banner #banner-container .youtube7-10 #youtube-text h1 {
  348. font-size: 30px;
  349. margin: 0;
  350. }
  351. }
  352. #banner #banner-container .youtube7-10 #youtube-text .youtube-text-title1 {
  353. width: 400px;
  354. }
  355. @media screen and (max-width: 767px) {
  356. #banner #banner-container .youtube7-10 #youtube-text .youtube-text-title1 {
  357. width: 80vw;
  358. }
  359. }
  360. #banner #banner-container .youtube7-10 #youtube-text .youtube-text-title2 {
  361. width: 380px;
  362. }
  363. @media screen and (max-width: 767px) {
  364. #banner #banner-container .youtube7-10 #youtube-text .youtube-text-title2 {
  365. width: 80vw;
  366. }
  367. }
  368. #banner #banner-container .youtube7-10 #youtube-text p {
  369. width: 380px;
  370. }
  371. @media screen and (max-width: 767px) {
  372. #banner #banner-container .youtube7-10 #youtube-text p {
  373. width: 80vw;
  374. }
  375. }
  376. #banner #banner-container .youtube7-10 hr {
  377. width: 12vw;
  378. height: 2px;
  379. color: #fff;
  380. margin: 20px 0px;
  381. opacity: 1 !important;
  382. }
  383. @media screen and (max-width: 767px) {
  384. #banner #banner-container .youtube7-10 hr {
  385. width: 80vw;
  386. }
  387. }
  388. #banner #banner-container .youtube7-10 .youtube-text-hr {
  389. width: 20vw;
  390. padding: 10px;
  391. }
  392. @media screen and (max-width: 767px) {
  393. #banner #banner-container .youtube7-10 .youtube-text-hr {
  394. width: 80vw;
  395. }
  396. }
  397. #banner #banner-container .youtube7-10 p {
  398. font-size: 18px;
  399. }
  400. #banner #banner-container .youtube7-10 h1 {
  401. font-size: 30px;
  402. }
  403. @media screen and (max-width: 767px) {
  404. #banner #banner-container .youtube7-10 h1 {
  405. font-size: 25px;
  406. padding: 15px 0px;
  407. }
  408. }
  409. @media screen and (max-width: 767px) {
  410. #banner #banner-container .youtube7-10 .learn-more {
  411. width: 100%;
  412. margin: 10px 0px;
  413. }
  414. }
  415. #banner #banner-container .contact-form-destop {
  416. text-align: center;
  417. }
  418. @media screen and (max-width: 767px) {
  419. #banner #banner-container .contact-form-destop {
  420. display: none;
  421. }
  422. }
  423. #banner #banner-container .contact-form-destop h1 {
  424. padding: 5vw 0 1vw 0;
  425. color: #fff;
  426. }
  427. @media screen and (max-width: 767px) {
  428. #banner #banner-container .contact-form-destop h1 {
  429. font-size: 20px;
  430. padding: 15px;
  431. }
  432. }
  433. #banner #banner-container .contact-form-destop #email {
  434. width: 50%;
  435. font-size: 16px;
  436. margin: 15px 0;
  437. padding: 10px 15px;
  438. border: none;
  439. height: 50px;
  440. border: 1px solid #313131;
  441. }
  442. @media screen and (max-width: 767px) {
  443. #banner #banner-container .contact-form-destop #email {
  444. display: none;
  445. }
  446. }
  447. #banner #banner-container .contact-form-destop .btn {
  448. color: #fff;
  449. width: 25%;
  450. height: 50px;
  451. margin: 15px 0px;
  452. font-size: 16px;
  453. border-radius: 0%;
  454. border: none;
  455. font-weight: 900;
  456. background: #93000a;
  457. vertical-align: top;
  458. -webkit-transition: 0.3s;
  459. transition: 0.3s;
  460. }
  461. @media screen and (max-width: 767px) {
  462. #banner #banner-container .contact-form-destop .btn {
  463. display: none;
  464. }
  465. }
  466. #banner #banner-container .contact-form-destop .btn:hover {
  467. font-size: 17px;
  468. }
  469. @media screen and (min-width: 1025px) {
  470. #banner #banner-container .contact-form-mobile {
  471. display: none;
  472. }
  473. }
  474. #banner #banner-container .contact-form-mobile h1 {
  475. text-align: center;
  476. padding: 10vw 0 1vw 0;
  477. color: #fff;
  478. font-size: 20px;
  479. }
  480. #banner #banner-container .contact-form-mobile #email-moblie {
  481. margin: 10px auto;
  482. width: 75%;
  483. padding: 10px 15px;
  484. border: none;
  485. height: 50px;
  486. background: url(./img/email.png) 5% 50% no-repeat scroll transparent;
  487. background-size: 20px 15px;
  488. background-color: #fff;
  489. text-align: center;
  490. color: #313131;
  491. font-weight: 900;
  492. }
  493. @media screen and (min-width: 1025px) {
  494. #banner #banner-container .contact-form-mobile #email-moblie {
  495. display: none;
  496. }
  497. }
  498. #banner #banner-container #email-arrow {
  499. width: 15%;
  500. background: url(./img/button-arrow.png) 55% 50% no-repeat scroll transparent;
  501. background-size: 10px 15px;
  502. background-color: #93000a;
  503. height: 50px;
  504. margin: 10px auto;
  505. font-size: 16px;
  506. border-radius: 0%;
  507. border: none;
  508. font-weight: 900;
  509. vertical-align: top;
  510. }
  511. @media screen and (min-width: 1025px) {
  512. #banner #banner-container #email-arrow {
  513. display: none;
  514. }
  515. }
  516. #sec01-container-viedeo .card {
  517. padding: 30px;
  518. border: none !important;
  519. }
  520. @media screen and (max-width: 767px) {
  521. #sec01-container-viedeo .card {
  522. padding: 15px;
  523. }
  524. }
  525. #sec01-container-viedeo .card h1 {
  526. padding: 15px;
  527. font-size: 40px;
  528. font-weight: 900;
  529. color: #9b9b9b;
  530. }
  531. #sec01-container-viedeo .card p {
  532. padding: 5px;
  533. font-size: 18px;
  534. margin-bottom: 0 !important;
  535. }
  536. @media screen and (max-width: 767px) {
  537. #sec01-container-viedeo .card p {
  538. padding: 0px;
  539. font-size: 16px;
  540. }
  541. }
  542. #sec01-container-viedeo .card .sec01-title {
  543. padding: 15px 0px;
  544. font-weight: 900;
  545. font-size: 22px;
  546. }
  547. @media screen and (max-width: 767px) {
  548. #sec01-container-viedeo .card .sec01-title {
  549. font-size: 18px;
  550. }
  551. }
  552. #sec01-container-viedeo .card a {
  553. text-decoration: none;
  554. color: #000;
  555. -webkit-transition: 0.3s;
  556. transition: 0.3s;
  557. cursor: pointer;
  558. }
  559. #sec01-container-viedeo .card a:hover {
  560. color: #2828ff;
  561. }
  562. #sec01-container-viedeo .card img {
  563. text-align: center;
  564. width: 35vw;
  565. height: 240px;
  566. -o-object-fit: cover;
  567. object-fit: cover;
  568. }
  569. @media screen and (max-width: 767px) {
  570. #sec01-container-viedeo .card img {
  571. width: 85vw;
  572. height: 200px;
  573. margin: 0 auto;
  574. }
  575. }
  576. #sec01 {
  577. padding-top: 5vw;
  578. }
  579. #sec01 .NEWS {
  580. width: 80vw;
  581. margin: 0 auto;
  582. margin-top: -130px;
  583. margin-bottom: 100px;
  584. }
  585. @media screen and (max-width: 767px) {
  586. #sec01 .NEWS {
  587. margin-top: -70px;
  588. width: 90vw;
  589. }
  590. }
  591. #sec01 .NEWS h1 {
  592. padding: 0;
  593. margin: 0;
  594. font-weight: 900;
  595. color: #fff;
  596. letter-spacing: 3px;
  597. font-size: 60px;
  598. }
  599. @media screen and (max-width: 767px) {
  600. #sec01 .NEWS h1 {
  601. font-size: 50px;
  602. }
  603. }
  604. #sec01 #sec01-container {
  605. -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  606. box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  607. margin: 0 auto !important;
  608. }
  609. @media screen and (max-width: 767px) {
  610. #sec01 #sec01-container {
  611. width: 90vw;
  612. margin: 0 auto;
  613. }
  614. }
  615. #sec01 #sec01-container #sec01-container-card .card {
  616. padding: 30px;
  617. border: none !important;
  618. }
  619. @media screen and (max-width: 767px) {
  620. #sec01 #sec01-container #sec01-container-card .card {
  621. padding: 15px;
  622. }
  623. }
  624. #sec01 #sec01-container #sec01-container-card .card h1 {
  625. padding: 15px;
  626. font-size: 40px;
  627. font-weight: 900;
  628. color: #9b9b9b;
  629. }
  630. #sec01 #sec01-container #sec01-container-card .card p {
  631. padding: 5px;
  632. font-size: 18px;
  633. margin-bottom: 0 !important;
  634. }
  635. @media screen and (max-width: 767px) {
  636. #sec01 #sec01-container #sec01-container-card .card p {
  637. padding: 0px;
  638. font-size: 16px;
  639. }
  640. }
  641. #sec01 #sec01-container #sec01-container-card .card .sec01-title {
  642. padding: 15px 0px;
  643. font-weight: 900;
  644. font-size: 22px;
  645. }
  646. @media screen and (max-width: 767px) {
  647. #sec01 #sec01-container #sec01-container-card .card .sec01-title {
  648. font-size: 18px;
  649. }
  650. }
  651. #sec01 #sec01-container #sec01-container-card .card a {
  652. text-decoration: none;
  653. color: #000;
  654. -webkit-transition: 0.3s;
  655. transition: 0.3s;
  656. cursor: pointer;
  657. }
  658. #sec01 #sec01-container #sec01-container-card .card a:hover {
  659. color: #2828ff;
  660. }
  661. #sec01 #sec01-container #sec01-container-card .card img {
  662. text-align: center;
  663. width: 35vw;
  664. height: 240px;
  665. -o-object-fit: cover;
  666. object-fit: cover;
  667. }
  668. @media screen and (max-width: 767px) {
  669. #sec01 #sec01-container #sec01-container-card .card img {
  670. width: 85vw;
  671. height: 200px;
  672. margin: 0 auto;
  673. }
  674. }
  675. #video {
  676. width: 100vw;
  677. padding-bottom: 10vw;
  678. text-align: center;
  679. background-position: center center;
  680. background-size: cover;
  681. }
  682. #video video {
  683. width: 80vw;
  684. margin: 0 auto;
  685. }
  686. .wrap {
  687. text-align: center;
  688. width: 100vw;
  689. }
  690. .wrap .adv-banner {
  691. width: 100%;
  692. height: 90vh;
  693. position: relative;
  694. overflow: hidden;
  695. display: -webkit-box;
  696. display: -ms-flexbox;
  697. display: flex;
  698. -webkit-box-pack: center;
  699. -ms-flex-pack: center;
  700. justify-content: center;
  701. -webkit-box-align: center;
  702. -ms-flex-align: center;
  703. align-items: center;
  704. }
  705. @media screen and (max-width: 767px) {
  706. .wrap .adv-banner {
  707. height: 35vh;
  708. }
  709. }
  710. .wrap .adv-banner video {
  711. position: absolute;
  712. width: 100%;
  713. height: 90%;
  714. top: 0;
  715. left: 0;
  716. -o-object-fit: cover;
  717. object-fit: cover;
  718. }
  719. #sec-works .sec-work-container {
  720. width: 85vw;
  721. }
  722. #sec-works #sec-work-box .work-box .card {
  723. height: 780px;
  724. text-align: center;
  725. display: inline-block !important;
  726. -webkit-transition: 0.3s;
  727. transition: 0.3s;
  728. }
  729. #sec-works #sec-work-box .work-box .card:hover {
  730. -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  731. box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  732. }
  733. #sec-works .sec-work-title h1 {
  734. font-size: 45px;
  735. font-weight: 900;
  736. padding: 15px;
  737. }
  738. #sec02 {
  739. background: #414141;
  740. padding: 3vw;
  741. }
  742. @media screen and (max-width: 767px) {
  743. #sec02 {
  744. display: none;
  745. }
  746. }
  747. #sec02 #sec02-container {
  748. width: 90vw;
  749. padding: 15px;
  750. font-weight: 900;
  751. color: #fff;
  752. position: relative;
  753. }
  754. #sec02 #sec02-container #sec02-top-box {
  755. position: relative;
  756. }
  757. #sec02 #sec02-container #sec02-top-box #sec02-content {
  758. position: absolute;
  759. top: 10px;
  760. left: 300px;
  761. }
  762. #sec02 #sec02-container #sec02-top-box .sec02-box1 {
  763. color: #000;
  764. width: 13vw;
  765. }
  766. #sec02 #sec02-container #sec02-top-box .sec02-box1 img {
  767. display: inline;
  768. width: 150px;
  769. height: 200px;
  770. -o-object-fit: cover;
  771. object-fit: cover;
  772. -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  773. box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  774. }
  775. #sec02 #sec02-container #sec02-top-box .sec02-box1 .sec02-top-text h1 {
  776. font-size: 50px;
  777. }
  778. #sec02 #sec02-container #sec02-top-box .sec02-box1 .sec02-top-text span {
  779. font-size: 30px;
  780. }
  781. #sec02-moblie {
  782. background: #414141;
  783. background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #414141), color-stop(30%, transparent), color-stop(55%, #fff));
  784. background: linear-gradient(180deg, #414141 50%, transparent 30%, #fff 55%);
  785. padding-top: 3vw;
  786. padding-bottom: 10vw;
  787. }
  788. @media screen and (min-width: 1025px) {
  789. #sec02-moblie {
  790. display: none;
  791. }
  792. }
  793. #sec02-moblie #sec02-container {
  794. padding: 15px;
  795. font-weight: 900;
  796. color: #fff;
  797. width: 100vw;
  798. }
  799. #sec02-moblie #sec02-container .sec02-top1-box h1 {
  800. font-size: 40px;
  801. padding: 3vw 0;
  802. }
  803. #sec02-moblie #sec02-container .sec02-top1-box img {
  804. width: 80px;
  805. }
  806. #sec02-moblie #sec02-container .sec02-top1-box span {
  807. font-size: 30px;
  808. }
  809. #sec02-moblie #sec02-container .sec02-top1-box .sec02-top-text {
  810. text-align: center;
  811. }
  812. #sec02-moblie #sec02-container #sec02-top-box {
  813. width: 95vw;
  814. margin: 5px;
  815. }
  816. #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 {
  817. color: #000;
  818. }
  819. #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 #top1 {
  820. width: 100px;
  821. height: 130px;
  822. }
  823. @media screen and (max-width: 350px) {
  824. #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 #top1 {
  825. width: 100px;
  826. height: 130px;
  827. }
  828. }
  829. #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 img {
  830. width: 80px;
  831. height: 120px;
  832. }
  833. @media screen and (max-width: 350px) {
  834. #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 img {
  835. width: 70px;
  836. height: 100px;
  837. }
  838. }
  839. #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 .sec02-top-text {
  840. font-size: 12px;
  841. text-align: left;
  842. }
  843. #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 .sec02-top-text span {
  844. font-size: 30px;
  845. }
  846. @media screen and (max-width: 350px) {
  847. #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 .sec02-top-text span {
  848. font-size: 25px;
  849. }
  850. }
  851. #sec03 {
  852. padding-top: 15vw;
  853. padding-bottom: 5vw;
  854. }
  855. @media screen and (max-width: 767px) {
  856. #sec03 {
  857. display: none;
  858. }
  859. }
  860. #sec03 #sec03-table .sec03-table-title {
  861. font-family: 微軟正黑體;
  862. font-weight: 900;
  863. padding: 15px;
  864. font-size: 35px;
  865. }
  866. #sec03 #sec03-table .table th {
  867. font-size: 40px;
  868. display: table-cell;
  869. vertical-align: middle;
  870. }
  871. #sec03 #sec03-table .table td {
  872. padding: 15px;
  873. }
  874. #sec03 #sec03-table .table td a {
  875. text-decoration: none;
  876. color: #000;
  877. }
  878. #sec03 #sec03-table .table img {
  879. width: 50px;
  880. }
  881. #sec03 #sec03-table .table .sec03-table-text {
  882. padding: 10px;
  883. display: table-cell;
  884. vertical-align: middle;
  885. }
  886. #sec03 #sec03-table .table .sec03-table-text h1 {
  887. font-size: 20px;
  888. margin: 0;
  889. font-weight: 900;
  890. }
  891. #sec03 #sec03-table .table .sec03-table-text p {
  892. margin: 0;
  893. color: #9b9b9b;
  894. }
  895. #sec03-moblie {
  896. position: relative;
  897. }
  898. #sec03-moblie .arrow-table {
  899. position: fixed;
  900. width: 25px;
  901. right: 15px;
  902. bottom: 250px;
  903. z-index: 6;
  904. }
  905. @media screen and (max-width: 350px) {
  906. #sec03-moblie .arrow-table {
  907. right: 10px;
  908. bottom: 200px;
  909. }
  910. }
  911. #sec03-moblie .sec03-table-title,
  912. #sec03-moblie .sec03-table-title2 {
  913. font-family: 微軟正黑體;
  914. font-weight: 900;
  915. font-size: 14px;
  916. display: inline-block;
  917. color: #9b9b9b;
  918. }
  919. @media screen and (max-width: 350px) {
  920. #sec03-moblie .sec03-table-title,
  921. #sec03-moblie .sec03-table-title2 {
  922. font-size: 12px;
  923. }
  924. }
  925. #sec03-moblie .contant-toggle {
  926. display: inline-block;
  927. color: #000;
  928. padding-bottom: 10px;
  929. border-bottom: 2px solid #000;
  930. }
  931. #sec03-moblie #sec03-slider {
  932. padding-top: 5vw;
  933. }
  934. #sec03-moblie #sec03-slider .slick-slide img {
  935. display: inline;
  936. }
  937. #sec03-moblie #sec03-slider #sec03-slider1,
  938. #sec03-moblie #sec03-slider #sec03-slider2 {
  939. margin-left: 10px;
  940. -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  941. box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  942. }
  943. @media screen and (max-width: 350px) {
  944. #sec03-moblie #sec03-slider #sec03-slider1,
  945. #sec03-moblie #sec03-slider #sec03-slider2 {
  946. margin: 0 5px;
  947. }
  948. }
  949. #sec03-moblie #sec03-slider .table th {
  950. font-size: 40px;
  951. display: table-cell;
  952. vertical-align: middle;
  953. padding: 15px;
  954. }
  955. @media screen and (max-width: 350px) {
  956. #sec03-moblie #sec03-slider .table th {
  957. font-size: 25px;
  958. }
  959. }
  960. #sec03-moblie #sec03-slider .table td {
  961. display: table-cell;
  962. vertical-align: middle;
  963. padding: 15px;
  964. padding: 10px 0;
  965. }
  966. @media screen and (max-width: 350px) {
  967. #sec03-moblie #sec03-slider .table td {
  968. padding: 0px;
  969. }
  970. }
  971. #sec03-moblie #sec03-slider .table td a {
  972. text-decoration: none;
  973. color: #000;
  974. }
  975. #sec03-moblie #sec03-slider .table img {
  976. width: 50px;
  977. }
  978. #sec03-moblie #sec03-slider .table .sec03-table-text {
  979. padding: 0px 0px 0px 3px;
  980. display: table-cell;
  981. vertical-align: middle;
  982. }
  983. @media screen and (max-width: 350px) {
  984. #sec03-moblie #sec03-slider .table .sec03-table-text {
  985. padding: 0px;
  986. }
  987. }
  988. #sec03-moblie #sec03-slider .table .sec03-table-text h1 {
  989. font-size: 14px;
  990. margin: 0;
  991. font-weight: 900;
  992. }
  993. #sec03-moblie #sec03-slider .table .sec03-table-text p {
  994. margin: 0;
  995. font-size: 12px;
  996. color: #9b9b9b;
  997. }
  998. @media screen and (min-width: 1025px) {
  999. #sec03-moblie {
  1000. display: none;
  1001. }
  1002. }
  1003. #sec04 {
  1004. padding-top: 5vw;
  1005. padding-bottom: 5vw;
  1006. background: #414141;
  1007. background-position: center center;
  1008. background-size: cover;
  1009. }
  1010. @media screen and (max-width: 767px) {
  1011. #sec04 {
  1012. display: none;
  1013. }
  1014. }
  1015. #sec04 .sec04-title {
  1016. padding-bottom: 1vw;
  1017. }
  1018. #sec04 .sec04-title h1 {
  1019. color: #fff;
  1020. font-size: 45px;
  1021. font-weight: 900;
  1022. padding: 10px 10px;
  1023. }
  1024. @media screen and (max-width: 767px) {
  1025. #sec04 .sec04-title h1 {
  1026. font-weight: 900;
  1027. font-size: 32px;
  1028. }
  1029. }
  1030. #sec04 .sec04-title hr {
  1031. width: 12vw;
  1032. height: 2px;
  1033. color: #fff !important;
  1034. margin: 10px;
  1035. opacity: 1 !important;
  1036. }
  1037. @media screen and (max-width: 767px) {
  1038. #sec04 .sec04-title hr {
  1039. width: 30vw;
  1040. }
  1041. }
  1042. #sec04 .learn-more {
  1043. width: 120px;
  1044. }
  1045. #sec04 #sec04-container {
  1046. background: -webkit-gradient(linear, left top, left bottom, color-stop(15%, #414141), color-stop(0%, #eee));
  1047. background: linear-gradient(180deg, #414141 15%, #eee 0%);
  1048. padding: 20px;
  1049. padding-bottom: 50px;
  1050. }
  1051. #sec04 #sec04-container .card {
  1052. border: none;
  1053. border-radius: 0%;
  1054. -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  1055. box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  1056. }
  1057. #sec04 #sec04-container .card img {
  1058. height: 150px;
  1059. -o-object-fit: cover;
  1060. object-fit: cover;
  1061. }
  1062. #sec04 #sec04-container .card .card-title {
  1063. font-weight: 900;
  1064. }
  1065. #sec04-moblie {
  1066. padding-top: 5vw;
  1067. padding-bottom: 5vw;
  1068. background: #414141;
  1069. position: relative;
  1070. overflow: hidden;
  1071. }
  1072. #sec04-moblie .arrow-table {
  1073. position: fixed;
  1074. width: 25px;
  1075. right: 15px;
  1076. bottom: 240px;
  1077. z-index: 6;
  1078. }
  1079. @media screen and (max-width: 350px) {
  1080. #sec04-moblie .arrow-table {
  1081. right: 10px;
  1082. }
  1083. }
  1084. #sec04-moblie .sec04-button {
  1085. text-align: center;
  1086. margin-top: -50px;
  1087. width: 85vw;
  1088. }
  1089. @media screen and (min-width: 1025px) {
  1090. #sec04-moblie .sec04-button {
  1091. display: none;
  1092. }
  1093. }
  1094. #sec04-moblie .sec04-button .mouse_scroll {
  1095. display: inline-block;
  1096. margin: 0 auto;
  1097. width: 24px;
  1098. -webkit-transform: rotate(90deg);
  1099. transform: rotate(90deg);
  1100. }
  1101. #sec04-moblie .sec04-button .testright {
  1102. -webkit-transform: rotate(180deg);
  1103. transform: rotate(180deg);
  1104. }
  1105. #sec04-moblie .sec04-button .m_scroll_arrows {
  1106. display: block;
  1107. width: 5px;
  1108. height: 5px;
  1109. /* IE 9 */
  1110. -webkit-transform: rotate(45deg);
  1111. /* Chrome, Safari, Opera */
  1112. transform: rotate(45deg);
  1113. border-right: 2px solid #fff;
  1114. border-bottom: 2px solid #fff;
  1115. margin: 0 0 3px 4px;
  1116. width: 16px;
  1117. height: 16px;
  1118. }
  1119. #sec04-moblie .sec04-button .unu {
  1120. margin-top: 1px;
  1121. }
  1122. #sec04-moblie .sec04-button .unu,
  1123. #sec04-moblie .sec04-button .doi,
  1124. #sec04-moblie .sec04-button .trei {
  1125. -webkit-animation: mouse-scroll 1s infinite;
  1126. animation: mouse-scroll 1s infinite;
  1127. }
  1128. #sec04-moblie .sec04-button .unu {
  1129. -webkit-animation-delay: 0.1s;
  1130. -moz-animation-delay: 0.1s;
  1131. -webkit-animation-direction: alternate;
  1132. animation-direction: alternate;
  1133. -webkit-animation-delay: alternate;
  1134. animation-delay: alternate;
  1135. }
  1136. #sec04-moblie .sec04-button .doi {
  1137. -webkit-animation-delay: 0.2s;
  1138. -moz-animation-delay: 0.2s;
  1139. -webkit-animation-direction: alternate;
  1140. animation-delay: 0.2s;
  1141. animation-direction: alternate;
  1142. margin-top: -6px;
  1143. }
  1144. #sec04-moblie .sec04-button .trei {
  1145. -webkit-animation-delay: 0.3s;
  1146. -moz-animation-delay: 0.3s;
  1147. -webkit-animation-direction: alternate;
  1148. animation-delay: 0.3s;
  1149. animation-direction: alternate;
  1150. margin-top: -6px;
  1151. }
  1152. #sec04-moblie .sec04-button .mouse {
  1153. height: 42px;
  1154. width: 24px;
  1155. border-radius: 14px;
  1156. -webkit-transform: none;
  1157. transform: none;
  1158. border: 2px solid #fff;
  1159. top: 170px;
  1160. }
  1161. #sec04-moblie .sec04-button .wheel {
  1162. height: 5px;
  1163. width: 2px;
  1164. display: block;
  1165. margin: 5px auto;
  1166. background: #fff;
  1167. position: relative;
  1168. height: 4px;
  1169. width: 4px;
  1170. border: 2px solid #fff;
  1171. border-radius: 8px;
  1172. }
  1173. #sec04-moblie .sec04-button .wheel {
  1174. -webkit-animation: mouse-wheel 0.6s linear infinite;
  1175. animation: mouse-wheel 0.8s linear infinite;
  1176. }
  1177. @-webkit-keyframes mouse-wheel {
  1178. 0% {
  1179. opacity: 1;
  1180. -webkit-transform: translateY(0);
  1181. transform: translateY(0);
  1182. }
  1183. 100% {
  1184. opacity: 0;
  1185. -webkit-transform: translateY(6px);
  1186. transform: translateY(6px);
  1187. }
  1188. }
  1189. @keyframes mouse-wheel {
  1190. 0% {
  1191. top: 1px;
  1192. }
  1193. 25% {
  1194. top: 5px;
  1195. }
  1196. 50% {
  1197. top: 15px;
  1198. }
  1199. 75% {
  1200. top: 5px;
  1201. }
  1202. 100% {
  1203. top: 1px;
  1204. }
  1205. }
  1206. @-webkit-keyframes mouse-scroll {
  1207. 0% {
  1208. opacity: 0;
  1209. }
  1210. 50% {
  1211. opacity: 0.5;
  1212. }
  1213. 100% {
  1214. opacity: 1;
  1215. }
  1216. }
  1217. @keyframes mouse-scroll {
  1218. 0% {
  1219. opacity: 0;
  1220. }
  1221. 50% {
  1222. opacity: 0.5;
  1223. }
  1224. 100% {
  1225. opacity: 1;
  1226. }
  1227. }
  1228. @media screen and (min-width: 1025px) {
  1229. #sec04-moblie {
  1230. display: none;
  1231. }
  1232. }
  1233. #sec04-moblie h1 {
  1234. color: #fff;
  1235. font-size: 45px;
  1236. font-weight: 900;
  1237. padding: 5px 10px;
  1238. }
  1239. @media screen and (max-width: 767px) {
  1240. #sec04-moblie h1 {
  1241. font-weight: 900;
  1242. font-size: 32px;
  1243. }
  1244. }
  1245. #sec04-moblie hr {
  1246. width: 30vw;
  1247. height: 2px;
  1248. color: #fff;
  1249. margin: 10px;
  1250. opacity: 1 !important;
  1251. }
  1252. #sec04-moblie #sec04-moblie-container {
  1253. padding-top: 10vw;
  1254. }
  1255. #sec04-moblie #sec04-moblie-container .col {
  1256. margin: 10px;
  1257. }
  1258. #sec04-moblie #sec04-moblie-container .col .card {
  1259. border-radius: 0%;
  1260. -webkit-box-shadow: 0 10px 1px rgba(155, 155, 155, 0.8);
  1261. box-shadow: 0 10px 1px rgba(155, 155, 155, 0.8);
  1262. }
  1263. #sec04-moblie #sec04-moblie-container .col .card img {
  1264. height: 150px;
  1265. -o-object-fit: cover;
  1266. object-fit: cover;
  1267. }
  1268. #sec04-moblie #sec04-moblie-container .col .card .card-title {
  1269. font-weight: 900;
  1270. }
  1271. #sec04-moblie #sec04-moblie-container .col .card .learn-more {
  1272. width: 120px;
  1273. }
  1274. #sec05 {
  1275. width: 85vw;
  1276. margin: 0 auto;
  1277. padding-top: 5vw;
  1278. padding-bottom: 5vw;
  1279. }
  1280. @media screen and (max-width: 767px) {
  1281. #sec05 {
  1282. display: none;
  1283. }
  1284. }
  1285. #sec05 h1 {
  1286. font-size: 45px;
  1287. font-weight: 900;
  1288. padding: 15px;
  1289. }
  1290. #sec05 #sec05-container #sec05-destop-slider .slick-prev:before,
  1291. #sec05 #sec05-container #sec05-destop-slider .slick-next:before {
  1292. opacity: 0;
  1293. }
  1294. #sec05 #sec05-container #sec05-destop-slider .slick-prev,
  1295. #sec05 #sec05-container #sec05-destop-slider .slick-next {
  1296. width: 40px;
  1297. height: 40px;
  1298. content: none;
  1299. }
  1300. #sec05 #sec05-container #sec05-destop-slider .slick-prev {
  1301. background-image: url(./img/arrow-table2.png);
  1302. background-repeat: no-repeat;
  1303. left: -40px;
  1304. }
  1305. #sec05 #sec05-container #sec05-destop-slider .slick-prev:hover, #sec05 #sec05-container #sec05-destop-slider .slick-prev:focus {
  1306. background-image: url(./img/arrow-table2.png);
  1307. background-repeat: no-repeat;
  1308. }
  1309. #sec05 #sec05-container #sec05-destop-slider .slick-next {
  1310. background-image: url(./img/arrow-table.png);
  1311. background-repeat: no-repeat;
  1312. right: -50px;
  1313. }
  1314. #sec05 #sec05-container #sec05-destop-slider .slick-next:hover, #sec05 #sec05-container #sec05-destop-slider .slick-next:focus {
  1315. background-image: url(./img/arrow-table.png);
  1316. background-repeat: no-repeat;
  1317. }
  1318. #sec05 #sec05-container .col {
  1319. margin: 5px;
  1320. }
  1321. #sec05 #sec05-container .card {
  1322. -webkit-box-shadow: 0 10px 1px rgba(155, 155, 155, 0.8);
  1323. box-shadow: 0 10px 1px rgba(155, 155, 155, 0.8);
  1324. }
  1325. #sec05-moblie {
  1326. padding-top: 5vw;
  1327. padding-bottom: 10vw;
  1328. overflow: hidden;
  1329. }
  1330. @media screen and (min-width: 1025px) {
  1331. #sec05-moblie {
  1332. display: none;
  1333. }
  1334. }
  1335. #sec05-moblie #sec05-moblie-container {
  1336. position: relative;
  1337. }
  1338. #sec05-moblie #sec05-moblie-container .arrow-table {
  1339. position: fixed;
  1340. width: 25px;
  1341. right: 5px;
  1342. bottom: 300px;
  1343. z-index: 6;
  1344. }
  1345. @media screen and (max-width: 350px) {
  1346. #sec05-moblie #sec05-moblie-container .arrow-table {
  1347. right: 10px;
  1348. }
  1349. }
  1350. #sec05-moblie h1 {
  1351. font-size: 45px;
  1352. font-weight: 900;
  1353. padding: 15px;
  1354. }
  1355. #sec05-moblie #sec05-moblie-slider .sec05-moblie-box {
  1356. padding: 20px;
  1357. margin: 30px;
  1358. }
  1359. @media screen and (max-width: 400px) {
  1360. #sec05-moblie #sec05-moblie-slider .sec05-moblie-box {
  1361. padding: 5px;
  1362. margin: 20px;
  1363. }
  1364. }
  1365. #sec05-moblie #sec05-moblie-slider .sec05-moblie-box .card {
  1366. border: none;
  1367. }
  1368. #sec05-moblie .sec05-button {
  1369. text-align: center;
  1370. margin-top: -50px;
  1371. }
  1372. #sec05-moblie .sec05-button .mouse_scroll {
  1373. display: inline-block;
  1374. margin: 0 auto;
  1375. width: 24px;
  1376. -webkit-transform: rotate(90deg);
  1377. transform: rotate(90deg);
  1378. }
  1379. #sec05-moblie .sec05-button .testright {
  1380. -webkit-transform: rotate(180deg);
  1381. transform: rotate(180deg);
  1382. }
  1383. #sec05-moblie .sec05-button .m_scroll_arrows {
  1384. display: block;
  1385. width: 5px;
  1386. height: 5px;
  1387. /* IE 9 */
  1388. -webkit-transform: rotate(45deg);
  1389. /* Chrome, Safari, Opera */
  1390. transform: rotate(45deg);
  1391. border-right: 2px solid #000;
  1392. border-bottom: 2px solid #000;
  1393. margin: 0 0 3px 4px;
  1394. width: 16px;
  1395. height: 16px;
  1396. }
  1397. #sec05-moblie .sec05-button .unu {
  1398. margin-top: 1px;
  1399. }
  1400. #sec05-moblie .sec05-button .unu,
  1401. #sec05-moblie .sec05-button .doi,
  1402. #sec05-moblie .sec05-button .trei {
  1403. -webkit-animation: mouse-scroll 1s infinite;
  1404. animation: mouse-scroll 1s infinite;
  1405. }
  1406. #sec05-moblie .sec05-button .unu {
  1407. -webkit-animation-delay: 0.1s;
  1408. -moz-animation-delay: 0.1s;
  1409. -webkit-animation-direction: alternate;
  1410. animation-direction: alternate;
  1411. -webkit-animation-delay: alternate;
  1412. animation-delay: alternate;
  1413. }
  1414. #sec05-moblie .sec05-button .doi {
  1415. -webkit-animation-delay: 0.2s;
  1416. -moz-animation-delay: 0.2s;
  1417. -webkit-animation-direction: alternate;
  1418. animation-delay: 0.2s;
  1419. animation-direction: alternate;
  1420. margin-top: -6px;
  1421. }
  1422. #sec05-moblie .sec05-button .trei {
  1423. -webkit-animation-delay: 0.3s;
  1424. -moz-animation-delay: 0.3s;
  1425. -webkit-animation-direction: alternate;
  1426. animation-delay: 0.3s;
  1427. animation-direction: alternate;
  1428. margin-top: -6px;
  1429. }
  1430. #sec05-moblie .sec05-button .mouse {
  1431. height: 42px;
  1432. width: 24px;
  1433. border-radius: 14px;
  1434. -webkit-transform: none;
  1435. transform: none;
  1436. border: 2px solid #000;
  1437. top: 170px;
  1438. }
  1439. #sec05-moblie .sec05-button .wheel {
  1440. height: 5px;
  1441. width: 2px;
  1442. display: block;
  1443. margin: 5px auto;
  1444. background: #000;
  1445. position: relative;
  1446. height: 4px;
  1447. width: 4px;
  1448. border: 2px solid #000;
  1449. border-radius: 8px;
  1450. }
  1451. #sec05-moblie .sec05-button .wheel {
  1452. -webkit-animation: mouse-wheel 0.6s linear infinite;
  1453. animation: mouse-wheel 0.8s linear infinite;
  1454. }
  1455. @-webkit-keyframes mouse-wheel {
  1456. 0% {
  1457. opacity: 1;
  1458. -webkit-transform: translateY(0);
  1459. transform: translateY(0);
  1460. }
  1461. 100% {
  1462. opacity: 0;
  1463. -webkit-transform: translateY(6px);
  1464. transform: translateY(6px);
  1465. }
  1466. }
  1467. @keyframes mouse-wheel {
  1468. 0% {
  1469. top: 1px;
  1470. }
  1471. 25% {
  1472. top: 5px;
  1473. }
  1474. 50% {
  1475. top: 15px;
  1476. }
  1477. 75% {
  1478. top: 5px;
  1479. }
  1480. 100% {
  1481. top: 1px;
  1482. }
  1483. }
  1484. @-webkit-keyframes mouse-scroll {
  1485. 0% {
  1486. opacity: 0;
  1487. }
  1488. 50% {
  1489. opacity: 0.5;
  1490. }
  1491. 100% {
  1492. opacity: 1;
  1493. }
  1494. }
  1495. @keyframes mouse-scroll {
  1496. 0% {
  1497. opacity: 0;
  1498. }
  1499. 50% {
  1500. opacity: 0.5;
  1501. }
  1502. 100% {
  1503. opacity: 1;
  1504. }
  1505. }
  1506. #sec06 {
  1507. width: 100vw;
  1508. padding-top: 5vw;
  1509. padding-bottom: 10vw;
  1510. background: #525252;
  1511. }
  1512. @media screen and (max-width: 767px) {
  1513. #sec06 {
  1514. background: #313131;
  1515. }
  1516. }
  1517. #sec06 .sec06-button {
  1518. text-align: center;
  1519. width: 75vw;
  1520. }
  1521. @media screen and (min-width: 1025px) {
  1522. #sec06 .sec06-button {
  1523. display: none;
  1524. }
  1525. }
  1526. #sec06 .sec06-button .mouse_scroll {
  1527. display: inline-block;
  1528. margin: 0 auto;
  1529. width: 24px;
  1530. -webkit-transform: rotate(90deg);
  1531. transform: rotate(90deg);
  1532. }
  1533. #sec06 .sec06-button .testright {
  1534. -webkit-transform: rotate(180deg);
  1535. transform: rotate(180deg);
  1536. }
  1537. #sec06 .sec06-button .m_scroll_arrows {
  1538. display: block;
  1539. width: 5px;
  1540. height: 5px;
  1541. /* IE 9 */
  1542. -webkit-transform: rotate(45deg);
  1543. /* Chrome, Safari, Opera */
  1544. transform: rotate(45deg);
  1545. border-right: 2px solid #fff;
  1546. border-bottom: 2px solid #fff;
  1547. margin: 0 0 3px 4px;
  1548. width: 16px;
  1549. height: 16px;
  1550. }
  1551. #sec06 .sec06-button .unu {
  1552. margin-top: 1px;
  1553. }
  1554. #sec06 .sec06-button .unu,
  1555. #sec06 .sec06-button .doi,
  1556. #sec06 .sec06-button .trei {
  1557. -webkit-animation: mouse-scroll 1s infinite;
  1558. animation: mouse-scroll 1s infinite;
  1559. }
  1560. #sec06 .sec06-button .unu {
  1561. -webkit-animation-delay: 0.1s;
  1562. -moz-animation-delay: 0.1s;
  1563. -webkit-animation-direction: alternate;
  1564. animation-direction: alternate;
  1565. -webkit-animation-delay: alternate;
  1566. animation-delay: alternate;
  1567. }
  1568. #sec06 .sec06-button .doi {
  1569. -webkit-animation-delay: 0.2s;
  1570. -moz-animation-delay: 0.2s;
  1571. -webkit-animation-direction: alternate;
  1572. animation-delay: 0.2s;
  1573. animation-direction: alternate;
  1574. margin-top: -6px;
  1575. }
  1576. #sec06 .sec06-button .trei {
  1577. -webkit-animation-delay: 0.3s;
  1578. -moz-animation-delay: 0.3s;
  1579. -webkit-animation-direction: alternate;
  1580. animation-delay: 0.3s;
  1581. animation-direction: alternate;
  1582. margin-top: -6px;
  1583. }
  1584. #sec06 .sec06-button .mouse {
  1585. height: 42px;
  1586. width: 24px;
  1587. border-radius: 14px;
  1588. -webkit-transform: none;
  1589. transform: none;
  1590. border: 2px solid #fff;
  1591. top: 170px;
  1592. }
  1593. #sec06 .sec06-button .wheel {
  1594. height: 5px;
  1595. width: 2px;
  1596. display: block;
  1597. margin: 5px auto;
  1598. background: #fff;
  1599. position: relative;
  1600. height: 4px;
  1601. width: 4px;
  1602. border: 2px solid #fff;
  1603. border-radius: 8px;
  1604. }
  1605. #sec06 .sec06-button .wheel {
  1606. -webkit-animation: mouse-wheel 0.6s linear infinite;
  1607. animation: mouse-wheel 0.8s linear infinite;
  1608. }
  1609. @-webkit-keyframes mouse-wheel {
  1610. 0% {
  1611. opacity: 1;
  1612. -webkit-transform: translateY(0);
  1613. transform: translateY(0);
  1614. }
  1615. 100% {
  1616. opacity: 0;
  1617. -webkit-transform: translateY(6px);
  1618. transform: translateY(6px);
  1619. }
  1620. }
  1621. @keyframes mouse-wheel {
  1622. 0% {
  1623. top: 1px;
  1624. }
  1625. 25% {
  1626. top: 5px;
  1627. }
  1628. 50% {
  1629. top: 15px;
  1630. }
  1631. 75% {
  1632. top: 5px;
  1633. }
  1634. 100% {
  1635. top: 1px;
  1636. }
  1637. }
  1638. @-webkit-keyframes mouse-scroll {
  1639. 0% {
  1640. opacity: 0;
  1641. }
  1642. 50% {
  1643. opacity: 0.5;
  1644. }
  1645. 100% {
  1646. opacity: 1;
  1647. }
  1648. }
  1649. @keyframes mouse-scroll {
  1650. 0% {
  1651. opacity: 0;
  1652. }
  1653. 50% {
  1654. opacity: 0.5;
  1655. }
  1656. 100% {
  1657. opacity: 1;
  1658. }
  1659. }
  1660. #sec06 h1 {
  1661. font-size: 45px;
  1662. font-weight: 900;
  1663. padding: 15px;
  1664. color: #fff;
  1665. }
  1666. #sec06 hr {
  1667. width: 12vw;
  1668. height: 2px;
  1669. color: #fff;
  1670. margin: 10px;
  1671. opacity: 1 !important;
  1672. }
  1673. @media screen and (max-width: 767px) {
  1674. #sec06 hr {
  1675. width: 30vw;
  1676. }
  1677. }
  1678. #sec06 #sec06-container {
  1679. width: 80vw;
  1680. }
  1681. #sec06 #sec06-container .slick-prev:before,
  1682. #sec06 #sec06-container .slick-next:before {
  1683. opacity: 0;
  1684. }
  1685. #sec06 #sec06-container .slick-prev,
  1686. #sec06 #sec06-container .slick-next {
  1687. width: 40px;
  1688. height: 40px;
  1689. content: none;
  1690. }
  1691. #sec06 #sec06-container .slick-prev {
  1692. background-image: url(./img/sec06/sec06-arrow-2.png);
  1693. background-repeat: no-repeat;
  1694. left: -40px;
  1695. }
  1696. #sec06 #sec06-container .slick-prev:hover, #sec06 #sec06-container .slick-prev:focus {
  1697. background-image: url(./img/sec06/sec06-arrow-2.png);
  1698. background-repeat: no-repeat;
  1699. }
  1700. #sec06 #sec06-container .slick-next {
  1701. background-image: url(./img/sec06/sec06-arrow.png);
  1702. background-repeat: no-repeat;
  1703. right: -50px;
  1704. }
  1705. #sec06 #sec06-container .slick-next:hover, #sec06 #sec06-container .slick-next:focus {
  1706. background-image: url(./img/sec06/sec06-arrow.png);
  1707. background-repeat: no-repeat;
  1708. }
  1709. #sec06 #sec06-container .card {
  1710. margin: 10px;
  1711. height: 500px;
  1712. display: inline-block;
  1713. border-radius: 0%;
  1714. -webkit-box-shadow: 0 10px 1px rgba(155, 155, 155, 0.8);
  1715. box-shadow: 0 10px 1px rgba(155, 155, 155, 0.8);
  1716. }
  1717. #sec06 #sec06-container .card img {
  1718. height: 150px;
  1719. -o-object-fit: cover;
  1720. object-fit: cover;
  1721. }
  1722. #sec06 #sec06-container .card .card-title {
  1723. font-weight: 900;
  1724. font-size: 18px;
  1725. }
  1726. #sec06 #sec06-container .card .learn-more {
  1727. width: 120px;
  1728. }
  1729. #sec06 #sec06-container .learn-more {
  1730. width: 120px;
  1731. }
  1732. #sec07 {
  1733. padding-top: 5vw;
  1734. padding-bottom: 5vw;
  1735. }
  1736. @media screen and (max-width: 767px) {
  1737. #sec07 {
  1738. display: none;
  1739. }
  1740. }
  1741. #sec07 .NFT-Collections-Sales-Volume {
  1742. width: 80vw;
  1743. margin: 0 auto;
  1744. margin-top: -120px;
  1745. margin-bottom: 50px;
  1746. }
  1747. @media screen and (max-width: 767px) {
  1748. #sec07 .NFT-Collections-Sales-Volume {
  1749. display: none;
  1750. }
  1751. }
  1752. #sec07 .NFT-Collections-Sales-Volume h1 {
  1753. padding: 0;
  1754. margin: 0;
  1755. font-weight: normal;
  1756. color: #fff;
  1757. letter-spacing: 3px;
  1758. font-size: 50px;
  1759. }
  1760. #sec07 .table {
  1761. text-align: center;
  1762. }
  1763. #sec07 .table thead tr th {
  1764. border: 0;
  1765. }
  1766. #sec07 .table td {
  1767. display: table-cell;
  1768. vertical-align: middle;
  1769. text-align: left;
  1770. }
  1771. #sec07 .table td img {
  1772. width: 50px;
  1773. }
  1774. #sec07 .table td .data-line {
  1775. width: 100px;
  1776. }
  1777. #sec07 .table th {
  1778. display: table-cell;
  1779. vertical-align: middle;
  1780. text-align: left;
  1781. }
  1782. #sec07 .table img {
  1783. padding: 5px;
  1784. }
  1785. #sec07 .sec07-table-button {
  1786. text-align: right;
  1787. }
  1788. #sec07 .sec07-table-button .data-button {
  1789. text-align: left;
  1790. border-radius: 25px;
  1791. width: 10vw;
  1792. padding: 5px 20px;
  1793. color: #000;
  1794. background: url(./img/play.png) 80% 40% no-repeat scroll transparent;
  1795. background-size: 18px 18px;
  1796. background-color: #fff;
  1797. border: 1px solid #000;
  1798. }
  1799. #sec07-moblir-title {
  1800. background: #414141;
  1801. }
  1802. @media screen and (min-width: 1025px) {
  1803. #sec07-moblir-title {
  1804. display: none;
  1805. }
  1806. }
  1807. #sec07-moblir-title #sec07-container {
  1808. padding: 15px;
  1809. font-weight: 900;
  1810. color: #fff;
  1811. }
  1812. #sec07-moblie {
  1813. padding-top: 5vw;
  1814. padding-bottom: 5vw;
  1815. }
  1816. @media screen and (min-width: 1025px) {
  1817. #sec07-moblie {
  1818. display: none;
  1819. }
  1820. }
  1821. #sec07-moblie .table {
  1822. text-align: center;
  1823. }
  1824. #sec07-moblie .table thead tr th {
  1825. border: 0;
  1826. }
  1827. #sec07-moblie .table td {
  1828. display: table-cell;
  1829. vertical-align: middle;
  1830. text-align-last: left;
  1831. font-size: 14px;
  1832. }
  1833. #sec07-moblie .table td img {
  1834. width: 30px;
  1835. }
  1836. #sec07-moblie .table td .data-line {
  1837. width: 80px;
  1838. }
  1839. #sec07-moblie .table th {
  1840. display: table-cell;
  1841. vertical-align: middle;
  1842. text-align: left;
  1843. font-size: 14px;
  1844. }
  1845. #sec07-moblie .table img {
  1846. padding: 5px;
  1847. width: 50px;
  1848. }
  1849. #sec07-moblie .sec07-table-button {
  1850. text-align: right;
  1851. }
  1852. #sec07-moblie .sec07-table-button .data-button {
  1853. text-align: left;
  1854. border-radius: 25px;
  1855. width: 35vw;
  1856. padding: 5px 20px;
  1857. color: #000;
  1858. background: url(./img/play.png) 80% 40% no-repeat scroll transparent;
  1859. background-size: 18px 18px;
  1860. background-color: #fff;
  1861. border: 1px solid #000;
  1862. }
  1863. #sec08 {
  1864. padding-bottom: 5vw;
  1865. background: -webkit-gradient(linear, left top, left bottom, color-stop(35%, #414141), color-stop(30%, transparent), color-stop(55%, #fff));
  1866. background: linear-gradient(180deg, #414141 35%, transparent 30%, #fff 55%);
  1867. position: relative;
  1868. }
  1869. @media screen and (max-width: 767px) {
  1870. #sec08 {
  1871. background: -webkit-gradient(linear, left top, left bottom, color-stop(100%, #414141), color-stop(30%, transparent), color-stop(55%, #fff));
  1872. background: linear-gradient(180deg, #414141 100%, transparent 30%, #fff 55%);
  1873. padding-top: 10vw;
  1874. }
  1875. }
  1876. #sec08 #sec08-container-box {
  1877. background-size: contain;
  1878. background-repeat: no-repeat;
  1879. background-blend-mode: overlay;
  1880. }
  1881. #sec08 #sec08-title {
  1882. background: #414141;
  1883. padding-top: 5vw;
  1884. }
  1885. #sec08 #sec08-title .col-lg-9 {
  1886. position: relative;
  1887. }
  1888. #sec08 #sec08-title .col-lg-9 #OUR-PARTNER {
  1889. position: absolute;
  1890. top: -10px;
  1891. right: 0vw;
  1892. }
  1893. @media screen and (max-width: 767px) {
  1894. #sec08 #sec08-title .col-lg-9 #OUR-PARTNER {
  1895. top: 0px;
  1896. }
  1897. }
  1898. #sec08 #sec08-title .col-lg-9 #OUR-PARTNER h5 {
  1899. font-size: 5em;
  1900. opacity: 0.8;
  1901. /* 文字的距離 */
  1902. /* 通常搭配內距左邊 */
  1903. text-align: center;
  1904. letter-spacing: 10px;
  1905. font-weight: 900;
  1906. color: #f5f5f5;
  1907. }
  1908. @media screen and (max-width: 767px) {
  1909. #sec08 #sec08-title .col-lg-9 #OUR-PARTNER h5 {
  1910. font-size: 20px;
  1911. letter-spacing: 5px;
  1912. text-align: left;
  1913. }
  1914. }
  1915. #sec08 #sec08-title h1 {
  1916. padding: 10px;
  1917. color: #fff;
  1918. font-size: 45px;
  1919. font-weight: 900;
  1920. }
  1921. @media screen and (max-width: 767px) {
  1922. #sec08 #sec08-title h1 {
  1923. font-weight: 900;
  1924. font-size: 32px;
  1925. padding: 0px;
  1926. }
  1927. }
  1928. #sec08 #sec08-title hr {
  1929. width: 5vw;
  1930. height: 5px;
  1931. color: #fff;
  1932. margin: 10px auto;
  1933. opacity: 1 !important;
  1934. }
  1935. @media screen and (max-width: 767px) {
  1936. #sec08 #sec08-title hr {
  1937. width: 30vw;
  1938. }
  1939. }
  1940. #sec08 #sec08-container .card {
  1941. border: none;
  1942. -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  1943. box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  1944. }
  1945. @media screen and (max-width: 767px) {
  1946. #sec08 #sec08-container .card {
  1947. padding-top: 5vw;
  1948. padding-bottom: 5vw;
  1949. }
  1950. }
  1951. #sec08 #sec08-container .card .adv4 {
  1952. display: -webkit-box;
  1953. display: -ms-flexbox;
  1954. display: flex;
  1955. -webkit-box-align: center;
  1956. -ms-flex-align: center;
  1957. align-items: center;
  1958. }
  1959. #sec08 #sec08-container .card .adv4 img {
  1960. -webkit-box-align: center;
  1961. -ms-flex-align: center;
  1962. align-items: center;
  1963. -o-object-fit: cover;
  1964. object-fit: cover;
  1965. }
  1966. #sec08 #sec08-container .sec08-1 {
  1967. padding: 0px !important;
  1968. }
  1969. #sec08 #sec08-container .col-3 img {
  1970. padding: 40px;
  1971. -o-object-fit: cover;
  1972. object-fit: cover;
  1973. }
  1974. @media screen and (max-width: 767px) {
  1975. #sec08 #sec08-container .col-3 img {
  1976. padding: 3px;
  1977. }
  1978. }
  1979. #sec09 {
  1980. background: #414141;
  1981. padding-bottom: 5vw;
  1982. }
  1983. #sec09 .col-lg-9 {
  1984. position: relative;
  1985. }
  1986. #sec09 .col-lg-9 #TRADING {
  1987. position: absolute;
  1988. right: -10px;
  1989. top: -180px;
  1990. }
  1991. @media screen and (max-width: 767px) {
  1992. #sec09 .col-lg-9 #TRADING {
  1993. top: 5px;
  1994. right: 30px;
  1995. }
  1996. }
  1997. @media screen and (max-width: 350px) {
  1998. #sec09 .col-lg-9 #TRADING {
  1999. right: 20px;
  2000. }
  2001. }
  2002. #sec09 .col-lg-9 #TRADING h5 {
  2003. font-size: calc(7rem + (1.3-1.2) * ((100vw - 600px) / (1200 - 600)));
  2004. opacity: 0.8;
  2005. /* 文字的距離 */
  2006. /* 通常搭配內距左邊 */
  2007. letter-spacing: 10px;
  2008. font-weight: 900;
  2009. color: #f5f5f5;
  2010. }
  2011. @media screen and (max-width: 767px) {
  2012. #sec09 .col-lg-9 #TRADING h5 {
  2013. font-size: 20px;
  2014. letter-spacing: 5px;
  2015. text-align: left;
  2016. }
  2017. }
  2018. #sec09 #sec09-container-box {
  2019. background-size: contain;
  2020. background-repeat: no-repeat;
  2021. background-blend-mode: overlay;
  2022. }
  2023. #sec09 #sec09-title {
  2024. padding-top: 15vw;
  2025. }
  2026. #sec09 #sec09-title h1 {
  2027. color: #fff;
  2028. font-size: 45px;
  2029. font-weight: 900;
  2030. padding: 5px 10px;
  2031. }
  2032. @media screen and (max-width: 767px) {
  2033. #sec09 #sec09-title h1 {
  2034. font-weight: 900;
  2035. font-size: 32px;
  2036. padding: 5px 0px;
  2037. }
  2038. }
  2039. #sec09 #sec09-title hr {
  2040. width: 5vw;
  2041. height: 5px;
  2042. color: #000;
  2043. margin: 10px auto;
  2044. opacity: 1 !important;
  2045. }
  2046. @media screen and (max-width: 767px) {
  2047. #sec09 #sec09-title hr {
  2048. width: 30vw;
  2049. }
  2050. }
  2051. #sec09 #sec09-container .card {
  2052. background: #000;
  2053. padding-top: 5vw;
  2054. padding-bottom: 5vw;
  2055. border: none;
  2056. }
  2057. #sec09 #sec09-container .card .sec09-7 {
  2058. width: 200px;
  2059. }
  2060. #sec09 #sec09-container .card .adv4 {
  2061. display: -webkit-box;
  2062. display: -ms-flexbox;
  2063. display: flex;
  2064. -webkit-box-align: center;
  2065. -ms-flex-align: center;
  2066. align-items: center;
  2067. }
  2068. #sec09 #sec09-container .card .adv4 img {
  2069. -webkit-box-align: center;
  2070. -ms-flex-align: center;
  2071. align-items: center;
  2072. }
  2073. #sec09 #sec09-container .col-3 {
  2074. margin: 10px 0;
  2075. }
  2076. @media screen and (max-width: 1025px) {
  2077. #sec09 #sec09-container .col-3 {
  2078. padding: 15px;
  2079. }
  2080. }
  2081. @media screen and (max-width: 767px) {
  2082. #sec09 #sec09-container .col-3 {
  2083. padding: 5px;
  2084. }
  2085. }
  2086. #sec09 #sec09-container .col-3 img {
  2087. -o-object-fit: cover;
  2088. object-fit: cover;
  2089. }
  2090. @media screen and (max-width: 767px) {
  2091. #sec09 #sec09-container .col-3 img {
  2092. padding: 0px;
  2093. }
  2094. }
  2095. #sec09 #sec09-container .sec09-1 {
  2096. padding: 70px;
  2097. }
  2098. @media screen and (max-width: 767px) {
  2099. #sec09 #sec09-container .sec09-1 {
  2100. padding: 20px;
  2101. }
  2102. }
  2103. #footer {
  2104. width: 100vw;
  2105. text-align: center;
  2106. line-height: 2;
  2107. background: #313131;
  2108. color: #fff;
  2109. }
  2110. #footer .footer-link {
  2111. padding-top: 3vw;
  2112. }
  2113. #footer .footer-link a {
  2114. text-decoration: none;
  2115. font-size: 20px;
  2116. padding: 10px;
  2117. color: #fff;
  2118. }
  2119. @media screen and (max-width: 767px) {
  2120. #footer .footer-link a {
  2121. font-size: 14px;
  2122. padding: 0 !important;
  2123. }
  2124. }
  2125. @media screen and (max-width: 400px) {
  2126. #footer .footer-link a {
  2127. font-size: 12px;
  2128. }
  2129. }
  2130. #footer .footer-link a span {
  2131. font-size: 28px;
  2132. }
  2133. @media screen and (max-width: 767px) {
  2134. #footer .footer-link a span {
  2135. font-size: 16px;
  2136. }
  2137. }
  2138. @media screen and (max-width: 350px) {
  2139. #footer .footer-link a span {
  2140. font-size: 14px;
  2141. }
  2142. }
  2143. #footer .text {
  2144. padding-top: 3vw;
  2145. }
  2146. #footer .text a {
  2147. text-decoration: none;
  2148. color: #fff;
  2149. }
  2150. #footer .text h2 {
  2151. font-size: 20px;
  2152. margin: 10px;
  2153. letter-spacing: 1px;
  2154. }
  2155. @media screen and (max-width: 767px) {
  2156. #footer .text h2 {
  2157. display: block;
  2158. font-size: 16px;
  2159. margin: 8px;
  2160. }
  2161. }
  2162. #footer .text p {
  2163. margin: 0 !important;
  2164. }
  2165. #footer .text img {
  2166. width: 30px;
  2167. margin: 10px;
  2168. -webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(138deg) brightness(103%) contrast(102%);
  2169. filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(138deg) brightness(103%) contrast(102%);
  2170. -webkit-transition: 0.3s;
  2171. transition: 0.3s;
  2172. }
  2173. #footer .text img:hover {
  2174. opacity: 0.6;
  2175. }
  2176. #sec10 p {
  2177. line-height: 2;
  2178. font-size: 16px;
  2179. }
  2180. /*# sourceMappingURL=style.css.map */