.hero-slider-banner{width: 100%;height: 400px;background-color: #029fff;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 .container::before, .hero-slider-banner .container::after { content: ""; position: absolute; top: 0; width: 200px; height: 100%; z-index: 2; }
.hero-slider-banner .container::before { left: 0; background: linear-gradient(to right, #029fff 0%, transparent 100%); }
.hero-slider-banner .container::after { right: 0; background: linear-gradient(to left, #029fff 0%, transparent 100%); }
.hero-slider-banner .hero-slider-pagination{position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);z-index: 3;display: flex;align-items: center;column-gap: 8px;}
.hero-slider-banner .hero-slider-pagination .swiper-pagination-bullet{width: 8px;height: 8px;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: 24px;border-radius: 4px;}

.hot-game-slider{padding-top: 20px;background-color: #f7f7f7;padding-bottom: 20px;}
.hot-game-slider .container{position: relative;display: flex;align-items: center;column-gap: 20px;}
.hot-game-swiper { height: 172px!important; overflow: hidden; }
.hot-game-slider .swiper-slide{display: flex;align-items: center;column-gap: 20px;}
.hot-game-slider .swiper-slide a{width: 172px;flex: 0 0 172px;max-width: 172px;display: flex;flex-direction: column;align-items: center;padding: 20px 14px;background-color: #ffffff;border-radius: 10px;height: 100%;height: 172px;transition: background-color .3s ease;}
.hot-game-slider .swiper-slide a:hover{background-color: #f0f0f0;}
.hot-game-slider .swiper-slide a .imgWrap{position: relative;width: 104px;height: 104px;}
.hot-game-slider .swiper-slide a .imgWrap .hotIcon{position: absolute;top: -12px;left: 50%;transform: translateX(-50%);width: 72px;height: auto;object-fit: cover;}
.hot-game-slider .swiper-slide a .imgWrap .hotGameImg{width: 100%;height: 100%;border-radius: 18px;margin-bottom: 7px;object-fit: cover;}
.hot-game-slider .swiper-slide a p{font-size: 16px;color: #000000;text-align: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.hot-game-slider .nagivationWrap{height: 172px;width: 45px;display: flex;flex-direction: column;row-gap: 24px;align-items: center;justify-content: center;background-color: #ffffff;border-radius: 10px;}
.hot-game-slider .nagivationWrap > div{width: 30px;height: 30px;border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: pointer;border: 1px solid #02A1FF4D;background-color: #EDF5FF;}
.hot-game-slider .nagivationWrap > div img{width: 15px;height: 9px;object-fit: cover;filter: brightness(0) saturate(100%) invert(57%) sepia(60%) saturate(5210%) hue-rotate(178deg) brightness(103%) contrast(102%);}
.hot-game-slider .nagivationWrap > div.prev img{margin-top: -1px;margin-left: 1px;}
.hot-game-slider .nagivationWrap > div.swiper-button-disabled{border: 1px solid #E4E4E4;background-color: #F7F7F7;}
.hot-game-slider .nagivationWrap > div.swiper-button-disabled img{filter: none;}

.device-app-panel{background-color: #f7f7f7;padding-bottom: 20px;}
.device-app-panel .device-type-wrap{background-color: #ffffff;border-radius: 10px;border: 1px solid #EEEEEE;padding: 15px 20px 15px 9px;display: flex;flex-direction: column;row-gap: 10px;}
.device-app-panel .device-type-wrap .deviceRow{display: flex;align-items: center;column-gap: 10px;}
.device-app-panel .device-type-wrap .deviceRow .deviceType{width: 72px;flex: 0 0 72px;max-width: 72px;height: 28px;border-radius: 14px;display: flex;align-items: center;justify-content: center;column-gap: 6px;background-color: #39EB82;}
.device-app-panel .device-type-wrap .deviceRow .deviceType.apple{background-color: #02A2FF;}
.device-app-panel .device-type-wrap .deviceRow .deviceType img{width: 13px;height: 16px;object-fit: contain;}
.device-app-panel .device-type-wrap .deviceRow .deviceType p{font-size: 14px;color: #ffffff;}
.device-app-panel .device-type-wrap .deviceRow .device-app-list{display: flex;align-items: center;}
.device-app-panel .device-type-wrap .deviceRow .device-app-list a{font-size: 14px;color: #000000;padding: 0 10px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 110px;position: relative;}
.device-app-panel .device-type-wrap .deviceRow .device-app-list a:first-child{padding: 0 10px 0 0; width: 100px;}
.device-app-panel .device-type-wrap .deviceRow .device-app-list a::after{content: "";position: absolute;top: 50%;right: 0;transform: translateY(-50%);width: 1px;height: 100%;background-color: #ebebeb;}
.device-app-panel .device-type-wrap .deviceRow .device-app-list a:last-child::after{display: none;}

.app-banner-panel{background-color: #f7f7f7;padding-bottom: 24px;}
.app-banner-panel .bannerWrap{display: flex;align-items: center;justify-content: space-between;}
.app-banner-panel .bannerWrap > a{width: 286px;flex: 0 0 286px;max-width: 286px;display: flex;flex-direction: column;row-gap: 10px;background-color: #ffffff;border-radius: 10px;}
.app-banner-panel .bannerWrap > a .appBanner{width: 100%;height: 160px;border-radius: 10px;object-fit: cover;}
.app-banner-panel .bannerWrap > a .appDetail{padding: 0 10px 22px;display: flex;align-items: center;column-gap: 10px;}
.app-banner-panel .bannerWrap > a .appDetail > img{width: 45px;height: 45px;border-radius: 10px;}
.app-banner-panel .bannerWrap > a .appDetail .detailWrap{display: flex;flex-direction: column;row-gap: 7px;overflow: hidden;}
.app-banner-panel .bannerWrap > a .appDetail .detailWrap h4{font-size: 16px;font-weight: bold;color: #000000;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.app-banner-panel .bannerWrap > a .appDetail .detailWrap p{font-size: 13px;color: #999999;white-space: nowrap;}

.recent-update-panel{background-color: #f7f7f7;padding-bottom: 28px;}
.recent-update-panel .tab-contents{margin-top: 16px;}
.recent-update-panel .tab-contents .tab-content{display: none;flex-wrap: wrap;column-gap: 24px;}
.recent-update-panel .tab-contents .tab-content.active{display: flex;}
.recent-update-panel .tab-contents .tab-content .appWrap{width: 384px;flex: 0 0 384px;max-width: 384px;display: flex;align-items: center;padding: 10px;}
.recent-update-panel .tab-contents .tab-content .appWrap:hover{background-color: #f0f0f0;}
.recent-update-panel .tab-contents .tab-content .appWrap .imgWrap{width: 70px;height: 70px;}
.recent-update-panel .tab-contents .tab-content .appWrap .imgWrap img{width: 100%;height: 100%;border-radius: 15px;object-fit: cover;}
.recent-update-panel .tab-contents .tab-content .appWrap .appDetail{display: flex;flex-direction: column;overflow: hidden;width: 200px;margin-left: 10px;}
.recent-update-panel .tab-contents .tab-content .appWrap .appDetail h4{font-size: 16px;color: #000000;margin-bottom: 4px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight: 400;}
.recent-update-panel .tab-contents .tab-content .appWrap .appDetail .typeWrap{display: flex;align-items: center;column-gap: 16px;margin-bottom: 6px;}
.recent-update-panel .tab-contents .tab-content .appWrap .appDetail .typeWrap p{font-size: 12px;color: #BABABA;position: relative;}
.recent-update-panel .tab-contents .tab-content .appWrap .appDetail .typeWrap p:first-child::after{content: "";position: absolute;top: 50%;right: -8px;transform: translateY(-50%);width: 1px;height: 75%;background-color: #BABABA;}
.recent-update-panel .tab-contents .tab-content .appWrap .appDetail .dateUpdate{font-size: 12px;color: #BABABA;}
.recent-update-panel .tab-contents .tab-content .appWrap .viewBtn{margin-left: auto;width: 62px;height: 28px;text-align: center;line-height: 26px;border-radius: 14px;border: 1px solid #0872FFBF;font-size: 14px;color: #0872FF;}
.recent-update-panel .tab-contents .tab-content .appWrap:hover .viewBtn{background: linear-gradient( 45deg, rgb(2,162,255) 0%, rgb(9,115,255) 100%);color: #ffffff;}

.app-listing-panel{margin-top: 24px;}
.app-listing-panel .app-listing-wrap{display: flex;column-gap: 22px;}
.app-listing-panel .app-listing-wrap .app-listing-left{width: 870px;flex: 0 0 870px;max-width: 870px;}
.app-listing-panel .app-listing-left .tab-contents{margin-top: 16px;}
.app-listing-panel .app-listing-left .tab-contents .tab-content{display: none;flex-wrap: wrap;column-gap: 48px;row-gap: 34px;}
.app-listing-panel .app-listing-left .tab-contents .tab-content.active{display: flex;}
.app-listing-panel .app-listing-left .tab-contents .tab-content .contItem{width: 104px;flex: 0 0 104px;max-width: 104px;display: flex;flex-direction: column;overflow: hidden;}
.app-listing-panel .app-listing-left .tab-contents .tab-content .contItem > img{width: 104px;height: 104px;border-radius: 26px;margin-bottom: 5px;border: 2px solid #BAB0FF80;}
.app-listing-panel .app-listing-left .tab-contents .tab-content .contItem h4{font-size: 16px;color: #000000;font-weight: 400;text-align: center;white-space: nowrap;margin-bottom: 4px;}
.app-listing-panel .app-listing-left .tab-contents .tab-content .contItem p{font-size: 14px;color: #BABABA;text-align: center;}

.news-panel{margin-top: 24px;}
.news-panel .news-listing-wrap{display: flex;column-gap: 22px;}
.news-panel .news-listing-wrap .news-listing-left{width: 870px;flex: 0 0 870px;max-width: 870px;}
.news-panel .news-listing-left .tab-contents{margin-top: 26px;}
.news-panel .news-listing-left .tab-contents .tab-content{display: none;flex-wrap: wrap;column-gap: 17px;row-gap: 24px;}
.news-panel .news-listing-left .tab-contents .tab-content.active{display: flex;}
.news-panel .news-listing-left .tab-contents .tab-content a{width: 278px;flex: 0 0 278px;max-width: 278px;display: flex;flex-direction: column;}
.news-panel .news-listing-left .tab-contents .tab-content a > img{width: 278px;height: 155px;object-fit: cover;margin-bottom: 7px;border-radius: 10px;}
.news-panel .news-listing-left .tab-contents .tab-content a > h4{font-size: 15px;color: #000000;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;margin-bottom: 5px;font-weight: 400;}
.news-panel .news-listing-left .tab-contents .tab-content a p{font-size: 12px;color: #BABABA;}
.news-panel .news-listing-left .tab-contents .tab-content a p span{margin-right: 16px;position: relative;}
.news-panel .news-listing-left .tab-contents .tab-content a p span::after{content: "";position: absolute;top: 50%;right: -8px;transform: translateY(-50%);width: 3px;height: 3px;background-color: #BABABA;border-radius: 50%;}

.topic-panel{margin-top: 32px;}
.topic-panel .topic-listing{margin-top: 28px;display: flex;flex-wrap: wrap;column-gap: 20px;row-gap: 20px;}
.topic-panel .topic-listing .topic-wrap{padding-bottom: 10px;border-radius: 10px;display: flex;flex-direction: column;row-gap: 6px;width: 284px;flex: 0 0 284px;max-width: 284px;transition: .3s ease;}
.topic-panel .topic-listing .topic-wrap .topic-banner-wrap{position: relative;width: 100%;height: 176px;overflow: hidden;border-radius: 10px;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: 10px;opacity: 0.8;}
.topic-panel .topic-listing .topic-wrap .topic-banner-wrap .topic-apps-list{position: absolute;z-index: 1;bottom: 20px;width: 100%;display: flex;column-gap: 14px;justify-content: center;}
.topic-panel .topic-listing .topic-wrap .topic-banner-wrap .topic-apps-list a{width: 49px;height: 49px;flex: 0 0 49px;max-width: 49px;display: flex;align-items: center;justify-content: center;border-radius: 10px;background-color: #ffffff80;}
.topic-panel .topic-listing .topic-wrap .topic-banner-wrap .topic-apps-list a img{width: 45px;height: 45px;object-fit: cover;border-radius: 10px;}
.topic-panel .topic-listing .topic-wrap h4{font-size: 16px;font-weight: bold;color: #000000;padding-right: 10px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;transition: .3s ease;}
.topic-panel .topic-listing .topic-wrap:hover{background-color: #F0F0F0;}
.topic-panel .topic-listing .topic-wrap:hover h4{padding-left: 10px;}

.ranking-panel{margin-top: 20px;}
.ranking-panel .ranking-listing{margin-top: 26px;display: flex;column-gap: 20px;}
.ranking-panel .ranking-listing .rank-type-list{background-color: #F7F7F7;border-radius: 10px;padding: 20px 20px 30px 16px;width: 386px;flex: 0 0 386px;max-width: 386px;}
.ranking-panel .ranking-listing .rank-type-list .rank-title-wrap{display: flex;align-items: center;justify-content: space-between;margin-bottom: 20px;padding-left: 4px;}
.ranking-panel .ranking-listing .rank-type-list .rank-title-wrap h4{position: relative;font-size: 18px;color: #31242F;font-weight: bold;padding: 0 24px;}
.ranking-panel .ranking-listing .rank-type-list .rank-title-wrap a{display: flex;align-items: center;}
.ranking-panel .ranking-listing .rank-type-list .rank-title-wrap a img{width: 20px;height: 4px;object-fit: cover;line-height: 20px;}
.ranking-panel .ranking-listing .rank-type-list .rank-title-wrap h4::before{content: "";position: absolute;top: 50%;left: 0;transform: translateY(-50%);width: 18px;height: 31px;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: 18px;height: 31px;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: 20px;}
.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: 20px;font-weight: bold;color: #62626266;width: 15px;margin-right: 20px;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: 70px;height: 70px;flex: 0 0 70px;max-width: 70px;margin-right: 10px;}
.ranking-panel .ranking-listing .rank-type-list .rank-list .rankWrap .imgWrap img{width: 100%;height: 100%;border-radius: 15px;object-fit: cover;}
.ranking-panel .ranking-listing .rank-type-list .rank-list .rankWrap .detailWrap{display: flex;flex-direction: column;max-width: 140px;overflow: hidden;}
.ranking-panel .ranking-listing .rank-type-list .rank-list .rankWrap .detailWrap h4{font-size: 16px;color: #000000;font-weight: 400;margin-bottom: 6px;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: 10px;margin-bottom: 9px;}
.ranking-panel .ranking-listing .rank-type-list .rank-list .rankWrap .detailWrap .typeWrap p{font-size: 12px;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: -5px;transform: translateY(-50%);width: 1px;height: 75%;background-color: #BABABA;}
.ranking-panel .ranking-listing .rank-type-list .rank-list .rankWrap .detailWrap .dateUpdate{font-size: 12px;color: #BABABA;}
.ranking-panel .ranking-listing .rank-type-list .rank-list .rankWrap .viewBtn{margin-left: auto;width: 72px;height: 28px;text-align: center;line-height: 26px;border-radius: 14px;border: 1px solid #0872FF4D;font-size: 14px;color: #0872FF;}
.ranking-panel .ranking-listing .rank-type-list .rank-list .rankWrap .viewBtn:hover{background: linear-gradient( 90deg, rgb(2,162,255) 0%, rgb(9,115,255) 100%);color: #ffffff;}

.friendship-link-panel{margin-top: 36px;}
.friendship-link-panel .friendship-title{display: flex;align-items: center;column-gap: 4px;margin-bottom: 20px;}
.friendship-link-panel .friendship-title img{width: 20px;height: 20px;object-fit: cover;}
.friendship-link-panel .friendship-title h2{font-size: 20px;color: #31242F;font-weight: 400;}
.friendship-link-panel .link-list{display: flex;flex-wrap: wrap;column-gap: 10px;row-gap: 10px;}
.friendship-link-panel .link-list a{width: 110px;height: 40px;flex: 0 0 110px;max-width: 110px;background-color: #F7F7F7;border-radius: 6px;text-align: center;line-height: 40px;padding: 0 10px;font-size: 14px;color: #000000;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}