body{background-color: #f7f7f7;}
.app-page-content{margin-top: 14px;}
.app-page-content .app-hot-banner{width: 100%;height: 300px;position: relative;overflow: hidden;border-radius: 10px;display: flex;column-gap: 20px;padding: 20px;background-color: #ffffff;border: 1px solid #70707012;}
.app-page-content .app-hot-banner .hot-banner{position: relative;width: 635px;flex: 0 0 635px;max-width: 635px;height: 260px;background-color: #000000;border-radius: 10px;}
.app-page-content .app-hot-banner .hot-banner > img{width: 635px;height: 260px;object-fit: cover;border-radius: 10px;position: absolute;left: 0;top: 0;opacity: 0.8;}
.app-page-content .app-hot-banner .hot-banner .bannerDetail{padding: 0 20px;position: absolute;bottom: 20px;display: flex;align-items: center;column-gap: 10px;}
.app-page-content .app-hot-banner .hot-banner .bannerDetail img{width: 50px;height: 50px;border-radius: 10px;object-fit: cover;border: 2.5px solid #ffffff80;}
.app-page-content .app-hot-banner .hot-banner .bannerDetail .detailWrap{display: flex;flex-direction: column;row-gap: 8px;overflow: hidden;}
.app-page-content .app-hot-banner .hot-banner .bannerDetail .detailWrap h4{font-size: 16px;color: #ffffff;font-weight: bold;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.app-page-content .app-hot-banner .hot-banner .bannerDetail .detailWrap p{font-size: 13px;color: #ffffff;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.app-page-content .app-hot-banner .hot-of-the-week{display: flex;flex-direction: column;row-gap: 18px;width: 504px;flex: 0 0 504px;max-width: 504px;}
.app-page-content .app-hot-banner .hot-of-the-week .title{display: flex;align-items: center;column-gap: 4px;}
.app-page-content .app-hot-banner .hot-of-the-week .title h2{font-size: 18px;color: #31242F;font-weight: bold;}
.app-page-content .app-hot-banner .hot-of-the-week .title img{width: 15px;height: 18px;object-fit: cover;}
.app-page-content .app-hot-banner .hot-of-the-week .hot-app-list{display: flex;flex-wrap: wrap;column-gap: 38px;row-gap: 24px;}
.app-page-content .app-hot-banner .hot-of-the-week .hot-app-list a{width: 70px;flex: 0 0 70px;max-width: 70px;display: flex;flex-direction: column;row-gap: 6px;}
.app-page-content .app-hot-banner .hot-of-the-week .hot-app-list a img{width: 70px;height: 70px;object-fit: cover;border-radius: 15px;}
.app-page-content .app-hot-banner .hot-of-the-week .hot-app-list a p{font-size: 14px;color: #000000;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: center;}

.app-page-content .app-listing-panel{display: flex ; flex-direction: column; background: linear-gradient(0deg, rgb(255, 255, 255) 70%, rgb(246, 247, 247) 100%); border-radius: 0 0 10px 10px; border-bottom: 1px solid #70707012; padding: 10px 20px 40px;}
.app-page-content .app-listing-panel .category-list{display: flex;flex-wrap: wrap;column-gap: 10px;row-gap: 14px;padding-bottom: 16px;border-bottom: 1px dashed #02A1FF33;}
.app-page-content .app-listing-panel .category-list a{width: 106px;flex: 0 0 106px;max-width: 106px;height: 36px;text-align: center;line-height: 36px;border-radius: 6px;background: #FFFFFF;font-size: 14px;color: #999999;}
.app-page-content .app-listing-panel .category-list a.active, .app-page-content .app-listing-panel .category-list a.active:hover{color: #ffffff;font-weight: bold;background: linear-gradient( 90deg, rgb(2,162,255) 0%, rgb(9,115,255) 100%);}
.app-page-content.app-page .app-listing-panel .category-list a.active, .app-page-content.app-page .app-listing-panel .category-list a.active:hover{background: #39eb82;color: #ffffff;}
.app-page-content .app-listing-panel .category-list a:hover{background: #f5fbff;color: #02a1ff;}
.app-page-content.app-page .app-listing-panel .category-list a:hover{color: #39eb82;}
.app-page-content .app-listing-panel .app-listing{margin-top: 20px;display: flex;flex-wrap: wrap;column-gap: 16px;row-gap: 20px;}
.app-page-content .app-listing-panel .app-listing .appWrap{display: flex;align-items: center;padding: 10px;border-radius: 10px;width: 376px;flex: 0 0 376px;max-width: 376px;height: 90px;}
.app-page-content .app-listing-panel .app-listing .appWrap:hover{background: #f5fbff;}
.app-page-content .app-listing-panel .app-listing .appWrap .imgWrap{width: 70px;height: 70px;}
.app-page-content .app-listing-panel .app-listing .appWrap .imgWrap img{width: 100%;height: 100%;border-radius: 15px;object-fit: cover;}
.app-page-content .app-listing-panel .app-listing .appWrap .appDetail{display: flex;flex-direction: column;overflow: hidden;width: 180px;margin-left: 10px;}
.app-page-content .app-listing-panel .app-listing .appWrap .appDetail h4{font-size: 16px;color: #000000;margin-bottom: 4px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight: 400;}
.app-page-content .app-listing-panel .app-listing .appWrap .appDetail .typeWrap{display: flex;align-items: center;column-gap: 16px;margin-bottom: 6px;}
.app-page-content .app-listing-panel .app-listing .appWrap .appDetail .typeWrap p{font-size: 12px;color: #BABABA;position: relative;}
.app-page-content .app-listing-panel .app-listing .appWrap .appDetail .typeWrap p:first-child::after{content: "";position: absolute;top: 50%;right: -8px;transform: translateY(-50%);width: 1px;height: 75%;background-color: #BABABA;}
.app-page-content .app-listing-panel .app-listing .appWrap .appDetail .dateUpdate{font-size: 12px;color: #BABABA;}
.app-page-content .app-listing-panel .app-listing .appWrap .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;}
.app-page-content .app-listing-panel .app-listing .appWrap .viewBtn:hover{background: linear-gradient( 90deg, rgb(2,162,255) 0%, rgb(9,115,255) 100%);color: #ffffff;}