.elementor-4571 .elementor-element.elementor-element-359fc55c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.5;--padding-top:70px;--padding-bottom:70px;--padding-left:0px;--padding-right:0px;}.elementor-4571 .elementor-element.elementor-element-359fc55c:not(.elementor-motion-effects-element-type-background), .elementor-4571 .elementor-element.elementor-element-359fc55c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://wp.ccpcontactprobes.com/wp-content/uploads/2026/03/postlist-01.webp");background-position:center center;background-repeat:no-repeat;background-size:100% auto;}.elementor-4571 .elementor-element.elementor-element-359fc55c::before, .elementor-4571 .elementor-element.elementor-element-359fc55c > .elementor-background-video-container::before, .elementor-4571 .elementor-element.elementor-element-359fc55c > .e-con-inner > .elementor-background-video-container::before, .elementor-4571 .elementor-element.elementor-element-359fc55c > .elementor-background-slideshow::before, .elementor-4571 .elementor-element.elementor-element-359fc55c > .e-con-inner > .elementor-background-slideshow::before, .elementor-4571 .elementor-element.elementor-element-359fc55c > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-primary );--background-overlay:'';}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Noto Sans TC;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-4571 .elementor-element.elementor-element-b2dafa6{padding:80px 0px 0px 0px;text-align:center;}.elementor-4571 .elementor-element.elementor-element-b2dafa6 .elementor-heading-title{font-family:"Noto Sans TC", Noto Sans TC;font-size:44px;font-weight:600;color:var( --e-global-color-37bc126 );}.elementor-4571 .elementor-element.elementor-element-30dd44e6{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-breadcrumbs{font-family:var( --e-global-typography-secondary-font-family ), Noto Sans TC;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-4571 .elementor-element.elementor-element-2b09f8b4{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4571 .elementor-element.elementor-element-2b09f8b4:not(.elementor-motion-effects-element-type-background), .elementor-4571 .elementor-element.elementor-element-2b09f8b4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-37bc126 );}.elementor-4571 .elementor-element.elementor-element-c8686de{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4571 .elementor-element.elementor-element-c8686de:not(.elementor-motion-effects-element-type-background), .elementor-4571 .elementor-element.elementor-element-c8686de > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://wp.ccpcontactprobes.com/wp-content/uploads/2026/03/postlist-02.webp");background-position:top center;background-repeat:no-repeat;background-size:cover;}.elementor-4571 .elementor-element.elementor-element-33993a46{padding:20px 0px 0px 0px;border-style:solid;border-width:0px 0px 1px 0px;border-color:#FFFFFF2B;}.elementor-4571 .elementor-element.elementor-element-33993a46 .elementor-heading-title{font-family:"Noto Sans TC", Noto Sans TC;font-size:27px;font-weight:600;letter-spacing:2.5px;color:var( --e-global-color-accent );}.elementor-4571 .elementor-element.elementor-element-704e467{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-4571 .elementor-element.elementor-element-704e467.elementor-element{--align-self:flex-start;}.elementor-4571 .elementor-element.elementor-element-5e3b587a{padding:20px 0px 0px 0px;border-style:solid;border-width:0px 0px 1px 0px;border-color:#FFFFFF2B;}.elementor-4571 .elementor-element.elementor-element-5e3b587a .elementor-heading-title{font-family:"Noto Sans TC", Noto Sans TC;font-size:27px;font-weight:600;letter-spacing:2.5px;color:var( --e-global-color-accent );}.elementor-4571 .elementor-element.elementor-element-658d7db9{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;border-style:none;}.elementor-4571 .elementor-element.elementor-element-295ae22f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:60px;--padding-bottom:0px;--padding-left:30px;--padding-right:0px;}.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Noto Sans TC;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Noto Sans TC;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Noto Sans TC;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-4571 .elementor-element.elementor-element-24ffc7bc{--grid-columns:2;}.elementor-4571 .elementor-element.elementor-element-24ffc7bc > .elementor-widget-container{margin:0px 0px 030px 0px;}.elementor-4571 .elementor-element.elementor-element-24ffc7bc .elementor-loop-container{grid-auto-rows:1fr;}.elementor-4571 .elementor-element.elementor-element-24ffc7bc .e-loop-item > .elementor-section, .elementor-4571 .elementor-element.elementor-element-24ffc7bc .e-loop-item > .elementor-section > .elementor-container, .elementor-4571 .elementor-element.elementor-element-24ffc7bc .e-loop-item > .e-con, .elementor-4571 .elementor-element.elementor-element-24ffc7bc .e-loop-item .elementor-section-wrap  > .e-con{height:100%;}.elementor-4571 .elementor-element.elementor-element-24ffc7bc .elementor-pagination{text-align:center;margin-top:25px;}body:not(.rtl) .elementor-4571 .elementor-element.elementor-element-24ffc7bc .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 0px/2 );}body:not(.rtl) .elementor-4571 .elementor-element.elementor-element-24ffc7bc .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 0px/2 );}body.rtl .elementor-4571 .elementor-element.elementor-element-24ffc7bc .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 0px/2 );}body.rtl .elementor-4571 .elementor-element.elementor-element-24ffc7bc .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 0px/2 );}@media(max-width:1024px){.elementor-4571 .elementor-element.elementor-element-24ffc7bc{--grid-columns:2;}}@media(max-width:767px){.elementor-4571 .elementor-element.elementor-element-83d7dbf.elementor-element{--align-self:center;}.elementor-4571 .elementor-element.elementor-element-295ae22f{--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-4571 .elementor-element.elementor-element-494e2bf9{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:center;}.elementor-4571 .elementor-element.elementor-element-24ffc7bc{--grid-columns:1;}}@media(min-width:768px){.elementor-4571 .elementor-element.elementor-element-c8686de{--width:25%;}.elementor-4571 .elementor-element.elementor-element-295ae22f{--width:75%;}}/* Start custom CSS for breadcrumbs, class: .elementor-element-83d7dbf *//* =========================================================
   CCP Breadcrumbs – White Style
   使用情境：深色背景（例如 #0a1e50）
