@font-face {
    font-family: 'inter';
    src: url(../fonts/inter.ttf) format("truetype");
}

@font-face {
    font-family: 'orbitron';
    src: url(../fonts/orbitron.ttf) format("truetype");
}


@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/icons.woff2) format('woff2');
  }

@font-face {
    font-family: 'Material Icons Fill';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/icons2.woff2) format('woff2');
}

body { font-family: "inter", sans-serif; overflow-x: hidden;margin: 0;scroll-behavior: smooth;font-size: 0.83vw;background-color: #F8F8F8;}
html { scrollbar-width: none; -ms-overflow-style: none;scroll-behavior: smooth;font-size: 0.83vw;}
::-webkit-scrollbar { width: 0px; background: transparent; }
/* h1{opacity: 0;position: absolute;z-index: -1;} */
* { box-sizing: border-box; }

.container{max-width: 100rem;width: 100%;margin: 0 auto;padding: 0;position: relative;}
a {text-decoration: none;}
p, h1, h2, h3, h4{margin: 0;}

.hidden{display: none!important;}
.material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 1.5rem; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; }
.material-icons-fill { font-family: 'Material Icons Fill'; font-weight: normal; font-style: normal; font-size: 1.5rem; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;}

header{height: 7.5rem;display: flex;flex-direction: column;width: 100%;position: fixed;box-shadow: 0px 8px 16px 0px #3E1C9605;top: 0;z-index: 999;}
header .nagivation-bar{display: flex;align-items: center;justify-content: space-between;height: 2.5rem;padding: 0 5rem;position: relative;}
header .nagivation-bar::before{position: absolute;width: 100%;height: 100%;content: "";background: linear-gradient(90deg, #766ABA 0%, #8F6DBA 100%);left: 0;top: 0;z-index: 3;}
header .nagivation-bar .nav-dropdown-btn{display: flex;align-items: center;column-gap: 0.5rem;padding: 0 0.5rem;cursor: pointer;height: 100%;position: relative;z-index: 4;}
header .nagivation-bar.show .nav-dropdown-btn::before, header .nagivation-bar.show .nav-dropdown-btn::after{position: absolute;content: "";bottom: 0;left: -0.5rem;width: 0.5rem;height: 0.5rem;background-repeat: no-repeat; background-size: contain; background-position: bottom right; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' xml:space='preserve'%3E%3Cpath style='fill:%23FFFFFF;' d='M0,20h20V0C20,11,11,20,0,20z' /%3E%3C/svg%3E");}
header .nagivation-bar.show .nav-dropdown-btn::after{left: unset;right: -0.5rem;transform: scaleX(-1);}
header .nagivation-bar .nav-dropdown-btn i{color: #ffffff;font-size: 1.5rem;transition: .3s all;}
header .nagivation-bar .nav-dropdown-btn i.menu-open{font-size: 2rem;}
header .nagivation-bar .nav-dropdown-btn p{font-size: 0.875rem;color: #ffffff;line-height: 1.25rem;transition: .3s all;}
header .nagivation-bar .navigation-right{display: flex;align-items: center;column-gap: 3rem;position: relative;z-index: 4;}
header .nagivation-bar .navigation-right a{font-size: 0.75rem;color: #ffffff;}
header .nagivation-bar .nav-dropdown-list{position: absolute;left: 0;top: 0rem;background-color: #ffffff;box-shadow: 0px 10px 10px 0px #11135B33;padding: 1.5rem 5.625rem;display: grid;grid-template-columns: repeat(auto-fit, minmax(0, 18.75rem));z-index: -1;width: 100%;transition: .5s all;opacity: 0;visibility: hidden;}
header .nagivation-bar.show .nav-dropdown-list{top: 2.5rem;z-index: 1;opacity: 1;visibility: visible;}
header .nagivation-bar .nav-dropdown-list .column{padding: 0 4.375rem;}
header .nagivation-bar .nav-dropdown-list h3{font-size: 1.25rem;color: #7A6ABA;}
header .nagivation-bar .nav-dropdown-list .nav-listing{margin-top: 1rem;display: flex;justify-content: space-between;}
header .nagivation-bar .nav-dropdown-list .nav-listing > div{display: flex;flex-direction: column;row-gap: 0.75rem;}
header .nagivation-bar .nav-dropdown-list .nav-listing > div a{font-size: 1rem;color: #697586;}
header .nagivation-bar.show .nav-dropdown-btn{background-color: #ffffff;opacity: 1!important;}
header .nagivation-bar.show .nav-dropdown-btn i{color: #796BBA;}
header .nagivation-bar.show .nav-dropdown-btn p{color: #796BBA;}
header .nagivation-bar.show .nav-dropdown-btn .dropdownArrow{transform: rotate(180deg);}

header nav{display: flex;align-items: center;justify-content: space-between;background-color: #ffffff;padding: 0 5rem;height: 5rem;}
header nav .header-logo img{display: block;width: 10.94rem;height: auto;}
header nav .header-right{display: flex;align-items: center;column-gap: 3rem;}
header nav .header-right .search-btn, header nav .header-right .close-search{height: 2rem;width: 2rem;border-radius: 50%;background-color: transparent;display: flex;align-items: center;justify-content: center;cursor: pointer;}
header nav .header-right .search-btn i, header nav .header-right .close-search i{font-size: 2rem;color: #697586;}
header nav .header-right .close-search{display: none;}
header nav .header-right .profile-icon{height: 3rem;width: 3rem;border-radius: 50%;background-color: #EBE9FE;display: flex;align-items: center;justify-content: center;cursor: pointer;}
header nav .header-right .profile-icon i{font-size: 2rem;color: #6938EF;}

header .navSearchWrap{height: 100%;display: flex;align-items: center;max-width: 49rem;overflow: hidden;}
header .navbar{display: flex;align-items: center;height: 100%;transition: transform 0.4s ease;transform: translateX(0);}
header .navbar.hide{transform: translateX(-100%);opacity: 0;z-index: -1;}
header .navbar a .material-icons-fill{display: none;}
header .navbar a.active .material-icons-fill{display: block;}
header .navbar a.active .material-icons{display: none;}
header .navbar a span{font-size: 1rem;color: #697586;font-weight: 500;}
header .navbar a.active span{color: #6938EF;}
header .navbar a{display: flex;align-items: center;column-gap: 0.75rem;width: 8rem;height: 100%;justify-content: center;}
header .navbar a.active{border-bottom: 2px solid #6938EF;}
header .navbar a i{font-size: 1.75rem;color: #697586;}
header .navbar a.active i{color: #6938EF;}

footer{background-color: #ffffff;padding: 3rem 10rem 2.215rem;display: flex;flex-wrap: wrap;margin-top: 5.5rem;column-gap: 7.25rem;}
footer .footer-column{flex: 0 0 15rem;max-width: 15rem;display: flex;row-gap: 1.25rem;flex-direction: column;}
footer .footer-column h3{font-size: 1rem;font-weight: 500;color: #364152;}
footer .footer-column .footer-menu-list{display: flex;flex-direction: column;row-gap: 1.25rem;}
footer .footer-column .footer-menu-list a{font-size: 0.75rem;font-weight: 400;color: #697586;}
footer .footer-column .language-button{width: 6.75rem;height: 2.5rem;border-radius: 0.31rem;border: 1px solid #CDD5DF;display: flex;align-items: center;justify-content: center;position: relative;cursor: pointer;}
footer .footer-column .language-button i{color: #364152;font-size: 1.5rem;}
footer .footer-column .language-button span{font-size: 1rem;color: #364152;font-weight: 400;margin-left: 0.5rem;line-height: 2rem;}
footer .footer-column .language-button .language-dropdown-list{position: absolute;top: 3rem;right: 0;width: 8.25rem;height: max-content;max-height: 7.5rem;border-radius: 0.31rem;background-color: transparent;border: 1px solid #CDD5DF;flex-direction: column;overflow-y: scroll;display: none;}
footer .footer-column .language-button .language-dropdown-list a{width: 100%;text-align: center;height: 1.5rem;font-size: 0.875rem;color: #364152;margin: 0.5rem 0;}
footer .footer-column .language-button .language-dropdown-list.show{display: flex;}
footer .footer-column:last-child{flex-grow: 1;margin-left: auto;}

.hero-panel-slider{margin-top: 10.5rem;position: relative;}
.hero-panel-slider .container{position: relative;}
.hero-panel-slider .hero-banner-swiper .swiper-slide a{position: relative;}
.hero-panel-slider .hero-banner-swiper .swiper-slide a .overlay{position: absolute;width: 100%;height: 100%;border-radius: 1rem;background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60.59%, #000000 100%); }
.hero-panel-slider .hero-banner-swiper .swiper-slide a > img{width: 100%;height: 29.5rem;display: block;max-height: 29.5rem;border-radius: 1rem;object-fit: cover;object-position: left;}
.hero-panel-slider .hero-banner-swiper .swiper-slide a .bottomWrap{position: absolute;bottom: 0;margin: 2rem;display: flex;align-items: flex-end;width: calc(100% - 4rem);}
.hero-panel-slider .hero-banner-swiper .swiper-slide a .bottomWrap > img{width: 4.5rem;height: 4.5rem;border-radius: 0.63rem;margin-right: 1.5rem;box-shadow: 0px 2px 8px 0px #FFFFFF26; }
.hero-panel-slider .hero-banner-swiper .swiper-slide a .bottomWrap .nameWrap{display: flex;flex-direction: column;row-gap: 0.5rem;max-width: 30rem;}
.hero-panel-slider .hero-banner-swiper .swiper-slide a .bottomWrap .nameWrap .gameType{width: 2.5rem;height: 1.625rem;display: flex;align-items: center;justify-content: center;border-radius: 0.31rem;background-color: #6938EF;}
.hero-panel-slider .hero-banner-swiper .swiper-slide a .bottomWrap .nameWrap .gameType i{font-size: 1.5rem;color: #ffffff;}
.hero-panel-slider .hero-banner-swiper .swiper-slide a .bottomWrap .nameWrap p{font-size: 1.5rem;font-weight: 600;color: #ffffff;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.hero-panel-slider .hero-banner-swiper .swiper-slide a .bottomWrap .downloadBtn{margin-left: auto;width: 6.5rem;height: 2.5rem;display: flex;align-items: center;justify-content: center;border-radius: 0.31rem;background-color: #6938EF;column-gap: 0.5rem;}
.hero-panel-slider .hero-banner-swiper .swiper-slide a .bottomWrap .downloadBtn i{font-size: 1.5rem;color: #ffffff;}
.hero-panel-slider .hero-banner-swiper .swiper-slide a .bottomWrap .downloadBtn p{font-size: 1rem;color: #ffffff;font-weight: 500;}
.hero-panel-slider .hero-swiper-pagination{margin-top: 1.5rem;width: 100%;text-align: center;}
.hero-panel-slider .hero-swiper-pagination .swiper-pagination-bullet{width: 0.5rem;height: 0.5rem;background-color: #CDD5DF;margin-right: 0.5rem;opacity: 1;}
.hero-panel-slider .hero-swiper-pagination .swiper-pagination-bullet-active{background-color: #697586;}
.swiper-button{position: absolute;top: 58%;transform: translateY(-50%);width: 3rem;height: 3rem;display: flex;align-items: center;justify-content: center;background-color: #FCFCFD;border-radius: 50%;box-shadow: 0px 2px 2px 0px #00000040; backdrop-filter: blur(8px);z-index: 1;cursor: pointer;opacity: 0.75;}
.hero-panel-slider .swiper-button, .game-banner-listing-panel .swiper-button{top: 50%;}
.hot-category-list .swiper-button{top: 63%;}
.swiper-button i{font-size: 1rem;color: #364152;}
.swiper-button.prev{left: -1.5rem;}
.swiper-button.next{right: -1.5rem;}
.swiper-button-disabled{display: none;}

.game-banner-listing-panel{margin-top: 4rem;}
.game-banner-listing-panel h2{font-size: 1.25rem;font-weight: 500;color: #364152;margin-bottom: 1.5rem;line-height: 1.5rem;}
.game-banner-listing-panel .swiper-container .swiper-slide a .imgWrap{position: relative;}
.game-banner-listing-panel .swiper-container .swiper-slide a .imgWrap img{width: 100%;max-height: 12rem;height: 12rem;border-radius: 0.63rem 0.63rem 0 0;object-fit: cover;}
.game-banner-listing-panel .swiper-container .swiper-slide a .imgWrap .gameType{width: 3.13rem;height: 2rem;border-radius: 0.63rem 0 0.63rem 0;display: flex;align-items: center;justify-content: center;position: absolute;top: 0;left: 0;background: linear-gradient(90deg, #9B8AFB 0%, #6938EF 100%); }
.game-banner-listing-panel .swiper-container .swiper-slide a .imgWrap .gameType i{font-size: 1.25rem;color: #ffffff;}
.game-banner-listing-panel .swiper-container .swiper-slide a .bottomWrap{background-color: #ffffff;border-radius: 0 0 0.63rem 0.63rem;padding: 1.25rem 1rem 1rem;display: flex;box-shadow: 0px 2px 4px 0px #11135B26;margin-bottom: 1.25rem;flex-direction: column;row-gap: 0.75rem;}
.game-banner-listing-panel .swiper-container .swiper-slide a .bottomWrap .wrapTop{display: flex;align-items: flex-end;column-gap: 1rem;overflow: hidden;width: 100%;margin-top: -3rem;}
.game-banner-listing-panel .swiper-container .swiper-slide a .bottomWrap .wrapTop .imgWrap{width: 5.5rem;height: 5.5rem;border-radius: 0.63rem;padding: 0.25rem;background-color: #ffffff;flex: 0 0 5.5rem;}
.game-banner-listing-panel .swiper-container .swiper-slide a .bottomWrap .wrapTop .imgWrap img{width: 100%;height: 100%;border-radius: 0.63rem;}
.game-banner-listing-panel .swiper-container .swiper-slide a .bottomWrap .wrapTop .nameWrap{display: flex;align-items: flex-start;justify-content: space-between;flex-grow: 1;overflow: hidden;width: 100%;}
.game-banner-listing-panel .swiper-container .swiper-slide a .bottomWrap .wrapTop .nameWrap .infoWrap{display: flex;flex-direction: column;row-gap: 0.25rem;margin-right: 0.5rem;overflow: hidden;}
.game-banner-listing-panel .swiper-container .swiper-slide a .bottomWrap .wrapTop .nameWrap .infoWrap h2{font-size: 1.25rem;font-weight: 500;color: #364152;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-bottom: 0;}
.game-banner-listing-panel .swiper-container .swiper-slide a .bottomWrap .wrapTop .nameWrap .infoWrap p{font-size: 0.875rem;color: #364152;}
.game-banner-listing-panel .swiper-container .swiper-slide a .bottomWrap .wrapTop .nameWrap .ratingWrap p{font-size: 1.25rem;color: #364152;display: flex;align-items: center;column-gap: 0.25rem;}
.game-banner-listing-panel .swiper-container .swiper-slide a .bottomWrap .wrapTop .nameWrap .ratingWrap p i{font-size: 1.25rem;color: #6938EF;}
.game-banner-listing-panel .swiper-container .swiper-slide a .bottomWrap .detailWrap{display: flex;align-items: flex-start;justify-content: space-between;}
.game-banner-listing-panel .swiper-container .swiper-slide a .bottomWrap .detailWrap .info{margin-right: 2rem;display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;font-size: 0.75rem;color: #364152;}
.game-banner-listing-panel .swiper-container .swiper-slide a .bottomWrap .detailWrap .downloadBtn{width: 5.75rem;height: 2rem;border-radius: 0.31rem;background: linear-gradient(180deg, #7A5AF8 0%, #6938EF 100%);box-shadow: 0px 2px 2px 0px #11135B40;display: flex;align-items: center;justify-content: center;column-gap: 0.5rem;flex: 0 0 5.75rem;}
.game-banner-listing-panel .swiper-container .swiper-slide a .bottomWrap .detailWrap .downloadBtn i{font-size: 1.25rem;color: #ffffff;}
.game-banner-listing-panel .swiper-container .swiper-slide a .bottomWrap .detailWrap .downloadBtn p{font-size: 0.875rem;color: #ffffff;font-weight: 500;}

.titleWrap{display: flex;align-items: center;column-gap: 0.5rem;margin-bottom: 1.5rem;}
.titleWrap h2{font-size: 1.25rem;font-weight: 500;color: #364152;}
.titleWrap i{font-size: 1.5rem;color: #6938EF;}
.app-listing-panel{margin-top: 3rem;}
.app-listing-panel .container{position: relative;}
.app-listing-panel .swiper-container .swiper-slide a{display: flex;flex-direction: column;border-radius: 0.63rem;box-shadow: 0px 2px 4px 0px #11135B26;background-color: #ffffff;padding-bottom: 1rem;margin-bottom: 0.63rem;height: 14.06rem;}
.app-listing-panel .swiper-container .swiper-slide a .topBgWrap{padding: 1.5rem 3rem;display: flex;align-items: center;justify-content: center;border-radius: 0.63rem 0.63rem 0 0;position: relative;}
.app-listing-panel .swiper-container .swiper-slide a .topBgWrap img{width: 5.5rem;height: 5.5rem;display: block;border-radius: 0.63rem;object-fit: cover;position: relative;z-index: 2;box-shadow: 0px 2px 8px 0px #11135B26; }
.app-listing-panel .swiper-container .swiper-slide a .topBgWrap .overlay-img{position: absolute;top: 0;left: 0;z-index: 1;width: 100%;height: 100%;filter: blur(5px);opacity: 0.25;border-radius: 0.63rem 0.63rem 0 0;mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 30%);}
.app-listing-panel .swiper-container .swiper-slide a .name{font-size: 1rem;font-weight: 500;color: #364152;padding: 0 1rem;display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.app-listing-panel .swiper-container .swiper-slide a .ratingWrap{display: flex;align-items: center;column-gap: 0.5rem;padding: 0 1rem;margin-top: auto;}
.app-listing-panel .swiper-container .swiper-slide a .ratingWrap p{font-size: 0.875rem;color: #364152;display: flex;align-items: center;}
.app-listing-panel .swiper-container .swiper-slide a .ratingWrap p i{font-size: 0.875rem;color: #6938EF;margin-left: 0.125rem;}
.app-listing-panel .swiper-container .swiper-slide a .ratingWrap span{width: 0.25rem;height: 0.25rem;background-color: #9AA3B2;border-radius: 50%;}

.banner-listing-panel{margin-top: 2rem;}
.banner-listing-panel .swiper-container .swiper-slide a{display: flex;flex-direction: column;border-radius: 0.63rem;box-shadow: 0px 2px 4px 0px #11135B26;background-color: #ffffff;padding-bottom: 1rem;margin-bottom: 0.63rem;}
.banner-listing-panel .swiper-container .swiper-slide a .bannerWrap{width: 100%;height: 11.5rem;position: relative;}
.banner-listing-panel .swiper-container .swiper-slide a .bannerWrap img{width: 100%;height: 100%;border-radius: 0.63rem 0.63rem 0 0;}
.banner-listing-panel .swiper-container .swiper-slide a .title{font-size: 1.25rem;font-weight: 500;color: #364152;display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;} 
.banner-listing-panel .swiper-container .swiper-slide a .bannerBottom{margin-top: 1rem;height: 5.5rem;display: flex;flex-direction: column;justify-content: space-between;padding: 0 1rem;}
.banner-listing-panel .swiper-container .swiper-slide a .bottomWrap{display: flex;align-items: center;justify-content: space-between;}
.banner-listing-panel .swiper-container .swiper-slide a .bottomWrap .typeWrap{display: flex;align-items: center;column-gap: 0.5rem;}
.banner-listing-panel .swiper-container .swiper-slide a .bottomWrap .typeWrap p{font-size: 0.875rem;font-weight: 400;color: #6938EF;}
.banner-listing-panel .swiper-container .swiper-slide a .bottomWrap .typeWrap span{width: 0.25rem;height: 0.25rem;border-radius: 50%;background-color: #9B8AFB;}
.banner-listing-panel .swiper-container .swiper-slide a .bottomWrap .dateUpdate{font-size: 0.875rem;color: #364152;}

.breadcrumb .container {display: flex;align-items: center;height: 2rem;margin-top: 9rem;column-gap: 0.5rem;}
.breadcrumb a{font-size: 1.25rem;color: #364152;line-height: 1.75rem;}
.breadcrumb a.active{font-weight: 600;max-width: 60rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.breadcrumb i{font-size: 1rem;color: #697586;}
.breadcrumb .tab-label{display: flex;align-items: center;column-gap: 0.5rem;}
.breadcrumb .tab-label i{font-size: 1rem;color: #697586;}
.breadcrumb .tab-label p{font-weight: 600;max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;font-size: 1.25rem;color: #364152;line-height: 1.75rem;}

.column-listing-panel{max-width: 100rem;width: 100%;margin: 0 auto;padding: 0;position: relative;margin-top: 4rem;}
.column-listing-panel .swiper-container .swiper-slide a{display: flex;flex-direction: column;row-gap: 1rem;border-radius: 0.63rem;box-shadow: 0px 2px 4px 0px #11135B26;padding: 1rem 1.5rem;margin-bottom: 0.5rem;position: relative;}
.column-listing-panel .swiper-container .swiper-slide a .topWrap{display: flex;align-items: center;}
.column-listing-panel .swiper-container .swiper-slide a .rankNo{position: absolute;top: 0;left: 0;width: 3.125rem;height: 2rem;display: flex;align-items: center;justify-content: center;background: linear-gradient(90deg, #9B8AFB 0%, #6938EF 100%);font-size: 1.25rem;color: #ffffff;font-weight: 900;border-radius: 0.63rem 0 0.63rem 0;font-family: "orbitron", sans-serif;line-height: 2.5rem;}
.column-listing-panel .swiper-container .swiper-slide a .topWrap > img{width: 5.5rem;height: 5.5rem;border-radius: 0.63rem;margin-right: 1rem;}
.column-listing-panel .swiper-container .swiper-slide a .infoWrap{display: flex;flex-direction: column;row-gap: 0.5rem;width: 100%;overflow: hidden;}
.column-listing-panel .swiper-container .swiper-slide a .infoWrap .name{font-size: 1.25rem;font-weight: 500;color: #364152;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.column-listing-panel .swiper-container .swiper-slide a .infoWrap .ratingWrap{display: flex;align-items: center;column-gap: 0.5rem;}
.column-listing-panel .swiper-container .swiper-slide a .infoWrap .ratingWrap .rating{display: flex;align-items: center;font-size: 1.5rem;font-weight: 500;color: #6938EF;}
.column-listing-panel .swiper-container .swiper-slide a .infoWrap .ratingWrap .rating i{font-size: 1rem;color: #6938EF;}
.column-listing-panel .swiper-container .swiper-slide a .infoWrap .ratingWrap span{width: 0.25rem;height: 0.25rem;border-radius: 50%;background-color: #8A9BFB;}
.column-listing-panel .swiper-container .swiper-slide a .infoWrap .ratingWrap .comment{font-size: 0.875rem;font-weight: 400;color: #6938EF;margin-top: -0.25rem;}
.column-listing-panel .swiper-container .swiper-slide a .infoWrap .categoryList{display: flex;align-items: center;column-gap: 0.5rem;}
.column-listing-panel .swiper-container .swiper-slide a .infoWrap .categoryList p{font-size: 0.75rem;color: #364152;}
.column-listing-panel .swiper-container .swiper-slide a .infoWrap .categoryList span{width: 0.25rem;height: 0.25rem;border-radius: 50%;background-color: #9AA3B2;}
.column-listing-panel .swiper-container .swiper-slide a.first{background: radial-gradient(66.77% 211.08% at 48.21% 50%, rgba(237, 157, 92, 0.3) 0%, rgba(249, 233, 94, 0.3) 100%); }
.column-listing-panel .swiper-container .swiper-slide a.second{background: radial-gradient(66.77% 211.08% at 48.21% 50%, rgba(111, 130, 149, 0.3) 0%, rgba(213, 213, 213, 0.3) 100%); }
.column-listing-panel .swiper-container .swiper-slide a.third{background: radial-gradient(66.77% 211.08% at 48.21% 50%, rgba(134, 61, 31, 0.3) 0%, rgba(233, 188, 115, 0.3) 100%); }
.column-listing-panel .swiper-container .swiper-slide a.first .rankNo{background: linear-gradient(90deg, #FFDA75 0%, #FEB312 100%); }
.column-listing-panel .swiper-container .swiper-slide a.second .rankNo{background: linear-gradient(90deg, #DBDBDB 0%, #9B9B9B 100%); }
.column-listing-panel .swiper-container .swiper-slide a.third .rankNo{background: linear-gradient(90deg, #F2B880 0%, #9C5527 100%); }
.column-listing-panel .swiper-container .swiper-slide a .bottomWrap{display: flex;align-items: center;justify-content: space-between;}
.column-listing-panel .swiper-container .swiper-slide a .bottomWrap > p{max-width: 11.875rem;font-size: 0.75rem;color: #364152;display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.column-listing-panel .swiper-container .swiper-slide a .bottomWrap .downloadBtn{width: 5.75rem;height: 2rem;border-radius: 0.31rem;background: linear-gradient(180deg, #7A5AF8 0%, #6938EF 100%);box-shadow: 0px 2px 2px 0px #11135B40;display: flex;align-items: center;justify-content: center;column-gap: 0.5rem;flex: 0 0 5.75rem;}
.column-listing-panel .swiper-container .swiper-slide a .bottomWrap .downloadBtn i{font-size: 1.25rem;color: #ffffff;}
.column-listing-panel .swiper-container .swiper-slide a .bottomWrap .downloadBtn p{font-size: 0.875rem;color: #ffffff;font-weight: 500;}

.error-page{margin-top: 12rem;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 0 3rem;}
.error-page > img{width: 15rem;height: auto;display: block;}
.error-page > h2{margin-top: 2.25rem;font-size: 1.5rem;font-weight: 600;color: #364152;margin-bottom: 1.5rem;}
.error-page > p{font-size: 0.875rem;font-weight: 500;color: #364152;line-height: 1.25rem;}
.error-page > a{text-decoration: none;margin-top: 3rem;width: 100%;height: 3rem;display: flex;align-items: center;justify-content: center;border-radius: 0.63rem;background-color: #6938EF;font-size: 1rem;font-weight: 500;color: #ffffff;margin-bottom: 6rem;max-width: 10rem;}

.search-popup{transition: transform 0.4s ease;opacity: 0;position: relative;z-index: -1;}
.search-popup.show{transform: translateX(-100%);opacity: 1;z-index: 1;}
.search-popup .input-wrapper{position: relative;background-color: #ffffff;width: 49rem;height: 3rem;border-radius: 1rem;border: 1px solid #CDD5DF;padding: 0.75rem 0.375rem;display: flex;align-items: center;}
.search-popup .input-wrapper i{font-size: 1.5rem;color: #9AA3B2;margin-right: 1rem;}
.search-popup input{width: 80%;height: 100%;font-size: 1rem;color: #364152;border: none;outline: none;}
.search-popup input::placeholder{color: #9AA3B2;}
.search-popup .input-wrapper > a{background-color: #6938EF;width: 4.25rem;height: 2.375rem;display: flex;align-items: center;justify-content: center;cursor: pointer;border-radius: 0.63rem;font-size: 0.875rem;color: #ffffff;font-weight: 600;margin-left: auto;}

.search-result{padding: 1.5rem 2rem;max-height: 29.125rem;display: none;background-color: #ffffff;border-radius: 1rem;box-shadow: 0px 0px 40px 0px #11135B33;width: 100%;position: absolute;}
.search-result.show{display: block;}
.search-result .suggest-list{display: flex;align-items: center;column-gap: 1rem;margin-bottom: 1rem;}
.search-result .suggest-list i{color: #9AA3B2;font-size: 1.5rem;}
.search-result .suggest-list p{font-size: 1rem;color: #364152;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.search-result .suggest-list p span{font-weight: 600;}
.search-result .with-image{display: flex;flex-direction: column;row-gap: 1rem;margin-top: 0.5rem;}
.search-result .with-image a{display: flex;column-gap: 1.5rem;}
.search-result .with-image a img{width: 4.5rem;height: 4.5rem;border-radius: 0.63rem;}
.search-result .with-image a .detailWrap{display: flex;flex-direction: column;overflow: hidden;}
.search-result .with-image a .detailWrap h4{font-size: 1rem;color: #364152;margin-bottom: 0.5rem;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.search-result .with-image a .detailWrap h4 span{font-weight: 600;}
.search-result .with-image a .detailWrap .tag-list{display: flex;align-items: center;column-gap: 0.5rem;}
.search-result .with-image a .detailWrap .tag-list p{font-size: 0.75rem;color: #364152;}
.search-result .with-image a .detailWrap .tag-list span{width: 0.25rem;height: 0.25rem;border-radius: 50%;background-color: #9AA3B2;}
.search-result .with-image a .detailWrap .rating{display: flex;align-items: flex-end;column-gap: 0.125rem;font-size: 1rem;color: #364152;margin-top: 0.5rem;}
.search-result .with-image a .detailWrap .rating i{font-size: 0.75rem;color: #6938EF;}
.search-result .showMore{margin-top: 1.5rem;text-align: left;width: 100%;color: #6938EF;font-size: 0.875rem;display: block;text-decoration: underline;}

.backToTop{width: 3.5rem;height: 3.5rem;display: flex;align-items: center;justify-content: center;background-color: #F8FAFC;border-radius: 50%;box-shadow: 0px 2px 4px 0px #11135B29;position: fixed;right: 3.25rem;bottom: -11.5rem;cursor: pointer;transition: bottom 0.4s ease;z-index: 999;}
.backToTop.show{bottom: 11.5rem;}
.backToTop i{font-size: 2rem;color: #364152;}

@media screen and (min-width: 1650px) {
    body,html{font-size: 16px;}
    header .nagivation-bar .nav-dropdown-list{grid-template-columns: repeat(auto-fit, minmax(0, 17.75rem));}
}

@media (min-width: 1000px) and (max-width: 1200px) {
    body,html{font-size: 0.95vw}
}

@media (min-width: 1201px) and (max-width: 1439px) {
    body,html{font-size: 0.925vw}
}

@media (min-width: 1440px) and (max-width: 1649px) {
    body,html{font-size: 0.9vw}
}

.footer-ba{
    margin: auto;
    color: #666;
    text-align: center;
    font-size: 0.75rem;
}
.footer-ba a {
    color: #666;
}

.hero-panel-slider .hero-banner-swiper .swiper-slide a .bottomWrap .nameWrap p.d-tips {
 font-size: 0.75rem;
 line-height: 1;
 font-weight: 400;
}

.hero-panel-slider .hero-banner-swiper .swiper-slide a .bottomWrap .nameWrap p {
    font-size: 1.2rem;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1;
}


.app-listing-panel .swiper-container .swiper-slide a .name {
    text-align: center;
}

.app-listing-panel .swiper-container .swiper-slide a .ratingWrap{
    justify-content: center;
}

.app-listing-panel .swiper-container .swiper-slide a .ratingWrap p {
    font-size: 0.875rem;
    color: #364152;
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
}

.game-banner-listing-panel .swiper-container .swiper-slide a .bottomWrap .wrapTop .nameWrap .infoWrap p {
    font-size: 0.875rem;
    color: #364152;
    white-space: nowrap;
    overflow: hidden;
}