@charset "utf-8";

body,div,img,form,input,ul,li,h1,h2,a,span{margin: 0; padding: 0; border: none; box-sizing: border-box;}
ul,li{list-style: none;}
/* body,input,h1,h2{font-family: "微软雅黑", "黑体"; font-size: 16px; line-height: 30px; font-weight: normal; position: relative; } */


a{color: #000; text-decoration: none;}
a:hover{color: #D92636;}
.fl{float: left;}
.fr{float: right;}
.clearflx:after{content: ""; display: block; visibility: hidden; clear: both;}
.cl{ clear:both; height:0px; overflow:hidden;}

.none{display: none;}

img{
	/* 元素不能成为鼠标事件的target */
	pointer-events:none;
	-webkit-pointer-events:none;
	-ms-pointer-events:none;
	-moz-pointer-events:none;
}
*:not(input) {
    -webkit-touch-callout:none;/*系统默认菜单被禁用*/
    -webkit-user-select:none;/*webkit浏览器*/
    -khtml-user-select:none;/*早起浏览器*/
    -moz-user-select:none;/*火狐浏览器*/
    -ms-user-select:none;/*IE浏览器*/
    user-select:none;/*用户是否能够选中文本*/
}

/* 常规设置 */
.container{position: relative; width: 100%; height: 750px; overflow: hidden;}
.video{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
video{position: absolute; left: 50%; transform: translateX(-50%) translateZ(1px);}

/* 音频设置 */
.audioBox{position: absolute; left: 5px; top: 5px; width: 45px; height: 45px;  z-index : 101;}
.play_on{background: url("play_on.png") no-repeat left top/100%; width: 45px; height: 45px; display: none;}
.play_off{background: url("play_off.png") no-repeat left top/100%; width: 45px; height: 45px; display: none;}
.audio_preloader{display: none;}

/* p0 加载页 + 首页 */
.bg0{background:url("bg0.jpg") no-repeat left top/100% 100%; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}

/* 加载页 */
.loading{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.loading_progress{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2}
.progress_container{width: 650px;height:80px}
.progress_bar{width:100%;height:27px;background: #fff;border-radius:13.5px;overflow:hidden; box-sizing: border-box; padding: 6px;}
.progress_fill{width:0%;height:100%;background:rgba(255,225,86,1); border-radius: 13.5px;}
.text_container{position: absolute;left: 50%;top: 50%;margin-left: -480px;margin-top: -30px;}
.loading_e{position: absolute;left: 0;top: 0;}
.progress_num,.tips_click{position:absolute;width:100%;text-align:center;color:#fff;font-size:28px;left: 25px;top: 30px;}
.loading_tips, .tips_loading_bg{position: absolute;left: 176px;top: 90px;}
.tips_loading_bg{width: 191px;height: 87px; background: url("loading_tips_bg.png") no-repeat left top/100% 100%;}




/* 首页 */
.p0_t{position: absolute; left: 50%; top: 170px; margin-left: -396px;}
.p0_e1{position: absolute; left: 50%; top: 345px; margin-left: -480px; transform: translateZ(1px);}
.p0_e2{position: absolute; left: 50%; top: 435px; margin-left: -308px; transform: translateZ(1px);}
.p0_btn_start{position: absolute; left: 50%; top: 560px; margin-left: -157.5px; cursor: pointer;}
.p0_btn_start .tips_hand{position: absolute; right: 0; bottom: -60px;}


/* 通用 */
.float_box, .video_box, .video_bg, .loc{position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden;}
.loc img{width: 100%; height: 100%;}
.perspective{ perspective: 2000px;}
.c{position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; margin-left: -154px; margin-top: -167.5px;}
.c1{margin-left: -249.5px; margin-top: -190.5px;}
.c2{margin-left: -189px; margin-top: -259px;}
.c3{margin-left: -249.5px; margin-top: -189px;}
.c4{margin-left: -186px; margin-top: -212.5px;}
.c5{margin-left: -256px; margin-top: -189.5px;}
.c6{margin-left: -188.5px; margin-top: -255px;}

.icon_play{ width: 150px; height: 150px; position: absolute; left: 50%; top: 50%; margin-left: -75px; margin-top: -75px; cursor: pointer; display: none; }
.icon_play img{width: 100%; height: 100%;}
.btn_jump{background: url("btn_jump.png") no-repeat left top/100% 100%;width: 63px;height: 63px;box-sizing: border-box;padding: 19px;position: absolute;right: 50%;margin-right: -650px;top: 9px;cursor: pointer;z-index: 10;transform: translateZ(1px);}
.btn_next, .btn_goJM{background: none; width: auto; height: auto; box-sizing: border-box;padding: 0;position: absolute;right: 50%;margin-right: -650px;top: 9px;cursor: pointer;z-index: 10;transform: translateZ(1px);}

.video_bg{background: url("video_bg.jpg") no-repeat left top/100% 100%; }
.video_frame{background: url("video_frame.png") no-repeat left top/100% 100%;  width: 1340px; height: 100%; position: absolute; left: 50%; top: 0;  transform: translateX(-50%) translateZ(1px); z-index: 5; pointer-events: none;}

/* 区域 */
.area{width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.area>div{cursor: pointer; position: absolute;}
.a1{left: 17.4%;top: 320px;width: 22.2%;height: 135px;}
.a2{left: 38.2%;top: 20px;width: 18%;height: 230px;}
.a3{left: 22.1%;top: 110px;width: 13.2%;height: 175px;}
.a4{left: 7.8%;top: 30px;width: 12.8%;height: 120px;}
.a5{left: 40.7%;top: 398px;width: 17.8%;height: 170px;}
.a6{right: 0.6%;top: 196px;width: 19.3%;height: 205px;}
.a7{left: 17.4%;top: 513px;width: 18.8%;height: 200px;}


/* 小标题 */
.t{pointer-events: none; transform: translateZ(1px);}
.t1{position: absolute; left: 50%; top: 135px; margin-left: -448.5px;}
.t2{position: absolute; left: 50%; top: 135px; margin-left: -430.5px;}
.t3{position: absolute; left: 50%; top: 135px; margin-left: -460.5px;}
.t4{position: absolute; left: 50%; top: 135px; margin-left: -419px;}
.t5{position: absolute; left: 50%; top: 135px; margin-left: -433.5px;}
.t6{position: absolute; left: 50%; top: 135px; margin-left: -408px;}
.t7{position: absolute; left: 50%; top: 135px; margin-left: -440px;}

/* 小标题 */
.t2_1,.t2_2,.t2_3,.t2_4{position: absolute;left: 50%;margin-left: -610px;top: 39px;}


/* p8 碎片集成页 */
.p8_f{background: url("p8_f.png") no-repeat left top/100% 100%; width: 1175px; height: 698px; position: absolute; left: 50%; top: 50%; margin-left: -587.5px; margin-top: -349px; transform: translateZ(1px);}
.p8_c{position: absolute; left: 50%; top: 50%; margin-left: -510px; margin-top: -328px;}

.p8_btn_start{ position: absolute; right: 7%; bottom: 45px; width: 303px; height: 203px; cursor: pointer;}
.p8_btn_c{position: absolute; right: 0; top: 0px;}
.p8_btn_t{position: absolute; left: 0; top: 100px;}
.p8_icon_l{position: absolute; left: 237px; top: 72px;}
.p8_btn{position: absolute;left: 50%;top: 475px;cursor: pointer;margin-left: 30px; transform: translateZ(1px);}
.p8_scroll_close{ background: url("btn_jump.png") no-repeat left top/100% 100%; width: 63px; height: 63px; box-sizing: border-box; padding: 19px; position: absolute; right: 54px; top: 11px; cursor: pointer;}


.p8_c_box{position: absolute; left: 50%; top: 50%; margin-left: -661px; margin-top: -375px; width: 1334px; height: 750px;perspective: 500px; -webkit-perspective: 500px; -webkit-perspective-origin: calc(50% + 120px) 50%;}
.p8_c_box>div{position: absolute;}
.p8_c1{left: 182px;top: 105px;}
.p8_c2{left: 485px;top: 11px;}
.p8_c3{left: 661px;top: 51px;}
.p8_c4{left: 270px;top: 369px;}
.p8_c5{left: 446px;top: 342px;}
.p8_c6{left: 754px;top: 252px;}


.fz{width:1175px;height:698px;position:absolute;left:50%;top:50%;margin-left: -587.5px;margin-top: -349px;z-index:101; -webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.fz .face{position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:10px;text-align:center}
.fz .back{-webkit-transform: rotate3d(-1,1,0,-180deg); transform: rotate3d(-1,1,0,-180deg)}


/* p9 结尾页 */
.p9 .p9_w{position: absolute; left: 50%; top: 50px; margin-left: -401px;}


.p9 .btn_again{position: absolute; left: 50%; top: 603px; margin-left: -261px}
.p9 .btn_share{position: absolute; left: 50%; top: 603px; margin-left: 34px;}
.p9 .p0_btn_start{position: absolute; left: 50%; top: 300px; margin-left: -396px;}

/* p10 地图 */
.map_bg{background: url("p9_.jpg") no-repeat left top/100% 100%; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.p9, .map_gif{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.map_gif img{width: 100%; height: 100%;}

.loc_box{position: absolute; left: 0; bottom: 0; width: 100%; height: 40px; background-color: rgba(52, 154, 194, 0.58);}
.loc_line{position: absolute; left: 0; top: 18px; width: 100%; height: 4px;  box-sizing: border-box; background-color: rgba(255, 255, 255, 0.37);}
.l_c{position: absolute; left: 0; top: 0; width: 56px; height: 56px; margin-top: -14px; margin-left: -24px;}
.l_c img{width: 100%; height: 100%; object-fit: cover;}
.l_c_bg{background:url("circle.png") no-repeat 14.28% top/ 16.5px,
    url("circle.png") no-repeat 28.57% top/ 16.5px,
    url("circle.png") no-repeat 42.85% top/ 16.5px,
    url("circle.png") no-repeat 57.14% top/ 16.5px,
    url("circle.png") no-repeat 71.42% top/ 16.5px,
    url("circle.png") no-repeat 85.71% top/ 16.5px;
    width: 100%; height: 100%; position: absolute; left: 0; top: 11px;}
.l_c1{ left: 14.28%;}
.l_c2{ left: 28.57%;}
.l_c3{ left: 42.85%;}
.l_c4{ left: 57.14%;}
.l_c5{ left: 71.42%;}
.l_c6{ left: 85.71%;}

/* 分享盒 */
.share_box{width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: 101; display: none;}
.share_bg {width: 100%; height: 100%; background: rgba(25, 28, 34, 0.58); position: absolute; left: 0px; top: 0px; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);}
.share_png{background: url("share_tips2.png") no-repeat left 10px; width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;}

/* 间幕效果（已改为 选项页） */
.jm{width: 100%; height: 100%; background: rgba(25, 28, 34, 0.58);  position: absolute; left: 0px; top: 0px; z-index: 101; display: none;}
.jm_btn{position: absolute;left: 50%;bottom: 5%;transform: translateX(-50%);cursor: pointer;width: 1000px;height: 68px;display: flex;justify-content: space-evenly;}
.jm_a{ cursor: pointer;}
.jm_b{ cursor: pointer;}
.jm_content{height:100%;position: absolute;right: 0px;top: 0px;display: flex;justify-content: center;align-items: flex-end;flex-direction: column;}
.q{cursor: pointer;margin: 20px 0;}

/* 选项页 */
.xx{width: 100%; height: 100%; background:rgba(25, 28, 34, 0.58) url("xx_bg.png") no-repeat center center/1276px 719px;  position: absolute; left: 0px; top: 0px; z-index: 101; transform: translateZ(1px); display: none;}
.xx_p{position: absolute;left: 50%;top: 137px; margin-left: -501px;}
.xx_btn{position: absolute;left: 50%;bottom: 5%;transform: translateX(-50%);cursor: pointer;width: 1000px;height: 68px;display: flex;justify-content: space-evenly;}
.xx_b{ cursor: pointer;}
.xx_content{height:100%;position: absolute;left: 50%;margin-left: 130px;top: 0px;display: flex;justify-content: center;align-items: flex-end;flex-direction: column;}

.main-phone{ transform-origin: 375px 375px;}
.main-phone2{width: 1334px; height: 100%; transform-origin: 375px 375px;}
/* 竖屏 */
@media screen and (orientation: portrait) {
    /* .main-phone{ width: 35000px; height: 750px;} */
	.main-phone, .main-phone2, .tips{-webkit-transform:rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg);}   
}
/* 横屏 */
@media screen and (orientation: landscape) {
    /* .main-phone{ width: 35000px; height: 750px;} */
    .main-phone2{width: 100%; height: 100%;}
	.main-phone, .main-phone2{margin: 0; -webkit-transform:rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0);}

    .share_png{background: url("share_tips2.png") no-repeat left 10px;}

}

.test90{width: 1334px; height: 100%; transform-origin: 375px 375px;}
.test90{-webkit-transform:rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg);}   

/* iOS端控制栏渐隐动画优化 */
@supports (-webkit-touch-callout: none) {
    .controls-visible {
        transition: opacity 0.3s ease-in-out;
    }
}