@-webkit-keyframes btnRotate-ys {
0% {
    -webkit-transform: rotateY(0deg);
   }
100% {
    -webkit-transform: rotateY(180deg);
    }
}

/* 确保b-3模块占满全宽 */
.b-3 {
    width: 100%;
    margin: 0;
    padding: 0;
}

.b-3 .tit{height:230px;background:url(https://www.gzep.com.cn/images/b3.jpg) center no-repeat;text-align:center;overflow:hidden;}
.b-3 .tit h2{font-size:30px;color:#fff;font-weight:normal;padding-top:110px;}
.b-3 .tit p{font-size:113px;line-height:113px;font-family:Arial;color:#fff;opacity:0.18;text-transform:uppercase;font-weight:bold;}

.b-3 .hd{display:none;}

/* 优化的PC端布局 - 使用Flexbox替代Float */
.b-3 ul.clearfix{
    min-height: 582px; /* 设置最小高度以避免压缩问题，但允许内容撑开 */
}

.b-3 ul{
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    /* 移除旧的text-align:center，由flex布局控制对齐 */
}

.b-3 li{
    /* 使用flex布局替代float */
    flex: 1 1 25%;  /* flex-grow: 1, flex-shrink: 1, flex-basis: 25% */
    position: relative;
    background: #0154a4;
    min-height: 300px; /* 确保最小高度一致 */
    /* 移除旧的float、width、display属性 */
}

.b-3 li a{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-top: 192px;
    text-align: center; /* 确保文字居中 */
}

.b-3 li h3{
    font-weight: normal;
    font-size: 24px;
    margin: 0; /* 重置默认margin */
}

.b-3 li p{
    font-size: 17px;
    font-family: Arial;
    padding-top: 6px;
    height: 50px;
    margin-bottom: 56px;
}

.b-3 li:hover .se{
	-webkit-animation: btnRotate-ys 0.4s linear 1;
	animation: btnRotate-ys 0.4s linear 1;
}

/* 大屏幕优化 - 确保超宽屏幕下的最佳显示效果 */
@media (min-width: 1920px) {
    .b-3 li {
        max-width: 480px; /* 限制每个模块的最大宽度，避免过度拉伸 */
    }
    .b-3 ul {
        justify-content: center; /* 在超宽屏幕上居中显示 */
        gap: 0; /* 保持紧凑间距 */
    }
}

/* 中等PC屏幕优化 - 1200px到1920px之间 */
@media (min-width: 1200px) and (max-width: 1919px) {
    .b-3 ul {
        justify-content: stretch; /* 充分利用可用空间 */
    }
    .b-3 li {
        flex: 1 1 25%;
        max-width: none; /* 允许充分伸展 */
    }
}

/* 确保翻转动画容器正确设置 */
.b-3 .se {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
}

.b-3 .se img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

@media all and (max-width:1200px){
	.b-3 .tit{display:none;}
	.b-3 .hd{display:block;}
	.b-3 ul{
		padding-top:10px;
		/* 移动端继续使用flex布局但调整为2列 */
		display: flex;
		flex-wrap: wrap;
	}
	.b-3 li{
		flex: 1 1 50%; /* 移动端改为50%宽度，2列布局 */
		/* 移除旧的width:50%，使用flex替代 */
	}
	.b-3 li a{padding-top:22%;}
	.b-3 li img{width:100%;}
	.b-3 li h3{font-size:18px;}
	.b-3 li p{font-size:14px;margin-bottom:10%;}
	.b-3 li a img{width:50px;}
}