.elementor-17907 .elementor-element.elementor-element-8971357{--display:flex;}.elementor-17907 .elementor-element.elementor-element-6a5e4d2{width:100%;max-width:100%;}.elementor-17907 .elementor-element.elementor-element-6a5e4d2 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-6a5e4d2 *//* =========================================================
   微新全人成長協會
   五大面向 × 五環共融互動模組
   渲染漸層質感完整版
   ========================================================= */

.ws-fivegrowth-section {
  position: relative !important;

  width: 100% !important;
  max-width: 1240px !important;
  min-width: 0 !important;

  margin: 0 auto !important;
  padding: 78px 24px 82px !important;

  box-sizing: border-box !important;
  overflow: hidden !important;

  font-family:
    "Noto Sans TC",
    "PingFang TC",
    "Microsoft JhengHei",
    sans-serif !important;

  color: #18304d !important;

  background:
    radial-gradient(
      circle at 8% 18%,
      rgba(191, 211, 235, 0.16) 0%,
      transparent 28%
    ),
    radial-gradient(
      circle at 48% 8%,
      rgba(236, 218, 173, 0.15) 0%,
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 22%,
      rgba(222, 177, 190, 0.13) 0%,
      transparent 28%
    ),
    radial-gradient(
      circle at 28% 82%,
      rgba(188, 220, 205, 0.13) 0%,
      transparent 30%
    ),
    radial-gradient(
      circle at 76% 84%,
      rgba(190, 211, 219, 0.13) 0%,
      transparent 30%
    ) !important;
}


/* =========================================================
   HEADER
   ========================================================= */

.ws-fivegrowth-section .ws5-header {
  position: relative !important;
  z-index: 5 !important;

  width: 100% !important;
  max-width: 780px !important;

  margin: 0 auto 58px !important;

  text-align: center !important;
}

.ws-fivegrowth-section .ws5-eyebrow {
  display: block !important;

  margin: 0 0 13px !important;

  color: #a97b2c !important;

  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;

  letter-spacing: 0.24em !important;
}

.ws-fivegrowth-section .ws5-main-title {
  margin: 0 0 18px !important;

  color: #18304d !important;

  font-family:
    "Noto Serif TC",
    "Noto Sans TC",
    "PingFang TC",
    serif !important;

  font-size: clamp(30px, 4vw, 45px) !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;

  letter-spacing: 0.04em !important;

  overflow-wrap: break-word !important;
}

.ws-fivegrowth-section .ws5-intro {
  width: 100% !important;
  max-width: 670px !important;

  margin: 0 auto !important;

  color: #6c7887 !important;

  font-size: 15px !important;
  line-height: 1.9 !important;
  font-weight: 400 !important;

  overflow-wrap: break-word !important;
}

.ws-fivegrowth-section .ws5-title-line {
  position: relative !important;

  width: 84px !important;
  height: 2px !important;

  margin: 26px auto 0 !important;

  border-radius: 999px !important;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      #c89d49 22%,
      #e4ce92 50%,
      #c89d49 78%,
      transparent 100%
    ) !important;
}

.ws-fivegrowth-section .ws5-title-line::after {
  content: "" !important;

  position: absolute !important;
  top: 50% !important;
  left: 50% !important;

  width: 7px !important;
  height: 7px !important;

  border-radius: 50% !important;

  background: #d4af37 !important;

  transform: translate(-50%, -50%) !important;

  box-shadow:
    0 0 0 5px rgba(212, 175, 55, 0.08),
    0 0 18px rgba(212, 175, 55, 0.28) !important;
}


/* =========================================================
   RADIO
   ========================================================= */

