首页 发现 帮助
注册 登录
choozmo
/
AI_Anchor_Demo
2
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

update

jeter20131220 3 年之前
父节点
2af3012ffc
当前提交
2b5ad75985
共有 24 个文件被更改，包括 1045 次插入 和 431 次删除
分列视图 显示文件统计
  1. 28 21
      about.html
  2. 199 0
      features.html
  3. 二进制
      img/2222.png
  4. 二进制
      img/home-button.png
  5. 二进制
      img/home.png
  6. 二进制
      img/textgrp3.png
  7. 二进制
      img/video.png
  8. 二进制
      img/官網2.mp4
  9. 二进制
      img/官網3.mp4
  10. 二进制
      img/官網4.mp4
  11. 二进制
      img/放大鏡.png
  12. 二进制
      img/春池.xd
  13. 二进制
      img/背景-橘霧.png
  14. 二进制
      img/背景-紫霧.png
  15. 二进制
      img/背景橘.png
  16. 二进制
      img/背景紫.png
  17. 0 1
      index.html
  18. 0 64
      process2.html
  19. 0 64
      process3.html
  20. 0 64
      process4.html
  21. 0 64
      process5.html
  22. 427 96
      style.css
  23. 0 0
      style.css.map
  24. 391 57
      style.scss

+ 28 - 21
about.html
查看文件 

@@ -5,7 +5,7 @@
 
     <meta charset="UTF-8">
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>glass-property</title>
 
+    <title>Ai_anchor_Demo</title>
 
 
 
 
@@ -18,32 +18,39 @@
 
 <body>
 
     <section class="sec01">
 
         <div class="card border-0">
 
-            <img src="./img/T1.png" class="card-img img-fluid" alt="...">
 
+            <!-- <img src="./img/T1.png" class="card-img img-fluid" alt="..."> -->
 
             <div class="card-img-overlay pb-0">
 
-                <div class="row px-0 mx-0">
 
-                    <div class="col-2">
 
-                       <a style="text-decoration: none;" href="./index.html"> <img style="width: 80px;" src="./img/Button_Home.png" alt=""></a>
 
-                    </div>
 
-                    <div class="col-10">
 
-                        <p style="font-size: 48px;position: relative; left:15%" class="propertytitle text-dark fw-bold">關於春池玻璃</p>
 
-                    </div>
 
-                    <div style="margin-top: -20px;" class="pb-5">
 
-                        <img style="position: relative; z-index: 2; top:15px;" class="img-fluid px-0 w-100"src="./img/line.png" alt="">
 
-                        <div style="background:	#FFFFFF; font-size: 14px;"
 
-                            class="text-center py-3 border d-flex align-items-center justify-content-center">
 
-                            <div style="width: 80%;">
 
-                                <p class="text-dark px-0">春池玻璃實業有限公司，目前跨足於工業原料、科技建材、文化藝術與觀光工廠。本業為專業回收玻璃與再處理之企業，總公司在台灣新竹，並擁有三家相關企業。目前每年回收並處理超過10萬噸的春池玻璃，目前為全台最具規模之廢棄玻璃回收業者。其企業理念為永續經營，綠色創新。在2015更獲得根留台灣，展望全球之「金根獎」之殊榮。蔡總統英文更在2016年九月親自參訪春池玻璃觀光工廠，並給予極高評價，稱春池玻璃為台灣「循環經濟」之典範。</p>
 
-                                <p class="text-dark px-0">春池玻璃創辦人吳春池，自1961年起，投入玻璃產業至今已超過50載。目前春池玻璃在新竹與苗栗有五座廢玻璃處理、再加工廠，回收的廢玻璃約占台灣的七成。其目標致力於把有限的資源，不停的循環使用，使其變成永續的材料，走出台灣循環經濟的下一條路。</p>
 
+                <div>
 
+                    <a style="text-decoration: none;color:#000; font-size: 32px;font-weight: 900;"
 
+                        href="./index.html"><img class="me-3" style="width: 60px;" src="./img/home-button.png" alt="">AI
 
+                        Spokesgirl</a>
 
+                </div>
 
+                <section class="sec-hero" style="margin-top: 10px;">
 
+                    <div class="container">
 
+                        <div class="row">
 
+                            <div class="col-md-6">
 
+                                <h2 class="hero-title mb-5">製作影片 一鍵合成</h2>
 
+                                <p class="hero-txt">輸入文字素材，即速產生影片<br>
 
+                                    創作影片，不再需要錄影機、演員、麥克風繁雜器材。<br>
 
+                                    大幅省下時間、人力、器材成本。</p>
 
+                                <button class="hero-btn" onclick="window.location.href=`https://video.choozmo.com/register.html`">立即開始</button>
 
+                            </div>
 
+                            <div class="col-md-6 col-left" style="position: relative;">
 
+                                <img src="img/背景紫.png" alt="" class="hero-purple">
 
+                                <!-- <img src="img/背景-橘.png" alt="" width="150px" class="hero-orange"> -->
 
+                                <img src="img/背景橘.png" alt="" class="hero-orange-s">
 
+                                <img src="img/textgrp3.png" alt="" class="hero-textgrp">
 
+                                <img src="img/video.png" alt="" class="hero-video">
 
+                                <img src="img/放大鏡.png" alt="" class="hero-amplify">
 
+                                <div class="hero-imgfr"><img src="img/2222.png" alt=""></div>
 
                             </div>
 
                         </div>
 
                     </div>
 
-           
-                </div>
 
+                </section>
 
             </div>
 
-            <h1 class="text-center">動畫影片</h1>
 
-        
+
 
         </div>
 
-        
+
 
 
     </section>

+ 199 - 0
features.html
查看文件 

@@ -0,0 +1,199 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Ai_anchor_Demo</title>
 
+
 
+
 
+
 
+
 
+    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> -->
 
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
 
+        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
+
 
+    <link rel="stylesheet" href="./style.css">
 
+</head>
 
+
 
+<body>
 
