.ranking-page-content{background-color: #f2f2f2;padding-bottom: 2.14rem;position: relative;margin-top: 5px;overflow-x: hidden;}
.ranking-page-content .ranking-top{width: 100%;max-height: 17.57rem;position: absolute;top: 0;z-index: 0;height: 17.57rem; object-fit: cover;}
.ranking-page-content .breadcrumb{position: relative;z-index: 1;}
.ranking-page-content .rank-top-panel{display: flex;margin-top: 1.5rem;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: plus-lighter;width: 29.14rem;height: auto;display: block;top: -2.64rem; left: -6.07rem;z-index: 1;}
.ranking-page-content .rank-top-panel .rank-top-joystick{margin-left: 2.29rem;width: 4.14rem;height: 100%;display: block;position: relative;z-index: 1;}
.ranking-page-content .rank-top-panel .topTitleWrap{margin-left: 0.79rem;position: relative;z-index: 1;padding-right: 1.57rem;}
.ranking-page-content .rank-top-panel .topTitleWrap .rank-title{width: 15.21rem;height: auto;display: block;}
.ranking-page-content .rank-top-panel .topTitleWrap .titleUniverse{position: absolute;width: 2.64rem;height: auto;display: block;right: -2.64rem; top: 20%; transform: translateY(-50%);}
.ranking-page-content .rank-top-panel .rank-top-star2{position: absolute;left: 0;opacity: 0.75;mix-blend-mode: plus-lighter;width: 29.14rem;height: auto;display: block;top: -5.71rem; left: 60%;}

.ranking-page-content .ranking-panel{position: relative;z-index: 2;margin-top: 1.71rem;}
.ranking-page-content .ranking-panel .top-tab-panel{background-color: #ffffff;border-radius: 0.71rem;padding: 1.36rem 0;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: 2.29rem;padding-bottom: 0.93rem;border-bottom: 1px solid #f0f0f0;}
.ranking-page-content .ranking-panel .top-tab-panel .topTabWrap .tabTitleWrap{font-size: 1.86rem;color: #666666;position: relative;padding: 0 1.07rem 0 1.43rem;cursor: pointer;transition: .2s all;height: 3rem;}
.ranking-page-content .ranking-panel .top-tab-panel .topTabWrap .tabTitleWrap::before{position: absolute;content: "";width: 1.5rem;height: 3rem;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: 1.5rem;height: 3rem;background: url(../images/ranking/rankRight.png);background-size: contain;background-repeat: no-repeat;}
.ranking-page-content .ranking-panel .top-tab-panel .topTabWrap .tabTitleWrap.active{font-size: 1.86rem;color: #FFB23F;font-weight: bold;}
.ranking-page-content .ranking-panel .top-tab-panel .topTabWrap .tabTitleWrap a{color: #666;}
.ranking-page-content .ranking-panel .top-tab-panel .topTabWrap .tabTitleWrap.active a{color: #FFB23F;}
.ranking-page-content .ranking-panel .top-tab-panel .topTabWrap .tabTitleWrap.active::before{background: url(../images/ranking/rankActiveLeft.png);background-repeat: no-repeat;background-size: contain;}
.ranking-page-content .ranking-panel .top-tab-panel .topTabWrap .tabTitleWrap.active::after{background: url(../images/ranking/rankActiveRight.png);background-repeat: no-repeat;background-size: contain;}
.ranking-page-content .ranking-panel .top-tab-panel .topTabWrap > p{position: absolute;right: 0px;font-size: 1.14rem;color: #ffffff;top: -3.14rem;}
.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: -0.93rem; background-color: #ffe003; left: 50%; transform: translateX(-50%);}
.ranking-page-content .ranking-panel .top-tab-panel .rank-top-human{position: absolute; top: -4.64rem; left: 53%; transform: translateX(-50%); z-index: -1;width: 12.86rem;}
.ranking-page-content .ranking-panel .top-tab-panel .rank-top-controller{position: absolute; top: -6.79rem; right: -1rem; z-index: -1;width: 6.5rem;}

.ranking-page-content .ranking-panel .top-tab-panel .categoryTabWrap{display: flex;align-items: center;column-gap: 0.71rem;row-gap: 1.43rem;cursor: pointer;flex-wrap: wrap;padding: 1.29rem 0.79rem;}
.ranking-page-content .ranking-panel .top-tab-panel .categoryTabWrap .categoryTab{border-radius: 0.43rem;background-color: #F7F7F7;height: 4.14rem;padding: 0 0.71rem;text-align: center;line-height: 4.14rem;color: #898989;font-size: 1.43rem;max-width: 11.43rem;overflow: hidden;}
.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;}
.ranking-panel .rankContent.active{display: flex;}
.ranking-page-content .ranking-panel .rankContentPanel{margin-top: 2.14rem;}
.ranking-page-content .ranking-panel .rankContentPanel .rankContentWrap{flex: 0 0 100%;max-width: 100%;}
.ranking-page-content .ranking-panel .rankContentPanel .rankContentWrap .rankingWrap{background-color: #ffffff;border-radius: 0.43rem;padding: 2.14rem;display: flex;align-items: center;width: 100%;position: relative;}
.ranking-page-content .ranking-panel .rankContentPanel .rankContentWrap .rankingWrap:nth-child(odd){background-color: #FEF4F0;}
.ranking-page-content .ranking-panel .rankContentPanel .rankContentWrap .rankingWrap .imgWrap{position: relative;margin-right: 2.14rem;}
.ranking-page-content .ranking-panel .rankContentPanel .rankContentWrap .rankingWrap .imgWrap > img{width: 8.57rem;height: 8.57rem;border-radius: 2rem;}
.ranking-page-content .ranking-panel .rankContentPanel .rankContentWrap .rankingWrap .imgWrap .rank-icon{position: absolute;top: -2.14rem;left: -2.14rem;}
.ranking-page-content .ranking-panel .rankContentPanel .rankContentWrap .rankingWrap .imgWrap .rank-icon > img{width: 3.57rem;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: 1.14rem; color: #ffffff; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);} 
.ranking-page-content .ranking-panel .rankContentPanel .rankContentWrap .rankingWrap:first-child .imgWrap .rank-icon div{color: #FFFF66;}
.ranking-page-content .ranking-panel .rankContentPanel .rankContentWrap .rankingWrap .detailWrap{display: flex;flex-direction: column;padding-right: 2rem;overflow: hidden;}
.ranking-page-content .ranking-panel .rankContentPanel .rankContentWrap .rankingWrap .detailWrap .name{font-size: 2rem;color: #000000;margin-bottom: 0.79rem;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: 1.57rem;color: #999999;margin-bottom: 0.86rem;column-gap: 1.5rem;}
.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: -0.75rem;top: 50%;transform: translateY(-50%);}
.ranking-page-content .ranking-panel .rankContentPanel .rankContentWrap .rankingWrap .detailWrap .dateUpdate{font-size: 1.57rem;color: #999999;}
.ranking-page-content .ranking-panel .rankContentPanel .rankContentWrap .rankingWrap .viewBtn{margin-left: auto;flex: 0 0 8.86rem;height: 3.57rem;display: flex;align-items: center;justify-content: center;background-color: transparent;border: 1px solid #42EAB2;font-size: 1.71rem;color: #42EAB2;border-radius: 2rem;position: relative;z-index: 1;}
.ranking-page-content .ranking-panel .rankContentPanel .rankContentWrap .rankingWrap:hover .viewBtn{background-color: #42EAB2;color: #ffffff;}
.ranking-page-content .ranking-panel .rankContentPanel .rankContentWrap .rankingWrap .img-overlay{position: absolute;right: 0;opacity: 0;z-index: 1;height: 100%!important;width: auto!important;transition: .3s all;-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%); mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%);border-radius: 0.71rem!important;margin-right: 0!important;}
.ranking-page-content .ranking-panel .rankContentPanel .rankContentWrap .rankingWrap:hover .img-overlay{opacity: 0.2;}