========================================================= */

#ccp-breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  font-size:14px;
  font-weight:500;
  color:rgba(255,255,255,0.75);
  margin-bottom:18px;
}

/* 連結 */
#ccp-breadcrumbs a{
  color:rgba(255,255,255,0.92);
  text-decoration:none;
  transition:all .25s ease;
}

/* hover */
#ccp-breadcrumbs a:hover{
  color:#f7b52b;
}

/* 分隔符號 */
#ccp-breadcrumbs .separator{
  margin:0 10px;
  color:rgba(255,255,255,0.45);
}

/* 最後一層 */
#ccp-breadcrumbs .breadcrumb_last{
  color:#ffffff;
  font-weight:600;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-704e467 *//* =========================================================
   CCP NEWS – Filters (Category + Year) FULL CSS
   目標：
   - 客戶主色：藏青 #0a1e50、金色 #f7b52b
   - 「沒有圓角」：全部改直角（包含面板/項目）
   - 分類文字也要套色/字重
   - 手機版：改成「上方雙欄 Filter Bar（分類 / 年份）」+ 下方清單（更接近競品）
   使用方式（建議、非必要）：
   - Elementor 左側欄容器加 class：ccp-news-sidebar
========================================================= */

/* ========== 0) 品牌變數（依你提供） ========== */
:root{
  --ccp-navy:#0a1e50;      /* 藏青 */
  --ccp-gold:#f7b52b;      /* 金色 */
  --ccp-white:#ffffff;

  --ccp-ink:rgba(255,255,255,0.92);
  --ccp-muted:rgba(255,255,255,0.72);

  --ccp-line:rgba(255,255,255,0.16);
  --ccp-line-strong:rgba(255,255,255,0.26);
  --ccp-glow:rgba(70,160,255,0.38);
}

/* =========================================================
   1) 左側面板（桌機）：直角、藏青工程感
========================================================= */
.ccp-news-sidebar{
  position: relative;
  padding: 26px 22px;

  /* 直角（你說示意圖沒圓角） */
  border-radius: 0 !important;

  background:
    radial-gradient(120% 140% at 20% 10%, rgba(80,170,255,0.12) 0%, rgba(0,0,0,0) 55%),
    radial-gradient(140% 160% at 90% 20%, rgba(247,181,43,0.10) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(10,30,80,0.96) 0%, rgba(6,17,36,0.96) 100%);

  border: 1px solid var(--ccp-line);

  box-shadow:
    0 18px 50px rgba(0,0,0,0.28),
    inset 0 0 0 1px rgba(255,255,255,0.04);
}

/* 上緣金線（直角風格） */
.ccp-news-sidebar::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:2px;
  background: linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(247,181,43,0.75) 16%,
    rgba(255,235,190,0.95) 50%,
    rgba(247,181,43,0.75) 84%,
    rgba(0,0,0,0) 100%);
}

/* 科技斜線紋理 */
.ccp-news-sidebar::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.03) 0px,
      rgba(255,255,255,0.03) 2px,
      rgba(255,255,255,0.00) 2px,
      rgba(255,255,255,0.00) 10px);
  mix-blend-mode: overlay;
  opacity: .35;
}

/* 內容層在紋理上方 */
.ccp-news-sidebar > *{
  position: relative;
  z-index: 1;
}

