.block37264 {
    width: 100%;
}

.block37264 div .more_show {
    background-color: var(--color-match-setting1);
}

.block37264 div .more_hide {
    background-color: var(--color-match-setting1);
}

.block37264 div .more_show:hover {
    background-color: var(--color-match-setting2);
}

.block37264 div .more_hide:hover {
    background-color: var(--color-match-setting2);
}

.block37264 div .slick-dots .slick-active {
    background-color: var(--color-match-setting2);
}

.block37264 div .liBox:hover .banner-name {
    color: var(--color-match-setting1);
}

.block37264 .ulBox {
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.block37264 .liBox {
    position: relative;
    display: inline-block;
    transition: 0.3s all ease-in-out;
    border-radius: 8px;
    background-color: #fff;
    flex: 0 0 14.666%;
    height: 100%;
    aspect-ratio: 1 / 1;    
}
@media (min-width: 768px) and (max-width: 1024px) {
    .block37264 .ulBox .liBox {
        flex: 0 0 13.666%;
    }
    .block37264 .iconBox .icon {
        font-size: 30px!important;
    }
    .block37264 .images .iconBox .banner-name {
        padding-top: 6px;
    }
    .block37264 .images .iconBox .banner-name * {
        font-size: 14px!important;
    }    
}
@media screen and (max-width: 768px){
    .block37264 .ulBox .liBox {
        flex:0 0 20%;
    }
    .block37264 .iconBox .icon {
        font-size: 26px!important;
    }
    .block37264 .images .iconBox .banner-name {
        padding-top: 6px;
    }
    .block37264 .images .iconBox .banner-name * {
        font-size: 12px!important;
    }
}

.block37264 .iconBox .icon {
    color: var(--color-match-setting1);
}
.block37264 .images .iconBox .banner-name *{
    color: var(--color-match-setting1)!important;
}
.block37264 .images .iconBox .banner-name {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* .block37264 .liBox:hover {
    cursor: pointer;
} */
.block37264 .liBox:hover .icon,
.block37264 .liBox:hover .iconBox .banner-name *,
.block37264 .liBox.active .iconBox .banner-name *,
.block37264 .ulBox li.liBox.active .icon {
    color: var(--color-match-setting2)!important;
}
.block37264 .images,
.block37264 .images a {
    width: 100%;
    height: 100%;
}

.block37264 .transY {
    transform: translateY(-10px);
}

.block37264 .ulBox li.active .images .mainImg {
    opacity: 1;
}


.block37264 .images {
    width: 100%;
    height: 100%;
}

.block37264 .images picture {
    display: block;
    width: 100%;
    height: 100%;
}

.block37264 .images .mainImg {
    width: 100%;
    height: 100%;
    opacity: 0;
    object-fit: cover;
    border-radius: 8px;
    transition: 0.3s all ease-in-out;
}

.block37264 .iconBox {
    position: absolute;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding-top: 32px;
    box-sizing: border-box;
    text-align: center;
    transition: 0.3s all ease-in-out;
}
.block37264 .liBox .iconBox>.iconBox-flex  {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;    
}
.block37264 .images .banner-name {
    padding-top: 18px;
}


.block37264 .banner-description .container {
    width: 100%;
}

.block37264 .container .banner-name {
    text-align: center;
}


.block37264 .liBox:hover .mainImg {
    opacity: 0
}

.block37264 .liBox:hover .subImg {
    opacity: 1;
}

.block37264 .liBox:hover .banner-description {
    color: #FFF;
}