/* =========================
   Reset & Base
========================= */
*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: Arial, "Noto Sans TC", sans-serif;
  color:#1f2937;
	background:url(images/bg.png) no-repeat;
	background-attachment: fixed;
	background-size:100% 100%;

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

.container{
  width:92%;
  max-width:1100px;
  margin:0 auto;
}

header{
	clear:both;
	width:100%;
	margin:0 auto;
	background:#727171;
	padding:5px 0;
	}	
	
header img{	
	padding-left:15px;
	}


@media screen and ( max-width: 768px ){
		#WRAPPER{ 
		min-width:100%;
	}
		
		header img{
		width:70%;
		padding-left:5px;
		}	
	
	}


/* =========================
   Top bar
========================= */
.topbar{
  background:#e53935;
  color:#fff;
      font-size:1rem;
  font-weight:500;
}
.topbar .container{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:8px 0;
}
.topbar .badge{
  background:rgba(255,255,255,.15);
  padding:3px 10px;
  border-radius:999px;
  
      color:#FFF;
      font-weight:900;
      font-size:1rem;
      padding:3px 5px;
      transform: translateY(-1px);
      
}

/* =========================
   Hero
========================= */
.hero{
  padding:14px 0 18px ;
  position:relative;
  background:none;
	width:1100px;
}
.hero__moon{
  position:absolute;
  right:0;
  top:86px;
  width:450px;
  pointer-events:none;
}
.hero__inner{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:22px;
  align-items:center;
}
.hero__title{
  margin:0 0 8px;
  color:#fff;
  font-weight:900;
  font-size:58px;
  line-height:1.06;
  text-shadow:0 8px 18px rgba(0,0,0,.25);
}
.hero__sub{
  margin:0 0 12px;
  color:rgba(255,255,255,.92);
}
.hero__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  color:#fff;
  background:rgba(0,0,0,.15);
  border:1px solid rgba(255,255,255,.25);
  padding:6px 10px;
  border-radius:10px;
  font-size:.9rem;
}

	
.BANNER_m{
	display:none;
	}
	
@media screen and ( max-width: 768px ){	

.hero, .hero__moon{
	display:none;
}
		
		.BANNER_m{
		display:block;
		width:100%;
	}
	
		.BANNER_m img{
			width:100%;
			}

}
/* =========================
   Promo box (hero right)
========================= */
.promo{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
  border-radius:16px;
  padding:16px 20px;
  color:#fff;
  margin-top:275px;
}
.promo__title{ margin:0 0 8px; font-weight:900; font-size:1.35rem; }
.promo__text{
  margin:0 0 12px;
  font-size:1.15rem;
  line-height:1.5;
  color:rgba(255,255,255,.95);
}

/* =========================
   Buttons
========================= */
   .btn{
      width: 80%;
      border:none;
      background:#e93a31;
      color:#fff;
      font-weight:900;
      font-size:1.2rem;
      padding: 5px 16px;
      border-radius: 999px;
      cursor:pointer;
      box-shadow: 0 10px 0 rgba(0,0,0,0.12);
      transition: transform 0.06s ease, box-shadow 0.06s ease;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
    }
    .btn:hover{
      transform: translateY(3px);
      box-shadow: 0 7px 0 rgba(0,0,0,0.12);
    }
    
.btn--yellow{ background:#ffc107; color:#2b2b2b; }
.btn--red{ background:#e53935; color:#fff; }
.btn--ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,.45);
  color:#fff;
}
.btn--full{ width:100%; }

/* =========================
   Section / Cards
========================= */
.section{ padding:22px 0 ; }

.section-block {
	display: none;
	margin:0 auto;

}
.section-block.active {
	display: block;
}


.card{

  border-radius:16px;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  padding:20px;
}

.box{
	padding:10px 20px;
  background:#fff;
  border: 1px solid #eef0f6;
}

.card--soft{
  background:#f2f6ff;
  border:1px solid #dbe6ff;
}
.card__title{
  margin:0 0 12px;
  font-weight:900;
  font-size:20px;
}
.muted{ color:#6b7280; }

/* =========================
   Nav pills
========================= */
.top-nav-scroll{
  position: sticky;
  top: 0;
  z-index: 1000;

  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.75));
  border-bottom:1px solid #e5e7eb;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);

  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.top-nav-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 25px;
	padding: 12px 16px;
	min-width: max-content;

}

