/* ====================================
   重置與全局樣式
   Reset and global styles
   ==================================== */

/* 隱藏但讓輔助工具可讀取的 h1 標題 */
.h1-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ====================================
   頁首橫幅區塊 Header Bar
   Banner layout
   ==================================== */

/* 主容器：三欄式，左右固定、置中延展 */
.header_bar {
  display: flex;              /* 使用 flex 排版 */
  align-items: stretch;       /* 子項目高度填滿 */
  gap: 20px;                  /* 欄位間距 */
  min-height: 450px;          /* 最小高度 */
  max-width: 100%;
  overflow: hidden;
}

/* 左側欄：寬度 20%，垂直兩端對齊 */
.header_bar .header-left {
  flex: 0 0 20%;              /* 固定寬度 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}

/* 中間欄：可延展，置中顯示內容 */
.header_bar .header-center {
  flex: 1;                    /* 延展部分 */
  display: flex;
  align-items: center;        /* 垂直置中 */
  justify-content: center;    /* 水平置中 */
  min-width: 0;               /* 防止子項溢出 */
}

/* 右側欄：寬度 20%，帶邊框 */
.header_bar .header-right {
  flex: 0 0 20%;
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
}

/* ====================================
   廣告幻燈片 Ads Slide
   ==================================== */

.adsbar {
  position: relative;         /* 方便絕對定位 */
  overflow: hidden;
}
.ads-wrapper {
  position: relative;
}
.ads-list {
  display: flex;              /* 橫向排列多個 slide */
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 0.5s ease;
  will-change: transform;
}
.ads-item {
  flex: 0 0 100%;             /* 每張 slide 佔滿容器 */
}
.ads-controls {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

/* 箭頭按鈕樣式 */
.ads-arrow {
  pointer-events: all;
  background: none;
  color: #fff;
  font-size: 3rem;            /* 字體大小，可調整 */
  padding: 0.5rem;
  cursor: pointer;
  user-select: none;
}
.ads-arrow:hover {
  background: rgba(0, 0, 0, 0.4);
}

/* 分頁點點 */
.ads-pagination {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
}
.pagination-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
.pagination-dot.active {
  background: #fff;
}

/* 圖片區塊覆蓋與自適應 */
.ads-image {
  overflow: hidden;
  width: 100%;
  height: auto;
  display: block;
}
.ads-image img {
  display: block;
  max-width: 100%;            /* 圖片寬度不超過容器 */
  max-height: 100%;           /* 高度不超過容器 */
  width: auto;
  height: auto;
}

/* ====================================
   區塊標題 Section Title
   ==================================== */
.front-page .section-title {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  font-weight: bold;
  border-bottom: 1px solid #FFD700; /* 黃色底線 */
  margin: 0;
}
.front-page .section-title span {
  position: relative;
  margin: 10px 0;
}

/* 前台區段間距 */
.front-page .section {
  margin-bottom: 30px;
}

/* ====================================
   印刷分類 Printing Categories
   五欄佈局
   ==================================== */
.front-page #printing-categories .categories-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.front-page .category-item {
  flex: 0 0 calc((100% - (4 * 20px)) / 5);
  text-align: center;
  padding: 12px 8px 16px;
  overflow: hidden;
}
.front-page .category-item img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;         /* 圓形圖片 */
  margin: 0 auto 8px;
}
.front-page .category-name {
  font-size: 1rem;
}

/* ====================================
   熱門印刷項目 Popular Items
   四欄佈局 + 獎牌定位
   ==================================== */
.front-page #popular-items .popular-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.front-page #popular-items .popular-list .post-box {
  position: relative;         /* 定位父容器，供獎牌絕對定位 */
  flex: 0 0 calc((100% - 30px) / 4);
  max-width: calc((100% - 30px) / 4);
  box-sizing: border-box;
}
.front-page #popular-items .popular-list .post-box .rank-icon {
  position: absolute;
  top: 8px;                   /* 距頂 8px */
  left: 8px;                  /* 距左 8px */
  width: 150px;               /* 固定寬度 */
  height: auto;
  z-index: 10;
}

/* ====================================
   印刷部落 Print Blog
   三欄文章卡片樣式
   ==================================== */
