@media screen and (max-width: 2559px) {
    html {
        font-size: 16px
    }
}

@media screen and (min-width: 2560px) and (max-width: 3839px) {
    html {
        font-size: 16px
    }
}

@media screen and (min-width: 2560px) and (max-width: 3839px) and (max-aspect-ratio: 2) {
    html {
        font-size: 21.6px
    }
}

@media screen and (min-width: 2560px) and (max-width: 3839px) and (min-aspect-ratio: 2.36999) and (min-height: 1081px) {
    html {
        font-size: 21.6px
    }
}

@media screen and (min-width: 3840px) {
    html {
        font-size: 21.6px
    }
}

@media screen and (min-width: 3840px) and (max-aspect-ratio: 2) {
    html {
        font-size: 29.16px
    }
}

@media screen and (min-width: 3840px) and (min-aspect-ratio: 2.36996) and (min-height: 1440px) {
    html {
        font-size: 29.16px
    }
}

.pageWrapper {
    display: flex;
    flex-direction: column;
    height: 100%
}

.header {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    padding: 0 0 0 2.5rem;
    width: 100%
}

@media screen and (min-width: 952px) {
    .header {
        background-image: url(./assets/img/basicHeader.9eb092.png);
        background-position: 100% 0;
        background-size: cover;
        height: 3.75rem
    }
}

@media screen and (max-width: 951px) {
    .header {
        background: #000;
        border-bottom: 1px solid #ebebeb;
        height: 80px;
        justify-content: space-between;
        padding: 0 16px
    }
}

.header .logo {
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: center
}

.header .logo img {
    /*content: url(../assets/img/logo-white.aa6fa9.png);*/
    height: 3.4375rem;
}

@media screen and (max-width: 951px) {
    .header .logo img {
        /*content: url(../assets/img/logo.51d8c1.png);*/
        height: 50px
    }
}

.scrollAreaWrapper {
    flex: auto;
    height: 100%;
    min-height: 0;
    transform: translate(0)
}

.scrollArea {
    height: 100%;
    width: 100%
}

@media screen and (min-width: 952px) {
    .scrollArea {
        background: #000;
        overflow-x: auto;
        overflow-y: auto
    }
}

@media screen and (max-width: 951px) {
    .scrollArea {
        background-color: #fafafa;
        overflow-x: hidden;
        overflow-y: auto
    }
}

.scrollArea .wrapper {
    display: flex;
    min-height: 100%;
    position: relative
}

@media screen and (max-width: 951px) {
    .scrollArea .wrapper {
        min-width: 348px
    }
}

.scrollArea .wrapper .main {
    display: flex;
    position: relative
}

@media screen and (min-width: 952px) and (max-width: 1439px) {
    .scrollArea .wrapper .main {
        width: 1152px
    }
}

@media screen and (max-width: 1919px) and (min-width: 1440px) {
    .scrollArea .wrapper .main {
        width: 1152px
    }
}

@media screen and (max-width: 2561px) and (min-width: 1920px) {
    .scrollArea .wrapper .main {
        width: 1536px
    }
}

@media screen and (max-width: 3839px) and (min-width: 2560px) {
    .scrollArea .wrapper .main {
        width: 2048px
    }
}

@media screen and (min-width: 3840px) {
    .scrollArea .wrapper .main {
        width: 3072px
    }
}

@media screen and (min-width: 952px) {
    .scrollArea .wrapper .main {
        min-height: 50.1875rem
    }
}

@media screen and (max-width: 951px) {
    .scrollArea .wrapper .main {
        width: 100%
    }
}

.scrollArea .wrapper .main .body {
    display: flex;
    flex-direction: column
}

@media screen and (min-width: 952px) {
    .scrollArea .wrapper .main .body {
        flex-basis: 788px;
        flex-grow: 1;
        flex-shrink: 0
    }
}

@media screen and (max-width: 951px) {
    .scrollArea .wrapper .main .body {
        width: 100%;
        z-index: 1
    }
}

.scrollArea .wrapper .main .body .head {
    border-bottom: .0625rem solid #ebebeb;
    flex-grow: 0;
    flex-shrink: 0;
    height: 5rem;
    width: 100%
}

@media screen and (max-width: 951px) {
    .scrollArea .wrapper .main .body .head {
        display: none
    }
}

.scrollArea .wrapper .main .body .container {
    width: 100%
}

@media screen and (max-width: 951px) {
    .scrollArea .wrapper .main .body .container {
        background: #000;
        height: 100%
    }
}

@media screen and (min-width: 952px) {
    .scrollArea .wrapper .main .body .container {
        min-height: 40.1875rem;
        min-height: calc(100% - 5.125rem)
    }
}

.side {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 11.25rem
}

@media screen and (min-width: 952px) {
    .side {
        /*border-left: .0625rem solid #ebebeb;*/
        /*border-right: .0625rem solid #ebebeb*/
    }
}

@media screen and (max-width: 951px) {
    .side {
        z-index: 2
    }

    .side.empty {
        display: none
    }
}

@media screen and (min-width: 952px) {
    .side:not(.empty) .sideBody {
        min-width: 10rem
    }
}

.side .sideHead {
    align-items: center;
    border-bottom: .0625rem solid #ebebeb;
    display: flex;
    height: 5rem;
    justify-content: center;
    width: 100%
}

