@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;800;900&display=swap");
 :root{
  --navy:#001b42; --navy2:#062d66; --blue:#0b63ce; --light:#eef5ff;
  --ink:#06285a; --muted:#5b6b84; --orange:#ff7a00; --border:#d6e3f7;
  --shadow:0 10px 28px rgba(0,36,88,.12); --radius:22px;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Noto Sans TC",Arial,"LiHei Pro","黑體-繁","Microsoft JhengHei","微軟正黑體",sans-serif;color:var(--ink);background:#fff;line-height:1.65}
a{text-decoration:none;color:inherit}.container{width:85vw;margin:auto}
.topbar{position:sticky;top:0;z-index:10;background:rgba(0,18,44,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.12)}
.nav{height:68px;display:flex;align-items:center;justify-content:flex-end;color:#fff}
.brand{font-size:46px;line-height:.8;font-weight:900;letter-spacing:-3px}.brand small{display:block;font-size:8px;letter-spacing:.2px;font-weight:500;margin-left:4px;opacity:.8}
.menu{display:flex;gap:30px;font-weight:700;font-size:17px}.menu a{opacity:.9}.menu a:hover,.menu a.active{color:#a8d3ff;opacity:1}
.hamburger{display:none;background:transparent;border:0;color:#fff;font-size:28px}
.hero{min-height:500px;padding:36px 0 42px;color:#fff;background:radial-gradient(circle at 78% 28%, rgba(0,160,255,.42), transparent 22%),radial-gradient(circle at 58% 62%, rgba(0,116,255,.38), transparent 28%),linear-gradient(135deg,#00122f 0%,#00275b 54%,#001329 100%);overflow:hidden;position:relative}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(circle at 70% 45%,#000 0%,transparent 72%);opacity:.7}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.25fr;gap:34px;align-items:center}
h1{font-size:50px;line-height:1.15;margin:22px 0 8px;letter-spacing:1px}.subtitle{font-size:22px;margin:0 0 22px;color:#dcecff}
.badges{display:flex;gap:28px;margin:26px 0 34px;flex-wrap:wrap}.badge{display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;font-weight:700}.badge .ico{font-size:26px;width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.32);border-radius:14px}
.stores{width:min(510px,100%);border:1px solid rgba(255,255,255,.42);border-radius:15px;padding:14px 20px 18px;background:rgba(255,255,255,.06);box-shadow:0 12px 30px rgba(0,0,0,.18)}.stores-title{text-align:center;font-weight:800;margin-bottom:10px;color:#e8f5ff}.store-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.store-logo{background:#fff;border-radius:10px;height:58px;display:grid;place-items:center;font-weight:900;box-shadow:inset 0 0 0 1px #d7e4f7}.seven{color:#e52e1b}.fm{color:#009a8c}.life{color:#d71920}.ok{color:#e60012}
.devices{position:relative;min-height:380px}.monitor,.laptop,.phone,.cloud{position:absolute;background:#fff;color:#0b2d64;box-shadow:0 25px 55px rgba(0,0,0,.38);border:7px solid #172644}.monitor{right:40px;top:10px;width:480px;height:280px;border-radius:18px}.laptop{left:32px;bottom:8px;width:360px;height:205px;border-radius:13px;border-width:6px;transform:perspective(700px) rotateY(-6deg)}.screen{height:100%;display:grid;place-items:center;background:linear-gradient(135deg,#fff 0 55%,#ff7a00 56% 72%,#0b63ce 73%);border-radius:10px;overflow:hidden}.logo9168{font-size:64px;font-weight:900;letter-spacing:-2px;color:#07316f}.logo9168 span{color:#ec3c72}.logo918{font-size:44px;font-weight:900;color:#ff6f00}.phone{right:0;bottom:26px;width:86px;height:172px;border-radius:22px;border-width:5px;display:grid;place-items:center;font-size:45px}.cloud{left:130px;top:25px;width:76px;height:76px;border-radius:50%;border:2px dashed #48d3ff;background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;font-size:36px}
section{padding:58px 0}.section-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid #eef3fb;overflow:hidden}.page-card{padding:46px 28px;margin-top:-30px;position:relative;z-index:2}
.title{text-align:center;margin:0 0 8px;font-size:36px;line-height:1.2;color:#07316f;font-weight:900}.lead{text-align:center;margin:0 0 34px;font-size:18px;color:#24436f}.title-line{display:flex;align-items:center;justify-content:center;gap:20px}.title-line:before,.title-line:after{content:"";width:150px;height:2px;background:linear-gradient(90deg,transparent,#7da8df)}.title-line:after{background:linear-gradient(90deg,#7da8df,transparent)}
.core-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.core-item{min-height:250px;padding:22px 12px;border-radius:12px;background:#fff;box-shadow:0 8px 22px rgba(19,63,123,.11);border:1px solid #edf2fa;text-align:center}.core-item .icon{height:144px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}.core-item .icon img{max-width:144px;max-height:144px;width:auto;height:auto;display:block;object-fit:contain}.core-item h3{font-size:20px;margin:0 0 6px;color:#092f69}.core-item p{font-size:14px;margin:0;color:#2c466c}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);border-radius:18px 18px 0 0;overflow:hidden;border:1px solid #bfd3ee;border-bottom:0}.tab{border:0;border-right:1px solid #bfd3ee;background:#dcecff;color:#08366f;font-weight:900;font-size:22px;padding:18px 8px;cursor:pointer}.tab:last-child{border-right:0}.tab.active{background:#fff;color:#0b2f68;box-shadow:inset 0 5px 0 #2d7ff0}.panel{display:none;background:#fff;border:1px solid #dbe6f8;border-top:0;padding:32px 36px 44px;border-radius:0 0 18px 18px;box-shadow:var(--shadow)}.panel.active{display:block}.system-logo{text-align:center;font-size:48px;font-weight:900;margin:0 0 8px}.orange{color:var(--orange)}.pink{color:#ef3e75}.safe{color:#ff5a33}.tax{color:#1857c9}.pill{margin:0 auto 28px;background:#dff7ff;color:#5f8ff6;border-radius:999px;padding:8px 20px;width:max-content;max-width:100%;font-weight:700}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.feature-grid.two{grid-template-columns:repeat(2,1fr);max-width:940px;margin:auto}.feature-grid.three{grid-template-columns:repeat(3,1fr)}.feature{display:flex;align-items:center;gap:16px;padding:22px;border-radius:14px;background:#fff;border:1px solid #edf2fa;box-shadow:0 8px 22px rgba(22,62,120,.1);min-height:124px}.feature .ficon{font-size:46px;flex:0 0 56px;text-align:center}.feature h3{margin:0 0 4px;font-size:22px;color:#092f69}.feature p{margin:0;color:#2d4d78;font-weight:700;font-size:15px}
.support-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.support-card{background:#fff;border-radius:12px;padding:16px;box-shadow:var(--shadow);border:1px solid #e3edf9;text-align:center}.support-card .pic{height:220px;border-radius:12px;background:transparent;display:flex;align-items:center;justify-content:center;margin-bottom:10px;overflow:hidden}.support-card .pic img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;object-fit:contain}
.payment-tabs{display:flex;gap:18px;justify-content:center;align-items:center;margin:26px 0 24px;flex-wrap:wrap}.pay-tab{width:112px;height:72px;border:0;border-radius:12px;background:#fff;box-shadow:0 7px 18px rgba(15,56,107,.14);font-weight:900;cursor:pointer;border:2px solid transparent;display:grid;place-items:center;padding:8px;transition:.2s ease}.pay-tab img{max-width:86px;max-height:48px;width:auto;height:auto;object-fit:contain;display:block}.pay-tab.active{border-color:#1976de;transform:translateY(-2px);box-shadow:0 10px 24px rgba(25,118,222,.22)}.payment-panel{display:none;max-width:820px;margin:auto;background:#fff;border:1px solid #d6d6d6;padding:22px;box-shadow:0 8px 20px rgba(0,0,0,.08)}.payment-panel.active{display:block}.flow-title{text-align:center;font-size:34px;font-weight:900;color:#111;margin:0 0 18px}.flow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.step{border:1px solid #d9e3ef;border-radius:12px;padding:14px;background:#fbfdff;min-height:150px}.step b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#15a05d;color:#fff;margin-right:8px}.step h4{margin:0 0 10px;font-size:18px;color:#092f69}.step .mock{height:68px;border-radius:8px;background:linear-gradient(135deg,#edf4ff,#fff);border:1px dashed #9fb7d7;display:grid;place-items:center;color:#7c8ba3}
.contact-form{max-width:540px;margin:28px auto 0;display:grid;gap:12px}.form-row{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:12px}input,textarea{width:100%;border:2px solid #07316f;border-radius:8px;padding:10px 12px;font:inherit}textarea{height:120px;resize:vertical}.submit{justify-self:end;background:#062f68;color:#fff;border:0;border-radius:8px;padding:10px 32px;font-weight:900;font-size:16px}
footer{background:linear-gradient(135deg,#001a3d,#00337a);color:#fff;padding:42px 0 18px;position:relative;overflow:hidden}.footer-grid{display:grid;grid-template-columns:1.4fr 1.25fr 1fr 1.2fr;gap:34px}.footer-box{border-right:1px solid rgba(255,255,255,.45);padding-right:22px}.footer-box:last-child{border-right:0}.footer-box h3{font-size:22px;margin:0 0 16px}.footer-box p{margin:6px 0;color:#e6f0ff}.cert{background:#f7ead1;color:#6c4a17;border-radius:12px;height:160px;display:grid;place-items:center;text-align:center;font-weight:900;border:3px solid #fff}.notice{font-size:11px;color:#eaf4ff;border-top:1px solid rgba(255,255,255,.22);margin-top:28px;padding-top:12px}.bank{text-align:right;color:#eaffea;font-weight:900;margin-top:4px}
@media(max-width:980px){.hamburger{display:block}.menu{display:none;position:absolute;right:4vw;top:68px;flex-direction:column;background:#031d43;border:1px solid rgba(255,255,255,.15);border-radius:16px;padding:18px 24px;gap:16px}.menu.open{display:flex}.hero-grid{grid-template-columns:1fr}.devices{display:none}.core-grid,.support-cards,.feature-grid,.feature-grid.three{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}.footer-box{border-right:0;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:18px}}
@media(max-width:640px){.brand{font-size:38px}h1{font-size:36px}.subtitle{font-size:17px}.core-grid,.support-cards,.feature-grid,.feature-grid.two,.feature-grid.three,.flow-grid{grid-template-columns:1fr}.tabs{grid-template-columns:1fr 1fr}.tab{font-size:16px;padding:13px 4px}.panel{padding:26px 14px}.title{font-size:30px}.form-row{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid #1a73e8;border-radius:9px;color:#1261c3;font-weight:800;padding:11px 34px;background:#fff;cursor:pointer}.btn:hover{background:#eef6ff}

.home-core-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
@media(max-width:980px){.home-core-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.home-core-grid{grid-template-columns:1fr}}

.card-btn{display:inline-flex;align-items:center;justify-content:center;margin-top:12px;border:2px solid #1a73e8;border-radius:999px;color:#1261c3;font-weight:900;padding:7px 22px;background:#fff}
.card-btn:hover{background:#eef6ff}


/* Index page banner: match the same 90% page width as the core system block below */
.index-banner{
  width:85vw;
  margin:0 auto;
  min-height:0;
  height:auto;
  aspect-ratio:1500/817;
  padding:0;
  background:url("../images/index-banner.jpg") center center / contain no-repeat;
}
.index-banner::before,
.index-banner::after{
  display:none;
}
@media(max-width:640px){
  .index-banner{
    width:85vw;
    aspect-ratio:1500/817;
    background-size:contain;
    background-position:center center;
  }
}


/* Home page: overlap core system block slightly over the banner */
.home-core-section{
  padding-top:0;
}
.home-core-section .page-card{
  margin-top:-42px;
  position:relative;
  z-index:3;
}
@media(max-width:640px){
  .home-core-section .page-card{
    margin-top:-24px;
  }
}

/* Home page: add a light cyan panel behind the support functions and tuck it under the core section */
.home-support-section{
  padding-top:0;
  padding-bottom:24px;
  margin-top:-36px;
  position:relative;
  z-index:2;
}
.home-support-card{
  background:linear-gradient(180deg,#effcff 0%,#f7fdff 58%,#ffffff 100%);
  border:1px solid #cceff6;
  border-radius:28px;
  padding:30px 28px 30px;
  box-shadow:0 10px 28px rgba(0,78,120,.12);
  overflow:visible;
}
.home-support-card .support-card{
  border-color:#d8edf5;
}
@media(max-width:640px){
  .home-support-section{
    margin-top:-22px;
    padding-bottom:18px;
  }
  .home-support-card{
    padding:26px 18px 28px;
    border-radius:22px;
  }
}


/* Core function icons: 1.5x size, keep all six cards displayed normally */
@media(max-width:980px){
  .core-item .icon{height:132px;}
  .core-item .icon img{max-width:132px;max-height:132px;}
}
@media(max-width:640px){
  .core-item .icon{height:126px;}
  .core-item .icon img{max-width:126px;max-height:126px;}
  .core-item{min-height:auto;}
}

@media(max-width:980px){.support-card .pic{height:200px;}}
@media(max-width:640px){.support-card .pic{height:220px;}}


/* Unified style for homepage support cards */
.home-support-card .support-card h3{
  color:#0a3d8f;
  font-size:20px;
  font-weight:900;
  margin:12px 0 8px;
  line-height:1.35;
}
.home-support-card .support-card .card-btn{
  color:#0f63d8;
  border-color:#0f63d8;
  background:linear-gradient(180deg,#ffffff 0%,#f3f9ff 100%);
  box-shadow:0 4px 12px rgba(15,99,216,.10);
}
.home-support-card .support-card .card-btn:hover{
  background:linear-gradient(180deg,#f5fbff 0%,#e8f3ff 100%);
}
.home-support-card .support-card .card-btn:focus-visible{
  outline:2px solid rgba(15,99,216,.28);
  outline-offset:2px;
}

.home-support-card .title-line{margin-top:0;margin-bottom:10px;}


/* Homepage payment section spacing: align with the spacing rhythm of the two sections above */
.home-payment-section{
  padding-top:0;
}
.home-payment-card{
  padding:46px 24px;
}
@media(max-width:640px){
  .home-payment-section{
    padding-top:0;
  }
  .home-payment-card{
    padding:38px 18px;
  }
}


/* Payment section title + card image tuning */
.home-payment-card .title-line{margin-top:0;margin-bottom:10px;}
.home-payment-card .support-card .pic{
  height:220px;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.home-payment-card .support-card .pic img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  display:block;
  object-fit:contain;
}
.home-payment-card .support-card h3{
  color:#0a3d8f;
  font-size:20px;
  font-weight:900;
  margin:12px 0 8px;
  line-height:1.35;
}
.home-payment-card .support-card p{
  color:#2c466c;
}
@media(max-width:980px){
  .home-payment-card .support-card .pic{height:200px;}
}
@media(max-width:640px){
  .home-payment-card .support-card .pic{height:220px;}
}


/* Payment section warning note */
.home-payment-card .payment-alert-note,
.page-card .payment-alert-note{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:#eef5ff;
  border:1px solid #b8d2ff;
  border-radius:999px;
  padding:8px 18px;
  width:max-content;
  max-width:100%;
  margin:0 auto 22px;
  color:#5f8ff6;
  font-size:16px;
  font-weight:700;
  line-height:1.5;
  text-align:center;
}
.home-payment-card .payment-alert-note .note-icon,
.page-card .payment-alert-note .note-icon{
  width:22px;
  height:22px;
  border:2px solid #6d97ff;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 22px;
  color:#6d97ff;
  font-size:15px;
  font-weight:900;
  line-height:1;
  box-sizing:border-box;
}
@media(max-width:640px){
  .home-payment-card .payment-alert-note,
.page-card .payment-alert-note{
    font-size:14px;
    padding:8px 12px;
    border-radius:18px;
  }
  .home-payment-card .payment-alert-note .note-icon,
.page-card .payment-alert-note .note-icon{
    width:20px;
    height:20px;
    flex-basis:20px;
    font-size:14px;
  }
}


/* Center payment warning note text */
.home-payment-card .payment-alert-note,
.page-card .payment-alert-note{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.home-payment-card .payment-alert-note span:last-child,
.page-card .payment-alert-note span:last-child{
  text-align:center;
}


/* Unified card visual language across core / support / payment sections */
.home-core-section .core-item,
.home-support-card .support-card,
.home-payment-card .support-card{
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  border:1px solid #d9e7f6;
  border-radius:18px;
  box-shadow:0 10px 26px rgba(18,58,112,.10);
}

.home-core-section .core-item{
  min-height:262px;
  padding:20px 14px 18px;
}
.home-support-card .support-card,
.home-payment-card .support-card{
  padding:18px 16px 16px;
}

.home-core-section .core-item h3,
.home-support-card .support-card h3,
.home-payment-card .support-card h3{
  color:#0a3d8f;
  font-size:20px;
  font-weight:900;
  line-height:1.35;
  margin:12px 0 8px;
}

.home-core-section .core-item p,
.home-support-card .support-card p,
.home-payment-card .support-card p{
  color:#2c466c;
  font-size:14px;
  line-height:1.65;
  margin:0;
}

.home-core-section .core-item .icon,
.home-support-card .support-card .pic,
.home-payment-card .support-card .pic{
  margin-bottom:10px;
}

.home-support-card .support-card .card-btn,
.home-payment-card .btn{
  box-shadow:0 4px 12px rgba(15,99,216,.10);
}

@media(max-width:640px){
  .home-core-section .core-item,
  .home-support-card .support-card,
  .home-payment-card .support-card{
    border-radius:16px;
  }
  .home-core-section .core-item{
    min-height:auto;
    padding:18px 14px 16px;
  }
}


/* Footer about block: icons + aligned contact info */
.footer-about .about-company{
  margin:0 0 12px;
  color:#fff;
  font-size:18px;
}
.footer-about .about-list{
  display:grid;
  gap:8px;
}
.footer-about .about-row{
  display:grid;
  grid-template-columns:18px max-content 1fr;
  gap:10px;
  align-items:start;
}
.footer-about .about-label,
.footer-about .about-value{
  font-size:15px;
  line-height:1.6;
  color:#e6f0ff;
}
.footer-about .about-label{
  white-space:nowrap;
  font-weight:700;
}
.footer-about .about-value{
  min-width:0;
}
.footer-about .about-icon{
  width:18px;
  height:18px;
  display:block;
  margin-top:4px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.98;
}
.footer-about .icon-id{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 7h8M8 11h8M8 15h5'/%3E%3C/svg%3E");}
.footer-about .icon-address{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6-4.6-6-10a6 6 0 1 1 12 0c0 5.4-6 10-6 10Z'/%3E%3Ccircle cx='12' cy='11' r='2.5'/%3E%3C/svg%3E");}
.footer-about .icon-phone{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2A19.8 19.8 0 0 1 11.2 19a19.4 19.4 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7l.5 3a2 2 0 0 1-.6 1.8l-1.3 1.3a16 16 0 0 0 6.4 6.4l1.3-1.3a2 2 0 0 1 1.8-.6l3 .5A2 2 0 0 1 22 16.9Z'/%3E%3C/svg%3E");}
.footer-about .icon-fax{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8V4h10v4'/%3E%3Crect x='4' y='8' width='16' height='8' rx='2'/%3E%3Cpath d='M7 16h10v4H7zM8 12h.01M12 12h5M9 20h6'/%3E%3C/svg%3E");}

@media(max-width:640px){
  .footer-about .about-row{
    grid-template-columns:18px max-content 1fr;
    gap:8px;
  }
  .footer-about .about-label,
  .footer-about .about-value{
    font-size:14px;
    line-height:1.55;
  }
}


/* Footer trust block: icons + structured rows */
.footer-trust .trust-list{
  display:grid;
  gap:14px;
}
.footer-trust .trust-row{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:12px;
  align-items:start;
}
.footer-trust .trust-icon{
  width:34px;
  height:34px;
  display:block;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  margin-top:2px;
}
.footer-trust .trust-title{
  color:#fff;
  font-size:16px;
  font-weight:800;
  line-height:1.35;
  margin-bottom:2px;
}
.footer-trust .trust-content small{
  display:block;
  color:#e6f0ff;
  font-size:14px;
  line-height:1.55;
  font-weight:600;
}
.footer-trust .trust-icon-lock{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 1 1 8 0v3'/%3E%3Ccircle cx='12' cy='15' r='1.3'/%3E%3Cpath d='M12 16.3v1.7'/%3E%3C/svg%3E");}
.footer-trust .trust-icon-shield{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 5-3.4 8.7-7 10-3.6-1.3-7-5-7-10V6l7-3z'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E");}
.footer-trust .trust-icon-tax{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 5-3.4 8.7-7 10-3.6-1.3-7-5-7-10V6l7-3z'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E");}

@media(max-width:640px){
  .footer-trust .trust-row{
    grid-template-columns:30px 1fr;
    gap:10px;
  }
  .footer-trust .trust-icon{
    width:30px;
    height:30px;
  }
  .footer-trust .trust-title{
    font-size:15px;
  }
  .footer-trust .trust-content small{
    font-size:13px;
  }
}


/* Footer connect block: social + contact */
.footer-connect .connect-section h3{
  margin:0 0 14px;
}
.footer-connect .connect-divider{
  height:1px;
  background:rgba(255,255,255,.45);
  margin:16px 0 18px;
}
.footer-connect .connect-row{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:14px;
  align-items:center;
}
.footer-connect .connect-icon{
  width:44px;
  height:44px;
  display:block;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
.footer-connect .connect-text{
  color:#fff;
  font-size:15px;
  line-height:1.55;
  font-weight:700;
}
.footer-connect .social-row .connect-text b{
  display:block;
  font-size:16px;
  color:#fff;
}
.footer-connect .contact-row .connect-text{
  color:#e6f0ff;
  font-weight:700;
}
.footer-connect .connect-icon-fb{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' rx='10' fill='%231877F2'/%3E%3Cpath fill='%23fff' d='M28.7 15.3h4V9.5c-.7-.1-3-.3-5.5-.3-5.5 0-9.2 3.4-9.2 9.7v5.4h-6v6.5h6V47h7.4V30.8h6l1-6.5h-7V19.6c0-1.9.5-4.3 4.3-4.3z'/%3E%3C/svg%3E");}
.footer-connect .connect-icon-headset{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 24a14 14 0 0 1 28 0'/%3E%3Cpath d='M10 25v8a4 4 0 0 0 4 4h2V23h-2a4 4 0 0 0-4 4ZM38 25v8a4 4 0 0 1-4 4h-2V23h2a4 4 0 0 1 4 4Z'/%3E%3Cpath d='M34 37a6 6 0 0 1-6 6h-4'/%3E%3C/svg%3E");}

@media(max-width:640px){
  .footer-connect .connect-row{
    grid-template-columns:40px 1fr;
    gap:12px;
  }
  .footer-connect .connect-icon{
    width:40px;
    height:40px;
  }
  .footer-connect .connect-text{
    font-size:14px;
  }
  .footer-connect .social-row .connect-text b{
    font-size:15px;
  }
}


/* Footer certificate thumbnail with hover enlarge */
.footer-cert-box{
  overflow:visible;
}
.cert-card{
  background:#103a7a;
  border:1px solid rgba(255,255,255,.42);
  border-radius:18px;
  padding:10px 10px 12px;
  text-align:center;
  overflow:visible;
}
.cert-thumb-wrap{
  position:relative;
  border-radius:14px;
  overflow:visible;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:160px;
}
.cert-thumb{
  width:100%;
  max-width:240px;
  height:auto;
  display:block;
  border-radius:8px;
  background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  transition:transform .28s ease, box-shadow .28s ease;
  transform-origin:center center;
  position:relative;
  z-index:1;
}
.cert-thumb-wrap:hover .cert-thumb{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-72%) scale(3.0);
  box-shadow:0 24px 54px rgba(0,0,0,.36);
  z-index:30;
}
.cert-caption{
  margin-top:10px;
  color:#fff;
  font-weight:900;
  font-size:16px;
  line-height:1.35;
}
@media(max-width:980px){
  .cert-thumb-wrap{
    min-height:150px;
  }
  .cert-thumb-wrap:hover .cert-thumb{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-68%) scale(2.2);
  }
}
@media(max-width:640px){
  .cert-card{
    padding:10px 10px 12px;
  }
  .cert-thumb{
    max-width:220px;
  }
  .cert-thumb-wrap{
    min-height:140px;
  }
  .cert-thumb-wrap:hover .cert-thumb{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-62%) scale(1.5);
  }
}


/* Footer four-column equal-height alignment */
footer .footer-grid{
  align-items:stretch;
}
footer .footer-box{
  min-height:238px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
footer .footer-box h3{
  min-height:30px;
}
.footer-about .about-list,
.footer-trust .trust-list,
.footer-connect{
  flex:1;
}
.footer-connect{
  justify-content:flex-start;
}
.footer-cert-box{
  justify-content:center;
}
.footer-cert-box .cert-card{
  width:100%;
  min-height:210px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.footer-cert-box .cert-thumb{
  max-height:150px;
  object-fit:cover;
  object-position:center;
}
@media(max-width:980px){
  footer .footer-box{
    min-height:220px;
  }
  .footer-cert-box .cert-card{
    min-height:200px;
  }
}
@media(max-width:640px){
  footer .footer-box{
    min-height:auto;
  }
  footer .footer-box h3{
    min-height:0;
  }
  .footer-cert-box{
    justify-content:flex-start;
  }
  .footer-cert-box .cert-card{
    min-height:auto;
  }
  .footer-cert-box .cert-thumb{
    max-height:none;
  }
}


/* Ensure certificate hover can rise above the section above */
footer{
  position:relative;
  z-index:20;
  overflow:visible;
}
.footer-cert-box,
.cert-card,
.cert-thumb-wrap{
  overflow:visible;
}
.footer-cert-box .cert-thumb-wrap:hover{
  position:relative;
  z-index:40;
}
.footer-cert-box .cert-thumb-wrap:hover .cert-thumb{
  position:relative;
  z-index:50;
}


/* Bottom notice area: white background with warning text and Sunny Bank logo */
.notice-wrap{
  background:#ffffff;
  margin-top:14px;
  position:relative;
  z-index:2;
}
.notice.notice-panel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:14px 0 12px;
  color:#12386f;
  border-top:1px solid rgba(0,34,88,.10);
}
.notice-left{
  flex:1 1 auto;
  display:flex;
  align-items:flex-start;
  gap:14px;
  min-width:0;
}
.notice-badge{
  width:36px;
  height:36px;
  flex:0 0 36px;
  border-radius:50%;
  border:2px solid #5d82e8;
  color:#5d82e8;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:24px;
  line-height:1;
  margin-top:2px;
  box-sizing:border-box;
}
.notice-content{
  min-width:0;
}
.notice-title{
  display:inline-block;
  font-weight:900;
  color:#12386f;
  margin:0 0 6px;
  font-size:15px;
}
.notice-list{
  margin:0;
  padding-left:18px;
  color:#21477f;
  font-size:14px;
  line-height:1.65;
}
.notice-list li{margin:0 0 2px;}
.notice-right{
  flex:0 0 auto;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}
.sunny-bank-logo{
  display:flex;
  align-items:center;
  gap:12px;
  white-space:nowrap;
}
.sunny-bank-mark{
  width:68px;
  height:68px;
  border-radius:50%;
  border:4px solid #14a357;
  color:#14a357;
  font-weight:900;
  font-size:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  box-sizing:border-box;
}
.sunny-bank-mark::before,
.sunny-bank-mark::after{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:50%;
  border:4px solid transparent;
  border-top-color:#14a357;
  border-bottom-color:#14a357;
  transform:rotate(16deg);
}
.sunny-bank-mark::after{
  inset:20px 8px;
  border-width:3px;
  border-left-color:#14a357;
  border-right-color:#14a357;
  border-top-color:transparent;
  border-bottom-color:transparent;
}
.sunny-bank-wording{line-height:1.1;}
.sunny-bank-cjk{
  color:#17954f;
  font-size:20px;
  font-weight:900;
  letter-spacing:1px;
}
.sunny-bank-eng{
  color:#e29b21;
  font-size:18px;
  font-weight:900;
  margin-top:3px;
}
.bank{display:none;}
@media(max-width:980px){
  .notice.notice-panel{
    flex-direction:column;
    align-items:flex-start;
  }
  .notice-right{
    width:100%;
    justify-content:flex-start;
  }
}
@media(max-width:640px){
  .notice-wrap{
    margin-top:10px;
  }
  .notice.notice-panel{
    padding:12px 0 10px;
    gap:14px;
  }
  .notice-left{
    gap:10px;
  }
  .notice-badge{
    width:30px;
    height:30px;
    flex-basis:30px;
    font-size:20px;
  }
  .notice-title{
    font-size:14px;
  }
  .notice-list{
    font-size:13px;
    padding-left:16px;
    line-height:1.58;
  }
  .sunny-bank-mark{
    width:56px;
    height:56px;
    font-size:15px;
  }
  .sunny-bank-cjk{
    font-size:18px;
  }
  .sunny-bank-eng{
    font-size:15px;
  }
}


/* Refine bottom notice proportions and Sunny Bank logo style */
.notice.notice-panel{
  padding:10px 0 9px;
  gap:20px;
}
.notice-badge{
  width:32px;
  height:32px;
  flex-basis:32px;
  font-size:21px;
  border-color:#5f83d9;
  color:#5f83d9;
}
.notice-title{
  font-size:13px;
  margin-bottom:4px;
}
.notice-list{
  font-size:12px;
  line-height:1.55;
  color:#153d7a;
}
.notice-list li{
  margin-bottom:1px;
}
.sunny-bank-logo{
  gap:10px;
}
.sunny-bank-mark{
  width:58px;
  height:58px;
  border:0;
  color:#148c48;
  font-size:30px;
  font-family:Arial, sans-serif;
  font-style:italic;
  background:
    radial-gradient(circle at 50% 50%, transparent 42%, #148c48 44% 48%, transparent 50%),
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(20,140,72,.95) 9px 11px, transparent 12px 16px),
    repeating-linear-gradient(0deg, transparent 0 9px, rgba(20,140,72,.5) 10px 11px, transparent 12px 18px);
  border-radius:50%;
  overflow:hidden;
}
.sunny-bank-mark::before,
.sunny-bank-mark::after{
  display:none;
}
.sunny-bank-mark span{
  position:relative;
  z-index:2;
  background:#fff;
  color:#148c48;
  border-radius:50%;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  box-shadow:0 0 0 2px #148c48;
}
.sunny-bank-cjk{
  font-size:18px;
  color:#14914a;
  font-weight:900;
  letter-spacing:.8px;
}
.sunny-bank-eng{
  font-size:16px;
  color:#14914a;
  letter-spacing:.2px;
}
@media(max-width:640px){
  .notice.notice-panel{
    padding:9px 0 8px;
  }
  .notice-badge{
    width:28px;
    height:28px;
    flex-basis:28px;
    font-size:18px;
  }
  .notice-title{
    font-size:12px;
  }
  .notice-list{
    font-size:11px;
    line-height:1.5;
  }
  .sunny-bank-mark{
    width:50px;
    height:50px;
    font-size:25px;
  }
  .sunny-bank-mark span{
    width:26px;
    height:26px;
  }
  .sunny-bank-cjk{
    font-size:16px;
  }
  .sunny-bank-eng{
    font-size:14px;
  }
}


/* Use provided Sunny Bank image logo in bottom notice */
.sunny-bank-logo{
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.sunny-bank-logo img{
  display:block;
  width:min(430px, 100%);
  height:auto;
}
@media(max-width:980px){
  .sunny-bank-logo{
    justify-content:flex-start;
  }
  .sunny-bank-logo img{
    width:min(400px, 100%);
  }
}
@media(max-width:640px){
  .sunny-bank-logo img{
    width:min(320px, 100%);
  }
}


/* Use uploaded notice icon image */
.notice-badge{display:none;}
.notice-badge-img{
  width:48px;
  height:auto;
  flex:0 0 48px;
  display:block;
  margin-top:2px;
}
@media(max-width:640px){
  .notice-badge-img{
    width:40px;
    flex-basis:40px;
  }
}


/* Bottom notice area refined to match reference screenshot */
.notice.notice-panel{
  gap:18px;
  padding:8px 0 7px;
}
.notice-left{
  align-items:center;
  gap:10px;
}
.notice-content{
  flex:1 1 auto;
}
.notice-title,
.notice-list,
.notice-list li{
  display:none;
}
.notice-inline{
  margin:0;
  color:#163c77;
  font-size:11px;
  line-height:1.5;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.notice-bullet{
  color:#153f89;
  font-weight:900;
}
.notice-badge-img{
  width:54px;
  flex:0 0 54px;
  margin-top:0;
}
.notice-right{
  flex:0 0 auto;
  align-items:center;
}
.sunny-bank-logo img{
  width:320px;
  max-width:100%;
  height:auto;
}
@media(max-width:1180px){
  .notice-inline{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }
  .sunny-bank-logo img{
    width:280px;
  }
}
@media(max-width:980px){
  .notice.notice-panel{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .notice-left{
    align-items:flex-start;
  }
  .notice-inline{
    white-space:normal;
    font-size:11px;
  }
  .notice-right{
    width:100%;
    justify-content:flex-start;
  }
  .sunny-bank-logo img{
    width:260px;
  }
}
@media(max-width:640px){
  .notice.notice-panel{
    padding:8px 0 6px;
  }
  .notice-badge-img{
    width:44px;
    flex-basis:44px;
  }
  .notice-inline{
    font-size:10px;
    line-height:1.45;
  }
  .sunny-bank-logo img{
    width:220px;
  }
}


/* Bottom notice: three separate warning lines */
.notice-inline{display:none;}
.notice-three-list{
  display:block;
  margin:0;
  padding-left:16px;
  color:#163c77;
  font-size:11px;
  line-height:1.55;
  font-weight:700;
}
.notice-three-list li{
  margin:0 0 1px;
}
.notice-badge-img{
  align-self:flex-start;
  margin-top:2px;
}
@media(max-width:640px){
  .notice-three-list{
    font-size:10px;
    line-height:1.45;
    padding-left:14px;
  }
}


/* Refine bottom notice icon/text/logo proportions */
.notice.notice-panel{
  gap:14px;
  padding:7px 0 6px;
}
.notice-left{
  align-items:flex-start;
  gap:8px;
}
.notice-badge-img{
  width:38px;
  height:auto;
  flex:0 0 38px;
  margin-top:3px;
}
.notice-three-list{
  font-size:10.5px;
  line-height:1.5;
  padding-left:14px;
}
.notice-three-list li{
  margin:0 0 2px;
}
.notice-right{
  flex:0 0 auto;
  align-items:center;
}
.sunny-bank-logo img{
  width:270px;
  height:auto;
}
@media(max-width:980px){
  .sunny-bank-logo img{
    width:240px;
  }
}
@media(max-width:640px){
  .notice.notice-panel{
    gap:10px;
    padding:7px 0 6px;
  }
  .notice-badge-img{
    width:34px;
    flex-basis:34px;
    margin-top:2px;
  }
  .notice-three-list{
    font-size:10px;
    line-height:1.42;
    padding-left:13px;
  }
  .sunny-bank-logo img{
    width:210px;
  }
}


/* Enlarge notice icon to 1.5x */
.notice-badge-img{
  width:57px;
  height:auto;
  flex:0 0 57px;
  margin-top:2px;
}
@media(max-width:640px){
  .notice-badge-img{
    width:51px;
    flex-basis:51px;
    margin-top:2px;
  }
}


/* Fine-tune notice icon size and vertical alignment */
.notice-left{
  align-items:center;
}
.notice-badge-img{
  width:46px;
  height:auto;
  flex:0 0 46px;
  align-self:center;
  margin-top:0;
}
.notice-three-list{
  margin:0;
}
@media(max-width:640px){
  .notice-left{
    align-items:center;
  }
  .notice-badge-img{
    width:42px;
    flex-basis:42px;
    align-self:center;
    margin-top:0;
  }
}


/* footer social link */
.footer-connect .social-link{
  text-decoration:none;
  color:inherit;
}
.footer-connect .social-link:hover .connect-text b{
  text-decoration:underline;
}


/* Inner pages: overlap first content card over the shared banner */
.inner-overlap-section{
  padding-top:0;
}
.inner-overlap-section .page-card{
  margin-top:-42px;
  position:relative;
  z-index:3;
}
@media(max-width:640px){
  .inner-overlap-section .page-card{
    margin-top:-24px;
  }
}


/* Contact submit button: make clickable state obvious */
.contact-form .submit{
  position:relative;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.contact-form .submit::after{
  content:"點擊送出";
  position:absolute;
  left:50%;
  bottom:calc(100% + 9px);
  transform:translateX(-50%) translateY(4px);
  background:#07316f;
  color:#fff;
  font-size:13px;
  line-height:1;
  font-weight:800;
  white-space:nowrap;
  padding:7px 10px;
  border-radius:999px;
  opacity:0;
  pointer-events:none;
  box-shadow:0 8px 18px rgba(7,49,111,.20);
  transition:opacity .18s ease, transform .18s ease;
}
.contact-form .submit::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:calc(100% + 2px);
  transform:translateX(-50%) translateY(4px);
  border-width:7px 6px 0 6px;
  border-style:solid;
  border-color:#07316f transparent transparent transparent;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.contact-form .submit:hover,
.contact-form .submit:focus-visible{
  background:#0d63d6;
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(13,99,214,.28);
}
.contact-form .submit:hover::after,
.contact-form .submit:hover::before,
.contact-form .submit:focus-visible::after,
.contact-form .submit:focus-visible::before{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.contact-form .submit:active{
  transform:translateY(0);
  box-shadow:0 5px 12px rgba(13,99,214,.22);
}


/* Index footer copyright under notice */
.footer-copyright{
  color:#52627a;
  font-size:10px;
  line-height:1.4;
  text-align:center;
  padding:0 0 8px;
  letter-spacing:.1px;
}
@media(max-width:640px){
  .footer-copyright{
    font-size:9px;
    padding-bottom:7px;
  }
}


/* Move index copyright to the bottom blue footer bar */
.footer-copyright{display:none;}
.footer-bottom-copyright{
  color:#d8e8ff;
  font-size:10px;
  line-height:1.4;
  text-align:center;
  padding:8px 0 2px;
  letter-spacing:.1px;
}
@media(max-width:640px){
  .footer-bottom-copyright{
    font-size:9px;
    padding:7px 0 2px;
  }
}

/* Sunny Bank logo: reduce current size by 0.5x */
.sunny-bank-logo img{
  width:270px;
  height:auto;
  max-width:100%;
}
.notice-right{
  flex:0 0 auto;
}
@media(max-width:1180px){
  .sunny-bank-logo img{
    width:240px;
  }
}
@media(max-width:980px){
  .sunny-bank-logo img{
    width:210px;
  }
}
@media(max-width:640px){
  .sunny-bank-logo img{
    width:150px;
  }
}


/* Refine bottom notice area to match reference: larger logo, tighter vertical spacing */
.notice.notice-panel{
  align-items:center;
  gap:12px;
  padding:4px 0 3px;
}
.notice-left{
  align-items:flex-start;
  gap:8px;
  flex:1 1 auto;
}
.notice-content{
  min-width:0;
}
.notice-badge-img{
  width:44px;
  flex:0 0 44px;
  margin-top:1px;
}
.notice-three-list{
  margin:0;
  padding-left:13px;
  font-size:10px;
  line-height:1.34;
}
.notice-three-list li{
  margin:0 0 1px;
}
.notice-right{
  flex:0 0 auto;
  align-self:center;
}
.sunny-bank-logo{
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.sunny-bank-logo img{
  width:360px;
  height:auto;
  max-width:100%;
}
.footer-bottom-copyright{
  padding:5px 0 2px;
}
@media(max-width:1180px){
  .sunny-bank-logo img{
    width:320px;
  }
}
@media(max-width:980px){
  .notice.notice-panel{
    gap:10px;
    padding:8px 0 6px;
  }
  .sunny-bank-logo img{
    width:270px;
  }
}
@media(max-width:640px){
  .notice.notice-panel{
    padding:8px 0 6px;
  }
  .notice-badge-img{
    width:40px;
    flex-basis:40px;
  }
  .notice-three-list{
    font-size:9.5px;
    line-height:1.32;
    padding-left:12px;
  }
  .sunny-bank-logo img{
    width:220px;
  }
}


/* Site width reverted to 80% layout */
.container{
  width:min(1180px,80vw);
}
.index-banner{
  width:min(1180px,80vw);
}
@media(max-width:640px){
  .container,
  .index-banner{
    width:min(1180px,92vw);
  }
}


/* Site width: 83% */
.container,
.index-banner{
  width:83%;
  max-width:none;
}
@media(max-width:640px){
  .container,
  .index-banner{
    width:92vw;
  }
}


/* Site width: 81% */
.container,
.index-banner{
  width:81%;
  max-width:none;
}
@media(max-width:640px){
  .container,
  .index-banner{
    width:92vw;
  }
}


/* Site width: 80% */
.container,
.index-banner{
  width:80%;
  max-width:none;
}
@media(max-width:640px){
  .container,
  .index-banner{
    width:92vw;
  }
}


/* Site width: 75% */
.container,
.index-banner{
  width:75%;
  max-width:none;
}
@media(max-width:640px){
  .container,
  .index-banner{
    width:92vw;
  }
}


/* Site width: 70% */
.container,
.index-banner{
  width:70%;
  max-width:none;
}
@media(max-width:640px){
  .container,
  .index-banner{
    width:92vw;
  }
}


/* Footer text one step smaller + Facebook hover cue */
footer .footer-box h3{
  font-size:20px;
}
.footer-about .about-company{
  font-size:17px;
}
.footer-about .about-label,
.footer-about .about-value{
  font-size:14px;
  line-height:1.55;
}
.footer-trust .trust-title{
  font-size:15px;
}
.footer-trust .trust-content small{
  font-size:13px;
  line-height:1.5;
}
.footer-connect .connect-text{
  font-size:14px;
  line-height:1.5;
}
.footer-connect .social-row .connect-text b{
  font-size:15px;
}
.cert-caption{
  font-size:15px;
}

.footer-connect .social-link{
  display:grid;
  text-decoration:none;
  color:inherit;
  transition:transform .22s ease, filter .22s ease;
}
.footer-connect .social-link .connect-icon,
.footer-connect .social-link .connect-text,
.footer-connect .social-link .connect-text b{
  transition:transform .22s ease, color .22s ease, text-shadow .22s ease, box-shadow .22s ease, filter .22s ease;
}
.footer-connect .social-link:hover,
.footer-connect .social-link:focus-visible{
  transform:translateY(-3px);
}
.footer-connect .social-link:hover .connect-icon,
.footer-connect .social-link:focus-visible .connect-icon{
  filter:brightness(1.12) saturate(1.08);
  box-shadow:0 8px 18px rgba(24,119,242,.28);
  border-radius:10px;
}
.footer-connect .social-link:hover .connect-text,
.footer-connect .social-link:focus-visible .connect-text,
.footer-connect .social-link:hover .connect-text b,
.footer-connect .social-link:focus-visible .connect-text b{
  color:#8ec5ff;
  text-shadow:0 0 10px rgba(142,197,255,.18);
}
.footer-connect .social-link:hover .connect-text b,
.footer-connect .social-link:focus-visible .connect-text b{
  text-decoration:underline;
  text-underline-offset:4px;
}

@media(max-width:640px){
  footer .footer-box h3{
    font-size:18px;
  }
  .footer-about .about-company{
    font-size:16px;
  }
  .footer-about .about-label,
  .footer-about .about-value{
    font-size:13px;
  }
  .footer-trust .trust-title{
    font-size:14px;
  }
  .footer-trust .trust-content small{
    font-size:12px;
  }
  .footer-connect .connect-text{
    font-size:13px;
  }
  .footer-connect .social-row .connect-text b{
    font-size:14px;
  }
  .cert-caption{
    font-size:14px;
  }
}


/* Tighten footer text paragraph spacing */
.footer-about .about-company{
  margin:0 0 8px;
}
.footer-about .about-list{
  gap:4px;
}
.footer-about .about-row{
  gap:8px;
}
.footer-about .about-label,
.footer-about .about-value{
  line-height:1.42;
}
.footer-about .about-icon{
  margin-top:2px;
}

.footer-trust .trust-list{
  gap:10px;
}
.footer-trust .trust-row{
  gap:10px;
}
.footer-trust .trust-title{
  line-height:1.22;
  margin-bottom:0;
}
.footer-trust .trust-content small{
  line-height:1.38;
}

.footer-connect .connect-section h3{
  margin:0 0 10px;
}
.footer-connect .connect-divider{
  margin:12px 0 14px;
}
.footer-connect .connect-row{
  gap:12px;
}
.footer-connect .connect-text{
  line-height:1.38;
}
.footer-connect .contact-row .connect-text{
  line-height:1.38;
}

@media(max-width:640px){
  .footer-about .about-list{
    gap:3px;
  }
  .footer-trust .trust-list{
    gap:8px;
  }
  .footer-connect .connect-section h3{
    margin:0 0 8px;
  }
  .footer-connect .connect-divider{
    margin:10px 0 12px;
  }
}


/* Tighten footer top/bottom spacing */
footer{
  padding-top:28px;
  padding-bottom:10px;
}
footer .footer-box{
  min-height:205px;
}
.footer-cert-box .cert-card{
  min-height:180px;
}
.cert-thumb-wrap{
  min-height:130px;
}
.footer-bottom-copyright{
  padding-top:4px;
  padding-bottom:1px;
}
@media(max-width:980px){
  footer{
    padding-top:26px;
    padding-bottom:10px;
  }
  footer .footer-box{
    min-height:190px;
  }
  .footer-cert-box .cert-card{
    min-height:170px;
  }
}
@media(max-width:640px){
  footer{
    padding-top:22px;
    padding-bottom:8px;
  }
  footer .footer-box{
    min-height:auto;
  }
  .footer-cert-box .cert-card{
    min-height:auto;
  }
  .cert-thumb-wrap{
    min-height:120px;
  }
}


/* Footer contact link hover cue */
.footer-connect .contact-link{
  display:grid;
  text-decoration:none;
  color:inherit;
  transition:transform .22s ease, filter .22s ease;
}
.footer-connect .contact-link .connect-icon,
.footer-connect .contact-link .connect-text{
  transition:transform .22s ease, color .22s ease, text-shadow .22s ease, filter .22s ease;
}
.footer-connect .contact-link:hover,
.footer-connect .contact-link:focus-visible{
  transform:translateY(-3px);
}
.footer-connect .contact-link:hover .connect-icon,
.footer-connect .contact-link:focus-visible .connect-icon{
  filter:brightness(1.18) drop-shadow(0 8px 14px rgba(142,197,255,.22));
}
.footer-connect .contact-link:hover .connect-text,
.footer-connect .contact-link:focus-visible .connect-text{
  color:#8ec5ff;
  text-shadow:0 0 10px rgba(142,197,255,.18);
  text-decoration:underline;
  text-underline-offset:4px;
}


/* Sunny Bank logo: enlarge about 10% */
.sunny-bank-logo img{
  width:396px;
  height:auto;
  max-width:100%;
}
@media(max-width:1180px){
  .sunny-bank-logo img{
    width:352px;
  }
}
@media(max-width:980px){
  .sunny-bank-logo img{
    width:297px;
  }
}
@media(max-width:640px){
  .sunny-bank-logo img{
    width:242px;
  }
}


/* Sunny Bank logo: enlarge another 10% */
.sunny-bank-logo img{
  width:436px;
  height:auto;
  max-width:100%;
}
@media(max-width:1180px){
  .sunny-bank-logo img{
    width:387px;
  }
}
@media(max-width:980px){
  .sunny-bank-logo img{
    width:327px;
  }
}
@media(max-width:640px){
  .sunny-bank-logo img{
    width:266px;
  }
}


/* Sunny Bank logo: enlarge another 10% */
.sunny-bank-logo img{
  width:528px;
  height:auto;
  max-width:100%;
}
@media(max-width:1180px){
  .sunny-bank-logo img{
    width:469px;
  }
}
@media(max-width:980px){
  .sunny-bank-logo img{
    width:396px;
  }
}
@media(max-width:640px){
  .sunny-bank-logo img{
    width:322px;
  }
}


/* Sunny Bank logo fit: keep first warning line on one line */
.notice.notice-panel{
  gap:10px;
}
.notice-left{
  flex:1 1 auto;
  min-width:0;
}
.notice-right{
  flex:0 0 auto;
}
.sunny-bank-logo img{
  width:500px;
  height:auto;
  max-width:100%;
}
.notice-three-list{
  font-size:9.7px;
  line-height:1.32;
}
.notice-three-list li:first-child{
  white-space:nowrap;
}
@media(max-width:1280px){
  .sunny-bank-logo img{
    width:470px;
  }
  .notice-three-list{
    font-size:9.4px;
  }
}
@media(max-width:1180px){
  .notice-three-list li:first-child{
    white-space:normal;
  }
  .sunny-bank-logo img{
    width:430px;
  }
}
@media(max-width:980px){
  .sunny-bank-logo img{
    width:360px;
  }
  .notice-three-list{
    font-size:10px;
  }
}
@media(max-width:640px){
  .sunny-bank-logo img{
    width:280px;
  }
  .notice-three-list{
    font-size:9.5px;
  }
}


/* Final copyright placement: full-width center + tight balanced spacing */
.footer-bottom-copyright{
  display:block;
  width:100%;
  max-width:none;
  margin:0;
  padding:2px 0 2px;
  color:#d8e8ff;
  font-size:10px;
  line-height:1.25;
  text-align:center;
  letter-spacing:.1px;
}
footer{
  padding-bottom:0;
}
@media(max-width:640px){
  .footer-bottom-copyright{
    width:100%;
    padding:2px 10px 2px;
    font-size:9px;
    line-height:1.25;
  }
}


/* Replaced trust icons with custom illustrated images */
.footer-trust .trust-icon{
  width:38px;
  height:38px;
  margin-top:1px;
}
.footer-trust .trust-icon-lock{background-image:url("../images/trust-lock.png");}
.footer-trust .trust-icon-shield{background-image:url("../images/trust-legal.png");}
.footer-trust .trust-icon-tax{background-image:url("../images/trust-tax.png");}
@media(max-width:640px){
  .footer-trust .trust-icon{
    width:34px;
    height:34px;
  }
}


/* Replace footer contact icon with uploaded image */
.footer-connect .connect-icon-headset{
  background-image:url("../images/contact-headset.png");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}


/* Contact form option buttons and after-send notice */
.contact-actions{
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
  margin-top:18px;
}
.contact-actions .submit{
  min-width:210px;
}
.contact-success{
  margin:30px auto 0;
  padding:28px 22px;
  max-width:760px;
  border-radius:22px;
  text-align:center;
  color:#07316f;
  font-size:24px;
  font-weight:900;
  line-height:1.65;
  background:linear-gradient(180deg,#f8fbff,#eef7ff);
  border:1px solid rgba(39,126,255,.22);
  box-shadow:0 16px 36px rgba(0,49,111,.12);
}
@media(max-width:640px){
  .contact-actions{
    gap:12px;
  }
  .contact-actions .submit{
    width:100%;
    min-width:0;
  }
  .contact-success{
    font-size:19px;
    padding:22px 16px;
  }
}


/* Contact form single send button */
.contact-actions{
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
  margin-top:18px;
}
.contact-actions .submit{
  min-width:210px;
}
.contact-success{
  margin:30px auto 0;
  padding:28px 22px;
  max-width:760px;
  border-radius:22px;
  text-align:center;
  color:#07316f;
  font-size:24px;
  font-weight:900;
  line-height:1.65;
  background:linear-gradient(180deg,#f8fbff,#eef7ff);
  border:1px solid rgba(39,126,255,.22);
  box-shadow:0 16px 36px rgba(0,49,111,.12);
}
@media(max-width:640px){
  .contact-actions .submit{
    width:100%;
    min-width:0;
  }
  .contact-success{
    font-size:19px;
    padding:22px 16px;
  }
}


/* Contact submit button align right with input area */
.contact-form .contact-actions{
  justify-content:flex-end;
  max-width:540px;
  margin:18px auto 0;
}
.contact-form .contact-actions .submit{
  min-width:130px;
}
@media(max-width:640px){
  .contact-form .contact-actions{
    justify-content:center;
    max-width:none;
  }
}


/* Contact submit button: move to the marked right-side position */
.contact-form .contact-actions{
  width:408px !important;
  max-width:408px !important;
  margin:26px auto 0 !important;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
}
.contact-form .contact-actions .submit,
.contact-form #sendWithMail{
  min-width:145px !important;
  width:145px !important;
}
@media(max-width:640px){
  .contact-form .contact-actions{
    width:100% !important;
    max-width:none !important;
    justify-content:center !important;
  }
}


/* Contact required-field warning */
.contact-warning{
  max-width:540px;
  margin:16px auto 0;
  padding:12px 16px;
  border-radius:12px;
  color:#b42318;
  background:#fff4f2;
  border:1px solid #ffb4a8;
  font-weight:800;
  text-align:center;
  line-height:1.5;
}
.contact-form input.field-error,
.contact-form textarea.field-error{
  border-color:#e53935 !important;
  box-shadow:0 0 0 3px rgba(229,57,53,.12);
}


/* Contact form: native validation + right aligned submit button */
.contact-warning{
  display:none !important;
}
.contact-form input.field-error,
.contact-form textarea.field-error{
  border-color:#003b87 !important;
  box-shadow:none !important;
}
.contact-form .contact-actions{
  width:408px !important;
  max-width:408px !important;
  margin:12px auto 0 !important;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
}
.contact-form #sendWithMail,
.contact-form .contact-actions .submit{
  width:130px !important;
  min-width:130px !important;
  margin:0 !important;
}
@media(max-width:640px){
  .contact-form .contact-actions{
    width:100% !important;
    max-width:none !important;
    justify-content:center !important;
  }
}


/* Contact submit button: align to the exact right edge of the input fields */
.contact-form .contact-actions{
  width:540px !important;
  max-width:540px !important;
  margin:24px auto 0 !important;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  padding:0 !important;
  transform:none !important;
}
.contact-form #sendWithMail,
.contact-form .contact-actions .submit{
  width:130px !important;
  min-width:130px !important;
  margin:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
@media(max-width:640px){
  .contact-form .contact-actions{
    width:100% !important;
    max-width:none !important;
    justify-content:center !important;
  }
}


/* Core page: approved 3D icon series, 14 cards / 7 per row */
.core-grid{
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:14px;
}
.core-item{
  min-height:224px;
  padding:17px 9px 16px;
}
.core-item .icon{
  height:106px;
  margin-bottom:8px;
}
.core-item .icon img{
  max-width:112px;
  max-height:106px;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}
.core-item h3{
  font-size:19px;
  line-height:1.25;
  margin:0 0 7px;
}
.core-item p{
  font-size:13px;
  line-height:1.55;
}
@media(max-width:1180px){
  .core-grid{grid-template-columns:repeat(4, minmax(0, 1fr));}
}
@media(max-width:760px){
  .core-grid{grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px;}
  .core-item{min-height:210px;}
}

/* Payment page flow chart images */
.payment-panel.flow-panel{max-width:1120px;padding:18px;border-radius:18px;background:#fff;}
.flow-image-wrap{width:100%;overflow:hidden;border-radius:14px;background:#fff;}
.flow-image{display:block;width:100%;height:auto;border-radius:12px;}
@media(max-width:640px){.payment-panel.flow-panel{padding:10px;border-radius:14px}.flow-title{font-size:26px}.flow-image-wrap{border-radius:10px}.flow-image{border-radius:8px}}


/* Support page: use uploaded logo artwork as each tab panel title */
.support-panel .logo-title{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0 auto 14px;
  min-height:120px;
}
.support-panel .system-title-logo{
  display:block;
  width:auto;
  height:auto;
  max-width:min(560px, 92%);
  max-height:130px;
  object-fit:contain;
}
.support-panel .system-title-logo.shop-logo{max-height:90px; max-width:min(500px, 92%);}
.support-panel .system-title-logo.analysis-logo{max-height:132px; max-width:min(440px, 92%);}
.support-panel .system-title-logo.fraud-logo,
.support-panel .system-title-logo.tax-logo{max-height:150px; max-width:min(560px, 92%);}
@media(max-width:640px){
  .support-panel .logo-title{min-height:82px;margin-bottom:10px;}
  .support-panel .system-title-logo{max-height:96px;max-width:94%;}
  .support-panel .system-title-logo.shop-logo{max-height:62px;}
  .support-panel .system-title-logo.analysis-logo{max-height:88px;}
  .support-panel .system-title-logo.fraud-logo,
  .support-panel .system-title-logo.tax-logo{max-height:108px;}
}

/* Support page - first tab image icons */
.feature .ficon.image-icon{font-size:0;flex:0 0 78px;width:78px;height:78px;display:flex;align-items:center;justify-content:center;text-align:center}
.feature .ficon.image-icon img{width:78px;height:78px;object-fit:contain;display:block;filter:drop-shadow(0 8px 12px rgba(16,72,160,.16))}
@media(max-width:640px){.feature .ficon.image-icon{flex-basis:70px;width:70px;height:70px}.feature .ficon.image-icon img{width:70px;height:70px}}

/* Support page - first tab card icons: keep text size unchanged, enlarge only icon artwork */
#shop .feature{
  align-items:center;
  gap:12px;
  overflow:visible;
}
#shop .feature .ficon.image-icon{
  flex:0 0 118px;
  width:118px;
  height:118px;
  overflow:visible;
}
#shop .feature .ficon.image-icon img{
  width:156px;
  height:156px;
  max-width:none;
  max-height:none;
  object-fit:contain;
  transform:translateX(-10px);
}
@media(max-width:640px){
  #shop .feature{gap:10px;}
  #shop .feature .ficon.image-icon{
    flex-basis:96px;
    width:96px;
    height:96px;
  }
  #shop .feature .ficon.image-icon img{
    width:126px;
    height:126px;
    transform:translateX(-8px);
  }
}

/* Support first tab: enlarged icons without changing text alignment */
#shop .feature{
  align-items:center;
  gap:16px;
  overflow:hidden;
}
#shop .feature .ficon.image-icon{
  flex:0 0 86px;
  width:86px;
  height:86px;
  overflow:visible;
  margin-left:2px;
}
#shop .feature .ficon.image-icon img{
  width:118px;
  height:118px;
  max-width:none;
  max-height:none;
  object-fit:contain;
  transform:translateX(-4px);
}
#shop .feature h3{
  margin:0 0 4px;
}
#shop .feature p{
  margin:0;
}
@media(max-width:640px){
  #shop .feature{gap:12px;}
  #shop .feature .ficon.image-icon{
    flex-basis:78px;
    width:78px;
    height:78px;
  }
  #shop .feature .ficon.image-icon img{
    width:104px;
    height:104px;
    transform:translateX(-4px);
  }
}

/* Support page: MOF tax explanation text block under the fourth tab cards */
.tax-news-block{
  margin:30px auto 0;
  padding:28px 30px 30px;
  background:#fff;
  border:1px solid #dbe8f7;
  border-radius:18px;
  box-shadow:0 10px 26px rgba(18,58,112,.08);
  color:#0a3d8f;
  font-size:15px;
  line-height:2;
  font-weight:700;
  letter-spacing:.02em;
}
.tax-news-block h3{
  margin:0 0 16px;
  color:#22b86a;
  font-size:20px;
  line-height:1.35;
  font-weight:900;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  letter-spacing:.01em;
}
.tax-news-block p{
  margin:0 0 14px;
  color:#0a3d8f;
}
.tax-news-block .tax-news-contact{
  margin-top:18px;
  margin-bottom:16px;
}
.tax-news-block .tax-news-source{
  margin:18px 0 0;
  color:#2f77e8;
}
.tax-news-block a{
  color:#2f77e8;
  text-decoration:underline;
  text-underline-offset:4px;
  word-break:break-word;
  overflow-wrap:anywhere;
}
.tax-news-block a:hover{
  text-decoration:underline;
}
@media(max-width:640px){
  .tax-news-block{
    padding:20px 16px 22px;
    font-size:14px;
    line-height:1.85;
    border-radius:16px;
  }
  .tax-news-block h3{
    font-size:15px;
  }
}


/* Support page - second tab card icons */
#analysis .feature{
  align-items:center;
  gap:16px;
  overflow:hidden;
}
#analysis .feature .ficon.image-icon{
  flex:0 0 96px;
  width:96px;
  height:96px;
  overflow:visible;
}
#analysis .feature .ficon.image-icon img{
  width:128px;
  height:128px;
  max-width:none;
  max-height:none;
  object-fit:contain;
  transform:translateX(-12px);
}
@media(max-width:640px){
  #analysis .feature{gap:12px;}
  #analysis .feature .ficon.image-icon{
    flex-basis:82px;
    width:82px;
    height:82px;
  }
  #analysis .feature .ficon.image-icon img{
    width:108px;
    height:108px;
    transform:translateX(-10px);
  }
}

/* Support page - third tab card icons */
#fraud .feature{
  align-items:center;
  gap:16px;
  overflow:hidden;
}
#fraud .feature .ficon.image-icon{
  flex:0 0 96px;
  width:96px;
  height:96px;
  overflow:visible;
}
#fraud .feature .ficon.image-icon img{
  width:128px;
  height:128px;
  max-width:none;
  max-height:none;
  object-fit:contain;
  transform:translateX(-12px);
}
#fraud .feature:first-child .ficon.image-icon img{
  width:112px;
  height:112px;
  transform:translateX(-6px);
}
@media(max-width:640px){
  #fraud .feature{gap:12px;}
  #fraud .feature .ficon.image-icon{
    flex-basis:82px;
    width:82px;
    height:82px;
  }
  #fraud .feature .ficon.image-icon img{
    width:108px;
    height:108px;
    transform:translateX(-10px);
  }
  #fraud .feature:first-child .ficon.image-icon img{
    width:96px;
    height:96px;
    transform:translateX(-4px);
  }
}

/* Support page - third tab: shrink cards 2-4 icons so left side keeps the same breathing room as card 1 */
#fraud .feature:not(:first-child) .ficon.image-icon img{
  width:112px;
  height:112px;
  transform:translateX(-6px);
}
@media(max-width:640px){
  #fraud .feature:not(:first-child) .ficon.image-icon img{
    width:96px;
    height:96px;
    transform:translateX(-4px);
  }
}

/* Clickable feature card links */
.feature-link{
  color:inherit;
  text-decoration:none;
}
.feature-link:hover{
  transform:translateY(-2px);
}

/* Clickable text cues requested: always show underline on key clickable labels */
.footer-connect .contact-link .connect-text,
.clickable-link-text{
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:1.5px;
}

.footer-connect .contact-link{
  cursor:pointer;
}

.tax-news-block h3{
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* =========================================================
   2026-06 mobile optimization patch for all pages
   - Prevent horizontal overflow on phones
   - Improve mobile navigation, card spacing, tab wrapping,
     contact form, payment flow images and footer layout
   ========================================================= */
html{
  width:100%;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}
body{
  width:100%;
  overflow-x:hidden;
}
img,svg,video,canvas{
  max-width:100%;
}
button,a,input,textarea{
  -webkit-tap-highlight-color:rgba(47,119,232,.16);
}
a,button,.tab,.pay-tab,.submit,.btn,.card-btn{
  touch-action:manipulation;
}

@media(max-width:760px){
  body{font-size:15px;line-height:1.65;}
  .container,
  .index-banner{
    width:94vw !important;
    max-width:94vw !important;
  }
  section{padding:38px 0;}
  .topbar{z-index:100;}
  .nav{
    height:58px;
    justify-content:space-between;
  }
  .brand{font-size:32px;letter-spacing:-2px;}
  .hamburger{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:12px;
    margin-left:auto;
  }
  .menu{
    position:absolute;
    top:58px;
    left:3vw;
    right:3vw;
    width:94vw;
    max-width:94vw;
    display:none;
    grid-template-columns:1fr;
    gap:0;
    padding:10px;
    background:rgba(3,29,67,.98);
    border-radius:16px;
    box-shadow:0 16px 36px rgba(0,16,42,.28);
  }
  .menu.open{display:grid;}
  .menu a{
    display:block;
    width:100%;
    min-height:44px;
    padding:11px 14px;
    border-radius:12px;
    line-height:1.35;
  }
  .menu a:hover,
  .menu a.active{background:rgba(255,255,255,.08);}

  .index-banner{
    min-height:0;
    aspect-ratio:1500/817;
    background-size:contain;
    background-position:center center;
  }
  .inner-overlap-section .page-card,
  .home-core-section .page-card{
    margin-top:-18px;
  }
  .page-card,
  .home-support-card,
  .home-payment-card{
    padding:26px 16px !important;
    border-radius:18px;
  }
  .title{
    font-size:clamp(24px, 7.2vw, 30px);
    line-height:1.25;
    letter-spacing:.02em;
    overflow-wrap:anywhere;
  }
  .lead{
    font-size:15px;
    line-height:1.7;
    margin-bottom:22px;
  }
  .title-line{gap:10px;}
  .title-line:before,
  .title-line:after{width:42px;}
  .pill{
    width:100%;
    padding:9px 12px;
    border-radius:16px;
    font-size:14px;
    line-height:1.55;
    text-align:center;
    overflow-wrap:anywhere;
  }

  .home-core-grid,
  .support-cards,
  .feature-grid,
  .feature-grid.two,
  .feature-grid.three{
    grid-template-columns:1fr !important;
    gap:14px;
  }
  body[data-page="core"] .core-grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:12px !important;
  }
  body[data-page="core"] .core-item{
    min-height:0;
    padding:14px 9px 13px;
    border-radius:16px;
  }
  body[data-page="core"] .core-item .icon{
    height:90px;
    margin-bottom:8px;
  }
  body[data-page="core"] .core-item .icon img{
    max-width:96px;
    max-height:90px;
  }
  body[data-page="core"] .core-item h3{
    font-size:17px;
    line-height:1.25;
  }
  body[data-page="core"] .core-item p{
    font-size:12.5px;
    line-height:1.5;
  }

  .core-item,
  .support-card,
  .feature,
  .step{
    max-width:100%;
    overflow:hidden;
  }
  .support-card .pic,
  .home-payment-card .support-card .pic{
    height:170px !important;
  }
  .home-support-card .support-card h3,
  .home-payment-card .support-card h3,
  .home-core-section .core-item h3{
    font-size:18px;
  }
  .card-btn,.btn{
    min-height:42px;
    padding:9px 18px;
    line-height:1.35;
  }

  .tabs{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    border-radius:16px 16px 0 0;
  }
  .tab{
    min-height:50px;
    padding:10px 6px;
    font-size:14px;
    line-height:1.3;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .panel{
    padding:20px 12px 24px !important;
    border-radius:0 0 16px 16px;
  }
  .support-panel .logo-title{
    min-height:68px;
    margin-bottom:8px;
  }
  .support-panel .system-title-logo,
  .support-panel .system-title-logo.shop-logo,
  .support-panel .system-title-logo.analysis-logo,
  .support-panel .system-title-logo.fraud-logo,
  .support-panel .system-title-logo.tax-logo{
    max-height:82px;
    max-width:96%;
  }
  .support-panel .feature{
    display:flex;
    align-items:center;
    min-height:0;
    padding:14px 12px;
    gap:10px;
    border-radius:14px;
  }
  .support-panel .feature .ficon,
  .support-panel .feature .ficon.image-icon,
  #shop .feature .ficon.image-icon,
  #analysis .feature .ficon.image-icon,
  #fraud .feature .ficon.image-icon{
    flex:0 0 64px !important;
    width:64px !important;
    height:64px !important;
    margin-left:0 !important;
  }
  .support-panel .feature .ficon.image-icon img,
  #shop .feature .ficon.image-icon img,
  #analysis .feature .ficon.image-icon img,
  #fraud .feature .ficon.image-icon img,
  #fraud .feature:first-child .ficon.image-icon img,
  #fraud .feature:not(:first-child) .ficon.image-icon img{
    width:78px !important;
    height:78px !important;
    max-width:none !important;
    max-height:none !important;
    transform:none !important;
    object-fit:contain;
  }
  .support-panel .feature h3{
    font-size:18px;
    line-height:1.28;
    overflow-wrap:anywhere;
  }
  .support-panel .feature p{
    font-size:13.5px;
    line-height:1.55;
    overflow-wrap:anywhere;
  }
  .tax-news-block{
    margin-top:20px;
    padding:18px 14px 20px;
    font-size:13.5px;
    line-height:1.75;
  }
  .tax-news-block h3{
    font-size:15px;
    line-height:1.55;
  }

  .payment-alert-note{
    display:flex !important;
    width:100% !important;
    max-width:100% !important;
    border-radius:16px !important;
    padding:9px 12px !important;
    font-size:13.5px !important;
    line-height:1.5 !important;
  }
  .payment-tabs{
    gap:10px;
    margin:18px 0 18px;
  }
  .pay-tab{
    width:calc(50% - 6px);
    max-width:150px;
    min-height:64px;
    height:64px;
    padding:8px;
  }
  .pay-tab img{
    max-width:92px;
    max-height:42px;
  }
  .payment-panel.flow-panel{
    padding:8px !important;
    border-radius:14px;
    max-width:100%;
    overflow:hidden;
  }
  .flow-title{
    font-size:clamp(22px, 6.6vw, 26px);
    line-height:1.3;
  }
  .flow-image-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .flow-image{
    width:100%;
    min-width:0;
  }

  .contact-form{
    max-width:100%;
    margin-top:20px;
    gap:10px;
  }
  .form-row{
    grid-template-columns:1fr !important;
    gap:6px;
  }
  .form-row label{
    font-weight:800;
  }
  input,textarea{
    min-height:44px;
    font-size:16px;
    padding:10px 12px;
  }
  textarea{min-height:128px;}
  .contact-form .contact-actions{
    width:100% !important;
    max-width:100% !important;
    margin-top:16px !important;
    justify-content:center !important;
  }
  .contact-form #sendWithMail,
  .contact-form .contact-actions .submit{
    width:100% !important;
    min-width:0 !important;
    min-height:46px;
  }
  .contact-success{
    margin-top:20px;
    padding:20px 14px;
    font-size:18px;
    line-height:1.6;
  }

  footer{
    padding-top:22px;
  }
  footer .footer-grid{
    grid-template-columns:1fr !important;
    gap:0;
  }
  footer .footer-box{
    width:100%;
    min-height:0 !important;
    padding:0 0 16px;
    margin-bottom:16px;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.22);
  }
  footer .footer-box:last-child{
    border-bottom:0;
    margin-bottom:8px;
  }
  .footer-about .about-row{
    grid-template-columns:18px max-content minmax(0,1fr);
  }
  .footer-about .about-value,
  .footer-connect .connect-text,
  .footer-trust .trust-content small{
    overflow-wrap:anywhere;
  }
  .footer-connect .connect-row,
  .footer-connect .social-link,
  .footer-connect .contact-link{
    width:100%;
  }
  .cert-card{
    max-width:320px;
    margin:0 auto;
  }
  .cert-thumb-wrap:hover .cert-thumb,
  .footer-cert-box .cert-thumb-wrap:hover .cert-thumb{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
  }
  .notice.notice-panel{
    align-items:flex-start;
    gap:10px;
  }
  .notice-left{
    width:100%;
    align-items:flex-start;
  }
  .notice-right{
    width:100%;
    justify-content:center;
  }
  .sunny-bank-logo{
    width:100%;
    justify-content:center;
  }
  .sunny-bank-logo img{
    width:min(260px, 100%) !important;
  }
  .notice-three-list{
    font-size:9.5px;
    line-height:1.45;
  }
  .notice-three-list li:first-child{
    white-space:normal !important;
  }
  .footer-bottom-copyright{
    padding:6px 12px 4px;
    font-size:9px;
  }
}

@media(max-width:380px){
  .container,
  .index-banner{
    width:95vw !important;
    max-width:95vw !important;
  }
  .page-card,
  .home-support-card,
  .home-payment-card{
    padding-left:12px !important;
    padding-right:12px !important;
  }
  body[data-page="core"] .core-grid{
    gap:10px !important;
  }
  body[data-page="core"] .core-item h3{font-size:16px;}
  body[data-page="core"] .core-item p{font-size:12px;}
  .tab{font-size:13px;}
  .support-panel .feature .ficon,
  .support-panel .feature .ficon.image-icon,
  #shop .feature .ficon.image-icon,
  #analysis .feature .ficon.image-icon,
  #fraud .feature .ficon.image-icon{
    flex-basis:56px !important;
    width:56px !important;
    height:56px !important;
  }
  .support-panel .feature .ficon.image-icon img,
  #shop .feature .ficon.image-icon img,
  #analysis .feature .ficon.image-icon img,
  #fraud .feature .ficon.image-icon img,
  #fraud .feature:first-child .ficon.image-icon img,
  #fraud .feature:not(:first-child) .ficon.image-icon img{
    width:68px !important;
    height:68px !important;
  }
}


/* Responsive banner: desktop keeps original horizontal banner, mobile switches to vertical readable banner */
.index-banner{
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  background:none !important;
  aspect-ratio:auto !important;
  overflow:visible;
}
.index-banner::before,
.index-banner::after{
  display:none !important;
}
.index-banner-picture,
.index-banner-picture img{
  display:block;
  width:100%;
}
.index-banner-picture img{
  height:auto;
  border:0;
}
@media(max-width:760px){
  .index-banner{
    width:94vw !important;
    max-width:94vw !important;
    background:none !important;
    aspect-ratio:auto !important;
  }
}
@media(max-width:380px){
  .index-banner{
    width:95vw !important;
    max-width:95vw !important;
  }
}


/* Support shop tab cards: show title and description text */
#shop .feature h3{
  margin:0 0 4px;
}
#shop .feature p{
  display:block;
}

/* Support first tab: keep titles and descriptions on one line */
#shop .feature{
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:10px;
  padding:18px 14px;
  min-height:160px;
  text-align:center;
}
#shop .feature .ficon.image-icon{
  flex:0 0 54px;
  width:54px;
  height:54px;
  margin:0 auto;
}
#shop .feature .ficon.image-icon img{
  width:62px;
  height:62px;
  max-width:none;
  max-height:none;
  transform:none;
}
#shop .feature h3{
  margin:0 0 5px;
  font-size:18px;
  line-height:1.15;
  letter-spacing:-.03em;
  white-space:nowrap;
}
#shop .feature p{
  display:block;
  margin:0;
  font-size:12px;
  line-height:1.35;
  letter-spacing:-.04em;
  white-space:nowrap;
}
@media(max-width:980px){
  #shop .feature h3{font-size:17px;}
  #shop .feature p{font-size:11.5px;}
}
@media(max-width:640px){
  #shop .feature{
    min-height:148px;
    padding:16px 10px;
    gap:8px;
  }
  #shop .feature h3{font-size:16px;}
  #shop .feature p{font-size:11px;}
}


/* Support shop tab: horizontal cards, 2 per row */
#shop .feature-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:18px 22px;
}
#shop .feature{
  flex-direction:row !important;
  justify-content:flex-start !important;
  align-items:center !important;
  text-align:left !important;
  gap:14px !important;
  min-height:112px !important;
  padding:18px 20px !important;
  overflow:visible !important;
}
#shop .feature .ficon.image-icon{
  flex:0 0 64px !important;
  width:64px !important;
  height:64px !important;
  margin:0 !important;
}
#shop .feature .ficon.image-icon img{
  width:74px !important;
  height:74px !important;
  max-width:none !important;
  max-height:none !important;
  transform:none !important;
}
#shop .feature > div:last-child{
  min-width:0;
  flex:1 1 auto;
}
#shop .feature h3{
  margin:0 0 7px !important;
  font-size:19px !important;
  line-height:1.15 !important;
  letter-spacing:-.04em !important;
  white-space:nowrap !important;
}
#shop .feature p{
  display:block !important;
  margin:0 !important;
  font-size:12.5px !important;
  line-height:1.35 !important;
  letter-spacing:-.04em !important;
  white-space:nowrap !important;
}
@media(max-width:980px){
  #shop .feature-grid{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;gap:14px;}
  #shop .feature{padding:16px 14px !important;gap:10px !important;min-height:104px !important;}
  #shop .feature .ficon.image-icon{flex-basis:54px !important;width:54px !important;height:54px !important;}
  #shop .feature .ficon.image-icon img{width:62px !important;height:62px !important;}
  #shop .feature h3{font-size:16px !important;}
  #shop .feature p{font-size:10.5px !important;}
}
@media(max-width:640px){
  #shop .feature-grid{grid-template-columns:1fr !important;}
  #shop .feature{padding:16px 14px !important;}
  #shop .feature h3{font-size:17px !important;}
  #shop .feature p{font-size:11.5px !important;}
}