.ws-fivegrowth-section .ws5-radio {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  opacity: 0 !important;

  pointer-events: none !important;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.ws-fivegrowth-section .ws5-interactive-row {
  position: relative !important;
  z-index: 2 !important;

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

  width: 100% !important;
  min-width: 0 !important;

  gap: clamp(40px, 6vw, 82px) !important;
}

.ws-fivegrowth-section .ws5-left {
  flex: 1 1 520px !important;

  width: 100% !important;
  min-width: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.ws-fivegrowth-section .ws5-right {
  flex: 1 1 520px !important;

  width: 100% !important;
  min-width: 0 !important;
}


/* =========================================================
   FIVE RINGS
   ========================================================= */

.ws-fivegrowth-section .ws5-rings {
  position: relative !important;

  width: min(100%, 520px) !important;

  aspect-ratio: 520 / 350 !important;

  margin: 0 auto !important;

  isolation: isolate !important;
}


/* =========================================================
   單一環基礎
   ========================================================= */

.ws-fivegrowth-section .ws5-ring {
  position: absolute !important;

  width: 35.5% !important;
  aspect-ratio: 1 / 1 !important;

  border-radius: 50% !important;

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

  box-sizing: border-box !important;

  cursor: pointer !important;
  user-select: none !important;

  text-align: center !important;

  overflow: hidden !important;

  border: 3px solid var(--ws5-color) !important;

  background:
    radial-gradient(
      circle at 27% 19%,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.60) 13%,
      rgba(255, 255, 255, 0.20) 28%,
      transparent 48%
    ),
    radial-gradient(
      circle at 80% 76%,
      var(--ws5-glow) 0%,
      transparent 38%
    ),
    radial-gradient(
      circle at 12% 78%,
      var(--ws5-soft) 0%,
      transparent 43%
    ),
    linear-gradient(
      145deg,
      var(--ws5-bg1) 0%,
      var(--ws5-bg2) 42%,
      var(--ws5-bg3) 72%,
      var(--ws5-bg4) 100%
    ) !important;

  box-shadow:
    inset 0 12px 28px rgba(255, 255, 255, 0.48),
    inset 0 -12px 24px rgba(255, 255, 255, 0.10),
    0 18px 44px rgba(24, 48, 77, 0.09),
    0 0 0 1px rgba(255, 255, 255, 0.64) !important;

  -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
  backdrop-filter: blur(10px) saturate(1.08) !important;

  transition:
    transform 0.35s cubic-bezier(.2,.8,.2,1),
    opacity 0.3s ease,
    box-shadow 0.35s ease,
    filter 0.35s ease,
    border-color 0.35s ease !important;
}


/* 上方珍珠高光 */

.ws-fivegrowth-section .ws5-ring::before {
  content: "" !important;

  position: absolute !important;

  top: 8% !important;
  left: 14% !important;

  width: 48% !important;
  height: 27% !important;

  border-radius: 50% !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.68) 0%,
      rgba(255,255,255,0.10) 100%
    ) !important;

  filter: blur(6px) !important;

  opacity: 0.70 !important;

  pointer-events: none !important;
}


/* 細緻內圈流光 */

.ws-fivegrowth-section .ws5-ring::after {
  content: "" !important;

  position: absolute !important;

  inset: 5px !important;

  border-radius: 50% !important;

  border:
    1px solid rgba(255, 255, 255, 0.40) !important;

  box-shadow:
    inset 0 0 16px rgba(255,255,255,0.24) !important;

  pointer-events: none !important;
}


/* =========================================================
   五環渲染配色
   ========================================================= */


/* 01 全人成長：珍珠霧藍 */

.ws-fivegrowth-section .ws5-ring-growth {
  --ws5-color: #8ea5bf;

  --ws5-bg1: rgba(248, 251, 255, 0.96);
  --ws5-bg2: rgba(226, 235, 246, 0.90);
  --ws5-bg3: rgba(198, 214, 232, 0.72);
  --ws5-bg4: rgba(166, 190, 216, 0.54);

  --ws5-soft: rgba(181, 205, 230, 0.35);
  --ws5-glow: rgba(128, 166, 209, 0.32);

  top: 1% !important;
  left: 0 !important;

  z-index: 5 !important;
}


/* 02 教育培力：香檳金 */

.ws-fivegrowth-section .ws5-ring-education {
  --ws5-color: #c3ae82;

  --ws5-bg1: rgba(255, 253, 247, 0.97);
  --ws5-bg2: rgba(247, 239, 220, 0.92);
  --ws5-bg3: rgba(228, 211, 175, 0.73);
  --ws5-bg4: rgba(204, 180, 132, 0.52);

  --ws5-soft: rgba(235, 217, 179, 0.38);
  --ws5-glow: rgba(204, 167, 93, 0.28);

  top: 1% !important;
  left: 32.25% !important;

  z-index: 4 !important;
}


/* 03 數位共學：玫瑰晶紅 */

