/**
 * 天下顧問 esgeveryone：去 Elementor 重建的頁面樣式（2026-10-26）
 *
 * 只在 7 個頁面與顧問單頁載入（inc/esg-site.php）。
 * 數值照正式站 Elementor 實際渲染的量測結果（重建/驗收/量測/）；顏色與字型讀 Blocksy 色盤與字體，客戶在「外觀 → 自訂」改色盤會連動。
 * 斷點只用 Blocksy 的 999.98px 與 689.98px。
 */

/* ========== 基礎 ========== */

/* 滿版：突破 Blocksy 內容區的 1290 容器，區塊底色才能左右滿版 */
.entry-content > .esg-pg.alignfull {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

.esg-pg {
	--esg-ink: var(--theme-palette-color-1);
	--esg-navy: var(--theme-palette-color-2);
	--esg-head: var(--theme-palette-color-3);
	--esg-accent: var(--theme-palette-color-4);
	--esg-light: var(--theme-palette-color-5);
	--esg-white: var(--theme-palette-color-8);
	--esg-x: 40px;
	color: var(--esg-ink);
}

/* 只限這些區塊的重設，用 :where() 把權重壓在 0,1,0：蓋得過主題元素預設，又不蓋掉下面元件自己的間距 */
.esg-pg :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li, figure) {
	margin: 0;
	padding: 0;
}
.esg-pg :where(ul) {
	list-style: none;
}
.esg-pg :where(img) {
	display: block;
	max-width: 100%;
	height: auto;
}
/* Elementor 標題元件的行高是 1 */
.esg-pg :where(h1, h2, h3, h4, h5, h6) {
	line-height: 1;
}
/* 文字編輯器的段落：段距 1.5em，最後一段不留 */
.esg-pg :where(.esg-rich) p {
	margin-bottom: 1.5em;
}
.esg-pg :where(.esg-rich) p:last-child {
	margin-bottom: 0;
}
/* 文字編輯器裡的清單照正式站保留縮排與段距（上面的重設只給版面用的清單） */
.esg-pg .esg-rich :where(ul, ol) {
	margin: 0 0 1.5em;
	padding-left: 2.5em;
}
.esg-pg .esg-rich :where(ul) {
	list-style: disc;
}
.esg-pg .esg-rich :where(ol) {
	list-style: decimal;
}
.esg-pg .esg-rich :where(ul, ol):last-child {
	margin-bottom: 0;
}

/* 內容寬跟著 Blocksy 容器（正式站 Elementor 容器也在 Blocksy 容器裡）：最寬 1290、桌機平板 90vw、手機 88vw */
.esg-wrap {
	width: min(var(--theme-normal-container-max-width, 1290px), var(--theme-container-edge-spacing, 90vw));
	max-width: 100%;
	margin-inline: auto;
}

.esg-sec {
	padding: 60px var(--esg-x);
}

/* 區塊標題：中文 h2 ＋ 英文副標 h6 */
.esg-title {
	font-size: 32px;
	font-weight: 700;
	color: var(--esg-head);
	text-align: center;
	padding-bottom: 20px;
}
.esg-subtitle {
	font-size: 16px;
	font-weight: 700;
	color: var(--esg-accent);
	text-align: center;
	padding-bottom: 20px;
}

/* 按鈕：照正式站 Elementor 按鈕（15px、內距 12/24、圓角 3） */
.esg-btn {
	display: inline-block;
	padding: 12px 24px;
	border: 0;
	border-radius: 3px;
	background: var(--esg-navy);
	color: var(--esg-white);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	transition: background-color .3s, color .3s, border-color .3s;
}
.esg-btn:hover,
.esg-btn:focus-visible {
	color: var(--esg-white);
	background: var(--esg-head);
}
.esg-btn--accent {
	background: var(--esg-accent);
}
.esg-btn--accent:hover,
.esg-btn--accent:focus-visible {
	background: var(--esg-light);
	color: var(--esg-accent);
}

/* 圖示清單 */
.esg-list__item,
.esg-list__item > a {
	display: flex;
	align-items: center;
}
.esg-list__ico {
	display: inline-flex;
	flex: none;
}
.esg-list__ico .esg-ico {
	width: 14px;
	height: 14px;
	fill: currentColor;
	margin-right: 3.5px;
}
.esg-list__txt {
	padding-left: 5px;
}

