@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+Sans+TC:wght@100..900&display=swap');

:root {
  --ec-bg: #f4f3ef;
  --ec-bg-soft: #ebe9e3;
  --ec-text: #151515;
  --ec-muted: #6f7177;
  --ec-line: rgba(255,255,255,.72);
  --ec-glass: rgba(255,255,255,.46);
  --ec-glass-strong: rgba(255,255,255,.68);
  --ec-shadow: 0 24px 80px rgba(60,64,72,.12);
  --ec-shadow-soft: 0 12px 40px rgba(60,64,72,.08);
  --ec-radius: 28px;

  --ec-purple: #8677ff;
  --ec-blue: #80c8ff;
  --ec-pink: #ffafd1;
  --ec-mint: #8ee8d3;
  --ec-gold: #d5b16a;
	--ec-indigo:#297bff;
}

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:
    radial-gradient(circle at 10% 8%, rgba(255,186,214,.38), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(137,206,255,.36), transparent 32%),
    radial-gradient(circle at 52% 92%, rgba(180,245,225,.34), transparent 36%),
    linear-gradient(180deg, #f8f7f3 0%, #eeece6 100%);
  color: var(--ec-text);
  line-height: 1.75;
  letter-spacing: .01em;
  overflow-x: hidden;
}

a {
  text-decoration: none;
}

.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;
}

/* =========================================================
   Background Wrapper
========================================================= */

.ec-wrap {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.ec-wrap::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.45), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.45), transparent 70%);
}

/* 自訂背景圖 */
.MainBack {
  background-image: url("../images/client/event/e138/back_01.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* =========================================================
   Common Layout
========================================================= */

.ec-section {
  position: relative;
	padding: 35px 0;
}

.ec-glass {
  background: linear-gradient(145deg, rgba(255,255,255,.68), rgba(255,255,255,.26));
  border: 1px solid rgba(255,255,255,.76);
  box-shadow: var(--ec-shadow-soft), inset 0 1px 0 rgba(255,255,255,.82);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  border-radius: var(--ec-radius);
}

/* =========================================================
   Typography
========================================================= */

.ec-kicker {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: #6d6f78;
  text-transform: uppercase;
}

.ec-kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, var(--ec-purple), var(--ec-blue), var(--ec-pink));
}

.ec-title {
  font-size: clamp(2.05rem, 10vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: 1.08;
}

.ec-sub {
  color: var(--ec-muted);
  font-size: 1rem;
  font-weight: 400;
}

/* =========================================================
   Buttons
========================================================= */

.ec-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border-radius: 999px;
  padding: .78rem 1.45rem;
  font-weight: 700;
  letter-spacing: -.01em;
  transition: .28s ease;
  border: 1px solid rgba(255,255,255,.82);
}

.ec-btn-primary {
  color: #111;
  background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.38));
  box-shadow:
    0 16px 40px rgba(96,108,130,.12),
    inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.ec-btn-primary:hover {
  color: #111;
  transform: translateY(-2px);
  box-shadow: 0 22px 54px rgba(134,119,255,.18);
}

.ec-btn-dark {
  color: #fff;
  background: rgba(16,17,20,.88);
  border-color: rgba(16,17,20,.16);
  box-shadow: 0 18px 42px rgba(10,10,12,.18);
}

.ec-btn-dark:hover {
  color: #fff;
  transform: translateY(-2px);
  background: #111;
}

/* =========================================================
   Hero / MainHd
========================================================= */

.MainHd {
  min-height: auto;
  display:block;
  align-items: center;
  padding: 58px 0;
  position: relative;
}

.ec-hero-panel {
  padding: 26px 20px;
  background: rgba(255,255,255,.56);
}

.ec-hero-title {
	font-family: "Noto Sans", "Myriad Pro", Helvetica, Arial, "sans-serif";
  font-size: clamp(3rem, 14vw, 4.6rem);
  font-weight: 700;
  letter-spacing: -.075em;
  line-height: .96;
}

