@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")
}



* {
    margin: 0;
    padding: 0;
    font-family: N;
}
body,html{
    height:100vh;
    width:100vw;
    overflow:auto;
    background-position:top center;
    background-repeat:no-repeat;
    background-color:#000;
    background-size:cover;
    background-image:url(https://cdn.teyes.cn/cc4/8/img/bg.png);
}
.ru * {
    margin: 0;
    padding: 0;
}
.container{
    max-width:1280px;
    margin:auto;
}
.container .title{
    color:#fff;
    text-align:center;
    padding-top:150px;
    font-size:60px;
    line-height:100%;
    margin-bottom:40px;
}
.swiper{
}
.swiper-slide{
    max-width:800px;
    width:80vw;
    /*max-height:50vh;*/
}
.swiper-slide img{
    width:100%;
}
.swiper-slide.active  .item:before,
.lists .item:hover:before{

}
.swiper-slide.active .item .inns,
.lists .item:hover .inns{
    background-color:#232b32;
}
.swbk{
    text-align:center;
}
.swp{
    display:inline-block;
    margin:20px auto;
}
.swpv{
    display:flex;
    border-radius:15px;
    padding: 4px 5px;
    background-color:rgba(24, 25, 28, .2);
}
.swpi{
    height:9px;
    margin:4px;
    width:9px;
    border-radius:50%;
    background-color:rgba(255, 255, 255, .1);
    cursor:pointer;
}
.swpi.active{
    background-color:#fff;
}
.tabs{
    text-align: center;
    display: flex;
    border-bottom: 2px solid rgba(215, 238, 255, .2);
    margin-top: 40px;
    margin-bottom: 0px;
}
.tabs .tab{
    font-size: 25px;
    flex: 1;
    color: rgba(215, 238, 255, .5);
    cursor: pointer;
    padding: 20px 0;
}
.tabs .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);
    position:relative;
    background-size: 100% auto;
    position: relative;
}
.sleft{
    width:40px;
    background-size:cover;
    background-image:url(img/left.png);
    height:40px;
    cursor:pointer;
    position:absolute;
    left:40px;
    top:50%;
    margin-top:-20px;
    z-index:1;
}
.sright{
    width:40px;
    background-size:cover;
    background-image:url(img/left.png);
    transform:rotate(180deg);
    height:40px;
    cursor:pointer;
    position:absolute;
    right:40px;
    top:50%;
    margin-top:-20px;
    z-index:1;
}

.sleft:hover,.sright:hover{
    opacity:.8;
}

.lists{
    position:relative;
}
.tabs .tab.active:before{
    content:'';
    position:absolute;
}
.tab.active:before {
    content: '';
    position: absolute;
    height: 2px;
    left: 0;
    right: 0;
    bottom: 0px;
    background: linear-gradient(to right, #72AFFF, #7FFFE5);
}
@media screen  and (max-width: 1300px) {
    .container{
        margin:0 20px;
    }
}
@media screen  and (max-width: 750px) {
    .tabs{
        margin-bottom:20px;
    }
    body,html{
        background-image:url(https://cdn.teyes.cn/cc4/8/img/bgmb.png);
    }
    .swiper-slide{
        width:75vw;
    }
    .container .title{
        font-size:26px;
    }
    .tabs .tab{
        font-size:20px;
    }
    .smlists img{
        width: 110%;
        margin: -5%;
    }
}