@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');

body {
    font-family: 'Noto Sans KR', sans-serif;
}

.btn,
.btn-large,
.btn-small {
    background-color: #7930b3;
}

body {
	position: relative;
    font-family: 'Noto Sans KR', sans-serif;
   /* background-image: url(/assets/img/student_login_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;*/
}

body.flag-parents { background-image: url("/assets/img/parents_login_bg.png"); background-repeat: no-repeat; background-size: cover; background-position: center;}

button, input, optgroup, select, textarea { font-family: 'Noto Sans KR', sans-serif;}

main {
    display: flex;
    align-items: center;
    margin-left: 15%;
    transition: all 0.5s;
}

.login {
	position: relative;
	max-width: 360px;
    width: 100%;
    margin-bottom: 90px;
    transition: all 0.5s;
}

.login h3 {
    color: #6a1b9a;
    font-size: 25px;
    line-height: 1em;
    font-weight: 700;
    margin: 0 0 0 5px;
}

.login h4 {
	display: flex; 
	align-items: center;
	gap: 10px;
    font-family: 'Noto Sans KR', sans-serif;
    color: #6a1b9a;
    font-size: 58px;
    font-weight: 900;
    line-height: 1em;
    margin: 0;
	transition: all 0.5s;
}
.login h4 .mobile { display: none}

.login h5 {
    font-size: 20px;
    color: #6a1b9a;
    font-weight: 900;
    margin: 35px 0px 10px 4px;
}

.login h5 span {
    font-size: 25px;
}

.login>div>div {
    margin-left: 4px;
}

.login form {
    /* width: 100%; */
    position: relative;
}

.login input {
    display: block;
    width: calc(100% - 108px);
    height: 42px;
    border: 1px solid #6a1b9a;
    padding: 10px 15px;
    border-radius: 3px;
    margin-bottom: 5px;
    transition: all 0.5s;
}

.login button {
    width: 98px;
    height: 89px;
    line-height: 89px;
    font-size: 17px;
    font-weight: 500;
    padding: 0px 15px;
    border-radius: 3px;
    box-shadow: none;
    position: absolute;
    top: 0;
    right: 0;
    transition: all 0.5s;
}

.login .help {
    font-size: 12px;
    line-height: 1em;
    color: #888;
    margin-top: 10px;
}

.login .help a {
    color: #6a1b9a;
}

.login .help a:hover {
    color: #2bb6a9;
}

.login .help i {
    vertical-align: top;
    font-size: 12px;
}

/*.kakaoLogin { text-align: center; margin-left: 4px; margin-top: 10px;}
.kakaoLogin a { display: block; width: 100%; transition: all 0.5s;}
.kakaoLogin img { display: block; width: 100%; border-radius: 4px;}*/

