html {
    font-size: 20px; 
}

body {
    margin: 0;
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: .9rem;
    font-weight: 300;
    line-height: 1.5;
    color: #cfd2da;
    background-color: #252830;
}

.opacity0 {
    opacity: 0;
}

.open-Main-Menu {
    position: fixed;
    line-height: 6rem;
    z-index: 1050;
    right: 50%;
    bottom: 50%;
    margin-right: 1.65rem;
    margin-bottom: 3rem;
    animation: openMainMenu 1s;
    /* Safari 与 Chrome */
    -webkit-animation: openMainMenu 1s;
}

@keyframes openMainMenu {
    from {
        right: 10rem;
        bottom: 10rem;
    }
    to {
        right: 50%;
        bottom: 50%;
    }
}

@-webkit-keyframes openMainMenu {
    from {
        right: 10rem;
        bottom: 10rem;
    }
    to {
        right: 50%;
        bottom: 50%;
    }
}

.open-Main-Menu .Icons-Video {
    left: 0rem;
    top: -8rem;
    opacity: 1;
    animation: openVideo 1s;
    /* Safari 与 Chrome */
    -webkit-animation: openVideo 1s;
}

@keyframes openVideo {
    from {
        left: 0rem;
        top: 0rem;
    }
    to {
        left: 0rem;
        top: -8rem;
    }
}

@-webkit-keyframes openVideo {
    from {
        left: 0rem;
        top: 0rem;
    }
    to {
        left: 0rem;
        top: -8rem;
    }
}

.open-Main-Menu .Icons-Audio {
    left: 6.9rem;
    top: -4rem;
    opacity: 1;
    animation: openAudio 1s;
    /* Safari 与 Chrome */
    -webkit-animation: openAudio 1s;
}

@keyframes openAudio {
    from {
        left: 0rem;
        top: 0rem;
    }
    to {
        left: 6.9rem;
        top: -4rem;
    }
}

@-webkit-keyframes openAudio {
    from {
        left: 0rem;
        top: 0rem;
    }
    to {
        left: 6.9rem;
        top: -4rem;
    }
}

.open-Main-Menu .Icons-Fiction {
    left: 6.9rem;
    top: 4rem;
    opacity: 1;
    animation: openFiction 1s;
    -webkit-animation: openFiction 1s;
}

@keyframes openFiction {
    from {
        left: 0rem;
        top: 0rem;
    }
    to {
        left: 6.9rem;
        top: 4rem;
    }
}

@-webkit-keyframes openFiction {
    from {
        left: 0rem;
        top: 0rem;
    }
    to {
        left: 6.9rem;
        top: 4rem;
    }
}

.open-Main-Menu .Icons-Cartoon {
    left: 0rem;
    top: 8rem;
    opacity: 1;
    animation: openCartoon 1s;
    -webkit-animation: openCartoon 1s;
}

@keyframes openCartoon {
    from {
        left: 0rem;
        top: 0rem;
    }
    to {
        left: 0rem;
        top: 8rem;
    }
}

@-webkit-keyframes openCartoon {
    from {
        left: 0rem;
        top: 0rem;
    }
    to {
        left: 0rem;
        top: 8rem;
    }
}

.open-Main-Menu .Icons-Game {
    left: -6.9rem;
    top: 4rem;
    opacity: 1;
    animation: openGame 1s;
    -webkit-animation: openGame 1s;
}

@keyframes openGame {
    from {
        left: 0rem;
        top: 0rem;
    }
    to {
        left: -6.9rem;
        top: 4rem;
    }
}

@-webkit-keyframes openGame {
    from {
        left: 0rem;
        top: 0rem;
    }
    to {
        left: -6.9rem;
        top: 4rem;
    }
}

.open-Main-Menu .Icons-Other {
    left: -6.9rem;
    top: -4rem;
    opacity: 1;
    animation: openOther 1s;
    -webkit-animation: openOther 1s;
}

@keyframes openOther {
    from {
        left: 0rem;
        top: 0rem;
    }
    to {
        left: -6.9rem;
        top: -4rem;
    }
}

@-webkit-keyframes openOther {
    from {
        left: 0rem;
        top: 0rem;
    }
    to {
        left: -6.9rem;
        top: -4rem;
    }
}

.Main-Menu {
    position: fixed;
    right: 10rem;
    bottom: 10rem;
    line-height: 6rem;
    z-index: 1050;
    margin-right: 1.65rem;
    margin-bottom: 6rem;
}

.lanren {
    position: absolute;
    width: 3.3rem;
    height: 6rem;
    color: white;
    font-size: 1rem;
}

.lanren::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    left: -1.75rem;
    top: 0;
    border-top: 3rem solid transparent;
    border-bottom: 3rem solid transparent;
}

