@charset "utf-8";
/* 경영이념 페이지(/about/management_philosophy.php) 전용 스타일. 4개 언어 공통.
   2026-09-21 신설. 원본은 tempLayout/★ABOV_비전,핵심가치_다국어.pptx 이고,
   색·치수는 그 파일의 도형값에서 그대로 가져왔다(파랑 #094897 / 연두 #8CC63E / 본문 #696A6C).

   [주의] 이 파일은 head.lib.php 가 아니라 공통 PHP 가 <link> 로 직접 불러온다.
          경영이념 한 페이지에서만 쓰는 스타일이라 전 페이지에 태울 이유가 없다.
          commonMain*.css 들이 head.lib.php 에 걸려 있는 것과 다른 이유가 이것이다.
   [주의] 레거시 style.css 들이 h4/p/ul/li 를 요소 선택자로 건드리므로,
          모든 규칙을 #mpWrap 또는 섹션 id 아래로 스코프해야 한다. 클래스만으로는 진다.

   [중요] 미디어쿼리가 아니라 컨테이너 쿼리를 쓴다.
          이 페이지 본문은 좌측 .sub_menu(360px, position:absolute) 때문에
          뷰포트보다 390px 좁다 — 뷰포트 1172px 에서 본문은 782px 이었다(실측).
          그래서 뷰포트 기준으로 '1024 이상이면 카드 5열' 같은 규칙을 쓰면
          1025~1590px 구간에서 카드가 130px 로 찌그러진다. 본문 폭 자체를 기준으로 삼는다.
          기본 규칙은 좁은 화면용이고, 컨테이너가 넓어질수록 규칙이 붙는 구조다
          (컨테이너 쿼리를 모르는 브라우저는 좁은 레이아웃으로 떨어진다 — 파일 맨 아래
          @supports not 블록이 그런 브라우저에 최소한의 데스크톱 배치를 준다). */

/* ── 폰트 ────────────────────────────────────────────────────────────────
   국·영문은 Pretendard, 중·일문은 Sarasa Gothic 을 쓴다(발주 지시).
   굵기는 두 언어 모두 Regular(400)/SemiBold(600) 두 종만 쓴다(발주 지시).

   [중요] /font/SarasaGothic{J,SC}-*.woff2 원본은 서브셋이 아니라 종당 8.0~8.6MB 다.
          그대로 링크하면 안 된다. 이 페이지에 실제로 찍히는 글자만 뽑은 .subset 파일을 쓴다
          (일문 373자·55KB, 중문 382자·44KB — 원본 대비 약 1/155).
   [중요] 문구를 고치면 새 글자가 서브셋에 없어 두부(□)로 나온다. 반드시 다시 만들 것.
          글자 목록은 '렌더링된 페이지의 #mpWrap 안 텍스트'에서 뽑는 게 가장 확실하다:
            python3 -m fontTools.subset /var/www/html/font/SarasaGothicJ-Regular.woff2 \
              --text-file=<글자목록> --flavor=woff2 --no-hinting --desubroutinize \
              --layout-features='kern,liga,palt,vert,vrt2' \
              --output-file=/var/www/html/font/SarasaGothicJ-Regular.subset.woff2
          네 파일(J/SC × Regular/SemiBold)을 모두 다시 만들어야 한다.
          python3-fonttools 는 이 서버에 설치돼 있다.
   [주의] 일문은 J, 중문은 SC 다. 같은 한자라도 자형이 달라서 바꿔 쓰면 현지에서 어색하다. */
@font-face {
	font-family: 'Sarasa Gothic J MP';
	src: url('/font/SarasaGothicJ-Regular.subset.woff2') format('woff2');
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Sarasa Gothic J MP';
	src: url('/font/SarasaGothicJ-SemiBold.subset.woff2') format('woff2');
	font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Sarasa Gothic SC MP';
	src: url('/font/SarasaGothicSC-Regular.subset.woff2') format('woff2');
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Sarasa Gothic SC MP';
	src: url('/font/SarasaGothicSC-SemiBold.subset.woff2') format('woff2');
	font-weight: 600; font-style: normal; font-display: swap;
}

