*{padding:0;margin:0;box-sizing:border-box}
body{background-color:#203a58}

.content{width:750px;height:auto;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);background-color:#fff;border-radius:20px}

.flexR{display:flex;flex-direction:row;justify-content:center;align-items:center}
.flexL{display:flex;flex-direction:row;justify-content:flex-start;align-items:center}
.flexEnd{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}
.flexB{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start}
.flexBC{display:flex;flex-direction:row;justify-content:space-between;align-items:center}
.flexC{display:flex;flex-direction:column;justify-content:center;align-items:center}

.content .right{width:370px;height:420px;padding:50px;margin-left:380px}
.content .right .logo{margin-bottom:20px}
.content .right .inp{position:relative}
.content .right .inp>span{position:absolute;left:15px;height:20px;width:20px;-webkit-mask:url(../img/loginUser.png) no-repeat;mask:url(../img/loginUser.png) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;letter-spacing:1px;display:block;line-height:38px;top:10px;background-color:#a2a7ae;transition:all .3s}
.content .right .inp:nth-child(2)>span{-webkit-mask:url(../img/loginPwd.png) no-repeat;mask:url(../img/loginPwd.png) no-repeat}
.content .right .sms_icon>span{-webkit-mask:url(../img/safe.png) no-repeat;mask:url(../img/safe.png) no-repeat}
.content .right .inp input:focus+span{background-color:#3874f6;left:10px}
.content .right .inp input{border:0;background:0 0;line-height:40px;width:100%;padding:0 5px;color:#333;padding-left:50px;border-bottom:1px solid #e0e0e0}
.content .right .inp input~.focus-border{position:absolute;bottom:0;left:50%;width:0;height:1.2px;background-color:#3874f6;transition:.4s}
.content .right .inp input:focus~.focus-border{width:100%;transition:.4s;left:0}
.content .right .inp input::-webkit-input-placeholder{color:#a3a8af}
.content .right .inp input::-moz-input-placeholder{color:#a3a8af}
.content .right .inp input::-ms-input-placeholder{color:#a3a8af}
.content .right form>div{margin-bottom:15px}
.content .right .but{margin-top:20px}
.content .right .layui-form{width:260px}
.content .right button{background:#203a58;color:#fff;line-height:48px;border:0;border-radius:24px;width:100%;box-shadow:0 2px 8px 0 rgba(20,39,61,.6);transition:all .4s}
.content .right button:hover{box-shadow:none;cursor:pointer}

.content .left{width:420px;height:520px;position:absolute;left:-20px;top:-50px;overflow:hidden;border-radius:20px}
.content .left .bg{background-color:#153355;box-shadow:2px 0 10px 0 rgba(20,39,61,.5);position:absolute;width:1000px;z-index:0;height:1000px;border-radius:50%;right:10px;top:0;margin-top:-50%}
.content .left .leftCon{position:absolute;z-index:1;margin-top:60px;color:#fff}
.content .left .p1{font-size:34px;font-weight:500;margin:10px;margin-left:50px}
.content .left .p2{margin-left:50px;font-size:16px;margin-bottom:60px}

.loginBg::before,.loginBg::after{content: '';display: inline-block;width:1867px;height:1019px;border-radius: 50%;background-color: #2a4463;left:-1000px;position: fixed;top:-880px;}
.loginBg::after{width: 1554px;height: 1313px;left: auto;top: auto;right: -600px;bottom: -1150px;}

@keyframes fadein{
	from{opacity: 0;}
	to{opacity: 1;}
}
@-webkit-keyframes fadein{
	from{opacity: 0;}
	to{opacity: 1;}
}
@keyframes moveinformleft{
	from{transform: translateX(-100%);}
	to{transform: translateX(0%);}
}
@-webkit-keyframes moveinformleft{
	from{-webkit-transform: translateX(-100%);}
	to{-webkit-transform: translateX(0%);}
}
.content .left .leftCon{
	opacity: 0;
	animation: fadein 0.5s ease-out 0.2s forwards,moveinformleft 0.5s ease-out 0.2s;

}