@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap");

/* 1. 全域 reset */
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* 2. HTML 基本設定（縮放 + 滑動） */
html {
  scroll-behavior: smooth;
  /* -webkit-text-size-adjust: 100%;  // 要用再打開 */
}

/* 3. 頁面背景（你原本的設定，可移到 layout.css 也可以留這） */
body {
  background: #FFFAFA;
}

/* 4. 列表（如果你確定整站都不需要點點，就留） */
ol, ul {
  list-style: none;
}

/* 5. 表格 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 連結樣式 */
a {
  text-decoration: none;
  /*color: #0066cc;*/
}
a:hover {
  text-decoration: underline;
}

.t-center { text-align: center; }


html {	
	-webkit-text-size-adjust:none;
  font-family: "Noto Sans TC", "微軟正黑體", sans-serif;
	scroll-behavior: smooth;
}

body {
  color: #333;
	line-height: 1; 
  font-size: 1rem;
	letter-spacing: 0.05rem;
background: linear-gradient(to bottom,  rgb(217,239,252) 0%,rgb(246,251,254) 51%,rgb(255,255,255) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}

 	@media screen and ( max-width: 768px ){
		*{
			box-sizing:border-box; /* 讓 padding 與 width 解除關係 */
		}
		html,body{
			-webkit-text-size-adjust:none; /* iPhone 旋轉後 文字不要放大 */
		}
	}
	
/* --電腦版型------------------------------------- */

#WRAPPER {
	width: 100%;
	min-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;
		}	
	
	}


article{
	width:100%;
	height:auto;
	margin:0 auto;
	text-align:center;
}

.title {
	width:1000px;
	height:650px;
	margin:0 auto;
	text-align:center;
	}	
	
.moblie{

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

	article{
		width:100%;
		margin:0 auto;
		height:auto;
		}
	.title{
	display:none;
		}	
		
.moblie{

	display:block;
}
		.BANNER_m{
		display:block;
		width:100%;
	}
	
		.BANNER_m img{
			width:100%;
			}
			
}


/* 外層整條 nav 是 sticky */
.top-nav {
	background: #4c5d1f;
	box-shadow: 0 4px 20px rgba(0,0,0,.06);
	position: sticky;
	top: 0;
	z-index: 1000;
}
/* 這層用來啟用手機版橫向捲動 */
.top-nav-scroll {
	max-width: 1200px;
	margin: 0 auto;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}


/* 內層按鈕容器 */
.top-nav ol{
	margin:0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 5px;
	padding: 12px 10px;
	min-width: max-content;
}

.top-nav li{
	height:auto;
	margin:0 8px;
	padding:10px 0;
  line-height:1.3;  border-radius: 10px;
}	
.top-nav li a{
	font-weight:bold;
	font-size:1.2rem;
	color:#FFF;
}	

@media (max-width: 768px) {
	.top-nav-inner {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 12px;
		min-width: max-content;
	}

/* 這層用來啟用手機版橫向捲動 */
.top-nav-scroll {
	max-width: 100%;
}
	.nav-item {
		min-width: 180px;
		text-align: left;
		line-height: 1.4;
		font-size: 1rem;
	}

	.nav-item .sub {
		white-space: normal;
		font-size: .7rem;
		margin-top: 4px;
	}

	.top-nav-scroll::-webkit-scrollbar {
		height: 4px;
	}
	.top-nav-scroll::-webkit-scrollbar-thumb {
		background: #c6c9ff;
		border-radius: 999px;
	}
	.top-nav-scroll::-webkit-scrollbar-track {
		background: transparent;
	}
}


