:root {
    --content: #333;
    --content-grey: #999;
    --primary: #1671d8;
    --second: #1fbdff;
    --primary-light: rgba(22, 113, 216, 0.1);
    --second-light: #39c4ff10;
    --primary-dark: #1e3f64;
    --second-dark: #19526b10;
    --error: #d81647;
    --error-light: rgba(216, 22, 71, 0.1);
    --error-dark: #55222f;
    --warning: #ffc800;
    --warning-light: rgba(255, 200, 0, 0.1);
    --warning-dark: #61552a;
    --info: #1671d8;
    --info-light: rgba(22, 113, 216, 0.1);
    --info-dark: #27415f;
    --success: #0fb359;
    --success-light: rgba(15, 179, 89, 0.1);
    --success-dark: #2e503d;
    --gold: #f0d68d;
    --gold-gradient: linear-gradient(90deg, #f0d68d 0%, #e0bf73 100%);
    --grey: #eee;
    --grey-d: #ddd;
    --grey-f5: #f5f5f5;
    --grey-f9: #f9f9f9;
    --white: #fff;
    --white-10: rgba(255, 255, 255, 0.1);
    --white-15: rgba(255, 255, 255, 0.15);
    --white-20: rgba(255, 255, 255, 0.2);
    --white-30: rgba(255, 255, 255, 0.3);
    --white-40: rgba(255, 255, 255, 0.4);
    --white-60: rgba(255, 255, 255, 0.6);
    --white-80: rgba(255, 255, 255, 0.8);
    --black: #000;
    --black-10: rgba(0, 0, 0, 0.1);
    --black-15: rgba(0, 0, 0, 0.15);
    --black-20: rgba(0, 0, 0, 0.2);
    --black-30: rgba(0, 0, 0, 0.3);
    --black-40: rgba(0, 0, 0, 0.4);
    --black-60: rgba(0, 0, 0, 0.6);
    --black-80: rgba(0, 0, 0, 0.8);
    --font: "Noto Sans SC",Noto Sans,-apple-system,BlinkMacSystemFont;
    --baseFontSize: 14px
}

*,::after,::before {
    box-sizing: border-box
}

.icon {
    font-family: iconfont;
    font-style: normal
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--baseFontSize);
    color: var(--content)
}

img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
    image-rendering: -moz-optimize-contrast;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -o-optimize-contrast;
    image-rendering: optimize-contrast
}

textarea {
    font-family: var(--font);
    font-size: var(--baseFontSize)
}

hr {
    border: 0;
    border-top: solid 1px var(--grey)
}

input,select,textarea {
    border: solid 1px var(--grey-d);
    outline: 0;
    transition: all .3s
}

input:not([type=checkbox],[type=radio]),select:not([type=checkbox],[type=radio]),textarea:not([type=checkbox],[type=radio]) {
    display: block;
    width: 100%
}

input:focus,select:focus,textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-light)
}

a {
    text-decoration: none;
    color: var(--info)
}

a:hover {
    opacity: .8
}

button {
    border: none;
    outline: 0;
    transition: all .3s;
    box-sizing: border-box;
    background: 0 0
}

button[ghost] {
    border: solid 1px var(--grey-d)
}

button[color=primary] {
    background-color: var(--primary);
    color: #fff
}

button[color=primary][ghost] {
    background-color: transparent;
    border: solid 1px var(--primary);
    color: var(--primary)
}

button[color=second] {
    background-color: var(--second);
    color: #fff
}

button[color=second][ghost] {
    background-color: transparent;
    border: solid 1px var(--second);
    color: var(--second)
}

button[color=info] {
    background-color: var(--info);
    color: #fff
}

button[color=info][ghost] {
    background-color: transparent;
    border: solid 1px var(--info);
    color: var(--info)
}

button[color=warning] {
    background-color: var(--warning);
    color: #fff
}

button[color=warning][ghost] {
    background-color: transparent;
    border: solid 1px var(--warning);
    color: var(--warning)
}

button[color=error] {
    background-color: var(--error);
    color: #fff
}

button[color=error][ghost] {
    background-color: transparent;
    border: solid 1px var(--error);
    color: var(--error)
}

button[color=success] {
    background-color: var(--success);
    color: #fff
}

button[color=success][ghost] {
    background-color: transparent;
    border: solid 1px var(--success);
    color: var(--success)
}

button[color=grey] {
    background-color: var(--grey-d);
    color: var(--black-60)
}

button[color=gold] {
    background: var(--gold-gradient);
    color: #333
}

button[color=gold][ghost] {
    background: 0 0;
    border: solid 1px var(--gold);
    color: var(--gold)
}

table {
    border-collapse: collapse;
    width: 100%;
    text-align: center
}

table td,table th {
    padding: 8px
}

table tr {
    border-bottom: var(--grey) solid 1px
}

table thead {
    background-color: var(--grey-f5)
}

table tbody tr:hover {
    background-color: var(--grey-f9)
}

.loading {
    pointer-events: none!important;
    cursor: default!important;
    opacity: .5!important
}

.loading:hover {
    opacity: .5!important
}

.loading::before {
    font-family: iconfont;
    content: '\e8fd';
    display: inline-block;
    margin-right: 6px;
    animation: loading-spin 1s infinite linear;
    width: 1em;
    height: 1em
}

@keyframes loading-spin {
    100% {
        transform: rotate(359deg)
    }
}

.h100v {
    height: 100vh
}

.mih100v {
    min-height: 100vh
}

.w-auto {
    width: auto
}

.h-auto {
    height: auto
}

.c {
    max-width: 1600px
}

.ma {
    margin-left: auto;
    margin-right: auto
}

.pointer {
    cursor: pointer;
    pointer-events: initial
}

.move {
    cursor: move
}

.default {
    cursor: default!important
}

.pointer:hover {
    opacity: .85
}

.events-none {
    pointer-events: none
}

.events-all {
    pointer-events: all
}

.resize-none {
    resize: none
}

.disabled {
    opacity: .5;
    pointer-events: none
}

.nowrap {
    white-space: nowrap
}

.break {
    word-wrap: break-word;
    word-break: break-word
}

.select-none {
    user-select: none
}

.txtc {
    text-align: center
}

.txtl {
    text-align: left
}

.txtr {
    text-align: right
}

.bold {
    font-weight: 700
}

.txt1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.txt2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden
}

.txt3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden
}

.txt4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden
}

.box {
    box-sizing: border-box
}

.animate {
    transition: all .3s
}

.ul-none {
    list-style: none;
    margin: 0;
    padding: 0
}

.scroll {
    overflow-y: auto
}

.scroll::-webkit-scrollbar {
    background: 0 0;
    width: 6px
}

.scroll::-webkit-scrollbar-thumb {
    background: var(--black-10);
    border-radius: 3px
}

.scroll:hover::-webkit-scrollbar-thumb {
    background: var(--black-20)
}

.require::before {
    content: '*';
    color: var(--error)
}

.hidden {
    visibility: hidden
}

.visible {
    visibility: visible
}

.o-hidden {
    overflow: hidden
}

.i {
    display: inline!important
}

.b {
    display: block!important
}

.ib {
    display: inline-block!important
}

.f {
    display: flex!important
}

.if {
    display: inline-flex!important
}

.g {
    display: grid!important
}

.n {
    display: none
}

.fc {
    flex-direction: column
}

.fcr {
    flex-direction: column-reverse
}

.fw {
    flex-wrap: wrap
}

.fa {
    flex: 1 1 auto
}

.f1 {
    flex: 1
}

.wf2 {
    column-count: 2;
    column-gap: 0
}

.ass {
    align-self: flex-start
}

.ac {
    align-items: center;
    align-content: center
}

.as {
    align-items: flex-start;
    align-content: flex-start
}

.ae {
    align-items: flex-end;
    align-content: flex-end
}

.jc {
    justify-content: center
}

.jb {
    justify-content: space-between
}

.ja {
    justify-content: space-around
}

.js {
    justify-content: flex-start
}

.je {
    justify-content: flex-end
}

.fs0 {
    font-size: 0px
}

.m-0 {
    margin: 0
}

.m0 {
    margin: 0
}

.mt0 {
    margin-top: 0
}

.mr0 {
    margin-right: 0
}

.mb0 {
    margin-bottom: 0
}

.ml0 {
    margin-left: 0
}

.p0 {
    padding: 0
}

.pt0 {
    padding-top: 0
}

.pr0 {
    padding-right: 0
}

.pb0 {
    padding-bottom: 0
}

