@charset "UTF-8";
body{
	/* 2026-10-29 現代化：字體改用系統字體堆疊（不再只有「微软雅黑」），並開啟字體平滑 */
	font-family:"Microsoft YaHei","微软雅黑","PingFang SC","Hiragino Sans GB",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	font-size:16px;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	/*background:url(images/bg/bg1.jpg) no-repeat;*/
	/*overflow:hidden;*/
}
a{
	text-decoration: none;
}
li{
	list-style: none;
	display: inline-block;
	
}
.done{
	
	display: inline-block;
	margin-left: 0px;
	margin-right: 0px;
	padding: 0px;
}
.con-width .tuijian{
	color: red;
}
#zhuti{
	/* 2026-10-29 現代化：字級由 20px 降為 16px，一行能放的站點更多、閱讀更輕鬆 */
	font-size:16px;
	width:100%;
	height: 100%;
}
#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{
	color:blue;
}
.tuijian{
	color: red;
}
#logo{
	background-image: url(images/logo.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 120px 60px;
	width:120px;
	height:60px;
	display:block;
	/* 2026-10-29：原本是 float:left（貼在左上角），改成區塊置中＋上下留白＋柔和陰影 */
	float:none;
	margin:22px auto 4px;
	filter: drop-shadow(0 6px 14px rgba(0,0,0,.22));
}
#logo img{
	position: relative;
	left: 120%;
	top: 30%;
}

#banner{
	height:70px;
	margin-bottom: -10px;
	/*border-bottom: 1px orange solid;*/
}
.wrap {
	position:relative;
}
.inner {
	display:none;
	position:absolute; top:100px; left:200px;
	width:100px; height:100px;
	border:0px solid #000;
	background:#fff;
}
#myblog{
	display: inline-block;
	margin-left: 10%;
	position: absolute;
	border-right: 1px #a0a0a0 solid;
	padding-right:20px;
	height: 100px;
	position: absolute;
}
#myblog a{
	text-decoration: none;
	color:purple;
	font-size: 20px;

}
#zhengji{
	display: inline-block;
	text-align: center;
	/*margin-left: 10%;*/
	margin-top: 10px;
	margin-left: 20%;
	position: relative;
}
#zhengji a{
	text-decoration: none;
	color:purple;
	font-size: 20px;

}
#dashang{
	clear: both;
	margin-left: 50%;
	margin-top:5%;
	display: inline-block;
}
#dashang a{
	color: red;
	text-decoration: none;
}
#dashang a :hover{
	color:blue;
}
footer{
	text-align: center;
	width: auto;
	font-size: 16px;
	font-family: SimHei;
	background: #a0a0a0;
	opacity:0.8;/*背景颜色透明度控制*/
	color: #d8d8d8;
}
#footerp{
	line-height: 40px;
}
#banquan{
	font-size: 8px;
	height: 25px;
}

/* ============================================================================
   內容區寬度限制（2026-10-27 新增）
   舊版是全螢幕寬度，文字一路貼到螢幕左右邊緣；在現在這種長方形寬螢幕上
   會覺得「空一大片、不好閱讀」。這裡把內容限制最大寬度並置中。
   要調整寬度改下面的 max-width 即可（建議 1100px ~ 1400px）。
   對應標記：index.php／mobilesite/index.php 的 <div class="oc-main">。
   ============================================================================ */
.oc-main{
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 16px;
	box-sizing: border-box;
}

/* ============================================================================
   2026-10-29 版面現代化（電腦版首頁 index.php／北京版 pro.php 共用 def.css）

   ・Logo 置中：見上面 #logo 的 float:none + margin:auto（原本是貼左上角）。
   ・每一個大類＝一張卡片：
       標題 <h3> ＋ 內容 <div class="con-width">
       兩者相鄰時（site_render.php 的輸出）會連成一張卡片，
       中間留一條細分隔線（h3 的 border-bottom）。
   ・連結改成圓角膠囊標籤，滑鼠移過去有底色、位移與陰影回饋。
   ・頁腳改成深色半透明圓角橫幅。
   想調顏色／圓角／間距，改下面的數值即可；要整組關掉就把這個區塊註解掉。
   ============================================================================ */

/* --- 1) 內容區留白（原本只有左右 16px） --- */
#zhuti .oc-main{
	padding: 6px 16px 46px;
}

/* --- 2) 卡片標題（h3） --- */
#zhuti h3{
	position: relative;
	margin: 26px 0 0;
	padding: 13px 18px 13px 38px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .3px;
	color: #1f2937;
	background: rgba(255,255,255,.95);
	border-bottom: 1px solid rgba(17,24,39,.08);   /* 標題與內容之間的分隔線 */
	border-radius: 16px 16px 0 0;
	box-shadow: 0 10px 26px rgba(17,24,39,.10);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