.kakaoLogin { margin-left: 4px; margin-top: 10px;}
.kakaoLogin a { position: relative; display: flex; align-items: center; justify-content: center; height: 42px; background: #ffeb00; transition: all 0.5s; border-radius: 4px}
.kakaoLogin a::before { content: ""; display: block; width: 24px; height: 22px; background: url("/assets/img/icon_kakao.svg") center no-repeat}
.kakaoLogin span { display: block; font-size: 15px; color: #3c1e1e; font-weight: 600; margin: 2px 0 0 10px}

.login .findPw {
    height: 42px;
    line-height: 42px;
    background-color: #ddd;
    text-align: center;
    border-radius: 3px;
    margin-top: 10px;
}

.login .findPw a {
	display: block;
    color: #6a1b9a;
    font-size: 16px;
}

.login .findPw i {
    vertical-align: -5px;
}

@media (max-width: 1024px){
	.kakaoLogin a { height: 38px}
}

/*.login .btn-back { position: absolute; left: 0; top: -50px; display: block}
.login .btn-back a { display: block}
.login .btn-back a img { width: 36px}*/

/*.login .btn-back { position: absolute; left: 0; top: -70px; display: block}
.login .btn-back a { position: relative; display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; border-radius: 50%; background: #f4effc; background: #f5f2fb}
.login .btn-back a::after { content: ""; position: absolute; right: -2px; bottom: 2px; display: block; width: 22px; height: 22px; background: url("/assets/img/common/ico_click_s.svg") center /contain no-repeat}
.login .btn-back a img { display: block; width: 36px; margin: 4px 0 0 2px}*/

.login .btn-back { position: relative; display: flex; align-items: center; margin-bottom: 20px}
.login .btn-back a { position: relative; display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; border-radius: 50%; background: #f5f2fb}
.login .btn-back a::after { content: ""; position: absolute; right: -2px; bottom: 2px; display: block; width: 22px; height: 22px; background: url("/assets/img/common/ico_click_s.svg") center /contain no-repeat}
.login .btn-back a.pc img { display: block; width: 36px; margin: 4px 0 0 2px}
.login .btn-back span { display: block;}

.login .btn-back .pc { display: flex}
.login .btn-back .mobile { display: none}
.login .btn-back .mobile .inner { display: flex; align-items: center; gap: 5px;}
.login .btn-back .mobile .inner em { font-style: normal}

@media (min-width: 1025px) and (max-height: 670px){
	.login { margin-bottom: 0}
	.login h3 { font-size: 20px;}
	.login h4 { font-size: 50px;}
	.login h5 { font-size: 14px; margin: 20px 0px 10px 4px;}
	.login h5 span { font-size: 18px;}	
}

@media (max-width: 1024px){
	/*.login .btn-back { position: fixed; top: 50px; left: 10%}*/
	.login .btn-back .pc { display: none}
	.login .btn-back .mobile { display: block}
	
	.login .btn-back a { width: 32px; height: 32px; background: #6a1b9a}
	.login .btn-back a::after { content: none}
	.login .btn-back a img { width: 16px}
}
@media (max-width: 575px){
	/*.login .btn-back { top: 20px; left: 50%; margin-left: -150px}*/
	/*.login .btn-back .mobile .inner em { color: #fff}*/
}
@media (max-width: 340px) {
	/*.login .btn-back { top: 10px; margin-left: -130px}*/
 }

/* Help info*/
.help-info { background: rgba(255, 255, 255, 0.85); border-radius: 3px; padding: 10px; margin-top: 10px}
.help-info ul { margin: 0}
/*.help-info ul li { font-size: 13px; background: url("/assets/img/app/ico_info.svg") left 4px no-repeat; padding-left: 18px}*/
.help-info ul li { position: relative; font-size: 13px; color: #666; font-weight: 500; padding-left: 20px}
.help-info ul li + li { margin-top: 10px}
.help-info ul li span  { position: absolute; left: 0px; top: 2px; display: flex; align-items: center; justify-content: center; width: 15px; height: 15px; border: 1px solid #f08078; border-radius: 50%}
.help-info ul li i { display: block; font-size: 13px; color: #f44336;}

@media (min-width: 1025px){
	.help-info { padding: 0;}
}

/* Parents -----------------------*/
/*.flag-parents .login h3 { color: #F16540;}
.flag-parents .login h4 { color: #333;}
.flag-parents .login h5 { color: #F16540;}
.flag-parents .login button { background: #F16540}
.flag-parents .login .help { color: #333}
.flag-parents .login input { border-color: #F16540}*/

.flag-parents .login h3 { color: #b53e1d;}
.flag-parents .login h4 { color: #df5935;}
.flag-parents .login h5 { color: #df5935;}
.flag-parents .login button { background: #df5935}
.flag-parents .login .help { color: #333}
.flag-parents .login input { border-color: #df5935}

.flag-parents .login .btn-back a { background: #fdf1ec}
.flag-parents .login .btn-back a::after { background-image: url("/assets/img/common/ico_click_p.svg")}

@media (max-width: 1024px){
	.flag-parents .login .btn-back a { background: #df5935}
}


/* 태블릿------------------- */
@media (max-width: 1024px) {
    main { margin-left: 10%;}	
	.login { max-width: 300px; margin-bottom: 0;}
	
    .login>div { width: 100%}
    .login h3 { font-size: 20px; margin: 0 0 10px 0}
    .login h4 { font-size: 50px; letter-spacing: -1px}
	.login h4 .mobile { display: block; margin-top: 2px}
    .login h5 { font-size: 15px; margin: 25px 0 6px 0;}
	.login h5 span { font-size: 20px}
	.loginForm { margin: 0}
}

/*모바일-----------------------*/
@media (max-width: 575px) {
    main { margin: 0; width: 100%; justify-content: center;}

    .login h3 { font-size: 16px;}
    .login h4 { font-size: 36px}
	.login h4 .mobile img { display: block; width: 30px}
    .login h5 { font-size: 12px; margin: 20px 0 6px 0;}
	.login h5 span { font-size: 17px}
}

@media (max-width: 340px) {
    .login { max-width: 260px}
}

/*-- 공통값-- */
@media all and (min-width: 320px) and (max-width: 1024px) {
    body {
        height: 100%;
        /*overflow: hidden;*/
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .login input {
        width: 100%;
		height: 38px;
        font-size: 16px;
        padding: 8px 15px 10px 15px;
    }

    .login>div>div {
        width: 100%;
        margin-left: 0;
    }

    /*.login button {
        width: 100%;
        position: static;
        line-height: 48px;
        height: 48px;
        margin-bottom: 5px;
        box-shadow: none !important;
        font-size: 18px;
    }*/
	.login button {
        width: 100%;
        position: static;
        line-height: 38px;
        height: 38px;
        margin-bottom: 0px;
        box-shadow: none !important;
        font-size: 16px;
    }

    .kakaoLogin {
        text-align: left;
        margin: 5px 0 0 0
    }
	
	.login .findPw { height: 38px; line-height: 38px; margin-top: 5px}
	.login .findPw a { font-size: 16px}
	
	.help-info { padding: 5px; margin-top: 5px}
	.help-info ul li { font-size: 12px; line-height: 1.3}
	.help-info ul li + li { margin-top: 5px}
	.help-info ul li span { width: 11px; height: 11px}
	.help-info ul li i { font-size: 9px}

    footer {
        display: none;
    }
}

/*@media all and (width: 960px) {
    .login h4 {
        font-size: 58px;
    }

    .kakaoLogin img {
        width: 300px;
    }

    .login input {
        font-size: 16px;
        width: 300px;
        height: 38px;
        padding: 3px 15px 5px 15px;
        margin-bottom: 7px;
    }

    .login button {
        font-size: 16px;
        margin-bottom: 7px;
    }
}*/


/* ==================
Renewal
================== */
/*main.login-renewal { position: relative; display: block; width: 100%; height: 100%; max-width: 1920px; background-image: url(/assets/img/student_login_bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; margin: 0 auto}*/
main.login-renewal { position: relative; width: 100%; height: 100%; background-image: url(/assets/img/student_login_bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; margin: 0 auto}
/*main.login-renewal .login { margin: 50px 0 0 15%}*/
main.login-renewal .login { margin-left: 15%}
main.login-renewal .login>div>div { margin-left: 0}
/*main.login-renewal .loginForm { margin-bottom: 15px}*/

main.login-renewal .tit-inner { display: flex; align-items: center; gap: 20px}
main.login-renewal .login .btn-back { margin-bottom: 0}
main.login-renewal .login h3 { font-size: 20px}
main.login-renewal .login h4 { font-size: 54px}
main.login-renewal .login h5 { margin: 30px 0 10px 0}

main.login-renewal .login input { width: 100%; padding: 0 15px; margin-bottom: 0}
main.login-renewal .login input:focus-visible { outline: none}

.login-choice { display: flex; margin-bottom: 20px}

@media (max-width: 1500px){
	main.login-renewal .login { margin-left: 12%}
}
@media (max-width: 1200px){
	main.login-renewal .login { margin-left: 6%}
}
@media (min-width: 1025px) and (max-height: 820px){
	main.login-renewal .login { margin-bottom: 0}
}
@media (max-width: 1024px){
	main.login-renewal .tit-inner { flex-direction: column; align-items: flex-start; gap: 10px}
	
	main.login-renewal .login { margin-left: 8%}
	main.login-renewal .login h3 { font-size: 18px; margin-bottom: 5px}
	main.login-renewal .login h4 { font-size: 46px}
	main.login-renewal .login h4 .mobile { margin-top: 0}
	main.login-renewal .login h4 .mobile img { width: 36px}
	main.login-renewal .login h5 { margin: 30px 0 10px 0}
}
@media (max-width: 575px){
	main.login-renewal { background: none}
	main.login-renewal::before { content: ""; position: absolute; left: 100px; top: 0; width: calc(100% - 100px); height: 300px; background: url("/assets/img/student_login_bg_top_img.jpg") 0 top /cover no-repeat; z-index: -1}
	main.login-renewal::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 200px; background: url("/assets/img/student_login_bg_bottom.jpg") 0 top /cover no-repeat; z-index: -1}
	main.login-renewal .tit-inner { flex-direction: column; align-items: flex-start; gap: 15px}
	
	main.login-renewal .login { margin: 45px auto 0 auto; padding-bottom: 30px}
	main.login-renewal .login h3 { font-size: 16px; margin-bottom: 5px}
	main.login-renewal .login h4 { font-size: 40px}
	main.login-renewal .login h4 .mobile img { width: 30px}
	main.login-renewal .login h5 { margin: 20px 0 10px 0}
}
@media (max-width: 340px){
	.login-choice { flex-direction: column; gap: 10px}
	.login-choice input.checkradio + label + input.checkradio + label { margin-left: 0}
}

p.or { font-weight: 500; text-align: center; margin: 5px 0}

/* 추가 로그인 */
.btn-box { position: relative;}

button.btn-style,
a.btn-style { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 42px; font-size: 15px; color: #212121; font-weight: 500; line-height: 1.5; border: 1px solid transparent; border-radius: 3px; background: #6a1b9a; padding: 0}
.btn-style + .btn-style { margin-top: 10px}
button.btn-style.btn-outline-style,
a.btn-style.btn-outline-style { color: #212121; font-weight: 500; border-color: #666; background: #fff}

.btn-style.btn-login { color: #fff; font-weight: 600}
.btn-style.kakao { background: #FFEB00}
.btn-style.kakao span { background: url("/assets/img/login/symbol_kakao.svg") 0 center no-repeat; padding-left: 30px}
.btn-style.google { background: #eee}
.btn-style.google span { background: url("/assets/img/login/symbol_google.svg") 0 center no-repeat; padding-left: 30px}
.btn-style.apple { color: #fff; background: #222}
.btn-style.apple span { background: url("/assets/img/login/symbol_apple.svg") 0 center no-repeat; padding-left: 30px}
.btn-style + .btn-style.idfind { flex-shrink: 0; width: 175px; letter-spacing: -0.5px}

.btn-line .btn-style + .btn-style { margin-top: 0}

.btn-box .btn-inner { position: relative; padding-bottom: 15px; margin-bottom: 15px}
.btn-box .btn-inner::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 50px; height: 1px; transform: translateX(-50%); background: #aaa}
.btn-circle { position: relative;}
.btn-circle span { display: block; font-size: 15px; color: #212121; font-weight: 500; letter-spacing: -0.5px; text-align: center; padding-top: 52px}

.btn-circle.kakao { background: url("/assets/img/login/login_kakao.svg") center 0 no-repeat}
.btn-circle.google { background: url("/assets/img/login/login_google.svg") center 0 no-repeat}
.btn-circle.apple { background: url("/assets/img/login/login_apple.svg") center 0 no-repeat}


/* footer */
.login-renewal-footer.page-footer { width: 100%; margin: 0 auto}


/*** Form ***/
.form-item { position: relative}
.form-item + .form-item { margin-top: 20px}

.loginForm .form-item + .form-item { margin-top: 10px}


/*** btn ***/
.btn-line { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px}
.btn-line.left { justify-content: flex-start}
.btn-line.right { justify-content: flex-end}


/*** Radio & Checkbox ***/
/* common */
input.checkradio { display: none;}
input.checkradio + label { position: relative; display: inline-flex; align-items: center; cursor:pointer;}
input.checkradio + label > span { font-size: 16px; font-weight: 500; letter-spacing: -0.5px; padding-left: 8px;}
input.checkradio.solo + label { display: flex; justify-content: center; font-size: 0}
input.checkradio.solo + label > span { padding-left: 0; text-indent: -9999px}

input.checkradio + label::before { content: ""; display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width:20px; height:20px; border:1px solid #cdced6; border-radius: 2px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); background-position: center; background-size: 14px; background-color: #fff; background-repeat: no-repeat;}

input.checkradio:checked + label::before { content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); background-position: center; background-size: 14px; background-color: #616B7D; background-repeat: no-repeat; border-color: #616B7D}

/* Radio */
input[type=radio].checkradio + label::before{ border-radius: 50%; background: #fff;}
input[type=radio].checkradio:checked + label::before { background: #fff; border-color: #6a1b9a}
input[type=radio].checkradio + label::after { content: ""; position: absolute; top: 50%; left: 6px; width: 8px; height: 8px; background: #cdced6; border-radius: 50%; transform: translateY(-50%)}
input[type=radio].checkradio:checked + label::after { background: #6a1b9a}

input.checkradio + label + input.checkradio + label { margin-left: 30px}

main.login-renewal label { font-size: 15px; color: #212121}