LP and vtuber modification

layouts/_default/taxonomy.html

@@ -105,7 +105,7 @@
         </div>
         <!-- /#content -->
 
-        {{ partial "footer.html" . }}
+        {{ partial "LP_components/Footer.html" . }}
 
     </div>
     <!-- /#all -->

layouts/index.html

@@ -75,11 +75,19 @@
         // bottom of the image
         const isHalfShown = slideInAt > block.offsetTop;
         if (isHalfShown) {
+          console.log('active');
           block.classList.add('active');
         }
       });
       }
       window.addEventListener('scroll', debounce(checkSlide));
+
+      $('.navbar-nav .dropdown:nth-of-type(2)').click(function() {
+        console.log('pa');
+        $('html, body').animate({
+            scrollTop: $("#sec-features").offset().top
+        }, 1000);
+      })
     </script>
 
   </body>

layouts/partials/LP_components/Footer.html

@@ -1,20 +1,20 @@
 <footer class="footer">
     <div class="container">
         <div class="row">
-            <div class="col-xs-12 col-md-6">
-                <img src="img/CMM_LOGO.png" alt="" width="250">
+            <div class="col-xs-12 col-sm-6">
+                <img src="https://i.imgur.com/P1gNopa.png" alt="" width="250">
                 <div class="footer-aigirl">Choozmo AI Spokesgirl</div>
                 <div class="footer-follow">關注我們</div>
                 <div class="footer-socials">
-                    <a href="https://www.linkedin.com/company/choozmo/"><img src="img/linkedin-logo.png" alt=""></a>
-                    <a href="https://www.facebook.com/choozmo/"><img src="img/facebook.png" alt=""></a>
-                    <a href="https://line.me/R/ti/p/@choozmo?from=page"><img src="img/line.png" alt=""></a>
-                    <a href="https://www.youtube.com/channel/UCi3jHOCCmx0Zyl2ZvoHzHQg"><img src="img/youtube-new-flat-logo-1.png" alt="" width="32px" height="32px"></a>
-                    <a href="https://www.instagram.com/choozmo_cmm/"><img src="img/instagram.png" alt="" width="32px" height="32px"></a>
-                    <a href="https://twitter.com/ai_cmm"><img src="img/twitter.png" alt="" width="32px" height="32px"></a>
+                    <a href="https://www.linkedin.com/company/choozmo/"><img src="https://i.imgur.com/u2MFY3U.png" alt=""></a>
+                    <a href="https://www.facebook.com/choozmo/"><img src="https://i.imgur.com/0t496B3.png" alt=""></a>
+                    <a href="https://line.me/R/ti/p/@choozmo?from=page"><img src="https://i.imgur.com/1o8FNqF.png" alt=""></a>
+                    <a href="https://www.youtube.com/channel/UC2Qda9PhJWuiMTCZ-j7K_hg"><img src="https://i.imgur.com/u4bSf2F.png" alt="" width="32px" height="32px"></a>
+                    <a href="https://www.instagram.com/choozmo_cmm/"><img src="https://i.imgur.com/LNAJtkO.png" alt="" width="32px" height="32px"></a>
+                    <a href="https://twitter.com/ai_cmm"><img src="https://i.imgur.com/ImYZfgI.png" alt="" width="32px" height="32px"></a>
                 </div>
             </div>
-            <div class="col-xs-12 col-md-6">
+            <div class="col-xs-12 col-sm-6">
                 <div class="footer-contacts">
                     <h5>CONTACT</h5>
                     <div>

layouts/partials/LP_components/action.html

@@ -4,6 +4,8 @@
             <h2>想要快速製作影音內容？<br>
                 立即註冊，開始創作！</h2>
         </div>
+        <div class="action-triangle">
+        </div>
     </div>
     <div class="container text-center">
         <form action="" method="post">

layouts/partials/LP_components/features.html

@@ -1,4 +1,4 @@
-<section class="sec-features">
+<section class="sec-features" id="sec-features">
     <div class="container text-center">
         <h2 class="features-title"><strong>4</strong>大特色</h2>
         <div class="row" style="position: relative;">
@@ -11,7 +11,7 @@
                 </div>
             </div>
             <div class="col-xs-12 col-md-6 features-col">
-                <div class="features-block">
+                <div class="features-block block-right">
                     <span class="features-num">1</span>
                     <div>
                         <h3>輸入文字腳本及素材<br>一鍵輸出合成影片</h3>
