@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;}

.container{width: 750px; overflow: hidden;}

/* .sea{position:absolute; left: 0; bottom: -50px; background: url("gif_海浪.gif") no-repeat left top /100% 100%; width: 100%; height: 397px;} */



/* 音频设置 */
.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:0; bottom: 50%; margin-bottom: -115px;  z-index : 101; }
.arrow{position: absolute; left: 50%; margin-left: -35px; bottom: 5%; z-index: 99; }

/* 海序列帧动画 */
.sea{position: absolute;left: 50%;bottom: -30px;width: 750px;height: 396px;margin-left: -375px; background: url("bbb.png") no-repeat left top; background-size: auto 100%; }

/* 序列帧动画 - 30帧横向排列 */
 .sea.active{
    animation: sea-sprite 3s steps(34) forwards infinite;
}

@keyframes sea-sprite {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -25500px 0; /* 654px * 34帧 = 22500px */
    }
}


/* p0 加载页 */

.loading {  width: 100%; height: 100%; overflow: hidden; position: relative; z-index: 10;}
.progress_bg{width: 630px;height: 15px;position: absolute;top: 50%;left: 50%;margin-left: -315px;}
.progress_box{
    width: 100%;
    height: 25px;
    border-radius: 20px;
    position: absolute;
    overflow: hidden;
    left: 0;
    bottom: 0;
    background-color: #FFFFFF;
    border: 3px solid #FFF;
    }
