@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("bg.jpg") 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,.7);
}
.login-form {position: relative; z-index: 2;}
.login-form h1 {
    font-size: 32px; color: #fff;
    text-align: center;
    margin-bottom: 60px;
} 

.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: top .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: -2px;
    font-size: 13px; color: #166cea;
}  
.btn-area {margin-top: 30px;}
.btn-area button {
    width: 100%; height: 50px;
    background: #166cea;
    color: #fff;
    font-size: 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
}

.caption{
    margin-top: 20px;
    text-align: center;

}
.caption a {
    font-size: 15px; color: #999;
    text-decoration: none;
}