@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; }
html, body{margin: 0 auto;}

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;}
.oh{overflow: hidden;}
.nopoint{ pointer-events: none;}

.c_box{width: 1334px; height: 750px;}

/* 音频设置 */
.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;}

video{position: absolute; left: 0; bottom: 0;}
video::-webkit-media-controls-download-button {
    display:none !important;
}
/* p0 加载页 */
.p0{background: url("p0_bg.jpg") no-repeat left top/100% 100%; position: relative; width: 100%; height: 750px;}
/* .p0{background: url("bg_00.jpg") no-repeat center center/ 100% 100%; width: 100%; height: 750px; position: relative; margin: auto;  z-index : 20;}
.p0_p{width: 225px; height: 269px; position: absolute; left: 50%; margin-left: -112.5px; top: 132px;}
.p0_p img{width: 100%;} */
.p0_tips{position: absolute; left: 50%;  top: 50%; z-index: 99; display: none;}
.p0_ship{position: absolute;left: 50%;margin-left: -90px;top: 350px}

.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: 1019px;height: 28px;border-radius: 7.5px;position: absolute;overflow: hidden;left: 10px;top: 7px;transform-origin: 50% 50%;/* margin: 5px 10px; */box-sizing: border-box;}
.progress{width: 0px; height: 100%; background:url("line.png") no-repeat center top/100% 100%;}


.index100{width: 1334px; height: 750px; position: absolute; left: 0; top: 0; overflow: hidden;  z-index : 100; transform-origin: 375px 375px;}
.p1_zt{position: absolute; left: 50px; top: 50px;}
.pen_tips{position: absolute;left: 310px;top: 240px;}



/* p1 添砖页 */

.p1{ width: 100%; height: 750px; position: relative; overflow: hidden;}
.p1 .content{background: url("p1_bg.jpg") no-repeat left top/100% 100%; }
.p1 .content, .page01_v{position: absolute;  width: 100%; height: 100%;}

.p1_e0{position: absolute; left: -10px; top: 30px; }
.p1_cloud{position: absolute; left: 0px; top: 0px; width: 100%;}
.p1_sea{position: absolute; left: 0px; top: 404px; width: 100%;}
.p1_sea img, .p1_cloud img{width: 100%;}
.p1_w3{position: absolute; left: 182px; top: 477px;}
.p1_w2{position: absolute; left: 76px; top: 575px;}
.p1_w3 img{ transform: rotateY(180deg);}
.p1_w1{position: absolute; right: 0px; top: 605px;}
.p1_b3{position: absolute; left: 936px; top: 190px;}

.z2{position: absolute; left: 951px; top: 316px;}
.bridge2{position: absolute; left: 186px; top: 231px; width: 0; height: 519px; overflow: hidden;}

.bridge1{position: absolute; left: 180px; top: 218px;}
.z1{position: absolute; left: 214px; top: 344px;}
.ship{position: absolute;}
/* .ship1{position: absolute; left: 1128px; top: 424px;} */
.ship1{position: absolute; left: 1128px; top: 424px;}
.ship2{position: absolute; left: 945px; top: 302px; transform: ;}


.ship1 .wf{position: absolute; left: -56px; top: 48px;}
/* .ship2{position: absolute; left: 945px; top: 502px;} */

.ship2 .wf{position: absolute; left: 267px; top: 0px;}
.p1_b2{position: absolute; left: 0; top: 326px;}
.p1_b1{position: absolute; left: 0px; top: 420px;}
.p1_btn_start{position: absolute; left: 50%; margin-left: -140px; top: 596px;}

.p1_hd_tips{background: url(p1_hd_tips.png) no-repeat center top / 100% 100%; width: 298px; height: 91px; position: absolute; left: 50%; margin-left: -149px; top: 566px; }
.p1_hd_p{background: url(p1_hd_p.png) no-repeat center top / 100% 100%; width: 23px; height: 35px; position: absolute; left: 48px; top: 51px;}
.p1_hd_w{background: url(p1_hd_w.png) no-repeat center top / 100% 100%; width: 169px; height: 26px; position: absolute; left: 74px; top: 62px;}

