.first-loading-wrp{display:flex;flex-direction:column;align-items:center;justify-content:center;height:90vh;min-height:90vh}
.first-loading-wrp>h1{font-size:20px;font-weight:400;color:#4c6ca7;margin-bottom:30px}
.first-loading-wrp .loading-wrp{display:flex;align-items:center;justify-content:center;padding:98px;padding-bottom:30px;padding-top:60px}
.dot{position:relative;box-sizing:border-box;display:inline-block;width:64px;height:64px;font-size:64px;transform:rotate(45deg);animation:antRotate 1.2s infinite linear}
.dot i{position:absolute;display:block;width:28px;height:28px;background-color:#4c6ca7;border-radius:0;opacity:.3;transform:scale(.75);transform-origin:50% 50%;animation:antSpinMove 1s infinite linear alternate}
.dot i:nth-child(1){top:0;left:0}
.dot i:nth-child(2){top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s}
.dot i:nth-child(3){right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s}
.dot i:nth-child(4){bottom:0;left:0;-webkit-animation-delay:1.2s;animation-delay:1.2s}
@keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}
@-webkit-keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}
@keyframes antSpinMove{to{opacity:1}}
@-webkit-keyframes antSpinMove{to{opacity:1}}
#uploadTip1{opacity:0;animation:showTip .2s linear 5s 1;color:#999;font-size:14px;animation-fill-mode:forwards}
#uploadTip2{opacity:0;animation:showTip .2s linear 30s 1;color:#999;font-size:14px;animation-fill-mode:forwards}
@keyframes showTip{to{opacity:1}}
@-webkit-keyframes showTip{to{opacity:1}}
.first-loading-wrp p{margin:4px}