* {
    padding:0;
    margin:0;
}
body {
    background-color: #000000;
}
header {
    z-index: 1000;     /* 讓這個區塊在所有元素上層 */
    background-color:rgba(255, 255, 255);
    height:80px;
    width:100%;
    position:fixed;    
    border-bottom: 3px solid #0058a6;/* 調整區塊下緣的邊框顏色 */
}
h1 {
    color:rgb(0, 0, 0);
    position:absolute;
    left:120px;
    top:0;
    line-height: 80px;
    background-image:url(images/TPLlogo.png) ;
    background-repeat: no-repeat;
    background-position: center;
    width:510px; /* 寬度與圖片寬度一致 */
    text-indent: -9999px; 
}
header ul {
    position:absolute;
    right:5vw;
    top:0;
    line-height:80px;
}
header li {
    display:inline;
    margin-right:4vw;    
}
header a {
    color:rgb(0, 0, 0);
    text-decoration: none;
}
header a:hover {
    color:red
}


/* 主要敘述區塊樣式 */
.Narrative {
    background-color: rgb(255, 255, 255);      /* Debug用紅色背景，正式版要改為白色 */
    height: 25vh;                            /* 高度設為視窗高度的95%，留5%空間給其他元素 */
    background-size: cover;                  /* 背景圖片覆蓋整個容器 */
    background-position: center;             /* 背景圖片置中對齊 */
    display: flex;                           /* 使用彈性盒子佈局 */
    flex-direction: column;                  /* 垂直排列子元素 */
    padding-top: 80px;                       /* 為固定header留出空間 */
    /*align-items: center; */                    /* 水平置中對齊 */
    /*justify-content: center;*/                 /* 垂直置中對齊 */
} 
.Narrative h2 {
    color:#00aaff;
    font-family: 'Arial', sans-serif;
    font-size:20px;
    margin-top:20px;                         /* 減少margin-top，因為區塊已有padding-top */
    margin-left: 120px;
} 
.Narrative p {
    color:#000000;
    font-family: 'Arial', sans-serif;
    font-size:15px;
    margin:25px 0;
    margin-left: 120px;
}



/* 產品展示區塊樣式 */
.product {
    display: flex;                           /* 使用彈性盒子佈局 */
    background-color: #ffffff;               /* 淺米色背景 */
    flex-wrap: wrap;                         /* 允許換行，讓產品可以排成多排 */
    justify-content: space-around;           /* 產品項目平均分配空間 */
    align-items: flex-start;                 /* 改為靠上對齊，讓產品元素往上移動 */
    padding: 150px 80px 120px;               /* 增加上方內距：從150px改為200px，為header留出空間 */
    min-height: 1000px;                      /* 設定最小高度確保區塊夠長 */
    gap: 20px;                               /* 產品項目間的間距 */
    font-family: Arial, Helvetica, sans-serif;
}
.product div {
    width: 22%;                              /* 每個產品項目寬度約22%，一排可放4個 */
    text-align: center;                      /* 文字置中對齊 */
    margin-bottom: 40px;                     /* 產品項目下方間距 */
    position: relative;                      /* 為了放置NEW標籤 */
}

/* NEW 標籤特效 */
.product .new-badge {
    position: absolute;                      /* 絕對定位 */
    top: 10px;                              /* 距離上方10px */
    right: 10px;                            /* 距離右邊10px */
    background-color: #ff4444;               /* 紅色背景 */
    color: white;                           /* 白色文字 */
    padding: 5px 10px;                      /* 內距 */
    border-radius: 15px;                    /* 圓角 */
    font-size: 12px;                        /* 字體大小 */
    font-weight: bold;                      /* 粗體 */
    font-family: Arial, Helvetica, sans-serif; /* 字體 */
    z-index: 10;                            /* 確保在圖片上方 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);  /* 陰影效果 */
    animation: newPulse 2s infinite;         /* 脈衝動畫 */
}

