測試問題修正

goto.js

@@ -1,26 +1,26 @@
-$(window).bind('scroll', function (e) {
-  parallaxScroll();
-});
-function parallaxScroll() {
-  var scrolled = $(window).scrollTop();
-  // 困擾
-  if (screen.width > 1024) {
-    $('#circle2').css('top', (300 - (scrolled * .2)) + 'px');
-    $('#circle3').css('top', (1000 - (scrolled * .2)) + 'px');
-    $('#circle1').css('top', (700 - (scrolled * .2)) + 'px');
-    // 課程大綱
-    // $('#act1').css('top', (30 + (scrolled * .1)) + 'px');
-    $('#act2').css('top', (900 - (scrolled * .2)) + 'px');
-    // $('#act3').css('top', (300 - (scrolled * .1)) + 'px');
-    $('#act4').css('top', (0 + (scrolled * .1)) + 'px');
-    $('#act5').css('top', (900 - (scrolled * .2)) + 'px');
-  } else {
-
-  }
-
-
-
-}
+// $(window).bind('scroll', function (e) {
+//   parallaxScroll();
+// });
+// function parallaxScroll() {
+//   var scrolled = $(window).scrollTop();
+//   // 困擾
+//   if (screen.width > 1024) {
+//     $('#circle2').css('top', (300 - (scrolled * .2)) + 'px');
+//     $('#circle3').css('top', (1000 - (scrolled * .2)) + 'px');
+//     $('#circle1').css('top', (700 - (scrolled * .2)) + 'px');
+//     // 課程大綱
+//     // $('#act1').css('top', (30 + (scrolled * .1)) + 'px');
+//     $('#act2').css('top', (900 - (scrolled * .2)) + 'px');
+//     // $('#act3').css('top', (300 - (scrolled * .1)) + 'px');
+//     $('#act4').css('top', (0 + (scrolled * .1)) + 'px');
+//     $('#act5').css('top', (900 - (scrolled * .2)) + 'px');
+//   } else {
+
+//   }
+
+
+
+// }
 // 手機課程大綱輪播
 $("#card-box").slick({
   arrows: false,
@@ -41,6 +41,7 @@ $(".box-img01").click(function () {
     slidesToShow: 1,
     centerMode: true,
     infinite: false,
+    dots: true,
   });
 });
 
@@ -64,6 +65,7 @@ $(".box-img02").click(function () {
     slidesToShow: 1,
     centerMode: true,
     infinite: false,
+    dots: true,
   });
 });
 
@@ -86,6 +88,7 @@ $(".box-img03").click(function () {
     slidesToShow: 1,
     centerMode: true,
     infinite: false,
+    dots: true,
   });
 
 });
