/* ==================================================
   EC Education｜Page CSS
   本頁使用樣式＋Owl／Modal／CourseList／Alumni
================================================== */
@font-face {
  font-display: swap;
}
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400);
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200..900);
body p {
  margin-bottom: 0;
  font-size: 18px;
}
:root {
  --page-max-width: 980px;
  --ec-bg-dark: #000000;
  --ec-bg-light: #f5f5f7;
  --ec-text-main: #1d1d1f;
  --ec-text-light: #f5f5f7;
  --ec-accent-blue: #0071e3;
  --ec-line-green: #449d44;
  --ec-secondary: #888;
  --font-sans: system-ui, BlinkMacSystemFont, 'Noto Sans TC', '微軟正黑體', '蘋方', sans-serif;
  --line-height-tight: 1.08;
  --radius-card: 18px;
  --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 5px 10px rgba(0, 0, 0, 0.35);
  /* Hero */
  --ec-type-hero-title: clamp(2.5rem, calc(1.4rem + 4.5vw), 5.8rem);
  --ec-type-hero-lead: clamp(1.2rem, calc(.96rem + .45vw), 1.6rem);
  /* Section hierarchy */
  --ec-type-section-title: clamp(1.5rem, calc(1.5rem + 1vw), 2.2rem);
  --ec-type-section-lead: clamp(1.125rem, calc(1.02rem + .35vw), 1.4rem);
  /* Card hierarchy */
  --ec-type-card-title: clamp(1.3rem, calc(1.3rem + .3vw), 1.6rem);
	--ec-type-card-title02: clamp(1.05rem, calc(1.05rem + .3vw), 1.6rem);
  --ec-type-body: clamp(1.1rem, calc(.9rem + .14vw), 1.2rem);
  --ec-type-note: clamp(1rem, calc(.84rem + .1vw), 1.1rem);
  --ec-type-label: clamp(1.05rem, calc(.82rem + .16vw), 1.3rem);
  --ec-type-lh-title: 1.4;
  --ec-type-lh-body: 1.7;
}
*, *::before, *::after {
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
.ec-subtitle {
  font-size: clamp(1.1rem, 2.1vw, 1.35rem);
  line-height: 1.45;
  max-width: 46rem;
  margin-bottom: 1.4rem;
}
/* Hero */
/* Buttons（延伸 Bootstrap btn） */
.btn-ec-primary {
  background-color: var(--ec-accent-blue);
  border-color: var(--ec-accent-blue);
  color: #fff;
  border-radius: 999px;
  padding-inline: 1.25rem;
  font-weight: 500;
}
.btn-ec-primary:hover {
  background-color: #0077ed;
  border-color: #0077ed;
  color: #fff;
  transform: translateY(-1px);
}
.btn-ec-green {
  background-color: var(--ec-line-green);
  border-color: var(--ec-line-green);
  color: #fff;
  border-radius: 999px;
  padding-inline: 1.25rem;
  font-weight: 500;
}
.btn-ec-green:hover {
  background-color: #398439;
  border-color: #398439;
  color: #fff;
  transform: translateY(-1px);
}
.ec-hdtitile {
  font-size: 1.5em;
}
.ec-card-title {
  font-size: clamp(1.1em, 2.3vw, 1.2em);
  font-weight: 600;
}
/* 小清單 */
/* Arrow buttons */
.owl-theme .owl-controls .owl-nav [class*=owl-] {
  margin-top: 1.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .6rem;
}
.owl-theme .owl-controls .owl-nav [class*=owl-] {
  width: 38px;
  height: 38px;
  color: #ffffff;
  border-radius: 999px;
  background: #000000;
  border: 1px solid rgba(0, 0, 0, 0.15);
  font-size: 1.3rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/*CourseList*/
.CourseList > div.owl-stage-outer > div {
  left: -60px;
}
.CourseList > div.owl-controls {
  margin-right: 60px; /* margin-right: 15%; text-align: right;*/
}
/*課程卡片樣式*/
.CourseList .ec-card {
  position: relative; /* 給右下角 + 按鈕用，原本如果有就一樣 */
  padding: 0px;
}
/* 卡片內部：直向排列，上文下圖 */
.CourseList .ec-card-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* 卡片整體的高度區間：最矮 260px，最大 360px，中間跟著螢幕變化 */
  min-height: clamp(260px, 55vw, 360px);
  padding: 0px;
}
/* 文字區在最上方，撐掉中間空間 */
.CourseList .ec-card-text {
  padding: clamp(20px, 3vw, 30px); /* 內邊距也用區間寫法 */
  padding-bottom: 0px;
  flex: 1 1 auto; /* 吃掉可用高度，讓圖片被推到底 */
}
/* 圖片區：固定高度 + 貼底 */
.CourseList .ec-card-img {
  margin-top: auto;
  height: clamp(140px, 40vw, 220px); /* 圖片高度區間，可依你版面調整 */
  display: flex;
  align-items: flex-end;
}
/* 圖片本身：等比例縮放 */
.CourseList .ec-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-bottom-right-radius: var(--radius-card);
  border-bottom-left-radius: var(--radius-card);
}
/*卡片按鈕*/
.CourseList .ec-card {
  position: relative;
}
.CourseList .ec-card-btn {
  position: absolute;
  /* 位置與大小，完全用 clamp 控制 */
  right: clamp(8px, 3vw, 20px);
  bottom: clamp(8px, 3vw, 20px);
  /*width:  clamp(36px, 4vw, 48px);*/
  height: clamp(36px, 4vw, 48px);
  font-size: clamp(20px, 4vw, 28px);
  border-radius: 50%;
  border: none;
  line-height: 1em;
  background: #000000f0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: .25s ease;
}
.CourseList .ec-card-btn:hover {
  background: #333;
}
/*課程內頁1*/
.modal-bottom-cstitle {
  position: absolute;
  bottom: -15px;
  right: 5%;
}
.modal-bottom-cstitle .Cs-subTL {
  background-color: #79C0F6;
  padding: 5px 8px;
}
.syllabus {
  padding: 20px;
  position: relative;
}
.syllabus h4 {
  font-weight: 400;
  letter-spacing: .02em;
}
.syllabus ul {
  padding-left: 1.15rem;
  margin-bottom: .75rem;
}
.syllabus li {
  margin: .2rem 0;
}
/* 深色主題 */
.theme-dark {
  background: #0b1118;
  color: #d7e6ff;
}
.theme-dark .modal-header {
  border-bottom: 1px solid #79C0F6;
}
.theme-dark .modal-title {
  color: #d7e6ff;
}
.theme-dark .btn-close {
  filter: invert(1);
  opacity: .85;
}
.theme-dark .btn-close:hover {
  opacity: 1;
}
.theme-dark .modal-title-img {
  width: 100%;
  max-width: 260px;
}
.theme-dark .modal-bottom-cstitle .Cs-subTL {
  color: #000;
}
.theme-dark .syllabus h4 {
  color: #79C0F6;
}
.theme-dark .syllabus li {
  color: #cfe5ff;
}
/* 反白主題 */
.theme-light {
  background: #fff;
  color: #1f2937;
}
.theme-light .modal-header {
  border-bottom: 1px solid #79C0F6;
}
.theme-light .modal-title {
  color: #374151;
}
.theme-light .modal-title-img {
  width: 100%;
  max-width: 260px;
}
.theme-light .modal-bottom-cstitle .Cs-subTL {
  color: #fff;
}
.theme-light .syllabus h4 {
  color: #1f9dfc;
}
.theme-light .syllabus li {
  color: #374151;
}
/* 讓 header 的圖與文字保持你要的布局 */
.modal-header.d-flex {
  padding: 1rem 1rem 0;
}
/*END課程內頁*/
/* 摺疊區塊 */
.btn-open {
  color: #007dd1;
  padding: 5px 20px;
  margin-top: 15px;
  letter-spacing: 1px;
  border-radius: 0px;
  border: 0.5px solid #007dd1;
}
.btn-open2 {
  background-color: #720D0E;
  border: 0.5px solid #720D0E;
  border-radius: 0px;
  padding: 3px 20px;
  margin-top: 15px;
}
.btn-open-w {
  color: #fff;
  border: 0.5px solid #fff;
  border-radius: 0px;
  padding: 3px 20px;
  margin-top: 15px;
}
.Wsp_ConTL {
  font-size: 1em;
  padding: 0px;
  border: 0px solid #720D0E;
}
.Wsp_ConSub {
  color: #ffffff;
  background-color: #720D0E;
  padding: 3px 15px;
  letter-spacing: 1.5px;
}
.Wsp_ConBt {
  text-align: right;
  padding: 15px 0 35px 0;
  border-bottom: 0.5px solid #ccc;
}
.Wsp_Con_text-container {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 限制顯示的行數 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: max-height 0.5s ease; /* 添加過渡效果 */
}
.Wsp_Con_text-container[data-lines="5"] {
  /* 覆寫：只有需要特別行數的加 data-lines */
  -webkit-line-clamp: 5;
}
.Wsp_Con_text-container.expanded {
  -webkit-line-clamp: unset; /* 移除行數限制，顯示完整文本 */
}
.Wsp_Con_text-wrapper {
  margin-bottom: 10px; /* 每個區塊之間的距離 */
}
.UniList .owl-controls .owl-nav [class*=owl-] {
  color: #fff;
  font-size: 1.2em;
  margin: 5px;
  padding: 4px 13px;
  background: #000;
  display: inline-block;
  cursor: pointer;
  -webkit-border-radius: 300px;
  -moz-border-radius: 300px;
  border-radius: 300px;
  align-content: center;
}
/* END摺疊區塊 */
.Alumni_TxtBox02 {
  color: #333;
  margin: 5px;
  border: 1px solid #000000;
  border-bottom: 6px solid #000000; /* 粗下框線，可自訂顏色 */
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
  height: 100%; /* 保證與 Bootstrap .h-100 配合一致高度 */
}
.Alumni_TxtBox02 > a {
  color: #333
}
/* Hover 效果 */
.Alumni_TxtBox02:hover {
  transform: translateY(-3px);
  background-color: rgba(243, 219, 240, 0.1);
  cursor: pointer;
}
.Alumni_TxtBox02_subtxt {
  font-size: 0.8em;
}
.Alumni_BtBox02 {
  background: linear-gradient(to right, rgba(255, 123, 172, 1) 0%, rgba(0, 255, 255, 0.8) 100%);
  padding: 20px;
  display: block;
  color: #000;
  font-weight: 700;
  letter-spacing: 1px;
}
.Alumni_TxtBox02:hover > div:nth-child(2) > a > span.Alumni_BtBox02 {
  color: #fff;
  text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
  background: linear-gradient(to right, rgba(0, 255, 255, 0.8) 0%, rgba(255, 123, 172, 1) 100%);
}
#TeacherList > div > div.owl-controls > div.owl-dots {
  margin-top: -32px;
}
#TeacherList > div > div.owl-controls > div.owl-nav > div.owl-prev {
  margin-right: 65% !important;
}
#TeacherList > .owl-theme .owl-controls .owl-nav [class*=owl-] {
  color: #fff;
  font-size: 1.2em;
  margin: 5px;
  padding: 4px 13px;
  background: #d6b680;
  display: inline-block;
  cursor: pointer;
  -webkit-border-radius: 300px;
  -moz-border-radius: 300px;
  border-radius: 300px;
  align-content: center;
}
.bg-darkpurple {
  background-color: #2c277d;
}
#PdSk_CSListArea > div > div.owl-controls {
  text-align: center; /*display:inline-block;*/
}
#PdSk_CSListArea > .owl-theme .owl-controls .owl-nav [class*=owl-] {
  color: #fff;
  font-size: initial;
  margin: 5px;
  padding: 10px 13px;
  line-height: 1em;
  background: #000;
  display: inline-block !important;
  cursor: pointer;
  -webkit-border-radius: 300px;
  -moz-border-radius: 300px;
  border-radius: 300px;
  border: 1px solid #000;
  display: inline-block;
  aspect-ratio: 1/1;
}
#PdSk_CSListArea > .owl-theme .owl-controls .owl-nav [class*=owl-]:hover {
  background: transparent;
  color: #000;
  text-decoration: none;
  display: inline-block;
}
/*#PdSk_CSListArea > .owl-theme .owl-controls .owl-nav .disabled {
opacity: 0;
    cursor: default;
	display: inline-block;
}

*/
/*#PdSk_CSListArea > div > div.owl-controls > div.owl-nav > div.owl-prev.disabled {
display: none !important;
}

#PdSk_CSListArea > div > div.owl-controls > div.owl-nav > div.owl-next.disabled {
display: none !important;
}

*/ /*學員職人*/
/*QA*/
.LightDisc > li {
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px dotted #d8cada;
}
.LightDisc > li::marker {
  color: #d8cada;
}
ul.mb-3.LightDisc {
  padding-left: 1.5rem;
}
/* ===============================
   Accordion 外框：一整塊大卡片
================================ */
.accordion {
  border-radius: 14px;
  overflow: hidden;
  background-color: #DADBF1;
  box-shadow: none;
}
/* ===============================
   每一列 item：不要各自圓角 / 不要間距
================================ */
.accordion-item {
  border: 0;
  border-radius: 0;
  margin: 0; /* 關鍵：不要 item 間距 */
  background-color: transparent;
  box-shadow: none;
}
/* 內部分隔線（只有中間有線） */
.accordion-item + .accordion-item {
  border-top: 1px solid #8A8FE3; /* 關鍵：改成 top 線，像清單分隔 */
}
/* ===============================
   標題按鈕（收合/展開同色系）
================================ */
.accordion-button {
  background-color: #DADBF1;
  color: #1B13A5;
  font-weight: 600;
  padding: 18px 22px;
  border: none;
  box-shadow: none !important;
  font-size: 1.2rem;
  letter-spacing: 0.3px;
  transition: background-color .25s ease, color .25s ease;
}
/* 收合狀態 */
.accordion-button.collapsed {
  background-color: #DADBF1;
  color: #1B13A5;
}
/* Hover */
.accordion-button:hover {
  background-color: #E6E7F7;
  color: #1B13A5;
}
/* 展開狀態（仍維持同底色，只做微差） */
.accordion-button:not(.collapsed) {
  background-color: #DADBF1;
  color: #1B13A5;
}
/* 移除 focus 外框 */
.accordion-button:focus {
  box-shadow: none !important;
}
/* ===============================
   內容區
================================ */
.accordion-body {
  background-color: #ffffff;
  color: #2b2b2b;
  padding: 20px 24px;
  line-height: 1.7;
  font-size: 1.05em;
}
/* ===============================
   箭頭顏色（深藍）
================================ */
.accordion-button::after {
  filter: invert(12%) sepia(85%) saturate(4500%) hue-rotate(235deg);
  opacity: 1;
}
/* （可選）讓按鈕左右邊不要有 Bootstrap 預設圓角感 */
.accordion-button {
  border-radius: 0 !important;
}
.ServiceBox {
  padding: 0 10px 0 20px;
  border-left: 1px solid #9aa8e8;
}
.S-num {
  font-size: 3em;
  font-weight: 300;
  color: #9aa8e8;
  padding-right: 15px;
}
.S-title {
  font-weight: 800;
  font-size: 1.2em;
  color: #eca243;
}
/*==================================
圖片說明
==================================*/
.ec-portfolio-note {
  margin-top: 10px;
  font-size: clamp(.8125rem, .77rem + .2vw, .9375rem);
  line-height: 1.6;
  color: #666d79;
}
.e38_portfolioBk {
  background-color: #222;
  background-image: url("../images/client/event/e38/38-bk-portfolio-s.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left bottom;
  padding: 5% 0;
  background-attachment: scroll;
}
/* EC EDU HERO｜Bootstrap 5 Mobile First */
.ec-edu-wrap {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 56px 0 40px;
  background: #fff;
}
.ec-edu-wrap::before, .ec-edu-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
}
.ec-edu-wrap::before {
  background: url("./images/edu-hero.jpg") 65% center / cover no-repeat;
}
.ec-edu-wrap::after {
  z-index: -1;
  background: linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .35) 54%, rgba(255, 255, 255, 0) 100%);
}
.ec-edu-content {
  position: relative;
  z-index: 2;
}
/* 標題：40px∼92.8px */
.ec-edu-title {
  margin: 0 0 18px;
  color: #171b24;
  font-family: "Noto Sans TC", sans-serif;
  font-size: clamp(2.5rem, calc(1.4rem + 4.5vw), 5.8rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: .02em;
}
.ec-edu-title-highlight {
  color: #063095;
}
.ec-edu-title-line {
  display: block;
}
/* 說明文字：17.6px∼24px */
.ec-edu-description {
  max-width: 680px;
  margin: 0 0 24px;
  color: #333;
  font-size: clamp(1.1rem, calc(.95rem + .55vw), 1.5rem);
  line-height: 1.4;
  letter-spacing: .02em;
}
/* 功能項目 */
.ec-edu-feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 520px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
/* 功能文字：14.72px∼19.2px */
.ec-edu-feature-item {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 11px 12px;
  color: #252b36;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(6, 48, 149, .08);
  border-radius: 9px;
  box-shadow: 0 5px 15px rgba(27, 45, 85, .09);
  font-size: clamp(.92rem, calc(.82rem + .35vw), 1.2rem);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}
.ec-edu-feature-item i {
  flex: 0 0 auto;
  margin-right: 8px;
  color: #063095;
  font-size: clamp(1.1rem, calc(1rem + .3vw), 1.3rem);
}
/* CTA：16px∼17.28px */
.ec-edu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  margin-bottom: 34px;
  padding: 12px 22px;
  color: #fff;
  background: #063095;
  border: 1px solid #063095;
  border-radius: 9px;
  box-shadow: 0 8px 18px rgba(6, 48, 149, .2);
  font-size: clamp(1rem, calc(.97rem + .12vw), 1.08rem);
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  transition: .25s ease;
}
.ec-edu-btn:hover, .ec-edu-btn:focus {
  color: #fff;
  background: #041f65;
  border-color: #041f65;
  box-shadow: 0 10px 24px rgba(6, 48, 149, .28);
  transform: translateY(-2px);
}
.ec-edu-btn i {
  font-size: .9em;
}
/* 適用科系：16px∼19.2px */
.ec-edu-subjects {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  font-size: clamp(1rem, calc(.9rem + .3vw), 1.2rem);
  line-height: 1.8;
}
.ec-edu-subjects-label {
  flex: 0 0 auto;
  color: #063095;
  font-weight: 800;
  white-space: nowrap;
}
.ec-edu-subjects-text {
  color: #343842;
}
.ec-edu-subjects-text span {
  display: inline-block;
}
/* EC EDU STEP｜Bootstrap 5 Mobile First */
.ec-edu-step {
  position: relative;
  overflow: hidden;
  padding: 64px 0;
  background: #fff;
}
.ec-edu-step::before, .ec-edu-step::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: #eaf6ff;
  filter: blur(10px);
  opacity: .6;
  pointer-events: none;
}
.ec-edu-step::before {
  left: -120px;
  bottom: -90px;
}
.ec-edu-step::after {
  right: -100px;
  top: -100px;
}
.ec-edu-step-title {
  position: relative;
  z-index: 1;
  margin: 0 0 36px;
  color: #171b24;
  font-family: "Noto Sans TC", sans-serif;
  font-size: clamp(2rem, calc(1.5rem + 1.8vw), 3.3rem);
  font-weight: 800;
  line-height: 1.3;
}
.ec-edu-card {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 34px 22px;
  background: #fff;
  border: 1px solid rgba(6, 48, 149, .06);
  border-radius: 18px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .08);
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease;
}
.ec-edu-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .12);
}
.ec-edu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #eef3ff;
}
.ec-edu-icon i {
  color: #063095;
  font-size: 2rem;
}
.ec-edu-card-title {
  margin: 0 0 12px;
  color: #063095;
  font-family: "Noto Sans TC", sans-serif;
  font-size: clamp(1.25rem, calc(1.05rem + .3vw), 1.6rem);
  font-weight: 500;
  line-height: 1.35;
}
.ec-edu-card-text {
  margin: 0;
  color: #555;
  font-size: clamp(1rem, calc(.9rem + .15vw), 1.2rem);
  line-height: 1.8;
}
.ec-edu-step-bottom {
  position: relative;
  z-index: 1;
  margin: 42px 0 0;
  color: #063095;
  font-size: clamp(1.2rem, calc(1.2rem + .3vw), 1.6rem);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.ec-edu-step .col:nth-child(1) .ec-edu-icon {
  background: #eef3ff;
}
.ec-edu-step .col:nth-child(1) .ec-edu-icon i {
  color: #063095;
}
.ec-edu-step .col:nth-child(2) .ec-edu-icon {
  background: #e9f8f6;
}
.ec-edu-step .col:nth-child(2) .ec-edu-icon i {
  color: #148f88;
}
.ec-edu-step .col:nth-child(3) .ec-edu-icon {
  background: #f2ecff;
}
.ec-edu-step .col:nth-child(3) .ec-edu-icon i {
  color: #8358e8;
}
.ec-edu-step .col:nth-child(4) .ec-edu-icon {
  background: #fff0e8;
}
.ec-edu-step .col:nth-child(4) .ec-edu-icon i {
  color: #ef7f35;
}
/* ==================================================
   國內設計升學｜課程內容區塊
   Bootstrap 5／Mobile First
================================================== */
.ec-admission-guide {
  padding: 42px 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(16, 104, 178, 0.07), transparent 42%), #fff;
  font-family: "Noto Sans TC", sans-serif;
  color: #171c2d;
}
/* 區塊標題 */
.ec-guide-title {
  margin: 0 0 20px;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
}
/* Bootstrap 欄位等高 */
.ec-guide-col {
  display: flex;
}
/* 卡片 */
.ec-guide-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(28, 44, 77, 0.08);
  border-radius: 14px;
  box-shadow: 0 7px 22px rgba(33, 48, 81, 0.09);
  transition:
    transform 0.25s ease, box-shadow 0.25s ease;
}
.ec-guide-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(33, 48, 81, 0.14);
}
/* 卡片文字 */
.ec-guide-content {
  flex: 1;
  padding: 14px 11px 13px;
}
.ec-guide-heading {
  margin-bottom: 10px;
}
.ec-guide-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  margin-right: 10px;
  border-radius: 50%;
  font-size: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
}
.ec-guide-heading h3 {
  margin: 0;
  font-size: clamp(1.2rem, 1.2rem + 0.3vw, 1.5rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.01em;
}
.ec-guide-content p {
  margin: 0;
  font-size: clamp(0.8125rem, 0.77rem + 0.2vw, 0.9375rem);
  font-weight: 400;
  line-height: 1.65;
  color: #555c6d;
}
/* ICON 配色 */
.ec-guide-icon--blue {
  color: #2d61c5;
  background: #eaf0fd;
}
.ec-guide-icon--green {
  color: #158e89;
  background: #e5f5f3;
}
.ec-guide-icon--purple {
  color: #8055cb;
  background: #f0eafa;
}
.ec-guide-icon--orange {
  color: #eb7540;
  background: #fff0e8;
}
/* 卡片圖片 */
.ec-guide-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  object-position: center;
}
/*==================================
作品集成果區塊
==================================*/
.ec-portfolio-support {
  padding: 48px 0;
  background: #fff;
  font-family: "Noto Sans TC", sans-serif;
  color: #171c2d;
}
/*==================================
特色列表
==================================*/
.ec-portfolio-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.ec-portfolio-item {
  gap: 14px;
}
.ec-portfolio-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #edf3ff;
  color: #356ac3;
  font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem);
}
.ec-portfolio-item:nth-child(2) .ec-portfolio-icon {
  background: #e8f7f5;
  color: #38a7a2;
}
.ec-portfolio-item:nth-child(3) .ec-portfolio-icon {
  background: #f1ebff;
  color: #8064c9;
}
.ec-portfolio-item:nth-child(4) .ec-portfolio-icon {
  background: #fff0e8;
  color: #ed7d42;
}
.ec-portfolio-content {
  padding-top: 2px;
}
.ec-portfolio-content h3 {
  margin: 0 0 5px;
  font-size: clamp(1rem, .92rem + .3vw, 1.2rem);
  font-weight: 700;
  line-height: 1.45;
}
.ec-portfolio-content p {
  margin: 0;
  font-size: clamp(.875rem, .82rem + .2vw, 1rem);
  line-height: 1.65;
  color: #5d6370;
}
/*==================================
作品圖片
==================================*/
.ec-portfolio-image {
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  box-shadow: 0 5px 16px rgba(20, 31, 55, .1);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ec-portfolio-image:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(20, 31, 55, .16);
}


