/** 로그인 **/
#mb_login_container {
    position: relative;  background: #e5e5e0;
}


#mb_login { overflow: hidden; z-index: 1; height: 100%; }
#mb_login > div { width: 100%; height: 100%; }

.login_left { 
    flex: 1;
    position: relative; flex-direction: column; color: #fff; overflow: hidden;
    background: url(../../img/login-hero.jpg) no-repeat center / cover;
}
.login_left .text_wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 3rem;
    max-width: 32rem;
}
.login_left .text_wrap h2 {
    font-size: 3rem; margin: 0 0 16px; line-height: 1.2;
}
.login_left .left_subtitle { color: rgba(255, 255, 255, 0.9);
    font-size: 1.125rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    white-space: nowrap; }


.login_right { flex:0 0 40%; padding: 0 15px; }
.login_right .title { font-size: 1.875rem; line-height: 2rem; margin-bottom: .5rem; font-weight: 700; text-align: center; padding-top: 24px;}
.login_right .title_sub { font-size: .875rem; line-height: 1.25rem; color: #737373; font-weight: 500; margin-bottom: 1.5rem; text-align: center; }
.login_right .ipt_wrap1 { margin-bottom: 1rem;}
.login_right label { width: 100%; font-size: .875rem; line-height: 1.25rem; margin-bottom: 0.5rem; font-weight: 500; color: rgb(55 65 81); }
.login_right input { width:100%; border: 1px solid rgb(209 213 219); height: 40px; padding: 0 .75rem; font-size: .875rem; color: rgb(10, 10, 10); background-color: #e8e8e4; }
.login_right input:focus { border: 1px solid #2d7a4f; }
.login_right .btn_wrap { margin-bottom: 2rem; padding-top: 1rem; }
.login_right .btn_wrap button { background: #2d7a4f; color: #fff; font-size: .875rem; line-height: 1.25rem; padding: .625rem; width: 100%; border: none; font-weight: 700; }
.login_right .customer_wrap a { color: #2d7a4f; font-weight: 700; font-size: .875rem; }
.login_right .explain {text-align: center; color: rgb(107 114 128); padding-top: 2rem; margin-top: 2rem; border-top: 1px solid rgb(229, 229, 229); font-size: .875rem; font-weight: 300; padding-bottom: 1.5rem;}
.login_right .explain b { font-weight: 700; }

.login_right .push_wrap label { flex: 0 0 65px; margin: 0; color: brown; font-weight: 500; }
.login_right .push_wrap input { flex: 1; }

.logo { gap: 8px; margin-bottom: 32px; }
.logo-box {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: #2d7a4f;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.125rem;
}
.logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--foreground);
}
.form_wrap { width: 100%; max-width: 28rem; min-width: 400px; background: #fff; padding: 16px 24px;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px); 
}
.login_wrap { width: 100%; max-width: 28rem; }


@media screen and (max-width:900px) {
    #mb_login { flex-direction: column; padding: 24px; justify-content: center; align-items: center; gap: 24px; }
    #mb_login > div { height: auto; }

    .login_left { width: 100%; border-radius: 1rem; flex: 0 0 250px; }

    .login_left .text_wrap { padding: 1rem; width: 100% }
    .login_left .text_wrap h2 { font-size: 18px; }
    .login_left .left_subtitle { font-size: 12px;}

    .login_left .pc_only { display: none; }
    
    .logo { justify-content: center;}
/* }


@media screen and (max-width:768px) { */
    .container { overflow-y: auto; overflow-x: hidden; min-height: 100%; height: 100%; }
    #mb_login { position: relative; min-height: 100%; height: 100%; padding:0; gap: 0; }
    #mb_login > div { height: 100%; }
    .form_wrap { min-width: 300px; }
    .form_wrap .customer_wrap { display:none; }
    .login_left { flex: 0 0 100vh; border-radius: 0; }
    .login_right { padding: 0 20px; position:absolute; }

    .logo-text { color: #fff; text-shadow: 2px 2px 4px #000; }
}

@media screen and (max-width:400px) {
    .login_left {  flex: 0 0 150px; }
}