
.luodi2-top {
    width: 100%;
    height: 37.393vw;
    background-size:100% 100%;
    background-repeat: no-repeat;
    position: relative;

}
.luodi2-top-title {
    position: absolute;
    top: 12.821vw;
    left: 12.684vw;
    font-size: 2vw;
    color: #FFFFFF;
}
.luodi2-top-desc {
    position: absolute;
    top: 17.393vw;
    left: 12.684vw;
    width: 39vw;
    line-height:2vw;
    font-size: 1.0vw;
    /*color: #b7b4b4;*/
    color: white;
}
.luodi2-section {
    width: 100%;
    display: flex;
}
.luodi2-left {
    margin-left: 10.524vw;
}
.luodi2-left-title {
    font-size: 2.457vw;
    color: #2B2B2B;
    font-weight: bold;
    margin-top: 5.128vw;
}
.luodi2-left-desc {
     margin-top: 2.35vw;
     width: 29.22vw;
     font-size: 1.068vw;
     line-height: 2vw;
     color: #868686;
     height: 14.316vw;
     overflow: hidden;
}
.luodi2-left-btn {
    margin-top: 2.404vw;
    background-color: #E10025;
    width: 10.577vw;
    height: 2.885vw;
    border-radius: 1.709vw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;

}
.luodi2-left-btn img { 
    margin-left: 0.352vw;
    width: 1.709vw;
    height: 1.709vw;
}
.luodi2-right {
    margin-left: 8.387vw;
    
}
.luodi2-right img {
    margin-top: 3.953vw;
    width: 43.536vw;
    height: 24.412vw;
 
}

.luodi2-section2 {
    width: 100%;
}
.luodi2-section2-title {
    margin-top: 5.021vw;
    margin-left: 10.524vw;
    font-size: 2.457vw;
    color: #2B2B2B;
    font-weight: bold;
}
.luodi2-section2-content {
    margin-left: 10.524vw;
    margin-top: 3.259vw;
    width: 81.095vw;
    height: 32.051vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-size:100% 100%;
}
.luodi2-section2-desc {
    width: 70.994vw;
    font-size: 1.496vw;
    color: #FFFFFF;
    line-height: 2.5vw;
}

.luodi2-section3-title {
    width: 100%;
    margin-top: 5.021vw;
    text-align: center;
    font-size: 2.457vw;
    color: #2B2B2B;
    font-weight: bold;

}





.cx-main-content {
    width: 100%;
    margin-bottom: 2.511vw;
    display: flex;
    justify-content: center;
}
.cx-main-content-box {
    width: 82vw;
    height: auto;
    display: flex;
    flex-wrap: wrap;

}
.cx-main-content-item {
    position: relative;
    margin-top: 6.039vw;
    margin-left: 3vw;
     width: 23.251vw;
     height: 21.439vw;
     
}
.cx-main-content-item-img {
    width: 100%;
    display: flex;
    justify-content: center;
}
.cx-main-content-item img {
    margin-top: 0.856vw;
    width: 20.936vw;
    height: 10.569vw;
}
.cx-main-content-item-title-box {
    margin-top:1.1vw;
  width: 100%;
  display: flex;
  justify-content: center;
}
.cx-main-p {
    width: 20.835vw;
    height: 1.5vw;
    font-size: 1.208vw;
    color: #2B2B2B;
    /* 超出显示省略号 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cx-main-content-item-title {
    font-size: 1.107vw;
    color: #333333;
    text-align: center;
}
.cx-main-content-item-dec-box {
    margin-top: 1.1vw;
    width: 100%;
    display: flex;
    justify-content: center;
}
.cx-main-span {
    width: 20.835vw;
    font-size: 0.805vw;
    color: #666666;
    /* 超出二行显示省略号 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.cx-main-content-item-icon-box {
    margin-top: 1.1vw;
    width: 100%;
    display: flex;
    justify-content: center;
}
.cx-main-content-item-iconbox {
    width: 20.835vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cx-main-content-item-iconbox img {
    width: 1.61vw;
    height: 1.61vw;
}
.cx-main-icon {
    width: 3.3vw;
    font-size: 0.805vw;
    color: #919191;
    height: 0.805vw;
}
.cx-main-content-item:hover {
    background-color: #FFFFFF;
    cursor: pointer;
    transform: scale(1.05);
    /* 加上阴影 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    /* .cx-hang {
        display: block;
    } */
}
.cx-hang {
   /* 初始状态：宽度100%但缩放为0，从视觉上不可见 */
   position: absolute;
   bottom: 0;
   left: 0; /* 新增，确保从左侧开始 */
   width: 100%; /* 宽度设为100% */
   height: 0.302vw;
   background-color: #E10025;
   transform: scaleX(0); /* 关键：初始时在X轴缩放到0 */
   transform-origin: center; /* 关键：设置变换原点为中心 */
   transition: transform 0.3s ease-in-out; /* 关键：添加过渡效果 */

}
/* 当父元素被 hover 时，让 .cx-hang 恢复到原尺寸 */
.cx-main-content-item:hover .cx-hang {
    transform: scaleX(1); /* 关键：在X轴上恢复到1倍大小 */
   
}
.cx-main-content-item:hover  {
    .cx-main-content-item-iconbox-1 {
        display: none;
    }
    .cx-main-content-item-iconbox-2 {
        display: block !important;
    }
}

































































