@charset "UTF-8"; * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .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; } .learn_more { margin-top: 20px; padding: 5px; background: none; color: #CC7DB7; border-radius: 5px; border: 1px solid #CC7DB7; -webkit-transition: 0.3s; transition: 0.3s; } .learn_more:hover { color: #fff; background: #CC7DB7; } .course_name_title { font-size: 1.2rem; color: #9C27B0; font-weight: 900; } .course_name_text { color: #CC7DB7; margin-bottom: 5px; font-size: 1rem; } .Discounted_price { font-size: 24px; font-weight: 600; } .violetbeauty_content_title { color: #9C27B0; font-weight: 900; font-size: 1.8rem; } .violetbeauty_content_text { color: #9C27B0; font-size: 1rem; } .violetbeauty_content_text { color: #9C27B0; font-size: 1rem; } .features_title { font-weight: 900; letter-spacing: 2px; font: 1.9375em "微軟正黑體"; line-height: 25px; text-align: center; color: #452767; width: 100%; margin-bottom: 1rem; } .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 #CC7DB7; background: #fff; border-radius: 30px; color: #9C27B0; position: relative; -webkit-transition: 0.5s; transition: 0.5s; } .violetbeauty_CTA a { color: #9C27B0; } .violetbeauty_CTA .cta_flower { position: absolute; width: 60px; left: -25px; bottom: -10px; -webkit-transition: 0.5s; transition: 0.5s; } .violetbeauty_CTA:hover { background: #9C27B0; 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-link { font: 1.2rem 微軟正黑體; font-weight: 600; padding: 0.5rem 1rem; margin: 5px 1rem; text-align: center; color: #9C27B0; letter-spacing: 0; border-bottom: 5px solid #ffffff; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; } .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: #9C27B0; } .banner-slide .slick-dots { bottom: 30px; } .banner-slide .slick-dots li button:before { font-size: 16px; font-weight: 900; top: 15px; content: '○'; color: #82689d; } .banner-slide .slick-dots li.slick-active button:before { opacity: .75; color: #82689d; content: '●'; } .violetbeauty_sec00 { background: #F8F2F6; padding: 80px 0; position: relative; } .violetbeauty_sec00 .sec00_img1 { left: 0px; bottom: 20px; width: 300px; opacity: 0.8; } .violetbeauty_sec00 .sec00_img2 { right: 0px; top: 50px; width: 180px; opacity: 0.8; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .violetbeauty_sec00 .sec00_img3 { right: 100px; bottom: 80px; width: 60px; opacity: 0.5; -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } .violetbeauty_sec00 .violetbeauty_sec00_box { width: 80%; margin: 0 auto; } .violetbeauty_sec00 .violetbeauty_sec00_box .sec00_content_left_img { width: 60%; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } .violetbeauty_sec00 .violetbeauty_sec00_box .sec00_content_right { text-align: center; margin-top: 50px; } .violetbeauty_sec01, .violetbeauty_sec02 { padding: 50px 0; } .violetbeauty_sec01 .slick-prev:before, .violetbeauty_sec02 .slick-prev:before { content: ""; } .violetbeauty_sec01 .slick-next:before, .violetbeauty_sec02 .slick-next:before { content: ""; } .violetbeauty_sec01 .violetbeauty_sec01_box, .violetbeauty_sec02 .violetbeauty_sec01_box { width: 80%; margin: 0 auto; } .violetbeauty_sec01 .violetbeauty_sec01_content, .violetbeauty_sec02 .violetbeauty_sec01_content { margin-top: 30px; } .violetbeauty_sec01 .violetbeauty_sec01_content .sec01_slide_item, .violetbeauty_sec02 .violetbeauty_sec01_content .sec01_slide_item { padding: 20px; } .violetbeauty_sec01 .violetbeauty_sec01_content .sec01_slide_item img, .violetbeauty_sec02 .violetbeauty_sec01_content .sec01_slide_item img { -o-object-fit: cover; object-fit: cover; margin: 0 auto; } .violetbeauty_sec02 { background: #F8F2F6; } .violetbeauty_sec02 .card { background: #F8F2F6; } .violetbeauty_sec03 { padding: 100px 0; margin-bottom: 50px; position: relative; } .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; } .violetbeauty_sec03 .violetbeauty_sec03_box .violetbeauty_sec03_content { margin-top: 100px; } .violetbeauty_sec03 .violetbeauty_contract_form { width: 70%; margin: 0 auto; } .violetbeauty_sec03 .violetbeauty_contract_form #submitbutton { width: 100%; margin: 16px auto; border: none; padding: 16px 12px; background: #CC7DB7; color: #fff; font-size: 20px; border-radius: .25rem; text-align: center; vertical-align: middle; } .violetbeauty_sec03 .violetbeauty_contract_form #submitbutton:hover { color: #CC7DB7; background-color: #fff; border: 1px solid #CC7DB7; } .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); } .logo img { width: 300px; -o-object-fit: cover; object-fit: cover; } .violetbeauty_logo { width: 300px; -o-object-fit: cover; object-fit: cover; } #footer { background: #EDCDE1; } #footer .footer_content_box { padding: 100px 0; margin: 0 auto; width: 80%; } #footer h3 { font-size: 1.5rem; } #footer p { margin-bottom: 0.5rem; } #footer .socail-link a { margin-right: 8px; } #footer .footer_text { margin-top: 15px; } #footer .socail-link { margin-top: 30px; } #footer .store_name { color: #9C27B0; } #footer .store { width: 85%; margin: 0 auto; } #footer .store p { margin-top: 10px; } #footer .footer_logo img { position: relative; right: 30px; width: 300px; -o-object-fit: cover; object-fit: cover; } #footer .google_map { width: 47%; padding: 15px 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: 45%; margin-left: 5%; 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; } .gototop { position: fixed; right: 3vw; bottom: 0.5vw; z-index: 10; border-radius: 80px; font-size: 32px; color: #fff; width: 50px; height: 50px; background: #CC7DB7; cursor: pointer; } /*# sourceMappingURL=style.css.map */