/* Support shop tab: match other tab text size while keeping horizontal cards */
#shop .feature{
  min-height:124px !important;
  padding:22px !important;
  gap:16px !important;
}
#shop .feature h3{
  font-size:22px !important;
  line-height:1.2 !important;
  letter-spacing:-.045em !important;
  white-space:nowrap !important;
  margin:0 0 6px !important;
}
#shop .feature p{
  font-size:15px !important;
  line-height:1.35 !important;
  letter-spacing:-.04em !important;
  white-space:nowrap !important;
  margin:0 !important;
}
@media(max-width:980px){
  #shop .feature{padding:18px 16px !important;gap:12px !important;min-height:118px !important;}
  #shop .feature h3{font-size:20px !important;}
  #shop .feature p{font-size:13.5px !important;}
}
@media(max-width:640px){
  #shop .feature{padding:18px 14px !important;min-height:112px !important;}
  #shop .feature h3{font-size:20px !important;}
  #shop .feature p{font-size:13.5px !important;}
}

/* Support shop tab: double icon size */
#shop .feature{
  min-height:180px !important;
  gap:24px !important;
}
#shop .feature .ficon.image-icon{
  flex:0 0 128px !important;
  width:128px !important;
  height:128px !important;
}
#shop .feature .ficon.image-icon img{
  width:148px !important;
  height:148px !important;
  max-width:none !important;
  max-height:none !important;
}
@media(max-width:980px){
  #shop .feature{
    min-height:156px !important;
    gap:18px !important;
  }
  #shop .feature .ficon.image-icon{
    flex:0 0 108px !important;
    width:108px !important;
    height:108px !important;
  }
  #shop .feature .ficon.image-icon img{
    width:124px !important;
    height:124px !important;
  }
}
@media(max-width:640px){
  #shop .feature{
    min-height:146px !important;
    gap:16px !important;
  }
  #shop .feature .ficon.image-icon{
    flex:0 0 108px !important;
    width:108px !important;
    height:108px !important;
  }
  #shop .feature .ficon.image-icon img{
    width:124px !important;
    height:124px !important;
  }
}