.p1_progress_bg{background: url("p1_line_bg.png") no-repeat center top; background-size: 100% 100%; width: 243px; height: 19px; position: absolute; top: 20px; left: 30px;}
.p1_progress_box{width: 243px;height: 19px;border-radius: 7.5px;position: absolute;overflow: hidden;left: 0px;top: 0px;transform-origin: 50% 50%;box-sizing: border-box;}
.p1_progress{width: 0px; height: 100%; background:url("line.png") no-repeat center top/100% 100%; position: absolute;}
.p1_progress_boat{width: 85px;height: 30px;background:url("loading_ship.png") no-repeat center top/100% 100%;position: absolute;left: -20px;bottom: 0;}


/* p2 视频选择页 */
.p2{background: url(p2_bg.jpg) no-repeat center top / 100% 100%; width: 100%; height: 750px;overflow: hidden; position: relative;}
.p2 .content, .page02_v{position: absolute;  width: 100%; height: 100%;}
.p2 .btn_l{position: absolute; left: 389px; top: 247px; cursor: pointer;}
.p2 .btn_r{position: absolute; right: 446px; top: 140px; cursor: pointer;}
.p2 .btn_v4{position: absolute; left: 50%; top: 50%; margin-left: -128px; margin-top: 81px;}
.p2_bg2{position: absolute;left: 0; top: 0; width: 100%; height: 750px;}
.p2_bg2 img{width: 100%; height: 100%;}
.p2_j{position: absolute; left: 144px; top: 235px; width: 280px; height: 443px; 
    background-image: url(p2_j1.png);
    animation-name: j_gif;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

@keyframes j_gif{
    0%   { background-image: url(p2_j1.png); scale: 1;}
    50%  { background-image: url(p2_j2.png); scale: 1;}
}

.p2_d{position: absolute; right: 260px; top: 178px;width: 200px; height: 454px; 
    background-image: url(p2_d1.png);
    animation-name: d_gif;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;}
@keyframes d_gif{
    0%   { background-image: url(p2_d1.png); scale: 1;}
    50%  { background-image: url(p2_d2.png); scale: 1;}
}

.intro_jm{position: absolute; left: 272px; top: 20px;}
.intro_xm{position: absolute; right: 300px;  top: 20px;}

.p2_j_read{left: 5px;}
.p2_d_read{right: 100px;}
.btn_p3{position: absolute; left: 50%; margin-left: -179px; top: 457px;}


.video_tips{ position: absolute; right: -49%; bottom: 5%;}
.v3{position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none;}
.btn_jump{position: absolute; right: 5px; top: 5px; }


/* p3 画中画 */
.p3{position: relative; width: 100%; height: 750px;overflow: hidden;}
.btn_p3ddd{position: absolute;left: 50%;bottom: 5%;background: url("btn_ddd.png") no-repeat left top/100% 100%;width: 140px;margin-left: -70px;height: 159px;}
.btn_p4{position: absolute;left: 50%;bottom: 5%;background: url("btn_p4.png") no-repeat left top/100% 100%;width: 140px;margin-left: -70px;height: 140px;}

.hzh0_1 {
    -webkit-animation: hzh0_1 2s linear forwards;
    animation: hzh0_1 2s linear forwards;

}

@keyframes hzh0_1 {
    0% {
        -webkit-transform: scale(1) translate(0px, 0px);
        transform: scale(1) translate(0px, 0px);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        opacity: 1;
    }

    30% {
        -webkit-transform: scale(0.55) translate(0px, 0px);
        transform: scale(0.55) translate(0px, 0px);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0.1) translate(975px, 1840px);
        transform: scale(0.1) translate(975px, 1840px);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        opacity: 1;
    }
}

