.login-content{
    position:relative;
    overflow:hidden;
    /*margin-top:-100px;*/
}



.login-content .banner-bg{
    width:100%;
    user-select:none;
    -moz-user-select:none;
    font-size:0;
}

.login-content .banner-bg > .login-bg-jpg{
    height:100%;
    width:100%;
    user-select:none;
    -moz-user-select:none;
}

.login-content .banner-bg > .login-bg-box{
   position:absolute;
   left:0;
   top:0;
   width:100%;
   height:100%;
   z-index:1;
}

.login-content .banner-bg > .login-bg-box > img{
   position:absolute;

}


.login-content .banner-bg > .login-bg-box > .cloud-03{
    left:680px; 
    top:190px;
    animation:cloud3 7s infinite linear;
    -o-animation:cloud3 7s infinite linear;
    -moz-animation:cloud3 7s infinite linear;
    -webkit-animation:cloud3 7s infinite linear;
}

@keyframes cloud3
{
0%   {left:680px; top:190px;}
50%  {left:595px; top:150px;}
100% {left:680px; top:190px;}
}

@-o-keyframes cloud3
{
0%   {left:680px; top:190px;}
50%  {left:595px; top:150px;}
100% {left:680px; top:190px;}
}

@-ms-keyframes cloud3
{
0%   {left:680px; top:190px;}
50%  {left:595px; top:150px;}
100% {left:680px; top:190px;}
}

@-moz-keyframes cloud3
{
0%   {left:680px; top:190px;}
50%  {left:595px; top:150px;}
100% {left:680px; top:190px;}
}

@-webkit-keyframes cloud3
{
0%   {left:680px; top:190px;}
50%  {left:595px; top:150px;}
100% {left:680px; top:190px;}
}


.login-content .banner-bg > .login-bg-box > .cloud-07{
    left:1000px; 
    top:280px;
    animation:cloud7 12s infinite linear;
    -o-animation:cloud7 12s infinite linear;
    -moz-animation:cloud7 12s infinite linear;
    -webkit-animation:cloud7 12s infinite linear;
}

@keyframes cloud7
{
0%   {left:1000px; top:280px;}
40%  {left:840px; top:230px;}
85%  {left:1050px; top:300px;}
100% {left:1000px; top:280px;}
}

@-o-keyframes cloud7
{
0%   {left:1000px; top:280px;}
40%  {left:840px; top:230px;}
85%  {left:1050px; top:300px;}
100% {left:1000px; top:280px;}
}
@-ms-keyframes cloud7
{
0%   {left:1000px; top:280px;}
40%  {left:840px; top:230px;}
85%  {left:1050px; top:300px;}
100% {left:1000px; top:280px;}
}

@-moz-keyframes cloud7
{
0%   {left:1000px; top:280px;}
40%  {left:840px; top:230px;}
85%  {left:1050px; top:300px;}
100% {left:1000px; top:280px;}
}

@-webkit-keyframes cloud7
{
0%   {left:1000px; top:280px;}
40%  {left:840px; top:230px;}
85%  {left:1050px; top:300px;}
100% {left:1000px; top:280px;}
}


.login-content .banner-bg > .login-bg-box > .cloud-15{
    display:none;
    left:1200px; 
    top:500px;
    animation:cloud15 5s infinite linear;
    -o-animation:cloud15 5s infinite linear;
    -moz-animation:cloud15 5s infinite linear;
    -webkit-animation:cloud15 5s infinite linear;
}

/*@keyframes cloud15
{
0%   {left:1200px; top:500px;}
50%  {left:1300px; top:550px;}
100% {left:1200px; top:500px;}
}

@-o-keyframes cloud15
{
0%   {left:1200px; top:500px;}
50%  {left:1300px; top:550px;}
100% {left:1200px; top:500px;}
}

@-ms-keyframes cloud15
{
0%   {left:1200px; top:500px;}
50%  {left:1300px; top:550px;}
100% {left:1200px; top:500px;}
}

@-moz-keyframes cloud15
{
0%   {left:1200px; top:500px;}
50%  {left:1300px; top:550px;}
100% {left:1200px; top:500px;}
}

@-webkit-keyframes cloud15
{
0%   {left:1200px; top:500px;}
50%  {left:1300px; top:550px;}
100% {left:1200px; top:500px;}
}*/




.login-content .banner-bg > .login-bg-box > .cloud-23{
    left: 1200px;
    top: 770px;
}



