/* 로그인 */
.login {max-width:1360px; margin:0 auto; padding: 3rem 1rem; margin-top: 54px; margin-bottom: 54px}
.login .login-box {display: flex; justify-content: center; flex-direction: column; align-items: center; max-width:450px; margin: 0 auto; padding: 2rem 0;}
.login .login-box .title {font-size:1.6rem; margin-bottom: 3rem; font-weight: 600;}
.login .login-box .title .txt-red {font-weight: 800; vertical-align: top;}
.login .login-box input[type="text"] {width: 100%}
.login .login-box input[type="text"]+input[type="text"] {margin-top: 12px}
.login .login-box .sign-option {display: flex; justify-content: space-between; align-items: center;margin:.3rem 0 1rem; width: 100%}
.login .login-box .sign-option a {transition: 0.2s linear}
.login .login-box .sign-option a:hover {color: var(--color-sub-red); transition: 0.2s linear}
.login .login-box .sign-option label {font-size: 16px}
.login .login-box .check {display: flex; align-items: center; gap: 4px}
.login .login-box .btn-zone {margin-top: 0; width: 100%}
.login .login-box .btn-zone a {font-size: 20px;text-align: center; padding: 0.6rem 1.5rem; width: 100%}
.login .login-box .forgot {margin-top: 2rem}
.login .login-box .forgot a {text-decoration: underline;color: #888; transition: 0.2s linear}
.login .login-box .forgot a:hover {color:#333;transition: 0.2s linear}



/* 회원가입 */
.sign_page.up .form_wrap .signUp_way li.active {border-color:var(--color-sub-red); color: var(--color-sub-red); border-width: 2px}
.sign_page.up .signUp_way li.active::after {filter: invert(44%) sepia(49%) saturate(3877%) hue-rotate(340deg) brightness(98%) contrast(92%);}
[type="checkbox"], .chk {display: block;
    width: 16px;
    height: 16px;
    background: url("../../img/withsam/common/icon-check.png") no-repeat center;
    cursor: pointer;}
[type="radio"] {
    appearance: none;
    border: 2px solid #999;
    border-radius: 50%;
    width: 1em;
    height: 1em;
    background:none
}
.radio:checked {background: none}
[type="radio"]:checked {
    border: 4px solid var(--color-sub-red);}
.sign_page.up .form_wrap .page_title {font-size: 1.7rem; margin-bottom: 20px}
.sign_page.up .info_box.essential_info .info_title {color: var(--color-sub-red); background: var(--color-sub-bg)}
.sign_page.up .essential_info .info_area {border-color: var(--color-sub-red)}
.basic_btn:disabled {
    background: #ddd;
    color: #fff;
    box-shadow: none;
    border: 1px solid #ddd !important;
}
.basic_btn:disabled:hover {}
.sign_page .verify_choice li {box-shadow: none; border: 1px solid #ddd; transition: 0.2s linear}
.sign_page .verify_choice li:hover {border-color: var(--color-sub-red); background: var(--color-sub-red); color: #fff; transition: 0.2s linear}
.sign_page .verify_choice li:hover .icon {filter: invert(1)}
.sign_page.up .privacy_set .bubble {background: var(--color-sub-bg); color:var(--color-sub-red)}
.sign_page.up .privacy_set .bubble:after {border-right-color: var(--color-sub-bg)}

.sign_page.up .form_wrap .signUp_way li {border-width: 2px; border-color: #ddd}
.sign_page.up .signUp_way .term_agree.active::before {background: url(../../img/withsam/sub/sign_up01.svg) no-repeat center center / contain; filter: unset}
.sign_page.up .signUp_way .term_agree::before {background: url(../../img/withsam/sub/sign_up01.svg) no-repeat center center / contain; filter: grayscale(1)}
.sign_page.up .signUp_way .verification.active::before{background: url(../../img/withsam/sub/sign_up02.svg) no-repeat center center / contain; filter: unset}
.sign_page.up .signUp_way .verification::before{background: url(../../img/withsam/sub/sign_up02.svg) no-repeat center center / contain; filter: grayscale(1)}
.sign_page.up .signUp_way .info_input.active::before{background: url(../../img/withsam/sub/sign_up03.svg) no-repeat center center / contain; filter: unset}
.sign_page.up .signUp_way .info_input::before{background: url(../../img/withsam/sub/sign_up03.svg) no-repeat center center / contain; filter: grayscale(1)}
.sign_page.up .signUp_way .teacher_chk.active::before{background: url(../../img/withsam/sub/sign_up04.svg) no-repeat center center / contain; filter: unset}
.sign_page.up .signUp_way .teacher_chk::before{background: url(../../img/withsam/sub/sign_up04.svg) no-repeat center center / contain; filter: grayscale(1)}

.sign_page.up .privacy_set .tip_box {background: url(../../img/withsam/sub/icon_question_mark02.svg) no-repeat center center / contain}

.sign_page.up .essential_info .pw .comment {font-size: inherit;}
.sign_page.up .essential_info .id .comment {font-size: inherit; color: #888; margin-top: 10px;}

/* 마이페이지 */

.mypage-main {padding-top: 2rem}
.mypage-main .top {background: #f9f9f9; border-radius: 20px;  display: flex; justify-content: space-around; align-items: center; overflow: hidden}
.mypage-main .top .left {width: 50%; background: var(--color-main-red);padding: 2rem; display: flex; align-items: flex-start; gap: 22px}
.mypage-main .top .left .title {font-size: 28px; color: #fff; font-weight: 300}
.mypage-main .top .left .title span {font-weight: 500; vertical-align: top}
.mypage-main .top .right {width: 50%;padding: 2rem; display: flex; align-items: center; flex-direction: column; text-align: center}
.mypage-main .top .right dl dt{font-size: 1.25rem}
.mypage-main .top .right dl dd {display: flex; align-items:center; gap: 6px}
.mypage-main .top .right dl dd span {line-height: 1.25;}
.mypage-main .top .right dl dd span:not(.txt-red){}
.mypage-main .top .right dl dd a {font-size: 2.5rem;font-weight: 700; color: var(--color-main-red);text-decoration: underline; line-height: 1.25}
.mypage-main .my-board.fir-board {margin-top: 4rem}
.mypage-main .my-board.sec-board {margin-top: 3rem}
.mypage-main .my-board .title-zone {display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--color-main-red); padding-bottom: .5rem}
.mypage-main .my-board h2 {font-weight: 500; font-size: 1.3rem}
.mypage-main .my-board ul li{display: flex;  border-bottom: 1px solid #ddd}
.mypage-main .my-board ul li .tag span{color: var(--color-main-red); border-radius: 20px; border: 1px solid var(--color-main-red); font-size: 14px; padding: 4px 0.75rem; }
.mypage-main .my-board ul li > div {border-right: 1px solid #ddd; padding: .8rem;}
.mypage-main .my-board ul li > div:nth-child(1){width: 20%; text-align: center}
.mypage-main .my-board ul li > div:nth-child(2){width: 60%}
.mypage-main .my-board ul li > div:nth-child(3){width: 20%; border-right: none; text-align: center}
.mypage-main .my-board ul li > div.date {color: #666}
.mypage-main .my-board ul li > div .label {padding: 3px 12px; border-radius: 8px}
.mypage-main .my-board ul li > div .label.end {background: #666; color: #fff; border:1px solid #666;}
.mypage-main .my-board ul li > div .label.recruiting {background: var(--color-math); color: #fff;}
.mypage-main .my-board ul li > div .label.ing {background: var(--color-kor); color: #fff;}
.mypage-main .my-board ul li > div .label.complete {background: var(--color-main-red); color: #fff;}
.mypage-main .my-board.sec-board {margin-top: 3rem}

.quotes {padding-top: 2rem}
.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-main-red)}
.quotes .top .right img {max-width: 38px;}
.quotes .top > div dt {font-size: 1.425rem;}
.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.2rem; font-weight:600; margin-top: 2rem; margin-bottom: .5rem}
.quotes .popup .popup_inner .pop_txt p {font-size: 14px; font-weight: 500;}
.quotes .popup .popup_inner .pop_txt .txt-red {margin-top: 10px}
.quotes .popup .popup_inner a {position: absolute; top: 20px; left: 50%; transform: translateX(-50%); border: 1px solid #ddd; border-radius: 100%; transition: 0.2s linear;}
.quotes .popup .popup_inner a:hover {transition: 0.2s linear; border-color: var(--color-main-red)}
.quotes .popup .popup_inner .txt-box {border-radius: 20px; background: #f9f9f9; padding: 1rem}
.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}
.quotes .popup .popup_inner .txt-box .level li .left span {color: var(--color-main-red); font-weight: bold; font-size:14px; padding-left: 14px}
.quotes .popup .popup_inner .txt-box .level li .right {font-size: 14px;}
.quotes .top > div dd {font-size: 1.425rem}
.quotes .top > div span {vertical-align: top; font-weight: 700;}
.quotes .top > div dl {display: flex; flex-wrap: wrap;}
.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;}
.quotes .table_wrap .table_head li:first-child{width:15%}
.quotes .table_wrap .table_head li:nth-child(2){width: 15%}
.quotes .table_wrap .table_head li:nth-child(3){width: 60%}
.quotes .table_wrap .table_head li:nth-child(4){width: 10%}
.quotes .table_wrap .table_body li:first-child{width: 15%}
.quotes .table_wrap .table_body li:nth-child(2){width: 15%}
.quotes .table_wrap .table_body li:nth-child(2) span {color: var(--color-main-red); padding: 4px 0.75rem; border: 1px solid var(--color-main-red); border-radius: 20px; font-size: 14px}
.quotes .table_wrap .table_body li:nth-child(3){width: 60%; justify-content: flex-start; padding: 0 10px}
.quotes .table_wrap .table_body li:nth-child(4){width: 10%}
.quotes #pager {margin-top: 3rem}
.sel-box {display: flex; justify-content:flex-end; align-items: center; margin: 2rem 0 1rem 0;}
.sel-box select {position: relative;
display: block;width: 150px;
 max-width: 200px;
 height: 38px;
 padding: 0 30px 0 15px;
 font-size: 16px;
 border: 1px solid #DDDDDD;
 border-radius: 6px;
 background: #fff url(../../img/withsam/common/icon-select.png) no-repeat 90% center; margin-left: 10px}

.my-board .table_wrap .table_head li:nth-child(1){width: 20%}
.my-board .table_wrap .table_head li:nth-child(2){width: 64%}
.my-board .table_wrap .table_head li:nth-child(3){width: 16%}
.my-board .table_wrap .table_body li:nth-child(1){width: 20%}
.my-board .table_wrap .table_body li.menu span {border: 1px solid var(--color-main-red); border-radius: 20px; color: var(--color-main-red);font-size: 14px; padding: 4px 0.75rem}
.my-board .table_wrap .table_body li:nth-child(2){width: 64%; padding-left: 10px; justify-content: flex-start}
.my-board .table_wrap.challenge-table .table_body li:nth-child(2) {
    padding-left: 0; justify-content: center;}
.my-board .table_wrap .table_body li:nth-child(3){width: 16%}
.my-board .table_wrap .table_body li.date.m_none {border-right: none;}
.my-board .tab-wrap { margin: 1rem 0; margin-top: 2rem}
.my-board .tab-wrap ul {display: flex; justify-content: flex-start; gap:10px}
.my-board .tab-wrap ul li {color: #666; cursor: pointer; font-size: 1.2rem;padding: .5rem 1rem; transition:0.2s linear; background: #f9f9f9; border: 1px solid #ddd; border-radius: 12px}
.my-board .tab-wrap ul li.active {background: var(--color-sub-red); border-color: var(--color-sub-red); color: #fff; font-weight: 500; }
.my-board .tab-wrap ul li:hover { color: #fff; transition:0.2s linear; background: var(--color-sub-red); border-color: var(--color-sub-red)}
.my-board .tab-cont {display: none}
.my-board .tab-cont.active {display: block}
.my-board .table_wrap.challenge-table.pc_none {display: none}
.my-board .table_wrap.challenge-table.m_none {display: block}
.my-board .table_wrap.challenge-table .table_head li:nth-child(1) {width: 20%}
.my-board .table_wrap.challenge-table .table_head li:nth-child(2) {width: 7%}
.my-board .table_wrap.challenge-table .table_head li:nth-child(3) {width: 60%}
.my-board .table_wrap.challenge-table .table_head li:nth-child(4) {width: 13%}
.my-board .table_wrap.challenge-table .table_body li:nth-child(1) {width: 20%}
.my-board .table_wrap.challenge-table .table_body li:nth-child(2) {width: 7%}
.my-board .table_wrap.challenge-table .table_body li:nth-child(3) {width: 60%; justify-content: flex-start; padding-left: 10px}
.my-board .table_wrap.challenge-table .table_body li:nth-child(4) {width: 13%}
.my-board .table_wrap.challenge-table .table_body li.label span {border-radius: 8px; padding: 3px 8px; font-size: 14px}
.my-board .table_wrap.challenge-table .table_body li.label span.btn-gray:hover {background: #666; color: #fff}
.my-board .table_wrap.challenge-table .table_body li.label span.end {background: #666; color: #fff; border:1px solid #666;}
.my-board .table_wrap.challenge-table .table_body li.label span.recruiting {background: var(--color-math); color: #fff;}
.my-board .table_wrap.challenge-table .table_body li.label span.ing {background: var(--color-kor); color: #fff;}
.my-board .table_wrap.challenge-table .table_body li.label span.complete {background: var(--color-main-red); color: #fff;}


.my-board .pager, .my-board #pager {margin-top:3rem}
.sign_page.up .email .doubleCheck_btn.m_none {display: block}
.sign_page.up .email .doubleCheck_btn.pc_none {display: none}
.my-board.sec-board ul li .m_none {display: block}
.my-board.sec-board ul li .pc_none {display: none}
.my-board.fir-board ul li .m_none {display: block}
.my-board.fir-board ul li .pc_none {display: none}
.my-board ul li.m_none {display: flex}
.my-board ul li.pc_none {display: none}
.modal_wrap.message_modal .modal_box {border-radius: 20px; padding: 2rem; width: auto; min-height: auto; word-break: keep-all; min-width: 350px}
.button_wrap button {border-radius: 8px !important; font-size: inherit !important;}
.modal_wrap.message_modal .modal_box .button_wrap button{ width: auto; height: auto}
.modal_wrap.message_modal .modal_box .comment {font-size: inherit}
.sign_page.up .terms_box .chk_wrap label {font-size: inherit}
.sign_page.up .privacy_set .title h3 {font-size: inherit}
.sign_page.up .warning, .sign_page.find .warning {font-size: inherit}
.sign_page.up .essential_info .input_title {font-size: inherit}
.custom_select {font-size: inherit}
.sign_page.up .optional_info .title {font-size: inherit}
.sign_page.up .form_wrap .page_comment {font-size: 18px}
.sign_page.up.complete .img_box {background:url(../../img/withsam/sub/signUpComplete.png) no-repeat center center / contain; width:auto; height: 175px }
.sign_page.up.complete .signIn_btn {width: 100%; height: auto; border-radius: 8px}
.sign_page.up.complete .form_wrap {max-width:340px; margin: 0 auto; width: auto; padding: 50px 0}

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

}

@media(max-width:1200px){

}

@media(max-width:1024px){
    .mypage-main .top .left {padding: 1rem; align-items: center}
    .mypage-main .top .left .title {font-size: 18px}
    .mypage-main .top .right {padding: 1rem}
    .mypage-main .top .right dl dd a {font-size: 1.8rem}

}


@media(max-width:970px){
    .sign_page.up .info_box .info_title {width: auto; height: auto; padding: .3rem 1rem; font-size: 14px; display: inline-block}
    .sign_page.up .essential_info .input_title {width: auto}
    .sign_page.up .essential_info ul {flex-direction: column}
    .sign_page.up .essential_info input[type=text], .sign_page.up .essential_info input[type=password] {width: auto}
    .sign_page.up .essential_info .input_cover {justify-content: flex-start; gap: 6px}
    .sign_page.up .essential_info .email .certification_btn, .sign_page.up .essential_info .input_cover button {width: auto; height: 40px; padding: .3rem 1rem;}
    .sign_page.up .essential_info .email .left {width: auto; flex-wrap: wrap; justify-content: flex-start; gap: 8px}
    .sign_page.up .essential_info .phone .input_box {width: auto}
    .sign_page.up .essential_info .certify_num {padding: 0 20px}
    .sign_page.up .email .doubleCheck_btn.m_none {display: none}
    .sign_page.up .email .doubleCheck_btn.pc_none {display: block}
    .sign_page.up .essential_info .email .left select {height: 38px}
    input::placeholder {
        font-size: 14px;
    }

}


@media(max-width:768px){
    .my-board .tab-wrap ul li {font-size: 1rem; padding: .3rem 1rem;}
    .login .login-box .btn-zone a {font-size: 18px}
    .sign_page {padding: 0 2%}
    .sign_page.up .form_wrap {width: 100%}
    .sign_page.up .form_wrap .signUp_way {width: auto; justify-content: center; gap: 10px}
    .sign_page.up .form_wrap .signUp_way li {width: auto; height: auto; padding: .8rem 1rem; }
    .sign_page.up .signUp_way li::before {margin-right: 6px}
    .sign_page.up .signUp_way li::after {margin-left: 8px}
    .sign_page.up .form_wrap .page_title {margin: 60px 0 30px; font-size: 1.5rem}
    .sign_page.up .terms_box {margin-top: 40px}
    .sign_page.up .term_list .title {height: 40px}
    .sign_page.up .privacy_set {margin: 40px 0}
    .sign_page.up .privacy_set .radio_wrap, .sign_page.up .privacy_set .chk_wrap {margin-top: 10px}
    .sign_page.up .warning, .sign_page.find .warning {font-size: 14px}
    .sign_page.up .button_wrap button {font-size: 16px; height: 40px}
    .sign_page .verify_choice .icon_box {height: auto; padding-top: 1rem}
    .sign_page .verify_choice li {padding-bottom: 1rem}
    .sign_page .verify_choice .icon {width: 80px; height: 80px}
    .sign_page .verify_choice {gap: 20px}
    .my-board .table_wrap .table_body li:nth-child(2) {width: 100%; padding-top: 0; }
    .my-board .table_wrap .table_body li:nth-child(1) {justify-content: flex-start; padding: .5rem; width: auto;}
    .my-board .table_wrap .table_body li:nth-child(3) {justify-content: flex-start; padding: .5rem; width: 100%; padding-top: 0}
    .quotes .table_wrap .table_list {flex-wrap: wrap; padding: .3rem}
    .quotes .table_wrap .table_body li:first-child {width: 90px; justify-content: flex-start; padding: .5rem; }
    .quotes .table_wrap .table_body li.date {width: auto;}
    .quotes .table_wrap .table_body li:nth-child(2) {width: 100px; justify-content: flex-start}
    .quotes .table_wrap .table_body li:nth-child(3) {width: calc(100% - 100px);}
    .quotes .table_wrap .table_body li:nth-child(4) {width: 100%; padding: .5rem; justify-content: flex-start;}
    .quotes .top > div {padding: 1rem; width: 100%; padding-left: 3rem}
    .quotes .top {flex-direction: column; gap: 1rem}
    .quotes .top > div dl {flex-direction: column}
    .quotes .top > div dt {font-size: 1.2rem;}
    .quotes .top > div dd {font-size: 1.2rem}
    .quotes .top .right img {max-width:30px}
    .quotes .top > div dd.info {margin-top:0; position: absolute; right: 2rem; bottom: 1.3rem}
    .quotes .flex {flex-wrap: wrap}
    .quotes .flex p.label {width: 100px; margin-right: 0}
    .write-board .regist_box select { width: 180px}
    .quotes .flex .date {margin-left: 100px; margin-top:10px}
    .sign_page .verify_choice li span {font-size: 1rem; padding-top: .5rem}
    .sign_page.up .optional_info .chk_wrap:not(:last-child) {margin-right: 10px}
    .sign_page.up .essential_info button {font-size: 14px}
    .mypage-main .my-board ul li > div {border-right: 0}
    .mypage-main .my-board ul li {flex-direction: column}
    .mypage-main .my-board ul li .title.pc_none a {display: inline; vertical-align: middle;}
    .mypage-main .my-board ul li .label.pc_none {display: inline; margin-right: 8px; padding-left: 0; vertical-align: middle;}
    .mypage-main .my-board ul li .title.pc_none .tag{display: inline; margin-right: 8px; padding-left: 0; vertical-align: middle; margin-top: -1px;}
    .mypage-main .my-board ul li > div.date.pc_none {padding-top: 0}
    .mypage-main .my-board ul li > div:nth-child(1) {width: auto;text-align: left; padding-bottom: .3rem; padding-right: 0}
    .mypage-main .my-board ul li > div:nth-child(2) {width: calc(100% - 120px); padding-bottom: 0; padding-left: 6px}
    .mypage-main .my-board ul li > div:nth-child(3) {width: 100%; text-align: left; padding-top: 6px}
    .mypage-main .my-board .title-zone a {width: 22px;}
    .my-board .tab-wrap ul li {font-size: 1rem; padding: .3rem .7rem;}
    .my-board .write-board .regist_box.post_flex p + div.dateList {width: auto}
    .my-board .table_wrap .table_list {flex-wrap: wrap; padding: .3rem}
    .table_wrap .table_list li:not(:last-child) {border-right: 0}
    .my-board.sec-board ul li .label.pc_none {width: auto; padding-right: 0}
    .my-board.sec-board ul li .m_none {display: none}
    .my-board.sec-board ul li .pc_none {display: block}
    .my-board.fir-board ul li .label.pc_none {width: auto; padding-right: 0}
    .my-board.fir-board ul li .m_none {display: none}
    .my-board.fir-board ul li .pc_none {display: block}
    .mypage-main .my-board ul li > div .label {border-radius: 1rem;}
    .my-board .table_wrap.challenge-table.pc_none {display: block}
    .my-board .table_wrap.challenge-table.m_none {display: none}
    .my-board .table_wrap.challenge-table .table_body li:nth-child(1) {width: auto; padding: .5rem;}
    .my-board .table_wrap.challenge-table .table_body li:nth-child(2) {width: auto; justify-content: flex-start; position: relative; padding: .5rem}
    .my-board .table_wrap.challenge-table .table_body li:nth-child(2):after {position: absolute; left: -0px; top: 14px; width: 1px; height: 13px; background: #aaa; content: ''}
    .my-board .table_wrap.challenge-table .table_body li:nth-child(2):before {position: absolute; right: -0px; top: 14px; width: 1px; height: 13px; background: #aaa; content: ''}
    .my-board .table_wrap.challenge-table .table_body li.la:before, .my-board .table_wrap.challenge-table .table_body li.la:after {display: none;}
    .my-board .table_wrap.challenge-table .table_body li:nth-child(3) {width: 100%; padding: .5rem; }
    .my-board .table_wrap.challenge-table .table_body li:nth-child(4) {width: 100%; justify-content: flex-start; padding: .5rem; padding-top: 0}
    .my-board .table_wrap.challenge-table .table_body li.label span {font-size: 12px;}
    .my-board .table_wrap .table_body li.menu span {font-size: 13px}
    .sign_page.up .essential_info .info_area {padding: 30px 20px;}
    .sign_page.up .optional_info .info_area {padding:30px 20px;}
    .mypage-main .my-board h2 {font-size: 1.1rem}
    .my-board ul li.m_none {display: none}
    .my-board ul li.pc_none {display: block}
    .my-board .table_wrap .table_list {}
    .my-board ul li.pc_none span:first-child {color: var(--color-sub-red); font-size: 13px; padding: 4px 0.75rem; border: 1px solid var(--color-sub-red); border-radius: 20px; margin-right: 8px}
    .my-board ul li.pc_none.date {width: 100%; padding-top: 0}
    .quotes #popup_point.popup .popup_inner{width: 90%}
    .sign_page.up.complete .form_wrap {padding: 50px 0}
    .sign_page.up.complete .img_box {width: 200px; margin: 0 auto}
}



@media(max-width:640px){
    .mypage-main .top .left {width: 70%; gap: 10px; padding: 1.5rem}
    .mypage-main .top .left img {max-width:60px}
    .mypage-main .top .right {width: 30%; padding: 1rem}
    .mypage-main .my-board .title-zone a {width: 20px;}

    .sign_page.up .form_wrap .signUp_way {flex-wrap: wrap; width: 80%}
    .sign_page.up .form_wrap .signUp_way li {width: calc((100% - 10px) / 2); justify-content: center; padding: .5rem 1rem;}

}
#wrap {min-width: auto}
@media(max-width:580px){
    .login .login-box .title {font-size: 1.25rem}
    .sign_page.up .essential_info .phone .input_box {width: auto}
    #mobileNo {width: 154px}
    #verification-number {width: 150px}
    #zipcode {width: 150px}
    #school-name-input {width: 189px}
    #userId {width: 170px}
    input::placeholder {
        font-size: 12px;
    }
    .sign_page.up .privacy_set .bubble {left: -140px ;width: 300px; top: 40px; transform:none}
    .sign_page.up .privacy_set .bubble:after {top: 0; left: 50%}


}
@media(max-width:480px){

    .sel-box select {font-size: inherit;width: auto;}
    .mypage-main .top{flex-direction: column}
    .mypage-main .top .left {width: 100%; padding:1rem 1.25rem;}
    .mypage-main .top .right {width: 100%}
    .sign_page.up .form_wrap .signUp_way {width: 90%}
    .modal_wrap.message_modal .modal_box {min-width: 90%; padding: 2rem 1.5rem}
    .sign_page.up .form_wrap .page_comment {font-size: inherit}
    .quotes .top > div {padding-left: 2rem;}
    .quotes .top > div dd.info {right: 1.25rem;}
    .quotes .top > div dd.info:after {right: 0;}
    .quotes .flex p.label {width: 100%;margin-bottom: 0.75rem;}
    .write-board .regist_box select {width: 80px}
    .quotes .flex .date {margin-left: 1rem;margin-top: 0;width: calc(100% - 80px - 1rem);}

    .mypage-main .my-board ul li {position: relative;}
    .mypage-main .my-board ul li .title.pc_none .tag, .my-board.sec-board ul li .label.pc_none {display: block; margin: 0 0 0.375rem 0;}
    .my-board.sec-board ul li .label.pc_none {padding:0;}
    .mypage-main .my-board ul li > div .label, .mypage-main .my-board ul li .tag span {font-size: 13px; padding:3px 12px;}
    .mypage-main .my-board ul li > div.date.pc_none {padding: 0; position: absolute; right:0.8rem; top:0.8rem;}
    .quotes .table_wrap .table_body li:nth-child(2) span {font-size: 13px; padding:2px 0.625rem;}
    .quotes .popup .popup_inner .pop_txt p {font-size: 13px;}
}

@media(max-width:385px){
    .write-board-bg {padding: 1.5rem 1.25rem; letter-spacing: -0.5px;}

}