Merge branch 'master' of http://git.choozmo.com:3000/choozmo/HHH_Course

index.html

@@ -111,9 +111,7 @@
             </div>
             <!-- 手機背景 -->
             <img id="mobilecover" src="./img/banner/cover1webp.webp" alt="">
-            <a
-                href="https://payment.ecpay.com.tw/QuickCollect/PayData?N32WLQWLaAdbBZx3yj9fbNNQwxl%2bQ9z%2fkm2bPZqIDVk%3d"><button
-                    class="btn">手刀報名</button></a>
+            <a  data-gt-target="#information" data-gt-duration="500" data-gt-offset="70"><button  class="btn">手刀報名</button></a>
         </div>
     </section>
     <a id="btn-a" data-gt-target="#information-mobile" data-gt-duration="500" data-gt-offset="100"><button
@@ -173,7 +171,8 @@
                     </div>
                     <div id="teacher-name1"></div>
                     <div class="box-img2">
-                        <img src="./img/Course-list/box11.png" style="padding-top:1.9vw ;" alt="">
+                        <img src="./img/Course-list/box11.png" alt="">
+                        <div class="more">了解更多</div>
                     </div>
                 </div>
                 <div class="box2 col-12 col-md-4">
@@ -184,7 +183,8 @@
                     </div>
                     <div id="teacher-name2"></div>
                     <div class="box-img2">
-                        <img src="./img/Course-list/box12.png" style="padding-top:0.5vw" alt="">
+                        <img src="./img/Course-list/box12.png"  alt="">
+                        <div class="more">了解更多</div>
                     </div>
                 </div>
                 <div class="box3 col-12 col-md-4">
@@ -195,7 +195,8 @@
                     </div>
                     <div id="teacher-name3"></div>
                     <div class="box-img2">
-                        <img src="./img/Course-list/box13.png" style="padding-top:1vw" alt="">
+                        <img src="./img/Course-list/box13.png"  alt="">
+                        <div class="more">了解更多</div>
                     </div>
                 </div>
 
@@ -404,6 +405,8 @@
                 <h1 class="name" style="font-family:追奇手寫體;">Vincent</h1>
                 <div class="box-img2" style="padding: 0;">
                     <img src="./img/Course-list/box11.png" style="padding-top:1vw" alt="">
+                    <div class="more">了解更多</div>
+                    
                 </div>
             </div>
             <div class="card ">
@@ -415,6 +418,7 @@
                 <h1 class="name" style="font-family:追奇手寫體;">John</h1>
                 <div class="box-img2">
                     <img src="./img/Course-list/box12.png" style="padding-top:1vw" alt="">
+                    <div class="more">了解更多</div>
                 </div>
             </div>
             <div class="card ">
@@ -426,6 +430,7 @@
                 <h1 class="name" style="font-family:追奇手寫體;">Jennifer</h1>
                 <div class="box-img2">
                     <img src="./img/Course-list/box13.png" style="padding-top:1vw" alt="">
+                    <div class="more">了解更多</div>
                 </div>
             </div>
         </div>
@@ -686,13 +691,13 @@
         <hr class="line" style="opacity: 1;">
         <div id="card-box2" class="row" style="outline: none;">
             <div class="box col-10">
-                <div class="boxs-chedule1">
+                <div class="boxs-chedule1" > 
                     <h1>Day1上午</h1>
                     <div class="card" style="padding: 54px 42px;">
                         <div>社群營造(一)</div>
                     </div>
                 </div>
-                <div class="boxs-chedule1">
+                <div class="boxs-chedule1" style="padding-bottom:5vw;">
                     <h1>Day1下午</h1>
                     <div class="card"  style="padding: 54px 42px;">
                         <div>社群營造(二)</div>

style.css

@@ -11,7 +11,7 @@
 
 @font-face {
   font-family: 追奇手寫體;
-  src: url(./drechifont-proportional.ttf);
+  src: url(./drechifont-proportional.woff);
   font-weight: 900;
 }
 
@@ -88,7 +88,7 @@ body #btn-a {
 body #btn-a #mobile-btn {
   display: block;
   margin: 0 auto;
