@import url('https://fonts.googleapis.com/css2?family=Afacad:wght@400&display=swap');

:root{
  --cream:#f2f0e3;
  --green:#3c605e;
}

*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  overflow-x:hidden;
}
body{
  margin:0;
  background:var(--cream);
  font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;
  color:#333;
  line-height:1.75;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}

.page{
  width:100%;
  margin:0;
  background:var(--cream);
  overflow:visible;
}

/* =========================
   FAQ Detail Desktop
========================= */
.faq-detail{
  background:var(--cream);
  min-height:720px;
}
.faq-hero{
  height:250px;
  background-size:cover;
  background-position:center;
  position:relative;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
}
.faq-hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.2);
}
.faq-hero-title{
  position:relative;
  z-index:1;
  color:#F2F0E3;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:34px;
  white-space:nowrap;
  text-shadow:0 3px 8px rgba(0,0,0,.45);
}
.faq-hero-title h1{
  margin:0;
  font-size:38px;
  letter-spacing:.35em;
  line-height:1;
  font-weight:500;
}
.faq-hero-title span{
  display:inline-block;
  margin-top:0;
  font-size:28px;
  letter-spacing:.22em;
  font-family:Afacad,Arial,sans-serif;
  line-height:1;
}
.faq-content{
  max-width:920px;
  margin:72px auto 80px;
  padding:0 20px;
}
.faq-list{
  display:flex;
  flex-direction:column;
  gap:46px;
}
.qa-item{
  display:grid;
  grid-template-columns:78px minmax(0,1fr);
  column-gap:24px;
  align-items:start;
}
.qa-num{
  font-family:Afacad,Arial,sans-serif;
  width:64px;
  height:64px;
  border-radius:50%;
  background:var(--green);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:24px;
  letter-spacing:.08em;
  margin-top:0;
  box-shadow:0 5px 8px rgba(0,0,0,.22);
}
.qa-box{
  border-radius:30px;
  overflow:visible;
}
.qa-question{
  width:100%;
  border:2px solid rgba(60,96,94,.22);
  background:#e5e9dc;
  color:#3c605e;
  min-height:64px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 32px 10px 42px;
  text-align:left;
  font-size:22px;
  font-weight:500;
  letter-spacing:.18em;
  cursor:pointer;
  box-shadow:-2px -2px 4px rgba(0,0,0,.15),0 2px 1px rgba(255,255,255,.55);
  font-family:inherit;
}
.qa-question .plus{
  font-size:0;
  line-height:1;
  width:24px;
  min-width:24px;
  text-align:center;
  display:inline-block;
  transform:none!important;
}
.qa-question .plus:before{
  content:'+';
  font-size:38px;
  font-weight:300;
  line-height:1;
  color:#2f6362;
}
.qa-item.open .qa-question .plus:before{
  content:'−';
  font-size:38px;
}
.qa-answer{
  font-weight:500;
  display:none;
  position:relative;
  background:#c8d1c5;
  border-radius:22px;
  margin-top:12px;
  color:#333;
  font-size:18px;
  line-height:1.9;
  letter-spacing:.06em;
  padding:26px 34px 26px 92px;
  min-height:86px;
  box-shadow:inset 0 3px 8px rgba(0,0,0,.12);
}
.qa-answer:before{
  content:'A';
  font-family:Afacad,Arial,sans-serif;
  position:absolute;
  left:28px;
  top:30%;
  width:49px;
  height:49px;
  border-radius:50%;
  background:#3c605e;
  color:#F2F0E3;
  display:grid;
  place-items:center;
  font-size:26px;
  font-weight:800;
}
.qa-item.open .qa-answer{
  display:block;
}

/* =========================
   Tablet
========================= */
@media(max-width:900px){
  .faq-hero{
    height:178px;
  }
  .faq-hero-title h1{
    font-size:38px;
    letter-spacing:.35em;
    font-weight:900;
  }
  .faq-content{
    max-width:920px;
    margin:72px auto 80px;
    padding:0 20px;
  }
  .qa-item{
    grid-template-columns:78px minmax(0,1fr);
    column-gap:24px;
  }
  .qa-num{
    width:64px;
    height:64px;
    font-size:24px;
  }
  .qa-question{
    min-height:64px;
    padding:10px 32px 10px 42px;
    font-size:22px;
    font-weight:800;
    letter-spacing:.09em;
  }
}