/* Support shop tab: prevent text overflow when browser zoom/display scale is enlarged */
#shop .feature-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  align-items:stretch !important;
}
#shop .feature{
  height:auto !important;
  min-height:180px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
}
#shop .feature > div:last-child{
  min-width:0 !important;
  width:100% !important;
  overflow:visible !important;
}
#shop .feature h3,
#shop .feature p{
  max-width:100% !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}
#shop .feature h3{
  font-size:clamp(20px, 1.65vw, 22px) !important;
  line-height:1.25 !important;
  margin-bottom:8px !important;
}
#shop .feature p{
  font-size:clamp(13.5px, 1.1vw, 15px) !important;
  line-height:1.45 !important;
}
@media(max-width:980px){
  #shop .feature-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
  #shop .feature{
    min-height:168px !important;
    padding:18px 16px !important;
    gap:16px !important;
  }
  #shop .feature h3{
    font-size:19px !important;
    line-height:1.25 !important;
  }
  #shop .feature p{
    font-size:13px !important;
    line-height:1.45 !important;
  }
}
@media(max-width:760px){
  #shop .feature-grid{
    grid-template-columns:1fr !important;
  }
  #shop .feature{
    min-height:150px !important;
  }
}
@media(max-width:420px){
  #shop .feature{
    gap:12px !important;
    padding:16px 12px !important;
  }
  #shop .feature .ficon.image-icon{
    flex:0 0 92px !important;
    width:92px !important;
    height:92px !important;
  }
  #shop .feature .ficon.image-icon img{
    width:106px !important;
    height:106px !important;
  }
  #shop .feature h3{
    font-size:18px !important;
  }
  #shop .feature p{
    font-size:12.5px !important;
  }
}

