/* utility */
* {
    margin: 0;
    padding: 0;
}

.d-none {
    display: none;
}

.w-100 {
    width: 100%;
}

.container {
    box-sizing: border-box;
    width: 100%;
    padding: 0 15px;
    margin-right: auto;
    margin-left: auto;
}

.position-absolute {
    position: absolute;
}

.position-relative {
    position: relative;
}

@media only screen and (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media only screen and (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media only screen and (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media only screen and (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

body {
    background-color: #066aad;
    background-image: url(./2023images/img_rabbit_bg_under_phone.webp);
    background-attachment: fixed;
    background-position: bottom;
    background-size: 100%;
    background-size: cover;
}

@media only screen and (min-width: 768px) {
    body {
        background-image: url(./2023images/img_dragon_bg_under.webp);
    }
}

header {
    overflow: hidden;
    margin-bottom: -42vw;
}

@media only screen and (min-width: 768px) {
    header {
        margin-bottom: -19vw;
    }
}

#topBg {
    aspect-ratio: 1.6991;
    display: none;
}

#topBgMobile {
    aspect-ratio: 0.533;
}

@media only screen and (min-width: 768px) {
    #topBg {
        display: inline;
    }

    #topBgMobile {
        display: none;
    }
}

#watermotor-wrapper {
    position: relative;
}

#watermotor {
    position: absolute;
    margin-top: 38vw;
    right: 1vw;
    width: 44vw;
}

.shine {
    position: absolute;
    width: 5.5vw;
    animation: blinking 10s infinite;
}

#shineLift {
    top: 44vw;
    right: 39.5vw;
}

#shineRight {
    top: 52.25vw;
    right: 29.25vw;
}

@media only screen and (min-width: 768px) {
    #watermotor {
        margin-top: 16vw;
        right: 7vw;
        width: 34vw;
    }

    .shine {
        position: absolute;
        width: 6.5vw;
    }

    #shineLift {
        top: 19.5vw;
        right: 35.5vw;
    }

    #shineRight {
        top: 25.5vw;
        right: 28vw;
    }
}

@keyframes blinking {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    20% {
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    40% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    60% {
        opacity: 0;
    }

    70% {
        opacity: 1;
    }

    80% {
        opacity: 0;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}



#logo-wrapper {
    position: relative;
}

#logo {
    position: absolute;
    margin-top: 7vw;
    right: 25vw;
    width: 50vw;
    /* animation: boatFloat 1.3s alternate-reverse infinite ease-in-out; */
}


@media only screen and (min-width: 768px) {
    #logo {
        margin-top: 0.5vw;
        right: 35vw;
        width: 30vw;
    }
}

#item-wrapper {
    position: relative;
}

#item-wrapper img {
    position: absolute;
    display: none;
}

@media only screen and (min-width: 768px) {
    .item {
        width: 10vw;
        z-index: 100;
    }

    #item-wrapper img {
        position: absolute;
        display: inline;
    }

    #gogoro :nth-child(n+1) {
        left: 2.5vw;
        top: 29.5vw;
    }

    #motorcycle :nth-child(n+1),
    #bicycle :nth-child(n+1) {
        animation: rocking 7s infinite;
    }

    #gogoro :nth-child(1) {
        width: 6vw;
    }

    #gogoro :nth-child(2) {
        width: 7vw;
    }

    #gogoro :nth-child(3) {
        left: 1vw;
        top: 29vw;
        width: 9.5vw;
    }

    #motorcycle :nth-child(1) {
        left: 33.5vw;
        top: 20vw;
    }

    #motorcycle :nth-child(2) {
        left: 35vw;
        width: 9vw;
        top: 20.25vw;
    }

    #motorcycle :nth-child(3) {
        left: 32.5vw;
        top: 19vw;
        width: 13vw;
    }

    #massageChair :nth-child(1) {
        right: 24vw;
        top: 2vw;
        width: 7.5vw;
    }

    #massageChair :nth-child(2) {
        right: 24vw;
        width: 8vw;
        top: 1vw;
    }

    #massageChair :nth-child(3) {
        right: 22.5vw;
        top: 0.5vw;
        width: 10.5vw;
    }

    #bicycle :nth-child(1) {
        left: 47vw;
        top: 24vw;
    }

    #bicycle :nth-child(2) {
        left: 47vw;
        width: 9vw;
        top: 22.5vw;
    }

    #bicycle :nth-child(3) {
        left: 46vw;
        top: 22vw;
        width: 11.5vw;
    }
}


@keyframes rocking {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}




/* nav buttons */
#navbuttonWrapper {
    list-style: none;
    padding: 0 15px;
    display: flex;
    flex-wrap: wrap;
}

