.ranking-page-content{background-color: #f2f2f2;padding-bottom: 36px;}
.ranking-page-content .ranking-top{width: 100%;max-height: 236px;position: absolute;top: 95px;z-index: 0;height: 236px;object-fit: cover;}
.ranking-page-content .rank-top-panel{display: flex;margin-top: 12px;align-items: flex-end;position: relative;}
.ranking-page-content .rank-top-panel .rank-top-star{position: absolute;left: 0;opacity: 0.75;mix-blend-mode: color-dodge;width: 408px;height: auto;display: block;top: -37px; left: -85px;z-index: 1;}
.ranking-page-content .rank-top-panel .rank-top-joystick{margin-left: 32px;width: 58px;height: 100%;display: block;position: relative;z-index: 1;}
.ranking-page-content .rank-top-panel .topTitleWrap{margin-left: 37px;position: relative;z-index: 1;padding-right: 36px;}
.ranking-page-content .rank-top-panel .topTitleWrap .rank-title{width: 179px;height: auto;display: block;}
.ranking-page-content .rank-top-panel .topTitleWrap .titleUniverse{position: absolute;width: 37px;height: auto;display: block;right: -37px; top: 50%; transform: translateY(-50%);}
.ranking-page-content .rank-top-panel .rank-top-universe{position: absolute;width: 65px;height: auto;display: block;left: 65%; top: 0;z-index: 1;}
.ranking-page-content .rank-top-panel .rank-top-star2{position: absolute;left: 0;opacity: 0.75;mix-blend-mode: color-dodge;width: 408px;height: auto;display: block;top: -80px; left: 60%;}

.ranking-page-content .ranking-panel{position: relative;z-index: 2;margin-top: 14px;}
.ranking-page-content .ranking-panel .top-tab-panel{background-color: #ffffff;border-radius: 6px;padding: 22px 20px 20px;box-shadow: 0px 2px 2px 0px rgba(100, 91, 227, 0.2);position: relative;}
.ranking-page-content .ranking-panel .top-tab-panel .topTabWrap{display: flex;justify-content: center;align-items: center;position: relative;column-gap: 43px;padding-bottom: 14px;border-bottom: 1px solid #f0f0f0;}
.ranking-page-content .ranking-panel .top-tab-panel .topTabWrap .tabTitleWrap{font-size: 20px;color: #666666;position: relative;padding: 0 15px 0 20px;cursor: pointer;transition: .2s all;}
.ranking-page-content .ranking-panel .top-tab-panel .topTabWrap .tabTitleWrap a{color: #666;}
.ranking-page-content .ranking-panel .top-tab-panel .topTabWrap .tabTitleWrap::before{position: absolute;content: "";width: 15px;height: 30px;background: url(../images/ranking/rankLeft.png);background-size: contain;background-repeat: no-repeat;left: 0;}
.ranking-page-content .ranking-panel .top-tab-panel .topTabWrap .tabTitleWrap::after{position: absolute;content: "";width: 15px;height: 30px;background: url(../images/ranking/rankRight.png);background-size: contain;background-repeat: no-repeat;}
.ranking-page-content .ranking-panel .top-tab-panel .topTabWrap .tabTitleWrap.active a{font-size: 22px;color: #FFB23F;font-weight: bold;}
.ranking-page-content .ranking-panel .top-tab-panel .topTabWrap .tabTitleWrap.active::before{background: url(../images/ranking/rankActiveLeft.png);}
.ranking-page-content .ranking-panel .top-tab-panel .topTabWrap .tabTitleWrap.active::after{background: url(../images/ranking/rankActiveRight.png);}
.ranking-page-content .ranking-panel .top-tab-panel .topTabWrap > p{position: absolute;right: 0px;font-size: 12px;color: #CCCCCC;}
.ranking-page-content .ranking-panel .top-tab-panel .topTabWrap .tabTitleWrap .activeLine{display: none;}
.ranking-page-content .ranking-panel .top-tab-panel .topTabWrap .tabTitleWrap.active .activeLine{display: block;width: 100%;height: 2px;position: absolute; bottom: -15px; background-color: #ffe003; left: 50%; transform: translateX(-50%);}
.ranking-page-content .ranking-panel .top-tab-panel .rank-top-human{position: absolute; top: -65px; left: 41%; transform: translateX(-50%); z-index: -1;}
.ranking-page-content .ranking-panel .top-tab-panel .rank-top-controller{position: absolute; top: -70px; right: 0; z-index: -1;}

.ranking-page-content .ranking-panel .top-tab-panel .categoryTabWrap {display: flex;align-items: center;column-gap: 20px;row-gap: 15px;cursor: pointer;margin-top: 17px;flex-wrap: wrap;}
.ranking-page-content .ranking-panel .top-tab-panel .categoryTabWrap .categoryTab{border-radius: 3px;background-color: #f4f4f4;height: 36px;padding: 0 11px;text-align: center;line-height: 36px;color: #666666;font-size: 12px;min-width: 108px;}
.ranking-page-content .ranking-panel .top-tab-panel .categoryTabWrap .categoryTab.active{font-weight: bold;color: #333333;background: linear-gradient( 42deg, rgb(255,222,202) 0%, rgb(255,244,238) 100%);}
.ranking-page-content .ranking-panel .top-tab-panel .categoryTabWrap.hidden{display: none;}
.ranking-panel .rankContent{display: none;flex-wrap: wrap;row-gap: 20px;}
.ranking-panel .rankContent.active{display: flex;}
.ranking-page-content .ranking-panel .rankContentPanel{margin-top: 20px;display: flex;column-gap: 20px;}
.ranking-page-content .ranking-panel .rankContentPanel .rankContentWrap{flex: 0 0 883px;max-width: 883px;}
.ranking-page-content .ranking-panel .rankContentPanel .rankContentWrap .rankingWrap{background-color: #ffffff;border-radius: 6px;padding: 20px;display: flex;align-items: center;width: 100%;}
.ranking-page-content .ranking-panel .rankContentPanel .rankContentWrap .rankingWrap .imgWrap{position: relative;margin-right: 20px;}
.ranking-page-content .ranking-panel .rankContentPanel .rankContentWrap .rankingWrap .imgWrap > img{width: 116px;height: 116px;border-radius: 20px;}
.ranking-page-content .ranking-panel .rankContentPanel .rankContentWrap .rankingWrap .imgWrap .rank-icon{position: absolute;top: -25px;left: -20px;}
.ranking-page-content .ranking-panel .rankContentPanel .rankContentWrap .rankingWrap .imgWrap .rank-icon > img{width: 35px;height: auto;}
.ranking-page-content .ranking-panel .rankContentPanel .rankContentWrap .rankingWrap .imgWrap .rank-icon div{display: flex ; flex-direction: column; justify-content: center; align-items: center; font-size: 12px; color: #ffffff; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);} 
.ranking-page-content .ranking-panel .rankContentPanel .rankContentWrap .rankingWrap .detailWrap{display: flex;flex-direction: column;padding-right: 15px;overflow: hidden;}
.ranking-page-content .ranking-panel .rankContentPanel .rankContentWrap .rankingWrap .detailWrap .name{font-size: 20px;color: #000000;margin-bottom: 6px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.ranking-page-content .ranking-panel .rankContentPanel .rankContentWrap .rankingWrap .detailWrap .innerDetailWrap{display: flex;align-items: center;font-size: 14px;color: #999999;margin-bottom: 6px;column-gap: 12px;}
.ranking-page-content .ranking-panel .rankContentPanel .rankContentWrap .rankingWrap .detailWrap .innerDetailWrap p{position: relative;}
.ranking-page-content .ranking-panel .rankContentPanel .rankContentWrap .rankingWrap .detailWrap .innerDetailWrap p:first-child::after{position: absolute;content: "";width: 1px;height: 80%;background-color: #999999;right: -6px;top: 50%;transform: translateY(-50%);}
.ranking-page-content .ranking-panel .rankContentPanel .rankContentWrap .rankingWrap .detailWrap .content{font-size: 14px;color: #666666;margin-bottom: 12px;display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.ranking-page-content .ranking-panel .rankContentPanel .rankContentWrap .rankingWrap .detailWrap .categoryList{display: flex;align-items: center;column-gap: 11px;row-gap: 11px;flex-wrap: wrap;}
.ranking-page-content .ranking-panel .rankContentPanel .rankContentWrap .rankingWrap .detailWrap .categoryList a{background-color: #9999991A;border-radius: 4px;padding: 0 12px;text-align: center;height: 24px;line-height: 24px;font-size: 14px;color: #999999;}
.ranking-page-content .ranking-panel .rankContentPanel .rankContentWrap .rankingWrap .viewBtn{margin-left: auto;flex: 0 0 72px;height: 28px;display: flex;align-items: center;justify-content: center;background-color: transparent;border: 1px solid #42EAB2;font-size: 14px;color: #42EAB2;border-radius: 24px;}
.ranking-page-content .ranking-panel .rankContentPanel .rankContentWrap .rankingWrap .viewBtn:hover{background-color: #42EAB2;color: #ffffff;}

.ranking-page-content .ranking-panel .rankContentPanel .screenshot-right-panel{flex: 0 0 298px;max-width: 298px;background-color: #ffffff;border-radius: 6px;padding: 16px 0 40px;height: max-content;}
.ranking-page-content .ranking-panel .rankContentPanel .screenshot-right-panel h2{color: #666666;font-size: 20px;padding-left: 13px;position: relative;margin-bottom: 18px;font-weight: normal;}
.ranking-page-content .ranking-panel .rankContentPanel .screenshot-right-panel h2::before{position: absolute;content: "";background-color: #FFE003;border-radius: 1px;width: 3px;height: 80%;left: 0;top: 50%;transform: translateY(-50%);}
.ranking-page-content .ranking-panel .rankContentPanel .screenshot-right-panel .screenshot-list{display: flex;flex-direction: column;row-gap: 20px;}
.ranking-page-content .ranking-panel .rankContentPanel .screenshot-right-panel .screenshot-list a img{width: 100%;height: auto;border-radius: 6px;}

@media (min-width: 751px) and (max-width: 1199px) {
    .ranking-page-content .ranking-panel .rankContentPanel .rankContentWrap{flex: 0 0 100%;max-width: 100%;}
    .ranking-page-content .ranking-panel .rankContentPanel .screenshot-right-panel{display: none;}
    .ranking-page-content .rank-top-panel .rank-top-star2{width: 260px;}
}