.sub-nav{background-color: rgba(250,250,250,1);border-bottom: 1px solid #e1e1e1; width: 100%;}
.sub-nav ul{display: flex;  margin: 0 auto; justify-content: center; width: 85vw; max-width: 1600px; align-items: stretch;}
.sub-nav ul li{overflow: hidden; width: 25%;}
.sub-nav ul li a{font-size:1.2rem;transition: all ease .3s;display: inline-block;color: #222;padding: 22px 20px; line-height: 1.2; text-decoration: none; position: relative; text-align: center; width: 100%; height: 100%; vertical-align: middle;}
.sub-nav ul li a::before {content: '';display: block;width: 0px;position: absolute;bottom: -16px;left: 50%;transform: translate(-50%,-50%);height: 0px;opacity: 0;transition: all 0.6s; border-bottom: 8px solid #8b764c;border-left: 10px solid transparent;border-right: 10px solid transparent}
.sub-nav ul li a::after {content: '';display: block;width: 0;height: 3px;bottom: 0;left: 50%;position: absolute;background: #8b764c;transition: all 0.6s;transform: translateX(-50%)}
.sub-nav ul li:hover a::after,.sub-nav ul li.on a::after {width: 100% }
.sub-nav ul li:hover a::before,.sub-nav ul li.on a::before{opacity: 1;bottom: -2px;}
.sub-nav ul li:hover a,.sub-nav ul li.on a{color: #4a4a4a;background:#fabe00; }


.pro-list{ width: 85vw; max-width: 1600px; display: flex; margin: auto; justify-content:start; flex-wrap: wrap; margin-bottom: 20px;}
.pro-list .pro-item{width:calc( (100% - 6vw)/4); height: calc( (100% - 6vw)/4  * 0.6  + 4vw); background-color: #eee; margin:2vw 1.5vw 0vw 0vw;     animation-duration: 0.8s;animation-delay: 0.03s;
animation-name: fadeInUp; transition: all 0.6s; overflow: hidden;}
.pro-list .pro-item:hover{ background-color: #333;}
.pro-list dl dd{height: calc( (85vw - 6vw)/4 * 0.6 ); display: flex; align-items: center; justify-content: center;}
.pro-list .pro-item dl dd img{width: 100%; height: calc( (85vw - 6vw)/4 * 0.6 ); object-fit: contain; transition: all 0.6s;}
.pro-list .pro-item:hover dl dd img{transform:scale(1.1)}
.pro-list dl dt{text-align: center; height: 4vw;padding:10px}
.pro-list .pro-item dl dt a{font-size: 16px; color:#333; text-decoration: none; transition: all 0.6s;}
.pro-list .pro-item:hover dl dt a{color:#fff}
@media screen and (max-width: 1024px) {
.banner{height: 75vw;}
.sub-nav{display: none;}
.pro-list{ width:96vw; margin: 3vw 2vw }
.pro-list .pro-item{width:46vw; margin:2vw 2vw 0vw 0vw;}
.pro-list dl dd{ height: 32vw; }
.pro-list .pro-item dl dd img{height: 100vw;}
.pro-list dl dt{height: 12vw;}
}
@media screen and (max-width: 768px) {
.pro-list{ width:96vw; margin:auto 2vw }
.pro-list .pro-item{width:100%; margin:2vw 0 0 0 }
.pro-list dl dd{ height: 80vw; }
.pro-list .pro-item dl dd img{height: 100vw;}
.pro-list dl dt{height: 20vw;}
}