.login{z-index: 2;position:absolute;width: 350px;border-radius: 10%;height: 430px;background: white;box-shadow: 0px 0px 5px #333333;top: 50%;left: 50%;margin-top: -250px;margin-left: -175px;transition: all 1s;-moz-transition: all 1s;	/* Firefox 4 */-webkit-transition: all 1s;	/* Safari 和 Chrome */-o-transition: all 1s;	/* Opera */}
.login-top{font-size: 24px;margin-top: 100px;padding-left: 40px;box-sizing: border-box;color: #333333;margin-bottom: 50px;}
.login-center{width: 100%;box-sizing: border-box;padding: 0 40px;margin-bottom: 30px;}
.login-center-img{width: 20px;height: 20px;float: left;margin-top: 5px;}
.login-center-img>img{width: 100%;}
.login-center-input{float: left;width: 230px;margin-left: 15px;height: 30px;position: relative;}
.login-center-input input{z-index: 2;transition: all 0.5s;padding-left: 10px;color: #333333;width: 100%;height: 30px;border: 0;border-bottom: 1px solid #cccccc;border-top: 1px solid #ffffff;border-left: 1px solid #ffffff;border-right: 1px solid #ffffff;box-sizing: border-box;outline: none;position: relative;}



.login-center-input input:focus{border: 1px solid dodgerblue;}
.login-center-input input{border: 1px solid #BDBBBB;}
.login-center-input-text{background: white;padding: 0 5px;position: absolute;z-index: 0;opacity: 0;height: 20px;top: 50%;margin-top: -10px;font-size: 14px;left: 5px;color: dodgerblue;line-height: 20px;transition: all 0.5s;-moz-transition: all 0.5s;	/* Firefox 4 */-webkit-transition: all 0.5s;	/* Safari 和 Chrome */-o-transition: all 0.5s;	/* Opera */}
/*.login-center-input input:focus~*/
.login-center-input-text{top: 0;z-index: 3;opacity: 1;margin-top: -15px;}
.login.active{-webkit-animation: login-small 0.8s ; animation: login-small 0.8s ;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}
.login-button{cursor: pointer;width: 250px;text-align: center;height: 40px;line-height: 40px;background-color: dodgerblue;border-radius: 5px;margin: 0 auto;margin-top: 50px;color: white;}


@charset "utf-8";
.clearfix:after{visibility:hidden;display: block;font-size:0;content:" ";clear:both;height:0;}
* html .clearfix{ zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
.cli{ clear:both; font-size:0; height:0; overflow:hidden;display:block;}

.logo{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width:100%;
    height: 120px;
}

#clogo {
    /*position: absolute;*/
    width: 240px;
    height: 120px;
    border-radius: 5%;
    /*left: 50px;*/
    /*top: 15px;*/
    background: #66afe9;
    box-shadow: 2px 2px 5px #444;
    /*border:1px solid red;*/
}


#particles-js{

    position:absolute;
    right: 15%;
    top:50%;

}
#bottomimg{
    position:absolute;
    bottom:3%;
}

.demo{
    width: 100%;

    height: 100%;

    margin: 50px auto;



    display: flex;

    justify-content: center;

    align-items: center;
}

.demo img{

    width: 700px;

    height: 500px;

}

#submit{
    margin-top:10px;
    width:55%;
    margin-left:22.5%;
    height:35px;
    font-size: 20px;
    font-weight: bold;
    /*background-color: #d9534f;*/
    font-family: "黑体";
    /*color:white;*/

    border-radius:5px;
    border:0px;
}
.yzm{width:100px;height:32px;}


html, body {
    width:100%;
    height: 100%;
    background-color: #28a4c9;
}

/*html{*/
    /*!*background:skyblue ;*!*/
/*!*linear-gradient(to right,black , skyblue);*!*/
    /*!*background-image: url("5.jpg");*!*/
    /*background-color: #28a4c9;*/
/*}*/

.headtitle{
    color:#00EE00;  text-shadow:5px 2px 6px #000;margin-top:50px;font-size:40px;alignment: center;text-align: center;
}