.pl0 {
    padding-left: 0
}

.w0 {
    flex: 0 0 0px;
    width: 0
}

.mw0 {
    max-width: 0
}

.miw0 {
    min-width: 0
}

.h0 {
    height: 0
}

.mh0 {
    max-height: 0
}

.mih0 {
    min-height: 0
}

.t0 {
    top: 0
}

.r0 {
    right: 0
}

.b0 {
    bottom: 0
}

.l0 {
    left: 0
}

.t-0 {
    top: 0
}

.r-0 {
    right: 0
}

.b-0 {
    bottom: 0
}

.l-0 {
    left: 0
}

.lh0 {
    line-height: 0
}

.fs1 {
    font-size: 1px
}

.m-1 {
    margin: -1px
}

.m1 {
    margin: 1px
}

.mt1 {
    margin-top: 1px
}

.mr1 {
    margin-right: 1px
}

.mb1 {
    margin-bottom: 1px
}

.ml1 {
    margin-left: 1px
}

.p1 {
    padding: 1px
}

.pt1 {
    padding-top: 1px
}

.pr1 {
    padding-right: 1px
}

.pb1 {
    padding-bottom: 1px
}

.pl1 {
    padding-left: 1px
}

.w1 {
    flex: 0 0 1px;
    width: 1px
}

.mw1 {
    max-width: 1px
}

.miw1 {
    min-width: 1px
}

.h1 {
    height: 1px
}

.mh1 {
    max-height: 1px
}

.mih1 {
    min-height: 1px
}

.t1 {
    top: 1px
}

.r1 {
    right: 1px
}

.b1 {
    bottom: 1px
}

.l1 {
    left: 1px
}

.t-1 {
    top: -1px
}

.r-1 {
    right: -1px
}

.b-1 {
    bottom: -1px
}

.l-1 {
    left: -1px
}

.lh1 {
    line-height: 1px
}

.fs2 {
    font-size: 2px
}

.m-2 {
    margin: -2px
}

.m2 {
    margin: 2px
}

.mt2 {
    margin-top: 2px
}

.mr2 {
    margin-right: 2px
}

.mb2 {
    margin-bottom: 2px
}

.ml2 {
    margin-left: 2px
}

.p2 {
    padding: 2px
}

.pt2 {
    padding-top: 2px
}

.pr2 {
    padding-right: 2px
}

.pb2 {
    padding-bottom: 2px
}

.pl2 {
    padding-left: 2px
}

.w2 {
    flex: 0 0 2px;
    width: 2px
}

.mw2 {
    max-width: 2px
}

.miw2 {
    min-width: 2px
}

.h2 {
    height: 2px
}

.mh2 {
    max-height: 2px
}

.mih2 {
    min-height: 2px
}

.t2 {
    top: 2px
}

.r2 {
    right: 2px
}

.b2 {
    bottom: 2px
}

.l2 {
    left: 2px
}

.t-2 {
    top: -2px
}

.r-2 {
    right: -2px
}

.b-2 {
    bottom: -2px
}

.l-2 {
    left: -2px
}

.lh2 {
    line-height: 2px
}

.fs4 {
    font-size: 4px
}

.m-4 {
    margin: -4px
}

.m4 {
    margin: 4px
}

.mt4 {
    margin-top: 4px
}

.mr4 {
    margin-right: 4px
}

.mb4 {
    margin-bottom: 4px
}

.ml4 {
    margin-left: 4px
}

.p4 {
    padding: 4px
}

.pt4 {
    padding-top: 4px
}

.pr4 {
    padding-right: 4px
}

.pb4 {
    padding-bottom: 4px
}

.pl4 {
    padding-left: 4px
}

.w4 {
    flex: 0 0 4px;
    width: 4px
}

.mw4 {
    max-width: 4px
}

.miw4 {
    min-width: 4px
}

.h4 {
    height: 4px
}

.mh4 {
    max-height: 4px
}

.mih4 {
    min-height: 4px
}

.t4 {
    top: 4px
}

.r4 {
    right: 4px
}

.b4 {
    bottom: 4px
}

.l4 {
    left: 4px
}

.t-4 {
    top: -4px
}

.r-4 {
    right: -4px
}

.b-4 {
    bottom: -4px
}

.l-4 {
    left: -4px
}

.lh4 {
    line-height: 4px
}

.fs8 {
    font-size: 8px
}

.m-8 {
    margin: -8px
}

.m8 {
    margin: 8px
}

.mt8 {
    margin-top: 8px
}

.mr8 {
    margin-right: 8px
}

.mb8 {
    margin-bottom: 8px
}

.ml8 {
    margin-left: 8px
}

.p8 {
    padding: 8px
}

.pt8 {
    padding-top: 8px
}

.pr8 {
    padding-right: 8px
}

.pb8 {
    padding-bottom: 8px
}

.pl8 {
    padding-left: 8px
}

.w8 {
    flex: 0 0 8px;
    width: 8px
}

.mw8 {
    max-width: 8px
}

.miw8 {
    min-width: 8px
}

.h8 {
    height: 8px
}

.mh8 {
    max-height: 8px
}

.mih8 {
    min-height: 8px
}

.t8 {
    top: 8px
}

.r8 {
    right: 8px
}

.b8 {
    bottom: 8px
}

.l8 {
    left: 8px
}

.t-8 {
    top: -8px
}

.r-8 {
    right: -8px
}

.b-8 {
    bottom: -8px
}

.l-8 {
    left: -8px
}

.lh8 {
    line-height: 8px
}

.fs12 {
    font-size: 12px
}

.m-12 {
    margin: -12px
}

.m12 {
    margin: 12px
}

.mt12 {
    margin-top: 12px
}

.mr12 {
    margin-right: 12px
}

.mb12 {
    margin-bottom: 12px
}

.ml12 {
    margin-left: 12px
}

.p12 {
    padding: 12px
}

.pt12 {
    padding-top: 12px
}

.pr12 {
    padding-right: 12px
}

.pb12 {
    padding-bottom: 12px
}

.pl12 {
    padding-left: 12px
}

.w12 {
    flex: 0 0 12px;
    width: 12px
}

.mw12 {
    max-width: 12px
}

.miw12 {
    min-width: 12px
}

.h12 {
    height: 12px
}

.mh12 {
    max-height: 12px
}

.mih12 {
    min-height: 12px
}

.t12 {
    top: 12px
}

.r12 {
    right: 12px
}

.b12 {
    bottom: 12px
}

.l12 {
    left: 12px
}

.t-12 {
    top: -12px
}

.r-12 {
    right: -12px
}

.b-12 {
    bottom: -12px
}

.l-12 {
    left: -12px
}

.lh12 {
    line-height: 12px
}

.fs14 {
    font-size: 14px
}

.m-14 {
    margin: -14px
}

.m14 {
    margin: 14px
}

.mt14 {
    margin-top: 14px
}

.mr14 {
    margin-right: 14px
}

.mb14 {
    margin-bottom: 14px
}

.ml14 {
    margin-left: 14px
}

.p14 {
    padding: 14px
}

.pt14 {
    padding-top: 14px
}

.pr14 {
    padding-right: 14px
}

.pb14 {
    padding-bottom: 14px
}

.pl14 {
    padding-left: 14px
}

.w14 {
    flex: 0 0 14px;
    width: 14px
}

.mw14 {
    max-width: 14px
}

.miw14 {
    min-width: 14px
}

.h14 {
    height: 14px
}

.mh14 {
    max-height: 14px
}

.mih14 {
    min-height: 14px
}

.t14 {
    top: 14px
}

.r14 {
    right: 14px
}

.b14 {
    bottom: 14px
}

.l14 {
    left: 14px
}

.t-14 {
    top: -14px
}

.r-14 {
    right: -14px
}

.b-14 {
    bottom: -14px
}

.l-14 {
    left: -14px
}

.lh14 {
    line-height: 14px
}

.fs16 {
    font-size: 16px
}

.m-16 {
    margin: -16px
}

.m16 {
    margin: 16px
}

.mt16 {
    margin-top: 16px
}

.mr16 {
    margin-right: 16px
}

.mb16 {
    margin-bottom: 16px
}

.ml16 {
    margin-left: 16px
}

.p16 {
    padding: 16px
}

.pt16 {
    padding-top: 16px
}

.pr16 {
    padding-right: 16px
}

.pb16 {
    padding-bottom: 16px
}

.pl16 {
    padding-left: 16px
}

.w16 {
    flex: 0 0 16px;
    width: 16px
}

.mw16 {
    max-width: 16px
}

