/* menu_1 (메뉴소개) — 화면별 반응형. menu_2 도 같은 타일·영상 구조라 이 파일을 함께 쓴다(fix_responsive 의 PAGE_ALIAS).
   원래 구조: 상단 영상 틀(1200×675 고정) → 2×2 타일(배경 사진 위에 오른쪽 정렬 글, 글자색은 사진 위 전제) →
   마무리 문구. brand_1 의 타일과 같은 문제(QA B07)라 같은 방식으로 푼다: 사진은 위, 글은 아래 베이지 바탕. */

@media screen and (max-width: 1259px) {
	.video_wrap { width: 100%; height: auto; aspect-ratio: 1200 / 675; }
	.video_wrap video { width: 100%; height: 100%; object-fit: cover; }
}

@media screen and (max-width: 1023px) {
	.section01 { padding-top: 24px; }
	.section01 > .txt_wrap, .section02 > .txt_wrap { padding: 40px 16px; }
	.rule_list { overflow: visible; }
	.rule_list:after { display: none; }
	.rule_list li, .rule_list li .txt_wrap { box-sizing: border-box; }
	.rule_list li { float: none; width: 100%; height: auto; }
	/* 배경 사진은 li 자체에 칠해져 있다 — 글 뒤까지 번지지 않게 끄고 ::before 로 위쪽에만 둔다 */
	.rule_list li.rule_01, .rule_list li.rule_02, .rule_list li.rule_03, .rule_list li.rule_04 { background-image: none; }
	.rule_list li:before { content: ""; display: block; aspect-ratio: 16 / 10; background-repeat: no-repeat;
		background-position: 50% 50%; background-size: cover; }
	.rule_list li.rule_01:before { background-image: url(/uploads/mig_site/img/page/menu/01/li01_bg.jpg); }
	.rule_list li.rule_02:before { background-image: url(/uploads/mig_site/img/page/menu/01/li02_bg.jpg); }
	.rule_list li.rule_03:before { background-image: url(/uploads/mig_site/img/page/menu/01/li03_bg.jpg); }
	.rule_list li.rule_04:before { background-image: url(/uploads/mig_site/img/page/menu/01/li04_bg.jpg); }
	/* 글 — 원본은 오른쪽 정렬 + 위쪽 여백 87~99px(사진 위 전제), 글자색은 흰색·연회색 */
	.rule_list li .txt_wrap, .rule_list li.rule_01 .txt_wrap, .rule_list li.rule_02 .txt_wrap,
	.rule_list li.rule_03 .txt_wrap, .rule_list li.rule_04 .txt_wrap { padding: 20px 20px 30px; text-align: center; }
	.rule_list li .tit { color: #222; }
	.rule_list li .txt { padding-top: 10px; color: #555; }
	/* 4번째 — 사진 자리에 영상이 겹친다(영상이 안 뜨면 사진이 보인다) */
	.rule_list li.rule_04 .video_wrap { position: absolute; top: 0; left: 0; margin-left: 0; width: 100%; height: auto; aspect-ratio: 16 / 10; }
	.rule_list li.rule_04 .video_wrap .rule_04_video { width: 100%; height: 100%; object-fit: cover; }
}

@media screen and (max-width: 767px) {
	.section01 > .txt_wrap > .stit { font-size: 15px; }
	.section01 > .txt_wrap > .tit { padding: 10px 0 16px; font-size: 26px; }
	.section02 > .txt_wrap .tit { padding: 6px 0 16px; }
}