.navWrapper {
    position: absolute;
    /* border: 1px solid blue; */
    width: 100%;
}

.navWrapper[page="1"] {
    display: none;
}

.navWrapper[page="2"] {
    top: 10.7%;
}

@media only screen and (min-width: 768px) {
    #navbuttonWrapper {
        padding: 0 10%;
    }

    .navWrapper[page="1"] {
        display: block;
        bottom: 21.3%;
    }

    .navWrapper[page="2"] {
        top: 7.6%;
    }
}

.navButton {
    width: 50%;
    margin-top: 0.5vw;
    display: flex;
    justify-content: center;
    position: relative;
    align-content: center;
}

.navButton:not([data-startat]) {
    cursor: pointer;
}

@media only screen and (min-width: 768px) {
    .navButton {
        width: 25%;
    }
}

.navButtonImg {
    width: 100%;
    transition: 0.7s;
    aspect-ratio: 1.4961;
}

.navButton>.navButtonImg:nth-child(2) {
    position: absolute;
    opacity: 0;
    height: 100%;
}

.navButton:not([data-startat]):hover>.navButtonImg:first-child,
.navButton.active>.navButtonImg:first-child {
    opacity: 0;
}

.navButton:not([data-startat]):hover>.navButtonImg:nth-child(2),
.navButton.active>.navButtonImg:nth-child(2) {
    opacity: 1;
}

.navButton[data-startat]>.navButtonImg {
    filter: brightness(0.3);
}

.comingSoon {
    display: none;
    position: absolute;
    top: 27%;
    width: 100%;
    transform: scale(0.5);
}

.navButton[data-startat]>.comingSoon {
    display: block;
}

/* content */
#firstContentImg {
    aspect-ratio: 1;
}

.contentWrapper {
    display: none;
    position: relative;
}

.contentWrapper[active] {
    display: block;
}

/* hiddenLink  */
.guideButton,
.hiddenLink {
    position: absolute;
    aspect-ratio: 10;
    cursor: pointer;
    border: none;
    display: block;
    width: 51%;
    left: 28%;

    /* for debug */
    /* background: rgba(182, 135, 75, 0.4); */
}

.hiddenLink[link="1"] {
    bottom: 22.3%;
    left: 27%;
}


.hiddenLink[link="2"] {
    bottom: 28.5%;
    left: 25%;
}


.hiddenLink[link="3"] {
    bottom: 27.4%;
    left: 25%;
}

.subPageButton img {
    pointer-events: none;
}

.subPage.active[data-subpage="4-1"]~.hiddenLink[link="4"] {
    bottom: 13.9%;
    left: 22%;
    width: 47%;
}

.subPage.active[data-subpage="4-2"]~.hiddenLink[link="4"] {
    bottom: 29.9%;
}


.subPage.active[data-subpage="5-1"]~.hiddenLink[link="5"] {
    bottom: 7%;
}

.subPage.active[data-subpage="5-2"]~.hiddenLink[link="5"] {
    bottom: 6.9%;
}

.hiddenLink[link="6"] {
    bottom: 8.1%;
}

.hiddenLink[link="7"] {
    bottom: 7.3%;
}


.hiddenLink[link="8"] {
    bottom: 38.4%;
}

.guideButton[page] {
    width: 20%;
    aspect-ratio: 4;
    left: 41.3%;
}

.guideButton[page="1"] {
    display: none;
}

.guideButton[page="2"] {
    bottom: 32.7%;
}

.guideButton[page="3"] {
    bottom: 31.7%;
}

@media only screen and (min-width: 768px) {

    .guideButton[page],
    .hiddenLink {
        position: absolute;
        aspect-ratio: 10;
        cursor: pointer;
        /* border: solid 1px red; */
        display: block;
        width: 31%;
        left: 20.7%;
    }

    .hiddenLink[link="1"] {
        bottom: 13.2%;
        left: 18.5%;
        aspect-ratio: 11;
    }

    .hiddenLink[link="2"] {
        bottom: 23.5%;
        left: 21%;
    }

    .hiddenLink[link="3"] {
        bottom: 21.2%;
        left: 20.4%;
    }

    .subPage.active[data-subpage="4-1"]~.hiddenLink[link="4"] {
        bottom: 11%;
        width: 32%;
        left: 21%;
    }

    .subPage.active[data-subpage="4-2"]~.hiddenLink[link="4"] {
        bottom: 33.4%;
    }


    .subPage.active[data-subpage="5-1"]~.hiddenLink[link="5"] {
        bottom: 9.2%;
    }

    .subPage.active[data-subpage="5-2"]~.hiddenLink[link="5"] {
        bottom: 9.2%;
    }

    .hiddenLink[link="6"] {
        bottom: 9.1%;
    }

    .subPage.active[data-subpage="7-1"]~.hiddenLink[link="7"] {
        bottom: 9.1%;
    }

    .subPage.active[data-subpage="7-2"]~.hiddenLink[link="7"] {
        bottom: 9.1%;
    }

    .hiddenLink[link="8"] {
        bottom: 29.6%;
    }


    .guideButton[page="1"] {
        display: block;
        top: 7.1%;
        width: 23%;
        left: 23%;
    }

    .guideButton[page="2"] {
        bottom: 27.8%;
        width: 12%;
        left: 29.9%;
        aspect-ratio: 4;
    }

    .guideButton[page="3"] {
        display: none;
    }

}