.miw16 {
    min-width: 16px
}

.h16 {
    height: 16px
}

.mh16 {
    max-height: 16px
}

.mih16 {
    min-height: 16px
}

.t16 {
    top: 16px
}

.r16 {
    right: 16px
}

.b16 {
    bottom: 16px
}

.l16 {
    left: 16px
}

.t-16 {
    top: -16px
}

.r-16 {
    right: -16px
}

.b-16 {
    bottom: -16px
}

.l-16 {
    left: -16px
}

.lh16 {
    line-height: 16px
}

.fs18 {
    font-size: 18px
}

.m-18 {
    margin: -18px
}

.m18 {
    margin: 18px
}

.mt18 {
    margin-top: 18px
}

.mr18 {
    margin-right: 18px
}

.mb18 {
    margin-bottom: 18px
}

.ml18 {
    margin-left: 18px
}

.p18 {
    padding: 18px
}

.pt18 {
    padding-top: 18px
}

.pr18 {
    padding-right: 18px
}

.pb18 {
    padding-bottom: 18px
}

.pl18 {
    padding-left: 18px
}

.w18 {
    flex: 0 0 18px;
    width: 18px
}

.mw18 {
    max-width: 18px
}

.miw18 {
    min-width: 18px
}

.h18 {
    height: 18px
}

.mh18 {
    max-height: 18px
}

.mih18 {
    min-height: 18px
}

.t18 {
    top: 18px
}

.r18 {
    right: 18px
}

.b18 {
    bottom: 18px
}

.l18 {
    left: 18px
}

.t-18 {
    top: -18px
}

.r-18 {
    right: -18px
}

.b-18 {
    bottom: -18px
}

.l-18 {
    left: -18px
}

.lh18 {
    line-height: 18px
}

.fs20 {
    font-size: 20px
}

.m-20 {
    margin: -20px
}

.m20 {
    margin: 20px
}

.mt20 {
    margin-top: 20px
}

.mr20 {
    margin-right: 20px
}

.mb20 {
    margin-bottom: 20px
}

.ml20 {
    margin-left: 20px
}

.p20 {
    padding: 20px
}

.pt20 {
    padding-top: 20px
}

.pr20 {
    padding-right: 20px
}

.pb20 {
    padding-bottom: 20px
}

.pl20 {
    padding-left: 20px
}

.w20 {
    flex: 0 0 20px;
    width: 20px
}

.mw20 {
    max-width: 20px
}

.miw20 {
    min-width: 20px
}

.h20 {
    height: 20px
}

.mh20 {
    max-height: 20px
}

.mih20 {
    min-height: 20px
}

.t20 {
    top: 20px
}

.r20 {
    right: 20px
}

.b20 {
    bottom: 20px
}

.l20 {
    left: 20px
}

.t-20 {
    top: -20px
}

.r-20 {
    right: -20px
}

.b-20 {
    bottom: -20px
}

.l-20 {
    left: -20px
}

.lh20 {
    line-height: 20px
}

.fs22 {
    font-size: 22px
}

.m-22 {
    margin: -22px
}

.m22 {
    margin: 22px
}

.mt22 {
    margin-top: 22px
}

.mr22 {
    margin-right: 22px
}

.mb22 {
    margin-bottom: 22px
}

.ml22 {
    margin-left: 22px
}

.p22 {
    padding: 22px
}

.pt22 {
    padding-top: 22px
}

.pr22 {
    padding-right: 22px
}

.pb22 {
    padding-bottom: 22px
}

.pl22 {
    padding-left: 22px
}

.w22 {
    flex: 0 0 22px;
    width: 22px
}

.mw22 {
    max-width: 22px
}

.miw22 {
    min-width: 22px
}

.h22 {
    height: 22px
}

.mh22 {
    max-height: 22px
}

.mih22 {
    min-height: 22px
}

.t22 {
    top: 22px
}

.r22 {
    right: 22px
}

.b22 {
    bottom: 22px
}

.l22 {
    left: 22px
}

.t-22 {
    top: -22px
}

.r-22 {
    right: -22px
}

.b-22 {
    bottom: -22px
}

.l-22 {
    left: -22px
}

.lh22 {
    line-height: 22px
}

.fs24 {
    font-size: 24px
}

.m-24 {
    margin: -24px
}

.m24 {
    margin: 24px
}

.mt24 {
    margin-top: 24px
}

.mr24 {
    margin-right: 24px
}

.mb24 {
    margin-bottom: 24px
}

.ml24 {
    margin-left: 24px
}

.p24 {
    padding: 24px
}

.pt24 {
    padding-top: 24px
}

.pr24 {
    padding-right: 24px
}

.pb24 {
    padding-bottom: 24px
}

.pl24 {
    padding-left: 24px
}

.w24 {
    flex: 0 0 24px;
    width: 24px
}

.mw24 {
    max-width: 24px
}

.miw24 {
    min-width: 24px
}

.h24 {
    height: 24px
}

.mh24 {
    max-height: 24px
}

.mih24 {
    min-height: 24px
}

.t24 {
    top: 24px
}

.r24 {
    right: 24px
}

.b24 {
    bottom: 24px
}

.l24 {
    left: 24px
}

.t-24 {
    top: -24px
}

.r-24 {
    right: -24px
}

.b-24 {
    bottom: -24px
}

.l-24 {
    left: -24px
}

.lh24 {
    line-height: 24px
}

.fs30 {
    font-size: 30px
}

.m-30 {
    margin: -30px
}

.m30 {
    margin: 30px
}

.mt30 {
    margin-top: 30px
}

.mr30 {
    margin-right: 30px
}

.mb30 {
    margin-bottom: 30px
}

.ml30 {
    margin-left: 30px
}

.p30 {
    padding: 30px
}

.pt30 {
    padding-top: 30px
}

.pr30 {
    padding-right: 30px
}

.pb30 {
    padding-bottom: 30px
}

.pl30 {
    padding-left: 30px
}

.w30 {
    flex: 0 0 30px;
    width: 30px
}

.mw30 {
    max-width: 30px
}

.miw30 {
    min-width: 30px
}

.h30 {
    height: 30px
}

.mh30 {
    max-height: 30px
}

.mih30 {
    min-height: 30px
}

.t30 {
    top: 30px
}

.r30 {
    right: 30px
}

.b30 {
    bottom: 30px
}

.l30 {
    left: 30px
}

.t-30 {
    top: -30px
}

.r-30 {
    right: -30px
}

.b-30 {
    bottom: -30px
}

.l-30 {
    left: -30px
}

.lh30 {
    line-height: 30px
}

.fs36 {
    font-size: 36px
}

.m-36 {
    margin: -36px
}

.m36 {
    margin: 36px
}

.mt36 {
    margin-top: 36px
}

.mr36 {
    margin-right: 36px
}

.mb36 {
    margin-bottom: 36px
}

.ml36 {
    margin-left: 36px
}

.p36 {
    padding: 36px
}

.pt36 {
    padding-top: 36px
}

.pr36 {
    padding-right: 36px
}

.pb36 {
    padding-bottom: 36px
}

.pl36 {
    padding-left: 36px
}

.w36 {
    flex: 0 0 36px;
    width: 36px
}

.mw36 {
    max-width: 36px
}

.miw36 {
    min-width: 36px
}

.h36 {
    height: 36px
}

.mh36 {
    max-height: 36px
}

.mih36 {
    min-height: 36px
}

.t36 {
    top: 36px
}

.r36 {
    right: 36px
}

.b36 {
    bottom: 36px
}

.l36 {
    left: 36px
}

.t-36 {
    top: -36px
}

.r-36 {
    right: -36px
}

.b-36 {
    bottom: -36px
}

.l-36 {
    left: -36px
}

.lh36 {
    line-height: 36px
}

.fs48 {
    font-size: 48px
}

.m-48 {
    margin: -48px
}

.m48 {
    margin: 48px
}

.mt48 {
    margin-top: 48px
}

.mr48 {
    margin-right: 48px
}

.mb48 {
    margin-bottom: 48px
}

.ml48 {
    margin-left: 48px
}

.p48 {
    padding: 48px
}

.pt48 {
    padding-top: 48px
}

.pr48 {
    padding-right: 48px
}

.pb48 {
    padding-bottom: 48px
}

.pl48 {
    padding-left: 48px
}

.w48 {
    flex: 0 0 48px;
    width: 48px
}

.mw48 {
    max-width: 48px
}

.miw48 {
    min-width: 48px
}

.h48 {
    height: 48px
}

