change maincolor

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

coursecontent.json

@@ -0,0 +1,57 @@
+[
+    {
+        "Courseid":"1",
+        "CourseTitle":"韓國小氣泡水嫩課程",
+        "Coursetext":"原價6600 體驗1699 /70分 採用納米級的水氣泡，配合真空負壓原理，形成真空迴路，將超細微小氣泡和水分充分結合，通過特殊設計的螺旋形吸頭直接作用於皮膚，且能夠保持超細微小氣泡長時間接觸皮膚，促進剝離作用。潔角質層，改善黑頭粉刺，驅除油脂汙垢，使皮膚通透有光澤，提供持久的含水量，使皮膚濕潤、細膩有光澤。",
+        "CourseImg":"https://img.holkee.com/site/upload/5ed5c6c4-77367dcbb-9908-96b7db46/fb3d64b06a36b796bbf5b60fe02cd5c5_double.jpg"
+    },
+    {
+        "Courseid":"2",
+        "CourseTitle":"四合一護膚課程",
+        "Coursetext":"原價3600 體驗1800 /90分鎖水保濕，調理肌膚紋路，展現肌膚自然光澤。保濕是肌膚保養最基礎且重要的步驟！做好完整保濕，肌膚就能柔軟、有彈性、明亮有光澤。本課程選用高機能修護系列系列產品，調整肌膚紋裡還原透亮，獨家清粉刺技術，用特殊的產品讓粉刺自動上浮，以自然柔軟的手法輕柔挑除，不破壞毛孔，讓粉刺清潔溜溜。以一分鐘導入10公斤的氧氣順帶注入安瓶，讓保濕精華直達基底，立即為肌膚補充水份，使皮膚光滑細緻，充滿年輕光采。由美容顧問挑選適合的面膜使肌膚保濕柔嫩，拒當乾妹妹。包含2種儀器以及按摩清粉刺! 招牌課程",
+        "CourseImg":"https://img.holkee.com/site/upload/5ed5c6c4-77367dcbb-9908-96b7db46/43d9c2fee8037323b13304419d28e5e4_double.jpg"
+    },
+    {
+        "Courseid":"3",
+        "CourseTitle":"五行氣穴調理課程",
+        "Coursetext":"原價4400 體驗 1288 /40分藉由中醫理論五行學說，透過美容師手勁與技巧將阻塞處舒展，達到通筋通便活絡氣血效應，達到陰陽流暢，全程手技，使用原始原點精油，刺激身體各部位穴點，與一般經絡按摩較不同! 愛按摩的你絕不能錯過。",
+        "CourseImg":"https://img.holkee.com/site/upload/5ed5c6c4-77367dcbb-9908-96b7db46/1774d04118ce7e7049131e907adc689f_double.jpg"
+    },
+    {
+        "Courseid":"4",
+        "CourseTitle":"液態皮秒課程",
+        "Coursetext":"原價8800 體驗 2200 /60分改善毛孔阻塞造成的粗大問題，改善留下在臉上的痘印、色素沈澱，刺激膠原蛋白增生、撫平肌膚，活化膚質狀況,改善痘痘肌，自然光澤細緻感,上妝能更服貼，改善細紋斑點、蠟黃暗沉,拉提緊緻。想擁有偶像般的水煮肌膚!絕不能錯過。",
+        "CourseImg":"https://img.holkee.com/site/upload/5ed5c6c4-77367dcbb-9908-96b7db46/53636fa6697b43a63894992c038fc3de_double.jpg"
+    },
+    {
+        "Courseid":"5",
+        "CourseTitle":"煥顏淨化課程",
+        "Coursetext":"原價1499 體驗1200 /60分擾人T字粉刺、粗糙皮膚OUT空氣汙染、灰塵、彩妝品、及皮脂線所排出的油脂推積，毛孔裡的黑頭粉刺、白頭粉刺困擾你很久了嗎？獨家清粉刺技術，用淨化調理水的產品 在蒸臉使用。按摩時 鬆動毛孔。以柔軟清粉刺的手法。不破壞毛孔，讓毛孔清潔溜溜。",
+        "CourseImg":"https://img.holkee.com/site/upload/5ed5c6c4-77367dcbb-9908-96b7db46/9ab6c6c02f937f33acccf2ab25ce1520_double.jpg"
+    },
+    {
+        "Courseid":"6",
+        "CourseTitle":"極效淨白課程",
+        "Coursetext":"原價2200 體驗 1600 /75分冷凍傳導是一種高科技的儀器運用電子冷熱半導體，使探頭前方能持續保持-15℃的低溫。能夠收縮毛孔、舒緩日曬後曬傷的肌膚、鎮定安撫肌膚、增加保養品的吸收效率、平衡肌膚油脂等用途。強迫皮膚吸收，使用極效淨白安瓶，內含十二胜肽，微脂囊劑型，直接滲透肌膚最底層，抑制黑色素生長!",
+        "CourseImg":"https://img.holkee.com/site/upload/5ed5c6c4-77367dcbb-9908-96b7db46/c7d0cac7947cdbea8f27e46fb97ef89a_double.jpg"
+    },
+    {
+        "Courseid":"7",
+        "CourseTitle":"波動舒活經絡課程",
+        "Coursetext":"背部原價6800 體驗1200 /60分久坐、久站或長期的姿勢不良，讓妳經常腰酸背痛嗎？姿勢不良所引起的駝背、五十肩等症狀，是現代人常有的小毛病。從課程一開始的背部開穴，就讓你感受到我們的用心，手技搭配儀器，不再是單純肌肉放鬆，針對氣血循環，功力深厚的技巧，專業的儀器走向，完全放鬆你的身心靈。",
+        "CourseImg":"https://img.holkee.com/site/upload/5ed5c6c4-77367dcbb-9908-96b7db46/30813b710f1cdb61435a7b8f60bfaab2_double.jpg"
+    },
+    {
+        "Courseid":"8",
+        "CourseTitle":"淨透無暇美背",
+        "Coursetext":"原價6600 體驗2200 /80分 我們的背部其實常常會被忽略，但它確是出油量高，容易堆積粉刺痘痘跟角質的地方，堆積多了看起來就容易暗沉，而且是不易清潔到的，所以搭配我們的核桃角質霜，去除我們背部多餘的角質讓我們的背部看起來細緻柔嫩白皙。想要光滑細緻的美背，定期去角質一定不可少，自己做身體保養不方便，就交給專業的我們吧！",
+        "CourseImg":"https://img.holkee.com/site/upload/5ed5c6c4-77367dcbb-9908-96b7db46/09d78d0ac87ded19533adbb3993d2bcd_double.jpg"
+    },
+    {
+        "Courseid":"9",
+        "CourseTitle":"五行水晶能量岩盤浴",
+        "Coursetext":"原價1200 體驗 800 /40分岩盤浴是藉由天然的能量水晶放射岀遠紅外線，達到以身體流汗的方式，促進代謝。岩盤浴使用的岩盤當中釋放的天然負離子，是只有在大自然的環境中，與天然紫外線及太陽風所產生反應的地方才有的，例如森林、海岸或者空氣沒有被污染的大自然。因為有還原氧化作用，可將體內多餘的水分及不需要的東西排出，除了排汗，還有促進新陳代謝的效果。",
+        "CourseImg":"https://img.holkee.com/site/upload/5ed5c6c4-77367dcbb-9908-96b7db46/cdbe98390b0f455ff4e3afb58419bbd1_double.jpg"
+    }
+
+]

css/style.css

@@ -6,6 +6,15 @@
           box-sizing: border-box;
 }
 
