* {
    padding: 0;
    margin: 0;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
}

html,
body {
    height: 100%;
}

#app {
    height: 100%;
}

.content {
    margin-top: 80px;
    width: 100%;
}

.top-banner {
    width: 100%;
    height: 600px;
}

.top-banner img {
    width: 100%;
    height: 100%;
}

.wrap {
    width: 1228px;
    margin: 0 auto;
    
}
li {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    border: none;
}
.display-flex {
    display: -webkit-flex;
    /* Safari */
    display: flex;
}

.flex {
    flex: auto;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.flex-column {
    flex-direction: column;
}

.align-center {
    align-items: center;
}

.align-end {
    align-items: flex-end;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-shrink {
    flex-shrink: 0;
}

.ellipsis-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 定义显示的行数 */
    overflow: hidden;
    text-overflow: ellipsis;
}

.ellipsis-4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4; /* 定义显示的行数 */
    overflow: hidden;
    text-overflow: ellipsis;
}