/* 홈(index) — 모바일 구성. 원본 모바일(m/index.html·css/main.css)의 순서와 크기를 따른다.
원래 구조: .section01 은 가로 슬라이더(슬라이드 3장 + 앞뒤 복제 2장)이고 장마다 높이가 달라, 좁은 화면에서는 한 번에 한 장씩
자동으로 넘어가며 화면이 들쭉날쭉 뛴다(제목 30~40px·여백 280px 가 그대로). 원본 모바일은 한 장짜리 세로 구성이다:
[전문가가 만드는 바른 원칙 · 타일 4] → [우리 스스로 합니다 · 원 3] → [숨을 쉬다] → [매장찾기] → (하단 문의).
그래서 1023 이하에서는 슬라이더를 풀어 세로로 쌓고(복제 숨김), 글자는 원본 모바일 크기(제목 15·본문 11)로 줄인다.
PC 쪽 장식 배너(좌우 영역)와 SNS 는 원본 모바일에 없어 접는다 — 메뉴가 같은 곳으로 이어진다. */
@media screen and (max-width: 1023px) {
/* 슬라이더 해제 — 인라인 폭·transform 은 !important 로만 이긴다 */
.section01 { height: auto !important; overflow: visible; }
.section01 > .slider-container { overflow: visible; height: auto !important; }
.section01 > .slider-container > .slider-wrapper { display: flex !important; flex-direction: column; width: 100% !important;
height: auto !important; transform: none !important; }
/* 바깥 슬라이드만 — 매장 슬라이더(.swiper-slide.slider-items)는 그대로 가로로 넘긴다 */
.section01 > .slider-container > .slider-wrapper > .slider-items { float: none !important; width: 100% !important; height: auto !important; }
.section01 > .slider-container > .slider-wrapper > .slider-items.slider-clone { display: none !important; }
/* 순서: 전문가(1) → 우리 스스로(2) → 숨을 쉬다(3) → 매장찾기(4). 슬라이드 03 은 중앙·매장을 따로 놓기 위해 풀어 둔다 */
.section01 .h_slide01 { order: 1; }
.section01 .h_slide03, .section01 .h_slide03 > .left_area { display: contents; }
.section01 .h_slide03 > .center_area { order: 2; }
.section01 .h_slide02 { order: 3; }
.section01 .h_slide03 .bnr01 { order: 4; }
.section01 .h_slide03 .bnr02 { display: none !important; }
.section01 .h_slide01 > .left_area, .section01 .h_slide01 > .right_area,
.section01 .h_slide02 > .left_area, .section01 .h_slide02 > .right_area { display: none !important; }
.section01 .center_area { width: 100% !important; margin: 0 !important; background-color: transparent; }
.section01 .center_area .line, .section01 .s01_fix_img01, .section01 .s01_fix_img02, .section01 .s01_fix_img03 { display: none !important; }
/* ① 전문가가 만드는 바른 원칙 — 제목·설명 + 타일 4(사진 위에 원형 아이콘·글) */
.section01 .h_slide01 .center_area { padding: 28px 0 30px; }
.section01 .h_slide01 .center_area .txt_wrap { padding: 0 16px; }
.section01 .h_slide01 .bnr_tit { font-size: clamp(15px, 2.6vw, 21px); line-height: 1.4; letter-spacing: -.05em; }
.section01 .h_slide01 .bnr_txt { padding: 7px 0 13px; font-size: clamp(11px, 1.9vw, 15px); line-height: 1.5; letter-spacing: -.05em; word-break: keep-all; }
.section01 .h_slide01 .h_slide_list { width: 90.625%; margin: 0 auto; padding: 0; }
.section01 .h_slide01 .h_slide_list > li { position: relative; display: block; margin: 0; aspect-ratio: 580 / 150;
background: center / cover no-repeat; }
.section01 .h_slide01 .h_slide_list > li > img { display: none; }
.section01 .h_slide01 .h_slide_list > li:nth-child(1) { background-image: url(/uploads/mig_site/img/main/m_lyr1_li1_bg.jpg); }
.section01 .h_slide01 .h_slide_list > li:nth-child(2) { background-image: url(/uploads/mig_site/img/main/m_lyr1_li2_bg.jpg); }
.section01 .h_slide01 .h_slide_list > li:nth-child(3) { background-image: url(/uploads/mig_site/img/main/m_lyr1_li3_bg.jpg); }
.section01 .h_slide01 .h_slide_list > li:nth-child(4) { background-image: url(/uploads/mig_site/img/main/m_lyr1_li4_bg.jpg); }
.section01 .h_slide01 .h_slide_list > li:before { content: ""; position: absolute; top: 50%; transform: translateY(-50%);
width: 17.24%; aspect-ratio: 1 / 1; background: center / 100% 100% no-repeat; }
.section01 .h_slide01 .h_slide_list > li:nth-child(1):before { background-image: url(/uploads/mig_site/img/main/m_lyr1_li1_dec.png); }
.section01 .h_slide01 .h_slide_list > li:nth-child(2):before { background-image: url(/uploads/mig_site/img/main/m_lyr1_li2_dec.png); }
.section01 .h_slide01 .h_slide_list > li:nth-child(3):before { background-image: url(/uploads/mig_site/img/main/m_lyr1_li3_dec.png); }
.section01 .h_slide01 .h_slide_list > li:nth-child(4):before { background-image: url(/uploads/mig_site/img/main/m_lyr1_li4_dec.png); }
.section01 .h_slide01 .h_slide_list > li:nth-child(odd):before { left: 8.62%; }
.section01 .h_slide01 .h_slide_list > li:nth-child(even):before { right: 8.62%; }
.section01 .h_slide01 .h_slide_list > li .bnr_txt { position: absolute; top: 50%; transform: translateY(-50%); width: 60%; padding: 0;
font-size: clamp(12px, 2.1vw, 17px); line-height: 1.2; letter-spacing: -.05em; color: #fff; }
.section01 .h_slide01 .h_slide_list > li:nth-child(odd) .bnr_txt { left: 29.31%; text-align: left; }
.section01 .h_slide01 .h_slide_list > li:nth-child(even) .bnr_txt { right: 29.31%; text-align: right; }
/* ② 우리 스스로 합니다 — 어두운 사진 위 제목·설명 + 원 3개(그림에 캡션이 들어 있다) */
.section01 .h_slide03 > .center_area { padding: 9.2vw 0 10vw; background: #000 url(/uploads/mig_site/img/main/m_lyr2_bg.jpg) center / cover no-repeat; }
.section01 .h_slide03 > .center_area .txt_wrap { padding: 0 16px; }
.section01 .h_slide03 > .center_area .bnr_stit { display: none; }
.section01 .h_slide03 > .center_area .bnr_tit { padding: 0; font-family: 'NotoSansKR-Light', sans-serif; font-size: clamp(15px, 2.6vw, 21px); line-height: 1.5; letter-spacing: -.05em; color: #fff; }
.section01 .h_slide03 > .center_area .bnr_txt { padding-top: 12px; font-size: clamp(11px, 1.9vw, 15px); line-height: 1.45; letter-spacing: -.05em; color: #aaa; word-break: keep-all; }
.section01 .h_slide03 > .center_area .h_slide03_list { padding: 10vw 0 0; font-size: 0; text-align: center; }
.section01 .h_slide03 > .center_area .h_slide03_list > li { display: inline-block; width: 23.4375%; margin: 0 0 0 3.125%; border-radius: 50%; overflow: hidden; }
.section01 .h_slide03 > .center_area .h_slide03_list > li:first-child { margin-left: 0; }
.section01 .h_slide03 > .center_area .h_slide03_list > li img { display: block; width: 100%; height: auto; }
/* ③ 숨을 쉬다 — 사진 한 장 위에 글(원본은 사진 비율에 맞춘 좌표) */
.section01 .h_slide02 { margin: 30px 0; }
.section01 .h_slide02 > .center_area { width: 90.625% !important; margin: 0 auto !important; aspect-ratio: 580 / 400; overflow: hidden;
padding: 9.8% 0 0; background: #000 url(/uploads/mig_site/img/main/m_lyr3_bg.jpg) center / cover no-repeat; }
.section01 .h_slide02 .center_area .txt_wrap { padding: 0 16px; }
.section01 .h_slide02 .bnr_tit { padding: 0; font-size: clamp(15px, 2.6vw, 21px); line-height: 1.4; letter-spacing: -.05em; color: #fff; }
.section01 .h_slide02 .bnr_stit { padding-top: 7px; font-size: clamp(11px, 1.9vw, 15px); letter-spacing: -.05em; color: #fff; }
.section01 .h_slide02 .bnr_txt { padding-top: 14px; font-size: clamp(10px, 1.7vw, 14px); line-height: 1.5; letter-spacing: -.05em; color: #aaa; word-break: keep-all; }
/* ④ 매장찾기 — 흰 카드 안에 사진(왼쪽)·점포명(오른쪽) 한 줄 슬라이드 */
.section01 .h_slide03 .bnr01 { width: 90.625%; height: auto !important; margin: 0 auto 25px !important;
background: #fff url(/uploads/mig_site/img/main/m_store_bg.jpg) center / cover no-repeat; }
.section01 .h_slide03 .bnr01 .bnr_tit { padding: 14px 0 9px; font-size: clamp(15px, 2.6vw, 21px); letter-spacing: -.05em; color: #265445; text-align: center; }
.section01 .h_slide03 .store_slider { width: 86.2069%; height: auto; margin: 0 auto; }
.section01 .h_slide03 .store_slider .swiper-slide { height: auto; }
.section01 .h_slide03 .store_slider .swiper-container, .section01 .h_slide03 .store_slider .swiper-wrapper { height: auto !important; }
.section01 .h_slide03 .store_slider .swiper-slide a { display: grid; grid-template-columns: 46% minmax(0, 1fr); column-gap: 4%; grid-template-rows: auto 1fr; align-items: start; }
.section01 .h_slide03 .store_slider .store_img { grid-row: 1 / 3; width: auto; height: 21.875vw; background-size: cover; background-position: center; background-repeat: no-repeat; }
.section01 .h_slide03 .store_slider .store_name, .section01 .h_slide03 .store_slider .store_add { text-align: left; }
.section01 .h_slide03 .bnr01 .bnr_txt.store_name { margin: 0; padding: 14px 0 7px; font-size: clamp(11px, 1.9vw, 15px); letter-spacing: -.05em; color: #444; }
.section01 .h_slide03 .bnr01 .bnr_txt.store_add { padding: 0; font-size: clamp(10px, 1.7vw, 14px); line-height: 1.4; color: #666; }
.section01 .h_slide03 .store_slider .btn_wrap { position: relative; bottom: auto; margin-top: 8px; text-align: center; padding: 8px 0 14px; }
.section01 .h_slide03 .store_slider .btn_wrap .swiper-button-prev, .section01 .h_slide03 .store_slider .btn_wrap .swiper-button-next { top: 10px; right: auto; left: 50%; }
.section01 .h_slide03 .store_slider .btn_wrap .swiper-button-prev { margin-left: -34px; }
.section01 .h_slide03 .store_slider .btn_wrap .swiper-button-next { margin-left: 28px; }
.section01 .h_slide03 .store_slider .swiper-pagination { font-size: clamp(10px, 1.7vw, 14px); }
/* 하단 문의 — 원본 모바일 홈 본문에는 문의 블록이 없고 화면 아래 고정 바(bot_inq_m)만 있다. PC 의 본문 문의 블록은 접는다 */
.section01 .h_slide_btns { display: none !important; }
.s01_fix_area { display: none !important; }
}