+#top {
+  overflow-x: hidden !important;
+}
+
+.crown {
+  color: #F7C728;
+  font-size: 20px;
+}
+
 .playbutton {
   cursor: pointer;
   position: absolute;
@@ -22,30 +31,46 @@
   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: #CC7DB7;
+  color: #f4c0d0;
   border-radius: 5px;
-  border: 1px solid #CC7DB7;
+  border: 1px solid #f4c0d0;
   -webkit-transition: 0.3s;
   transition: 0.3s;
 }
 
 .learn_more:hover {
   color: #fff;
-  background: #CC7DB7;
+  background: #f4c0d0;
 }
 
 .course_name_title {
   font-size: 1.2rem;
-  color: #9C27B0;
+  color: #ef7086;
   font-weight: 900;
 }
 
 .course_name_text {
-  color: #CC7DB7;
+  color: #f4c0d0;
   margin-bottom: 5px;
   font-size: 1rem;
 }
@@ -56,18 +81,13 @@
 }
 
 .violetbeauty_content_title {
-  color: #9C27B0;
+  color: #ef7086;
   font-weight: 900;
   font-size: 1.8rem;
 }
 
 .violetbeauty_content_text {
-  color: #9C27B0;
-  font-size: 1rem;
-}
-
-.violetbeauty_content_text {
-  color: #9C27B0;
+  color: #ef7086;
   font-size: 1rem;
 }
 
@@ -77,7 +97,7 @@
   font: 1.9375em "微軟正黑體";
   line-height: 25px;
   text-align: center;
-  color: #452767;
+  color: #ef7086;
   width: 100%;
   margin-bottom: 1rem;
 }
@@ -100,17 +120,17 @@
 .violetbeauty_CTA {
   margin-top: 50px;
   padding: 10px 50px;
-  border: 1px solid #CC7DB7;
+  border: 1px solid #f4c0d0;
   background: #fff;
   border-radius: 30px;
-  color: #9C27B0;
+  color: #ef7086;
   position: relative;
   -webkit-transition: 0.5s;
   transition: 0.5s;
 }
 
 .violetbeauty_CTA a {
-  color: #9C27B0;
+  color: #ef7086;
 }
 
 .violetbeauty_CTA .cta_flower {
@@ -123,7 +143,7 @@
 }
 
 .violetbeauty_CTA:hover {
-  background: #9C27B0;
+  background: #ef7086;
   color: #fff;
 }
 
@@ -151,7 +171,7 @@
   padding: 0.5rem 1rem;
   margin: 5px  1rem;
   text-align: center;
-  color: #9C27B0;
+  color: #ef7086;
   letter-spacing: 0;
   border-bottom: 5px solid #ffffff;
   -webkit-box-sizing: border-box;
@@ -169,7 +189,7 @@
 
 .sec_content_right_text p {
   margin-bottom: 0.5rem;
-  color: #9C27B0;
+  color: #ef7086;
 }
 
 .banner-slide .slick-dots {
@@ -263,17 +283,64 @@
 }
 
 .violetbeauty_sec01 .violetbeauty_sec01_content .sec01_slide_item img, .violetbeauty_sec02 .violetbeauty_sec01_content .sec01_slide_item img {
+  height: 250px;
   -o-object-fit: cover;
      object-fit: cover;
   margin: 0 auto;
 }
 
 .violetbeauty_sec02 {
-  background: #F8F2F6;
+  background: #f4c0d0;
 }
 
 .violetbeauty_sec02 .card {
-  background: #F8F2F6;
+  background: #f4c0d0;
+}
+
+.violetbeauty_sec02 .violetbeauty_sec02_content {
+  margin-top: 30px;
+}
+
+.violetbeauty_sec02 .violetbeauty_sec02_content .violetbeauty_sec02_sub_title {
+  font-family: 'Noto Sans TC', sans-serif;
+  font-size: 20px;
+  font-weight: normal;
+  color: #ef7086;
+}
+
+.violetbeauty_sec02 .violetbeauty_sec02_content b {
+  width: 10px;
+  height: 10px;
+  background: #ef7086;
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+  margin: 1rem 0;
+  display: inline-block;
+}
+
+.violetbeauty_sec02 .sec02_slide_item {
+  padding: 30px;
+}
+
+.violetbeauty_sec02 .violetbeauty_service_img img {
+  width: 290px;
+  height: 290px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  border-radius: 50%;
+  margin: 0 auto;
+}
+
+.violetbeauty_sec02 .violetbeauty_service p {
+  margin: 10px 0;
+  font-family: 'Noto Sans TC', sans-serif;
+  font-size: 16px;
+  color: #ef7086;
+  display: inline-block;
+  width: 90%;
+  border-bottom: 1px dashed #ef7086;
+  padding: 0.5rem 0;
+  cursor: pointer;
 }
 
 .violetbeauty_sec03 {
@@ -330,7 +397,7 @@
   margin: 16px auto;
   border: none;
   padding: 16px 12px;
-  background: #CC7DB7;
+  background: #f4c0d0;
   color: #fff;
   font-size: 20px;
   border-radius: .25rem;
@@ -339,9 +406,9 @@
 }
 
 .violetbeauty_sec03 .violetbeauty_contract_form #submitbutton:hover {
-  color: #CC7DB7;
+  color: #f4c0d0;
   background-color: #fff;
-  border: 1px solid #CC7DB7;
+  border: 1px solid #f4c0d0;
 }
 
 .violetbeauty_sec03 .violetbeauty_contract_form #time, .violetbeauty_sec03 .violetbeauty_contract_form #datepicker {
@@ -412,7 +479,7 @@
 }
 
 #footer .store_name {
-  color: #9C27B0;
+  color: #ef7086;
 }
 
 #footer .store {
@@ -496,7 +563,7 @@
   color: #fff;
   width: 50px;
   height: 50px;
-  background: #CC7DB7;
+  background: #f4c0d0;
   cursor: pointer;
 }
 /*# sourceMappingURL=style.css.map */

css/style.scss

@@ -4,7 +4,15 @@
     box-sizing: border-box;
 }
 
-$mainclolr:#9C27B0;
+$maincolor:#ef7086;
+$subcolor:#f4c0d0;
+#top{
+    overflow-x: hidden !important;
+}
+.crown{
+color:#F7C728;
+font-size: 20px;
+}
 .playbutton {
     cursor: pointer;
     position:absolute;
@@ -17,27 +25,43 @@ $mainclolr:#9C27B0;
         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;
+    img{
+        width: 40px;
+     
+
+    }
+}
 .learn_more{
     margin-top: 20px;
     padding: 5px;
     background: none;
-    color:#CC7DB7;
+    color:$subcolor;
     border-radius: 5px;
-    border:1px solid #CC7DB7;
+    border:1px solid $subcolor;
     // border:none;
     transition: 0.3s;
     &:hover{
         color:#fff;
-        background:#CC7DB7;
+        background:$subcolor;
     }
 }
 .course_name_title{
     font-size: 1.2rem;
-    color:$mainclolr;
+    color:$maincolor;
     font-weight: 900;
 }
 .course_name_text{
-    color:#CC7DB7;
+    color:$subcolor;
     margin-bottom: 5px;
     font-size: 1rem;
 }
@@ -46,25 +70,22 @@ $mainclolr:#9C27B0;
     font-weight: 600;
 }
 .violetbeauty_content_title{
-    color:$mainclolr;
+    color:$maincolor;
     font-weight: 900;
     font-size: 1.8rem;
 }
 .violetbeauty_content_text{
-    color:$mainclolr;
-    font-size: 1rem;
-}
-.violetbeauty_content_text{
-    color:$mainclolr;
+    color:$maincolor;
     font-size: 1rem;
 }