.ws-fivegrowth-section .ws5-ring-digital {
  --ws5-color: #b85f74;

  --ws5-bg1: rgba(255, 248, 250, 0.97);
  --ws5-bg2: rgba(244, 223, 229, 0.92);
  --ws5-bg3: rgba(222, 179, 190, 0.74);
  --ws5-bg4: rgba(190, 112, 132, 0.55);

  --ws5-soft: rgba(225, 176, 190, 0.36);
  --ws5-glow: rgba(188, 88, 116, 0.30);

  top: 1% !important;
  left: 64.5% !important;

  z-index: 3 !important;
}


/* 04 身心健康：翡翠玉石綠 */

.ws-fivegrowth-section .ws5-ring-health {
  --ws5-color: #91b5a4;

  --ws5-bg1: rgba(248, 253, 250, 0.97);
  --ws5-bg2: rgba(225, 240, 233, 0.92);
  --ws5-bg3: rgba(193, 219, 207, 0.74);
  --ws5-bg4: rgba(150, 190, 171, 0.53);

  --ws5-soft: rgba(194, 224, 210, 0.38);
  --ws5-glow: rgba(101, 164, 135, 0.29);

  top: 39.5% !important;
  left: 16.2% !important;

  z-index: 2 !important;
}


/* 05 公益共好：冰川灰青 */

.ws-fivegrowth-section .ws5-ring-welfare {
  --ws5-color: #9baeb7;

  --ws5-bg1: rgba(249, 252, 253, 0.97);
  --ws5-bg2: rgba(228, 238, 241, 0.92);
  --ws5-bg3: rgba(199, 216, 222, 0.74);
  --ws5-bg4: rgba(157, 184, 194, 0.54);

  --ws5-soft: rgba(198, 219, 225, 0.38);
  --ws5-glow: rgba(112, 160, 174, 0.28);

  top: 39.5% !important;
  left: 48.45% !important;

  z-index: 1 !important;
}


/* =========================================================
   環內內容
   ========================================================= */

.ws-fivegrowth-section .ws5-ring-content {
  position: relative !important;
  z-index: 3 !important;

  width: 72% !important;
  min-width: 0 !important;

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

  color: var(--ws5-color) !important;

  pointer-events: none !important;
}

.ws-fivegrowth-section .ws5-ring-icon {
  display: block !important;

  width: clamp(19px, 4.4vw, 28px) !important;
  height: clamp(19px, 4.4vw, 28px) !important;

  margin: 0 0 7px !important;

  color: var(--ws5-color) !important;

  filter:
    drop-shadow(
      0 3px 5px rgba(25, 45, 66, 0.08)
    ) !important;

  transition:
    transform 0.3s ease,
    filter 0.3s ease !important;
}

.ws-fivegrowth-section .ws5-ring-title {
  display: block !important;

  color: #5b6877 !important;

  font-family:
    "Noto Serif TC",
    "Noto Sans TC",
    serif !important;

  font-size: clamp(11px, 1.45vw, 15px) !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;

  letter-spacing: 0.04em !important;

  white-space: nowrap !important;

  text-shadow:
    0 1px 0 rgba(255,255,255,0.75) !important;
}

.ws-fivegrowth-section .ws5-ring-en {
  display: block !important;

  max-width: 100% !important;

  margin-top: 4px !important;

  color: rgba(92, 108, 122, 0.57) !important;

  font-size: clamp(6px, 0.75vw, 8px) !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;

  letter-spacing: 0.08em !important;

  white-space: nowrap !important;
}


/* =========================================================
   中央品牌章
   ========================================================= */

.ws-fivegrowth-section .ws5-core {
  position: absolute !important;

  top: 46% !important;
  left: 50% !important;

  width: 84px !important;
  height: 84px !important;

  transform: translate(-50%, -50%) !important;

  z-index: 30 !important;

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

  border-radius: 50% !important;

  background:
    radial-gradient(
      circle at 30% 22%,
      #ffffff 0%,
      #fffdf8 42%,
      #f8f0dd 74%,
      #ead5a7 100%
    ) !important;

  border:
    1px solid rgba(191, 150, 69, 0.74) !important;

  box-shadow:
    0 12px 30px rgba(35, 50, 65, 0.13),
    0 0 0 7px rgba(255, 255, 255, 0.50),
    inset 0 10px 18px rgba(255,255,255,0.55),
    inset 0 -8px 14px rgba(196,156,80,0.07),
    0 0 28px rgba(212,175,55,0.10) !important;

  pointer-events: none !important;
}