/* 進場動畫（只有正式站用到的兩種：左右欄滑入，同 Elementor fadeInLeft／fadeInRight）。
   進場前只透明、不位移：元素留在原位才偵測得到「進入畫面」，位移只在動畫過程中出現。
   支援減少動態的使用者不跑動畫 */
@media (prefers-reduced-motion: no-preference) {
	.esg-js [data-esg-anim]:not(.is-in) {
		opacity: 0;
	}
	.esg-js [data-esg-anim="fade-left"].is-in {
		animation: esg-fade-left 1.25s ease both;
	}
	.esg-js [data-esg-anim="fade-right"].is-in {
		animation: esg-fade-right 1.25s ease both;
	}
}
@keyframes esg-fade-left {
	from { opacity: 0; transform: translate3d(-100%, 0, 0); }
	to { opacity: 1; transform: none; }
}
@keyframes esg-fade-right {
	from { opacity: 0; transform: translate3d(100%, 0, 0); }
	to { opacity: 1; transform: none; }
}

/* ========== 首頁主視覺 ========== */

.esg-hero-home {
	position: relative;
	isolation: isolate;
	padding: 200px 60px;
	background: #1b1f29 var(--esg-bg) center / cover no-repeat;
	color: var(--esg-white);
}
.esg-hero-home::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: #1b1f29;
	opacity: .48;
	mix-blend-mode: multiply;
}
.esg-hero-home__inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.esg-hero-home__kicker {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--esg-white);
	padding-bottom: 24px;
}
.esg-hero-home__title {
	font-size: 48px;
	line-height: 1.25;
	color: var(--esg-white);
}
.esg-hero-home__text {
	font-weight: 600;
	padding-right: 40px;
}
.esg-btn--hero {
	background: var(--esg-accent);
	border: 1px solid var(--esg-white);
	font-weight: 700;
}
.esg-btn--hero:hover,
.esg-btn--hero:focus-visible {
	background: transparent;
	color: var(--esg-white);
}

/* ========== 內頁主視覺（永續協會、服務項目、最新消息） ========== */

.esg-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: 20vh;
	padding: 60px 0;
	background: var(--esg-accent) var(--esg-bg) var(--esg-bgpos, center) / cover no-repeat;
	color: var(--esg-white);
}
.esg-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, #fff 0%, var(--esg-accent) 100%);
	opacity: .5;
}
.esg-hero__inner {
	width: 90%;
	margin-inline: auto;
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	text-align: center;
}
.esg-hero__title {
	font-size: 48px;
	line-height: 1.3;
	letter-spacing: 5px;
	color: var(--esg-white);
}
.esg-hero__text {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.8;
	letter-spacing: 1px;
}

/* 只有標題的區塊（關於、整合式永續服務） */
.esg-sec--head {
	padding: 60px var(--esg-x) 40px;
}

/* ========== 首頁：服務項目 ========== */

.esg-services__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin-top: 8px;
}
.esg-services__item {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 0 20px;
}
.esg-services__num {
	font-size: 80px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: center;
	color: var(--esg-accent);
}
.esg-services__name {
	font-size: 24px;
	font-weight: 800;
	text-align: center;
	color: var(--esg-head);
}
.esg-services__text {
	font-size: 14px;
	font-weight: 900;
}

/* ========== 首頁：你有永續 ESG 的疑問嗎？ ========== */

.esg-faq {
	padding: 10px;
	overflow: hidden;
}
.esg-faq__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.esg-faq__text,
.esg-faq__media {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	padding: 10px;
}
.esg-faq__title {
	font-size: 32px;
	font-weight: 700;
	color: var(--esg-head);
	padding-bottom: 20px;
}

/* ========== 顧問輪播 ========== */

