@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif+TC:wght@200..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');

/* @import url('https://fonts.googleapis.com/css2?family=LXGW+WenKai+TC&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif+TC:wght@200..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap'); */
/* @import url("https://fonts.google.com/specimen/LXGW+WenKai+TC?lang=zh_Hant"); */
@import url('https://fonts.googleapis.com/css2?family=LXGW+WenKai+TC&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif+TC:wght@200..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



body,
html {
    height: 100vh;
    /* width: 100%; */
    overflow: hidden;
    /* font-family: "LXGW WenKai TC", serif; */
    /* font-family: "Noto Serif", serif; */
    font-family: "Noto Serif TC", serif;
    position: relative;
    font-style: normal;
    text-rendering: optimizeLegibility;

}

p {
    user-select: none;
}

section {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

img {
    display: block;
    position: absolute;
}

.index-page {
    position: absolute;
    top: 0vh;
    left: 0vw;
    width: 100vw;
    height: 100dvh;
    background-color: #9f9fa0;
    z-index: 1;
}

.decLeftPaint {
    top: -25dvh;
    left: -18dvw;
    width: 135dvw;
    /* width: 28vw; */
    opacity: 0;
    animation: fadeIn 2.0s 0.5s ease-in forwards;
}

.decRightPaint {
    right: 0dvw;
    bottom: -3.5dvh;
    width: 100dvw;
    opacity: 0;
    animation: fadeIn 2.0s 0.5s ease-in forwards;
}

.decLeft_pc {
    top: 16dvh;
    left: 2.5dvw;
    width: 14dvw;
    opacity: 0;
    animation: fadeIn 2s 1.3s ease-in forwards;
    z-index: 10;
}

.decMiddle_pc {
    top: 38vh;
    left: 10vw;
    width: 78vw;
    opacity: 0;
    animation: fadeIn 2s 1.3s ease-in forwards;
}

.decRight_pc {
    /* top: 5dvh; */
    /* right: 16.5dvw;
    width: 21dvw; */
    top: 0dvh;
    right: 15dvw;
    width: 22dvw;
    opacity: 0;
    animation: fadeIn 2s 1.3s ease-in forwards;
    z-index: 10;
}

.decHuman {
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24.5dvw;
    opacity: 0;
    animation: fadeIn 2s 1.3s ease-in forwards;
}

.decorate01_pc {
    width: 105dvw;
    height: 81dvh;
    bottom: 0;
    opacity: 0;
    animation: fadeIn 1s 0.2s ease-in forwards;
}

.decorate02_pc {
    top: 0vh;
    left: 0vw;
    width: 100vw;
    height: 100vh;
    opacity: 0;
    animation: fadeIn 2.0s 0.5s ease-in forwards;
}

.decorate03_pc {
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95vw;
    height: 88vh;
    opacity: 0;
    animation: fadeIn 2s 1.3s ease-in forwards;
}


.title1 {
    top: 52.5dvh;
    /* right: 0dvw; */
    left: 10.5dvw;
    width: 19dvw;
    opacity: 0;
    animation: fadeIn 1.8s 2.5s ease-in forwards;
    z-index: 10;
}

.title1-1 {
    top: 13.5vh;
    /* right: 0dvw; */
    left: 24dvw;
    width: 14.5dvw;
    opacity: 0;
    animation: fadeIn 1.8s 2.5s ease-in forwards;
    z-index: 10;
}

.title1-2 {
    top: 24.5vh;
    right: 1dvw;
    /* left: 14dvw; */
    width: 14.5dvw;
    opacity: 0;
    animation: fadeIn 1.8s 2.5s ease-in forwards;
    z-index: 10;
}

.title1-3 {
    top: 66.5vh;
    right: 16dvw;
    /* left: 14dvw; */
    width: 15dvw;
    opacity: 0;
    animation: fadeIn 1.8s 2.5s ease-in forwards;
    z-index: 10;
}

.title2 {

    top: 51%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* width: 100dvw;
    height: 100dvh; */
    width: 93dvw;
    height: auto;
    opacity: 0;
    animation: fadeIn 1.8s 2.5s ease-in forwards;
}

.btn_start {
    bottom: 17dvh;
    left: 50%;
    transform: translateX(-50%);
    /* left: 84.5vw; */
    /* right: 2vw; */
    bottom: 18dvh;
    /* width: 210px; */
    width: 10dvw;
    opacity: 0;
    animation: fadeIn 1s 3s ease-in forwards;
    cursor: pointer;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
        filter 0.3s ease;
}


/* 導覽頁 */
.overall-page {
    position: absolute;
    top: 0vh;
    left: 0vw;
    width: 100vw;
    height: 100dvh;
    background-image: url(../img/bg02_pc.jpg);
    z-index: -1;
    opacity: 0;
    background-size: cover;
}

.decorate04_pc {
    bottom: -3vh;
    left: 0dvw;
    width: 51dvw;
    /* width: 27.6vw; */
    /* height: 70vh; */
    opacity: 0;
}

.decorate04-2_pc {
    bottom: -3vh;
    right: 0dvw;
    width: 36dvw;
    /* width: 27.6vw; */
    /* height: 70vh; */
    opacity: 0;
}

.decorate05_pc {
    top: 0vh;
    left: 0dvw;
    /* right: 3vw; */
    width: 100dvw;
    opacity: 0;
}

.overAll-img {
    top: 7dvw;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 13dvw;
    /* width: 350px; */
    /* height: 5vh; */
    opacity: 0;
}

.btn_enter {
    /* top: 72vh;
    left: 45.5%; */
    /* transform: translate(-50%, -50%); */
    /* width: 8.3vw; */
    transform: translateX(-50%);
    /* width: 240px; */
    width: 8dvw;
    display: block;
    margin: 0 auto;

    opacity: 0;
    cursor: pointer;
    top: 75%;
    left: 50%;
    /* transform: translate(-50%, -50%); */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
        filter 0.3s ease;
}

/* .btn_enter:hover {
    transform: translateX(-50%) scale(1.12);
    filter: brightness(1.05);
} */

@media (hover: hover) and (pointer: fine) {
    .btn_start:hover {
        transform: translateX(-50%) scale(1.12);
        filter: brightness(1.05);
    }

    .btn_enter:hover {
        transform: translateX(-50%) scale(1.12);
        filter: brightness(1.05);
    }
}

.overAll-text-pc {
    position: absolute;
    top: 27dvh;
    /* top: 12.5dvw; */
    padding-right: 5px;
    width: 56dvw;
    overflow-y: auto;
    overflow-x: hidden;
    height: 43dvh;
    color: #231815;
    /* letter-spacing: 3px; */
    line-height: 2;
    text-align: center;
    opacity: 0;
    /* font-family: "LXGW WenKai TC", serif; */
}

.overAll-text {
    /* font-size: 26px; */
    font-weight: 500;
    color: #231815;
    /* letter-spacing: 3px; */
    text-align: center;
    opacity: 0;
    /* font-family: "LXGW WenKai TC", serif; */
    /* line-height: 40px; */
    font-size: 20px;
    line-height: 25pt;
    letter-spacing: 1px;
}

.overAll-text-en,
.overAll-text-en-1,
.overAll-text-en-2 {
    margin-top: 1.5%;
    /* font-size: 26px; */
    color: #231815;
    /* letter-spacing: 3px; */
    text-align: center;
    opacity: 0;
    /* font-family: "LXGW WenKai TC", serif; */
    /* font-family: "Noto Serif", serif; */
    font-family: "Noto Serif TC", serif;
    font-weight: 400;
    /* line-height: 40px; */
    font-size: 16px;
    line-height: 20pt;
    letter-spacing: 0.5px;
}

/* 自訂滾動條 */
div::-webkit-scrollbar {
    width: 3px;
    margin-right: 10px;
    /* 增加右側距離 */
    transform: translateX(10px);
}



div::-webkit-scrollbar-thumb {
    background: #978b7e;
    border-radius: 10px;
    border: 3px solid rgba(#978b7e);
}


.logo_all {
    bottom: 0vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    width: 38dvw;
    /* width: 930px; */
    opacity: 0;
}

.decorate01_ph,
.decorate02_ph,
.decorate03_ph,
.decorate04_ph,
.decorate05_ph,
.overAll-text-ph,
.decDown_ph,
.decUp_ph,
.decLeft_ph,
.decRight_ph,
.overAll-text-PH,
.decLeftPaint_ph,
.decHuman_ph,
.decRight_ph,
.title1_ph,
.decLeft_ph,
.decRightPaint_ph,
.title1-2_ph,
.title1-3_ph,
.title1-4_ph,
.title2_ph,
.logo_all_ph {
    display: none;
}

/* 動畫 */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes scaleAnimation {
    0% {
        transform: scale(1);
        /* 初始大小 */
    }

    50% {
        transform: scale(1.2);
        /* 放大 10% */
    }

    100% {
        transform: scale(1);
        /* 回到原來大小 */
    }
}

@keyframes fadeout {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.fadeout {
    animation: fadeout 2s ease-in-out forwards;
}

.fadein {
    animation: fadeIn 1s 0.5s ease-in forwards;
}

.fadein4 {
    animation: fadeIn 1s 1.5s ease-in forwards;
}

.fadein5 {
    animation: fadeIn 1s 2.5s ease-in forwards;
}

.fadein6 {
    animation: fadeIn 2s 3.5s ease-in forwards;
}

.fadein7 {
    animation: fadeIn 2s 3.5s ease-in forwards, scaleAnimation 1s ease-in infinite alternate;
}

.fadein8 {
    animation: fadeIn 2s 1.2s ease-in forwards;
}

.fadein9 {
    animation: fadeIn 1s 0s ease-in forwards;
}

.fadein10 {
    animation: fadeIn 1s 2.5s ease-in forwards;
}

@media (max-width: 1600px) {
    /* .btn_enter {
        top: 67vh;
        left: 44.5%;
   
        transform: translateX(-50%);
        width: 160px;
        display: block;
        margin: 0 auto;
        opacity: 0;
        cursor: pointer;
    } */
}

/* @media (max-width: 1500px) {
    .decorate04_pc {
        width: 31.6vw;
    }

    .logo_all {
        width: 48.4%;
    }

} */

@media (max-width: 1200px) and (orientation: landscape) {
    /* .decorate04_pc {
        width: 26.6vw;
    } */

    /* .btn_enter {
        top: 67vh;
        left: 43.5%;
        transform: translateX(-50%);
        width: 160px;
        display: block;
        margin: 0 auto;
        opacity: 0;
        cursor: pointer;
    } */

    .overAll-text-pc {
        top: 18dvh;
    }

    .btn_start {
        bottom: 20dvh;
        width: 12dvw;
    }

    .btn_enter {
        top: 69%;
        width: 12dvw;
    }

    .logo_all {
        bottom: 3dvh;
        left: 50vw;
        transform: translate(-50%, -50%);
        width: 47dvw;
        /* width: 930px; */
        opacity: 0;
    }

    .title2 {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100dvw;
        height: 100dvh;
        opacity: 0;
        animation: fadeIn 1.8s 2.5s ease-in forwards;
    }

    .decHuman {
        top: 48%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 28dvw;
        opacity: 0;
        animation: fadeIn 2s 1.3s ease-in forwards;
    }

    .decLeft_pc {
        top: 23dvh;
        left: 1dvw;
        width: 15.5dvw;
        opacity: 0;
        animation: fadeIn 2s 1.3s ease-in forwards;
        z-index: 10;
    }

    /* .title1 {
        top: 62.5vh;
        left: 14dvw;
        width: 16dvw;
        opacity: 0;
        animation: fadeIn 1.8s 2.5s ease-in forwards;
        z-index: 10;
    } */


    .decRight_pc {
        /* top: 5dvh; */
        top: 4dvh;
        right: 13dvw;
        width: 25dvw;
        opacity: 0;
        animation: fadeIn 2s 1.3s ease-in forwards;
        z-index: 10;
    }

    .title1-2 {
        top: 25.5vh;
        right: 0dvw;
        /* left: 14dvw; */
        width: 17.5dvw;
        opacity: 0;
        animation: fadeIn 1.8s 2.5s ease-in forwards;
        z-index: 10;
    }

    .title1-3 {
        top: 57.5vh;
        right: 12dvw;
        /* left: 14dvw; */
        width: 21dvw;
        opacity: 0;
        animation: fadeIn 1.8s 2.5s ease-in forwards;
        z-index: 10;
    }

    .title1-1 {
        top: 12.5vh;
        /* right: 0dvw; */
        left: 21dvw;
        width: 18.5dvw;
        opacity: 0;
        animation: fadeIn 1.8s 2.5s ease-in forwards;
        z-index: 10;
    }

    .decLeftPaint {
        top: -16dvh;
        left: -18dvw;
        width: 135dvw;
        /* width: 28vw; */
        opacity: 0;
        animation: fadeIn 2.0s 0.5s ease-in forwards;
    }


    .title1 {
        top: 62dvh;
        /* right: 0dvw; */
        left: 10.5dvw;
        width: 19dvw;
        opacity: 0;
        animation: fadeIn 1.8s 2.5s ease-in forwards;
        z-index: 10;
    }
}



/* 手機板 */
@media (max-width: 1024px) and (orientation: portrait) {

    section {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        /* 使用 100vh 保證高度不超出螢幕 */
        width: 100%;
        /* 使用 100vw 保證寬度不超出螢幕 */
    }


    .overall-page {
        position: absolute;
        top: 0vh;
        left: 0vw;
        width: 100vw;
        height: 100dvh;
        background-image: url(../img/bg02_ph.jpg);
        z-index: -1;
        opacity: 0;
        background-size: cover;
    }




    .decorate01_pc,
    .decorate02_pc,
    .decorate03_pc,
    .decorate04_pc,
    .decorate04-2_pc,
    .decorate05_pc,
    .logo_all,
    .overAll-text,
    .overAll-text-en,
    .decLeft_pc,
    .decMiddle_pc,
    .decRight_pc,
    .overAll-text-pc,
    .decLeftPaint,
    .decHuman,
    .title1,
    .title1-1,
    .decRightPaint,
    .title1-2,
    .title1-3,
    .title2,
    .logo_all {
        display: none;
    }

    .decorate01_ph,
    .decorate02_ph,
    .decorate03_ph,
    .decorate04_ph,
    .decorate05_ph,
    .overAll-text-ph,
    .decUp_ph,
    .decLeft_ph,
    .decRight_ph,
    .overAll-text-PH,
    .decLeftPaint_ph,
    .decHuman_ph,
    .decRight_ph,
    .title1_ph,
    .decLeft_ph,
    .decRightPaint_ph,
    .title1-2_ph,
    .title1-3_ph,
    .title1-4_ph,
    .title2_ph,
    .logo_all_ph {
        display: block;
    }

    .decLeftPaint {
        top: 0vh;
        left: 0vw;
        width: 49vw;
        /* width: 28vw; */
        opacity: 0;
        animation: fadeIn 2.0s 0.5s ease-in forwards;
    }

    .decRightPaint {
        right: 0vw;
        bottom: 0vh;
        width: 44vw;
        opacity: 0;
        animation: fadeIn 2.0s 0.5s ease-in forwards;
    }

    .title1 {
        top: 7dvh;
        right: 0dvw;
        width: 77dvw;
        opacity: 0;
        animation: fadeIn 1.8s 2.5s ease-in forwards;
    }

    .decHuman {
        top: 46vh;
        /* right: 31vw; */
        left: 5vw;
        width: 69vw;
        opacity: 0;
        animation: fadeIn 2s 1.3s ease-in forwards;
    }

    .decUp_ph {
        top: 4vw;
        right: 5vw;
        width: 24.5vw;
        opacity: 0;
        animation: fadeIn 2s 1.3s ease-in forwards;
    }

    .decRight_ph {
        top: 4vw;
        right: 5vw;
        width: 24.5vw;
        opacity: 0;
        animation: fadeIn 2s 1.3s ease-in forwards;
    }

    .decLeft_ph {
        top: 5dvh;
        left: 0dvw;
        width: 26dvw;
        opacity: 0;
        animation: fadeIn 2s 1.3s ease-in forwards;
    }

    .decRight_ph {
        top: 4dvh;
        right: 9dvw;
        width: 35dvw;
        opacity: 0;
        animation: fadeIn 2s 1.3s ease-in forwards;
    }




    .decorate02_ph {
        top: 0vh;
        left: 0vw;
        width: 100vw;
        height: 93vh;
        opacity: 0;
        animation: fadeIn 2.0s 0.5s ease-in forwards;
    }

    .decorate03_ph {
        top: 47%;
        left: 49.7%;
        transform: translate(-50%, -50%);
        width: 92.5vw;
        height: 89vh;
        opacity: 0;
        animation: fadeIn 2s 1.3s ease-in forwards;
    }

    .btn_start {
        top: 68vh;
        right: 5vw;
        width: 24vw;
        /* width: 210px; */
        opacity: 0;
        /* animation: fadeIn 1s 3s ease-in forwards, scaleAnimation 1s ease-in infinite alternate; */
        animation: fadeIn 1s 3s ease-in forwards;
        cursor: pointer;
        z-index: 1;
    }

    .decorate01_ph {
        width: 114.5dvw;
        left: 0dvw;
        top: 20dvh;
        opacity: 0;
        animation: fadeIn 2.0s 0.5s ease-in forwards;
    }

    .decRightPaint_ph {
        right: 0dvw;
        bottom: 0dvh;
        width: 100dvw;
        opacity: 0;
        animation: fadeIn 2.0s 0.5s ease-in forwards;
    }

    .decLeftPaint_ph {
        top: 0dvh;
        left: 0dvw;
        width: 100dvw;
        opacity: 0;
        animation: fadeIn 1.8s 2.5s ease-in forwards;
    }

    .title2_ph {
        top: 6dvh;
        left: 53dvw;
        transform: translatex(-50%);
        /* width: 89dvw; */
        width: 50dvh;
        opacity: 0;
        animation: fadeIn 1.8s 2.5s ease-in forwards;
    }

    .title1_ph {
        top: 55dvh;
        left: 0dvw;
        width: 25dvw;
        opacity: 0;
        animation: fadeIn 1.8s 2.5s ease-in forwards;
    }

    .title1-2_ph {
        top: 28dvh;
        right: -8dvw;
        width: 30dvw;
        opacity: 0;
        animation: fadeIn 1.8s 2.5s ease-in forwards;
    }

    .title1-3_ph {
        bottom: 0dvh;
        left: 34dvw;
        width: 22.5dvw;
        opacity: 0;
        animation: fadeIn 1.8s 2.5s ease-in forwards;
    }

    .title1-4_ph {
        top: 67dvh;
        right: 3dvw;
        width: 20dvw;
        opacity: 0;
        animation: fadeIn 1.8s 2.5s ease-in forwards;
    }

    .decHuman_ph {
        top: 45.5dvh;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 43dvw;
        opacity: 0;
        animation: fadeIn 2s 1.3s ease-in forwards;
        z-index: 5;
    }

    /* 導覽頁 */
    .overAll-img {
        top: 16dvw;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 32vw;
        /* height: 4.8vh; */
        opacity: 0;
    }

    .decorate04_ph {
        bottom: 0vh;
        left: 0%;
        width: 38.9vw;
        opacity: 0;
    }

    .decorate05_ph {
        top: 0vh;
        right: -1vw;
        width: 32.5vw;
        opacity: 0;
    }

    .btn_enter {
        top: 64vh;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 23.4vw;
        opacity: 0;
        cursor: pointer;
    }

    .overAll-text-PH {
        position: absolute;
        top: 21dvh;
        /* left: 50vw; */
        padding-right: 5px;
        width: 75dvw;
        height: 33.5vh;
        overflow-y: auto;
        overflow-x: hidden;
        color: #231815;
        /* letter-spacing: 3px; */
        line-height: 2;
        text-align: center;
        opacity: 0;
    }

    .overAll-text-ph {
        /* font-size: 26px; */
        font-weight: 500;
        color: #231815;
        /* letter-spacing: 3px; */
        text-align: center;
        opacity: 0;
        /* font-family: "LXGW WenKai TC", serif; */
        /* line-height: 40px; */
        font-size: 15pt;
        line-height: 25pt;
        letter-spacing: 2px;
    }

    .logo_all_ph {
        bottom: 4dvh;
        left: 50%;
        transform: translateX(-50%);
        width: 71dvw;
        /* height: 4.8vh; */
        opacity: 0;
    }

    .decorate04_ph {
        top: 54dvh;
        left: 0dvw;
        width: 100dvw;
        opacity: 0;
    }

    .decorate05_ph {
        top: -6dvh;
        left: 0dvw;
        width: 100dvw;
        opacity: 0;
    }

    .overAll-text-ph-en,
    .overAll-text-ph-en-1,
    .overAll-text-ph-en-2 {
        margin-top: 3.5%;
        /* font-size: 26px; */
        color: #231815;
        /* letter-spacing: 3px; */
        text-align: center;
        opacity: 0;
        /* font-family: "LXGW WenKai TC", serif; */
        /* font-family: "Noto Serif", serif; */
        font-family: "Noto Serif TC", serif;
        font-weight: 300;
        /* line-height: 40px; */
        font-size: 15pt;
        line-height: 20pt;
        letter-spacing: 0.5px;
    }
}


@media (max-width: 450px) {
    .decLeftPaint {
        top: 0dvh;
        left: 0dvw;
        width: 67vw;
        /* width: 28vw; */
        opacity: 0;
        animation: fadeIn 2.0s 0.5s ease-in forwards;
    }

    .decRightPaint_ph {
        right: 0dvw;
        bottom: 0dvh;
        width: 100dvw;
        opacity: 0;
        animation: fadeIn 2.0s 0.5s ease-in forwards;
    }

    .decUp_ph {
        top: 4dvw;
        right: 3dvw;
        width: 28.5dvw;
        opacity: 0;
        animation: fadeIn 2s 1.3s ease-in forwards;
    }

    .title1_ph {
        top: 52dvh;
        left: 0dvw;
        width: 35dvw;
        opacity: 0;
        animation: fadeIn 1.8s 2.5s ease-in forwards;
    }

    .title1-2_ph {
        top: 26dvh;
        right: -8dvw;
        width: 35dvw;
        opacity: 0;
        animation: fadeIn 1.8s 2.5s ease-in forwards;
    }

    .title1-3_ph {
        bottom: -1dvh;
        left: 33dvw;
        width: 31.5dvw;
        opacity: 0;
        animation: fadeIn 1.8s 2.5s ease-in forwards;
    }

    .title1-4_ph {
        top: 67dvh;
        right: 3dvw;
        width: 26dvw;
        opacity: 0;
        animation: fadeIn 1.8s 2.5s ease-in forwards;
    }

    .title2_ph {
        top: 6dvh;
        left: 53dvw;
        transform: translatex(-50%);
        /* width: 89dvw; */
        width: 50dvh;
        opacity: 0;
        animation: fadeIn 1.8s 2.5s ease-in forwards;
    }

    .decHuman_ph {
        top: 41.5dvh;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 54dvw;
        opacity: 0;
        animation: fadeIn 2s 1.3s ease-in forwards;
    }

    .decRight_ph {
        top: 3.5dvh;
        right: 3dvw;
        width: 43dvw;
        opacity: 0;
        animation: fadeIn 2s 1.3s ease-in forwards;
    }

    .decLeft_ph {
        top: 3dvh;
        left: 0dvw;
        width: 32dvw;
        opacity: 0;
        animation: fadeIn 2s 1.3s ease-in forwards;
    }


    .decorate01_ph {
        width: 114.5dvw;
        left: 0dvw;
        top: 20dvh;
        opacity: 0;
        animation: fadeIn 2.0s 0.5s ease-in forwards;
    }

    .decorate02_ph {
        top: 0dvh;
        left: 0dvw;
        width: 100dvw;
        height: 93dvh;
        opacity: 0;
        animation: fadeIn 2.0s 0.5s ease-in forwards;
    }

    .decorate03_ph {
        top: 47%;
        left: 49.7%;
        transform: translate(-50%, -50%);
        width: 92.5vw;
        height: 89vh;
        opacity: 0;
        animation: fadeIn 2s 1.3s ease-in forwards;
    }

    .title1 {
        top: 11dvh;
        left: 6.5dvw;
        width: 87.5dvw;
        opacity: 0;
        animation: fadeIn 1.8s 2.5s ease-in forwards;
    }

    .btn_start {
        top: 60dvh;
        width: 25dvw;
        opacity: 0;
        animation: fadeIn 1s 3s ease-in forwards;
        cursor: pointer;
        z-index: 1;
    }

    /* 導覽頁 */
    .overAll-img {
        top: 22dvw;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 34.5dvw;
        /* height: 4.8vh; */
        opacity: 0;
    }

    .decorate04_ph {
        top: 64dvh;
        left: 0dvw;
        width: 100dvw;
        opacity: 0;
    }

    .decorate05_ph {
        top: -2dvh;
        left: 0dvw;
        width: 100dvw;
        opacity: 0;
    }

    .btn_enter {
        top: 72dvh;
        left: 50dvw;
        transform: translate(-50%, -50%);
        width: 27dvw;
        opacity: 0;
        cursor: pointer;
    }

    .logo_all_ph {
        bottom: 4dvh;
        left: 50%;
        transform: translateX(-50%);
        width: 50dvw;
        /* height: 4.8vh; */
        opacity: 0;
    }

    .overAll-text-PH {
        position: absolute;
        /* top: 21dvh; */
        top: 36dvw;
        padding-right: 5px;
        /* width: 16%; */
        width: 78dvw;
        height: 44.5dvh;
        overflow-y: auto;
        overflow-x: hidden;
        color: #231815;
        /* letter-spacing: 3px; */
        line-height: 20px;
        text-align: center;

        /* font-family: "LXGW WenKai TC", serif; */
    }


    .overAll-text-ph {
        font-size: 13px;
        /* font-size: 10px; */
        font-weight: 500;

        /* width: 16%; */
        color: #231815;
        text-align: center;
        opacity: 0;
        /* font-family: "LXGW WenKai TC", serif; */
        line-height: 19px;
        /* line-height: 2.3dvh; */
        letter-spacing: 1.2px;
    }

    .overAll-text-ph-en {
        font-size: 12px;
        font-weight: 500;
        /* font-weight: lighter; */
        /* width: 16%; */
        color: #231815;
        text-align: center;
        opacity: 0;
        /* font-family: "LXGW WenKai TC", serif; */
        margin-top: 1.5dvh;
        /* line-height: 17px; */
        line-height: 17px;
    }

    .overAll-text-ph-en-1 {
        font-size: 12px;
        font-weight: 500;
        /* font-weight: lighter; */
        /* width: 16%; */
        color: #231815;
        text-align: center;
        opacity: 0;
        /* font-family: "LXGW WenKai TC", serif; */
        margin-top: 1.5dvh;
        line-height: 17px;
    }

    .overAll-text-ph-en-2 {
        font-size: 12px;
        font-weight: 500;
        /* width: 16%; */
        color: #231815;
        text-align: center;
        opacity: 0;
        /* font-family: "LXGW WenKai TC", serif; */
        margin-top: 1.5dvh;
        line-height: 17px;
    }

    .decLeftPaint_ph {
        top: 0dvh;
        left: 0dvw;
        width: 100dvw;
        opacity: 0;
        animation: fadeIn 1.8s 2.5s ease-in forwards;
    }
}

@media (max-width: 375px) {
    .btn_start {
        top: 62dvh;
    }

    .btn_enter {
        top: 76dvh;
    }
}