.ws-fivegrowth-section .ws5-core-brand {
  color: #ae812f !important;

  font-family:
    "Noto Serif TC",
    serif !important;

  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;

  letter-spacing: 0.10em !important;

  text-shadow:
    0 1px 0 #ffffff !important;
}

.ws-fivegrowth-section .ws5-core-text {
  margin-top: 4px !important;

  color: #314965 !important;

  font-size: 9px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;

  letter-spacing: 0.04em !important;
}


/* =========================================================
   圖下提示
   ========================================================= */

.ws-fivegrowth-section .ws5-ring-hint {
  margin: 17px 0 0 !important;

  color: #8b939d !important;

  font-size: 12px !important;
  line-height: 1.6 !important;

  text-align: center !important;

  letter-spacing: 0.05em !important;
}


/* =========================================================
   ACTIVE RINGS
   ========================================================= */

.ws-fivegrowth-section #ws5-tab-growth:checked
~ .ws5-interactive-row
.ws5-ring-growth,

.ws-fivegrowth-section #ws5-tab-education:checked
~ .ws5-interactive-row
.ws5-ring-education,

.ws-fivegrowth-section #ws5-tab-digital:checked
~ .ws5-interactive-row
.ws5-ring-digital,

.ws-fivegrowth-section #ws5-tab-health:checked
~ .ws5-interactive-row
.ws5-ring-health,

.ws-fivegrowth-section #ws5-tab-welfare:checked
~ .ws5-interactive-row
.ws5-ring-welfare {

  transform: scale(1.06) !important;

  z-index: 20 !important;

  opacity: 1 !important;

  filter:
    saturate(1.12)
    brightness(1.025) !important;
}


/* 每一環選中光影，獨立配色 */


/* 全人成長 */

.ws-fivegrowth-section #ws5-tab-growth:checked
~ .ws5-interactive-row
.ws5-ring-growth {
  border-color: #7895b7 !important;

  box-shadow:
    0 22px 48px rgba(87, 131, 181, 0.25),
    0 0 32px rgba(157, 190, 226, 0.22),
    inset 0 13px 27px rgba(255,255,255,0.66),
    inset 0 -10px 22px rgba(104,145,190,0.09),
    0 0 0 6px rgba(255,255,255,0.52) !important;
}


/* 教育培力 */

.ws-fivegrowth-section #ws5-tab-education:checked
~ .ws5-interactive-row
.ws5-ring-education {
  border-color: #b89a62 !important;

  box-shadow:
    0 22px 48px rgba(184, 145, 74, 0.23),
    0 0 32px rgba(231, 205, 150, 0.22),
    inset 0 13px 27px rgba(255,255,255,0.66),
    inset 0 -10px 22px rgba(188,147,72,0.08),
    0 0 0 6px rgba(255,255,255,0.52) !important;
}


/* 數位共學 */

.ws-fivegrowth-section #ws5-tab-digital:checked
~ .ws5-interactive-row
.ws5-ring-digital {
  border-color: #a94f67 !important;

  box-shadow:
    0 22px 48px rgba(177, 79, 106, 0.25),
    0 0 32px rgba(222, 154, 172, 0.23),
    inset 0 13px 27px rgba(255,255,255,0.64),
    inset 0 -10px 22px rgba(178,83,109,0.08),
    0 0 0 6px rgba(255,255,255,0.52) !important;
}


/* 身心健康 */

.ws-fivegrowth-section #ws5-tab-health:checked
~ .ws5-interactive-row
.ws5-ring-health {
  border-color: #7da792 !important;

  box-shadow:
    0 22px 48px rgba(87, 148, 119, 0.23),
    0 0 32px rgba(165, 211, 190, 0.22),
    inset 0 13px 27px rgba(255,255,255,0.66),
    inset 0 -10px 22px rgba(88,151,120,0.08),
    0 0 0 6px rgba(255,255,255,0.52) !important;
}


/* 公益共好 */