@@ -26,8 +26,15 @@
         </div>
         <div class="row" style="position: relative;">
             <img src="img/背景-紫.png" alt="" width="300px" class="features-purpler">
+            <div class="col-xs-12 col-md-6 d-block">
+                <div class="features-imgfr">
+                    <video autoplay muted loop>
+                        <source src="img/官網2.mp4" type="video/mp4">
+                    </video>
+                </div>
+            </div>
             <div class="col-xs-12 col-md-6 features-col">
-                <div class="features-block">
+                <div class="features-block block-left">
                     <span class="features-num">2</span>
                     <div>
                         <h3>多位AI虛擬人物選擇</h3>
@@ -39,7 +46,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-xs-12 col-md-6">
+            <div class="col-xs-12 col-md-6 d-md-block">
                 <div class="features-imgfr">
                     <video autoplay muted loop>
                         <source src="img/官網2.mp4" type="video/mp4">
@@ -57,7 +64,7 @@
                 </div>
             </div>
             <div class="col-xs-12 col-md-6 features-col">
-                <div class="features-block">
+                <div class="features-block block-right">
                     <span class="features-num">3</span>
                     <div>
                         <h3>投影片轉製為影片</h3>
@@ -73,8 +80,15 @@
         </div>
         <div class="row" style="position: relative;">
             <img src="img/背景-橘.png" alt="" width="300px" class="features-oranger">
+            <div class="col-xs-12 col-md-6 d-block">
+                <div class="features-imgfr">
+                    <video autoplay muted loop>
+                        <source src="img/官網4.mp4" type="video/mp4">
+                    </video>
+                </div>
+            </div>
             <div class="col-xs-12 col-md-6 features-col">
-                <div class="features-block">
+                <div class="features-block block-left">
                     <span class="features-num">4</span>
                     <div>
                         <h3>多語言支援</h3>
@@ -85,7 +99,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-xs-12 col-md-6">
+            <div class="col-xs-12 col-md-6 d-md-block">
                 <div class="features-imgfr">
                     <video autoplay muted loop>
                         <source src="img/官網4.mp4" type="video/mp4">

layouts/partials/LP_components/steps.html

@@ -2,7 +2,7 @@
     <div class="container text-center">
         <h2 class="steps-title"><strong>3</strong>步驟快速合成影片</h2>
         <div class="row">
-            <div class="col-xs-12 col-md-4">
+            <div class="col-xs-12 col-sm-4">
                 <div class="steps-block">
                     <div class="steps-imgfr"><img src="img/aigirls.png" alt=""></div>
                     <div class="steps-txt">
@@ -11,7 +11,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-xs-12 col-md-4">
+            <div class="col-xs-12 col-sm-4">
                 <div class="steps-block">
                     <div class="steps-imgfr"><img src="img/textgrp.png" alt=""></div>
                     <div class="steps-txt">
@@ -20,7 +20,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-xs-12 col-md-4">
+            <div class="col-xs-12 col-sm-4">
                 <div class="steps-block">
                     <div class="steps-imgfr"><img src="img/imagesgrp.png" alt=""></div>
                     <div class="steps-txt">

layouts/partials/LP_components/use_cases.html

@@ -2,25 +2,25 @@
     <div class="container">
         <h2 class="usecase-title">使用情境</h2>
         <div class="row">
-            <div class="col-xs-6 col-md-3">
+            <div class="col-xs-12 col-sm-6 col-md-3">
                 <div class="usecase-block">
                     <div class="usecase-imgfr"><img src="img/導覽.png" alt=""></div>
                     <h3 class="usecase-sub">產品介紹</h3>
                 </div>
             </div>
-            <div class="col-xs-6 col-md-3">
+            <div class="col-xs-12 col-sm-6 col-md-3">
                 <div class="usecase-block">
                     <div class="usecase-imgfr"><img src="img/教育.png" alt=""></div>
                     <h3 class="usecase-sub">教育培訓</h3>
                 </div>
             </div>
-            <div class="col-xs-6 col-md-3">
+            <div class="col-xs-12 col-sm-6 col-md-3">
                 <div class="usecase-block">
                     <div class="usecase-imgfr"><img src="img/短影片.png" alt=""></div>
                     <h3 class="usecase-sub">資訊傳播</h3>
                 </div>
             </div>
-            <div class="col-xs-6 col-md-3">
+            <div class="col-xs-12 col-sm-6 col-md-3">
                 <div class="usecase-block">
                     <div class="usecase-imgfr"><img src="img/內容創作.png" alt=""></div>
                     <h3 class="usecase-sub">個人內容創作</h3>