/* Support shop tab: align card size with the other support tabs */
#shop .feature-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  max-width:940px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  gap:22px !important;
  align-items:stretch !important;
}
#shop .feature{
  min-height:124px !important;
  height:auto !important;
  padding:22px !important;
  gap:16px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  align-items:center !important;
}
#shop .feature .ficon.image-icon{
  flex:0 0 78px !important;
  width:78px !important;
  height:78px !important;
}
#shop .feature .ficon.image-icon img{
  width:78px !important;
  height:78px !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
}
#shop .feature > div:last-child{
  min-width:0 !important;
  flex:1 1 auto !important;
}
#shop .feature h3{
  font-size:22px !important;
  line-height:1.2 !important;
  margin:0 0 4px !important;
  letter-spacing:0 !important;
  white-space:normal !important;
  overflow-wrap:normal !important;
  word-break:keep-all !important;
}
#shop .feature p{
  display:block !important;
  font-size:15px !important;
  line-height:1.45 !important;
  margin:0 !important;
  letter-spacing:0 !important;
  white-space:normal !important;
  overflow-wrap:normal !important;
  word-break:keep-all !important;
}
@media(max-width:980px){
  #shop .feature-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    max-width:none !important;
  }
  #shop .feature{
    min-height:124px !important;
    padding:18px 16px !important;
    gap:14px !important;
  }
  #shop .feature .ficon.image-icon{
    flex-basis:70px !important;
    width:70px !important;
    height:70px !important;
  }
  #shop .feature .ficon.image-icon img{
    width:70px !important;
    height:70px !important;
  }
  #shop .feature h3{font-size:20px !important;}
  #shop .feature p{font-size:13.5px !important;}
}
@media(max-width:640px){
  #shop .feature-grid{
    grid-template-columns:1fr !important;
  }
  #shop .feature{
    min-height:124px !important;
    padding:18px 14px !important;
  }
}