.mh48 {
    max-height: 48px
}

.mih48 {
    min-height: 48px
}

.t48 {
    top: 48px
}

.r48 {
    right: 48px
}

.b48 {
    bottom: 48px
}

.l48 {
    left: 48px
}

.t-48 {
    top: -48px
}

.r-48 {
    right: -48px
}

.b-48 {
    bottom: -48px
}

.l-48 {
    left: -48px
}

.lh48 {
    line-height: 48px
}

.w60 {
    flex: 0 0 60px;
    width: 60px
}

.mw60 {
    max-width: 60px
}

.miw60 {
    min-width: 60px
}

.h60 {
    height: 60px
}

.mh60 {
    max-height: 60px
}

.mih60 {
    min-height: 60px
}

.t60 {
    top: 60px
}

.r60 {
    right: 60px
}

.b60 {
    bottom: 60px
}

.l60 {
    left: 60px
}

.t-60 {
    top: -60px
}

.r-60 {
    right: -60px
}

.b-60 {
    bottom: -60px
}

.l-60 {
    left: -60px
}

.w80 {
    flex: 0 0 80px;
    width: 80px
}

.mw80 {
    max-width: 80px
}

.miw80 {
    min-width: 80px
}

.h80 {
    height: 80px
}

.mh80 {
    max-height: 80px
}

.mih80 {
    min-height: 80px
}

.t80 {
    top: 80px
}

.r80 {
    right: 80px
}

.b80 {
    bottom: 80px
}

.l80 {
    left: 80px
}

.t-80 {
    top: -80px
}

.r-80 {
    right: -80px
}

.b-80 {
    bottom: -80px
}

.l-80 {
    left: -80px
}

.w100 {
    flex: 0 0 100px;
    width: 100px
}

.mw100 {
    max-width: 100px
}

.miw100 {
    min-width: 100px
}

.h100 {
    height: 100px
}

.mh100 {
    max-height: 100px
}

.mih100 {
    min-height: 100px
}

.t100 {
    top: 100px
}

.r100 {
    right: 100px
}

.b100 {
    bottom: 100px
}

.l100 {
    left: 100px
}

.t-100 {
    top: -100px
}

.r-100 {
    right: -100px
}

.b-100 {
    bottom: -100px
}

.l-100 {
    left: -100px
}

.w120 {
    flex: 0 0 120px;
    width: 120px
}

.mw120 {
    max-width: 120px
}

.miw120 {
    min-width: 120px
}

.h120 {
    height: 120px
}

.mh120 {
    max-height: 120px
}

.mih120 {
    min-height: 120px
}

.t120 {
    top: 120px
}

.r120 {
    right: 120px
}

.b120 {
    bottom: 120px
}

.l120 {
    left: 120px
}

.t-120 {
    top: -120px
}

.r-120 {
    right: -120px
}

.b-120 {
    bottom: -120px
}

.l-120 {
    left: -120px
}

.w140 {
    flex: 0 0 140px;
    width: 140px
}

.mw140 {
    max-width: 140px
}

.miw140 {
    min-width: 140px
}

.h140 {
    height: 140px
}

.mh140 {
    max-height: 140px
}

.mih140 {
    min-height: 140px
}

.t140 {
    top: 140px
}

.r140 {
    right: 140px
}

.b140 {
    bottom: 140px
}

.l140 {
    left: 140px
}

.t-140 {
    top: -140px
}

.r-140 {
    right: -140px
}

.b-140 {
    bottom: -140px
}

.l-140 {
    left: -140px
}

.w160 {
    flex: 0 0 160px;
    width: 160px
}

.mw160 {
    max-width: 160px
}

.miw160 {
    min-width: 160px
}

.h160 {
    height: 160px
}

.mh160 {
    max-height: 160px
}

.mih160 {
    min-height: 160px
}

.t160 {
    top: 160px
}

.r160 {
    right: 160px
}

.b160 {
    bottom: 160px
}

.l160 {
    left: 160px
}

.t-160 {
    top: -160px
}

.r-160 {
    right: -160px
}

.b-160 {
    bottom: -160px
}

.l-160 {
    left: -160px
}

.w180 {
    flex: 0 0 180px;
    width: 180px
}

.mw180 {
    max-width: 180px
}

.miw180 {
    min-width: 180px
}

.h180 {
    height: 180px
}

.mh180 {
    max-height: 180px
}

.mih180 {
    min-height: 180px
}

.t180 {
    top: 180px
}

.r180 {
    right: 180px
}

.b180 {
    bottom: 180px
}

.l180 {
    left: 180px
}

.t-180 {
    top: -180px
}

.r-180 {
    right: -180px
}

.b-180 {
    bottom: -180px
}

.l-180 {
    left: -180px
}

.w200 {
    flex: 0 0 200px;
    width: 200px
}

.mw200 {
    max-width: 200px
}

.miw200 {
    min-width: 200px
}

.h200 {
    height: 200px
}

.mh200 {
    max-height: 200px
}

.mih200 {
    min-height: 200px
}

.t200 {
    top: 200px
}

.r200 {
    right: 200px
}

.b200 {
    bottom: 200px
}

.l200 {
    left: 200px
}

.t-200 {
    top: -200px
}

.r-200 {
    right: -200px
}

.b-200 {
    bottom: -200px
}

.l-200 {
    left: -200px
}

.w240 {
    flex: 0 0 240px;
    width: 240px
}

.mw240 {
    max-width: 240px
}

.miw240 {
    min-width: 240px
}

.h240 {
    height: 240px
}

.mh240 {
    max-height: 240px
}

.mih240 {
    min-height: 240px
}

.t240 {
    top: 240px
}

.r240 {
    right: 240px
}

.b240 {
    bottom: 240px
}

.l240 {
    left: 240px
}

.t-240 {
    top: -240px
}

.r-240 {
    right: -240px
}

.b-240 {
    bottom: -240px
}

.l-240 {
    left: -240px
}

.w300 {
    flex: 0 0 300px;
    width: 300px
}

.mw300 {
    max-width: 300px
}

.miw300 {
    min-width: 300px
}

.h300 {
    height: 300px
}

.mh300 {
    max-height: 300px
}

.mih300 {
    min-height: 300px
}

.t300 {
    top: 300px
}

.r300 {
    right: 300px
}

.b300 {
    bottom: 300px
}

.l300 {
    left: 300px
}

.t-300 {
    top: -300px
}

.r-300 {
    right: -300px
}

.b-300 {
    bottom: -300px
}

.l-300 {
    left: -300px
}

.w360 {
    flex: 0 0 360px;
    width: 360px
}

.mw360 {
    max-width: 360px
}

.miw360 {
    min-width: 360px
}

.h360 {
    height: 360px
}

.mh360 {
    max-height: 360px
}

.mih360 {
    min-height: 360px
}

.t360 {
    top: 360px
}

.r360 {
    right: 360px
}

.b360 {
    bottom: 360px
}

.l360 {
    left: 360px
}

.t-360 {
    top: -360px
}

.r-360 {
    right: -360px
}

.b-360 {
    bottom: -360px
}

.l-360 {
    left: -360px
}

.w400 {
    flex: 0 0 400px;
    width: 400px
}

.mw400 {
    max-width: 400px
}

.miw400 {
    min-width: 400px
}

.h400 {
    height: 400px
}

.mh400 {
    max-height: 400px
}

.mih400 {
    min-height: 400px
}

.t400 {
    top: 400px
}

.r400 {
    right: 400px
}

.b400 {
    bottom: 400px
}

.l400 {
    left: 400px
}

.t-400 {
    top: -400px
}

.r-400 {
    right: -400px
}

.b-400 {
    bottom: -400px
}

.l-400 {
    left: -400px
}

.w460 {
    flex: 0 0 460px;
    width: 460px
}

.mw460 {
    max-width: 460px
}

.miw460 {
    min-width: 460px
}

.h460 {
    height: 460px
}

.mh460 {
    max-height: 460px
}

.mih460 {
    min-height: 460px
}

.t460 {
    top: 460px
}

.r460 {
    right: 460px
}

.b460 {
    bottom: 460px
}

.l460 {
    left: 460px
}

.t-460 {
    top: -460px
}

.r-460 {
    right: -460px
}

.b-460 {
    bottom: -460px
}

.l-460 {
    left: -460px
}

.w600 {
    flex: 0 0 600px;
    width: 600px
}

.mw600 {
    max-width: 600px
}

.miw600 {
    min-width: 600px
}

.h600 {
    height: 600px
}

