ul.ul04 { padding-top: 30px !important;}
ul.ul04 li {
    width: 25%;
    text-align: center;
    vertical-align: top;
    padding: 0 3% 30px;
}
ul.ul04 li span.name {
    display: block;
    text-align: center;
    margin-top: 5px;
    font-size: 12px;
    color: #0071bc;
}
ul.ul04 li span.date {
    display: block;
    text-align: center;
    font-size: 11px;
    color: #000;
}

body { background-color: #f2f2f2;}
header#header { background: #fff;}
.nav { background: #fff;}
#wrapper { padding-bottom: 0;}
.container {
    margin: 0 auto;
    padding: 75px 0 0;
    width: 378px;
}

.error-message {
    color: #f15a24;
    font-weight: bold;
    font-size: 14px;
}

#flashMessage + .admin.login-index {
    padding: 20px 0 0;
}

.input.error {
    border: none;
}

/* .admin.login-index */
.admin.login-index {
    margin: -40px 0 0;
}
.admin.login-index .form-signin-heading {
    margin: 0;
    padding: 0 0 15px;
    font-size: 15px;
    font-weight: bold;
    line-height: 1;
}
.admin.login-index .form-signin-heading span {
    display: block;
    margin: 0 auto;
}

/* .login-index */
.login-index form {
    padding-bottom: 30px;
}
.login-index ul.links {
    margin-top: 18px;
}
.login-index ul.links li {
    margin-top: 5px;
    text-align: left;
    font-size: 13px;
}
.login-index ul.links li:before {
    font-family: 'Fontawesome';
    content: '\f059';
    margin-right: 3px;
}

#flashMessage {
    margin: -40px 0 0;
    padding: 0 0 15px;
    color: #f15a24;
    font-weight: bold;
}
.login-index .context-outer {
    max-width: 940px;
    margin: 0 auto;
}
.login-index .context-inner {
    border-radius: 4px;
    background-color: #fff;
}
.login-index .context-inner header {
    background-color: #f8f8f8;
    text-align: left;
}
.login-index .context-inner header h1 {
    margin: 0;
    padding: 15px 25px;
    font-size: 14px;
    font-weight: bold;
}
.login-index .context-inner header h1:before {
    font-family: 'Fontawesome';
    content: '\f15b';
    margin-right: 6px;
    color: #999;
}
.login-index .context-inner p {
    margin: 20px 0 0;
    padding: 0;
}
.login-index #UserUsername {
    box-sizing: border-box;
    border-radius: 4px 4px 0 0;
    border-bottom: none;
    padding: 16px;
    height: auto;
}
.admin.login-index #UserUsername {
    border-radius: 4px 4px 0 0;
    border-bottom: none;
    padding: 16px;
    height: auto;
}
.login-index #UserPassword {
    box-sizing: border-box;
    border-radius: 0 0 4px 4px;
    padding: 16px;
    height: auto;
}
.admin.login-index #UserPassword {
    border-radius: 0 0 4px 4px;
    padding: 16px;
    height: auto;
}
.login-index .checkbox {
    text-align: left;
    padding: 0 0 5px;
}
.login-index .context-inner .items {
    overflow: hidden;
}
.login-index .context-inner .item {
    float: left;
    width: 22%;
    margin: 30px 1.5% 0;
    padding: 0 0 30px;
    text-align: center;
}
.login-index .context-inner .item span {
    display: block;
    margin: 0 auto;
}
.login-index .context-inner .item .img {
    max-width: 104px;
    margin: 0 auto;
}
.login-index .context-inner .item .img img {
    width: 100%;
    height: auto;
}
.login-index .context-inner .item a:link .date,
.login-index .context-inner .item a:visited .date,
.login-index .context-inner .item a:hover .date,
.login-index .context-inner .item a:active .date {
    color: #333;
    text-decoration: none;
}
.login-index .context-inner .item .name {
    margin-top: 10px;
}
.login-index .context-inner .item .date {
    margin-top: 3px;
    font-size: 11px;
}
.login-index .attention {
    display: block;
    margin-top: 10px;
    text-align: center;
}

#wrapper .footer {
    margin: 40px 0 0;
    padding: 30px 0 25px;
    background-color: #e6e6e6;
    text-align: center;
}
#wrapper .footer h4 {
    margin: 0;
    padding: 0;
    font-size: 15px;
    font-weight: bold;
}
#wrapper .footer p {
    margin: 5px 0 0;
    padding: 0;
    font-size: 12px;
}
#wrapper .footer p.tel {
    margin: 5px 0 0;
    font-size: 14px;
}
#wrapper .footer p.tel i {
    margin-right: 3px;
}

/* .login-reminder */
.admin.login-reminder {
    margin: -35px 0 0;
}
.login-reminder .container {
    padding-bottom: 80px;
}
.login-reminder .header {
    text-align: left;
    text-align: left;
    margin: 25px 0 0;
    padding: 0 0 20px;
}
.login-reminder .form-signin-heading {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: bold;
}
.login-reminder .input-wrap p {
    text-align: left;
    margin: 10px 0 0;
    padding: 0;
    font-size: 13px;
}
.login-reminder .input-wrap .desc {
    margin: 10px 0 0;
    padding: 0 0 15px;
}
.login-reminder #UserUsername {
    padding: 22px 16px;
}
.admin.login-reminder #UserUsername {
    padding: 16px;
}
.login-reminder .input-wrap button {
    margin: 20px 0 0;
    font-size: 16px;
}
.login-reminder .input-wrap button i {
    margin-right: 4px;
}
.login-reminder .input-wrap .footer {
    text-align: left;
    margin: 10px 0 0;
}
.login-reminder .input-wrap .footer i {
    margin-right: 4px;
}

