3 gadi atpakaļ · e93de196c9
--- a/about.html
+++ b/about.html
@@ -0,0 +1,62 @@
 
															+<!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>glass-property</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%" 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>
														
 
															+                        </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>
														
--- a/goto.js
+++ b/goto.js
@@ -0,0 +1,65 @@
 
															+
														
 
															+// var next=document.getElementsByClassName('nextPage');
														
 
															+var next = document.getElementById('nextPage');
														
 
															+var prev = document.getElementById('prevPage');
														
 
															+
														
 
															+var items = document.getElementsByClassName('bg-item');
														
 
															+var items2 = document.getElementsByClassName('bg-item2');
														
 
															+
														
 
															+var index = 0;
														
 
															+
														
 
															+// console.log(items);
														
 
															+
														
 
															+function btnNext() {
														
 
															+    index++;
														
 
															+
														
 
															+    if (index > 3) index = 3;
														
 
															+    console.log(index);
														
 
															+
														
 
															+    ShowItems();
														
 
															+    ShowItems2();
														
 
															+};
														
 
															+
														
 
															+function btnPrev() {
														
 
															+    index--;
														
 
															+    if (index < 0) index = 0;
														
 
															+    console.log(index);
														
 
															+
														
 
															+    ShowItems();
														
 
															+    ShowItems2();
														
 
															+    
														
 
															+};
														
 
															+
														
 
															+next.onclick = btnNext;
														
 
															+
														
 
															+prev.onclick = btnPrev;
														
 
															+
														
 
															+console.log(items)
														
 
															+
														
 
															+function ShowItems() {
														
 
															+    // 迴圈執行，將每張項目的類別bg-active移除
														
 
															+    for (var i = 0; i<items.length; i++) {
														
 
															+        items[i].classList.remove("bg-active");    
														
 
															+    }
														
 
															+    // 將要顯示的項目添加bg-active類別
														
 
															+    items[index].classList.add("bg-active");
														
 
															+    // $('.bg-item').fadeIn();
														
 
															+
														
 
															+};
														
 
															+
														
 
															+function ShowItems2() {
														
 
															+    // 迴圈執行，將每張項目的類別bg-active移除
														
 
															+    for (var i = 0; i<items.length; i++) {
														
 
															+        items2[i].classList.remove("bg-active");    
														
 
															+    }
														
 
															+    // 將要顯示的項目添加bg-active類別
														
 
															+    items2[index].classList.add("bg-active");
														
 
															+    // $('.bg-item').fadeIn();
														
 
															+
														
 
															+};
														
 
															+
														
 
															+// var duration =document.getElementById('bg-itembox').getAttribute('data-slider-duration');
														
 
															+
														
 
															+// console.log(duration);
														
 
															+
														
 
															+// setInterval(btnNext,duration);
														