.mh600 {
    max-height: 600px
}

.mih600 {
    min-height: 600px
}

.t600 {
    top: 600px
}

.r600 {
    right: 600px
}

.b600 {
    bottom: 600px
}

.l600 {
    left: 600px
}

.t-600 {
    top: -600px
}

.r-600 {
    right: -600px
}

.b-600 {
    bottom: -600px
}

.l-600 {
    left: -600px
}

.w800 {
    flex: 0 0 800px;
    width: 800px
}

.mw800 {
    max-width: 800px
}

.miw800 {
    min-width: 800px
}

.h800 {
    height: 800px
}

.mh800 {
    max-height: 800px
}

.mih800 {
    min-height: 800px
}

.t800 {
    top: 800px
}

.r800 {
    right: 800px
}

.b800 {
    bottom: 800px
}

.l800 {
    left: 800px
}

.t-800 {
    top: -800px
}

.r-800 {
    right: -800px
}

.b-800 {
    bottom: -800px
}

.l-800 {
    left: -800px
}

.w1p {
    flex: 0 0 8.33%;
    width: 8.33%
}

.h1p {
    height: 8.33%
}

.mw1p {
    max-width: 8.33%
}

.mh1p {
    max-height: 8.33%
}

.miw1p {
    min-width: 8.33%
}

.mih1p {
    min-height: 8.33%
}

.l1p {
    left: 8.33%
}

.r1p {
    right: 8.33%
}

.t1p {
    top: 8.33%
}

.b1p {
    bottom: 8.33%
}

.l-1p {
    left: 8.33%
}

.r-1p {
    right: 8.33%
}

.t-1p {
    top: 8.33%
}

.b-1p {
    bottom: 8.33%
}

.w2p {
    flex: 0 0 10%;
    width: 10%
}

.h2p {
    height: 16.66%
}

.mw2p {
    max-width: 16.66%
}

.mh2p {
    max-height: 16.66%
}

.miw2p {
    min-width: 16.66%
}

.mih2p {
    min-height: 16.66%
}

.l2p {
    left: 16.66%
}

.r2p {
    right: 16.66%
}

.t2p {
    top: 16.66%
}

.b2p {
    bottom: 16.66%
}

.l-2p {
    left: 16.66%
}

.r-2p {
    right: 16.66%
}

.t-2p {
    top: 16.66%
}

.b-2p {
    bottom: 16.66%
}

.w3p {
    flex: 0 0 25%;
    width: 25%
}

.h3p {
    height: 25%
}

.mw3p {
    max-width: 25%
}

.mh3p {
    max-height: 25%
}

.miw3p {
    min-width: 25%
}

.mih3p {
    min-height: 25%
}

.l3p {
    left: 25%
}

.r3p {
    right: 25%
}

.t3p {
    top: 25%
}

.b3p {
    bottom: 25%
}

.l-3p {
    left: 25%
}

.r-3p {
    right: 25%
}

.t-3p {
    top: 25%
}

.b-3p {
    bottom: 25%
}

.w4p {
    flex: 0 0 33.33%;
    width: 33.33%
}

.h4p {
    height: 33.33%
}

.mw4p {
    max-width: 33.33%
}

.mh4p {
    max-height: 33.33%
}

.miw4p {
    min-width: 33.33%
}

.mih4p {
    min-height: 33.33%
}

.l4p {
    left: 33.33%
}

.r4p {
    right: 33.33%
}

.t4p {
    top: 33.33%
}

.b4p {
    bottom: 33.33%
}

.l-4p {
    left: 33.33%
}

.r-4p {
    right: 33.33%
}

.t-4p {
    top: 33.33%
}

.b-4p {
    bottom: 33.33%
}

.w5p {
    flex: 0 0 41.66%;
    width: 41.66%
}

.h5p {
    height: 41.66%
}

.mw5p {
    max-width: 41.66%
}

.mh5p {
    max-height: 41.66%
}

.miw5p {
    min-width: 41.66%
}

.mih5p {
    min-height: 41.66%
}

.l5p {
    left: 41.66%
}

.r5p {
    right: 41.66%
}

.t5p {
    top: 41.66%
}

.b5p {
    bottom: 41.66%
}

.l-5p {
    left: 41.66%
}

.r-5p {
    right: 41.66%
}

.t-5p {
    top: 41.66%
}

.b-5p {
    bottom: 41.66%
}

.w6p {
    flex: 0 0 50%;
    width: 50%
}

.h6p {
    height: 50%
}

.mw6p {
    max-width: 50%
}

.mh6p {
    max-height: 50%
}

.miw6p {
    min-width: 50%
}

.mih6p {
    min-height: 50%
}

.l6p {
    left: 50%
}

.r6p {
    right: 50%
}

.t6p {
    top: 50%
}

.b6p {
    bottom: 50%
}

.l-6p {
    left: 50%
}

.r-6p {
    right: 50%
}

.t-6p {
    top: 50%
}

.b-6p {
    bottom: 50%
}

.w7p {
    flex: 0 0 58.33%;
    width: 58.33%
}

.h7p {
    height: 58.33%
}

.mw7p {
    max-width: 58.33%
}

.mh7p {
    max-height: 58.33%
}

.miw7p {
    min-width: 58.33%
}

.mih7p {
    min-height: 58.33%
}

.l7p {
    left: 58.33%
}

.r7p {
    right: 58.33%
}

.t7p {
    top: 58.33%
}

.b7p {
    bottom: 58.33%
}

.l-7p {
    left: 58.33%
}

.r-7p {
    right: 58.33%
}

.t-7p {
    top: 58.33%
}

.b-7p {
    bottom: 58.33%
}

.w8p {
    flex: 0 0 66.66%;
    width: 66.66%
}

.h8p {
    height: 66.66%
}

.mw8p {
    max-width: 66.66%
}

.mh8p {
    max-height: 66.66%
}

.miw8p {
    min-width: 66.66%
}

.mih8p {
    min-height: 66.66%
}

.l8p {
    left: 66.66%
}

.r8p {
    right: 66.66%
}

.t8p {
    top: 66.66%
}

.b8p {
    bottom: 66.66%
}

.l-8p {
    left: 66.66%
}

.r-8p {
    right: 66.66%
}

.t-8p {
    top: 66.66%
}

.b-8p {
    bottom: 66.66%
}

.w9p {
    flex: 0 0 75%;
    width: 75%
}

.h9p {
    height: 75%
}

.mw9p {
    max-width: 75%
}

.mh9p {
    max-height: 75%
}

.miw9p {
    min-width: 75%
}

.mih9p {
    min-height: 75%
}

.l9p {
    left: 75%
}

.r9p {
    right: 75%
}

.t9p {
    top: 75%
}

.b9p {
    bottom: 75%
}

.l-9p {
    left: 75%
}

.r-9p {
    right: 75%
}

.t-9p {
    top: 75%
}

.b-9p {
    bottom: 75%
}

.w10p {
    flex: 0 0 83.33%;
    width: 83.33%
}

.h10p {
    height: 83.33%
}

.mw10p {
    max-width: 83.33%
}

.mh10p {
    max-height: 83.33%
}

.miw10p {
    min-width: 83.33%
}

.mih10p {
    min-height: 83.33%
}

.l10p {
    left: 83.33%
}

.r10p {
    right: 83.33%
}

.t10p {
    top: 83.33%
}

.b10p {
    bottom: 83.33%
}

.l-10p {
    left: 83.33%
}

.r-10p {
    right: 83.33%
}

.t-10p {
    top: 83.33%
}

.b-10p {
    bottom: 83.33%
}

.w11p {
    flex: 0 0 91.66%;
    width: 91.66%
}

.h11p {
    height: 91.66%
}

.mw11p {
    max-width: 91.66%
}

.mh11p {
    max-height: 91.66%
}

.miw11p {
    min-width: 91.66%
}

.mih11p {
    min-height: 91.66%
}

.l11p {
    left: 91.66%
}

.r11p {
    right: 91.66%
}

.t11p {
    top: 91.66%
}

.b11p {
    bottom: 91.66%
}

.l-11p {
    left: 91.66%
}

.r-11p {
    right: 91.66%
}

.t-11p {
    top: 91.66%
}

.b-11p {
    bottom: 91.66%
}

.w12p {
    flex: 0 0 100%;
    width: 100%
}

.h12p {
    height: 100%
}

.mw12p {
    max-width: 100%
}

.mh12p {
    max-height: 100%
}

.miw12p {
    min-width: 100%
}

.mih12p {
    min-height: 100%
}