/* Fix: support shop tab text should not be clipped at enlarged browser zoom */
#shop .feature-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  max-width:940px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  gap:22px !important;
  align-items:stretch !important;
}
#shop .feature{
  min-height:124px !important;
  height:auto !important;
  max-height:none !important;
  padding:22px !important;
  box-sizing:border-box !important;
  overflow:visible !important;
  align-items:center !important;
}
#shop .feature > div:last-child{
  min-width:0 !important;
  flex:1 1 auto !important;
  overflow:visible !important;
}
#shop .feature h3,
#shop .feature p{
  display:block !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:normal !important;
  word-break:keep-all !important;
  overflow-wrap:break-word !important;
}
#shop .feature h3{
  font-size:22px !important;
  line-height:1.32 !important;
  margin:0 0 6px !important;
}
#shop .feature p{
  font-size:15px !important;
  line-height:1.55 !important;
  margin:0 !important;
}
@media(max-width:980px){
  #shop .feature-grid{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;max-width:none !important;}
  #shop .feature{min-height:124px !important;padding:18px 16px !important;gap:14px !important;}
  #shop .feature h3{font-size:20px !important;line-height:1.32 !important;}
  #shop .feature p{font-size:13.5px !important;line-height:1.55 !important;}
}
@media(max-width:640px){
  #shop .feature-grid{grid-template-columns:1fr !important;}
  #shop .feature{min-height:124px !important;padding:18px 14px !important;}
}


