@charset "UTF-8";

body {
    overflow-y: scroll;
}

.mobile_wr {
    max-width: var(--body_width);
    margin: 0 auto;
}


.mark_list li {
    list-style: none;
    margin-bottom: 0.6rem;
    display: flex;
    word-break: keep-all;
    line-height: 120%;
}

.mark_list li * {
    word-break: keep-all;
}

.mark_list li:before {
    content: "※";
    vertical-align: middle;
    margin-right: 0.5rem;
}

.mark_list li:last-child {
    margin-bottom: 0;
}

/* bar */
.bar {
    height: 0.5rem;
    background-color: var(--gray-100);
}

.loading_float {
    display: none;
    position: fixed;
    top: 0;
    left: 50%;
    max-width: var(--body_width);
    background: transparent;
    width: 100%;
    z-index: 1000;
    height: 100%;
    transform: translateX(-50%);
}

.loading_float.show {
    display: block;
}

.loading_round {
    position: fixed;
    background: #fff;
    width: 5.2rem;
    height: 5.2rem;
    position: fixed;
    top: 13.4rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 0 1.6rem rgba(0, 0, 0, 0.2);
}

.loading_round .spinner-border {
    color: var(--secondary);
    border-right-color: #E9E9E9;
    width: 2.4rem;
    height: 2.4rem;
    border-width: 0.35rem;
}

/*버튼*/
.bottom_btn {
    position: fixed;
    left: 50%;
    bottom: 0;
    width: 100%;
    max-width: var(--body_width);
    transform: translateX(-50%);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 1040;
}

.bottom_btn .btn_wrap {
    padding: 5.0rem 1.5rem 1.0rem;
    background: linear-gradient(180deg, transparent 0, #fff 30%);
    position: relative;
}

.bottom_btn .spc_bubble {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate3d(-50%, -4.0rem, 0);
    width: 100%;
}


.go_top {
    width: 5.2rem;
    height: 3.6rem;
    background: url(../img/gotop_btn.png) no-repeat center;
    background-color: rgba(0, 0, 0, 0.06);
    background-size: 1.9rem auto;
    z-index: 1000;
    border-radius: 2.0rem;
    display: none;
    position: fixed;
    right: 50%;
    bottom: 1.0rem;
    transform: translateX(27.2rem);
    backdrop-filter: blur(3px);
}

.go_top.show {
    display: block;
}

.zd_2 {
    position: relative;
    z-index: 2;
}

.zd_3 {
    position: relative;
    z-index: 3;
}

.icon90 {
    width: 9.0rem;
    flex-shrink: 0;
}

.icon80 {
    width: 8.0rem;
    flex-shrink: 0;
}

.icon70 {
    width: 7.0rem;
    flex-shrink: 0;
}

.icon60 {
    width: 6.0rem;
    flex-shrink: 0;
}

.icon52 {
    width: 5.2rem;
    flex-shrink: 0;
}

.icon50 {
    width: 5.0rem;
    flex-shrink: 0;
}

.icon44 {
    width: 4.4rem;
    flex-shrink: 0;
}

.icon40 {
    width: 4.0rem;
    flex-shrink: 0;
}

.icon38 {
    width: 3.8rem;
    flex-shrink: 0;
}

.icon36 {
    width: 3.6rem;
    flex-shrink: 0;
}

.icon34 {
    width: 3.4rem;
    flex-shrink: 0;
}

.icon32 {
    width: 3.2rem;
    flex-shrink: 0;
}

.icon30 {
    width: 3.0rem;
    flex-shrink: 0;
}

.icon28 {
    width: 2.8rem;
    flex-shrink: 0;
}

.icon26 {
    width: 2.6rem;
    flex-shrink: 0;
}

.icon24 {
    width: 2.4rem;
    flex-shrink: 0;
}

.icon22 {
    width: 2.2rem;
    flex-shrink: 0;
}

.icon21 {
    width: 2.1rem;
    flex-shrink: 0;
}

.icon20 {
    width: 2.0rem;
    flex-shrink: 0;
}

.icon18 {
    width: 1.8rem;
    flex-shrink: 0;
}

.icon16 {
    width: 1.6rem;
    flex-shrink: 0;
}

.icon15 {
    width: 1.5rem;
    flex-shrink: 0;
}

.icon14 {
    width: 1.4rem;
    flex-shrink: 0;
}

.icon13 {
    width: 1.3rem;
    flex-shrink: 0;
}

.icon12 {
    width: 1.2rem;
    flex-shrink: 0;
}

.icon_shadow {
    filter: drop-shadow(0 0.3rem 0.6rem rgba(254, 103, 110, 0.49));
}

.btn_roudned {
    height: 4.0rem;
    width: 4.0rem;
    border: 1px solid var(--border);
    border-radius: 50%;
    z-index: 3;
    position: relative;
    padding: 0;
    flex-shrink: 0;
    background: #fff;
}

.btn_roudned:hover {
    background: var(--light);
}

/* 공용 로딩 모달 전체 영역 */
.loading-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    z-index: 10500;
    /* 부트스트랩 modal 보다 같거나 크게 조정 가능 */
}

