:root * {
    -webkit-filter: none !important;
    filter: none !important;
    --numfont: "DIN Alternate", "DroidSans";
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    margin: 0;
    padding: 0;
    font-size: 4vw;
}

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    font-family: Helvetica;
}

html::-webkit-scrollbar {
    display: none;
}

body {
    margin: 0;
    line-height: 1.8;
    color: #333;
    background: #f8f8f8;
    overflow-x: hidden;
}

a, input, textarea, select, button {
    outline: 0;
}

fieldset,
img {
    border: 0;
    vertical-align: middle;
}

ol, ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

input, select, button {
    vertical-align: baseline;
    border-radius: 0;
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
}

i {
    font-style: normal;
}

button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: none;
}

input[type=checkbox], input[type=radio] {
    vertical-align: middle;
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    margin: 0;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}

textarea {
    outline: none;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    overflow: auto;
    resize: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

@keyframes animate-up {
    0% {
        opacity: 0;
        transform: translateY(100vh)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes animate-left {
    0% {
        opacity: 0;
        transform: translateX(100vw)
    }
    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes animate-rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.layer-mask {
    background: rgba(0, 0, 0, .5);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
}

.layer-container {
    position: fixed;
    background: #fff;
    animation-duration: 0.3s;
    animation-fill-mode: both;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1vw 3vw 0 rgba(0, 0, 0, .05);
}

.layer-container.direction-left {
    right: 0;
    animation-name: animate-left;
}

.layer-container.direction-up {
    bottom: 0;
    animation-name: animate-up;
    border-radius: 2vw 2vw 0 0;
    overflow: hidden;
}

.layer-title {
    position: relative;
    height: 15vw;
    background: #fff;
    line-height: 15vw;
    padding: 0 0 0 3vw;
    display: flex;
    justify-content: space-between;
    flex-shrink: 0;
    font-size: 4.5vw;
    font-weight: bold;
}

.layer-title i {
    height: 15vw;
    line-height: 15vw;
    width: 13vw;
    display: block;
    text-align: center;
    font-size: 5vw;
}

.layer-content {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.toast-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 999999999;
}

.toast-content {
    color: #fff;
    background: rgba(0, 0, 0, .5);
    padding: 1.5vw 5vw;
    border-radius: 5vw;
    animation-name: animate-up;
    animation-duration: 0.2s;
    animation-fill-mode: both;
}

.loading-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    z-index: 9999;
}

.loading-content {
    background: rgba(0, 0, 0, .5);
    animation-name: animate-up;
    animation-duration: 0.2s;
    animation-fill-mode: both;
    border-radius: 3vw;
    color: #fff;
    text-align: center;
    padding: 3vw;
}

.loading-content span {
    display: block;
    font-size: 3vw;
    padding: 0 3vw;
}

.loading-content i {
    height: 15vw;
    width: 15vw;
    line-height: 15vw;
    display: block;
    text-align: center;
    font-size: 15vw;
    animation-name: animate-rotate;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    margin: auto;
}

.popup-mask {
    background: rgba(0, 0, 0, .5);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99;
}

.popup-container {
    background: #fff;
    animation-name: animate-up;
    animation-duration: 0.3s;
    animation-fill-mode: both;
    box-shadow: 0 1vw 3vw 0 rgba(0, 0, 0, .05);
    border-radius: 1vw;
    min-width: 80vw;
    max-width: 90vw;
}

.popup-content {
    padding: 6vw;
    text-align: center;
}

.popup-content i {
    width: 15vw;
    height: 15vw;
    font-size: 15vw;
    line-height: 15vw;
    display: block;
    margin: auto;
}

.popup-button {
    height: 13vw;
    position: relative;
    display: flex;
    color: #3a66e9;
}

.popup-button span {
    display: block;
    position: relative;
    text-align: center;
    width: 100%;
    line-height: 13vw;
    font-size: 4vw;
    cursor: pointer;
    font-weight: bold;
}

.hide {
    display: none;
}

.cell {
    background-color: #FFF;
    position: relative;
    z-index: 1;
}

.cell-title {
    padding: 3vw;
    font-size: 3vw;
    text-align: left;
    color: #888;
    position: relative;
    z-index: 1;
    line-height: 1;
}

.cell:before {
    content: ' ';
    position: absolute;
    left: 0;
    bottom: auto;
    right: auto;
    top: 0;
    height: 1px;
    width: 100%;
    background-color: #e6e6e6;
    display: block;
    z-index: 15;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
}

.cell:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    right: auto;
    top: auto;
    height: 1px;
    width: 100%;
    background-color: #e6e6e6;
    display: block;
    z-index: 15;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

.cell.notb:before {
    display: none;
}

.cell a.cell-item, .cell label.cell-item {
    background-color: #FFF;
}

.cell a.cell-item:active, .cell label.cell-item:active {
    background-color: #f5f5f5;
}

.cell-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    padding-left: 3vw;
    overflow: hidden;
}

.cell-item:not(:last-child):after {
    margin-left: 3vw;
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    right: auto;
    top: auto;
    height: 1px;
    width: 100%;
    background-color: #e6e6e6;
    display: block;
    z-index: 15;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

.cell-left {
    color: #333;
    font-size: 3.5vw;
    white-space: nowrap;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.cell-onlytext {
    padding: 3.5vw 3vw 3.5vw 0;
}

.cell-right {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 100%;
    min-height: 15vw;
    color: #525252;
    text-align: right;
    font-size: 3.5vw;
    padding-right: 3vw;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.cell-input {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 12.5vw;
    border: none;
    font-size: 3.5vw;
    background: transparent;
    color: #555;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    text-align: left;
    padding-left: 3vw;
    /* fuck UC */
}
.cell-select {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 12.5vw;
    border: none;
    font-size: 3.5vw;
    color: #555;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    text-align: left;
    padding-left: 3vw;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHIAAABuCAYAAAD7yUedAAAACXBIWXMAAAsTAAALEwEAmpwYAAAE9GlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNy4yLWMwMDAgNzkuMWI2NWE3OWI0LCAyMDIyLzA2LzEzLTIyOjAxOjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjMuNSAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjQtMDUtMTdUMTQ6Mjg6MjMrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDI0LTA1LTE3VDE0OjMwOjAxKzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDI0LTA1LTE3VDE0OjMwOjAxKzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3ZWI4ZDI5MS1kMzVjLTRjMzktYmRjNi1iMjdjOTNhMGVhN2YiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6N2ViOGQyOTEtZDM1Yy00YzM5LWJkYzYtYjI3YzkzYTBlYTdmIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6N2ViOGQyOTEtZDM1Yy00YzM5LWJkYzYtYjI3YzkzYTBlYTdmIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo3ZWI4ZDI5MS1kMzVjLTRjMzktYmRjNi1iMjdjOTNhMGVhN2YiIHN0RXZ0OndoZW49IjIwMjQtMDUtMTdUMTQ6Mjg6MjMrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMy41IChNYWNpbnRvc2gpIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pmbzu/wAAAJKSURBVHic7dxdbqNAFAbRYpSFsbNhZ87OmIcwku3YCebnNv6oklryE033UcDGirtxHLH370/rE7BtEjIkIUMSMiQhQxIyJCFDEjIkIUMSMiQhQxIyJCFDEjIkIUMSMiQhQxIyJCFDEjIkIUMSMiQhQxIyJCFDEjIkIUMSMiQhQxIyJCFDEjIkIUMSMiQhQxIyJCFDEjIkIUMSMqSPikm6rgMYgM9pnKGBab0lP0o1juPuA+iBcRrD/qtq3oWr9VbscdWltb96/ZdszAu36/2smLTVPTIV8x4Rqm4lRZdW+IIb78ZQssiari+n/0cPRXtcCAm398okzKeIkAkJeZg/IkIuJORg/ooI2ZDw/pizECEfEt4XczYinAMSHmNe1u/1br2ECOeBhPfBfBkRzgUJx8e8R5x9bmeDhONiLkaEc0LC8TBXIcJ5IeE4mKsR4dyQ8IW5yUYubLO5zw65+Ya2mlPInTa2ei4hb6vA3GUOIb+3J+ZuxxbycY82vN/hmJsl5PMWPSqbeazNL9lC/twWmCVvooT8vTWYZe+EhZzXEszSz6ZCzu8VzPIHDEK+1hzMFk+JhFzQwHPMJogg5NIGHn9z0gQRhFzTwHfMJogg5NoGDoAIQm7RQGNEqNnjrmKjp390bVU/jaHVCZTsceO/GNsof0MgJCFDEjIkIUMSMiQhQxIyJCFDEjIkIUMSMiQhQxIyJCFDEjIkIUMSMiQhQxIyJCFDEjIkIUMSMiQhQxIyJCFDEjIkIUMSMiQhQxIyJCFDEjIkIUP6B04kqP2Qs8X5AAAAAElFTkSuQmCC");
    background-size: auto 50%;
    background-repeat: no-repeat;
    background-position: right center;
    /* fuck UC */
}

.cell-icon {
    display: block;
    width: 6vw;
    height: 6vw;
    line-height: 6vw;
    text-align: center;
    margin-right: 1.5vw;
    font-size: 7vw;
}

.cell-icon img {
    height: 5vw;
    margin-right: 1vw;
}

.cell-arrow:after {
    margin-left: .5vw;
    margin-right: -1vw;
    display: block;
    font-family: 'iconfont';
    font-size: 6vw;
    color: #C9C9C9;
    content: '\e748';
}

.cell-textarea {
    width: 100%;
    border: none;
    display: block;
    height: 18vw;
    font-size: 3.5vw;
    padding: 2vw 0;
}

.tb-margin {
    height: 3vw;
}


/* === Button ===*/
.button {
    text-align: center;
    position: relative;
    border: none;
    pointer-events: auto;
    height: 9vw;
    line-height: 9vw;
    font-size: 3.75vw;
    display: inline-block;
    padding: 0 4.5vw;
    border-radius: 1vw;
    background-color: #3a66e9;
    color: #FFF;
}

.button-sm {
    text-align: center;
    position: relative;
    border: none;
    pointer-events: auto;
    height: 7vw;
    line-height: 7vw;
    font-size: 3vw;
    display: inline-block;
    padding: 0 3vw;
    border-radius: 1vw;
    background-color: #3a66e9;
    color: #FFF;
}

.button-block {
    text-align: center;
    position: relative;
    border: none;
    pointer-events: auto;
    width: 100%;
    display: block;
    font-size: 4vw;
    height: 12vw;
    line-height: 12vw;
    border-radius: .5vw;
    background-color: #3a66e9;
    color: #FFF;
}

.button:active, .button-sm:active, .button-block:active {
    opacity: .5;
}

.button-block-out {
    padding: 3vw;
    position: relative;
}

.button-block-out .button-block {
    margin-bottom: 3vw;
}

.button-block-out .button-block:last-child {
    margin: 0;
}

.button-danger {
    background-color: #EF4F4F;
    color: #FFF;
}

.button-primary {
    background-color: #ffaa00;
    color: #FFF;
}

.button-disabled {
    background-color: #CCC;
    color: #F0F0F0;
    pointer-events: none;
}

.button-normal {
    background-color: #FFF;
    color: #454545;
    position: relative;
}

.button-normal:after {
    content: '';
    position: absolute;
    border: 1px solid #e8e8e8;
    display: block;
    z-index: 2;
    width: 200%;
    height: 200%;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    border-radius: 2vw;
    transform-origin: 0 0;
    transform: scale(0.5);
    pointer-events: none;
}

.button-block.button-normal:after {
    border-radius: 2vw;
}

.button-sm.button-normal:after {
    border-radius: 1vw;
}


.button-radius, .button-radius:after {
    border-radius: 20vw !important;
}


.radio,
.checkbox {
    width: 6vw;
    height: 6vw;
    background-color: #ffffff;
    border: solid 1px #dddddd;
    -webkit-border-radius: 4vw;
    border-radius: 4vw;
    font-size: 4vw;
    margin: 0;
    padding: 0;
    position: relative;
    display: inline-block;
    vertical-align: top;
    cursor: default;
    -webkit-appearance: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-transition: background-color ease 0.1s;
    transition: background-color ease 0.1s;
}

.checkbox {
    border-radius: 10vw;
}

.radio:checked,
.radio.checked,
.checkbox:checked,
.checkbox.checked {
    background-color: #5e6d85;
    border: none;
    text-align: center;
    background-clip: padding-box;
}

.radio:checked:before,
.radio.checked:before,
.checkbox:checked:before,
.checkbox.checked:before,
.radio:checked:after,
.radio.checked:after,
.checkbox:checked:after,
.checkbox.checked:after {
    content: '';
    width: 2.5vw;
    height: 1.5vw;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -1.4vw;
    margin-top: -1.4vw;
    background: transparent;
    border: 2px solid #ffffff;
    border-top: none;
    border-right: none;
    z-index: 2;
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.radio:disabled,
.radio.disabled,
.checkbox:disabled,
.checkbox.disabled {
    background-color: #dddddd;
    border: solid 2px #dddddd;
}

.radio:disabled:before,
.radio.disabled:before,
.radio:disabled:after,
.radio.disabled:after,
.checkbox:disabled:before,
.checkbox.disabled:before,
.checkbox:disabled:after,
.checkbox.disabled:after {
    content: '';
    width: 2.5vw;
    height: 1.5vw;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -1.25vw;
    margin-top: -1.25vw;
    background: transparent;
    border: 1px solid #ffffff;
    border-top: none;
    border-right: none;
    z-index: 2;
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.switch {
    width: 12vw;
    height: 7.5vw;
    position: relative;
    vertical-align: top;
    background-color: #dddddd;
    border: none;
    border-radius: 8vw;
    background-clip: content-box;
    display: inline-block;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.switch:before {
    width: 7vw;
    height: 7vw;
    position: absolute;
    top: .25vw;
    left: .25vw;
    border-radius: 50%;
    background-color: #fff;
    content: '';
    -webkit-transition: left 0.2s;
    transition: left 0.2s;
}

.switch:checked {
    background-color: #5e6d85;
}

.switch:checked:before {
    left: 4.75vw;
}


.border-t:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: auto;
    right: auto;
    top: 0;
    height: 1px;
    width: 100%;
    background-color: #e6e6e6;
    display: block;
    z-index: 15;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
}

.border-b:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    right: auto;
    top: auto;
    height: 1px;
    width: 100%;
    background-color: #e6e6e6;
    display: block;
    z-index: 15;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

.border-l:before {
    content: '';
    position: absolute;
    right: auto;
    top: 0;
    left: 0;
    bottom: auto;
    width: 1px;
    height: 100%;
    background-color: #e6e6e6;
    display: block;
    z-index: 15;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
}

.border-r:before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    left: auto;
    bottom: auto;
    width: 1px;
    height: 100%;
    background-color: #e6e6e6;
    display: block;
    z-index: 15;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
}

.border-tb:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: auto;
    right: auto;
    top: 0;
    height: 1px;
    width: 100%;
    background-color: #e6e6e6;
    display: block;
    z-index: 15;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
}

.border-tb:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    right: auto;
    top: auto;
    height: 1px;
    width: 100%;
    background-color: #e6e6e6;
    display: block;
    z-index: 15;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

.safebottom {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

.border-t:after,
.border-b:after,
.border-tb:before,
.border-tb:after,
.cell:before,
.cell:after,
.cell-item:not(:last-child):after {
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
}

.border-l:before,
.border-r:before {
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
}


/*tabbar*/
.tabbar {
    width: 100vw;
    background: #fff;
    height: 16vw;
    display: flex;
    position: fixed;
    bottom: 0;
    z-index: 20;
    align-items: center;
    box-sizing: content-box;
}
.tabbar-seat{
    height: 16vw;
}

.tabbar .pa {
    width: 100%;
    height: 16vw;
    padding: 2vw 0;
    display: block;
    text-align: center;
}
.tabbar.fixed{
    position: fixed;
    z-index: 12;
    width: 100%;
    bottom: 0;
}

.tabbar a:active {
    opacity: .5;
}

.tabbar .pa i {
    font-size: 8vw;
    line-height: 8vw;
    display: block;
}

.tabbar .pa span {
    display: block;
    font-size: 3vw;
    line-height: 3vw;
}

.tabbar .pa.active {
    color: #3a66e9;
}

.tab-page {
    border-bottom: 16vw solid rgba(255, 255, 255, 0);
    position: relative;
}

.tab-page .transparent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    z-index: 2;
}

.nav-page{
    border-top: 15vw solid rgba(255, 255, 255, 0);
    position: relative;
}
@keyframes animate-dropup {
    0% {
        transform: translate3d(0, -30px, 0);
        opacity: 0.3;
    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

.nomsg {
    width: 100%;
    background-image: url('images/nomsg.png');
    background-size: 75vw 60vw;
    background-position: top center;
    background-repeat: no-repeat;
    text-align: center;
    line-height: 7.5vw;
    color: #999;
    padding-top: 50vw;
    font-size: 3vw;
    margin-top: 20vw;
    overflow: hidden;
}

.sucmsg,
.errmsg {
    padding: 20vw 0;
    text-align: center;
    line-height: 20vw;
}

.sucmsg span,
.errmsg span {
    display: block;
}

.sucmsg .button,
.errmsg .button {
    margin: 0 3vw;
}

.sucmsg i {
    font-size: 16vw;
    width: 20vw;
    height: 20vw;
    line-height: 20vw;
    text-align: center;
    border-radius: 50%;
    margin: auto;
    display: block;
    color: #fff;
    background: #3a66e9;
}

.errmsg i {
    font-size: 16vw;
    width: 20vw;
    height: 20vw;
    line-height: 20vw;
    text-align: center;
    border-radius: 50%;
    margin: auto;
    display: block;
    color: #fff;
    background: #e42443;
}


.tab-bar {
    display: flex;
    background: #fff;
}

.tab-bar li {
    width: 100%;
    text-align: center;
    font-size: 4vw;
    height: 15vw;
    line-height: 15vw;
    position: relative;
}

.tab-bar li:after {
    content: ' ';
    height: 1vw;
    width: 2vw;
    background: rgb(255, 255, 255, 0);
    position: absolute;
    left: 50%;
    margin-left: -1vw;
    bottom: 1vw;
    border-radius: 1vw;
    transition: all .5s;
}

.tab-bar li.active {
    color: #3a66e9;
}

.tab-bar li.active:after {
    width: 10vw;
    background: #3a66e9;
    margin-left: -5vw;
}

.st-header-block {
    background: #3a66e9;
    background-size: 100% 100%;
    overflow: hidden;
    position: relative;
    display: block;
}

.st-header {
    display: flex;
    padding: 0 3vw;
    align-items: center;
    height: 25vw;
}

.st-header .avatar {
    height: 17vw;
    width: 17vw;
    flex-shrink: 0;
}

.st-header .avatar img {
    height: 17vw;
    width: 17vw;;
    border-radius: 50%;
    border: 1vw solid rgba(255, 255, 255, .5);
}

.st-header .sinfo {
    width: 100%;
    padding: 2.5vw;
    color: #fff;
    line-height: 2;
}

.st-header .sinfo b {
    line-height: 6vw;
    font-size: 4.5vw;
    font-family: var(--numfont);
    font-weight: normal;
}

.st-header .sinfo span {
    display: block;
    line-height: 5vw;
    font-size: 3.5vw;
}

.st-header .set {
    color: #fff;
    font-size: 6vw;
}


.st-list {
    display: flex;
    background: #fff;
    position: relative;
}

.st-list a {
    padding: 8vw 0;
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
}

.st-list a:active {
    opacity: .5;
}

.st-list a i {
    font-size: 8vw;
    height: 12vw;
    line-height: 12vw;
    display: block;
    background: #3a66e9;
    width: 12vw;
    text-align: center;
    color: #fff;
    border-radius: 50%;
}

.st-list a span {
    display: block;
    font-size: 3.5vw;
    width: 100%;
    text-align: center;
}

.st-list a .badge {
    position: absolute;
    top: 6vw;
    left: 15.5vw;
    background: #e12e77;
    color: #fff;
    border-radius: 5vw;
    padding: 0 2vw;
    font-size: 3vw;
    font-style: normal;
    line-height: 4vw;
}

.collect-list{
    padding-bottom: 3vw;
}
.collect-list a{
    display: flex;
    align-items: center;
    position: relative;
    padding: 4.5vw 3vw;
    background: #fff;
}
.collect-list a span{
    font-size: 3.6vw;
}
.collect-list a:active{
    opacity: .5;
}
.collect-list a i{
    color: #fff;
    display: block;
    height: 4vw;
    font-size: 3vw;
    padding: 0 3vw;
    line-height: 4vw;
    border-radius: 3vw;
    font-style: normal;
    margin-right: 1vw;
}
.collect-list a i.blue{
    background: #3a66e9;
}
.collect-list a i.green{
    background: #3ae995;
}
.collect-list a i.hide{
    display: none;
}
.collect-list a em{
    display: block;
    margin-left: auto;
    text-align: right;
    font-size: 3vw;
    color: #999;
    font-style: normal;
}

.collect-question{
    background: #fff;
}
.collect-question img{
    max-width: 100%;
    display: block;
    margin: auto;
}
.question-title {
    position: relative;
    padding: 3vw;
}
.question-type {
    color: #3a66e9;
    padding: 3vw;
    font-weight: bold;
    background: #fff;
}
.question-title .num{
    background: #3a66e9;
    color: #fff;
    padding: 0 2vw;
    display: inline-block;
    border-radius: 1vw;
    margin-right: 1.5vw;
    font-weight: bold;
    font-size: 3vw;
}
.question-title input{
    border: 1px solid #ccc;
    border-radius: 1vw;
    padding: 1vw 2vw;
    margin: 2vw;
    width: 20vw;
    min-width: 20vw;
    max-width: 100%;
    text-align: center;
}
.question-title p:nth-child(2){
    display: inline;
}
.question-option {
    position: relative;
    overflow: hidden;
}


.question-option input {
    display: none
}

.question-option label {
    padding: 2vw 3vw;
    border-radius: 1vw;
    display: block;
    background-color: #fafafa;
    position: relative;
    margin: 3vw;
}


.question-option label:after {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    border: 1px solid #e6e6e6;
    transform-origin: 0 0;
    transform: scale(0.5);
    border-radius: 2vw;
}

.question-option input:checked + label {
    background-color: #fff;
    color: #3a66e9
}

.question-option input:checked + label:before {
    content: ' ';
    width: 6vw;
    height: 6vw;
    position: absolute;
    right: -1px;
    bottom: -1px;
    background-image: url("/style/images/checkon.svg");
    background-repeat: no-repeat;
    background-position: right 0 bottom 0;
    background-size: 6vw 6vw;
    border-radius: 0 0 1vw 0;
}

.question-option input:checked + label:after {
    border-color: #3a66e9;
}

.question-option input:disabled + label {
    opacity: 0.7;
}

.pay-dialog{
    position: fixed;
    height: 100vh;
    width: 100vw;
    background: rgba(0,0,0,.5);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pay-dialog.hide{
    display: none;
}
.pay-dialog .dialog-inner{
    background-color: #fff;
    background-image: url("images/pay-dialog.png");
    background-position: center;
    background-size: cover;
    border-radius: 2vw;
    width: 80vw;
    height: 86vw;
    min-height: 20vw;
    padding-top: 65vw;
    text-align: center;
    position: relative;
}
.pay-dialog .dialog-inner a{
    width: 80%;
    height: 10vw;
    background: #fb1d36;
    display: block;
    border-radius: 10vw;
    color: #fff;
    line-height: 10vw;
    margin: auto;
}
.pay-dialog .iconfont{
    height: 10vw;
    width: 10vw;
    line-height: 10vw;
    text-align: center;
    border-radius: 50%;
    display: block;
    position: absolute;
    bottom: -5vw;
    left: 50%;
    margin-left: -5vw;
    z-index: 89;
    background: #666;
    color: #fff;
    font-size: 6vw;
}

.pay-dialog .dialog-inner a span:before{
    content: "¥";
    font-size: 3vw;
}
.pay-dialog .dialog-inner a:active{
    opacity: .8;
}


.examination-progress {
    position: fixed;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-left: 30vw;
    z-index: 30;
    display: none;
}

.examination-progress.show {
    display: block;
    animation-name: animate-left;
    animation-duration: 0.2s;
    animation-fill-mode: both;
}

.examination-progress .progress-title {
    position: relative;
    height: 15vw;
    background: #fff;
    line-height: 15vw;
    padding: 0 0 0 3vw;
    display: flex;
    justify-content: space-between;
    flex-shrink: 0;
    font-size: 4vw;
    font-weight: 600;
    color: #3a66e9;
}

.examination-progress .progress-title i {
    height: 15vw;
    line-height: 15vw;
    width: 13vw;
    display: block;
    text-align: center;
    font-size: 5vw;
    color: #333;
}

.examination-progress .progress-conent {
    height: calc(100vh - 15vw);
    overflow: auto;
    background: #fff;
}

.examination-progress ul {
    display: flex;
    flex-wrap: wrap;
    padding: 1.5vw;
}

.examination-progress ul li {
    width: calc((100% - 15vw) / 5);
    margin: 1.5vw;
    background-color: #f0f0f0;
    line-height: 10vw;
    height: 10vw;
    border-radius: 1vw;
    text-align: center;
    position: relative;
    flex-shrink: 0;
}

.examination-progress ul li.active {
    color: #fff;
    background-color: #3a66e9;
}

.examination-progress ul li.active:after {
    content: '已答';
    font-size: 2.4vw;
    background: #ff5722;
    color: #fff;
    position: absolute;
    top: -2vw;
    right: -2vw;
    height: 4vw;
    line-height: 4vw;
    white-space: nowrap;
    border-radius: 4vw 4vw 4vw 0;
    padding: 0 2vw;
}

.examination-result{
    animation-name: animate-up;
    animation-duration: 0.2s;
    animation-fill-mode: both;
    background-color: #fff;
    height: 100vh;
    overflow: auto;
}

.examination-result .score{
    text-align: center;
    padding: 6vw;
}
.examination-result .score b{
    display: block;
    font-size: 16vw;
    color: #3a66e9;
}
.examination-result .score a{
    display: block;
    color: #fff;
    border-radius: 5vw;
    white-space: nowrap;
    height: 9vw;
    background-color: #3a66e9;
    border: none;
    width: 18vw;
    line-height: 9vw;
    margin: auto;
}
.tabbar.collect{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tabbar.collect button:nth-child(1){
    display: block;
    color: #333;
    padding: 0 5vw;
    border-radius: 5vw;
    white-space: nowrap;
    margin-left: 3vw;
    height: 9vw;
    border: .5px solid #e6e6e6;
}
.tabbar.collect button:nth-child(2){
    display: block;
    color: #fff;
    padding: 0 5vw;
    border-radius: 5vw;
    white-space: nowrap;
    margin-right: 3vw;
    height: 9vw;
    background-color: #3a66e9;
    border: none;
}
.navbar{
    height: 15vw;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 70;
    display: flex;
}
.wrong-list{
    padding-top: 15vw;
}
.navbar a{
    padding: 0 3vw;
    font-size: 4.25vw;
    position: relative;
    width: 100%;
    text-align: center;
    display: block;
    line-height: 15vw;
}
.navbar a.active{
    color: #3a66e9;
    font-weight: bold;
}
.navbar a.active:after{
    content: ' ';
    height: 1vw;
    position: absolute;
    background: #3a66e9;
    left: 25%;
    right: 25%;
    border-radius: 1vw 1vw 0 0;
    bottom: 0;
}
.detail-answer{
    padding: 0 1.5vw 1.5vw 1.5vw;
    display: flex;
    flex-wrap: wrap;
}
.detail-answer span{
    font-size: 3.5vw;
    color: #fff;
    background: #32c7b1;
    padding: 3vw;
    border-radius: 1vw;
    display: block;
    margin: 1.5vw;
    line-height: 1.5;

}

.error-tip{
    background-image: url("images/error-msg.png");
    background-repeat: no-repeat;
    background-size: 80% auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    background-position: center;
    padding-top: 20vh;
    text-align: center;
}

.return-home{
    height: 10vw;
    width: 10vw;
    line-height: 10vw;
    text-align: center;
    border-radius: 50%;
    background: rgba(255,255,255,.8);
    display: block;
    position: fixed;
    right: 3vw;
    bottom: 20vh;
    z-index: 89;
    box-shadow: 0 0 1vw 0 rgba(0, 0, 0, .1);
    color: #3a66e9;
    font-size: 6vw;
}
.return-home:active{
    color: #fff;
    background: #3a66e9;
}

.record-list{
    margin-bottom: 3vw;
}
.record-list li{
    position: relative;
    padding: 3vw;
    background: #fff;
}
.record-list li .info{
    width: 100%;
    display: flex;
}
.record-list li .info span{
    display: block;
    color: #999;
    font-size: 3.5vw;
}
.record-list li .info span{
    white-space: nowrap;
    text-align: right;
    display: block;
    padding-left: 3vw;
}
.record-list li .info span:nth-child(1){
    width: 100%;
    text-align: left;
    padding-left: 0;
}
.record-list.income{
    padding-top: 15vw;
}
.pop{
    padding: 18vw 3vw 3vw 3vw;
    background: #fff;
    min-height: 100vh;
}
.pop img{
    width: 100%;
    border-radius: 2vw;
}
.pop span{
    display: block;
    color: #999;
    padding-top: 2vw;
    text-align: center;
}

.handin-result{
    background: #fff;
}
.handin-result ul{
    display: flex;
    flex-wrap: wrap;
    padding: 5vw 0;
}
.handin-result ul li{
    width: 50%;
    padding: 5vw;
    text-align: center;
    position: relative;
}
.handin-result ul li b{
    color: #3a66e9;
    font-size: 8vw;
    display: block;
}
.handin-result ul li span{
    display: block;
}
.handin-result ul li:nth-child(1) b{
    color: #27c9cb;
}
.handin-result ul li:nth-child(1){
    width: 100%;
}
.handin-result ul li:nth-child(1) b{
    font-size: 12vw;
}
.handin-result ul li:nth-child(1) b:after{
    content: '%';
    font-size: 3vw;
}
.banner img{
    width: 100%;
}
.about-content{
    background: #fff;
    min-height: 100vh;
    padding: 3vw;
}
.about-content img{
    max-width: 100%;
}
.wrong-input:before,.right-input:before,.wrong-input:after,.right-input:after{
    content: "  ";
}
.wrong-input{
    color: #ff0000;
    text-decoration-line: underline;
}
.right-input{
    color: #32c7b1;
    text-decoration-line: underline;
}