style.scss 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501
  1. *{
  2. margin: 0;
  3. padding: 0;
  4. box-sizing: border-box;
  5. }
  6. $mainclolr:#9C27B0;
  7. .playbutton {
  8. cursor: pointer;
  9. position:absolute;
  10. top:50%;
  11. left: 50%;
  12. transform: translate(-50%, -50%);
  13. z-index: 101;
  14. transition: 0.3s;
  15. &:hover{
  16. opacity: 0.8;
  17. }
  18. }
  19. .learn_more{
  20. margin-top: 20px;
  21. padding: 5px;
  22. background: none;
  23. color:#CC7DB7;
  24. border-radius: 5px;
  25. border:1px solid #CC7DB7;
  26. // border:none;
  27. transition: 0.3s;
  28. &:hover{
  29. color:#fff;
  30. background:#CC7DB7;
  31. }
  32. }
  33. .course_name_title{
  34. font-size: 1.2rem;
  35. color:$mainclolr;
  36. font-weight: 900;
  37. }
  38. .course_name_text{
  39. color:#CC7DB7;
  40. margin-bottom: 5px;
  41. font-size: 1rem;
  42. }
  43. .Discounted_price{
  44. font-size: 24px;
  45. font-weight: 600;
  46. }
  47. .violetbeauty_content_title{
  48. color:$mainclolr;
  49. font-weight: 900;
  50. font-size: 1.8rem;
  51. }
  52. .violetbeauty_content_text{
  53. color:$mainclolr;
  54. font-size: 1rem;
  55. }
  56. .violetbeauty_content_text{
  57. color:$mainclolr;
  58. font-size: 1rem;
  59. }
  60. .features_title{
  61. font-weight: 900;
  62. letter-spacing: 2px;
  63. font: 1.9375em "微軟正黑體";
  64. line-height: 25px;
  65. text-align: center;
  66. color: #452767;
  67. width: 100%;
  68. margin-bottom: 1rem;
  69. }
  70. .Down_line{
  71. width: 300px;
  72. object-fit: cover;
  73. }
  74. .card{
  75. border: none;
  76. .card-body{
  77. padding: 0.1rem;
  78. margin-top: 15px;
  79. }
  80. }
  81. .violetbeauty_CTA{
  82. margin-top: 50px;
  83. padding: 10px 50px;
  84. border:1px solid #CC7DB7;
  85. background:#fff;
  86. border-radius: 30px;
  87. color:#9C27B0;
  88. position: relative;
  89. transition: 0.5s;
  90. a{
  91. color:#9C27B0;
  92. }
  93. .cta_flower{
  94. position: absolute;
  95. width: 60px;
  96. left: -25px;
  97. bottom:-10px;
  98. transition: 0.5s;
  99. }
  100. &:hover{
  101. background:#9C27B0;
  102. a{
  103. color:#fff;
  104. }
  105. color:#fff;
  106. .cta_flower{
  107. transform: rotate(360deg);
  108. }
  109. }
  110. }
  111. .navbar-nav {
  112. flex-direction: row;
  113. width: 70%;
  114. margin: 0 auto;
  115. .nav-link {
  116. font: 1.2rem 微軟正黑體;
  117. font-weight: 600;
  118. padding: 0.5rem 1rem;
  119. margin:5px 1rem;
  120. text-align: center;
  121. color: $mainclolr;
  122. letter-spacing: 0;
  123. border-bottom: 5px solid #ffffff;
  124. box-sizing: border-box;
  125. cursor: pointer;
  126. }
  127. }
  128. .slick-dotted.slick-slider{
  129. margin-bottom: 0px !important;
  130. }
  131. .sec_content_right_text{
  132. margin-top: 30px;
  133. p{
  134. margin-bottom: 0.5rem;
  135. color:$mainclolr;
  136. }
  137. }
  138. .banner-slide{
  139. .slick-dots {
  140. bottom:30px;
  141. li{
  142. // margin-top: -50px;
  143. // 上右下左
  144. button:before{
  145. font-size: 16px;
  146. font-weight: 900;
  147. top:15px;
  148. content: '○';
  149. color:#82689d;
  150. }
  151. }
  152. li.slick-active button:before {
  153. opacity: .75;
  154. color: #82689d;;
  155. content: '●';
  156. }
  157. }
  158. }
  159. .violetbeauty_sec00{
  160. background: #F8F2F6;
  161. padding:80px 0;
  162. position: relative;
  163. .sec00_img1{
  164. left:0px;
  165. bottom:20px;
  166. width: 300px;
  167. opacity: 0.8;
  168. }
  169. .sec00_img2{
  170. right:0px;
  171. top:50px;
  172. width: 180px;
  173. opacity: 0.8;
  174. transform: rotate(-90deg);
  175. }
  176. .sec00_img3{
  177. right:100px;
  178. bottom:80px;
  179. width: 60px;
  180. opacity: 0.5;
  181. transform: rotate(-30deg);
  182. }
  183. .violetbeauty_sec00_box{
  184. width: 80%;
  185. margin:0 auto ;
  186. .sec00_content_left_img{
  187. width: 60%;
  188. box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  189. }
  190. .sec00_content_right{
  191. text-align: center;
  192. margin-top: 50px;
  193. }
  194. }
  195. }
  196. .violetbeauty_sec01,.violetbeauty_sec02{
  197. padding:50px 0;
  198. .slick-prev:before{
  199. content:"";
  200. }
  201. .slick-next:before{
  202. content:"";
  203. }
  204. .violetbeauty_sec01_box{
  205. width: 80%;
  206. margin: 0 auto;
  207. }
  208. .violetbeauty_sec01_content{
  209. margin-top: 30px;
  210. .sec01_slide_item{
  211. padding: 20px;
  212. img{
  213. // width: 180px;
  214. // height: 250px;
  215. object-fit: cover;
  216. margin: 0 auto;
  217. }
  218. }
  219. }
  220. }
  221. .violetbeauty_sec02{
  222. background: #F8F2F6;
  223. .card{
  224. background: #F8F2F6;
  225. }
  226. }
  227. .violetbeauty_sec03{
  228. padding: 100px 0;
  229. margin-bottom: 50px;
  230. position: relative;
  231. .sec03_img1{
  232. position: absolute;
  233. left:50px;
  234. top:50px;
  235. opacity: 0.5;
  236. }
  237. .sec03_img2{
  238. position: absolute;
  239. right:-120px;
  240. width: 400px;
  241. top:40%;
  242. opacity: 0.5;
  243. transform: rotate(-70deg);
  244. }
  245. .sec03_img3{
  246. position: absolute;
  247. right:0px;
  248. opacity: 0.5;
  249. width: 250px;
  250. bottom: 50px;
  251. transform:scaleX(-1) rotate(19deg);
  252. -moz-transform:scaleX(-1) rotate(19deg);
  253. -webkit-transform:scaleX(-1) rotate(19deg);
  254. -o-transform:scaleX(-1) rotate(19deg);
  255. }
  256. .violetbeauty_sec03_box{
  257. width: 75%;
  258. margin: 0 auto;
  259. .violetbeauty_sec03_content{
  260. margin-top: 100px;
  261. }
  262. }
  263. .violetbeauty_contract_form{
  264. width: 70%;
  265. margin: 0 auto;
  266. #submitbutton{
  267. width: 100%;
  268. margin: 16px auto;
  269. border: none;
  270. padding: 16px 12px;
  271. background: #CC7DB7;
  272. color: #fff;
  273. font-size: 20px;
  274. border-radius: .25rem;
  275. text-align: center;
  276. vertical-align: middle;
  277. &:hover {
  278. color: #CC7DB7;
  279. background-color: #fff;
  280. border:1px solid #CC7DB7;
  281. }
  282. }
  283. #time,#datepicker{
  284. width: 45%;
  285. padding: 10px 15px;
  286. border-radius: 3px;
  287. margin: 10px 0px;
  288. border: 1px solid rgba(0, 0, 0, 0.3);
  289. }
  290. #time{
  291. margin-left: 8%;
  292. }
  293. #phone,
  294. #email,
  295. #loc,
  296. #name,
  297. #course_name {
  298. width: 100%;
  299. padding: 10px 15px;
  300. font-size: 16px;
  301. border-radius: 3px;
  302. margin: 10px 0px;
  303. border: 1px solid rgba(0, 0, 0, 0.3);
  304. }
  305. }
  306. }
  307. // .violetbeauty_sec01{
  308. // width: 80%;
  309. // margin:0 auto ;
  310. // .features{
  311. // width: 100%;
  312. // height: auto;
  313. // margin: 17px 0 0 0;
  314. // }
  315. // .violetbeauty_sec01_content{
  316. // margin-top: 30px;
  317. // .sec01_content_left{
  318. // width: 85%;
  319. // .sec01_content_box{
  320. // margin-top: 20%;
  321. // .sec01_content_title_1{
  322. // color: #452767;
  323. // font-size: 3.5rem;
  324. // text-align: center;
  325. // }
  326. // .sec01_content_title_2{
  327. // h3{
  328. // font-size:1.6rem ;
  329. // text-align: center;
  330. // color: #452767;
  331. // letter-spacing: 3px;
  332. // font-weight:600
  333. // }
  334. // }
  335. // .sec01_content_text{
  336. // p{
  337. // font-size: 1.2rem;
  338. // text-align: center;
  339. // }
  340. // }
  341. // }
  342. // }
  343. // .sec01_content_right{
  344. // .sec01_content_img{
  345. // width: 100%;
  346. // // margin: 0 auto;
  347. // }
  348. // }
  349. // }
  350. // }
  351. .logo{
  352. img{
  353. width: 300px;
  354. // height: 66px;
  355. object-fit: cover;
  356. }
  357. }
  358. .violetbeauty_logo{
  359. width: 300px;
  360. object-fit: cover;
  361. }
  362. #footer{
  363. background:#EDCDE1;
  364. .footer_content_box{
  365. padding: 100px 0;
  366. margin: 0 auto;
  367. width: 80%;
  368. }
  369. h3{
  370. font-size: 1.5rem;
  371. }
  372. p{
  373. margin-bottom: 0.5rem;
  374. }
  375. .socail-link{
  376. a{
  377. margin-right: 8px;
  378. }
  379. }
  380. .footer_text{
  381. margin-top: 15px;
  382. }
  383. .socail-link{
  384. margin-top: 30px;
  385. }
  386. .store_name{
  387. color:$mainclolr;
  388. }
  389. .store{
  390. width: 85%;
  391. margin: 0 auto;
  392. p{
  393. margin-top: 10px;
  394. }
  395. }
  396. .footer_logo{
  397. img{
  398. position: relative;
  399. right:30px;
  400. width: 300px;
  401. object-fit: cover;
  402. }
  403. }
  404. .google_map{
  405. width: 47%;
  406. padding: 15px 20px;
  407. background: none;
  408. color:#3F51B5;
  409. border:1px solid #3F51B5;
  410. border-radius: 3px;
  411. transition: 0.3s;
  412. overflow-x: hidden;
  413. a{
  414. text-decoration: none;
  415. color:#3F51B5;
  416. }
  417. &:hover{
  418. background: #3F51B5;
  419. color:#fff;
  420. a{
  421. color:#fff;
  422. }
  423. }
  424. }
  425. .line_Reserve{
  426. width: 45%;
  427. margin-left: 5%;
  428. padding: 15px 20px;
  429. background: #52B448;
  430. border:1px solid #52B448;
  431. color:#fff;
  432. border: none;
  433. border-radius: 3px;
  434. transition: 0.3s;
  435. overflow-x: hidden;
  436. a{
  437. color:#fff;
  438. text-decoration: none;
  439. }
  440. &:hover{
  441. background: #fff;
  442. color:#52B448;
  443. a{
  444. color:#52B448;
  445. }
  446. }
  447. }
  448. }
  449. .gototop {
  450. position: fixed;
  451. right: 3vw;
  452. bottom: 0.5vw;
  453. z-index: 10;
  454. border-radius: 80px;
  455. font-size: 32px;
  456. color:#fff;
  457. width: 50px;
  458. height: 50px;
  459. background: #CC7DB7;
  460. cursor: pointer;
  461. }