section{
position: relative;
	z-ndex:9;
	background: radial-gradient(#b6d2e0 2px, transparent 2px) 15px 15px,
            radial-gradient(#cce4f0 4px, transparent 4px) 0 0,
            #d3edfa ;
background-size: 36px 36px, 36px 36px;

	padding:20px;
	}
	
section div{
	max-width: 1100px;
	height:auto;
	overflow:hidden;
	margin: 0 auto;
	}
	
h1{
    font-size:2rem;
    font-weight:900;
	text-shadow: -1px -1px 0 #FFF,
              1px -1px 0 #FFF,
              -1px 1px 0 #FFF,
              1px 1px 0 #FFF;
     margin:0 auto 10px auto;
     color:#b8364e;
}
	
.reading-grid {
	margin:0 auto;
	text-align:center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
}

.reading-card {
	width: 240px;
	height:370px;
	overflow:hidden;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 6px 16px rgba(0,0,0,0.06);
	padding: 10px 10px 10px 10px;
	box-sizing: border-box;
	text-align: center;
	flex-direction: column;
	float:left;
	margin:15px 12px;
}
.reading-card:hover {
	box-shadow: 0 12px 28px rgba(0,0,0,0.08);
	transform: translateY(-4px);
}

.reading-cover {
	width: 100%;
	height: 185px;
	border: 1px solid #ccc;
	background: #f5f5f7;
	border-radius: 8px;
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .8rem;
	color: #999;
	font-weight: 500;
}

.reading-cover a img {
max-width:100%;
	height: 182px;
border-radius:6px;
}

.reading-title {
	font-size: 1rem;
	font-weight: 600;
	color: #222;
	line-height: 1.4;
	margin-bottom: 12px;
	
  align-content: center;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
}

.reading-priceblock {
	font-size: 1rem;
	line-height: 1.5;
	margin-bottom: 12px;
}
.reading-priceblock .sale {
	color: #d9534f;
	font-weight: 700;
}
.reading-priceblock small {
	font-size: .95rem;
	color: #999;
	font-weight: 400;
	margin-left: .25em;
}
.reading-priceblock .list {
	color: #555;
	font-size: .85rem;
}

.reading-cartbtn {
	appearance: none;
	border: none;
	border-radius: 8px;
	background: #e53935;
	color: #fff;
	font-size: .8rem;
	font-weight: 600;
	padding: 8px 10px;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(229,57,53,.4);
	transition: all .18s ease;
}
.reading-cartbtn a{
	
	color: #fff;
}

.reading-cartbtn:hover {
	background: #c62828;
	box-shadow: 0 6px 14px rgba(229,57,53,.5);
}

@media screen and (max-width: 768px) {

section{
	padding:10px 0;
	position: static;
	}
	
section div{
	width:100%;
	}
	
.reading-grid {
	width:100%;
	display: block;
}

.reading-card {
	width: 48%;
	height:350px;
	padding: 5px ;
	float:left;
	margin:15px 1%;
}

.reading-cover {
	width: 80%;
	height: 180px;
}

.reading-cover a img {
max-width:100%;
	height: auto;
border-radius:6px;
}


}
	

	

/* 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;
}


#car{ /* 購物車 */
            text-align: left;
	width:40px;
	right:60px;
  position:fixed; 	top:15px;
  z-index:99999;
}

#car span{ /* 購物車 */
	display:block;
	margin:0 auto;
  background-color:#F00;
  color:#FFF;
  font-size:17px;
  text-align:center;
   border-radius:5px;
   padding:2px;
}

#car_number{ /* 購物車數量 */
	width: 15px;
	height: 15px;
	border-radius:999em;
	background-repeat: no-repeat;
	right: 55px;
  position:fixed; 	top: 10px;
	color:#FFFFFF;
	background-color:#900;
	font-size:11px;
	text-align:center;
	padding-top:1px;
  z-index:9999;
}
iframe{ /* 購物車 */
width:150px;
  position:absolute;
  right:25px;
  top:25px;
  height:auto;
  overflow:hidden;
}  

@media screen and ( max-width: 768px ){	
#car{ /* 購物車 */
	width:40px;
	height:40px;
	right:20px;
  position:fixed;
  top:30px;
  z-index:9999;
  color:#FFF;
  font-size:13px;
}
#car_number{ /* 購物車數量 */
	width: 15px;
	height: 15px;
	border-radius:999em;
	background-repeat: no-repeat;
	right: 15px;
  position:fixed; 	top: 25px;
	color:#FFFFFF;
	background-color:#900;
	font-size:11px;
	text-align:center;
	padding-top:1px;
}

iframe{ /* 購物車 */
	display:none;
}  
	
}

.yellow {
	height:30px;
	padding-top:30px;
	font-size:20px;
}