.lanren::before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: -1.75rem;
    top: 0;
    border-top: 3rem solid transparent;
    border-bottom: 3rem solid transparent;
}

.Icons-Other {
    background-color: #95D34E;
}

.Icons-Game {
    background-color: #345FE0;
}

.Icons-Cartoon {
    background-color: #2AB6CE;
}

.Icons-Fiction {
    background-color: #95D34E;
}

.Icons-Audio {
    background-color: #355FDE;
}

.Icons-Video {
    background-color: #29B6CE;
}

.Icons-IP {
    background-color: #19274D;
}

.Icons-IP::after {
    border-right: 1.75rem solid #19274D;
}

.Icons-IP::before {
    border-left: 1.75rem solid #19274D;
}

.Icons-Other::after {
    border-right: 1.75rem solid #95D34E;
}

.Icons-Game::after {
    border-right: 1.75rem solid #345FE0;
}

.Icons-Cartoon::after {
    border-right: 1.75rem solid #2AB6CE;
}

.Icons-Fiction::after {
    border-right: 1.75rem solid #95D34E;
}

.Icons-Audio::after {
    border-right: 1.75rem solid #355FDE;
}

.Icons-Video::after {
    border-right: 1.75rem solid #29B6CE;
}

.Icons-Other::before {
    border-left: 1.75rem solid #95D34E;
}

.Icons-Game::before {
    border-left: 1.75rem solid #345FE0;
}

.Icons-Cartoon::before {
    border-left: 1.75rem solid #2AB6CE;
}

.Icons-Fiction::before {
    border-left: 1.75rem solid #95D34E;
}

.Icons-Audio::before {
    border-left: 1.75rem solid #355FDE;
}

.Icons-Video::before {
    border-left: 1.75rem solid #29B6CE;
}


/* Color classes */

.bg-black {
    background-color: #212221;
}

.bg-charcoal {
    background-color: #58595b;
}

.bg-gray {
    background-color: #767676;
}

.bg-graystroke {
    background-color: #e6e7e8;
}

.bg-grayfill {
    background-color: #f8f8f9;
}

.bg-bluedark {
    background-color: #075484;
}

.bg-blue {
    background-color: #007dbc;
}

.bg-bluebright {
    background-color: #29abe2;
}

.bg-bluelite {
    background-color: #77d5f3;
}

.bg-bluefill {
    background-color: #caeefa;
}

.bg-bluenavbar {
    background-color: #ddf4fc;
}

.bg-greendark {
    background-color: #228a43;
}

.bg-green {
    background-color: #16a44a;
}

.bg-greenbright {
    background-color: #6fbe44;
}

.bg-greenlite {
    background-color: #9ccb3e;
}

.bg-red {
    background-color: #c32026;
}

.bg-orange {
    background-color: #ed7a23;
}

.bg-orangebright {
    background-color: #fbc62c;
}

.bg-yellow {
    background-color: #fedd0e;
}

.bg-yellowlite {
    background-color: #f3ea27;
}

.bg-purpledark {
    background-color: #935093;
}

.bg-purple {
    background-color: #af77ae;
}

.bg-fuscia {
    background-color: #f05566;
}

.bg-pink {
    background-color: #eb6f92;
}

.border-black {
    border-color: #212221;
}

.border-charcoal {
    border-color: #58595b;
}

.border-gray {
    border-color: #767676;
}

.border-graystroke {
    border-color: #e6e7e8;
}

.border-grayfill {
    border-color: #f8f8f9;
}

.border-bluedark {
    border-color: #075484;
}

.border-blue {
    border-color: #007dbc;
}

.border-bluebright {
    border-color: #29abe2;
}

.border-bluelite {
    border-color: #77d5f3;
}

.border-bluefill {
    border-color: #caeefa;
}

.border-greendark {
    border-color: #228a43;
}

.border-green {
    border-color: #16a44a;
}

.border-greenbright {
    border-color: #6fbe44;
}

.border-greenlite {
    border-color: #9ccb3e;
}

.border-red {
    border-color: #c32026;
}

.border-orange {
    border-color: #ed7a23;
}

.border-orangebright {
    border-color: #fbc62c;
}

.border-yellow {
    border-color: #fedd0e;
}

.border-yellowlite {
    border-color: #f3ea27;
}

.border-purpledark {
    border-color: #935093;
}

.border-purple {
    border-color: #af77ae;
}

.border-fuscia {
    border-color: #f05566;
}

.border-pink {
    border-color: #eb6f92;
}

.text-black {
    color: #212221;
}

.text-charcoal {
    color: #58595b;
}

.text-gray {
    color: #767676;
}