.ws-fivegrowth-section #ws5-tab-welfare:checked
~ .ws5-interactive-row
.ws5-ring-welfare {
  border-color: #819faa !important;

  box-shadow:
    0 22px 48px rgba(93, 139, 153, 0.23),
    0 0 32px rgba(170, 203, 213, 0.22),
    inset 0 13px 27px rgba(255,255,255,0.66),
    inset 0 -10px 22px rgba(92,142,157,0.08),
    0 0 0 6px rgba(255,255,255,0.52) !important;
}


/* =========================================================
   選中 Icon
   ========================================================= */

.ws-fivegrowth-section #ws5-tab-growth:checked
~ .ws5-interactive-row
.ws5-ring-growth .ws5-ring-icon,

.ws-fivegrowth-section #ws5-tab-education:checked
~ .ws5-interactive-row
.ws5-ring-education .ws5-ring-icon,

.ws-fivegrowth-section #ws5-tab-digital:checked
~ .ws5-interactive-row
.ws5-ring-digital .ws5-ring-icon,

.ws-fivegrowth-section #ws5-tab-health:checked
~ .ws5-interactive-row
.ws5-ring-health .ws5-ring-icon,

.ws-fivegrowth-section #ws5-tab-welfare:checked
~ .ws5-interactive-row
.ws5-ring-welfare .ws5-ring-icon {

  transform: scale(1.13) !important;

  filter:
    drop-shadow(
      0 4px 8px rgba(25, 45, 66, 0.12)
    ) !important;
}


/* =========================================================
   未選環
   ========================================================= */

.ws-fivegrowth-section #ws5-tab-growth:checked
~ .ws5-interactive-row
.ws5-ring:not(.ws5-ring-growth),

.ws-fivegrowth-section #ws5-tab-education:checked
~ .ws5-interactive-row
.ws5-ring:not(.ws5-ring-education),

.ws-fivegrowth-section #ws5-tab-digital:checked
~ .ws5-interactive-row
.ws5-ring:not(.ws5-ring-digital),

.ws-fivegrowth-section #ws5-tab-health:checked
~ .ws5-interactive-row
.ws5-ring:not(.ws5-ring-health),

.ws-fivegrowth-section #ws5-tab-welfare:checked
~ .ws5-interactive-row
.ws5-ring:not(.ws5-ring-welfare) {

  opacity: 0.70 !important;

  filter:
    saturate(0.80)
    brightness(1.015) !important;
}


/* =========================================================
   RIGHT CARDS
   ========================================================= */

.ws-fivegrowth-section .ws5-cards {
  position: relative !important;

  width: 100% !important;
  min-width: 0 !important;
}

.ws-fivegrowth-section .ws5-card {
  position: relative !important;

  display: none !important;

  width: 100% !important;
  max-width: 100% !important;

  padding: clamp(30px, 4vw, 42px) !important;

  box-sizing: border-box !important;

  border-radius: 26px !important;

  overflow: hidden !important;

  border:
    1px solid rgba(29, 52, 75, 0.07) !important;

  border-left:
    4px solid #c9a14d !important;

  background:
    radial-gradient(
      circle at 92% 5%,
      rgba(232, 214, 169, 0.16) 0%,
      transparent 36%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,0.97) 0%,
      rgba(253,251,246,0.96) 100%
    ) !important;

  box-shadow:
    0 25px 65px rgba(30, 48, 67, 0.085),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}


/* 卡片上方柔光 */

.ws-fivegrowth-section .ws5-card::before {
  content: "" !important;

  position: absolute !important;

  top: -90px !important;
  right: -80px !important;

  width: 220px !important;
  height: 220px !important;

  border-radius: 50% !important;

  background:
    radial-gradient(
      circle,
      rgba(235, 217, 174, 0.19) 0%,
      rgba(235, 217, 174, 0.05) 45%,
      transparent 70%
    ) !important;

  pointer-events: none !important;
}


/* =========================================================
   五張卡片個別淡色調
   ========================================================= */

.ws-fivegrowth-section .ws5-card-growth {
  border-left-color: #8ea5bf !important;

  background:
    radial-gradient(
      circle at 94% 5%,
      rgba(184, 207, 233, 0.20) 0%,
      transparent 37%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,0.98),
      rgba(247,250,254,0.97)
    ) !important;
}

.ws-fivegrowth-section .ws5-card-education {
  border-left-color: #c3ae82 !important;

  background:
    radial-gradient(
      circle at 94% 5%,
      rgba(231, 207, 158, 0.21) 0%,
      transparent 37%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,0.98),
      rgba(255,251,241,0.97)
    ) !important;
}