/* 標題左側的橘色裝飾條 */
#zhuti h3::before{
	content: "";
	position: absolute;
	left: 16px;
	top: 50%;
	width: 6px;
	height: 22px;
	margin-top: -11px;
	border-radius: 3px;
	background-image: linear-gradient(180deg,#ffa163,#f5571f);
}
/* 後台把標題標成「推薦」時維持紅色（例如「合作商最新活動」） */
#zhuti h3.tuijian{
	color: #e11d48;
}

/* --- 3) 卡片內容（.con-width） --- */
#zhuti .con-width{
	margin: 26px 0 10px;
	padding: 14px 18px 16px;
	line-height: 2;
	background: rgba(255,255,255,.95);
	border-radius: 16px;
	box-shadow: 0 14px 30px rgba(17,24,39,.10);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
/* 緊接在標題後面 → 與標題連成一張卡片（只留下方圓角） */
#zhuti h3 + .con-width{
	margin-top: 0;
	border-radius: 0 0 16px 16px;
}
/* 內容是空的大類（例如線上的「★★近期重要新聞★★」）：
   不要留下一塊空白卡片，標題自己收成一個圓角標籤
   （:has 不支援的舊瀏覽器只會少收下方圓角，不影響閱讀） */
#zhuti .con-width:empty{
	display: none;
}
#zhuti h3:has(+ .con-width:empty){
	border-radius: 16px;
	border-bottom-color: transparent;
}

/* --- 4) 連結：圓角膠囊標籤 --- */
#zhuti .con-width a{
	display: inline-block;
	margin: 3px 2px;
	padding: 2px 10px;
	border-radius: 9px;
	font-size: 16px;
	line-height: 1.9;
	color: #1f2937;
	transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
#zhuti .con-width a:hover{
	background-image: linear-gradient(135deg,#fff3ea,#ffe4d3);
	color: #e34f16;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(245,87,31,.18);
}
/* 後台標成「推薦」的連結維持紅色 */
#zhuti .con-width a.tuijian{
	color: #e11d48;
}
#zhuti .con-width a.tuijian:hover{
	color: #be123c;
}
/* 分隔符號「·」 */
#zhuti .con-width .done{
	margin: 0 2px;
	font-size: 14px;
	line-height: 1.9;
	color: #b9bfc9;
	vertical-align: middle;
}

/* --- 5) 頁腳 --- */
footer{
	margin-top: 34px;
	padding: 16px 14px 14px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.9;
	color: #e9ecf1;
	text-align: center;
	background: rgba(17,24,39,.78);
	border-radius: 16px 16px 0 0;
	opacity: 1;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
#footerp{
	line-height: 1.9;
}
#banquan{
	font-size: 12px;
	height: auto;
}
footer a{
	text-decoration: none;
}

/* --- 6) 窄螢幕（把桌機視窗縮小時）縮小留白與字級 --- */
@media (max-width: 640px){
	#logo{
		margin-top: 14px;
	}
	#zhuti h3{
		font-size: 17px;
		padding: 12px 14px 12px 34px;
	}
	#zhuti .con-width{
		padding: 12px 14px 14px;
	}
	#zhuti .con-width a{
		font-size: 15px;
	}
}

/* --- 7) 北京版 pro.php：大類是直接放在 #zhuti 底下（沒有 .oc-main），
        這裡補上和首頁相同的最大寬度，卡片才不會在寬螢幕被拉得太長。
        首頁 index.php 的 h3／.con-width 在 .oc-main 裡，不會被這條影響。 --- */
#zhuti > h3,
#zhuti > .con-width{
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* --- 8) 回頂端按鈕（由 script/backtop.js 產生，原本完全沒有樣式，
        只是兩個裸連結疊在右下角） --- */
.cbbfixed{
	position: fixed;
	right: 20px;
	bottom: -90px;            /* 預設收起；捲動後 backtop.js 會改成 10px，靠 transition 滑出來 */
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: bottom .3s ease;
}
.cbbfixed .cbbtn{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(255,255,255,.96);
	border: 1px solid rgba(17,24,39,.08);
	box-shadow: 0 8px 22px rgba(17,24,39,.18);
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.cbbfixed .cbbtn:hover{
	transform: translateY(-2px);
	background: #fff;
	box-shadow: 0 12px 26px rgba(245,87,31,.30);
}
/* 向上的箭頭用 CSS 畫（不再依賴 totop.css 那張精靈圖） */
.cbbfixed .gotop .up-icon{
	width: 12px;
	height: 12px;
	border-left: 2px solid #f5571f;
	border-top: 2px solid #f5571f;
	transform: rotate(45deg) translate(1px,1px);
}
/* 微信按鈕：backtop.js 會產生，但沒有任何功能（images/wechat.png 是 1242×1454 的二維碼，
   原本的彈出視窗從來沒有實作，點了只會回頂端），這裡先隱藏。
   要恢復就把下面這行註解掉，並自行補上圖示與點擊行為。 */
.cbbfixed .cweixin{
	display: none;
}
@media (max-width: 640px){
	.cbbfixed{
		right: 12px;
	}
	.cbbfixed .cbbtn{
		width: 42px;
		height: 42px;
	}
}