.tf-hardware-product {
    --padding-top: 130px;
    --padding-bottom: 148px;
}

@media (max-width: 767px) {
    .tf-hardware-product {
        padding-top: calc(var(--padding-top) * var(--extra-small-ratio));
        padding-bottom: calc(var(--padding-bottom) * var(--extra-small-ratio));
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .tf-hardware-product {
        padding-top: calc(var(--padding-top) * var(--small-ratio));
        padding-bottom: calc(var(--padding-bottom) * var(--small-ratio));
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .tf-hardware-product {
        padding-top: calc(var(--padding-top) * var(--middle-ratio));
        padding-bottom: calc(var(--padding-bottom) * var(--middle-ratio));
    }
}

@media (min-width: 1201px) and (max-width: 1452px) {
    .tf-hardware-product {
        padding-top: calc(var(--padding-top) * var(--large-ratio));
        padding-bottom: calc(var(--padding-bottom) * var(--large-ratio));
    }
}

@media (min-width: 1453px) and (max-width: 1771px) {
    .tf-hardware-product {
        padding-top: calc(var(--padding-top) * var(--extra-large-ratio));
        padding-bottom: calc(var(--padding-bottom) * var(--extra-large-ratio));
    }
}

@media (min-width: 1772px) {
    .tf-hardware-product {
        padding-top: calc(var(--padding-top) * var(--design-ratio));
        padding-bottom: calc(var(--padding-bottom) * var(--design-ratio));
    }
}

.tf-hardware-product>.title span {
    --font-size: 56px;
    font-family: 'Microsoft YaHei UI';
    text-align: center;
    display: block;
    line-height: 1;
}

.tf-hardware-product>.title>div {
    --height: 44px;
}

.tf-hardware-product>.list {
    --margin-top: 153px;
}

.tf-hardware-product>.list>ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

.tf-hardware-product>.list>ul>li {
    --margin-left: 35px;
    --margin-right: 35px;
    display: flex;
    justify-content: center;
}

.tf-hardware-product>.list>ul>li:first-child {
    --margin-left: 0;
}

.tf-hardware-product>.list>ul>li:last-child {
    --margin-right: 0;
}

@media (max-width: 767px) {
    .tf-hardware-product>.title span {
        font-size: calc(var(--font-size) * var(--extra-small-ratio));
    }
    
    .tf-hardware-product>.title>div {
        height: calc(var(--height) * var(--extra-small-ratio));
    }
    
    .tf-hardware-product>.list {
        margin-top: calc(var(--margin-top) * var(--extra-small-ratio));
    }

    .tf-hardware-product>.list>ul>li {
        margin-left: calc(var(--margin-left) * var(--extra-small-ratio) * .5);
        margin-right: calc(var(--margin-right) * var(--extra-small-ratio) * .5);
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .tf-hardware-product>.title span {
        font-size: calc(var(--font-size) * var(--small-ratio));
    }
    
    .tf-hardware-product>.title>div {
        height: calc(var(--height) * var(--small-ratio));
    }
    
    .tf-hardware-product>.list {
        margin-top: calc(var(--margin-top) * var(--small-ratio));
    }

    .tf-hardware-product>.list>ul>li {
        margin-left: calc(var(--margin-left) * var(--small-ratio));
        margin-right: calc(var(--margin-right) * var(--small-ratio));
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .tf-hardware-product>.title span {
        font-size: calc(var(--font-size) * var(--middle-ratio));
    }
    
    .tf-hardware-product>.title>div {
        height: calc(var(--height) * var(--middle-ratio));
    }
    
    .tf-hardware-product>.list {
        margin-top: calc(var(--margin-top) * var(--middle-ratio));
    }

    .tf-hardware-product>.list>ul>li {
        margin-left: calc(var(--margin-left) * var(--middle-ratio));
        margin-right: calc(var(--margin-right) * var(--middle-ratio));
    }
}

@media (min-width: 1201px) and (max-width: 1452px) {
    .tf-hardware-product>.title span {
        font-size: calc(var(--font-size) * var(--large-ratio));
    }
    
    .tf-hardware-product>.title>div {
        height: calc(var(--height) * var(--large-ratio));
    }
    
    .tf-hardware-product>.list {
        margin-top: calc(var(--margin-top) * var(--large-ratio));
    }

    .tf-hardware-product>.list>ul>li {
        margin-left: calc(var(--margin-left) * var(--large-ratio));
        margin-right: calc(var(--margin-right) * var(--large-ratio));
    }
}

@media (min-width: 1453px) and (max-width: 1771px) {
    .tf-hardware-product>.title span {
        font-size: calc(var(--font-size) * var(--extra-large-ratio));
    }
    
    .tf-hardware-product>.title>div {
        height: calc(var(--height) * var(--extra-large-ratio));
    }
    
    .tf-hardware-product>.list {
        margin-top: calc(var(--margin-top) * var(--extra-large-ratio));
    }

    .tf-hardware-product>.list>ul>li {
        margin-left: calc(var(--margin-left) * var(--extra-large-ratio));
        margin-right: calc(var(--margin-right) * var(--extra-large-ratio));
    }
}

@media (min-width: 1772px) {
    .tf-hardware-product>.title span {
        font-size: calc(var(--font-size) * var(--design-ratio));
    }
    
    .tf-hardware-product>.title>div {
        height: calc(var(--height) * var(--design-ratio));
    }
    
    .tf-hardware-product>.list {
        margin-top: calc(var(--margin-top) * var(--design-ratio));
    }

    .tf-hardware-product>.list>ul>li {
        margin-left: calc(var(--margin-left) * var(--design-ratio));
        margin-right: calc(var(--margin-right) * var(--design-ratio));
    }
}

.list .list-item .avatar {
    --height: 510px;
    --width: 381px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.list .list-item .title {
    --margin-top: 33px;
    --margin-left: 22px;
}

.list .list-item .title span {
    --font-size: 29px;
    font-family: 'Microsoft YaHei UI';
}

@media (max-width: 767px) {
    .list .list-item .avatar {
        height: calc(var(--height) * var(--extra-small-ratio));
        width: calc(var(--width) * var(--extra-small-ratio));
    }
    
    .list .list-item .title {
        margin-top: calc(var(--margin-top) * var(--extra-small-ratio));
        margin-left: calc(var(--margin-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) {
    .list .list-item .avatar {
        height: calc(var(--height) * var(--small-ratio));
        width: calc(var(--width) * var(--small-ratio));
    }
    
    .list .list-item .title {
        margin-top: calc(var(--margin-top) * var(--small-ratio));
        margin-left: calc(var(--margin-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) {
    .list .list-item .avatar {
        height: calc(var(--height) * var(--middle-ratio));
        width: calc(var(--width) * var(--middle-ratio));
    }
    
    .list .list-item .title {
        margin-top: calc(var(--margin-top) * var(--middle-ratio));
        margin-left: calc(var(--margin-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) {
    .list .list-item .avatar {
        height: calc(var(--height) * var(--large-ratio));
        width: calc(var(--width) * var(--large-ratio));
    }
    
    .list .list-item .title {
        margin-top: calc(var(--margin-top) * var(--large-ratio));
        margin-left: calc(var(--margin-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) {
    .list .list-item .avatar {
        height: calc(var(--height) * var(--extra-large-ratio));
        width: calc(var(--width) * var(--extra-large-ratio));
    }
    
    .list .list-item .title {
        margin-top: calc(var(--margin-top) * var(--extra-large-ratio));
        margin-left: calc(var(--margin-left) * var(--extra-large-ratio));
    }
    
    .list .list-item .title span {
        font-size: calc(var(--font-size) * var(--extra-large-ratio));
    }
}

@media (min-width: 1772px) {
    .list .list-item .avatar {
        height: calc(var(--height) * var(--design-ratio));
        width: calc(var(--width) * var(--design-ratio));
    }
    
    .list .list-item .title {
        margin-top: calc(var(--margin-top) * var(--design-ratio));
        margin-left: calc(var(--margin-left) * var(--design-ratio));
    }
    
    .list .list-item .title span {
        font-size: calc(var(--font-size) * var(--design-ratio));
    }
}

.piles {
    background-image: url(https://tf183.oss-cn-shanghai.aliyuncs.com/website/hardware/piles.jpg);
}

.kitchen {
    background-image: url(https://tf183.oss-cn-shanghai.aliyuncs.com/website/hardware/kitchen.jpg);
}

.board {
    background-image: url(https://tf183.oss-cn-shanghai.aliyuncs.com/website/hardware/board.jpg);
}