/* ===== 2027 1-6月 課程簡介索取頁 ===== */
:root{
  --navy:#0b1740;      /* 標題描邊深藍 */
  --space:#141a5c;     /* 頁面底色（取自 BG 星空） */
  --yellow:#ffd84a;    /* 標題黃 */
  --yellow-hi:#fff1a8;
  --white:#ffffff;
}

*{box-sizing:border-box;}
html,body{margin:0;}
body{
  font-family:"Noto Sans TC","微軟正黑體","Microsoft JhengHei",Arial,sans-serif;
  background:#0a0e33 radial-gradient(ellipse at 50% 0%, #26308a 0%, #0a0e33 70%) fixed;
  color:var(--white);
  overflow-x:hidden;
}
a:hover{text-decoration:none;}

/* 上方 LOGO 列（沿用原版） */
.top{height:65px;background:#282828;color:#FFF;overflow:hidden;}
.top a{float:left;}
.top_img{float:left;height:60px;padding-left:20px;margin-top:2px;}
.top_h2{color:#FFF;float:left;margin:0;font-family:Arial,"微軟正黑體","Microsoft JhengHei",sans-serif;font-size:1.8em;font-weight:600;letter-spacing:2px;padding-left:20px;line-height:65px;}

/* 主視覺容器：寬 890px，比例依 BG 1122×1402 */
.container{
  width:890px;max-width:100%;
  margin:0 auto;padding:0;
  box-shadow:0 0 40px 0 rgba(0,0,0,.6);
}
.image{
  position:relative;
  width:100%;
  background:var(--space) url(../img/BG.jpg) no-repeat center top / 100% auto;
}

.image::before{content:"";display:block;padding-top:124.96%;} /* 1402/1122，手機版讓索取區自然接在圖下 */

/* 標題 */
.title{
  position:absolute;
  top:1.6%;left:50%;
  width:64%;
  margin:0;
  transform:translateX(-50%);
  animation:titleIn .9s cubic-bezier(.2,.9,.3,1.2) both;
}
.title img{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 18px rgba(5,10,50,.55));}
@keyframes titleIn{
  from{opacity:0;transform:translate(-50%,-14px) scale(.94);}
  to{opacity:1;transform:translate(-50%,0) scale(1);}
}

/* 底部面板內容（對齊 BG 面板左側空白區） */
.cta{
  position:absolute;
  left:5.5%;top:71.5%;
  width:52%;height:17%;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:5%;
}
.cta_txt{
  margin:0;
  font-size:20px;line-height:1.6;font-weight:700;letter-spacing:.04em;
  text-shadow:0 2px 6px rgba(0,0,40,.6);
}

/* 按鈕：沿用標題貼紙風格（黃底、深藍粗描邊、硬陰影） */
.Link-book{
  display:inline-block;text-decoration:none;
  padding:.45em 1.6em;
  font-size:26px;font-weight:900;letter-spacing:.3em;text-indent:.3em;
  color:var(--navy);
  background:var(--yellow);
  border:4px solid var(--navy);
  border-radius:999px;
  box-shadow:0 0 0 3px var(--white), 0 7px 0 3px var(--navy);
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.Link-book:hover{background:var(--yellow-hi);color:var(--navy);transform:translateY(-3px);box-shadow:0 0 0 3px var(--white),0 10px 0 3px var(--navy);}
.Link-book:active{transform:translateY(4px);box-shadow:0 0 0 3px var(--white),0 3px 0 3px var(--navy);}
.Link-book:focus-visible{outline:3px solid var(--yellow);outline-offset:8px;}

/* 平板：比例縮放 */
@media (max-width:889px){
  .top_h2{font-size:3vw;letter-spacing:1px;}
  .cta_txt{font-size:2.25vw;}
  .Link-book{font-size:2.9vw;border-width:3px;}
}

/* 手機：面板空間太小，索取區改放在圖片下方 */
@media (max-width:600px){
  .top_h2{padding-left:12px;}
  .top_img{padding-left:12px;}
  .image{background:var(--space);}
  .image::before{padding-top:86.5%;background:url(../img/BG.jpg) no-repeat center top / 100% auto;}   /* 只顯示 BG 上半部（到面板上緣），面板內容改由下方 .cta 呈現 */
  .title{width:80%;top:1.8%;}
  .cta{
    position:static;width:auto;height:auto;
    align-items:center;text-align:center;gap:18px;
    padding:24px 16px 30px;
    margin:0 12px 24px;
    background:linear-gradient(160deg,#232c86,#141a5c 60%,#2a1f78);
    border:2px solid rgba(255,255,255,.85);
    border-radius:18px;
    box-shadow:0 0 18px rgba(140,160,255,.35);
  }
  .cta_txt{font-size:16px;}
  .Link-book{font-size:20px;}
}

@media (max-width:430px){
  .top_h2{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .title{animation:none;}
  .Link-book{transition:none;}
}