*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;color:#333;background:#fff}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button{font:inherit}
.container{width:min(1280px,calc(100% - 48px));margin:0 auto}

/* header */
.site-header{background:#fff;border-top:4px solid #2e2e2e;border-bottom:1px solid #ececec}
.header-shell{height:88px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand img{width:54px;height:54px;object-fit:contain}
.brand span{display:flex;flex-direction:column}
.brand strong{font-size:17px;line-height:1.2;color:#313131;white-space:nowrap}
.brand small{font-size:8px;color:#8b8b8b;margin-top:3px;white-space:nowrap}
nav{margin-left:auto;display:flex;align-items:center;gap:22px;font-size:13px;color:#444}
nav a{position:relative;display:flex;align-items:center;height:88px;white-space:nowrap;padding:0 1px}
nav a:after{content:"";position:absolute;left:50%;bottom:17px;width:0;height:2px;background:#2d458f;transform:translateX(-50%);transition:width .2s ease}
nav a:hover,nav a.active{color:#263f8d}
nav a:hover:after,nav a.active:after{width:18px}
.search-link{font-size:20px}
.search-link:after{display:none}
.english-btn{height:30px;min-width:40px;padding:0 10px;border:1px solid #d9d9d9;border-radius:4px;display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-size:12px;color:#555}
.mobile-menu{display:none;border:0;background:#fff;font-size:24px;margin-left:auto}
.chev{display:inline-block;width:6px;height:6px;margin-left:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px);transform-origin:center}

/* hero */
.hero-slider{
  position:relative;
  width:100%;
  overflow:hidden;
  background:#111;
}
.hero-track{
  position:relative;
  width:100%;
}
.hero-slide{
  display:none;
  width:100%;
  height:min(32.76vw,520px);
  overflow:hidden;
  background:#111;
}
.hero-slide.is-active{
  display:block;
}
.hero-slide img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
.slide-arrow{
  position:absolute;
  z-index:8;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:42px;
  border:0;
  background:rgba(0,0,0,.45);
  color:#fff;
  font-size:30px;
  line-height:38px;
  cursor:pointer;
}
.slide-prev{left:10px}
.slide-next{right:10px}
.hero-dots{
  position:absolute;
  left:0;
  right:0;
  bottom:12px;
  z-index:9;
  display:flex;
  justify-content:center;
  gap:7px;
}
.hero-dots button{
  width:8px;
  height:8px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  cursor:pointer;
}
.hero-dots button.active{
  background:#fff;
}
.hero-slider.is-single .slide-arrow,
.hero-slider.is-single .hero-dots{
  display:none;
}

/* intro */
.home-intro{padding:28px 0 20px}
.intro-inner{min-height:92px;display:flex;align-items:center;justify-content:center;gap:18px}
.intro-inner img{width:66px;height:66px;object-fit:contain}
.intro-inner>div{min-width:420px}
.intro-inner span{font-size:10px;color:#253e8f;font-weight:700;letter-spacing:2px}
.intro-inner h1{font-size:28px;margin:1px 0 2px;color:#111}
.intro-inner p{font-size:12px;color:#777;margin:0}

/* TPE-style content */
.content-section{padding:42px 0 16px;background:#fff}
.content-section.compact-top{padding-top:22px}
.center-heading{text-align:center;margin-bottom:26px}
.center-heading h2{margin:0;font-size:29px;line-height:1.2;font-weight:700;color:#111}
.center-heading span{display:block;width:76px;height:1px;background:#777;margin:30px auto 0}

.card-row{position:relative;padding:0 34px}
.card-track{display:grid;gap:30px}
.card-track.three{grid-template-columns:repeat(3,1fr);max-width:1040px;margin:0 auto}
.card-track.five{grid-template-columns:repeat(5,1fr)}
.article-card{text-align:center}
.card-image{height:226px;position:relative;overflow:hidden;background:#e9edf6}
.small-card .card-image{height:145px}
.image-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px}
.image-overlay img{width:86px;height:86px;object-fit:contain;background:#fff;padding:4px}
.image-overlay small{font-size:10px;color:#fff;padding:3px 8px;background:rgba(0,0,0,.48)}
.image-overlay.mini img{width:64px;height:64px}
.article-card h3{font-size:16px;line-height:1.5;margin:14px auto 10px;min-height:48px;font-weight:500;color:#333}
.small-card h3{font-size:15px;min-height:68px}
.article-card>a{display:inline-block;font-size:11px;letter-spacing:1.4px;border-bottom:1px solid #333;padding-bottom:3px}
.row-arrow{position:absolute;top:42%;transform:translateY(-50%);border:0;background:transparent;color:#d1d1d1;font-size:38px;line-height:1;cursor:pointer;padding:0;z-index:3}
.row-arrow.left{left:0}
.row-arrow.right{right:0}

/* placeholder visual language */
.notice-a{background:linear-gradient(135deg,#31be73 0 25%,#174096 25% 52%,#54a9d8 52% 74%,#71c94f 74%)}
.notice-b{background:linear-gradient(120deg,#e8f5ff,#fff 36%,#2c70b7 36% 58%,#61c76b 58% 76%,#174096 76%)}
.notice-c{background:linear-gradient(180deg,#bcd8ea 0 50%,#e8c690 50% 68%,#273f8d 68%)}
.domestic-a{background:linear-gradient(135deg,#2fbd72,#1b8fb6,#253e8f)}
.domestic-b{background:radial-gradient(circle at center,#fff 0 22%,#253e8f 22% 35%,#fff 35% 46%,#df0029 46% 56%,#fff 56%)}
.domestic-c{background:linear-gradient(135deg,#e7f8ee,#b6e3ce 48%,#e0b95f 48%,#fff)}
.domestic-d{background:linear-gradient(120deg,#eceff8,#fff 42%,#263e8e 42% 55%,#d9e1f5 55%)}
.domestic-e{background:linear-gradient(180deg,#eaeaea,#fff 55%,#253e8f 55% 63%,#ececec 63%)}
.international-a{background:linear-gradient(135deg,#b7d8e8,#e9c9a6,#5b8c99)}
.international-b{background:linear-gradient(120deg,#eef4ff,#253e8f 40% 55%,#39b96a 55% 68%,#fff 68%)}
.international-c{background:linear-gradient(135deg,#1a3e91,#e34b35,#f5b133)}
.international-d{background:linear-gradient(135deg,#f75e42,#f3b02b,#fff)}
.international-e{background:linear-gradient(135deg,#fff,#f1f1f1 45%,#df5b2e 45% 55%,#f4b01f 55%)}

/* quick links */
.quick-section{padding:62px 0 76px}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #e5e5e5;border-left:1px solid #e5e5e5}
.quick-grid a{min-height:120px;padding:22px;border-right:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;display:flex;flex-direction:column;justify-content:flex-end;transition:.2s}
.quick-grid a:hover{background:#263e8e;color:#fff}
.quick-grid strong{font-size:17px}
.quick-grid small{font-size:9px;color:#999;letter-spacing:1px;margin-top:3px}
.quick-grid a:hover small{color:#dbe1f1}

/* footer */
.site-footer{background:#252525;color:#fff}
.footer-main{min-height:120px;display:flex;align-items:center;justify-content:space-between}
.footer-brand{display:flex;align-items:center;gap:12px}
.footer-brand img{width:58px;height:58px;background:#fff;object-fit:contain}
.footer-brand strong{display:block;font-size:14px}
.footer-brand small{display:block;font-size:8px;color:#aaa}
.footer-copy{font-size:10px;color:#999}

@media(max-width:1180px){
  .header-shell{gap:18px}
  nav{gap:16px;font-size:12px}
  .brand strong{font-size:15px}
  .card-track.five{grid-template-columns:repeat(4,1fr)}
  .card-track.five .article-card:nth-child(5){display:none}
}
@media(max-width:980px){
  .header-shell{height:80px}
  .mobile-menu{display:block}
  nav{display:none;position:absolute;left:0;right:0;top:84px;background:#fff;z-index:30;flex-direction:column;align-items:stretch;gap:0;padding:10px 20px;border-bottom:1px solid #eee}
  nav.open{display:flex}
  nav a{height:42px;border-bottom:1px solid #eee}
  nav a:after{display:none}
  
  
  
  
  .card-track.three{grid-template-columns:repeat(2,1fr)}
  .card-track.three .article-card:nth-child(3){display:none}
  .card-track.five{grid-template-columns:repeat(3,1fr)}
  .card-track.five .article-card:nth-child(4){display:none}
  .intro-inner>div{min-width:0}
}
@media(max-width:620px){
  .container{width:min(100% - 28px,1280px)}
  .brand img{width:46px;height:46px}
  .brand strong{font-size:13px}
  .brand small{font-size:7px}
  .english-btn{display:none}
  
  
  .hero-logo-block img{width:88px;height:88px}
  .hero-logo-block span{font-size:37px}
  .hero-logo-block strong{font-size:14px}
  
  .home-intro{padding-top:22px}
  .intro-inner{justify-content:flex-start}
  .intro-inner img{width:52px;height:52px}
  .intro-inner h1{font-size:19px}
  .intro-inner p{font-size:10px}
  .center-heading h2{font-size:24px}
  .center-heading span{margin-top:20px}
  .card-row{padding:0 22px}
  .card-track.three,.card-track.five{grid-template-columns:1fr}
  .card-track.three .article-card:nth-child(2),.card-track.three .article-card:nth-child(3),.card-track.five .article-card:nth-child(n+2){display:none}
  .card-image{height:210px}
  .small-card .card-image{height:190px}
  .article-card h3,.small-card h3{min-height:auto}
  .quick-grid{grid-template-columns:1fr 1fr}
  .footer-main{min-height:145px;align-items:flex-start;flex-direction:column;justify-content:center;gap:14px}
}

/* Banner sizing
   Desktop/tablet: keep original 2048:671 ratio (~3.05:1).
   Mobile: same ratio, so the complete artwork remains visible without forced cropping. */
@media(max-width:768px){
  .hero-slide{
    height:auto;
    aspect-ratio:2048 / 671;
  }
  .hero-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
}

@media(max-width:620px){
  .slide-arrow{
    width:28px;
    height:36px;
    font-size:25px;
  }
  .slide-prev{left:4px}
  .slide-next{right:4px}
  .hero-dots{bottom:7px}
}