.main { background-color: rgba(197, 201, 203, 0.32); } .column-header { background: url(../images/customer_evaluation.jpg) center no-repeat; } .list { margin: 50px auto 0; width: 1280px; border-radius: 16px; background-color: #fff; box-sizing: border-box; padding: 36px; } .list li { padding: 28px; } .list li:not(.list li:last-child) { border-bottom: 1px Dashed #c6ccce; } .list a { display: flex; justify-content: space-between; text-decoration: none; } .list .info { width: 822px; } .list .title { font-size: 21px; font-weight: 100; line-height: 36px; color: #4d4d4d; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .list .desc { font-size: 18px; font-weight: 100; line-height: 24px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: #979797; } .list .date { display: flex; flex-direction: column; justify-content: center; align-items: center; } .list .day { background-color: #cbcbcb; width: 80px; height: 72px; border-radius: 12px; font-family: Bahnschrift; font-weight: bold; font-size: 60px; line-height: 84px; color: #ffffff; text-align: center; margin-bottom: 10px; } .list .new .day { background-color: #7abfd2; } .list .year-month { font-family: Bahnschrift; font-size: 24px; line-height: 24px; color: #b2b2b2; font-weight: 100; } .pagination { margin-top: 36px; display: flex; justify-content: center; align-items: center; } .pagination ul { display: flex; justify-content: center; } .pagination a, .pagination span { display: block; background-color: #fff; color: #808080; font-size: 16px; font-weight: 100; width: 40px; line-height: 40px; text-align: center; border: 1px solid #e4e4e4; border-radius: 5px; text-decoration: none; margin: 0 10px; } .pagination .current { color: #fff; background-color: #064686; border-color: #064686; }