@charset "UTF-8";

body{
	display: flex;
	align-content: center;
	justify-content: center;
	height: 100vh;
	background-color: var(--white-color-40);	
	overflow: hidden;
}

.loginbackground {
/*     background-image: url(/onm/img/video/background.mp4); */
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    object-fit: cover;
    background-repeat: no-repeat;
}

.loginbackground video{
	width: 100%;
	height: 100%;
	object-fit: cover;
    background-repeat: no-repeat;
}		
		
.loginCon{
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	
}
.loginWarp{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: calc(460px - 3rem );
    max-height: calc(640px - 3rem );
    width: 30%;
    height: 70%;
    padding: 1.5rem;
    gap: 1rem;
    background-color: var(--white-color-40);
    border-radius: var(--small-radius);
}
.loginheader{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.logobox{
	width: 100%;	
	display: flex;
	align-items: center;
	justify-content: center;
}
.logobox img{
	width: 60%;
}
.loginbody{
	display: flex;
	flex-direction:column;
	width: 100%;	
}
.loginForm{
	display: flex;
	flex-direction: column;
	width: 100%;
	justify-content: center;
	align-items: center;
	gap:1rem;
}
.loginBtnWarp{
	width: 100%;
	display:flex;
	align-items: center;
	justify-content: center;
	margin-top:2.5rem;
}
.inputWarp{
	width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top:1rem;
    align-items: center;
}
.inputWarp .input-group{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	
}
.input-group input{
	max-width: calc(320px - 0.8rem);
	height:2.5rem;
	width: 100%;
	border: solid 1px var(--gray-color-60);
	border-radius: var(--small-radius);
	padding-left: 0.8rem;
	background-color: var(--white-color-50); 
		
}
.info-text{
	margin-top: 1rem;
    font-size: var(--tooltip);
    color: var(--gray-color-90);
    font-weight: var(--light);
    text-align: center;
}

input::placeholder,
textarea::placeholder {
	font-size:var(--input-text);
	color:var(--gray-color-60);
	font-family: 'pretendard';
}
input:focus {
  background-color: var(--white-color-30); 
  border: solid 2px var(--main-color-70) !important;
  box-shadow: 0 0 5px var(--main-color-70);
  outline: none;
}
.login-btn{
	width: 100%;
/* 	max-width:320px; */
	max-width: calc(320px - 0.8rem);
	max-height:3.5rem;
	padding: 0.815rem 1.125rem; 
	border:0;
	cursor: pointer;
	transition:0.3s all;
	background-color:var(--white-color-100);
	border-radius: var(--small-radius);
	font-size:var(--button-text);
	font-weight: var(--light);
}
.login-btn:hover{
	background-color: var(--main-color-100);
	color:var(--white-color-100);
	transition:0.3s all;
	font-weight: var(--bold);
}
.copy p{
    font-size: var(--tooltip);
    color: var(--black-color-90);
    margin: 0;
    padding: 0;
    padding-top: 12px;
}