@charset "utf-8";
* { padding: 0; margin: 0; list-style: none; text-decoration: none; }
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  background: url(/Template/lz_kelink_2015_06_07/png/04.jpg) no-repeat center/cover;
  font: 14px/30px "微软雅黑";
}

/* 页面2专属背景 */
.page2-bg {
   background: url(/Template/lz_kelink_2015_06_07/png/02.jpg) no-repeat center/cover;
}

/* 页面3专属背景 */ 
.page3-bg {
  background: url(/Template/lz_kelink_2015_06_07/png/03.jpg) no-repeat center/cover;
}
  #lz-logname:-webkit-autofill {
   -webkit-box-shadow: 0 0 0 1000px white inset;
  }
#lz-logpass:-webkit-autofill {
   -webkit-box-shadow: 0 0 0 1000px white inset;
  }

.lz-left { float: left; }
.lz-right { float: right; }
/*.lz-form { position: absolute; top: 50%; left: 50%; overflow: hidden; z-index: 100; width: 280px; margin-left: -140px; margin-top: -142px; padding: 10px; box-sizing: border-box; background: rgba(0,0,0,0.3); border-radius: 5px; }*/
.lz-form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 280px;
  overflow: hidden;
  z-index: 100;
  padding: 10px;
  box-sizing: border-box;
  background: rgba(0,0,0,0.2);
  border-radius: 5px;
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}


.lz-form ul { overflow: hidden; margin-bottom: 10px; }
/*.lz-form ul li { margin-bottom: 10px; border-bottom: 1px solid #ccc; }*/
.lz-form ul li {margin-bottom: 10px;
  border-bottom: 1px solid #ccc;}
.lz-form ul li:nth-child(1){-webkit-animation: fadeInLeft 1s ease 0.2s 1 both;}
.lz-form ul li:nth-child(2){-webkit-animation: fadeInRight 1s ease 0.2s 1 both;}
.lz-form ul li:nth-child(3){-webkit-animation: fadeInLeft 1s ease 0.2s 1 both;}
.lz-form ul li:nth-child(4){-webkit-animation: fadeInRight 1s ease 0.2s 1 both;}
.lz-form ul li input { width: 100%; box-sizing: border-box; padding: 5px; line-height: 28px; color: #fff; background: none; border: none; }
.lz-form ul li input::-webkit-input-placeholder {
color:#00f;
}
.lz-form ul li input::-webkit-input-placeholder {
color:#fff;
}
.success {
color:#fff;
}
.lz-form ul li input::-webkit-input-placeholder {
color:#fff;
}
.lz-form ul li input::-moz-placeholder {
color:#fff;
}
 .lz-form ul li input::-moz-placeholder {
 color:#fff;
}
#lz-logname { padding-left: 30px; background: url("/img/name.png") no-repeat; background-position: left center; background-size: 20px 20px; }
#lz-logpass { padding-left: 30px; background: url("/img/pass.png") no-repeat; background-position: left center; background-size: 20px 20px; }
.lz-login-btn { text-align: center; background: rgba(0,0,0,0.2);  border-radius: 4px; line-height: 42px; color: #fff; font-size: 1em; -webkit-animation: fadeIn 2s ease 0.8s 1 both;}
.lz-login-btn:hover { background:#4CAF50; }
.lz-qt-nav { overflow: hidden; height: 38px; font-size: 0.8em; }
.lz-qt-nav a { line-height: 38px; color: #E5E5E5;-webkit-animation: fadeIn 0.5s ease 0.5s 1 both; }
.lz-qt-nav a:hover{ color:#FC0;}
.lz-qt { overflow: hidden; padding: 20px 10px; }
.lz-qt a { display: block; width: 100px; height: 34px; background: rgba(255, 255, 255, 0.1); border-radius: 5px; text-align: center; color: #fff; font-size: 0.9em; line-height: 34px; }
.lz-qt a.lz-left{ -webkit-animation: fadeIn 1s ease 0.5s 1 both;}
.lz-qt a.lz-right{ -webkit-animation: fadeIn 1s ease 0.5s 1 both;}
.lz-qt a.lz-left:hover { background: #4CAF50;}
.lz-qt a.lz-right:hover { background:#4CAF50;}

/*css3动画*/
 @-webkit-keyframes fadeInLeft { 0% {
opacity:0;
-webkit-transform:translate3d(-100%, 0, 0);
transform:translate3d(-100%, 0, 0)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInLeft { 0% {
opacity:0;
-webkit-transform:translate3d(-100%, 0, 0);
transform:translate3d(-100%, 0, 0)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
 @-webkit-keyframes fadeInRight { 0% {
opacity:0;
-webkit-transform:translate3d(100%, 0, 0);
transform:translate3d(100%, 0, 0)
}
100% {
opacity:1;
transform:none
}
}
@keyframes fadeInRight { 0% {
opacity:0;
-webkit-transform:translate3d(100%, 0, 0);
transform:translate3d(100%, 0, 0)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
 @-webkit-keyframes fadeIn { 0% {
opacity:0
}
100% {
opacity:1
}
}
@keyframes fadeIn { 0% {
opacity:0
}
100% {
opacity:1
}
}