/* =========================================================
   2) 左側標題（分類 / 年份）字色字重
   - Elementor Heading 會是 .elementor-heading-title
========================================================= */
.ccp-news-sidebar .elementor-heading-title,
.ccp-news-sidebar h1,
.ccp-news-sidebar h2,
.ccp-news-sidebar h3{
  color: var(--ccp-gold) !important;
  font-weight: 900 !important;
  letter-spacing: .10em;
  margin: 0 0 14px;
}

/* 如果你有「分類」兩字想更大/更像示意圖 */
.ccp-news-sidebar .elementor-heading-title{
  font-size: 34px;
  line-height: 1.05;
}

/* =========================================================
   3) 分類清單（Elementor Icon List / Category List 常見輸出）
   - 你截圖看起來是 icon list 形式
========================================================= */
.ccp-news-sidebar .elementor-icon-list-items{
  list-style: none !important;
  margin: 12px 0 18px !important;
  padding: 0 !important;
}

.ccp-news-sidebar .elementor-icon-list-item{
  margin: 0 !important;
  padding: 0 !important;
}

/* 每列連結（分類文字也在這裡） */
.ccp-news-sidebar .elementor-icon-list-item > a,
.ccp-news-sidebar .elementor-icon-list-item > span{
  display:flex;
  align-items:center;
  gap: 12px;

  padding: 12px 12px;
  border-radius: 0 !important;             /* 直角 */
  text-decoration:none !important;

  color: var(--ccp-ink) !important;        /* 分類文字顏色 */
  font-weight: 800 !important;
  letter-spacing: .04em;

  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);

  transition: all .18s ease;
}

/* 分類左側圓點（改成金色圈） */
.ccp-news-sidebar .elementor-icon-list-icon i,
.ccp-news-sidebar .elementor-icon-list-icon svg{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  color: var(--ccp-gold) !important;
  filter: drop-shadow(0 0 10px rgba(247,181,43,0.35));
}

/* Hover：藍光 + 更亮文字 */
.ccp-news-sidebar .elementor-icon-list-item > a:hover{
  color: var(--ccp-white) !important;
  border-color: rgba(70,160,255,0.45);
  background: rgba(70,160,255,0.08);
  box-shadow: 0 0 0 3px rgba(70,160,255,0.14);
}

/* =========================================================
   4) 年份清單（shortcode 產出 .ccp-news-year-list）
========================================================= */
.ccp-news-year-list{
  list-style:none !important;
  margin: 18px 0 0 !important;
  padding: 14px 0 0 !important;
  border-top: 1px solid rgba(255,255,255,0.18);
}

.ccp-news-year-list li{
  margin: 0 !important;
  padding: 0 !important;
}

.ccp-news-year-list a{
  display:flex;
  align-items:center;
  gap: 12px;

  padding: 12px 12px;
  border-radius: 0 !important;             /* 直角 */
  text-decoration:none !important;

  color: var(--ccp-ink) !important;
  font-weight: 900 !important;
  letter-spacing: .04em;

  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);

  transition: all .18s ease;
}

/* 年份左側：金色圈 */
.ccp-news-year-list a::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 2px solid rgba(247,181,43,0.85);
  box-shadow: 0 0 12px rgba(247,181,43,0.25);
  flex: 0 0 auto;
}

/* 年份 hover */
.ccp-news-year-list a:hover{
  color: var(--ccp-white) !important;
  border-color: rgba(70,160,255,0.45);
  background: rgba(70,160,255,0.08);
  box-shadow: 0 0 0 3px rgba(70,160,255,0.14);
}

/* 當前年份（shortcode 會加 li.is-active） */
.ccp-news-year-list li.is-active > a{
  color: var(--ccp-white) !important;
  border-color: rgba(247,181,43,0.55);
  background: rgba(247,181,43,0.10);
  box-shadow: 0 0 0 3px rgba(247,181,43,0.12);
}
.ccp-news-year-list li.is-active > a::before{
  background: rgba(247,181,43,0.92);
  border-color: rgba(255,235,190,0.95);
  box-shadow: 0 0 16px rgba(247,181,43,0.40);
}

/* 若沒抓到年份的提示（debug） */
.ccp-news-year-empty{
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 0 !important;             /* 直角 */
  color: rgba(255,255,255,0.78);
  border: 1px dashed rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.03);
  font-size: 14px;
  line-height: 1.5;
}