/* .login-code */
.login-code .container {
    padding-bottom: 80px;
}
.login-code .form-signin-heading {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: bold;
}
.login-code .input-wrap p {
    text-align: left;
    margin: 10px 0 0;
    padding: 0;
    font-size: 13px;
}
.login-code .input-wrap p b {
    color: #333;
}
.login-code .input-wrap .desc {
    margin: 10px 0 0;
    padding: 0 0 15px;
}
.login-code .input-wrap button {
    margin: 20px 0 0;
    font-size: 16px;
}
.login-code .input-wrap button i {
    margin-right: 4px;
}
.login-code .input-wrap .footer {
    text-align: left;
    margin: 10px 0 0;
}
.login-code .input-wrap .footer i {
    margin-right: 4px;
}
.login-code .context-inner {
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.2);
}
.login-code .context-inner header {
    background-color: #f8f8f8;
}
.login-code .context-inner header h1 {
    margin: 0;
    padding: 15px 10px;
    font-size: 15px;
    font-weight: bold;
}
.login-code .context-inner p {
    margin: 10px 0 0;
    padding: 0 0 10px;
    font-size: 70px;
    font-weight: bold;
}

/* .login-setpass */
.login-setpass .container {
    padding-bottom: 80px;
}
.login-setpass .form-signin-heading {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: bold;
}
.login-setpass .input-wrap p {
    text-align: left;
    margin: 10px 0 0;
    padding: 0;
    font-size: 13px;
}
.login-setpass .input-wrap p b {
    color: #333;
}
.login-setpass .input-wrap .desc {
    margin: 10px 0 0;
    padding: 0 0 15px;
}

.login-setpass .context-inner header {
    background-color: #f8f8f8;
    text-align: left;
}
.login-setpass .context-inner header h1 {
    margin: 0;
    padding: 10px;
    font-size: 15px;
    font-weight: bold;
}
.login-setpass .context-inner header h1:before {
    font-family: 'Fontawesome';
    content: '\f15b';
    margin-right: 3px;
}
.login-setpass .context-inner p {
    margin: 20px 0 0;
    padding: 0;
}
.login-setpass .input-wrap label {
    display: none;
}
.login-setpass .input-wrap button {
    margin: 20px 0 0;
    font-size: 16px;
}
.login-setpass .input-wrap button i {
    margin-right: 4px;
}
.login-setpass .input-wrap .footer {
    text-align: left;
    margin: 10px 0 0;
}
.login-setpass .input-wrap .footer i {
    margin-right: 4px;
}

/* .login-setpass-done */
.login-setpass-done .input-wrap p {
    text-align: center;
    margin-top: 20px;
}
.login-setpass-done .btn-primary.done {
    margin-top: 10px;
}



.input-wrap input[type='text'],
.input-wrap textarea {
    padding: 20px 10px;
}
input.form-error:invalid,
textarea.form-error:invalid {
    background-color: #ffeee6;
}
.error-message {
    text-align: left;
    margin-top: 5px;
}
.error-message b {
    color: #f15a24;
    font-weight: bold;
}
.input-wrap .input {
    padding: 0 0 20px;
}
.input-wrap .input.secondary {
    padding: 0;
}

.btn-primary {
    border-radius: 22px;
}
.btn-lg {
    font-size: 15px;
}

.btn-primary.done,
.login-setpass a.done:link,
.login-setpass a.done:visited,
.login-setpass a.done:hover,
.login-setpass a.done:active {
    color: #fff ;
    padding-left: 50px;
    padding-right: 50px;
}

@media screen and (max-width:940px) {
    #bredclumb {
        padding: 0 3%;
    }
    .login-index .context-outer {
        box-sizing: border-box;
        max-width: 940px;
        margin: 0 auto;
        padding: 0 3%;
    }
    #contents { padding: 30px 0;}

}

@media screen and (max-width:520px) {
    ul.ul04 li {
        display: inline-block !important;
        width: 50%;
        text-align: center;
        vertical-align: top;
        padding: 0 3% 30px;
    }
}

@media screen and (max-width:420px) {
    #flashMessage {
        margin: 0;
    }
    .container {
        box-sizing: border-box;
        margin: 0 auto;
        padding: 30px 3% 0;
        width: 100%;
    }
    .login-index .context-inner .item {
        float: left;
        width: 30.3%;
        margin: 15px 1.5% 0;
        padding: 0 0 15px;
    }
    .login-index .context-inner .item {
        float: left;
        width: 22%;
        margin: 30px 1.5% 0;
        padding: 0 0 30px;
    }
    .login-index .attention {
        text-align: left;
        padding-left: 3%;
        padding-right: 3%;
        font-size: 11px;
    }
    #wrapper .footer h4 {
        margin: 0;
        padding: 0;
        font-size: 13px;
        font-weight: bold;
    }
    #wrapper .footer p.tel {
        font-size: 16px;
    }
    .login-index .context-inner .item .name {
        font-size: 12px;
        margin-top: 5px;
    }
}