﻿.common-main .pro-list.list1 li{position:relative;overflow:hidden}
.common-main .pro-list.list1 li .pro-img{border:none}
.common-main .pro-list.list1 li .mask{position:absolute;top:50%;left:0;width:100%;-webkit-transform:scale(0.5) translate(0%,-50%);transform:scale(0.5) translate(0%,-50%);-webkit-transform-origin:50% 0%;-ms-transform-origin:50% 0%;transform-origin:50% 0%;z-index:1;opacity:0;padding:0 30px}
.common-main .pro-list.list1 li:hover .mask{transform:scale(1) translate(0,-50%);opacity:1;transition-delay:0.35s;transition:all 0.35s ease;display:flex;flex-direction:column;align-items:center}
.common-main .pro-list.list1 li:hover .mask{top: 0;transform: initial;height: 100%;justify-content: center;background: #00000080;}
.common-main .pro-list.list1 li .mask .pro-more{display:inline-block;color:var(--color);padding:8px 0px;transition:color .5s,padding .5s,border .5s;position:relative;z-index:1;overflow:hidden;border-radius:2px;text-transform:lowercase}
.common-main .pro-list.list1 li:hover .mask .pro-more{border:1px solid var(--color);padding:6px 10px}
.common-main .pro-list.list1 li.is-checked .pro-cart:hover{color:#FFF}
.common-main .pro-list.list1 li .mask .pro-more::before{content:"";display:block;position:absolute;top:50%;left:50%;width:10px;height:10px;margin:-5px 0px 0px -5px;border-radius:50%;background-color:var(--color);z-index:-1;transition:transform .8s cubic-bezier(0,0,0.2,1),opacity .6s;transform:scale(0);opacity:0}
.common-main .pro-list.list1 li:hover .mask .pro-more:hover:before{transform:scale(20);opacity:1;color:#ffff !important}
.common-main .pro-list.list1 li .mask .pro-more{border:1px solid var(--color);padding:6px 10px;color:#111}
.common-main .pro-list.list1 li .mask .pro-more{color: #fff;}
.common-main .pro-list.list1 li .pro-info .pro-name{text-align:center}
.common-main .pro-list.list1 li .pro-info{position: relative;z-index: 999;transition: .3s;}
.common-main .pro-list.list1 li:hover .pro-info .pro-name{color: #fff;}
/* @keyframes snip1383{50%{-webkit-transform:scale(0.8) translateY(0%);transform:scale(0.8) translateY(0%);opacity:0.5}
100%{-webkit-transform:scale(0.8) translateY(150%);transform:scale(0.8) translateY(150%);opacity:0.5}} */
.common-main .pro-list.list1 li .pro-img{object-fit:contain;transition-delay:0.2s;backface-visibility:hidden}
/* .common-main .pro-list.list1 li:hover .pro-img{animation:snip1383 0.45s linear forwards;animation-iteration-count:1} */
.common-main .pro-list.list1 li:hover .pro-img{transition: .3s;}

.common-main .pro-cate li{width:24%;margin:0 1.333% 25px 0;display:flex;flex-direction:column-reverse;}
.common-main .pro-cate li .cate-more{display:none;}
.common-main .pro-cate li .cate-cont{position:relative;flex:1;padding:15px;}
.common-main .pro-cate li .cate-cont .cate-des,.common-main .pro-cate li .cate-img::before{display:none;}
.common-main .pro-cate li:hover .cate-cont{background:var(--color)}
.common-main .pro-cate li:hover .cate-cont .cate-name::before{background:#fff}
@media (max-width:900px){.common-main .pro-cate li{width:48%;margin-right:4%}
.common-main .pro-cate li:nth-child(2n){margin-right:0}
.common-main .pro-cate li .cate-img{width:100%}
.common-main .pro-cate li .cate-cont{width:100%}
.common-main .pro-cate li:hover .cate-cont .cate-name{color:#fff}}
@media (max-width:540px){.common-main .pro-cate li .cate-cont{padding:10px;}}
@media (min-width:1025px){.pro-cate-wrap li .cate-name{height: 41px;}} 