.l12p {
    left: 100%
}

.r12p {
    right: 100%
}

.t12p {
    top: 100%
}

.b12p {
    bottom: 100%
}

.l-12p {
    left: 100%
}

.r-12p {
    right: 100%
}

.t-12p {
    top: 100%
}

.b-12p {
    bottom: 100%
}

.pa {
    position: absolute
}

.pr {
    position: relative
}

.ps {
    position: sticky
}

.pf {
    position: fixed
}

.z1 {
    z-index: 1
}

.z2 {
    z-index: 2
}

.z3 {
    z-index: 3
}

.z4 {
    z-index: 4
}

.z5 {
    z-index: 5
}

.z6 {
    z-index: 6
}

.z7 {
    z-index: 7
}

.z8 {
    z-index: 8
}

.z9 {
    z-index: 9
}

.z90 {
    z-index: 90
}

.z99 {
    z-index: 99
}

.z900 {
    z-index: 900
}

.z999 {
    z-index: 999
}

.z9999 {
    z-index: 9999
}

.br2 {
    border-radius: 2px
}

.br4 {
    border-radius: 4px
}

.br6 {
    border-radius: 6px
}

.br8 {
    border-radius: 8px
}

.br10 {
    border-radius: 10px
}

.br20 {
    border-radius: 20px
}

.br50 {
    border-radius: 50px
}

.br100 {
    border-radius: 100px
}

.br200 {
    border-radius: 200px
}

.br300 {
    border-radius: 300px
}

.br50p {
    border-radius: 50%
}

.txt-p {
    color: var(--primary);
    fill: var(--primary)
}

.txt-p-h:hover {
    color: var(--primary);
    fill: var(--primary)
}

.bg-p {
    background-color: var(--primary)
}

.bg-p-h:hover {
    background-color: var(--primary)
}

.txt-pl {
    color: var(--primary-light);
    fill: var(--primary-light)
}

.txt-pl-h:hover {
    color: var(--primary-light);
    fill: var(--primary-light)
}

.bg-pl {
    background-color: var(--primary-light)
}

.bg-pl-h:hover {
    background-color: var(--primary-light)
}

.txt-s {
    color: var(--success);
    fill: var(--success)
}

.txt-s-h:hover {
    color: var(--success);
    fill: var(--success)
}

.bg-s {
    background-color: var(--success)
}

.bg-s-h:hover {
    background-color: var(--success)
}

.txt-sl {
    color: var(--success-light);
    fill: var(--success-light)
}

.txt-sl-h:hover {
    color: var(--success-light);
    fill: var(--success-light)
}

.bg-sl {
    background-color: var(--success-light)
}

.bg-sl-h:hover {
    background-color: var(--success-light)
}

.txt-i {
    color: var(--info);
    fill: var(--info)
}

.txt-i-h:hover {
    color: var(--info);
    fill: var(--info)
}

.bg-i {
    background-color: var(--info)
}

.bg-i-h:hover {
    background-color: var(--info)
}

.txt-il {
    color: var(--info-light);
    fill: var(--info-light)
}

.txt-il-h:hover {
    color: var(--info-light);
    fill: var(--info-light)
}

.bg-il {
    background-color: var(--info-light)
}

.bg-il-h:hover {
    background-color: var(--info-light)
}

.txt-w {
    color: var(--warning);
    fill: var(--warning)
}

.txt-w-h:hover {
    color: var(--warning);
    fill: var(--warning)
}

.bg-w {
    background-color: var(--warning)
}

.bg-w-h:hover {
    background-color: var(--warning)
}

.txt-wl {
    color: var(--warning-light);
    fill: var(--warning-light)
}

.txt-wl-h:hover {
    color: var(--warning-light);
    fill: var(--warning-light)
}

.bg-wl {
    background-color: var(--warning-light)
}

.bg-wl-h:hover {
    background-color: var(--warning-light)
}

.txt-e {
    color: var(--error);
    fill: var(--error)
}

.txt-e-h:hover {
    color: var(--error);
    fill: var(--error)
}

.bg-e {
    background-color: var(--error)
}

.bg-e-h:hover {
    background-color: var(--error)
}

.txt-el {
    color: var(--error-light);
    fill: var(--error-light)
}

.txt-el-h:hover {
    color: var(--error-light);
    fill: var(--error-light)
}

.bg-el {
    background-color: var(--error-light)
}

.bg-el-h:hover {
    background-color: var(--error-light)
}

.txt-se {
    color: var(--second);
    fill: var(--second)
}

.txt-se-h:hover {
    color: var(--second);
    fill: var(--second)
}

.bg-se {
    background-color: var(--second)
}

.bg-se-h:hover {
    background-color: var(--second)
}

.txt-sel {
    color: var(--second-light);
    fill: var(--second-light)
}

.txt-sel-h:hover {
    color: var(--second-light);
    fill: var(--second-light)
}

.bg-sel {
    background-color: var(--second-light)
}

.bg-sel-h:hover {
    background-color: var(--second-light)
}

.txt-con {
    color: var(--content);
    fill: var(--content)
}

.txt-con-h:hover {
    color: var(--content);
    fill: var(--content)
}

.bg-con {
    background-color: var(--content)
}

.bg-con-h:hover {
    background-color: var(--content)
}

.txt-b {
    color: var(--black);
    fill: var(--black)
}

.txt-b-h:hover {
    color: var(--black);
    fill: var(--black)
}

.bg-b {
    background-color: var(--black)
}

.bg-b-h:hover {
    background-color: var(--black)
}

.txt-b10 {
    color: var(--black-10);
    fill: var(--black-10)
}

.txt-b10-h:hover {
    color: var(--black-10);
    fill: var(--black-10)
}

.bg-b10 {
    background-color: var(--black-10)
}

.bg-b10-h:hover {
    background-color: var(--black-10)
}

.txt-b15 {
    color: var(--black-15);
    fill: var(--black-15)
}

.txt-b15-h:hover {
    color: var(--black-15);
    fill: var(--black-15)
}

.bg-b15 {
    background-color: var(--black-15)
}

.bg-b15-h:hover {
    background-color: var(--black-15)
}

.txt-b20 {
    color: var(--black-20);
    fill: var(--black-20)
}

.txt-b20-h:hover {
    color: var(--black-20);
    fill: var(--black-20)
}

.bg-b20 {
    background-color: var(--black-20)
}

.bg-b20-h:hover {
    background-color: var(--black-20)
}

.txt-b30 {
    color: var(--black-30);
    fill: var(--black-30)
}

.txt-b30-h:hover {
    color: var(--black-30);
    fill: var(--black-30)
}

.bg-b30 {
    background-color: var(--black-30)
}

.bg-b30-h:hover {
    background-color: var(--black-30)
}

.txt-b40 {
    color: var(--black-40);
    fill: var(--black-40)
}

.txt-b40-h:hover {
    color: var(--black-40);
    fill: var(--black-40)
}

.bg-b40 {
    background-color: var(--black-40)
}

.bg-b40-h:hover {
    background-color: var(--black-40)
}

.txt-b60 {
    color: var(--black-60);
    fill: var(--black-60)
}

.txt-b60-h:hover {
    color: var(--black-60);
    fill: var(--black-60)
}

.bg-b60 {
    background-color: var(--black-60)
}

.bg-b60-h:hover {
    background-color: var(--black-60)
}

.txt-b80 {
    color: var(--black-80);
    fill: var(--black-80)
}

.txt-b80-h:hover {
    color: var(--black-80);
    fill: var(--black-80)
}

.bg-b80 {
    background-color: var(--black-80)
}

.bg-b80-h:hover {
    background-color: var(--black-80)
}

.txt-wh {
    color: var(--white);
    fill: var(--white)
}

.txt-wh-h:hover {
    color: var(--white);
    fill: var(--white)
}

.bg-wh {
    background-color: var(--white)
}

.bg-wh-h:hover {
    background-color: var(--white)
}

.txt-wh10 {
    color: var(--white-10);
    fill: var(--white-10)
}

.txt-wh10-h:hover {
    color: var(--white-10);
    fill: var(--white-10)
}

.bg-wh10 {
    background-color: var(--white-10)
}

.bg-wh10-h:hover {
    background-color: var(--white-10)
}

.txt-wh15 {
    color: var(--white-15);
    fill: var(--white-15)
}

.txt-wh15-h:hover {
    color: var(--white-15);
    fill: var(--white-15)
}

.bg-wh15 {
    background-color: var(--white-15)
}