/* ==================================================
   原 HTML <style> 整併
================================================== */
@media (max-width: 767px) {
  .g-recaptcha {
    transform: scale(0.92) translate(0px);
    -webkit-transform: scale(0.92) translate(0px);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
  }
  .Prg_BoxCont {
    padding-left: 25px;
    text-align: left;
  }
}
/* 背景影片容器 */
#video-container {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #000;
  overflow: hidden;
}
/* 背景影片 iframe */
#youtube-player {
  position: absolute;
  width: 100%;
  height: 100vw; /* 16:9 的比例，高度 = 寬度 * 9/16 */
  min-height: 110vh; /* 確保影片至少跟視窗一樣高 */
  left: 50%;
  top: 35%;
  transform: translate(-50%, -56%); /* 讓影片置中 */
  object-fit: cover;
  visibility: hidden; /* 預設隱藏，等影片載入完才顯示 */
}
/* 影片載入前顯示的背景圖 */
#video-placeholder {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url('https://img.youtube.com/vi/bm9O_lxlOJU/maxresdefault.jpg') no-repeat center center;
  background-size: cover;
}
/* 點擊播放的影片區塊 */
.video-wrapper {
  cursor: pointer;
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 800px;
  margin: 20px auto;
  text-align: center;
  color: white;
  z-index: 3;
}
/*影片用*/
.video-foreground {
  position: relative;
  width: 100%;
  height: 0;
  margin-left: 0;
  padding-bottom: 110%;
  background-color: #000000;
  overflow: hidden;
}
.video-foreground > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}
@media (min-width: 768px) {
  /*影片用*/
  /* 背景影片 iframe */
  #youtube-player {
    position: absolute;
    width: 150%;
    height: 100vw; /* 16:9 的比例，高度 = 寬度 * 9/16 */
    min-height: 110vh; /* 確保影片至少跟視窗一樣高 */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* 讓影片置中 */
    object-fit: cover;
    visibility: hidden; /* 預設隱藏，等影片載入完才顯示 */
  }
  .video-foreground {
    position: relative;
    width: 100%;
    height: 0;
    margin-left: 0px;
    padding-bottom: 56.25%;
    background-color: #000000;
    overflow: hidden;
  }
  .video-foreground > iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-top: -60px;
  }
}
.wrap {
  overflow: hidden;
}
.scroll-link {
  display: none; /* 初始隱藏 */
  cursor: pointer;
  opacity: 0; /* 初始透明度 */
  transition: opacity 1s ease-in-out; /* 淡入效果 */
}
.scroll-link.show {
  display: block;
  opacity: 1; /* 顯示時完全不透明 */
}
.btn-btfixBk {
  position: fixed;
  bottom: 0px;
  right: 0px;
  font-size: 16px;
  padding: 20px 50px 35px 50px;
  background-color: #DC5F00;
  color: #222;
  width: 100%;
  text-decoration: none;
  text-align: center;
  z-index: 999;
  font-weight: 800;
  font-size: 1.2em;
}
.scroll-link:hover {
  background-color: #7e1818;
  color: #fff;
}
/*驗證碼*/
.verify-box {
  margin-bottom: 6px;
}
.verify-code {
  display: inline-block;
  width: 90px;
  padding: 6px 8px;
  border: 1px solid #ccc;
  background: #fff;
  font-size: 20px;
  letter-spacing: 3px;
  text-align: center;
  font-weight: bold;
  border-radius: 4px;
  user-select: none;
}
.verify-refresh {
  margin-left: 8px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #666;
}
.verify-refresh:hover {
  color: #333;
}
/* ==================================================
   原 HTML inline style 整併
================================================== */
.ec-inline-001 {
  display: none;
}
.ec-inline-002 {
  display: none;
  visibility: hidden;
}
.ec-inline-003 {
  right: 0;
  top: calc(125%/2);
  z-index: 666;
  position: fixed;
  font-size: 12px;
  border-radius: .3rem;
}
.ec-inline-004 {
  border-top-right-radius: 0px;
  padding: 10px 8px;
  box-sizing: border-box;
}
.ec-inline-005 {
  width: 30px;
  vertical-align: middle;
}
.ec-inline-006 {
  border-bottom-right-radius: 0px;
  padding: 10px 8px;
  font-size: 18px;
  box-sizing: border-box;
}
.ec-inline-007 {
  right: 0;
  top: calc(80%/2);
  z-index: 666;
  position: fixed;
}
.ec-inline-008 {
  border-top-right-radius: 0;
  padding: 15px 8px 15px 8px;
  line-height: 1.3em;
  font-size: 20px;
}
.ec-inline-009 {
  width: 30px;
  vertical-align: middle;
  margin-bottom: 6px;
}
.ec-inline-010 {
  border-bottom-right-radius: 0px;
  padding: 15px 8px 15px 8px;
  line-height: 1.3em;
  font-size: 20px;
}
.ec-inline-011 {
  --fa-animation-iteration-count: 3;
  --fa-animation-timing: ease-in-out;
}
.ec-inline-012 {
  padding-bottom: 130px;
  right: 7px;
}
.ec-inline-013 {
  padding: .4rem .45rem;
  font-size: 0.8rem;
  line-height: 1;
}
.ec-inline-014 {
  position: absolute;
  z-index: -9999;
}
.ec-inline-015 {
  display: block;
}
.ec-inline-016 {
  flex-direction: row;
}

