/* ╔══════════════════════════════════════════════════════════════╗
   ║  CatPay 共用樣式表                                          ║
   ║  ────────────────────────────────────────────────────────  ║
   ║  SECTION 1 │ page.html   共用 Reset + 續期收款介紹頁        ║
   ║  SECTION 2 │ ATM.html    ATM 轉帳介紹頁                    ║
   ║  SECTION 3 │ PAYUNi.html 一頁收款介紹頁                    ║
   ╚══════════════════════════════════════════════════════════════╝

   色票
   ────────────────────────────────
   品牌綠  #008982   按鈕、邊框、強調
   亮綠    #00b8ae   hover 邊框
   黃      #fad553   Q&A 背景
   淺灰    #F7F7F7   About / Features 背景
   深字    #333  /  次要字  #555

   字體
   ────────────────────────────────
   中文  Noto Sans TC  400 / 500 / 700
   英數  Montserrat    500 / 700

   斷點
   ────────────────────────────────
   ≤ 1024px  Tablet / Small Desktop
   ≤  768px  Mobile
   ≤  430px  Small Mobile                                        */

/* ┌──────────────────────────────────────────────────────────────┐
   │  SECTION 1 — page.html  共用 Reset + 續期收款               │
   └──────────────────────────────────────────────────────────────┘ */

/* ===== Reset & Base ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Noto Sans TC', sans-serif;
  color: #333;
  background: #F7F7F7;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
}

/* ===== Banner Section ===== */
.banner {
  position: relative;
  width: 100%;
  min-height: 800px;
  background: url('/Images/period/banner-bg.png') center center / cover no-repeat;
  overflow: hidden;
}

.banner-inner {
  max-width: 1360px;
  margin: 0 auto;
  min-height: 800px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* White oval gradient behind banner text — rounded left side only */
.banner-text {
  position: relative;
  flex: 0 0 auto;
  width:calc(100% - 600px);
  padding: 90px 60px 90px 90px;
  background: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.40) 80%, #ffffff 100%);
  border-radius: 200px 0 0 200px;
  overflow: hidden;
}

.banner-tag {
  display: inline-block;
  background: #008982;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 30px;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
}

.banner-title {
  font-size: 45px;
  font-weight: 700;
  color: #333;
  line-height: 1.3;
  margin-bottom: 20px;
}

.banner-desc {
  font-size: 22px;
  color: #555;
  line-height: 1.8;
  max-width: 500px;
}

.banner-desc >b {
  font-weight: bold;
}

/* Banner illustration — no background */
.banner-image {
  flex: 0 0 600px;
  height: 600px;
}

.banner-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Banner wave — 裝飾圖，絕對定位在 banner-text 右上角 */
.banner-wave {
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: none;
}

.banner-wave img {
  display: block;
  width: auto;
  height: auto;
}

/* 行動版專用 about 圖片（桌機預設隱藏） */
.about-image-mobile {
  display: none;
}

/* ===== About Section ===== */
.about {
  padding: 80px 0 60px;
  background: #F7F7F7;
  position: relative;
  z-index: 1;
  margin-top: 0;
}

/* 橢圓弧形頂端：偽元素往上延伸蓋住 Banner 底部，製造「區塊浮起」視覺 */
/* border-radius: 水平50%/垂直100% = 上半橢圓；box-shadow 沿弧邊向上散開 */
.about::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 20px;
  background: #F7F7F7;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  box-shadow: 0 -8px 15px rgba(0, 0, 0, 0.05);
}

.about-inner {
  display: flex;
  align-items: center;
  gap: 60px;
}
.about-inner::after,.about-inner::before{
  display: none;
}

/* About illustration — no background */
.about-image {
  flex: 0 0 540px;
  height: 450px;
}

.about-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.about-text {
  flex: 1;
}

/* inline-block 讓寬度由最長文字決定，section-line 才不會凸出 */
.about-text-inner {
  display: inline-block;
}

.text-teal {
  color: #008982;
}

.section-title {
  font-size: 40px;
  font-weight: 700;
  color: #333;
  line-height: 1.3;
  margin-bottom: 20px;
}

.section-line {
  width: 100%;
  height: 1px;
  background: #008982;
  margin-bottom: 20px;
}

.section-desc {
  font-size: 20px;
  color: #555;
  line-height: 1.6;
}

/* ===== Features Section ===== */
.features {
  padding: 60px 0 80px;
  background: #F7F7F7;
}

.features-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) ;
  gap: 30px;
}

.features-grid::after,.features-grid::before{
  display: none;
}

/* 防止外層套版 CSS（如 main.css）污染 grid 子項目寬度 */
.features-grid > .feature-card {
  width: auto !important;
  max-width: 100% !important;
  flex: unset !important;
  float: none !important;
}

.feature-card {
  position: relative;
  background: #fff;
  border: 1px solid #008982;
  border-radius: 30px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 300px;
  justify-content: center;
  text-align: center;
  overflow: hidden;           /* 讓 shimmer 不溢出圓角 */
  cursor: pointer;
}

/* Shimmer 光澤掃過：::before 偽元素從左側 translateX(-100%) 滑至右側 translateX(150%) */
/* overflow:hidden 限制在圓角內；transition:0s 預設不動，hover 才啟動 0.55s 動畫 */
.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 0%,
    transparent 30%,
    rgba(255, 255, 255, 0.65) 50%,
    transparent 70%,
    transparent 100%
  );
  transform: translateX(-100%);
  transition: transform 0s;  /* 預設不動 */
}

.feature-card:hover::before {
  transform: translateX(150%);
  transition: transform 0.55s ease;
  
}

.feature-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.feature-icon img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.feature-title {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  line-height: 1.4;
}

.feature-desc {
  font-size: 18px;
  color: #555;
  line-height: 1.6;
}

/* ===== Q&A Section ===== */
.qa-section {
  background: #F7F7F7;
  padding: 60px 0;
  overflow: hidden;
}

/* 黃色背景設在 .qa-inner（非 .qa-section），讓黃色呈現為 1200px 限寬卡片，非全寬滿版 */
.qa-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #fad553;
  border-radius: 10px;
  padding: 50px 60px;
}

.qa-left {
  flex: 0 0 570px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.qa-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Q&A Header */
.qa-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  margin: 0 auto;
}

.qa-title {
  font-size: 45px;
  font-weight: 700;
  color: #333;
  line-height: 1.2;
  letter-spacing: 0.9px;
  margin-bottom: 20px;
}

.qa-title .teal {
  color: #008982;
}

.qa-line {
  width: 100%;
  height: 1px;
  background: #ffffff;
  margin-bottom: 20px;
}

.qa-subtitle {
  font-size: 20px;
  color: #555;
  line-height: 1.4;
}

/* Q&A Carousel */
.qa-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.qa-track-wrapper {
  flex: 1;
  overflow: hidden;
  border-radius: 20px;
}

.qa-track {
  display: flex;
  transition: transform 0.4s ease;
}

.qa-card {
  flex: 0 0 100%;
  background: #fff;
  border-radius: 20px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 320px;
}

.qa-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #008982;
  padding-bottom: 10px;
  font-weight: 700;
  line-height: 1.4;
}

.qa-num {
  font-size: 40px;
  color: rgba(0, 137, 130, 0.2);
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.qa-question {
  font-size: 24px;
  color: #333;
  font-weight: 700;
  line-height: 1.4;
}

.qa-answer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.qa-answer-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.qa-label-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Icon tag inside Q&A — no background on the img itself */
.qa-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fad553;
  border-radius: 5px;
  padding: 5px;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.qa-tag img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.qa-label {
  font-size: 18px;
  font-weight: 700;
  color: #008982;
}

.qa-answer-block p {
  font-size: 18px;
  color: #333;
  line-height: 1.6;
}

/* Arrows */
.qa-arrow {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.qa-arrow img {
  width: 48px;
  height: 40px;
  object-fit: contain;
}

/* Dots */
.qa-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.qa-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: #008982;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.36px;
  transition: background 0.2s, color 0.2s;
}

.qa-dot.active {
  background: #008982;
  color: #fff;
}

/* Q&A right illustration — no background */
.qa-illustration {
  width: 100%;
  max-width: 510px;
}

.qa-illustration img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ===== Contact Section ===== */
.contact {
  position: relative;
  background: url('/Images/period/contact-bg.png') center center / cover no-repeat;
  height: 270px;
  overflow: hidden;
}

.contact-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.contact-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
}

