*{
    margin: 0;
    padding: 0;
    border: 0;
}
img{
    display: block;
}
html,body{
    width: 100%;
    height: 100%;
    position: relative;
    overflow-y: hidden;
}
.content{
    width: 19.2rem;
    height: 100%;
    background-color: #000000;
}
.container{
    width: 19.2rem;
    height: 10.8rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}
.nav{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 14.4rem;
    height: .9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
}
.logo{
    width: 1.46rem;
    height: .53rem;
}
.nav_cont{
    display: flex;
    width: 7.2rem;
    justify-content: space-between;
    color: rgb(6,6,0);
    font-size: .16rem;
    /*height: 100%;*/
}
.nav_cont.white{
    color: #ffffff;
}
.nav_item{
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
}
.nav_item:hover:after,.nav_item.active:after{
    background-color: rgb(6, 6, 0);
    content: " ";
    position: absolute;
    left: 0;
    bottom: -.1rem;
    width: 100%;
    height: 2px;
}
.nav_cont.white .nav_item.active:after{
    background-color: #ffffff;
}
.swiper{
    width: 100%;
    height: 100%;
}
.mySwiper>.swiper-wrapper>.swiper-slide{
    overflow: hidden;
}
.home_txt,.home_txt:before{
    background: url("../images/home_txt.png") no-repeat;
    background-size: 100% auto;
    width: 11.74rem;
    height: 3.09rem;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.home_txt:before{
    content: '';
    text-shadow: -5px -5px 0px rgb(211,250,9),5px 5px 0px rgb(25,10,240);
    /* 使用缩放的方式创建可见显示取余，括号里的四个值分别是top，right，bottom，left */
    clip-path: inset(100% 0px 0px 0px);
    animation: move 3.25s steps(2) infinite;
}
/*.home_txt:hover:before{
    !* steps设置逐帧动画，值越小越卡顿 *!
    animation: move 1.25s steps(2);
}*/
/* 这是制造混乱的位置和高宽，可以自行改变，随机的 */
@keyframes move{
    0%{
        clip-path:inset(80% 0px 0px 0px);
        transform:translate(-20px,-10px)
    }
    1.25%{
        clip-path:inset(10% 0px 85% 0px);
        transform:translate(10px,10px)
    }
    2.5%{
        clip-path:inset(80% 0px 0px 0px);
        transform:translate(-10px,10px)
    }
    3.75%{
        clip-path:inset(10% 0px 85% 0px);
        transform:translate(0px,5px)
    }
    5%{
        clip-path:inset(50% 0px 30% 0px);
        transform:translate(-5px,0px)
    }
    6.25%{
        clip-path:inset(10% 0px 30% 0px);
        transform:translate(5px,0px)
    }
    7.5%{
        clip-path:inset(40% 0px 30% 0px);
        transform:translate(5px,10px)
    }
    8.75%{
        clip-path:inset(50% 0px 30% 0px);
        transform:translate(-10px,10px)
    }
    10%{
        clip-path:inset(80% 0px 5% 0px);
        transform:translate(20px,-10px)
    }
    11.25%{
        clip-path:inset(80% 0px 0px 0px);
        transform:translate(-10px,0px)
    }
    12.5%{
        clip-path:inset(80% 0px 0px 0px);
        transform:translate(0px,0px)
    }
    100%{
        clip-path:inset(80% 0px 0px 0px);
        transform:translate(0px,0px)
    }
}
.cover{
    width: 19.2rem;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
}
.home_cover{
    background: url("../images/home_bg.jpg") no-repeat;
    background-size: 100% auto;
}
.tvc_cover{
    background: url("../images/tvc_cover.png") no-repeat;
    background-size: 100% auto;
}
.tvc_cont{
    display: flex;
    width: 100%;
    height: 100%;
    flex-wrap: nowrap;
}
.cover.active{
    background-position: center;
    background-size: auto 100%;
}
.tvc_item{
    /*flex-shrink: 0;*/
    width: 3.2rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    position: relative;
    cursor: pointer;
    color: #ffffff;
    transition: width .2s;
}
.tvc_item:after{
    content: " ";
    background-color: rgba(0,0,0,.6);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.tvc_item:hover{
    width: 5.2rem;
}
.tvc_item:hover:after{
    display: none;
}
.tvc_item img{
    width: 5.2rem;
}
.tvc_tit{
    font-size: .28rem;
    display: none;
    position: absolute;
    width: 4.5rem;
    top: 74%;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.tvc_item:hover .tvc_tit,.tvc_item:hover .tvc_des,.tvc_item:hover .tvc_play{
    display: block;
}
.tvc_des{
    font-size: .16rem;
    display: none;
    position: absolute;
    width: 4.5rem;
    top: 80.5%;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.btn_play{
    background: url("../images/icon_play.png") no-repeat;
    background-size: 100% auto;
    width: .8rem;
    height: .69rem;
}
.tvc_play{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    display: none;
}
.case_cover{
    background: url("../images/case_bg.jpg") no-repeat;
    background-size: 100% auto;
}
.team_cover{
    background: url("../images/team_bg.jpg") no-repeat;
    background-size: 100% auto;
}
.gallery_cover{
    background: url("../images/gallery_bg.jpg") no-repeat;
    background-size: 100% auto;
}
.contact_cover{
    background: url("../images/contact_bg.jpg") no-repeat;
    background-size: 100% auto;
}
.caseSwiper{
    width: 100%;
    height: 7.8rem;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto 0;
}
#case .swiper-pagination{
    bottom: .8rem;
}
#case .swiper-pagination-bullet{
    width: .4rem;
    height: .04rem;
    background-color: rgb(255, 241, 0);
    opacity: 0.4;
    border-radius: 0;
    cursor: pointer;
}
#case .swiper-pagination-bullet-active{
    opacity: 1;
    width: .8rem;
    height: .06rem;
}
.case_box{
    width: 12.7rem;
    margin: 0 auto;
}
.case_cont{
    width: 12.7rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: .6rem;
    position: relative;
}
#case_box4 .case_cont{
    background: url("../images/case_4_bg.png") no-repeat;
    background-size: 100% auto;
    width: 13.21rem;
    height: 6.01rem;
    transform: translateX(-.255rem);
}
.case_cat{
    width: 100%;
    height: 1.18rem;
}
.case_cat_1{
    background: url("../images/case_cat_1.png") no-repeat right;
    background-size: auto 100%;
}
.case_cat_2{
    background: url("../images/case_cat_2.png") no-repeat right;
    background-size: auto 100%;
}
.case_cat_3{
    background: url("../images/case_cat_3.png") no-repeat right;
    background-size: auto 100%;
}
.case_cat_4{
    background: url("../images/case_cat_4.png") no-repeat right;
    background-size: auto 100%;
}
.case_item{
    width: 3.74rem;
    position: relative;
    margin-bottom: .5rem;
    cursor: pointer;
}
.case_item img{
    width: 100%;
}
.case_tit{
    font-size: .2rem;
    color: #ffffff;
    margin-top: .1rem;
}
.case_play{
    width: .64rem;
    height: .56rem;
    position: absolute;
    left: 0;
    right: 0;
    top: .8rem;
    margin: 0 auto;
}
.case4_arrow_left{
    width: .72rem;
    height: 100%;
    background: url("../images/case4_arrow_left.png") no-repeat .15rem center;
    background-size: .4rem auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    cursor: pointer;
}
.case4_arrow_left:hover{
    background: url("../images/case4_arrow_left_active.png") no-repeat .15rem center;
    background-size: .4rem auto;
}
.case4_arrow_right{
    width: .72rem;
    height: 100%;
    background: url("../images/case4_arrow_right.png") no-repeat .15rem center;
    background-size: .4rem auto;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    cursor: pointer;
}
.case4_arrow_right:hover{
    background: url("../images/case4_arrow_right_active.png") no-repeat .15rem center;
    background-size: .4rem auto;
}
.case4Swiper{
    width: 11.84rem;
    height: 5.76rem;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background: url("../images/case_4_cont_bg.png") no-repeat;
    background-size: 100% auto;
}
/*.case4Swiper .swiper-wrapper{
    padding: .1rem;
    box-sizing: border-box;
}*/
.case4Swiper .swiper-slide{
    /*background-color: #ffffff;*/
    /*margin: 0 .05rem;*/
    padding: .1rem .05rem;
    box-sizing: border-box;
    cursor: pointer;
    overflow: hidden;
}
.case4Swiper .swiper-slide:first-of-type{
    padding-left: .1rem;
}
.case4Swiper .swiper-slide:last-of-type{
    padding-right: .1rem;
}
.case4Swiper .swiper-slide img{
    width: 100%;
    height: auto;
    flex-shrink: 0;
}
.team_cont{
    background: url("../images/team.png") no-repeat right;
    background-size: auto 100%;
    width: 13.74rem;
    height: 4.48rem;
    position: absolute;
    left: 2.7rem;
    top: 5rem;
}
#gallery{
    overflow: hidden;
}
.gallery_item{
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.gallery_item:after{
    content: " ";
    position: absolute;
    background-color: rgba(0,0,0,.6);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transition: opacity .2s;
}
.gallery_item:hover:after{
    opacity: 0;
}
.gallery_item.active:after{
    opacity: 0;
}
.gallery_item:first-of-type{
    width: 6.86rem;
    height: 6.86rem;
    left: 6.13rem;
    top: 2.07rem;
}
.gallery_item:nth-of-type(2){
    width: 3.8rem;
    height: 3.8rem;
    left: 4.33rem;
    top: -1rem;
}
.gallery_item:nth-of-type(3){
    width: 3.8rem;
    height: 3.8rem;
    left: 1.1rem;
    top: 1.75rem;
}
.gallery_item:nth-of-type(4){
    width: 3.52rem;
    height: 3.52rem;
    left: 1.3rem;
    top: 5.87rem;
}
.gallery_item:nth-of-type(5){
    width: 3.69rem;
    height: 3.69rem;
    left: 4.52rem;
    top: 8.28rem;
}
.gallery_item:nth-of-type(6){
    width: 2.41rem;
    height: 2.41rem;
    left: 12.3rem;
    top: 1.15rem;
}
.gallery_item:nth-of-type(7){
    width: 3.8rem;
    height: 3.8rem;
    left: 13.49rem;
    top: 4.2rem;
}
.gallery_item:nth-of-type(8){
    width: 3.72rem;
    height: 3.72rem;
    left: 11.22rem;
    top: 8rem;
}
.gallery_item:nth-of-type(9){
    width: 2.86rem;
    height: 2.86rem;
    left: 15.74rem;
    top: .83rem;
}
.gallery_item:nth-of-type(10){
    width: 4.18rem;
    height: 4.18rem;
    left: 16.09rem;
    top: 7.39rem;
}
.gallery_item img{
    width: 100%;
    flex-shrink: 0;
    height: 100%;
}
#contact{
    font-size: .2rem;
    color: #000000;
}
.contact_tit{
    background: url("../images/contact_tit.png") no-repeat;
    background-size: 100% auto;
    width: 8.28rem;
    height: 1.18rem;
    position: absolute;
    left: 7.8rem;
    top: 2rem;
}
.contact_cont_bg{
    background: url("../images/contact_cont_bg.png") no-repeat;
    background-size: 100% auto;
    width: 13.27rem;
    height: 6.48rem;
    position: absolute;
    left: 3rem;
    top: 3.2rem;
}
.txt_box{
    position: absolute;
    left: 4.58rem;
    top: 5rem;
    width: 10.3rem;
}
.txt_cont{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.txt_item{
    flex-shrink: 0;
    width: 50%;
    margin-bottom: .25rem;
}
.icp_box{
    font-weight: bold;
    display: flex;
    margin-top: .15rem;
}
.tip_box{
    position: absolute;
    left: 4.58rem;
    top: 8.1rem;
}
.qr_box{
    position: absolute;
    left: 9.87rem;
    top: 7.32rem;
    display: flex;
    justify-content: space-between;
    width: 4.74rem;
}
.qr_box img{
    width: 1.2rem;
    height: 1.2rem;
}
.wrap {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2;
    width: 100%;
    height: 100%;
    display: none;
}