+
 .features_title{
     font-weight: 900;
     letter-spacing: 2px;
     font: 1.9375em "微軟正黑體";
     line-height: 25px;
     text-align: center;
-    color: #452767;
+    color: $maincolor;
     width: 100%;
     margin-bottom: 1rem;
 
@@ -84,14 +105,14 @@ $mainclolr:#9C27B0;
 .violetbeauty_CTA{
     margin-top: 50px;
     padding: 10px 50px;
-    border:1px solid #CC7DB7;
+    border:1px solid $subcolor;
     background:#fff;
     border-radius: 30px;
-    color:#9C27B0;
+    color:$maincolor;
     position: relative;
     transition: 0.5s;
     a{
-        color:#9C27B0;
+        color:$maincolor;
     }
     .cta_flower{
         position: absolute;
@@ -101,7 +122,7 @@ $mainclolr:#9C27B0;
         transition: 0.5s;
     }
     &:hover{
-        background:#9C27B0;
+        background:$maincolor;
         a{
             color:#fff;
         }
@@ -124,7 +145,7 @@ $mainclolr:#9C27B0;
         padding: 0.5rem 1rem;
         margin:5px  1rem;
         text-align: center;
-        color: $mainclolr;
+        color: $maincolor;
         letter-spacing: 0;
         border-bottom: 5px solid #ffffff;
         box-sizing: border-box;
@@ -139,7 +160,7 @@ $mainclolr:#9C27B0;
     margin-top: 30px;
     p{
         margin-bottom: 0.5rem;
-        color:$mainclolr;
+        color:$maincolor;
     }
 }
 .banner-slide{
@@ -231,7 +252,7 @@ $mainclolr:#9C27B0;
             padding: 20px;
             img{
                 // width: 180px;
-                // height: 250px;
+                height: 250px;
                 object-fit: cover;
                 margin: 0 auto;
             }
@@ -240,10 +261,73 @@ $mainclolr:#9C27B0;
 }
 
 .violetbeauty_sec02{
-    background: #F8F2F6;
+    background: $subcolor;
     .card{
-        background: #F8F2F6;
+        background: $subcolor;
+    }
+    .violetbeauty_sec02_content{
+        margin-top: 30px;
+        .violetbeauty_sec02_sub_title{
+            font-family: 'Noto Sans TC', sans-serif;
+            font-size: 20px;
+            font-weight: normal;
+            color:$maincolor;
+        }
+        b {
+            width: 10px;
+            height: 10px;
+            background: $maincolor;
+            transform: rotate(45deg);
+            margin: 1rem 0;
+            display: inline-block;
+        }
+    }
+    .sec02_slide_item{
+        padding: 30px;
+    }
+    .violetbeauty_service_img{
+
+        img{
+            width: 290px;
+            height: 290px;
+            object-fit: cover;
+            border-radius: 50%;
+            margin: 0 auto;
+            
+        }
     }
+    .violetbeauty_service p{
+        margin: 10px 0;
+        font-family: 'Noto Sans TC', sans-serif;
+        font-size: 16px;
+        color: $maincolor;
+        display: inline-block;
+        width: 90%;
+        border-bottom: 1px dashed $maincolor;
+        padding: 0.5rem 0;
+        cursor: pointer;
+    }
+    // .violetbeauty_service_item,p{
+    //     margin: 10px 0;
+    //     font-family: 'Noto Sans TC', sans-serif;
+    //     font-size: 16px;
+    //     color: #CC7DB7;
+    //     display: inline-block;
+    //     width: 100%;
+    //     border-bottom: 1px dashed $maincolor;
+        
+    //     padding:0 1rem;
+    //     display: -webkit-box;
+    //     display: -ms-flexbox;
+    //     display: flex;
+    //     -webkit-box-pack: justify;
+    //     -ms-flex-pack: justify;
+    //     justify-content: space-around;;
+    //     -webkit-box-align: center;
+    //     -ms-flex-align: center;
+    //     align-items: center;
+    // }
+   
 }
 
 .violetbeauty_sec03{
@@ -293,16 +377,16 @@ $mainclolr:#9C27B0;
             margin: 16px auto;
             border: none;
             padding: 16px 12px;
-            background: #CC7DB7;
+            background: $subcolor;
             color: #fff;
             font-size: 20px;
             border-radius: .25rem;
             text-align: center;
             vertical-align: middle;
             &:hover {
-                color: #CC7DB7;
+                color: $subcolor;
                 background-color: #fff;
-                border:1px solid #CC7DB7;
+                border:1px solid $subcolor;
             }
         }
         #time,#datepicker{
@@ -420,7 +504,7 @@ $mainclolr:#9C27B0;
         margin-top: 30px;
     }
     .store_name{
-        color:$mainclolr;
+        color:$maincolor;
     }
     .store{
         width: 85%;
@@ -495,7 +579,7 @@ $mainclolr:#9C27B0;
     color:#fff;
     width: 50px;
     height: 50px;
-    background: #CC7DB7;
+    background: $subcolor;
     cursor: pointer;
    
 }

index.html

@@ -233,184 +233,185 @@
                                             體驗價
                                         </span>
                                         <span class="Discounted＿price">
-                                            $800
+                                            $1,699
                                         </span>
                                         <p style="text-decoration:line-through;">
-                                            原價：$1,200
+                                            原價：$6,600
                                         </p>
                                     </div>
                                     <div style="width: 40%;" class="text-end">
-                                        <button type="button" class="learn_more" data-bs-target="#course_int"
-                                            data-bs-toggle="modal">詳細資訊</button>
+                                        <button type="button" class="learn_more" data-info="1"
+                                            data-bs-target="#course_int" data-bs-toggle="modal">詳細資訊</button>
                                     </div>
                                 </div>
                             </div>
                         </div>
                         <div class="card sec01_slide_item">
-                            <img class="img-fluid" src="./img/violetbeauty/sec00.jpg" class="card-img-top" alt="...">
+                            <img class="img-fluid" src="./img/violetbeauty/slide02.png" class="card-img-top" alt="...">
                             <div class="card-body">
-                                <p class="course_name_title">韓國 小氣泡水嫩課程</p>
+                                <p class="course_name_title">四合一護膚課程</p>
                                 <div class="course_name_text d-flex">
                                     <div style="width: 60%;">
                                         <span>
                                             體驗價
                                         </span>
                                         <span class="Discounted＿price">
-                                            $800
+                                            $1,800
                                         </span>
                                         <p style="text-decoration:line-through;">
-                                            原價：$1,200
+                                            原價：$3,600
                                         </p>
                                     </div>
                                     <div style="width: 40%;" class="text-end">
-                                        <button type="button" class="learn_more" data-bs-target="#course_int"
-                                            data-bs-toggle="modal">詳細資訊</button>
+                                        <button type="button" class="learn_more" data-info="2"
+                                            data-bs-target="#course_int" data-bs-toggle="modal">詳細資訊</button>
                                     </div>
                                 </div>
                             </div>
                         </div>
                         <div class="card sec01_slide_item">
-                            <img class="img-fluid" src="./img/violetbeauty/sec00.jpg" class="card-img-top" alt="...">
+                            <img class="img-fluid" src="./img/violetbeauty/slide3.png" class="card-img-top" alt="...">
                             <div class="card-body">
-                                <p class="course_name_title">韓國 小氣泡水嫩課程</p>
+                                <p class="course_name_title">五行氣穴調理課程</p>
                                 <div class="course_name_text d-flex">
                                     <div style="width: 60%;">
                                         <span>
                                             體驗價
                                         </span>
                                         <span class="Discounted＿price">
-                                            $800
+                                            $1,288
                                         </span>
                                         <p style="text-decoration:line-through;">
-                                            原價：$1,200
+                                            原價：$4,400
                                         </p>
                                     </div>
                                     <div style="width: 40%;" class="text-end">
-                                        <button type="button" class="learn_more" data-bs-target="#course_int"
-                                            data-bs-toggle="modal">詳細資訊</button>
+                                        <button type="button" class="learn_more" data-info="3"
+                                            data-bs-target="#course_int" data-bs-toggle="modal">詳細資訊</button>
                                     </div>
                                 </div>
                             </div>
                         </div>
+
                         <div class="card sec01_slide_item">
-                            <img class="img-fluid" src="./img/violetbeauty/sec00.jpg" class="card-img-top" alt="...">
+                            <img class="img-fluid" src="./img/violetbeauty/slide4.png" class="card-img-top" alt="...">
                             <div class="card-body">
-                                <p class="course_name_title">韓國 小氣泡水嫩課程</p>
+                                <p class="course_name_title">液態皮秒課程</p>
                                 <div class="course_name_text d-flex">
                                     <div style="width: 60%;">
                                         <span>
                                             體驗價
                                         </span>
                                         <span class="Discounted＿price">
-                                            $800
+                                            $2,200
                                         </span>
                                         <p style="text-decoration:line-through;">
-                                            原價：$1,200
+                                            原價：$8,800
                                         </p>
                                     </div>
                                     <div style="width: 40%;" class="text-end">
-                                        <button type="button" class="learn_more" data-bs-target="#course_int"
-                                            data-bs-toggle="modal">詳細資訊</button>
+                                        <button type="button" class="learn_more" data-info="4"
+                                            data-bs-target="#course_int" data-bs-toggle="modal">詳細資訊</button>
                                     </div>
                                 </div>
                             </div>
                         </div>
                         <div class="card sec01_slide_item">
-                            <img class="img-fluid" src="./img/violetbeauty/sec00.jpg" class="card-img-top" alt="...">
+                            <img class="img-fluid" src="./img/violetbeauty/slide5.jpg" class="card-img-top" alt="...">
                             <div class="card-body">
-                                <p class="course_name_title">韓國 小氣泡水嫩課程</p>
+                                <p class="course_name_title">煥顏淨化課程</p>
                                 <div class="course_name_text d-flex">
                                     <div style="width: 60%;">
                                         <span>
                                             體驗價
                                         </span>
                                         <span class="Discounted＿price">
-                                            $800
+                                            $1,200
                                         </span>
                                         <p style="text-decoration:line-through;">
-                                            原價：$1,200
+                                            原價：$1,499
                                         </p>
                                     </div>
                                     <div style="width: 40%;" class="text-end">
-                                        <button type="button" class="learn_more" data-bs-target="#course_int"
-                                            data-bs-toggle="modal">詳細資訊</button>
+                                        <button type="button" class="learn_more" data-info="5"
+                                            data-bs-target="#course_int" data-bs-toggle="modal">詳細資訊</button>
                                     </div>
                                 </div>
                             </div>
                         </div>
                         <div class="card sec01_slide_item">
-                            <img class="img-fluid" src="./img/violetbeauty/sec00.jpg" class="card-img-top" alt="...">
+                            <img class="img-fluid" src="./img/violetbeauty/slide6.jpg" class="card-img-top" alt="...">
                             <div class="card-body">
-                                <p class="course_name_title">韓國 小氣泡水嫩課程</p>
+                                <p class="course_name_title">極效淨白課程</p>
                                 <div class="course_name_text d-flex">
                                     <div style="width: 60%;">
                                         <span>
                                             體驗價
                                         </span>
                                         <span class="Discounted＿price">
-                                            $800
+                                            $1,600
                                         </span>
                                         <p style="text-decoration:line-through;">
-                                            原價：$1,200
+                                            原價：$2,200
                                         </p>
                                     </div>
                                     <div style="width: 40%;" class="text-end">
-                                        <button type="button" class="learn_more" data-bs-target="#course_int"
-                                            data-bs-toggle="modal">詳細資訊</button>
+                                        <button type="button" class="learn_more" data-info="6"
+                                            data-bs-target="#course_int" data-bs-toggle="modal">詳細資訊</button>
                                     </div>
                                 </div>
                             </div>
                         </div>
                         <div class="card sec01_slide_item">
-                            <img class="img-fluid" src="./img/violetbeauty/sec00.jpg" class="card-img-top" alt="...">
+                            <img class="img-fluid" src="./img/violetbeauty/slide7.jpg" class="card-img-top" alt="...">
                             <div class="card-body">
-                                <p class="course_name_title">韓國 小氣泡水嫩課程</p>
+                                <p class="course_name_title">波動舒活經絡課程</p>
                                 <div class="course_name_text d-flex">
                                     <div style="width: 60%;">
                                         <span>
                                             體驗價
                                         </span>
                                         <span class="Discounted＿price">
-                                            $800
+                                            $1,200
                                         </span>
                                         <p style="text-decoration:line-through;">
-                                            原價：$1,200
+                                            原價：$6,800
                                         </p>
                                     </div>
                                     <div style="width: 40%;" class="text-end">
-                                        <button type="button" class="learn_more" data-bs-target="#course_int"
-                                            data-bs-toggle="modal">詳細資訊</button>
+                                        <button type="button" class="learn_more" data-info="7"
+                                            data-bs-target="#course_int" data-bs-toggle="modal">詳細資訊</button>
                                     </div>
                                 </div>
                             </div>
                         </div>
                         <div class="card sec01_slide_item">
-                            <img class="img-fluid" src="./img/violetbeauty/sec00.jpg" class="card-img-top" alt="...">
+                            <img class="img-fluid" src="./img/violetbeauty/slide8.jpg" class="card-img-top" alt="...">
                             <div class="card-body">
-                                <p class="course_name_title">韓國 小氣泡水嫩課程</p>
+                                <p class="course_name_title">淨透無暇美背</p>
                                 <div class="course_name_text d-flex">
                                     <div style="width: 60%;">
                                         <span>
                                             體驗價
                                         </span>
                                         <span class="Discounted＿price">
-                                            $800
+                                            $2,200
                                         </span>
                                         <p style="text-decoration:line-through;">
-                                            原價：$1,200
+                                            原價：$6,600
                                         </p>
                                     </div>
                                     <div style="width: 40%;" class="text-end">
-                                        <button type="button" class="learn_more" data-bs-target="#course_int"
-                                            data-bs-toggle="modal">詳細資訊</button>
+                                        <button type="button" class="learn_more" data-info="8"
+                                            data-bs-target="#course_int" data-bs-toggle="modal">詳細資訊</button>
                                     </div>
                                 </div>
                             </div>
                         </div>
                         <div class="card sec01_slide_item">
-                            <img class="img-fluid" src="./img/violetbeauty/sec00.jpg" class="card-img-top" alt="...">
+                            <img class="img-fluid" src="./img/violetbeauty/slide9.jpg" class="card-img-top" alt="...">
                             <div class="card-body">
-                                <p class="course_name_title">韓國 小氣泡水嫩課程</p>
+                                <p class="course_name_title">五行水晶能量岩盤浴</p>
                                 <div class="course_name_text d-flex">
                                     <div style="width: 60%;">
                                         <span>
@@ -424,8 +425,8 @@
                                         </p>
                                     </div>
                                     <div style="width: 40%;" class="text-end">
-                                        <button type="button" class="learn_more" data-bs-target="#course_int"
-                                            data-bs-toggle="modal">詳細資訊</button>
+                                        <button type="button" class="learn_more" data-info="9"
+                                            data-bs-target="#course_int" data-bs-toggle="modal">詳細資訊</button>
                                     </div>
                                 </div>
                             </div>
@@ -445,236 +446,191 @@
         <section id="violetbeauty_sec02_CTA" class="violetbeauty_sec02">
             <div class="violetbeauty_sec01_box">
                 <div class="features">
-                    <div class="features_title fw-bold">美體護理</div>
+                    <div class="features_title fw-bold">紫晴的服務</div>
                     <div class="text-center">
                         <img class="Down_line" src="./img/line.png" alt="">
                     </div>
                 </div>
-                <div class="violetbeauty_sec01_content">
-                    <div class="violetbeauty_sec01_slide">
-
-                        <div class="card sec01_slide_item">
-                            <img class="img-fluid" src="./img/violetbeauty/sec00.jpg" class="card-img-top" alt="...">
-                            <div class="card-body">
-                                <p class="course_name_title">韓國 小氣泡水嫩課程</p>
-                                <div class="course_name_text d-flex">
-                                    <div style="width: 60%;">
-                                        <span>
-                                            體驗價
-                                        </span>
-                                        <span class="Discounted＿price">
-                                            $800
-                                        </span>
-                                        <p style="text-decoration:line-through;">
-                                            原價：$1,200
-                                        </p>
-                                    </div>
-                                    <div style="width: 40%;" class="text-end">
-                                        <button type="button" class="learn_more" data-bs-target="#course_int"
-                                            data-bs-toggle="modal">詳細資訊</button>
-                                    </div>
-                                </div>
+                <div class="violetbeauty_sec02_content">
+                    <div class="violetbeauty_sec02_slide">
+                        <div class="card sec02_slide_item">
+                            <div class="text-center">
+                                <p class="violetbeauty_sec02_sub_title text-center mb-0">想抗痘看這裡</p>
+                                <b></b>
                             </div>
-                        </div>
-                        <div class="card sec01_slide_item">
-                            <img class="img-fluid" src="./img/violetbeauty/sec00.jpg" class="card-img-top" alt="...">
-                            <div class="card-body">
-                                <p class="course_name_title">韓國 小氣泡水嫩課程</p>
-                                <div class="course_name_text d-flex">
-                                    <div style="width: 60%;">
-                                        <span>
-                                            體驗價
-                                        </span>
-                                        <span class="Discounted＿price">
-                                            $800
-                                        </span>
-                                        <p style="text-decoration:line-through;">
-                                            原價：$1,200
-                                        </p>
-                                    </div>
-                                    <div style="width: 40%;" class="text-end">
-                                        <button type="button" class="learn_more" data-bs-target="#course_int"
-                                            data-bs-toggle="modal">詳細資訊</button>
-                                    </div>
-                                </div>
+                            <br>
+                            <div class="violetbeauty_service_img">
+                                <img src="./img/violetbeauty/karelys-ruiz-PqyzuzFiQfY-unsplash.png" class="card-img-top"
+                                    alt="...">
                             </div>
-                        </div>
-                        <div class="card sec01_slide_item">
-                            <img class="img-fluid" src="./img/violetbeauty/sec00.jpg" class="card-img-top" alt="...">
                             <div class="card-body">
-                                <p class="course_name_title">韓國 小氣泡水嫩課程</p>
-                                <div class="course_name_text d-flex">
-                                    <div style="width: 60%;">
-                                        <span>
-                                            體驗價
-                                        </span>
-                                        <span class="Discounted＿price">
-                                            $800
-                                        </span>
-                                        <p style="text-decoration:line-through;">
-                                            原價：$1,200
-                                        </p>
-                                    </div>
-                                    <div style="width: 40%;" class="text-end">
-                                        <button type="button" class="learn_more" data-bs-target="#course_int"
-                                            data-bs-toggle="modal">詳細資訊</button>
+                                <div class="violetbeauty_service text-center">
+                                    <p>粉刺淨化課程</p>
+                                    <p>戰鬥調理課程</p>
+                                    <p>小氣泡水嫩課程</p>
+                                    <p><i class="fas fa-crown crown me-1"></i>虹鑽黑晶煥顏課程</p>
+
+                                    <!-- <div class="violetbeauty_service_item">
+                                        <div>
+                                            <p>粉刺淨化課程</p>
+                                        </div>
+                                        <div>
+                                            <p style="text-decoration:line-through;">原價$1,600</p>
+                                            <p>體驗價$1,200</p>
+                                        </div>
                                     </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="card sec01_slide_item">
-                            <img class="img-fluid" src="./img/violetbeauty/sec00.jpg" class="card-img-top" alt="...">
-                            <div class="card-body">
-                                <p class="course_name_title">韓國 小氣泡水嫩課程</p>
-                                <div class="course_name_text d-flex">
-                                    <div style="width: 60%;">
-                                        <span>
-                                            體驗價
-                                        </span>
-                                        <span class="Discounted＿price">
-                                            $800
-                                        </span>
-                                        <p style="text-decoration:line-through;">
-                                            原價：$1,200
-                                        </p>
+                                    <div class="violetbeauty_service_item">
+                                        <div>
+                                            <p>粉刺淨化課程</p>
+                                        </div>
+                                        <div>
+                                            <p style="text-decoration:line-through;">原價$1,600</p>
+                                            <p>體驗價$1,200</p>
+                                        </div>
                                     </div>
-                                    <div style="width: 40%;" class="text-end">
-                                        <button type="button" class="learn_more" data-bs-target="#course_int"
-                                            data-bs-toggle="modal">詳細資訊</button>
+                                    <div class="violetbeauty_service_item">
+                                        <div>
+                                            <p>粉刺淨化課程</p>
+                                        </div>
+                                        <div>
+                                            <p style="text-decoration:line-through;">原價$1,600</p>
+                                            <p>體驗價$1,200</p>
+                                        </div>
                                     </div>
+                                    <div class="violetbeauty_service_item">
+                                        <div>
+                                            <p>粉刺淨化課程</p>
+                                        </div>
+                                        <div>
+                                            <p style="text-decoration:line-through;">原價$1,600</p>
+                                            <p>體驗價$1,200</p>
+                                        </div>
+                                    </div> -->
                                 </div>
+
                             </div>
                         </div>
-                        <div class="card sec01_slide_item">
-                            <img class="img-fluid" src="./img/violetbeauty/sec00.jpg" class="card-img-top" alt="...">
+                        <div class="card sec02_slide_item">
+                            <div class="text-center">
+                                <p class="violetbeauty_sec02_sub_title text-center mb-0">想抗老看這裡</p>
+                                <b></b>
+                            </div>
+
+                            <br>
+                            <div class="violetbeauty_service_img">
+                                <img src="./img/violetbeauty/8214cab8eddae493f172395f85071a34_large.jpg"
+                                    class="card-img-top" alt="...">
+                            </div>
                             <div class="card-body">
-                                <p class="course_name_title">韓國 小氣泡水嫩課程</p>
-                                <div class="course_name_text d-flex">
-                                    <div style="width: 60%;">
-                                        <span>
-                                            體驗價
-                                        </span>
-                                        <span class="Discounted＿price">
-                                            $800
-                                        </span>
-                                        <p style="text-decoration:line-through;">
-                                            原價：$1,200
-                                        </p>
-                                    </div>
-                                    <div style="width: 40%;" class="text-end">
-                                        <button type="button" class="learn_more" data-bs-target="#course_int"
-                                            data-bs-toggle="modal">詳細資訊</button>
-                                    </div>
+                                <div class="violetbeauty_service text-center">
+                                    <p>熱麻吉提拉課程</p>
+                                    <p>黃金亮眼課程</p>
+
                                 </div>
+
                             </div>
                         </div>
-                        <div class="card sec01_slide_item">
-                            <img class="img-fluid" src="./img/violetbeauty/sec00.jpg" class="card-img-top" alt="...">
+                        <div class="card sec02_slide_item">
+                            <div class="text-center">
+                                <p class="violetbeauty_sec02_sub_title text-center mb-0">想美白看這裡</p>
+                                <b></b>
+                            </div>
+
+                            <br>
+                            <div class="violetbeauty_service_img">
+                                <img src="./img/violetbeauty/4c853fd801ce5bf2c5c0e40b388ff64c_large.jpg"
+                                    class="card-img-top" alt="...">
+                            </div>
                             <div class="card-body">
-                                <p class="course_name_title">韓國 小氣泡水嫩課程</p>
-                                <div class="course_name_text d-flex">
-                                    <div style="width: 60%;">
-                                        <span>
-                                            體驗價
-                                        </span>
-                                        <span class="Discounted＿price">
-                                            $800
-                                        </span>
-                                        <p style="text-decoration:line-through;">
-                                            原價：$1,200
-                                        </p>
-                                    </div>
-                                    <div style="width: 40%;" class="text-end">
-                                        <button type="button" class="learn_more" data-bs-target="#course_int"
-                                            data-bs-toggle="modal">詳細資訊</button>
-                                    </div>
+                                <div class="violetbeauty_service text-center">
+                                    <p>幹細胞淡斑課程</p>
+                                    <p>極效淨白課程</p>
+                                    <p><i class="fas fa-crown crown me-1"></i>液態皮秒課程</p>
+                                    <p>淨妍晶靈課程</p>
                                 </div>
+
                             </div>
                         </div>
-                        <div class="card sec01_slide_item">
-                            <img class="img-fluid" src="./img/violetbeauty/sec00.jpg" class="card-img-top" alt="...">
+                        <div class="card sec02_slide_item">
+                            <div class="text-center">
+                                <p class="violetbeauty_sec02_sub_title text-center mb-0">想保濕看這裡</p>
+                                <b></b>
+                            </div>
+
+                            <br>
+                            <div class="violetbeauty_service_img">
+                                <img src="./img/violetbeauty/a407cb758ade8bfa6fcea9248d3d21c8_large.jpg"
+                                    class="card-img-top" alt="...">
+                            </div>
                             <div class="card-body">
-                                <p class="course_name_title">韓國 小氣泡水嫩課程</p>
-                                <div class="course_name_text d-flex">
-                                    <div style="width: 60%;">
-                                        <span>
-                                            體驗價
-                                        </span>
-                                        <span class="Discounted＿price">
-                                            $800
-                                        </span>
-                                        <p style="text-decoration:line-through;">
-                                            原價：$1,200
-                                        </p>
-                                    </div>
-                                    <div style="width: 40%;" class="text-end">
-                                        <button type="button" class="learn_more" data-bs-target="#course_int"
-                                            data-bs-toggle="modal">詳細資訊</button>
-                                    </div>
+                                <div class="violetbeauty_service text-center">
+                                    <p>維生素育膚課程</p>
+                                    <p>二倍氧修復課程</p>
+                                    <p>水行俠氫淨課程</p>
+                                    <p><i class="fas fa-crown crown me-1"></i>即效四合一課程</p>
+
                                 </div>
+
                             </div>
                         </div>
-                        <div class="card sec01_slide_item">
-                            <img class="img-fluid" src="./img/violetbeauty/sec00.jpg" class="card-img-top" alt="...">
+                        <div class="card sec02_slide_item">
+                            <div class="text-center">
+                                <p class="violetbeauty_sec02_sub_title text-center mb-0">什麼都想看這裡</p>
+                                <b></b>
+                            </div>
+
+                            <br>
+                            <div class="violetbeauty_service_img">
+                                <img src="./img/violetbeauty/7e5af8ac92b653fb86cefa833a040988_large.jpg"
+                                    class="card-img-top" alt="...">
+                            </div>
                             <div class="card-body">
-                                <p class="course_name_title">韓國 小氣泡水嫩課程</p>
-                                <div class="course_name_text d-flex">
-                                    <div style="width: 60%;">
-                                        <span>
-                                            體驗價
-                                        </span>
-                                        <span class="Discounted＿price">
-                                            $800
-                                        </span>
-                                        <p style="text-decoration:line-through;">
-                                            原價：$1,200
-                                        </p>
-                                    </div>
-                                    <div style="width: 40%;" class="text-end">
-                                        <button type="button" class="learn_more" data-bs-target="#course_int"
-                                            data-bs-toggle="modal">詳細資訊</button>
-                                    </div>
+                                <div class="violetbeauty_service text-center">
+                                    <p>虹鑽黑晶煥顏課程+四合一</p>
+                                    <p>液態皮秒+幹細胞</p>
+                                    <p>四合一+液態皮秒</p>
+                                    <p>熱麻吉+黃金亮眼</p>
+
                                 </div>
+
                             </div>
                         </div>
-                        <div class="card sec01_slide_item">
-                            <img class="img-fluid" src="./img/violetbeauty/sec00.jpg" class="card-img-top" alt="...">
+                        <div class="card sec02_slide_item">
+                            <div class="text-center">
+                                <p class="violetbeauty_sec02_sub_title text-center mb-0">特殊護理</p>
+                                <b></b>
+                            </div>
+
+                            <br>
+                            <div class="violetbeauty_service_img">
+                                <img src="./img/violetbeauty/engin-akyurt-g-m8EDc4X6Q-unsplash.png" class="card-img-top"
+                                    alt="...">
+                            </div>
                             <div class="card-body">
-                                <p class="course_name_title">韓國 小氣泡水嫩課程</p>
-                                <div class="course_name_text d-flex">
-                                    <div style="width: 60%;">
-                                        <span>
-                                            體驗價
-                                        </span>
-                                        <span class="Discounted＿price">
-                                            $800
-                                        </span>
-                                        <p style="text-decoration:line-through;">
-                                            原價：$1,200
-                                        </p>
-                                    </div>
-                                    <div style="width: 40%;" class="text-end">
-                                        <button type="button" class="learn_more" data-bs-target="#course_int"
-                                            data-bs-toggle="modal">詳細資訊</button>
-                                    </div>
+                                <div class="violetbeauty_service text-center">
+                                    <p>MTS特殊護理課程</p>
+                                    <p>除痣護理課程</p>
+
+
                                 </div>
+
                             </div>
                         </div>
-
-
                     </div>
-                </div>
-                <div class="text-center">
-                    <button class="violetbeauty_CTA" data-gt-target="#violetbeauty_sec03_CTA" data-gt-duration="800"
-                        data-gt-offset=""><img class="cta_flower" src="./img/flower.png" alt="">立即體驗</button>
+
 
                 </div>
             </div>
+            <!-- <div class="text-center">
+                <button class="violetbeauty_CTA" data-gt-target="#violetbeauty_sec03_CTA" data-gt-duration="800"
+                    data-gt-offset=""><img class="cta_flower" src="./img/flower.png" alt="">立即體驗</button>
+
+            </div> -->
         </section>
         <!-- sec01區塊 -->
         <section id="violetbeauty_sec03_CTA" class="violetbeauty_sec03">
             <img class="sec03_img1" src="./img/flower.png" alt="">
-
+    
             <div class="violetbeauty_sec03_box">
                 <div class="features">
                     <div class="features_title fw-bold">報名體驗課程</div>
@@ -686,7 +642,7 @@
                     <p class="text-center">為您提供最合適的服務，讓我們用最短的時間。</p>
                     <p class="text-center">有效改善您困擾已久的肌膚問題</p>
                 </div>
-
+    
                 <div class="violetbeauty_sec03_content">
                     <div class="row mx-0 px-0">
                         <div class="col-md-6">
@@ -702,9 +658,8 @@
                                     <option class="option" value="紫晴plus+大溪店">紫晴plus+大溪店</option>
                                     <option class="option" value="紫晴plus+龍潭店">紫晴plus+龍潭店</option>
                                 </select>
-
-                                <select name="course_name" required="" class="user-invalid valueMissing"
-                                    id="course_name">
+    
+                                <select name="course_name" required="" class="user-invalid valueMissing" id="course_name">
                                     <option value="">想要體驗的課程</option>
                                     <option value="韓國小氣泡水嫩課程 /70分">韓國小氣泡水嫩課程 /70分</option>
                                     <option value="四合一護膚課程 /90分">四合一護膚課程 /90分</option>
@@ -718,23 +673,22 @@
                                 </select>
                                 <input name="prefer_date" class="datepicker" type="date" id="datepicker"
                                     placeholder="預選裝修日期" required>
-                                <input name="prefer_date" class="time" type="time" id="time" placeholder="想要體驗的時間"
-                                    required>
+                                <input name="prefer_date" class="time" type="time" id="time" placeholder="想要體驗的時間" required>
                                 <div class="form-btn">
                                     <button id="submitbutton" class="btn" style="opacity: 1;" type="submit">立即預約
                                         ></button>
                                 </div>
                             </div>
                         </div>
-
+    
                     </div>
                 </div>
             </div>
             <img class="sec03_img2" src="./img/sec03_img2.png" alt="">
             <img class="sec03_img3" src="./img/sec03_img3.png" alt="">
-
+    
         </section>
-
+    
         <footer id="footer">
             <div class="footer_content_box">
                 <div class="row">
@@ -754,8 +708,7 @@
                         </div>
                         <div class="socail-link">
                             <a href="https://www.facebook.com/hhhfb"><img src="./img/Icon awesome-line.png" alt=""></a>
-                            <a href="https://line.me/ti/p/%40ovs4341s"><img src="./img/Icon metro-facebook.png"
-                                    alt=""></a>
+                            <a href="https://line.me/ti/p/%40ovs4341s"><img src="./img/Icon metro-facebook.png" alt=""></a>
                         </div>
                     </div>
                     <div class="col-md-4">
@@ -769,7 +722,7 @@
                                 <p><i style="font-size: 24px;" class="fas fa-clock me-3"></i>10:00-20:00</p>
                             </div>
                             <div class="mt-4">
-                                <a target="_blank" style="text-decoration: none;" 
+                                <a target="_blank" style="text-decoration: none;"
                                     href="https://www.google.com.tw/maps/place/335%E6%A1%83%E5%9C%92%E5%B8%82%E5%A4%A7%E6%BA%AA%E5%8D%80%E4%BB%81%E5%96%84%E8%A1%97108-11%E8%99%9F/@24.9093929,121.2812614,17z/data=!3m1!4b1!4m5!3m4!1s0x346818684fc613c5:0xd24fceb417e6322f!8m2!3d24.9093929!4d121.2834501">
                                     <button class="google_map">
                                         Google地圖 >
@@ -793,20 +746,22 @@
                                 <p><i style="font-size: 24px;" class="fas fa-clock me-3"></i>10:00-20:00</p>
                             </div>
                             <div class="mt-4">
-                               <a target="_blank" style="text-decoration: none;" href="https://www.google.com.tw/maps/place/%E6%A1%83%E5%9C%92%E5%B8%82%E5%A4%A7%E6%BA%AA%E5%8D%80%E4%BB%81%E5%96%84%E8%A1%97108-11%E8%99%9F">
-                                <button class="google_map">Google地圖 ></button>
-                               </a>
-                         
-                                <a target="_blank" style="text-decoration: none;"  href="https://line.me/R/ti/p/%2540qlo9716l">
+                                <a target="_blank" style="text-decoration: none;"
+                                    href="https://www.google.com.tw/maps/place/%E6%A1%83%E5%9C%92%E5%B8%82%E5%A4%A7%E6%BA%AA%E5%8D%80%E4%BB%81%E5%96%84%E8%A1%97108-11%E8%99%9F">
+                                    <button class="google_map">Google地圖 ></button>
+                                </a>
+    
+                                <a target="_blank" style="text-decoration: none;"
+                                    href="https://line.me/R/ti/p/%2540qlo9716l">
                                     <button class="line_Reserve">LINE預約 ></button>
                                 </a>
                             </div>
                         </div>
                     </div>
-
+    
                 </div>
             </div>
-
+    
         </footer>
         <div class="closeplay modal fade" id="yt-video" tabindex="-1" aria-labelledby="exampleModalLabel1"
             aria-hidden="true">
@@ -825,7 +780,7 @@
                                 overflow: hidden;
                                 max-width: 100%;
                             }