@@ -267,7 +270,7 @@ $(".contact-form2").submit(function (e) {
       url: 'https://go.hhh.com.tw:8004/add_client_info',
       data: jsonString,
       dataType: 'json',
-     
+
 
 
       success: function (data) {
@@ -398,31 +401,39 @@ $(".close").click(function () {
     minute = second * 60,
     hour = minute * 60,
     day = hour * 24;
-
-  let birthday = "July 21, 2021 00:00:00",
+  let birthday = "Aug 23, 2021 00:00:00",
     countDown = new Date(birthday).getTime(),
+
     x = setInterval(function () {
 
       let now = new Date().getTime(),
         distance = countDown - now;
 
-      document.getElementById("days").innerText = Math.floor(distance / (day)),
-        document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
-        document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
-        document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);
+      var a = (distance / (day));
+      var b = (distance % (day)) / (hour);
+      var c = (distance % (hour)) / (minute);
+      var d = (distance % (minute)) / (second);
 
-      //do something later when date is reached
-      if (distance < 0) {
-        let headline = document.getElementById("headline"),
-          countdown = document.getElementById("countdown"),
-          content = document.getElementById("content");
+      var hour1 = Math.floor(b);
+      var result = hour1 < 10 ? '0' + hour1 : hour1;
 
-        headline.innerText = "It's my birthday!";
-        countdown.style.display = "none";
-        content.style.display = "block";
+      var second1 = Math.floor(d);
+      var result2 = second1 < 10 ? '0' + second1 : second1;
+
+      var minute1 = Math.floor(c);
+      var result3 = minute1 < 10 ? '0' + minute1 : minute1;
+
+      var day1 = Math.floor(a);
+      var result4 = day1 < 10 ? '0' + day1 : day1;
+      
+      document.getElementById("days").innerText = result4,
+        document.getElementById("hours").innerText = result,
+        document.getElementById("minutes").innerText = result3,
+        document.getElementById("seconds").innerText = result2;
+
+
+      //do something later when date is reached
 
-        clearInterval(x);
-      }
       //seconds
     }, 0)
 }());

index.html

@@ -41,10 +41,10 @@
                 <a href="https://hhh.com.tw/"> <img src="./img/logo-main-1-1.webp" alt=""></a>
             </div>
             <div id="link" class="col-md-10 col-lg-8">
-                <a data-gt-target="#trouble" data-gt-duration="800" data-gt-offset="0">你有以下困擾嗎?</a>
-                <a data-gt-target="#Course-list" data-gt-duration="500" data-gt-offset="0">精華課程大綱</a>
-                <a data-gt-target="#course-schedule" data-gt-duration="500" data-gt-offset="0">3Days上課日程</a>
-                <a data-gt-target="#information" data-gt-duration="500" data-gt-offset="0">收款資訊+客服資訊</a>
+                <a data-gt-target="#trouble" data-gt-duration="800" data-gt-offset="-100">你有以下困擾嗎?</a>
+                <a data-gt-target="#Course-list" data-gt-duration="500" data-gt-offset="70">精華課程大綱</a>
+                <a data-gt-target="#course-schedule" data-gt-duration="500" data-gt-offset="70">3Days上課日程</a>
+                <a data-gt-target="#information" data-gt-duration="500" data-gt-offset="70">收款資訊+客服資訊</a>
             </div>
             <img id="menu-btn1" src="./img/mobile-logo/menu.png" alt="">
         </div>
@@ -102,12 +102,10 @@
             <div class="container" style="margin: 0; padding: 0;">
                 <div id="countdown">
                     <ul>
-                        <li><span id="days"></span><span id="unit0" style="padding-left: 5vw;" class="unit">DAYS</span>
-                        </li>
-                        <li><span id="hours"></span><span id="unit1" class="unit">HOURS</span></li>
-                        <li><span id="minutes"></span><span id="unit2" class="unit">MINUTES</span></li>
-                        <li><span id="seconds" style="border:none; padding-right: 0px;"></span><span id="unit3"
-                                class="unit">SECONDS</span></li>
+                        <li><span id="days"></span>DAYS</li>
+                        <li><span id="hours"></span>HOURS</li>
+                        <li><span id="minutes"></span>MINUTES</li>
+                        <li><span id="seconds" style="border: none;"></span>SECONDS</li>
                     </ul>
                 </div>
             </div>
@@ -118,10 +116,9 @@
                     class="btn">手刀報名</button></a>
         </div>
     </section>
-    <a id="btn-a"
-        href="https://payment.ecpay.com.tw/QuickCollect/PayData?N32WLQWLaAdbBZx3yj9fbNNQwxl%2bQ9z%2fkm2bPZqIDVk%3d"><button
+    <a id="btn-a" data-gt-target="#information-mobile" data-gt-duration="500" data-gt-offset="100"><button
             id="mobile-btn" class="btn">手刀報名</button></a>
-    <img class="arrow" data-gt-target="#top" data-gt-duration="800" data-gt-offset="0" src="./img/gotop.png" alt="">
+    <img class="arrow" data-gt-target="#top" data-gt-duration="500" data-gt-offset="0" src="./img/gotop.png" alt="">
 
     <!-- 困擾 -->
     <section id="trouble" class="container-fluid">
@@ -141,10 +138,9 @@
                 <div class="text-box">
                     <p>Do You Have the following Problems</p>
                     <h1 class="title-main">你有以下困擾嗎?</h1>
-                    <div class="text">我有很好的作品案例,但很少人看到</div>
+                    <div class="text">我有很好的作品案例，但很少人看到</div>
                     <div class="text">我的粉專貼文觸及很差也沒人留言</div>
                     <div class="text">拍出來的影片質感很差</div>
-                    <div class="text">我該投錢下廣告嗎?會有效果嗎?</div>
                     <div class="text">我該挪一筆錢投資攝影器材嗎?</div>
                 </div>
             </div>
@@ -444,45 +440,45 @@
                 <h1>手機拍片，你可以學到</h1>
                 <hr class="line" style="opacity: 1;">
                 <div class="card-box-1" class="row">
-                    <div class="card col-6">
+                    <div class="card col-8">
                         <div class="card-title">1.當紅短影音趨勢</div>
                         <div>現今當紅影音的</div>
                         <div>拍攝手法分析與觀察</div>
                         <div class="box-img">
-                            <img style="width: 42vw;" src="./img/course-box/box1.png" alt="">
+                            <img style="width: 48vw;" src="./img/course-box/box1.png" alt="">
                         </div>
                         <div class="box-img2">
                             <img src="./img/Course-list/box11.png" alt="">
                         </div>
                     </div>
-                    <div class="card col-6">
-                        <div class="card-title">1.當紅短影音趨勢</div>
-                        <div>現今當紅影音的</div>
-                        <div>拍攝手法分析與觀察</div>
+                    <div class="card col-8">
+                        <div class="card-title">2.隨時想拍就拍</div>
+                        <div>手機攝影構圖、光線、運鏡</div>
+                        <div>與器材應用演練</div>
                         <div class="box-img">
-                            <img src="./img/course-box/box2.png" alt="">
+                            <img style="width: 48vw;" src="./img/course-box/box2.png" alt="">
                         </div>
                         <div class="box-img2">
 
                             <img src="./img/Course-list/box11.png" alt="">
                         </div>
                     </div>
-                    <div class="card col-6">
-                        <div class="card-title">1.當紅短影音趨勢</div>
-                        <div>現今當紅影音的</div>
-                        <div>拍攝手法分析與觀察</div>
+                    <div class="card col-8">
+                        <div class="card-title">3.我是影片主角</div>
+                        <div>眼神、肢體、聲音表情、</div>
+                        <div>面對鏡頭萬用公式</div>
                         <div class="box-img">
-                            <img src="./img/course-box/box3.png" alt="">
+                            <img style="width: 45vw;" src="./img/course-box/box3.png" alt="">
                         </div>
                         <div class="box-img2">
 
                             <img src="./img/Course-list/box11.png" alt="">
                         </div>
                     </div>
-                    <div class="card col-6">
-                        <div class="card-title">1.當紅短影音趨勢</div>
-                        <div>現今當紅影音的</div>
-                        <div>拍攝手法分析與觀察</div>
+                    <div class="card col-8">
+                        <div class="card-title">4.從0到有</div>
+                        <div>團隊合作發想影片故事</div>
+                        <div>與撰寫分鏡腳本</div>
                         <div class="box-img">
                             <img src="./img/course-box/box4.png" alt="">
                         </div>
@@ -491,12 +487,12 @@
                             <img src="./img/Course-list/box11.png" alt="">
                         </div>
                     </div>
-                    <div class="card col-6">
-                        <div class="card-title">1.當紅短影音趨勢</div>
-                        <div>現今當紅影音的</div>
-                        <div>拍攝手法分析與觀察</div>
+                    <div class="card col-8">
+                        <div class="card-title">5.畫龍點睛後製剪輯</div>
+                        <div>實際剪輯演練及</div>
+                        <div>選擇恰如其芬的配樂、音效</div>
                         <div class="box-img">
-                            <img style="width: 42vw;" src="./img/course-box/box5.png" alt="">
+                            <img style="width: 48vw;" src="./img/course-box/box5.png" alt="">
                         </div>
                         <div class="box-img2">
 
@@ -507,26 +503,26 @@
             </div>
         </div>
     </section>
-    <section class="mobile01-2" class="container-fluid">
+    <section class="mobile01-2" class="container-fluid" >
         <div class="mobile-box2">
             <img class="close" src="./img/course-box/close.png" alt="">
             <div class="Course-mobile01">
                 <h1>社群營造，你可以學到</h1>
                 <hr class="line" style="opacity: 1;">
-                <div class="card-box-2 row">
-                    <div class="card col-6">
+                <div class="card-box-2">
+                    <div class="card col-8">
                         <div class="card-title">1. 市場狀況</div>
                         <div>國人擁有社群帳號比例、</div>
                         <div>使用社群帳號頻率</div>
                         <div style="opacity: 0;">1111</div>
                         <div class="box-img">
-                            <img style="width: 45vw;" src="./img/course-box02/box1.png" alt="">
+                            <img style="width: 50vw;" src="./img/course-box02/box1.png" alt="">
                         </div>
                         <div class="box-img2">
                             <img src="./img/Course-list/box12.png" alt="">
                         </div>
                     </div>
-                    <div class="card col-6">
+                    <div class="card col-8">
                         <div class="card-title">2. FB經營重要性</div>
                         <div>使用人數眾多、觸及率、</div>
                         <div>與實體結合度、帶動業績成長</div>
@@ -539,7 +535,7 @@
                             <img src="./img/Course-list/box12.png" alt="">
                         </div>
                     </div>
-                    <div class="card col-6">
+                    <div class="card col-8">
                         <div class="card-title">3. 經營目的</div>
                         <div>品牌經營、社群互動、</div>
                         <div>產品推廣、客戶服務、</div>
@@ -552,29 +548,28 @@
                             <img src="./img/Course-list/box12.png" alt="">
                         </div>
                     </div>
-                    <div class="card col-6">
+                    <div class="card col-8">
                         <div class="card-title">4. 經營規劃</div>
                         <div>主題規劃、小編個性、</div>
                         <div>ｃｕｅ表</div>
                         <div style="opacity: 0;">1111</div>
                         <div class="box-img">
-                            <img src="./img/course-box02/box4.png" alt="">
+                            <img style="width: 50vw;"  src="./img/course-box02/box4.png" alt="">
                         </div>
                         <div class="box-img2">
 
                             <img src="./img/Course-list/box12.png" alt="">
                         </div>
                     </div>
-                    <div class="card col-6">
+                    <div class="card col-8">
                         <div class="card-title">5. 貼文範例</div>
                         <div>品牌＆產品貼文、</div>
                         <div>選心情＆時事貼文、</div>
                         <div>互動貼文、活動貼文</div>
                         <div class="box-img">
-                            <img style="width: 42vw;" src="./img/course-box02/box5.png" alt="">
+                            <img style="width: 50vw;" src="./img/course-box02/box5.png" alt="">
                         </div>
                         <div class="box-img2">
-
                             <img src="./img/Course-list/box12.png" alt="">
                         </div>
                     </div>
@@ -596,7 +591,7 @@
                         <div>用文案創造出</div>
                         <div>消費者心中畫面感</div>
                         <div class="box-img">
-                            <img style="width: 42vw;" src="./img/course-box03/box1.png" alt="">
+                            <img style="width: 48vw;" src="./img/course-box03/box1.png" alt="">
                         </div>
                         <div class="box-img2">
                             <img src="./img/Course-list/box13.png" alt="">
@@ -608,7 +603,7 @@
                         <div>找出文案切入點</div>
 
                         <div class="box-img">
-                            <img src="./img/course-box03/box2.png" alt="">
+                            <img style="width: 48vw;" src="./img/course-box03/box2.png" alt="">
                         </div>
                         <div class="box-img2">
 
@@ -621,7 +616,7 @@
                         <div>找到自己的主要客群，</div>
                         <div>說他們想聽的</div>
                         <div class="box-img">
-                            <img src="./img/course-box03/box3.png" alt="">
+                            <img style="width: 48vw;" src="./img/course-box03/box3.png" alt="">
                         </div>
                         <div class="box-img2">
 
@@ -647,42 +642,37 @@
                 <div class="schedule-box col-md-4">
                     <h1>Day1上午</h1>
                     <div class="content-box">
-                        <div>手機拍片(一)</div>
+                        <div>社群營造(一)</div>
                     </div>
                 </div>
                 <div class="schedule-box col-md-4">
-                    <h1>Day1上午</h1>
+                    <h1>Day2上午</h1>
                     <div class="content-box">
-                        <div>手機拍片(二)</div>
+                        <div>文案撰寫(一)</div>
                     </div>
                 </div>
                 <div class="schedule-box col-md-4">
-                    <h1>Day1上午</h1>
+                    <h1>Day3上午</h1>
                     <div class="content-box">
-                        <div>手機拍片(三)</div>
+                        <div>手機拍片(一)</div>
                     </div>
                 </div>
                 <div class="schedule-box col-md-4">
-                    <h1>Day1上午</h1>
-                    <div class="content-box1">
-                        <div>文案撰寫(一)</div>
-                        <div>+</div>
+                    <h1>Day1下午</h1>
+                    <div class="content-box">
                         <div>社群營造(一)</div>
                     </div>
                 </div>
                 <div class="schedule-box col-md-4">
-                    <h1>Day1上午</h1>
-                    <div class="content-box1">
+                    <h1>Day2下午</h1>
+                    <div class="content-box">
                         <div>文案撰寫(二)</div>
-                        <div>+</div>
-                        <div>社群營造(二)</div>
                     </div>
                 </div>
                 <div class="schedule-box col-md-4">
-                    <h1>Day1上午</h1>
-                    <div class="content-box1" style="padding: 3vw;">
-                        <div>成果展示分享</div>
-                        <div>&賦歸</div>
+                    <h1>Day3下午</h1>
+                    <div class="content-box">
+                        <div>手機拍片(二)</div>
                     </div>
                 </div>
             </div>
@@ -749,40 +739,44 @@
     </section>
     <!-- 電腦版收款資訊 -->
     <section id="information">
+
         <p>Collection Information + Customer Service Information</p>
-        <h1 class="title-main">收款資訊+客服資訊</h1>
+        <h1 class="title-main">報名資訊</h1>
         <hr class="line" style="opacity: 1;">
         <img id="bg3" src="./img/information/bg3.png" alt="">
         <div class="information">
-            <div><span style="font-weight: 900;">價格:</span>NT$80000元</div>
-            <div><span style="font-weight: 900;">開課地點:</span>幸福空間台北辦公室 <span
-                    style="font-size:1.2rem">(台北市信義路菸廠路88號)</span></div>
-            <div><span style="font-weight: 900;">開課時段:</span>8/23(一)~8/25(三)共三天09:00-18:00</div>
-            <div><span style="font-weight: 900;">付款方式:</span>ATM匯款、信用卡 <span style="font-size:1.2rem">(分期)</span></div>
-            <div><span style="font-weight: 900;">付款帳號:</span>華南銀行(008)1234567890</div>
-            <div><span style="font-weight: 900;">注意事項:</span>付款後請填寫報名表單, 有收到報名成功通知信才算報名成功唷!</div>
-            <div>若有問題,請來信客服信箱:<span style="opacity: 0;"> 1 </span><a style="font-weight: 900;"
-                    href="">service@hhh.com.tw</a></div>
+            <div><span style="font-weight: 900;">截止報名日:</span>2021/10/01 23:59</div>
+            <div><span style="font-weight: 900;">開課日期:</span>暫定為10月底，詳細日期將另行通知</div>
+            <div><span style="font-weight: 900;">開課地點:</span>於LINE私密群組中即時LIVE開課!</div>
+            <div><span style="font-weight: 900;">三日精華課程超值費用:</span>NT$80000</div>
+            <div><span style="font-weight: 900;">報名流程:請點擊<a
+                        target="https://payment.ecpay.com.tw/QuickCollect/PayData?N32WLQWLaAdbBZx3yj9fbNNQwxl%2bQ9z%2fkm2bPZqIDVk%3d"
+                        href="https://payment.ecpay.com.tw/QuickCollect/PayData?N32WLQWLaAdbBZx3yj9fbNNQwxl%2bQ9z%2fkm2bPZqIDVk%3d">繳費連結</a>(可刷卡/atm匯款)完成付款後,填寫底下報名表並送出,將有專人與您聯繫!</span>
+            </div>
         </div>
 
         <div id="information-form" class="container-fluid" style="padding:0;margin: 0; ">
             <div id="form-card" class="row">
                 <form class="contact-form col-md-6">
-                    <input type="text" id="name" name="name" placeholder="姓名(必填, 詳答)" required>
-                    <input type="text" id="company" name="organization" placeholder="公司名稱(必填, 詳答)">
+                    <input type="text" id="name" name="name" placeholder="姓名" required>
+                    <input type="text" id="company" name="organization" placeholder="公司名稱" required>
                     <select name="position" id="profession" required>
                         <option value="" disabled selected="selected">職位</option>
                         <option class="option">室內設計師</option>
                         <option class="option">非室內設計師</option>
                         <option class="option">其他</option>
                     </select>
-                    <input type="text" id="phone" name="phone" placeholder="連絡電話(必填, 詳答)" pattern="09\d{2}\d{6}"
+                    <input type="text" id="phone" name="phone" placeholder="連絡電話" pattern="09\d{2}\d{6}" required>
+                    <input type="email" id="line" name="line_id" placeholder="聯絡email" required>
+                    <input type="email" id="email" name="email" placeholder="請留下您的LINE ID,便於開課時邀請入私密群組(請設定開放搜尋)"
                         required>
-                    <input type="email" id="email" name="email" placeholder="聯絡email(必填, 詳答)" required>
-                    <input type="text" id="pay" name="cert_last5" placeholder="已匯款, 後五碼是(選填, 詳答)">
-                    <textarea name="where_learn" id="message" cols="50" rows="3"
-                        placeholder="是怎麼知道這個課程的(選填, 詳答)"></textarea> </textarea>
-                    <textarea name="why_sign" id="message1" cols="50" rows="3" placeholder="為甚麼想報名(選填, 詳答)"></textarea>
+                    <input type="text" id="pay" name="cert_last5" placeholder="已匯款, 後五碼是" required>
+                    <textarea name="where_learn" id="message" cols="50" rows="3" placeholder="是怎麼知道這個課程的"
+                        required></textarea> </textarea>
+                    <textarea name="why_sign" id="message1" cols="50" rows="3" placeholder="為甚麼想報名" required></textarea>
+                    <div id="form05">如有問題歡迎來信<a style="color:#646464" href="">yiya@hhh.com.tw</a> 或來電<a style="color:#646464" href="">02-6617-0123</a>  #348
+                        Yiya
+                    </div>
                     <div class="form-btn">
                         <input class="btn" style="opacity: 1;" type="submit" value="SEND">
                     </div>
@@ -799,53 +793,45 @@
     <!-- 手機板收款資訊 -->
     <section id="information-mobile">
         <p>Collection Information + Customer Service Information</p>
-        <h1 class="title-main">收款資訊+客服資訊</h1>
+        <h1 class="title-main">報名資訊</h1>
         <hr class="line" style="opacity: 1;">
-        <div class="information   container-fluid">
-            <div class="row" style="padding:0;margin: 0; ">
-                <div id="information-01" class="col-3">
-                    <div>價格:</div>
-                    <div>開課地點:</div>
-                    <div class="space" style="padding:3vw 0 ;"></div>
-                    <div>開課時段:</div>
-                    <div class="space" style="padding:3.2vw 0 ;"></div>
-                    <div>付款方式:</div>
-                    <div>付款帳號:</div>
-                    <div>注意事項:</div>
-                </div>
-                <div id="information-02" class="col-8">
-                    <div>NT$80000元</div>
-                    <div>幸福空間台北辦公室<span style="font-size:0.8rem">(台北市信義區菸廠路88號)</span></div>
-                    <div>8/23<span style="font-size:0.8rem">(一)</span>~8/25<span
-                            style="font-size:0.8rem">(一)</span>共三天09:00-18:00</div>
-
-                    <div>ATM匯款、信用卡<span style="font-size:0.8rem">(分期)</span></div>
-                    <div>華南銀行(008)1234567890</div>
-                    <div>付款後請填寫報名表單, 有收到報名成功通知信才算報名成功唷!若有問題,請來信客服信箱:<a style="font-weight: 900;"
-                            href="">service@hhh.com.tw</a></div>
+        <div class="information   container-fluid" style="padding: 0; margin: 0;">
+            <div id="information-01">
+                <div><span style="font-weight: 900;">截止報名日:</span>2021/10/01 23:59</div>
+                <div><span style="font-weight: 900;">開課日期:</span>暫定為10月底，詳細日期將另行通知</div>
+                <div><span style="font-weight: 900;">開課地點:</span>於LINE私密群組中即時LIVE開課!</div>
+                <div><span style="font-weight: 900;">三日精華課程超值費用:</span>NT$80000</div>
+                <div><span style="font-weight: 900;">報名流程:請點擊<a
+                            target="https://payment.ecpay.com.tw/QuickCollect/PayData?N32WLQWLaAdbBZx3yj9fbNNQwxl%2bQ9z%2fkm2bPZqIDVk%3d"
+                            href="https://payment.ecpay.com.tw/QuickCollect/PayData?N32WLQWLaAdbBZx3yj9fbNNQwxl%2bQ9z%2fkm2bPZqIDVk%3d">繳費連結</a>(可刷卡/atm匯款)完成付款後,填寫底下報名表並送出,將有專人與您聯繫!</span>
                 </div>
             </div>
+
+
         </div>
 
         <div id="mobile-form" class="container-fluid" style="padding:0;margin: 0; ">
             <div id="form-card" class="row">
                 <form class="contact-form2 col-md-6">
-                    <input type="text" id="name" name="name" placeholder="姓名(必填, 詳答)" required>
-                    <input type="text" id="company" name="organization" placeholder="公司名稱(必填, 詳答)">
+                    <input type="text" id="name" name="name" placeholder="姓名" required>
+                    <input type="text" id="company" name="organization" placeholder="公司名稱" required>
 
-                    <select name="position" id="profession" required >
+                    <select name="position" id="profession" required>
                         <option value="" disabled selected="selected">職位</option>
                         <option class="option">室內設計師</option>
                         <option class="option">非室內設計師</option>
                         <option class="option">其他</option>
                     </select>
-                    <input type="text" id="phone" name="phone" placeholder="連絡電話(必填, 詳答)" pattern="09\d{2}\d{6}"
+                    <input type="text" id="phone" name="phone" placeholder="連絡電話" pattern="09\d{2}\d{6}"
                         required>
-                    <input type="email" id="email" name="email" placeholder="聯絡email(必填, 詳答)" required>
-                    <input type="text" id="pay" name="cert_last5" placeholder="已匯款, 後五碼是(選填, 詳答)">
+                    <input type="email" id="email" name="email" placeholder="聯絡email" required>
+                    <input type="email" id="line" name="line_id" placeholder="請留下您的LINE ID,(請設定開放搜尋)" required>
+                    <input type="text" id="pay" name="cert_last5" placeholder="已匯款, 後五碼是" required>
                     <textarea name="where_learn" id="message" cols="50" rows="3"
-                        placeholder="是怎麼知道這個課程的(選填, 詳答)"></textarea> </textarea>
-                    <textarea name="why_sign" id="message1" cols="50" rows="3" placeholder="為甚麼想報名(選填, 詳答)"></textarea>
+                        placeholder="是怎麼知道這個課程的" required></textarea>
+                    <textarea name="why_sign" id="message1" cols="50" rows="3" placeholder="為甚麼想報名" required></textarea>
+                    <div style="text-align: left;" id="form05">如有問題歡迎來信<a style="color:#646464" href="">yiya@hhh.com.tw</a> </div>
+                    <div style="text-align: left;">或來電<a style="color:#646464" href="">02-6617-0123 </a>#348  Yiya</div>
                     <div class="form-btn">
                         <input class="btn" style="opacity: 1;" type="submit" value="SEND">
                     </div>

style.css

@@ -116,6 +116,8 @@ body #btn-a #mobile-btn {
   background: #a9d0c5;
   height: 4.5vw;
   width: 100vw !important;
+  position: fixed;
+  z-index: 10;
 }
 
 @media screen and (max-width: 1024px) {
@@ -336,7 +338,7 @@ body #btn-a #mobile-btn {
 #banner .banner1 .btn {
   display: block;
   margin: 0 auto;
-  margin-top: 1vw;
+  margin-top: 3vw;
   width: 15vw;
   border-radius: 30px;
   padding: 12px;
@@ -1105,7 +1107,7 @@ body #btn-a #mobile-btn {
   position: fixed;
   top: 0vw;
   z-index: 10;
-  padding: 15vw 5vw 21vw 1vw;
+  padding: 15vw 1vw 15vw 1vw;
   overflow: hidden;
   margin: 0 !important;
   display: none;
@@ -1119,6 +1121,18 @@ body #btn-a #mobile-btn {
   }
 }
 
