/* 마이페이지 */
.title_wrap {
    margin-bottom:2rem;
    border-radius: 0;
    background: none;
    padding: 0;
    text-align: left;
}

.title_wrap .title {
    font-size: 28px;
    font-weight: 600;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #ddd;
}

.mypage_top {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 1.5rem 2rem;
    gap: 1rem;
    border-radius: 1rem;
    border: 2px solid var(--color-red);
}

.mypage_top div.left {
    width: 25%;
}

.mypage_top div.middle {
    width: 35%;
}

.mypage_top div.right {
    width: 40%;
}

.mypage_top .title {
    font-size: 2rem;
    text-align: center;
}

.mypage_top .title span {
    font-weight: 600;
}

.mypage_top dl {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.mypage_top dl dt {
    color: var(--color-red);
    border: 1px solid var(--color-red);
    border-radius: 2rem;
    padding: 0.5rem 1rem;
    font-weight: 500;
}

.mypage_top dl dd {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.mypage_top .middle dl dd a {
    font-size: 2.5rem;
    color: var(--color-red);
    text-decoration: underline;
    letter-spacing: -1px;
}

.mypage_top .right dl dd {
    font-size: 1.75rem;
    letter-spacing: -1px;
}

.mypage_top .right dl dd img {
    width: 60px;
    margin-right: 0.25rem;
}

.boardList .bd_title_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-deep-blue);
}

.boardList .bd_title_wrap a {
    font-weight: 500;
    letter-spacing: -0.5px;
    transition: 0.2s all linear;
}

.boardList .bd_title_wrap a img {
    display: inline-block;
    vertical-align: middle;
    margin-top: -3px;
    transition: 0.2s all linear;
}

.boardList .bd_title_wrap a:hover {
    color: var(--color-red);
    transition: 0.2s all linear;
}

.boardList .bd_title_wrap a:hover img {
    transform: rotate(180deg);
    transition: 0.2s all linear;
}

.boardList .bd_tit {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 0;
}

.board_table .bd_list_item p {
    padding: 1rem 0;
    font-weight: 500;
}

.board_table .bd_list_item p.bd_item_cate {
    width: 20%;
}

.board_table .bd_list_item p.bd_item_date,
.board_table .bd_list_item p.bd_item_state {
    width: 18%;
}

.board_table .bd_list_item p.bd_item_tit {
    width: 62%;
    text-align: left;
}

.board_table .bd_list_item p.bd_item_cate span,
.board_table .bd_list_item p.bd_item_state span,
.writing .item_reply span {
    color: var(--color-red);
    border: 1px solid var(--color-red);
    font-size: 14px;
    padding: 5px 0.75rem;
    border-radius: 2rem;
    letter-spacing: -0.5px;
}

.board_table .bd_list_item p.bd_item_cate span {
    width: 110px;
    display: block;
    text-align: center;
    padding: 6px 0;
    margin: auto;
}

.board_table .bd_list_item p.bd_item_state span,
.writing .item_reply span {
    background: #fff6f4;
    border-radius: 5px;
}

.board_table .bd_list_item p.bd_item_state span.complete,
.writing .item_reply span.complete {
    background: var(--color-red);
    color: #fff;
}

.board_table .bd_list_item.empty {
    padding: 2rem;
    width: 100%;
    justify-content: center;
    color: #888;
}

/* 학년(과목) 설정 */
.tip_box {
    box-sizing: border-box;
    background: #fff6f5 url('../../img/renew/settings/icon-bg-infomation.svg') calc(100% - 2rem) center no-repeat;
    background-size: 12%;
    padding: 2rem 2rem 1.75rem;
    border-radius: 10px;
}

.tip_box h3 {
    display: block;
    margin-bottom: 1rem;
    font-size: 17px;
    font-weight: 600;
}

.tip_box p {
    line-height: 1.5;
    position: relative;
    padding-left: 1rem;
}

.tip_box p:before {
    content:'';
    width:5px;
    height:5px;
    background: var(--color-deep-blue);
    border-radius: 50%;
    position: absolute;
    left: 0;
    top:9px;
}

.grade_setting .choice_wrap {
    position: relative;
}

.grade_setting .choice_wrap .title {
    display: flex;
    align-items: center;
    border-bottom: 2px solid var(--color-red);
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
}

.grade_setting .choice_wrap .title h3 {
    font-size: 1.125rem;
    font-weight: 600;
}

.grade_setting .choice_wrap .notice {
    position: absolute;
    right: 0;
    top: 0;
    font-weight: 500;
}

