Update index.html

index.html

@@ -35,139 +35,59 @@
             clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
         }
 
-        .hero h1 {
-            font-size: 3rem;
-            font-weight: 700;
-            margin: 0;
-            animation: fadeInDown 1s ease-out;
-        }
-
-        .hero p {
-            font-size: 1.25rem;
-            font-weight: 400;
-            max-width: 700px;
-            margin: 1rem auto 0 auto;
-            opacity: 0.9;
-            animation: fadeInUp 1s ease-out 0.3s;
-        }
+        .hero h1 { font-size: 3rem; font-weight: 700; margin: 0; animation: fadeInDown 1s ease-out; }
+        .hero p { font-size: 1.25rem; font-weight: 400; max-width: 700px; margin: 1rem auto 0 auto; opacity: 0.9; animation: fadeInUp 1s ease-out 0.3s; }
         
         .timeline-container {
             position: relative;
             max-width: 1100px;
-            margin: -3rem auto 0 auto; /* Overlap with hero */
+            margin: -3rem auto 0 auto;
             padding: 2rem 1.5rem;
         }
 
         .timeline-container::before {
-            content: '';
-            position: absolute;
-            width: 3px;
-            background-color: var(--timeline-color);
-            top: 0;
-            bottom: 0;
-            left: 50%;
-            margin-left: -1.5px;
-            z-index: 1;
+            content: ''; position: absolute; width: 3px; background-color: var(--timeline-color);
+            top: 0; bottom: 0; left: 50%; margin-left: -1.5px; z-index: 1;
         }
 
         .timeline-item {
-            padding: 2rem 3rem;
-            position: relative;
-            width: 50%;
-            opacity: 0;
-            transform: translateY(50px);
+            padding: 2rem 3rem; position: relative; width: 50%;
+            opacity: 0; transform: translateY(50px);
             transition: opacity 0.6s ease-out, transform 0.6s ease-out;
         }
-
-        .timeline-item.visible {
-            opacity: 1;
-            transform: translateY(0);
-        }
-
-        .timeline-item:nth-child(odd) {
-            left: 0;
-            padding-right: 4rem;
-        }
-        
-        .timeline-item:nth-child(even) {
-            left: 50%;
-            padding-left: 4rem;
-        }
+        .timeline-item.visible { opacity: 1; transform: translateY(0); }
+        .timeline-item:nth-child(odd) { left: 0; padding-right: 4rem; }
+        .timeline-item:nth-child(even) { left: 50%; padding-left: 4rem; }
 
         .timeline-dot {
-            content: '';
-            position: absolute;
-            width: 20px;
-            height: 20px;
-            background-color: var(--card-bg);
-            border: 4px solid var(--accent-blue);
-            top: 2.5rem;
-            border-radius: 50%;
-            z-index: 2;
-        }
-        
-        .timeline-item:nth-child(odd) .timeline-dot {
-            right: -10px;
-        }
-
-        .timeline-item:nth-child(even) .timeline-dot {
-            left: -10px;
-        }
-
-        /* Foxconn case study dot */
-        .timeline-item.foxconn .timeline-dot {
-            border-color: var(--foxconn-blue);
+            content: ''; position: absolute; width: 20px; height: 20px;
+            background-color: var(--card-bg); border: 4px solid var(--accent-blue);
+            top: 2.5rem; border-radius: 50%; z-index: 2;
         }
+        .timeline-item:nth-child(odd) .timeline-dot { right: -10px; }
+        .timeline-item:nth-child(even) .timeline-dot { left: -10px; }
+        .timeline-item.foxconn .timeline-dot { border-color: var(--foxconn-blue); }
 
         .timeline-content {
-            padding: 2rem;
-            background-color: var(--card-bg);
-            border-radius: 16px;
-            box-shadow: 0 8px 30px var(--shadow-color);
+            padding: 2rem; background-color: var(--card-bg);
+            border-radius: 16px; box-shadow: 0 8px 30px var(--shadow-color);
             position: relative;
         }
