/*根元素*/
:root{
--white:#ffffff; /* 背景(白) var(--white)*/
--black:#000000; /* 段落文字  var(--black)*/
--card:#f1f1f1; /* 卡片底(淺灰) var(--card)*/
--text:#435058; /* 主要文字 var(--text)*/
--text2:#435058; /* h3次要文字 var(--text2)*/
--text3:#DCF763; /* h4次要文字 var(--text3)*/
--text4:#848C8E; /* 次要文字 var(--text4)*/
--shadow: 0 5px 10px rgba(0,0,0,.25); /* 陰影 var(--shadow)*/
--gradient: linear-gradient(120deg, #6f86d6 0%, #48c6ef 100%); /* 漸層 var(--gradient)*/
}

/*logo&頁籤選單文字區塊左右靠齊*/
.topnavbar {
    background-color: #fff;/*頁籤底圖顏色;background-color: rgba(255,255,255,0);透明Transparent*/
    position: relative;/*relative 頁籤&banner分開不重疊;頂置 fixed;*/
    line-height: 0;
    padding: 0;
  box-shadow: var(--shadow);
}

.topnavbar .container {
  padding: 0;  /* 清除內距 */
  display: grid;
  grid-auto-flow: column;
  align-items: center;
}

@media (min-width: 1200px) {
  body[data-type="fullpage"] .topnavbar .container { width: 1600px; }
}

@media only screen and (min-width: 768px){ 
  .topnavbar .container #logo { text-align: left; }/* 讓頁籤logo靠左 */ 
} /* 在螢幕寬度 768px 以上顯現 */

.topnavbar .container #nav { text-align: right; }/* 讓頁籤選單文字靠右 */

/*按鈕-回首頁&搜尋*/
body[data-type="fullpage"] .navbar .container {
    margin: 0 3vw 0 auto;
}

body {
    background-color: #fff;/*背景底色*/
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans TC", sans-serif;
/* 優先套用各平台預設英文字型（蘋果 / Windows / 安卓 / 舊版系統），中文字依序遞補套用 Noto Sans TC（思源黑體），最後由系統無襯線體（sans-serif）墊底 */
}


/*動到表格手機不會破版*/
table {
  table-layout: fixed;
  word-wrap:break-word;
} 

hr {
  border-top: 1px solid #ddd;
  border-bottom: 0;
  margin: 2em 0;
}

/*編輯欄設定*/
#main-wrap .container {
  font-size: clamp(16px, 2vw, 18px);
  color:  var(--black);
}/*編輯欄文字*/

body[data-type="fullpage"]:not(#managehome) #wrap>*:not(:last-child) {
    margin-bottom: 0px;
}

body[data-type="fullpage"] #product-header.main {
      min-height: auto;/*產品-編輯框不設定高*/
}

.fcol p{  
  line-height: 2;
  text-wrap: pretty ;  /*適用內文,段落避開孤字*/
 }

h1, h2, h3, h4, h5, h6 { 
  text-wrap: balance ;  /*適用標題和短文案,視覺效果更平衡*/
} 

.fcol h2 { 
  color: var(--text);
  font-size: clamp(26px, 3vw, 36px);/*最小值 首選值 最大值 限制屬性值區間*/
}

.fcol h3 { 
  color: var(--text2);
  font-size: clamp(24px, 3vw, 30px);/*最小值 首選值 最大值 限制屬性值區間*/
}

.fcol h4 { 
  color: var(--text3);
  font-size: clamp(20px, 3vw, 24px);/*最小值 首選值 最大值 限制屬性值區間*/
}

/*nav*/
#nav ul li a {
    white-space: normal; /*自動換行*/
    font-size: 1.0rem;/*頁籤文字大小*/
    color: #000;/*頁籤文字顏色*/
    padding: 10px 20px;/*頁籤文字間隔;padding:2px 16px 2px 16px;*/
    line-height: 1.3;
    transition: .3s;
}

#nav ul li a:hover  {
    color: var(--text);/*頁籤滑過文字顏色*/
}
#nav ul li.current a {
    color: var(--text);/*頁籤按下後文字顏色*/
    font-weight: 500;
}

/*頁籤按鈕下底線滑入特效-底線短*/
#nav ul li a::before {
  content:"";
  border-bottom:3px solid var(--text3);
  width:0;
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  margin:0 auto;
  transition:.3s all ease;
}
#nav ul li a:hover::before {
    width: 70%;
}


#nav .subnav {
    background-color: #fff;/*次頁籤底色*/
    max-width: 400px;/*次頁籤背景最大寬度*/
    width: max-content;/*最大內容*/
    text-align: left;
}

#nav .subnav .has-subnav span{
    max-width: 400px;/*次頁籤文字背景最大寬度*/
}

#nav li.has-subnav ul li.has-subnav>div a::after, #nav>ul>li.has-subnav>a::after {
    padding-left: 2px;/*下拉選單箭頭距離*/
}

