﻿.login_ttl {
    margin-top: 24px;
    color: var(--color-black60);
}
.login_content {
    margin-top: 24px;
    display: flex;
    gap: 24px;
    align-items: flex-start;
}
.login_area {
    padding: 24px 16px;
    border: solid 1px var(--color-black30);
    border-radius: 12px;
    width: 376px;
}
.login_txt1 {
    text-align: center;
    color: var(--color-black60);
}
.login_txt2 {
    text-align: center;
    color: var(--color-black50);
    margin-top: 4px;
}
.login_input_area {
    margin-top: 24px;
}
.login_inp_lbl {
    padding: 0 16px;
    color: var(--color-black60);
}
.login_inp_lbl:nth-child(n+2) {
    margin-top: 12px;
}
.login_inp_lbl > .hissu {
    color: var(--color-error90);
    margin-left: 8px;
}
.login_inp_wrp {
    margin-top: 6px;
}
.login_inp_wrp > .txtbox_base {
    width: 344px;
}
.pass_loss_wrp {
    margin-top: 6px;
    text-align: right;
}
.pass_loss_link, .no_reg_member_link {
    color: var(--color-black60);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.btn_login_wrp {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}
.btn_login, .btn_new_reg {
    padding: 0 24px;
    height: 48px;
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}
.btn_login > .arrow_right_icon, .btn_new_reg > .arrow_right_icon {
    font-size: 20px;
}
.login_first_area {
    padding: 24px 32px;
    background-color: var(--color-black10);
    border-radius: 12px;
    flex: 1;
}
.login_first_melit_wrp {
    margin-top: 16px;
    display: flex;
    gap: 16px;
}
.login_first_melit {
    padding: 20px 0;
    text-align: center;
    background-color: var(--color-white100);
    border-radius: 16px;
    flex: 1;
}
.melit_icon_wrp {
    margin-top: 12px;
}
.melit_icon_wrp > .material-symbols-outlined {
    font-size: 48px;
    color: var(--color-cray);
}
.melit_txt_body {
    margin-top: 12px;
    color: var(--color-black60);
}
.btn_new_reg_wrp {
    margin-top: 16px;
    display: flex;
    justify-content: center;
}
.no_reg_member {
    margin-top: 20px;
    text-align: center;
}
.btn_back_wrp {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}
/* optout */
.optout_wrp .optout_ttl {
    padding: 24px 0 16px;
}
.optout_wrp .content {
    padding: 24px 0;
    display: flex;
    flex-direction: column;
    row-gap: 24px;
}
.optout_wrp .content .optout_tbl {
    width: 100%;
    border: 1px solid var(--color-black20);
    border-radius: 4px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}
.optout_wrp .content .optout_tbl .optout_th {
    background-color: var(--color-black10);
    vertical-align: middle;
    padding: 12px 16px;
    width: 100px;
    border-right: 1px solid var(--color-black20);
}
.optout_wrp.mail .content .optout_tbl .optout_th {
    width: 200px;
}
.optout_wrp .content .optout_tbl .optout_td {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    row-gap: 12px;
}
.optout_wrp.mail .content .optout_tbl .optout_td .txtbox_base {
    width: 100%;
}
.optout_wrp .content .optout_tbl .optout_td .box_ctrl_wrp {
    display: flex;
    align-items: center;
    gap: 8px;
}
.optout_wrp .content .optout_tbl .optout_td .box_ctrl_wrp .txtbox_base {
    width: 160px;
}
.btn_optout_wrp {
    display: flex;
    justify-content: center;
}
.btn_optout_wrp #regist_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 232px;
}
.btn_optout_wrp #regist_btn .material-symbols-outlined {
    font-size: 20px;
    margin-top: 2px;
}
#optout_comp_cont {
    padding: 32px 40px;
    text-align: center;
}
#optout_comp_cont .main_msg {
    margin: 24px 0 32px;
}