body{background-color: #e5f6ff;}
.rank-bg{width: 100%;height: 24.625rem;background-image: url(../images/rank/rank-bg.webp);background-repeat: no-repeat;background-size: cover;position: absolute;top: 9.5rem;left: 0;z-index: -1;}
.rank-content-page{margin-top: 1.375rem;}
.rank-content-page .title-tab-wrap{display: flex;flex-direction: column;row-gap: 1.25rem;}
.rank-content-page .title-tab-wrap .titleIcon{width: 13.25rem;height: 4.5rem;}
.rank-content-page .title-tab-wrap .titleIcon img{width: 100%;height: 100%;object-fit: contain;}
.rank-content-page .title-tab-wrap .rank-tabs{display: flex;align-items: center;column-gap: 1.25rem;overflow-x: scroll;padding-bottom: 1.25rem;}
.rank-content-page .title-tab-wrap .rank-tabs::-webkit-scrollbar{height: 0;}
.rank-content-page .title-tab-wrap .rank-tabs a{width: 8.75rem;flex: 0 0 8.75rem;max-width: 8.75rem;height: 3.5rem;text-align: center;line-height: 3.5rem;padding: 0 1.75rem;border-radius: 1.75rem;background: #ffffff80;font-size: 1.5rem;color: #999999;position: relative;white-space: nowrap;}
.rank-content-page .title-tab-wrap .rank-tabs a.active{color: #ffffff;background: linear-gradient( 90deg, rgb(246,198,87) 0%, rgb(255,135,0) 100%);}
.rank-content-page .title-tab-wrap .rank-tabs a.active::after{content: "";position: absolute;left: 50%;transform: translateX(-50%);background-image: url(../images/rank/activeArrow.webp);width: 1.375rem;height: 1rem;background-repeat: no-repeat;background-size: contain;bottom: -1.25rem;}

.rank-content-page .rank-list{display: flex;flex-direction: column;background-color: #ffffff;border-radius: 0.63rem;padding: 0.63rem 1.25rem;margin-top: 0.63rem;margin-bottom: 1.875rem;}
.rank-content-page .rank-list .rankWrap{display: flex;align-items: center;overflow: hidden;padding: 1.875rem 0;border-bottom: 0.125rem dashed #02A1FF33;}
.rank-content-page .rank-list .rankWrap:last-child{border-bottom: none;}
.rank-content-page .rank-list .rankWrap .rankNo{font-size: 1.875rem;font-weight: bold;color: #C4C4C4;width: 2.5rem;margin-right: 1rem;font-style: italic;text-align: center;}
.rank-content-page .rank-list .rankWrap:nth-child(1) .rankNo,
.rank-content-page .rank-list .rankWrap:nth-child(2) .rankNo,
.rank-content-page .rank-list .rankWrap:nth-child(3) .rankNo{ background: linear-gradient(to bottom, #F6C656, #FF8906); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}
.rank-content-page .rank-list .rankWrap .imgWrap{width: 12.5rem;height: 7.375rem;flex: 0 0 12.5rem;max-width: 12.5rem;margin-right: 1.25rem;}
.rank-content-page .rank-list .rankWrap .imgWrap img{width: 100%;height: 100%;border-radius: 0.63rem;object-fit: cover;}
.rank-content-page .rank-list .rankWrap .detailWrap{display: flex;flex-direction: column;max-width: 13.75rem;overflow: hidden;}
.rank-content-page .rank-list .rankWrap .detailWrap h4{font-size: 1.625rem;color: #000000;font-weight: 400;margin-bottom: 0.75rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.rank-content-page .rank-list .rankWrap .detailWrap .typeWrap{display: flex;align-items: center;column-gap: 1rem;margin-bottom: 1rem;}
.rank-content-page .rank-list .rankWrap .detailWrap .typeWrap p{font-size: 1.25rem;color: #BABABA;position: relative;}
.rank-content-page .rank-list .rankWrap .detailWrap .typeWrap p:first-child::after{content: "";position: absolute;top: 50%;right: -0.5rem;transform: translateY(-50%);width: 0.125rem;height: 75%;background-color: #BABABA;}
.rank-content-page .rank-list .rankWrap .detailWrap .dateUpdate{font-size: 1.25rem;color: #BABABA;}
.rank-content-page .rank-list .rankWrap .viewBtn{margin-left: auto;width: 7.75rem; height: 3.125rem; text-align: center; line-height: 3rem; border: 1px solid #0872FF4D; border-radius: 1.5rem; font-size: 1.5rem; color: #0975FF;}