.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{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-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}.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:#c9c9c9}.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}.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-split{border-top:1px solid #d8d8d8;margin-top:30px;transform:scaleY(.4)}@media screen and (max-width:1024px){.app-banner{height:260px}.community-list-wrapper{grid-gap:20px 20px}}@media screen and (max-width:720px){.app-banner{height:240px}.app-banner .banner-title{font-size:32px}.app-banner .banner-search{margin-top:20px}}