@charset "utf-8";
/* ══════════════════════════
  liveStatus
══════════════════════════ */
/* 🔴 2026-07-31（§3-57）：原本是「正好 5 张卡」的 grid（repeat(6,1fr)，前两张各 span 3、
   其余 span 2；≥1260px 再切成 2fr 2fr 1fr 1fr 1fr）。
   但右边那几张快速连结是**业主可绑的** —— 没绑就不渲染，实际张数会浮动（目前 HP02 就是 0 张）。
   固定栏数的 grid 在任何「不是 5 张」的情况下都会留空栏或换行错位（子站映像那次爆版同类）。
   ⇒ 改成 flex 自适应，几张都不会错位。

   🔴 宽窄按**角色**分，不按位置（改前是 :first-child / :nth-child(n+3)-(-n+5)）：
     div.item ＝ 资讯卡（开放状态、今日天气）→ 较宽
     a.item   ＝ 快速连结小卡              → 等宽平分
   位置选择器假设了「前两张一定是资讯卡」，天气卡一撤一放就会选错卡
   （2026-07-31 撤掉天气卡时就是这样让 nth-child(n+3) 指到了错的东西）。 */
.liveStatus {
	width:100%;
	display:flex;
	flex-wrap:wrap;
	align-items:stretch;
	gap:20px;
}
.liveStatus .item {
	flex:1 1 210px;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	gap:10px 20px;
	border-radius:clamp(1.5rem, 2.4vw, 2.5rem) clamp(1.5rem, 2.4vw, 2.5rem) clamp(0.75rem, 1.2vw, 1.25rem) clamp(1.5rem, 2.4vw, 2.5rem);
	background-color:var(--white-bg);
	box-shadow:var(--shadow-box);
}
.liveStatus .item:not(:has(.large-number)) {
	padding:20px 0;
	min-height:100px;
}
.liveStatus div.item {
	flex:2 1 320px;
}
.liveStatus .item.taoyuan {
	background:linear-gradient(to right, #056341 0%, #0e3d29 100%);
}
.liveStatus .item.shanshuiyuan {
	background:linear-gradient(to right, #1a8080 0%, #005959 100%);
}
.liveStatus .item.indigo {
	background:linear-gradient(to right, #1f5c99 0%, #002d59 100%);
}
.liveStatus a:hover, .liveStatus a:focus {
	transform:translate3d(0, -5px, 0);
}
.liveStatus .item:has(.large-number) {
	background-color:transparent;
	box-shadow:none;
}
.liveStatus .icon-wrap {
	display:flex;
	align-items:center;
	justify-content:center;
}
.liveStatus .icon-wrap .img {
	position:relative;
	width:60px;
	height:60px;
	display:flex;
	align-items:center;
	justify-content:center;
}
.liveStatus .icon-wrap .img::before {
    content:'';
    display:block;
    width:100%;
    height:100%;
    background-color:#9efed5;
    mask-repeat:no-repeat;
    mask-position:center;
    mask-size:contain;
}
.liveStatus .taoyuan .icon-wrap .img::before {
	background-color:#9efed5;
}
.liveStatus .shanshuiyuan .icon-wrap .img::before {
	background-color:#99ffff;
}
.liveStatus .indigo .icon-wrap .img::before {
	background-color:#99ccff;
}
.ico-traffic::before { mask-image:url(../images/status_ico2.svg); }
.ico-tiket::before { mask-image:url(../images/status_ico3.svg); }
.ico-honors::before { mask-image:url(../images/status_ico4.svg); }
.ico-guide::before { mask-image:url(../images/status_ico5.svg); }
dl.statusbody {
	display:flex;
	flex-direction:column;
	gap:.5rem;
	padding:0;
}
dl.statusbody:has(.large-number) {
	flex-wrap:wrap;
}
dl.statusbody dt {
	align-content:center;
}
dl.statusbody dt strong {
	font-size:clamp(1.4rem, 2vw, 1.75rem);
	color:var(--text-dark);
}
dl.statusbody.light dt strong {
	color:var(--text-white);
}
dl.statusbody dd {
	font-size:clamp(1.125rem, 2vw, 1.3125rem);
	color:var(--text-mid);
}
dl.statusbody.light dd {
	color:#aaaaaa;
}
dl.statusbody dd:has(.status-meta) {
	display:flex;
	flex-wrap:wrap;
	gap:.5rem;
}
dl.statusbody dd:has(.large-number) {
	flex-direction:column;
}
.status-meta {
	color:var(--green-light);
	font-size:0.875rem;
}
.large-number {
	font-size:clamp(1.5rem, 7vw, 2.5rem);
	font-weight:600;
	font-family:"Century Gothic", "Bahnschrift", system-ui, Arial, Helvetica, sans-serif;
	color:var(--red-deep);
}
.weather-group:nth-of-type(2) .large-number {
	color:var(--green-mid);
}
dl.statusbody .weather-flex {
	display:flex;
	flex-wrap:wrap;
}
.weather-group {
	display:flex;
	flex-wrap:nowrap;
	align-items:center;
	gap:8px;
}
.weather-group:has(+ .weather-group) {
	position:relative;
	margin-right:20px;
}
.weather-group:has(+ .weather-group)::after {
	content:"";
	display:block;
	width:10px;
	height:6px;
	background-color:#999999;
	border-radius:3px;
	position:absolute;
	right:-15px;
}
.weather-info {
	color:var(--text-mid);
	line-height:120%;
}
.weather-info p:first-of-type {
	font-size:1.25em;
	font-weight:600;
	font-family:Arial, Helvetica, sans-serif;
}
.weather-info p:last-of-type {
	font-size:0.875rem;
}
@media screen and (max-width:768px) {
	.liveStatus .item:has(.large-number) {
		width:100%;
		height:100%;
		padding:20px 0;
		background-color:var(--white-bg);
		box-shadow:var(--shadow-box);
	}
	.liveStatus .item:not(:has(.large-number)) {
		min-height:80px;
	}
}
@media screen and (min-width:481px) and (max-width:768px) {
	.liveStatus .item:has(.large-number) .icon-wrap {
		margin:0 auto;
	}
	dl.statusbody:has(.large-number) {
		width:100%;
		text-align:center;
		justify-content:center;
		align-items:center;
		padding-top:0;
	}
}
@media screen and (max-width:640px) {
	.liveStatus .item:not(:has(.large-number)) {
		flex-direction:column;
		text-align:center;
	}
}
@media screen and (max-width:480px) {
	.liveStatus .item,  .liveStatus div.item {
		flex-basis:100%;
	}
}
@media screen and (min-width:1260px) {
	.liveStatus {
		gap:30px;
	}
	.liveStatus .item {
		border-radius:40px 40px 15px 40px;
	}
	.large-number {
		font-size:clamp(2rem, 2.5vw, 3rem);
	}
}
@media screen and (min-width:1260px) and (max-width:1679px) {
	/* 快速连结小卡的图示置中。按角色选（a.item），不按位置 ——
	   改前写死 nth-child(3..5) 等于假设「前两张一定是资讯卡」。 */
	.liveStatus a.item .icon-wrap {
		margin:0 auto;
	}
	.liveStatus a.item dl.statusbody {
		width:100%;
		text-align:center;
	}
}
@media screen and (min-width:1680px) {
	.liveStatus a.item {
		flex:0 0 260px;
	}
	.liveStatus .item:not(:has(.large-number)) {
		min-height:120px;
	}
}

/* ══════════════════════════
  bulletinWrap
══════════════════════════ */
.bulletinWrap {
	display:grid;
	align-items:flex-start;
	grid-template-columns:1fr;
	gap:20px;
}
.bulletinWrap .oneBox:nth-child(2n - 1)::before {
	background-color:var(--gold-bright);
}
.bulletinWrap .oneBox:nth-child(2n)::before {
	background-color:#cee4ec;
}
.bulletinWrap .oneBox:has(.info-box)::after {
	content:"";
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	right:0;
	top:0;
	z-index:-1;
	mix-blend-mode:multiply;
	background-image:url(../images/mountains_flat.webp);
	background-repeat:no-repeat;
	background-position:left bottom;
	background-size:auto 50%;
	mask-image:url(../images/curve_masking_top.svg), url(../images/curve_square.svg), url(../images/curve_box.svg);
	mask-size:auto 160px, 100% auto, 100% auto;
	mask-repeat:no-repeat;
	mask-position:top right, left 120px, left 200px;
}
.titleHead {
	width:calc(100% - 80px);
	display:flex;
	flex-wrap:wrap;
	align-items:flex-end;
	gap:1rem;
}
.bulletinWrap .oneBox:nth-child(2n - 1) h3 {
	color:#6b502e;
}
.bulletinWrap .oneBox:nth-child(2n) .titleHead h3 {
	color:#15677c;
}
.bulletinWrap .oneBox .events-name {
	color:var(--text-deep);
}
.bulletinWrap .eventsList li {
	padding:0;
	border-top:none;
	margin-bottom:1.5rem;
}
.bulletinWrap .eventsList li:last-child {
    margin-bottom: 0;
}
.bulletinWrap .info-box {
	font-size:1.8em;
	line-height:200%;
}
.bulletinWrap .info-box .slogan {
	font-size:1.25em;
	font-weight:400;
	color:var(--text-deep);
}
@media screen and (min-width:641px) and (max-width:990px) {
/*	.oneBox:has(.eventsList) .firstPost {
		padding-left:calc(40% + 20px);
		position:relative;
	}
	.oneBox:has(.eventsList) .photo-wrap {
		position:absolute;
		left:0;
		top:0;
		width:40%;
	}
	.oneBox:has(.firstPost) .eventsList {
		width:calc(100% - (40% + 20px));
	}*/
	.bulletinWrap .eventsList li {
		margin-bottom:15px;
	}
	.onePost .events-name {
		max-width:calc(100% - 110px);
	}
}
@media screen and (max-width:640px) {
}
@media screen and (min-width:768px) {
}
@media screen and (min-width:991px) {
	.bulletinWrap {
		grid-template-columns:2fr 1fr;
	}
	.bulletinWrap .eventsList li {
		margin-bottom:2rem;
	}
}
@media screen and (min-width:1260px) {
	.bulletinWrap {
		gap:30px;
	}
	.bulletinWrap .oneBox {
		padding:30px;
	}
	.bulletinWrap .oneBox::before {
		border-radius:40px;
	}
}
@media screen and (min-width:1680px) {
	.bulletinWrap .events-name,
	.bulletinWrap .info-box {
		font-size:2.2em;
		line-height:230%;
	}
	.bulletinWrap .events-meta {
		font-size:2em;
		line-height:250%;
	}
	.bulletinWrap .eventsList li {
		margin-bottom:1.25rem;
	}
}
/* ══════════════════════════
   山水雅集
══════════════════════════ */
.salonWrap {
	display:grid;
	align-items:flex-start;
	grid-template-columns:1fr;
	gap:20px;
}
.salonWrap .curveMore {
	position:absolute;
	top:0;
	right:0;
	align-items:flex-start;
}
.salonWrap .oneBox::before {
	content:"";
	display:block;
	width:100%;
	height:100%;
	border-radius:clamp(1.5rem, 3.6vw, 2.5rem);
	background-color:var(--gold-bright);
	mask-image:none;
	position:absolute;
	right:0;
	top:0;
	z-index:-2;
}
.salonWrap .oneBox.dotList::before {
	mask-image:url(../images/arrow_masking_top.svg), url(../images/curve_square.svg), url(../images/curve_box.svg);
	mask-size:auto 160px, 100% auto, 100% auto;
	mask-repeat:no-repeat;
	mask-position:top right, left 120px, left 200px;
}
.salonWrap .titleHead {
	width:100%;
}
.salonWrap .oneBox:has(.curveMore) .titleHead {
	width:calc(100% - 80px);
}
.salonWrap .titleHead .subtitle {
	color:var(--gold-chroma);
}
.salonWrap .titleHead h3 {
	color:var(--text-dark);
}
/* 🔴 §3-74（2026-08-04）：卡片摘要。**设计稿那三张卡没有这一段** ——
   是业主指令要的「摘要制」，所以这几行是新增的，不是照稿移植。
   ⚠ 只用既有变数与既有语汇（--text-dark / 与 .subtitle 同一族的字级节奏），
   不发明新色票，免得日后换肤时这一块对不上。
   ⚠ 没有这段样式的话，摘要会用浏览器预设样式紧贴在图片下方 —— 那是
   「只有开浏览器才看得出来」的那类问题，静态检查与测试都抓不到。 */
.salonWrap .salon-summary {
	margin-top:14px;
	color:var(--text-dark);
	font-size:1.5em;
	line-height:1.7;
	opacity:0.78;
}
.salonWrap .events-name {
	width:100%;
	max-width:none;
}
.salonWrap .events-name, .salonWrap .events-meta {
	font-size:clamp(1.066rem, 1.5vw, 1.125rem);
	line-height:180%;
}
.oneBox.dotList .events-name::before {
	background-color:var(--gold-chroma);
}
@media screen and (min-width:768px) and (max-width:990px) {
	.salonWrap .oneBox:has(.eventsList) {
		min-height:calc(26.5vw + 100px);
	}
}
@media screen and (min-width:701px) {
	.salonWrap {
		grid-template-columns:repeat(3, 1fr);
	}
}
@media screen and (min-width:1260px) {
	.salonWrap {
		gap:30px;
	}
	.salonWrap .oneBox {
		padding:30px;
	}
	.salonWrap .oneBox:last-of-type {
		grid-column:span 1;
	}
	.salonWrap .oneBox::before {
		border-radius:40px;
	}
}
/* ══════════════════════════
   桃花源记
══════════════════════════ */
.utopiaList {
	width:100%;
	display:grid;
	grid-template-columns:1fr;
	align-items:flex-start;
	gap:20px;
	margin:0 auto;
}
.utopiaList .item {
	width:100%;
}
.utopiaList .item a {
	display:block;
}
.utopiaList .item a:hover, .utopiaList .item a:focus {
	transform:translate3d(0, -5px, 0);
}
.curve-wrap {
	width:100%;
	display:block;
	background-color:#6b502e;
	border-radius:clamp(1.5rem, 3.6vw, 2.5rem);
	mask-image:url(../images/curve_box_top.svg), url(../images/curve_square.svg), url(../images/curve_box.svg), url(../images/arrow_masking.svg);
	mask-size:100%, 100%, 100%, auto 160px;
	mask-repeat:no-repeat;
	mask-position:left top, left calc(100% - 120px), left calc(100% - 200px), right bottom;
	position:relative;
}
.utopiaList .utopia-img {
	width:100%;
	aspect-ratio:3 / 2;
	display:block;
	border-radius:clamp(1.5rem, 3.6vw, 2.5rem);
	overflow:hidden;
	position:relative;
	z-index:1;
}
.utopiaList.feature .curve-wrap {
	mask-size:100% 60%, 100%, 100%, auto 160px;
}
.shanshuiyuan .utopiaList.feature .curve-wrap {
	background-color:#b37d62;
}
.indigo .utopiaList.feature .curve-wrap {
	background-color:#f08e47;
}
.utopiaList.feature .utopia-img {
	aspect-ratio:16 / 9;
}
.utopiaList .utopia-img img {
	object-fit:cover;
	object-position:center center;
	width:100% !important;
	height:100% !important;
	max-width:none !important;
	transition:transform 0.55s ease;
}
.utopiaList .item a:hover .utopia-img img, .utopiaList .item a:focus .utopia-img img {
	transform:scale(1.2);
}
.utopia-body {
	padding:20px;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:flex-start;
	gap:1em;
}
.feature .utopia-body {
	padding-right:90px;
}
.utopia-name {
	width:100%;
	font-family:"Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", STSong, serif;
	font-size:clamp(1.375rem, 2vw, 2rem);
	font-weight:bold;
	color:var(--text-white);
	line-height:1.4;
}
.utopia-en {
	font-size:clamp(1.125rem, 1.25vw, 1.625rem);
	color:var(--gold-pale);
	font-family:"Bahnschrift", Arial, Helvetica, sans-serif;
}
.utopia-body p {
	display:-webkit-box;
	width:100%;
	font-size:clamp(1.15rem, 1.9vw, 1.9rem);
	font-weight:100;
	color:var(--text-white);
	line-height:140%;
	overflow:hidden;
	-webkit-box-orient:vertical;
	  -o-text-overflow:ellipsis;
		 text-overflow:ellipsis;
	-webkit-line-clamp:2;
}
@media screen and (min-width: 641px) and (max-width: 990px) {
	.curve-wrap,
	.utopiaList.feature .curve-wrap {
		mask-size:100% 65%, 100%, 100%, auto 150px;
		border-radius:2.5vw;
	}
	.utopiaList .utopia-img {
		border-radius:2.5vw;
	}
}
@media screen and (max-width:640px) {
	.curve-wrap,
	.utopiaList.feature .curve-wrap {
		mask-size:100vw 100vw , auto 25vw;
		mask-position:right bottom, right bottom;
		mask-image:url(../images/curve_box_top.svg), url(../images/arrow_masking.svg);
		border-radius:5vw;
	}
	.utopiaList .utopia-img {
		border-radius:5vw;
	}
	.utopia-body {
		padding:3.5vw 20px;
		gap:1vw;
	}
}
@media screen and (min-width:601px) {
	.utopiaList {
		grid-template-columns:repeat(2, 1fr);
	}
	.utopiaList.feature {
		gap:6vw 20px;
		grid-template-columns:repeat(2, 1fr);
	}
}
@media screen and (min-width:991px) {
	.utopiaList {
		grid-template-columns:repeat(4, 1fr);
	}
	.utopiaList.feature {
		gap:5vw 20px;
	}
	.feature .utopia-body {
		padding-right:80px;
	}
}
@media screen and (min-width:1260px) {
	.utopiaList {
		gap:30px;
	}
	.utopiaList.feature {
		gap:4.2vw 30px;
	}
	.utopiaList .item a {
		border-radius:40px;
	}
	.feature .utopia-body {
		padding-left:30px;
	}
}
@media screen and (min-width:1680px) {
	.feature .utopia-body {
		padding-left:35px;
		padding-right:110px;
	}
}


/* ══════════════════════════
   桃源风情
══════════════════════════ */
.cultureList {
	width:100%;
	display:grid;
	grid-template-columns:1fr;
	align-items:flex-start;
	gap:20px;
	margin:0 auto;
}
.cultureList .item {
	width:100%;
	padding-top:10%;
}
.cultureList .item a {
	display:block;
}
.cultureList .culture-img {
	width:100%;
	aspect-ratio:1 / 1;
	display:block;
	position:relative;
	z-index:1;
	background-color:var(--green-mid);
	border-radius:clamp(1.5rem, 3.6vw, 2.5rem);
	transition:background 0.4s ease;
}
.cultureList .item a:hover .culture-img, .cultureList .item a:focus .culture-img {
	background-color:var(--gold-light);
}
.cultureList .img-bg, .cultureList .img-wrap {
	position:absolute;
	bottom:0;
	left:0;
	border-radius:clamp(1.5rem, 3.6vw, 2.5rem);
	overflow:hidden;
}
.cultureList .img-bg {
	width:100%;
	height:100%;
	z-index:-1;
}
.cultureList .img-wrap {
	width:100%;
	height:0%;
	padding-bottom:120%;
	transition:all 0.4s ease;
}
.cultureList a:hover .img-wrap, .cultureList a:focus .img-wrap {
	padding-bottom:160%;
}
.cultureList .culture-img img {
	object-fit:cover;
	object-position:top center;
	width:100% !important;
	height:100% !important;
	max-width:none !important;
	position:absolute;
	top:0;
	left:0;
}
.cultureList .img-bg img {
	object-position:center center;
}
.culture-body {
	padding:20px;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:flex-start;
	align-content:center;
	gap:1em;
	position:relative;
}
.culture-body::before {
	content:"";
	display:block;
	width:100%;
	height:calc(100% + 3.6vw);
	background-color:var(--green-mid);
	position:absolute;
	left:0;
	bottom:0;
	z-index:-1;
	mask-image:url(../images/curve_box.svg), url(../images/curve_masking.svg);
	mask-size:100% auto, auto 160px;
	mask-repeat:no-repeat;
	mask-position:left calc(100% - 160px), bottom right;
	border-radius:0 0 clamp(1.5rem, 3.6vw, 2.5rem) clamp(1.5rem, 3.6vw, 2.5rem);
}
.culture-name {
	width:100%;
	font-family:"Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", STSong, serif;
	font-size:clamp(1.375rem, 2vw, 2rem);
	font-weight:bold;
	color:var(--text-white);
	line-height:1.4;
}
.culture-en {
	font-size:clamp(1.125rem, 1.25vw, 1.625rem);
	color:var(--gold-dark);
	font-family:"Bahnschrift", Arial, Helvetica, sans-serif;
	max-width:calc(100% - 120px);
}
@media screen and (min-width: 641px) and (max-width: 990px) {
	.cultureList .img-bg, .cultureList .img-wrap {
		border-radius:2.5vw;
	}
	.culture-body {
		gap:1vw;
	}
	.culture-body::before {
		mask-size:100% auto, auto 150px;
		mask-position:left calc(100% - 150px), bottom right;
		border-radius:0 0 2.5vw 2.5vw;
	}
	.culture-en {
		max-width:calc(100% - 100px);
	}
}
@media screen and (max-width:640px) {
	.cultureList .img-bg, .cultureList .img-wrap {
		border-radius:5vw;
	}
	.culture-body {
		padding:3.5vw 20px;
		gap:1vw;
	}
	.culture-body::before {
		mask-size:100% auto, auto 25vw;
		mask-position: left calc(100% - 25vw), bottom right;
		border-radius:0 0 5vw 5vw;
	}
	.culture-en {
		max-width:calc(100% - 17vw);
	}
}
@media screen and (min-width:561px) {
	.cultureList {
		grid-template-columns:repeat(2, 1fr);
	}
}
@media screen and (min-width:991px) {
	.cultureList {
		grid-template-columns:repeat(4, 1fr);
	}
}
@media screen and (min-width:1260px) {
	.cultureList {
		gap:30px;
	}
	.cultureList .img-bg,  .cultureList .img-wrap,  .culture-body::before {
		border-radius:40px;
	}
	.culture-body {
		padding:30px;
	}
}


/* ══════════════════════════
   桃源映像
══════════════════════════ */
.gallery {
	display:grid;
	grid-template-columns:1fr 140px;
	gap:20px;
}
.viewer {
	position:relative;
	background:transparent;
	align-content:center;
	/* 🔴 2026-07-30 修：grid item 預設 min-width:auto，不准縮到比內容固有寬度小。
	   裡面是 Splide（.splide__slide 帶 flex-shrink:0），type:loop 又多 4 張 clone
	   ⇒ 那條 flex 列的固有寬度 = 10 × 欄寬，整欄被撐成 10 倍（實測 624 → 6240px），
	   .splide__track 的 overflow:hidden 裁不到（track 寬度跟著 .viewer 走）。
	   症狀：映像區橫向爆版、整份文件被拉寬、後面的區段跟著跑位。
	   同一份樣式表在 .thumb-viewport（≤860px 那段）已經用過同樣的解法。 */
	min-width:0;
}
.viewer .splide__track {
	border-radius:clamp(1.5rem, 3.6vw, 2.5rem);
	overflow:hidden;
	box-shadow:var(--shadow);
	background-color:var(--white-bg);
}
.viewer .splide__slide {
	position:relative;
	width:100%;
	aspect-ratio:16/9;
	overflow:hidden;
}
.viewer .splide__slide img, .viewer .splide__slide video {
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	background:#0d1a16;
	aspect-ratio:16/9;
}
.media-controls {
	position:absolute;
	right:22px;
	bottom:20px;
	display:flex;
	gap:10px;
	z-index:3;
}
.ctrl-btn {
	width:44px;
	height:44px;
	border-radius:50%;
	border:none;
	background:rgba(10,18,15,0.42);
	backdrop-filter:blur(2px);
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	transition:background .2s ease, transform .15s ease;
}
.ctrl-btn .is-hidden {
	display:none;
}
.ctrl-btn:hover {
	background:var(--gold-pale);
}
.ctrl-btn:active {
	transform:scale(0.92);
}
.ctrl-btn span[class^="icon-"] {
	width:20px;
	height:20px;
	position:absolute;
	transition:opacity 0.2s, transform 0.2s;
	background-color:#fff;
	mask-repeat:no-repeat;
	mask-position:center;
	mask-size:auto;
}
.icon-play {
	mask-image:url(../images/video_play.svg);
}
.icon-pause {
	mask-image:url(../images/video_pause.svg);
}
.icon-muted {
	mask-image:url(../images/video_muted.svg);
}
.icon-unmuted {
	mask-image:url(../images/video_unmuted.svg);
}
.slide-scrim {
	position:absolute;
	inset:0;
	background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(6,14,11,0.72) 100%);
	pointer-events:none;
}
.caption {
	position:absolute;
	max-width:calc(100% - 60px);
	left:30px;
	bottom:30px;
	display:grid;
	justify-content:center;
    grid-auto-flow:column;
    align-items:baseline;
	gap:10px;
	color:var(--text-white);
	text-shadow:0 2px 10px rgba(0,0,0,.35);
	z-index:2;
}
video ~ .caption {
	max-width:calc(100% - 160px);
}
.caption span {
	font-size:clamp(18px, 2.4vw, 26px);
	letter-spacing:.05em;
	word-break:keep-all;
}
.caption span.gallery-meta {
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-line-clamp:1;
	-webkit-box-orient:vertical;
	overflow:hidden;
	word-break:normal;
	font-size:clamp(13px, 1.5vw, 17px);
	letter-spacing:0em;
}
.caption .dot {
	width:5px;
	height:5px;
	border-radius:50%;
	background:var(--white-bg);
	align-self:center;
}
.caption .sub {
	letter-spacing:.2em;
}
.play-btn {
	position:absolute;
	top:50%;
	left:50%;
	z-index:3;
	transform:translate(-50%, -50%);
	width:100px;
	height:100px;
	border:none;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	transition:transform .25s ease, background .25s ease;
	background-color:transparent;
	background-image:url(../images/ico_videoPlay.svg);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	opacity:.6;
}
.play-btn:hover {
	transform:translate(-50%, -50%) scale(1.07);
	opacity:.8;
}
@media (max-width: 860px) {
	.caption {
		left:20px;
		bottom:24px;
		max-width:calc(100% - 40px);
	}
	video ~ .caption {
		max-width:calc(100% - 140px);
	}
}
@media screen and (max-width:480px) {
	video ~ .caption {
		max-width:calc(100% - 40px);
	}
}
/* Splide arrows restyle */
.viewer .splide__arrow {
	background:rgba(0,0,0,0.8);
	border:none;
	width:50px;
	height:50px;
	opacity:1;
	position:absolute;
	transform:translateY(-50%);
}
.viewer .splide__arrow:hover {
	background:var(--gold);
	opacity:1;
}
.viewer .splide__arrow svg,
.section:not(.light-type) .viewer .splide__arrow svg {
	fill:#fff;
	width:18px;
	height:18px;
}
.viewer .splide__arrow:hover svg,
.section:not(.light-type) .viewer .splide__arrow:hover svg {
	fill:var(--green-dark);
}
.viewer .splide__arrow--prev {
	left:30px;
}
.viewer .splide__arrow--next {
	right:30px;
}
/* ---------- Thumbnails ---------- */
.thumb-panel {
	display:flex;
	flex-direction:column;
	align-items:stretch;
	gap:10px;
	position:relative;
}
.thumb-nav-btn {
	align-self:center;
	width:32px;
	height:32px;
	border-radius:50%;
	border:none;
    background:var(--green-dark);
	color:#fff;
	display:none;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	transition:background .2s ease, color .2s ease, transform .15s ease, opacity .2s ease;
	flex-shrink:0;
	position:absolute;
}
.thumb-nav-up {
	top:-40px;
}
.thumb-nav-down {
	bottom:-40px;
}
.thumb-nav-btn::before {
	content:"";
	display:block;
	background-color:#fff;
	width:20px;
	height:20px;
	mask-repeat:no-repeat;
	mask-position:center;
	mask-size:contain;
	mask-image:url(../images/triangular_arrow_down.svg);
}
.thumb-nav-btn.thumb-nav-up::before {
	transform:scaleY(-1);
}
.thumb-nav-btn:hover:not(:disabled) {
	background:var(--gold);
}
.thumb-nav-btn:hover:not(:disabled)::before {
	background-color:var(--green-dark);
}
.thumb-nav-btn:active:not(:disabled) {
	transform:scale(0.92);
}
.thumb-nav-btn:disabled {
	opacity:.28;
	cursor:default;
}
.thumb-panel.has-nav .thumb-nav-btn {
	display:flex;
}
.thumb-viewport {
	overflow:hidden;
	margin:auto 0;
}
.thumbs {
	display:flex;
	flex-direction:column;
	gap:18px;
	transition:transform .4s cubic-bezier(.4, 0, .2, 1);
}
.thumb {
	position:relative;
	border-radius:15px;
	overflow:hidden;
	cursor:pointer;
	aspect-ratio:16/9;
	transition:border-color .25s ease, transform .25s ease;
	background:#eee;
	border:3px solid transparent;
	padding:1px;
}
.thumb img {
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	border-radius:10px;
}
.thumb::after {
	content:"";
	position:absolute;
	inset:0;
	background:rgba(255,255,255,0.6);
	transition:background .25s ease;
}
.thumb:hover::after {
	background:rgba(10,20,17,0.05);
}
.thumb.is-active {
	background:#fff;
	border-color:var(--gold-light);
	padding:5px;
}
.thumb:hover::after, .thumb.is-active::after {
	background:rgba(10,20,17,0);
	backdrop-filter:blur(0);
}
@media (max-width:860px) {
	.gallery {
		grid-template-columns:1fr;
	}
	.viewer .splide__arrows {
		position:absolute;
		top:100%;
		display:flex;
		align-items:center;
        justify-content:space-between;
		width:100%;
		height:clamp(45px, 10vw, 91px);
		margin-top:20px;
	}
	.viewer .splide__arrow {
		position:relative;
		top:0;
		width:clamp(45px, 10vw, 50px);
		height:clamp(45px, 10vw, 50px);
		transform:translateY(0%);
	}
	.viewer .splide__arrow--prev {
		left:inherit;
	}
	.viewer .splide__arrow--next {
		right:inherit;
	}
	.viewer .splide__arrow svg {
		width:100%;
	}
	.thumb-panel {
		position:relative;
		flex-direction:row;
		align-items:center;
		width:100%;
		padding:0 clamp(55px, 11vw, 60px);
		gap:10px;
		overflow:hidden;
	}
	.thumb-panel .thumb-nav-btn {
		display:none !important;
	}
	.thumb-viewport {
		display:flex;
        align-items:center;
		flex:1 1 auto;
		min-width:0;
		overflow:hidden;
		padding:0;
		height:auto !important;
		min-height:clamp(45px, 10vw, 91px);
	}
	.thumbs {
		flex-direction:row;
		gap:10px;
		transition:transform .3s ease;
		justify-content:center;
	}
	.thumb-panel.has-nav .thumbs {
		justify-content:flex-start;
	}
	.thumb {
		flex:0 0 104px;
		aspect-ratio:16/9;
		border-radius:10px;
	}
	.thumb img {
		border-radius:5px;
	}
	.thumb.is-active {
		padding:2px;
	}
	.play-btn {
		width:60px;
		height:60px;
	}
	.media-controls {
		right:14px;
		bottom:14px;
		gap:8px;
	}
}
@media (max-width:480px) {
	.thumb {
		flex-basis:84px;
	}
	.media-controls {
		bottom:calc(100% - 58px);
	}
}
@media screen and (min-width:1260px) {
	.gallery {
		grid-template-columns:1fr 17.8%;
		gap:3vw;
	}
}
@media screen and (min-width:1680px) {
	.gallery {
		grid-template-columns:1fr 300px;
		gap:80px;
	}
	.viewer .splide__track {
		border-radius:40px;
	}
	.viewer .splide__arrow {
		width:60px;
		height:60px;
	}
	.viewer .splide__arrow svg,  .section:not(.light-type) .viewer .splide__arrow svg {
		width:20px;
		height:20px;
	}
}
/* ══════════════════════════
   桃源文创
══════════════════════════ */
.creativityList {
	width:100%;
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	align-items:flex-start;
	gap:20px;
	margin:0 auto;
}
.creativityList .item {
	width:100%;
	min-height:100%;
}
.creativityList .oneCultural {
	padding:20px 10px;
	display:flex;
	flex-direction:column;
	gap:20px;
	background-color:var(--white-bg);
	box-shadow:var(--shadow-box);
	border-radius:clamp(1.5rem, 3.6vw, 2.5rem);
	min-height:100%;
}
.creativityList .item a:hover, .creativityList .item a:focus {
	transform:translate3d(0, -5px, 0);
}
.creativityList .creativity-img {
	width:60%;
	aspect-ratio:1 / 1;
	display:block;
	position:relative;
	overflow:hidden;
	z-index:1;
	mask-image:url(../images/ico_mask.svg);
	mask-size:contain;
	mask-repeat:no-repeat;
	mask-position:center;
	margin:0 auto;
}
.creativityList .creativity-img img {
	object-fit:cover;
	object-position:center center;
	width:100% !important;
	height:100% !important;
	max-width:none !important;
	transition:transform 0.55s ease;
}
.creativityList .item a:hover .creativity-img img, .creativityList .item a:focus .creativity-img img {
	transform:scale(1.2);
}
.creativity-body {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	gap:1em;
	text-align:center;
}
.creativity-name {
	width:100%;
	font-family:"Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", STSong, serif;
	font-size:clamp(1.375rem, 2vw, 2rem);
	font-weight:bold;
	color:var(--text-dark);
	line-height:1.4;
}
.creativity-en {
	font-size:clamp(1.125rem, 1.25vw, 1.625rem);
	color:var(--gold-pale);
	font-family:"Bahnschrift", Arial, Helvetica, sans-serif;
}
@media screen and (max-width:360px) {
	.creativityList {
		grid-template-columns:1fr;
	}
}
@media screen and (min-width:768px) {
	.creativityList {
		grid-template-columns:repeat(4, 1fr);
	}
}
@media screen and (min-width:1260px) {
	.creativityList {
		gap:30px;
	}
	.creativityList .oneCultural {
		padding:30px 10px;
		border-radius:40px;
	}
	.creativityList .creativity-img {
		width:260px;
	}
}
/* ══════════════════════════
   SHOP / 文創商城
══════════════════════════ */
.shop-intro {
	max-width:520px;
	font-size:1.5em;
	color:var(--text-mid);
	line-height:1.8;
	margin-bottom:60px;
	font-weight:300;
}
.shop-splide {
	position:relative;
}
.shop-splide:has(.is-overflow) .splide {
	padding-bottom:45px;
}
#shop-splide {
	overflow:visible;
	display:flex;
	flex-wrap:wrap;
	gap:10px;
}
#shop-splide .splide__track {
	padding:10px 0;
	overflow:hidden;
}
#shop-splide .splide__list {
	cursor:grab;
}
#shop-splide .splide__list:active {
	cursor:grabbing;
}
.section:not(.light-type) #shop-splide .splide__pagination__page {
	background:rgba(0, 0, 0, 0.3);
}
.section:not(.light-type) #shop-splide .splide__pagination__page.is-active, #shop-splide .splide__pagination__page.is-active {
	background:var(--red-deep);
}
.product-card {
	background:transparent;
	cursor:pointer;
	position:relative;
	padding:20px;
	display:block;
	border-radius:20px;
	box-sizing:border-box;
	transition:all 0.4s ease;
}
.splide__list .is-active .product-card {
	background-color:#e1c175;
	z-index:2;
}
.product-card:hover, .splide__list .is-active .product-card:hover {
	transform:translateY(-6px);
	background-color:var(--gold-pale);
	z-index:2;
}
.product-img-wrap {
	position:relative;
	aspect-ratio:1/1;
	overflow:hidden;
	background:transparent;
	border-radius:20px;
	box-sizing:border-box;
}
.product-card:hover .product-img-wrap, .splide__list .is-active .product-img-wrap {
	border:2px solid #fff;
}
.product-img {
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:transform 0.6s ease;
}
.product-card:hover .product-img {
	transform:scale(1.06);
}
.product-badge {
	position:absolute;
	top:16px;
	left:16px;
	background:#000;
	color:#fff;
	font-size:1.2em;
	letter-spacing:0.15em;
	padding:6px 10px;
	font-weight:500;
	font-style:italic;
	border-radius:99px;
}
.product-body {
	display:flex;
	align-items:baseline;
    justify-content:space-between;
	padding:20px 0 0;
	transition:all 0.4s ease;
	opacity:0;
}
.product-card:hover .product-body, .product-card:focus .product-body, .splide__list .is-active .product-body {
	opacity:1;
}
.product-name {
	font-family:"微軟雅黑", "Microsoft YaHei", serif;
	font-size:2em;
	color:var(--text-dark);
	margin-bottom:10px;
	line-height:1.4;
	font-weight:bold;
}
.product-price {
	font-size:1.8em;
	color:var(--red-deep);
	font-weight:bold;
}
@media screen and ( min-width:768px) {
	.shop-splide:has(.is-overflow) .splide {
		padding-bottom:30px;
	}
}
@media screen and ( min-width:991px) {
	#shop-splide .splide__arrows {
		position:absolute;
		top:-80px;
		right:0;
	}
}
@media screen and ( min-width:1260px) {
	#shop-splide .splide__arrows {
		right:25vw;
	}
	#shop-splide .morewrap {
		right:calc(238px + 10px + 25vw);
	}
}
/* ══════════════════════════
   景区导览
══════════════════════════ */
.guideWrap {
	width:100%;
	display:grid;
	grid-template-columns:1fr;
	align-items:flex-start;
	gap:20px;
	margin:0 auto;
}
.guideWrap .item {
	width:100%;
	height:100%;
	display:grid;
	gap:20px;
}
.guideWrap a:hover, .guideWrap:focus {
	transform:translate3d(0, -5px, 0);
}
.oneArea {
	position:relative;
	width:100%;
	height:100%;
	background-color:#f2efe5;
	border-radius:clamp(1.5rem, 3.6vw, 2.5rem);
	display:flex;
	flex-wrap:wrap;
	align-content:center;
	padding:0;
}
.oneArea .curveMore {
	position:absolute;
	right:0;
	top:0;
	align-items:flex-start;
}
/* ⚠ §3-78 曾在这里加过一组 `.oneArea.is-preparing`（「准备中」灰态卡），
   §3-79 失物招领功能做完之后**唯一的使用者消失了** ⇒ 一并移除，不留死 CSS。
   下一次又需要「功能还没做」的卡时，写法记在 canonical §3-78（十行，重加很快）。 */
