@charset "UTF-8"; * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } #top { overflow-x: hidden !important; } .violetbeauty_line { margin: 0px auto 20px; border: 1px solid transparent; background: -webkit-gradient(linear, left top, right top, from(white), to(white)), -webkit-gradient(linear, left top, right top, from(#f4c0d0), to(#d76478)); background: linear-gradient(to right, white, white), linear-gradient(to right, #f4c0d0, #d76478); background-clip: padding-box, border-box; background-origin: padding-box, border-box; width: 50px; opacity: 1 !important; } .playbutton { cursor: pointer; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 101; -webkit-transition: 0.3s; transition: 0.3s; } .playbutton:hover { opacity: 0.8; } .likeSee__state { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .likeSee__state img { width: 40px; } .learn_more { margin-top: 20px; padding: 5px; background: none; color: #f4c0d0; border-radius: 5px; border: 1px solid #f4c0d0; -webkit-transition: 0.3s; transition: 0.3s; } .learn_more:hover { color: #fff; background: #f4c0d0; } .course_name_title { font-size: 1.2rem; color: #ef7086; font-weight: 900; } .course_name_text { color: #f4c0d0; margin-bottom: 5px; font-size: 1rem; } .Discounted_price { font-size: 24px; font-weight: 600; } .violetbeauty_content_title { color: #ef7086; font-weight: 900; font-size: 1.8rem; } .violetbeauty_content_text { color: #ef7086; font-size: 1rem; } .features_title { font-weight: 300 !important; letter-spacing: 2px; font: 1.9375em "微軟正黑體"; line-height: 25px; text-align: center; color: #333; width: 100%; margin: 1rem 0; } .Down_line { width: 300px; -o-object-fit: cover; object-fit: cover; } .card { border: none; } .card .card-body { padding: 0.1rem; margin-top: 15px; } .violetbeauty_CTA { margin-top: 50px; padding: 10px 50px; border: 1px solid #f4c0d0; background: #fff; border-radius: 30px; color: #ef7086; position: relative; -webkit-transition: 0.5s; transition: 0.5s; } .violetbeauty_CTA a { color: #ef7086; } .violetbeauty_CTA .cta_flower { position: absolute; width: 60px; left: -25px; bottom: -10px; -webkit-transition: 0.5s; transition: 0.5s; } .violetbeauty_CTA:hover { background: #ef7086; color: #fff; } .violetbeauty_CTA:hover a { color: #fff; } .violetbeauty_CTA:hover .cta_flower { -webkit-transform: rotate(360deg); transform: rotate(360deg); } .navbar-nav { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; width: 70%; margin: 0 auto; } .navbar-nav .nav-item { white-space: nowrap; } .navbar-nav .nav-link { font: 1.2rem 微軟正黑體; font-weight: 300 !important; padding: 0.5rem 1rem; margin: 5px 1rem; text-align: center; color: #9f9f9f; color: #000; letter-spacing: 0; border-bottom: 5px solid #ffffff; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; } .navbar-nav .nav-link:hover { color: #ef7086; } #Navigation { background: #fff; opacity: 1; height: 4.5vw; width: 100vw !important; position: fixed; z-index: 100; } @media screen and (max-width: 1024px) { #Navigation { height: 8vw; } } @media screen and (max-width: 767px) { #Navigation { height: auto; position: fixed; z-index: 5; } } #Navigation .menu { font-size: 28px; margin-top: 30px; color: #6c6c6c; } #Navigation #nav { width: 100vw; margin: 0 auto; } #Navigation #logo { padding-top: 1vw; } #Navigation #logo img { width: 120px; } #Navigation #link { text-align: right; padding: 1.5vw 3vw; } @media screen and (max-width: 767px) { #Navigation #link { display: none; } } #Navigation #link a { text-decoration: none; color: #000; letter-spacing: 1px; font-size: 0.9rem; font-weight: 600; cursor: pointer; padding: 15px; position: relative; } #Navigation #link a :hover { opacity: 0.8; } #Navigation #link a:after { content: ""; display: block; width: 80%; height: 3px; background-color: #fff; position: absolute; left: 12%; bottom: 0; -webkit-transition: all 0.3s; transition: all 0.3s; opacity: 0; } #Navigation #link a:hover:after { width: 80%; opacity: 1; } #menu-box { top: 4.4rem; height: 25vh; width: 100vw; position: fixed; z-index: 998; overflow: hidden; display: none; background: rgba(0, 0, 0, 0.8); } @media screen and (min-width: 1025px) { #menu-box { display: none; } } @media screen and (max-width: 767px) { #menu-box { height: 100vh; } } @media screen and (max-width: 350px) { #menu-box { height: 55vh; } } #menu-box hr { display: inline-block; margin: 0px auto !important; width: 55vw; background: #fff; opacity: 1 !important; } #menu-box #menu-box2 { width: 100vw; height: 25vh; background-color: #f4c0d0; opacity: 0.95; z-index: 999; text-align: center; } @media screen and (max-width: 767px) { #menu-box #menu-box2 { height: 45vh; } } @media screen and (max-width: 350px) { #menu-box #menu-box2 { height: 55vh; } } #menu-box #menu-box2 #menu-link { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); width: 60vw; margin: 0 auto; } #menu-box #menu-box2 .menu-logo { opacity: 1; } #menu-box #menu-box2 .menu-logo img { width: 7vw; } #menu-box #menu-box2 a { display: inline-block; text-decoration: none; color: #fff; font-size: 16px; margin-top: 20px; font-weight: 900; } @media screen and (max-width: 767px) { #menu-box #menu-box2 a { margin-top: 4vw; } } #menu-box #menu-box2 .menu-text { width: 70vw; text-align: center; margin-bottom: 10px; border-bottom: 1px solid #fff; margin: 0 auto; padding-bottom: 10px; } @media screen and (max-width: 767px) { #menu-box #menu-box2 .menu-text { margin-bottom: 5px !important; } } .slick-dotted.slick-slider { margin-bottom: 0px !important; } .sec_content_right_text { margin-top: 30px; } .sec_content_right_text p { margin-bottom: 0.5rem; color: #ef7086; } @media screen and (max-width: 767px) { .banner-slide { padding-top: 80px; } } .news { margin: 100px 0px; } @media screen and (max-width: 767px) { .news { margin: 50px 0px 80px; } } .news .news-slide { width: 80%; margin: 0 auto; } @media screen and (max-width: 767px) { .news .news-slide { width: 95%; } } .news .news-slide .slick-prev, .news .news-slide .slick-next { width: 50px; -o-object-fit: cover; object-fit: cover; height: auto; -webkit-filter: invert(52%) sepia(75%) saturate(602%) hue-rotate(306deg) brightness(102%) contrast(87%); filter: invert(52%) sepia(75%) saturate(602%) hue-rotate(306deg) brightness(102%) contrast(87%); } @media screen and (max-width: 767px) { .news .news-slide .slick-prev, .news .news-slide .slick-next { width: 30px; } } .news .news-slide .slick-prev { left: -50px; } @media screen and (max-width: 767px) { .news .news-slide .slick-prev { display: none; } } .news .news-slide .slick-next { right: -50px; } @media screen and (max-width: 767px) { .news .news-slide .slick-next { display: none; } } .news .news-slide .banner-slide-item img { padding: 10px; width: 100% !important; } @media screen and (max-width: 767px) { .news .news-slide .banner-slide-item img { padding: 0px; } } .news .news-slide .slick-dots { bottom: -15px; } .news .news-slide .slick-dots li button:before { font-size: 16px; font-weight: 900; top: 15px; content: "○"; color: #ef7086; } .news .news-slide .slick-dots li.slick-active button:before { opacity: 0.75; color: #ef7086; content: "●"; } .violetbeauty_sec00 { overflow: hidden; background-size: cover; background-attachment: fixed; background-position: left center; background-repeat: no-repeat; position: relative; } @media screen and (max-width: 767px) { .violetbeauty_sec00 { background-position: right center; } } .violetbeauty_sec00 .bg { background: rgba(0, 0, 0, 0.4); width: 100%; height: 100%; padding: 100px 0; } .violetbeauty_sec00 hr { background: #fff; opacity: 1 !important; height: 1px; width: 40px; margin: 15px auto; } .violetbeauty_sec00 p { color: #fff; } .violetbeauty_sec00 h4 { color: #fff; } .violetbeauty_sec00 .violetbeauty_sec00_box { width: 80%; margin: 0 auto; } @media screen and (max-width: 767px) { .violetbeauty_sec00 .violetbeauty_sec00_box { width: 90%; } } .violetbeauty_sec00 .violetbeauty_sec00_box .sec00_content_left_img { width: 70%; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } @media screen and (max-width: 767px) { .violetbeauty_sec00 .violetbeauty_sec00_box .sec00_content_left_img { width: 80%; } } .violetbeauty_sec00 .violetbeauty_sec00_box .sec00_content_right { text-align: center; margin-top: 30px; } .violetbeauty_sec00 .violetbeauty_sec00_box .sec00_content_right p { margin-bottom: 0.8rem; } .sec01_course { background: #fff2f1; } .sec02_course { background: #fff; } .sec01_course, .sec02_course { padding: 50px 0; } .sec01_course .sec01_course_box, .sec02_course .sec01_course_box { width: 80%; margin: 0 auto; background: #fff; } @media screen and (max-width: 767px) { .sec01_course .sec01_course_box, .sec02_course .sec01_course_box { width: 90%; } } .sec01_course .sec01_course_box .sec01_course_text, .sec02_course .sec01_course_box .sec01_course_text { text-align: center; padding: 15px 5.6%; letter-spacing: 1px; } @media screen and (max-width: 767px) { .sec01_course .sec01_course_box .sec01_course_text, .sec02_course .sec01_course_box .sec01_course_text { padding: 15px 2.8%; } } .sec01_course .sec01_course_box .sec01_course_text del, .sec02_course .sec01_course_box .sec01_course_text del { font-size: 1.2rem; color: #888; } @media screen and (max-width: 767px) { .sec01_course .sec01_course_box .sec01_course_text del, .sec02_course .sec01_course_box .sec01_course_text del { font-size: 1rem; } } .sec01_course .sec01_course_box .sec01_course_text span, .sec02_course .sec01_course_box .sec01_course_text span { color: #ef7086; font-size: 1.6rem; } @media screen and (max-width: 767px) { .sec01_course .sec01_course_box .sec01_course_text span, .sec02_course .sec01_course_box .sec01_course_text span { font-size: 1.4rem; } } .sec01_course .sec01_course_box .sec01_course_text p, .sec02_course .sec01_course_box .sec01_course_text p { font-size: 14px; color: #555; padding: 15px 0 0; } .sec01_course .sec01_course_box .sec01_course_text .submitbutton, .sec02_course .sec01_course_box .sec01_course_text .submitbutton { width: 80%; margin: 20px auto; border: none; padding: 10px 12px; background: #f4c0d0; color: #fff; font-size: 20px; border-radius: 0.25rem; text-align: center; vertical-align: middle; border: 1px solid #f4c0d0; } .sec01_course .sec01_course_box .sec01_course_text .submitbutton:hover, .sec02_course .sec01_course_box .sec01_course_text .submitbutton:hover { color: #f4c0d0; background-color: #fff; border: 1px solid #f4c0d0; } .violetbeauty_sec03 { padding: 100px 0; margin-bottom: 50px; position: relative; letter-spacing: 1px; } @media screen and (max-width: 767px) { .violetbeauty_sec03 { padding: 50px 0; margin-bottom: 0; } } .violetbeauty_sec03 .sec03_img1 { position: absolute; left: 50px; top: 50px; opacity: 0.5; } .violetbeauty_sec03 .sec03_img2 { position: absolute; right: -120px; width: 400px; top: 40%; opacity: 0.5; -webkit-transform: rotate(-70deg); transform: rotate(-70deg); } .violetbeauty_sec03 .sec03_img3 { position: absolute; right: 0px; opacity: 0.5; width: 250px; bottom: 50px; transform: scaleX(-1) rotate(19deg); -moz-transform: scaleX(-1) rotate(19deg); -webkit-transform: scaleX(-1) rotate(19deg); -o-transform: scaleX(-1) rotate(19deg); } .violetbeauty_sec03 .violetbeauty_sec03_box { width: 75%; margin: 0 auto; } @media screen and (max-width: 767px) { .violetbeauty_sec03 .violetbeauty_sec03_box { width: 90%; } } .violetbeauty_sec03 .violetbeauty_sec03_box .violetbeauty_sec03_content { margin-top: 100px; } @media screen and (max-width: 767px) { .violetbeauty_sec03 .violetbeauty_sec03_box .violetbeauty_sec03_content { margin-top: 50px; } } .violetbeauty_sec03 .violetbeauty_contract_form { width: 70%; margin: 0 auto; } @media screen and (max-width: 767px) { .violetbeauty_sec03 .violetbeauty_contract_form { width: 90%; } } .violetbeauty_sec03 .violetbeauty_contract_form .submitbutton { width: 100%; margin: 16px auto; border: none; padding: 16px 12px; background: #f4c0d0; color: #fff; font-size: 20px; border-radius: 0.25rem; text-align: center; vertical-align: middle; border: 1px solid #f4c0d0; } .violetbeauty_sec03 .violetbeauty_contract_form .submitbutton:hover { color: #f4c0d0; background-color: #fff; border: 1px solid #f4c0d0; } .violetbeauty_sec03 .violetbeauty_contract_form #time, .violetbeauty_sec03 .violetbeauty_contract_form #datepicker { width: 45%; padding: 10px 15px; border-radius: 3px; margin: 10px 0px; border: 1px solid rgba(0, 0, 0, 0.3); } .violetbeauty_sec03 .violetbeauty_contract_form #time { margin-left: 8%; } .violetbeauty_sec03 .violetbeauty_contract_form #phone, .violetbeauty_sec03 .violetbeauty_contract_form #email, .violetbeauty_sec03 .violetbeauty_contract_form #loc, .violetbeauty_sec03 .violetbeauty_contract_form #name, .violetbeauty_sec03 .violetbeauty_contract_form #course_name { width: 100%; padding: 10px 15px; font-size: 16px; border-radius: 3px; margin: 10px 0px; border: 1px solid rgba(0, 0, 0, 0.3); -webkit-appearance: none !important; } .logo img { width: 300px; -o-object-fit: cover; object-fit: cover; } .violetbeauty_logo { width: 300px; -o-object-fit: cover; object-fit: cover; } #footer { background: #fff2f1; color: #6c6c6c; } #footer .phone { -webkit-transform: rotate(100deg); transform: rotate(100deg); } #footer .footer_content_box { padding: 50px 0; margin: 0 auto; width: 80%; letter-spacing: 1px; } @media screen and (max-width: 767px) { #footer .footer_content_box { width: 90%; } } #footer .footer_content_box li a { width: 100%; text-align: left; color: #6c6c6c; } #footer .footer_content_box .border_line { margin-top: 30px; background: #ccc; opacity: 1 !important; margin-bottom: 0.5rem; } #footer .socail-link a { margin-right: 8px; } @media screen and (max-width: 767px) { #footer .footer_text_box { width: 80%; margin: 0 auto; } } #footer .footer_text_box h3 { font-size: 1rem; } #footer .footer_text_box h3, #footer .footer_text_box p { letter-spacing: 2px; } #footer .footer_text_box .navbar-nav { width: auto; } #footer .footer_text_box .navbar-nav .nav-link { margin: 0; padding: 0; border-bottom: none; -webkit-transition: all 0.2s; transition: all 0.2s; font-size: 1rem; text-align: center; } #footer .footer_text_box .navbar-nav .nav-link:hover { color: #ef7086; } #footer .footer_text_box .navbar-nav .nav-item { margin-right: 20px; margin-bottom: 10px; min-width: auto; } #footer .footer_text { margin-top: 15px; } @media screen and (max-width: 767px) { #footer .footer_text { font-size: 0.85rem; } } #footer .socail-link { margin-top: 30px; } @media screen and (max-width: 767px) { #footer .socail-link { text-align: center; } } #footer .socail-link a { -webkit-transition: 0.3s; transition: 0.3s; } #footer .socail-link a:hover { opacity: 0.8; } #footer .store { width: 85%; margin: 0 auto; } @media screen and (max-width: 767px) { #footer .store { margin-top: 50px; } } #footer .store p { margin-top: 10px; } #footer .store h3 { font-size: 1.5rem; font-weight: 300 !important; } #footer .store p { margin-bottom: 0.5rem; font-weight: 300 !important; } #footer .footer_logo img { position: relative; right: 30px; width: 300px; -o-object-fit: cover; object-fit: cover; } #footer .google_map { width: 100%; padding: 14px 20px; background: none; color: #3f51b5; border: 1px solid #3f51b5; border-radius: 3px; -webkit-transition: 0.3s; transition: 0.3s; overflow-x: hidden; } #footer .google_map a { text-decoration: none; color: #3f51b5; } #footer .google_map:hover { background: #3f51b5; color: #fff; } #footer .google_map:hover a { color: #fff; } #footer .line_Reserve { width: 100%; padding: 15px 20px; background: #52b448; border: 1px solid #52b448; color: #fff; border: none; border-radius: 3px; -webkit-transition: 0.3s; transition: 0.3s; overflow-x: hidden; } #footer .line_Reserve a { color: #fff; text-decoration: none; } #footer .line_Reserve:hover { background: #fff; color: #52b448; } #footer .line_Reserve:hover a { color: #52b448; } #footer-secondary { background: #fff2f1; color: #6c6c6c; } #footer-secondary .footer_content_box { padding: 50px 0; margin: 0 auto; width: 80%; } @media (max-width: 767px) { #footer-secondary .footer_content_box { width: 85%; } } #footer-secondary h3 { font-size: 1rem; } #footer-secondary h3, #footer-secondary p { letter-spacing: 2px; } #footer-secondary li a { width: 100%; text-align: left; color: #6c6c6c; } #footer-secondary .navbar-nav { width: auto; } #footer-secondary .navbar-nav .nav-link { margin: 0; padding: 0; border-bottom: none; -webkit-transition: all 0.2s; transition: all 0.2s; } #footer-secondary .navbar-nav .nav-link:hover { color: #ef7086; } #footer-secondary .navbar-nav .nav-item { min-width: 105px; } @media (max-width: 767px) { #footer-secondary .navbar-nav .nav-item { min-width: auto; width: 90px; } #footer-secondary .navbar-nav .nav-link { font-size: 1rem; text-align: center; } } #footer-secondary .socail-link img { image-rendering: -webkit-optimize-contrast; -webkit-filter: invert(42%) sepia(0%) saturate(1863%) hue-rotate(226deg) brightness(100%) contrast(96%); filter: invert(42%) sepia(0%) saturate(1863%) hue-rotate(226deg) brightness(100%) contrast(96%); } #footer-secondary .socail-link img:hover { opacity: 0.8; } #footer-secondary .footer_text { margin-top: 15px; } @media (max-width: 767px) { #footer-secondary .footer_text p { font-size: 0.85rem; } } #footer-secondary .store_name { color: #ef7086; } #footer-secondary .store { width: 85%; margin: 0 auto; } #footer-secondary .store p { margin-top: 10px; } #footer-secondary .footer_logo img { position: relative; right: 30px; width: 250px; -o-object-fit: cover; object-fit: cover; } .gototop { position: fixed; right: 3vw; bottom: 0.5vw; z-index: 10; border-radius: 80px; font-size: 32px; color: #fff; width: 50px; height: 50px; background: #f4c0d0; cursor: pointer; } #banner-slide3 { margin-top: 100px; } @media screen and (max-width: 767px) { #banner-slide3 { margin-top: 30px; } } /* banner */ .facial-banner, .massage-banner, .store-banner { padding: 150px 0; position: relative; background-size: cover; background-repeat: no-repeat; image-rendering: -webkit-optimize-contrast; } .facial-banner p, .massage-banner p, .store-banner p { position: absolute; right: 50%; -webkit-transform: translate(50%, 50%); transform: translate(50%, 50%); font-size: 40px; color: white; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); } /* 臉部課程-facial start */ .facial-banner { background-image: url(/img/banner-facial.jpg); background-position: 25% 25%; } .facial-banner p { bottom: 45%; } .facial-content { margin: 100px auto; } .facial-content p { margin: 0; line-height: 32px; } .facial-content img { height: 250px; -o-object-fit: cover; object-fit: cover; } .facial-content button { display: none; padding: 7px 30px; position: absolute; bottom: -20px; right: 50%; -webkit-transform: translate(50%, 0); transform: translate(50%, 0); color: #ffffff; background-color: #ef7086; white-space: nowrap; font-weight: bold; -webkit-transition: all 0.3s; transition: all 0.3s; } @media screen and (max-width: 767px) { .facial-content button { display: block; } } .facial-content button::after { content: ""; display: inline-block; vertical-align: middle; width: 8px; height: 8px; margin: 0 0 2px 10px; border: 1px solid #fff; border-left: 0 none; border-bottom: 0 none; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .facial-content button:hover { color: #ffffff; background-color: #f4c0d0; } .facial-content .card { cursor: pointer; border: 1px solid #cccccc; } .facial-content .card .card-body { padding: 10px 20px 20px; } .facial-content .card:hover button { display: block; } .facial-content .card:hover .img-box img { -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } .facial-content .badge { height: 30px; line-height: 1.9; background-color: #ef7086; } .facial-content .img-box { overflow: hidden; } .facial-content .img-box img { width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; -webkit-transition: all 1s; transition: all 1s; image-rendering: -webkit-optimize-contrast; } .modal-header { border-bottom: none !important; } .modal-body { letter-spacing: 1px; } .modal-body p { line-height: 32px; } .modal-body h5 { font-size: 25px; } .modal-body img { border-radius: 20px; } .modal-body .price-box span { font-size: 18px; font-weight: bold; color: #ef7086; } .modal-body .price-box span:last-child { font-size: 16px; font-weight: normal; text-decoration: line-through; } .modal-body .recommend-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-top: 1px dashed #f4c0d0; } .modal-body .recommend-item span { width: 100px; padding: 10px; margin: 25px 0 15px; padding-left: 15px; letter-spacing: 5px; font-size: 16px; color: #ffffff; background-color: #ef7086; } .modal-body .recommend-item li { margin: 5px 0; } .modal-body section { height: 75%; } .time-box img { width: 18px; height: 18px; margin-right: 5px; image-rendering: -webkit-optimize-contrast; } .time-box p { margin: 0; font-size: 14px; color: #ef7086; } .time-box span { font-size: 20px; font-weight: bold; } .modal-body img { image-rendering: -webkit-optimize-contrast; } /* 臉部課程-facial end */ /* 門市資訊-store start */ .store-banner { background-image: url(/img/banner-store.jpg); background-position: 25% 30%; } .store-banner p { bottom: 45%; } .store-content { margin: 150px auto; letter-spacing: 1px; } .store-content i { color: #b2adae; font-size: 20px; } .store-content h3 { margin-bottom: 20px; font-weight: bold; color: #ef7086; } .store-content img { width: 100%; border-radius: 20px 0 0 20px; } @media (max-width: 767px) { .store-content img { border-radius: 20px 20px 0 0; } } .store-content .info-box { width: 270px; margin: auto; } @media (max-width: 375px) { .store-content .info-box { width: 100%; } } .store-content .Down_line { width: 230px; margin-top: -20px; } .store-content .row { margin: 15%; border: 1px solid #f4c0d0; border-radius: 20px; } @media (max-width: 1200px) { .store-content .row { margin: 10%; } } @media (max-width: 992px) { .store-content .row { margin: 0px; } } .store-content .google_map { width: 100%; padding: 7px 15px; margin-top: 1px; background: none; color: #3f51b5; border: 1px solid #3f51b5; border-radius: 3px; -webkit-transition: 0.3s; transition: 0.3s; font-size: 15px; letter-spacing: 1px; overflow-x: hidden; } .store-content .google_map a { text-decoration: none; color: #3f51b5; } .store-content .google_map:hover { background: #3f51b5; color: #fff; } .store-content .google_map:hover a { color: #fff; } .store-content .line_Reserve { width: 100%; margin-left: 10%; padding: 8px 15px; background: #52b448; color: #fff; border: 1px solid #52b448; border-radius: 5px; -webkit-transition: 0.3s; transition: 0.3s; font-size: 15px; letter-spacing: 1px; overflow-x: hidden; } .store-content .line_Reserve a { color: #fff; text-decoration: none; } .store-content .line_Reserve:hover { background: #fff; color: #52b448; } .store-content .line_Reserve:hover a { color: #52b448; } @media (max-width: 575px) { .store-content .line_Reserve { margin-left: 0; margin-top: 5%; } } @media (max-width: 992px) { .store-content p { font-size: 0.9rem; } .store-content h3 { font-size: 1.3rem; } } /* 門市資訊-store end */ /* 身體課程-massage start */ .massage-banner { background-image: url(/img/banner-massage.jpg); background-position: center; } .massage-banner p { bottom: 45%; } .massage-modal-item .modal-body .badge { width: auto; padding-left: 13px; letter-spacing: 2px; } /* 身體課程-massage end */ /* 關於我們-about start */ .about-content { margin-bottom: 100px; } .about-content p { padding: 0 60px; line-height: 35px; text-align: justify; } .about-content .title { font-size: 30px; letter-spacing: 3px; font-weight: bold; } .about-content .container { margin: 15% 5%; } .about-content .bg-item { height: 120%; background-color: #fff2f1; position: absolute; z-index: -1; bottom: -10%; left: -5%; width: 90%; } .about-content .iframe-box { position: relative; width: 100%; height: 0; padding-bottom: 73%; } .about-content .iframe-box video { position: absolute; top: 0; left: 0; height: 100%; -webkit-box-shadow: 0 0 10px rgba(32, 32, 32, 0.25); box-shadow: 0 0 10px rgba(32, 32, 32, 0.25); } .about-content .icon-box .row { padding: 0 30px; } @media (max-width: 1200px) { .about-content .icon-box .row { padding-left: 13%; } } @media (max-width: 768px) { .about-content .icon-box .row { padding: 0; } } .about-content .icon-box .col-6 { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } @media (max-width: 767px) { .about-content .icon-box .col-6 { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .about-content .icon-box img { width: 50px; image-rendering: -webkit-optimize-contrast; -webkit-filter: invert(71%) sepia(13%) saturate(3318%) hue-rotate(302deg) brightness(90%) contrast(110%); filter: invert(71%) sepia(13%) saturate(3318%) hue-rotate(302deg) brightness(90%) contrast(110%); } .about-content .icon-box span { margin: 15px; font-weight: bold; } .about-content .icon-box .icon-item { padding: 15px; margin: auto 0; border: 1px solid #f4c0d0; border-radius: 100%; } @media (max-width: 1200px) { .about-content .container { margin: 10% auto; } .about-content .container p { padding: 0; } .about-content .content-box { margin-top: 100px; } } /* 關於我們-about end */ .bottom_line { margin: 0px auto 20px; border: 1px solid transparent; background: -webkit-gradient(linear, left top, right top, from(white), to(white)), -webkit-gradient(linear, left top, right top, from(#f4c0d0), to(#d76478)); background: linear-gradient(to right, white, white), linear-gradient(to right, #f4c0d0, #d76478); background-clip: padding-box, border-box; background-origin: padding-box, border-box; width: 50px; } /*# sourceMappingURL=style.css.map */