@charset "utf-8"; 
/* ===============
 * 重新定义Html元素
 * =============== */
*{ box-sizing: border-box; -moz-box-sizing: border-box;}
html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, fieldset, input { padding: 0; margin: 0;}
h1, h2, h3, h4, h5, h6, pre, code, address, caption, cite, code, em, strong, table, th, td { font-size: 1em; font-style: normal; font-weight: normal;}
strong { font-weight: bold;}
ul, ol { list-style: none outside none;}
fieldset, img { border: medium none; vertical-align: middle;}
caption, th {  text-align: left;}
table { border-collapse: collapse; border-spacing: 0;}
html{height: 100%;}
body {color: #666;height: 100%; background: url('../images/login_bg.jpg') center center no-repeat; background-size: cover; font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif;}
i, cite, em { font-style: normal;}
input,button,select,textarea{ outline:none}
html{ overflow: hidden;height: 100%;}
.box{position: relative; width:80%;margin: 0 auto; top:5%;height:88%;}
.title{font-size: 48px; color: #fff;letter-spacing:20px; width: 100%;position: relative; text-align: center;}
.tips{ font-size: 26px; text-align: center; color: #fff;position:absolute;bottom:-5px;left:5%; line-height:40px;}
.login_box{height:610px;width:440px;position: absolute;bottom:0;right:0; background: #c5e4fe; border-radius: 5px;padding:40px 50px 50px;margin: 0;}
.login_box .layui-tab{margin: 0; background:#c5e4fe;}
.login_box .layui-tab-title{ border: none; display: flex; justify-content: space-between;}
.login_box .layui-tab-title li{ color: #999; font-size:20px;padding: 0;}
.login_box .layui-tab-title li.layui-this{ color: #3090F0 !important;}
.login_box .layui-tab-title li.layui-this:after{ content: normal;}
.login_box .layui-tab-content{padding: 0;margin-top:20px;}

.form_popup{}
.form_popup .layui-form-item{background: #fff;border-radius:10px; font-size: 0;margin-bottom:20px; display: flex;}
.form_popup .layui-form-item label{padding: 0; float: none; display: inline-flex;width:50px;align-items: center; justify-content: center; vertical-align: top;}
.form_popup .layui-input-block{ min-height: inherit; margin-left: 0;font-size: 20px;vertical-align: top; width: calc(100% - 50px); display: inline-block; border: none;}
.form_popup .layui-input-block input{ width:100%;height:50px;padding:0 25px 0 5px;display: inline-block; border: none; background: none; border-radius:0 10px 10px 0; }
.form_popup .layui-input-block input.layui-form-danger{border: 1px solid #ff9797;}
.form_popup .layui-input-block .layui-input-inline{ width:50%;margin: 0;}
.form_popup  .layui-form-select .layui-edge{ height: 100%;background: url(../images/form_select.png) center center no-repeat;background-size: cover;right: 0;	top: 0;	width:25px;	margin-top: 0;	border: none;}
.form_popup  .layui-form-selected .layui-edge{transform:rotate(0deg);}
.form_popup textarea{ font-size: 20px; resize: none; border:none; border-radius: 10px;}
.form_popup button{ width: 100%; border-radius: 10px; background:linear-gradient(#48b5fe,#2b8dcf); color: #fff; font-size: 18px; line-height:50px; height: 50px;margin-top: 10px;}
.form_popup .layui-input-block input::-webkit-input-placeholder{color: #999;}
.form_popup .layui-input-block input::-moz-placeholder{color: #999;}
.form_popup .layui-input-block input:-ms-input-placeholder{color: #999;}
.form_popup .layui-form-select dd.layui-this{ background: #52a9df;}
.form_popup .tips{  color: #666;line-height: 25px;margin-top: 20px;}
#codeimage{height:50px;max-width: 100%; border-radius:0 10px 10px 0; }

@media only screen and ( max-width: 640px ) {
    .box{height:96%;top:2%; width:100%;}
    .title{ font-size:1.4rem;letter-spacing:0.5rem;top:2%;}
    .tips{left: 0;width: 100%;font-size:0.6rem;bottom: 0;line-height:1rem;}
    .login_box{width:75%;top:5%;position:relative; margin:0 auto;padding:0.2rem 1.2rem 0.5rem;height: auto;bottom: inherit;}
    .login_box .layui-tab-title li{font-size:0.8rem;}
    .login_box .layui-tab-content{margin:0 0 0.5rem 0;}
    .form_popup .layui-form-item{margin-bottom:0.5rem;border-radius:5px;}
    .form_popup .layui-form-item label{width:2rem;}
    .form_popup .layui-input-block{ width: calc(100% - 2rem);}
    .form_popup .layui-input-block input{height:2rem;font-size: 0.8rem;}
    .layui-form-item .layui-input-inline{left: 0; display: inline-block; float: left;}
    .layui-form-selected dl{ top:2rem;}
    .form_popup textarea{ font-size:0.8rem;}
    .form_popup button{height:2rem;line-height:2rem;margin-top:0.2rem; font-size:1rem;}
    .form_popup .layui-form-select .layui-edge{width:16px;}
    .layui-form-select dl dd{font-size: 0.8rem;line-height: 2rem;}
    #codeimage{height: 2rem;}
}

@media only screen and (max-height: 812px) {
    .title{top:10%;}
    .login_box{top:15%;}
    .tips{bottom:15%;line-height: 1.2rem; font-size:0.8rem;}
}
@media only screen and (max-height: 736px) {
    .tips{bottom:10%;}
}
@media only screen and (max-height: 667px) {
    .tips{bottom:5%;}
}
@media only screen and (max-height: 553px) {
    .title{top:2%;}
    .login_box{top:5%;}
    .tips{bottom:5%;}
}
@media only screen and (max-height: 482px) {
    .title{top:0;}
    .login_box{top:2%;}
    .tips{bottom:0;line-height: 1rem; font-size: 0.7rem;}
}