/* 轮播图样式 */
.hero-carousel {
  position: relative;
  margin-bottom: 2rem;
  height: 550px;
  border-radius: 12px;
  overflow: hidden;
}

/* 淡入淡出效果 */
.carousel-fade .carousel-item {
  opacity: 0;
  transition-property: opacity;
  transform: none;
}

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-start,
.carousel-fade .carousel-item-prev.carousel-item-end {
  opacity: 1;
}

.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
  opacity: 0;
}

.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-end,
.carousel-fade .carousel-item-start {
  transition: opacity 0.5s ease-in-out;
}

/* 自定义轮播控制按钮样式 - 支持Bootstrap和Swiper */
.swiper-pagination,
.carousel-indicators {
  position: absolute;
  bottom: 20px;
  right: 0;
  padding-right: 20px;
  display: flex;
  gap: 14px;
  z-index: 10;
  transform: translateX(0);
  justify-content: flex-end;
  margin: 0;
}

.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal,
.carousel-indicators {
  width: auto;
  display: flex;
  position: absolute;
  right: 32px;
  bottom: 24px;
  flex-wrap: wrap;
}

.swiper-pagination-bullet,
.carousel-indicators li {
  width: 16px;
  height: 16px;
  background-color: #fff;
  border-radius: 50%;
  transition: all 0.3s ease;
  border: none;
  margin: 0;
  list-style-type: none;
}

.carousel-indicators [data-bs-target]::marker {
  display: none;
}

.carousel-indicators [data-bs-target] {
    width: 16px;
    height: 16px;
}

.swiper-pagination-bullet-active,
.carousel-indicators .active {
  background-color: transparent;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAxCAMAAAB0zqAPAAABPlBMVEUAAAANje8WqvMMjPEQl+8SnPMLifEKhfAZvPMQf+8JhPALivEMjvEewPcTpPMgw/cIgu8gw/YbtPUQmPIOkvEKhfEPk/MarfULifAOkPEWp/QMjfELiPAbtPUkzPcdvvQUofMZrfYOlPELhO8as/UlzvYgvvQasPMVovIOjfEOj/APlPEWo/Qlz/gJg/Ahx/YRm/IPkfIcufYXqvQjyvcTnPIZsPQZrfIkz/cgwfUasfMUo/MJg/EgxPcgxfUPk/EXqfMRmvIQl/IToPMVpPMPlfINj/ESnPISnvMWp/QZr/QMi/EdufUZsPQas/UVovIQmPINkvENjfEbtfUYrPQLifEhxvYKh/Afv/YevfUgwvYMjvEJhPAdu/Uiyvcct/UUovIctvUYrfQUovMRm/IKhfAgw/YOkvIkzfcNkPK29TmOAAAAP3RSTlMAIP4/EP7fYBAQv5+PPz8g79/f339/TyDv396/r5+Pj49fX1BP7+/v7+/v7t/e3r+/v76+n5+Pj39/f39vX0/ZX7+4AAACMUlEQVRIx8WVaV/aQBCHi8FIK1ABtVbrUe19n96akABLDApEAcV4cYnf/ws4O9kVY0iyvnJfP79/npnZzD579Hkujr6x4xFRdsLuymOC7JTdbdTkaTFdyprWuJDIC2Atq1AV0ZZsyD0tVJXMskAwsteKVsmEao81TBMc8pqWJf8jIdXNoAPkZklRX3oV3LaaRR3ylexoUW9/exvERmfM0xuFseWcMfsuAB5HB/DtEL1cNlR13l9EMi2aC2yx3c4Z6khrb9WXnrMKgFY6pOjktvb2037a0w6bJehrUPbgMO2j/Rl884zNqeoRZS9K8y+HsZN0bhpjDYe9KpVOFofQ0S9VdCD6JaCcPTs5Tu144ThzQHaEOQDbbKZ2PW1TFF4bZ6+Q7dXr/x6K/Mb+IntXW8lhz88X3LTEci/LbodeD9j+dxcb4T3DuaEDzT3G3H7f3TXsGcH+Ht3zbVL2/bqLfU19Rwk4DGbBaqsvxFzosoK5rDZX7s+Ei4TYah58O1gbzo37phKe9tL7gLltmtviDh82Yt6tVrhGX3QYsIseEhoGd5LPeMD+SQz9iYAFX+Zg4CzSSHpjZYv78nv2cTPms034fsDcHMx4jZHeI+PeobkE2b9J3994pQYszqKjg8NsMmj5AUt9cRaftqIBaKThsBrt75I/iQ1j+xd8f+HnA2Jxr1M2kwxdv3bDhFzl62Q0dK3/6KJDHMjwWBvYOUnoGYI3S5ZE382JKdEneWUbyKc7t70+1t0JhE4KAAAAAElFTkSuQmCC);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* 确保轮播内容样式一致 */
.swiper-slide img,
.carousel-item img {
  width: 100%;
  height: 550px;
  object-fit: cover;
}

/* 确保轮播容器有正确的高度 */
.swiper-container,
.carousel-inner,
.carousel-item {
  height: 100%;
}

.swiper-wrapper,
.carousel-inner {
  height: 100%;
}