-  margin-top: 1vw;
+  margin-top: 10vw;
   width: 60vw;
   border-radius: 30px;
   padding: 12px;
@@ -100,6 +100,12 @@ body #btn-a #mobile-btn {
   font-weight: 900;
 }
 
+@media screen and (min-height: 800px) {
+  body #btn-a #mobile-btn {
+    margin-top: 5vw;
+  }
+}
+
 @media screen and (min-width: 768px) {
   body #btn-a {
     display: none;
@@ -114,6 +120,7 @@ body #btn-a #mobile-btn {
 
 #Navigation {
   background: #a9d0c5;
+  opacity: 0.9;
   height: 4.5vw;
   width: 100vw !important;
   position: fixed;
@@ -238,16 +245,35 @@ body #btn-a #mobile-btn {
   background-position: center;
   background-image: url(./img/banner/coverwebp.webp);
   position: relative;
+  height: 100vh;
+}
+
+@media screen and (min-width: 1025px) {
+  #banner {
+    height: 100vh !important;
+  }
 }
 
 @media screen and (max-width: 767px) {
   #banner {
     background-image: none;
-    height: 100vh;
+    height: 95vh;
     padding-bottom: 30vw;
   }
 }
 
+@media screen and (min-height: 750px) {
+  #banner {
+    height: 85vh;
+  }
+}
+
+@media screen and (max-width: 350px) {
+  #banner {
+    height: 100vh;
+  }
+}
+
 #banner .banner1 {
   width: 85vw;
   padding-top: 10vw;
@@ -805,10 +831,11 @@ body #btn-a #mobile-btn {
 #Course-list #Course-content .box1:hover .box-img,
 #Course-list #Course-content .box2:hover .box-img,
 #Course-list #Course-content .box3:hover .box-img {
-  padding-top: 0.95vw;
+  text-align: center;
   background-image: url(./img/people.png);
-  background-size: contain;
+  background-size: 15vw 15vw;
   background-repeat: no-repeat;
+  background-position: center center;
 }
 
 #Course-list #Course-content .box1:hover .box-img img,
@@ -817,25 +844,42 @@ body #btn-a #mobile-btn {
   opacity: 0;
 }
 
-#Course-list #Course-content .box1 .box-img,
-#Course-list #Course-content .box2 .box-img,
-#Course-list #Course-content .box3 .box-img {
-  margin: 20px;
+#Course-list #Course-content .box1:hover .box-img2,
+#Course-list #Course-content .box2:hover .box-img2,
+#Course-list #Course-content .box3:hover .box-img2 {
+  padding-top: 2.9vw;
 }
 
 #Course-list #Course-content .box1 .box-img img,
 #Course-list #Course-content .box2 .box-img img,
 #Course-list #Course-content .box3 .box-img img {
-  padding: 3vw 0px;
-  width: 10vw;
+  padding: 3vw 1.6vw;
+  width: 12.5vw;
+  height: 15vw;
   -o-object-fit: cover;
      object-fit: cover;
 }
 
+#Course-list #Course-content .box1 .box-img2,
+#Course-list #Course-content .box2 .box-img2,
+#Course-list #Course-content .box3 .box-img2 {
+  padding-top: 2vw;
+  text-align: center;
+}
+
 #Course-list #Course-content .box1 .box-img2 img,
 #Course-list #Course-content .box2 .box-img2 img,
 #Course-list #Course-content .box3 .box-img2 img {
-  width: 10vw;
+  width: 11vw;
+  height: 2vw;
+}
+
+#Course-list #Course-content .box1 .box-img2 .more,
+#Course-list #Course-content .box2 .box-img2 .more,
+#Course-list #Course-content .box3 .box-img2 .more {
+  margin-top: -25px;
+  font-weight: 900;
+  color: #fff;
 }
 
 #Course-list #Course-content .box1 h1,
@@ -1144,6 +1188,12 @@ body #btn-a #mobile-btn {
   z-index: 2;
 }
 