layouts/shortcodes/vtuber.html

@@ -8,7 +8,8 @@
                         <p>全名為「Virtual YouTuber」簡稱為「Vtuber」，其意思為「虛擬的」Youtuber。是以虛擬的人物進行Youtube相關的影音創作，藉此讓動畫人物如真正的人一樣生動且真實。</p>
                     </div>
                 </div>
-                <div class="col-md-6">
+                <div class="col-md-6" style="position: relative;">
+                    <img src="https://i.imgur.com/2HjEBt5.png" alt="" width="250px" class="sec-right">
                     <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//IzHhpC_bD6g?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
                 </div>
             </div>

static/css/custom.css

@@ -15,7 +15,7 @@
 }
 
 #navigation .navbar-nav .dropdown.active .main-link {
-  border-bottom: 3px solid #EA5413;
+  border-bottom: 3px solid #EA5413
 }
 
 #navigation .navbar-nav .signin-link {
@@ -258,6 +258,10 @@
   z-index: -1;
 }
 
+.sec-features .row .d-block {
+  display: none;
+}
+
 .sec-features .features-col {
   position: relative;
 }
@@ -268,14 +272,22 @@
   top: 6rem;
   display: flex;
   opacity: 0;
-  transition: all 1s;
+  transition: all 1.5s;
+}
+
+.sec-features .features-col .block-right  {
+  transform: translateX(-30%) scale(0.95);
+}
+
+.sec-features .features-col .block-left  {
+  transform: translateX(30%) scale(0.95);
 }
 
 .sec-features .features-col .features-block.active {
   opacity: 1;
+  transform: translateX(0%) scale(1);
 }
 
-
 .sec-features .features-num {
   display: inline-block;
   font-size: 12rem;
@@ -406,12 +418,21 @@
   width: 100%;
   background-color: #EA5413;
   padding: 2rem 0;
+  border-color: #EA5413;
 }
 
 .sec-action .action-clip h2 {
   color: white;
 }
 
+.sec-action .action-triangle {
+  clip-path: polygon(0 0, 50% 60%, 100% 0);
+  -webkit-clip-path: polygon(0 0, 50% 60%, 100% 0);
+  background: #EA5413;
+  height: 8rem;
+  border-color: #EA5413;
+}
+
 .sec-action form {
   padding: 4rem 0;
 }
@@ -529,6 +550,117 @@
   font-size: 4.5rem;
 }
 
+@media (max-width: 992px) {
+  .sec-steps .steps-block {
+    padding: 0rem;
+  }
+  
+  .sec-steps .steps-block::after {
+    width: 100%;
+    height: 12rem;
+  }
+  
+  .sec-steps .steps-imgfr {
+    width: 100%;
+    height: 20rem;
+  }
+  
+  .sec-steps .steps-imgfr img {
+    width: 100%;
+  }
+
+  .sec-steps .steps-txt h3.steps-sub {
+    font-size: 1.3rem;
+  }
+  
+  .sec-steps .steps-txt span {
+    width: 25px;
+    height: 25px;
+    background-color: #EA5413;
+    font-size: 1.3rem;
+    line-height: 25px;
+  }
+  .sec-features .row {
+    margin: 5rem 0;
+  }
+  .sec-features .features-col {
+    position: relative;
+    height: 25vh;
+  }
+  .sec-features .features-col .features-block {
+    left: 2rem;
+    top: 1rem;
+  }
+  .sec-features .row .d-md-block {
+    display: none;
+  }
+  .sec-features .row .d-block {
+    display: block;
+  }
+}
+
+@media (max-width: 765px) {
+  .sec-steps .steps-block {
+    padding: 2rem 15rem;
+  }
+  .sec-steps .steps-imgfr {
+    width: 100%;
+    height: 32vh;
+  }
+  .sec-usecase .row>div {
+    width: 50%;
+  }
+  .blog-tabs {
+    flex-direction: column;
+  }
+  .blog-tabs .blog-tabs-stage {
+    width: 95%;
+  }
+  .blog-tabs .blog-tabs-nav {
+    width: 95%;
+    background-color: #F0F0F0;
+    padding: 4rem 2.5rem;
+    list-style: none;
+    box-shadow: 0 2px 5px -2px rgb(173, 173, 173);
+    text-align: left;
+  }
+  .blog-tabs .blog-tabs-nav li {
+    padding: 10px;
+    border-bottom: 1px dashed grey;
+  }
+  .blog-tabs .blog-tabs-nav li a {
+    color: #EA5413;
+  }
+  .footer .container .row {
+    flex-direction: column;
+    text-align: center;
+  }
+  .navbar-collapse .navbar-nav li {
+    display: inline-block;
+    
+  }
+
+  .nav>li {
+      display: inline-block;
+  }
+}
+
+@media (max-width: 576px) {
+  .sec-steps .steps-block {
+    padding: 2rem 6rem;
+  }
+  .sec-steps .steps-imgfr {
+    width: 100%;
+    height: 20rem;
+  }
+  .sec-steps .steps-txt h3.steps-sub {
+    font-size: 1.5rem;
+  }
+  .sec-usecase .row>div {
+    width: 100%;
+  }
+}
+
 @media (max-width: 992px) {
   .container__footer {
     flex-direction: column;
@@ -547,9 +679,6 @@
   }
 }
 