.swiper-slide,
.carousel-item {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-caption {
  top: 335px;
  text-align: left;
  left: 32px;
}

.carousel-caption h5 {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.carousel-caption p {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

.carousel-caption .btn {
  background: linear-gradient(84deg, #1954ab 2.05%, #0286ff 29.31%, #31ebf6 75.49%, #ccfbff 100%);
  border: none;
  padding: 0.75rem 2rem;
  font-size: 1rem;
  transition: all 0.3s;
}

.carousel-caption .btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(31, 115, 255, 0.4);
}

/* 游戏分类样式 */
.section-title {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-title a {
  color: var(--primary-color);
  font-size: 1rem;
  text-decoration: none;
}

/* 优化平台图标样式 */
.platform-icon {
  color: var(--text-secondary);
  font-size: 1.2rem;
}

/* 调整pop元素的启动游戏按钮样式，使其与参考图片一致 */
.pop a {
  background: linear-gradient(90deg, #0070f3, #3291ff);
  color: white;
  text-align: center;
  padding: 0.75rem;
  border-radius: 25px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-sizing: border-box;
}


  align-items: center;
  gap: 0.25rem;
}

.pop .game-label {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}



.pop .release-date {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.pop .platfrom {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.pop .platfrom .name {
  color: rgba(255, 255, 255, 0.85);
  margin-right: 0.5rem;
  font-size: 0.9rem;
}

.pop .platfrom i {
  margin-right: 0.5rem;
  color: rgba(255, 255, 255, 0.85);
}

.pop .action-buttons {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  box-sizing: border-box;
}

.pop .filter-label {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  box-sizing: border-box;
}

.pop .play-button {
  flex: 1;
  background: linear-gradient(84deg, #1954ab 2.05%, #0286ff 29.31%, #31ebf6 75.49%, #ccfbff 100%);
  color: white;
  text-align: center;
  padding: 0.75rem;
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-sizing: border-box;
}

.pop .favorite-button {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  padding: 0.75rem;
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  min-width: 60px;
}

.pop .play-button:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(31, 115, 255, 0.4);
}

.pop .favorite-button:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* 全新的鼠标悬停效果 */
.col-md-3.col-sm-6:hover + .pop,
.col-md-3.col-sm-6:hover .pop {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1.2);
  transition: all 0.3s ease-out;
}

/* 排行榜样式 */
[data-v-64c60542]:root {
    --app-back-wrap-visibility: visible;
    --app-back-wrap-mask-main-bg: rgba(29, 31, 36, 0.7);
    --app-back-wrap-color: #1d1f24
}

.t-game-card-history[data-v-64c60542] {
    width: 172px;
    position: relative;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.t-game-card-history:hover .menu[data-v-64c60542] {
    display: block
}

.t-game-card-history.normal .t-game-card-history-box .info .btn.play[data-v-64c60542]:hover {
    background: linear-gradient(84deg, #1954ab 2.05%, #0286ff 29.31%, #31ebf6 75.49%, #ccfbff 100%);
    line-height: 28px;
    border: none
}

.t-game-card-history.cloud .t-game-card-history-box .info .btn.play[data-v-64c60542]:hover {
    background: -webkit-gradient(linear, left top, right top, color-stop(.13%, #00d8a4), color-stop(55.09%, #2fdee9), to(#ccfbff));
    background: linear-gradient(90deg, #00d8a4 .13%, #2fdee9 55.09%, #ccfbff 100%);
    line-height: 28px;
    border: none
}

.t-game-card-history .menu[data-v-64c60542] {
    display: none;
    position: absolute;
    top: -6px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: rgba(29,31,36,0.9);
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAAAxBAMAAACBslwvAAAAHlBMVEUAAAD///////////////////////////////////8kfJuVAAAACnRSTlMAfz8wIGdQOBgI6T/1ZQAAADVJREFUOMtjGJnAyAGHBKugEA4ZQ0FBHJoSBQUNsMsUCgo2YJeZKiiEx22DFoyG22joDBMAAKQbDFjWIh26AAAAAElFTkSuQmCC);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 1
}

.t-game-card-history .menu[data-v-64c60542]:hover {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAAAxBAMAAACBslwvAAAAIVBMVEUAAAD////////////////////////////////////////PIev5AAAACnRSTlMAYH8/z5+AbzAQ21PPWgAAADZJREFUOMtjGJlAyACHBMuqZThkpFatwqEpatUqAewyVatWNWCXmbJqER63DVowGm6joTNMAABxxhwnUHMcDwAAAABJRU5ErkJggg==)
}

.t-game-card-history .menu:hover .menu-box[data-v-64c60542] {
    display: block
}

.t-game-card-history .menu .menu-box[data-v-64c60542] {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    margin-top: 50%;
    padding-right: 4px;
    -webkit-transform: translate(-24px, -50%);
    transform: translate(-24px, -50%)
}

.t-game-card-history .menu .menu-box .menu-item-list[data-v-64c60542] {
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(29,31,36,0.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.t-game-card-history .menu .menu-box .menu-item-list .menu-item[data-v-64c60542] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 96px;
    height: 32px;
    padding: 4px 8px;
    font-size: 12px;
    line-height: 12px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer
}

.t-game-card-history .menu .menu-box .menu-item-list .menu-item .icon[data-v-64c60542] {
    margin-right: 8px;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center
}

.t-game-card-history .menu .menu-box .menu-item-list .menu-item .icon.icon-delete[data-v-64c60542] {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAAAxCAMAAABEQrEuAAAAaVBMVEUAAAD/////////UlL/////////////////////////////////////////////////////////////////////////////V1f/////WVn/////b2//T0//////YmL/////////m5v/SUmEfqTLAAAAInRSTlMADauGFpZJoYFwXFVAIAprYDQqeCuLjWhlZ1EypIpJPx8cl8AhgwAAAXJJREFUSMfdldt2hCAMRYWiXBQVtTrT6f3/P7LR1TEiQVxr3mY/ao7JSSRkT41wVVmW1VCfCx8aye98tDYVXpeS+6jq+Pv5EiWVNsb06l8j4gnaJdw4dsfpRVPE/L4u8YJtsYumpAVzRf0aj5r5eUOVNGd4YxQXeNOGinaul9EYyksFDw2LocGg2NUExWoWZfaofEXJeW5ZHAclDJ4iRxPRutTORc4OsZCkzhCFKWIov13wAZtQFF5ZA+cjSyCgwagAfc9SQHME9hanN73suaERtyqa1fj0G/Kz9rciFO+EYjpUXAnFDRWUj2vg4xN9dNuRa5ZCcv69Kiz+JFGsN49anp85/lfm5H+FRmSyKBi5V1b6fPTBGRSHKbC3mORydM7DleVwW9EbS4qH9hXuREOWpHHzhntXh4PsRty71G7Pd5UJw8mti15Ao90a7nrJwXSRRam2d5QeJd5RSQ2iuixF16AobzH+ENEVcJ9/dXX2vPwBWcgXu2bV3igAAAAASUVORK5CYII=)
}

.t-game-card-history-box[data-v-64c60542] {
    position: relative;
    width: 100%;
    border-radius: 10px;
    background-color: #282a2e;
    background-image: url(https://start.gtimg.com/web/www/webgame/assets/img/6cae570cb14aad60531e.png);
    background-position: right center;
    background-size: 100%;
    background-repeat: no-repeat;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.1)
}

.t-game-card-history-box .thumb[data-v-64c60542] {
    border: 1px solid rgba(255,255,255,0.1);
    width: 67px;
    height: 67px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.t-game-card-history-box .info[data-v-64c60542] {
    width: calc(100% - 67px);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.t-game-card-history-box .info .name[data-v-64c60542] {
    width: 78px;
    font-size: 16px;
    line-height: 24px;
    font-weight: bold;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.t-game-card-history-box .info .btn[data-v-64c60542] {
    margin-top: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 60px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border-radius: 144px;
    font-size: 14px;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.5)
}

@media screen and (min-width: 1441px) and (max-width: 1600px) {
    .t-game-card-history[data-v-64c60542] {
        width:221px
    }

    .t-game-card-history .t-game-card-history-box .thumb[data-v-64c60542] {
        width: 87px;
        height: 87px
    }

    .t-game-card-history .t-game-card-history-box .info[data-v-64c60542] {
        width: calc(100% - 87px)
    }

    .t-game-card-history .t-game-card-history-box .info .name[data-v-64c60542] {
        width: 100px
    }

    .t-game-card-history .t-game-card-history-box .info .btn[data-v-64c60542] {
        margin-top: 12px;
        width: 74px;
        height: 32px;
        line-height: 32px
    }
}

@media screen and (min-width: 1601px) and (max-width: 1920px) {
    .t-game-card-history[data-v-64c60542] {
        width:221px
    }

    .t-game-card-history .t-game-card-history-box .thumb[data-v-64c60542] {
        width: 87px;
        height: 87px
    }

    .t-game-card-history .t-game-card-history-box .info[data-v-64c60542] {
        width: calc(100% - 87px)
    }

    .t-game-card-history .t-game-card-history-box .info .name[data-v-64c60542] {
        width: 100px
    }

    .t-game-card-history .t-game-card-history-box .info .btn[data-v-64c60542] {
        margin-top: 12px;
        width: 74px;
        height: 32px;
        line-height: 32px
    }
}

@media screen and (min-width: 1201px) {
    .t-game-card-history[data-v-64c60542] {
        width:221px
    }

    .t-game-card-history .t-game-card-history-box .thumb[data-v-64c60542] {
        width: 87px;
        height: 87px
    }

    .t-game-card-history .t-game-card-history-box .info[data-v-64c60542] {
        width: calc(100% - 87px)
    }

    .t-game-card-history .t-game-card-history-box .info .name[data-v-64c60542] {
        width: 100px
    }

    .t-game-card-history .t-game-card-history-box .info .btn[data-v-64c60542] {
        margin-top: 12px;
        width: 74px;
        height: 32px;
        line-height: 32px
    }
}

[data-v-52fa8e9b]:root {
    --app-back-wrap-visibility: visible;
    --app-back-wrap-mask-main-bg: rgba(29, 31, 36, 0.7);
    --app-back-wrap-color: #1d1f24
}

.t-game-card-list[data-v-52fa8e9b] {
    margin: 0 auto;
    width: 928px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.t-game-card-list .t-game-card-list-box .top[data-v-52fa8e9b] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.t-game-card-list .t-game-card-list-box .top .info[data-v-52fa8e9b] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end
}

.t-game-card-list .t-game-card-list-box .top .info .title[data-v-52fa8e9b] {
    font-size: 20px;
    line-height: 30px;
    font-weight: bold
}

.t-game-card-list .t-game-card-list-box .top .controller[data-v-52fa8e9b] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.t-game-card-list .t-game-card-list-box .top .controller .icon[data-v-52fa8e9b] {
    margin-left: 14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain
}

.t-game-card-list .t-game-card-list-box .top .controller .icon.icon-left[data-v-52fa8e9b] {
    background-image: url(https://start.gtimg.com/web/www/webgame/assets/img/abe8e130f5975e8a8b1e.png)
}

.t-game-card-list .t-game-card-list-box .top .controller .icon.icon-left[data-v-52fa8e9b]:hover,.t-game-card-list .t-game-card-list-box .top .controller .icon.icon-left[data-v-52fa8e9b]:active {
    background-image: url(https://start.gtimg.com/web/www/webgame/assets/img/987214f6bafd804f0754.png)
}

.t-game-card-list .t-game-card-list-box .top .controller .icon.icon-right[data-v-52fa8e9b] {
    background-image: url(https://start.gtimg.com/web/www/webgame/assets/img/d5773945a5957e6ff504.png)
}

.t-game-card-list .t-game-card-list-box .top .controller .icon.icon-right[data-v-52fa8e9b]:hover,.t-game-card-list .t-game-card-list-box .top .controller .icon.icon-right[data-v-52fa8e9b]:active {
    background-image: url(https://start.gtimg.com/web/www/webgame/assets/img/670f0323252471d3f6c8.png)
}

.t-game-card-list .t-game-card-list-box .top .controller .icon.disabled[data-v-52fa8e9b] {
    cursor: default
}

.t-game-card-list .t-game-card-list-box .top .controller .icon.disabled.icon-left[data-v-52fa8e9b] {
    cursor: default;
    background-image: url(https://start.gtimg.com/web/www/webgame/assets/img/0c3536833f13f8bfa216.png)
}

.t-game-card-list .t-game-card-list-box .top .controller .icon.disabled.icon-right[data-v-52fa8e9b] {
    cursor: default;
    background-image: url(https://start.gtimg.com/web/www/webgame/assets/img/5c43a8a453f3771be421.png)
}

.t-game-card-list .t-game-card-list-box .bottom[data-v-52fa8e9b] {
    margin-top: 20px
}

.t-game-card-list .t-game-card-list-box .bottom[data-v-52fa8e9b]::-webkit-scrollbar {
    display: none
}

.t-game-card-list .t-game-card-list-box .bottom .swiper-list[data-v-52fa8e9b] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.t-game-card-list .t-game-card-list-box .bottom .swiper-list .swiper-item[data-v-52fa8e9b] {
    margin-left: 17px
}

.t-game-card-list .t-game-card-list-box .bottom .swiper-list .swiper-item[data-v-52fa8e9b]:first-child {
    margin-left: 0
}

@media screen and (min-width: 1201px) {
    .t-game-card-list[data-v-52fa8e9b] {
        width:1440px;
        margin: 0 auto
    }

    .t-game-card-list .t-game-card-list-box .bottom[data-v-52fa8e9b] {
        margin-top: 24px
    }

    .t-game-card-list .t-game-card-list-box .bottom .swiper-list .swiper-item[data-v-52fa8e9b] {
        margin-left: 24px
    }
}

[data-v-07ac741e]:root {
    --app-back-wrap-visibility: visible;
    --app-back-wrap-mask-main-bg: rgba(29, 31, 36, 0.7);
    --app-back-wrap-color: #1d1f24
}

.game-item-card-wrap[data-v-07ac741e] {
    width: 252px;
    position: relative
}

.game-item-card-wrap.v-101 .pop .content .btn-box .fast[data-v-07ac741e] {
    display: none
}

.game-item-card-wrap.v-101 .pop .content .btn-box .colud[data-v-07ac741e] {
    display: none
}

.game-item-card-wrap.v-201 .pop .content .platfrom[data-v-07ac741e],.game-item-card-wrap.v-202 .pop .content .platfrom[data-v-07ac741e],.game-item-card-wrap.v-203 .pop .content .platfrom[data-v-07ac741e] {
    display: none
}

.game-item-card-wrap.v-201 .pop .content .btn-box .normal[data-v-07ac741e],.game-item-card-wrap.v-202 .pop .content .btn-box .normal[data-v-07ac741e],.game-item-card-wrap.v-203 .pop .content .btn-box .normal[data-v-07ac741e] {
    display: none
}

.game-item-card-wrap.v-201 .pop .content .btn-box .colud[data-v-07ac741e],.game-item-card-wrap.v-202 .pop .content .btn-box .colud[data-v-07ac741e],.game-item-card-wrap.v-203 .pop .content .btn-box .colud[data-v-07ac741e] {
    display: none
}

.game-item-card-wrap.v-301 .pop .content .btn-box .normal[data-v-07ac741e],.game-item-card-wrap.v-302 .pop .content .btn-box .normal[data-v-07ac741e] {
    display: none
}

.game-item-card-wrap.v-301 .pop .content .btn-box .fast[data-v-07ac741e],.game-item-card-wrap.v-302 .pop .content .btn-box .fast[data-v-07ac741e] {
    width: 150px
}

.game-item-card-wrap.v-301 .pop .content .btn-box .colud[data-v-07ac741e],.game-item-card-wrap.v-302 .pop .content .btn-box .colud[data-v-07ac741e] {
    width: 97px
}

.game-item-card-wrap.mac.v-301 .pop .content .btn-box .normal[data-v-07ac741e],.game-item-card-wrap.webpc.v-301 .pop .content .btn-box .normal[data-v-07ac741e] {
    display: none
}

.game-item-card-wrap.mac.v-301 .pop .content .btn-box .fast[data-v-07ac741e],.game-item-card-wrap.webpc.v-301 .pop .content .btn-box .fast[data-v-07ac741e] {
    width: 100%
}

.game-item-card-wrap.mac.v-301 .pop .content .btn-box .colud[data-v-07ac741e],.game-item-card-wrap.webpc.v-301 .pop .content .btn-box .colud[data-v-07ac741e] {
    display: none
}

.game-item-card-wrap .game-tag[data-v-07ac741e] {
    position: absolute;
    top: 6px;
    right: 6px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.game-item-card-wrap .game-tag .game-tag-item[data-v-07ac741e] {
    margin-left: 10px;
    width: auto;
    height: 20px
}

.game-item-card-wrap .game-tag .game-tag-item[data-v-07ac741e]:first-child {
    margin-left: 0
}

.game-item-card-wrap .game-thumb[data-v-07ac741e] {
    border-radius: 12px;
    width: 252px;
    height: 158px;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover
}

.game-item-card-wrap .game-container[data-v-07ac741e] {
    width: 252px
}

.game-item-card-wrap .game-container .game-label[data-v-07ac741e] {
    font-weight: 700;
    margin-top: 16px;
    color: #fff;
    font-size: 16px;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.game-item-card-wrap .game-container .game-desc[data-v-07ac741e] {
    margin-top: 8px;
    font-size: 12px;
    line-height: 18px;
    color: rgba(255,255,255,0.65);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.game-item-card-wrap:hover .pop[data-v-07ac741e] {
    pointer-events: auto;
    -webkit-transform: translate(-50%, 0) scale(1);
    transform: translate(-50%, 0) scale(1);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    opacity: 1;
    -webkit-transition: opacity 0.15s linear, -webkit-transform 0.01s linear;
    transition: opacity 0.15s linear, -webkit-transform 0.01s linear;
    transition: transform 0.01s linear, opacity 0.15s linear;
    transition: transform 0.01s linear, opacity 0.15s linear, -webkit-transform 0.01s linear
}

.game-item-card-wrap .pop[data-v-07ac741e] {
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 284px;
    height: 346px;
    -webkit-transform: translate(-50%, -50%) scale(0.8);
    transform: translate(-50%, -50%) scale(0.8);
    border-radius: 12px;
    background: #282a2e;
    -webkit-box-shadow: 0px 4px 40px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 4px 40px 0px rgba(0,0,0,0.5);
    -webkit-transition: opacity 0.15s linear, -webkit-transform 0.01s 0.15s linear;
    transition: opacity 0.15s linear, -webkit-transform 0.01s 0.15s linear;
    transition: transform 0.01s 0.15s linear, opacity 0.15s linear;
    transition: transform 0.01s 0.15s linear, opacity 0.15s linear, -webkit-transform 0.01s 0.15s linear
}

.game-item-card-wrap .pop .game-image[data-v-07ac741e] {
    width: 100%;
    height: 160px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover
}

.game-item-card-wrap .pop .content[data-v-07ac741e] {
    padding: 12px 16px 16px;
    width: 100%
}

.game-item-card-wrap .pop .content .title[data-v-07ac741e] {
    font-size: 14px;
    line-height: 22px;
    font-weight: bold;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    text-decoration: none
}

.game-item-card-wrap .pop .content .tags[data-v-07ac741e] {
    margin-top: 12px;
    width: 100%;
    height: 26px;
    overflow: hidden;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.game-item-card-wrap .pop .content .tags .tags-item[data-v-07ac741e] {
    margin-right: 8px;
    border-radius: 3px;
    background: rgba(255,255,255,0.1);
    padding: 4px 8px;
    color: rgba(255,255,255,0.65);
    font-size: 12px;
    line-height: 18px
}

.game-item-card-wrap .pop .content .platfrom[data-v-07ac741e] {
    margin-top: 15px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.game-item-card-wrap .pop .content .platfrom .name[data-v-07ac741e] {
    margin-right: 10px;
    color: rgba(255,255,255,0.65);
    font-size: 12px;
    line-height: 18px
}

.game-item-card-wrap .pop .content .platfrom .icon[data-v-07ac741e] {
    margin-right: 12px;
    width: 14px;
    height: 14px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain
}

.game-item-card-wrap .pop .content .platfrom .icon[data-v-07ac741e]:last-child {
    margin-right: 0
}

.game-item-card-wrap .pop .content .platfrom .icon.icon-web[data-v-07ac741e] {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqBAMAAAA37dRoAAAALVBMVEUAAAD///////////////////////////////////////////////////////+hSKubAAAAD3RSTlMAZlkaJUwzDUBfU0YGEyzr2T4wAAAAiUlEQVQoz2OgO2DZGooKwkCiXILoACTKJKiEAjQhokKoJnIMDtFraWmZkmkOaKKKYM8Io4lCvCiCLrq9vLzcEUO0AUgbDjVR6TQkkAUTRY1i7KKiUFG5cmRQALcNFQiGuLi4JIowHHGBgAKQIDx8F0LNVAAJwuMiEEX0sDEIXGBgNoaAAwyDBAAAWRg3L75haIoAAAAASUVORK5CYII=)
}

.game-item-card-wrap .pop .content .platfrom .icon.icon-win[data-v-07ac741e] {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqBAMAAAA37dRoAAAALVBMVEX///8AAAD///////////////////////////////////////////////////9MkrcHAAAAD3RSTlNMAAocPjEqDkc5EwQmIRdd64mEAAAAdElEQVQoz2MQxAYoEt1uE9KIKipUfNSDgYGBEUlU3CykASiEJCr0+Og8BSAfLgoUSXUBMplRRQWA9KgoMHSUwEAbSEOBIvYYGiTuHQyi4mszHTBFQaDq2hQ0USiQ3nVtCpIoAgANS4WlajSwyyayUZDynAUAEecshlacKckAAAAASUVORK5CYII=)
}

.game-item-card-wrap .pop .content .platfrom .icon.icon-mac[data-v-07ac741e] {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqBAMAAAA37dRoAAAAKlBMVEUAAAD///////////////////////////////////////////////////+Gu8ovAAAADnRSTlMATAkUQjhHPSYEIS8cKtk1bAgAAAD2SURBVCjPhZO9CsJAEIQPBfGvGUkMaBMba/9KBSO2gjYKdrG20V5ICktBLKy1Eez0DQTxAcQXMmCW3LoRp0jxcezNzOaUrsx6qKROiKFp4CKpD9wETACGEsoBJUkriLusDmsr6bHofZFdQ6nOOdO+23omYGCr5BgwI28tBDI3LgJZdDoLXT26nFEzzOQwuqRMuozQ857RQuxY6vLJKBkb6dCiDMyCSdTVaVmcFVTOXUAXFX9l1KMdMDqLzUa7S+F/ZzA+O0qCqxuFky58Tu2odpk5KwzLhg9Eq6IeGsF+EuGixt4Jps2OA8yVpkf/FXzzk5WtfusNS9A64az+j+oAAAAASUVORK5CYII=)
}

.game-item-card-wrap .pop .content .platfrom .icon.icon-phone[data-v-07ac741e] {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqBAMAAAA37dRoAAAAMFBMVEUAAAD///////////////////////////////////////////////////////////87TQQwAAAAEHRSTlMATC9HJhxCITsEKwo0FxMOfUjvDAAAAMlJREFUKM9jGDaAwwGJw3UAymCRRhLdCFPCmYEkqgZnBT6AM3lFEQY3ADX8Db03gYGBLQEuyifOGWQoKCgodnRD4AeEYYeVBSFAKAkhyHlQEAZkNsBFLwsiQCpMkEUQGcDcq4giKgX1oyAqWAAWdUQTFQcJcguiA5BP2YC0uyFUQNgJSIC8Fwh0O0MhXPdCQUERoGgiyFqEqCJQwwQGVhBHBW5CCYgsYOAQxAQNDBuxiEqCLEMAJNMxgRBDIxZRCQZDLKLCDMMCAAALHyxFk3cJTgAAAABJRU5ErkJggg==)
}

.game-item-card-wrap .pop .content .platfrom .icon.icon-ios[data-v-07ac741e] {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAArCAMAAADWg4HyAAAAM1BMVEX///8AAAD///////////////////////////////////////////////////////////+Q8lQ3AAAAEXRSTlNMAAkTQi85JgQqNBc9HA4hHRAu9CQAAAEoSURBVDjLzZVbkoUgDESTQHiL7n+1Q4Aa5xbowN/tD6stjm14VABc1x+WshqV3cgqhgdpVh8sGXgT082ShndpauyATmHX2QD/KzRWwYpUZXmJ9ZWFJWlhHazJFVYtsvRdrLG+TtdGFVnD7SesRZJVdCiiVDx3r+e5AdGd/ipPLUcgB1N8HFhtDAC1FIN4yMPUvXWzGmS4hHcglcQkIXrK+hYFYhJkKVbmOWUtYhth+UhfbW78lJvE//7AnITP9VoQRUQIbcFPRJ6w8u50K+ESSHxCDDNWgt1ho2yAePLsSfyMhUD3XlmscmGoN3FonSPGQ5x4f6jDf9v5zRssLbIb/SFt9B3e6GdUWTQrsRv9l/b7usD8igaHne10esr0n/dQ52ca7rc1/QCpawflo545vwAAAABJRU5ErkJggg==)
}

.game-item-card-wrap .pop .content .platfrom .icon.icon-tv[data-v-07ac741e] {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAsBAMAAADhtDd1AAAAJ1BMVEUAAAD///////////////////////////////////////////////+uPUo5AAAADXRSTlMATBNCHAlHLw46JyE1kB+GNQAAAI5JREFUKM9joBJYuADKKNyAJHpQHEKzC05AEm0TLIAoFWtAEuVIFIcozQCSaIoRShGKUZSyTjYGgUTBZGNDIAaBqQwMnIIYQJKBgVEQE4BENymhAkewqAKaRwNHRQeZaLIxKjAEirJhjWNuTEEpoDEhLuiggYFqgBWamgKQxBAp0wBFlBmrKBPUUQr4rAEAGN0vxkMVrXUAAAAASUVORK5CYII=)
}

.game-item-card-wrap .pop .content .btn-box[data-v-07ac741e] {
    margin-top: 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.game-item-card-wrap .pop .content .btn-box .btn[data-v-07ac741e] {
    width: 100%;
    height: 45px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: pointer
}

.game-item-card-wrap .pop .content .btn-box .btn.normal[data-v-07ac741e] {
    background: linear-gradient(84deg, #1954ab 2.49%, #0286ff 37.66%, #29feff 80.32%, #ccfbff 114.95%)
}

.game-item-card-wrap .pop .content .btn-box .btn.fast[data-v-07ac741e] {
    background: -webkit-gradient(linear, left top, right top, color-stop(.13%, #00d8a4), color-stop(55.09%, #2fdee9), to(#ccfbff));
    background: linear-gradient(90deg, #00d8a4 .13%, #2fdee9 55.09%, #ccfbff 100%)
}

.game-item-card-wrap .pop .content .btn-box .btn.colud[data-v-07ac741e] {
    border: 1px solid #cefafe;
    background: transparent;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(43.23%, #fff), to(#baf8fd));
    background: linear-gradient(180deg, #fff 43.23%, #baf8fd 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.game-item-card-wrap .pop .content .btn-box .btn.not-supported[data-v-07ac741e] {
    cursor: default;
    background: linear-gradient(84deg, #525a66 2.49%, #707f8c 37.66%, #a1b2b2 80.32%, #b8cacc 114.95%)
}

.game-item-card-wrap .pop .content .btn-box .btn.download[data-v-07ac741e] {
    border: 1px solid #0286ff;
    background: -webkit-gradient(linear, left top, right top, color-stop(.19%, #191b1f), color-stop(52.21%, #1b1e25), color-stop(101.66%, #282b33));
    background: linear-gradient(90deg, #191b1f .19%, #1b1e25 52.21%, #282b33 101.66%)
}

.game-item-card-wrap .pop .content .btn-box .btn.download span[data-v-07ac741e] {
    color: #898a8c;
    font-size: 12px;
    line-height: 18px;
    font-weight: normal
}

.game-item-card-wrap .pop .content .btn-box .btn.maintain[data-v-07ac741e] {
    cursor: default;
    background: linear-gradient(84deg, #525a66 2.49%, #707f8c 37.66%, #a1b2b2 80.32%, #b8cacc 114.95%)
}

.game-item-card-wrap .pop .content .btn-box .btn.detail[data-v-07ac741e] {
    background: linear-gradient(84deg, #1954ab 2.49%, #0286ff 37.66%, #29feff 80.32%, #ccfbff 114.95%)
}

.game-item-card-wrap .pop .content .btn-box .btn .btn-content[data-v-07ac741e] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.game-item-card-wrap .pop .content .btn-box .btn .icon[data-v-07ac741e] {
    width: 26px;
    height: 26px;
    margin-right: 6px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain
}

.game-item-card-wrap .pop .content .btn-box .btn .icon.icon-start-v1[data-v-07ac741e] {
    background-image: url(https://start.gtimg.com/web/www/webgame/assets/img/5f5fa514081111ce95ba.png)
}

.game-item-card-wrap .pop .content .btn-box .btn .icon.icon-start-v2[data-v-07ac741e] {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAABPCAMAAAByKAOKAAAAOVBMVEUAAAD///////////////////////////////////////////////////////////////////////8KOjVvAAAAEnRSTlMAP1+/QCCf798wgFCvjxDPcG+xuBESAAABaklEQVRYw+2Yy7aDIAxFg8hL8ZX//9g76OR2HamnpB3VPWbtRUgwRLn5HdYycqzXrjJlpckxvJSFqm/ySjgnfZs8t2yTdjE19qadDKfnlrSTFASJ2o1H26gtFvef0xhGfnOZWBdBl5qbkyeynpDgNmiLwJxJYatkg1iZWhm4olrVqAuwzKKr8sTG6qh1QW26BImgdUR9ZqPOwSJSx1ywIz7wnbpFzsl9uvBRnW/Ylr5gB7anoI6PdejMbBW2p6CO7lBZO3VntjUrpSOPrhpuhX9QIKmc7vKrsqtd56E/mXQHJNWkc5BUiy5BUk06D0k16Q5IqknnIKkWXYKkmnT1wnatw6PzesEswvX3Qj3pC/lcTJQtnbcTZKMGhEg/tXdmFHICeO0mfmNMYWuFqhJkN414yJw7Ip2lSYi28RiFy6Y0eQpyyeo4yio3N7/BUD1FHSmb0hRCFy0fOmQx/srCuYHEC4XjKHLzUf4Ai+/D5vvsYQkAAAAASUVORK5CYII=)
}

.game-item-card-wrap .pop .content .btn-box .btn .icon.icon-start-v3[data-v-07ac741e] {
    background-image: url(https://start.gtimg.com/web/www/webgame/assets/img/ded0784d4af4f383b464.png)
}

@media screen and (max-width: 1280px) {
    .game-item-card-wrap[data-v-07ac741e] {
        width:217px
    }

    .game-item-card-wrap.v-301 .pop .content .btn-box .fast[data-v-07ac741e],.game-item-card-wrap.v-302 .pop .content .btn-box .fast[data-v-07ac741e] {
        width: 120px
    }

    .game-item-card-wrap.v-301 .pop .content .btn-box .colud[data-v-07ac741e],.game-item-card-wrap.v-302 .pop .content .btn-box .colud[data-v-07ac741e] {
        width: 86px
    }

    .game-item-card-wrap .game-thumb[data-v-07ac741e] {
        border-radius: 12px;
        width: 217px;
        height: 141px
    }

    .game-item-card-wrap .game-container[data-v-07ac741e] {
        width: 217px
    }

    .game-item-card-wrap .game-container .game-label[data-v-07ac741e] {
        margin-top: 12px
    }

    .game-item-card-wrap .game-container .game-desc[data-v-07ac741e] {
        margin-top: 6px;
        font-size: 14px;
        line-height: 21px
    }

    .game-item-card-wrap .pop[data-v-07ac741e] {
        width: 244px;
        height: auto;
        border-radius: 12px
    }

    .game-item-card-wrap .pop .game-image[data-v-07ac741e] {
        width: 100%;
        height: 137px
    }

    .game-item-card-wrap .pop .content .tags[data-v-07ac741e] {
        margin-top: 12px
    }

    .game-item-card-wrap .pop .content .btn-box .btn[data-v-07ac741e] {
        height: 40px;
        font-size: 14px
    }

    .game-item-card-wrap .pop .content .btn-box .btn .icon[data-v-07ac741e] {
        width: 20px;
        height: 20px;
        margin-right: 4px
    }
}

@media screen and (min-width: 1281px) and (max-width: 1440px) {
    .game-item-card-wrap[data-v-07ac741e] {
        width:217px
    }

    .game-item-card-wrap.v-301 .pop .content .btn-box .fast[data-v-07ac741e],.game-item-card-wrap.v-302 .pop .content .btn-box .fast[data-v-07ac741e] {
        width: 120px
    }

    .game-item-card-wrap.v-301 .pop .content .btn-box .colud[data-v-07ac741e],.game-item-card-wrap.v-302 .pop .content .btn-box .colud[data-v-07ac741e] {
        width: 86px
    }

    .game-item-card-wrap .game-thumb[data-v-07ac741e] {
        border-radius: 12px;
        width: 217px;
        height: 141px
    }

    .game-item-card-wrap .game-container[data-v-07ac741e] {
        width: 217px
    }

    .game-item-card-wrap .game-container .game-label[data-v-07ac741e] {
        margin-top: 12px
    }

    .game-item-card-wrap .game-container .game-desc[data-v-07ac741e] {
        margin-top: 6px;
        font-size: 14px;
        line-height: 21px
    }

    .game-item-card-wrap .pop[data-v-07ac741e] {
        width: 244px;
        height: auto;
        border-radius: 12px
    }

    .game-item-card-wrap .pop .game-image[data-v-07ac741e] {
        width: 100%;
        height: 137px
    }

    .game-item-card-wrap .pop .content .tags[data-v-07ac741e] {
        margin-top: 12px
    }

    .game-item-card-wrap .pop .content .btn-box .btn[data-v-07ac741e] {
        height: 40px;
        font-size: 14px
    }

    .game-item-card-wrap .pop .content .btn-box .btn .icon[data-v-07ac741e] {
        width: 20px;
        height: 20px;
        margin-right: 4px
    }
}

@media screen and (min-width: 1441px) and (max-width: 1600px) {
    .game-item-card-wrap[data-v-07ac741e] {
        width:282px
    }

    .game-item-card-wrap.v-301 .pop .content .btn-box .fast[data-v-07ac741e],.game-item-card-wrap.v-302 .pop .content .btn-box .fast[data-v-07ac741e] {
        width: 160px
    }

    .game-item-card-wrap.v-301 .pop .content .btn-box .colud[data-v-07ac741e],.game-item-card-wrap.v-302 .pop .content .btn-box .colud[data-v-07ac741e] {
        width: 108px
    }

    .game-item-card-wrap .game-thumb[data-v-07ac741e] {
        border-radius: 12px;
        width: 282px;
        height: 184px
    }

    .game-item-card-wrap .game-container[data-v-07ac741e] {
        width: 282px
    }

    .game-item-card-wrap .game-container .game-label[data-v-07ac741e] {
        margin-top: 16px
    }

    .game-item-card-wrap .game-container .game-desc[data-v-07ac741e] {
        margin-top: 8px;
        font-size: 14px;
        line-height: 21px
    }

    .game-item-card-wrap .pop[data-v-07ac741e] {
        width: 306px;
        height: auto;
        border-radius: 12px
    }

    .game-item-card-wrap .pop .game-image[data-v-07ac741e] {
        width: 100%;
        height: 172px
    }

    .game-item-card-wrap .pop .content .tags[data-v-07ac741e] {
        margin-top: 12px
    }

    .game-item-card-wrap .pop .content .tags .tags-item[data-v-07ac741e] {
        padding: 4px 8px
    }

    .game-item-card-wrap .pop .content .platfrom[data-v-07ac741e] {
        margin-top: 16px
    }

    .game-item-card-wrap .pop .content .platfrom .name[data-v-07ac741e] {
        margin-right: 16px
    }

    .game-item-card-wrap .pop .content .platfrom .icon[data-v-07ac741e] {
        width: 16px;
        height: 16px
    }

    .game-item-card-wrap .pop .content .btn-box .btn[data-v-07ac741e] {
        height: 48px;
        font-size: 16px
    }

    .game-item-card-wrap .pop .content .btn-box .btn .icon[data-v-07ac741e] {
        width: 26px;
        height: 26px;
        margin-right: 4px
    }
}

@media screen and (min-width: 1601px) and (max-width: 1920px) {
    .game-item-card-wrap[data-v-07ac741e] {
        width:282px
    }

    .game-item-card-wrap.v-301 .pop .content .btn-box .fast[data-v-07ac741e],.game-item-card-wrap.v-302 .pop .content .btn-box .fast[data-v-07ac741e] {
        width: 160px
    }

    .game-item-card-wrap.v-301 .pop .content .btn-box .colud[data-v-07ac741e],.game-item-card-wrap.v-302 .pop .content .btn-box .colud[data-v-07ac741e] {
        width: 108px
    }

    .game-item-card-wrap .game-thumb[data-v-07ac741e] {
        border-radius: 12px;
        width: 282px;
        height: 184px
    }

    .game-item-card-wrap .game-container[data-v-07ac741e] {
        width: 282px
    }

    .game-item-card-wrap .game-container .game-label[data-v-07ac741e] {
        margin-top: 16px
    }

    .game-item-card-wrap .game-container .game-desc[data-v-07ac741e] {
        margin-top: 8px;
        font-size: 14px;
        line-height: 21px
    }

    .game-item-card-wrap .pop[data-v-07ac741e] {
        width: 306px;
        height: auto;
        border-radius: 12px
    }

    .game-item-card-wrap .pop .game-image[data-v-07ac741e] {
        width: 100%;
        height: 172px
    }

    .game-item-card-wrap .pop .content .tags[data-v-07ac741e] {
        margin-top: 12px
    }

    .game-item-card-wrap .pop .content .tags .tags-item[data-v-07ac741e] {
        padding: 4px 8px
    }

    .game-item-card-wrap .pop .content .platfrom[data-v-07ac741e] {
        margin-top: 16px
    }

    .game-item-card-wrap .pop .content .platfrom .name[data-v-07ac741e] {
        margin-right: 16px
    }

    .game-item-card-wrap .pop .content .platfrom .icon[data-v-07ac741e] {
        width: 16px;
        height: 16px
    }

    .game-item-card-wrap .pop .content .btn-box .btn[data-v-07ac741e] {
        height: 48px;
        font-size: 16px
    }

    .game-item-card-wrap .pop .content .btn-box .btn .icon[data-v-07ac741e] {
        width: 26px;
        height: 26px;
        margin-right: 4px
    }
}

@media screen and (min-width: 1201px) {
    .game-item-card-wrap[data-v-07ac741e] {
        width:342px
    }

    .game-item-card-wrap.v-301 .pop .content .btn-box .fast[data-v-07ac741e],.game-item-card-wrap.v-302 .pop .content .btn-box .fast[data-v-07ac741e] {
        width: 198px
    }

    .game-item-card-wrap.v-301 .pop .content .btn-box .colud[data-v-07ac741e],.game-item-card-wrap.v-302 .pop .content .btn-box .colud[data-v-07ac741e] {
        width: 130px
    }

    .game-item-card-wrap .game-thumb[data-v-07ac741e] {
        border-radius: 12px;
        width: 342px;
        height: 223px
    }

    .game-item-card-wrap .game-container[data-v-07ac741e] {
        width: 342px
    }

    .game-item-card-wrap .game-container .game-label[data-v-07ac741e] {
        margin-top: 20px;
        font-size: 20px;
        line-height: 30px
    }

    .game-item-card-wrap .game-container .game-desc[data-v-07ac741e] {
        margin-top: 8px;
        font-size: 16px;
        line-height: 24px
    }

    .game-item-card-wrap .pop[data-v-07ac741e] {
        width: 374px;
        height: auto;
        border-radius: 16px
    }

    .game-item-card-wrap .pop .game-image[data-v-07ac741e] {
        width: 100%;
        height: 210px
    }

    .game-item-card-wrap .pop .content[data-v-07ac741e] {
        padding: 16px 20px
    }

    .game-item-card-wrap .pop .content .title[data-v-07ac741e] {
        font-size: 16px;
        line-height: 24px
    }

    .game-item-card-wrap .pop .content .tags[data-v-07ac741e] {
        margin-top: 16px;
        height: 29px
    }

    .game-item-card-wrap .pop .content .tags .tags-item[data-v-07ac741e] {
        padding: 4px 12px;
        font-size: 14px;
        line-height: 21px
    }

    .game-item-card-wrap .pop .content .platfrom[data-v-07ac741e] {
        margin-top: 16px
    }

    .game-item-card-wrap .pop .content .platfrom .name[data-v-07ac741e] {
        margin-right: 16px;
        font-size: 14px;
        line-height: 21px
    }

    .game-item-card-wrap .pop .content .platfrom .icon[data-v-07ac741e] {
        margin-right: 16px;
        width: 18px;
        height: 18px
    }

    .game-item-card-wrap .pop .content .btn-box[data-v-07ac741e] {
        margin-top: 24px
    }

    .game-item-card-wrap .pop .content .btn-box .btn[data-v-07ac741e] {
        height: 58px;
        font-size: 20px
    }

    .game-item-card-wrap .pop .content .btn-box .btn .icon[data-v-07ac741e] {
        width: 32px;
        height: 32px;
        margin-right: 5px
    }
}

[data-v-25bb95d7]:root {
    --app-back-wrap-visibility: visible;
    --app-back-wrap-mask-main-bg: rgba(29, 31, 36, 0.7);
    --app-back-wrap-color: #1d1f24
}

.index-game-wrap[data-v-25bb95d7] {
    padding-top: 40px
}

.index-game-wrap .index-game-lable[data-v-25bb95d7] {
    padding-bottom: 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.index-game-wrap .index-game-lable .title[data-v-25bb95d7] {
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
    color: rgba(255,255,255,0.85)
}

.index-game-wrap .index-game-lable .control[data-v-25bb95d7] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.index-game-wrap .index-game-lable .control .slide[data-v-25bb95d7] {
    cursor: pointer;
    margin-left: 15px;
    width: 30px;
    height: 30px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain
}

.index-game-wrap .index-game-lable .control .slide[data-v-25bb95d7]:first-child {
    margin-left: 0
}

.index-game-wrap .index-game-lable .control .slide.slide-prev[data-v-25bb95d7] {
    background-image: url(https://start.gtimg.com/web/www/webgame/assets/img/abe8e130f5975e8a8b1e.png)
}

.index-game-wrap .index-game-lable .control .slide.slide-prev[data-v-25bb95d7]:hover,.index-game-wrap .index-game-lable .control .slide.slide-prev[data-v-25bb95d7]:active {
    background-image: url(https://start.gtimg.com/web/www/webgame/assets/img/987214f6bafd804f0754.png)
}

.index-game-wrap .index-game-lable .control .slide.slide-prev.disable[data-v-25bb95d7] {
    background-image: url(https://start.gtimg.com/web/www/webgame/assets/img/0c3536833f13f8bfa216.png)
}

.index-game-wrap .index-game-lable .control .slide.slide-next[data-v-25bb95d7] {
    background-image: url(https://start.gtimg.com/web/www/webgame/assets/img/d5773945a5957e6ff504.png)
}

.index-game-wrap .index-game-lable .control .slide.slide-next[data-v-25bb95d7]:hover,.index-game-wrap .index-game-lable .control .slide.slide-next[data-v-25bb95d7]:active {
    background-image: url(https://start.gtimg.com/web/www/webgame/assets/img/670f0323252471d3f6c8.png)
}

.index-game-wrap .index-game-lable .control .slide.slide-next.disable[data-v-25bb95d7] {
    background-image: url(https://start.gtimg.com/web/www/webgame/assets/img/5c43a8a453f3771be421.png)
}

.index-game-wrap .index-container[data-v-25bb95d7] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.index-game-wrap .index-container .index-item-box[data-v-25bb95d7] {
    margin-top: 30px;
    margin-right: 19px
}

.index-game-wrap .index-container .index-item-box[data-v-25bb95d7]:nth-child(4n) {
    margin-right: 0
}

.index-game-wrap .index-container .index-item-box[data-v-25bb95d7]:nth-child(-n+4) {
    margin-top: 0
}

@media screen and (max-width: 1280px) {
    .index-game-wrap[data-v-25bb95d7] {
        padding-top:64px;
        width: 928px;
        margin: 0 auto
    }
}

@media screen and (min-width: 1281px) and (max-width: 1440px) {
    .index-game-wrap[data-v-25bb95d7] {
        padding-top:64px;
        width: 928px;
        margin: 0 auto
    }
}

@media screen and (min-width: 1201px) {
    .index-game-wrap[data-v-25bb95d7] {
        padding-top:64px;
        width: 1440px;
        margin: 0 auto
    }

    .index-game-wrap .index-container .index-item-box[data-v-25bb95d7] {
        margin-top: 40px;
        margin-right: 24px
    }
}

[data-v-31e8d293]:root {
    --app-back-wrap-visibility: visible;
    --app-back-wrap-mask-main-bg: rgba(29, 31, 36, 0.7);
    --app-back-wrap-color: #1d1f24
}

.main-activity-item-wrap[data-v-31e8d293] {
    position: relative;
    border-radius: 9px;
    width: 488px;
    height: 650px;
    background: #1d1f24;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer
}

.main-activity-item-wrap .logo[data-v-31e8d293] {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 200px;
    height: 100px;
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat
}

.main-activity-item-wrap .content[data-v-31e8d293] {
    position: absolute;
    left: 24px;
    bottom: 24px;
    width: 320px
}

.main-activity-item-wrap .content .title[data-v-31e8d293] {
    color: rgba(255,255,255,0.85);
    font-size: 24px;
    font-weight: bold;
    line-height: 36px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.main-activity-item-wrap .content .desc[data-v-31e8d293] {
    margin-top: 8px;
    color: rgba(255,255,255,0.65);
    font-size: 14px;
    line-height: 21px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.main-activity-item-wrap .content .tip[data-v-31e8d293] {
    max-width: 100%;
    display: inline-block;
    margin-top: 8px;
    padding: 4px 12px;
    border-radius: 4px;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.65);
    font-size: 12px;
    line-height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.main-activity-item-wrap[data-v-31e8d293]:hover::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    opacity: 0.05;
    pointer-events: none
}

@media screen and (max-width: 1280px) {
    .main-activity-item-wrap[data-v-31e8d293] {
        border-radius:12px;
        width: 422px;
        height: 560px
    }

    .main-activity-item-wrap .logo[data-v-31e8d293] {
        top: 16px;
        left: 16px;
        width: 172px;
        height: 86px
    }

    .main-activity-item-wrap .content[data-v-31e8d293] {
        width: 252px
    }
}

@media screen and (min-width: 1281px) and (max-width: 1440px) {
    .main-activity-item-wrap[data-v-31e8d293] {
        border-radius:12px;
        width: 422px;
        height: 560px
    }

    .main-activity-item-wrap .logo[data-v-31e8d293] {
        top: 16px;
        left: 16px;
        width: 172px;
        height: 86px
    }

    .main-activity-item-wrap .content[data-v-31e8d293] {
        width: 252px
    }
}

@media screen and (min-width: 1441px) and (max-width: 1600px) {
    .main-activity-item-wrap[data-v-31e8d293] {
        border-radius:12px;
        width: 540px;
        height: 717px
    }

    .main-activity-item-wrap .logo[data-v-31e8d293] {
        top: 20px;
        left: 20px;
        width: 220px;
        height: 110px
    }

    .main-activity-item-wrap .content[data-v-31e8d293] {
        width: 320px
    }
}

@media screen and (min-width: 1601px) and (max-width: 1920px) {
    .main-activity-item-wrap[data-v-31e8d293] {
        border-radius:12px;
        width: 540px;
        height: 717px
    }

    .main-activity-item-wrap .logo[data-v-31e8d293] {
        top: 20px;
        left: 20px;
        width: 220px;
        height: 110px
    }

    .main-activity-item-wrap .content[data-v-31e8d293] {
        width: 320px
    }
}

@media screen and (min-width: 1201px) {
    .main-activity-item-wrap[data-v-31e8d293] {
        border-radius:12px;
        width: 646px;
        height: 858px
    }

    .main-activity-item-wrap .logo[data-v-31e8d293] {
        top: 24px;
        left: 24px;
        width: 260px;
        height: 130px
    }

    .main-activity-item-wrap .content[data-v-31e8d293] {
        width: 450px
    }

    .main-activity-item-wrap .content .desc[data-v-31e8d293] {
        margin-top: 12px;
        font-size: 16px;
        line-height: 24px
    }

    .main-activity-item-wrap .content .tip[data-v-31e8d293] {
        margin-top: 12px;
        font-size: 14px;
        line-height: 22px
    }
}

[data-v-0ead68e3]:root {
    --app-back-wrap-visibility: visible;
    --app-back-wrap-mask-main-bg: rgba(29, 31, 36, 0.7);
    --app-back-wrap-color: #1d1f24
}

.main-activity-wrap[data-v-0ead68e3] {
    position: relative
}

.main-activity-wrap .control[data-v-0ead68e3] {
    position: absolute;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    right: 24px;
    bottom: 39px
}

.main-activity-wrap .control .slide[data-v-0ead68e3] {
    cursor: default;
    margin-left: 15px;
    width: 40px;
    height: 40px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain
}

.main-activity-wrap .control .slide[data-v-0ead68e3]:first-child {
    margin-left: 0
}

.main-activity-wrap .control .slide.slide-prev[data-v-0ead68e3] {
    background-image: url(https://start.gtimg.com/web/www/webgame/assets/img/abe8e130f5975e8a8b1e.png)
}

.main-activity-wrap .control .slide.slide-prev[data-v-0ead68e3]:hover,.main-activity-wrap .control .slide.slide-prev[data-v-0ead68e3]:active {
    background-image: url(https://start.gtimg.com/web/www/webgame/assets/img/987214f6bafd804f0754.png)
}

.main-activity-wrap .control .slide.slide-prev.disable[data-v-0ead68e3] {
    background-image: url(https://start.gtimg.com/web/www/webgame/assets/img/0c3536833f13f8bfa216.png)
}

.main-activity-wrap .control .slide.slide-next[data-v-0ead68e3] {
    background-image: url(https://start.gtimg.com/web/www/webgame/assets/img/d5773945a5957e6ff504.png)
}

.main-activity-wrap .control .slide.slide-next[data-v-0ead68e3]:hover,.main-activity-wrap .control .slide.slide-next[data-v-0ead68e3]:active {
    background-image: url(https://start.gtimg.com/web/www/webgame/assets/img/670f0323252471d3f6c8.png)
}

.main-activity-wrap .control .slide.slide-next.disable[data-v-0ead68e3] {
    background-image: url(https://start.gtimg.com/web/www/webgame/assets/img/5c43a8a453f3771be421.png)
}

@media screen and (max-width: 1280px) {
    .main-activity-wrap .control[data-v-0ead68e3] {
        right:20px;
        bottom: 20px
    }
}

@media screen and (min-width: 1281px) and (max-width: 1440px) {
    .main-activity-wrap .control[data-v-0ead68e3] {
        right:20px;
        bottom: 20px
    }
}

@media screen and (min-width: 1441px) and (max-width: 1600px) {
    .main-activity-wrap .control[data-v-0ead68e3] {
        right:32px;
        bottom: 32px
    }
}

@media screen and (min-width: 1601px) and (max-width: 1920px) {
    .main-activity-wrap .control[data-v-0ead68e3] {
        right:32px;
        bottom: 32px
    }
}

@media screen and (min-width: 1201px) {
    .main-activity-wrap .control[data-v-0ead68e3] {
        right:32px;
        bottom: 32px
    }
}

[data-v-6ad33c43]:root {
    --app-back-wrap-visibility: visible;
    --app-back-wrap-mask-main-bg: rgba(29, 31, 36, 0.7);
    --app-back-wrap-color: #1d1f24
}

.activity-item-card-wrap[data-v-6ad33c43] {
    cursor: pointer;
    border-radius: 12px;
    width: 568px;
    background: #282a2e;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.activity-item-card-wrap .activity-image[data-v-6ad33c43] {
    border-radius: 12px 0 0 12px;
    width: 320px;
    height: 200px;
    margin-right: 20px;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.activity-item-card-wrap .activity-container[data-v-6ad33c43] {
    position: relative;
    padding: 16px 0;
    width: 208px
}

.activity-item-card-wrap .activity-container .activity-label[data-v-6ad33c43] {
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.activity-item-card-wrap .activity-container .activity-desc[data-v-6ad33c43] {
    margin-top: 8px;
    height: 36px;
    font-size: 12px;
    line-height: 18px;
    color: rgba(255,255,255,0.65);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.activity-item-card-wrap .activity-container .tip[data-v-6ad33c43] {
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: 16px;
    padding: 4px 12px;
    max-width: 100%;
    border-radius: 4px;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.65);
    font-size: 12px;
    line-height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.activity-item-card-wrap[data-v-6ad33c43]:hover::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    opacity: 0.05;
    pointer-events: none
}

@media screen and (max-width: 1280px) {
    .activity-item-card-wrap[data-v-6ad33c43] {
        width:486px
    }

    .activity-item-card-wrap .activity-image[data-v-6ad33c43] {
        width: 278px;
        height: 173px;
        margin-right: 16px
    }

    .activity-item-card-wrap .activity-container[data-v-6ad33c43] {
        padding: 12px 0;
        width: 176px
    }

    .activity-item-card-wrap .activity-container .activity-desc[data-v-6ad33c43] {
        height: 42px;
        font-size: 14px;
        line-height: 21px
    }
}

@media screen and (min-width: 1281px) and (max-width: 1440px) {
    .activity-item-card-wrap[data-v-6ad33c43] {
        width:486px
    }

    .activity-item-card-wrap .activity-image[data-v-6ad33c43] {
        width: 278px;
        height: 173px;
        margin-right: 16px
    }

    .activity-item-card-wrap .activity-container[data-v-6ad33c43] {
        padding: 12px 0;
        width: 176px
    }

    .activity-item-card-wrap .activity-container .activity-desc[data-v-6ad33c43] {
        height: 42px;
        font-size: 14px;
        line-height: 21px
    }
}

@media screen and (min-width: 1441px) and (max-width: 1600px) {
    .activity-item-card-wrap[data-v-6ad33c43] {
        width:636px
    }

    .activity-item-card-wrap .activity-image[data-v-6ad33c43] {
        width: 358px;
        height: 223px;
        margin-right: 24px
    }

    .activity-item-card-wrap .activity-container[data-v-6ad33c43] {
        padding: 20px 0;
        width: 230px
    }

    .activity-item-card-wrap .activity-container .activity-desc[data-v-6ad33c43] {
        height: 42px;
        font-size: 14px;
        line-height: 21px
    }

    .activity-item-card-wrap .activity-container .tip[data-v-6ad33c43] {
        bottom: 16px
    }
}

@media screen and (min-width: 1601px) and (max-width: 1920px) {
    .activity-item-card-wrap[data-v-6ad33c43] {
        width:636px
    }

    .activity-item-card-wrap .activity-image[data-v-6ad33c43] {
        width: 358px;
        height: 223px;
        margin-right: 24px
    }

    .activity-item-card-wrap .activity-container[data-v-6ad33c43] {
        padding: 20px 0;
        width: 230px
    }

    .activity-item-card-wrap .activity-container .activity-desc[data-v-6ad33c43] {
        height: 42px;
        font-size: 14px;
        line-height: 21px
    }

    .activity-item-card-wrap .activity-container .tip[data-v-6ad33c43] {
        bottom: 20px
    }
}

@media screen and (min-width: 1201px) {
    .activity-item-card-wrap[data-v-6ad33c43] {
        width:768px
    }

    .activity-item-card-wrap .activity-image[data-v-6ad33c43] {
        width: 432px;
        height: 269px;
        margin-right: 24px
    }

    .activity-item-card-wrap .activity-container[data-v-6ad33c43] {
        padding: 24px 0;
        width: 288px
    }

    .activity-item-card-wrap .activity-container .activity-label[data-v-6ad33c43] {
        font-size: 20px;
        line-height: 30px
    }

    .activity-item-card-wrap .activity-container .activity-desc[data-v-6ad33c43] {
        margin-top: 12px;
        height: 48px;
        font-size: 16px;
        line-height: 24px
    }

    .activity-item-card-wrap .activity-container .tip[data-v-6ad33c43] {
        bottom: 24px;
        font-size: 14px;
        line-height: 22px
    }
}

[data-v-c4afa118]:root {
    --app-back-wrap-visibility: visible;
    --app-back-wrap-mask-main-bg: rgba(29, 31, 36, 0.7);
    --app-back-wrap-color: #1d1f24
}

.index-activity-wrap[data-v-c4afa118] {
    padding-top: 40px
}

.index-activity-wrap .index-activity-lable[data-v-c4afa118] {
    padding-bottom: 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.index-activity-wrap .index-activity-lable .title[data-v-c4afa118] {
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
    color: rgba(255,255,255,0.85)
}

.index-activity-wrap .index-container[data-v-c4afa118] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.index-activity-wrap .index-container .main-activity[data-v-c4afa118] {
    width: 488px;
    height: 650px
}

.index-activity-wrap .index-container .activity-list .index-item-box[data-v-c4afa118] {
    margin-top: 24px
}

.index-activity-wrap .index-container .activity-list .index-item-box[data-v-c4afa118]:first-child {
    margin-top: 0
}

@media screen and (max-width: 1280px) {
    .index-activity-wrap[data-v-c4afa118] {
        padding-top:64px;
        width: 928px;
        margin: 0 auto
    }

    .index-activity-wrap .index-container .main-activity[data-v-c4afa118] {
        width: 422px;
        height: 560px
    }

    .index-activity-wrap .index-container .activity-list .index-item-box[data-v-c4afa118] {
        margin-top: 20px
    }
}

@media screen and (min-width: 1281px) and (max-width: 1440px) {
    .index-activity-wrap[data-v-c4afa118] {
        padding-top:64px;
        width: 928px;
        margin: 0 auto
    }

    .index-activity-wrap .index-container .main-activity[data-v-c4afa118] {
        width: 422px;
        height: 560px
    }

    .index-activity-wrap .index-container .activity-list .index-item-box[data-v-c4afa118] {
        margin-top: 20px
    }
}

@media screen and (min-width: 1201px) {
    .index-activity-wrap[data-v-c4afa118] {
        padding-top:64px;
        width: 1440px;
        margin: 0 auto
    }

    .index-activity-wrap .index-activity-lable[data-v-c4afa118] {
        padding-bottom: 24px
    }

    .index-activity-wrap .index-activity-lable .title[data-v-c4afa118] {
        font-size: 24px;
        line-height: 36px
    }

    .index-activity-wrap .index-container .main-activity[data-v-c4afa118] {
        width: 646px;
        height: 858px
    }

    .index-activity-wrap .index-container .activity-list .index-item-box[data-v-c4afa118] {
        margin-top: 25px
    }
}

[data-v-1cd146e0]:root {
    --app-back-wrap-visibility: visible;
    --app-back-wrap-mask-main-bg: rgba(29, 31, 36, 0.7);
    --app-back-wrap-color: #1d1f24
}

.index-rank-wrap[data-v-1cd146e0] {
    padding-top: 40px
}

.index-rank-wrap .index-container[data-v-1cd146e0] {
    border-radius: 12px;
    background: #282a2e;
    padding: 16px 0;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.index-rank-wrap .index-container .rank-box[data-v-1cd146e0] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.index-rank-wrap .index-container .rank-list[data-v-1cd146e0] {
    width: 344px
}

.index-rank-wrap .index-container .rank-list .title[data-v-1cd146e0] {
    padding-left: 20px;
    padding-bottom: 20px;
    color: rgba(255,255,255,0.85);
    font-size: 20px;
    font-weight: bold;
    line-height: 30px
}

.index-rank-wrap .index-container .rank-list .rank-item[data-v-1cd146e0] {
    cursor: pointer;
    padding: 9px 16px 9px 54px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background-position: 16px center;
    background-repeat: no-repeat;
    position: relative
}

.index-rank-wrap .index-container .rank-list .rank-item[data-v-1cd146e0]:nth-child(2) {
    background-image: url(https://start.gtimg.com/web/www/webgame/assets/img/dfd398b246c9d25e5343.png);
    background-size: 26px
}

.index-rank-wrap .index-container .rank-list .rank-item[data-v-1cd146e0]:nth-child(3) {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABDCAMAAAD3VpZUAAAASFBMVEUAAABCrP9Bq/xCrf1CrP1Ar/9Asf9BrP5Crf5BrP1BrP1Arf1Ap/pBrP1AqvpBq/1BrP1An/9Crf1Crf5Aq/9Ar/pDrP5CrP1X6lxbAAAAF3RSTlMAX0DvjxAfz9+fv38g3zCAcBBvr08wv67UrM4AAAEESURBVEjH7dXBjsIgEIBhYIZCC61tdXfe/013NwZYjQRmTPRg/xuHL4CDqo6OPjRrZcygA/oNJjQ8OiDQv/zC2BXpvlOvXYFIqO2ZHrb23NbT42BrY0O1dtUOKTVhwInKUnX0fT1luB5TQ9Y9OMLfNjEtQ8ZD16iIQllZHla379EXzC9fWmCHZJ0A64RHvi1XNny7JjsLbgwJa7718o2to1Rk42J39r5jtig4s3jEwzPWy+2Xl9/XQLZB/GUg0Fx7ynZeuBazdVH+NMZN/jSCfLyg5eOdF/l4XZSPdzZ3be3x1lvYf64lUI12qje18JnqYfsHq96lYS296/OKut5FHR29vh8KzDkbVLmS9QAAAABJRU5ErkJggg==);
    background-size: 26px
}

.index-rank-wrap .index-container .rank-list .rank-item[data-v-1cd146e0]:nth-child(4) {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABDCAMAAAD3VpZUAAAAP1BMVEUAAAD///////////////////////////////////////////////////////////////////////////////9Du/pqAAAAFXRSTlMA2cwbhza+UQ2jonlfbIhtQ7AOlUSHiNQQAAABI0lEQVRIx+2WS26EMAxAEztxvgSYzv3P2qIqdUEdyfami+HtWDwZf+LE3dy8KRlNWuyDwB/sHymrAq6Hx9Aq1nFMlSHUR2VAZHf/N5QldnlhL6KUX8i7k7B8JxnSM8ZObIuyfnwJdZsfnMUmGxBI/IEw5SQcklMBObKeMOWodzly1ruPmXN1elaul5o0XVKruXljuTANEE82s5VSCDwD3Ylp/kxFXWsZarp0f7sLKjenP1HQ0FtmVci9HuzA9jAs/vBjc6sMCUC2HmY+FsbCN4P8mHIwyDjlavtte+TBR1INijd+GHh1abog6Cm/IC43dZANRGl9izGmpYBnUCIL7matHJxeZtcuN/tTpkbhSDS6mKDanPhsdT/2PdEeenQ3N//HJ9BdCCBpZozcAAAAAElFTkSuQmCC);
    background-size: 26px
}

.index-rank-wrap .index-container .rank-list .rank-item .image[data-v-1cd146e0] {
    margin-right: 16px;
    border-radius: 10px;
    width: 64px;
    height: 64px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.index-rank-wrap .index-container .rank-list .rank-item .content .name[data-v-1cd146e0] {
    height: 48px;
    color: rgba(255,255,255,0.85);
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-decoration: none
}

.index-rank-wrap .index-container .rank-list .rank-item .content .name .name-txt[data-v-1cd146e0] {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.index-rank-wrap .index-container .rank-list .rank-item .content .recommend[data-v-1cd146e0] {
    margin-top: 8px;
    color: rgba(255,255,255,0.65);
    font-size: 12px;
    line-height: 18px
}

.index-rank-wrap .index-container .rank-list .rank-item[data-v-1cd146e0]:hover::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    background: #fff;
    opacity: 0.05;
    pointer-events: none
}

.index-rank-wrap .index-container .split[data-v-1cd146e0] {
    width: 1px;
    height: 304px;
    background: rgba(228,228,228,0.1);
    margin: 0 11px
}

@media screen and (max-width: 1280px) {
    .index-rank-wrap[data-v-1cd146e0] {
        padding-top:64px;
        width: 928px;
        margin: 0 auto
    }

    .index-rank-wrap .index-container[data-v-1cd146e0] {
        border-radius: 10px;
        padding: 16px 10px
    }

    .index-rank-wrap .index-container .rank-list[data-v-1cd146e0] {
        width: 286px
    }

    .index-rank-wrap .index-container .rank-list .title[data-v-1cd146e0] {
        padding-bottom: 12px
    }

    .index-rank-wrap .index-container .rank-list .rank-item[data-v-1cd146e0] {
        padding: 12px 10px 12px 60px;
        background-position: 20px center
    }

    .index-rank-wrap .index-container .rank-list .rank-item[data-v-1cd146e0]:nth-child(2) {
        background-size: 28px
    }

    .index-rank-wrap .index-container .rank-list .rank-item[data-v-1cd146e0]:nth-child(3) {
        background-size: 28px
    }

    .index-rank-wrap .index-container .rank-list .rank-item[data-v-1cd146e0]:nth-child(4) {
        background-size: 28px
    }

    .index-rank-wrap .index-container .rank-list .rank-item .image[data-v-1cd146e0] {
        border-radius: 12px;
        width: 67px;
        height: 67px
    }

    .index-rank-wrap .index-container .rank-list .rank-item .content .recommend[data-v-1cd146e0] {
        font-size: 14px;
        line-height: 21px
    }

    .index-rank-wrap .index-container .split[data-v-1cd146e0] {
        height: 315px;
        margin: 0 12px
    }
}

@media screen and (min-width: 1281px) and (max-width: 1440px) {
    .index-rank-wrap[data-v-1cd146e0] {
        padding-top:64px;
        width: 928px;
        margin: 0 auto
    }

    .index-rank-wrap .index-container[data-v-1cd146e0] {
        border-radius: 10px;
        padding: 16px 10px
    }

    .index-rank-wrap .index-container .rank-list[data-v-1cd146e0] {
        width: 286px
    }

    .index-rank-wrap .index-container .rank-list .title[data-v-1cd146e0] {
        padding-bottom: 12px
    }

    .index-rank-wrap .index-container .rank-list .rank-item[data-v-1cd146e0] {
        padding: 12px 10px 12px 60px;
        background-position: 20px center
    }

    .index-rank-wrap .index-container .rank-list .rank-item[data-v-1cd146e0]:nth-child(2) {
        background-size: 28px
    }

    .index-rank-wrap .index-container .rank-list .rank-item[data-v-1cd146e0]:nth-child(3) {
        background-size: 28px
    }

    .index-rank-wrap .index-container .rank-list .rank-item[data-v-1cd146e0]:nth-child(4) {
        background-size: 28px
    }

    .index-rank-wrap .index-container .rank-list .rank-item .image[data-v-1cd146e0] {
        border-radius: 12px;
        width: 67px;
        height: 67px
    }

    .index-rank-wrap .index-container .rank-list .rank-item .content .recommend[data-v-1cd146e0] {
        font-size: 14px;
        line-height: 21px
    }

    .index-rank-wrap .index-container .split[data-v-1cd146e0] {
        height: 315px;
        margin: 0 12px
    }
}

@media screen and (min-width: 1201px) {
    .index-rank-wrap[data-v-1cd146e0] {
        padding-top:64px;
        width: 1440px;
        margin: 0 auto
    }

    .index-rank-wrap .index-container[data-v-1cd146e0] {
        border-radius: 12px;
        padding: 24px 14px
    }

    .index-rank-wrap .index-container .rank-list[data-v-1cd146e0] {
        width: 450px
    }

    .index-rank-wrap .index-container .rank-list .title[data-v-1cd146e0] {
        padding-left: 28px;
        padding-bottom: 24px
    }

    .index-rank-wrap .index-container .rank-list .rank-item[data-v-1cd146e0] {
        padding: 20px 28px 20px 90px;
        background-position: 28px center
    }

    .index-rank-wrap .index-container .rank-list .rank-item[data-v-1cd146e0]:nth-child(2) {
        background-size: 42px
    }

    .index-rank-wrap .index-container .rank-list .rank-item[data-v-1cd146e0]:nth-child(3) {
        background-size: 42px
    }

    .index-rank-wrap .index-container .rank-list .rank-item[data-v-1cd146e0]:nth-child(4) {
        background-size: 42px
    }

    .index-rank-wrap .index-container .rank-list .rank-item .image[data-v-1cd146e0] {
        margin-right: 24px;
        border-radius: 12px;
        width: 100px;
        height: 100px
    }

    .index-rank-wrap .index-container .rank-list .rank-item .content .name[data-v-1cd146e0] {
        font-size: 20px;
        line-height: 30px
    }

    .index-rank-wrap .index-container .rank-list .rank-item .content .recommend[data-v-1cd146e0] {
        margin-top: 10px;
        font-size: 16px;
        line-height: 24px
    }

    .index-rank-wrap .index-container .split[data-v-1cd146e0] {
        height: 480px;
        margin: 0 14px
    }
}

[data-v-2758f596]:root {
    --app-back-wrap-visibility: visible;
    --app-back-wrap-mask-main-bg: rgba(29, 31, 36, 0.7);
    --app-back-wrap-color: #1d1f24
}

.featured-list-wrap[data-v-2758f596] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 16px 16px 20px;
    width: 528px;
    height: 456px;
    border-radius: 12px;
    background: #282a2e
}

.featured-list-wrap .title[data-v-2758f596] {
    color: rgba(255,255,255,0.85);
    font-size: 20px;
    font-weight: bold;
    line-height: 30px
}

.featured-list-wrap .list[data-v-2758f596] {
    margin-top: 27px
}

.featured-list-wrap .list .list-item[data-v-2758f596] {
    cursor: pointer;
    margin-top: 25px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative
}

.featured-list-wrap .list .list-item[data-v-2758f596]:first-child {
    margin-top: 0
}

.featured-list-wrap .list .list-item .image[data-v-2758f596] {
    border-radius: 8px;
    margin-right: 12px;
    width: 164px;
    height: 103px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.featured-list-wrap .list .list-item .content[data-v-2758f596] {
    width: calc(100% - 176px);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start
}

.featured-list-wrap .list .list-item .content .name[data-v-2758f596] {
    color: rgba(255,255,255,0.85);
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    text-decoration: none
}

.featured-list-wrap .list .list-item .content .nainfome[data-v-2758f596] {
    margin-top: 10px;
    padding: 0 10px;
    max-width: 100%;
    height: 34px;
    border-radius: 6px;
    background: rgba(29,31,36,0.8);
    color: rgba(255,255,255,0.65);
    font-size: 12px;
    line-height: 34px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    text-decoration: none
}

.featured-list-wrap .list .list-item .content .recommend[data-v-2758f596] {
    margin-top: 16px;
    color: rgba(255,255,255,0.65);
    font-size: 12px;
    line-height: 18px
}

.featured-list-wrap .list .list-item[data-v-2758f596]:hover::after {
    content: "";
    display: block;
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 5px;
    background: #fff;
    opacity: 0.05;
    pointer-events: none
}

@media screen and (max-width: 1280px) {
    .featured-list-wrap[data-v-2758f596] {
        padding:16px 20px 20px;
        width: 454px;
        height: 432px
    }

    .featured-list-wrap .list[data-v-2758f596] {
        margin-top: 24px
    }

    .featured-list-wrap .list .list-item[data-v-2758f596] {
        margin-top: 24px
    }

    .featured-list-wrap .list .list-item .image[data-v-2758f596] {
        margin-right: 16px;
        width: 156px;
        height: 98px
    }

    .featured-list-wrap .list .list-item .content[data-v-2758f596] {
        width: calc(100% - 172px)
    }

    .featured-list-wrap .list .list-item .content .nainfome[data-v-2758f596] {
        margin-top: 8px;
        padding: 0 8px;
        height: 29px;
        font-size: 14px;
        line-height: 29px
    }

    .featured-list-wrap .list .list-item .content .recommend[data-v-2758f596] {
        font-size: 14px;
        line-height: 21px
    }
}

@media screen and (min-width: 1281px) and (max-width: 1440px) {
    .featured-list-wrap[data-v-2758f596] {
        padding:16px 20px 20px;
        width: 454px;
        height: 432px
    }

    .featured-list-wrap .list[data-v-2758f596] {
        margin-top: 24px
    }

    .featured-list-wrap .list .list-item[data-v-2758f596] {
        margin-top: 24px
    }

    .featured-list-wrap .list .list-item .image[data-v-2758f596] {
        margin-right: 16px;
        width: 156px;
        height: 98px
    }

    .featured-list-wrap .list .list-item .content[data-v-2758f596] {
        width: calc(100% - 172px)
    }

    .featured-list-wrap .list .list-item .content .nainfome[data-v-2758f596] {
        margin-top: 8px;
        padding: 0 8px;
        height: 29px;
        font-size: 14px;
        line-height: 29px
    }

    .featured-list-wrap .list .list-item .content .recommend[data-v-2758f596] {
        font-size: 14px;
        line-height: 21px
    }
}

@media screen and (min-width: 1441px) and (max-width: 1600px) {
    .featured-list-wrap[data-v-2758f596] {
        padding:20px 24px 24px;
        width: 588px;
        height: 510px
    }

    .featured-list-wrap .list[data-v-2758f596] {
        margin-top: 30px
    }

    .featured-list-wrap .list .list-item[data-v-2758f596] {
        margin-top: 32px
    }

    .featured-list-wrap .list .list-item .image[data-v-2758f596] {
        margin-right: 20px;
        width: 182px;
        height: 114px
    }

    .featured-list-wrap .list .list-item .content[data-v-2758f596] {
        width: calc(100% - 202px)
    }

    .featured-list-wrap .list .list-item .content .nainfome[data-v-2758f596] {
        margin-top: 8px;
        padding: 0 12px;
        height: 37px;
        font-size: 14px;
        line-height: 37px
    }

    .featured-list-wrap .list .list-item .content .recommend[data-v-2758f596] {
        margin-top: 24px;
        font-size: 14px;
        line-height: 21px
    }
}

@media screen and (min-width: 1601px) and (max-width: 1920px) {
    .featured-list-wrap[data-v-2758f596] {
        padding:20px 24px 24px;
        width: 588px;
        height: 510px
    }

    .featured-list-wrap .list[data-v-2758f596] {
        margin-top: 30px
    }

    .featured-list-wrap .list .list-item[data-v-2758f596] {
        margin-top: 32px
    }

    .featured-list-wrap .list .list-item .image[data-v-2758f596] {
        margin-right: 20px;
        width: 182px;
        height: 114px
    }

    .featured-list-wrap .list .list-item .content[data-v-2758f596] {
        width: calc(100% - 202px)
    }

    .featured-list-wrap .list .list-item .content .nainfome[data-v-2758f596] {
        margin-top: 8px;
        padding: 0 12px;
        height: 37px;
        font-size: 14px;
        line-height: 37px
    }

    .featured-list-wrap .list .list-item .content .recommend[data-v-2758f596] {
        margin-top: 24px;
        font-size: 14px;
        line-height: 21px
    }
}

@media screen and (min-width: 1201px) {
    .featured-list-wrap[data-v-2758f596] {
        padding:24px 27px 28px;
        width: 708px;
        height: 602px
    }

    .featured-list-wrap .list[data-v-2758f596] {
        margin-top: 30px
    }

    .featured-list-wrap .list .list-item[data-v-2758f596] {
        margin-top: 32px
    }

    .featured-list-wrap .list .list-item .image[data-v-2758f596] {
        margin-right: 24px;
        width: 224px;
        height: 140px
    }

    .featured-list-wrap .list .list-item .content[data-v-2758f596] {
        width: calc(100% - 248px)
    }

    .featured-list-wrap .list .list-item .content .name[data-v-2758f596] {
        font-size: 20px;
        line-height: 30px
    }

    .featured-list-wrap .list .list-item .content .nainfome[data-v-2758f596] {
        margin-top: 16px;
        padding: 0 12px;
        height: 40px;
        font-size: 16px;
        line-height: 40px
    }

    .featured-list-wrap .list .list-item .content .recommend[data-v-2758f596] {
        margin-top: 30px;
        font-size: 16px;
        line-height: 24px
    }
}

[data-v-c9cec7ec]:root {
    --app-back-wrap-visibility: visible;
    --app-back-wrap-mask-main-bg: rgba(29, 31, 36, 0.7);
    --app-back-wrap-color: #1d1f24
}

.index-featured-wrap[data-v-c9cec7ec] {
    padding-top: 40px
}

.index-featured-wrap .index-featured-lable[data-v-c9cec7ec] {
    padding-bottom: 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.index-featured-wrap .index-featured-lable .title[data-v-c9cec7ec] {
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
    color: rgba(255,255,255,0.85)
}

.index-featured-wrap .index-featured-lable .control[data-v-c9cec7ec] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.index-featured-wrap .index-featured-lable .control .slide[data-v-c9cec7ec] {
    cursor: pointer;
    margin-left: 15px;
    width: 30px;
    height: 30px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain
}

.index-featured-wrap .index-featured-lable .control .slide[data-v-c9cec7ec]:first-child {
    margin-left: 0
}

.index-featured-wrap .index-featured-lable .control .slide.slide-prev[data-v-c9cec7ec] {
    background-image: url(https://start.gtimg.com/web/www/webgame/assets/img/abe8e130f5975e8a8b1e.png)
}

.index-featured-wrap .index-featured-lable .control .slide.slide-prev[data-v-c9cec7ec]:hover,.index-featured-wrap .index-featured-lable .control .slide.slide-prev[data-v-c9cec7ec]:active {
    background-image: url(https://start.gtimg.com/web/www/webgame/assets/img/987214f6bafd804f0754.png)
}

.index-featured-wrap .index-featured-lable .control .slide.slide-prev.disable[data-v-c9cec7ec] {
    background-image: url(https://start.gtimg.com/web/www/webgame/assets/img/0c3536833f13f8bfa216.png)
}

.index-featured-wrap .index-featured-lable .control .slide.slide-next[data-v-c9cec7ec] {
    background-image: url(https://start.gtimg.com/web/www/webgame/assets/img/d5773945a5957e6ff504.png)
}

.index-featured-wrap .index-featured-lable .control .slide.slide-next[data-v-c9cec7ec]:hover,.index-featured-wrap .index-featured-lable .control .slide.slide-next[data-v-c9cec7ec]:active {
    background-image: url(https://start.gtimg.com/web/www/webgame/assets/img/670f0323252471d3f6c8.png)
}

.index-featured-wrap .index-featured-lable .control .slide.slide-next.disable[data-v-c9cec7ec] {
    background-image: url(https://start.gtimg.com/web/www/webgame/assets/img/5c43a8a453f3771be421.png)
}

.index-featured-wrap .index-container[data-v-c9cec7ec] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

@media screen and (min-width: 1201px) {
    .index-featured-wrap[data-v-c9cec7ec] {
        padding-top:64px;
        width: 1440px;
        margin: 0 auto
    }

    .index-featured-wrap .title[data-v-c9cec7ec] {
        font-size: 24px;
        line-height: 36px
    }

    .index-featured-wrap .control .slide[data-v-c9cec7ec] {
        width: 36px;
        height: 36px
    }
}

[data-v-665577cc]:root {
    --app-back-wrap-visibility: visible;
    --app-back-wrap-mask-main-bg: rgba(29, 31, 36, 0.7);
    --app-back-wrap-color: #1d1f24
}

.featured-list-wrap[data-v-665577cc] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 16px 20px;
    width: 528px;
    height: 436px;
    border-radius: 12px;
    background: #282a2e;
    position: relative
}

.featured-list-wrap .title[data-v-665577cc] {
    padding-left: 30px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAMAAAC7m5rvAAAAM1BMVEUAAAD///////////////////////////////////////////////////////////////+3leKCAAAAEXRSTlMATAlCMCc4E0cdHEM9BCEOFy/3KLcAAAEFSURBVEjH7ZTbjsMgEEOZCbckQPL/X7vbVVdEY8xbpTaqX60DHg+Ju58qMzQGTh37ygyRxqgmko+RsWb5VRpT4eHtOqDkT1kpJVLASPLUXiklYmfXLP+KQJ0ihNvB6dKLuUKKp7yz8uxI7cai2BXLH7uzGajnh5aTicjMRsMrYLHnN03hyGhi/hXPQxP3WcxlJGOiMRSxjEkwBijRJHGWsbGMrhiH7MYYtY9WJ41Emr44VGbPZ5s14ujcwbxHspyTDh1m/Sfaf5thB8W2GaZ0bT6po32d5rpFLsrFhy3VK9a1xIepfTNGflCz/bjkfTDPMH0FFm+MLV/sXphTVP8p6EDuI/QDXgcJrJuTR04AAAAASUVORK5CYII=);
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: left center;
    cursor: pointer;
    color: rgba(255,255,255,0.85);
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
    display: block;
    text-decoration: none
}

.featured-list-wrap .sub-title[data-v-665577cc] {
    cursor: pointer;
    margin-top: 26px;
    color: rgba(255,255,255,0.85);
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
    display: block;
    text-decoration: none
}

.featured-list-wrap .desc[data-v-665577cc] {
    cursor: pointer;
    margin-top: 10px;
    width: 100%;
    height: 44px;
    color: #bab4b6;
    font-size: 14px;
    line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.featured-list-wrap .desc[data-v-665577cc] a {
    color: inherit;
    text-decoration: none
}

.featured-list-wrap .img-list[data-v-665577cc] {
    margin-top: 18px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.featured-list-wrap .img-list .vertical-image[data-v-665577cc] {
    cursor: pointer;
    border-radius: 10px;
    width: 150px;
    height: 200px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.featured-list-wrap .img-list .horizontal-image[data-v-665577cc] {
    cursor: pointer;
    border-radius: 10px;
    width: 320px;
    height: 200px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.featured-list-wrap .author-info[data-v-665577cc] {
    margin-top: 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.featured-list-wrap .author-info .avatar[data-v-665577cc] {
    margin-right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.featured-list-wrap .author-info .author[data-v-665577cc] {
    color: rgba(255,255,255,0.65);
    font-size: 12px;
    line-height: 18px
}

.featured-list-wrap .author-info .time[data-v-665577cc] {
    margin-left: 16px;
    color: rgba(255,255,255,0.45);
    font-size: 12px;
    line-height: 18px
}

.featured-list-wrap[data-v-665577cc]:hover::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    opacity: 0.05;
    border-radius: 10px;
    pointer-events: none
}

@media screen and (max-width: 1280px) {
    .featured-list-wrap[data-v-665577cc] {
        padding:16px 20px;
        width: 454px;
        height: 392px;
        border-radius: 12px
    }

    .featured-list-wrap .title[data-v-665577cc] {
        color: #dfdfe0
    }

    .featured-list-wrap .sub-title[data-v-665577cc] {
        margin-top: 24px;
        color: #dfdfe0;
        font-size: 16px;
        line-height: 24px
    }

    .featured-list-wrap .desc[data-v-665577cc] {
        margin-top: 8px;
        width: 100%;
        height: 42px;
        font-size: 14px;
        line-height: 21px;
        color: #b4b4b6
    }

    .featured-list-wrap .img-list[data-v-665577cc] {
        margin-top: 16px
    }

    .featured-list-wrap .img-list .vertical-image[data-v-665577cc] {
        border-radius: 8px;
        width: 130px;
        height: 172px
    }

    .featured-list-wrap .img-list .horizontal-image[data-v-665577cc] {
        border-radius: 8px;
        width: 276px;
        height: 172px
    }

    .featured-list-wrap .author-info[data-v-665577cc] {
        margin-top: 16px
    }

    .featured-list-wrap .author-info .avatar[data-v-665577cc] {
        margin-right: 8px;
        width: 24px;
        height: 24px
    }

    .featured-list-wrap .author-info .author[data-v-665577cc] {
        font-size: 14px;
        line-height: 21px
    }
}

@media screen and (min-width: 1281px) and (max-width: 1440px) {
    .featured-list-wrap[data-v-665577cc] {
        padding:16px 20px;
        width: 454px;
        height: 392px;
        border-radius: 12px
    }

    .featured-list-wrap .title[data-v-665577cc] {
        color: #dfdfe0
    }

    .featured-list-wrap .sub-title[data-v-665577cc] {
        margin-top: 24px;
        color: #dfdfe0;
        font-size: 16px;
        line-height: 24px
    }

    .featured-list-wrap .desc[data-v-665577cc] {
        margin-top: 8px;
        width: 100%;
        height: 42px;
        font-size: 14px;
        line-height: 21px;
        color: #b4b4b6
    }

    .featured-list-wrap .img-list[data-v-665577cc] {
        margin-top: 16px
    }

    .featured-list-wrap .img-list .vertical-image[data-v-665577cc] {
        border-radius: 8px;
        width: 130px;
        height: 172px
    }

    .featured-list-wrap .img-list .horizontal-image[data-v-665577cc] {
        border-radius: 8px;
        width: 276px;
        height: 172px
    }

    .featured-list-wrap .author-info[data-v-665577cc] {
        margin-top: 16px
    }

    .featured-list-wrap .author-info .avatar[data-v-665577cc] {
        margin-right: 8px;
        width: 24px;
        height: 24px
    }

    .featured-list-wrap .author-info .author[data-v-665577cc] {
        font-size: 14px;
        line-height: 21px
    }
}

@media screen and (min-width: 1441px) and (max-width: 1600px) {
    .featured-list-wrap[data-v-665577cc] {
        padding:20px 24px;
        width: 588px;
        height: 477px;
        border-radius: 12px
    }

    .featured-list-wrap .title[data-v-665577cc] {
        color: #dfdfe0
    }

    .featured-list-wrap .sub-title[data-v-665577cc] {
        margin-top: 30px;
        color: #dfdfe0;
        font-size: 16px;
        line-height: 24px
    }

    .featured-list-wrap .desc[data-v-665577cc] {
        margin-top: 12px;
        width: 100%;
        height: 42px;
        font-size: 14px;
        line-height: 21px;
        color: #b4b4b6
    }

    .featured-list-wrap .img-list[data-v-665577cc] {
        margin-top: 20px
    }

    .featured-list-wrap .img-list .vertical-image[data-v-665577cc] {
        border-radius: 12px;
        width: 169px;
        height: 223px
    }

    .featured-list-wrap .img-list .horizontal-image[data-v-665577cc] {
        border-radius: 12px;
        width: 359px;
        height: 223px
    }

    .featured-list-wrap .author-info[data-v-665577cc] {
        margin-top: 20px
    }

    .featured-list-wrap .author-info .avatar[data-v-665577cc] {
        margin-right: 12px;
        width: 32px;
        height: 32px
    }

    .featured-list-wrap .author-info .author[data-v-665577cc] {
        font-size: 14px;
        line-height: 21px
    }
}

@media screen and (min-width: 1601px) and (max-width: 1920px) {
    .featured-list-wrap[data-v-665577cc] {
        padding:20px 24px;
        width: 588px;
        height: 477px;
        border-radius: 12px
    }

    .featured-list-wrap .title[data-v-665577cc] {
        color: #dfdfe0
    }

    .featured-list-wrap .sub-title[data-v-665577cc] {
        margin-top: 30px;
        color: #dfdfe0;
        font-size: 16px;
        line-height: 24px
    }

    .featured-list-wrap .desc[data-v-665577cc] {
        margin-top: 12px;
        width: 100%;
        height: 42px;
        font-size: 14px;
        line-height: 21px;
        color: #b4b4b6
    }

    .featured-list-wrap .img-list[data-v-665577cc] {
        margin-top: 20px
    }

    .featured-list-wrap .img-list .vertical-image[data-v-665577cc] {
        border-radius: 12px;
        width: 169px;
        height: 223px
    }

    .featured-list-wrap .img-list .horizontal-image[data-v-665577cc] {
        border-radius: 12px;
        width: 359px;
        height: 223px
    }

    .featured-list-wrap .author-info[data-v-665577cc] {
        margin-top: 20px
    }

    .featured-list-wrap .author-info .avatar[data-v-665577cc] {
        margin-right: 12px;
        width: 32px;
        height: 32px
    }

    .featured-list-wrap .author-info .author[data-v-665577cc] {
        font-size: 14px;
        line-height: 21px
    }
}

@media screen and (min-width: 1201px) {
    .featured-list-wrap[data-v-665577cc] {
        padding:21px 28px;
        width: 708px;
        height: 543px;
        border-radius: 12px
    }

    .featured-list-wrap .title[data-v-665577cc] {
        color: #dfdfe0;
        font-size: 24px;
        line-height: 36px
    }

    .featured-list-wrap .sub-title[data-v-665577cc] {
        margin-top: 27px;
        color: #dfdfe0;
        font-size: 20px;
        line-height: 30px
    }

    .featured-list-wrap .desc[data-v-665577cc] {
        margin-top: 12px;
        width: 100%;
        height: 48px;
        font-size: 16px;
        line-height: 24px;
        color: #b4b4b6
    }

    .featured-list-wrap .img-list[data-v-665577cc] {
        margin-top: 20px
    }

    .featured-list-wrap .img-list .vertical-image[data-v-665577cc] {
        border-radius: 12px;
        width: 204px;
        height: 269px
    }

    .featured-list-wrap .img-list .horizontal-image[data-v-665577cc] {
        border-radius: 12px;
        width: 432px;
        height: 269px
    }

    .featured-list-wrap .author-info[data-v-665577cc] {
        margin-top: 20px
    }

    .featured-list-wrap .author-info .avatar[data-v-665577cc] {
        margin-right: 12px;
        width: 32px;
        height: 32px
    }

    .featured-list-wrap .author-info .author[data-v-665577cc] {
        font-size: 16px;
        line-height: 24px
    }
}

[data-v-53db61d9]:root {
    --app-back-wrap-visibility: visible;
    --app-back-wrap-mask-main-bg: rgba(29, 31, 36, 0.7);
    --app-back-wrap-color: #1d1f24
}

.featured-list-wrap[data-v-53db61d9] {
    padding: 16px 20px;
    width: 528px;
    height: 436px;
    border-radius: 12px;
    background: #282a2e
}

.featured-list-wrap .title[data-v-53db61d9] {
    padding-left: 30px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAMAAAC7m5rvAAAAM1BMVEUAAAD///////////////////////////////////////////////////////////////+3leKCAAAAEXRSTlMATAlCMCc4E0cdHEM9BCEOFy/3KLcAAAEFSURBVEjH7ZTbjsMgEEOZCbckQPL/X7vbVVdEY8xbpTaqX60DHg+Ju58qMzQGTh37ygyRxqgmko+RsWb5VRpT4eHtOqDkT1kpJVLASPLUXiklYmfXLP+KQJ0ihNvB6dKLuUKKp7yz8uxI7cai2BXLH7uzGajnh5aTicjMRsMrYLHnN03hyGhi/hXPQxP3WcxlJGOiMRSxjEkwBijRJHGWsbGMrhiH7MYYtY9WJ41Emr44VGbPZ5s14ujcwbxHspyTDh1m/Sfaf5thB8W2GaZ0bT6po32d5rpFLsrFhy3VK9a1xIepfTNGflCz/bjkfTDPMH0FFm+MLV/sXphTVP8p6EDuI/QDXgcJrJuTR04AAAAASUVORK5CYII=);
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: left center;
    color: rgba(255,255,255,0.85);
    font-size: 20px;
    font-weight: bold;
    line-height: 30px
}

.featured-list-wrap .featured-list[data-v-53db61d9] {
    margin-top: 26px
}

.featured-list-wrap .featured-list .featured-list-item[data-v-53db61d9] {
    cursor: pointer;
    margin-top: 40px;
    position: relative
}

.featured-list-wrap .featured-list .featured-list-item[data-v-53db61d9]:first-child {
    margin-top: 0
}

.featured-list-wrap .featured-list .featured-list-item .desc[data-v-53db61d9] {
    cursor: pointer;
    font-size: 14px;
    line-height: 21px;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden
}

.featured-list-wrap .featured-list .featured-list-item .desc[data-v-53db61d9] a {
    color: inherit;
    text-decoration: none
}

.featured-list-wrap .featured-list .featured-list-item .author-info[data-v-53db61d9] {
    margin-top: 19px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.featured-list-wrap .featured-list .featured-list-item .author-info .avatar[data-v-53db61d9] {
    margin-right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.featured-list-wrap .featured-list .featured-list-item .author-info .author[data-v-53db61d9] {
    color: rgba(255,255,255,0.65);
    font-size: 12px;
    line-height: 18px;
    display: block;
    text-decoration: none;
    cursor: default
}

.featured-list-wrap .featured-list .featured-list-item[data-v-53db61d9]:hover::after {
    content: "";
    display: block;
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border-radius: 5px;
    background: #fff;
    opacity: 0.05;
    pointer-events: none
}

@media screen and (max-width: 1280px) {
    .featured-list-wrap[data-v-53db61d9] {
        padding:16px 20px;
        width: 454px;
        height: 392px;
        border-radius: 12px
    }

    .featured-list-wrap .title[data-v-53db61d9] {
        color: #dfdfe0
    }

    .featured-list-wrap .featured-list[data-v-53db61d9] {
        margin-top: 24px
    }

    .featured-list-wrap .featured-list .featured-list-item[data-v-53db61d9] {
        margin-top: 29px
    }

    .featured-list-wrap .featured-list .featured-list-item:hover .desc[data-v-53db61d9] {
        color: #fff
    }

    .featured-list-wrap .featured-list .featured-list-item:hover .author-info .author[data-v-53db61d9] {
        color: #fff
    }

    .featured-list-wrap .featured-list .featured-list-item .desc[data-v-53db61d9] {
        height: 42px;
        font-size: 14px;
        line-height: 21px;
        color: rgba(255,255,255,0.65)
    }

    .featured-list-wrap .featured-list .featured-list-item .author-info[data-v-53db61d9] {
        margin-top: 12px
    }

    .featured-list-wrap .featured-list .featured-list-item .author-info .avatar[data-v-53db61d9] {
        margin-right: 8px;
        width: 24px;
        height: 24px
    }

    .featured-list-wrap .featured-list .featured-list-item .author-info .author[data-v-53db61d9] {
        line-height: 16px
    }

    .featured-list-wrap .featured-list .featured-list-item .author-info .time[data-v-53db61d9] {
        display: none
    }
}

@media screen and (min-width: 1281px) and (max-width: 1440px) {
    .featured-list-wrap[data-v-53db61d9] {
        padding:16px 20px;
        width: 454px;
        height: 392px;
        border-radius: 12px
    }

    .featured-list-wrap .title[data-v-53db61d9] {
        color: #dfdfe0
    }

    .featured-list-wrap .featured-list[data-v-53db61d9] {
        margin-top: 24px
    }

    .featured-list-wrap .featured-list .featured-list-item[data-v-53db61d9] {
        margin-top: 29px
    }

    .featured-list-wrap .featured-list .featured-list-item:hover .desc[data-v-53db61d9] {
        color: #fff
    }

    .featured-list-wrap .featured-list .featured-list-item:hover .author-info .author[data-v-53db61d9] {
        color: #fff
    }

    .featured-list-wrap .featured-list .featured-list-item .desc[data-v-53db61d9] {
        height: 42px;
        font-size: 14px;
        line-height: 21px;
        color: rgba(255,255,255,0.65)
    }

    .featured-list-wrap .featured-list .featured-list-item .author-info[data-v-53db61d9] {
        margin-top: 12px
    }

    .featured-list-wrap .featured-list .featured-list-item .author-info .avatar[data-v-53db61d9] {
        margin-right: 8px;
        width: 24px;
        height: 24px
    }

    .featured-list-wrap .featured-list .featured-list-item .author-info .author[data-v-53db61d9] {
        line-height: 16px
    }

    .featured-list-wrap .featured-list .featured-list-item .author-info .time[data-v-53db61d9] {
        display: none
    }
}

@media screen and (min-width: 1441px) and (max-width: 1600px) {
    .featured-list-wrap[data-v-53db61d9] {
        padding:20px 24px;
        width: 588px;
        height: 477px;
        border-radius: 12px
    }

    .featured-list-wrap .title[data-v-53db61d9] {
        color: #dfdfe0
    }

    .featured-list-wrap .featured-list[data-v-53db61d9] {
        margin-top: 33px
    }

    .featured-list-wrap .featured-list .featured-list-item[data-v-53db61d9] {
        margin-top: 37px
    }

    .featured-list-wrap .featured-list .featured-list-item:hover .desc[data-v-53db61d9] {
        color: #fff
    }

    .featured-list-wrap .featured-list .featured-list-item:hover .author-info .author[data-v-53db61d9] {
        color: #fff
    }

    .featured-list-wrap .featured-list .featured-list-item .desc[data-v-53db61d9] {
        height: 42px;
        font-size: 14px;
        line-height: 21px;
        color: rgba(255,255,255,0.65)
    }

    .featured-list-wrap .featured-list .featured-list-item .author-info[data-v-53db61d9] {
        margin-top: 24px
    }

    .featured-list-wrap .featured-list .featured-list-item .author-info .avatar[data-v-53db61d9] {
        margin-right: 12px;
        width: 32px;
        height: 32px
    }

    .featured-list-wrap .featured-list .featured-list-item .author-info .author[data-v-53db61d9] {
        font-size: 14px;
        line-height: 21px
    }
}

@media screen and (min-width: 1601px) and (max-width: 1920px) {
    .featured-list-wrap[data-v-53db61d9] {
        padding:20px 24px;
        width: 588px;
        height: 477px;
        border-radius: 12px
    }

    .featured-list-wrap .title[data-v-53db61d9] {
        color: #dfdfe0
    }

    .featured-list-wrap .featured-list[data-v-53db61d9] {
        margin-top: 33px
    }

    .featured-list-wrap .featured-list .featured-list-item[data-v-53db61d9] {
        margin-top: 37px
    }

    .featured-list-wrap .featured-list .featured-list-item:hover .desc[data-v-53db61d9] {
        color: #fff
    }

    .featured-list-wrap .featured-list .featured-list-item:hover .author-info .author[data-v-53db61d9] {
        color: #fff
    }

    .featured-list-wrap .featured-list .featured-list-item .desc[data-v-53db61d9] {
        height: 42px;
        font-size: 14px;
        line-height: 21px;
        color: rgba(255,255,255,0.65)
    }

    .featured-list-wrap .featured-list .featured-list-item .author-info[data-v-53db61d9] {
        margin-top: 24px
    }

    .featured-list-wrap .featured-list .featured-list-item .author-info .avatar[data-v-53db61d9] {
        margin-right: 12px;
        width: 32px;
        height: 32px
    }

    .featured-list-wrap .featured-list .featured-list-item .author-info .author[data-v-53db61d9] {
        font-size: 14px;
        line-height: 21px
    }
}

@media screen and (min-width: 1201px) {
    .featured-list-wrap[data-v-53db61d9] {
        padding:21px 28px;
        width: 708px;
        height: 543px;
        border-radius: 12px
    }

    .featured-list-wrap .title[data-v-53db61d9] {
        color: #dfdfe0;
        font-size: 24px;
        line-height: 36px
    }

    .featured-list-wrap .featured-list[data-v-53db61d9] {
        margin-top: 27px
    }

    .featured-list-wrap .featured-list .featured-list-item[data-v-53db61d9] {
        margin-top: 60px
    }

    .featured-list-wrap .featured-list .featured-list-item:hover .desc[data-v-53db61d9] {
        color: #fff
    }

    .featured-list-wrap .featured-list .featured-list-item:hover .author-info .author[data-v-53db61d9] {
        color: #fff
    }

    .featured-list-wrap .featured-list .featured-list-item .desc[data-v-53db61d9] {
        height: 48px;
        font-size: 16px;
        line-height: 24px;
        color: rgba(255,255,255,0.65)
    }

    .featured-list-wrap .featured-list .featured-list-item .author-info[data-v-53db61d9] {
        margin-top: 24px
    }

    .featured-list-wrap .featured-list .featured-list-item .author-info .avatar[data-v-53db61d9] {
        margin-right: 12px;
        width: 32px;
        height: 32px
    }

    .featured-list-wrap .featured-list .featured-list-item .author-info .author[data-v-53db61d9] {
        font-size: 16px;
        line-height: 24px
    }

    .featured-list-wrap .featured-list .featured-list-item .author-info .time[data-v-53db61d9] {
        display: none
    }
}

[data-v-4fbc0306]:root {
    --app-back-wrap-visibility: visible;
    --app-back-wrap-mask-main-bg: rgba(29, 31, 36, 0.7);
    --app-back-wrap-color: #1d1f24
}

.index-article-wrap[data-v-4fbc0306] {
    padding-top: 40px
}

.index-article-wrap .index-article-lable[data-v-4fbc0306] {
    padding-bottom: 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.index-article-wrap .index-article-lable .title[data-v-4fbc0306] {
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
    color: rgba(255,255,255,0.85)
}

.index-article-wrap .index-article-lable .control[data-v-4fbc0306] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.index-article-wrap .index-article-lable .control .slide[data-v-4fbc0306] {
    cursor: pointer;
    margin-left: 10px;
    width: 28px;
    height: 28px;
    background-color: rgba(255,255,255,0.1);
    border-radius: 50%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 12px
}

.index-article-wrap .index-article-lable .control .slide[data-v-4fbc0306]:first-child {
    margin-left: 0
}

.index-article-wrap .index-article-lable .control .slide.slide-prev[data-v-4fbc0306] {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2BAMAAAB+a3fuAAAALVBMVEUAAAD///////////////////////////////////////////////////////+hSKubAAAAD3RSTlMAslicFqeQC28hQmM3ZE5Fd078AAAA7ElEQVQ4y52UMQrCQBBFhxiMCilGiYgBSY4QsLELeAKLFILNVrZWwTLeQBB7vYGX8CDexFkULJw/kEz7eEn+5s/S/wTVg8BEjseI1cwJQKHDbM3MKdAKYQ3WZoYGIlyZUYLhRlimsyfWRoy1u6C5jgKv3XSWC9phLTljbaujWNCk1NlJ2FJHR6xFDmu1oGkJm8B7Xet57YBPsiF9HGqCjG+CwTLq8Mzc+Ja+kSEscHaq4VHbZ00DKNr/loKPiDOuyOyg1d32naeXsAWZO2btZvudposhhsVPRHcPFhso2m9M7LsVtiMlNHH1DfEGIxwo033nRcAAAAAASUVORK5CYII=)
}

.index-article-wrap .index-article-lable .control .slide.slide-prev[data-v-4fbc0306]:hover,.index-article-wrap .index-article-lable .control .slide.slide-prev[data-v-4fbc0306]:active {
    background-color: rgba(255,255,255,0.3);
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2BAMAAAB+a3fuAAAAMFBMVEUAAAD///////////////////////////////////////////////////////////87TQQwAAAAD3RSTlMAf98g788QnzCPX6BQcL/CFIXWAAAA7klEQVQ4y4WUMQrCQBBFN4pitMkNUtjYGTxDCgvBLu3apLLJEUQ8gEfwBh7Bxnt4BFEiEkHGCREs3LeZ9vGSndk/a/4rSPcGqm/lRiwXKQF1LbOZiFSgTZUVrD09GrSwE6EOBktlkZudWRsKa0dFLzcKau3gZrGiBWvlhrW5G4WK7ombnZSN3WjNWt+ylit6JJgEydxap9ZWMElOgrGUBK0mCcgiYlfPN2PPWXpND5zLjLYHR+2ftRmh6L9bEzQi9zgxrRnk7HLmAV6UvU3rjvFu8k4D3LKod/UT6e1hsUDR/8fS/7ZiOipDFabfJj64pMpYLJl8xAAAAABJRU5ErkJggg==)
}

.index-article-wrap .index-article-lable .control .slide.slide-prev.disable[data-v-4fbc0306] {
    background-color: rgba(255,255,255,0.05);
    cursor: default;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2BAMAAAB+a3fuAAAAIVBMVEUAAAD////////////////////////////////////////PIev5AAAAC3RSTlMAJhIFIR4WGA4MCwJvRuQAAADHSURBVDjLpdTLEYIwFIXhOyDg9iJmRlemA52hAcadK9JBWqAEO8AS7NRkwcp7jiNk+89HHkDkexQaBY2gLUqVagdSGXDrVbUFbEgtYuYIu9jtRmZTzN6Y7Ql7pnSyU5HZbDef0pmwK2YHO9UpdYBNqd3t1BAWMKtSOtqszGy02S4zwScZBa7EgSTo3fDGn+mXtaCtC/kuRwThUfOzlobBicCCQb8FPgjUmcBW/v/H5EVgyWDP4PADOgbjyhk7dreuuZOlXjbxAcfpHfzogoUZAAAAAElFTkSuQmCC)
}

.index-article-wrap .index-article-lable .control .slide.slide-next[data-v-4fbc0306] {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2BAMAAAB+a3fuAAAALVBMVEUAAAD///////////////////////////////////////////////////////+hSKubAAAAD3RSTlMAslicFqeQC28hZEI3ToVwpYsTAAAA3ElEQVQ4y5WUOwrCUBBFHyL4q65iEEQxO1CwsQu4ghQpBAut0qayNpWtIPZmB7oIF+COJNjmHvC1h0MyM3cm/F4rewT3KkWFY6mUAxslhsWS1oZ1BWIJYkviL25AHF9B3IOop4EfSTPDBrW4MPAtaWhYLwXxBmJ7BeJW0oTEM4hRYUWfjhPMqnOUdIB0DINPxzzArBzrAyulCP5lCjUsfe1Rc+3tWsup177VF5qt18zi302ffQY5u5z5l6Qp7RjsJu2013Y+CaMEbs//N6vyWkhtEvi2xnCT+1lDk7+AaikvXFSRagAAAABJRU5ErkJggg==)
}

.index-article-wrap .index-article-lable .control .slide.slide-next[data-v-4fbc0306]:hover,.index-article-wrap .index-article-lable .control .slide.slide-next[data-v-4fbc0306]:active {
    background-color: rgba(255,255,255,0.3);
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2BAMAAAB+a3fuAAAAMFBMVEUAAAD///////////////////////////////////////////////////////////87TQQwAAAAD3RSTlMAf98g788QoDCQX59QcL/EMZy+AAAA3ElEQVQ4y5WUvQnCYBRFPxH8q9xAwcZOcQYLCyFWaU3jHBFxADeIG2jlBO7hDAmmieiVYJt7wK89HJL33n0v/F5reQruZSoTxyIpBlbMDRtJmhjWFYgpiC2JvzgF8bkHcQ2izgY+JL0NG9Ti0MC7pNywXgTiAcT2DMSFpBeJVxDLxIo+HTuYVWcraQPpyINPxyfArBzrA0ulEv6lghrGvvayufZ2rcXUa9/qG83Wa2bxj6bPPoOcXc78RVJFOwa7STvttZVPQjGH2/P/zcq8FiKbBL6tI7jJ/WVDk7+ahcha2dvNzQAAAABJRU5ErkJggg==)
}

.index-article-wrap .index-article-lable .control .slide.slide-next.disable[data-v-4fbc0306] {
    background-color: rgba(255,255,255,0.05);
    cursor: default;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2BAMAAAB+a3fuAAAAFVBMVEUAAAD///////////////////////9Iz20EAAAAB3RSTlMAJR4FEhcM+ZwYrwAAAKVJREFUOMuV1MENwjAQRNEVxDkzBnwG0UCgAtxB3AH03wRCuWa+ZV9Hz5F3NxvbmbSGO03ZZpJukOXFZFXSw2SJYAM48RcZimAh+AF4Mdn8h28TfgEeCb4I3jvwSnAFmC2E6ThQrwgmeGM0KQf0KuBSuhNYgTec6O1QM6g19Qh6O86eps40gzy7c4eV8X+sdtji2dm0FBjsni7DHTm+Wyvs5LRX5B9V3BrRk9zgmAAAAABJRU5ErkJggg==)
}

.index-article-wrap .index-container[data-v-4fbc0306] {
    position: relative
}

.index-article-wrap .index-container .article-box[data-v-4fbc0306] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

@media screen and (max-width: 1280px) {
    .index-article-wrap[data-v-4fbc0306] {
        padding-top:64px;
        width: 928px;
        margin: 0 auto
    }

    .index-article-wrap .index-article-lable .title[data-v-4fbc0306] {
        font-size: 20px;
        color: #fff
    }

    .index-article-wrap .index-container[data-v-4fbc0306] {
        position: relative;
        padding-top: 392px
    }

    .index-article-wrap .index-container .article-box[data-v-4fbc0306] {
        position: absolute;
        top: 0;
        left: 0;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-transform-origin: top left;
        transform-origin: top left
    }

    .index-article-wrap .index-container .article-box .index-item-box[data-v-4fbc0306] {
        margin-right: 20px
    }

    .index-article-wrap .index-container .article-box .index-item-box[data-v-4fbc0306]:last-child {
        margin-right: 0
    }
}

@media screen and (min-width: 1281px) and (max-width: 1440px) {
    .index-article-wrap[data-v-4fbc0306] {
        padding-top:64px;
        width: 928px;
        margin: 0 auto
    }

    .index-article-wrap .index-article-lable .title[data-v-4fbc0306] {
        font-size: 20px;
        font-weight: bold
    }

    .index-article-wrap .index-container[data-v-4fbc0306] {
        position: relative;
        padding-top: 392px
    }

    .index-article-wrap .index-container .article-box[data-v-4fbc0306] {
        position: absolute;
        top: 0;
        left: 0;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-transform-origin: top left;
        transform-origin: top left
    }

    .index-article-wrap .index-container .article-box .index-item-box[data-v-4fbc0306] {
        margin-right: 20px
    }

    .index-article-wrap .index-container .article-box .index-item-box[data-v-4fbc0306]:last-child {
        margin-right: 0
    }
}

@media screen and (min-width: 1201px) {
    .index-article-wrap[data-v-4fbc0306] {
        padding-top:64px;
        width: 1440px;
        margin: 0 auto
    }

    .index-article-wrap .index-article-lable .title[data-v-4fbc0306] {
        color: #fff
    }

    .index-article-wrap .index-container[data-v-4fbc0306] {
        position: relative;
        padding-top: 543px
    }

    .index-article-wrap .index-container .article-box[data-v-4fbc0306] {
        position: absolute;
        top: 0;
        left: 0;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-transform-origin: top left;
        transform-origin: top left
    }

    .index-article-wrap .index-container .article-box .index-item-box[data-v-4fbc0306] {
        margin-right: 24px
    }

    .index-article-wrap .index-container .article-box .index-item-box[data-v-4fbc0306]:last-child {
        margin-right: 0
    }
}

[data-v-1f10d97c]:root {
    --app-back-wrap-visibility: visible;
    --app-back-wrap-mask-main-bg: rgba(29, 31, 36, 0.7);
    --app-back-wrap-color: #1d1f24
}

.banner-item-wrap[data-v-1f10d97c] {
    cursor: pointer;
    pointer-events: none;
    position: relative;
    width: 1080px;
    height: 368px;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    -webkit-transition: opacity 0.5s linear;
    transition: opacity 0.5s linear
}

.banner-item-wrap.active[data-v-1f10d97c] {
    pointer-events: auto;
    opacity: 1
}

.banner-item-wrap.active .tags[data-v-1f10d97c] {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1
}

.banner-item-wrap.active .logo[data-v-1f10d97c] {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1
}

.banner-item-wrap.active .title[data-v-1f10d97c] {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1
}

.banner-item-wrap.active .btns[data-v-1f10d97c] {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1
}

.banner-item-wrap .banner-img[data-v-1f10d97c] {
    border-radius: 12px;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat
}

.banner-item-wrap .banner-video[data-v-1f10d97c] {
    border-radius: 12px;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.banner-item-wrap .shadow[data-v-1f10d97c] {
    pointer-events: none;
    position: absolute;
    left: 0;
    top: -1px;
    width: 100%;
    height: calc(100% + 2px);
    background-image: url(https://start.gtimg.com/web/www/webgame/assets/img/e9801eff7cb157ecc4e9.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.banner-item-wrap .tags[data-v-1f10d97c] {
    position: absolute;
    left: 30px;
    top: 24px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-transform: translate(0, 2px);
    transform: translate(0, 2px);
    opacity: 0;
    -webkit-transition: -webkit-transform 0.5s linear;
    transition: -webkit-transform 0.5s linear;
    transition: transform 0.5s linear;
    transition: transform 0.5s linear, -webkit-transform 0.5s linear
}

.banner-item-wrap .tags .tags-item[data-v-1f10d97c] {
    margin-right: 8px;
    padding: 4px 15px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.2);
    color: rgba(255,255,255,0.85);
    font-size: 12px;
    font-weight: bold;
    line-height: 18px
}

.banner-item-wrap .logo[data-v-1f10d97c] {
    position: absolute;
    left: 30px;
    top: 86px;
    width: 200px;
    height: 100px;
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    opacity: 0;
    -webkit-transition: -webkit-transform 0.5s linear;
    transition: -webkit-transform 0.5s linear;
    transition: transform 0.5s linear;
    transition: transform 0.5s linear, -webkit-transform 0.5s linear
}

.banner-item-wrap .title[data-v-1f10d97c] {
    position: absolute;
    left: 30px;
    top: 214px;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
    overflow: hidden;
    width: 242px;
    height: 60px;
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    opacity: 0;
    -webkit-transition: -webkit-transform 0.5s linear;
    transition: -webkit-transform 0.5s linear;
    transition: transform 0.5s linear;
    transition: transform 0.5s linear, -webkit-transform 0.5s linear
}

.banner-item-wrap .btns[data-v-1f10d97c] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    left: 30px;
    top: 298px;
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    opacity: 0;
    -webkit-transition: -webkit-transform 0.5s linear;
    transition: -webkit-transform 0.5s linear;
    transition: transform 0.5s linear;
    transition: transform 0.5s linear, -webkit-transform 0.5s linear
}

.banner-item-wrap .btns .button[data-v-1f10d97c] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 128px;
    height: 40px;
    border-radius: 6px;
    background: linear-gradient(84deg, #1954ab 2.05%, #0286ff 29.31%, #31ebf6 75.49%, #ccfbff 100%);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;
    text-decoration: none
}

.banner-item-wrap .btns .button .icon[data-v-1f10d97c] {
    margin-right: 5px;
    width: 16px;
    height: 19px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAA6CAMAAADBRyrTAAAAPFBMVEUAAAD////////////////////////////////////////////////////////////////////////////YSWgTAAAAE3RSTlMA3yDvEL+fP49/b1/PgGAwT69woepKLwAAASxJREFUSMeVlVuuwjAMROM06Yu0hc7+93p1BdKIOsX2+eHLyZngUVNJQc4xByeaPGIDEyCxS14AQl55ACBnYGLBP/J0DxQBEPKa8GbYvBMVH7xPnAEg5LWAuLzKACDktQPQXnZuehXX04a8Zlxo2ZmbzL9HTgAxrwaNZFdu+4lZJctLVynktaCNEvEqUlM61grFXYWn+h58qovuKrx8fnmR4cWdUxdZFeZFsarktQ7gwPR7H6f5W2nRLXmoo0nthN7r5WjLRurlaNp0pTfILOjwyqHla3dvM6LHsN7+R+gxl3RHz77SRrG7bEgW00Yntm1IvtpYe9kCNjpxPbwfUvcHeNNLbyfm0tuMdgV1YtrYSMCGiW0b1kZV0E7MCtocrKAP4dK72LlmPnKK8QcprzcB9EHy8wAAAABJRU5ErkJggg==);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat
}

.banner-item-wrap .btns .button[data-v-1f10d97c]:hover {
    background: linear-gradient(84.1deg, #457bc5 2.05%, #37a3ff 29.31%, #82f7ff 75.49%, #c1fafe 100%)
}

.banner-item-wrap .btns .control[data-v-1f10d97c] {
    cursor: default;
    margin-left: 16px;
    width: 24px;
    height: 24px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAxCAMAAACrgNoQAAAAP1BMVEUAAAD///////////////////////////////////////////////////////////////////////////////9Du/pqAAAAFXRSTlMA2WwbvqLMUlEN91825Yd7RA6weiljj5N8AAAA8UlEQVRIx+3Sy7KDIBAEUIYBvDzMfeX/vzVWG9IVWTDuUqn0ipI+yqjuk3dKzuf6NUk70/8WEW+va5RT4BqEwHZ8kQBgPn5qHsB6/KBuBrLuaUFELtkBDN+Ea03CoEiA3a++Xvbv41lPzR1BFeliwQ2xnQIS1Q1AQxcLBjxsHwFF708ABftTALGu6E8AxVrKir4NOF+2VGcEmLcUTG4DmBeTTwH7qhB9+1+RPAK+fwovj9QR6L1/Fw1/C+MHUHsfAtc1hj1pE396ABqjPq+Z3wseTzCPxyAE8/yETXg7wGCIBXAQAHs8gX0QO+D7/uSlcwMKxgXX1gJMeAAAAABJRU5ErkJggg==);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat
}

.banner-item-wrap .btns .control.muted[data-v-1f10d97c] {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAxCAMAAACrgNoQAAAAP1BMVEUAAAD///////////////////////////////////////////////////////////////////////////////9Du/pqAAAAFXRSTlMA2Wwbvg3MvaM2h1FDsV56bV+VKXsLRdsDAAABOElEQVRIx+2U3XaDIBCEGZcloMaY2Pd/1kL0DAXUNHc9PZkrsszn/rjRfPSfpFr9Duf+u0PhEGA+838B6H4GxhiYDu3iUQOmj5GjqhaLFtArYPWo/HhXA0YcQ235LnS8LdqQ/fKtmAwoTfHqxgplVUjl92oyII7TCYBT1ketRgJDmk5OMaynDpQLhkA9nTvwIOAuT3kxBJrpSLTV10mM8HjdjpGV14DSZh7AeArQNnA/hl8AN54ZPQe6BnidYXoL8MD4Tg8CQInyvd7kKW2BHvD5PWi9GlMNLOBUA2C5JNRMgJvR51zbUfxllYvEVapttbIBtv1ba49kKLY1PYBsaWc70wpUsmym0GhTIzvAzASVJBFogIA2ARshUD7GmyN1Gcj+PK3dRtpvq1vMicR7Kcq0bjQf/Sl9A3DEB4WcYmZSAAAAAElFTkSuQmCC)
}

@media screen and (max-width: 1280px) {
    .banner-item-wrap[data-v-1f10d97c] {
        width:928px;
        height: 317px
    }

    .banner-item-wrap .tags[data-v-1f10d97c] {
        left: 24px;
        top: 20px
    }

    .banner-item-wrap .tags .tags-item[data-v-1f10d97c] {
        margin-right: 12px
    }

    .banner-item-wrap .logo[data-v-1f10d97c] {
        left: 24px;
        top: 101px;
        width: 128px;
        height: 64px
    }

    .banner-item-wrap .title[data-v-1f10d97c] {
        left: 24px;
        top: 185px;
        font-size: 16px;
        line-height: 24px;
        width: 242px;
        height: 48px
    }

    .banner-item-wrap .btns[data-v-1f10d97c] {
        left: 24px;
        top: 253px
    }
}

@media screen and (min-width: 1281px) and (max-width: 1440px) {
    .banner-item-wrap[data-v-1f10d97c] {
        width:928px;
        height: 317px
    }

    .banner-item-wrap .tags[data-v-1f10d97c] {
        left: 24px;
        top: 20px
    }

    .banner-item-wrap .tags .tags-item[data-v-1f10d97c] {
        margin-right: 12px
    }

    .banner-item-wrap .logo[data-v-1f10d97c] {
        left: 24px;
        top: 101px;
        width: 128px;
        height: 64px
    }

    .banner-item-wrap .title[data-v-1f10d97c] {
        left: 24px;
        top: 185px;
        font-size: 16px;
        line-height: 24px;
        width: 242px;
        height: 48px
    }

    .banner-item-wrap .btns[data-v-1f10d97c] {
        left: 24px;
        top: 253px
    }
}

@media screen and (min-width: 1201px) {
    .banner-item-wrap[data-v-1f10d97c] {
        width:1440px;
        height: 490px
    }

    .banner-item-wrap .tags[data-v-1f10d97c] {
        left: 32px;
        top: 24px
    }

    .banner-item-wrap .tags .tags-item[data-v-1f10d97c] {
        margin-right: 12px
    }

    .banner-item-wrap .logo[data-v-1f10d97c] {
        left: 32px;
        top: 185px;
        width: 240px;
        height: 120px
    }

    .banner-item-wrap .title[data-v-1f10d97c] {
        left: 32px;
        top: 333px;
        font-size: 20px;
        line-height: 30px;
        width: 242px;
        height: 60px
    }

    .banner-item-wrap .btns[data-v-1f10d97c] {
        left: 32px;
        top: 417px
    }
}

[data-v-05ac6be3]:root {
    --app-back-wrap-visibility: visible;
    --app-back-wrap-mask-main-bg: rgba(29, 31, 36, 0.7);
    --app-back-wrap-color: #1d1f24
}

.index-banner-wrap[data-v-05ac6be3] {
    position: relative;
    border-radius: 12px;
    width: 1080px;
    height: 368px;
    overflow: hidden
}

.index-banner-wrap .banner-item[data-v-05ac6be3] {
    position: absolute;
    top: 0;
    left: 0
}

.index-banner-wrap .pagination[data-v-05ac6be3] {
    position: absolute;
    right: 24px;
    bottom: 24px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.index-banner-wrap .pagination .pagination-item[data-v-05ac6be3] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 14px;
    height: 16px;
    margin-right: 8px
}

.index-banner-wrap .pagination .pagination-item[data-v-05ac6be3]::before {
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    background: rgba(255,255,255,0.5);
    border-radius: 50%
}

.index-banner-wrap .pagination .pagination-item[data-v-05ac6be3]:last-child {
    margin-right: 0
}

.index-banner-wrap .pagination .pagination-item.active[data-v-05ac6be3] {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAxCAMAAAB0zqAPAAABPlBMVEUAAAANje8WqvMMjPEQl+8SnPMLifEKhfAZvPMQf+8JhPALivEMjvEewPcTpPMgw/cIgu8gw/YbtPUQmPIOkvEKhfEPk/MarfULifAOkPEWp/QMjfELiPAbtPUkzPcdvvQUofMZrfYOlPELhO8as/UlzvYgvvQasPMVovIOjfEOj/APlPEWo/Qlz/gJg/Ahx/YRm/IPkfIcufYXqvQjyvcTnPIZsPQZrfIkz/cgwfUasfMUo/MJg/EgxPcgxfUPk/EXqfMRmvIQl/IToPMVpPMPlfINj/ESnPISnvMWp/QZr/QMi/EdufUZsPQas/UVovIQmPINkvENjfEbtfUYrPQLifEhxvYKh/Afv/YevfUgwvYMjvEJhPAdu/Uiyvcct/UUovIctvUYrfQUovMRm/IKhfAgw/YOkvIkzfcNkPK29TmOAAAAP3RSTlMAIP4/EP7fYBAQv5+PPz8g79/f339/TyDv396/r5+Pj49fX1BP7+/v7+/v7t/e3r+/v76+n5+Pj39/f39vX0/ZX7+4AAACMUlEQVRIx8WVaV/aQBCHi8FIK1ABtVbrUe19n96akABLDApEAcV4cYnf/ws4O9kVY0iyvnJfP79/npnZzD579Hkujr6x4xFRdsLuymOC7JTdbdTkaTFdyprWuJDIC2Atq1AV0ZZsyD0tVJXMskAwsteKVsmEao81TBMc8pqWJf8jIdXNoAPkZklRX3oV3LaaRR3ylexoUW9/exvERmfM0xuFseWcMfsuAB5HB/DtEL1cNlR13l9EMi2aC2yx3c4Z6khrb9WXnrMKgFY6pOjktvb2037a0w6bJehrUPbgMO2j/Rl884zNqeoRZS9K8y+HsZN0bhpjDYe9KpVOFofQ0S9VdCD6JaCcPTs5Tu144ThzQHaEOQDbbKZ2PW1TFF4bZ6+Q7dXr/x6K/Mb+IntXW8lhz88X3LTEci/LbodeD9j+dxcb4T3DuaEDzT3G3H7f3TXsGcH+Ht3zbVL2/bqLfU19Rwk4DGbBaqsvxFzosoK5rDZX7s+Ei4TYah58O1gbzo37phKe9tL7gLltmtviDh82Yt6tVrhGX3QYsIseEhoGd5LPeMD+SQz9iYAFX+Zg4CzSSHpjZYv78nv2cTPms034fsDcHMx4jZHeI+PeobkE2b9J3994pQYszqKjg8NsMmj5AUt9cRaftqIBaKThsBrt75I/iQ1j+xd8f+HnA2Jxr1M2kwxdv3bDhFzl62Q0dK3/6KJDHMjwWBvYOUnoGYI3S5ZE382JKdEneWUbyKc7t70+1t0JhE4KAAAAAElFTkSuQmCC);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain
}

.index-banner-wrap .pagination .pagination-item.active[data-v-05ac6be3]::before {
    display: none
}

@media screen and (max-width: 1280px) {
    .index-banner-wrap[data-v-05ac6be3] {
        width:928px;
        height: 317px
    }

    .index-banner-wrap .pagination[data-v-05ac6be3] {
        bottom: 20px
    }
}

@media screen and (min-width: 1281px) and (max-width: 1440px) {
    .index-banner-wrap[data-v-05ac6be3] {
        width:928px;
        height: 317px
    }

    .index-banner-wrap .pagination[data-v-05ac6be3] {
        bottom: 20px
    }
}

@media screen and (min-width: 1201px) {
    .index-banner-wrap[data-v-05ac6be3] {
        width:1440px;
        height: 491px
    }

    .index-banner-wrap .pagination[data-v-05ac6be3] {
        right: 32px;
        bottom: 24px
    }
}

[data-v-6dd9e952]:root {
    --app-back-wrap-visibility: visible;
    --app-back-wrap-mask-main-bg: rgba(29, 31, 36, 0.7);
    --app-back-wrap-color: #1d1f24
}

.t-fixed-tool[data-v-6dd9e952] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: fixed;
    width: 44px;
    padding: 16px 8px;
    right: 0;
    bottom: 60px;
    border-radius: 60px;
    border: 1px solid rgba(255,255,255,0.1);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(.07%, rgba(255,255,255,0.03)), color-stop(98.68%, rgba(255,255,255,0))),rgba(41,43,59,0.5);
    background: linear-gradient(180deg, rgba(255,255,255,0.03) .07%, rgba(255,255,255,0) 98.68%),rgba(41,43,59,0.5);
    -webkit-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    z-index: 20
}

.t-fixed-tool .t-fixed-tool-box .t-fixed-tool-item .icon[data-v-6dd9e952] {
    width: 28px;
    height: 28px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    position: relative
}

.t-fixed-tool .t-fixed-tool-box .t-fixed-tool-item .icon:hover .t-fixed-tool-pop[data-v-6dd9e952] {
    display: block
}

.t-fixed-tool .t-fixed-tool-box .t-fixed-tool-item .icon .t-fixed-tool-pop[data-v-6dd9e952] {
    display: none;
    padding-right: 32px;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translate(-100%, -50%);
    transform: translate(-100%, -50%);
    pointer-events: none
}

.t-fixed-tool .t-fixed-tool-box .t-fixed-tool-item .icon .t-fixed-tool-pop .content[data-v-6dd9e952] {
    border-radius: 8px;
    width: 148px;
    height: 40px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    font-size: 14px;
    background-color: #292b3b;
    -webkit-box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    position: relative
}

.t-fixed-tool .t-fixed-tool-box .t-fixed-tool-item .icon .t-fixed-tool-pop .content.qrcode-box[data-v-6dd9e952] {
    padding: 8px;
    height: auto
}

.t-fixed-tool .t-fixed-tool-box .t-fixed-tool-item .icon .t-fixed-tool-pop .content .qrcode[data-v-6dd9e952] {
    padding: 4px;
    background: #fff;
    width: 100% !important;
    height: auto !important
}

.t-fixed-tool .t-fixed-tool-box .t-fixed-tool-item .icon .t-fixed-tool-pop .content .desc[data-v-6dd9e952] {
    margin-top: 8px
}

.t-fixed-tool .t-fixed-tool-box .t-fixed-tool-item .icon .t-fixed-tool-pop .content[data-v-6dd9e952]::before {
    content: "";
    width: 0;
    height: 0;
    border: 12px solid transparent;
    border-left: 12px solid #292b3b;
    position: absolute;
    bottom: 50%;
    right: -24px;
    -webkit-transform: translate(0, 50%);
    transform: translate(0, 50%)
}

.t-fixed-tool .t-fixed-tool-box .t-fixed-tool-item[data-v-6dd9e952]::after {
    display: block;
    width: 100%;
    height: 1px;
    content: "";
    margin: 12px 0;
    background: rgba(255,255,255,0.05)
}

.t-fixed-tool .t-fixed-tool-box .t-fixed-tool-item[data-v-6dd9e952]:last-child::after {
    display: none
}

.icon.icon-phone[data-v-6dd9e952] {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAMAAACfWMssAAAAM1BMVEUAAAD///////////////////////////////////////////////////////////////+3leKCAAAAEXRSTlMAfyAwEEAId2dcGD8ob0c4SIifDdAAAACxSURBVEjH7dbLCsMgEIVhnXiPubz/07Zpw+CiRx03oeC/HT4kZHPU07m8gMjVmPUad2IYdLWAHrW60Qqgb0H/+0m6bpFA8bomDEmBMl8b0Bz23WH42gmNvz8rCeGp73YhtKPQbV8XTT+8M5/AFUJuwgknnHDCP4XOcCKYvOa2JIBBF0UB3EoYBPAo4SqAiixHqgvmgd+R6gMJQ9eeZMMjcHR2KtheYX6tbmRaQJnZU70AgukHglG+uZ4AAAAASUVORK5CYII=)
}

.icon.icon-phone[data-v-6dd9e952]:hover {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAMAAACfWMssAAAAPFBMVEUAAAA5rv88q/86q/86rf85sf87rf87rP9Ar/87rP9An/87rP87rP86rf86rf85rv86rf88q/81qv87rP9w1KPMAAAAE3RSTlMAP0Bffx/vzxCPEL9PMN9vr4AwOPxotgAAALhJREFUSMft1ssOgyAQheFBB0QEL+X937VVm4mLHnHcmCb828mXcNkMPZ2PLajxZ2xxGddj2OXTugDckgsxgK4EXfjpmnU2G9CwTl8YGgJFmRagnfjTZGV6EVr3vVZSwl5+Twn5LvTj7gargHt2i0gHpQorrLDCCv8UeiupYHJZGpMCdvnQoIDjEXYKOB0hKyAZlgxdgvHGd6TtJRrQjKEvr2TgNFyCfHftJFifcY4D4YJpQVHYU70BSS01EOjzKj0AAAAASUVORK5CYII=)
}

.icon.icon-collect[data-v-6dd9e952] {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAMAAACfWMssAAAAM1BMVEUAAAD///////////////////////////////////////////////////////////////+3leKCAAAAEXRSTlMAfyBvMBB3UBgIPzhfZ0dYKPk+BYMAAAEESURBVEjH7dTbbsMgDIDh2I4xpxze/2lHJ1ZPGw0YqRet+t8kkvVdGCGWT08trP3OFiQYaPvvEIbysxDbkC67gMtl7wgZJ6HkOcgAPAUFQGYgQ4knoEBJrJDPBN8l5GEYD3Lwu+2IQ9BXpjk/BFWqG4Iq1fVhlaSOvOVUvcLiDBAVogkmhckEd4VighkAXIxUPpsJusLCsnAs3gK5sPonwBbIOmB+gVduFoa0zsAQHQAJGyEK1IQNEDOAls8xGNIGf6K1D2+r1TLicac7X0KUH+Z2X2+cLvsQaverWmgiqHVhTjemrTQEs850mHvQ7Q2my7ahrtamOzVhoC09Yrqs4+VTvy9tswivJC7ufQAAAABJRU5ErkJggg==)
}

.icon.icon-collect[data-v-6dd9e952]:hover {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAMAAACfWMssAAAAPFBMVEUAAAA8q/85rv87rP86qv88rP87rf86rf85rP86rf87rP85r/9Ar/9An/87q/87rP86rf85rP89qf87rP98ydZgAAAAE3RSTlMAQD/fYCDvnzB/v28QEM+Pr29Qc9lCngAAAQlJREFUSMft1MtugzAQhWGbYTy+UG7z/u9ap3IzVQPYYymLRPk3IKFvcZBl8+mpTWO9/QgCNzQ/OstN+V44HEO47AKay94Rou2EFPsgMmMXJGbqgcg57IDEOdJC3BP/lCw2w7CC47/Na2iCvjDJ+SYoUlwTFCmuDosEceA1f9UL9EYDrUCrgkngpoKLQFLByMwuBMiPWQVdZl/GYMheAzGz8kaMGojyAfEFbrleOKWxB07BMQOhElriEqEC2sgsxb0NTmnmf8FYh7dppTgM650ueAkt/TK3+HLiZOwplO5HNdMEXKrCuN2YNEITjIN5aIg16JYDJmMPoUw7oQscwgnm7YzJWIfmU71v0mY38rLMMIAAAAAASUVORK5CYII=)
}

.icon.icon-desktop[data-v-6dd9e952] {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAMAAACfWMssAAAAM1BMVEUAAAD///////////////////////////////////////////////////////////////+3leKCAAAAEXRSTlMAf1BfMG9AdxgQIAhHZyhXOB08XskAAADeSURBVEjH7dHbbsMgEEXRM1wGxthO/v9rq7EjU5O0QNUoicR+8m0BBoxeWGIbKNirdLproFvc5ZhyptPlZpybzKP0jZAWZseetOnkHD3K6iuzzZOOue0JmtLkZenGeOxZfZrq0AGI+8XepDexhMGWTeW3so1SQou7CrhPv7bB9P3cXR6lCrHoXwg08dtG1WE+f+901eqIW2HypIUlkOalFSKqOIqowiz9wcKKDggxN2cEPVDpymZ2CeiCuY+B4vgvkPX0BxxwwDeH3v3a5QdY738ht8HlDqZLk4sYPbEvi+8HVE+5vSQAAAAASUVORK5CYII=)
}

.icon.icon-desktop[data-v-6dd9e952]:hover {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALaSURBVHgB7ZnRjtJAFIb/KaAX3vAG9g3EO7NrsuwTaKOr8Up4A3wC4AlcnwC8MtGsC0+wTXTJJt7UJ7C+AYl6Q6HHM2XXtEMpUEGmZr5k02V6Oszfc+acmQEwGAwGQ34ENKZ+TtXpFC0SOOKR1kCo8nXMVy8sYUDA8MoRflYf2go8PKMWX9qRqAwEofv5RHSW3oeGPPxAHfZae4NH+pdPRTPthgXNyCFO0mCPv067sZYH+UvroYWX2DKjJ8m3znPODmb4lmIq512fR+uxeJvDssFttmrE7cccrm68rYwVHJxRgwg9fnjbuGpDEKZ4jnBa+Ymu2xTjWGuXx9XmMXUSpnPPu/G2lSHKLj7CLuBMmNL6OGkC//JEvFLERbD3u1h8SfV6jxJJaX9zUCQFHpxTTc2Y/HI7mV1wBlXbft1Jhu7KEE1Bvk0PfwkP7nv8szVFlZSMMAnxNauPaRl+aZZsu2XhXnx8eQR6nJKPoQEcfgs1kvPFWLHRg3J5MSoqJTzKfCjk1Y1CoEYGNMF1xELocxi3HnDpSLOXJUUgmXVlUvryTCT60KrQ8xwcKE1VK8TF4UdK1GBZl7mkXLAiO2EtuFYq5JmDO4MTxBsu9A3EiriQIrjI80rllEPSZ5fYJLOtUpel98IJ3qp9auVBGaZUghPtGFTmO4na0sV3COfqxeLOQru16MgRHlmQWdpf85GxNYMzUubeDdoJlEiRlSAS2c+y47DszwLc//RcDJbZaDUH47jzcGvW31F3cpuLN0UlwRYhhy+vgio/MExbwqloK/CGa6Hyb4gcaBmi2+S/F6h9iKYhVzdWgDpKuHu9bVpKoQT+2eTKHYQVLax9/i9ToJmDRccILDpGYNExAouOEVh0jMCiYwQWHSOw6Gy84eWjOvvgPTWwH2ob2m8uUMhjdQs97IMcP6ObOUjrH6H/cwRh5cHvSoHyFx8WOYBuEDw+dGrCYDAYDDvkNyJV6bKn4HfEAAAAAElFTkSuQmCC)
}

.icon.icon-arrow-top[data-v-6dd9e952] {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAJPSURBVHgB7Zi7TyJRFMYPj8CS8JACYrdSbUu5nXS7nduxHftvbWlJSbfbYaedpR2WJpAA4TW8/Y5RgxPnzpmZO8TE82tEuHNnfvdxvgtEiqIoiqIoiqIoH55er/dlOp3+mUwmTX5NRyBBR2I4HJ5kMpkmXp7y/7vd7mGz2bTL5fKIYuQogiyXzWZb+/3+5M3NE4nRcrm8jFMydkEsydNkMtl0y70+QMySsQouFosziLGccb/hc2c+n19Wq9UHskxsgpi5OmbnIsg1q9Wqg5m8JYvEIogq2cCyPKcQ4LpuLpe7IktYF4wi94JNySRZZDabXfjJbbfb21QqdW1qgwhpjMfjn2QBKzPIoV2pVH5jz301tcODdwuFwtPMIDoayMVzn/Z3g8GgU6vVHApJZEF3gHtxKHdwrUQy0oEgkqBXgLsxVUf0UYeksdpGycrQgn4BznC+rddrHv17QV8tU16GlQwlKAlwLK0RHqqdz+dF4c2rIZ1OtyBqHLCgB4LAgpIAZznsm8CjLZFkghwIAglKMi5qUZAWLWlWigUlclhC9/1+vx2lrD/3w98bf+F+30ztJJIiQQ5w/Kmb2nCAF4vFDlnEcZwf6Pe7qQ1Wy02pVPrn9blRMEyA2ybqgcBTkJcJKlaLQgS4baQHAjzHX/f7nmdRzJqDanVDBriaxS3HoGB1+V6mNhB8t6r67sH3Rk8a4LbxOhCYVpGoyBxKBg1w27iz0m+LiGOCKyk6OwsT4LZ5kcRA32Gg/5MtjvVbpgSWJEVRFEVRFEVRFEX5rDwCZfWWVup/sHAAAAAASUVORK5CYII=)
}

.icon.icon-arrow-top[data-v-6dd9e952]:hover {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAJpSURBVHgB7ZhBbtNQEIb/cQkrFjlCjhB2KEEiuUHTUqSuaG4AJ2h6AuAELSskqpLcIEEiobvmCDmCJVgRxY8Zq4GIxM/Pfs9h0flWljN58eeZ92ZaQFEURVEURVEUpQyEPdIZmvpyhaEB4sc/0J/0KUbF7E2Q5Roix5fN9IbBfPUIvdseLVAhexFM5RKMWaqxed8QFkmEbpWSESqmNTTNXXIC8b2IP3vGLwAVUWkGn1+bjom4LA3qOaGxSdCdvaI5AlNZBls35oxLcOwgJ9Qpwl37i3mNwFQiyJkbcPldoigJruS7CEjwEpUH5MydwwN+ORffTmiAAAQVbF+bK14xr8wkJubSfWONIryfHtNbeBJEcN3A5dIWx5kdzI7pQq55j55zpgbWeGDkOxB4C2418Aw25da4SPoOBF6CWQ18iwhn0yP6uOsjOW3zDiSfgaC0oDRwStIe17CExfxgh9+P6KvDWtaWUlayVJuQBk45meP9s5DmnScnzHo0r/3CU75cZMXI1HOwwl3rs2miAIUFXRq4yCXLYpPJ5JQWNf4OLJIoMRAUEnRq4HwoiNztafH9siFpfzEFBgJnQccGPqn9LCf3ZwGRPECXf2tki5NncZF0OmRcG/j0JfURkPaNeec7EFgFyzTw0PgOBJklei83xn+UE2Rt+Q1bDGfpcPkkfdYtMgUnPYp54Q+wwQ28Srk195LW8k+IZ9wd5O7BjBJxauChyRoIbFWUe4r+WyJFGnhodg0EeVvEeVSTk5QXe1G2x4Wk84ln4FqaydH0xP9Pqr8LXxqXfz/sBZGEoiiKoiiKoiiKojxUfgPyVkf+seQSWQAAAABJRU5ErkJggg==)
}

[data-v-4a5d6510]:root {
    --app-back-wrap-visibility: visible;
    --app-back-wrap-mask-main-bg: rgba(29, 31, 36, 0.7);
    --app-back-wrap-color: #1d1f24
}

.t-fixed-resource[data-v-4a5d6510] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: fixed;
    width: 120px;
    height: 140px;
    right: 40px;
    top: calc(50% - 70px);
    z-index: 20;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    transition: -webkit-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out
}

.t-fixed-resource .close[data-v-4a5d6510] {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 16px;
    height: 16px;
    background: rgba(27,28,31,0.9);
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
    line-height: 13px;
    z-index: 22
}

.t-fixed-resource .close img[data-v-4a5d6510] {
    width: 16px;
    height: 16px
}

.t-fixed-resource .close[data-v-4a5d6510]:hover {
    background: rgba(165,166,168,0.4)
}

.t-fixed-resource .t-fixed-resource-box .floating-img[data-v-4a5d6510] {
    width: 120px;
    height: 140px;
    cursor: pointer
}

[data-v-16e43d0b]:root {
    --app-back-wrap-visibility: visible;
    --app-back-wrap-mask-main-bg: rgba(29, 31, 36, 0.7);
    --app-back-wrap-color: #1d1f24
}

.t-subscribe[data-v-16e43d0b] {
    width: 100%;
    margin-bottom: 25px
}

.t-subscribe .t-subscribe-box[data-v-16e43d0b] {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.t-subscribe .t-subscribe-box .item[data-v-16e43d0b] {
    margin-left: 27px
}

.t-subscribe .t-subscribe-box .name[data-v-16e43d0b] {
    color: #818181;
    font-size: 20px;
    font-weight: 400
}

.t-subscribe .t-subscribe-box .icon[data-v-16e43d0b] {
    width: 35px;
    height: 35px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    cursor: pointer
}

.t-subscribe .t-subscribe-box .icon:hover .qrcode-box[data-v-16e43d0b] {
    display: block
}

.t-subscribe .t-subscribe-box .icon .qrcode-box[data-v-16e43d0b] {
    display: none;
    position: absolute;
    top: 0;
    left: 50%;
    width: 108px;
    height: 130px;
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
    cursor: default
}

.t-subscribe .t-subscribe-box .icon .qrcode-box .qrcode[data-v-16e43d0b] {
    position: relative;
    background: #ffffff;
    border-radius: 10px;
    width: 108px;
    height: 108px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.t-subscribe .t-subscribe-box .icon .qrcode-box .qrcode[data-v-16e43d0b]::before {
    content: "";
    width: 0;
    height: 0;
    border: 12px solid transparent;
    border-top: 12px solid #ffffff;
    position: absolute;
    bottom: -22px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0)
}

.t-subscribe .t-subscribe-box .icon .qrcode-box .qrcode .qrcode-img[data-v-16e43d0b] {
    width: 97px;
    height: 97px
}

.icon.icon-wx[data-v-16e43d0b] {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAMAAABG8BK2AAAANlBMVEX///8AAAD///////////////////////////////////////////////////////////////9TvwflAAAAEnRSTlN/AG8QMF93CEc4IGc/GE8oWFe/gBwOAAACd0lEQVRYw7WYWZLrIAxFBYh5cu9/s88Vm6QZBLZf5+YvSZ0SkrgIgNGKaDbOYRf30tjIaFEYbaWCRmpDcQvjJBDa8mUMcpiI4yWMK5A1iMYICReUxBxjFVySwglGG7gsQ2KEhxvyYowRHG6JixZTKI85MKOsOR3GwwN53WAMPJKpMQgPZX9jhHqKUeIXJnW/SpuFZjpms0ia/GCwhQTNPhJpGqt7Y5paH5AKNKt6wWD99cgscRIQnhhOtTi7tFP4gckryqqY7oXZ6ggp5VmxgInK1k4jTfbtQSGdaNoXNYM6wUd6IwCEE5NKTVmctDJUa/LspVDa6sy/XYQjd8w7dZ8Q3Lm8gnSnUVMYxSDWOT+EMuh3bjZkGs0mU5LUxojQpaaXDkpmXZLPoRdCZTTDpkFVH0u2BxmQK0xQZan0CfID1Vd5QOn7ujcWvn+qSrVyqqf0tedtA7TiOM763C5dN6OwsXBuiUQwG9jTL4odqaXTfxRBH2so+yS/82em2VGxapESneH54Hl5pjz3lSJ9y/wwQrW/eNgAgPRimUhMrFIKBjqJD4aOxtWbAUcWXZQ4ibFVYSAOj3cMTr/+KyiMr42ibwB3TteKcwXhypoUg84aeTWiKz3G8GqD7xgLU42THJpzE5iGucKSAmLHMHmbE7qAd4y7O9q3rZbLKLAQN7UZD0aBi4OftC4Kka30sc0mEmPSco1+OCYxB/ekuhkEikM/Vfr7gZbZpxj8xrDP9LOrx5cuQs+vZf9/SfzWlfV+vYyeXOfx6nXeLh4X0hWKFMunDlzbj/vmw0uvvJHLcbcepQRuanAB1eSjFK1ojfTHExnfDEZG6x/7wBNMuePo+wAAAABJRU5ErkJggg==)
}

.icon.icon-wx[data-v-16e43d0b]:hover {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAMAAABG8BK2AAAAPFBMVEUAAAD////////////////////////////////////////////////////////////////////////////YSWgTAAAAE3RSTlMA3yBfv+8QP8+PMJ+vb09/gHCQ/4Z3AAAAAlhJREFUWMOtmFkS4yAMRBEIzG5nuP9dZyaJTViEbcrvM0l1tRaECBtghfEA6R+g0QTL7qMCylQhveC3RBZMBD5eFhGQBoC45iSLzAtxTBdwJzl6yXQJOTKk/qTLGDognW6gOaEC6RbAaZV5nazygI5OE2hVqRQ1mq6XSJO8isTIWRn5mx7XfIshcsWUjeYkaUiHJFf1a9UNvS5sp6r1IZKFRlXvmwHLWsTAkOiZAU6elLGdSKu0xaSz40uHFHFcLF6Mte8gdUdbqc19pZHUUXWCP+m1/8v101LL91OKUMWk2Zv17TTnP2Q7ZFRH6rKFJYfH1txhgTwR2WrRkQKPFlSrF0wJ49E5pA6GbVPTojaJUe3Jh24HmvQDZ90OLq+lF3TGDp7JbHI5vUF8OTxjR6XX1645D4XDtb3RZTdQrGWqBqghrn1VnTBWn7ISAdTyMpRBwoz/zm4O+ziStQw96ZlN6hPDfk7ikT9TykDV10UHht2dgfjR08h7U4rB6EI1nlHw4vbMB7w3i9GRMrZMqUkNPMvQbpbyMIjOiD5wQMqEcm7Z7vUu1kW9f8spGV1NBtkM+u92LQFkWq/EJDujEYoVXaquSllgn4Ok6Cd5a+5NlcZshEpdWryts/UML+er/XjBizldQ8BkoTabcGPxw7BYzmNAbetsCmJNOo1Rt2bo7NBIYgfBNI17fqFlr1mZ6uIwjyz7TM09PR56CD3/LJt/JD7+ZJ2ul1GMRlx9zgc2hLsrKsin/y/JwPL0Hy9joifDWdgduPCy8wBV7D42GNTwDgS8EZbR/AVsYtGM2zSZCwAAAABJRU5ErkJggg==)
}

.icon.icon-wb[data-v-16e43d0b] {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAMAAABG8BK2AAAANlBMVEX///8AAAD///////////////////////////////////////////////////////////////9TvwflAAAAEnRSTlN/AG8QdyAwR084GAhYYF9AZyht0HCSAAAC80lEQVRYw72Y27qjIAyFY8IZRH3/lx2LlgAVS51vZl3sfdH2J1mREISpL6d0QIRduEZt3dRXD+PtLKCRCIp+wsgZOgrbMEYh3AjVEEYyZBzUYmiGARm6x1gBQxLqBuM1DEt3MbTCD1rpGkMIPwmpxjDlMQceUZjTYlZ4oNU3GA2PpGuMgoeyJYYEDEisIcxN8oIKjBmhBH8sWe/cyJixlNx1C5AZM1ZrWTypAbIwYcb9FctijFbU2qASpgpmvEvMHM6B2brL643c9rkIurq4MmHCNSQmL6p1tXPSvKu88DdfGLqEIBsq69oSHnl4DsdPcG2w9pnC64izuSGArVy2OyZ8a5HEIRqjjvBiVeC4Y8S1hVOTFM5zMskcpd2jdcBhgut0EdYCQsuUJL1spZSOK6PcIapDYW3Z7QSQ778eshToW0ormdIJbTQa5o+NfycCkOnJS8isAE3/2HoAtjuKo1K2SAGwoizFL2xA8YovGkXszSHhq62IjTH5/FwElAqyafy4zNCV7B/Chrj1fZE50xHv0BE/S6jEWH9bTsZCiWmYc3MwYuuMbTYnVyQ2W75TKc1nDZes5BDXq9YKocnJZJdYc322ffbLeG4GXkyU61KwHA6HSC1Gl1szjdTZBamNc2DL1ZeeORZcHY086OdPXZ2EnDonvivblszx6tMPxeNG+YxnP7ltFY1/yXbG9D9bhJCketaEHWMZ6nMCNDkEsU3l86i5cI3UjvHN/jZvj6l2wnBTbUUTVHCXnQjUzMqWH8bPnF4Y2W4/i+kwkTtDng0jun4ssLWjwGkHaazPcnk3x+PVYKKPbOQSVgGAGKz097cbxWNSe80Zv6zxmNQ+3Gjc5a0RLqUyhovFJFWgaNPdzmu+DrQYozEmYvNhf6CdLDyU+hfD/uSfXT3+0UXo+bXs7y+J/+rK+nu9tL+5zqvR67z98nLBjFAifX3V8X30QPk/XrywttBNR/70UopUEB++RuuHX0qxnNXziikRDFq5qa8/b1kWBwUOFZoAAAAASUVORK5CYII=)
}

.icon.icon-wb[data-v-16e43d0b]:hover {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAMAAABG8BK2AAAAOVBMVEUAAAD///////////////////////////////////////////////////////////////////////8KOjVvAAAAEnRSTlMA3yDvvz9fn48wEK9/b89QcJA+j7ZOAAAC0ElEQVRYw71Y69ajIAwkIdxEtMv7P+xuqRrIJ9bLd3Z+tKf1dEgmZAJVBwjWR4D8DzCRT0Fdx5BIZwEdLV4iMZQ7iPNpEgv5AGDPRVJIHhIh5RNwXzR66XwK+iig4U8+Dd9PaMoXMGGHBfIlAD5kkTyS5TnPlG9gGgSLqNHNetl8E69GGH1qz00x0iS+q+VxZ1jiRwhsO5euphT2LcBsX5+rtalEiFXVL+qrx9E5b1HKYI+DOXYJkuHM3eX9jGH+uQgELi5nG/dJqDxt1vUhGLdWeWyLhfvtwoKatrYInzwGDmfoCey5WXgdvZgb5JwalRPn1LdI5BCds5/waFmfw9T7EiqRFBBRqdO7tCWPwMvyh76LjFl7U5LEt6xY0gmNqEHZr140m6b5zPo61DvQH7JImJJOlNF4RZ3GZwi5Tdl5hXJDlObZnfQsN+lPbVKVgmiosfpFiqDf8ZGzKI1JD6VeTNMKs83PUbeWZYTxw9io0dKY/hB2KK2vS+OWdPQaOsDPElp9RMPBjKtLYeF0kgdhhwakMi/ZnK+2w7nSnUp5njVcspoHe4NkUlHk5GqVhHEl1fFLWpqBF9P1uhjLVExiV6Gk8XVrliP1poLxLoSc6tXHnjhJhTYas6o0VxNuFpPK7kzC1uFxpaFqBHmxx6N0y8b4x01OWt6xGWS2J01sGlUPWwKoAmQ9q3o/elG4dm4Oor/dqjG2Sjg2VQkU5GFTIqI4KyfejBKRy1e3zQvKMHnbrVkMg0I/ljzLo8AiB3poZ7k5OsfD3jbw+AlxjJPOGSAmMxzfbuzuMQnstcsa8HPxwIXdW2PehW1aWDLZigpnT7kD9/VAC0TOOQLx8GCuvfJNCCH9k8M+Y7h39fjli9Dza9nzS+KvX1lv18sPqg979jqf1CHQnWEhvP1/CQPM//jjhTHHbjpGXQHaqH/oSmlQ1xGSpwlKIhC9DaqPv8fHzj2XX7gIAAAAAElFTkSuQmCC)
}

[data-v-9f363ba6]:root {
    --app-back-wrap-visibility: visible;
    --app-back-wrap-mask-main-bg: rgba(29, 31, 36, 0.7);
    --app-back-wrap-color: #1d1f24
}

.page[data-v-9f363ba6] {
    position: relative;
    min-width: 1024px;
    padding-top: 115px
}

.page .index-banner[data-v-9f363ba6] {
    margin: 0 auto
}

.page .content[data-v-9f363ba6] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 54px;
    width: 100%;
    max-width: 1601px;
    min-width: 1024px;
    margin: 0 auto;
    position: relative
}

.page .content .content-item[data-v-9f363ba6] {
    margin-top: 48px
}

.page .content .more-game[data-v-9f363ba6] {
    display: inline-block;
    margin: 60px auto 0;
    padding: 12px 56px 12px 32px;
    font-size: 18px;
    line-height: 18px;
    color: #34ffff;
    border-radius: 64px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.1);
    cursor: pointer;
    background-position: right 32px center;
    background-size: 20px;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA9CAMAAADGfvrlAAAAP1BMVEUAAAA0//80//80//8z//80//8w//80//8z//80//81//80//81//80//80//8y//80//9A//80//8w//80//9MyqjPAAAAFHRSTlMAIN+f728Qv49/MIBgQM9vUBCvMB3BSYYAAACwSURBVEjH7ZZJDsMwDAMtJ16zt/r/W9tIPyCB5lDPfZDIFgmHweDPuFIS1JVZNaL2pF9ixuSX3kyYnNRImF3c7pCcoxJjdzUKNfaCXpexMWPPgq7ZzR4gVjUqZle3V8zeubGZXdmUiUhjbjsUJl/d/5v5coPcRQ1B3JM4bWE6gQlWJXowuVuZxUbcK7orRIedxHa0X/e2MAMXNd5EbzYih9MDLwOJHgfQPo4cBoNn+QAqDRGrc9m1agAAAABJRU5ErkJggg==)
}

.page .content .more-game[data-v-9f363ba6]:hover {
    border: 1px solid rgba(255,255,255,0.1);
    background-color: rgba(255,255,255,0.2)
}

.page .home-busi-config-container[data-v-9f363ba6] {
    position: fixed;
    bottom: 60px;
    right: 98px;
    z-index: 20;
    width: 361px;
    height: 133px;
    cursor: pointer
}

.page .home-busi-config-container .close-btn[data-v-9f363ba6] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    width: 23px;
    height: 23px;
    top: -11px;
    right: -10px;
    background-image: url(https://start.gtimg.com/web/www/webgame/assets/img/b6f22adc3bd74123f29f.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center
}

.page .home-busi-config-container .home-busi-config-image[data-v-9f363ba6] {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.rankings-container {
  display: flex;
  gap: 3rem;
  margin-bottom: 2rem;
  background-color: var(--bg-card);
  border-radius: 12px;
  padding: 1.5rem 3rem;
}

.ranking-card {
  flex: 1;
  min-height: 280px;
  position: relative;
}

/* 为第二个和第三个排行榜卡片添加左边框作为分割线 */
.ranking-card:not(:first-child) {
  padding-left: 3rem;
}

.ranking-card:not(:first-child)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background-color: rgba(228,228,228,0.1);
}

.ranking-card-title {
  margin-bottom: 1.5rem;
  color: rgba(255,255,255,0.85);
  font-size: 20px;
  font-weight: bold;
  line-height: 30px;
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.2s ease;
}

.ranking-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

.ranking-item:last-child {
  border-bottom: none;
}

.ranking-number {
  font-size: 1.5rem;
  font-weight: bold;
  margin-right: 24px;
  width: 24px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ranking-number.first {
  color: #e0b712;
  font-size: 2rem;
  font-style: italic;
}

.ranking-number.second {
  color: #42acfd;
  font-size: 2rem;
  font-style: italic;
}

.ranking-number.third {
  color: #fff;
  font-size: 2rem;
  font-style: italic;
}

.ranking-item img {
  width: 87px;
  height: 87px;
  object-fit: cover;
  border-radius: 12px;
  margin-right: 0.8rem;
}

.ranking-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: -webkit-fill-available;
}

.ranking-title {
  font-size: 1rem;
  margin-bottom: 0.25rem;
  font-weight: bold;
  color: var(--text-primary);
  color: rgba(255, 255, 255, 0.85);
}

.ranking-rate {
  color: var(--text-secondary);
  font-size: 0.8rem;
}

/* 响应式调整 - 排行榜 */
@media (max-width: 768px) {
  .rankings-container {
    flex-direction: column;
  }
  
  .ranking-card {
    margin-bottom: 1rem;
  }
  
  /* 在小屏幕下移除分割线 */
  .ranking-card:not(:first-child) {
    padding-left: 0;
  }
  
  .ranking-card:not(:first-child)::before {
    display: none;
  }
}

/* 响应式调整 - index页面特有 */
@media (max-width: 768px) {
  .carousel-caption {
    left: 5%;
    right: 5%;
    bottom: 10%;
  }
  
  .carousel-caption h5 {
    font-size: 1.5rem;
  }
  
  .footer-links {
    flex-direction: column;
  }
  
  .footer-column {
    margin-bottom: 1.5rem;
  }
}

.index-rank-wrap {
    padding-top: 40px
}

.index-rank-wrap .index-container {
    border-radius: 12px;
    background: #282a2e;
    padding: 16px 0;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.index-rank-wrap .index-container .rank-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.index-rank-wrap .index-container .rank-list {
    width: 344px
}

.index-rank-wrap .index-container .rank-list .title {
    padding-left: 20px;
    padding-bottom: 20px;
    color: rgba(255,255,255,0.85);
    font-size: 20px;
    font-weight: bold;
    line-height: 30px
}

.index-rank-wrap .index-container .rank-list .rank-item {
    cursor: pointer;
    padding: 9px 16px 9px 54px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background-position: 16px center;
    background-repeat: no-repeat;
    position: relative
}

.index-rank-wrap .index-container .rank-list .rank-item:nth-child(2) {
    background-image: url(https://start.gtimg.com/web/www/webgame/assets/img/dfd398b246c9d25e5343.png);
    background-size: 26px
}

.index-rank-wrap .index-container .rank-list .rank-item:nth-child(3) {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABDCAMAAAD3VpZUAAAASFBMVEUAAABCrP9Bq/xCrf1CrP1Ar/9Asf9BrP5Crf5BrP1BrP1Arf1Ap/pBrP1AqvpBq/1BrP1An/9Crf1Crf5Aq/9Ar/pDrP5CrP1X6lxbAAAAF3RSTlMAX0DvjxAfz9+fv38g3zCAcBBvr08wv67UrM4AAAEESURBVEjH7dXBjsIgEIBhYIZCC61tdXfe/013NwZYjQRmTPRg/xuHL4CDqo6OPjRrZcygA/oNJjQ8OiDQv/zC2BXpvlOvXYFIqO2ZHrb23NbT42BrY0O1dtUOKTVhwInKUnX0fT1luB5TQ9Y9OMLfNjEtQ8ZD16iIQllZHla379EXzC9fWmCHZJ0A64RHvi1XNny7JjsLbgwJa7718o2to1Rk42J39r5jtig4s3jEwzPWy+2Xl9/XQLZB/GUg0Fx7ynZeuBazdVH+NMZN/jSCfLyg5eOdF/l4XZSPdzZ3be3x1lvYf64lUI12qje18JnqYfsHq96lYS296/OKut5FHR29vh8KzDkbVLmS9QAAAABJRU5ErkJggg==);
    background-size: 26px
}

.index-rank-wrap .index-container .rank-list .rank-item:nth-child(4) {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABDCAMAAAD3VpZUAAAAP1BMVEUAAAD///////////////////////////////////////////////////////////////////////////////9Du/pqAAAAFXRSTlMA2cwbhza+UQ2jonlfbIhtQ7AOlUSHiNQQAAABI0lEQVRIx+2WS26EMAxAEztxvgSYzv3P2qIqdUEdyfami+HtWDwZf+LE3dy8KRlNWuyDwB/sHymrAq6Hx9Aq1nFMlSHUR2VAZHf/N5QldnlhL6KUX8i7k7B8JxnSM8ZObIuyfnwJdZsfnMUmGxBI/IEw5SQcklMBObKeMOWodzly1ruPmXN1elaul5o0XVKruXljuTANEE82s5VSCDwD3Ylp/kxFXWsZarp0f7sLKjenP1HQ0FtmVci9HuzA9jAs/vBjc6sMCUC2HmY+FsbCN4P8mHIwyDjlavtte+TBR1INijd+GHh1abog6Cm/IC43dZANRGl9izGmpYBnUCIL7matHJxeZtcuN/tTpkbhSDS6mKDanPhsdT/2PdEeenQ3N//HJ9BdCCBpZozcAAAAAElFTkSuQmCC);
    background-size: 26px
}

.index-rank-wrap .index-container .rank-list .rank-item .image {
    margin-right: 16px;
    border-radius: 10px;
    width: 64px;
    height: 64px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.index-rank-wrap .index-container .rank-list .rank-item .content .name {
    height: 48px;
    color: rgba(255,255,255,0.85);
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-decoration: none
}

.index-rank-wrap .index-container .rank-list .rank-item .content .name .name-txt {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.index-rank-wrap .index-container .rank-list .rank-item .content .recommend {
    margin-top: 8px;
    color: rgba(255,255,255,0.65);
    font-size: 12px;
    line-height: 18px
}

.index-rank-wrap .index-container .rank-list .rank-item:hover::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    background: #fff;
    opacity: 0.05;
    pointer-events: none
}

.index-rank-wrap .index-container .split {
    width: 1px;
    height: 304px;
    background: rgba(228,228,228,0.1);
    margin: 0 11px
}

@media screen and (max-width: 1280px) {
    .index-rank-wrap {
        padding-top:64px;
        width: 928px;
        margin: 0 auto
    }

    .index-rank-wrap .index-container {
        border-radius: 10px;
        padding: 16px 10px
    }

    .index-rank-wrap .index-container .rank-list {
        width: 286px
    }

    .index-rank-wrap .index-container .rank-list .title {
        padding-bottom: 12px
    }

    .index-rank-wrap .index-container .rank-list .rank-item {
        padding: 12px 10px 12px 60px;
        background-position: 20px center
    }

    .index-rank-wrap .index-container .rank-list .rank-item:nth-child(2) {
        background-size: 28px
    }

    .index-rank-wrap .index-container .rank-list .rank-item:nth-child(3) {
        background-size: 28px
    }

    .index-rank-wrap .index-container .rank-list .rank-item:nth-child(4) {
        background-size: 28px
    }

    .index-rank-wrap .index-container .rank-list .rank-item .image {
        border-radius: 12px;
        width: 67px;
        height: 67px
    }

    .index-rank-wrap .index-container .rank-list .rank-item .content .recommend {
        font-size: 14px;
        line-height: 21px
    }

    .index-rank-wrap .index-container .split {
        height: 315px;
        margin: 0 12px
    }
}

@media screen and (min-width: 1281px) and (max-width: 1440px) {
    .index-rank-wrap {
        padding-top:64px;
        width: 928px;
        margin: 0 auto
    }

    .index-rank-wrap .index-container {
        border-radius: 10px;
        padding: 16px 10px
    }

    .index-rank-wrap .index-container .rank-list {
        width: 286px
    }

    .index-rank-wrap .index-container .rank-list .title {
        padding-bottom: 12px
    }

    .index-rank-wrap .index-container .rank-list .rank-item {
        padding: 12px 10px 12px 60px;
        background-position: 20px center
    }

    .index-rank-wrap .index-container .rank-list .rank-item:nth-child(2) {
        background-size: 28px
    }

    .index-rank-wrap .index-container .rank-list .rank-item:nth-child(3) {
        background-size: 28px
    }

    .index-rank-wrap .index-container .rank-list .rank-item:nth-child(4) {
        background-size: 28px
    }

    .index-rank-wrap .index-container .rank-list .rank-item .image {
        border-radius: 12px;
        width: 67px;
        height: 67px
    }

    .index-rank-wrap .index-container .rank-list .rank-item .content .recommend {
        font-size: 14px;
        line-height: 21px
    }

    .index-rank-wrap .index-container .split {
        height: 315px;
        margin: 0 12px
    }
}

@media screen and (min-width: 1201px) {
    .index-rank-wrap {
        padding-top:64px;
        width: 1440px;
        margin: 0 auto
    }

    .index-rank-wrap .index-container {
        border-radius: 12px;
        padding: 24px 14px
    }

    .index-rank-wrap .index-container .rank-list {
        width: 450px
    }

    .index-rank-wrap .index-container .rank-list .title {
        padding-left: 28px;
        padding-bottom: 24px
    }

    .index-rank-wrap .index-container .rank-list .rank-item {
        padding: 20px 28px 20px 90px;
        background-position: 28px center
    }

    .index-rank-wrap .index-container .rank-list .rank-item:nth-child(2) {
        background-size: 42px
    }

    .index-rank-wrap .index-container .rank-list .rank-item:nth-child(3) {
        background-size: 42px
    }

    .index-rank-wrap .index-container .rank-list .rank-item:nth-child(4) {
        background-size: 42px
    }

    .index-rank-wrap .index-container .rank-list .rank-item .image {
        margin-right: 24px;
        border-radius: 12px;
        width: 100px;
        height: 100px
    }

    .index-rank-wrap .index-container .rank-list .rank-item .content .name {
        font-size: 20px;
        line-height: 30px
    }

    .index-rank-wrap .index-container .rank-list .rank-item .content .recommend {
        margin-top: 10px;
        font-size: 16px;
        line-height: 24px
    }

    .index-rank-wrap .index-container .split {
        height: 480px;
        margin: 0 14px
    }
}

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    margin: 0;
    gap: 24px;
}

/* 游戏卡片样式 */
.game-card {
  background-color: var(--bg-card);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 0;
  transition: transform 0.3s, box-shadow 0.3s;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.game-card img {
  width: 100%;
  height: 223px;
  object-fit: cover;
  transition: transform 0.3s;
}

.game-info {
  padding: 1rem;
  flex-grow: 0;
  display: flex;
  flex-direction: column;
}

.game-title {
  font-size: 20px;
  margin-bottom: 1rem;
  font-weight: bold;
}

.game-meta {
  color: var(--text-secondary);
  font-size: 16px;
  margin-bottom: 1rem;
}

.game-btn {
    font-size: 14px;
}


/* 游戏卡片父容器样式 */
.col-md-3.col-sm-6 {
  position: relative;
  margin-bottom: 1.5rem;
  z-index: 1;
  max-width: 342px;
  padding: 0;
}
.col-md-3.col-sm-6:hover {
    z-index: 100;
}

/* 优化平台图标样式 */
.platform-icon {
  color: var(--text-secondary);
  font-size: 12px;
}

/* pop元素样式 - 确保宽度与game-card一致，已调整为上下居中显示 */
.pop {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  background-color: rgb(40 42 46);
  border-radius: 12px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(0.8);
  transition: all 0.3s ease;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
}

.pop img {
  width: 100%;
  height: 223px;
  object-fit: cover;
}

.pop .content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  box-sizing: border-box;
}

.pop .game-title {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pop .game-score {
  color: #e0b712;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 14px;
}

.pop .like-button {
  color: #e0b712;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s;
}

.pop .like-button:hover {
  transform: scale(1.2);
  color: #ffd700;
}

.pop .game-label {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.pop .filter-label {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  padding: 0.25rem 0.75rem;
  border-radius: 2px;
  font-size: 12px;
  box-sizing: border-box;
}

.pop .release-date {
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  margin-bottom: 1rem;
}

.pop .platfrom {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.pop .platfrom .name {
  color: rgba(255, 255, 255, 0.85);
  margin-right: 0.5rem;
  font-size: 12px;
}

.pop .platfrom i {
  margin-right: 0.5rem;
  color: rgba(255, 255, 255, 0.85);
}

.pop .action-buttons {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  box-sizing: border-box;
}

.pop .play-button {
  flex: 1;
  background: linear-gradient(84deg, #1954ab 2.05%, #0286ff 29.31%, #31ebf6 75.49%, #ccfbff 100%);
  color: white;
  text-align: center;
  padding: 0.75rem;
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-sizing: border-box;
}

.pop .favorite-button {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  padding: 0.75rem;
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  min-width: 60px;
}

.pop .play-button:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(31, 115, 255, 0.4);
}

.pop .favorite-button:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* 调整pop元素的启动游戏按钮样式 */
.pop a {
  background: linear-gradient(90deg, #0070f3, #3291ff);
  color: white;
  text-align: center;
  padding: 0.75rem;
  border-radius: 25px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-sizing: border-box;
}

/* 游戏分类标题样式 */
.section-title {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-title h2 {
    font-weight: bold;
}

.section-title a {
  color: var(--primary-color);
  font-size: 1rem;
  text-decoration: none;
}

/* 响应式调整 */
@media (max-width: 768px) {
  /* 基础响应式调整 */
  .footer-links {
    flex-direction: column;
  }
  
  .footer-column {
    margin-bottom: 1.5rem;
  }
}