+<div style="overflow: hidden;">
 
+    <!-- <section  class="sec01">
 
+        <div class="card border-0">
 
+            <img src="./img/T1.png" class="card-img img-fluid" alt="...">
 
+            <div class="card-img-overlay pb-0">
 
+             
+            </div>
 
+        </div>
 
+    </section> -->
 
+    <div class="ai-spokesgril"> 
+        <a style="text-decoration: none;color:#000; font-size: 32px;font-weight: 900; margin-top: 100px; margin-left: 15px;" href="./index.html">
 
+            <img class="me-5" style="width: 60px; margin-right: 15px;" src="./img/home-button.png" alt="">
 
+            AI Spokesgirl
 
+        </a>
 
+    </div>
 
+    <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;">
 
+                <img src="img/背景-橘霧.png" alt="" width="300px" class="features-orangel">
 
+                <div class="col-xs-12 col-md-6 col-lg-6">
 
+                    <div class="features-imgfr">
 
+                        <video autoplay muted loop>
 
+                            <source src="img/官網1_加速.mp4" type="video/mp4">
 
+                        </video>
 
+                    </div>
 
+                </div>
 
+                <div class="col-xs-12 col-md-6 col-lg-6 features-col">
 
+                    <div class="features-block block-right">
 
+                        <span class="features-num">1</span>
 
+                        <div>
 
+                            <h3>輸入文字腳本及素材<br>一鍵輸出合成影片</h3>
 
+                            <ul class="features-list">
 
+                                <li>只需等待數分鐘即產製完成</li>
 
+                                <li>可上傳圖片或是影片作為背景</li>
 
+                                <li>生成MP4檔</li>
 
+                            </ul>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </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 block-left">
 
+                        <span class="features-num">2</span>
 
+                        <div>
 
+                            <h3>多位AI虛擬人物選擇</h3>
 
+                            <ul class="features-list">
 
+                                <li>無人物肖像權問題</li>
 
+                                <li>人物表情、動作自然</li>
 
+                                <li>因應主題，選擇合適人物</li>
 
+                            </ul>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <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">
 
+                        </video>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="row" style="position: relative;">
 
+                <img src="img/背景-紫霧.png" alt="" width="300px" class="features-purplel">
 
+                <div class="col-xs-12 col-md-6">
 
+                    <div class="features-imgfr">
 
+                        <video autoplay muted loop>
 
+                            <source src="img/官網3.mp4" type="video/mp4">
 
+                        </video>
 
+                    </div>
 
+                </div>
 
+                <div class="col-xs-12 col-md-6 features-col">
 
+                    <div class="features-block block-right">
 
+                        <span class="features-num">3</span>
 
+                        <div>
 
+                            <h3>投影片轉製為影片</h3>
 
+                            <ul class="features-list">
 
+                                <li>輸入文字腳本及投影片連結
 
+                                    <br>一鍵完成影片
 
+                                </li>
 
+                                <li>生成MP4檔</li>
 
+                            </ul>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </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 block-left">
 
+                        <span class="features-num">4</span>
 
+                        <div>
 
+                            <h3>多語言支援</h3>
 
+                            <ul class="features-list">
 
+                                <li>支援中英文內容</li>
 
+                                <li>可加入字幕</li>
 
+                            </ul>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <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">
 
+                        </video>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <button class="btn-dark"
 
+                onclick="window.location.href=`https://video.choozmo.com/register.html`">立即開始</button>
 
+        </div>
 
+    </section>
 
+</div>
 
+
 
+
 
+   
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 
+    
+        <script src="//code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
 
+            crossorigin="anonymous"></script>
 
+        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
 
+            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
 
+            crossorigin="anonymous"></script>
 
+    
+    
+    <script>
 
+    function debounce(func, wait = 20, immediate = true) {
 
+          var timeout;
 
+          return function() {
 
+            var context = this, args = arguments;
 
+            var later = function() {
 
+              timeout = null;
 
+              if (!immediate) func.apply(context, args);
 
+            };
 
+            var callNow = immediate && !timeout;
 
+            clearTimeout(timeout);
 
+            timeout = setTimeout(later, wait);
 
+            if (callNow) func.apply(context, args);
 
+          };
 
+      };
 
+      const featuresBlock = document.querySelectorAll('.features-block');
 
+      const featuresRow = document.querySelectorAll('.sec-features .row');
 
+      function checkSlide() {
 
+        console.log('pass');
 
+        featuresRow.forEach((block, i) => {
 
+        // half way through the image
 
+        const slideInAt = (window.scrollY + window.innerHeight) - block.offsetHeight / 2;
 
+        console.log(slideInAt);
 
+        console.log(block.offsetTop);
 
+        // bottom of the image
 
+        const isHalfShown = slideInAt > block.offsetTop;
 
+        if (isHalfShown) {
 
+          console.log('active');
 
+          featuresBlock[i].classList.add('active');
 
+        }
 
+      });
 
+      }
 
+      window.addEventListener('scroll', debounce(checkSlide));
 
+    </script>
 
+</body>
 
+
 
+</html>

二进制
img/2222.png
查看文件


二进制
img/home-button.png
查看文件


二进制
img/home.png
查看文件


二进制
img/textgrp3.png
查看文件


二进制
img/video.png
查看文件


二进制
img/官網2.mp4
查看文件


二进制
img/官網3.mp4
查看文件


二进制
img/官網4.mp4
查看文件


二进制
img/放大鏡.png
查看文件


二进制
img/春池.xd
查看文件


二进制
img/背景-橘霧.png
查看文件


二进制
img/背景-紫霧.png
查看文件


二进制
img/背景橘.png
查看文件


二进制
img/背景紫.png
查看文件


+ 0 - 1
index.html
查看文件 

@@ -63,7 +63,6 @@
 
                     <div class="col-4">
 
                         <img class="img-fluid" src="./img/Button_玻璃藝術.png" alt="">
 
                     </div>
 
-
 
                 </div>
 
             </div>
 
         </div>