--- a/img/+.png
+++ b/img/+.png
--- a/img/-.png
+++ b/img/-.png
--- a/img/1000.png
+++ b/img/1000.png
--- a/img/1000_F_370841520_fBLmAlVJUAqgT18yp3lvL5KN0Fh8cyW8.jpg
+++ b/img/1000_F_370841520_fBLmAlVJUAqgT18yp3lvL5KN0Fh8cyW8.jpg
--- a/img/1000c.jpg
+++ b/img/1000c.jpg
--- a/img/1633409116610.jpg
+++ b/img/1633409116610.jpg
--- a/img/1633409158555.jpg
+++ b/img/1633409158555.jpg
--- a/img/1633409172788.jpg
+++ b/img/1633409172788.jpg
--- a/img/600.png
+++ b/img/600.png
--- a/img/600c.jpg
+++ b/img/600c.jpg
--- a/img/700.png
+++ b/img/700.png
--- a/img/700c.png
+++ b/img/700c.png
--- a/img/800.png
+++ b/img/800.png
--- a/img/800c.jpg
+++ b/img/800c.jpg
--- a/img/BG1.png
+++ b/img/BG1.png
--- a/img/BG2.png
+++ b/img/BG2.png
--- a/img/BG3.png
+++ b/img/BG3.png
--- a/img/Button01.png
+++ b/img/Button01.png
--- a/img/Button_Home.png
+++ b/img/Button_Home.png
--- a/img/Button_影片導覽.png
+++ b/img/Button_影片導覽.png
--- a/img/Button_玻璃流程.png
+++ b/img/Button_玻璃流程.png
--- a/img/Button_玻璃特性.png
+++ b/img/Button_玻璃特性.png
--- a/img/Button_玻璃用途.png
+++ b/img/Button_玻璃用途.png
--- a/img/Button_玻璃藝術.png
+++ b/img/Button_玻璃藝術.png
--- a/img/LOGO.png
+++ b/img/LOGO.png
--- a/img/T1.png
+++ b/img/T1.png
--- a/img/bgsec01.png
+++ b/img/bgsec01.png
--- a/img/bgsec02.png
+++ b/img/bgsec02.png
--- a/img/bgsec03.png
+++ b/img/bgsec03.png
--- a/img/line.png
+++ b/img/line.png
--- a/img/回收玻璃流程_字.png
+++ b/img/回收玻璃流程_字.png
--- a/img/回收玻璃用途_字.png
+++ b/img/回收玻璃用途_字.png
--- a/img/回收玻璃藝術_字.png
+++ b/img/回收玻璃藝術_字.png
--- a/img/影片導覽_字.png
+++ b/img/影片導覽_字.png
--- a/img/春池.xd
+++ b/img/春池.xd
--- a/img/玻璃特性_字.png
+++ b/img/玻璃特性_字.png
--- a/img/關於春池玻璃_字.png
+++ b/img/關於春池玻璃_字.png
--- a/index.html
+++ b/index.html
@@ -0,0 +1,86 @@
 
															+<!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>springpoolglass</title>
														
 
															+
														
 
															+
														
 
															+
														
 
															+    <link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
														
 
															+    <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 text-white">
														
 
															+            <div class="bgslider">
														
 
															+                <!-- <div id="bg-itembox" data-slider-duration="5000">
														
 
															+                    <div class="bg-item bg-active">
														
 
															+                        <img src="./img/bgsec01.png" class="itemimg01 card-img img-fluid" alt="...">
														
 
															+                    </div>
														
 
															+                    <div class="bg-item">
														
 
															+                        <img src="./img/bgsec02.png" class="itemimg01 card-img img-fluid" alt="...">
														
 
															+                    </div>
														
 
															+                    <div class="bg-item">
														
 
															+                        <img src="./img/bgsec03.png" class="itemimg01 imgn3 card-img img-fluid" alt="...">
														
 
															+                    </div>
														
 
															+                </div> -->
														
 
															+                <ul class="px-0">
														
 
															+                    <li><img src="./img/bgsec03.png" class="itemimg01 card-img img-fluid" alt="..."></li>
														
 
															+                    <li><img src="./img/bgsec02.png" class="itemimg01 card-img img-fluid" alt="..."></li>
														
 
															+                    <li><img src="./img/bgsec01.png" class="itemimg01 card-img img-fluid" alt="..."></li>
														
 
															+                </ul>
														
 
															+            </div>
														
 
															+            <div id="nextPage" class="card-img-overlay pt-5">
														
 
															+                <div class="row px-0 mx-0">
														
 
															+                    <div class="col-4">
														
 
															+                        <a style="text-decoration: none;" href="./about.html">
														
 
															+                        <img class="img-fluid" src="./img/Button01.png" alt="">
														
 
															+                        </a>
														
 
															+                    </div>
														
 
															+                    <div class="col-4">
														
 
															+                        <a style="text-decoration: none;" href="./property.html">
														
 
															+                        <img class="img-fluid" src="./img/Button_玻璃特性.png" alt="">
														
 
															+                        </a>
														
 
															+                    </div>
														
 
															+                    <div class="col-4">
														
 
															+                        <a style="text-decoration: none;" href="./video.html">
														
 
															+                            <img class="img-fluid" src="./img/Button_影片導覽.png" alt="">
														
 
															+                        </a>
														
 
															+                    </div>
														
 
															+                    <div class="col-4">
														
 
															+                        <img class="img-fluid" src="./img/Button_玻璃流程.png" alt="">
														
 
															+                    </div>
														
 
															+                    <div class="col-4">
														
 
															+                        <img class="img-fluid" src="./img/Button_玻璃用途.png" alt="">
														
 
															+
														
 
															+                    </div>
														
 
															+                    <div class="col-4">
														
 
															+                        <img class="img-fluid" src="./img/Button_玻璃藝術.png" alt="">
														
 
															+                    </div>
														
 
															+
														
 
															+                </div>
														
 
															+            </div>
														
 
															+        </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>
														
 
															+    <script src="./goto.js"></script>
														
 
															+</body>
														
 
															+
														
 
															+</html>
														
