.game-item {
    display: inline-block;
    border-radius: 4px;
    cursor: pointer;
    height: 97px;
    width: 135px;
    min-width: 135px;
    min-height: 97px;
    overflow: hidden
}

.game-fale-icon, .game-false {
    border-radius: 0 !important
}

.game-false {
    width: 100% !important;
    height: 84px !important;
    min-width: 100% !important;
    min-height: 84px !important
}

.game-style {
    width: 107px !important
}

.game-style-color {
    background-color: #2f1f5d
}

.game-item-div {
    position: relative;
    border-radius: 10px;
    -webkit-box-align: left;
    -webkit-align-items: left;
    -moz-box-align: left;
    align-items: left;
    cursor: pointer
}

.game-item-icon {
    border-radius: 5px;
    position: absolute;
    -o-object-fit: cover;
    object-fit: cover
}

.game {
    -webkit-transition: .2s;
    transition: .2s;
    text-align: left;
    color: #e7e6ba;
    width: 100%;
    overflow: hidden
}

.game-min {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    width: 111px !important;
    min-width: 111px !important;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    background-color: #2f1f5d
}

.game-bottom {
    font: 700 14px Open Sans, Arial, Helvetica, sans-serif !important;
    margin: 0;
    overflow: hidden;
    width: 135px;
    white-space: nowrap;
    text-overflow: ellipsis
}

.game-bottom-play {
    font-size: 11px;
    margin-top: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex
}

.game-bottom-favorites {
    cursor: pointer;
    margin-left: 10px
}

@media (max-width: 540px) {
    .game-item {
        height: 50px
    }
}

.right {
    color: #e7e6ba;
    font-size: 10px;
    text-align: center
}

.right p {
    margin: 0;
    line-height: 1.5
}

.footer {
    overflow: hidden;
    height: 28px;
    color: #e7e6ba;
    font-size: 9px;
    line-height: 28px;
    text-align: center;
    background-color: #2f1f5d
}

.footer a {
    margin: 0 8px
}