/* Footer notice layout: keep Sunny Bank logo readable and prevent text overlap at browser zoom */
.notice.notice-panel{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) auto !important;
  align-items:center !important;
  column-gap:28px !important;
  row-gap:10px !important;
}
.notice-left{
  min-width:0 !important;
  max-width:100% !important;
}
.notice-content{
  min-width:0 !important;
  max-width:100% !important;
}
.notice-three-list,
.notice-three-list li{
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}
.notice-right{
  min-width:0 !important;
  justify-self:end !important;
}
.sunny-bank-logo{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  white-space:nowrap !important;
}
.sunny-bank-logo img{
  width:360px !important;
  max-width:none !important;
  height:auto !important;
}

/* When browser zoom or narrower screens reduce usable width, move logo below instead of shrinking it over the text */
@media(max-width:1680px){
  .notice.notice-panel{
    grid-template-columns:1fr !important;
    align-items:start !important;
  }
  .notice-right{
    justify-self:start !important;
  }
  .sunny-bank-logo{
    justify-content:flex-start !important;
  }
}

/* On very small screens only, cap the logo to the viewport so it does not cause horizontal scrolling */
@media(max-width:640px){
  .sunny-bank-logo img{
    width:min(360px, 100%) !important;
    max-width:100% !important;
  }
}


