/** 登录页面样式 */
body {
    background-image: url("/backend/images/bg-login.svg");
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    background-position: center;
}

body:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}


.login-wrapper {
    max-width: 820px;
    padding: 20px;
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
    z-index: 2;
}

.layui-form {
    box-sizing: border-box;
    z-index: 2;
    padding: 25px 30px;
    background-color: #fff;
    box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.19);
    box-sizing: border-box;
    border-radius: 4px;
}

h2 {
    margin-top: 10px;
    color: #333;
    font-size: 16px;
    margin-bottom: 25px;
}

.layui-form-item {
    margin-bottom: 30px;
    position: relative;
}

.layui-form-item:last-child {
    margin-bottom: 0;
}

.layui-form-item > .layui-input {
    height: 46px;
    line-height: 1;
    border-radius: 2px !important;
}

.layui-input-icon-group > .layui-input {
    padding-left: 46px;
}

.layui-input-icon-group > .layui-icon {
    width: 46px;
    height: 46px;
    line-height: 46px;
    font-size: 20px;
    color: #909399;
    position: absolute;
    left: 0;
    top: 0;
    text-align: center;
}

.layui-form-item.login-captcha-group {
    padding-right: 135px;
}

.layui-form-item.login-captcha-group > .login-captcha {
    height: 46px;
    width: 120px;
    cursor: pointer;
    box-sizing: border-box;
    border: 1px solid #e6e6e6;
    border-radius: 2px !important;
    position: absolute;
    right: 0;
    top: 0;
}

.layui-form-item > .layui-form-checkbox {
    margin: 0 !important;
    padding-left: 25px;
}

.layui-form-item > .layui-form-checkbox > .layui-icon {
    width: 15px !important;
    height: 15px !important;
}

.layui-form .layui-btn-fluid {
    height: 44px;
    line-height: 44px;
    font-size: 16px;
    border-radius: 2px !important;
}

.layui-form-item.login-oauth-group > a > .layui-icon {
    font-size: 26px;
}

.login-copyright {
    color: #eee;
    padding-bottom: 20px;
    text-align: center;
    position: relative;
    z-index: 1;
}

@media screen and (min-height: 550px) {
    .login-wrapper {
        margin: -250px auto 0;
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        width: 100%;
    }

    .login-copyright {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
    }
}

.layui-btn {
    background-color: #5FB878;
    border-color: #5FB878;
}

.layui-link {
    color: #5FB878 !important;
}
.zoomIn {
    animation-duration: .5s
}

.zoomOut {
    animation-duration: .5s
}

.particle {
    position: absolute;
    border-radius: 50%
}

@keyframes particle-animation-1 {
    100% {
        transform: translate3d(48vw, 76vh, 72px)
    }
}

.particle:nth-child(1) {
    animation: particle-animation-1 60s infinite;
    opacity: .59;
    height: 8px;
    width: 8px;
    animation-delay: -.2s;
    transform: translate3d(41vw, 42vh, 73px);
    background: #47d926
}

@keyframes particle-animation-2 {
    100% {
        transform: translate3d(63vw, 50vh, 30px)
    }
}

.particle:nth-child(2) {
    animation: particle-animation-2 60s infinite;
    opacity: .13;
    height: 7px;
    width: 7px;
    animation-delay: -.4s;
    transform: translate3d(33vw, 1vh, 88px);
    background: #d9cd26
}

@keyframes particle-animation-3 {
    100% {
        transform: translate3d(56vw, 47vh, 100px)
    }
}

.particle:nth-child(3) {
    animation: particle-animation-3 60s infinite;
    opacity: .14;
    height: 6px;
    width: 6px;
    animation-delay: -.6s;
    transform: translate3d(63vw, 51vh, 33px);
    background: #2694d9
}

@keyframes particle-animation-4 {
    100% {
        transform: translate3d(85vw, 6vh, 14px)
    }
}

.particle:nth-child(4) {
    animation: particle-animation-4 60s infinite;
    opacity: .01;
    height: 10px;
    width: 10px;
    animation-delay: -.8s;
    transform: translate3d(14vw, 80vh, 38px);
    background: #26d9af
}

@keyframes particle-animation-5 {
    100% {
        transform: translate3d(54vw, 73vh, 80px)
    }
}

.particle:nth-child(5) {
    animation: particle-animation-5 60s infinite;
    opacity: .6;
    height: 6px;
    width: 6px;
    animation-delay: -1s;
    transform: translate3d(37vw, 18vh, 17px);
    background: #8b26d9
}

@keyframes particle-animation-6 {
    100% {
        transform: translate3d(74vw, 59vh, 76px)
    }
}

