.login-background {
    background: url('./img/login/background.png') no-repeat center center;
    background-size: cover;
    height: 100vh;
    padding: 0;
}

    .login-background .logo {
        background-color: rgba(0,0,0,0);
        width: 295px;
        padding: 20px 33px 10px 16px;
        text-align: center;
        margin: auto;
        /* border-radius: 5px 5px 0px 0px; */
    }


    .login-background form h2 {
        color: #EAFFF1;
        font-weight: 600;
        margin-top: 15px;
    }


    .login-background .form-group input {
        width: 100%;
        padding-left: 15px;
        border-radius: 0;
        font-weight: 500;
        background-color: #BFC7CA;
        font-size: 20px;
        max-width: 100%;
    }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0px 0px 4px rgba(255,255,255) inset !important;
    -webkit-transition-delay: 99999s;
    -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
    color: #4c596f;
    opacity: 1; /* Firefox */
}

.login-background :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #4c596f;
}

.login-background ::-ms-input-placeholder { /* Microsoft Edge */
    color: #4c596f;
}

.login-background .form-check {
    padding-left: 20px;
    padding-right: 10px;
    /*margin:auto;*/
    display: flex;
}

    .login-background .form-check input[type="checkbox"] {
        border-radius: 0;
    }

        .login-background .form-check input[type="checkbox"]:focus {
            outline: none;
        }

.login-background .form-check-label {
    margin-bottom: 20px;
    color: #4c596f;
    font-size: 16px;
    /*font-weight: 500;*/
}

.login-background .btn-group {
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    display: flex;
    width: 100%;
    justify-content: space-around;
}

.verticate {
    display: flex;
}

    .verticate img {
        height: 42px;
        padding-left: 10px;
        border-radius: 3px;
    }

.forget_pw a {
    font-size: 18px;
    color: #1168E7;
    font-weight: 700;
}

.form-rememberMe {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rememberMe-box {
    display: flex;
    align-items: center;
}

.form-rememberMe label {
    margin: 0;
    font-size: 18px;
    color: #120C0C;
    font-weight: 500;
}

.login button {
    font-size: 18px;
}


.login-background .login_button button {
    background: #2C4EA5;
    width: 100%;
    color: white;
}

    .login-background .login_button button:hover {
        background: #4872dd;
        transition: ease-out 0.5s
    }




/*    ³]­p*/
@media only screen and (min-width: 1200px) {
    .login-background {
        background: url('./img/login/background.png') no-repeat center;
        background-size: cover;
        height: 100vh;
        padding: 0;
    }

    .title img {
        margin-bottom: 40px;
        scale: calc(100% - 13%);
    }

    .login-background .login_title {
        padding: 70px 85px 0 0;
    }

        .login-background .login_title h1 {
            margin-top: calc(100% - 98%);
            font-size: 3.5vw;
            color: white;
            text-align: end;
        }

        .login-background .login_title h2 {
            font-size: 3vw;
            color: white;
            text-align: end;
            font-weight: 600;
        }

    .login-background .login {
        margin-left: calc(100% - 97%);
    }

    .login-background #loginForm {
        padding-right: calc(100% - 23%);
    }

    .login-background .login_button {
        margin-top: 130px
    }

    .form-rememberMe input {
        width: 25px;
        height: 25px;
        margin: 0 12px 0 0;
    }

    .login-background .login_title .title_wrap {
        width: 550px;
        display: contents;
    }

        .login-background .login_title .title_wrap div {
            display: flex;
            justify-content: end;
        }
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .login-background {
        background: url('./img/login/background.png') no-repeat right;
        background-size: cover;
        height: 100vh;
        padding: 0;
        display: flex;
    }

        .login-background .login #loginForm {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 280px;
        }

            .login-background .login #loginForm form {
                width: 280px;
            }

                .login-background .login #loginForm form img {
                    width: 80%;
                    margin-bottom: 60px;
                }

        .login-background .login {
            height: 474px;
            background: #E7E7E7;
            display: flex;
            justify-content: center;
            padding-top: 30px;
        }

        .login-background .form-group input, .login-background .login_button button {
            height: 40px;
            line-height: 0;
        }

        .login-background .container-fluid {
            width: 366px;
            margin: auto;
        }

        .login-background .login_title .title_wrap h2 {
            color: #FFF;
            text-align: right;
            font-size: 25px;
            font-weight: 600;
            line-height: normal;
            margin: 10px 0 0;
        }

        .login-background .login_title .title_wrap h1 {
            color: #FFF;
            text-align: right;
            font-size: 30px;
        }

        .login-background .form-label {
            margin-bottom: 20px
        }

    .form-rememberMe input {
        width: 25px;
        height: 25px;
        margin: 0 20px 0 0;
    }

    .rememberMe-box {
        margin-bottom: 90px
    }
}

@media only screen and (max-width: 767px) {
    .login-background {
        background: url('./img/login/background.png') no-repeat center;
        background-size: cover;
        height: 100vh;
        padding: 0;
        justify-content: center;
    }

        .login-background .login #loginForm {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 280px;
        }

            .login-background .login #loginForm form {
                width: 280px;
            }

                .login-background .login #loginForm form img {
                    width: 80%;
                    margin-bottom: 60px;
                }

        .login-background .login {
            background: #E7E7E7;
            display: flex;
            justify-content: center;
            padding: 30px 0;
        }

        .login-background .form-group input, .login-background .login_button button {
            height: 40px;
            line-height: 0;
        }

        .login-background .container-fluid {
            padding-right: 20px !important;
            padding-left: 20px !important;
        }

        .login-background .login_title .title_wrap h2 {
            color: #FFF;
            text-align: right;
            font-size: 25px;
            font-weight: 600;
            line-height: normal;
            margin: 20px 0 0;
        }

        .login-background .login_title .title_wrap h1 {
            color: #FFF;
            text-align: right;
            font-size: 30px;
            margin-bottom: 60px;
        }

        .login-background .form-label {
            margin-bottom: 20px
        }

    .form-rememberMe input {
        width: 25px;
        height: 25px;
        margin: 0 20px 0 0;
    }

    .rememberMe-box {
        margin-bottom: 90px
    }
}

/*³]­p*/