@charset "utf-8";
body{
	font-family: Microsoft Yahei;
}
li{
	list-style: none;
	display: inline-block;
}
a{
	text-decoration: none;
}
#box{
	/*background: url("images/bg1.jpg") no-repeat;*/
	background-image:url(./images/70bg.png) no-repeat;
	width:100%;
	height: 100%;
	background-size:cover;
  	/*position: relative;*/
	background-size: 100% 100%;
	width: auto;
	/*height: auto;*/
	margin: 0 auto;
	font-family: Microsoft Yahei;
}
#tit{
	background-image: url("./images/logo.png");
	position: relative;
	margin: 0 auto;
	width:120px;
	height:60px;
	
}
.cardcss{
	/* 2026-10-29 現代化：紫色外框改成圓角卡片＋柔和陰影 */
	border: 0;
	border-radius: 16px;
	margin: 0 10px 14px;
	background: rgba(255,255,255,.95);
	box-shadow: 0 10px 24px rgba(17,24,39,.14);
	overflow: hidden;
}
.cardnav{
	background: transparent;
	opacity: 1;
}
.done{
	color:black;
	display: inline-block;
	margin: auto 0 auto 0;
	
}

#zhuti{
	/* 2026-10-29 現代化：字級由 20px 降為 16px，一行能放的站點更多 */
	font-size:16px;
	text-align: center;
}
#zhuti a{
	text-decoration:none;
	/*font-weight: bold;*/
	font-family: Microsoft Yahei;
	color:black;
	margin-left: 8px;
	margin-right: 8px;
	
}
#zhuti a:hover{
	color:#F60;
}
h3{
	/* 2026-10-29 現代化：紫色標題改成橘色漸層；高度改自動，長標題不會被裁掉 */
	background-color: #f5571f;
	background-image: linear-gradient(135deg,#ff9a5a 0%,#f5571f 100%);
	opacity: 1;
	color: #fff;
	height: auto;
	line-height: 1.5;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .3px;
	font-family: inherit;
	margin: 0;
	padding: 12px 14px;
	text-align: center;
}

footer{
	text-align: center;
	width: auto;
	margin-top: 30px;
	padding: 16px 14px 14px;
	font-size: 14px;
	font-family: inherit;
	line-height: 1.9;
	background: rgba(17,24,39,.78);
	border-radius: 16px 16px 0 0;
	opacity:1;/*背景颜色透明度控制*/
	color: #e9ecf1;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
#footerp{
	line-height: 1.9;
}
#banquan{
	font-size: 12px;
	height: auto;
}

/* ============================================================================
   內容區寬度限制（2026-10-27 新增）
   只在「寬螢幕」生效：手機螢幕本來就窄，維持原樣不受影響；
   用電腦開手機版頁面時，內容會限制最大寬度並置中（原本是整片全寬）。
   要調整寬度改下面的 max-width 即可（建議 1100px ~ 1400px）。
   對應標記：mobilesite/index.php 的 <div class="oc-main">。
   ============================================================================ */
@media (min-width: 768px){
	.oc-main{
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
		padding: 0 16px;
		box-sizing: border-box;
	}
}

/* ============================================================================
   2026-10-29 版面現代化（手機版卡片：mobilesite/index.php、mobilesite/pro.php）

   ・卡片（.cardcss）改成圓角＋柔和陰影（原本是紫色細框）。
   ・標題（h3）改成橘色漸層（原本是紫色），高度改自動，長標題不會被裁掉。
   ・內容區（.con-width）改成膠囊標籤；內容為空的大類不會留下一塊空白。
   想調顏色／圓角，改下面的數值即可；要整組關掉就把這個區塊註解掉。
   ============================================================================ */

/* Logo：手機版本來就置中，這裡只補上背景定位與柔和陰影 */
#tit{
	background-repeat: no-repeat;
	background-position: center center;
	filter: drop-shadow(0 6px 14px rgba(0,0,0,.22));
}

/* 內容區留白改放在 .con-width 上（原本在 .cardnav 上）：
   這樣「沒有內容」的大類收掉內容區後，卡片只剩標題，不會多出一塊空白 */
#zhuti .cardnav .con-width{
	padding: 12px 12px 14px;
	line-height: 2;
}
#zhuti .cardnav .con-width:empty{
	display: none;
}

/* 連結：圓角膠囊標籤 */
#zhuti .cardnav a{
	display: inline-block;
	margin: 3px 2px;
	padding: 2px 8px;
	border-radius: 9px;
	font-size: 16px;
	line-height: 1.9;
	color: #1f2937;
	transition: background-color .18s ease, color .18s ease;
}
#zhuti .cardnav a:hover{
	background-color: #fff1e9;
	color: #e34f16;
}
/* 後台標成「推薦」的連結維持紅色 */
#zhuti .cardnav a.tuijian{
	color: #e11d48;
}
/* 分隔符號「·」 */
#zhuti .cardnav .done{
	margin: 0 2px;
	font-size: 14px;
	line-height: 1.9;
	color: #b9bfc9;
	vertical-align: middle;
}