*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Inter', 'Noto Sans TC',sans-serif;
}

body{
    background:white;
    color:#333;
}
/* background:#f5f7fa; */

/* ===== Header ===== */

header{
    background:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    position:sticky;
    top:0;
    z-index:1000;
}

.navbar{
    width:1600px; /* 1200px */
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 0;
}

.logo{
    font-size:40px;
    font-weight:bold;
    color:#d71920;
}

.logo span{
    color:#004a99;
    display:block;
    font-size:18px;
}

.menu{
    display:flex;
    list-style:none;
    gap:40px;
}

.menu a{
    text-decoration:none;
    color:#333;
    font-weight:600;
}

.menu a:hover{
    color:#0b4ea2;
}

/* 基礎選單樣式 */
.nav-menu {
	list-style: none;
	display: flex;
	gap: 40px;
}
/* 
	gap: 30px;
	padding: 0;
	margin: 50px;	
	font-family: Arial, sans-serif; 
*/


.nav-item {
	position: relative;
}

.nav-link {
	text-decoration: none;
	color: #333;
	font-size: 18px;
	font-weight: 500;
	padding: 8px 0;
	display: block;
}
.nav-link2 {
	text-decoration: none;
	color: #333;
	font-size: 18px;
	font-weight: 500;
	padding: 8px 0;
	display: block;
}

/* 核心：使用偽元素 ::after 製作底線效果 */
.nav-link::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background-color: #007bff; /* 底線顏色 */
	transform: scaleX(0);       /* 預設隱藏（縮小至 0） */
	transform-origin: bottom right;
	transition: transform 0.3s ease; /* 動態滑出效果 */
}

/* 滑鼠懸停與點擊選取後的底線狀態 */
.nav-link:hover::after,
.nav-link.active::after {
	transform: scaleX(1);       /* 顯示底線（放大至 1） */
	transform-origin: bottom left;
}

/* 已選取項目的文字顏色 */
.nav-link.active {
	color: #007bff; 
}

/* 核心：使用偽元素 ::after 製作底線效果 */
.nav-link2::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background-color: #007bff; /* 底線顏色 */
	transform: scaleX(0);       /* 預設隱藏（縮小至 0） */
	transform-origin: bottom right;
	transition: transform 0.3s ease; /* 動態滑出效果 */
}

/* 滑鼠懸停與點擊選取後的底線狀態 */
.nav-link2:hover::after,
.nav-link2.active::after {
	transform: scaleX(1);       /* 顯示底線（放大至 1） */
	transform-origin: bottom left;
}

/* 已選取項目的文字顏色 */
.nav-link2.active {
	color: #007bff; 
}

/* ===== Hero ===== */

.hero{
    height:650px;	
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
}


/*
.hero{
    height:400px; 
    background:    
    url('images/官網首頁.png')
    center/cover;
}

*/

.hero-content{
    width:1600px; /* 1200px */
    margin:auto;
    height:100%;
    display:flex;
    align-items:center;
}

.hero-text{
    max-width:600px;
}

.hero-small{
    color:#6c7a89;
    letter-spacing:2px;
    margin-bottom:20px;
	font-weight: bold;
}

.hero h1{
    font-size:64px;
    color:#1b315a;
    line-height:1.3;
}

.hero p{
    margin-top:25px;
    line-height:2;
    font-size:18px;
}

.btn{
    display:inline-block;
    margin-top:35px;
    padding:14px 40px;
    background:#163760;
    color:white;
    text-decoration:none;
}

.btn2{   
    margin-top:35px;
    padding:14px 40px; 
	display: inline-block;
    background-color: #ffffff;    /* 白底 */
    border: 2px solid #000000;    /* 黑框：2px 粗細、實線、黑色 */
    color: #000000;               /* 文字顏色：黑色 */
    text-decoration: none;        /* 移除超連結底線 (若為 <a> 標籤) */
    padding: 10px 20px;           /* 內距：上下 10px，左右 20px (撐開框框空間) */	
}

.btn3{         
    background:#082449
    color:white; 
	display: inline-block;
	background-color: #082449;    /* 白底 */
	border: 2px solid #8EA0B2;    /* 黑框：2px 粗細、實線、黑色 */	
	text-decoration: none;        /* 移除超連結底線 (若為 <a> 標籤) */
	padding: 10px 60px;           /* 內距：上下 10px，左右 20px (撐開框框空間) */
}

/* ===== Section ===== */

section{
    padding:80px 0;
}

.container{
    width:1600px; /* 1200px */
    margin:auto;
}