#mpWrap.mp_lang_kr,
#mpWrap.mp_lang_en  { font-family: 'Pretendard', 'Pretendard JP', 'Noto Sans KR', sans-serif; }
#mpWrap.mp_lang_jpn { font-family: 'Sarasa Gothic J MP', 'Pretendard JP', 'Meiryo', sans-serif; }
#mpWrap.mp_lang_chn { font-family: 'Sarasa Gothic SC MP', 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', sans-serif; }

/* 아래 규칙들은 굵은 곳에 700/800 을 쓴다(Pretendard 는 그 굵기가 있다).
   일·중문은 600 까지만 올려 뒀으므로, 그대로 두면 엔진에 따라 600 을 골라 쓰기도 하고
   600 위에 가짜 굵은체를 덧씌우기도 해서 글자가 뭉개진다. 두 언어에서만 600 으로 못박는다.
   배지의 500 은 400 으로 떨어지는 게 맞아서 건드리지 않는다. */
#mpWrap.mp_lang_jpn .mp_vision,    #mpWrap.mp_lang_chn .mp_vision,
#mpWrap.mp_lang_jpn .mp_philo_txt, #mpWrap.mp_lang_chn .mp_philo_txt,
#mpWrap.mp_lang_jpn .mp_pills span,#mpWrap.mp_lang_chn .mp_pills span,
#mpWrap.mp_lang_jpn .mp_way_head span, #mpWrap.mp_lang_chn .mp_way_head span,
#mpWrap.mp_lang_jpn .mp_card_txt,  #mpWrap.mp_lang_chn .mp_card_txt,
#mpWrap.mp_lang_jpn .mp_detail_head, #mpWrap.mp_lang_chn .mp_detail_head,
#mpWrap.mp_lang_jpn .mp_v_name strong, #mpWrap.mp_lang_chn .mp_v_name strong,
#mpWrap.mp_lang_jpn .mp_w_title,   #mpWrap.mp_lang_chn .mp_w_title {
	font-weight: 600;
}

/* ── 공통 틀 ─────────────────────────────────────────────────────────── */
#mpWrap {
	container: mpwrap / inline-size;
	width: 100%;
	max-width: 1200px;   /* 교체 전 통짜 이미지와 같은 폭이라 주변 여백이 그대로다 */
	margin: 0 auto;
	color: #696A6C;
	word-break: keep-all;
}
#mpWrap h4,
#mpWrap p,
#mpWrap ul,
#mpWrap ol,
#mpWrap li {
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;   /* 레거시 li 불릿 배경이미지 제거 */
}
#mpWrap img { border: 0; vertical-align: top; }

/* 배지(VISION / SLOGAN / 경영이념 / 핵심가치) */
#mpWrap .mp_badge {
	display: inline-block;
	padding: 5px 20px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
}
#mpWrap .mp_badge_line { border: 1px solid rgba(255,255,255,.85); color: #fff; }
#mpWrap .mp_badge_soft { background: rgba(9,72,151,.14); color: #696A6C; }

/* ── ① 비전 / 슬로건 / 경영이념 ───────────────────────────────────────── */
#mpHero .mp_band {
	/* 원본 도형: 45° 그라디언트, 28% 지점까지 파랑 유지 후 연두로 */
	background: linear-gradient(135deg, #094897 0%, #094897 28%, #8CC63E 100%);
	padding: 22px 20px 34px;
}
#mpHero .mp_band_logo { text-align: center; }
#mpHero .mp_band_logo img { height: 26px; width: auto; filter: brightness(0) invert(1); }
/* 원본은 컬러 로고에 흰색 변환(clrChange)을 먹인 것이라 별도 흰색 에셋이 없다.
   filter 로 같은 결과를 낸다 — 새 이미지 파일을 만들지 않는 이유다. */

#mpHero .mp_band_grid { margin-top: 16px; }
#mpHero .mp_col_slogan { margin-top: 24px; }

#mpHero .mp_vision {
	margin-top: 12px;
	font-size: 21px;
	font-size: clamp(21px, 3.6cqw, 30px);
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}
#mpHero .mp_slogan {
	margin-top: 14px;
	padding-top: 16px;
	border-top: 1px solid rgba(255,255,255,.55);
	font-size: 15px;
	font-size: clamp(15px, 2.4cqw, 20px);
	font-weight: 400;
	line-height: 1.8;
	color: #fff;
}

