footer {margin-top: 0px;}
h1 {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;}
.hero-slider-panel{margin-top: 32px;}
.hero-slider-panel .swiper-slide{display: flex;flex-direction: column;margin-right: 26px;max-width: 457px;overflow: hidden;}
.hero-slider-panel .swiper-slide .bannerWrap{width: 100%;aspect-ratio: 16 / 9;overflow: hidden;}
.hero-slider-panel .swiper-slide .bannerWrap img{width: 100%;height: 100%;object-fit: cover;object-position: center;border-radius: 10px;display: block;}
.hero-slider-panel .swiper-slide .detailWrap{display: flex;align-items: flex-end;column-gap: 16px;margin-top: -44px;padding-left: 27px;}
.hero-slider-panel .swiper-slide .detailWrap .imgWrap{width: 88px;flex: 0 0 88px;max-width: 88px;height: 88px;border-radius: 25px;border: 3px solid #ffffff;}
.hero-slider-panel .swiper-slide .detailWrap .imgWrap img{width: 100%;height: 100%;object-fit: cover;object-position: center;border-radius: 25px;}
.hero-slider-panel .swiper-slide .detailWrap .appName{font-size: 16px;font-weight: bold;color: #060D1F;padding-bottom: 10px;flex: 1;flex-shrink: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.hero-slider-panel .swiper-slide .detailWrap .viewBtn{width: 58px;flex: 0 0 58px;max-width: 58px;height: 32px;line-height: 32px;text-align: center;border-radius: 10px;background-color: #54C5FF;font-size: 14px;font-weight: bold;color: #FFFFFF;}

.rec-game-panel{margin-top: 35px;}
.rec-game-panel .rec-game-list{margin-top: 22px;display: flex;align-items: center;column-gap: 24px;}
.rec-game-panel .rec-game-list .appWrap{position: relative;width: 279px;flex: 0 0 279px;max-width: 279px;height: 115px;display: flex;align-items: center;column-gap: 17px;padding-right: 28px;z-index: 1;}
.rec-game-panel .rec-game-list .appWrap::before{content: "";position: absolute;bottom: 0;right: 0;width: 79px;height: 79px;background-image: url(../images/home/recBookIcon.webp);background-position: center;background-repeat: no-repeat;background-size: cover;z-index: -1;}
.rec-game-panel .rec-game-list .appWrap::after{content: "";position: absolute;top: 50%;transform: translateY(-50%);right: 0;width: 264px;height: 115px;background-image: url(../images/home/recBg1.webp);background-position: center;background-repeat: no-repeat;background-size: cover;z-index: -2;}
.rec-game-panel .rec-game-list .appWrap:nth-child(2)::after{background-image: url(../images/home/recBg2.webp);background-position: center;background-repeat: no-repeat;background-size: cover;}
.rec-game-panel .rec-game-list .appWrap:nth-child(3)::after{background-image: url(../images/home/recBg3.webp);background-position: center;background-repeat: no-repeat;background-size: cover;}
.rec-game-panel .rec-game-list .appWrap:nth-child(4)::after{background-image: url(../images/home/recBg4.webp);background-position: center;background-repeat: no-repeat;background-size: cover;}
.rec-game-panel .rec-game-list .appWrap .imgWrap{width: 88px;flex: 0 0 88px;max-width: 88px;height: 88px;border-radius: 25px;}
.rec-game-panel .rec-game-list .appWrap .imgWrap img{width: 100%;height: 100%;object-fit: cover;object-position: center;border-radius: 25px;}
.rec-game-panel .rec-game-list .appWrap .detailWrap{display: flex;flex-direction: column;flex: 1;flex-shrink: 0;row-gap: 7px;overflow: hidden;}
.rec-game-panel .rec-game-list .appWrap .detailWrap .appName{font-size: 18px;font-weight: bold;color: #FFFFFF;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.rec-game-panel .rec-game-list .appWrap .detailWrap .infoWrap{display: flex;align-items: center;column-gap: 8px;}
.rec-game-panel .rec-game-list .appWrap .detailWrap .infoWrap p{font-size: 14px;color: #FFFFFF;}
.rec-game-panel .rec-game-list .appWrap .detailWrap .infoWrap i{width: 1px;height: 14px;background-color: #ffffff;transform: rotate(20deg);}
.rec-game-panel .rec-game-list .appWrap .detailWrap .appContent{font-size: 14px;color: #FFFFFF;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

.app-listing-panel{margin-top: 34px;}
.app-listing-panel .app-listing{margin-top: 20px;display: flex;flex-wrap: wrap;column-gap: 25px;row-gap: 25px;}
.app-listing-panel .app-listing .appWrap{width: calc(25% - 20px);flex: 0 0 calc(25% - 20px);max-width: calc(25% - 20px);display: flex;align-items: center;column-gap: 16px;}
.app-listing-panel .app-listing .appWrap .imgWrap{width: 88px;flex: 0 0 88px;max-width: 88px;height: 88px;border-radius: 25px;transition: transform .3s ease;}
.app-listing-panel .app-listing .appWrap .imgWrap img{width: 100%;height: 100%;object-fit: cover;object-position: center;border-radius: 25px;}
.app-listing-panel .app-listing .appWrap .detailWrap{display: flex;flex-direction: column;flex: 1;flex-shrink: 0;overflow: hidden;row-gap: 10px;}
.app-listing-panel .app-listing .appWrap .detailWrap .appName{font-size: 16px;color: #091F17;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;line-height: 1.25;}
.app-listing-panel .app-listing .appWrap .detailWrap .appType{font-size: 14px;color: #999999;line-height: 1.25;}
.app-listing-panel .app-listing .appWrap .detailWrap > p{font-size: 14px;color: #999999;line-height: 1.25;}
.app-listing-panel .app-listing .appWrap:hover .detailWrap .appName{font-weight: bold;color: #54C5FF;}
.app-listing-panel .app-listing .appWrap:hover .imgWrap{transform: scale(1.1);}

.rank-nav-panel{margin-top: 38px;}
.rank-nav-panel .container{display: flex;column-gap: 25px;align-items: center;}
.rank-nav-panel .rank-nav-wrap{width: calc(25% - 20px);flex: 0 0 calc(25% - 20px);max-width: calc(25% - 20px);height: 50px;background-color: #E5F6FF;border-radius: 25px;display: flex;align-items: center;padding: 0 30px;position: relative;z-index: 1;overflow: hidden;}
.rank-nav-panel .rank-nav-wrap::after{content: "";position: absolute;top: 9px;right: 97px;width: 42px;height: 50px;background-image: url(../images/home/starsIcon.webp);background-position: center;background-repeat: no-repeat;background-size: cover;z-index: -1;}
.rank-nav-panel .rank-nav-wrap .rank-nav{display: flex;flex-direction: column;width: 100%;}
.rank-nav-panel .rank-nav-wrap .rank-nav .rank-title{font-size: 14px;font-weight: bold;color: #060D1F;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 145px;}
.rank-nav-panel .rank-nav-wrap .rank-nav .amountWrap{position: relative;padding-left: 19px;font-size: 12px;color: #54C5FF;}
.rank-nav-panel .rank-nav-wrap .rank-nav .amountWrap::before{content: "";position: absolute;top: 50%;transform: translateY(-50%);left: 0;width: 16px;height: 16px;background-image: url(../images/home/packageIcon.webp);background-position: center;background-repeat: no-repeat;background-size: cover;}
.rank-nav-panel .rank-nav-wrap .top-three-wrap{position: absolute;z-index: 1;top: 50%;transform: translateY(-50%);right: 14px;display: flex;align-items: center;}
.rank-nav-panel .rank-nav-wrap .top-three-wrap a{width: 28px;flex: 0 0 28px;max-width: 28px;height: 28px;border-radius: 50%;border: 2px solid #ffffff;position: relative;}
.rank-nav-panel .rank-nav-wrap .top-three-wrap a img{width: 100%;height: 100%;border-radius: 50%;object-fit: cover;object-position: center;}
.rank-nav-panel .rank-nav-wrap .top-three-wrap a:nth-child(1){z-index: 3;margin-right: -8px;}
.rank-nav-panel .rank-nav-wrap .top-three-wrap a:nth-child(2){z-index: 2;margin-right: -8px;}
.rank-nav-panel .rank-nav-wrap .top-three-wrap a:nth-child(3){z-index: 1;}
.rank-nav-panel .rank-nav-wrap:hover{background-color: #54C5FF;}
.rank-nav-panel .rank-nav-wrap:hover .rank-nav .rank-title{color: #ffffff;}
.rank-nav-panel .rank-nav-wrap:hover .rank-nav .amountWrap{color: #ffffff;}
.rank-nav-panel .rank-nav-wrap:hover .rank-nav .amountWrap::before{filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(4499%) hue-rotate(80deg) brightness(107%) contrast(108%);}
.rank-nav-panel .rank-nav-wrap:hover::after{opacity: 0.2;}

.app-type-panel{margin-top: 36px;}
.app-type-panel .app-listing{margin-top: 20px;display: flex;align-items: center;column-gap: 35px;}
.app-type-panel .app-listing .appWrap{width: 88px;flex: 0 0 88px;max-width: 88px;display: flex;flex-direction: column;}
.app-type-panel .app-listing .appWrap .imgWrap{width: 100%;height: 88px;border-radius: 25px;margin-bottom: 12px;transition: transform .3s ease;}
.app-type-panel .app-listing .appWrap .imgWrap img{width: 100%;height: 100%;object-fit: cover;object-position: center;border-radius: 25px;}
.app-type-panel .app-listing .appWrap .appName{font-size: 14px;color: #333333;line-height: 20px;text-align: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.app-type-panel .app-listing .appWrap .rating{text-align: center;padding-left: 16px;position: relative;font-size: 14px;color: #FA8B16;width: fit-content;margin: 3px auto 0;}
.app-type-panel .app-listing .appWrap .rating::before{content: "";position: absolute;top: 50%;transform: translateY(-50%);left: 0;width: 13px;height: 12px;background-image: url(../images/home/star.webp);background-position: center;background-repeat: no-repeat;background-size: contain;}
.app-type-panel .app-listing .appWrap:hover .imgWrap{transform: scale(1.1);}

.type-update-panel{margin-top: 32px;}
.type-update-panel .tab-buttons{margin-top: 20px;display: flex;align-items: center;column-gap: 25px;}
.type-update-panel .tab-buttons li{cursor: pointer;width: 88px;flex: 0 0 88px;max-width: 88px;height: 32px;text-align: center;line-height: 32px;border-radius: 16px;background-color: #F4F6F8;font-size: 14px;color: #4D4D4D;}
.type-update-panel .tab-buttons li.active{background-color: #54C5FF;color: #ffffff;}
.type-update-panel .tab-contents{margin-top: 24px;display: flex;align-items: center;flex-wrap: nowrap;}
.type-update-panel .tab-content{display: none;flex-wrap: wrap;column-gap: 25px;row-gap: 25px;}
.type-update-panel .tab-content.active{display: flex;}
.type-update-panel .appWrap{width: calc(20% - 20px);flex: 0 0 calc(20% - 20px);max-width: calc(20% - 20px);display: flex;align-items: center;column-gap: 14px;}
.type-update-panel .appWrap .imgWrap{width: 88px;flex: 0 0 88px;max-width: 88px;height: 88px;border-radius: 25px;transition: transform .3s ease;}
.type-update-panel .appWrap .imgWrap img{width: 100%;height: 100%;object-fit: cover;object-position: center;border-radius: 25px;}
.type-update-panel .appWrap .detailWrap{display: flex;flex-direction: column;flex: 1;flex-shrink: 0;overflow: hidden;row-gap: 10px;}
.type-update-panel .appWrap .detailWrap .appName{font-size: 16px;color: #091F17;overflow: hidden;white-space: nowrap;line-height: 1.25;max-width: 112px;}
.type-update-panel .appWrap .detailWrap .appType{font-size: 14px;color: #999999;line-height: 1.25;}
.type-update-panel .appWrap .detailWrap > p{font-size: 14px;color: #999999;line-height: 1.25;}
.type-update-panel .appWrap:hover .detailWrap .appName{color: #54C5FF;font-weight: bold;}
.type-update-panel .appWrap:hover .imgWrap{transform: scale(1.1);}

.type-update-panel .tab-buttons a {
    cursor: pointer;
    width: 88px;
    flex: 0 0 88px;
    max-width: 88px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    border-radius: 16px;
    background-color: #F4F6F8;
    font-size: 14px;
    color: #4D4D4D;
}
.type-update-panel .tab-buttons a.active{background-color: #54C5FF;color: #ffffff;}


.topic-panel{margin-top: 40px;padding: 35px 0 40px;background: linear-gradient( 100deg, rgb(58,248,130,0.3) 0%, rgb(81,244,77,0.3) 100%);}
.topic-panel.app{background: #e9eeff;}
.topic-panel .moreBtn{border-top: 2px solid #C1E0C5; border-right: 2px solid #C1E0C5; }
.topic-panel .topic-listing {margin-top: 24px;display: flex;flex-direction: column;row-gap: 26px;overflow: hidden;}
.topic-panel .topic-listing .topic-list-row{overflow-x: scroll;display: flex;align-items: center;column-gap: 20px;flex-wrap: nowrap;width: max-content; animation: marquee 20s linear infinite;}
.topic-panel .topic-listing .topic-list-row:nth-child(2){animation: marquee 18s linear infinite;}
.topic-panel .topic-listing .topic-list-row:nth-child(3){animation: marquee 16s linear infinite;}
.topic-panel .topic-listing .topic-list-row::-webkit-scrollbar{height: 0;}
.topic-panel .topic-listing .topic-list-row .topicWrap{width: fit-content;height: 40px;display: flex;align-items: center;column-gap: 12px;border-radius: 20px;background-color: #FFFFFF;padding-right: 14px;}
.topic-panel .topic-listing .topic-list-row .topicWrap .imgWrap{width: 40px;flex: 0 0 40px;max-width: 40px;height: 40px;border-radius: 50%;}
.topic-panel .topic-listing .topic-list-row .topicWrap .imgWrap img{width: 100%;height: 100%;object-fit: cover;object-position: center;border-radius: 50%;}
.topic-panel .topic-listing .topic-list-row .topicWrap .topicName{font-size: 14px;color: #060D1F;line-height: 1.25;}
.topic-panel .topic-listing .topic-list-row .topicWrap:hover{background-color: #54C5FF;}
.topic-panel .topic-listing .topic-list-row .topicWrap:hover .topicName{color: #FFFFFF;}
.topic-panel .topic-listing .topic-list-row:hover{ animation-play-state: paused; }

.friendship-link-panel{background-color: #3D3D3D;padding: 16px 0;}
.friendship-link-panel .linkWrap{display: flex;align-items: center;column-gap: 5px;}
.friendship-link-panel .linkWrap > p{position: relative;white-space: nowrap;padding-left: 30px;font-size: 14px;font-weight: bold;color: #CCCCCC;line-height: 24px;}
.friendship-link-panel .linkWrap > p::before{content: "";position: absolute;top: 50%;transform: translateY(-50%);left: 0;width: 20px;height: 20px;background-image: url(../images/linkIcon.webp);background-position: center;background-repeat: no-repeat;background-size: cover;}
.friendship-link-panel .linkWrap .link-list{display: flex;align-items: center;flex-wrap: wrap;column-gap: 28px;row-gap: 16px;}
.friendship-link-panel .linkWrap .link-list a{font-size: 14px;color: #CCCCCC;line-height: 24px;}