@charset "utf-8";
/* CSS Document */


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 !important;}

/* 浮动层 */
/* .float_box{width: 100%;height: 750px;position: relative;z-index: 100;} */

/* 音频设置 */
.audioBox{position: fixed; right: 30px; top: 30px; width: 36px; top: 36px;  z-index : 101;}
.play_on{background: url("play_on.png") no-repeat; width: 36px; height: 36px; display: none;}
.play_off{background: url("play_off.png") no-repeat; width: 36px; height: 36px; display: none;}
audio{display: none;}

/* 提示设置 */
.tips{position: fixed; right:5%; bottom: 10%; z-index : 101; }


/* 分享盒 */
.btn_share{position: absolute; left: 2292px; top: 399px; width: 246px; height: 94px;}
/* 视频盒 */
.video_box{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}


/* p0 加载页 */
.loading{background: url("loading_bg.jpg") no-repeat left center/ 100% 100%;width: 100%;height: 750px;position: absolute;z-index : 20;}
.loading_bg{position: absolute;left: 50%;top: 81px;margin-left: -477.5px;background: url("loading_w_bg.png") no-repeat left center/ 100% 100%;width: 955px;height: 437px;}
.loading_w{position: absolute;left: 50%;top: 147px;margin-left: -192.5px;width: 385px;height: 0; overflow: hidden; max-height: 100px;}

.loading_tips{position: absolute;left: 50%;top: 76px;margin-left: -477.5px;}
.progress_loading_box{position: absolute; left: 50%; top: 349px; margin-left: -532px;  width: 1064px; height: 131px;}