.grade_setting .choice_wrap .info {
    width: 20px;
    height: 20px;
    background: url(../../img/renew/member/icon_question_mark.svg) no-repeat center center / contain;
    position: relative;
    margin-left: 0.5rem;
    cursor: pointer;
}

.grade_setting .choice_wrap .info:hover .bubble {
    display: block;
}

.grade_setting .choice_wrap .info .bubble {
    width: 340px;
    padding: 1rem 1rem 0.875rem;
    border-radius: 1rem;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    right: -355px;
    background: #fff;
    border: 2px solid var(--color-red);
    line-height: 1.2;
    display: none;
}

.grade_setting .choice_wrap .info .bubble:after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-right-color: var(--color-red);
    border-left: 0;
    margin-top: -10px;
    margin-left: -10px;
}

.grade_setting .choice_wrap .info.subject .bubble {
    width: 315px;
    right: -325px;
}

.check_area {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 3.25rem;
}

.check_area .chk_wrap {
    width: calc((100% - (0.5rem * 6)) / 7);
}

.check_area .chk_wrap label  {
    padding-left: 0.5rem;
}

.grade_setting .button_wrap {
    text-align: center;
}

.grade_setting .button_wrap button {
    width: 100px;
}

.grade_setting .button_wrap button + button {
    margin-left: 0.25rem;
}

/*  찜한 자료/영상 */
.scrap .bardList {
    margin-top: 1rem;
}

.scrap .item_chk {
    width: 40px;
}

.scrap .board_table .item_cate {
    width: 150px;
}

.movieList .board_table .item_cate {
    width: calc(16% + 40px);
}

.scrap .item_filename {
    width: calc(100% - 40px - 150px - (10% * 3));
}

.scrap.video .item_filename {
    width: calc(100% - 40px - 150px - (10% * 2));
}

.scrap .item_filename span,
.writing .item_filename span,
.tikitaka .item_content {
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.scrap .item_preview,
.scrap .item_download,
.scrap .item_del {
    width: 10%;
}

.scrap .item_cate span,
.writing .item_cate span,
.tikitaka .bd_list_item .item_cate span {
    font-size: 90%;
    border: 1px solid var(--color-red);
    color: var(--color-red);
    padding: 5px 0.75rem;
    border-radius: 2rem;
    letter-spacing: -0.5px;
    box-sizing: border-box;
    display: block;
    margin: 0 auto;
}

.scrap .item_cate span {
    width: 110px;
}

.writing .item_cate span {
    width: 80px;
}

.tikitaka .bd_list_item .item_cate span {
    width: 105px;
}

.board_table button,
.board_table .download_btn,
.board_table .delete_btn,
.board_table .play_btn {
    width: 23px;
    height: 22px;
    transition: 0.2s all linear;
}

.board_table .preview_btn {
    background: url('../../img/renew/common/icon-preview.png') no-repeat center center / contain;
    opacity: 0.2;
}

.board_table .download_btn {
    background: url('../../img/renew/common/icon-download.png') no-repeat center center / contain;
    opacity: 0.2;
    display: inline-block;
}

.board_table .delete_btn {
    background: url('../../img/renew/common/icon-delete.png') no-repeat center center / contain;
    opacity: 0.2;
    display: inline-block;
}

.board_table .play_btn {
    background: url('../../img/renew/common/icon-play.png') no-repeat center center / contain;
    opacity: 0.2;
    display: inline-block;
}

.board_table .preview_btn:hover,
.board_table .download_btn:hover,
.board_table .delete_btn:hover,
.board_table .play_btn:hover {
    opacity: 1;
    transition: 0.2s all linear;
}

/* 나의 문의 */
.writing .item_num {
    width: 5%;
}

.writing .board_table .item_cate {
    width: 150px;
}

.writing .item_filename {
    width: calc(100% - 5% - 150px - (15% * 2));
}

.writing .item_date,
.writing .item_reply {
    width: 15%;
}

.writing .item_reply span {

}

.writing_detail .answer {
    position: relative;
    box-sizing: border-box;
}

.writing_detail .answer .top_area .name,
.writing_detail .answer .comment_list .name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: var(--color-deep-blue);
    color: #fff;
    box-sizing: border-box;
    padding: 1rem 1.5rem;
    margin-top: 2rem;
    position: relative;
}

.writing_detail .answer .top_area:before,
.writing_detail .answer .comment_list .name:before {
    content: '';
    width: 0;
    height: 0;
    border-bottom: 0.875rem solid var(--color-deep-blue);
    border-left: 0.75rem solid transparent;
    border-right: 0.75rem solid transparent;
    position: absolute;
    left: 0;
    top: -0.875rem;
}