/*產品頁*/
#side h3 {
  /*background-color: var(--card);*/
  background-image: var(--gradient);
  border-radius: 10px 10px 0 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--white);
}
#side ul li a {
  font-size: 16px;
  color: #333;
  border-bottom: 1px dashed #ddd;
}
#side ul li a:hover {
  color: var(--text);
}

ul.product-list li a {
    color: var(--text);/*產品格文字顏色*/
    background-color: #eee;/*產品格底色*/
}
ul.product-list li a:hover {
    color: var(--text2);/*產品格滑過文字顏色*/
}
.productdetail .detail-spec h2 {
    color: #333;
    font-size: clamp(22px, 3vw, 26px);
}/*產品內頁標題文字*/


/*分頁title文字*/
.h1title h1{
    color: var(--text);
  text-align: center;
}

a {
    color: var(--text2);/*連結顏色*/
    text-decoration: none;
}

.swiper-container {
  height: auto !important; /* 將容器預設的高拿掉 */
}

.swiper-wrapper, .swiper-slide {
  height: 0 !important;
  padding-bottom: calc(750 / 1920 * 100%); /* 自定響應式圖片高度 */
}

.swiper-slide {
  width: 100% !important; /* 強制圖片寬度隨容器變更 */
}

#bodyinhome .fcol:nth-child(-n+6) { padding: 0; } /*首頁-全編輯欄間距*/
#bodyinhome .fcol:nth-child(-n+6) .container {  width: 100%; padding: 0; } /*首頁-全編輯欄容器拉寬*/
body.about-us .fcol:nth-child(-n+7) .container {  width: 100%; padding: 0; } /*首頁-全編輯欄容器拉寬*/

/* ==========================================================================
   1. 全域變數定義 (:root)
   ========================================================================== */
:root {
  /* 品牌核心色彩 (依「齊上工程」色樣定義) */
  --custom-primary: #DCF763;          /* 主高亮 (Accent): #DCF763 */
  --custom-primary-hover: #cbe64c;    /* 主高亮 Hover 加深 */
  --custom-dark: #435058;             /* 深石墨 (Dark): #435058 */
  --custom-dark-hover: #333d43;       /* 深石墨 Hover 加深 */
  --custom-gray: #848C8E;             /* 中灰 (Medium Gray): #848C8E */
  --custom-bg-light: #F1F2EE;         /* 淺灰米白 (Background): #F1F2EE */
  --custom-white: #FFFFFF;            /* 純白 */
  
  /* 文字顏色 */
  --custom-text-main: var(--custom-dark);
  --custom-text-muted: var(--custom-gray);
  --custom-text-light: var(--custom-white);

  /* 字體家族 */
  --custom-font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* 視覺細節設定 (圓角 / 轉場 / 陰影) */
  --custom-radius-sm: 8px;            /* 小圓角：適用於標籤、小按鈕 */
  --custom-radius-md: 16px;           /* 中圓角：適用於卡片、一般圖框 */
  --custom-radius-lg: 24px;           /* 大圓角：適用於 Hero 大圖、滿版區塊 */
  --custom-radius-pill: 50px;         /* 膠囊圓角：適用於 Badge、圓角按鈕 */
  
  --custom-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --custom-shadow-sm: 0 4px 12px rgba(67, 80, 88, 0.06);
  --custom-shadow-md: 0 10px 30px rgba(67, 80, 88, 0.08);
  --custom-shadow-lg: 0 15px 35px rgba(67, 80, 88, 0.15);
}

/* ==========================================================================
   2. 基礎重設與容器 (Base & Containers)
   ========================================================================== */
/* 通用限寬容器 (RWD 自適應) */
.custom-container {
  width: 100%;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* 通用上下留白區塊 */
.custom-section {
  padding-top: 3em;
  padding-bottom: 3em;
  margin: 0 -1em;
}

.custom-bg-light {
  background-color: var(--custom-bg-light);
}

.custom-bg-dark {
  background-color: var(--custom-dark);
  color: var(--custom-white);
}

/* 響應式圖片通用類別 */
.custom-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ==========================================================================
   3. 通用字體與標題模組 (Typography Components)
   ========================================================================== */
.custom-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(220, 247, 99, 0.25);
  color: var(--custom-dark);
  font-size: 14px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: var(--custom-radius-pill);
  margin-bottom: 16px;
}

.custom-sub-title {
  display: block;
  color: var(--custom-dark);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.custom-section-title {
  color: var(--custom-dark);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 16px;
}

.custom-header-subtitle {
  color: var(--custom-gray);
  font-size: 16px;
  margin: 0;
}

.custom-header-center {
  text-align: center;
  margin-bottom: 48px;
}

.custom-text-p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--custom-dark);
  opacity: 0.9;
  margin-top: 0;
  margin-bottom: 16px;
}

/* ==========================================================================
   4. 通用按鈕元件 (Button Components)
   ========================================================================== */
.custom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--custom-radius-pill);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: var(--custom-transition);
  cursor: pointer;
  border: 2px solid transparent;
  white-space: nowrap;
}