.esg-members .esg-carousel {
	margin-top: 20px;
}
.esg-carousel {
	position: relative;
	--gap: 10px;
	--per: 4;
}
.esg-carousel__viewport {
	overflow: hidden;
}
.esg-carousel__track {
	display: flex;
	gap: var(--gap);
	transition: transform .5s ease;
	will-change: transform;
}
.esg-carousel__slide {
	flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
	min-width: 0;
	padding: 0 10px 20px;
}
.esg-carousel__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	padding: 0;
	border: 0;
	background: none;
	color: rgba(238, 238, 238, .9);
	transform: translateY(-50%);
	cursor: pointer;
}
.esg-carousel__arrow .esg-ico {
	width: 25px;
	height: 25px;
	fill: currentColor;
}
.esg-carousel__arrow--prev {
	left: 10px;
}
.esg-carousel__arrow--next {
	right: 10px;
}
.esg-carousel__dots {
	display: flex;
	justify-content: center;
	padding-top: 10px;
}
.esg-carousel__dot {
	width: 6px;
	height: 6px;
	margin: 0 6px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #000;
	opacity: .2;
	cursor: pointer;
}
.esg-carousel__dot[aria-selected="true"] {
	opacity: 1;
}
.esg-carousel.is-static .esg-carousel__arrow,
.esg-carousel.is-static .esg-carousel__dots {
	display: none;
}

.esg-member {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
/* 正式站大頭照所在的區塊高 220（照片 180＋上方 33＋下方 7） */
.esg-member__photo {
	align-self: center;
	margin: 33px 0 7px;
}
.esg-member__img {
	width: 180px;
	height: 180px;
	object-fit: cover;
	border: 5px solid var(--esg-accent);
	border-radius: 100%;
}
.esg-member__name {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	color: var(--esg-head);
}

/* ========== 首頁：活動報名資訊（卡片） ========== */

/* 正式站這一區上下都不留白（上面接顧問區的下內距，下面的聯絡區自己有 60 上外距） */
.esg-courses {
	padding-top: 0;
	padding-bottom: 0;
}
.esg-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 35px 30px;
	padding-top: 20px;
}
.esg-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 15px;
	background: var(--esg-white);
}
.esg-card__thumb {
	position: relative;
	display: block;
	padding-bottom: 66%;
	overflow: hidden;
}
.esg-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important; /* 蓋掉 :where(img) 的 height:auto，縮圖要填滿 0.66 比例框 */
	object-fit: cover;
}
.esg-card__badge {
	position: absolute;
	top: 0;
	left: 0;
	margin: 20px;
	padding: .6em 1.2em;
	border-radius: 5px;
	background: #69727d;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 2px;
}
.esg-card__body {
	flex-grow: 1;
	margin-top: 20px;
	padding: 0 30px;
}
.esg-card__title {
	margin-bottom: 10px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.5;
}
.esg-card__title a {
	color: #000;
}
.esg-card__excerpt {
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: 500;
	line-height: 2;
	color: var(--esg-head);
}
.esg-card__more {
	display: inline-block;
	margin-bottom: 20px;
	font-size: 12px;
	font-weight: 900;
	text-transform: uppercase;
	color: var(--esg-accent);
}
.esg-card__meta {
	padding: 15px 30px;
	border-top: 1px solid #eaeaea;
	font-size: 12px;
	line-height: 1.3;
	color: #adadad;
}

/* ========== 深色背景＋表單卡片（首頁聯絡、永續協會加入我們、立即聯絡頁） ========== */

.esg-contact {
	position: relative;
	isolation: isolate;
	padding: 80px var(--esg-x);
	background: var(--esg-ink) var(--esg-bg) center / cover no-repeat;
}
.esg-contact--gap {
	margin-top: 60px;
}
/* 遮罩只有永續協會頁有（正式站首頁、聯絡頁指定的全域色 astglobalcolor2 不存在，實際上沒有遮罩） */
.esg-contact--dark::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--esg-ink);
	opacity: .73;
}
.esg-contact__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
}
.esg-contact__text {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-right: 80px;
	color: var(--esg-white);
}
.esg-contact__kicker {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--esg-white);
}
.esg-contact__title {
	font-size: 40px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--esg-white);
}
.esg-contact__lead {
	margin-bottom: -8px;
	padding-right: 64px;
	font-weight: 600;
}
.esg-list--light .esg-list__item {
	padding-bottom: 2px;
	color: var(--esg-white);
	font-weight: 600;
	text-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
.esg-list--light .esg-list__ico .esg-ico {
	fill: var(--esg-white);
	margin-right: 8px;
}
.esg-contact__card {
	padding: 48px 48px 40px;
	border-radius: 4px;
	background: var(--esg-white);
	box-shadow: 0 0 10px rgba(0, 0, 0, .05);
}

/* ========== 圖文交錯列（永續協會、服務項目） ========== */

.esg-split {
	padding: 40px var(--esg-x) 0;
}
.esg-split--first {
	padding-top: 0;
}
.esg-split--last {
	padding-bottom: 60px;
}
.esg-split__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
}
.esg-split__media img {
	width: 100%;
}
.esg-split--rev .esg-split__media {
	order: 2;
}
.esg-split__text {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 0 40px;
}
.esg-split__title {
	font-size: 28px;
	font-weight: 700;
	color: var(--esg-head);
}
.esg-split__sub {
	font-size: 16px;
	font-weight: 700;
	color: var(--esg-accent);
	padding-bottom: 20px;
}
.esg-split__body {
	font-weight: 600;
}
.esg-split__cta .esg-btn,
.esg-bcorp__cta .esg-btn {
	font-weight: 600;
}

