.introduction {
    padding: 40px 0;
    margin: 0;
    position: relative;
    top: -140px;
    background-color: #f2f2f2dc;
    border-radius: 16px;
    box-shadow: 0px 0px 8px #cccccc;
    height: 300px;
    align-items: center;
}

.introduction img {
    width: auto;
    margin: 16px 0;

}
.introduction>div.line{
    height:100px;
    width: 1px;
    background-color: #e0dfdf;
}
.introduction>div>.about-num>span {
    font-size: 56px;
}

.introduction-end {
    position: relative;
    top: -200px;
    height: 400px;
}

.introduction-end .title-box>p {
    color: #444444;
    line-height: 2.8;
    text-align: left;
    text-indent: 2em;
    letter-spacing: 1px;
    padding: 30px 0;
    font-size: 14px;
}

.more {
    display: block;
    margin: 100px auto 0;
    text-align: center;
    width: 260px;
    height: 54px;
    line-height: 54px;
    border: 1px solid #e0dfdf;
    border-radius: 10px;
    cursor: pointer;
    color: #555555;
}
.more:hover{
    color: #c01a20;
}
.more img {
    width: auto;
    vertical-align: inherit;
    margin-left: 12px;
}

.before {
    background-color: #dedede;
    padding: 20px 50px 80px;
}

.before>.flex>div {
    width: 50%;
    background-color: #ffffff;
    overflow: hidden;
    /* height: 485px; */
}

.before .before-title {
    font-size: 24px;
    color: #c01a1f;
    padding: 80px 20px 30px 80px;
}

.before .before-content {
    font-size: 18px;
    line-height: 2.4;
    padding: 0 20px 0 80px;
    color: #555;
}

.before>.flex>div:hover>img {
    transform: scale(1.1);
}