.searchInputRow { display: flex; justify-content: flex-end; .searchInput { width: 340px; height: 50px; background: #FFFFFF; border-radius: 6px 6px 6px 6px; border: 1px solid #B6C0CB; padding: 0 16px; position: relative; input { width: 100%; height: 100%; border: none; outline: none; background: transparent; font-weight: 500; font-size: 18px; color: #222222; line-height: 26px; } .searchIcon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 16px; color: #333; } } } .newList { /* 3列 */ min-height: 200px; margin-top: 100px; margin-bottom: 100px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 30px; .newItem { /* height: 500px; width: 452px; */ aspect-ratio: 452 / 500; overflow: hidden; display: flex; flex-direction: column; img, video { width: 100%; /* height: 300px; */ aspect-ratio: 452 / 300; object-fit: cover; cursor: pointer; transition: all 0.5s ease; } &:hover { .newItemContent { background: #14355C; } .newItemTitle, .newItemCreateTime { color: #fff !important; } img { transform: scale(1.05); } } .newItemContent { width: 100%; aspect-ratio: 452 / 200; background: #fff; padding: 20px 20px 40px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; transition: all 0.3s ease; .newItemTitle { font-weight: 500; font-size: 20px; color: #222222; line-height: 30px; text-align: justify; font-style: normal; text-transform: none; transition: all 0.3s ease; } .newItemCreateTime { font-weight: 400; font-size: 16px; color: #666666; line-height: 22px; text-align: justify; font-style: normal; text-transform: none; transition: all 0.3s ease; } } } }