/* 全局樣式 */
body {
  font-family: Arial, sans-serif; /* 字體 */
  margin: 0;    /* 移除預設邊距 */
  padding: 0;   /* 移除預設內距 */
  background-color: #f8f9fa; /* 背景顏色 */
}
/* 上部區域 */
.header {
  display: flex;           /* 使用 Flexbox 排版 */
  justify-content: space-between; /* 左右對齊 */
  align-items: center;     /* 垂直居中 */ 
  background:url("s2.jpg");/* 背景色圖 */
  padding: 10px 20px;      /* 內距 上右下左*/ 
  color: #fff; 
}
.home-button, .menu-button {
  cursor: pointer;
  font-size: 24px;
}
/* 移除預設邊距 */
.title {
  margin: 0;       /* 內距 */
  font-size: 20px; /* 字體大小 */
}

/* 彈出菜單 ------------------------ 彈出菜單 ---------*/
.menu-overlay {
  display: none;   /* 預設隱藏 */
  position: fixed; /* 固定位置 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
  justify-content: flex-end;   /* 靠右對齊 */
  align-items: flex-start;     /* 靠上對齊 */
  transition: opacity 0.3s ease; /* 過渡效果加快 */
}
/* 彈出菜單 顯示模式 */
.menu-overlay.show {
  display: flex;  /* 顯示菜單 */
  opacity: 1;     /* 完全不透明 */
}
.menu-content {
  background-color: #ddd;      /* 背景色圖 */
  padding: 20px;               /* 內距 */
  border-radius: 0px 0px 0px 0px;  /* 圓角 */
  width: 90%;        /* 寬度 */
  max-width: 400px;  /* 最大寬度 */ 
  height: 100%;
  position: relative;/* 相對定位 */
  box-shadow: -4px 0 8px rgba(0, 0, 0, 0.1);/ * 盒子陰影 */
}
/* 彈出菜單 功能選項 */
.menu-header {
  display: flex;       /* 使用 Flexbox 排版 */
  justify-content: space-between; /* 左右對齊 */
  align-items: center; /* 垂直居中 */ 
  margin-bottom: 10px; /* 下邊距 */
  font-size: 28px;     /* 下邊距 */
}
/* 彈出菜單 關閉按鈕 */
.close-button {
  cursor: pointer; /* 彈出菜單 關閉按鈕 */
  font-size: 24px; /* 字體大小 */
}
/* 選單項目樣式 */
.menu-item {
  padding: 10px;
  border-bottom: 2px solid #bbb;
  cursor: pointer;
  font-size: 14pt;    /* 字體大小 */
  transition: background-color 0.3s ease;
  text-align: left;  /* 文字靠左 */
  text-decoration: none; /* 不底線 */
  list-style-type: none; /* 不圓點 */
}
/* 功能選項樣式 滑鼠懸停 */
.menu-item:hover {
  color: #fff;
  background-color: #000080;
}
/* 卡片區  ----------------------- 卡片區 -------- */
.container {
  width: 90%;
  margin: 0 auto;
  padding: 20px 0;
}
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}
.col {
  flex: 0 0 25%;
  max-width: 25%;
  padding: 10px;
  box-sizing: border-box;
}
/* 卡片區 */
.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* 卡片區 游標 */
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
/* 卡片區 圖 */
.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
/* 卡片區 主体 */
.card-body {
  padding: 15px;
  text-align: center;
}
/* 卡片區 抬頭 */
.card-title {
  font-size: 1.25rem;
  margin-bottom: 10px;
  color: #333;
}
/* 卡片區 文字 */
.card-text {
  font-size: 1rem;
  color: #666;
  margin-bottom: 15px;
}
/* 基本的 */
.btn-primary {
  display: inline-block;
  width: 85%;
  padding: 10px;
  background-color: #007bff;
  border: none;
  border-radius: 4px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s ease;
} 
/* 卡片區  懸停  */
.btn-primary:hover {
  background-color: #0056b3;
}
/* 尾部區  ------------------- 尾部區 -----------------*/
.footer {
  background:url("s2.jpg"); /* 背景色圖 */
  color: #fff;        /* 文字顏色 */
  text-align: center; /* 文字居中 */
  padding: 10px 0px 10px 0px; /* 內距 */
  margin-top: 10px;
}

/* 產品  用於主文調控  ----- 文件檔電腦手機共用------ */
.product-txt { 
  text-align: left;  color: # 000;     
  font-size: 18px;  padding: 10px ;
  }

/* 手機設備 結束 注意上傳- 並未立即更新 手機設備 結束*/
    /* 框內  區塊  有字*/
emz{ 
  border-radius:9px 9px 9px 9px;
  border: 2px ridge #520;   
  padding: 8px;    /* 邊距 */
  display: flex;
  flex-direction: column;
}
.product-emt { 
 font-weight: bold;  /* 粗体 */
 color: #888;  font-size: 26px; 
}
/* 一般功能表   白色字   顯示黃 */
A.side:link {   
color: #000080;  font-size: 15pt; 
padding:0px 0px 0px  0px;
text-decoration: none;  
}
A.side:active {
color: #000080;  font-size: 15pt;
padding:0px  0x 0px  0px 
text-decoration: none; 
}
A.side:visited {
color: #000080;  font-size: 15pt;
padding:0px  0px 0px  0px
text-decoration: none;
}
A.side:hover {
color: #f00; font-size: 15pt;
padding:0px 0px 0px  0px;
text-decoration: none; }

/* 動畫效果 */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.5); }
    to { opacity: 2; transform: scale(1.2); }
}
/* opacity 透明0, transform:scale變換：縮放0.5 */
/* opacity 透明1, transform:scale變換：縮放2 */

.header h1 {  font-size: 18pt;
  animation: fadeIn 1.3s ease-in-out; 
}   /* 調整為 1.5 秒 , 快慢  */

    /* 回到頂部  按鈕 */
#backToTopBtn {
      display: none;   /* 初始隱藏 */
      position: fixed; /* 固定位置 */
      bottom: 8px;    /* 距離底部 20px */
      right: 5px;     /* 距離右側 20px */
      z-index: 9999;   /* 確保按鈕在最上層 */
      border: none;    /* 移除邊框 */
      outline: none;   /* 移除外框 */
      background-color: #3f3; /* 按鈕背景色 */
      color: #000;    /* 文字顏色 white */
      cursor: pointer; /* 鼠標樣式 */
      padding: 15px;   /* 內邊距 */
      border-radius: 50%; /* 圓形按鈕 邊界半徑*/
      font-size: 18px; /* 字體大小 */
      transition: background-color 0.3s;
    }                  /* 過渡：背景顏色*/ 

#backToTopBtn:hover {
      background-color: #F09C00; /* 鼠標懸停時的背景色 */
    }