.bg-wh15-h:hover {
    background-color: var(--white-15)
}

.txt-wh20 {
    color: var(--white-20);
    fill: var(--white-20)
}

.txt-wh20-h:hover {
    color: var(--white-20);
    fill: var(--white-20)
}

.bg-wh20 {
    background-color: var(--white-20)
}

.bg-wh20-h:hover {
    background-color: var(--white-20)
}

.txt-wh30 {
    color: var(--white-30);
    fill: var(--white-30)
}

.txt-wh30-h:hover {
    color: var(--white-30);
    fill: var(--white-30)
}

.bg-wh30 {
    background-color: var(--white-30)
}

.bg-wh30-h:hover {
    background-color: var(--white-30)
}

.txt-wh40 {
    color: var(--white-40);
    fill: var(--white-40)
}

.txt-wh40-h:hover {
    color: var(--white-40);
    fill: var(--white-40)
}

.bg-wh40 {
    background-color: var(--white-40)
}

.bg-wh40-h:hover {
    background-color: var(--white-40)
}

.txt-wh60 {
    color: var(--white-60);
    fill: var(--white-60)
}

.txt-wh60-h:hover {
    color: var(--white-60);
    fill: var(--white-60)
}

.bg-wh60 {
    background-color: var(--white-60)
}

.bg-wh60-h:hover {
    background-color: var(--white-60)
}

.txt-wh80 {
    color: var(--white-80);
    fill: var(--white-80)
}

.txt-wh80-h:hover {
    color: var(--white-80);
    fill: var(--white-80)
}

.bg-wh80 {
    background-color: var(--white-80)
}

.bg-wh80-h:hover {
    background-color: var(--white-80)
}

.txt-g {
    color: var(--grey);
    fill: var(--grey)
}

.txt-g-h:hover {
    color: var(--grey);
    fill: var(--grey)
}

.bg-g {
    background-color: var(--grey)
}

.bg-g-h:hover {
    background-color: var(--grey)
}

.txt-cg {
    color: var(--content-grey);
    fill: var(--content-grey)
}

.txt-cg-h:hover {
    color: var(--content-grey);
    fill: var(--content-grey)
}

.bg-cg {
    background-color: var(--content-grey)
}

.bg-cg-h:hover {
    background-color: var(--content-grey)
}

.txt-f5 {
    color: var(--grey-f5);
    fill: var(--grey-f5)
}

.txt-f5-h:hover {
    color: var(--grey-f5);
    fill: var(--grey-f5)
}

.bg-f5 {
    background-color: var(--grey-f5)
}

.bg-f5-h:hover {
    background-color: var(--grey-f5)
}

.txt-f9 {
    color: var(--grey-f9);
    fill: var(--grey-f9)
}

.txt-f9-h:hover {
    color: var(--grey-f9);
    fill: var(--grey-f9)
}

.bg-f9 {
    background-color: var(--grey-f9)
}

.bg-f9-h:hover {
    background-color: var(--grey-f9)
}

.txt-dd {
    color: var(--grey-d);
    fill: var(--grey-d)
}

.txt-dd-h:hover {
    color: var(--grey-d);
    fill: var(--grey-d)
}

.bg-dd {
    background-color: var(--grey-d)
}

.bg-dd-h:hover {
    background-color: var(--grey-d)
}

.txt-gold {
    color: var(--gold);
    fill: var(--gold)
}

.txt-gold-h:hover {
    color: var(--gold);
    fill: var(--gold)
}

.bg-gold {
    background-color: var(--gold)
}

.bg-gold-h:hover {
    background-color: var(--gold)
}

.bg-gold {
    background-color: var(--gold-gradient)
}

.gradient-p {
    background: linear-gradient(90deg,var(--primary) 0,var(--second) 100%)
}

.bg-none {
    background: 0 0
}

.bg-cover {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center
}

.bd0 {
    border: 0
}

.bd1 {
    border: solid 1px var(--grey)
}

.bt1 {
    border-top: solid 1px var(--grey)
}

.br1 {
    border-right: solid 1px var(--grey)
}

.bb1 {
    border-bottom: solid 1px var(--grey)
}

.bl1 {
    border-left: solid 1px var(--grey)
}

.sd0 {
    box-shadow: none
}

.sd-sm {
    box-shadow: 0 0 5px var(--black-15)
}

.sd-md {
    box-shadow: 0 0 10px var(--black-15)
}

.sd-lg {
    box-shadow: 0 0 20px var(--black-15)
}

.sd-xl {
    box-shadow: 0 0 50px var(--black-15)
}

.sdl-sm {
    box-shadow: 0 0 5px var(--primary-light)
}

.sdl-md {
    box-shadow: 0 0 10px var(--primary-light)
}

.sdl-lg {
    box-shadow: 0 0 20px var(--primary-light)
}

.sdl-xl {
    box-shadow: 0 0 50px var(--primary-light)
}

.o0 {
    opacity: 0!important
}

.o50 {
    opacity: .5!important
}

.o75 {
    opacity: .75!important
}

.lt1 {
    letter-spacing: 1px
}

.lt2 {
    letter-spacing: 2px
}

.lt3 {
    letter-spacing: 3px
}

.lt4 {
    letter-spacing: 4px
}

.alert {
    background-color: var(--primary-light);
    border: solid 1px var(--primary);
    color: var(--primary-dark)
}

.alert.alert-err {
    background-color: var(--error-light);
    border-color: var(--error);
    color: var(--error-dark)
}

.alert.alert-warn {
    background-color: var(--warning-light);
    border-color: var(--warning);
    color: var(--warning-dark)
}

.events-none>.animate.loading::before {
    margin-right: 0
}

.cate [cols="1"] {
    width: 100%!important;
    flex: 0 0 100%!important
}

.cate [cols="2"] {
    width: 50%!important;
    flex: 0 0 50%!important
}

.cate [cols="3"] {
    width: 33.33%!important;
    flex: 0 0 33.33%!important
}

.cate [cols="4"] {
    width: 25%!important;
    flex: 0 0 25%!important
}

.cate [cols="5"] {
    width: 20%!important;
    flex: 0 0 20%!important
}

.cate [cols="6"] {
    width: 16.66%!important;
    flex: 0 0 16.66%!important
}

.cate [cols="7"] {
    width: 14.285%!important;
    flex: 0 0 14.285%!important
}

.cate [cols="8"] {
    width: 12.5%!important;
    flex: 0 0 12.5%!important
}

.cate [cols="9"] {
    width: 11.11%!important;
    flex: 0 0 11.11%!important
}

.cate [cols="10"] {
    width: 10%!important;
    flex: 0 0 10%!important
}

.cate [cols="11"] {
    width: 9.09%!important;
    flex: 0 0 9.09%!important
}

.cate [cols="12"] {
    width: 8.33%!important;
    flex: 0 0 8.33%!important
}

@media (min-width: 641px) {
    .cate {
        font-size:inherit!important
    }
}

@media (max-width: 640px) {
    .cate [mcols="1"] {
        width:100%!important;
        flex: 0 0 100%!important
    }

    .cate [mcols="2"] {
        width: 50%!important;
        flex: 0 0 50%!important
    }

    .cate [mcols="3"] {
        width: 33.33%!important;
        flex: 0 0 33.33%!important
    }

    .cate [mcols="4"] {
        width: 25%!important;
        flex: 0 0 25%!important
    }

    .cate [mcols="5"] {
        width: 20%!important;
        flex: 0 0 20%!important
    }

    .cate [mcols="6"] {
        width: 16.66%!important;
        flex: 0 0 16.66%!important
    }

    .cate [mcols="7"] {
        width: 14.285%!important;
        flex: 0 0 14.285%!important
    }

    .cate [mcols="8"] {
        width: 12.5%!important;
        flex: 0 0 12.5%!important
    }

    .cate [mcols="9"] {
        width: 11.11%!important;
        flex: 0 0 11.11%!important
    }

    .cate [mcols="10"] {
        width: 10%!important;
        flex: 0 0 10%!important
    }

    .cate [mcols="11"] {
        width: 9.09%!important;
        flex: 0 0 9.09%!important
    }

    .cate [mcols="12"] {
        width: 8.33%!important;
        flex: 0 0 8.33%!important
    }
}

:root {
    --bg: #EAEFFE;
    --bg2: #F6F8FF
}

body {
    background: var(--bg);
    padding-left: 20px;
    padding-right: 20px
}

.bg {
    background: var(--bg)
}

.bg2 {
    background: var(--bg2)
}

.c {
    max-width: 1280px
}

