.community-list{position:relative;font-size:16px}.community-list-wrapper{display:grid;grid-gap:24px 24px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.community-list-wrapper.pc-style .set-item-container:hover{box-shadow:0 0 0 1px inset #0000001a,0 5px 20px #00010314}.community-list-wrapper.app-style .set-item-title .title-text{font-size:1.06em}.community-list-wrapper .set-item{background-color:#fff;position:relative;background-position:center center;background-repeat:no-repeat;background-size:cover;border-radius:8px}.community-list-wrapper .set-item-container{position:relative;display:flex;flex-direction:column;border-radius:8px;padding:1.4em;box-shadow:0 0 0 1px inset #0000001a,0 5px 15px #0001030a}.community-list-wrapper .set-item-container.set-item-covered{background:linear-gradient(#0000001a,#00000080);color:#fff}.community-list-wrapper .set-item-container.set-item-covered .set-item-title .title-holder,.community-list-wrapper .set-item-container.set-item-covered .author .name,.community-list-wrapper .set-item-container.set-item-covered .analytics{color:#fff}.community-list-wrapper .set-item-container.set-item-covered .share-status{border-color:#ffffff4d;color:#fff;background:#00000080}.community-list-wrapper .share-status{position:absolute;z-index:1;right:12px;top:12px;padding:3px 8px;border:1px solid transparent;border-radius:10px;font-size:11px;line-height:1.2}.community-list-wrapper .share-status-published{color:#278500;background:#effbe8}.community-list-wrapper .share-status-pending{color:#ad6800;background:#fff7e6}.community-list-wrapper .share-status-hidden{color:#7b7b7d;background:#f3f3f3}.community-list-wrapper .share-status+div .set-item-title{padding-right:68px}.community-list-wrapper .set-item-title{padding-bottom:1em;box-sizing:border-box;position:relative;width:100%}.community-list-wrapper .set-item-title .title-text{width:100%;height:1.5em;line-height:1.5em;font-size:.92em;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:break-all}.community-list-wrapper .set-item-title .title-text .title-holder{color:#a5a5a7}.community-list-wrapper .set-detail{display:flex;justify-content:space-between;align-items:center;width:100%;box-sizing:border-box;height:24px}.community-list-wrapper .set-detail .author{display:flex;flex:1;position:relative;height:20px;align-items:center}.community-list-wrapper .set-detail .author .photo{display:block;width:16px;height:16px;border-radius:50%;position:relative;background-position:center center;background-repeat:no-repeat;background-size:cover}.community-list-wrapper .set-detail .author .photo:after{content:" ";display:block;position:absolute;box-sizing:border-box;left:0;top:0;width:100%;height:100%;border:1px solid rgba(0,0,0,.03);border-radius:50%}.community-list-wrapper .set-detail .author .name{display:block;color:#404042;font-size:13px;height:20px;line-height:20px;position:absolute;width:100%;padding-left:22px;box-sizing:border-box;left:0;top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:break-all}.community-list-wrapper .set-detail .analytics{display:flex;align-items:center;color:#404042;font-size:13px}.community-list-wrapper .set-detail .analytics>span{display:flex;flex-wrap:nowrap;align-items:center;margin-left:15px}.community-list-wrapper .set-detail .analytics svg{margin-right:4px}body.app-dark-mode .community-list-wrapper .share-status-published{color:#9be278;background:#58cc022e}body.app-dark-mode .community-list-wrapper .share-status-pending{color:#ffc46b;background:#ff9d142e}body.app-dark-mode .community-list-wrapper .share-status-hidden{color:#b5becc;background:#2a313c}.app-banner{width:100%;height:280px;border-radius:8px;background-size:cover;background-position:center center}.app-banner .app-banner-content{border-radius:8px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:100%;border:1px solid rgba(0,0,0,.03)}.app-banner .banner-title{margin:0;color:#0000008c;font-weight:400;font-size:40px}.app-banner .banner-search{width:80%;max-width:480px;margin-top:35px;position:relative}.app-banner .banner-search input{box-sizing:border-box;margin:0;border:none;box-shadow:0 0 1px #0000004d;height:38px;width:100%;border-radius:4px;padding-left:40px}.app-banner .banner-search .icon{display:flex;justify-content:center;align-items:center;height:38px;width:38px;position:absolute;left:2px;top:0;color:#00000080}.app-banner .banner-desc{padding:0 20px;margin-top:20px;font-size:16px;color:#0000008c}.app-banner .banner-learn{margin-top:15px;color:#00000073;cursor:pointer;border-bottom:1px solid rgba(0,0,0,.25)}.app-banner .share-tutorial{max-width:400px;text-align:center}.app-banner .share-tutorial .screen-wrapper{border:1px solid #EEEFF0;border-radius:4px;padding:10px 0 15px;display:flex;justify-content:center;align-items:center;margin-top:15px}.app-banner .share-tutorial .tutorial-screen{background:url(https://cdn.qingk.com/assets/community/share-tutorial.png) center center no-repeat;background-size:contain;width:320px;height:200px}.app-banner .share-tutorial .ttr-footer{display:flex;justify-content:center;margin-top:20px}.app-banner .share-tutorial .ttr-footer .button{width:130px}.nav-categories{margin-top:30px}.nav-categories .nav-cate-row{display:flex;align-items:center}.nav-categories .nav-cate-first{border-bottom:1px solid #EEEFF0;flex-wrap:wrap}.nav-categories .nav-cate-first .nav-cate-item{flex-shrink:0;height:46px;box-sizing:border-box;display:flex;align-items:center;padding:0 16px;margin-right:6px;font-size:16px;font-weight:500;border-bottom:3px solid transparent;border-top:3px solid transparent;transform:translateY(1px);cursor:pointer}.nav-categories .nav-cate-first .nav-cate-item:hover{border-bottom-color:#eff1f4}.nav-categories .nav-cate-first .nav-cate-item.nav-cate-current{border-bottom:3px solid #FFC800}.nav-categories .nav-cate-second{display:flex;flex-wrap:wrap}.nav-categories .nav-cate-second .nav-cate-item{display:flex;align-items:center;height:32px;padding:0 16px;border-radius:4px;background:#0000000f;margin-right:12px;margin-top:12px;cursor:pointer}.nav-categories .nav-cate-second .nav-cate-item.nav-cate-current{color:#ffa900;font-weight:700;background:#fff4cc}.community-view-tabs{display:inline-flex;gap:3px;margin-top:24px;padding:3px;border-radius:8px;background:#0000000e}.community-view-tabs button{height:34px;padding:0 16px;border:0;border-radius:6px;color:#5f5f64;background:transparent;font-size:14px;cursor:pointer}.community-view-tabs button.current{color:#1d1d1f;background:#fff;box-shadow:0 1px 4px #0000001a;font-weight:500}.community-view-tabs+.nav-categories{margin-top:16px}.recommend,.trending{position:relative}.recommend h1,.trending h1{display:flex;height:32px;align-items:center;font-size:15px;font-weight:500;margin:40px 0 10px 5px}.recommend .search-container,.trending .search-container{display:flex;align-items:center}.recommend .search-container .button,.trending .search-container .button{margin-left:30px}.recommend .list-holder,.trending .list-holder{width:100%;display:flex;justify-content:center;align-items:center;color:#7b7b7d;font-size:16px;height:200px}.trending h1{justify-content:space-between}.trending .sort-bar{display:flex;gap:6px}.trending .sort-chip{height:26px;line-height:26px;padding:0 12px;border-radius:13px;font-size:13px;font-weight:400;cursor:pointer;background:#0000000f;color:#0000008c;-webkit-user-select:none;user-select:none}.trending .sort-chip:hover{background:#0000001a}.trending .sort-chip.sort-chip-active{background:#fff4cc;color:#ffc800;font-weight:500}.mine-trending h1{margin-top:24px}.trending-split{border-top:1px solid #d8d8d8;margin-top:30px;transform:scaleY(.4)}.mine-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:240px;color:#7b7b7d;text-align:center}.mine-empty .mine-empty-title{color:#1d1d1f;font-size:17px;font-weight:500}.mine-empty .mine-empty-desc{margin:8px 0 0;font-size:14px}body.app-dark-mode .community-view-tabs{background:#ffffff14}body.app-dark-mode .community-view-tabs button{color:#b5becc}body.app-dark-mode .community-view-tabs button.current{color:#eff4fb;background:#2a313c;box-shadow:none}body.app-dark-mode .mine-empty .mine-empty-title{color:#eaf0f8}@media screen and (max-width:1024px){.app-banner{height:260px}.community-list-wrapper{grid-gap:20px 20px}}@media screen and (max-width:720px){.community-view-tabs{width:100%;box-sizing:border-box}.community-view-tabs button{flex:1}.app-banner{height:240px}.app-banner .banner-title{font-size:32px}.app-banner .banner-search{margin-top:20px}}