/* NEW 標籤脈衝動畫 */
@keyframes newPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
.product img {
    width: 100%;                             /* 圖片寬度100% */
    border-radius: 10px;                     /* 圓角邊框 */
    transition: transform 0.3s ease;         /* 添加平滑的過渡效果 */
    cursor: pointer;                         /* 游標變為手型 */
}
.product img:hover {
    transform: scale(1.05);                  /* 當游標移入時放大5% */
}
.product h3 {
    font-size: 20px;    
    margin: 20px 0;
    text-align: left;    /* 靠左 */
    
    
}
.product p {
    font-size:15px;
    line-height: 1.6em;
    text-align: left;    /* 靠左 */
    
}

/* 分頁導航樣式 */
.pagination {
    background-color: #ffffff;               /* 設定分頁區塊背景為白色 */
    padding: 50px 0;                         /* 修正語法：上下50px，左右0 */
    display: flex;                           /* 彈性盒子佈局 */
    justify-content: center;                 /* 水平置中 */
    align-items: center;                     /* 垂直置中 */
    margin: 0;                               /* 移除上下間距，讓白色區塊連續 */
    gap: 10px;                               /* 按鈕間距 */
    width: 100%;                             /* 確保整個寬度都是白色 */
}

.pagination a {
    display: inline-block;                   /* 行內區塊元素 */
    padding: 12px 16px;                      /* 內距 */
    margin: 0 5px;                           /* 外距 */
    color: #333;                           /* 文字顏色 */
    text-decoration: none;                   /* 移除底線 */
    border: 2px solid #ddd;                  /* 邊框 */
    border-radius: 5px;                      /* 圓角 */
    background-color: #ffffff;                  /* 背景顏色 */
    transition: all 0.3s ease;               /* 過渡效果 */
    font-family: Arial, Helvetica, sans-serif; /* 字體 */
    font-size: 14px;                         /* 字體大小 */
    min-width: 40px;                         /* 最小寬度 */
    text-align: center;                      /* 文字置中 */
}

.pagination a:hover {
    background-color: #00aaff;               /* 滑鼠移入背景色 */
    color: white;                            /* 滑鼠移入文字色 */
    border-color: #00aaff;                   /* 滑鼠移入邊框色 */
    transform: translateY(-2px);             /* 輕微上移效果 */
}

.pagination a.active {
    background-color: #00aaff;               /* 當前頁面背景色 */
    color: white;                            /* 當前頁面文字色 */
    border-color: #00aaff;                   /* 當前頁面邊框色 */
    cursor: default;                         /* 禁用手型游標 */
}

.pagination a.disabled {
    color: #ccc;                             /* 禁用狀態文字色 */
    border-color: #eee;                      /* 禁用狀態邊框色 */
    background-color: #f9f9f9;               /* 禁用狀態背景色 */
    cursor: not-allowed;                     /* 禁用游標 */
}

.pagination a.disabled:hover {
    background-color: #f9f9f9;               /* 禁用狀態不改變顏色 */
    color: #ccc;
    transform: none;                         /* 禁用動畫效果 */
}




.newsletter {
    background-color:#4c4c4c;     /* 區塊顏色 */
    color:rgb(255, 255, 255);     /* 區塊內容的顏色 */
    padding:60px 0;                 /* 區塊大小設定 */    /*60px 0*/
    display:flex;
    flex-direction: column;
    align-items: center;
    background-image:url(images/TPLbuttonlogo.jpg) ;
    background-repeat: no-repeat;
    background-size: 200px auto;             /* 圖片大小設定 */
    width:100%;                       /* 寬度與圖片寬度一致 */
    background-position:100px;
    text-indent: -9px; /*-9999px;*/  /* 文字區塊移動 */
}

.newsletter p {
    margin-bottom: 20px;
    font-family: Arial, Helvetica, sans-serif;
}
.newsletter a {
    color: #ffffff;                          /* 設定連結顏色為藍色 */
    text-decoration: none;                   /* 移除底線 */
}
.newsletter a:hover {
    color: #38bdff;                          /* 滑鼠移入時的顏色 */
    text-decoration: underline;              /* 滑鼠移入時顯示底線 */
}