.front-page #print-blog .blog-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.front-page #print-blog .blog-list .blog-teaser {
  flex: 0 0 calc((100% - (2 * 20px)) / 3);
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 16px;
  background: #fff;
  text-align: center;
}
.front-page #print-blog .blog-teaser a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.front-page #print-blog .blog-thumb {
  width: 100%;
  height: auto;
  margin-bottom: 12px;
  border-radius: 4px;
}
.front-page #print-blog .blog-teaser h3 {
  margin: 0 0 8px;
}
.front-page #print-blog .blog-teaser p {
  font-size: 0.9rem;
  color: #666;
  margin: 0;
}
.front-page #print-blog .blog-categories a {
  margin-left: 12px;
  color: #666;
  text-decoration: none;
  font-size: 0.9rem;
}

/* ====================================
   產品及分類通用佈局
   ==================================== */
   .productclass {
    padding: 15px;
  }
  
  .posts-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start; /* 保持靠左排列，最後一排如果只有三個就只顯示三個 */
  }
  
  .post-box {
    /* 固定基礎寬度，不撐滿也不縮小 */
    flex: 0 0 calc(25% - 10px);
    padding: 10px;
    border: 1px solid #ddd;
    text-align: center;
    background: #fff;
    transition: transform 0.3s;
  }
  
  .post-box:hover {
    transform: translateY(-5px);
  }
  
  .post-box img {
    width: 100%;
    height: auto;
  }
  
  /* 「更多產品」容器與按鈕 */
  .load-more-container {
    margin-top: 10px;
    text-align: center;           /* 將按鈕置中 */
  }
  
  .load-more-btn {
    padding: 8px 16px;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
  }
  
  .load-more-btn:hover {
    transform: translateY(-2px);
  }
  
  /* 印刷部落標題與分類容器 */
  .front-page .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    border-bottom: 1px solid #ddd;
  }

/* ====================================
   Q&A 區塊 QA Section
   ==================================== */
.qa-section, .qa-section * {
  box-sizing: border-box;
}
.qa-section {
  display: flex;
  flex-direction: column;
  height: 450px;
  border: 1px solid #ddd;
  margin: 0;
  padding: 0;
}
/* Header with arrows */
.qa-header.with-arrows {
  flex: 0 0 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
  padding: 0 10px;
}
.qa-title {
  margin: 0;
  font-size: 1em;
  font-weight: 400;
}

.qa-item:hover{
  background-color: #f5f5f5;
}
.qa-controls {
  display: flex;
  gap: 8px;
}

.qa-items-group {
  flex: 1;
  display: none;
  flex-direction: column;
  overflow: hidden;

}
.qa-items-group.active {
  display: flex;
}
.qa-item {
  flex: 0 0 50px;
  margin: 0;
}
.qa-item a {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 10px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid #eee;
}
.qa-items-group.active .qa-item:nth-child(8) a {
  border-bottom: none;        /* 第8項去掉底線 */
}

/* ====================================
   左側自訂區塊樣式
   header-left 內容
   ==================================== */
.header-left > div {
  padding: 20px;
}

.line_bn {
  background-color: #00b900;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
  border-radius: 8px;
  transition: background-color 0.3s;
  padding: 20px;
}
.line_bn:hover {
  background-color: #009a00;  /* 懸停變色 */
}
.line_bn .slog {
  font-weight: bold;
  font-size: 20px;
}
.line_bn span:last-child {
  font-weight: bold;
  font-size: 40px;
}
.line_bn .line-icon img {
  width: 140px;
  height: auto;
  margin-bottom: 6px;
}
.line_bn picture img,.line_bn picture,.line_bn img,.line-icon{
  width: 140px;
  height: auto;
  margin-bottom: 6px;
}


/* 連結取消下划線 */
.header-left a, .header-left a:hover {
  text-decoration: none;
}

.free_ship {
  background-color: #f4f4f4;
  color: #727272;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  text-align: left;
  border-radius: 8px;
  padding: 20px;
}
.register-btn {
  align-self: flex-end;
  margin-top: 10px;
  background-color: #ff9800;
  color: #fff;
  padding: 5px 18px;
  font-weight: bold;
  font-size: 15px;
  text-decoration: none;
  border-radius: 0;
  transition: background-color 0.3s, border-color 0.3s;
}
.register-btn:hover {
  background-color: #f57c00;
  border-color: #d86e00;
  color: #ffffff;
}


/* ====================================
   最新消息 News Section
   ==================================== */
