:root{
  --brand:#007BC7; --brand-std:#63A7DC; --brand-light:#91BCE5;
  --text:#5A6978; --heading:#34404B; --border:#D1E2F4; --muted:#EEF5FD;
  --bg-top:#D1E2F4; --bg-mid:#FFFFFF;
}
/*
html{scroll-behavior:smooth;}
*,*::before,*::after{box-sizing:border-box;}
body{
  margin:0;
  font-family: "Noto Sans TC","Microsoft JhengHei","PingFang TC","Helvetica Neue","Helvetica","Arial",sans-serif;
  color:var(--text);
  background:linear-gradient(to bottom,var(--bg-top),var(--bg-mid),var(--bg-top));
  font-size:18px; line-height:1.85;
  -webkit-text-size-adjust:100%;
}*/
body { margin:0; }
a{ color:var(--heading); text-decoration:none; }
a:hover{ text-decoration:underline; text-decoration:none; }
.container{ max-width:1100px; margin:0 auto; padding:0 30px; }
.section{ padding:56px 0; scroll-margin-top:84px; }
@media (min-width:640px){ .section{ padding:80px 0; scroll-margin-top:96px; } }

.header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.85); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--border); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:10px; }
.brand{ display:flex; align-items:center; gap:8px; }
.badge{ width:32px; height:32px; border-radius:12px; background:var(--brand); }
.brand-name{ color:var(--heading); font-weight:600; }
.menu{ display:none; gap:6px; align-items:center; }
.menu a{ display:inline-block; padding:5px 12px; border-radius:999px; }
.menu a:hover{ background:#E9F2FB; text-decoration:none; }
.cta{ display:none; margin-left:8px; padding: 5px 16px; border:1px solid var(--brand); color:var(--brand); border-radius:999px; }
.cta:hover{ background:var(--brand); color:white; text-decoration:none; }

.hamburger{ display:inline-flex; align-items:center; justify-content:center; padding: 15px 8px; border:0px solid var(--border); border-radius:12px; color:var(--heading); background:white; }
.hamburger:active{ background:#E9F2FB; }
.hamburger .hamburger-bars{ width:20px; height:2px; background:var(--heading); position:relative; display:block; }
.hamburger .hamburger-bars::before,.hamburger .hamburger-bars::after{ content:""; position:absolute; left:0; right:0; height:2px; background:var(--heading); }
.hamburger .hamburger-bars::before{ top:-6px; } .hamburger .hamburger-bars::after{ top:6px; }

/*
 * Mobile navigation menu
 *
 * The mobile menu is hidden by default via `display:none`. When JavaScript
 * adds the `.open` class, the menu is displayed as a fixed overlay beneath
 * the header. We avoid relying on the HTML `hidden` attribute here because
 * some browsers strip or ignore it on injected content.
 */
 /*
  * Mobile navigation menu
  *
  * Hidden by default. When the `.open` class is applied, the menu is displayed
  * as a fixed overlay below the header. This avoids relying on the HTML
  * `hidden` attribute, which some mobile browsers may strip or ignore.
  */
 .mobile {
   border-top:1px solid var(--border);
   background:white;
   display:none;
 }
 .mobile.open {
   display:block;
   position:fixed;
   top:auto;
   left:0;
   right:0;
   z-index:49;
   max-height:calc(100vh - 72px);
   overflow-y:auto;
   padding:20px;
 }
 /* mobile menu links */
 .mobile a{
   display:block;
   padding:10px 12px;
   border-radius:12px;
   color:var(--heading);
 }
 .mobile a:hover{
   background:#E9F2FB;
   text-decoration:none;
 }
 .mobile .cta-block{
   display:block;
   text-align:center;
   margin-top:16px;
   padding:10px 16px;
   margin: 10px;
   border:1px solid var(--brand);
   color:var(--brand);
   border-radius:999px;
 }

@media (min-width:960px){
  .hamburger{ display:none; }
  .menu{ display:flex; }
  .cta{ display:inline-flex; }
  .mobile{ display:none !important; }
    .nav {
    padding: 10px 10px;
  }
}

@media only screen and (max-width: 900px) {
    .kv-slider .kv-text .kv-text-inner {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    top: 65%;
    left: 52%;
    text-align: left;
    }
    .kv-slider .kv-slider-subtitle {
    font-size: 20px;
    line-height: 32px;
    max-width: 100%;
    margin: 0 auto;
    }
}
.bullets{ margin-top:0px; padding-left:20px; }
.bullets li{ margin:8px 0; }

.hero h1{
  margin:16px 0 0 0;
  color:var(--heading);
  font-weight:800;
  line-height:1.12;
  font-size:2.75rem;
}
@media (min-width:480px){ .hero h1{ font-size:3.5rem; } }
@media (min-width:768px){ .hero h1{ font-size:4.5rem; line-height:1.1; } }
.hero p{ margin-top:12px; color:var(--text); font-size:20px; line-height:1.95; }
@media (min-width:480px){ .hero p{ font-size:21px; } }
@media (min-width:768px){ .hero p{ font-size:22px; line-height:2.05; } }

.title{ color:var(--heading); font-weight:700; line-height:1.12; font-size:3rem; margin:0 0 22px; }
@media (min-width:480px){ .title{ font-size:3.25rem; margin-bottom:28px; text-align:center; } }
.list li{ margin:30px 0; }

.video-box{ position:relative; width:100%; margin:0 auto; padding-top:56.25%; border-radius:16px; overflow:hidden; border:1px solid var(--border); background:var(--muted); }
@media (min-width:768px){ 
  .video-box{ width:80%;}
}
.video-box iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-cover{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.play-btn{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:12px; padding:12px 18px; border-radius:999px; border:1px solid rgba(255,255,255,.8); background:rgba(255,255,255,.9); color:var(--heading); backdrop-filter:blur(6px); box-shadow:0 6px 20px rgba(0,0,0,.08); }
.triangle{ width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:16px solid var(--brand); }

.insights{ position:relative; padding:24px; border-radius:16px; border:1px solid var(--border); background:rgba(255,255,255,.9 ); overflow:hidden; }
.insights-badge{ position:absolute; top:0; right:0; margin:12px; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:600; color:var(--brand); background:rgba(255,255,255,.9); border:1px solid var(--border); box-shadow:0 1px 2px rgba(0,0,0,.04); }
.insights-bg{ position:absolute; inset:0; opacity:.05; background-image: radial-gradient(24rem 24rem at 15% 20%, var(--brand-std) 0%, transparent 55%), radial-gradient(20rem 20rem at 85% 30%, #F5A500 0%, transparent 50%); }
.insights-strip{ position:absolute; left:0; top:0; bottom:0; width:6px; background:linear-gradient(to bottom, var(--brand-std), #2796D4, var(--brand)); }
.insights-content{ position:relative; }
.insights-content p{ margin:10px 0; font-size:18px; line-height:2.0; }
.keyline{ color:var(--heading); font-weight:800; }
.insights-src{ margin-top:16px; padding-top:12px; border-top:1px solid #E9F2FB; display:flex; align-items:flex-start; gap:12px; }
.src-icon{ width:20px; height:20px; color:#2796D4; flex-shrink:0; }
.src-text{ margin:0; font-size:22px; line-height:1.6; font-weight:600; color:var(--heading); }
.insights-glow{ position:absolute; right:-40px; bottom:-40px; width:220px; height:220px; border-radius:50%; opacity:.07; background:radial-gradient(closest-side,var(--brand),transparent); }

.apply{ display:flex; gap:10px; flex-direction:column; align-items:center; }
.qr:hover { transform:scale(1.05); transition:1s all; }
/*@media (min-width:640px){ .apply{ flex-direction:row; gap:24px; } }*/
.qr{ width:176px; height:176px; border-radius:12px; border:1px solid var(--border); background:#fff; display:flex; align-items:center; justify-content:center; padding:8px; }
@media (min-width:640px){ .qr{ width:240px; height:240px; } }
.qr img{ max-width:100%; max-height:100%; object-fit:contain; }
.apply-actions{ display:flex; gap:12px; flex-wrap:wrap; }

.stories{ display:grid; grid-template-columns:1fr; gap:16px; padding-left:0; list-style:none; }
@media (min-width:768px){ .stories{ grid-template-columns:1fr 1fr; } }
.quote{ display:flex; gap:12px; padding:20px; border-radius:14px; background:#F9FAFB; border:1px solid #E5E7EB; transition:1s all; }
.quote:hover { box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 13px -6px; }

.qicon{ width:24px; height:24px; color:var(--brand); flex-shrink:0; margin-top:4px; }
.q{ margin: 0px 0 10px 0;
    font-style: italic;
    font-size: 16px;
    line-height: 2em; }
.name{ margin:0; color:var(--heading); font-size:20px; font-weight:600; }
.meta{ margin:2px 0 0 0; font-size:1em;  font-weight:600; color: #007bc7; }

.fq{ font-weight:600; color:var(--heading); font-size:20px; line-height:1.25; margin:0 0 6px; }

.fixed_box {
  display: block;
  position: fixed;
  right: 10px;
  bottom: 10px;
}
.fixed_box .qr {
  width: 120px;
  height: 120px;
}
@media only screen and (max-width: 768px) {
  .fixed_box {
  display: none;
  }
}

@media only screen and (max-width: 1100px) {
    .kv-slider .kv-slider-title {
        font-size: 46px;
        line-height: 51px;
    }
}

.setbg-top.cover6 {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3)), url(../images/1694030461.jpg);
}
.section.cover7 {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3)), url(../images/1824044330.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}
.section.cover8 {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3)), url(../images/92677291.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}
.highlight-up {
    padding-bottom: 0px;
}
ul.list {
    list-style: none;
    margin: 0px;
    padding: 0;
}
.list li {
    color: #007bc7;
}
.list p {
    font-size: 16px;
    color: #000;
}
.list p.fq {
    font-size: 21px;
    font-weight: 700;
    color: #007bc7;
    border-bottom: 1px solid #007bc7;
    width: fit-content;
}
.apply.float_bt p {
    background-color: #FFF;
    color: #000;
    margin: 0px;
    padding: 0px 10px 2px;
    border: 1px solid #D1E2F4;
    border-radius: 60px;
}
@media screen and (max-width: 768px) {
    .KSP {
        display: block;
        margin: 0;
    }
    .section.cover7 {
        background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3)), url(../images/1824044330_mobile.jpg);
        background-attachment: unset;
        background-position: center center;
    }

    .section.cover8 {
        background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3)), url(../images/92677291_mobile.jpg);
        background-attachment: unset;
        background-position: center center;
    }
}