.writing_detail .answer .text_box,
.writing_detail .answer textarea {
    background: #fff;
    box-sizing: border-box;
    padding: 1.5rem;
    border: 1px solid #ddd;
    border-radius: 0 0 1rem 1rem;
    line-height: 1.4;
}

.writing_detail .answer .comment_list li {
    position: relative;
    box-sizing: border-box;
}

.answer .comment_list li .comment_control {
    position: absolute;
    right: 1.5rem;
    top: 1rem;
    color: #fff;
}

.answer .comment_list li .comment_control button {
    display: inline-block;
    color: var(--color-red);
    border: 1px solid var(--color-red);
    background: #fff;
    padding: 5px 0.5rem;
    font-weight: 600;
    border-radius: 5px;
    font-size: 90%;
    margin-top: -0.375rem;
    transition: 0.2s all linear;
}

.answer .comment_list li .comment_control button + button {
    margin-left: 0.25rem;
}

.answer .comment_list li .comment_control button:hover {
    background: var(--color-red);
    color: #fff;
    transition: 0.2s all linear;
}

.answer .comment_list li .comment_control .date {
    margin-left: 1rem;
}

.writing_detail .btn_wrap {
    margin-top: 2rem;
}

.writing_detail .bd_info button {
    box-sizing: border-box;
}

/* 나의 T키타카 */
.quotes .top {
    display: flex;
    gap: 2rem;
    justify-content: space-between;
}

.quotes .top > div {
    border:1px solid #ddd;
    border-radius: 0 20px 20px 0;
    padding: 2rem;
    width: 50%;
    padding-left: 4rem;
    position: relative;
}

.quotes .top > div:after {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    height: 100%;
    width: 8px;
    background: var(--color-red);
}

.quotes .top .right img {
    max-width: 38px;
    display: inline-block;
    vertical-align: middle;
    margin-top: -5px;
    margin-right: 0.25rem;
}

.quotes .top > div dt {
    font-size: 1.425rem;
}

.popup {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
}

.popup_inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 20px;
    text-align: center;
    overflow: hidden;
    min-width: 350px;
}

.popup .popup_inner .img-box {
    background: var(--color-main-bg);
    padding: 2rem;
}

.popup .popup_inner .popup_body{
    padding: 2rem;
}

.popup .popup_inner .btn {
    display: inline-block;
    margin-top: 1.5rem;
    min-width: 80px;
}

.popup .popup_inner .btn + .btn {
    margin-left: 3px;
}

.quotes .popup-open:hover .popup2 {
    display: block;
}

.quotes .popup .popup_inner .pop_txt {
    text-align: left;
}

.quotes .popup .popup_inner .pop_txt h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.quotes .popup .popup_inner .pop_txt p {
    font-weight: 500;
    font-size: 95%;
    line-height: 1.4;
}

.quotes .popup .popup_inner .pop_txt .txt-red {
    margin-top: 10px;
}

.quotes .popup .popup_inner a {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 20px; 
    left: 50%; 
    transform: translateX(-50%);
    border-radius: 100%; 
    transition: 0.2s linear;
}

.quotes .popup .popup_inner a img {
    vertical-align: top;
}

.quotes .popup .popup_inner .txt-box {
    border-radius: 20px;
    background: #f9f9f9;
    padding: 1rem 1.5rem 1.25rem;
}

.quotes .popup .popup_inner .txt-box b {
    margin: 10px 0;
    display: block;
}

.quotes .popup .popup_inner .txt-box .level {
    display: flex;
    flex-direction: column;
}

.quotes .popup .popup_inner .txt-box .level li {
    padding-bottom: 1rem;
}

.quotes .popup .popup_inner .txt-box .level li:last-child {
    padding-bottom: 0;
}

.quotes .popup .popup_inner .txt-box .level li+li {
    border-top: 1px dashed #ddd;
    padding-top: 1rem;
}