--- a/process1.html
+++ b/process1.html
@@ -0,0 +1,64 @@
 
															+<!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">1.回收的玻璃山</h1>
														
 
															+                                <p  class="text-dark px-0 mb-5">點擊螢幕一起互動吧</p>
														
 
															+                                <p class="text-start"> 35噸賓士大卡車正滿載碎玻璃，一批一批到入廠區，形成滿滿的玻璃山，而每個月卻會有200～300個貨櫃的廢玻璃出口到海外，這些不是垃圾，而是可以再利用的重要原料。</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>
														
--- a/process2.html
+++ b/process2.html
@@ -0,0 +1,64 @@
 
															+<!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>
														
--- a/process3.html
+++ b/process3.html
@@ -0,0 +1,64 @@
 
															+<!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>
														
--- a/process4.html
+++ b/process4.html
@@ -0,0 +1,64 @@
 
															+<!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>
														
--- a/process5.html
+++ b/process5.html
@@ -0,0 +1,64 @@
 
															+<!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>
														
--- a/property.html
+++ b/property.html
@@ -0,0 +1,106 @@
 
															+<!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>glass-property</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 text-white 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:25%" class="propertytitle text-dark fw-bold">
														
 
															+                            玻璃特性</p>
														
 
															+                    </div>
														
 
															+                    <div style="margin-top: -20px;" class="pb-4">
														
 
															+                        <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: 24px;"
														
 
															+                            class="text-center py-3 border d-flex align-items-center justify-content-center">
														
 
															+                            <p class="text-dark px-0 mb-0">點擊螢幕一起互動吧</p>
														
 
															+                        </div>
														
 
															+                    </div>
														
 
															+                    <div style="text-align: center;">
														
 
															+                        <div id="bg-itembox">
														
 
															+                            <div class="bg-item bg-active">
														
 
															+                                <img width="80%" src="./img/1000.png" alt="">
														
 
															+                            </div>
														
 
															+                            <div class="bg-item">
														
 
															+                                <img width="80%" src="./img/800.png" alt="">
														
 
															+                            </div>
														
 
															+                            <div class="bg-item">
														
 
															+                                 <img width="80%" src="./img/700.png" alt="">
														
 
															+                            </div>
														
 
															+                            <div class="bg-item">
														
 
															+                                <img width="80%" src="./img/600.png" alt="">
														
 
															+                           </div>
														
 
															+                        </div>
														
 
															+                        <div style="width: 80%; margin: 0 auto;" class="mt-3">
														
 
															+                            <div class="row px-0 mx-0">
														
 
															+                                <div class="col-6">
														
 
															+                                    <img id="prevPage" class="img-fluid" src="./img/+.png" alt="">
														
 
															+                                </div>
														
 
															+                                <div class="col-6">
														
 
															+                                    <img id="nextPage" class="img-fluid" src="./img/-.png" alt="">
														
 
															+                                </div>
														
 
															+                            </div>
														
 
															+                        </div>
														
 
															+                    </div>
														
 
															+                </div>
														
 
															+            </div>
														
 
															+            <div style="margin-top:50px;">
														
 
															+                <div id="bg-itembox2">
														
 
															+                    <div class="bg-item2 bg-active">
														
 
															+                        <img class="img-fluid w-100" src="./img/1000c.jpg" alt="">
														
 
															+                    </div>
														
 
															+                    <div class="bg-item2">
														
 
															+                        <img class="img-fluid w-100" src="./img/800c.jpg" alt="">
														
 
															+                    </div>
														
 
															+                    <div class="bg-item2">
														
 
															+                         <img class="img-fluid w-100" src="./img/700c.png" alt="">
														
 
															+                    </div>
														
 
															+                    <div class="bg-item2">
														
 
															+                        <img class="img-fluid w-100" src="./img/600c.jpg" alt="">
														
 
															+                   </div>
														
 
															+                </div>
														
 
															+                <div class="text-center w-100"
														
 
															+                    style="background:radial-gradient(circle farthest-side at center,rgba(0,0,0,1),rgba(0,0,0,0.8));padding-bottom: 20vw;">
														
 
															+                    <p style="font-size: 32px;" class="text-white mb-0 pt-3">如水流動般的玻璃</p>
														
 
															+                </div>
														
 
															+            </div>
														
 
															+        </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>
														
 
															+    <script src="./goto.js"></script>
														
 
															+</body>
														
 
															+
														
 
															+</html>
														
