@charset "utf-8";
/**********************************
 * 公用类
 **********************************/
html, body {
    max-width: 100%;
    min-width: 320px;
    min-height: 100%;
}
html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 去掉点击时默认的高亮 */
}
html {
    color: #383838;
    font-size: 10px;
}
@media screen and (min-width: 376px) and (max-width: 414px) {
    html.mobile {font-size: 11px;}
}
@media screen and (min-width: 415px) and (max-width: 639px) {
    html.mobile {font-size: 13px;}
}
@media screen and (min-width: 640px) and (max-width: 719px) {
    html.mobile {font-size: 14px;}
}
@media screen and (min-width: 720px) and (max-width: 749px) {
    html.mobile {font-size: 15px;}
}
@media screen and (min-width: 750px) and (max-width: 799px) {
    html.mobile {font-size: 16px;}
}
@media screen and (min-width: 800px) and (max-width: 1200px) {
    html.mobile {font-size: 20px;}
}
body {
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.42857143;
    overflow: hidden;
    font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, 
        "Droid Sans","wenquanyi micro hei","Hiragino Sans GB", "Hiragino Sans GB W3", Arial, sans-serif;
}
*, *:before, *:after {
    box-sizing: border-box;
}
.test {
    width: 100px;
    height: 100px;
    background: grey;
}
.font-serif, .text-serif {
    font-family: Georgia,"Times New Roman",Times,SimSun,FontAwesome,serif;
}
.font-kai, .text-kai {
    font-family: Georgia,"Times New Roman",Times,Kai,"Kaiti SC",KaiTi,BiauKai,FontAwesome,serif;
}
.font-monospace, .text-monospace {
    font-family: Monaco,Menlo,Consolas,"Courier New",FontAwesome,monospace;
}
.title {
    word-wrap: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.title2 {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    display: box;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    box-orient: vertical;
}
.disabled, [disabled] {
    pointer-events: none;
    -webkit-user-select: none;
            user-select: none;
}
.nav, .list {
    padding: 0;
    margin: 0;
    list-style: none;
}
.body, 
.h5 .page,
.full,
.bg, .bg > img,
.main-load, 
.rotate-info,
.alert, .dialog, .modal,
.imgRadio > * {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.bg > img,
img.full,
.imgRadio > img {
    width: 100%;
    height: 100%;
}
.alert {
    opacity: 0;
    z-index: -1;
    -webkit-transition: opacity .4s;
    transition: opacity .4s;
}
.alert.open {
    opacity: 1;
    z-index: 10;
}
.alert-bg {
    background: rgba(0,0,0,.9);
}
.alert-panel {
    -webkit-transition: .4s;
    transition: .4s;
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
}
.rotate-info,
.main-load {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-align: center;
            align-items: center;
    -webkit-box-pack: center;
            justify-content: center;
    background: #fff;
    z-index: 10;
}
.loading-img {
    max-width: 25%;
    margin-bottom: 1em;
}
.h5 .page {
    display: none;
}
.h5 .page > * {
    position: absolute;
}
.panel {
    display: -webkit-box;
    display: flex;
}
.panel2,
.body {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
}
.mobile .body {
    max-width: 768px;
    margin: auto;
}
@media (max-width: 768px) and (orientation: landscape) {
    .body {
        bottom: auto;
        height: 200%;
    }
}
.panel > *, .panel2 > *,
.body > .main {
    -webkit-box-flex: 1;
            flex-grow: 1;
}
.panel > :first-child, .panel > :last-child,
.panel2 > :first-child, .panel2 > :last-child,
.body > .header, .body > .footer {
    flex-shrink: 0;
    -webkit-box-flex: 0;
            flex-grow: 0;
}
.body > .main {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.canScroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.hide {
    display: none !important;
}
.btn {
    color: inherit;
}
.btn.nb, .btn.nb:focus:hover:active {
    outline: none;
}
.btn:not(.link), .btn:not(.link):focus:hover:active {
    border: none;
    text-decoration: none;
}
.btn:active {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
}
h1, h2 {
    margin: 0 0 1rem;
    line-height: 1.2;
}
h3, h4, h5, h6 {
    margin: 1rem 0;
}
p {margin: 0 0 1rem}
h1 {font-size: 2.0em}
h2 {font-size: 1.6em}
h3 {font-size: 1.4em}
h4 {font-size: 1.2em}
h5 {font-size: 1.125em}
h6 {font-size: 0.9em}
h1 small, h2 small, h3 small {
    font-size: 1.6rem;
    font-weight: normal;
}
img {
    width: 100%;
    display: block;
}
.imgRadio {
    position: relative;
}
.imgRadio:before {
    content: "";
    padding-top: 100%;
    display: block;
}
.imgRadio.slide:before {
    padding-top: 56.25%;
}
.imgRadio.rect:before {
    padding-top: 100%;
}
.imgRadio > .img {
    background-color: #fff;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
table {
    background-color: transparent;
    empty-cells: show;
    border-spacing: 0;
    border-collapse: collapse;
}
.table {
    width: 100%;
}
[class*="icon-"]:before {
    position: relative;
    display: inline-block;
    font: normal normal normal 1em/1;
    font-size: inherit;
    vertical-align: middle;
    text-rendering: auto;
}
.form-file {
    position: relative;
    overflow: hidden;
}
.form-file input[type="file"] {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    z-index: 1;
    opacity: 0;
    cursor: pointer;
}
.form-file input[type="file"]:focus + label {
    outline: 1px solid #7FA1D8;
    outline: -webkit-focus-ring-color auto 5px;
    outline-offset: -2px;
}
.form-row dt {
    width: 10rem;
    overflow: hidden;
    clear: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.form-row dd + dt {margin-top: .5em}
.form-row dd {margin-left: 11rem}
.gap-mt > :not(:first-child) {
    margin-top: 1rem;
}
.gap-mt-m > :not(:first-child) {
    margin-top: .5rem;
}
.gap-mb > :not(:last-child) {
    margin-bottom: 1rem;
}
.gap-mb-m > :not(:first-child) {
    margin-bottom: .5rem;
}
.gap-ml > :not(:first-child) {
    margin-left: 1rem;
}
.gap-ml-m > :not(:first-child) {
    margin-left: .5rem;
}
.gap-mr > :not(:last-child) {
    margin-right: 1rem;
}
.gap-mr-m > :not(:last-child) {
    margin-right: .5rem;
}
.flex {
    display: -webkit-box;
    display: flex;
}
.col-c {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
            align-items: center;
}
.col-t {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: start;
            align-items: flex-start;
}
.col-b {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: end;
            align-items: flex-end;
}
.row-c {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
            justify-content: center;
}
.row-l {
    display: -webkit-box;
    display: flex;
            -webkit-box-pack: start;
                    justify-content: flex-start;
}
.row-r {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: end;
            justify-content: flex-end;
}
.row-b {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
            justify-content: space-between;
}
.row-a {
    display: -webkit-box;
    display: flex;
    justify-content: space-around;
}
.grow {
    -webkit-box-flex: 1;
            flex: 1;
}
.shrink {
    -webkit-box-flex: 0;
            flex: none;
}
[class*="col-"] > * {
    position: relative;
    min-height: 1px;
}
.clear:before, .clear:after,
[class*="col-in-"]:before, 
[class*="col-in-"]:after {
    content: "";
    display: table;
}
.clear:after,
[class*="col-in-"]:after {clear: both}
[class*="col-in-"] > * {
    float: left;
}
.col-in-2 > * {width: 50%}
.col-in-3 > * {width: 33.33333333%}
.col-in-4 > * {width: 25%}
.col-in-5 > * {width: 20%}
.col-in-6 > * {width: 16.66666667%}

.modal {
    opacity: 0;
    z-index: -1;
    -webkit-transition: opacity .4s;
    transition: opacity .4s;
}
.modal.open {
    opacity: 1;
    z-index: 10;
}
.modal-bg {
    background: rgba(0,0,0,.8);
}
.modal-panel {
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
}
/** alertifyjs 1.8.0 http://alertifyjs.com **/
.alertify .ajs-dimmer,.alertify .ajs-modal{position:fixed;padding:0;z-index:1981;top:0;right:0;bottom:0;left:0}.alertify .ajs-dimmer{margin:0;background-color:#252525;opacity:.5}.alertify .ajs-modal{overflow-y:auto}.alertify .ajs-dialog{position:relative;margin:5% auto;min-height:110px;max-width:500px;padding:24px 24px 0;outline:0;background-color:#fff}.alertify .ajs-dialog.ajs-capture:before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;display:block;z-index:1}.alertify .ajs-reset{position:absolute!important;display:inline!important;width:0!important;height:0!important;opacity:0!important}.alertify .ajs-commands{position:absolute;right:4px;margin:-14px 24px 0 0;z-index:2}.alertify .ajs-commands button{display:none;width:10px;height:10px;margin-left:10px;padding:10px;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;cursor:pointer}.alertify .ajs-commands button.ajs-close{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNy8xMy8xNOrZqugAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAh0lEQVQYlY2QsQ0EIQwEB9cBAR1CJUaI/gigDnwR6NBL/7/xWLNrZ2b8EwGotVpr7eOitWa1VjugiNB7R1UPrKrWe0dEAHBbXUqxMQbeewDmnHjvyTm7C3zDwAUd9c63YQdUVdu6EAJzzquz7HXvTiklt+H9DQFYaxFjvDqllFyMkbXWvfpXHjJrWFgdBq/hAAAAAElFTkSuQmCC)}.alertify .ajs-commands button.ajs-maximize{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNy8xMy8xNOrZqugAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAOUlEQVQYlWP8//8/AzGAhYGBgaG4uBiv6t7eXkYmooxjYGAgWiELsvHYFMCcRX2rSXcjoSBiJDbAAeD+EGu+8BZcAAAAAElFTkSuQmCC)}.alertify .ajs-header{margin:-24px -24px 0;padding:16px 24px;background-color:#fff}.alertify .ajs-body{min-height:56px}.alertify .ajs-body .ajs-content{padding:16px 24px 16px 16px}.alertify .ajs-footer{padding:4px;margin-left:-24px;margin-right:-24px;min-height:43px;background-color:#fff}.alertify.ajs-maximized .ajs-dialog,.alertify.ajs-no-padding:not(.ajs-maximized) .ajs-body .ajs-content,.alertify.ajs-resizable .ajs-dialog{padding:0}.alertify .ajs-footer .ajs-buttons.ajs-auxiliary .ajs-button,.alertify .ajs-footer .ajs-buttons.ajs-primary .ajs-button{margin:4px}.alertify .ajs-footer .ajs-buttons.ajs-primary{text-align:right}.alertify .ajs-footer .ajs-buttons.ajs-auxiliary{float:left;clear:none;text-align:left}.alertify .ajs-footer .ajs-buttons .ajs-button{min-width:88px;min-height:35px}.alertify .ajs-handle{position:absolute;display:none;width:10px;height:10px;right:0;bottom:0;z-index:1;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNy8xMS8xNEDQYmMAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAQ0lEQVQYlaXNMQoAIAxD0dT7H657l0KX3iJuUlBUNOsPPCGJm7VDp6ryeMxMuDsAQH7owW3pyn3RS26iKxERMLN3ugOaAkaL3sWVigAAAABJRU5ErkJggg==);-webkit-transform:scaleX(1);transform:scaleX(1);cursor:se-resize}.alertify.ajs-no-overflow .ajs-body .ajs-content{overflow:hidden!important}.alertify.ajs-no-padding.ajs-maximized .ajs-body .ajs-content{left:0;right:0;padding:0}.alertify.ajs-no-padding:not(.ajs-maximized) .ajs-body{margin-left:-24px;margin-right:-24px}.alertify.ajs-no-padding.ajs-resizable .ajs-body .ajs-content{left:0;right:0}.alertify.ajs-closable .ajs-commands button.ajs-close,.alertify.ajs-maximizable .ajs-commands button.ajs-maximize,.alertify.ajs-maximizable .ajs-commands button.ajs-restore{display:inline-block}.alertify.ajs-maximized .ajs-dialog{width:100%!important;height:100%!important;max-width:none!important;margin:0 auto!important;top:0!important;left:0!important}.alertify.ajs-maximized.ajs-modeless .ajs-modal{position:fixed!important;min-height:100%!important;max-height:none!important;margin:0!important}.alertify.ajs-maximized .ajs-commands button.ajs-maximize{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNy8xMy8xNOrZqugAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAASklEQVQYlZWQ0QkAMQhDtXRincOZX78KVtrDCwgqJNEoIB3MPLj7lRUROlpyVXGzby6zWuY+kz6tj5sBMTMAyVV3/595RbOh3cAXsww1raeiOcoAAAAASUVORK5CYII=)}.alertify.ajs-maximized .ajs-commands,.alertify.ajs-resizable .ajs-commands{margin:14px 24px 0 0}.alertify.ajs-maximized .ajs-header,.alertify.ajs-resizable .ajs-header{position:absolute;top:0;left:0;right:0;margin:0;padding:16px 24px}.alertify.ajs-maximized .ajs-body,.alertify.ajs-resizable .ajs-body{min-height:224px;display:inline-block}.alertify.ajs-maximized .ajs-body .ajs-content,.alertify.ajs-resizable .ajs-body .ajs-content{position:absolute;top:50px;right:24px;bottom:50px;left:24px;overflow:auto}.alertify.ajs-maximized .ajs-footer,.alertify.ajs-resizable .ajs-footer{position:absolute;left:0;right:0;bottom:0;margin:0}.alertify.ajs-resizable:not(.ajs-maximized) .ajs-dialog{min-width:548px}.alertify.ajs-resizable:not(.ajs-maximized) .ajs-handle{display:block}.alertify.ajs-movable:not(.ajs-maximized) .ajs-header{cursor:move}.alertify.ajs-modeless .ajs-dimmer,.alertify.ajs-modeless .ajs-reset{display:none}.alertify.ajs-modeless .ajs-modal{overflow:visible;max-width:none;max-height:0}.alertify.ajs-modeless.ajs-pinnable .ajs-commands button.ajs-pin{display:inline-block;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNy8xMy8xNOrZqugAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAQklEQVQYlcWPMQ4AIAwCqU9u38GbcbHRWN1MvKQDhQFMEpKImGJA0gCgnYw0V0rwxseg5erT4oSkQVI5d9f+e9+xA0NbLpWfitPXAAAAAElFTkSuQmCC)}.alertify.ajs-modeless.ajs-unpinned .ajs-modal{position:absolute}.alertify.ajs-modeless.ajs-unpinned .ajs-commands button.ajs-pin{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNy8xMy8xNOrZqugAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAO0lEQVQYlWP8//8/AzGAiShV6AqLi4txGs+CLoBLMYbC3t5eRmyaWfBZhwwYkX2NTxPRvibKjRhW4wMAhxkYGbLu3pEAAAAASUVORK5CYII=)}.alertify.ajs-modeless:not(.ajs-unpinned) .ajs-body{max-height:500px;overflow:auto}.alertify.ajs-basic .ajs-header{opacity:0}.alertify.ajs-basic .ajs-footer{visibility:hidden}.alertify.ajs-frameless .ajs-header{position:absolute;top:0;left:0;right:0;min-height:60px;margin:0;padding:0;opacity:0;z-index:1}.alertify.ajs-frameless .ajs-footer{display:none}.alertify.ajs-frameless .ajs-body .ajs-content{position:absolute;top:0;right:0;bottom:0;left:0}.alertify.ajs-frameless:not(.ajs-resizable) .ajs-dialog{padding-top:0}.alertify.ajs-frameless:not(.ajs-resizable) .ajs-dialog .ajs-commands{margin-top:0}.ajs-no-overflow{overflow:hidden!important;outline:0}.ajs-no-overflow.ajs-fixed{position:fixed;top:0;right:0;bottom:0;left:0;overflow-y:scroll!important}.ajs-no-selection,.ajs-no-selection *{-webkit-user-select:none;user-select:none}@media screen and (max-width:568px){.alertify .ajs-dialog{min-width:150px}.alertify:not(.ajs-maximized) .ajs-modal{padding:0 5%}.alertify:not(.ajs-maximized).ajs-resizable .ajs-dialog{min-width:initial;min-width:auto}}@-moz-document url-prefix(){.alertify button:focus{outline:#3593D2 dotted 1px}}.alertify .ajs-dimmer,.alertify .ajs-modal{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition-property: opacity,visibility;transition-property:opacity,visibility;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-duration:250ms;transition-duration:250ms}.alertify.ajs-hidden .ajs-dimmer,.alertify.ajs-hidden .ajs-modal{visibility:hidden;opacity:0}.alertify.ajs-in:not(.ajs-hidden) .ajs-dialog{-webkit-animation-duration:.5s;animation-duration:.5s}.alertify.ajs-out.ajs-hidden .ajs-dialog{-webkit-animation-duration:250ms;animation-duration:250ms}.alertify .ajs-dialog.ajs-shake{-webkit-animation-name:ajs-shake;animation-name:ajs-shake;-webkit-animation-duration:.1s;animation-duration:.1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes ajs-shake{0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes ajs-shake{0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.alertify.ajs-slide.ajs-in:not(.ajs-hidden) .ajs-dialog{-webkit-animation-name:ajs-slideIn;animation-name:ajs-slideIn;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1.275);animation-timing-function:cubic-bezier(.175,.885,.32,1.275)}.alertify.ajs-slide.ajs-out.ajs-hidden .ajs-dialog{-webkit-animation-name:ajs-slideOut;animation-name:ajs-slideOut;-webkit-animation-timing-function:cubic-bezier(.6,-.28,.735,.045);animation-timing-function:cubic-bezier(.6,-.28,.735,.045)}.alertify.ajs-zoom.ajs-in:not(.ajs-hidden) .ajs-dialog{-webkit-animation-name:ajs-zoomIn;animation-name:ajs-zoomIn}.alertify.ajs-zoom.ajs-out.ajs-hidden .ajs-dialog{-webkit-animation-name:ajs-zoomOut;animation-name:ajs-zoomOut}.alertify.ajs-fade.ajs-in:not(.ajs-hidden) .ajs-dialog{-webkit-animation-name:ajs-fadeIn;animation-name:ajs-fadeIn}.alertify.ajs-fade.ajs-out.ajs-hidden .ajs-dialog{-webkit-animation-name:ajs-fadeOut;animation-name:ajs-fadeOut}.alertify.ajs-pulse.ajs-in:not(.ajs-hidden) .ajs-dialog{-webkit-animation-name:ajs-pulseIn;animation-name:ajs-pulseIn}.alertify.ajs-pulse.ajs-out.ajs-hidden .ajs-dialog{-webkit-animation-name:ajs-pulseOut;animation-name:ajs-pulseOut}.alertify.ajs-flipx.ajs-in:not(.ajs-hidden) .ajs-dialog{-webkit-animation-name:ajs-flipInX;animation-name:ajs-flipInX}.alertify.ajs-flipx.ajs-out.ajs-hidden .ajs-dialog{-webkit-animation-name:ajs-flipOutX;animation-name:ajs-flipOutX}.alertify.ajs-flipy.ajs-in:not(.ajs-hidden) .ajs-dialog{-webkit-animation-name:ajs-flipInY;animation-name:ajs-flipInY}.alertify.ajs-flipy.ajs-out.ajs-hidden .ajs-dialog{-webkit-animation-name:ajs-flipOutY;animation-name:ajs-flipOutY}@-webkit-keyframes ajs-pulseIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes ajs-pulseIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@-webkit-keyframes ajs-pulseOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes ajs-pulseOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@-webkit-keyframes ajs-zoomIn{0%{opacity:0;-webkit-transform:scale3d(.25,.25,.25);transform:scale3d(.25,.25,.25)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes ajs-zoomIn{0%{opacity:0;-webkit-transform:scale3d(.25,.25,.25);transform:scale3d(.25,.25,.25)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@-webkit-keyframes ajs-zoomOut{0%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}100%{opacity:0;-webkit-transform:scale3d(.25,.25,.25);transform:scale3d(.25,.25,.25)}}@keyframes ajs-zoomOut{0%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}100%{opacity:0;-webkit-transform:scale3d(.25,.25,.25);transform:scale3d(.25,.25,.25)}}@-webkit-keyframes ajs-fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes ajs-fadeIn{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes ajs-fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes ajs-fadeOut{0%{opacity:1}100%{opacity:0}}@-webkit-keyframes ajs-flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes ajs-flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@-webkit-keyframes ajs-flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}@keyframes ajs-flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}@-webkit-keyframes ajs-flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes ajs-flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@-webkit-keyframes ajs-flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}@keyframes ajs-flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}@-webkit-keyframes ajs-slideIn{0%{margin-top:-100%}100%{margin-top:5%}}@keyframes ajs-slideIn{0%{margin-top:-100%}100%{margin-top:5%}}@-webkit-keyframes ajs-slideOut{0%{margin-top:5%}100%{margin-top:-100%}}@keyframes ajs-slideOut{0%{margin-top:5%}100%{margin-top:-100%}}.alertify-notifier{position:fixed;width:0;overflow:visible;z-index:1982;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.alertify-notifier .ajs-message{position:relative;width:260px;max-height:0;padding:0;opacity:0;margin:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition-duration:250ms;transition-duration:250ms;-webkit-transition-timing-function:linear;transition-timing-function:linear}.alertify-notifier .ajs-message.ajs-visible{-webkit-transition-duration:.5s;transition-duration:.5s;-webkit-transition-timing-function:cubic-bezier(.175,.885,.32,1.275);transition-timing-function:cubic-bezier(.175,.885,.32,1.275);opacity:1;max-height:100%;padding:15px;margin-top:10px}.alertify-notifier .ajs-message.ajs-success{background:rgba(91,189,114,.95)}.alertify-notifier .ajs-message.ajs-error{background:rgba(217,92,92,.95)}.alertify-notifier .ajs-message.ajs-warning{background:rgba(252,248,215,.95)}.alertify-notifier.ajs-top{top:10px}.alertify-notifier.ajs-bottom{bottom:10px}.alertify-notifier.ajs-right{right:10px}.alertify-notifier.ajs-right .ajs-message{right:-320px}.alertify-notifier.ajs-right .ajs-message.ajs-visible{right:290px}.alertify-notifier.ajs-left{left:10px}.alertify-notifier.ajs-left .ajs-message{left:-300px}.alertify-notifier.ajs-left .ajs-message.ajs-visible{left:0}



/*****************************************
 * 公共类
 *****************************************/
/**
 * 颜色
 *******************************/
.grey {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

/*******************************************
 * 基本动画
 *****************************************/
.anim-title {
    animation: title .3s linear;
}
@keyframes title {
    0% {opacity: 0; transform: scale(0);}
    80% {opacity: 1; transform: scale(1.2);}
    100% {transform: scale(1);}
}
.anim-title2 {
    animation: title2 2s infinite;
}
@keyframes title2 {
    from, 10%, 27%, 40%, 50% {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transform: translate3d(0,0,0);
    }
    20%, 21% {
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transform: translate3d(0, -30px, 0);
    }
    35% {
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transform: translate3d(0, -15px, 0);
    }
    45% {
        transform: translate3d(0,-4px,0);
    }
}

/*******************************************
 * 页面
 *****************************************/
/**
 * 基础
 *******************************/

@font-face {
  font-family: 'xxxx';
  src: url('../img/汉仪秀英体简.TTF');
}
.font {
    font-family: 'xxxx', Arial, sans-serif;
}

.btn:active, .btn.click {
    transform: scale(0.95);
}

.notice {
    position: absolute;
    bottom: 5%;
    left: 0; right: 0;
    text-align: center;
    z-index: 99;
    color: #ddd;
    text-shadow: 0 0 10px #000;
}
.logo {
    position: absolute;
    top: 2%;
    left: 32%;
    width: 36%;
}
.buttons .btn {
    position: relative;
    display: block;
}
.btn > .bg {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: .6em;
    font-weight: bold;
    color: #fff;
}

.top-buttons {
    top: 2%;
    left: 2%;
    width: 96%;
    display: flex;
    justify-content: space-between;
    color: #f9668a;
    font-weight: bold;
}
.btn-2 {
    width: 6em;
}
.btn-2 > .bg {
    color: #fa5d84;
    padding: 0 .2em .4em 0;
}

.buttom-buttons {
    bottom: 5%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    color: #fff;
    font-weight: bold;
    letter-spacing: 0.1em;
}
.buttom-buttons > .btn {
    width: 12em;
}


/**
 * 欢迎页
 *******************************/
.title {
    top: 20%;
    left: 0;
    width: 95%;
}
.start-buttons {
    bottom: 8%;
    left: 20%;
    width: 60%;
    color: #fff;
    font-weight: bold;
}
.start-buttons .bg {
    justify-content: space-between;
    max-width: 8em;
    margin: auto;
}

/**
 * 规则页
 *******************************/
.rule-box {
    position: absolute;
    top: 50%;
    left: 5%;
    width: 90%;
    transform: translateY(-50%);
}

/**
 * 分享页
 *******************************/
.share {
    z-index: 2;
}
.arrow {
    top: 5%;
    right: 5%;
    width: 20%;
}

/**
 * 选择页
 *******************************/
.choose-box {
    top: 50%;
    left: 5%;
    width: 90%;
    transform: translateY(-50%);
    overflow: hidden;
}
.choose-item {
    position: relative;
    width: 25%;
    float: left;
    padding: 1em;
    color: #f9668a;
}
.choose .word {
    bottom: 10%;
    left: 0;
    width: 100%;
    text-align: center;
}
.choose-item:before {
    content: "\2714";
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #f9668a;
    font-size: 3em;
    visibility: hidden;
}
.choose-item.hasRight:before {
    visibility: visible;
    color: #f9668a;
}


/**
 * 答题页
 *******************************/
.question .tips {
    z-index: 1;
    display: none;
    background: rgba(0,0,0,.8) url(../img/question-tips.png) center / 90% auto no-repeat;
}
.problem-box {
    top: 22%;
    left: 0;
    width: 100%;
    color: #fa5d84;
    text-align: center;
}
.problem-item {
    font-weight: bold;
    /*font-size: 1.4em;*/
    min-height: 1em;
}
.problem-item > span {
    position: relative;
    padding: .2em .5em;
}
.problem-item:first-child span:after {
    content: "";
    position: absolute;
    bottom: -1.6em;
    left: 5%; right: 10%;
    height: 2px;
    background: #fa5d84;
}

.problem-tips {
    margin-top: 2em;
    margin-right: 1em
}
.answer-box {
    top: 50%;
    left: 10%;
    width: 80%;
}
.btn-3 {
    color: #fff;
    font-weight: bold;
    padding-left: 4%;
}
.btn-3 > .bg {
    padding-left: 10%;
}
.btn-3 > .bg {
    font-size: 0.8em;
}
.question-mark {
    position: absolute;
    top: -20%;
    left: -5%;
    bottom: -10%;
}
.question-mark > img {
    height: 100%;
    width: auto;
}
.mark-num {
    position: absolute;
    top: 30%;
    left: 45%;
}


/**
 * 答题提示页
 *******************************/
.question-tips {
    top: 50%;
    left: 5%;
    width: 90%;
    transform: translateY(-50%);
}
.question-tips > .word-box {
    margin-top: -13%;
}

/**
 * 答对页
 *******************************/
.word-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-align: center;
    color: #fa5d84;
    letter-spacing: 0.05em;
    line-height: 1.1;
}
.result-good .buttons,
.result-bad .buttons {
    position: absolute;
    bottom: 8%;
    left: 20%;
    width: 60%;
}
.result-good .word-box,
.result-bad .word-box {
    position: absolute;
    top: 20%;
    left: 10%;
    width: 80%;
    bottom: 33%;
}
.result-good .result2 .buttons,
.result-bad .result2 .buttons {
    bottom: 5%;
}

.result-good .result2 .w2,
.result-good .result1 .w3 {
    font-size: 1.3em;
}
.result-good .result1 .w4 {
    opacity: 0.5;
    font-weight: normal;
    font-size: 1em;
    margin-top: 1em;
}

/**
 * 答错页
 *******************************/
.result-bad .result1 .w1 {
    margin-top: -5%;
    font-size: 1.4em;
}
.result-bad .result1 .w2 {
    font-size: .7em;
    margin-top: 1em;
}
.result-bad .result2 .w1 {
    margin-top: -5%;
    font-size: 1.2em;
}
.result-bad .result2 .w2 {
    font-size: 1.4em;
    margin-top: 1em;
}

/**
 * 中奖页
 *******************************/
.prize-good .word-box {
    top: 20%;
    bottom: 30%;
    left: 10%;
    width: 80%;
    font-size: inherit;
}
.qrcode {
    height: 50%;
    width: auto;
    margin: 1em auto;
    border: 1px solid #fa5d84;
}
.qrcode > img {
    width: auto;
    height: 100%;
}
.prize-good .w1 {
    font-size: 3em;
    margin-bottom: .5em;
}
.prize-good .w2 {
    font-weight: bold;
}
.prize-good .w3 {
    font-size: 1em;
}

/**
 * 未中奖页
 *******************************/
.prize-bad .word-box {
    top: 25%;
    bottom: 30%;
    left: 10%;
    width: 80%;
}
.prize-bad .btn-index {
    bottom: 8%;
    left: 20%;
    width: 60%;
}