.block33554 {
    box-sizing: border-box;
}

.block33554 ul {
    display: flex;
    flex-flow: row wrap;
    gap: 20px;
}

.block33554 ul::after {
    content: '';
    width: 32%;
}

.block33554 ul li {
    width: calc((100% - 40px) / 3);
    height: 0;
    padding-bottom: 37.8%;
    position: relative;
    overflow: hidden;
}

.block33554 ul li .li_item {
    width: 100%;
    height: 100%;
    position: absolute;
}


.block33554 ul li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .2s linear;
    overflow: hidden;
}

.block33554 ul li:hover img {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

.block33554 ul li:hover .banner-description {
    opacity: .89;
}

/* 描述 */
.block33554 ul li .banner-description {
    width: 76%;
    /* height: 52%; */
    /* max-width: 76%; */
    padding: 19px 21px 30px;

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    text-align: center;

    background-color: var(--color-match-setting1);
    color: var(--color-match-setting2);
    opacity: 0;
    transition: all .4s ease-in-out;
}

.block33554 ul li .banner-description .banner-name {
    color: var(--color-match-setting2);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.5em;
    /* max-height: 77px; */
    overflow: hidden;
}

.block33554 ul li .banner-description .banner-name {
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.block33554 ul li .banner-description .banner-docs {
    line-height: 1.6em;

    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    word-break: break-word;
}

.block33554 ul li .banner-description .banner-docs {
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}
.block33554 ul li .banner-description .banner-name>h1,
.block33554 ul li .banner-description .banner-name>h2,
.block33554 ul li .banner-description .banner-name>h3,
.block33554 ul li .banner-description .banner-name>h4,
.block33554 ul li .banner-description .banner-name>h5,
.block33554 ul li .banner-description .banner-name>h6 {
    color: var(--color-match-ellipses-title-setting1);
}

.block33554 ul li .banner-description .banner-docs>.paragraph1,
.block33554 ul li .banner-description .banner-docs>.paragraph2,
.block33554 ul li .banner-description .banner-docs>.paragraph3 {
    color: var(--color-match-ellipses-docs-setting1);
}

.block33554 ul li .banner-description .banner-docs div {
    display: inline;
}
.block33554 .siteblocks-header-banner .module-link {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
@media (min-width: 1024px) {
    .block33554 .siteblocks-header-banner .module-link {
        display: none;
    }
}
@media (max-width: 1024px) {
.block33554 ul li:hover .banner-description {
    display: none;
}
}

.block33554 ul li .banner-description a.moreBtn {
    margin-top: 14px;
    padding: 10px 18px;
    user-select: none;
    appearance: none;
    display: inline-block;
    width: 80%;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 25px;
    border: 2px solid var(--color-match-setting2);
    color:	var(--color-match-setting2);
    background: transparent;
    font-weight: 500;
    outline: none;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 20px;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    transition-property: color;
    transition-duration: 0.3s;
}

.block33554 ul li .banner-description a.moreBtn * {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.block33554 ul li .banner-description a.moreBtn:hover {
    /* background-color: #000;
    color: #fff; */
    color:var(--color-match-setting1);
	 background-color:var(--color-match-setting2);
}

@media (max-width:1200px) {
    .block33554 {
        width: 100%;
    }

    .margin_unset{
        margin:0 !important;
    }
}

@media (max-width:767px) {
    .block33554 ul li {
        width: 100%;
        padding-bottom: 118.125%;
        margin-top: 20px;
    }
}