.title_img {
    width: 100%;
    height: 30vw;
    background: url(../image/index/title_img.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    color: #3e3b34;
    line-height: 44px;
    text-shadow: 0px 2px 25px rgba(139, 134, 134, 0.28);
    font-size: 50px;
    box-sizing: border-box;
}
.title_bg{
    height: 100%;
    padding: 30px 0;
    /* background:url('../image/index/s-background.png') ; */
    background-size: 100% 100%;

}
.title1 {
    padding: 30px 0;
}

.title1>div {
    width: 100%;
    /* background: #fff; */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    font-weight: 600;

}

.icon_title {
    width: 80px;
    height: 80px;
    background: url(../image/index/title_Icon.png) no-repeat;
    background-size: 100%;
    margin-right: 20px;
    border-radius: 50%;
    /* box-shadow: 2px 2px 10px #3FA3FF, 2px 2px 8px rgb(228, 135, 15); */
}

.dajianshi{
    /* width: 780px;
    height: 200px;
    margin:100px auto 0; */
    padding: 0 10px;
     position: relative;
     color: #333;
     font-size: 50px;
     font-weight: 600;
 }
 .dajianshi::after{
     content: '狮路通平台服务';
     top: 0;
     left:10px;
     position: absolute;
     color: transparent;
     background-image: linear-gradient(to right,red,orange,yellow,green,cyan,blue,purple);
     background-clip: text;
     -webkit-background-clip: text;
     clip-path: circle(100px at 0% 50%);
     animation: movebg 3s linear alternate infinite;
 }
 @keyframes movebg{
     0%{
         clip-path: circle(100px at 0% 50%);
     }
     100%{
         clip-path: circle(100px at 100% 50%);
     }
 }


.subtitle1 {
    font-size: 22px !important;
    text-align: center;
    color: #666;
    margin-left: 30px;
    padding: 30px 0;


}

.synopsis {
    width: 100%;
    height: 38vw;
    /* background: #5769f1; */
    background: url(../image/index/synopsis.png) no-repeat;
    background-size: 100% 100%;

}

.synopsis_title {
    width: 100%;
    height: 100%;
}


.synopsis_cont {
    width: 300px;
    height: 350px;
    background: #0d0505;
    padding: 10px;
    font-size: 16px;
    text-indent: 2ch;
    color: #fff;
    font-weight: 600;
    border-radius: 0 0 20px 20px;
    margin-left: 40px;
    box-sizing: border-box;
}

.synopsis_cont>h5 {
    font-size: 35px;
    color: #fff;
    text-shadow: 0px 2px 25px rgba(139, 134, 134, 0.28);
    margin-bottom: 10px;
}

/* .syn-contImg{
    width: 100%;
    height: 200px;
    background: url(../image/index/syn-cont.png) no-repeat;
    background-size: 100%;
} */


.card {
    display: flex;
    box-shadow: 2px 2px 10px #3FA3FF, 2px 2px 8px rgb(228, 135, 15);
}

.card-img {
    width: 30%;
    /* border-radius: 10%; */
    /* box-shadow: 2px 2px 10px #3FA3FF, 2px 2px 8px rgb(228, 135, 15); */
    overflow: hidden;
}

.card-img>img {
    width: 100%;
    height: 100%
}

.card-txt {
    width: 65%;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.card-txt-title {
    font-size: 35px;
    font-weight: 600;
    margin-bottom: 30px;
}

.card-txt-cont {
    font-size: 18px;
    text-indent: 2ch;
}

.title2{
    width: 100%;
    padding: 30px 0;
    margin-top: 30px;
    /* background: #fff; */
    display: flex;
    align-items: center;
}
.title2>div:first-child {
    width: 80px;
    height: 80px;
    /* background-color: darkred; */
    background: url('../image/index/gonglv.png');
    animation: dong 2s infinite;
    background-size: 100% 100%;
    margin-left: 20px;

}

@keyframes dong {
    0% {
        transform: perspective(160px);
    }

    50% {
        transform: perspective(160px) rotatey(180deg);
    }

    100% {
        transform: perspective(160px) rotatey(180deg) rotatex(180deg);
    }
}

.title2>div:last-child{
    margin-left: 20px;
    font-size: 36px;
    font-weight: 600;
    color: #333;


}

.product {
    display: flex;
    justify-content: space-between;
    /* padding: 30px 0; */
}

.product>li {
    width: 30%;
    overflow: hidden;

}

.product_img>img {
    width: 100%;
    height: 100%;
    border-radius: 10px;

}
.product_txt{
    padding-top: 10px;
}
.product_txt>p{
    width: 100%;
    height: 40px;
    /* background-color: rgb(244, 162, 0); */
    text-align: center;
    line-height: 40px;
    color: #333;
    font-size: 20px;
    font-weight: 600;
    border-radius: 8px;
    margin-bottom: 16px;
}
.product_img{
    width: 100%;
    height: 260px;
    position: relative;
    border-radius: 10px;

    /* margin-bottom: 12px; */
}
.mask {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0px;
    font-size: 25px;
    /* font-weight: 600; */
    color: #ffffff;
    border-radius: 8px;
    background-color: #0000006e;
    box-sizing: border-box;
  
}
.mask{
    display: flex;
    justify-content: center;
    align-items:center;
   
}



.title_txt {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.title_txt>div:last-child {
    width: 100px;
    height: 8px;
    background: rgb(244, 162, 0);
    border-radius: 30px;
    margin-top: 20px;
    margin-left: 80px;
}