-
+    
                             .embed-container iframe,
                             .embed-container object,
                             .embed-container embed {
@@ -843,8 +798,8 @@
                 </div>
             </div>
         </div>
-
-
+    
+    
         <div class="closeplay modal fade" id="course_int" tabindex="-1" aria-labelledby="exampleModalLabel1"
             aria-hidden="true">
             <div class="modal-dialog modal-lg">
@@ -853,39 +808,40 @@
                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <div id="video-modal" class="modal-body pb-5">
-                        <div class="course_detail py-3">
-                            <div class="row">
-                                <div class="col-md-7">
-                                    <div class="course_detail_img mt-3">
-                                        <img class="img-fluid"
-                                            src="https://img.holkee.com/site/upload/5ed5c6c4-77367dcbb-9908-96b7db46/fb3d64b06a36b796bbf5b60fe02cd5c5_double.jpg"
-                                            alt="">
-                                    </div>
-                                </div>
-                                <div class="col-md-5">
-                                    <div class="course_detail_text">
-                                        <div class="features_title fw-bold text-start">韓國小氣泡水嫩課程</div>
-
-
-                                        <div class="sec_content_right_text">
-                                            <p>原價6600 體驗1699 /70分
-                                                採用納米級的水氣泡，配合真空負壓原理，形成真空迴路，將超細微小氣泡和水分充分結合，通過特殊設計的螺旋形吸頭直接作用於皮膚，且能夠保持超細微小氣泡長時間接觸皮膚，促進剝離作用。
-                                            </p>
-                                            <p>潔角質層，改善黑頭粉刺，驅除油脂汙垢，使皮膚通透有光澤，提供持久的含水量，使皮膚濕潤、細膩有光澤。</p>
+                        <!-- <div class="course_detail py-3">
+                                <div class="row">
+                                    <div class="col-md-7">
+                                        <div class="course_detail_img mt-3">
+                                            <img class="img-fluid"
+                                                src="https://img.holkee.com/site/upload/5ed5c6c4-77367dcbb-9908-96b7db46/fb3d64b06a36b796bbf5b60fe02cd5c5_double.jpg"
+                                                alt="">
                                         </div>
                                     </div>
-                                    <div class="text-center">
-                                        <button class="violetbeauty_CTA mt-4"><a style="text-decoration: none;"
-                                                target="_blank" href="https://line.me/R/ti/p/%2540qlo9716l"><img
-                                                    class="cta_flower" src="./img/flower.png" alt="">立即體驗</a></button>
+                                    <div class="col-md-5">
+                                        <div class="course_detail_text">
+                                            <div class="features_title fw-bold text-start">韓國小氣泡水嫩課程</div>
+    
+    
+                                            <div class="sec_content_right_text">
+                                                <p>原價6600 體驗1699 /70分
+                                                    採用納米級的水氣泡，配合真空負壓原理，形成真空迴路，將超細微小氣泡和水分充分結合，通過特殊設計的螺旋形吸頭直接作用於皮膚，且能夠保持超細微小氣泡長時間接觸皮膚，促進剝離作用。
+                                                </p>
+                                                <p>潔角質層，改善黑頭粉刺，驅除油脂汙垢，使皮膚通透有光澤，提供持久的含水量，使皮膚濕潤、細膩有光澤。</p>
+                                            </div>
+                                        </div>
+                                        <div class="text-center">
+                                            <button class="violetbeauty_CTA mt-4"><a style="text-decoration: none;"
+                                                    target="_blank" href="https://line.me/R/ti/p/%2540qlo9716l"><img
+                                                        class="cta_flower" src="./img/flower.png" alt="">立即體驗</a></button>
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
-                        </div>
+                            </div> -->
                     </div>
                 </div>
             </div>
         </div>
+        </div>
     </div>
     <!-- <section>
         <div class="container-fluid violetbeauty_sec01">

js/index.js

@@ -11,76 +11,138 @@ $(window).scroll(function () {
 });
 
 $("*").each(function (index, element) {
-    // 此元素被點選後執行
-    $(this).click(function (e) {
-      // 取得被點選元素的屬性：data-gt-target
-      var target = $(this).attr("data-gt-target");
-      var duration = $(this).attr("data-gt-duration");
-      var offset = $(this).attr("data-gt-offset");
-  
-      // JS 語法：判斷式
-      // if (條件) {程式區塊}
-      // 當條件成立，會執行程式區塊
-  
-      // 如果 目標有資料 才會執行 { } 內的程式
-      // 避免出現 undefine (未定義 - 不存在的資料)
-      if (target) {
-        //console.log("目標：" + target);
-        //console.log("時間：" + duration);
-        //console.log("位移：" + offset);
-  
-        // 上方位置 = 目標區塊.位移().上方位置
-        var top = $(target).offset().top;
-        //console.log("要前往元素的上方位置：" + top);
-  
-        // 網頁元素.停止().動畫({ 上方捲動：指定元素 - 位移}，持續時間)
-        // parseInt() 將文字轉為數字
-  
-        $("html").stop().animate({
-          scrollTop: top - offset
-        }, parseInt(duration));
-      }
-    });
-  });
-  
-  // 避免動畫與使用者滾輪衝突
-  // html 在滾動滾輪時 停止 html 所有效果
-  $("html").on("mousewheel", function () {
-    $("html").stop();
+  // 此元素被點選後執行
+  $(this).click(function (e) {
+    // 取得被點選元素的屬性：data-gt-target
+    var target = $(this).attr("data-gt-target");
+    var duration = $(this).attr("data-gt-duration");
+    var offset = $(this).attr("data-gt-offset");
+
+    // JS 語法：判斷式
+    // if (條件) {程式區塊}
+    // 當條件成立，會執行程式區塊
+
+    // 如果 目標有資料 才會執行 { } 內的程式
+    // 避免出現 undefine (未定義 - 不存在的資料)
+    if (target) {
+      //console.log("目標：" + target);
+      //console.log("時間：" + duration);
+      //console.log("位移：" + offset);
+
+      // 上方位置 = 目標區塊.位移().上方位置
+      var top = $(target).offset().top;
+      //console.log("要前往元素的上方位置：" + top);
+
+      // 網頁元素.停止().動畫({ 上方捲動：指定元素 - 位移}，持續時間)
+      // parseInt() 將文字轉為數字
+
+      $("html").stop().animate({
+        scrollTop: top - offset
+      }, parseInt(duration));
+    }
   });
+});
+
+// 避免動畫與使用者滾輪衝突
+// html 在滾動滾輪時 停止 html 所有效果
+$("html").on("mousewheel", function () {
+  $("html").stop();
+});
 
 $(".playbutton").click(function () {
-    var videosrc = $(this).data("info");
-    $('.youtube-video').attr('src', `https://www.youtube.com/embed//${videosrc}?autoplay=1`);
-  });
-  
-  $(".btn-close").click(function () {
-    $('.youtube-video').attr('src', ``);
-  });
-  
-  $('#yt-video').on('hidden.bs.modal', function () {
-    $('.youtube-video').attr('src', ``);
-  });
+  var videosrc = $(this).data("info");
+  $('.youtube-video').attr('src', `https://www.youtube.com/embed//${videosrc}?autoplay=1`);
+});
+
+$(".btn-close").click(function () {
+  $('.youtube-video').attr('src', ``);
+});
+
+$('#yt-video').on('hidden.bs.modal', function () {
+  $('.youtube-video').attr('src', ``);
+});
+
+
 
 $(".banner-slide").slick({
-    dots: true,
-    autoplay: true,
-    arrows: false,
-    slidesToShow: 1,
-    slidesToScroll: 1,
-    autoplaySpeed: 7000,
-    initialSlide: 0,
-    infinite: true,
+  dots: true,
+  autoplay: true,
+  arrows: false,
+  slidesToShow: 1,
+  slidesToScroll: 1,
+  autoplaySpeed: 7000,
+  initialSlide: 0,
+  infinite: true,
 });
 
 $(".violetbeauty_sec01_slide").slick({
- 
-    slidesToShow: 4,
-    slidesToScroll: 1,
-    infinite: true,
-    // centerMode: true,
-    arrows: true,
-    prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: #CC7DB7;transform: translateY(-10px);"></i></button>',
-    nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: #CC7DB7;transform: translateY(-10px);"></i></button>'
+
+  slidesToShow: 4,
+  slidesToScroll: 3,
+  infinite: true,
+  // centerMode: true,
+  arrows: true,
+  prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: #CC7DB7;transform: translateY(-10px);"></i></button>',
+  nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: #CC7DB7;transform: translateY(-10px);"></i></button>'
 });
 
