/*根元素*/
:root{
--white:#ffffff; /* 背景(白) var(--white)*/
--black:#000000; /* 段落文字  var(--black)*/
--card:#f1f1f1; /* 卡片底(淺灰) var(--card)*/
--text:#2C3036; /* 主要文字 var(--text)*/
--text2:#E60012; /* h3次要文字 var(--text2)*/
--text3:#1A1D20; /* h4次要文字 var(--text3)*/
--text4:#F8F9FA; /* 次要文字 var(--text4)*/
--shadow: 0 5px 10px rgba(0,0,0,.25); /* 陰影 var(--shadow)*/
--gradient: linear-gradient(120deg, var(--text) 0%, var(--text3) 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;
}

.topnavbar .container {
  padding: 0;  /* 清除內距 */
  display: flex;
  align-items: flex-end;  /* center上下置中; flex-end靠下; */
  justify-content: space-around; /* 平均分配 */

  text-align: center;
}

.topnavbar .container #logo, 
.topnavbar .container #nav { 
  width: 100%; 
}

@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(--text2);/*頁籤滑過文字顏色*/
}
#nav ul li.current a {
    color: var(--text);/*頁籤按下後文字顏色*/
    font-weight: 500;
}

#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-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);
}

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; } /*首頁-全編輯欄容器拉寬*/


/* ==========================================================================
   通用 CSS 變數定義 (Design Tokens)
   ========================================================================== */
:root {
  /* 品牌色系設定 */
  --custom-primary: #2C3036;       /* 主色：深鈦灰 (鋼鐵重工業視覺) */
  --custom-accent: #E60012;        /* 點綴/CTA色：工業亮紅 (按鈕、Icon亮點、Hover狀態) */
  --custom-accent-hover: #c4000f;  /* CTA Hover 懸停加深紅 */
  
  /* 背景色系設定 */
  --custom-bg-light: #F8F9FA;      /* 輔助背景：極淺灰銀 */
  --custom-bg-dark: #1A1D20;       /* 輔助背景：炭黑 */
  --custom-bg-white: #FFFFFF;      /* 純白背景 (卡片、區塊使用) */

  /* 文字顏色 */
  --custom-text-main: #2C3036;     /* 主要內文顏色 */
  --custom-text-muted: #6C757D;    /* 次要/說明文字顏色 */
  --custom-text-light: #FFFFFF;    /* 深色背景上的亮色文字 */

  /* 邊框與陰影 */
  --custom-border-color: #E9ECEF;  /* 預設淺灰邊框 */
  --custom-radius-sm: 4px;         /* 小圓角 */
  --custom-radius-md: 8px;         /* 中圓角 */
  --custom-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);  /* 輕微卡片陰影 */
  --custom-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);/* Hover 浮起陰影 */

  /* 動畫轉場速度 */
  --custom-transition: all 0.3s ease-in-out;
}
	
/* ==========================================================================
   全站通用基礎與 Reset 樣式
   ========================================================================== */
/* 通用限寬容器 (RWD 自適應，最大寬度 1600px) */
.custom-container {
  width: 100%;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

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


/* ==========================================================================
   關於我們區塊 (About Section) 專屬樣式
   ========================================================================== */

/* 區塊整體設定 */
.custom-about-section {
  padding: 80px 0;
  background-color: var(--custom-bg-white);
  position: relative;
  overflow: hidden;
      margin: 0 -1em;
}

/* Grid 雙欄佈局 (左文字 1 : 右圖片 1) */
.custom-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* --------------------------------------------------------------------------
   左側文字內容樣式
   -------------------------------------------------------------------------- */
.custom-section-subtitle {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--custom-accent);
  letter-spacing: 2px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.custom-about-title {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--custom-primary) !important;
  line-height: 1.3;
  margin-bottom: 12px;
}

.custom-about-tagline {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--custom-accent) !important;
  margin-bottom: 24px;
  line-height: 1.4;
}

/* 段落文字 */
.custom-about-text p {
  font-size: 1rem;
  color: var(--custom-text-main);
  line-height: 1.8;
  margin-bottom: 16px;
}

.custom-about-text p:last-child {
  margin-bottom: 32px;
}

/* --------------------------------------------------------------------------
   紅框白底單一按鈕樣式
   -------------------------------------------------------------------------- */
.custom-about-actions {
  display: flex;
}

.custom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--custom-radius-sm);
  transition: var(--custom-transition);
  cursor: pointer;
  text-decoration: none;
}

/* 紅框白底按鈕 (工業亮紅外框 + 亮紅文字) */
.custom-btn-red-outline {
  background-color: var(--custom-bg-white);
  color: var(--custom-accent);
  border: 2px solid var(--custom-accent);
}