/* Adjust Sunny Bank logo size: larger than previous half-size, while keeping wrap-safe layout */
.sunny-bank-logo img{
  width:520px !important;
  max-width:none !important;
  height:auto !important;
}

@media(max-width:640px){
  .sunny-bank-logo img{
    width:min(520px, 100%) !important;
    max-width:100% !important;
  }
}

/* Sunny Bank logo: reduce current size by 10% */
.sunny-bank-logo img{
  width:468px !important;
  max-width:none !important;
  height:auto !important;
}

@media(max-width:640px){
  .sunny-bank-logo img{
    width:min(468px, 100%) !important;
    max-width:100% !important;
  }
}


/* Global font stack */
html, body, button, input, textarea, select{
  font-family:"Noto Sans TC", Arial, "LiHei Pro", "黑體-繁", "Microsoft JhengHei", "微軟正黑體", sans-serif;
}


/* 主選單連到其它頁時，直接定位到 banner 下方內容區，並保留上方 banner。 */
#page-content{
  scroll-margin-top: 72px;
}

/* 固定主選單：永遠停留在視窗最上方 */
body{
  padding-top:68px;
}
.topbar{
  position:fixed !important;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:9999 !important;
}
#page-content{
  scroll-margin-top:84px;
}
@media(max-width:760px){
  body{
    padding-top:58px;
  }
  #page-content{
    scroll-margin-top:74px;
  }
}

