.banner-con{
    background: #253654;
    color: #ffffff;
}
.banner-con .img-text{
    gap: 30px;
}
.tips{
    border: 1px solid #374763;
    width: fit-content;
    padding: 5px 30px;
    border-radius: 30px;
    color: #939cae;
    font-size: 14px;
}
.attr{
    gap: 30px;
    flex-wrap: wrap;
}
.attr li{
    position: relative;
    gap: 10px;
}
.attr li:nth-child(1):before{
    content: "";
    background: url(../images/jinliao.png) no-repeat;
    width: 46px;
    height: 46px;
    display: block;
    flex-shrink: 0;
}
.attr li:nth-child(3):before{
    content: "";
    background: url(../images/motor.png) no-repeat;
    width: 46px;
    height: 46px;
    display: block;
     flex-shrink: 0;
}
.attr li:nth-child(5):before{
    content: "";
    background: url(../images/chuli.png) no-repeat;
    width: 46px;
    height: 46px;
    display: block;
     flex-shrink: 0;
}
.attr li:nth-child(2n):before{
    content: "";
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom,transparent,#ffffff,transparent);
    position: absolute;
    top: 0;
    left: 0;
}
.attr span{
    font-weight: bold;
}
.attr p{
    color: #d9d9d9;
}
.material{
    gap: 30px;
    background: url(../images/gaoguang.png) no-repeat;
    background-size: 100% 100%;
    padding: 10px 20px;
    box-sizing: content-box;
}
.material p{
    margin-bottom: 0;
    text-align: center;
    margin-top: 10px;
}
.contact-con{
    gap: clamp(20px,2.5vw,50px);
    margin-top: 60px;
}
.contact-con a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 64px;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    background: #a52a2a;
    border-radius: 30px;
    color: #ffffff;
}
.contact-con a:before{
    content: "";
    background: url(../images/small_circle.png) no-repeat;
    width: 100px;
    height: 100px;
    position: absolute;
    left: -20px;
    top: -28px;
}
.contact-con a:after{
    content: "";
    background: url(../images/dianji.png) no-repeat;
    width: 28px;
    height: 40px;
    position: absolute;
    right: 0px;
    bottom: 0;
}
.contact-con ul li{
    color: #a3acb8;
}
.contact-con ul li:first-child{
    font-size: 20px;
}
.contact-con ul li:last-child{
    font-size: 14px;
}
.introduction-con .introduction{
    align-items: flex-end;
}
.introduction-con .content{
    background: #f2f2f2;
    padding: clamp(20px,2.5vw,50px);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top:30px;
    line-height: 2;
    color: #8f8f8f;
}
.introduction-con .content p{
    line-height: 2;
}
.introduction-con img{
    max-width: 50%;
}
.material-apply-con{
    background: #253654;
    color: #ffffff;
}
.material-apply-con .material-apply{
    gap: clamp(30px , 4.2vw, 80px);
}
.material-apply-con .material-apply img{
    max-width: 50%;
}
.material-apply-con .material-apply ul{
    text-align: right;
}
.material-apply-con .material-apply ul li{
    line-height: 2;
}
.material-apply-con .material-apply ul li:first-child{
    font-size: 30px;
    margin-bottom: 20px;
}
.material-apply-con .material-apply ul li:last-child{
    font-size: 14px;
}
.principle-con{
    background: url(../images/principle-bg.png) no-repeat;
    background-size: cover;
}
.principle-con .principle .left-right-con{
    gap: clamp(30px , 4.2vw, 80px);
}
.principle-con .principle h2{
    text-align: center;
    position: relative;
    z-index: 1;
}
.principle-con .principle .left-con{
     position: relative;
       display: flex;
    flex-direction: column;
    justify-content: center;
}
.principle-con .principle .left-con>div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
     width: 24vw;
    height: 24vw;
    border-radius: 50%; 
    border: 1px dashed #000000;
}
.principle-con .principle .left-con:before{
    content: "";
    width: 1px;
    height: calc(50% - 12vw);
    background-image: linear-gradient(to bottom, #000000 0%, #000000 50%, transparent 50%);
    background-size: 1px 8px;
    background-repeat: repeat-y;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.principle-con .principle .left-con:after{
    content: "";
    width: 1px;
    height: calc(50% - 12vw);
     background-image: linear-gradient(to bottom, #000000 0%, #000000 50%, transparent 50%);
    background-size: 1px 8px;
    background-repeat: repeat-y;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.principle-con .principle .left-con>div{
  
}
.principle-con .principle .left-con>div>div{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20vw;
    height: 20vw;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 200px;
    flex-shrink: 0;
    /*margin-right: -10vw;;*/
    position: relative;
}
.principle-con .principle .left-con>div>div:before{
    content: "";
    width: 16vw;
    height: 16vw;
    border-radius: 8vw;
    background: #ffffff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.principle-con .principle .right-con{
    position: relative;
    flex: 1;
    padding: clamp(30px , 4.2vw, 80px);
}
.principle-con .principle .right-con img:first-child{
 
}
.principle-con .principle .right-con .principle-img{
    /*position: absolute;*/
    /*left: 20vw;*/
    /*top: 20px;*/
    /*max-width: stretch;*/
    /*width: 38vw;*/
    /*height: 23vw;*/
    /*object-fit: contain;*/
}
.principle-con .principle .right-con .desc{
   border-top: 1px dashed #000000;
    line-height: 2;
    padding-top: 30px;
    margin-top: 30px;
}
.principle-con .principle .right-con .desc p{
    line-height: 2;
}
.advantage-con{
    background: #253654;
    
}
.advantage-con h2{
    color: #ffffff;
}
.advantage-con .ul-two{
    gap: 30px;
}
.advantage-con ul{
    gap: clamp(20px,2.5vw,50px);
    max-width: calc((100% - 200px) / 2);
}
.advantage-con ul li{
    background: url(../images/feature-bg.png) no-repeat;
    background-size: 100% 100%;
    padding: 30px 6vw;
    position:relative;
}
.advantage-con ul:nth-child(2) li{
    background: url(../images/dbx2.png) no-repeat;
     background-size: 100% 100%;
}
.advantage-con ul:nth-child(1) li:nth-child(1):after{
    content: "";
    background: url(../images/sheji.png) no-repeat;
    width: 80px;
    height: 80px;
    position: absolute;
    right: -90px;
    top: 0;
}
.advantage-con ul:nth-child(1) li:nth-child(2):after{
    content: "";
    background: url(../images/sq.png) no-repeat;
    width: 80px;
    height: 80px;
    position: absolute;
    right: -90px;
    top: 0;
}
.advantage-con ul:nth-child(1) li:nth-child(3):after{
    content: "";
    background: url(../images/fw1.png) no-repeat;
    width: 80px;
    height: 80px;
    position: absolute;
    right: -90px;
    top: 0;
}
.advantage-con ul:nth-child(2) li:nth-child(1):before{
    content: "";
    background: url(../images/cl.png) no-repeat;
    width: 80px;
    height: 80px;
    position: absolute;
    left: -90px;
    top: 0;
}
.advantage-con ul:nth-child(2) li:nth-child(2):before{
    content: "";
    background: url(../images/tc23.png) no-repeat;
    width: 80px;
    height: 80px;
    position: absolute;
    left: -90px;
    top: 0;
}
.advantage-con ul:nth-child(2) li:nth-child(3):before{
    content: "";
    background: url(../images/chanliang.png) no-repeat;
    width: 80px;
    height: 80px;
    position: absolute;
    left: -90px;
    top: 0;
}
.parameter-con .parameter .table-con{
    overflow-x: auto;
}
.parameter-con .parameter .table-con table{
    text-align: center;
}
.parameter-con .parameter .table-con table tbody tr:first-child th,.parameter-con .parameter .table-con table tbody tr:first-child td{
    background: #2c313e;
    color: #ffffff;
    font-weight: bold;
}

.table td, .table th{
    vertical-align: middle;
}
.parameter-con .parameter .table-con .worning{
    font-size: 14px;
}

@media (max-width:1080px){
    .principle-con{
        padding-top: clamp(30px , 4.2vw, 80px);
        padding-bottom: clamp(30px , 4.2vw, 80px);
    }
     .principle-con .principle .left-right-con{
        flex-direction: column;
     }
     .principle-con .principle .left-con{
         align-items: center;
     }
    .principle-con .principle .left-con:before,.principle-con .principle .left-con>div>div:before{
        display: none;
    }
    .principle-con .principle .left-con>div{
        border: none;
    }
    .principle-con .principle .left-con>div,.principle-con .principle .left-con>div>div{
        width: fit-content;
        height: auto;
    }
    .principle-con .principle .left-con>div>div{
        background: transparent
    }
      .principle-con .principle .left-con h2{
        display: flex;
        justify-content: center; 
        align-items: center;
      }
      
      .principle-con .principle .right-con{
          padding: 0;
      }
    .principle-con .principle .right-con .principle-img,.principle-con .principle .right-con .desc{
        position: static;
        width: auto;
        height: auto;
        max-width: 100%;
    }
     .principle-con .principle .right-con .desc p{
         line-height: 2;
     }
    .advantage-con ul{
        /*flex-direction: column;*/
        gap:clamp(20px, 2.5vw, 50px);
        max-width: calc((100% - clamp(20px, 2.5vw, 50px)) / 2);
    }
    .advantage-con ul{
        flex: 1;
        margin-bottom: 0;
    }
    .advantage-con ul:nth-child(1) li:nth-child(1):after,.advantage-con ul:nth-child(1) li:nth-child(2):after,.advantage-con ul:nth-child(1) li:nth-child(3):after,.advantage-con ul:nth-child(2) li:nth-child(1):before,.advantage-con ul:nth-child(2) li:nth-child(2):before,.advantage-con ul:nth-child(2) li:nth-child(3):before{
        display: none;
    }
}

@media (max-width:768px){
    .advantage-con ul li,.advantage-con ul:nth-child(2) li{
        background: #ffffff;
        word-break: break-all;
    }
    .banner-con .img-text,.introduction-con .introduction,.material-apply-con .material-apply{
        flex-direction: column;
    }
    .introduction-con .introduction{
        align-items: flex-start;
    }
    .introduction-con img,.material-apply-con .material-apply img{
        max-width: 100%;
    }
    .contact-con{
        flex-wrap: wrap;
    }
    .advantage-con .ul-two{
        flex-direction: column;
        
    }
    .advantage-con ul{
        max-width: 100%;
    }
}