@media screen and (min-width: 952px) {
    .side .sideHead {
        flex: none
    }
}

@media screen and (max-width: 951px) {
    .side .sideHead {
        display: none
    }
}

.side .sideBody {
    width: 100%
}

@media screen and (min-width: 952px) {
    .side .sideBody {
        flex: 1 1
    }
}

@media screen and (max-width: 951px) {
    .side .sideBody {
        height: 100%;
        padding: 0 16px
    }

    .side {
        background-color: #fff;
        height: 100%;
        opacity: 0;
        position: absolute;
        position: fixed;
        transform: translate3d(-100%, 0, 0);
        transition: all .3s ease;
        width: 100%
    }

    .side.expand {
        opacity: 1;
        transform: translateZ(0)
    }
}

.whiteRow {
    display: flex;
    flex-basis: 9rem;
    flex: 1 1;
    flex-direction: column;
    position: relative
}

@media screen and (max-width: 951px) {
    .whiteRow {
        display: none
    }
}

.whiteRow .whiteHead {
    border-bottom: .0625rem solid #ebebeb;
    height: 5rem;
    width: 100%
}

.whiteRow .whiteBody {
    flex: 1 1;
    width: 100%
}

.titleAndArticle .title {
    align-items: center;
    border-bottom: 1px solid #ebebeb;
    color: #fff;
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    font-size: 18px;
    font-weight: 700;
    height: 80px;
    justify-content: center;
    margin: 0
}

@media screen and (min-width: 952px) {
    .titleAndArticle .title {
        font-size: 1.125rem;
        height: 5rem
    }
}

@media screen and (max-width: 951px) {
    .titleAndArticle .title {
        background-color: #000;
        height: 50px
    }
}

.titleAndArticle .article {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    line-height: 2;
    padding: 2.5rem 9.125rem;
    position: relative;
    word-break: break-word
}

@media screen and (max-width: 951px) {
    .titleAndArticle .article {
        padding: 1.5rem 2rem
    }
}

.titleAndArticle .article > div {
    padding-bottom: 1.5rem;
    color: #fff;
}

.titleAndArticle .article h1 {
    color: #fff;
    display: none;
    font-size: 2rem;
    font-weight: 700;
    text-align: center
}

.titleAndArticle .article h2 {
    font-size: 1rem;
    margin: .35em 0 .25em
}

.titleAndArticle .article p {
    font-size: 1rem;
    margin: .2em 0;
    text-indent: 1.8em
}

.titleAndArticle .article .impt {
    color: red
}

.titleAndArticle .article ol, .titleAndArticle .article ul {
    font-size: 1rem;
    margin: .2em 0;
    padding-left: 2em
}

.titleAndArticle .article ol {
    list-style: none
}

.titleAndArticle .article ul {
    list-style: disc
}

.titleAndArticle .article ol li {
    margin-bottom: .4em
}

.titleAndArticle .article ul li {
    margin-bottom: .2em
}

.titleAndArticle .article tbody tr td:nth-of-type(4), .titleAndArticle .article tbody tr td:nth-of-type(5) {
    word-break: break-word
}

#waiting {
    align-items: center;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background-color: rgba(0, 0, 0, .7);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transition: opacity .3s ease-in-out;
    width: 100%;
    z-index: 9
}

#waiting.show {
    opacity: 1
}

#waiting .container {
    border-radius: 4px;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: opacity .3s
}

@media screen and (min-width: 952px) {
    #waiting .container {
        border-radius: .25rem
    }
}

#waiting .container .icon {
    height: 75px;
    width: 75px
}

@media screen and (min-width: 952px) {
    #waiting .container .icon {
        height: 4.6875rem;
        width: 4.6875rem
    }
}

#waiting .container .icon rect {
    animation: blink 1s infinite
}

#waiting .container .icon rect.rect1 {
    animation-delay: -.91666667s
}

#waiting .container .icon rect.rect2 {
    animation-delay: -.83333333s
}

#waiting .container .icon rect.rect3 {
    animation-delay: -.75s
}

#waiting .container .icon rect.rect4 {
    animation-delay: -.66666667s
}

#waiting .container .icon rect.rect5 {
    animation-delay: -.58333333s
}

#waiting .container .icon rect.rect6 {
    animation-delay: -.5s
}

#waiting .container .icon rect.rect7 {
    animation-delay: -.41666667s
}

#waiting .container .icon rect.rect8 {
    animation-delay: -.33333333s
}

#waiting .container .icon rect.rect9 {
    animation-delay: -.25s
}

#waiting .container .icon rect.rect10 {
    animation-delay: -.16666667s
}

#waiting .container .icon rect.rect11 {
    animation-delay: -.08333333s
}

#waiting .container .icon rect.rect12 {
    animation-delay: 0
}

@keyframes blink {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

html {
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #000;
    touch-action: pan-x pan-y;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

body, html {
    height: 100%;
    overflow: hidden;
    width: 100%
}

body {
    margin: 0
}

.svgDefs {
    height: 0;
    position: absolute;
    width: 0;
    z-index: -1
}

#root {
    background-color: #fff;
    display: block;
    height: 100%;
    width: 100%
}

:focus {
    outline: none
}