.container2{
    width:1600px; /* 1200px */
    margin:auto;
}

/* 基本設定：圖片預設無透明度，並加上平滑過渡效果 */
.container2 img {
  width: 30%; /* 依版面需求調整寬度 */
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
}

/* 當滑鼠移到整個容器時，將所有圖片淡化為 0.3 (30% 不透明度)
.container2:hover img {
  opacity: 0.3;
}
 */
 
/* 當滑鼠單獨移到某張圖片上方時，該張圖片恢復為 1 (完全不透明)
.container2 img:hover {
  opacity: 1;
}
 */ 


/* 當滑鼠進入「總容器」時，把所有區塊都變淡 */
.container2:hover .category-card {
  opacity: 0.3;
}

/* 當滑鼠指到「特定區塊」時（不論是圖片或文字），該區塊恢復完全不透明 */
.container2 .category-card:hover {
  opacity: 1;
}


.section-title{
    text-align:center;
    font-size:42px;
    color:#163760;
    margin-bottom:60px;
}


.section-title2{        
    color:#163760;
    margin-bottom:60px;
	padding-left: 15px; 
	position: relative;
}

.section-title2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* 讓線條垂直置中對齊文字 */
  width: 5px; /* 線條寬度 */
  height: 80%; /* 線條高度 */
  background-color: #163760;  /* 線條顏色 #ff5722; */
  border-radius: 2px; /* 讓線條邊緣變圓滑 */
}



.section-title:after{
    content:"";
    display:block;
    width:80px;
    height:4px;
    background:#163760;
    margin:20px auto;
}

.center-floating-icon {
  /* position: absolute;  絕對定位 */
  z-index: 2; /* 確保圖案在最上層 */
  /* top: 50%;  先移至容器正中央 */
  /* transform: translate(-50%, -50%);  精準對齊中心點 */
}


/* ===== Services ===== */

.services{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.card{
    background:white;
    overflow:hidden;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
    transition:.3s;
}

.card:hover{
    transform:translateY(-8px);
}

.card img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.card-body{
    padding:25px;
    text-align:center;
}

.card-body h3{
    color:#163760;
    margin-bottom:15px;
}




/* ===== Advantages ===== */

.advantages{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:40px;
}

.advantages2{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:40px;
}


.advantages3{
    display:grid;
    grid-template-columns:repeat(4,1fr);
	gap:40px;	
}

.adv{
	display:flex;
    text-align:center;
    background:white;
    padding:40px 20px;
	gap: 12px;		
}


.adv2 { 
  margin: 0 auto;
  padding: 20px;  
}

.adv3 {	  
	display:flex;
	text-align:center;
	background:white;
	padding:40px 20px;
	gap: 12px;
   
	justify-content: center; 
	align-items: center;          /*  讓子元件在垂直方向上「置中對齊」，確保各區塊對齊同一水平線 */
	position: relative; /* 為了讓偽元素定位基準正確 */

}

  /* 移除最後一個區塊的隔線 */
.adv3:last-child::after {
    display: none;
}

  /* 透過偽元素繪製半高垂直隔線 */
  .adv3::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px; /* 隔線寬度 */
    height: 50%; /* 隔線高度為父層的一半 */
    background-color: #ccc; /* 隔線顏色 */
  }

.icon{
    font-size:50px;
    color:#163760;
    margin-bottom:20px;
}

.icon3{
    font-size:50px;
    color:#163760;
	align-items: center;
}

.display-h{
	display:flex;
	color:#163760;	
	align-items: flex-start;	
}


.display-v{
	display:flex;
	color:#163760;
	flex-direction: column;
	align-items: flex-start;	
}

.display-v2{
	display:flex;
	color:#163760;
	flex-direction: column;
	align-items: flex-start; 	   
	justify-content: center;  
	height: 250px;            /* 必須設定容器高度 */	
	text-align: start;
}


.adv h4{
    margin-bottom:15px;
}


/* 上半部：使用 Flexbox 左右排列 */
.top-section {
  display: flex;
  align-items: center; /* 上下垂直置中 */
  margin-bottom: 20px;
}

/* 上半部左邊 (圖示) */
.left-icon {
  flex: 0 0 100px; /* 固定寬度 100px */
  margin-right: 20px;
}
.left-icon img {
  width: 100%;
  height: auto;
}

/* 上半部右邊 (文字) */
.right-text {
  flex: 1; /* 佔滿剩餘寬度 */
}

.bottom-section {
  display: flex;
  align-items: center; /* 上下垂直置中 */
  margin-bottom: 20px;
  text-align: center;
}