.yellow A {
	BORDER-RIGHT: #666 1px solid; 
	PADDING-RIGHT: 5px; 
	BORDER-TOP: #666 1px solid; 
	PADDING-LEFT: 5px; 
	PADDING-BOTTOM: 2px; 
	MARGIN: 5px; 
	BORDER-LEFT: #666 1px solid; 
	COLOR: #666; 
	PADDING-TOP: 2px; 
	BORDER-BOTTOM: #666 1px solid; 
	TEXT-DECORATION: none;
}
.yellow A:hover {
	BORDER-RIGHT: #f0f0f0 1px solid;
	BORDER-TOP: #f0f0f0 1px solid; 
	BORDER-LEFT: #f0f0f0 1px solid; 
	COLOR: #FFF; 
	BORDER-BOTTOM: #f0f0f0 1px solid
}
.yellow A:active {
	BORDER-RIGHT: #f0f0f0 1px solid; 
	BORDER-TOP: #f0f0f0 1px solid; 
	BORDER-LEFT: #f0f0f0 1px solid; 
	COLOR: #000; 
	BORDER-BOTTOM: #f0f0f0 1px solid;
}
.yellow SPAN.current {
	BORDER-RIGHT: #000 1px solid; 
	PADDING-RIGHT: 5px; 
	BORDER-TOP: #000 1px solid; 
	PADDING-LEFT: 5px; FONT-WEIGHT: bold; 
	PADDING-BOTTOM: 2px; 
	MARGIN: 5px;  
	BORDER-LEFT: #000 1px solid; 
	COLOR: #0190DF; 
	PADDING-TOP: 2px; 
	BORDER-BOTTOM: #000 1px solid; 
	BACKGROUND-COLOR: #FFF;
	font-size:22px;
}
.yellow SPAN.disabled {
	BORDER-RIGHT: #eee 1px solid; 
	PADDING-RIGHT: 5px; 
	BORDER-TOP: #eee 1px solid; 
	PADDING-LEFT: 5px; 
	PADDING-BOTTOM: 2px; 
	MARGIN: 5px; 
	BORDER-LEFT: #eee 1px solid; 
	COLOR: #ddd; PADDING-TOP: 2px; 
	BORDER-BOTTOM: #eee 1px solid;
}
	 @media screen and ( max-width: 768px ){

.yellow {
	height:50px;
	padding-top:20px;
}

	}



/* -- sidemanu for pc -- */
.side-menu{
	position: fixed;
	width: 150px;
	top:18%;
	left:10px;
	padding:5px 10px;
	border-radius:20px;
	box-sizing: border-box;
	background:#2f6376;
	opacity:0.75; 
	display: flex;
	flex-direction: column;
	transform: translateX(0);
	transition: .3s;
	text-align:center;
	z-index:9999;
	font-size:1.05rem;
	color:#ffb310;
}

nav a{
	display: block;
	padding: 10px ;
	color: #FFF;
	text-decoration: none;
	position: relative;
	font-size:1rem;
	font-weight: 500;
}
nav a:hover{
	color: #ffffff;
	background-color:#e87436;
	border-radius:0;
	font-weight: 600;
}
nav p.name_menu{ padding:5% 0 3% 0; font-size:1.2em; line-height:1.2em; border-bottom:1px solid; /*color:#0d452f;*/ font-weight: bold;}
nav ul.area1{ margin-bottom:150px;}
nav ul.area1 li{ width:50%; float:left; border-bottom:1px dotted #2a438d;}
nav ul.area1 li:nth-child(even){ border-right:1px dotted #2a438d;}
nav ul.area2 li{ border-bottom:1px dotted #ffffff;}
nav ul.area1 li:nth-last-child(1), nav ul.area1 li:nth-last-child(2), nav ul.area2 li:nth-last-child(1){ border-bottom:none;}
	@media screen and ( max-width: 640px ){
		.side-menu {display: none;}
	}


/* 優惠區塊容器 */
.info{
  max-width: 980px;
  margin: 0 auto;
}

/* 每一條優惠做成卡片 */
.info .deal{
  border: 1px solid #e9e9ee;
  border-radius: 14px;
  padding: 14px 16px;
  margin: 12px 0;
  background: #fafafb;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}

/* 標題 */
.info .deal-title{
  display: inline-block;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .5px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  margin-bottom: 10px;
}

/* 內文 */
.info .deal-body{
  font-size: 1rem;
  line-height: 1.8;
  color: #111827;
}

/* 說明/備註 */
.info .deal-note{
  margin-top: 8px;
  padding-left: 12px;
  border-left: 3px solid #d1d5db;
  color: #6b7280;
  font-size: .92rem;
  line-height: 1.7;
}

/* 重點高亮 */
.info .hl{
  font-weight: 800;
  color: #b45309;
  background: #fef3c7;
  padding: 2px 6px;
  border-radius: 8px;
  display: inline-block;
}

/* 手機版 */
@media (max-width: 600px){
  .info{
    padding: 14px;
  }
  .info .deal{
    padding: 12px 12px;
    border-radius: 12px;
  }
  .info .deal-title{
    font-size: 1rem;
    padding: 6px 10px;
  }
  .info .deal-body{
    font-size: .98rem;
  }
}