+.mobile01-1 .mobile-box1,
+.mobile01-1 .mobile-box2,
+.mobile01-1 .mobile-box3,
+.mobile01-2 .mobile-box1,
+.mobile01-2 .mobile-box2,
+.mobile01-2 .mobile-box3,
+.mobile01-3 .mobile-box1,
+.mobile01-3 .mobile-box2,
+.mobile01-3 .mobile-box3 {
+  height: 80vh;
+}
+
 .mobile01-1 .mobile-box1 .close,
 .mobile01-1 .mobile-box2 .close,
 .mobile01-1 .mobile-box3 .close,
@@ -1144,8 +1158,54 @@ body #btn-a #mobile-btn {
 .mobile01-3 .mobile-box3 .Course-mobile01 {
   background: #fff;
   width: 90vw;
+  height: 85vh;
   margin: 0 auto;
   border-radius: 5px;
+  font-size: 0.9rem;
+}
+
+.mobile01-1 .mobile-box1 .Course-mobile01 .slick-dots li,
+.mobile01-1 .mobile-box2 .Course-mobile01 .slick-dots li,
+.mobile01-1 .mobile-box3 .Course-mobile01 .slick-dots li,
+.mobile01-2 .mobile-box1 .Course-mobile01 .slick-dots li,
+.mobile01-2 .mobile-box2 .Course-mobile01 .slick-dots li,
+.mobile01-2 .mobile-box3 .Course-mobile01 .slick-dots li,
+.mobile01-3 .mobile-box1 .Course-mobile01 .slick-dots li,
+.mobile01-3 .mobile-box2 .Course-mobile01 .slick-dots li,
+.mobile01-3 .mobile-box3 .Course-mobile01 .slick-dots li {
+  margin: 0 10px;
+}
+
+.mobile01-1 .mobile-box1 .Course-mobile01 .slick-dots button,
+.mobile01-1 .mobile-box2 .Course-mobile01 .slick-dots button,
+.mobile01-1 .mobile-box3 .Course-mobile01 .slick-dots button,
+.mobile01-2 .mobile-box1 .Course-mobile01 .slick-dots button,
+.mobile01-2 .mobile-box2 .Course-mobile01 .slick-dots button,
+.mobile01-2 .mobile-box3 .Course-mobile01 .slick-dots button,
+.mobile01-3 .mobile-box1 .Course-mobile01 .slick-dots button,
+.mobile01-3 .mobile-box2 .Course-mobile01 .slick-dots button,
+.mobile01-3 .mobile-box3 .Course-mobile01 .slick-dots button {
+  margin-top: 10px;
+  display: block;
+  width: 30px;
+  height: 3px;
+  padding: 0;
+  border: none;
+  border-radius: 0%;
+  background-color: #d9d9d9;
+  text-indent: -9999px;
+}
+
+.mobile01-1 .mobile-box1 .Course-mobile01 .slick-dots li.slick-active button,
+.mobile01-1 .mobile-box2 .Course-mobile01 .slick-dots li.slick-active button,
+.mobile01-1 .mobile-box3 .Course-mobile01 .slick-dots li.slick-active button,
+.mobile01-2 .mobile-box1 .Course-mobile01 .slick-dots li.slick-active button,
+.mobile01-2 .mobile-box2 .Course-mobile01 .slick-dots li.slick-active button,
+.mobile01-2 .mobile-box3 .Course-mobile01 .slick-dots li.slick-active button,
+.mobile01-3 .mobile-box1 .Course-mobile01 .slick-dots li.slick-active button,
+.mobile01-3 .mobile-box2 .Course-mobile01 .slick-dots li.slick-active button,
+.mobile01-3 .mobile-box3 .Course-mobile01 .slick-dots li.slick-active button {
+  background-color: #fce49d;
 }
 
 .mobile01-1 .mobile-box1 .Course-mobile01 h1,