/* 반투명 배경 */
.loading-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.4);
    /*background: rgba(0, 0, 0, 0.4);*/
}

/* 가운데 스피너 박스 */
.loading-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

/* 텍스트 스타일 (필요에 따라 조정) */
.loading-text {
    margin-top: 10px;
    font-size: 14px;
    color: #000000;
}


/* 헤더 */


.hd_m .logo img {
    width: 8.513rem;
    display: flex;
}

.hd_m .logo {
    padding-right: 1.5rem;
    border-right: 1px solid #E3E3E3;
    margin-right: 1.5rem;
}

.hd_m .log_txt {
    font-size: 1.4rem;
    padding-left: 0.5rem;
}

.hd_m .log_txt span {
    padding: 0 0.5rem;
}

.hd_m button {
    border: 0;
    background: transparent;
    flex-shrink: 0;
}

.hd_m button>img {
    height: 2.4rem;
}

.hd_m .hd_btn,
.modal-header .hd_btn {
    min-width: 5.8rem;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 1.5rem;
}

.hd_m button.top_alim {
    position: relative;
}

.hd_m button.top_alim img {
    width: 3.6rem;
    height: auto;
}

.hd_m button.top_alim span {
    background: #F45959;
    display: none;
    position: absolute;
    right: 0.4rem;
    top: 0.4rem;
    border-radius: 1.0rem;
    width: 0.6rem;
    height: 0.6rem;
}

.hd_m button.top_alim span.active {
    display: block;
}

.hd_m img {
    flex-shrink: 0;
}

.hd_m .sch_ip {
    background: rgba(255, 255, 255, 0.1);
    border: 0;
}

.hd_m .sch_ip button {
    width: 3.0rem;
}

.hd_m .sch_ip button>img {
    height: auto;
}

.hd_m .sch_ip .form-control {
    height: 4.0rem;
}


.hd_transparent {
    background: transparent;
}

.hd_menu {
    position: fixed;
    left: 50%;
    top: 1.4rem;
    width: 2.5rem;
    z-index: 1000;
    transform: translateX(24.6rem);
}

/* 모바일 메뉴 */
.hd_menu_btn {
    font-size: 2rem;
}

.m_menu_wr {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    max-width: var(--body_width);
    z-index: 99999;
    transition: all 0.5s ease-in-out;
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
    transform: translateX(-50%);
}

/* x버튼 */
.close_btn_wr {
    display: none;
    opacity: 0;
}

.m_nav .close_btn_wr {
    display: flex;
    justify-content: flex-end;
    opacity: 0;
}

.menu_on .m_nav .close_btn_wr {
    opacity: 1;
}

.close_btn {
    font-size: 2rem;
    border: 0;
    height: auto;
}

.close_btn img {
    width: 3.0rem;
}

/* 메뉴 열렸을때 외부 */
.menu_on .m_menu_wr {
    visibility: visible;
    opacity: 1;
}

.m_nav {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: #fff;
    transition: all 0.4s ease-in-out;
    max-width: 0;
    transform: translateX(100%);
    visibility: hidden;
    opacity: 0;
}

.menu_on .m_nav {
    transform: translateX(0%);
    visibility: visible;
    opacity: 1;
    max-width: var(--body_width);
    width: 80%;
}