/* =========================================================
   5) 手機版（更接近競品）
   你目前手機看到的是「整塊側欄卡片」在上方，且仍是清單。
   我們改成：
   - 左欄面板視覺變成「兩個 filter bar」(分類/年份) 放在列表上方
   - 清單改成「兩欄 chips」更好點擊（不用下拉也接近競品 UX）
   注意：純 CSS 無法做真正的點擊展開下拉（無 JS），所以以
         「bar + chips」呈現，體驗上會更像競品的兩個 filter 控制。
========================================================= */
@media (max-width: 768px){

  /* 側欄改成扁平，不要像大卡片壓版 */
  .ccp-news-sidebar{
    padding: 14px 14px;
    border-radius: 0 !important;
    box-shadow: none;
  }

  /* 標題縮小（避免手機太佔） */
  .ccp-news-sidebar .elementor-heading-title{
    font-size: 20px;
    margin-bottom: 10px;
  }

  /* 分類 list / 年份 list 改成 chips grid */
  .ccp-news-sidebar .elementor-icon-list-items{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 10px 0 12px !important;
  }

  .ccp-news-sidebar .elementor-icon-list-item > a{
    justify-content: flex-start;
    padding: 12px 10px;
    font-size: 14px;
  }

  .ccp-news-year-list{
    border-top: 1px solid rgba(255,255,255,0.16);
    padding-top: 12px !important;
    margin-top: 12px !important;

    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .ccp-news-year-list a{
    padding: 12px 10px;
    font-size: 14px;
  }

  /* 做成「Filter Bar」視覺（分類/年份）：
     - 用每個區塊第一個 heading 當 bar 樣式
     - 如果你的「分類」「年份」是 Heading，它就會變成 bar
  */
  .ccp-news-sidebar .elementor-heading-title{
    position: relative;
    padding: 10px 36px 10px 12px;
    border: 1px solid rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.04);
  }

  /* 右側小箭頭（下拉感） */
  .ccp-news-sidebar .elementor-heading-title::after{
    content:"";
    position:absolute;
    right:12px;
    top:50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--ccp-gold);
    border-bottom: 2px solid var(--ccp-gold);
    transform: translateY(-60%) rotate(45deg);
    opacity: .95;
  }

  /* heading 底部藍線（更像競品的底線控制） */
  .ccp-news-sidebar .elementor-heading-title::before{
    content:"";
    position:absolute;
    left:0; right:0; bottom:-1px;
    height:2px;
    background: linear-gradient(90deg, rgba(70,160,255,0.0), rgba(70,160,255,0.85), rgba(70,160,255,0.0));
    opacity: .9;
  }
}

/* =========================================================
   6) 讓「目前分類」有高亮（可選）
   WordPress 會在分類頁 body 帶 category-xxx class
   Elementor 的 icon list 不一定會自動加 active，
   這裡用 href 含 /category/{slug}/ 的方式做基本高亮（保守不干擾）
========================================================= */
body.category-company-news .ccp-news-sidebar .elementor-icon-list-item a[href*="category/company-news"],
body.category-exhibitions-events .ccp-news-sidebar .elementor-icon-list-item a[href*="category/exhibitions-events"],
body.category-product-announcements .ccp-news-sidebar .elementor-icon-list-item a[href*="category/product-announcements"]{
  border-color: rgba(247,181,43,0.55) !important;
  background: rgba(247,181,43,0.10) !important;
  box-shadow: 0 0 0 3px rgba(247,181,43,0.12);
  color: var(--ccp-white) !important;
}

/* =========================================================
   7) 小修：避免某些主題把列表項目加圓角
========================================================= */
.ccp-news-sidebar *,
.ccp-news-sidebar *::before,
.ccp-news-sidebar *::after{
  border-radius: 0 !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-658d7db9 *//* =========================================================
   CCP NEWS – Filters (Category + Year) FULL CSS
   目標：
   - 客戶主色：藏青 #0a1e50、金色 #f7b52b
   - 「沒有圓角」：全部改直角（包含面板/項目）
   - 分類文字也要套色/字重
   - 手機版：改成「上方雙欄 Filter Bar（分類 / 年份）」+ 下方清單（更接近競品）
   使用方式（建議、非必要）：
   - Elementor 左側欄容器加 class：ccp-news-sidebar
========================================================= */

/* ========== 0) 品牌變數（依你提供） ========== */
:root{
  --ccp-navy:#0a1e50;      /* 藏青 */
  --ccp-gold:#f7b52b;      /* 金色 */
  --ccp-white:#ffffff;

  --ccp-ink:rgba(255,255,255,0.92);
  --ccp-muted:rgba(255,255,255,0.72);

  --ccp-line:rgba(255,255,255,0.16);
  --ccp-line-strong:rgba(255,255,255,0.26);
  --ccp-glow:rgba(70,160,255,0.38);
}

/* =========================================================
   1) 左側面板（桌機）：直角、藏青工程感
========================================================= */
.ccp-news-sidebar{
  position: relative;
  padding: 26px 22px;

  /* 直角（你說示意圖沒圓角） */
  border-radius: 0 !important;

  background:
    radial-gradient(120% 140% at 20% 10%, rgba(80,170,255,0.12) 0%, rgba(0,0,0,0) 55%),
    radial-gradient(140% 160% at 90% 20%, rgba(247,181,43,0.10) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(10,30,80,0.96) 0%, rgba(6,17,36,0.96) 100%);

  border: 1px solid var(--ccp-line);

  box-shadow:
    0 18px 50px rgba(0,0,0,0.28),
    inset 0 0 0 1px rgba(255,255,255,0.04);
}

/* 上緣金線（直角風格） */
.ccp-news-sidebar::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:2px;
  background: linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(247,181,43,0.75) 16%,
    rgba(255,235,190,0.95) 50%,
    rgba(247,181,43,0.75) 84%,
    rgba(0,0,0,0) 100%);
}