/* 亮綠主按鈕 */
.custom-btn-primary {
  background-color: var(--custom-primary);
  color: var(--custom-dark);
}
.custom-btn-primary:hover {
  background-color: var(--custom-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--custom-shadow-sm);
}

/* 深灰次要按鈕 */
.custom-btn-dark {
  background-color: var(--custom-dark);
  color: var(--custom-white);
}
.custom-btn-dark:hover {
  background-color: var(--custom-dark-hover);
    color: var(--custom-primary);
  box-shadow: var(--custom-shadow-sm);
}
.custom-btn-dark:hover i {
  transition: transform 0.2s ease;
  transform: translateX(6px);
}

/* 透明外框按鈕 */
.custom-btn-outline {
  background-color: transparent;
  border-color: var(--custom-white);
  color: var(--custom-white);
}
.custom-btn-outline:hover {
  background-color: var(--custom-white);
  color: var(--custom-dark);
}

/* ==========================================================================
   5. 通用響應式斷點 (Media Queries)
   ========================================================================== */
@media (max-width: 768px) {
  .custom-section-title { font-size: 24px; }

  .custom-btn {  width: 100%; /* 行動端按鈕自動滿版 */  }
}


/* ==========================================================================
   「關於我們」模組專屬樣式 (.custom-about-*)
   ========================================================================== */

/* 區塊背景設定 (採用全域淺灰米白底色) */
.custom-about-section {
  background-color: var(--custom-bg-light);
  overflow: hidden; /* 防止色塊偏移量超出頁面邊界 */
}

/* 兩欄式 Grid 佈局 */
.custom-about-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr; /* 左圖右文，右側稍微寬鬆 */
  gap: 60px;
  align-items: center;
}

/* --------------------------------------------------------------------------
   左側圖片與色塊裝飾 (偽元素核心技巧)
   -------------------------------------------------------------------------- */
.custom-about-media {
  padding: 0 0 20px 20px; /* 留出左下色塊露出的空間 */
}

.custom-about-image-wrapper {
  position: relative;
  width: 100%;
}

/* 左下角高亮色塊：使用 ::before 偽元素繪製 */
.custom-about-image-wrapper::before {
  content: "";
  position: absolute;
  left: -20px;                   /* 向左偏移 20px */
  bottom: -20px;                 /* 向下偏移 20px */
  width: 60%;                    /* 色塊寬度涵蓋圖片左下約 60% */
  height: 60%;                   /* 色塊高度涵蓋圖片左下約 60% */
  background-color: var(--custom-primary); /* 使用 #DCF763 主高亮色 */
  z-index: 1;                    /* 位於圖片下方 */
  border-radius: var(--custom-radius-sm); /* 微圓角修飾 */
}

/* 圖片本身定位與層級 */
.custom-about-img {
  position: relative;
  z-index: 2;                    /* 確保圖片壓在色塊上方 */
  border-radius: var(--custom-radius-sm);
  box-shadow: var(--custom-shadow-md);
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;           /* 固定相片長寬比 (4:3) */
  object-fit: cover;             /* 避免圖片拉伸變形 */
}

/* --------------------------------------------------------------------------
   右側文案排版
   -------------------------------------------------------------------------- */
.custom-about-header {
  margin-bottom: 24px;
}

/* 副標題與中文組和 */
.custom-sub-title-zh {
  color: var(--custom-dark);
  margin-left: 6px;
  font-weight: 700;
}

/* 內文文字優化 */
.custom-about-body {
  margin-bottom: 32px;
}

.custom-about-body .custom-text-p {
  color: var(--custom-dark);
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 16px;
  opacity: 0.9;
}

.custom-about-body .custom-text-p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   響應式斷點調整 (RWD for Mobile/Tablet)
   ========================================================================== */
@media (max-width: 992px) {
  .custom-about-grid {
    grid-template-columns: 1fr; /* 平板/手機轉為單欄 */
    gap: 40px;
  }

  .custom-about-media {
    padding: 0 0 15px 15px; /* 縮小手機端色塊留白 */
    max-width: 550px;
    margin: 0 auto;
  }

  .custom-about-image-wrapper::before {
    left: -15px;
    bottom: -15px;
  }
}

@media (max-width: 576px) {
  .custom-about-body .custom-text-p {
    font-size: 14px; /* 小螢幕稍微調小字級以利閱讀 */
  }
}

/* ==========================================================================
   服務項目卡片模組專屬樣式
   ========================================================================== */

/* 區塊整體背景 */
.custom-services-section {
  background-color: #dedfdc;
}

/* 標題居中設定 */
.custom-header-center {
  text-align: center;
  margin-bottom: 2em;
}

.custom-sub-title {
  display: inline-block;
  font-size: 14px;
  font-weight: 800;
  color: var(--custom-dark);
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.custom-sub-title-zh {
  color: var(--custom-gray);
  margin-left: 6px;
  font-weight: 500;
}

.custom-section-title {
  font-size: 32px;
  font-weight: 900;
  color: var(--custom-dark);
  margin: 0;
}

/* 4 欄 CSS Grid 網格佈局 */
.custom-services-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  align-items: stretch;
}