/* 單一導覽 tab */
.nav-item {
	position: relative;
	flex-shrink: 0;
	font-size: 1.25rem;
	font-weight: 600;
	color: #444;
	background: #f5f6ff;
	border: 1px solid #d5d9ff;
	border-radius: 999px;
	padding: 10px 16px;
	line-height: 1.2;
	text-align: center;
	min-width: 150px;
	user-select: none;
	cursor: pointer;
	transition: all .18s ease;
	box-shadow: 0 4px 10px rgba(0,0,0,.04);

}
.nav-item .sub {
	display: block;
	margin-top: 5px;
	font-size: .85rem;
	font-weight: 500;
	line-height: 1.2;
	color: #6b6f85;
}

/* hover 效果 */
.nav-item:hover {
	background: #4a6cff;
	border-color: #4a6cff;
	color: #fff;
	box-shadow: 0 10px 24px rgba(74,108,255,.3);
}
.nav-item:hover .sub {
	color: #fff;
}

/* active tab */
.nav-item.active {
	background: #4a6cff;
	border-color: #4a6cff;
	color: #fff;
	box-shadow: 0 10px 24px rgba(74,108,255,.3);
}
.nav-item.active .sub {
	color: #fff;
}
/* =========================
   Layout blocks used in 3 pages
========================= */
.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
}

.feature{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  align-items:stretch;
}
.feature__media{
  display:flex;
  justify-content:center;
}

/* 整個區塊 */
.media-card{
  width: 500px;
  max-width: 92vw;
}

/* 主圖框 */
.media-main{
  width:90%;
  margin:10px auto;
  display:block;
  border-radius: 16px;
  background:#fff;
  border: 4px solid #fff;
  box-shadow: 0 12px 24px rgba(0,0,0,0.10);
}

/* 左上角 badge */
.media-badge{
  position:absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: #facc15;
  color:#bd2a1b;
  font-weight:900;
  font-size: 1rem;
  padding: 6px 12px;
  box-shadow: 0 6px 0 rgba(0,0,0,0.10);
}

/* 讓 badge 能定位到主圖上 */
.media-card{
  position:relative;
}

/* 下方縮圖列 */
.media-thumbs{
  display:flex;
  justify-content:center;
  gap: 14px;
  margin-top: 25px;
}

/* 縮圖按鈕 */
.thumb{
  width: 70px;
  height: 70px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background:#fff;
  overflow:hidden;
  cursor:pointer;
  box-shadow: 0 10px 18px rgba(0,0,0,0.10);
  transform: translateY(0);
  transition: transform .12s ease, box-shadow .12s ease;
}

.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* hover 效果 */
.thumb:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 22px rgba(0,0,0,0.14);
}

