@charset "UTF-8";

/*******************  공통 ****************** */
.error_txt {
    display : none;
}

.error_txt.active {
    display : block;
}

.trans_3 {
    transition : all 0.3s ease;
}

.content {
    margin  : auto;
    padding : 120px 20px;
}

.content.join {
    max-width : 480px;

}

.loader_box {
    /* background      : #fff; */
    border-radius   : 10px;
    display         : none;
    height          : 80px;
    left            : 50%;
    position        : fixed;
    top             : 50%;
    transform       : translate(-50%, -50%);
    width           : 80px;
    z-index         : 999;
    justify-content : center;
    align-items     : center;
}

.loader_box.active {
    display : flex;
}

body:has(.loader_box.active)::after {
    background : #000;
    content    : "";
    height     : 100%;
    left       : 0;
    opacity    : 50%;
    position   : fixed;
    top        : 0;
    width      : 100%;
    z-index    : 99;
}

.loader {
    width         : 32px;
    aspect-ratio  : 1;
    border-radius : 50%;
    background    : radial-gradient(farthest-side, #ffffff 94%, #0000) top/6px 6px no-repeat,
    conic-gradient(#0000 30%, #ffffff);
    -webkit-mask  : radial-gradient(farthest-side, #0000 calc(100% - 6px), #000 0);
    animation     : l13 1s infinite linear;
}


@keyframes l13 {
    100% {
        transform : rotate(1turn);
    }
}


/*******************  header ****************** */
header {
    border-bottom : 1px solid #ddd;
}

header > div {
    align-items     : center;
    display         : flex;
    height          : 60px;
    justify-content : space-between;
    margin          : auto;
    width           : 90%;
}

header .mobile {
    display : none;
}

header > div img {
    height : 36px;
}


header p {
    font-size   : 16px;
    font-weight : 400;
}

.header .mobile span img {
    width  : 20px;
    height : 20px;
}

header .mobile .close_btn {
    width : 20px;
}


/*******************  footer ****************** */
footer {
    background : #333;
    padding    : 40px 0;
}

footer > div {
    margin : auto;
    width  : 90%;
}

footer .top {
    align-items     : center;
    border-bottom   : 1px solid #ccc;
    display         : flex;
    justify-content : space-between;
    padding-bottom  : 40px;
}

footer .top ul {
    align-items : center;
    display     : flex;
    gap         : 24px;
}

footer .top .left ul li {
    color       : #ccc;
    font-size   : 16px;
    font-weight : 400;
}

footer .top .left ul li.policy {
    font-weight : 600;
}

footer .top .right ul li {
    cursor : pointer;
}

footer .bot {
    display     : flex;
    gap         : 48px;
    padding-top : 40px;
}

footer .bot .des ul {
    display   : flex;
    flex-wrap : wrap;
    gap       : 8px 24px;
    width     : 640px;
}

footer .bot .des ul li {
    color       : #ccc;
    font-size   : 16px;
    font-weight : 400;
    position    : relative;
}

footer .bot .des ul li::after {
    background : #ccc;
    content    : "";
    height     : 16px;
    position   : absolute;
    right      : -12px;
    top        : 50%;
    transform  : translateY(-50%);
    width      : 1px;
}

footer .bot .des ul li:nth-child(2)::after,
footer .bot .des ul li:nth-child(5)::after {
    display : none;
}

footer .bot .copy {
    color       : #ccc;
    font-size   : 14px;
    margin-left : auto;
    margin-top  : auto;
}

.footer_m {
    display : none;
}

/*******************  회원가입공통 ****************** */

.acc_prog {
    align-items     : center;
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    margin-bottom   : 60px;
}

.acc_prog .prog {
    align-items     : center;
    display         : flex;
    justify-content : space-between;
    margin-bottom   : 24px;
    position        : relative;
    width           : 437px;
    max-width       : 100%;
    padding         : 0 16px;
}

.acc_prog .prog::after,
.acc_prog .prog::before {
    background : #ddd;
    content    : "";
    height     : 2px;
    position   : absolute;
    top        : 50%;
    transform  : translateY(-50%);
    width      : calc(50% - 16px);
    z-index    : -1;
}

.acc_prog .prog::after {
    left : 16px;
}

.acc_prog .prog::before {
    right : 16px;
}

.acc_prog .prog.active1::after {
    background : #0077cc;
}

.acc_prog .prog.active2::after,
.acc_prog .prog.active2::before {
    background : #0077cc;
}


/*******************  account_type ****************** */

.acc_type .top {
    margin-bottom : 60px;
}

.acc_type .top h2 {
    font-size     : 24px;
    font-weight   : 600;
    margin-bottom : 24px;
    text-align    : center;
}

.acc_type .top p {
    font-size   : 20px;
    font-weight : 400;
    line-height : 1.5;
    text-align  : center;
}

.acc_prog .prog li {
    align-items     : center;
    background      : #fff;
    border          : 2px solid #ddd;
    border-radius   : 50px;
    display         : flex;
    height          : 22px;
    justify-content : center;
    width           : 22px;
}

.acc_prog .prog li.active {
    background   : #0077cc;
    border-color : #0077cc;
}

.acc_prog .txt {
    align-items     : center;
    display         : flex;
    justify-content : space-between;
    width           : 100%;
}

.acc_prog .txt li {
    font-size   : 18px;
    font-weight : 500;
}

.acc_prog .txt li.active {
    color : #0077cc;
}

.acc_type .bot {
    margin-bottom : 40px;
}

.acc_type .bot h2 {
    font-size     : 20px;
    font-weight   : 500;
    margin-bottom : 60px;
    text-align    : center;
}

.acc_type .bot ul {
    align-items     : center;
    display         : flex;
    justify-content : space-between;
}

.acc_type .bot li {
    align-items     : center;
    aspect-ratio    : 1;
    border          : 1px solid #0077cc;
    border-radius   : 10px;
    cursor          : pointer;
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    padding         : 30px;
    width           : calc(50% - 5px);

}

.acc_type .bot li:hover {
    background : #0077cc;
}

.acc_type .bot li:first-child .img {
    background    : url(/static/common/images/acc_type_icon01.svg) no-repeat center;
    height        : 80px;
    margin-bottom : 12px;
    width         : 80px;
}

.acc_type .bot li:first-child:hover .img {
    background : url(/static/common/images/acc_type_icon01_w.svg) no-repeat center;
}

.acc_type .bot li:last-child .img {
    background    : url(/static/common/images/acc_type_icon02.svg) no-repeat center;
    height        : 80px;
    margin-bottom : 12px;
    width         : 80px;
}

.acc_type .bot li:last-child:hover .img {
    background : url(/static/common/images/acc_type_icon02_w.svg) no-repeat center;
}

.acc_type .bot li h3 {
    font-size     : 20px;
    font-weight   : 500;
    margin-bottom : 8px;
}

.acc_type .bot li:hover h3 {
    color : #fff;
}

.acc_type .bot li p {
    font-size      : 16px;
    font-weight    : 400;
    line-height    : 1.5;
    text-align     : center;
    letter-spacing : -0.05em;
}

.acc_type .bot li:hover p {
    color : #fff;
}

.acc_type .button {
    align-items     : center;
    background      : #ddd;
    border-radius   : 10px;
    cursor          : pointer;
    display         : flex;
    height          : 48px;
    justify-content : center;
    width           : 100%;
}

.acc_type .button span {
    color       : #999;
    font-size   : 18px;
    font-weight : 400;
}


/****************** 교수회원가입 *******************/

.res_prof {
    max-width : 640px;
    margin    : auto;
}

.res_prof .top h2 {
    font-size     : 24px;
    font-weight   : 600;
    margin-bottom : 60px;
    text-align    : center;
}

.res_prof .bot .input_box {
    display        : flex;
    flex-direction : column;
    gap            : 24px 0;
    padding-bottom : 60px;
}

.res_prof .bot .input_box > div {
    display        : flex;
    flex-direction : column;
    gap            : 6px;
}

.res_prof .bot .input_box label {
    font-size   : 16px;
    font-weight : 600;
    margin-left : 4px;
}

.res_prof .bot .input_box .help_txt {
    color        : #999;
    font-size    : 14px;
    font-weight  : 400;
    margin-top   : 6px;
    padding-left : 4px;
}

.res_prof .bot .input_box .help_txt.red {
    color : #ED0000;
}

.res_prof .bot .input_box .help_txt.green {
    color : #0077cc;
}

.res_prof .bot .input_box .error_txt {
    color        : #ED0000;
    display      : none;
    font-size    : 14px;
    font-weight  : 400;
    margin-top   : 6px;
    padding-left : 4px;
}

.res_prof .bot .input_box .error_txt.active {
    display : block;
}

.res_prof .bot .input_box > div .input {
    position : relative;
}

.res_prof .bot .input_box > div .clear_btn {
    display   : flex;
    position  : absolute;
    right     : 12px;
    top       : 50%;
    transform : translateY(-50%);
}

.res_prof .bot .input_box > div .show_pw {
    display   : flex;
    position  : absolute;
    right     : 36px;
    top       : 50%;
    transform : translateY(-50%);
}

.res_prof .bot .input_btn_box {
    display : flex;
    gap     : 8px;
}

.res_prof .bot .input_btn_box .input_btn {
    align-items     : center;
    background      : #aaa;
    border-radius   : 4px;
    color           : #fff;
    cursor          : pointer;
    display         : flex;
    font-size       : 16px;
    font-weight     : 500;
    height          : 40px;
    justify-content : center;
    margin-top      : 6px;
    width           : 120px;
}

.res_prof .bot .input_btn_box .input_btn.active {
    background : #0077cc;
}


.res_prof .bot .agree_box {
    border-top  : 2px solid #222;
    padding-top : 60px;
}

.res_prof .bot .agree_box > div {
    align-items : center;
    display     : flex;
    gap         : 8px;
}

.res_prof .bot .agree_box label {
    font-size   : 14px;
    font-weight : 500;
}

.res_prof .bot .agree_box label input[type="checkbox"] {
    margin-right : 8px;
}

.res_prof .bot .agree_box label span {
    color : #0077cc;
}

.res_prof .bot .agree_box > div > span {
    color       : #999;
    cursor      : pointer;
    font-size   : 12px;
    font-weight : 500;
    margin-left : auto;
}

.res_prof .bot .agree_box .all_agree {
    border-bottom  : 1px solid #ddd;
    padding-bottom : 16px;
}

.res_prof .bot .agree_box .terms {
    margin-top : 16px;
}

.res_prof .bot .agree_box .policy,
.res_prof .bot .agree_box .optional {
    margin-top : 12px;
}

.res_prof .bot .agree_box .sub_check {
    margin-left : 24px;
    margin-top  : 8px;
}

.res_submit {
    margin-top : 60px;
    display    : flex;
    gap        : 12px;
}

.res_submit span {
    flex            : 1;
    align-items     : center;
    background      : #aaa;
    border-radius   : 4px;
    color           : #fff;
    cursor          : pointer;
    display         : flex;
    font-size       : 18px;
    font-weight     : 500;
    height          : 48px;
    justify-content : center;
    width           : 100%;
}

.res_submit span.active {
    background : #0077cc;
}


.res_prof .bot .input_box > div.res_mail,
.res_prof .bot .input_box > div.res_mail_code {
    flex-direction : row;
    flex-wrap      : wrap;
}

.res_prof .bot .input_box > div.res_mail label,
.res_prof .bot .input_box > div.res_mail_code label {
    order : 0;
    width : 100%;
}

.res_prof .bot .input_box > div.res_mail .input,
.res_prof .bot .input_box > div.res_mail_code .input {
    order : 1;
    width : calc(100% - 130px);
}

.res_prof .bot .input_box > div.res_mail .input_btn_box,
.res_prof .bot .input_box > div.res_mail_code .input_btn_box {
    order : 2
}

.res_prof .bot .input_box > div.res_mail .input_btn,
.res_prof .bot .input_box > div.res_mail_code .input_btn {
    margin-top : 0;
}

.res_prof .bot .input_box > div.res_mail .error_txt,
.res_prof .bot .input_box > div.res_mail_code .error_txt {
    order : 3;
}

/* alert */

.alert_box > div {
    align-items    : center;
    background     : #fff;
    border-radius  : 10px;
    display        : none;
    flex-direction : column;
    left           : 50%;
    padding        : 24px;
    position       : fixed;
    top            : 50%;
    transform      : translate(-50%, -50%);
    width          : 360px;
    z-index        : 999999999;
}

.alert_box > div.active {
    display : flex;
}

body:has(.popup.active)::after,
body:has(.alert_box > div.active)::after {
    background : #000000;
    content    : "";
    height     : 100%;
    left       : 0;
    opacity    : 50%;
    position   : fixed;
    top        : 0;
    width      : 100%;
    z-index    : 99;
}


.alert_box > div h3 {
    border-bottom  : 1px solid #ddd;
    font-size      : 20px;
    font-weight    : 500;
    padding-bottom : 16px;
    width          : 100%;
}

.alert_box > div p {
    font-size   : 16px;
    font-weight : 500;
    line-height : 1.5;
    padding     : 16px 0;
    width       : 100%;
}

.alert_box > div span {
    background    : #0077cc;
    border-radius : 4px;
    color         : #fff;
    cursor        : pointer;
    display       : block;
    font-size     : 16px;
    font-weight   : 700;
    padding       : 9px 0;
    text-align    : center;
    width         : 120px;
}


/******************* 완료페이지 ****************** */
.res_complete {
    align-items    : center;
    display        : flex;
    flex-direction : column;
}

.res_complete .top h2 {
    font-size     : 24px;
    font-weight   : 600;
    margin-bottom : 60px;
    text-align    : center;
}

.res_complete .bot {
    align-items    : center;
    display        : flex;
    flex-direction : column;
    max-width      : 1000px;
    width          : 1000px;
}

.res_complete .bot .img {
    margin-bottom : 60px;
}

.res_complete .bot .img img {
    width      : 360px;
    max-width  : 100%;
    object-fit : contain;
}

.res_complete .bot h2 {
    font-size     : 28px;
    font-weight   : 700;
    line-height   : 2;
    margin-bottom : 60px;
    text-align    : center;
}

.res_complete .bot h2 span {
    color         : #0077cc;
    margin-bottom : 60px;
}

.res_complete .bot h2 .br_2 {
    display : none;
}

.res_complete .bot .time {
    font-size     : 16px;
    font-weight   : 400;
    margin-bottom : 60px;
}

.res_complete .bot .time span {
    color : #ED0000;
}

.res_complete .bot .home_btn span {
    align-items     : center;
    background      : #0077cc;
    border-radius   : 4px;
    color           : #fff;
    cursor          : pointer;
    display         : flex;
    font-size       : 18px;
    font-weight     : 500;
    height          : 48px;
    justify-content : center;
    max-width       : 100%;
    width           : 480px;
}


/******************* 로그인페이지 ****************** */
.content.login {
    padding : 0;
}

.login_page {
    align-items : center;
    display     : flex;
    height      : calc(100vh - 61px);
}

.login_page .banner {
    height : 100%;
    width  : 70%;
}

.login_page .login_banner {
    height : 100%;
}

.login_page .banner .swiper-slide:nth-child(1) {
    background      : url("/static/common/images/background01.jpg") no-repeat center;
    background-size : cover;
}

.login_page .banner .swiper-slide:nth-child(2) {
    background      : url("/static/common/images/background02.jpg") no-repeat center;
    background-size : cover;
}

.login_page .banner .swiper-slide:nth-child(3) {
    background      : url("/static/common/images/background03.jpg") no-repeat center;
    background-size : cover;
}

.login_page .login_banner .swiper-pagination-progressbar {
    background : #ffffff80;
    bottom     : 0 !important;
    top        : auto !important;
}

.login_page .login_banner .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background : #0077cc
}

.login_box {
    display         : flex;
    justify-content : center;
    width           : 35%;
}

.login_box .inner {
    align-items     : center;
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    margin-top      : 30px;
    max-width       : 100%;
    padding         : 0 20px;
    width           : 440px;
    max-width       : 100%;
}

.login_box .login_logo {
    margin-bottom : 32px;
}

.login_box .login_logo img {
    height : 80px;
}

.login_box h2 {
    font-size     : 24px;
    font-weight   : 600;
    line-height   : 1.5;
    margin-bottom : 40px;
    text-align    : center;
}

.login_box h2 span {
    color         : #0077cc;
    margin-bottom : 40px;
}

.login_input_box {
    width : 100%;
}

.login_box input {
    font-size : 18px !important;
}

.login_box input.login_id {
    margin-bottom : 12px;
}

.login_box input.login_pw {
    margin-bottom : 24px;
}

.login_input_box p.error_txt {
    font-size     : 16px;
    font-weight   : 400;
    color         : #ED0000;
    margin-bottom : 12px;
    margin-left   : 4px;
}

.login_submit {
    display         : flex;
    justify-content : center;
    align-items     : center;
    margin-bottom   : 24px;
    width           : 100%;
    height          : 60px;
    background      : #0077cc;
    border-radius   : 4px;
    font-size       : 18px;
    font-weight     : 400;
    color           : #ffffff;
    cursor          : pointer;
}

.login_box .login_submit:hover {
    background : #0077cc
}

.login_box .login_util {
    width           : 100%;
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    padding-bottom  : 32px;
    border-bottom   : 1px solid #ddd;
}

.login_box .login_util .save_id {
    display     : flex;
    align-items : center;
    gap         : 6px;
    cursor      : pointer;
}

.login_box .login_util .save_id label {
    font-size   : 16px;
    font-weight : 400;
    color       : #666;
}

.login_box .login_util .find ul {
    display : flex;
    gap     : 24px;
}

.login_box .login_util .find ul li {
    cursor      : pointer;
    font-size   : 16px;
    font-weight : 400;
    color       : #666;
}

.login_box .login_error {
    width       : 100%;
    padding-top : 24px;
}

.login_error .error_txt {
    font-size   : 16px;
    font-weight : 400;
    color       : #ED0000;
    display     : flex;
    align-items : center;
    gap         : 4px;
}


.login_box .join_btn {
    width                 : 100%;
    height                : 60px;
    display               : flex;
    align-items           : center;
    justify-content       : center;
    border                : 1px solid #0077cc;
    -webkit-border-radius : 4px;
    -moz-border-radius    : 4px;
    border-radius         : 4px;
    color                 : #0077cc;
    margin-top            : 40px;
    cursor                : pointer;
    font-size             : 18px;
    font-weight           : 400;
}

.login_box .join_btn:hover {
    background : #0077cc;
    color      : #fff;
}


/*아이디찾기완료*/
.find_complete {
    max-width       : 640px;
    margin          : auto;
    padding         : 40px;
    display         : flex;
    justify-content : center;
    align-items     : center;
    flex-direction  : column;
    gap             : 20px;
    border          : 1px solid #ddd;
    border-radius   : 20px;
}

.find_complete img {
    width  : 60px;
    height : 60px;
}

.find_complete h2 {
    font-size      : 28px;
    font-weight    : 600;
    color          : #0077cc;
    padding-bottom : 20px;
    border-bottom  : 1px solid #ddd;
    width          : 100%;
    max-width      : 280px;
    text-align     : center;
}

.find_complete > div ul {
    width          : 100%;
    max-width      : 280px;
    display        : flex;
    flex-direction : column;
    gap            : 8px;
}

.find_complete > div ul li {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
}

.find_complete > div ul li p {
    font-size   : 18px;
    font-weight : 500;
    color       : #444;
}

.find_complete > div ul li span {
    font-size   : 16px;
    font-weight : 500;
    color       : #444;
}

.find_complete > div ul li span.blue {
    font-size : 18px;
    color     : #0077cc;
}

.find_complete > div {
    width     : 100%;
    max-width : 280px;
}

.btn_area {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 8px;
}

.btn_area > span {
    display         : flex;
    justify-content : center;
    align-items     : center;
    width           : 280px;
    border          : 1px solid;
    height          : 40px;
    border-radius   : 4px;
    transition      : all 0.3s ease;
    cursor          : pointer;
    font-size       : 16px;
    font-weight     : 500;
}

.btn_area .btn_box {
    display : flex;
    gap     : 8px;
}

.btn_area .btn_box > span {
    display         : flex;
    justify-content : center;
    align-items     : center;
    flex            : 1;
    border          : 1px solid;
    height          : 40px;
    border-radius   : 4px;
    transition      : all 0.3s ease;
    cursor          : pointer;
}

.btn_area .btn_b_b {
    border-color : #0077cc;
    color        : #0077cc;
}

.btn_area .disable {
    border     : 1px solid #ddd;
    background : #f5f5f5;
    color      : #999;
}

.btn_area .btn_b_b:hover {
    background : #0077cc;
    color      : #fff;
}

.btn_area .btn_b {
    border-color : #0077cc;
    color        : #fff;
    background   : #0077cc;
}

.btn_area .btn_b:hover {
    background   : #005fa3;
    border-color : #005fa3;
}

.find_complete .btn_area {
    margin-top : 20px;
}

.find_complete .btn_area > span {
    font-size   : 16px;
    font-weight : 500;
}

.mt_20 {
    margin-top : 20px;
}