@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap');

* {margin: 0; padding: 0; box-sizing: border-box;}
body {
	font-family: 'Noto Sans KR', sans-serif;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	/* background: url("granus.png") no-repeat center; */
	/* background-size: cover; */
}
body::before {
	content: "";
	position: absolute; z-index: 1;
    top: 0; right: 0; bottom: 0; left: 0;
	background-color: rgba(0,0,0,.6);
}
.login-form {
    position: relative; 
    z-index: 2;
}
.login-form h1 {
	font-size: 32px;
	color: #fff;
	text-align: center;
	margin-bottom: 60px;
}
.login-form img {
    width: 400px;
	text-align: center;
	margin-bottom: 80px;
	/* filter: brightness(60%); */
}
.int-area {
	width: 400px; position: relative;
	margin-top: 20px;
}
.int-area:first-child {margin-top: 0;}
.int-area input {
	width: 100%;
	padding: 20px 10px 10px;
	background-color: transparent;
	border: none;
	border-bottom: 1px solid #999;
	font-size: 18px; color: #fff;
	outline: none;
}
.int-area label {
	position: absolute; left: 10px; top: 15px;
	font-size: 18px; color: #999;
	transition: all .5s ease;
}
.int-area label.warning {
    color: red !important;
    animation: warning .3s ease;
    animation-iteration-count: 3;
}
@keyframes warning {
    0% {transform: translateX(-8px);}
    25% {transform: translateX(8px);}
    50% {transform: translateX(-8px);}
    75% {transform: translateX(8px);}
}
.int-area input:focus + label,
.int-area input:valid + label {
	top: 0;
	font-size: 13px; color: #166cea;
}

.btn-area {margin-top: 50px;}
.btn-area button {
    width: 100%; height: 50px;
    background: #36cdcd;
    color: #fff;
    font-size: 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
}