.my{
    color: var(--secondColor);
}


.indexProduct .content ul li:hover  img {
    transform: scale(1.2);
}

.indexProduct .content ul li {
    margin-bottom: 3rem;


}






/*四大优势*/




.indexService .title {
    padding-top: 3rem;
    margin-bottom: 3rem;



}


.indexService .title {


    font-size: 2rem;
    padding-bottom: 1rem;

    background-position: center 100%;
    background-size: 5rem 4px;


}




.indexService {
    position: relative;



}

.indexService .content{
    display: flex;
    justify-content: space-between;

    flex-wrap: wrap;

}


.indexService .content li{

    background: #3482ee;

    margin-bottom: 2em;

    padding-bottom: 1.6rem;
    position: relative;

}


.indexService .content li:hover::before {
    content: ''; /* 必须定义content属性，即使为空 */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
 bottom: 0;


   /* background: url("../../assets/images/ys1.jpg") no-repeat bottom / contain;

    */
    opacity: 0.08; /* 设置透明度 */
    z-index: 100; /* 将伪元素置于内容之下 */
}






.indexService .content li:hover{

    background: var(--mainColor);
}


.indexService .four img{


    width: 100%;


    margin-top: 1rem;

    z-index: 1000;
}





.indexService .four img{
    width: 100%;
    transition: 0.5s;


}





.indexService li :hover    .pic {



    color: var(--mainColor);

}





.indexService  .four   .mask4{

    margin-top: 0.4rem;

    color: #fff;

    padding: 0.6rem;



}




.indexService  .four:hover img{

}


.indexService  .four   .mask4 .productName{
    font-size: 1.6rem;
    padding: 0.4rem 0;
}


.indexService  .four:hover .circle .iconfont{
    /*color: #000;*/
}


.indexService  .four:hover .circle .iconfont {
    /*border:#000 2px solid;*/

}


.indexService  .four:hover .productName2{
    /*color: #000;*/
}


.indexService  .four .productContent{

    text-align: left;
}



.indexService  .four:hover .productContent{
    /*color: #000;*/

}




.indexAbout .container2 {
    display: flex;
    justify-content: center;
    margin-bottom: 3rem;
}




.indexBanner .iconfont{
    font-size: 2rem;
    color: #000;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
}

.indexBanner .content  {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}


.indexBanner .content  .four{
    display: flex;
    justify-content: space-around;




}


.indexBanner .content   .li:hover .iconfont{
    color: var(--mainColor);

}


.indexBanner .content   .li:hover p{
    color: #fff;

}








.indexBanner  .content   .circle {
    display: block;
    margin: 0 auto;
    position: relative;
    background-color: #fff;
    border-radius: 50%;
    height: 5rem;
    width: 5rem;
}










.indexService  .circle{
    margin-bottom: 1.6rem;
    margin-top: 4rem;
}


.indexService .circle .iconfont{
    font-size: 2.4rem;
    border-radius: 50%;
    padding: 1.4rem;
    border:2px solid #fff;
    color: #fff;

}


.indexService li:hover .iconfont{

    background: var(--mainColor);

    color: #fff;
    border:2px solid #fff;
}


.hAclass li{
    cursor:pointer
}

.hAclass .active{
    color:red;
}


.hAclass .active a{
    color:red;
}