/* 單一欄位：佔寬 25% (扣除間距) */
.block3 {
  flex: 1 1 calc(25% - 20px);
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  /* box-shadow: 0 2px 5px rgba(0,0,0,0.1); */
  display: flex;
  flex-direction: column;
}

/* 上半區域：左右配置 */
.upper-section {
  display: flex;
  padding: 20px;
  gap: 15px;
  
  justify-content: flex-end;
  
  /* border-bottom: 1px solid #eee; */
}


/* 上半部的左區域（圖片容器）：設定為 flex 並水平置中 */
.image-wrapper {
  flex: 0 0 100px;      /* 固定左區域寬度，可依需求調整 */
  display: flex;
  /* justify-content: center;  讓圖片在左區域內水平置中 */
  align-items: center;
  
  justify-content: flex-end;

}


.upper-section img {
  width: 80px;
  height: 80px;
  object-fit: cover; 
  border-radius: 4px;
  
  align-items: center; /* 上下垂直置中 */
}

.upper-section .text-content {
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
  /* color: #333; */
  
  align-items: center; /* 上下垂直置中 */
  text-align: center; /* 文字水平置中 */
}

/* 下半區域：文字水平置中 */
.lower-section {
  padding: 20px;
  text-align: center; /* 文字水平置中 */
  font-size: 16px;
  font-weight: bold;
  
  /* color: #0066cc; */
  /* background-color: #fafafa; */
}





/* ===== Certifications ===== */

.cert-area{
    background:white;
}
/* background:#eef3f8; */

.certs{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
}

.cert{
    background:white;
    padding:30px;
    text-align:center;
}

.cert img{
    width:90px;
    margin-bottom:15px;
}




/* ===== Footer ===== */

footer{
    background:#082449;
    color:white;
    padding:60px 0;
}

.footer-grid{
    width:1600px;  /* 1200px */
    margin:auto;
    display:grid;
    /* grid-template-columns:1fr 1fr 1fr 1fr 2fr; */
	grid-template-columns:1fr 1fr 1fr 1fr;
    gap:40px;
	column-rule: 1px solid #ccc; /* 快速設定垂直分隔線 */
}

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

footer ul{
    list-style:none;
}

footer li{
    margin-bottom:10px;
}

footer a{
    color:white;
    text-decoration:none;
}

.copyright{
    text-align:center;
    margin-top:40px;
    opacity:.8;
}

.grid-container {
  display: grid;
  /* 定義 3 等份的欄位，寬度分別為 1fr */
  grid-template-columns: repeat(2, 1fr); 
  /* 定義間距 */
  gap: 10px;
  /* 清除 ul 預設的 padding 與清單符號 */
  list-style: none;
  padding: 0;
}

.grid-container li {
  background-color: #082449;
  /* padding: 10px; */
  text-align: center;
}

/* ===== Responsive ===== */

@media(max-width:1200px){

.container,
.navbar,
.footer-grid,
.hero-content{
    width:100%;
}
/* width:95%; */

.services,
.advantages,
.certs{
    grid-template-columns:repeat(2,1fr);
}

.hero h1{
    font-size:48px;
}
}

@media(max-width:768px){

.menu{
    display:none;
}

.services,
.advantages,
.certs{
    grid-template-columns:1fr;
}

.hero{
    height:500px;
}

.hero h1{
    font-size:36px;
}

}

/* =========================
   Quality Page
========================= */
/*
.quality-banner{
    background:#eef4fa;
    padding:80px 0;
}
*/
.quality-banner{
    height:400px;  /* 650px */
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
}

.quality-banner h1{
    color:#163760;
    font-size:58px;
}

.cert-summary{
    padding:80px 0;
}

.cert-icons{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:25px;
}

.cert-icon{
    background:white;
    border:1px solid #ddd;
    text-align:center;
    padding:30px;
}

.cert-icon img{
    height:80px;
    margin:auto;
}

.cert-gallery{
    background:white;
    padding:80px 0;
}
/* background:#fafafa; */

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:25px;
}

.gallery-card{
    background:white;
    border:1px solid #ddd;
	text-align:center;}

.gallery-card img{
    height:280px;
    width:100%;
    object-fit:contain;
}

.gallery-info{
    padding:20px;
	vertical-align:center;
}


/* =========================
   Product Page
========================= */

/*
.product-banner{
    background:#eef4fa;
    padding:80px 0;
}
*/

.product-banner{
    height:400px;  /* 650px */
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
}