.text-graystroke {
    color: #e6e7e8;
}

.text-grayfill {
    color: #f8f8f9;
}

.text-bluedark {
    color: #075484;
}

.text-blue {
    color: #007dbc;
}

.text-bluebright {
    color: #29abe2;
}

.text-bluelite {
    color: #77d5f3;
}

.text-bluefill {
    color: #caeefa;
}

.text-greendark {
    color: #228a43;
}

.text-green {
    color: #16a44a;
}

.text-greenbright {
    color: #6fbe44;
}

.text-greenlite {
    color: #9ccb3e;
}

.text-red {
    color: #c32026;
}

.text-orange {
    color: #ed7a23;
}

.text-orangebright {
    color: #fbc62c;
}

.text-yellow {
    color: #fedd0e;
}

.text-yellowlite {
    color: #f3ea27;
}

.text-purpledark {
    color: #935093;
}

.text-purple {
    color: #af77ae;
}

.text-fuscia {
    color: #f05566;
}

.text-pink {
    color: #eb6f92;
}


/* Default to white text: */

.bg-black,
.bg-charcoal,
.bg-gray,
.bg-bluedark,
.bg-blue,
.bg-greendark,
.bg-green,
.bg-red,
.bg-orange,
.bg-purpledark,
.bg-purple,
.bg-fuscia,
.bg-pink {
    color: white;
}


/* Size classes */

.text-size9 {
    font-size: .45rem !important;
}

.text-size10 {
    font-size: .5rem !important;
}

.text-size11 {
    font-size: .55rem !important;
}

.text-size12 {
    font-size: .6rem !important;
}

.text-size13 {
    font-size: .65rem !important;
}

.text-size14 {
    font-size: .7rem !important;
}

.text-size15 {
    font-size: .75rem !important;
}

.text-size16 {
    font-size: .8rem !important;
}

.text-size17 {
    font-size: .85rem !important;
}

.text-size18 {
    font-size: .9rem !important;
}

.text-size19 {
    font-size: .95rem !important;
}

.text-size20 {
    font-size: 1rem !important;
}

.text-size21 {
    font-size: 1.05rem !important;
}

.text-size22 {
    font-size: 1.1rem !important;
}

.text-size24 {
    font-size: 1.2rem !important;
}

.text-size25 {
    font-size: 1.2.5rem !important;
}

.text-size26 {
    font-size: 1.3rem !important;
}

.text-size28 {
    font-size: 1.4rem !important;
}

.text-size30 {
    font-size: 1.5rem !important;
}

.text-size32 {
    font-size: 1.6rem !important;
}

.border-radius1 {
    border-radius: .05rem !important;
}

.border-radius2 {
    border-radius: .1rem !important;
}

.border-radius3 {
    border-radius: .15rem !important;
}

.border-radius4 {
    border-radius: .2rem !important;
}

.border-radius5 {
    border-radius: .25rem !important;
}

.margin-top0 {
    margin-top: 0rem !important;
}

.margin-top1 {
    margin-top: .05rem !important;
}

.margin-top2 {
    margin-top: .1rem !important;
}

.margin-top3 {
    margin-top: .15rem !important;
}

.margin-top4 {
    margin-top: .2rem !important;
}

.margin-top5 {
    margin-top: .25rem !important;
}

.margin-top6 {
    margin-top: .3rem !important;
}

.margin-top7 {
    margin-top: .35rem !important;
}

.margin-top8 {
    margin-top: .4rem !important;
}

.margin-top9 {
    margin-top: .45rem !important;
}

.margin-top10 {
    margin-top: .5rem !important;
}

.margin-top15 {
    margin-top: .75rem !important;
}

.margin-top20 {
    margin-top: 1rem !important;
}

.margin-top30 {
    margin-top: 1.5rem !important;
}

.margin-top50 {
    margin-top: 2.5rem !important;
}

.margin-bottom0 {
    margin-bottom: 0rem !important;
}

.margin-bottom1 {
    margin-bottom: .05rem !important;
}

.margin-bottom2 {
    margin-bottom: .1rem !important;
}

.margin-bottom3 {
    margin-bottom: .15rem !important;
}

.margin-bottom4 {
    margin-bottom: .2rem !important;
}

.margin-bottom5 {
    margin-bottom: .25rem !important;
}

.margin-bottom6 {
    margin-bottom: .3rem !important;
}

.margin-bottom7 {
    margin-bottom: .35rem !important;
}

.margin-bottom8 {
    margin-bottom: .4rem !important;
}

.margin-bottom9 {
    margin-bottom: .45rem !important;
}

.margin-bottom10 {
    margin-bottom: .5rem !important;
}

.margin-bottom15 {
    margin-bottom: .75rem !important;
}