/* ========== 永續協會：B 型企業 ========== */

.esg-bcorp {
	padding: 48px 200px;
	background: #f9fafb;
	text-align: center;
}
.esg-bcorp__img {
	width: 40%;
	margin: 0 auto 24px;
}
.esg-bcorp__img img {
	width: 100%;
}
.esg-bcorp__title {
	margin-bottom: 16px;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.8;
	color: var(--esg-accent);
}
.esg-bcorp__desc {
	font-family: Roboto, var(--theme-font-family);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
}
.esg-bcorp__cta {
	margin-top: 20px;
}

/* ========== 永續協會：核心價值 ========== */

.esg-values {
	padding: 60px 20px;
	background: var(--esg-accent);
	color: #f0f0f0;
}
.esg-values__title {
	padding: 10px;
	font-size: 36px;
	font-weight: 600;
	letter-spacing: 5px;
	text-align: center;
	color: #f0f0f0;
}
.esg-values__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin-top: 40px;
}
.esg-values__item {
	padding: 0 15px;
	text-align: center;
}
.esg-values__ico {
	display: inline-flex;
	margin-bottom: 15px;
}
.esg-values__ico .esg-ico {
	width: 50px;
	height: 50px;
	fill: var(--esg-white);
}
.esg-values__name {
	margin-bottom: 24px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .13px;
	text-transform: capitalize;
	color: #f0f0f0;
}
.esg-values__desc {
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 1px;
}

/* ========== 最新消息清單 ========== */

.esg-news-sec {
	padding: 60px var(--esg-x) 40px;
}
.esg-news {
	max-width: 661px;
	margin-inline: auto;
}
/* 正式站每列：上下 15、左 20；箭頭外圍 10，列高約 98 */
.esg-news__item {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 15px 0 15px 20px;
	border-bottom: 1px solid var(--esg-accent);
}
.esg-news__item:first-child {
	border-top: 1px solid var(--esg-accent);
}
.esg-news__title {
	flex: 1;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}
.esg-news__title a {
	color: var(--esg-head);
}
.esg-news__icon {
	display: inline-flex;
	align-items: center;
	height: 66px;
	padding: 0 10px;
	color: var(--esg-ink);
	transition: transform .3s, color .3s;
}
.esg-news__icon:hover {
	color: var(--esg-navy);
	transform: scale(1.1);
}
.esg-news__icon .esg-ico {
	width: 28px;
	height: 28px;
	fill: currentColor;
}
.esg-news__nav {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 30px;
}

/* ========== 登入與註冊、表單感謝頁 ========== */

.esg-account {
	padding: 10px;
}
.esg-account__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
}
.esg-account__col {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 10px;
}
.esg-account__title {
	font-size: 28px;
	font-weight: 700;
	color: var(--esg-head);
}
.esg-account__title--2l {
	line-height: 1.5;
}
/* 兩欄之間的分隔線：正式站只在手機顯示 */
.esg-account__divider {
	display: none;
	margin: 15px 0;
	border: 0;
	border-top: 1px solid #000;
}

/* 登入框（照正式站 Elementor 登入元件） */
.esg-login form p {
	margin: 0 0 10px;
}
.esg-login label {
	display: block;
	margin-bottom: 7.5px;
	font-size: 15px;
	line-height: 1.8;
}
.esg-login input[type="text"],
.esg-login input[type="password"] {
	width: 100%;
	min-height: 40px;
	padding: 0 15px;
	border: 1px solid #69727d;
	border-radius: 3px;
	background: #fff;
	color: #1f2124;
}
.esg-login .login-remember label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 15px;
	line-height: 27px;
}
.esg-login .login-remember input {
	margin: 0;
}
.esg-login input[type="submit"] {
	min-height: 40px;
	padding: 0 24px;
	border: 0;
	border-radius: 3px;
	background: var(--esg-navy);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}