+ 0 - 64
process2.html
查看文件 

@@ -1,64 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-
 
-<head>
 
-    <meta charset="UTF-8">
 
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>process</title>
 
-
 
-
 
-
 
-
 
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
 
-        integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
 
-    <link rel="stylesheet" href="./style.css">
 
-</head>
 
-
 
-<body>
 
-    <section class="sec01">
 
-        <div class="card border-0">
 
-            <img src="./img/T1.png" class="card-img img-fluid" alt="...">
 
-            <div class="card-img-overlay pb-0">
 
-                <div class="row px-0 mx-0">
 
-                    <div class="col-2">
 
-                       <a style="text-decoration: none;" href="./index.html"> <img style="width: 80px;" src="./img/Button_Home.png" alt=""></a>
 
-                    </div>
 
-                    <div class="col-10">
 
-                        <p style="font-size: 48px;position: relative; left:15%; width: 50%;" class="propertytitle text-dark fw-bold">回收玻璃流程</p>
 
-                    </div>
 
-                    <div style="margin-top: -20px;" class="pb-5">
 
-                        <img style="position: relative; z-index: 2; top:15px;" class="img-fluid px-0 w-100"src="./img/line.png" alt="">
 
-                        <div style="background:	#FFFFFF;"
 
-                            class="text-center py-3 border d-flex align-items-center justify-content-center">
 
-                            <div>
 
-                                <h1 class="text-center">2.回收廢棄玻璃</h1>
 
-                                <p  class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
 
-                                <p class="text-start">利用廢棄玻璃製成亮彩琉璃、綠建材，實用又兼具環保。</p>
 
-                            </div>
 
-                        </div>
 
-                        
-                    </div>
 
-           
-                </div>
 
-            </div>
 
-            <h1 class="text-center">動畫影片</h1>
 
-        
-        </div>
 
-        
-
 
-    </section>
 
-
 
-
 
-
 
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
 
-        integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
 
-        crossorigin="anonymous"></script>
 
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"
 
-        integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
 
-        crossorigin="anonymous"></script>
 
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 
-</body>
 
-
 
-</html>

+ 0 - 64
process3.html
查看文件 

@@ -1,64 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-
 
-<head>
 
-    <meta charset="UTF-8">
 
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>process</title>
 
-
 
-
 
-
 
-
 
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
 
-        integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
 
-    <link rel="stylesheet" href="./style.css">
 
-</head>
 
-
 
-<body>
 
-    <section class="sec01">
 
-        <div class="card border-0">
 
-            <img src="./img/T1.png" class="card-img img-fluid" alt="...">
 
-            <div class="card-img-overlay pb-0">
 
-                <div class="row px-0 mx-0">
 
-                    <div class="col-2">
 
-                       <a style="text-decoration: none;" href="./index.html"> <img style="width: 80px;" src="./img/Button_Home.png" alt=""></a>
 
-                    </div>
 
-                    <div class="col-10">
 
-                        <p style="font-size: 48px;position: relative; left:15%; width: 50%;" class="propertytitle text-dark fw-bold">回收玻璃流程</p>
 
-                    </div>
 
-                    <div style="margin-top: -20px;" class="pb-5">
 
-                        <img style="position: relative; z-index: 2; top:15px;" class="img-fluid px-0 w-100"src="./img/line.png" alt="">
 
-                        <div style="background:	#FFFFFF;"
 
-                            class="text-center py-3 border d-flex align-items-center justify-content-center">
 
-                            <div>
 
-                                <h1 class="text-center">3.人工初步分類</h1>
 
-                                <p  class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
 
-                                <p class="text-start">人工檢查 、分色、去除非金屬雜物。</p>
 
-                            </div>
 
-                        </div>
 
-                        
-                    </div>
 
-           
-                </div>
 
-            </div>
 
-            <h1 class="text-center">動畫影片</h1>
 
-        
-        </div>
 
-        
-
 
-    </section>
 
-
 
-
 
-
 
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
 
-        integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
 
-        crossorigin="anonymous"></script>
 
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"
 
-        integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
 
-        crossorigin="anonymous"></script>
 
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 
-</body>
 
-
 
-</html>

+ 0 - 64
process4.html
查看文件 

@@ -1,64 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-
 
-<head>
 
-    <meta charset="UTF-8">
 
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>process</title>
 
-
 
-
 
-
 
-
 
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
 
-        integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
 
-    <link rel="stylesheet" href="./style.css">
 
-</head>
 
-
 
-<body>
 
-    <section class="sec01">
 
-        <div class="card border-0">
 
-            <img src="./img/T1.png" class="card-img img-fluid" alt="...">
 
-            <div class="card-img-overlay pb-0">
 
-                <div class="row px-0 mx-0">
 
-                    <div class="col-2">
 
-                       <a style="text-decoration: none;" href="./index.html"> <img style="width: 80px;" src="./img/Button_Home.png" alt=""></a>
 
-                    </div>
 
-                    <div class="col-10">
 
-                        <p style="font-size: 48px;position: relative; left:15%; width: 50%;" class="propertytitle text-dark fw-bold">回收玻璃流程</p>
 
-                    </div>
 
-                    <div style="margin-top: -20px;" class="pb-5">
 
-                        <img style="position: relative; z-index: 2; top:15px;" class="img-fluid px-0 w-100"src="./img/line.png" alt="">
 
-                        <div style="background:	#FFFFFF;"
 
-                            class="text-center py-3 border d-flex align-items-center justify-content-center">
 
-                            <div>
 
-                                <h1 class="text-center">5.二次破碎、玻璃碎屑</h1>
 
-                                <p  class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
 
-                                <p class="text-start">再經機械磨碎至玻璃窯爐熔燒。</p>
 
-                            </div>
 
-                        </div>
 
-                        
-                    </div>
 
-           
-                </div>
 
-            </div>
 
-            <h1 class="text-center">動畫影片</h1>
 
-        
-        </div>
 
-        
-
 
