.fangan-top {
    width: 100%;
    height: 42.735vw;
    background-size:100% 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}
.fangan-top-title {
    font-size: 3.205vw;
    color: #FFFFFF;
}
.fangan-top-desc {
    margin-top: 2.511vw;
    font-size: 1.709vw;
    color: #FFFFFF;
}

.cx-main {
    width: 100%;
    padding-bottom: 5vw;
   background-color: #f5f5f5;
}
.cx-title-box {
    
    margin-left: 10.015vw;
    width: 80vw;
    height: 4.854vw;
    display: flex;
   
}
.cx-title-box-item {
    margin-top: 2.315vw;
    width: 11.978vw;
    height: 3.322vw;
    color: #E10025;
    font-size: 1.107vw;
    border: 1px solid #E10025;
    border-radius: 1.61vw;
    text-align: center;
    line-height: 3.322vw;
    margin-left: 1.007vw;
}
.cx-active {
    background-color: #E10025;
    color: #FFFFFF;
}
.cx-main-content {
    width: 100%;
    margin-top: 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 img{
    margin-top: 0.856vw;
}
.cx-main-content-item img {
    width: 20.936vw;
    height: 10.569vw;
}
.cx-main-content-item-title-box {
    margin-top:1.158vw;
  width: 100%;
  display: flex;
  justify-content: center;
}
.cx-main-p {
    width: 20.835vw;
    height: 1.7vw;
    line-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.208vw;
    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: 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;
    }
}

.cx-page-box {
    margin-top: 5vw;
    width: 100%;
    display: flex;
    justify-content: center;
}


.cx-page-item-left {
    margin-left: 3vw;
width: 2.718vw;
height: 2.718vw;

}
.cx-page-item-left img {
    width: 100%;
    height: 100%;
}
.cx-page-item-left:hover {
    cursor: pointer;
   .cx-left-1 {
    display: none;
   }
   .cx-left-2 {
    display: block !important;
   }
}

.cx-page-item-right {
    margin-left: 3vw;
width: 2.718vw;
height: 2.718vw;

}
.cx-page-item-right img {
    width: 100%;
    height: 100%;
}
.cx-page-item-right:hover {
    cursor: pointer;
   .cx-right-1 {
    display: none;
   }
   .cx-right-2 {
    display: block !important;
   }
}