body{background: white;}
#container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    flex-wrap: nowrap;
}
.login_box_content{
    margin: 0 auto;
    min-width: 1000px;
    display: flex;
    justify-content: center;
}
.login_logo{
    width: 483px;
    float: left;
    height: 393px;
    background: transparent url(../images/logo.png) no-repeat;
    background-size: 100% 100%
}
.login_form{
    float: left;
    width: 385px;
    padding-left: 30px;
    margin-left:90px;
    height: 350px;
	margin-top:20px;
}
.login_form form{
    width: 384px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.login_form_label,#login_form_btn{margin-top: 26px;border-radius: 4px;}
.login_form .login_form_rememberme{color:#fff;}
.login_form .login_form_rememberme label{display:inline;}
.login_form .rememberme{margin-top:0;margin-right:10px;}
#login_form_btn{width:100%;padding-left:0;padding-right:0;padding:10px 14px !important;}
dt{float: left;
    width: 380px;
    margin-top: 10px}
dd {float: left;}

/* overwrite default style */
.login_form select,input.login_form_input{
    height: 38px;
    line-height: 38px;
    outline: none;
    width: 86%;
    z-index: 1;
    font-family: verdana;
    font-size: 18px;
    font-weight: 700;
    background: #EFF0F2;
    border: 1px solid #EFF0F2;
}
.login_form select{
    height:44px;
    width:272px;
}
.login_form  .add-on{
    display:inline-block;
    height:44px;
    line-height:44px;
    text-align:center;
    color:#A3A3A3;
    position:relative;
    z-index:3;
    width:44px;
    font-size:20px;
}
.login_form .add-on i{line-height:48px;}
.login_form_label{position:relative;}
.login_form_tip{float: left;width:80%;margin-top:10px;margin-left:10%;}
.login_form_top{margin-top:0;}
.login_language{width: 260px;padding:4px 6px;height: 34px;line-height: 34px;}
.login_username,.login_password{position:absolute;left:0px;z-index:2;padding-left:44px !important;}
/* fix default vars by chrome*/
input:-webkit-autofill{color: #fff !important;}

.clients-download {position:absolute; right:10px;bottom:5px}
.clients-download li{float:left;margin-left:10px;}
.clients-download li a{font-size:16px;}
.clients-download li a:hover{text-decoration: underline;}

.check {
    font-size: 1.25em;
}
.check input:focus~label, .check label:hover {
color: rgba(0,0,0,.8);
}
.check label {
display: block;
color: rgba(255,255,255,.7);
-webkit-transition: color .2s ease;
-moz-transition: color .2s ease;
transition: color .2s ease;
}
.check .box, .check label {
font-size: inherit !important;
cursor: pointer;
padding-left: 2em;
outline: 0;
}
.check .box:hover::before, .check label:hover::before {
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3);
box-shadow: 0 0 0 1px rgba(0,0,0,.3);
}
.check .box:before, .check label:before {
position: absolute;
top: 2px;
line-height: 1;
width: 1em;
height: 1em;
left: 0;
content: '';
border-radius: 4px;
background: #FFF;
-webkit-transition: background-color .3s ease,-webkit-box-shadow .3s ease;
-moz-transition: background-color .3s ease,box-shadow .3s ease;
transition: background-color .3s ease,box-shadow .3s ease;
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.2);
box-shadow: 0 0 0 1px rgba(0,0,0,.2);
}
.check input:checked~.box:after, .check input:checked~label:after {
-ms-filter: "alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.check .box:after, .check label:after {
-ms-filter: "alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
background: 0 0;
border: .2em solid #333;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
top: .275em;
left: .2em;
width: .45em;
height: .15em;
}
.check input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
outline: 0;
}
.modal-backdrop, .modal-backdrop.fade.in{
    background:rgba(0,0,0,0.9);
    opacity:0.6;
}
.modal-header{
    background:url('../images/modal_head.png') repeat-x;
    background-size:100% 100%;
    color:#fff;
    position:relative;
}
.modal-header h4{
    margin:2px 0 2px 62px;
}
.modal-header h4:after{
    content:url('../images/modal_iv.png');
    width:64px;
    height:70px;
    position: absolute;
    top: -15px;
    left: 6px;
    z-index:10000;
}
.modal-header .close{
    color:#fff;
    opacity:0.6;
}
.modal-body{
    background:#f5f5f5;
    padding:15px 15px 0;
}
.modal-body .content{
    margin: 0;
    padding: 20px;
    border: 1px solid #ddd;
    -webkit-box-shadow: inset -1px -1px 1px #ffffff;
    -moz-box-shadow: inset -1px -1px 1px #ffffff;
    box-shadow: inset -1px -1px 1px #ffffff;
    color: #000;
}
.content ul{
    margin: 0;
}
.modal-footer{
    border:none;
    box-shadow:none;
}
.login_head{
    width: 275px;
    float: left;
    height: 54px;
    background: transparent url(../images/login_head.png) no-repeat;
    background-size: 100% 100%;
}
.login_type_logo{
    width: 57px;
    float: right;
    height: 55px;
    cursor: pointer;
    background: transparent url(../images/login_qrcode_logo.png) no-repeat;
    background-size: 100% 100%;
}
.login_qrcode_logo{
    width: 57px;
    float: right;
    height: 55px;
    cursor: pointer;
    background: transparent url(../images/login_pc_logo.png) no-repeat;
    background-size: 100% 100%;
}
.login_form_rememberme label{
	color:#A3A3A3;
}
.qrcode{
    margin-top: 30px; 
    padding: 3px;
    width:200px;
    background-color: #fff;
    border-radius: 5px;
	width:270px;
	height:270px;
	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.td-toolkits li a{
	color:#0965F2 !important;
}
input[type="text"], input[type="password"]{
	box-shadow:unset;
}
.scanlogin{
    position:relative;
}
.mark_box{
    position:absolute;
    top:30px;
    left:0;
    z-index:1;
    width:275px;
    height:275px;
    background-color:rgba(239,240,242,0.8);
    display: none;
    justify-content: center;
    align-items:center;
    border-radius: 5px;;
}
.mark_box_cont{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.Refresh_text{
	font-size: 15px;
    font-weight: bold;
}
.mark_box .mark_box_cont{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.mark_box_cont .Refresh{
    display: block;
    width: 100px;
    height: 36px;
    text-decoration: none;
    text-align: center;
    background-color: #3b78dd;
    color: #fff;
    line-height: 36px;
    margin: 12px auto 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
}

.btn-danger {
  border: 1px solid #3079ed;
  color: #ffffff;
  background-color: #4b8cf7;
  background-image: -moz-linear-gradient(top, #4d90fe, #4787ed);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d90fe), to(#4787ed));
  background-image: -webkit-linear-gradient(top, #4d90fe, #4787ed);
  background-image: -o-linear-gradient(top, #4d90fe, #4787ed);
  background-image: linear-gradient(to bottom, #4d90fe, #4787ed);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4d90fe', endColorstr='#ff4787ed', GradientType=0);
  background-color: #4d90fe;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-danger:hover,
.btn-danger:active,
.btn-danger.active {
  border: 1px solid #196aeb;
  color: #ffffff;
  background-color: #4186f6;
  background-image: -moz-linear-gradient(top, #4d90fe, #3078eb);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d90fe), to(#3078eb));
  background-image: -webkit-linear-gradient(top, #4d90fe, #3078eb);
  background-image: -o-linear-gradient(top, #4d90fe, #3078eb);
  background-image: linear-gradient(to bottom, #4d90fe, #3078eb);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4d90fe', endColorstr='#ff3078eb', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  background-color: #3078eb;
  background-color: #3078eb \9;
}
.btn-danger:active,
.btn-danger.active {
  border: 1px solid #135fd7;
  background-color: #3880f5;
  background-image: -moz-linear-gradient(top, #4d90fe, #1969e8);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d90fe), to(#1969e8));
  background-image: -webkit-linear-gradient(top, #4d90fe, #1969e8);
  background-image: -o-linear-gradient(top, #4d90fe, #1969e8);
  background-image: linear-gradient(to bottom, #4d90fe, #1969e8);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4d90fe', endColorstr='#ff1969e8', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-danger:focus {
  border: 1px solid #3079ed;
  -webkit-box-shadow: inset 0 0 0 1px #ffffff;
  -moz-box-shadow: inset 0 0 0 1px #ffffff;
  box-shadow: inset 0 0 0 1px #ffffff;
}
.btn-danger.disabled,
.btn-danger[disabled],
.btn-danger.disabled:hover,
.btn-danger[disabled]:hover,
.btn-danger.disabled:active,
.btn-danger[disabled]:active,
.btn-danger.disabled:focus,
.btn-danger[disabled]:focus {
  border: 1px solid #3079ed;
  background-color: #4b8cf7;
  background-image: -moz-linear-gradient(top, #4d90fe, #4787ed);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d90fe), to(#4787ed));
  background-image: -webkit-linear-gradient(top, #4d90fe, #4787ed);
  background-image: -o-linear-gradient(top, #4d90fe, #4787ed);
  background-image: linear-gradient(to bottom, #4d90fe, #4787ed);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4d90fe', endColorstr='#ff4787ed', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  background-color: #4d90fe;
  background-color: #4d90fe \9;
}
@media screen and (min-width:1500px) and (max-width:1900px) {	
	.login_box_content{min-width: 1100px !important;}
	.login_logo {
		width: 553px !important;
		height: 433px !important; 
	}
	.login_form {
		width: 435px !important;
		height: 420px !important;
		margin-left:120px !important;
	}
	.login_head {
		width: 326px !important;
		height: 60px !important;
	}
	.qrcode{
		width:310px !important;
		height:310px !important;
	}
	.mark_box{
		width:315px !important;
		height:315px !important;
	}
	.Refresh_text {
		font-size: 18px !important;
	}
	.mark_box_cont .Refresh {
		width: 120px !important;
		height: 40px !important;
		line-height: 40px !important;
		font-size: 16px !important;
	}
	.login_type_logo {
		width: 60px !important;
		height: 55px !important;
		margin-left: 46px !important;
	}
	.login_form form {
		width: 435px !important;
	}
	dt{
		width: 430px !important;
	}
	.login_form .add-on {
		height: 57px !important;
		line-height: 58px !important;
		width: 50px !important;
		font-size: 20px !important;
	}
	.login_form select, input.login_form_input {
		height: 45px !important;
		line-height: 45px !important;
		width: 88% !important;
		font-size:20px !important;
	}
	#login_form_btn{
		font-size: 22.5px !important;
	}
	.login_form .login_form_rememberme label {
		font-size: 22px !important;
	}
}
@media screen and (min-width:1900px){
	.login_box_content{min-width: 1280px !important;}
	.login_logo {
		width: 623px !important;
		height: 483px !important; 
	}
	.login_form {
		width: 490px !important;
		height: 460px !important;
		margin-left:140px !important;
	}
	.login_head {
		width: 355px !important;
		height: 75px !important;
	}
	.qrcode{
		width:320px !important;
		height:320px !important;
	}
	.mark_box{
		width:325px !important;
		height:325px !important;
	}
	.Refresh_text {
		font-size: 18px !important;
	}
	.mark_box_cont .Refresh {
		width: 120px !important;
		height: 40px !important;
		line-height: 40px !important;
		font-size: 16px !important;
	}
	.login_type_logo {
		width: 82px !important;
		height: 72px !important;
		margin-left: 46px !important;
	}
	.login_form form {
		width: 490px !important;
	}
	dt{
		width: 490px !important;
	}
	.login_form .add-on {
		height: 70px !important;
		line-height: 70px !important;
		width: 60px !important;
		font-size: 28px !important;
	}
	.login_form select, input.login_form_input {
		height: 55px !important;
		line-height: 55px !important;
		font-size: 22px !important;
	}
	.check .box:before, .check label:before {
		top:0 !important;
	}
	.login_form .login_form_rememberme label {
		font-size: 24px !important;
	}
	.login_username, .login_password {
		padding-left: 60px !important;
	}
	#login_form_btn{
		font-size:20pt !important;
	}
}