.news-columnList { width: 100%; gap: 0; } .leader-row1 { display: flex; gap: 30px; justify-content: center; margin-bottom: 30px; } .leader-row1 .leader { width: 400px; display: flex; } .leader-row1 .leader .leader-img { margin-right: 12px; } .leader-row2 .leader .leader-img { margin-bottom: 12px; flex-shrink: 0; } .leader { background-color: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); padding: 16px; position: relative; margin: 0; } .leader img { width: 120px; height: 160px; object-fit: cover; border-radius: 4px; border: 2px solid transparent; transition: border-color 0.3s; } .leader-row2 { display: flex; gap: 30px; } .leader-row2 .leader { width: 150px; display: flex; flex-direction: column; } .leader-content .name { font-size: 18px; font-weight: bold; margin: 0 0 8px 0; color: #333; transition: color 0.3s; } .leader-content .divider { height: 2px; width: 20px; margin: 0 0 12px 0; background: linear-gradient(to right, rgb(164, 0, 0) 50%, #666 50%); background-size: 200% 100%; background-position: right center; transition: background-position 0.3s ease-out; } .leader-content .zhi { margin: 6px 0; color: #666; font-size: 14px; line-height: 1.5; margin-bottom: 15px; } .leader-row1 .more_btn { position: absolute; bottom: 14px; right: 14px; } .leader-content .more_btn {padding: 4px 14px;background-color: transparent;color: #666;border: 1px solid rgb(164, 0, 0);border-radius: 20px;font-size: 13px;font-weight: normal;cursor: pointer;transition: all 0.3s;white-space: nowrap;min-width: 80px;text-align: center;box-sizing: border-box;max-width: 82px;margin: 0 auto;} .leader-row2 .leader-content { text-align: center; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .leader-row2 .leader-content .divider { margin: 0 auto 12px; } .leader-content .more_btn:hover { background-color: rgba(164, 0, 0, 0.1); color: rgb(164, 0, 0); border-color: rgb(164, 0, 0); } .leader:hover .leader-img img { border-color: rgb(164, 0, 0); } @media only screen and (max-width:768px) { .leader-row1 { display: flex; gap: 10px; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; } .leader-row1 .leader { width: 40%; display: flex; flex-direction: column; } .leader-row1 .leader .leader-img { margin-right: 12px; margin-bottom: 12px; } .leader img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; border: 2px solid transparent; transition: border-color 0.3s; } .leader-content { text-align: center; } .leader-content .name { font-size: 16px; } .leader-content .divider { margin: 0 auto; } .leader-content .zhi { margin: 6px 0; color: #666; font-size: 14px; line-height: 1.5; margin-bottom: 15px; } .leader-row1 .more_btn { position: static; bottom: 14px; right: 14px; } .leader-content .more_btn { padding: 4px 14px; background-color: transparent; color: #666; border: 1px solid rgb(164, 0, 0); border-radius: 20px; font-size: 13px; font-weight: normal; cursor: pointer; transition: all 0.3s; white-space: nowrap; min-width: 80px; text-align: center; box-sizing: border-box; } .leader-row2 { display: flex; gap: 10px; flex-wrap: wrap; } .leader-row2 .leader{ width: 40%; } }