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



.icon-icon-test{
    font-size: 1.2rem;
    color:#fff;

    padding-right: 0.6rem;
}



.Banner {
    margin-top: 7.5rem;
    height: 17rem;
    width: 100%;
    background-image: url(../images/breadcrumb-1.jpg);


    background-position: center center;
    background-repeat: repeat;
    background-size: cover;

    position: relative;

}

.Banner::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
 background-color: rgba(3, 13, 40, 0.70);
    content: "";

}





.Banner .bannerTitle {
    position: absolute;
    color: #fff;
    font-size: 2rem;
    padding-top: 7rem;
    text-align: left;



}






.indexYear{
    background: var(--secondColor);
    padding: 5rem 0   3rem 0;
}




.indexYear .container{
    display: flex;
    justify-content: space-between;
    color: #fff;

}

.indexYear .content{

    margin-top: 1rem;
}



.indexYear .iconfont{
    font-size: 3rem;
    color: #fff;
    margin-bottom: 0.6rem;
    display: inline;
    font-weight: 400;
}


.indexYear .content .timer{
    font-size: 3rem;

    color:#fff;


}


.indexYear .content .add{
    font-size: 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;
    padding-bottom: 3rem;

  /*  background:
            url("../../upload/service-bg.jpg") no-repeat top / contain,
            rgba(3, 13, 40, 0.84);
    background-blend-mode: overlay;
 */



}

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

    flex-wrap: wrap;

}

.indexService  .three .pic{
    height: 28rem;
    overflow: hidden;
    width: 100%;
}




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

}


.indexService  .three {
    position: relative;

}

.indexService  .three    .mask{

    color: #fff;

    padding: 0.6rem;

    background: var(--secondColor) ;

    position: absolute;

    transition: 0.5s;
opacity: 0;

    bottom:2rem;

    left: 0;
}


.indexService  .three:hover  .mask{

    opacity: 1;
}


.indexService  .three:hover img{
    transform: scale(1.2);
}


.indexService  .three    .mask .productName{
    font-size: 1.6rem;
    padding: 1rem 0;
}

.indexService  .three:hover .product_name  a {
    color: var(--secondColor);
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--secondColor);
}




.client {
    background:
            url("../images/nhdswl_bg3.png") no-repeat top /  cover;


    background-color: var(--mainColor);


    background-blend-mode: overlay;

    padding-bottom: 3rem;

}


.client .title{
    padding-top: 3rem;
    color: #fff;


    padding-bottom: 1rem;
    background: linear-gradient(to right, #fff, #fff) no-repeat;
    background-position: center 100%;
    background-size: 5rem 4px;


    margin-bottom: 2rem;



}

.client .container .content{

    position: relative;
}

.client .container .content ul{

    display: flex;
    justify-content: space-between;

flex-wrap: wrap;
}



.client   .container .content  li{

    margin-top: 3rem;


    color: #fff;


    border-radius: 8px;

    border: 1px solid #f6f6f6;

    padding-bottom: 1rem;


}

.clientPic{
    margin-top: -2rem;
    text-align: left;
    padding-left: 1.4rem;
    display: flex;


}
.clientPic span{


      padding-top: 2.4rem;
    padding-left:1rem;


}
.clientPic img  {


    width: 5rem;
    border-radius: 50%;
}

.client .clientContent{

    padding: 0.6rem 0.4rem;



}


.client .container  .indicator2 ul {

    margin-top: 1rem;
    display: flex;


    justify-content: center;


}

.indicator2 {

}

.indicator2 ul li {
    background-color: #fff;

    border-radius: 0%;

    margin: 0 10px;
    width: 1.4rem;
    height: 0.4rem;
    cursor: pointer;
}

.indicator2 ul .active {
    transform: scale(1.3);
    background-color: var(--secondColor);
}