@@ -1205,7 +1265,7 @@ body #btn-a #mobile-btn {
 .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-1,
 .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-2,
 .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-3 {
-  padding: 1vw 20px 5vw 20px;
+  padding: 1vw 20px 1vw 20px;
 }
 
 @media screen and (max-width: 350px) {
@@ -1236,7 +1296,7 @@ body #btn-a #mobile-btn {
   .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-1,
   .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-2,
   .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-3 {
-    padding: 1vw 0px 7vw 0px;
+    padding: 1vw 0px 1vw 0px;
   }
 }
 
@@ -1271,6 +1331,38 @@ body #btn-a #mobile-btn {
   margin: 0px 10px;
 }
 
+@media screen and (max-width: 400px) {
+  .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-1 .card,
+  .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-2 .card,
+  .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-3 .card,
+  .mobile01-1 .mobile-box2 .Course-mobile01 .card-box-1 .card,
+  .mobile01-1 .mobile-box2 .Course-mobile01 .card-box-2 .card,
+  .mobile01-1 .mobile-box2 .Course-mobile01 .card-box-3 .card,
+  .mobile01-1 .mobile-box3 .Course-mobile01 .card-box-1 .card,
+  .mobile01-1 .mobile-box3 .Course-mobile01 .card-box-2 .card,
+  .mobile01-1 .mobile-box3 .Course-mobile01 .card-box-3 .card,
+  .mobile01-2 .mobile-box1 .Course-mobile01 .card-box-1 .card,
+  .mobile01-2 .mobile-box1 .Course-mobile01 .card-box-2 .card,
+  .mobile01-2 .mobile-box1 .Course-mobile01 .card-box-3 .card,
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-1 .card,
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card,
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-3 .card,
+  .mobile01-2 .mobile-box3 .Course-mobile01 .card-box-1 .card,
+  .mobile01-2 .mobile-box3 .Course-mobile01 .card-box-2 .card,
+  .mobile01-2 .mobile-box3 .Course-mobile01 .card-box-3 .card,
+  .mobile01-3 .mobile-box1 .Course-mobile01 .card-box-1 .card,
+  .mobile01-3 .mobile-box1 .Course-mobile01 .card-box-2 .card,
+  .mobile01-3 .mobile-box1 .Course-mobile01 .card-box-3 .card,
+  .mobile01-3 .mobile-box2 .Course-mobile01 .card-box-1 .card,
+  .mobile01-3 .mobile-box2 .Course-mobile01 .card-box-2 .card,
+  .mobile01-3 .mobile-box2 .Course-mobile01 .card-box-3 .card,
+  .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-1 .card,
+  .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-2 .card,
+  .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-3 .card {
+    font-size: 0.7rem;
+  }
+}
+
 .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-1 .card .card-title,
 .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-2 .card .card-title,
 .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-3 .card .card-title,