/* 被選到的縮圖框線 */
.thumb.is-active{
  outline: 3px solid #FFF;
  outline-offset: 2px;
}


    /* 卡片外框 */
    .feature-card{
      background:#fff7dd;
      border: 4px solid #ffd36a;
      border-radius: 20px;
      position:relative;
      padding: 18px 25px 25px 25px;
      box-shadow: 0 10px 0 rgba(0,0,0,0.06);
    }

    /* 右上角小裝飾（像貼紙/圖釘感） */
    .pin{
      position:absolute;
      top:-14px;
      left:50%;
      transform:translateX(-50%) rotate(-8deg);
      width:34px;
      height:34px;
      border-radius:10px;
      background:#ff5b5b;
      box-shadow: 0 6px 0 rgba(0,0,0,0.12);
    }
    .pin:before{
      content:"";
      position:absolute;
      inset:10px;
      border-radius:6px;
      background:rgba(255,255,255,0.35);
    }

    /* 標題 */
    .title{
      text-align:center;
      font-weight:900;
      font-size: 1.7rem;
      color:#1f2a44;
      letter-spacing:0.5px;
      margin: 5px 0 10px 0;
    }

    /* 虛線分隔 */
    .dash{
      border-top: 3px dashed #ffd36a;
      margin: 5px 0 18px;
    }

    /* 特色清單 */
    .rows{
      display:flex;
      flex-direction:column;
      gap:16px;
      margin-bottom: 10px;
    }

    .row{
      display:flex;
      gap:12px;
      align-items:flex-start;
    }
    .icon{
      flex: 0 0 28px;
      width:28px;
      height:28px;
      border-radius:8px;
      display:flex;
      align-items:center;
      justify-content:center;
      margin-top:2px;
    }
    .icon.blue{ background:#e8f0ff; }
    .icon.green{ background:#eaf8ef; }
    .icon.purple{ background:#f1eaff; }

    .row h3{
      margin:0 0 6px;
      font-size:1.2rem;
      font-weight:900;
    }
    
.blue1{
	color:#374fb2;}
.green1{
	color:#1b6736;}
.purple1{
	color:#6724a9;}
	.red1{
	color:#e0362f;}
	
    .row p{
      margin:0;
      font-size:1rem;
      line-height:1.6;
      color:#333;
    }

    /* 價格區 */
    .price-wrap{
      text-align:center;
    }
    .old-price{
      font-size:.9rem;
      color:#8b8b8b;
      margin-bottom: 10px;
    }
    .old-price s{ color:#8b8b8b; }

    .now-price{
      display:flex;
      align-items:flex-end;
      justify-content:center;
      gap:10px;
      margin: 0 0 14px;
    }
    .badge{
      background:#fee2e2;
      color:#de4137;
      font-weight:900;
      font-size:.85rem;
      padding:3px 5px;
      transform: translateY(-8px);
      white-space:nowrap;
      border-radius:0;
    }
    .money{
      font-weight:1000;
      font-size:2.3rem;
      color:#e0302a;
      letter-spacing:0.5px;
    }

    /* CTA 按鈕 */
    .cta{
      display:flex;
      justify-content:center;
    }
 

    /* 小購物車 icon */
    .cart{
      width:18px;
      height:18px;
    }

/* Page 2 list cards */
.book-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}
.book{
  display:grid;
  grid-template-columns: 92px 1fr;
  gap:12px;
  padding:14px;
  border-radius:16px;
  border:1px solid #e5e7eb;
  background:#fff;
}
.book__cover{
  width:92px; height:92px;
  border-radius:12px;
  background:#f3f4f6;
  overflow:hidden;
}
.book__cover img{ width:100%; height:100%; object-fit:cover; }
.book__title{
  margin:0 0 6px;
  font-weight:900;
}
.book__meta{ margin:0; color:#6b7280; font-size:13px; line-height:1.6; }
.book__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:10px;
}
.book__price{ color:#e53935; font-weight:900; }
.book__cta{
  padding:10px 12px;
  border-radius:12px;
  border:0;
  cursor:pointer;
  background:#2f59ff;
  color:#fff;
  font-weight:900;
}

/* Page 3 product detail */
.detail{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  align-items:start;
}
.detail__media{
  background:#fff;
  border-radius:16px;
  padding:16px;
  border:1px solid #e5e7eb;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
}
.detail__panel{
  background:#fff;
  border-radius:16px;
  padding:16px;
  border:1px solid #e5e7eb;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
}
.detail__price{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
  padding:10px 0 12px;
  border-bottom:1px solid #eef0f4;
  margin-bottom:10px;
}
.detail__price .big{ font-size:30px; font-weight:900; color:#e53935; }
.kv{
  display:grid;
  grid-template-columns: 88px 1fr;
  gap:8px 10px;
  font-size:14px;
  line-height:1.6;
  margin:10px 0;
}
.kv div{ padding:2px 0; }
.kv .k{ color:#6b7280; font-weight:800; }
.list{
  margin:10px 0 0;
  padding-left:18px;
  line-height:1.7;
  font-size:14px;
}

/* =========================
   Simple "search box / quick links" block (hero center)
========================= */
.quickbox{
  overflow:hidden;
}
.quickbox__row{
  display:flex;
  gap:10px;
  padding:12px;
  border-bottom:1px solid #eef0f4;
}
.quickbox__row:last-child{ border-bottom:0; }
.quickbox__label{ width:160px; font-weight:900; }
.quickbox__content{ flex:1; }
.quickbox__link{ color:#2f59ff; font-weight:900; text-decoration:underline; }

/* =========================
   RWD
========================= */
@media (max-width: 900px){
  .hero__inner{ grid-template-columns: 1fr; }
  .hero__title{ font-size:46px; }
  .grid-2{ grid-template-columns: 1fr; }
  .feature{ grid-template-columns: 1fr; }
  .book-grid{ grid-template-columns: 1fr; }
  .detail{ grid-template-columns: 1fr; }
  .quickbox__row{ flex-direction:column; }
  .quickbox__label{ width:auto; }
}
@media (max-width: 520px){
  .hero__title{ font-size:38px; }
  .btn{ width:100%; }
}

/* footer */
footer {
	clear: both;
	width: 100%;
	margin: 0 auto;
	background: #4B3100;
	color: #FFF;
	padding: 8px 0;
	text-align: center;
	font-size: 0.85rem;
	line-height: 1.5;
}

.anchor{
  scroll-margin-top: 30px; /* header 高度 */
}
/* 專欄文章：整體排版 */
#area-teach .blue1{
  margin: 8px 0 12px;
  font-size: 1.5rem;
  font-weight: 900;
  color:#1f2a44;
  letter-spacing: .2px;
}

#area-teach .teach-lead{
  margin: 0 0 16px;
  color:#2d3852;
  font-size: 1.05rem;
  line-height: 1.9;
}

/* 目錄 */
#area-teach .teach-toc{
  margin: 14px 0 20px;
  padding: 14px 14px;
  background:#f5f6ff;
  border: 1px solid #dfe4ff;
  border-radius: 14px;
}

#area-teach .teach-toc__title{
  font-weight: 900;
  font-size: 1rem;
  color:#24324f;
  display:flex;
  align-items:center;
  gap:10px;
  margin: 0 0 10px;
}

#area-teach .teach-toc__title:before{
  content:"";
  width:10px;
  height:10px;
  border-radius: 3px;
  background:#2f59ff;
  display:inline-block;
}

#area-teach .teach-toc__list{
  margin: 0;
  padding-left: 18px;
}

#area-teach .teach-toc__list li{
  margin: 6px 0;
}

#area-teach .teach-toc a{
  color:#2f59ff;
  font-weight: 700;
  text-decoration: none;
}
#area-teach .teach-toc a:hover{
  text-decoration: underline;
}

/* 小節 */
#area-teach .teach-sec{
  margin-top: 22px;
}

#area-teach .teach-sec__title{
  margin: 0 0 10px;
  font-size: 1.25rem;
  font-weight: 900;
  color:#1f2a44;
  letter-spacing: .2px;
  padding-left: 12px;
  border-left: 5px solid #ffb000;
}