.contact-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 80px;
  height: 270px;
}

/* margin-bottom: -80px 讓插圖「溢出」Contact 區塊底部，製造圖片浮出視覺 */
.contact-image {
  flex: 0 0 290px;
  height: auto;
  display: flex;
  align-items: flex-end;
  margin-bottom: -80px;
}

.contact-image img {
  width: 290px;
  height: auto;
  object-fit: contain;
  object-position: bottom;
}

.contact-text {
  flex: 1;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-headline {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 700;
}

.contact-label {
  font-size: 30px;
  letter-spacing: 0.6px;
  line-height: 1.2;
  white-space: nowrap;
}

.contact-phone {
  font-size: 50px;
  letter-spacing: 1px;
  text-shadow: 2px 3px 0px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
}

.contact-desc {
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.4px;
  max-width: 740px;
}

/* =============================================
   ANIMATIONS
   ============================================= */

/* --- Keyframes --- */

/* 上下漂浮（banner 插圖、Q&A 插圖） */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}

/* 左側淡入滑入 */
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 右側淡入滑入 */
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 下方淡入滑上 */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 圖示彈跳（hover 用） */
@keyframes iconBounce {
  0%, 100% { transform: scale(1); }
  35%       { transform: scale(1.25); }
  55%       { transform: scale(0.92); }
  75%       { transform: scale(1.08); }
}

/* 聯絡圖片滑上 */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Banner（頁面載入即播放） --- */

.banner-text {
  animation: fadeInLeft 0.8s ease both;
}

.banner-image img {
  animation: fadeInRight 0.9s ease 0.2s both,
             float 4s ease-in-out 1.1s infinite;
}

/* --- Scroll 觸發：初始隱藏 → 進入視口後加 .visible --- */

.about-image,
.about-text,
.feature-card,
.qa-left,
.qa-illustration,
.contact-image img {
  opacity: 0;
}

/* about 插圖 */
.about-image.visible {
  animation: fadeInLeft 0.8s ease forwards;
}

/* about 文字 */
.about-text.visible {
  animation: fadeInRight 0.8s ease 0.15s forwards;
}

/* 功能卡片入場：改用 transition（非 animation）原因：
   animation forwards fill-mode 會鎖住最終 transform: translateY(0)，
   導致 hover 的 translateY(-8px) 無法生效且產生閃動。
   改用 transition 後，hover 可直接覆蓋 transform 而不衝突。
   stagger 效果透過 JS 注入 --delay CSS 變數，作為 transition-delay 使用。 */
.feature-card {
  transform: translateY(30px);
}
.feature-card.visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.6s ease var(--delay, 0s),
    transform 0.6s ease var(--delay, 0s),
    box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    border-color 0.4s ease;
}

/* Q&A 左側 */
.qa-left.visible {
  animation: fadeInLeft 0.8s ease forwards;
}

/* Q&A 插圖：淡入 + 持續漂浮 */
.qa-illustration.visible {
  animation: fadeInRight 0.8s ease 0.15s forwards,
             float 4s ease-in-out 1s infinite;
}

/* 聯絡插圖 */
.contact-image img.visible {
  animation: slideUp 0.7s ease 0.1s forwards;
}

/* --- Feature icon hover 彈跳 --- */

.feature-icon img {
  transition: transform 0.2s;
}

.feature-card:hover .feature-icon img {
  animation: iconBounce 0.5s ease forwards;
}

/* Feature card hover — 滑順上浮 */
.feature-card.visible:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 32px rgba(0, 137, 130, 0.18);
  border-color: #00b8ae;
  transition:
    transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    border-color 0.4s ease;
}

.feature-card:hover .feature-title {
  color: #008982;
  transition: color 0.3s ease;
}

/* Q&A arrow hover */
.qa-arrow {
  transition: transform 0.2s ease;
}

.qa-arrow:hover {
  transform: scale(1.15);
}

/* =============================================
   TABLET / SMALL DESKTOP  (≤ 1024px)
   ============================================= */
@media (max-width: 1024px) {

  /* Banner */
  .banner {
    min-height: 620px;
  }

  .banner-inner {
    min-height: 620px;
    padding: 0 24px;
    gap: 24px;
  }

  .banner-text {
    width: calc(100% - 420px);
    padding: 60px 40px 60px 60px;
  }

  .banner-tag {
    font-size: 20px;
  }

  .banner-title {
    font-size: 36px;
  }

  .banner-desc {
    font-size: 18px;
    max-width: 380px;
  }

  .banner-image {
    flex: 0 0 400px;
    height: 400px;
  }

  /* About */
  .about {
    padding: 60px 0 40px;
  }

  .about-inner {
    gap: 36px;
    justify-content: center;
  }

  .about-image {
    flex: 0 0 500px;
    height: 300px;
  }

  .section-title {
    font-size: 32px;
  }

  .section-desc {
    font-size: 17px;
  }

  /* Features */
  .features {
    padding: 48px 0 60px;
  }

  .features .container {
    padding: 0;
  }

  .features-grid {
    gap: 16px;
  }

  .feature-card {
    min-height: 260px;
    padding: 20px 16px;
  }

  .feature-icon,
  .feature-icon img {
    width: 50px;
    height: 50px;
  }

  .feature-title {
    font-size: 20px;
  }

  .feature-desc {
    font-size: 15px;
  }

  /* Q&A */
  .qa-section {
    padding: 48px 0;
  }

  .qa-inner {
    padding: 40px 36px;
    gap: 16px;
    max-width: inherit;
    margin: 24px;
  }

  .qa-left {
    flex: 0 0 440px;
  }

  .qa-title {
    font-size: 36px;
  }

  .qa-subtitle {
    font-size: 17px;
  }

  .qa-card {
    min-height: 260px;
    padding: 24px;
  }

  .qa-question {
    font-size: 20px;
  }

  .qa-answer-block p,
  .qa-label {
    font-size: 15px;
  }

  /* Contact */
  .contact {
    height: 240px;
  }

  .contact-inner {
    height: 240px;
    gap: 40px;
  }

  .contact-image {
    flex: 0 0 220px;
  }

  .contact-image img {
    width: 220px;
  }

  .contact-label {
    font-size: 18px;
  }

  .contact-phone {
    font-size: 28px;
  }

  .contact-desc {
    font-size: 15px;
  }
}

/* =============================================
   MOBILE RWD  (≤ 768px)
   ============================================= */