#mpHero .mp_philo { padding: 26px 0 6px; text-align: center; }
#mpHero .mp_philo_txt {
	margin-top: 14px;
	font-size: 24px;
	font-size: clamp(24px, 4.8cqw, 40px);
	font-weight: 800;
	line-height: 1.3;
	/* 원본은 글자 자체가 같은 45° 그라디언트다 */
	background: linear-gradient(135deg, #094897 0%, #094897 28%, #8CC63E 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* ── ② 핵심가치 캡슐 ─────────────────────────────────────────────────── */
#mpValues { margin-top: 38px; }
#mpValues .mp_val_head { text-align: center; }

#mpValues .mp_capsule { position: relative; margin-top: 14px; }
/* 좁을 때는 캡슐 SVG 를 버리고 알약을 낱개로 흘린다. 캡슐은 폭에 비례해 높이가
   정해지므로(840.94 : 127.36), 좁아지면 글자가 담길 높이가 안 나온다. */
#mpValues .mp_capsule_bg { display: none; }
#mpValues .mp_pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
#mpValues .mp_pills > li {
	padding: 10px 20px;
	border: 1px solid rgba(9,72,151,.35);
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(9,72,151,.15) 16%, rgba(140,198,62,.10) 100%);
}
#mpValues .mp_pills > li > span {
	font-size: 16px;
	font-weight: 800;
	line-height: 1.25;
	color: #094897;
	text-align: center;
}

/* ── ② ABOV Way ─────────────────────────────────────────────────────── */
#mpValues .mp_way_head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 38px;
}
#mpValues .mp_way_head img {
	height: 26px;
	height: clamp(26px, 5cqw, 42px);
	width: auto;
}
#mpValues .mp_way_head span {
	font-size: 28px;
	font-size: clamp(28px, 5.5cqw, 46px);
	font-weight: 800;
	line-height: 1;
	color: #094897;
}

#mpValues .mp_cards {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 42px;
	margin-top: 46px;
}
#mpValues .mp_card {
	position: relative;
	padding: 40px 16px 24px;
	border-radius: 16px;
	/* 원본 도형과 같은 세로 그라디언트(파랑 15% → 연두 10% 투명도) */
	background: linear-gradient(180deg, rgba(9,72,151,.15) 16%, rgba(140,198,62,.10) 100%);
	text-align: center;
}
#mpValues .mp_card_icon {
	position: absolute;
	top: -26px; left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px; height: 52px;
	box-sizing: border-box;
	border: 1px solid #8F8E93;
	border-radius: 50%;
	background: #fff;
}
#mpValues .mp_card_icon img { width: 32px; height: 32px; }
#mpValues .mp_card_label {
	display: block;
	font-size: 14px;
	line-height: 1.4;
	color: #8F8E93;
}
#mpValues .mp_card_txt {
	margin-top: 6px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	color: #094897;
}
/* 공통 PHP 가 카드 문구를 '|' 로 끊어 조각마다 <span> 을 낸다. 블록으로 만들어야
   그 자리에서 줄이 갈린다. '|' 가 없는 언어는 조각이 하나라 결과가 같다. */
#mpValues .mp_card_txt span { display: block; }

/* ── ③ 핵심가치 상세 ─────────────────────────────────────────────────── */
#mpDetail { margin-top: 54px; }
#mpDetail .mp_detail_head {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 21px;
	font-size: clamp(21px, 3.6cqw, 30px);
	font-weight: 800;
	line-height: 1.2;
	color: #094897;
}
#mpDetail .mp_detail_head::after {
	content: '';
	flex: 1 1 auto;
	height: 2px;
	background: #8CC63E;
}

#mpDetail .mp_detail_grid { margin-top: 24px; counter-reset: mpw; }
#mpDetail .mp_vlist > li,
#mpDetail .mp_wlist > li { margin-top: 26px; }
#mpDetail .mp_wlist { margin-top: 40px; }