+.sec04 #card-box .card .box-img2 .more {
+  font-weight: 900;
+  color: #fff;
+  margin-top: -25px;
+}
+
 .sec04 #card-box .card .card-title {
   padding-top: 2rem;
   color: #646464;
@@ -1183,7 +1233,9 @@ body #btn-a #mobile-btn {
 }
 
 @media screen and (min-width: 768px) {
-  .sec04 #card-box .card .box-img01 img, .sec04 #card-box .card .box-img02 img, .sec04 #card-box .card .box-img03 img {
+  .sec04 #card-box .card .box-img01 img,
+  .sec04 #card-box .card .box-img02 img,
+  .sec04 #card-box .card .box-img03 img {
     width: 20vw;
   }
 }
@@ -1222,7 +1274,7 @@ body #btn-a #mobile-btn {
   background-color: rgba(0, 0, 0, 0.8);
   position: fixed;
   top: 0vw;
-  z-index: 10;
+  z-index: 11;
   padding: 15vw 1vw 15vw 1vw;
   overflow: hidden;
   margin: 0 !important;
@@ -1280,6 +1332,32 @@ body #btn-a #mobile-btn {
   font-size: 0.9rem;
 }
 
+.mobile01-1 .mobile-box1 .Course-mobile01 .slick-dots,
+.mobile01-1 .mobile-box2 .Course-mobile01 .slick-dots,
+.mobile01-1 .mobile-box3 .Course-mobile01 .slick-dots,
+.mobile01-2 .mobile-box1 .Course-mobile01 .slick-dots,
+.mobile01-2 .mobile-box2 .Course-mobile01 .slick-dots,
+.mobile01-2 .mobile-box3 .Course-mobile01 .slick-dots,
+.mobile01-3 .mobile-box1 .Course-mobile01 .slick-dots,
+.mobile01-3 .mobile-box2 .Course-mobile01 .slick-dots,
+.mobile01-3 .mobile-box3 .Course-mobile01 .slick-dots {
+  width: 80%;
+}
+
+@media screen and (max-width: 350px) {
+  .mobile01-1 .mobile-box1 .Course-mobile01 .slick-dots,
+  .mobile01-1 .mobile-box2 .Course-mobile01 .slick-dots,
+  .mobile01-1 .mobile-box3 .Course-mobile01 .slick-dots,
+  .mobile01-2 .mobile-box1 .Course-mobile01 .slick-dots,
+  .mobile01-2 .mobile-box2 .Course-mobile01 .slick-dots,
+  .mobile01-2 .mobile-box3 .Course-mobile01 .slick-dots,
+  .mobile01-3 .mobile-box1 .Course-mobile01 .slick-dots,
+  .mobile01-3 .mobile-box2 .Course-mobile01 .slick-dots,
+  .mobile01-3 .mobile-box3 .Course-mobile01 .slick-dots {
+    width: 95%;
+  }
+}
+
 .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,
@@ -2140,7 +2218,6 @@ body #btn-a #mobile-btn {
 .sec05 {
   text-align: center;
   padding-top: 4.5rem;
-  padding-bottom: 8rem;
   color: #646464;
   padding-bottom: 8rem !important;
   overflow: hidden;
@@ -2390,6 +2467,11 @@ body #btn-a #mobile-btn {
   font-weight: 900;
 }
 
+#information #information-form #form-card .contact-form .btn:hover {
+  background: #a9d0c5;
+  color: #fff;
+}
+
 #information #map {
   border: 1px solid rgba(0, 0, 0, 0.3);
   border-radius: 10px;
@@ -2514,6 +2596,13 @@ body #btn-a #mobile-btn {
   border: 3px solid #a9d0c5;
   font-size: 1.2rem;
   letter-spacing: 1px;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+}
+
+#information-mobile #mobile-form #form-card .contact-form2 .btn:hover {
+  background: #a9d0c5;
+  color: #fff;
 }
 
 #information-mobile #map {
@@ -2531,6 +2620,8 @@ body #btn-a #mobile-btn {
 #footer {
   background: #b0d4ca;
   text-align: center;
