/* brand_2 (항아리 숙성) — 화면별 반응형.
   원래 구조: 섹션1 은 배경 이미지(1800×644 — 항아리 사진 + 거품 그림) 위에 설명 3개(.drop_txt)를 중앙 기준 음수 좌표로
   얹어 거품 안에 맞춘 인포그래픽이다. 줄이면 글씨가 못 읽을 크기가 되고 좌표가 어긋난다.
   모바일은 [제목 → 설명 3개(알약 칩) → 항아리 사진(가운데만)] 로 다시 세운다. 거품 그림은 사진을 가운데로 잘라 쓰면서 걷힌다.
   섹션2 는 아이콘 3개를 한 줄에, 섹션3 타일은 brand_1 과 같은 방식(사진 위·글 아래), 섹션4 3열은 세로로. */

@media screen and (max-width: 1023px) {
	.txt_wrap { padding: 44px 16px 24px; }
	.txt_wrap .tit { padding: 6px 0 18px; }

	/* 섹션1 — 항아리는 배경 이미지를 아래쪽에 크게(폭 284vw ≈ 항아리가 폭의 90%), 설명은 칩으로 위에 */
	.section01 { height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0 16px 66vw;
		background-size: 284vw auto; background-position: 50.8% 100%; box-sizing: border-box; }
	.section01 > .txt_wrap { flex: 0 0 100%; padding-left: 0; padding-right: 0; }
	.section01 .drop_txt { position: static; margin: 0; padding: 10px 18px; border-radius: 28px;
		background: rgba(255, 255, 255, .72); border: 1px solid #e6d9c8; font-size: 14px; line-height: 1.5; }
	.section01 .drop_txt.drop02 { font-size: 14px; }
	/* 등장 모션이 인라인 position 을 박으면 원본 left:50% 가 상대 위치 기준으로 밀어낸다 */
	/* top 도 같은 이유 — 원본 .drop01{top:310px} 이 상대 위치에서 아래로 밀어낸다 */
	.drop_txt, .drop_txt.drop01, .drop_txt.drop02, .drop_txt.drop03 { left: auto !important; top: auto !important; margin-left: 0 !important; }
}

@media screen and (max-width: 1023px) {
	/* 섹션2 — 어두운 배경 위에 글 + 아이콘 3개 */
	.section02 { height: auto; padding-bottom: 44px; background-size: cover; background-position: 50% 50%; }
	.s02_list { display: flex; justify-content: center; gap: 6px; padding: 0 10px; }
	.s02_list li { margin-left: 0; flex: 1 1 0; min-width: 0; max-width: 150px; }
	.s02_list li .list_ico img { width: 64px; }
	/* 검은 배경 위 설명 — 본문 기본색(#666)이 그대로라 읽히지 않았다(QA F02). 밝은 색으로, 보조 문구는 12px 로 */
	.section02 .txt_wrap .stit { color: #8cc3aa; }
	.section02 .txt_wrap .txt { color: #dcd8d0; }
	.s02_list li .list_stit { font-size: 12px; line-height: 1.4; color: #cfcac2; }
	.s02_list li .list_tit { font-size: 14px; }
	.s02_list li, .s02_list li .list_ico { text-align: center; }

	/* 섹션3 타일 — 사진 위 · 글 아래(brand_1 과 같은 방식) */
	.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; }
	.rule_list li.rule_01, .rule_list li.rule_02 { 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/brand/02/s03_bg01.jpg); }
	.rule_list li.rule_02:before { background-image: url(/uploads/mig_site/img/page/brand/02/s03_bg02.jpg); }
	.rule_list li .txt_wrap, .rule_list li.rule_02 .txt_wrap { padding: 20px 20px 30px; text-align: center; }
	.rule_list li.rule_01 .tit, .rule_list li.rule_02 .tit { color: #222; }
	.rule_list li.rule_01 .txt, .rule_list li.rule_02 .txt { color: #555; }
	/* 모션이 left 를 ±150 에서 css 값으로 되돌린다 — css 값이 없으니 0 이다 */

	/* 섹션4 — 3열을 세로로 */
	.s04_list li { display: block; width: auto; margin: 0 0 32px; padding: 0 16px; }
	.s04_list li:first-child { margin-left: 0; }
	.s04_list li img { display: block; margin: 0 auto; }
	.s04_list li .tit { padding: 14px 0 8px; font-size: 26px; text-align: center; }
	.s04_list li .txt { text-align: center; }
}