.main_wrap main {}
/* 로그인 화면 네비 */
.main_wrap .top_barbg {
    max-width: 600px; margin: 0 auto;
}
.main_wrap .top_barbg .top_bar {}
.main_wrap .top_barbg .top_bar .top {
    height: 52px; /* background-color: #FFF; */
    display: flex; align-items: center; padding: 0 12px; z-index: 2;
    position: sticky; top: 0; left: 0; right: 0;
    max-width: 600px; margin: auto;
}
.main_wrap .top_barbg .top_bar .top .back_btn {
    flex: 1 1 0%;
}
.main_wrap .top_barbg .top_bar .top .back_btn .back {
    display: flex; padding-right: 8px; cursor: pointer;
}
.main_wrap .top_barbg .top_bar .top .back_btn .back > img {width: 16px;}
.main_wrap .top_barbg .top_bar .top .left_logo {
    white-space: nowrap; text-align: center; flex: 2 1 0%;
}
.main_wrap .top_barbg .top_bar .top .left_logo .login {
    font-weight: 700; font-size: 17px; line-height: 20px;
}
.main_wrap .top_barbg .top_bar .top .right_nav {
    text-align: right; flex: 1 1 0%;
}

/* 메인 화면 */
.main_wrap main {
    max-width: 600px; min-height: 750px;
    display: flex; flex-flow: column nowrap; justify-content: center; 
}

/* 로고 */
.main_wrap main .main_logo {
    display: flex; align-items: center; justify-content: center;
    padding-bottom: 30px;
}
.main_wrap main .main_logo h1 {}
.main_wrap main .main_logo h1 > img {height: 36px;}

/* 로그인 폼 */
.main_wrap main .login_form {
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    padding: 0 20xp;
}
.main_wrap main .login_form .join_coupon {
    border-radius: 12px; 
    padding: 12px 16px; margin: 32px 16px 27px;
    background-color: #FFF;
    filter: drop-shadow(rgba(0,0,0,0.1) 0 8px 10px);
    text-align: center; position: relative; z-index: 1;
}
.main_wrap main .login_form .join_coupon .max {
    font-weight: 500; font-size: 13px; line-height: 18.2px;
}
.main_wrap main .login_form .join_coupon .max::after{
    content: ''; width: 11px; height: 11px;
    position: absolute; bottom: -5px; left: calc(50% - 8px); background: #FFF;
    transform: rotate(-45deg);
    border-radius: 0 0 0 0.25rem;
}
.main_wrap main .login_form .join_coupon .max > span {color: #FA6EE3; font-weight: 600;}

/* ---------------------로그인 버튼 */
.main_wrap main .login_form {
    /* background-color: orange; */
}
.main_wrap main .login_form > button {
    width: 100%; max-width: 340px;
    margin: 0 32px 10px; padding: 12px 40px 12px 16px;
    display: flex; align-items: center;
    border-radius: 24px;
    position: relative; overflow: hidden;
}
.main_wrap main .login_form > button > img {width: 24px; display: block;}
.main_wrap main .login_form > button > span {
    display: inline-block; width: 100%; text-align: center;
    font-weight: 700px; font-size: 15px; line-height: 18px;
}
/* 카카오 로그인 */
.main_wrap main .login_form .kakao_login {
    background-color: rgb(254, 229, 0);
}
.main_wrap main .login_form .kakao_login > img {}
.main_wrap main .login_form .kakao_login > span {}
/* 핸드폰 로그인 */
.main_wrap main .login_form .phone_login {
    background-color: #121212; color: #fff;
}
.main_wrap main .login_form .phone_login > img {}
.main_wrap main .login_form .phone_login > span {}
/* 이메일 로그인 */
.main_wrap main .login_form .mail_login {
    background-color: rgb(255, 255, 255); color: #292b2b;
    border: 1px solid #ecedee;
}
.main_wrap main .login_form .mail_login > img {}
.main_wrap main .login_form .mail_login > span {}

.main_wrap main .login_form .main_or {
    height: 1px; background: #f5f6f8; width: 229px;
    margin-top: 20px; margin-bottom: 15px; position: relative;
    font-size: 12px; line-height: 14px;
    overflow: visible;
}
.main_wrap main .login_form .main_or::after {
    content:"또는"; display: inline-block; padding: 0 10px;
    background: #FFF; position: absolute; left: 50%;
    transform: translate(-50%, -50%); color: rgb(161, 169, 173);
}
.main_wrap main .login_form .other_sns {
    display: flex; margin-bottom: 24px;
}
.main_wrap main .login_form .other_sns > button {
    width: 45px; height: 46px; position: relative;
    margin: 4.5px 0;
    margin-right: 10px;
}
.main_wrap main .login_form .other_sns > button > img {
    display: block;
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
/* 애플버튼 */
.main_wrap main .login_form .other_sns > .apple {}
.main_wrap main .login_form .other_sns > .apple > img {}
/* 구글버튼 */
.main_wrap main .login_form .other_sns > .google {}
.main_wrap main .login_form .other_sns > .google > img {}
/* 페이스북버튼 */
.main_wrap main .login_form .other_sns > .fackbook {}
.main_wrap main .login_form .other_sns > .fackbook > img {}
/* 토스버튼 */
.main_wrap main .login_form .other_sns > .toss {}
.main_wrap main .login_form .other_sns > .toss > img {}

/* 계정찾기 */
.main_wrap main .join_cs {
    display: flex; justify-content: center; align-items: flex-start; flex: 0 0 auto;
    padding-bottom: 32px;
}
.main_wrap main .join_cs > a {
    font-weight: 500; font-size: 13px; line-height: 16px;
    color: #606567;
}
.main_wrap main .join_cs > a::after{
    content: ''; display: inline-block;
    width: 1px; height: 13px; background:#606567;
    margin: 0 14px;
    position: relative; top: 2px;
}
.main_wrap main .join_cs > a:last-child::after {display: none;}
.main_wrap main .join_cs .join_medium {}
.main_wrap main .join_cs .pw_setting {}
.main_wrap main .join_cs .find_account {}
.main_wrap main .join_cs .cs_chat {}