@charset "UTF-8";

/* ==========================================================================
   Axiomtek Main CSS (結構優化版)
   註：維持所有原始數值與間距，僅合併重複項與清理廢棄註解
   ========================================================================== */

/* ==========================================================================
   1. 全域重置與基礎設定 (Reset & Base)
   ========================================================================== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  font-family: 'Montserrat', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  font-size: 1rem;
  font-family: 'Montserrat', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif !important;
  font-display: swap;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 170%;
  color: #333;
  background: white;
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%;
}

ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
del { text-decoration: line-through; }
img { display: block; }
svg { width: 100%; height: auto; display: block; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

/* ==========================================================================
   2. 表單與連結元件 (Forms & Links)
   ========================================================================== */
a {
  color: #76063C;
  text-decoration: none;
}
a:hover { text-decoration: underline; }
a[target=_blank]:hover, a.ad, a.important { color: #be252c; }
a img { border: none; }

input, select { vertical-align: middle; }

textarea,
input[type=text],
input[type=password],
input[type=number],
input[type=email],
input[type=button],
input[type=submit] {
  border: 0;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

textarea:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=number]:focus,
input[type=email]:focus {
  outline: none;
}

/* ==========================================================================
   3. 通用工具類 (Utility Classes)
   ========================================================================== */
.hide { display: none; }

.invisible {
  opacity: 0;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  position: absolute;
  left: -99999px;
  top: -99999px;
}

.clearself { overflow: hidden; }

/* 合併優化後的 Clearfix */
.clearfix {
  zoom: 1;
}
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

/* ==========================================================================
   4. 內容區排版重置 (Content Style)
   ========================================================================== */
.content p { margin: 1.2em 0; }
.content * { line-height: 170%; }
.content ul, .content ol { margin: 1.2em 0 1.2em 2em; }
.content ul { list-style: disc; }
.content ol { list-style: decimal; }

/* ==========================================================================
   5. 版面結構與 UI 元件 (Layouts & UI)
   ========================================================================== */
.layout-wrapper {
  margin: 0 auto;
  position: relative;
}

/* 內容高度補償 (對應 Header 高度) */
.ctall {
  position: relative;
  padding-top: 70px;
}

.ad {
  background: #fffadc;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.ad .ysm { padding: 10px; }
.ad .ysm dl { margin-bottom: 10px; }
.ad .ysm dd { font-size: 12px; line-height: 150%; color: #666; }

div[class^=message-] {
  padding: 1em;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
div.center[class^=message-] { text-align: center; }
.message-info { background: #dcebf0; }

/* ==========================================================================
   6. Header 區塊 (Navigation & Logo)
   ========================================================================== */
#Header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 70px;
  background: #ffffff;
  border-bottom: 1px solid #E7e0c9;
  z-index: 9999;
}

#header .area { z-index: 30; }
#header nav ul ul { z-index: 11; }
#header a { text-decoration: none; }

.menu_wrapper {
  padding: 16px 20px 0;
  background: #ffffff;
  zoom: 1;
}
.menu_wrapper:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.logo_left { float: left; }
.logo_pic {
  width: 200px;
  margin-left: 20px;
  margin-right: 30px;
}
.logo_pic img { width: 100%; }

.ff_logo {
  width: 200px;
  aspect-ratio: 200 / 50;
  min-height: 50px;
  display: block;
}
.ff_logo img {
  width: 100%;
  height: auto;
  display: block;
  filter: invert(1) brightness(2);
}

.gosub:hover > .down_menu_product {
  position: absolute;
  left: 0;
}

.menumask {
  position: fixed;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
  inset: 0;
}

/* ==========================================================================
   7. Banner 區塊 (Banner & Grid)
   ========================================================================== */
.banner_grid {
  margin-bottom: 60px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 20px;
  justify-content: center;
  align-items: center;
  height: 40vw;
  background-position: 50%;
  animation: backgroundResize 7s infinite;
}

.bannermask {
  width: 100%;
  height: 100%;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes backgroundResize {
  from { background-size: 150%; }
  to { background-size: 100%; }
}

/* 列表修飾 */
.atsx_li {
  margin-left: 20px;
  margin-bottom: 6px;
}
.atsx_li:before {
  content: "．";
  color: #e5d1b6;
  font-size: 2rem;
  vertical-align: bottom;
  margin-left: -32px;
}

/* --- 手機版 RWD 修正 (置於區塊最後方) --- */
@media only screen and (max-width: 767px) {
  .banner_grid {
    /* 解決變窄問題：拉高比例，並強制覆蓋桌機高度 */
    height: 70vw !important;
    grid-template-columns: 1fr !important; /* 改為單欄 */
    gap: 0 !important;
    animation: backgroundResizeMobile 7s infinite; /* 替換為手機專用縮放比例 */
  }

  /* 調整背景圖：如果是為了讓手機版更有設計感，可以加個深色遮罩 */
  .bannermask {
    background: rgba(0, 0, 0, 0.4);
  }

  /* 調整文字區塊：確保寬度足夠且水平居中 */
  .banner_font {
    width: 85% !important;
    margin: 0 auto;
    text-align: center;
    padding: 0 !important;
  }

  /* 手機專用動畫：避免起始縮放過大 (150% -> 125%) 導致畫質模糊 */
  @keyframes backgroundResizeMobile {
    from { background-size: 125%; }
    to { background-size: 105%; }
  }
}
/* ==========================================================================
   8. Footer 區塊 (版權與結構)
   ========================================================================== */
#footer {
  clear: both;
}
#footer a {
  color: #999;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
#footer a:hover {
  padding-left: .5em;
  color: #FFF;
}
#footer .h1 {
  font-size: 15px;
  margin-bottom: .5em;
}
#footer h2 { color: #f0cb00; }
#footer section, #footer section div { float: left; }
#footer section.latest { width: 19%; }
#footer section.latest div { width: 50%; }
#footer section.features { width: 25%; }
#footer section.features div { width: 50%; }
#footer section.service_new { width: 34%; }
#footer section.service_new div { width: 33%; }
#footer .footer_icon {
  float: left;
  width: 32px;
  height: 32px;
  margin-right: 10px;
}

#footer #copyright {
  clear: both;
  font-size: 12px;
  padding-top: 3em;
}
#footer #copyright .logo {
  width: 160px;
  height: 35px;
  float: left;
  text-indent: -9999px;
}
#footer #copyright p { margin-left: 180px; }
#footer #copyright .bottom {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  font-weight: bold;
}

/* ==========================================================================
   9. 背景顏色變體 (C1 - C17)
   ========================================================================== */
.c1 { background-color: #D9E8CB; }
.c2 { background-color: #E8F5DB; }
.c3 { background-color: #F5F4D3; }
.c4 { background-color: #FFEAE9; }
.c5 { background-color: #FFE1D6; }
.c6 { background-color: #EBD1BA; }
.c7 { background-color: #F6EFE5; }
.c8 { background-color: #D2EEFF; }
.c9 { background-color: #F5F1FF; }
.c10 { background-color: #FFF; }
.c11 { background-color: #fbf4e9; }
.c12 { background-color: #E7e0c9; }
.c13 { background-color: #D7CBA6; }
.c15 { background-color: #f8f8f8; }
.c16 { background-color: #f4f4f4; }
.c17 { background-color: #EAEAEA; }

/* ==========================================================================
   10. RWD 響應式佈局 (Media Queries)
   ========================================================================== */
@media only screen and (max-width: 1440px) {
  #Layout-view { font-family: "cozy"; }
  .layout-wrapper { width: 1200px; }
}

@media only screen and (max-width: 1280px) {
  #Layout-view { font-family: "compact"; }
  .layout-wrapper { width: 1000px; }
}

@media only screen and (max-width: 1005px) {
  #wrap { width: 100%; max-width: 1000px; }
}

@media only screen and (max-width: 768px) {
  .layout-wrapper { width: 100%; }
}

.down_menu_product {
  position: absolute;
  top: 36px;
  left: 0;
  width: 100vw;
  display: none;
  background-color: #ffffff;
  box-shadow: 1px 7px 15px rgba(0, 0, 0, 0.1);
  z-index: 10;
  margin-top: 7px;
}

.Contact_menu {
  display: none;
  position: absolute;
  z-index: 10;
  top: 43px;
  left: 0;
  padding: 22px;
  width: 240px;
  background-color: #ffffff;
  box-shadow: 1px 7px 15px rgba(0, 0, 0, 0.1);
}
.Contact_menu li {
  display: block!important;
  padding: 0 0 !important;
}
.Contact_menu li a {
  color: #333;
}
.Contact_menu li a:hover {
  color: #76063C;
  text-decoration: none !important;
  cursor: pointer !important;
}

.AboutUs_menu {
  display: none;
  position: absolute;
  z-index: 10;
  top: 43px;
  left: 50%;
  transform: translateX(-40%);
  right: auto;
  padding: 22px;
  min-width: 960px;
  background-color: #ffffff;
  box-shadow: 1px 7px 15px rgba(0, 0, 0, 0.1);
}
.AboutUs_menu li {
  display: block;
}

.menu_left {
  float: left;
}
.menu_left a {
  color: #333;
  text-decoration: none;
  font-weight: 700;
}
.menu_left a:hover {
  color: #76063C;
  text-decoration: none !important;
  cursor: pointer !important;
}
.menu_left li {
  margin-top: 10px;
  display: inline-block;
  margin-right: 1vw;
  padding: 0 0 20px 0;
  font-size: 14px;
  position: relative;
}
.menu_left > ul > li > a {
  font-size: 1.2em;
}

.menu_right {
  float: right;
  margin-top: 5px;
}

.cop_li {
  display: inline-block;
  margin-right: 20px;
  vertical-align: middle;
  position: relative;
  cursor: pointer;
}
.cop_li i {
  margin-right: 4px;
}

.bk_search {
  margin-top: 10px;
  display: inline-block;
  margin-right: 20px;
  vertical-align: middle;
  display: none;
}

.compare_icon {
  background-image: url("../images/compare.svg");
  width: 34px;
  height: 30px;
  background-repeat: no-repeat;
  position: relative;
}

.inquiry_icon {
  background-image: url("../images/Inquiry.svg");
  width: 34px;
  height: 30px;
  background-repeat: no-repeat;
  position: relative;
}

.red_number {
  font-size: 12px;
  background-color: #000000;
  border-radius: 50px;
  color: #ffffff;
  padding: 0px;
  width: 20px;
  height: 20px;
  position: absolute;
  top: -7px;
  right: -3px;
  text-align: center;
  line-height:20px;
}

.regionicon {
  width: 14px;
  height: 14px;
  margin-right: 5px;
  margin-top: -3px;
  display: inline-block;
  vertical-align: middle;
}
.regionicon img {
  width: 100%;
}

.regiontxt {
  font-size:0.8em;
  display: inline-block;
}

/* =============================================================
   FOOTER STRUCTURE (頁尾佈局框架)
   ============================================================= */
.footer_bg {
  background-color: #000000;
}

.footer_wrapper {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 5vh 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 頁尾上層：左右分欄 */
.footer_top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: stretch;
}

.footer_left {
  display: flex;
  gap: 1.5rem;
  flex-direction: column;
  justify-content: space-between;
  flex: 0 0 auto;
}

.footer_right {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  flex: 1;
  justify-content: flex-end;
}

/* 頁尾下層：社群與版權 */
.footer_bottom {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  margin-top: -20px;
}

.footer_bottom_row {
  display: flex;
  justify-content: space-between;
  /* ✅ 一左一右排列 */
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  gap: 1rem;
}

/* =============================================================
   FOOTER CONTENT (頁尾選單與內容細節)
   ============================================================= */

/* 產品/連結分類描述 */
.footer_desc {
  min-width: 195px;
}
.footer_desc dt {
  font-size: 1rem;
  color: #ffffff;
  font-weight: 600;
  margin-bottom: 10px;
  margin-left: 20px;
}
.footer_desc dd {
  font-size: .8rem;
  color: #a9a9a9;
  margin-bottom: 10px;
  margin-left: 20px;
}
.footer_desc dd a {
  color: #a9a9a9;
}
.footer_desc dd a:hover {
  color: #ffffff !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

/* 頁尾列表項目樣式 */
.footer_item {
  font-size: 1rem;
  color: #ffffff;
  margin-bottom: 10px;
}

.footer_li {
  font-size: .8rem;
  color: #a9a9a9;
  margin-bottom: 10px;
}
.footer_li a {
  color: #a9a9a9;
}
.footer_li a:hover {
  color: #ffffff;
  text-decoration: none !important;
  cursor: pointer !important;
}

/* =============================================================
   FOOTER ICONS & MISC (社群圖示與版權文字)
   ============================================================= */
/* 社群分享容器 */
.web_share {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 1.2rem;      /* 稍微縮小間距，讓大圖示看起來比較緊湊 */
  padding-bottom: 20px;
}

/* 社群分享連結容器 */
.web_share a {
  display: block;
  width: 2rem;    /* 直接用 width 取代 max-width，並放大到 40px 左右 */
  height: 2rem;   /* 固定寬高可以確保排列整齊 */
  transition: transform 0.3s ease; /* 加入平滑縮放效果 */
}

/* 確保裡面的圖片充滿容器 */
.web_share a img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 確保圖片比例不變形 */
}

/* 滑鼠移上去的特效 (加分項) */
.web_share a:hover {
  transform: scale(1.15); /* 稍微放大，增加互動感 */
}

/* 底部版權宣告 */
.copyright {
  color: #fff;
  font-size: .8rem;
}

/* 底部最末行連結清單 */
.footer_last_li {
  color: #a9a9a9;
  font-size: .8rem;
}
.footer_last_li li {
  display: inline-block;
}
.footer_last_li a {
  color: #a9a9a9;
}
.footer_last_li a:hover {
  color: #ffffff;
  text-decoration: none !important;
  cursor: pointer !important;
}

.che_ckbox {
  margin-bottom: 20px;
}

.share_icon {
  width: 24px;         /* 1.5rem 約等於 24px，建議用固定單位 */
  height: 24px;        /* 💡 務必加上高度 */
  display: inline-block;
  margin-right: 20px;
}

.share_icon img {
  width: 100%;
  height: 100%;        /* 強制撐滿容器 */
  display: block;
}

.email_input {
  width: 57%;
  display: inline-block;
  padding-bottom: 0;
  margin-left: 26px;
}
.email_input input {
  background-color: #343640;
  color: #ffffff;
}

.sub_mit_icon {
  color: #ffffff;
  display: inline-block;
}

.submit_send {
  display: inline-block;
  width: 31%;
  text-align: center;
}

.e_line {
  border-bottom: 1px solid #272727;
  margin-bottom: 10px;
  background-color: #343641;
  border-radius: 50px;
  padding: 8px;
}

.ck_box {
  width: 10px;
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
}

.ck_box_font {
  color: #6B6B6B;
  display: inline-block;
  vertical-align: top;
}
.ck_box_font.ftchk {
  color: #8D8D8D;
}
.ck_box_font a {
  color: #ff429a;
}
.ck_box_font a:hover {
  color: #ff429a !important;
}

.show_share {
  margin-top: 20px;
  display: none;
}

.ff_b1 {
  position: relative;
}

.menu_icon {
  display: none;
  float: right;
  margin-top: 10px;
  width: 30px;
  height: 30px;
}
.menu_icon img {
  width: 100%;
}

.lastnews_bg {
  background-color: #F6EFE5;
}

.lastnews_wrapper {
  width: 80%;
  margin: 0 auto;
  padding: 10vh 0;
}

.index_title {
  font-size: 2.6rem;
  text-align: center;
  font-weight: 700;
  line-height: 3.6rem;
  margin: 15px auto 25px auto;
}
.index_title.topindex {
  margin-bottom: 30px;
}
.index_title.pv {
  font-size: 2.5rem;
}

.idx_title_line {
  width: 50px;
  height: 2px;
  margin: 0 auto;
  margin: 15px auto 15px auto;
  background-color: #76063C;
}

.lastnew_inside_wrap {
  max-width: 1400px;
  margin: 5vh auto;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  padding-bottom: 60px;
}

.pt_inside_wrap {
  max-width: 1100px;
  margin: 5vh auto;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  padding-bottom: 60px;
}

.date_font {
  font-size: 0.9rem;
  color: #4A463C;
  margin-bottom: 4px;
}

.news_list_desc {
  margin: 0 25px;
}
.news_list_desc h2 {
  font-size: 1.2rem;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 500;
}
.news_list_desc p {
  font-size: .9rem;
  margin-bottom: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

/* --- 手機版 News 列表優化 --- */
@media screen and (max-width: 768px) {
    .news_list_desc {
        /* 手機上縮小左右邊距，讓內容有更多空間 */
        margin: 0 15px !important; 
    }

    .news_list_desc h2 {
        /* 手機版標題字體稍微縮小，避免單行擠不下導致斷行過長 */
        font-size: 1.05rem !important;
        line-height: 1.4 !important; /* 增加行距，閱讀更舒適 */
        margin-bottom: 8px !important;
    }

    .news_list_desc p {
        /* 手機版將行數減少，避免佔據過多版面 */
        font-size: 0.85rem !important;
        -webkit-line-clamp: 3 !important; /* 限制 3 行，節省空間 */
        margin-bottom: 15px !important;
    }
}
.read_more {
  display: inline-block;
  vertical-align: middle;
  height: 27px;
  color: #76063C;
  font-weight: 600;
}

.read_more_icon {
  width: 14px;
  display: inline-block;
  vertical-align: middle;
  /*margin-top: -5px;*/
}
.read_more_icon img {
  width: 100%;
}

.readmore_fora a {
  color: #76063C;
}
.readmore_fora a:hover {
  color: #76063C;
  text-decoration: none !important;
  cursor: pointer !important;
}

.sale_fora a {
  color: #76063C;
}
.sale_fora a:hover {
  color: #76063C;
  text-decoration: none !important;
  cursor: pointer !important;
}

.fearture_item_desc h2 {
  font-size: 1.8rem;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: bold;
}
.fearture_item_desc p {
 /*overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 2;
-webkit-box-orient: vertical;*/
  font-size: 1.1rem;
  line-height: 24px;
  display: block;
  min-height: 90px;
}

.Solutions_item_desc h2 {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 700;
}
.Solutions_item_desc p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  font-size: 1rem;
  line-height: 26px;
  margin-bottom: 20px;
  text-align: justify;
}

.feature_bg {
  background-color: #E7e0c9;
  padding: 5vh 5vh 2vh;
  position: relative;
  border-radius: 15px;
  background-image: linear-gradient(150deg, #ededf5, #ede7e4 60%, #eee8e4 65%, #f4f1ee);
}
.feature_bg.index {
  overflow: hidden;
}
.feature_bg.bg2 {
  background-color: #D7CBA6;
}
.feature_bg a {
  color: inherit;
}
.feature_bg a:hover {
  text-decoration: none !important;
}

.feature_new {
  color: #76063C;
  font-size: .9rem;
  font-weight: 900;
  display: none;
}
.feature_new.pInfo {
  font-size: .5rem;
  text-align: left;
}

.feature_pic {
  width: 85%;
  margin: 0 auto;
  height: 85%;
  margin-top: 30px;
}
.feature_pic img {
  width: 100%;
  mix-blend-mode: darken;
}
.feature_pic.zoom img {
  transform: scale(1, 1);
  transition: all 300ms ease-out;
}
.feature_pic.zoom img:hover {
  transform: scale(1.2, 1.2);
}

.feat_nextbtn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 10;
}

.res_right_nextbtn {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

.fea_ct {
  display: inline-block;
  width: 30px;
}

.breadcrumb_bg {
  padding: 1vh 0;
  width: 90%;
  max-width: 1500px;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.6);
  padding-bottom: 10px;
  /* 💡 加上 min-height，確保文字還沒出來前，這塊區域就已經佔好位子 */
  min-height: 50px;
  display: flex;
  align-items: center;
}

.breadcrumb_none_bg {
  padding: 1vh 0;
  position: relative;
  width: 90%;
  z-index: 5;
  /* top: 73px; */
  width: 90%;
  max-width: 1500px;
  margin: 0 auto;
}

.breadcrumb {
  font-size:0.8em;
  margin-bottom: 0;
}

.nopad_wrapper {
  max-width: 950px;
  margin: 0 auto;
}

.page_wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10vh 0;
}
.page_wrapper.newsview {
  padding-bottom: 5vh;
}
.page_wrapper.nopadtop {
  padding-top: 0;
}
.page_wrapper.nopadbot {
  padding-bottom: 0;
}
.page_wrapper.nopadall {
  padding: 0;
}
.page_wrapper.newstop {
  padding-top: 40px;
}
.page_wrapper.soltop {
  max-width: 100% !important;
}
.page_wrapper.soltop .page_title {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.page_wrapper.soltop .solcontent h2, .page_wrapper.soltop .solcontent h3, .page_wrapper.soltop .solcontent h4 {
  max-width: 1100px !important;
  margin-left: auto;
  margin-right: auto;
}
.page_wrapper.soltop .solcontent .h3_font {
  max-width: 1100px !important;
  margin-left: auto;
  margin-right: auto;
}
.page_wrapper.soltop .solcontent p {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.page_wrapper.soltop .solcontent p.text-center {
  text-align: center;
}
.page_wrapper.soltop .solcontent p.text-left {
  text-align: left;
}
.page_wrapper.soltop .solcontent p.text-right {
  text-align: right;
}
.page_wrapper.soltop .solcontent .crs_box {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.page_wrapper.soltop .solcontent .solut_pic {
  width: 100%;
}

.Pview_wrapper {
  width: 90%;
  margin: 30px auto 0;
  padding: 0 0;
  max-width: 760px;
}

.opti__wrapper {
  width: 68%;
  padding: 10vh 0;
  margin: 0 auto;
}

.bk_color {
  color: #000000;
}

.opt_2__wrapper {
  width: 75%;
  padding: 10vh 0;
  margin: 0 auto;
  max-width: 1100px;
}

.partner_wrapper {
  width: 80%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 10vh 0;
}

.feedback_wrapper {
  max-width: 950px;
  margin: 0 auto;
  padding: 10vh 0;
}

.job_wrapper {
  width: 50%;
  margin: 0 auto;
  padding: 10vh 0;
}

.product_wrapper {
  width: 90%;
  max-width: 950px;
  margin: 0 auto;
  padding: 10vh 0 0 0;
}
.product_wrapper.notop {
  padding-top: 0;
}

.rpRelateP {
  display: inline-block;
  width: 100%;
  margin: 0 10px;
  max-width: 300px;
  margin-bottom: 50px;
}

.feedbak_banner_Bg {
  background-color: #F6EFE5;
}

.page_title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 4vh;
  line-height: 1.1em;
}
.page_title.wwo {
  margin-top: -60px;
  position: absolute;
}

.index_Banner {
  margin-bottom: 10vh;
}

.bn1 {
  background-size: cover;
  background-image: url("../images/banner.jpg");
  background-position: center center;
  width: 100vw;
  height: 75vh;
}

.swiper-container {
  position: relative;
}

.Solu_pic {
  width: 100%;
  border-radius: 177% 0 0% 180%;
  overflow: hidden;
}
.Solu_pic img {
  width: 100%;
}

.feat_left {
  margin-left: 20vw;
  margin-top: 30px;
}
.feat_left a:hover {
  text-decoration: none;
}

.cust_pic {
  width: 100%;
  padding-bottom: 100%;
  margin-top: 40px;
  border-radius: 50%;
  overflow: hidden;
  background-position: center center;
  background-size: cover;
}
.cust_pic img {
  width: 100%;
}

/*.adv_item {
  font-size: 1.2rem;
  line-height: 22px;
  margin-bottom: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-weight: 600;
  text-align: center;
  margin-top: 20px;
  text-decoration: none;
}*/

.pro_pic img {
  width: 100%;
}

.mask1 {
  -webkit-mask: url("../images/mask.png") no-repeat center center/contain;
  mask: url("../images/mask.png") no-repeat center center/contain;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.Solutions_row {
  margin: 0 auto;
  --bs-gutter-x: 0;
}

.clip-img {
  -webkit-clip-path: url(#clipImg);
  clip-path: url(#clipImg);
}

.banner_bg {
  width: 100%;
  margin-bottom: 5vh;
  height: 41.6vw;
}
.banner_bg .videocont {
  width: 100%;
  height: 39.7vw;
  overflow-y: hidden;
  position: relative;
}
.banner_bg .videocont video {
  width: 100%;
  height: auto;
}
.banner_bg .videocont .darkmask {
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  /* 子元素設置為絕對定位 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 使用 top, left, right 和 bottom 將子元素撐滿父元素 */
  display: flex;
  /* 使用 flexbox */
  justify-content: center;
  /* 水平置中 */
  align-items: center;
  /* 垂直置中 */
}
.banner_bg .videocont .bannerwords {
  position: absolute;
  /* 內部內容設置為絕對定位 */
  top: 50%;
  /* 移動到父元素高度的50% */
  left: 50%;
  /* 移動到父元素寬度的50% */
  transform: translate(-50%, -50%);
  font-size: 3rem;
  line-height: 3.5rem;
  color: #ffffff;
  text-shadow: 0 0 10px black;
  font-weight: bolder;
  text-align: center;
}

@media only screen and (max-width: 767px) {
    .banner_bg,
    .banner_grid {
        height: 90vw !important;
        min-height: 350px;
        position: relative;
        overflow: visible !important;

        /* 1. 解決重複問題並讓圖靠右 */
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: right center !important; /* 確保看到右側的主圖 */
    }

    /* 2. 增加深色遮罩 (利用 Pseudo-element) */
    .banner_bg::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* 這裡做一個從左到右的漸層，左邊深一點方便讀字，右邊淡一點透出圖片 */
        background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.1) 100%);
        z-index: 1; /* 遮罩層級 */

        /* 💡【關鍵修正一】讓遮罩變成「幽靈狀態」，只負責視覺，完全不接收鼠標與觸控事件，點擊會直接穿透到後方的按鈕！ */
        pointer-events: none !important; 
    }

    /* 💡【關鍵修正二】確保整個 Swiper 內容外殼都浮在遮罩上方 */
    /* 因為後端 setIndexBanner() 包在 .swiper-wrapper 內，必須直接把這個容器抬高，裡面的按鈕才點得到 */
    .swiper_topbanner .swiper-wrapper {
        position: relative;
        z-index: 2; /* 必須大於遮罩的 z-index: 1 */
    }

    /* 3. 確保文字內容浮在遮罩上方 */
    .banner_grid > * {
        position: relative;
        z-index: 3; /* 再稍微提高，確保層級清楚 */
        color: #ffffff; /* 確保文字是白色或亮色，在深色遮罩上才明顯 */
    }

    /* 修正定位：Bullet 拉回 */
    .swiper-pagination.topbanner {
        bottom: 25px !important;
        z-index: 101 !important; /* 要高於遮罩的 1 */
        
        /* 💡【補充安全牌】防止 Swiper 的分頁點容器寬度過寬，不小心擋到文字或按鈕 */
        pointer-events: none;
    }
    /* 讓分頁的小圓點恢復可以被點擊 */
    .swiper-pagination.topbanner .swiper-pagination-bullet {
        pointer-events: auto;
    }
}

.bn_left {
  position: absolute;
  top: 45%;
  left: 0;
}

.bn_right {
  position: absolute;
  top: 45%;
  right: 0;
}

.eb_pic {
  float: right;
  width: 90%;
  height: 90%;
}
.eb_pic img {
  width: 100%;
  object-fit: cover;
  border-radius: 500px 0 0% 500px;
  height: 100%;
}

a.tab_link:hover{
  text-decoration: none;
}
.list_btn {
  display: inline-block;
  background-color: #E7e0c9;
  color: #1F1F1F;
  border: none;
  border-radius: 50px;
  padding: 8px 20px;
  font-weight: 700;
  margin: 10px 2px 10px;
  transition: background-color 300ms linear, color 300ms linear;
  cursor: pointer;
  font-size: 1rem;
}
.list_btn.cptable {
  background-color: #E7e0c9;
}
.list_btn:hover {
  background-color: #76063C;
  color: #ffffff !important;
}
.list_btn.red {
  background-color: #76063C;
  color: #ffffff;
}
.list_btn.red_outline {
  border: 1px solid #76063C;
  color: #76063C;
  background-color: #ffffff;
}
.list_btn.red_outline:hover {
  background-color: #76063C !important;
  color: #ffffff !important;
  text-decoration: none;
}

.productlist_btn {
  display: inline-block;
  background-color: #EAEAEA;
  color: #1F1F1F;
  border: none;
  border-radius: 50px;
  padding: 8px 20px;
  font-weight: 700;
  margin: 0 2px 10px;
  transition: background-color 300ms linear, color 300ms linear;
  cursor: pointer;
  font-size: 1.1rem;
}
.productlist_btn.cptable {
  background-color: #E7e0c9;
}
.productlist_btn:hover {
  background-color: #76063C;
  color: #ffffff !important;
}
.productlist_btn.red {
  background-color: #76063C;
  color: #ffffff;
}
.productlist_btn.red_outline {
  border: 1px solid #76063C;
  color: #76063C;
  background-color: #ffffff;
}
.productlist_btn.red_outline:hover {
  background-color: #76063C !important;
  color: #ffffff !important;
}

.com_ku_icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
}
.com_ku_icon img {
  width: 100%;
}

.com_ku_bn {
  display: inline-block;
  vertical-align: middle;
  font-size: 1.0em;
}

.fearture_wrapper {
  width: 100%;
  margin: 0 auto;
  margin-bottom: 10vh;
  padding-left: 30px;
}
.fearture_wrapper.faq p {
  font-size: 1rem;
  line-height: 1.6;
}
.fearture_wrapper.faq p span {
  display: inline-block;
  padding-right: 5px;
}

.vard_title {
  font-size: 2rem;
  padding: 20px;
  font-weight: bold;
  text-align: center;
}

.kiwi_font {
  font-size: 1rem;
}

.opt_title {
  font-size: 2.3rem;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 500;
}
.opt_title p {
  font-size: 1rem;
  margin-bottom: 20px;
  text-align: justify;
  line-height: 28px;
}

.com_btn {
  display: inline-block;
  background-color: #EAEAEA;
  color: #1F1F1F;
  border-radius: 50px;
  padding: 8px 16px;
  margin-top: 20px;
  font-size: 1.2em;
  font-weight: bold;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
              box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* 2. Hover 狀態 */
.com_btn:hover {
  transform: translateY(-3px); /* 稍微多移動 1px 效果更顯著但仍優雅 */
  box-shadow:  0 2px 5px rgba(0, 0, 0, 0.1);
}
.com_btn.red {
  background-color: #76063C;
  color: #ffffff;
}
.com_btn.gold {
  background-color: #C5B687;
  color: #ffffff;
}

/* --- 1. 基礎按鈕樣式 (Base) --- */
.pdgrid_btn {
    display: inline-block;
    background-color: #E7e0c9;
    color: #1F1F1F;
    border-radius: 50px;
    padding: 8px 20px; /* 稍微增加左右內距，視覺比例更平衡 */
    margin-bottom: 40px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    backface-visibility: hidden;
    text-decoration: none !important;
    cursor: pointer;
}

/* --- 2. 互動特效 (Interactions) --- */
.pdgrid_btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
    filter: brightness(1.1);
}

.pdgrid_btn:active {
    transform: scale(0.98) translateY(0px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* --- 3. 顏色主題 (Themes) --- */
/* 紅色主題 */
.pdgrid_btn.red {
    background-color: #76063C;
    color: #ffffff;
}
/* 金色主題 */
.pdgrid_btn.gold {
    background-color: #C5B687;
    color: #ffffff;
}

/* 當按鈕是 red 或 gold 時，統一將圖示換成亮色版 (on) */
.pdgrid_btn.red .pdgrid_ku_icon.grid,
.pdgrid_btn.gold .pdgrid_ku_icon.grid {
    background-image: url("../images/grid_on.svg");
}

.pdgrid_btn.red .pdgrid_ku_icon.list,
.pdgrid_btn.gold .pdgrid_ku_icon.list {
    background-image: url("../images/list_on.svg");
}

/* --- 4. 內部組件 (Components) --- */
.pdgrid_ku_bn {
    display: inline-block;
    vertical-align: middle;
    font-weight: 700;
    margin: 0 4px; /* 增加文字與圖示間的微小距離 */
}

.pdgrid_ku_icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    background-position: center;
    background-size: contain; /* 改用 contain 確保圖示不被切到 */
    background-repeat: no-repeat;
}

.pdgrid_ku_icon.grid { background-image: url("../images/grid.svg"); }
.pdgrid_ku_icon.list { background-image: url("../images/list.svg"); }

@media (max-width: 768px) {
    /* 1. 調整所有按鈕在手機上大一點，方便手指點擊 */
    .pdgrid_btn {
        padding: 8px 24px;
        font-size: 0.8rem;
    }

    /* 2. 減少間距，讓手機螢幕能塞下更多資訊 */
    .font_article p {
        margin-bottom: 25px;
    }

    /* 3. 確保所有圖片在手機上不會超出螢幕寬度 */
    img {
        max-width: 100%;
        height: auto;
    }
}
.breadcrumb-item {
  color: #5B6770;
  font-weight: normal;
}
.breadcrumb-item a {
  color: #5B6770;
  text-decoration: underline;
}
.breadcrumb-item a:hover {
  color: #000000;
  cursor: pointer !important;
}
.breadcrumb-item.brc_white {
  color: #c2c2c2 !important;
}
.breadcrumb-item.brc_white:before {
  color: #c2c2c2;
}
.breadcrumb-item.brc_white a {
  color: #c2c2c2 !important;
}
.breadcrumb-item.active {
  font-weight: bold;
}

/* --- 1. 卡片外框 (主容器) --- */
.articles_box {
  background-color: #f4f4f4;
  border-radius: 20px;
  height: 85%;
  position: relative;
  z-index: 1;
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  overflow: hidden; /* 確保內部圖片放大不破框 */
}

/* 整體卡片懸浮效果 */
.articles_box:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

/* --- 2. 圖片區塊容器 --- */
.art_pic {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 20px 20px 0 0; /* 僅上方圓角 */
  background-color: #eee; /* 預載底色 */
}

/* 針對 Case Study 的比例 */
.art_pic.cs { padding-bottom: 60%; background-size: cover; background-position: center; }
.art_pic.publication { background-size: cover; background-position: center; }

/* 圖片本體 */
.art_pic img {
  width: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1), filter 0.6s ease;
  transform: scale(1);
  display: block;
}

/* 圖片上方的漸層遮罩 (::after) */
.art_pic::after {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent);
  transition: opacity 0.6s ease;
  opacity: 1;
  pointer-events: none;
}

/* --- 3. 懸浮時的連動效果 (同步觸發) --- */
.articles_box:hover .art_pic img {
  transform: scale(1.08);
  filter: brightness(1.1); /* 稍微提亮，增加互動感 */
}

.articles_box:hover .art_pic::after {
  opacity: 0.3; /* 遮罩變淡 */
}

/* --- 4. 文字區塊 --- */
.art_padding {
  padding: 2em;
  padding-bottom: 5em;
  position: relative;
  min-height: 210px;
}

.art_padding h2 {
  font-size: 1.4em;
  line-height: 1.3;
  margin-bottom: 20px;
  font-weight: 700;
}

.art_padding h2 a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* 懸浮時標題變色 */
.articles_box:hover h2 a {
  color: #76063C;
}

.art_item_name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: .9rem;
  margin-bottom: 6px;
  color: #76063C;
  font-weight: 500;
}

/* 高度特殊設定 */
.articles_box.cs { height: auto; }
.articles_box.publication { height: 90%; }

.white_btn {
  display: inline-block;
  background-color: #ffffff;
  color: #76063C;
  border-radius: 50px;
  padding: 8px 20px; /* 稍微增加左右內距，視覺更平衡 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 調整為較柔和的陰影 */
  font-weight: 700;
  margin-top: 15px;
  font-size: 1rem;
  transition: all 0.4s ease;
  text-decoration: none !important;
}

/* 確保連結預設繼承顏色 */
.white_btn a {
  color: #76063C !important;
  text-decoration: none !important;
  display: block; /* 讓點擊區域撐滿整個按鈕 */
}

/* Hover 互動效果 */
.white_btn:hover {
  background-color: #76063C !important;
  color: #ffffff !important; /* 💡 強制按鈕文字變白 */
  cursor: pointer;
  transform: translateY(-2px); /* 增加輕微上浮感，更有質感 */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
}

/* 💡 核心修正：確保 Hover 時，裡面的 a 標籤也強制變白 */
.white_btn:hover a {
  color: #ffffff !important;
}

.red_btn {
  display: inline-block;
  background-color: #76063C;
  color: #ffffff;
  border-radius: 50px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 1rem;
  border: 1px solid #76063C;
  /* 優化：將 border 也加入 transition 才會滑順 */
  transition: all 0.5s ease;
  cursor: pointer;
  text-align: center;
}

/* 初始文字顏色 */
.red_btn a {
  color: #ffffff;
  text-decoration: none;
  display: block; /* 讓點擊範圍撐滿整個按鈕 */
}

/* 當滑鼠進入「按鈕整體」時的變化 */
.red_btn:hover {
  background-color: #ffffff;
  color: #76063C;
}

/* 關鍵：讓 a 標籤直接繼承按鈕的顏色，不要另外寫 a:hover */
.red_btn:hover a {
  color: #76063C !important;
  text-decoration: none;
}

/* 移除掉原本造成衝突的 .red_btn a:hover {...} 區塊 */
.red_btn.hoverWhite:hover {
  background-color: white;
  color: #76063C;
  text-decoration: none;
}
.red_btn.bordertype {
  background-color: inherit;
  color: #76063C;
}
.red_btn.bordertype:hover {
  background-color: #76063C;
  color: #ffffff;
}
.red_btn.casest {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
}
.red_btn.np {
  font-size: 16px;
}

.Expansion_btn {
  width: 130px;
  margin: 0 auto;
  text-align: center;
  background-color: #76063C;
  color: #ffffff;
  border-radius: 50px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 1rem;
}

/* --- eCatalog 結構優化 --- */
.ecatalog_content_section {
    padding: 50px 0;
}

/* 1. 卡片外層容器：負責位移動畫 */
.ecab {
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    margin-bottom: 40px;
}

.ecab:hover {
    transform: translateY(-10px); /* 向上微飄 */
}

/* 2. 書本背景區塊：負責陰影與質感 */
.online_bg {
    border: 1px solid #EdE1D1;
    border-radius: 16px;
    padding: 10%;
    background-color: #ffffff;
    transition: all 0.4s ease;
    /* 初始灰色淡陰影 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}
.online_bg.pt {
  aspect-ratio: 4 / 3;
}
.online_bg.pt a{
  display: block;
  width: 100%;
}
.online_bg.pt img {
  width: 100%;
}
/* 錯誤狀態 */
.online_bg.pt .input-error {
    border-color: #76063C;             /* 點擊時變艾訊紅 */
    background-color: #fff;
}
.feedbak_input_wrap {
    width: 100%;
}

.input-error {
    border: 2px solid #e74c3c !important;
    background-color: #fff8f8 !important;
}

.error_msg {
    margin-top: 6px;
    color: #e74c3c;
    font-size: 12px;
    line-height: 1.4;
}
/* 懸浮時變為灰黑色系深陰影 */
.ecab:hover .online_bg {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); /* 你想要的灰黑系陰影 */
    border-color: #d1c4b2;
}

/* 3. 圖片優化 */
.book_pic {
    width: 100%;
    margin: 0 auto;
}

.book_pic img {
    width: 100%;
    height: auto;
    /* 增加書本的實體投影感 */
        transition: transform 0.5s ease;
}

.ecab:hover .book_pic img {
    transform: scale(1.05); /* 圖片微幅放大 */
}

/* 4. 標題優化：解決按鈕沒對齊的關鍵 */
.bookname {
    margin-top: 25px;
    text-align: center;
    font-size: 1.15rem;
    line-height: 1.4;
    margin-bottom: 20px;
    font-weight: 700;
    color: #333;
    transition: color 0.3s ease;
    /* 強制兩行高度，對齊下方的按鈕 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2.8em;
}

.ecab:hover .bookname {
    color: #76063C; /* 懸浮時標題變品牌紫 */
}

/* RWD 補強 */
@media (max-width: 768px) {
    .bookname { font-size: 1.1rem; height: auto; min-height: 2.8em; }
    .online_bg { padding: 15%; }
}
.center {
  text-align: center;
}

.litbox_wt_p_box {
  margin: 4em 0;
}

.gray_Papers_bg {
  background-color: #f4f4f4;
  border-radius: 30px;
  padding: 2em;
  height: 100%;
}

.White_Papers_bg {
  background-color: #f4f4f4;
  border-radius: 30px;
  padding: 4em;
  margin-bottom: 4em;
}

.mg_20 {
  margin-bottom: 20px;
}

/* 基礎樣式 */
.c11_Papers_bg {
  border-radius: 30px;
  padding: 2em;
  margin-bottom: 2em;
}

/* 顏色設定：使用簡潔的鏈接寫法 */
.c11_Papers_bg.c10_bg { background-color: #F3F6FF; }
.c11_Papers_bg.c12_bg { background-color: #E7E0C9; }
.c11_Papers_bg.c13_bg { background-color: #D7CBA6; }

/* 其他內容樣式 */
.wht_paper_box {
  padding: 25px 0;
}

.wht_paper_box h3 {
  /* 保持原本字體大小與間距 */
  font-size: 1.7em;
  margin: 0 25px 10px 20px;

  /* --- 優化部分 --- */
  font-weight: 700;        /* 標題加粗，與內文拉開視覺層次 */
  line-height: 1.3;       /* 從 1.2 稍微放寬，避免字體溢出或撞在一起 */
  color: #333;            /* 深灰色比純黑更耐看 */
  transition: color 0.3s ease; /* 為了懸停變色做準備 */

  /* 保持原本的截斷邏輯 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.wht_paper_box p {
  /* 保持原本字體大小與間距 */
  font-size: .9rem;
  margin: 0 25px 0 20px;

  /* --- 優化部分 --- */
  font-weight: 400;       /* 保持標準粗細 */
  line-height: 1.6;       /* 從 22px 改為倍數，閱讀感更流暢 */
  color: #333;            /* 內文用中灰色，讓標題更突出 */

  /* 保持原本的截斷邏輯 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* --- 僅針對文字的互動效果 --- */
.wht_paper_box:hover h3 {
  color: #76063C; /* 鼠標靠近時，標題變品牌紫，增加點擊慾望 */
}

.wht_paper_box.border {
  border: 1px solid #ccc;
  border-radius: 10px;
}
.download_icon {
  width: 5em;
  margin: 0 auto;
}
.download_icon img {
  width: 100%;
}

.xm_download_icon {
  width: 4em;
  margin: 0 auto;
}
.xm_download_icon img {
  width: 100%;
}

.iso_icondownload {
  width: 2em;
  margin: 0 auto;
  /* 確保放大時不會被父層切掉，視情況加入 */
  /* overflow: visible; */
}
.iso_icondownload img {
  width: 100%;
  /* 💡 關鍵：加入轉場動畫，讓放大縮小更平滑 */
  transition: transform 0.3s ease;
}

/* 滑鼠靠近時 (Hover) */
.iso_icondownload:hover img {
  /* 💡 關鍵：放大 1.1 倍 */
  transform: scale(1.1);
  cursor: pointer; /* 強制顯示手指游標，提示可點擊 */
}
/* ==========================================================================
   1. 產品卡片基礎與 Grid 排版
   ========================================================================== */
.ipc_grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 30px;
    row-gap: 40px; /* 增加上下間距讓畫面更鬆鬆 */
    align-items: stretch;
}

.npgrid {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    transition: transform 0.3s ease;
}

/* 懸浮連動：摸到卡片任何地方，圖片放大 */
.npgrid:hover .whatsnews_pic img {
    transform: scale(1.1);
}
.swiper_productnew .swiper-slide {
    /* 1. 確保內容是由上而下垂直排列 */
    display: flex;
    flex-direction: column;

    /* 2. 水平置中 */
    align-items: center;

    /* 3. 清除可能干擾的浮動 */
    float: none;
}
/* ==========================================================================
   2. 圖片區塊整理 (合併 bggray1, bggray4 等重複項)
   ========================================================================== */
.whatsnews_pic {
    aspect-ratio: 1 / 1;
    width: 100%;
    margin: 0 auto;
    background-color: #ffffff;
    overflow: hidden;
    padding: 5%; /* 稍微增加內距，讓產品圖不貼邊 */
    border-radius: 30px; /* 統一圓角 */
}

/* 1. 統一的圓角與外框設定 (將原底色改為外框) */
.whatsnews_pic.bggray1,
.whatsnews_pic.bggray4,
.whatsnews_bg {
    /* 底色移除，改為外框 */
    background-color: transparent !important;
    border: 1px solid #e0e0e0 !important; /* 原本背景色 #f4f4f4 轉為邊框色 */

    border-radius: 30px !important;       /* 統一圓角 */
    padding: 15px;                        /* 保持內部間距 */
    box-sizing: border-box;
    transition: 0.3s ease;
}

/* 2. 懸停互動：讓外框變色 */
.whatsnews_pic.bggray1:hover,
.whatsnews_pic.bggray4:hover,
.whatsnews_bg:hover {
    border-color: #76063C !important;
}

.whatsnews_pic img {
    mix-blend-mode: darken; /* 讓白底去背圖融合於灰底 */
    width: 100%;
    height: 100%;
	padding: 10px;
    object-fit: contain;
    transition: transform 0.5s ease;
}

/* --- 1. 針對連結容器的重置 (關鍵) --- */
.rpone a,
.rpone a:hover,
.rpone a:visited,
.rpone a:active {
    text-decoration: none !important; /* 強制移除 <a> 的底線 */
    border: none !important;          /* 防止某些框架用 border 模擬底線 */
    outline: none !important;
}

/* --- 2. 容器設定 --- */
.rpone {
    position: relative;
    padding: 15px;
    border-radius: 12px;
    background: transparent;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer;
}

/* ⭐ 連動動作：當 hover rpone 時，圖片放大 */
.rpone:hover .whatsnews_pic img {
    transform: scale(1.08); /* 放大 8% 即可，太大幅會顯得廉價 */
}

.rpone:hover .newproduct_box h2 {
    color: #76063C;
    /* 🔴 微調：改成 -4px，搭配動畫會有剛剛好的「呼吸感」，不會太誇張 */
    transform: translateY(-4px);
    text-decoration: none !important;
}

/* ==========================================================================
   3. 文字區塊與變色邏輯 (核心修正)
   ========================================================================== */
.newproduct_box {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
	margin-top: 15px; /* 增加與上方圖片色塊的距離 */
}

.newproduct_box a {
    color: inherit;
    text-decoration: none !important;
    display: block;
}

.newproduct_box h2 {
    font-size: 1.1rem;
    line-height: 1.3;
    font-weight: 600;
    margin-bottom: 10px;
    /*margin-top: 20px; */
    min-height: 1.3em; /* 注意：1.3em 是一行的高度喔！如果要兩行請改 2.6em */

    /* 🔴 關鍵修正：把 transform 也加入轉場監聽，或者直接用 all */
    transition: all 0.3s ease;
}
.newproduct_box a:hover h2 {
    color: #76063C;
    text-decoration: none;
}

.newproduct_box p {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 20px;
    color: #333;
    flex-grow: 1; /* 推擠按鈕到底部 */
}

/* 🔴 修正：滑鼠靠近時，強制讓裡面的 h2 變色 */
.newproduct_box a:hover p {
    color: #76063C !important;
}

/* 按鈕貼底 */
.flexbtn {
    margin-top: auto;
    padding-bottom: 20px;
}

/* ==========================================================================
   4. 其他背景類整理 (簡化重複程式碼)
   ========================================================================== */
.product_bg {
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);

}
.product_bg, .productwhite_bg {
    background-color: #ffffff;
    border-radius: 30px;
    padding: 6%;
}


.prod_colors_bg {
    background-color: #f4f4f4;
    border-radius: 30px;
    padding: 20%;
}

.last_icon {
    display: inline-block;
    width: 28px;
    margin-top: 30px;
}

.hover-zoom img {
  mix-blend-mode: darken;
  transition: transform 0.3s ease;
}
.hover-zoom:hover img {
  transform: scale(1.2);
}

.img-zoom {
  transition: transform 0.3s ease;
}
.img-zoom:hover {
  transform: scale(1.2);
}

.ipc_title {
  font-size: 1.5rem;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 600;
  margin-top: 20px;
}

.pr_wrap {
  width: 90%;
  max-width: 1500px;
  margin: 0 auto;
  padding-top: calc( 2vh + 45px );
  padding-bottom: 2vh;
}
.pr_wrap h1 {
  font-size: 2.6rem;
  line-height: 1.2;
  margin-bottom: 30px;
  font-weight: 700;
  margin-top: 20px;
}
.pr_wrap p {
  font-size: 1rem;
  font-weight: normal;
  max-width: 800px;
}
@media (max-width: 768px) {
    
    .pr_wrap h1 {
        font-size: 1.8rem;      /* 💡 降到 1.8rem，防止大標題在手機螢幕暴衝、斷行 */
        line-height: 1.3;       /* 💡 稍微放寬行高，字體折行時比較不壓迫 */
        margin-top: 15px;       /* 💡 縮減上下間距，釋放手機寶貴的垂直視覺空間 */
        margin-bottom: 15px;    
    }

    .pr_wrap p {
        font-size: 0.95rem;     /* 💡 手機版字體稍微微調小一點點，視覺更精緻 */
        line-height: 1.6;       /* 💡 強烈建議補上行高！手機字體小，行高拉開閱讀才不吃力 */
    }

}
.also_like_box {
  margin: 5vh 0;
  text-align: center;
}
.also_like_box a {
  color: inherit;
}

.Industrial_item_desc h2 {
  font-size: 2.3rem;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 500;
}
.Industrial_item_desc p {
  font-size: 1rem;
  line-height: 30px;
  margin-bottom: 20px;
}
@media only screen and (max-width: 768px) {
    /* 1. 標題縮小，讓排版更緊湊 */
    .Industrial_item_desc h2 {
        font-size: 1.6rem !important; /* 從 2.3rem 縮小，適合手機螢幕 */
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
        font-weight: 600; /* 手機上加粗一點視覺感較好 */
    }

    /* 2. 內文行高改為相對倍數 */
    .Industrial_item_desc p {
        font-size: 0.95rem !important; /* 稍微縮小字體 */
        line-height: 1.6 !important;   /* 將固定的 30px 改為 1.6 倍，閱讀更自然 */
        margin-bottom: 15px !important; /* 縮減段落間距，節省空間 */
    }
}

.Industrial_pic {
  width: 100%;
  padding-bottom: 64%;
  background-size: cover;
  background-position: center center;
  box-shadow: 0 0 30px #000000 inset;
  -webkit-box-shadow: 0 0 30px #000000 inset;
  -moz-box-shadow: 0 0 30px #000000 inset;
  -o-box-shadow: 0 0 30px #000000 inset;
}

.Industrial_box h2 {
  font-size: 1.2rem;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 400;
  margin-top: 20px;
}

.dot_li {
  margin-top: 5vh;
}
.dot_li ul li {
  font-size: 1rem;
  margin-bottom: 10px;
  list-style-image: url("../images/dot.svg");
  line-height: 1.6rem;
}
.dot_li ul.about {
  margin-left: 30px;
}

.Introduction_bg {
  background-size: cover;
  background-position: center center;
  border-radius: 20px;
  padding: 10px;
  height: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
}
.Introduction_bg a {
  color: inherit !important;
}
.Introduction_bg a:hover {
  text-decoration: none !important;
}

.fullwidth {
  width: 100%;
}

.mg_bottom_6v {
  margin-bottom: 6vh;
}

.mg_bottom {
  margin-bottom: 4vh;
}
.mg_bottom._6v {
  margin-bottom: 6vh;
}
.mg_bottom._8v {
  margin-bottom: 8vh;
}
.mg_bottom .pp {
  margin-bottom: 60px;
  height: 100%;
}

.color_bg {
  padding: 10vh 3vw;
  border-radius: 20px;
  height: 100%;
  background-size: cover;
  background-position: center center;
}

.white_font {
  color: #ffffff;
}

.black_font {
  color: #000000;
}

.Introduction_item_desc {
  padding: 30px 20px 0;
}
.Introduction_item_desc h2 {
  font-size: 2.3rem;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 500;
}
.Introduction_item_desc h3 {
  font-size: 1.6rem;
  line-height: 1.2;
  margin-top: -20px !important;    /* 💡 核心：縮小與上方的距離，可依需求改為 0 */
  margin-bottom: 10px;
  font-weight: 600;
}
.Introduction_item_desc p {
  font-size: 1rem;
  margin-bottom: 20px;
  line-height: 30px;
  font-weight: 400;
}

/* 手機版 */
@media (max-width: 768px) {
.Introduction_item_desc {
    padding: 30px 15px 0; /* 手機版內距優化 */
  }

  /* 3. 字體細節調整 */
  .Introduction_item_desc h2 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    font-weight: 700;
  }

  .Introduction_item_desc h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
  }

  .Introduction_item_desc p {
    font-size: 1rem;
    line-height: 1.8; /* 增加行高，提升閱讀舒適度 */
    margin-bottom: 20px;
    font-weight: 400;
  }
}

.Introduction_item_features {
  padding: 120px 30px 0;
}
.Introduction_item_features h2 {
  font-size: 2.3rem;
  line-height: 1.2;
  margin-bottom: 20px;
  font-weight: 500;
}

.case_box a:hover {
  text-decoration: none !important;
  cursor: pointer !important;
}
.case_box.mt10vh {
  margin-top: 10vh;
}

.aid_pic {
  flex: 0 0 auto;
  text-align: center;
  width: 150px;
  vertical-align: middle;
  text-align: center;
  display: inline-block;
}
.aid_pic img {
  width: 70%;
  margin: 0 auto 10px;
  border-radius: 20px;
}
.aid_pic h2.aid_font {
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 600;
}
/* --- 手機版自適應樣式 (修正 ICON 有大有小問題) --- */
@media (max-width: 767px) {
  .aid_pic {
    display: block;
    
    /* 💡 核心修改：從 auto 改成 0%，並指定 20% 寬度，強制 5 個欄位絕對「均等平分」 */
    flex: 1 1 0% !important; 
    width: 20% !important;   
    
    margin-bottom: 25px;
    text-align: center;
    box-sizing: border-box;
    padding: 0 4px;          /* 💡 新增：左右給一點小間距，防止文字黏在一起 */
  }

  .aid_pic img {
    /* 💡 核心修改：不要讓圖片無限放大，鎖定一個精準的尺寸 */
    width: 100%; 
    max-width: 52px;         /* 💡 關鍵：限制 ICON 最大寬度（可根據視覺在 50px~55px 之間微調） */
    height: auto;            /* 確保高度等比例縮放，不變形 */
    
    margin: 0 auto 10px;     /* 置中，並與下方文字保持 10px 距離 */
    border-radius: 10px;
  }

  .aid_pic h2.aid_font {
    /* 💡 修改：5 欄並排時手機版字體要再小一點，避免英文字塞不下 */
    font-size: 0.65rem; 
    line-height: 1.2; 
    font-weight: 600;
    word-break: break-word;  /* 💡 新增：允許太長的英文單字換行，不撐開欄位 */
  }
}

.ft_line {
  color: #2b2b2b;
  padding: 0 10px;
}

.search_gray {
  background-color: #ECECEC;
  border-radius: 50px;
  width: 180px;
  overflow: hidden;
  float: left;
  border-radius: 50px 0 0 50px;
  height: 34px;
}

.search_bar {
  float: left;
  padding-left: 13px;
}
.search_bar input {
  background-color: #ECECEC;
  margin-top: 5px !important;
}

.mic_icon {
  position: absolute;
  top: 15px;
  right: 20px;
  width: 20px;
  cursor: pointer;
}

.gosearch_icon {
  height: 34px;
  float: left;
  background-color: #76063C;
  border-radius: 0 50px 50px 0;
  padding: 8px 15px 11px 11px;
}

.bg-light {
  background-color: #ffffff !important;
  border-bottom: 1px solid #DBDBDB;
}

.tag_white_border {
  margin-top: 30px;
}
.tag_white_border.pr {
  margin-top: 0;
}
.tag_white_border.pr a {
  color: #8D8D8D;
}
.tag_white_border.pr a:hover {
  color: #76063C;
  text-decoration: none !important;
  cursor: pointer !important;
}
.tag_white_border.pr a:hover li {
  border: 1px solid #76063C;
}
.tag_white_border a {
  color: #8D8D8D;
}
.tag_white_border a:hover {
  color: #76063C;
  text-decoration: none !important;
  cursor: pointer !important;
}
.tag_white_border a:hover li {
  border: 1px solid #76063C;
}
.tag_white_border li {
  font-weight: 600;
  padding: 4px 16px;
  border: 1px solid #E4E4E4;
  border-radius: 50px;
  display: inline-block;
  font-size: .9rem;
  margin-right: 8px;
  margin-bottom: 10px;
}

.navbar-expand-lg .navbar-collapse {
  font-size: 1rem;
}

.Page_navigation {
    width: 100%;
    margin: 50px 0;
    text-align: center; /* 確保容器居中 */
}

.Page_navigation ul {
    display: flex;
    justify-content: center; /* 💡 解決偏左問題：水平置中 */
    align-items: center;
    padding: 0;             /* 💡 解決偏左問題：移除預設內距 */
    margin: 0;
    list-style: none;
    gap: 12px;              /* 按鈕間距 */
    flex-wrap: wrap;
}

.Page_navigation li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;            /* 💡 固定寬高確保正圓 */
    height: 42px;
    border-radius: 50%;     /* 完美正圓 */
    border: 1px solid #D9D9D9;
    background-color: #fff;
    transition: all 0.3s ease;
}

/* 當前分頁：背景紅、字變白 */
.Page_navigation li.current {
    background-color: #76063C !important; /* 艾訊紅 */
    border-color: #76063C !important;
	color: #ffffff !important; /* 💡 強制白字 */
}

.Page_navigation li.current a,
.Page_navigation li.current span {
    color: #ffffff !important; /* 💡 強制白字 */
}

.Page_navigation li a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #333;
    font-weight: 500;
}

/* 滑鼠移過分頁按鈕 */
/*.Page_navigation li:hover:not(.current) {
    border-color: #76063C;
}
3. 手機版樣式修正 (max-width: 768px)
   ============================================================ */

@media screen and (max-width: 768px) {
     /* 分頁在手機上縮小一點 */
    .Page_navigation li {
        width: 36px;
        height: 36px;
    }
}

/* --- 導覽圓圈基礎設定 --- */
.nav_ros {
    display: inline-flex;    /* 💡 改用 flex 確保內容置中 */
    align-items: center;     /* 垂直置中 */
    justify-content: center; /* 水平置中 */

    width: 40px;             /* 固定寬度 */
    height: 40px;            /* 固定高度 */

    border: 1px solid #D9D9D9;
    border-radius: 50%;      /* 💡 50% 確保正圓 */
    margin: 0 4px 10px;
    background-color: #fff;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* --- 裡面的連結文字 --- */
.nav_ros a {
    display: flex;           /* 讓點擊範圍撐滿整個圓 */
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;

    color: #333;          /* 預設灰字 */
    text-decoration: none;
    font-size: 1rem;
    font-weight: normal;
    margin-top: 0 !important; /* 💡 移除原本的 margin-top 8px，Flex 會處理置中 */
}

/* --- Hover 狀態 --- */
.nav_ros:hover {
    border: 1px solid #76063C; /* 保持跟原本粗細一致 */
}

.nav_ros:hover a {
    color: #76063C;
    font-weight: 500;
}

/* --- 選中狀態 (.on)：紅底白字 --- */
.nav_ros.on {
    background-color: #76063C; /* 💡 改為紅底 */
    border-color: #76063C;
    font-weight: 900;
}

.nav_ros.on a {
    color: #ffffff !important; /* 💡 改為白字 */
}

.nav_prev {
  display: inline-block;
  padding: 0 8px;
  font-size: .9rem;
}
.nav_prev a {
  color: #8D8D8D;
}
.nav_prev a:hover {
  color: #76063C;
  text-decoration: none !important;
  cursor: pointer !important;
}
.nav_prev a:hover li {
  border: 1px solid #76063C;
}

.series_video {
  position: relative;
  background-position: center center;
  width: 100%;
  padding-bottom: 56.25%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

.video_title {
  font-size: 2.5em;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 500;
}

.videonew {
  font-size: 1.4rem;
  margin-bottom: 20px;
  border-radius: 30px;
  display: inline-block;
  color: #76063C;
  padding: 5px 0;
}

.series_play_ic {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -12%;
  margin-top: -12%;
  width: 24%;
}
.series_play_ic.lic {
  width: 12%;
  margin-left: -6%;
  margin-top: -6%;
}
.series_play_ic img {
  width: 100%;
}

.video_grid {
  margin-top: 40px;
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 1fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 2em;
  /* 設定左右間距 */
  grid-row-gap: 2em;
  /* 設定上下間距 */
  justify-content: center;
  align-items: center;
}

.video_bottom_Bg {
  background-color: #F6EFE5;
  width: 100%;
}

.other_video_grid {
  position: relative;
  margin-top: 40px;
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 2em;
  /* 設定左右間距 */
  grid-row-gap: 2em;
  /* 設定上下間距 */
}

.video_p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  font-size: .9rem;
  margin-bottom: 20px;
  margin-top: 10px;
  font-weight: 500;
}

.select_h2 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  font-weight: bolder;
}

.btn-secondary {
  color: #646464;
  background-color: #ffffff;
  border-color: #e4e4e4;
  font-family: "Montserrat", sans-serif;
}

.Product_Series_box {
  margin-bottom: 40px;
}

.flo_left {
  float: left;
}

.h2_font {
  font-size: 2.3rem;
  line-height: 1.2;
  margin-bottom: 20px;
  font-weight: 700;
}
.h2_font.center {
  text-align: center;
}
.h3_font {
  font-size: 1.8rem;
  line-height: 1.3;
  margin: 20px 0 20px 0;
  font-weight: 600;
  color: #6b6f73;
}


.h3_font.ffbox {
  margin-right: 60px;
  color: #333; 
}
.h3_font.subsize {
  font-size: 1.4rem;
}

.h4_font {
  font-size: 1rem;
  font-weight: 500;
}

.Drivers_h2 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 20px;
}

/* 1. 表格基礎與容器設定 */
.drivers_table {
    width: 100%;
    border-collapse: collapse; /* 確保邊框不會疊加 */
    margin-bottom: 2em;
    overflow: hidden;
}

/* 2. 標題列：維持原本的金褐色，但優化字體質感 */
.drivers_table th {
    background-color: #E7e0c9; /* 你的原本配色 */
    color: #333;               /* 建議深色字閱讀較清晰，若要白字可改 #fff */
    padding: 16px 10px;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    border: none;
}

/* 3. 內容格：導入 comfort-table 的留白感與無垂直線設計 */
.drivers_table td {
    padding: 15px 10px;
    text-align: center;
    font-size: 1rem;
    color: #333;
    background-color: #f4f4f4; /* 你的原本背景色 */
    border-bottom: 1px solid #ffffff; /* 原本的白色分割線 */
    font-weight: 700;
    transition: background-color 0.3s ease; /* 為了 hover 做準備 */
}

/* 4. 第一欄 (年度欄位)：黃色側邊條與強化字體 */
/* 假設你在 HTML 的第一欄 <td> 加上了 class="year-col" */
.drivers_table td.year-col {
    font-weight: 700;
    color: #76063C !important; /* 年度用企業紅點綴 */
    border-left: 5px solid #D7CBA6; /* 加入金褐色的側邊條 */
}

/* 5. 斑馬紋：讓長表格更容易閱讀 */
.drivers_table tbody tr:nth-child(even) td {
    background-color: #ebebeb; /* 比原本的 #f4f4f4 深一點點，產生層次 */
}

/* 6. Active 狀態：維持企業紅背景 */
.drivers_table .active {
    background-color: #76063C !important;
    color: #ffffff !important;
}
.drivers_table .active td {
    background-color: #76063C !important;
    color: #ffffff !important;
}

/* 7. 滑鼠懸停效果 (Hover)：導入淡黃色光感 */
.drivers_table tbody tr:hover td {
    background-color: #E7e0c933; /* 使用金褐色的透明版 (20% 透明度) */
    color: #000;
}

/* 8. 最後一行拿掉底線 */
.drivers_table tbody tr:last-child td {
    border-bottom: none;
}

.tb_mgbottom_10 {
  margin-bottom: 10vh;
}

.tb_mgbottom_5 {
  margin-bottom: 5vh;
}

.sm_p {
  font-size: 1.2em;
}

/* 讓外層有個明確總寬度，三欄才能正確等分。
   假設容器最大寬度 1200px，您可依實際需求調整。 */
.partner_block {
  display: flex;
  flex-wrap: nowrap;
  /* 不允許自動換行 */
  justify-content: space-between;
  width: 100%;
  align-items: center;
}

/* 每個欄位強制 1/3 寬度，確保三等分 */
.Partnership_box {
  width: 33.3333%;
  box-sizing: border-box;
  /*position: relative;/*/  /* 用於放置分隔線 */
  /* 內部改成水平排 (圖左、文右) */
  display: flex;
  align-items: center;
  /* 圖片與文字的垂直對齊方式 */
  padding: 20px;
  /* 四邊空白 */
}

/* 相鄰欄之間的垂直分隔線 (除了最後一欄) */
.Partnership_box:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background-color: #ccc;
}

/* 圖片區固定寬度，例如 120px */
.par_logo {
  width: 120px;
  flex-shrink: 0;
  /* 避免圖片區被壓縮 */
  box-sizing: border-box;
  margin-right: 20px;
  /* 與文字區留間距 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 讓圖片不超過 par_logo 區 */
.par_logo img {
  max-width: 100%;
  height: auto;
}

.Partnership_padding {
  flex-shrink: 0;
  /* 避免在空間不足時被壓縮 */
  width: calc(100% - 140px);
  /* 120px 圖片寬 + 20px margin-right = 140 */
  box-sizing: border-box;
  /* 文字可自動換行，避免撐太寬 */
  white-space: normal;
  word-wrap: break-word;
  /* 或 overflow-wrap: break-word; */
}
.Partnership_padding h2 {
  margin: 0 0 10px;
  font-size: 2em !important;
  font-weight: bold !important;
  line-height: 1.2em !important;
}
.Partnership_padding p {
  display: -webkit-box;
  /* 以伸縮盒呈現 */
  -webkit-box-orient: vertical;
  /* 垂直方向 */
  -webkit-line-clamp: 8;
  /* 顯示 3 行後就截斷 */
  overflow: hidden;
  /* 超過高度則隱藏 */
  text-overflow: ellipsis;
  /* 文字溢出使用省略號表示 */
  white-space: normal;
  word-wrap: break-word;
  /* 或 overflow-wrap: break-word; */
  box-sizing: border-box;
  line-height: 1.4em;
}
/* 隱私權頁面專用容器 */
.Privacy {
    max-width: 800px; /* 限制寬度，避免行太長導致閱讀困難 */
    margin: 0 auto;
    padding: 40px 20px;
}

.Privacy h2 {
    font-size: 1.6rem;
    font-weight: 600;
    color: #333;
    margin-top: 60px; /* 區塊間距大 */
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #E7e0c9; /* 標題底線增加層次 */
}

.Privacy h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin-top: 30px; /* 小標題與內容距離近 */
    margin-bottom: 15px;
}

.Privacy p, .Privacy li {
    font-size: 1rem;
    line-height: 1.8; /* 增加行距，減少閱讀壓力 */
    color: #333;
    margin-bottom: 20px;
}

/* 讓列表更有辨識度 */
.Privacy ul {
    padding-left: 20px;
    margin-bottom: 20px;
}

.Privacy ul li {
    margin-bottom: 10px;
}
.css3_content {
  margin-bottom: 20px;
  font-size: 1rem;
  padding-left: 0; /* 確保容器本身沒有額外縮排 */
}

.css3_content li {
  list-style-type: none;
  line-height: 28px;
  margin-bottom: 12px;
  padding-left: 30px; /* 這裡預留 20px 空間給「‧」 */
  position: relative; /* 關鍵：讓 li 作為符號的定位基準 */
  text-align: left;   /* 強制文字左對齊 */
}

.css3_content li:before {
  content: "‧";
  color: #C5B687;
  font-size: 1.4rem;
  line-height: 28px;
  position: absolute; /* 關鍵：將符號強行拉到最左側 */
  left: 0;            /* 緊貼 li 的左邊緣 */
  top: -2px;          /* 微調符號垂直位置 */
}
.sitemap_font h2 {
  font-size: 1.4rem;
  line-height: 1.2;
  margin-bottom: 8px;
  font-weight: 500;
  margin-bottom: 14px;
}
.sitemap_font li {
  list-style-type: none;
  font-size: 1rem;
  margin-bottom: 8px;
}

/* 基礎輸入框容器：取消原本沉重的背景，改用細邊框與柔和陰影 */
.feedbak_inputbg {
    background-color: #ffffff; /* 改為白色 */
    border: 1px solid #e0e0e0; /* 淺灰色邊框 */
    border-radius: 6px;        /* 稍微圓潤一點點 */
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;        /* 增加上下內距，更有呼吸感 */
    margin-bottom: 24px;
    margin-top: 8px;
    transition: all 0.25s ease; /* 平滑過渡動畫 */
}
.feedbak_inputbg.pz {
  margin-bottom: 0;
}

/* 🏆 高質感關鍵：Hover 與 Focus 狀態 */
.feedbak_inputbg:hover {
    border-color: #bbb; /* 滑過時邊框加深 */
}

.feedbak_inputbg:focus-within {
    border-color: #76063C;             /* 點擊時變艾訊紅 */
    background-color: #fff;
}

/* 內部 Input / Textarea 重置 */
.feedbak_inputbg input,
.feedbak_inputbg textarea {
    width: 100%;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    font-size: 15px;
    color: #333;
    letter-spacing: 0.3px;
}

/* 文字區域調整 */
.feedbak_inputbg textarea {
    line-height: 1.6;
}
.feedbak_inputbg.alert {
    border-color: #76063C !important;
    background-color: #fff9f9 !important; /* 極淡的紅色底 */
}
.feedbak_inputbg.ptselect {
    min-height: 80px;
    border: 1px solid #e0e0e0; /* 改用虛線更有清單感 */
    background-color: #f4f4f4;
    padding: 20px;
}
.section_line {
    width: 100%;
    height: 1px;
    /* 使用漸層讓線條往兩邊消失，質感瞬間提升 */
    background: linear-gradient(to right, rgba(237,237,237,0) 0%, rgba(200,200,200,1) 50%, rgba(237,237,237,0) 100%);
    margin: 60px 0 40px 0;
    border: none;
}


.country_grid {
    display: grid;
    /* 桌機版預設兩欄 */
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 20px;
    justify-content: center;
    align-items: center;
    width: 100%;
	margin-bottom: 24px;
    margin-top: 8px;

}

.cou_selestyle {
    display: block !important;
    width: 100% !important;
    height: 46px;              /* 稍微加高，更有大氣感 */
    position: relative;
    background-color: #ffffff; /* 改用白色背景，質感更好 */
    border: 1px solid #e0e0e0; /* 極細淺灰邊框 */
    border-radius: 6px;        /* 圓角稍微增加一點點 */
    box-sizing: border-box;
    transition: all 0.3s ease; /* 增加平滑過渡 */
}

/* 🏆 關鍵：增加滑過與點擊時的質感 */
.cou_selestyle:hover {
    border-color: #bbb;       /* 滑過時邊框稍微加深 */
}

.cou_selestyle:focus-within {
    border-color: #76063C;    /* 點擊時變艾訊紅 */

}

.cou_selestyle select {
    display: block !important;
    width: 100% !important;
    height: 100%;
    background: transparent !important; /* 透出父層的白色 */
    border: none !important;
    outline: none !important;           /* 移除預設藍框 */
    font-size: 15px;                    /* 15-16px 均可，15px 顯得更精緻 */
    color: #444;
    padding: 0 35px 0 15px;             /* 右邊留空間給自訂箭頭 */
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* 🏹 高質感自訂箭頭 (取代原本單調的 ▼ 文字) */
.cou_selestyle::after {
    content: "";
    position: absolute;
    right: 15px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid #999; /* 箭頭線條 */
    border-bottom: 2px solid #999;
    transform: translateY(-65%) rotate(45deg); /* 轉成優雅的 V 型 */
    pointer-events: none;         /* 確保點到箭頭也能觸發選單 */
    transition: all 0.3s ease;
}

/* 點擊時箭頭旋轉 (質感小細節) */
.cou_selestyle:focus-within::after {
    transform: translateY(-25%) rotate(-135deg);
    border-color: #76063C;
}
/* 📱 針對手機版 (寬度 768px 以下) 的修正 */
@media screen and (max-width: 768px) {
    .country_grid {
        /* 關鍵：強制改為單欄，讓下拉選單佔滿 100% */
        grid-template-columns: 1fr !important;
        grid-row-gap: 10px; /* 手機版上下間距縮小一點比較美觀 */
    }
}
.feed_grid {
  width: 60%;
  margin: 0 auto;
  padding: 5vh 0;
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 1fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 10px;
  /* 設定左右間距 */
  grid-row-gap: 20px;
  /* 設定上下間距 */
  justify-content: center;
  align-items: center;
}
.feed_grid p {
  font-size: 1.1em;
  font-weight: 500;
  margin-bottom: 2vh;
  line-height: 1.5em;
  color: #333;
}

.ax_pic {
  width: 100%;
}
.ax_pic img {
  width: 100%;
  border-radius: 20px;
}

.ax_leader {
  width: 100%;
}
.ax_leader img {
  width: 70%;
  margin: auto;
}

.send_btnall {
  margin-top: 20px;
  cursor: pointer;
}

/* --- 送出按鈕：基礎狀態 --- */
.send_btn {
  display: inline-block;
  background-color: #76063C;
  color: #ffffff !important;
  font-weight: 600;
  border-radius: 50px;
  padding: 8px 20px !important;
  margin-left: 10px;
  text-decoration: none !important; /* 徹底消除底線 */
  border: none;
  cursor: pointer;

  /* ⭐ 動畫核心：使用自定義貝茲曲線，讓浮起與降落更優雅（不生硬） */
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
              box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
              filter 0.3s ease !important;

  /* ⭐ 基礎微陰影：讓按鈕預設就有輕微立體感 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

  /* 預防縮放時邊緣鋸齒 */
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* --- 滑鼠經過 (Hover)：浮起與光感 --- */
.send_btn:hover {
  /* ⭐ 向上微浮 3px (距離適中) */
  transform: translateY(-3px) !important;

  /* ⭐ 影子擴散：模擬離開地面的視覺感 */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15) !important;

  /* ⭐ 亮度提升：自動將企業紅調亮 10% */
  filter: brightness(1.1) !important;

  color: #ffffff !important;
  text-decoration: none !important;
}

/* --- 點擊瞬間 (Active)：物理回饋 --- */
.send_btn:active {
  /* ⭐ 模擬真實按壓：縮小並沉回地面 */
  transform: scale(0.96) translateY(-1px) !important;

  /* 陰影收縮 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;

  /* 回復原本亮度 */
  filter: brightness(1);
}
.send_btn.gray {
  background-color: #C5B687 !important;
}
.send_btn.inquiry {
  padding: 8px 20px !important;
}

.google_robot {
  width: 340px;
}
.google_robot.mgauto {
  margin: 0 auto;
}

.mas_box {
  margin-top: 20px;
  width: 100%;
  margin: 0 auto;
}

.red_font {
  color: #76063C;
}

.tx_right {
  text-align: right;
  float: right;
}

.search_p {
  margin-top: 30px;
  font-size: 1rem;
  margin-bottom: 20px;
}

.search_graybg {
  background-color: #f4f4f4;
  border-radius: 30px;
  padding: 4em;
  margin-bottom: 4em;
}

.search_box h2 {
  font-size: 1.7em;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.search_box h3 {
  font-size: 1.2em;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.search_box p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: .9rem;
}

.search_grid {
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: center;
  align-items: start;
  margin-top: 30px;
}

.search_grid_nopic {
  display: grid;
  grid-template-columns: 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

.search_result_bar {
  border: 1px solid #dcdcdc;
  border-radius: 7px;
  padding: 10px 20px;
  margin-bottom: 20px;
}
.search_result_bar {
  zoom: 1;
}
.search_result_bar:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.sc_inpt {
  float: left;
}

.sc_icon {
  float: right;
}

.sc_ft {
  float: right;
  font-weight: 600;
  margin-left: 5px;
}

.dot_btli {
  font-size: 1rem;
  margin-bottom: 40px;
  margin-left: 38px;
}
.dot_btli.axc {
  margin-left: 10px;
  margin-bottom: 10px;
}
.dot_btli.axc li {
  margin-left: 15px;
}
.dot_btli.axc li:before {
  content: "‧";
  color: #333 !important;
}
.dot_btli.ptindex {
  margin-left: 15px;
}
.dot_btli li {
  text-indent: -18px;
  list-style-type: none;
  line-height: 28px;
  margin-bottom: 3px;
  margin-left: 25px;
}
.dot_btli li:before {
  content: "‧";
  color: #333;
  font-size: 1.5rem;
  padding-right: 8px;
  vertical-align: sub;
  margin-left: -15px;
}
/* 合併重複的代碼 */
.dot_btli li a.bk {
    color: #333 !important;
	text-decoration: none; /* 建議加上，確保預設無底線 */
    transition: color 0.3s ease; /* 增加顏色轉換的平滑感 */
}

.dot_btli li a.bk:hover {
    color: #76063C !important;
	font-weight:700;
    text-decoration: none !important; /* 確保懸停時也沒有底線 */
}

.menu_dot_btli {
  font-size: 1rem;
  margin-bottom: 40px;
}
.menu_dot_btli li {
  list-style-type: none;
  line-height: 0.1;
  margin-bottom: 3px;
  margin-left: 19px;
}
.menu_dot_btli li:before {
  content: "‧";
  color: #000000;
  font-size: 1.4rem;
  padding-right: 8px;
  margin-left: -15px;
}
.menu_dot_btli li a {
  color: #000000;
}
.menu_dot_btli li a:hover {
  color: #76063C;
  text-decoration: none !important;
  cursor: pointer !important;
}

.inside_dot {
  font-size: 1rem;
  margin-left: 20px;
}
.inside_dot.noml {
  margin-left: 0;
}
.inside_dot li {
  list-style: none;
  display: flex; /* 改用 flex */
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 8px;
  color: #444;
}

.inside_dot li:before {
  content: "‧";
  color: #333;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1;
  margin-right: 8px;
  flex-shrink: 0;
}

.inside_dot li a {
  color: #000000;
  transition: color 0.2s ease; /* 增加顏色切換的平滑感 */
  word-break: break-word;     /* 窄空間必備：防止長型號撐破容器 */
}

.inside_dot li a:hover {
  color: #76063C;
  text-decoration: none !important;
  cursor: pointer !important;
}

.Sche_icon {
  width: 100%;
  margin: 0 auto;
  padding-bottom: 20px;
}
.Sche_icon img {
  width: 100%;
}
.Sche_icon img.withbrown {
  filter: brightness(0) saturate(0%) invert(60%) sepia(50%) saturate(200%) hue-rotate(365deg) brightness(90%) contrast(120%);
}

.chassis_pic {
  width: 70%;
  margin: 0 auto 30px;
  mix-blend-mode: darken;
}
.chassis_pic img {
  width: 100%;
}

.bk_dot_btli {
  font-size: 1rem;
  margin-bottom: 40px;
}
.bk_dot_btli li {
  list-style-type: none;
  line-height: 28px;
  margin-bottom: 3px;
  margin-left: 30px;
  font-size: 1rem;
  text-indent: -15px;
}
.bk_dot_btli li:before {
  content: "‧";
  color: #76063C;
  font-size: 1.4rem;
  padding-right: 8px;
  margin-left: -15px;
}
.bk_dot_btli li a {
  color: #000000;
  line-height: 28px;
}
.bk_dot_btli li a:hover {
  color: #76063C;
  text-decoration: none !important;
  cursor: pointer !important;
}

.c11_dot_btli {
  font-size: 1rem;
  margin-bottom: 40px;
}
.c11_dot_btli li {
  list-style-type: none;
  line-height: 1.2;
  margin-bottom: 3px;
  margin-left: 19px;
}
.c11_dot_btli li:before {
  content: "‧";
  color: #EBD1BA;
  font-size: 1.4rem;
  padding-right: 8px;
  margin-left: -15px;
}

.Stock_Information_box {
  width: 100%;
  margin-bottom: 60px;
}
.Stock_Information_box h2 {
  font-size: 1.5rem;
  line-height: 1.2;
  margin-bottom: 8px;
  font-weight: bolder;
  margin-bottom: 20px;
}
.Stock_Information_box h3 {
  font-size: 1.1rem;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 600;
  margin-bottom: 10px;
}
.Stock_Information_box p {
  font-size: 1rem;
  margin-bottom: 20px;
  line-height: 1.4;
  text-align: justify;
  text-justify: inter-ideograph;
}
.Stock_Information_box p > span {
  font-weight: 500;
}

.line_table_sample {
  margin-bottom: 10vh;
}

.line_table_sample th {
  font-size: 1.1rem;
  padding: 20px 16px; /* 稍微增加上下 Padding，讓表頭有呼吸感 */
  font-weight: 700;    /* 稍微加粗，增加層次感 */
  border-bottom: 2px solid #ddd;
  vertical-align: middle;
  color: #333;
}

.line_table_sample td {
  font-size: 1rem;
  padding: 18px 16px; /* 增加一點內距 */
  border-bottom: 1px solid #D1D1D1; /* 線條顏色稍微加深一點點，在灰色背景上才清楚 */
  vertical-align: top; /* 建議改為 top，長文字對齊較美觀 */
  line-height: 1.7;    /* 重要：增加行高，長內容才舒服 */
  color: #555;
}

/* 針對原本就有的 content_table 微調 */
.line_table_sample .content_table th,
.line_table_sample .content_table td {
  text-align: left;
  font-size: 0.95rem; /* 稍微放大一點點 */
}

/* 增加一個 Hover 效果，這不會影響版面，但能增加互動感 */
.line_table_sample tr:hover td {
  background-color: rgba(255, 255, 255, 0.5); /* 在灰色背景上產生微亮效果 */
}
.pd1x_table_sample {
  border-collapse: collapse;
  border: 1px solid #EAEAEA;
}
.pd1x_table_sample.noborder {
  border: 0;
}
.pd1x_table_sample th {
  border: 1px solid #EAEAEA;
  font-size: 1rem;
  padding: 16px;
  font-weight: 500;
  text-align: center;
  vertical-align: middle;
}
.pd1x_table_sample td {
  border: 1px solid #EAEAEA;
  font-size: .9rem;
  padding: 16px;
  font-weight: 500;
  text-align: center;
}
.pd1x_table_sample td.bgc1 {
  background-color: #EAEAEA;
}
.pd1x_table_sample td.bgc2 {
  background-color: #f4f4f4 !important;
}
.pd1x_table_sample td.bgc3 {
  background-color: #FAFAFA;
}
.pd1x_table_sample .bggray3 td {
  background-color: #FAFAFA;
}

.table_sample th {
  font-size: 1rem;
  padding: 16px;
  font-weight: bold;
  text-align: center;
  border: 2px solid #ffffff;
  vertical-align: middle;
}
.table_sample th.bgc1 {
  background-color: #E9DBC7;
}
.table_sample th.bgc2 {
  background-color: #F6EFE5;
}
.table_sample th.bgc3 {
  background-color: #E7e0c9;
}
.table_sample td {
  font-size: 0.9rem;
  vertical-align: middle;
  padding: 16px;
  font-weight: normal;
  border: 2px solid #ffffff;
  text-align: center;
}
.table_sample td.bgc1 {
  background-color: #EAEAEA;
}
.table_sample td.bgc2 {
  background-color: #f4f4f4;
}
.table_sample td.bgc3 {
  background-color: #FAFAFA;
}
.table_sample td a {
  color: #000;
}
.table_sample td a:hover {
  color: #76063C;
}
.table_sample table {
  border-collapse: collapse;
}
.table_sample table.table_about.tb1 {
  margin-bottom: 40px;
  margin-top: 15px;
  width: 100%;
}
.table_sample table.table_about.tb1 tr.jumpcolor:nth-child(even) th {
  background-color: #F6EFE5;
}
.table_sample table.table_about.tb1 tr.jumpcolor:nth-child(even) td {
  background-color: #f4f4f4;
}
.table_sample table.table_about.tb1 th {
  font-weight: 600;
  text-align: center;
}
.table_sample table.table_about.tb1 th.bgc1 {
  background-color: #E9DBC7;
}
.table_sample table.table_about.tb1 th.bgc2 {
  background-color: #F6EFE5;
}
.table_sample table.table_about.tb1 th.bgc3 {
  background-color: #fbf4e9;
}
.table_sample table.table_about.tb1 td.bgc1 {
  background-color: #EAEAEA;
}
.table_sample table.table_about.tb1 td.bgc2 {
  background-color: #f4f4f4;
}
.table_sample table.table_about.tb1 td.bgc3 {
  background-color: #FAFAFA;
}
.table_sample table.table_about.gofix {
  table-layout: fixed;
}
.table_sample table .w20 {
  width: 24% !important;
}
.table_sample table .aleft {
  text-align: left !important;
}
.table_sample table .aleft a {
  display: inline-block;
  width: 130px;
}
.table_sample table.autoColor tr th {
  background-color: #E7e0c9;
}
.table_sample table.autoColor tr td {
  background-color: #f4f4f4;
}
.table_sample table.autoColor tr:nth-child(even) th {
  background-color: #fbf4e9;
}
.table_sample table.autoColor tr:nth-child(even) td {
  background-color: #FAFAFA;
}
@media (max-width: 768px) {
    /* 1. 核心滑動容器：確保這三個 Class 的外層都能左右滑動 */
    .line_table_sample,
    .pd1x_table_sample,
    .table_sample {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important; /* 開啟水平捲動 */
        -webkit-overflow-scrolling: touch; /* 讓手機滑動更順暢 */
    }

    /* 2. 解決字變長的關鍵：強制表格內部不要被擠壓 */
    .line_table_sample table,
    .pd1x_table_sample table,
    .table_sample table {
        table-layout: auto !important; /* 破解 gofix 的強制寬度 */
        min-width: 650px !important;    /* ⭐ 強制表格寬度大於手機螢幕，字就不會變長條 */
        width: auto !important;
    }

    /* 3. 統一縮小文字與間距 */
    .line_table_sample th, .line_table_sample td,
    .pd1x_table_sample th, .pd1x_table_sample td,
    .table_sample th, .table_sample td {
        padding: 10px 8px !important;
        font-size: 0.85rem !important;
        white-space: nowrap !important; /* ⭐ 強制文字不換行 */
    }

    /* 4. 特別處理描述欄位：字多的話可以換行，但給足空間 */
    .table_about td.aleft {
        white-space: normal !important;
        min-width: 250px !important;
    }
}
.Spokesperson_table_sample th {
  font-size: 1.1rem;
  padding: 16px;
  font-weight: 500;
  border-bottom: 1px solid #E6D7C1;
  vertical-align: middle;
}
.Spokesperson_table_sample td {
  padding: 16px;
  font-weight: 500;
  border-bottom: 1px solid #E6D7C1;
  font-size: 1.1rem;
}

.StockTransfer_bg {
  background-color: #F6EFE5;
  border-radius: 30px;
  padding: 3.1em;
  margin-bottom: 4em;
  display: inline-block;
}

/* --- 1. 區域佈局隔離 (不影響全站) --- */
.solutions_flexblox {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: flex-start;
    padding: 20px 0;
}

/* --- 2. 卡片容器：懸浮感與陰影 --- */
.solutions_flexblox .solutions_fone {
    flex: 0 0 calc(33.333% - 20px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
    position: relative;
    overflow: hidden;
}

/* 懸浮時卡片微幅往上飄 */
.solutions_flexblox .solutions_fone:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* --- 3. 圖片區塊：固定比例 16:9 --- */
.solutions_flexblox .so_order {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-top: 56.25%; /* 16:9 比例 */
}

.solutions_flexblox .solutions_pic {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
}

/* 確保不影響 Header 放大鏡 */
.solutions_flexblox .solutions_pic img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: transform 0.6s ease;
    display: block;
}

.solutions_flexblox .solutions_fone:hover .solutions_pic img {
    transform: scale(1.1);
}

/* --- 4. 文字內容與顏色控制 --- */
.solutions_flexblox .solutions_font {
    text-align: left;
    padding: 25px 25px 0 25px !important;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.solutions_flexblox .solutions_font h2,
.solutions_flexblox .solutions_font h2 a {
    color: #333 !important;
    text-decoration: none !important;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.4;
    transition: color 0.3s ease;
    margin-bottom: 10px;
    display: block;
}

/* 💡 修正：滑鼠靠近整張卡片 (.solutions_fone) 時，標題就變品牌紫 */
.solutions_flexblox .solutions_fone:hover .solutions_font h2,
.solutions_flexblox .solutions_fone:hover .solutions_font h2 a {
    color: #76063C !important;
}

/* --- 5. 列表展開與漸層遮罩 --- */
.solutions_flexblox .solutions_font ul {
    margin: 10px 0 0 0;
    padding: 0;
    list-style: none;
    max-height: 195px; /* 收合高度 */
    overflow: hidden;
    transition: max-height 0.6s ease;
    position: relative;
}

/* 💡 新增：針對項目本身行距與項目間距調整 */
.solutions_flexblox .solutions_font ul li {
    line-height: 1.3;      /* 項目本身文字的行距 (不再擠在一起) */
    margin-bottom: 12px;   /* 項目與項目之間的距離 (拉寬一點) */
}

/* 💡 移除最後一個項目的 margin，避免底部多出空白 */
.solutions_flexblox .solutions_font ul li:last-child {
    margin-bottom: 0;
}

/* 底部漸層：提示還有更多內容 */
.solutions_flexblox .solutions_font:not(.open) ul::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 40px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    pointer-events: none;
}

/* 💡 修正：加上 !important 確保展開時的 max-height 絕對生效 */
.solutions_flexblox .solutions_font.open ul {
    max-height: 2000px !important;
}

.solutions_flexblox .solutions_font ul li a {
    color: #333 !important;
    text-decoration: none !important;
    font-size: 1rem;
    transition: all 0.3s ease;
    display: inline-block; /* 確保行距表現穩定 */
}

.solutions_flexblox .solutions_font ul li a:hover {
    color: #76063C !important;
    font-weight: 700;
}

/* --- 6. 展開按鈕：隨內容排列，解決底部白塊 --- */
.solutions_flexblox .chev_line {
    width: 100%;
    text-align: center;
    cursor: pointer;
    padding: 15px 0 25px 0; /* 控制卡片底部留白 */
    display: block;
}

.solutions_flexblox .chevron_icon {
    display: inline-block;
    background: #f4f4f4;
    padding: 6px 20px;
    border-radius: 20px;
    transition: background 0.3s;
}

.solutions_flexblox .chev_line:hover .chevron_icon {
    background: #e0e0e0; /* 💡 稍微調深一點點，讓 Hover 更有感 */
}

.solutions_flexblox .chevron_icon img {
    width: 16px !important;
    transition: transform 0.4s;
}

/* 展開時箭頭旋轉 */
.solutions_flexblox .solutions_font.open .chevron_icon img {
    transform: rotate(180deg);
}

/* --- 7. RWD 手機版 --- */
@media (max-width: 992px) {
    .solutions_flexblox .solutions_fone { flex: 0 0 calc(50% - 15px); }
}
@media (max-width: 768px) {
    .solutions_flexblox .solutions_fone { flex: 0 0 100%; }
}
.job_p {
  margin-bottom: 40px;
  font-size: 1rem;
}

.Positions_wrapper {
  width: 50%;
  margin: 0 auto;
  padding: 0 0 10vh 0;
}

/* --- 1. 基礎結構與動畫 (共同樣式) --- */
.Open_Positionsbg {
    /* 移除這裡的 background-color，交給下方的 nth-child 控制 */
    border-radius: 30px;
    padding: 20px;
    margin-bottom: 40px;

    /* 懸浮動畫設定 */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    z-index: 1;
}

/* 懸浮時的灰黑色陰影效果 */
.Open_Positionsbg:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12); /* 專業灰黑陰影 */
    z-index: 2;
}

/* --- 2. 顏色定義 (背景色邏輯) --- */
.Open_Positionsbg:nth-child(odd) {
    background-color: #E7e0c9;
}

.Open_Positionsbg:nth-child(even),
.Open_Positionsbg.c7_bg {
    background-color: #F6EFE5;
}

/* --- 3. White Paper 內部佈局 (桌機版) --- */
.Open_Positionsbg.whitepaper {
    display: flex;
    align-items: center;
}

.Open_Positionsbg.whitepaper .papericon {
    flex: 0 0 10em;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 25px;
    padding: 35px 25px;
    background: #D7CBA6;
    border-radius: 30px;
    transition: transform 0.4s ease;
}

/* 懸浮時圖標微動 */
.Open_Positionsbg.whitepaper:hover .papericon {
    transform: scale(1.05);
}

.Open_Positionsbg.whitepaper .papericon img {
    width: 70%;
    filter: brightness(0) invert(1);
    transform: scale(1.1) rotate(-5deg);
    transition: transform 0.4s ease;
}

.Open_Positionsbg.whitepaper .wht_paper_box {
    flex: 1;
}

.Open_Positionsbg.whitepaper .download_icon {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4em;
    padding: 20px;
    color: rgba(0,0,0,0.2); /* 預設淡色 */
    transition: all 0.3s ease;
}

/* 懸浮時下載圖示變色 */
.Open_Positionsbg.whitepaper:hover .download_icon {
    color: #76063C;
    transform: translateX(5px);
}

/* --- 4. 手機版 RWD 優化 (標題在圖標下方，隱藏內容與下載鍵) --- */
@media (max-width: 767px) {
    .Open_Positionsbg.whitepaper {
        flex-direction: column; /* 垂直排列 */
        text-align: center;
        padding: 30px 20px;
    }

    .Open_Positionsbg.whitepaper .papericon {
        flex: 0 0 auto;
        margin: 0 0 20px 0; /* 改為下方間距 */
        width: 100px;
        height: 100px;
        padding: 20px;
    }

    .Open_Positionsbg.whitepaper .wht_paper_box {
        width: 100%;
    }

    /* 手機版隱藏 MetaDesc 內容 */
    .Open_Positionsbg.whitepaper .wht_paper_box p {
        display: none !important;
    }

    .Open_Positionsbg.whitepaper h3 {
        font-size: 1.3rem;
        margin: 0 !important;
    }

    /* 手機版隱藏下載圖示 */
    .Open_Positionsbg.whitepaper .download_icon {
        display: none !important;
    }
}
.open_grid {
  border-radius: 30px;
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 4fr 1fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 10px;
  /* 設定左右間距 */
  grid-row-gap: 20px;
  /* 設定上下間距 */
  justify-content: center;
  align-items: center;
}

.job_font {
  float: left;
  margin-top: 24px;
  width: 18em;
}
.job_font h3 {
  font-size: .8rem;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 400;
}
.job_font h2 {
  font-size: 1.3rem;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 400;
}
.job_font p {
  font-size: 1rem;
  margin-bottom: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.jogicon {
  float: left;
  margin-right: 30px;
  width: 10em;
}
.jogicon img {
  width: 100%;
}

.job_right {
  float: right;
  margin-top: 39px;
  width: 4em;
}
.job_right img {
  width: 100%;
}

.ax_p {
  font-size: 1.0rem;
  margin-bottom: 20px;
  line-height: 30px;
  text-align: center;
  max-width: 1000px;
  /* 控制段落最大寬度 */
  margin-left: auto;
  /* 置中 */
  margin-right: auto;
  /* 置中 */
}

.ask_h3 {
  font-size: 1.1rem;
  margin-bottom: 20px;
  margin-top: 30px;
  font-weight: 600;
}

.other_line {
  border-bottom: 1px solid #ededed;
  padding-bottom: 10px;
}
.other_line.dark {
  border-bottom: 1px solid #cccccc;
  padding-bottom: 10px;
}
.other_line.red {
  border-bottom: 1px solid #76063C;
  padding-bottom: 10px;
}
.other_line input {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border-radius: 4px;
}

.busiess_ipt {
  display: inline-block;
  margin-right: 10px;
}

.ipt_p {
  font-size: 0.9rem;
}
.ipt_p input {
  margin-right: 10px;
}

.banner_font {
  width: 70%;
  margin: 0 auto;
}
.banner_font h2 {
  color: #ffffff;
  font-size: 3.5rem;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 700;
}
.banner_font p {
  color: #ffffff;
  font-size: 1.2rem;
  margin-bottom: 20px;
  line-height: 1.5;
}

.bn_new {
  color: #ffffff;
  padding: 4px 8px;
  margin-bottom: 10px;
  border-radius: 50px;
  background-color: #750739;
  display: inline-block;
}

.uikit_bg {
  background-color: #f2f2f2;
  padding: 10vh;
}

.sel_p {
  font-size: 1rem;
  display: inline-block;
}

.sel_down {
  display: inline-block;
}
.sel_down select {
  font-size: 1rem;
  cursor: pointer;
}

.float_right {
  float: right;
}

.float_left {
  float: left;
}

.clean {
  zoom: 1;
}
.clean:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.fortoptitle {
  padding: 10vh 0 5vh 0;
}

.address_google_Bg {
  margin-bottom: 5vh;
  border-radius: 30px;
  width: 100%;
  background-color: #f4f4f4;
}

.google_sale_grid {
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 1fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 10px;
  /* 設定左右間距 */
  grid-row-gap: 20px;
  /* 設定上下間距 */
  justify-content: center;
  align-items: center;
}

.sale_map_ofl {
  border-radius: 30px;
  overflow: hidden;
}

.sale_mapfont {
  padding: 30px;
}
.sale_mapfont h2 {
  font-size: 1.5rem;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 600;
}
.sale_mapfont h3 {
  font-size: 1.3rem;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 500;
}
.sale_mapfont p {
  font-size: 1.0rem;
  margin-bottom: 20px;
}

.line {
  background-color: #CBCBCB;
  width: 100%;
  height: 1px;
  margin: 20px 0;
}

.add_ft {
  display: inline-block;
  vertical-align: middle;
  font-size: 1rem;
  font-weight: 500;
}

.add_icon {
  display: inline-block;
  vertical-align: middle;
  width: 14px;
}
.add_icon img {
  width: 100%;
}

.add_gogmp {
  display: inline-block;
  vertical-align: middle;
  color: #76063C;
}

.map_table td {
  font-size: .9rem;
}
.map_table th {
  font-size: .9rem;
  font-weight: 600;
  line-height:20px;
}

.channel_parteners_map {
  width: 100%;
}
.channel_parteners_map img {
  width: 100%;
}

.partner_Bg {
  background-image: url("../images/partnerzone_bg.jpg");
  width: 100%;
  background-size: cover;
}

.partner_grid {
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 1fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 10px;
  /* 設定左右間距 */
  grid-row-gap: 20px;
  /* 設定上下間距 */
  justify-content: center;
  align-items: center;
}

.partner_font {
  width: 80%;
  margin: 0 auto;
}
.partner_font h1 {
  color: #ffffff;
  font-size: 2.8rem;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 500;
}
.partner_font h2 {
  color: #ffffff;
  font-size: 2.8rem;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 500;
}
.partner_font p {
  color: #ffffff;
  font-size: 1rem;
  margin-bottom: 20px;
}
.partner_font h3 {
  color: #ffffff;
  font-size: 1.6rem;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 600;
}

.parwhite_bg {
  padding: 40px;
  background-color: #ffffff;
  border-radius: 30px;
  box-shadow: 1px 2px 2px 2px rgba(0, 0, 0, 0.1);
}
.parwhite_bg h2 {
  color: #545454;
  font-size: 1.5rem;
  margin-top: 11px;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 500;
}
.parwhite_bg p {
  color: #545454;
  font-size: .9rem;
  margin-bottom: 20px;
  font-weight: 400;
}

.par_login_Box {
  width: 75%;
  margin: 0 auto;
}

/* 1. 先修改原本的 .login_btn，加入動畫過渡和基礎陰影 */
.login_btn {
  background-color: #76063C;
  border-radius: 50px;
  padding: 8px 40px !important;
  color: #ffffff;
  display: inline-block;
  font-weight: 600;
  text-decoration: none; /* 確保沒有底線 */
  transition: all 0.3s ease-in-out;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.3s ease-in-out;
}

/* 2. 新增 Hover（滑鼠經過）時的浮起效果 */
.login_btn:hover {
  transform: translateY(-3px);
  -webkit-transform: translateY(-3px); /* 針對舊版 Safari/Chrome */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
  color: #ffffff !important;
  text-decoration: none !important; /* 確保滑鼠經過時沒有底線 */
  filter: brightness(1.1);
  }

/* 3. 新增 Active（滑鼠按下）時的沉下效果 (增加點擊感) */
.login_btn:active {
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.logbtn_box {
  margin-top: 30px;
}
.logbtn_box.npsw {
  margin-top: 0;
}

.email_bg {
  border-radius: 50px;
  background-color: #EFEFEF;
  padding: 13px 30px;
  margin-bottom: 20px;
}
.email_bg.np {
  padding: 5px 10px;
}

.mail_input {
  width: 90%;
}
.mail_input input {
  background-color: #EFEFEF;
  width: 100%;
}

.padding_2x {
  padding: 0 20px;
}

.pic_log {
  padding: 25px;
  display: inline-block;
  border-radius: 100px;
  background-color: #ffffff;
  box-shadow: 1px 2px 2px 2px rgba(0, 0, 0, 0.1);
}

.log_top {
  margin-top: -90px;
}

.pd_c11_Bg {
  background-color: #F6EFE5;
  border-radius: 30px;
  padding: 3vw;
}

.Ltd_c8_bg {
  background-color: #E8F6FF;
}

.exta_product_grid {
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 1fr 1fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 30px;
  /* 設定左右間距 */
  grid-row-gap: 20px;
  /* 設定上下間距 */
  justify-content: center;
  align-items: top;
  margin-top: 20px;
}
.exta_product_grid a {
  color: inherit !important;
  text-decoration: none !important;
}

.extafont_box h3 {
  font-size: 1.2rem;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: bold;
  margin-top: 20px;
}
.extafont_box h2 {
  font-size: 2.1rem;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 600;
  margin-top: 20px;
}
.extafont_box p {
  font-size: 1rem;
  margin-bottom: 20px;
}
.extafont_box p.elp {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.extafont_box:hover {
  text-decoration: none;
}
.extafont_box:hover p.pdis {
  color: #76063C;
}

.mg_right {
  margin-right: 10px;
}

.oder_p {
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
}

.oder_sel {
  display: inline-block;
  margin-right: 8px;
  margin-bottom: 10px;
  margin-left: 5px;
}
.oder_sel select {
  font-size: 0.9rem;
  padding: 10px;
  border: 1px solid #dedede;
  height: 42px;
  border-radius: 4px;
  color: #515151;
  padding-right:35px;
}
.oder_sel.cp {
  display: block;
}

.oder_box {
  margin-bottom: 40px;
}

.submit_redbtn {
  color: #ffffff;
  padding: 4px 14px;
  margin-bottom: 10px;
  border-radius: 50px;
  background-color: #750739;
  display: inline-block;
  font-weight: 600;
}

.tabview_table {
  width: 100%;
}
.tabview_table th {
  background-color: #EDEDED;
  font-size: .9rem;
  padding: 16px;
  font-weight: bold;
  text-align: left;
}
.tabview_table td {
  background-color: #ffffff;
  font-size: .8rem;
  line-height:18px;
  padding: 16px;
  font-weight: normal;
  border-bottom: 1px solid #DEDEDE;
  vertical-align: middle;
}
.tabview_table td:nth-child(1) {
  text-align: left;
}
.tabview_table td:nth-child(1) img {
  text-align: center;
}
.tabview_table td:nth-child(2) {
  text-wrap: nowrap;
  font-weight: bold;
  }
.tabview_table td:nth-child(8) {
  text-wrap: nowrap;
  font-weight: bold;
}


/* --- 手機穩定優化 (RWD) --- */
@media screen and (max-width: 768px) {
    .tabview_table {
        display: block;
        width: 100%;
        overflow-x: auto; /* 允許橫向滑動 */
        -webkit-overflow-scrolling: touch;
    }

    /* 重點：讓手機版的內容允許換行 */
    .tabview_table td,
    .tabview_table th {
        white-space: normal !important; /* 💡 改回自動換行 */
        word-break: break-word !important; /* 確保長單字不會撐破版面 */
        min-width: 120px; /* 給予一個最小寬度，避免格子太窄 */
    }

    /* 如果第二欄原本有強制 nowrap，這裡也要解除 */
    .tabview_table td:nth-child(2) {
        white-space: normal !important;
        padding-left: 12px !important;
    }
}

.ky_pic {
  width: 80px;
}
.ky_pic img {
  width: 100%;
}

.cg_grid {
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 1fr 1fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 30px;
  /* 設定左右間距 */
  grid-row-gap: 30px;
  /* 設定上下間距 */
  justify-content: center;
  align-items: start;
}
.cg_grid a {
  color: #333;
}
.cg_grid a:hover {
  text-decoration: none;
  color: #76063C;
}

.cg_graybg {
  background-color: #FAFAFA;
  padding: 20px;
  min-height: 100%;
  position: relative;
  padding-bottom: 100px;
  border-radius: 15px;
}

.cgpd_pic {
  position: relative;
  width: 80%;
  margin: 0 auto;
  mix-blend-mode: darken;
  max-width: 280px;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cgpd_pic img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
.cgpd_pic.zoom img {
  transform: scale(1, 1);
  transition: all 300ms ease-out;
}
.cgpd_pic.zoom img:hover {
  transform: scale(1.2, 1.2);
}

.pinfopid {
  position: relative;
}

.new_badge {
  position: absolute;
  top: -25px;
  width: 30px;
  text-align: center;
  background: #76063C;
  color: #fff;
  font-size: 0.5rem;
  z-index: 10;
  font-weight: bold;
  border-radius: 5px;
}

.prodcutname {
  font-size: 1.2rem;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: bold;
  margin-top: 20px;
}

.pink_new {
  color: #ffffff;
  padding: 4px 8px;
  margin-bottom: 10px;
  border-radius: 50px;
  background-color: #76063C;
  display: inline-block;
  height: 30px;
}
.pink_new.nobg {
  background-color: transparent;
}

.red_new {
  color: #ffffff;
  padding: 4px 8px;
  margin-bottom: 10px;
  border-radius: 50px;
  background-color: #76063C;
  display: inline-block;
}
/* --- 手機版 .red_new 標籤優化 --- */
@media (max-width: 767px) {
  .red_new {
    font-size: 0.75rem !important;   /* 💡 新增：確保手機上字體精緻（約12px），不會太大突兀 */
    padding: 3px 8px !important;      /* 💡 微調：稍微縮減上下內距，讓標籤更扁平好看 */
    white-space: nowrap !important;   /* 💡 核心防禦：強迫文字絕對不准換行，防止標籤變形 */
    margin-bottom: 8px !important;    /* 💡 微調：稍微縮小下邊距，讓手機版版面更緊湊 */
    line-height: 1 !important;        /* 💡 新增：校正行高，確保文字在圓圈正中央不上下偏移 */
  }
}

.blue_new {
  color: #3985CB;
  padding: 4px 8px;
  margin-bottom: 10px;
  border-radius: 50px;
  border: 1px solid #3985CB;
  display: inline-block;
}


.cgpd_table {
  width: 100%;
}
.cgpd_table th {
  font-size: 1rem;
  padding: 16px;
  font-weight: bold;
  border-bottom: 1px solid #DEDEDE;
}
.cgpd_table td {
  padding: 16px;
  font-weight: normal;
  border-bottom: 1px solid #DEDEDE;
  vertical-align: middle;
}
.cgpd_table .active {
  background-color: #D7CBA6;
  color: #5C4D1D;
}
/* --- 手機版表格自適應 RWD --- */
@media (max-width: 767px) {
  
  /* 1. 💡 防爆版核心：如果表格欄位較多，這行能讓客人在手機上「橫向滑動」表格，網頁絕對不跑版 */
  .cgpd_table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* 讓 iPhone/iOS 滑動感更滑順 */
    width: 100%;
  }

  /* 2. 💡 釋放空間：桌機版的 16px 內距在手機太佔空間了，改成 10px 欄位才不會被擠扁 */
  .cgpd_table th {
    padding: 12px 10px !important;   /* 上下 12px，左右 10px */
    font-size: 0.9rem !important;    /* 字體稍微縮小一點點 */
    white-space: nowrap;             /* 確保表頭標題一氣呵成，不會莫名其妙斷行 */
  }

  .cgpd_table td {
    padding: 12px 10px !important;   /* 同步縮小內容區的內距 */
    font-size: 0.85rem !important;   /* 內容字體縮小，提升手機閱讀舒適度 */
  }
}

.addtocompare {
  margin: 30px 0;
  font-size: 1rem;
  text-align: center;
  font-weight: 500;
  position: absolute;
  bottom: 0px;
  width: 90%;
}

.sorry_face {
  width: 110px;
  margin: 0 auto;
  margin-bottom: 30px;
}
.sorry_face img {
  width: 100%;
}

.sorry_font {
  width: 70%;
  margin: 0 auto;
  text-align: center;
}
.sorry_font h2 {
  font-size: 1.5rem;
  line-height: 1.2;
  margin-bottom: 8px;
  font-weight: 500;
  margin-bottom: 20px;
}
.sorry_font h3 {
  font-size: 1.15rem;
  line-height: 1.2;
  margin-bottom: 8px;
  margin-top: 40px;
  font-weight: 400;
}
.sorry_font p {
  font-size: .9rem;
  margin-bottom: 20px;
  line-height: 1.5;
}

.sorry_dot_li {
  font-size: .8rem;
  margin-bottom: 40px;
}
.sorry_dot_li li {
  list-style-type: none;
  line-height: 1;
  margin-left: 25px;
}
.sorry_dot_li li:before {
  content: "‧";
  color: #D7CBA6;
  font-size: 1.4rem;
  padding-right: 8px;
  margin-left: -15px;
}

.limit_sel {
  text-align: center;
  padding-bottom: 20px;
  margin-right: 8px;
  font-size: 1.4em;
}

.limit_p {
  display: inline-block;
}

.limit_wrap {
  margin: 40px;
}

.chk_bx {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}

.chk_p {
  display: inline-block;
  vertical-align: middle;
  font-size: 1rem;
}

.full_graybg {
  background-color: #f4f4f4;
  padding: 4vh 0;
}

.Comparison_grid {
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 1fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 60px;
  /* 設定左右間距 */
  grid-row-gap: 30px;
  /* 設定上下間距 */
  justify-content: center;
  align-items: center;
}

.comwhite_Bg {
  position: relative;
  padding: 10%;
  background-color: #ffffff;
  box-shadow: 6px 7px 19px 2px rgba(0, 0, 0, 0.1);
  margin: 20px;
  text-align:center;
}

.comp_wrapper {
  width: 90%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 10vh 0;
}
@media screen and (max-width: 768px) {
    .comp_wrapper {
        /* 💡 關鍵 1：把原本貼邊的 90% 稍微放大到 92%~94%，讓手機版有更多橫向空間 */
        width: 94% !important;

        /* 💡 關鍵 2：把恐怖的 10vh（大空白）縮小成固定的 40px 或 35px
           這樣區塊跟區塊之間才會緊湊、好閱讀，徹底解決手機版上下留白太多的問題！ */
        padding: 25px 0 !important;
    }
}
.comp_wrapper.pb3vh {
  padding-bottom: 3vh;
}
.comp_wrapper.bnh {
  height: 450px;
  display: flex;
}
.comp_wrapper.mw1100 {
  max-width: 1100px;
}
.comp_wrapper.pt3vh {
  padding-top: 3vh;
}
.comp_wrapper.bigbanner {
  width: 100% !important;
  max-width: 100% !important;
  padding-top: 0 !important;
}

.Comparisonfont_box {
  margin-top: 5vh;
}
.Comparisonfont_box h2 {
  font-size: 1.5rem;
  line-height: 1.2;
  margin-bottom: 8px;
  font-weight: 500;
  margin-bottom: 20px;
  border-bottom: 1px solid #C3C3C3;
  padding-bottom: 20px;
}

.jun_font {
  margin-bottom: 40px;
  margin-left: 20px;
}
.jun_font h3 {
  font-size: 1.15rem;
  line-height: 1.2;
  margin-bottom: 8px;
  margin-top: 40px;
  font-weight: 600;
}
.jun_font p {
  font-size: 1rem;
  margin-bottom: 20px;
  line-height: 28px;
}

.close_comicon {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 29px;
  cursor: pointer;
}
.close_comicon img {
  width: 100%;
}

.comp_addtocompare {
  text-align: center;
}
.comp_addtocompare label {
  font-size: 1rem;
  text-align: center;
  font-weight: normal;
  color: #333;
}

.year_bow {
  display: inline-block;
  margin-right: 10px;
  width: 100px;
  height: 100px;
  background-color: #F6EFE5;
  text-align: center;
  padding-top: 40px;
  border-radius: 20px;
  font-size: 1rem;
  font-weight: normal;
}
.year_bow a {
  color: #000;
}
.year_bow.on {
  background-color: #D7CBA6;
}

.Annua_p {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 20px;
}

.ann_mg {
  margin-bottom: 40px;
}

.Investor_grid {
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 20% 80%;
  /*設定 Grid 的寬度*/
  grid-column-gap: 30px;
  /* 設定左右間距 */
  grid-row-gap: 30px;
  /* 設定上下間距 */
  justify-content: center;
  align-items: center;
}

.inv_year {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  letter-spacing: 1px;
}
@media (max-width: 768px) {
  .inv_year {
	font-size: 0.8rem;
    text-align: center;
    width: 100%;
    display: block;
    letter-spacing: 2px; /* 增加字距讓年份更有質感 */
  }
}

/* --- 1. 文字與連結設定：去底線 --- */
.inv_p {
  font-size: 1rem;
  line-height: 1.5;
}

.inv_p a {
  color: #000;
  text-decoration: none !important; /* 徹底移除底線 */
  transition: color 0.3s ease;
}

.inv_p a:hover {
  color: #76063C;
  text-decoration: none !important; /* 滑鼠經過也維持無底線 */
}


/* --- 2. 卡片背景設定：更輕微的懸浮感 --- */
.Inv_c11_Papers_bg {
  background-color: #f4f4f4;
  border-radius: 30px;
  padding: 3.0em;
  max-width: 1100px;
  margin: 0 auto;
  margin-bottom: 2em;

  /* 初始狀態：只有一點點深度感 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);

  /* 動畫時間稍微縮短，讓反應更乾脆 */
  transition: transform 0.3s ease-out,
              box-shadow 0.3s ease-out,
              background-color 0.3s ease !important;

  cursor: pointer;
}


/* --- 3. 輕微浮起效果 (微調位移與影子) --- */
.Inv_c11_Papers_bg:hover {
  /* ⭐ 效果少一點點：位移縮減到 3px */
  transform: translateY(-3px) !important;

  /* ⭐ 影子更內斂：模糊度與偏移量都減小 */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.06) !important;

  /* 維持輕微的變色回饋 */
  background-color: #ffffff !important;
}


/* --- 4. 手機版優化 --- */
@media (max-width: 768px) {
  .Inv_c11_Papers_bg {
    padding: 1.5em !important;
    border-radius: 20px !important;
    /* 手機上關閉浮起效果，因為觸控不需要 hover */
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
  }
}
/* --- 基礎設定 --- */
.Parent_year_box .par_year {
  float: left;
  margin: 10px 10px 20px 0;
  width: 70px;
  height: 70px;
  background-color: #E7e0c9;
  text-align: center;
  font-size: 0.9rem;
  line-height: 70px;
  color: #333;
  font-weight: 600;
  border-radius: 20px;

  /* ⭐ 關鍵 1：讓降落也平滑，並使用高級貝茲曲線 */
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
              box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
              background-color 0.4s ease,
              color 0.4s ease !important;
}

.Parent_year_box .par_year a {
  color: #000;
  display: block;
  text-decoration: none !important; /* ⭐ 確保任何時候都沒底線 */
}

/* --- 滑鼠經過：浮起效果 --- */
.Parent_year_box .par_year:hover {
  background-color: #fbf4e9;
  color: #76063C;

  /* ⭐ 關鍵 2：輕微浮起 5px 並加上柔軟陰影 */
  transform: translateY(-5px) !important;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1) !important;
}

/* --- 大方塊 (.deep) 的特別處理 --- */
.Parent_year_box .par_year.deep {
  width: 140px;
  height: 140px;
  margin-right: 30px;
  background-color: #E7e0c9;
  /* 繼承父層 transition，不需要重寫 */
}

.Parent_year_box .par_year.deep a {
  color: #76063C;
  font-weight: bold;
  line-height: 140px;
  font-size: 1.4rem;
  background-color: #D7CBA6;
  border-radius: 20px;
  transition: background-color 0.4s ease !important; /* 內部背景也平滑 */
}

.Parent_year_box .par_year.deep:hover a {
  background-color: #76063C !important;
  color: #ffffff !important;           /* ⭐ 強制變白 */
  text-decoration: none !important;    /* 確保無底線 */
}

/* --- 點擊反饋 --- */
.Parent_year_box .par_year:active {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
}

.Company_bg {
  background-size: cover;
  background-image: url("../images/taipeicity.jpg");
  background-position: 20% 45%;
  min-height: 435px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -40px;
}
.Company_bg.career_bg {
  background-size: cover;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/careers_bg.jpg);
  background-position: 20% 100%;
}
.Company_bg.world_map {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/worldwide_bg.jpg");
  background-size: cover;
  background-position-y: 55%;
}
.Company_bg.Management_bg {
  background-size: cover;
  background-image: url("../images/management_bg.jpg");
  background-position: center center;
}
/* ---------------------------------
 * 原始的基底樣式（維持不動）
 * --------------------------------- */
.Company_bg.Case_bg {
  background-size: cover;
  background-image: url("../images/casestudies.jpg"); /* 舊頁面預設圖 */
  background-position: center center;
}

/* ---------------------------------
 * 🎯 針對新頁面 (Aid = 184) 覆蓋圖片
 * --------------------------------- */
.Company_bg.Case_bg.banner_184 {
  background-image: url("../images/industrial-focus.jpg"); /* 👈 換成你的新圖檔名 */
}

/* 🚀 未來如果有 Aid 205 的新單元，只要再追加這行就好 */
.Company_bg.Case_bg.banner_205 {
  background-image: url("../images/another-new-banner.jpg");
}

.Company_font_box {
  max-width: 950px;
  padding: 40px;
  text-align: center;
}
.Company_font_box h3 {
  text-align: center;
  font-size: 1.5em;
  font-weight: 400;
  margin-bottom: 4vh;
  line-height: 1.1em;
  color: #ffffff;
}
.Company_font_box h1, .Company_font_box h2 {
  text-align: center;
  font-size: 3.2em;
  font-weight: 700;
  margin-bottom: 2vh;
  line-height: 1.1em;
  color: #ffffff;
}
.Company_font_box p {
  color: #ffffff;
  font-size: 1.2rem;
  margin-bottom: 20px;
  line-height: 1.5;
  text-align: justify;
  text-justify: inter-ideograph;
  text-align: left;
}
.Company_font_box p.ta_cn {
  text-align: center;
}
.Company_font_box .bannerbtn {
  text-decoration: none;
  min-width: 100px;
}

.company_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center; /* 讓圖片與文字垂直居中對齊，質感會提升 */
    gap: 40px;
}

.cpblock.ff {
  margin: 0 40px;
}
.cpblock p {
  font-size: 1.8em !important;
  font-weight: 500;
  line-height: 1em;

}
.cpblock p.cpcp {
  font-weight: normal;
  line-height: 1.2em;
 }
.cpblock img {
    width: 100%;
    border-radius: 16px; /* 給圖片一點圓角，呼應你之前的設計 */
    box-shadow: 0 10px 25px rgba(0,0,0,0.05); /* 淡淡的灰色陰影 */
}

.gray_scye_bg {
  background-color: #FAFAFA;
  padding: 6vh 0;
}

.c11_bg {
  background-color: #F6EFE5;
  padding: 6vh 0;
}
.c11_bg.f4_bg {
  background-color: #f4f4f4;
}

.Ltd_c11_bg {
  background-color: #F6EFE5;
}

.vision_box {
  background-color: #F6EFE5;
  border-radius: 30px;
  height: 100%;
  padding: 40px;
  display: flex;
  align-items: center;
}
.v_mission {
  background-color: #ffffff;
  border: 1px solid #F6EFE5;
}
@media (max-width: 768px) {
  .vision_box {
    /* ⭐ 關鍵修改：將排列方向從水平改為垂直 */
    flex-direction: column;

    /* 讓內容在垂直排列後靠左對齊 (若想置中可改 center) */
    align-items: flex-start;

    height: auto;       /* 手機版高度由內容撐開，不要鎖死 100% */
    padding: 30px 20px; /* 稍微縮減內距，增加螢幕空間 */
    border-radius: 20px; /* 手機上圓角小一點比例較美 */
  }

  /* 如果裡面有圖片或圖示 */
  .vision_box img {
    margin-right: 0;    /* 取消電腦版的右邊距 */
    margin-bottom: 20px; /* 改為下方留白，推開標題 */
    max-width: 80px;    /* 手機版圖示縮小 */
  }

  /* 針對內容區塊 */
  .vision_box .content {
    width: 100%;
    text-align: left;
  }
}
.vision_box.c7_bg {
  background-color: #F6EFE5;
}
.vision_box.f4_bg {
  background-color: #f4f4f4;
}

.vis_left {
  display: inline-block;
  vertical-align: middle;
  width: 29%;
}
.vis_left img {
  width: 100%;
}

.Embedded_pic {
  width: 100%;
}
.Embedded_pic img {
  width: 100%;
}

.right_line {
  border-right: 1px solid #DCE2F4;
}

.darken_pic {
  margin: 30px auto 40px;
  width: 70%;
  height: 160px;
  margin-bottom: 10px;
  mix-blend-mode: darken;
  display: flex;
  justify-content: center;
  align-items: center;
}
.darken_pic img {
  width: 100%;
  max-width: 100%;
  /* 确保图片不会超出容器 */
  max-height: 100%;
}

.vis_right {
  display: inline-block;
  vertical-align: middle;
  width: 70%;
}

.pink_bg {
  background-color: #FFEAE9;
}

.white_bg {
  background-color: #ffffff;
}

.GoGreen_box {
  width: 75%;
  margin: 0 auto;
}

.GoGreen_left {
  display: inline-block;
  vertical-align: middle;
  width: 20%;
  margin-right: 30px;
}
.GoGreen_left img {
  width: 100%;
}

.jf_font {
  text-align: justify;
}

.gode_mg {
  margin-bottom: 10vh;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 40px;
}
.gode_mg .qppic {
  display: flex;
  flex: 0 0 25%;
  position: relative;
  /*overflow: hidden;*/
  border-radius: 15px;
}
.gode_mg .qppic img {
  flex: 1;
  object-fit: cover;
  width: 100%;
  height: auto;
}
.gode_mg .qpword {
  flex: 1 1 75%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --- 基礎狀態：定義形狀與動畫平滑度 --- */
.Revenue_year {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  padding: 10px 20px;
  margin-right: 10px;
  margin-bottom: 20px;
  background-color: #E7e0c9;
  color: #333;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 15px;

  /* ⭐ 平滑動畫核心：確保上去跟下來都柔和 */
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
              box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
              background-color 0.4s ease,
              color 0.4s ease !important;
}

/* 確保連結本身沒有底線 */
.Revenue_box a,
.Revenue_year a {
  color: #333;
  text-decoration: none !important;
}

/* --- 滑鼠經過 (Hover)：浮起與調亮 --- */
/* 當滑鼠移到連結上，帶動內部的年份方塊浮起 */
.Revenue_box a:hover > .Revenue_year,
.Revenue_year:hover {
  background-color: #76063C !important; /* 變為企業紅 */
  color: #FFFFFF !important;           /* 字體變白 */

  /* ⭐ 浮起效果：向上位移 5px */
  transform: translateY(-5px) !important;

  /* ⭐ 陰影效果：增加深度的感覺 */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12) !important;

  text-decoration: none !important;
  cursor: pointer !important;
}

/* 確保 hover 時內部的字也強制變白且無底線 */
.Revenue_box a:hover > .Revenue_year,
.Revenue_year:hover a {
  color: #FFFFFF !important;
  text-decoration: none !important;
}

/* --- 點擊反饋 (Active) --- */
.Revenue_year:active {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* --- 最新年份專用樣式 --- */
.Revenue_year.is_latest {
  background-color: #76063C !important; /* 直接變成企業紅 */
}

/* 確保最新年份的文字預設也是白色 */
.Revenue_year.is_latest a {
  color: #FFFFFF !important;
}

/* --- 修正 Hover 行為 --- */
/* 當最新年份被 Hover 時，我們通常希望它有一個細微變化，例如顏色加深或更浮動 */
.Revenue_year.is_latest:hover {
  background-color: #5a042d !important; /* Hover 時稍微再深一點，更有層次 */
  transform: translateY(-5px) !important;
}

/* --- 佈局與標題 --- */
    .corp_list_container { border-top: 1px solid #222222 !important; width: 100% !important; }
    .corp_list_row { display: flex !important; align-items: center !important; padding: 30px 0 !important; border-bottom: 1px solid #e5e5e5 !important; }
    .corp_list_label { width: 25% !important; font-size: 1.1rem !important; font-weight: 600 !important; color: #222222 !important; }
    .corp_year_row { width: 75% !important; display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }


    /* 手機版 RWD */
    @media screen and (max-width: 991px) {
        .corp_list_row { flex-direction: column !important; align-items: flex-start !important; padding: 20px 0 !important; }
        .corp_list_label { width: 100% !important; margin-bottom: 15px !important; }
        .corp_year_row { width: 100% !important; }
    }

/* --- 管理團隊區塊佈局 --- */
.ManagementTeambg_grid {
    display: flex;
    flex-direction: row; /* 預設：圖片在左 */
    align-items: center;
    justify-content: center;
    background-color: #f4f3ef;
    border-radius: 20px;
    margin-bottom: 5vh;
    overflow: hidden;    /* 確保內容不會超出圓角 */
    gap: 0;
}

/* 交錯佈局：奇數項圖片在右 */
.ManagementTeambg_grid:nth-child(odd) {
    flex-direction: row-reverse;
}

/* 圖片容器寬度比例 (40%) */
.ManagementTeambg_grid .op_order {
    flex: 0 0 40%;
}

/* 文字內容容器寬度比例 (60%) */
.ManagementTeambg_grid > div:not(.op_order) {
    flex: 0 0 60%;
}

.op_order {
  height: 100%;
  background-color: #f4f4f4;
  border-radius: 25px;
}

.Team_boxfont {
  padding: 30px;
  padding-left: 80px;
}
.Team_boxfont h2 {
  font-size: 2.5em;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 600;
}
.Team_boxfont h3 {
  font-size: 1.5em;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 500;
}
.Team_boxfont h4 {
  font-size: 1.5em;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 600;
}
.Team_boxfont p {
  font-size: .9rem;
  margin-bottom: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /**-webkit-line-clamp: 3;**/
  -webkit-box-orient: vertical;
}
.Team_boxfont .mt_mg {
  margin-bottom: 40px;
}

/* --- 手機版 (768px 以下) --- */
@media only screen and (max-width: 768px) {
    .ManagementTeambg_grid,
    .ManagementTeambg_grid:nth-child(odd) {
        flex-direction: column; /* 強制所有卡片改為垂直排列 */
        background-color: #f4f3ef;
    }

    /* 手機版時，寬度需改為 100% 展開 */
    .ManagementTeambg_grid .op_order,
    .ManagementTeambg_grid > div:not(.op_order) {
        flex: 0 0 100%;
        width: 100%;
    }

    .ManagementTeambg_grid .op_order {
        padding: 0;
    }

    /* 建議：手機版時文字區塊增加內距 */
    .ManagementTeambg_grid > div:not(.op_order) {
        padding: 5px;
        box-sizing: border-box;
    }
  .Team_boxfont {
    padding: 40px;
  }
 }

.Case_bg {
  background-size: cover;
  background-image: url("../images/casestudies.jpg");
  background-position: center center;
  position: relative;
  display: flex;
  justify-content: center;
  /* 水平置中 */
  align-items: center;
  /* 垂直置中 */
  text-align: center;
  /* 讓裡面的文字也置中 */
  /* 建議給一個高度，才看得到垂直置中效果 */
  min-height: 435px;
}

.CSR_bg {
  background-size: cover;
  background-image: url("../images/csr_bg.jpg");
  background-position: center center;
  position: relative;
}

.Optimized_bg {
  width: 100%;
  aspect-ratio: 1920 / 760;
  /* banner 專用 */
  background-size: cover;
  background-position: center 55%;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .Optimized_bg {
    /* 1. 圖片基本設定 */
    position: relative; /* 必加：讓漸層層疊在圖片上 */
    background-size: 100% auto !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;

    /* 2. 推開文字空間 (依圖片比例調整) */
    padding-top: 45vw !important;

    /* 3. 預設底色 (給深色字用) */
    background-color: #F0F0F0;
  }

  /* ⭐ 魔法判斷：有 white_font 時底色變深 */
  .Optimized_bg:has(.white_font) {
    background-color: #333;
  }

  /* ✨ 新增：漸層遮罩 (解決空曠感並優化銜接) */
  .Optimized_bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* 高度建議與 padding-top 一致，確保漸層剛好蓋在圖片上 */
    height: 40vw;
    /* 增加一個從透明到微暗的漸層，讓圖片與下方背景融合 */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,0.6) 100%);
    pointer-events: none;
  }
  }
.Casebanner_box {
  max-width: 1500px;
  width: 90%;
  text-align: left;
}
.Casebanner_box h1 {
  font-size: 3.5em;
  font-weight: 700;
  margin-bottom: 2vh;
  line-height: 1.1em;
  color: #ffffff;
}
.Casebanner_box p {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 2vh;
  line-height: 28px;
  color: #ffffff;
  padding-right: 50%;
}

.csrbanner_box {
  max-width: 950px;
  margin: 0 auto;
  padding: 140px 0 100px;
  text-align: center;
}
.csrbanner_box h1 {
  font-size: 3.5em;
  font-weight: 800;
  margin-bottom: 2vh;
  line-height: 1.1em;
  color: #363636;
}
.csrbanner_box h2 {
  font-size: 2em;
  font-weight: 600;
  margin-bottom: 1vh;
  line-height: 1.1em;
  color: #76063C;
}
.csrbanner_box .color_f {
  color: #fff !important;
}

.crs_p {
  font-size: 1rem;
  margin-bottom: 20px;
  text-align: justify;
  line-height: 28px;
}

.crs_box {
  margin-bottom: 10vh;
}
.crs_box.rplistbox {
  display: flex;
  justify-content: center;
  align-items: stretch;
}
.crs_box .mb30 {
  margin-bottom: 30px !important;
}

.ax_inside_8x {
  width: 90%;
  margin: 20px auto;
  margin-bottom: 6vh;
}
.ax_inside_8x img {
  width: 100%;
}

.chk_pic {
  width: 20px;
  margin-right: 12px;
  margin-top: 5px;
  flex-shrink: 0;
}
.chk_pic img {
  display: block;
  width: 100%;
  height: auto;
}

.chk_box {
  width: calc(100% + 5px);
}
.chk_box {
  zoom: 1;
}
.chk_box:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.efre_p {
  float: left;        /* 💡 提示：如果這個區塊在手機版會打架，請看下方建議 */
  width: auto;        /* 完美還原：原本被說明文字塞爆的地方 */
  margin-top: 10px;
  font-size: 1.05rem;
  line-height: 1.5;
  color: #333;
}

.c7_bg {
  background-color: #F6EFE5;
}

.technical_grid {
  margin-bottom: 5vh;
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 1fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 50px;
  /* 設定左右間距 */
  grid-row-gap: 30px;
  /* 設定上下間距 */
  justify-content: center;
  align-items: center;
}

.FeaturedCases_bg {
  background-size: cover;
  background-image: url("../images/featuredcases.jpg");
  background-position: center center;
  padding-bottom: 42%;
  position: relative;
  margin-bottom: 70px;
  border-radius: 15px;
}
@media (max-width: 767px) {
    .FeaturedCases_bg {
        padding-bottom: 80%;      /* 手機版高度更高 */
        background-position: center 50%; /* 保持中間對齊 */
    }
}

.feat_pin {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 30px 60px;
  /* 加上一個向右上的斜切漸層，增加科技感 */
  background: linear-gradient(45deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 70%);
  width: 100%;
}

.feat_pin h2 {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.1;
  color: #ffffff;
  /* 雙重陰影增加深度 */
  text-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
@media (max-width: 768px) {
  .feat_pin h2 {
    font-size: 1.6rem;
    line-height: 1.2;
  }
}
.feat_pin h3 {
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 10px;
  line-height: 1.1em;
  color: #ffffff;
}

.hash_tag {
  margin-bottom: 40px;
}

.hash_btn {
  display: inline-block;
  margin-right: 10px;
  font-weight: 600;
  background-color: #D5D5D5;
  color: #333;
  border-radius: 50px;
  padding: 8px 16px;
  font-weight: 600;
  transition: background-color 300ms linear, color 300ms linear;
  cursor: pointer;
}
.hash_btn.on {
  background-color: #76063C;
  color: #ffffff;
}
.hash_btn:hover {
  background-color: #76063C;
  color: #ffffff;
}

.spei_fontbox h3 {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.1em;
  color: #1F1F1F;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-bottom: 10px;
}
.spei_fontbox h2 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1em;
  color: #1F1F1F;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-bottom: 10px;
}
.spei_fontbox p {
  font-size: 1rem;
  margin-bottom: 20px;
  line-height: 28px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.spei_fontbox a:hover {
  color: #76063C;
  text-decoration: none;
}
/* ============================================================
   【最終完整版】Samsung Style 視覺整合 + 圖片雜亂優化方案
   ============================================================ */

/* 1. 基礎卡片設定：移除生硬邊框，改用呼吸感陰影 */
.Press_whitebg {
    background-color: #ffffff;
    height: 100%;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: none !important; /* 💡 移除邊框減少線條干擾 */
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* 全站超連結去底線 */
.Press_whitebg a, .Press_whitebg a:hover {
    text-decoration: none !important;
    outline: none !important;
}

/* ============================================================
   【上半部】HOT NEWS (大新聞區塊)
   ============================================================ */

/* 電腦版佈局：左文右圖、垂直置中 */
.Press_whitebg.top {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 20px 0 !important;
}

/* 文字容器：強制垂直排列以利排序 */
.press_fontbox.top {
    width: 45% !important;
    padding: 0 40px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: transparent !important;
}

/* 💡 排序邏輯：1.標籤 2.標題 3.日期 */
.presstoptitle { display: contents !important; }
.presstoptitle h2 { order: 1 !important; } /* 標籤在最上 */
.press_fontbox.top > a { order: 2 !important; } /* 標題在中 */
.calender_box.top {
    order: 3 !important; /* 日期在下 */
    text-align: right !important; /* 💡 靠右對齊 */
    margin-top: 15px !important;
    width: 100% !important;
}

/* HOT NEWS 標籤樣式 */
.presstoptitle h2 {
    color: #333 !important;
    font-size: 1rem !important;
    font-weight: 700;
    background: #E7e0c9;
    padding: 10px 12px;
    border-radius: 4px;
    align-self: flex-start;
    margin: 10px 0 0 30px!important;
}

/* HOT NEWS 大標題 */
.press_fontbox h3.top {
    font-size: 2.1rem !important;
    font-weight: 700 !important;
    color: #333 !important;
    line-height: 1.3 !important;
    margin: 30px !important;
    text-decoration: none !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 大新聞圖片 */
.press_pic.top img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;

    /* 💡 取消原本的濾鏡與不透明度設定，保持圖片原始狀態 */
    opacity: 1 !important;
    filter: none !important;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. 統一 Hover 效果：取消顏色與亮度的變化，只保留放大 */
.Press_whitebg:hover .press_pic.top img {
    transform: scale(1.05); /* 僅保留統一放大比例 */
}

/* 3. 調整 HOT NEWS 圖片的結構，確保它跟下方的表現一致 */
.press_pic.top {
    width: 55% !important;
    border-radius: 12px;
    overflow: hidden;
    background-color: #000; /* 遮罩基底 */
}

/* ============================================================
   手機版適配 (RWD)
   ============================================================ */
@media screen and (max-width: 768px) {
    /* HOT NEWS 改為圖在上、文在下 */
    .Press_whitebg.top {
        flex-direction: column-reverse !important;
        padding: 0 !important;
    }

    .press_pic.top, .press_pic:not(.top) {
        width: 100% !important;
        height: 220px !important;
        border-radius: 0 !important;
    }

    .press_fontbox.top {
        width: 100% !important;
        padding: 25px 10px !important;
    }

    .press_fontbox h3.top {
        font-size: 1.6rem !important;
    }

    /* 手機版日期改為靠左，更易閱讀 */
    .calender_box.top {
        text-align: left !important;
    }
}

/* ============================================================
   【下半部】MORE NEWS (圖片雜亂優化方案)
   ============================================================ */

/* 💡 核心優化：讓複雜的圖片在預設下「退後」 */
.press_pic:not(.top) {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: #000; /* 作為遮罩底色 */
}

.press_pic img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    /* 💡 濾鏡處理：減少飽和度與亮度，讓雜亂的圖片看起來統一 */
    opacity: 0.8;
    filter: grayscale(25%) brightness(90%);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover 時：圖片恢復彩色、變亮、微放大 */
.Press_whitebg:hover .press_pic img {
    opacity: 1;
    filter: grayscale(0%) brightness(100%);
    transform: scale(1.05);
}

/* 下方新聞文字區塊：加大留白更有高級感 */
.press_fontbox:not(.top) {
    padding: 30px 25px !important;
    display: flex;
    flex-direction: column;
}

.press_fontbox:not(.top) h3 {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.5;
    color: #333;
    margin-bottom: 15px;
    min-height: 3em; /* 保持標題高度一致 */
}

/* ============================================================
   【新聞分頁指示器】全域與 RWD 整合
   ============================================================ */
/* --- 1. 桌機版預設：長條形圓點、靠左對齊 --- */
.swiper-outer-container {
    position: relative;
    width: 100%;
    /* 💡 在桌機版讓外層容器變成 Flex 垂直排列，方便手機版重新排序 */
    display: flex;
    flex-direction: column;
}

.swiper_news {
    overflow: hidden;
    width: 100%;
}

.swiper-pagination.news {
    position: relative !important;
    text-align: left !important;
    margin-top: 30px !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

.swiper-pagination.news .swiper-pagination-bullet {
    width: 40px !important;
    height: 8px !important;
    border-radius: 10px !important;
    background: #999 !important;
    opacity: 1 !important;
    margin: 0 8px 0 0 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.swiper-pagination.news .swiper-pagination-bullet-active {
    background: #76063C !important; /* 品牌艾訊紅 */
    width: 60px !important;
}

/* --- 2. 手機版 RWD：將點點移至「圖下方、文上方」，並改成精緻小圓點 --- */
@media screen and (max-width: 768px) {

    /* 核心魔法：讓輪播圖與點點重新排隊 */
    .swiper-outer-container {
        display: flex !important;
        flex-direction: column !important; /* 由上而下排隊 */
    }

    .swiper_news {
        order: 1 !important; /* 💡 讓新聞主體（包含圖片與文字）排在第一位 */
    }

    /* 💡 精準定位：把點點插進圖片與文字的中間 */
    .swiper-pagination.news {
        order: 2 !important;        /* 排在第二位 */
        position: absolute !important; /* 物理漂浮定位 */
        top: 220px !important;      /* 💡 寬度剛好對齊你手機版圖片的高度 (220px) */

        /* 改為手機版精緻小圓點與水平置中 */
        text-align: center !important;
        justify-content: center !important;
        margin-top: 25px !important; /* 與上方圖片的間距 */
        margin-bottom: 0 !important;
        height: 15px !important;
        z-index: 10 !important;
    }

    /* 手機版不要長條狀，改回標準小圓點 */
    .swiper-pagination.news .swiper-pagination-bullet {
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important; /* 變成正圓 */
        margin: 0 5px !important;
    }

    .swiper-pagination.news .swiper-pagination-bullet-active {
        width: 8px !important; /* 限制寬度，打破電腦版的 60px */
        background: #76063C !important;
    }
   }


/* 電腦版懸浮效果 */
@media screen and (min-width: 769px) {
    .Press_whitebg:not(.top):hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    }
}
.bgy_tg {
  background-color: #F6EFE5;
  padding: 4px 20px;
  display: inline-block;
  margin-bottom: 20px;
}

.calender_icon {
  width: 20px;
  display: inline-block;
  vertical-align: middle;
}
.calender_icon img {
  width: 100%;
}

.calender_p {
  display: inline-block;
  vertical-align: middle;
  font-size: .8rem;
  color: #999;
  margin: 40px 0 0 10px;
}

.calender_box {
  text-align: right;
  position: absolute;
  bottom: 20px;
  right: 25px;
}
/* 2. 讓日期往標題靠攏 */
.calender_box.top {
    order: 3 !important;
    text-align: right !important;
    margin-top: 0 !important; /* 💡 移除上邊距，讓它緊貼 H3 */
    width: 100% !important;
    padding-right: 5px; /* 稍微往左縮一點，視覺上更平衡 */
}

/* 3. 調整日期文字大小，避免喧賓奪主 */
.calender_box.top .calender_p {
    font-size: 0.85rem !important;
    color: #888 !important; /* 稍微淡一點的灰色 */
    font-weight: 400;
}
.pre_mg {
  margin-bottom: 10vh;
}
.pre_mg.mb0 {
  margin-bottom: 0vh;
}

.Press_grid {
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 2fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 20px;
  /* 設定左右間距 */
  grid-row-gap: 20px;
  /* 設定上下間距 */
  justify-content: center;
  align-items: center;
}

.press_ex_pic {
  width: 100%;
  padding-bottom: 63%;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.press_Wrapper {
  max-width: 950px;
  margin: 0 auto;
}

.presstoptitle {
  position: relative;
  padding-bottom: 30px;
  color: #76063C;
}

.gray_bg {
  background-color: #f4f4f4;
  width: 100%;
}

.follow_wp h2 {
  font-size: 1.8rem;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 500;
}
.follow_wp p {
  font-size: 1rem;
  margin-bottom: 20px;
  line-height: 28px;
}

.follow_box {
  text-align: center;
}

.follow_icon {
  display: inline-block;
  width: 40px;
  margin: 0 10px;
}
.follow_icon img {
  width: 100%;
}

/* --- 1. 最外層連結容器 (整合關鍵) --- */
.eplist {
    display: block;
    text-decoration: none !important;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;
    /* 設定平滑過渡 */
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
    border: 1px solid #ddd; /* 給電子報一個淡淡的邊框增加精緻感 */
}

/* ⭐ 當滑鼠移入 eplist 時，整個卡片浮起來 */
.eplist:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

/* --- 2. 圖片區塊同步縮放 --- */
.Issues_pic {
    width: 100%;
    height: 210px; /* 電子報預覽圖通常較扁，建議固定高度 */
    overflow: hidden;
    position: relative;
}

.Issues_pic img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 保持電子報比例，不裁切內容 */
    padding: 10px; /* 留一點白邊像實體刊物 */
	margin-top: 10px;
    transition: transform 0.6s ease;
}

/* ⭐ 關鍵點：當 eplist 被 hover 時，裡面的 img 跟著縮放 */
.eplist:hover .Issues_pic img {
    transform: scale(1.08);
}

/* --- 3. 文字內容區塊 --- */
.Issues_item {
    padding: 15px 25px 15px 30px; /* 使用 padding 代替 margin，增加點擊區域 */
    text-align: left;
}

.Issues_item h2 {
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin-bottom: 10px !important;
    transition: color 0.3s ease;
    /* 保持高度一致 */
    min-height: 2.8em;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ⭐ 當 eplist 被 hover 時，標題顏色變品牌紫 */
.eplist:hover h2 {
    color: #76063C !important;
}

.issu_p {
    font-size: 0.85rem;
    font-weight: bold;
    color: #76063C;
    margin-bottom: 8px;
    letter-spacing: 1px;
    opacity: 0.8;
}

/* --- 4. 針對訂閱區塊的細微美化 (Stay Connected) --- */
.Newsletter_bg {
    background: #f8f9fa;
    padding: 60px 0;
    border-radius: 20px;
    margin-top: 50px;
}

.npinp {
    border-radius: 8px;
    border: 1px solid #ddd;
    padding: 12px;
}

.Newsletter_bg {
  background-color: #F6EFE5;
  width: 100%;
}

.Newsletter_grid {
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 1fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 4em;
  /* 設定左右間距 */
  grid-row-gap: 2em;
  /* 設定上下間距 */
  justify-content: center;
  align-items: center;
}

.npinp {
  padding: 10px !important;
}

.Newsletter_input {
  background-color: #ffffff;
  border-radius: 4px;
  width: 100%;
  padding: 10px 20px;
  border: 1px solid #e0e0e0;
}
.Newsletter_input input {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border-radius: 4px;
}
.Newsletter_input input.ens {
  height: auto;
}

.letterNews_ckbox {
  margin: 20px 0;
}

.letterNewsck_box {
  width: 10px;
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
  margin-bottom: 20px;
}

.letterNewsck_box_font {
  color: #6B6B6B;
  width: 90%;
  margin-bottom: 20px;
  display: inline-block;
  vertical-align: top;
}

.Ltd_mg {
  margin-bottom: 10vh;
}
.Ltd_mg p {
  font-size: 1rem;
  margin-bottom: 24px; /* 縮小段落間距，讓文案更緊湊 */
  line-height: 1.8;   /* 提升行高至 1.8，這是閱讀長文的舒適標準 */
  color: #333;
  text-align: left;    /* 改回左對齊，避免邊緣參差不齊 */
}
.Ltd_mg h1 {
  font-size: 1.8rem;
  font-weight: bold;
}
.Ltd_mg h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 40px; /* 增加標題上方留白，與前一段落切割 */
  margin-bottom: 20px;
}
.Ltd_mg h3 {
  font-size: 1.25rem;       /* 稍微放大一點，與正文拉開差距 */
  font-weight: 700;         /* 700 比 bold 更穩重 */
  color: #333;           /* 使用深色調，工業風更強 */
  margin-top: 35px;         /* 關鍵：標題上方一定要留白，否則會跟上一段擠在一起 */
  margin-bottom: 15px;
  line-height: 1.4;
  text-align: left;
}
.Ltd_mg ul, .Ltd_mg ol {
  margin-left: 20px;
  padding: 20px;
 }
.Ltd_mg li {
  list-style-image: url(/images/icon_right.png);
  list-style-type: none;
  margin-bottom: 5px;
  /*font-weight: 500;*/
  line-height: 28px;
}
.Ltd_mg .advblock {
  margin: 40px 0;

}
.Ltd_mg .advblock h3 {
  margin-bottom: 20px;
}
.Ltd_mg .advblock .red_btn {
  margin-left: 40px;
  text-decoration: none;
}

.Press_h2 {
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 500;
  margin-bottom: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  .Press_h2 {
    font-size: 1.6rem;      /* 手機上縮小到約 25-26px，閱讀最舒服 */
    line-height: 1.3;       /* 增加一點行高，避免兩行標題黏在一起 */
    margin-bottom: 15px;    /* 調整間距 */
    text-overflow: clip;    /* 手機上建議改為不強制截斷，讓它完整顯示 */
    white-space: normal;    /* 允許標題完整顯示，不要強迫省略 */
  }
}

.opr_date {
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.1em;
  letter-spacing: 3px;
  margin-bottom: 15px;
  color: #7d7d7d;
}

.share_graybg {
  background-color: #646464;
  padding: 7px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
  width: 36px;
  margin-bottom: 4px;
}
.share_graybg img {
  width: 100%;
}

.share_font {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  font-weight: 600;
}

.ebs_share {
  float: right;
}

.PressReleases_grid {
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 1fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 4em;
  /* 設定左右間距 */
  grid-row-gap: 2em;
  /* 設定上下間距 */
  justify-content: center;
  align-items: center;
}

.testimonial-quote {
  margin: 40px 0;
  padding: 20px 0;
}

.quote-content-wrapper {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  padding-left: 150px;
}

.quote-content-wrapper::before {
  content: '“';
  position: absolute;
  top: -10px;
  left: 0;
  font-size: 200px;
  line-height: 1;
  color: #EAEAEA;
  font-family: Montserrat, Georgia, serif;
  font-weight: 700;
}

.quote-text {
  font-size: 1.2em;
  line-height: 30px;
  color: #2c3e50;
  margin: 0 0 15px 0;
  border: none;
  padding: 0;
  font-weight: 500;
  font-style: italic;
}

.quote-author {
  font-size: 1rem;
  color: #333;
  margin: 15px 0 0 0;
  border: none;
  padding: 0;
  font-weight: 500;
  font-style: italic;
}

.quote-source {
  font-size: 1rem;
  color: #333;
  text-align: right;
  margin-top: 5px;
  font-style: normal;
}

.quote-source strong {
  color: #333;
  font-weight: bold;
}
@media (max-width: 768px) {
    .quote-content-wrapper {
        padding-left: 0; /* 改為 0，讓引號變為全寬背景裝飾 */
        text-align: center; /* 手機版文字置中會更協調 */
    }

    .quote-content-wrapper::before {
        content: '“';
        position: absolute;
        top: -40px; /* 拉得更高一點 */
        left: 50%;  /* 置中定位 */
        transform: translateX(-50%); /* 精準水平置中 */
        font-size: 120px; /* 保持夠大，維持氣勢 */
        color: #F5F5F5; /* 顏色稍微淺一點，讓它更像背景裝飾 */
        z-index: -1;  /* 關鍵：讓它退到文字後面，這樣就不會擋到文字 */
        width: 100%;
        text-align: center;
    }

    .quote-text {
        padding-top: 40px; /* 把文字往下推，避免跟引號重疊 */
        font-size: 1.2rem;
    }
}

.close-text {
  margin-top: 4px;
  /* small space between h3 and div */
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
  /*font-weight: 500;*/
}

.Cir_p {
  font-size: 1rem;
  line-height: 1.8rem;
  text-align: left;
  text-justify: inter-ideograph;
}

.upcom_p {
  border-bottom: 1px solid #E7e0c9;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.upcom_p h2 {
  font-size: 0.8rem;
  line-height: 1.2;
  margin-bottom: 4px;
  letter-spacing: 0.8px;
  font-weight: 600;
  color: #999;
}
.upcom_p h2.upe {
  font-size: 1.5rem !important;
  line-height: 1.5;
  font-weight: 600;
}
.upcom_p p {
  font-size: 1.0rem;
  margin-bottom: 15px;
  font-weight: 400;
  line-height: 1.4;
}
.upcom_p:last-child p {
    color: #76063c;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 0px;
}

.upbc_box {
display: flex;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 12px;
    border-bottom: 1px solid #E7e0c9; /* 下劃線增加水平延伸感 */
}

.upc_icon {
  display: none;
}
/*.upc_icon img {
  width: 100%;
  height: auto;
  display: block;
}*/

.upc_date {
    font-size: 1.0rem;
    color: #333;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.ue_bg {
    background: #ffffff;
    padding: 30px;
    border-radius: 12px;
    height: 100%;

    border: none;
    /* 初始狀態：極淡的陰影 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);

    display: flex;
    flex-direction: column;
    text-align: left; /* 回歸靠左對齊 */

}
.ue_bg:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.07);
}
.upe {
    font-size: 1.3rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 12px;
    min-height: 3.2rem;
    line-height: 1.3;
    display: block;
}
.solut_pic {
  width: 70%;
  margin: 6vh auto;
}
.solut_pic img {
  width: 100%;
}
.Recomm_pic {
  width: 60%;
  margin: 0 auto;
  mix-blend-mode: multiply; /* 確保不露白底 */
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.Recomm_pic img {
  width: 100%;
  display: block;
}

/* 當滑鼠移上去時，讓產品稍微浮起來，視覺上會覺得產品很「輕盈」 */
.Recomm_pic:hover {
  transform: translateY(-10px) scale(1.05);
  /* 增加一點亮顯效果 */
  filter: brightness(1.1) contrast(1.1);
}

.Various_pic {
  width: 100%;
  margin: 0 auto;
  mix-blend-mode: darken;
}
.Various_pic img {
  width: 100%;
}

.mix-blend {
  mix-blend-mode: unset;
}

.recomm_grid {
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 1fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 10px;
  /* 設定左右間距 */
  grid-row-gap: 20px;
  /* 設定上下間距 */
  justify-content: center;
  align-items: center;
}

.Maximize_grid {
  width: 100%;
  margin: 0 auto;
  padding: 5vh 0;
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 1fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 10px;
  /* 設定左右間距 */
  grid-row-gap: 20px;
  /* 設定上下間距 */
  justify-content: center;
  align-items: center;
}

.Maximize_title {
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 700;
  margin-top: 20px;
}

.Maximize_font {
  font-size: 1.4rem;
  margin-bottom: 20px;
  font-weight: 500;
  line-height: 1.2em;
}

.amr_grid {
  margin-bottom: 10vh;
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 1fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 40px;
  /* 設定左右間距 */
  grid-row-gap: 40px;
  /* 設定上下間距 */
  justify-content: center;
  align-items: center;
}

.siu_mg {
  margin-bottom: 10vh;
}

.chevron_icon {
  cursor: pointer;
  width: 20px;
  margin: 0 auto;
  transition: transform 0.3s ease;
}
.chevron_icon img {
  width: 100%;
}
.solutions_font.open .chevron_icon {
  transform: rotate(180deg);
}

.Milestones_bg {
    background-image: url('你的圖片路徑.jpg'); /* 記得加上圖片路徑 */
    background-size: cover;
    background-position: center;

    width: 100%;
    /* 直接設定比例：寬 / 高 */
    aspect-ratio: 1920 / 450;

    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -40px;
}

/* 手機版調整 */
@media screen and (max-width: 768px) {
    .Milestones_bg {
        margin-top: -100px;
        /* 手機版如果覺得 1920/450 太扁，可以改比例或給定高度 */
        aspect-ratio: auto;
        min-height: 300px;
    }
}

.Milestones_grid {
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 1fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 40px;
  /* 設定左右間距 */
  grid-row-gap: 40px;
  /* 設定上下間距 */
  justify-content: center;
  align-items: center;
}

.milest_wt_box h1, .milest_wt_box h2 {
  font-size: 3.2em;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 2vh;
  line-height: 1.1em;
}
@media (max-width: 768px) {
  .milest_wt_box h1,
  .milest_wt_box h2 {
    font-size: 2.2rem;
  }
}
.milest_wt_box h1.bk, .milest_wt_box h2.bk {
  color: #333333;
}
.milest_wt_box h3 {
  font-size: 1.5em;
  color: #ffffff;
  font-weight: 400;
  line-height: 1.1em;
}
.milest_wt_box p {
  font-size: 1.2em;
  color: #ffffff;
}
.milest_wt_box p.bk {
  color: #333333;
}

.price_big {
  font-size: 4.5em;
  color: #ffffff;
  font-weight: 400;
  margin-bottom: 2vh;
  line-height: 1.1em;
  margin-right: 10px;
}

.mies_pic {
  width: 50%;
  margin: 0 auto;
}
.mies_pic img {
  width: 100%;
}

.year_list {
  padding: 30px 20px 30px;
}
.year_list.wwo {
  margin-bottom: 80px;
}
.year_list ul {
  margin: 0 auto;
  text-align: center;
}
.year_list ul li {
  font-size: 1rem;
  display: inline-block;
  margin-right: 5px;
}
.year_list ul li a {
  color: #333333;
}
.year_list ul li a:hover {
  text-decoration: none;
}

.miles_grid {
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 1fr 1fr 1fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 40px;
  /* 設定左右間距 */
  grid-row-gap: 40px;
  /* 設定上下間距 */
  justify-content: center;

}

.miles_graybg {
    width: 100%;
    background-color: #f4f3ef;
    border-radius: 20px;
    padding: 30px;
    /* 確保高度由內容決定，不要 height: 100% */
    height: auto;
    min-height: 220px;
    display: flex;
    flex-direction: column;
}

.miles_graybg h2 {
  font-size: 1.2rem;
  line-height: 1.2;
  margin-bottom: 15px;
  font-weight: 600;
  /*margin-top: 30px;*/
  display: inline;
}
.miles_graybg h2.first {
  margin-top: 0px;
}
.miles_graybg p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  font-size: .9rem;
  margin-bottom: 20px;
}

.Retail_title {
  margin-right: 20px;
  display: inline-block;
  font-size: 2.5em;
  font-weight: 700;
  line-height: 1.1em;
  padding-top: 10px;
}

.Retail_box {
  display: inline-block;
}
.Retail_box a:hover {
  text-decoration: none !important;
  cursor: pointer !important;
}
/* 1. 桌機版：維持你原本的設定 */
.Retail_box {
  display: inline-block;
}
.Retail_box a:hover {
  text-decoration: none !important;
  cursor: pointer !important;
}

/* 2. 💡 新增：手機版時把這一塊完全隱藏 */
@media (max-width: 767px) {
  .Retail_box {
    display: none !important; /* 手機一到這個尺寸，立刻隱形且不佔空間 */
  }
}
.Retail_wrapper {
  width: 90%;
  margin: 0 auto;
  max-width: 1500px;
}
.Retail_wrapper.onFix {
  position: fixed;
  padding: 0;
  z-index: 100;
  width:100%;
  max-width: 100%;
  background-color: rgba(255, 255, 255, 0.6);
}

.over_bg {
  background-size: cover;
  background-position: center center;
  height: 500px;
}
.over_bg h2 {
  font-size: 3.2em;
  text-align: center;
  color: #ffffff;
  font-weight: bold;
  padding-top: 150px;
  line-height: 40px;
}
/* 手機版樣式 (螢幕寬度 767px 以下) */
@media screen and (max-width: 767px) {
  .over_bg h2 {
    font-size: 2.5em;
    padding-top: 60px;
    line-height: 1.2;

    /* 新增左右邊距 */
    padding-left: 20px;
    padding-right: 20px;

    /* 確保寬度計算不會因為 padding 而跑版 */
    box-sizing: border-box;
  }
}
.full_wrapper {
  width: 100%;
  margin: 0 auto;
  padding: 8vh 0 5vh;
}
.full_wrapper.nopadtop {
  padding-top: 0;
}
/* 手機版樣式 (螢幕寬度 767px 以下)
@media screen and (max-width: 767px) {
  .full_wrapper {
    display: none;
  }
} */

.parte_logo {
  width: 90%;
  margin: 0 auto;
}
.parte_logo img {
  width: 100%;
}

.partners_logobox {
  margin-bottom: 10vh;
}

.par_grid {
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 20px;
  /* 設定左右間距 */
  grid-row-gap: 20px;
  /* 設定上下間距 */
  justify-content: center;
  align-items: center;
}


/* ============================================================
   2. 產品展示區 (Whats New) - 圖片放大與名稱間距
   ============================================================ */
.product_bg, .whatsnews_bg {
    width: 100% !important;
    height: 280px !important; /* 提高高度讓圖變大 */
    padding: 10px !important; /* 減少內縮 */
    border-radius: 20px !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden;
}

.whatsnews_pic img {
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.product_bg:hover img {
    transform: scale(1.1);
}

/* 移出後的產品名稱樣式 */
.newproduct_box {
    margin-top: 15px;
    text-align: center;
}

.newproduct_box h2 {
    font-size: 1.1rem;
    color: #333;
    font-weight: 700;
    transition: color 0.3s;
}

.newproduct_box a { text-decoration: none !important; }
.newproduct_box a:hover h2 { color: #76063C; }

/* ============================================================
   3. 資源區塊 (Resources Grid) - 完美合併優化版
   ============================================================ */
.Resources_grid {
    max-width: 970px;
    margin-bottom: 60px;
    overflow: hidden;
    border-radius: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 20px;
    min-height: 310px;
}

.Resources_grid .solutions_pic {
    background-size: cover;
    background-repeat: no-repeat; /* 防止圖片重複 */
    background-position: center;
    width: 100%;
    height: 100%;
}

/* 🎯 桌面版 .Resour_font：將兩次宣告完美揉合，採用「靠上對齊」 */
.Resour_font {
    padding: 40px;
    min-height: 280px;
    font-size: 1.2em;
    display: flex;
    flex-direction: column;       /* 內容垂直排列 */
    justify-content: flex-start;  /* 💡 關鍵：確保內容從最上方開始 (棄用 center) */
    align-items: flex-start;      /* 內容水平靠左 */
    text-align: left;             /* 文字靠左 */
}

/* 🎯 桌面版 <a> 標籤優化 */
.Resour_font a {
    color: inherit;
    text-decoration: none !important;
    outline: none !important;
    display: block;               /* 讓連結變成區塊，更容易控制間距 */
}

.Resour_font a:hover {
    text-decoration: none !important;
}

.Resour_font h2 {
    font-size: 1.4rem;
    line-height: 1.2;
    margin-top: 0;                /* 移除標題上方可能存在的預設間距 */
    margin-bottom: 10px;
    font-weight: 600;
}

.Resour_font p {
    margin-top: 0;                /* 確保段落緊貼著標題 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;        /* 桌面版預設限制 3 行 */
    -webkit-box-orient: vertical;
    font-size: .9rem;
}

/* ============================================================
   4. 手機版全域調整 (Mobile RWD) - 統一集中在單一斷點管理
   ============================================================ */
@media screen and (max-width: 768px) {
    
    /* --- 4-1. 其他全域區塊調整 --- */
    .iun_bg {
        padding: 30px 25px 35px !important;
        height: auto !important;
    }

    .Applicat_item {
        padding-top: 40px !important;
    }

    .Applicat_item h2 {
        font-size: 1.6rem;
        line-height: 1.3;
    }

    /* --- 4-2. 基礎資源區塊 (一般預設：文字在上、圖片在下) --- */
    .Resources_grid {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }

    /* 💡 統一合併後的手機版文字 (解決 !important 蓋掉 20px 的問題) */
    .Resour_font {
        padding: 20px !important;     /* 採用 20px 留給文字更多空間，加 !important 確保壓過桌面版的 40px */
        min-height: auto !important;   /* 高度改為自動，避免手機版留白過多 */
        font-size: 1.1em;
        order: 1;                      /* 文字排在第一順位 */
    }

    .Resour_font h2 {
        font-size: 1.2rem;            /* 縮小標題，避免折行碎片化 */
        margin-bottom: 8px;
    }

    .Resour_font p {
        -webkit-line-clamp: 2;        /* 手機版建議顯示 2 行即可，保持版面簡潔 */
        font-size: 0.85rem;
    }

    /* 💡 統一合併後的手機版圖片 */
    .Resources_grid .solutions_pic {
        height: 250px !important;
        order: 2;                      /* 圖片排在第二順位 (文字下方) */
    }

    /* --- 4-3. 特殊例外區塊 (.c7)：強制改為【圖片在上、文字在下】 --- */
    /* 註：這是為了解決你原本程式碼中，某個特定 c7 區塊想要「圖片在上」的特殊設計 */
    .Resources_grid.c7 {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
    }

    .Resources_grid.c7 .solutions_pic {
        width: 100% !important;
        height: 200px !important;
        order: -1 !important;          /* 🎯 強制讓圖片漂浮到文字的上方 */
    }
}

.rel_bg {
  border-radius: 30px;
  padding: 20px;
  margin: 15px 0;
}

.rel_active {
  background-color: #FAFAFA;
}

.related_grid {
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 40px;
  /* 設定左右間距 */
  grid-row-gap: 40px;
  /* 設定上下間距 */
  justify-content: center;
  align-items: center;
}

.rel_p {
  text-align: center;
  font-size: 1.0rem;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.Applicat_item {
  font-size: 1.0rem;
  line-height: 24px;
}
.Applicat_item.has-img{
  padding-top: 20px !important;
  padding-bottom: calc( 320px + 5vh );
}
.Applicat_item h2 {
  font-size: 1.8rem;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 500;
}
.Applicat_item p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 1rem;
  line-height: 28px;
  margin-bottom: 20px;
}


.Applicat_bg {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c7dfc9+0,f6faf1+100 */
  background: #c7dfc9;
  /* Old browsers */
  background: -moz-linear-gradient(top, #c7dfc9 0%, #f6faf1 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #c7dfc9 0%, #f6faf1 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #c7dfc9 0%, #f6faf1 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c7dfc9', endColorstr='#f6faf1',GradientType=0 );
  /* IE6-9 */
  padding: 5vh;
  border-radius: 20px;
  height: 100%;
  position: relative;
}
.Applicat_bg.red {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebd3d3+0,f4eeee+100 */
  background: #ebd3d3;
  /* Old browsers */
  background: -moz-linear-gradient(top, #ebd3d3 0%, #f4eeee 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #ebd3d3 0%, #f4eeee 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #ebd3d3 0%, #f4eeee 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebd3d3', endColorstr='#f4eeee',GradientType=0 );
  /* IE6-9 */
}

.appi_pic {
  width: 300px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  position: relative;
  position: absolute;
    bottom: 6vh;              /* 距離底部 */
    left: 50%;
    transform: translateX(-50%);
}
.appi_pic img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

.Quickpic_bg {
  width: 100%;
  padding-bottom: 39%;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  border-radius: 30px;
}

.quei_grid {
  width: 100%;
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 1fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 40px;
  /* 設定左右間距 */
  grid-row-gap: 40px;
  /* 設定上下間距 */
  justify-content: center;
  align-items: center;
}

/* ============================================================
   Ambu_bg 電腦版 (原本的設定保持不動)
   ============================================================ */
.Ambu_bg {
  padding: 5vh;
  border-radius: 20px;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 100% center; /* 圖片在右側置中 */
}

.Ambu_bg > .Applicat_item {
  width: 50%;
  padding-right: 35px;
}

/* ============================================================
   Ambu_bg 手機版優化：改為「上文下圖」
   ============================================================ */
@media screen and (max-width: 768px) {
  .Ambu_bg {
    /* 💡 核心技巧：上方與左右留正常間距，下方強行留出 250px 的空白給背景圖顯示 */
    padding: 30px 20px 260px 20px !important;

    /* 將背景圖片移到正下方 */
    background-position: bottom center !important;

    /* 調整圖片大小，75% 寬度可以讓圖片左右有點呼吸空間，不會太貼邊 */
    background-size: 75% auto !important;

    /* 讓高度根據文字內容加上 padding 自動撐開 */
    height: auto !important;
  }

  .Ambu_bg > .Applicat_item {
    /* 文字區塊改為佔滿寬度 */
    width: 100% !important;
    padding-right: 0 !important; /* 移除電腦版的右側留白 */
    padding-top: 0 !important;   /* 確保文字不會離頂部太遠 */

    /* 可選：讓文字在手機版置中，通常會比較好看 */
    text-align: center;
  }
}

.nyn_pic {
  width: 100%;
  overflow: hidden;
  display: inline-block;
}
.nyn_pic img {
  width: 100%;
}

/* 1. 修正外層容器：讓它在筆電版寬一點，不要只剩 68% */
.nunmb_wrapper {
    width: 90%;            /* 筆電版給予更多空間 */
    max-width: 1320px;     /* 大螢幕時限制最大寬度，避免太散 */
    margin: 0 auto;
    margin-top: -10vh;     /* 稍微降低向上偏移，避免擋住上方內容 */
}

/* 2. 修正 Grid：使用 auto-fit 讓它在空間不足時自動調整 */
.wy_grid {
    display: grid;
    /* 核心修正：當空間不足 300px 時，會自動換行或調整比例 */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /* 縮減筆電版的間距，原本的 40px 在小螢幕太寬了 */
    grid-column-gap: clamp(20px, 2vw, 40px);
    grid-row-gap: 30px;
    justify-content: center;
    align-items: stretch; /* 讓方塊保持等高 */
}

/* 3. 修正內部方塊：處理內距問題 */
.iun_bg {
    background-color: #f4f4f4;
    border-radius: 30px;
    /* 筆電版縮減內距，把空間還給文字 */
    padding: clamp(25px, 3vw, 40px) clamp(20px, 3vw, 40px) clamp(30px, 4vw, 50px);
    height: 100%;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* 4. 文字微調：避免標題因為太窄而瘋狂換行 */
.iun_bg h2 {
    font-size: clamp(1.2rem, 1.5vw, 1.5rem);
    line-height: 1.3;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 600;
}

.iun_bg p {
    font-size: 1rem;
    line-height: 1.6; /* 使用倍數取代固定 px，縮放更自然 */
}
/* ============================================================
   手機版文字間距優化
   ============================================================ */
@media screen and (max-width: 768px) {
    .iun_bg {
        /* 💡 增加左右 padding 到 25px，增加文字與邊框的距離 */
        /* 設定順序：上 30px, 左右 25px, 下 35px */
        padding: 30px 30px 35px !important;

        /* 確保內容寬度計算正確 */
        box-sizing: border-box !important;

        /* 讓區塊之間有一點距離 */
        margin-bottom: 25px !important;
    }

    .iun_bg h2 {
        /* 稍微縮小字級並增加行高，避免標題塞滿寬度 */
        font-size: 1.2rem !important;
        line-height: 1.4 !important;
        margin-bottom: 15px !important;
        /* 增加標題左右的間距，確保不會貼邊 */
        padding: 0 10px !important;
    }

    .iun_bg p {
        /* 調整行高讓閱讀更輕鬆 */
        line-height: 1.6 !important;
        font-size: 0.95rem !important;
        /* 避免長單字直接貼邊爆出去 */
        word-break: break-word;
    }
}

/* 針對大螢幕的回補設定 */
@media screen and (min-width: 1600px) {
    .nunmb_wrapper {
        width: 68%; /* 回到你原本在大螢幕喜歡的比例 */
        margin-top: -16vh;
    }
}
.over_outsidbox {
  margin-bottom: 10vh;
  padding-top: 50px;
}

.Overview_pic {
  display: none;
  width: 40%;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -80px;
}
.Overview_pic img {
  width: 100%;
}

.job_bg {
  background-size: cover;
  background-image: url("../images/job.jpg");
  background-position: center center;
  padding: 10vh;
}

.job_box {
  background-color: #FBFBFB;
  border-radius: 30px;
  height: 100%;
  padding: 40px;
}
.job_box h2 {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 300;
  margin-bottom: 20px;
  font-family: 'Noto Sans TC', sans-serif;
}
.job_box p {
  font-size: 1rem;
  margin-bottom: 20px;
}

.fuli_bg {
  background-size: cover;
  background-position: center center;
  padding: 40px;
}

.fuli_fontbox h2 {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 400;
  margin-bottom: 20px;
  font-family: 'Noto Sans TC', sans-serif;
}
.fuli_fontbox p {
  font-size: 1rem;
  margin-bottom: 20px;
}

.flu_wrapper {
  width: 100%;
  margin: 0 auto;
  padding: 10vh 0;
}

.bora_grid {
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 4fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 2em;
  /* 設定左右間距 */
  grid-row-gap: 1em;
  /* 設定上下間距 */
  justify-content: center;
}
.bora_grid a {
  color: #333;
}
.bora_grid a:hover {
  color: #76063C;
  text-decoration: none !important;
  cursor: pointer !important;
}

.bora_c11 {
  background-color: #F6EFE5;
  width: 100%;
  padding-top: 18px;
  padding-bottom: 20px;
  /* 💡 拿掉之前的 position: relative，讓它回歸單純的側邊欄大外框 */
}

/* 💡 核心關鍵：將 .bora_c11 底下的「每一行產品項目」直接變成 Flex 容器 */
.bora_c11 > * {
  display: flex !important;
  align-items: center !important;            /* 💡 讓這一行的文字與 > 永遠完美「垂直置中」 */
  justify-content: space-between !important; /* 💡 讓文字乖乖靠最左、> 乖乖靠最右 */
  width: 100%;
  box-sizing: border-box;
  padding-right: 20px;                       /* 💡 讓 > 離右邊框保持 20px 的舒適距離，可自由調整 */
}

.bo_font {
  float: none !important;                    /* 💡 改動：拿掉 float，改由 Flex 控管，文字位置絕對不會偏離 */
  font-size: 1.0rem;
  font-weight: 700;
}
.bo_font a {
  color: #333;
}
.bo_font a:hover {
  color: #333 !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.bo_icon {
  float: none !important;                    /* 💡 改動：拿掉 float */
  display: none;                             /* 保持你原本的隱藏與滑過顯示邏輯 */
}

.aeh_li {
  text-decoration: none !important;
  cursor: pointer !important;
}
.aeh_li li {
  display: flex;
  margin-bottom: 10px;
  font-size: 1.0rem;
  font-weight: 600;
}
.aeh_li li a {
  color: #333;
}
.aeh_li li a:hover {
  color: #76063C;
  text-decoration: none !important;
  cursor: pointer !important;
}

.board_box {
  padding: 16px 27px 16px calc( 1vw + 25px );
}
.board_box {
  zoom: 1;
}
.board_box:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.biu_line {
  background-color: #ede1d1;
  width: 90%;
  margin: 0 auto;
  height: 1px;
}

.white_active {
  background-color: #ffffff;
}

.Modules_grid {
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: auto auto auto auto;
  /*設定 Grid 的寬度*/
  grid-column-gap: 60px;
  /* 設定左右間距 */
  grid-row-gap: 0;
  /* 設定上下間距 */
  justify-content: left;
  padding: 4vh 4vw 4vh 0;
}

.iunyygte {
  margin-bottom: 30px;
}

.mu_top {
  margin-top: 40px;
}

.mu_sol_title {
  font-size: 1.0rem;
  margin-bottom: 10px;
  line-height: 1.2;
  font-weight: 71.2em00;
}
.mu_sol_title a {
  color: #76063C;
  font-weight: 700;
}
.mu_sol_title a:hover {
  font-weight: 700;
  color: #76063C;
  text-decoration: none !important;
  cursor: pointer !important;
}

.application_menu_grid {
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 1fr 1fr 1fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 2em;
  /* 設定左右間距 */
  grid-row-gap: 1em;
  /* 設定上下間距 */
  justify-content: center;
}
.application_menu_grid.sol {
  grid-template-columns: 1fr 1fr 1fr;
  /*設定 Grid 的寬度*/
}

.aeh_title {
  font-size: 1.0rem;
  margin-bottom: 10px;
  line-height: 1.2;
  font-weight: 700;
}

.solut_rec_grid {
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 1fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 1em;
  /* 設定左右間距 */
  grid-row-gap: 1em;
  /* 設定上下間距 */
  justify-content: center;
  width: 96%;
}

.slu_bg {
  height: 11em;
  border-radius: 20px;
  width: 11em;
  padding: 5px;
}

.slu_pic {
  width: 64%;
  height: 64%;
  margin: 0 auto;
  mix-blend-mode: darken;
}
.slu_pic img {
  width: 100%;
}

.slu_name {
  font-size: .8rem;
  line-height: 1.2;
  text-align: center;
  font-weight: 700;
  height: 32px;
  margin-top: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bora_padding {
  padding: 34px 0;
}

.whatnews_menu {
  position: absolute;
  top: 79px;
  left: 50%;
  width: 214px;
  margin-left: -549px;
  background-color: #ffffff;
  padding: 20px;
}
.whatnews_menu a {
  color: #333;
}
.whatnews_menu a:hover {
  color: #76063C;
  text-decoration: none !important;
  cursor: pointer !important;
}

.whet_ft {
  margin-bottom: 20px;
  line-height: 1.6;
  margin-bottom: 10px;
}

.Resources_menu {
  position: absolute;
  top: 79px;
  left: 50%;
  width: 214px;
  margin-left: -449px;
  background-color: #ffffff;
  padding: 20px;
}

.Support_menu {
  position: absolute;
  top: 79px;
  left: 50%;
  width: 214px;
  margin-left: -359px;
  background-color: #ffffff;
  padding: 20px;
}

.abo_grid {
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 1fr 1fr 1fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 1em;
  /* 設定左右間距 */
  grid-row-gap: 1em;
  /* 設定上下間距 */
  justify-content: center;
  width: 96%;
}
.abo_grid a {
  color: #333;
}
.abo_grid a:hover {
  color: #76063C;
  text-decoration: none !important;
  cursor: pointer !important;
}

.ap_grid {
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 1fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 1em;
  /* 設定左右間距 */
  grid-row-gap: 1em;
  /* 設定上下間距 */
  justify-content: center;
  align-items: center;
}

.nap_wrapper {
  width: 90%;
  max-width: 1150px;
  margin: 0 auto;
  padding: 10vh 0;
}
.nap_wrapper.notop {
  padding-top: 0;
}

.ap_bg {
  background-color: #F6EFE5;
  padding: 5vh;
  border-radius: 20px;
}

.newwhite {
  font-size: .8rem;
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: #ffffff;
  color: #76063C;
  border-radius: 50px;
  padding: 1px 10px;
  font-weight: 600;
  z-index: 10;
}

.mil_wrap {
  position: relative;
}

.mil_rightbtn {
  position: absolute;
  z-index: 10;
  top: 90px;
  right: -25px;
  width: 50px;
}
.mil_rightbtn img {
  width: 100%;
}

.mil_leftbtn {
  position: absolute;
  z-index: 10;
  top: 90px;
  left: -25px;
  width: 50px;
}
.mil_leftbtn img {
  width: 100%;
  }

/* 針對 Swiper 核心組件進行高度重置 */
.swiper-wrapper,
.swiper-slide {
    /* 1. 取消原檔可能設定的 height: 100% 或固定高度 */
    height: auto !important;

    /* 2. 關鍵：防止 Flexbox 預設的拉伸行為 (Stretch) */
    display: flex !important;
    align-items: flex-start !important;
}

.sk_sch_p {
  margin-top: 30px;
  font-size: .9rem;
  margin-bottom: 9px;
  font-weight: 500;
  color: #a6a6a6;
}

.head_office_bg {
    position: fixed;
    top: 180px;
    right: 0;
    z-index: 1001;
    width: 40%;
    /* 使用縮寫合併背景設定 */
    background: #ffffff !important;
    border-radius: 18px 0 0 18px;
    box-shadow: 1px 7px 15px rgba(0, 0, 0, 0.1);

    /* 效能相關設定合併 */
    will-change: transform;
    transition: transform 0.4s ease-in-out;
    /* 預設為隱藏（右移 100%） */
    transform: translate3d(100%, 0, 0);
}

.head_office_bg.is-open {
  transform: translateX(0);
}

.head_pinwrap {
  position: relative;
}

.side_contacts_btn {
  position: absolute;
  top: 21px;
  left: -43px;
  width: 43px;
  cursor: pointer;
}
.side_contacts_btn img {
  width: 100%;
}

/* 手機版時，把側邊聯絡按鈕完全隱藏 */
@media (max-width: 767px) {
  .side_contacts_btn {
    display: none !important; /* 💡 施展隱身術，手機版立刻消失不佔空間 */
  }
}

.head_inside {
  padding: 30px;
}

.sel_grid {
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 1fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 30px;
  /* 設定左右間距 */
  grid-row-gap: 30px;
  /* 設定上下間距 */
  justify-content: center;
  align-items: center;
}

.contact_side_font h2 {
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 600;
  margin-bottom: 20px;
}
.contact_side_font p {
  font-size: 1rem;
  line-height: 1.6;
}

.cont_table {
  margin-bottom: 10px;
}
.cont_table th {
  font-size: .9rem;
  font-weight: 600;
}
/* 讓左側容器內的元素垂直均勻排列 */
.contact_left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 從頂部開始排 */
    gap: 15px; /* 設定地址、表格、連結之間的間距 */
}
/* 灰色區塊的寬度確保 */
.sales_graybg {
    width: 100%;
    background-color: #EAEAEA;
    border-radius: 20px;
    padding: 25px;
    box-sizing: border-box;
}
.sales_graybg h2 {
  font-size: 1.1rem;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 8px;
}
.sales_graybg p {
  font-size: .9rem;
  margin-bottom: 20px;
  line-height: 1.6;
}

.sale_btn {
  display: inline-block;
  background-color: #76063C;
  color: #ffffff;
  border-radius: 50px;
  padding: 4px 14px;
  font-weight: 500;
  font-size: 0.8rem;
}
.sale_btn a {
  color: #fff;
  text-decoration: none !important;
}
.sale_btn a:hover {
  color: #76063C;
}
.sale_btn:hover {
  background-color: #fff;
  border-color: #76063C;
}
.sale_btn:hover a {
  color: #76063C;
}

.kd_wrap {
  width: 80%;
  margin: 0 auto;
  position: relative;
  margin-top: 20px;
}

.kd_pic {
  position: absolute;
  aspect-ratio: 1 / 1;
  width: 80%;
  border-radius: 100%;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  z-index: 2;
}

.kd_voter {
  width: 40%;
  aspect-ratio: 1 / 1;
  background-color: #d8ecd0;
  border-radius: 100%;
  position: absolute;
  right: 0;
  z-index: 1;
}

.asia_mgtop {
  margin-top: 50px;
}

.Partners_Bg {
  margin-bottom: 5vh;
  border-radius: 30px;
  width: 100%;
  background-color: #f4f4f4;
}

.Partners_grid {
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 2fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 10px;
  /* 設定左右間距 */
  grid-row-gap: 20px;
  /* 設定上下間距 */
  justify-content: center;
  align-items: center;
}

.part_bg_logo {
  background-color: #ffffff;
  width: 70%;
  margin: 0 auto;
  padding: 10%;
  aspect-ratio: 4 / 3;
}

.part_complogo {
  width: 100%;
  vertical-align: middle;
  display: flex;
  align-items: center;
  height: 100%;
  overflow: hidden;
}
.part_complogo img {
  width: 100%;
}

.part_p {
  font-size: 1rem;
  margin-bottom: 40px;
  text-align: justify;
  text-justify: inter-ideograph;
}

.cookie_fixed {
  background-color: #586770;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
}

.cookie_grid {
  width: 90%;
  max-width: 1100px;
  margin: 20px auto;
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 5fr 1fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 10px;
  /* 設定左右間距 */
  grid-row-gap: 20px;
  /* 設定上下間距 */
  justify-content: center;
  align-items: center;
}

.cok_p {
  color: #ffffff;
}
.cok_p a {
  color: #ffffff;
  text-decoration: underline;
}
.cok_p a:hover {
  cursor: pointer !important;
}
.cok_p a:hover li {
  border: 1px solid #333;
}
/* 整合後的導覽列容器 */
.pe_dot {
    /* 1. 開啟彈性佈局並置中物件 */
    display: flex !important;
    align-items: center;
    justify-content: center;

    /* 💡 核心：箭頭與點點之間的固定間距。
       如果覺得箭頭離點點太近，就調大這個數值（例如 120px） */
    gap: 180px;

    /* 2. 現代化絕對置中，自動計算總寬度 */
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);

    /* 3. 清除舊有的干擾樣式 */
    width: auto !important;
    margin: 0 !important;
    z-index: 999;
    white-space: nowrap;
}

/* 針對 Swiper 自動生成的點點容器進行修正 */
.pe_dot .swiper-pagination.sol,
.pe_dot .swiper-pagination.fea {
    position: static !important; /* 讓它參與 Flex 排隊，不漂浮 */
    width: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
}

/* 點點本身的樣式 */
.nu_dot_bg, .swiper-pagination-bullet {
    display: inline-block;
    background-color: #8D8D8D;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50%;
    margin: 0 5px !important;
    opacity: 1; /* 確保 Swiper 預設透明度不會影響顏色 */
}

/* 啟動中的點點顏色 (原本的 .red 或 Swiper 的 active) */
.nu_dot_bg.red, .swiper-pagination-bullet-active {
    background-color: #75073C !important;
}

/* 左右按鈕容器樣式 */
.pe_left, .pe_right {
    width: 25px;
    height: 25px;
    flex-shrink: 0; /* 禁止按鈕被點點擠扁 */
    margin: 0 !important; /* 清除原本手動推擠的 margin */
    display: flex;
    align-items: center;
    cursor: pointer;
}

.pe_left img, .pe_right img {
    width: 100%;
    display: block;
}

/* 清除浮動 (保留你原本的 clean 樣式) */
.clean {
    zoom: 1;
}

.clean {
  zoom: 1;
}
.clean:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.search_down {
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  padding: 1vh 20vw;
  display: none;
}

.ahd_td {
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 1.0rem;
  color: #000000;
}

.red_search {
  display: inline-block;
  vertical-align: middle;
  height: 36px;
  width: 36px;
}
.red_search img {
  width: 100%;
}

.sarch_bar_white {
  position: relative;
  background-color: #ffffff;
  display: inline-block;
  vertical-align: middle;
  padding: 0 20px;
  width: 100%;
  height: 52px;
  border-radius: 5px;
}
.sarch_bar_white input {
  max-width: 83%;
  width: 83%;
  height: 100%;
}

.search_outside_box {
  float: right;
  width: 100%;
}

.red_topsearch {
  display: inline-block;
  vertical-align: middle;
  height: 34px;
  width: 34px;
}
.red_topsearch img {
  width: 100%;
}

.np_fe {
  margin-top: 80px;
  text-align: center;
  font-size: 1.6rem;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 700;
}

.study_pic {
  width: 86%;
}
.study_pic img {
  display: block;
  /* 區塊元素 */
  margin-left: 0;
  /* 靠左 */
  margin-right: auto;
  /* 可以留 auto */
  margin-bottom: 40px;
  /* 下方間距 */
  border-radius: 20px;
  max-width: 1000px;

}

.es_pic {
  margin-bottom: 30px;
  width: 100%;
}
.es_pic img {
  width: 100%;
}

.face_all {
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 1em;
  /* 設定左右間距 */
  grid-row-gap: 1em;
  /* 設定上下間距 */
  justify-content: center;
  max-width: 640px;
  margin: 0 auto;
}

.face_sme {
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.2;
  margin-bottom: 40px;
  font-weight: 500;
}

.face_pic {
  width: 100%;
}
.face_pic img {
  width: 100%;
}

.diss_box {
  max-width: 710px;
  margin: 0 auto;
}
.diss_box {
  zoom: 1;
}
.diss_box:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.diss_left {
  float: left;
  font-size: 1.1rem;
  line-height: 1.2;
  font-weight: 600;
}

.diss_right {
  float: right;
  font-size: 1.1rem;
  line-height: 1.2;
  font-weight: 600;
}

.face_send {
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.2;
  margin-top: 120px;
  font-weight: 600;
}

.Initial_grid {
  margin-bottom: 60px;
  overflow: hidden;
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 20px;
  /* 設定左右間距 */
  grid-row-gap: 20px;
  /* 設定上下間距 */
  margin-bottom: 30px;
}

.ini_bg {
  width: 100%;
  background-color: #D7CBA6;
  padding: 20px;
  position: relative;
  margin-bottom: 20px;
  border-radius: 25px;
}

.inside_h2 {
  margin-top: 10px;
  font-size: 1.2em;
  margin-bottom: 10px;
  font-weight: 600;
}

.int_number {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-weight: 600;
  font-size: 2rem;
  color: #ffffff;
}

.int_dot {
  font-size: 1rem;
}
.int_dot li {
    list-style: none;
    display: flex; /* 改用 flex */
    align-items: flex-start;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 8px;
    color: #333;
}

.int_dot li:before {
    content: "‧";
    color: #333;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1;
    margin-right: 8px;
    flex-shrink: 0;
}
.int_dot li a {
  color: #333;
}
.int_dot li a:hover {
  color: #76063C;
  text-decoration: none !important;
  cursor: pointer !important;
}
@media (max-width: 1200px) {
    .Initial_grid {
        grid-template-columns: 1fr 1fr 1fr; /* 改為三欄 */
    }
}

@media (max-width: 768px) {
    .Initial_grid {
        grid-template-columns: 1fr; /* 手機一欄 */
    }
    .right_line {
        border-right: none !important;
        border-bottom: 1px solid #ddd;
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
}

.wht_h2 {
  font-weight: 600;
  font-size: 1rem;
}

.int_pic {
  width: 100%;
}
.int_pic img {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
}

.embe_pic {
  width: 100%;
}
.embe_pic img {
  width: 100%;
}
.embe_pic.np1 {
  width: auto;
}

.Embedded_Bg {
  background-color: #FAFAFA;
  width: 80%;
  margin: 0 auto;
  border-radius: 30px;
  padding: 2em;
  margin-bottom: 5vh;
}
.Embedded_Bg.np1 {
  width: 40%;
}

.nid_grid {
  overflow: hidden;
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 1fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 10px;
  /* 設定左右間距 */
  grid-row-gap: 20px;
  /* 設定上下間距 */
  /*padding: 0 20px;*/
}

.ValueAdded_grid {
  overflow: hidden;
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 1fr 1fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 20px;
  /* 設定左右間距 */
  grid-row-gap: 20px;
  /* 設定上下間距 */
}

.ValueAdded {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}

.vaflexbox {
  flex: 1 1 calc(33.33% - 20px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.ic_name {
  font-weight: 600;
  font-size: 1rem;
}

.Dividend_wrapper {
  width: 68%;
  margin: 0 auto;
  max-width: 1100px;
}

.dv_mgpd {
  padding-bottom: 10vh;
}

.Videos_rightbtn {
  position: absolute;
  top: 40%;
  right: -40px;
  width: 30px;
  z-index: 10;
}
.Videos_rightbtn img {
  width: 100%;
}

.Videos_leftbtn {
  position: absolute;
  top: 40%;
  left: -40px;
  width: 30px;
  z-index: 10;
}
.Videos_leftbtn img {
  width: 100%;
}

.helf_bg {
  background-image: url("../images/helf_line.jpg");
  width: 100%;
}

.gray_bgsxga {
  background-color: #F0F0F0;
  width: 100%;
  padding-bottom: 60px;
}

.product_ic {
  max-width: 400px;
  width: 85%;
  margin-top: -50px;
  margin: 0 auto;
}
.product_ic img {
  width: 100%;
}

.product_ic_3X {
  max-width: 600px;
  width: 85%;
  margin-top: -50px;
  margin: 0 auto;
}
.product_ic_3X img {
  width: 100%;
}

.product_ic_4X {
  max-width: 800px;
  width: 85%;
  margin-top: -50px;
  margin: 0 auto;
}
.product_ic_4X img {
  width: 100%;
}

.sxgafont h2 {
  font-size: 2.2rem;
  text-align: center;
  font-weight: 700;
  margin: 30px 0;
}
.sxgafont h3 {
  font-size: 1.5rem;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 500;
}

.gei_icon {
  width: 180px;
  margin: 0 auto;
  padding: 30px 0;
}
.gei_icon img {
  width: 100%;
  object-fit: contain;
  /* ⭐ 關鍵 */
  display: block;
  /* 消除底部空隙 */
  border-radius: 20%;
}

.gei_font {
  text-align: center;
  font-size: 1.2rem;
  margin-top: 25px;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 700;
}

.Credit_pic {
  width: 80%;
  margin: 0 auto;
}
.Credit_pic img {
  width: 100%;
}

.RichExpansion_bg {
  background-color: #F0F0F0;
}

.gb_star {
  width: 100%;
  background-position: center center;
  background-size: cover;
}

/* ============================================================
   🚀 回歸純淨！標準產品圖片樣式
   ============================================================ */

.ne_prod_pic {
  width: 100%;
  margin: 0 auto;
  overflow: hidden; /* 💡 改回正常的隱藏，確保乖乖待在框框內 */
}

.ne_prod_pic img {
  width: 100%;
  max-width: 1920px;                  
  height: auto;
  display: block;  /* 💡 保持 block 就能自動消滅圖片底部的預設微小縫隙 */
  margin: 0 auto;
}
.desing_inhead_Bn {
  background-size: cover;
  background-position: center center;
}

.nem_mg {
  margin-top: 30px;
}

.Modular_c11_Papers_bg {
  background-color: #F6EFE5;
  border-radius: 30px;
  padding: 6em 2em;
  margin-bottom: 2em;
}

.proventitle {
  margin: 10px 0;
  display: inline-block;
  background-color: #5F5C5C;
  color: #ffffff;
  border-radius: 50px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 1rem;
}
.proventitle.lightcolor {
  background-color: #F6EFE5 !important;
  color: #333;
}

.side_line {
  border-right: 1px solid #afafaf;
}

.solution_icon_pic {
  margin: 0 auto;
  width: 50%;
}
.solution_icon_pic img {
  width: 100%;
}

.emchanical_title {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
}

.emchanicalred_line {
  width: 50px;
  height: 2px;
  margin-top: 15px;
  background-color: #76063C;
}

.Value_Bg {
  background-color: #D7CBA6;
  border-radius: 30px;
  padding: 25px;
}

.Value_Bg_light {
  background-color: #EBE5D3;
  border-radius: 30px;
  padding: 25px;
}

.mg_top {
  margin-top: 30px;
}

.server_title {
  margin-top: 20px;
  font-size: 1.1rem;
  font-weight: 700;
}

.f5X_grid {
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 1fr  1fr 1fr 1fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 10px;
  /* 設定左右間距 */
  grid-row-gap: 20px;
  /* 設定上下間距 */
  justify-content: center;
  align-items: center;
}

.wdt_icon {
  width: 60%;
  margin: 0 auto;
}
.wdt_icon img {
  width: 100%;
}

.wdt_number {
  margin-top: 20px;
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
}

.wdt_font {
  margin-top: 20px;
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
}

.dve_bkfont {
  margin-top: 20px;
  font-size: 1rem;
  font-weight: 700;
  color: #333;
}

.dve_big {
  font-size: 1.6rem !important;
  font-weight: 700;
  color: #333;
}

.helf_c11_Papers_bg {
  background-color: #F6EFE5;
  border-radius: 30px;
  margin-bottom: 2em;
}

.white_Emb {
  background-color: #ffffff;
  border-radius: 0 30px 30px 0;
}

.inside_padding {
  padding: 2rem;
}

.Embedded_grid {
  margin-bottom: 40px;
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 1fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 10px;
  /* 設定左右間距 */
  grid-row-gap: 20px;
  /* 設定上下間距 */
  justify-content: center;
  align-items: center;
}

.ef_icon {
  width: 9rem;
  margin: 0 auto;
}
.ef_icon img {
  width: 100%;
}

.wsewht_Bg {
  background-color: #ffffff;
  border-radius: 30px;
  padding: 25px;
}

.wsewht_icon_pic {
  margin: 0 auto;
  width: 100px;
  margin-top: -60px;
}
.wsewht_icon_pic img {
  width: 100%;
}

.topwse_top {
  margin-top: 60px;
}

.contro_grid {
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 1fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 10px;
  /* 設定左右間距 */
  grid-row-gap: 20px;
  /* 設定上下間距 */
}

.lorm_bg_white {
  background-color: #ffffff;
  border-radius: 30px;
  padding: 30px;
  margin-bottom: 2em;
}
.lorm_bg_white.lorm_hover {
  background-color: #F6EFE5;
}

.pag_mg {
  margin: 40px 100px;
}

.be_ic_icon {
  width: 100px;
}
.be_ic_icon img {
  width: 100%;
}

.be_ic_font {
  font-size: 1.2rem;
  margin-top: 20px;
  line-height: 1.2;
  margin-bottom: 10px;
  font-weight: 500;
}

.beo_grid {
  margin-bottom: 30px;
  display: grid;
  /* 設定 CSS grid 的第一步 */
  grid-template-columns: 1fr 4fr;
  /*設定 Grid 的寬度*/
  grid-column-gap: 10px;
  /* 設定左右間距 */
  grid-row-gap: 20px;
  /* 設定上下間距 */
  justify-content: center;
  align-items: center;
}

.Value_gray_bg {
  background-color: #f4f4f4;
}

.filterpic {
  mix-blend-mode: darken;
}

.swk_wrap {
  text-align: center;
  margin-top: 60px;
  position: relative;
  z-index: 10000;
}
/* 手機版縮減間距 */
@media only screen and (max-width: 768px) {
    .swk_wrap {
        margin-top: -30px !important; /* 強制縮小手機版的上方間距 */
    }
}

.swk_next {
  display: inline-block;
  width: 40px;
  margin:0 20px;
}
.swk_next img {
  width: 100%;
}

.swk_Prev {
  display: inline-block;
  width: 40px;
}
.swk_Prev img {
  width: 100%;
}

.swiper {
  width: 100%;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 450px;
  height: 450px;
}

.swiper-slide img {
  display: block;
  width: 100%;
}

.swiper_productnew{
height:50vh;
}

@media screen and (max-width: 768px) {
    .swiper_productnew {
        height: auto; /* 手機版通常不建議鎖定 50vh，改為內容撐開或固定高度 */
        min-height: 300px; /* 如果需要，設定一個最小高度 */
    }
}

.product_wrapper .swiper-slide img {
    display: block;
    margin: 0 auto;       /* 確保圖片水平置中 */
    width: auto;          /* 允許圖片小於容器時保持原大 */
    max-width: 100%;      /* 🔴 最重要：保險絲！確保圖片寬度絕對不會超過容器 */
    height: auto;         /* 保持比例 */
    max-height: 600px;    /* 🟢 防止垂直方向拉得太長 */
    object-fit: contain;  /* 確保不變形 */
}

.swiper_topbanner .swiper-slide {
  height: auto !important;
}

.Warehouse_pic {
  background-size: cover;
  background-position: center center;
  position: relative;
}

.redclip_bg {
  clip-path: polygon(0 0, 100% 0, 81% 100%, 0% 100%);
  background-color: #76063C;
  width: 60%;
}

.clip_side_pd {
  padding: 20% 20% 20% 10%;
}

.clt_white_logo {
  margin-top: 40px;
}

.bv_number {
  font-size: 4rem;
  font-weight: 800;
}

.bv_smP {
  font-size: 1rem;
  font-weight: 500;
  display: block;
  margin-top: 15px;
}
.bv_number {
  /* 最小 2.2rem，首選寬度的 8%，最大 4rem */
  font-size: clamp(2.2rem, 8vw, 4rem);
  font-weight: 800;
  line-height: 1;
}

.bv_smP {
  font-size: clamp(0.85rem, 2vw, 1rem);
  font-weight: 500;
  display: block;
  margin-top: 15px;
}
.mt20 {
  margin-top: 20px;
}
.mt50 {
  margin-top: 50px;
}

.mb20 {
  margin-bottom: 20px;
}

.axred {
  color: #76063C;
}

a:hover {
  color: #76063C !important;
}
a.black {
  color: #333333;
  text-decoration: none;
  margin-bottom:50px;
}

.swiper-button-next.topbanner {
  right: 12px;
}

.swiper-button-next:after, .swiper-button-prev:after {
  content: "" !important;
  background-color: #76063C;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.swiper-button-next:hover::after, .swiper-button-prev:hover::after {
  opacity: 0.7;
  /* 調整透明度來達到所需的效果 */
}

.swiper_solution {
  position: relative;
  height: 640px;
  overflow: hidden;
}

.swiper_feaProduct {
  position: relative;
  height: 679px;
}

.swiper_partnership {
  height: 140px;
}

.swiper_news {
  position: relative;
  width: 100% !important;
  height: 630px !important;
  overflow: hidden;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 8px !important;
}

.swiper-pagination.sol {
  z-index: 100;
}
.swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
}
.swiper-pagination .swiper-pagination-bullet-active {
  background-color: #76063C !important;
}
.swiper-pagination.topbanner {
  bottom: 80px;
}
.swiper-pagination.topbanner .swiper-pagination-bullet {
  width: 40px !important;
  height: 8px !important;
  border-radius: 10px;
  background-color: #ffffff;
  opacity: 1;
}
@media only screen and (max-width: 767px) {
  /* 1. 確保分頁器（Bullet）回到 Banner 範圍內 */
  .swiper-pagination.topbanner {
    bottom: 20px !important; /* 手機版建議縮短距離，維持在底部邊緣 */
    left: 0;
    width: 100%;
    z-index: 101 !important; /* 確保高於 bannermask 和 banner_grid */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* 2. 調整手機版 Bullet 的大小（避免太長擠在一起） */
  .swiper-pagination.topbanner .swiper-pagination-bullet {
    width: 25px !important; /* 從 40px 縮小到 25px */
    height: 6px !important;  /* 從 8px 縮小到 6px */
    margin: 0 5px !important;
  }

  /* 3. 確保父容器不會切掉 Bullet */
  .banner_grid {
    overflow: visible !important; /* 如果被切掉，改為 visible 檢查位置 */
    position: relative;
  }
}
.swiper-pagination.partnership {
  bottom: 0;
}

.next_lastproduct {
  position: absolute;
  bottom: 0;
  z-index: 10;
}

.no_result {
  font-size: 1.2em;
  text-align: center;
  margin: 20px 0;
  color: #b60057;
  font-weight: bolder;
}

.view_block {
  display: none;
}

.contentP_Wrap {
  padding-bottom: 80px;
}

.title_ord {
  font-weight: bold;
}
.title_ord span {
  font-weight: normal;
}
i.mdi.pdownload {
  font-size: 1.2em;
  border-radius: 30px;
  background: #76063C;
  color: #ffffff;

  /* 💡 核心改動 1：強制把自己變成區塊元件，並靠左右自動平分居中 */
  display: block !important;
  margin: 0 auto !important;   /* 👈 這行是關鍵！直接讓整顆圓圈在欄位正中央 */

  /* 💡 核心改動 2：確保圓圈大小固定，且內部的箭頭圖示絕對置中 */
  width: 28px !important;
  height: 28px !important;
  line-height: 28px !important; /* 讓箭頭垂直居中 */
  text-align: center !important;/* 讓箭頭水平居中 */
  padding-top: 0 !important;    /* 徹底清除舊有的 padding 避免歪掉 */

  transition: transform 0.3s ease, background-color 0.3s ease;
  cursor: pointer;
}

/* 靠近時的放大效果 */
i.mdi.pdownload:hover {
  transform: scale(1.15);
  }

h3.RPnote {
  font-size: 1.5em;
}

.swiper_solpt {
  height: 250px;
}

.solcontent p {
  font-size: 1rem;
  margin-bottom: 20px;
  line-height: 30px;
  font-weight: 400;
  /* 段落普通字重 */
}
.solcontent p strong {
  font-weight: 700;
  /* 強制粗體 */
}
.solcontent li {
  font-size: 1rem;
  line-height: 30px;
  margin-bottom: 10px;
}
.solcontent h2 {
  font-size: 2.3rem;
  line-height: 1.2;
  margin-bottom: 20px;
  font-weight: 500;
  padding-top: 40px;
}
.solcontent h3 {
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 30px 0 20px 0;
  font-weight: 600;
}
.solcontent h4 {
  font-size: 1.2rem;
  line-height: 1.3;
  margin-bottom: 16px;
  font-weight: 600;
}

.mg_top_10vh {
  margin-top: 10vh;
}

.redft {
  color: #76063C;
}

.wordsellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  /* 顯示的行數 */
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.fwb {
  font-weight: bold !important;
}

.piconlist {
  width: 100%;
  max-width: 1200px;
  margin: 50px auto;
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  justify-content: center;
}

.ptcont {
  font: 1.2em;
}
.ptcont > span > p {
  width: 49%;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.6rem;
}

.kiwi_title {
  font-size: 2rem;
  padding: 20px 0 10px;
  font-weight: bold;
}

.kiwi_font {
  margin: 10px 0 30px;
}

.footermenu {
  margin-left: 50px;
}

.pinput {
  position: relative;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 46vw;
  width: 100%;
}

.pinskin {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 46vw;
}

.pinblock {
  position: absolute;
  top: 0;
  left: 0;
}

.chou_icon {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 36px;
  height: 36px;
  cursor: pointer;
}
.chou_icon span {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 36px;
  height: 36px;
  animation: fadein 0.5s;
  animation: pulse 1.5s infinite;
  border-radius: 50px;
}
.chou_icon img {
  width: 100%;
}

.pinekuxice {
  position: absolute;
  top: 0px;
  left: 40px;
  width: 220px;
  border: 1px solid #fff;
  border-radius: 10px 10px 0 0;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
.pinekuxice.pinleft {
  left: -220px;
}
.pinekuxice.pinbottom {
  top: auto;
  bottom: -40px;
}

.pinblocktitle {
  background-color: #e6e6e6;
  padding: 20px 15px 15px;
  font-size: 1.1rem;
  color: #333;
  font-weight: bolder;
  border-radius: 10px 10px 0 0;
}

.pinpanel {
  display: none;
}

.xi_got_title {
  background-color: #fff;
  color: #75073c;
  padding: 8px 8px 2px 8px;
}
.xi_got_title span {
  display: inline-block;
  width: 150px;
  vertical-align: middle;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
}
.xi_got_title li {
  display: inline-block;
  vertical-align: middle;
  margin-right: 9px;
  font-weight: 600;
  font-size: 18px;
}

.xi_got_list {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 10px 22px;
}
.xi_got_list p {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0 !important;
  font-size: 0.9em !important;
  line-height: 20px;
  text-align: inherit !important;
}

.xi_got_pic {
  width: 40px;
  vertical-align: middle;
  display: inline-block;
  margin-right: 10px;
  padding-bottom: 6px;
}
.xi_got_pic img {
  width: 100%;
}

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes pulse {
  from {
    -webkit-box-shadow: 0 0 0 0px white;
    box-shadow: 0 0 0 0px white;
  }
  to {
    -webkit-box-shadow: 0 0 0 15px transparent;
    box-shadow: 0 0 0 15px transparent;
  }
}
@keyframes pulse {
  from {
    -webkit-box-shadow: 0 0 0 0px white;
    box-shadow: 0 0 0 0px white;
  }
  to {
    -webkit-box-shadow: 0 0 0 15px transparent;
    box-shadow: 0 0 0 15px transparent;
  }
}
/* =========================================
   1. 共用基礎設定與漸變動畫
   ========================================= */
.icon .st0, .icon2 .st0 {
    transition: stroke 0.5s ease, fill 0.5s ease;
    fill: none;
    stroke: #2B2B2B;
}

.icon .st1, .icon2 .st1 {
    transition: stroke 0.5s ease, fill 0.5s ease;
    fill: none;
    stroke: #565656;
    stroke-width: 3px; /* 幫你把線條加粗，解決解析度看起來太細的問題 */
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================
   2. 第一種圖示 (.icon)
   預設：空心圓 + 深色箭頭 / Hover：品牌色圓 + 白色箭頭
   ========================================= */
.icon:hover .st0 {
    stroke: #76063C !important;
    fill: #76063C !important;
    fill-opacity: 1;
}

.icon:hover .st1 {
    stroke: #ffffff !important;
    fill: none !important; /* 箭頭只需要變換線條顏色 */
}

/* =========================================
   3. 第二種圖示 (.icon2)
   預設：品牌色實心圓 + 白色箭頭 / Hover：半透明白圓 + 品牌色箭頭
   ========================================= */
.icon2 .st0 {
    fill: #76063C !important;
    stroke: #76063C !important;
    fill-opacity: 1;
}

.icon2 .st1 {
    stroke: #ffffff !important;
    fill: none !important;
}

.icon2:hover .st0 {
    stroke: #76063C !important;
    fill: #ffffff !important;
    fill-opacity: 0.5 !important; /* 變成半透明白底 */
}

.icon2:hover .st1 {
    stroke: #76063C !important;
    fill: none !important;
}

.listblock {
  position: relative;
}

.ecab {
  margin-bottom: 60px;
}

.articlepage {
  width: 100%;
  flex: 1;
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}
.articlepage .page_wrapper {
  padding-top: 0;
  width: 100%;
  max-width: 1100px;
  margin: 20px auto 0;
}
.articlepage header {
  display: flex;
  flex-direction: row;
}
.articlepage .soicon {
  flex: 1;
  text-align: right;
  margin-top: 5px;
  margin-right: 10px;
}
.articlepage .soicon ul li {
  display: inline-block;
}
.articlepage .article_content {
  margin-top: 20px;
  width: 90%;
}
.articlepage h1 {
  font-size: 3rem;
  line-height: 1.2;
  font-weight: 800;
  margin-top: 50px;
  margin-bottom: 20px;
}
.articlepage h2 {
  font-size: 2.3rem;
  line-height: 1.3;
  margin-bottom: 20px;
  font-weight: 700;
  margin-top: 20px;
}
.articlepage h3 {
  font-size: 1.75rem;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 15px;
  color: #6b6f73;
}
.articlepage p {
  font-size: 1rem;
  line-height: 1.85;
  margin-bottom: 40px;
}
.articlepage p img {
  width: 30%;
  height: auto;
  margin: 0 15px;
}
.articlepage li {
  font-size: 1rem;
  line-height: 28px;
  margin-bottom: 5px;
}
.articlepage .row {
  margin-bottom: 50px;
}
.articlepage .red_btn a {
  color: #ffffff;
}
.articlepage .Introduction_bg {
  margin-bottom: 50px;
  height: 100%;
}
.articlepage .Introduction_bg a:hover {
  text-decoration: none !important;
}
.articlepage .es_pic {
  margin-bottom: 50px;
}

footer.atfooter {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(118, 6, 58, 0.5));
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  width: 100%;
}

.pvtitle {
  font-weight: bold;
  line-height: 1.6rem;
}

.goclickBlock {
  display: none;
}

#arrow {
  text-align: center;
  margin-left: 50%;
  margin-bottom: 30px;
  animation: bounce 2s infinite; /* 啟動跳動動畫 */
  cursor: pointer;
}

/* 定義跳動動畫 */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px); /* 往上跳 10px */
    }
    60% {
        transform: translateY(-5px);  /* 往上跳小一點 */
    }
}
.arrowskin {
  width: 100%;
}

.arrow-down {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #76063C;
}

.arrow-up {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #76063C;
}

.center_title {
  padding-bottom: 100px;
}
.center_title a {
  display: inline-block;
}

.showregion h2 {
  font-size: 1.5em;
}
.showregion h3 {
  font-size: 1.2em;
}
.showregion .please_box {
  padding: 10px 20px;
}

.blackmask {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 999;
}

.wb-ss {
  width: 30%;
  max-width:250px;
}

.wb-s {
  width: 30%;
}

.wb-m {
  width: 60%;
}

.sinline {
  display: inline-block;
}

svg {
  pointer-events: bounding-box;
}

.btn-danger {
  background-color: #76063C !important;
}

.taData {
  width: 100%;
}
.taData h3 {
  font-size: 1.15rem;
  line-height: 1.2;
  margin-bottom: 8px;
  margin-top: 40px;
  font-weight: 600;
  margin-left: 20px;
}
.taData p {
  font-size: 0.9rem;
  margin-bottom: 20px;
  line-height: 28px;
  margin-left: 20px;
}
.taData li {
  font-size: 0.9rem;
  margin-bottom: 3px;
  line-height: 28px;
  margin-left: 20px;
  max-width: 380px;
  list-style-type: none;
}

.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.regionblock {
  display: none;
  position: absolute;
  top: 20px;
  left: 0;
  padding: 20px;
  width: 120px;
  background: #ffffff;
  box-shadow: 1px 7px 15px rgba(0, 0, 0, 0.1);
}

.sitemap_table {
  font-size: 14px;
}

.font_article h2 {
  font-size: 2.3rem;
  line-height: 1.4;
  margin-bottom: 25px;
  font-weight: 700;
}
@media (max-width: 768px) {
  .font_article h2 {
    font-size: 1.75rem;   /* 從 2rem 降至 1.5rem (約 24px) */
    line-height: 1.3;     /* 稍微壓縮行高，讓結構更緊湊 */
    margin-bottom: 15px;  /* 減少下邊距，節省手機螢幕空間 */
    font-weight: 700;     /* 在手機上稍微加粗，提升視覺重心 */
    letter-spacing: -0.01em; /* 微調字距，防止長標題看起來太散 */
  }
}
/* --- 1. Typography (文字與標題) --- */
.font_article h2.h2_sub {
    font-size: 1.3rem;
    font-weight: 800;
}

.font_article h2.bb {
    font-size: 2rem;
    line-height: 1.8;
    letter-spacing: 2px;
}

.font_article p {
    font-size: 1rem;
    line-height: 28px;
    margin-bottom: 40px;
}

.font_article p.hh28 { line-height: 28px; }
.font_article p.ta_c { text-align: center; }
.font_article p img { width: 100%; }

/* --- 2. Components (清單與裝飾區塊) --- */
.font_article .ulbox {
    margin: 60px 0;
    font-size: 1.2rem;
}

.font_article .ulbox ul {
    font-size: 1rem;
    padding-left: 20px; /* 修正對齊問題 */
}

.font_article .ulbox ul.mg80 {
    margin: 0 80px;
}

.font_article .ulbox ul li {
    line-height: 1.6em;
    margin: 0.8em 0;
    padding-left: 10px;
}

/* 改用偽元素實作 marker，兼容性更好 */
.font_article .ulbox ul li::before {
    content: "●";
    color: #858585;
    font-size: 0.7rem;
    margin-right: 8px;
}

.font_article .bg_blue3 {
    background-color: #E9EAEF;
}

/* --- 3. Layout (版面架構: picleft) --- */
.font_article .picleft {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 20px; /* 使用 gap 取代手動計算寬度 */
}

.font_article .picleft .bbone {
    flex: 1; /* 使用彈性比例，更好適應響應式 */
}

.font_article .picleft .bbone .bbone_pic {
    padding: 30px;
    margin: 0 auto;
}

.font_article .picleft .bbone .bbone_pic img {
    width: 100%;
    display: block; /* 避免圖片下方產生微小間距 */
}
.font_article .flexbox {
    display: flex !important;
    flex-wrap: wrap !important; /* 強制換行 */
    justify-content: center;
    gap: 20px;
    margin: 30px 0;
}

.font_article .flexbox .flexbox_one {
    padding: 35px 30px;
    border-radius: 15px;
    background-color: #F6EFE5;

    /* 這裡設定每個區塊佔據 100% 寬度（手機/平板通用） */
    flex: 0 0 100% !important;

    /* 這裡設定在螢幕夠寬時（例如電腦）變為橫向三欄 */
    box-sizing: border-box;
}


/* 電腦版設定 */
@media (min-width: 992px) {
    .font_article .flexbox .flexbox_one {
        flex: 0 0 calc(33.33% - 20px) !important; /* 強制三欄 */
    }
}

.cn_img img {
  display: inline;
  height: 180px;
}

.social_font {
  font-size: 1rem;
  margin-bottom: 20px;
}

.nopadtop .swiper-wrapper {
  padding-bottom: 30px;
}

a.eplist:hover {
  text-decoration: none;
  color: #76063C !important;
}

.oder_flow .form-select {
  width: auto;
  display: inline;
}

.indexfp {
  position: absolute;
  z-index: 10;
}

.gridone {
  position: relative;
}

.contrycheckbox {
  display: inline-block;
  margin: 10px 20px;
}
.contrycheckbox input {
  width: auto;
  margin-right: 3px;
}
.contrycheckbox input[type=checkbox] {
  font-size: 1.5em;
  transform: scale(1.2);
  margin-right: 8px;
}
.contrycheckbox label {
  font-size: 1.2em;
}

/* =========================================
   1. 外層容器與共用 Hover 狀態
========================================= */
.Yum_Icon {
    display: flex;
    flex-wrap: wrap;
}

.Yum_Icon:hover a {
    text-decoration: none;
}

/* =========================================
   2. 網格背景 (.Yum_bg)
========================================= */
.Yum_Icon .Yum_bg {
    box-sizing: border-box;
    width: 20%; /* 若一行 5 個，請確認下方的 nth-child 邏輯是否需改為 5n */
    padding: 30px 20px;
    border-right: 1px solid #EdE1D1;
    border-bottom: 1px solid #EdE1D1;
}
.Yum_Icon .Yum_bg:nth-child(-n+5) {
    border-top: 1px solid #EdE1D1;
}
.Yum_Icon .Yum_bg:nth-child(5n+1) {
    border-left: 1px solid #EdE1D1;
}
/* 滑鼠移入格子：圖片變亮 + 向上微浮 + 極簡灰光暈 */
.Yum_Icon .Yum_bg:hover .pic {
    filter: brightness(1) drop-shadow(0 10px 15px #E0E0E0);
    opacity: 1 !important;

    /* 向上浮動 */
    transform: translateY(-8px);
}

/* =========================================
   3. 卡片外框 (.catalog_bg, .catalog_bg2)
========================================= */
.Yum_Icon .catalog_bg,
.Yum_Icon .catalog_bg2 {
    border: 1px solid #c7c7c7;
    border-radius: 3px;
    margin-bottom: 20px;
}
.Yum_Icon .catalog_bg {
    display: inline-block;
    width: 31%;
    margin-left: 8px;
    margin-right: 8px;
}
.Yum_Icon .catalog_bg2 {
    display: inline-table;
    width: 33%;
}
.Yum_Icon .oder_nonebg {
    display: inline-table;
    width: 31.9%;
    padding: 20px;
    margin: 0 20px 20px 0;
}
.Yum_Icon .oder_nonebg:nth-child(3n) {
    margin-right: 0;
}

/* =========================================
   4. 圖片容器共通設定（🎯 降伏不同比例 SVG 終極版）
========================================= */
.Yum_Icon .pic_Icon,
.Yum_Icon .pic,
.Yum_Icon .pic_articles {
    position: relative;
    width: 100%;
    overflow: hidden;
    text-align: center;
}
.Yum_Icon .pic {
    width: 50%;
    padding: 20px;
    margin: 0 auto;
    filter: brightness(1) drop-shadow(0 10px 15px #E0E0E0);
    transition: all 0.4s ease-out;
}

/* --- 外殼（a 標籤）：負責提供穩定的推力與高度 --- */
.Yum_Icon .pic_Icon a,
.Yum_Icon .pic a,
.Yum_Icon .pic_articles a {
    display: flex !important;       
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 100%;
    height: 130px !important;      /* 💡 桌機外殼格子固定 130px 高，確保文字絕對對齊 */
}
.Yum_Icon .pic a.iconlink {
    height: auto !important;
}

/* --- 📸 圖片本體：強制塞進「隱形正方形安全框」--- */
.Yum_Icon .pic_Icon img,
.Yum_Icon .pic img,
.Yum_Icon .pic_articles img {
    width: 100% !important;        
    height: 100% !important;       
    
    /* 💡 核心關鍵：不論原始檔多大多小，一律限制在 80px × 80px 的視覺範圍內 */
    max-width: 80px !important;    
    max-height: 80px !important;   
    
    /* 💡 神技：讓不同比例的 SVG 在 80px 的正方形內自動等比例縮放居中，絕對不變形、視覺大小一致 */
    object-fit: contain !important; 
}

/* =========================================
   5. 文字與按鈕組件
========================================= */
.Yum_Icon .ebtn {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px 0;
    font-size: 1.5em;
    color: #fff;
}
.Yum_Icon .ebtn a {
    color: #fff;
}

.Yum_Icon .catalog_font {
    padding: 20px;
    width: 100%;
    background-color: #fff;
}
.Yum_Icon .catalog_font h3 {
    font-size: 1.1em;
    font-weight: bolder;
    margin-top: 0;
    height: 45px;
    line-height: 21px;
    overflow: hidden;
}
.Yum_Icon .catalog_font p {
    height: 40px;
    line-height: 20px;
    overflow: hidden;
}

.Yum_Icon .supp {
    width: 100%;
    font-size: 16px;
    font-weight: bolder;
    text-align: center;
    color: #333;
}
.Yum_Icon .supp a {
    color: inherit;
    text-decoration: none;
}
.Yum_Icon .supp a:hover {
    color: #76063C;
}

/* =========================================
   📱 手機版 RWD 優化 (768px 以下)
========================================= */
@media (max-width: 768px) {

    .Yum_Icon {
        display: flex;
        flex-wrap: wrap;
    }

    /* 圖示背景區塊：強制改為 50% (2個一排) */
    .Yum_Icon .Yum_bg {
        width: 50% !important; 
        box-sizing: border-box;
        padding: 20px 10px;
        border: none !important;
        border-right: 1px solid #EdE1D1 !important;
        border-bottom: 1px solid #EdE1D1 !important;
    }

    .Yum_Icon .Yum_bg:nth-child(2n) {
        border-right: none !important;
    }

    .Yum_Icon .Yum_bg:nth-child(1),
    .Yum_Icon .Yum_bg:nth-child(2) {
        border-top: 1px solid #EdE1D1 !important;
    }

    .Yum_Icon .pic {
        width: 80%; 
        padding: 10px;
        margin: 0 auto;
    }

    /* 手機版外殼格子維持穩定 */
    .Yum_Icon .pic a {
        display: flex !important;       
        justify-content: center;
        align-items: center;
        height: 100px !important;      /* 手機外殼格子 100px 高 */
        width: 100%;
    }

    /* 💡 手機版圖片本體安全框：同步縮小到 55px × 55px */
    .Yum_Icon .pic img {
        width: 100% !important;        
        height: 100% !important;
        max-width: 55px !important;    
        max-height: 55px !important;   
        object-fit: contain !important; 
    }

    .Yum_Icon .supp {
        font-size: 14px; 
    }
}
.pd_3em {
  padding: 3em;
}

.flexblock {
  display: flex;
  gap: 20px;
}
.flexblock.w80 {
  width: 80%;
  margin: 0 auto;
  justify-content: center;
}
.flexblock.g80 {
  gap: 80px;
}

.flexbloack3.pos1 {
  flex: 1;
  max-width: 33.33%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.flexbloack3.pos2 {
  flex: 2;
  max-width: 66.66%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.flexbloack3 .goflex {
  height: 100%;
}

.showblock {
  text-align: center;
}

.rowblock {
  margin: 0 60px;
  display: inline-block;
  text-align: left;
}

.eyetrig {
  cursor: pointer;
  font-size: 1.5rem;
  color: #888;
}

.nopnote_title {
  display: none;
  text-align: center;
}
.nopnote_title h2 {
  font-size: 1.0rem;
  color: #76063C;
  padding: 30px;
  font-weight: bold;
}

.forgetpass-title {
  padding: 20px;
}
.forgetpass-title h2 {
  font-size: 1.2rem;
}
.forgetpass-title p {
  font-size: 0.8rem;
}
.forgetpass-title .style_table td {
  font-size: 0.8rem;
}

.fpblock {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 50px 0 30px;
}

.fppic {
  width: 35%;
  margin-right: 30px;
}
.fppic img {
  width: 100%;
  border-radius: 15px;
}

.fptext {
  flex: 1;
}

.solbtnline {
  width: 90%;
  margin: 40px auto;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.solbtnline > div {
  margin: 0;
}

.solbtnline .red_btn {
  color: #fff;
}

.solbtnline .red_btn a,
.solbtnline .white_btn a {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  min-height: 36px;
  line-height: 1.2;
  font-size: 0.95rem;
}
@media only screen and (max-width: 768px) {
  .solbtnline {
    flex-direction: column;
    gap: 10px;
    margin: 30px auto;
  }

  .solbtnline > div {
    margin: 0;
  }

  .solbtnline .red_btn a,
  .solbtnline .white_btn a {
    min-width: 110px;
    min-height: 36px;
    font-size: 0.95rem;
  }
}

/* 讓外層容器以 Flex 水平排列，內部兩個區塊各一半 */
.sw_indexso {
  display: flex;
  /* 左右並排 */
  flex-wrap: wrap;
  /* 若畫面太窄，可讓下一欄自動換行 (可依需求關閉) */
  margin: 0 auto;
  /* 置中容器 */
  align-items: stretch;
}

.sw_indexso_block {
  width: 50%;
  /* 各佔一半 */
  box-sizing: border-box;
  padding: 20px 0;
  /* 內部邊距可自行調整 */
}

.bleft {
  padding-left: 13vw;
  padding-right: 2vw;
}

.bright {
  position: relative;
  width: 50%;
  display: flex;
  align-items: center;
  padding-left: 4vw;
  /* 確保父層有高度，否則百分比會失效 */
  min-height: 300px;
}

.bright img {
  width: 100%;
  height: 90%;
  object-fit: cover;
  border-radius: 500px 0 0 500px;
  display: block;
  /* 科技感底色：提高對比，讓紫色調滲透進陰影 */
  filter: brightness(0.7) contrast(1.2) grayscale(0.3);
}

/* 裝飾用的掃描線效果 (選配) */
.bright::after {
  content: "";
  position: absolute;
  top: 0; bottom: 5%; left: 4vw; right: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: 500px 0 0 500px;
  /* 製作微小的橫向掃描線條感 */
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%,
    rgba(0, 255, 255, 0.05) 50%
  );
  background-size: 100% 4px;
}

/* --- 原有的容器，保持不變 --- */
.sw_indexso_block_sub {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

/* --- 1. 父容器：這裡是觸發 Hover 的關鍵 --- */
.sw_indexso_block_subone {
  width: 48%;
  box-sizing: border-box;
  text-align: center;

  /* [新增] 為了讓內部的絕對定位或陰影能正確顯示，有時需要設定 positioning */
  position: relative;
  /* [新增] 讓滑鼠游標變成手指，暗示可點擊 */
  cursor: pointer;
}

/* --- 2. 圖片區塊：設定預設狀態與漸變效果 --- */
.sw_indexso_block_subone_pic {
  width: 90%;
  padding-bottom: 90%;
  background-position: center;
  background-size: cover;
  border-radius: 50%;
  margin: 0 auto 10px;

  /* [修正] 為了讓陰影和位移效果正常顯示，建議改為 inline-block 或 block */
  display: block;

  /* [新增] 預設加上一個很淡的陰影，增加立體感 */
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);

  /* [核心新增] 設定漸變效果，讓浮起動作平滑 (0.3秒，緩出) */
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;

  /* [選用] 確保圖片初始位置沒有位移 */
  transform: translateY(0);
}

/* --- 3. [關鍵新增] 定義滑鼠靠近父容器時，圖片的狀態 --- */
.sw_indexso_block_subone:hover .sw_indexso_block_subone_pic {
  /* [核心] 往上移動 10px */
  transform: translateY(-10px);

  /* [核心] 陰影變深、變模糊、往下擴散，營造離開地面的感覺 */
  box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

/* --- 原有的文字樣式，保持不變 (僅修正 word-break 問題) --- */
.adv_item {
  font-size: 1.2rem;
  line-height: 22px;
  /* 建議加大一點點 margin-bottom，讓它跟頁尾或其他元件有呼吸空間 */
  margin-bottom: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  font-weight: 700;
  text-align: center;
  margin-top: 20px;
  text-decoration: none;

  /* [選用] 如果文字是英文，加上這個可避免長單詞撐破容器 */
  word-wrap: break-word;

  /* [選用] 確保文字顏色繼承或設定固定顏色，避免變藍色連結色 */
  color: #333;
}

/* --- [選用額外加強]滑鼠靠近時文字顏色也可以微調，增加回饋 --- */
.sw_indexso_block_subone:hover .adv_item {
    color: #76063C; /* 例如變為 Axiomtek 的品牌藍，或你自訂的顏色 */
}
@media (max-width: 768px) {
    .adv_item {
        /* 1. 稍微調小字體，確保手機版閱讀舒適 */
        font-size: 1rem !important;

        /* 2. 調大行高，讓文字垂直對齊更穩定 */
        line-height: 1.3 !important;

        /* 3. 強制預留四行高度 (1.5 * 4 = 6em) */
        min-height: 6em;

        /* 4. 移除或縮小底部間距，防止手機螢幕空間不足 */
        margin-bottom: 20px !important;
        margin-top: 15px !important;

        /* 5. 確保 clamp 依然有效 */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

.index2banner_bg {
  font-family: inherit;
  background-image: url("../images/index2.jpg");
  background-position: center;
  background-size: cover;
  position: relative;
  width: 100%;
  aspect-ratio: 100 / 40;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 0 0 10%;
}
.index2banner_bg .index2banner_wordblock {
  display: flex;
  flex: 0 0 50%;
  flex-wrap: wrap;
  gap: 30px;
}
.index2banner_bg .index2banner_wordblock .index2banner_wordblocktop {
  width: 100%;
  flex-wrap: wrap;
}
.index2banner_bg .index2banner_wordblock .index2banner_wordblock2 {
  flex: 0 0 45%;
  flex-direction: column;
  grid-gap: 20px;
}
.index2banner_bg .index2banner_wordblock h3 {
  font-size: 1.6em;
  font-weight: normal;
  line-height: 1.2em;
}
.index2banner_bg .index2banner_wordblock p {
  font-size: 1.2rem;
  font-weight: normal;
  line-height: 1.2em;
}
.index2banner_bg .index2banner_wordblock p.bigp {
  font-size: 4em;
  font-weight: bolder;
}
.index2banner_bg .index2banner_wordblock .red_btn a {
  color: #ffffff;
  text-decoration: none;
}

.ambox {
  display: flex;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}
.ambox .ambox_one {
  color: #fff;
  text-align: center;
  width: 150px;
  height: 150px;
  border-radius: 30px;
  background-color: #76063C;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ambox .ambox_one .bigN {
  font-size: 6rem;
  line-height: 6rem;
  font-weight: bold;
}
.ambox .ambox_one .ww {
  font-size: 1rem;
  padding-bottom: 10px;
  line-height: 1.4rem;
}
.ambox .ambox_one:nth-child(1) {
  background-color: #B85F8B;
}
.ambox .ambox_one:nth-child(2) {
  background-color: #A02462;
}
@media (max-width: 768px) {
  .ambox {
    max-width: 100%;
    padding: 0 10px;
    gap: 10px; /* 增加盒子間距 */
  }

  .ambox .ambox_one {
    /* 讓寬度隨螢幕自動縮放，並維持正方形 */
    width: 30%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 20px; /* 手機版圓角小一點比較精緻 */
  }

  .ambox .ambox_one .bigN {
    font-size: 3rem;   /* 數字縮小 */
    line-height: 3.5rem;
  }

  .ambox .ambox_one .ww {
    font-size: 0.8rem; /* 文字縮小 */
    line-height: 1rem;
    padding-bottom: 5px;
  }
}
.iqryfeed h2 {
  font-size: 1.2rem;
  margin-top: 40px;
  font-weight: bolder;
}
.iqryfeed p {
  padding-top: 20px;
  font-size: 1rem;
  line-height: 1.5;
}
.iqryfeed .pointlist {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  text-align: left;
}
.iqryfeed .pointlist ol {
  display: flex;
  justify-content: space-between;
}
.iqryfeed .pointlist ol li {
  list-style: none;
  width: 60px;
  height: 60px;
  background-color: #F6EFE5;
  border-radius: 10px;
  color: #333;
  font-weight:500;
  margin: 20px 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
}
.iqryfeed .pointlist ol li.on {
  color: #fff;
  background-color: #76063C;
}
.iqryfeed .pointlist span {
  text-align: left;
  display: inline-block;
}
.iqryfeed .pointlist span:last-child {
  float: right;
}

#loading {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px); /* 統一數值 */
  -webkit-backdrop-filter: blur(8px);
  z-index: 999999;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* 關鍵：防止掃光溢出 */
}

.loading-mask {
  position: relative;
  width: 250px; /* 配合你 LOGO 的大小 */
  overflow: hidden;
}

.loading-logo {
  width: 100%;
  height: auto;
  /* 修正掃光遮罩：只做水平移動 */
  -webkit-mask-image: linear-gradient(to right, transparent, black 50%, transparent);
  mask-image: linear-gradient(to right, transparent, black 50%, transparent);
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: mask-slide 1.5s ease-in-out infinite;
}
@keyframes mask-slide {
  0% {
    -webkit-mask-position: -200% 0;
    mask-position: -200% 0;
  }
  100% {
    -webkit-mask-position: 200% 0;
    mask-position: 200% 0;
  }
}
.tx_left {
  text-align: left !important;
}

.ta_l {
  text-align: left !important;
}

.ta_c {
  text-align: center !important;
}

.ta_r {
  text-align: right !important;
}

.mg_t_30 {
  margin-top: 30px !important;
}

.mg_t_60 {
  margin-top: 60px !important;
}

.mg_b_60 {
  margin-bottom: 60px !important;
}

.ax_red {
  color: #76063C;
}

.graypic.swiper-slide {
  background-color: #fbf4e9;
}
.graypic.swiper-slide img {
  mix-blend-mode: darken;
}

.psbot {
  padding-top: 60px;
  padding-bottom: 10vh;
}

.csr_stats-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.csr_stat-box {
  /* 寬高優化 */
  flex: 1;                 /* 讓 3 個方塊平分空間 */
  max-width: 340px;        /* 限制最大寬度，避免在超大螢幕太扁 */
  min-height: 280px;       /* ⭐ 改用 min-height，確保下方空白不會過多 */

  /* 內容垂直置中 (解決下方空白太多的感覺) */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 讓內容在方塊上下垂直居中 */
  align-items: center;     /* 內容水平置中 */

  /* 視覺樣式 */
  background: linear-gradient(150deg, #ededf5, #ede7e4 60%, #eee8e4 65%, #f4f1ee);
  padding: 30px;           /* 內距縮減一點，增加呼吸感 */
  border-radius: 15px;
  text-align: center;

  /* 浮起效果 */
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
              box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.csr_stat-box:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
}

.csr_stat-box .icon {
  width: 80px;             /* 稍微放大 Icon 比例 */
  margin: 0 auto 20px auto;
  padding-bottom: 0;       /* 移除多餘的底內距 */
}
.csr_stat-box h3 {
  font-size: 1.4rem;
  margin: 10px 0;
  font-weight: 600;
  line-height: 1.6rem;
}

.ptcatsp {
  padding-bottom: 50px;
}
.ptcatsp .swiper-pagination {
  position: absolute;
  bottom: 0;
}
.ptcatsp a {
  color: #333 !important;
  text-decoration: none !important;
}

.swiper_solutionClient_rp a .rel_p {
  color: #333;
  margin: 10px;
}
.swiper_solutionClient_rp a:hover {
  color: #76063C;
  text-decoration: none;
}
.swiper_solutionClient_rp a:hover .rel_p {
  color: #76063C;
}

.ebr_title {
  font-size: 1rem;
  font-weight: bold;
}

.kiwi_font2 {
  font-size: 0.9rem;
}

.vard_wrap {
  margin: 20px 0 40px;
}

.square-image-container {
  /* 1. 設置最大尺寸限制 */
  max-width: 150px;
  max-height: 150px;
  width: 100%;
  /* 讓它可以在較小的空間中自動縮小 */
  min-width: 100px;
  /* 2. 創建正方形長寬比的關鍵 */
  padding-top: 100%;
  /* padding-top是相對於父元素的寬度計算的，100%表示高=寬 */
  position: relative;
  /* 為了讓子元素(圖片)可以絕對定位 */
  /* 3. 隱藏超出容器的部分 (如果圖片非正方) */
  overflow: hidden;
  display: block;
  /* 確保a標籤的寬度和高度可以被設置 */
}
.square-image-container img {
  /* 讓圖片絕對定位，並填滿容器 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 確保圖片填滿整個容器，可能會裁剪圖片 */
  object-fit: contain;
  /* 確保圖片清晰 (如果需要) */
  display: block;
}

.faq-item {
  border-bottom: 1px solid #eee;
}

.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  text-align: left;          /* 💡 核心修正：強制覆蓋手機版 button 預設的置中，讓文字乖乖靠左 */
}

.faq-a {
  padding-bottom: 16px;
  line-height: 1.7;
  display: none;
  font-size: 1rem;
  text-align: left;          /* 💡 保險：確保答案區塊的文字在手機版也一律靠左 */
}

.faq-q.is-open .faq-q-text {
  font-weight: 600;
}

/* 💡 如果你的專案有其他手機版 RWD 框架干擾，請加上這段強力蓋台 */
@media screen and (max-width: 768px) {
  .faq-q {
    display: flex !important;
    justify-content: space-between !important;
    text-align: left !important;
  }
  .faq-q-text {
    text-align: left !important; /* 確保包住文字的容器也靠左 */
  }
}

/*productview application*/
.product_application_wrap {
  margin: 0 auto;
  width: 80%;
  max-width: 1400px;
  padding-bottom: 60px;
  margin-bottom: 60px;
  box-sizing: border-box;
  /* 內容區（靠左置中） */
}
.product_application_wrap .apps__block {
  width: 100%;
  display: grid;
  gap: 0;
  padding-top: 30px;
}
.product_application_wrap .apps__block.block2 {
  grid-template-columns: repeat(2, 1fr);
}
.product_application_wrap .apps__block.block2 .apps__card {
  aspect-ratio: 1.2/1;
}
.product_application_wrap .apps__block.block3 {
  grid-template-columns: repeat(3, 1fr);
}
.product_application_wrap .apps__card {
  position: relative;
  min-height: 320px;
  background-size: cover;
  background-position: center;
  isolation: isolate;
  /* 讓 overlay 疊層更穩 */
  aspect-ratio: 1/1.2;
}
.product_application_wrap .apps__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.45)), linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.35));
  z-index: 0;
}
.product_application_wrap .apps__content {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #ffffff;
  text-align: center;
}
.product_application_wrap .apps__h {
  font-size: 1.8rem; /* 稍微放大 */
  font-weight: 800; /* 加粗 */
  line-height: 1.2;
  margin: 0 0 24px;
  text-align: center;
  color: #ddd;
  letter-spacing: 2px; /* 增加字母間距，更有高級感 */
  text-transform: uppercase; /* 英文強制大寫（可選） */

  position: relative;
  padding-bottom: 12px;
}
.product_application_wrap .apps__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--muted);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  text-align: center;
}
.product_application_wrap .apps__list li {
  margin: 2px 0;
}

a#btnGridView, a#btnTableView {
  text-decoration: none !important;
}
a#btnGridView:hover, a#btnTableView:hover {
  text-decoration: none !important;
}

#pmask {
  visibility: hidden;
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 300;
  top: 0;
  left: 0;
}

@media only screen and (max-width: 1440px) {
  /* 1440 */
  .logo_pic {
    width: 134px;
    margin-top: 6px;
  }

  .cop_li {
    margin-right: 10px;
  }

  .bleft {
    padding-left: 10vw;
  }

  .swiper_feaProduct {
    height: 40vw;
  }

  .banner_font {
    width: 60%;
  }
  .banner_font h2 {
    font-size: 3rem;
  }

  .news_list_desc {
    margin: 0;
  }
}
@media only screen and (max-width: 1334px) {
  /* 1334 */
  .menu_left li {
    font-size: .8rem;
  }
}
@media only screen and (max-width: 1280px) {
  /* 1280 */
  .swiper_solution {
    height: 50vw;
  }

  .par_grid {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    /*設定 Grid 的寬度*/
  }

  .banner_font {
    width: 100%;
    padding-left: 120px;
  }
  .banner_font h2 {
    font-size: 2.5rem;
  }

  .logo_pic {
    margin-left: 0;
  }

  .regiontxt {
    display: none;
  }

  .regionicon {
    width: 20px;
    height: 20px;
    color: #76063C;
  }

  .red_topsearch {
    width: 26px;
    height: 26px;
  }

  .compare_icon {
    width: 26px;
    height: 26px;
  }

  .inquiry_icon {
    width: 26px;
    height: 26px;
  }

  .red_number {
    top: -10px;
    right: -8px;

  }
.menu_skin{
	  position:relative;
  }
  .menu_wrapper {
    padding-left: 15px;
  }


  .index2banner_bg .index2banner_wordblock h3 {
    font-size: 1.6rem;
  }
  .index2banner_bg .index2banner_wordblock p {
    font-size: 1rem;
  }

  .index_title {
    font-size: 2rem;
    line-height: 1.6;
  }
  .index_title .subtitle {
    font-size: 1.8rem;
  }

  .lastnews_wrapper {
    width: 90%;
  }

  .footer_right {
    gap: 1rem;
  }

  .footer_desc {
    min-width: 130px;
  }

  .page_wrapper {
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media only screen and (max-width: 1154px) {
  /* 1154 */
  .Press_whitebg {
    margin: 0;
  }

  .press_fontbox.top {
    margin: 0;
  }

  .press_pic.top {
    margin: 15px;
  }
}
@media only screen and (max-width: 1024px) {
  /* 1024 */
  #header {
    background-color: #fff;
    border-bottom: none;
  }

  .menu_wrapper {
    position: relative;
  }

  .menu_left {
    display: none;
    flex-direction: column;
    gap: 0;
  }

  .menu_left.mobile-open {
    display: block;
    position: fixed;
    /* 側邊抽屜 */
    top: 55px;
    left: 0;
    width: 100%;
    /* 想做抽屜可改 80% */
    height: 100vh;
    overflow: auto;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    padding: 16px;
    z-index: 1001;
  }

  /* main2.css 合併：手機版主選單顯示 */
  .menu_left.mobile-open .menuoutside,
  .menu_left.mobile-open ul.menuoutside {
    display: block !important;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }

  /* main2.css 合併：讓每個主選單項目在手機版直向排列 */
  .menu_left.mobile-open .gosub {
    display: block;
    position: relative;
  }

  .menu_left a {
    color: #fff !important;
    text-decoration: none !important;
    line-height: 1.6;
  }

  .menu_left a:hover {
    color: #fff !important;
  }

  .menu_icon {
    display: block;
    margin-top: 4px;
    margin-left: 10px;
    z-index: 1002;
    position: relative;
    right: 0;
  }

  .gosub {
    position: relative;
  }

  .gosub:hover > .down_menu_product {
    position: relative;
    top: 0;
  }

  /* main2.css 合併：桌機版下拉選單改成手機版直向結構 */
  .menu_left.mobile-open .down_menu_product,
  .menu_left.mobile-open .Contact_menu,
  .menu_left.mobile-open .AboutUs_menu {
    position: static !important;
    width: 100% !important;
    display: none;
    background-color: inherit;
    box-shadow: none;
    transform: none;
    min-width: 0;
  }

  /* 點擊主選單後顯示對應下拉 */
  .menu_left.mobile-open .gosub.active > .down_menu_product,
  .menu_left.mobile-open .gosub.active > .Contact_menu,
  .menu_left.mobile-open .gosub.active > .AboutUs_menu,
  .menu_left.mobile-open .gosub.active .down_menu_product,
  .menu_left.mobile-open .gosub.active .Contact_menu,
  .menu_left.mobile-open .gosub.active .AboutUs_menu {
    display: block;
  }

  .down_menu_product {
    position: relative;
    left: 0;
    right: 0;
    display: none;
    top: 0;
    width: 100%;
    background-color: inherit;
  }

  .bora_grid {
    grid-template-columns: 1fr;
  }

  .bora_c11 {
    background-color: inherit;
  }

  .bora_c11 .white_active {
    background: rgba(255, 255, 255, 0.3);
  }

  .bora_c11 .white_active .redft {
    color: inherit;
  }

  .bora_c11 .white_active a {
    color: #fff;
  }

  .application_menu_grid.sol {
    clear: both;
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .application_menu_grid.sol .iunyygte {
    padding: 0 20px;
  }

  .application_menu_grid.sol > div:nth-child(2),
  .application_menu_grid.sol > div:nth-child(3) {
    display: none;
  }

  /* main2.css 合併：Mega Menu 在手機版改成單欄 */
  .menu_left.mobile-open .Modules_grid {
    display: block !important;
    width: 100%;
    max-width: 100%;
    padding: 12px 20px;
    overflow: hidden;
  }

  .Modules_grid {
    grid-template-columns: 1fr;
    padding: 20px 50px;
  }

  .Modules_grid .iunyygte {
    display: none;
    padding-left: 20px;
  }

  .Modules_grid .iunyygte.on {
    display: block;
  }

  .bora_padding {
    padding: 0;
  }

  /* main2.css 合併 */
  .menu_left.mobile-open .meu_font {
    width: 100%;
    display: block;
  }

  .menu_left.mobile-open .mu_sol_title,
  .menu_left.mobile-open .iunyygte,
  .menu_left.mobile-open .atsx_li {
    width: 100%;
  }

  .mu_sol_title {
    text-align: left;
  }

  .atsx_li {
    text-align: left;
    margin-bottom: 0;
  }

  .logo_pic {
    width: 166px;
    margin-top: 0px;
  }

  .Contact_menu {
    position: relative;
    background-color: inherit;
    top: 0;
  }

  .Contact_menu li {
    display: block;
  }

  .Contact_menu li a {
    color: #fff;
  }

  .AboutUs_menu {
    position: relative;
    top: 0;
    background-color: inherit;
    min-width: 0;
  }

  .abo_grid {
    grid-template-columns: 1fr;
  }

  .abo_grid .whet_ft {
    padding-left: 10px;
  }

  .aeh_title.redft {
    color: #fff !important;
  }

  .ahd_td.redft {
    color: #fff !important;
  }

  .red_topsearch {
    width: 34px;
    height: 34px;
  }

  .compare_icon {
    width: 34px;
    height: 34px;
  }

  .inquiry_icon {
    width: 34px;
    height: 34px;
  }

  .regionicon {
    width: 26px;
    height: 26px;
  }

  .banner_grid {
    display: flex;
    align-items: center;
    /* 垂直置中 */
    justify-content: center;
    /* 水平置中（可選） */
    height: 100%;
  }

  .banner_font {
    width: 100%;
    padding-right: 35%;
    margin: 0 auto;
  }

  .banner_font h2 {
    font-size: 2rem;
  }

  .swiper-pagination.topbanner {
    bottom: 2vw;
  }

  .partner_wrapper {
    width: 98%;
  }

  .head_office_bg {
    width: 70%;
  }

  .swiper_feaProduct {
    height: 50vw;
  }

  .index2banner_bg .index2banner_wordblock {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(3px);
    border-radius: 15px;
    flex: 0 0 70%;
    padding: 20px;
    margin: 30px 0;
  }

  .index2banner_bg .index2banner_wordblock h3 {
    font-size: 1.5rem;
  }

  .index2banner_bg .index2banner_wordblock p {
    font-size: 1rem;
  }

  .index_title {
    font-size: 2rem;
    line-height: 1.6;
  }

  .index_title .subtitle {
    font-size: 1.5rem;
  }

  .footer_top {
    flex-direction: column;
  }

  .footer_right {
    margin-top: 20px;
    justify-content: flex-start;
  }

  .footer_bottom {
    margin-top: 20px;
  }

  .Case_bg {
    height: 30vw;
  }

  .press_pic.top {
    aspect-ratio: 4 / 3;
  }

  .product_application_wrap {
    width: 80%;
  }

  .product_application_wrap .apps__block.block3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .product_application_wrap .apps__block.block3 .apps__card:nth-child(3n) {
    grid-column: 1 / -1;
    /* 橫跨兩欄 */
    aspect-ratio: unset;
  }
}
@media only screen and (max-width: 768px) {
  /* 768 */
  #Header {
    height: 55px;
    border-bottom: none;
  }

  .ctall {
    padding-top: 55px;
  }

  .menu_wrapper {
    padding-top: 10px;
  }

  .breadcrumb_bg {
    top: 55px;
  }

  .breadcrumb_none_bg {
    position: relative;
    top: 0;
	border-bottom: none !important;
  }

  .swiper_feaProduct {
    height: 85vw;
  }

  .sw_indexso {
    padding: 0 30px 30px;
  }

  .bleft {
    padding-left: 0;
  }

  .bright {
    display: none;
  }

  .swiper_solution {
    height: 95vw;
  }

  .side_line {
    border-right: none;
  }

  .ValueAdded_grid {
    grid-template-columns: 1fr;
  }

  .Initial_grid {
    grid-template-columns: 1fr 1fr;
  }

  .right_line {
    border-right: none;
  }

  .darken_pic {
    height: auto;
  }

  .Embedded_Bg {
    width: 100%;
  }

  .Sche_icon {
    width: 100%;
  }
  .Sche_icon img {
    border-radius: 20px;
  }

  .Embedded_pic {
    margin-bottom: 20px !important;
    width: 30%;
    margin: 0 auto;
  }

/* 隱藏解決方案區塊的箭頭與點點 */
    .pe_dot {
        display: none !important;
    }

    /* 隱藏輪播下方 pagination (如果有的話) */
    .swiper-pagination.sol {
        display: none !important;
    }

    /* 隱藏精選產品區塊的下一頁按鈕 */
    .feat_nextbtn {
        display: none !important;
    }


  .Case_bg {
    height: 48vw;
  }

  .search_outside_box {
    width: 100%;
  }

  .sarch_bar_white {
    width: 100%;
  }
  .sarch_bar_white input {
    width: 81%;
  }

  .Partners_grid {
    grid-template-columns: 1fr;
  }

  .part_bg_logo {
    margin-top: 50px;
  }

  .Issues_item h2 {
    font-size: 1.2rem;
  }

  .Newsletter_grid {
    grid-template-columns: 1fr;
  }

  .par_login_Box {
    width: 100%;
  }

  .log_top {
    margin-top: -50px;
  }

  .parwhite_bg {
    padding: 30px;
  }
  .parwhite_bg h2 {
    text-align: center;
  }

  .partner_font h2 {
    font-size: 1.5rem;
  }

  .drivers_table {
    overflow-y: scroll;
  }

  .sol_order {
    order: 2;
  }

  .full_wrapper {
    padding: 0;
  }


  .Maximize_title {
    font-size: 1.8rem;
  }

  .Maximize_font {
    font-size: 1.2rem;
  }

  .recomm_grid {
    grid-template-columns: 1fr;
  }

  .solut_pic {
    width: 100%;
  }

  .table_sample {
    overflow-y: scroll;
  }

  .year_bow {
    width: 70px;
    height: 70px;
    padding-top: 24px;
    margin-bottom: 10px;
  }

  .milest_wt_box h2 {
    font-size: 2.5em;
  }

  .price_big {
    font-size: 2.5em;
  }

  .press_mg_wp {
    width: 75%;
    margin: 0 auto;
  }

  .index_title {
    font-size: 2.0rem;
    font-weight: bolder;
  }

  .breadcrumb_bg {
    padding: 1vh 4vw;
  }

  .Privacy h2 {
    font-size: 1.2rem;
    margin-top: 20px;
  }

  .StockTransfer_bg {
    padding: 2.2em;
  }

  .job_bg {
    padding: 0vh;
  }

  .ax_inside_8x {
    width: 100%;
  }

  .crs_box {
    margin-bottom: 3vh;
  }

  .csrbanner_box {
    top: 16%;
    left: 10%;
  }
  .csrbanner_box h2 {
    font-size: 1.4em;
  }
  .csrbanner_box h1 {
    font-size: 2em;
  }

  .CSR_bg {
    background-position: 66%;
  }

  .Revenue_year {
    width: 107px;
    margin-right: 3px;
  }

  .line_table_sample {
    overflow-y: scroll;
  }

  .GoGreen_left {
    width: 47%;
  }

  .GoGreen_box {
    width: 100%;
  }

  .mb_center {
    text-align: center;
  }

  .vis_right {
    width: 100%;
  }

  .page_title {
    font-size: 2.5em;
    margin-bottom: 2vh;
  }

  .h3_font {
    font-size: 1.2rem;
    margin-bottom: 11px;
  }

  .head_office_bg {
    width: 80%;
  }

  .sel_grid {
    grid-template-columns: 1fr;
  }

  .ap_grid {
    grid-template-columns: 1fr;
  }

  .product_wrapper {
    width: 80%;
    padding-top: 30px;
  }

  .Maximize_grid {
    grid-template-columns: 1fr;
    margin: 0 auto;
  }

  .spei_fontbox {
    padding: 20px;
  }

  .Press_grid {
    grid-template-columns: 1fr;
  }

  .amr_grid {
    grid-template-columns: 1fr;
  }

  .jogicon {
    width: 6em;
  }

  .job_font {
    margin-top: 0;
    width: 12em;
  }
  .job_font h2 {
    margin-bottom: 3px;
  }
  .job_font h3 {
    font-size: .8rem;
    margin-bottom: 4px;
  }
  .job_font p {
    font-size: .9rem;
    margin-bottom: 0;
  }

  .job_right {
    width: 2em;
    margin-top: 27px;
  }

  .Positions_wrapper {
    width: 90%;
  }

  .ipc_grid {
    grid-template-columns: 1fr;
  }

  .dot_li {
    margin-left: 40px;
  }

  .op_order {
    order: -1;
  }

  .Company_font_box {
    width: 80%;
    margin: 0 auto;
    padding: 4vh 0;
  }
  .Company_font_box h2 {
    font-size: 2em;
  }

  /*.banner_bg {
    height: 60vw;
  }

  .banner_grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .bannermask {
    background: rgba(0, 0, 0, 0.5);
  }

  .banner_font {
    width: 80%;
    margin: 0 auto;
    padding-right: 0;
    padding-left: 0;
  }*/

  .job_wrapper {
    width: 90%;
  }

  .Resources_grid {
    grid-template-columns: 1fr;
    grid-row-gap: 0;
  }

  .Milestones_grid {
    grid-template-columns: 1fr;
    grid-row-gap: 0px;
  }

  .PressReleases_grid {
    grid-template-columns: 1fr;
  }

  .technical_grid {
    grid-template-columns: 1fr;
  }

  .cg_grid {
    grid-template-columns: 1fr;
  }

  .partner_grid {
    grid-template-columns: 1fr;
  }

  .google_sale_grid {
    grid-template-columns: 1fr;
  }

  .solutions_fone {
    flex: 0 0 calc(50% - 40px);
  }

  .feed_grid {
    width: 80%;
  }

  .feed_grid {
    grid-template-columns: 1fr;
  }

  .feedback_wrapper {
    width: 90%;
  }

  .video_grid {
    grid-template-columns: 1fr;
    /*設定 Grid 的寬度*/
  }

  .page_wrapper {
    width: 90%;
    padding: 6vh 0;
  }
  .page_wrapper.soltop {
    padding-top: 1vh;
  }

  .partner_wrapper {
    width: 90%;
  }

  .feat_left {
    margin-left: 0;
    width: 68%;
    margin: 0 auto;
    margin-top: 10vh;
  }

  .ft_md {
    margin-bottom: 30px;
  }

  .share_wrap {
    text-align: center;
  }

  .copyright {
    float: none;
  }

  .show_share {
    float: none;
    display: block;
  }

  .web_share {
    display: none;
  }

  .ft_line {
    padding: 0 0;
  }

  .lastnew_inside_wrap {
    width: 100%;
    margin: 0 auto;
  }

  .feature_bg {
    padding: 5vh;
  }

  .feature_bg2 {
    padding: 5vh;
  }

  .readmore_fora {
    margin-bottom: 50px;
  }

  .idx_title_line {
    margin-bottom: 5vh;
  }

  .pd_c11_Bg {
    padding: 8vw;
  }

  .articles_con {
    margin-top: 0;
  }

  .extafont_box h2 {
    font-size: 1.5rem;
  }

  .FeaturedCases_bg {
    margin-bottom: 4vh;
  }

  .Casebanner_box {
    max-width: 100%;
    top: 24%;
    left: 6%;
  }
  .Casebanner_box h2 {
    font-size: 1em;
  }
  .Casebanner_box h1 {
    font-size: 2.5em;
  }

  .par_grid {
    grid-template-columns: 1fr 1fr 1fr;
    /*設定 Grid 的寬度*/
  }

  .sw_indexso_block {
    width: 100%;
    /* 改成單欄 */
  }

  .sw_indexso_block_subone {
    width: 100%;
    /* 裡面兩個圈圈可上下堆疊 */
  }

  .index2banner_bg .index2banner_wordblock {
    flex: 0 0 80%;
  }
  .index2banner_bg .index2banner_wordblock h3 {
    font-size: 1.2rem;
  }
  .index2banner_bg .index2banner_wordblock .subtitle {
    font-size: 2rem;
  }

  .footer_right {
    flex-direction: column;
  }

  .footer_desc dl {
    border-bottom: 1px solid #ccc;
    padding: 0.5rem 0;
  }

  .footer_desc dt {
    cursor: pointer;
    position: relative;
    font-weight: bold;
    margin-right: 20px;
  }

  .footer_desc dd {
    display: none;
  }

  .footer_desc.open dd {
    display: block;
  }

  .footer_desc dt::after {
    content: "▼";
    position: absolute;
    right: 0;
    font-size: 0.6rem;
    transition: transform 0.2s ease;
  }

  .footer_desc.open dt::after {
    transform: rotate(180deg);
  }

  .ff_logo {
    width: 150px;
  }

  .fearture_wrapper.pv {
    padding-left: 0;
  }

  .contentP_Wrap {
    padding-bottom: 30px;
  }

  .nap_wrapper {
    padding: 30px 0;
  }

  .cpblock p.cpcp {
    font-size: 1.6em !important;
  }

  .company_grid {
    grid-template-columns: 1fr;
    /* 直排 */
    grid-row-gap: 2em;
    /* 可自行調整間距 */
  }

  .cpblock.sub3 {
    order: 2;
    /* 讓 sub3 在 sub2 前面 */
  }

  .cpblock.sub2 {
    order: 3;
  }

  .Company_font_box h1, .Company_font_box h2 {
    font-size: 2.5em;
  }

  .Company_font_box p {
    font-size: 1rem;
    line-height: 1.4;
  }

  .Press_whitebg {
    flex-direction: column-reverse;
  }

  .press_pic.top {
    aspect-ratio: 16 / 9;
  }

  .swiper-slide {
    width: 100%;
    height: auto !important;
    display: flex;
  }

@media (max-width: 767px) {
  /* 1. 容器改為垂直排列 */
  .Open_Positionsbg.whitepaper {
    display: flex;
    flex-direction: column;
    align-items: center;    /* 讓內容水平居中 */
    text-align: center;     /* 讓文字居中 */
    padding: 30px 20px;
    padding-right: 20px;    /* 覆蓋掉你原本的 5px，讓手機版左右對稱 */
  }

  /* 2. 圖示區塊：移動到上方並調整間距 */
  .Open_Positionsbg.whitepaper .papericon {
    flex: 0 0 auto;         /* 取消寬度限制 */
    max-width: 80px;        /* 手機版圖示稍微縮小一點比較精緻 */
    margin: 0 0 15px 0;     /* 移除右邊距，增加下方邊距（與標題拉開） */
    padding: 10px;          /* 減少內距，讓圖示不要太大 */
  }

  /* 3. 文字區塊：確保寬度 100% */
  .wht_paper_box {
    width: 100%;
  }

  .wht_paper_box h3 {
    font-size: 1.3rem;
    margin: 0 0 10px 0;     /* 移除原本的左右 margin，改為居中對齊 */
    line-height: 1.3;
    -webkit-line-clamp: 5;  /* 標題可以顯示較完整 */
  }

  /* 4. 關鍵：手機版隱藏內文 (照你之前的需求) */
  .wht_paper_box p {
    display: none !important;
  }

  /* 5. 下載圖示：移動到最下方或隱藏 */
 .Open_Positionsbg.whitepaper .download_icon {
    display: none !important;
  }

  .Open_Positionsbg.whitepaper .download_icon i {
    font-size: 1.5rem;      /* 縮小箭頭圖示 */
  }
}

  .fpblock {
    flex-direction: column;
  }
  .fpblock:nth-child(odd) {
    flex-direction: column-reverse;
  }

  .fppic {
    width: 100%;
  }

  .flexblock {
    flex-direction: column;
  }

  .flexbloack3.pos1 {
    max-width: 100%;
  }

  .flexbloack3.pos2 {
    max-width: 100%;
  }

  .ValueAdded {
    flex-direction: column;
    flex-wrap: unset;
  }

  .partner_block {
    flex-direction: column;
  }

  .Partnership_box {
    width: 100%;
  }

  .gode_mg {
    flex-direction: column;
  }

  .ax_leader img {
    width: 90%;
    /* 小螢幕圖片寬度自適應 */
    margin-top: 25px;
    /* 上方距離微調 */
  }

.chk_pic {
    width: 16px;       /* 💡 修正：圖標縮小到 16px，更符合手機版的視覺比例 */
    margin-right: 8px;  /* 💡 修正：右邊間距縮減，幫緊湊的手機螢幕省空間 */
    margin-top: 15px;   /* 💡 關鍵：手機字體變小後，上方間距同步改小，圖標才不會下沉歪掉 */
  }
  
  .efre_p {
    float: none;       /* 💡 在手機版取消浮動，重回標準文件流，排版最安全 */
    width: 100%;       /* 視情況改為滿版，或者是保持 auto */
    margin-top: 6px;   /* 手機版稍微縮緊上方間距 */
  }

  .study_pic img {
    max-width: 90%;
    /* 手機/平板時圖不滿版 */
  }

  .product_application_wrap .apps__block.block2 {
    grid-template-columns: 1fr;
  }
  .product_application_wrap .apps__block.block3 {
    grid-template-columns: 1fr;
  }
  .product_application_wrap .apps__card {
    min-height: 340px;
    aspect-ratio: unset;
  }
}
@media only screen and (max-width: 680px) {
  /* 680 */
}
@media only screen and (max-width: 640px) {
  /* 640 */
  .swiper_solution {
    height: 110vw;
  }

  .par_grid {
    grid-template-columns: 1fr 1fr;
    /*設定 Grid 的寬度*/
  }

  .banner_font h2 {
    font-size: 1.5rem;
  }
  .banner_font p {
    font-size: 1rem;
  }

  .Case_bg {
    height: 70vw;
  }

  .product_wrapper .swiper-slide img {
    width: 100%;
    height: auto;
  }

  .font_article .picleft {
    flex-direction: column;
  }

  .font_article .picleft .bbone {
    flex: 0 0 100%;
  }

  .font_article .flexbox {
    flex-direction: column;
  }
}
@media only screen and (max-width: 575px) {
  .Open_Positionsbg.whitepaper .download_icon {
    padding: 0;
  }
}
@media only screen and (max-width: 480px) {
  /* 480 */
  .menu_wrapper {
    padding-left: 10px;
    padding-right: 10px;
  }

  .logo_pic {
    width: 120px;
  }

  .cop_li {
    margin-right: 5px;
    width: 24px;
  }

  .cop_li div {
    width: 100%;
  }

  #regionicon {
    display: none;
  }

  .Solutions_item_desc h2 {
    font-size: 1.4rem;
  }
  .Solutions_item_desc p {
    -webkit-line-clamp: 5;
  }

  .swiper_solution {
    height: 130vw;
  }

  .feature_bg {
    padding: 30px;
  }

  .swiper_feaProduct {
    height: 90vw;
  }

  .fearture_item_desc p {
    font-size: 1rem;
  }
  .fearture_item_desc h2 {
    font-size: 1.5rem;
  }

  .banner_bg {
    height: 80vw;
  }

  .index2banner_bg {
    padding: 0;
  }

  .index2banner_bg .index2banner_wordblock {
    flex: 0 0 100%;
    padding: 30px;
    margin: 0;
    border-radius: 0px;
  }

.Casebanner_box p {
    /* 1. 取消 50% 的縮排，改為適合手機的間距 */
    padding-right: 0;
    font-size: 1rem;
    line-height: 1.5;
    text-align: left;
    margin-bottom: 15px;
  }
}

  .index_title.pv {
    font-size: 2rem;
  }

  .ecab {
    margin-bottom: 30px;
  }

  .Partnership_box {
    flex-direction: column;
  }

  .par_logo {
    margin-bottom: 20px;
  }

  .product_application_wrap {
    width: 95%;
  }
}
@media only screen and (max-width: 414px) {
  /* 414 */
  .swiper_solution {
    height: 140vw;
  }

  .solutions_fone {
    flex: 0 0 calc(100% - 40px);
  }
}
@media only screen and (max-width: 390px) {
  /* 390*/
}
@media only screen and (max-width: 375px) {
  /* 375 */
  .swiper_feaProduct {
    height: 110vw;
  }

  .swiper_solution {
    height: 165vw;
  }

  .sarch_bar_white {
    width: 100%;
  }
  .sarch_bar_white input {
    width: 78%;
  }

  .email_input {
    margin-left: 15px;
  }

  .sub_mit_icon {
    font-size: 0.7rem;
  }

  .par_grid {
    grid-template-columns: 1fr;
    /*設定 Grid 的寬度*/
  }

  .index2banner_bg {
    background-position: LEFT;
  }

  .index2banner_bg .index2banner_wordblock .index2banner_wordblock2 {
    flex: 0 0 35%;
  }
}
@media only screen and (max-width: 320px) {
  /* 320 */
  .banner_bg {
    width: 100vw;
  }

  .c11_Papers_bg {
    padding: 1em;
  }
}

@media screen and (max-width: 768px) {
    /* 1. 外層容器優化 */
    .pr_wrap {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 15px 0 15px !important;
        margin: 0 !important;
    }

    /* 2. 強制垂直堆疊：解決標題跑向右邊的關鍵 */
    /* 針對輪播區塊 */
    .swiper_productnew .swiper-slide {
        display: flex !important;
        flex-direction: column !important; /* 🔴 強制由上而下排列 */
        align-items: center !important;
        width: 100% !important;
    }

    /* 針對下方列表區塊 */
    .npgrid {
        display: flex !important;
        flex-direction: column !important; /* 🔴 強制由上而下排列 */
        align-items: center !important;
        width: 100% !important;
        height: auto !important;
        margin-bottom: 30px;
    }

    /* 3. 圖片外框區塊：解決底色拉長 */
    .product_bg, .whatsnews_bg {
    width: 100% !important;
    height: 280px !important; /* 💡 增加高度，讓圖片有更多伸展空間 */
    padding: 5px !important;  /* 💡 減少內縮，讓圖片可以貼近邊緣 */
    border-radius: 20px !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden;         /* 確保圖片放大時不會超出圓角 */
    transition: all 0.3s ease;
    }

    /* 4. 圖片容器與圖片縮放 */
    .whatsnews_pic {
        height: 100% !important;
        width: 100% !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        background-color: transparent !important;
        overflow: hidden;
        padding: 0 !important;
    }

    .whatsnews_pic img {
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        /*max-height: 100% !important;*/
        object-fit: contain !important;
        mix-blend-mode: darken;
    }
	    /* 5. 文字區塊優化：確保 100% 寬度不留空間給標題擠進去 */
    .newproduct_box {
        width: 100% !important;
        padding: 15px 5px !important;
        text-align: center !important;
        display: block !important; /* 確保它是區塊元素 */
    }

    .newproduct_box a h2 {
        font-size: 1.1rem !important;
        margin-top: 15px !important;
        margin-bottom: 5px !important;
        color: #333 !important;
        font-weight: bold;
        display: block;
        width: 100%;
    }

    /* 6. 導航箭頭重排 */
    .next_lastproduct {
        position: relative !important;
        margin-top: 20px !important;
        display: flex !important;
        justify-content: center !important;
        gap: 30px;
        width: 100% !important;
    }

    .next_lastproduct .last_icon {
        position: static !important;
    }
} /* 🔴 媒體查詢正確結束 */
@media (max-width: 768px) {
    /* 1. 針對這張特定表格 ID (lv2_開頭) 或類別強制解除限制 */
    .table_about.tb1.gofix {
        display: table !important; /* 確保它維持表格特性 */
        table-layout: auto !important; /* 廢除固定寬度，改由內容撐開 */
        width: 100% !important;
        min-width: 700px !important; /* ⭐ 關鍵：強制表格寬度至少 700px，字就不會被擠長 */
    }

    /* 2. 讓外層容器可以橫向滑動 */
    .table_sample {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 15px; /* 給捲動條留一點空間 */
    }

    /* 3. 強制所有儲存格「不准換行」 */
    .table_about td,
    .table_about th {
        white-space: nowrap !important; /* ⭐ 關鍵：強制文字橫著走，絕對不變長條 */
        width: auto !important;         /* 廢除 HTML 裡的 width="16%" */
        padding: 12px 10px !important;
    }

    /* 4. 只有 Description 欄位允許換行（因為字可能很多），但要給夠寬度 */
    .table_about td.aleft {
        white-space: normal !important;
        min-width: 300px !important;    /* 給描述欄位足夠的橫向空間 */
    }
}
/* --- company governance放在 main.css 的通用下載清單樣式 --- */
.download-list-group {
    margin-bottom: 40px;
}

.download-list-group h3 {
    display: inline-block;
    padding-bottom: 8px;
    margin: 30px 0 20px 0;
    color: #333;
    font-size: 24px;
	font-weight: 700;
}

.download-list-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.download-list-group ul li a {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background: #ffffff;
    color: #333;
    text-decoration: none !important;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    border-left: 5px solid #ddd;
    transition: all 0.3s ease;
    font-size: 16px;
    font-weight: 500;
}

.download-list-group ul li a:hover {
    background: #fff;
    border-left: 5px solid #76063C;
    box-shadow: 0 5px 15px rgba(100, 110, 120, 0.2);
    color: #76063C;
    transform: translateX(8px);
}

.download-list-group ul li a::before {
    content: "\f1c1";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 15px;
    color: #76063C;
    font-size: 18px;
}
/* 延用之前的 list 樣式，但修改圖示 */
.download-list-group ul li a.contact-mail::before { content: "\f0e0"; } /* 信封圖示 */
.download-list-group ul li a.contact-link::before { content: "\f0c1"; } /* 連結圖示 */

/* 介紹文字樣式 */
.contact-intro-text {
    margin: 20px 0;
    padding-left: 15px;
    color: #333;

}

/* 發言人資訊卡片 */
.spokesperson-card {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}

.spokesperson-card h3 {
    margin-top: 0;
    color: #333;
	font-weight:700;
    font-size: 24px;
    margin-bottom: 25px;
}

/* 模擬表格的 Grid 佈局 */
.info-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.info-item {
    display: flex;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
}

.info-item .label {
    width: 150px;
    font-weight: 700;
    color: #333;
    flex-shrink: 0;
}

.info-item .value {
    color: #555;
    line-height: 1.5;
}

.info-item .value a {
    color: #76063C;
    text-decoration: none;
}

/* 手機版適應：標籤與內容垂直排列 */
@media (max-width: 600px) {
    .info-item {
        flex-direction: column;
    }
    .info-item .label {
        width: 100%;
        margin-bottom: 5px;
    }
}
/* --- 雙欄矩陣容器 --- */
.matrix-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 電腦版雙欄 */
    gap: 15px 30px;
}

/* --- 矩陣列本體 --- */
.matrix-row {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #ddd; /* 邊框改為淡淡的黃色或淺灰色 */
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.matrix-row:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* --- 年份標籤：同步 Annual Report 的黃色 --- */
.matrix-year {
    background: #76063C; /* 改為與黃色方塊一致 */
    color: #fff;
    padding: 12px 20px;
    min-width: 80px;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
}

/* --- 連結區塊 --- */
.matrix-links {
    display: flex;
    flex-wrap: wrap;
    padding: 0 25px;
    gap: 30px;
}

.matrix-links a {
    color: #333; /* 深灰色字 */
    text-decoration: none !important;
    font-size: 15px;
    font-weight: 500;
    transition: color 0.3s;
}

/* --- 圖示顏色同步：深灰色或 Axiomtek 紅 --- */
.matrix-links a::before {
    content: "\f1c1";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 6px;
    color: #76063C;
}

.matrix-links a:hover {
    color: #76063C;
}

/* --- RWD 手機版切換 --- */
@media (max-width: 991px) {
    .matrix-grid-container {
        grid-template-columns: 1fr; /* 平板/手機恢復單欄 */
    }
}

@media (max-width: 480px) {
    .matrix-year {
        padding: 10px;
        font-size: 16px;
    }
    .matrix-links {
        gap: 8px;
        padding: 10px;
    }
}

/* 聯絡資訊雙欄 */
.contact-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 50px;
}

.info-card {
    background: #fff;
    border-top: 5px solid #ddd;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.info-card h3 {
    font-size: 20px;
    color: #333;
	font-weight: 700;
    margin-bottom: 25px;
    min-height: 50px;
}

.info-row {
    display: flex;
    margin-bottom: 18px;
    align-items: flex-start;
}

.info-row i {
    color: #76063C;
    width: 25px;
    font-size: 18px;
    margin-top: 3px;
}

.text-group {
    display: flex;
    flex-direction: column;
    padding-left: 10px;
}

.text-group .label {
    font-weight: 700;
    font-size: 14px;
    color: #333;
    text-transform: uppercase;
}

/* --- Annual Calendar 時程樣式 --- */
.calendar-timeline {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.timeline-item {
    display: flex;
    align-items: center;
    background: #f9f9f9;
    padding: 15px 25px;
    border-radius: 6px;
    transition: 0.3s;
}

.timeline-item:hover {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transform: translateX(5px);
}

.time-mark {
    background: #333;
    color: #fff;
    padding: 5px 15px;
    border-radius: 4px;
    font-weight: 700;
    min-width: 70px;
    text-align: center;
    margin-right: 20px;
}

/* 高亮重要月份 (例如股東會) */
.timeline-item.highlight {
    border-left: 5px solid #f7b52c;
}
.timeline-item.highlight .time-mark {
    background: #f7b52c;
}

@media (max-width: 991px) {
    .contact-card-grid {
        grid-template-columns: 1fr;
    }
}

/* 容器優化：確保手機版可滑動並增加陰影質感 */
.table-container {
    width: 100%;
    overflow-x: auto;
    margin: 20px 0 40px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
}

.comfort-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    min-width: 950px; /* 寬度足夠讓 7 欄資訊不擁擠 */
}

/* 標題列：深灰色背景搭配白色文字 */
.comfort-table th {
    background-color: #E7e0c9;
    color: #333;
    padding: 16px 10px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    border: none;
}
/* 第二種顏色：設定為淺灰色區塊 (例如 #F0F0F0) */
.comfort-table th.bg-alt {
    background-color: #F6EFE5; /* 較深的灰色以示區別 */
    color: #333;
    border: 1px solid #E7e0c9;
}

/* 內容格：增加上下留白，取消垂直線 */
.comfort-table td {
    padding: 15px 10px;
    text-align: center;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
}

/* 年度欄位（第一欄）：黃色側邊條與加粗文字 */
.year-col {
    font-weight: 700;
    color: #333 !important;
    /*background-color: #F4F4F4;*/
    }

/* 斑馬紋隔行變色 */
.comfort-table tbody tr:nth-child(even) {
    background-color: #fafafa;
}

/* 滑鼠懸停效果 */
.comfort-table tbody tr:hover {
    background-color: #f7b52c05;
    transition: background 0.2s;
}

/* 最後一行拿掉底線，維持圓角美觀 */
.comfort-table tbody tr:last-child td {
    border-bottom: none;
}

.sitemap-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 12px;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.05); /* 統一使用極細邊框 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); /* 統一使用輕盈陰影 */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* 統一動畫節奏 */

    /* 保持你需要的排版結構 */
    display: flex;
    flex-direction: column;
    text-align: left;
}

.sitemap-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); /* 保持優雅擴散效果 */
}

/* 標題與列表細節維持你的設計 */
.sitemap-card h2 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 24px;
    position: relative;
    padding-bottom: 12px;
}

.sitemap-card h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: #76063C;
}

.sitemap-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sitemap-card ul li a {
    color: #333;
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 2;
    display: block;
    transition: all 0.3s ease;
}

.sitemap-card ul li a:hover {
    color: #333;
    padding-left: 5px;
}
/* =========================================
   Axiomtek Partnership Page (Namespace 封裝版)
   ========================================= */

/* 確保此區塊的樣式不外溢 */
.axiomtek-partners-page {
    padding-bottom: 100px;
}

/* 透過 .axiomtek-partners-page 限制作用範圍，解決與全域樣式衝突 */
.axiomtek-partners-page .page_title {
    text-align: center;
    margin-bottom: 60px;
    font-size: 3.2rem;
    font-weight: 700;
}

.axiomtek-partners-page .articles_desc p {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
    line-height: 1.8;
    color: #666;
    font-size: 1.0rem;
}

/* Tier 1 */
.axiomtek-partners-page .partner-tier-1 {
    display: flex;
    gap: 30px;
    margin-bottom: 80px;
    justify-content: center;
    flex-wrap: wrap;
}

.axiomtek-partners-page .partner-tier-1 .Partnership_box {
    flex: 1;
    min-width: 340px;
    max-width: 580px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.axiomtek-partners-page .partner-tier-1 .Partnership_box:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

.axiomtek-partners-page .partner-tier-1 .Partnership_box.titanium-partner:hover {
    border-color: #76063C;
}
.axiomtek-partners-page .partner-tier-1 .Partnership_box.preferred-partner:hover {
    border-color: #76063C;
}

.axiomtek-partners-page .partner-tier-1 .par_logo {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

.axiomtek-partners-page .partner-tier-1 .par_logo img {
    max-width: 200px;
    max-height: 80px;
    width: auto;
    height: auto;
}

.axiomtek-partners-page .partner-tier-1 .Partnership_padding h2 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #333;
}

.axiomtek-partners-page .partner-tier-1 .Partnership_padding p {
    font-size: 1rem;
    line-height: 1.7;
    color: #666;
    margin: 0;
}

/* Tier 2 */
.axiomtek-partners-page .partner-tier-2 {
    margin-top: 80px;
    padding-top: 60px;
    margin-bottom: 120px;
}

.axiomtek-partners-page .ecosystem-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 50px;
    color: #333;
}

.axiomtek-partners-page .logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
    align-items: center;
}

.axiomtek-partners-page .grid-item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    transition: all 0.3s ease;
}

.axiomtek-partners-page .grid-item img {
    max-width: 100%;
    max-height: 70px;
    width: auto;
    height: auto;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.4s ease;
}

.axiomtek-partners-page .grid-item:hover {
    border-color: #ddd;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    transform: scale(1.03);
}

.axiomtek-partners-page .grid-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* Responsive */
@media (max-width: 992px) {
    .axiomtek-partners-page .partner-tier-1 .Partnership_box {
        padding: 30px;
    }
}

@media (max-width: 768px) {
    .axiomtek-partners-page .page_title { font-size: 2.2rem; }
    .axiomtek-partners-page .ecosystem-title { font-size: 1.6rem; }

    .axiomtek-partners-page .partner-tier-1 {
        flex-direction: column;
        align-items: center;
    }

    .axiomtek-partners-page .partner-tier-1 .Partnership_box {
        width: 100%;
        max-width: 100%;
    }

    .axiomtek-partners-page .logo-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 15px;
    }

    .axiomtek-partners-page .grid-item {
        height: 100px;
        padding: 15px;
    }
}
/* --- 1. RMA Portal 容器佈局 --- */
.erma_container {
    padding: 60px 0;
    max-width: 1100px;
    margin: 0 auto;
}

/* --- 2. 標題與引言區塊 --- */
.erma_header_wrapper {
    text-align: left;
    margin-bottom: 60px;
    padding: 0 15px; /* 避免手機版貼邊 */
}

.title-divider {
    width: 60px;
    height: 3px;
    background: #E7e0c9;
    margin: 0 0 20px 0;
}

.main-title {
    font-size: 36px;
    font-weight: 500;
    color: #333;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.intro-text {
    font-size: 1rem;
    max-width: 800px;
    line-height: 1.8;
    color: #333;
    margin: 0;
}

/* --- 3. 網格間距調整 (解決間距沒變寬的問題) --- */
.rma-card-wrapper {
    /* 直接修改 Bootstrap 的間距變數，這招最乾淨 */
    --bs-gutter-x: 5rem !important;
}

/* --- 4. 高雅卡片設計 (RMA Card) --- */
.rma_card_elegant {
    display: flex !important;
    flex-direction: column;
    height: 280px;
    width: 100%; /* 確保撐滿 col-md-6 */
    background: #fff;
    border: 1px solid #F6EFE5;
    border-radius: 8px;
    text-decoration: none !important;
    /* 使用貝茲曲線讓動畫更有高級感 */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    text-align: left;
    color: #333;
    overflow: hidden;
}

/* 滑鼠懸停效果 */
.rma_card_elegant:hover {
    border-color: #76063C;
    box-shadow: 0 20px 30px rgba(0,0,0,0.15);
    transform: translateY(-10px);
    text-decoration: none !important;
}

/* --- 5. 卡片內部內容排版 --- */
.content_box_white {
    padding: 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* 讓內容對齊底部 */
    align-items: flex-start;
}

/* 圖示樣式 */
.content_box_white i {
    font-size: 40px;
    color: #76063C;
    margin-bottom: 20px;
    display: block;
}

/* 上標小字 (地區名稱) */
.content_box_white span {
    font-size: 13px;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
}

/* 卡片標題 */
.content_box_white h3 {
    font-size: 24px;
    color: #333;
    margin: 5px 0 0 0;
    font-weight: 600;
    transition: color 0.3s ease;
}

/* Hover 時標題顏色同步變化 */
.rma_card_elegant:hover h3 {
    color: #76063C;
}

/* --- 6. 響應式優化 (手機版) --- */
@media (max-width: 768px) {
    .rma-card-wrapper {
        --bs-gutter-x: 1.5rem !important; /* 手機版間距縮小 */
    }

    .rma_card_elegant {
        height: 240px; /* 手機版高度稍降 */
    }

    .content_box_white {
        padding: 30px;
    }

    .main-title {
        font-size: 28px;
    }
}
/* --- 獨立命名空間：推薦產品卡片 --- */
.recomm-card-alt {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 30px; /* 微圓角增加質感 */
    text-decoration: none !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
}

/* 懸停效果：品牌色邊框與精緻陰影 */
.recomm-card-alt:hover {
    border-color: #76063C;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* 文字內容容器 */
.recomm-card-alt .card-info {
    padding: 40px 25px 15px;
    flex-grow: 1; /* 確保內容區自動撐開 */
}

/* 產品型號 (原 h3) */
.recomm-card-alt .product-id {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.2;
}

/* 產品名稱 (原 p) */
.recomm-card-alt .product-title {
    display: block;
    font-size: 1rem;
    color: #333;
    line-height: 1.5;
    margin-bottom: 0;
    /* 限制兩行文字，保持整齊
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;*/
    overflow: hidden;
}

/* 圖片容器 */
/* --- 圖片容器 (修正版) --- */
/* --- 圖片容器 (修正為 300x300) --- */
.recomm-card-alt .card-thumb {
    /* 強制限制最大尺寸為 300x300 */
    width: 100%;
    max-width: 300px;
    max-height: 300px;
    aspect-ratio: 1 / 1;        /* 確保正方形比例 */
    margin: 0 auto;             /* 讓這 300px 的方塊在欄位中居中 */

    /* 原有結構設定 */
    padding: 10px;              /* 縮減內距，讓 300px 空間被充分利用 */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #fff;
}

.recomm-card-alt .card-thumb img {
    /* 讓圖片在 300x300 內縮放 */
    width: 100%;
    height: 100%;
    object-fit: contain;        /* 完整顯示產品圖，不裁切 */

    transition: transform 0.6s ease;
    display: block;
}

.recomm-card-alt:hover .card-thumb img {
    transform: scale(1.08);
}

/* 手機版適應 */
@media (max-width: 768px) {
    .recomm-card-alt .card-info {
        padding: 20px 15px 10px;
    }
    .recomm-card-alt .product-id {
        font-size: 1.2rem;
    }
}


 /* 1. Related Products (相關產品) 卡片浮雕感與正方形圖片 */
.rel_bg {
        background: #ffffff;
        border: 1px solid #f0f0f0;
        border-radius: 12px;
        padding: 15px;
        transition: all 0.3s ease;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
.rel_bg a { text-decoration: none !important; }

.rel_bg:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
        border-color: #76063C; /* 品牌紅 */
    }

/* 強制圖片外框為正方形，背景淺灰，看起來更像精品 */
.rel_bg .whatsnews_pic {
        aspect-ratio: 1 / 1;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f9f9f9;
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 15px;
    }

.rel_bg .whatsnews_pic img {
        max-width: 90%;
        max-height: 90%;
        object-fit: contain;
        transition: transform 0.5s ease;
    }

.rel_bg:hover .whatsnews_pic img {
        transform: scale(1.08);
    }

.rel_bg .rel_p {
        font-weight: 600;
        color: #333;
        text-align: center;
        margin-top: auto;
        transition: color 0.3s ease;
    }

.rel_bg:hover .rel_p { color: #76063C; }

@media (max-width: 768px) {
    /* 1. 確保相關產品的容器寬度展開，並調大左右內縮 (Padding) */
    .row > [class*="col-"] {
        width: 100% !important; /* 強制單欄填滿 */
        padding-left: 20px !important;  /* 💡 優化：從 15px 加大到 20px，讓內容往內推 */
        padding-right: 20px !important; /* 💡 優化：從 15px 加大到 20px，讓內容往內推 */
        margin-bottom: 25px; /* 卡片跟卡片之間的垂直距離稍微加大，視覺更舒服 */
    }

    /* 2. 修正原本的卡片樣式：利用 calc 阻斷「太滿」的視覺感 */
    .rel_bg {
        /* 💡【關鍵修正】不要用 100%，改用 calc(100% - 16px) */
        /* 這樣可以強制讓卡片左右兩側與螢幕邊緣「至少保留 8px 的空隙」，絕對不會再貼扁螢幕 */
        width: calc(100% - 16px) !important;   
        
        margin: 0 auto !important; /* 強制水平置中，搭配上面的 calc 就會產生完美的左右留白 */
        box-sizing: border-box;    /* 避免 padding 撐破寬度 */
    }

    /* 3. 確保圖片容器也是滿寬的 */
    .rel_bg .whatsnews_pic {
        width: 100%;
        max-width: 100%;
    }

    /* 💡 如果你希望手機版是「一列兩個 (兩欄)」，請改用這段： */
    /*
    .row > [class*="col-"] {
        width: 50% !important;
        float: left;
    }
    */
}


/* --- 合作夥伴微調：讓 Logo 牆變整齊 --- */
.swiper_partnership img {
    filter: grayscale(100%); /* 預設灰色，看起來比較高級 */
    opacity: 0.6;
    transition: all 0.4s ease;
}

.swiper_partnership img:hover {
    filter: grayscale(0%); /* 滑鼠移上去變彩色 */
    opacity: 1;
}

/* 讓分頁的小點點變品牌顏色 */
.swiper-pagination-bullet-active {
    background: #76063C !important;
}
/* 2. Partners (合作夥伴) 針對後台 ree_ppc 結構優化 */
    .partners_logobox {
        background: #f4f4f4; /* 淺灰背景區隔 */
        border-radius: 20px;
        padding: 40px 15px;
        margin-top: 20px;
    }

    /* 控制後台吐出的容器，讓 Logo 垂直置中 */
    .ree_ppc {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80px;
		/* 💡 關鍵：往上推開距離，數值（如 20px、30px）可自由調整 */
         margin-top: 20px;
    }

    /* 針對後台 img 加上灰階特效 */
    .ree_ppc img {
        filter: grayscale(100%); /* 預設灰色 */
        opacity: 0.6;
        transition: all 0.4s ease;
        max-height: 55px !important; /* 限制高度讓大家看起來一樣大 */
        width: auto !important;
        object-fit: contain;
    }

    .ree_ppc img:hover {
        filter: grayscale(0%); /* 滑鼠移入變彩色 */
        opacity: 1;
        transform: scale(1.1);
    }

    /* 讓小點點變品牌色 */
    .swiper-pagination.partnership .swiper-pagination-bullet-active {
        background: #76063C !important;
    }

/* Cookie 橫幅樣式 */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #5B6770; /* 灰藍色背景 */
    color: #fff;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10000;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
    box-sizing: border-box;
    flex-wrap: wrap;
}
.cookie-content { flex: 1; min-width: 300px; margin-right: 20px; }
.cookie-content h3 { margin: 0 0 5px 0; font-size: 18px; color: #fff; font-weight: bolder; }
.cookie-content p { margin: 0; font-size: 14px; color: #ccc; }
.cookie-buttons { display: flex; gap: 10px; }
.btn-accept { background-color: #76063C; color: white; border: none; padding: 10px 20px; cursor: pointer; border-radius: 4px; font-weight: bold; }
.btn-reject { background-color: transparent; color: #ccc; border: 1px solid #ccc; padding: 10px 20px; cursor: pointer; border-radius: 4px; }
.btn-accept:hover { background-color: transparent; color: #fff; border: 1px solid #76063C; }

@media (max-width: 600px) {
    .cookie-banner { flex-direction: column; align-items: flex-start; }
    .cookie-buttons { margin-top: 15px; width: 100%; justify-content: flex-end; }
}
.related_articles_header {
    margin-top: 50px;
    margin-bottom: 30px;
    text-align: center; /* 若您的 index_title 沒置中，可在此控制 */
}




/* compare loading*/
#compareLoading {
    padding: 60px 0;
    text-align: center;
}

.loading_text {
    font-size: 1rem;
    letter-spacing: 1px;
    display: inline-block;
}
/* To Top 按鈕主體 */
.to-top-btn {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 40px;
    height: 40px;
    background-color: #76063C; /* Axiomtek 品牌紅 */
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 1001; /* 確保在所有元件之上 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: scale(0.5); /* 初始縮小 */
}

/* 顯示狀態：滑動過半後啟用 */
.to-top-btn.show {
    opacity: 1;
    visibility: visible;
    transform: scale(1); /* 彈出放大 */
}

/* 懸停效果 */
.to-top-btn:hover {
    background-color: #76063C; /* 懸停時顏色加深 */
    transform: translateY(-5px); /* 向上微浮 */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.35);
}

.to-top-btn i {
    font-size: 22px;
}

/* RWD 適應：手機版稍微縮小位置 */
@media (max-width: 768px) {
    .to-top-btn {
        width: 45px;
        height: 45px;
        bottom: 25px;
        right: 25px;
    }



}

/* ==========================================================================
   Axiomtek 404 頁面 - 官方企業色（#76063c）+ 精品淡灰陰影設計
   ========================================================================== */

/* 404 主外殼：充足的上下留白，營造大器的空間感 */
.page404 {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 24px;
    background: #ffffff;
}

/* 核心容器 */
.page404__inner {
    width: 100%;
    max-width: 650px;
    text-align: center; /* 內容置中：凝聚使用者視覺 */
}

/* 主標題：拉開字距 (.04em)，展現沉穩厚重的科技大廠感 */
.page404 h1 {
    font-size: 36px;
    line-height: 1.3;
    font-weight: 800;
    color: #000000;
    margin: 0 0 16px 0;
    letter-spacing: .04em;
}

/* 副標題描述：深灰色中性內文，閱讀體驗最舒服 */
.page404 .desc {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    color: #555555;
    margin: 0 0 50px 0;
}

/* 指引區塊小標（What you can do） */
.page404 h2 {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 16px 0;
    color: #999999;
}

/* 搜尋引導提示文字樣式：優雅低調 */
.page404 .search-tip {
    font-size: 15px;
    color: #444444;
    margin: 0 0 32px 0;
    font-weight: 500;
}

/* 讓提示中的放大鏡圖示帶有企業色點綴 */
.page404 .search-tip .mdi {
    color: #76063c;
    margin-right: 4px;
    font-size: 16px;
}

/* 重組按鈕清單：利用 Flexbox 佈局成水平並排的「按鈕群組」 */
.page404 ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

/* 隱藏原生 HTML 內不符合大器風格的小箭頭圖示 */
.page404 li .mdi {
    display: none !important;
}

/* ==========================================================================
   標準 UX 的主要與次要動作（CTA）設計
   ========================================================================= */

/* 項目 1：回到首頁 (主動作按鈕 - 採用 Axiomtek 官方企業色 #76063c) */
.page404 ul li:nth-child(1) a {
    display: inline-flex;
    padding: 12px 32px;
    background: #76063c;
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    border-radius: 5px;
    transition: all 0.2s ease;
}
.page404 ul li:nth-child(1) a:hover {
    background: #5c042e; /* 懸停時略為加深 */

    /* 【高級修正】：改用精品淡灰色的柔和陰影 */
    /* 1px 水平, 4px 垂直, 12px 模糊半徑, 使用極淡灰色 (#e0e0e0) */
    box-shadow: 1px 4px 12px #e0e0e0;
}

/* 項目 2：聯絡我們 (次要動作按鈕 - 高雅白底灰框) */
.page404 ul li:nth-child(2) a {
    display: inline-flex;
    padding: 11px 32px;
    background: #ffffff;
    color: #111111 !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    border: 1px solid #dcdcdc;
    border-radius: 5px;
    transition: all 0.2s ease;
}
.page404 ul li:nth-child(2) a:hover {
    background: #f9f9f9;
    border-color: #76063c; /* 懸停時外框變成企業色 */
    color: #76063c !important;

    /* 【高級修正】：次要按鈕也改用相同的精品淡灰柔和陰影 */
    box-shadow: 1px 4px 12px #e0e0e0;
}

/* ==========================================================================
   RWD 手機版自動適應（符合 Google 行動裝置友善標準）
   ========================================================================== */
@media screen and (max-width: 768px) {
    .page404 {
        min-height: 50vh;
        padding: 60px 20px;
    }

    .page404 h1 {
        font-size: 28px;
    }

    .page404 .search-tip {
        font-size: 14px;
        margin-bottom: 24px;
    }

    /* 手機版將按鈕改為垂直排列 */
    .page404 ul {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .page404 ul li,
    .page404 ul li:nth-child(1) a,
    .page404 ul li:nth-child(2) a {
        width: 100%;
        box-sizing: border-box;
        justify-content: center;
        text-align: center;
    }
}
/* ==========================================================================
   【主容器：.opt_2__wrapper】手機版 RWD 優化 (請貼在 @media 區塊內)
   ========================================================================== */
@media screen and (max-width: 768px) {

  .opt_2__wrapper {
    /* 💡 關鍵 1：手機版必須橫向撐開，改成 94%（左右各留 3% 舒適邊距）
       絕對不能維持 75%，不然寬度太窄內容一定會破版！ */
    width: 94% !important;

    /* 💡 關鍵 2：跟 .comp_wrapper 同步，將巨大的 10vh 留白縮緊為穩定的 25px
       確保全站的上下區塊間距（Spacing）看起來視覺比例一致、非常緊湊 */
    padding: 25px 0 !important;
  }

}
/* --- 產品列表表格樣式 (從 ascx 移入) --- */
.ajax-product-table {
    table-layout: fixed !important;
    width: 100% !important;
}

.ajax-product-table th:nth-child(1),
.ajax-product-table td:nth-child(1) {
    width: 40% !important;
}

.ajax-product-table th:nth-child(n+2),
.ajax-product-table td:nth-child(n+2) {
    width: 60% !important;
}

.ajax-product-table .square-image-container {
    padding-top: 0 !important;
    height: 120px !important;
    width: 100% !important;
    max-width: 200px !important;
    position: relative !important;
    margin: 0 auto !important;
    background: none !important;
}

.ajax-product-table .square-image-container img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

.pinfopid {
    display: block !important;
    max-width: 100% !important;
    white-space: normal !important;
    line-height: 1.4 !important;
    font-weight: bold;
}

#productTableWrapper {
    min-height: 400px;
    height: auto;
    display: block;
    position: relative;
}

@media screen and (max-width: 999px) {
    #productTableWrapper { min-height: auto; }
    .pr_wrap > a { display: inline-block; width: 49%; }
    .pdgrid_btn { margin-right: 0 !important; justify-content: center; width: 100% !important; }
}

/* ==========================================================================
   Axiomtek Soltuion Part 2 (整合優化版)
   ========================================================================== */
.ax-edge-wrapper {
    --ax-brand: #76063C;
    --ax-gray-bg: #F4F4F4;
    --ax-text-muted: #333;
}

/* --- 1. 文字與基礎排版 (全域) --- */
.ax-edge-wrapper .ax-body-text,
.ax-edge-wrapper .ax-solution-text {
    color: #4a5568 !important;
    line-height: 1.8 !important;
    text-align: justify !important;
    margin-bottom: 25px !important;
    font-size: 1rem !important;
}

/* --- 2. 區塊間距與標題 --- */
.ax-edge-wrapper .ax-transient-box, 
.ax-edge-wrapper .ax-solution-section { margin: 40px 0; }

.ax-edge-wrapper h2 {
    color: var(--ax-brand) !important;
    font-weight: 700 !important;
    margin-bottom: 40px !important;
    font-size: 1.8rem !important;
    line-height: 1.3 !important;
    text-align: center !important;
}

/* --- 3. 圖片容器 --- */
.ax-edge-wrapper .ax-chart-container, 
.ax-edge-wrapper .ax-diagram-stacked-container { 
    width: 100%; display: block; margin: 0 auto; 
}
.ax-edge-wrapper img { max-width: 80%; height: auto; display: block; }

/* --- 4. 標籤切換系統 (Tabs) --- */
.ax-edge-wrapper .ax-tabs-container {
    margin-top: 60px; margin-bottom: 0; width: 100%;
    background-color: var(--ax-gray-bg) !important; 
    padding: 60px 0 !important;
}
.ax-edge-wrapper .ax-tab-input { display: none; }

.ax-edge-wrapper .ax-tabs-nav {
    display: flex; justify-content: center; gap: 15px;
    margin-bottom: 20px; border-bottom: 2px solid #e2e8f0;
}
.ax-edge-wrapper .ax-tab-label {
    padding: 14px 35px; font-size: 1.1rem; font-weight: 700;
    color: var(--ax-text-muted); cursor: pointer;
    transition: all 0.3s ease; border-bottom: 3px solid transparent;
    margin-bottom: -2px; z-index: 2;
}
.ax-edge-wrapper .ax-tab-label:hover { color: var(--ax-brand); }

/* 選取狀態 */
#ax-t1:checked ~ .page_wrapper .ax-tabs-nav label[for="ax-t1"],
#ax-t2:checked ~ .page_wrapper .ax-tabs-nav label[for="ax-t2"],
#ax-t3:checked ~ .page_wrapper .ax-tabs-nav label[for="ax-t3"] {
    color: var(--ax-brand); border-bottom-color: var(--ax-brand);
}

.ax-edge-wrapper .ax-tab-content {
    display: none; background-color: transparent !important; width: 100%;
    animation: axFadeIn 0.4s ease forwards;
}

#ax-t1:checked ~ .page_wrapper .ax-tabs-body #ax-panel-1,
#ax-t2:checked ~ .page_wrapper .ax-tabs-body #ax-panel-2,
#ax-t3:checked ~ .page_wrapper .ax-tabs-body #ax-panel-3 {
    display: block;
}

@keyframes axFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* --- 5. 產品項目列表 --- */
.ax-edge-wrapper .ax-product-top-row { margin-bottom: 40px; }
.ax-edge-wrapper .ax-product-title {
    font-weight: 700; font-size: 1.6rem; margin: 60px;
    line-height: 1.3; text-align: center !important; color: #333;
}
.ax-edge-wrapper .ax-feature-item { display: flex; align-items: start; gap: 40px; margin-bottom: 40px; }

.ax-edge-wrapper .ax-feature-icon {
    width: 200px; height: 200px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.ax-edge-wrapper .ax-feature-icon img { width: 100% !important; height: 100% !important; object-fit: contain; }

.ax-edge-wrapper .ax-feature-content { flex-grow: 1; padding-top: 10px; }
.ax-edge-wrapper .ax-feature-title {
    font-size: 1.25rem; font-weight: 700; color: var(--ax-brand);
    margin-bottom: 10px; line-height: 1.4;
}
.ax-edge-wrapper .ax-feature-item p { color: var(--ax-text-muted); font-size: 1rem; line-height: 1.7; text-align: justify; }

/* --- 6. 手機版 RWD 優化 (集中處理) --- */
@media (max-width: 991px) {
    /* 文字優化 */
    .ax-edge-wrapper .ax-body-text,
    .ax-edge-wrapper .ax-solution-text {
        text-align: left !important;
        line-height: 1.6 !important;
        margin-bottom: 20px !important;
    }

    /* 標籤列堆疊 */
    .ax-edge-wrapper .ax-tabs-nav { flex-direction: column !important; border-bottom: none !important; gap: 10px !important; }
    .ax-edge-wrapper .ax-tab-label { width: 100% !important; text-align: center !important; border-bottom: 1px solid #e2e8f0 !important; padding: 15px 0 !important; }

    /* 產品垂直排列 (Icon 上, 文字下) */
    .ax-edge-wrapper .ax-feature-item { display: block !important; text-align: center !important; margin-bottom: 40px !important; }
    .ax-edge-wrapper .ax-feature-icon { display: block !important; margin: 0 auto 15px auto !important; width: 120px !important; height: 120px !important; float: none !important; }
    .ax-edge-wrapper .ax-feature-content { display: block !important; width: 100% !important; padding-top: 0 !important; }
}
/* =========================================
   全域變數 & 共用設定 (適用於Security兩頁)
   ========================================= */
:root {
    --sa-primary: #76063C;         /* Axiomtek 企業酒紅 */
    --sa-gold: #C5B687;            /* Axiomtek 企業金色 */
    --sa-bg-gray: #F4F4F4;
    --sa-border: #e1e1e1;          /* 完美融入全站的 #e1e1e1 線條 */
    --sa-sidebar-bg: #0A192F;      /* 側邊欄深藍 */
    --sa-text-dark: #333333;
}

/* 共用外層容器 */
.sa-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    color: var(--sa-text-dark);
    box-sizing: border-box;
    /* 已完全移除 font-family 設定，100% 繼承您全站原本的字型 */
}

/* =========================================
   🔥 強力視覺重置：標題俐落風 (全幅細線)
   ========================================= */
.sa-heading, .sp-heading { 
    font-size: 1.8rem !important;          /* 標題字統一 1.8rem */
    font-weight: 700 !important; 
    color: #333 !important; 
    margin: 60px 0 30px 0 !important; 
    padding: 0 0 10px 0 !important;        
    border-left: none !important;          /* 徹底拔除左側舊有短粗線 */
    background: none !important;
    border-bottom: 2px solid var(--sa-border) !important; /* 統一使用 #e1e1e1 的優雅底線 */
}

/* 確保隱藏所有可能透過偽元素產生的裝飾線 */
.sa-heading::before, .sa-heading::after,
.sp-heading::before, .sp-heading::after {
    content: none !important;
    display: none !important;
}

/* --- 共用膠囊型按鈕 --- */
.sa-btn-group {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.sa-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 28px;
    font-size: 0.9rem;                     /* 🌟 按鈕內文字級精細微調為 0.9rem */
    font-weight: 600;
    text-decoration: none !important;
    border-radius: 50px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}
.sa-btn i {
    margin-right: 4px; 
}
.sa-btn-wine { background-color: var(--sa-primary); color: #ffffff !important; border-color: var(--sa-primary); }
.sa-btn-wine:hover { background-color: #ffffff; color: var(--sa-primary) !important; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }

.sa-btn-gold { background-color: var(--sa-gold); color: #ffffff !important; border-color: var(--sa-gold); }
.sa-btn-gold:hover { background-color: #ffffff; color: var(--sa-gold) !important; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }

/* 🌟 View All 按鈕專屬外框：全螢幕尺寸下皆完美置中 */
.sa-more-container-center {
    display: flex;
    justify-content: center;
    margin-top: 25px;
    width: 100%;
}


/* =========================================
   頁面 1：Security Advisory 專屬樣式
   ========================================= */
.sa-info-title { font-size: 1.8rem; font-weight: 700; color: #222; margin: 0 0 20px 0; }
.sa-info-text { font-size: 1rem; line-height: 1.6; margin: 0 0 18px 0; } /* 內文字統一 1rem */

/* 表格排版 */
.sa-table-section { margin-bottom: 60px; }
.sa-table-responsive { width: 100%; overflow-x: auto; }
.sa-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.9rem; } 
.sa-table th { background-color: var(--sa-bg-gray); padding: 14px 16px; border-bottom: 2px solid var(--sa-border); white-space: nowrap; }
.sa-table td { padding: 15px 16px; border-bottom: 1px solid var(--sa-border); vertical-align: middle; }

/* 表格內的連結 */
.sa-table-link { color: var(--sa-primary); text-decoration: none; font-weight: 500; transition: color 0.2s ease; }
.sa-table-link:hover { text-decoration: none; color: #a31456; } /* 🌟 已移除底線，改用顏色微亮提示 */

/* 嚴重程度標籤 */
.sa-badge { padding: 4px 10px; font-size: 0.75rem; font-weight: 700; border-radius: 3px; text-transform: uppercase; border: 1px solid; display: inline-block; white-space: nowrap; }
.sa-badge.sa-critical { background-color: #fde8e8; color: #d9534f; border-color: #d9534f; }
.sa-badge.sa-high { background-color: #fcece4; color: #e65c00; border-color: #e65c00; }
.sa-badge.sa-medium { background-color: #fdf6ec; color: #e6a23c; border-color: #e6a23c; }
.sa-badge.sa-low { background-color: #e3f2fd; color: #3498db; border-color: #3498db; }

/* 底部漏洞回報區塊 */
.sa-report-section {
    background-color: #ffffff;
    border: 1px solid var(--sa-border);
    padding: 35px 30px;
    margin: 30px 0 50px 0;
    display: flex;
    align-items: flex-start;
    gap: 25px;
}
.sa-report-icon { 
    font-size: 70px; 
    color: #333; 
    flex-shrink: 0;
    margin-top: 5px;
    line-height: 1;
}
.sa-report-content { flex-grow: 1; }
.sa-report-title { font-size: 1.8rem; font-weight: 700; color: var(--sa-primary); margin: 0 0 15px 0; }
.sa-report-list { margin: 15px 0 15px 25px; padding: 0; font-size: 1rem; color: #444; list-style-type: disc; } 
.sa-report-list li { margin-bottom: 10px; line-height: 1.5; }


/* =========================================
   頁面 2：Security Policy 專屬樣式 & 雙欄圖卡
   ========================================= */
.sp-layout { display: flex; flex-wrap: wrap; gap: 40px; }
.sp-main-content { flex: 1 1 70%; min-width: 300px; }
.sp-section { margin-bottom: 40px; }
.sp-sub-text { font-size: 0.85rem; color: #777; font-style: italic; margin-bottom: 12px; margin-top: -12px; }
.sp-content { line-height: 1.6; font-size: 1rem; color: #444; } 

/* 管道圖卡 */
.sp-method-grid { display: flex; gap: 15px; margin: 20px 0; flex-wrap: wrap; }
.sp-method-card {
    flex: 1 1 calc(50% - 10px);  /* 🌟 調整為兩個卡片平分空間 */
    min-width: 220px;
    background-color: #ffffff;
    border: 1px solid var(--sa-border);
    border-radius: 6px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}
.sp-method-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); border-color: var(--sa-primary); }
.sp-method-card i { font-size: 24px; color: var(--sa-primary); width: 30px; text-align: center; flex-shrink: 0; }
.sp-method-info { display: flex; flex-direction: column; gap: 2px; }
.sp-method-info span { font-size: 0.75rem; text-transform: uppercase; color: #777; font-weight: 600; letter-spacing: 0.5px; }

/* 圖卡內的連結 */
.sp-method-info a { font-size: 1rem; color: var(--sa-primary); text-decoration: none; font-weight: 600; transition: opacity 0.2s ease; }
.sp-method-info a:hover { text-decoration: none; opacity: 0.8; } /* 🌟 已移除底線，改用輕微透明度提示 */

/* 免責保障聲明提示框 (Safe Harbor) */
.sp-safe-harbor-box {
    background-color: #F4f4f4; 
    padding: 15px 20px;
    border-radius: 0 6px 6px 0;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-top: 20px;
}
.sp-safe-harbor-box i { font-size: 20px; color: var(--sa-gold); flex-shrink: 0; margin-top: 2px; }
.sp-safe-harbor-box p { margin: 0; font-size: 1rem; line-height: 1.5; color: #555555; } 


/* =========================================
   🕒 CRA Compliance Timeline 時間軸樣式
   ========================================= */
.sp-timeline {
    position: relative;
    margin: 30px 0 10px 10px;
    padding-left: 30px;
    border-left: 2px dashed rgba(118, 6, 60, 0.25); 
}
.sp-timeline-item { position: relative; margin-bottom: 30px; }
.sp-timeline-item:last-child { margin-bottom: 0; }
.sp-timeline-icon {
    position: absolute; left: -46px; top: 0;
    width: 30px; height: 30px; background-color: #ffffff;
    border: 2px solid var(--sa-border); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; transition: all 0.3s ease; z-index: 2;
}
.sp-timeline-icon.step-1 { border-color: #d9534f; color: #d9534f; }
.sp-timeline-icon.step-2 { border-color: #e65c00; color: #e65c00; }
.sp-timeline-icon.step-3 { border-color: var(--sa-gold); color: var(--sa-gold); }
.sp-timeline-item:hover .sp-timeline-icon { transform: scale(1.15); box-shadow: 0 0 10px rgba(0,0,0,0.1); }

.sp-timeline-content { background: #ffffff; border: 1px solid var(--sa-border); border-radius: 6px; padding: 18px 20px; transition: all 0.2s ease; }
.sp-timeline-content:hover { border-color: rgba(118, 6, 60, 0.2); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); }
.sp-timeline-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.sp-timeline-header h4 { margin: 0; font-size: 1.15rem; font-weight: 700; color: #222222; }
.sp-step-tag { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; background-color: var(--sa-bg-gray); color: #666; padding: 2px 8px; border-radius: 4px; }
.sp-time-badge { font-size: 0.8rem; font-weight: 700; padding: 3px 12px; border-radius: 50px; margin-left: auto; }
.sp-time-badge.alert-fast { background-color: #fde8e8; color: #d9534f; }
.sp-time-badge.alert-medium { background-color: #fcece4; color: #e65c00; }
.sp-time-badge.alert-final { background-color: #fdf6ec; color: #e6a23c; }
.sp-timeline-content p { margin: 0; font-size: 1rem; line-height: 1.5; color: #555555; } 


/* =========================================
   右側欄位樣式
   ========================================= */
.sp-sidebar { flex: 1 1 25%; min-width: 280px; }
.sp-box { background: #f4f4f4; border: 1px solid var(--sa-border); padding: 25px; margin-bottom: 25px; border-radius:10px}
.sp-box-title { font-weight: 700; margin-bottom: 15px; color: var(--sa-primary); font-size: 1.3rem; }

/* 側邊欄一般連結清單 */
.sp-link { display: block; padding: 15px 0; border-bottom: 1px solid var(--sa-border); color: var(--sa-primary); text-decoration: none; font-weight: 500; font-size: 1rem; transition: all 0.2s ease; } 
.sp-link:hover { text-decoration: none; color: #a31456; padding-left: 5px; } /* 🌟 已移除底線，改用顏色微亮 + 向右微調 5px */
.sp-link i {
    margin-right: 10px; 
    width: 20px;        
    text-align: center;
    color: var(--sa-primary);
}

.sp-dark-box { background: var(--sa-sidebar-bg); color: #fff; padding: 25px; border-radius:10px}
.sp-dark-box-title { font-weight: 700; margin-bottom: 15px; color: var(--sa-gold); font-size: 1rem; }
.sp-list { list-style: none; padding: 0; font-size: 0.9rem; line-height: 1.8; margin: 0; } 
.sp-list li { margin-bottom: 5px; }


/* =========================================
   RWD 行動裝置排版優化
   ========================================= */
@media (max-width: 768px) {
    .sa-report-section { flex-direction: column; align-items: center; text-align: center; }
    .sa-report-list { text-align: left; }
    .sa-btn-group { justify-content: center; }
    .sp-layout { flex-direction: column; }
}
@media (max-width: 576px) {
    .sp-time-badge { margin-left: 0; width: 100%; text-align: center; }
}
/* ==========================================================================
   CaseStudiesView Module Styles
   ========================================================================== */

/* 隱藏區塊 (針對特定舊架構) */
#ContentPlaceHolder1_ctl00_article_content,
#ContentPlaceHolder1_ctl00_article_content .atfooter,
#ContentPlaceHolder1_ctl00_article_content header {
    display: none;
}

/* 內容版面調整 */
#ContentPlaceHolder1_ctl00_article_content > table {
    margin: 0 auto;
}

.article_content table {
    width: 100%;
}

/* 相關案例區塊間距優化 */
.related_articles_section {
    margin-top: 50px;
    padding-bottom: 40px;
}
/* ============================================================
   Industrial Focus Article Page (精簡優化版)
   ============================================================ */

/* --- 1. 基礎佈局與全域排版 --- */
.ifocus_page, .ifocus_page * { box-sizing: border-box; }
.ifocus_page { color: #333; }
.ifocus_container { width: 100%; max-width: 1100px; margin: 0 auto; }

/* 標題與內文 */
.ifocus_page h1 { max-width: 980px; font-size: 3rem; line-height: 1.2; font-weight: 800; color: #333; margin-bottom: 28px; }
.ifocus_page h2 { font-size: 2.3rem; line-height: 1.3; font-weight: 700; color: #333; margin-bottom: 22px; }
.ifocus_page h3 { font-size: 1.75rem; line-height: 1.35; font-weight: 500; color: #6b6f73; margin-bottom: 18px; }
.ifocus_page p { max-width: 960px; font-size: 1rem; line-height: 1.85; color: #333; margin-bottom: 22px; text-align: left; }
.ifocus_label { display: inline-block; color: #76063C; font-size: 1rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; }

/* 區塊間距 */
.ifocus_article_hero { padding: 8vh 0 7vh; border-bottom: 1px solid #F6EFE5; }
.ifocus_article_hero p { color: #444; }
.ifocus_article_section { padding: 3vh 0; }
.ifocus_article_block { margin-top: 45px; }
.ifocus_article_block:first-of-type { margin-top: 25px; }

/* 文章圖片 */
.ifocus_article_img { margin: 38px auto 10px; border-radius: 18px; overflow: hidden; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08); }
.ifocus_article_img_top { margin-top: 0; margin-bottom: 55px; }
.ifocus_article_img img { width: 100%; height: auto; display: block; }


/* --- 2. FAQ 折疊區塊 --- */
.ifocus_intro { max-width: 820px; margin: 0 auto 45px; text-align: center; }
.ifocus_intro h2, .ifocus_intro p { margin-left: auto; margin-right: auto; text-align: center; }
.ifocus_faq { max-width: 900px; margin: 0 auto; }
.ifocus_faq details { border: 1px solid #F6EFE5; border-radius: 18px; margin-bottom: 14px; overflow: hidden; transition: all 0.3s ease; }
.ifocus_faq details:hover { border-color: #76063C; }
.ifocus_faq details[open] { box-shadow: 0 15px 34px rgba(0, 0, 0, 0.07); }

.ifocus_faq summary { position: relative; cursor: pointer; padding: 20px 56px 20px 24px; font-size: 1.05rem; line-height: 1.5; font-weight: 700; color: #333; list-style: none; }
.ifocus_faq summary::-webkit-details-marker { display: none; }
.ifocus_faq summary:after { content: "+"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); color: #76063C; font-size: 1.6rem; font-weight: 500; }
.ifocus_faq details[open] summary:after { content: "–"; }

.ifocus_faq details p { max-width: none; padding: 0 24px 22px; margin: 0; font-size: 0.98rem; line-height: 1.75; color: #333; text-align: left; }
.ifocus_faq details ul { margin: 0 24px 24px 48px; list-style: disc; }
.ifocus_faq details li { font-size: 0.98rem; line-height: 1.75; color: #333; margin-bottom: 8px; }


/* --- 3. 產品列表區塊 --- */
.ifocus_product_section { margin-top: 35px; }
.ifocus_product_group { margin-top: 45px; }
.ifocus_product_group:first-child { margin-top: 0; }
.ifocus_product_group h3 { margin-bottom: 20px; color: #76063C; }
.ifocus_product_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

/* 產品卡片主體 */
.ifocus_product_item { display: block; border: 1px solid #eee7e2; border-radius: 18px; padding: 24px; transition: all 0.3s ease; color: inherit; text-decoration: none !important; }
.ifocus_product_item:hover { border-color: #76063C; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.06); transform: translateY(-4px); }

/* 標籤與文字 */
.ifocus_product_meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ifocus_product_meta span { display: inline-block; border: 1px solid #F6EFE5; border-radius: 50px; padding: 4px 10px; color: #76063C; font-size: 0.78rem; line-height: 1.4; font-weight: 700; }
.ifocus_product_item h4, .ifocus_product_item h4 a { font-size: 1.2rem; line-height: 1.35; font-weight: 800; color: #333 !important; text-decoration: none !important; margin-bottom: 10px; transition: color 0.3s ease; }
.ifocus_product_item:hover h4, .ifocus_product_item:hover h4 a { color: #76063C !important; }
.ifocus_product_item p { max-width: none; font-size: 0.95rem; line-height: 1.7; margin-bottom: 0; text-align: left; }


/* --- 4. 優勢特點卡片區塊 --- */
.ifocus_advantage_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 35px; }
.ifocus_advantage_card { position: relative; border: 1px solid #F6EFE5; border-radius: 18px; padding: 28px; transition: all 0.3s ease; }
.ifocus_advantage_card:hover { border-color: #76063C; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.06); transform: translateY(-4px); }
.ifocus_advantage_no { color: #76063C; font-size: 0.9rem; line-height: 1; font-weight: 800; letter-spacing: 0.08em; margin-bottom: 18px; }
.ifocus_advantage_card h3 { font-size: 1.35rem; line-height: 1.35; font-weight: 800; color: #1f1f1f; margin-bottom: 12px; }
.ifocus_advantage_card p { max-width: none; font-size: 0.98rem; line-height: 1.7; margin-bottom: 0; text-align: left; }


/* --- 5. 底部 CTA 區塊 --- */
.ifocus_bottom_cta { padding: 8vh 0; text-align: center; border-top: 1px solid #F6EFE5; }
.ifocus_bottom_cta h2 { max-width: 800px; margin-left: auto; margin-right: auto; margin-bottom: 18px; }
.ifocus_bottom_cta p { max-width: 780px; margin-left: auto; margin-right: auto; margin-bottom: 28px; text-align: center; }
.ifocus_cta_btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }


/* ============================================================
   5. 響應式 RWD 集中優化區
   ============================================================ */

/* 平板尺寸 (1024px) */
@media screen and (max-width: 1024px) {
  .ifocus_advantage_grid { grid-template-columns: repeat(2, 1fr); }
}

/* 手機尺寸 (768px) - 💡 精簡核心：所有手機版覆蓋全部集中在此 */
@media screen and (max-width: 768px) {
  .ifocus_container { width: 88%; }
  .ifocus_article_hero, .ifocus_article_section, .ifocus_bottom_cta { padding: 55px 0; }

  /* 字體縮放 */
  .ifocus_page h1 { font-size: 2.05rem; line-height: 1.28; }
  .ifocus_page h2 { font-size: 1.75rem; line-height: 1.32; }
  .ifocus_page h3 { font-size: 1.35rem; }
  .ifocus_page p { font-size: 0.95rem; line-height: 1.75; }

  /* 圖片調整 */
  .ifocus_article_img { margin-top: 28px; border-radius: 14px; }
  .ifocus_article_img_top { margin-bottom: 38px; }

  /* FAQ 調整 */
  .ifocus_faq summary { font-size: 1rem; padding: 18px 50px 18px 20px; }
  .ifocus_faq details p { padding: 0 20px 20px; font-size: 0.95rem; }

  /* 網格改為單欄 (卡片滿版) */
  .ifocus_product_grid, .ifocus_advantage_grid { grid-template-columns: 1fr; }
  .ifocus_product_item { padding: 20px; }
  .ifocus_advantage_card { padding: 24px; }

  /* 按鈕改為垂直滿版 */
  .ifocus_cta_btns { flex-direction: column; align-items: stretch; }
  .ifocus_cta_btns .list_btn { width: 100%; text-align: center; }
}

/* ==========================================
   Advanced Manufacturing - Swiper 輪播與標籤樣式
   ========================================== */

/* 1. 輪播外層容器：設定高度與兩端霧化遮罩效果 */
.mySwiper {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    height: 500px !important;
    margin: auto !important;
    margin-bottom: 100px !important;
    padding-bottom: 40px !important; /* 留空間給下方分頁圓點，避免被霧化遮罩擋住 */
    
    /* 網頁兩端淡出（霧化）效果 */
    -webkit-mask-image: linear-gradient(
        to right, 
        rgba(0,0,0,0) 0%, 
        rgba(0,0,0,1) 15%, 
        rgba(0,0,0,1) 85%, 
        rgba(0,0,0,0) 100%
    ) !important;
    mask-image: linear-gradient(
        to right, 
        rgba(0,0,0,0) 0%, 
        rgba(0,0,0,1) 15%, 
        rgba(0,0,0,1) 85%, 
        rgba(0,0,0,0) 100%
    ) !important;
}

/* 2. 投影片容器：設定為相對定位，並置中圖片 */
.mySwiper .swiper-slide,
.swiper-slide {
    position: relative !important; /* 關鍵：讓內層的 .slide-tag 可以絕對定位在圖片左下角 */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 3. 圖片尺寸優化 (電腦版) */
.mySwiper .swiper-slide img {
    height: 400px !important;
    width: auto !important;
    object-fit: contain !important; /* 保持比例不變形 */
}

/* 4. 圖片左下角英文字型標籤 (高權重防錯版) */
.slide-tag {
    position: absolute !important;
    bottom: 20px !important;                /* 距離圖片容器底部 20px */
    left: 20px !important;                  /* 距離圖片容器左邊 20px */
    background: rgba(0, 0, 0, 0.75) !important;  /* 半透明黑底 */
    color: #ffffff !important;              /* 文字白色 */
    padding: 6px 15px !important;           /* 內距上下 6px，左右 15px */
    font-size: 14px !important;             /* 字體大小 */
    border-radius: 4px !important;          /* 圓角 */
    font-family: 'Montserrat', sans-serif !important;
    pointer-events: none !important;        /* 讓滑鼠點擊可以穿過標籤，不影響輪播拖曳與切換 */
    z-index: 99 !important;                 /* 確保層級最高，絕對不會被圖片或外層蓋住 */
    display: inline-block !important;       /* 確保作為獨立區塊正常顯示 */
    letter-spacing: 0.5px !important;       /* 字距微調 */
}

/* 5. 分頁圓點位置微調 */
.mySwiper .swiper-pagination {
    text-align: center !important;
    margin-top: 10px !important;
}

/* ==========================================
   🚀 響應式 RWD 手機版微調 (螢幕寬度 768px 以下)
   ========================================== */
@media (max-width: 768px) {
    /* 手機版霧化遮罩縮小範圍，避免擋到太多畫面 */
    .mySwiper {
        height: auto !important; /* 高度隨圖片自動彈性縮放 */
        margin-bottom: 50px !important;
        -webkit-mask-image: linear-gradient(
            to right, 
            rgba(0,0,0,0) 0%, 
            rgba(0,0,0,1) 8%, 
            rgba(0,0,0,1) 92%, 
            rgba(0,0,0,0) 100%
        ) !important;
        mask-image: linear-gradient(
            to right, 
            rgba(0,0,0,0) 0%, 
            rgba(0,0,0,1) 8%, 
            rgba(0,0,0,1) 92%, 
            rgba(0,0,0,0) 100%
        ) !important;
    }

    /* 防止手機版圖片高度硬撐爆開，改為隨螢幕等比例縮放 */
    .mySwiper .swiper-slide img {
        height: auto !important;
        max-height: 260px !important;
        width: 100% !important;
        object-fit: contain !important;
    }

    /* 手機版標籤等比例縮小與位置微調，避免突兀 */
    .slide-tag {
        font-size: 12px !important;
        bottom: 15px !important;
        left: 15px !important;
        padding: 4px 10px !important;
    }
}
/* =====================================================
   Company Milestones 專用 Swiper
   避免被 .mySwiper 全站樣式影響
   ===================================================== */
.milestoneSwiper {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
}

.milestoneSwiper .swiper-wrapper,
.milestoneSwiper .swiper-slide {
  height: auto !important;
  min-height: 0 !important;
}

.milestoneSwiper .swiper-slide {
  display: none !important;
  align-items: stretch !important;
  justify-content: initial !important;
}

.milestoneSwiper .swiper-slide.y6 {
  display: flex !important;
}