.section-title {
    display: flex;
    align-items: center;
    padding-left: 3.75rem;
    position: relative;
}

.section-title h2 {
    font-size: 2.25rem;
    font-weight: bold;
    color: #140402;
}

.section-title>span {
    font-size: 1.5rem;
    color: #999999;
    margin-left: 1rem;
    margin-top: 0.5rem;
}

.section-title .moreBtn {
    font-size: 1.5rem;
    color: #999999;
    margin-left: auto;
    padding-right: 1.75rem;
    position: relative;
    line-height: 1.25rem;
    margin-top: 0.5rem;
}

.section-title .moreBtn::after {
    content: "";
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    right: 0;
    width: 1.125rem;
    height: 1.25rem;
    background-image: url(../images/exit.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: brightness(0) saturate(100%) invert(73%) sepia(26%) saturate(963%) hue-rotate(76deg) brightness(96%) contrast(86%);
}

.hero-slider-panel {
    margin-top: 2rem;
}

.hero-slider-panel .hero-slider {
    width: 100%;
    height: 25rem;
    border-radius: 1rem;
}

.hero-slider-panel .hero-slider .swiper-slide {
    width: 100%;
    height: 25rem;
    border-radius: 1rem;
    position: relative;
}

.hero-slider-panel .hero-slider .swiper-slide .bannerWrap {
    width: 100%;
    height: 100%;
    border-radius: 1rem;
}

.hero-slider-panel .hero-slider .swiper-slide .bannerWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 1rem;
}

.hero-slider-panel .hero-slider .swiper-slide .overlay-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6.125rem;
    padding: 1rem 1.5rem 1rem 1rem;
    background-color: #00000080;
    backdrop-filter: blur(3px);
    border-radius: 0 0 1rem 1rem;
    display: flex;
    align-items: center;
    column-gap: 1.125rem;
}

.hero-slider-panel .hero-slider .swiper-slide .overlay-wrap .imgWrap {
    width: 4rem;
    height: 4rem;
    flex: 0 0 4rem;
    max-width: 4rem;
}

.hero-slider-panel .hero-slider .swiper-slide .overlay-wrap .imgWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0.625rem;
}

.hero-slider-panel .hero-slider .swiper-slide .overlay-wrap .detailWrap {
    display: flex;
    flex-direction: column;
    row-gap: 0.25rem;
    max-width: 28.75rem;
}

.hero-slider-panel .hero-slider .swiper-slide .overlay-wrap .detailWrap .appName {
    font-size: 1.5rem;
    font-weight: 500;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-slider-panel .hero-slider .swiper-slide .overlay-wrap .detailWrap p {
    font-size: 1.25rem;
    color: #B8B8B8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-slider-panel .hero-slider .swiper-slide .overlay-wrap .viewBtn {
    width: 6.25rem;
    height: 3rem;
    flex: 0 0 6.25rem;
    max-width: 6.25rem;
    text-align: center;
    line-height: 3rem;
    border-radius: 1.5rem;
    font-size: 1.5rem;
    margin-left: auto;
    background: #f5f7fb;
    color: #35c84d;
    box-shadow: 0 4px 12px rgba(87, 214, 107, .12);
    font-weight: 500;
}

.top-app-panel {
    margin-top: 3.125rem;
}

.top-app-panel .top-app-list {
    display: flex;
    align-items: center;
    column-gap: 0.75rem;
    overflow-x: scroll;
    flex-wrap: nowrap;
}

.top-app-panel .top-app-list::-webkit-scrollbar {
    height: 0;
}

.top-app-panel .top-app-list .appWrap {
    width: 12.5rem;
    flex: 0 0 12.5rem;
    max-width: 12.5rem;
    background-color: #ffffff;
    border-radius: 1rem;
    padding: 1.5rem 0.75rem 1.25rem;
    display: flex;
    flex-direction: column;
}

.top-app-panel .top-app-list .appWrap .imgWrap {
    margin: 0 auto 0.75rem;
    width: 7.5rem;
    height: 7.5rem;
}

.top-app-panel .top-app-list .appWrap .imgWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 1.5rem;
}

