<style>

    body {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #040b1f;
      font-family: "微軟正黑體", Arial, sans-serif;
      overflow: hidden;
    }
 /*techbutton*/
    .button-container {
      position: relative;
      width: 300px;
      height: 300px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    
    .circular-effect {
      position: absolute;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border: 2px solid rgba(0, 195, 255, 0.3);
      animation: rotate 15s linear infinite;
    }
    
    .circular-effect:before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 20px;
      height: 20px;
      background: #00c3ff;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 20px #00c3ff, 0 0 40px #00c3ff;
    }
    
    .circular-effect:nth-child(2) {
      width: 220px;
      height: 220px;
      animation-delay: -3s;
      animation-duration: 25s;
      border-color: rgba(0, 195, 255, 0.2);
    }
    
    .circular-effect:nth-child(3) {
      width: 180px;
      height: 180px;
      animation-delay: -1s;
      animation-duration: 20s;
      border-color: rgba(0, 195, 255, 0.4);
    }
    
    .tech-button {
      position: relative;
      padding: 15px 40px;
      font-size: 20px;
      font-weight: bold;
      color: #ffffff;
      background-color: rgba(35, 170, 175, 0.1);
      border: 2px solid #2CCAD0;
      border-radius: 4px;
      cursor: pointer;
      overflow: hidden;
      box-shadow: 0 0 15px rgba(35, 170, 175, 0.5);
      transition: all 0.3s ease;
      letter-spacing: 2px;
      text-shadow: 0 0 5px rgba(35, 170, 175, 0.7);
      z-index: 10;
      animation: float 2s ease-in-out infinite;

    }
.tech-button-2 {
      position: relative;
      padding: 15px 40px;
      font-size: 20px;
      font-weight: bold;
      color: #ffffff;
      background-color: rgba(35, 170, 175, 0.1);
      border: 2px solid #2CCAD0;
      border-radius: 4px;
      cursor: pointer;
      overflow: hidden;
      box-shadow: 0 0 15px rgba(35, 170, 175, 0.5);
      transition: all 0.3s ease;
      letter-spacing: 2px;
      text-shadow: 0 0 5px rgba(35, 170, 175, 0.7);
      z-index: 10;

    }
    
    .tech-button:hover {
      background-color: rgba(35, 170, 175, 0.5);
      box-shadow: 0 0 25px rgba(35, 170, 175, 0.8);
      transform: translateY(-2px);
    }

    .tech-button-2:hover {
      background-color: rgba(35, 170, 175, 0.5);
      box-shadow: 0 0 25px rgba(35, 170, 175, 0.8);
      transform: translateY(-2px);
    }
    
    .tech-button:active {
      transform: translateY(1px);
    }

    .tech-button-2:active {
      transform: translateY(1px);
    }
    
    .lines {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: 1;
    }
    
    .line {
      position: absolute;
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, transparent, #00c3ff, transparent);
      animation: flow 6s linear infinite;
      opacity: 0.3;
    }
    
    .line:nth-child(1) {
      top: 20%;
      animation-delay: 0s;
    }
    
    .line:nth-child(2) {
      top: 40%;
      animation-delay: 1s;
    }
    
    .line:nth-child(3) {
      top: 60%;
      animation-delay: 2s;
    }
    
    .line:nth-child(4) {
      top: 80%;
      animation-delay: 3s;
    }
    
    .vertical-line {
      position: absolute;
      height: 100%;
      width: 1px;
      background: linear-gradient(0deg, transparent, #00c3ff, transparent);
      animation: flow-vertical 8s linear infinite;
      opacity: 0.3;
    }
    
    .vertical-line:nth-child(5) {
      left: 20%;
      animation-delay: 0s;
    }
    
    .vertical-line:nth-child(6) {
      left: 40%;
      animation-delay: 2s;
    }
    
    .vertical-line:nth-child(7) {
      left: 60%;
      animation-delay: 4s;
    }
    
    .vertical-line:nth-child(8) {
      left: 80%;
      animation-delay: 6s;
    }
    
    .button-text {
      margin-top: 20px;
      color: #ffffff;
      font-size: 16px;
      text-align: center;
      max-width: 280px;
      line-height: 1.5;
      z-index: 10;
    }
    
    @keyframes rotate {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    
    @keyframes flow {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(100%);
      }
    }
    
    @keyframes flow-vertical {
      0% {
        transform: translateY(-100%);
      }
      100% {
        transform: translateY(100%);
      }
    }
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0px);
  }
}

