@media (max-width: 767px) {
    .login_area .row {
        display: block;
    }

    .login_cont .col-sm-3 {
        display: none;
    }

    .login_cont {
        padding: 20px 0px;
    }

    .login_cont .col-sm-4 {
        margin-bottom: 20px;
    }

    .security_left {
        width: 65%;
    }

    .security_right {
        width: 35%;
    }

    .security_right input {
        padding: 5px;
    }

    .keyboard {
        padding: 20px 10px;
    }

    .footer_container ul li {
        padding: 5px 10px;
    }
    .page_wrap {
        width: 100%;
    }
    .account_box {
        margin-top: 20px;
    }
}

@media (min-width: 320px) and (max-width: 479px) {
    .virtual_keyboard li.space {
        width: calc(80% - 15px);
    }

    .virtual_keyboard li {
        width: calc(20% - 15px);
    }

    .virtual_keyboard br {
        display: none;
    }

    .security_head {
        font-size: 13px;
    }

    .secuiry_desc {
        font-size: 11px;
        line-height: 13px;
    }

    .login_input {
        padding: 20px 10px;
    }

    .virtual_note {
        font-size: 11px;
    }
}

@media (min-width: 480px) and (max-width: 639px) {
    .virtual_keyboard li {
        width: 30px;
        height: 30px;
        margin: 12px 4px;
    }

    .virtual_keyboard li.space {
        width: 280px;
    }
}

@media (min-width: 640px) and (max-width: 767px) {}

@media (min-width: 768px) and (max-width: 991px) {
    .login_cont .col-sm-3 {
        display: none;
    }

    .login_cont .col-sm-4 {
        width: 40%;
    }

    .login_cont .col-sm-5 {
        width: 60%;
    }

    .login_input {
        padding: 20px 10px;
    }

    .keyboard {
        padding: 20px 10px;
    }

    .virtual_keyboard li {
        width: 30px;
        height: 30px;
        margin: 12px 4px;
    }

    .login_cont {
        padding: 20px 0px;
        min-height: calc(100vh - 150px);
    }

    .login_point .col-sm-4 {
        width: 33.33%;
    }

    .login_point_box {
        padding: 15px 10px;
    }

    .login_point_image {
        margin-right: 10px;
    }

    .login_point_txt {
        padding-left: 10px;
    }

    .security_head {
        font-size: 12px;
    }

    .secuiry_desc {
        font-size: 10px;
    }
    .account_main .col-sm-6 {
        width: 100%;
    }
    .account_box {
        margin-top: 20px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .login_cont {
        padding: 25px 0px;
    }

    .footer_container ul li a {
        font-size: 11px;
    }

    .keyboard {
        padding: 20px 10px;
    }
    .login_input {
        padding: 20px 10px;
    }
    .virtual_keyboard li {
        width: 28px;
        height: 28px;
        margin: 12px 3px;
    }
    .virtual_keyboard li.space {
        width: 255px;
    }
}

@media (min-width: 1200px) and (max-width: 1365px) {
    .virtual_keyboard li {
        width: 30px;
        height: 30px;
        margin: 12px 4px;
    }
    .virtual_keyboard li.space {
        width: 280px;
    }
    .login_point_txt {
        min-height: 48px;
    }
}
@media (min-width: 1366px) and (max-width: 1439px) {
    .virtual_keyboard li {
        width: 32px;
        height: 32px;
    }
}

@media (min-width: 768px) {
    .error_modal .modal-dialog, .success_modal .modal-dialog {
        width: 375px;
    }
}