.back-top {
    position: fixed;
    z-index: 4;
    bottom: 86px;
    right: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 2px 0 5px rgba(0, 0, 0, .3);
    background: #e7e6ba url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAAXNSR0IArs4c6QAACKpJREFUeF7tnV2MHEcRx6v2LMEDZwke4AEe4AFe8hJ19d7J8QMXERABZIOxA47jcEeIQkgQIV9AgBADARJIgoCAxUf4cAjYfJMA+ZI5hFDw3fSczIeFkEwkEFKCxAMGdFi+3UJtLWAfvt3ZmeqZ7p0ayVr5tvtfVf/6ec53292DoFerHcBWV6/FgwLQcggUAAWg5Q60vHy9AygALXeg5eXrHUABGO4AEXHLPUq5/EXn3IXDChh5B1AAUu4/KABJt6968gpAdQ+TVlAAkm5f9eQVgOoeJq2gACTdvurJKwDVPUxaQQFIun3Vk1cAqnuYtIICkHT7qievAFT3MGkFBSDp9lVPXgGo7mHSCgpA0u2rnrwCUN3DpBWqA2CM+QDAWauH/foA/zHyf17XO7TR+2euKzjX/FDvj9JNusOjks/z/LZhY0auBxgVQN9P2wEFIO3+Vc5eAahsYdoCrQbAGHPJ5s2bf7i4uPivtNtYPvvWAmCM2YOI9yPig51OZ2Fpaemv5W1Md2YrATDGzCPil89o2+FOpzO/vLz8p3RbWS7z1gFgjLkSET9/Drt+CQALzrnflbMyzVmtAoCI3gYA9w5p1a+ZeSHPc5dmO8fPujUAGGOuQ8R7Clj0B2aez/P85wXGJj+kFQAYY25CxDvH6NZTgzvBw2PMSXLoxANgjLkFEW8v0Z2/I+JClmXfKTE3mSkTDYD/HAMRh/4ufESn+og4n2XZgWQ6OmaiEwuAMebDiPjeMf3YaPjVzrn9QlpRyUwkAMaYOxDxZmGnb3TO3SWs2bjcxAFgjLkbEd8ZyNlbnXMfCqTdiOxEAWCM+TQiXhvYyTucc+8OHKM2+YkBwBizHxGvqsM5Zv5MnudvryNW6BgTAYAx5kuI+ObQZp2pz8z35Xl+RZ0xQ8RKHgBjzNcQcW8Ic0ZpIuLBLMt2D5bHjRoe5ftJA2CM+QYivrFhZx9aXV3dfezYsX80nEep8EkCsGvXrqnjx48fRMTXl6paftLhTZs2XXrkyJGn5aXDKiYHwNzc3DNPnDjhm78trDVjqx8BgD3OueNjz2xwQlIAbN26dXp1ddU3/+IGPRsW+jfMvCfP819Fmt//pZUMAFu2bHnOyZMnffMvitzcJ/v9/p6VlZUnIs/zdHpJADA7O/u8U6dO+ea/NAVTAeDpTqdz2fLy8uOx5xs9ALOzsy8YNP+C2M1cl5//qWCvc+77MecdNQAzMzMvWltb8//yuzGbOCQ3Zua9eZ5/Pdb8owVgZmbmJb1e7yAAnB+reUXzYuar8jw/10LUohLBxkUJQLfbPa/f7/vmnxes8vqFb3DO3V1/2OERowOg2+2e3+v1DiHii2MzSyCf6D5OjgqAbrfb7ff7hwDghQJmxyoR1cfJ0QDQ7XYvGDT/+bF2TiovRLw3y7LQ6xYKpRsFANbaOWb23/OfWyjrCRjkt6ZlWVbrR9jnsq1xAKy1Lx80/9kT0NdxSzjknHvDuJMkxzcKgLX2VYPmP0uyqMS0fjQ9Pf3axcXFtSbybgwAa+32QfOf0UThkcX8KQC8zjn3t7rzagQAa+3OQfM7dRcccbyltbW1HUePHv1znTnWDoC1djczP1BnkQnF+u3U1NSOpaWl39eVc60AWGsvZ+av1lVconGe9CudsixbqSP/2gCw1l7BzF+so6gJiPEXZt5Zxxb1WgAgorcCwOcmoDF1lvDPAQRBt6gHB4CI/AaKT9Xp3ATFYkTcFXKLelAAiOh6AJi4DZUNADbvnAvyf6dgABDRuwDgYw2YNakhr3HOfVa6uCAAENH7AGCidtFKG19Gj5lvzvP842XmbjRHHAAi2gcAt0omqVr/cwAR92VZVuXUk7PsFAWAiD4CAO/RhgV34C7n3I0SUcQAICJ/axJJSqKwFmjsd85dXbVOEQCI6JMA8I6qyej88Rxg5gN5nl8+3qyzR1cGgIj8yZv+BE69mnHge865HWVDVwKAiPxS5yvLBtd5Yg48Oj09vb3MsfelASAif9r2vFgJKlTVgV9MTU1tH/fY+1IAENH9fit01Yx1vrgDRwFgm3Puj0WVxwaAiJpavDlXtKgYxjHzPkTsIWKfmfsAcPrV/32jr/X7/X6n0/Ev/x23/mvMfFrT/1n/np/b6/V8nKdWVlaOFfFhbACKiEqPSfGXSx6AUY9sk/apjF4qAHwQAN5fpsCm5igAgs4Ln/srmNnGUgqAoM3W2tuZ+RZByeBSCoCgxUT0UQBI6nhWBUAWAL+uwK8vSOZSAARbZa29k5lvEpQMLqUACFpMRJ8AgBsEJYNLKQCCFhORX1fo1xcmcykAgq2y1t7DzNcJSgaXUgAELU5xvYECIAuA31eQ1AMaFABBAGp6FIxgxgAKgKCdKa46UgBkAfD7Cv3+wmQuBUCwVXU+EEoqbQVAykkASHHtoQIgC8AXAOAtgpLBpRQAQYubeCxc1fQVgKoOnjHfWnsfMy8ISgaXUgAELSairwDAmwQlg0spAIIWE5E/HKHSFijBdApJKQCFbCo2yFp7gJkvKzY6jlEKgGAfiMg/cuVSQcngUgqAoMVE5A+W9M/oTeZSAARbZa39JjM3eqr2uOUoAOM6NmT8YDvaJYKSwaUUAEGLiehbALBTUDK4lAIgaLEx5tsRPSm8UGUKQCGbig0iou/68/SLjY5jlAIg2Aci8o9f3S4oGVxKARC02BjzA0TcJigZXEoBELSYiB4EgNcISgaXUgAELSaihwDg1YKSwaUUAEGLjTE/RsSLBSWDSykAghZba3/CzK8UlAwuxcy35Xnuz02O+krliJhHAOAVUTu5LjkFQLBbxpjHEPEiQcngUvotQNBia+3jzPwyQcngUgqAoMVEdBgALhSUDC6lAAhaTET+0apJXcz8Mz0nMKmWtTPZJH4KaGdr6qlaAajH52ijKADRtqaexBSAenyONooCEG1r6klMAajH52ijKADRtqaexP4Ny9SPrhi/Aj8AAAAASUVORK5CYII=) no-repeat 50%/20px
}