.esg-login__turnstile {
	margin-bottom: 24px;
}
/* 外掛在驗證框後面多輸出一個 <br>，正式站 Elementor 登入框裡沒有這段空白 */
.esg-login .cf-turnstile-br {
	display: none;
}
.esg-login__lost {
	font-size: 14px;
}
.esg-login__lost a {
	color: var(--esg-accent);
}

/* ========== 專人諮詢（右下角 LINE） ========== */

.esg-line__link {
	position: fixed;
	right: 20px;
	bottom: 28px;
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: #06c755;
}
.esg-line__label {
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}
.esg-line__link .esg-ico {
	width: 50px;
	height: 50px;
	fill: currentColor;
}

/* ========== 顧問單頁（版面用 Blocksy 設定，主題做不到的才寫在這裡） ========== */

/* 大頭照：正式站 Elementor 範本是 300px 寬、5px 青綠框、圓角 100%（照片不是正方形，所以是橢圓，照原樣） */
.single-org_member .ct-featured-image img {
	width: 300px;
	margin-inline: auto;
	border: 5px solid var(--theme-palette-color-4);
	border-radius: 100%;
}
/* 內文置中：Blocksy 沒有內文對齊的設定 */
.single-org_member .entry-content {
	text-align: center;
}
/* 正式站內文在 Elementor 範本元件裡，圖片之間不留 Blocksy 的段落間距（24 張證照圖連在一起排） */
.single-org_member .entry-content > .wp-block-image {
	margin-bottom: 0;
}
/* 同上，內文標題上方也不加 Blocksy 的 48px */
.single-org_member .entry-content > :is(h1, h2, h3, h4, h5, h6) {
	margin-top: 0;
}

/* ========== 平板 ========== */

