.login_wrap {display: flex; height: 100vh;}

.login_left {width: 28%; position: fixed; top: 0; bottom: 0; left: 0;}

.login_left .video_wrap {position: relative; width: 100%; height: 100%;}
.login_left video {width: 100%; height: 100%; object-fit: cover; object-position: 64%;}
.login_left .overlay { position: absolute; inset: 0; background-color: rgba(0, 39, 73, 0.45);} 

.login_left .login_title { position: absolute; top: 140px; left: 60px; z-index: 1;} 
.login_left .login_title p {font-family: var(--font-ma); color: #fff; font-size: 40px;} 
.login_left .login_title span {display: block; margin-top: 30px; font-family: var(--font-l); color: #fff; font-size: 18px;} 

.login_right {width: 75%; position: absolute; top: 0; right: 0; bottom: 0;}

.login_right .login_inner {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 400px;}
.login_right .login_inner img {width: 230px;margin: 0 auto 50px;display: block;}
.login_right .login_inner > p {font-size: 26px; margin-bottom: 15px; font-family: var(--font-sb);} 
.login_right .login_inner > span {margin-bottom: 40px;display: block;word-break: keep-all;} 

.login_right .login_inner form div {margin-bottom: 20px; text-align: left;}
.login_right .login_inner form div span {display: block; font-size: 14px; margin-bottom: 8px; font-family: var(--font-m);}
.login_right .login_inner form div input {width: 100%;padding: 15px;border: 1px solid #ddd;border-radius: 5px;font-size: 15px;height: 55px;margin-top: 10px;}
.login_right .login_inner form div input:focus {border: 1px solid var(--m-color);}
.login_right .login_inner form button {width: 100%;color: white;border: none;cursor: pointer;background-color: var(--m-color);padding: 20px;font-size: 16px;margin: 0 0 30px;border-radius: 5px;}


/* 태블릿 */
@media screen and (max-width: 1200px) {
    .login_left, .login_right {width: 50%;}
    .login_right .login_inner {width: 100%; padding: 0 30px;}
}
/* 모바일 */
@media screen and (max-width:767px){
    .login_wrap {display: inline-block; height: auto;}
    .login_left, .login_right {width: 100%;}

    
    
    .login_left .login_title {width: 100%; top: 7%; left: 50%; transform: translateX(-50%); text-align: center;}
    .login_left .login_title p {font-size: 30px;}
    .login_left .login_title span {display: none;}


    .login_left video {display: block;}
    .login_left .video_wrap {height: 100vh;}


    .login_wrap .login_right {position: absolute; top: 50%; transform: translate(-50%, -50%); width: 80%; left: 50%; right: inherit; bottom: inherit;} 
    .login_wrap .login_right .login_inner img {display: none;}

    .login_right .login_inner {top: inherit; transform: inherit; left: inherit; background-color: #fff; padding: 25px; width: 300px;}
    .login_right .login_inner > p {font-size: 20px;}
    .login_right .login_inner > span {margin-bottom: 30px; font-size: 14px; line-height: 20px;}
    .login_right .login_inner form div span {font-size: 13px; margin-bottom: 5px;}
    .login_right .login_inner form div input {height: 45px; padding: 10px; font-size: 14px; background-color: inherit}
    .login_right .login_inner form button {padding: 15px; font-size: 15px; margin: 0;}


}
/* 폴드 */
@media screen and (max-width: 374px) {}