*,ul{
    padding: 0;
    margin: 0;
    list-style: none;
    color: #3c3c3c;
}
html {
    overflow-x: hidden;
    font-size: 100px;
}
body {
    font-size: 0.16rem;
    background-color: #FFF;
}
/* 前言 */
.prefaceBox{
    width: 100%;
    height: 5.63rem;
    position: relative;
    background-color: #F3F3F3;
}
.preface{
    width: 11.9rem;
    height: 5.63rem;
    position: absolute;
    left: calc(50% - 11.9rem/2);
}
.preface_title{
    font-size: 0.36rem;
    position: absolute;
    top: 1.32rem;
}
.preface_stitle{
    font-size: 0.18rem;
    position: absolute;
    bottom: 1.46rem; 
}
.preface_staff{
    width: 2.9rem;
    height: 1.64rem;
    font-size: 0.14rem;
    position: absolute;
    top: 1.32rem;
    right: 0;   
    color: #838383;
}
.preface_staff ul li{
    width: 2.9rem;
    height: 0.2rem;
    color: #838383;
}

/* 海报 */
.postersBox{
    width: 100%;
    height: 7.13rem;
    position: relative;
}
.posters{
    width: 25.60rem;
    height: 7.13rem;
    /* background: url(https://img.alicdn.com/imgextra/i2/39767794/O1CN01JKbmBT27RhedhCxH0_!!39767794.png) no-repeat;
    background-position: center center; */
    position: absolute;
    left: calc(50% - 25.6rem/2);
}
.posters_other{
    width: 11.86rem;
    height: 6.03rem;
    position: absolute;
    top: 0.45rem;
    left: calc(50% - 11.86rem/2);
    z-index: 9;
}

/* 互动 */
.interactiveBox{
    width: 100%;
    height: 19.51rem;
    position: relative;
}
.interactive{
    width: 11.9rem;
    height: 19.51rem;
    position: absolute;
    left: calc(50% - 11.9rem/2);
}
.interactive_video{
    width: 6.08rem;
    height: 3.14rem;
    position: absolute;
    top: 0.64rem;
    left: calc(50% - 6.08rem/2);
    background-color: black;
}
.interactive_video video{
    width: 6.08rem;
    height: 3.14rem;
}
.interactive_title{
    margin-top: 5.10rem;
    font-size: 0.36rem;
}
.interactive_stitle1{
    margin-top: 0.48rem;
    font-size: 0.36rem;
}
.interactive_content1{
    font-size: 0.18rem;
    margin-top: 0.2rem;
    color: #838383;
}
.interactive_flex{
    width: 11.58rem;
    height: 1.82rem;
    margin-left: 0.17rem;
    margin-top: 0.92rem;
    display: flex;
    justify-content: space-between;
}
.interactive_stitle2{
    margin-top: 0.65rem;
    font-size: 0.36rem;
}
.interactive_content2{
    margin-top: 0.4rem;
    width: 8.97rem;
    height: 2.98rem;
}
.interactive_stitle3{
    margin-top: 0.7rem;
    font-size: 0.36rem;
}   
.interactive_content3{
    margin-top: 0.5rem;
}

/* VR全景 */
.overallBox{
    width: 100%;
    height: 124.87rem;
    position: relative;
    background-color: #ECECEC;
}
.overall{
    width: 11.9rem;
    height: 124.87rem;
    position: absolute;
    left: calc(50% - 11.9rem/2);
}
.overall_VRall{
    width: 11.9rem;
    height: 16.74rem;
    margin-top: 1.24rem;
}
.overall_scene1{
    width: 11.9rem;
    height: 25.47rem;
    margin-top: 1.20rem;
}
.overall_scene2{
    width: 11.9rem;
    height: 25.37rem;
    margin-top: 0.94rem;
}
.overall_scene3{
    width: 11.9rem;
    height: 25.31rem;
    margin-top: 0.92rem;
}
.overall_scene4{
    width: 11.9rem;
    height: 25.31rem;
    margin-top: 0.98rem;
}
.overall_scene1,.overall_scene2,.overall_scene3,.overall_scene4{
    position: relative;
}
.overall_point1_1,.overall_point1_2,.overall_point1_3,.overall_point1_4,.overall_point1_5,.overall_point1_6,
.overall_point2_1,.overall_point2_2,.overall_point2_3,.overall_point2_4,.overall_point2_5,.overall_point2_6,.overall_point2_7,
.overall_point3_1,.overall_point3_2,.overall_point3_3,.overall_point3_4,.overall_point3_5,
.overall_point4_1,.overall_point4_2,.overall_point4_3,.overall_point4_4{
    width: 0.4rem;
    height: 0.4rem;
    /* width: 1rem;
    height: 1rem; */
    /* background-color: red; */
    position: absolute;
    z-index: 9;
}
.overall_point1_1{
    top: 1.70rem;
    left: 2.18rem;
}
.overall_point1_2{
    top: 4.92rem;
    left: 1.80rem;
}
.overall_point1_3{
    top: 3.78rem;
    left: 6.25rem;
}
.overall_point1_4{
    top: 4.90rem;
    left: 6.70rem;
}
.overall_point1_5{
    top: 5.05rem;
    left: 7.30rem;
}
.overall_point1_6{
    top: 4.80rem;
    left: 9.95rem;
}
.overall_point2_1{
    top: 1.56rem;
    left: 2.16rem;
}
.overall_point2_2{
    top: 6.04rem;
    left: 2.50rem;
}
.overall_point2_3{
    top: 4.00rem;
    left: 4.49rem;
}
.overall_point2_4{
    top: 4.40rem;
    left: 5.08rem;
}
.overall_point2_5{
    top: 4.36rem;
    left: 7.89rem;
}
.overall_point2_6{
    top: 4.30rem;
    left: 9.75rem;
}
.overall_point2_7{
    top: 4.10rem;
    left: 11.00rem;
}
.overall_point3_1{
    top: 2.72rem;
    left: 2.15rem;
}
.overall_point3_2{
    top: 3.00rem;
    left: 5.98rem;
}
.overall_point3_3{
    top: 5.36rem;
    left: 6.08rem;
}
.overall_point3_4{
    top: 3.32rem;
    left: 9.65rem;
}
.overall_point3_5{
    top: 5.54rem;
    left: 9.82rem;
}
.overall_point4_1{
    top: 4.24rem;
    left: 1.88rem;
}
.overall_point4_2{
    top: 4.16rem;
    left: 4.40rem;
}
.overall_point4_3{
    top: 3.42rem;
    left: 6.59rem;
}
.overall_point4_4{
    top: 3.46rem;
    left: 9.56rem;
}