@@ -1304,6 +1396,38 @@ body #btn-a #mobile-btn {
   font-size: 1.3rem;
 }
 
+@media screen and (max-width: 400px) {
+  .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-1 .card .card-title,
+  .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-2 .card .card-title,
+  .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-3 .card .card-title,
+  .mobile01-1 .mobile-box2 .Course-mobile01 .card-box-1 .card .card-title,
+  .mobile01-1 .mobile-box2 .Course-mobile01 .card-box-2 .card .card-title,
+  .mobile01-1 .mobile-box2 .Course-mobile01 .card-box-3 .card .card-title,
+  .mobile01-1 .mobile-box3 .Course-mobile01 .card-box-1 .card .card-title,
+  .mobile01-1 .mobile-box3 .Course-mobile01 .card-box-2 .card .card-title,
+  .mobile01-1 .mobile-box3 .Course-mobile01 .card-box-3 .card .card-title,
+  .mobile01-2 .mobile-box1 .Course-mobile01 .card-box-1 .card .card-title,
+  .mobile01-2 .mobile-box1 .Course-mobile01 .card-box-2 .card .card-title,
+  .mobile01-2 .mobile-box1 .Course-mobile01 .card-box-3 .card .card-title,
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-1 .card .card-title,
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card .card-title,
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-3 .card .card-title,
+  .mobile01-2 .mobile-box3 .Course-mobile01 .card-box-1 .card .card-title,
+  .mobile01-2 .mobile-box3 .Course-mobile01 .card-box-2 .card .card-title,
+  .mobile01-2 .mobile-box3 .Course-mobile01 .card-box-3 .card .card-title,
+  .mobile01-3 .mobile-box1 .Course-mobile01 .card-box-1 .card .card-title,
+  .mobile01-3 .mobile-box1 .Course-mobile01 .card-box-2 .card .card-title,
+  .mobile01-3 .mobile-box1 .Course-mobile01 .card-box-3 .card .card-title,
+  .mobile01-3 .mobile-box2 .Course-mobile01 .card-box-1 .card .card-title,
+  .mobile01-3 .mobile-box2 .Course-mobile01 .card-box-2 .card .card-title,
+  .mobile01-3 .mobile-box2 .Course-mobile01 .card-box-3 .card .card-title,
+  .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-1 .card .card-title,
+  .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-2 .card .card-title,
+  .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-3 .card .card-title {
+    font-size: 1rem;
+  }
+}
+
 .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-1 .card img,
 .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-2 .card img,
 .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-3 .card img,
