*{
    -webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.contentdew{
    width: 100%;
    position: absolute;
    bottom: 10%;
    left: 0;
}

.contentdew.five{
    bottom: -5%;
}

.wallpaper{
    width: 100%;
}
.wallpaper > img{
    min-height: 894px;
}
img{
    max-width: 100%;
    object-fit: cover;
    vertical-align: top;
}

.betweenpage{
    width: 100%;
    position: absolute;
    margin: 0;
    padding: 0%;
}
.p3{
    transform: scale(1.1);
    top: -1.75%;
    left: -3%;
}
.p4{
    bottom: -44%;
}
.p5{
    position: absolute;
    top: -470px;
    /* transition: 10s linear; */
}
.p6{
    position: absolute;
    bottom: -7%;
    transform: rotate(-.175deg);
}
.textpage4{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.fish-gallery {
    width: calc(100% + 200px);
    position: relative;
    display: grid;
    grid-auto-flow: column;
    gap: 100px;
    margin: 1rem 0;
    /* left: -200px; */
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.fish-gallery::-webkit-scrollbar {
    display: none;
}

.fish {
    position: relative;
    height: 400px;
    aspect-ratio: 1/1;
}
.fish > img{
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.moreinfo{
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
}
.moreinfo > img{
    width: 150px;
}

.fish-card{
    /* background: rgba(0, 0, 0, 0.5); */
    width: 100%;
    height: 100%;
    position: absolute;
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    transition: all 1s;
    visibility: hidden;
    opacity: 0;
    /* ซ่อนก่อน กดแล้วค่อยแสดง */
    justify-content: center;
    z-index: 100;
}

.data-card > img{
    position: relative;
    width: 950px;
    height: auto;
    margin: auto;
}

.arrow{
    width: 150px;
    height: 150px;
    position: relative;
}

.arrow.right{
    transform: rotateY(180deg)
}

.bgCard{
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}
 /* page 5  */

.textpage5{
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 1rem;
    padding: 0 5% 33% 0;
    color: white;
}
.textpage5 > div{
    display: flex;
    flex-direction: column;
    align-items: end;
}
.textpage5  > button{
    color: white;
}

/* button{
    transition: all .5s;
} */

/* animate */

.animate{
    width: 100%;
    height: 100%;
    position: absolute;
}

.bubbled{
    position: absolute;
}
.b1{
    width: 200px;
    left: 0;
    top: 50%;
    /* transform: scaleX(-1); */
    animation: movebubble 5s 2s linear infinite;
}
.b2{
    width: 180px;
    right: 0;
    top: 50%;
    animation: movebubble 5s 2s linear infinite;
}   
@keyframes bubbleX_1{
    0%{transform: translateX(0);}
    100%{transform: translateX(60px);}
}
@keyframes bubbleX_2{
    0%{transform: translateX(0);}
    100%{transform: translateX(-65px);}
}
@keyframes bubbleY_1{   
    0%{
        transform: translateY(0);
        opacity: 0;
    }
    50%{
        transform: translateY(-5);
        opacity: 1;
    }
    100%{
        transform: translateY(-45px);
        opacity: 0;
    }
}
@keyframes bubbleY_2{   
    0%{
        transform: translateY(0);
        opacity: 0;
    }
    50%{
        transform: translateY(-5);
        opacity: 1;
    }
    100%{
        transform: translateY(95px);
        opacity: 0;
    }
}

.fish-bg{
    position: absolute;
    animation: fishmove 10s linear infinite;
}
.lightdew{
    position: absolute;
    top: -100px;
    right: -100px;
    opacity: .3;
    animation: lightmove 5s linear infinite alternate;
}
.diver{
    position: absolute;
    /* top: -20%; */
}
.d1{
    animation: diver1 5s linear infinite alternate;
}
.d2{
    animation: diver2 7s linear infinite alternate;
}
.d3{
    animation: diver3 8s linear infinite alternate;
}

@keyframes fishmove{
    0%{
        opacity: 0;
        transform: translate(200px, 200px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: translate(-100px, -100px);
    }
}

@keyframes lightmove{
    0%{
        /* transform: rotate(-5deg);
        transform-origin: 100% 0%; */
        transform: translateX(-120px);
    }
    100%{
        /* transform: rotate(5deg);
        transform-origin: 100% 0%; */
        transform: translateX(120px);
    }
}
@keyframes diver1{
    0%{
        transform: translate(0px, 0px);
    }
    100%{
        transform: translate(20px, -25px);
    }
}
@keyframes diver2{
    0%{
        transform: translate(0px, 0px);
    }
    100%{
        transform: translate(20px, 25px);
    }
}
@keyframes diver3{
    0%{
        transform: translate(0px, 0px);
    }
    100%{
        transform: translate(30px, -10px);
    }
}

.fish-dec{
    position: absolute;
}
.nemo1{
    top: 68%;
    left: 12%;
    width: 70px;
    transform: scaleX(-1) rotateZ(-20deg);
    animation: nemo 4s 1s ease-in-out infinite alternate;
}
.nemo2{
    top: 70%;
    left: 5%;
    width: 100px;
    transform: scaleX(-1) rotateZ(-45deg);
    animation: nemo 6s ease-in-out infinite alternate;
}
.angel1{
    top: 77%;
    left: 38%;
    width: 40px;
    animation: angel 5s ease-in-out infinite alternate ;
}
.angel2{
    top: 79%;   
    left: 32%;
    width: 75px;
    animation: angel 4.5s ease-in-out infinite alternate ;

}
.angel3{
    top: 82%;
    left: 39%;
    width: 50px;
    animation: angel 4s ease-in-out infinite alternate ;

}
.tiger1{
    top: 68%;
    left: 84%;
    width: 125px;
    transform: rotateZ(-5deg);
    animation: tiger 6s ease-in-out infinite alternate;
}

@keyframes nemo{
    0%{
        transform: translate(0,0,0) scaleX(-1) rotateZ(-30deg);
    }
    100%{
        transform: translate(20px, -10px) scaleX(-1) rotateZ(-30deg);
    }
}
@keyframes angel{
    0%{
        transform: translate(0,0,0);
    }
    100%{
        transform: translate(-20px, 25px);
    }
}
@keyframes tiger{
    0%{
        transform: translate(0,0,0) rotateZ(-5deg);
    }
    100%{
        transform: translate(20px, 10px) rotateZ(0deg);
    }
}

.b3{
    width: 5%;
    top: 58%;
    left: 3%;
    animation: bubble 18s ease-in-out infinite alternate;
}
.b4{
    width: 5%;
    top: 35%;
    left: 28%;
    animation: diver1 7s linear infinite alternate,
    bubble 5s ease-in-out infinite alternate;
}
.b5{
    width: 7%;
    top: 66%;
    left: 28%;
    animation: angel 8s ease-in-out infinite alternate;
}
.b6{
    width: 7%;
    top: 75%;
    left: 70%;
    animation: bubble 15s ease-in-out infinite alternate;
}
.b7{
    width: 7%;
    top: 65%;
    left: 90%;
    animation: bubble 9s ease-in-out infinite alternate;
}
@keyframes bubble{
    0%{
        transform: translate(0,0);
        opacity: 0;
    }
    50%{
        transform: translate(20px, -30px);
        opacity: .7;
    }
    100%{
        transform: translate(0,-60px);
        opacity: 1;
    }
}

button:active{
    background: none;
}