.top-app-panel .top-app-list .appWrap .appName {
    text-align: center;
    font-size: 1.75rem;
    font-weight: 500;
    color: #1A1A1A;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 0.25rem;
}

.top-app-panel .top-app-list .appWrap>span {
    font-size: 1.5rem;
    text-align: center;
    color: #999999;
}

.app-tab-panel {
    margin-top: 3.25rem;
}

.app-tab-panel .app-tab-content {
    background-color: #ffffff;
    padding: 1.875rem 1.25rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    row-gap: 1.625rem;
}

.app-tab-panel .app-tab-content .tab-buttons {
    display: flex;
    align-items: center;
    column-gap: 1.5rem;
    overflow-x: scroll;
    flex-wrap: nowrap;
    position: relative;
    padding-bottom: 0.5rem;
}

.app-tab-panel .app-tab-content .tab-buttons::-webkit-scrollbar {
    height: 0;
}

.app-tab-panel .app-tab-content .tab-buttons li {
    width: 10rem;
    flex: 0 0 10rem;
    max-width: 10rem;
    height: 3.375rem;
    border-radius: 1.75rem;
    background-color: #F7F7F7;
    text-align: center;
    line-height: 3.45rem;
    font-size: 1.5rem;
    color: #666666;
    position: relative;
    z-index: 1;
}

.app-tab-panel .app-tab-content .tab-buttons li.active {
    color: #ffffff;
    background: linear-gradient(135deg, #8ee99a 0%, #57d66b 100%);
    font-weight: bold;
}

.app-tab-panel .app-tab-content .tab-buttons li.active::after {
    content: "";
    position: absolute;
    bottom: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1.25rem;
    height: 0.625rem;
    background: linear-gradient(350deg, #8ee99a 0%, #57d66b 100%);
    clip-path: polygon(100% 0, 0 0, 50% 100%);
    z-index: -1;
}

.app-tab-panel .app-tab-content .tab-content {
    display: none;
    flex-wrap: wrap;
    column-gap: 1rem;
    row-gap: 2.25rem;
}

.app-tab-panel .app-tab-content .tab-content.active {
    display: flex;
}

.app-tab-panel .app-tab-content .appWrap {
    display: flex;
    align-items: center;
    column-gap: 1.125rem;
    width: calc(50% - 0.5rem);
    flex: 0 0 calc(50% - 0.5rem);
    max-width: calc(50% - 0.5rem);
}

.app-tab-panel .app-tab-content .appWrap .imgWrap {
    width: 7.5rem;
    height: 7.5rem;
    flex: 0 0 7.5rem;
    max-width: 7.5rem;
}

.app-tab-panel .app-tab-content .appWrap .imgWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 1.25rem;
}

.app-tab-panel .app-tab-content .appWrap .detailWrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    flex-shrink: 0;
    overflow: hidden;
}

.app-tab-panel .app-tab-content .appWrap .detailWrap .appName {
    font-size: 1.75rem;
    font-weight: 500;
    color: #140402;
    margin-bottom: 0.5rem;
    overflow: hidden;
    height: 2.5rem;
    line-height: 2.5rem;
}

.app-tab-panel .app-tab-content .appWrap .detailWrap span {
    font-size: 1.5rem;
    color: #999999;
    line-height: 1.5;
}

.app-tab-panel .app-tab-content .hero-tab-title {
    display: flex;
    align-items: center;
    column-gap: 1.5rem;
}