.menu_bg {
    position: fixed;
    left: 50%;
    top: 0;
    background: rgba(0, 0, 0, 0.6);
    transition: all 0.4s ease-in-out;
    width: 100%;
    height: 100%;
    z-index: 99998;
    visibility: hidden;
    opacity: 0;
    transform: translateX(-50%);
    max-width: var(--body_width);
}

.menu_on .menu_bg {
    visibility: visible;
    opacity: 1;
}

/* 메뉴 열렸을때 내부 */
.m_nav .nav_wr {
    height: auto;
}

.m_nav .nav_ul {
    display: block;
}

.m_nav .nav_li {
    height: 100%;
    position: relative;
}

.m_nav .nav_a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 1.2rem 1.6rem;
}

.m_nav .nav_a i {
    display: inline-block;
}

.m_nav .nav_a img {
    width: 2.0rem;
}

.m_nav .nav_ul2 {
    display: none;
    background: var(--light);
}

.m_nav .nav_ul2 a {
    display: block;
    padding: 1.2rem 1.6rem;
    white-space: nowrap;
}



/*검색*/
.sch_ip {
    display: flex;
    background: #fff;
    padding: 0 1.5rem;
    border-radius: 1.2rem;
    border: 1px solid var(--border-200);
    height:4.6rem;
}

.sch_ip .form-control {
    height: 4.6rem;
    padding: 0.5rem 0;
    margin-right: 1.0rem;
}

.sch_ip .form-control:focus {
    background-color: transparent;
}

.sch_ip button {
    width: 1.6rem;
    height: 1.6rem;
    border: 0;
    background: transparent;
}


/* IE의 경우 */
.sch_ip .form-control::-ms-clear,
.sch_ip .form-control::-ms-reveal {
    display: none;
}

/* 크롬의 경우 */
.sch_ip .form-control::-webkit-search-decoration,
.sch_ip .form-control::-webkit-search-cancel-button,
.sch_ip .form-control::-webkit-search-results-button,
.sch_ip .form-control::-webkit-search-results-decoration {
    display: none;
}

/*회색 검색*/
.sch_gray.sch_ip {
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
}
/* iOS search 내장 요소 제거(특히 cancel 버튼) */
#search_txt::-webkit-search-decoration,
#search_txt::-webkit-search-cancel-button,
#search_txt::-webkit-search-results-button,
#search_txt::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

