html,body{margin:0;padding:0;}
body{background:url(../img/login_twill.gif);-webkit-text-size-adjust:none;font-family:"Microsoft YaHei","\5FAE\8F6F\96C5\9ED1","Helvetica Neue",Helvetica,"Hiragino Sans GB","STHeitiSC-Light","\5B8B\4F53",Arial,sans-serif;}
body{
	min-height:550px;
}
.radio,
.checkbox {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
}
.radio label,
.checkbox label {
  min-height: 23px;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: normal;
  cursor: pointer;
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  position: absolute;
  margin-left: -20px;
  margin-top: 4px \9;
}
.radio + .radio,
.checkbox + .checkbox {
  margin-top: -5px;
}
.radio-inline,
.checkbox-inline {
  position: relative;
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 0;
  vertical-align: middle;
  font-weight: normal;
  cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
  margin-top: 0;
  margin-left: 10px;
}
input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"].disabled,
input[type="checkbox"].disabled,
fieldset[disabled] input[type="radio"],
fieldset[disabled] input[type="checkbox"] {
  cursor: not-allowed;
}
.radio-inline.disabled,
.checkbox-inline.disabled,
fieldset[disabled] .radio-inline,
fieldset[disabled] .checkbox-inline {
  cursor: not-allowed;
}
.radio.disabled label,
.checkbox.disabled label,
fieldset[disabled] .radio label,
fieldset[disabled] .checkbox label {
  cursor: not-allowed;
}

.input-group-addon input[type="radio"],
.input-group-addon input[type="checkbox"] {
  margin-top: 0;
}
.radio label,
.radio-inline label,
.checkbox label,
.checkbox-inline label {
  padding-left: 25px;
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="radio"],
.checkbox-inline input[type="radio"],
.radio input[type="checkbox"],
.radio-inline input[type="checkbox"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  margin-left: -25px;
}
input[type="radio"],
.radio input[type="radio"],
.radio-inline input[type="radio"] {
  position: relative;
  margin-top: 6px;
  margin-right: 4px;
  vertical-align: top;
  border: none;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}
input[type="radio"]:focus,
.radio input[type="radio"]:focus,
.radio-inline input[type="radio"]:focus {
  outline: none;
}
input[type="radio"]:before,
.radio input[type="radio"]:before,
.radio-inline input[type="radio"]:before,
input[type="radio"]:after,
.radio input[type="radio"]:after,
.radio-inline input[type="radio"]:after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  -webkit-transition: 240ms;
  -moz-transition: 240ms;
  transition: 240ms;
}
input[type="radio"]:before,
.radio input[type="radio"]:before,
.radio-inline input[type="radio"]:before {
  position: absolute;
  left: 0;
  top: -3px;
  background-color: #0194D8;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  -moz-transform: scale(0);
  transform: scale(0);
}
input[type="radio"]:after,
.radio input[type="radio"]:after,
.radio-inline input[type="radio"]:after {
  position: relative;
  top: -3px;
  border: 1px solid #666666;
}
input[type="radio"]:checked:before,
.radio input[type="radio"]:checked:before,
.radio-inline input[type="radio"]:checked:before {
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -moz-transform: scale(0.5);
  transform: scale(0.5);
}
input[type="radio"]:disabled:checked:before,
.radio input[type="radio"]:disabled:checked:before,
.radio-inline input[type="radio"]:disabled:checked:before {
  background-color: #bbbbbb;
}
input[type="radio"]:checked:after,
.radio input[type="radio"]:checked:after,
.radio-inline input[type="radio"]:checked:after {
  border-color: #0194D8;
}
input[type="radio"]:disabled:after,
.radio input[type="radio"]:disabled:after,
.radio-inline input[type="radio"]:disabled:after,
input[type="radio"]:disabled:checked:after,
.radio input[type="radio"]:disabled:checked:after,
.radio-inline input[type="radio"]:disabled:checked:after {
  border-color: #bbbbbb;
}
input[type="checkbox"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  position: relative;
  border: none;
  margin-bottom: -4px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}