/*submenu*/

        /* 子選單容器樣式 */
        .ai-submenu-container {
            width: 100%;
            background-color: rgba(44, 204, 209, 0.80);
            z-index: 9999;
            left: 0;
            right: 0;
            transition: all 0.3s ease;
        }
        
        /* 固定在頂部時的樣式 */
        .ai-submenu-container.sticky {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background-color: rgba(63, 162, 166, 0.9);
            box-shadow: 0 4px 12px rgba(0, 255, 255, 0.3);
            z-index: 9999;
        }
        
        /* 子選單內容區域 */
        .ai-submenu-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            padding: 15px 20px;
        }
        
        /* 選單項目樣式 */
        .ai-submenu-item {
            color: white;
            text-decoration: none;
            padding: 10px 25px;
            margin: 5px 10px;
            border-radius: 30px;
            font-size: 16px;
            font-weight: bold;
            transition: all 0.3s ease;
            font-family: "微軟正黑體", Arial, sans-serif;
            cursor: pointer;
            text-align: center;
            display: inline-block;
        }
        
        /* 選單項目懸停效果 */
        .ai-submenu-item:hover {
         color: #00ffff;
         font-size: 17.5px; /* 原本是16px，放大約1.5個字級 */
         text-shadow: 0 0 8px rgba(0, 255, 255, 0.8), 0 0 15px rgba(0, 255, 255, 0.5);
         transform: scale(1.05); /* 輕微的整體放大效果 */
         transition: all 0.3s ease;
        }
        
        /* 佔位元素，防止內容跳動 */
        .ai-submenu-placeholder {
            display: none;
            width: 100%;
        }
        
        /* 響應式調整 */
        @media (max-width: 768px) {
            .ai-submenu-content {
                padding: 10px;
            }
            
            .ai-submenu-item {
                padding: 8px 15px;
                font-size: 14px;
                margin: 3px 5px;
            }
        }

        /* 內容區域樣式 */
        .content {
            padding: 20px;
        }

        .section {
            padding: 20px;
            margin-bottom: 0px;
            border-radius: 8px;
        }

        /* 平滑滾動效果 */
        html {
            scroll-behavior: smooth;
        }