.oneArea.map-wrap {
	height:0;
	padding-bottom:100%;
}
.guideWrap.taoyuan .oneArea.map-wrap {
	padding-bottom:123%;
}
.oneArea.ethnic-wrap {
	height:0;
	padding-bottom:67%;
}
.guideWrap.taoyuan .oneArea.ethnic-wrap {
	padding-bottom:79.3%;
}
.oneArea.honors-wrap .curveMore {
	top:inherit;
	bottom:0;
	align-items:flex-end;
}
.oneArea .areahead {
	position:absolute;
	left:0;
	top:0;
	background-color:var(--white-bg);
	border-radius:0 0 clamp(1.5rem, 3.6vw, 2.5rem) 0;
	min-height:55px;
	align-content:center;
	padding-right:20px;
	z-index:1;
}
.areahead {
	font-size:clamp(1.75rem, 2.38vw, 2.25rem);
	color:var(--text-dark);
}
.oneArea .areahead::before,
.oneArea .areahead::after {
	content:"";
	display:inline-block;
	background-color:#fff;
	width:25px;
	height:25px;
	position:absolute;
	mask-image:url(../images/curve_rigjt.svg);
	mask-size:auto 50px;
	mask-repeat:no-repeat;
	mask-position:top left;
}
.oneArea .areahead::before {
	right:-25px;
	top:0;
}
.oneArea .areahead::after {
	left:0;
	bottom:-25px;
}
.oneArea strong[class^="ico_"] {
	display:inline-flex;
	align-items:center;
	gap:5px;
	margin-bottom:3px;
}
.oneArea * + strong[class^="ico_"] {
	margin-top:3px;
}
.oneArea strong[class^="ico_"]::before {
	content:"";
	display:block;
	width:30px;
	height:30px;
	background-size:cover;
}
.oneArea strong[class^="ico_"] span {
	max-width:calc(100% - 35px);
}
.oneArea .areahead strong[class^="ico_"]::before {
	width:45px;
	height:45px;
}
.ico_ethnic::before {
	background-image:url(../images/ico_ethnic.svg);
}
.ico_service::before {
	background-image:url(../images/ico_service.svg);
}
.ico_guideMap::before {
	background-image:url(../images/ico_guideMap.svg);
}
.ico_honors::before {
	background-image:url(../images/ico_honors.svg);
}
.ico_tel::before {
	background-image:url(../images/ico_tel.svg);
}
.links-wrap .oneArea {
	background-color:transparent;
}
.links-wrap .oneArea::before {
	content:"";
	display:block;
	width:100%;
	height:100%;
	background-color:#f2efe5;
	mask-image:url(../images/arrow_masking_top.svg), url(../images/curve_square.svg), url(../images/curve_box.svg);
	mask-size:auto 160px, 100% auto, 100% auto;
	mask-repeat:no-repeat;
	mask-position:top right, left 120px, left 200px;
	position:absolute;
	right:0;
	top:0;
	z-index:-2;
	border-radius:clamp(1.5rem, 3.6vw, 2.5rem);
}
.icon-head {
	width:100%;
	height:100%;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:10px;
}
.icon-box {
	width:100%;
	height:100%;
	padding:25px 0 20px 0;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	gap:10px;
}
.icon-box .icon-text {
	text-align:center;
}
.icon-circle {
	width:60px;
	height:60px;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
	background:var(--gold-pale);
	mask-image:url(../images/ico_mask.svg);
	mask-size:contain;
	mask-repeat:no-repeat;
	mask-position:center;
}
.honors-wrap .icon-circle {
	background-color:#bfac73;
}
.icon-text {
	display:flex;
	flex-direction:column;
	gap:.75rem;
}
.icon-text .zh-title {
	font-weight:700;
	font-size:clamp(1.75rem, 2.38vw, 2.25rem);
	color:var(--text-dark);
}
.icon-text .en-label {
	display:block;
	font-style:normal;
	color:var(--gold-chroma);
	margin-bottom:2px;
	font-size:clamp(1.125rem, 1.42vw, 1.5rem);
	font-weight:600;
	font-family:Bahnschrift, Arial, Helvetica, sans-serif;
}
.taoyuan .map-wrap {
	background-color:#e6e3d9;
}
.shanshuiyuan .map-wrap {
	background:linear-gradient(to bottom, #f5f0ea 20%,#bbc8d0 80%);
}
.indigo .map-wrap {
	background-color:#ebeef5;
}
.honors-wrap,
.service-wrap {
	background-color:transparent;
	padding:20px;
}
.service-wrap {
	height:100%;
	padding-top:50px;
}
.shanshuiyuan .service-wrap,
.indigo .service-wrap {
	padding-top:75px;
}
.honors-wrap::before {
	content:"";
	display:block;
	width:100%;
	height:100%;
	mask-image:url(../images/arrow_masking.svg), url(../images/curve_square.svg);
	mask-size:auto 160px, 100% auto;
	mask-repeat:no-repeat;
	mask-position:bottom right, left 160px;
	position:absolute;
	right:0;
	top:0;
	z-index:-2;
	border-radius:clamp(1.5rem, 3.6vw, 2.5rem);
	background-color:#e6d9ac;
	background-image:url(../images/honors_bg.png);
	background-repeat:no-repeat;
	background-position:right bottom;
	background-size:auto 100%;
}
.service-wrap::before {
	position:absolute;
	right:0;
	top:0;
	width:100%;
	height:100%;
	content:"";
	display:block;
	background-repeat:no-repeat;
	background-position:right -5% top 100%;
    background-size:auto 105%;
	z-index:-1;
	background-image:url(../images/service_bg.webp);
	border-radius:clamp(1.5rem, 3.6vw, 2.5rem);
	background-color:#d7cec0;
}
.ethnic-wrap {
	background-color:#096a63;
}
.guideWrap.shanshuiyuan .ethnic-wrap,
.guideWrap.indigo .ethnic-wrap {
	background-color:#fff;
}
.mapBox {
	display:inline-flex;
    align-items:center;
    justify-content:center;
	width:100%;
	height:100%;
	border-radius:clamp(1.5rem, 3.6vw, 2.5rem);
	overflow:hidden;
}
.imageCover {
	display:inline-flex;
    align-items:center;
    justify-content:center;
	width:100%;
	height:100%;
	border-radius:clamp(1.5rem, 3.6vw, 2.5rem);
	overflow:hidden;
}
.oneArea.map-wrap .mapBox,
.oneArea.ethnic-wrap .imageCover {
	position:absolute;
	left:0;
	top:0;
}
.telBox {
	width:100%;
	display:grid;
	align-items:flex-end;
	grid-template-columns:repeat(2, 1fr);
	gap:30px;
	position:relative;
}
.telBox::before {
	content:"";
	display:block;
	width:1px;
	height:100%;
	border-right:1px dashed rgba(10,22,14,0.25);
	position:absolute;
	left:50%;
	bottom:0;
}
.indigo .telBox::before {
	height:calc(100% - 30px);
}
.tel-group {
	display:flex;
	flex-direction:column;
	gap:5px;
	height:100%;
}
.taoyuan .tel-group {
	justify-content:flex-end;
}
.indigo .tel-group {
	justify-content:center;
}
.telBox .ico_tel {
	font-size:clamp(1rem, 3vw, 1.25rem);
	color:#000;
	font-weight:600;
}
.tel-number {
	font-family:Book Antiqua, Bahnschrift, Arial, Helvetica, sans-serif;
	font-size:clamp(1.1rem, 6vw, 2.25rem);
	color:var(--green-mid);
	font-weight:600;
	font-style:italic;
}
.tel-number.red {
	color:var(--red-deep);
}
.tel-number.orange {
	color:#874a20;
}
@media screen and (min-width:641px) and (max-width:990px) {
	.mapBox img {
		width:100%;
	}
	.guideWrap.taoyuan .item:nth-child(2) .honors-wrap {
		height:100%;
		grid-column:1;
		grid-row:1;
	}
	.guideWrap.taoyuan .item:nth-child(2) .service-wrap {
		grid-column:1;
		grid-row:2;
	}
	.guideWrap.taoyuan .item:nth-child(2) .ethnic-wrap {
		grid-column:2;
		grid-row:1 / span 2;
	}
	.guideWrap.taoyuan .item:nth-child(3) {
		grid-template-columns:repeat(4, 1fr);
	}
	.guideWrap.shanshuiyuan .item:nth-child(3),
	.guideWrap.indigo .item:nth-child(3) {
		grid-template-columns:repeat(3, 1fr);
	}
	.oneArea,
	.imageCover {
		border-radius:2.5vw;
	}
	.honors-wrap,
	.service-wrap {
		padding:1vw 2vw;
	}
	.service-wrap {		
		padding-top:0;
		padding-bottom:1.5vw;
		align-content:flex-end;
	}
	.shanshuiyuan .service-wrap,
	.indigo .service-wrap {
		padding:6vw 2vw;
	}
	.service-wrap::before {
		border-radius:2.5vw;
		background-position:right -10% top 50%;
		background-size:auto 120%;
	}
	.oneArea .areahead {
		min-height:5.5vw;
		font-size:3.5vw;
		border-radius:0 0 2.5vw 0;
	}
	.oneArea .areahead::before {
		right:-2.5vw;
		width:2.5vw;
		height:2.5vw;
		mask-size:auto 5vw;
	}
	.oneArea .areahead::after {
		bottom:-2.5vw;
		width:2.5vw;
		height:2.5vw;
		mask-size:auto 5vw;
	}
	.oneArea strong[class^="ico_"]::before {
		width:3vw;
		height:3vw;
	}
	.oneArea strong[class^="ico_"] span {
		max-width:calc(100% - 3.5vw);
	}
	.oneArea .areahead strong[class^="ico_"]::before {
		width:4vw;
		height:4vw;
	}
	.guideWrap .item:nth-child(2) {
		grid-template-columns:calc(50% - 10px) calc(50% - 10px);
	}
	.icon-box {
		padding:5vw 0 3vw 0;
	}	
	.icon-circle {
		width:6vw;
		height:6vw;
	}
	.icon-text {
		gap:1.5vw;
	}
	.icon-text .zh-title {
		font-size:3.5vw;
	}
	.icon-text .en-label {
		font-size:2vw;
	}
	.oneArea .curveMore {
		height:7vw;
		padding-left:2vw;
	}
	.oneArea .curveMore .arrow {
		width:5vw;
		height:5vw;
	}
	.honors-wrap::before {
		mask-size:auto 15vw, 100% auto;
		mask-position:bottom right, left 16vw;
		border-radius:2.5vw;
	}
	.links-wrap .oneArea::before {
		mask-size:auto 15vw, 100% auto, 100% auto;
		mask-position:top right, left 12vw, left 20vw;
		border-radius:2.5vw;
	}
	.telBox {
		gap:3vw;
	}
	.indigo .telBox::before {
		height:calc(100% - 3vw);
	}
	.telBox .ico_tel {
		font-size:1.8vw;
	}
	.tel-number {
		font-size:3.1vw;
	}
}
@media screen and (max-width:640px) {
	.guideWrap,
	.guideWrap .item {
		gap:4vw;
	}
	.guideWrap .item:nth-child(2) {
		grid-template-columns:1fr;
	}
	.guideWrap.taoyuan .item:nth-child(2) .honors-wrap {
		grid-row:1;
		padding:40px 20px;
	}
	.guideWrap.taoyuan .item:nth-child(2) .ethnic-wrap {
		grid-column:1;
		grid-row:3;
	}
	.guideWrap.taoyuan .item:nth-child(3) {
		grid-template-columns:repeat(2, 1fr);
	}
	.guideWrap.shanshuiyuan .item:nth-child(3),
	.guideWrap.indigo .item:nth-child(3) {
		grid-template-columns:repeat(3, 1fr);
	}
	.icon-box {
		padding:10vw 0 5vw 0;
	}
	.icon-circle {
		width:12vw;
		height:12vw;
	}
	.icon-text {
		gap:2vw;
	}
	.icon-text .zh-title {
		font-size:5.3vw;
	}
	.icon-text .en-label {
		font-size:3.5vw;
	}
	.oneArea .curveMore {
		height:10vw;
		padding-left:2vw;
	}
	.oneArea .curveMore .arrow {
		width:8vw;
		height:8vw;
	}
	.honors-wrap::before {
		mask-size:auto 24vw, 100% auto;
		mask-position:bottom right, left 32vw;
		border-radius:5vw;
	}
	.links-wrap .oneArea::before {
		mask-size:auto 24vw, 100% auto, 100% auto;
		mask-position:top right, left 24vw, left 40vw;
		border-radius:5vw;
	}
}
@media screen and (max-width:640px) {
	.guideWrap.taoyuan .item:nth-child(2) .honors-wrap {
		padding:5vw 20px;
	}
}
@media screen and (min-width:991px) {
	.guideWrap {
		gap:20px 30px;
		grid-template-columns:calc((100% - 20px) / 67 * 38) calc((100% - 20px) / 67 * 29);
	}
	.guideWrap .item:nth-child(1) {
		grid-template-columns:100%;
	}
	.guideWrap .item:nth-child(2) {
		grid-template-columns:100%;
	}
	.guideWrap.shanshuiyuan .item:nth-child(2),
	.guideWrap.indigo .item:nth-child(2) {
		grid-template-rows:39fr 35fr;
	}
	.guideWrap.taoyuan .item:nth-child(2) .ethnic-wrap {
		grid-column:1;
		grid-row:3;
	}	
	.guideWrap .item:nth-child(3) {
		grid-column:1 / -1;
		grid-template-columns:100%;
	}	
	.guideWrap.taoyuan .item:nth-child(3) {
		grid-template-columns:repeat(4, 1fr);
	}
	.guideWrap.shanshuiyuan .item:nth-child(3),
	.guideWrap.indigo .item:nth-child(3) {
		grid-column:1 / -1;
		grid-template-columns:repeat(3, 1fr);
	}
	.oneArea.map-wrap {
		height:100% !important;
		padding-bottom:0 !important;
	}
	.service-wrap:has(.areahead) {
		padding-top:3.5vw;
	}
	.shanshuiyuan .service-wrap:has(.areahead),
	.indigo .service-wrap:has(.areahead) {
		padding-top:7.5vw;
	}
	.honors-wrap::before {
		mask-image:url(../images/arrow_masking.svg);
		mask-size:auto 100%;
		mask-position:bottom right;
	}
	.telBox .ico_tel {
		font-size:clamp(.95rem, 1.6vw, 1.4rem);
	}
	.tel-number {
		font-size:clamp(1.1rem, 2.7vw, 2.25rem);
	}
}
@media screen and (min-width:1260px) {
	.oneArea .areahead {
		min-height:80px;
		padding-right:30px;
	}
	.oneArea .areahead::before,
	.oneArea .areahead::after {
		width:40px;
		height:40px;
		mask-size:auto 80px;
	}
	.oneArea .areahead::before {
		right:-40px;
		top:0;
	}
	.oneArea .areahead::after {
		left:0;
		bottom:-40px;
	}
	.oneArea strong[class^="ico_"] {
		margin-bottom:5px;
	}
	.oneArea * + strong[class^="ico_"] {
		margin-top:10px;
	}
	.oneArea .areahead strong[class^="ico_"]::before {
		width:60px;
		height:60px;
	}
	.honors-wrap, .service-wrap {
		padding:30px;
	}
	.service-wrap:has(.areahead) {
		padding-top:60px;
	}
	.shanshuiyuan .service-wrap:has(.areahead),
	.indigo .service-wrap:has(.areahead) {
		padding-top:100px;
	}
	.links-wrap .oneArea::before {
		border-radius:40px;
	}
	.telBox:has(.tel-group) {
		gap:40px;
	}
}
@media screen and (min-width:1480px) {
	.guideWrap {
		grid-template-columns:calc((100% - 60px) / 81 * 38) calc((100% - 60px) / 81 * 29) calc((100% - 60px) / 81 * 14);
	}
	.guideWrap .item:nth-child(1) {
		grid-column:auto !important;
	}
	.guideWrap .item:nth-child(2) {
		grid-column:auto !important;
	}
	.guideWrap .item:nth-child(3) {
		grid-column:auto !important;
		grid-template-columns:1fr !important;
	}
}
@media screen and (min-width:1680px) {
	.guideWrap {
		grid-template-columns:760px 580px 1fr;
	}
	.guideWrap.taoyuan .item:nth-child(2) {
		grid-template-rows:160px 280px 460px;
	}
	.guideWrap.taoyuan .oneArea.map-wrap {
		padding-bottom:940px;
	}
	.guideWrap.taoyuan .oneArea.ethnic-wrap {
		padding-bottom:460px;
	}
	.honors-wrap,
	.service-wrap {
		padding:30px 40px;
	}
    .telBox:has(.tel-group) {
        gap:60px;
    }
	.icon-circle {
		width:80px;
		height:80px;
	}
}

@media print {
}
