:root {
  --primary-color: #022935;
  --secondary-color: #025573;
  --bg1: #022935;
  --bg2: #025573;
  --font-size-base: 16px;
}
@media only screen and (max-width: 810px) {
  html {
    font-size: 42.8px;
  }
  .m-ajax {
    width: 100%;
  }
  .header {
    align-items: center;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent);
    display: flex;
    height: 1.49333rem;
    justify-content: space-between;
    left: 50%;
    position: fixed;
    right: 0;
    top: 0;
    transform: translate(-50%);
    width: 100%;
    z-index: 100;
  }
  .banner-container,
  .swiper-container {
    position: relative;
  }
  .banner-container .banner-swap {
    display: block;
    list-style: none;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    padding: 0;
    position: relative;
    z-index: 1;
  }
  .banner-container .swiper-wrapper {
    box-sizing: content-box;
    display: flex;
    height: 100%;
    position: relative;
    transition-property: transform;
    transition-timing-function: initial;
    width: 100%;
    z-index: 1;
  }
  .banner-container .swiper-item {
    background-position: 50%;
    background-size: cover;
    padding-bottom: 45.5%;
    position: relative;
  }
  .banner-container .swiper-item img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    left: 0px;
    right: 0px;
  }
  .channel-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-top: -0.29333rem;
    position: sticky;
    top: 1.49333rem;
    z-index: 110;
  }
  .channel-container .channel-bar {
    align-items: center;
    background: #fff;
    border-radius: 0.53333rem;
    border-radius: 20px;
    box-shadow: 0 0.10667rem 0.24267rem #57381e40, inset 0 -0.10667rem 0.05333rem #00000014;
    display: flex;
    height: 1.06667rem;
    justify-content: space-between;
    max-width: 9.22667rem;
    min-width: 6.24rem;
    overflow: hidden;
  }
  .channel-container .channel-bar .channel-wrap {
    flex: 1;
    height: 2.13333rem;
    overflow: hidden;
    position: relative;
    top: -0.01333rem;
  }
  .channel-container .channel-bar .show-slide {
    padding-right: 0.50667rem;
  }
  .channel-container .provider-channel {
    display: none;
  }
  .channel-container .provider-channel-active {
    display: flex;
  }
  .slide-arrow {
    animation: slide-right-790e0883 0.7s ease-in-out infinite alternate;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAxCAMAAACrgNoQAAAANlBMVEUAAABgOBBgOBBeNg9dNg5gNRBeNw9dNg9eNg9cNg9cNhBfNw5eOA1aOhBdNxBcNhBcOBBdNg/L82oEAAAAEXRSTlMAIBDvfzDf38/PoJ9fMHBQQM/3kDgAAACBSURBVEjH7dU5DoAwEENRCGEPi+9/WWjASM5IUAVBUnr+q1P8+LnYWNq9byPHuvJmD6gIALzZg4I9hfYUHC0xAyoWwBSui4nh5WJ+LEIWt8X6VFRTCuH649ZcwHiCOve5T9gXIdYv2vN59jKylyN7juxVsOfIXsXe68j+9rf70bcBRM4pWZlbMJQAAAAASUVORK5CYII=);
    background-position: 0;
    background-repeat: no-repeat;
    background-size: 0.32rem;
    height: 0.48rem;
    margin-top: -0.26667rem;
    position: absolute;
    right: -0.16rem;
    top: 50%;
    width: 0.64rem;
  }
  .slide-arrow-prev {
    right: unset;
    left: 0.16rem;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAxCAMAAACrgNoQAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAADZQTFRFAAAAYDgQYDgQXTYOXjYPYDUQXTYPXTYPXjgNXDYQXTcQXDYQXjYPXDgQWjoQXzcOXjcPXDYPNFqCHAAAABJ0Uk5TACAQf+8w3/9fUHCgz0Awn9/PB5cDtwAAAP1JREFUeJzd1dsOgjAQRVFGICEk6v9/JjEiUaH2Qu+tnHkz8lj2UiAwpYZ50L8CEoXF01YFLdEr/5F+XSug7eTykvXUvNciUH0mVN9okQHTm5NJrxdTYHt5k4+sl6dnqvXdvdD380bMPr4koI/AuB73IRgE0AcA6z0AewfQ3gK43wHeG3B+wr0Gl7mFewVYvQS8XoJeWDBMfvlqX+5xSgFTqH9mCX2pHGHujSH2h4EL9/RQ4V5vVPgPCBTBJ4qJcAhAIhoziIgHGSCSUXks0mHsRTiMnaAlG/dWxON+F4Vxb0XUW1HcUIxIeiMqW5YSIu2VuNU2Rf62+/X4QfAB3OqpMs2k02MAAAAASUVORK5CYII=);
  }
  .game-list-container .game-card-container {
    position: relative;
  }
  .game-list-container .game-card {
    cursor: pointer;
    height: 2.8rem;
    width: 2.8rem;
  }
  .game-list-container .game-card.big {
    grid-column: span 2;
    grid-row: span 2;
    transform: scale(2.0857);
    transform-origin: top left;
  }
  .large .game-card {
    height: 4.61333rem;
    width: 9.22667rem;
    display: block;
  }
  .swiper-3d {
    perspective: 32rem;
  }
  .swiper-3d .swiper-slide-shadow-left,
  .swiper-3d .swiper-slide-shadow-right {
    display: none;
  }
  .menu-icon.alert {
    margin-bottom: 0;
    padding: 0;
  }
  .close-top {
    position: absolute;
    top: 15%;
    right: 0px;
    z-index: 999;
    display: block;
  }
  .close-top .btn-close {
    height: 1.19333rem;
    width: 1.19333rem;
    opacity: 1;
  }
  .channel-game {
    margin-top: 0.29333rem;
  }
  .game-list-swiper {
    position: relative;
    display: flex;
  }
  .game-swiper {
    position: relative;
    width: 100%;
    padding-bottom: 90px;
    top: 0;
    display: block;
    height: fit-content;
    overflow: hidden;
  }
  .game-swiper:after {
    content: "";
    display: block;
    clear: both;
  }
  .game-swiper .swiper-slide {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
  }
  .game-swiper .bt-nav {
    position: relative;
    bottom: 15px;
    right: 0px;
    display: grid;
    width: 100%;
    grid-template-columns: 6rem 1fr;
    z-index: 9;
  }
  .game-swiper .bt-nav a {
    color: #000;
  }
  .game-swiper .bt-nav .bt-nav-left {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
  }
  .game-swiper .bt-nav .bt-nav-left .game-pagination {
    width: 100% !important;
    width: 100%;
    left: 50%;
    position: relative;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    align-content: center;
    justify-content: center;
    top: 0%;
    border: 0px;
  }
  .game-swiper .bt-nav .bt-nav-left .game-pagination .swiper-pagination-bullet {
    left: 0px !important;
    width: 0.5rem;
    height: 0.5rem;
    background: #fff;
    position: relative;
    opacity: 1;
    color: #111;
    border: 1px solid #f97819;
    font-size: 13px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    transform: scale(1) !important;
    padding: 0.2rem;
    margin-bottom: 0.1rem;
    margin-top: 0.1rem;
  }
  .game-swiper .bt-nav .bt-nav-left .game-pagination .swiper-pagination-bullet-active {
    background: #f97819;
    color: #fff;
  }
  .game-swiper .bt-nav .bt-nav-right {
    border-radius: 20px;
    background: #fff;
    border: 1px solid #000;
    gap: 10px;
    font-size: 16px;
    padding: 5px 10px;
    z-index: 9;
    align-content: center;
    align-items: center;
    display: flex;
    justify-content: space-between;
  }
  .game-swiper .game-bt-next,
  .game-swiper .game-bt-prev {
    width: 20px;
    height: 30px;
    position: relative;
    z-index: 9;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
  }
  .game-swiper .game-bt-next img,
  .game-swiper .game-bt-prev img {
    width: 100%;
  }
  .pagination {
    position: relative;
    z-index: 9;
    margin-top: 0.8rem;
  }
  .pagination ul {
    display: flex;
    margin-bottom: 3rem;
    padding: 0;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    list-style: none;
    font-size: 13px;
    gap: 0.2rem;
    margin-top: 0.3rem;
  }
  .pagination ul li a {
    display: flex;
    width: 0.9rem;
    height: 0.9rem;
    align-content: center;
    align-items: center;
    justify-content: center;
    background: #f1f1f1;
    border-radius: 0.1rem;
  }
  .pagination ul li.active a {
    background: #f7933c;
    color: #fff;
  }
  .feed-wapp {
    position: relative;
    padding-top: 0.5rem;
  }
  .game-card-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 6px);
    display: block;
    position: absolute;
    z-index: 99;
    font-size: 13px;
    bottom: 0;
    padding: 5px 10px;
    background: #f4821c;
    left: 3px;
    margin: 0;
    border-radius: 0px 0px 0.2rem 0.2rem;
    color: #fff;
    font-weight: 700;
  }
}
@media only screen and (max-width: 500px) {
  .van-list .game-list-container {
    display: grid;
    gap: 0.2rem;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
  .game-list-container.game-card {
    width: auto;
  }
  .channel-container .channel-bar {
    max-width: 8.227rem;
    min-width: 7.24rem;
  }
  .collection-container .collection-wrap {
    width: 7.253rem;
  }
  .popular-game {
    display: flex;
    flex-direction: column;
  }
  .banner-game {
    padding-left: 0.2rem;
    padding-right: 0.2rem;
  }
  .group-game-container {
    overflow: hidden;
    width: 100%;
  }
  .game-swiper .swiper-slide .game-card {
    width: 8.72667rem;
    height: 3.613rem;
  }
  .game-swiper .bt-nav {
    width: calc(100% - 0.5rem);
    grid-template-columns: 5rem 1fr;
    margin: auto;
  }
}