.particle:nth-child(6) {
    animation: particle-animation-6 60s infinite;
    opacity: .95;
    height: 10px;
    width: 10px;
    animation-delay: -1.2s;
    transform: translate3d(65vw, 78vh, 69px);
    background: #9a26d9
}

@keyframes particle-animation-7 {
    100% {
        transform: translate3d(47vw, 8vh, 36px)
    }
}

.particle:nth-child(7) {
    animation: particle-animation-7 60s infinite;
    opacity: .45;
    height: 10px;
    width: 10px;
    animation-delay: -1.4s;
    transform: translate3d(66vw, 16vh, 5px);
    background: #d926b8
}

@keyframes particle-animation-8 {
    100% {
        transform: translate3d(17vw, 43vh, 71px)
    }
}

.particle:nth-child(8) {
    animation: particle-animation-8 60s infinite;
    opacity: .3;
    height: 9px;
    width: 9px;
    animation-delay: -1.6s;
    transform: translate3d(79vw, 29vh, 81px);
    background: #266bd9
}

@keyframes particle-animation-9 {
    100% {
        transform: translate3d(39vw, 57vh, 33px)
    }
}

.particle:nth-child(9) {
    animation: particle-animation-9 60s infinite;
    opacity: .99;
    height: 10px;
    width: 10px;
    animation-delay: -1.8s;
    transform: translate3d(13vw, 28vh, 92px);
    background: #35d926
}

@keyframes particle-animation-10 {
    100% {
        transform: translate3d(15vw, 66vh, 36px)
    }
}

.particle:nth-child(10) {
    animation: particle-animation-10 60s infinite;
    opacity: .79;
    height: 8px;
    width: 8px;
    animation-delay: -2s;
    transform: translate3d(25vw, 3vh, 20px);
    background: #26d92c
}

@keyframes particle-animation-11 {
    100% {
        transform: translate3d(6vw, 32vh, 88px)
    }
}

.particle:nth-child(11) {
    animation: particle-animation-11 60s infinite;
    opacity: .16;
    height: 10px;
    width: 10px;
    animation-delay: -2.2s;
    transform: translate3d(2vw, 36vh, 38px);
    background: #26d9a3
}

@keyframes particle-animation-12 {
    100% {
        transform: translate3d(82vw, 15vh, 97px)
    }
}

.particle:nth-child(12) {
    animation: particle-animation-12 60s infinite;
    opacity: .13;
    height: 9px;
    width: 9px;
    animation-delay: -2.4s;
    transform: translate3d(72vw, 27vh, 13px);
    background: #26c1d9
}

@keyframes particle-animation-13 {
    100% {
        transform: translate3d(8vw, 31vh, 63px)
    }
}

.particle:nth-child(13) {
    animation: particle-animation-13 60s infinite;
    opacity: .62;
    height: 10px;
    width: 10px;
    animation-delay: -2.6s;
    transform: translate3d(31vw, 29vh, 5px);
    background: #4726d9
}

@keyframes particle-animation-14 {
    100% {
        transform: translate3d(37vw, 39vh, 33px)
    }
}

.particle:nth-child(14) {
    animation: particle-animation-14 60s infinite;
    opacity: 1;
    height: 9px;
    width: 9px;
    animation-delay: -2.8s;
    transform: translate3d(67vw, 8vh, 90px);
    background: #d926c4
}

@keyframes particle-animation-15 {
    100% {
        transform: translate3d(82vw, 62vh, 45px)
    }
}

.particle:nth-child(15) {
    animation: particle-animation-15 60s infinite;
    opacity: .13;
    height: 10px;
    width: 10px;
    animation-delay: -3s;
    transform: translate3d(32vw, 10vh, 48px);
    background: #b2d926
}

@keyframes particle-animation-16 {
    100% {
        transform: translate3d(86vw, 40vh, 93px)
    }
}

.particle:nth-child(16) {
    animation: particle-animation-16 60s infinite;
    opacity: .97;
    height: 7px;
    width: 7px;
    animation-delay: -3.2s;
    transform: translate3d(12vw, 47vh, 88px);
    background: #d9265f
}

@keyframes particle-animation-17 {
    100% {
        transform: translate3d(57vw, 77vh, 28px)
    }
}

.particle:nth-child(17) {
    animation: particle-animation-17 60s infinite;
    opacity: .54;
    height: 6px;
    width: 6px;
    animation-delay: -3.4s;
    transform: translate3d(29vw, 33vh, 34px);
    background: #29d926
}

@keyframes particle-animation-18 {
    100% {
        transform: translate3d(67vw, 87vh, 46px)
    }
}

.particle:nth-child(18) {
    animation: particle-animation-18 60s infinite;
    opacity: .09;
    height: 8px;
    width: 8px;
    animation-delay: -3.6s;
    transform: translate3d(85vw, 85vh, 93px);
    background: #cdd926
}