.ec-gradient-text {
  background:linear-gradient(105deg, #111 0%, #7f7af8 38%, #42b5f7 62%, #ff3289 82%, #111 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ec-price-card {
  width: 100%;
  max-width: 100%;
  padding: 1.35rem;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,.84), rgba(255,255,255,.32));
  border: 1px solid rgba(255,255,255,.82);
  box-shadow:
    0 18px 50px rgba(70,75,85,.11),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.ec-price-num {
  font-size: clamp(2.5rem, 14vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.06em;
}

.ec-badge-soft {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .42rem .9rem;
  color: #4d4f58;
  background: rgba(255,255,255,.48);
  border: 1px solid rgba(255,255,255,.75);
  font-size: .86rem;
  font-weight: 700;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.ec-feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}

.ec-feature-list li {
  flex:0 0 auto;
  font-size: .95rem;
}

/* =========================================================
   Theme Cards / Package Cards
========================================================= */

.ec-theme-card,
.ec-package-card {
  height: 100%;
  padding: 1.35rem;
  transition: .32s ease;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
}

.ec-theme-card::before,
.ec-package-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: radial-gradient(circle at 24% 0%, var(--card-glow, rgba(134,119,255,.18)), transparent 42%);
  opacity: .7;
  pointer-events: none;
}

.ec-theme-card:hover,
.ec-package-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 28px 80px rgba(80,86,96,.13),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.ec-theme-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(255,255,255,.8), rgba(255,255,255,.24));
  border: 1px solid rgba(255,255,255,.78);
  font-size: 1.45rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88);
}

.ec-card-num {
  font-size: .75rem;
  color: #8b8d94;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ec-card-title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.35;
  margin: 0;
}

.ec-tag {
  display: inline-flex;
  border-radius: 999px;
  padding: .25rem .72rem;
  font-size: .78rem;
  font-weight: 800;
  background: rgba(255,255,255,.52);
  border: 1px solid rgba(255,255,255,.75);
  color: #62646d;
}

/* =========================================================
   Package
========================================================= */

.ec-package-card {
  padding: 1.35rem;
}

.ec-discount {
  display: inline-flex;
  border-radius: 999px;
  padding: .34rem .8rem;
  font-size: .85rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--pkg-color), rgba(20,20,24,.78));
}

.ec-package-title {
  font-weight: 800;
  letter-spacing: -.04em;
  font-size: 1.35rem;
  line-height: 1.35;
}

.ec-package-price {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: 1;
}

.ec-course-list {
  list-style: none;
  margin: 3px 0 0;
  padding: 0;
  display:inline-flex;
  gap: .15rem;
	align-items: center;
	align-content: center;
}

.ec-course-list li {
	font-size: 1rem;
    padding: 5px 15px;
    border-radius: 60px;
    color: #fff;
    background: linear-gradient(135deg, rgba(100, 100, 100, .58), var(--pkg-color));
    border: 1px solid rgba(255, 255, 255, .58);
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
    line-height: 1.15em;
    text-align: center;
		height: clamp(50px, 4vw, 48px);
    align-content: center;
	/*background: rgba(255, 255, 255, .38);
    padding: .82rem .9rem;
    border-radius: 18px;*/
}

.ec-course-name {
  font-weight: 800;
  font-size: .94rem;
  color: #1c1d21;
}

.ec-course-meta {
  font-size: .82rem;
  color: #70727a;
  line-height: 1.55;
  margin-top: .18rem;
}

/* =========================================================
   Special Offer
========================================================= */

.ec-special {
  background:
    radial-gradient(circle at 22% 0%, rgba(134,119,255,.24), transparent 38%),
    radial-gradient(circle at 86% 18%, rgba(255,175,209,.28), transparent 40%),
    linear-gradient(145deg, rgba(255,255,255,.76), rgba(255,255,255,.3));
}