#area-teach .teach-sec p{
  margin: 10px 0;
  color:#2d3852;
  line-height: 1.9;
}

/* 圖片與圖說 */
#area-teach .teach-fig{
height:auto;
overflow:hidden;

  margin: 14px auto;
  background:#fff7f2;
  border: 1px solid #ffe1d5;
  border-radius: 14px;
  padding: 12px;
  text-align:center;
}

#area-teach .teach-fig img{
  width:60%;
  display:block;
  border-radius: 12px;
  background:#fff;
  border: 1px solid #fff;
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
  margin: 0 auto;
}
#area-teach .teach-fig img.half{
  width:45%;
  float:left;
  margin:10px 20px ;
}

#area-teach .teach-fig figcaption{
  margin: 10px 10px 0 10px;
  font-size: .95rem;
  color:#6b7280;
  font-weight: 700;
}

/* 作者行 */
#area-teach .teach-byline{
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid #eef0f6;
  color:#6b7280;
  font-size: .95rem;
  font-weight: 700;
}

/* 手機字級微調 */
@media (max-width: 560px){
  #area-teach .blue1{ font-size: 1.25rem; }
  #area-teach .teach-sec__title{ font-size: 1.15rem; }
}

/* ===== Phonics Time 套書區（ptpkg- 前綴）===== */
.ptpkg-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 16px 28px;
}

/* Top panel */
.ptpkg-hero{

      background:#fff7dd;
      border: 4px solid #ffd36a;
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
  text-align:center;
  padding: 18px 16px 0;
}

.ptpkg-hero__title{
  margin: 4px 0 4px;
  font-size: 2.15rem;
  font-weight: 1000;
  letter-spacing:.4px;
}

.ptpkg-hero__sub{
  font-size: 1.3rem;
  font-weight: 900;
  color:#27324a;
  margin-bottom: 10px;
}

.ptpkg-hero__desc{
  max-width: 900px;
  margin: 0 auto 16px;
  color:#4b5568;
  font-size: 1.05rem;
  line-height: 1.9;
}

/* blue bar */
.ptpkg-hero__bar{
  background:#fff7f2;
  padding: 12px 10px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 14px;
}

.ptpkg-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  color:#333;
  font-weight: 900;
  font-size: 1.05rem;
  padding: 8px 10px;
  border-radius: 999px;
  text-decoration:none;
  user-select:none;
  transition: transform .12s ease, background .12s ease;
}