.custom-btn-red-outline:hover {
  background-color: var(--custom-accent);
  color: var(--custom-text-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(230, 0, 18, 0.25);
}

/* --------------------------------------------------------------------------
   右側圖片樣式
   -------------------------------------------------------------------------- */
.custom-about-image-wrapper {
  position: relative;
  border-radius: var(--custom-radius-md);
  overflow: hidden;
  box-shadow: var(--custom-shadow-hover);
}

.custom-about-img {
  width: 100%;
  height: 100%;
  max-height: 480px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.custom-about-image-wrapper:hover .custom-about-img {
  transform: scale(1.03); /* Hover 時圖片微微放大效果 */
}

/* --------------------------------------------------------------------------
   RWD 響應式斷點 (992px / 576px)
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  .custom-about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .custom-about-title {
    font-size: 1.85rem;
  }
}

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

  .custom-btn {
    width: 100%;
  }
}

/* ==========================================================================
   產品介紹區塊 (Products Section) 專屬樣式
   ========================================================================== */

/* 區塊整體設定 */
.custom-products-section {
  padding: 80px 0;
  background-color: var(--custom-bg-light);
  position: relative;
      margin: 0 -1em;
}

/* 標題居中樣式 */
.custom-section-header {
  text-align: center;
  margin-bottom: 50px;
}

.custom-section-subtitle {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--custom-accent);
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.custom-section-title {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--custom-primary) !important;
  margin-bottom: 16px;
}

.custom-title-line {
  width: 60px;
  height: 4px;
  background-color: var(--custom-accent);
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   卡片 Grid 網格佈局 (電腦端 3 欄排列)
   -------------------------------------------------------------------------- */
.custom-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* --------------------------------------------------------------------------
   <figure> 互動式卡片主體
   -------------------------------------------------------------------------- */
.custom-product-card {
  position: relative;
  background-color: var(--custom-bg-white);
  border-radius: var(--custom-radius-sm);
  overflow: hidden;
  box-shadow: var(--custom-shadow-sm);
  transition: var(--custom-transition);
  display: flex;
  flex-direction: column;
  margin: 0; /* 重置 figure 預設 margin */
}

/* 核心需求：絕對定位的全卡片超連結點擊層 */
.custom-product-card > a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10; /* 確保浮於最上層，整個卡片範圍皆可點擊 */
}

/* 卡片 Hover 時上浮與陰影效果 */
.custom-product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--custom-shadow-hover);
}

/* --------------------------------------------------------------------------
   卡片圖片區域與 Hover 縮放
   -------------------------------------------------------------------------- */
.custom-card-img-wrapper {
  width: 100%;
  height: 240px;
  overflow: hidden;
  position: relative;
  background-color: #EFEFEF;
}

.custom-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* Hover 時圖片放大的動態 */
.custom-product-card:hover .custom-card-img {
  transform: scale(1.06);
}

/* --------------------------------------------------------------------------
   <figcaption> 文字說明與右下角紅斜角標籤
   -------------------------------------------------------------------------- */
.custom-card-caption {
  padding: 20px 24px 24px;
  position: relative;
  background-color: var(--custom-bg-white);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 小標籤（參考範例圓角外框外觀） */
.custom-product-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--custom-accent);
  border: 1px solid var(--custom-accent);
  padding: 2px 10px;
  border-radius: 12px;
  margin-bottom: 10px;
}

/* 產品名稱 */
.custom-product-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--custom-primary) !important;
  margin: 0;
  line-height: 1.4;
  padding-right: 40px; /* 留出空間給右下角箭頭 */
}

/* 右下角紅斜角色塊 (參考設計圖右下紅角塊) */
.custom-corner-badge {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42px;
  height: 42px;
  background-color: var(--custom-accent);
  /* 利用 clip-path 切出右下三角形切角 */
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 6px;
  transition: var(--custom-transition);
}

.custom-corner-badge i {
  color: var(--custom-text-light);
  font-size: 0.85rem;
  transition: transform 0.3s ease;
}

/* Hover 時右下紅角的箭頭向右微幅推動動畫 */
.custom-product-card:hover .custom-corner-badge i {
  transform: translate(2px, -2px);
}

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

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

  .custom-products-grid {
    grid-template-columns: 1fr;
  }

  .custom-section-title {
    font-size: 1.75rem;
  }

  .custom-card-img-wrapper {
    height: 200px;
  }
}

/* ==========================================================================
   優勢特色區塊 (Why Choose Us) 專屬樣式
   ========================================================================== */

/* 區塊整體背景與間距 */
.custom-features-section {
  padding: 80px 0;
  background-color: var(--card); /* 淺灰背景 */
  position: relative;
      margin: 0 -1em;
}

/* 標題與副標題文字排版 */
.custom-features-header {
  text-align: center;
  margin-bottom: 60px;
}

.custom-features-main-title {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--custom-primary); /* 深鈦灰 */
  line-height: 1.3;
  margin-bottom: 12px;
  letter-spacing: 1px;
}

.custom-features-subtitle {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--custom-text-muted); /* 說明灰文字 */
  margin: 0;
}

/* --------------------------------------------------------------------------
   3 欄 Grid 佈局與分隔線設定
   -------------------------------------------------------------------------- */
.custom-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  position: relative;
}

/* 單個優勢卡片項目 */
.custom-feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 40px;
  position: relative;
  transition: var(--custom-transition);
}

