footer {
    position: relative;
    z-index: 5;
}

body::-webkit-scrollbar {
    display: none;
}

.hide {
    display: none;
}

.full {
    width: 100%;
}

.content.PC section {
    position: relative;
    min-height: 100dvh;
}

.bg {
    position: absolute;
    width: 100%;
    overflow: hidden;
    min-height: 100dvh;
    bottom: 0;
    inset: 0;
    aspect-ratio: 1920 / 960;
}



.leftContent {
    background: url(../images/game/kvL2.png);
    /* background: url(../images/game/kvL.png); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    /* width: 70%; */
    width: 63%;

    clip-path: polygon(0 0,
            100% 0,
            80% 100%,
            0 100%);
    transition: width 0.4s ease,
        background-position 0.4s ease,
        left 0.4s ease;

}

/* .rightWrapper {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 60%;
    transition: width 0.4s ease, right 0.4s ease;
    overflow: hidden;

}

.rightWrapper:hover {
    width: 70%;
} */

.rightBg {
    background: url(../images/game/kvR.jpg);
    background-position: 70% center;

    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;


    width: 100%;

    clip-path: polygon(40% 0,
            100% 0,
            100% 100%,
            0 100%);
}

.rightContent {
    /* background: url(../images/game/kvR.jpg);
    background-position: 70% center;

    background-repeat: no-repeat;
    background-size: cover;*/
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;


    width: 60%;

    clip-path: polygon(40% 0,
            100% 0,
            100% 100%,
            0 100%);

    transition:
        width 0.4s ease,
        background-position 0.4s ease,
        right 0.4s ease;

    overflow: hidden;
}



.svgWrap {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}



.isSvg {
    width: 100%;
    height: 100%;
    display: block;
}

/* 左邊區塊 */
.leftBox {
    position: relative;
    height: 100dvh;
    max-width: 1000px;
}

/* logo */
.logoSection {
    position: relative;
    top: 0;
    height: 100%;

}

