.article-list{padding:80px 0;background-color:#f8f8f8}.article-list .article-list-wrapper{display:flex;flex-wrap:wrap;gap:24px}.article-list .article-list-wrapper .article-item{position:relative;width:calc(100% / 3 - 16px);background-color:#fff}.article-list .article-list-wrapper .article-item .article-link{padding:24px;display:block}.article-list .article-list-wrapper .article-item .article-link .photo{width:100%;aspect-ratio:4 / 3;overflow:hidden}.article-list .article-list-wrapper .article-item .article-link .photo img{width:100%;height:100%;object-fit:contain;transition:all .5s ease}.article-list .article-list-wrapper .article-item .article-link .photo img:hover{transform:scale(1.2)}.article-list .article-list-wrapper .article-item .article-link .article-content{padding-top:24px;display:flex;overflow:hidden}.article-list .article-list-wrapper .article-item .article-link .article-content .date{width:100px;padding-right:24px;display:flex;flex-shrink:0;flex-direction:column;justify-content:center;align-items:center;color:#999}.article-list .article-list-wrapper .article-item .article-link .article-content .date .day{font-size:40px;margin-bottom:12px}.article-list .article-list-wrapper .article-item .article-link .article-content .date .ym{font-size:16px}.article-list .article-list-wrapper .article-item .article-link .article-content .text{width:calc(100% - 100px);font-size:24px}.article-list .article-list-wrapper .article-item .article-link .article-content .text p{margin-top:12px;font-size:14px;line-height:1.5;color:#999}.article-list .article-list-wrapper .article-item:hover .article-link .article-content .date,.article-list .article-list-wrapper .article-item:hover .article-link .article-content .text{color:var(--primary-color)}@media screen and (max-width:992px){.article-list{padding:24px 12px}.article-list .article-list-wrapper .article-item{width:100%}.article-list .article-list-wrapper .article-item:hover::before{animation:initail;opacity:0}.article-list .article-list-wrapper .article-item .article-link{padding:20px;flex-direction:column}.article-list .article-list-wrapper .article-item .article-link .item-content{width:100%;flex-direction:column;padding-right:0}.article-list .article-list-wrapper .article-item .article-link .item-content .date{width:100%;padding:0;margin-bottom:10px}.article-list .article-list-wrapper .article-item .article-link .item-content .text{width:100%}.article-list .article-list-wrapper .article-item .article-link .item-content .text p{font-size:12px}.article-list .article-list-wrapper .article-item .article-link .photo{width:100%;height:200px;margin-top:20px}}