@charset "utf-8";
/* ============================================================
   OneTheCode 모바일 메인 (PC 메인 구성 미러) - 신규
   ASCII 전용. 기존 EUC-KR main.css 와 분리 운영.
   ============================================================ */

#main_container.m_main { max-width:640px; margin:0 auto; background:#fff; }
.m_main img { max-width:100%; }
.m_main a { text-decoration:none; }

.m_sec { padding:32px 18px; }
.m_sec_tit { text-align:center; font-size:21px; font-weight:700; color:#2b2b2b; line-height:1.35; margin-bottom:8px; }
.m_sec_desc { text-align:center; font-size:13px; color:#8a8a8a; line-height:1.6; margin-bottom:22px; }

/* 1. 비주얼 배너 : CSS scroll-snap (라이브러리 없음) */
.m_visual { display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
            -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.m_visual::-webkit-scrollbar { display:none; }
.m_slide { flex:0 0 100%; scroll-snap-align:start; display:block;
           height:48vw; max-height:300px; background-size:cover; background-position:center; }
.m_slide_html { background:#f2f3f5; }

/* 2. 교육 3종 카드 - 가로 스크롤 (PC 카드 일러스트 main_b1~3.png 적용) */
/* 영역 약 75% 축소 (너무 강조되어 보여 톤다운) */
.m_edu { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory;
         -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:14px 12px; }
.m_edu::-webkit-scrollbar { display:none; }
.m_edu li { list-style:none; flex:0 0 80%; max-width:300px; scroll-snap-align:center; margin:0;
            display:flex; border-radius:16px; overflow:hidden; box-shadow:0 4px 11px rgba(0,0,0,.12); }
/* a 를 li 에 꽉 채워(flex:1) 카드 높이 균일 + 하단 흰 띠 제거. 글자색은 ID규칙(#main_container a) 상속 방지 위해 명시 */
.m_edu li a { flex:1; display:block; box-sizing:border-box; min-height:140px; padding:19px 18px; color:#fff !important; }
.m_edu li.c1 a { background:url('/img/main_b1.png') right bottom/auto 82% no-repeat, #00b4f9; }
.m_edu li.c2 a { background:url('/img/main_b2.png') right bottom/auto 88% no-repeat, #ed4043; }
.m_edu li.c3 a { background:url('/img/main_b3.png') right bottom/auto 70% no-repeat, #ffb400; }
.m_edu .t { font-size:17px; font-weight:700; color:#fff !important; margin-bottom:7px; }
.m_edu .d { font-size:11.5px; line-height:1.5; color:#fff !important; opacity:.97; max-width:62%; }
.m_edu .more { display:inline-flex; align-items:center; margin-top:13px; font-size:11px; font-weight:600;
               color:rgba(255,255,255,.92); letter-spacing:.5px; }
.m_edu .more img { width:5px; height:9px; margin-left:8px; }

/* 3. 플랫폼 6 아이콘 */
.m_platform { background:#f7f8fa; }
.m_platform ul { display:flex; flex-wrap:wrap; margin:0 -6px; }
.m_platform li { list-style:none; flex:0 0 33.3333%; padding:12px 6px; box-sizing:border-box; text-align:center; }
.m_platform li .ic { width:66px; height:66px; margin:0 auto 9px; border-radius:50%; overflow:hidden;
                     box-shadow:0 3px 8px rgba(0,0,0,.1); }
.m_platform li .ic img { width:100%; height:100%; object-fit:cover; }
.m_platform li p { font-size:12px; color:#555; font-weight:600; letter-spacing:-.3px; }
.m_platform .ptxt { text-align:center; margin-top:22px; }
.m_platform .ptxt b { display:block; font-size:19px; color:#2b2b2b; margin-bottom:10px; }
.m_platform .ptxt span { font-size:12.5px; color:#888; line-height:1.7; }

/* 4. 커리큘럼 */
.m_curri ul { display:flex; margin:0 -5px; }
.m_curri li { list-style:none; flex:1; padding:0 5px; text-align:center; }
.m_curri li .pic { border-radius:10px; overflow:hidden; margin-bottom:9px; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.m_curri li .pic img { width:100%; display:block; }
.m_curri li p { font-size:14px; font-weight:700; color:#444; }

/* 5. 글로벌 파트너 교육 (4 items) */
.m_edu2 { background:#1f2a44; }
.m_edu2 .m_sec_tit { color:#fff; }
.m_edu2 ul { display:flex; flex-wrap:wrap; margin:6px -7px 0; }
.m_edu2 li { list-style:none; flex:0 0 50%; padding:14px 7px; box-sizing:border-box; text-align:center; }
/* 아이콘 원본이 정사각형이 아니어서(예: main_icon08=57x73 세로형) width:100%만 주면
   높이가 auto로 60px를 넘쳐 제목을 침범한다. 60x60 박스 안에 비율유지로 가둔다. */
.m_edu2 li .ic { width:60px; height:60px; margin:0 auto 10px; display:flex; align-items:center; justify-content:center; }
.m_edu2 li .ic img { max-width:100%; max-height:100%; width:auto; height:auto; }
.m_edu2 li .t { font-size:14px; font-weight:700; color:#fff; margin-bottom:6px; }
.m_edu2 li .d { font-size:11.5px; color:#c4cbe0; line-height:1.5; }

/* 6. 후기 */
.m_review { background:#f7f8fa; }
.m_review .rvwrap { overflow:hidden; }
.m_review .rvwrap div { font-size:13.5px; color:#444; line-height:1.7; }
.m_review .rvwrap p.tit { font-size:14px; color:#333; line-height:1.7; }
.m_review .rvwrap p.name { margin-top:10px; font-size:12px; color:#999; text-align:right; }

/* 7. 파트너 로고 */
.m_partner ul { display:flex; flex-wrap:wrap; margin:0 -5px; align-items:center; justify-content:center; }
.m_partner li { list-style:none; flex:0 0 33.3333%; padding:6px 5px; box-sizing:border-box; text-align:center; }
.m_partner li a, .m_partner li span { display:flex; align-items:center; justify-content:center;
                     height:64px; border:1px solid #eee; border-radius:8px; padding:8px; background:#fff; }
.m_partner li img { max-width:100%; max-height:44px; }

@media all and (max-width:360px) {
  .m_sec { padding:28px 14px; }
  .m_sec_tit { font-size:19px; }
  .m_edu .t { font-size:15px; }
  .m_platform li p { font-size:11px; }
}