.login-content .banner-bg > .login-bg-box > .cloud-11{
    left: 190px;
    top: 260px;
    animation:cloud11 10s infinite linear;
    -o-animation:cloud11 10s infinite linear;
    -moz-animation:cloud11 10s infinite linear;
    -webkit-animation:cloud11 10s infinite linear;
}

@keyframes cloud11 {
    0%   {left:290px; top:200px;}
    50%  {left:100px; top:300px;}
    100% {left:290px; top:200px;}
}

@-o-keyframes cloud11 {
    0%   {left:290px; top:200px;}
    50%  {left:100px; top:300px;}
    100% {left:290px; top:200px;}
}

@-ms-keyframes cloud11 {
    0%   {left:290px; top:200px;}
    50%  {left:100px; top:300px;}
    100% {left:290px; top:200px;}
}

@-moz-keyframes cloud11 {
    0%   {left:290px; top:200px;}
    50%  {left:100px; top:300px;}
    100% {left:290px; top:200px;}
}

@-webkit-keyframes cloud11 {
    0%   {left:290px; top:200px;}
    50%  {left:100px; top:300px;}
    100% {left:290px; top:200px;}
}


.login-content .banner-bg > .login-bg-box > .cloud-19{
   position:absolute;
    left: 150px;
    top: 650px;
}


.login-content .banner-bg > .login-bg-box > .icon-yrykb{
    position:absolute;    
    left: 759px;
    top: 690px;
    animation:iconyrykb 15s infinite linear;
    -o-animation:iconyrykb 15s infinite linear;
    -moz-animation:iconyrykb 15s infinite linear;
    -webkit-animation:iconyrykb 15s infinite linear;
}
@media all and (min-width:1920px) {
.login-content .banner-bg > .login-bg-box > .icon-yrykb{
    left: 759px;
    top: 690px;
}
}
@media all and (max-width: 1680px){
.login-content .banner-bg > .login-bg-box > .icon-yrykb{
    left: 658px;
    top: 570px;
}
}
@media all and (max-width: 1366px){
.login-content .banner-bg > .login-bg-box > .icon-yrykb{
    left: 526px;
    top: 355px;
}
}


@keyframes iconyrykb {
    0%   {transform:rotateY(-360deg)}
    25%  {transform:rotateY(-180deg)}
    50%  {transform:rotateY(0deg)}
    75%  {transform:rotateY(180deg)}
    100% {transform:rotateY(360deg)}
}

@-o-keyframes iconyrykb {
    0%   {transform:rotateY(-360deg)}
    25%  {transform:rotateY(-180deg)}
    50%  {transform:rotateY(0deg)}
    75%  {transform:rotateY(180deg)}
    100% {transform:rotateY(360deg)}
}

@-ms-keyframes iconyrykb {
    0%   {transform:rotateY(-360deg)}
    25%  {transform:rotateY(-180deg)}
    50%  {transform:rotateY(0deg)}
    75%  {transform:rotateY(180deg)}
    100% {transform:rotateY(360deg)}
}

@-moz-keyframes iconyrykb {
    0%   {transform:rotateY(-360deg)}
    25%  {transform:rotateY(-180deg)}
    50%  {transform:rotateY(0deg)}
    75%  {transform:rotateY(180deg)}
    100% {transform:rotateY(360deg)}
}

@-webkit-keyframes iconyrykb {
    0%   {transform:rotateY(-360deg)}
    25%  {transform:rotateY(-180deg)}
    50%  {transform:rotateY(0deg)}
    75%  {transform:rotateY(180deg)}
    100% {transform:rotateY(360deg)}
}







.xy-name{
    position:absolute;
    top:5%;
    left:5%;
    overflow:hidden;
}

.xy-name > .xiaoyang-logo{
    display:inline-block;
}

.xy-name > img{
    font-size:20px;
    color:#fff;
    font-weight:bold;
    height:60px;
    display:inline-block;
    vertical-align: bottom;
    margin: 0 10px;
}
.xy-name > span{
    font-size: 24px;
    color: #fff;
    font-weight: bold;
    display: inline-block;
    vertical-align: bottom;
    margin-bottom: 2px;
    letter-spacing: 0.4px;
}