@keyframes particle-animation-19 {
    100% {
        transform: translate3d(54vw, 44vh, 49px)
    }
}

.particle:nth-child(19) {
    animation: particle-animation-19 60s infinite;
    opacity: .62;
    height: 7px;
    width: 7px;
    animation-delay: -3.8s;
    transform: translate3d(20vw, 72vh, 66px);
    background: #26d0d9
}

@keyframes particle-animation-20 {
    100% {
        transform: translate3d(86vw, 11vh, 75px)
    }
}

.particle:nth-child(20) {
    animation: particle-animation-20 60s infinite;
    opacity: .19;
    height: 10px;
    width: 10px;
    animation-delay: -4s;
    transform: translate3d(81vw, 51vh, 39px);
    background: #d9d026
}

@keyframes particle-animation-21 {
    100% {
        transform: translate3d(83vw, 60vh, 43px)
    }
}

.particle:nth-child(21) {
    animation: particle-animation-21 60s infinite;
    opacity: .22;
    height: 6px;
    width: 6px;
    animation-delay: -4.2s;
    transform: translate3d(7vw, 12vh, 11px);
    background: #d626d9
}

@keyframes particle-animation-22 {
    100% {
        transform: translate3d(77vw, 10vh, 73px)
    }
}

.particle:nth-child(22) {
    animation: particle-animation-22 60s infinite;
    opacity: .34;
    height: 10px;
    width: 10px;
    animation-delay: -4.4s;
    transform: translate3d(35vw, 85vh, 49px);
    background: #d92682
}

@keyframes particle-animation-23 {
    100% {
        transform: translate3d(66vw, 58vh, 5px)
    }
}

.particle:nth-child(23) {
    animation: particle-animation-23 60s infinite;
    opacity: .25;
    height: 9px;
    width: 9px;
    animation-delay: -4.6s;
    transform: translate3d(12vw, 49vh, 80px);
    background: #d9263e
}

@keyframes particle-animation-24 {
    100% {
        transform: translate3d(23vw, 41vh, 16px)
    }
}

.particle:nth-child(24) {
    animation: particle-animation-24 60s infinite;
    opacity: .7;
    height: 10px;
    width: 10px;
    animation-delay: -4.8s;
    transform: translate3d(89vw, 72vh, 92px);
    background: #9126d9
}

@keyframes particle-animation-25 {
    100% {
        transform: translate3d(63vw, 21vh, 81px)
    }
}

.particle:nth-child(25) {
    animation: particle-animation-25 60s infinite;
    opacity: .66;
    height: 10px;
    width: 10px;
    animation-delay: -5s;
    transform: translate3d(61vw, 36vh, 72px);
    background: #be26d9
}

@keyframes particle-animation-26 {
    100% {
        transform: translate3d(86vw, 12vh, 62px)
    }
}

.particle:nth-child(26) {
    animation: particle-animation-26 60s infinite;
    opacity: .39;
    height: 10px;
    width: 10px;
    animation-delay: -5.2s;
    transform: translate3d(53vw, 90vh, 69px);
    background: #d926d3
}

@keyframes particle-animation-27 {
    100% {
        transform: translate3d(12vw, 65vh, 95px)
    }
}

.particle:nth-child(27) {
    animation: particle-animation-27 60s infinite;
    opacity: .69;
    height: 9px;
    width: 9px;
    animation-delay: -5.4s;
    transform: translate3d(74vw, 28vh, 14px);
    background: #a026d9
}

@keyframes particle-animation-28 {
    100% {
        transform: translate3d(38vw, 22vh, 61px)
    }
}

.particle:nth-child(28) {
    animation: particle-animation-28 60s infinite;
    opacity: .86;
    height: 9px;
    width: 9px;
    animation-delay: -5.6s;
    transform: translate3d(60vw, 34vh, 78px);
    background: #2656d9
}

@keyframes particle-animation-29 {
    100% {
        transform: translate3d(39vw, 20vh, 99px)
    }
}

.particle:nth-child(29) {
    animation: particle-animation-29 60s infinite;
    opacity: .22;
    height: 8px;
    width: 8px;
    animation-delay: -5.8s;
    transform: translate3d(46vw, 31vh, 68px);
    background: #265cd9
}

@keyframes particle-animation-30 {
    100% {
        transform: translate3d(78vw, 49vh, 38px)
    }
}

.particle:nth-child(30) {
    animation: particle-animation-30 60s infinite;
    opacity: .15;
    height: 10px;
    width: 10px;
    animation-delay: -6s;
    transform: translate3d(81vw, 29vh, 16px);
    background: #26d98e
}