#app,
        body,
        html {
            width: 100%;
            height: 100%;
            background-color: #3f4457;
            background: -webkit-linear-gradient(#0a0e19, #373e51);
            margin: 0 auto;
        }

        #app {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        /* 主窗口 */
        .login-wrapper {
            width: 998px;
            height: 600px;

        }

        /* LOGO */
        .login-wrapper .logo-wrapper {
            height: 100px;
            line-height: 100px;
        }

        /* 内容区域 */
        .login-wrapper .login-content {
            display: flex;
            height: 500px;
            box-shadow: 0 5px 25px 5px rgba(23, 28, 63, .5);
            flex-direction: row;

        }

        /* 内容区域左图片 */
        .img-wrapper {
            background-image: url(/theme/smsplat/default/static/image/login-bg.png);
            position: relative;
        }

        .img-wrapper .loadin {
            opacity: 1;
        }

        .img-wrapper .bg1 {
            width: 213px;
            height: 105px;
            background: url(/theme/smsplat/default/static/image/login-cen1.png) no-repeat 50%;
            position: absolute;
            top: 204px;
            left: 188px;
            z-index: 4;
            opacity: 0;
            transition: all .3s linear .4s;
        }

        .img-wrapper .bg2 {
            width: 245px;
            height: 128px;
            background: url(/theme/smsplat/default/static/image/login-cen2.png) no-repeat 50%;
            position: absolute;
            top: 232px;
            left: 170px;
            z-index: 3;
            opacity: 0;
            /* animation: 2s opacity 2 0s infinite;  */
            transition: all .3s linear .4s;
        }

        .img-wrapper .bg3 {
            width: 372px;
            height: 184px;
            background: url(/theme/smsplat/default/static/image/login-cen3.png) no-repeat 50%;
            position: absolute;
            top: 242px;
            left: 115px;
            z-index: 2;
            opacity: 0;
            transition: all .3s linear .4s;
        }

        .img-wrapper .bg4 {
            width: 213px;
            height: 109px;
            background: url(/theme/smsplat/default/static/image/login-cen4.png) no-repeat 50%;
            position: absolute;
            top: 350px;
            left: 191px;
            z-index: 1;
            opacity: 0;
            transition: all .3s linear .4s;
        }

        .img-wrapper .tbox {
            padding: 10px;
            color: #fff;
            border-radius: 3px;
            line-height: 150%;
        }

        .img-wrapper .text1 {
            background-color: #2FA743;
            position: absolute;
            top: 215px;
            left: 46px;
            z-index: 5;
            opacity: 0;
        }

        .img-wrapper .text2 {
            background-color: #1E2A4C;
            color: #29b88c;
            position: absolute;
            top: 186px;
            left: 360px;
            z-index: 5;
            opacity: 0;
        }

        .img-wrapper .text3 {
            background-color: #487EF9;
            position: absolute;
            top: 400px;
            left: 360px;
            z-index: 5;
            opacity: 0;
        }

        .img-wrapper .text4 {
            color: #fff;
            line-height: 200%;
            position: absolute;
            top: 50px;
            left: 200px;
            z-index: 5;
            text-align: center;
        }



        /* 内容区域右表单 */
        .logintype {
            float:right;
            width: 80px;
            height: 80px;
            align-self: flex-end;
            display: block;
            right: 0;
        }

        .logintype.ispc {
            background-image: url(/theme/smsplat/default/static/image/pc.png);
        }

        .logintype.iswx {
            background-image: url(/theme/smsplat/default/static/image/weixin.png);
        }

        .login-wrapper .login-content .login-box {
            flex-grow: 1;
            background-color: #fff !important;
            padding: 10px
        }

        .login-wrapper .login-content .login-box h1 {
            position: relative;
            height: 24px;
            margin-bottom: 40px;
            padding-left: 13px;
            line-height: 24px;
            border-left: 5px solid #27b98c;
            font-size: 24px;
            color: #5a617d;
        }

        .input-item {
            display: flex;
            justify-content: flex-start;
            height: 38px;
            line-height: 38px;
            margin-bottom: 30px;
        }

        .form-label {

            width: 80px;
            border: 1px solid #e6e6e6;
            box-sizing: border-box;
            border-collapse: separate;
            border-radius: 2px 0 0 2px;
            text-align: center;

        }

        .input-inline {
            flex-grow: 1;
            margin-left: -1px;
        }