.category-panel .category-wrap{background-color: #ffffff;border-radius: 5px;padding: 16px 24px 24px;display: flex;flex-direction: column;row-gap: 16px;}
.category-panel .category-wrap .category-title-wrap{position: relative;display: flex;flex-direction: column;row-gap: 4px;padding-left: 35px;}
.category-panel .category-wrap .category-title-wrap::before{position: absolute; content: ""; width: 25px; height: 25px; border: 10px solid #4AABFF; border-radius: 50%; border-bottom-color: transparent; border-left-color: transparent; transform: rotate(-135deg); left: 3px; margin-top: 7px;}
.category-panel .category-wrap .category-title-wrap h4{font-size: 26px;font-weight: bold;color: #010101;line-height: 35px;}
.category-panel .category-wrap .category-title-wrap strong{font-size: 26px;font-weight: bold;color: #010101;line-height: 35px;display: block;}
.category-panel .category-wrap .category-title-wrap p{font-size: 14px;color: #000000;line-height: 20px;position: relative;}
.category-panel .category-wrap .category-title-wrap p::after{position: absolute;content: "";width: 94px;height: 10px;background-color: #E5E5E5;transform: translateY(-50%);top: 50%;margin-left: 14px;}
.category-panel .category-wrap .category-list{display: flex;column-gap: 18px;row-gap: 18px;flex-wrap: wrap;}
.category-panel .category-wrap .category-list a{width: 128px;flex: 0 0 128px;max-width: 128px;height: 44px;line-height: 44px;text-align: center;padding: 0 10px;background-color: #F7F7F7;border-radius: 5px;color: #404040;font-size: 16px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
.category-panel .category-wrap .category-list a.active{background-color: #4AABFF;color: #FFFFFF;}

.app-listing-panel{margin-top: 24px;}
.app-listing-panel .appWrap{display: flex;flex-direction: column;row-gap: 30px;padding: 24px 24px 30px;background-color: #ffffff;border-radius: 5px;}
.app-listing-panel .appWrap .app-listing{display: flex;flex-wrap: wrap;column-gap: 16px;row-gap: 16px;}
.app-listing-panel .appWrap .app-listing a{width: 178px;flex: 0 0 178px;max-width: 178px;padding: 24px;background-color: #FFFFFF;border: 1px solid #EEEEEE;border-radius: 5px;display: flex;flex-direction: column;transition: background-color .3s ease;}
.app-listing-panel .appWrap .app-listing a .imgWrap{margin: 0 auto 8px;position: relative;width: 100px;height: 100px;}
.app-listing-panel .appWrap .app-listing a .imgWrap > img{width: 100px;height: 100px;object-fit: cover;display: block;border-radius: 24px;position: relative;}
.app-listing-panel .appWrap .app-listing a h4{font-size: 16px;color: #404040;text-align: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight: normal;transition: .3s all;}
.app-listing-panel .appWrap .app-listing a p{font-size: 16px;color: #404040;text-align: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight: normal;transition: .3s all;}
.app-listing-panel .appWrap .app-listing a .viewNowBtn{width: 100px;height: 36px;line-height: 36px;text-align: center;background-color: #ffffff;border: 1px solid #CCCCCC;font-size: 14px;color: #999999;border-radius: 18px;margin: 10px auto 0;}
.app-listing-panel .appWrap .app-listing a .detailWrap{display: none;flex-direction: column;row-gap: 5px;padding-left: 5px;margin-top: 8px;}
.app-listing-panel .appWrap .app-listing a .detailWrap p{font-size: 14px;color: #ffffff;}
.app-listing-panel .appWrap .app-listing a .detailWrap p:nth-child(3){display: none;}
.app-listing-panel .appWrap .app-listing a:hover .detailWrap{display: flex;}
.app-listing-panel .appWrap .app-listing a:hover .viewNowBtn{display: none;}
.app-listing-panel .appWrap .app-listing a:hover{ background-color: #4AABFF;border-color:#4AABFF}
.app-listing-panel .appWrap .app-listing a:hover h4{color: #ffffff;font-weight: bold;}
.app-listing-panel .appWrap .app-listing a:hover p{color: #ffffff;font-weight: bold;}
.app-listing-panel .appWrap .app-listing a:hover .imgWrap::before{position: absolute;content: "";width: 104px;height: 104px;background-color: #ffffff;border-radius: 24px;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.app-listing-panel .appWrap .app-listing a:hover{padding: 24px 22px 17px;}

.app-listing-panel .appWrap .pagination{display: flex;align-items: center;column-gap: 6px;margin: 0 auto;}
.app-listing-panel .appWrap .pagination > div.package{width: 50px;height: 36px;border: 1px solid #4AABFF;border-radius: 5px;text-align: center;line-height: 36px;}
.app-listing-panel .appWrap .pagination > div.package > a{color:#4AABFF;display: flex;align-items: center;justify-content: center;width: 50px;height: 36px;}
.app-listing-panel .appWrap .pagination > div.package img{width: 18px;filter: brightness(0) saturate(100%) invert(51%) sepia(100%) saturate(444%) hue-rotate(177deg) brightness(102%) contrast(101%);}
.app-listing-panel .appWrap .pagination > a{width: 28px;height: 36px;border-radius: 4px;display: flex;align-items: center;justify-content: center;font-size: 14px;color: #666666;}
.app-listing-panel .appWrap .pagination > a.current{background-color: #4AABFF;color: #ffffff;}