/* 20260603 修正版：主選單固定在視窗頂端，且高度固定不會越捲越高 */
:root{
  --topbar-height:68px;
}
html{
  scroll-padding-top:calc(var(--topbar-height) + 16px) !important;
}
body{
  padding-top:var(--topbar-height) !important;
}
header.topbar,
.topbar{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  height:var(--topbar-height) !important;
  min-height:var(--topbar-height) !important;
  max-height:var(--topbar-height) !important;
  z-index:999999 !important;
  overflow:visible !important;
  transform:none !important;
}
header.topbar .nav,
.topbar .nav{
  height:var(--topbar-height) !important;
  min-height:var(--topbar-height) !important;
  max-height:var(--topbar-height) !important;
}
#page-content{
  scroll-margin-top:calc(var(--topbar-height) + 16px) !important;
}
@media(max-width:760px){
  :root{
    --topbar-height:58px;
  }
}

/* 20260603 修正頁尾 Copyright 被壓縮：保留獨立可見高度 */
footer{
  padding-bottom:0 !important;
  overflow:visible !important;
}
.footer-bottom-copyright{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-height:30px !important;
  padding:7px 16px 8px !important;
  margin:0 !important;
  box-sizing:border-box !important;
  color:#d8e8ff !important;
  background:#002a63 !important;
  font-size:11px !important;
  line-height:1.35 !important;
  text-align:center !important;
  white-space:normal !important;
  overflow:visible !important;
  position:relative !important;
  z-index:3 !important;
}
@media(max-width:640px){
  .footer-bottom-copyright{
    min-height:36px !important;
    padding:8px 12px 9px !important;
    font-size:9.5px !important;
    line-height:1.35 !important;
  }
}

/* 20260603 修正 support.html 第一個頁簽手機放大倍率卡片溢出 */
@media(max-width:760px){
  #shop .feature-grid{
    grid-template-columns:1fr !important;
    width:100% !important;
    max-width:100% !important;
    gap:14px !important;
    overflow:visible !important;
  }
  #shop .feature{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    box-sizing:border-box !important;
    overflow:visible !important;
    display:flex !important;
    align-items:flex-start !important;
    gap:12px !important;
    padding:16px 14px !important;
  }
  #shop .feature > div:last-child{
    min-width:0 !important;
    width:auto !important;
    flex:1 1 auto !important;
    overflow:visible !important;
  }
  #shop .feature h3,
  #shop .feature p{
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
    max-width:100% !important;
  }
  #shop .feature h3{
    font-size:clamp(17px, 4.6vw, 20px) !important;
    line-height:1.3 !important;
    margin-bottom:4px !important;
  }
  #shop .feature p{
    font-size:clamp(12px, 3.5vw, 14px) !important;
    line-height:1.45 !important;
  }
  #shop .feature .ficon.image-icon{
    flex:0 0 clamp(56px, 17vw, 76px) !important;
    width:clamp(56px, 17vw, 76px) !important;
    height:clamp(56px, 17vw, 76px) !important;
    min-width:0 !important;
  }
  #shop .feature .ficon.image-icon img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
  }
}
@media(max-width:420px){
  #shop .feature{
    gap:10px !important;
    padding:14px 12px !important;
  }
  #shop .feature h3{
    font-size:clamp(16px, 4.8vw, 19px) !important;
  }
  #shop .feature p{
    font-size:clamp(11.5px, 3.8vw, 13.5px) !important;
  }
}


/* Homepage hero banner glass flash effects
   Fixed: the glass shine stays aligned with the original banner artwork,
   and it does not blur/cover the text or convenience-store logos. */
.index-banner{
  position:relative !important;
  overflow:hidden !important;
}
.index-banner-picture{
  position:relative;
  z-index:1;
}
.index-banner-picture img{
  display:block;
}
.banner-glass-effects{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}
.banner-glass-panel{
  position:absolute;
  overflow:hidden;
  border-radius:18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.025) 48%, rgba(213,239,255,.10));
  border:1px solid rgba(255,255,255,.76);
  box-shadow:
    0 0 0 1px rgba(64,177,255,.16),
    0 10px 24px rgba(0,92,180,.13),
    0 0 18px rgba(69,199,255,.20),
    inset 0 1px 1px rgba(255,255,255,.72),
    inset 0 -10px 18px rgba(69,169,255,.08);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.banner-glass-panel::before{
  content:"";
  position:absolute;
  top:-72%;
  left:-90%;
  width:30%;
  height:245%;
  transform:rotate(15deg);
  opacity:0;
  background:linear-gradient(115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.08) 30%,
    rgba(255,255,255,.62) 49%,
    rgba(98,214,255,.30) 59%,
    rgba(255,255,255,0) 100%);
  filter:blur(.3px);
}
.banner-glass-panel::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  opacity:.58;
  background:
    radial-gradient(circle at 4% 18%, rgba(255,255,255,.85) 0 2px, rgba(255,255,255,.42) 3px, transparent 8px),
    radial-gradient(circle at 96% 80%, rgba(90,213,255,.78) 0 2px, rgba(90,213,255,.26) 3px, transparent 10px);
  animation:bannerGlassGlow 4.8s ease-in-out infinite;
}
.banner-glass-panel.is-flashing::before{
  animation:bannerGlassSweep 1.3s ease-out forwards;
}
/* Desktop banner coordinates based on the actual 1698×960 artwork */
.banner-glass-panel--stores{
  left:2.60%;
  top:76.20%;
  width:33.35%;
  height:16.80%;
}
.banner-glass-panel--features{
  left:38.85%;
  top:80.55%;
  width:56.65%;
  height:11.70%;
}
@keyframes bannerGlassSweep{
  0%{left:-90%;opacity:0;}
  12%{opacity:.85;}
  58%{opacity:.76;}
  100%{left:135%;opacity:0;}
}
@keyframes bannerGlassGlow{
  0%,100%{opacity:.38;filter:drop-shadow(0 0 0 rgba(80,210,255,0));}
  50%{opacity:.72;filter:drop-shadow(0 0 10px rgba(80,210,255,.36));}
}
@media(max-width:760px){
  .banner-glass-panel{border-radius:16px;}
  /* Mobile banner coordinates based on the actual 933×1686 artwork */
  .banner-glass-panel--features{left:5.15%;top:69.00%;width:89.70%;height:12.95%;}
  .banner-glass-panel--stores{left:5.15%;top:83.10%;width:89.70%;height:13.55%;}
}

/* 2026-06-04 fix: align banner glass effects with the artwork.
   Use the banner image's original rounded boxes as the edge, so the effect
   no longer draws a second mismatched border on top of the existing panel. */
.banner-glass-panel{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:hidden !important;
  isolation:isolate;
}
.banner-glass-panel::after{
  inset:0 !important;
  border-radius:inherit !important;
  opacity:.42 !important;
  background:
    radial-gradient(circle at 3% 12%, rgba(255,255,255,.95) 0 2px, rgba(104,217,255,.38) 3px, transparent 11px),
    radial-gradient(circle at 98% 78%, rgba(82,213,255,.82) 0 2px, rgba(82,213,255,.24) 3px, transparent 10px),
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0) 34%, rgba(77,198,255,.12) 100%) !important;
  animation:bannerGlassGlow 4.8s ease-in-out infinite !important;
}
.banner-glass-panel::before{
  width:24% !important;
  height:250% !important;
  top:-75% !important;
  background:linear-gradient(115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.05) 32%,
    rgba(255,255,255,.82) 49%,
    rgba(91,222,255,.36) 58%,
    rgba(255,255,255,0) 100%) !important;
}
/* Desktop coordinates tuned to the visible boxes in index-banner.jpg */
.banner-glass-panel--stores{
  left:2.62% !important;
  top:75.86% !important;
  width:33.34% !important;
  height:17.08% !important;
  border-radius:16px !important;
}
.banner-glass-panel--features{
  left:38.76% !important;
  top:79.74% !important;
  width:56.82% !important;
  height:12.94% !important;
  border-radius:16px !important;
}
@media(max-width:760px){
  .banner-glass-panel--features{left:5.15% !important;top:68.95% !important;width:89.70% !important;height:13.05% !important;border-radius:18px !important;}
  .banner-glass-panel--stores{left:5.15% !important;top:83.05% !important;width:89.70% !important;height:13.65% !important;border-radius:18px !important;}
}


/* 20260604 anchor target: index buttons jump directly to the target content block */
#core-features,
#payment-service{
  scroll-margin-top:calc(var(--topbar-height) + 16px) !important;
}