*{margin:0;padding:0}body{height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(200deg,#e3c5eb,#a9c1ed);overflow:hidden}.container{position:relative;z-index:1;background-color:#fff;border-radius:15px;display:flex;flex-direction:column;justify-content:center;align-items:center;width:350px;height:500px;box-shadow:0 5px 20px rgba(0,0,0,0.1)}.container .tit{font-size:26px;margin:0 auto 80px auto}.container input{width:280px;height:30px;text-indent:8px;border:0;border-bottom:1px solid #ddd;outline:0;margin:12px auto}.container button{width:280px;height:40px;margin:35px auto 40px auto;border:0;background:linear-gradient(-200deg,#fac0e7,#aac2ee);color:#fff;font-weight:bold;letter-spacing:8px;border-radius:10px;cursor:pointer;transition:.5s}.container button:hover{background:linear-gradient(-200deg,#aac2ee,#fac0e7);background-position-x:-280px}.container span{font-size:14px}.container a{color:#3b96c9;text-decoration:none}ul li{position:absolute;border:1px solid #fff;background-color:#fff;width:30px;height:30px;list-style:none;opacity:0}.square li{top:40vh;left:60vw;animation:square 10s linear infinite}.square li:nth-child(2){top:80vh;left:10vm;animation-delay:2s}.square li:nth-child(3){top:80vh;left:85vm;animation-delay:4s}.square li:nth-child(4){top:10vh;left:70vm;animation-delay:6s}.square li:nth-child(5){top:10vh;left:10vm;animation-delay:8s}.circle li{bottom:0;left:15vw;animation:circle 10s linear infinite}.circle li:nth-child(2){left:35vw;animation-delay:2s}.circle li:nth-child(3){left:55vw;animation-delay:4s}.circle li:nth-child(4){left:75vw;animation-delay:6s}.circle li:nth-child(5){left:90vw;animation-delay:8s}@keyframes square{0%{transform:scale(0) rotate(0deg);opacity:0}100%{transform:scale(0) rotate(1000deg);opacity:0}}@keyframes circle{0%{transform:scale(0) rotate(0deg);opacity:1;bottom:0;border-radius:0}100%{transform:scale(0) rotate(1000deg);opacity:0;bottom:90vh;border-radius:50%}}.loaderbox{display:inline-block;min-width:125px;margin:0 auto;color:#000!important;font-size:13px;font-weight:400;text-align:center;vertical-align:middle;border:1px solid #ddd;background-color:#fff;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 1px 8px rgba(0,0,0,0.1);-moz-box-shadow:0 1px 8px rgba(0,0,0,0.1);box-shadow:0 1px 8px rgba(0,0,0,0.1)}.loaderbox div{font-size:x-large;float:right}@media(max-width:767px){.loading-activity{width:18px;height:18px}}