.quotes .popup .popup_inner .txt-box .level li {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.quotes .popup .popup_inner .txt-box .level li .left span {
    color: var(--color-red);
    font-weight: bold;
    font-size:14px;
    padding-left: 14px;
}

.quotes .popup .popup_inner .txt-box .level li .right {
    font-size: 14px;
}

.quotes .popup .popup_inner .txt-box .level li img {
    display: inline-block;
    vertical-align: middle;
}

.quotes .top > div dd {
    font-size: 1.425rem;
}

.quotes .top > div span {
    vertical-align: top;
    font-weight: 700;
    color: var(--color-red);
}

.quotes .top > div dl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.quotes .top > div dl dt,
.quotes .top > div dl dd,
.quotes .top > div dl span {
    line-height: 38px;
}

.quotes .top > div dl dt {
    width: 50%;
}

.quotes .top > div dl dd:not(.info) {
    width: 50%;
}

.quotes .top > div dd.info {
    font-size:14px;
    color: #666;
    margin-top: 1rem;
    display: inline-block;
    font-weight: 400;
    position: relative;
    padding-right: 16px;
    cursor: pointer;
}

.quotes .top > div dd.info:after {
    position: absolute;
    content: '';
    width: 6px;
    height: 10px;
    transform: translateY(-50%);
    right:-6px;
    top: calc(50% - 1px);
    background: url(../../img/withsam/sub/quotes_icon.png) no-repeat center center / contain;
}

.quotes .flex {
    display: flex;
    align-items: center;
}

.quotes .flex p.label {
    margin-bottom: 0;
    margin-right: 50px;
}

.quotes .flex .date {
    color: #666;
    margin-left: 20px;
}

.write-board-bg {
    margin: 2rem 0;
    box-sizing: border-box;
    background: #f8f8f8;
    padding: 2rem;
    border-radius: 12px;
}

.write-board .regist_box {
    margin-top: 2.5rem;
}

.write-board .regist_box:first-child {
    margin-top: 0;
}

.write-board .regist_box p:after {
    content:'*';
    color: var(--color-org);
    display: inline-block;
    margin-left: 5px;
}

.board_table .item_point_date,
.board_table .item_cate {
    width: 16%;
}

.board_table .item_content {
    width: calc(100% - (16% * 2) - 10%);
}

.board_table .item_point {
    width: 10%;
}

/* 회원정보 수정 */
.member_info.enter .info_wrap {
    width: 100%;
    height: calc(463px - 49px - 2rem);
}

.member_info.enter form {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.member_info.enter fieldset {
    width: 100%;
}

.member_info.enter legend {
    font-size: 24px;
    text-align: center;
    font-weight: 600;
    color: #000;
}

.member_info.enter .input_box {
    margin:3.75rem 0 1rem;
}

.member_info.enter .input_box input {
    width: 100%;
}

.member_info.enter fieldset span {
    display: block;
    color: #f00;
    font-size: 95%;
    letter-spacing: -0.5px;
    margin-top: 1rem;
}

.member_info.enter .info_wrap .btn {
    width: 100%;
    margin-top: 2rem;
    font-size: 1rem;
}

.member_info.edit .page_title {
    font-size: 20px;
    margin: 3.75rem 0 1rem;
    font-weight: 600;
    border-bottom: 2px solid var(--color-red);
    padding-bottom: 0.5rem;
}

.sign_page.up .input_title {
    font-size: inherit;
    font-weight: 500;
}

.sign_page.up .input_title:after {
    display: none;
}

.sign_page.up .essential_info ul:not(:last-child) {
    margin-bottom: 1.75rem;
}

.sign_page.up .essential_info .certification_status {
    height: 36px;
    border-radius: 8px;
}

.sign_page.up .essential_info .phone .input_cover button {
    width: 100px;
}


.member_info.edit .comment {
    color: #888;
    margin-top: 5px;
    line-height: 1.3;
}

.member_info.edit .comment a {
    display: inline-block;
    color: var(--color-red);
    margin-left: 0.5rem;
}

.member_info.edit .p_br {
    display: block;
}

.sign_page.up .optional_info .chk_info .input_title {
    display: block;
    line-height: 1.4;
}

.sign_page.up .optional_info {
    margin-top: 1.5rem;
}

.sign_page.up .optional_info .chk_info.marketing {
    padding-top: 0;
}

.sign_page.up .essential_info .input_text.sns_area {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.5rem;
}

.sign_page.up .sns_area .chk_wrap {
    width: calc((100% - (0.5rem * 2)) / 3);
}

.sign_page.up .sns_area .chk_wrap img {
    width: 32px;
    margin: 0 0.5rem 0 0.75rem;
    vertical-align: middle;
    border-radius: 5px;
}

.sign_page.up .sns_area .chk_wrap:last-child img {
    box-sizing: border-box;
    border:1px solid #f8f8f8;
}

/* 회원 탈퇴 */
.my_page.withdrawal form {
    width: 60%;
    margin: auto;
}

.my_page.withdrawal .input_box {
    margin: 1rem 0 2rem;
}

.my_page.withdrawal .input_box input {
    display: block;
    width: 100%;
    height: 46px;
    font-size: 18px;
    margin-bottom: 14px;
}

.my_page.withdrawal .warning {
    font-size: 16px;
    color: #FF1F1F;
}

.my_page.withdrawal .info_comment {
    padding: 30px;
    border-radius: 6px;
    background: #FFf5ee;
    text-align: center;
}

.my_page.withdrawal .info_comment .icon_box {
    width: 28px;
    height: 28px;
    margin: 0 auto 13px;
    background: url('../../img/renew/member/icon-information.svg') no-repeat center center / contain;
}

.my_page.withdrawal .info_comment span {
    font-size: 16px;
    line-height: 140%;
}

.my_page.withdrawal .chk_wrap {
    margin: 14px 0;
}

.my_page.withdrawal .chk_wrap input {
    margin-right: 14px;
}

.my_page.withdrawal label {
    font-size: 16px;
    color: #444;
}

.my_page.withdrawal .withdrawal_btn {
    width: 100%;
    height: 45px;
    font-size: 18px;
    font-weight: 600;
    margin-top: 50px;
    box-shadow: none;
}
.writing_detail .board_view .bd_head .bd_title {
    /*width: calc(100% - 100px);*/
}

.writing_detail .bd_date {
    position: absolute;
    right: 2rem;
    top:2.5rem;
}


/* 반응형 */
@media(max-width:1200px){
    /* 마이페이지 */
    .mypage_top {
        gap: 0.5rem;
    }
    .mypage_top dl {
        gap: 0.75rem;
    }
    .mypage_top div.left {
        width: 22%;
    }
    .mypage_top .right dl dd img {
        width: 55px;
    }
    .mypage_top dl dt {
        font-size: 95%;
    }

}

@media(max-width:1024px){

    #wrap_content.sub_page.grade_setting {
        padding-top: 0;
    }

    .title_wrap .title {
        font-size: 24px;
    }

}

@media(max-width:970px){
    /* 나의 T키타카 */
    .quotes .top > div {
        padding-left: 3rem;
    }
}

@media(max-width:768px){

    .title_wrap .title {
        font-size: 22px;
    }

    /* 마이페이지 */
    .mypage_top {
        gap: 0;
        padding: 0;
        flex-wrap: wrap;
        overflow: hidden;
    }
    .mypage_top div.left {
        width: 100%;
    }
    .mypage_top .middle dl dd a {
        font-size: 2rem;
    }
    .mypage_top .title {
        padding: 0.875rem;
        background: var(--color-red);
        color: #fff;
    }
    .mypage_top dl {
        padding: 1rem;
        justify-content: center;
    }
    .mypage_top div.middle, .mypage_top div.right {
        width: 50%;
    }
    .mypage_top dl dd {
        gap: 1rem;
        font-size: 1.625rem;
    }

    /* 학년(과목)설정 */
    .check_area .chk_wrap {
        width: calc((100% - (0.5rem * 4)) / 5);
    }
    .grade_setting .choice_wrap .info .bubble {
        width: 315px;
        right: -325px;
    }
    .grade_setting .choice_wrap .info.subject .bubble {
        width: 295px;
        right: -305px;
    }

        /* 나의 문의 */
    .writing_detail .answer .top_area .name, .writing_detail .answer .comment_list .name,
    .writing_detail .answer .text_box, .writing_detail .answer textarea {
        padding: 1rem 1.25rem;
    }

    /* 나의 T키타카 */
    .quotes .top {
        flex-direction: column;
        gap: 1rem;
    }
    .quotes .top > div {
        width: 100%;
        padding: 1rem;
        padding-left: 3rem;
    }
    .quotes .top > div dl {
        display: block;
    }
    .quotes .top > div dl dt {
        margin-bottom: 0.25rem;
    }
    .quotes .top > div dl dt, .quotes .top > div dl dd, .quotes .top > div dl span {
        line-height: 1.6;
        font-size: 1.2rem;
        font-weight: 500;
    }
    .quotes .top > div dl span {
        font-weight: 700;
    }
    .quotes .top > div dd.info {
        position: absolute;
        right: 2rem;
        bottom: 1rem;
    }
    .quotes .top .right img {
        max-width: 30px;
    }
    .tikitaka .bd_list_item .item_cate span {
        width: 90px;
        letter-spacing: -0.5px;
        padding: 5px;
        text-align: center;
    }
    .board_table .item_point {
        width: 13%;
        text-align: center;
    }
    .board_table .item_content {
        width: calc(100% - (16% * 2) - 13%);
    }

    /* 나의 회원정보 */
    .member_info.enter form {
        width: 80%;
    }
    .member_info.enter .info_wrap .btn {
        padding: 0.75rem;
    }
    .sign_page.up .optional_info .chk_info .input_title {
        width: 100%;
    }
    .member_info.edit .p_br {
        display: inline-block;
    }
    .schoolSearch_modal .table_wrap .title {
        text-align: left;
        width: 70px;
        margin-right: 0;
    }
    .schoolSearch_modal .table_wrap .top_area input {
        width: calc(100% - 70px - 100px - 10px);
    }
    .schoolSearch_modal .table_wrap .search_btn {
        width: 100px;
        font-size: inherit;
    }
    .schoolSearch_modal .table_wrap li:nth-child(1) {
        width: 50px;
    }
    .schoolSearch_modal .table_wrap li:nth-child(3) {
        width: calc(100% - 50px - 180px);
    }
    .schoolSearch_modal .table_list li span {
        font-size: 14px;
    }

    /* 회원 탈퇴 */
    .my_page.withdrawal form {
        width: 80%;
    }
    .my_page.withdrawal .input_box input,
    .my_page.withdrawal .withdrawal_btn {
        font-size: 1rem;
    }
}

@media(max-width:640px){
    .title_wrap .title {
        font-size: 20px;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }

    /* 마이페이지 */
    .mypage_top {
        justify-content: center;
    }
    .mypage_top .title {
        font-size: 1.75rem;
    }
    .mypage_top div.middle {
        margin-right:1rem;
    }

    .mypage_top .middle dl dd a {
        font-size: 1.75rem;
    }
    .mypage_top dl {
        padding: 1rem 0;
        gap: 0.625rem;
    }
    .mypage_top dl dt {
        padding: 0.375rem 0.75rem;
    }
    .mypage_top dl dd {
        font-size: 1rem;
        gap: 0.5rem;
    }
    .mypage_top .right dl dd {
        font-size: 1.375rem;
    }
    .mypage_top .right dl dd img {
        width: 50px;
    }
    .mypage_top div.middle, .mypage_top div.right {
        width: auto;
    }

    .board_table .bd_list_item {
        text-align: left;
        position: relative;
    }
    .board_table .bd_list_item p.bd_item_cate,
    .board_table .bd_list_item p.bd_item_tit {
        width: 100%;
    }
    .board_table .bd_list_item p.bd_item_date, .board_table .bd_list_item p.bd_item_state {
        width: 100%;
    }
    .board_table .bd_list_item p.bd_item_cate span {
        margin: 0;
        width: auto;
        display: inline-block;
        padding: 6px 0.75rem;
    }
    .board_table .bd_list_item p.bd_item_cate {
        padding: 1rem 0 0.625rem;
    }
    .board_table .bd_list_item p.bd_item_tit {
        padding-top: 0;
    }
    .board_table .bd_list_item p.bd_item_cate span, .board_table .bd_list_item p.bd_item_state span, .writing .item_reply span {
        font-size: inherit;
    }
    .board_table .bd_list_item p.bd_item_date,
    .board_table .bd_list_item p.bd_item_state {
        position: absolute;
        top: 1.375rem;
        right: 0;
        width: auto;
        padding: 0;
    }
    .mypage .inquiry .board_table .bd_list_item p.bd_item_state {
        top:50%;
        transform:translateY(-50%);
    }
    .mypage .inquiry .board_table .bd_list_item p.bd_item_tit {
        width: calc(100% - 75px);
    }
    .board_table .bd_list_item p.bd_item_state span {
        font-size: 13px;
    }

    /* 학년(과목)설정 */
    .tip_box {
        background-image: none;
        padding: 1.5rem 1.5rem 1.25rem;
    }
    .grade_setting .choice_wrap .info .bubble,
    .grade_setting .choice_wrap .info.subject .bubble {
        width: 295px;
        right: -305px;
    }
    .grade_setting .choice_wrap .notice {
        position: inherit;
        right: auto;
        top: auto;
        margin-bottom: 1.25rem;
        margin-top: -0.5rem;
        word-break: keep-all;
    }

        /* 찜한자료/영상 */
    .scrap .board_table .bd_head p {
        display: none;
    }
    .scrap .board_table .bd_head .item_chk,
    .scrap .board_table .bd_head .item_filename {
        display: block;
    }
    .scrap .item_chk {
        width: 60px;
    }
    .scrap .item_chk input {
        margin: auto;
    }
    .scrap .item_filename {
        width: calc(100% - 60px);
        display: flex;
        align-items: center;
        gap: 0.375rem;
    }
    .scrap .item_filename .cate,
    .mypage.writing  .item_filename .cate,
    .quotes .item_point_date .cate {
        font-size: 90%;
        border: 1px solid var(--color-red);
        color: var(--color-red);
        padding: 4px 0.5rem;
        border-radius: 2rem;
        letter-spacing: -0.5px;
        box-sizing: border-box;
        min-width: 68px;
        text-align: center;
    }

    .board_table .bd_list_item .item_info p {
        padding: 0;
        width: auto;
    }
   .scrap .board_table .bd_list_item .item_info p:after {
        display: none;
    }
    .board_table .bd_list_item .item_info {
        gap: 0.75rem;
    }
    .board_table button, .board_table .download_btn, .board_table .delete_btn {
        width: 20px;
        height: 20px;
    }
    .movieList .board_table .bd_list_item.mb {
        padding: 1rem 0;
    }
    .movieList .board_table .item_cate {
        padding: 0;
        width: auto;
    }
    .scrap .movieList .item_cate span {
        width: 100px;
        text-align: center;
    }
    .scrap.video .item_filename {
        width: 100%;
    }
    .scrap.video .bd_body .item_filename {
        padding: 0.625rem 0 0;
    }
    .movieList .board_table .bd_list_item .item_info {
        left: auto;
        right: 0;
        top: 1.125rem;
        bottom: auto;
    }

    /* 나의 문의 */
    .writing .board_table .bd_head p {
        display: none;
    }
    .writing .board_table .bd_head p.item_num,
    .writing .board_table .bd_head p.item_filename{
        display: block;
    }
    .writing .item_num {
        width: 45px;
        text-align: center;
    }
    .mypage.writing .item_filename {
        width: calc(100% - 45px);
    }
    .mypage.writing .item_filename a {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }
    .writing .board_table .bd_list_item .item_info {
        left: 45px;
        bottom: 1rem;
    }
    .writing .board_table .bd_list_item .item_info p:after {
        display: none;
    }
    .board_table .bd_list_item p.bd_item_state span.complete, .writing .item_reply span {
        font-size: 12px;
    }

    /* 나의 티키타카 */
    .write-board .regist_box:first-child select {
        min-width:100px;
    }
    .quotes .board_table .bd_head {
        display: none;
    }
    .quotes .board_table .bd_body {
        border-top: 2px solid #282c34;
    }
    .quotes .board_table .bd_list_item.mb {
        flex-wrap: wrap;
        padding: 1rem 0;
    }
    .quotes .board_table .bd_list_item.mb p {
        width: 100%;
        padding: 0;
    }
    .quotes .item_point_date .cate {
        margin-left: 0.5rem;
    }
    .quotes .board_table .item_content {
        margin: 1rem 0 0.75rem;
    }
    .quotes .board_table .item_point {
        text-align: left;
    }

    /* 회원정보 */
    .sign_page.up .essential_info .input_text.sns_area {
        gap: 0;
    }
    .sign_page.up .sns_area .chk_wrap {
        width: calc(100% / 3);
    }
    .sign_page.up .sns_area .chk_wrap img {
        width: 22px;
        margin: 0 0.125rem 0 0.5rem;
    }
    .sign_page.up .essential_info .pw .comment {
        font-size: inherit;
    }
    #zipcode {
        width: 150px;
    }
    .sign_page.up .essential_info .email .input_cover {
        flex-wrap: nowrap;
    }
    .sign_page.up .essential_info .email .input_cover button {
        margin-top: 0;
        margin-left: 5px;
    }
    .schoolSearch_modal .table_head li {
        font-size: 15px;
    }
    .schoolSearch_modal .table_wrap .title {
        font-size: 1rem;
    }

    .modal_wrap.schoolSearch_modal .modal_box .button_wrap {
        margin-top: 0.5rem;
    }
    .schoolSearch_modal .button_wrap button, .documentChk_modal .button_wrap button {
        width: calc((100% - 0.5rem) / 2 );
        font-size: 15px;
    }

}

