#login {
    background-image: url(../img/index.png);
    background-size: cover;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    padding: 0 1.5rem;
}
#login p {
    color: #fff;
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    width: 100%;
    text-align: left;
    background: none;
    padding: 0;
    font-weight: 500;
}
#login h2 {
    width: 100%;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.4;
    color: #fff;
    margin-bottom: 4rem;
}
#login #loginFrm {
    width: 100%;
}
#login #loginFrm input {
    padding: 2rem;
    font-size: 1.4rem;
    background: #fff;
    border-radius: 1rem;
    width: 100%;
    margin-bottom: 1.5rem;
}
#login #loginFrm .joinFind {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4rem;
}
#login #loginFrm .joinFind > a {
    font-size: 1.4rem;
    color: #fff;
}
#login #loginFrm .joinFind .find {
    display: flex;
    gap: 1rem;
}
#login #loginFrm .joinFind .find a {
    font-size: 1.4rem;
    color: #fff;
}
#login #loginFrm button {
    font-size: 1.6rem;
    font-weight: 600;
    color: #fff;
    padding: 2rem 0;
    background: #714214;
    border-radius: 1rem;
    width: 100%;
}
#login #loginFrm > a {
    font-size: 1.4rem;
    color: #fff;
    margin-top: 1rem;
    text-align: center;
    display: block;
}

/* 회원가입 */
main #joinFrm {}
main #joinFrm > p {
    font-size: 1.2rem;
    color: red;
}
main #joinFrm .inputWrap {
    margin-bottom: 3rem;
}
main #joinFrm .inputWrap h3 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}
main #joinFrm .inputWrap .idWrap {
    display: flex;
    gap: 0.5rem;
}
main #joinFrm .inputWrap .idWrap input {
    width: 75%;
    padding: 1.5rem 2rem;
    font-size: 1.4rem;
    background: #f4f4f4;
}
main #joinFrm .inputWrap .idWrap button {
    width: 25%;
    font-size: 1.4rem;
    background: #d7d3d2;
}
main #joinFrm .inputWrap .pwWrap {
    display: flex;
    flex-flow: column nowrap;
    gap: 1rem;
}
main #joinFrm .inputWrap .pwWrap input {
    width: 100%;
    padding: 1.5rem 2rem;
    font-size: 1.4rem;
    background: #f4f4f4;
}
main #joinFrm .inputWrap .pwWrap span {
    font-size: 1.2rem;
    display: none;
}
main #joinFrm .inputWrap .pwWrap span.correct {
    color: blue;
}
main #joinFrm .inputWrap .pwWrap span.wrong {
    color: red;
}
main #joinFrm .inputWrap input {
    padding: 1.5rem 2rem;
    font-size: 1.4rem;
    background: #f4f4f4;
    border-radius: 1rem;
}
main #joinFrm .inputWrap #userName,
main #joinFrm .inputWrap #userBirth {
    width: 100%;
}
main #joinFrm .inputWrap .checkWrap {
    display: flex;
    gap: 0.5rem;
}
main #joinFrm .inputWrap .checkWrap .check {
    width: 50%;
    position: relative;
    height: 5.5rem;
}
main #joinFrm .inputWrap .checkWrap .check label {
    font-size: 1.4rem;
    width: 100%;
    height: 100%;
    background: #f4f4f4;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 1rem;
}
main #joinFrm .inputWrap .checkWrap .check input {
    padding: 0;
    width: 100%;
    height: 100%;
}
main #joinFrm .inputWrap .checkWrap .check input:checked + label {
    background: #714214;
    color: #fff;
    border: none;
}
main #joinFrm .inputWrap .telWrap {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
main #joinFrm .inputWrap .telWrap > input {
    width: 75%;
}
main #joinFrm .inputWrap button {
    width: 25%;
    padding: 1.5rem;
    font-size: 1.4rem;
    background: #d7d3d2;
    border-radius: 1rem;
}
main #joinFrm .inputWrap .certification {
    display: none;
    gap: 0.5rem;
}
main #joinFrm .inputWrap .certification input {
    width: 75%;
}
main #joinFrm .inputWrap .certification button {
    width: 25%;
    padding: 2rem;
    font-size: 1.4rem;
    background: #d7d3d2;
}
main #joinFrm .inputWrap .certificationDone {
    font-size: 1.2rem;
    display: none;
    color: blue;
}
main #joinFrm .agreeWrap {
    padding-bottom: 6rem;
}
main #joinFrm .agreeWrap > label {
    font-size: 1.4rem;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #c0c1c1;
}
main #joinFrm .agreeWrap > label input {
    width: 2rem;
    height: 2rem;
    background-image: url(../img/check-2.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
main #joinFrm .agreeWrap > label input:checked {
    background-image: url(../img/check-1.png);
}
main #joinFrm .agreeWrap .mustAgreeWrap {
    display: flex;
    flex-flow: column nowrap;
    gap: 1.5rem;
}
main #joinFrm .agreeWrap .mustAgreeWrap .mustAgree {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
main #joinFrm .agreeWrap .mustAgreeWrap .mustAgree label {
    font-size: 1.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