-.btn {
-  border: 2px solid #181c47;
-}
 
 .btn:hover {
   background-color: #181c47;
@@ -658,8 +787,8 @@
 }
 
 .logo-sm {
-  width: 110px;
-  height: 30px;
+  width: 150px;
+  height: 40px;
 }
 
 .logo_text {
@@ -908,19 +1037,15 @@
   padding-top: 2rem;
 }
 
-.sec01 .embed-container::after{
+.sec-right {
   position: absolute;
-  content: " ";
-  left: 3rem;
-  top: 3rem;
-  width: 100%;
-  height: 100%;
-  background: url("https://i.imgur.com/hm0lc6X.jpg");
-  z-index: -2;
+  right: -15%;
+  top: 10%;
+
 }
 
 .sec02 {
-  background-color: #f3f3f9;
+  background-color: #FFEBE2;
   position: relative;
   /* clip-path: polygon(0% -10%, 100% 0%, 110% 100%, 0% 100%); */
 }
@@ -932,12 +1057,13 @@
 
 .sec04 {
   padding: 8rem 0;
-  background-color: #f3f3f9;
+  background-color: #FFEBE2;
   position: relative;
   padding-top: 3rem;
 }
 
 .sec04::after {
+  display: none;
     content: "";
     position: absolute;
     top: -66px;
@@ -946,12 +1072,13 @@
     width: 100%;
     height: 66px;
     transform: rotate(180deg);
-    background-image: url("https://animoto.com/static/desktop-wiggle-6af922ddb441fd9fda898e14ecad1127.svg");
+    background-image: url("https://i.imgur.com/fR4Tz5V.png");
     background-size: 3840px 66px;
     background-position: 0 0;
 }
 
-.sec02::after {
+ .sec02::after {
+  display: none;
     content: "";
     position: absolute;
     bottom: -66px;
@@ -959,7 +1086,7 @@
     display: block;
     width: 100%;
     height: 66px;
-    background-image: url("https://animoto.com/static/desktop-wiggle-6af922ddb441fd9fda898e14ecad1127.svg");
+    background-image: url("https://i.imgur.com/fR4Tz5V.png");
     background-size: 3840px 66px;
     background-position: 0 0;
 }
@@ -968,10 +1095,11 @@
   position: relative;
   padding-top: 0;
   padding-bottom: 4rem;
-  background-color: #f3f3f9;
+  background-color: #FFEBE2;
 }
 
 .sec05::after {
+  display: none;
   content: "";
     position: absolute;
     bottom: -66px;
@@ -979,7 +1107,7 @@
     display: block;
     width: 100%;
     height: 66px;
-    background-image: url("https://animoto.com/static/desktop-wiggle-6af922ddb441fd9fda898e14ecad1127.svg");
+    background-image: url("https://i.imgur.com/fR4Tz5V.png");
     background-size: 3840px 66px;
     background-position: 0 0;
 }
@@ -1035,7 +1163,7 @@
   width: 45px;
   height: 45px;
   border-radius: 50%;
-  background-color: #23408c;
+  background-color: #EA5413;
   color: white;
   line-height: 35px;
   margin-right: 1rem;
@@ -1045,17 +1173,18 @@
 }
 
 .btn-template-main {
-  color: #181c47;
+  color: #EA5413;
 }
 
 .btn {
-  color: #181c47;
-  border: 2px solid #181c47;
+  color: #EA5413;
+  border: 2px solid #EA5413;
+  border-radius: 2rem;
 }
 
 .btn:hover {
-  background-color: #181c47;
-  border: 2px solid #181c47;
+  background-color: #EA5413;
+  border: 2px solid #EA5413;
 }
 
 #blog-listing-medium .post{
