/* ============ Hero ============ */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(rgba(242, 245, 255, 0.10), rgba(31, 35, 49, 0.05)),
              url("../img/hero/hero-Mag_bg.jpg") center/cover no-repeat;
  color: var(--dark-2);
  padding: 0;
}
.hero::before, .hero::after {
  content: ""; position: absolute; left: -10%; right: 0;
  height: 36%; background: var(--gradient-blue);
  transform: skewY(-6deg); z-index: 1; box-shadow: 0 20px 60px rgba(0,80,212,.35);
}
.hero::before { top: 142px; opacity: 0.00; }
.hero::after { top: auto; bottom: 98px; transform: skewY(6deg); opacity: .10; }
.hero .hero-wrap { position: relative; margin: 0px 0 0px; padding: 0; background: url("../img/hero/hero-Mag_laptop.webp") center center no-repeat; background-size: auto; z-index: 2; }

.hero-image img {
  display: none;
}

@media (max-width: 767.98px) {
  .hero { background: url("../img/hero/hero-Mag_bg-sm.jpg") center/cover no-repeat; padding: 0px; }
  .hero .hero-wrap { background: url("../img/hero/hero-Mag_laptop-sm.webp") center 17.5% no-repeat; background-size: auto; }
  .hero-image img {
    max-width: 280px;
    height: 259px;
    padding: 0;
    margin-top: auto;
    display: inline-block;
  }
  .hero-text {
    flex: 2;
    padding-left: 0px;
  }
}
@media (max-width: 439.98px) {
  .hero .hero-wrap { background-size: 100%; }
}

/* ============ Feature ============ */
.feature {
  position: relative; overflow: hidden;
  background: linear-gradient(rgba(8,20,55,.35), rgba(8,20,55,.55)),
              url("../img/features/feature-Mag_bg.jpg") center/cover no-repeat;
  color: #fff;
  padding: 0;
}
.feature .feature-wrap { position: relative; background: url("../img/features/feature-Mag_bg.webp") center 4% no-repeat; background-size: contain; z-index: 2; }


/* ============ Section base ============ */
section { padding: 80px 0 0; }
.section-title {
  text-align: center; margin-bottom: 16px; /*line-height: 1.35;*/
  font-size: clamp(1.75rem, 5.4vw, 3.125rem); font-weight: 900; color: var(--dark);
  letter-spacing: -.1px;
}


/* ============ Benefits Section ============ */
.benefits { background: #fff url("../img/features/benefits-Mag_bg.jpg") center/cover no-repeat; }

/* ==========================================================================
   蛻變計畫 Plan /  Why continue 認證
   ========================================================================== */
/* ============ 30-day plan ============ */
.plan { background: var(--bg-soft) url("../img/features/plan_bg.jpg") top/100% no-repeat; }

/* ==========================================================================
   為什麼選空中美語 (比較表Table)  Compare /  Stats 實力證明
   ========================================================================== */
/* ============ Comparison Table ============ */
.compare { background: var(--bg-soft) url("../img/features/compare-Mag_bg.jpg") top/contain no-repeat; }
.compare > .container { background: transparent url("../img/features/icon_c2.webp") right -7% no-repeat; background-size: auto; }
.compare > .container > h2 {padding-top: 7.5rem; padding-bottom: 1rem; padding-right: 15%; }
@media (min-width: 768px) {
  .compare > .container { background: transparent url("../img/features/icon_c2.webp") right top no-repeat; background-size: auto; }
  }


/* ==========================================================================
   優惠價格  Pricing / Countdown 優惠倒數計時 / Trust 訂閱後盾
   ========================================================================== */
/* ============ Pricing ============ */
.pricing { background: var(--bg-soft) url("../img/features/pricing-Mag_bg.jpg") center 52px no-repeat; background-size: 180%; }
@media (min-width: 768px) {
  .pricing { background: var(--bg-soft) url("../img/features/pricing-Mag_bg.jpg") center/cover no-repeat; }
  }