@-webkit-keyframes wobble {
    15% { -webkit-transform: translateX(0%) rotate(-5deg); }
    30% { -webkit-transform: translateX(0%) rotate(4deg); }
    45% { -webkit-transform: translateX(0%) rotate(-3deg); }
    60% { -webkit-transform: translateX(0%) rotate(2deg); }
    75% { -webkit-transform: translateX(0%) rotate(-1deg); }
}


html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; color: #505556; font-family: "Microsoft Yahei","montserratregular",Georgia,tahoma,arial; }
    body::before { content: " "; position: absolute; left: 0px; top: 0px; bottom: 0px; width: 20%; max-width: 300px; background: url(../img/left.png) no-repeat left top; background-size: contain; }
    body::after { content: " "; position: absolute; right: 0px; top: 0px; bottom: 0px; width: 20%; max-width: 300px; background: url(../img/right.png) no-repeat right top; background-size: contain; }

p, h1 { margin: 0px; padding: 0px; }

content { display: block; max-width: 700px; width: 100%; height: 100%; margin: auto; justify-content: center; align-items: center; display: -webkit-flex; }
    content .content { }
.content .icon { width: 140px; height: 140px; margin: auto; text-align: center; }
    .content .icon img { width: 120px; height: 120px; margin: 10px; border-radius: 16px; }
.content h1 { text-align: center; font-size: 24px; }
.content hr { color: #ccc; margin: 20px auto; padding: 0px; }
.content .info { color: #a9b1b3; text-align: center; font-size: 12px; line-height: 24px; }
.content .icon { text-align: center; padding: 10px 0px; }
.content .action { text-align: center; padding-top: 20px; }
    .content .action a.download { display: block; width: auto; padding: 12px 46px; text-decoration: none; min-width: 120px; border: 1px solid #32b2a7; border-radius: 40px; font-size: 16px; background: #32b2a7; color: #fff; }
        .content .action a.download.loading { background: url(../img/loading.gif) no-repeat center center; border-color: transparent; border-radius: 0px; text-indent: -100em; }
        .content .action a.download.config { border: solid 1px #b7b7b7; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed)); color: #f00; }
    .content .action a.faild { font-size: 12px; margin-top: 32px; color: #999; display: block; }

footer { position: fixed; left: 0px; right: 0px; bottom: 0px; line-height: 32px; text-align: center; font-size: 12px; line-height: 24px; border-top: 1px solid #ccc; color: #999; background-color: #fff; z-index: 1; }
    footer .ghs { background: url(../img/ghs.png) no-repeat left center; background-size: contain; padding-left: 16px; }

.wechat { display: none; left: 0px; top: 0px; right: 0px; bottom: 0px; position: fixed; z-index: 100; background: rgba(0,0,0,.8) url(../img/wechat.png) center top no-repeat; background-size: cover; }
    .wechat .arrow { left: 0px; top: 0px; right: 0px; bottom: 0px; position: absolute; background: rgba(0,0,0,.8) url(../img/wechat_arrow.png) right top no-repeat; background-size: cover; animation: wobble 1s infinite; }
    .wechat.show { display: block; }

.help { display: block; left: 0px; top: 0px; right: 0px; bottom: 0px; padding-bottom: 80px; position: fixed; z-index: 100; background: rgba(0,0,0,.8); overflow: scroll; transform: translateX(100%); transition: all .5s; }
    .help h1 { padding: 10px 0px; margin: auto; text-align: center; color: #fff; text-shadow: 1px 1px 2px #000; font-size: 18px; font-weight: normal; }
    .help .step { width: 80%; margin: auto; box-shadow: 0px 0px 5px rgba(0,0,0,.5); }
        .help .step img { width: 100%; border-radius: 8px; border: 1px solid rgba(255,255,255,.5); }
    .help a { position: fixed; bottom: 20px; color: #606060; left: 50%; width: 100px; margin-left: -50px; font-size: 16px; text-decoration: none; line-height: 42px; text-align: center; border-radius: 12px; border: solid 1px #b7b7b7; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed)); }
    .help.show { transform: unset; }

.helplink { position: fixed; bottom: 0px; padding: 5px 0px; text-align: center; left: 0px; right: 0px; border-top: 1px solid #efefef; background-color: #f5f5f5; }
    .helplink a { color: #f00; }