## { } ## > .dialog { } ## > .dialog > .title { } ## > .dialog > .title > span { } ## > .dialog > .title > span > img { vertical-align: top; } @media all and (min-height: 480px) and (min-width: 740px) { ## { --section-col-gap: var(--basic-ui-inset-h); } ## > .dialog { min-width: min(720px, var(--full-width)); max-width: min(860px, var(--full-width)); } } ## > .dialog > .topBlock { } ## > .dialog > .topBlock > .dynamic_section_host { } ## > .dialog > .topBlock > .dynamic_section_host > .host_item { } ## > .dialog > .topBlock > .dynamic_section_host > .host_item > .count_indic { color: var(--color-text-lighten); font-size: 0.875rem; font-weight: 300; } ## > .dialog > .topBlock > .dynamic_section_host > .host_item > .count_indic > .count { } ## > .dialog > .topBlock > .dynamic_section_host > .host_item > .count_indic > .count:not([data-unread=""]) { color: var(--color-mango-red-dark); } ## > .dialog > .dynamic_section_block { font-size: 0.875rem; } ## > .dialog > .dynamic_section_block > .block_item { display: flex; flex-flow: column nowrap; padding: var(--basic-ui-inset-v-half) 0; } ## > .dialog > .dynamic_section_block > .block_item > .noti_list { } ## > .dialog > .dynamic_section_block > .block_item > .noti_list > button { --flow-bg-color: rgb(var(--cbbry) / 60%); } ## > .dialog > .dynamic_section_block > .block_item[data-id="mengoEdu"] { } ## > .dialog > .dynamic_section_block > .block_item[data-id="classes"] { }
  중요 공지
망고에듀 공지 (0)
학원 별 공지 (0)
## { } ## > .dialog { } ## > .dialog > .message.lines_block { flex-shrink: 1; justify-content: flex-start; align-items: flex-start; font-size: 0.875rem; text-align: left; line-height: 1.375rem; overflow: auto; } ## > .dialog > .message > * { } ## > .dialog > .message > .from { color: var(--color-text-darker); } ## > .dialog > .message > .title { color: var(--color-text-lighten); font-size: 1rem; line-height: 1.5rem; } ## > .dialog > .message > .time { color: var(--color-text-lightness); font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; } ## > .dialog > .message > .content { } @media all and (min-height: 480px) and (min-width: 740px) { ## > .dialog { min-width: min(720px, var(--full-width)); max-width: min(480px, var(--full-width)); } }
공지 내용 보기
작성
제목
최종수정  일시
내용
## { } ## > .dialog { } @media all and (min-height: 480px) and (min-width: 740px) { ## { --section-col-gap: var(--basic-ui-inset-h); } ## > .dialog { min-width: min(720px, var(--full-width)); max-width: min(860px, var(--full-width)); } } ## > .dialog > .dynamic_section_block { font-size: 0.875rem; } ## > .dialog > .dynamic_section_block > .block_item { display: flex; flex-flow: column nowrap; padding: 24px 0 var(--basic-ui-inset-v-half); row-gap: var(--basic-ui-inset-v-half); } ## > .dialog > .dynamic_section_block > .block_item[data-id="calendar"] { } ## .menu_block { --margin-inline: 0; } ## .menu_block:not(:first-child) { margin-top: 36px; } ## .menu_block > label { } ## .menu_block > div { } ## .menu_block > div > label { } ## .menu_block > hr { } @media all and (min-height: 480px) and (min-width: 740px) { ## .menu_block { --margin-inline: var(--basic-ui-inset-h); } ## .menu_block .tp_tiled_btn { padding-inline: var(--basic-ui-inset-h); } } ## > .dialog > .dynamic_section_block > .block_item[data-id="origins"] { } ## ul.each_origin_list { display: flex; flex-flow: column nowrap; list-style: none; margin: 0; padding: 0; row-gap: var(--basic-ui-inset-v-quarter); } ## ul.each_origin_list > li.origin_holder { } ## ul.each_origin_list > li.origin_holder > .origin { display: flex; flex-flow: row nowrap; min-height: 42px; column-gap: var(--basic-ui-inset-h); justify-content: space-between; align-items: center; } ## ul.each_origin_list > li.origin_holder > .origin > .side_bound { display: flex; flex-flow: row nowrap; column-gap: var(--basic-ui-inset-h); align-items: center; } ## ul.each_origin_list > li.origin_holder > .origin > .side_bound.left_side { flex-shrink: 0; color: var(--color-text-darker); font-weight: 300; } ## ul.each_origin_list > li.origin_holder > .origin > .side_bound.right_side { } ## ul.each_origin_list > li.origin_holder > .origin > .side_bound > * { flex-shrink: 0; } ## ul.each_origin_list > li.origin_holder > .origin > .side_bound > span { } ## ul.each_origin_list > li.origin_holder > .origin > .side_bound > span.name { } ## ul.each_origin_list > li.origin_holder > .origin > .side_bound > ul.allergyList { display: flex; flex-flow: row wrap; list-style: none; flex-shrink: 1; margin: 0; padding: 0; row-gap: var(--basic-ui-inset-h-quarter); column-gap: var(--basic-ui-inset-h-half); justify-content: flex-end; lign-items: center; font-size: 0.75rem; font-weight: 200; } ## ul.each_origin_list > li.origin_holder > .origin > .side_bound > ul.allergyList > li { } ## ul.each_origin_list > li.origin_holder > .origin > .side_bound > button { align-self: stretch; font-weight: 400; } ## ul.each_origin_list > li.origin_holder > .origin > .side_bound > button.allergy { padding-inline: var(--basic-ui-inset-h-half); } ## ul.each_origin_list > li.origin_holder > .origin > .side_bound > button.color { } ## ul.each_origin_list > li.origin_holder > .origin > .side_bound > button.color > .color_indic { width: 36px; min-height: 24px; margin: 4px; border: solid 3px var(--color-boundary-bright); border-radius: 6px; background-color: var(--color); } @media all and (min-height: 480px) and (min-width: 740px) { ## ul.each_origin_list > li.origin_holder > .origin { padding-inline: var(--basic-ui-inset-h); } }
캘린더 설정
기본 설정
개별 설정
  • 내 스케줄
    • |category|
  • |name|
    • |category|