/* 左上的光 */
.leftLight {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 1139.889px;
    background: radial-gradient(50% 50% at 50% 50%, #C74EFF 0%, rgba(255, 255, 255, 0.00) 100%);
    background-blend-mode: lighten;
    z-index: 2;
    top: -77%;
    left: -65%;
    transition: transform 0.35s cubic-bezier(.4, 0, .2, 1);

}

.leftWhite {
    position: absolute;
    left: -2%;
    z-index: 1;
    top: -2%;
    width: 44%;
    transition: transform 0.35s cubic-bezier(.4, 0, .2, 1);
}

.leftBlack {
    position: absolute;
    left: 56.5%;
    width: 22%;
}

.rightBlack {
    position: absolute;
    left: 60.5%;
    width: 25%;
}

.logobg {
    width: 100%;
    transition: transform 0.35s cubic-bezier(.4, 0, .2, 1);
}

.leftBox .logo {
    position: absolute;
    top: 3%;
    left: 19%;
    z-index: 1;
    width: 88%;
    transition: transform 0.35s cubic-bezier(.4, 0, .2, 1);
}


/* 左右共用英雄區塊 */
.heroSection {
    position: absolute;
    top: 0;
    height: 100dvh;
    width: 100%;
}

/* 左英雄 */
.leftBox .hilda {
    top: 50%;
    position: absolute;
    left: 3%;
    width: 85%;
    z-index: 0;
    transition: transform 0.35s cubic-bezier(.4, 0, .2, 1);

    --y-offset: 6%;
    transform: translateY(calc(-50% + var(--y-offset)));
}

.leftBox .amaia {
    top: 50%;
    position: absolute;
    width: 94%;
    z-index: 1;
    left: 1%;
    transition: transform 0.35s cubic-bezier(.4, 0, .2, 1);

    --y-offset: 10%;
    transform: translateY(calc(-50% + var(--y-offset)));
}


.leftBox .rock {
    top: 50%;
    position: absolute;
    left: -39%;
    z-index: 2;
    width: 100%;
    transition: transform 0.35s cubic-bezier(.4, 0, .2, 1);

    --y-offset: 18%;
    transform: translateY(calc(-50% + var(--y-offset)));
}

.leftBox .fox {
    top: 50%;
    position: absolute;
    z-index: 1;
    width: 100%;
    transition: transform 0.35s cubic-bezier(.4, 0, .2, 1);

    --y-offset: 15%;
    transform: translateY(calc(-50% + var(--y-offset)));
}

.leftBox .kkbg {
    top: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, #FFE58E 0%, rgba(255, 255, 255, 0.00) 100%);
    background-blend-mode: lighten;
    position: absolute;
    left: -45%;
    z-index: 2;

    --y-offset: 50%;
    transform: translateY(calc(-50% + var(--y-offset)));
}

.leftBox .kk {
    top: 50%;
    position: absolute;
    z-index: 3;
    width: 77%;
    left: -32%;
    transition: transform 0.35s cubic-bezier(.4, 0, .2, 1);

    --y-offset: 38%;
    transform: translateY(calc(-50% + var(--y-offset)));
}

.leftBox .leftTriangle {
    top: 50%;
    position: absolute;
    z-index: 5;
    width: 25%;

    --y-offset: 127%;
    transform: translateY(calc(-50% + var(--y-offset)));
}

/* 左邊hover加上動畫 */
.leftWrapper:hover .logobg {
    transform: translateX(40px) translateY(20px) scale(1.1) rotate(1deg);
}

.leftWrapper:hover .leftWhite {
    transform: translateX(40px) translateY(20px) scale(1.1) rotate(1deg);
}

.leftWrapper:hover .amaia {
    transform: translateX(50px) translateY(calc(-50% + var(--y-offset) - 0px)) rotate(8deg);
}

.leftWrapper:hover .kk {
    transform: translateX(100px) translateY(calc(-50% + var(--y-offset) - 0px)) scale(1.05);
}


.leftWrapper:hover .rock {
    transform:
        translateX(60px) translateY(calc(-50% + var(--y-offset) - 20px)) scale(1.05);
}

.leftWrapper:hover .fox {
    transform:
        translateX(30px) translateY(calc(-50% + var(--y-offset) - 0px));
}

.leftWrapper:hover .logo {
    transform: translateX(50px) translateY(0px) scale(1);
}

.leftWrapper:hover .hilda {
    transform: translateX(30px) translateY(calc(-50% + var(--y-offset) - 0px)) scale(1);
}

/* 左右遮罩 */
.mask {
    opacity: 0.6;
    background: #000;
    position: absolute;
    height: 100dvh;
    width: 100%;
    z-index: 6;
}


/* 右邊區塊 */
.rightBox {
    position: relative;
    height: 100dvh;

    clip-path: polygon(40% 0,
            100% 0,
            100% 100%,
            0 100%);
}

.rightBox .tom {
    position: absolute;
    right: 15%;
    top: 13%;
    z-index: 3;
    width: 19%;
    transition: transform 0.35s cubic-bezier(.4, 0, .2, 1);
}


.rightBox .field {
    position: absolute;
    right: 37%;
    top: 15%;
    z-index: 3;
    width: 23%;
    transition: transform 0.35s cubic-bezier(.4, 0, .2, 1);
}

.rightBox .sandy {
    position: absolute;
    right: 10%;
    top: 18%;
    z-index: 3;
    width: 32%;
    transition: transform 0.35s cubic-bezier(.4, 0, .2, 1);
}


.rightBox .bonnie {
    position: absolute;
    right: 23%;
    z-index: 3;
    bottom: 2%;
    width: 52%;
    transition: transform 0.35s cubic-bezier(.4, 0, .2, 1);
}

.rightBox .kkbg-1 {
    /* 
    width: 923.993px;
    height: 923.03px; */
    width: 100%;
    height: 100%;
    border-radius: 923.993px;
    background: radial-gradient(50% 50% at 50% 50%, #FFE58E 0%, rgba(255, 255, 255, 0.00) 100%);
    background-blend-mode: lighten;

    position: absolute;
    bottom: -27%;
    right: -40%;
    z-index: 2;
}

.rightBox .kk {
    width: 37%;
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 18%;
    transition: transform 0.35s cubic-bezier(.4, 0, .2, 1);
}

.rightBox .logo {
    position: absolute;
    bottom: 0;
    z-index: 4;
    right: 0;
    width: 77%;

    transition: transform 0.35s cubic-bezier(.4, 0, .2, 1);
}

.rightBox .kkbg-2 {
    width: 100%;
    height: 100%;
    border-radius: 945.017px;
    background: radial-gradient(50% 50% at 50% 50%, #FFE58E 0%, rgba(255, 255, 255, 0.00) 100%);
    background-blend-mode: lighten;

    position: absolute;
    bottom: -44%;
    right: -40%;
    z-index: 1;
}

.boom {
    position: absolute;
    top: 50%;
    right: 0;
    width: 90%;

    --y-offset: 8%;
    transform: translateY(calc(-50% + var(--y-offset)));
}


/* 右邊hover加上動畫 */
.rightWrapper:hover .boom {
    /* animation: gameHeroBoomRight .3s ease-in-out forwards; */
    /* transform:  translateX(-50px) scale(1.1); */
    transform: translateX(-50px) translateY(calc(-50% + var(--y-offset) - 0px)) scale(1.1);
}

.rightWrapper:hover .logo {
    transform: translateX(-50px) translateY(0px) scale(1.05);
    /* animation: gameHeroLogoRight .3s ease-in-out forwards; */
}

.rightWrapper:hover .kk {
    transform: translateX(-10px) translateY(-10px) rotate(10deg) scale(1.1);
    /* animation: gameHeroKKRight .3s ease-in-out forwards; */
}

.rightWrapper:hover .bonnie {
    transform: translateX(-10px) translateY(-10px) rotate(10deg) scale(1.1);
    /* animation: gameHeroKKRight .3s ease-in-out forwards; */
}


.rightWrapper:hover .sandy {
    transform: translateX(-100px) translateY(-80px) rotate(-30deg);
}

.rightWrapper:hover .field {
    transform: translateX(-50px) translateY(-50px) rotate(10deg);
    /* animation: gameHeroFieldRight .3s ease-in-out forwards; */
}

.rightWrapper:hover .tom {
    transform: translateX(-40px) translateY(-50px) rotate(80deg);
    /* animation: .3s gameHeroTomRight ease-in-out forwards; */
}

.w70 {
    width: 70%;
}

.w56 {
    width: 58%;
}

.w75 {
    width: 75%;
}

.position {
    background-position: 30% center;
}

.goRight {
    right: -3%;
}

.goLeft {
    left: -5%;
}

.blur {
    backdrop-filter: blur(3px);
}

.pointerNone {
    pointer-events: none;
}

/* 按鈕 */
.bookingBtnL {
    position: absolute;
    z-index: 6;
    top: 16%;
    left: 9%;
    opacity: 0;
    transform: translate(120px, 0) scale(1);
    width: 30%;
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

.hoverLeft {
    position: absolute;
    z-index: 6;
    width: 26%;
    height: 29%;
    left: 44%;
    top: 61%;
}

.bookingBtnR {
    position: absolute;
    z-index: 6;
    bottom: 6%;
    right: 18%;
    opacity: 0;
    transform: translate(-120px, -35px) scale(1);
    transition: opacity 0.4s ease, transform 0.4s ease;
    width: 30%;
    pointer-events: none;
}

.hoverRight {
    position: absolute;
    z-index: 6;
    width: 26%;
    height: 29%;
    left: 27%;
    top: 32%;
}

.btnShow {
    opacity: 1;
    transform: translate(0, 0) scale(1.1);

}

.content.pad {
    display: none;
}

.topHeroPhone {
    display: none;
}

@media (max-width:1800px) {

    /* 測試維持16:9的 */
    html,
    body {
        background-color: #0A1318;
        /* background-image: url(../images/background/新版底圖.jpg);
        background-position: center;
        width: 100%; */

    }


    .PC {
        width: 100vw;
        /* height: 100vh; */
        display: flex;
        justify-content: center;
        align-items: flex-start;
        overflow: hidden;
    }

    .content.PC section {
        aspect-ratio: 1920 / 960;
        width: min(100vw, calc(100vh * 1920 / 960));
        height: auto;
        max-height: 100vh;
        position: relative;
        min-height: auto;
    }

    .bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        min-height: auto;
        aspect-ratio: auto;
    }

    /* 測試維持16:9的 ^ */


    .leftBox {
        height: 100%;
        width: 80%;
    }

    .heroSection {
        height: 100%;
    }

    .rightBox {
        height: 100%;
    }

    .logobg {
        left: -2%;
        position: absolute;
    }


}

@media (max-width:1600px) {}

@media (max-width:1440px) {}

@media (max-width:1200px) {}

@media (max-width:1024px) {
    .content.PC {
        display: none;
    }

    .content.pad {
        display: block;
        position: relative;
        overflow: hidden;
    }

    .topContent {
        background: url(../images/game/topBg.png);
        background-position: top;
        background-repeat: no-repeat;
        background-size: cover;
        height: 100%;
    }

    .light {
        position: absolute;
        top: 33%;
        z-index: 3;
        width: 100%;
        pointer-events: none;
    }

    .bottomContent {
        height: 100%;
        clip-path: polygon(0 30%, 100% 0%, 100% 100%, 0% 100%);
        margin-top: -64%;
    }

    .topBtn {
        position: absolute;
        top: 34%;
        width: 68%;
        left: -16%;
        width: 75%;
        overflow: hidden;
        animation: moveInLeft 2s ease-in-out 0.2s forwards,
            moveBack 5s ease-in-out infinite 3s;
        z-index: 9;
    }


    .topBtn a {
        display: block;
    }

    .topBtn .tri {
        position: absolute;
        top: 50%;
        left: 0%;
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 8px solid #ffffff;
        filter: grayscale(1);
        z-index: 2;
        animation: floatRight 10s linear infinite;
    }

    .topBtn .fragment {
        position: absolute;
        width: 10px;
        height: 10px;
        top: 65%;
        left: 0%;
        background-color: rgba(255, 255, 255, 0.6);
        animation: moveIn 2s ease-in-out 0.2s forwards, floatRight 5s linear 0.6s infinite;
    }

    .bottomBtn {
        overflow: hidden;
        position: absolute;
        right: -23%;
        top: 39%;
        animation: moveIn 2s ease-in-out 0.2s forwards,
            moveBack 5s ease-in-out infinite 3s;
        z-index: 9;
    }

    .bottomBtn .tri {
        position: absolute;
        top: 50%;
        right: -10%;
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 8px solid #ffffff;
        filter: grayscale(1);
        z-index: 2;
        animation: floatLeft 10s linear infinite;
    }

    .tri-1 {
        top: 40%;
        right: -10%;
        animation-delay: 0s;
    }

    .tri-2 {
        top: 70%;
        right: -10%;
        animation-delay: 1.5s;
    }

    .tri-3 {
        top: 90%;
        right: -10%;
        animation-delay: 3s;
    }

    .bottomBtn .fragment {
        position: absolute;
        width: 10px;
        height: 10px;
        top: 65%;
        right: -10%;
        background-color: rgba(255, 255, 255, 0.6);
        animation: moveIn 2s ease-in-out 0.2s forwards, floatLeft 5s linear 0.6s infinite;
    }

    .fragment-1 {
        top: 55%;
        right: -10%;
        animation-delay: 0.6s;
    }

    .fragment-2 {
        top: 60%;
        right: -10%;
        animation-delay: 2s;
    }

    .fragment-3 {
        top: 65%;
        right: -10%;
        animation-delay: 3.5s;
    }
}

@media (max-width:768px) {

    .light {
        top: 30%;
    }
}

@media (max-width:520px) {

    .topHeroPad {
        display: none;
    }

    .topHeroPhone {
        display: block;
    }

    .topContent {
        height: 100%;
    }

    .topBtn {
        top: 41%;
    }

    .light {
        top: 38%;
    }

    .bottomContent {
        height: 100%;
        margin-top: -117%;
    }

    .bottomBtn {
        top: 43%;
        width: 81%;
    }
}

@media (max-width:520px) {
    .topHeroPhone {
        padding-top: 20px;
    }
}