body{background-color:#f8f8f8}.article-list{background-size:cover;background-position:center;background-repeat:no-repeat}.article-list .icon-box{border-radius:50%;overflow:hidden;transition:all .3s;color:var(--primary-color);background-color:#EEEEEE;position:relative;width:60px;height:60px}.article-list .icon-box::after{display:none}.article-list .icon-box:hover{color:#fff}.article-list .icon-box:hover .icon-wrapper{transform:translate(0)}.article-list .icon-box:hover::after{transform:scale(1.1)}.article-list .icon-box .icon-wrapper{position:relative;z-index:2;width:100%;height:100%;display:flex;align-items:center;margin-right:20px;cursor:pointer;transform:translate(-100%);transition:transform .4s cubic-bezier(.215, .61, .355, 1)}.article-list .icon-box .icon-wrapper .icon{width:100%;height:100%;display:flex;justify-content:center;align-items:center;flex-shrink:0}.article-list .icon-box .icon-wrapper .icon .iconfont{font-size:25px;font-weight:700}.article-list .article-list-wrapper{display:flex;flex-wrap:wrap;gap:34px}.article-list .article-list-wrapper .article-item{position:relative;width:calc(100% / 3 - (34px * 2 / 3));background-color:#fff;border-radius:20px;overflow:hidden}.article-list .article-list-wrapper .article-item .article-link{padding:40px;display:block}.article-list .article-list-wrapper .article-item .article-link .litpic{position:absolute;width:100%;height:100%;left:0;top:0;z-index:0;object-fit:cover;transition:all .5s ease;opacity:0}.article-list .article-list-wrapper .article-item .article-link .contnt-wrapper{position:relative;z-index:1}.article-list .article-list-wrapper .article-item .article-link .desc{line-height:2;font-family:'HarmonyOS_Sans_Light'}.article-list .article-list-wrapper .article-item .article-link .date-wrapper{display:flex;justify-content:space-between;align-items:flex-end}.article-list .article-list-wrapper .article-item .article-link .date-wrapper .date{font-family:'HarmonyOS_Sans_Light'}.article-list .article-list-wrapper .article-item.active .article-link{color:#fff}.article-list .article-list-wrapper .article-item.active .article-link .litpic{opacity:1}.article-list .article-list-wrapper .article-item.active .article-link .desc{opacity:0}.article-list .article-list-wrapper .article-item.active .article-link .icon-box{color:#fff;background-color:var(--primary-color)}.article-list .article-list-wrapper .article-item.active .article-link .icon-box .icon-wrapper{transform:translate(0)}.article-list .article-list-wrapper .article-item.active .article-link .icon-box::after{transform:scale(1)}@media screen and (max-width:992px){.article-list .icon-box{width:40px;height:40px}.article-list .icon-box .icon-wrapper .icon .iconfont{font-size:20px}.article-list .article-list-wrapper .article-item{width:100%}.article-list .article-list-wrapper .article-item .article-link{color:#fff;padding:20px}.article-list .article-list-wrapper .article-item .article-link .litpic{opacity:1}.article-list .article-list-wrapper .article-item .article-link .desc{opacity:1}.article-list .article-list-wrapper .article-item .article-link .icon-box{color:#fff;background-color:var(--primary-color)}.article-list .article-list-wrapper .article-item .article-link .icon-box .icon-wrapper{transform:translate(0)}.article-list .article-list-wrapper .article-item .article-link .icon-box::after{transform:scale(1)}}