/* sub page  */
.subPageButtonsWrapper {
    position: absolute;
    width: 100%;
    aspect-ratio: 1;
}

.subPageButton {
    cursor: pointer;
    /* filter: brightness(0.5); */
}

/* .subPageButton.active {
    filter: brightness(1);
}

.subPageButton[disabled] {
    filter: brightness(0.2);
    cursor: auto;
} */

.subPage {
    display: none;
}

.subPage.active {
    display: block;
}

[data-subpage="3-1"].subPageButton {
    left: 5%;
}

[data-subpage="3-2"].subPageButton {
    left: 36%;
}

[data-subpage="3-3"].subPageButton {
    left: 67%;
}


[data-subpage^="3-"].subPageButton {
    position: absolute;
    width: 28%;
    top: 135%;
}


[data-subpage^="4-"].subPageButton {
    position: absolute;
    width: 60%;
    left: 21%;
}

[data-subpage="4-1"].subPageButton {
    top: 55%;
}

[data-subpage="4-2"].subPageButton {
    top: 72%;
}

[data-subpage^="5-"].subPageButton {
    position: absolute;
    width: 60%;
    left: 21%;
}

[data-subpage="5-1"].subPageButton {
    top: 55%;
}

[data-subpage="5-2"].subPageButton {
    top: 72%;
}

[data-subpage^="7-"].subPageButton {
    position: absolute;
    width: 60%;
    left: 21%;
}

[data-subpage="7-1"].subPageButton {
    top: 55%;
}

[data-subpage="7-2"].subPageButton {
    top: 72%;
}


@media only screen and (min-width: 768px) {
    [data-subpage^="3-"].subPageButton {
        width: 20%;
        top: 94%;
    }

    [data-subpage="3-1"].subPageButton {
        left: 8%;
    }

    [data-subpage="3-2"].subPageButton {
        left: 39.5%;
    }

    [data-subpage="3-3"].subPageButton {
        left: 71%;
    }

    [data-subpage^="4-"].subPageButton {
        width: 30%;
        top: 31.5%;
    }

    [data-subpage="4-1"].subPageButton {
        left: 17%;
    }

    [data-subpage="4-2"].subPageButton {
        left: 55%;
    }

    [data-subpage^="5-"].subPageButton {
        width: 30%;
        top: 31.5%;
    }

    [data-subpage="5-1"].subPageButton {
        left: 17%;
    }

    [data-subpage="5-2"].subPageButton {
        left: 55%;
    }


    [data-subpage^="7-"].subPageButton {
        width: 30%;
        top: 32%;
    }

    [data-subpage="7-1"].subPageButton {
        left: 17%;
    }

    [data-subpage="7-2"].subPageButton {
        left: 55%;
    }

}

/* footer */
footer {
    margin-top: 30px;
    border-top: 1px solid #ffea00;
    background: #003732;
    color: #fff;
    line-height: 1.5;
    padding: 20px 0px;
    /* reserver space for links float in screen bottom */
    padding-bottom: 20vw;
}

@media only screen and (min-width: 768px) {
    footer {
        padding-bottom: 20px;
    }
}

#footerContentWrapper {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
}

@media only screen and (min-width: 768px) {
    #footerContentWrapper {
        flex-direction: row;
    }
}

#ageLimitIcon {
    margin-top: 0.5rem;
}

@media only screen and (min-width: 768px) {
    #ageLimitIcon {
        margin-top: 0;
    }
}

/* float contents */
#desktopBackToTop {
    position: fixed;
    cursor: pointer;
    transform: scale(0.8);
    right: 2.8rem;
    bottom: 0px;
    display: none;
}

@media only screen and (min-width: 768px) {
    #desktopBackToTop {
        display: block;
    }
}