@media (max-width: 768px) {

  /* 全域：左右 24px padding */
  .container {
    padding: 0 24px;
  }

  /* ── Banner ── */
  .banner {
    min-height: auto;
    background-position: top center;
  }

  .banner-inner {
    flex-direction: column;
    align-items: center;
    min-height: auto;
    padding: 40px 0 20px;
    gap: 0;
  }

  /* banner-text：置中、overflow visible 讓 wave 正常顯示 */
  .banner-text {
    width: 90%;
    padding: 24px 24px 28px;
    background: linear-gradient(180deg, rgba(255,255,255,0.4) 10%, rgba(255,255,255,0) 100%);
    border-radius: 100%;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: fadeInUp 0.7s ease both;
  }

  /* banner-wave：從絕對定位改為 in-flow，置中顯示於標題上方 */
  .banner-wave {
    position: relative;
    top: auto;
    right: auto;
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
    width: 250px;
  }

  .banner-wave img {
    width: 70%;
    height: auto;
  }

  .banner-tag {
    font-size: 22px;
    padding: 6px 14px;
    margin-bottom: 14px;
    margin-top: -70px;
  }

  .banner-title {
    font-size: 36px;
    margin-bottom: 12px;
  }

  .banner-desc {
    font-size: 18px;
    line-height: 1.7;
    max-width: 100%;
  }

  .banner-image {
    flex: none;
    width: 70%;
    height: auto;
    margin: 0 auto;
  }

  .banner-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    animation: fadeInUp 0.8s ease 0.1s both,
               float 4s ease-in-out 0.9s infinite;
  }

  /* ── About ── */
  .about {
    padding: 48px 0 36px;
  }

  /* 文字在上、圖片在下 */
  .about-inner {
    flex-direction: column;
    gap: 24px;
    padding: 0;
  }

  /* 行動版：原本的 about-image 隱藏，改由 about-image-mobile 顯示 */
  .about-image {
    display: none;
  }

  .about-image-mobile {
    display: block;
    width: 70%;
    margin: 0 auto;
    padding-bottom: 48px;
    opacity: 0;
  }

  .about-image-mobile img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .about-image-mobile.visible {
    animation: fadeInUp 0.7s ease forwards;
  }

  .about-text {
    width: 100%;
    text-align: center;   /* 標題置中 */
  }

  /* inline-block 讓線不超出最長文字，text-align:center 讓整塊置中 */
  .about-text-inner {
    display: inline-block;
    text-align: center;
  }

  .section-title {
    font-size: 36px;
    margin-bottom: 12px;
  }

  .section-line {
    margin-bottom: 12px;
  }

  .section-desc {
    font-size: 20px;
  }

  /* ── Features：單欄，icon 左 + 文字右 ── */
  .features {
    padding: 24px 0 48px;
  }

  .features-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .feature-card {
    min-height: auto;
    padding: 24px 20px;
    border-radius: 20px;
    gap: 12px;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: flex-start;
  }

  .feature-icon {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    margin-top: 0;
  }

  .feature-icon img {
    width: 45px;
    height: 45px;
  }

  .feature-card-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    text-align: center;
  }

  .feature-title {
    font-size: 24px;
  }

  .feature-desc {
    font-size: 18px;
    line-height: 1.6;
  }

  /* ── Q&A：全寬滿版，貼齊上方 Features 區塊 ── */
  .qa-section {
    padding: 0;          /* 移除上下留白，直接與 Features 貼合 */
  }

  .qa-inner {
    flex-direction: column;
    gap: 28px;
    border-radius: 0;    /* 移除圓角，全寬延伸 */
    margin: 0;           /* 移除左右 margin */
    padding: 48px 24px;  /* 內距改為左右 24px，上下保留呼吸空間 */
    max-width: 100%;
    width: 100%;
  }

  .qa-left {
    flex: none;
    width: 100%;
    gap: 20px;
  }

  /* header 置中，線不超出最長文字 */
  .qa-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* inline-block wrapper 控制 qa-line 寬度 */
  .qa-header-inner {
    display: inline-block;
    text-align: center;
  }

  .qa-title {
    font-size: 36px;
    text-align: center;
    line-height: 2;
  }

  .qa-line {
    margin-bottom: 10px;
  }

  .qa-subtitle {
    font-size: 20px;
    text-align: center;
  }

  /* 輪播區：touch 區域全寬 */
  .qa-track-wrapper {
    touch-action: pan-y;  /* 僅允許垂直捲動，水平交由 JS 處理 */
  }

  .qa-right {
    width: 100%;
    justify-content: center;
  }

  .qa-illustration {
    width: 70%;
    max-width: 280px;
    margin: 0 auto;
  }

  .qa-card {
    padding: 20px;
    min-height: auto;
    gap: 14px;
  }

  .qa-num {
    font-size: 26px;
  }

  .qa-question {
    font-size: 20px;
  }

  .qa-answer-block p {
    font-size: 18px;
  }

  .qa-label {
    font-size: 18px;
    white-space: normal;
  }

  .qa-arrow img {
    width: 32px;
    height: 28px;
  }

  .qa-dot {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  /* ── Contact ── */
  .contact {
    height: auto;
    padding: 36px 0 30px;
  }

  /* 文字在上、插圖在下 */
  .contact-inner {
    flex-direction: column;
    height: auto;
    gap: 20px;
    align-items: center;
    text-align: center;
    padding-bottom: 0;
  }

  .contact-image {
    flex: none;
    width: 290px;
    height: auto;         /* 清除桌機的固定高度，讓圖片等比例 */
    align-self: center;
    order: 2;
    margin-bottom: 0px;
  }

  .contact-image img {
    width: 100%;
    height: auto;         /* 等比例縮放 */
    object-fit: contain;
    object-position: bottom;
  }

  .contact-text {
    order: 1;
    align-items: center;
    gap: 10px;
  }

  .contact-headline {
    flex-direction: column;
    gap: 4px;
    align-items: center;
  }

  .contact-label {
    font-size: 30px;
  }

  .contact-phone {
    font-size: 50px;
  }

  .contact-desc {
    font-size: 20px;
    line-height: 1.6;
    max-width: 100%;
  }

  /* ── 手機動畫統一 fadeInUp ── */
  .about-image.visible,
  .about-text.visible,
  .qa-left.visible,
  .qa-illustration.visible {
    animation: fadeInUp 0.7s ease forwards;
  }
}

/* =============================================
   SMALL MOBILE  (≤ 430px)
   ============================================= */
@media (max-width: 430px) {

  /* ── Banner ── */
  .banner-inner {
    padding: 28px 0 16px;
  }

  .banner-text {
    width: 92%;
    padding: 16px 16px 20px;
  }

  .banner-wave {
    width: 180px;
    margin-bottom: 8px;
  }

  .banner-tag {
    font-size: 13px;
    padding: 5px 12px;
    margin-bottom: 10px;
    margin-top: -50px;
  }

  .banner-title {
    font-size: 22px;
    margin-bottom: 10px;
  }

  .banner-desc {
    font-size: 13px;
    line-height: 1.65;
  }

  .banner-image {
    width: 80%;
  }

  /* ── About ── */
  .about {
    padding: 32px 0 24px;
  }

  .about-inner {
    gap: 16px;
  }

  .about-image-mobile {
    width: 75%;
    padding-bottom: 32px;
  }

  .section-title {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .section-desc {
    font-size: 13px;
  }

  /* ── Features ── */
  .features {
    padding: 16px 0 32px;
  }

  .features-grid {
    gap: 12px;
  }

  .feature-card {
    padding: 18px 16px;
    gap: 12px;
    border-radius: 16px;
  }

  .feature-icon {
    width: 36px;
    height: 36px;
  }

  .feature-icon img {
    width: 36px;
    height: 36px;
  }

  .feature-title {
    font-size: 15px;
  }

  .feature-desc {
    font-size: 12px;
    line-height: 1.55;
  }

  /* ── Q&A ── */
  .qa-section {
    padding: 0;
  }

  .qa-inner {
    padding: 36px 16px;
    width: 100%;
  }

  .qa-left {
    gap: 16px;
  }

  .qa-title {
    font-size: 22px;
    line-height: 1.6;
  }

  .qa-subtitle {
    font-size: 13px;
  }

  .qa-illustration {
    width: 75%;
    max-width: 200px;
  }

  .qa-card {
    padding: 16px;
    gap: 12px;
    border-radius: 14px;
  }

  .qa-num {
    font-size: 20px;
  }

  .qa-question {
    font-size: 14px;
  }

  .qa-answer-block p {
    font-size: 12px;
    line-height: 1.6;
  }

  .qa-label {
    font-size: 12px;
  }

  .qa-tag {
    width: 20px;
    height: 20px;
    padding: 3px;
  }

  .qa-tag img {
    width: 12px;
    height: 12px;
  }

  .qa-arrow img {
    width: 26px;
    height: 22px;
  }

  .qa-dot {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }

  /* ── Contact ── */
  .contact {
    padding: 28px 0 20px;
  }

  .contact-inner {
    gap: 14px;
  }

  .contact-image {
    width: 180px;
    height: auto;
  }

  .contact-label {
    font-size: 18px;
  }

  .contact-phone {
    font-size: 28px;
  }

  .contact-desc {
    font-size: 12px;
    line-height: 1.6;
  }
}


/* ┌──────────────────────────────────────────────────────────────┐
   │  SECTION 2 — ATM.html  ATM 轉帳介紹頁                      │
   └──────────────────────────────────────────────────────────────┘ */

/* ── Banner ── */
.atm-banner {
  width: 100%;
  overflow: hidden;
}

.atm-banner-bg {
  background: url('/Images/payuni/atm/PC-Banner-BG.png') center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 20px;
}

/* ATM machine: relative container so overlay can be absolute-positioned */
.atm-machine-wrap {
  position: relative;
  width: 100%;
  max-width: 1080px;
}

.atm-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Mobile ATM image: hidden on desktop */
.atm-img-mb {
  display: none;
}
/* Desktop hand box: positions & clips the floating hand image */
.atm-hand-box {
  position: absolute;
  right: 15%;
  bottom: -3%;
  width: 20%;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}


.atm-hand-pc {
  width: 100%;
  height: 250px;
  display: block;
  animation: atm-hand-float 3s infinite;
}

/* 節奏：快速往下 0.2s → 停滯底部 0.4s → 慢慢往上 0.8s → 停滯頂部 0.4s
   全段 linear：速度固定，到停頓點直接截停，不帶減速拖尾 */
@keyframes atm-hand-float {
  0%  { transform: translateY(0);     animation-timing-function: linear; }
  11% { transform: translateY(0px);   animation-timing-function: linear; }
  33% { transform: translateY(-12px); animation-timing-function: linear; }
  78% { transform: translateY(0);     animation-timing-function: linear; }
  100%{ transform: translateY(0); }
}

/* Content overlay — coordinates map to the white screen area of
   PC-Banner-ATM.png (1080 × 851 px):
   screen rect ≈ left 18.5%, top 8%, right 19.4%, bottom 39.25% */
.atm-screen-overlay {
  position: absolute;
  left: 20%;
  top: 10%;
  right: 20%;
  bottom: 39.25%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 24px 24px;
  overflow: hidden;
}

.atm-badge {
  display: inline-block;
  position: relative;
  background: #FAD553;
  border-radius: 100px;
  padding: 6px 18px;
  font-size: 20px;
  font-weight: 700;
  color: #333;
  align-self: flex-start;
}

/* 對話框三角形 — 朝下，置中 */
.atm-badge::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left:20%;
  transform: translateX(-50%);
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 10px solid #fad553;
}