.h42 {
    height: 42px
}

.w190 {
    width: 190px;
    flex: 0 0 190px
}

.p6 {
    padding: 6px
}

.pt6 {
    padding-top: 6px
}

.pb6 {
    padding-bottom: 6px
}

.mr-6 {
    margin-right: -6px
}

.ml-6 {
    margin-left: -6px
}

.mih700 {
    min-height: 700px
}

.header {
    border-radius: 30px;
    max-height: calc(100vh - 48px)
}

.logo-wrapper {
    text-align: center
}

input[type=search] {
    border-color: var(--bg)
}

.about-menu {
    padding-left: 6px
}

.about-menu a {
    position: relative
}

.about-menu a::before {
    display: inline-block;
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 3px;
    background: var(--warning);
    margin-right: 6px;
    position: absolute;
    left: -12px;
    top: 50%;
    margin-top: -2px
}

.about-menu a:nth-child(2)::before {
    background: var(--error)
}

.about-menu a:nth-child(3)::before {
    background: var(--success)
}

.about-menu a:nth-child(4)::before {
    background: var(--warning)
}

.about-menu a:nth-child(5)::before {
    background: var(--second)
}

.logo img {
    border-radius: 20px;
    overflow: hidden
}

.aside {
    max-height: 100vh
}

.recent a {
    max-width: calc(50% - 8px)
}

.toptips {
    background: #fffce7;
    padding: 10px;
    color: red;
    border-radius: 2px
}

.toptips span {
    display: inline-block;
    background: #da634b;
    color: #fff;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 2px
}

.toptips p {
    display: inline
}

button,input,select {
    height: 40px;
    border-radius: 2px;
    outline: 0;
    border: solid 1px #e9dbe0;
    padding: 0 1em;
    box-sizing: border-box;
    transition: all .3s
}

input:focus,select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light)
}

.title span {
    color: #ffd55d;
    font-weight: 100
}

.title:hover span {
    margin-left: 8px
}

.cate {
    margin-bottom: 12px;
    margin-bottom: 8px
}

.cate_name::before {
    z-index: 1;
    display: block;
    content: '';
    background: #ffd55d;
    height: 10px;
    width: 48px;
    left: 0;
    bottom: -3px;
    position: absolute
}

.cate b,.cate span {
    position: relative;
    display: inline-block;
    vertical-align: middle
}

.cate i {
    position: absolute;
    background-color: #d81647;
    color: #fff;
    font-size: 12px;
    display: inline-block;
    width: 17px;
    height: 17px;
    line-height: 17px;
    text-align: center;
    left: 100%;
    margin-left: -2px;
    top: -8px;
    border-radius: 4px 4px 4px 0;
    transform: scale(.9);
    font-style: normal
}

.cate i.jian {
    background-color: #1fbdff
}

.cate i.new {
    background-color: #0fb359
}

.cate i.best {
    background-color: #ffc800
}

.search input {
    padding-right: 8px;
    padding-left: 42px;
    transition: all .3s;
    width: 90px;
    flex: 0 0 90px
}

.search>.active input {
    width: 300px!important;
    flex: 0 0 300px
}

.footer {
    border-radius: 50px 50px 0 0
}

.pagination {
    font-size: .73em
}

.pagination>* {
    border: 0;
    background-color: var(--bg);
    margin: 0 2px;
    border-radius: 99px;
    width: 32px;
    flex: 0 0 32px;
    height: 20px;
    color: var(--content)
}

.pagination span {
    cursor: not-allowed;
    opacity: .5
}

.pagination .bg-p {
    border: solid 1px var(--primary);
    color: inherit
}

.spin {
    display: inline-block;
    position: relative;
    width: 1em;
    height: 1em
}

.spin::after,.spin::before {
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: solid .12em transparent;
    border-radius: 50%
}

.spin::before {
    border-color: #ccc
}

.spin::after {
    border-left-color: #999;
    animation: spin infinite 1s linear
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

@media (min-width: 641px) {
    .cate {
        font-size:inherit!important
    }
}

@media screen and (max-width: 1100px) {
    .aside {
        display:none!important
    }

    .menu+div {
        padding-left: 20px;
        padding-right: 20px
    }

    .search>div {
        transition: all .3s;
        width: 90px
    }

    .search>.active {
        flex: 1 1 auto;
        width: 0
    }

    .search>.active input {
        width: 100%!important
    }

    .cate a.w2p {
        width: 25%;
        flex: 0 0 25%
    }

    .menu {
        margin: 0
    }
}

@media screen and (max-width: 640px) {
    body {
        padding:0 5px
    }

    .app {
        display: block!important;
        padding: 5px;
        margin-top: 0;
        border-radius: 20px
    }

    .menu {
        width: 100%;
        top: 5px;
        z-index: 100;
        height: 60px;
        min-height: 60px;
        border-radius: 15px;
        overflow-y: hidden;
        padding-top: 0
    }

    .menu+div {
        width: 100%!important;
        padding: 10px 0
    }

    .menu .menubtn {
        display: inline-block
    }

    .menu.active .main-menu {
        display: block;
        background-color: var(--primary);
        z-index: 900;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        padding: 80px 0 80px
    }

    .menu.active .main-menu>div {
        padding-bottom: 30px;
        padding-top: 30px
    }

    .menu.active .main-menu::after,.menu.active .main-menu::before {
        z-index: 8;
        content: '';
        display: block;
        height: 30px;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 80px;
        background: linear-gradient(180deg,transparent,var(--primary) 60%)
    }

    .menu.active .main-menu::before {
        top: 60px;
        background: linear-gradient(0deg,transparent,var(--primary) 60%)
    }

    .menu.active .main-menu>div {
        overflow-y: auto;
        height: 100%
    }

    .menu.active .main-menu a {
        max-width: 50%;
        margin: 5px auto;
        font-size: 16px;
        height: 36px
    }

    .menu.active .about-menu {
        display: flex;
        flex-wrap: wrap;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 901;
        justify-content: center;
        padding: 20px
    }

    .menu.active .about-menu a {
        position: relative;
        margin: 10px 10px 0
    }

    .menu.active .about-menu a::before {
        left: -10px
    }

    .menu.active .close {
        display: inline-block
    }

    .menu.active .menubtn {
        display: none
    }

    .main-menu {
        display: none
    }

    .about-menu {
        display: none
    }

    .logo-wrapper {
        padding: 10px;
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: space-between;
        position: relative;
        z-index: 991
    }

    .logo-wrapper>div {
        display: flex;
        align-items: center
    }

    .logo-wrapper img {
        width: 40px;
        height: 40px;
        border-radius: 8px
    }

    .logo-wrapper .logo+a {
        max-width: 200px;
        overflow: hidden
    }

    .cate {
        margin: -3px
    }

    .cate.cate1 {
        margin-top: 3px
    }

    .cate a.w2p {
        width: 33.33%;
        flex: 0 0 33.33%;
        padding: 3px
    }

    .cate a.w2p>div {
        border-radius: 8px
    }

    .cate.posts {
        margin: 0 -3px
    }

    .cate.posts a {
        flex: 0 0 100%;
        width: 100%;
        padding: 3px
    }

    .ads a {
        width: 100%;
        flex: 0 0 100%
    }

    .ads a img {
        border-radius: 5px
    }

    .search {
        margin-bottom: 10px
    }

    .search>div {
        width: 40px
    }

    .search>div.active input {
        padding-left: 32px
    }

    .search input {
        width: 0;
        height: 36px;
        padding-left: 27px
    }

    .search svg {
        width: 16px;
        height: 16px;
        top: 10px;
        left: 10px
    }

    .apps a.w2p {
        width: 50%;
        flex: 0 0 50%;
        text-align: left
    }

    .apps a.w2p .o-hidden {
        margin-right: 4px;
        margin-left: 4px
    }

    .apps a.w2p>div {
        padding: 4px
    }

    .self-wrapper form .f1 {
        width: 100%;
        flex: 0 0 100%;
        margin-bottom: 10px
    }

    .self-wrapper form>.f {
        flex-wrap: wrap
    }

    .self-wrapper form>.f .ml20 {
        margin-left: 0
    }

    .gotop {
        right: 10px;
        bottom: 10px;
        line-height: 1;
        width: 40px;
        height: 40px;
        border-radius: 6px
    }

    .footer {
        border-radius: 20px 20px 0 0
    }

    .pagination {
        margin-top: 4px
    }

    .pagination>* {
        width: 30px;
        flex: 0 0 30px;
        margin: 0 1px
    }
}