+  width: 96vw;
+  margin: 0 auto !important;
 }
 
 #footer p {
@@ -2660,20 +2751,18 @@ body #btn-a #mobile-btn {
 @media screen and (max-width: 767px) {
   .container #countdown {
     width: 100vw;
+    margin: 0 auto;
   }
 }
 
 @media screen and (max-width: 400px) {
   .container #countdown {
+    width: 90vw;
+    margin: 0 auto;
     width: 100vw;
   }
 }
 
-.container #countdown ul {
-  padding-left: 0 !important;
-  margin: 0 !important;
-}
-
 .container li {
   display: inline-block;
   font-size: 1.5em;
@@ -2749,6 +2838,7 @@ li #seconds {
   li #minutes,
   li #seconds {
     padding: 0 3vw 0 3vw;
+    font-size: 1.7rem;
   }
 }
 
@@ -2758,7 +2848,7 @@ li #seconds {
   }
   li {
     font-size: 1.125rem;
-    padding: .75rem;
+    padding: 0.75rem;
   }
   li span {
     font-size: 3.375rem;

style.scss

@@ -15,7 +15,7 @@ $navbgcolor: #a9d0c5;
 @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap");
 @font-face {
     font-family: 追奇手寫體;
-    src: url(./drechifont-proportional.ttf);
+    src: url(./drechifont-proportional.woff);
     font-weight: 900;
 }
 @media screen and(max-width:$table) {
@@ -79,7 +79,7 @@ body {
         #mobile-btn {
             display: block;
             margin: 0 auto;
-            margin-top: 1vw;
+            margin-top: 10vw;
             width: 60vw;
             border-radius: 30px;
             padding: 12px;
@@ -88,6 +88,9 @@ body {
             box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
             border: 3px solid #a9d0c5;
             font-weight: 900;
+            @media screen and(min-height:800px) {
+                margin-top: 5vw;
+            }
         }
         @media screen and(min-width:768px) {
             display: none;
@@ -100,6 +103,7 @@ body {
 // 主選單
 #Navigation {
     background: $navbgcolor;
+    opacity: 0.9;
     height: 4.5vw;
     width: 100vw !important;
     position: fixed;
@@ -197,12 +201,23 @@ body {
     background-position: center;
     background-image: url(./img/banner/coverwebp.webp);
     position: relative;
-
+    height: 100vh;
+    @media screen and(min-width:$desktop) {
+        height: 100vh !important;
+    }
     @media screen and(max-width:$moblie) {
         background-image: none;
-        height: 100vh;
+        height: 95vh;
         padding-bottom: 30vw;
     }
+
+    @media screen and(min-height:750px) {
+        height: 85vh;
+    }
+    @media screen and(max-width:350px) {
+        height: 100vh;
+    }
+
     .banner1 {
         width: 85vw;
         padding-top: 10vw;
@@ -591,26 +606,39 @@ body {
                 }
 
                 .box-img {
-                    padding-top: 0.95vw;
+                    text-align: center;
                     img {
                         opacity: 0;
                     }
                     background-image: url(./img/people.png);
-                    background-size: contain;
+                    background-size: 15vw 15vw;
                     background-repeat: no-repeat;
+                    background-position: center center;
+                }
+                .box-img2 {
+                    padding-top: 2.9vw;
                 }
             }
             .box-img {
-                margin: 20px;
                 img {
-                    padding: 3vw 0px;
-                    width: 10vw;
+                    padding: 3vw 1.6vw;
+                    width: 12.5vw;
+                    height: 15vw;
                     object-fit: cover;
                 }
             }
             .box-img2 {
+                padding-top: 2vw;
+                text-align: center;
+
                 img {
-                    width: 10vw;
+                    width: 11vw;
+                    height: 2vw;
+                }
+                .more {
+                    margin-top: -25px;
+                    font-weight: 900;
+                    color: #fff;
                 }
             }
             h1 {
@@ -647,7 +675,6 @@ body {
     display: none;
     @media screen and(max-width:$table) {
         padding: 50px 20px 100px 20px;
-       
     }
     .close {
         position: absolute;
@@ -660,7 +687,6 @@ body {
         margin: 0 auto;
         @media screen and(max-width:$table) {
             width: 95vw;
-           
         }
         h1 {
             padding-top: 50px;
@@ -688,7 +714,6 @@ body {
                 padding-right: 0 !important;
                 @media screen and(max-width:$table) {
                     margin: 10px 3px;
-                   
                 }
                 .card-title {
                     padding: 30px 0px 20px 0px;
@@ -698,7 +723,6 @@ body {
                     @media screen and(max-width:$table) {
                         width: 18vw;
                         font-size: 1rem;
-                       
                     }
                 }
 
@@ -718,9 +742,10 @@ body {
                     img {
                         padding: 90px 30px 0px 30px;
                         width: 12vw;
+
                         @media screen and(max-width:$table) {
                             width: 15vw;
-                           
+
                             padding: 90px 15px 0px 15px;
                         }
                     }
@@ -764,11 +789,10 @@ body {
         background-position: 40% 50%;
         @media screen and(min-width:767px) {
             padding-top: 15vw;
-       
         }
-          
-        .slick-slide{ 
-            outline: none !important; 
+
+        .slick-slide {
+            outline: none !important;
         }
         .slick-dots {
             margin-top: 50px;
@@ -799,28 +823,31 @@ body {
             margin: 0px 10px;
             position: relative;
             z-index: 2;
+            .box-img2{
+                .more {
+                    font-weight: 900;
+                    color:#fff;
+                    margin-top: -25px;
+                }
+            }
             @media screen and(max-width:$table) {
-              
-               
             }
             .card-title {
                 padding-top: 2rem;
                 color: $title-color;
                 @media screen and(max-width:$table) {
                     font-size: 1.5rem;
-               
                 }
                 @media screen and(max-width:350px) {
                     font-size: 1.8rem;
                 }
             }
-           
+
             h2 {
                 color: $title-color;
                 font-size: 1.3rem;
                 @media screen and(max-width:$table) {
                     font-size: 1rem;
-               
                 }
                 @media screen and(max-width:350px) {
                     font-size: 1rem;
@@ -829,26 +856,23 @@ body {
             img {
                 margin: 0 auto;
             }
-            .box-img01, .box-img02,.box-img03{
-
-                img{
+            .box-img01,
+            .box-img02,
+            .box-img03 {
+               
+                img {
                     @media screen and(min-width:768px) {
                         width: 20vw;
-                   
                     }
-                  
                 }
-                
             }
-
         }
     }
-   .name{
-    @media screen and(max-width:$table) {
-        font-size: 3rem;
-       
+    .name {
+        @media screen and(max-width:$table) {
+            font-size: 3rem;
+        }
     }
-   }
 
     @media screen and(min-width:1000px) {
         display: none;
@@ -858,7 +882,6 @@ body {
         .name {
             padding-bottom: 2rem;
             font-size: 4rem;
-            
         }
     }
     @media screen and(max-width:400px) {
@@ -877,7 +900,7 @@ body {
     background-color: rgba(0, 0, 0, 0.8);
     position: fixed;
     top: 0vw;
-    z-index: 10;
+    z-index: 11;
     padding: 15vw 1vw 15vw 1vw;
     overflow: hidden;
     margin: 0 !important;
@@ -889,7 +912,7 @@ body {
     .mobile-box2,
     .mobile-box3 {
         height: 80vh;
-        
+
         .close {
             position: absolute;
             right: 5vw;
@@ -903,13 +926,16 @@ body {
             margin: 0 auto;
             border-radius: 5px;
             font-size: 0.9rem;
-          
+
             .slick-dots {
-    
+                width: 80%;
+                @media screen and(max-width:350px) {
+                    width: 95%;
+                }
                 li {
                     margin: 0 10px;
                 }
-    
+
                 button {
                     margin-top: 10px;
                     display: block;
@@ -919,11 +945,10 @@ body {
                     border: none;
                     border-radius: 0%;
                     background-color: #d9d9d9;
-    
+
                     text-indent: -9999px;
-                   
                 }
-    
+
                 li.slick-active button {
                     background-color: #fce49d;
                 }
@@ -936,7 +961,6 @@ body {
                 color: #414346;
                 @media screen and(max-width:$table) {
                     font-size: 3rem;
-           
                 }
                 @media screen and(max-width:400px) {
                     font-size: 2rem;
@@ -946,18 +970,15 @@ body {
             .card-box-1,
             .card-box-2,
             .card-box-3 {
-                
                 padding: 1vw 20px 1vw 20px;
                 @media screen and(max-width:350px) {
                     padding: 1vw 0px 1vw 0px;
                 }
                 .card {
-                   
                     text-align: center;
                     margin: 0px 10px;
                     @media screen and(max-width:$table) {
                         font-size: 1.5rem;
-               
                     }
                     @media screen and(max-width:$moblie) {
                         font-size: 0.9rem;
@@ -973,7 +994,6 @@ body {
                         font-size: 1.3rem;
                         @media screen and(max-width:$table) {
                             font-size: 2rem;
-                   
                         }
                         @media screen and(max-width:$moblie) {
                             font-size: 1.3rem;
@@ -991,12 +1011,11 @@ body {
                             width: 43vw;
                             height: 53vw;
                             padding: 15vw 12vw;
-                          
+
                             @media screen and(max-width:400px) {
                                 padding: 13vw 10vw;
                                 height: 51vw;
                             }
-                           
                         }
                     }
                     .box-img2 {
@@ -1005,9 +1024,7 @@ body {
                             width: 40vw;
                             @media screen and(min-width:767px) {
                                 padding-top: 5vw;
-                           
                             }
-                            
                         }
                     }
                 }
@@ -1019,13 +1036,11 @@ body {
     .mobile-box2 {
         .Course-mobile01 {
             .card-box-2 {
-                
                 .card {
                     margin: 0px 10px;
                     font-size: 1rem;
                     @media screen and(max-width:$table) {
                         font-size: 1.5rem;
-               
                     }
                     @media screen and(max-width:$moblie) {
                         font-size: 1rem;
@@ -1036,7 +1051,6 @@ body {
                     }
                     @media screen and(max-width:350px) {
                         font-size: 0.7rem;
-                        
                     }
 
                     .box-img2 {
@@ -1045,13 +1059,11 @@ body {
                             width: 40vw;
                             @media screen and(min-width:767px) {
                                 padding-top: 5vw;
-                           
                             }
                             @media screen and(max-width:$moblie) {
                                 padding-top: 5vw;
                             }
                             @media screen and(max-width:350px) {
-                               
                                 padding-top: 15vw;
                             }
                         }
@@ -1063,7 +1075,6 @@ body {
                             padding: 15vw 12vw;
                             @media screen and(max-width:350px) {
                                 padding: 12vw 10vw;
-                                
                             }
                         }
                     }
@@ -1074,17 +1085,14 @@ body {
                         font-size: 1.3rem;
                         @media screen and(max-width:$table) {
                             font-size: 2rem;
-                   
                         }
                         @media screen and(max-width:$moblie) {
                             font-size: 1rem;
                         }
-                        
 
                         @media screen and(max-width:400px) {
                             font-size: 1rem;
                         }
-                        
                     }
                 }
             }
@@ -1098,10 +1106,8 @@ body {
             .card-box-3 {
                 @media screen and(min-width:$table) {
                     height: 691px;
-           
                 }
                 .card {
-                   
                     .box-img {
                         img {
                             width: 43vw;
@@ -1109,7 +1115,6 @@ body {
                             padding: 15vw 12vw;
                             @media screen and(max-width:350px) {
                                 padding: 10vw 10vw;
-                                
                             }
                         }
                     }
@@ -1119,14 +1124,12 @@ body {
                             width: 40vw;
                             @media screen and(max-width:$table) {
                                 padding-top: 4vw;
-                           
                             }
                             @media screen and(max-width:$moblie) {
                                 padding-top: 10vw;
                             }
-                            
+
                             @media screen and(max-width:350px) {
-                               
                                 padding-top: 5vw;
                             }
                         }
@@ -1138,7 +1141,6 @@ body {
                         font-size: 1.3rem;
                         @media screen and(max-width:$table) {
                             font-size: 2rem;
-                   
                         }
                         @media screen and(max-width:$moblie) {
                             font-size: 1.3rem;
@@ -1259,14 +1261,16 @@ body {
 .sec05 {
     text-align: center;
     padding-top: 4.5rem;
-    padding-bottom: 8rem;
+
     color: $title-color;
     padding-bottom: 8rem !important;
     overflow: hidden;
     position: relative;
+
     @media screen and(min-width:768px) {
         display: none;
     }
+
     .element2 {
         position: absolute;
         width: 70vw;
@@ -1290,8 +1294,8 @@ body {
         background-repeat: no-repeat;
         background-position: 50% 50%;
         position: relative;
-        .slick-slide{ 
-            outline: none !important; 
+        .slick-slide {
+            outline: none !important;
         }
         .slick-dots {
             margin-top: 10px;
@@ -1438,7 +1442,7 @@ body {
                 #message,
                 #message1,
                 #profession,
-                #line{
+                #line {
                     width: 100%;
                     padding: 10px 15px;
                     font-size: 16px;
@@ -1456,6 +1460,10 @@ body {
                     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
                     border: 2px solid #a9d0c5;
                     font-weight: 900;
+                    &:hover {
+                        background: #a9d0c5;
+                        color: #fff;
+                    }
                 }
             }
         }
@@ -1498,7 +1506,7 @@ body {
         #information-01 {
             width: 90vw;
             padding: 30vw 0px !important;
-            margin:auto;
+            margin: auto;
             line-height: 8vw;
             padding-right: 0px !important;
             @media screen and(max-width:350px) {
@@ -1539,7 +1547,6 @@ body {
                     margin: 10px 0px;
                     border: 1px solid rgba(0, 0, 0, 0.3);
                 }
-                
 
                 #profession {
                     height: 50px;
@@ -1561,6 +1568,11 @@ body {
                     border: 3px solid #a9d0c5;
                     font-size: 1.2rem;
                     letter-spacing: 1px;
+                    transition: 0.3s;
+                    &:hover {
+                        background: #a9d0c5;
+                        color: #fff;
+                    }
                 }
             }
         }
@@ -1579,7 +1591,8 @@ body {
 #footer {
     background: #b0d4ca;
     text-align: center;
-   
+    width: 96vw;
+    margin: 0 auto !important;
 
     p {
         padding: 15px;
@@ -1678,15 +1691,15 @@ body {
         }
         @media screen and(max-width:$moblie) {
             width: 100vw;
+            margin: 0 auto;
         }
         @media screen and(max-width:400px) {
+            width: 90vw;
+            margin: 0 auto;
             width: 100vw;
         }
         ul {
-            padding-left: 0 !important;
-            margin: 0 !important;
         }
-        
     }
     li {
         display: inline-block;
@@ -1697,22 +1710,18 @@ body {
         @media screen and(max-width:$table) {
             font-size: 16px;
             text-align: center;
-            
         }
         @media screen and(max-width:400px) {
             font-size: 12px;
-            
         }
-      }
-      
-      li span {
+    }
+
+    li span {
         display: block;
         font-size: 4.5rem;
-      }
+    }
 }
 
-
-
 li {
     display: inline-block;
     list-style-type: none;
@@ -1743,21 +1752,22 @@ li {
         }
         @media screen and(max-width:400px) {
             padding: 0 3vw 0 3vw;
+            font-size: 1.7rem;
         }
     }
 }
 
 @media all and (max-width: 768px) {
     h1 {
-      font-size: 1.5rem;
+        font-size: 1.5rem;
     }
-    
+
     li {
-      font-size: 1.125rem;
-      padding: .75rem;
+        font-size: 1.125rem;
+        padding: 0.75rem;
     }
-    
+
     li span {
-      font-size: 3.375rem;
+        font-size: 3.375rem;
     }
-  }
+}