#mpDetail .mp_v_name strong {
	display: block;
	font-size: 20px;
	font-size: clamp(20px, 2.9cqw, 24px);
	font-weight: 800;
	line-height: 1.2;
	color: #094897;
}
#mpDetail .mp_v_name em {
	display: block;
	margin-top: 4px;
	font-style: normal;
	font-size: 13px;
	color: #8CC63E;
}
#mpDetail .mp_v_items {
	counter-reset: mpv;
	margin-top: 10px;
	padding: 10px 14px;
	border-radius: 6px;
	/* 원본 도형과 같은 가로 그라디언트(왼쪽 투명 → 오른쪽 연두 10%) */
	background: linear-gradient(90deg, rgba(9,72,151,0) 16%, rgba(140,198,62,.10) 100%);
}
#mpDetail .mp_v_items > li {
	position: relative;
	padding-left: 20px;
	font-size: 14px;
	line-height: 1.75;
	color: #696A6C;
	counter-increment: mpv;
}
#mpDetail .mp_v_items > li::before {
	content: counter(mpv) '.';
	position: absolute;
	left: 0;
	color: #696A6C;
}

#mpDetail .mp_wlist > li { counter-increment: mpw; }
#mpDetail .mp_w_title {
	font-size: 16px;
	font-size: clamp(16px, 2.2cqw, 18px);
	font-weight: 800;
	line-height: 1.4;
	color: #094897;
}
#mpDetail .mp_w_title::before { content: counter(mpw) '. '; }
#mpDetail .mp_w_items {
	counter-reset: mpwi;
	margin-top: 8px;
	padding-left: 12px;
}
#mpDetail .mp_w_items > li {
	position: relative;
	padding-left: 22px;
	font-size: 14px;
	line-height: 1.75;
	color: #696A6C;
	counter-increment: mpwi;
}
/* 원본이 ①② 를 쓴다. 지원하지 않는 브라우저는 1 2 로 떨어진다. */
@counter-style mp-circled { system: fixed 1; symbols: '\2460' '\2461' '\2462' '\2463' '\2464'; suffix: ''; }
#mpDetail .mp_w_items > li::before {
	content: counter(mpwi, mp-circled);
	position: absolute;
	left: 0;
	color: #8F8E93;
}

/* ══ 본문 560px 이상 — 히어로 2단, 카드 3열 ════════════════════════════ */
@container mpwrap (min-width: 560px) {
	#mpHero .mp_band { padding: 26px 30px 44px; }
	#mpHero .mp_band_logo img { height: 30px; }
	#mpHero .mp_band_grid {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 40px;
	}
	#mpHero .mp_band_col { min-width: 0; }
	#mpHero .mp_col_vision { flex: 1 1 46%; }
	#mpHero .mp_col_slogan { flex: 0 1 52%; margin-top: 0; text-align: right; }

	#mpValues .mp_cards { grid-template-columns: repeat(3, 1fr); gap: 42px 15px; }
}

