@charset "utf-8";
.product-left{width: 280px;}
/*  */
.product-type-title h3{position: relative; font-size: 32px; color: var(--yf-green-light);}
.product-type-title h3::before{position: absolute; top: 11px; right: 5px; content: ''; width: 16px; height: 16px; border-bottom: 2px solid var(--yf-green-default); border-right: 2px solid var(--yf-green-default); transform: rotate(45deg);}


/*  */
.product-filter{ margin-top: 24px; border-top: 1px solid #CCC;}
.product-filter-title{padding-top: 40px;}
/*  */
.product-filter-lists ul li{margin-top: 24px;}
.product-filter-lists ul li a{ position: relative; display: flex; align-items: center; line-height: 30px; font-size: 18px;}
.product-filter-lists ul li a:before{content: ''; display: inline-block; width: 24px; height: 24px; margin-right: 20px; border: 2px solid #333;}
.product-filter-lists ul li a:after{ position: absolute; top: 10px; left: 7px; content: '';  width: 10px; height: 6px; border-bottom: 1px solid #fff; border-left: 1px solid #fff; transform: rotate(-45deg);}
.product-filter-lists ul li a.on:before,
.product-filter-lists ul li a:hover:before{background-color: #333;}

.product-right{ flex: 1; padding-left: 80px;}

.product-lists ul{margin-left: -45px;}
.product-lists ul li{width: 33.33%; padding-left: 45px; margin-bottom: 60px;}

.product-lists-pic{ position: relative; display: block; overflow: hidden; box-shadow: 0px 0px 40px 0px rgba(0, 131, 118, 0.08);}
.product-lists-pic img{width: 100%; transform: scale(.8); transition: .5s;}
/*  */
.product-lists-tag{position: absolute; bottom: 0; left: 0; width: 32px; height: 31px; background-color: var(--yf-green-light);}
.product-lists-tag span{ position: absolute; left: 0; z-index: 1; bottom: 0; display: flex; align-items: center; justify-content: center; padding-left: 25px;  width: 140px; height: 50px; color: #fff; background-color: var(--yf-green-light);}
.product-lists-tag span::before{ position: absolute; left: 0; bottom: 0; z-index: -1; content: ''; display: flex; width: 50px; height: 100px; background-color: var(--yf-green-light);}

.product-lists-title{padding-top: 20px;}
.product-lists-title h3 a{color: var(--yf-green-default);}
.product-lists-title p{margin-top: 8px;}


.product-lists-item:hover .product-lists-pic img{transform: scale(1);}
@media (max-width:1600px) {
    .product-filter{ margin-top: 14px;}
    .product-filter-title{padding-top: 30px;}
    /*  */
    .product-filter-lists ul li{margin-top: 14px;}

    .product-right{ flex: 1; padding-left: 40px;}
    .product-lists ul{margin-left: -25px;}
    .product-lists ul li{ padding-left: 25px; margin-bottom: 40px;}

    .product-lists-tag{width: 22px; height: 22px;}
    .product-lists-tag span{ padding-left: 15px;  width: 120px; height: 40px; font-size: 14px;}
    .product-lists-tag span::before{width: 40px; height: 80px;}

}

@media (max-width:1440px) {
    .product-left{width: 200px;}
    .product-type-title h3{ font-size: 24px; }
    .product-type-title h3::before{top: 10px; width: 10px; height: 10px; }
    .product-filter-title{padding-top: 20px;}
    .product-filter-lists ul li a{font-size: 16px;}
    .product-filter-lists ul li a:before{width: 18px; height: 18px; margin-right: 15px;}
    .product-filter-lists ul li a:after{ top: 12px; left:5px; width: 8px; height: 4px;}
}

@media (max-width:1200px) {
    .product-lists ul li{width: 50%; }
}

@media (max-width:860px) {
    .product-left{width: 100%;}
    .product-filter{ margin-top: 8px;}
    .product-filter-title{padding-top: 10px;}
    .product-filter-lists ul{display: flex; flex-wrap: wrap; }
    .product-filter-lists ul li{margin-top: 8px; margin-right: 15px;}
    .product-filter-lists ul li a:before{margin-right: 5px;}

    .product-right{ flex: 1; padding-top: 40px; padding-left: 0; width: 100%;}

}

@media (max-width:640px) {

    .product-filter-lists ul li a{font-size: 14px;}
    .product-filter-lists ul li a:before{width: 18px; height: 18px; margin-right: 5px;}
    .product-filter-lists ul li a:after{ top: 12px; left:5px; width: 8px; height: 4px;}

    /*.product-lists ul li{width: 100%; }*/
    .product-lists ul{margin-left: -15px;}
    .product-lists ul li{ padding-left: 15px; margin-bottom: 30px;}
    .product-lists-title{padding-top: 15px;}
    .product-lists-title p{margin-top: 0;}

    .product-lists-tag{width: 22px; height: 22px;}
    .product-lists-tag span{ padding-left: 15px;  width: 100px; height: 30px; font-size: 12px;}
    .product-lists-tag span::before{width: 30px; height: 60px;}

}