.dialog-main[data-v-522b7c08] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    z-index: 0
}

.dialog-body[data-v-522b7c08], .dialog-main[data-v-522b7c08] {
    position: fixed;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    justify-items: center
}

.dialog-body[data-v-522b7c08] {
    min-width: 300px;
    max-width: 430px;
    min-height: 168px;
    color: #00335e;
    background: #e7e6ba;
    border-radius: 6px;
    z-index: 99;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 10px;
    width: 80%
}

.msg-box-title[data-v-522b7c08] {
    padding: 5px 0;
    font-size: 16px;
    font-weight: lighter;
    color: #00335e;
    width: 100%;
    border-bottom: 1px solid #cc9512
}

.msg-box-container[data-v-522b7c08] {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: #00335e;
    padding: 10px 0 0;
    line-height: 22px;
    font-size: 15px
}

.msg-box-image[data-v-522b7c08] {
    margin: 0 5px 0 0;
    display: block;
    float: left;
    height: 75px;
    width: 75px
}

.ms-box-buttons[data-v-522b7c08] {
    display: inline-block;
    width: 100%;
    text-align: right
}

.ms-bottom[data-v-522b7c08] {
    cursor: pointer;
    margin: 2px;
    height: 35px;
    width: 90px;
    border: 1px solid #afafaf;
    background-color: #cc9512;
    color: #e7e6ba;
    border-radius: 6px;
    outline: none
}

.play-item {
    display: inline-block;
    border-radius: 4px;
    cursor: pointer;
    width: 83px;
    height: 73px;
    min-width: 83px;
    min-height: 73px;
    overflow: hidden
}

.play-false-icon {
    border-radius: 0 !important
}

.play-style {
    position: relative;
    top: 4px;
    font-size: 16px !important;
    color: #e7e6ba;
    font-weight: 500
}

.play-false {
    border-radius: 0 !important;
    width: 152px !important;
    height: 86px !important;
    min-width: 152px !important;
    min-height: 86px !important
}

.play-item-div {
    position: relative;
    -webkit-box-align: left;
    -webkit-align-items: left;
    -moz-box-align: left;
    align-items: left;
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    padding: 0 0 3px
}

.play-item-icon {
    border-radius: 5px;
    position: absolute;
    -o-object-fit: cover;
    object-fit: cover
}

.play {
    -webkit-transition: .2s;
    transition: .2s;
    text-align: left;
    color: #e7e6ba;
    width: 100%;
    overflow: hidden;
    padding-left: 5px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center
}

.play, .play-min {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex
}

.play-min {
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    -moz-box-align: baseline;
    align-items: baseline;
    background-color: #2f1f5d
}

.play-bottom {
    font: 700 16px Open Sans, Arial, Helvetica, sans-serif !important;
    margin: 0;
    overflow: hidden;
    width: 180px;
    white-space: nowrap;
    text-overflow: ellipsis
}

.play-bottom-play {
    font-size: 11px;
    margin-top: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex
}

.play-bottom-favorites {
    cursor: pointer;
    margin-left: 10px
}

.game-play-star {
    height: 20px;
    line-height: 20px;
    margin-top: 15px;
    color: #e7e6ba;
    text-shadow: 0 1px 4px #000
}

.game-play-star, .game-play-text {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex
}

.game-play-text {
    font-size: 12px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    padding-left: 6px
}

.play-bottom-clat {
    margin: 0;
    position: relative;
    top: 10px;
    min-height: 30px;
    height: 30px;
    font-size: 12px;
    font-weight: 600;
    color: #e7e6ba;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-family: keep_calm_medregular
}

.games-items {
    display: inline-block;
    cursor: pointer;
    height: 166px;
    width: 318px;
    min-width: 318px;
    min-height: 166px;
    overflow: hidden
}

.games-false {
    width: 55%;
    border-radius: 10px 0 0 10px;
    border-right: 2px solid #e7e6ba
}

.game-items-div {
    overflow: hidden;
    width: 605px;
    height: 166px;
    background-color: #34333b
}

.game-items-div, .games-flxe {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex
}

.games-flxe {
    border-radius: 10px;
    background-color: #2f1f5d
}

.game-items-icon {
    position: absolute;
    -o-object-fit: cover;
    object-fit: cover
}

.games {
    position: relative;
    width: 280px;
    height: 144px;
    font-size: 12px;
    float: right;
    margin-right: 5px;
    text-align: left
}

.games-bottom {
    font-weight: 700;
    font-size: 1.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    color: #e7e6ba;
    width: 140px
}

.sliderText {
    color: #e7e6ba;
    font-size: 16px;
    margin: 10px 0;
    font-family: DebussyRegular, sans-serif;
    letter-spacing: .5px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 18px;
    text-align: left;
    padding-left: 6px
}

