/* ================================================================
   ELEMIS 旗艦館｜單頁專用樣式 v6（無外掛、無外連）
   - 全頁底色、置中規格、手機 12px 邊距
   - Header（不 fixed）、主視覺等比例滿版（Chrome/Safari 一致）
   - m0 / m12 / m15 與單圖 .c-block：PC 972 置中
   - 11：2x2（PC 無縫；手機單欄）
   ================================================================ */

/* 0) Reset & 全頁底色 */
html, body {
	margin: 0;
	padding: 0;
	background: #f7f5eb
}

#wrapper {
	background: inherit
}

*, *::before, *::after {
	box-sizing: border-box
}

a {
	text-decoration: none
}

/* 1) 共用工具 */
.center {
	text-align: center
}

.pad-vert-0-20 {
	padding: 0 20px
}

.pad-vert-10-20 {
	padding: 10px 20px
}

/* 2) Header（不使用 fixed） */
#Header {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #f7f5eb
}

.header-parallax .header-inner {
	position: relative;
	width: 100%;
	margin: 0
}
/* 主視覺：寬 100%、維持 2000/560 比例、左右滿版無縫（移除 text-indent 造成的瀏覽器差異） */
.header-hero {
	display: block;
	width: 100%;
	aspect-ratio: 2000/560;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover
}

/* 3) 單張圖容器（所有單圖段落置中，與 m0/m12 一致） */
.c-block {
	max-width: 972px;
	width: 100%;
	margin: 0 auto;
	padding: 0
}

	.c-block a, .c-block img {
		display: block;
		margin: 0 auto;
		width: 100%
	}

/* 4) m0：上1 + 下5（PC 972；手機仍橫排 5 張） */
.m0 {
	--topw: 972px;
	--bottomw: 972px;
	--bottom-col: calc(var(--bottomw)/5);
	padding: 0
}

.m0-top {
	max-width: var(--topw);
	width: 100%;
	margin: 0 auto
}

	.m0-top img {
		width: 100%
	}

.m0-bottom {
	width: var(--bottomw);
	margin: 0 auto;
	display: flex;
	flex-wrap: nowrap
}

	.m0-bottom .m0-item {
		flex: 0 0 20%;
		max-width: 20%;
		margin: 0;
		padding: 0;
		box-sizing: border-box
	}

	.m0-bottom img {
		width: 100%
	}

/* 5) m12：上1 + 下4（PC 總寬 972；無縫） */
.m12 {
	--topw: 972px;
	--bottomw: 972px;
	--bottom-col: 243px;
	padding: 30px 0
}

.m12-top {
	max-width: var(--topw);
	width: 100%;
	margin: 0 auto
}

	.m12-top img {
		width: 100%
	}

.m12-bottom {
	width: var(--bottomw);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap
}

	.m12-bottom .m12-item {
		flex: 0 0 var(--bottom-col);
		max-width: var(--bottom-col);
		margin: 0;
		padding: 0;
		box-sizing: border-box
	}

	.m12-bottom img {
		width: 100%
	}

/* 6) m15：上1 + 下2（PC 總寬 972；無縫） */
.m15 {
	--topw: 972px;
	--bottomw: 972px;
	--bottom-col: calc(var(--bottomw)/2);
	padding: 30px 0
}

.m15-top {
	max-width: var(--topw);
	width: 100%;
	margin: 0 auto
}

	.m15-top img {
		width: 100%
	}

.m15-bottom {
	width: var(--bottomw);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap
}

	.m15-bottom .m15-item {
		flex: 0 0 var(--bottom-col);
		max-width: var(--bottom-col);
		margin: 0;
		padding: 0;
		box-sizing: border-box
	}

	.m15-bottom img {
		width: 100%
	}

/* 7) 11：2x2（PC 無縫） */
.promo-2x2 {
	width: 972px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2,1fr);
	grid-auto-rows: auto;
	gap: 0
}

	.promo-2x2 img {
		width: 100%;
		display: block
	}

/* 8) 手機（<=768px）：左右 12px；置中一致；m0 橫排縮小 */
@media (max-width:768px) {
	.content-section, .sugg-section, .main-section {
		padding-left: 12px;
		padding-right: 12px
	}

	.c-block {
		max-width: 100%;
		padding-left: 0;
		padding-right: 0
	}
	/* 移除會造成寬度不一致的水平 padding */
	.pad-vert-0-20, .pad-vert-10-20 {
		padding-left: 0;
		padding-right: 0
	}

	/* m0：維持五等分橫排、無縫；與頁面同左右 12px 邊距 */
	#Header .m0 {
		padding: 0 12px
	}

	.m0-bottom {
		width: 100%
	}

		.m0-bottom .m0-item {
			flex: 0 0 20%;
			max-width: 20%
		}

	/* m12/m15：與其他區塊同樣左右 12px，避免視覺上偏左 */
	.m12, .m15 {
		padding-left: 12px;
		padding-right: 12px
	}

	.m12-top, .m12-bottom, .m15-top, .m15-bottom {
		max-width: 100%;
		width: 100%;
		margin-left: 0;
		margin-right: 0
	}

		.m12-bottom .m12-item, .m15-bottom .m15-item {
			flex: 0 0 100%;
			max-width: 100%
		}

	/* 11 區塊單欄，與其他區塊同間距 */
	.promo-2x2 {
		width: 100%;
		grid-template-columns: 1fr;
		gap: 12px
	}
}