﻿
body { background-image: url(/src/content/images/login-bg.jpg); background-position: center; background-size: cover; }

.form-control, .input-group, input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea { margin: 0; -webkit-appearance: none; color: #000; border-color: #cccbcb; height: 40px; }

.register-frame { margin: auto 70px; }

.form-horizontal .form-group { border-bottom: 0px; }

.validation-summary-errors ul { list-style: none; padding: 5px 0 0 8px; }


/*--------------------登录页--------------------------*/
.body-login { margin-left: -15px; margin-right: -15px; }
.login-content { margin: auto; width: 380px; margin-top: 7%; border: 1px solid #e1e1e1; padding: 0; border-radius: 5px; }
.login-content input { max-width: 100% !important; }

@media (max-width: 767px) {
    .login-content { width: 370px; }
}

@media (max-width: 375px) {
    .login-content { width: 365px; }
}

@media (max-width: 320px) {
    .login-content { width: 310px; }
}

.login-content .login-header { }
.login-content .login-form { padding: 10px 25px 0 25px; margin-top: 8px; }

.login-content { background: #fff; min-height: 320px; border-radius: 8px; box-shadow: #999 0 2px 10px; -moz-box-shadow: #999 0 2px 10px; -webkit-box-shadow: #999 0 2px 10px; }

.login-content .form-control { border: 0; }

.login-form, .qr-form { border-color: transparent; margin-top: 8px; }

.qr-form { width: 260px; margin: auto; margin-top: 28px; margin-bottom: 58px; padding: 10px; border: 1px solid #0069aa; text-align: center; }

.qr-form .desc { font-size: 12px; }

#img { margin: auto; width: 240px; height: 240px; }

#img img { width: 100%; }

.swtich-login { cursor: pointer; }

.swtich-login span { font-size: 76px; color: #000; }

h3.login-title { position: relative; width: 60%; text-align: center; font-weight: 900; margin: 35px auto -60px auto; }

h3.login-title::before { content: ''; position: absolute; height: 2px; background: #000; width: 15%; top: 40px; left: 35%; }

h3.login-title::after { content: ''; position: absolute; height: 2px; left: 50%; background: #0069aa; width: 15%; top: 40px; }

.login-form .form-control, .login-form .form-control:focus, form-control:active { background: #fff; height: 40px; box-shadow: none; border-left: 0; }

.login-form .input-group-addon { border: 0; background-color: #fff; }

.login-form .split { margin-top: 10px; margin-bottom: 10px; }

.login-form .other-login { padding-top: 5px; margin-bottom: 30px; }

.login-form .other-login a { text-decoration: none; }

.login-form .other-login i { font-size: 1.2em; color: rgb(255, 167, 88); }

.login-form .form-control-top, .login-form .form-control-top:focus, form-control-top:active, .login-form .input-group-addon-top { }

.login-form .form-control-bottom, .login-form .form-control-bottom:focus, .login-form .input-group-addon-bottom { border: none; }

.login-form .input-group { margin-top: 1px; border: 1px solid #ccc; border-radius: 3px; }

.login-form .btn-desktop-default { line-height: 2em; background-color: #5d9cec; color: #fff; border-color: #3891f8; }

.iframe { width: 100%; }

.account-icon { width: 30px; font-size: 1.2em; display: inline-block; }

.span-remember-me { display: inline-block; }

.remember-row { margin-top: 13px; display: flex; }

.password-row { margin-top: 13px; }

.swtich-login span.login-title-small { font-weight: normal; font-size: 18px; text-decoration: underline; color: #333; }

.login-logo { text-align: center; margin-top: 20px; }

.login-logo img { width: 70px; height: 70px; }

.mobile-other-login { position: absolute; bottom: 15px; width: 100%; height: 90px; left: 0; }

.mobile-other-login .login-split-title { display: block; width: 60px; margin: auto; }

.mobile-other-login .login-split-title:before { position: absolute; left: 15px; width: 33%; height: 1px; background: #ddd; top: 9px; content: ''; }

.mobile-other-login .login-split-title:after { position: absolute; right: 15px; width: 33%; height: 1px; background: #ddd; top: 9px; content: ''; }

.mobile-other-login .login-media-group { margin-top: 10px; }

.mobile-other-login .login-media { width: 30px; height: 30px; display: inline-block; border-radius: 50%; color: #fff; background: rgb(137, 199, 237); line-height: 30px; }

.mobile-other-login .login-media.media-weibo { background: rgb(248, 164, 146); }

.mobile-other-login .desc { padding-top: 5px; }

.login-footer { bottom: 30px; position: absolute; text-align: center; width: calc(100% - 20px);color:#999999;font-size:12px;}

@media (min-width: 1000px) { .iframe { width: 760px; padding: 60px 0; position: absolute; left: calc(50% - 380px); top: calc(50% - 320px); border-radius: 8px; }
}

@media (min-width: 420px) {
    .mobile-other-login .login-split-title:before { width: 38%; }

    .mobile-other-login .login-split-title:after { width: 38%; }
}

@media (max-width: 767px) {
    body { background: none; }

    .iframe { margin: auto; width: 100%; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; }

    .login-content { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; }

    .login-content .login-form { padding: 10px 15px 0 15px; margin-top: 10px; }

    .register-frame { margin: auto; }

    .swtich-login { position: absolute; right: 15px; top: 20px; }

    .login-content { width: 100%; margin: auto; border: none; position: initial; }

    .account-icon { color: #0069aa; }

    .login-form .input-group { border-radius: 0; border: 0; border-bottom: 1px solid #ddd; }

    .password-row { margin-top: 0; }

    .submit-row { margin-top: 25px; }

    .qr-form { border-color: #fff; margin-top: 0 }

    #img { border: 1px solid #0069aa; margin-top: 25px }

    .qr-title h3 { padding-bottom: 5px; margin-bottom: 0; font-weight: 600; font-size: 28px }

    .login-footer { bottom: 90px; }
}

@media (max-height: 480px) {
    .login-logo img { width: 50px; height: 50px; }

    .login-content .login-form { margin-top: 0 }

    .password-row { margin-top: 0 }

    .mobile-other-login { bottom: 5px; }
}
