@charset "UTF-8";
html {
  height: 100%;
  overflow: hidden; }

body {
  height: 100%;
  background: url(../images/loginnew/bj.png) center bottom no-repeat;
  background-size: 100%; }

.header {
  height: 80px;
  background-color: #fff; }
  .header .inner {
    margin: 0 auto;
    max-width: 1266px; }
  .header .logo {
    float: left; }
  .header .login {
    float: right;
    margin-top: 23px;
    padding-left: 42px;
    width: 90px;
    height: 34px;
    color: #007cdb;
    line-height: 32px;
    background: url(../images/loginnew/login.png) 18px center no-repeat;
    border: 1px solid #007cdb;
    border-radius: 34px; }
    .header .login:hover {
      background-color: #daedff;
      cursor: pointer; }

.main {
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  bottom: 0; }
  .main .inner {
    position: relative;
    margin: 0 auto;
    max-width: 1266px;
    height: 100%; }

.footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 43px;
  text-align: center;
  line-height: 1;
  color: #666; }

.animation {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 800px;
  height: 524px;
  transition: all .5s linear;
  transform: translate3D(-50%, -50%, 0); }
  .animation.active {
    margin-left: -370px; }
  .animation img {
    position: absolute;
    display: block; }
  .animation .C_1 {
    top: 93px;
    left: 367px;
    z-index: 1; }
  .animation .person {
    top: 0;
    left: 0;
    z-index: 2; }
  .animation .L_3 {
    top: 0;
    left: 169px;
    animation: float 3s linear infinite .3s; }
  .animation .L_2 {
    left: -110px;
    top: 90px;
    animation: float 3s linear infinite .7s; }
  .animation .L_1 {
    left: 80px;
    top: 170px;
    animation: float 3s linear infinite .9s; }
  .animation .C_2 {
    top: 163px;
    left: 196px;
    animation: float 3s linear infinite .1s; }
  .animation .R_1 {
    top: 136px;
    left: 471px;
    animation: float 3s linear infinite .5s; }
  .animation .R_2 {
    top: 298px;
    left: 406px;
    z-index: 2;
    animation: float 2.5s linear infinite 0s; }
  .animation .R_3 {
    top: 72px;
    left: 522px;
    animation: float 3s linear infinite .6s; }
  .animation .txt {
    top: -20px;
    left: 550px; }

/* --------------登录框弹出窗------------ */
.loginBox {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: 23px;
  padding: 0 6px 47px 38px;
  width: 627px;
  height: 378px;
  border-radius: 4px;
  transition: all .5s linear;
  transform-style: preserve-3d;
  perspective: 1000px;
  transform: translateY(-50%) rotateX(90deg);
  transform-origin: 50% 0;
  background: url(../images/loginnew/loginbox.png) 0 0 no-repeat;
  z-index: 0;
  opacity: 0; }
  .loginBox.active {
    animation: iAmBest 1.5s linear;
    animation-iteration-count: 1;
    transform: translateY(-50%) rotateX(0deg);
    opacity: 1; }
  .loginBox .close {
    position: absolute;
    top: -44px;
    right: 18px;
    width: 26px;
    height: 26px;
    border-radius: 100%;
    background: url(../images/loginnew/close.png) center no-repeat;
    border: 1px solid #fff;
    cursor: pointer; }
    .loginBox .close::before {
      position: absolute;
      left: 12px;
      bottom: -18px;
      display: block;
      content: "";
      width: 2px;
      height: 18px;
      background-color: #fff;
      cursor: default; }
    .loginBox .close:hover {
      background-image: url(../images/loginnew/close2.png);
      border-color: #005ebe; }
      .loginBox .close:hover::before {
        background-color: #005ebe; }

.option {
  padding-top: 40px;
  padding-left: 43px;
  width: 189px;
  height: inherit;
  background: url(../images/loginnew/bg2.png) 0 0 no-repeat;
  box-sizing: border-box; }
  .option .note {
    font-size: 16px;
    line-height: 48px;
    color: #fff;
    text-align: left;
    font-weight: bold; }
  .option .tab {
    font-size: 15px;
    line-height: 36px;
    color: #fff;
    text-align: left;
    text-indent: 32px;
    cursor: pointer; }
    .option .tab.active {
      color: #2996f2;
      background: #fff url("../images/loginnew/arrow.png") 15px center no-repeat;
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px; }

.kind {
  position: relative;
  width: 388px;
  background-color: #fff;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px; }
  .kind .head {
    margin: 50px 36px 0;
    font-size: 0; }
    .kind .head .options {
      display: inline-block;
      margin-right: 54px;
      padding: 5px 0;
      font-size: 18px;
      line-height: 1;
      color: #999;
      text-align: left;
      border-bottom: 3px solid #fff;
      vertical-align: top;
      cursor: pointer; }
      .kind .head .options.active {
        color: #333;
        border-color: #2996f2; }
  .kind .input {
    margin: 0 auto;
    display: block;
    width: 323px;
    height: 44px;
    font-size: 14px;
    line-height: 44px;
    text-indent: 46px;
    background: url(../images/loginnew/pwd.png) 16px center no-repeat;
    border: 1px solid #d0dfec;
    outline-color: #3d9ff1;
    border-radius: 3px; }
    .kind .input.user {
      background-image: url(../images/loginnew/user.png); }
  .kind .submit {
    margin: 13px auto 0;
    display: block;
    width: 325px;
    height: 46px;
    font-size: 18px;
    line-height: 46px;
    color: #fff;
    text-align: center;
    background-color: #2996f2;
    border-radius: 3px; }
  .kind .tabbody {
    height: 215px;
    overflow: hidden; }
  .kind .renovate {
    position: relative;
    margin: 0 auto;
    width: 193px;
    height: 193px; }
    .kind .renovate img {
      display: block; }
    .kind .renovate p {
      font-size: 14px;
      line-height: 38px;
      color: #999;
      text-align: center; }
      .kind .renovate p em {
        color: #2996f2; }
    .kind .renovate .reinner {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      font-size: 14px;
      text-align: center;
      color: #333;
      background-color: rgba(255, 255, 255, 0.9); }
      .kind .renovate .reinner div {
        padding-top: 72px;
        line-height: 14px; }
      .kind .renovate .reinner span {
        display: block;
        margin: 18px auto;
        width: 100px;
        height: 36px;
        line-height: 36px;
        color: #fff;
        background-color: #2996f2;
        border-radius: 4px;
        cursor: pointer; }
  .kind .success {
    padding-top: 195px;
    background: url(../images/loginnew/phone2.png) center 55px no-repeat;
    font-size: 14px;
    line-height: 24px;
    color: #333;
    text-align: center; }
    .kind .success .green {
      color: #2eb175; }
    .kind .success .blue {
      color: #2996f2; }

.mt34 {
  margin-top: 34px; }

.mt18 {
  margin-top: 18px !important; }

.mt13 {
  margin-top: 13px !important; }
  
 .mt10 {
  margin-top: 10px !important; }
  
 .mt8 {
  margin-top: 8px !important; }
  
  spanLogo {
	height: 80px;
	line-height: 80px;
	font-size: 36px;
	color: #007CDB;
	margin-left: 10px;
}
.yzminput {
    margin: 0 auto;
    width: 240px;
    margin-left:33px;
    height: 44px;
    font-size: 14px;
    line-height: 44px;
    text-indent: 46px;
    background: url(../images/loginnew/validate-login2.png) 16px center no-repeat;
    border: 1px solid #d0dfec;
    outline-color: #3d9ff1;
    border-radius: 3px; 
}

@keyframes iAmBest {
  0% {
    transform: translateY(-50%) rotateX(90deg); }
  50% {
    transform: translateY(-50%) rotateX(0deg); }
  60% {
    transform: translateY(-50%) rotateX(-30deg); }
  70% {
    transform: translateY(-50%) rotateX(0deg); }
  80% {
    transform: translateY(-50%) rotateX(15deg); }
  90% {
    transform: translateY(-50%) rotateX(0deg); }
  95% {
    transform: translateY(-50%) rotateX(-7.5deg); }
  100% {
    transform: translateY(-50%) rotateX(0deg);
    opacity: 1; } }

@keyframes float {
  0% {
    transform: translateY(0%); }
  25% {
    transform: translateY(5%); }
  50% {
    transform: translateY(0%); }
  75% {
    transform: translateY(-5%); }
  100% {
    transform: translateY(0%); } }

@media (min-width: 1680px) {
  .animation .txt {
    top: -140px;
    left: 550px; } }