/* 로그인 페이지 스타일 */
.account.login { padding-top: 0; padding-bottom: 0; color: #fff; background-color: #000; min-height: 100vh; display: flex; align-items: center; }
.account.login .title { text-align: center; margin-bottom: 50px; }
.account.login .title h1.engTxt { font-size: 70px; letter-spacing: -0.025em; font-family: 'disol_headline';}

.account.login .login-wrap {width: 100%; display: flex; flex-direction: column; align-items: center;}
.account.login .input-flex { display: flex; width: 100%;}
.account.login .input-flex .input-group {flex-grow: 1; display: flex; flex-direction: column;}

.account.login .input-item {position: relative; display: flex; align-items: center; font-size: 20px;}
.account.login .input-item + .input-item {margin-top: 10px;}
.account.login .input-item label {flex-shrink: 0; width: calc(100/20*1em); display: block; font-size: inherit; letter-spacing: -0.02em; font-weight: 600; color: #fff; }
.account.login .input-item input {min-width: 0; transition: .4s; flex-grow: 1; height: calc(var(--inputHeight)/18*1em); font-size: calc(18/20*1em); background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.2); outline: none; border-radius: calc(10/18*1em); color: #fff; padding: 0 calc(30/18*1em); box-sizing: border-box; }
.account.login .input-item input:focus {border-color: #fff;}
.account.login .input-item input::placeholder { color: rgba(255, 255, 255, 0.5); }

.account.login .input-flex .btn-login {margin-left: 10px; padding: 0; width: calc(130/20*1em); height: auto; background-color: #fff; color: #000; border: none; outline: none; border-radius: calc(10/20*1em); font-size: 20px; font-weight: 600; cursor: pointer; transition: background-color 0.3s; }

.account.login .save-id {padding-left: calc(100/14*1em); box-sizing: border-box; margin-top: calc(15/14*1em); width: 100%; display: flex; justify-content: flex-start; font-size: 14px; letter-spacing: -0.02em;}
.account.login .save-id .checkWrap {display: flex; align-items: center; cursor: pointer; font-size: inherit;}
.account.login .save-id .checkWrap input[type="checkbox"] {display: none;}
.account.login .save-id .checkWrap label {display: flex; align-items: center; cursor: pointer;}
.account.login .save-id .checkWrap label .checkBox {font-size:inherit; display: flex; align-items: center; justify-content: center; color: #fff; border-radius: 4px; margin-right: calc(3/14*1em);}
.account.login .save-id .checkWrap label .checkBox i {font-size:inherit; color: #fff; transition: .4s;}
.account.login .save-id .checkWrap label .checkBox i.xi-check-circle {display: none;}
.account.login .save-id .checkWrap input[type="checkbox"]:checked + label .checkBox i.xi-check-circle-o {display: none;}
.account.login .save-id .checkWrap input[type="checkbox"]:checked + label .checkBox i.xi-check-circle {display: block;}
.account.login .save-id .checkWrap .lbl {display: flex; align-items: center;}
.account.login .save-id .checkWrap .lbl p {font-size:inherit; font-weight: 500; font-size: inherit; line-height: 1em; color: #fff;}

.account.login .link-group { text-align: center; font-size: 20px; margin-top: calc(115/20*1em); }
.account.login .link-group a { color: rgba(255, 255, 255, 1); text-decoration: none; transition: color 0.3s; }
.account.login .link-group .divider { display: inline-block; margin: 0 calc(25/20*1em); color: rgba(255, 255, 255, 1); }

@media screen and (min-width: 821px) {
    .account.login .input-flex .btn-login:hover { background-color: #f6ad3c; }
    .account.login .link-group a:hover { color: #f6ad3c; }
}

@media screen and (max-width: 1440px) {
    .account.login .title h1.engTxt { font-size: 65px; }
    .account.login .input-item { font-size: 19px; }
    .account.login .input-flex .btn-login { font-size: 19px; }
    .account.login .link-group { font-size: 19px; }
}

@media screen and (max-width: 1280px) {
    .account.login .title h1.engTxt { font-size: 60px; }
    .account.login .input-item { font-size: 18px; }
    .account.login .input-flex .btn-login { font-size: 18px; }
    .account.login .link-group { font-size: 18px; margin-top: calc(100/18*1em); }
}

@media screen and (max-width: 1024px) {
    .account.login {padding-top: 80px;}
    .account.login .title { margin-bottom: 40px; }
    .account.login .title h1.engTxt { font-size: 55px; }
    .account.login .input-item { font-size: 17px; }
    .account.login .input-flex .btn-login { font-size: 17px; width: calc(120/17*1em); }
    .account.login .save-id { font-size: 13px; }
    .account.login .link-group { font-size: 17px; margin-top: calc(30/17*1em); }
    .account.login .link-group .divider { margin: 0 calc(20/17*1em); }
}

@media screen and (max-width: 820px) {
    .account.login {padding-top: 0;}
    .account.login .title { margin-bottom: 35px; }
    .account.login .title h1.engTxt { font-size: 50px; }
    .account.login .input-item { font-size: 16px; }
    .account.login .input-item label { width: calc(90/16*1em); }
    .account.login .input-flex .btn-login { font-size: 16px; width: calc(110/16*1em); }
    .account.login .save-id { font-size: 12px; padding-left: calc(90/12*1em); }
    .account.login .link-group { font-size: 16px; margin-top: calc(80/16*1em); }
    .account.login .link-group .divider { margin: 0 calc(15/16*1em); }
}

@media screen and (max-width: 500px) {
    .account.login .title { margin-bottom: 30px; }
    .account.login .title h1.engTxt { font-size: 40px; }
    .account.login .input-flex { flex-direction: column; }
    .account.login .input-item { font-size: 15px; }
    .account.login .input-item label { width: calc(80/15*1em); }
    .account.login .input-flex .btn-login { margin-left: 0; margin-top: 10px; width: 100%; height: calc(50/15*1em); font-size: 15px; }
    .account.login .save-id { font-size: 12px; padding-left: 0; justify-content: flex-end;}
    .account.login .link-group { font-size: 15px; margin-top: calc(60/15*1em); }
    .account.login .link-group .divider { margin: 0 calc(10/15*1em); }
}

@media screen and (max-width: 360px) {
    .account.login .title { margin-bottom: 25px; }
    .account.login .title h1.engTxt { font-size: 32px; }
    .account.login .input-item { font-size: 14px; }
    .account.login .input-item label { width: calc(70/14*1em); }
    .account.login .input-flex .btn-login { height: calc(45/14*1em); font-size: 14px; }
    .account.login .save-id { font-size: 11px; }
    .account.login .link-group { font-size: 14px; margin-top: calc(50/14*1em); }
    .account.login .link-group .divider { margin: 0 calc(8/14*1em); }
}


/* 회원가입 */
.account .title .korTxt {color: #fff; font-weight: 600; text-align: center; font-size: 60px; letter-spacing: -0.02em; font-family: 'Pretendard'; padding-bottom: calc(75/60*1em); padding-top: calc(150/60*1em);}

.account.join .input-flex {display: flex; width: 100%; gap: 10px;}
.account.join .input-flex .input {flex-grow: 1;}
.account.join .input-flex .btn-id-check {flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0 calc(20/18*1em); height: auto; background-color: #222; color: rgba(255, 255, 255, 0.5); border: none; outline: none; border-radius: calc(10/18*1em); font-size: 18px; cursor: pointer; transition: color 0.3s; }
.account.join .input-flex .dupl_conf {display: flex; height: calc(var(--inputHeight)/18*1em); align-items: center; word-break: keep-all; flex-shrink: 0;}

@media screen and (max-width: 1440px) {
    .account .title .korTxt {font-size: 55px; padding-bottom: calc(70/55*1em); padding-top: calc(140/55*1em);}
    .account.join .input-flex .btn-id-check {font-size: 17px;}
}

@media screen and (max-width: 1024px) {
    .account .title .korTxt {font-size: 50px; padding-bottom: calc(65/50*1em); padding-top: calc(130/50*1em);}
    .account.join .input-flex .btn-id-check {font-size: 16px;}
}

@media screen and (max-width: 820px) {
    .account .title .korTxt {font-size: 45px; padding-bottom: calc(60/45*1em); padding-top: calc(120/45*1em);}
    .account.join .input-flex {flex-wrap: wrap;}
    .account.join .input-flex .btn-id-check {font-size: 15px;}
    .account.join .input-flex .dupl_conf {font-size: 14px; width: 100%; height: auto;}
}

@media screen and (max-width: 500px) {
    .account .title .korTxt {font-size: 40px; padding-bottom: calc(50/40*1em); padding-top: calc(100/40*1em);}
    .account.join .input-flex {flex-direction: column;}
    .account.join .input-flex .btn-id-check {width: 100%; height: calc(50/14*1em); font-size: 14px; margin-top: 0px;}
}

@media screen and (max-width: 360px) {
    .account .title .korTxt {font-size: 32px; padding-bottom: calc(40/32*1em); padding-top: calc(80/32*1em);}
    .account.join .input-flex .btn-id-check {height: calc(45/13*1em); font-size: 13px;}
}

@media screen and (min-width: 821px) {
    .account.join .input-flex .btn-id-check:hover { color: #fff; }
}


/* 회원가입 완료 */
.account.register-complete .mypage-content .mypage-content-item p {text-align: center; line-height: calc(76/50*1em); padding-bottom: calc(120/50*1em);}
.account.register-complete .mypage-content .mypage-content-item p b {color: #f6ad3c;}
.account.register-complete .title h1.korTxt { font-size: 70px; letter-spacing: -0.025em; font-family: 'disol_headline';}



/* 아이디 찾기 */
.account.find-id .modify-content dl + dl {margin-top: calc(20/20*1em);}

/* 아이디 찾기 완료 */
.account.find-id-complete .find-id-complete-content {padding-top: 160px; padding-bottom: 120px;}
.account.find-id-complete .find-id-complete-content .id-result {box-sizing: border-box; font-size: 20px; letter-spacing: -0.02em; padding: calc(50/20*1em) calc(30/20*1em); width: 100%; display: flex; align-items: center; justify-content: center; background: #222; border-radius: calc(10/20*1em); margin-bottom: calc(30/20*1em); color: #fff;}
.account.find-id-complete .find-id-complete-content > p {font-size: 18px; letter-spacing: -0.02em; color: #fff; text-align: center; }
.account.find-id-complete .find-id-complete-content .btn-group {padding-top: 100px; display: flex; align-items: center; justify-content: center; gap: 10px;}
.account.find-id-complete .find-id-complete-content .btn-group a {font-size: 20px; letter-spacing: -0.02em; font-weight: 600; color: #fff; text-align: center; border-radius: calc(10/20*1em); border: 1px solid #fff; width: calc(300/20*1em); height: calc(70/20*1em); display: flex; align-items: center; justify-content: center; transition: all .3s;}

@media screen and (max-width: 1440px) {
    .account.find-id-complete .find-id-complete-content {padding-top: 140px; padding-bottom: 100px;}
    .account.find-id-complete .find-id-complete-content .btn-group {padding-top: 80px;}
}

@media screen and (max-width: 1280px) {
    .account.find-id-complete .find-id-complete-content {padding-top: 120px; padding-bottom: 90px;}
    .account.find-id-complete .find-id-complete-content .btn-group {padding-top: 70px;}
}


@media screen and (max-width: 1024px) {
    .account.find-id-complete .find-id-complete-content {padding-top: 110px; padding-bottom: 90px;}
    .account.find-id-complete .find-id-complete-content .id-result {font-size: 18px;}
    .account.find-id-complete .find-id-complete-content > p {font-size: 16px;}
    .account.find-id-complete .find-id-complete-content .btn-group {padding-top: 65px;}
    .account.find-id-complete .find-id-complete-content .btn-group a {font-size: 18px;}
}

@media screen and (max-width: 820px) {
    .account.find-id-complete {padding-top: 0;}
    .account.find-id-complete .find-id-complete-content {padding-top: 0px; padding-bottom: 0px; height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column;}
    .account.find-id-complete .find-id-complete-content .id-result {font-size: 16px;}
    .account.find-id-complete .find-id-complete-content > p {font-size: 15px;}
    .account.find-id-complete .find-id-complete-content .btn-group {padding-top: 60px; flex-direction: column; width: 100%;}
    .account.find-id-complete .find-id-complete-content .btn-group a {font-size: 16px; width: calc(250/16*1em); height: calc(60/16*1em);}
}

@media screen and (max-width: 500px) {
    .account.find-id-complete .find-id-complete-content .id-result {font-size: 15px;}
    .account.find-id-complete .find-id-complete-content > p {font-size: 14px;}
    .account.find-id-complete .find-id-complete-content .btn-group {padding-top: 50px;}
    .account.find-id-complete .find-id-complete-content .btn-group a {font-size: 15px; width: 100%; height: calc(55/15*1em);}
}

@media screen and (max-width: 360px) {
    .account.find-id-complete .find-id-complete-content .id-result {font-size: 14px;}
    .account.find-id-complete .find-id-complete-content > p {font-size: 13px;}
    .account.find-id-complete .find-id-complete-content .btn-group {padding-top: 40px;}
    .account.find-id-complete .find-id-complete-content .btn-group a {font-size: 14px; height: calc(50/14*1em);}
}

@media screen and (min-width: 821px) {
    /* .account.find-id-complete .find-id-complete-content .btn-group a:hover {background-color: #f6ad3c; color: #000; border-color: #f6ad3c;} */
}


/* 비밀번호 찾기 완료 */
.account.find-pw-complete .find-id-complete-content .id-result {text-align: center; font-size: 18px; line-height: calc(30/18*1em); letter-spacing: -0.02em; padding: calc(50/18*1em) calc(30/18*1em); border-radius: calc(10/18*1em); margin-bottom: calc(30/18*1em);}

@media screen and (max-width: 820px) {
    .account.find-pw-complete .find-id-complete-content .id-result {font-size: 16px;}
}

@media screen and (max-width: 500px) {
    .account.find-pw-complete .find-id-complete-content .id-result {font-size: 15px;}
}

@media screen and (max-width: 360px) {
    .account.find-pw-complete .find-id-complete-content .id-result {font-size: 14px; padding: calc(40/14*1em) calc(20/14*1em);}
}