.ec-inline-018 {
  background-color: #dce6ff;
}
.ec-inline-019 {
  background-image: url(../images/background/background_crossword.png);
  background-repeat: repeat;
}
.ec-inline-020 {
  color: #fff;
}
.ec-inline-021 {
  background-color: rgba(0, 0, 0, 0.7);
}
.ec-inline-022 {
  color: #f1be65;
}
.ec-inline-023 {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 8px;
  padding: 16px 18px;
  height: 100%;
}
.ec-inline-024 {
  font-weight: 700;
}
.ec-inline-025 {
  color: #f1be65;
  font-size: .85em;
}
.ec-inline-026 {
  color: #f1be65;
  font-size: .9em;
}
.ec-inline-027 {
  background-color: #edeef4;
  padding: 4% 5%;
}
.ec-inline-028 {
  color: ##006358;
}
.ec-inline-029 {
  padding: 20px 22px;
  background-color: #fff;
  box-shadow: 1px 2px 5px rgba(0, 0, 0, .08);
  border-radius: 6px;
  height: 100%;
}
.ec-inline-030 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.ec-inline-031 {
  border-radius: 50%;
  object-fit: cover;
}
.ec-inline-032 {
  color: #006358;
  font-size: .85em;
}
.ec-inline-033 {
  font-size: .9em;
  color: #555;
  margin: 0;
}
.ec-inline-034 {
  margin-left: 10px;
}
.ec-inline-035 {
  height: 155px;
}
.ec-inline-036 {
  background-color: #dadbf145;
}
.ec-inline-037 {
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 60px;
  clip-path: ellipse(50% 100% at 50% 0);
}
.ec-inline-038 {
  padding: 3% 0;
}
.ec-inline-039 {
  font-family: Noto Sans CJK TC;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: 2px;
  margin: 10px 0 0px 0px;
}
.ec-inline-040 {
  font-family: Noto Sans CJK TC;
  font-size: 2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: 2px;
  margin: 10px 0 0px 0px;
}
.ec-inline-041 {
  font-size: 12px;
  color: #CCC;
}
.ec-inline-042 {
  font-family: Noto Sans CJK TC;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: 2px;
  margin: 10px 0 25px 0px;
}
.ec-inline-043 {
  font-size: 0.8em;
  color: #CCC;
}
.ec-inline-044 {
  font-size: 20px;
}
.ec-inline-045 {
  padding: 6px 10px;
  background-color: #004CD3;
  color: #fff;
}
.ec-inline-046 {
  color: #004CD3;
}
.ec-inline-047 {
  margin-top: 5px;
}
.ec-inline-048 {
  color: #FEB204;
}
.ec-inline-049 {
  margin-top: 15px;
}
.ec-inline-050 {
  margin-top: 20px;
}
.ec-inline-051 {
  min-width: 60px;
}
.ec-inline-052 {
  margin-left: 10px;
  margin-top: -15px;
}
.ec-inline-053 {
  margin-left: 15px;
}
.ec-inline-054 {
  padding: 8px 30px;
}
.ec-inline-055 {
  margin: 15px 0;
}
.ec-inline-056 {
  padding: 10px 30px;
}
.ec-inline-057 {
  font-size: 0.9em;
  color: #888;
}
.ec-inline-058 {
  background-color: #fff;
}
.ec-inline-059 {
  margin: 20px 0;
}
.ec-inline-060 {
  padding: 20px 15px 10px 15px;
}
.ec-inline-061 {
  padding-right: 12px;
}
.ec-inline-062 {
  padding-right: 8px;
}
.ec-inline-063 {
  padding-right: 15px;
}
.ec-inline-064 {
  padding-bottom: 80px;
}