.sliderText-p {
    line-height: 12px;
    margin: 18px 0;
    padding-left: 6px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden
}

.btn {
    display: inline-block;
    font-weight: 700;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 1rem;
    -webkit-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    font-family: fantasy;
    text-transform: uppercase;
    text-shadow: -2px -2px 0 #cc9512, 2px -2px 0 #cc9512, -2px 2px 0 #cc9512, 2px 2px 0 #cc9512;
    letter-spacing: .75px;
    color: #e7e6ba;
    background-color: #e7e6ba;
    position: relative;
    top: 0;
    left: 6px
}

.btn:hover {
    background-color: #d58000
}

.fa-angle-right:before {
    content: ">"
}

.xtx-carousel[data-v-20b8fc5e] {
    width: 100%;
    height: 100%;
    min-width: 300px;
    min-height: 150px;
    position: relative
}

.xtx-carousel:hover .carousel-btn[data-v-20b8fc5e] {
    opacity: 1
}

.carousel-body[data-v-20b8fc5e] {
    width: 100%;
    height: 100%;
    margin: 0
}

.carousel-body li[data-v-20b8fc5e] {
    list-style: none
}

.carousel-item[data-v-20b8fc5e] {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    -webkit-transition: opacity .5s linear;
    transition: opacity .5s linear
}

.fade[data-v-20b8fc5e] {
    opacity: 1;
    z-index: 1
}

.mo-over-title[data-v-2143bafe] {
    max-width: unset;
    min-width: 340px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    height: 115px;
    margin-top: 20px;
    padding: 0 10px
}

.mo-over[data-v-2143bafe] {
    max-width: unset;
    min-width: 340px;
    margin-top: 20px;
    padding: 0
}

.mo-over-h2[data-v-2143bafe] {
    background: #e7e6ba;
    font-size: 20px;
    color: #e7e6ba;
    margin: 0;
    text-align: center;
    font-family: DebussyRegular, Arial, sans-serif;
    letter-spacing: .75px;
    padding: 8px 0;
    border-radius: 4px 4px 0 0;
    text-shadow: -2px -2px 0 #cc9512, 2px -2px 0 #cc9512, -2px 2px 0 #cc9512, 2px 2px 0 #cc9512
}

.mo-over-div[data-v-2143bafe] {
    padding: 0;
    border-radius: 10px;
    background-color: #16202c;
    padding-bottom: 7px
}

.mo-over-div-1[data-v-2143bafe] {
    background-color: #2f1f5d;
    margin-bottom: 10px
}

.mo-over-g[data-v-2143bafe] {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    grid-auto-flow: row dense;
    width: 357px;
    row-gap: 12px;
    -webkit-column-gap: 12px;
    -moz-column-gap: 12px;
    column-gap: 12px;
    margin: 10px auto 0;
    padding-bottom: 12px
}

.pop-cat-item[data-v-2143bafe] {
    background-color: #000;
    height: 75px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    border-radius: 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    min-height: 62px;
    padding: 9px 25px 9px 10px;
    position: relative;
    text-decoration: none
}

.mo-bottom[data-v-2143bafe] {
    background: #2abffd;
    border-radius: 10px;
    color: #060d19;
    display: block;
    height: 45px;
    padding: 10px 15px;
    text-align: center;
    font-family: Proxima-Soft-Bold;
    font-weight: 600;
    margin-top: 20px
}

.center-over[data-v-2143bafe] {
    padding: 25px 10px 10px;
    margin: 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    margin-top: 20px;
    border-radius: 10px 10px 0 0;
    color: #e7e6ba
}

.icon-angle-right[data-v-2143bafe] {
    border-right: 3px solid;
    border-top: 3px solid;
    content: "";
    display: inline-block;
    height: 10px;
    -webkit-transform: rotate(45deg) scale(1.1);
    transform: rotate(45deg) scale(1.1);
    -webkit-transform-origin: top;
    transform-origin: top;
    width: 10px;
    margin-top: 3px;
    position: relative;
    top: .1rem
}

.gird-game-list[data-v-2143bafe] {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    grid-auto-flow: row dense;
    grid-gap: 20px;
    width: 600px
}

