/* brand_1 (브랜드소개 · 고기, 원칙) — 화면별 반응형.
   원래 구조: 첫 원칙(.rule_01)은 항아리 사진 1장 + 사진 4장을 중앙 기준 음수 margin 으로 좌우에 흩뿌린 캔버스,
   나머지 4개는 2×2 타일(배경 사진 위에 글이 겹침 — 글자색이 사진 밝기에 맞춰 흰색/초록으로 칠해져 있다).
   타일을 줄이면 글이 사진 위에서 안 읽힌다(QA B07). 모바일은 [사진 → 글]로 세우고 글자색을 베이지 바탕용으로 바꾼다. */

@media screen and (max-width: 1023px) {
	.rule_list { overflow: visible; }
	.rule_list:after { display: none; }                       /* 세로 장식선 — 캔버스 좌표라 의미 없다 */
	/* width:100% 에 패딩을 더하면 content-box 라 폭을 넘는다 — border-box 로 계산한다 */
	.rule_list li, .rule_list li .txt_wrap { box-sizing: border-box; }
	.rule_list li { float: none; width: 100%; height: auto; background-image: none; }

	/* 첫 원칙 — 항아리 한 장, 사진 4장은 2×2, 글은 아래 */
	/* 원본 .rule_list li.rule_01{height:595px} 가 특이도 2 라 위의 height:auto 는 진다 — 같은 선택자로 푼다 */
	.rule_list li.rule_01 { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 16px 28px; height: auto; margin: 0; }
	/* 등장 모션(YMotion)이 이 요소들에 인라인 position:relative 를 박는다 — 그러면 원본 .l50{left:50%} 가 상대 위치
	   기준 50% 만큼 밀어낸다. 인라인은 !important 로만 이기므로 left 만 !important 로 푼다. */
	.rule_list li.rule_01 .l50 { position: static; left: auto !important; margin-left: 0 !important; top: auto; }
	.rule_list li.rule_01 .top_img01 { flex: 0 0 100%; text-align: center; }
	.rule_list li.rule_01 .top_img01 img { width: min(320px, 78%); }
	.rule_list li.rule_01 .top_img02, .rule_list li.rule_01 .top_img03,
	.rule_list li.rule_01 .top_img04, .rule_list li.rule_01 .top_img05 { flex: 0 0 calc(50% - 4px); max-width: 260px; }
	.rule_list li.rule_01 .top_img02 img, .rule_list li.rule_01 .top_img03 img,
	.rule_list li.rule_01 .top_img04 img, .rule_list li.rule_01 .top_img05 img { display: block; width: 100%; }
	.rule_list li.rule_01 .txt_wrap { flex: 0 0 100%; padding: 22px 8px 0; }

	/* 2~5번째 원칙 타일 — 사진은 ::before 로 위에, 글은 그 아래 */
	.rule_list li[class*="rule_0"]:not(.rule_01) { position: relative; }
	.rule_list li[class*="rule_0"]:not(.rule_01):before { content: ""; display: block; aspect-ratio: 16 / 10;
		background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; }
	.rule_list li.rule_02:before { background-image: url(/uploads/mig_site/img/page/brand/01/s02_bg01.jpg); }
	.rule_list li.rule_03:before { background-image: url(/uploads/mig_site/img/page/brand/01/s02_bg02.jpg); }
	.rule_list li.rule_04:before { background-image: url(/uploads/mig_site/img/page/brand/01/s02_bg03.jpg); }
	.rule_list li.rule_05:before { background-image: url(/uploads/mig_site/img/page/brand/01/s02_bg04.jpg); }
	.rule_list li[class*="rule_0"] .txt_wrap { padding: 20px 20px 30px; text-align: center; }
	/* 글자색 — 원본은 사진 위 전제(흰색·연회색·초록). 사진 아래 베이지 바탕에서는 어두운 색이어야 읽힌다.
	   원본 규칙(.rule_list li.rule_02 .txt_wrap .tit, 특이도 4)과 같게 맞춰 뒤에서 이긴다. */
	.rule_list li[class*="rule_0"] .txt_wrap .stit { color: #265545; }
	.rule_list li[class*="rule_0"] .txt_wrap .tit { color: #222; }
	.rule_list li[class*="rule_0"] .txt_wrap .txt { color: #555; }
	/* 5번째 — 사진 자리에 영상이 겹친다(영상이 안 뜨면 사진이 보인다) */
	.rule_list li.rule_05 .video_wrap { position: absolute; top: 0; left: 0; margin-left: 0; width: 100%; height: auto; aspect-ratio: 16 / 10; }
	.rule_list li.rule_05 .video_wrap .rule_05_video { width: 100%; height: 100%; object-fit: cover; }
}

/* 마무리 구획 + 큰 영상 */
@media screen and (max-width: 1259px) {
	.section02 { padding: 56px 0 40px; }
	.section02 > .video_wrap { width: 100%; height: auto; aspect-ratio: 1200 / 655; margin: 28px auto 0; }
	.section02 > .video_wrap video { width: 100%; height: 100%; object-fit: cover; }
}
@media screen and (max-width: 767px) {
	.section02 { padding: 40px 0 28px; }
	.section02 .txt { padding-top: 18px; }
}