.ec-inline-017 {
  background-image: url(../images/client/course/edu/edu-mbacks.jpg);
  background-repeat: no-repeat;
  background-size: cover;
	background-position: right;
}

@media (min-width: 768px) and (max-width: 979px) {
  .ec-hdtitile {
    font-size: 2.5em;
  }
  .e38_portfolioBk {
    background-image: url("../images/client/event/e38/38-bk-portfolio-l.jpg");
    background-size: contain;
    background-repeat: repeat-y;
    background-position: left center;
    background-attachment: fixed;
  }
	.ec-inline-017 {
  background-image: url(../images/client/course/edu/edu-mback.jpg);
  background-repeat: no-repeat;
  background-size: cover;
	background-position:left;
}
}
@media (min-width: 980px) and (max-width: 1199px) {
  .ec-hdtitile {
    font-size: 2.5em;
  }
  .e38_portfolioBk {
    background-image: url("../images/client/event/e38/38-bk-portfolio-l.jpg");
    background-size: contain;
    background-repeat: repeat-y;
    background-position: left center;
    background-attachment: fixed;
  }
	.ec-inline-017 {
  background-image: url(../images/client/course/edu/edu-mback.jpg);
  background-repeat: no-repeat;
  background-size: cover;
	background-position:left;
}
}
@media (min-width: 1200px) {
  #PdSk_CSListArea > div > div.owl-controls {
    text-align: center;
  }
  .ec-hdtitile {
    font-size: 2.5em;
  }
  .e38_portfolioBk {
    background-image: url("../images/client/event/e38/38-bk-portfolio-l.jpg");
    background-size: contain;
    background-repeat: repeat-y;
    background-position: left center;
    background-attachment: fixed;
  }
	.ec-inline-017 {
  background-image: url(../images/client/course/edu/edu-mback.jpg);
  background-repeat: no-repeat;
  background-size: cover;
	background-position:left;
}
}
@media (min-width: 1400px) {
  #PdSk_CSListArea > div > div.owl-controls {
    text-align: center;
  }
  .ec-hdtitile {
    font-size: 2.5em;
  }
  .e38_portfolioBk {
    background-image: url("../images/client/event/e38/38-bk-portfolio-l.jpg");
    background-size: contain;
    background-repeat: repeat-y;
    background-position: left center;
    background-attachment: fixed;
  }
	.ec-inline-017 {
  background-image: url(../images/client/course/edu/edu-mback.jpg);
  background-repeat: no-repeat;
  background-size: cover;
	background-position:left;
}
}
@media (min-width: 1600px) {
  .ec-hdtitile {
    font-size: 2.5em;
  }
}
/* ==================================================
   EC Education｜Typography System
   僅統一字級與文字層級，不調整圖片與版面
================================================== */
/* ---------- Hero ---------- */
.ec-edu-title {
  font-size: var(--ec-type-hero-title);
}
.ec-edu-description {
  font-size: var(--ec-type-hero-lead);
  line-height: 1.5;
}
.ec-edu-feature-item, .ec-edu-subjects, .ec-edu-btn {
  font-size: var(--ec-type-label);
}
.ec-edu-feature-item i {
  font-size: 1.15em;
}
/* ---------- 區塊標題 ---------- */
.ec-edu-step-title, .ec-guide-title, .ec-hdtitile {
  font-size: var(--ec-type-section-title);
  line-height: var(--ec-type-lh-title);
}
.ec-edu-step-bottom {
  font-size: var(--ec-type-section-lead);
  line-height: 1.6;
}
/* ---------- 卡片標題 ---------- */
.ec-edu-card-title, .ec-guide-heading h3, .ec-portfolio-content h3, .S-title {
  font-size: var(--ec-type-card-title);
  line-height: var(--ec-type-lh-title);
}
/* ---------- 卡片內文 ---------- */
.ec-edu-card-text, .ec-guide-content > div:not(.ec-guide-heading), .ec-portfolio-content p, .S-desc, .accordion-body {
  font-size: var(--ec-type-body);
  line-height: var(--ec-type-lh-body);
}
/*
   ec-guide 的實際內文使用 div，不是 p。
   保留 p selector，避免未來改回段落標籤時失去樣式。
*/
.ec-guide-content p {
  font-size: var(--ec-type-body);
  line-height: var(--ec-type-lh-body);
}
/* ---------- 補充文字 ---------- */
.field-note, .ec-portfolio-note, .Alumni_TxtBox02_subtxt {
  font-size: var(--ec-type-note);
  line-height: 1.65;
}
/* 作品方向比主內文稍弱，但不要小到難閱讀 */
.field-note {
  color: #4f596b;
  font-weight: 600;
}
/* ---------- FAQ ---------- */
.accordion-button {
  font-size: var(--ec-type-card-title02);
  line-height: 1.5;
}
/* ---------- 適合對象 ---------- */
.LightDisc .ec-subtitle {
  font-size: var(--ec-type-card-title02);
  line-height: var(--ec-type-lh-body);
  margin-bottom: 0;
}
/* ---------- 學習支持服務 ---------- */
.S-num {
  font-size: clamp(2.25rem, calc(1.9rem + 1vw), 3rem);
  line-height: 1;
}
/* ---------- 共用元件保留原層級 ---------- */
.CourseList .ec-card-text, .Wsp_ConTL, .Alumni_TxtBox02, .syllabus {
  font-size: var(--ec-type-body);
}
.Alumni_BtBox02, .btn-open, .btn-open2, .btn-open-w {
  font-size: var(--ec-type-label);
}
/* ---------- 原 inline 文字尺寸統一 ---------- */
/* 榜單學員資料與心得卡片補充資料 */
.ec-inline-025, .ec-inline-026, .ec-inline-032, .ec-inline-033, .ec-inline-041, .ec-inline-043, .ec-inline-057 {
  font-size: var(--ec-type-note);
  line-height: 1.6;
}
/* 原本 1.8rem／2rem 的表單或內容標題，統一為卡片標題層級 */
.ec-inline-039, .ec-inline-040 {
  font-size: var(--ec-type-card-title);
  line-height: var(--ec-type-lh-title);
}
/* 一般表單或說明文字 */
.ec-inline-042, .ec-inline-044 {
  font-size: var(--ec-type-body);
  line-height: var(--ec-type-lh-body);
}