.hover-over:hover .header-center[data-v-2143bafe] {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.hover-over:hover .hover-over1[data-v-2143bafe] {
    color: #29bffd !important
}

.homemd1-title-class[data-v-2143bafe] {
    z-index: 1;
    display: inline;
    padding: 5px 16px;
    font-size: 15px;
    margin-left: 40px;
    color: #e7e6ba;
    font-family: fantasy;
    text-shadow: -2px -2px 0 #cc9512, 2px -2px 0 #cc9512, -2px 2px 0 #cc9512, 2px 2px 0 #cc9512
}

.homemd1-title-class[data-v-2143bafe]:hover {
    border-radius: 10px;
    background: #e7e6ba
}

.homemd1[data-v-2143bafe] {
    width: 370px;
    min-height: 500px;
    margin-right: 24px
}

.homemd3[data-v-2143bafe] {
    width: 300px;
    margin-bottom: 20px
}

.homemd4[data-v-2143bafe] {
    width: 605px;
    padding-right: 24px;
    margin-top: 24px
}

.homemd1-title[data-v-2143bafe] {
    z-index: 1;
    background: #e7e6ba;
    display: inline;
    padding: 2px 16px;
    border: 4px solid #2f1f5d;
    font-size: 20px;
    margin-left: 40px;
    color: #e7e6ba;
    font-family: fantasy;
    letter-spacing: .75px;
    line-height: 1.4;
    position: relative;
    top: 12px;
    border-radius: 4px;
    text-shadow: -2px -2px 0 #cc9512, 2px -2px 0 #cc9512, -2px 2px 0 #cc9512, 2px 2px 0 #cc9512
}

.swiper-div[data-v-2143bafe] {
    width: 605px;
    border: 1px solid #2f1f5d;
    margin: 10px 28px 24px auto;
    border-radius: 4px;
    background-color: #34333b
}

.topTitle[data-v-2143bafe] {
    background: #e7e6ba;
    font-size: 20px;
    color: #e7e6ba;
    text-align: center;
    font-family: fantasy;
    letter-spacing: .75px;
    padding: 8px 0;
    border-radius: 4px 4px 0 0;
    text-shadow: -2px -2px 0 #cc9512, 2px -2px 0 #cc9512, -2px 2px 0 #cc9512, 2px 2px 0 #cc9512
}

.cate-div[data-v-2143bafe] {
    padding: 0;
    margin: 0;
    color: #e6e2dd;
    background-color: #2f1f5d
}

.bottom-title[data-v-2143bafe] {
    background-color: #34333b;
    border-radius: 0 0 4px 4px;
    height: 33px;
    margin-top: -3px
}

.bottom-title-text[data-v-2143bafe] {
    cursor: pointer;
    color: #eb9502;
    text-align: center;
    font-size: 14px;
    line-height: 33px
}

.category_header[data-v-2143bafe] {
    font-family: fantasy;
    font-size: 2em;
    font-weight: 400;
    color: #e7e6ba;
    line-height: 1;
    padding-left: 20px;
    margin: 10px 0;
    text-align: center
}

@media (max-width: 1610px) {
    .grid[data-v-2143bafe] {
        width: 1440px
    }
}

@media (max-width: 1445px) {
    .grid[data-v-2143bafe] {
        width: 1270px
    }

    .large-adv-card[data-v-2143bafe] {
        overflow: hidden;
        position: relative;
        width: 100%
    }
}

@media (max-width: 1285px) {
    .grid[data-v-2143bafe] {
        width: 1120px
    }
}

::-webkit-scrollbar {
    display: none
}

@-webkit-keyframes playAmt {
    0% {
        -webkit-transform: translateX(-18px);
        transform: translateX(-18px)
    }
    to {
        -webkit-transform: translateX(-34px);
        transform: translateX(-34px)
    }
}

@keyframes playAmt {
    0% {
        -webkit-transform: translateX(-18px);
        transform: translateX(-18px)
    }
    to {
        -webkit-transform: translateX(-34px);
        transform: translateX(-34px)
    }
}

* {
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

#app, body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    color: #e7e6ba
}

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

img {
    max-width: 100%;
    height: 100%;
    color: transparent;
    vertical-align: bottom
}

body {
    margin: auto;
    font-family: Montserrat;
    background-color: #2f1f5d;
    overflow: auto
}

#app {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-direction: column
}

.heade-placeholder {
    position: relative;
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -moz-box-flex: 0;
    flex: none;
    width: 100%;
    height: 50px
}

.black_screen {
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 130%;
    background-color: #000;
    z-index: 9;
    opacity: .5
}

.mo-header-search {
    height: 100%;
    height: 72px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .4)
}

.header, .mo-header-search {
    width: 100%;
    background-color: #e7e6ba;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex
}

.header {
    height: 100%;
    height: 85px;
    width: 1270px;
    margin: 0 auto
}

.header-top {
    width: 1000px
}

.header-bottom, .header-top {
    height: 40px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center
}

.header-bottom {
    -webkit-box-pack: start;
    -webkit-justify-content: start;
    -moz-box-pack: start;
    justify-content: start;
    margin-left: -37px
}