@@ -1102,7 +1231,7 @@
   list-style: none;
 }
 .v-tabs-nav li a {
-  color: #23408c;
+  color: grey;
   font-size: 2.5rem;
   letter-spacing: 2px;
   display: block;
@@ -1116,7 +1245,7 @@
 }
 .v-tab-active a {
   background: #fff;
-  border-bottom: 2px solid #23408c;
+  border-bottom: 2px solid grey;
   color: #2db34a;
   cursor: default;
 }
@@ -1132,6 +1261,10 @@
   font-size: 2.5rem;
 }
 
+#block-vtuber .v-tabs .owl-page span {
+  background: #EA5413;
+}
+
 .d-tabs {
   max-width: 100%;
 }
@@ -1141,7 +1274,7 @@
   list-style: none;
 }
 .d-tabs-nav li a {
-  color: #23408c;
+  color: grey;
   font-size: 2.5rem;
   letter-spacing: 2px;
   display: block;
@@ -1155,7 +1288,7 @@
 }
 .d-tab-active a {
   background: transparent;
-  border-bottom: 2px solid #23408c;
+  border-bottom: 2px solid grey;
   color: #2db34a;
   cursor: default;
 }
@@ -1180,7 +1313,7 @@
   list-style: none;
 }
 .m-tabs-nav li a {
-  color: #23408c;
+  color: grey;
   font-size: 2.5rem;
   letter-spacing: 2px;
   display: block;
@@ -1193,8 +1326,8 @@
   color: black;
 }
 .m-tab-active a {
-  background: #f3f3f9;
-  border-bottom: 2px solid #23408c;
+  background: transparent;
+  border-bottom: 2px solid grey;
   color: #2db34a;
   cursor: default;
 }
@@ -1235,19 +1368,19 @@
 .grow_btn {
   padding: 1.2rem 7rem;
   font-size: 2.5rem;
-  border: 2px solid #181c47;
+  border: 2px solid #EA5413;
   background: transparent;
   outline: none;
   border-radius: 5rem;
   transition: all .3s;
   display: inline-block;
-  color: #181c47;
+  color: #EA5413;
   text-decoration: none;
 }
 
 .grow_btn:hover {
   color: white;
-  background: #181c47;
+  background: #EA5413;
   text-decoration: none;
 }
 

static/css/style.default.css

