style.css 28 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618
  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. @media screen and (max-width: 767px) {
  518. .sec01_course .sec01_course_box .sec01_course_text del,
  519. .sec02_course .sec01_course_box .sec01_course_text del {
  520. font-size: 1rem;
  521. }
  522. }
  523. .sec01_course .sec01_course_box .sec01_course_text span,
  524. .sec02_course .sec01_course_box .sec01_course_text span {
  525. color: #ef7086;
  526. font-size: 1.6rem;
  527. }
  528. @media screen and (max-width: 767px) {
  529. .sec01_course .sec01_course_box .sec01_course_text span,
  530. .sec02_course .sec01_course_box .sec01_course_text span {
  531. font-size: 1.4rem;
  532. }
  533. }
  534. .sec01_course .sec01_course_box .sec01_course_text p,
  535. .sec02_course .sec01_course_box .sec01_course_text p {
  536. font-size: 14px;
  537. color: #555;
  538. padding: 15px 0 0;
  539. }
  540. .sec01_course .sec01_course_box .sec01_course_text .submitbutton,
  541. .sec02_course .sec01_course_box .sec01_course_text .submitbutton {
  542. width: 80%;
  543. margin: 20px auto;
  544. border: none;
  545. padding: 10px 12px;
  546. background: #f4c0d0;
  547. color: #fff;
  548. font-size: 20px;
  549. border-radius: 0.25rem;
  550. text-align: center;
  551. vertical-align: middle;
  552. border: 1px solid #f4c0d0;
  553. }
  554. .sec01_course .sec01_course_box .sec01_course_text .submitbutton:hover,
  555. .sec02_course .sec01_course_box .sec01_course_text .submitbutton:hover {
  556. color: #f4c0d0;
  557. background-color: #fff;
  558. border: 1px solid #f4c0d0;
  559. }
  560. .violetbeauty_sec03 {
  561. padding: 100px 0;
  562. margin-bottom: 50px;
  563. position: relative;
  564. letter-spacing: 1px;
  565. }
  566. @media screen and (max-width: 767px) {
  567. .violetbeauty_sec03 {
  568. padding: 50px 0;
  569. margin-bottom: 0;
  570. }
  571. }
  572. .violetbeauty_sec03 .sec03_img1 {
  573. position: absolute;
  574. left: 50px;
  575. top: 50px;
  576. opacity: 0.5;
  577. }
  578. .violetbeauty_sec03 .sec03_img2 {
  579. position: absolute;
  580. right: -120px;
  581. width: 400px;
  582. top: 40%;
  583. opacity: 0.5;
  584. -webkit-transform: rotate(-70deg);
  585. transform: rotate(-70deg);
  586. }
  587. .violetbeauty_sec03 .sec03_img3 {
  588. position: absolute;
  589. right: 0px;
  590. opacity: 0.5;
  591. width: 250px;
  592. bottom: 50px;
  593. transform: scaleX(-1) rotate(19deg);
  594. -moz-transform: scaleX(-1) rotate(19deg);
  595. -webkit-transform: scaleX(-1) rotate(19deg);
  596. -o-transform: scaleX(-1) rotate(19deg);
  597. }
  598. .violetbeauty_sec03 .violetbeauty_sec03_box {
  599. width: 75%;
  600. margin: 0 auto;
  601. }
  602. @media screen and (max-width: 767px) {
  603. .violetbeauty_sec03 .violetbeauty_sec03_box {
  604. width: 90%;
  605. }
  606. }
  607. .violetbeauty_sec03 .violetbeauty_sec03_box .violetbeauty_sec03_content {
  608. margin-top: 100px;
  609. }
  610. @media screen and (max-width: 767px) {
  611. .violetbeauty_sec03 .violetbeauty_sec03_box .violetbeauty_sec03_content {
  612. margin-top: 50px;
  613. }
  614. }
  615. .violetbeauty_sec03 .violetbeauty_contract_form {
  616. width: 70%;
  617. margin: 0 auto;
  618. }
  619. @media screen and (max-width: 767px) {
  620. .violetbeauty_sec03 .violetbeauty_contract_form {
  621. width: 90%;
  622. }
  623. }
  624. .violetbeauty_sec03 .violetbeauty_contract_form .submitbutton {
  625. width: 100%;
  626. margin: 16px auto;
  627. border: none;
  628. padding: 16px 12px;
  629. background: #f4c0d0;
  630. color: #fff;
  631. font-size: 20px;
  632. border-radius: 0.25rem;
  633. text-align: center;
  634. vertical-align: middle;
  635. }
  636. .violetbeauty_sec03 .violetbeauty_contract_form .submitbutton:hover {
  637. color: #f4c0d0;
  638. background-color: #fff;
  639. border: 1px solid #f4c0d0;
  640. }
  641. .violetbeauty_sec03 .violetbeauty_contract_form #time,
  642. .violetbeauty_sec03 .violetbeauty_contract_form #datepicker {
  643. width: 45%;
  644. padding: 10px 15px;
  645. border-radius: 3px;
  646. margin: 10px 0px;
  647. border: 1px solid rgba(0, 0, 0, 0.3);
  648. }
  649. .violetbeauty_sec03 .violetbeauty_contract_form #time {
  650. margin-left: 8%;
  651. }
  652. .violetbeauty_sec03 .violetbeauty_contract_form #phone,
  653. .violetbeauty_sec03 .violetbeauty_contract_form #email,
  654. .violetbeauty_sec03 .violetbeauty_contract_form #loc,
  655. .violetbeauty_sec03 .violetbeauty_contract_form #name,
  656. .violetbeauty_sec03 .violetbeauty_contract_form #course_name {
  657. width: 100%;
  658. padding: 10px 15px;
  659. font-size: 16px;
  660. border-radius: 3px;
  661. margin: 10px 0px;
  662. border: 1px solid rgba(0, 0, 0, 0.3);
  663. -webkit-appearance: none !important;
  664. }
  665. .logo img {
  666. width: 300px;
  667. -o-object-fit: cover;
  668. object-fit: cover;
  669. }
  670. .violetbeauty_logo {
  671. width: 300px;
  672. -o-object-fit: cover;
  673. object-fit: cover;
  674. }
  675. #footer {
  676. background: #fff2f1;
  677. color: #6c6c6c;
  678. }
  679. #footer .phone {
  680. -webkit-transform: rotate(100deg);
  681. transform: rotate(100deg);
  682. }
  683. #footer .footer_content_box {
  684. padding: 50px 0;
  685. margin: 0 auto;
  686. width: 80%;
  687. letter-spacing: 1px;
  688. }
  689. @media screen and (max-width: 767px) {
  690. #footer .footer_content_box {
  691. width: 90%;
  692. }
  693. }
  694. #footer .footer_content_box li a {
  695. width: 100%;
  696. text-align: left;
  697. color: #6c6c6c;
  698. }
  699. #footer .footer_content_box .border_line {
  700. margin-top: 30px;
  701. background: #ccc;
  702. opacity: 1 !important;
  703. margin-bottom: 0.5rem;
  704. }
  705. #footer .socail-link a {
  706. margin-right: 8px;
  707. }
  708. @media screen and (max-width: 767px) {
  709. #footer .footer_text_box {
  710. width: 80%;
  711. margin: 0 auto;
  712. }
  713. }
  714. #footer .footer_text_box h3 {
  715. font-size: 1rem;
  716. }
  717. #footer .footer_text_box h3,
  718. #footer .footer_text_box p {
  719. letter-spacing: 2px;
  720. }
  721. #footer .footer_text_box .navbar-nav {
  722. width: auto;
  723. }
  724. #footer .footer_text_box .navbar-nav .nav-link {
  725. margin: 0;
  726. padding: 0;
  727. border-bottom: none;
  728. -webkit-transition: all 0.2s;
  729. transition: all 0.2s;
  730. font-size: 1rem;
  731. text-align: center;
  732. }
  733. #footer .footer_text_box .navbar-nav .nav-link:hover {
  734. color: #ef7086;
  735. }
  736. #footer .footer_text_box .navbar-nav .nav-item {
  737. margin-right: 20px;
  738. margin-bottom: 10px;
  739. min-width: auto;
  740. }
  741. #footer .footer_text {
  742. margin-top: 15px;
  743. }
  744. @media screen and (max-width: 767px) {
  745. #footer .footer_text {
  746. font-size: 0.85rem;
  747. }
  748. }
  749. #footer .socail-link {
  750. margin-top: 30px;
  751. }
  752. @media screen and (max-width: 767px) {
  753. #footer .socail-link {
  754. text-align: center;
  755. }
  756. }
  757. #footer .socail-link a {
  758. -webkit-transition: 0.3s;
  759. transition: 0.3s;
  760. }
  761. #footer .socail-link a:hover {
  762. opacity: 0.8;
  763. }
  764. #footer .store {
  765. width: 85%;
  766. margin: 0 auto;
  767. }
  768. @media screen and (max-width: 767px) {
  769. #footer .store {
  770. margin-top: 50px;
  771. }
  772. }
  773. #footer .store p {
  774. margin-top: 10px;
  775. }
  776. #footer .store h3 {
  777. font-size: 1.5rem;
  778. font-weight: 300 !important;
  779. }
  780. #footer .store p {
  781. margin-bottom: 0.5rem;
  782. font-weight: 300 !important;
  783. }
  784. #footer .footer_logo img {
  785. position: relative;
  786. right: 30px;
  787. width: 300px;
  788. -o-object-fit: cover;
  789. object-fit: cover;
  790. }
  791. #footer .google_map {
  792. width: 100%;
  793. padding: 14px 20px;
  794. background: none;
  795. color: #3f51b5;
  796. border: 1px solid #3f51b5;
  797. border-radius: 3px;
  798. -webkit-transition: 0.3s;
  799. transition: 0.3s;
  800. overflow-x: hidden;
  801. }
  802. #footer .google_map a {
  803. text-decoration: none;
  804. color: #3f51b5;
  805. }
  806. #footer .google_map:hover {
  807. background: #3f51b5;
  808. color: #fff;
  809. }
  810. #footer .google_map:hover a {
  811. color: #fff;
  812. }
  813. #footer .line_Reserve {
  814. width: 100%;
  815. padding: 15px 20px;
  816. background: #52b448;
  817. border: 1px solid #52b448;
  818. color: #fff;
  819. border: none;
  820. border-radius: 3px;
  821. -webkit-transition: 0.3s;
  822. transition: 0.3s;
  823. overflow-x: hidden;
  824. }
  825. #footer .line_Reserve a {
  826. color: #fff;
  827. text-decoration: none;
  828. }
  829. #footer .line_Reserve:hover {
  830. background: #fff;
  831. color: #52b448;
  832. }
  833. #footer .line_Reserve:hover a {
  834. color: #52b448;
  835. }
  836. #footer-secondary {
  837. background: #fff2f1;
  838. color: #6c6c6c;
  839. }
  840. #footer-secondary .footer_content_box {
  841. padding: 50px 0;
  842. margin: 0 auto;
  843. width: 80%;
  844. }
  845. @media (max-width: 767px) {
  846. #footer-secondary .footer_content_box {
  847. width: 85%;
  848. }
  849. }
  850. #footer-secondary h3 {
  851. font-size: 1rem;
  852. }
  853. #footer-secondary h3,
  854. #footer-secondary p {
  855. letter-spacing: 2px;
  856. }
  857. #footer-secondary li a {
  858. width: 100%;
  859. text-align: left;
  860. color: #6c6c6c;
  861. }
  862. #footer-secondary .navbar-nav {
  863. width: auto;
  864. }
  865. #footer-secondary .navbar-nav .nav-link {
  866. margin: 0;
  867. padding: 0;
  868. border-bottom: none;
  869. -webkit-transition: all 0.2s;
  870. transition: all 0.2s;
  871. }
  872. #footer-secondary .navbar-nav .nav-link:hover {
  873. color: #ef7086;
  874. }
  875. #footer-secondary .navbar-nav .nav-item {
  876. min-width: 105px;
  877. }
  878. @media (max-width: 767px) {
  879. #footer-secondary .navbar-nav .nav-item {
  880. min-width: auto;
  881. width: 90px;
  882. }
  883. #footer-secondary .navbar-nav .nav-link {
  884. font-size: 1rem;
  885. text-align: center;
  886. }
  887. }
  888. #footer-secondary .socail-link img {
  889. image-rendering: -webkit-optimize-contrast;
  890. -webkit-filter: invert(42%) sepia(0%) saturate(1863%) hue-rotate(226deg) brightness(100%) contrast(96%);
  891. filter: invert(42%) sepia(0%) saturate(1863%) hue-rotate(226deg) brightness(100%) contrast(96%);
  892. }
  893. #footer-secondary .socail-link img:hover {
  894. opacity: 0.8;
  895. }
  896. #footer-secondary .footer_text {
  897. margin-top: 15px;
  898. }
  899. @media (max-width: 767px) {
  900. #footer-secondary .footer_text p {
  901. font-size: 0.85rem;
  902. }
  903. }
  904. #footer-secondary .store_name {
  905. color: #ef7086;
  906. }
  907. #footer-secondary .store {
  908. width: 85%;
  909. margin: 0 auto;
  910. }
  911. #footer-secondary .store p {
  912. margin-top: 10px;
  913. }
  914. #footer-secondary .footer_logo img {
  915. position: relative;
  916. right: 30px;
  917. width: 250px;
  918. -o-object-fit: cover;
  919. object-fit: cover;
  920. }
  921. .gototop {
  922. position: fixed;
  923. right: 3vw;
  924. bottom: 0.5vw;
  925. z-index: 10;
  926. border-radius: 80px;
  927. font-size: 32px;
  928. color: #fff;
  929. width: 50px;
  930. height: 50px;
  931. background: #f4c0d0;
  932. cursor: pointer;
  933. }
  934. #banner-slide3 {
  935. margin-top: 100px;
  936. }
  937. @media screen and (max-width: 767px) {
  938. #banner-slide3 {
  939. margin-top: 30px;
  940. }
  941. }
  942. /* banner */
  943. .facial-banner,
  944. .massage-banner,
  945. .store-banner {
  946. padding: 150px 0;
  947. position: relative;
  948. background-size: cover;
  949. background-repeat: no-repeat;
  950. image-rendering: -webkit-optimize-contrast;
  951. }
  952. .facial-banner p,
  953. .massage-banner p,
  954. .store-banner p {
  955. position: absolute;
  956. right: 50%;
  957. -webkit-transform: translate(50%, 50%);
  958. transform: translate(50%, 50%);
  959. font-size: 40px;
  960. color: white;
  961. text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
  962. }
  963. /* 臉部課程-facial start */
  964. .facial-banner {
  965. background-image: url(/img/banner-facial.jpg);
  966. background-position: 25% 25%;
  967. }
  968. .facial-banner p {
  969. bottom: 45%;
  970. }
  971. .facial-content {
  972. margin: 100px auto;
  973. }
  974. .facial-content p {
  975. margin: 0;
  976. line-height: 32px;
  977. }
  978. .facial-content img {
  979. height: 250px;
  980. -o-object-fit: cover;
  981. object-fit: cover;
  982. }
  983. .facial-content button {
  984. display: none;
  985. padding: 7px 30px;
  986. position: absolute;
  987. bottom: -20px;
  988. right: 50%;
  989. -webkit-transform: translate(50%, 0);
  990. transform: translate(50%, 0);
  991. color: #ffffff;
  992. background-color: #ef7086;
  993. white-space: nowrap;
  994. font-weight: bold;
  995. -webkit-transition: all 0.3s;
  996. transition: all 0.3s;
  997. }
  998. @media screen and (max-width: 767px) {
  999. .facial-content button {
  1000. display: block;
  1001. }
  1002. }
  1003. .facial-content button::after {
  1004. content: "";
  1005. display: inline-block;
  1006. vertical-align: middle;
  1007. width: 8px;
  1008. height: 8px;
  1009. margin: 0 0 2px 10px;
  1010. border: 1px solid #fff;
  1011. border-left: 0 none;
  1012. border-bottom: 0 none;
  1013. -webkit-transform: rotate(45deg);
  1014. transform: rotate(45deg);
  1015. }
  1016. .facial-content button:hover {
  1017. color: #ffffff;
  1018. background-color: #f4c0d0;
  1019. }
  1020. .facial-content .card {
  1021. cursor: pointer;
  1022. border: 1px solid #cccccc;
  1023. }
  1024. .facial-content .card .card-body {
  1025. padding: 10px 20px 20px;
  1026. }
  1027. .facial-content .card:hover button {
  1028. display: block;
  1029. }
  1030. .facial-content .card:hover .img-box img {
  1031. -webkit-transform: scale(1.1, 1.1);
  1032. transform: scale(1.1, 1.1);
  1033. }
  1034. .facial-content .badge {
  1035. height: 30px;
  1036. line-height: 1.9;
  1037. background-color: #ef7086;
  1038. }
  1039. .facial-content .img-box {
  1040. overflow: hidden;
  1041. }
  1042. .facial-content .img-box img {
  1043. width: 100%;
  1044. height: auto;
  1045. -o-object-fit: contain;
  1046. object-fit: contain;
  1047. -webkit-transition: all 1s;
  1048. transition: all 1s;
  1049. image-rendering: -webkit-optimize-contrast;
  1050. }
  1051. .modal-header {
  1052. border-bottom: none !important;
  1053. }
  1054. .modal-body {
  1055. letter-spacing: 1px;
  1056. }
  1057. .modal-body p {
  1058. line-height: 32px;
  1059. }
  1060. .modal-body h5 {
  1061. font-size: 25px;
  1062. }
  1063. .modal-body img {
  1064. border-radius: 20px;
  1065. }
  1066. .modal-body .price-box span {
  1067. font-size: 18px;
  1068. font-weight: bold;
  1069. color: #ef7086;
  1070. }
  1071. .modal-body .price-box span:last-child {
  1072. font-size: 16px;
  1073. font-weight: normal;
  1074. text-decoration: line-through;
  1075. }
  1076. .modal-body .recommend-item {
  1077. display: -webkit-box;
  1078. display: -ms-flexbox;
  1079. display: flex;
  1080. -webkit-box-orient: vertical;
  1081. -webkit-box-direction: normal;
  1082. -ms-flex-direction: column;
  1083. flex-direction: column;
  1084. -webkit-box-align: center;
  1085. -ms-flex-align: center;
  1086. align-items: center;
  1087. -webkit-box-pack: center;
  1088. -ms-flex-pack: center;
  1089. justify-content: center;
  1090. border-top: 1px dashed #f4c0d0;
  1091. }
  1092. .modal-body .recommend-item span {
  1093. width: 100px;
  1094. padding: 10px;
  1095. margin: 25px 0 15px;
  1096. padding-left: 15px;
  1097. letter-spacing: 5px;
  1098. font-size: 16px;
  1099. color: #ffffff;
  1100. background-color: #ef7086;
  1101. }
  1102. .modal-body .recommend-item li {
  1103. margin: 5px 0;
  1104. }
  1105. .modal-body section {
  1106. height: 75%;
  1107. }
  1108. .time-box img {
  1109. width: 18px;
  1110. height: 18px;
  1111. margin-right: 5px;
  1112. image-rendering: -webkit-optimize-contrast;
  1113. }
  1114. .time-box p {
  1115. margin: 0;
  1116. font-size: 14px;
  1117. color: #ef7086;
  1118. }
  1119. .time-box span {
  1120. font-size: 20px;
  1121. font-weight: bold;
  1122. }
  1123. .modal-body img {
  1124. image-rendering: -webkit-optimize-contrast;
  1125. }
  1126. /* 臉部課程-facial end */
  1127. /* 門市資訊-store start */
  1128. .store-banner {
  1129. background-image: url(/img/banner-store.jpg);
  1130. background-position: 25% 30%;
  1131. }
  1132. .store-banner p {
  1133. bottom: 45%;
  1134. }
  1135. .store-content {
  1136. margin: 150px auto;
  1137. letter-spacing: 1px;
  1138. }
  1139. .store-content i {
  1140. color: #b2adae;
  1141. font-size: 20px;
  1142. }
  1143. .store-content h3 {
  1144. margin-bottom: 20px;
  1145. font-weight: bold;
  1146. color: #ef7086;
  1147. }
  1148. .store-content img {
  1149. width: 100%;
  1150. border-radius: 20px 0 0 20px;
  1151. }
  1152. @media (max-width: 767px) {
  1153. .store-content img {
  1154. border-radius: 20px 20px 0 0;
  1155. }
  1156. }
  1157. .store-content .info-box {
  1158. width: 270px;
  1159. margin: auto;
  1160. }
  1161. @media (max-width: 375px) {
  1162. .store-content .info-box {
  1163. width: 100%;
  1164. }
  1165. }
  1166. .store-content .Down_line {
  1167. width: 230px;
  1168. margin-top: -20px;
  1169. }
  1170. .store-content .row {
  1171. margin: 15%;
  1172. border: 1px solid #f4c0d0;
  1173. border-radius: 20px;
  1174. }
  1175. @media (max-width: 1200px) {
  1176. .store-content .row {
  1177. margin: 10%;
  1178. }
  1179. }
  1180. @media (max-width: 992px) {
  1181. .store-content .row {
  1182. margin: 0px;
  1183. }
  1184. }
  1185. .store-content .google_map {
  1186. width: 100%;
  1187. padding: 7px 15px;
  1188. margin-top: 1px;
  1189. background: none;
  1190. color: #3f51b5;
  1191. border: 1px solid #3f51b5;
  1192. border-radius: 3px;
  1193. -webkit-transition: 0.3s;
  1194. transition: 0.3s;
  1195. font-size: 15px;
  1196. letter-spacing: 1px;
  1197. overflow-x: hidden;
  1198. }
  1199. .store-content .google_map a {
  1200. text-decoration: none;
  1201. color: #3f51b5;
  1202. }
  1203. .store-content .google_map:hover {
  1204. background: #3f51b5;
  1205. color: #fff;
  1206. }
  1207. .store-content .google_map:hover a {
  1208. color: #fff;
  1209. }
  1210. .store-content .line_Reserve {
  1211. width: 100%;
  1212. margin-left: 10%;
  1213. padding: 8px 15px;
  1214. background: #52b448;
  1215. color: #fff;
  1216. border: 1px solid #52b448;
  1217. border-radius: 5px;
  1218. -webkit-transition: 0.3s;
  1219. transition: 0.3s;
  1220. font-size: 15px;
  1221. letter-spacing: 1px;
  1222. overflow-x: hidden;
  1223. }
  1224. .store-content .line_Reserve a {
  1225. color: #fff;
  1226. text-decoration: none;
  1227. }
  1228. .store-content .line_Reserve:hover {
  1229. background: #fff;
  1230. color: #52b448;
  1231. }
  1232. .store-content .line_Reserve:hover a {
  1233. color: #52b448;
  1234. }
  1235. @media (max-width: 575px) {
  1236. .store-content .line_Reserve {
  1237. margin-left: 0;
  1238. margin-top: 5%;
  1239. }
  1240. }
  1241. @media (max-width: 992px) {
  1242. .store-content p {
  1243. font-size: 0.9rem;
  1244. }
  1245. .store-content h3 {
  1246. font-size: 1.3rem;
  1247. }
  1248. }
  1249. /* 門市資訊-store end */
  1250. /* 身體課程-massage start */
  1251. .massage-banner {
  1252. background-image: url(/img/banner-massage.jpg);
  1253. background-position: center;
  1254. }
  1255. .massage-banner p {
  1256. bottom: 45%;
  1257. }
  1258. .massage-modal-item .modal-body .badge {
  1259. width: auto;
  1260. padding-left: 13px;
  1261. letter-spacing: 2px;
  1262. }
  1263. /* 身體課程-massage end */
  1264. /* 關於我們-about start */
  1265. .about-content {
  1266. margin-bottom: 100px;
  1267. }
  1268. .about-content p {
  1269. padding: 0 60px;
  1270. line-height: 35px;
  1271. text-align: justify;
  1272. }
  1273. .about-content .title {
  1274. font-size: 30px;
  1275. letter-spacing: 3px;
  1276. font-weight: bold;
  1277. }
  1278. .about-content .container {
  1279. margin: 15% 5%;
  1280. }
  1281. .about-content .bg-item {
  1282. height: 120%;
  1283. background-color: #fff2f1;
  1284. position: absolute;
  1285. z-index: -1;
  1286. bottom: -10%;
  1287. left: -5%;
  1288. width: 90%;
  1289. }
  1290. .about-content .iframe-box {
  1291. position: relative;
  1292. width: 100%;
  1293. height: 0;
  1294. padding-bottom: 73%;
  1295. }
  1296. .about-content .iframe-box video {
  1297. position: absolute;
  1298. top: 0;
  1299. left: 0;
  1300. height: 100%;
  1301. -webkit-box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
  1302. box-shadow: 0 0 10px rgba(32, 32, 32, 0.25);
  1303. }
  1304. .about-content .icon-box .row {
  1305. padding: 0 30px;
  1306. }
  1307. @media (max-width: 1200px) {
  1308. .about-content .icon-box .row {
  1309. padding-left: 13%;
  1310. }
  1311. }
  1312. @media (max-width: 768px) {
  1313. .about-content .icon-box .row {
  1314. padding: 0;
  1315. }
  1316. }
  1317. .about-content .icon-box .col-6 {
  1318. -webkit-box-orient: horizontal;
  1319. -webkit-box-direction: normal;
  1320. -ms-flex-direction: row;
  1321. flex-direction: row;
  1322. }
  1323. @media (max-width: 767px) {
  1324. .about-content .icon-box .col-6 {
  1325. -webkit-box-orient: vertical;
  1326. -webkit-box-direction: normal;
  1327. -ms-flex-direction: column;
  1328. flex-direction: column;
  1329. }
  1330. }
  1331. .about-content .icon-box img {
  1332. width: 50px;
  1333. image-rendering: -webkit-optimize-contrast;
  1334. -webkit-filter: invert(71%) sepia(13%) saturate(3318%) hue-rotate(302deg) brightness(90%) contrast(110%);
  1335. filter: invert(71%) sepia(13%) saturate(3318%) hue-rotate(302deg) brightness(90%) contrast(110%);
  1336. }
  1337. .about-content .icon-box span {
  1338. margin: 15px;
  1339. font-weight: bold;
  1340. }
  1341. .about-content .icon-box .icon-item {
  1342. padding: 15px;
  1343. margin: auto 0;
  1344. border: 1px solid #f4c0d0;
  1345. border-radius: 100%;
  1346. }
  1347. @media (max-width: 1200px) {
  1348. .about-content .container {
  1349. margin: 10% auto;
  1350. }
  1351. .about-content .container p {
  1352. padding: 0;
  1353. }
  1354. .about-content .content-box {
  1355. margin-top: 100px;
  1356. }
  1357. }
  1358. /* 關於我們-about end */
  1359. .bottom_line {
  1360. margin: 0px auto 20px;
  1361. border: 1px solid transparent;
  1362. background: -webkit-gradient(linear, left top, right top, from(white), to(white)), -webkit-gradient(linear, left top, right top, from(#f4c0d0), to(#d76478));
  1363. background: linear-gradient(to right, white, white), linear-gradient(to right, #f4c0d0, #d76478);
  1364. background-clip: padding-box, border-box;
  1365. background-origin: padding-box, border-box;
  1366. width: 50px;
  1367. }
  1368. /*# sourceMappingURL=style.css.map */