.margin-bottom20 {
    margin-bottom: 1rem !important;
}

.margin-bottom30 {
    margin-bottom: 1.5rem !important;
}

.margin-bottom50 {
    margin-bottom: 2.5rem !important;
}

.margin-left0 {
    margin-left: 0rem !important;
}

.margin-left1 {
    margin-left: .05rem !important;
}

.margin-left2 {
    margin-left: .1rem !important;
}

.margin-left3 {
    margin-left: .15rem !important;
}

.margin-left4 {
    margin-left: .2rem !important;
}

.margin-left5 {
    margin-left: .25rem !important;
}

.margin-left6 {
    margin-left: .3rem !important;
}

.margin-left7 {
    margin-left: .35rem !important;
}

.margin-left8 {
    margin-left: .4rem !important;
}

.margin-left9 {
    margin-left: .45rem !important;
}

.margin-left10 {
    margin-left: .5rem !important;
}

.margin-left15 {
    margin-left: .75rem !important;
}

.margin-left20 {
    margin-left: 1rem !important;
}

.margin-left30 {
    margin-left: 1.5rem !important;
}

.margin-left50 {
    margin-left: 2.5rem !important;
}

.margin-right0 {
    margin-right: 0rem !important;
}

.margin-right1 {
    margin-right: .05rem !important;
}

.margin-right2 {
    margin-right: .1rem !important;
}

.margin-right3 {
    margin-right: .15rem !important;
}

.margin-right4 {
    margin-right: .2rem !important;
}

.margin-right5 {
    margin-right: .25rem !important;
}

.margin-right6 {
    margin-right: .3rem !important;
}

.margin-right7 {
    margin-right: .35rem !important;
}

.margin-right8 {
    margin-right: .4rem !important;
}

.margin-right9 {
    margin-right: .45rem !important;
}

.margin-right10 {
    margin-right: .5rem !important;
}

.margin-right15 {
    margin-right: .75rem !important;
}

.margin-right20 {
    margin-right: 1rem !important;
}

.margin-right30 {
    margin-right: 1.5rem !important;
}

.margin-right50 {
    margin-right: 2.5rem !important;
}

.padding-top0 {
    padding-top: 0rem !important;
}

.padding-top5 {
    padding-top: .25rem !important;
}

.padding-top10 {
    padding-top: .5rem !important;
}

.padding-top15 {
    padding-top: .75rem !important;
}

.padding-top20 {
    padding-top: 1rem !important;
}

.padding-top30 {
    padding-top: 1.5rem !important;
}

.padding-top50 {
    padding-top: 2.5rem !important;
}

.padding-bottom0 {
    padding-bottom: 0rem !important;
}

.padding-bottom5 {
    padding-bottom: .25rem !important;
}

.padding-bottom10 {
    padding-bottom: .5rem !important;
}

.padding-bottom15 {
    padding-bottom: .75rem !important;
}

.padding-bottom20 {
    padding-bottom: 1rem !important;
}

.padding-bottom30 {
    padding-bottom: 1.5rem !important;
}

.padding-bottom50 {
    padding-bottom: 2.5rem !important;
}

.padding-left0 {
    padding-left: 0rem !important;
}

.padding-left5 {
    padding-left: .25rem !important;
}

.padding-left10 {
    padding-left: .5rem !important;
}

.padding-left15 {
    padding-left: .75rem !important;
}

.padding-left20 {
    padding-left: 1rem !important;
}

.padding-left30 {
    padding-left: 1.5rem !important;
}

.padding-left50 {
    padding-left: 2.5rem !important;
}

.padding-right0 {
    padding-right: 0rem !important;
}

.padding-right5 {
    padding-right: .25rem !important;
}

.padding-right10 {
    padding-right: .5rem !important;
}

.padding-right15 {
    padding-right: .75rem !important;
}

.padding-right20 {
    padding-right: 1rem !important;
}

.padding-right30 {
    padding-right: 1.5rem !important;
}

.padding-right50 {
    padding-right: 2.5rem !important;
}

.overflow-x-hidden {
    overflow-x: hidden !important;
}

.overflow-x-scroll {
    overflow-x: scroll !important;
}

.overflow-x-visible {
    overflow-x: visible !important;
}

.overflow-y-hidden {
    overflow-y: hidden !important;
}

.overflow-y-scroll {
    overflow-y: scroll !important;
}

.overflow-y-visible {
    overflow-y: visible !important;
}

.border-none {
    border: none !important;
}

.border-top-none {
    border-top: none !important;
}

.border-left-none {
    border-left: none !important;
}

.border-right-none {
    border-right: none !important;
}

.border-bottom-none {
    border-bottom: none !important;
}