.news-wrapper {
  position: relative;
  overflow: hidden;
}
.news-list {
  display: flex;
  transition: transform 0.4s ease;
}
.news-item {
  flex: 0 0 100%;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 20px;
}
.news-inner {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.news-left img.news-thumb {
  width: 100%;                  /* 圖片填滿左區 */
  height: auto;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.news-right {
  flex: 1;                       /* 右側內容延展 */
}
.news-right h3 {
  margin: 0 0 8px;
  font-size: 20px;
  color: #333;
}
.news-right p {
  margin: 0;
  color: #666;
  line-height: 1.6;
}
.news-controls {
  position: absolute;
  top: 50%;
  width: 100%;
  padding: 0 30px;              /* 箭頭左右內距 */
  box-sizing: border-box;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.news-arrow {
  pointer-events: auto;
  font-size: 32px;
  color: #999;
  background: rgba(255,255,255,0.8);
  padding: 8px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  border-radius: 4px;
}
.news-arrow:hover {
  color: #333;
  background: rgba(255,255,255,1);
}





/* ====================================
   響應式調整 Responsive
   ==================================== */
   @media (max-width: 768px) {
    .front-page .category-item {
      flex: 0 0 calc((100% - 20px) / 2);
    }
    .front-page .blog-teaser {
      flex: 0 0 100%;              /* 小螢幕下文章卡片佔滿一列 */
    }
    #main-content{
      margin-top: 20px;
    }
    .header_bar {
      flex-direction: column;     /* 由三欄改堆疊 */
      gap: 10px;                  /* 縮小間距 */
      min-height: auto;           /* 取消固定高度 */
    }
    .header_bar .header-left,
    .header_bar .header-center,
    .header_bar .header-right {
      flex: 0 0 auto;             /* 以內容高度為主 */
      width: 100%;                /* 滿版寬度 */
    }
    .header_bar .header-left {
      order: 2;                   /* 可視需求調整順序 */
    }
    .header_bar .header-center {
      order: 1;
    }
    .header_bar .header-right {
      order: 3;

    }

    .line_bn {
      display: flex;           /* 水平排列 */
      flex-direction: row;     /* 圖片左、文字右 */
      align-items: center;     /* 垂直置中 */
      gap: 20px;                /* 圖文間距 */
      padding: 10px 0;          /* 上下留白 */
    }
  
    .line-icon {
      flex-shrink: 0;          /* 圖片不被壓縮 */
      height: auto;
      display: flex;            /* 啟用 flex 佈局 */
      align-items: center;      /* 垂直置中 */
      justify-content: center;  /* 水平置中（必要時） */
      
    }
  
    .line-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;  /* 如果希望左右置中 */
      height: 100%;
    }
    .header-left .line_bn img{
      width: 80px;
      margin-bottom: 0px;
    }
    .line-text .slog {
      font-size: 24px;
      line-height: 1.2;
    }
    .header_bar .header-left{gap: 10px;}
  
    .line-text .bold-text {
      font-size: 16px;
      font-weight: bold;
      line-height: 1.2;
    }
/* ====================================
   熱門印刷項目 Popular Items
   四欄佈局 + 獎牌定位
   ==================================== */
    .front-page #popular-items .popular-list {
      gap: 10px;                /* 保持間距 */
    }
    .front-page #popular-items .popular-list .post-box {
      /* 手機板改為兩欄 */
      flex: 0 0 calc((100% - 10px) / 2);
      max-width: calc((100% - 10px) / 2);
    }
    .front-page #popular-items .popular-list .post-box .rank-icon {
      top: 6px;                 /* 可微調位置 */
      left: 6px;
      width: 100px;             /* 縮小獎牌寬度 */
    }

    /* ====================================
   產品及分類通用佈局
   ==================================== */

    .posts-boxes {
      gap: 10px;
    }
    .post-box {
      /* 兩欄，每欄之間保留 10px 間距 */
      flex: 0 0 calc((100% - 10px) / 2);
      max-width: calc((100% - 10px) / 2);
    }

      /* 手機板：保留水平滑動與箭頭控制 */



  .news-item {
    flex: 0 0 100%;
    scroll-snap-align: start;
    padding: 12px;
  }

  .news-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .news-left {
    width: 100%;
  }

  .news-left img {
    width: 100%;
    height: auto;
    border-radius: 4px;
  }

  .news-controls {

    padding: 0 12px;
  }


  /*部落格區塊*/

    /* 印刷部落 Print Blog 手機板：一排一個 */
    .front-page #print-blog .blog-list {
      display: flex;
      flex-direction: column;
      gap: 16px; /* 手機板間距可適度縮小 */
    }
  
    .front-page #print-blog .blog-list .blog-teaser {
      flex: 0 0 100%;
      max-width: 100%;
      padding: 12px;
    }
  


  }