망고에듀 아이디 찾기
망고에듀 학생·학부모용 앱에 가입된 이름과 전화번호를 입력하신 후 아래 [아이디 요청하기]의 버튼을 누르시면 해당 전화번호로 가입된 ID가 문자로 발송됩니다
2글자 이상
는 쓸 수 없어요
11자리

아이디 요청하기

망고에듀 비밀번호 찾기
망고에듀 학생·학부모용 앱에 가입된 ID와 이름 및 전화번호를 입력하신 후 아래 [임시 비밀번호 요청하기]의 버튼을 누르시면 해당 전화번호로 새로 변경된 임시 비밀번호가 문자로 발송됩니다
망고 클래스에서 한번이라도 정상 로그인 하신 경우 새 임시 비밀번호가 발급되어도 적용되지 않으므로 위의 본인인증을 통해 진행해주세요.
는 쓸 수 없어요
영문
숫자
포함
4자리 이상
2글자 이상
는 쓸 수 없어요
11자리

임시 비밀번호 요청하기

## > .dialog { } ## > .dialog > .content { } ## > .dialog > .content > .mainBox > hr { margin: var(--basic-ui-inset-half) 0; background-color: var(--color-boundary-o10); } ## > .dialog > .content > .mainBox > ul.homeSelection { height: 48px; } ## > .dialog > .content > .mainBox > ul.homeSelection > li { } ## > .dialog > .content > .mainBox > ul.homeSelection > li > button { font-size: 1rem; font-weight: 200; align-items: center; text-align: center; } ## > .dialog > .content > .mainBox > ul.homeSelection > li > button[data-selected="1"] { font-weight: 500; }
홈 화면 설정
앱 시작 시 보여질 탭을 정할 수 있어요
비밀번호 변경
본인인증을 진행하신 후 설정할 비밀번호를 입력하시고/본인인증 또는 현재 비밀번호를 입력 중 하나를 선택하여 진행하신 후 새 비밀번호를 입력하시고 [비밀번호 변경하기] 버튼을 눌러주세요
▼ 기존 비밀번호를 입력하시거나, 기억나지 않는 경우 ▲ 본인인증을 진행하세요.
는 쓸 수 없어요
비밀번호의 길이는 6자 이상이예요
본인인증 또는 현재 비밀번호 입력 시 아래의 새 비밀번호 입력란이 활성화됩니다.
현재 비밀번호와 동일한 비밀번호예요
는 쓸 수 없어요
영문
숫자
특수문자
포함
8자리 이상
사용가능한 특수문자 ! @ # $ % * ? \ - _
비밀번호의 길이가 달라요
오타를 확인하세요
이름 변경 (개명) / 휴대폰번호 변경
아래 버튼을 눌러 본인인증을 완료하시면 해당 본인인증 기관으로부터 새로 개명된 이름 또는 변경된 휴대폰번호를 받아 업데이트 됩니다
본인인증기관에 개명 내용이 적용되어 있어야 해당 정보로 변경됩니다.
본인인증기관: NICE아이디 (NICE평가정보)
휴대폰번호 변경 시 변경할 휴대폰번호로 본인인증을 진행해 주세요.
이름 및 휴대폰번호 동시 변경 시 한번에 처리됩니다.
본인인증 완료 시 변경된 이름/휴대폰번호로 자동 적용됩니다.
회원탈퇴
아래 버튼을 눌러 본인인증을 완료하신 후 회원 탈퇴를 진행하실 수 있어요
## > .dialog { max-width: 629px; } ## > .dialog > .content > hr.bold { margin: 24px 0; } ## > .dialog > .content > ul.allergyCategories { display: flex; flex-flow: row wrap; list-style: none; margin: 0; padding: 0 var(--basic-ui-inset-h); gap: 12px; user-select: none; } ## > .dialog > .content > ul.allergyCategories > li { } ## > .dialog > .content > ul.allergyCategories > li > label { cursor: pointer; } ## > .dialog > .content > ul.allergyCategories > li > label > div { position: relative; display: flex; flex-flow: column nowrap; width: calc((100vw - var(--left-pad) - var(--right-pad) - (var(--basic-ui-inset-h) * 2) - (12px * 3)) / 4); max-width: 75px; aspect-ratio: 1; box-sizing: border-box; padding: 0 12px; border: solid 1px #E0E0E0; border-radius: 100%; outline: solid 3px transparent; justify-content: center; align-items: center; word-break: keep-all; text-align: center; transition-timing-function: ease; transition-duration: 0.2s; will-change: auto; } ## > .dialog > .content > ul.allergyCategories > li > label > div:has(> input:checked) { outline-color: var(--color-mango-red-dark); outline-offset: -1px; color: var(--color-mango-red-dark); } ## > .dialog > .content > ul.allergyCategories > li > label > div::after { content: ''; position: absolute; top: -3px; right: 7%; width: 20px; aspect-ratio: 1; border-radius: 100%; background-color: var(--color-mango-red-dark); background-image: var(--svg-tiny-icon-check); background-position: center 54%; background-repeat: no-repeat; transition-timing-function: ease; transition-duration: 0.2s; will-change: auto; } ## > .dialog > .content > ul.allergyCategories > li > label > div:not(:has(> input:checked))::after { opacity: 0; } ## > .dialog > .content > ul.allergyCategories > li > label > div > input { position: absoulte; width: 0; height: 0; margin: 0; opacity: 0; } ## > .dialog > .content > ul.allergyCategories > li > label > div > span { } ## > .dialog > .content > ul.allergyCategories > li > label > div > span.category { font-size: 0.875rem; font-weight: 500; } ## > .dialog > .content > ul.allergyCategories > li > label > div > span.desc { color: var(--color-text-lightness); font-size: 0.75rem; } ## > .dialog > .content > ul.allergyCategories > li > label > div:has(> input:checked) > span.desc { color: rgb(var(--cmrd) / 75%); } ## > .dialog > .content > .block_box { margin: 24px var(--basic-ui-inset-h) 0; }
알레르기 항목 설정