/* --------------------------------------------------------------------------
   <figure> 互動式卡片容器 & 滿版 <a> 連結設定
   -------------------------------------------------------------------------- */
.custom-service-card {
  position: relative;                   /* 作為 <a> 絕對定位的父容器基準 */
  margin: 0;                             /* 重置 figure 預設外邊距 */
  background-color: var(--custom-white);
  border-radius: var(--custom-radius-md);
  box-shadow: var(--custom-shadow-sm);
  transition: var(--custom-transition);
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 使 <a> 覆蓋整個 <figure> 範圍，達到全卡片可點擊效果 */
.custom-service-card > a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;                             /* 浮於圖片與文字上方，確保滿版點擊 */
}

/* 滑鼠懸停於 <figure> 上的卡片整體動態 */
.custom-service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--custom-shadow-lg);
}

/* 圖片容器 */
.custom-service-media {
  position: relative;
  width: 100%;
  padding-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

/* 示意圖片本體 */
.custom-service-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--custom-radius-sm);
  display: block;
}


/* --------------------------------------------------------------------------
   圖片左上角懸浮雙圈 Icon 徽章
   -------------------------------------------------------------------------- */
.custom-service-icon-badge {
  position: absolute;
  top: -10px;
  left: 30px;
  width: 58px;
  height: 58px;
  background-color: var(--custom-dark);  /* 內圈深石墨灰底色 #435058 */
  color: var(--custom-primary);          /* 圖示亮綠色 #DCF763 */
  border: 3px solid var(--custom-white); /* 白色內外分隔線 */
  outline: 3px solid var(--custom-primary);/* 外圈亮綠色邊框 */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  z-index: 3;                            /* 確保層級高於圖片 */
  box-shadow: var(--custom-shadow-sm);
  transition: var(--custom-transition);
}

/* 滑鼠懸停時 Icon 徽章微動態 */
.custom-service-card:hover .custom-service-icon-badge {
  transform: scale(1.1) rotate(5deg);
}

/* --------------------------------------------------------------------------
   <figcaption> 卡片內容區域與按鈕細節
   -------------------------------------------------------------------------- */
.custom-service-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin: 0;
}

.custom-service-title {
  font-size: 1.5rem !important;
  font-weight: 800;
  color: var(--custom-dark);
  margin-top: 0;
  margin-bottom: 12px;
}

.custom-service-desc {
  font-size: 14px;
  color: var(--custom-gray);
  line-height: 1.6;
  margin-top: 0;
  margin-bottom: 24px;
  flex-grow: 1;                          /* 推擠按鈕對齊卡片底部 */
}

/* 偽按鈕外觀 (由 <a> 處理點擊，此處提供視覺樣式) */
.custom-btn-card {
  background-color: var(--custom-dark);
  color: var(--custom-white);
  padding: 10px 20px;
  font-size: 14px;
  align-self: flex-start;
  border-radius: var(--custom-radius-pill);
  transition: var(--custom-transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* 滑鼠懸停時按鈕外觀切換 */
.custom-service-card:hover .custom-btn-card {
  background-color: var(--custom-dark-hover);
  color: var(--custom-primary);
}

.custom-btn-card i {
  transition: transform 0.2s ease;
}

/* 懸停時按鈕箭頭右移 */
.custom-service-card:hover .custom-btn-card i {
  transform: translateX(6px);
}

/* --------------------------------------------------------------------------
   響應式斷點 (RWD)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .custom-services-grid {
    grid-template-columns: repeat(2, 1fr);/* 平板端 2 欄 */
    gap: 32px 20px;
  }
}

@media (max-width: 576px) {
  .custom-services-grid {
    grid-template-columns: 1fr;          /* 手機端單欄 */
    gap: 28px;
  }

  .custom-service-img {
    height: 210px;                       /* 手機端提升圖片比例 */
  }
}


/* ==========================================================================
   為什麼選擇齊上 (Why Choose Us) 區塊專屬樣式
   ========================================================================== */
/* 區塊主要定位與外距 */
.custom-why-us-section {
  position: relative;
  background-color: var(--custom-dark-bg); /* 深石墨灰底色 #2c3842 */
  color: var(--custom-white);
  
   background-attachment: fixed; /*fixed固定背景; scroll捲動背景*/
   background-repeat: no-repeat;
   background-position: 50% 100%;
   background-size: cover;
   background-image: linear-gradient(90deg, rgba(44, 56, 66, 0.98) 0%, rgba(44, 56, 66, 0.88) 45%, rgba(44, 56, 66, 0.45) 100%),url(https://static.iyp.tw/410007/files/c2dc1d71-9e8c-4550-842e-be2fbfa651c9.jpg);
}

/* --------------------------------------------------------------------------
   標題區域設定
   -------------------------------------------------------------------------- */
.custom-why-us-header {
  margin-bottom: 56px;
}

/* 副標題（英文 + 亮綠小圓點） */
.custom-sub-title-light {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--custom-primary); /* 亮螢光綠 #DCF763 */
  letter-spacing: 1.5px;
  margin-bottom: 12px;
}