/* 预览效果 */
.previewBox{
    width: 100%;
    height: 8.18rem;
    position: relative;
    background-color: #F5F5F5;
}
.preview{
    width: 11.9rem;
    height: 8.18rem;
    position: absolute;
    left: calc(50% - 11.9rem/2);
}
.preview_phone{
    width: 0.97rem;
    height: 1.84rem;
    position: absolute;
    top: 1.29rem;
    left: 0.02rem;
}
.preview_reverse{
    width: 1.21rem;
    height: 0.91rem;
    position: absolute;
    top: 2.1rem;
    left: calc(50% - 1.21rem/2);
}
.preview_img{
    width: 6.58rem;
    height: 3.1rem;
    position: absolute;
    top: 3.72rem;
    left: calc(50% - 6.58rem/2);
    z-index: 9;
}
.preview_video{
    width: 6.45rem;
    height: 2.98rem;
    background-color: black;
    position: absolute;
    top: 3.78rem;
    left: calc(50% - 6.45rem/2);
    border-radius: 0.15rem;
    overflow: hidden;
}
.preview_video video{
    width: 6.44rem;
    height: 2.98rem;
}

/* VR交互原理 */
.theoryBox{
    width: 100%;
    height: 23.91rem;
    position: relative;
    background-color: #E3E3E3;
}
.theory{
    width: 11.9rem;
    height: 23.91rem;
    position: absolute;
    left: calc(50% - 11.9rem/2);
}
.theory_title{
    font-size: 0.36rem;
    margin-top: 1rem;
}
.theory_content{
    width: 11.9rem;
    height: 21.41rem;
    position: absolute;
    top: 1.76rem;
    left: calc(50% - 11.9rem/2);
}
.theory_bg1,.theory_bg2,.theory_bg3,.theory_bg4{
    z-index: 9;
}
.theory_bg1{
    width: 0.36rem;
    height: 2.6rem;
    position: absolute;
    top: 13.02rem;
    /* left: 0.34rem; */
    left: 1.84rem;
}
.theory_bg2{
    width: 4.76rem;
    height: 0.06rem;
    position: absolute;
    top: 12.91rem;
    left: 2.2rem;
}
.theory_bg3{
    width: 4.76rem;
    height: 0.06rem;
    position: absolute;
    top: 15.45rem;
    left: 2.2rem;
}
@-moz-document url-prefix() {
    　　.theory_bg2{
        width: 4.76rem;
        height: 0.06rem;
        position: absolute;
        top: 12.93rem;
        left: 2.2rem;
    }
    .theory_bg3{
        width: 4.76rem;
        height: 0.06rem;
        position: absolute;
        top: 15.47rem;
        left: 2.2rem;
    }
}
.theory_bg4{
    width: 0.4rem;
    height: 2.6rem;
    position: absolute;
    top: 13.02rem;
    left: 6.96rem;
}
.theory_slider{
    width: 5.52rem;
    height: 2.6rem;
    background-color: black;
    border-radius: 0.3rem;
    position: absolute;
    top: 13.02rem;
    left: 1.84rem;
}
#swiper{
    width: 5.52rem;
    height: 2.6rem;
    border-radius: 0.3rem;
}
.swiper-slide{
    width: 5.52rem;
    height: 2.6rem;
}

/* 回到顶部 */
.backendBox{
    width: 100%;
    height: 1.74rem;
    position: relative;
    background-color: #3C3C3C;
}
.backend{
    width: 11.9rem;
    height: 1.74rem;
    position: absolute;
    left: calc(50% - 11.9rem/2);
}
#backing{
    width: 0.8rem;
    height: 0.2rem;
    text-align: center;
    line-height: 0.2rem;
    font-size: 0.18rem;
    color: #ececec;
    position: absolute;
    top: 0.65rem;
    left: calc(50% - 0.8rem/2);
}
#backing:hover{
    cursor: pointer;
}




.swiper-button-prev:after,.swiper-button-next:after{
    display:none !important;
}
.swiper-button-next{
    width: 0.5rem;
    height: 0.5rem;
    right: -2.10rem;
    top: 1.1rem;
}