/* 科技斜線紋理 */
.ccp-news-sidebar::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.03) 0px,
      rgba(255,255,255,0.03) 2px,
      rgba(255,255,255,0.00) 2px,
      rgba(255,255,255,0.00) 10px);
  mix-blend-mode: overlay;
  opacity: .35;
}

/* 內容層在紋理上方 */
.ccp-news-sidebar > *{
  position: relative;
  z-index: 1;
}

/* =========================================================
   2) 左側標題（分類 / 年份）字色字重
   - Elementor Heading 會是 .elementor-heading-title
========================================================= */
.ccp-news-sidebar .elementor-heading-title,
.ccp-news-sidebar h1,
.ccp-news-sidebar h2,
.ccp-news-sidebar h3{
  color: var(--ccp-gold) !important;
  font-weight: 900 !important;
  letter-spacing: .10em;
  margin: 0 0 14px;
}

/* 如果你有「分類」兩字想更大/更像示意圖 */
.ccp-news-sidebar .elementor-heading-title{
  font-size: 34px;
  line-height: 1.05;
}

/* =========================================================
   3) 分類清單（Elementor Icon List / Category List 常見輸出）
   - 你截圖看起來是 icon list 形式
========================================================= */
.ccp-news-sidebar .elementor-icon-list-items{
  list-style: none !important;
  margin: 12px 0 18px !important;
  padding: 0 !important;
}

.ccp-news-sidebar .elementor-icon-list-item{
  margin: 0 !important;
  padding: 0 !important;
}

/* 每列連結（分類文字也在這裡） */
.ccp-news-sidebar .elementor-icon-list-item > a,
.ccp-news-sidebar .elementor-icon-list-item > span{
  display:flex;
  align-items:center;
  gap: 12px;

  padding: 12px 12px;
  border-radius: 0 !important;             /* 直角 */
  text-decoration:none !important;

  color: var(--ccp-ink) !important;        /* 分類文字顏色 */
  font-weight: 800 !important;
  letter-spacing: .04em;

  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);

  transition: all .18s ease;
}

/* 分類左側圓點（改成金色圈） */
.ccp-news-sidebar .elementor-icon-list-icon i,
.ccp-news-sidebar .elementor-icon-list-icon svg{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  color: var(--ccp-gold) !important;
  filter: drop-shadow(0 0 10px rgba(247,181,43,0.35));
}

/* Hover：藍光 + 更亮文字 */
.ccp-news-sidebar .elementor-icon-list-item > a:hover{
  color: var(--ccp-white) !important;
  border-color: rgba(70,160,255,0.45);
  background: rgba(70,160,255,0.08);
  box-shadow: 0 0 0 3px rgba(70,160,255,0.14);
}

/* =========================================================
   4) 年份清單（shortcode 產出 .ccp-news-year-list）
========================================================= */
.ccp-news-year-list{
  list-style:none !important;
  margin: 18px 0 0 !important;
  padding: 14px 0 0 !important;
  border-top: 1px solid rgba(255,255,255,0.18);
}

.ccp-news-year-list li{
  margin: 0 !important;
  padding: 0 !important;
}

.ccp-news-year-list a{
  display:flex;
  align-items:center;
  gap: 12px;

  padding: 12px 12px;
  border-radius: 0 !important;             /* 直角 */
  text-decoration:none !important;

  color: var(--ccp-ink) !important;
  font-weight: 900 !important;
  letter-spacing: .04em;

  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);

  transition: all .18s ease;
}

/* 年份左側：金色圈 */
.ccp-news-year-list a::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 2px solid rgba(247,181,43,0.85);
  box-shadow: 0 0 12px rgba(247,181,43,0.25);
  flex: 0 0 auto;
}

/* 年份 hover */
.ccp-news-year-list a:hover{
  color: var(--ccp-white) !important;
  border-color: rgba(70,160,255,0.45);
  background: rgba(70,160,255,0.08);
  box-shadow: 0 0 0 3px rgba(70,160,255,0.14);
}

