@import url("font-awesome.css");
* {
  margin: 0;
  padding: 0;
}

*, *:before, *:after {
  box-sizing: border-box;
}



.togglebox {

  margin: auto;
margin-top: 10px;
  transform: translateZ(0);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

label {
position: relative;
  display: block;
        height: auto !important;
        min-height: 70px;
  line-height: 60px;
  padding: 0 20px;
border: 1px solid #8cad52;
  border: 2px solid #cea43f;
  cursor: pointer;
  background-color: #FFF;
  color: #4A3A17;
  font-size: 22px;
  font-weight: 600;
  border-radius: 15px;

}

label[for*='1'] {
  border: 2;
}

label:after {
  content: '\f078';
  position: absolute;
  top: 50%;
  right: 20px;
  font-family: fontawesome;
  transform: translateY(-50%) rotate(90deg);
  transition: .3s transform;
  line-height: 1;
}


/* 箭頭：checked 時轉回 0deg，保持垂直置中 */
.togglebox input[type="checkbox"]:checked + label:after {
  transform: translateY(-50%) rotate(0deg);
}


.togglebox p {
  margin: 15px 0;
  padding: 0 20px;
  font-size: 20px;
  line-height: 1.7;
}

/* 上面一排按鈕 */

   .anchor-nav {
    position: ;
    top: 0;
    z-index: 100;
  
    padding: 14px 20px;

  }

  .anchor-nav-inner {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
  }

  .anchor-btn {
    display: inline-block;
    padding: 8px 20px;
    border: 1.5px solid #8ec63f;
    border-radius: 100px;
    background: #fff;
    color: #8ec63f;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
  }

  .anchor-btn:hover {
    background: #f0fae0;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(142,198,63,0.2);
  }

  .anchor-btn.active {
    background: #8ec63f;
    color: #fff;
    border-color: #8ec63f;
    box-shadow: 0 4px 14px rgba(142,198,63,0.35);
  }

/* ─── RWD ─── */
  @media (max-width: 600px) {
    .anchor-btn {
      font-size: 13px;
      padding: 7px 14px;
    }
    .anchor-nav {
      padding: 12px 14px;
    }
    .anchor-nav-inner {
      gap: 8px;
    }
    .section {
      padding: 48px 18px;
    }
    .section h2 {
      font-size: 20px;
    }
  }

  @media (max-width: 400px) {
    .anchor-btn {
      font-size: 12px;
      padding: 6px 12px;
    }
  }


/* 上面一排按鈕 */

   #logindiv{ position:fixed; margin-top: -5% !important}
   .login_modal_content{ max-height: 700px; overflow-y: auto}
@import url("css/font-awesome.css");
* {
  margin: 0;
  padding: 0;
}

*, *:before, *:after {
  box-sizing: border-box;
}



.togglebox {

  margin: auto;
margin-top: 10px;
  transform: translateZ(0);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

label {
position: relative;
  display: block;
  height: 60px;
  line-height: 60px;
  padding: 0 20px;
border: 1px solid #8cad52;
  border: 2px solid #cea43f;
  cursor: pointer;
  background-color: #FFF;
  color: #4A3A17;
  font-size: 22px;
  font-weight: 600;
  border-radius: 15px;
}

label[for*='1'] {
  border: 2;
}

label:after {
  content: '\f078';
  position: absolute;
  top: 50% !important;
  right: 20px;
  font-family: fontawesome;
  transform: translateY(-50%) rotate(90deg);
  transition: .3s transform;
  line-height: 1;
}


.togglebox p {
  margin: 15px 0;
  padding: 0 20px;
  font-size: 20px;
  line-height: 1.7;
}

/* 1. 基礎容器設定：只針對 .togglebox 下的 section */
.togglebox section {
  display: grid;
  grid-template-rows: 0fr; /* 收起 */
  transition: grid-template-rows 0.3s ease-out;
  overflow: hidden;
  height: auto !important; 
}

/* 2. 修正：讓內層容器可以縮小 */
.togglebox section > .inner-box, 
.togglebox section > p {
  min-height: 0;
}

/* 3. 點擊後展開 */
.togglebox input[type="checkbox"]:checked + label + section {
  grid-template-rows: 1fr; /* 展開 */
  margin-top: 10px;
  margin-bottom: 20px;
}

/* 4. 修正 Label 樣式 */
.togglebox label {
  height: auto !important;
  min-height: 60px;
  display: flex !important;
  align-items: center;
  padding: 10px 20px !important; /* 增加內距，防止文字貼邊 */
  line-height: 1.4 !important;
    margin-bottom: 15px;
padding-right: 30px !important;
}

/* 確保 section 的直接子元素都能縮到 0 */
.togglebox section > div, 
.togglebox section > p,
.togglebox section > .inner-box {
  min-height: 0;
}

.togglebox section {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out;
  overflow: hidden;
}




.activity-container {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px; 
    margin-top: 20px;
    margin-bottom: 20px;
}

/* 欄位容器：讓標題和內容方塊垂直排列 */
.activity-column {
    display: flex;
    flex-direction: column;
    gap: 10px; /* 標題和內容方塊的間距 */
}

/* 通用方塊樣式：圓角、邊框、置中 */
.activity-box {
    border: 3px solid #8ec63f; /* 圖片中的綠色邊框 */
    border-radius: 15px; /* 圓角設定 */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px;
    width: 100%;
}

/* 標題方塊特定樣式：高度較矮 */
.header-box {
    height: 60px;
}

.header-box h2 {
    color: #8ec63f; /* 綠色文字 */
    font-size: 2.4rem;
    font-weight: bold;
}

/* 內容方塊特定樣式：高度較高 */
.content-box {
    height: 130px; /* 固定高度以保持整齊，可依需求調整 */
}

/* 內容文字樣式 */
.content-box p {
    color: #8ec63f; 
    font-size: 20px;
    line-height: 28px;
  font-weight: bold;
}
.content-box p b{
 font-size: 2.4rem;
    font-weight: 700;
    top: 4px;
    position: relative;
}

/* 列表樣式（用於活動地點） */
.content-box ul {
    list-style: none; /* 清除預設項目符號 */
    text-align: left; /* 列表靠左對齊 */
}

.content-box ul li {
    color: #8ec63f;
    font-size: 1.8rem;
    line-height: 1.8;
  font-weight: bold;
}
.content-box ul li b{
font-size: 2.4rem;
    font-weight: 700;
    top: 4px;
    position: relative;
}
/* 活動對象方塊文字縮小（因字數較多） */
.target-box p {
    font-size: 1.8rem;
  font-weight: bold;
}
.target-box p b{
  font-size: 2.4rem;
    font-weight: 700;
    top: 4px;
    position: relative;
}

/* ======= 響應式設計 (RWD) ======= */

/* 當螢幕寬度小於 768px (例如平板或手機) */
@media (max-width: 768px) {
    .activity-container {
        /* 改為單欄排列 */
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .activity-column {
        gap: 5px; /* 手機版標題和內容靠更近 */
    }

    /* 手機版方塊高度改為自動，避免文字溢出 */
    .content-box {
        height: auto;
        min-height: 120px; /* 設定最小高度 */
        padding: 15px;
    }

    .header-box {
        height: 50px;
    }

    .header-box h2 {
        font-size: 2.3rem;
    }
}

/* 當螢幕寬度小於 480px (小型手機) */
@media (max-width: 480px) {
    .activity-box {
        padding: 10px;
    }

    .header-box h2 {
        font-size: 1.5rem;
    }

    .content-box p,
    .content-box ul li {
        font-size: 1.8rem;
    }
}



/* 活動辦法 */
:root {
  --o:    #f47c20;
  --o-dk: #d46010;
  --o-lt: #fff4ea;
  --o-bd: #fdd5b0;
  --grn:  #4a8c3f;
  --grn-lt: #e8f5e2;
  --grn-bd: #8dc63f;
  --dk:   #3d2200;
  --tx:   #4a3000;
  --bg:   #ffffff;
  --r:    10px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Noto Sans TC',sans-serif;color:var(--dk);background:#fff}

/* ─── WRAPPER ─── */
.clinic-block{
  max-width:1240px;
  margin:0 auto;
  padding:12px 3px 40px;
}
.headertt{
    width: 130px;
}
/* ─── HEADER ROW ─── */
.clinic-header{
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:28px;
}
.clinic-badge{
  flex-shrink:0;
  width:90px;height:90px;
  border:4px solid var(--o);
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;
  background:#fff;
  box-shadow:3px 3px 0 var(--o);
}
.clinic-badge-txt{
  font-size:22px;font-weight:900;
  color:var(--o);line-height:1.15;text-align:center;
  letter-spacing:.05em;
}
.clinic-desc{
  font-size:22px;font-weight:700;
  color:var(--dk);line-height:1.6;
}

/* ─── SECTION BANNER ─── */
.sec-banner{
  position:relative;
  background:var(--o);
  padding:10px 22px 10px 18px;
  margin-bottom:24px;
  display:inline-flex;
  align-items:center;
  min-width:160px;
  width:100%;
}
.sec-banner::after{
    content: '';
    position: absolute;
    right: -17px;
    top: 0;
    border-top: 30px solid transparent;
    border-bottom: 1px solid transparent;
    border-left: 18px solid var(--o);
    height: 100%;
}
/* bottom banner variant */
.sec-banner.reward-banner{
  margin-top:8px;
  margin-bottom:20px;
}
.sec-banner-txt{
  font-size:22px;font-weight:900;
  color:#fff;letter-spacing:.04em;
  line-height:1;
}
.sec-banner-sub{
  font-size:15px;font-weight:500;
  color:rgba(255,255,255,.92);
  margin-left:6px;
}



.sec-banner2{
  position:relative;
  background:#7fbe26;
  padding:10px 22px 10px 18px;
  margin-bottom:24px;
  display:inline-flex;
  align-items:center;
  min-width:160px;
  width:100%;
}
.sec-banner2::after{
    content: '';
    position: absolute;
    right: -17px;
    top: 0;
    border-top: 30px solid transparent;
    border-bottom: 1px solid transparent;
    border-left: 18px solid #7fbe26;
    height: 100%;
}



/* ─── STEPS GRID ─── */
.steps-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px 32px;
  margin-bottom:16px;
}
.step-item{
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.step-badge{
  flex-shrink:0;
  width:54px;height:54px;
  border-radius:50%;
  background:var(--o);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(244,124,32,.35);
  line-height:1;
  padding-top:2px;
}
.step-label{
  font-size:9px;font-weight:700;color:rgba(255,255,255,.85);
  letter-spacing:.12em;text-transform:uppercase;
}
.step-num{
  font-size:26px;font-weight:900;color:#fff;line-height:1;
}
.step-body{}
.step-title{
  font-size:24px;font-weight:800;
  color:var(--o-dk);margin-bottom:5px;
  line-height:1.3;
}
.step-desc{
  font-size:16px;color:var(--tx);
  line-height:1.7;
}
.step-desc a{color:var(--o-dk);text-decoration:underline}

/* ─── NOTE BAR ─── */
.note-bar{
  background:#6b4c1e;
  color:#fff;
  border-radius:6px;
  padding:10px 16px;
  font-size:14px;line-height:1.6;
  margin-bottom:20px;
  display:flex;align-items:flex-start;gap:6px;
}
.note-bar-label{
  font-weight:800;color:#ffd54f;
  white-space:nowrap;flex-shrink:0;
}

/* ─── STEP 5 (full width) ─── */
.step-item-full{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-bottom:28px;
}

/* ─── REWARD COUPON ─── */
.coupon{
display: inline-flex;
    align-items: center;
    border-radius: 12px;
    overflow: hidden;
    max-width: 300px;
    width: 300px;
}
.coupon-left{
  padding:18px 20px;
  min-width:150px;
}
.coupon-cat{
  font-size:12px;color:#666;margin-bottom:4px;font-weight:500;
}
.coupon-val{
  font-size:38px;font-weight:900;color:var(--dk);line-height:1;
}
.coupon-val sup{font-size:20px;vertical-align:top;margin-top:8px;display:inline-block}
.coupon-divider{
  display:flex;flex-direction:column;align-items:center;
  gap:4px;padding:0 2px;
  position:relative;
}
.coupon-divider::before{
  content:'';width:2px;height:100%;
  border-left:3px dashed var(--grn-bd);
}
.coupon-right{
  padding:16px 20px;
  display:flex;align-items:center;gap:8px;
}
.coupon-ico{font-size:36px}

/* ─── RWD ─── */
@media(max-width:600px){
  .clinic-header{gap:14px}
  .clinic-badge{width:72px;height:72px;border-radius:10px}
  .clinic-badge-txt{font-size:17px}
  .clinic-desc{font-size:18px}
  .sec-banner-txt{font-size:18px}
  .steps-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
  .step-title{font-size:15px}
  .coupon{max-width:100%}
  .coupon-val{font-size:30px}
  .coupon-ico{font-size:28px}
}
@media(max-width:380px){
  .clinic-desc{font-size:13px}
  .sec-banner-txt{font-size:16px}
  .sec-banner::after{border-top-width:20px;border-bottom-width:20px}
}


.opp{
    top: -21px;
    position: relative;
 width: 150px;
}
.content-box li a {
        font-size: 18px;
    }
@media(max-width:480px){
.clinic-desc {
        font-size: 18px;
        padding-left: 15px;
        padding-right: 15px;
    }
.clinic-header {
    margin-bottom: 8px;
}
.step-badge {
    width: 22px;
    height: 22px;
        z-index: 3;
}

.step-num {
    font-size: 16px;

    line-height: .1;
}
    .step-title {
        font-size: 17px;
        margin-bottom: 2px;
    }
.activity-container {
    display: block;
}
.activity-column {
    flex-direction: row;
}
    .header-box {
        height: 80px;
        width: 70px;
        margin-bottom: 10px;
    }
.content-box {
        height: 80px;
        min-height: 80px;
    }

.info2 {
    width: 100%;
    height: 60px;
    text-align: center;
    margin-top: 20px;
    background-color: #F0EFDF;
    line-height: 30px;
    font-size: 1em;
    margin-bottom: 30px;
}
.opp{
    top: -5px;
    position: relative;
    width: 150px;
}
.beamin_slider .swiper-button-next, .beamin_slider .swiper-button-prev
 {

    top: 153px;

}

.step-line
 {
    border-left: 2px solid #d5ccccf7;
    height: 70px;
    position: absolute;
    margin-top: 25px;
    margin-left: 10px;

}

}