-
-        .timeline-content h2 {
-            font-size: 1.8rem;
-            font-weight: 700;
-            margin-top: 0;
-            color: var(--accent-blue);
-        }
-
-        .timeline-content h2.foxconn-title {
-            color: var(--foxconn-blue);
-        }
-        
+        .timeline-content h2 { font-size: 1.8rem; font-weight: 700; margin-top: 0; color: var(--accent-blue); }
+        .timeline-content h2.foxconn-title { color: var(--foxconn-blue); }
         .timeline-content .tag {
-            font-size: 0.9rem;
-            font-weight: 500;
-            padding: 0.3rem 0.8rem;
-            border-radius: 20px;
-            color: white;
-            display: inline-block;
-            margin-bottom: 1rem;
+            font-size: 0.9rem; font-weight: 500; padding: 0.3rem 0.8rem;
+            border-radius: 20px; color: white; display: inline-block; margin-bottom: 1rem;
         }
-
         .tag.problem { background-color: var(--accent-red); }
         .tag.solution { background-color: var(--accent-green); }
         .tag.tech { background-color: #757575; }
         .tag.case-study { background-color: var(--foxconn-blue); }
 
         .point-list { list-style: none; padding-left: 0; }
-        .point-list li {
-            display: flex;
-            align-items: center;
-            margin-bottom: 1rem;
-            font-size: 1.05rem;
-        }
-        .point-list .icon {
-            font-size: 1.5rem;
-            margin-right: 1rem;
-            width: 30px;
-            text-align: center;
-        }
+        .point-list li { display: flex; align-items: center; margin-bottom: 1rem; font-size: 1.05rem; }
+        .point-list .icon { font-size: 1.5rem; margin-right: 1rem; width: 30px; text-align: center; }
         
-        /* Specific content styles */
         .gus-diagram { width: 100%; max-width: 450px; margin: auto; display: block; }
         .defense-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
         .defense-item { background-color: var(--bg-color); padding: 1rem; border-radius: 12px; font-size: 0.95rem; }
@@ -178,6 +98,22 @@
         .stat-item h3 { font-size: 2rem; margin: 0; color: var(--foxconn-blue); }
         .stat-item p { margin: 0; color: #555; }
         .strategy-list .point-list li { align-items: flex-start; }
+        .hr-divider { border: 0; height: 1px; background-color: var(--timeline-color); margin: 2rem 0; }
+
+        /* SecOps Architecture Styles */
+        .secops-arch { text-align: center; }
+        .arch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
+        .arch-item { background-color: #e8f0fe; color: #1c4a9e; padding: 1rem; border-radius: 12px; font-weight: 500; position: relative; }
+        .arch-item strong { display: block; font-size: 1rem; }
+        .arch-item span { font-size: 0.85rem; }
+        .arch-core {
+            background-color: var(--foxconn-blue); color: white;
+            padding: 1.5rem; border-radius: 16px; margin: 1.5rem 0;
+            box-shadow: 0 4px 15px rgba(0, 40, 85, 0.2);
+        }
+        .arch-core h4 { margin: 0 0 0.5rem 0; font-size: 1.5rem; }
+        .arch-core p { margin: 0; opacity: 0.9; }
+        .arrow-connector { font-size: 2rem; color: var(--timeline-color); margin: 0; }
 
         footer { text-align: center; padding: 2rem; color: #757575; }
         
@@ -192,7 +128,6 @@
             .global-stats { flex-direction: column; gap: 1rem; }
         }
 
-        /* Animation Keyframes */
         @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
         @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
     </style>
@@ -216,24 +151,41 @@
             <div class="timeline-content">
                 <span class="tag case-study">實踐案例</span>
                 <h2 class="foxconn-title">鴻海 Foxconn 的全球資安佈局</h2>
-                <p>作為全球最大的電子製造服務龍頭，鴻海正從「科技服務」邁向「科技創新」（如電動車、AI工廠），其龐大的全球版圖與先進的技術藍圖，使其面臨著巨大的資安挑戰。</p>
-                
-                <div class="global-stats">
-                    <div class="stat-item"><h3>24</h3><p>國家/地區</p></div>
-                    <div class="stat-item"><h3>233</h3><p>廠區/辦公室</p></div>
-                    <div class="stat-item"><h3>154</h3><p>亞洲據點</p></div>
-                </div>
-
-                <h3 style="margin-top: 2rem; color: var(--foxconn-blue);">策略核心：共性 & 聯防</h3>
+                <p>作為全球最大的電子製造服務龍頭，鴻海正從「科技服務」邁向「科技創新」，其龐大的全球版圖與先進的技術藍圖，使其面臨著巨大的資安挑戰。</p>
+                <div class="global-stats"><div class="stat-item"><h3>24</h3><p>國家/地區</p></div><div class="stat-item"><h3>233</h3><p>廠區/辦公室</p></div><div class="stat-item"><h3>154</h3><p>亞洲據點</p></div></div>
+                <h3 style="color: var(--foxconn-blue);">策略核心：共性 & 聯防</h3>
                 <p>為了保護這座科技帝國，鴻海採取了五大資安策略，將安全深植於企業文化與運營中：</p>
-                <div class="strategy-list">
-                    <ul class="point-list">
-                        <li><span class="icon">🎯</span> <b>理解挑戰，制定策略：</b>盤點集團的資安挑戰，以此為基礎制定頂層策略。</li>
-                        <li><span class="icon">🗺️</span> <b>規劃藍圖，實施策略：</b>將頂層策略轉化為可執行的具體資安實施策略。</li>
-                        <li><span class="icon">⚖️</span> <b>健全制度，完善治理：</b>建立全面的資安治理與管理制度，確保有法可依。</li>
-                        <li><span class="icon">🚀</span> <b>導入 Google 技術，並行管理：</b>引進 Google 的先進安全技術，並與現有管理制度結合，加速落地。</li>
-                        <li><span class="icon">🤝</span> <b>跨部門協作，共享情資：</b>強化內部協作與情資分享，提升整體應變能力與韌性。</li>
-                    </ul>
+                <ul class="point-list"><li><span class="icon">🎯</span> <b>理解挑戰，制定策略</b></li><li><span class="icon">🗺️</span> <b>規劃藍圖，實施策略</b></li><li><span class="icon">⚖️</span> <b>健全制度，完善治理</b></li><li><span class="icon">🚀</span> <b>導入 Google 技術，並行管理</b></li><li><span class="icon">🤝</span> <b>跨部門協作，共享情資</b></li></ul>
+                
+                <hr class="hr-divider">
+
+                <h3 style="color: var(--foxconn-blue);">技術核心：打造鴻海資安大腦</h3>
+                <p>結合 AI 與情資，強化鴻海的資安監控與應變能力，其技術架構如下：</p>
+                <div class="secops-arch">
+                    <h4>實現的核心能力</h4>
+                    <div class="arch-grid">
+                        <div class="arch-item" title="安全資訊與事件管理"><strong>SIEM</strong></div>
+                        <div class="arch-item" title="安全調度、自動化與回應"><strong>SOAR</strong></div>
+                        <div class="arch-item" title="使用者行為分析"><strong>UBA</strong></div>
+                        <div class="arch-item" title="持續威脅暴露管理"><strong>CTEM</strong></div>
+                        <div class="arch-item" title="外部攻擊面管理"><strong>EASM</strong></div>
+                        <div class="arch-item" title="數位風險保護"><strong>DRP</strong></div>
+                    </div>
+                    <p class="arrow-connector">⬆️</p>
+                    <div class="arch-core">
+                        <h4>Google SecOps</h4>
+                        <p>鴻海資安大腦與神經網路</p>
+                    </div>
+                    <p class="arrow-connector">⬇️</p>
+                    <h4>Google 技術基石</h4>
+                    <div class="arch-grid">
+                        <div class="arch-item"><strong>Workspace</strong><span>帳戶/資料安全</span></div>
+                        <div class="arch-item"><strong>安全命令中心</strong><span>雲端環境安全</span></div>
+                        <div class="arch-item"><strong>Google Cloud</strong><span>全球資料中心</span></div>
+                        <div class="arch-item"><strong>Gemini AI</strong><span>強化監控與學習</span></div>
+                        <div class="arch-item"><strong>Mandiant</strong><span>頂尖威脅情資</span></div>
+                        <div class="arch-item"><strong>日誌分析</strong><span>收容與稽核</span></div>
+                    </div>
                 </div>
             </div>
         </div>