@@ -1361,9 +1485,41 @@ body #btn-a #mobile-btn {
 .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-1 .card .box-img img,
 .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-2 .card .box-img img,
 .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-3 .card .box-img img {
-  width: 40vw;
+  width: 43vw;
   height: 53vw;
-  padding: 15vw 10vw;
+  padding: 15vw 12vw;
+}
+
+@media screen and (max-width: 400px) {
+  .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-1 .card .box-img img,
+  .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-2 .card .box-img img,
+  .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-3 .card .box-img img,
+  .mobile01-1 .mobile-box2 .Course-mobile01 .card-box-1 .card .box-img img,
+  .mobile01-1 .mobile-box2 .Course-mobile01 .card-box-2 .card .box-img img,
+  .mobile01-1 .mobile-box2 .Course-mobile01 .card-box-3 .card .box-img img,
+  .mobile01-1 .mobile-box3 .Course-mobile01 .card-box-1 .card .box-img img,
+  .mobile01-1 .mobile-box3 .Course-mobile01 .card-box-2 .card .box-img img,
+  .mobile01-1 .mobile-box3 .Course-mobile01 .card-box-3 .card .box-img img,
+  .mobile01-2 .mobile-box1 .Course-mobile01 .card-box-1 .card .box-img img,
+  .mobile01-2 .mobile-box1 .Course-mobile01 .card-box-2 .card .box-img img,
+  .mobile01-2 .mobile-box1 .Course-mobile01 .card-box-3 .card .box-img img,
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-1 .card .box-img img,
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card .box-img img,
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-3 .card .box-img img,
+  .mobile01-2 .mobile-box3 .Course-mobile01 .card-box-1 .card .box-img img,
+  .mobile01-2 .mobile-box3 .Course-mobile01 .card-box-2 .card .box-img img,
+  .mobile01-2 .mobile-box3 .Course-mobile01 .card-box-3 .card .box-img img,
+  .mobile01-3 .mobile-box1 .Course-mobile01 .card-box-1 .card .box-img img,
+  .mobile01-3 .mobile-box1 .Course-mobile01 .card-box-2 .card .box-img img,
+  .mobile01-3 .mobile-box1 .Course-mobile01 .card-box-3 .card .box-img img,
+  .mobile01-3 .mobile-box2 .Course-mobile01 .card-box-1 .card .box-img img,
+  .mobile01-3 .mobile-box2 .Course-mobile01 .card-box-2 .card .box-img img,
+  .mobile01-3 .mobile-box2 .Course-mobile01 .card-box-3 .card .box-img img,
+  .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-1 .card .box-img img,
+  .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-2 .card .box-img img,
+  .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-3 .card .box-img img {
+    padding: 13vw 10vw;
+  }
 }
 
 .mobile01-1 .mobile-box1 .Course-mobile01 .card-box-1 .card .box-img2 img,
@@ -1397,13 +1553,99 @@ body #btn-a #mobile-btn {
   width: 40vw;
 }
 
-.mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 {
-  padding: 1vw 15px 5vw 15px;
+.mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card {
+  margin: 0px 10px;
+  font-size: 1rem;
 }
 
-.mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card {
-  margin: 0px 5px;
-  font-size: 0.8rem;
+@media screen and (max-width: 400px) {
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card {
+    font-size: 0.8rem;
+  }
+}
+
+@media screen and (max-width: 350px) {
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card {
+    font-size: 0.7rem;
+  }
+}
+
+.mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card .box-img2 img {
+  padding-top: 20vw;
+  width: 40vw;
+}
+
+@media screen and (max-width: 350px) {
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card .box-img2 img {
+    padding-top: 15vw;
+  }
+}
+
+.mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card .box-img img {
+  width: 43vw;
+  height: 50vw;
+  padding: 15vw 12vw;
+}
+
+@media screen and (max-width: 350px) {
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card .box-img img {
+    padding: 12vw 10vw;
+  }
+}
+
+.mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card .card-title {
+  padding-top: 1rem;
+  font-weight: 900;
+  color: #414346;
+  font-size: 1.3rem;
+}
+
+@media screen and (max-width: 400px) {
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card .card-title {
+    font-size: 1.3rem;
+  }
+}
+
+@media screen and (max-width: 400px) {
+  .mobile01-2 .mobile-box2 .Course-mobile01 .card-box-2 .card .card-title {
+    font-size: 1rem;
+  }
+}
+
+.mobile01-3 .mobile-box3 .Course-mobile01 .card-box-3 .card .box-img img {
+  width: 43vw;
+  height: 50vw;
+  padding: 15vw 12vw;
+}
+
+@media screen and (max-width: 350px) {
+  .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-3 .card .box-img img {
+    padding: 10vw 10vw;
+  }
+}
+
+.mobile01-3 .mobile-box3 .Course-mobile01 .card-box-3 .card .box-img2 img {
+  padding-top: 20vw;
+  width: 40vw;
+}
+
+@media screen and (max-width: 350px) {
+  .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-3 .card .box-img2 img {
+    padding-top: 10vw;
+  }
+}
+
+.mobile01-3 .mobile-box3 .Course-mobile01 .card-box-3 .card .card-title {
+  padding-top: 1rem;
+  font-weight: 900;
+  color: #414346;
+  font-size: 1.3rem;
+}
+
+@media screen and (max-width: 400px) {
+  .mobile01-3 .mobile-box3 .Course-mobile01 .card-box-3 .card .card-title {
+    font-size: 1.3rem;
+  }
 }
 
 #course-schedule {
@@ -1692,7 +1934,7 @@ body #btn-a #mobile-btn {
   background: #f4fffc;
   color: #646464;
   position: relative;
-  padding-bottom: 35vw;
+  padding-bottom: 40vw;
 }
 
 @media screen and (max-width: 1024px) {
@@ -1724,6 +1966,7 @@ body #btn-a #mobile-btn {
   line-height: 3vw;
   top: 15vw;
   left: 20vw;
+  width: 50vw;
 }
 
 @media screen and (max-width: 1024px) {
@@ -1749,7 +1992,7 @@ body #btn-a #mobile-btn {
 
 #information #information-form #form-card .contact-form #name,
 #information #information-form #form-card .contact-form #company {
-  width: 49.5%;
+  width: 100%;
   padding: 10px 15px;
   font-size: 16px;
   border-radius: 3px;
@@ -1769,7 +2012,8 @@ body #btn-a #mobile-btn {
 #information #information-form #form-card .contact-form #pay,
 #information #information-form #form-card .contact-form #message,
 #information #information-form #form-card .contact-form #message1,
-#information #information-form #form-card .contact-form #profession {
+#information #information-form #form-card .contact-form #profession,
+#information #information-form #form-card .contact-form #line {
   width: 100%;
   padding: 10px 15px;
   font-size: 16px;
@@ -1819,13 +2063,12 @@ body #btn-a #mobile-btn {
 }
 
 #information-mobile .information {
-  padding: 20vw 0px;
-  text-align: left;
-  color: #646464;
   background-image: url(./img/information/bg3.png);
   background-size: 175%;
   background-repeat: no-repeat;
   background-position: bottom center;
+  text-align: left;
+  color: #646464;
   font-size: 1rem;
 }
 
@@ -1840,9 +2083,11 @@ body #btn-a #mobile-btn {
 }
 
 #information-mobile .information #information-01 {
-  font-weight: 900;
+  width: 90vw;
+  padding: 30vw 0px !important;
+  margin: auto;
+  line-height: 8vw;
   padding-right: 0px !important;
-  padding-left: 5vw;
 }
 
 @media screen and (max-width: 350px) {
@@ -1852,12 +2097,6 @@ body #btn-a #mobile-btn {
   }
 }
 
-@media screen and (max-width: 350px) {
-  #information-mobile .information #information-02 {
-    padding-left: 0 !important;
-  }
-}
-
 #information-mobile #mobile-form #form-card {
   width: 90vw;
   margin: 0 auto;
@@ -1885,7 +2124,8 @@ body #btn-a #mobile-btn {
 #information-mobile #mobile-form #form-card .contact-form2 #pay,
 #information-mobile #mobile-form #form-card .contact-form2 #message,
 #information-mobile #mobile-form #form-card .contact-form2 #message1,
-#information-mobile #mobile-form #form-card .contact-form2 #profession {
+#information-mobile #mobile-form #form-card .contact-form2 #profession,
+#information-mobile #mobile-form #form-card .contact-form2 #line {
   width: 100%;
   padding: 10px 15px;
   font-size: 16px;
@@ -2046,10 +2286,12 @@ body #btn-a #mobile-btn {
 .container {
   padding: 0 !important;
   margin: 0 !important;
+  text-align: center;
 }
 
 .container #countdown {
-  width: 85vw;
+  position: relative;
+  width: 80vw;
 }
 
 @media screen and (max-width: 1024px) {
@@ -2072,20 +2314,36 @@ body #btn-a #mobile-btn {
 
 .container #countdown ul {
   padding-left: 0 !important;
+  margin: 0 !important;
 }
 