.mo-header {
    width: 100%;
    height: 100%;
    height: 72px;
    background-color: #e7e6ba;
    text-align: center
}

.header-logo, .mo-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center
}

.header-logo {
    padding-left: 15px;
    -webkit-box-pack: left;
    -webkit-justify-content: left;
    -moz-box-pack: left;
    justify-content: left
}

.header-btns {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    height: 100%;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    width: 300px;
    -webkit-box-align: end;
    -webkit-align-items: end;
    -moz-box-align: end;
    align-items: end;
    -webkit-box-pack: end;
    -webkit-justify-content: end;
    -moz-box-pack: end;
    justify-content: end;
    position: relative;
    top: 18px
}

.header-searchover {
    padding-top: 5px;
    height: 65px;
    width: 60px
}

.logo-down-down {
    -webkit-animation: down_animation .8s ease-in-out .5s infinite;
    animation: down_animation .8s ease-in-out .5s infinite
}

.header-menu {
    margin-left: 0;
    margin-top: 120px;
    border-radius: 0 0 10px 10px;
    width: 100%;
    height: 0;
    background-color: #e7e6ba;
    position: absolute;
    z-index: 5;
    overflow-y: scroll;
    -webkit-transition: height .3s ease;
    transition: height .3s ease;
    -webkit-transform-origin: center top;
    transform-origin: center top
}

.menu-fade {
    height: 430px
}

.mobile-menu {
    background-color: #2f1f5d;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.mobile-menu-body {
    padding: 65px 15px 20px;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    margin: 15px
}

.menu-button {
    background-color: #cc9512;
    min-width: 42px;
    border-radius: 10px;
    height: 42px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    width: 42px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-transition: all .6s ease;
    transition: all .6s ease;
    margin-right: 10px;
    z-index: 999
}

.menu-button svg {
    display: block;
    width: 25px;
    height: 30px
}

.search-botm {
    background-color: #cc9512;
    min-width: 42px;
    height: 42px;
    border-radius: 10px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    margin-right: 10px
}

.menu-inside, .search-botm {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center
}

.menu-inside {
    margin-bottom: 10px;
    border-radius: 5px;
    font-weight: 700;
    font-size: 14px;
    padding: 20px;
    overflow: hidden;
    color: #e7e6ba
}

.m-menu-inside {
    margin-bottom: 40px;
    width: 100%
}

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

.m-menu-inside ul li {
    display: block
}

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

.header-action ul li {
    display: block
}

.show-all-categories-button {
    background: #001e4d;
    margin-bottom: 10px;
    border-radius: 5px;
    color: #e7e6ba;
    font-weight: 700;
    font-size: 14px;
    padding: 20px 15px;
    overflow: hidden;
    -webkit-box-pack: left;
    -webkit-justify-content: left;
    -moz-box-pack: left;
    justify-content: left;
    text-align: left
}

.show-all-categories-button, .show-all-categories-button a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center
}

.show-all-categories-button a {
    width: 100%
}