.ptpkg-ico{
  display:inline-flex;
  width: 20px;
  height: 20px;
  align-items:center;
  justify-content:center;
  border-radius: 6px;
  background: rgba(255,255,255,.16);
}

/* Grid */
.ptpkg-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* Card base */
.ptpkg-card{
  background:#fff;
  border-radius: 18px;
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
  display:flex;
  overflow:hidden;
  border: 1px solid #eef0f6;
  min-height: 155px;
}

/* 左側彩色條（依卡片類型） */
.ptpkg-card--red{   border-left: 7px solid #ff4b4b; }
.ptpkg-card--blue{  border-left: 7px solid #2f59ff; }
.ptpkg-card--green{ border-left: 7px solid #22c55e; }
.ptpkg-card--purple{border-left: 7px solid #8b5cf6; }

/* Book image */
.ptpkg-card__media{
  width: 150px;
  flex: 0 0 150px;
  padding: 14px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: #fafbff;
}

.ptpkg-card__media img{
  width: 100%;
  max-width: 120px;
  height: auto;
  display:block;
  border-radius: 10px;
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
}

/* Content */
.ptpkg-card__body{
  flex: 1;
  padding: 14px 14px 14px 8px;
}

.ptpkg-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.ptpkg-card__title{
  margin: 0;
  font-size: 20px;
  font-weight: 1000;
  color:#1f2a44;
}

.ptpkg-card__price{
  font-weight: 1000;
  color:#e0362f;
  font-size: 16px;
  white-space:nowrap;
  margin-top: 2px;
}

/* check list */
.ptpkg-list{
  margin: 0;
  padding: 0;
  list-style:none;
  color:#3b4458;
  font-size: 14px;
  line-height: 1.8;
}

.ptpkg-list li{
  position:relative;
  padding-left: 22px;
  margin: 3px 0;
}

.ptpkg-list li:before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  font-weight: 1000;
  color:#2f59ff;
}
/* 系列書籍專用微調 */
#area-series .ptpkg-grid--series{
  margin-top: 16px;
}

#area-series .ptpkg-card{
  background:#ffffff;
}

/* 書籍區塊在 card 內縮一點，視覺更乾淨 */
#area-series .ptpkg-card__body{
  padding-right: 18px;
}

/* RWD */
@media (max-width: 820px){
  .ptpkg-grid{ grid-template-columns: 1fr; }
  .ptpkg-card__media{ width: 140px; flex-basis:140px; }
}

@media (max-width: 520px){
  .ptpkg-hero__title{ font-size: 24px; }
  .ptpkg-card{ flex-direction: row; }
  .ptpkg-card__title{ font-size: 18px; }
  .ptpkg-card__media{ width: 128px; flex-basis:128px; }
  #area-series .ptpkg-card__title{
    font-size: 17px;}
}


/* ===== 海報組商品區（ptpost- 前綴）===== */
.ptpost-wrap{
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 16px 26px;
}

/* 兩欄佈局 */
.ptpost-grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 18px;
  align-items:start;
  background:#fff;
  border: 2px solid #ffe08f;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
}

