body{margin: 0; padding: 0; font-family: Microsoft JhengHei;}
*{box-sizing: border-box;}

img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }

/* 容器與通用區塊 */
.container{ max-width:1160px; margin:0 auto; padding:0 16px; display:flex; flex-direction:column; align-items:center; }
.section{ padding:72px 0; }

/* ================= 按鈕 ================= */
.btn{ display:inline-block; border-radius:999px; padding:16px 28px; font-weight:900; letter-spacing:.04em; transition:transform .15s ease, box-shadow .2s ease; }
.btn:hover{ transform:translateY(-2px); }
.btn-pill{ background:#ffb338; color:#fff; box-shadow:0 12px 28px rgba(0,0,0,.24); font-size: 28px;}
.btn-giant{ background:#ffb338; color:#fff; box-shadow:0 12px 28px rgba(0,0,0,.24); font-size:45px; }
.btn-fqa{ background:#ffb338; color:#fff; box-shadow:0 12px 28px rgba(0,0,0,.24); font-size:32px; } 

/* ================= Header ================= */
.mainHeader{display: flex; align-items: center; justify-content: space-between; width: 100%; height: 80px; background: #1b5c6d; padding: 0 30px;}
.mainHeader .mainLogo{display: block; height: 50%;}
.mainHeader .mainLogo img{display: block; height: 100%;}

.mainHeader .mainMenu{display: flex; align-items: center; gap: 20px;}
.mainHeader .mainMenu li{display: block; list-style: none;}
.mainHeader .mainMenu li a{display: block; font-size: 20px; color: #fff; font-weight: bolder; text-decoration: none;}

.mainHeader .burgerBtn{display: none;}

/* ================= Hero ================= */
.hero{ position:relative; color:#fff; width:100%; padding:80px 15px; display:flex; flex-direction:column; justify-content:end;}
.hero::before{ content:""; position:absolute; inset:0; background:url(../img/背景-v4.png) center/cover no-repeat; z-index:-2; }
.hero-wrap{ display:grid; grid-template-columns:1fr 1fr; gap: 36px; align-items:center; position:relative; }
.hero-figure{ width:100%; }
.hero-copy .heroImg{display: block; width: 68%;}
.hero-copy h1{ margin:.2em 0; font-weight:900; line-height:1.15; font-size:85px; text-shadow:5px 0 0 #fff; color:#305a7d; }
.hero-copy p{ margin:10px 0 0; font-size:36px; opacity:.95; }
.hero-copy .triple{ display:block; max-width:110%; margin-top:30px; }
.trust{ display:block; margin:0 0 -10px; }
.trust img{ width:90%; }
.credit{ position:absolute; left:-21px; bottom:55px; opacity:.95; font-size:45px; }

/* ================= 優惠卡 ================= */
.deal-heading{ text-align:center; color:#fff; text-shadow:0 3px 18px rgba(0,0,0,.45); }
.deal-heading h2{ margin:0 0 6px; font-weight:900; font-size:90px; letter-spacing:.02em; width: 100%;}
.deal-strip{ position:relative; padding-top:24px; padding-bottom:8px; }
.deal-strip::before{ content:""; position:absolute; inset:0; background:url(../img/社會住宅提供意想不到的優惠.png) center/cover no-repeat; filter:blur(2px) brightness(.7); z-index:-1; }

.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin:24px 0; }

.card{ background: #f6f8fb; border-radius:30px; border:2px solid #000; box-shadow:0 14px 40px rgba(0,0,0,.16); overflow:visible; position:relative; display:flex; flex-direction:column; min-height:400px; }
.card .top{ padding:20px 22px; }
.chip{ display:inline-block; font-weight:800; font-size:22px; color: #000;}
.subtext{ margin-top:8px; font-size:32px; font-weight:800; color:#545454; }
.content{ padding:20px; flex:1 1 auto; border-top:2px solid #000; border-radius:30px; }
.brand-chip{ font-weight:800; font-size:22px; color: #000; letter-spacing:.08em; }
.bigline{ margin:16px 0 0; font-size: 50px; font-weight:900; color:#a2a40d; }
.middleline{ color:#545454; font-size:38px; font-weight:900; margin: 16px 0 0;}
.divider{ height:2px; background:#000; margin:12px 0; }
.smallline,.smallline-M{ display: flex; margin:12px 0 0; font-size:45px; font-weight:900; color:#a2a40d; align-items: center;}
.smallline img{width: 22%; margin-left: 7px;}
.smallline strong{ color:#f25c05; font-size:45px; }
.cta{ padding:0 20px 22px; align-self:center; }
.badge{ position:absolute; right:-24px; top:96px; width:32%; filter:drop-shadow(0 10px 18px rgba(0,0,0,.25)); z-index:2; }

/* ================= 3費有補助 ================= */
.assist{ background:#fff3de; border-block:1px solid var(--line); width: 100%;}
.assist-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(20px,3vw,40px); align-items:center; }
.assist-title h3{ font-size:104px; margin:0 0 6px; font-weight:900; color:#305a7d; }
.assist-title .accent{ color:#ee5e37; }
.assist .lead{ color:#f25c05; margin:30px 0 100px; font-size:40px; }

.assist-list{ display:grid; gap:32px; }
.assist-item{ display:flex; align-items:center; background:#f4f4f4; border:2px solid #2c2b2d; border-radius:35px; padding:14px 15px; box-shadow:0 6px 16px rgba(238,94,55,.3); position:relative; justify-content:space-between; }
.assist-item .badge{ position:absolute; width:117px; top:-31px; left:-60px; }
.assist-item .meta{ margin-left:35px; }
.assist-item .meta-icon{ margin-right:39px; }
.assist-item .meta-icon img{ width:85px; }
.assist-item .meta b{ display:block; font-size:48px; font-weight:700; color:#a2a40d; }
.assist-item .meta strong{ font-size:60px; color:#a2a40d; }
.assist-item .meta small{ color:#ee5e37; font-weight:700; font-size:60px; }

/* ================= 流程說明 ================= */
.flow{ background:#fff3de; padding:24px 12px; width: 100%;}
.flow .grid{ display:grid; grid-template-columns:1fr; gap:24px; }
.flow .flowLogo img{ width:30%; }
.flow .panel{ width:100%; padding:16px; }
.flow .dialogBox{ display:flex; }
.flow .dialogWrap, .flow .answerWrap{ position:relative; display:inline-block; }
.flow .dialogWrap{ width:30%; }
.flow .answerWrap{ width:70%; }
.flow .dialogText{ position:absolute; top:33%; left:67%; transform:translate(-50%,-50%); width:100%; font-size:27px; line-height:1.5; color:#000; font-weight:900; }
.flow .answerText{ position:absolute; top:50%; left:60%; transform:translate(-50%,-50%); width:100%; font-size:25px; line-height:1.5; color:#000; }
.flow .answerText b{font-size: 27px;}
.flow .decor-top{ position:absolute; top:-65px; right:-40px; width: 35%; }
.flow .decor-bottom{ position:absolute; bottom:-34px; right:-10px; }
.flow .img-holder{ width:100%; padding:8px; margin-top: 16px;}

/* ================= FAQ ================= */
.faq{ background:#fff3de; display:flex; flex-direction:column; position: relative; width: 100%; padding: 0 0 80px 0;}
.faqTitle{display: flex; width: 100%;}
.faq h3{ font-size:100px; margin:0 0 1px; font-weight:900; color:#f25c05; }
.faqLogo{display: flex; width: 30%; flex-direction: column; justify-content: center;}
.faqLogo img{display: block; width: 85%;}
.faqImg{ width: 37%; }
.faq-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2vw,22px); }
.qa{ background:#fff; border:2px solid #0b3f63; border-radius:16px; padding:18px; box-shadow:0 12px 28px rgba(2,132,199,.06); }
.qa .q{ font-weight:900; color:#305a7d; font-size: 27px;}
.divider-2{ height:2px; background:#305a7d; margin:35px 12px 0; }
.qa .a{ margin: 6px 0 45px; color:#305a7d; }
.qa .a h4{font-size: 27px; margin-bottom: 10px;}
.qa p {font-size: 20px;}
.qa p strong{ color:#f25c05; }
.cta-center{ text-align:center; z-index: 2; position: absolute; bottom: 42px;}

/* ================= News Wall 九宮格 ================= */
.news{ max-width:1160px; margin:0 auto ; padding:16px 16px 0; }
.wall{ margin-top:30px; display:grid; gap:12px; grid-template-columns:repeat(4,1fr); }
.col-1,.col-4{ display:grid; grid-template-rows:195.88px 350.13px; gap:12px; }
.col-2,.col-3{ display:grid; grid-template-rows:1fr 1fr; gap:12px; }

.tile{ border-radius:12px; overflow:hidden; position:relative; background:#e2e8f0; }
.tile a,.tile img{ width:100%; height:100%; }
.tile img{ object-fit:cover; }

/* 品牌卡（左上） */
.tile.brand{ background:#eef3f7; display:flex; flex-direction:column; justify-content:center;}
.brandLogo img{ height:80%; width:80%; }
.brandText .kicker{ font-size:25px; color:#343434; font-weight:700; letter-spacing:.02em; }
.brandText .hiChip{ display:inline-block; background:#305a7d; color:#ecb023; border-radius:10px; padding:8px 10px; line-height:1.35; font-weight:900; font-size:24px; }

/* Caption 與 Logo 疊加 */
.caption{ position:absolute; left:0; right:0; bottom:0; padding:14px 14px 12px; background:linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 70%); color:#fff; pointer-events:none; }
.caption h3{ margin:0 0 4px; font-size:30px; line-height:1.2; letter-spacing:.02em; }
.caption p{ margin:0; font-size:16px; opacity:.9; }
.tile a:hover img{ transform:scale(1.02); transition:transform .35s ease; }

.tileLogo{ position:absolute; left:12px; bottom:70px; z-index:2; }
.tileLogo img{ max-height:50px; object-fit:contain; }

/* ================= Lead / 表單 ================= */
.lead{display: flex;flex-direction: column; max-width: 1160px; margin: 0 auto;}
.leadTitle2{font-size:90px; margin:0; font-weight:900; color:#305a7d;}
.leadTitle2 .main{margin: -11px 0 -26px;}
.leadTitle2 .second{margin: 0 0 25px;}
.leadTitle2 strong{color: #e8562e;}
.lead-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap: 28px; align-items:stretch; width: 100%;}
.lead .pane{ border-radius:14px; }
.lead .image-pane .img-holder,
.lead .image-pane .free-img-holder{ height:100%; min-height:280px; display:grid; font-weight:700; }

/* ================= Footer ================= */
footer{ display:flex; align-items:center; justify-content:center; width:100%; height:30px; color:#fff; background:#1b5c6d; }

@media screen and (max-width: 875px) {
    .mainHeader{height: 50px; position: sticky; top: 0; z-index: 999;}
    .mainHeader .mainMenu{display: none;}

    .mainHeader .mainMenu{padding: 0;}
    .mainHeader .mainMenu.act{display: flex; flex-direction: column; justify-content: center; width: 70%; height: calc(100dvh - 50px); background: #fff; position: fixed; top: 50px; right: 0; z-index: 999; margin: 0;}
    .mainHeader .mainMenu li a{color: #343434;}

    .mainHeader .burgerBtn{display: block; width: 30px; height: 30px; background: none; border: none; position: relative;}
    .mainHeader .burgerBtn i{display: block; width: 100%; height: 3px; border-radius: 5px; background: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

    .mainHeader .burgerBtn i:nth-child(1){top: 20%; left: 50%; transform: translate(-50%, -50%);}
    .mainHeader .burgerBtn i:nth-child(2){top: 50%; left: 50%; transform: translate(-50%, -50%);}
    .mainHeader .burgerBtn i:nth-child(3){top: 80%; left: 50%; transform: translate(-50%, -50%);}

    .mainHeader .burgerBtn.act i:nth-child(1){top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg);}
    .mainHeader .burgerBtn.act i:nth-child(2){display: none;}
    .mainHeader .burgerBtn.act i:nth-child(3){top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg);}

    .container{max-width: 100%; padding: 0 16px;}
    .section{padding: 48px 0;}
    .btn,.btn-1,.btn-2{padding: 12px 20px;font-size: 20px;}
    .btn-2{ font-size: 24px; }

    .hero{padding: 24px 16px 32px; height: 630px;}
    .hero::before{ content:""; position:absolute; inset:0; background:url(../img/手機板盛竹如+背景.png) center/cover no-repeat; z-index:-2; }
    .hero-wrap{grid-template-columns: 1fr; gap: 16px; height: 100%; align-items: flex-start;}
    .hero-figure{order: 2;}
    .hero-copy{order: 1;}
    .hero-copy .heroImg{width: 60%;}
    .hero-copy p{ font-size: 20px; }
    .hero-copy .triple{ width: 85%; margin: 10px 0 0;}
    .trust img{ display: none; }
    .trust p{font-size: 20px;}
    .btn-filled{padding: 0; display: flex; justify-content: center; margin: 0 0 50px; position: absolute; bottom: -42px;}
    .btn-filled img{width: 58%;}
    .credit{font-size: 22px; position: absolute; bottom: -15px; left: 27%;}

    .deal-heading h2{font-size: 36px;line-height: 1.2; margin: 10px 0 10px;}
    .deal-heading h2 strong{color: #ffb338;}
    .deal-strip{ padding-top: 16px; }
    .deal-strip::before{ filter: blur(1.5px) brightness(.65); }
    .cards{grid-template-columns: 1fr;                  /* 一欄一張卡 */gap: 18px;margin-top: 16px;}
    .card{border-radius: 35px; min-height: auto; margin: 0 30px;}
    .card .top{ padding: 14px 30px; border-radius: 14px; display: flex; flex-direction: column; align-items: flex-start;}
    .chip{ font-size: 20px; margin: 5px 0 0;}
    .subtext{ font-size: 32px; }
    .subtext:nth-child(2){font-size: 24px;}
    .content{ padding: 14px 30px; display: flex; flex-direction: column; align-items: flex-start; }
    .brand-chip{ font-size: 20px; }
    .bigline{ font-size: 42px; margin: 0;}
    .middleline{ font-size: 28px; }
    .smallline{ font-size: 36px; display: flex; justify-content: flex-start;}
    .smallline-M{font-size: 36px;}
    .smallline strong{ font-size: 36px; }
    .divider{ display: none;}
    .badge{ right: -28px;top: 82px;width: 29%;filter: drop-shadow(0 6px 14px rgba(0,0,0,.2));}
    .cta{ padding: 12px 16px 16px; }

    .assist{ padding: 27px 0 40px; }
    .assist-grid{grid-template-columns: 1fr; gap: 20px;}
    .assist-title{display: flex; flex-direction: column; align-items: center;}
    .assist-title h3{ font-size: 70px; }
    .assist .lead{ font-size: 29px; margin: 0 0 20px; }
    .assist-list{ gap: 16px; margin: 10px 30px 0;}
    .assist-item{border-radius: 18px;padding: 14px 12px 12px;}
    .assist-item .badge{top: -14px; left: -28px; width: 60px;}
    .assist-item .meta{margin: 0 0 0 20px;}
    .assist-item .meta b{ font-size: 24px; }
    .assist-item .meta strong{ font-size: 30px; }
    .assist-item .meta small{ font-size: 30px; }
    .assist-item .meta-icon{margin: 0;}
    .assist-item .meta-icon img{ width: 56px; }

    .flow{ padding: 54px 0; }
    .flow .grid{ gap: 53px; }
    .flow .grid .flowLogo img{ width: 65%; margin: 0 auto; }
    .flow .panel{ padding: 10px 0;}
    .flow .panel .dialogBox{ display: flex; flex-direction: column;}
    .flow .panel .dialogBox .dialogWrap{width: 50%;}
    .flow .panel .dialogBox .answerWrap{width: 100%;}
    .flow .panel .dialogBox .dialogWrap img{ width: 100%; }
    .flow .panel .dialogBox .answerWrap img{width: 100%;}
    .flow .panel .dialogBox .dialogWrap .dialogText{top: 41%; left: 52%; transform: translate(-50%,-50%);width: 84%; font-size: 16px; text-align: center;}
    .flow .panel .dialogBox .answerWrap .answerText{top: 50%; left: 53%; transform: translate(-50%,-50%);width: 86%; font-size: 12px;}
    .flow .panel .dialogBox .answerWrap .answerText b{font-size: 15px;}
    .flow .panel .dialogBox .answerWrap .decor-top{width: 130px; top: -39px; right: -15px;}
    .flow .panel .dialogBox .answerWrap .decor-bottom{right: 35%; bottom: -187%; padding: 10px 14px; font-size: 16px;}
    .flow .img-holder{ padding: 10px 0 0; margin: 0;}

    .faq{ padding: 36px 0 60px; }
    .faqTitle{justify-content: center;}
    .faq h3{ font-size: 60px; text-align:center; }
    .faqImg{width: 59%;}
    .faqLogo{display: none;}
    .faq-grid{ grid-template-columns: 1fr; gap: 12px; }
    .qa{ padding: 14px; border-radius: 24px;}
    .qa .q{ font-size: 26px; padding: 0 0 0 13px;}
    .qa .a{padding: 0 0 0 13px;}
    .qa .a h4{ font-size: 26px; }
    .cta-center{bottom: 38px;}

    .news{ padding: 0 12px; }
    .wall{grid-template-columns: repeat(2, 1fr);       /* 兩欄 */gap: 10px;}
    .col-1, .col-4{grid-template-rows: 150px 247px;             /* 手機高度比例 */gap: 10px;}
    .col-2, .col-3{grid-template-rows: 1fr 1fr;gap: 10px;}
    .tile{border-radius: 12px;}
    .tile::after{right: 6px; top: 6px; width: 22px; height: 22px; font-size: 14px;}
    .tile .caption{padding: 10px 10px 12px;background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 60%);}
    .tile .caption h3{ font-size: clamp(16px, 4.8vw, 18px); }
    .tile .caption p{ font-size: clamp(12px, 3.6vw, 14px); }
    .tile .tileLogo{ left: 10px; bottom: 58px; }
    .tile .tileLogo img{ max-height: 38px; }
    .brandLogo img{ width: 64%; height: auto; }
    .brandText .kicker{ font-size: clamp(14px, 4.2vw, 16px); }
    .brandText .hiChip{font-size: clamp(14px, 4.4vw, 16px);padding: 6px 8px;line-height: 1.35;}

    .lead {margin: 0 15px;}
    .leadTitle, .leadTitle2{font-size: 26px; padding: 0 0 0 15px;}
    .leadTitle .main, .leadTitle2 .main{margin: 0;}
    .leadTitle .second strong{color: #a2a40d;}
    .lead-grid{ grid-template-columns: 1fr; gap: 16px; }
    .lead .image-pane .img-holder{min-height: 200px; }
    .lead .image-pane .free-img-holder{display: none;}
    .form-placeholder .row{ grid-template-columns: 1fr; gap: 8px; }

    /* ---------- 頁尾 ---------- */
    footer{font-size: 10px; height: 32px; padding: 0 8px; text-align: center;}
}