.progress_loading{position: absolute; left: 76px; top: 45px; width: 800px; height: 18px; border-radius: 9px; background-color: #515f68; border: 1px solid #363f42; }
.progress_loading_box .t{position: absolute; right: 0; top: -12px;}
.progress_loading_box .m{position: absolute; left: 0; top: 0;}
.progress_loading_bar{position: absolute; left: 0; top: 0; width: 30%; height: 100%; background-image: linear-gradient(to right, #e8dbb0 0%, #fff8ca 34%, #ffffff 72%, #e9e2ba 100%); border-radius: 9px; border: 1px solid #363f42; transition: all .3s;}
.progress_loading_ball{position: absolute; right: -13px; top: -6.5px; background: url(progress_ball.png) no-repeat center center; width: 26px; height: 26px;}
.progress_loading_ball span{position: absolute; top: -50px; left: -15px; font-size: 30px; font-weight: bold; line-height: 48px; -webkit-text-stroke: 6px #515f68; }
[data-content]::before {
    content: attr(data-content);
    position: absolute;
    -webkit-text-stroke: 0;
    color: #FFF;
} 

.p0{ position: absolute; width: 100%; height: 750px; overflow: hidden;}

.bg_v1{height: 100%; position: absolute;}


.p0_t_box_animated{background: url("p0_bg_.jpg") no-repeat -30px center/ auto 100%;width: 100%;height: 750px;position: absolute;z-index : 20;overflow: hidden;}
/* .p0_t_box{width: 541px; height: 48px; position: absolute; left: 50%; margin-left: -366.5px; top: 112px; transform-origin: 33% 25%;   perspective: 1000px;  transform-style: preserve-3d;} */

.p0_t_box{width: 541px; height: 48px; position: absolute; left: 389px; top: 109px; transform-origin: 33% 25%;   perspective: 1000px;  transform-style: preserve-3d;}
.p0_t{position: absolute; left: 0; top: 0; width: 541px; height: 487px;  }
.p0_t_w1{position: absolute; left: 0; top: 0; }
.p0_t_w2{position: absolute; left: 225px; top: 5px; }
.p0_t_w3{position: absolute; left: 96px; top: 179px; }
.p0_t_w4{position: absolute; left: 250px; top: 177px; }
.p0_t_w5{position: absolute; left: 352px; top: 170px; }
.p0_t_w6{position: absolute; left: 177px; top: 309px; }
.p0_t_w7{position: absolute; left: 144px; top: 304px; }
.p0_t_w8{position: absolute; left: 407px; top: 299px; }
.p0_t_light{position: absolute; left: 367px; top: 47px; }
.p0_t_y1{position: absolute; left: 101px; top: 196px; }
.p0_t_y2{position: absolute; left: 499px; top: 179px; }

.p0_tips{position: absolute; left: 177px; top: 121px; z-index: 99; display: none;}

.p0_1{background: url("p0_bg2_.jpg") no-repeat left center/ 100% 100%;width: 100%;height: 750px;position: absolute;z-index : 20;}
.p0_braille_box{width: 660px;height: 300px;position: absolute;left: 50%;margin-left: -330px;top: 152px;}
.p0_braille_bg{background: url("p0_braille_bg.png") no-repeat left center/ 100% 288px;}
.p0_braille{width: 314px;height: 145px;position: absolute;left: 50%;margin-left: -150px;top: 80px;}
.p0_braille img{width: 100%;}
.p0_tips_hand{width: 96px;height: 71px;position: absolute;left: 360px;top: 200px;}
.p0_tips_touch{width: 373px;height: 135px;position: absolute;left: 360px;top: 220px;}


.p0_eyes{width: 79px;height: 44px;position: absolute;left: 141px;top: 100px;}
.p0_eyes img{width: 100%;}
.black{width: 100%; height: 100%; background: #000000; position: absolute; left: 0; top: 0; display: flex; justify-content: center; align-items: center; filter: blur(12px) opacity(1);}
.ellipse{width: 100%; height: 100%; background: #ffffff; border-radius: 50%/50%; overflow: hidden; }

/* .progress_bg{background: url("line_bg.png") no-repeat center top; background-size: 100% 100%; width: 1040px; height: 41px; position: absolute; top: 428px; left: 50%; margin-left: -520px; transform-origin: 50% 50%;}
.progress_box{width: 1030px; height: 41px;  border-radius: 7.5px; position: absolute; overflow: hidden; left: 4px; top: 1px; transform-origin: 50% 50%;}
.progress{width: 0px; height: 100%; background:url("line.png") no-repeat center top/100% 100%;} */

.bg{background: url("bg1.jpg") left top no-repeat,
    url("bg2.jpg") 1332px top no-repeat,
    url("bg3.jpg") 4031px top no-repeat, 
    url("bg4.jpg") 7561px top no-repeat,
    url("bg5.jpg") 11124px top no-repeat,
    url("zz2.png") 17619px top no-repeat,
    url("bg6.jpg") 13704px top no-repeat,
   #b8ced4; width: 27025px; height: 750px; position: relative; overflow: hidden; }
.index100{width: 27025px; height: 750px; position: absolute; left: 0; top: 0; overflow: hidden;  z-index : 100; transform-origin: 375px 375px;}

.bg_v2{height: 100%; position: absolute; left: 4033px; top: 0;}
.zz_3{position: absolute; left: 3261px; top: 0;}
.zz_4{position: absolute; left: 5782px; top: 0;}

.p1{position: absolute; }
.p1_braille_box{position: absolute; left: 0; top: 0; width: 1500px; height: 750px; transform-origin: 85% 85%;}
.p1_braille{position: absolute;left: 50%; margin-left: -142.5px; top: 243px;}
.p1_braille_fy{position: absolute; left: 50%; margin-left: 182px; top: 227px;}
.p1_w1{position: absolute;left: 2466px;top: 118px;display: none;}
.p1_w2{position: absolute; left: 3545px; top: 0; display: none;}
.p1_pic1{position: absolute; left: 4110px; top: 79px; display: none;}
.p1_pic2{position: absolute; left: 4887px; top: 0px; display: none;}
.p1_w3{position: absolute; left: 4742px; top: 0; display: none;}

.p1_music_box{position: absolute; left: 1129px; top: 0px; width: 2904px; height: 750px;}
.staff1{position: absolute; left: 0; top: 333px;  width: 0; height: 750px; overflow: hidden;}
.staff2{position: absolute; left: 1656px; top: 0px;  width: 0; height: 750px; overflow: hidden;}

.p1_m1{position: absolute; left: 160px; top: 591px; display: none;}
.p1_m2{position: absolute; left: 333px; top: 502px; display: none;}
.p1_m3{position: absolute; left: 536px; top: 429px; display: none;}
.p1_m4{position: absolute; left: 697px; top: 366px; display: none;}
.p1_m5{position: absolute; left: 871px; top: 329px; display: none;}
.p1_m6{position: absolute; left: 1010px; top: 324px; display: none;}
.p1_m7{position: absolute; left: 1186px; top: 351px; display: none;}
.p1_m8{position: absolute; left: 1325px; top: 421px; display: none;}
.p1_m9{position: absolute; left: 1770px; top: 414px; display: none;}
.p1_m10{position: absolute; left: 1854px; top: 421px; display: none;}
.p1_m11{position: absolute; left: 1956px; top: 392px; display: none;}
.p1_m12{position: absolute; left: 2148px; top: 366px; display: none;}
.p1_m13{position: absolute; left: 2290px; top: 269px; display: none;}
.p1_m14{position: absolute; left: 2488px; top: 158px; display: none;}

.p1_people{position: absolute; left: 1299px; top: 358px;  }

.part2{position: absolute; left: 6069px; top: 0; }
.p2_card_box{position: absolute; left: 0px; top: 0; width: 1203px; height: 750px; }
.p2_card{position: absolute; left: 147px; top: 93px; }
.p2_card_t1{position: absolute; left: 66px; top: 299px; }
.p2_card_t2{position: absolute; left: 0; top: 514px; }
.p2_card_t3{position: absolute; left: 383px; top: 588px; }

.p2_w1{position: absolute; left: 1468px; top: 0px; display: none;}

.p2_video{position: absolute; left: 2460px; top: 105px; width: 935px; height: 527px;}
.tips_player{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.p2_video video{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}

.p3_trans_p_box{display: none;}
.p3_trans_box{position: absolute; left: 9572px; top: 0; width: 100%; height: 100%;}
.p3_trans_p1{position: absolute; left: 376px; top: 119px; }
    .p3_trans_p2{position: absolute; left: 237px; top: 33px; }
    .p3_trans_p3{position: absolute; left: 919px; top: 349px; }
    .p3_trans_p4_1{position: absolute; left: 853px; top: 59px; }
    .p3_trans_p4_2{position: absolute; left: 0px; top: 354px; }
    .p3_trans_p4_3{position: absolute;left: 666px;top: 493px;}
    .p3_trans_p4_4{position: absolute; left: 888px; top: 708px; }

    .p3_trans_l1{position: absolute; left: 798px; top: 302px; width: 90px; height: 118px; }
    .p3_trans_l2{position: absolute; left: 489px; top: 137px; width: 24px; height: 29px; }
    .p3_trans_l3{position: absolute; left: 748px; top: 425px; width: 34px; height: 44px; }
    .p3_trans_l4{position: absolute; left: 401px; top: 244px; width: 64px; height: 76px;}
.p3_trans_l_box img{width: 100%;}

.p3_start_box{ position: absolute; left: 10563px; top: 0; width: 1071px; height: 750px;}
.p3_recode{position: absolute;left: -40px;top: -180px;width: 100%;height: 100%;}
.p3_r_1{position: absolute; left: 0px; top: 0px;  }
.p3_r_2{position: absolute;left: 843px;top: 131px;transform-origin: 100% 0;transform: rotate(-15deg);}
.p3_r_3{position: absolute; left: 665px; top: 118px;  }

.p3_start_t{position: absolute; left: 322px; top: 423px; }
.p3_start_b{position: absolute; left: 456px; top: 621px; cursor: pointer;}
.p3_start_light{position: absolute; left: 256px; top: 0px; }

.p3_boss_box{position: absolute;left: 11969px;top: 0;width: 732px;height: 750px;}
.p3_boss_name{position: absolute;left: 0px;top: 114px; display: none;}
.p3_boss_intro{position: absolute;left: 146px;top: 540px; display: none;}

.p3_arrow1{position: absolute; left: 12619px; top: 0; display: none;}
.p3_w1{position: absolute; left: 0px; top: 0; }
.p3_music{position: absolute; left: 181px; top: 358px; }
.icon_tips_muse{position: absolute;left: 339px;top: 415px;}

.p3_start_btn{position: absolute; left: 1447px; top: 621px; cursor: pointer;}

.p6_e_box{background: url("p6_e_bg.png") no-repeat center center/ auto 100%; width: 909px; height: 750px;}

.p6_c1{position: absolute; left: 13758px; top: 0; }
.p6_c2{position: absolute; left: 15363px; top: 0; }
.p6_c3{position: absolute; left: 16957px; top: 0; }

/* p6_tips_click 要允许穿透 到 p6_face_box */
.p6_e1{position: absolute; left: 459px; top: 308px; }
.p6_tips_click{position: absolute; pointer-events: none; }
.p6_c1 .p6_tips_click{position: absolute;left: 162px;top: 261px;}
.p6_c2 .p6_tips_click{position: absolute;left: 262px;top: 201px;}
.p6_c3 .p6_tips_click{position: absolute;left: 230px;top: 240px;}

.p6_face_box, .p8_e_box{ position: absolute; left: 123px; top: 71px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; width: 880px; height: 570px;}
.face{    position: absolute; width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.video_btn{position: absolute; width: 244px; height: 155px; }
.video_btn .tips_hands{position: absolute; right: 0; bottom: -50px;}

.p6_c2 .front{left: -70px; top: 100px; }
.p6_c2 .back{left: 80px; top: 70px; }

.p6_c3 .front{left: -25px; top: 60px; }
.p6_c3 .back{left: -108px;top: 94px;}

.p6_c1 .video_btn{left: 519px; top: 210px; }
.p6_c2 .video_btn{left: 589px; top: 362px; }
.p6_c3 .video_btn{left: 313px; top: 300px; }

.progress_song_box{position: absolute; left: 11750px; top: 643px; width: 1105px; height: 77px;}
.progress_song{position: absolute; left: 76px; top: 45px; width: 900px; height: 18px; border-radius: 9px; background-color: #515f68; border: 1px solid #363f42; }
.progress_song_box .t{position: absolute; right: 0; top: 43px;}
.progress_song_box .m{position: absolute; left: 0; top: 0;}
.progress_song_bar{position: absolute; left: 0; top: 0; width: 30%; height: 100%; background-image: linear-gradient(to right, #e8dbb0 0%, #fff8ca 34%, #ffffff 72%, #e9e2ba 100%); border-radius: 9px; border: 1px solid #363f42; transition: all .1s;}
.progress_song_ball{position: absolute; right: -13px; top: -6.5px; background: url(progress_ball.png) no-repeat center center; width: 26px; height: 26px;}
.progress_song_ball span{position: absolute; top: -50px; left: -15px; font-size: 30px; font-weight: bold; line-height: 48px; -webkit-text-stroke: 6px #515f68; }
[data-content]::before {
    content: attr(data-content);
    position: absolute;
    -webkit-text-stroke: 0;
    color: #FFF;
} 



.back{-webkit-transform: rotateY(180deg); transform: rotateY(180deg);}

.goon_1{position: absolute; left: 14924px; top: 332px;}
.goon_2{position: absolute; left: 16480px; top: 332px;}
.goon_3{position: absolute; left: 18085px; top: 332px;}

.p7{position: absolute; left: 18422px; top: 0; width: 997px; height: 750px;}
.p7_w{position: absolute; left: 225px; top: 32px; }
.p7_p1{position: absolute; left: 474px; top: 0px;}
.p7_p2{position: absolute; left: 174px; top: 260px;}
.p7_p3{position: absolute; left: 506px; top: 179px; width: 529px; height: 327px;}
.p7_p3 img{width: 100%;}
.p7_p4{position: absolute; left: 605px; top: 496px; width: 306px; height: 115px;}
.p7_p4 img{width: 100%;}

.p7_light{position: absolute; left: -59px; top: 0; }

.p7_l1{position: absolute; left: -326px; top: -77px;}
.p7_l2{position: absolute; left: -426px; top: 362px;}
.p7_l3{position: absolute; left: 149px; top: 373px;}

.p7_tips_slide{position: absolute; left: 660px; top: 390px;}

.arrow_start{position: absolute; left: 391px; top: 260px;}

.lyric_content{position: absolute; left: 397px; top: 349px; width: 257px; height: 322px; overflow-y: auto;}
.lyric_content::-webkit-scrollbar{width: 6px;border-radius: 3px;}
.lyric_content::-webkit-scrollbar-track{background: #fff;}
.lyric_content::-webkit-scrollbar-thumb{background: #f9cfa4; border-radius: 3px;}


.p8{position: absolute; left: 19295px; }
.p8_w1{position: absolute; left: 436px; top: 0; }

.p8_bottom{position: absolute; left: 0; top: 0; }
.p8_e_box{ position: absolute; left: 274px; top: 177px; width: 965px; height: 431px;}

.p8_tips_click{position: absolute; left: 318px; top: 173px;}

.p8_e_box .video_btn{position: absolute;left: 567px;top: 264px;width: 247px;height: 155px;}

.p8_light1_1{position: absolute; left: 2325px; top: 591px; }
.p8_light1_2{position: absolute; left: 3229px; top: 552px; }
.p8_light2{position: absolute; left: 2819px; top: 0px; }


.p9{position: absolute; left: 21706px; width: 2352px; height: 750px;}

.p9_p_box{position: absolute; left: 1348px; top: 0; width: 1061px; height: 750px; }
.p9_p{position: absolute;left: 0px;top: 59px;}
.p9_gif{position: absolute;left: 80px;top: 112px;}
.p9_gif img{width: 960px;}
.p9_p_light{position: absolute;}
.p9_zz{position: absolute; left: 0px; top: 0px;}

.p9_rec{position: absolute; left: 1015px; top: 150px;  }
.p9_p2{position: absolute; left: 0px; top: 0px; width: 0; height: 234px; overflow: hidden; }
.p9_3_bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.p9_3_w{position: absolute;left: 396px;top: 201px;}
.p9_card{position: absolute; left: 1233px; top: 93px; background: url(p9_card.png) no-repeat center center / auto 100%; width: 1119px; height: 511px;}

.p9_play_box{position: absolute; left: 762px; top: 367px; }
.p9_card_play, .p9_card_pause{position: absolute; left: 0; top: 0; }
.p9_card_tips{position: absolute;left: 50px;top: 60px;}

.p9_card_progress{position: absolute; left: 554px; top: 308px; width: 516px; height: 11px; background-color: #e1e9eb; border-radius: 15px; overflow: hidden; }
.p9_card_progress_bar{position: absolute; left: 0; top: 0; width: 36%; height: 100%; background:url(icon_bar_m.png) no-repeat right center / auto 100%; background-color: #749cb5;  }
.bar_ball{position: absolute;right: -5.5px;margin-top: -5.5px;}

/* p10 */
.p10{position: absolute; left: 24058px; }
.p10_p img{width: 100%; height: 100%;}

.p10_bg{position: absolute; left: 428px; top: 375px; width: 2363px; height: 375px;}
.p10_bg_1{position: absolute; left: 0; top: 20px; width: 0; height: 750px; overflow: hidden;}
.p10_bg_2{position: absolute;right: 901px;top: 91px;width: 0;height: 117px;overflow: hidden;background: url(p10_bg_2.png) no-repeat right center / auto 100%;}
.p10_bg_3{position: absolute; left: 743px; top: 208px; width: 0; height: 750px; overflow: hidden;}


.p10_bg1{position: absolute; left: 428px; top: 375px;}
.p10_recode{position: absolute;left: 1897px;top: 55px;width: 100%;height: 100%;}
.p10_r_1{position: absolute; left: 0px; top: 0px; width: 1202px; height: 927px; }
.p10_r_1 img{width: 100%; height: 100%;}
.p10_r_2{position: absolute; left: 843px; top: 131px;  }
.p10_r_3{position: absolute; left: 665px; top: 118px;  }


.p10_e1{position: absolute; left: 54px; top: 0; transform: rotate(15deg); width: 615px; height: 396px;}
.p10_e2{position: absolute; left: 156px; top: 341px; transform: rotate(13deg); width: 312px; height: 110px; }
.p10_e3{position: absolute; left: 0px; top: 478px; width: 312px; height: 110px; }
.p10_e4{position: absolute; left: 300px; top: 638px; width: 191px; height: 68px; }
.p10_e5{position: absolute; left: 519px; top: 496px; width: 216px; height: 105px; }
.p10_e6{position: absolute; left: 574px; top: 228px; width: 216px; height: 105px;}
.p10_e7{position: absolute; left: 617px; top: -61px; width: 154px; height: 188px;}
.p10_e8{position: absolute; left: 895px; top: -17px; width: 191px; height: 68px;}
.p10_e9{position: absolute; left: 819px; top: 130px; width: 310px; height: 152px;}


.p10_e10{position: absolute; left: 1573px; top: -52px; width: 585px; height: 362px;}
.p10_e11{position: absolute; left: 1708px; top: 281px; width: 298px; height: 112px;}
.p10_e12{position: absolute; left: 1985px; top: 352px; width: 216px; height: 105px;}
.p10_e13{position: absolute; left: 2120px; top: -36px; width: 155px; height: 112px;}
.p10_e14{position: absolute; left: 2212px; top: 707px; width: 155px; height: 112px;}


.p10_w{position: absolute; left: 942px; top: 0px; width: 879px; height: 499px;}
.p10_w2{position: absolute; left: 2068px; top: 193px; width: 191px; height: 68 px;}


.share_box, .video_box{width: 100%;height: 100%;position: fixed;left: 0px;top: 0px;z-index: 101;display: none;}
/* .video_box, .video{pointer-events: none;} */
.oh{overflow: hidden;}
.nopoint{ pointer-events: none;}
.video_frame{background: url("p3_video_bg.png") no-repeat left top/ 100% 100%;width: 1168px;height: 810px;overflow: hidden;position: absolute;left: 50%;top: 60%;margin-left: -619px;margin-top: -438px;transform-origin: 57% 46%;}
.video_back{position: absolute; right: 5%; top: 5%; transform-origin: 50% 50%; cursor: pointer;}
.video_back img{width: 150px;}
.video{position: absolute;left: 57px;top: 112px;width: 1050px;height: 600px;background: #CCC;}
.share_bg, .video_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_tips.png") no-repeat right 10px; width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;}


.main-phone{ transform-origin: 375px 375px;}
.main-phone2{width: 1334px; height: 100%; transform-origin: 375px 375px;}


/* 竖屏 */
@media screen and (orientation: portrait) {
    .main-phone{ width: 27025px; height: 750px;}
	.main-phone, .video_frame, .index100, .main-phone2, .audioBox, .tips{-webkit-transform:rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg);}   
    .video_back{position: absolute; right: 5%; bottom: 5%; top: auto; transform: rotate(90deg);}
    .tips{position: absolute;right: 65%;bottom: 4%;z-index : 101;}

}
/* 横屏 */
@media screen and (orientation: landscape) {
    .main-phone{ width: 27025px; 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;}
    .video_frame {top:53%;}

}