/* ══ 본문 820px 이상 — 캡슐 SVG, 카드 5열, 상세 2단 ═════════════════════ */
@container mpwrap (min-width: 820px) {
	#mpHero .mp_band { padding: 30px 50px 54px; }
	#mpHero .mp_band_logo img { height: 34px; }
	#mpHero .mp_philo { padding: 34px 20px 10px; }

	/* 캡슐 복원. SVG 는 폭에 비례해 높이가 정해지고, 알약 글자는 그 위에 얹는다. */
	#mpValues .mp_capsule_bg { display: block; width: 100%; height: auto; }
	#mpValues .mp_pills {
		display: block;
		position: absolute;
		top: 0; left: 0;
		width: 100%; height: 100%;
	}
	#mpValues .mp_pills > li {
		position: absolute;
		top: 6.166%;
		height: 87.698%;
		width: 22.593%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 10px;
		box-sizing: border-box;
		border: 0;
		border-radius: 0;
		background: none;
	}
	/* 위치는 원본 도형 좌표를 캡슐 viewBox 로 나눈 값이다. 5개 고정이라 nth-child 로 박아 둔다.
	   [주의] viewBox 가 844.94×131.36(도형 840.94×127.36 + 선 여백 2단위)이므로
	          도형 폭이 아니라 viewBox 폭으로 나눠야 맞는다. 여백을 바꾸면 여기도 다시 계산할 것. */
	#mpValues .mp_pills > li:nth-child(1) { left: 1.243%; }
	#mpValues .mp_pills > li:nth-child(2) { left: 20.061%; }
	#mpValues .mp_pills > li:nth-child(3) { left: 38.701%; }
	#mpValues .mp_pills > li:nth-child(4) { left: 57.330%; }
	#mpValues .mp_pills > li:nth-child(5) { left: 76.159%; }
	#mpValues .mp_pills > li > span { font-size: clamp(15px, 3.1cqw, 26px); }

	#mpValues .mp_way_head { margin-top: 54px; gap: 12px; }

	/* 카드 5열 + 원본의 '왼쪽 중괄호' 도형을 옮긴 초록 연결선.
	   가로선 좌우 끝은 첫/마지막 카드의 중심에 맞춘다(5열·간격 15px 기준 약 10%). */
	#mpValues .mp_cards {
		grid-template-columns: repeat(5, 1fr);
		gap: 15px;
		margin-top: 90px;   /* 아이콘 원(26px 돌출) + 연결선(46px) 자리 */
	}
	/* [주의] 가로선 끝은 '10%' 같은 어림값이면 안 된다. 카드 5개·간격 15px 기준
	          첫 카드 중심은 (100% - 4×15px)/10 이고, 10% 로 두면 폭 1186px 에서 6px 어긋나
	          바깥쪽 세로선과 만나지 않는다. 간격을 바꾸면 이 calc 의 15px 도 함께 바꿀 것. */
	#mpValues .mp_cards::before {
		content: '';
		position: absolute;
		top: -46px;
		left:  calc((100% - 4 * 15px) / 10);
		right: calc((100% - 4 * 15px) / 10);
		height: 1px;
		background: #8CC63E;
	}
	#mpValues .mp_cards::after {
		content: '';
		position: absolute;
		top: -64px; left: 50%;
		transform: translateX(-50%);
		width: 1px; height: 18px;
		background: #8CC63E;
	}
	#mpValues .mp_card {
		padding: 44px 14px 30px;
		border-radius: 16px 16px 0 0;   /* 원본은 위쪽 두 모서리만 둥글다 */
	}
	#mpValues .mp_card::before {
		content: '';
		position: absolute;
		top: -46px; left: 50%;
		transform: translateX(-50%);
		width: 1px; height: 20px;
		background: #8CC63E;
	}
	#mpValues .mp_card_txt { font-size: 17px; }

	#mpDetail { margin-top: 86px; }
	#mpDetail .mp_detail_head { gap: 22px; }
	/* 좌우 두 열의 행을 맞춘다. 원본은 '도전 ↔ 1.' 처럼 줄이 나란히 서 있다.
	   두 리스트에 display:contents 를 주어 자식들이 직접 그리드 칸에 들어가게 하고,
	   grid-auto-flow:column 으로 왼쪽 5칸을 먼저 채운다. 목록을 둘로 나눠 두면
	   행 높이가 서로 달라져 어긋난다. */
	/* [주의] 두 열을 1fr 1fr 로 반씩 나누면 왼쪽 초록 박스의 긴 항목이 두 줄로 접힌다.
	          왼쪽이 '가치명 + 항목상자' 두 칸을 품고 있어 실제로 더 넓어야 한다.
	          1.4fr : 1fr + 13px 이 좌우 모두 줄바꿈 0이 되는 조합이다(폭 1186px 에서 실측).
	          비율·칸너비·여백·글자크기 중 하나라도 건드리면 양쪽 줄바꿈을 다시 확인할 것. */
	#mpDetail .mp_detail_grid {
		display: grid;
		grid-template-columns: 1.4fr 1fr;
		grid-template-rows: repeat(5, auto);
		grid-auto-flow: column;
		column-gap: 28px;
		row-gap: 34px;
		margin-top: 30px;
	}
	#mpDetail .mp_vlist,
	#mpDetail .mp_wlist { display: contents; }
	#mpDetail .mp_vlist > li {
		display: grid;
		grid-template-columns: 120px 1fr;
		gap: 12px;
		align-items: start;
		margin-top: 0;
	}
	/* 가치명 칸은 언어마다 필요한 폭이 다르다(폭 1186px 에서 실측).
	   · 국·일문 120px — 더 넓히면 국문 초록 박스가 두 줄로 접힌다.
	   · 영문 158px  — 'People Development' 의 'Development' 한 낱말이 153px 라
	                   그보다 좁으면 칸 밖으로 삐져나온다(줄바꿈이 아니라 넘침이다).
	   · 중문 150px  — '以顾客为中心' 6자가 144px 인데 word-break:keep-all 이라 안 쪼개진다.
	   글자 크기나 문구를 바꾸면 세 값을 다시 재야 한다. */
	#mpWrap.mp_lang_en  .mp_vlist > li { grid-template-columns: 158px 1fr; }
	#mpWrap.mp_lang_chn .mp_vlist > li { grid-template-columns: 150px 1fr; }
	#mpDetail .mp_wlist > li { margin-top: 0; }
	#mpDetail .mp_v_items { margin-top: 0; padding: 12px; }
	#mpDetail .mp_w_items { padding-left: 8px; }
	/* 2단에서는 한 항목이 쓸 수 있는 폭이 1단일 때보다 좁아진다. 원본 PPT 도 이 목록은
	   10pt(≒12.5px)였으므로 13px 가 오히려 원본에 가깝다. */
	#mpDetail .mp_v_items > li,
	#mpDetail .mp_w_items > li { font-size: 13px; }

	/* ── 국문만 글자를 키운다(발주 요청: 초록 부제와 본문이 너무 작다) ──────
	   본문 13 → 14px, 초록 부제 13 → 16px. 대신 좌우 여백과 열 간격을 줄여
	   늘어난 만큼을 벌었다 — 그래야 초록 박스가 한 줄을 유지한다.
	   [주의] 14px 가 상한이다. 14.5px 부터 '인재양성' 세 번째 항목이 두 줄로 접힌다.
	          오른쪽 열은 14px 에서 한 항목이 두 줄이 되는데, 거기엔 박스가 없어
	          높이가 눈에 띄지 않으므로 그대로 둔다(한 줄로 맞추려면 13.5px 로 내려야 함).
	   [주의] 이름칸은 120px 그대로다. 128px 로 넓히면 초록 박스가 다시 접힌다. */
	#mpWrap.mp_lang_kr .mp_detail_grid { column-gap: 20px; }
	#mpWrap.mp_lang_kr .mp_v_items { padding: 10px; }
	#mpWrap.mp_lang_kr .mp_v_items > li { padding-left: 17px; }
	#mpWrap.mp_lang_kr .mp_w_items { padding-left: 0; }
	#mpWrap.mp_lang_kr .mp_w_items > li { padding-left: 18px; }
	#mpWrap.mp_lang_kr .mp_v_items > li,
	#mpWrap.mp_lang_kr .mp_w_items > li { font-size: 14px; }
	#mpWrap.mp_lang_kr .mp_v_name em { font-size: 16px; }
}