input[type="checkbox"]:focus,
.checkbox input[type="checkbox"]:focus,
.checkbox-inline input[type="checkbox"]:focus {
  outline: none;
}
input[type="checkbox"]:focus:after,
.checkbox input[type="checkbox"]:focus:after,
.checkbox-inline input[type="checkbox"]:focus:after {
  border-color: #0194D8;
}
input[type="checkbox"]:after,
.checkbox input[type="checkbox"]:after,
.checkbox-inline input[type="checkbox"]:after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin-top: -2px;
  margin-right: 5px;
  border:1px solid #0194D8;
  border-radius: 2px;
  -webkit-transition: 240ms;
  -moz-transition: 240ms;
  transition: 240ms;
}
input[type="checkbox"]:checked:before,
.checkbox input[type="checkbox"]:checked:before,
.checkbox-inline input[type="checkbox"]:checked:before {
  content: "";
  position: absolute;
  top: 0;
  left: 6px;
  display: table;
  width: 6px;
  height: 12px;
  border:2px solid #fff;
  border-top-width: 0;
  border-left-width: 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
input[type="checkbox"]:checked:after,
.checkbox input[type="checkbox"]:checked:after,
.checkbox-inline input[type="checkbox"]:checked:after {
  background-color: #0194D8;
  border-color: #0194D8;
}
input[type="checkbox"]:disabled:after,
.checkbox input[type="checkbox"]:disabled:after,
.checkbox-inline input[type="checkbox"]:disabled:after {
  border-color: #bbbbbb;
}
input[type="checkbox"]:disabled:checked:after,
.checkbox input[type="checkbox"]:disabled:checked:after,
.checkbox-inline input[type="checkbox"]:disabled:checked:after {
  background-color: #bbbbbb;
  border-color: transparent;
}

.login-icon{background:url(../img/login_icon.png) no-repeat;padding:10px;position:absolute;top:14px;left:10px;}
.login-icon.login-user{background-position:0;}
.login-icon.login-pwd{background-position:-20px 0;}

.tip-icon{background:url(../img/tip_icon.png) no-repeat;padding:8px 16px;margin-right:10px;}
.tip-icon.tip-icon-plaint{background-position:-96px 0;}

.header{position:absolute;top:-70px;width:100%;}
.header>.text-left>i{background-image:url(../img/logo.png);background-size:100%;background-repeat:no-repeat;padding:18px 22px;margin-right:5px;}
.header>.text-left>span.title-master{color:#1293C5;font-size:xx-large;font-weight:bold;text-shadow:0 0 5px #FFF,2px 2px 1px rgba(0, 0, 0, 0.42);}
.header>.text-left>span.title-slave{color:#000;font-size:x-large;text-shadow:0 0 5px #FFF;}

.section{
	position:absolute;
	top:50%;
	background:url(../img/login_pic.png) no-repeat;
	background:url(../img/login_pic.png) top center\9;
	width:100%;
	height:540px;
	background-size:100%;
	margin:0;
	margin-top:-270px;
}
.section .tab-content{background:url(../img/login_bg.png);border-radius:0 0 5px 5px;background-size: contain;}
.section .nav li{background:url(../img/login_tab.png);width:50%;text-align:center;border-radius:5px 0 0 0;}
.section .nav li:last-child{border-radius:0 5px 0 0;}
.section .nav li.active{background:#fff;}
.section .nav li>a,
.section .nav li>a:hover,
.section .nav li>a:active,
.section .nav li>a:focus{color:#000;background:none;border:0;border-radius:5px 0 0 0;}
.section .tab-pane{padding:15px;position:relative;}
.section .tab-pane .row-text{border-bottom:1px solid #93D1ED;margin:0;}
.section .tab-pane .row-text>div{padding:7px 0;text-align:center;position:relative;}
.section .tab-pane input[type="text"],.section .tab-pane input[type="password"]{width:100%;background:transparent;border:0 none;outline:medium;height:30px;color:#0194d8;padding-left:40px;}
.section .tab-pane input.vcode{padding:0 10px;}
.section .tab-pane input.vcode::-webkit-input-placeholder{color:#0194d8} 
.section .tab-pane input.vcode:-moz-placeholder{color:#0194d8} 
.section .tab-pane input.vcode::-moz-placeholder{color:#0194d8} 
.section .tab-pane input.vcode:-ms-input-placeholder{color:#0194d8} 
.section .tab-pane a.btn-login{background-color:#F9CB5B;color:#000;padding:9px 12px;border-radius:20px;}
.section .tab-pane a.btn-phone{background-color:#4BC5F2;color:#000;margin:0 auto;width:145px;border-radius:20px;padding:3px 12px;}

.section .tab-pane .popover{max-width:300px;left:-300px;padding:0 25px;font-weight:bold;}
.section .tab-pane .popover .popover-title{background-color:transparent;padding:20px 14px;color:#FF6C00;font-size:initial;font-weight:bold}
.section .tab-pane .popover ol{padding-left:15px;}
.section .tab-pane .popover ol li{margin-top:10px;}

.section .tab-pane .login-pwd-label>span{float:left;color:#737373;padding:8px 0;}
.section .tab-pane .login-pwd-label>a{float:right;color:#737373}

.section #qrcode.tab-pane img{margin:20px 0;width:145px;height:145px;}
.footer{position:absolute;bottom:-45px;width:100%;}
.login-content{
	position:absolute;
	right:10%;
	width:380px;
	top:120px;
	padding-bottom:15px;
	transition: all 200ms;
	-moz-transition: all 200ms; /* Firefox 4 */
	-webkit-transition: all 200ms; /* Safari บอ Chrome */
	-o-transition: all 200ms; /* Opera */
}
@media screen and (max-width:768px){
	.section .tab-pane .popover{left:50%;margin-left:-150px;top:250px}
}

@media screen and (max-width:880px){
	.header{padding:20px 0}
	.section{background-size:auto}
}

@media screen and (max-height:760px){
	.section{
		height:400px;
		margin-top:-200px;
	}
	.login-content{
		top:55px;
	}
}
@media screen and (max-height:550px){
	.section{
		top:90px;
		margin-top:0;
	}
}
@media screen and (max-widh:500px){
	.login-content{
		right:auto;
	}
	.section{
		top:90px;
		margin-top:0;
	}
}