.ws-fivegrowth-section .ws5-card-digital {
  border-left-color: #b85f74 !important;

  background:
    radial-gradient(
      circle at 94% 5%,
      rgba(221, 157, 174, 0.18) 0%,
      transparent 37%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,0.98),
      rgba(255,248,250,0.97)
    ) !important;
}

.ws-fivegrowth-section .ws5-card-health {
  border-left-color: #91b5a4 !important;

  background:
    radial-gradient(
      circle at 94% 5%,
      rgba(166, 211, 190, 0.19) 0%,
      transparent 37%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,0.98),
      rgba(248,253,250,0.97)
    ) !important;
}

.ws-fivegrowth-section .ws5-card-welfare {
  border-left-color: #9baeb7 !important;

  background:
    radial-gradient(
      circle at 94% 5%,
      rgba(172, 205, 215, 0.20) 0%,
      transparent 37%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,0.98),
      rgba(248,252,253,0.97)
    ) !important;
}


/* =========================================================
   卡片顯示
   ========================================================= */

.ws-fivegrowth-section #ws5-tab-growth:checked
~ .ws5-interactive-row
.ws5-card-growth,

.ws-fivegrowth-section #ws5-tab-education:checked
~ .ws5-interactive-row
.ws5-card-education,

.ws-fivegrowth-section #ws5-tab-digital:checked
~ .ws5-interactive-row
.ws5-card-digital,

.ws-fivegrowth-section #ws5-tab-health:checked
~ .ws5-interactive-row
.ws5-card-health,

.ws-fivegrowth-section #ws5-tab-welfare:checked
~ .ws5-interactive-row
.ws5-card-welfare {

  display: block !important;

  animation:
    ws5CardReveal 0.52s
    cubic-bezier(.18,.8,.25,1)
    both !important;
}


@keyframes ws5CardReveal {

  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


/* =========================================================
   CARD TYPOGRAPHY
   ========================================================= */

.ws-fivegrowth-section .ws5-card-index {
  position: relative !important;
  z-index: 2 !important;

  display: block !important;

  margin-bottom: 8px !important;

  color: #a77c2d !important;

  font-size: 11px !important;
  line-height: 1.4 !important;
  font-weight: 800 !important;

  letter-spacing: 0.13em !important;
}

.ws-fivegrowth-section .ws5-card-title {
  position: relative !important;
  z-index: 2 !important;

  margin: 0 0 7px !important;

  color: #18304d !important;

  font-family:
    "Noto Serif TC",
    "Noto Sans TC",
    serif !important;

  font-size: clamp(23px, 3vw, 29px) !important;
  line-height: 1.4 !important;
  font-weight: 900 !important;

  overflow-wrap: break-word !important;
}

.ws-fivegrowth-section .ws5-card-en {
  position: relative !important;
  z-index: 2 !important;

  margin-bottom: 23px !important;

  color: #9aa5b0 !important;

  font-size: 9px !important;
  line-height: 1.5 !important;
  font-weight: 700 !important;

  letter-spacing: 0.11em !important;
}

.ws-fivegrowth-section .ws5-card-desc {
  position: relative !important;
  z-index: 2 !important;

  margin: 0 0 23px !important;

  color: #536171 !important;

  font-size: 15px !important;
  line-height: 1.85 !important;
  font-weight: 400 !important;

  overflow-wrap: break-word !important;
}


/* =========================================================
   LIST
   ========================================================= */

.ws-fivegrowth-section .ws5-card-list {
  position: relative !important;
  z-index: 2 !important;

  list-style: none !important;

  margin: 0 0 29px !important;
  padding: 0 !important;
}

.ws-fivegrowth-section .ws5-card-list li {
  position: relative !important;

  margin: 0 0 11px !important;
  padding: 0 0 0 22px !important;

  color: #34465a !important;

  font-size: 14px !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;

  overflow-wrap: break-word !important;
}

.ws-fivegrowth-section .ws5-card-list li::before {
  content: "" !important;

  position: absolute !important;

  top: 0.65em !important;
  left: 2px !important;

  width: 6px !important;
  height: 6px !important;

  border-radius: 50% !important;

  background:
    linear-gradient(
      135deg,
      #e6ca83,
      #b88b32
    ) !important;

  box-shadow:
    0 0 0 4px rgba(209, 170, 85, 0.10) !important;
}


/* =========================================================
   BUTTON
   ========================================================= */

.ws-fivegrowth-section .ws5-button {
  position: relative !important;
  z-index: 3 !important;

  min-height: 46px !important;

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

  gap: 10px !important;

  padding: 12px 26px !important;

  box-sizing: border-box !important;

  border-radius: 999px !important;

  color: #ffffff !important;

  font-size: clamp(14px, 1.5vw, 15px) !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;

  text-decoration: none !important;

  white-space: normal !important;

  overflow: hidden !important;

  box-shadow:
    0 7px 18px rgba(30, 48, 67, 0.15),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease !important;
}

.ws-fivegrowth-section .ws5-button::before {
  content: "" !important;

  position: absolute !important;

  top: -80% !important;
  left: -30% !important;

  width: 35% !important;
  height: 260% !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.22),
      transparent
    ) !important;

  transform: rotate(18deg) !important;

  transition:
    left 0.55s ease !important;

  pointer-events: none !important;
}

