html { font-size: 16px; -ms-overflow-style: auto; } .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus { outline: none; box-shadow:none; } body { color: #797979; background: #f1f2f7; -webkit-overflow-scrolling: touch; font-family:'Microsoft YaHei'; } a { color: #007bff; text-decoration: none; } a:hover { color: #17a2b8; text-decoration: none; } .container-fluid { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; min-width: 1000px; } .login-container { min-height: 500px; box-shadow: 0px 20px 80px 0px rgba(0,0,0,0.3); display: flex; width: 1000px; } .login-container section { width: 50%; } .login-container .login-sidebox { position: relative; background: -webkit-gradient(linear, left bottom, left top, from(#3a485a), to(#607089)); background: linear-gradient(0deg, #3a485a 0%, #607089 100%); color: #fff; } .login-container .login-sidebox::before, .login-container .login-sidebox::after { content: ''; top: 0; right: 0; bottom: 0; left: 0; position: absolute; } .login-container .login-sidebox::before { background: url(image/left-1.png) no-repeat 0 0; } .login-container .login-sidebox::after { background: url(image/left-2.png) no-repeat right bottom; } .login-container .login-sidebox .login-sidebox-content { padding: 80px 80px 48px; position: relative; z-index: 1; } .login-sidebox-header { margin-bottom: 40px; } .login-sidebox-logo { display: flex; align-items: center; margin-bottom: 14px; } .login-sidebox-logo img { width: 48px; height: auto; border-radius: 50%; margin-right: 14px; } .login-sidebox-logo span { display: inline; font-size: 1.5rem; font-weight: 700; } .login-sidebox-subtitle { font-size: 20pt; font-weight: normal; } .login-sidebox-footer { margin-top: 40px; border-top: solid 1px #ddd; padding-top: 28px; font-size: 0.875rem; font-weight: 500; } .login-sidebox-footer a { cursor: pointer; color: #fff; } .login-form { padding: 64px; font-size: 0.875rem; } .login-form-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; } .login-form-header h2 { margin-bottom: 0; font-size: 1.714rem; } .login-other { display: table; text-align: center; white-space: nowrap; margin: 0.25rem 0 0.625rem 0; } .login-other { display: table; text-align: center; white-space: nowrap; margin: 0.25rem 0 0.625rem 0; } .login-other:before, .login-other:after { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC"); content: ''; display: table-cell; position: relative; top: 50%; width: 50%; background-repeat: no-repeat; } .login-other:before { background-position: right 1em top 50%; } .login-other:after { background-position: left 1em top 50%; } .login-list { display: flex; justify-content: space-between; } .login-list .item { width: 32px; height: 32px; } .login-wrap .form-control {font-weight:bold; padding:8px 10px; height:auto; line-height:24px; } .btn-login { color: #fff; background: #fe7300; border: 0px; } .btn-login:hover { background: #f38d30; color: #fff; outline: none } .btn-login:focus { background: #f38d30; color: #fff; border: 0px; outline: none; } .forget-password { padding: 16px 0; } @media (min-width: 768px) { .login-footer { display: block; position: absolute; bottom: 40px; } .login-footer .login-footer-body { display: flex; width: 600px; justify-content: space-around; } .login-footer .login-footer-body li { list-style: none; } .login-footer .login-footer-body li a { color: #7e8392; } }