@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; }
body{background: #000;}

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


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

.bg{
     background: url("bg_p2.png") no-repeat 699px top /auto 100%,
     url("bg_p3.png") no-repeat 6773px top /auto 100%,
     url("bg_p4.png") no-repeat 12332px top /auto 100%,
     url("bg_p5.png") no-repeat 19122px top /auto 100%,
     url("bg_p6.png") no-repeat 24411px top /auto 100%,
     url("bg_p7.png") no-repeat 29899px top /auto 100%,

    
     url("bg4.jpg") left top repeat-x;
     width: 42700px;
     height: 750px;
     position: relative;
     overflow: hidden;
     display: flex;
     }
.index100{width: 42700px; height: 750px; position: absolute; left: 0; top: 0; overflow: hidden;  z-index : 100; transform-origin: 375px 375px;}


/* p0 加载页 */
.p0{ background:  url("bg4.jpg") left top no-repeat;
    display: flex;
}
.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%;display: flex;}
.start{background: url("bg4.jpg") left top no-repeat;}
.p1{  width: 1500px; height: 750px; position: relative; overflow: hidden;}
.p1_title_bg{position: absolute; left: 96px; top: 43px;}
.p1_title{position: absolute; left: 239px; top: 106px;}
.go{position: absolute; left: 113px; top: 392px;}
.p1_rudder{position: absolute; left: 405px; top: 399px;}
.p1_tips_click{position: absolute; left: 461px; top: 603px;}
.p1_tips_left{position: absolute; left: 1200px; top: 632px;}

.rudder_box{position: relative; width: 858px; height: 100%;}
.keepGoing{position: absolute; left: 171px; top: 247px;}
.rudder{position: absolute; left: 107px; top: 399px;}
.rudder_tips_click{position: absolute; left: 173px; top: 613px;}

.p2{/* width: 5445px; */}
.intro_box{position: relative; left: 0; top: 0; width: 1300px; height: 100%;}
.intro{position: absolute;left: 167px;top: 0;height: 100%;display: flex;align-items: center;}
.intro_content{
    position: relative;
}
.intro_tips{position: absolute;right: 230px;bottom: 50px;}
.intro_btn{position: absolute;right: 0;bottom: 0;width: 274px;height: 236px;cursor: pointer;}

.p3{  width: 5445px; }


.ship_box{position: relative;height: 750px;overflow: hidden;display: flex;justify-content: space-between;align-items: center;}
.ship{position: relative;background: url("fishShip.png") no-repeat center bottom;width: 1033px;height: 750px;overflow: hidden;display: flex;justify-content: center;align-items: flex-end;}
.before,
.after{position: absolute; }
.fishNet{position: absolute; left: 50%; top: 50%; background: url("fishNet.png") no-repeat center top / 493px 682px; width: 493px; height: 682px; margin-left: -255px; margin-top: -341px; cursor: pointer;}

/* gif */
.fish_gif{position: absolute;left: 50%;top: 50%;width: 654px;height: 654px;margin-left: -332px;margin-top: -320px;}
.fish_gif, .fish{display: none;}

.fish_gif{position: absolute;left: 50%;top: 50%;width: 654px;height: 654px;margin-left: -332px;margin-top: -320px; background: url("by_sprite.png") no-repeat left top; background-size: auto 100%; display: none;}

/* 序列帧动画 - 30帧横向排列 */
 .fish_gif.active{
    animation: fish-sprite 1.5s steps(60) forwards;
}

@keyframes fish-sprite {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -39240px 0; /* 327px * 60帧 = 19620px */
    }
}

.fish{display: none;} 

.catch_tips{position: absolute; left: 400px; top: 550px; background: url("cathc_tips_click.png") no-repeat center top; width: 285px; height: 118px; margin-left: -104px; margin-top: -74px;}

.other{position: relative;width: 1300px;}
.ship2{background: url("icon_ship2.png") no-repeat center center/100% 100%;width: 730px;height: 443px;position: absolute;top: 300px;left: 342px;}
.other_wz{position: absolute; top: 72px; width: 100%; margin: 0 auto; text-align: center;}
.wz_tips_click{position: absolute; left: 50%; bottom: 15px; background: url("wz_tips_click.png") no-repeat center top; width: 394px; height: 85px; margin-left: -196px; }
.wz_tips_click2{position: absolute; left: 50%; bottom: 15px; background: url("wz_tips_click2.png") no-repeat center top; width: 649px; height: 85px; margin-left: -324.5px; }


.p9{position: relative;height: 100%;display: flex; width: 4767px;}
.p9_wz1{position: absolute; left: 154px; top: 101px; }
.p9_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;} */

/* 分享盒设置 */
.share_box, .video_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;}

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


/* 竖屏 */
@media screen and (orientation: portrait) {
    .main-phone{ width: 42700px; height: 750px;}
	.main-phone, .video_frame, .share_poster, .index100, .main-phone2, .audioBox, .tips{-webkit-transform:rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg);}   

    .tips{position: fixed; right: 50%; margin-right: 0px; bottom: 22%;}
}
/* 横屏 */
@media screen and (orientation: landscape) {
    .main-phone{ width: 42700px; 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: 40%;} */

}