.atm-title-group {
  padding: 0;
}

.atm-title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  color: #333;
}

.atm-title .en {
  color: #008982;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
}

.atm-desc {
  font-size: 20px;
  color: #555;
  line-height: 1.65;
}

.atm-checks {
  list-style: none;
}

.atm-checks li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  color: #333;
  margin-bottom: 6px;
}

.atm-checks li:last-child {
  margin-bottom: 0;
}

.atm-checks li img {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.atm-btn {
  width:100%;
  display: inline-block;
  background: #FB783F;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 2px;
  padding: 14px 44px;
  border-radius: 6px;
  text-decoration: none;
  align-self: flex-start;
  transition: background 0.25s;
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.atm-btn:hover {
  background: #cf6b16;
}

/* ── Features ── */
.atm-features {
  background: #F7F7F7;
  padding: 0 0 0;
  position: relative;
  z-index: 10;
  margin-top: -60px;
}

/* Arc transition strip overlapping the bottom of the banner */
.atm-arc {
  width: 110%;
  display: block;
  margin-top: -40px;
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  left: -15px;
  height: 50px;
}
.atm-arc img{
  height: 50px;
  width: 100%;
}

.atm-features-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 60px 40px 140px;
  position: relative;
  z-index: 1;
}

.atm-features-header {
  text-align: center;
  margin-bottom: 60px;
}

/* Vector 119.png is 1950×80 — show as a thin decoration strip */
.atm-features-deco {
  height: 36px;
  width: auto;
  max-width: 160px;
  margin: 0 auto 10px;
  object-fit: contain;
}

.atm-features-heading {
  font-size: 40px;
  font-weight: 700;
  color: #333;
  margin-bottom: 12px;
}

.atm-features-heading .teal {
  color: #008982;
}

.atm-features-sub {
  font-size: 20px;
  color: #555;
}

.atm-features-body {
  display: flex;
  align-items: center;
  gap: 60px;
}

.atm-cards-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.atm-feature-card {
  background: #fad553;
  border-radius: 14px;
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 30px 1fr;
  column-gap: 12px;
  row-gap: 10px;
  align-items: center;
}

.atm-feature-card-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  grid-column: 1;
  grid-row: 1;
}

/* display:contents 讓 wrapper div 消失於佈局，h3/p 直接參與 grid */
.atm-feature-card-text {
  display: contents;
}

