@charset "utf-8";
/***************************************
    版面覆寫層（2026-10）
    由 page_view.php 在所有樣式之後載入（含版本號，不會吃到舊快取）
    body 上有 template class：首頁 .tmp_1、內頁 .tmp_2
    只覆寫桌機（980px 以上），手機版仍由 responsive.css 處理
***************************************/

/*--------------------------------------------
	可調整的數值
---------------------------------------------*/
:root {
	--content-zoom: 1.2;          /* 內頁主內容區字級倍率（1 = 原始大小） */
	--menu-zoom: 1.1;             /* 內頁左側選單字級倍率 */
	--content-line-height: 1.9;   /* 內頁文章行距（原本約 1.4） */

	--nav-font-size: clamp(17px, 1.5vw, 21px);   /* 主選單字級 */
	--nav-gap: clamp(20px, 2.6vw, 40px);         /* 主選單項目間距 */
	--nav-padding-y: 14px;                       /* 主選單文字上下留白（決定選單高度） */
	/* 主選單寬度 = 內頁主內容區寬度（wrapper 1400 - padding 100 - 左側 255） */
	--nav-width: min(1045px, calc(100vw - 355px));
}


@media (min-width: 980px) {

/*--------------------------------------------
	主選單（首頁、內頁共用）：字放大、間距加大、置中
	原本的雙線背景圖固定 706px，改用 CSS 線條（同色 1px 雙線）
---------------------------------------------*/
.tree_mainmenu_header {
	height: auto;   /* 原本固定 48px，改由上下 padding 撐開，文字垂直置中 */
	background: none;
	border-top: 3px double #7E8679;
	border-bottom: 3px double #7E8679;
}
.tree_mainmenu_header .mw-nav {
	display: flex;
	justify-content: center;
	gap: var(--nav-gap);
}
.tree_mainmenu_header .mw-nav > li { float: none; }
.tree_mainmenu_header .mw-nav > li > a {
	display: block;
	margin: 0;
	padding: var(--nav-padding-y) 0;
	font-size: var(--nav-font-size);
	line-height: 1.4;
}

/* 下拉子選單：字級與主選單相同 */
.tree_mainmenu_header .mw-nav > li > ul.arrow-pad { margin-top: 0; }
.tree_mainmenu_header .mw-nav > li > ul.arrow-pad > li { min-width: 0; }
.tree_mainmenu_header .mw-nav > li > ul.arrow-pad > li > a {
	padding: 10px 24px 10px 16px;
	font-size: var(--nav-font-size);
	font-weight: normal;
	line-height: 1.4;
	white-space: nowrap;
}

/* 首頁：主選單、新聞跑馬燈、輪播 banner 都與內頁主內容區同寬，置中於 960px 的 wrapper */
.tmp_1 .tree_mainmenu_header,
.tmp_1 .canvas_home_news,
.tmp_1 .canvas_main_banner {
	width: var(--nav-width);
	margin-left: calc((960px - var(--nav-width)) / 2);
	box-sizing: border-box;
}
.tmp_1 .tree_mainmenu_header { margin-top: 14px; margin-bottom: 40px; }

/* 輪播 banner：原本的外框是 944px 的背景圖，改用 CSS 畫（深色細線 + 柔和陰影 + 小圓角）
   banner 圖片 905x578，會依寬度等比放大（nivoSlider 3.2 支援自動寬度） */
.tmp_1 .canvas_main_banner {
	height: auto;
	margin-top: 18px;
	padding: 12px;
	background: none;
	border: 2px solid #B9B7AA;
	border-radius: 5px;
	box-shadow: 0 0 3px rgba(0, 0, 0, .25), inset 0 0 3px rgba(0, 0, 0, .2);
}
.tmp_1 .canvas_main_banner .slider-wrapper {
	position: relative;
	width: auto;
	height: auto;
	margin: 0;
}
.tmp_1 .canvas_main_banner .nivo-controlNav {
	position: absolute;
	right: 16px;
	bottom: 12px;
	margin: 0;
}

/* 內頁：主選單與主內容區同寬 */
.tmp_2 .tree_mainmenu_header { width: calc(100% - 255px); }

/* 內頁：header 右上「與我聯繫」放大 */
.tmp_2 #header .list_link_header li { font-size: 17px; }


/*--------------------------------------------
	內頁加寬：wrapper 1400px，左右 padding 50px（內容 1300px）
	左側選單維持 230px，間距 25px，其餘給主內容區
---------------------------------------------*/
.tmp_2 #wrapper {
	width: 100%;
	max-width: 1400px;
	padding: 0 50px;
	box-sizing: border-box;
}
.tmp_2 #content2 { width: calc(100% - 255px); }