/* ══ 컨테이너 쿼리 미지원 브라우저용 최소 보정 ═══════════════════════════
   위 규칙이 전부 무시되어 데스크톱에서도 한 줄짜리 좁은 배치가 된다.
   본문 폭 = 뷰포트 − 390px(좌측 .sub_menu) 이므로, 본문 820px 에 해당하는
   뷰포트 1210px 이상에서만 넓은 배치의 핵심만 되살린다. */
@supports not (container-type: inline-size) {
	@media all and (min-width: 1210px) {
		#mpHero .mp_band_grid {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			gap: 40px;
		}
		#mpHero .mp_col_slogan { margin-top: 0; text-align: right; }
		#mpHero .mp_vision { font-size: 30px; }
		#mpHero .mp_slogan { font-size: 20px; }
		#mpHero .mp_philo_txt { font-size: 40px; }
		#mpValues .mp_cards { grid-template-columns: repeat(5, 1fr); gap: 15px; }
		#mpValues .mp_way_head span { font-size: 46px; }
		#mpValues .mp_way_head img { height: 42px; }
		#mpDetail .mp_detail_grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			column-gap: 46px;
		}
		#mpDetail .mp_wlist { margin-top: 0; }
		#mpDetail .mp_detail_head { font-size: 30px; }
	}
}