@@ -515,7 +515,7 @@ ul.list-style-none {
   font-family: "Roboto", Helvetica, Arial, sans-serif;
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  padding: 6px 12px;
+  padding: 5px 12px;
   font-size: 13px;
   line-height: 1.42857143;
   border-radius: 0;
@@ -586,9 +586,9 @@ fieldset[disabled] .btn-template-main.active {
 .btn-template-main:focus,
 .btn-template-main:active,
 .btn-template-main.active {
-  background: #38a7bb;
+  background: #EA5413;
   color: #ffffff;
-  border-color: #38a7bb;
+  border-color: #EA5413;
 }
 .btn-template-transparent-primary {
   color: #ffffff;
@@ -885,7 +885,7 @@ fieldset[disabled] .btn-template-primary.active {
 .panel.sidebar-menu .panel-heading h4,
 .panel.sidebar-menu .panel-heading h5 {
   display: inline-block;
-  border-bottom: solid 5px #181c47;
+  border-bottom: solid 5px #EA5413;
   line-height: 1.1;
   margin-bottom: 0;
   padding-bottom: 10px;
@@ -973,7 +973,7 @@ fieldset[disabled] .btn-template-primary.active {
   padding: 5px;
   border: solid 1px #eeeeee;
   border-radius: 0;
-  color: #181c47;
+  color: #EA5413;
   margin: 5px 5px 5px 0;
   text-transform: uppercase;
   letter-spacing: 0.08em;
@@ -982,12 +982,12 @@ fieldset[disabled] .btn-template-primary.active {
   text-decoration: none;
 }
 .panel.sidebar-menu ul.tag-cloud li a:hover {
-  color: #181c47;
-  border-color: #181c47;
+  color: #EA5413;
+  border-color: #EA5413;
 }
 .panel.sidebar-menu ul.tag-cloud li.active a {
   color: #FFFFFF;
-  background-color: #181c47;
+  background-color: #EA5413;
 }
 .panel.sidebar-menu ul.tag-cloud li.active a:hover {
   color: #FFFFFF;
@@ -1731,7 +1731,7 @@ fieldset[disabled] .btn-template-primary.active {
   border: none;
 }
 #heading-breadcrumbs {
-  background: #f3f3f9;
+  background: #FFEBE2;
   padding: 0 0;
   margin-bottom: 40px;
   text-align: center;
@@ -2099,7 +2099,7 @@ fieldset[disabled] .btn-template-primary.active {
   color: #555555;
 }
 #blog-listing-medium .post h2 a:hover {
-  color: #38a7bb;
+  color: grey;
 }
 #blog-listing-medium .post .author-category {
   float: left;
@@ -2790,7 +2790,7 @@ fieldset[disabled] .btn-template-primary.active {
 .nav-pills > li.active > a:hover,
 .nav-pills > li.active > a:focus {
   color: #ffffff;
-  background-color: #38a7bb;
+  background-color: #FFEBE2;
 }
 .nav-stacked > li {
   float: none;
@@ -3134,7 +3134,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 .navbar-default .navbar-toggle:hover,
 .navbar-default .navbar-toggle:focus {
-  background-color: #38a7bb;
+  background-color: #EA5413;
 }
 .navbar-default .navbar-toggle .icon-bar {
   background-color: #888888;
@@ -3310,15 +3310,15 @@ label {
 .pager li > a,
 .pager li > span {
   background-color: #ffffff;
-  border: 1px solid #181c47;
+  border: 1px solid #EA5413;
   border-radius: 0;
-  color: #181c47;
+  color: #EA5413;
 }
 .pager li > a:hover,
 .pager li > a:focus {
   text-decoration: none;
   color: #fff;
-  background-color: #181c47;
+  background-color: #EA5413;
 }
 .pager .disabled > a,
 .pager .disabled > a:hover,

webSite/config.toml

@@ -36,7 +36,7 @@ page = ["HTML"]
 [[menu.main]]
     identifier="login"
     name = "特色"
-    url  = "http://ai.choozmo.com"
+    url  = "#sec-features"
     weight = 2
 
 [[menu.main]]

webSite/static/daily-trends/2021-06-18.html

@@ -154,7 +154,7 @@ a[x-apple-data-detectors='true'] {
 
 
 <div class="u-row-container" style="padding: 0px;background-color: transparent">
-  <div class="u-row" style="Margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background: linear-gradient(0deg, #ea5413 , #920783);">
+  <div class="u-row" style="Margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background: linear-gradient(0deg, #181c47 , #920783);">
     <div classs="bg-cover" style="border-collapse: collapse;display: table;width: 100%;background-image: url('http://edm.cmm.ai/images/%E8%B6%A8%E5%8B%A2%E6%97%A5%E5%A0%B1BANNER.jpg');background-repeat: no-repeat;background-position: center top;background-color: transparent;background-size: contain;">
       <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 0px;background-color: transparent;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:600px;"><tr style="background-image: url('images/image-4.png');background-repeat: no-repeat;background-position: center top;background-color: #0000ff;"><![endif]-->
       
@@ -220,7 +220,7 @@ a[x-apple-data-detectors='true'] {
 
 
 <div class="u-row-container" style="padding: 0px;background-color: white">
-  <div class="u-row" style="Margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background: linear-gradient(200deg, #ea5413 , #920783);">
+  <div class="u-row" style="Margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background: linear-gradient(200deg, #181c47 , #920783);">
     <div style="border-collapse: collapse;display: table;width: 100%;background-color: transparent;">
       <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 0px;background-color: transparent;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:600px;"><tr style="background-color: #ffffff;"><![endif]-->
       
@@ -353,7 +353,7 @@ a[x-apple-data-detectors='true'] {
 
 <!--立即聯繫-->
 <div class="u-row-container" style="padding: 0px;background-color: transparent">
-  <div class="u-row" style="Margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background: linear-gradient(210deg, #ea5413 , #920783);">
+  <div class="u-row" style="Margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background: linear-gradient(210deg, #181c47 , #920783);">
     <div style="border-collapse: collapse;display: table;width: 100%;background-image: url('http://edm.cmm.ai/images/%E7%AB%8B%E5%8D%B3%E9%80%A3%E7%B9%AB.png');background-repeat: no-repeat;background-position: center top;background-color: transparent;background-size: contain;">
       <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 0px;background-color: transparent;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:600px;"><tr style="background-color: #ffffff;"><![endif]-->