html,
body {
    height: 100%;
    margin: 0;
    background-color: #fff;
    font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;

}

html,
body {
    min-width: 1440px;
}

@media (max-width:1440px) {

    html,
    body {
        min-width: 1200px;
    }
}

ul,
li {
    list-style: none;
}

.solution {
    min-height: 1000px;
}

.solution,
.solution-con,
.solution-detail {
    background-color: #f6f6f6;
    width: 100%;
    text-align: justify;
}

.solution-all {
    width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    padding: 10px 15px;
}

.detail-title {
    position: relative;
    width: 100%;
    padding-top: 30px;
    margin-bottom: 30px;
    color: #666666;
    font-size: 22px;
    text-align: center;
    background-color: #fff;
}

.deve-title {
    position: relative;
    width: 100%;
    padding-top: 30px;
    margin-bottom: 30px;
    color: #666666;
    font-size: 22px;
    text-align: center;
}

.solution-ban {
    width: 100%;
    height: 196px;
    position: relative;
    padding-top: 172px;
    background-image: url("../img/solution-ban.jpg");
    background-size: 100% 100%;
}

.bantxt {
    width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.solution-bantext {
    font-size: 34px;
    font-weight: 200;
    line-height: 80px;
    color: rgba(255, 255, 255, 1);
}

.solution-list {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    word-break: break-all;
}

.solution-detail-list {
    width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
    background-color: #fff;
    word-break: break-all;
}

.solution-image {
    width: 384px;
    height: 100%;
}

.solution-title {
    position: absolute;
    top: 36px;
    left: 20px;
    font-size: 20px;
    font-weight: 400;
    line-height: 34px;
    color: rgba(255, 255, 255, 1);
}

.solution-content {
    position: absolute;
    text-align: justify;
    top: 80px;
    left: 20px;
    width: 346px;
    height: 100px;
    overflow: hidden;
    -webkit-line-clamp: 4;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #f6f6f6;
    opacity: 0.76;
}

.solution-item {
    height: 592px;
    position: relative;
    margin: 0 24px 24px 0;
    cursor: pointer;
}

.solution-item:nth-child(3n) {
    margin: 0 0 24px 0;
}

.solution-item:hover {
    animation: solutionHover 0.5s both;
}

@keyframes solutionHover {
    0% {
        box-shadow: none;
        transform: scale(1);
    }

    100% {
        transform: scale(1.05);
        box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.16),
            -12px 12px 12px rgba(0, 0, 0, 0.16);
    }
}

.content-title {
    float: left;
    width: 100%;
    margin-bottom: 30px;
}