.ws-fivegrowth-section .ws5-button:hover::before {
  left: 115% !important;
}

.ws-fivegrowth-section .ws5-button span {
  position: relative !important;
  z-index: 2 !important;

  font-size: 17px !important;
  line-height: 1 !important;

  transition:
    transform 0.2s ease !important;
}

.ws-fivegrowth-section .ws5-button:hover {
  color: #ffffff !important;

  filter:
    brightness(1.07)
    saturate(1.05) !important;

  box-shadow:
    0 10px 26px rgba(25, 47, 69, 0.21),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
}

.ws-fivegrowth-section .ws5-button:hover span {
  transform:
    translateX(3px) !important;
}

.ws-fivegrowth-section .ws5-button:active {
  transform:
    scale(0.94) !important;
}

.ws-fivegrowth-section .ws5-button:focus-visible {
  outline:
    3px solid rgba(212, 175, 55, 0.38) !important;

  outline-offset:
    4px !important;
}


/* =========================================================
   五顆按鈕漸層
   ========================================================= */

.ws-fivegrowth-section .ws5-btn-growth {
  background:
    linear-gradient(
      135deg,
      #34587f 0%,
      #557ca7 52%,
      #7899bb 100%
    ) !important;
}

.ws-fivegrowth-section .ws5-btn-education {
  background:
    linear-gradient(
      135deg,
      #8d6726 0%,
      #b68d43 50%,
      #ceb274 100%
    ) !important;
}

.ws-fivegrowth-section .ws5-btn-digital {
  background:
    linear-gradient(
      135deg,
      #834657 0%,
      #a95b70 50%,
      #c47f91 100%
    ) !important;
}

.ws-fivegrowth-section .ws5-btn-health {
  background:
    linear-gradient(
      135deg,
      #386c58 0%,
      #578b75 50%,
      #79aa93 100%
    ) !important;
}

