.login{
    display: flex;
    width: 100%;
    min-height: 100vh;
    background-image: url(../images/img/project/BG.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    justify-content: center;
    align-items: center;
}

.login .row{
    justify-content: center;
    align-items: center;
}

.FormArea{
    padding: 20% 5%;
    background-color: rgba(255,255,255,.85);
    position: relative;
    z-index: 2;
}

.FormArea .plate{
    position: absolute;
    bottom: 0%;
    right: 0%;
    width: 40%;
    z-index: 0;
}

.FormArea form{
    position: relative;
    z-index: 2;
}

h1.title{
    font-family: 'Noto Serif TC', serif;
    text-align: center;
    padding-bottom: 3%;
    font-size: 1.8rem;
}

.dataarea{
    padding-bottom: 3%;
}

input[type="text"],input[type="submit"],input[type="password"]{
    font-size: 1.2rem;
    width: 100%;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    outline: none;
    border: none;
    background: transparent;
}

input[type="text"]{
    color: #2F2F2F;
    border-bottom: 1px solid #2F2F2F;
    padding-bottom: 2%;
}

input[type="password"]{
    color: #2F2F2F;
    border-bottom: 1px solid #2F2F2F;
    padding-bottom: 2%;
}

input[type="submit"]{
    color: #fff;
    background-color: #004682;
    text-align: center;
    padding: 3% 0%;
    cursor: pointer;
}

input[type="checkbox"]{
    border: 1px solid #ACACAC;
    background-color: #ACACAC;
    color: #fff;
}

::-webkit-input-placeholder {
    color: #2F2F2F;
    letter-spacing: 2px;
    font-weight: 600;
}

:-moz-placeholder {
    color: #2F2F2F;
    letter-spacing: 2px;
    font-weight: 600;
}

::-moz-placeholder {
    color: #2F2F2F;
    letter-spacing: 2px;
    font-weight: 600;
}

:-ms-input-placeholder {
    color: #2F2F2F;
    letter-spacing: 2px;
    font-weight: 600;
}