.atm-feature-card-text h3 {
  font-size: 30px;
  font-weight: 700;
  color: #333;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

.atm-feature-card-text p {
  font-size: 22px;
  color: #333;
  line-height: 1.7;
  grid-column: 1 / -1;
  grid-row: 2;
}

/* 三張卡片漸層透明度（#fad553 = rgb(250,213,83)） */
.atm-cards-col .atm-feature-card:nth-child(1) { background: rgba(250, 213, 83, 0.5); }
.atm-cards-col .atm-feature-card:nth-child(2) { background: rgba(250, 213, 83, 0.8); }
.atm-cards-col .atm-feature-card:nth-child(3) { background: rgba(250, 213, 83, 1);   }

/* Desktop illustration column: fixed height so absolutely-positioned children
   have a sized container to reference */
.atm-illus-col {
  flex: 0 0 500px;
  position: relative;
  height:500px;
}

.atm-illus-mb {
  display: none;
}

/* ── Floating / composed elements (desktop) ── */
@keyframes atm-floatA {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes atm-floatB {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%       { transform: translateY(-8px) rotate(3deg); }
}
@keyframes atm-floatC {
  0%, 100% { transform: translateY(0) rotate(2deg); }
  50%       { transform: translateY(-10px) rotate(-2deg); }
}

.f-elem { position: absolute; pointer-events: none; }

/* Cloud strip — bottom background */
/* Cloud: full-width bottom background, below wrap content (z:1) */
.atm-features-cloud {
  position: absolute;
  bottom: 0;
  left: 0%;
  width: 130%;       /* 延伸超出畫面左右兩側 */
  display: block;
  z-index: 0;
  pointer-events: none;
}

/* ── Per-element keyframes (rotation must be included to avoid override) ── */

/* phone: 往下 */
/* 節奏：ease-in-out 緩入緩出 → 停住(linear) → ease-in-out 緩入緩出 → 停住 → 重複
   0%→8% / 50%→58% 移動用 ease-in-out（起步輕柔、到位輕柔，維持俐落停頓感）
   20%→50% / 70%→100% hold 區間 linear（靜止不動，easing 無關）  */

@keyframes f-anim-phone {
  0%   { transform: translateY(0);    animation-timing-function: ease-in-out; }
  20%  { transform: translateY(28px); animation-timing-function: linear;   }
  50%  { transform: translateY(28px); animation-timing-function: ease-in-out; }
  70%  { transform: translateY(0);    animation-timing-function: linear;   }
  100% { transform: translateY(0); }
}
@keyframes f-anim-network {
  0%   { transform: translateY(0);     animation-timing-function: ease-in-out; }
  20%  { transform: translateY(-24px); animation-timing-function: linear;   }
  50%  { transform: translateY(-24px); animation-timing-function: ease-in-out; }
  70%  { transform: translateY(0);     animation-timing-function: linear;   }
  100% { transform: translateY(0); }
}
@keyframes f-anim-coin1 {
  0%   { transform: translateY(0);    animation-timing-function: ease-in-out; }
  20%  { transform: translateY(22px); animation-timing-function: linear;   }
  50%  { transform: translateY(22px); animation-timing-function: ease-in-out; }
  70%  { transform: translateY(0);    animation-timing-function: linear;   }
  100% { transform: translateY(0); }
}
@keyframes f-anim-coin2 {
  0%   { transform: translate(0, 0);         animation-timing-function: ease-in-out; }
  20%  { transform: translate(18px, -18px);  animation-timing-function: linear;   }
  50%  { transform: translate(18px, -18px);  animation-timing-function: ease-in-out; }
  70%  { transform: translate(0, 0);         animation-timing-function: linear;   }
  100% { transform: translate(0, 0); }
}
@keyframes f-anim-bn1 {
  0%   { transform: rotate(27deg) translateY(0);     animation-timing-function: ease-in-out; }
  20%  { transform: rotate(27deg) translateY(-24px); animation-timing-function: linear;   }
  50%  { transform: rotate(27deg) translateY(-24px); animation-timing-function: ease-in-out; }
  70%  { transform: rotate(27deg) translateY(0);     animation-timing-function: linear;   }
  100% { transform: rotate(27deg) translateY(0); }
}
@keyframes f-anim-bn2 {
  0%   { transform: rotate(51deg) translateY(0);     animation-timing-function: ease-in-out; }
  20%  { transform: rotate(51deg) translateY(-24px); animation-timing-function: linear;   }
  50%  { transform: rotate(51deg) translateY(-24px); animation-timing-function: ease-in-out; }
  70%  { transform: rotate(51deg) translateY(0);     animation-timing-function: linear;   }
  100% { transform: rotate(51deg) translateY(0); }
}
@keyframes f-anim-card {
  0%   { transform: rotate(15deg) translate(0, 0);         animation-timing-function: ease-in-out; }
  20%  { transform: rotate(15deg) translate(-30px, -30px); animation-timing-function: linear;   }
  50%  { transform: rotate(15deg) translate(-30px, -30px); animation-timing-function: ease-in-out; }
  70%  { transform: rotate(15deg) translate(0, 0);         animation-timing-function: linear;   }
  100% { transform: rotate(15deg) translate(0, 0); }
}
@keyframes f-anim-magnifier {
  0%   { transform: translate(0, 0) rotate(0deg);      animation-timing-function: ease-in-out; }
  20%  { transform: translate(0, -55px) rotate(22deg); animation-timing-function: linear;   }
  50%  { transform: translate(0, -55px) rotate(22deg); animation-timing-function: ease-in-out; }
  70%  { transform: translate(0, 0) rotate(0deg);      animation-timing-function: linear;   }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes f-anim-bill {
  0%   { transform: rotate(-15deg) translateY(0);    animation-timing-function: ease-in-out; }
  20%  { transform: rotate(-15deg) translateY(14px); animation-timing-function: linear;   }
  50%  { transform: rotate(-15deg) translateY(14px); animation-timing-function: ease-in-out; }
  70%  { transform: rotate(-15deg) translateY(0);    animation-timing-function: linear;   }
  100% { transform: rotate(-15deg) translateY(0); }
}

/* ── Element rules ── */

/* Main phone/ATM illustration — center */
.f-phone {
  width: 215px;
  left: 130px;
  top: -15px;
  z-index: 3;
  animation: f-anim-phone 5.5s linear infinite;
}

/* Network globe — upper-left, behind coins */
.f-network {
  width: 200px;
  left: 54px;
  top: 0px;
  z-index: 1;
  opacity: 0.6;
  animation: f-anim-network 5.5s linear infinite;
}

/* Coins — upper-left */
.f-coin1 {
  width: 40px;
  left: 43px;
  top: 24px;
  z-index: 4;
  animation: f-anim-coin1 5.5s linear infinite;
}
.f-coin2 {
  width: 60px;
  left: 62px;
  top: 83px;
  z-index: 4;
  animation: f-anim-coin2 5.5s linear infinite;
}

/* Banknotes — right side, rotated, behind phone */
.f-banknote1 {
width: 100px;
    right: 135px;
    top: 117px;
    z-index: 2;
    transform-origin: bottom left;
    animation: f-anim-bn1 5.5s linear infinite;
}
.f-banknote2 {
  width: 96px;
    right: 106px;
    top: 61px;
    z-index: 1;
    transform-origin: bottom left;
    transform: rotate(56deg) translateY(-26px);
}

/* Credit card — lower-right, in front of banknotes */
.f-card {
  width: 149px;
  right: 70px;
  bottom: 84px;
  z-index: 3;
  animation: f-anim-card 5.5s linear infinite;
}

/* Magnifier — lower-left */
.f-magnifier {
  width: 100px;
  left: 30px;
  bottom: 0px;
  z-index: 4;
  animation: f-anim-magnifier 5.5s linear infinite;
}

/* Bill/receipt — below phone, rotated left, behind phone */
.f-bill {
  width: 230px;
    left: -30px;
    bottom: -14px;
    z-index: 2;
    transform-origin: top center;
    animation: f-anim-bill 5.5s linear infinite;
}

/* ── Contact ── */
.atm-contact {
  background: #008982;
  overflow: hidden;
}

.atm-contact-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.atm-contact-text {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 12px;
}

.atm-contact-label {
  font-size: 35px;
  font-weight: 700;
  color: #fff;
}

.atm-contact-phone {
  font-family: 'Montserrat', sans-serif;
  font-size: 50px;
  font-weight: 700;
  color: #F2D769;
  line-height: 1.2;
  margin-bottom: 18px;
}

.atm-contact-desc {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.85;
  width: 100%;  /* 強制換到下一行 */
}

.atm-contact-img-col {
  flex: 0 0 374px;
  padding-top: 20px;
}

.atm-contact-img-col img {
  width: 100%;
  display: block;
}
@media (max-width: 1124px) {
  .atm-hand-box           { bottom: -8%;}
}
/* ── ATM RWD ≤ 1024px ── */
@media (max-width: 1024px) {
  .atm-machine-wrap       { width: 90%; }
  .atm-screen-overlay     { padding: 14px 24px; gap: 10px; }
  .atm-title              { font-size: 30px; }

  .atm-features-body      { gap: 40px; }
  .atm-illus-col          { flex: 0 0 440px; }

  .atm-contact-inner      { padding: 0 40px; }
  .atm-contact-phone      { font-size: 40px; }
  .atm-contact-img-col    { flex: 0 0 300px; }
  .atm-hand-box           { bottom: -7%;}
}

/* ── ATM RWD ≤ 768px Mobile ── */
/* ── ATM Banner 切換：≤ 991px 起換 MB-Banner-BG-ATM.png ── */
@media (max-width: 991px) {

  /* 裁兩側用 */
  .atm-banner { overflow: hidden; }

  /* 底色背景 */
  .atm-banner-bg {
    background: url('/Images/payuni/atm/MB-Banner-BG.png') center / cover no-repeat;
    display: block;
    padding: 0;
  }

  /* 固定高度 = 圖片原始高 800px，不隨圖片縮放 */
  .atm-machine-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 768px;
  }

  .atm-img-pc   { display: none; }

  /* 手機版：手固定在 MB 圖右緣往左 164px
     圖寬 850px，置中後右緣 = 50%+425px → 164px 內縮 = 50%+261px
     用 right: calc(50%-261px) 表達（wrap 右緣到手左緣的距離） */
  .atm-hand-box {
    left: auto;
    right: calc(50% - 210px);
    bottom: 45px;
    width: 120px;
    transform: none;
  }
  .atm-hand-pc{
    height: 150px;
  }

  /* 圖片置中、不縮放，viewport 縮小時裁左右兩側 */
  .atm-img-mb {
    display: block;
    position: absolute;
    width: auto;
    height: 660px;     /* 固定高度，保持圖片原始比例不縮放 */
    max-width: none;   /* 覆蓋全域 img max-width:100% */
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    
  }

  /* Overlay 以 calc(50% ± px) 對準圖片螢幕中心
     MB-Banner-BG-ATM.png 850×800：螢幕 left=148, right=648, top=120, bottom=533
     從圖片中心(425px)換算：left=148→(50%-277px), right=648→(50%-223px) */
  .atm-screen-overlay {
      bottom: 180px;
      gap: 6px;
      align-items: center;
      text-align: center;
      justify-content: center;
      width: 100%;
      left: 50%;
      max-width: 430px;
      transform: translateX(-50%);
      
  }

  .atm-badge {
    font-size: 16px;
    padding: 3px 9px;
    align-self: center;
  }

  .atm-title {
    font-size: 32px;
    line-height: 1.2;
  }

  .atm-desc {
    font-size: 16px;
  }

  /* 整體置中，但條列左對齊 */
  .atm-checks {
    display: inline-flex;
    flex-direction: column;
    align-self: center;
  }

  .atm-checks li {
    font-size: 16px;
    gap: 4px;
    margin-bottom: 2px;
    justify-content: flex-start;
  }

  .atm-btn {
    font-size: 20px;
    padding: 14px 14px;
    letter-spacing: 1px;
    align-self: center;
  }
}

@media (max-width: 768px) {
  /* Features */
  .atm-features           { padding: 0; }
  .atm-features-wrap      { padding: 40px 20px 0; }

  /* 手機版雲朵：超出畫面兩側 */
  .atm-features-cloud {
    width: 120%;
    left: 0%;
  }
  .atm-features-heading   { font-size: 36px; }
  .atm-features-header    { margin-bottom: 40px; }

  .atm-features-body {
    flex-direction: column;
    gap: 32px;
  }

  .atm-illus-col {
    flex: none;
    width: 120%;
    height: 500px; 
    overflow: visible;
    transform: scale(0.8);
    transform-origin: top center;
  }
  .atm-illus-pc   { display: block; }
  .atm-illus-mb   { display: none; }
  .f-elem         { display: block; }

  /* Contact */
  .atm-contact            { padding: 50px 0 0; }

  .atm-contact-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 24px;
    gap: 24px;
  }

  .atm-contact-text       { padding-bottom: 0; justify-content: center;flex-flow: column; align-items: center;}
  .atm-contact-label      { font-size: 28px; }
  .atm-contact-phone      { font-size: 36px; }
  .atm-contact-img-col    { flex: none; width: 80%; max-width: 300px; }

  .atm-illus-col          {width: 500px;}
}

/* ── ATM RWD ≤ 430px Small Mobile ── */
@media (max-width: 430px) {
  .atm-screen-overlay     {padding: 14px 20px;}
  .atm-features-heading   { font-size: 32px; }
  .atm-feature-card-text h3 { font-size: 28px; }
  .atm-checks li img      { width:20px;height: 20px;}
  .atm-btn                {margin-top: 8px;}
  .atm-title              { font-size: 28px; }
  .atm-badge              { font-size: 16px; padding: 3px 9px; }
  .atm-desc               { font-size: 16px;  }
  .atm-checks li          { font-size: 16px; }
  .atm-btn                { font-size: 20px; padding: 10px 14px; }

  .atm-contact-phone      { font-size: 36px; }
  .atm-contact-label      { font-size: 28px; }
}


/* ┌──────────────────────────────────────────────────────────────┐
   │  SECTION 3 — PAYUNi.html  一頁收款介紹頁                   │
   └──────────────────────────────────────────────────────────────┘ */

/* ── Reset body bg for this page ── */
.pay-banner, .pay-features { width: 100%; }

/* ── Banner ── */
.pay-banner {
  background: linear-gradient(to bottom, #FAD553 0%, #FAF9F5 100%);
  position: relative;
  overflow: hidden;
}

.pay-wave-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 45%;
  pointer-events: none;
  z-index: 0;
}

.pay-wave-left {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30%;
  pointer-events: none;
  z-index: 0;
}

.pay-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 0px 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  position: relative;
  z-index: 1;
}