.ec-big-price {
  font-size: clamp(3rem, 14vw, 5rem);
  font-weight: 800;
  letter-spacing: -.07em;
  line-height: 1;
  background: linear-gradient(100deg, #111, var(--ec-purple), var(--ec-pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ec-price-color-01 {
  background: linear-gradient(100deg,#111, var(--pkg-color) );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ec-price-color-02 {
  background: linear-gradient(100deg,var(--pkg-color),#111 );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* =========================================================
   Abroad Cards
========================================================= */

.ec-abroad-card {
  padding: 1.25rem;
  text-align: center;
}

.ec-abroad-discount {
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: 1;
}

/* =========================================================
   Form
========================================================= */

.form-control,
.form-select {
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.78);
  background: rgba(255,255,255,.5);
  padding: .9rem 1rem;
  color: #111;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(134,119,255,.45);
  background: rgba(255,255,255,.72);
  box-shadow: 0 0 0 .25rem rgba(134,119,255,.12);
}

.form-label {
  font-size: .88rem;
  font-weight: 800;
  color: #57595f;
}

/* =========================================================
   Footer
========================================================= */

.ec-footer {
  padding: 42px 0;
  color: #777a82;
  border-top: 1px solid rgba(255,255,255,.65);
}

/* =========================================================
   480–767px / Large Mobile
========================================================= */

@media (min-width: 480px) and (max-width: 767px) {

  .ec-section {
    padding: 76px 0;
  }

  .MainHd {
    padding: 120px 0 80px;
  }

  .ec-hero-panel {
    padding: 32px 28px;
  }

  .ec-hero-title {
    font-size: clamp(4rem, 13vw, 5.4rem);
  }

  .ec-btn {
    width: auto;
  }

  .ec-feature-list li {
    width: auto;
  }

  .ec-package-card {
    padding: 1.55rem;
  }

  .ec-price-card {
    max-width: 420px;
  }

}

/* =========================================================
   768–979px / Tablet
========================================================= */

@media (min-width: 768px) and (max-width: 979px) {

  .ec-section {
    padding: 86px 0;
  }

  .MainHd {
    padding: 128px 0 88px;
  }

  .ec-hero-panel {
    padding: 38px 34px;
  }

  .ec-hero-title {
    font-size: clamp(4.6rem, 10vw, 6.4rem);
  }

  .ec-title {
    font-size: clamp(2.6rem, 6vw, 4rem);
  }

  .ec-sub {
    font-size: 1.08rem;
  }

  .ec-btn {
    width: auto;
  }

  .ec-feature-list li {
    width: auto;
  }

  .ec-price-card {
    max-width: 420px;
  }

  .ec-nav-pill {
    display: inline-flex;
  }

}

/* =========================================================
   980–1199px / Small Desktop
========================================================= */

@media (min-width: 980px) and (max-width: 1199px) {

  .ec-section {
    padding: 96px 0;
  }

  .MainHd {
    min-height: 100vh;
    padding: 140px 0 96px;
  }

  .ec-hero-panel {
    padding: 44px 40px;
  }

  .ec-hero-title {
    font-size: clamp(5.2rem, 8vw, 7rem);
  }

  .ec-title {
    font-size: clamp(3rem, 5vw, 4.4rem);
  }

  .ec-btn {
    width: auto;
  }

  .ec-feature-list li {
    width: auto;
  }

  .ec-package-card {
    padding: 1.7rem;
  }

}

/* =========================================================
   1200px+ / Desktop
========================================================= */

@media (min-width: 1200px) {

  .ec-section {
    padding: clamp(96px, 8vw, 128px) 0;
  }

  .MainHd {
    padding: 100px 0 70px;
  }

  .ec-hero-panel {
    padding: clamp(34px, 4vw, 52px);
  }

  .ec-hero-title {
    font-size: clamp(5.8rem, 8vw, 7.4rem);
  }

  .ec-title {
    font-size: clamp(3.2rem, 5vw, 4.8rem);
  }

  .ec-sub {
    font-size: clamp(1.02rem, 1.55vw, 1.25rem);
  }

  .ec-btn {
    width: auto;
  }

  .ec-feature-list li {
    width: auto;
  }

  .ec-price-card {
    max-width: 420px;
    padding: 1.45rem;
    border-radius: 26px;
  }

  .ec-price-num {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
  }

  .ec-theme-card,
  .ec-package-card {
    padding: 1.45rem;
    border-radius: var(--ec-radius);
  }

  .ec-package-card {
    padding: 1.1rem;
  }

  .ec-package-title {
    font-size: 1.45rem;
  }

  .ec-package-price {
    font-size: 2.5rem;
  }

  .ec-abroad-card {
    padding: 1.5rem;
  }

  .ec-abroad-discount {
    font-size: 3rem;
  }

}

/* =========================================================
   1400px+ / Large Desktop
========================================================= */

@media (min-width: 1400px) {

  .ec-hero-title {
    font-size: 8.4rem;
  }

  .ec-title {
    font-size: 4.8rem;
  }

  .ec-sub {
    font-size: 1.25rem;
  }

}

/* =========================================================
   1600px+ / Ultra Wide
========================================================= */

@media (min-width: 1600px) {

  .MainHd {
    padding-top: 180px;
    padding-bottom: 130px;
  }

  .container {
    max-width: 1440px;
  }

}