/* =========================
   Mobile
========================= */
@media(max-width:520px){
  html,
  body{
    background:#f2f0e3;
    overflow-x:hidden;
  }

  .page{
    overflow:visible !important;
    background:#f2f0e3;
  }

  .faq-detail{
    background:#f2f0e3 !important;
    min-height:0 !important;
  }
  .faq-hero{
    height:116px !important;
    background-size:cover !important;
    background-position:center !important;
    margin:0 !important;
  }
  .faq-hero:before,
  .faq-hero-title{
    display:none !important;
  }

  .faq-hero-inheritance{background-image:url('https://yi-tian.tw/assets/mobile-faq-page/inheritance-banner.svg') !important;}
  .faq-hero-asset{background-image:url('https://yi-tian.tw/assets/mobile-faq-page/asset-banner.svg') !important;}
  .faq-hero-gifting{background-image:url('https://yi-tian.tw/assets/mobile-faq-page/gifting-banner.svg') !important;}
  .faq-hero-will{background-image:url('https://yi-tian.tw/assets/mobile-faq-page/will-banner.svg') !important;}
  .faq-hero-realestate{background-image:url('https://yi-tian.tw/assets/mobile-faq-page/realestate-banner.svg') !important;}
  .faq-hero-trust{background-image:url('https://yi-tian.tw/assets/mobile-faq-page/trust-banner.svg') !important;}

  .faq-content{
    max-width:430px !important;
    margin:0 auto !important;
    padding:38px 27px 42px !important;
  }
  .faq-list{
    gap:24px !important;
    display:flex !important;
    flex-direction:column !important;
  }
  .qa-item{
    display:grid !important;
    grid-template-columns:50px minmax(0,1fr) !important;
    column-gap:2px !important;
    align-items:start !important;
  }
  .qa-num{
    width:48px !important;
    height:48px !important;
    background:transparent center/contain no-repeat !important;
    color:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;
    margin-top:0 !important;
  }
  .qa-item:nth-child(1) .qa-num{background-image:url('https://yi-tian.tw/assets/mobile-faq-page/01.png') !important;}
  .qa-item:nth-child(2) .qa-num{background-image:url('https://yi-tian.tw/assets/mobile-faq-page/02.png') !important;}
  .qa-item:nth-child(3) .qa-num{background-image:url('https://yi-tian.tw/assets/mobile-faq-page/03.png') !important;}
  .qa-item:nth-child(4) .qa-num{background-image:url('https://yi-tian.tw/assets/mobile-faq-page/04.png') !important;}
  .qa-item:nth-child(5) .qa-num{background-image:url('https://yi-tian.tw/assets/mobile-faq-page/05.png') !important;}
  .qa-item:nth-child(6) .qa-num{background-image:url('https://yi-tian.tw/assets/mobile-faq-page/06.png') !important;}
  .qa-item:nth-child(7) .qa-num{background-image:url('https://yi-tian.tw/assets/mobile-faq-page/07.png') !important;}
  .qa-item:nth-child(8) .qa-num{background-image:url('https://yi-tian.tw/assets/mobile-faq-page/08.png') !important;}
  .qa-item:nth-child(9) .qa-num{background-image:url('https://yi-tian.tw/assets/mobile-faq-page/09.png') !important;}
  .qa-item:nth-child(10) .qa-num{background-image:url('https://yi-tian.tw/assets/mobile-faq-page/10.png') !important;}
  .qa-item:nth-child(11) .qa-num{background-image:url('https://yi-tian.tw/assets/mobile-faq-page/11.png') !important;}
  .qa-item:nth-child(12) .qa-num{background-image:url('https://yi-tian.tw/assets/mobile-faq-page/12.png') !important;}

  .qa-box{
    border-radius:22px !important;
    overflow:visible !important;
  }
  .qa-question{
    min-height:44px !important;
    border:1px solid rgba(60,96,94,.18) !important;
    background:#e5e9dc !important;
    border-radius:999px !important;
    padding:7px 13px 7px 20px !important;
    box-shadow:-2px -2px 4px rgba(0,0,0,.13),0 1px 1px rgba(255,255,255,.5) !important;
    font-size:13px !important;
    line-height:1.45 !important;
    letter-spacing:.08em !important;
    font-weight:800 !important;
    color:#3c605e !important;
  }
  .qa-question .plus{
    font-size:0 !important;
    width:14px !important;
    min-width:14px !important;
    height:14px !important;
    position:relative !important;
    display:inline-block !important;
  }
  .qa-question .plus:before{
    content:'+' !important;
    font-size:22px !important;
    line-height:12px !important;
    font-weight:300 !important;
    color:#3c605e !important;
  }
  .qa-item.open .qa-question .plus:before{
    content:'−' !important;
    font-size:24px !important;
    line-height:10px !important;
  }
  .qa-answer{
    margin-top:8px !important;
    display:none;
    position:relative !important;
    background:#c8d1c5 !important;
    border-radius:16px !important;
    color:#222 !important;
    font-size:11px !important;
    line-height:1.75 !important;
    letter-spacing:.06em !important;
    padding:14px 16px 14px 52px !important;
    min-height:54px !important;
    box-shadow:inset 0 2px 6px rgba(0,0,0,.10) !important;
  }
  .qa-answer:before{
    content:'A' !important;
    font-family:Afacad,Arial,sans-serif;
    left:16px !important;
    top:14px !important;
    width:28px !important;
    height:28px !important;
    border-radius:50% !important;
    background:#3c605e !important;
    color:#F2F0E3 !important;
    display:grid !important;
    place-items:center !important;
    font-size:15px !important;
    font-weight:800 !important;
    position:absolute !important;
  }
  .qa-item.open .qa-answer{
    display:block !important;
  }
}