input[type="search"] {
    -webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/*새로운 input 스타일*/
.form_box {
    border: 1px solid var(--border);
    border-radius: 1.2rem;
    padding-left: 2.0rem;
    padding-right: 2.0rem;
    display: flex;
    height: var(--height_lg);
    align-items: center;
}

.form_box .form-control {
    flex: 1 1 auto;
    height: auto;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.form_box .form_time {
    display: none;
}

.ip_box .ip_valid {
    display: none;
}

.ip_box.ip_valid .ip_valid {
    display: block;
}

.form_box .btn-sm {
    min-width: 6.0rem;
}

.form_box.disabled {
    background: var(--gray-50);
}

.form_box.disabled .form-control {
    background: var(--gray-50);
    color: var(--gray-300);
}

/*노데이터*/
.result_data {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.result_data img {
    width: 8.0rem;
}


/*공지사항*/
/*.board_list li0.1remdding:1.5rem 0;border-bottom:1px solid var(--gray-200);}*/


/*마이페이지*/
.wrap.mypg {
    background-image: url(../img/mypg_back_img.png);
    background-size: cover;
    background-position: 0 130px;
    background-repeat: no-repeat;
}

.mypg_pf {}

/* 교사 인증 마크 */
.certify_box {
    padding: 3px;
}

/* 프로필 이미지 */
.mypg_profile {
    max-width: 7.0rem;
}

.mypg_profile .setting {
    position: relative;
    display: inline-block;
    max-width: 7.0rem;
    height: 100%;
}

.mypg_profile .setting .setting_icon {
    position: absolute;
    bottom: -3px;
    right: 5px;
    display: inline-block;
    width: 2.2rem;
}

/* 프로필 정보 */
.my_info .my_info_cont {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 1rem;
    box-shadow: 0 0 0.5rem rgba(89, 136, 255, 0.15);
}

.my_info_cont>div,
.my_info_cont .btn {
    width: 6rem;
    padding: 0;
}

.my_info_cont.cont2 .btn img {
    max-width: 2.8rem;
}

.magazine {
    position: relative;
}

.magazine .qa_speech_bubble {
    position: absolute;
    top: auto;
    bottom: -80%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    border-radius: 0;
    white-space: nowrap;
    padding: 0;
    background: transparent;
    min-width: fit-content;
}

.magazine .qa_speech_bubble p {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    background: linear-gradient(270deg, #BCF5FF, #6C97FF 60%);
    width: 100%;
    min-width: fit-content;
    border-radius: 5rem;
    padding: 0.6rem 0.9rem 0.4rem;
}

.magazine .qa_speech_bubble img {
    rotate: 180deg;
    top: -30%;
    left: 50%;
    transform: translateX(50%);
    z-index: -10;
}

.card {
    border-radius: 1.5rem;
    overflow: hidden;
    border: 0;
}

/* 마이페이지 리스트 */
.mypg_list {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 1.2rem;
    box-shadow: 0 0 0.5rem rgba(89, 136, 255, 0.15);
    padding: 1rem 1.5rem;
}

.mypg_list li a {
    display: flex;
    gap: 1.2rem;
    padding: 1.2rem 0;
}

.service_menu {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    padding: 1.6rem 1.6rem 1.6rem 3.4rem;
    border-radius: 1.2rem;
    background-color: var(--primary-light);
}

/* 로그아웃 */
.btn.logout {
    padding: 0;
    color: var(--gray);
    font-size: 1.4rem;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    height: auto;
    float: right;
    padding: 30px 0 105px;
}

/* 마이페이지 프로필 설정 */
.mypage_profile_edit .teacher_style_list .checks .ic_box {
    color: var(--gray)
}

.bg_blur {
    backdrop-filter: blur(4px);
    background-color: rgba(255, 255, 255, 0.9) !important;
}

/* 마이페이지 포인트 */
.point_info {
    padding: 1.5rem;
    background-color: white;
    border: 1px solid var(--primary-200);
    color: var(--primary-200);
    border-radius: 1rem;
    text-align: center;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.my_point {
    background-image: url(/assets/img/point_img.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: right;
    background-color: #6C97FF;
    border-radius: 1.2rem;
    padding: 0 2rem;
    height: 10rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    color: white;
}

.point_list li {
    border-bottom: 0.1rem solid var(--gray-200);
}

/* 마이페이지 내가 쓴 글 - 질문·답변 */
.my_write_list li {
    border-bottom: 0.1rem solid var(--gray-100);
    padding: 1.5rem 1.6rem;
}

/* 마이페이지 내가 쓴 글 - 매거진 */
.my_magazine li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 1.6rem;
    border-bottom: 0.1rem solid var(--gray-50);
}

.my_magazine .thumbnail {
    width: 11rem;
    height: 11rem;
    border-radius: 1.2rem;
    flex-shrink: 0;
}

.my_magazine .warm_box p,
.my_magazine .help_box p,
.review_list .warm_box p,
.review_list .help_box p {
    color: var(--gray-600);
}

/* 마이페이지 내가 쓴 글 - 혜택 */
.benefit .benefit_list {
    padding: 1.6rem;
    border-bottom: 0.1rem solid var(--gray-50);
}

.location_ic {
    filter: invert(23%) sepia(16%) saturate(700%) hue-rotate(179deg) brightness(91%) contrast(94%);
    padding-bottom: 0.3rem;
}

.benefit .review_image ul li {
    border: 0.1rem solid #D2D8E8;
}

/* 마이페이지 내가 쓴 글 - 후기·정보 */
.review .review_list {
    padding: 1.6rem;
    border-bottom: 0.1rem solid var(--gray-50);
}

/* 마이페이지 북마크 - 혜택 */
.boon_category_list ul

/* 마이페이지 매거진 구독 */
.my_mag_list {}

.my_mab_profile {
    max-width: 4.8rem;
    width: 100%;
}

.my_mag_list .my_mag_tit {
    padding: 2rem 1.6rem 1.6rem;
    background-color: #F4F6FA;
}

/* 이벤트 및 공지 */
/* 이벤트 */
.event_list {}

.event_view_top,
.notice_list li,
.notice_view_top {
    border-bottom: 0.1rem solid var(--gray-100);
}

.event_view.sub_pg {
    padding-bottom: 8.4rem;
}

.event_end_badge.badge {
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 100%;
    border-radius: 20px;
}

.list_back_btn.btn {
    height: 4.1rem;
    padding-left: 2.4rem;
    padding-right: 2.4rem;
}

/*푸터*/
.ft {
    padding: 2.5rem 0 5rem !important;
}

.ft .fnb .line {
    width: 1px;
    background: var(--gray-600);
    margin: 0 1.0rem;
}

.ft .left_info .col-3 {
    min-width: 12rem;
}

/*하단메뉴*/
.bt_menu {
    width: calc(100% + 2px);
    max-width: var(--body_width);
    /* background: #fff; */
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(1.5rem);
    -webkit-backdrop-filter: blur(1.5rem);
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: block;
    box-shadow: 0 -0.4rem 2.0rem rgba(0, 0, 0, 0.06);
}
.is_ios_app .bt_menu {padding-bottom: max(calc(env(safe-area-inset-bottom) - 2rem),0px);}
/* .is_ios_app .bt_menu {padding-bottom: env(safe-area-inset-bottom);} */
/* .is_ios_app .bt_menu {padding-bottom: calc(env(safe-area-inset-bottom) + 15px);} */
/* .is_ios_app .bt_menu {padding-bottom: min(env(safe-area-inset-bottom), 1.5rem);} */

.bt_menu ul {
    display: flex;
    justify-content: center;
    /*justify-content: space-between;*/
    align-items: center;
    text-align: center;
    height: 7.0rem;
}

.bt_menu ul li {
    /*width:20%;*/
    width: 18%;
    height: 100%;
}

.bt_menu ul li a {
    display: flex;
    color: var(--gray-700);
    font-weight: 500;
    font-size: 1.3rem;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bt_menu ul li .ico {
    display: block;
    margin: 0 auto;
}

.bt_menu ul li a p {
    margin-top: 0.4rem;
    word-break: keep-all;
    font-size: 1.1rem;
    font-weight: 600;
    color: #919BB5;
}

.bt_menu ul li.on a p {
    color: #343D4C;
}

.bt_menu ul li .img_on {
    display: none;
}

.bt_menu ul li.on a {
    color: var(--primary);
}

.bt_menu ul li.on .img_on {
    display: block;
}

.bt_menu ul li.on .img_off {
    display: none;
}


/* 초기 상태에서는 화살표 아래 아이콘을 보여줌 */
.collapse_ex .btn[aria-expanded="false"] img {
    transform: rotate(0deg);
}

/* 펼쳐진 상태에서는 화살표 위 아이콘을 보여줌 */
.collapse_ex .btn[aria-expanded="true"] img {
    transform: rotate(180deg);
}



/*반응형 max 1200 xl*/
@media (max-width: 1199.98px) {}


/*반응형 max 992px lg*/
@media (max-width: 991.98px) {}


/*반응형 max 767px md*/
@media (max-width: 767.98px) {
    .m_menu_wr {
        width: 100%;
        left: 50%;
        transform: translate(-50%);
        max-width: var(--body_width);
    }

    .menu_bg {
        width: 100%;
        left: 50%;
    }

    .menu_on .m_nav {
        max-width: 80%;
    }

}

/*반응형 max 576px sm*/
@media (max-width: 575.98px) {
    .go_top {
        right: 1.0rem;
        transform: translateX(0);
    }
}

/*반응형 max 360px*/
@media (max-width:360px) {

    .today_menu .mn_item .thum {
        width: 11rem;
    }

    .convenient_food .swiper-slide {
        width: 11rem;
    }

    .week_calendar .sel_btn {
        border-radius: 1.2rem;
    }

    .mn_all,
    .menu_list .mn_all {
        font-size: 1.5rem;
        line-height: 1.6rem;
    }


}


/* 25.08.11 수정 */
.mn_item .media {
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.today_menu .mn_item .thum {
    width: 100%;
    margin-right: 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 1.6rem;
}

.mn_item .thum .rect_main {
    max-width: 27rem;
    margin: 0 auto;
}

.mn_item .mn_all {
    font-size: 1.4rem;
}

.rect_main {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.rect_main:after {
    content: "";
    display: block;
    padding-bottom: calc(203 / 270 * 100%);
}

.rect_main img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}