style.css 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575
  1. @charset "UTF-8";
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. -webkit-box-sizing: border-box;
  6. box-sizing: border-box;
  7. }
  8. #top {
  9. overflow-x: hidden !important;
  10. }
  11. .violetbeauty_line {
  12. margin: 0px auto 20px;
  13. border: 1px solid transparent;
  14. background: -webkit-gradient(linear, left top, right top, from(white), to(white)), -webkit-gradient(linear, left top, right top, from(#f4c0d0), to(#d76478));
  15. background: linear-gradient(to right, white, white), linear-gradient(to right, #f4c0d0, #d76478);
  16. background-clip: padding-box, border-box;
  17. background-origin: padding-box, border-box;
  18. width: 50px;
  19. opacity: 1 !important;
  20. }
  21. .playbutton {
  22. cursor: pointer;
  23. position: absolute;
  24. top: 50%;
  25. left: 50%;
  26. -webkit-transform: translate(-50%, -50%);
  27. transform: translate(-50%, -50%);
  28. z-index: 101;
  29. -webkit-transition: 0.3s;
  30. transition: 0.3s;
  31. }
  32. .playbutton:hover {
  33. opacity: 0.8;
  34. }
  35. .likeSee__state {
  36. display: -webkit-box;
  37. display: -ms-flexbox;
  38. display: flex;
  39. -webkit-box-pack: justify;
  40. -ms-flex-pack: justify;
  41. justify-content: space-between;
  42. -webkit-box-align: center;
  43. -ms-flex-align: center;
  44. align-items: center;
  45. }
  46. .likeSee__state img {
  47. width: 40px;
  48. }
  49. .learn_more {
  50. margin-top: 20px;
  51. padding: 5px;
  52. background: none;
  53. color: #f4c0d0;
  54. border-radius: 5px;
  55. border: 1px solid #f4c0d0;
  56. -webkit-transition: 0.3s;
  57. transition: 0.3s;
  58. }
  59. .learn_more:hover {
  60. color: #fff;
  61. background: #f4c0d0;
  62. }
  63. .course_name_title {
  64. font-size: 1.2rem;
  65. color: #ef7086;
  66. font-weight: 900;
  67. }
  68. .course_name_text {
  69. color: #f4c0d0;
  70. margin-bottom: 5px;
  71. font-size: 1rem;
  72. }
  73. .Discounted_price {
  74. font-size: 24px;
  75. font-weight: 600;
  76. }
  77. .violetbeauty_content_title {
  78. color: #ef7086;
  79. font-weight: 900;
  80. font-size: 1.8rem;
  81. }
  82. .violetbeauty_content_text {
  83. color: #ef7086;
  84. font-size: 1rem;
  85. }
  86. .features_title {
  87. font-weight: 300 !important;
  88. letter-spacing: 2px;
  89. font: 1.9375em "微軟正黑體";
  90. line-height: 25px;
  91. text-align: center;
  92. color: #333;
  93. width: 100%;
  94. margin-bottom: 1rem;
  95. }
  96. .Down_line {
  97. width: 300px;
  98. -o-object-fit: cover;
  99. object-fit: cover;
  100. }
  101. .card {
  102. border: none;
  103. }
  104. .card .card-body {
  105. padding: 0.1rem;
  106. margin-top: 15px;
  107. }
  108. .violetbeauty_CTA {
  109. margin-top: 50px;
  110. padding: 10px 50px;
  111. border: 1px solid #f4c0d0;
  112. background: #fff;
  113. border-radius: 30px;
  114. color: #ef7086;
  115. position: relative;
  116. -webkit-transition: 0.5s;
  117. transition: 0.5s;
  118. }
  119. .violetbeauty_CTA a {
  120. color: #ef7086;
  121. }
  122. .violetbeauty_CTA .cta_flower {
  123. position: absolute;
  124. width: 60px;
  125. left: -25px;
  126. bottom: -10px;
  127. -webkit-transition: 0.5s;
  128. transition: 0.5s;
  129. }
  130. .violetbeauty_CTA:hover {
  131. background: #ef7086;
  132. color: #fff;
  133. }
  134. .violetbeauty_CTA:hover a {
  135. color: #fff;
  136. }
  137. .violetbeauty_CTA:hover .cta_flower {
  138. -webkit-transform: rotate(360deg);
  139. transform: rotate(360deg);
  140. }
  141. .navbar-nav {
  142. -webkit-box-orient: horizontal;
  143. -webkit-box-direction: normal;
  144. -ms-flex-direction: row;
  145. flex-direction: row;
  146. width: 70%;
  147. margin: 0 auto;
  148. }
  149. .navbar-nav .nav-link {
  150. font: 1.2rem 微軟正黑體;
  151. font-weight: 300 !important;
  152. padding: 0.5rem 1rem;
  153. margin: 5px 1rem;
  154. text-align: center;
  155. color: #9f9f9f;
  156. color: #000;
  157. letter-spacing: 0;
  158. border-bottom: 5px solid #ffffff;
  159. -webkit-box-sizing: border-box;
  160. box-sizing: border-box;
  161. cursor: pointer;
  162. }
  163. .navbar-nav .nav-link:hover {
  164. color: #ef7086;
  165. }
  166. #Navigation {
  167. background: #fff;
  168. opacity: 1;
  169. height: 4.5vw;
  170. width: 100vw !important;
  171. position: fixed;
  172. z-index: 100;
  173. }
  174. @media screen and (max-width: 1024px) {
  175. #Navigation {
  176. height: 8vw;
  177. }
  178. }
  179. @media screen and (max-width: 767px) {
  180. #Navigation {
  181. height: 20vw;
  182. position: fixed;
  183. z-index: 5;
  184. }
  185. }
  186. #Navigation .menu {
  187. font-size: 28px;
  188. margin-top: 30px;
  189. color: #6c6c6c;
  190. }
  191. #Navigation #nav {
  192. width: 100vw;
  193. margin: 0 auto;
  194. }
  195. #Navigation #logo {
  196. padding-top: 1vw;
  197. }
  198. @media screen and (max-width: 767px) {
  199. #Navigation #logo {
  200. padding-top: 2vw;
  201. }
  202. }
  203. #Navigation #logo img {
  204. width: 120px;
  205. }
  206. #Navigation #link {
  207. text-align: right;
  208. padding: 1.5vw 3vw;
  209. }
  210. @media screen and (max-width: 767px) {
  211. #Navigation #link {
  212. display: none;
  213. }
  214. }
  215. #Navigation #link a {
  216. text-decoration: none;
  217. color: #000;
  218. letter-spacing: 1px;
  219. font-size: 0.9rem;
  220. font-weight: 600;
  221. cursor: pointer;
  222. padding: 15px;
  223. position: relative;
  224. }
  225. #Navigation #link a :hover {
  226. opacity: 0.8;
  227. }
  228. #Navigation #link a:after {
  229. content: "";
  230. display: block;
  231. width: 80%;
  232. height: 3px;
  233. background-color: #fff;
  234. position: absolute;
  235. left: 12%;
  236. bottom: 0;
  237. -webkit-transition: all 0.3s;
  238. transition: all 0.3s;
  239. opacity: 0;
  240. }
  241. #Navigation #link a:hover:after {
  242. width: 80%;
  243. opacity: 1;
  244. }
  245. #menu-box {
  246. top: 20vw;
  247. height: 25vh;
  248. width: 100vw;
  249. position: fixed;
  250. z-index: 998;
  251. overflow: hidden;
  252. display: none;
  253. background: rgba(0, 0, 0, 0.8);
  254. }
  255. @media screen and (min-width: 1025px) {
  256. #menu-box {
  257. display: none;
  258. }
  259. }
  260. @media screen and (max-width: 767px) {
  261. #menu-box {
  262. height: 100vh;
  263. }
  264. }
  265. @media screen and (max-width: 350px) {
  266. #menu-box {
  267. height: 55vh;
  268. }
  269. }
  270. #menu-box hr {
  271. display: inline-block;
  272. margin: 0px auto !important;
  273. width: 55vw;
  274. background: #fff;
  275. opacity: 1 !important;
  276. }
  277. #menu-box #menu-box2 {
  278. width: 100vw;
  279. height: 25vh;
  280. background-color: #f4c0d0;
  281. opacity: 0.95;
  282. z-index: 999;
  283. text-align: center;
  284. }
  285. @media screen and (max-width: 767px) {
  286. #menu-box #menu-box2 {
  287. height: 45vh;
  288. }
  289. }
  290. @media screen and (max-width: 350px) {
  291. #menu-box #menu-box2 {
  292. height: 55vh;
  293. }
  294. }
  295. #menu-box #menu-box2 #menu-link {
  296. display: -ms-grid;
  297. display: grid;
  298. -ms-grid-columns: (1fr)[4];
  299. grid-template-columns: repeat(4, 1fr);
  300. width: 60vw;
  301. margin: 0 auto;
  302. }
  303. #menu-box #menu-box2 .menu-logo {
  304. opacity: 1;
  305. }
  306. #menu-box #menu-box2 .menu-logo img {
  307. width: 7vw;
  308. }
  309. #menu-box #menu-box2 a {
  310. display: inline-block;
  311. text-decoration: none;
  312. color: #fff;
  313. font-size: 16px;
  314. margin-top: 20px;
  315. font-weight: 900;
  316. }
  317. @media screen and (max-width: 767px) {
  318. #menu-box #menu-box2 a {
  319. margin-top: 4vw;
  320. }
  321. }
  322. #menu-box #menu-box2 .menu-text {
  323. width: 70vw;
  324. text-align: center;
  325. margin-bottom: 10px;
  326. border-bottom: 1px solid #fff;
  327. margin: 0 auto;
  328. padding-bottom: 10px;
  329. }
  330. @media screen and (max-width: 767px) {
  331. #menu-box #menu-box2 .menu-text {
  332. margin-bottom: 5px !important;
  333. }
  334. }
  335. .slick-dotted.slick-slider {
  336. margin-bottom: 0px !important;
  337. }
  338. .sec_content_right_text {
  339. margin-top: 30px;
  340. }
  341. .sec_content_right_text p {
  342. margin-bottom: 0.5rem;
  343. color: #ef7086;
  344. }
  345. @media screen and (max-width: 767px) {
  346. .banner-slide {
  347. padding-top: 60px;
  348. }
  349. }
  350. .news {
  351. margin: 100px 0px;
  352. }
  353. .news .news-slide {
  354. width: 80%;
  355. margin: 0 auto;
  356. }
  357. @media screen and (max-width: 767px) {
  358. .news .news-slide {
  359. width: 95%;
  360. }
  361. }
  362. .news .news-slide .slick-prev, .news .news-slide .slick-next {
  363. width: 50px;
  364. -o-object-fit: cover;
  365. object-fit: cover;
  366. height: auto;
  367. -webkit-filter: invert(52%) sepia(75%) saturate(602%) hue-rotate(306deg) brightness(102%) contrast(87%);
  368. filter: invert(52%) sepia(75%) saturate(602%) hue-rotate(306deg) brightness(102%) contrast(87%);
  369. }
  370. @media screen and (max-width: 767px) {
  371. .news .news-slide .slick-prev, .news .news-slide .slick-next {
  372. width: 30px;
  373. }
  374. }
  375. .news .news-slide .slick-prev {
  376. left: -50px;
  377. }
  378. @media screen and (max-width: 767px) {
  379. .news .news-slide .slick-prev {
  380. display: none;
  381. }
  382. }
  383. .news .news-slide .slick-next {
  384. right: -50px;
  385. }
  386. @media screen and (max-width: 767px) {
  387. .news .news-slide .slick-next {
  388. display: none;
  389. }
  390. }
  391. .news .news-slide .banner-slide-item img {
  392. padding: 10px;
  393. width: 100% !important;
  394. }
  395. @media screen and (max-width: 767px) {
  396. .news .news-slide .banner-slide-item img {
  397. padding: 0px;
  398. }
  399. }
  400. .news .news-slide .slick-dots {
  401. bottom: -15px;
  402. }
  403. .news .news-slide .slick-dots li button:before {
  404. font-size: 16px;
  405. font-weight: 900;
  406. top: 15px;
  407. content: "○";
  408. color: #ef7086;
  409. }
  410. .news .news-slide .slick-dots li.slick-active button:before {
  411. opacity: 0.75;
  412. color: #ef7086;
  413. content: "●";
  414. }
  415. .violetbeauty_sec00 {
  416. overflow: hidden;
  417. background-size: cover;
  418. background-attachment: fixed;
  419. background-position: left center;
  420. background-repeat: no-repeat;
  421. position: relative;
  422. }
  423. @media screen and (max-width: 767px) {
  424. .violetbeauty_sec00 {
  425. background-position: right center;
  426. }
  427. }
  428. .violetbeauty_sec00 .bg {
  429. background: rgba(0, 0, 0, 0.4);
  430. width: 100%;
  431. height: 100%;
  432. padding: 100px 0;
  433. }
  434. .violetbeauty_sec00 hr {
  435. background: #fff;
  436. opacity: 1 !important;
  437. height: 1px;
  438. width: 40px;
  439. margin: 15px auto;
  440. }
  441. .violetbeauty_sec00 p {
  442. color: #fff;
  443. }
  444. .violetbeauty_sec00 h4 {
  445. color: #fff;
  446. }
  447. .violetbeauty_sec00 .violetbeauty_sec00_box {
  448. width: 80%;
  449. margin: 0 auto;
  450. }
  451. @media screen and (max-width: 767px) {
  452. .violetbeauty_sec00 .violetbeauty_sec00_box {
  453. width: 90%;
  454. }
  455. }
  456. .violetbeauty_sec00 .violetbeauty_sec00_box .sec00_content_left_img {
  457. width: 70%;
  458. -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  459. box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  460. }
  461. @media screen and (max-width: 767px) {
  462. .violetbeauty_sec00 .violetbeauty_sec00_box .sec00_content_left_img {
  463. width: 80%;
  464. }
  465. }
  466. .violetbeauty_sec00 .violetbeauty_sec00_box .sec00_content_right {
  467. text-align: center;
  468. margin-top: 30px;
  469. }
  470. .violetbeauty_sec00 .violetbeauty_sec00_box .sec00_content_right p {
  471. margin-bottom: 0.8rem;
  472. }
  473. .sec01_course {
  474. background: #fff2f1;
  475. }
  476. .sec02_course {
  477. background: #fff;
  478. }
  479. .sec01_course, .sec02_course {
  480. padding: 50px 0;
  481. }
  482. .sec01_course .sec01_course_box, .sec02_course .sec01_course_box {
  483. width: 80%;
  484. margin: 0 auto;
  485. background: #fff;
  486. }
  487. @media screen and (max-width: 767px) {
  488. .sec01_course .sec01_course_box, .sec02_course .sec01_course_box {
  489. width: 90%;
  490. }
  491. }
  492. .sec01_course .sec01_course_box .sec01_course_text, .sec02_course .sec01_course_box .sec01_course_text {
  493. text-align: center;
  494. padding: 15px 5.6%;
  495. margin-top: 80px;
  496. }
  497. @media screen and (max-width: 767px) {
  498. .sec01_course .sec01_course_box .sec01_course_text, .sec02_course .sec01_course_box .sec01_course_text {
  499. padding: 15px 2.8%;
  500. }
  501. }
  502. .sec01_course .sec01_course_box .sec01_course_text del, .sec02_course .sec01_course_box .sec01_course_text del {
  503. font-size: 1.2rem;
  504. color: #888;
  505. }
  506. .sec01_course .sec01_course_box .sec01_course_text span, .sec02_course .sec01_course_box .sec01_course_text span {
  507. color: #ef7086;
  508. font-size: 1.6rem;
  509. }
  510. @media screen and (max-width: 767px) {
  511. .sec01_course .sec01_course_box .sec01_course_text span, .sec02_course .sec01_course_box .sec01_course_text span {
  512. font-size: 1.4rem;
  513. }
  514. }
  515. .sec01_course .sec01_course_box .sec01_course_text p, .sec02_course .sec01_course_box .sec01_course_text p {
  516. font-size: 14px;
  517. color: #555;
  518. padding: 15px 0 0;
  519. }
  520. .sec01_course .sec01_course_box .sec01_course_text .submitbutton, .sec02_course .sec01_course_box .sec01_course_text .submitbutton {
  521. width: 80%;
  522. margin: 20px auto;
  523. border: none;
  524. padding: 10px 12px;
  525. background: #f4c0d0;
  526. color: #fff;
  527. font-size: 20px;
  528. border-radius: 0.25rem;
  529. text-align: center;
  530. vertical-align: middle;
  531. border: 1px solid #f4c0d0;
  532. }
  533. .sec01_course .sec01_course_box .sec01_course_text .submitbutton:hover, .sec02_course .sec01_course_box .sec01_course_text .submitbutton:hover {
  534. color: #f4c0d0;
  535. background-color: #fff;
  536. border: 1px solid #f4c0d0;
  537. }
  538. .violetbeauty_sec03 {
  539. padding: 100px 0;
  540. margin-bottom: 50px;
  541. position: relative;
  542. }
  543. .violetbeauty_sec03 .sec03_img1 {
  544. position: absolute;
  545. left: 50px;
  546. top: 50px;
  547. opacity: 0.5;
  548. }
  549. .violetbeauty_sec03 .sec03_img2 {
  550. position: absolute;
  551. right: -120px;
  552. width: 400px;
  553. top: 40%;
  554. opacity: 0.5;
  555. -webkit-transform: rotate(-70deg);
  556. transform: rotate(-70deg);
  557. }
  558. .violetbeauty_sec03 .sec03_img3 {
  559. position: absolute;
  560. right: 0px;
  561. opacity: 0.5;
  562. width: 250px;
  563. bottom: 50px;
  564. transform: scaleX(-1) rotate(19deg);
  565. -moz-transform: scaleX(-1) rotate(19deg);
  566. -webkit-transform: scaleX(-1) rotate(19deg);
  567. -o-transform: scaleX(-1) rotate(19deg);
  568. }
  569. .violetbeauty_sec03 .violetbeauty_sec03_box {
  570. width: 75%;
  571. margin: 0 auto;
  572. }
  573. @media screen and (max-width: 767px) {
  574. .violetbeauty_sec03 .violetbeauty_sec03_box {
  575. width: 90%;
  576. }
  577. }
  578. .violetbeauty_sec03 .violetbeauty_sec03_box .violetbeauty_sec03_content {
  579. margin-top: 100px;
  580. }
  581. @media screen and (max-width: 767px) {
  582. .violetbeauty_sec03 .violetbeauty_sec03_box .violetbeauty_sec03_content {
  583. margin-top: 50px;
  584. }
  585. }
  586. .violetbeauty_sec03 .violetbeauty_contract_form {
  587. width: 70%;
  588. margin: 0 auto;
  589. }
  590. @media screen and (max-width: 767px) {
  591. .violetbeauty_sec03 .violetbeauty_contract_form {
  592. width: 90%;
  593. }
  594. }
  595. .violetbeauty_sec03 .violetbeauty_contract_form .submitbutton {
  596. width: 100%;
  597. margin: 16px auto;
  598. border: none;
  599. padding: 16px 12px;
  600. background: #f4c0d0;
  601. color: #fff;
  602. font-size: 20px;
  603. border-radius: 0.25rem;
  604. text-align: center;
  605. vertical-align: middle;
  606. }
  607. .violetbeauty_sec03 .violetbeauty_contract_form .submitbutton:hover {
  608. color: #f4c0d0;
  609. background-color: #fff;
  610. border: 1px solid #f4c0d0;
  611. }
  612. .violetbeauty_sec03 .violetbeauty_contract_form #time,
  613. .violetbeauty_sec03 .violetbeauty_contract_form #datepicker {
  614. width: 45%;
  615. padding: 10px 15px;
  616. border-radius: 3px;
  617. margin: 10px 0px;
  618. border: 1px solid rgba(0, 0, 0, 0.3);
  619. }
  620. .violetbeauty_sec03 .violetbeauty_contract_form #time {
  621. margin-left: 8%;
  622. }
  623. .violetbeauty_sec03 .violetbeauty_contract_form #phone,
  624. .violetbeauty_sec03 .violetbeauty_contract_form #email,
  625. .violetbeauty_sec03 .violetbeauty_contract_form #loc,
  626. .violetbeauty_sec03 .violetbeauty_contract_form #name,
  627. .violetbeauty_sec03 .violetbeauty_contract_form #course_name {
  628. width: 100%;
  629. padding: 10px 15px;
  630. font-size: 16px;
  631. border-radius: 3px;
  632. margin: 10px 0px;
  633. border: 1px solid rgba(0, 0, 0, 0.3);
  634. }
  635. .logo img {
  636. width: 300px;
  637. -o-object-fit: cover;
  638. object-fit: cover;
  639. }
  640. .violetbeauty_logo {
  641. width: 300px;
  642. -o-object-fit: cover;
  643. object-fit: cover;
  644. }
  645. #footer {
  646. background: #fff2f1;
  647. color: #6c6c6c;
  648. }
  649. #footer .phone {
  650. -webkit-transform: rotate(100deg);
  651. transform: rotate(100deg);
  652. }
  653. #footer .footer_content_box {
  654. padding: 50px 0;
  655. margin: 0 auto;
  656. width: 80%;
  657. }
  658. @media screen and (max-width: 767px) {
  659. #footer .footer_content_box {
  660. width: 90%;
  661. }
  662. }
  663. #footer .footer_content_box li a {
  664. width: 100%;
  665. text-align: left;
  666. color: #6c6c6c;
  667. }
  668. #footer .footer_content_box .border_line {
  669. margin-top: 30px;
  670. background: #ccc;
  671. opacity: 1 !important;
  672. margin-bottom: 0.5rem;
  673. }
  674. #footer .socail-link a {
  675. margin-right: 8px;
  676. }
  677. @media screen and (max-width: 767px) {
  678. #footer .footer_text_box {
  679. width: 80%;
  680. margin: 0 auto;
  681. }
  682. }
  683. #footer .footer_text_box h3 {
  684. font-size: 1rem;
  685. }
  686. #footer .footer_text_box h3,
  687. #footer .footer_text_box p {
  688. letter-spacing: 2px;
  689. }
  690. #footer .footer_text_box .navbar-nav {
  691. width: auto;
  692. }
  693. #footer .footer_text_box .navbar-nav .nav-link {
  694. margin: 0;
  695. padding: 0;
  696. border-bottom: none;
  697. -webkit-transition: all 0.2s;
  698. transition: all 0.2s;
  699. font-size: 1rem;
  700. text-align: center;
  701. }
  702. #footer .footer_text_box .navbar-nav .nav-link:hover {
  703. color: #ef7086;
  704. }
  705. #footer .footer_text_box .navbar-nav .nav-item {
  706. margin-right: 20px;
  707. margin-bottom: 10px;
  708. min-width: auto;
  709. }
  710. #footer .footer_text {
  711. margin-top: 15px;
  712. }
  713. @media screen and (max-width: 767px) {
  714. #footer .footer_text {
  715. font-size: 0.85rem;
  716. }
  717. }
  718. #footer .socail-link {
  719. margin-top: 30px;
  720. }
  721. @media screen and (max-width: 767px) {
  722. #footer .socail-link {
  723. text-align: center;
  724. }
  725. }
  726. #footer .socail-link a {
  727. -webkit-transition: 0.3s;
  728. transition: 0.3s;
  729. }
  730. #footer .socail-link a:hover {
  731. opacity: 0.8;
  732. }
  733. #footer .store {
  734. width: 85%;
  735. margin: 0 auto;
  736. }
  737. @media screen and (max-width: 767px) {
  738. #footer .store {
  739. margin-top: 50px;
  740. }
  741. }
  742. #footer .store p {
  743. margin-top: 10px;
  744. }
  745. #footer .store h3 {
  746. font-size: 1.5rem;
  747. font-weight: 300 !important;
  748. }
  749. #footer .store p {
  750. margin-bottom: 0.5rem;
  751. font-weight: 300 !important;
  752. }
  753. #footer .footer_logo img {
  754. position: relative;
  755. right: 30px;
  756. width: 300px;
  757. -o-object-fit: cover;
  758. object-fit: cover;
  759. }
  760. #footer .google_map {
  761. width: 47%;
  762. padding: 15px 20px;
  763. background: none;
  764. color: #3f51b5;
  765. border: 1px solid #3f51b5;
  766. border-radius: 3px;
  767. -webkit-transition: 0.3s;
  768. transition: 0.3s;
  769. overflow-x: hidden;
  770. }
  771. #footer .google_map a {
  772. text-decoration: none;
  773. color: #3f51b5;
  774. }
  775. #footer .google_map:hover {
  776. background: #3f51b5;
  777. color: #fff;
  778. }
  779. #footer .google_map:hover a {
  780. color: #fff;
  781. }
  782. #footer .line_Reserve {
  783. width: 45%;
  784. margin-left: 5%;
  785. padding: 15px 20px;
  786. background: #52b448;
  787. border: 1px solid #52b448;
  788. color: #fff;
  789. border: none;
  790. border-radius: 3px;
  791. -webkit-transition: 0.3s;
  792. transition: 0.3s;
  793. overflow-x: hidden;
  794. }
  795. #footer .line_Reserve a {
  796. color: #fff;
  797. text-decoration: none;
  798. }
  799. #footer .line_Reserve:hover {
  800. background: #fff;
  801. color: #52b448;
  802. }
  803. #footer .line_Reserve:hover a {
  804. color: #52b448;
  805. }
  806. #footer-secondary {
  807. background: #fff2f1;
  808. color: #6c6c6c;
  809. }
  810. #footer-secondary .footer_content_box {
  811. padding: 50px 0;
  812. margin: 0 auto;
  813. width: 80%;
  814. }
  815. @media (max-width: 767px) {
  816. #footer-secondary .footer_content_box {
  817. width: 85%;
  818. }
  819. }
  820. #footer-secondary h3 {
  821. font-size: 1rem;
  822. }
  823. #footer-secondary h3,
  824. #footer-secondary p {
  825. letter-spacing: 2px;
  826. }
  827. #footer-secondary li a {
  828. width: 100%;
  829. text-align: left;
  830. color: #6c6c6c;
  831. }
  832. #footer-secondary .navbar-nav {
  833. width: auto;
  834. }
  835. #footer-secondary .navbar-nav .nav-link {
  836. margin: 0;
  837. padding: 0;
  838. border-bottom: none;
  839. -webkit-transition: all 0.2s;
  840. transition: all 0.2s;
  841. }
  842. #footer-secondary .navbar-nav .nav-link:hover {
  843. color: #ef7086;
  844. }
  845. #footer-secondary .navbar-nav .nav-item {
  846. min-width: 105px;
  847. }
  848. @media (max-width: 767px) {
  849. #footer-secondary .navbar-nav .nav-item {
  850. min-width: auto;
  851. width: 90px;
  852. }
  853. #footer-secondary .navbar-nav .nav-link {
  854. font-size: 1rem;
  855. text-align: center;
  856. }
  857. }
  858. #footer-secondary .socail-link img {
  859. image-rendering: -webkit-optimize-contrast;
  860. -webkit-filter: invert(42%) sepia(0%) saturate(1863%) hue-rotate(226deg) brightness(100%) contrast(96%);
  861. filter: invert(42%) sepia(0%) saturate(1863%) hue-rotate(226deg) brightness(100%) contrast(96%);
  862. }
  863. #footer-secondary .socail-link img:hover {
  864. opacity: 0.8;
  865. }
  866. #footer-secondary .footer_text {
  867. margin-top: 15px;
  868. }
  869. @media (max-width: 767px) {
  870. #footer-secondary .footer_text p {
  871. font-size: 0.85rem;
  872. }
  873. }
  874. #footer-secondary .store_name {
  875. color: #ef7086;
  876. }
  877. #footer-secondary .store {
  878. width: 85%;
  879. margin: 0 auto;
  880. }
  881. #footer-secondary .store p {
  882. margin-top: 10px;
  883. }
  884. #footer-secondary .footer_logo img {
  885. position: relative;
  886. right: 30px;
  887. width: 250px;
  888. -o-object-fit: cover;
  889. object-fit: cover;
  890. }
  891. .gototop {
  892. position: fixed;
  893. right: 3vw;
  894. bottom: 0.5vw;
  895. z-index: 10;
  896. border-radius: 80px;
  897. font-size: 32px;
  898. color: #fff;
  899. width: 50px;
  900. height: 50px;
  901. background: #f4c0d0;
  902. cursor: pointer;
  903. }
  904. /* banner */
  905. .facial-banner,
  906. .massage-banner,
  907. .store-banner {
  908. padding: 150px 0;
  909. position: relative;
  910. background-size: cover;
  911. background-repeat: no-repeat;
  912. image-rendering: -webkit-optimize-contrast;
  913. }
  914. .facial-banner p,
  915. .massage-banner p,
  916. .store-banner p {
  917. position: absolute;
  918. right: 50%;
  919. -webkit-transform: translate(50%, 50%);
  920. transform: translate(50%, 50%);
  921. font-size: 40px;
  922. color: white;
  923. text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
  924. }
  925. /* 臉部課程-facial start */
  926. .facial-banner {
  927. background-image: url(/img/banner-facial.jpg);
  928. background-position: 25% 25%;
  929. }
  930. .facial-banner p {
  931. bottom: 45%;
  932. }
  933. .facial-content {
  934. margin: 100px auto;
  935. }
  936. .facial-content p {
  937. margin: 0;
  938. line-height: 32px;
  939. }
  940. .facial-content img {
  941. height: 250px;
  942. -o-object-fit: cover;
  943. object-fit: cover;
  944. }
  945. .facial-content button {
  946. display: none;
  947. padding: 7px 30px;
  948. position: absolute;
  949. bottom: -20px;
  950. right: 50%;
  951. -webkit-transform: translate(50%, 0);
  952. transform: translate(50%, 0);
  953. color: #ffffff;
  954. background-color: #ef7086;
  955. white-space: nowrap;
  956. font-weight: bold;
  957. -webkit-transition: all 0.3s;
  958. transition: all 0.3s;
  959. }
  960. @media screen and (max-width: 767px) {
  961. .facial-content button {
  962. display: block;
  963. }
  964. }
  965. .facial-content button::after {
  966. content: "";
  967. display: inline-block;
  968. vertical-align: middle;
  969. width: 8px;
  970. height: 8px;
  971. margin: 0 0 2px 10px;
  972. border: 1px solid #fff;
  973. border-left: 0 none;
  974. border-bottom: 0 none;
  975. -webkit-transform: rotate(45deg);
  976. transform: rotate(45deg);
  977. }
  978. .facial-content button:hover {
  979. color: #ffffff;
  980. background-color: #f4c0d0;
  981. }
  982. .facial-content .card {
  983. cursor: pointer;
  984. border: 1px solid #cccccc;
  985. }
  986. .facial-content .card .card-body {
  987. padding: 10px 20px 20px;
  988. }
  989. .facial-content .card:hover button {
  990. display: block;
  991. }
  992. .facial-content .card:hover .img-box img {
  993. -webkit-transform: scale(1.1, 1.1);
  994. transform: scale(1.1, 1.1);
  995. }
  996. .facial-content .badge {
  997. height: 30px;
  998. line-height: 1.9;
  999. background-color: #ef7086;
  1000. }
  1001. .facial-content .img-box {
  1002. overflow: hidden;
  1003. }
  1004. .facial-content .img-box img {
  1005. width: 100%;
  1006. height: auto;
  1007. -o-object-fit: contain;
  1008. object-fit: contain;
  1009. -webkit-transition: all 1s;
  1010. transition: all 1s;
  1011. image-rendering: -webkit-optimize-contrast;
  1012. }
  1013. .modal-header {
  1014. border-bottom: none !important;
  1015. }
  1016. .modal-body {
  1017. letter-spacing: 1px;
  1018. }
  1019. .modal-body p {
  1020. line-height: 32px;
  1021. }
  1022. .modal-body h5 {
  1023. font-size: 25px;
  1024. }
  1025. .modal-body img {
  1026. border-radius: 20px;
  1027. }
  1028. .modal-body .price-box span {
  1029. font-size: 18px;
  1030. font-weight: bold;
  1031. color: #ef7086;
  1032. }
  1033. .modal-body .price-box span:last-child {
  1034. font-size: 16px;
  1035. font-weight: normal;
  1036. text-decoration: line-through;
  1037. }
  1038. .modal-body .recommend-item {
  1039. display: -webkit-box;
  1040. display: -ms-flexbox;
  1041. display: flex;
  1042. -webkit-box-orient: vertical;
  1043. -webkit-box-direction: normal;
  1044. -ms-flex-direction: column;
  1045. flex-direction: column;
  1046. -webkit-box-align: center;
  1047. -ms-flex-align: center;
  1048. align-items: center;
  1049. -webkit-box-pack: center;
  1050. -ms-flex-pack: center;
  1051. justify-content: center;
  1052. border-top: 1px dashed #f4c0d0;
  1053. }
  1054. .modal-body .recommend-item span {
  1055. width: 100px;
  1056. padding: 10px;
  1057. margin: 25px 0 15px;
  1058. padding-left: 15px;
  1059. letter-spacing: 5px;
  1060. font-size: 16px;
  1061. color: #ffffff;
  1062. background-color: #ef7086;
  1063. }
  1064. .modal-body .recommend-item li {
  1065. margin: 5px 0;
  1066. }
  1067. .modal-body section {
  1068. height: 75%;
  1069. }
  1070. .time-box img {
  1071. width: 18px;
  1072. height: 18px;
  1073. margin-right: 5px;
  1074. image-rendering: -webkit-optimize-contrast;
  1075. }
  1076. .time-box p {
  1077. margin: 0;
  1078. font-size: 14px;
  1079. color: #ef7086;
  1080. }
  1081. .time-box span {
  1082. font-size: 20px;
  1083. font-weight: bold;
  1084. }
  1085. .modal-body img {
  1086. image-rendering: -webkit-optimize-contrast;
  1087. }
  1088. /* 臉部課程-facial end */
  1089. /* 門市資訊-store start */
  1090. .store-banner {
  1091. background-image: url(/img/banner-store.jpg);
  1092. background-position: 25% 30%;
  1093. }
  1094. .store-banner p {
  1095. bottom: 45%;
  1096. }
  1097. .store-content {
  1098. margin: 150px auto;
  1099. letter-spacing: 1px;
  1100. }
  1101. .store-content i {
  1102. color: #b2adae;
  1103. font-size: 20px;
  1104. }
  1105. .store-content h3 {
  1106. margin-bottom: 20px;
  1107. font-weight: bold;
  1108. color: #ef7086;
  1109. }
  1110. .store-content img {
  1111. width: 100%;
  1112. border-radius: 20px 0 0 20px;
  1113. }
  1114. @media (max-width: 767px) {
  1115. .store-content img {
  1116. border-radius: 20px 20px 0 0;
  1117. }
  1118. }
  1119. .store-content .info-box {
  1120. width: 270px;
  1121. margin: auto;
  1122. }
  1123. @media (max-width: 375px) {
  1124. .store-content .info-box {
  1125. width: 100%;
  1126. }
  1127. }
  1128. .store-content .Down_line {
  1129. width: 230px;
  1130. margin-top: -20px;
  1131. }
  1132. .store-content .row {
  1133. margin: 15%;
  1134. border: 1px solid #f4c0d0;
  1135. border-radius: 20px;
  1136. }
  1137. @media (max-width: 1200px) {
  1138. .store-content .row {
  1139. margin: 10%;
  1140. }
  1141. }
  1142. @media (max-width: 992px) {
  1143. .store-content .row {
  1144. margin: 0px;
  1145. }
  1146. }
  1147. .store-content .google_map {
  1148. width: 100%;
  1149. padding: 7px 15px;
  1150. margin-top: 1px;
  1151. background: none;
  1152. color: #3f51b5;
  1153. border: 1px solid #3f51b5;
  1154. border-radius: 3px;
  1155. -webkit-transition: 0.3s;
  1156. transition: 0.3s;
  1157. font-size: 15px;
  1158. letter-spacing: 1px;
  1159. overflow-x: hidden;
  1160. }
  1161. .store-content .google_map a {
  1162. text-decoration: none;
  1163. color: #3f51b5;
  1164. }
  1165. .store-content .google_map:hover {
  1166. background: #3f51b5;
  1167. color: #fff;
  1168. }
  1169. .store-content .google_map:hover a {
  1170. color: #fff;
  1171. }
  1172. .store-content .line_Reserve {
  1173. width: 100%;
  1174. margin-left: 10%;
  1175. padding: 8px 15px;
  1176. background: #52b448;
  1177. color: #fff;
  1178. border: 1px solid #52b448;
  1179. border-radius: 5px;
  1180. -webkit-transition: 0.3s;
  1181. transition: 0.3s;
  1182. font-size: 15px;
  1183. letter-spacing: 1px;
  1184. overflow-x: hidden;
  1185. }
  1186. .store-content .line_Reserve a {
  1187. color: #fff;
  1188. text-decoration: none;
  1189. }
  1190. .store-content .line_Reserve:hover {
  1191. background: #fff;
  1192. color: #52b448;
  1193. }
  1194. .store-content .line_Reserve:hover a {
  1195. color: #52b448;
  1196. }
  1197. @media (max-width: 575px) {
  1198. .store-content .line_Reserve {
  1199. margin-left: 0;
  1200. margin-top: 5%;
  1201. }
  1202. }
  1203. @media (max-width: 992px) {
  1204. .store-content p {
  1205. font-size: 0.9rem;
  1206. }
  1207. .store-content h3 {
  1208. font-size: 1.3rem;
  1209. }
  1210. }
  1211. /* 門市資訊-store end */
  1212. /* 身體課程-massage start */
  1213. .massage-banner {
  1214. background-image: url(/img/banner-massage.jpg);
  1215. background-position: center;
  1216. }
  1217. .massage-banner p {
  1218. bottom: 45%;
  1219. }
  1220. .massage-modal-item .modal-body .badge {
  1221. width: auto;
  1222. padding-left: 13px;
  1223. letter-spacing: 2px;
  1224. }
  1225. /* 身體課程-massage end */
  1226. /* 關於我們-about start */
  1227. .about-content {
  1228. margin-bottom: 100px;
  1229. }
  1230. .about-content p {
  1231. padding: 0 60px;
  1232. line-height: 35px;
  1233. text-align: justify;
  1234. }
  1235. .about-content .title {
  1236. font-size: 30px;
  1237. letter-spacing: 3px;
  1238. font-weight: bold;
  1239. }
  1240. .about-content .container {
  1241. margin: 15% 5%;
  1242. }
  1243. .about-content .bg-item {
  1244. height: 120%;
  1245. background-color: #fff2f1;
  1246. position: absolute;
  1247. z-index: -1;
  1248. bottom: -10%;
  1249. left: -5%;
  1250. width: 90%;
  1251. }
  1252. .about-content .iframe-box {
  1253. position: relative;
  1254. width: 100%;
  1255. height: 0;
  1256. padding-bottom: 73%;
  1257. }
  1258. .about-content .iframe-box video {
  1259. position: absolute;
  1260. top: 0;
  1261. left: 0;
  1262. height: 100%;
  1263. -webkit-box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
  1264. box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
  1265. }
  1266. .about-content .icon-box .row {
  1267. padding: 0 30px;
  1268. }
  1269. @media (max-width: 1200px) {
  1270. .about-content .icon-box .row {
  1271. padding-left: 13%;
  1272. }
  1273. }
  1274. @media (max-width: 768px) {
  1275. .about-content .icon-box .row {
  1276. padding: 0;
  1277. }
  1278. }
  1279. .about-content .icon-box .col-6 {
  1280. -webkit-box-orient: horizontal;
  1281. -webkit-box-direction: normal;
  1282. -ms-flex-direction: row;
  1283. flex-direction: row;
  1284. }
  1285. @media (max-width: 767px) {
  1286. .about-content .icon-box .col-6 {
  1287. -webkit-box-orient: vertical;
  1288. -webkit-box-direction: normal;
  1289. -ms-flex-direction: column;
  1290. flex-direction: column;
  1291. }
  1292. }
  1293. .about-content .icon-box img {
  1294. width: 50px;
  1295. image-rendering: -webkit-optimize-contrast;
  1296. -webkit-filter: invert(71%) sepia(13%) saturate(3318%) hue-rotate(302deg) brightness(90%) contrast(110%);
  1297. filter: invert(71%) sepia(13%) saturate(3318%) hue-rotate(302deg) brightness(90%) contrast(110%);
  1298. }
  1299. .about-content .icon-box span {
  1300. margin: 15px;
  1301. font-weight: bold;
  1302. }
  1303. .about-content .icon-box .icon-item {
  1304. padding: 15px;
  1305. margin: auto 0;
  1306. border: 1px solid #f4c0d0;
  1307. border-radius: 100%;
  1308. }
  1309. @media (max-width: 1200px) {
  1310. .about-content .container {
  1311. margin: 10% auto;
  1312. }
  1313. .about-content .container p {
  1314. padding: 0;
  1315. }
  1316. .about-content .content-box {
  1317. margin-top: 100px;
  1318. }
  1319. }
  1320. /* 關於我們-about end */
  1321. .bottom_line {
  1322. margin: 0px auto 20px;
  1323. border: 1px solid transparent;
  1324. background: -webkit-gradient(linear, left top, right top, from(white), to(white)), -webkit-gradient(linear, left top, right top, from(#f4c0d0), to(#d76478));
  1325. background: linear-gradient(to right, white, white), linear-gradient(to right, #f4c0d0, #d76478);
  1326. background-clip: padding-box, border-box;
  1327. background-origin: padding-box, border-box;
  1328. width: 50px;
  1329. }
  1330. /*# sourceMappingURL=style.css.map */