--- a/style.css
+++ b/style.css
@@ -0,0 +1,159 @@
 
															+@charset "UTF-8";
														
 
															+* {
														
 
															+  margin: 0;
														
 
															+  padding: 0;
														
 
															+  -webkit-box-sizing: border-box;
														
 
															+          box-sizing: border-box;
														
 
															+  font-family: 微軟正黑體;
														
 
															+}
														
 
															+
														
 
															+.propertytitle {
														
 
															+  -webkit-text-stroke: 0.7px #fff;
														
 
															+  -moz-text-stroke: 0.7px #fff;
														
 
															+}
														
 
															+
														
 
															+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;
														
 
															+}
														
 
															+
														
 
															+.bg-item2 {
														
 
															+  display: none;
														
 
															+}
														
 
															+
														
 
															+.bg-item2 img {
														
 
															+  -webkit-animation-name: BgFadein;
														
 
															+          animation-name: BgFadein;
														
 
															+  -webkit-animation-duration: 3s;
														
 
															+          animation-duration: 3s;
														
 
															+  -webkit-animation-timing-function: ease-out;
														
 
															+          animation-timing-function: ease-out;
														
 
															+}
														
 
															+
														
 
															+.bg-active {
														
 
															+  display: block;
														
 
															+}
														
 
															+
														
 
															+@-webkit-keyframes BgFadein {
														
 
															+  0% {
														
 
															+    opacity: 0.5;
														
 
															+  }
														
 
															+  50% {
														
 
															+    opacity: 0.8;
														
 
															+  }
														
 
															+  100% {
														
 
															+    opacity: 1;
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+@keyframes BgFadein {
														
 
															+  0% {
														
 
															+    opacity: 0.5;
														
 
															+  }
														
 
															+  50% {
														
 
															+    opacity: 0.8;
														
 
															+  }
														
 
															+  100% {
														
 
															+    opacity: 1;
														
 
															+  }
														
 
															+}
														
 
															+/*# sourceMappingURL=style.css.map */
														
--- a/style.css.map
+++ b/style.css.map
@@ -0,0 +1,9 @@
 
															+{
														
 
															+    "version": 3,
														
 
															+    "mappings": ";AAAA,AAAA,CAAC,CAAC;EACE,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,UAAU,EAAE,UAAU;EACtB,WAAW,EAAE,UAAU;CAC1B;;AAGD,AAAA,cAAc,CAAA;EACZ,mBAAmB,EAAC,UAAU;EAC9B,gBAAgB,EAAC,UAAU;CAC5B;;AAED,AAAA,CAAC,CAAA;EACC,SAAS,EAAE,IAAI;CAChB;;AAED,AAAA,SAAS,CAAA;EACP,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,eAAe;CACvB;;AACD,AAAA,EAAE,CAAA;EACA,eAAe,EAAE,IAAI;EACrB,KAAK,EAAE,eAAe;CAEvB;;AACD,AAAA,EAAE,GAAC,EAAE,CAAA;EACH,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,eAAe;CACvB;;AAED,AAAA,EAAE,GAAC,EAAE,AAAA,UAAW,CAAA,CAAC,EAAC;EAChB,SAAS,EAAE,gBAAgB;CAC5B;;AACD,AAAA,EAAE,GAAC,EAAE,AAAA,UAAW,CAAA,CAAC,EAAC;EAChB,SAAS,EAAE,gBAAgB;CAC5B;;AACD,AAAA,EAAE,GAAC,EAAE,AAAA,UAAW,CAAA,CAAC,EAAC;EAChB,SAAS,EAAE,gBAAgB;CAC5B;;AAID,UAAU,CAAV,GAAU;EACR,EAAE;IACA,OAAO,EAAE,CAAC;;EAEZ,GAAG;IACD,OAAO,EAAE,CAAC;;EAGZ,GAAG;IACD,OAAO,EAAE,CAAC;;;;AAGd,UAAU,CAAV,GAAU;EACR,GAAG;IACD,OAAO,EAAE,CAAC;;EAEZ,GAAG;IACD,OAAO,EAAE,CAAC;;EAEZ,GAAG;IACD,OAAO,EAAE,CAAC;;;;AAGd,UAAU,CAAV,GAAU;EACR,GAAG;IACD,OAAO,EAAE,CAAC;;EAEZ,GAAG;IACD,OAAO,EAAE,CAAC;;;;AAId,AAAA,QAAQ,CAAA;EACN,OAAO,EAAE,IAAI;CAcd;;AAED,AAAA,SAAS,CAAA;EACP,OAAO,EAAE,IAAI;CASd;;AAVD,AAEE,SAFO,CAEP,GAAG,CAAA;EACD,cAAc,EAAC,QAAQ;EACvB,kBAAkB,EAAE,EAAE;EACtB,yBAAyB,EAAC,QAAQ;CAEnC;;AAKH,AAAA,UAAU,CAAA;EACR,OAAO,EAAE,KAAK;CACf;;AAED,UAAU,CAAV,QAAU;EACR,EAAE;IACA,OAAO,EAAE,GAAG;;EAEd,GAAG;IAAE,OAAO,EAAE,GAAG;;EAEjB,IAAI;IACF,OAAO,EAAE,CAAC",
														
 
															+    "sources": [
														
 
															+        "style.scss"
														
 
															+    ],
														
 
															+    "names": [],
														
 
															+    "file": "style.css"
														
 
															+}
														
--- a/style.scss
+++ b/style.scss
@@ -0,0 +1,120 @@
 
															+* {
														
 
															+    margin: 0;
														
 
															+    padding: 0;
														
 
															+    box-sizing: border-box;
														
 
															+    font-family: 微軟正黑體;
														
 
															+}
														
 
															+
														
 
															+
														
 
															+.propertytitle{
														
 
															+  -webkit-text-stroke:0.7px #fff;
														
 
															+  -moz-text-stroke:0.7px #fff;
														
 
															+}
														
 
															+
														
 
															+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;
														
 
															+  }
														
 
															+}
														
 
															+
														
 
															+.bg-item{
														
 
															+  display: none;
														
 
															+  // img{
														
 
															+  //   // opacity: 0;
														
 
															+  //   // animation-name:BgFadein;
														
 
															+  //   // animation-duration: 5s;
														
 
															+  //   // animation-delay: -3s;
														
 
															+  //   // animation-fill-mode:forwards;
														
 
															+  //   // animation-fill-mode:backwards;
														
 
															+
														
 
															+  //   // animation-timing-function:ease-out;
														
 
															+    
														
 
															+  // }
														
 
															+
														
 
															+
														
 
															+}
														
 
															+
														
 
															+.bg-item2{
														
 
															+  display: none;
														
 
															+  img{
														
 
															+    animation-name:BgFadein;
														
 
															+    animation-duration: 3s;
														
 
															+    animation-timing-function:ease-out;
														
 
															+    
														
 
															+  }
														
 
															+
														
 
															+
														
 
															+}
														
 
															+
														
 
															+.bg-active{
														
 
															+  display: block;
														
 
															+}
														
 
															+
														
 
															+@keyframes BgFadein {
														
 
															+  0% {
														
 
															+    opacity: 0.5;
														
 
															+  }
														
 
															+  50% {opacity: 0.8;}
														
 
															+  // 50% {opacity: 1;}
														
 
															+  100%{
														
 
															+    opacity: 1;
														
 
															+  }
														
 
															+
														
 
															+}
														
 
															+
														