@media(max-width:480px){
    /* 마이페이지 */
    .title_wrap {
        margin-bottom: 1.5rem;
    }

    .mypage_top .title {
        font-size: 1.5rem;
    }
    .mypage_top dl {
        gap: 0.5rem;
    }
    .mypage_top dl dt {
        padding: 0.375rem 0.5rem;
        letter-spacing: -0.75px;
        font-size: 13px;
    }
    .mypage_top dl dd {
        font-size: inherit;
    }
    .mypage_top div.middle {
        margin-right: 0.5rem;
    }
    .mypage_top .middle dl dd {
        gap: 0.25rem;
    }
    .mypage_top .middle dl dd a {
        font-size: 1.25rem;
    }
    .mypage_top .right dl dd {
        font-size: 1rem;
    }
    .mypage_top .right dl dd img {
        width: 35px;
    }
    .board_table .bd_list_item p.bd_item_cate {
        padding: 1rem 0 0.5rem;
    }
    .board_table .bd_list_item p.bd_item_cate span {
        font-size: 13px;
        padding: 5px 0.625rem;
    }

    .board_table .bd_list_item p.bd_item_tit {
        line-height: 1.4;
    }

    /* 학년(과목)설정 */
    .check_area .chk_wrap {
        width: calc((100% - (0.5rem * 2)) / 3);
    }
    .grade_setting .choice_wrap .info .bubble,
    .grade_setting .choice_wrap .info.subject .bubble {
        width: 250px;
        right: -260px;
        padding: 0.75rem 0.75rem 0.625rem;
        word-break: keep-all;
        letter-spacing: -0.5px;
        background: #fff;
    }
    .tip_box {
        padding: 1.375rem 1.25rem 1.25rem;
    }
    .tip_box h3 {
        font-size: 15px;
    }
    .tip_box p {
        line-height: 1.3;
        padding-left: 0.75rem;
    }
    .tip_box p:before {
        top: 7px;
    }
    .tip_box p + p {
        margin-top: 5px;
    }
    .grade_setting .choice_wrap .notice {
        line-height: 1.3;
    }

    /*  나의 T키타카 */
    .quotes .top > div {
        padding-left: 2rem;
    }
    .quotes .top > div dd.info {
        padding-right: 0.5rem;
        margin-top: 0;
        bottom: 1.125rem;
        letter-spacing: -0.5px;
    }
    .quotes .top > div dl dt, .quotes .top > div dl dd, .quotes .top > div dl span {
        font-size: 17px;
    }
    .quotes .top > div dd.info:after {
        top: 50%;
    }
    .popup_inner {
        min-width: 320px;
    }
    .popup .popup_inner .popup_body {
        padding: 2rem 1.5rem;
    }

    /* 나의 티키타카 */
    .quotes .write-board .flex {
        flex-wrap: wrap;
    }
    .quotes .flex p.label {
        width: 100%;
        margin-bottom: 0.75rem;
    }
    .write-board-bg {
        padding: 1.5rem;
    }

    /* 나의 회원정보 */
    .member_info.enter .info_wrap .btn {
        font-size: inherit;
        height: 44px;
    }
    .member_info.enter legend {
        font-size: 22px;
    }
    .sign_page.up .essential_info .input_cover button {
        width: 66px;
    }
    .sign_page.up .essential_info .phone .input_cover button {
        width:80px;
    }
    .sign_page.up .essential_info .input_cover .left {
        width: calc(100% - 80px - 5px);
    }
    #zipcode {
        width: 100px;
    }
    .sign_page.up .essential_info .input_text.sns_area {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    .sign_page.up .sns_area .chk_wrap {
        width: 100%;
    }
    .sign_page.up .sns_area .chk_wrap img {
        width: 26px;
    }
    .schoolSearch_modal .table_wrap .title {
        display: none;
    }
    .schoolSearch_modal .table_wrap .top_area input {
        width: calc(100% - 80px - 10px);
    }
    .schoolSearch_modal .table_wrap .search_btn {
        width: 80px;
    }
    .schoolSearch_modal .table_wrap li:nth-child(1) {
        width: 40px;
    }
    .schoolSearch_modal .table_wrap li:nth-child(2) {
        width: 140px;
    }
    .schoolSearch_modal .table_wrap li:nth-child(3) {
        width: calc((100% - 40px - 140px));
    }
    .schoolSearch_modal .table_head li {
        font-size: 14px;
    }
    .schoolSearch_modal .table_list li:nth-child(2), .schoolSearch_modal .table_list li:nth-child(3) {
        padding: 0 10px;
    }
    .schoolSearch_modal .button_wrap button, .documentChk_modal .button_wrap button {
        font-size: 14px;
        height: 42px;
    }

    /* 회원탈퇴 */
    .my_page.withdrawal form {
        width: 90%;
    }
    .my_page.withdrawal .info_comment {
        padding: 1.5rem;
    }
    .my_page.withdrawal .info_comment span {
        font-size: 14px;
        letter-spacing: -0.5px;
    }
    .my_page.withdrawal label {
        font-size: 14px;
    }
    .my_page.withdrawal .chk_wrap input {
        margin-right: 0.5rem;
    }
    .my_page.withdrawal .input_box input, .my_page.withdrawal .withdrawal_btn {
        font-size: 14px;
    }

}

@media(max-width:380px){
    .mypage_top div.middle, .mypage_top div.right {
        width: 100%;
    }

    .my_page.withdrawal .info_comment {
        padding: 1.5rem 0;
    }

    .grade_setting .choice_wrap .info .bubble,
    .grade_setting .choice_wrap .info.subject .bubble {
        width: 230px;
        right: -240px;
    }
}