아이에게 해당하는 알레르기 유발 식재료를 모두 선택해주세요

알레르기 식재료가 포함된 메뉴는 빨간색으로 표시돼요. 일부 학교에서는 관련 정보가 제공되지 않을 수 있어요.
## > .dialog { max-width: 373px; } ## > .dialog > .content > ul.tagColors { display: flex; flex-flow: row wrap; list-style: none; margin: 20px 0 0; padding: 0 var(--basic-ui-inset-h); gap: 20px; user-select: none; } ## > .dialog > .content > ul.tagColors > li { } ## > .dialog > .content > ul.tagColors > li > label { cursor: pointer; } ## > .dialog > .content > ul.tagColors > li > label > div { position: relative; display: flex; flex-flow: column nowrap; width: calc((100vw - var(--left-pad) - var(--right-pad) - (var(--basic-ui-inset-h) * 2) - (20px * 5)) / 6); max-width: 40px; aspect-ratio: 1; box-sizing: border-box; padding: 0 12px; border-radius: 30%; justify-content: center; align-items: center; background-color: var(--color); transition-timing-function: ease; transition-duration: 0.2s; will-change: auto; } ## > .dialog > .content > ul.tagColors > li > label > div::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-image: var(--svg-icon-check); background-position: 48% 48%; background-repeat: no-repeat; transition-timing-function: ease; transition-duration: 0.2s; will-change: auto; } ## > .dialog > .content > ul.tagColors > li > label > div:not(:has(> input:checked))::after { opacity: 0; } ## > .dialog > .content > ul.tagColors > li > label > div > input { position: absoulte; width: 0; height: 0; margin: 0; opacity: 0; } ## > .dialog > .content > .block_box { margin: 24px var(--basic-ui-inset-h) 0; }
색상 선택
색상을 선택하세요
한글(초성제외)/영어
로
2글자 이상
한글/영문
로
2글자 이상
## > .dialog { min-height: 40vh; padding-bottom: 0; } ## > .dialog > .content > ul.mango_edu_class_list { margin-top: 16px; padding: 8px 0 var(--bottom-safe-pad); height: -moz-available; height: -webkit-fill-available; height: stretch; overflow-y: auto; } ## > .dialog > .content > ul.mango_edu_class_list > li { } ## > .dialog > .content > ul.mango_edu_class_list > li > .class_assignable { } ## > .dialog > .content > ul.mango_edu_class_list > li > .class_assignable span.assigned_child_name:not(:empty)::before { content: '\A0⏩\A0'; }

  • |name|

    |studentName|     |childName|     |address| |tel|