.container {

    max-width: 1240px;
    min-width: 1100px;
    margin: 0 auto;
}

.title {
    line-height: 1.4;
    font-weight: 400;
    font-size: 40px;
    color: #fff;
}

.img .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 540px;
}

.img .container .title {
    color: #333;
    margin-bottom: .5em;
}

.img .container .intro {
    color: #666;
    font-size: 18px;
}

.com-floor {
    padding: 88px 0;
    background-color: #fff;
    text-align: center;
}

.com-floor .title {
    font-size: 34px;
    color: #222;
    line-height: 1;
}

.top-case-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 60px;
    margin-bottom: 38px;
}

.max-width {
    padding: 0 20px;
    max-width: 1240px;
    min-width: 1100px;
}

.auto {
    margin-left: auto;
    margin-right: auto;
}

.top-case-grid .case {
    width: 43%;
    height: 135px;
    margin-bottom: 30px;
    box-shadow: 1px 3px 8px hsl(0deg 0% 87% / 40%);
    border-radius: 4px;
    padding: 33px 40px 0 21px;
    display: flex;
    background-color: #fff;
    text-align: left;
}

.top-case-grid .case .case-image {
    width: 90px;
    height: 90px;
    flex-shrink: 0;
}

.top-case-grid .case .case-text {
    margin-left: 23px;
    flex-grow: 1;
    font-size: 14px;
    color: #666;
}

.top-case-grid .case .case-text .name {
    font-size: 18px;
    margin-bottom: 8px;
    color: #222;
}

.hover-card:hover {
    box-shadow: 0 3px 14px 3px rgba(40, 120, 255, .08), 0 8px 10px 1px rgba(0, 0, 0, .05)!important;
    transition: all .2s ease 0s;
}

.com-floor-gray {
    background-color: #f7fafd;
}

.category {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #666;
    margin-top: 18px;
}

.category .dt {
    width: 140px;
    height: 36px;
    line-height: 36px;
    border: 1px solid #8f8f8f;
    border-radius: 18px;
}

.case-grid {
    display: flex;
    flex-wrap: wrap;
}

.case-grid .case-card:nth-of-type(4n) {
    margin-right: 0;
}

.case-grid .case-card:first-child,
.case-grid .case-card:nth-of-type(2),
.case-grid .case-card:nth-of-type(3),
.case-grid .case-card:nth-of-type(4) {
    margin-top: 0;
}

.case-grid .case-card {
    margin-top: 30px;
    width: 200px;
    height: 304px;
    background-color: #fff;
    box-shadow: 1px 3px 15px hsl(0deg 0% 87% / 40%);
    border-radius: 6px;
    display: flex;
    /* 灵活的项目将垂直显示，正如一个列一样。 */
    flex-direction: column;
    padding: 28px 30px;
    align-items: center;
    margin-right: calc(33.33333% - 346.66667px)
}

.case-grid .case-card .image-border {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 1px solid #ededed;
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: contain;
}

.case-grid .case-card .name {
    font-size: 18px;
    margin-top: 14px;
    color: #222;
}

.case-grid .case-card .tag {
    border: 1px solid #ededed;
    font-size: 12px;
    padding: 4px 8px;
    margin-top: 9px;
    color: #acacac;
}

.case-grid .case-card .intro {
    font-size: 14px;
    color: #747474;
    margin-top: 15px;
    height: 40px;
}

.case-grid .case-card .case-button {
    color: #737373;
    width: 120px;
    height: 36px;
    margin-top: 19px;
    border: 1px solid #747474;
    line-height: 34px;
    border-radius: 4px;
}

.case-grid .button {
    margin: 0 auto;
    height: 40px;
    padding: 0 20px;
    font-size: 16px;
    color: #0089ff;
    background-color: white;
    border: 1px solid #0089ff;
}


/* 。。。。。。。。。。。。。。。。。。。。。。。。。。。。。 */

.left-right-card {
    display: flex;
    font-size: 16px;
    text-align: left;
    align-items: center;
    font-weight: 400;
}

.left-right-card .left {
    position: relative;
    display: flex;
    flex-direction: column;
}

.left-right-card .left .btext {
    font-size: 34px;
    color: #2e2e2e;
}