.page-bg .fish{
    transition: all 3.8s ease;
}

.s1 .pic-wrap .logo-slogan{
    animation: showUp .3s ease 0.5s 1 normal forwards;
}

.s1 .pic-wrap .logo-flag{
    animation: showUp .3s ease 0.5s 1 normal forwards;
}

.s1 .pic-wrap .logo-dialog{
    animation: showUp .8s ease .8s 1 normal forwards;
}

.s1 .pic-wrap .logo-title{
    animation: showUp .8s ease 1.6s 1 normal forwards;
}

.s1 .pic-wrap .logo-title .mark{
    animation: showUp .3s ease-in 2.4s 1 normal forwards;
}

.s1 .pic-wrap .logo-title .mark1{
    animation-delay: 2.4s;
}

.s1 .pic-wrap .logo-title .mark2{
    
    animation-delay: 2.7s;
}

.s1 .pic-wrap .logo-title .mark3{
    animation-delay: 3s;
}

.s1 .pic-wrap .logo-fish{
    animation: showUp .6s ease 3.2s 1 normal forwards;
}

.block1 .bg-fish{
    transition: all 3.8s ease;
}

.block1 .pic{
    transition: all 2s ease;
    transform: scale(0.4);
}

.block2 .pic-wrap .fish{
    transform: scale(0.6);
    opacity: 0;
    transition: all 1s ease;
}


.block2 .pic-wrap .mark{
    transition: all .8s ease;
    transform: scale(0.1);
    opacity: 0;
    animation: floating 4s ease-in-out infinite;
}

.block2 .pic-wrap .mark1{
    animation-delay: .2s;
    transition-delay: 1.2s;
}
.block2 .pic-wrap .mark2{
    animation-delay: .8s;
    transition-delay: 1.8s;
}
.block2 .pic-wrap .mark3{
    animation-delay: 1.4s;
    transition-delay: .3s;
}
.block2 .pic-wrap .mark4{
    animation-delay: 1.8s;
    transition-delay: 2.1s;
}
.block2 .pic-wrap .mark5{
    animation-delay: 2s;
    transition-delay: 2.6s;
}
.block2 .pic-wrap .mark6{
    animation-delay: 0s;
    transition-delay: .5s;
}
.block2 .pic-wrap .mark7{
    transition-delay: .8s;
}
.block2 .pic-wrap .mark8{
    transition-delay: 2.3s;
}


.block4 .pic-wrap .bg{
    transition: all .7s ease;
    transition-delay: .3s;
}


.block4 .pic-wrap .animal{
    transition: all 1.5s ease;
    transition-delay: .7s;
}

.block4 .pic-wrap .dialog{
    transition: all 1.5s ease;
    transition-delay: .7s;
}

.block4 .pic-wrap .line-wrap{
    transition: all 2.5s linear;
    transition-delay: 2s;
}

.block6 .pic-wrap .bubble{
    animation: floating 5s linear .2s infinite alternate;
}

.block6 .pic-wrap .mark1{
}

.block6 .pic-wrap .mark2{
}

.block6 .pic-wrap .mark3{
    animation: floating 3.5s linear .4s infinite alternate;
}

.block6 .pic-wrap .mark4{
    animation: floating 3.8s linear .8s infinite alternate;
}

.block6 .pic-wrap .mark5{
    animation: floating 5s linear .7s infinite alternate;
}

.block6 .pic-wrap .mark6{
    animation: floating 6s linear 1s infinite alternate;
}

.block6 .pic-wrap .mark7{
    animation: floating 4s linear .4s infinite alternate;
}

.block6 .pic-wrap .mark8{
    animation: floating 7s linear .7s infinite alternate;
}

.block6 .pic-wrap .mark9{
    animation: floating 6s linear .4s infinite alternate;
}

.block7 .pic-wrap .pic1{
    opacity: 0;
    transform: scale(1);
    transition: all .8s ease;
    transition-delay: 0s;
}

.block7 .pic-wrap .pic2{
    opacity: 0;
    transform: scale(1);
    transition: all .8s ease;
    transition-delay: .8s;
}

.block7 .pic-wrap .pic3{
    opacity: 0;
    transform: scale(.4);
    transition: all .8s ease;
    transition-delay: 1.6s;
}

.block7 .pic-wrap.xshow .pic1,
.block7 .pic-wrap.xshow .pic2,
.block7 .pic-wrap.xshow .pic3{
    opacity: 1;
    transform: scale(1);
}