@charset "utf-8";

.product-group{margin:0 -10px;}
.product-group:after{clear:both; content:""; display:block;}
.product-group li{width:25%; padding:10px; float:left;}
.product-group .prd-img{padding-top:20px; background-color:#fff; position:relative;}
.product-group .prd-img:after{width:235px; height:40px; bottom:0; left:0; background:url("../../../img/prdllog.png") no-repeat; background-size:cover; content:""; display:block; position:absolute; transition:all 0.2s ease-in-out; }
.product-group .prd-img img{max-width:100%;}
.product-group .prd-img .txt-box{top:10px; left:20px; z-index:90; position:absolute;}
.product-group .prd-img .txt-box .cc{margin-bottom:10px; font-weight:500; font-size:18px; color:#ea5505;}
.product-group .prd-img .txt-box .cc span{position:relative;}
.product-group .prd-img .txt-box .ss{font-weight:600; font-size:25px; color:#222;}
.product-group .prd-img .txt-box .ss span:after{width:0; height:2px; bottom:-10px; left:0; background-color:#fff; content:""; display:block; position:absolute; transition:all 0.2s ease-in-out;}

.over-bg{width:100%; height:100%; top:0; left:0; opacity:0; background:url("../../../img/ovbg.png") no-repeat center center; background-size:cover; position:absolute; transition:all 0.2s ease-in-out; }

.product-group a:hover .over-bg{opacity:1;}
.product-group a:hover .gall_img:after{opacity:0.1;}
.product-group a:hover .txt-box .cc{color:#fff !important;}
.product-group a:hover .txt-box .ss{color:#fff !important;}
.product-group a:hover .txt-box .ss span:after{width:100% !important;}

@media screen and (max-width:1240px){
	.product-group .prd-img .txt-box .ss{font-size:22px;}
}

@media screen and (max-width:1100px){
	.product-group .prd-img .txt-box .ss{font-size:20px;}
}

@media screen and (max-width:880px){
	.product-group li{width:100%;}
}


@media screen and (max-width:580px){
	.product-group .prd-img .txt-box .cc{margin-bottom:5px; font-size:16px;}
	.product-group .prd-img .txt-box .ss{font-size:22px;}
}

@media screen and (max-width:500px){
	.product-group .prd-img:after{width:250px; height:43px;}
}