@charset "utf-8";
html,body{position: relative;width: 100%;height: 100%;line-height:1;background: url(../images/login-bg.png) no-repeat;background-size: cover;letter-spacing:1px;}
.flex{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;justify-content:space-between;align-items:center;}
.main{height:100%;width:100%;overflow:hidden;}
.login-box{width:32%;position:absolute;top:13%;right:13%;}
.login-box .login-title{width:3.24rem;height:0.4rem;background:url(../images/title-login.png) no-repeat;background-size:100%;margin:0 auto;}
.login-box .des{font-size:0.25rem;color:#00BEF7;margin-top:0.17rem;text-align:center;letter-spacing:3px;}
.login-box .form-box{position:relative;margin-top:0.35rem;padding:0.52rem 0.58rem 0.72rem 0.58rem;border:0.02rem solid #0BA1F8;background:rgba(11,161,248,0.1)}
.login-box .form-box .angle-icon{position:absolute;width:0.49rem;height:0.5rem;}
.login-box .form-box .angle-icon.angle-icon1{left:-0.03rem;top:-0.03rem;background:url(../images/square-top.png) no-repeat;background-size:100%;}
.login-box .form-box .angle-icon.angle-icon2{right:-0.03rem;top:-0.03rem;background:url(../images/square-right.png) no-repeat;background-size:100%;}
.login-box .form-box .angle-icon.angle-icon3{height:0.49rem;left:-0.03rem;bottom:-0.03rem;background:url(../images/square-left.png) no-repeat;background-size:100%;}
.login-box .form-box .angle-icon.angle-icon4{height:0.49rem;right:-0.03rem;bottom:-0.03rem;background:url(../images/square-bottom.png) no-repeat;background-size:100%;}
.login-box .f-title{font-size:0.32rem;color:#00BEF7;text-align:center;letter-spacing:0.1rem;margin-bottom:0.3rem;}
.login-box .input-box,.login-box .select-title{position:relative;background:rgba(6,135,205,0.3);border:0.03rem solid rgba(11, 161, 248, 0.4);padding:0.13rem 0.28rem;margin-bottom:0.12rem;}
.login-box .input-box .l-icon,.login-box .select-box .l-icon{display:block;width:0.23rem;height:0.24rem;background:url(../images/login-icon1.png) no-repeat;background-size:100%;margin-right:0.14rem;}
.login-box .input-box input,.login-box .select-box input{flex:1;-webkit-flex:1; color:rgba(255,255,255,0.3);font-size:0.2rem;background:transparent;}
.login-box input:-moz-placeholder,.select-box input:-moz-placeholder { color:rgba(255,255,255,0.3);}
.login-box input::-webkit-input-placeholder,.select-box input::-webkit-input-placeholder {color:rgba(255,255,255,0.3)}
.select-box,.select-box .select-title{position:relative;}
.select-box .icon{position: absolute;right:0.13rem;top:50%;margin-top:-0.075rem;width:0.21rem;height:0.15rem;background:url(../images/blue-arrow-bottom.png) no-repeat;background-size:100%;cursor: pointer;  transition: all .3s; -webkit-transition: all .3s}
.selected-box .icon{webkit-transform: rotate(180deg); transform: rotate(180deg)}
.select-box .s-anim{display: none;position: absolute; left: 0; top:0.68rem;  z-index: 999; min-width: 100%; overflow-y: auto; background:rgb(19 45 95); box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}
.selected-box .s-anim{display:block; -webkit-animation-name: upbit; animation-name: upbit; -webkit-animation-duration: .3s; animation-duration: .3s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.select-box .s-anim dd{font-size:0.2rem;line-height:0.2rem;color:#fff;padding: 0.06rem 0.09rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.select-box .s-anim dd label{color:#0BA1F8;margin-left:0.05rem;}
.login-box .select-box{margin-bottom:0.25rem;}
.login-box .select-box.selected-box{margin-bottom:0.8rem;}
.login-box .select-box .l-icon{width:0.22rem;background:url(../images/login-icon2.png) no-repeat;background-size:100%;}
.login-box .input-box:last-of-type .l-icon{width:0.22rem;height:0.23rem;background:url(../images/login-icon3.png) no-repeat;background-size:100%;}
.login-box .get-code{position:absolute;right:-0.03rem;top:-0.03rem;padding:0.13rem 0.2rem;font-size:0.24rem;background:#0BA1F8;border:0.03rem solid #0BA1F8;color:#fff;}
.login-box .login-btn{display:block;font-size:0.3rem;padding:0.13rem 0;width:100%;background:#0BA1F8;color:#fff;text-align:center;margin-top:0.39rem;}

@-webkit-keyframes upbit {
  from {
      -webkit-transform: translate3d(0,30px,0);
      opacity: .3
  }

  to {
      -webkit-transform: translate3d(0,0,0);
      opacity: 1
  }
}

@keyframes upbit {
  from {
      transform: translate3d(0,30px,0);
      opacity: .3
  }

  to {
      transform: translate3d(0,0,0);
      opacity: 1
  }
}