.login-box{
    width:375px;
    border-radius:4px;
    position:absolute;
    top:10%;
    right:12%;
    box-shadow: 30px 35px 130px 4px #a2add0;
    z-index:999;
    /*background:#fff;*/
    background:rgba(255,255,255,0.8);
    overflow:hidden;
    border-radius:4px;
}


.login-box .login-box-top{
    height: 51px;
    border-bottom: 1px solid #eee;
    padding-top: 10px;
    font-size: 22px;
    color: #7aabff;
    position:relative;
}

.login-box .login-box-top:after{
    content:'';
    display:block;
    width:190px;
    height:3px;
    background:#fc8450;
    margin-top:8px;
}

.login-box .login-box-top > span{
    display:inline-block;
    padding-left:18px;
}



.login-box .login-box-top > .corner-toggle-box{
    position:absolute;
    right:-35px;
    top:-35px;
    width:71px;
    height:71px;
    overflow:hidden;
    background:#fff;
    transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -o-transform:rotate(45deg);


}
.login-box .login-box-top > .corner-toggle-box > i{
    position:absolute;
    font-size:46px;    
    display:none;
    cursor:pointer;
    transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
}

.login-box .login-box-top > .corner-toggle-box > .fa-desktop{
    right: 19px;
    top: 48px;
    font-size:30px;
}

.login-box .login-box-top > .corner-toggle-box > .fa-qrcode{
    right: 16px;
    top: 43px;
}

.login-box .login-box-top > .corner-toggle-box > .active-i{
    display:block;
}



.login-box .login-box-buttom{
    padding:20px;
    min-height:296px;
}
.login-box .login-box-buttom > section{
    display:none;
}
.login-box .login-box-buttom > .active-ibox{
    display:block;
}

.login-box .login-box-buttom > .login-input{

}

.login-box .login-box-buttom > .login-qrcode{

}

.login-box .login-box-buttom > .login-qrcode > img{
    width: 200px;
    display: block;
    margin: 0 auto;
    border:1px solid #eaeaea;
    padding:5px;
}

.login-box .login-box-buttom > .login-qrcode > span{
    display: block;
    text-align: center;
    margin-top: 15px;
    color: #888;
    font-size: 12px;
    letter-spacing: 0.8px;
}







.login-box .login-box-buttom .login-list{
    width:320px;
    height:40px;
    margin:0 auto 23px;
    position:relative;
}
.login-box .login-box-buttom .login-list > .fa-eye,
.login-box .login-box-buttom .login-list > .fa-eye-slash{
    position: absolute;
    right: 0px;
    top: 0px;
    cursor: pointer;
    width: 20px;
    height: 40px;
    line-height: 40px;
}

.login-box .login-box-buttom .login-list > label{
   display:inline-block;
   width: 26px;
   text-align: center;
   vertical-align:bottom;
   position: absolute;
   top: 7px;
   left: 5px;
}
.login-box .login-box-buttom .login-list > label > i{
   font-size:26px;
   color:#7d9ee5;
}
.login-box .login-box-buttom .login-list > input{
    display:inline-block;
    height:40px;
    width:320px;
    margin:0;
    padding:0;
    padding-left:35px;
    list-style:none;
    outline:none;
    border:none;
    border-bottom:1px solid #eaeaea;
    font-size:14px;
}
/* 清除IE下input输入框内默认的清除样式 */
.login-box .login-box-buttom .login-list > input::-ms-clear{
    display:none;
}

.login-box .login-box-buttom .login-list > .login-text{
    color:#3d464d;
}
.login-box .login-box-buttom .login-list > .login-text > a{
    color:#3d464d;
}
.login-box .login-box-buttom .login-list > .login-text > a:hover{
    color:#337ab7;
}

.login-box .login-box-buttom .login-list > .yellow-btn{
    width: 320px;
    height: 40px;
    line-height: 20px;
    font-size: 18px;
    padding-top: 10px;
    opacity: 1;
    color: #fff;
    background-color: #72a0fb;
    border-radius: 5px;
    font-size: 18px;
    box-shadow: 0 5px 15px #afe3e1;
}


/*用户名登录错误信息*/
.danger-tit{
    margin:6px 5px 10px;
}

.danger-tit span{
    width:100%;
    height:32px;
    line-height:32px;
    display:block;
    background: #ef8e8e;
    color:#fff;
    border-radius:4px;
    margin:0;
}

.danger-tit > span > label{
    font-weight:normal;
}

.danger-tit i{
    margin: 0 0 0 6px;
}