@charset "utf-8";
/* ============================================================
   OneTheCode 모바일 PC미러 서브페이지 공통 (신규)
   ASCII 전용. main.css / main_pclike.css 뒤에 로드되어
   .m_sec / .m_sec_tit / .m_sec_desc 등 공통 토큰을 재사용한다.
   ============================================================ */

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

/* ===== 1. 인트로 (원더코드 소개) ===== */
.m_about_intro { text-align:center; }
.m_about_intro .pic img { width:100%; border-radius:14px; display:block; }
.m_about_intro .stit { margin-top:18px; font-size:13px; font-weight:700; color:#2ea7e0; letter-spacing:-.3px; }
.m_about_intro .tit  { margin:6px 0 14px; font-size:24px; font-weight:800; color:#222; line-height:1.3; }
.m_about_intro .tit .eng { font-size:15px; color:#888; font-weight:600; }
.m_about_intro .desc { font-size:13.5px; line-height:1.85; color:#666; }
.m_about_intro .desc b { color:#222; font-weight:700; }

/* ===== 2. 문제 / 솔루션 ===== */
.m_about_solution { background:#f7f8fa; }
.m_about_solution .label { display:table; margin:0 auto 16px; padding:6px 20px; border-radius:30px;
                           background:#2ea7e0; color:#fff; font-size:13px; font-weight:700; }
.m_about_solution ul { margin:0; padding:0; list-style:none; }
.m_about_solution li { margin-bottom:14px; padding:22px 18px; border-radius:14px; background:#fff;
                       box-shadow:0 3px 10px rgba(0,0,0,.06); text-align:center; }
.m_about_solution li:last-child { margin-bottom:0; }
.m_about_solution .q  { font-size:16px; font-weight:700; color:#222; margin-bottom:12px; line-height:1.4; }
.m_about_solution .p1 { font-size:13px; color:#999; line-height:1.6; }
.m_about_solution .ar { margin:9px 0; color:#2ea7e0; font-size:14px; }
.m_about_solution .p2 { font-size:13.5px; font-weight:600; color:#2b2b2b; line-height:1.65; }

/* ===== 3. 글로벌 파트너 (wiz_banner: sub_partner) ===== */
.m_about_partner ul { display:flex; flex-wrap:wrap; margin:0 -5px; padding:0; list-style:none;
                      align-items:center; justify-content:center; }
.m_about_partner li { flex:0 0 33.3333%; padding:6px 5px; box-sizing:border-box; }
.m_about_partner li a, .m_about_partner li span { display:flex; align-items:center; justify-content:center;
                      height:62px; padding:8px; border:1px solid #eee; border-radius:8px; background:#fff; }
.m_about_partner li img { max-width:100%; max-height:42px; }

/* ===== 4. Contact CTA ===== */
.m_about_contact { text-align:center; }
.m_about_contact .btns { display:flex; flex-direction:column; gap:10px; max-width:320px; margin:0 auto; }
.m_about_contact .btn { display:block; padding:15px; border-radius:10px; font-size:15px; font-weight:700; }
.m_about_contact .btn.tel { background:#2ea7e0; color:#fff; }
.m_about_contact .btn.qna { background:#fff; color:#2ea7e0; border:1.5px solid #2ea7e0; }

/* ===== 게시판 래퍼 (보물상자/이벤트) ===== */
/* 본문 목록은 게시판 모바일 스킨(skin_m/photoBasic_m)의 자체 style.css 가 담당.
   여기서는 클린 헤더와 어울리는 컨테이너/타이틀과 오버플로 방지만 제공한다. */
#main_container.m_board { max-width:640px; margin:0 auto; background:#fff; }
.m_board_head { padding:26px 18px 4px; text-align:center; }
.m_board_head .tit  { font-size:23px; font-weight:800; color:#222; line-height:1.3; }
.m_board_head .desc { margin-top:8px; font-size:13px; color:#8a8a8a; line-height:1.6; }
.m_board_body { padding:10px 12px 34px; }
.m_board_body img   { max-width:100%; height:auto; }
.m_board_body table { max-width:100%; }

/* ===== 약관/정책 (이용약관/개인정보처리방침/이메일무단수집거부) ===== */
#main_container.m_policy { max-width:640px; margin:0 auto; background:#fff; }
.m_policy_body { padding:4px 16px 36px; }
.m_policy a { color:#2ea7e0; }
.m_policy .policy_con { font-size:13px; color:#555; line-height:1.75; word-break:keep-all; }
.m_policy .cont_tit { margin:24px 0 8px; padding-bottom:7px; border-bottom:2px solid #2ea7e0;
                      font-size:15px; font-weight:700; color:#222; line-height:1.4; }
.m_policy .cont_txt, .m_policy .cont_txt2 { font-size:13px; color:#555; line-height:1.75; }
.m_policy .cont_box { margin:9px 0; padding:13px 15px; background:#f7f8fa; border-radius:8px;
                      font-size:12.5px; color:#666; line-height:1.72; }
.m_policy .cont_box strong { color:#333; }
.m_policy .privacy_list { margin:6px 0 20px; padding:14px 16px; background:#f7f8fa; border-radius:8px; list-style:none; }
.m_policy .privacy_list li { margin:4px 0; }
.m_policy .privacy_list a { font-size:13px; }

/* ===== 영재상담 설문폼 (survey) ===== */
#main_container.m_survey { max-width:640px; margin:0 auto; background:#fff; }
.m_survey_body { padding:6px 16px 40px; }
.m_survey .survey_con .hide { display:none; }
.m_survey .sub_stitle { font-size:17px; font-weight:700; color:#222; line-height:1.45; margin:6px 0 18px; text-align:center; }
.m_survey .sub_txt { font-size:13px; color:#888; line-height:1.6; text-align:center; }
.m_survey dl { margin:0 0 14px; }
.m_survey dt { font-size:13px; font-weight:700; color:#555; margin-bottom:6px; }
.m_survey .inp, .m_survey .inp_w, .m_survey .tear {
  width:100%; box-sizing:border-box; padding:13px 14px; border:1px solid #d8dde3; border-radius:9px;
  font-size:15px; color:#333; background:#fff; -webkit-appearance:none; }
.m_survey .inp:focus, .m_survey .tear:focus { border-color:#2ea7e0; outline:none; }
.m_survey .tear { line-height:1.6; resize:vertical; }
.m_survey .ar { display:flex; align-items:flex-start; gap:8px; margin:10px 0; padding:12px 14px;
  background:#f7f8fa; border-radius:9px; font-size:13px; color:#555; line-height:1.5; }
.m_survey .ar input[type=radio] { margin-top:2px; flex:0 0 auto; }
/* step3 관심분야 선택 카드 */
.m_survey .step_03 ul { margin:0; padding:0; list-style:none; }
.m_survey .step_03 li { position:relative; margin-bottom:11px; }
.m_survey .step_03 li input[type=radio] { position:absolute; top:18px; left:14px; margin:0; z-index:2; }
.m_survey .step_03 li .icon { padding:16px 16px 16px 40px; border:1.5px solid #e2e6ea; border-radius:11px; background:#fff; }
.m_survey .step_03 li input[type=radio]:checked + .icon { border-color:#2ea7e0; background:#f2faff; }
.m_survey .step_03 .title { font-size:15px; font-weight:700; color:#222; margin-bottom:3px; }
.m_survey .step_03 .sub_txt { font-size:12.5px; color:#888; text-align:left; }
/* 버튼 */
.m_survey .btn_wrap { margin-top:22px; }
.m_survey .btn { width:100%; box-sizing:border-box; padding:15px; border:0; border-radius:10px;
  background:#2ea7e0; color:#fff; font-size:16px; font-weight:700; cursor:pointer; -webkit-appearance:none; }
/* step5 완료 */
.m_survey .step_05 { text-align:center; padding:30px 0; }
.m_survey .step_05 .icon { width:64px; height:64px; margin:0 auto 18px; border-radius:50%;
  background:#2ea7e0 url('/img/barrow.png') no-repeat center/16px; }

@media all and (max-width:360px) {
  .m_about_intro .tit { font-size:21px; }
  .m_about_solution .q { font-size:15px; }
  .m_board_head .tit { font-size:20px; }
  .m_policy .cont_tit { font-size:14px; }
  .m_survey .sub_stitle { font-size:15px; }
}