*{margin: 0;padding: 0;box-sizing: border-box;}
html, body {
    min-height: 100%;
    background: #F4F7FC;
}
h1, h2, h3, h4, h5, h6{font-weight:normal;}
ul,li{
    list-style: none;
}
a {
    text-decoration: none;
    color: #020814;
}
body {
    font-family: Source Han Sans CN, Source Han Sans CN-Medium;
    font-size:14px;
    color:#020814;
}

img {
    border: none;
    vertical-align: middle;
}



table {
    border-collapse: collapse;
    table-layout: fixed;
}

input, textarea {
    outline: none;
    border: none;
}

textarea {
    resize: none;
    overflow: auto;
}

.clearfix {
    zoom: 1;
}

.clearfix:after {
    content: ".";
    width: 0;
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
    overflow:hidden;
}

.fl {
    float: left
}

.fr {
    float: right
}

.tl {
    text-align: left;
}

.tc {
    text-align: center
}

.tr {
    text-align: right;
}

.ellipse {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inline{
    display: inline-block;
}
html,body{scroll-behavior:smooth}

main,nav,.banner-content{
    width: 1200px;
    margin: 0 auto;
}

button {
  /* 重置按钮的所有默认样式 */
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  outline: none;
}



.banner{
    width: 100%;
    height: 540px;
    background: url(../image/banner.jpg) no-repeat center center;
    background-size: 100%;
    padding: 170px 0;
}
.banner-j{
    width: 100%;
    height: 540px;
    background: url(../image/banner-j.jpg) no-repeat center center;
    background-size: 100%;
    padding: 170px 0;
}
.banner-f{
    width: 100%;
    height: 540px;
    background: url(../image/banner-f.jpg) no-repeat center center;
    background-size: 100%;
    padding: 170px 0;
}
.banner-g{
    width: 100%;
    height: 540px;
    background: url(../image/banner-g.jpg) no-repeat center center;
    background-size: 100%;
    padding: 170px 0;
}
.banner-y{
    width: 100%;
    height: 540px;
    background: url(../image/banner-y.jpg) no-repeat center center;
    background-size: 100%;
    padding: 170px 0;
}
.banner-z{
    width: 100%;
    height: 540px;
    background: url(../image/banner-z.jpg) no-repeat center center;
    background-size: 100%;
    padding: 170px 0;
}
.banner h1{
    font-size: 50px;
    font-weight: 500;
    color: #2d2d2d;
    margin-bottom: 20px;
}
.banner p{
    font-size: 36px;
    font-weight: 400;
    color: #020814;
}
.banner-content h1{
    font-size: 40px;
    font-weight: 500;
    color: #2d2d2d;
    margin-bottom: 30px;
}
.banner-content p{
    font-size: 22px;
    font-weight: 400;
    color: #41464f;
}
.tags{
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin-top: 50px;
    width: 330px;
}
.tag img{
    width: 72px;
    height: 72px;
    margin-bottom: 12px;
}
.tag p{
    font-size: 14px;
    font-weight: 400;
    color: #2a2b2e;
    line-height: 20px;
}
header{
    width: 100%;
    height: 72px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background: #fff;
    color: #1d2129;
    background: hsla(0,0%,100%,.1);
    border-bottom: 0.5px solid #E8EBF3;
}
.logo{
    margin-right: 80px;
}
nav{
    height: 72px;
    display: flex;
    align-items: center;
}
nav ul{
    display: flex;
}
nav ul li{
    padding:25px 10px;
    margin: 0 15px;
}
.select{
    border-bottom: 2px solid #1664FF;
}
nav ul li a{
    font-size: 16px;
    color: #1D2129;
    font-weight: 400;
}
nav ul li a:hover{
    color: #1664FF;
}
.products,.case,.article,.hardware{
    margin-top: 100px;
}
.products h2,.option h2,.case h2,.about h2,.article h2,.hardware h2{
    font-size: 30px;
    font-weight: 500;
    color: #020814;
    text-align: center;

}
.article a{
    color: #1664FF;
}
.products p,.option p,.case p,.article p,.hardware p{
    font-size: 16px;
    font-weight: 400;
    color: #5c5d5f;
    margin-top: 20px;
    text-align: center;
}
.product-content{
    margin-top: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.product{
    width: 232px;
    height: 340px;
    border: 1px solid #ffffff;
    border-radius: 10px;
    padding:0 10px;
}
.gradation-1{
    background: linear-gradient(180deg,#e9f1ff, #e9f1ff 17%, #ffffff 31%, #ffffff);
}
.gradation-2{
    background: linear-gradient(180deg,#caeff8, #caeff8 16%, #ffffff 31%, #ffffff);
}
.gradation-3{
    background: linear-gradient(180deg,#e6e1fa, #e6e1fa 16%, #ffffff 31%, #ffffff);
}
.product-title{
    margin-bottom: 20px;
    border-bottom: 1px solid #DFEAFF;
    padding:0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.product-title h3{
font-size: 18px;
font-weight: 500;
line-height: 72px;
}
.color-1{
    color: #1664ff;
}
.color-2{
    color: #1678AD;
}
.color-3{
    color: #6750AB;
}
.product-title img{
    width: 32px;
    height: 32px;
}
.products ul li{
    font-size: 16px;
    font-weight: 400;
    color: #4e5969;
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}
.icon{
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(../image/gou.png) no-repeat;
    background-size: 100%;
    margin: 0 8px;
}
.backdrop{
    background: none!important;
    border: none!important;
}
.tab-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 70px;
height: 408px;
background: hsla(0,0%,100%,.2);
border: 1px solid #ffffff;
border-radius: 10px;
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.08), 0px 0px 0px 0px #ffffff inset; 
}

.tab {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
    width: 260px;
    height: 406px;
    background: hsla(0,0%,100%,.4);
    border-radius: 10px 0px 0px 10px;
    padding: 30px;
}

.tab-btn {
    width: 200px;
    height: 60px;
    font-size: 18px;
    color: #020814;
    font-weight: 400;
    border-radius: 10px;
    cursor: pointer;
}

.tab-btn:hover {
  color: #1664ff;
  background: #E3ECFC;
}

.tab-btn.active {
  background: #1664ff;
  color: #ffffff;
}

.tab-item {
  display: none;
}

.tab-item.active {
  display: block;
}

.tab-content{
    width: 639px;
}
.tab-img{
    width: 300px;
    height: 406px;
    background: url(../image/tab-img.png) no-repeat;
    border-radius: 0 10px 10px 0;
}
.about-img{
    background: url(../image/about-img.png) no-repeat;
    width: 300px;
height: 406px;
border-radius: 0 10px 10px 0;
}
.option-bg{
    width: 100%;
    height: 864px;
    background: url(../image/option-bg.png) no-repeat center center;
    background-size: 150%;
    margin-top: 160px;
    padding-top: 100px;
}
.tab-item h2{
    margin: 50px 0 0 40px;
    font-size: 20px;
    font-weight: 700;
    color: #020814;
}
.tab-item p{
    margin: 30px 0 0 40px;
    font-size: 18px;
    font-weight: 400;
    color: #5c5d5f;
    width: 560px;
    height: 90px;
    text-indent: 32px;
    line-height: 32px;
}

.option-tags{
    width: 460px;
    margin: 40px 0 0 40px;
    display: flex;
    justify-content: space-between;
}

.option-tag{
    width: 140px;
height: 100px;
background: hsla(0,0%,100%,.3);
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 0;

}
.option-tag img{
    width: 32px;
    height: 32px;
}
.option-tag span{
    font-size: 14px;
font-weight: 400;
margin-top: 12px;
color: #020814;
}
.cases{
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.05); 
    width: 288px;
height: 260px;
border-radius: 10px;
position: relative;
background: #ffffff;
}
.case-content,.article-content{
    margin-top: 70px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 160px;
}
.cases img,.articles img{
    width: 288px;
height: 165px;
border-radius: 10px;
}
.articles p{
    font-size: 18px;
font-weight: 400;
color: #020814;
line-height: 28px;
margin-top: 12px;
width: 288px;
display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 控制允许的最大行数 */
  overflow: hidden;
  text-overflow: ellipsis;
}

.articles p:hover{
    color: #1664FF;
}
.case-text{
    width: 288px;
height: 130px;
border: 1px solid #ffffff;
border-radius: 10px;
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    background: -webkit-gradient(linear,left top,left bottom,from(hsla(0,0%,100%,.7)),color-stop(17.97%,#fff));
    background: -webkit-linear-gradient(top,hsla(0,0%,100%,.7),#fff 17.97%);
    background: -moz-linear-gradient(top,hsla(0,0%,100%,.7) 0,#fff 17.97%);
    background: linear-gradient(180deg,hsla(0,0%,100%,.7),#fff 17.97%);
padding: 20px;
position: absolute;
top:130px;
}

.case-text h3{
    font-size: 20px;
font-weight: 700;
color: #020814;
margin-bottom: 24px;
}

.case-text span{
    padding: 6px 12px;
    background: #eff5ff;
    border-radius: 14px;
    font-size: 16px;
font-weight: 400;
color: #1664ff;
margin-right: 12px;
}

.about-bg{
    width: 100%;
    height: 728px;
    background: url(../image/about-bg.png) no-repeat center center;
    background-size: 100%;
    margin-top: 160px;
    padding-top: 100px;
}
.about-content{
    margin-top: 70px;
    display: flex;
    justify-content: space-between;
    width: 1200px;
height: 408px;
background: hsla(0, 0%, 100%, .2);
border: 1px solid #ffffff;
border-radius: 10px;
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.08), 0px 0px 0px 0px #ffffff inset; 
}
.about-text{
    width: 800px;
    margin: 50px 0 0 50px;
}
.about-text h2{
    font-size: 20px;
font-weight: 700;
color: #020814;
}
.about-text p{
    margin-top: 30px;
    font-size: 16px;
font-weight: 400;
color: #5c5d5f;
text-indent: 32px;
}
.about-contact{
    margin-top: 60px;
    width: 394px;
height: 100px;
background: url(../image/contact-img.png) no-repeat;
border-radius: 10px;
padding: 0 30px;
display: flex;
align-items: center;
}
.contact-information{
    margin-left: 30px;
}
.contact-information h3{
    font-size: 16px;
font-weight: 500;
color: #1664ff;
margin-bottom: 5px;
}

.contact-information p{
    font-size: 14px;
font-weight: 400;
color: #5c5d5f;
text-indent: 0;
margin-top: 0;
}

.consult-bg{
     width: 100%;
    height: 288px;
    background: url(../image/consult-bg.png) no-repeat center center;
    background-size: 110%;
    padding-top: 70px;
}

.consult{
    display: flex;
        flex-direction: column;
    align-items: center;
}
.consult h3{
    font-size: 30px;
font-weight: 400;
color: #020814;
}
.consult button{
    width: 320px;
height: 58px;
background: #1664ff;
border-radius: 10px;
color: #ffffff;
font-size: 20px;
font-weight: 400;
margin-top: 50px;
}
footer{
    width: 100%;
height: 430px;
background: #17181b;
}
.footer-content{
    width: 1200px;
    margin: 0 auto;
    color: #ffffff;
    display: flex;
justify-content: space-between;
padding: 70px 0 40px;
border-bottom: 1px solid #3d3d3d;
}
.footer-title{
font-size: 16px;
font-weight: 400;
color: #ffffff;
display: flex;
align-items: center;
}
.footer-text,.footer-text a{
    font-size: 16px;
font-weight: 400;
color: #9d9d9d;
margin-top: 12px;
line-height: 32px;
}


.footer-phone{
    font-size: 24px;
font-weight: 700;
color: #ffffff;
margin-top: 20px;
}
.phone-icon{
    width: 18px;
    height: 18px;
    margin-right: 10px;
}
.footer-icp{
    margin-top: 24px;
    font-size: 14px;
    color: #9d9d9d;
line-height: 28px;
    text-align: center;
}
.advantage-content{
    margin-top: 70px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 160px;
}
.advantage{
    width: 386px;
    position: relative;
}
.advantage-title{
    width: 386px;
    height: 151px;
    background: linear-gradient(90deg,#1185f2, #72c3fb);
    border-radius: 10px;
}
.advantage-title h3{
    font-size: 28px;
font-weight: 700;
color: #ffffff;
padding: 40px 0 0 30px;
}
.advantage ul{
    width: 386px;
height: 178px;
border: 1px solid #ffffff;
border-radius: 10px;
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    background: -webkit-gradient(linear,left top,left bottom,from(hsla(0,0%,100%,.7)),color-stop(17.97%,#fff));
    background: -webkit-linear-gradient(top,hsla(0,0%,100%,.7),#fff 17.97%);
    background: -moz-linear-gradient(top,hsla(0,0%,100%,.7) 0,#fff 17.97%);
    background: linear-gradient(180deg,hsla(0,0%,100%,.7),#fff 17.97%);
padding: 30px;
position: absolute;
top:120px;
}
.advantage ul li{
    font-size: 16px;
    font-weight: 400;
    color: #4e5969;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.hardwares{
    width: 386px;

background: #ffffff;
border-radius: 10px;
text-align: center;
padding: 30px 0 40px;
margin-bottom: 20px;
border: 1px solid #ffffff;
backdrop-filter: blur(15px);
}
.hardwares img{
    width: 72px;
    height: 72px;
}
.hardwares p{
    font-size: 16px;
font-weight: 400;
color: #4e5969;
margin-top: 20px;
}
.hardwares h3{
    font-size: 20px;
font-weight: 700;
text-align: center;
color: #4e5969;
margin-top: 35px;
}
.hardware-content{
    margin-top: 90px;
    display: flex;
        flex-wrap: wrap;
    justify-content: space-between;
}
.tab2-container{
    margin-top: 100px;
}
.tab2{
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #e8ebf3;
}
.tab-btn2.active{
    border-bottom: 2px solid #1664ff;
    color: #1664ff;
}

.tab-btn2{
margin: 0 60px;
height: 60px;
font-size: 18px;
font-weight: 700;
text-align: center;
color: #020814;
border-bottom: 2px solid #f4f7fc;
}
.tab-item2{
    display: flex;
    margin-top: 100px;
}
.tab-item2 img{
    width: 400px;
    height: 400px;
    margin: 0 50px;
}
.tab-item ul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: 440px;
    margin: 30px 0 0 40px;
}
.tab-item ul li{
    width: 110px;
height: 36px;
background: #ffffff;
border-radius: 4px;
margin:0 30px 20px 0;
display: flex;
align-items: center;
font-size: 16px;
color: #5c5d5f;
}
.tab2-content p{
    text-indent: 0;
}


.tabs-2{
    width: 1200px;
    margin: 0 auto;
    margin-top: 48px;
}
      input[name='toggle'] {
        display: none;
      }
      .nav2 {
        margin-top: 20px;
      }
      .nav2 .uls {
        position: relative;
        padding: 0;
        margin: 0;
        list-style: none;
        font-size: 0;
      }
      .nav2 .uls {
        height: 48px;
        line-height: 48px;
        text-align: center;
      }
      .nav2 .uls .danyuan {
        display: inline-block;
        margin: 0 30px;
        border-radius: 8px;
        width: 180px;
        height: 48px;
        font-size: 18px;
      }
      .nav2 .uls .danyuan label {
        display: inline-block;
        width: 100%;
        height: 100%;
        border-radius: 6px;
        
        background-color: #e9f0ff;
        color: #1664ff;
      }
      .main2 {
        
        width: 1200px;
        
        padding: 60px 0 160px;
      }
      .container {
        display: none;
      }
      #tab1-2:checked~.nav2 label[for='tab1-2'] {
        background:#1664ff;
        color: #fff;
        font-weight: bold;
      }
      #tab1-2:checked~.main2 .tab1-2-container {
        display: block;
      }
      #tab2-2:checked~.nav2 label[for='tab2-2'] {
        background:#1664ff;
        color: #fff;
        font-weight: bold;
      }
      #tab2-2:checked~.main2 .tab2-2-container {
        display: block;
      }
      #tab3-2:checked~.nav2 label[for='tab3-2'] {
        background:#1664ff;
        color: #fff;
        font-weight: bold;
      }
      #tab3-2:checked~.main2 .tab3-2-container {
        display: block;
      }
      #tab4-2:checked~.nav2 label[for='tab4-2'] {
        background:#1664ff;
        color: #fff;
        font-weight: bold;      
      }
      #tab4-2:checked~.main2 .tab4-2-container {
        display: block;
      }
      #tab5-2:checked~.nav2 label[for='tab5-2'] {
        background:#1664ff;
        color: #fff;
        font-weight: bold;
      }
      #tab5-2:checked~.main2 .tab5-2-container {
        display: block;
      }
.anli-left{
    float: left;
    width: 500px;
}
.anli-img{
    float: right;
    width: 540px;
    height: 304;
    border-radius: 10px;
}
.anli-left h3{
    font-size: 20px;
font-weight: 700;
text-align: left;
color: #020814;
margin-top: 60px;
}
.anli-left p{
    font-size: 18px;
font-weight: 400;
color: #5c5d5f;
margin-top: 30px;
text-indent: 36px;
}
.features{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 80px 0 160px;

}
.feature{
    width: 80px;
    margin: 40px 80px;
    text-align: center;
}
.feature p{
    margin-top: 10px;
    font-size: 16px;
    font-weight: 400;
    color: #4e5969;
}
.introduce{
    margin-top: 120px;
}
.introduce-img{
    width: 448px;
    height: 448px;
}
.introduce-text{
    width: 600px;
}
.introduce-text h3{
    margin-top: 50px;
    font-size: 24px;
font-weight: 500;
color: #3d3d3d;
line-height: 42px;
}
.introduce-text p{
    margin-top: 30px;
    font-size: 16px;
    text-indent: 32px;
color: #6d6d6d;
line-height: 25px;
}
.introduce-tags{
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
}
.introduce-tag{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.introduce-tag img{
    width: 32px;
    height: 32px;
}
.introduce-tag span{
    font-size: 16px;
    margin-top: 12px;
font-weight: 500;
color: #3d3d3d;
line-height: 28px;
}
.introduce-tag p{
    font-size: 16px;
text-align: center;
color: #6d6d6d;
line-height: 27px;
text-indent: 0;
margin-top: 12px;
}
.left{
    float: left;
}
.right{
    float: right;
}
@media (max-width: 768px) {

        }