.article-banner{width:100%;height:392px;flex-shrink:0;background:linear-gradient(0deg,#011828 0%,#000 100%);position:relative;padding-top:63px;display:flex;justify-content:center;align-items:center;flex-direction:column;margin-bottom:60px}.article-banner::before{content:'';position:absolute;left:0;top:63px;width:274px;height:168px;background:url(https://images.musicful.ai/musicfulkr/assets/article/banner-left--icon.png) no-repeat left top / contain}.article-banner::after{content:'';position:absolute;right:0;top:84px;width:262px;height:309px;background:url(https://images.musicful.ai/musicfulkr/assets/article/banner-right--icon.png) no-repeat center top / contain}.article-banner h1{color:#FFF;text-align:center;font-size:48px;font-weight:400;line-height:150%;margin-bottom:30px}.article-banner h1 .green-text{color:#2cf370}.article-banner--desc{color:#FFF;text-align:center;font-size:18px;font-weight:400;line-height:26px;opacity:.8}.articles-box{max-width:1500px;margin:0 auto}.all-articles .hot-articles-block{flex-shrink:0;width:280px;padding-bottom:30px;margin-top:30px}.hot-articles-block .tab-title,.hot-articles-block .type-title{font-size:20px;line-height:28px;font-weight:700}.all-articles .hot-articles-block .tab-title{color:#FFF;background:#334BC0;border-radius:7px 7px 0 0;padding:16px}.hot-articles-block .tab-title .hot-articles-title{padding-left:11px}.all-articles .type-title span{position:relative}.all-articles .type-title span::before{content:'';display:block;width:4px;height:20px;background:#2C2935;border-radius:2px;margin-right:10px;position:absolute;left:-15px;top:50%;transform:translateY(-50%)}.all-articles .ul-type{max-height:460px;overflow-y:auto;padding:0 10px 20px 30px;border-radius:0 0 8px 8px;border:1px solid #D8DAE6;scrollbar-width:thin;scrollbar-color:#C4C4C4 #fff;scrollbar-base-color:#C4C4C4;scrollbar-3dlight-color:#C4C4C4;scrollbar-highlight-color:#C4C4C4;scrollbar-track-color:#fff;scrollbar-arrow-color:#fff;scrollbar-shadow-color:#fff}.all-articles .ul-type::-webkit-scrollbar{width:4px;height:4px;background-color:#C4C4C4;border-radius:2px}.all-articles .ul-type::-webkit-scrollbar-track{width:4px;background:#fff;border-radius:2px}.all-articles .ul-type::-webkit-scrollbar-thumb{width:4px;height:4px;background:#C4C4C4;border-radius:2px}.all-articles .hot-articles-block li{list-style:disc;padding:10px 0;margin-left:10px}.all-articles .hot-articles-block .type-title{list-style:none;padding-top:20px;margin-left:0}.all-articles .hot-articles-block .type-title:not(:first-child){padding-top:30px}.articles-main .background-image{width:300px;height:210px;border-radius:8px;background-size:cover;background-repeat:no-repeat;background-position:center}.articles-box .item-block{margin-left:60px;display:flex;flex-direction:column;justify-content:flex-start}.articles-main .article-item-title{display:inline-block;color:#232E52;font-size:28px;font-weight:700;line-height:130%;margin-bottom:12px}.articles-main .article-item-info{flex:1;align-items:flex-end;margin-top:20px}.articles-main .article-item-info .time-icon{width:24px;height:24px;background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDIyQzE3LjUyMjkgMjIgMjIgMTcuNTIyOSAyMiAxMkMyMiA2LjQ3NzE1IDE3LjUyMjkgMiAxMiAyQzYuNDc3MTUgMiAyIDYuNDc3MTUgMiAxMkMyIDE3LjUyMjkgNi40NzcxNSAyMiAxMiAyMloiIHN0cm9rZT0iIzIzMkU1MiIgc3Ryb2tlLW9wYWNpdHk9IjAuOCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xMi4wMDQyIDZMMTIuMDAzNiAxMi4wMDQ0TDE2LjI0MzMgMTYuMjQ0MSIgc3Ryb2tlPSIjMjMyRTUyIiBzdHJva2Utb3BhY2l0eT0iMC44IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K) no-repeat center / contain}.articles-main .article-item{padding:40px 0;border-bottom:1px solid #e0e0e0}.articles-main .article-item img{width:16px;height:16px;border-radius:50%}.article-item-info-box{height:27px;width:100%;display:flex;align-items:center}.articles-main .article-item-info .user-name{margin:0 10px}.articles-main .article-item-info .date{color:#232E52;font-size:18px;font-weight:400;line-height:150%;margin-left:14px}.ul-main .article-show-more{display:flex;justify-content:center;align-items:center;width:392px;height:64px;border-radius:80px;background:#2cf370;margin:60px auto;color:#000;font-size:22px;font-weight:700;letter-spacing:-.44px}.ul-main .article-show-more:hover{background:linear-gradient(0deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,.3) 100%),#2CF370}.ul-main .article-show-more svg{width:10px;height:6px;margin-left:8px}@media (max-width:1500px){.articles-main .article-item{padding-left:15px;padding-right:15px}}@media (max-width:1024px){.article-banner{height:306px;margin-bottom:0}.article-banner h1{text-align:center;font-size:20px;line-height:30px;margin-bottom:20px;padding:0 20px}.article-banner--desc{text-align:center;font-size:14px;line-height:26px;padding:0 20px}.article-banner::before{content:'';position:absolute;left:0;top:63px;width:96px;height:100px;background:url(https://images.musicful.ai/musicfulkr/assets/article/banner-left--icon-m.png) no-repeat left top / contain}.article-banner::after{content:'';position:absolute;right:0;top:unset;bottom:0;width:130px;height:155px;background:url(https://images.musicful.ai/musicfulkr/assets/article/banner-right--icon-m.png) no-repeat center top / contain}.articles-box,.ul-main,.articles-main{max-width:100%}.articles-main .article-item-title{white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis;color:#232E52;font-size:16px;font-weight:700;line-height:130%;margin-bottom:0}.articles-main .background-image{width:120px;height:90px;flex-shrink:0;border-radius:3.39px}.articles-box .item-block{margin-left:15px;width:calc(100% - 135px)}.articles-main .article-item-desc{width:100%;color:#232E52;font-size:14px;font-style:normal;font-weight:400;line-height:150%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.articles-main .article-item-info .date{font-size:14px;font-weight:400;line-height:150%}.articles-main .article-item-info .time-icon{width:16.667px;height:16.667px}.articles-main .article-item{padding:20px}.ul-main .article-show-more{width:335px;height:48px;font-size:16px;font-weight:700;letter-spacing:-.32px;margin:40px auto}}@media (max-width:450px){.article-banner h1{max-width:335px}}