style.css 74 KB

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