@-webkit-keyframes down_animation {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    50% {
        -webkit-transform: translateY(5px);
        transform: translateY(5px)
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes down_animation {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    50% {
        -webkit-transform: translateY(5px);
        transform: translateY(5px)
    }
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.menu-box {
    cursor: pointer
}

.menu {
    width: 24px;
    height: 3px;
    margin-bottom: 3px;
    border-radius: 3px;
    box-shadow: 1px 1px 3px #a0631c;
    background-color: #e7e6bade5
}

.menu-mb {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    white-space: nowrap;
    padding: 0;
    margin: 0
}

.menu-mb-li {
    float: left;
    list-style-type: none;
    position: relative;
    vertical-align: bottom;
    border-right: 1px solid #e68000;
    height: 39px;
    line-height: 39px;
    font-size: 17px;
    padding: 0 15px;
    cursor: pointer;
    text-shadow: -2px -2px 0 #cc9512, 0 -2px 0 #cc9512, -2px 0 0 #cc9512, 0 0 0 #cc9512;
    color: #e7e6ba;
    font-family: sans-serif;
    font-weight: 600
}

.menu-mb-li:hover {
    background: -webkit-gradient(linear, left top, left bottom, from(#ffda9c), to(#ffb543));
    background: -webkit-linear-gradient(#ffda9c, #ffb543);
    background: linear-gradient(#ffda9c, #ffb543)
}

.header-categories-box {
    display: none
}

.bottom-category {
    display: grid;
    grid-template-columns:repeat(auto-fill, 180px);
    grid-auto-flow: row dense;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    grid-gap: 20px;
    margin: 23px auto 0;
    grid-column-start: span 2
}

.categories-box {
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    flex-direction: column;
    list-style: none;
    padding: 0
}

.categories-box, .items {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal
}

.items {
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    flex-direction: row;
    cursor: pointer;
    color: #000;
    font-size: 19px;
    font-weight: 900;
    width: 100%;
    border-radius: 10px;
    text-align: left;
    -webkit-box-pack: left;
    -webkit-justify-content: left;
    -moz-box-pack: left;
    justify-content: left;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    -webkit-transition: all .6s ease;
    transition: all .6s ease
}

.header-menu-class-img {
    padding-left: 45px !important;
    background-repeat: no-repeat !important;
    background-size: 27px !important;
    background-position: .625rem !important
}

.items:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.search-box {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    flex: 1;
    max-width: 300px;
    margin: 0 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center
}

.search-input {
    width: 100%;
    height: 40px;
    margin-top: 5px;
    padding: 0 20px;
    padding-right: 35px;
    color: #000;
    border: none;
    border-radius: 999px;
    outline: none;
    border: 1px solid #cc9512
}

.flex-class {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    flex: 1
}

.search-icon {
    position: absolute;
    top: 55%;
    right: 0;
    background-color: #d58000;
    color: #e7e6ba;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    height: 40px;
    line-height: 40px;
    width: 40px;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    font-weight: 700;
    border-radius: 0 20px 20px 0;
    text-align: center
}

.custom-nav {
    height: 39px;
    border-radius: 8px;
    position: relative;
    z-index: 100
}

.search-item-box {
    position: absolute;
    z-index: 999;
    top: 100%;
    left: 10px;
    right: 10px;
    margin: 0;
    margin-top: 4px;
    padding: 10px 0;
    border-radius: 4px;
    box-shadow: 0 2px 8px #a9a9a9;
    color: #000;
    background-color: #e7e6ba;
    list-style-type: none
}

.search-item {
    display: block;
    padding: 5px 15px
}

.game-box-box {
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 21px 0 rgb(93 93 93/60%);
    margin-bottom: 5px
}

.game-box, .game-box-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    height: 200px;
    border-radius: 10px
}

.game-box {
    width: 100%;
    box-shadow: 0 12px 21px 0 rgba(0, 0, 0, .4);
    text-align: center;
    padding: 25px 10px 0;
    z-index: 2;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center
}

.game-box-bg {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 10px;
    width: 100%;
    height: 200px;
    -webkit-filter: blur(45px);
    filter: blur(45px);
    z-index: 1;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover
}

.game-icon {
    overflow: hidden;
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -moz-box-flex: 0;
    flex: none;
    display: inline-block;
    width: 140px;
    height: 140px;
    border-radius: 50%
}

.game-info {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    margin-left: 15px;
    color: #e7e6ba;
    line-height: 1.2
}

.game-name {
    color: #e7e6ba;
    font-size: 16px;
    font-weight: 300
}

.game-player {
    margin: 4px 0;
    font-size: 12px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex
}

.rating {
    color: #ffe019;
    margin-right: 10px
}

.play-btn {
    overflow: hidden;
    position: relative;
    z-index: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    width: 75%;
    height: 42px;
    margin: 10px auto;
    border-radius: 22px;
    color: #e7e6ba;
    -webkit-transition: width .5s linear;
    transition: width .5s linear;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .5)
}

.play-btn-progress {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #50136c
}

.play-btn-link {
    position: relative;
    z-index: 10;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    flex: 1;
    text-align: center
}

.play-amt {
    -webkit-animation: playAmt .3s infinite;
    animation: playAmt .3s infinite
}

.game-desc {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 12px;
    padding-bottom: 14px;
    border-radius: 5px;
    box-shadow: 0 3px 8px 0 rgba(31, 31, 31, .4);
    color: #e7e6ba;
    background-color: #3333
}

.game-desc p {
    overflow: hidden;
    display: -webkit-box;
    margin: 0;
    font-size: 12px;
    line-height: 1.7;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.game-desc p.more {
    -webkit-line-clamp: 9999
}

.game-desc-text {
    position: relative;
    width: 100%
}

.game-desc-text p {
    overflow: hidden;
    display: -webkit-box;
    margin: 0;
    font-size: 12px;
    line-height: 1.7;
    text-overflow: ellipsis;
    font-family: Roboto, sans-serif !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical
}

.game-desc-text p.more {
    -webkit-line-clamp: 9999
}

.game-info-more {
    position: absolute;
    left: 0;
    width: 100%;
    padding: 0 12px;
    font-size: 0;
    text-align: right
}

.front-recommend {
    color: #e7e6ba;
    padding: 10px 15px
}

.front-title {
    font-size: 15px
}

.recommend-title {
    padding: 0 10px
}

.recommend-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0 10px;
    margin-bottom: 9px
}

.recommend-list > .game-item {
    margin-right: 9px
}

.recommend-list > .game-item:nth-child(3n) {
    margin-right: 0
}

.card {
    width: 300px;
    min-height: 100%;
    margin: 0 auto;
    margin-top: 16px;
    padding: 12px;
    color: #e7e6ba;
    font-size: 10px;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    line-height: 1.8
}

.inline-flex {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: inline-flex
}

.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex
}

.flex-col {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    flex-direction: column
}

.justify-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center
}

.justify-between {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    justify-content: space-between
}

.items-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center
}

.flex-1 {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    flex: 1
}

.hidden {
    display: none !important
}

[id^=div-gpt-ad-] {
    text-align: center
}

.aspect-square {
    position: relative
}

.aspect-square > * {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden
}

.home-top-game-list {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    grid-gap: 10px;
    margin-bottom: 10px
}

.span-col-2 {
    grid-column: span 2/auto
}

.span-col-4 {
    grid-column: span 4/auto
}

.span-col-3 {
    grid-column: span 3/auto
}

.span-row-2 {
    grid-row: span 2/auto
}

.search-game-list {
    max-width: unset;
    min-width: 340px;
    margin-top: 20px;
    padding: 0 10px
}

.search-game-listpc {
    padding: 10px;
    margin: 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    border-radius: 10px 10px 0 0;
    color: #e7e6ba
}

.header-class {
    color: #e7e6ba;
    font-weight: 500;
    font-size: 13px
}

.header-class, .header-class-game {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center
}

.header-class-game {
    padding: 5px 15px;
    width: 160px;
    color: #000;
    background: #f5e765;
    background: -webkit-gradient(linear, left top, left bottom, from(#f5e765), color-stop(41%, #fad94d), to(#ffbe00));
    background: -webkit-linear-gradient(top, #f5e765, #fad94d 41%, #ffbe00);
    background: linear-gradient(180deg, #f5e765, #fad94d 41%, #ffbe00);
    border-bottom: 2px solid #c78f00;
    border-right: 1px solid #c78f00;
    border-top: .5px solid #f1b034;
    color: #654900
}

.header-class-game, .header-class-game1 {
    margin: 0 5px;
    cursor: pointer;
    border-radius: 10px;
    height: 45px;
    margin-top: 5px;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-box-pack: start;
    justify-content: flex-start;
    list-style-type: none;
    position: relative;
    vertical-align: bottom
}

.header-class-game1 {
    padding: 5px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    color: #e7e6ba;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.header-hover:hover {
    color: #654900
}

.header-hover:hover, .header-hovers:hover {
    background: -webkit-gradient(linear, left top, left bottom, from(#f1b034), color-stop(41%, #fb0), to(#fb0));
    background: -webkit-linear-gradient(top, #f1b034, #fb0 41%, #fb0);
    background: linear-gradient(180deg, #f1b034, #fb0 41%, #fb0);
    border-bottom: 2px solid #c78f00;
    border-right: 1px solid #c78f00;
    border-top: .5px solid #f1b034
}

.header-hovers:hover {
    color: #e7e6ba;
    box-shadow: 0 3px 0 #1d3752, 0 4px 0 #1d3752;
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px)
}

.header-center {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center
}

.header-action {
    position: absolute;
    top: 29px;
    display: none;
    margin-left: -15px;
    margin-top: 10px;
    height: 478px;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    overflow-y: auto
}

.header-action:hover, .header-center:hover .header-action {
    display: block
}

@media (max-width: 540px) {
    .header-menu {
        margin-top: 121px
    }

    .flex-class {
        display: none
    }

    .front-recommend {
        background-color: #2f1f5d
    }
}

@media (max-width: 457px) {
    .header-menu {
        margin-top: 109px
    }
}

@media (max-width: 425px) {
    .header-menu {
        margin-top: 101px
    }

    .items {
        font-size: 16px;
        padding: 0
    }
}

@media (max-width: 413px) {
    .header-menu {
        margin-top: 93px
    }
}

@media (max-width: 375px) {
    .header-menu {
        margin-top: 84px
    }
}

@media (max-width: 355px) {
    .header-menu {
        margin-top: 79px
    }
}

@media (max-width: 340px) {
    .header-menu {
        margin-top: 75px
    }

    .header-menu-class-img {
        background-size: 20px
    }

    .items {
        font-size: 14px;
        height: 45px
    }
}

@media (max-width: 325px) {
    .header-menu {
        margin-top: 71px
    }
}

.main-box {
    min-width: 320px
}