@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.ranking-page {margin-top: 9rem;}
.ranking-page > .container{display: flex;justify-content: space-between;}
.filter-bar-panel{display: flex;flex-direction: column;flex: 0 0 18rem;max-width: 18rem;height: max-content;}
.filter-bar-panel .breadcrumb .container{margin-top: 0;}
.filter-bar-panel .breadcrumb a, .filter-bar-panel .breadcrumb .tab-label p{font-size: 1rem;}

.filter-bar-panel .filter-bar{display: flex;flex-direction: column;}
.filter-bar-panel .filter-bar .filterGameApp{display: flex;flex-direction: column;margin-top: 1.5rem;border-right: 1px solid #CDD5DF;padding-right: 3rem;}
.filter-bar-panel .filter-bar .filterGameApp h2{font-size: 0.875rem;font-weight: 500;color: #697586;margin-bottom: 1rem;}
.filter-bar-panel .filter-bar .filterGameApp .filter-btn{display: flex;align-items: center;column-gap: 1rem;width: 100%;height: 3rem;padding: 0 1rem;cursor: pointer;}
.filter-bar-panel .filter-bar .filterGameApp .filter-btn i{font-size: 2rem;color: #697586;}
.filter-bar-panel .filter-bar .filterGameApp .filter-btn p{font-size: 1rem;color: #697586;line-height: 1.25rem;}
.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 .tab-bar{display: flex;flex-direction: column;padding-top: 2rem;border-right: 1px solid #CDD5DF;padding-right: 3rem;}
.filter-bar-panel .tab-bar h2{font-size: 0.875rem;font-weight: 500;color: #697586;margin-bottom: 1rem;}
.filter-bar-panel .tab-bar .tab-item{border-radius: 0.63rem;font-size: 0.875rem;color: #697586;padding: 0.875rem 1rem;white-space: nowrap;cursor: pointer;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;line-height: 1rem;}
.filter-bar-panel .tab-bar .tab-item.active{background-color: #EBE9FE;color: #6938EF;}
.filter-bar-panel .tab-bar .tab-item a {color: #364152;}

.filter-bar-panel .dropdownWrap{padding-top: 2rem;padding-right: 3rem;border-right: 1px solid #CDD5DF;padding-bottom: 3.25rem;}
.filter-bar-panel .dropdownWrap h2{font-size: 0.875rem;font-weight: 500;color: #697586;margin-bottom: 1rem;}
.filter-bar-panel .category-dropdown{width: 100%;height: 2.5rem;border-radius: 0.63rem;border: 1px solid #9AA3B2;padding: 0 0.75rem 0 1rem;display: flex;align-items: center;justify-content: space-between;position: relative;cursor: pointer;}
.filter-bar-panel .category-dropdown > p{font-size: 0.875rem;color: #697586;position: relative;}
.filter-bar-panel .category-dropdown > i {font-size: 1.5rem;color: #9AA3B2;transition: .3s all;}
.filter-bar-panel .category-dropdown .category-dropdown-list{position: absolute;bottom: 2.5rem; right: 0;z-index: 1;display: none;padding-right: 0.25rem;width: 100%;background-color: #ffffff;border-radius: 0.63rem;box-shadow: 0px 0px 8px 0px #3E1C961A;padding-top: 0.5rem;}
.filter-bar-panel .category-dropdown .category-dropdown-list .scrollArea{width: 100%;height: max-content;max-height: 33rem;overflow-y: scroll;position: relative;}
.filter-bar-panel .category-dropdown .category-dropdown-list .scrollArea::-webkit-scrollbar{width: 0.5rem;border-radius: 2rem;}
.filter-bar-panel .category-dropdown .category-dropdown-list .scrollArea::-webkit-scrollbar-thumb{width: 0.5rem;background-color: #CDD5DF;border-radius: 2rem;}
.filter-bar-panel .category-dropdown .category-dropdown-list .category-item{width: 100%;height: 2.5rem;padding: 0 1rem;display: flex;align-items: center;font-size: 0.875rem;color: #697586;cursor: pointer;}
.filter-bar-panel .category-dropdown .category-dropdown-list .category-item.active{font-weight: 600;color: #6938EF;}
.filter-bar-panel .category-dropdown.open .category-dropdown-list{display: block;}
.filter-bar-panel .category-dropdown.open{border-color: #6938EF;color: #9AA3B2;position: relative;}
.filter-bar-panel .category-dropdown.open span{position: absolute;top: 0.2rem;left: -0.5rem;color: #364152;height: 70%;overflow: hidden;animation: blink 1s step-end infinite;}
.filter-bar-panel .category-dropdown.open > i{transform: rotate(180deg);color: #6938EF;transition: .3s all;}

.tab-content-group{margin-top: 3.25rem;padding-left: 1.5rem;flex: 0 0 82rem;max-width: 82rem;}
.tab-content-group .tab-content{flex-direction: column;position: relative;}
.tab-content-group .tab-content[data-tab-content="downloads"]{padding-left: 5.75rem;}
.tab-content-group .tab-content .item-list{display: flex;flex-wrap: wrap;row-gap: 1.5rem;column-gap: 1rem;}
.tab-content-group .tab-content .content-item{display: flex;flex-direction: column;border-radius: 0.63rem;box-shadow: 0px 2px 4px 0px #11135B26;background-color: #ffffff;padding-bottom: 1rem;flex: 0 0 11.625rem;max-width: 11.625rem;}
.tab-content-group .tab-content .content-item .topBgWrap{padding: 1.5rem 0;display: flex;align-items: center;justify-content: center;border-radius: 0.63rem 0.63rem 0 0;position: relative;}
.tab-content-group .tab-content .content-item .topBgWrap img{width: 5.5rem;height: 5.5rem;display: block;border-radius: 0.63rem;object-fit: cover;position: relative;z-index: 2;}
.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: 0.63rem 0.63rem 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: 1rem;font-weight: 500;color: #364152;margin-bottom: 1rem;padding: 0 1rem;display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;height: 3rem;}
.tab-content-group .tab-content .content-item .ratingWrap{display: flex;align-items: center;column-gap: 0.5rem;padding: 0 1rem;}
.tab-content-group .tab-content .content-item .ratingWrap p{font-size: 0.875rem;color: #364152;display: flex;align-items: center;}
.tab-content-group .tab-content .content-item .ratingWrap p i{font-size: 0.75rem;color: #6938EF;margin-left: 0.125rem;}
.tab-content-group .tab-content .content-item .ratingWrap span{width: 0.25rem;height: 0.25rem;background-color: #9AA3B2;border-radius: 50%;}

.tab-content-group .tab-content[data-tab-content="ranking"]{display: flex;flex-direction: column;row-gap: 0.5rem;}
.tab-content-group .tab-content[data-tab-content="ranking"] a {display: flex;align-items: center;column-gap: 2rem;}
.tab-content-group .tab-content[data-tab-content="ranking"] a .rankNo{width: 100%;text-align: center;font-weight: 900;font-size: 3rem;font-family: "orbitron", sans-serif;width: 5rem;height: 3.75rem;flex: 0 0 5rem;max-width: 5rem;color: #BDB4FE;}
.tab-content-group .tab-content[data-tab-content="ranking"] a.first .rankNo{font-size: 4rem;background: linear-gradient(360deg, #EECB6D 0%, #FFAE2B 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;text-shadow: 0px 2px 2px #eecb6d29}
.tab-content-group .tab-content[data-tab-content="ranking"] a.second .rankNo{background: linear-gradient(360deg, #CACACA 0%, #767676 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;text-shadow: 0px 2px 2px #CACACA29}
.tab-content-group .tab-content[data-tab-content="ranking"] a.third .rankNo{background: linear-gradient(0deg, #F2AF6D 0%, #9C5527 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;text-shadow: 0px 2px 2px #F2AF6D29}.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 {padding: 1.5rem 2rem;border-radius: 1rem;box-shadow: 0px 2px 4px 0px #11135B26;background-color: #ffffff;width: 100%;}
.tab-content-group .tab-content[data-tab-content="ranking"] a .content-card img{width: 10rem;height: 10rem;border-radius: 1rem;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;max-width: 35rem;height: 10rem;}
.tab-content-group .tab-content[data-tab-content="ranking"] a .content-card .detailWrap h4{font-size: 2rem;font-weight: 500;color: #364152;overflow: hidden;text-overflow: ellipsis;width: 100%;white-space: nowrap;min-height: 24px;}
.tab-content-group .tab-content[data-tab-content="ranking"] a .content-card .detailWrap .versionSizeWrap{display: flex;align-items: center;column-gap: 1rem;flex-wrap: wrap;}
.tab-content-group .tab-content[data-tab-content="ranking"] a .content-card .detailWrap .versionSizeWrap p{font-size: 0.875rem;color: #364152;}
.tab-content-group .tab-content[data-tab-content="ranking"] a .content-card .detailWrap .category-list{margin-top: .3rem;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: 9rem;height: 2rem;display: flex;align-items: center;justify-content: center;border: 1px solid #9AA3B2;border-radius: 0.31rem;color: #364152;font-size: 0.75rem;}
.tab-content-group .tab-content[data-tab-content="ranking"] a .content-card .ratingWrap{margin-left: auto;display: flex;flex-direction: column;}
.tab-content-group .tab-content[data-tab-content="ranking"] a .content-card .ratingWrap .rating{display: flex;align-items: center;column-gap: 0.25rem;font-size: 2.25rem;font-weight: 600;color: #364152;justify-content: flex-end;}
.tab-content-group .tab-content[data-tab-content="ranking"] a .content-card .ratingWrap .rating i{font-size: 1.5rem;color: #6938EF;}
.tab-content-group .tab-content[data-tab-content="ranking"] a .content-card .ratingWrap .comment{font-size: 0.875rem;color: #364152;text-align: right;white-space: nowrap;margin-top: 0.25rem;}
.tab-content-group .tab-content[data-tab-content="ranking"] a .content{font-size: 0.875rem;color: #364152;margin-top: 0.5rem;display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.tab-content-group .tab-content[data-tab-content="ranking"] a.first .content-card{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 .content-card{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 .content-card{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 .buttonWrap{margin-top: 1.25rem;display: flex;flex-direction: column;row-gap: 0.5rem;}
.tab-content-group .tab-content[data-tab-content="ranking"] a .buttonWrap > div{width: 100%;height: 2.5rem;border-radius: 0.31rem;display: flex;align-items: center;justify-content: center;column-gap: 0.5rem;min-width: 10.5rem;}
.tab-content-group .tab-content[data-tab-content="ranking"] a .viewNow{background-color: transparent;border:1px solid #6938EF;}
.tab-content-group .tab-content[data-tab-content="ranking"] a .viewNow p{font-size: 1rem;font-weight: 500;color: #6938EF;}
.tab-content-group .tab-content[data-tab-content="ranking"] a .viewNow i{font-size: 1.5rem;color: #6938EF;}
.tab-content-group .tab-content[data-tab-content="ranking"] a .downloadBtn{background-color: #6938EF;box-shadow: 0px 4px 8px 0px #483F6B26; }
.tab-content-group .tab-content[data-tab-content="ranking"] a .downloadBtn p{font-size: 1rem;font-weight: 500;color: #ffffff;}
.tab-content-group .tab-content[data-tab-content="ranking"] a .downloadBtn i{font-size: 1.5rem;color: #ffffff;}


.tab-content-group .pagination{margin-top: 3rem;display: flex;justify-content: center;align-items: center;column-gap: 1rem;position: relative;z-index: 1;}
.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.25rem;border: 1px solid #CDD5DF;min-width: 2.5rem;min-height: 2.5rem;padding: 0 1rem;display: flex;align-items: center;justify-content: center;font-size: 1rem;color: #364152;column-gap: 0.5rem;line-height: 1.25rem;cursor: pointer;}
.tab-content-group .pagination button:disabled{opacity: 0.5;cursor: no-drop;}
.tab-content-group .pagination button i{font-size: 1rem;}
.tab-content-group .pagination button.active{background-color: #EEEDFC;border-color: #6938EF;}

.bottomAction{position: absolute;bottom: 0;display: flex;justify-content: space-between;width: calc(100% - 5.75rem);}
.bottomAction > p{font-size: 1rem;color: #364152;}
.bottomAction .goPage{display: flex;align-items: center;column-gap: 0.5rem;position: relative;z-index: 1;}
.bottomAction .goPage > p{font-size: 0.875rem;color: #364152;}
.bottomAction .goPage input{width: 3.125rem;height: 2.5rem;border-radius: 0.25rem;background-color: #ffffff;border: 1px solid #CDD5DF;text-align: center;font-size: 1rem;}
.bottomAction .goPage a{margin-left: 0.5rem;font-weight: 700;font-size: 0.875rem;color: #364152;padding-right: 0.5rem;}
.bottomAction .goPage input::-webkit-inner-spin-button, .bottomAction .goPage input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.table-content{border-spacing: 0 8px;width: 100%;}
.table-content tr th{font-weight: 500;font-size: 0.875rem;color: #697586;}
.table-content tbody > tr td {background-color: #ffffff;text-align: center;color: #364152;font-size: 0.875rem;padding: 1rem 1.5rem;border-top: 1px solid #E3E8EF;border-bottom: 1px solid #E3E8EF;cursor: pointer;}
.table-content tbody > tr td:first-child{display: flex;align-items: center;column-gap: 1.5rem;border-left: 1px solid #E3E8EF;border-radius: 0.63rem;}
.table-content tbody > tr td:last-child{border-right: 1px solid #E3E8EF;border-radius: 0.63rem;}
.table-content tbody > tr td > img{width: 4.5rem;height: 4.5rem;border-radius: 0.63rem;}
.table-content tbody > tr td .nameWrap{display: flex;flex-direction: column;row-gap: 0.5rem;align-items: flex-start;}
.table-content tbody > tr td .nameWrap p{font-size: 1rem;font-weight: 500;color: #364152;}
.table-content tbody > tr td .nameWrap span{font-size: 0.875rem;color: #364152;}
.table-content tbody > tr td .rating-score{display: none;}
.table-content tbody > tr td .starWrap .stars i{color: #6938EF;font-size: 1.25rem;}
.table-content tbody > tr td .starWrap .stars i.empty{color: #CDD5DF;}