+$(".violetbeauty_sec02_slide").slick({
+
+  slidesToShow: 3,
+  slidesToScroll: 3,
+  infinite: true,
+  // centerMode: true,
+  arrows: true,
+  prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: #CC7DB7;transform: translateY(-10px);"></i></button>',
+  nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: #CC7DB7;transform: translateY(-10px);"></i></button>'
+});
+
+$(".learn_more").click(function () {
+  var courseid = $(this).data("info");
+  // console.log(courseid);
+  $.ajax({
+    method: "GET",
+    url: "coursecontent.json",
+    dataType: "json",
+  })
+
+    .done(function (msg) {
+      // console.log(msg)
+      for (var i = 0; i < msg.length; i++) {
+        if (msg[i].Courseid == courseid) {
+          var CourseContent = '';
+          console.log(msg[i]);
+          CourseContent = `
+          <div class="course_detail py-3">
+              <div class="row">
+                  <div class="col-md-7">
+                      <div class="course_detail_img mt-3">
+                          <img class="img-fluid" src="${msg[i].CourseImg}" alt="">
+                      </div>
+                  </div>
+                  <div class="col-md-5">
+                      <div class="course_detail_text">
+                          <div class="features_title fw-bold text-start">${msg[i].CourseTitle}</div>
+
+
+                          <div class="sec_content_right_text">
+                              <p>${msg[i].Coursetext}</p>
+                          </div>
+                      </div>
+                      <div class="text-center">
+                          <button class="violetbeauty_CTA mt-4"><a style="text-decoration: none;"
+                                  target="_blank" href="https://line.me/R/ti/p/%2540qlo9716l"><img
+                                      class="cta_flower" src="./img/flower.png" alt="">立即體驗</a></button>
+                      </div>
+                  </div>
+              </div>
+      </div>
+          `
+        }
+        $('.modal-body').html(CourseContent);
+      }
+
+
+    });
+
+});