.custom-icon-badge-dot {
  font-size: 12px;
}

.custom-sub-title-zh-light {
  color: var(--custom-white);
  font-weight: 500;
  opacity: 0.9;
}

/* 主標題 */
.custom-section-title-light {
  font-size: 36px;
  font-weight: 800;
  color: var(--custom-white) !important;
  line-height: 1.35;
  margin: 0;
  letter-spacing: 0.5px;
}

/* --------------------------------------------------------------------------
   4 大特點欄位 (CSS Grid Layout)
   -------------------------------------------------------------------------- */
.custom-why-us-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0; /* 使用 border 做為間隔線 */
}

.custom-why-us-item {
  padding: 0 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* 第一個項目左邊不設邊距 */
.custom-why-us-item:first-child {
  padding-left: 0;
}

/* 項目之間右側加入細緻半透明垂直分隔線 */
.custom-why-us-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 10%;
  height: 80%;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.2); /* 白半透明線條 */
}

/* 亮綠圓形 Icon 徽章 */
.custom-why-us-icon {
  width: 64px;
  height: 64px;
  background-color: var(--custom-primary); /* 亮綠色背景 #DCF763 */
  color: var(--custom-dark);           /* 圖示深灰色 */
  border-radius: 50%;                     /* 正圓形 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 24px;
  transition: var(--custom-transition);
  box-shadow: 0 4px 15px rgba(220, 247, 99, 0.25);
}

/* Hover 懸停時 Icon 微晃動與放大 */
.custom-why-us-item:hover .custom-why-us-icon {
  transform: scale(1.1) translateY(-4px);
  background-color: var(--custom-primary-hover);
}

.custom-why-us-item-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--custom-white) !important;
  margin-top: 0;
  margin-bottom: 12px;
}

.custom-why-us-item-desc {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.75); /* 輕微透明白字 */
  line-height: 1.65;
  margin: 0;
}

/* --------------------------------------------------------------------------
   響應式斷點設定 (RWD)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .custom-why-us-grid {
    grid-template-columns: repeat(2, 1fr); /* 平板端改為 2 欄 2 列 */
    gap: 40px 24px;
  }

  .custom-why-us-item {
    padding: 0;
  }

  /* 平板端隱藏垂直線 */
  .custom-why-us-item:not(:last-child)::after {
    display: none;
  }

  .custom-section-title-light {
    font-size: 28px;
  }
}

@media (max-width: 576px) {
  .custom-why-us-grid {
    grid-template-columns: 1fr; /* 手機端改為單欄垂直排列 */
    gap: 32px;
  }

  .custom-br-desktop {
    display: none; /* 手機端自動換行，隱藏強制換行標籤 */
  }

  .custom-section-title-light {
    font-size: 24px;
  }

  .custom-why-us-overlay {
    /* 手機端加深背景遮罩以確保文字清晰 */
    background: rgba(44, 56, 66, 0.92);
  }
}

/* ==========================================================================
   服務流程 4 步驟 (Service Process) 模組專屬樣式
   ========================================================================== */
/* 區塊整體設定 */
.custom-process-section {
  background-color: var(--custom-bg-light); /* 採用全域淺米灰底色 #F1F2EE */
  padding: 60px 0;
}

/* 主容器：採用 Flexbox 連結左側標題與右側流程欄位 */
.custom-process-wrapper {
  display: flex;
  align-items: center;
  gap: 32px;
}

/* --------------------------------------------------------------------------
   左側標題區域
   -------------------------------------------------------------------------- */
.custom-process-header {
  flex: 0 0 240px;                        /* 固定左側標題區域寬度 */
  display: flex;
  flex-direction: column;
}