-    </section>
 
-
 
-
 
-
 
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
 
-        integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
 
-        crossorigin="anonymous"></script>
 
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"
 
-        integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
 
-        crossorigin="anonymous"></script>
 
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 
-</body>
 
-
 
-</html>

+ 0 - 64
process5.html
查看文件 

@@ -1,64 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-
 
-<head>
 
-    <meta charset="UTF-8">
 
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>process</title>
 
-
 
-
 
-
 
-
 
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
 
-        integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
 
-    <link rel="stylesheet" href="./style.css">
 
-</head>
 
-
 
-<body>
 
-    <section class="sec01">
 
-        <div class="card border-0">
 
-            <img src="./img/T1.png" class="card-img img-fluid" alt="...">
 
-            <div class="card-img-overlay pb-0">
 
-                <div class="row px-0 mx-0">
 
-                    <div class="col-2">
 
-                       <a style="text-decoration: none;" href="./index.html"> <img style="width: 80px;" src="./img/Button_Home.png" alt=""></a>
 
-                    </div>
 
-                    <div class="col-10">
 
-                        <p style="font-size: 48px;position: relative; left:15%; width: 50%;" class="propertytitle text-dark fw-bold">回收玻璃流程</p>
 
-                    </div>
 
-                    <div style="margin-top: -20px;" class="pb-5">
 
-                        <img style="position: relative; z-index: 2; top:15px;" class="img-fluid px-0 w-100"src="./img/line.png" alt="">
 
-                        <div style="background:	#FFFFFF;"
 
-                            class="text-center py-3 border d-flex align-items-center justify-content-center">
 
-                            <div>
 
-                                <h1 class="text-center">6.二次破碎、玻璃碎屑</h1>
 
-                                <p  class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
 
-                                <p class="text-start">把具有傷害性的破碎玻璃鋒利面，全數熔合成無傷害性、高強度的圓面粒子，顆粒粒徑由零點六厘米至十二厘米。玻璃破屑溶燒後，重新利用、創造新品，循環再生。</p>
 
-                            </div>
 
-                        </div>
 
-                        
-                    </div>
 
-           
-                </div>
 
-            </div>
 
-            <h1 class="text-center">動畫影片</h1>
 
-        
-        </div>
 
-        
-
 
-    </section>
 
-
 
-
 
-
 
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
 
-        integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
 
-        crossorigin="anonymous"></script>
 
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"
 
-        integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
 
-        crossorigin="anonymous"></script>
 
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 
-</body>
 
-
 
-</html>

+ 427 - 96
style.css
查看文件 

@@ -61,102 +61,6 @@ p {
 
   font-size: 24px;
 
 }
 
 
-.bgslider {
 
-  position: relative;
 
-  width: 100% !important;
 
-}
 
-
 
-ul {
 
-  list-style-type: none;
 
-  width: 100% !important;
 
-}
 
-
 
-ul > li {
 
-  position: absolute;
 
-  width: 100% !important;
 
-}
 
-
 
-ul > li:nth-child(3) {
 
-  -webkit-animation: li3 12s infinite;
 
-          animation: li3 12s infinite;
 
-}
 
-
 
-ul > li:nth-child(2) {
 
-  -webkit-animation: li2 12s infinite;
 
-          animation: li2 12s infinite;
 
-}
 
-
 
-ul > li:nth-child(1) {
 
-  -webkit-animation: li1 12s infinite;
 
-          animation: li1 12s infinite;
 
-}
 
-
 
-@-webkit-keyframes li3 {
 
-  0% {
 
-    opacity: 1;
 
-  }
 
-  35% {
 
-    opacity: 0;
 
-  }
 
-  75% {
 
-    opacity: 0;
 
-  }
 
-}
 
-
 
-@keyframes li3 {
 
-  0% {
 
-    opacity: 1;
 
-  }
 
-  35% {
 
-    opacity: 0;
 
-  }
 
-  75% {
 
-    opacity: 0;
 
-  }
 
-}
 
-
 
-@-webkit-keyframes li2 {
 
-  40% {
 
-    opacity: 1;
 
-  }
 
-  80% {
 
-    opacity: 0;
 
-  }
 
-  75% {
 
-    opacity: 0;
 
-  }
 
-}
 
-
 
-@keyframes li2 {
 
-  40% {
 
-    opacity: 1;
 
-  }
 
-  80% {
 
-    opacity: 0;
 
-  }
 
-  75% {
 
-    opacity: 0;
 
-  }
 
-}
 
-
 
-@-webkit-keyframes li1 {
 
-  80% {
 
-    opacity: 1;
 
-  }
 
-  95% {
 
-    opacity: 0;
 
-  }
 
-}
 
-
 
-@keyframes li1 {
 
-  80% {
 
-    opacity: 1;
 
-  }
 
-  95% {
 
-    opacity: 0;
 
-  }
 
-}
 
-
 
 .bg-item {
 
   display: none;
 
 }
 
@@ -341,4 +245,431 @@ ul > li:nth-child(1) {
 
   -webkit-box-shadow: 1px 1px 5px 1px rgba(201, 201, 201, 0.637);
 
           box-shadow: 1px 1px 5px 1px rgba(201, 201, 201, 0.637);
 
 }
 
+
 
+/* sec-hero */
 
+.sec-hero {
 
+  padding: 6rem 0;
 
+  padding-bottom: 0;
 
+  margin-bottom: 0 !important;
 
+}
 
+
 
+.sec-hero h1,
 
+.sec-hero h2,
 
+.sec-hero h3,
 
+.sec-hero h4,
 
+.sec-hero h5,
 
+.sec-hero h6,
 
+.sec-hero .h1,
 
+.sec-hero .h2,
 
+.sec-hero .h3,
 
+.sec-hero .h4,
 
+.sec-hero .h5,
 
+.sec-hero .h6 {
 
+  font-family: "Roboto", Helvetica, Arial, sans-serif;
 
+  font-weight: 900;
 
+  line-height: 1.1;
 
+  color: #333333;
 
+}
 