.ws-fivegrowth-section .ws5-btn-welfare {
  background:
    linear-gradient(
      135deg,
      #456672 0%,
      #628590 50%,
      #82a0aa 100%
    ) !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

  .ws-fivegrowth-section {
    padding:
      68px 22px
      72px !important;
  }

  .ws-fivegrowth-section .ws5-header {
    margin-bottom:
      46px !important;
  }

  .ws-fivegrowth-section .ws5-interactive-row {
    gap:
      34px !important;
  }

  .ws-fivegrowth-section .ws5-left {
    flex-basis:
      46% !important;
  }

  .ws-fivegrowth-section .ws5-right {
    flex-basis:
      48% !important;
  }

  .ws-fivegrowth-section .ws5-card {
    padding:
      30px !important;
  }

  .ws-fivegrowth-section .ws5-core {
    width:
      70px !important;

    height:
      70px !important;
  }

  .ws-fivegrowth-section .ws5-core-brand {
    font-size:
      12px !important;
  }

  .ws-fivegrowth-section .ws5-core-text {
    font-size:
      7px !important;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .ws-fivegrowth-section {
    width:
      100% !important;

    padding:
      50px 14px
      56px !important;

    overflow-x:
      hidden !important;
  }

  .ws-fivegrowth-section .ws5-header {
    margin-bottom:
      36px !important;
  }

  .ws-fivegrowth-section .ws5-eyebrow {
    font-size:
      9px !important;

    letter-spacing:
      0.16em !important;
  }

  .ws-fivegrowth-section .ws5-main-title {
    font-size:
      clamp(27px, 8vw, 34px) !important;
  }

  .ws-fivegrowth-section .ws5-intro {
    max-width:
      520px !important;

    font-size:
      14px !important;

    line-height:
      1.8 !important;
  }

  .ws-fivegrowth-section .ws5-interactive-row {
    flex-direction:
      column !important;

    align-items:
      stretch !important;

    gap:
      34px !important;
  }

  .ws-fivegrowth-section .ws5-left,
  .ws-fivegrowth-section .ws5-right {
    flex:
      1 1 auto !important;

    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;
  }

  .ws-fivegrowth-section .ws5-rings {
    width:
      min(100%, 480px) !important;
  }

  .ws-fivegrowth-section .ws5-ring {
    border-width:
      2px !important;
  }

  .ws-fivegrowth-section .ws5-ring-icon {
    width:
      clamp(18px, 6vw, 23px) !important;

    height:
      clamp(18px, 6vw, 23px) !important;

    margin-bottom:
      4px !important;
  }

  .ws-fivegrowth-section .ws5-ring-title {
    font-size:
      clamp(10px, 3.4vw, 14px) !important;
  }

  .ws-fivegrowth-section .ws5-ring-en {
    font-size:
      clamp(5px, 1.7vw, 7px) !important;

    letter-spacing:
      0.03em !important;
  }

  .ws-fivegrowth-section .ws5-core {
    width:
      clamp(56px, 18vw, 68px) !important;

    height:
      clamp(56px, 18vw, 68px) !important;
  }

  .ws-fivegrowth-section .ws5-core-brand {
    font-size:
      clamp(10px, 3vw, 12px) !important;
  }

  .ws-fivegrowth-section .ws5-core-text {
    font-size:
      clamp(6px, 1.9vw, 7px) !important;
  }

  .ws-fivegrowth-section .ws5-ring-hint {
    margin-top:
      13px !important;

    font-size:
      11px !important;
  }

  .ws-fivegrowth-section .ws5-card {
    padding:
      27px 23px !important;

    border-radius:
      22px !important;
  }

  .ws-fivegrowth-section .ws5-card-index {
    font-size:
      9px !important;

    letter-spacing:
      0.09em !important;
  }

  .ws-fivegrowth-section .ws5-card-title {
    font-size:
      clamp(21px, 6vw, 26px) !important;
  }

  .ws-fivegrowth-section .ws5-card-en {
    font-size:
      8px !important;

    letter-spacing:
      0.06em !important;
  }

  .ws-fivegrowth-section .ws5-card-desc {
    font-size:
      14px !important;

    line-height:
      1.8 !important;
  }

  .ws-fivegrowth-section .ws5-card-list li {
    font-size:
      14px !important;
  }

  .ws-fivegrowth-section .ws5-button {
    width:
      100% !important;

    min-height:
      48px !important;

    padding:
      13px 18px !important;

    font-size:
      14px !important;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

  .ws-fivegrowth-section {
    padding-left:
      10px !important;

    padding-right:
      10px !important;
  }

  .ws-fivegrowth-section .ws5-ring-title {
    font-size:
      clamp(9px, 3.25vw, 12px) !important;
  }

  .ws-fivegrowth-section .ws5-ring-en {
    display:
      none !important;
  }

  .ws-fivegrowth-section .ws5-ring-icon {
    margin-bottom:
      3px !important;
  }

  .ws-fivegrowth-section .ws5-card {
    padding:
      25px 20px !important;
  }

  .ws-fivegrowth-section .ws5-card-title {
    font-size:
      22px !important;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .ws-fivegrowth-section .ws5-ring,
  .ws-fivegrowth-section .ws5-ring-icon,
  .ws-fivegrowth-section .ws5-button,
  .ws-fivegrowth-section .ws5-button::before,
  .ws-fivegrowth-section .ws5-button span,
  .ws-fivegrowth-section .ws5-card {

    animation:
      none !important;

    transition:
      none !important;
  }

}/* End custom CSS */