/* 當前年份（shortcode 會加 li.is-active） */
.ccp-news-year-list li.is-active > a{
  color: var(--ccp-white) !important;
  border-color: rgba(247,181,43,0.55);
  background: rgba(247,181,43,0.10);
  box-shadow: 0 0 0 3px rgba(247,181,43,0.12);
}
.ccp-news-year-list li.is-active > a::before{
  background: rgba(247,181,43,0.92);
  border-color: rgba(255,235,190,0.95);
  box-shadow: 0 0 16px rgba(247,181,43,0.40);
}

/* 若沒抓到年份的提示（debug） */
.ccp-news-year-empty{
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 0 !important;             /* 直角 */
  color: rgba(255,255,255,0.78);
  border: 1px dashed rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.03);
  font-size: 14px;
  line-height: 1.5;
}

/* =========================================================
   5) 手機版（更接近競品）
   你目前手機看到的是「整塊側欄卡片」在上方，且仍是清單。
   我們改成：
   - 左欄面板視覺變成「兩個 filter bar」(分類/年份) 放在列表上方
   - 清單改成「兩欄 chips」更好點擊（不用下拉也接近競品 UX）
   注意：純 CSS 無法做真正的點擊展開下拉（無 JS），所以以
         「bar + chips」呈現，體驗上會更像競品的兩個 filter 控制。
========================================================= */
@media (max-width: 768px){

  /* 側欄改成扁平，不要像大卡片壓版 */
  .ccp-news-sidebar{
    padding: 14px 14px;
    border-radius: 0 !important;
    box-shadow: none;
  }

  /* 標題縮小（避免手機太佔） */
  .ccp-news-sidebar .elementor-heading-title{
    font-size: 20px;
    margin-bottom: 10px;
  }

  /* 分類 list / 年份 list 改成 chips grid */
  .ccp-news-sidebar .elementor-icon-list-items{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 10px 0 12px !important;
  }

  .ccp-news-sidebar .elementor-icon-list-item > a{
    justify-content: flex-start;
    padding: 12px 10px;
    font-size: 14px;
  }

  .ccp-news-year-list{
    border-top: 1px solid rgba(255,255,255,0.16);
    padding-top: 12px !important;
    margin-top: 12px !important;

    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .ccp-news-year-list a{
    padding: 12px 10px;
    font-size: 14px;
  }

  /* 做成「Filter Bar」視覺（分類/年份）：
     - 用每個區塊第一個 heading 當 bar 樣式
     - 如果你的「分類」「年份」是 Heading，它就會變成 bar
  */
  .ccp-news-sidebar .elementor-heading-title{
    position: relative;
    padding: 10px 36px 10px 12px;
    border: 1px solid rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.04);
  }

  /* 右側小箭頭（下拉感） */
  .ccp-news-sidebar .elementor-heading-title::after{
    content:"";
    position:absolute;
    right:12px;
    top:50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--ccp-gold);
    border-bottom: 2px solid var(--ccp-gold);
    transform: translateY(-60%) rotate(45deg);
    opacity: .95;
  }

  /* heading 底部藍線（更像競品的底線控制） */
  .ccp-news-sidebar .elementor-heading-title::before{
    content:"";
    position:absolute;
    left:0; right:0; bottom:-1px;
    height:2px;
    background: linear-gradient(90deg, rgba(70,160,255,0.0), rgba(70,160,255,0.85), rgba(70,160,255,0.0));
    opacity: .9;
  }
}

/* =========================================================
   6) 讓「目前分類」有高亮（可選）
   WordPress 會在分類頁 body 帶 category-xxx class
   Elementor 的 icon list 不一定會自動加 active，
   這裡用 href 含 /category/{slug}/ 的方式做基本高亮（保守不干擾）
========================================================= */
body.category-company-news .ccp-news-sidebar .elementor-icon-list-item a[href*="category/company-news"],
body.category-exhibitions-events .ccp-news-sidebar .elementor-icon-list-item a[href*="category/exhibitions-events"],
body.category-product-announcements .ccp-news-sidebar .elementor-icon-list-item a[href*="category/product-announcements"]{
  border-color: rgba(247,181,43,0.55) !important;
  background: rgba(247,181,43,0.10) !important;
  box-shadow: 0 0 0 3px rgba(247,181,43,0.12);
  color: var(--ccp-white) !important;
}