+
 
+.sec-hero .hero-title {
 
+  font-size: 3.5rem;
 
+  letter-spacing: 1px;
 
+  padding-top: 0rem;
 
+}
 
+
 
+.sec-hero .hero-txt {
 
+  font-size: 1.5em;
 
+  letter-spacing: 1px;
 
+}
 
+
 
+.sec-hero .hero-btn {
 
+  border: none;
 
+  outline: none;
 
+  border-radius: 3rem;
 
+  margin-top: 2rem;
 
+  padding: 1rem 2.5rem;
 
+  background: linear-gradient(20deg, #EA5413, #920783);
 
+  color: white;
 
+  font-size: 1.8rem;
 
+  -webkit-box-shadow: 1px 1px 5px 1px rgba(207, 207, 207, 0.534);
 
+          box-shadow: 1px 1px 5px 1px rgba(207, 207, 207, 0.534);
 
+}
 
+
 
+.hero-orange {
 
+  position: absolute;
 
+  left: 10%;
 
+  top: 0%;
 
+}
 
+
 
+.hero-purple {
 
+  position: absolute;
 
+  right: 0%;
 
+  top: -10%;
 
+  z-index: -1;
 
+  width: 180px;
 
+}
 
+
 
+.hero-orange-s {
 
+  position: absolute;
 
+  left: -5%;
 
+  bottom: 13%;
 
+  z-index: -1;
 
+  -webkit-animation: floating 8s infinite ease-in-out;
 
+          animation: floating 8s infinite ease-in-out;
 
+  width: 80px;
 
+}
 
+
 
+.hero-textgrp {
 
+  z-index: 3;
 
+  position: absolute;
 
+  left: 5%;
 
+  top: 10%;
 
+  -webkit-animation: floating3 6s infinite 1s ease-in-out;
 
+          animation: floating3 6s infinite 1s ease-in-out;
 
+  width: 300px;
 
+}
 
+
 
+.hero-video {
 
+  z-index: 3;
 
+  position: absolute;
 
+  right: 3%;
 
+  top: -5%;
 
+  -webkit-animation: floating 8s infinite 1.5s ease-in-out;
 
+          animation: floating 8s infinite 1.5s ease-in-out;
 
+  width: 120px;
 
+}
 
+
 
+.hero-amplify {
 
+  z-index: 3;
 
+  position: absolute;
 
+  bottom: 5%;
 
+  right: 0;
 
+  -webkit-animation: floating2 5s infinite ease-in-out;
 
+          animation: floating2 5s infinite ease-in-out;
 
+  width: 120px;
 
+}
 
+
 
+.hero-imgfr {
 
+  width: 100%;
 
+  height: 95%;
 
+}
 
+
 
+.hero-imgfr img {
 
+  width: 100%;
 
+}
 
+
 
+@-webkit-keyframes floating {
 
+  from {
 
+    -webkit-transform: translate(0px, 0);
 
+            transform: translate(0px, 0);
 
+  }
 
+  65% {
 
+    -webkit-transform: translate(25px, 0);
 
+            transform: translate(25px, 0);
 
+  }
 
+  to {
 
+    -webkit-transform: translate(0, 0px);
 
+            transform: translate(0, 0px);
 
+  }
 
+}
 
+
 
+@keyframes floating {
 
+  from {
 
+    -webkit-transform: translate(0px, 0);
 
+            transform: translate(0px, 0);
 
+  }
 
+  65% {
 
+    -webkit-transform: translate(25px, 0);
 
+            transform: translate(25px, 0);
 
+  }
 
+  to {
 
+    -webkit-transform: translate(0, 0px);
 
+            transform: translate(0, 0px);
 
+  }
 
+}
 
+
 
+@-webkit-keyframes floating3 {
 
+  from {
 
+    -webkit-transform: translate(0px, 0);
 
+            transform: translate(0px, 0);
 
+  }
 
+  65% {
 
+    -webkit-transform: translate(-20px, 0);
 
+            transform: translate(-20px, 0);
 
+  }
 
+  to {
 
+    -webkit-transform: translate(0, 0px);
 
+            transform: translate(0, 0px);
 
+  }
 
+}
 
+
 
+@keyframes floating3 {
 
+  from {
 
+    -webkit-transform: translate(0px, 0);
 
+            transform: translate(0px, 0);
 
+  }
 
+  65% {
 
+    -webkit-transform: translate(-20px, 0);
 
+            transform: translate(-20px, 0);
 
+  }
 
+  to {
 
+    -webkit-transform: translate(0, 0px);
 
+            transform: translate(0, 0px);
 
+  }
 
+}
 
+
 
+@-webkit-keyframes floating2 {
 
+  from {
 
+    -webkit-transform: translate(0px, 0);
 
+            transform: translate(0px, 0);
 
+  }
 
+  65% {
 
+    -webkit-transform: translate(0px, 10px);
 
+            transform: translate(0px, 10px);
 
+  }
 
+  to {
 
+    -webkit-transform: translate(0, 0px);
 
+            transform: translate(0, 0px);
 
+  }
 
+}
 
+
 
+@keyframes floating2 {
 
+  from {
 
+    -webkit-transform: translate(0px, 0);
 
+            transform: translate(0px, 0);
 
+  }
 
+  65% {
 
+    -webkit-transform: translate(0px, 10px);
 
+            transform: translate(0px, 10px);
 
+  }
 
+  to {
 
+    -webkit-transform: translate(0, 0px);
 
+            transform: translate(0, 0px);
 
+  }
 
+}
 
+
 
+/* sec-features */
 
+.ai-spokesgril {
 
+  margin-top: 50px;
 
+}
 
+
 
+.sec-features {
 
+  padding: 5rem 0;
 
+}
 
+
 
+.sec-features .row {
 
+  margin: 8rem 0;
 
+}
 
+
 
+.sec-features .row:nth-of-type(1) {
 
+  margin: 4rem 0;
 
+}
 
+
 
+.sec-features .row:nth-of-type(4) {
 
+  margin-bottom: 0;
 
+}
 
+
 
+.features-orangel {
 
+  position: absolute;
 
+  left: -150px;
 
+  top: 5%;
 
+  z-index: -1;
 
+}
 
+
 
+.features-purpler {
 
+  position: absolute;
 
+  right: -150px;
 
+  top: 5%;
 
+  z-index: -1;
 
+}
 
+
 
+.features-purplel {
 
+  position: absolute;
 
+  left: -150px;
 
+  top: 5%;
 
+  z-index: -1;
 
+}
 
+
 
+.features-oranger {
 
+  position: absolute;
 
+  right: -150px;
 
+  top: 5%;
 
+  z-index: -1;
 
+}
 
+
 
+.sec-features .row .d-block {
 
+  display: none;
 
+}
 
+
 
+.sec-features .features-col {
 
+  position: relative;
 
+}
 
+
 
+.sec-features .features-col .features-block {
 
+  position: absolute;
 
+  left: 10rem;
 
+  top: 6rem;
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  opacity: 0;
 
+  -webkit-transition: all .8s;
 
+  transition: all .8s;
 
+}
 
+
 
+.sec-features .features-col .features-block h3 {
 
+  font-family: "Roboto", Helvetica, Arial, sans-serif;
 
+  font-weight: 900;
 
+  line-height: 1.1;
 
+  color: #333333;
 
+}
 
+
 
+.sec-features .features-col .block-right {
 
+  -webkit-transform: translateX(-30%) scale(0.95);
 
+          transform: translateX(-30%) scale(0.95);
 
+}
 
+
 
+.sec-features .features-col .block-left {
 
+  -webkit-transform: translateX(30%) scale(0.95);
 
+          transform: translateX(30%) scale(0.95);
 
+}
 
+
 
+.sec-features .features-col .features-block.active {
 
+  opacity: 1;
 
+  -webkit-transform: translateX(0%) scale(1);
 
+          transform: translateX(0%) scale(1);
 
+}
 
+
 
+.sec-features .features-num {
 
+  display: inline-block;
 
+  font-size: 14rem;
 
+  color: #F0F0F0;
 
+}
 
+
 
+.sec-features .features-title {
 
+  font-size: 3rem;
 
+  text-align: center;
 
+  letter-spacing: 1px;
 
+  padding-bottom: 6px;
 
+  border-bottom: 8px solid #EA5413;
 
+  display: inline-block;
 
+}
 
+
 
+.sec-features .features-title strong {
 
+  font-size: 5rem;
 
+}
 
+
 
+.sec-features .features-imgfr {
 
+  width: 100%;
 
+}
 
+
 
+.sec-features .features-imgfr video {
 
+  width: 100%;
 
+}
 
+
 
+.sec-features .features-list {
 
+  text-align: left;
 
+}
 
+
 
+.features-list {
 
+  padding-left: 40px;
 
+  font-size: 18px;
 
+}
 
+
 
+.sec-blogtab {
 
+  padding-bottom: 5rem;
 
+}
 
+
 
+.blog-tabs {
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: flex;
 
+  -webkit-box-align: center;
 
+      -ms-flex-align: center;
 
+          align-items: center;
 
+}
 
+
 
+.blogtab-title {
 
+  font-size: 3rem;
 
+  letter-spacing: 1px;
 
+  padding-bottom: 6px;
 
+  border-bottom: 8px solid #EA5413;
 
+  display: inline-block;
 
+  text-align: center;
 
+}
 
+
 
+.blog-tabs .blog-tabs-nav {
 
+  width: 35%;
 
+  background-color: #F0F0F0;
 
+  padding: 4rem 2.5rem;
 
+  list-style: none;
 
+  -webkit-box-shadow: 0 2px 5px -2px #adadad;
 
+          box-shadow: 0 2px 5px -2px #adadad;
 
+  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;
 
+}
 
+
 
+.blog-tabs .blog-tabs-stage {
 
+  width: 65%;
 
+  padding: 3.5rem;
 
+  padding-bottom: 6rem;
 
+  -webkit-box-shadow: 1px 1px 10px 2px grey;
 
+          box-shadow: 1px 1px 10px 2px grey;
 
+  height: 48rem;
 
+  overflow: hidden;
 
+  text-align: left;
 
+  position: relative;
 
+}
 
+
 
+.blog-tab-box {
 
+  height: 90%;
 
+  overflow: scroll;
 
+}
 
+
 
+.blog-tabs .blog-tabs-stage .blog-txt {
 
+  font-size: 1.6rem;
 
+}
 
+
 
+.btn-light {
 
+  color: black;
 
+  border: 1px solid #EA5413;
 
+  padding: 1rem 2.5rem;
 
+  outline: none;
 
+  background-color: white;
 
+  margin-top: 4rem;
 
+  border-radius: 3rem;
 
+  font-size: 1.8rem;
 
+  -webkit-box-shadow: 1px 1px 5px 1px rgba(201, 201, 201, 0.637);
 
+          box-shadow: 1px 1px 5px 1px rgba(201, 201, 201, 0.637);
 
+}
 
+
 
+.btn-dark {
 
+  text-decoration: none;
 
+  color: white;
 
+  border: 1px solid #EA5413;
 
+  padding: 1rem 2.5rem;
 
+  outline: none;
 
+  background-color: #EA5413;
 
+  margin-top: 4rem;
 
+  border-radius: 3rem;
 
+  font-size: 1.8rem;
 
+  -webkit-box-shadow: 1px 1px 5px 1px rgba(201, 201, 201, 0.637);
 
+          box-shadow: 1px 1px 5px 1px rgba(201, 201, 201, 0.637);
 
+}
 
+
 
+.blog-tabs .btn-light {
 
+  margin-top: 1.5rem;
 
+  color: #EA5413;
 
+  position: absolute;
 
+  bottom: 1rem;
 
+  left: 3.5rem;
 
+}
 
 /*# sourceMappingURL=style.css.map */

文件差异内容过多而无法显示
+ 0 - 0
style.css.map


+ 391 - 57
style.scss
查看文件 

@@ -65,63 +65,63 @@ p{
 
   font-size: 24px;
 
 }
 
 
-.bgslider{
 
-  position: relative;
 
-  width: 100% !important;
 
-}
 
-ul{
 
-  list-style-type: none;
 
-  width: 100% !important;
 
-
 
-}
 
-ul>li{
 
-  position: absolute;
 
-  width: 100% !important;
 
-}
 
-
 
-ul>li:nth-child(3){
 
-  animation: li3 12s infinite;
 
-}
 
-ul>li:nth-child(2){
 
-  animation: li2 12s infinite;
 
-}
 
-ul>li:nth-child(1){
 
-  animation: li1 12s infinite;
 
-}
 
-
 
-
 
-
 
-@keyframes li3{
 
-  0%{
 
-    opacity: 1;
 
-  }
 
-  35%{
 
-    opacity: 0;
 
-  }
 
-
 
-  75%{
 
-    opacity: 0;
 
-  }
 
-}
 
-@keyframes li2{
 
-  40%{
 
-    opacity: 1;
 
-  }
 
-  80%{
 
-    opacity: 0;
 
-  }
 
-  75%{
 
-    opacity: 0;
 
-  }
 
-}
 
-@keyframes li1{
 
-  80%{
 
-    opacity: 1;
 
-  }
 
-  95%{
 
-    opacity: 0;
 
-  }
 
-}
 
+// .bgslider{
 
+//   position: relative;
 
+//   width: 100% !important;
 
+// }
 
+// ul{
 
+//   list-style-type: none;
 
+//   width: 100% !important;
 
+
 
+// }
 
+// ul>li{
 
+//   position: absolute;
 
+//   width: 100% !important;
 
+// }
 
+
 
+// ul>li:nth-child(3){
 
+//   animation: li3 12s infinite;
 
+// }
 
+// ul>li:nth-child(2){
 
+//   animation: li2 12s infinite;
 
+// }
 
+// ul>li:nth-child(1){
 
+//   animation: li1 12s infinite;
 
+// }
 
+
 
+
 
+
 
+// @keyframes li3{
 
+//   0%{
 
+//     opacity: 1;
 
+//   }
 
+//   35%{
 
+//     opacity: 0;
 
+//   }
 
+
 
+//   75%{
 
+//     opacity: 0;
 
+//   }
 
+// }
 
+// @keyframes li2{
 
+//   40%{
 
+//     opacity: 1;
 
+//   }
 
+//   80%{
 
+//     opacity: 0;
 
+//   }
 
+//   75%{
 
+//     opacity: 0;
 
+//   }
 
+// }
 
+// @keyframes li1{
 
+//   80%{
 
+//     opacity: 1;
 
+//   }
 
+//   95%{
 
+//     opacity: 0;
 
+//   }
 
+// }
 
 
 .bg-item{
 
   display: none;
 
@@ -284,4 +284,338 @@ ul>li:nth-child(1){
 
   border-radius: 3rem;
 
   font-size: 1.8rem;
 
   box-shadow: 1px 1px 5px 1px rgba(201, 201, 201, 0.637);
 
+}
 
+
 
+
 
+/* sec-hero */
 
+.sec-hero {
 
+  padding: 6rem 0;
 
+  padding-bottom: 0;
 
+  margin-bottom: 0 !important;
 
+  h1,
 
+h2,
 
+h3,
 
+h4,
 
+h5,
 
+h6,
 
+.h1,
 
+.h2,
 
+.h3,
 
+.h4,
 
+.h5,
 
+.h6 {
 
+  font-family: "Roboto", Helvetica, Arial, sans-serif;
 
+  font-weight: 900;
 
+  line-height: 1.1;
 
+  color: #333333;
 
+}
 
+}
 
+
 
+.sec-hero .hero-title {
 
+  font-size: 3.5rem;
 
+  letter-spacing: 1px;
 
+  padding-top: 0rem;
 
+}
 
+
 
+.sec-hero .hero-txt {
 
+  font-size: 1.5em;
 
+  letter-spacing: 1px;
 
+}
 
+
 
+.sec-hero .hero-btn {
 
+  border: none;
 
+  outline: none;
 
+  border-radius: 3rem;
 
+  margin-top: 2rem;
 
+  padding: 1rem 2.5rem;
 
+  background: linear-gradient(20deg, #EA5413, #920783);
 
+  color: white;
 
+  font-size: 1.8rem;
 
+  box-shadow: 1px 1px 5px 1px rgba(207, 207, 207, 0.534);
 
+}
 
+
 
+.hero-orange {
 
+  position: absolute;
 
+  left: 10%;
 
+  top: 0%;
 
+}
 
+
 
+.hero-purple {
 
+  position: absolute;
 
+  right: 0%;
 
+  top: -10%;
 
+  z-index: -1;
 
+  width: 180px;
 
+}
 
+
 
+.hero-orange-s {
 
+  position: absolute;
 
+  left: -5%;
 
+  bottom: 13%;
 
+  z-index: -1;
 
+  animation: floating 8s infinite ease-in-out;
 
+  width: 80px;
 
+}
 
+
 
+.hero-textgrp {
 
+  z-index: 3;
 
+  position: absolute;
 
+  left: 5%;
 
+  top: 10%;
 
+  animation: floating3 6s infinite 1s ease-in-out;
 
+  width: 300px;
 
+}
 
+
 
+.hero-video {
 
+  z-index: 3;
 
+  position: absolute;
 
+  right: 3%;
 
+  top: -5%;
 
+  animation: floating 8s infinite 1.5s ease-in-out;
 
+  width: 120px;
 
+}
 
+
 
+.hero-amplify {
 
+  z-index: 3;
 
+  position: absolute;
 
+  bottom: 5%;
 
+  right: 0;
 
+  animation: floating2 5s infinite ease-in-out;
 
+  width: 120px;
 
+}
 
+
 
+.hero-imgfr {
 
+  width: 100%;
 
+  height: 95%;
 
+}
 
+
 
+.hero-imgfr img {
 
+  width: 100%;
 
+}
 
+
 
+@keyframes floating {
 
+  from { transform: translate(0px,  0); }
 
+  65%  { transform: translate(25px, 0); }
 
+  to   { transform: translate(0, -0px); }    
+}
 
+
 
+@keyframes floating3 {
 
+  from { transform: translate(0px,  0); }
 
+  65%  { transform: translate(-20px, 0); }
 
+  to   { transform: translate(0, -0px); }    
+}
 
+
 
+@keyframes floating2 {
 
+  from { transform: translate(0px,  0); }
 
+  65%  { transform: translate(0px, 10px); }
 
+  to   { transform: translate(0, -0px); }    
+}
 
+
 
+/* sec-features */
 
+.ai-spokesgril{
 
+  margin-top: 50px;
 
+}
 
+
 
+.sec-features {
 
+  padding: 5rem 0;
 
+}
 
+
 
+.sec-features .row {
 
+  margin: 8rem 0;
 
+}
 
+
 
+.sec-features .row:nth-of-type(1) {
 
+  margin: 4rem 0;
 
+}
 
+
 
+.sec-features .row:nth-of-type(4) {
 
+  margin-bottom: 0;
 
+}
 
+
 
+.features-orangel {
 
+  position: absolute;
 
+  left: -150px;
 
+  top: 5%;
 
+  z-index: -1;
 
+}
 
+
 
+.features-purpler {
 
+  position: absolute;
 
+  right: -150px;
 
+  top: 5%;
 
+  z-index: -1;
 
+}
 
+
 
+.features-purplel {
 
+  position: absolute;
 
+  left: -150px;
 
+  top: 5%;
 
+  z-index: -1;
 
+}
 
+
 
+.features-oranger {
 
+  position: absolute;
 
+  right: -150px;
 
+  top: 5%;
 
+  z-index: -1;
 
+}
 
+
 
+.sec-features .row .d-block {
 
+  display: none;
 
+}
 
+
 
+.sec-features .features-col {
 
+  position: relative;
 
+}
 
+
 
+.sec-features .features-col .features-block {
 
+  position: absolute;
 
+  left: 10rem;
 
+  top: 6rem;
 
+  display: flex;
 
+  opacity: 0;
 
+  transition: all .8s;
 
+  h3{
 
+    font-family: "Roboto", Helvetica, Arial, sans-serif;
 
+    font-weight: 900;
 
+    line-height: 1.1;
 
+    color: #333333;
 
+  }
 
+}
 
+
 
+.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: 14rem;
 
+  color: #F0F0F0;
 
+}
 
+
 
+.sec-features .features-title {
 
+  font-size: 3rem;
 
+  text-align: center;
 
+  letter-spacing: 1px;
 
+  padding-bottom: 6px;
 
+  border-bottom: 8px solid #EA5413;
 
+  display: inline-block;
 
+}
 
+
 
+.sec-features .features-title strong {
 
+  font-size: 5rem;
 
+}
 
+
 
+.sec-features .features-imgfr {
 
+  width: 100%;
 
+}
 
+
 
+.sec-features .features-imgfr video {
 
+  width: 100%;
 
+}
 
+
 
+.sec-features .features-list {
 
+  text-align: left;
 
+}
 
+
 
+.features-list{
 
+  padding-left:40px;
 
+  font-size: 18px;
 
+}
 
+
 
+.sec-blogtab {
 
+  padding-bottom: 5rem;
 
+}
 
+
 
+.blog-tabs {
 
+  display: flex;
 
+  align-items: center;
 
+}
 
+
 
+.blogtab-title {
 
+  font-size: 3rem;
 
+  letter-spacing: 1px;
 
+  padding-bottom: 6px;
 
+  border-bottom: 8px solid #EA5413;
 
+  display: inline-block;
 
+  text-align: center;
 
+}
 
+
 
+.blog-tabs .blog-tabs-nav {
 
+  width: 35%;
 
+  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;
 
+}
 
+
 
+.blog-tabs .blog-tabs-stage {
 
+  width: 65%;
 
+  padding: 3.5rem;
 
+  padding-bottom: 6rem;
 
+  box-shadow: 1px 1px 10px 2px grey;
 
+  height: 48rem;
 
+  overflow: hidden;
 
+  text-align: left;
 
+  position: relative;
 
+}
 
+
 
+.blog-tab-box {
 
+  height: 90%;
 
+  overflow: scroll;
 
+}
 
+
 
+.blog-tabs .blog-tabs-stage .blog-txt {
 
+  font-size: 1.6rem;
 
+}
 
+
 
+.btn-light {
 
+  color: black;
 
+  border: 1px solid #EA5413;
 
+  padding: 1rem 2.5rem;
 
+  outline: none;
 
+  background-color: white;
 
+  margin-top: 4rem;
 
+  border-radius: 3rem;
 
+  font-size: 1.8rem;
 
+  box-shadow: 1px 1px 5px 1px rgba(201, 201, 201, 0.637);
 
+}
 
+
 
+.btn-dark {
 
+  text-decoration: none;
 
+  color: white;
 
+  border: 1px solid #EA5413;
 
+  padding: 1rem 2.5rem;
 
+  outline: none;
 
+  background-color: #EA5413;
 
+  margin-top: 4rem;
 
+  border-radius: 3rem;
 
+  font-size: 1.8rem;
 
+  box-shadow: 1px 1px 5px 1px rgba(201, 201, 201, 0.637);
 
+}
 
+
 
+.blog-tabs .btn-light {
 
+  margin-top: 1.5rem;
 
+  color: #EA5413;
 
+  position: absolute;
 
+  bottom: 1rem;
 
+  left: 3.5rem;
 
 }

部分文件因为文件数量过多而无法显示