@font-face {
    font-family: 'inter';
    src: url(../fonts/inter.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: 1.862vw;background-color: #F8F8F8;}
html { scrollbar-width: none; -ms-overflow-style: none;scroll-behavior: smooth;font-size: 1.862vw;}
::-webkit-scrollbar { width: 0px; background: transparent; }
/* h1{opacity: 0;position: absolute;z-index: -1;} */
* { box-sizing: border-box; }

.container{max-width: 100%;width: 100%;margin: 0 auto;padding: 0;}
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: 3rem; 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: 3rem; 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: 14rem;display: flex;flex-direction: column;row-gap: 3rem;width: 100%;padding: 2rem 2rem 0;background-color: #ffffff;box-shadow: 0px 8px 8px 0px #3E1C9608;position: relative;}
header nav{display: flex;align-items: center;justify-content: space-between;}
header nav .header-logo img{display: block;width: 16.88rem;height: auto;}
header nav .header-right{display: flex;align-items: center;column-gap: 2rem;}
header nav .header-right .search-btn{height: 5rem;width: 5rem;border-radius: 50%;background-color: transparent;display: flex;align-items: center;justify-content: center;}
header nav .header-right .search-btn i{font-size: 3rem;height: 3rem;width: 3rem;color: #697586;}
header nav .header-right .profile-icon{height: 5rem;width: 5rem;border-radius: 50%;background-color: #EBE9FE;display: flex;align-items: center;justify-content: center;}
header nav .header-right .profile-icon i{font-size: 3.5rem;height: 3.5rem;width: 3.5rem;color: #6938EF;}

header .navbar{display: flex;align-items: center;column-gap: 1.88rem;overflow-x: scroll;}
header .navbar::-webkit-scrollbar{height: 0;}
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{display: none;font-size: 1.75rem;color: #6938EF;font-weight: 500;}
header .navbar a.active span{display: block;}
header .navbar a{display: flex;align-items: center;column-gap: 0.63rem;width: 5.5rem;height: 5rem;border-radius: 1rem 1rem 0 0;justify-content: center;}
header .navbar a.active{background-color: #EBE9FE;width: 11rem;}
header .navbar a i{font-size: 3.5rem;width: 3.5rem;height: 3.5rem;color: #697586;}
header .navbar a.active i{color: #6938EF;}

footer{background-color: #ffffff;padding: 4rem 0 4rem 8rem;display: flex;flex-wrap: wrap;justify-content: space-between;row-gap: 6rem;margin-top: 6rem;}
footer .footer-column{flex: 0 0 40%;max-width: 40%;display: flex;flex-direction: column;row-gap: 2rem;}
footer .footer-column h3{font-size: 2rem;font-weight: 500;color: #364152;}
footer .footer-column .footer-menu-list{display: flex;flex-direction: column;row-gap: 2rem;}
footer .footer-column .footer-menu-list a{font-size: 1.5rem;font-weight: 400;color: #697586;}
footer .footer-column .language-button{width: 13.5rem;height: 5rem;border-radius: 5px;border: 1px solid #CDD5DF;display: flex;align-items: center;justify-content: center;position: relative;}
footer .footer-column .language-button i{color: #364152;width: 3rem;height: 3rem;}
footer .footer-column .language-button span{font-size: 2rem;color: #364152;font-weight: 400;margin-left: 1rem;}
footer .footer-column .language-button .language-dropdown-list{position: absolute;top: 6rem;right: 0;width: 16rem;height: max-content;max-height: 15rem;border-radius: 5px;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: 3rem;font-size: 1.75rem;color: #364152;margin: 1rem 0;}
footer .footer-column .language-button .language-dropdown-list.show{display: flex;}

.hero-panel-slider{margin-top: 2rem;}
.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: 1.25rem;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: 29rem;display: block;max-height: 29rem;border-radius: 1.25rem;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: 9rem;height: 9rem;border-radius: 1.25rem;margin-right: 2rem;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: 1rem;max-width: 22rem;}
.hero-panel-slider .hero-banner-swiper .swiper-slide a .bottomWrap .nameWrap .gameType{width: 4.88rem;height: 3.13rem;display: flex;align-items: center;justify-content: center;border-radius: 0.63rem;background-color: #6938EF;}
.hero-panel-slider .hero-banner-swiper .swiper-slide a .bottomWrap .nameWrap .gameType i{font-size: 2.5rem;width: 2.5rem;height: 2.5rem;color: #ffffff;}
.hero-panel-slider .hero-banner-swiper .swiper-slide a .bottomWrap .nameWrap p{font-size: 1.75rem;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: 3.5rem;display: flex;align-items: center;justify-content: center;border-radius: 0.63rem;background-color: #6938EF;}
.hero-panel-slider .hero-banner-swiper .swiper-slide a .bottomWrap .downloadBtn i{font-size: 2.5rem;width: 2.5rem;height: 2.5rem;color: #ffffff;}
.hero-panel-slider .hero-swiper-pagination{margin-top: 2rem;width: 100%;text-align: center;}
.hero-panel-slider .hero-swiper-pagination .swiper-pagination-bullet{width: 1rem;height: 1rem;background-color: #CDD5DF;margin-right: 1rem;opacity: 1;}
.hero-panel-slider .hero-swiper-pagination .swiper-pagination-bullet-active{background-color: #697586;}

.game-banner-listing-panel{margin-top: 4rem;padding-left: 2rem;}
.game-banner-listing-panel h2{font-size: 2rem;font-weight: 500;color: #364152;margin-bottom: 1.63rem;line-height: 2.38rem;}
.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: 23rem;height: 23rem;border-radius: 1.25rem 1.25rem 0 0;object-fit: cover;}
.game-banner-listing-panel .swiper-container .swiper-slide a .imgWrap .gameType{width: 6.25rem;height: 4.13rem;border-radius: 1.25rem 0 1.25rem 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: 2.5rem;width: 2.5rem;height: 2.5rem;color: #ffffff;}
.game-banner-listing-panel .swiper-container .swiper-slide a .bottomWrap{background-color: #ffffff;border-radius: 0 0 1.25rem 1.25rem;padding: 2rem;display: flex;column-gap: 2rem;align-items: flex-start;box-shadow: 0px 2px 4px 0px #11135B26;margin-bottom: 1.25rem;}
.game-banner-listing-panel .swiper-container .swiper-slide a .bottomWrap > img{width: 11rem;height: 11rem;border-radius: 1.25rem;display: block;}
.game-banner-listing-panel .swiper-container .swiper-slide a .bottomWrap .detailWrap{display: flex;flex-direction: column;row-gap: 1rem;width: 100%;overflow: hidden;}
.game-banner-listing-panel .swiper-container .swiper-slide a .bottomWrap .detailWrap .name{font-size: 2rem;font-weight: 500;color: #364152;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.game-banner-listing-panel .swiper-container .swiper-slide a .bottomWrap .detailWrap .ratingWrap{display: flex;align-items: center;column-gap: 1rem;}
.game-banner-listing-panel .swiper-container .swiper-slide a .bottomWrap .detailWrap .ratingWrap p{font-size: 1.75rem;color: #364152;display: flex;align-items: center;}
.game-banner-listing-panel .swiper-container .swiper-slide a .bottomWrap .detailWrap .ratingWrap p i{font-size: 1.75rem;color: #6938EF;margin-left: 0.25rem;}
.game-banner-listing-panel .swiper-container .swiper-slide a .bottomWrap .detailWrap .ratingWrap span{width: 0.5rem;height: 0.5rem;background-color: #9AA3B2;border-radius: 50%;}
.game-banner-listing-panel .swiper-container .swiper-slide a .bottomWrap .detailWrap .info{color: #364152;font-size: 1.5rem;display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}

.titleWrap{display: flex;align-items: center;column-gap: 1rem;height: 5rem;margin-bottom: 1rem;}
.titleWrap h2{font-size: 2rem;font-weight: 500;color: #364152;}
.titleWrap i{font-size: 3rem;width: 3rem;height: 3rem;color: #6938EF;}
.app-listing-panel{margin-top: 3.75rem;padding-left: 2rem;}
.app-listing-panel .swiper-container .swiper-slide a{display: flex;flex-direction: column;border-radius: 1.25rem;box-shadow: 0px 2px 4px 0px #11135B26;background-color: #ffffff;padding-bottom: 2rem;margin-bottom: 1.25rem;}
.app-listing-panel .swiper-container .swiper-slide a .topBgWrap{padding: 3rem 6rem;display: flex;align-items: center;justify-content: center;border-radius: 1.25rem 1.25rem 0 0;position: relative;}
.app-listing-panel .swiper-container .swiper-slide a .topBgWrap img{width: 11rem;height: 11rem;display: block;border-radius: 1.25rem;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: 1.25rem 1.25rem 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: 1.75rem;font-weight: 500;color: #364152;margin-bottom: 2rem;padding: 0 2rem;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.app-listing-panel .swiper-container .swiper-slide a .ratingWrap{display: flex;align-items: center;column-gap: 1rem;padding: 0 2rem;}
.app-listing-panel .swiper-container .swiper-slide a .ratingWrap p{font-size: 1.75rem;color: #364152;display: flex;align-items: center;}
.app-listing-panel .swiper-container .swiper-slide a .ratingWrap p i{font-size: 1.75rem;color: #6938EF;margin-left: 0.25rem;}
.app-listing-panel .swiper-container .swiper-slide a .ratingWrap span{width: 0.5rem;height: 0.5rem;background-color: #9AA3B2;border-radius: 50%;}

.banner-listing-panel{margin-top: 3.75rem;padding-left: 2rem;}
.banner-listing-panel .swiper-container .swiper-slide a{display: flex;flex-direction: column;border-radius: 1.25rem;box-shadow: 0px 2px 4px 0px #11135B26;background-color: #ffffff;padding-bottom: 2rem;margin-bottom: 1.25rem;}
.banner-listing-panel .swiper-container .swiper-slide a .bannerWrap{width: 100%;height: 22rem;position: relative;}
.banner-listing-panel .swiper-container .swiper-slide a .bannerWrap img{width: 100%;height: 100%;border-radius: 1.25rem 1.25rem 0 0;}
.banner-listing-panel .swiper-container .swiper-slide a .title{font-size: 2rem;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: 2rem;height: 7rem;display: flex;flex-direction: column;justify-content: space-between;padding: 0 2rem;}
.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: 1rem;}
.banner-listing-panel .swiper-container .swiper-slide a .bottomWrap .typeWrap p{font-size: 1.75rem;font-weight: 400;color: #6938EF;}
.banner-listing-panel .swiper-container .swiper-slide a .bottomWrap .typeWrap span{width: 0.5rem;height: 0.5rem;border-radius: 50%;background-color: #9B8AFB;}
.banner-listing-panel .swiper-container .swiper-slide a .bottomWrap .dateUpdate{font-size: 1.75rem;font-weight: 300;color: #364152;}

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

.column-listing-panel{margin-right: 3rem;padding-left: 2rem;}
.column-listing-panel .swiper-container .swiper-slide a{position: relative;display: flex;align-items: center;background-color: #ffffff;border-radius: 1.25rem;box-shadow: 0px 2px 4px 0px #11135B26;padding: 2rem;margin-bottom: 1rem;}
.column-listing-panel .swiper-container .swiper-slide a .rankNo{position: absolute;top: 0;left: 0;width: 6.25rem;height: 4rem;display: flex;align-items: center;justify-content: center;background: linear-gradient(90deg, #9B8AFB 0%, #6938EF 100%);font-size: 2.5rem;color: #ffffff;font-weight: 900;border-radius: 1.25rem 0 1.25rem 0;}
.column-listing-panel .swiper-container .swiper-slide a > img{width: 11rem;height: 11rem;border-radius: 1.25rem;margin-right: 2rem;}
.column-listing-panel .swiper-container .swiper-slide a .infoWrap{display: flex;flex-direction: column;row-gap: 1rem;width: 100%;overflow: hidden;}
.column-listing-panel .swiper-container .swiper-slide a .infoWrap .name{font-size: 2.5rem;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: 1rem;}
.column-listing-panel .swiper-container .swiper-slide a .infoWrap .ratingWrap .rating{display: flex;align-items: center;font-size: 2.5rem;font-weight: 500;color: #6938EF;}
.column-listing-panel .swiper-container .swiper-slide a .infoWrap .ratingWrap .rating i{font-size: 2rem;height: 2rem;width: 2rem;}
.column-listing-panel .swiper-container .swiper-slide a .infoWrap .ratingWrap span{width: 0.5rem;height: 0.5rem;border-radius: 50%;background-color: #8A9BFB;}
.column-listing-panel .swiper-container .swiper-slide a .infoWrap .ratingWrap .comment{font-size: 2rem;font-weight: 400;color: #6938EF;}
.column-listing-panel .swiper-container .swiper-slide a .infoWrap .categoryList{display: flex;align-items: center;column-gap: 1rem;}
.column-listing-panel .swiper-container .swiper-slide a .infoWrap .categoryList p{font-size: 1.5rem;color: #364152;}
.column-listing-panel .swiper-container .swiper-slide a .infoWrap .categoryList span{width: 0.5rem;height: 0.5rem;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%); }

.error-page{margin-top: 19rem;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 0 6rem;}
.error-page > img{width: 30rem;height: auto;display: block;}
.error-page > h2{margin-top: 4.5rem;font-size: 3rem;font-weight: 600;color: #364152;margin-bottom: 3rem;}
.error-page > p{font-size: 1.75rem;font-weight: 500;color: #364152;line-height: 2rem;}
.error-page > a{text-decoration: none;margin-top: 13.5rem;width: 100%;height: 6.25rem;display: flex;align-items: center;justify-content: center;border-radius: 1.25rem;background-color: #6938EF;font-size: 2rem;font-weight: 500;color: #ffffff;margin-bottom: 12.75rem;}

.search-popup{position: fixed;z-index: 999;width: 100%;height: 100vh;background-color: #ffffff;top: 0;left: 0;display: none;}
.search-popup.show{display: block;}
.search-bar-top{display: flex;column-gap: 2rem;align-items: center;height: 9rem;width: 100%;background-color: #6938EF;padding: 0 2rem;}
.search-bar-top i{font-size: 3rem;color: #ffffff;}
.search-bar-top .input-wrapper{position: relative;}
.search-bar-top .input-wrapper i{position: absolute;font-size: 3rem;right: 2rem;top: 50%;transform: translateY(-50%);color: #697586;}
.search-bar-top input{width: 39.75rem;height: 5rem;border-radius: 1rem;background-color: #ffffff;padding: 1.25rem 5rem 1.25rem 2rem;font-size: 2rem;color: #364152;border: none;outline: none;}
.search-bar-top input::placeholder{color: #9AA3B2;}
.search-result{padding: 3rem 2rem 4rem;overflow-y: scroll; max-height: calc(100vh - 9rem);display: none;}
.search-result.show{display: block;}
.search-result .suggest-list{display: flex;align-items: center;column-gap: 2rem;margin-bottom: 3rem;}
.search-result .suggest-list i{color: #9AA3B2;font-size: 3rem;}
.search-result .suggest-list p{font-size: 2rem;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: 3rem;}
.search-result .with-image a{display: flex;column-gap: 2rem;}
.search-result .with-image a img{width: 9rem;height: 9rem;border-radius: 1.25rem;}
.search-result .with-image a .detailWrap{display: flex;flex-direction: column;overflow: hidden;}
.search-result .with-image a .detailWrap h4{font-size: 2rem;color: #364152;margin-bottom: 1rem;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: 1rem;}
.search-result .with-image a .detailWrap .tag-list p{font-size: 1.5rem;color: #364152;}
.search-result .with-image a .detailWrap .tag-list span{width: 0.5rem;height: 0.5rem;border-radius: 50%;background-color: #9AA3B2;}
.search-result .with-image a .detailWrap .rating{display: flex;align-items: flex-end;column-gap: 0.25rem;font-size: 2rem;color: #364152;margin-top: 1rem;}
.search-result .with-image a .detailWrap .rating i{font-size: 2rem;color: #6938EF;}
.search-result .showMore{margin-top: 4rem;text-align: center;width: 100%;color: #6938EF;font-size: 2rem;display: block;text-decoration: underline;}

.column-listing-panel .swiper-container .swiper-slide a .infoWrap .ratingWrap .rating {
    display: block;
    align-items: center;
    font-size: 2.5rem;
    font-weight: 500;
    color: #6938EF;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

header .navbar {
    margin: 0 -2rem;
    padding: 0 2rem;
    column-gap: 2rem;
}
header .navbar a{
    margin: 0 1rem;
    column-gap: 0.6rem;
    flex-shrink: 0;
}
header .navbar a span{
    display: block;
    flex-shrink: 0;
    color: #697586;
}

header .navbar a.active {
    width: fit-content;
    padding: 0 1.5rem;
    margin: 0;
}

header .navbar a.active span{
    color: #6938EF;
}