.hero-slider-banner{width: 100%;height: 23.125rem;position: relative;}
.hero-slider-banner .container{height: 100%;}
.hero-slider-banner .swiper-container{height: 100%;}
.hero-slider-banner .swiper-slide img{width: 100%;height: 100%;object-fit: cover;display: block;object-position: top;}
.hero-slider-banner .swiper-slide .slide-title{height: 8.375rem; position: absolute; bottom: 0; width: 100%; left: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%); backdrop-filter: blur(1.2px);text-align: center;}
.hero-slider-banner .swiper-slide .slide-title p{font-size: 1.5rem;color: #ffffff;max-width: 34.375rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin: 4rem auto 0;}
.hero-slider-banner .hero-slider-pagination{position: absolute;bottom: 1rem;left: 50%;transform: translateX(-50%);z-index: 3;display: flex;align-items: center;column-gap: 0.5rem;}
.hero-slider-banner .hero-slider-pagination .swiper-pagination-bullet{width: 0.5rem;height: 0.5rem;background-color: #ffffff;border-radius: 50%;opacity: 0.5;transition: width .3s ease;}
.hero-slider-banner .hero-slider-pagination .swiper-pagination-bullet-active{opacity: 0.5;width: 1.5rem;border-radius: 0.25rem;}

.hot-game-slider{margin-top: 1.875rem;padding-left: 1.875rem;}
.hot-game-slider .hot-game-wrap{display: flex;align-items: center;column-gap: 1.5rem;overflow-x: scroll;padding-right: 1.875rem;}
.hot-game-slider .hot-game-wrap::-webkit-scrollbar{height: 0;}
.hot-game-slider .hot-game-wrap a{width: 10.625rem;flex: 0 0 10.625rem;max-width: 10.625rem;display: flex;flex-direction: column;align-items: center;padding: 1.25rem;background-color: #ffffff;border-radius: 0.63rem;height: 13rem;}
.hot-game-slider .hot-game-wrap a .imgWrap{position: relative;width: 8rem;height: 8rem;}
.hot-game-slider .hot-game-wrap a .imgWrap .hotIcon{position: absolute;top: -1rem;left: 50%;transform: translateX(-50%);width: 5.563rem;height: auto;object-fit: cover;}
.hot-game-slider .hot-game-wrap a .imgWrap .hotGameImg{width: 100%;height: 100%;border-radius: 1.875rem;margin-bottom: 0.63rem;object-fit: cover;}
.hot-game-slider .hot-game-wrap a p{font-size: 1.5rem;color: #333333;text-align: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

.app-switch-banner{margin-top: 1.875rem;}
.app-switch-banner .app-banner-wrap{width: 100%;display: none;flex-direction: column;background-color: #ffffff;border-radius: 0.63rem;}
.app-switch-banner .app-banner-wrap.active{display: flex;}
.app-switch-banner .app-banner-wrap .bannerWrap{width: 100%;height: 20.75rem;border-radius: 0.63rem;}
.app-switch-banner .app-banner-wrap .bannerWrap img{width: 100%;height: 100%;border-radius: 0.63rem;object-fit: cover;object-position: center;}
.app-switch-banner .app-banner-wrap .banner-app-detail{display: flex;align-items: center;column-gap: 1.25rem;padding: 1.25rem 1.25rem 1.875rem;border-radius: 0 0 0.63rem 0.63rem;}
.app-switch-banner .app-banner-wrap .banner-app-detail .imgWrap{width: 6.5rem;flex: 0 0 6.5rem;max-width: 6.5rem;height: 6.5rem;}
.app-switch-banner .app-banner-wrap .banner-app-detail .imgWrap img{width: 100%;height: 100%;border-radius: 1rem;object-fit: cover;}
.app-switch-banner .app-banner-wrap .banner-app-detail .detailWrap{display: flex;flex-direction: column;row-gap: 0.875rem;max-width: 20rem;overflow: hidden;}
.app-switch-banner .app-banner-wrap .banner-app-detail .detailWrap h4{font-size: 1.75rem;color: #000000;font-weight: bold;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.app-switch-banner .app-banner-wrap .banner-app-detail .detailWrap .typeWrap{display: flex;align-items: center;column-gap: 1rem;}
.app-switch-banner .app-banner-wrap .banner-app-detail .detailWrap .typeWrap p{font-size: 1.25rem;color: #BABABA;position: relative;}
.app-switch-banner .app-banner-wrap .banner-app-detail .detailWrap .typeWrap p:first-child::after{content: "";position: absolute;right: -0.5rem;top: 50%;transform: translateY(-50%);width: 0.125rem;height: 75%;background-color: #BABABA;}
.app-switch-banner .app-banner-wrap .banner-app-detail .detailWrap > p{font-size: 1.25rem;color: #ABABAB;}
.app-switch-banner .app-banner-wrap .banner-app-detail .switchBtn{margin-left: auto;width: 6.5rem;flex: 0 0 6.5rem;max-width: 6.5rem;height: 6.5rem;display: flex;align-items: center;justify-content: center;flex-direction: column;row-gap: 0.63rem;background-color: #F7F7F7;border-radius: 1rem;}
.app-switch-banner .app-banner-wrap .banner-app-detail .switchBtn img{width: 2.375rem;height: 2.375rem;object-fit: cover;}
.app-switch-banner .app-banner-wrap .banner-app-detail .switchBtn p{font-size: 1.375rem;color: #a7a8a7;}

.recent-update-panel{margin-top: 1.875rem;padding-bottom: 1.875rem;}
.recent-update-panel .recent-update-wrap{background-color: #ffffff;border-radius: 0.63rem;padding: 1.25rem 1.25rem 3.125rem;}
.recent-update-panel .recent-update-wrap .tab-contents{margin-top: 1.875rem;}
.recent-update-panel .recent-update-wrap .tab-contents .tab-content{display: none;column-gap: 3.75rem;overflow-x: scroll;}
.recent-update-panel .recent-update-wrap .tab-contents .tab-content::-webkit-scrollbar{height: 0;}
.recent-update-panel .recent-update-wrap .tab-contents .tab-content.active{display: flex;}
.recent-update-panel .recent-update-wrap .tab-contents .tab-content .app-column-wrap{width: 33rem;display: flex;flex-direction: column;row-gap: 2.5rem;flex: 0 0 33rem;max-width: 33rem;}
.recent-update-panel .recent-update-wrap .tab-contents .tab-content .app-column-wrap .appWrap{width: 100%;flex: 0 0 100%;max-width: 100%;display: flex;align-items: center;height: 7.5rem;max-height: 7.5rem;}
.recent-update-panel .recent-update-wrap .tab-contents .tab-content .app-column-wrap .appWrap .imgWrap{width: 7.5rem;height: 7.5rem;}
.recent-update-panel .recent-update-wrap .tab-contents .tab-content .app-column-wrap .appWrap .imgWrap img{width: 100%;height: 100%;border-radius: 1.625rem;object-fit: cover;}
.recent-update-panel .recent-update-wrap .tab-contents .tab-content .app-column-wrap .appWrap .appDetail{display: flex;flex-direction: column;overflow: hidden;width: 15.625rem;margin-left: 1.25rem;}
.recent-update-panel .recent-update-wrap .tab-contents .tab-content .app-column-wrap .appWrap .appDetail h4{font-size: 1.625rem;color: #000000;margin-bottom: 0.875rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight: 400;}
.recent-update-panel .recent-update-wrap .tab-contents .tab-content .app-column-wrap .appWrap .appDetail .typeWrap{display: flex;align-items: center;column-gap: 1rem;margin-bottom: 0.31rem;}
.recent-update-panel .recent-update-wrap .tab-contents .tab-content .app-column-wrap .appWrap .appDetail .typeWrap p{font-size: 1.25rem;color: #BABABA;position: relative;}
.recent-update-panel .recent-update-wrap .tab-contents .tab-content .app-column-wrap .appWrap .appDetail .typeWrap p:first-child::after{content: "";position: absolute;top: 50%;right: -0.5rem;transform: translateY(-50%);width: 0.125rem;height: 75%;background-color: #BABABA;}
.recent-update-panel .recent-update-wrap .tab-contents .tab-content .app-column-wrap .appWrap .appDetail .dateUpdate{font-size: 1.375rem;color: #BABABA;}
.recent-update-panel .recent-update-wrap .tab-contents .tab-content .app-column-wrap .appWrap .viewBtn{margin-left: auto;width: 7.75rem;height: 3.125rem;text-align: center;line-height: 3rem;border-radius: 1.5rem;border: 1px solid #0872FFBF;font-size: 1.5rem;color: #0975FF;}

.app-listing-panel{background-color: #ffffff;padding-top: 1.375rem;}
.app-listing-panel.app{padding-top: 2.625rem;}
.app-listing-panel .app-listing{margin-top: 1.625rem;display: flex;flex-wrap: wrap;column-gap: 4rem;row-gap: 2.813rem;}
.app-listing-panel .app-listing .appWrap{width: 7.75rem;flex: 0 0 7.75rem;max-width: 7.75rem;display: flex;flex-direction: column;overflow: hidden;}
.app-listing-panel .app-listing .appWrap img{width: 7.75rem;height: 7.75rem;object-fit: cover;border-radius: 1.875rem;margin-bottom: 0.5rem;}
.app-listing-panel .app-listing .appWrap p{text-align: center;font-size: 1.5rem;color: #000000;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-bottom: 1rem;}
.app-listing-panel .app-listing .appWrap .viewBtn{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;}

.topic-panel{padding-top: 3.125rem;background-color: #ffffff;}
.topic-panel .topic-listing{margin-top: 1.625rem;display: flex;column-gap: 1.375rem;overflow-x: scroll;align-items: center;}
.topic-panel .topic-listing::-webkit-scrollbar{height: 0;}
.topic-panel .topic-listing .topic-wrap{padding-bottom: 1.125rem;border-radius: 0.63rem;display: flex;flex-direction: column;row-gap: 0.63rem;width: 23.625rem;flex: 0 0 23.625rem;max-width: 23.625rem;background-color: #F7F7F7;}
.topic-panel .topic-listing .topic-wrap .topic-banner-wrap{position: relative;width: 100%;height: 15rem;overflow: hidden;border-radius: 0.63rem;background-color: #000000;}
.topic-panel .topic-listing .topic-wrap .topic-banner-wrap .topic-banner-img{width: 100%;height: 100%;object-fit: cover;position: absolute;top: 0;left: 0;border-radius: 0.63rem;opacity: 0.8;}
.topic-panel .topic-listing .topic-wrap .topic-banner-wrap .topic-apps-list{position: absolute;z-index: 1;bottom: 1.5rem;width: 100%;display: flex;column-gap: 1rem;justify-content: center;}
.topic-panel .topic-listing .topic-wrap .topic-banner-wrap .topic-apps-list a{width: 3.875rem;height: 3.875rem;flex: 0 0 3.875rem;max-width: 3.875rem;display: flex;align-items: center;justify-content: center;border-radius: 0.63rem;}
.topic-panel .topic-listing .topic-wrap .topic-banner-wrap .topic-apps-list a img{width: 3.875rem;height: 3.875rem;object-fit: cover;border-radius: 0.63rem;}
.topic-panel .topic-listing .topic-wrap h4{font-size: 1.5rem;font-weight: 400;color: #000000;padding: 0 1rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

.news-panel{padding-top: 2.5rem;background-color: #ffffff;}
.news-panel .news-listing-wrap{display: flex;flex-direction: column;row-gap: 1.625rem;}
.news-panel .news-listing-wrap .news-listing{display: flex;flex-wrap: wrap;column-gap: 1.125rem;row-gap: 1.75rem;}
.news-panel .news-listing-wrap .news-listing a{width: 20.875rem;flex: 0 0 20.875rem;max-width: 20.875rem;display: flex;flex-direction: column;}
.news-panel .news-listing-wrap .news-listing a > img{width: 20.875rem;height: 11.125rem;object-fit: cover;margin-bottom: 0.25rem;border-radius: 0.63rem;}
.news-panel .news-listing-wrap .news-listing a > h4{font-size: 1.5rem;color: #000000;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;margin-bottom: 0.75rem;font-weight: 400;}
.news-panel .news-listing-wrap .news-listing a p{font-size: 1.125rem;color: #BABABA;}
.news-panel .news-listing-wrap .news-listing a p span{margin-right: 1rem;position: relative;}
.news-panel .news-listing-wrap .news-listing a p span::after{content: "";position: absolute;top: 50%;right: -0.5rem;transform: translateY(-50%);width: 0.25rem;height: 0.25rem;background-color: #BABABA;border-radius: 50%;}

.ranking-panel{padding-top: 2.5rem;background-color: #ffffff;}
.ranking-panel .ranking-listing{margin-top: 1.625rem;display: flex;column-gap: 1.25rem;overflow-x: scroll;}
.ranking-panel .ranking-listing::-webkit-scrollbar{height: 0;}
.ranking-panel .ranking-listing .rank-type-list{background-color: #F7F7F7;border-radius: 0.63rem;padding: 1.25rem 1.25rem 3.125rem;width: 37.75rem;flex: 0 0 37.75rem;max-width: 37.75rem;}
.ranking-panel .ranking-listing .rank-type-list .rank-title-wrap{display: flex;align-items: center;justify-content: space-between;margin-bottom: 1.875rem;}
.ranking-panel .ranking-listing .rank-type-list .rank-title-wrap h4{position: relative;font-size: 1.75rem;color: #31242F;font-weight: bold;padding: 0 1.75rem;line-height: 3.625rem;}
.ranking-panel .ranking-listing .rank-type-list .rank-title-wrap h4::before{content: "";position: absolute;top: 50%;left: 0;transform: translateY(-50%);width: 1.75rem;height: 3.625rem;background-image: url(../images/home/rank-title-left.webp);background-repeat: no-repeat;background-size: cover;}
.ranking-panel .ranking-listing .rank-type-list .rank-title-wrap h4::after{content: "";position: absolute;top: 50%;right: 0;transform: translateY(-50%);width: 1.75rem;height: 3.625rem;background-image: url(../images/home/rank-title-right.webp);background-repeat: no-repeat;background-size: cover;}
.ranking-panel .ranking-listing .rank-type-list .rank-list{display: flex;flex-direction: column;row-gap: 3rem;}
.ranking-panel .ranking-listing .rank-type-list .rank-list .rankWrap{display: flex;align-items: center;overflow: hidden;}
.ranking-panel .ranking-listing .rank-type-list .rank-list .rankWrap .rankNo{font-size: 1.875rem;font-weight: bold;color: #C4C4C4;width: 1.25rem;margin-right: 1.5rem;font-style: italic;}
.ranking-panel .ranking-listing .rank-type-list .rank-list .rankWrap:nth-child(1) .rankNo,
.ranking-panel .ranking-listing .rank-type-list .rank-list .rankWrap:nth-child(2) .rankNo,
.ranking-panel .ranking-listing .rank-type-list .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;}
.ranking-panel .ranking-listing .rank-type-list .rank-list .rankWrap .imgWrap{width: 7.5rem;height: 7.5rem;flex: 0 0 7.5rem;max-width: 7.5rem;margin-right: 1.75rem;}
.ranking-panel .ranking-listing .rank-type-list .rank-list .rankWrap .imgWrap img{width: 100%;height: 100%;border-radius: 1.75rem;object-fit: cover;}
.ranking-panel .ranking-listing .rank-type-list .rank-list .rankWrap .detailWrap{display: flex;flex-direction: column;max-width: 13.75rem;overflow: hidden;}
.ranking-panel .ranking-listing .rank-type-list .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;}
.ranking-panel .ranking-listing .rank-type-list .rank-list .rankWrap .detailWrap .typeWrap{display: flex;align-items: center;column-gap: 1rem;margin-bottom: 1rem;}
.ranking-panel .ranking-listing .rank-type-list .rank-list .rankWrap .detailWrap .typeWrap p{font-size: 1.25rem;color: #BABABA;position: relative;}
.ranking-panel .ranking-listing .rank-type-list .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;}
.ranking-panel .ranking-listing .rank-type-list .rank-list .rankWrap .detailWrap .dateUpdate{font-size: 1.25rem;color: #BABABA;}
.ranking-panel .ranking-listing .rank-type-list .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;}

.friendship-link-panel{padding-top: 2.75rem;background-color: #ffffff;padding-bottom: 2.5rem;}
.friendship-link-panel .friendship-title{display: flex;align-items: center;column-gap: 0.63rem;margin-bottom: 1.75rem;}
.friendship-link-panel .friendship-title img{width: 1.875rem;height: 1.875rem;object-fit: cover;}
.friendship-link-panel .friendship-title h2{font-size: 1.875rem;color: #31242F;font-weight: 400;}
.friendship-link-panel .link-list{display: flex;flex-wrap: wrap;column-gap: 1.25rem;row-gap: 1.25rem;}
.friendship-link-panel .link-list a{width: 9.75rem;height: 3.125rem;flex: 0 0 9.75rem;max-width: 9.75rem;background-color: #F7F7F7;border-radius: 0.63rem;text-align: center;line-height: 3.125rem;padding: 0 0.63rem;font-size: 1.5rem;color: #000000;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}