.custom-sub-title {
  font-size: 13px;
  font-weight: 800;
  color: #a4ce02;                         /* 專屬副標題亮綠色 */
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.custom-sub-title-zh {
  color: var(--custom-gray);
  margin-left: 4px;
  font-weight: 500;
}

.custom-section-title {
  font-size: 28px;
  font-weight: 900;
  color: var(--custom-dark);
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.custom-process-header-desc {
  font-size: 13px;
  color: var(--custom-gray);
  margin: 0;
  letter-spacing: 0.5px;
}

/* --------------------------------------------------------------------------
   右側 4 步驟流程網格
   -------------------------------------------------------------------------- */
.custom-process-grid {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 個別步驟與箭頭之外層 Wrapper */
.custom-process-item {
  display: flex;
  align-items: center;
  flex: 1;
}

/* 步驟卡片本體 */
.custom-process-card {
  position: relative;
  background-color: var(--custom-white);
  border-radius: var(--custom-radius-md); /* 16px 圓角 */
  padding: 24px 16px 20px 16px;
  text-align: center;
  flex: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);/* 輕微圓角陰影 */
  transition: var(--custom-transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 250px;
}

/* 卡片 Hover 懸停上浮效果 */
.custom-process-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--custom-shadow-lg);
}

/* --------------------------------------------------------------------------
   數字徽章 (左上角懸浮圓圈)
   -------------------------------------------------------------------------- */
.custom-process-number {
  position: absolute;
  top: -12px;
  left: 12px;
  width: 32px;
  height: 32px;
  background-color: var(--custom-primary); /* 亮螢光綠 #DCF763 */
  color: var(--custom-dark);               /* 深色數字 */
  border-radius: 50%;                     /* 正圓形 */
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* 圖示風格 */
.custom-process-icon {
  font-size: 38px;
  color: var(--custom-dark);               /* 深石墨灰圖示 */
  margin-top: 4px;
  margin-bottom: 12px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-process-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--custom-dark);
  margin: 0 0 8px 0;
}

.custom-process-desc {
  font-size: 16px;
  color: var(--custom-gray);
  line-height: 1.5;
  margin: 0;
}

/* --------------------------------------------------------------------------
   向右流程箭頭 (連接線)
   -------------------------------------------------------------------------- */
.custom-process-arrow {
  color: #9aa4a6;
  font-size: 16px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   響應式斷點設定 (RWD)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .custom-process-wrapper {
    flex-direction: column;              /* 平板端改為垂直分隔：上方標題，下方步驟 */
    align-items: stretch;
    gap: 32px;
  }

  .custom-process-header {
    flex: none;
    text-align: center;                  /* 標題置中 */
  }

  .custom-process-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);/* 步驟轉為 2 欄 2 列 */
    gap: 28px 20px;
  }

  /* 平板端隱藏橫向箭頭 */
  .custom-process-arrow {
    display: none;
  }
}

@media (max-width: 576px) {
  .custom-process-section {
    padding: 40px 0;
  }

  .custom-process-grid {
    grid-template-columns: 1fr;          /* 手機端單欄垂直排列 */
    gap: 24px;
  }

  /* 在手機端加入向下引導箭頭視覺 */
  .custom-process-item:not(:last-child) .custom-process-card::after {
    content: "\f078";                     /* Font Awesome 向下箭頭 unicode */
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    color: #9aa4a6;
    font-size: 12px;
    z-index: 2;
  }
}

/* --------------------------------------------------
 *  footer頁尾外層與背景圖層佈局
 * -------------------------------------------------- */
.custom-footer-section {
  position: relative;
  padding: 60px 20px 40px 20px;
  color: #ffffff;
  border-top: 3px solid var(--custom-accent-green, #a3e635); /* 頁尾頂部質感飾線 */
}

/* --------------------------------------------------
 * 2. 三欄式主要容器 Flex 佈局
 * -------------------------------------------------- */
.custom-footer-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

/* --------------------------------------------------
 * 3. 左側標題與手繪標籤
 * -------------------------------------------------- */
.custom-footer-left {
  flex: 1.2;
  min-width: 280px;
}

.custom-badge-tag {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  color: var(--custom-accent-green, #a3e635);
  position: relative;
  margin-bottom: 12px;
  letter-spacing: 1px;
}

/* 手繪綠色底線裝飾 */
.custom-badge-tag::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--custom-accent-green, #a3e635);
  border-radius: 2px;
  opacity: 0.8;
}

.custom-footer-title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.4;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.5px;
}

/* --------------------------------------------------
 * 4. 中間聯絡資訊清單（含兩側垂直分割線）
 * -------------------------------------------------- */
.custom-footer-middle {
  flex: 1.3;
  padding: 0 30px;
  border-left: 1px solid var(--custom-divider-color, rgba(255, 255, 255, 0.15));
  border-right: 1px solid var(--custom-divider-color, rgba(255, 255, 255, 0.15));
}

.custom-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.custom-contact-item {
  display: flex;
  align-items: center;
  font-size: 15px;
  line-height: 1.5;
}