.product-banner h1{
    color:#163760;
    font-size:58px;
}

.product-category{
    padding:80px 0;
}

.category-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.category-card{
    border:1px solid #ddd;
    background:white;
    transition:.3s;
}

.category-card:hover{
    transform:translateY(-5px);
}

.category-card.active{
    border:3px solid #163760;
}

.category-card img{
    height:220px;
    width:100%;
    object-fit:cover;
}

.category-card h3{
    padding:15px;
    color:#163760;
}

.category-card p{
    padding:0 15px 20px;
}

/* =========================
   Product Gallery
========================= */

.product-section{
    background:white;
    padding:80px 0;
}
/* background:#fafafa; */

.product-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.product-card{
    background:white;
    border:1px solid #ddd;
    text-align:center;
    padding:20px;
}

.product-card img{
    height:180px;
    object-fit:contain;
}

/* 網格佈局：水平分為四個區塊 */
.container4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	max-width: 1600px;
	margin: 0 auto;
	/* background-color: #D7DEE5; */
	background-color: #F5F5F5;
}

/* 每個區塊設定 */
.block4 {
	background-color: #ffffff;
	/* border: 1px solid #ddd; */
	/* border-radius: 8px; */
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background-color: #F5F5F5;
}

/* == 上方的區域 == */
.block-top {
	display: flex;
	height: 120px; /* 200px根據需求調整高度 */
	/* border-bottom: 1px solid #eee; */
}

/* 上面區域 - 左邊：圖垂直置中靠右 */
.content-left {
	flex: 1;
	display: flex;
	align-items: flex-end; /* 垂直置中 */
	justify-content: flex-end; /* 水平靠右 */
	padding-right: 15px;
}

.content-left img {
	width: 108px;   /* 96px */
	height: 108px;
	object-fit: contain;
}

/* 上面區域 - 右邊：文字垂直置中靠左 */
.content-right {
	flex: 1;
	display: flex;
	align-items: center; /* 垂直置中 */
	justify-content: flex-start; /* 水平靠左 */
	padding-left: 15px;
	font-size: 16px;
	color: #333;
}

/* == 下面的區域 == */
.block-bottom {
	flex: 1;
	min-height: 50px ; /* 100px根據需求調整高度 */
	display: flex;
	align-items: flex-start; /* 垂直置中 */
	justify-content: center; /* 水平置中 */
	padding: 15px;
	text-align: center;
	color: #666;
	/* background-color: #fafafa; */
}





/* =========================
   Custom Capability
========================= */

.custom-section{
    padding:80px 0;
}

.custom-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.custom-item{
    background:white;
    border:1px solid #ddd;
    text-align:center;
    padding:30px;
}

.custom-item .icon{
    font-size:48px;
    margin-bottom:15px;
}


/* =========================
   Company Banner
========================= */

.company-banner{
    /*background:#eef4fa;*/
    /*padding:80px 0;*/	
	
	height:400px;  /* 650px */
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
	
}


.company-banner-grid{
    display:grid;
    /*grid-template-columns:1fr 1fr;*/
    gap:50px;
    align-items:center;
}

.company-banner h1{
    font-size:58px;
    color:#163760;
    margin-bottom:20px;
}

/* =========================
   About Company
========================= */

.about-company{
    padding:80px 0;
}

.about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;
}

.about-grid h2{
    color:#163760;
    margin-bottom:20px;
}

/* =========================
   Company Statistics
========================= */

.company-statistics{
    background:white;
    padding:80px 0;
}
/* background:#f7f9fc; */
 
.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.stat-card{
    background:white;
    text-align:center;
    padding:40px 20px;
}

.stat-card .number{
    font-size:48px;
    color:#163760;
    font-weight:bold;
}

.stat-card .title{
    margin-top:10px;
}

/* =========================
   Vision
========================= */

.vision-section{
	background:white;
    padding:80px 0;
}

.vision-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.vision-card{
    background:white;
    border:1px solid #ddd;
    padding:35px;
}

.vision-card h3{
    color:#163760;
    margin-bottom:15px;
}

/* =========================
   Company Info
========================= */

.company-information{
    background:white;
    padding:80px 0;
}
/* background:#f7f9fc; */

.info-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
}

.info-table{
    width:100%;
    border-collapse:collapse;
}

.info-table th{
    background:#163760;
    color:white;
    width:180px;
}

.info-table th,
.info-table td{
    border:1px solid #ddd;
    padding:15px;
}

.factory-image{
    width:100%;
    height:100%;
    object-fit:cover;
}