/* 卡片容器 */
    .cards-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    /* 卡片網格布局 */
    .cards-grid {
      display: grid;
      gap: 25px;
      /* 預設為單列顯示 (行動裝置) */
      grid-template-columns: 1fr;
    }

    /* 桌面版布局 - 可切換的布局選項 */
    .layout-controls {
      text-align: right;
      margin-bottom: 20px;
    }

    .layout-btn {
      background-color: #2CCCD1;
      color: white;
      border: none;
      padding: 8px 15px;
      margin-left: 10px;
      border-radius: 5px;
      cursor: pointer;
      font-weight: bold;
      transition: all 0.2s ease;
    }

    .layout-btn:hover {
      background-color: #25b1b6;
    }

    .layout-btn.active {
      background-color: #1a8a8e;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    }

    /* 卡片樣式 */
    .card {
      background-color: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 6px 20px rgba(44, 204, 209, 0.1);
      transition: all 0.3s ease;
      position: relative;
      border-top: 4px solid #2CCCD1;
      opacity: 0;
      transform: translateY(50px);
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 25px rgba(44, 204, 209, 0.2), 0 0 15px rgba(44, 204, 209, 0.2);
    }

    /* 卡片頭部 */
    .card-header {
      background-color: #2CCCD1;
      padding: 20px;
      color: white;
      position: relative;
    }

    .card-header h3 {
      font-size: 20px;
      margin-bottom: 5px;
      font-weight: bold;
      position: relative;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    }

    .card-header h3::after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 0;
      width: 40px;
      height: 3px;
      background-color: white;
      transition: width 0.3s ease;
    }

    .card:hover .card-header h3::after {
      width: 60px;
    }

    /* 卡片內容 */
    .card-body {
      padding: 25px;
      font-size: 16px;
      color: #444;
      flex-grow: 1;
    }

    /* 卡片圖標 */
    .card-icon {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.3);
      color: white;
      font-size: 20px;
    }

    /* 動畫效果 */
    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(50px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .card.animate {
      animation: slideUp 0.6s ease forwards;
    }

    .card:nth-child(1).animate {
      animation-delay: 0.1s;
    }

    .card:nth-child(2).animate {
      animation-delay: 0.3s;
    }

    .card:nth-child(3).animate {
      animation-delay: 0.5s;
    }

    .card:nth-child(4).animate {
      animation-delay: 0.7s;
    }

    /* 響應式調整 */
    /* 平板和桌面的預設布局 - 2欄2列 */
    @media (min-width: 768px) {
      .cards-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* 大螢幕預設布局 - 可選擇4欄1列 */
    @media (min-width: 1200px) {
      .cards-grid.layout-four {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    /* 小型手機螢幕適配 */
    @media (max-width: 375px) {
      .cards-container {
        padding: 10px;
      }
      
      .cards-grid {
        gap: 15px;
      }

      .card-body {
        padding: 15px;
        font-size: 15px;
      }

      .card-header {
        padding: 15px;
      }

      .card-header h3 {
        font-size: 17px;
      }

      .card-icon {
        width: 35px;
        height: 35px;
        top: 15px;
        right: 15px;
      }
      
      .layout-controls {
        text-align: center;
      }
      
      .layout-btn {
        padding: 6px 12px;
        font-size: 14px;
        margin: 5px;
      }
    }
/*tab*/
    .tab-container {
    max-width: 900px;
    margin: 0 auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(44, 204, 209, 0.1);
    overflow: hidden;
    position: relative;
  }
  
  .tab-nav {
    display: flex;
    background-color: #2CCCD1; /* 主色更新 */
  }
  
  .tab-nav label {
    flex: 1;
    padding: 15px 5px;
    color: white;
    text-align: center;
    cursor: pointer;
    transition: background 0.3s;
    font-weight: bold;
    font-size: 16px;
  }
  
  .tab-nav label:hover {
    background-color: #25b1b6; /* 主色深色調 */
  }
  
  /* 當前頁籤標題 - 行動裝置用 */
  .current-tab-title {
    display: none;
    text-align: center;
    padding: 15px 10px;
    background-color: #2CCCD1; /* 主色更新 */
    color: white;
    font-weight: bold;
    font-size: 18px;
  }
  
  /* 箭頭導航按鈕 - 行動裝置用 */
  .arrow-nav {
    display: none;
  }
  
  .arrow-nav label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: rgba(44, 204, 209, 0.8); /* 主色透明版 */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    font-size: 24px;
    z-index: 10;
    transition: background-color 0.3s;
  }
  
  .arrow-nav label:hover {
    background-color: rgba(37, 177, 182, 0.9); /* 主色深色調透明版 */
  }
  
  .arrow-prev {
    left: 10px;
  }
  
  .arrow-next {
    right: 10px;
  }
  
  .tab-content {
    position: relative;
    min-height: 200px;
    /* 添加上下內邊距，確保內容與容器頂部和底部有20px的空間 */
    padding: 20px 0;
  }
  
  .tab {
    position: relative;
    width: 100%;
    /* 移除頂部和底部內邊距，因為已經在tab-content中設置了 */
    padding: 0 20px;
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: opacity 0.5s ease;
    display: flex;
    flex-direction: column;
    /* 將內容對齊到頂部 */
    align-items: flex-start;
  }

  .tab img {
    max-width: 100%;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(44, 204, 209, 0.1); /* 主色陰影 */
    /* 圖片居中顯示 */
    align-self: center;
  }
  
  .tab h2 {
    margin-bottom: 15px;
    color: #333;
    text-align: center;
    /* 標題居中顯示 */
    align-self: center;
    width: 100%;
  }
  
  .tab p {
    line-height: 1.6;
    color: #666;
    width: 100%;
  }
  
  /* 居中顯示的段落 */
  .tab p[style*="text-align: center"] {
    align-self: center;
  }
  
  /* 隱藏 radio buttons */
  input[type="radio"] {
    display: none;
  }
  
  /* 當 radio button 被選中時，顯示對應的頁籤內容 */
  #tab1:checked ~ .tab-content .content1,
  #tab2:checked ~ .tab-content .content2,
  #tab3:checked ~ .tab-content .content3,
  #tab4:checked ~ .tab-content .content4,
  #tab5:checked ~ .tab-content .content5 {
    opacity: 1;
    height: auto;
    overflow: visible;
  }
  
  /* 選中的頁籤樣式 */
  #tab1:checked ~ .tab-nav .label1,
  #tab2:checked ~ .tab-nav .label2,
  #tab3:checked ~ .tab-nav .label3,
  #tab4:checked ~ .tab-nav .label4,
  #tab5:checked ~ .tab-nav .label5 {
    background-color: #1a8a8e; /* 主色更深色調 */
  }
  
/* 顯示當前頁籤標題 - 修正這裡的顯示邏輯 */
#tab1:checked ~ .current-tab-title .title1,
#tab2:checked ~ .current-tab-title .title2,
#tab3:checked ~ .current-tab-title .title3,
#tab4:checked ~ .current-tab-title .title4,
#tab5:checked ~ .current-tab-title .title5 {
  display: block;
}
  /* 隱藏其他頁籤標題 */
