section.industries{
    background-color: #fafbfd;
}

section.industries.layout-sub{
    background-color: #fff;
}

.layout-sub .industry-list .list-item:nth-of-type(8n+1),
.layout-sub .industry-list .list-item:nth-of-type(8n+3),
.layout-sub .industry-list .list-item:nth-of-type(8n+6),
.layout-sub .industry-list .list-item:nth-of-type(8n) {
    background-color: #fafbfd;
}

.industries.layout-sub .section-title{
    text-align: center;
    margin-bottom: calc(64 * var(--rpx-50));
}

section.industries .wrapper{
    padding-top: calc(110 * var(--rpx-50));
    padding-bottom: calc(180 * var(--rpx-50));
}
.industries.layout-sub .wrapper{
    padding-top: calc(30 * var(--rpx));
}

/*.page-title{
    text-align: center;
    margin-bottom: calc(50 * var(--rpx));
}*/

.industries .desc{
    text-align: center;
    margin-bottom: calc(60 * var(--rpx-50));
}


.industries .section-title{
    margin-bottom: calc(30 * var(--rpx));
}

.industry-list{
    --gap: 0px;
    --column: 4;
}

.industry-list .list-item{
    background-color: #f5f7fc;
    position: relative;
    font-size: calc(18rem / 16);
    font-weight: bold;
    transition: .2s;
}

@media (min-width: 961px) {
    .industry-list .list-item:nth-of-type(8n+1),
    .industry-list .list-item:nth-of-type(8n+3),
    .industry-list .list-item:nth-of-type(8n+6),
    .industry-list .list-item:nth-of-type(8n){
        background-color: #fff;
    }
}


.industry-list .list-item:hover,
.layout-sub .industry-list .list-item:hover{
    background-color: #e6e9f3;
}

.industry-list .outer{
    position: relative;
    display: flex;
    flex-direction: column;
    padding: calc(28 * var(--rpx)) calc(24 * var(--rpx));
    z-index: 210;
}

.industry-list .outer .icon{
    width: calc(100 * var(--rpx));
    height: calc(100 * var(--rpx));
    margin-bottom: calc(28 * var(--rpx));
}


.industry-list .outer .name{
}

.industry-list .inner{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: calc(100% - 40 * var(--rpx));
    height: calc(100% - 40 * var(--rpx));
    z-index: 220;
    color: #ffffff;
}

.industry-list .inner .bottom{
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: stretch;
    width: 100%;
    height: calc(60 * var(--rpx));
    background-color: rgba(0, 0, 0, .5);
    backdrop-filter: blur(5px);
}

.industry-list .inner .bottom .left{
    width: calc(72 * var(--rpx));
    flex: 0 0 auto;

    display: flex;
    align-items: center;
}

.industry-list .inner .bottom .left img{
    display: block;
    margin: auto;
    height: 75%;
    width: auto;
    filter: url(#white-overlay);
}

.industry-list .inner .bottom .right{
    flex: 1 1 auto;
    width: calc(100% - 72 * var(--rpx));
    padding-left: calc(8 * var(--rpx));
    display: flex;
    align-items: center;
}

.industry-list .inner .bottom .right .name{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.industry-list .inner .bottom .right .name::after{
    content: "";
    display: inline-block;
    width: calc(12em / 18);
    height: calc(11em / 18);
    background: url("../images/global/icon_arr_right.svg") center/cover no-repeat;
    filter: url(#white-overlay);
    margin-left: calc(10em / 18);
    vertical-align: middle;
    margin-top: calc(-4em / 18);
}

.industry-list .inner{
    opacity: 0;
    visibility: hidden;
    transition: .5s cubic-bezier(0.15, 1, 0.336, 1);
    transform: scale(.96);
}

.industry-list .list-item:hover .inner{
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.industry-list .inner-cover{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

@media (max-width: 960px) and (min-width: 751px) {
    .industry-list .list-item:nth-of-type(6n+2),
    .industry-list .list-item:nth-of-type(6n+4),
    .industry-list .list-item:nth-of-type(6n){
        background-color: #fff;
    }
}

@media (max-width: 960px) {
    .industry-list{
        --column: 3;
    }
}

@media (max-width: 750px) {
    .industry-list .list-item:nth-of-type(4n+2),
    .industry-list .list-item:nth-of-type(4n+3){
        background-color: #fff;
    }

    .industry-list{
        --column: 2;
    }

    .industry-list .outer{
        padding-right: calc(20 * var(--rpx));
    }
    .industry-list .outer .icon{
        width: calc(80 * var(--rpx));
        height: calc(80 * var(--rpx));
    }
    .industry-list .list-item{
        font-size: 1rem;
    }

    .industry-list{
        justify-content: flex-start;
    }
}