.huake-indexA {
padding: 65px 0;
background: #F2F2F2;
}
.huake-indexA .tit {
text-align: center;
}
.huake-indexA .tit h3 {
font-size: 28px;
color: #333;
}
.huake-indexA .tit p {
font-size: 16px;
color: #333;
line-height: 36px;
margin: 20px 0 0;
}
.huake-indexA dl {
margin-top: 50px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
}
.huake-indexA dl dd {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
position: relative;
width: 23% !important;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
box-sizing: border-box;
margin-right: 10px;
margin-bottom: 10px;
}
.huake-indexA dl dd::after {
display: none;
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 99;
background: rgba(0, 0, 0, .6);
transition: all 0.3s ease 0s;
}
.huake-indexA dl dd::before {
position: absolute;
content: '';
opacity: 0;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
z-index: 102;
border: 1px solid rgba(255, 255, 255, 0.6);
-webkit-transform: scale(0);
transform: scale(0);
}
.huake-indexA dl dd > a {
display: block;
width: 100%;
}
.huake-indexA dl dd img {
display: block;
width: 100%;
}
.huake-indexA dl dd ins {
height: 56px;
line-height: 56px;
padding: 0 8px;
text-align: center;
background: rgba(0, 0, 0, .5);
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: #fff;
font-size: 18px;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.huake-indexA dl dd .txt {
position: absolute;
left: 0;
/* top: calc(50% - 198px / 2); */
top: calc(66% - 198px / 2) !important;
width: 100%;
z-index: 105;
padding: 0 20px;
box-sizing: border-box;
text-align: center;
opacity: 0;
-webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
transition: opacity 0.2s, transform 0.35s;
-webkit-transform: scale(0);
transform: scale(0);
}
.huake-indexA dl dd .txt h6 {
font-size: 18px;
color: #fff;
}
.huake-indexA dl dd .txt h6 a {
color: #fff;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.huake-indexA dl dd .txt h6 a:hover {
color: #ffffff !important;
/* color: var(--color-primary); */
}
.huake-indexA dl dd .txt hr {
background: rgba(255, 255, 255, 0.5);
width: 30px;
height: 1px;
margin: 15px auto 0;
}
.huake-indexA dl dd .txt p {
font-size: 14px;
color: #fff;
line-height: 24px;
margin: 15px 0 0 0;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
}
.huake-indexA dl dd .txt a.more {
border-radius: 50%;
border: 1px solid #fff;
width: 45px;
height: 45px;
line-height: 45px;
display: inline-block;
text-align: center;
margin: 15px 0 0;
}
.huake-indexA dl dd .txt a.more:hover {
border-color: var(--color-primary);
}
.huake-indexA dl dd .txt a.more i {
color: #fff;
font-size: 12px;
}
.huake-indexA dl dd .txt a.more:hover i {
color: var(--color-primary);
}
.huake-indexA dl dd:hover::before {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.huake-indexA dl dd:hover::after {
display: block;
}
.huake-indexA dl dd:hover .txt {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition-duration: 0.35s;
transition-duration: 0.35s;
}
.huake-indexA dl dd:hover ins {
display: none;
}
@media screen and (max-width:1400px) {
.huake-indexA dl dd ins {
font-size: 17px;
}
.huake-indexA dl dd .txt h6 a {
/* -webkit-line-clamp: 1; */
  -webkit-line-clamp: 2 !important;
}
.huake-indexA dl dd .txt p {
-webkit-line-clamp: 4;
}
.huake-indexA dl dd .txt a.more {
width: 40px;
height: 40px;
line-height: 40px;
}
}
@media screen and (max-width:390px) {
 .huake-indexA dl dd {
        width: 100% !important;          /* 改为100%，每张卡片独占一行 */
        display: block;
        float: none;
        margin-right: 0;      /* 移除右边距 */
    }
    
    .huake-indexA dl dd img {
        display: block;
        width: 100%;
        max-width: 400px;     /* 限制图片最大宽度 */
        margin: 0 auto;       /* 图片居中 */
    }
    
    .huake-indexA dl dd ins {
        max-width: 400px;     /* 标题栏与图片同宽 */
        margin: 0 auto;
        left: auto;
        right: auto;
    }

}
@media screen and (max-width:996px) {
 /* .huake-indexA dl dd {
width: 50%;
display: block;
float: left;
}  */
 .huake-indexA dl dd {
        position: relative;
        overflow: hidden;  /* 防止内容溢出卡片 */
    }
    
    .huake-indexA dl dd .txt {
        position: absolute;
        left: 0;
        top: 0;           /* 从顶部开始，不再用 calc 计算 */
        width: 100%;
        height: 100%;     /* 占满整个卡片高度 */
        z-index: 105;
        padding: 20px;
        box-sizing: border-box;
        text-align: center;
        opacity: 0;
        display: flex;           /* 使用 flexbox 居中 */
        flex-direction: column;   /* 垂直排列 */
        justify-content: center;  /* 垂直居中 */
        align-items: center;      /* 水平居中 */
        -webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
        transition: opacity 0.2s, transform 0.35s;
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    
    .huake-indexA dl dd .txt h6 {
        font-size: 18px;
        color: #fff;
        margin: 0;        /* 清除默认 margin */
    }
    
    .huake-indexA dl dd .txt p {
        font-size: 14px;
        color: #fff;
        line-height: 24px;
        margin: 10px 0 0 0;   /* 减小 margin */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        /* -webkit-line-clamp: 3;  iPad 端减少为3行，防止溢出 */
        /* -webkit-box-orient: vertical; */
    }
    
    .huake-indexA dl dd .txt a.more {
        margin: 10px 0 0;   /* 减小 margin */
    }


}
@media screen and (max-width:768px) {
.huake-indexA {
padding: 30px 0;
}
.huake-indexA .tit h3 {
font-size: 24px;
}
.huake-indexA .tit p {
font-size: 14px;
line-height: 24px;
margin: 15px 0 0;
}
.huake-indexA dl {
margin-top: 30px;
display: flex;
overflow: hidden;
}
.huake-indexA dl dd::after,
.huake-indexA dl dd::before {
display: none;
}
/* .huake-indexA dl dd ins {
height: 45px;
line-height: 45px;
background: rgba(0, 0, 0, .6);
font-size: 15px;
} */
 .huake-indexA dl dd img {
        width: 100%;
    }
    
    .huake-indexA dl dd ins {
        width: 100%;
    }
.huake-indexA dl dd .txt {
display: none;
}
.huake-indexA dl dd:hover::before,
.huake-indexA dl dd:hover::after {
display: none;
}
.huake-indexA dl dd:hover ins {
display: block;
}
}
@media screen and (max-width:400px) {
.huake-indexA .tit h3 {
font-size: 20px;
}
}