.current-tab-title span {
  display: none;
}


  /* 行動裝置適配 */
  @media (max-width: 768px) {
    /* 隱藏原頁籤導航，顯示箭頭和當前標題 */
    .tab-nav {
      display: none;
    }
    
    .current-tab-title {
      display: block;
    }
    
    .arrow-nav {
      display: block;
    }
    
    .tab-container {
      padding-top: 0;
    }
    
    .tab {
      padding: 0 15px;
    }
    
    /* 隱藏頁籤內的標題，因為已經在上方顯示了 */
    .tab h2 {
      display: none;
    }
    
    .tab img {
      margin-top: 10px;
    }
  }
  
  /* 手機螢幕適配 */
  @media (max-width: 480px) {
    .tab {
      padding: 0 12px;
    }
    
    .tab img {
      max-height: 150px;
    }
    
    .tab p {
      font-size: 15px;
    }
    
    .current-tab-title {
      font-size: 16px;
      padding: 12px 10px;
    }
    
    .arrow-nav label {
      width: 35px;
      height: 35px;
      font-size: 20px;
    }
  }
  
  /* 暗黑模式支援 */
  @media (prefers-color-scheme: dark) {
    body {
      background-color: #222;
    }
    
    .tab-container {
      background-color: #333;
      box-shadow: 0 2px 10px rgba(44, 204, 209, 0.2); /* 主色陰影 */
    }
    
    .tab-nav, .current-tab-title {
      background-color: #25a6aa; /* 暗黑模式下的主色調整 */
    }
    
    .tab-nav label:hover {
      background-color: #1e8a8e; /* 暗黑模式下的主色調整 */
    }
    
    .tab h2 {
      color: #eee;
    }
    
    .tab p {
      color: #ccc;
    }
    
    .arrow-nav label {
      background-color: rgba(44, 204, 209, 0.7); /* 主色透明版 */
    }
    
    .arrow-nav label:hover {
      background-color: rgba(37, 166, 170, 0.8); /* 主色深色調透明版 */
    }
    
    #tab1:checked ~ .tab-nav .label1,
    #tab2:checked ~ .tab-nav .label2,
    #tab3:checked ~ .tab-nav .label3,
    #tab4:checked ~ .tab-nav .label4,
    #tab5:checked ~ .tab-nav .label5 {
      background-color: #1a7478; /* 暗黑模式下的主色深色調 */
    }
  }

/*case-grid*/
   .container {
      max-width: 1200px;
      margin: 0 auto;
      background: transparent;
      display: flex;
      flex-wrap: wrap;
       flex-direction: column; /* 改為垂直排列以確保內容能正確置中 */
       align-items: center; /* 水平置中內容 */
      grid-auto-rows: 1fr; /* 關鍵：讓所有行高度相等 */

    }
    
  .grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
       gap: 25px;
    grid-auto-rows: 1fr; /* 確保所有行高度相等 */
  width: 100%; /* 確保網格使用全部可用寬度 */
    }
    
    .grid-item {
        border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background: transparent;
  display: grid;
  grid-template-rows: auto 1fr; /* 圖片高度自動，內容區域填滿剩餘空間 */
  height: 100%; /* 確保 grid-item 填滿整個格子高度 */
    }
    
    .grid-item a {
      display: block;
      text-decoration: none;
      color: inherit;
    }
    
    .grid-item img {
     width: 100%;
  height: 200px; /* 設定固定高度，或使用其他你想要的高度 */
  object-fit: cover; /* 保持圖片比例並裁剪以填滿容器 */
  display: block;
    }
    
    .grid-item-content {
      background-color: rgba(30, 138, 142, 0.8);
      padding: 15px;
      color: white;
      height: 100%; /* 讓內容區域填滿grid-item */
      box-sizing: border-box; /* 確保padding不會增加總高度 */
      
    }
    
    .grid-item-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 8px;
    }
    
    .grid-item-description {
      font-size: 14px;
      opacity: 0.9;
    }
    
    @media (max-width: 768px) {
      .grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      }
    }
    
    @media (max-width: 480px) {
      .grid {
        grid-template-columns: 1fr;
      }
    }

/*ai-tab*/
     .ai-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 40px 20px;
}

      .ai-tabs {
      display: flex;
      justify-content: center;
      margin-bottom: 30px;
      border-bottom: 1px solid #ddd;
    }
    
      .ai-tab-btn {
      padding: 15px 30px;
      font-size: 18px;
      background: none;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      font-weight: bold;
      color: #7f8c8d;
      position: relative;
    }
    
    .ai-tab-btn:hover {
      color: #3498db;
    }
    
    .ai-tab-btn.active {
      color: #3498db;
    }
    
    .ai-tab-btn.active::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 3px;
      background-color: #3498db;
    }
    
    .ai-tab-content {
      display: none;
      animation: fadeIn 0.5s ease;
    }
    
    .ai-tab-content.active {
      display: block;
    }
    
    .feature-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
      margin-top: 40px;
    }
    
    .feature-item {
      background-color: white;
      border-radius: 10px;
      padding: 30px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .feature-item:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }
    
    .feature-img {
      width: 100%;
      height: 200px;
      background-color: #f1f1f1;
      border-radius: 8px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #999;
    }
    
    .feature-title {
      font-size: 1.2rem;
      margin-bottom: 15px;
      color: #2c3e50;
    }
    
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  </style>