/* Text */
.pay-banner-text {
  flex: 1;
  min-width: 0;
}

.pay-badge {
  display: inline-block;
  background: #008982;
  color: #fff;
  border-radius: 100px;
  padding: 6px 20px;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 22px;
}

.pay-title {
  font-size: 36px;
  font-weight: 700;
  color: #333;
  line-height: 1.4;
  margin-bottom: 18px;
}

.pay-brand {
  color: inherit;
}

.pay-title-sub {
  color: #008982;
}

.pay-desc {
  font-size: 20px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 36px;
}

.pay-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #333;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  padding: 14px 32px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.25s;
  min-width: 240px;
  justify-content: center;
}

.pay-btn img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.pay-btn:hover { background: #111; }

/* Illustration column */
.pay-banner-illus {
  flex: 0 0 auto;
  position: relative;
  width: 500px;
}

.pay-banner-main {
  width: 100%;
  display: block;
  position: relative;
  z-index: 1;
}

/* Floating decorative elements – banner */
.pay-f { position: absolute; pointer-events: none; }

/* ── Banner illustration floating elements (static, no animation yet) ── */

/* Coin-S: top-left corner */
.pay-banner-illus .pay-f-coin-s {
  width: 40px;
  left: 8px;
  top: 45px;
  z-index: 2;
}

/* Card: bottom-left */
.pay-banner-illus .pay-f-card {
  width: 280px;
  left: -12px;
  bottom: 46px;
  z-index: 3;
  animation: pay-coin-settle 4.2s linear infinite;
}

/* Add Line: bottom-left */
.pay-banner-illus .pay-f-add-line {
  width: 134px;
  right: 118px;
  bottom: 48px;
  z-index: 5;
}

/* Bag-orange: center-bottom, slightly right, behind red bag — 往右下方移動帶旋轉 */
.pay-banner-illus .pay-f-bag-o {
  width: 120px;
  left: 160px;
  bottom: 22px;
  z-index: 3;
  animation: pay-anim-bag-o 4.2s linear infinite;
}

@keyframes pay-anim-bag-o {
  0%   { transform: translate(0, 0) rotate(0deg);          animation-timing-function: ease-in-out; }
  20%  { transform: translate(18px, 18px) rotate(10deg);   animation-timing-function: linear; }
  50%  { transform: translate(18px, 18px) rotate(10deg);   animation-timing-function: ease-in-out; }
  70%  { transform: translate(0, 0) rotate(0deg);          animation-timing-function: linear; }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* Bag-red: 往左上方移動帶旋轉 */
.pay-banner-illus .pay-f-bag-r {
  width: 90px;
  left: 144px;
  bottom: 12px;
  z-index: 4;
  animation: pay-anim-bag-r 4.2s linear infinite;
}

@keyframes pay-anim-bag-r {
  0%   { transform: translate(0, 0) rotate(0deg);             animation-timing-function: ease-in-out; }
  20%  { transform: translate(-18px, -22px) rotate(-10deg);   animation-timing-function: linear; }
  50%  { transform: translate(-18px, -22px) rotate(-10deg);   animation-timing-function: ease-in-out; }
  70%  { transform: translate(0, 0) rotate(0deg);             animation-timing-function: linear; }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* Calendar: 順時針旋轉到平放 */
.pay-banner-illus .pay-f-calendar {
  width: 144px;
  left: 60px;
  top: -56px;
  z-index: 3;
  transform-origin: center center;
  animation: pay-anim-calendar 4.2s linear infinite;
}

@keyframes pay-anim-calendar {
  0%   { transform: rotate(-21deg); animation-timing-function: ease-in-out; }
  20%  { transform: rotate(0deg);   animation-timing-function: linear; }
  50%  { transform: rotate(0deg);   animation-timing-function: ease-in-out; }
  70%  { transform: rotate(-21deg); animation-timing-function: linear; }
  100% { transform: rotate(-21deg); }
}

/* Clock face */
.pay-banner-illus .pay-f-clock-bg {
  width: 116px;
  left: 189px;
  top: -42px;
  z-index: 4;
}

/* Clock hands: 往右旋轉 30° */
.pay-banner-illus .pay-f-clock-hands {
  width: 76px;
  left: 210px;
  top: -21px;
  z-index: 5;
  transform-origin: center center;
  animation: pay-anim-hands 4.2s linear infinite;
}

@keyframes pay-anim-hands {
  0%   { transform: rotate(0deg);  animation-timing-function: ease-in-out; }
  20%  { transform: rotate(45deg); animation-timing-function: linear; }
  50%  { transform: rotate(45deg); animation-timing-function: ease-in-out; }
  70%  { transform: rotate(0deg);  animation-timing-function: linear; }
  100% { transform: rotate(0deg); }
}

/* Arrow: 往右下大幅位移 */
.pay-banner-illus .pay-f-arrow {
  width: 30px;
  top: 129px;
  left: 54%;
  z-index: 6;
  animation: pay-anim-arrow 4.2s linear infinite;
}

@keyframes pay-anim-arrow {
  0%   { transform: translateX(-50%) translate(0, 0);       animation-timing-function: ease-in-out; }
  20%  { transform: translateX(-50%) translate(15px, 15px); animation-timing-function: linear; }
  50%  { transform: translateX(-50%) translate(15px, 15px); animation-timing-function: ease-in-out; }
  70%  { transform: translateX(-50%) translate(0, 0);       animation-timing-function: linear; }
  100% { transform: translateX(-50%) translate(0, 0); }
}

/* Coin stack: wrapper positioned bottom-left */
.pay-banner-illus .pay-f-coin-stack {
  left: -30px;
  bottom: 24px;
  width: 80px;
  height: 64px;
  z-index: 3;
}

.pay-f-coin-stack img {
  position: absolute;
  width: 44px;
  max-width: none;
  display: block;
}

/* Back 3 coins: right-offset, lower z-index */
.coin-b   { left: 36px; z-index: 1; }
.coin-b1  { bottom: 32px; }
.coin-b2  { bottom: 25px;left: 38px; }
.coin-b3  { bottom: 14px;  }

/* Front 5 coins: left-aligned, higher z-index */
.coin     { left: 0;     z-index: 2; }
/* coin-1: 左上浮出 */
.coin-1   { bottom: 40px; animation: pay-coin-1 4.2s linear infinite; }
/* coin-2: 右上浮出 */
.coin-2   { bottom: 32px; animation: pay-coin-2 4.2s linear infinite 0.08s; }
.coin-3   { bottom: 24px; }
.coin-4   { bottom: 16px; }
.coin-5   { bottom: 8px;  }

/* coin-b1: 右上浮出（後排，幅度略小） */
.coin-b1  { bottom: 34px; animation: pay-coin-b1 4.2s linear infinite 0.05s; }

/* Whole stack settles after coins return */
.pay-banner-illus .pay-f-coin-stack {
  animation: pay-coin-settle 4.2s linear infinite;
}

/* coin-1: 往左上浮起 + 左側翹起（逆時針） */
@keyframes pay-coin-1 {
  0%   { transform: translate(0, 0) rotate(0deg);        animation-timing-function: ease-out; }
  18%  { transform: translate(0px,-22px) rotate(15deg);  animation-timing-function: linear; }
  58%  { transform: translate(0px,-22px) rotate(15deg);  animation-timing-function: ease-out; }
  70%  { transform: translate(0, 0) rotate(0deg);        animation-timing-function: linear; }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* coin-2 */
@keyframes pay-coin-2 {
  0%   { transform: translate(0, 0) rotate(0deg);        animation-timing-function: ease-out; }
  18%  { transform: translate(0px,-10px) rotate(-8deg);  animation-timing-function: linear; }
  58%  { transform: translate(0px,-10px) rotate(-8deg);  animation-timing-function: ease-out; }
  70%  { transform: translate(0, 0) rotate(0deg);        animation-timing-function: linear; }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* coin-b1 */
@keyframes pay-coin-b1 {
  0%   { transform: translate(0, 0) rotate(0deg);        animation-timing-function: ease-out; }
  18%  { transform: translate(0px,-6px) rotate(-12deg);  animation-timing-function: linear; }
  58%  { transform: translate(0px,-6px) rotate(-12deg);  animation-timing-function: ease-out; }
  70%  { transform: translate(0, 0) rotate(0deg);        animation-timing-function: linear; }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* Wrapper 整組上移：與內部硬幣同步，不斷點 */
@keyframes pay-coin-settle {
  0%   { transform: translateY(0);    animation-timing-function: ease-out; }
  18%  { transform: translateY(-8px); animation-timing-function: linear; }
  58%  { transform: translateY(-8px); animation-timing-function: ease-out; }
  70%  { transform: translateY(0);    animation-timing-function: linear; }
  100% { transform: translateY(0); }
}

@keyframes pay-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

/* ── Features ── */
/* PAYUNi 頁面底色 */
/* Full-width section wrapper: PC-Features-BG 滿版底 + 四角浮動 icon */
.pay-features-section {
  position: relative;
  overflow: hidden;
  background: #FAF9F5;
}

/* BG 圖移到 pay-features-body::before，與 phone 同一中心點對齊 */

/* Floating corner icons */
.pay-feat-icon { position: absolute; pointer-events: none; z-index: 2; }

/* talk: 往下，與 tick/Coin-L 同時 */
.pay-icon-talk {
  top: -95%; left: 3%; width: 100px;
  animation: pfi-down 4.2s linear infinite;
}

/* Date-tick: 往上 */
.pay-icon-date-tick {
  top: -62%; left: 15%; width: 110px;
  animation: pfi-up 4.2s linear infinite;
}

/* tick: 往下，同 talk 同時 */
.pay-icon-tick {
  top: -90%; right: 10%; width: 110px;
  animation: pfi-down 4.2s linear infinite;
}

/* Coin-S: 往右下靠近 Coin-L */
.pay-icon-coin-s {
  top: -45%; right: 23%; width: 50px;
  animation: pfi-coin-s 4.2s linear infinite;
}

/* Coin-L: 往下，盾牌後 0.2s 視差 */
.pay-icon-coin-l {
  top: -18%; right: 15%; width: 80px;
  animation: pfi-down 4.2s linear 0.2s infinite;
}

/* ── Icon keyframes (俐落節拍：ease-out 動 → linear 停） ── */

/* 往下 20px */
@keyframes pfi-down {
  0%   { transform: translateY(0);    animation-timing-function: ease-out; }
  20%  { transform: translateY(20px); animation-timing-function: linear;   }
  50%  { transform: translateY(20px); animation-timing-function: ease-out; }
  70%  { transform: translateY(0);    animation-timing-function: linear;   }
  100% { transform: translateY(0); }
}

/* 往上 20px */
@keyframes pfi-up {
  0%   { transform: translateY(0);     animation-timing-function: ease-out; }
  20%  { transform: translateY(-20px); animation-timing-function: linear;   }
  50%  { transform: translateY(-20px); animation-timing-function: ease-out; }
  70%  { transform: translateY(0);     animation-timing-function: linear;   }
  100% { transform: translateY(0); }
}

/* Coin-S: 大家往下時回到原點，大家回位時移到目標（反相） */
@keyframes pfi-coin-s {
  0%   { transform: translate(15px, 15px); animation-timing-function: ease-out; }
  20%  { transform: translate(0, 0);       animation-timing-function: linear;   }
  50%  { transform: translate(0, 0);       animation-timing-function: ease-out; }
  70%  { transform: translate(15px, 15px); animation-timing-function: linear;   }
  100% { transform: translate(15px, 15px); }
}

/* Inner content: max-width 限制 */
.pay-features {
  padding: 80px 40px 100px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.pay-features-header {
  text-align: center;
  margin-bottom: 60px;
  position: relative;
  z-index: 2;
}

.pay-features-title {
  font-size: 40px;
  font-weight: 700;
  color: #333;
  margin-bottom: 16px;
}

.pay-features-title .teal {
  color: #008982;
}

.pay-features-desc {
  font-size: 20px;
  color: #555;
  line-height: 1.8;
  max-width: 800px;
  margin: 0 auto;
}

/* Desktop 3-column grid:
   col1=card01 | col2=illus | col3=card03
                   三卡並排，phone 當背景 */
/* pay-features-body: 3-col grid，phone 以 absolute img 垂直置中於卡片後 */
.pay-features-body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  position: relative;
  margin: 240px 0;
  align-items: stretch;   /* 三欄等高 */
}

/* PC-Features-BG 以 ::before 置中於 pay-features-body，與 phone 圖中心對齊 */
.pay-features-body::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110%;           /* 超出 body 邊緣以呈現完整光暈 */
  aspect-ratio: 1 / 1;  /* 等比正方形（BG 原圖 1300×1300） */
  background: url('/Images/payuni/onepage/PC-Features-BG.png') center / contain no-repeat;
  z-index: 0;
  pointer-events: none;
}

/* phone 圖：絕對定位，垂直置中，z-index 0 在卡片後方 */
.pay-features-illus {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pay-illus-bg    { display: none; }

.pay-illus-phone {
  display: block;
  height: 120%;
  width: auto;
  max-width: none;
}

/* 卡片在 phone 上方 */
.pay-card { position: relative; z-index: 1; }
.pay-card-01, .pay-card-02, .pay-card-03 { grid-row: 1; }

/* Feature card */
.pay-card {
  background: #fff;
  border-radius: 16px;
  padding: 60px 30px 40px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border: 3px solid #008982;
  overflow: hidden;
  align-self: stretch;   /* 確保三欄等高 */
  min-width: 0;
}

/* 圓底 icon：150px 圓，#008982 10%，右上角溢出 15px */
.pay-card-icon-wrap {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(0, 137, 130, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.pay-card-icon-wrap img {
  width: 70px;
  height: 70px;
  object-fit: contain;
}

/* 數字與標題同層 */
.pay-card-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin-bottom: 10px;
}

/* 數字：Noto Serif Tamil（斜體），品牌綠 */
.pay-card-num-text {
  font-family: 'Noto Serif Tamil', serif;
  font-style: italic;
  font-size: 30px;
  font-weight: 700;
  color: #008982;
  flex-shrink: 0;
}

.pay-card-desc {
  font-size: 18px;
  color: #555;
  line-height: 1.7;
}

/* Floating decoration – features */
.pay-f-tick       { width: 70px;  top: 10%;  right: -5%;  z-index: 2; animation: pay-float 3.5s ease-in-out infinite; }
.pay-f-date-tick  { width: 66px;  top: 5%;   left: 5%;    z-index: 2; animation: pay-float 4.0s ease-in-out infinite 0.6s; }
.pay-f-add-line   { width: 80px;  bottom: 30%; right: 0;  z-index: 2; }
.pay-f-coin-pile1 { width: 60px;  bottom: 10%; left: 0;   z-index: 2; animation: pay-float 4.2s ease-in-out infinite 0.9s; }
.pay-f-coin-pile2 { width: 60px;  bottom: 5%;  right: 5%; z-index: 2; animation: pay-float 3.3s ease-in-out infinite 0.4s; }
.pay-f-clock      { width: 64px;  top: 25%;  left: -5%;   z-index: 2; animation: pay-float 4.5s ease-in-out infinite 0.7s; }
.pay-f-hands      { width: 42px;  top: 30%;  left: 0%;    z-index: 3; animation: pay-float 4.5s ease-in-out infinite 0.7s; }

/* Carousel nav (hidden on desktop) */
.pay-carousel-nav { display: none; }

/* ── Contact ── */
.pay-contact {
  background: #008982;
  padding: 30px 0 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
  margin: -100px 10% 60px;
  border-radius: 6px;
}

/* wave-1: 右上角 */
.pay-contact-wave1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 500px;
  z-index: 0;
  pointer-events: none;
}

/* wave-2: 人物後方左側 */
/* wave-2: 在 pay-contact-illus 內，絕對定位人物正後方 */
.pay-contact-wave2 {
  position: absolute;
  bottom: -150px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  max-width: none;
  z-index: 0;
  pointer-events: none;
}

.pay-contact-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 120px;
  position: relative;
  z-index: 1;
}

.pay-contact-illus {
  flex: 0 0 340px;
  position: relative;   /* wave-2 定位基準 */
}

/* 人物圖在 wave-2 上方 */
.pay-contact-people {
  width: 100%;
  display: block;
  position: relative;
  z-index: 1;
}

.pay-contact-text {
  flex: 1;
  padding-bottom: 30px;
}

.pay-contact-headline {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.pay-contact-headline img {
  width: 95px;
  height: 100px;
  object-fit: contain;
}

.pay-contact-label {
  font-size: 30px;
  font-weight: 700;
  color: #fff;
}

.pay-contact-phone {
  font-family: 'Montserrat', sans-serif;
  font-size: 50px;
  font-weight: 700;
  color: #F2D769;
  line-height: 1.2;
  margin-bottom: 18px;
}

.pay-contact-desc {
  font-size: 20px;
  color: rgba(255,255,255,0.9);
  line-height: 1.85;
}

/* ── RWD ≤ 1024px ── */
@media (max-width: 1024px) {
  .pay-banner-inner { padding: 90px 30px 80px; gap: 40px; flex-flow: column-reverse; }
  .pay-banner-text  { text-align: center; }
  .pay-title        { font-size: 40px; }
  .pay-badge        { display: inline-block; margin: 0 auto 16px; }
  .pay-btn          { justify-content: center; }
  /* banner illus 所有 icon 縮小 10% */
  .pay-banner-illus { transform: translateX(10px) scale(0.9); transform-origin: top center; }
  .pay-features-body { grid-template-columns: 1fr 1fr  1fr; gap: 20px 30px; margin: 280px 0 140px;}
  /* 三張卡片等寬：防止內容撐開 */
  .pay-card { min-width: 0; }

  /* 第二區塊的圖縮小 10% */
  .pay-features-body::before { width: 99%; }            /* BG：110% × 0.9 */
  .pay-illus-phone            { height: 108%; }          /* phone：120% × 0.9 */
  .pay-icon-talk      { width: 90px;  }
  .pay-icon-date-tick { width: 99px;  }
  .pay-icon-tick      { width: 99px;  }
  .pay-icon-coin-s    { width: 45px;  }
  .pay-icon-coin-l    { width: 72px;  }
  .pay-card-icon-wrap { width: 135px; height: 135px; }
  /* ≤1024px contact 改為滿版 */
  .pay-contact {
    margin: 0;
    border-radius: 0;
  }
  .pay-contact-inner { padding: 0 40px; gap: 40px; }
  .pay-contact-phone { font-size: 40px; }
  .pay-contact-illus { flex: 0 0 220px; }
}

/* ── RWD ≤ 768px Mobile ── */
@media (max-width: 768px) {

  /* Banner：768px 沿用 1024px 樣式，不覆蓋 */

  /* Features：左右僅留極小邊距 */
  .pay-features { padding: 60px 12px 80px; }
  .pay-features-title { font-size: 36px; }
  .pay-title-comma { display: none; }

  /* Peek carousel container */
  .pay-features-body {
    display: block;
    position: relative;
  }
  .pay-features-body  {margin: 300px 0 200px;}
  /* Carousel track (created by JS) */
  .pay-mc-track {
    display: flex;
    will-change: transform;
  }

  /* 中間卡片置中，兩側各露出一點邊 */
  .pay-card {
    flex: 0 0 88%;
    width: 88%;
    margin: 0 2%;
    box-sizing: border-box;
  }

  /* Carousel nav */
  /* nav: 疊在 body 上，按鈕貼中間卡片左右邊緣垂直置中 */
  .pay-carousel-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 calc(4% - 5px); /* 4% = peek，讓按鈕對齊卡片邊緣 */
    pointer-events: none;
    z-index: 10;
  }

  .pay-nav-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    pointer-events: auto;
  }

  .pay-nav-btn img {
    width: 44px;
    height: 44px;
    object-fit: contain;
  }

  /* Contact: 手機版滿版，取消兩側與下方留白 */
  .pay-contact {
    margin: 0;
    border-radius: 0;
    padding: 50px 0 0;
  }
  .pay-contact-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 24px;
    gap: 20px;
  }
  .pay-contact-text    { padding-bottom: 0; order: 1; display: flex; flex-direction: column; align-items: center; }
  .pay-contact-headline { justify-content: center; align-items: center;}
  .pay-contact-label   { font-size: 28px; }
  .pay-contact-phone   { font-size: 36px; }
  /* 人物排到最下方，貼齊 section 底部 */
  .pay-contact-illus   { flex: none; width: 70%; max-width: 280px; order: 2; margin-top: 20px; }
}

/* ── RWD ≤ 430px Small Mobile ── */
@media (max-width: 430px) {
  .pay-contact-desc { font-size: 20px; }
  .pay-contact{ margin-top:-160px;}
  .pay-title { font-size: 36px; }
  .pay-contact-phone { font-size: 36px; }
  /* 標題「，讓銷售更輕鬆」強制換行 */
  .pay-title-br { display: block; }

  /* Banner 插圖整組縮小 10% */
  .pay-banner-illus {
    transform: translateX(10px) scale(0.7);
    transform-origin: top center;
  }
.pay-features-body::before {width: 1200px;}
  /* 第二區塊手機插圖固定 400px 寬 */
  .pay-illus-phone {
    width: 400px;
    height: auto;
    max-width: none;
  }

  /* 第二區塊角落 icon 再縮至 1024px 值的 80% */
  .pay-icon-talk      {         width: 72px;
        left: 12%;
        top: -280px; }
  .pay-icon-date-tick { width: 79px;
        left: inherit;
        right: 20px;
        top: -220px; }
  .pay-icon-tick      { width: 79px; display: none;}
  .pay-icon-coin-s    { width: 36px;
        top: inherit;
        bottom: -0px;
        right: 40%; }
  .pay-icon-coin-l    { width: 58px;
        top: inherit;
        bottom: -70px;
        right: 20%;}
  .pay-carousel-nav   {padding: 0 calc(10% - 35px);}

  .pay-features-body  {margin: 310px 0;}
}