* { box-sizing: border-box; margin: 0; padding: 0; }
body {font-family: "PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;background: unset;background-color: #f5f7fa;color: #333333;line-height: 1.6;width: 100vw;max-width: 100vw;overflow-x: hidden;}
a { text-decoration: none; transition: all 0.3s ease; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

.wrapper{
    width: 100%;
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: unset;
    max-width: 100%;
    }
.wrapper *{ max-width: 100%;}
/* Banner  */
#banner-section {width: 100%;max-height: 640px;overflow: hidden;position: relative;box-shadow: 0 4px 15px rgba(0,0,0,0.1);margin-top: 20px;}
#banner-section img {width: 100%;object-fit: cover;transition: transform 0.5s ease;object-position: 100% 50%;}

#banner-section a{display:flex;height: 100%;}


#content-layout {width: min(1366px , 90%);margin: 100px auto;padding: 0 0%;display: flex;gap: 40px;align-items: flex-start;}

#sidebar-section {width: 280px;flex-shrink: 0;background-color: #ffffff;border-radius: 8px;box-shadow: 0 4px 20px rgba(0,0,0,0.05);overflow: hidden;align-self: flex-start;position: sticky;top: 100px;}
#sidebar-section .nav-header {background-color: #0066a1;color: #ffffff;padding: 25px 20px;display: flex;align-items: center;gap: 25px;}
#sidebar-section .nav-number { font-size: 2rem; font-weight: 900; opacity: 0.3; font-style: italic; }
#sidebar-section .nav-title-group { display: flex; flex-direction: column; }
#sidebar-section .nav-en { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; color: #a3d2f0; }
#sidebar-section .nav-tw { font-size: 1.4rem; font-weight: bold; }
#sidebar-section .nav-list-item { display: block; padding: 16px 20px; color: #555555; border-bottom: 1px solid #f0f0f0; font-weight: 500; font-size: 1.05rem; }
#sidebar-section .nav-list-item:hover,#sidebar-section .nav-list-item.active {background-color: #f4f9fd;color: #0066a1;padding-left: 28px;border-left: 4px solid #0097dc;}
#sidebar-section .nav-list{
    max-height: 500px;
    overflow-y: scroll;
}

#sidebar-section .nav-list::selection { background:rgb(126 126 126); text-shadow: none; color: rgb(126 126 126) }
#sidebar-section .nav-list::-webkit-scrollbar { width: 5px }
#sidebar-section .nav-list::-webkit-scrollbar-track { background: rgb(156 156 156),.4) }
#sidebar-section .nav-list::-webkit-scrollbar-thumb { background: rgb(73 191 245) }



#main-article-section { flex-grow: 1; background-color: #ffffff; padding: 40px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
#main-article-section .breadcrumb { font-size: 0.9rem; color: #888888; margin-bottom: 20px; }
#main-article-section .breadcrumb a { color: #0066a1; }
#main-article-section .breadcrumb a:hover { text-decoration: underline; color: #004d7a; }

#main-article-section .main-title { font-size: 2.2rem; font-weight: bold; color: #0066a1; border-bottom: 2px solid #e0e0e0; padding-bottom: 10px; margin-bottom: 20px; }
#main-article-section .sub-title-desc { display: block; font-size: 1rem; color: #666666; font-weight: normal; margin-top: 10px; line-height: 1.5; }
#main-article-section .section-heading { font-size: 1.3rem; font-weight: bold; color: #028b99; margin: 30px 0 15px; display: flex; align-items: center; }
#main-article-section .section-heading::before { content: ""; display: inline-block; width: 6px; height: 1.3rem; background-color: #028b99; margin-right: 12px; border-radius: 4px; }

#main-article-section .paragraph { font-size: 1.05rem; color: #444444; margin-bottom: 20px; text-align: justify; line-height: 1.8; }
#main-article-section .article-img { width: 100%; border-radius: 8px; margin: 20px 0; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
#main-article-section .link-highlight { color: #0066a1; font-weight: bold; text-decoration: underline; text-underline-offset: 4px; }
#main-article-section .link-highlight:hover { color: #028b99; }


#main-article-section .flex-card { display: flex; gap: 30px; align-items: center; background-color: #f9fbfc; padding: 25px; border-radius: 8px; border: 1px solid #e6f0f7; margin-top: 30px; }
#main-article-section .flex-card-img { width: 45%; flex-shrink: 0; border-radius: 6px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
#main-article-section .flex-card-content { width: 55%; }
#main-article-section .contact-phone { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; font-weight: bold; color: #0066a1; margin-top: 20px; background-color: #ffffff; padding: 10px 20px; border-radius: 30px; border: 1px solid #0066a1; width: fit-content; }
#main-article-section .contact-phone img { width: 24px; height: 24px; }


#main-article-section .client-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 25px; margin-top: 20px; }
#main-article-section .client-card { background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); transition: transform 0.3s ease,box-shadow 0.3s ease; }
#main-article-section .client-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,102,161,0.1); border-color: #a3d2f0; }
#main-article-section .card-title {font-size: 1.15rem;font-weight: bold;color: #ffffff;background-color: #028b99;padding: 8px 15px;border-radius: 4px;margin: 15px 0 40px;display: inline-block;}
#main-article-section .client-tags { display: flex; flex-wrap: wrap; gap: 10px; }
#main-article-section .tag { display: inline-block; padding: 6px 12px; background-color: #f4f9fd; color: #444444; border-radius: 20px; font-size: 0.95rem; border: 1px solid #e6f0f7; transition: all 0.3s; }
#main-article-section a.tag:hover { background-color: #0066a1; color: #ffffff; border-color: #0066a1; text-decoration: none; }


/* service */
#main-article-section .article-hero-img { width: 100%; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); margin-bottom: 30px; object-fit: cover; }
#main-article-section .service-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 25px; margin-top: 20px; }
#main-article-section .service-card { background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 25px 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); transition: transform 0.3s ease,box-shadow 0.3s ease; display: flex; flex-direction: column; align-items: center; }
#main-article-section .service-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,102,161,0.1); border-color: #a3d2f0; }
#main-article-section .card-icon-wrapper { width: 70px; height: 70px; background-color: #f4f9fd; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-bottom: 20px; border: 2px solid #e6f0f7; }
#main-article-section .service-icon { max-width: 35px; max-height: 35px; object-fit: contain; }
#main-article-section .service-links { display: flex; flex-direction: column; gap: 12px; width: 100%; }
#main-article-section .service-link { display: block; padding: 12px 15px; background-color: #f8fbff; color: #444444; border-radius: 6px; font-size: 0.95rem; font-weight: 500; transition: all 0.3s ease; border-left: 3px solid transparent; text-align: left; }
#main-article-section .service-link:hover { background-color: #eaf4fc; color: #0066a1; border-left-color: #0066a1; padding-left: 20px; font-weight: bold; }


/* 產品列表網格佈局 */
#main-article-section .article-hero-img { width: 100%; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); margin-bottom: 30px; object-fit: cover; }
#main-article-section .product-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 25px; margin-top: 20px; }
#main-article-section .product-card { display: flex; flex-direction: column; background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.04); transition: transform 0.3s ease,box-shadow 0.3s ease,border-color 0.3s ease; }
#main-article-section .product-card:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(0,102,161,0.12); border-color: #a3d2f0; }
#main-article-section .product-img-wrapper { width: 100%; aspect-ratio: 4/3; overflow: hidden; background-color: #f8fbff; display: flex; justify-content: center; align-items: center; border-bottom: 1px solid #f0f0f0; }
#main-article-section .product-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
#main-article-section .product-card:hover .product-img { transform: scale(1.05); }
#main-article-section .product-title { padding: 18px 15px; font-size: 1.1rem; font-weight: bold; color: #333333; text-align: center; background-color: #ffffff; transition: color 0.3s ease; }
#main-article-section .product-card:hover .product-title { color: #0066a1; }
/* 現代化分頁元件 */
#main-article-section .pagination-wrapper { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 40px; border-top: 1px solid #f0f0f0; padding-top: 30px; }
#main-article-section .page-link { display: inline-flex; justify-content: center; align-items: center; min-width: 40px; height: 40px; padding: 0 15px; border-radius: 4px; border: 1px solid #e0e0e0; background-color: #ffffff; color: #555555; font-size: 0.95rem; font-weight: 500; transition: all 0.3s ease; cursor: pointer; }
#main-article-section .page-link:hover:not(.active-page) { border-color: #0066a1; color: #0066a1; background-color: #f4f9fd; }
#main-article-section .page-link.active-page { background-color: #0066a1; color: #ffffff; border-color: #0066a1; font-weight: bold; cursor: default; }
#main-article-section .page-link.prev-next { border-radius: 20px; }



/* 側邊欄聯絡資訊卡 */
#sidebar-section .contact-widget { padding: 25px 20px; background-color: #fdfdfd; border-top: 3px solid #028b99; }
#sidebar-section .widget-title { font-size: 1.1rem; color: #0066a1; font-weight: bold; margin-bottom: 15px; display: flex; align-items: center; gap: 8px; }
#sidebar-section .widget-text { font-size: 0.95rem; color: #555555; margin-bottom: 10px; line-height: 1.5; }
#sidebar-section .widget-highlight { color: #0066a1; font-weight: bold; font-size: 1.1rem; }


/* 產品詳情特定樣式 (取代舊輪播與 table) */
#product-detail-section .product-layout {display: grid;grid-template-columns: 40% 55%;gap: 5%;margin-bottom: 40px;align-items: flex-start;}
#product-detail-section .product-layout #article{width: 100%;}
#product-detail-section .gallery-layout {width: 100%;display: flex;flex-direction: column;gap: 15px;}
#product-detail-section .main-view { width: 100%; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.08); background-color: #f8fbff; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; }
#product-detail-section .main-view img { max-width: 100%; max-height: 100%; object-fit: contain; }
#product-detail-section .thumb-track { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; }
#product-detail-section .thumb-track::-webkit-scrollbar { display: none; }
#product-detail-section .thumb-item { width: 80px; height: 80px; flex-shrink: 0; border-radius: 6px; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: all 0.3s; background-color: #f8fbff; }
#product-detail-section .thumb-item:hover { border-color: #0066a1; transform: translateY(-2px); }
#product-detail-section .thumb-item img { width: 100%; height: 100%; object-fit: cover; }
/* 產品規格表 */
#product-detail-section .spec-container { flex-grow: 1; background-color: #fafbfc; padding: 25px; border-radius: 8px; border: 1px solid #e6f0f7; }
#product-detail-section .spec-title { font-size: 1.2rem; font-weight: bold; color: #0066a1; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid #a3d2f0; }
#product-detail-section .spec-list { display: grid; grid-template-columns: 1fr; gap: 12px; }
#product-detail-section .spec-item { display: flex; align-items: flex-start; font-size: 1rem; border-bottom: 1px dashed #e0e0e0; padding-bottom: 8px; }
#product-detail-section .spec-label { font-weight: bold; color: #028b99; width: 110px; flex-shrink: 0; }
#product-detail-section .spec-value { color: #444444; flex-grow: 1; line-height: 1.5; }
/* 動作按鈕 (取代舊版 a 連結) */
#product-detail-section .action-bar { display: flex; gap: 15px; margin-bottom: 40px; }
#product-detail-section .btn-action { display: inline-flex; align-items: center; justify-content: center; padding: 12px 30px; border-radius: 6px; font-weight: bold; font-size: 1.05rem; transition: all 0.3s ease; cursor: pointer; }
#product-detail-section .btn-inquiry { background-color: #0066a1; color: #ffffff; border: 2px solid #0066a1; box-shadow: 0 4px 12px rgba(0,102,161,0.2); }
#product-detail-section .btn-inquiry:hover { background-color: #004d7a; border-color: #004d7a; transform: translateY(-2px); }
#product-detail-section .btn-back { background-color: #ffffff; color: #555555; border: 2px solid #e0e0e0; }
#product-detail-section .btn-back:hover { border-color: #0066a1; color: #0066a1; transform: translateY(-2px); }

/* 表單特定設計 (現代化重構) */
#contact-section { display: flex; flex-direction: column; }
#contact-section .contact-header { margin-bottom: 30px; padding: 25px; background-color: #f0f8ff; border-radius: 8px; border-left: 5px solid #028b99; }
#contact-section .contact-header-title { font-size: 1.3rem; font-weight: bold; color: #0066a1; margin-bottom: 8px; }
#contact-section .contact-header-desc { color: #555555; font-size: 1.05rem; }
/* 網格表單佈局 */
#contact-section .form-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 25px; }
#contact-section .full-width { grid-column: 1/-1; }
#contact-section .form-group { display: flex; flex-direction: column; gap: 8px; }
#contact-section label { font-size: 1.05rem; font-weight: bold; color: #333333; display: flex; align-items: center; }
#contact-section .required { color: #e74c3c; margin-left: 6px; font-weight: bold; font-size: 1.2rem; }
/* 輸入框美化 */
#contact-section input[type="text"],#contact-section input[type="tel"],#contact-section input[type="email"],#contact-section textarea { width: 100%; padding: 14px 18px; border: 1px solid #dce4ec; border-radius: 6px; font-size: 1rem; color: #333333; background-color: #f9fbfc; transition: all 0.3s ease; font-family: inherit; }
#contact-section input::placeholder,#contact-section textarea::placeholder { color: #aab7c4; }
#contact-section input:focus,#contact-section textarea:focus { outline: none; border-color: #0066a1; box-shadow: 0 0 0 4px rgba(0,102,161,0.1); background-color: #ffffff; }
#contact-section textarea { resize: vertical; min-height: 150px; }
/* 驗證碼特殊區塊 */
#contact-section .captcha-wrapper { display: flex; align-items: center; gap: 15px; }
#contact-section .captcha-wrapper input { flex: 1; max-width: 250px; letter-spacing: 2px; }
#contact-section .captcha-wrapper img { height: 48px; border-radius: 4px; cursor: pointer; border: 1px solid #dce4ec; transition: transform 0.3s ease,box-shadow 0.3s ease; background-color: #fff; padding: 2px; }
#contact-section .captcha-wrapper img:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
#contact-section .captcha-hint { font-size: 0.9rem; color: #888888; }
/* 送出按鈕 */
#contact-section .form-action { text-align: center; margin-top: 40px; border-top: 1px dashed #e0e0e0; padding-top: 35px; }
#contact-section .btn-submit { background-color: #0066a1; color: #ffffff; border: none; padding: 16px 50px; font-size: 1.15rem; font-weight: bold; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,102,161,0.25); letter-spacing: 2px; display: inline-flex; justify-content: center; align-items: center; }
#contact-section .btn-submit:hover { background-color: #004d7a; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,102,161,0.35); }


@media (max-width:992px) {
  #content-layout { flex-direction: column; gap: 30px; }
  #banner-section{margin-top: 60px;}
  #banner-section img{height: 360px;object-position: 87% 50%;}
  #sidebar-section { width: 100%; display: flex; flex-direction: column; position: static; }
  #sidebar-section .nav-list { display: flex; flex-wrap: wrap; }
  #sidebar-section .nav-list-item { flex: 1 1 50%; text-align: center; border-bottom: 1px solid #f0f0f0; border-right: 1px solid #f0f0f0; }
  #sidebar-section .nav-list-item:hover,#sidebar-section .nav-list-item.active { padding-left: 20px; border-left: none; border-bottom: 4px solid #0066a1; background-color: #f4f9fd; }
  #main-article-section .flex-card { flex-direction: column; text-align: center; }
  #main-article-section .flex-card-img { width: 100%; max-width: 400px; margin: 0 auto; }
  #main-article-section .flex-card-content { width: 100%; }
  #main-article-section .section-heading { justify-content: center; }
  #main-article-section .section-heading::before { display: none; }
  #main-article-section .contact-phone { margin: 20px auto 0; }
  #main-article-section .client-grid { grid-template-columns: 1fr; }
  #main-article-section .service-grid { grid-template-columns: repeat(2, 1fr); }
  #main-article-section .product-grid { grid-template-columns: repeat(2, 1fr); }
  #product-detail-section .product-layout { flex-direction: column; gap: 25px; }
  #product-detail-section .gallery-layout { width: 100%; }

}
@media (max-width:768px) {
  #sidebar-section .nav-list-item { flex: 1 1 100%; border-right: none; }
  #main-article-section { padding: 25px 20px; }
  #main-article-section .main-title { font-size: 1.8rem; }
  #main-article-section .service-grid { grid-template-columns: 1fr; }
  #main-article-section .product-grid { grid-template-columns: 1fr; }
  #main-article-section .pagination-wrapper { flex-wrap: wrap; }
  #product-detail-section .action-bar { flex-direction: column; }
  #product-detail-section .product-layout{display:flex;flex-direction: column;}

   #contact-section .form-grid { grid-template-columns: 1fr; gap: 20px; }
   #contact-section .captcha-wrapper { flex-direction: column; align-items: flex-start; gap: 10px; }
   #contact-section .captcha-wrapper input { max-width: 100%; width: 100%; }
   #contact-section .btn-submit { width: 100%; padding: 16px 20px; }

}
@media (max-width:480px)
{
  #banner-section img{height: 323px;object-position: 90% 50%;}
}