.custom-contact-icon {
  color: var(--custom-accent-green, #a3e635);
  width: 24px;
  font-size: 18px;
  text-align: center;
  margin-right: 10px;
  flex-shrink: 0;
}

.custom-contact-label {
  color: rgba(255, 255, 255, 0.85);
  width: 80px;
  flex-shrink: 0;
}

.custom-contact-value {
  color: #ffffff;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

a.custom-contact-value:hover {
  color: var(--custom-accent-green, #a3e635);
  text-decoration: underline;
}

/* --------------------------------------------------
 * 5. 右側按鈕群與版權宣告
 * -------------------------------------------------- */
.custom-footer-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 260px;
}

.custom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: var(--custom-btn-radius, 50px);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.custom-btn-icon {
  font-size: 20px;
  margin-right: 10px;
}

/* 亮綠色實心按鈕 */
.custom-btn-primary {
  background-color: var(--custom-accent-green, #a3e635);
  color: var(--custom-dark) !important;
  border: 2px solid var(--custom-accent-green, #a3e635);
  box-shadow: 0 4px 15px rgba(163, 230, 53, 0.25);
}

.custom-btn-primary:hover {
  background-color: #b8f24a;
  border-color: #b8f24a;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(163, 230, 53, 0.4);
}

/* 透明外框按鈕 */
.custom-btn-outline {
  background-color: transparent;
  color: #ffffff;
  border: 2px solid var(--custom-btn-border, rgba(255, 255, 255, 0.6));
}

.custom-btn-outline:hover {
  color: #ffffff;
  border-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

/* 版權宣告樣式 */
.custom-copyright {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  margin-top: 8px;
  letter-spacing: 0.5px;
}

/* --------------------------------------------------
 * 6. RWD 響應式斷點調整
 * -------------------------------------------------- */
/* 平板尺寸 (992px 以下) */
@media (max-width: 992px) {
  .custom-footer-wrapper {
    flex-direction: column;
    text-align: center;
    gap: 25px;
  }

  .custom-footer-middle {
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--custom-divider-color, rgba(255, 255, 255, 0.15));
    border-bottom: 1px solid var(--custom-divider-color, rgba(255, 255, 255, 0.15));
    padding: 20px 0;
    width: 100%;
  }

  .custom-contact-list {
    align-items: center;
  }

  .custom-contact-item {
    justify-content: center;
  }

  .custom-footer-right {
    width: 100%;
    max-width: 380px;
  }

  .custom-br-desktop {
    display: none;
  }
}

/* 手機尺寸 (576px 以下) */
@media (max-width: 576px) {
  .custom-footer-section {
    padding: 40px 15px 30px 15px;
  }

  .custom-footer-title {
    font-size: 20px;
  }

  .custom-contact-item {
    font-size: 14px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .custom-contact-label {
    width: auto;
    margin-right: 6px;
  }

  .custom-btn {
    font-size: 15px;
    padding: 10px 18px;
  }
}

/*================================================
    內頁
  ================================================*/
/* --------------------------------------------------
 * 內頁-齊上服務 關於我們專用區塊 
 * -------------------------------------------------- */
.custom-sp-about-section {
  padding: 60px 0;
  background-color: #ffffff;
}

.custom-sp-about-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr; /* 左右雙欄比例 */
  gap: 50px;
  align-items: center;
}

.custom-sp-about-media {
  position: relative;
  width: 100%;
  height: 100%;
}

/* 品質標籤徽章 */
.custom-sp-about-badge {
  position: absolute;
  bottom: -20px;
  right: 20px;
  background-color: var(--custom-sp-bg-dark, #121c28);
  color: #ffffff;
  padding: 15px 22px;
  border-radius: var(--custom-sp-radius, 12px);
  border-left: 4px solid var(--custom-sp-primary-green, #84cc16);
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.custom-sp-about-badge-icon {
  font-size: 24px;
  color: var(--custom-sp-primary-green, #84cc16);
}

.custom-sp-about-badge span {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

/* 文案與標題樣式 */
.custom-sp-about-header {
  margin-bottom: 25px;
}

.custom-sp-about-subtitle {
  font-size: 13px;
  font-weight: 800;
  color: var(--custom-sp-primary-green, #84cc16);
  letter-spacing: 2px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 5px;
}

.custom-sp-about-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--custom-sp-bg-dark, #121c28);
  margin: 0 0 15px 0;
  line-height: 1.4;
}

.custom-sp-about-line {
  width: 60px;
  height: 4px;
  background-color: var(--custom-sp-primary-green, #84cc16);
  border-radius: 2px;
}

.custom-sp-about-paragraph {
  font-size: 16px;
  color: #444444;
  margin-bottom: 18px;
}

.custom-sp-about-highlight {
  font-size: 17px;
  color: var(--custom-sp-bg-dark, #121c28);
  background-color: rgba(132, 204, 22, 0.1);
  padding: 15px 20px;
  border-radius: 8px;
  border-left: 3px solid var(--custom-sp-primary-green, #84cc16);
}

.custom-sp-about-subblock {
  margin-top: 25px;
}

.custom-sp-about-subtitle-inner {
  font-size: 20px;
  font-weight: 700;
  color: var(--custom-sp-bg-dark, #121c28);
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.custom-sp-about-check-icon {
  color: var(--custom-sp-primary-green, #84cc16);
}

.custom-sp-about-note {
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px dashed #e2e8f0;
  font-size: 15px;
  color: #555555;
}

/* --------------------------------------------------
 * 內頁-齊上服務 服務項目專用區塊
 * -------------------------------------------------- */
.custom-sp-services-section {
  padding: 3em 0;
  background-color: var(--custom-sp-bg-gray, #f8fafc);
  margin: 0 -1em;
}

.custom-sp-services-header {
  text-align: center;
  margin-bottom: 45px;
}

.custom-sp-services-subtitle {
  font-size: 13px;
  font-weight: 800;
  color: var(--custom-sp-primary-green, #84cc16);
  letter-spacing: 2px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 5px;
}

.custom-sp-services-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--custom-sp-bg-dark, #121c28);
  margin: 0 0 15px 0;
}

.custom-sp-services-line {
  width: 60px;
  height: 4px;
  background-color: var(--custom-sp-primary-green, #84cc16);
  border-radius: 2px;
  margin: 0 auto;
}

/* Grid & 等高卡片核心 (align-items: stretch) */
.custom-sp-services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 欄排列 */
  gap: 30px;
  align-items: stretch; /* 強制所有卡片拉伸至完全等高 */
}

.custom-sp-service-card {
  background-color: #ffffff;
  border-radius: var(--custom-sp-radius, 12px);
  border: 1px solid var(--custom-sp-border-color, #e2e8f0);
  box-shadow: var(--custom-sp-shadow, 0 5px 20px rgba(0, 0, 0, 0.04));
  padding: 35px;
  display: flex;
  flex-direction: column; /* 允許內部組件垂直延伸 */
  transition: all 0.3s ease;
}

.custom-sp-service-card:hover {
  transform: translateY(-6px);
  border-color: var(--custom-sp-primary-green, #84cc16);
  box-shadow: 0 15px 30px rgba(18, 28, 40, 0.1);
}

.custom-sp-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.custom-sp-step-badge {
  font-size: 24px;
  font-weight: 900;
  color: var(--custom-sp-primary-green, #84cc16);
  background-color: rgba(132, 204, 22, 0.12);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-sp-icon-box {
  font-size: 26px;
  color: var(--custom-sp-bg-dark, #121c28);
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background-color: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.custom-sp-service-card:hover .custom-sp-icon-box {
  background-color: var(--custom-sp-bg-dark, #121c28);
  color: var(--custom-sp-primary-green, #84cc16);
}

.custom-sp-card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* 吸附剩餘空間以填滿高度 */
}

.custom-sp-card-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--custom-sp-bg-dark, #121c28);
  margin: 0 0 6px 0;
}

.custom-sp-card-subtitle {
  font-size: 15px;
  font-weight: 600;
  color: var(--custom-sp-primary-green, #84cc16);
  margin: 0 0 15px 0;
}

.custom-sp-card-desc {
  font-size: 15px;
  color: #555555;
  margin: 0 0 20px 0;
  line-height: 1.7;
}

.custom-sp-feature-box {
  margin-top: auto; /* 將重點推送至卡片底部保持水平對齊 */
  padding-top: 18px;
  border-top: 1px dashed #e2e8f0;
}

.custom-sp-feature-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--custom-sp-bg-dark, #121c28);
  margin-bottom: 10px;
}

.custom-sp-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 15px;
}

.custom-sp-feature-list li {
  font-size: 14px;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 6px;
}

.custom-sp-feature-list li i {
  color: var(--custom-sp-primary-green, #84cc16);
  font-size: 12px;
}

/* --------------------------------------------------
 * 4. RWD 響應式斷點 (Responsive Breakpoints)
 * -------------------------------------------------- */
/* 平板斷點 (992px 以下) */
@media (max-width: 992px) {
  .custom-sp-about-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .custom-sp-services-grid {
    grid-template-columns: 1fr; /* 切換為單欄模式 */
  }

  .custom-sp-about-title {
    font-size: 24px;
  }

  .custom-sp-services-title {
    font-size: 26px;
  }
}

/* 手機斷點 (576px 以下) */
@media (max-width: 576px) {
  .custom-sp-about-section, 
  .custom-sp-services-section {
    padding: 40px 0;
  }

  .custom-sp-service-card {
    padding: 25px;
  }

  .custom-sp-feature-list {
    grid-template-columns: 1fr;
  }

  .custom-sp-about-badge {
    right: 15px;
    padding: 10px 15px;
  }
}

/* 下排浮動頁籤連結 */
#wrap-fmenu{
   max-width:1920px;
    width:100%;
    margin:0px auto;
    display:block;
}
.fMenu{
   background-color:#441506;
   display:block;
   position:fixed;
   width:100%;
   margin:0 auto;
   z-index:100;
   color:#FFF;
   left:0;
   bottom:0;
}
.fMenu ul li{
    letter-spacing:1.5px;
    float:left;
    width:50%;
    border-left:1px solid #fff;
    box-sizing:border-box;
    color:#FFF;
    min-height: 90px; /*最小高度*/
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.fMenu ul li:first-child{
	border:none;
}
.fMenu ul li a{
    display:block;
    padding: 10px 10px 0 10px;
    font-size: clamp(12px, 2vw, 16px);
    color:#FFF;
    text-align:center;
    box-sizing:border-box;
    letter-spacing:0px;
    line-height: 1.2;
}
.fMenu ul li a i{
    display:block;
    font-size: clamp(20px, 3vw, 24px);
    color:#FFF;
    margin: 0 auto;
}

/*避免遮到footer版權服務文字*/
body[data-type="fullpage"] .container #footer-service { padding: 15px 15px 100px 15px; ; }