-h1 {
-  font-weight: normal;
-  letter-spacing: 0.125rem;
+.container li {
+  display: inline-block;
+  font-size: 1.5em;
+  list-style-type: none;
+  padding: 1em;
   text-transform: uppercase;
 }
 
+@media screen and (max-width: 400px) {
+  .container li {
+    font-size: 12px;
+  }
+}
+
+.container li span {
+  display: block;
+  font-size: 4.5rem;
+}
+
 li {
   display: inline-block;
   list-style-type: none;
   text-transform: uppercase;
   padding-left: 0 !important;
   position: relative;
+  padding: 1em;
+  font-size: 1.5em;
 }
 
 li #days,
@@ -2096,9 +2354,9 @@ li #seconds {
   font-family: "Roboto", sans-serif !important;
   font-weight: 900;
   color: #fff;
-  text-shadow: 0.5px 0.5px 5px rgba(0, 0, 0, 0.3);
+  text-shadow: 0.5px 0.5px 13px rgba(0, 0, 0, 0.15);
   border-right: 2px solid #fff;
-  padding: 0 45px;
+  padding: 0 40px;
 }
 
 @media screen and (max-width: 1024px) {
@@ -2116,104 +2374,17 @@ li #seconds {
   li #hours,
   li #minutes,
   li #seconds {
-    font-size: 2.5rem;
+    font-size: 2rem;
     padding: 0 5vw 0 1vw;
   }
 }
 
-li .unit {
-  position: absolute;
-  text-align: center;
-  display: block;
-  font-size: 1rem;
-  color: #000;
-  font-weight: 600;
-  letter-spacing: 3px;
-  padding-left: 4vw;
-}
-
-@media screen and (min-width: 1025px) {
-  li .unit {
-    font-size: 1rem;
-    top: 4.5vw;
-  }
-}
-
-@media screen and (max-width: 1024px) {
-  li .unit {
-    font-size: 0.8rem;
-    right: 2vw;
-    top: 5vw;
-  }
-}
-
-@media screen and (max-width: 767px) {
-  li .unit {
-    letter-spacing: 1px;
-    top: 8vw;
-    padding-left: 0vw;
-    -webkit-transform: scale(0.83, 0.83);
-            transform: scale(0.83, 0.83);
-    font-size: 12px;
-  }
-}
-
 @media screen and (max-width: 400px) {
-  li .unit {
-    letter-spacing: 1px;
-    top: 9vw;
-    padding-left: 0vw;
-    -webkit-transform: scale(0.6, 0.6);
-            transform: scale(0.6, 0.6);
-    font-size: 12px;
-  }
-}
-
-@media screen and (min-width: 1025px) {
-  li #unit2 {
-    left: 1vw;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  li #unit2 {
-    right: 3vw;
-  }
-}
-
-@media screen and (min-width: 1025px) {
-  li #unit1 {
-    left: 1vw;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  li #unit1 {
-    right: 3vw;
-  }
-}
-
-@media screen and (min-width: 1025px) {
-  li #unit3 {
-    right: 0vw;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  li #unit3 {
-    left: -2vw;
-  }
-}
-
-@media screen and (min-width: 1025px) {
-  li #unit0 {
-    right: 6vw;
-  }
-}
-
-@media screen and (max-width: 767px) {
-  li #unit0 {
-    right: 9vw;
+  li #days,
+  li #hours,
+  li #minutes,
+  li #seconds {
+    padding: 0 3vw 0 3vw;
   }
 }
 
