/* fran_1 (성공경쟁력) — 화면별 반응형.
   원래 구조: .system_wrap(605px 고정) 안에 슬라이드 4장(배경 사진 + 절대배치 글)과, 그 위에 올라타는 공용 아이콘 탭
   (.paging_area, top:400px · left:50%+70px)이 형제로 있다. 한 칸에 다 넣으면 글·아이콘이 서로 덮는다(QA B04).
   모바일은 [사진 → 글 → 아이콘 탭]으로 각자 자기 공간을 갖게 세운다. */

@media screen and (max-width: 1023px) {
	.system_wrap { height: auto; }
	.system_wrap .slider-container { height: auto; }
	.system_wrap .slider-wrapper { height: auto; display: flex; }
	.system_wrap .slider-items { flex: 0 0 auto; float: none; height: auto; }
	/* 원본 규칙(.slider-items.slideNN, 특이도 3)이 더 세서 위의 none 은 진다 — 같은 선택자로 끈다 */
	.system_wrap .slider-items.slide01, .system_wrap .slider-items.slide02,
	.system_wrap .slider-items.slide03, .system_wrap .slider-items.slide04 { background-image: none; }

	/* 사진 — 배경 이미지는 1800×605 이고 사진은 왼쪽 900px 뿐이라(오른쪽은 흰 바탕), 높이를 폭×0.672 로
	   잡아 사진이 정확히 폭을 채우게 한다. 슬라이드별 URL 은 원본 규칙을 그대로 옮긴다. */
	.system_wrap .slider-items:before { content: ""; display: block; height: 67.2vw;
		background-repeat: no-repeat; background-size: auto 100%; background-position: 0 0; }
	.system_wrap .slider-items.slide01:before { background-image: url(/uploads/mig_site/img/page/fran/01/system_bg01.jpg); }
	.system_wrap .slider-items.slide02:before { background-image: url(/uploads/mig_site/img/page/fran/01/system_bg02.jpg); }
	.system_wrap .slider-items.slide03:before { background-image: url(/uploads/mig_site/img/page/fran/01/system_bg03.jpg); }
	.system_wrap .slider-items.slide04:before { background-image: url(/uploads/mig_site/img/page/fran/01/system_bg04.jpg); }

	/* 글 */
	.system_wrap .slider-items .txt_wrap { position: static; margin: 0; padding: 26px 22px 8px; text-align: center; }
	.system_wrap .slider-items .txt_wrap .stit { font-size: 15px; }
	.system_wrap .slider-items .txt_wrap .tit { padding: 10px 0 16px; font-size: clamp(22px, 6vw, 34px); line-height: 1.3; word-break: keep-all; }
	.system_wrap .slider-items .txt_wrap .txt { font-size: 14px; line-height: 1.65; letter-spacing: -.04em; word-break: keep-all; }

	/* 아이콘 탭 — 슬라이드 아래 가로 4칸. 스프라이트(100×200)는 위쪽이 꺼진 모양, 아래쪽이 켜진 모양. */
	.system_wrap .paging_area { position: static; margin: 0; padding: 4px 10px 36px; }
	.system_wrap .paging_area .paging { display: flex; justify-content: center; }
	.system_wrap .paging_area li { float: none; flex: 1 1 0; width: auto; max-width: 120px; }
	.system_wrap .paging_area li a .hover_img { width: 64px; height: 64px; background-size: 64px 128px; background-position: 50% 0; }
	.system_wrap .paging_area li.on a .hover_img, .system_wrap .paging_area li:hover a .hover_img { background-position: 50% -64px; }
	.system_wrap .paging_area li .txt { display: block; padding-top: 8px; font-size: 12px; line-height: 1.3; word-break: keep-all; }
}

/* 두 번째 슬라이드(s02) — 폭 1200/1020 고정을 푼다. 이미지는 한 장씩 보인다. */
@media screen and (max-width: 1259px) {
	.s02_slide { width: 100%; margin-bottom: 30px; }
	.s02_slide .slider-container { width: calc(100% - 64px); height: auto; }
	.s02_slide .slider-wrapper { height: auto; }
}
@media screen and (max-width: 767px) {
	.s02_slide .slider-items .img_wrap { width: min(250px, 100%); height: auto; aspect-ratio: 1 / 1; }
	.s02_slide .slider-items .txt { padding: 18px 8px 0; font-size: 14px; line-height: 1.6; word-break: keep-all; }
}

/* 세 번째 구획 — 영상 배경 위 문구 */
@media screen and (max-width: 767px) {
	/* 고정 높이(220)면 큰 문구(제목 2줄)가 아래에서 잘린다(QA) — 글이 정하는 높이로 두고 영상은 뒤에서 채운다 */
	.section03 { position: relative; height: auto; min-height: 220px; overflow: hidden; }
	.section03 .txt_wrap { position: relative; z-index: 1; padding: 52px 20px 56px; }
	.s03_video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin-left: 0; object-fit: cover; }
	.section03 .stit { font-size: clamp(14px, 3.6vw, 20px); }
	.section03 .tit { padding-top: 10px; font-size: clamp(22px, 6.4vw, 40px); line-height: 1.3; word-break: keep-all; }
}