style.css 28 KB

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