.pro-list{ width: 85vw; max-width: 1600px; display: flex; margin: auto; justify-content:start; flex-wrap: wrap; max-height: 80vw; margin-bottom:20px;}
.pro-list .pro-item{width:19.6333vw; background-color: #eee; margin:2vw 2vw 0vw 0vw;     animation-duration: 0.8s;animation-delay: 0.03s;
animation-name: fadeInUp; transition: all 0.6s; overflow: hidden;}
.pro-list .pro-item:nth-child(4){margin-right: 0;}
.pro-list .pro-item:nth-child(8){margin-right: 0;}
.pro-list .pro-item:nth-child(12){margin-right: 0;}
.pro-list .pro-item:nth-child(16){margin-right: 0;}
.pro-list .pro-item:hover{ background-color: #333;}
.pro-list dl dd{height: 15vw; display: flex; align-items: center;}
.pro-list .pro-item dl dd img{width: 100%; height: 100%; object-fit: cover; 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;}
.pro-list{ width:96vw; margin:auto 2vw }
.pro-list .pro-item{width:46vw; margin:2vw 2vw 0vw 0vw;}
.pro-list dl dd{ height: 32vw; }
.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: 60vw; }
.pro-list dl dd img{width: 100%; object-fit: cover;}
.pro-list dl dt{height: 20vw;}
}


.case-detail{ width: 85vw; max-width: 1600px; margin: auto; margin-top:0; background-color:rgba(150,150,150, 0.1); }
.case-detail .titler{text-align: center; padding:50px 0 50px 0;   color:#888;}
.case-detail .titler h2{color:#333;font-size: 36px;}
.case-detail .image{font-size:16px; margin:20px; color:#888; width: 1000px; margin:auto}
.case-detail .image img{width: 100%; object-fit: cover;}
.case-detail .cnt{width: 1000px; background-color: #fff; margin:auto; font-size:16px; line-height: 2; padding:20px}
.case-detail .info{display: flex; margin:auto; margin-bottom: 5px; margin-top:10px; width: 1000px; align-items:stretch; vertical-align: middle;}
.case-detail .info>div{background-color: #fff; margin-right: 3px; width: calc( (100% - 6px )*0.3 ); padding:10px;}
.case-detail .info>div:last-child{margin:0;  width: calc( (100% - 6px)*0.4 );}
@media screen and (max-width: 1024px) {
    .banner{height: 75vw;}
    .case-detail{ width:calc(100vw );  padding: 10px; }
    .case-detail .titler{padding:20px; font-size: 16px;}
    .case-detail .titler h2{font-size: 16px;}
    .case-detail .image{width: 100%;}
    .case-detail .image img{width: 100%; display: block;}
    .case-detail .cnt{width: 100%;}
    .case-detail .info{width: 100%;}
}
@media screen and (max-width: 768px) {
    .case-detail .info{display: block;}
    .case-detail .info>div{width: 100%; margin-bottom:2px}
    .case-detail .info>div:last-child{width: 100%;}
}