html,
body {
    padding: 0;
    margin: 0;
    height: 100%;
    min-height: 800px;
    background-color: #F6F8FB;
    font-family: "Microsoft Yahei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-repeat: repeat-y;
    background-size: 25% 100%;
    background-position: 100% 0;
}

@media only screen
    and (max-width: 1530px) {
        body {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAABCAYAAABkOJMpAAAAAXNSR0IArs4c6QAAABpJREFUOBFjVMn49J9hFIyGwGgIjIbAEAgBAK6uAn+8Yc3TAAAAAElFTkSuQmCC);
        }
    }
@media only screen
    and (max-width: 1600px) {
        body {
            min-width: 1200px;
        }
        .main {
            height: 800px;
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALYAAAABCAYAAABzP1TJAAAAAXNSR0IArs4c6QAAABVJREFUKBVjVMn49J9hFIyGwDALAQAUSgJ/8gWSigAAAABJRU5ErkJggg==);
        }
        .main,
        .main header .container,
        footer,
        #root {
            width: 930px;
        }
        #brand {
            width: 566px;
        }
        #login {
            width: 364px;
        }
    }

@media only screen
    and (min-width: 1530px)
    and (max-width: 1600px) {
        body {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAV4AAAABCAYAAACWhMaMAAAAAXNSR0IArs4c6QAAABxJREFUOBFjVMn49J9hFIyGwGgIjIbAaAjQLQQAogQCfx+J7hkAAAAASUVORK5CYII=);
        }
    }

@media only screen
    and (min-width: 1600px)
    and (max-width: 1920px) {
        body {
            min-width: 1600px;
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAABCAYAAADw8vieAAAAAXNSR0IArs4c6QAAAB9JREFUOBFjVMn49J9hFIyGwGgIjIbAaAiMhgCJIQAAlVoCf/hhMCAAAAAASUVORK5CYII=);
        }
        .main {
            height: 800px;
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANIAAAABCAYAAACrM/DDAAAAAXNSR0IArs4c6QAAABdJREFUKBVjVMn49J9hFIyGwGgIUBQCACvpAn8WA1gYAAAAAElFTkSuQmCC);
        }
        .main,
        .main header .container,
        footer,
        #root {
            width: 1150px;
        }
        #brand {
            width: 730px;
        }
        #login {
            width: 420px;
        }
    }

@media only screen
    and (min-width: 1920px) {
        body {
            min-width: 1920px;
            background-size: 30% 100%;
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlMAAAABCAYAAAD6mCs9AAAAAXNSR0IArs4c6QAAACZJREFUSA1jVMn49J9hFIyGwGgIjIbAaAiMhsBoCIyGwGgIkBUCADDGAn+LX8bjAAAAAElFTkSuQmCC);
        }
        .main {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANIAAAABCAYAAACrM/DDAAAAAXNSR0IArs4c6QAAABdJREFUKBVjVMn49J9hFIyGwGgIUBQCACvpAn8WA1gYAAAAAElFTkSuQmCC);
        }
        .main,
        .main header .container,
        footer,
        #root {
            width: 1150px;
        }
        #brand {
            width: 730px;
        }
        #login {
            width: 420px;
        }
    }

a {
    text-decoration: none;
    color: #108CEE;
}
h2 {
    text-align: left;
    color: #191C3D;
    font-size: 30px;
    margin: 32px 0;
    font-weight: normal;
}
h3 {
    text-align: left;
    color: #191C3D;
    font-size: 16px;
    opacity: 0.6;
    margin: 0;
    font-weight: normal;
    line-height: 30px;
}
.main {
    position: relative;
    height: 100%;
    margin: 0 auto;
    background-repeat: repeat-y;
    background-position: top right;
}

.main header {
    width: 100%;
    height: 20px;
    padding: 70px 0;
    position: relative;
    background: none;
}
.main header .container {
    height: 100%;
    margin-right: auto;
    margin-left: auto;
}
.main header .decoration {
    display: inline-block;
    width: 166px;
    height: 178px;
    background: url(../images/decoration.png) no-repeat 0 0;
    background-size: 166px 178px;
    position: absolute;
    top: 0;
    left: -195px;
}
.main header .logo {
    border: none;
}

.main header .container a {
    font-size: 14px;
    color: #fff;
}

.main header .container .right {
    float: right;
}

footer {
    position: relative;
    z-index: 2;
    margin: 0 auto;
    margin-top: -50px;
    text-align: left;
    padding: 50px 0;
    line-height: 24px;
    font-size: 12px;
    color: rgba(46, 51, 65, 0.66);
    display: block;
}

footer a {
    color: rgba(46, 51, 65, 0.66);
}

footer a:hover {
    text-decoration: underline;
}

#root {
    height: 436px;
    margin: 0 auto;
    position: relative;
}

#root .decoration {
    display: inline-block;
    width: 125px;
    height: 42px;
    background-size: 125px 42px;
    position: absolute;
    right: 143px;
    bottom: -80px;
}

@media only screen
    and (max-width: 1600px) {
        #root .decoration {
            right: 110px;
        }
    }

#root .layout {
    border-collapse: collapse;
    table-layout: fixed;
}

#brand {
    vertical-align: top;
    text-align: left;
    height: 420px;
}

#brand h2 {
    font-family: PingFangSC-Medium;
    font-size: 30px;
    color: #2E3341;
    line-height: 36px;
}

#brand h3 {
    opacity: 0.6;
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #2E3341;
    line-height: 30px;
}

#brand h3 span {
    font-family: DINAlternate-Bold;
    font-size: 16px;
    color: #00151D;
    line-height: 30px;
}

#brand p {
    margin: 0;
}

#brand p.hr {
    margin: 30px 0;
    border-top: 1px solid rgba(216, 216, 216, 0.5);
    width: 366px;
}

#login {
    height: 492px;
    position: relative;
    top: -30px;
    overflow: hidden;
    background: #FFF;
    border-radius: 4px;
    -webkit-box-shadow: 0 10px 20px 0px rgba(0, 0, 0, .05);
    -moz-box-shadow: 0 10px 20px 0px rgba(0, 0, 0, .05);
    box-shadow: 0 10px 20px 0px rgba(0, 0, 0, .05);
}

#login .login {
    margin: 0 auto;
    box-shadow: none;
    width: 300px;
}


@media only screen
    and (max-device-width: 640px)
    and (-webkit-min-device-pixel-ratio: 2) {
        body,
        .main,
        footer {
            min-width: 360px;
            width: auto;
        }

        body,
        .main {
            background-image: none;
        }

        .main header {
            padding: 20px 0;
        }
        .main header .container a {
            color: #333;
        }

        #login {
            width: 375px;
            top: 0;
        }

        footer {
            margin: 0 auto;
            text-align: center;
            position: absolute;
            bottom: 0;
        }

        #root,
        .main header .container {
            width: auto;
        }
        .main header .logo {
            margin-left: 10px;
            margin-top: 0;
        }
        .main header .container .right {
            margin-right: 10px;
            margin-top: 0;
        }
        #brand {
            display: none;
        }

        .main header .decoration,
        #root .decoration {
            display: none;
        }

        table {
            margin: 30px auto;
        }
    }