:root{
  --primary:#0f4f88;
  --primary-2:#0b3e6d;
  --text:#1b1b1b;
  --muted:#6b7280;
  --bg:#f5f6f8;
  --card:#ffffff;
  --shadow:0 6px 12px rgba(0,0,0,.12);
  --radius:16px;
  --container:1120px;
  --gap:20px;
  --font: system-ui, -apple-system, "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:#ffffff;
  line-height:1.7;
  min-height:100vh;            /* 讓 footer 能貼底 */
  display:flex;
  flex-direction:column;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{width:min(var(--container), calc(100%));margin:0 auto}

.topbar{
  background:var(--primary);
  color:#fff;
  position:sticky; top:0; z-index:50;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0
}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo-img{height:50px;width:auto;display:block}
.nav{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.nav a{opacity:.92;font-weight:700;font-size:18px;padding:4px 12px;border-radius:999px;transition:.15s ease}
.nav a:hover{background:rgba(255,255,255,.16);opacity:1}
.nav a.active{background:rgba(255,255,255,.16);opacity:1}

.hero {
  position: relative;           /* 讓內部絕對定位有參考 */
  background: var(--primary);   /* 保持原有藍底 */
  color: #fff;
  margin-bottom:0;
}

.hero-inner {
  position: relative;           /* 關鍵：讓文字相對於這裡定位 */
  min-height: 500px;            /* 或你想要的最小高度 */
}

.hero-media{
  position: absolute;
  inset: 0;                     /* top:0; right:0; bottom:0; left:0; */
  background:
    url("assets/hero.png") center/cover no-repeat;  /* 移除漸層，讓圖完整顯示 */
  z-index: 1;                 /* 背景在最底 */
}

.hero-media::after {      /* 用偽元素加遮罩，不影響文字 */
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(46, 46, 46, 0.058);  /* 輕黑罩，alpha 0.3~0.45 最適合 */
  z-index: 2;}

.hero-content {
  position: relative;
  z-index: 3;
  padding: 120px 40px 80px;       /* 上方大一點空間，讓文字不下沉 */
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;               /* 整體左對齊 */
}

.hero-content h1 {
  margin: 0 0 24px;
  max-width: 800px; 
  font-size: 24px;             
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);  /* 加陰影，讓白字更突出 */
}
.hero-logo {
  display: block;
  max-width: 240px;
  height: auto;
  margin-top: 2rem;
}

.hero-copy p{margin:0;opacity:.92;max-width:60ch}
.hero-cta{margin-top:16px;display:flex;gap:12px;flex-wrap:wrap}
.hero-sign{display:flex;justify-content:flex-end;opacity:.9;font-style:italic;letter-spacing:.08em}

.section{
  padding:0;
  width:100%;
}
.section:first-of-type{
  padding-top:0;
  padding-bottom:0;
  margin-top:0;
}
.section:nth-of-type(2){
  padding-bottom:0
}
.section:nth-of-type(3){
  padding-top:0;
  padding-bottom: 30px;
  background:#f5f6f8;
}
.section-title {
  margin: 0 auto 32px;  
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  color: #1b1b1b;
  padding-bottom: 1px;
  border-bottom: 3px solid var(--primary);
  display: block;            
  width: fit-content;         
}
.section-subtitle{text-align:center;margin:0 0 24px;color:var(--text)}
.card{background:#ffffff00;border-radius:var(--radius)}

.about-wrap{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:var(--gap);
  align-items:start;
  background:url("assets/about.jpg") center/cover no-repeat;
  min-height:520px
}

.about-wrap1{
  width:100%;
}

.about-img{
  border-radius:0;
  overflow:visible;
  width:95%;
  height:auto;
  background:#e0e0e0;
  margin-right:30px;
  margin-bottom:30px;
  box-shadow:20px 20px 0 0 #d0d0d0;
}

.about-img img{
  width:100%;
  height:100%;
  object-fit:cover
}
.about-content{
  padding:28px;
  height:440px; /*347*/
  overflow-y:auto
}
.about-content h2{
  margin:0 0 14px;
  font-size:26px;
  border-bottom: 3px solid var(--primary);
  width: fit-content
}
.about-content h3{
  margin:0 0 8px;
  font-size:18px;
  color:var(--primary)
}
.about-content p{
  margin:0 0 8px;
  color:#2b2b2b;
  font-size:18px
}

.banner-split{
  margin-top:0px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:var(--gap);
  align-items:stretch;
}
.banner-content{
  padding:80px 20PX 0 40PX;
  font-size:18px;
}
.banner-content.card{display:block}
.banner-content h3{margin:0 0 14px;font-size:20px}
.banner-content p{margin:0 0 32px;color:#2b2b2b}
.right{border-radius:0;overflow:hidden;min-height:320px;background:#ddd}
.banner-split img{width:100%;height:100%;object-fit:cover}

.services{
  margin-top:34px;
}
.services h3{
  text-align:center;
  margin:0 auto 32px;
  font-size:26px;
  letter-spacing:.06em;
  padding-bottom: 1px;
  border-bottom: 3px solid var(--primary);
  width: fit-content
}
.service-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px
}
.service-item{
  padding:26px 20px;
  text-align:justify;
  border-radius:8px;
  background:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  border:1px solid rgba(15,79,136,.08);
}
.service-item .icon{
  width:42px;
  height:42px;
  border-radius:14px;
  margin:0 auto 8px;
  display:grid;
  place-items:center;
  color:var(--primary);
  font-weight:900;
  
}
.service-item h4{
  margin:0 0 8px;
  font-size:20px;
  text-align:center
}
.service-item ul{
  padding: 0px 10px 40px 20px;
  margin:8px;
  text-align:left;
  color:var(--muted);
  font-size:16px
}

.gallery-block{margin:22px 0 38px}
.pills{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin:0 0 14px}
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 18px;
  border-radius:999px;
  background:rgba(60, 115, 182, 1);
  color:#fff;
  font-weight:800;
  }
.gallery{display:grid;grid-template-columns:1.12fr 1.2fr;gap:8px}
.gallery .big{border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:#ddd}
.gallery .big img{width:100%;height:100%;object-fit:cover}
.gallery .small{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gallery .small img{width:100%;height:100%;object-fit:cover;border-radius:16px;box-shadow:0 8px 22px rgba(0,0,0,.10);background:#ddd;min-height:140px}

.news-list{display:grid;gap:28px;max-width:980px;margin:0 auto}
.news-row{
  display:grid;
  grid-template-columns:1.4fr .6fr;
  gap:0;
  align-items:stretch
}
.news-content-card{
  padding:20px;
  border-radius:var(--radius) 0 0 var(--radius);
  box-shadow:var(--shadow)
}
.news-content-card h3{
  color:rgba(16, 42, 73, 1);
  margin: 12px 0 32px;    
  font-size: 18px;          
  font-weight: 900;         
  line-height: 1.3;          
}

.news-content-card p {
  margin: 0 0 16px; 
  color: #4b4b4b; 
  font-size: 16px;        
  line-height: 1.6;         
}
.news-thumb-card{border-radius:0 var(--radius) var(--radius) 0;overflow:hidden;background:#ddd;box-shadow:var(--shadow)}
.news-thumb-card img{width:100%;height:100%;object-fit:cover}
.news-meta{
  display:inline-block;
  padding:4px 18px;
  background:rgba(10, 5, 163, 0.08);
  color:rgba(20, 82, 157, 1);
  font-weight:900;
  font-size:12px;
  border-radius:999px;
  margin-bottom:8px;
}

.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--gap);align-items:center}
.contact-card{
  padding:44px 44px 44px 56px;
  border-radius:0px;
  margin-right:-110px; /* 讓左側面板往右跨出去 */
  margin-top: 32px;
  position:relative;

  z-index:1;
  box-shadow:var(--shadow);
}
.contact-title{
  margin:0 0 32px; /* 標題下方間距 */
  font-size:28px;
  font-weight:700;
  color:#1b1b1b;
  padding-bottom:1px;          /* 底線更貼近標題 */
  border-bottom:3px solid var(--primary);
  display:inline-block;
}
.contact-list{
  display:grid;
  gap:30px;
  margin-top:0
}
.contact-row{display:flex;gap:10px;align-items:center;color:#2c2c2c}
.badge{
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--primary);
  display:grid;
  place-items:center;
  color:#fff;
  font-size:20px;
  flex:0 0 auto;
  font-weight:400;
}
.badge img{
  width: 32px;
  height:32px;
  display:block;
  object-fit:contain;
}
.contact-text{
  flex:1;
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  align-items:center
}
.contact-text--stack{flex-direction:column;align-items:flex-start;gap:2px}
.contact-line{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.contact-row .label{font-weight:700;color:#1b1b1b;font-size:15px}
.contact-row a{color:#2c2c2c;text-decoration:none;line-height:1.6}
.contact-row a:hover{color:var(--primary)}
.contact-text .sep{
  opacity:.6;
  margin:0 4px; /* 加大斜線分隔的左右間距 */
}
.contact-media{
  border-radius:4px;
  overflow:hidden;
  box-shadow:var(--shadow);
  background:#ddd;
  /* 依你提供的右圖尺寸比例做固定版型（桌機） */
  width:min(880px, 100%);
  aspect-ratio: 824 / 446;
  justify-self:end;
  position:relative;
  z-index:2;             /* 蓋在左側卡片上 */
}
.contact-media img{
  width:100%;
  height:100%;
  object-fit:cover;          /* 圖片裁切填滿，避免上下留白 */
  object-position:center;    /* 置中裁切 */
  display:block;
}

.footer{background:var(--primary);color:#fff;padding:26px 0;margin-top:auto}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.footer-logo{height:50px;width:auto;display:block}
.footer-info{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;align-items:flex-end;text-align:right}
.footer-company{font-weight:700;font-size:16px;line-height:1.4}
.footer-contact{font-size:14px;line-height:1.6;opacity:.95}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .hero-sign{justify-content:flex-start}
  .hero-inner { min-height: 400px; }
  .hero-content {
    padding: 80px 30px 60px;
    text-align: center;   
  }
  .hero-content h1 {
    font-size: clamp(1.8rem, 6vw, 2.8rem);
    text-align: center;
  }
  .hero-logo {
    max-width: 180px;
    margin: 1.5rem auto 0;
  }
  .about-wrap{grid-template-columns:1fr}
  .banner-split{grid-template-columns:1fr}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:1fr}
  .news-item{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .contact-card{margin-right:0;border-radius:var(--radius)}
  .contact-media{max-width:100%}
  .hero-media{height:300px}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:20px}
}
@media (max-width:520px){
  .hero-inner { min-height: 320px; }
  .hero-content { padding: 40px 20px; }
  .hero-content h1 { font-size: 26px; line-height: 1.35; }
  .hero-logo {
    max-width: 120px;
    margin: 1rem auto 0;
  }
  .service-grid{grid-template-columns:1fr}
  .section{padding:24px 0}
  .hero-copy h1{font-size:28px}
}