.tf-software-image-content>img {
    width: 100%;
}

.tf-software-brand-case {
    --padding-top: 164px;
    --padding-right: 230px;
    --padding-bottom: 96px;
    --padding-left: 230px;
}

@media (max-width: 767px) {
    .tf-software-brand-case {
        padding-top: calc(var(--padding-top) * var(--extra-small-ratio));
        padding-right: calc(var(--padding-right) * var(--extra-small-ratio));
        padding-bottom: calc(var(--padding-bottom) * var(--extra-small-ratio));
        padding-left: calc(var(--padding-left) * var(--extra-small-ratio));
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .tf-software-brand-case {
        padding-top: calc(var(--padding-top) * var(--small-ratio));
        padding-right: calc(var(--padding-right) * var(--small-ratio));
        padding-bottom: calc(var(--padding-bottom) * var(--small-ratio));
        padding-left: calc(var(--padding-left) * var(--small-ratio));
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .tf-software-brand-case {
        padding-top: calc(var(--padding-top) * var(--middle-ratio));
        padding-right: calc(var(--padding-right) * var(--middle-ratio));
        padding-bottom: calc(var(--padding-bottom) * var(--middle-ratio));
        padding-left: calc(var(--padding-left) * var(--middle-ratio));
    }
}

@media (min-width: 1201px) and (max-width: 1452px) {
    .tf-software-brand-case {
        padding-top: calc(var(--padding-top) * var(--large-ratio));
        padding-right: calc(var(--padding-right) * var(--large-ratio));
        padding-bottom: calc(var(--padding-bottom) * var(--large-ratio));
        padding-left: calc(var(--padding-left) * var(--large-ratio));
    }
}

@media (min-width: 1453px) and (max-width: 1771px) {
    .tf-software-brand-case {
        padding-top: calc(var(--padding-top) * var(--extra-large-ratio));
        padding-right: calc(var(--padding-right) * var(--extra-large-ratio));
        padding-bottom: calc(var(--padding-bottom) * var(--extra-large-ratio));
        padding-left: calc(var(--padding-left) * var(--extra-large-ratio));
    }
}

@media (min-width: 1772px) {
    .tf-software-brand-case {
        padding-top: calc(var(--padding-top) * var(--design-ratio));
        padding-right: calc(var(--padding-right) * var(--design-ratio));
        padding-bottom: calc(var(--padding-bottom) * var(--design-ratio));
        padding-left: calc(var(--padding-left) * var(--design-ratio));
    }
}

.tf-software-brand-case>.title {
    text-align: center;
}

.tf-software-brand-case>.title span {
    --font-size: 55px;
    font-family: 'Microsoft YaHei UI';
    line-height: 1;
}

@media (max-width: 767px) {
    .tf-software-brand-case>.title span {
        font-size: calc(var(--font-size) * var(--extra-small-ratio));
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .tf-software-brand-case>.title span {
        font-size: calc(var(--font-size) * var(--small-ratio));
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .tf-software-brand-case>.title span {
        font-size: calc(var(--font-size) * var(--middle-ratio));
    }
}

@media (min-width: 1201px) and (max-width: 1452px) {
    .tf-software-brand-case>.title span {
        font-size: calc(var(--font-size) * var(--large-ratio));
    }
}

@media (min-width: 1453px) and (max-width: 1771px) {
    .tf-software-brand-case>.title span {
        font-size: calc(var(--font-size) * var(--extra-large-ratio));
    }
}

@media (min-width: 1772px) {
    .tf-software-brand-case>.title span {
        font-size: calc(var(--font-size) * var(--design-ratio));
    }
}

.tf-software-brand-case .list {
    --padding-top: 59px;
}

@media (max-width: 767px) {
    .tf-software-brand-case .list {
        padding-top: calc(var(--padding-top) * var(--extra-small-ratio));
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .tf-software-brand-case .list {
        padding-top: calc(var(--padding-top) * var(--small-ratio));
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .tf-software-brand-case .list {
        padding-top: calc(var(--padding-top) * var(--middle-ratio));
    }
}

@media (min-width: 1201px) and (max-width: 1452px) {
    .tf-software-brand-case .list {
        padding-top: calc(var(--padding-top) * var(--large-ratio));
    }
}

@media (min-width: 1453px) and (max-width: 1771px) {
    .tf-software-brand-case .list {
        padding-top: calc(var(--padding-top) * var(--extra-large-ratio));
    }
}

@media (min-width: 1772px) {
    .tf-software-brand-case .list {
        padding-top: calc(var(--padding-top) * var(--design-ratio));
    }
}

.tf-software-brand-case .list>ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.tf-software-brand-case .list>ul>li {
    display: flex;
    justify-content: center;
    /* flex: 0 0 calc(33.33% - 14px); */
    /* --margin-left: 7px; */
    /* --margin-right: 7px; */
    --margin-bottom: 17px;
}

@media (max-width: 767px) {
    .tf-software-brand-case .list>ul>li {
        flex: 0 0 calc(33.33% - var(--margin-left) * var(--extra-small-ratio) - var(--margin-right) * var(--extra-small-ratio));
        margin-left: calc(var(--margin-left) * var(--extra-small-ratio));
        margin-right: calc(var(--margin-right) * var(--extra-small-ratio));
        margin-bottom: calc(var(--margin-bottom) * var(--extra-small-ratio));
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .tf-software-brand-case .list>ul>li {
        flex: 0 0 calc(33.33% - var(--margin-left) * var(--small-ratio) - var(--margin-right) * var(--small-ratio));
        margin-left: calc(var(--margin-left) * var(--small-ratio));
        margin-right: calc(var(--margin-right) * var(--small-ratio));
        margin-bottom: calc(var(--margin-bottom) * var(--small-ratio));
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .tf-software-brand-case .list>ul>li {
        flex: 0 0 calc(33.33% - var(--margin-left) * var(--middle-ratio) - var(--margin-right) * var(--middle-ratio));
        margin-left: calc(var(--margin-left) * var(--middle-ratio));
        margin-right: calc(var(--margin-right) * var(--middle-ratio));
        margin-bottom: calc(var(--margin-bottom) * var(--middle-ratio));
    }
}

@media (min-width: 1201px) and (max-width: 1452px) {
    .tf-software-brand-case .list>ul>li {
        flex: 0 0 calc(33.33% - var(--margin-left) * var(--large-ratio) - var(--margin-right) * var(--large-ratio));
        margin-left: calc(var(--margin-left) * var(--large-ratio));
        margin-right: calc(var(--margin-right) * var(--large-ratio));
        margin-bottom: calc(var(--margin-bottom) * var(--large-ratio));
    }
}

@media (min-width: 1453px) and (max-width: 1771px) {
    .tf-software-brand-case .list>ul>li {
        flex: 0 0 calc(33.33% - var(--margin-left) * var(--extra-large-ratio) - var(--margin-right) * var(--extra-large-ratio));
        margin-left: calc(var(--margin-left) * var(--extra-large-ratio));
        margin-right: calc(var(--margin-right) * var(--extra-large-ratio));
        margin-bottom: calc(var(--margin-bottom) * var(--extra-large-ratio));
    }
}

@media (min-width: 1772px) {
    .tf-software-brand-case .list>ul>li {
        flex: 0 0 calc(33.33% - var(--margin-left) * var(--design-ratio) - var(--margin-right) * var(--design-ratio));
        margin-left: calc(var(--margin-left) * var(--design-ratio));
        margin-right: calc(var(--margin-right) * var(--design-ratio));
        margin-bottom: calc(var(--margin-bottom) * var(--design-ratio));
    }
}

.tf-software-brand-case .list .list-item {
    --padding-top: 20px;
    --padding-right: 17px;
    --padding-bottom: 49px;
    --padding-left: 17px;
    --width: 419px;
    --height: 611px;
    background-color: #f0f0f0;
}

.list .list-item .avatar {
    --height: 493px;
    --width: 385px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    position: relative;
}

.list .list-item .avatar .bg {
    width: 100%;
    height: 100%;
}

.list .list-item .avatar .qrcode {
    --width: 91px;
    --height: 91px;
    --margin-right: 18px;
    --margin-bottom: 20px;
    position: absolute;
}

.list .list-item .title {
    --padding-top: 18px;
    --padding-left: 7px;
}

.list .list-item .title span {
    --font-size: 31px;
    font-family: 'Microsoft YaHei UI';
    line-height: 1;
}


@media (max-width: 767px) {
    .tf-software-brand-case .list .list-item {
        padding-top: calc(var(--padding-top) * var(--extra-small-ratio));
        padding-right: calc(var(--padding-right) * var(--extra-small-ratio));
        padding-bottom: calc(var(--padding-bottom) * var(--extra-small-ratio));
        padding-left: calc(var(--padding-left) * var(--extra-small-ratio));
        width: calc(var(--width) * var(--extra-small-ratio));
        height: calc(var(--height) * var(--extra-small-ratio));
    }

    .list .list-item .avatar {
        height: calc(var(--height) * var(--extra-small-ratio));
        width: calc(var(--width) * var(--extra-small-ratio));
    }

    .list .list-item .avatar .qrcode {
        width: calc(var(--width) * var(--extra-small-ratio));
        height: calc(var(--height) * var(--extra-small-ratio));
        margin-right: calc(var(--margin-right) * var(--extra-small-ratio));
        margin-bottom: calc(var(--margin-bottom) * var(--extra-small-ratio));
    }

    .list .list-item .title {
        padding-top: calc(var(--padding-top) * var(--extra-small-ratio));
        padding-left: calc(var(--padding-left) * var(--extra-small-ratio));
    }

    .list .list-item .title span {
        font-size: calc(var(--font-size) * var(--extra-small-ratio));
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .tf-software-brand-case .list .list-item {
        padding-top: calc(var(--padding-top) * var(--small-ratio));
        padding-right: calc(var(--padding-right) * var(--small-ratio));
        padding-bottom: calc(var(--padding-bottom) * var(--small-ratio));
        padding-left: calc(var(--padding-left) * var(--small-ratio));
        width: calc(var(--width) * var(--small-ratio));
        height: calc(var(--height) * var(--small-ratio));
    }

    .list .list-item .avatar {
        height: calc(var(--height) * var(--small-ratio));
        width: calc(var(--width) * var(--small-ratio));
    }

    .list .list-item .avatar .qrcode {
        width: calc(var(--width) * var(--small-ratio));
        height: calc(var(--height) * var(--small-ratio));
        margin-right: calc(var(--margin-right) * var(--small-ratio));
        margin-bottom: calc(var(--margin-bottom) * var(--small-ratio));
    }

    .list .list-item .title {
        padding-top: calc(var(--padding-top) * var(--small-ratio));
        padding-left: calc(var(--padding-left) * var(--small-ratio));
    }

    .list .list-item .title span {
        font-size: calc(var(--font-size) * var(--small-ratio));
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .tf-software-brand-case .list .list-item {
        padding-top: calc(var(--padding-top) * var(--middle-ratio));
        padding-right: calc(var(--padding-right) * var(--middle-ratio));
        padding-bottom: calc(var(--padding-bottom) * var(--middle-ratio));
        padding-left: calc(var(--padding-left) * var(--middle-ratio));
        width: calc(var(--width) * var(--middle-ratio));
        height: calc(var(--height) * var(--middle-ratio));
    }

    .list .list-item .avatar {
        height: calc(var(--height) * var(--middle-ratio));
        width: calc(var(--width) * var(--middle-ratio));
    }

    .list .list-item .avatar .qrcode {
        width: calc(var(--width) * var(--middle-ratio));
        height: calc(var(--height) * var(--middle-ratio));
        margin-right: calc(var(--margin-right) * var(--middle-ratio));
        margin-bottom: calc(var(--margin-bottom) * var(--middle-ratio));
    }

    .list .list-item .title {
        padding-top: calc(var(--padding-top) * var(--middle-ratio));
        padding-left: calc(var(--padding-left) * var(--middle-ratio));
    }

    .list .list-item .title span {
        font-size: calc(var(--font-size) * var(--middle-ratio));
    }
}

@media (min-width: 1201px) and (max-width: 1452px) {
    .tf-software-brand-case .list .list-item {
        padding-top: calc(var(--padding-top) * var(--large-ratio));
        padding-right: calc(var(--padding-right) * var(--large-ratio));
        padding-bottom: calc(var(--padding-bottom) * var(--large-ratio));
        padding-left: calc(var(--padding-left) * var(--large-ratio));
        width: calc(var(--width) * var(--large-ratio));
        height: calc(var(--height) * var(--large-ratio));
    }

    .list .list-item .avatar {
        height: calc(var(--height) * var(--large-ratio));
        width: calc(var(--width) * var(--large-ratio));
    }

    .list .list-item .avatar .qrcode {
        width: calc(var(--width) * var(--large-ratio));
        height: calc(var(--height) * var(--large-ratio));
        margin-right: calc(var(--margin-right) * var(--large-ratio));
        margin-bottom: calc(var(--margin-bottom) * var(--large-ratio));
    }

    .list .list-item .title {
        padding-top: calc(var(--padding-top) * var(--large-ratio));
        padding-left: calc(var(--padding-left) * var(--large-ratio));
    }

    .list .list-item .title span {
        font-size: calc(var(--font-size) * var(--large-ratio));
    }
}

@media (min-width: 1453px) and (max-width: 1771px) {
    .tf-software-brand-case .list .list-item {
        padding-top: calc(var(--padding-top) * var(--extra-large-ratio));
        padding-right: calc(var(--padding-right) * var(--extra-large-ratio));
        padding-bottom: calc(var(--padding-bottom) * var(--extra-large-ratio));
        padding-left: calc(var(--padding-left) * var(--extra-large-ratio));
        width: calc(var(--width) * var(--extra-large-ratio));
        height: calc(var(--height) * var(--extra-large-ratio));
    }

    .list .list-item .avatar {
        height: calc(var(--height) * var(--extra-large-ratio));
        width: calc(var(--width) * var(--extra-large-ratio));
    }

    .list .list-item .avatar .qrcode {
        width: calc(var(--width) * var(--extra-large-ratio));
        height: calc(var(--height) * var(--extra-large-ratio));
        margin-right: calc(var(--margin-right) * var(--extra-large-ratio));
        margin-bottom: calc(var(--margin-bottom) * var(--extra-large-ratio));
    }

    .list .list-item .title {
        padding-top: calc(var(--padding-top) * var(--extra-large-ratio));
        padding-left: calc(var(--padding-left) * var(--extra-large-ratio));
    }

    .list .list-item .title span {
        font-size: calc(var(--font-size) * var(--extra-large-ratio));
    }
}

@media (min-width: 1772px) {
    .tf-software-brand-case .list .list-item {
        padding-top: calc(var(--padding-top) * var(--design-ratio));
        padding-right: calc(var(--padding-right) * var(--design-ratio));
        padding-bottom: calc(var(--padding-bottom) * var(--design-ratio));
        padding-left: calc(var(--padding-left) * var(--design-ratio));
        width: calc(var(--width) * var(--design-ratio));
        height: calc(var(--height) * var(--design-ratio));
    }

    .list .list-item .avatar {
        height: calc(var(--height) * var(--design-ratio));
        width: calc(var(--width) * var(--design-ratio));
    }

    .list .list-item .avatar .qrcode {
        width: calc(var(--width) * var(--design-ratio));
        height: calc(var(--height) * var(--design-ratio));
        margin-right: calc(var(--margin-right) * var(--design-ratio));
        margin-bottom: calc(var(--margin-bottom) * var(--design-ratio));
    }

    .list .list-item .title {
        padding-top: calc(var(--padding-top) * var(--design-ratio));
        padding-left: calc(var(--padding-left) * var(--design-ratio));
    }

    .list .list-item .title span {
        font-size: calc(var(--font-size) * var(--design-ratio));
    }
}