.progress{width: 0px;height: 100%;border-radius: 20px;background-color: #f6dfba;}
.page00_tips{position: absolute; left: 15px; bottom: 38px; z-index: 5; display: none;}
.loading_gif{position: absolute;left: 353px;top: 327px;width: 100px;height: 100px;}
.loading_gif img {width: 100%;}

.p0_tips{width: 137px; height: 136px;}
.p0_tips img{width: 100%; height: 100%;}


.p{position: relative;height: 100%;}
.p0{background: url("bg0.jpg") no-repeat left top /100% 100%; width: 100%; height: 1335px;}
.p1{background: url("bg1_.jpg") no-repeat left top /100% 100%; width: 100%; height: 1843px;}
.p2{background: url("bg2.jpg") no-repeat left top /100% 100%; width: 100%; height: 1635px;}
.p3{background: url("bg3_.jpg") no-repeat left top /100% 100%; width: 100%; height: 1344px;}
.p4{background: url("bg4_.jpg") no-repeat left top /100% 100%; width: 100%; height: 1463px;}
.p5{background: url("bg5.jpg") no-repeat left top /100% 100%; width: 100%; height: 2045px;}
.p6{background: url("bg6_.jpg") no-repeat left top /100% 100%; width: 100%; height: 1981px;}
.p7{background: url("bg7.jpg") no-repeat left top /100% 100%; width: 100%; height: 1899px;}
.p8{background: url("bg8.jpg") no-repeat left top /100% 100%; width: 100%; height: 2013px;}
.p9{background: url("bg9__.jpg") no-repeat left top /100% 100%; width: 100%; height: 1736px;}
.p10{background: url("bg10.jpg") no-repeat left top /100% 100%; width: 100%; height: 1930px;}
.p11{background: url("bg11.jpg") no-repeat left top /100% 100%; width: 100%; height: 2097px;}
.p12{background: url("bg12.jpg") no-repeat left top /100% 100%; width: 100%; height: 1633px;}
.p13{background: url("bg13_.jpg") no-repeat left top /100% 100%; width: 100%; height: 1943px;}

.start{width: 100%; height: 100%; background: url(bgbg.jpg) no-repeat left top /100% 100%;}

.p0_title_bg{position: absolute; left: 264px; top: 131px;}
.p0_title{position: absolute; left: 367px; top: 266px;}
.btn_start{position: absolute; left: 364px; top: 691px;}

.p1_w{position: absolute; left: 148px; top: 50px; }
.p2_w{position: absolute; left: 170px; top: 61px; }
.p3_w{position: absolute; left: 65px; top: 46px; }
.p4_w{position: absolute; left: 138px; top: 74px; }
.p5_w{position: absolute; left: 182px; top: 88px; }
.p6_w{position: absolute; left: 106px; top: 102px; }
.p7_w{position: absolute; left: 168px; top: 99px; }
.p8_w{position: absolute; left: 107px; top: 151px; }
.p9_w{position: absolute; left: 101px; top: 98px }
.p10_w{position: absolute; left: 79px; top: 121px; }
.p11_w{position: absolute; left: 98px; top: 96px; }
.p12_w{position: absolute; left: 146px; top: 103px; }
.p13_w{position: absolute; left: 128px; top: 88px; }

.p1 .btn_goWord{position: absolute; left: 549px; top: 1044px;}
.p2 .btn_goWord{position: absolute; left: 487px; top: 484px;}
.p3 .btn_goWord{position: absolute; left: 528px; top: 435px;}
.p4 .btn_goVideo{position: absolute; left: 517px; top: 496px;}
.p5 .btn_goWord{position: absolute; left: 487px; top: 917px;}
.p6 .btn_goWord{position: absolute; left: 514px; top: 1377px;}
.p7 .btn_goVideo{position: absolute; left: 164px; top: 1076px;}
.p8 .btn_goVideo{position: absolute; left: 489px; top: 1066px}
.p9 .btn_goVideo{position: absolute; left: 566px; top: 1067px;}
.p10 .btn_goVideo{position: absolute; left: 446px; top: 671px;}
.p11 .btn_goWord{position: absolute; left: 134px; top: 902px;}
.p12 .btn_goVideo{position: absolute; left: 325px; top: 789px;}
.p13 .btn_goVideo{position: absolute; left: 53px; top: 1202px;}

.ai_tips{position: absolute; right: 0px; bottom: 0px;}

.pop{position: absolute;background: url("pop_bg.png") no-repeat left top /100% 100%;width: 705px;height: 953px;padding: 120px 60px 80px;display: none;}
.pop .content{width: 100%;height: 100%;overflow-y: scroll;display:flex;justify-content: center;align-items: center;flex-direction: column;}

.pop3 .content, .pop11 .content{justify-content: flex-start;}

.pop1{ left: 23px; top: 707px;}
.pop2{ left: 15px; top: 292px;}
.pop3{ left: 22px; top: 295px;}
.pop5{ left: 24px; top: 858px;}
.pop6{ left: 23px; top: 869px;}
.pop11{ left: 22px; top: 401px;}

.close{position: absolute; right: 62px;top: 47px;}
.pop11 .close{position: absolute;right: 60px;top: 48px;}


.pop .content::-webkit-scrollbar-track {
    background-color: #e0e1dc;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.22);
    border: 1px solid #000;
  }

.pop .content::-webkit-scrollbar-thumb {
    background-color: #fbbf9d;
    border-radius: 10px;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
  }

.pop .content::webkit-scrollbar{width: 10px;}
  
  

.p99{position: relative;height: 100%;display: flex; width: 4767px;}
.p99_wz1{position: absolute; left: 154px; top: 101px; }
.p99_wz2{position: absolute; left: 1421px; top: 115px; }
.btn_box{position: absolute; left: 3433px; top: 0; width: 1334px; height: 100%;}
.btn_share{position: absolute; left: 252px; top: 153px; cursor: pointer;}
.btn_again{position: absolute; left: 454px; top: 395px; cursor: pointer;}

/* .video_frame{background: url("video_frame.png") no-repeat left top/ 100% 100%; width: 1219px; height: 685px; }
.video_close{position: absolute;right: -40px;top: -30px;background: url("icon_close.png") no-repeat center center/100% 100%;width: 90px;height: 90px;cursor: pointer;}
.intro_video{position: absolute;left: 34px;top: 50px;}
.other_video{position: absolute;left: -15px;top: 50px; display: none;} */
.video_box{position: absolute;left: 50%;top: 50%;margin-left: -375px;margin-top: -284.5px;z-index: 101;/* display: none; */width: 750px;height: 587px;background: url(video_frame.png) no-repeat 0 0/100%;padding: 50px 52px 54px 47px; display: none;}
.video_close{position: absolute;right: 19px;top: 12px;}

/* 分享盒设置 */
.share_box{width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: 101; display: none;}
.oh{overflow: hidden;}
.nopoint{ pointer-events: none;}
.video_frame{background: url("video_frame.png") no-repeat left top/ 100% 100%;width: 1212px;height: 685px;position: absolute;left: 50%;top: 50%;margin-left: -606px;margin-top: -330.5px;transform-origin: 50% 50%;box-sizing: border-box;padding: 4px;}

.video_back{position: absolute; right: -45px; top: -30px; transform-origin: 50% 50%; z-index: 100; cursor: pointer;}
/* .video_back img{width: 250px;} */
.video{position: relative;width: 100%;height: 100%;border-radius: 15px;background: #CCC; overflow: hidden;}
.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;}
.share_poster{position: absolute; left: 50%; top: 50%; width: 1080px; height: 607px; transform-origin: 50% 50%;  margin-left: -540px; margin-top: -303.5px;}
.share_poster img{width: 100%; height: 100%;}
.btn_jump{position: absolute; right: 22px; top: 67px;}