body, html {
height: 100%;
margin: 0;
padding: 0
}
a, abbr, acronym, address, blockquote, button, caption, cite, code, dd, del, dfn, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, img, label, legend, li, ol, p, pre, q, s, samp, small, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, ul, var {
border: 0;
font-family: Arial, sans-serif, serif;
font-size: 100%;
font-style: normal;
font-weight: 400;
line-height: 1;
margin: 0;
padding: 0
}
table {
border-collapse: collapse;
border-spacing: 0
}
ol, ul {
list-style: none
}
blockquote:after, blockquote:before, q:after, q:before {
content: ""
}
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-size: 100%;
overflow-y: scroll
}
a:focus {
outline: thin dotted
}
a:active, a:hover {
outline: 0 none
}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
display: block
}
audio, canvas, video {
*zoom: 1;
display: inline-block;
*display: inline
}
audio:not([controls]) {
display: none
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sup {
top: -.5em
}
sub {
bottom: -.25em
}
img {
-ms-interpolation-mode: bicubic;
border: 0
}
button, input, select, textarea {
font-size: 100%;
margin: 0;
vertical-align: baseline;
*vertical-align: middle
}
button, input {
line-height: normal;
*overflow: visible
}
button::-moz-focus-inner, input::-moz-focus-inner {
border: 0;
padding: 0
}
button, input[type=button], input[type=reset], input[type=submit] {
-webkit-appearance: button;
cursor: pointer
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box
}
input[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
textarea {
overflow: auto;
vertical-align: top
}
@keyframes animate1 {
0% {
left: -100%
}
50%, to {
left: 100%
}
}
@keyframes animate2 {
0% {
top: -100%
}
50%, to {
top: 100%
}
}
@keyframes animate3 {
0% {
right: -100%
}
50%, to {
right: 100%
}
}
@keyframes animate4 {
0% {
bottom: -100%
}
50%, to {
bottom: 100%
}
}
@-moz-keyframes spin {
0% {
-webkit-transform: rotate(0deg)
}
to {
-webkit-transform: rotate(1turn)
}
}
@-o-keyframes spin {
0% {
-webkit-transform: rotate(0deg)
}
to {
-webkit-transform: rotate(1turn)
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg)
}
to {
-webkit-transform: rotate(1turn)
}
}
@keyframes spin {
0% {
transform: rotate(0deg)
}
to {
transform: rotate(1turn)
}
}
@keyframes heartbeat {
0% {
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-transform: scale(1);
transform: scale(1)
}
10% {
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-transform: scale(.91);
transform: scale(.91)
}
17% {
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-transform: scale(.98);
transform: scale(.98)
}
33% {
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-transform: scale(.87);
transform: scale(.87)
}
45% {
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-transform: scale(1);
transform: scale(1)
}
}
@keyframes around {
0% {
left: 16%
}
50%, to {
left: 20%
}
}
@keyframes rotating {
0% {
transform: rotate(0deg)
}
to {
transform: rotate(50deg)
}
}
@keyframes load {
0% {
opacity: 1
}
to {
opacity: 0
}
}
.neon:hover {
outline: none;
text-decoration: none;
transition: .5s
}
.neon:hover div {
position: absolute
}
.neon:hover div:first-child {
animation: animate1 1s linear infinite;
background: linear-gradient(90deg, transparent, #8743ff);
height: 2px;
left: -100%;
top: 0;
width: 100%
}
.neon:hover div:nth-child(2) {
animation: animate2 1s linear infinite;
animation-delay: .25s;
background: linear-gradient(180deg, transparent, #8743ff);
height: 100%;
right: 0;
top: -100%;
width: 2px
}
.neon:hover div:nth-child(3) {
animation: animate3 1s linear infinite;
animation-delay: .5s;
background: linear-gradient(270deg, transparent, #8743ff);
bottom: 0;
height: 2px;
right: -100%;
width: 100%
}
.neon:hover div:nth-child(4) {
animation: animate4 1s linear infinite;
animation-delay: .75s;
background: linear-gradient(0deg, transparent, #8743ff);
bottom: -100%;
height: 100%;
left: 0;
width: 2px
}
@media screen and (min-width: 810px) {
body {
background-color: #1e1e28;
border: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 0;
height: 100%;
margin: 0
}
body #header {
align-items: center;
background-color: #161620;
border: 1px solid #303030;
border-radius: 2px;
box-shadow: 0 0 2px #13131d;
box-sizing: border-box;
display: flex;
height: 64px;
position: fixed;
top: 0;
width: 100%;
z-index: 1
}
body #header #header-left {
align-items: center;
display: flex;
flex: 1;
margin-right: 10px;
position: relative
}
body #header #header-left #tags {
align-items: center;
cursor: pointer;
display: flex;
flex-shrink: 0;
margin: 0 14px;
outline: none;
position: relative;
text-decoration: none
}
body #header #header-left #tags i {
transform: scale(.7)
}
body #header #header-left #tags span {
color: #fff;
font-size: 16px;
font-weight: bold;
margin-left: 10px;
}
body #header #header-left #tags:after {
background-color: #303030;
content: "";
height: 64px;
position: absolute;
right: -14px;
width: 1px
}
body #header #header-left .header-logo-a {
flex-shrink: 0;
height: 36px;
margin: 0 26px;
width: 154px
}
body #header #header-left .header-logo-a .header-logo {
height: 100%;
width: 100%
}
body #header #header-left .header-btn-group {
flex: 1;
overflow-x: auto;
overflow-y: hidden;
width: 100%
}
body #header #header-left .header-btn-group::-webkit-scrollbar {
display: none
}
body #header #header-left .header-btn-group .header-btn:last-child {
margin-right: 20px
}
body #header #header-left:after {
background: linear-gradient(270deg, #161620 20%, #16162000 50%);
content: "";
height: 100%;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
width: 80px
}
body #header #header-right {
align-items: center;
display: flex;
justify-content: center;
margin-left: auto;
margin-right: 20px
}
body #header #header-right .header-logo-a {
display: none
}
body #header .header-btn-group {
align-items: center;
display: flex;
height: 36px
}
body #header .header-btn-group .header-btn:not(:first-child) {
margin-left: 20px
}
body #header .header-btn {
align-items: center;
background-color: #6741fd;
border-radius: 10px;
box-sizing: border-box;
cursor: pointer;
display: flex;
flex-shrink: 0;
height: 36px;
justify-content: center;
outline: none;
overflow: hidden;
position: relative;
text-decoration: none;
transition: .25s;
user-select: none
}
body #header .header-btn:hover {
background-color: #8567fd
}
body #header .header-btn.icon-btn {
width: 110px
}
body #header .header-btn.txt-btn {
padding: 0 10px
}
body #header .header-btn.header-random i {
margin-right: 10px;
transform: scale(.6)
}
body #header .header-btn.header-pwa-install, body #header .header-btn.header-pwa-install i {
display: none
}
body #header .header-btn.header-clock .icon-wrapper {
height: 20px;
margin-right: 5px;
width: 20px
}
body #header .header-btn.mmorpg {
background: linear-gradient(0deg, #fd1111e0, #fefefe61);
overflow: unset
}
body #header .header-btn.mmorpg:hover {
filter: brightness(110%) contrast(110%)
}
body #header .header-btn.mmorpg .subscript {
height: 16px;
position: absolute;
right: -4px;
text-align: center;
top: 0;
width: 16px
}
body #header .header-btn .header-btn-span, body #header .header-btn span {
color: #fff;
font-size: 14px
}
body #app {
background-color: unset;
height: 100%;
width: 100%
}
body #app #footer .breadcrumb .breadcrumb-item a {
color: #b2b2b2;
font-size: 12px;
text-decoration: none
}
body #app #footer .breadcrumb .breadcrumb-item a:hover {
color: #fce331
}
body #app #footer .breadcrumb .breadcrumb-item:not(:first-child):before {
color: #b2b2b2;
content: "›";
font-size: 14px;
margin: 0 6px
}
body #app #footer .footer-div.footer-div-vid .footer-content p {
font-size: 18px
}
body #app #footer .footer-div .footer-box #qrcode img {
border: 15px solid #fff
}
body #app #footer .footer-div .footer-box .text {
margin-left: 10px
}
body #app #footer .footer-div .footer-box .text p:first-child {
color: #c9c9c9;
font-size: 20px;
margin-bottom: 18px
}
body #app #footer .footer-div .footer-box .text p:last-child {
color: #a0a0a2;
font-size: 16px
}
body #app #footer .footer-div .footer-flex .footer-flex-div .footer-flex-div-header div {
background-color: #fff;
border-radius: 50%;
height: 16px;
margin-right: 16px;
width: 16px
}
body #app #footer .footer-div .footer-flex .footer-flex-div .footer-flex-div-header div div {
background-color: #878789;
border-radius: 50%;
height: 12px;
margin-left: 7px;
margin-top: 7px;
width: 12px
}
body #app #footer .footer-div .footer-flex .footer-flex-div .footer-flex-div-header span {
color: #fff;
font-size: 24px
}
body #app #footer .footer-div .footer-flex .footer-flex-div .footer-flex-div-content a {
color: #c9c9c9;
cursor: pointer;
display: block;
margin-bottom: 16px;
outline: none;
text-decoration: none
}
body #app #footer .footer-div .footer-flex .footer-flex-div .footer-flex-div-content a:hover span {
color: #fce331
}
body #app #footer .footer-div .footer-content .content-btns a {
background-color: unset;
border: 1px solid #c9c9c9;
border-radius: 10px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 14px;
height: 26px;
line-height: 26px;
margin-bottom: 10px;
margin-right: 15px;
outline: none;
padding: 0 10px;
text-decoration: none
}
body #app #footer .footer-div .footer-content .content-btns a:hover {
border: 1px solid #fce331;
color: #fce331
}
body #app #footer .footer-div .footer-content p {
line-height: 1.5;
margin-bottom: 12px
}
body #app #footer .footer-div .footer-content p a {
color: #c9c9c9;
cursor: pointer;
outline: none;
text-decoration: none
}
body #app #footer .footer-div .footer-content p .showColor, body #app #footer .footer-div .footer-content p a:hover, body #app #footer .footer-div .footer-content p > a {
color: #fce331
}
body #app #footer .footer-div .footer-content p:last-of-type {
margin-bottom: 14px
}
body #app #footer .footer-div .footer-content p .propmt:first-of-type {
color: #ff3b3b
}
body #app #footer .footer-div .footer-content p .propmt:last-of-type {
color: #65ffef
}
body #app #footer .footer-div .footer-content.footer-content-tag .link-item a {
color: #c9c9c9;
cursor: pointer;
display: inline-block;
margin-bottom: 16px;
outline: none;
text-decoration: none
}
body #app #footer .footer-div .footer-content.footer-content-tag .link-item a:hover {
color: #fce331
}
body #app #footer .footer-div .footer-content.footer-content-tag p {
margin-bottom: 12px
}
body #app #footer .footer-div .footer-content.footer-content-tag p:last-of-type {
margin-bottom: 0
}
body #app #bottom-bar {
align-items: center;
background-color: #161620;
display: flex;
height: 64px;
margin-top: 20px;
position: relative;
width: 100%
}
body #app #bottom-bar #bottom-left {
align-items: center;
display: flex;
margin-left: 20px
}
body #app #bottom-bar #bottom-left img {
height: 36px;
margin-right: 20px;
width: 154px
}
body #app #bottom-bar #bottom-left #bottom-left-span {
font-size: 14px;
height: 44px;
line-height: 44px;
position: relative;
width: 166px
}
body #app #bottom-bar #bottom-left #bottom-left-span span:first-child {
color: #98ffff;
left: -1px;
position: absolute;
top: -1px
}
body #app #bottom-bar #bottom-left #bottom-left-span span:nth-child(2) {
color: #fe398a;
left: 1px;
position: absolute;
top: 1px
}
body #app #bottom-bar #bottom-left #bottom-left-span span:nth-child(3) {
color: #fff;
left: 0;
position: absolute;
top: 0
}
body #app #bottom-bar #bottom-right {
align-items: center;
display: flex;
margin-right: 20px;
position: absolute;
right: 0
}
body #app #bottom-bar #bottom-right .bottom-contact {
color: #c9c9c9;
cursor: pointer;
font-size: 14px;
margin-right: 24px;
outline: none;
text-decoration: none
}
body #app #bottom-bar #bottom-right .bottom-contact:hover {
color: #fce331
}
body #app #bottom-bar #bottom-right .bottom-lab {
color: #c9c9c9;
cursor: pointer;
font-size: 14px;
margin-right: 24px;
outline: none;
text-decoration: none
}
body #app #bottom-bar #bottom-right .bottom-lab:hover {
color: #fce331
}
body #app #bottom-bar #bottom-right .bottom-select {
border: 1px solid #fff;
border-radius: 2px;
box-shadow: 0 0 2px #13131d;
color: #fff;
cursor: pointer;
height: 44px;
position: relative;
width: 166px
}
body #app #bottom-bar #bottom-right .bottom-select.bottom-select-active {
border: 1px solid #fce331
}
body #app #bottom-bar #bottom-right .bottom-select.bottom-select-zh {
display: none
}
body #app #bottom-bar #bottom-right .bottom-select .select {
align-items: center;
display: flex;
justify-content: center;
line-height: 44px
}
body #app #bottom-bar #bottom-right .bottom-select .select .select-val {
color: #fff;
font-size: 16px;
margin-right: 50px
}
body #app #bottom-bar #bottom-right .bottom-select .select i {
transform: scale(.8)
}
body #app #bottom-bar #bottom-right .bottom-select .select-list {
background-color: #242432;
border: 1px solid #6868d9;
bottom: 58px;
display: none;
max-height: 520px;
overflow-y: auto;
padding: 20px;
position: absolute;
right: 0;
width: 127px;
z-index: 1
}
body #app #bottom-bar #bottom-right .bottom-select .select-list::-webkit-scrollbar {
width: 2px
}
body #app #bottom-bar #bottom-right .bottom-select .select-list::-webkit-scrollbar-thumb {
background: #fff;
border-radius: 2px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1)
}
body #app #bottom-bar #bottom-right .bottom-select .select-list::-webkit-scrollbar-track {
background-color: #b7b4b43d;
border-radius: 5px
}
body #app #bottom-bar #bottom-right .bottom-select .select-list a {
color: #fff;
display: block;
font-size: 14px;
line-height: 42px;
outline: none;
text-decoration: none
}
body #app #bottom-bar #bottom-right .bottom-select .select-list a:first-child {
margin-top: -15px
}
body #app #bottom-bar #bottom-right .bottom-select .select-list a:last-child {
margin-bottom: -15px
}
body #app #bottom-bar #bottom-right #bottom-btn-list, body #app #bottom-bar #bottom-right #bottom-logo {
display: none
}
body #app #bottom-prompt {
background-color: #161620;
color: #c9c9c9;
font-size: 16px;
line-height: 30px;
text-align: center;
width: 100%
}
body #app #bottom-prompt a {
outline: none;
text-decoration: none
}
body #app #bottom-prompt .showColor {
color: #fce331
}
body #recent {
background-color: #1e1e28;
display: none;
height: 100%;
position: fixed;
right: 0;
top: 0;
width: 379px;
z-index: 2
}
body #recent #recent-close {
color: #fff;
cursor: pointer;
font-size: 22px;
height: 58px;
line-height: 58px;
margin-right: 10px;
text-align: right
}
body #recent iframe, body .pic {
height: 100%;
width: 100%
}
body .pic {
display: block;
filter: brightness(110%) contrast(110%)
}
body svg {
height: 100%;
width: 100%
}
body::-webkit-scrollbar {
background-color: #353545;
height: 6px;
width: 6px
}
body::-webkit-scrollbar-thumb {
background-color: #fce331;
border-radius: 10px
}
body::-webkit-scrollbar-track {
background-color: transparent
}
}
@media screen and (min-width: 810px) and (max-width: 1000px) {
body #header #header-right .header-btn:not(:first-child) {
margin-left: 16px
}
body #header #header-right .header-pwa-install, body #header #header-right .icon-btn {
all: unset;
cursor: pointer;
height: 17px;
width: 17px
}
body #header #header-right .header-pwa-install div, body #header #header-right .header-pwa-install span, body #header #header-right .icon-btn div, body #header #header-right .icon-btn span {
display: none
}
body #header #header-right .header-pwa-install i, body #header #header-right .icon-btn i {
display: block;
margin: 0;
transform-origin: top left
}
}
@media screen and (min-width: 810px) {
#root {
background-color: #1e1e28;
margin-top: 88px;
position: relative
}
#root .grid-games {
display: grid;
gap: 10px 23px;
justify-content: center;
}
#root .grid-games .grid-nav .gm1 .grid-game-3d video {
left: 0;
object-fit: fill;
position: absolute;
top: 0
}
#root .grid-games .grid-nav .gm1 .grid-game-3d .grid-video i {
margin: 9px;
position: absolute
}
#root .grid-games .grid-nav .gm1 .grid-game-3d .grid-game-new i {
transform: scale(.5)
}
#root .grid-games .grid-nav .gm1 .grid-game-3d .grid-game-new span {
color: #fff;
font-size: 16px;
margin-left: 0
}
#root .grid-games .grid-nav .gm1 .grid-game-3d .name {
font-size: 20px
}
#root .grid-games .grid-nav .gm1.multi.hovered, #root .grid-games .grid-nav .gm1.multi:hover {
transform: scale(1) !important
}
#root .grid-games .grid-nav .gm1.multi.hovered video, #root .grid-games .grid-nav .gm1.multi:hover video {
z-index: 1
}
#root .grid-games .grid-nav #grid-introduce span {
color: #fff;
display: block;
font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%
}
#root .grid-games .grid-nav #grid-introduce div {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
color: #6a6a80;
display: -webkit-box;
font-size: 14px;
line-height: 20px;
margin-top: 10px;
overflow: hidden;
text-overflow: ellipsis
}
#root .grid-games .grid-nav #grid-introduce .grid-nav-play:hover div:first-child {
background: linear-gradient(90deg, transparent, #f9ca32);
height: 4px;
top: -10px
}
#root .grid-games .grid-nav #grid-introduce .grid-nav-play:hover div:nth-child(2) {
background: linear-gradient(180deg, transparent, #f9ca32);
top: -200%;
width: 4px
}
#root .grid-games .grid-nav #grid-introduce .grid-nav-play:hover div:nth-child(3) {
background: linear-gradient(270deg, transparent, #f9ca32);
height: 4px
}
#root .grid-games .grid-nav #grid-introduce .grid-nav-play:hover div:nth-child(4) {
background: linear-gradient(0deg, transparent, #f9ca32);
width: 4px
}
#root .grid-games .grid-game {
border-radius: 10px;
box-shadow: 0 0 8px #36365c;
height: 120px;
overflow: hidden;
position: relative;
width: 120px
}
#root .grid-games .grid-game .grid-game-3d {
border-radius: 10px;
height: 100%;
overflow: hidden;
width: 100%
}
#root .grid-games .grid-game .grid-game-3d .btn, #root .grid-games .grid-game .grid-game-3d .name {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
left: 0;
opacity: 0;
position: absolute;
top: 0;
transition: all .1s;
width: 100%
}
#root .grid-games .grid-game .grid-game-3d .btn .btn-wrapper, #root .grid-games .grid-game .grid-game-3d .name .btn-wrapper {
align-items: center;
background-color: #573e83;
border-radius: 10px;
color: #fff;
display: flex;
flex-direction: column;
height: 36px;
justify-content: center;
position: relative;
text-align: center;
width: 90%;
z-index: 1;
}
#root .grid-games .grid-game .grid-game-3d .btn .btn-wrapper .tips, #root .grid-games .grid-game .grid-game-3d .name .btn-wrapper .tips {
font-size: 14px;
position: absolute;
top: 4px
}
#root .grid-games .grid-game .grid-game-3d .btn .btn-wrapper .game-name, #root .grid-games .grid-game .grid-game-3d .name .btn-wrapper .game-name {
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
display: -webkit-box;
font-size: 14px;
font-weight: bold;
line-height: 16px;
overflow: hidden;
text-overflow: ellipsis;
transform: scale(.8);
width: 100%;
}
#root .grid-games .grid-game .grid-game-3d .grid-video, #root .grid-games .grid-game .grid-game-3d video {
display: none
}
#root .grid-games .grid-game .grid-game-3d .grid-game-new i {
margin-left: -7px;
transform: scale(.5)
}
#root .grid-games .grid-game .grid-game-3d .grid-game-new span {
color: #fff;
font-size: 14px;
margin-left: -4px
}
#root .grid-games .grid-game .grid-game-3d .name {
align-items: flex-end
}
#root .grid-games .grid-game .grid-game-3d .name span {
background-color: unset;
overflow: hidden;
padding: 0 6px;
text-overflow: ellipsis;
white-space: nowrap;
width: unset
}
#root .grid-games .grid-game:hover {
box-shadow: none;
transform: scale(1.5);
transition: all .2s ease-out;
z-index: 999
}
#root .grid-games .grid-game:hover .grid-game-3d .btn, #root .grid-games .grid-game:hover .grid-game-3d .name {
opacity: 1;
transition: all .1s
}
#root .grid-games .grid-best-games .grid-game-3d > img, #root .grid-games .grid-pokemon-games .grid-game-3d > img, #root .grid-games .grid-popular-games .grid-game-3d > img {
border-radius: 10px;
height: 100%;
overflow: hidden;
width: 100%
}
#root .grid-games .grid-best-games .grid-game-3d .btn, #root .grid-games .grid-pokemon-games .grid-game-3d .btn, #root .grid-games .grid-popular-games .grid-game-3d .btn {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
left: 0;
opacity: 0;
position: absolute;
top: 0;
transition: all .1s;
width: 100%
}
#root .grid-games .grid-best-games .grid-game-3d .btn .btn-wrapper, #root .grid-games .grid-pokemon-games .grid-game-3d .btn .btn-wrapper, #root .grid-games .grid-popular-games .grid-game-3d .btn .btn-wrapper {
align-items: center;
background-color: #573e83;
border-radius: 10px;
color: #fff;
display: flex;
flex-direction: column;
height: 36px;
justify-content: center;
position: relative;
text-align: center;
width: 80px;
z-index: 1
}
#root .grid-games .grid-best-games .grid-game-3d .btn .btn-wrapper .tips, #root .grid-games .grid-pokemon-games .grid-game-3d .btn .btn-wrapper .tips, #root .grid-games .grid-popular-games .grid-game-3d .btn .btn-wrapper .tips {
font-size: 14px;
position: absolute;
top: 4px
}
#root .grid-games .grid-best-games .grid-game-3d .btn .btn-wrapper .game-name, #root .grid-games .grid-pokemon-games .grid-game-3d .btn .btn-wrapper .game-name, #root .grid-games .grid-popular-games .grid-game-3d .btn .btn-wrapper .game-name {
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
bottom: 2px;
display: -webkit-box;
font-size: 12px;
line-height: 16px;
overflow: hidden;
position: absolute;
text-overflow: ellipsis;
transform: scale(.8);
width: 80%
}
#root .grid-games .grid-best-games:hover .btn, #root .grid-games .grid-pokemon-games:hover .btn, #root .grid-games .grid-popular-games:hover .btn {
opacity: 1;
transition: all .1s
}
#root .grid-games .grid-girls-games .img-wrapper img {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
#root .grid-games .grid-girls-games .img-wrapper img.curr, #root .grid-games .grid-girls-games:hover {
z-index: 1
}
#root .grid-games .gm10 .grid-game-3d, #root .grid-games .gm11 .grid-game-3d, #root .grid-games .gm2 .grid-game-3d, #root .grid-games .gm3 .grid-game-3d, #root .grid-games .gm4 .grid-game-3d, #root .grid-games .gm5 .grid-game-3d, #root .grid-games .gm6 .grid-game-3d, #root .grid-games .gm7 .grid-game-3d, #root .grid-games .gm8 .grid-game-3d, #root .grid-games .gm9 .grid-game-3d {
border-radius: 10px;
overflow: hidden
}
#root .grid-games .gm10 .grid-game-3d .grid-video, #root .grid-games .gm11 .grid-game-3d .grid-video, #root .grid-games .gm2 .grid-game-3d .grid-video, #root .grid-games .gm3 .grid-game-3d .grid-video, #root .grid-games .gm4 .grid-game-3d .grid-video, #root .grid-games .gm5 .grid-game-3d .grid-video, #root .grid-games .gm6 .grid-game-3d .grid-video, #root .grid-games .gm7 .grid-game-3d .grid-video, #root .grid-games .gm8 .grid-game-3d .grid-video, #root .grid-games .gm9 .grid-game-3d .grid-video {
background-color: #fff;
border-radius: 10px 0;
bottom: 0;
display: block;
height: 42px;
position: absolute;
right: 0;
width: 50px;
z-index: 2
}
#root .grid-games .gm10 .grid-game-3d .grid-video i, #root .grid-games .gm11 .grid-game-3d .grid-video i, #root .grid-games .gm2 .grid-game-3d .grid-video i, #root .grid-games .gm3 .grid-game-3d .grid-video i, #root .grid-games .gm4 .grid-game-3d .grid-video i, #root .grid-games .gm5 .grid-game-3d .grid-video i, #root .grid-games .gm6 .grid-game-3d .grid-video i, #root .grid-games .gm7 .grid-game-3d .grid-video i, #root .grid-games .gm8 .grid-game-3d .grid-video i, #root .grid-games .gm9 .grid-game-3d .grid-video i {
margin: 10px;
position: absolute
}
#root .grid-games .gm10 .grid-game-3d video, #root .grid-games .gm11 .grid-game-3d video, #root .grid-games .gm2 .grid-game-3d video, #root .grid-games .gm3 .grid-game-3d video, #root .grid-games .gm4 .grid-game-3d video, #root .grid-games .gm5 .grid-game-3d video, #root .grid-games .gm6 .grid-game-3d video, #root .grid-games .gm7 .grid-game-3d video, #root .grid-games .gm8 .grid-game-3d video, #root .grid-games .gm9 .grid-game-3d video {
left: 0;
object-fit: fill;
position: absolute;
top: 0
}
#root .grid-games .gm10 .grid-game-3d .btn, #root .grid-games .gm10 .grid-game-3d .name, #root .grid-games .gm11 .grid-game-3d .btn, #root .grid-games .gm11 .grid-game-3d .name, #root .grid-games .gm2 .grid-game-3d .btn, #root .grid-games .gm2 .grid-game-3d .name, #root .grid-games .gm3 .grid-game-3d .btn, #root .grid-games .gm3 .grid-game-3d .name, #root .grid-games .gm4 .grid-game-3d .btn, #root .grid-games .gm4 .grid-game-3d .name, #root .grid-games .gm5 .grid-game-3d .btn, #root .grid-games .gm5 .grid-game-3d .name, #root .grid-games .gm6 .grid-game-3d .btn, #root .grid-games .gm6 .grid-game-3d .name, #root .grid-games .gm7 .grid-game-3d .btn, #root .grid-games .gm7 .grid-game-3d .name, #root .grid-games .gm8 .grid-game-3d .btn, #root .grid-games .gm8 .grid-game-3d .name, #root .grid-games .gm9 .grid-game-3d .btn, #root .grid-games .gm9 .grid-game-3d .name {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
left: 0;
opacity: 0;
position: absolute;
top: 0;
transition: all .1s;
width: 100%
}
#root .grid-games .gm10 .grid-game-3d .btn .btn-wrapper, #root .grid-games .gm10 .grid-game-3d .name .btn-wrapper, #root .grid-games .gm11 .grid-game-3d .btn .btn-wrapper, #root .grid-games .gm11 .grid-game-3d .name .btn-wrapper, #root .grid-games .gm2 .grid-game-3d .btn .btn-wrapper, #root .grid-games .gm2 .grid-game-3d .name .btn-wrapper, #root .grid-games .gm3 .grid-game-3d .btn .btn-wrapper, #root .grid-games .gm3 .grid-game-3d .name .btn-wrapper, #root .grid-games .gm4 .grid-game-3d .btn .btn-wrapper, #root .grid-games .gm4 .grid-game-3d .name .btn-wrapper, #root .grid-games .gm5 .grid-game-3d .btn .btn-wrapper, #root .grid-games .gm5 .grid-game-3d .name .btn-wrapper, #root .grid-games .gm6 .grid-game-3d .btn .btn-wrapper, #root .grid-games .gm6 .grid-game-3d .name .btn-wrapper, #root .grid-games .gm7 .grid-game-3d .btn .btn-wrapper, #root .grid-games .gm7 .grid-game-3d .name .btn-wrapper, #root .grid-games .gm8 .grid-game-3d .btn .btn-wrapper, #root .grid-games .gm8 .grid-game-3d .name .btn-wrapper, #root .grid-games .gm9 .grid-game-3d .btn .btn-wrapper, #root .grid-games .gm9 .grid-game-3d .name .btn-wrapper {
align-items: center;
background-color: #573e83;
border-radius: 10px;
color: #fff;
display: flex;
flex-direction: column;
height: 62px;
justify-content: center;
position: relative;
text-align: center;
width: 160px;
z-index: 1
}
#root .grid-games .gm10 .grid-game-3d .btn .btn-wrapper .tips, #root .grid-games .gm10 .grid-game-3d .name .btn-wrapper .tips, #root .grid-games .gm11 .grid-game-3d .btn .btn-wrapper .tips, #root .grid-games .gm11 .grid-game-3d .name .btn-wrapper .tips, #root .grid-games .gm2 .grid-game-3d .btn .btn-wrapper .tips, #root .grid-games .gm2 .grid-game-3d .name .btn-wrapper .tips, #root .grid-games .gm3 .grid-game-3d .btn .btn-wrapper .tips, #root .grid-games .gm3 .grid-game-3d .name .btn-wrapper .tips, #root .grid-games .gm4 .grid-game-3d .btn .btn-wrapper .tips, #root .grid-games .gm4 .grid-game-3d .name .btn-wrapper .tips, #root .grid-games .gm5 .grid-game-3d .btn .btn-wrapper .tips, #root .grid-games .gm5 .grid-game-3d .name .btn-wrapper .tips, #root .grid-games .gm6 .grid-game-3d .btn .btn-wrapper .tips, #root .grid-games .gm6 .grid-game-3d .name .btn-wrapper .tips, #root .grid-games .gm7 .grid-game-3d .btn .btn-wrapper .tips, #root .grid-games .gm7 .grid-game-3d .name .btn-wrapper .tips, #root .grid-games .gm8 .grid-game-3d .btn .btn-wrapper .tips, #root .grid-games .gm8 .grid-game-3d .name .btn-wrapper .tips, #root .grid-games .gm9 .grid-game-3d .btn .btn-wrapper .tips, #root .grid-games .gm9 .grid-game-3d .name .btn-wrapper .tips {
font-size: 20px;
position: absolute;
top: 10px
}
#root .grid-games .gm10 .grid-game-3d .btn .btn-wrapper .game-name, #root .grid-games .gm10 .grid-game-3d .name .btn-wrapper .game-name, #root .grid-games .gm11 .grid-game-3d .btn .btn-wrapper .game-name, #root .grid-games .gm11 .grid-game-3d .name .btn-wrapper .game-name, #root .grid-games .gm2 .grid-game-3d .btn .btn-wrapper .game-name, #root .grid-games .gm2 .grid-game-3d .name .btn-wrapper .game-name, #root .grid-games .gm3 .grid-game-3d .btn .btn-wrapper .game-name, #root .grid-games .gm3 .grid-game-3d .name .btn-wrapper .game-name, #root .grid-games .gm4 .grid-game-3d .btn .btn-wrapper .game-name, #root .grid-games .gm4 .grid-game-3d .name .btn-wrapper .game-name, #root .grid-games .gm5 .grid-game-3d .btn .btn-wrapper .game-name, #root .grid-games .gm5 .grid-game-3d .name .btn-wrapper .game-name, #root .grid-games .gm6 .grid-game-3d .btn .btn-wrapper .game-name, #root .grid-games .gm6 .grid-game-3d .name .btn-wrapper .game-name, #root .grid-games .gm7 .grid-game-3d .btn .btn-wrapper .game-name, #root .grid-games .gm7 .grid-game-3d .name .btn-wrapper .game-name, #root .grid-games .gm8 .grid-game-3d .btn .btn-wrapper .game-name, #root .grid-games .gm8 .grid-game-3d .name .btn-wrapper .game-name, #root .grid-games .gm9 .grid-game-3d .btn .btn-wrapper .game-name, #root .grid-games .gm9 .grid-game-3d .name .btn-wrapper .game-name {
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
bottom: 8px;
display: -webkit-box;
font-size: 14px;
line-height: 20px;
overflow: hidden;
position: absolute;
text-overflow: ellipsis;
transform: unset;
width: 80%
}
#root .grid-games .gm10 .grid-game-3d .obscuration, #root .grid-games .gm11 .grid-game-3d .obscuration, #root .grid-games .gm2 .grid-game-3d .obscuration, #root .grid-games .gm3 .grid-game-3d .obscuration, #root .grid-games .gm4 .grid-game-3d .obscuration, #root .grid-games .gm5 .grid-game-3d .obscuration, #root .grid-games .gm6 .grid-game-3d .obscuration, #root .grid-games .gm7 .grid-game-3d .obscuration, #root .grid-games .gm8 .grid-game-3d .obscuration, #root .grid-games .gm9 .grid-game-3d .obscuration {
background-image: linear-gradient(0deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .05) 40%);
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1
}
#root .grid-games .gm10 .grid-game-3d .name, #root .grid-games .gm11 .grid-game-3d .name, #root .grid-games .gm2 .grid-game-3d .name, #root .grid-games .gm3 .grid-game-3d .name, #root .grid-games .gm4 .grid-game-3d .name, #root .grid-games .gm5 .grid-game-3d .name, #root .grid-games .gm6 .grid-game-3d .name, #root .grid-games .gm7 .grid-game-3d .name, #root .grid-games .gm8 .grid-game-3d .name, #root .grid-games .gm9 .grid-game-3d .name {
align-items: flex-end
}
#root .grid-games .gm10 .grid-game-3d .name span, #root .grid-games .gm11 .grid-game-3d .name span, #root .grid-games .gm2 .grid-game-3d .name span, #root .grid-games .gm3 .grid-game-3d .name span, #root .grid-games .gm4 .grid-game-3d .name span, #root .grid-games .gm5 .grid-game-3d .name span, #root .grid-games .gm6 .grid-game-3d .name span, #root .grid-games .gm7 .grid-game-3d .name span, #root .grid-games .gm8 .grid-game-3d .name span, #root .grid-games .gm9 .grid-game-3d .name span {
background-color: unset;
overflow: hidden;
padding: 0 6px;
text-overflow: ellipsis;
white-space: nowrap;
width: unset
}
#root .grid-games .gm10:hover, #root .grid-games .gm11:hover, #root .grid-games .gm2:hover, #root .grid-games .gm3:hover, #root .grid-games .gm4:hover, #root .grid-games .gm5:hover, #root .grid-games .gm6:hover, #root .grid-games .gm7:hover, #root .grid-games .gm8:hover, #root .grid-games .gm9:hover {
transform: scale(1.5);
transition: all .2s ease-out;
z-index: 999
}
#root .grid-games .gm10:hover .grid-game-3d .btn, #root .grid-games .gm10:hover .grid-game-3d .name, #root .grid-games .gm11:hover .grid-game-3d .btn, #root .grid-games .gm11:hover .grid-game-3d .name, #root .grid-games .gm2:hover .grid-game-3d .btn, #root .grid-games .gm2:hover .grid-game-3d .name, #root .grid-games .gm3:hover .grid-game-3d .btn, #root .grid-games .gm3:hover .grid-game-3d .name, #root .grid-games .gm4:hover .grid-game-3d .btn, #root .grid-games .gm4:hover .grid-game-3d .name, #root .grid-games .gm5:hover .grid-game-3d .btn, #root .grid-games .gm5:hover .grid-game-3d .name, #root .grid-games .gm6:hover .grid-game-3d .btn, #root .grid-games .gm6:hover .grid-game-3d .name, #root .grid-games .gm7:hover .grid-game-3d .btn, #root .grid-games .gm7:hover .grid-game-3d .name, #root .grid-games .gm8:hover .grid-game-3d .btn, #root .grid-games .gm8:hover .grid-game-3d .name, #root .grid-games .gm9:hover .grid-game-3d .btn, #root .grid-games .gm9:hover .grid-game-3d .name {
font-size: 18px;
opacity: 1;
transition: all .1s
}
#root .grid-games .gm10:hover .grid-game-3d .obscuration, #root .grid-games .gm11:hover .grid-game-3d .obscuration, #root .grid-games .gm2:hover .grid-game-3d .obscuration, #root .grid-games .gm3:hover .grid-game-3d .obscuration, #root .grid-games .gm4:hover .grid-game-3d .obscuration, #root .grid-games .gm5:hover .grid-game-3d .obscuration, #root .grid-games .gm6:hover .grid-game-3d .obscuration, #root .grid-games .gm7:hover .grid-game-3d .obscuration, #root .grid-games .gm8:hover .grid-game-3d .obscuration, #root .grid-games .gm9:hover .grid-game-3d .obscuration {
opacity: 1;
transition: all .2s
}
#root .grid-games .gm10:hover .grid-game-3d .grid-game-new, #root .grid-games .gm11:hover .grid-game-3d .grid-game-new, #root .grid-games .gm2:hover .grid-game-3d .grid-game-new, #root .grid-games .gm3:hover .grid-game-3d .grid-game-new, #root .grid-games .gm4:hover .grid-game-3d .grid-game-new, #root .grid-games .gm5:hover .grid-game-3d .grid-game-new, #root .grid-games .gm6:hover .grid-game-3d .grid-game-new, #root .grid-games .gm7:hover .grid-game-3d .grid-game-new, #root .grid-games .gm8:hover .grid-game-3d .grid-game-new, #root .grid-games .gm9:hover .grid-game-3d .grid-game-new {
display: none
}
#root .grid-games .gm10.multi .grid-video-game-name, #root .grid-games .gm11.multi .grid-video-game-name, #root .grid-games .gm2.multi .grid-video-game-name, #root .grid-games .gm3.multi .grid-video-game-name, #root .grid-games .gm4.multi .grid-video-game-name, #root .grid-games .gm5.multi .grid-video-game-name, #root .grid-games .gm6.multi .grid-video-game-name, #root .grid-games .gm7.multi .grid-video-game-name, #root .grid-games .gm8.multi .grid-video-game-name, #root .grid-games .gm9.multi .grid-video-game-name {
background: linear-gradient(0deg, #8743ff 20%, #8743ff00);
bottom: 0;
display: flex;
justify-content: center;
left: 0;
opacity: 0;
position: absolute;
transform: translateY(8px);
transition: transform .3s, opacity .3s;
width: 100%;
z-index: 2
}
#root .grid-games .gm10.multi .grid-video-game-name span, #root .grid-games .gm11.multi .grid-video-game-name span, #root .grid-games .gm2.multi .grid-video-game-name span, #root .grid-games .gm3.multi .grid-video-game-name span, #root .grid-games .gm4.multi .grid-video-game-name span, #root .grid-games .gm5.multi .grid-video-game-name span, #root .grid-games .gm6.multi .grid-video-game-name span, #root .grid-games .gm7.multi .grid-video-game-name span, #root .grid-games .gm8.multi .grid-video-game-name span, #root .grid-games .gm9.multi .grid-video-game-name span {
color: #fff;
display: inline-block;
font-size: 16px;
line-height: 42px;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
/*width: calc(100% - 110px)*/
}
#root .grid-games .gm10.multi.hovered, #root .grid-games .gm10.multi:hover, #root .grid-games .gm11.multi.hovered, #root .grid-games .gm11.multi:hover, #root .grid-games .gm2.multi.hovered, #root .grid-games .gm2.multi:hover, #root .grid-games .gm3.multi.hovered, #root .grid-games .gm3.multi:hover, #root .grid-games .gm4.multi.hovered, #root .grid-games .gm4.multi:hover, #root .grid-games .gm5.multi.hovered, #root .grid-games .gm5.multi:hover, #root .grid-games .gm6.multi.hovered, #root .grid-games .gm6.multi:hover, #root .grid-games .gm7.multi.hovered, #root .grid-games .gm7.multi:hover, #root .grid-games .gm8.multi.hovered, #root .grid-games .gm8.multi:hover, #root .grid-games .gm9.multi.hovered, #root .grid-games .gm9.multi:hover {
transform: scale(1)
}
#root .grid-games .gm10.multi.hovered video, #root .grid-games .gm10.multi:hover video, #root .grid-games .gm11.multi.hovered video, #root .grid-games .gm11.multi:hover video, #root .grid-games .gm2.multi.hovered video, #root .grid-games .gm2.multi:hover video, #root .grid-games .gm3.multi.hovered video, #root .grid-games .gm3.multi:hover video, #root .grid-games .gm4.multi.hovered video, #root .grid-games .gm4.multi:hover video, #root .grid-games .gm5.multi.hovered video, #root .grid-games .gm5.multi:hover video, #root .grid-games .gm6.multi.hovered video, #root .grid-games .gm6.multi:hover video, #root .grid-games .gm7.multi.hovered video, #root .grid-games .gm7.multi:hover video, #root .grid-games .gm8.multi.hovered video, #root .grid-games .gm8.multi:hover video, #root .grid-games .gm9.multi.hovered video, #root .grid-games .gm9.multi:hover video {
z-index: 1
}
#root .grid-games .gm10.multi.hovered .grid-video-game-name, #root .grid-games .gm10.multi:hover .grid-video-game-name, #root .grid-games .gm11.multi.hovered .grid-video-game-name, #root .grid-games .gm11.multi:hover .grid-video-game-name, #root .grid-games .gm2.multi.hovered .grid-video-game-name, #root .grid-games .gm2.multi:hover .grid-video-game-name, #root .grid-games .gm3.multi.hovered .grid-video-game-name, #root .grid-games .gm3.multi:hover .grid-video-game-name, #root .grid-games .gm4.multi.hovered .grid-video-game-name, #root .grid-games .gm4.multi:hover .grid-video-game-name, #root .grid-games .gm5.multi.hovered .grid-video-game-name, #root .grid-games .gm5.multi:hover .grid-video-game-name, #root .grid-games .gm6.multi.hovered .grid-video-game-name, #root .grid-games .gm6.multi:hover .grid-video-game-name, #root .grid-games .gm7.multi.hovered .grid-video-game-name, #root .grid-games .gm7.multi:hover .grid-video-game-name, #root .grid-games .gm8.multi.hovered .grid-video-game-name, #root .grid-games .gm8.multi:hover .grid-video-game-name, #root .grid-games .gm9.multi.hovered .grid-video-game-name, #root .grid-games .gm9.multi:hover .grid-video-game-name {
opacity: 1;
transform: translate(0)
}
#root .game-block.tg .game-list .game-item .img-wrapper img {
height: 100%;
transition: all .2s ease-out;
width: 100%
}
#root .game-block.tg .game-list .game-item .name-wrapper .name {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
color: #e3e3e3;
display: -webkit-box;
font-size: 12px;
overflow: hidden;
text-align: center;
text-overflow: ellipsis
}
#root .game-block.tg .game-list .game-item:hover .img-wrapper img {
transform: scale(1.2)
}
#root .game-block.fg .game-list .game-item .img-wrapper img {
height: 100%;
transition: all .2s ease-out;
width: 100%
}
#root .game-block.fg .game-list .game-item .name-wrapper .name {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
color: #e3e3e3;
display: -webkit-box;
font-size: 12px;
overflow: hidden;
text-align: center;
text-overflow: ellipsis
}
#root .game-block.fg .game-list .game-item:hover .img-wrapper img {
transform: scale(1.2)
}
#root #pageDiv a, #root #pageDiv div {
background-color: #2d2d3f;
border-radius: 10px;
color: #fff;
cursor: pointer;
font-size: 16px;
font-weight: 600;
height: 50px;
line-height: 50px;
margin-right: 10px;
outline: none;
text-align: center;
text-decoration: none;
width: 50px
}
#root #pageDiv a i, #root #pageDiv div i {
display: block;
margin: 10px auto;
transform: scale(.6)
}
.mmorpg-dialog-wrapper .mmorpg-dialog .mmorpg-dialog-close svg {
height: 20px;
width: 20px
}
.mmorpg-dialog-wrapper .mmorpg-dialog .game-card > img {
border-radius: 16px 16px 0 0;
height: 360px;
width: 300px
}
.mmorpg-dialog-wrapper .mmorpg-dialog .game-card .game-info-wrap .game-info span {
line-height: 1.5;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.mmorpg-dialog-wrapper .mmorpg-dialog .game-card .game-info-wrap .game-info .name {
color: #fff;
font-size: 18px
}
.mmorpg-dialog-wrapper .mmorpg-dialog .game-card > img {
border-radius: 0
}
}
@media screen and (min-width: 1730px) {
body #app #root .grid-games {
grid-template-columns:repeat(12, 120px)
}
}
@media screen and (min-width: 1586px) and (max-width: 1729px) {
body #app #root .grid-games {
grid-template-areas:"gn gn . gm2 gm2 . . . tg tg tg" "gn gn t3 gm2 gm2 . gm5 gm5 tg tg tg" "gn gn gm3 gm3 gm4 gm4 gm5 gm5 . . ." ". . gm3 gm3 gm4 gm4 . . . . ." "gm6 gm6 . fg fg fg . . . . ." "gm6 gm6 t4 fg fg fg . . . . ." ". t1 . . . . . . . . ." ". . . gm9 gm9 . . . . . ." ". . . gm9 gm9 . gm10 gm10 . . ." ". gm7 gm7 . . . gm10 gm10 . . ." ". gm7 gm7 . . . . . . . ." "gm8 gm8 gm11 gm11 . . . . . . ." "gm8 gm8 gm11 gm11 . . . . . . ." ". . . . . . . . . . ." ". . t2 . . . . . . . .";
grid-template-columns:repeat(11, 120px)
}
body #app #root #bt-game #bt-game-lab, body #app #root #bt-game #bt-game-list, body #app #root #bt-game #tag-lab, body #app #root #bt-game #video-lab, body #app #root #tag #bt-game-lab, body #app #root #tag #bt-game-list, body #app #root #tag #tag-lab, body #app #root #tag #video-lab, body #app #root #video #bt-game-lab, body #app #root #video #bt-game-list, body #app #root #video #tag-lab, body #app #root #video #video-lab {
width: 1375px
}
body #app #root #bt-game #bt-game-list, body #app #root #tag #bt-game-list, body #app #root #video #bt-game-list {
grid-template-columns:repeat(9, minmax(auto, 150px))
}
body #app #root #bt-game #tag-list, body #app #root #bt-game #video-list, body #app #root #tag #tag-list, body #app #root #tag #video-list, body #app #root #video #tag-list, body #app #root #video #video-list {
grid-template-columns:repeat(6, 210px)
}
body #app #root .quiz .quiz-list {
grid-template-columns:repeat(5, 263px)
}
body #app #root > .new-games .new-games-list {
grid-template-columns:repeat(11, 120px)
}
body #app #root > .new-games .new-games-list a {
display: none
}
body #app #root > .new-games .new-games-list a:nth-child(-n+11) {
display: block
}
body #app #footer {
margin: 40px 18px 0
}
}
@media screen and (min-width: 1450px) and (max-width: 1585px) {
body #app #root .grid-games {
grid-template-areas:"gn gn . gm2 gm2 . . tg tg tg" "gn gn t3 gm2 gm2 . . tg tg tg" "gn gn gm3 gm3 gm4 gm4 . . . ." ". . gm3 gm3 gm4 gm4 . . . ." "gm6 gm6 . fg fg fg . . . ." "gm6 gm6 t4 fg fg fg . . . ." ". t1 . . . . . . . ." "gm5 gm5 . gm9 gm9 . . . . ." "gm5 gm5 . gm9 gm9 . . . . ." ". gm7 gm7 . . . . . . ." ". gm7 gm7 . . . . . . ." "gm8 gm8 gm11 gm11 . . . . . ." "gm8 gm8 gm11 gm11 . . . . . ." ". gm10 gm10 . . . . . . ." ". gm10 gm10 . . . . . . ." ". . t2 . . . . . . .";
grid-template-columns:repeat(10, 120px)
}
body #app #root #bt-game #bt-game-lab, body #app #root #bt-game #bt-game-list, body #app #root #bt-game #tag-lab, body #app #root #bt-game #video-lab, body #app #root #tag #bt-game-lab, body #app #root #tag #bt-game-list, body #app #root #tag #tag-lab, body #app #root #tag #video-lab, body #app #root #video #bt-game-lab, body #app #root #video #bt-game-list, body #app #root #video #tag-lab, body #app #root #video #video-lab {
width: 1375px
}
body #app #root #bt-game #bt-game-list, body #app #root #tag #bt-game-list, body #app #root #video #bt-game-list {
grid-template-columns:repeat(9, minmax(auto, 150px))
}
body #app #root #bt-game #tag-list, body #app #root #bt-game #video-list, body #app #root #tag #tag-list, body #app #root #tag #video-list, body #app #root #video #tag-list, body #app #root #video #video-list {
grid-template-columns:repeat(6, 210px)
}
body #app #root .quiz .quiz-list {
grid-template-columns:repeat(5, 263px)
}
body #app #root > .new-games .new-games-list {
grid-template-columns:repeat(10, 120px)
}
body #app #root > .new-games .new-games-list a {
display: none
}
body #app #root > .new-games .new-games-list a:nth-child(-n+10) {
display: block
}
body #app #footer {
margin: 40px 22px 0
}
}
@media screen and (min-width: 1300px) and (max-width: 1449px) {
body #app #root .grid-games {
grid-template-columns:repeat(9, 120px)
}
body #app #root #bt-game #bt-game-lab, body #app #root #bt-game #bt-game-list, body #app #root #bt-game #tag-lab, body #app #root #bt-game #video-lab, body #app #root #tag #bt-game-lab, body #app #root #tag #bt-game-list, body #app #root #tag #tag-lab, body #app #root #tag #video-lab, body #app #root #video #bt-game-lab, body #app #root #video #bt-game-list, body #app #root #video #tag-lab, body #app #root #video #video-lab {
width: 1142px
}
body #app #root #bt-game #bt-game-list, body #app #root #tag #bt-game-list, body #app #root #video #bt-game-list {
grid-template-columns:repeat(7, minmax(auto, 150px))
}
body #app #root #bt-game #tag-list, body #app #root #bt-game #video-list, body #app #root #tag #tag-list, body #app #root #tag #video-list, body #app #root #video #tag-list, body #app #root #video #video-list {
grid-template-columns:repeat(5, 210px)
}
body #app #root .quiz .quiz-list {
grid-template-columns:repeat(4, 263px)
}
body #app #root > .new-games .new-games-list {
grid-template-columns:repeat(9, 120px)
}
body #app #root > .new-games .new-games-list a {
display: none
}
body #app #root > .new-games .new-games-list a:nth-child(-n+9) {
display: block
}
}
@media screen and (min-width: 1160px) and (max-width: 1299px) {
body #app #root .grid-games {
grid-template-areas:"gn gn . gm2 gm2 . . ." "gn gn t3 gm2 gm2 . . ." "gn gn gm3 gm3 gm4 gm4 . ." ". . gm3 gm3 gm4 gm4 . ." "gm6 gm6 . tg tg tg . ." "gm6 gm6 t4 tg tg tg . ." ". t1 . . . . . ." "fg fg fg . . . . ." "fg fg fg . . . . ." "gm5 gm5 . gm9 gm9 . . ." "gm5 gm5 . gm9 gm9 . . ." ". gm7 gm7 . . . . ." ". gm7 gm7 . . . . ." "gm8 gm8 gm11 gm11 . . . ." "gm8 gm8 gm11 gm11 . . . ." ". gm10 gm10 . . . . ." ". gm10 gm10 . . . . ." ". . t2 . . . . .";
grid-template-columns:repeat(8, 120px)
}
body #app #root #bt-game #bt-game-lab, body #app #root #bt-game #bt-game-list, body #app #root #bt-game #tag-lab, body #app #root #bt-game #video-lab, body #app #root #tag #bt-game-lab, body #app #root #tag #bt-game-list, body #app #root #tag #tag-lab, body #app #root #tag #video-lab, body #app #root #video #bt-game-lab, body #app #root #video #bt-game-list, body #app #root #video #tag-lab, body #app #root #video #video-lab {
width: 909px
}
body #app #root #bt-game #bt-game-list, body #app #root #tag #bt-game-list, body #app #root #video #bt-game-list {
grid-template-columns:repeat(6, minmax(auto, 150px))
}
body #app #root #bt-game #tag-list, body #app #root #bt-game #video-list, body #app #root #tag #tag-list, body #app #root #tag #video-list, body #app #root #video #tag-list, body #app #root #video #video-list {
grid-template-columns:repeat(4, 210px)
}
body #app #root .quiz .quiz-list {
grid-template-columns:repeat(4, 263px)
}
body #app #root > .new-games .new-games-list {
grid-template-columns:repeat(8, 120px)
}
body #app #root > .new-games .new-games-list a {
display: none
}
body #app #root > .new-games .new-games-list a:nth-child(-n+8) {
display: block
}
}
@media screen and (min-width: 1024px) and (max-width: 1159px) {
body #app #root .grid-games {
grid-template-areas:"gn gn . gm2 gm2 . ." "gn gn t3 gm2 gm2 . ." "gn gn gm3 gm3 gm4 gm4 ." ". . gm3 gm3 gm4 gm4 ." "gm6 gm6 . tg tg tg ." "gm6 gm6 t4 tg tg tg ." ". t1 . . . . ." "fg fg fg . . . ." "fg fg fg . . . ." "gm5 gm5 . gm9 gm9 . ." "gm5 gm5 . gm9 gm9 . ." ". gm7 gm7 . . . ." ". gm7 gm7 . . . ." "gm8 gm8 gm11 gm11 . . ." "gm8 gm8 gm11 gm11 . . ." ". gm10 gm10 . . . ." ". gm10 gm10 . . . ." ". . t2 . . . .";
grid-template-columns:repeat(7, 120px)
}
body #app #root #bt-game #bt-game-lab, body #app #root #bt-game #bt-game-list, body #app #root #bt-game #tag-lab, body #app #root #bt-game #video-lab, body #app #root #tag #bt-game-lab, body #app #root #tag #bt-game-list, body #app #root #tag #tag-lab, body #app #root #tag #video-lab, body #app #root #video #bt-game-lab, body #app #root #video #bt-game-list, body #app #root #video #tag-lab, body #app #root #video #video-lab {
width: 909px
}
body #app #root #bt-game #bt-game-list, body #app #root #tag #bt-game-list, body #app #root #video #bt-game-list {
grid-template-columns:repeat(6, minmax(auto, 150px))
}
body #app #root #bt-game #tag-list, body #app #root #bt-game #video-list, body #app #root #tag #tag-list, body #app #root #tag #video-list, body #app #root #video #tag-list, body #app #root #video #video-list {
grid-template-columns:repeat(4, 210px)
}
body #app #root .quiz .quiz-list {
grid-template-columns:repeat(3, 263px)
}
body #app #root > .new-games .new-games-list {
grid-template-columns:repeat(7, 120px)
}
body #app #root > .new-games .new-games-list a {
display: none
}
body #app #root > .new-games .new-games-list a:nth-child(-n+7) {
display: block
}
body #app #footer {
margin: 40px 18px 0
}
}
@media screen and (min-width: 920px) and (max-width: 1023px) {
body #app #root .grid-games {
grid-template-areas:"gn gn . gm2 gm2 ." "gn gn t3 gm2 gm2 ." "gn gn gm3 gm3 gm4 gm4" ". . gm3 gm3 gm4 gm4" "gm6 gm6 . tg tg tg" "gm6 gm6 t4 tg tg tg" ". t1 . . . ." "fg fg fg . . ." "fg fg fg . . ." "gm5 gm5 . gm9 gm9 ." "gm5 gm5 . gm9 gm9 ." ". gm7 gm7 . . ." ". gm7 gm7 . . ." "gm8 gm8 gm11 gm11 . ." "gm8 gm8 gm11 gm11 . ." ". gm10 gm10 . . ." ". gm10 gm10 . . ." ". . t2 . . .";
grid-template-columns:repeat(6, 120px)
}
body #app #root #bt-game #bt-game-lab, body #app #root #bt-game #bt-game-list, body #app #root #bt-game #tag-lab, body #app #root #bt-game #video-lab, body #app #root #tag #bt-game-lab, body #app #root #tag #bt-game-list, body #app #root #tag #tag-lab, body #app #root #tag #video-lab, body #app #root #video #bt-game-lab, body #app #root #video #bt-game-list, body #app #root #video #tag-lab, body #app #root #video #video-lab {
width: 676px
}
body #app #root #bt-game #bt-game-list, body #app #root #tag #bt-game-list, body #app #root #video #bt-game-list {
grid-template-columns:repeat(4, minmax(auto, 150px))
}
body #app #root #bt-game #tag-list, body #app #root #bt-game #video-list, body #app #root #tag #tag-list, body #app #root #tag #video-list, body #app #root #video #tag-list, body #app #root #video #video-list {
grid-template-columns:repeat(3, 210px)
}
body #app #root .quiz .quiz-list {
grid-template-columns:repeat(3, 263px)
}
body #app #root > .new-games .new-games-list {
grid-template-columns:repeat(6, 120px)
}
body #app #root > .new-games .new-games-list a {
display: none
}
body #app #root > .new-games .new-games-list a:nth-child(-n+6) {
display: block
}
body #app #footer {
margin: 40px 16px 0
}
body #app #bottom-bar #bottom-left {
margin-left: 9px
}
body #app #bottom-bar #bottom-left img {
margin-right: 20px
}
body #app #bottom-bar #bottom-right {
margin-right: 9px
}
body #app #bottom-bar #bottom-right .bottom-contact, body #app #bottom-bar #bottom-right .bottom-lab {
margin-right: 35px
}
body #app #bottom-bar #bottom-right .bottom-select {
margin-left: -11px
}
}
@media screen and (min-width: 810px) and (max-width: 919px) {
body #app #root .grid-games {
grid-template-areas:"gn gn . gm2 gm2" "gn gn t3 gm2 gm2" "gn gn gm3 gm3 ." ". . gm3 gm3 ." "gm6 gm6 tg tg tg" "gm6 gm6 tg tg tg" ". t1 . . t4" "fg fg fg gm4 gm4" "fg fg fg gm4 gm4" "gm5 gm5 . gm9 gm9" "gm5 gm5 . gm9 gm9" ". gm7 gm7 . ." ". gm7 gm7 . ." "gm8 gm8 gm11 gm11 ." "gm8 gm8 gm11 gm11 ." ". gm10 gm10 . ." ". gm10 gm10 . ." ". . t2 . .";
grid-template-columns:repeat(5, 120px)
}
body #app #root #bt-game #bt-game-lab, body #app #root #bt-game #bt-game-list, body #app #root #bt-game #tag-lab, body #app #root #bt-game #video-lab, body #app #root #tag #bt-game-lab, body #app #root #tag #bt-game-list, body #app #root #tag #tag-lab, body #app #root #tag #video-lab, body #app #root #video #bt-game-lab, body #app #root #video #bt-game-list, body #app #root #video #tag-lab, body #app #root #video #video-lab {
width: 676px
}
body #app #root #bt-game #bt-game-list, body #app #root #tag #bt-game-list, body #app #root #video #bt-game-list {
grid-template-columns:repeat(4, minmax(auto, 150px))
}
body #app #root #bt-game #tag-list, body #app #root #bt-game #video-list, body #app #root #tag #tag-list, body #app #root #tag #video-list, body #app #root #video #tag-list, body #app #root #video #video-list {
grid-template-columns:repeat(3, 210px)
}
body #app #root .quiz .quiz-list {
grid-template-columns:repeat(2, 263px)
}
body #app #root > .new-games .new-games-list {
grid-template-columns:repeat(5, 120px)
}
body #app #root > .new-games .new-games-list a {
display: none
}
body #app #root > .new-games .new-games-list a:nth-child(-n+5) {
display: block
}
body #app #footer {
margin: 40px 57px 0
}
body #app #bottom-bar #bottom-left img {
margin-right: 8px
}
body #app #bottom-bar #bottom-right .bottom-contact, body #app #bottom-bar #bottom-right .bottom-lab {
margin-right: 9px
}
body #app #bottom-bar #bottom-right .bottom-select {
margin-left: 6px
}
}
@media screen and (max-width: 809px) {
body {
background-color: #1e1e28;
border: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 0;
margin: 0
}
body #header {
align-items: center;
background-color: #161620;
border-bottom: .01rem solid #303030;
border-radius: .02rem;
box-shadow: 0 0 .02rem #13131d;
display: flex;
height: .8rem;
position: fixed;
z-index: 100;
width: 100%;
top: 0;
}
body #header #tags, body #header .header-btn {
display: none
}
body #header #header-left .header-logo-a {
height: .5rem;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 2.15rem
}
body #header #header-left .header-logo-a .header-logo {
height: 100%;
width: 100%
}
body #header .header-clock {
display: flex;
left: .2rem;
position: absolute;
top: 50%;
transform: translateY(-50%)
}
body #header .header-clock .icon-wrapper {
height: .4rem;
width: .4rem
}
body #app #footer .breadcrumb .breadcrumb-item a {
color: #b2b2b2;
font-size: .22rem;
text-decoration: none
}
body #app #footer .breadcrumb .breadcrumb-item:not(:first-child):before {
color: #b2b2b2;
content: "›";
font-size: .26rem;
margin: 0 .1rem
}
body #app #footer .footer-div .footer-content p {
line-height: 1.5;
margin-bottom: .24rem
}
body #app #footer .footer-div .footer-content p a {
color: #fce331;
outline: none;
text-decoration: none
}
body #app #footer .footer-div .footer-content p .propmt:first-of-type {
color: #ff3b3b
}
body #app #footer .footer-div .footer-content p .propmt:last-of-type {
color: #65ffef
}
body #app #footer .footer-div .footer-content p:last-of-type {
margin-bottom: 0
}
body #app #footer .footer-div .footer-content span {
color: #fce331
}
body #app #footer .footer-div .footer-content li {
list-style: none;
margin-bottom: .42rem
}
body #app #footer .footer-div .footer-content li:last-child {
margin-bottom: 0
}
body #app #footer .footer-div .footer-content .content-btns a, body #app #footer .footer-div .footer-content .content-btns button {
background-color: unset;
border: .01rem solid #c9c9c9;
border-radius: .1rem;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: .26rem;
height: .34rem;
line-height: .34rem;
margin-bottom: .16rem;
margin-right: .2rem;
padding: 0 .1rem;
text-decoration: none
}
body #app #footer .footer-div .footer-content .content-btns a:nth-child(2), body #app #footer .footer-div .footer-content .content-btns button:nth-child(2) {
display: none
}
body #app #footer .footer-div .footer-content .content-btns a:hover, body #app #footer .footer-div .footer-content .content-btns button:hover {
border: .01rem solid #fce331;
color: #fce331
}
body #app #footer .footer-div .footer-content.footer-content-tag .link-item a {
color: #c9c9c9;
cursor: pointer;
display: inline-block;
margin-bottom: .24rem;
outline: none;
text-decoration: none
}
body #app #footer .footer-div .footer-content.footer-content-tag p {
margin-bottom: .12rem
}
body #app #footer .footer-div .footer-content.footer-content-tag p:first-of-type {
margin-top: .12rem
}
body #app #footer .footer-div .footer-content.footer-content-tag p:last-of-type {
margin-bottom: 0
}
body #app #footer .footer-div ul p {
line-height: unset !important;
margin-bottom: .26rem
}
body #app #footer .footer-div-tag .footer-content p {
line-height: 1.5
}
body #app #footer .footer-div-tag .footer-content p a {
color: #c9c9c9;
outline: none;
text-decoration: none
}
body #app #footer .footer-div-tag .footer-content span {
color: #fce331
}
body #app #footer .footer-div-tag .footer-content li {
list-style: none;
margin-bottom: .42rem
}
body #app #footer .footer-div-tag .footer-content li:last-child {
margin-bottom: 0
}
body #app #footer .footer-div-tag .footer-content .content-btns button {
background-color: unset;
border: .01rem solid #c9c9c9;
border-radius: .1rem;
color: #fff;
cursor: pointer;
font-size: .26rem;
height: .5rem;
margin-right: .2rem;
padding: 0 .1rem
}
body #app #footer .footer-div-tag .footer-content .content-btns button:nth-child(2) {
display: none
}
body #app #footer .footer-div-tag .footer-content .content-btns button:hover {
border: .01rem solid #fce331;
color: #fce331
}
body #app #bottom-bar #bottom-left {
display: none
}
body #app #bottom-bar #bottom-right .bottom-prompt a {
outline: none;
text-decoration: none
}
body #app #bottom-bar #bottom-right .bottom-prompt > a {
color: #fce331
}
body #app #bottom-bar #bottom-right .bottom-lab {
color: #c9c9c9;
display: block;
font-size: .26rem;
margin-top: .42rem;
outline: none;
text-align: center;
text-decoration: none
}
body #app #bottom-bar #bottom-right #bottom-logo {
align-items: center;
display: flex;
justify-content: center;
margin: .42rem auto;
width: 95%;
}
body #app #bottom-bar #bottom-right #bottom-logo img {
height: .312rem;
margin-right: .36rem;
width: 1.32rem
}
body #app #bottom-bar #bottom-right #bottom-logo #bottom-span {
font-size: .26rem;
height: .3rem;
position: relative;
width: 1.8rem
}
body #app #bottom-bar #bottom-right #bottom-logo #bottom-span span:first-child {
/*color: #98ffff;*/
left: -.01rem;
position: absolute;
top: -.01rem
}
body #app #bottom-bar #bottom-right #bottom-logo #bottom-span span:nth-child(2) {
color: #fe398a;
left: .01rem;
position: absolute;
top: .01rem
}
body #app #bottom-bar #bottom-right #bottom-logo #bottom-span span:nth-child(3) {
color: #fff;
left: 0;
position: absolute;
top: 0
}
body #app #bottom-bar #bottom-right .bottom-select .select-list a {
color: #fff;
display: block;
font-size: .24rem;
margin-top: .38rem;
outline: none;
text-decoration: none
}
body #app #bottom-bar #bottom-right .bottom-select .select-list a:first-child {
margin-top: 0
}
body #app #bottom-bar #bottom-right #bottom-btn-list {
align-items: center;
border-radius: .5rem;
bottom: 0;
display: flex;
height: 1rem;
justify-content: center;
left: 0;
margin-bottom: .12rem;
margin-left: .2rem;
margin-right: .2rem;
overflow: hidden;
position: fixed;
right: 0;
z-index: 10000000;
}
body #app #bottom-bar #bottom-right #bottom-btn-list > a, body #app #bottom-bar #bottom-right #bottom-btn-list > div {
align-items: center;
background-color: #10101a;
box-shadow: 0 0 .02rem #13131d;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100%;
justify-content: center;
outline: none;
text-decoration: none
}
body #app #bottom-bar #bottom-right #bottom-btn-list > a .icon-wrapper, body #app #bottom-bar #bottom-right #bottom-btn-list > div .icon-wrapper {
align-items: center;
display: flex;
height: .3rem;
justify-content: center;
width: .3rem
}
body #app #bottom-bar #bottom-right #bottom-btn-list > a .icon-wrapper img, body #app #bottom-bar #bottom-right #bottom-btn-list > a .icon-wrapper svg, body #app #bottom-bar #bottom-right #bottom-btn-list > div .icon-wrapper img, body #app #bottom-bar #bottom-right #bottom-btn-list > div .icon-wrapper svg {
height: 100%;
width: 100%
}
body #app #bottom-bar #bottom-right #bottom-btn-list > a .icon-subscribe, body #app #bottom-bar #bottom-right #bottom-btn-list > div .icon-subscribe {
transform: scale(1.1)
}
body #app #bottom-bar #bottom-right #bottom-btn-list > a .icon-search, body #app #bottom-bar #bottom-right #bottom-btn-list > div .icon-search {
transform: scale(.85)
}
body #app #bottom-bar #bottom-right #bottom-btn-list > a .icon-bt-game, body #app #bottom-bar #bottom-right #bottom-btn-list > div .icon-bt-game {
transform: scale(1.3)
}
body #app #bottom-bar #bottom-right #bottom-btn-list > a .icon-question, body #app #bottom-bar #bottom-right #bottom-btn-list > div .icon-question {
transform: scale(.9)
}
body #app #bottom-bar #bottom-right #bottom-btn-list > a span, body #app #bottom-bar #bottom-right #bottom-btn-list > div span {
color: #707387;
font-size: .2rem;
font-weight: 600;
line-height: normal;
margin-top: .12rem
}
body #app #bottom-bar #bottom-right #bottom-btn-list.bottom-btn-list > a, body #app #bottom-bar #bottom-right #bottom-btn-list.bottom-btn-list > div {
flex: 1
}
body #recent iframe, body .pic {
height: 100%;
width: 100%
}
body .pic {
display: block;
filter: brightness(110%) contrast(110%)
}
body svg {
height: 100%;
width: 100%
}
body::-webkit-scrollbar {
background-color: #191923;
height: .06rem;
width: .06rem
}
body::-webkit-scrollbar-thumb {
background-color: #262637;
border-radius: .1rem
}
body::-webkit-scrollbar-track {
background-color: transparent
}
body .neon:hover div {
display: none
}
#app #root {
background-color: #1e1e28;
margin: .2rem .2rem 0;
min-height: 5rem;
position: relative
}
#app #root .grid-games {
display: grid;
gap: .19rem;
grid-template-columns: repeat(3, 1.88rem);
justify-content: center;
}
#app #root .grid-games .grid-game {
border-radius: .1rem;
box-shadow: 0 0 .08rem #36365c;
height: 1.88rem;
outline: none;
position: relative;
text-decoration: none;
width: 1.88rem
}
#app #root .grid-games .grid-game img {
border-radius: .1rem
}
#app #root .grid-games .grid-game .grid-video, #app #root .grid-games .grid-game video {
display: none
}
#app #root .grid-games .grid-game .grid-game-new i {
margin-left: -.05rem;
transform: scale(.7)
}
#app #root .grid-games .grid-game .grid-game-new span {
color: #fff;
font-size: .2rem
}
#app #root .grid-games .grid-game .name {
display: none
}
#app #root .grid-games .grid-girls-games .img-wrapper img {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
#app #root .grid-games .grid-girls-games .img-wrapper img.curr {
z-index: 1
}
#app #root .grid-games .grid-best-games .grid-game-3d > img, #app #root .grid-games .grid-pokemon-games .grid-game-3d > img, #app #root .grid-games .grid-popular-games .grid-game-3d > img {
border-radius: .1rem;
height: 100%;
overflow: hidden;
width: 100%
}
#app #root #pageDiv a, #app #root #pageDiv div {
background-color: #2d2d3f;
border-radius: .1rem;
color: #fff;
cursor: pointer;
font-size: .26rem;
height: .7rem;
line-height: .7rem;
margin-right: .2rem;
outline: none;
text-align: center;
text-decoration: none;
width: .7rem
}
#app #root #pageDiv a i, #app #root #pageDiv div i {
display: block;
margin: .2rem auto
}
}
@media screen and (min-width: 810px) {
#root #tag #tag-lab {
align-items: center;
display: flex;
margin: 30px auto 16px;
position: relative;
width: 1608px
}
#root #tag #tag-lab h1, #root #tag #tag-lab span {
color: #fff;
font-size: 24px;
line-height: normal;
margin-top: 5px;
font-weight: bold;
}
#root #tag #tag-lab a {
color: #fce331;
float: right;
font-size: 24px;
outline: none;
position: absolute;
right: 0;
text-decoration: none
}
#root #tag #tag-lab a:hover {
color: #fcc031
}
#root #tag #tag-list {
display: grid;
gap: 23px;
grid-auto-columns: 210px;
grid-auto-flow: row dense;
grid-auto-rows: 100px;
grid-template-columns:repeat(7, 210px);
grid-template-rows:repeat(auto-fill, 100px);
justify-content: center
}
#root #tag #tag-list .grid-tag {
align-items: center;
background-color: #f4f2fb;
border: 2px solid #fff;
border-radius: 10px;
box-shadow: 0 0 8px #36365c;
display: flex;
height: 100px;
justify-content: center;
outline: none;
text-decoration: none;
width: 206px
}
#root #tag #tag-list .grid-tag img {
border-radius: 10px;
filter: unset;
height: 90px;
margin-left: 3px;
overflow: hidden;
width: 90px
}
#root #tag #tag-list .grid-tag span {
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
color: #171721;
display: inline-block;
display: -webkit-box;
font-size: 16px;
font-weight: 600;
line-height: 1.5;
margin-left: 9px;
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
width: 100px
}
#root #video #video-lab .video-lab-play i {
left: 7px;
position: absolute;
top: 7px;
transform: scale(.9)
}
#root #video #video-lab span {
color: #fff;
font-size: 24px
}
#root #video #video-lab a {
color: #fce331;
float: right;
font-size: 24px;
outline: none;
position: absolute;
right: 0;
text-decoration: none
}
#root #video #video-lab a:hover {
color: #fcc031
}
#root #video #video-list .grid-video-list .grid-movies .grid-movies-play i {
left: 35%;
position: absolute;
top: 33%
}
#root #video #video-list .grid-video-list .grid-movies img {
border-radius: 10px
}
#root #video #video-list .grid-video-list span {
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
color: #fff;
display: block;
display: -webkit-box;
font-size: 16px;
margin: auto;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
width: 180px
}
#root .quiz {
margin-top: 30px
}
#root .quiz .quiz-lab {
align-items: center;
display: flex;
grid-column: 1/-1;
grid-row: 1;
position: relative
}
#root .quiz .quiz-lab .quiz-lab-play {
background-color: #0f0f17;
border-radius: 50%;
height: 40px;
margin-right: 12px;
position: relative;
width: 40px
}
#root .quiz .quiz-lab .quiz-lab-play i {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%) scale(.8)
}
#root .quiz .quiz-lab span {
color: #fff;
font-size: 24px
}
#root .quiz .quiz-list {
display: grid;
gap: 23px;
grid-template-columns:repeat(6, 263px);
justify-content: center;
margin: 0 auto
}
#root .quiz .quiz-list .quiz-item {
border-radius: 10px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .2);
overflow: hidden;
transition: transform .125s ease-out
}
#root .quiz .quiz-list .quiz-item .quiz-href {
text-decoration: none
}
#root .quiz .quiz-list .quiz-item .quiz-href .quiz-banner {
padding-top: 55.8%;
position: relative
}
#root .quiz .quiz-list .quiz-item .quiz-href .quiz-banner img {
background-color: #fff;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
#root .quiz .quiz-list .quiz-item .quiz-href .quiz-info {
background-color: #fff;
padding: 16px 12px 9px
}
#root .quiz .quiz-list .quiz-item .quiz-href .quiz-info .quiz-desc {
font-size: 16px;
height: 48px;
margin-bottom: 14px;
position: relative
}
#root .quiz .quiz-list .quiz-item .quiz-href .quiz-info .quiz-desc .desc-text {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
color: #333;
display: -webkit-box;
line-height: 1.5;
overflow: hidden;
position: absolute;
text-overflow: ellipsis;
top: 50%;
transform: translateY(-50%);
width: 100%
}
#root .quiz .quiz-list .quiz-item .quiz-href .quiz-info .take-quiz {
background-color: #08f;
border-radius: 10px;
color: #fff;
font-size: 18px;
height: 50px;
line-height: 50px;
text-align: center
}
#root .quiz .quiz-list .quiz-item:hover {
transform: scale(.99)
}
#root .quiz .quiz-list .quiz-item:hover .quiz-href .quiz-banner {
opacity: .9
}
#root > .new-games .new-games-list a {
border-radius: 10px;
box-shadow: 0 0 8px #36365c;
overflow: hidden;
text-decoration: none
}
#root > .new-games .new-games-list a .grid-game-3d {
border-radius: 10px;
height: 100%;
overflow: hidden;
width: 100%
}
#root > .new-games .new-games-list a .grid-game-3d .btn {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
left: 0;
opacity: 0;
position: absolute;
top: 0;
transition: all .1s;
width: 100%
}
#root > .new-games .new-games-list a .grid-game-3d .btn .btn-wrapper {
align-items: center;
background-color: #573e83;
border-radius: 10px;
color: #fff;
display: flex;
flex-direction: column;
height: 36px;
justify-content: center;
position: relative;
text-align: center;
width: 80px;
z-index: 1
}
#root > .new-games .new-games-list a .grid-game-3d .btn .btn-wrapper .game-name {
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
bottom: 2px;
display: -webkit-box;
font-size: 12px;
line-height: 16px;
overflow: hidden;
position: absolute;
text-overflow: ellipsis;
transform: scale(.8);
width: 80%
}
#root > .new-games .new-games-list a:hover {
box-shadow: none;
transform: scale(1.5);
transition: all .2s ease-out;
z-index: 999
}
#root > .new-games .new-games-list a:hover .grid-game-3d .btn {
opacity: 1;
transition: all .1s
}
#root > .new-games .new-games-list a.tag-1 .grid-game-3d {
align-items: center;
background-color: #982dd5;
display: flex;
flex-direction: column;
justify-content: center
}
}
@media screen and (max-width: 809px) {
#root #tag #tag-lab {
align-items: center;
display: flex;
margin-bottom: .2rem;
position: relative
}
#root #tag #tag-lab h1, #root #tag #tag-lab span {
color: #fff;
font-size: .28rem;
line-height: normal;
margin-top: .05rem
}
#root #tag #tag-lab a {
color: #fce331;
float: right;
font-size: .26rem;
outline: none;
position: absolute;
right: 0;
text-decoration: none
}
#root #tag #tag-list {
display: grid;
gap: .16rem;
grid-auto-columns: 2.92rem;
grid-auto-flow: row dense;
grid-auto-rows: 1.38rem;
grid-template-columns:repeat(2, 2.92rem);
grid-template-rows:repeat(auto-fill, 1.38rem);
justify-content: center
}
#root #tag #tag-list .grid-tag {
align-items: center;
background-color: #ecfcff;
border: .02rem solid #fff;
border-radius: .12rem;
box-shadow: 0 0 .08rem #31314f;
display: flex;
height: 1.38rem;
outline: none;
text-decoration: none;
width: 2.92rem
}
#root #tag #tag-list .grid-tag img {
border-radius: .12rem;
filter: unset;
height: 1.28rem;
margin-left: .03rem;
margin-right: .03rem;
width: 1.28rem
}
#root #tag #tag-list .grid-tag span {
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
color: #171721;
display: inline-block;
display: -webkit-box;
font-size: .24rem;
font-weight: 600;
line-height: 1.5;
margin-left: .09rem;
overflow: hidden;
text-align: left;
text-overflow: ellipsis
}
#root #video #video-lab .video-lab-play i {
margin: .1rem;
position: absolute
}
#root #video #video-lab span {
color: #fff;
font-size: .28rem
}
#root #video #video-lab a {
color: #fce331;
float: right;
font-size: .26rem;
outline: none;
position: absolute;
right: 0;
text-decoration: none
}
#root #video #video-list .grid-video-list .grid-movies img {
border-radius: .1rem
}
#root #video #video-list .grid-video-list span {
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
color: #fff;
display: block;
display: -webkit-box;
font-size: .24rem;
margin: auto;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
width: 2.5rem
}
#root .quiz .quiz-lab {
align-items: center;
display: flex;
margin-bottom: .2rem;
margin-top: .4rem;
position: relative
}
#root .quiz .quiz-lab .quiz-lab-play {
background-color: #0f0f17;
border-radius: 50%;
height: .46rem;
margin-right: .2rem;
position: relative;
width: .46rem
}
#root .quiz .quiz-lab .quiz-lab-play i {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%)
}
#root .quiz .quiz-lab span {
color: #fff;
font-size: .28rem
}
#root .quiz .quiz-list .quiz-item {
border-radius: .1rem;
box-shadow: 0 .02rem .02rem 0 rgba(0, 0, 0, .2);
margin-bottom: .28rem;
overflow: hidden;
width: 100%
}
#root .quiz .quiz-list .quiz-item .quiz-href {
text-decoration: none
}
#root .quiz .quiz-list .quiz-item .quiz-href .quiz-banner {
height: 3.57rem;
position: relative
}
#root .quiz .quiz-list .quiz-item .quiz-href .quiz-banner img {
background-color: #fff;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%
}
#root .quiz .quiz-list .quiz-item .quiz-href .quiz-info {
background-color: #fff;
padding: .24rem .2rem .38rem
}
#root .quiz .quiz-list .quiz-item .quiz-href .quiz-info .quiz-desc {
font-size: .28rem;
position: relative
}
#root .quiz .quiz-list .quiz-item .quiz-href .quiz-info .quiz-desc .desc-text {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
color: #333;
display: -webkit-box;
line-height: 1.5;
overflow: hidden;
text-overflow: ellipsis;
top: 50%;
width: 100%
}
#root .quiz .quiz-list .quiz-item .quiz-href .quiz-info .take-quiz {
background-color: #08f;
border-radius: .1rem;
color: #fff;
font-size: .28rem;
font-weight: 700;
height: .88rem;
line-height: .88rem;
margin-top: .28rem;
text-align: center
}
#root > .new-games .new-games-list a {
border-radius: .1rem;
box-shadow: 0 0 .08rem #36365c;
display: none;
overflow: hidden;
text-decoration: none
}
#root > .new-games .new-games-list a .grid-game-3d {
border-radius: .1rem;
height: 100%;
overflow: hidden;
width: 100%
}
#root > .new-games .new-games-list a:nth-child(-n+10) {
display: block
}
#root > .new-games .new-games-list a.tag-1 .grid-game-3d {
align-items: center;
background-color: #982dd5;
display: flex;
flex-direction: column;
justify-content: center
}
}
#tag-list {
margin: 0 0 .2rem;
}
.quiz-lab-play {
display: flex;
}
.quiz-lab-play img {
width: 70%;
height: 70%;
margin: auto;
}
@media screen and (min-width: 810px) {
.all_info_title {
align-items: center;
display: flex;
grid-column: 1 / -1;
grid-row: 1;
position: relative;
}
.all_info_title_icon {
background-color: #0f0f17;
border-radius: 50%;
height: 40px;
margin-right: 12px;
position: relative;
width: 40px;
}
#all_info_title span {
font-size: 24px;
}
.all-games {
gap: 1px 23px !important;
}
}
@media screen and (max-width: 809px) {
.all_info_title {
align-items: center;
display: flex;
margin-bottom: .2rem;
margin-top: .4rem;
position: relative;
}
.all_info_title_icon {
background-color: #0f0f17;
border-radius: 50%;
height: .46rem;
margin-right: .2rem;
position: relative;
width: .46rem;
}
#all_info_title span {
font-size: .28rem;
}
.all-games {
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
}
.all_info_title_icon {
display: flex;
}
.all_info_title_icon img {
width: 60%;
height: 60%;
margin: auto;
}
.all_info_title span {
font-weight: bold;
color: #fff;
font-size: 24px;
}
.quiz-lab span {
font-weight: bold;
}
#root #tag #tag-lab h1, #root #tag #tag-lab span {
font-weight: bold;
}
#root .quiz .quiz-list .quiz-item .quiz-href .quiz-info .quiz-desc .desc-text {
font-weight: bold;
}
.bottom-lab {
font-weight: bold;
}
.take-quiz {
font-weight: bold;
}
.name {
font-weight: bold;
}
#app #root #area #middle #middle-header .middle-header-btn-group .middle-header-btn {
font-weight: bold;
}
.pic {
border-radius: 12px;
}
body #header .header-btn .header-btn-span, body #header .header-btn span {
font-weight: bold;
}
.desc_btn {
border: solid 1px #d3d3d3;
color: #fff;
font-weight: bold;
text-decoration: none;
padding: 5px 10px;
border-radius: 8px;
background: #0287ff;
font-size: 0.3rem;
margin: .15rem 0;
}
@media screen and (max-width: 809px) {
#description_view {
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 10;
-webkit-box-orient: vertical;
overflow: hidden;
}
.search-content {
display: none !important;
}
}
@media screen and (min-width: 810px) {
.desc_btn {
display: none !important;
}
#mobile-search {
display: none !important;
}
}
.search-content {
display: flex;
align-items: center;
border-radius: 1rem;
height: 40px;
color: #ffffff;
background: #333333;
width: 250px;
font-size: 15px;
border: none;
outline: none;
margin-left: .1rem;
}
#search_input {
border-radius: 1rem;
height: 40px;
color: #ffffff;
background: #333333;
width: 80%;
font-size: 15px;
margin-left: .05rem;
border: none;
outline: none;
}
.search-content img {
width: 20px;
height: 20px;
float: right;
margin-right: .1rem;
}
#mobile-search {
display: none;
width: 100%;
height: 100%;
position: fixed;
z-index: 10000;
align-items: center;
justify-content: center;
}
.search-bg {
width: 100%;
height: 100%;
background: #2f2e2ede;
}
.search-main {
width: 300px;
height: 50px;
background: #c7c7c7;
color: #fff;
position: absolute;
margin: auto;
border-radius: 100px;
display: flex;
align-items: center;
}
.search-main input {
width: 82%;
border-radius: 1rem;
padding-left: .1rem;
background: #c7c7c7;
color: #333;
font-size: 20px;
margin-left: .2rem;
border: none;
outline: none;
}
.search-main img {
width: 25px;
height: 25px;
float: right;
}
#app {
margin-top: 40px;
}
.back_to_top {
position: fixed;
right: .2rem;
bottom: 140px;
z-index: 1000;
/* height: 3rem; */
/* width: 3rem; */
box-shadow: 0 0 28px #0000009c;
cursor: pointer;
display: flex;
background: linear-gradient(270deg, rgb(69 132 169) 0%, rgb(88 204 250) 100%);
border-radius: 20px;
padding: 10px;
font-weight: bold;
font-size: large;
color: #fff;
}
.back_to_top img {
width: 65%;
height: 65%;
}
@media screen and (max-width: 809px) {
#tag:first-child {
margin-top: 1rem;
}
}
.adBox {
width: calc(100% + 2rem - 20px);
margin-left: calc(-1rem + 10px);
border-radius: 8px;
margin-top: 30px;
margin-bottom: 30px;
height: auto;
display: flex;
justify-content: center;
background-color: #CCCCCC;
color: #000;
}
.adBox0 {
width: 100%;
overflow: hidden;
height: auto;
display: flex;
align-items: center;
flex-direction: column;
position: relative;
padding: 15px 0 15px 0;
}
body #app #bottom-bar #bottom-left {
font-size: 15px;
margin: 20px auto 0;
/*text-align: center;*/
font-weight: bold;
color: #fff;
}
@media screen and (max-width: 809px) {
body #app #bottom-bar #bottom-left {
display: none;
}
}
body #app #bottom-bar #bottom-right #bottom-logo #bottom-span {
height: .64rem;
margin: 0 auto 1.44rem;
position: relative;
width: 100%;
text-align: center;
font-weight: bold;
color: #c9c9c9;
}