/*--------------------------------------------
	內頁字級與行距
	用 zoom 等比放大（文章內容有寫死在 HTML 的 px 字級與寬度，zoom 會一併放大）
---------------------------------------------*/
.tmp_2 #content2 #side1,
.tmp_2 #content2 #side2 { zoom: var(--content-zoom); }
.tmp_2 #content1 .tree_gray_v { zoom: var(--menu-zoom); }
.tmp_2 #content1 .tree_gray_v .mw-nav > li > a { width: auto; }  /* 原本寫死 190px，放大後會超出側欄 */

.tmp_2 .canvas_post,
.tmp_2 .canvas_post :is(p, div, span, font, td, li, blockquote) {
	line-height: var(--content-line-height);
}


/*--------------------------------------------
	內頁圖片列表（作品集、生活照、媒體報導）：一排 5 張，不分頁
	全部列出，縮圖用 loading="lazy" 捲動到附近才載入（原本 sweetPages 假分頁已移除）
	手機版的欄數由 responsive.css 處理
---------------------------------------------*/
.tmp_2 .list_tilelist #holder {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 20px 23px;
	width: auto;
	height: auto;
	margin: 30px 20px 20px 23px;
	padding: 0;
}
/* 歷年代表作（項目有 .post_info）一排 4 張，圖較大 */
.tmp_2 .list_tilelist #holder:has(.post_info) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tmp_2 .list_tilelist #holder li {
	float: none;
	width: auto;
	height: auto;
	margin: 0;
}
.tmp_2 .list_tilelist .post_image {
	display: block;
	width: auto;
	height: auto;
	min-height: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	box-sizing: border-box;
}
.tmp_2 .list_tilelist .post_image a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.tmp_2 .list_tilelist .portfolio_show_detail { max-width: 100%; max-height: 100%; width: auto; height: auto; }

/* 生活照、媒體報導的說明文字最多 3 行，完整內容在大圖檢視 */
.tmp_2 .list_tilelist .post_image + .post_time {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}


/*--------------------------------------------
	內頁其他固定寬度改為隨內容區調整
---------------------------------------------*/
.tmp_2 .canvas_post .pd_content { width: auto; }
.tmp_2 .datagrid_gray_light { width: auto; margin-right: 20px; }
.tmp_2 .listgroup_advance_news { margin-right: 20px; }
.tmp_2 .listgroup_advance_news ul { width: auto; }
.tmp_2 .listgroup_advance_news span.subject { width: auto; }


/*--------------------------------------------
	新富春山居圖：捲動長卷與全縮圖列滿版，並抵銷 zoom 以原始解析度顯示
---------------------------------------------*/
.tmp_2 #side2 #new_fuchun_mountains_1,
.tmp_2 #side2 #new_fuchun_mountains_2 { width: 100%; zoom: calc(1 / var(--content-zoom)); }
.tmp_2 #side2 #new_fuchun_mountains_all_1s,
.tmp_2 #side2 #new_fuchun_mountains_all_2s { display: flex; zoom: calc(1 / var(--content-zoom)); }
.tmp_2 #new_fuchun_mountains_all_1s img,
.tmp_2 #new_fuchun_mountains_all_2s img { flex: 1 1 0; width: 0; height: auto; }

}