.newsletter .address {
     text-align: center; 
     margin: 10px auto; 
     max-width: 600px;
     font-family: Arial, Helvetica, sans-serif;     /* 底部地址的字體 */
}






input:focus {
    outline: none; /* 移除焦點效果 */
    border-color:#E0E9A3; /* 焦點時的邊框顏色 */
}

footer {
    background-color:#000000;
    color:#B7B7B7;
    height:60px;
    display:flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
}
.menu {
    display:none;
}



/* 中等螢幕尺寸的響應式設計 (平板) */
@media screen and (max-width: 1024px) and (min-width: 769px) {
.product div {
    width: 45%;                      /* 平板時一排顯示2個產品 */
}
}




/* 小螢幕響應式設計 (手機) */
@media screen and (max-width: 768px) {


header ul {
    display: none;
    position: absolute;
    top: 80px;                               /* 緊接在header下方 */
    left: 0;
    width: 100%;
    background-color: rgba(255, 252, 252, 0.95);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 999;                            /* 確保在其他元素上方 */
    flex-direction: column;
    padding: 0;
    margin: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;              /* 添加平滑動畫 */
}


header h1 {
    width: 300px;        /* 調整 logo 寬度 */
    background-size: contain;  /* 或其他背景尺寸設定 */
    left: 50%;
    transform: translateX(-40%);
}



/* header h1 {left:50%;transform: translateX(-30%);} */

/* 當選單被激活時顯示 */
header ul.active {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

header li {
    display: block;
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

header li:last-child {
    border-bottom: none;
}

header a {
    display: block;
    padding: 15px 20px;
    color: rgb(0, 0, 0);
    text-decoration: none;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

header a:hover {
    background-color: rgba(255, 0, 0, 0.1);
    color: red;
}



/* header ul {display:none;}  不確定要不要*/


.menu {
    display:block;
    background-color: transparent;
    color: #333;
    font-size: 30px;
    position: absolute;
    top: 15px;
    left: 20px;
    border: 2px solid #333;
    border-radius: 5px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1001;                           /* 確保在選單上方 */
}

.menu:hover {
    background-color: rgba(255, 0, 0, 0.1);
    color: red;
    border-color: red;
}




.news h2 {
    font-size:40px;
}






















.news h2 {
    font-size:40px;
}


.shop {
    flex-direction: column;
}
.shop img {
    width:100%;
}
.info {
    width:100%;
    padding:40px 0;
}
.info h2 {
    font-size:30px;
}
.product {
    flex-direction: column;          /* 小螢幕時改為垂直排列 */
    padding: 200px 20px;             /* 調整小螢幕的內距，保持上方200px為header留空間 */
    align-items: center;             /* 讓產品項目在小螢幕時置中 */
}
.product div {
    width: 90%;                      /* 小螢幕時設定寬度為90% */
    max-width: 300px;                /* 限制最大寬度 */
    margin-bottom: 30px;             /* 保持項目間距 */
    position: relative;              /* 為了小螢幕的NEW標籤定位 */
}

/* 小螢幕時NEW標籤調整 */
.product .new-badge {
    top: 5px;                        /* 調整位置 */
    right: 5px;                      /* 調整位置 */
    padding: 4px 8px;                /* 減少內距 */
    font-size: 10px;                 /* 減少字體大小 */
}

/* 小螢幕時的分頁樣式調整 */
.pagination {
    flex-wrap: wrap;                 /* 允許換行 */
    gap: 5px;                        /* 減少間距 */
}

.pagination a {
    padding: 10px 12px;              /* 減少內距 */
    font-size: 12px;                 /* 減少字體大小 */
    min-width: 35px;                 /* 減少最小寬度 */
}

.newsletter {
    background-image: none;                   /* 在手機版時移除背景圖片 */
    text-indent: 0;                           /* 重設文字縮排 */
}









}