main #joinFrm .agreeWrap .mustAgreeWrap .mustAgree label input {
    width: 2rem;
    height: 2rem;
    background-color: #fff;
    background-image: url(../img/check-2.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
main #joinFrm .agreeWrap .mustAgreeWrap .mustAgree label input:checked {
    background-image: url(../img/check-1.png);
}
main #joinFrm .agreeWrap .mustAgreeWrap .mustAgree a {
    font-size: 1.4rem;
    color: #5968a8;
}
main #joinFrm > button {
    width: 100%;
    padding: 2rem;
    font-size: 1.4rem;
    background: #714214;
    color: #fff;
    font-weight: 600;
    border-radius: 1rem;
}

/* 찾기 */
main #findFrm .inputWrap {
    margin-bottom: 3rem;
}
main #findFrm .inputWrap h3 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}
main #findFrm .inputWrap input {
    padding: 1.5rem;
    font-size: 1.4rem;
    background: #f4f4f4;
    border-radius: 1rem;
    width: 100%;
}
main #findFrm .inputWrap #userName {
    width: 100%;
}
main #findFrm .inputWrap .telWrap {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
main #findFrm .inputWrap .telWrap > input {
    width: 75%;
}
main #findFrm .inputWrap button {
    width: 25%;
    padding: 1.5rem;
    font-size: 1.4rem;
    background: #d7d3d2;
    border-radius: 1rem;
}
main #findFrm .inputWrap .certification {
    display: none;
    gap: 0.5rem;
}
main #findFrm .inputWrap .certification input {
    width: 75%;
}
main #findFrm .inputWrap .certification button {
    width: 25%;
    padding: 1.5rem;
    font-size: 1.4rem;
    background: #d7d3d2;
    border-radius: 1rem;
}
main #findFrm .inputWrap .certificationDone {
    font-size: 1.2rem;
    display: none;
    color: blue;
}
main #findFrm > button {
    width: 100%;
    padding: 2rem;
    font-size: 1.4rem;
    font-weight: 600;
    border-radius: 1rem;
    background: #714214;
    color: #fff;
    position: absolute;
    bottom: 6rem;
    width: calc(100% - 3rem);
    left: 50%;
    transform: translateX(-50%);
}
main .result {
    display: none;
    padding-top: 15rem;
    text-align: center;
}
main .result p {
    line-height: 1.4;
    font-size: 1.8rem;
    font-weight: 600;
}
main .result p span {
    font-size: 2rem;
    color: #714214;
    font-weight: 800;
    display: inline-block;
    margin-top: 2.5rem;
}
main .findPw {
    display: none;
    position: absolute;
    bottom: 4rem;
    width: calc(100% - 3rem);
    left: 50%;
    transform: translateX(-50%);
}
main .findPw > a {
    display: block;
    width: 100%;
    padding: 2rem;
    font-size: 1.4rem;
    border-radius: 1rem;
    background: #714214;
    color: #fff;
    margin-bottom: 2rem;
    text-align: center;
}
main .findPw .box {
    border-radius: 1rem;
    display: flex;
    justify-content: space-between;
    padding: 2rem 1.5rem;
    border: 1px solid #d7d3d2;
}
main .findPw .box p {
    font-size: 1.4rem;
}
main .findPw .box a {
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #a49f9b;
}
main .findPw .box a img {
    width: 1rem;
}
main #changeFrm {
    display: none;
}
main #changeFrm .inputWrap .pwWrap {
    display: flex;
    flex-flow: column nowrap;
    gap: 1rem;
}
main #changeFrm .inputWrap .pwWrap input {
    width: 100%;
    padding: 1.5rem;
    font-size: 1.4rem;
    border: 1px solid #c0c1c1;
    background: #f7f7f7;
}
main #changeFrm .inputWrap .pwWrap span {
    font-size: 1.2rem;
    display: none;
}
main #changeFrm .inputWrap .pwWrap span.correct {
    color: blue;
}
main #changeFrm .inputWrap .pwWrap span.wrong {
    color: red;
}