@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.filter-bar-panel{padding: 2rem 0 1rem;display: flex;flex-direction: column;row-gap: 2rem;background-color: #ffffff;}
.filter-bar-panel .filter-bar{display: flex;align-items: center;justify-content: space-between;padding: 0 2rem;}
.filter-bar-panel .filter-bar .filterGameApp{display: flex;align-items: center;column-gap: 4rem;}
.filter-bar-panel .filter-bar .filterGameApp .filter-btn{display: flex;align-items: center;column-gap: 1rem;}
.filter-bar-panel .filter-bar .filterGameApp .filter-btn i{font-size: 3rem;color: #697586;}
.filter-bar-panel .filter-bar .filterGameApp .filter-btn p{font-size: 1.75rem;color: #697586;line-height: 2rem;}
.filter-bar-panel .filter-bar .filterGameApp .filter-btn.active i{color: #6938EF;}
.filter-bar-panel .filter-bar .filterGameApp .filter-btn.active p{color: #6938EF;font-weight: 600;}
.filter-bar-panel .filter-bar .category-dropdown{width: 15rem;height: 4rem;border-radius: 0.63rem;border: 1px solid #9AA3B2;padding: 0 1rem 0 2rem;display: flex;align-items: center;justify-content: space-between;position: relative;}
.filter-bar-panel .filter-bar .category-dropdown > p{font-size: 1.75rem;color: #697586;position: relative;}
.filter-bar-panel .filter-bar .category-dropdown > i {font-size: 3rem;color: #9AA3B2;transition: .3s all;}
.filter-bar-panel .filter-bar .category-dropdown .category-dropdown-list{position: absolute;top: 4rem; right: 0;width: 100%;height: max-content;max-height: 52.5rem;overflow-y: scroll;background-color: #ffffff;border-radius: 0.63rem;box-shadow: 0px 0px 8px 0px #3E1C961A;z-index: 1;display: none;}
.filter-bar-panel .filter-bar .category-dropdown .category-dropdown-list .category-item{width: 100%;height: 5rem;padding: 0 2rem;display: flex;align-items: center;font-size: 1.75rem;color: #697586;}
.filter-bar-panel .filter-bar .category-dropdown .category-dropdown-list .category-item.active{font-weight: 600;color: #6938EF;}
.filter-bar-panel .filter-bar .category-dropdown.open .category-dropdown-list{display: block;}
.filter-bar-panel .filter-bar .category-dropdown.open{border-color: #6938EF;color: #9AA3B2;position: relative;}
.filter-bar-panel .filter-bar .category-dropdown.open span{position: absolute;top: 0.38rem;left: -0.5rem;color: #364152;height: 70%;overflow: hidden;animation: blink 1s step-end infinite;}
.filter-bar-panel .filter-bar .category-dropdown.open > i{transform: rotate(180deg);color: #6938EF;transition: .3s all;}

.filter-bar-panel .tab-bar{padding-left: 2rem;display: flex;align-items: center;overflow-x: scroll;}
.filter-bar-panel .tab-bar::-webkit-scrollbar{height: 0;}
.filter-bar-panel .tab-bar .tab-item{height: 4rem;border-radius: 0.63rem;background-color: #F8FAFC;font-size: 1.75rem;color: #697586;display: flex;align-items: center;justify-content: center;padding: 0 1.5rem;white-space: nowrap;margin-right: 1rem;}
.filter-bar-panel .tab-bar .tab-item a{color: #364152;}
.filter-bar-panel .tab-bar .tab-item.active{background-color: #EBE9FE;color: #6938EF;}

.tab-content-group{margin-top: 1.5rem;padding: 0 2rem;}
.tab-content-group .tab-content{flex-direction: column;}
.tab-content-group .tab-content .item-list{display: flex;flex-wrap: wrap;row-gap: 2rem;column-gap: 1rem;}
.tab-content-group .tab-content .content-item{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;flex: 0 0 15.75rem;max-width: 15.75rem;}
.tab-content-group .tab-content .content-item .topBgWrap{padding: 2rem 2.5rem;display: flex;align-items: center;justify-content: center;border-radius: 1.25rem 1.25rem 0 0;position: relative;}
.tab-content-group .tab-content .content-item .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; }
.tab-content-group .tab-content .content-item .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%);}
.tab-content-group .tab-content .content-item .name{font-size: 1.75rem;font-weight: 500;color: #364152;margin-bottom: 1rem;padding: 0 2rem;display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;height: 4.75rem;}
.tab-content-group .tab-content .content-item .ratingWrap{display: flex;align-items: center;column-gap: 1rem;padding: 0 2rem;}
.tab-content-group .tab-content .content-item .ratingWrap p{font-size: 1.75rem;color: #364152;display: flex;align-items: center;}
.tab-content-group .tab-content .content-item .ratingWrap p i{font-size: 1.75rem;color: #6938EF;margin-left: 0.25rem;}
.tab-content-group .tab-content .content-item .ratingWrap span{width: 0.5rem;height: 0.5rem;background-color: #9AA3B2;border-radius: 50%;}

.tab-content-group .tab-content[data-tab-content="ranking"]{display: flex;flex-direction: column;row-gap: 1rem;}
.tab-content-group .tab-content[data-tab-content="ranking"] a {position: relative;display: flex;flex-direction: column;row-gap: 2.25rem;padding: 2rem;border-radius: 1.25rem;box-shadow: 0px 2px 4px 0px #11135B26;background-color: #ffffff;width: 100%;}
.tab-content-group .tab-content[data-tab-content="ranking"] a .rankNo{position: absolute;top: 0;left: 0;z-index: 1;width: 6.25rem;height: 4rem;display: flex;align-items: center;justify-content: center;font-size: 2.5rem;font-weight: 900;color: #ffffff;background-color: #BDB4FE;border-radius: 1.25rem 0 1.25rem 0;}
.tab-content-group .tab-content[data-tab-content="ranking"] a .content-card{display: flex;align-items: flex-start;}
.tab-content-group .tab-content[data-tab-content="ranking"] a .content-card img{width: 11rem;height: 11rem;border-radius: 1.25rem;margin-right: 2rem;}
.tab-content-group .tab-content[data-tab-content="ranking"] a .content-card .detailWrap{display: flex;flex-direction: column;overflow: hidden;width: 100%;margin-right: 2rem;}
.tab-content-group .tab-content[data-tab-content="ranking"] a .content-card .detailWrap h4{font-size: 2.5rem;font-weight: 500;color: #364152;margin-bottom: 0.5rem;overflow: hidden;text-overflow: ellipsis;width: 100%;white-space: nowrap;}
.tab-content-group .tab-content[data-tab-content="ranking"] a .content-card .detailWrap .versionSizeWrap{display: flex;align-items: center;column-gap: 2rem;flex-wrap: wrap;}
.tab-content-group .tab-content[data-tab-content="ranking"] a .content-card .detailWrap .versionSizeWrap p{font-size: 1.5rem;color: #364152;}
.tab-content-group .tab-content[data-tab-content="ranking"] a .content-card .detailWrap .category-list{margin-top: 1.2rem;display: flex;flex-wrap: wrap;column-gap: 0.5rem;width: 100%;row-gap: 0.5rem;}
.tab-content-group .tab-content[data-tab-content="ranking"] a .content-card .detailWrap .category-list p{width: 12rem;height: 3rem;display: flex;align-items: center;justify-content: center;border: 1px solid #9AA3B2;border-radius: 0.63rem;color: #364152;font-size: 1.5rem;}
.tab-content-group .tab-content[data-tab-content="ranking"] a .content-card .ratingWrap{margin-left: auto;display: flex;flex-direction: column;row-gap: 0.5rem;}
.tab-content-group .tab-content[data-tab-content="ranking"] a .content-card .ratingWrap .rating{display: flex;align-items: center;column-gap: 0.5rem;font-size: 3rem;font-weight: 500;color: #364152;}
.tab-content-group .tab-content[data-tab-content="ranking"] a .content-card .ratingWrap .rating i{font-size: 3rem;color: #6938EF;}
.tab-content-group .tab-content[data-tab-content="ranking"] a .content-card .ratingWrap .comment{font-size: 1.5rem;color: #364152;text-align: right;white-space: nowrap;}
.tab-content-group .tab-content[data-tab-content="ranking"] a > p.content{font-size: 1.5rem;color: #364152;}
.tab-content-group .tab-content[data-tab-content="ranking"] 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%); }
.tab-content-group .tab-content[data-tab-content="ranking"] 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%); }
.tab-content-group .tab-content[data-tab-content="ranking"] 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%); }
.tab-content-group .tab-content[data-tab-content="ranking"] a.first .rankNo{background: linear-gradient(90deg, #FFDA75 0%, #FEB312 100%); }
.tab-content-group .tab-content[data-tab-content="ranking"] a.second .rankNo{background: linear-gradient(90deg, #DBDBDB 0%, #9B9B9B 100%); }
.tab-content-group .tab-content[data-tab-content="ranking"] a.third .rankNo{background: linear-gradient(90deg, #F2B880 0%, #9C5527 100%); }

.tab-content-group .pagination{margin-top: 4rem;display: flex;justify-content: center;align-items: center;column-gap: 1rem;}
.tab-content-group .pagination .first-page{padding: 0 .75rem;}
.tab-content-group .pagination .last-page{padding: 0 .75rem;}
.tab-content-group .pagination button{background-color: #ffffff;border-radius: 0.5rem;border: 1px solid #CDD5DF;min-width: 4rem;min-height: 4rem;padding: 0 1rem;display: flex;align-items: center;justify-content: center;font-size: 1.75rem;color: #364152;}
.tab-content-group .pagination button:disabled{opacity: 0.5;}
.tab-content-group .pagination button i{font-size: 1.5rem;}
.tab-content-group .pagination button.active{background-color: #EEEDFC;border-color: #6938EF;}