/* Left image card */
.ptpost-photo{
  background:#f3f4f6;
  border-radius: 14px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.ptpost-photo img{
  width:100%;
  display:block;
  border-radius: 12px;
}

/* Spec small card */
.ptpost-spec{
  margin-top: 12px;
  background:#fff7dc;
  border: 1px solid #ffe08f;
  border-radius: 14px;
  padding: 12px 12px;
}

.ptpost-spec__row{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 6px 2px;
}

.ptpost-dot{
  width: 26px;
  height: 26px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 8px;
  background:#fff;
  border: 1px solid #ffe08f;
  flex: 0 0 26px;
}

.ptpost-spec__label{
  font-weight: 800;
  color:#3b4458;
  font-size: 14px;
  line-height: 1.75;
}

/* Right side */
.ptpost-title{
  margin: 2px 0 8px;
  font-size: 26px;
  font-weight: 1000;
  color:#1f2a44;
  letter-spacing: .2px;
}

.ptpost-desc{
  margin: 0 0 14px;
  color:#4c556b;
  font-size: 14.5px;
  line-height: 1.9;
}

/* Buy panel */
.ptpost-buy{
  display:grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items:center;
  padding: 14px 14px;
  background:#fff3f3;
  border: 1px solid #ffd0d0;
  border-radius: 14px;
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
  margin-bottom: 14px;
}

.ptpost-buy__old{
  color:#8b8b8b;
  font-weight: 800;
  font-size: 13px;
}

.ptpost-buy__now{
  color:#e0362f;
  font-weight: 1100;
  font-size: 40px;
  line-height: 1;
  margin-top: 4px;
}

.ptpost-buy__promo{
  display:flex;
  flex-direction:column;
  gap: 6px;
  align-items:flex-start;
}

.ptpost-badge{
  background:#ff4b4b;
  color:#fff;
  font-weight: 1000;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  box-shadow: 0 6px 0 rgba(0,0,0,.08);
}

.ptpost-buy__note{
  color:#e0362f;
  font-weight: 1000;
  font-size: 13px;
}

.ptpost-btn{
width: auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  background:#e0362f;
  color:#fff;
  text-decoration:none;
  font-weight: 1000;
  white-space:nowrap;
  box-shadow: 0 10px 0 rgba(0,0,0,.12);
  transition: transform .08s ease, box-shadow .08s ease;
}

.ptpost-btn:active{
  transform: translateY(2px);
  box-shadow: 0 8px 0 rgba(0,0,0,.12);
}

.ptpost-cart{
  display:inline-flex;
  width: 22px;
  height: 22px;
  align-items:center;
  justify-content:center;
  border-radius: 8px;
  background: rgba(255,255,255,.16);
}

/* Content box */
.ptpost-box{
  background:#f6f8ff;
  border: 1px solid #dfe4ff;
  border-radius: 14px;
  overflow:hidden;
}

.ptpost-box__head{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 12px 12px;
  background:#ffffff;
  border-bottom: 1px solid #e9ecff;
}

.ptpost-ico{
  width: 28px;
  height: 28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 10px;
  background:#2f59ff;
  color:#fff;
  font-size: 14px;
}

.ptpost-box__title{
  font-weight: 1000;
  color:#24324f;
}
.ptpost-map{
  padding: 12px 12px 10px;
  display: grid;
  gap: 12px;

  max-height: 260px;   /* 你要的高度，自己調 */
  overflow-y: auto;    /* 超出時出現垂直卷軸 */
}


.ptpost-map__group{
  background:#fff;
  border: 1px solid #e9ecff;
  border-radius: 12px;
  padding: 10px 10px;
}

.ptpost-map__tag{
  color:#2f59ff;
  font-weight: 1000;
  margin-bottom: 6px;
}

.ptpost-ol{
  margin: 0;
  padding-left: 18px;
  color:#3b4458;
  font-weight: 700;
  line-height: 1.9;
  font-size: 14px;
}

/* RWD */
@media (max-width: 900px){
  .ptpost-grid{
    grid-template-columns: 1fr;
  }
  .ptpost-buy{
    grid-template-columns: 1fr;
    align-items:flex-start;
  }
  .ptpost-btn{
    width: 100%;
  }
}


/* 浮動購物車 */
#car {
	width: 145px;
	position: fixed;
	z-index: 999999;
}
#car a {
	position: fixed;
	top: 42px;
	right: 5px;

	display: inline-block;
	width: 25px;
	padding: 5px 3px;

	background: #ff4f81;
	border: 1px solid #EEE;
	border-radius: 15px;
	box-shadow: 0 5px 15px #193047;

	color: #FFF;
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
}

/* cart iframe (桌機版右上角的小購物車總覽) */
iframe {
	width: 140px;
	position: fixed;
	right: 40px;
	top: 42px;
	height: 180px;
	overflow: hidden;
	border: 0;
}

/* tab-content 裡的 iframe (如果內頁嵌東西用) */
.tab-content iframe {
	width: 100%;
	height: 600px;
	position: static;
	border: 0;
}

/* cart RWD: 手機時只留粉紅按鈕，隱藏右上iframe */
@media screen and (max-width: 768px) {
	#car {
		width: auto;
	}
	#car a {
		width: 35px;
		border-radius: 5px;
		top: 80%;
		line-height: 1.5;
	}
	iframe {
		display: none;
	}
}
.anchor{
  scroll-margin-top: 150px; /* header 高度 */
}


.muted iframe{
	width: 560px;
	position: static;
	height:315px;
}

@media screen and (max-width: 768px) {
	
.muted iframe{
	display:block;
	width: 100%;
}
}