:root {
	--round-size:24rem;
}
body {
	overflow:hidden;
	padding:0px;
	margin:0px;
}
/*背景 渐变部分*/
        .login-bg {
	height:100vh;
	width:100vw;
	background:linear-gradient(180deg,#02aab0,#00cdac );
}
/*白色部分*/
        .login-bg:before {
	content:"";
	position:absolute;
	right:-25%;
	top:-15%;
	height:300%;
	width:100%;
	background:#fff;
	transform:rotate(25deg);
}
/*圆圈*/
        .round {
	position:absolute;
	top:30%;
	left:30%;
	width:var(--round-size);
	height:var(--round-size);
	border-radius:50%;
	background:#00cdac;
	display:grid;
	justify-content:center;
	opacity:0;
	animation-delay:.5s;
	animation-duration:.6s;
	animation-name:zoomIn1;
	animation-fill-mode:both;
}
/*小电脑*/
        .round:before {
	content:"";
	--r-size:6rem;
	width:calc(var(--round-size) - var(--r-size));
	height:calc(var(--round-size) - var(--r-size));
	/* border-radius:50%;
	background:#02aab0;
	*/
            background-image:url('https://gitee.com/shixixiyue/FineUICore_8.0_Login/raw/master/FineUICore.Examples/wwwroot/login/%E7%94%B5%E8%84%911.png');
	background-size:100%;
	margin:auto;
	opacity:0;
	animation-delay:.7s;
	animation-duration:.4s;
	animation-name:zoomIn2;
	animation-fill-mode:both;
}
/*圆圈动画*/
        @keyframes zoomIn1 {
	from {
	opacity:0;
	transform:scale3d(.3,.3,.3);
}
70% {
	transform:scale3d(1.2,1.2,1.2);
}
100% {
	transform:scale3d(1,1,1);
	opacity:1;
}
}/*小电脑动画*/
        @keyframes zoomIn2 {
	from {
	opacity:0;
	transform:scale3d(.3,.3,.3);
}
100% {
	opacity:.8;
}
}/*小图标 图层*/
        .icon-div,.icon-div-copy {
	position:absolute;
	top:30%;
	left:30%;
	width:var(--round-size);
	height:var(--round-size);
}
/*图标*/
        .icon {
	background-color:#fff;
	background-repeat:no-repeat;
	background-position:center;
	background-size:80%;
	width:5rem;
	height:5rem;
	position:absolute;
	animation-duration:.4s;
	animation-name:fadeInUp;
	animation-fill-mode:both;
	border-radius:50%;
	box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);
}
/* 图标延迟进入 */
        .icon1 {
	background-image:url('https://gitee.com/shixixiyue/FineUICore_8.0_Login/raw/master/FineUICore.Examples/wwwroot/login/%E5%9B%BE%E6%A0%87/1.png');
	top:41%;
	left:-15%;
	animation-delay:1.2s;
}
.icon2 {
	background-image:url('https://gitee.com/shixixiyue/FineUICore_8.0_Login/raw/master/FineUICore.Examples/wwwroot/login/%E5%9B%BE%E6%A0%87/2.png');
	top:-3%;
	left:3%;
	animation-delay:1.4s;
}
.icon3 {
	background-image:url('https://gitee.com/shixixiyue/FineUICore_8.0_Login/raw/master/FineUICore.Examples/wwwroot/login/%E5%9B%BE%E6%A0%87/3.png');
	top:-1%;
	left:42%;
	animation-delay:1.5s;
}
.icon4 {
	background-image:url('https://gitee.com/shixixiyue/FineUICore_8.0_Login/raw/master/FineUICore.Examples/wwwroot/login/%E5%9B%BE%E6%A0%87/4.png');
	top:15%;
	left:84%;
	animation-delay:1.7s;
}
/*图标进入*/
        @keyframes fadeInUp {
	from {
	opacity:0;
	transform:translate3d(0,30%,0);
}
99% {
	opacity:1;
}
/*进入后隐藏 由copy 继续动画*/
            100% {
	opacity:0;
}
}/*copy图层*/
        .icon-div-copy .icon {
	opacity:0;
	animation:updown 1.5s infinite ease-in-out;
	animation-direction:alternate;
}
/*延迟进入*/
        .icon-div-copy .icon1 {
	animation-delay:1.5s;
}
.icon-div-copy .icon2 {
	animation-delay:1.7s;
}
.icon-div-copy .icon3 {
	animation-delay:1.8s;
}
.icon-div-copy .icon4 {
	animation-delay:2.09s;
}
/*copy图标来回动*/
        @keyframes updown {
	from {
	opacity:1;
	transform:translate3d(0,0%,0);
}
1% {
	opacity:1;
	transform:translate3d(0,0%,0);
}
100% {
	opacity:1;
	transform:translate3d(0,-10%,0);
}
}/*表单*/
    .form {
	position:absolute;
	right:10%;
	top:28%;
	animation-duration:.8s;
	animation-delay:.5s;
	animation-name:fadeInRight;
	animation-fill-mode:both;
	animation-timing-function:ease-in;
	width:30rem;
	height:30rem;
	font-family:'微软雅黑';
}
.form > * {
	margin-bottom:3rem;
}
/*标题*/
    .form .title {
	color:#02aab0;
	font-size:4rem;
	font-weight:600;
	letter-spacing:6px;
	line-height:4rem;
}
/*输入框*/
    .form .f-field-body.f-widget-content {
	background-color:#fff;
	border-color:#02aab0;
}
.form input {
	color:#333 !important;
	font-size:1.5rem;
	line-height:3rem;
	text-indent:6px;
	width:98%;
}
/*登录按钮*/
    .form .btn {
	width:100%;
	height:4rem;
	border:none;
	background:linear-gradient(90deg,#02aab0,#00cdac );
	line-height:3rem;
	font-size:1.5rem;
	margin:0;
	text-indent:1rem;
	letter-spacing:1rem;
	color:#fff;
	cursor:pointer;
}
/*表单进入动画*/
    @keyframes fadeInRight {
	from {
	opacity:0;
	transform:translate3d(30%,0,0);
}
to {
	opacity:1;
	transform:none;
}
}