@media (max-width: 999.98px) {
	.esg-hero-home {
		padding: 128px 40px 64px;
	}
	.esg-hero {
		padding: 40px 0;
	}
	/* 平板字級照正式站 Elementor 各元件的平板設定（比桌機大） */
	.esg-hero__title {
		font-size: 60px;
	}
	.esg-hero__text {
		font-size: 24px;
	}
	.esg-title {
		font-size: 40px;
	}
	.esg-subtitle,
	.esg-split__sub {
		font-size: 24px;
	}
	.esg-split__title {
		font-size: 34px;
	}
	.esg-contact__title {
		font-size: 28px;
	}
	.esg-values__title {
		font-size: 40px;
		line-height: 1.1;
		letter-spacing: normal;
	}
	/* 正式站平板各區上下留白（只動上下；左右寬度交給 .esg-wrap，避免手機版繼承） */
	.esg-hero-home__kicker {
		padding-bottom: 0;
	}
	.esg-hero__inner {
		padding: 0;
	}
	.esg-sec--head {
		padding-top: 40px;
	}
	.esg-services,
	.esg-members {
		padding-top: 0;
		padding-bottom: 40px;
	}
	.esg-services__item {
		padding-bottom: 32px;
	}
	.esg-courses {
		padding-top: 40px;
	}
	.esg-cards {
		padding-top: 0;
	}
	.esg-split,
	.esg-split--last {
		padding-top: 0;
		padding-bottom: 40px;
	}
	.esg-split__text {
		gap: 24px;
		padding: 0 0 0 24px;
	}
	/* 正式站平板：核心價值區最小高度 70vh，標題在上、四格在下 */
	.esg-values {
		min-height: 70vh;
		display: flex;
	}
	.esg-values > .esg-wrap {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.esg-services__grid {
		grid-template-columns: 1fr 1fr;
	}
	.esg-faq__grid {
		grid-template-columns: 3fr 2fr;
	}
	.esg-carousel {
		--per: 2;
	}
	.esg-cards {
		grid-template-columns: 1fr 1fr;
	}
	.esg-courses {
		padding-bottom: 40px;
	}
	.esg-contact {
		padding-block: 60px;
	}
	.esg-home .esg-contact--gap {
		margin-top: 0;
	}
	.esg-contact__card {
		padding: 24px;
	}
	.esg-contact__text {
		padding-right: 40px;
	}
	.esg-bcorp {
		padding: 50px;
	}
	.esg-bcorp__img {
		width: 60%;
	}
	.esg-values__grid {
		grid-template-columns: 1fr 1fr;
		row-gap: 40px;
	}
	.esg-values__name {
		font-size: 22px;
	}
}

/* ========== 手機 ========== */

@media (max-width: 689.98px) {
	.esg-pg {
		--esg-x: 20px;
	}
	.esg-sec {
		padding-block: 40px;
	}
	.esg-courses {
		padding-top: 0;
		padding-bottom: 40px;
	}
	.esg-members {
		padding-inline: 24px;
	}
	.esg-hero-home {
		padding: 128px 24px 78px;
		background-position: -32vw center;
		text-align: center;
	}
	.esg-hero-home__kicker {
		padding-bottom: 0;
	}
	.esg-hero-home__title {
		font-size: 40px;
	}
	.esg-hero-home__text {
		padding-right: 0;
	}
	.esg-services__grid {
		row-gap: 0;
		margin-top: 20px;
	}
	.esg-services__item {
		padding: 24px 20px;
	}
	.esg-faq__list {
		font-size: 14px;
	}
	.esg-faq__title {
		font-size: 24px;
		text-align: center;
	}
	.esg-faq__cta {
		text-align: center;
	}
	.esg-faq .esg-btn {
		padding: 10px 16px;
		font-size: 14px;
	}
	.esg-member__img {
		width: 240px;
		height: 240px;
	}
	.esg-card__thumb {
		padding-bottom: 50%;
	}
	.esg-contact__title {
		font-size: 29.6px;
	}
	.esg-hero {
		padding: 30px 20px;
	}
	.esg-hero__inner {
		width: 100%;
		padding: 0;
	}
	.esg-hero__title {
		font-size: 36px;
	}
	.esg-hero__text {
		font-size: 14px;
	}
	.esg-title {
		font-size: 32px;
	}
	.esg-subtitle,
	.esg-split__sub {
		font-size: 16px;
	}
	.esg-faq {
		padding-block: 10px;
	}
	.esg-sec--head {
		padding-block: 40px;
	}
	.esg-sec--head .esg-subtitle,
	.esg-split__sub {
		padding-bottom: 0;
	}
	.esg-split__title {
		font-size: 32px;
	}
	.esg-split__title,
	.esg-split__sub {
		text-align: center;
	}
	.esg-services__grid,
	.esg-faq__grid,
	.esg-cards,
	.esg-contact__grid,
	.esg-split__grid,
	.esg-values__grid,
	.esg-account__grid {
		grid-template-columns: 1fr;
	}
	.esg-services__num {
		font-size: 48px;
	}
	.esg-services__item:nth-child(-n+2) .esg-services__name {
		font-size: 32px;
	}
	.esg-services__item:nth-child(n+3) .esg-services__name {
		font-size: 28px;
	}
	.esg-faq__media {
		order: -1;
	}
	.esg-carousel {
		--per: 1;
	}
	.esg-contact {
		padding-inline: 24px;
	}
	.esg-contact__text {
		padding: 0 24px 48px;
	}
	.esg-contact__lead {
		padding-right: 0;
	}
	.esg-split__media,
	.esg-split--rev .esg-split__media {
		order: 0;
	}
	.esg-split__text {
		gap: 20px;
		padding: 24px 16px 0 0;
	}
	/* 正式站手機版兩頁的圖文列留白不同：服務項目每列下方 40（同平板），永續協會第一列不留、其他列上方 40 */
	.esg-about .esg-split {
		padding-top: 40px;
		padding-bottom: 0;
	}
	.esg-about .esg-split--first {
		padding-top: 0;
	}
	.esg-account__grid {
		gap: 20px;
	}
	.esg-account__col {
		padding: 0;
	}
	.esg-account__divider {
		display: block;
	}
	.esg-bcorp {
		padding: 50px 24px;
	}
	.esg-bcorp__img {
		width: 80%;
	}
	.esg-bcorp__title {
		font-size: 14px;
	}
	.esg-values {
		padding: 52px 19.5px;
	}
	.esg-values {
		min-height: 0;
	}
	.esg-values__title {
		padding: 0 0 20px;
		font-size: 32px;
	}
	.esg-values__name {
		font-size: 20px;
	}
	.esg-values__grid {
		row-gap: 20px;
		margin-top: 35px;
	}
	.esg-values__desc {
		font-size: 14px;
	}
	.esg-line__link {
		bottom: 28px;
	}
}