#page {
    transform: translateY(0px);
    padding-bottom: 0px;
}

.form_group {
    position: relative;
    border-bottom: 1px solid #000;
}
.form_group.fault{
    border-bottom: 2px solid #aa0505;
}
.form_group .notice{
    position: absolute;
    bottom: 0;
    transform: translateY(170%);
    color: #aa0505;
    text-align: center;
    width: 100%;
}
.form_group input::placeholder {
    color: #ccc;
}

.form_group input {
    background-color: transparent;
}

.form_group input:focus {
    outline: none;
    border: 0px;
    box-shadow: none;
}

#pwd_ctrl~#pwd_ctrl_btn span {
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../src/login/pwd_hide.svg');
}

#pwd_ctrl:checked~#pwd_ctrl_btn span {

    background-image: url('../src/login/pwd_show.svg');
}

#login_btn.active{
    background-color: #aa0505;
    border-color: #aa0505;
    color: white;
}

@media(orientation: portrait){
    .form_group .notice{
        font-size: 2.4vw;
    }
    .form_group input {
        padding: 3.6vw 0px;
        font-size: 4.2vw;
    }
    @media(min-width: 640px){
        .form_group .notice{
            font-size: 1.5vw;
        }
        .form_group input {
            padding: 2.2vw 0px;
            font-size: 2vw;
        }
    }
}
@media(orientation: landscape){
    .form_group .notice{
        font-size: 1.2vw;
    }
    .form_group input {
        padding: 1.8vw 0px;
        font-size: 2.4vw;
    }
    @media(min-width: 768px){
        .form_group .notice{
            font-size: .9vw;
        }
        .form_group input {
            padding: 1.3vw 0px;
            font-size: 1.5vw;
        }
    }
    @media(min-width: 1536px){
        .form_group .notice{
            font-size: .6vw;
        }
        .form_group input {
            padding: .9vw 0px;
            font-size: 1.05vw;
        }
    }
}