--- a/video.html
+++ b/video.html
@@ -0,0 +1,123 @@
 
															+<!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>glass-property</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 text-white border-0 pb-5">
														
 
															+            <img src="./img/T1.png" class="card-img img-fluid" alt="...">
														
 
															+            <div class="card-img-overlay px-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:25%" 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: 24px;"
														
 
															+                            class="py-3 border d-flex align-items-center ps-4">
														
 
															+                            <p class="text-dark px-0 mb-0">春池玻璃 ｜接班硬世代 三人紀實頻道</p>
														
 
															+                        </div>
														
 
															+                    </div>
														
 
															+
														
 
															+                </div>
														
 
															+                <div class="tab-content px-0" id="myTabContent">
														
 
															+                    <div class="tab-pane fade show active text-dark" id="home" role="tabpanel"
														
 
															+                        aria-labelledby="home-tab">
														
 
															+                        <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .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//M1N7eTCah_w' frameborder='0' allowfullscreen></iframe></div>
														
 
															+                    </div>
														
 
															+                    <div class="tab-pane fade text-dark" id="profile" role="tabpanel" aria-labelledby="profile-tab">
														
 
															+                        <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .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//oMRck77uSLo' frameborder='0' allowfullscreen></iframe></div>
														
 
															+                    </div>
														
 
															+                    <div class="tab-pane fade text-dark" id="contact" role="tabpanel" aria-labelledby="contact-tab">
														
 
															+                        <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .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//Bc27sD2XeyE' frameborder='0' allowfullscreen></iframe></div>
														
 
															+                    </div>
														
 
															+                    <div class="tab-pane fade text-dark" id="contact1" role="tabpanel" aria-labelledby="contact-tab">
														
 
															+                        <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .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//Bc27sD2XeyE' frameborder='0' allowfullscreen></iframe></div>
														
 
															+
														
 
															+                    </div>
														
 
															+                    <div class="tab-pane fade text-dark" id="contact2" role="tabpanel" aria-labelledby="contact-tab">
														
 
															+                        <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .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//M1N7eTCah_w' frameborder='0' allowfullscreen></iframe></div>
														
 
															+
														
 
															+                    </div>
														
 
															+                    <div class="tab-pane fade text-dark" id="contact3" role="tabpanel" aria-labelledby="contact-tab">
														
 
															+                        <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .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//oMRck77uSLo' frameborder='0' allowfullscreen></iframe></div>
														
 
															+                        
														
 
															+                    </div>
														
 
															+                </div>
														
 
															+                <div class="d-flex justify-content-center text-center mt-3">
														
 
															+                    <div  style="width: 85%; margin:0 auto">
														
 
															+                        <ul class="nav nav-pills" id="myTab" role="tablist">
														
 
															+                            <li class="nav-item" role="presentation">
														
 
															+                                <div class="nav-link active border-0 bg-transparent text-dark px-0" id="home-tab"
														
 
															+                                    data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab"
														
 
															+                                    aria-controls="home" aria-selected="true"><img src="./img/1633409116610.jpg" alt="">
														
 
															+                                </div>
														
 
															+                            </li>
														
 
															+                            <li class="nav-item" role="presentation">
														
 
															+                                <div class="nav-link border-0 bg-transparent text-dark px-0" id="profile-tab"
														
 
															+                                    data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab"
														
 
															+                                    aria-controls="profile" aria-selected="false"><img width="216"
														
 
															+                                        src="./img/1633409172788.jpg" alt=""></div>
														
 
															+                            </li>
														
 
															+                            <li class="nav-item" role="presentation">
														
 
															+                                <div class="nav-link border-0 bg-transparent text-dark px-0" id="contact-tab"
														
 
															+                                    data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab"
														
 
															+                                    aria-controls="contact" aria-selected="false"><img width="216"
														
 
															+                                        src="./img/1633409158555.jpg" alt=""></div>
														
 
															+                            </li>
														
 
															+                            <li class="nav-item" role="presentation">
														
 
															+                                <div class="nav-link border-0 bg-transparent text-dark px-0" id="contact-tab"
														
 
															+                                    data-bs-toggle="tab" data-bs-target="#contact1" type="button" role="tab"
														
 
															+                                    aria-controls="contact" aria-selected="false"><img width="216"
														
 
															+                                        src="./img/1633409158555.jpg" alt=""></div>
														
 
															+                            </li>
														
 
															+                            <li class="nav-item" role="presentation">
														
 
															+                                <div class="nav-link border-0 bg-transparent text-dark px-0" id="contact-tab"
														
 
															+                                    data-bs-toggle="tab" data-bs-target="#contact2" type="button" role="tab"
														
 
															+                                    aria-controls="contact" aria-selected="false"><img width="216"
														
 
															+                                        src="./img/1633409116610.jpg" alt=""></div>
														
 
															+                            </li>
														
 
															+                            <li class="nav-item" role="presentation">
														
 
															+                                <div class="nav-link border-0 bg-transparent text-dark px-0" id="profile-tab"
														
 
															+                                    data-bs-toggle="tab" data-bs-target="#contact3" type="button" role="tab"
														
 
															+                                    aria-controls="profile" aria-selected="false"><img width="216"
														
 
															+                                        src="./img/1633409172788.jpg" alt=""></div>
														
 
															+                            </li>
														
 
															+                        </ul>
														
 
															+                    </div>
														
 
															+                </div>
														
 
															+            </div>
														
 
															+        </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>