@@ -2223,7 +2394,7 @@ li .unit {
   }
   li {
     font-size: 1.125rem;
-    padding: 0.75rem;
+    padding: .75rem;
   }
   li span {
     font-size: 3.375rem;

style.scss

@@ -102,7 +102,8 @@ body {
     background: $navbgcolor;
     height: 4.5vw;
     width: 100vw !important;
-
+    position: fixed;
+    z-index: 10;
     @media screen and(max-width:$table) {
         height: 8vw;
     }
@@ -264,7 +265,7 @@ body {
         .btn {
             display: block;
             margin: 0 auto;
-            margin-top: 1vw;
+            margin-top: 3vw;
             width: 15vw;
             border-radius: 30px;
             padding: 12px;
@@ -807,7 +808,7 @@ body {
     position: fixed;
     top: 0vw;
     z-index: 10;
-    padding: 15vw 5vw 21vw 1vw;
+    padding: 15vw 1vw 15vw 1vw;
     overflow: hidden;
     margin: 0 !important;
     display: none;
@@ -817,6 +818,7 @@ body {
     .mobile-box1,
     .mobile-box2,
     .mobile-box3 {
+        height: 80vh;
         .close {
             position: absolute;
             right: 5vw;
@@ -826,8 +828,34 @@ body {
         .Course-mobile01 {
             background: #fff;
             width: 90vw;
+            height: 85vh;
             margin: 0 auto;
             border-radius: 5px;
+            font-size: 0.9rem;
+            .slick-dots {
+    
+                li {
+                    margin: 0 10px;
+                }
+    
+                button {
+                    margin-top: 10px;
+                    display: block;
+                    width: 30px;
+                    height: 3px;
+                    padding: 0;
+                    border: none;
+                    border-radius: 0%;
+                    background-color: #d9d9d9;
+    
+                    text-indent: -9999px;
+                   
+                }
+    
+                li.slick-active button {
+                    background-color: #fce49d;
+                }
+            }
             h1 {
                 padding-top: 10vw;
                 text-align: center;
@@ -842,20 +870,27 @@ body {
             .card-box-1,
             .card-box-2,
             .card-box-3 {
-                padding: 1vw 20px 5vw 20px;
+                
+                padding: 1vw 20px 1vw 20px;
                 @media screen and(max-width:350px) {
-                    padding: 1vw 0px 7vw 0px;
+                    padding: 1vw 0px 1vw 0px;
                 }
                 .card {
+                   
                     text-align: center;
                     margin: 0px 10px;
-
+                    @media screen and(max-width:400px) {
+                        font-size: 0.7rem;
+                    }
                     // border: none !important;
                     .card-title {
                         padding-top: 1rem;
                         font-weight: 900;
                         color: #414346;
                         font-size: 1.3rem;
+                        @media screen and(max-width:400px) {
+                            font-size: 1rem;
+                        }
                     }
 
                     img {
@@ -863,9 +898,13 @@ body {
                     }
                     .box-img {
                         img {
-                            width: 40vw;
+                            width: 43vw;
                             height: 53vw;
-                            padding: 15vw 10vw;
+                            padding: 15vw 12vw;
+                            @media screen and(max-width:400px) {
+                                padding: 13vw 10vw;
+                            }
+                           
                         }
                     }
                     .box-img2 {
@@ -883,10 +922,97 @@ body {
     .mobile-box2 {
         .Course-mobile01 {
             .card-box-2 {
-                padding: 1vw 15px 5vw 15px;
+                @media screen and(max-width:350px) {
+                   
+                }
                 .card {
-                    margin: 0px 5px;
-                    font-size: 0.8rem;
+                    margin: 0px 10px;
+                    font-size: 1rem;
+                  
+
+                    @media screen and(max-width:400px) {
+                        font-size: 0.8rem;
+                    }
+                    @media screen and(max-width:350px) {
+                        font-size: 0.7rem;
+                        
+                    }
+
+                    .box-img2 {
+                        img {
+                            padding-top: 20vw;
+                            width: 40vw;
+                            @media screen and(max-width:350px) {
+                               
+                                padding-top: 15vw;
+                            }
+                        }
+                    }
+                    .box-img {
+                        img {
+                            width: 43vw;
+                            height: 50vw;
+                            padding: 15vw 12vw;
+                            @media screen and(max-width:350px) {
+                                padding: 12vw 10vw;
+                                
+                            }
+                        }
+                    }
+                    .card-title {
+                        padding-top: 1rem;
+                        font-weight: 900;
+                        color: #414346;
+                        font-size: 1.3rem;
+                        @media screen and(max-width:400px) {
+                            font-size: 1.3rem;
+                        }
+                        @media screen and(max-width:400px) {
+                            font-size: 1rem;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+.mobile01-3 {
+    .mobile-box3 {
+        .Course-mobile01 {
+            .card-box-3 {
+              
+                .card {
+                    .box-img {
+                        img {
+                            width: 43vw;
+                            height: 50vw;
+                            padding: 15vw 12vw;
+                            @media screen and(max-width:350px) {
+                                padding: 10vw 10vw;
+                                
+                            }
+                        }
+                    }
+                    .box-img2 {
+                        img {
+                            padding-top: 20vw;
+                            width: 40vw;
+                            @media screen and(max-width:350px) {
+                               
+                                padding-top: 10vw;
+                            }
+                        }
+                    }
+                    .card-title {
+                        padding-top: 1rem;
+                        font-weight: 900;
+                        color: #414346;
+                        font-size: 1.3rem;
+                        @media screen and(max-width:400px) {
+                            font-size: 1.3rem;
+                        }
+                    }
                 }
             }
         }
@@ -1117,7 +1243,8 @@ body {
     background: $bgcolor;
     color: $title-color;
     position: relative;
-    padding-bottom: 35vw;
+    padding-bottom: 40vw;
+
     @media screen and(max-width:$table) {
         padding-bottom: 75vw;
     }
@@ -1137,6 +1264,7 @@ body {
         line-height: 3vw;
         top: 15vw;
         left: 20vw;
+        width: 50vw;
         @media screen and(max-width:$table) {
             font-size: 1rem;
             line-height: 3vw;
@@ -1156,7 +1284,7 @@ body {
             .contact-form {
                 #name,
                 #company {
-                    width: 49.5%;
+                    width: 100%;
                     padding: 10px 15px;
                     font-size: 16px;
                     border-radius: 3px;
@@ -1172,7 +1300,8 @@ body {
                 #pay,
                 #message,
                 #message1,
-                #profession {
+                #profession,
+                #line{
                     width: 100%;
                     padding: 10px 15px;
                     font-size: 16px;
@@ -1214,13 +1343,13 @@ body {
         display: none;
     }
     .information {
-        padding: 20vw 0px;
-        text-align: left;
-        color: $title-color;
         background-image: url(./img/information/bg3.png);
         background-size: 175%;
         background-repeat: no-repeat;
         background-position: bottom center;
+        text-align: left;
+        color: $title-color;
+
         font-size: 1rem;
         @media screen and(max-width:350px) {
             font-size: 0.9rem;
@@ -1229,19 +1358,16 @@ body {
             color: $title-color;
         }
         #information-01 {
-            font-weight: 900;
+            width: 90vw;
+            padding: 30vw 0px !important;
+            margin:auto;
+            line-height: 8vw;
             padding-right: 0px !important;
-            padding-left: 5vw;
             @media screen and(max-width:350px) {
                 padding-left: 1vw;
                 padding-top: 0.8vw;
             }
         }
-        #information-02 {
-            @media screen and(max-width:350px) {
-                padding-left: 0 !important;
-            }
-        }
     }
     #mobile-form {
         #form-card {
@@ -1266,7 +1392,8 @@ body {
                 #pay,
                 #message,
                 #message1,
-                #profession {
+                #profession,
+                #line {
                     width: 100%;
                     padding: 10px 15px;
                     font-size: 16px;
@@ -1274,6 +1401,7 @@ body {
                     margin: 10px 0px;
                     border: 1px solid rgba(0, 0, 0, 0.3);
                 }
+                
 
                 #profession {
                     height: 50px;
@@ -1281,7 +1409,6 @@ body {
                     background-size: 10px 10px;
                     background-color: #fff;
                     appearance: none;
-                
                 }
                 .btn {
                     margin-top: 3vw;
@@ -1402,8 +1529,10 @@ body {
 .container {
     padding: 0 !important;
     margin: 0 !important;
+    text-align: center;
     #countdown {
-        width: 85vw;
+        position: relative;
+        width: 80vw;
         @media screen and(max-width:$table) {
             width: 70vw;
         }
@@ -1415,15 +1544,29 @@ body {
         }
         ul {
             padding-left: 0 !important;
+            margin: 0 !important;
         }
+        
     }
+    li {
+        display: inline-block;
+        font-size: 1.5em;
+        list-style-type: none;
+        padding: 1em;
+        text-transform: uppercase;
+        @media screen and(max-width:400px) {
+            font-size: 12px;
+            
+        }
+      }
+      
+      li span {
+        display: block;
+        font-size: 4.5rem;
+      }
 }
 
-h1 {
-    font-weight: normal;
-    letter-spacing: 0.125rem;
-    text-transform: uppercase;
-}
+
 
 li {
     display: inline-block;
@@ -1431,6 +1574,9 @@ li {
     text-transform: uppercase;
     padding-left: 0 !important;
     position: relative;
+    padding: 1em;
+    font-size: 1.5em;
+
     #days,
     #hours,
     #minutes,
@@ -1439,98 +1585,34 @@ li {
         font-family: "Roboto", sans-serif !important;
         font-weight: 900;
         color: #fff;
-        text-shadow: 0.5px 0.5px 5px rgba(0, 0, 0, 0.3);
+        text-shadow: 0.5px 0.5px 13px rgba(0, 0, 0, 0.15);
         border-right: 2px solid #fff;
-        padding: 0 45px;
+        padding: 0 40px;
         @media screen and(max-width:$table) {
             font-size: 3rem;
             padding: 0 25px;
         }
         @media screen and(max-width:$moblie) {
-            font-size: 2.5rem;
+            font-size: 2rem;
             padding: 0 5vw 0 1vw;
         }
-    }
-    .unit {
-        position: absolute;
-        text-align: center;
-        display: block;
-        font-size: 1rem;
-        color: #000;
-        font-weight: 600;
-        letter-spacing: 3px;
-        padding-left: 4vw;
-        @media screen and(min-width:$desktop) {
-            font-size: 1rem;
-            top: 4.5vw;
-        }
-        @media screen and(max-width:$table) {
-            font-size: 0.8rem;
-            right: 2vw;
-            top: 5vw;
-        }
-        @media screen and(max-width:$moblie) {
-            letter-spacing: 1px;
-            top: 8vw;
-            padding-left: 0vw;
-            transform: scale(0.83, 0.83);
-            font-size: 12px;
-        }
         @media screen and(max-width:400px) {
-            letter-spacing: 1px;
-            top: 9vw;
-            padding-left: 0vw;
-            transform: scale(0.6, 0.6);
-            font-size: 12px;
-        }
-    }
-
-    #unit2 {
-        @media screen and(min-width:$desktop) {
-            left: 1vw;
-        }
-        @media screen and(min-width:768px) {
-            right: 3vw;
-        }
-    }
-    #unit1 {
-        @media screen and(min-width:$desktop) {
-            left: 1vw;
-        }
-        @media screen and(min-width:768px) {
-            right: 3vw;
-        }
-    }
-    #unit3 {
-        @media screen and(min-width:$desktop) {
-            right: 0vw;
-        }
-        @media screen and(min-width:768px) {
-            left: -2vw;
-        }
-    }
-    #unit0 {
-        @media screen and(min-width:$desktop) {
-            right: 6vw;
-        }
-
-        @media screen and(max-width:$moblie) {
-            right: 9vw;
+            padding: 0 3vw 0 3vw;
         }
     }
 }
 
 @media all and (max-width: 768px) {
     h1 {
-        font-size: 1.5rem;
+      font-size: 1.5rem;
     }
-
+    
     li {
-        font-size: 1.125rem;
-        padding: 0.75rem;
+      font-size: 1.125rem;
+      padding: .75rem;
     }
-
+    
     li span {
-        font-size: 3.375rem;
+      font-size: 3.375rem;
     }
-}
+  }