/* responsive.css */
/* 平板電腦樣式 (最大寬度 1200px) */
@media (max-width: 1200px) {
  /* 導航選單 */
  .menu-toggle {
    display: flex !important;
    right: 50px; /* 調整漢堡選單位置 */
  }

  .nav-links {
    display: none !important;
    position: fixed;
    width: 100%;
    top: 70px;
    left: 0;
    bottom: 0; /* 設定選單延伸到底部 */
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 999;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto; /* 允許垂直滾動 */
    padding-bottom: 20px; /* 底部增加間距 */
  }

  .nav-links.active {
    display: flex !important;
  }

  .nav-links a {
    display: block;
    padding: 5px;
    border-bottom: 1px solid #eee;
  }

  /* 手機版子選單 */
  .nav-item.has-submenu {
    position: static;
  }

  .nav-item.has-submenu .arrow {
    transition: transform 0.3s ease;
    transform: rotate(270deg);
  }

  .nav-item.has-submenu .arrow.active {
    transform: rotate(360deg);
  }

  .sub-menu {
    position: static;
    width: 100%;
    transform: none;
    box-shadow: none;
    padding: 0;
    background: #f5f5f5;
    display: none;
    max-height: none; /* 確保子選單不會被截斷 */
    overflow: visible; /* 確保子選單可見 */
  }

  /* 確保最後一個項目有足夠的底部間距 */
  .nav-links > *:last-child {
    margin-bottom: 20px;
  }

  .sub-menu .row {
    flex-direction: column;
  }

  .sub-menu .col-md-3 {
    flex: 0 0 100%;
    padding: 0;
  }

  /* 服務卡片響應式調整 */
  .services {
    grid-template-columns: 1fr;
  }

  .content-wrapper {
    flex-direction: column; /* 手機版改為垂直排列 */
    gap: 1rem;
  }

  .image-content {
    margin-top: 1rem;
  }

  .sitemap-container {
    grid-template-columns: 1fr;
  }

  /* 環境監控系統整合 */

  .system-integration {
    height: auto !important; /* 移除任何固定高度設定 */
  }
  .system-integration .grid {
    grid-template-columns: 1fr; /* 改為單欄 */
    gap: 1rem;
  }
  .monitoring-card {
    padding: 1rem;
    height: auto; /* 讓卡片高度跟隨內容 */
  }
  /* 圖片的調整 */
  .image-content img {
    width: 100%;
    height: auto;
    max-width: 100%;
  }
  /*水質分析儀*/
  .tab-btn {
    /* 手機版時使用完整圓角 */
    border-radius: 8px;
    width: calc(50% - 5px); /* 每行兩個按鈕 */
    text-align: center;
    font-size: 14px;
  }

  .tab-content {
    padding: 20px;
    margin-top: 10px;
  }
  .img-text-container {
    flex-direction: column;
    padding: 10px; /* 手機版邊距縮小 */
  }

  .text-container {
    width: 100%;
  }

  /*水質監測儀光學法*/
  .spec-table-container {
    overflow-x: auto;
  }

  .spec-table {
    min-width: 600px;
  }

  /*水質監測儀選型指引*/
  .guide-table-container {
    overflow-x: auto;
  }

  .guide-table {
    min-width: 600px;
  }

  /* 	實驗室分析儀-實驗室量測儀器 */
  .measurement-table-container {
    overflow-x: auto;
  }

  .measurement-table {
    min-width: 600px;
  }

  /* 實驗室量測儀器-層析儀Web API回傳數據範例 */
  .chromatography-table-container {
    overflow-x: auto;
  }

  .chromatography-table {
    min-width: 600px;
  }
  /* 實驗室自動化管理系統-實驗室資訊管理系統基本功能 */
  .feature-card {
    min-width: 100%;
    flex: 0 1 100%; /* 在手機版佔滿寬度 */
    max-width: 90%; /* 限制最大寬度為容器的90% */
    margin: 10px auto; /* 上下間距10px，左右自動計算 */
  }
  .lab-info-system {
    padding: 10px;
  }
  /* 實驗室自動化管理系統-實驗室資訊管理系統屬性分類 */
  .lab-classify-container {
    overflow-x: auto;
  }

  .lab-classify {
    min-width: 600px;
  }
  /*動態消息-第一百零六條水量、水質自動監測(視)及連線傳輸設施*/
  .cwms-container {
    overflow-x: auto;
  }
  .water-monitor-container {
    overflow-x: auto;
  }

  .water-monitor {
    min-width: 600px;
  }

  /*動態消息-固定污染源連續自動監測*/
  .cpms-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .monitoring-connection-facilities-container {
    overflow-x: auto;
  }
  .monitoring-connection-facilities {
    min-width: 600px;
  }
  /*實驗室分析儀子頁面*/
  .laboratory-analyzer-container {
    padding: 20px;
  }

  .tech-advantages {
    grid-template-columns: 1fr;
  }

  .related-links {
    flex-direction: column;
    width: 100%;
  }

  .related-links a {
    width: calc(100% - 40px); /* 減去padding確保寬度不超出 */
    box-sizing: border-box;
    text-align: center;
  }
}

/* 手機版樣式 (最大寬度 480px) */
@media (max-width: 480px) {
  /* Logo 尺寸調整 */
  .logo-container img {
    height: 55px;
    width: 250px;
  }

  /* 圖片樣式 */
  .image_industry img {
    max-width: 90%; /* 圖片最大寬度不超過容器 */
    height: auto; /* 高度自動調整，保持比例 */
    display: block; /* 移除圖片底部的間隙 */
  }

  /* 服務區塊間距調整 */
  .services {
    grid-template-columns: 1fr !important;
  }

  /* 服務卡片內距調整 */
  .service-card {
    padding: 0.8rem;
  }

  .content-wrapper {
    flex-direction: column; /* 內容垂直排列 */
    text-align: center;
  }

  .text-content li {
    text-align: left;
  }

  /* 環境監控系統整合 */
  .system-integration {
    margin: 0;
  }
  .monitoring-card {
    margin-bottom: 1rem;
    padding: 1rem;
  }

  .image-content {
    margin-top: 1rem;
  }

  .breadcrumb {
    margin-top: 70px;
  }

  .cards-container {
    padding: 0px;
  }
  /*實驗室分析儀子頁面*/
  .laboratory-analyzer-container {
    padding: 15px;
    margin: 20px auto;
  }

  .chromatography-table th,
  .chromatography-table td {
    padding: 8px;
    font-size: 12px;
  }

  .related-products {
    padding: 15px;
  }

  .related-links a {
    width: 100%;
    padding: 12px 15px;
  }
}