.elementor-19645 .elementor-element.elementor-element-8ef3da9{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-19645 .elementor-element.elementor-element-8ef3da9 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-19645 .elementor-element.elementor-element-34e83ac5 > .elementor-element-populated{margin:-10px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-19645 .elementor-element.elementor-element-e130d03 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-19645 .elementor-element.elementor-element-e130d03{text-align:center;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-19645 .elementor-element.elementor-element-adce12f{width:var( --container-widget-width, 102.407% );max-width:102.407%;--container-widget-width:102.407%;--container-widget-flex-grow:0;text-align:center;}.elementor-19645 .elementor-element.elementor-element-adce12f > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-19645 .elementor-element.elementor-element-adce12f img{border-radius:12px 12px 12px 12px;}.elementor-19645 .elementor-element.elementor-element-700112f > .elementor-element-populated{padding:6px 0px 0px 30px;}.elementor-19645 .elementor-element.elementor-element-e3b67c7 .elementor-heading-title{font-weight:400;}.elementor-19645 .elementor-element.elementor-element-51801b8 .elementor-heading-title{-webkit-text-stroke-color:#000;stroke:#000;text-shadow:0px 0px 0px rgba(0,0,0,0.3);}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-19645 .elementor-element.elementor-element-b012977 .elementor-button{background-color:#FFFFFF00;letter-spacing:1px;fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-style:solid;border-width:1px 1px 1px 1px;}.elementor-19645 .elementor-element.elementor-element-b012977 .elementor-button:hover, .elementor-19645 .elementor-element.elementor-element-b012977 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-19645 .elementor-element.elementor-element-b012977 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-19645 .elementor-element.elementor-element-b012977 .elementor-button:hover svg, .elementor-19645 .elementor-element.elementor-element-b012977 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-19645 .elementor-element.elementor-element-f4384fd{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:40px 0px 20px 0px;}.elementor-19645 .elementor-element.elementor-element-f4384fd > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-19645 .elementor-element.elementor-element-f676a28 > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-19645 .elementor-element.elementor-element-f676a28 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-19645 .elementor-element.elementor-element-8a888ea > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-19645 .elementor-element.elementor-element-8a888ea{text-align:center;}.elementor-19645 .elementor-element.elementor-element-aeaf84c > .elementor-element-populated{padding:0px 0px 0px 0px;}.elementor-19645 .elementor-element.elementor-element-a9f873b .elementor-button{background-color:#FFFFFF00;letter-spacing:1px;fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-style:solid;border-width:1px 1px 1px 1px;}.elementor-19645 .elementor-element.elementor-element-a9f873b .elementor-button:hover, .elementor-19645 .elementor-element.elementor-element-a9f873b .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-19645 .elementor-element.elementor-element-a9f873b > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-19645 .elementor-element.elementor-element-a9f873b .elementor-button:hover svg, .elementor-19645 .elementor-element.elementor-element-a9f873b .elementor-button:focus svg{fill:#FFFFFF;}.elementor-19645 .elementor-element.elementor-element-86ccbc6 > .elementor-element-populated{padding:0px 0px 0px 30px;}.elementor-19645 .elementor-element.elementor-element-91dfd37 img{border-radius:12px 12px 12px 12px;}.elementor-19645 .elementor-element.elementor-element-3f41a781 .elementor-repeater-item-bb99a2c.jet-parallax-section__layout .jet-parallax-section__image{background-size:auto;}.elementor-19645 .elementor-element.elementor-element-1df0674 > .elementor-widget-container{margin:0px 0px 10px 0px;}.elementor-19645 .elementor-element.elementor-element-1df0674{text-align:center;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-19645 .elementor-element.elementor-element-7c678649{text-align:start;}.elementor-19645 .elementor-element.elementor-element-4a31ffe8 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-19645 .elementor-element.elementor-element-57b54499 .elementor-button{background-color:#FFFFFF00;letter-spacing:1px;fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-style:solid;border-width:1px 1px 1px 1px;}.elementor-19645 .elementor-element.elementor-element-57b54499 .elementor-button:hover, .elementor-19645 .elementor-element.elementor-element-57b54499 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-19645 .elementor-element.elementor-element-57b54499 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:20px 0px 20px 0px;}.elementor-19645 .elementor-element.elementor-element-57b54499 .elementor-button:hover svg, .elementor-19645 .elementor-element.elementor-element-57b54499 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-19645 .elementor-element.elementor-element-3f41a781{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:20px 0px 40px 0px;}.elementor-19645 .elementor-element.elementor-element-3f41a781 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}/* Start custom CSS for image, class: .elementor-element-adce12f *//* 圖片容器要設為相對定位 */
.status-open, .status-closed {
  position: relative;
  display: inline-block;
}

/* 報名中（綠色標籤） */
.status-open::before {
  content: "報名中";
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #4CAF50;
  color: white;
  font-size: 13px;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* 已截止（紅色標籤） */
.status-closed::before {
  content: "已截止";
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #FF5E5E;
  color: white;
  font-size: 13px;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
/* --- 手機版面專用樣式 (寬度 <= 768px) --- */
@media (max-width: 768px) {
  .status-open::before,
  .status-closed::before {
    /* 使用 transform 將標籤等比例縮小為 80% */
    transform: scale(0.8);

    /* * 因為縮小後，原本的 top: 10px 和 left: 10px 在視覺上會感覺變遠了，
     * 所以可以稍微調整 top 和 left 的值，讓它更貼近角落。
     * 您可以自行微調 5px 這個數值，改成您覺得最適合的距離。
    */
    top: 5px;
    left: 5px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-bcae6e1 */.lecture-info-box {
  font-family: "Noto Sans TC", sans-serif;
  font-size: 16px;
  color: #54595f;
}

.lecture-info-lines p {
  margin: 0 0 10px;
  line-height: 1.6;
}

.details-toggle {
  font-weight: bold;
  color: #9dadc3;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-block;
  border-radius: 6px;
  background-color: transparent;
  font-size: 18px;
}

.details-toggle:hover {
  transform: scale(0.98);
  background-color:none;
  color: #607d8b;
}

.lecture-content {
  margin-top: 12px;
  padding-left: 1.5em;
  list-style-type: circle; /* 空心圓點 */
  line-height: 1.7;
  display: none;
}

/* hover 展開的效果 */
.lecture-details:hover .lecture-content {
  display: block;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-b7f72ab */.custom-accordion {
  font-family: "Noto Sans TC", sans-serif;
  font-size: 16px;
  color: #54595f;
  margin-top: 4px; /* 原本是 12px，調小縮短與上方欄位間距 */
}

.accordion-toggle {
  font-weight: bold;
  color: #9dadc3;
  cursor: pointer;
  display: inline-flex;
  align-items: center; /* 確保加號和文字垂直置中 */
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
  font-size: 18px;
  transition: color 0.3s ease;
}

.accordion-toggle:hover {
  color: #607d8b;
}

.accordion-toggle .icon::before {
  content: "＋";
  position: absolute;
  left: 0;
  top: 0.1em; /* 微調置中位置 */
  font-size: 18px;
  line-height: 1;
}

.accordion-toggle.active .icon::before {
  content: "－";
}

.accordion-content {
  display: none;
  padding-left: 1.5em;
  list-style-type: circle;
  line-height: 1.7;
  margin-top: 8px; /* 與 toggle 之間間距 */
}

.accordion-content.show {
  display: block;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6c3159b *//* ========== 講座資訊（原 lecture-info-box2 / lecture-info-lines2） ========== */
.hen-info{
  font-family: "Noto Sans TC", sans-serif;
  font-size: 16px;
  color: #54595f;
}
.hen-info__lines p{
  margin: 0 0 10px;
  line-height: 1.6;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1d04150 *//* 外層（原：.custom-accordion2） */
.hen-acc2{
  font-family: "Noto Sans TC", sans-serif;
  font-size: 16px;
  color: #54595f;
  margin-top: 4px;  /* 原註解：調小縮短與上方欄位間距 */
}

/* 切換按鈕（原：.accordion-toggle） */
.hen-acc2__toggle{
  font-weight: bold;
  color: #99adc3;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  position: relative;   /* 讓左側符號定位 */
  padding-left: 24px;
  margin-bottom: 8px;
  font-size: 18px;
  transition: color 0.3s ease;
}

/* 滑過顏色（原：.accordion-toggle2:hover） */
.hen-acc2__toggle:hover{
  color: #607d8b;
}

/* 左側 + / − 圖示（原：.accordion-toggle .icon:before） */
.hen-acc2__icon:before{
  content: "＋";
  position: absolute;
  left: 0;
  top: 0.1em;           /* 微調置中 */
  font-size: 18px;
  line-height: 1;
}

/* 展開時改成 −（原：.accordion-toggle.active .icon:before） */
.hen-acc2__toggle.active .hen-acc2__icon:before{
  content: "－";
}

/* 內容（原：.accordion-content2） */
.hen-acc2__content{
  display: none;
  padding-left: 1.5em;
  list-style-type: circle;
  line-height: 1.7;
  margin-top: 8px;      /* 與 toggle 之間間距 */
}

/* 展開顯示（原：.accordion-content2.show） */
.hen-acc2__content.show{
  display: block;
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-91dfd37 *//* 圖片容器要設為相對定位（原 .status-open, .status-closed） */
.hen-badge--open,
.hen-badge--closed{
  position: relative;
  display: inline-block;
}

/* 報名中（綠色標籤）── 原 .status-open:before */
.hen-badge--open::before{
  content: "報名中";
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #4CAF50;
  color: white;
  font-size: 13px;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* 已截止／coming soon（紅色標籤）── 原 .status-pending:before */
.hen-badge--pending::before{
  content: "coming soon!";
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #FF5E5E;
  color: white;
  font-size: 13px;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* 手機版（寬度 <= 768px）：縮小標籤，並微調定位──原本的邏輯不變 */
@media (max-width: 768px){
  /* 原本只縮 open/closed；若你也想一起縮 pending，可把下面第三行保留 */
  .hen-badge--open::before,
  .hen-badge--closed::before{
    transform: scale(0.8);
  }

  /* 因為縮小後，原本的 top:10px、left:10px 看起來會偏遠，
     所以這裡把 top 與 left 調成 5px，維持視覺貼近角落 */
  .hen-badge--open::before,
  .hen-badge--closed::before,
  .hen-badge--pending::before{
    top: 5px;
    left: 5px;
  }
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-f4384fd *//* 只作用在「下場講座預告」區段（Top Section 的 ID 要叫 next-class） */
#next-class{ position: relative; }

/* 兩欄：左文右圖、頂對齊、不自動換行 */
#next-class > .elementor-container{
  display: flex !important;
  align-items: flex-start !important;
  gap: 28px;
  flex-wrap: nowrap !important;       /* 前台避免折成兩行 */
}

/* 左欄（標題/內文） */
#next-class .elementor-column:first-child{
  flex: 1 1 640px;
  min-width: 0;                       /* 防止長字把容器撐爆 */
}

/* 右欄（海報圖） */
#next-class .elementor-column:last-child{
  flex: 0 0 440px;                    /* 依圖片實際寬調整，如 360~460px */
}

/* 圖片：穩定尺寸、不超出欄位 */
#next-class .elementor-widget-image img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 440px;                   /* 要與上面的欄寬一致 */
}

/* 標題/分隔線：避免被主題全域樣式改掉 */
#next-class .elementor-widget-heading .elementor-heading-title{
  margin: 0 0 12px 0 !important;
  line-height: 1.25 !important;
}
#next-class .elementor-divider-separator{
  max-width: 88px;
  margin: 8px 0 24px 0;
}

/* 文字排版 */
#next-class .elementor-widget-text-editor,
#next-class p{
  line-height: 1.7;
  margin: 0 0 10px 0;
}

/* 萬用保險：強制橫排、避免逐字換行 */
#next-class *{
  writing-mode: horizontal-tb !important;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* RWD：平板以下改為上下堆疊 */
@media (max-width: 1024px){
  #next-class > .elementor-container{ flex-wrap: wrap !important; }
  #next-class .elementor-column:first-child{ flex: 1 1 100%; }
  #next-class .elementor-column:last-child{
    flex: 0 0 100%;
    max-width: 520px;
  }
  #next-class .elementor-widget-image img{
    max-width: 520px;
    margin-top: 12px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2aaa5f59 *//* 整排容器，一排三卡片 */
.flip-card-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px;
  max-width: 1280px;
  margin: 0 auto;
  margin-top: 20px;
margin-bottom: 10px;
}
/* === 讓整排卡片上方留空 === */
.flip-card-wrapper{
    padding-top:10px;   /* ⇦ 需要多少空間就改這個數字 */
}
/* 單張卡片：固定寬高比，與上方一致 */
.flip-card {
  width: 32%;
  aspect-ratio: 16 / 9; /* 保持 1920x1080 比例 */
  perspective: 1000px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

/* 卡片內部旋轉區 */
.flip-card-inner {
  width: 100%;
  height: 100%;
  transition: transform 0.7s ease;
  transform-style: preserve-3d;
  border-radius: 16px;
  position: relative;
}

/* 翻轉動畫 */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* 正反面共同屬性 */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  backface-visibility: hidden;
  overflow: hidden;
}

/* 圖片正面樣式 */
.flip-card-front img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 重點：完整呈現圖片 */
  display: block;
}

/* 背面內容樣式 */
.flip-card-back {
  background-color: #9DADC3;
  color: #fff;
  transform: rotateY(180deg);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
}

.back-content {
  text-align: center;
  line-height: 1.5;
}

.back-content .lecture-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 6px;
}

.back-content .lecture-speaker {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}

.back-content .lecture-desc {
  font-size: 13px;
  color: #f0f0f0;
}
/* 解開背面卡片中講師資訊的 display 限制 */
.flip-card-back .lecture-speaker {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
  color: #fff;
}
/* ─────────── 卡片外框＋ hashtag ─────────── */
.flip-card-container{
  width:32%;                         /* 一排 3 欄 */
  display:flex;flex-direction:column;align-items:center;
  margin-bottom:10px;                /* 上下排距離(統一) */
}

/* ─────────── hashtag 樣式 (可再自行微調) ─────────── */
.lecture-tag{
  margin-top:14px;                 /* 與卡片距離 */
  font-size:16px;                  /* 字級 */
  font-weight:600;                 /* 粗細：400=正常、600=半粗、700=粗 */
  font-style:normal;               /* 取消斜體 */
  color:#49637A;                   /* 文字顏色 */

  /* # 與文字留一格：寫 HTML 時打 #<空格>文字；若想強制加空格可用下行 */
  /* letter-spacing:0.05em; */     /* (可選) 微調 # 與文字間距 */

  text-align:center;

  /* 如需底色可解除註解：
  background:#e4eef7; padding:4px 8px; border-radius:4px; */
}

/* 讓卡片填滿 container */
.flip-card-container .flip-card{
  width:100%;
  aspect-ratio:16/9;
}

/* 手機版調整 */
@media (max-width: 768px) {
  .flip-card-container {
    width: 100%;
    margin-bottom: 32px;
  }
  .lecture-tag {
    font-size: 12px;
    margin-top: 6px;
  }
}

/* 手機 RWD */
@media (max-width: 768px) {
  .flip-card-container {
    width: 100%;
    margin-bottom: 32px;
  }

  .lecture-tag {
    font-size: 10px;
    margin-top: 6px;
  }
}

@media (max-width: 768px) {
  .flip-card-wrapper {
    flex-direction: column;
    gap: 16px;
  }

  .flip-card {
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .flip-card-inner {
    transform: none !important;
    transition: none;
  }

  .flip-card-front {
    display: block !important;
  }

  .flip-card-back {
    position: static;
    transform: none !important;
    background-color: #9DADC3;
    color: #fff;
    padding: 16px;
    display: block;
    height: auto;
    border-radius: 12px;
  }

  .back-content {
    text-align: center;
  }

  .back-content .lecture-title {
    font-size: 12px;
    margin-bottom: 8px;
    font-weight: bold;
  }

  .back-content .lecture-speaker {
    font-size: 10px;
    margin-bottom: 4px;
  }

  .back-content .lecture-desc {
    font-size: 8px;
    line-height: 1.4;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4a31ffe8 *//* --- 總容器 --- */
.card-stack-wrapper {
    position: relative;
    width: 100%;
    max-width: 450px;
    /* 【修正1】增加總高度，給予內容足夠的空間 */
    height: 450px; 
    margin: auto;
}

/* 隱藏真正的 radio 按鈕 */
.card-stack-wrapper input[type="radio"] {
    display: none;
}

/* --- 卡片堆疊容器 --- */
.card-stack {
    position: relative;
    width: 100%;
    height: 100%;
    margin-bottom: 60px
}

/* --- 單張卡片的樣式 --- */
.lecture-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    /* 【修正2】微調上下邊距，釋放垂直空間 */
    padding: 25px 25px 20px; 
    border-radius: 24px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    
    display: flex;
    flex-direction: column;
    
    opacity: 0;
    transform: scale(0.9) translateY(10px);
    transition: all 0.4s ease-in-out;
    z-index: 1;
}

/* 【CSS 核心】當 radio 被選中時，顯示對應的卡片 */
#card-1:checked ~ .card-stack .card-1,
#card-2:checked ~ .card-stack .card-2,
#card-3:checked ~ .card-stack .card-3 {
    opacity: 1;
    transform: scale(1) translateY(0);
    z-index: 2;
}

/* 不同卡片的底色 */
.card-1 { background-color: #F1F4F7; }
.card-2 { background-color: #C7D2DD; }
.card-3 { background-color: #F1F4F7; }

/* --- 卡片內容樣式 --- */
.lecture-card h2 { font-size: 24px; margin: 0 0 8px; color: #222; }
.lecture-card .speaker { font-size: 16px; margin: 0 0 12px; color: #555; }

.lecture-card .description {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    margin: 0;
    /* 【修正3】讓描述區塊自動延展，把圖片和按鈕往下推 */
}

.lecture-card .lecture-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 16px;
    margin-top: 20px; /* 取代原本的 auto 和 padding-top */
}

.lecture-card .hashtag-container {
    text-align: center;
    padding-top: 20px;
}

.lecture-card .hashtag-container span {
    display: inline-block;
    font-size: 14px;
    color: #555;
    background-color: rgba(0,0,0,0.05);
    padding: 6px 14px;
    border-radius: 16px;
}

/* --- 導航箭頭樣式 --- */
.card-nav {
    position: absolute;
    bottom: 25px;
    left: 25px;
    right: 25px;
    display: flex;
    justify-content: space-between;
    z-index: 3;
}

.card-nav label {
    width: 44px;
    height: 44px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: background-color 0.2s;
}

.card-nav label:hover {
    background-color: rgba(255, 255, 255, 1);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2aaa5f59 *//* 整排容器，一排三卡片 */
.flip-card-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px;
  max-width: 1280px;
  margin: 0 auto;
  margin-top: 20px;
margin-bottom: 10px;
}
/* === 讓整排卡片上方留空 === */
.flip-card-wrapper{
    padding-top:10px;   /* ⇦ 需要多少空間就改這個數字 */
}
/* 單張卡片：固定寬高比，與上方一致 */
.flip-card {
  width: 32%;
  aspect-ratio: 16 / 9; /* 保持 1920x1080 比例 */
  perspective: 1000px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

/* 卡片內部旋轉區 */
.flip-card-inner {
  width: 100%;
  height: 100%;
  transition: transform 0.7s ease;
  transform-style: preserve-3d;
  border-radius: 16px;
  position: relative;
}

/* 翻轉動畫 */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* 正反面共同屬性 */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  backface-visibility: hidden;
  overflow: hidden;
}

/* 圖片正面樣式 */
.flip-card-front img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 重點：完整呈現圖片 */
  display: block;
}

/* 背面內容樣式 */
.flip-card-back {
  background-color: #9DADC3;
  color: #fff;
  transform: rotateY(180deg);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
}

.back-content {
  text-align: center;
  line-height: 1.5;
}

.back-content .lecture-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 6px;
}

.back-content .lecture-speaker {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}

.back-content .lecture-desc {
  font-size: 13px;
  color: #f0f0f0;
}
/* 解開背面卡片中講師資訊的 display 限制 */
.flip-card-back .lecture-speaker {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
  color: #fff;
}
/* ─────────── 卡片外框＋ hashtag ─────────── */
.flip-card-container{
  width:32%;                         /* 一排 3 欄 */
  display:flex;flex-direction:column;align-items:center;
  margin-bottom:10px;                /* 上下排距離(統一) */
}

/* ─────────── hashtag 樣式 (可再自行微調) ─────────── */
.lecture-tag{
  margin-top:14px;                 /* 與卡片距離 */
  font-size:16px;                  /* 字級 */
  font-weight:600;                 /* 粗細：400=正常、600=半粗、700=粗 */
  font-style:normal;               /* 取消斜體 */
  color:#49637A;                   /* 文字顏色 */

  /* # 與文字留一格：寫 HTML 時打 #<空格>文字；若想強制加空格可用下行 */
  /* letter-spacing:0.05em; */     /* (可選) 微調 # 與文字間距 */

  text-align:center;

  /* 如需底色可解除註解：
  background:#e4eef7; padding:4px 8px; border-radius:4px; */
}

/* 讓卡片填滿 container */
.flip-card-container .flip-card{
  width:100%;
  aspect-ratio:16/9;
}

/* 手機版調整 */
@media (max-width: 768px) {
  .flip-card-container {
    width: 100%;
    margin-bottom: 32px;
  }
  .lecture-tag {
    font-size: 12px;
    margin-top: 6px;
  }
}

/* 手機 RWD */
@media (max-width: 768px) {
  .flip-card-container {
    width: 100%;
    margin-bottom: 32px;
  }

  .lecture-tag {
    font-size: 10px;
    margin-top: 6px;
  }
}

@media (max-width: 768px) {
  .flip-card-wrapper {
    flex-direction: column;
    gap: 16px;
  }

  .flip-card {
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .flip-card-inner {
    transform: none !important;
    transition: none;
  }

  .flip-card-front {
    display: block !important;
  }

  .flip-card-back {
    position: static;
    transform: none !important;
    background-color: #9DADC3;
    color: #fff;
    padding: 16px;
    display: block;
    height: auto;
    border-radius: 12px;
  }

  .back-content {
    text-align: center;
  }

  .back-content .lecture-title {
    font-size: 12px;
    margin-bottom: 8px;
    font-weight: bold;
  }

  .back-content .lecture-speaker {
    font-size: 10px;
    margin-bottom: 4px;
  }

  .back-content .lecture-desc {
    font-size: 8px;
    line-height: 1.4;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4a31ffe8 *//* --- 總容器 --- */
.card-stack-wrapper {
    position: relative;
    width: 100%;
    max-width: 450px;
    /* 【修正1】增加總高度，給予內容足夠的空間 */
    height: 450px; 
    margin: auto;
}

/* 隱藏真正的 radio 按鈕 */
.card-stack-wrapper input[type="radio"] {
    display: none;
}

/* --- 卡片堆疊容器 --- */
.card-stack {
    position: relative;
    width: 100%;
    height: 100%;
    margin-bottom: 60px
}

/* --- 單張卡片的樣式 --- */
.lecture-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    /* 【修正2】微調上下邊距，釋放垂直空間 */
    padding: 25px 25px 20px; 
    border-radius: 24px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    
    display: flex;
    flex-direction: column;
    
    opacity: 0;
    transform: scale(0.9) translateY(10px);
    transition: all 0.4s ease-in-out;
    z-index: 1;
}

/* 【CSS 核心】當 radio 被選中時，顯示對應的卡片 */
#card-1:checked ~ .card-stack .card-1,
#card-2:checked ~ .card-stack .card-2,
#card-3:checked ~ .card-stack .card-3 {
    opacity: 1;
    transform: scale(1) translateY(0);
    z-index: 2;
}

/* 不同卡片的底色 */
.card-1 { background-color: #F1F4F7; }
.card-2 { background-color: #C7D2DD; }
.card-3 { background-color: #F1F4F7; }

/* --- 卡片內容樣式 --- */
.lecture-card h2 { font-size: 24px; margin: 0 0 8px; color: #222; }
.lecture-card .speaker { font-size: 16px; margin: 0 0 12px; color: #555; }

.lecture-card .description {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    margin: 0;
    /* 【修正3】讓描述區塊自動延展，把圖片和按鈕往下推 */
}

.lecture-card .lecture-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 16px;
    margin-top: 20px; /* 取代原本的 auto 和 padding-top */
}

.lecture-card .hashtag-container {
    text-align: center;
    padding-top: 20px;
}

.lecture-card .hashtag-container span {
    display: inline-block;
    font-size: 14px;
    color: #555;
    background-color: rgba(0,0,0,0.05);
    padding: 6px 14px;
    border-radius: 16px;
}

/* --- 導航箭頭樣式 --- */
.card-nav {
    position: absolute;
    bottom: 25px;
    left: 25px;
    right: 25px;
    display: flex;
    justify-content: space-between;
    z-index: 3;
}

.card-nav label {
    width: 44px;
    height: 44px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: background-color 0.2s;
}

.card-nav label:hover {
    background-color: rgba(255, 255, 255, 1);
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-3f41a781 *//* 修正 Elementor 分頁 (Tabs) 內容區的間距與背景問題 */
.elementor-19645 .elementor-element.elementor-element-3f41a781 .elementor-tabs-content-wrapper {
    padding: 0 !important; 
    border: none !important; 
    background-color: transparent !important; 
}/* End custom CSS */