.hzh1_2  {
    -webkit-animation: hzh1_2 2s linear forwards;
            animation: hzh1_2 2s linear forwards;

    }
    @keyframes hzh1_2 {
    0% {
        -webkit-transform: scale(1) translate(0, 0);
                transform: scale(1) translate(0, 0);
        -webkit-transform-origin: 50% 50%;
                transform-origin: 50% 50%;
        opacity: 1;
    }
    30% {
        -webkit-transform: scale(0.5) translate(0, 0);
                transform: scale(0.5) translate(0, 0);
        -webkit-transform-origin: 50% 50%;
                transform-origin: 50% 50%;
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(0.1) translate(1335px, -1285px);
        transform: scale(0.1) translate(1335px, -1285px);
        -webkit-transform-origin: 50% 50%;
                transform-origin: 50% 50%;
        opacity: 1;
    }
    }

    .hzh2_3  {
        -webkit-animation: hzh2_3 2s linear forwards;
                animation: hzh2_3 2s linear forwards;
    
        }
        @keyframes hzh2_3 {
            0% {
            -webkit-transform: scale(1) translate(0px, 0px) ;
                    transform: scale(1) translate(0px, 0px) ;
            -webkit-transform-origin: 50% 50%;
                    transform-origin: 50% 50%;
            opacity: 1;
            }
            30% {
                -webkit-transform: scale(0.45) translate(0px, 0px);
                        transform: scale(0.45) translate(0px, 0px);
                -webkit-transform-origin: 50% 50%;
                        transform-origin: 50% 50%;
                opacity: 1;
            }
            100% {
            -webkit-transform: scale(0.1) translate(1140px, 745px);
                    transform: scale(0.1) translate(1140px, 745px);
            -webkit-transform-origin: 50% 50%;
                    transform-origin: 50% 50%;
            opacity: 1;
            }
        }

        .hzh3_4  {
            -webkit-animation: hzh3_4 2s linear forwards;
                    animation: hzh3_4 2s linear forwards;
        
            }
            @keyframes hzh3_4 {
                0% {
                -webkit-transform: scale(1) translate(0px, 0px) ;
                        transform: scale(1) translate(0px, 0px) ;
                -webkit-transform-origin: 50% 50%;
                        transform-origin: 50% 50%;
                opacity: 1;
                }
                30% {
                    -webkit-transform: scale(0.45) translate(0px, 0px);
                            transform: scale(0.45) translate(0px, 0px);
                    -webkit-transform-origin: 50% 50%;
                            transform-origin: 50% 50%;
                    opacity: 1;
                }
                100% {
                -webkit-transform: scale(0.1) translate(-160px, 745px);
                        transform: scale(0.1) translate(-160px, 745px);
                -webkit-transform-origin: 50% 50%;
                        transform-origin: 50% 50%;
                opacity: 1;
                }
            }

            .hzh4_5  {
                -webkit-animation: hzh4_5 2s linear forwards;
                        animation: hzh4_5 2s linear forwards;
            
                }
                @keyframes hzh4_5 {
                    0% {
                    -webkit-transform: scale(1) translate(0px, 0px) ;
                            transform: scale(1) translate(0px, 0px) ;
                    -webkit-transform-origin: 50% 50%;
                            transform-origin: 50% 50%;
                    opacity: 1;
                    }
                    30% {
                        -webkit-transform: scale(0.6) translate(0px, 0px);
                                transform: scale(0.6) translate(0px, 0px);
                        -webkit-transform-origin: 50% 50%;
                                transform-origin: 50% 50%;
                        opacity: 1;
                    }
                    100% {
                    -webkit-transform: scale(0.1) translate(1218px, 665px);
                            transform: scale(0.1) translate(1218px, 665px);
                    -webkit-transform-origin: 50% 50%;
                            transform-origin: 50% 50%;
                    opacity: 1;
                    }
                }



/* p4 分享页 */
.p4{background: url(p1_bg.jpg) no-repeat center top / 100% 100%; width: 100%; height: 750px; position: relative; overflow: hidden;}
.p4 .content{background: url("p1_bg.jpg") no-repeat left top/100% 100%; }
.page03_v{position: absolute;  width: 100%; height: 100%;}
.btn_again{position: absolute;left: 50%;margin-left: -400px;top: 503px;cursor: pointer;}
.btn_share{position: absolute;left: 50%;margin-left: 120px;top: 503px;cursor: pointer;}


.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_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: 35000px; height: 750px;} */
	.main-phone, .main-phone2, .audioBox, .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;}

}