html, body { height: 100%; }

body {
    font-size: 100%;
    color: #474545;
    font-weight: 400;
    background: #FFFEEE;
    overflow-x: hidden;
}

.wrapper {
    position: relative;
    float: left;
    width: 100%;
    height:100%;
    overflow: hidden;
    background-color: #fff;
}

.ocean {
    background: #c41c24;
    display:inline-block;
    height: 30%;
    width:100%;
    position:absolute;
    z-index:0;
    bottom:0;
    left:0;
}

.logo{
    position: absolute;
    background: url("../images/logo_20210329.png?v=1") no-repeat;
    width: 168px;
    height: 62px;
    margin-left: -64px;
    margin-top: -31px;
    left: 15%;
    top:5%;
}

.gull1{
    position: absolute;
    background: url("../images/404_gull1.png") no-repeat;
    width: 85px;
    height: 41px;
    margin-right: -42px;
    margin-top: -20px;
    right: 30%;
    top:15%;
}

.gull2{
    position: absolute;
    background: url("../images/404_gull2.png") no-repeat;
    width: 60px;
    height: 25px;
    margin-right: -30px;
    margin-top: 12px;
    right: 20%;
    top: 15%;
}

.toCode{
    position: absolute;
    background: url("../images/404_20210329.png?v=1") no-repeat;
    width: 126px;
    height: 186px;
    margin-right: -63px;
    margin-bottom: -93px;
    right: 20%;
    bottom: 15%;
}

.sorry{
    position: absolute;
    background: url("../images/404_sorry.png") no-repeat;
    width: 415px;
    height: 30px;
    margin-left: -207px;
    margin-top: -15px;
    left: 35%;
    top: 0;
}

.fof{
    position: absolute;
    background: url("../images/404.png") no-repeat;
    width: 210px;
    height: 90px;
    margin-top: -45px;
    margin-left: -105px;
    left: 25%;
    top: 23%;
}

.goHome{
    position: absolute;
    background: url("../images/404_goHome.png") no-repeat;
    width: 160px;
    height: 40px;
    bottom: 0;
    right: -200px;
}

.wave {
    background: url("../images/404_wave_1.png");
    background-repeat: no-repeat;
    position: absolute;
    top: -175px;
    left: 0;
    width: 4592px;
    height: 180px;
    animation: wave 12s cubic-bezier(0.35, 0.45, 0.65, 0.25) infinite;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.wave2{
    background: url("../images/404_wave_2.png");
    background-repeat: repeat-x;
    position: absolute;
    top: -150px;
    left: 0;
    width:4592px;
    height: 180px;
    animation: wave 5s cubic-bezier(0.35, 0.45, 0.65, 0.25) infinite;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

@keyframes wave {
    0% {
        transform: translate3D(0,0,0);
    }
    100% {
        transform: translate3D(-2296px,0,0);
    }
}

@-webkit-keyframes wave {
    0% {
        -webkit-transform: translate3D(0,0,0);
    }
    100% {
        -webkit-transform: translate3D(-2296px,0,0);
    }
}

.boat{
    background: url("../images/404_boat.png");
    width: 69px;
    height: 105px;
    position: absolute;
    left:  -69px;;
    top: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transform-origin: 78% 100%;
    transform-origin: 78% 100%;
}