.app-tab-panel .app-tab-content .hero-tab-title .section-title::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 2.75rem;
    height: 2.75rem;
    background-image: url(../images/newIcon.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.site-rec-slider {
    margin-top: 3.25rem;
}

.site-rec-panel .rec-app-wrap {
    position: relative;
    background-color: #ffffff;
    border-radius: 1rem;
    box-shadow: 5.657px 5.657px 8px 0px rgba(0, 0, 0, 0.06);
}

.site-rec-panel .rec-app-wrap .site-tag {
    width: 10.25rem;
    height: 5.25rem;
    font-size: 1.875rem;
    color: #ffffff;
    font-weight: bold;
    line-height: 3.5rem;
    padding-left: 1rem;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0 1rem 0 0;
}

.site-rec-panel .rec-app-wrap .site-tag span {
    position: relative;
    z-index: 1;
}

.site-rec-panel .rec-app-wrap .site-tag::before {
    content: "";
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(../images/site-tag-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0 1rem 0 0;
}

.site-rec-panel .rec-app-wrap .imgBanner {
    width: 100%;
    height: 24.75rem;
    display: block;
}

.site-rec-panel .rec-app-wrap .imgBanner img {
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    object-fit: cover;
    object-position: center;
}

.site-rec-panel .rec-app-wrap .app-detail {
    padding: 1.25rem;
    display: flex;
    align-items: center;
    column-gap: 1.25rem;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    background-color: #ffffff;
    border-radius: 0 0 1rem 1rem;
}

.site-rec-panel .rec-app-wrap .app-detail .imgWrap {
    width: 6.25rem;
    flex: 0 0 6.25rem;
    max-width: 6.25rem;
    height: 6.25rem;
}

.site-rec-panel .rec-app-wrap .app-detail .imgWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 1.25rem;
}

.site-rec-panel .rec-app-wrap .app-detail .detailWrap {
    display: flex;
    flex-direction: column;
    row-gap: 0.625rem;
    flex: 1;
    flex-shrink: 0;
    overflow: hidden;
}

.site-rec-panel .rec-app-wrap .app-detail .detailWrap .nameWrap {
    display: flex;
    align-items: center;
    column-gap: 0.375rem;
    overflow: hidden;
}

.site-rec-slider .site-rec-panel:nth-child(1) .rec-app-wrap .app-detail .detailWrap .nameWrap .rankNo {
    width: 1.75rem;
    height: 2rem;
    background-image: url(../images/1.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    flex: 0 0 1.75rem;
    max-width: 1.75rem;
}

.site-rec-slider .site-rec-panel:nth-child(2) .rec-app-wrap .app-detail .detailWrap .nameWrap .rankNo {
    width: 1.75rem;
    height: 2rem;
    background-image: url(../images/2.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    flex: 0 0 1.75rem;
    max-width: 1.75rem;
}

.site-rec-slider .site-rec-panel:nth-child(3) .rec-app-wrap .app-detail .detailWrap .nameWrap .rankNo {
    width: 1.75rem;
    height: 2rem;
    background-image: url(../images/3.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    flex: 0 0 1.75rem;
    max-width: 1.75rem;
}


.site-rec-panel .rec-app-wrap .app-detail .detailWrap .nameWrap .appName {
    font-size: 1.75rem;
    font-weight: 500;
    color: #140402;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-rec-panel .rec-app-wrap .app-detail .detailWrap>span {
    font-size: 1.5rem;
    color: #999999;
}

.site-rec-panel .rec-app-wrap .app-detail .viewBtn {
    margin-left: auto;
    width: 6.25rem;
    flex: 0 0 6.25rem;
    max-width: 6.25rem;
    height: 3rem;
    text-align: center;
    line-height: 3rem;
    border-radius: 1.5rem;
    font-size: 1.5rem;
    background: #f5f7fb;
    color: #35c84d;
    box-shadow: 0 4px 12px rgba(87, 214, 107, .12);
    font-weight: 500;
}

.app-listing-panel {
    margin-top: 3rem;
}

.app-listing-panel .section-title::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 2.75rem;
    height: 2.75rem;
    background-image: url(../images/joystickIcon.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.app-listing-panel.app .section-title::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 2.75rem;
    height: 2.75rem;
    background-image: url(../images/gridIcon.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.app-listing-panel .app-listing-wrap {
    background-color: #ffffff;
    border-radius: 1rem;
    padding: 1.75rem 1.25rem 1.875rem;
    display: flex;
    flex-direction: column;
    row-gap: 1.625rem;
    margin-top: 1.25rem;
}

.app-listing-panel .app-listing-wrap .tab-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 1.25rem;
    row-gap: 1.25rem;
}

.app-listing-panel .app-listing-wrap .tab-buttons li {
    width: 9.375rem;
    flex: 0 0 9.375rem;
    max-width: 9.375rem;
    height: 3.375rem;
    text-align: center;
    line-height: 3.5rem;
    border-radius: 1.75rem;
    background-color: #F8F8F8;
    font-size: 1.5rem;
    color: #666666;
}

.app-listing-panel .app-listing-wrap .tab-buttons li.active {
    color: #ffffff;
    background: linear-gradient(135deg, #8ee99a 0%, #57d66b 100%);
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(87, 214, 107, .12), 0 10px 24px rgba(87, 214, 107, .10);
}

.app-listing-panel .app-listing-wrap .tab-content {
    display: none;
    flex-wrap: wrap;
    column-gap: 1rem;
    row-gap: 2.125rem;
}

.app-listing-panel .app-listing-wrap .tab-content.active {
    display: flex;
}

.app-listing-panel .app-listing-wrap .appWrap {
    width: 9.55rem;
    flex: 0 0 9.55rem;
    max-width: 9.55rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.app-listing-panel .app-listing-wrap .appWrap .imgWrap {
    margin: 0 auto 0.875rem;
    width: 7.5rem;
    height: 7.5rem;
}

.app-listing-panel .app-listing-wrap .appWrap .imgWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 1.625rem;
}

.app-listing-panel .app-listing-wrap .appWrap .appName {
    font-size: 1.75rem;
    font-weight: 500;
    color: #333333;
    text-align: center;
    overflow: hidden;
    margin: 0 auto;
    height: 2.5rem;
    line-height: 2.5rem;
}

.app-listing-panel .app-listing-wrap .appWrap>span {
    font-size: 1.5rem;
    color: #999999;
    text-align: center;
    margin-top: 0.25rem;
}

.topic-listing-panel {
    margin-top: 2.75rem;
}

.topic-listing-panel .section-title::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 2.75rem;
    height: 2.75rem;
    background-image: url(../images/topicIcon.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.topic-listing-panel .topic-listing {
    margin-top: 1.5rem;
    overflow-x: scroll;
    display: flex;
    flex-wrap: nowrap;
    column-gap: 1.25rem;
}

.topic-listing-panel .topic-listing::-webkit-scrollbar {
    height: 0;
}

.topic-listing-panel .topic-listing .topicWrap {
    display: flex;
    flex-direction: column;
    row-gap: 0.625rem;
    width: 18.75rem;
    flex: 0 0 18.75rem;
    max-width: 18.75remrem;
}

.topic-listing-panel .topic-listing .topicWrap .topic-title-wrap {
    width: 100%;
    height: 6.25rem;
    background-color: #ffffff;
    border-radius: 1rem 1rem 0 0;
    padding: 0.875rem 1.25rem 0.75rem;
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
    overflow: hidden;
}

.topic-listing-panel .topic-listing .topicWrap .topic-title-wrap .topicName {
    font-size: 1.75rem;
    color: #140402;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1;
    padding-top: 0.25rem;
    text-align: center;
}

.topic-listing-panel .topic-listing .topicWrap .topic-title-wrap .bottomWrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.topic-listing-panel .topic-listing .topicWrap .topic-title-wrap .bottomWrap span {
    font-size: 1.5rem;
    color: #999999;
    line-height: 1.5;
}

.topic-listing-panel .topic-listing .topicWrap .topic-title-wrap .bottomWrap .amountWrap {
    font-size: 1.5rem;
    color: #57d66b;
    line-height: 1.5;
}

.topic-listing-panel .topic-listing .topicWrap .topic-app-list {
    width: 100%;
    height: 20.625rem;
    border-radius: 0 0 1rem 1rem;
    background-color: #ffffff;
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    row-gap: 1.25rem;
}

.topic-listing-panel .topic-listing .topicWrap .topic-app-list .appWrap {
    display: flex;
    align-items: center;
    column-gap: 1.25rem;
    overflow: hidden;
}

.topic-listing-panel .topic-listing .topicWrap .topic-app-list .appWrap .imgWrap {
    width: 5rem;
    height: 5rem;
    flex: 0 0 5rem;
    max-width: 5rem;
}

.topic-listing-panel .topic-listing .topicWrap .topic-app-list .appWrap .imgWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 1.25rem;
}

.topic-listing-panel .topic-listing .topicWrap .topic-app-list .appWrap .detailWrap {
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
    flex: 1;
    flex-shrink: 0;
    overflow: hidden;
}

.topic-listing-panel .topic-listing .topicWrap .topic-app-list .appWrap .detailWrap .appName {
    font-size: 1.5rem;
    font-weight: 500;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topic-listing-panel .topic-listing .topicWrap .topic-app-list .appWrap .detailWrap>span {
    font-size: 1.5rem;
    color: #999999;
}

.ranking-panel {
    margin-top: 2.625rem;
}

.ranking-panel .section-title::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 2.75rem;
    height: 2.75rem;
    background-image: url(../images/rankCrownIcon.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.ranking-panel .tab-buttons {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    column-gap: 1.625rem;
}

.ranking-panel .tab-buttons li {
    width: calc(50% - 0.875rem);
    flex: 0 0 calc(50% - 0.875rem);
    max-width: calc(50% - 0.875rem);
    height: 3.75rem;
    line-height: 3.75rem;
    text-align: center;
    font-size: 1.5rem;
    color: #666666;
    background: #FFFFFF;
    border-radius: 1.875rem;
}

.ranking-panel .tab-buttons li.active {
    color: #ffffff;
    background: linear-gradient(135deg, #8ee99a 0%, #57d66b 100%);
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(87, 214, 107, .12), 0 10px 24px rgba(87, 214, 107, .10);
}

.ranking-panel .tab-contents {
    margin-top: 1.875rem;
}

.ranking-panel .tab-content {
    display: none;
    flex-wrap: nowrap;
    column-gap: 1.25rem;
    overflow-x: scroll;
}

.ranking-panel .tab-content::-webkit-scrollbar {
    height: 0;
}

.ranking-panel .tab-content.active {
    display: flex;
}

.ranking-panel .rank-column {
    width: 35rem;
    flex: 0 0 35rem;
    max-width: 35rem;
    background-color: #ffffff;
    border-radius: 0.625rem;
    padding: 0.375rem 1.25rem 0.75rem;
    display: flex;
    flex-direction: column;
}

.ranking-panel .rank-column .appWrap {
    display: flex;
    align-items: center;
    column-gap: 1.25rem;
    padding: 1.5rem 0 1.25rem;
    position: relative;
}

.ranking-panel .rank-column .appWrap::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    height: 1px;
    width: calc(100% - 7.5rem);
    background-color: #eeeeee;
}

.ranking-panel .rank-column .appWrap .imgWrap {
    width: 6.25rem;
    height: 6.25rem;
    flex: 0 0 6.25rem;
    max-width: 6.25rem;
}

.ranking-panel .rank-column .appWrap .imgWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 1.5rem;
}

.ranking-panel .rank-column .appWrap .detailWrap {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    flex: 1;
    flex-shrink: 0;
    overflow: hidden;
}

.ranking-panel .rank-column .appWrap .detailWrap .nameWrap {
    display: flex;
    align-items: center;
    column-gap: 0.75rem;
    overflow: hidden;
}

.ranking-panel .rank-column .appWrap .detailWrap .nameWrap .rankNo {
    width: 1.875rem;
    flex: 0 0 1.875rem;
    max-width: 1.875rem;
    text-align: center;
    font-size: 1.75rem;
    color: #999999;
}

.ranking-panel .rank-column .appWrap .detailWrap .nameWrap .appName {
    flex: 1;
    flex-shrink: 0;
    font-size: 1.75rem;
    color: #140402;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-panel .rank-column .appWrap .detailWrap>span {
    font-size: 1.5rem;
    color: #999999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-panel .rank-column .appWrap .viewBtn {
    margin-left: auto;
    width: 6.25rem;
    flex: 0 0 6.25rem;
    max-width: 6.25rem;
    height: 3rem;
    text-align: center;
    line-height: 3rem;
    border-radius: 1.5rem;
    font-size: 1.5rem;
    background: #f5f7fb;
    color: #35c84d;
    box-shadow: 0 4px 12px rgba(87, 214, 107, .12);
    font-weight: 500;
}

.ranking-panel .rank-column:nth-child(1) .appWrap:nth-child(1) .detailWrap .nameWrap .rankNo {
    color: transparent;
    background-image: url(../images/1.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 1.625rem;
    height: 1.75rem;
}

.ranking-panel .rank-column:nth-child(1) .appWrap:nth-child(2) .detailWrap .nameWrap .rankNo {
    color: transparent;
    background-image: url(../images/2.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 1.625rem;
    height: 1.75rem;
}

.ranking-panel .rank-column:nth-child(1) .appWrap:nth-child(3) .detailWrap .nameWrap .rankNo {
    color: transparent;
    background-image: url(../images/3.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 1.625rem;
    height: 1.75rem;
}

.setup-necessary-panel {
    margin-top: 2.625rem;
}

.setup-necessary-panel .section-title::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 2.75rem;
    height: 2.75rem;
    background-image: url(../images/cartIcon.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.setup-necessary-panel .tab-buttons {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    column-gap: 1.625rem;
}

.setup-necessary-panel .tab-buttons li {
    width: calc(50% - 0.875rem);
    flex: 0 0 calc(50% - 0.875rem);
    max-width: calc(50% - 0.875rem);
    height: 3.75rem;
    line-height: 3.75rem;
    text-align: center;
    font-size: 1.5rem;
    color: #666666;
    background: #FFFFFF;
    border-radius: 1.875rem;
}

.setup-necessary-panel .tab-buttons li.active {
    color: #ffffff;
    background: linear-gradient(135deg, #8ee99a 0%, #57d66b 100%);
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(87, 214, 107, .12), 0 10px 24px rgba(87, 214, 107, .10);
}

.setup-necessary-panel .tab-contents {
    margin-top: 1.875rem;
}

.setup-necessary-panel .tab-content {
    display: none;
    flex-wrap: wrap;
    column-gap: 1.25rem;
    overflow-x: scroll;
    row-gap: 1.25rem;
    flex-direction: column;
    height: calc(3 * 7.5rem + 2 * 1.25rem);
}

.setup-necessary-panel .tab-content::-webkit-scrollbar {
    height: 0;
}

.setup-necessary-panel .tab-content.active {
    display: flex;
}

.setup-necessary-panel .tab-content .appWrap {
    width: 18.75rem;
    height: 7.5rem;
    border-radius: 0.625rem;
    background-color: #ffffff;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    column-gap: 1.25rem;
}

.setup-necessary-panel .tab-content .appWrap .imgWrap {
    width: 5rem;
    flex: 0 0 5rem;
    max-width: 5rem;
    height: 5rem;
}

.setup-necessary-panel .tab-content .appWrap .imgWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0.875rem;
}

.setup-necessary-panel .tab-content .appWrap .detailWrap {
    display: flex;
    flex-direction: column;
    row-gap: 0.375rem;
    overflow: hidden;
    flex: 1;
    flex-shrink: 0;
}

.setup-necessary-panel .tab-content .appWrap .detailWrap .appName {
    font-size: 1.75rem;
    font-weight: 500;
    color: #140402;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.setup-necessary-panel .tab-content .appWrap .detailWrap>span {
    font-size: 1.5rem;
    color: #999999;
}

.news-panel {
    margin-top: 3.438rem;
}

.news-panel .section-title::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 2.75rem;
    height: 2.75rem;
    background-image: url(../images/newsIcon.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.news-panel .news-listing {
    margin-top: 1.5rem;
    background-color: #ffffff;
    padding: 0.375rem 1.25rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
}

.news-panel .news-listing .newsWrap {
    display: flex;
    align-items: center;
    column-gap: 1.25rem;
    padding: 1.5rem 0;
    border-bottom: 1px dashed #e5e5e5;
}

.news-panel .news-listing .newsWrap:last-child {
    border-bottom: none;
}

.news-panel .news-listing .newsWrap .newsBanner {
    width: 16rem;
    flex: 0 0 16rem;
    max-width: 16rem;
    height: 9.375rem;
}

.news-panel .news-listing .newsWrap .newsBanner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0.625rem;
}

.news-panel .news-listing .newsWrap .detailWrap {
    display: flex;
    flex-direction: column;
    row-gap: 0.25rem;
    overflow: hidden;
    flex: 1;
    flex-shrink: 0;
}

.news-panel .news-listing .newsWrap .detailWrap .newsTitle {
    font-size: 1.75rem;
    font-weight: 500;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-panel .news-listing .newsWrap .detailWrap>p {
    font-size: 1.5rem;
    color: #999999;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.news-panel .news-listing .newsWrap .detailWrap>span {
    font-size: 1.5rem;
    color: #999999;
    overflow: hidden;
}

.popular-app-panel {
    margin-top: 3.125rem;
    position: relative;
    z-index: 1;
    padding-top: 32px;
}

.popular-app-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 13.75rem;
    z-index: -1;
    background: #57d66b;
}

.popular-app-panel .tab-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 1.5rem;
}

.popular-app-panel .tab-buttons li {
    width: 10.5rem;
    flex: 0 0 10.5rem;
    max-width: 10.5rem;
    height: 3.375rem;
    line-height: 3.5rem;
    text-align: center;
    border-radius: 1.75rem;
    background-color: #ffffff3d;
    font-size: 1.5rem;
    color: #ffffff;
    font-weight: bold;
}

.popular-app-panel .tab-buttons li.active {
    background-color: #FFFFFF;
    color: #57d66b;
}

.popular-app-panel .tab-contents {
    margin-top: 1.875rem;
}

.popular-app-panel .tab-content {
    display: none;
    flex-wrap: wrap;
    column-gap: 1.5rem;
    row-gap: 1.5rem;
}

.popular-app-panel .tab-content.active {
    display: flex;
}

.popular-app-panel .appWrap {
    width: 9.75rem;
    flex: 0 0 9.75rem;
    max-width: 9.75rem;
    height: 16.375rem;
    background-color: #ffffff;
    border-radius: 1rem;
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
}

.popular-app-panel .appWrap .imgWrap {
    width: 6.25rem;
    height: 6.25rem;
    margin: 0 auto 0.875rem;
}

.popular-app-panel .appWrap .imgWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 1.25rem;
}

.popular-app-panel .appWrap .appName {
    font-size: 1.75rem;
    font-weight: 500;
    color: #140402;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 0.875rem;
}

.popular-app-panel .appWrap .viewBtn {
    width: 6.25rem;
    height: 3rem;
    text-align: center;
    line-height: 3rem;
    border-radius: 1.5rem;
    font-size: 1.5rem;
    margin: 0 auto;
    background: #f5f7fb;
    color: #35c84d;
    box-shadow: 0 4px 12px rgba(87, 214, 107, .12);
    font-weight: 500;
}

.friendship-link-panel {
    margin-top: 3rem;
}

.friendship-link-panel .section-title::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 2.75rem;
    height: 2.75rem;
    background-image: url(../images/linkIcon.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.friendship-link-panel .link-list {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.friendship-link-panel .link-list a {
    width: calc(25% - 1rem);
    flex: 0 0 calc(25% - 1rem);
    max-width: calc(25% - 1rem);
    height: 3.375rem;
    text-align: center;
    line-height: 3.375rem;
    border-radius: 0.625rem;
    background-color: #ffffff;
    font-size: 1.5rem;
    color: #140402;
}