.banners{
    height:287px;
    width: 100%;
    background: url("../images/view_hlhz.jpg") no-repeat center center;
}
.main{
    background: #f8f8f8;
    padding: 1px 0;
}
.main .con{
    background: #ffffff;
    padding: 20px;
    width: 1200px;
    margin: 30px auto 50px;
    box-sizing: border-box;
    border-left: 1px solid #f0f0f0;
    border-top: 1px solid #f0f0f0;
    border-right: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
}
.grid li {
	display: block;
	float: left;
	padding: 7px;
	width: 33.333%;
	opacity: 0;
    box-sizing: border-box;
}
.grid li.shown,
.no-js .grid li,
.no-cssanimations .grid li {
	opacity: 1;
}
.grid.effect-3 li.animate {
	-webkit-transform: scale(0.6);
	transform: scale(0.6);
	-webkit-animation: scaleUp 0.65s ease-in-out forwards;
	animation: scaleUp 0.65s ease-in-out forwards;
}
@-webkit-keyframes scaleUp {
	0% { }
	100% { -webkit-transform: scale(1); opacity: 1; }
}

@keyframes scaleUp {
	0% { }
	100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}
.grid li .con2022:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
.grid li .con2022 {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: block;
}
.grid li .con2022 img{
    width: 100%;
}
.grid li .overtxt{ font-size:18px; color: #fff; line-height: 1.8; position: absolute; top: -100%; left: 0; width:100%; height: 100%; text-align: center;background-color: rgba(0, 0, 0, 0.6); text-align: center; transition: all 0.4s; display: flex; align-items: center; justify-content: center;}
.grid li .overtxt .num{ color: #fff; display: inline-block; padding-top: 1.22rem; padding-bottom: .20rem; position: relative; width: .88rem; margin-bottom: .32rem;}
.grid li .overtxt .num::after{position: absolute; bottom: 0; left: 0; content: "";display: block;width: 100%; height: .03rem; background-color: #fff;
}
.grid li  .overtxt p{padding:20px; color: #fff; font-weight: bold; width: 100%;font-size: 18px;}
.grid li  .con2022:hover .txt{bottom: -100%;}
.grid li  .con2022:hover .overtxt{top: 0;}
.grid li  .con2022:hover img{ -webkit-transform:scale(1.1); transform: scale(1.1);}