/* =========================================================
   7) 小修：避免某些主題把列表項目加圓角
========================================================= */
.ccp-news-sidebar *,
.ccp-news-sidebar *::before,
.ccp-news-sidebar *::after{
  border-radius: 0 !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c8686de *//* =========================================================
   CCP NEWS – Sidebar Mobile Dropdown (FULL CSS)
   - Desktop: 維持直列全寬清單
   - Mobile: 分類/年份變成下拉式（JS 控制展開/收合）
   依賴：左側容器 class：ccp-news-sidebar
========================================================= */

:root{
  --ccp-navy:#0a1e50;
  --ccp-gold:#f7b52b;
  --ccp-ink:rgba(255,255,255,0.92);
  --ccp-line:rgba(255,255,255,0.16);
  --ccp-line2:rgba(255,255,255,0.22);
  --ccp-glow:rgba(70,160,255,0.38);
}

/* ===== A) Sidebar base ===== */
.ccp-news-sidebar{
  position: relative;
  border-radius: 0 !important;
  overflow: hidden;
  border: 1px solid var(--ccp-line);
}

.ccp-news-sidebar::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:2px;
  background: linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(247,181,43,0.75) 16%,
    rgba(255,235,190,0.95) 50%,
    rgba(247,181,43,0.75) 84%,
    rgba(0,0,0,0) 100%);
  opacity: .95;
  pointer-events:none;
}

.ccp-news-sidebar > *{ position: relative; z-index: 1; }

/* ===== B) Titles (分類/年份) ===== */
.ccp-news-sidebar .elementor-widget-heading{
  width: 100% !important;
  max-width: 100% !important;
}

.ccp-news-sidebar .elementor-widget-heading .elementor-heading-title{
  color: var(--ccp-gold) !important;
  font-weight: 900 !important;
  letter-spacing: .10em;
  margin: 0 0 12px !important;
  border-radius: 0 !important;
}

/* ===== C) Lists unified (desktop default) ===== */
.ccp-news-sidebar .ccp-news-cat-list,
.ccp-news-sidebar .ccp-news-year-list,
.ccp-news-sidebar .ccp-news-filter-list{
  list-style: none !important;
  margin: 12px 0 18px !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.ccp-news-sidebar .ccp-news-cat-list li,
.ccp-news-sidebar .ccp-news-year-list li,
.ccp-news-sidebar .ccp-news-filter-list li{
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.ccp-news-sidebar .ccp-news-cat-list a,
.ccp-news-sidebar .ccp-news-year-list a,
.ccp-news-sidebar .ccp-news-filter-list a{
  width: 100% !important;
  box-sizing: border-box !important;

  display:flex;
  align-items:center;
  gap: 12px;

  padding: 13px 14px;
  border-radius: 0 !important;
  text-decoration: none !important;

  color: var(--ccp-ink) !important;
  font-weight: 900 !important;
  letter-spacing: .04em;

  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);

  transition: all .18s ease;
}

.ccp-news-sidebar .ccp-news-cat-list a::before,
.ccp-news-sidebar .ccp-news-year-list a::before,
.ccp-news-sidebar .ccp-news-filter-list a::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 0 !important;
  border: 2px solid rgba(247,181,43,0.90);
  box-shadow: 0 0 12px rgba(247,181,43,0.22);
  flex: 0 0 auto;
}

.ccp-news-sidebar .ccp-news-cat-list a:hover,
.ccp-news-sidebar .ccp-news-year-list a:hover,
.ccp-news-sidebar .ccp-news-filter-list a:hover{
  color: #fff !important;
  border-color: rgba(70,160,255,0.45);
  background: rgba(70,160,255,0.08);
  box-shadow: 0 0 0 3px rgba(70,160,255,0.14);
}

.ccp-news-sidebar .ccp-news-cat-list li.is-active > a,
.ccp-news-sidebar .ccp-news-year-list li.is-active > a,
.ccp-news-sidebar .ccp-news-filter-list li.is-active > a{
  color: #fff !important;
  border-color: rgba(247,181,43,0.65);
  background: rgba(247,181,43,0.10);
  box-shadow: 0 0 0 3px rgba(247,181,43,0.12);
}

.ccp-news-sidebar .ccp-news-cat-list li.is-active > a::before,
.ccp-news-sidebar .ccp-news-year-list li.is-active > a::before,
.ccp-news-sidebar .ccp-news-filter-list li.is-active > a::before{
  background: rgba(247,181,43,0.90);
  border-color: rgba(255,235,190,0.95);
  box-shadow: 0 0 16px rgba(247,181,43,0.38);
}

/* ===== D) REMOVE any divider line (你之前紅框那條) ===== */
.ccp-news-sidebar .ccp-news-year-list{
  border-top: none !important;
  padding-top: 0 !important;
}
.ccp-news-sidebar hr,
.ccp-news-sidebar .elementor-divider{ display:none !important; }