/* 電腦端縱向分隔線 (除了最後一項以外右側加邊框) */
.custom-feature-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background-color: #DDE1E5; /* 細微的灰銀分隔線 */
}

/* --------------------------------------------------------------------------
   圓形 Icon 容器與 Hover 動態
   -------------------------------------------------------------------------- */
.custom-feature-icon-wrapper {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid var(--custom-primary); /* 外框：深鈦灰 */
  background-color: var(--custom-bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  transition: var(--custom-transition);
}

.custom-feature-icon {
  font-size: 2.5rem;
  color: var(--custom-accent); /* 內部 Icon：工業亮紅 */
  transition: var(--custom-transition);
}

/* Hover 互動效果：圓框變紅、微微上浮 */
.custom-feature-item:hover .custom-feature-icon-wrapper {
  border-color: var(--custom-accent);
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(230, 0, 18, 0.15);
}

.custom-feature-item:hover .custom-feature-icon {
  transform: scale(1.1);
}

/* --------------------------------------------------------------------------
   優勢標題與內文描述
   -------------------------------------------------------------------------- */
.custom-feature-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--custom-primary) !important;
  margin-bottom: 14px;
  line-height: 1.4;
}

.custom-feature-desc {
  font-size: 1rem;
  color: var(--custom-text-main) !important;
  line-height: 1.7;
  margin: 0;
}

/* --------------------------------------------------------------------------
   RWD 響應式斷點 (768px 以下自動轉單欄直向)
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  .custom-feature-item {
    padding: 20px;
  }
}

@media (max-width: 768px) {
  .custom-features-section {
    padding: 50px 0;
  }

  .custom-features-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* 移除電腦端直向分隔線，改為手機端底部分隔線 */
  .custom-feature-item:not(:last-child)::after {
    right: 15%;
    top: auto;
    bottom: -20px;
    height: 1px;
    width: 70%;
  }

  .custom-features-main-title {
    font-size: 1.85rem;
  }
}

/* ==========================================================================
   諮詢宣傳區 (CTA Banner) 專屬樣式
   ========================================================================== */

/* CTA 區塊主體：背景圖與相對定位 */
.custom-cta-section {
  position: relative;
  padding: 100px 0;
  background-image: url('https://static.iyp.tw/1372/files/53b8f1c3-e088-4636-8cfc-bfeadeefeadf.jpg'); /* 金屬加工/火花高質感 CC0 背景圖，可隨時替換 src */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: var(--custom-text-light);
  overflow: hidden;
      margin: 0 -1em;
}

/* 深色半透明遮罩 (讓文字與按鈕更清晰) */
.custom-cta-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(15, 23, 30, 0.92) 0%, rgba(20, 30, 40, 0.82) 50%, rgba(15, 23, 30, 0.92) 100%);
  z-index: 1;
}

/* 內容容器置中與層級調整 */
.custom-cta-section .custom-container {
  position: relative;
  z-index: 2;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px;
}

.custom-cta-content {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

/* 標題與副標題 */
.custom-cta-title {
  font-size: 2.25rem;
  font-weight: 800;
  color: #FFFFFF !important;
  margin-bottom: 16px;
  letter-spacing: 1.5px;
  line-height: 1.3;
}

.custom-cta-subtitle {
  font-size: 1.15rem;
  color: #CBD5E1; /* 淡灰藍色，增加質感與可讀性 */
  margin-bottom: 36px;
  font-weight: 400;
  line-height: 1.6;
}

/* 按鈕容器（置中） */
.custom-cta-btn-group {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 紅底主要按鈕 */
.custom-cta-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--custom-accent); /* 工業亮紅 #E60012 */
  color: #FFFFFF;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 14px 38px;
  border-radius: var(--custom-radius-sm);
  text-decoration: none;
  transition: var(--custom-transition);
  box-shadow: 0 4px 14px rgba(230, 0, 18, 0.35);
  border: 1px solid var(--custom-accent);
}

/* 按鈕右側箭頭圖示間距與動畫 */
.custom-cta-btn-icon {
  margin-left: 10px;
  font-size: 1rem;
  transition: transform 0.3s ease;
}

/* 按鈕懸停 Hover 效果 */
.custom-cta-btn-primary:hover {
  background-color: var(--custom-accent-hover);
  border-color: var(--custom-accent-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(230, 0, 18, 0.5);
  color: #FFFFFF;
}

.custom-cta-btn-primary:hover .custom-cta-btn-icon {
  transform: translateX(5px); /* 箭頭向右滑動 */
}

/* --------------------------------------------------------------------------
   RWD 響應式斷點
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .custom-cta-section {
    padding: 60px 0;
  }

  .custom-cta-title {
    font-size: 1.65rem;
  }

  .custom-cta-subtitle {
    font-size: 0.98rem;
    margin-bottom: 28px;
  }

  .custom-cta-btn-primary {
    width: 100%;
    max-width: 300px;
    padding: 12px 24px;
    font-size: 1rem;
  }
}