@font-face {
    font-family: T;
    font-style: normal;
    font-weight: 400;
    src: url(https://cdn.teyes.cn/cc4/ys.otf) format("opentype")

    	 
}
 @font-face {
    font-family: N;
    font-style: normal;
    font-weight: 400;
    src: url(https://cdn.teyes.cn/cc4/no.TTF) format("opentype")
         
}
html,body{
    /*background-color:#000;  */
}
*{
    margin: 0;
    padding: 0;
    font-family: T;
    color:rgba(31, 35, 40, 1);
}
.en{
    font-family: N;
}
.f{
    display:flex;
}
.a{
    align-items:center;
}
.j{
    justify-content:space-between;
}
.f1{
    flex:1;
}
.vss{
    height:10px;
}
.content{
    max-width:1280px;
    margin:auto;

}
.viewer-button{
    transform: scale(1.5);
}
.page{
    background-repeat:no-repeat;
    background-color:#000;
    background-size:100% auto;
    background-image:url(https://cdn.teyes.cn/cc4/canbus/image/bg.webp);
    height:100vh;
    overflow-y:auto;
    overflow-x: hidden;
}
.cc4l.page{
    background-image:none;
    background-color:#f5f5f5;
}
.cc4l .title{
    color:#000;
}
.cc4l .desc{
    color:#435868;
}
.cc4l .tabs {
    border-bottom-color:#e8e8e8;
}
.cc4l .tabs .tab{
    color:rgba(0, 28, 63, 0.5);
}
.cc4l .tabs .tab.active{
    color:#001c3f;
}
.cc4l .vos,
.cc4l .list1 .xyt{
    color:#435868;
}
.cc4l .tab.active{
    background-position:center bottom;
    background-repeat:no-repeat;
    color:#001c3f;
    background-image:none;
    
    background-size:auto 140%;
    position:relative;
}
.cc4l .tab.active:after{
    content:'';
    position:absolute;
    left:0;
    right:0;
    background-image:url('https://cdn.teyes.cn/cc4/canbus/cc4l/l.png');
    bottom:0px;
    top:0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.cc4l .cins .in:active{
    background-color:#000;
    color:#fff;
}
.cc4l  .tab.active:before{
    background: linear-gradient(to right, #b1ff57, #77a5ff); /* 从左到右的渐变 */

}
.cc4l  .tab.active:after{
   
}
.cc4l .carlist .t2{
    background-color:#e6e6e6;
    color: #001c3f;
}
.cc4l .carlist .item .bg{
    background-color:rgb(237 237 237);
}
.cc4l .carlist .item.active .bg{
    background: linear-gradient(to right, #b1ff57, #77a5ff);
}
.cc4l .cins .in{
    background-color:rgb(220 220 220);
    color:#435868;
}
.cc4l .cins .in.active{
    background-color:rgb(47 47 47);
    color:#fff;
}
.cc4l .carlist .item .bg{
    background-color:#e6e6e6;
}
.cc4l .carlist .t2{
    border-radius:20px;
}
.cc4l .carlist .item .bg{
    border-radius:20px;
}
.cc4l .cins .in{
    border-radius:20px;
}

.title{
    font-weight: 400;
    font-size: 56px;
    color: #E9F6FF;
    line-height: 110%;
    text-align:center;
    padding-top:134px;
}
.desc{
    font-weight: 400;
    text-align:justify;
    font-size: 25px;
    color: #A5B7C0;
    margin-top:34px;
    line-height:150%;
}
.ts{
    margin-top:20px;
    display:flex;
    justify-content:center;
}
.ts .v{
    /*background-color:RGBA(35, 39, 43, 1);*/
    background-image: linear-gradient(90deg, #72AFFF, #7FFFE5);
    
    border-radius:60px;
    position:relative;
}
.ts .v .t{
    margin:3px;
    padding:20px 70px;
    border-radius:60px;
    background-color:RGBA(35, 39, 43, 1);
    /*content:'';
    position:absolute;
    top:-1px;
    left:-1px;
    right:-1px;
    bottom:-1px;*/
    /*background-image: linear-gradient(90deg, #8649ff, #01fea8);*/
    /*z-index:-1;*/
}
.ts .v .t1>div{
    color:#fff;   
    margin:0 10px;
    font-size:24px;
    display:flex;
    align-items:center;

}
.ts .v .t1:after{
    background-image:url('https://cdn.teyes.cn/cc4/canbus/image/right.svg');
    content:'';
    display:inline-block;
    width:10px;
    height:20px;
    background-size:10px auto;
    text-align:center;
    background-position:center;
    background-repeat:no-repeat;
    margin-left: 10px;
    margin-right: -5px;
}
.ts .v .t1:last-child:after{
    display:none;

}

.tabs{
    text-align:center;
    display:flex;
    border-bottom:2px solid rgba(215, 238, 255, .2);
    margin-top:40px;
    margin-bottom:40px;
}
.tab{
    font-size: 25px;
    flex:1;
    color: rgba(215, 238, 255, .5);
    cursor:pointer;
    padding:20px 0;
    position:relative;
}
.tab.active{
    background-position:center bottom;
    background-repeat:no-repeat;
    color:rgba(233, 246, 255, 1);
    background-image:url('https://cdn.teyes.cn/cc4/Dcam/image/active.png');
    background-size:auto 80%;
    position:relative;
}
.tab.active:before{
    content:'';
    position:absolute;
    height:2px;
    left:0;
    right:0;
    bottom:0px;
    background: linear-gradient(to right, #72AFFF, #7FFFE5); /* 从左到右的渐变 */

}
.list1{
    flex-wrap:wrap;
    margin:0 20px;
}
.list1 .xyt{
    font-weight: bold;
    font-size: 20px;
    color: #B6C5CA;
    line-height: 30px;
    text-align:center;
    margin-bottom:20px;
}
.ts img{
    max-width:100%;
}
.list1 img{
    height:140px;
    margin-bottom:20px;
}
.carlist{
    /*display:flex;*/
    /*flex-wrap: wrap;*/
    /*margin:0 20px;*/
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); /* 每列最小200px，自动适应 */
    gap: 20px; /* 网格间距 */

}
.carlist .bg{
    cursor:pointer;
}
.carlist .t2{
    margin: 2px;
    padding: 20px 20px;
    text-align:center;
    border-radius: 35px;
    font-size:18px;
    color:rgba(165, 183, 192, 1);
    background-color: RGBA(35, 39, 43, 1);
}
.carlist .item .bg{
    cursor: pointer;
    font-size: 0;
    border-radius: 35px;
    padding: 1px;
    background-color: RGBA(35, 39, 43, 1);
}
.carlist .item.active .bg{
    background: linear-gradient(to right, #72AFFF, #7FFFE5); /* 从左到右的渐变 */
}
.cins{
    margin-top:10px;
    width:calc(100vw - 40px);
    flex-wrap: wrap;
    display:flex;
    max-width:calc(1280px - 0px);
    z-index:1;
    position:relative;

}
.cins .in{
    margin: 10px;
    padding: 20px 20px;
    text-align:center;
    border-radius: 35px;
    font-size:18px;
    color:rgba(165, 183, 192, 1);
    background-color: #444b51;
    flex-shrink: 0;
    cursor:pointer;
}
.cins .in.active{

    background-color:#fff;
    color:#000;
}
.cins .in:active{

    background-color:#fff;
    color:#000;
}

.mask{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:1;
    background-color: #4949498f;
}
.mask .block{
    display:flex;
    align-items:center;
    justify-content:center;
    height:100vh;
}
.mask .ctt{
    max-height:100vh;
    overflow:auto;

}
.mask .ctt img{
    max-width:1080px;
    width:100%;
}
.list1{
    margin-bottom: 100px;
}
.list2{
    margin-bottom: 100px;
}
.vos{
    text-align: center;
    text-align:left;
    color: #A5B7C0;
    margin: 20px 0;
}

@media screen and (max-width: 1920px) {
    .content{
        margin: 20px auto;
    }
}
@media screen and (max-width: 1280px) {
    .content{
        margin:20px;
        width:auto;
    }
}
@media screen and (max-width: 750px) {
    .cc4l .tab.active:after{
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: center bottom;
    }
    .content{
        margin:20px;
        width:auto;
    }
    .vos{
        text-align:left;
    }
    .ts .v .t1:last-child>div{
        width:65px;
    }
    .cins{
        margin-left:0!important;
        /*height: 100px;*/
        overflow: auto;
        flex-wrap: wrap;
        display:grid;
        align-items: center;
    }
    .title{
        font-size:25px;
        padding-top:120px;
        text-align:center;
        color:#fff;
    }
    .tabs{
        margin:  20px 0;
    }
    .tab{
        font-size:18px;
    }
    .cins{
         width: calc(100vw - 20px);   
    }
    .tab.active{
        background-size:auto 20px;
    }
    .desc{
        margin: 20px 0;
        margin-top:40px;
        text-align:left;
        font-size:18px;
    }
    .ts img{
        width:100%;
    }
    .ts .v .t1:after{
        margin-left: 3px;
        margin-right: 6px;
    }
    .ts{
        margin:0 0px;
    }
    .ts .v{
        width:100%;
    }
    .ts .v .t{
        justify-content:center;
        padding:20px 0px;
        width:100%;
    }
    .ts .v .t1>div{
        font-size:11px;
        margin:0 2px;
        /*margin-right: 3px; */
    }
    .ts .v .t1>div.vd{
        width: 76px;
        text-align: center;
        justify-content:center;
    }
    .list1{
        justify-content: space-around;
        margin:0;
    }
    .list1 .xyt{
        font-size:14px;
    }
    .list1 .xy{
        text-align:center;
        width:33%;
    }
    .list1 img{
        height:214px;
        margin-bottom:20px;
    }
    .list1 img{
        height:20vw;
        margin-bottom:0px;
    }
}