/* =========================================================
   E) Mobile: dropdown/accordion UI (JS will toggle classes)
   - 標題變成「下拉 bar」
   - 清單變成可收合 panel（預設收起）
========================================================= */
@media (max-width: 768px){

  /* 標題 bar（JS 會加 .ccp-news-acc-trigger） */
  .ccp-news-sidebar .ccp-news-acc-trigger .elementor-heading-title{
    font-size: 18px !important;
    line-height: 1.2;
    margin: 0 0 10px !important;

    padding: 12px 42px 12px 14px !important;
    border: 1px solid var(--ccp-line2) !important;
    background: rgba(255,255,255,0.04) !important;
    position: relative;
  }

  /* 右側箭頭 */
  .ccp-news-sidebar .ccp-news-acc-trigger .elementor-heading-title::after{
    content:"";
    position:absolute;
    right:14px;
    top:50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--ccp-gold);
    border-bottom: 2px solid var(--ccp-gold);
    transform: translateY(-55%) rotate(45deg);
    opacity: .95;
    transition: transform .18s ease;
  }

  /* 展開狀態箭頭朝上 */
  .ccp-news-sidebar .ccp-news-acc-trigger.is-open .elementor-heading-title::after{
    transform: translateY(-40%) rotate(-135deg);
  }

  /* panel（JS 會加 .ccp-news-acc-panel） */
  .ccp-news-sidebar .ccp-news-acc-panel{
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    transition: max-height .22s ease, opacity .18s ease, transform .18s ease;
    margin: 0 0 12px !important;
  }

  .ccp-news-sidebar .ccp-news-acc-panel.is-open{
    max-height: 520px; /* 夠放你的分類/年份 */
    opacity: 1;
    transform: translateY(0);
  }

  /* 手機版清單維持單欄，不要兩欄 chips */
  .ccp-news-sidebar .ccp-news-cat-list,
  .ccp-news-sidebar .ccp-news-year-list{
    display: block !important;
    margin: 0 !important;
  }

  .ccp-news-sidebar .ccp-news-cat-list a,
  .ccp-news-sidebar .ccp-news-year-list a{
    padding: 12px 14px !important;
    font-size: 15px !important;
  }
}

/* ===== F) Hard reset: straight corners ===== */
.ccp-news-sidebar *,
.ccp-news-sidebar *::before,
.ccp-news-sidebar *::after{
  border-radius: 0 !important;
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-24ffc7bc *//* =========================================================
   CCP News Pagination – FULL CSS
   Scope:
     .ccp-news-archive
     .elementor-pagination (Loop Grid only)
   Gold Theme: #f7b52b
========================================================= */

/* ===== Wrapper ===== */
.ccp-news-archive .elementor-pagination{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap: 10px !important;
  margin: 28px 0 10px !important;
}

/* ===== Base buttons ===== */
.ccp-news-archive .elementor-pagination .page-numbers{
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  width: 52px !important;
  height: 44px !important;

  background: #ffffff !important;
  color: #0b1a33 !important;

  border: 1px solid rgba(20,40,80,.20) !important;
  border-radius: 12px !important;

  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1 !important;

  transition: transform .16s ease,
              box-shadow .16s ease,
              background .16s ease,
              border-color .16s ease,
              color .16s ease;
}

/* ===== Hover ===== */
.ccp-news-archive .elementor-pagination a.page-numbers:hover{
  border-color: #ebb034 !important; /* 色階第二格 */
  box-shadow: 0 10px 22px rgba(5,20,45,.10),
              0 0 0 4px rgba(247,181,43,.20) !important;
  transform: translateY(-1px);
}

/* ===== Current ===== */
.ccp-news-archive .elementor-pagination .page-numbers.current{
  background: #f7b52b !important; /* 主金色 */
  border-color: #d3a545 !important; /* 深一階 */
  color: #ffffff !important;
  box-shadow: 0 12px 26px rgba(5,20,45,.16) !important;
}

/* ===== Prev / Next ===== */
.ccp-news-archive .elementor-pagination .page-numbers.prev,
.ccp-news-archive .elementor-pagination .page-numbers.next{
  font-size: 0 !important;
  position: relative;
}

/* Left arrow */
.ccp-news-archive .elementor-pagination .page-numbers.prev::before{
  content: "‹";
  font-size: 26px;
  line-height: 1;
  color: #0b1a33;
}

/* Right arrow */
.ccp-news-archive .elementor-pagination .page-numbers.next::before{
  content: "›";
  font-size: 26px;
  line-height: 1;
  color: #0b1a33;
}

/* Arrow hover */
.ccp-news-archive .elementor-pagination .page-numbers.prev:hover::before,
.ccp-news-archive .elementor-pagination .page-numbers.next:hover::before{
  color: #f7b52b;
}

/* ===== Mobile ===== */
@media (max-width: 767px){
  .ccp-news-archive .elementor-pagination{
    gap: 8px !important;
    margin-top: 18px !important;
  }

  .ccp-news-archive .elementor-pagination .page-numbers{
    width: 46px !important;
    height: 40px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
  }
}/* End custom CSS */