@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;

    position: relative;
    text-rendering: optimizeLegibility;
}



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

img {
    display: block;
    position: absolute;
}


div {
    user-select: none;
}

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

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

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

.decLeft_pc {
    bottom: 5vh;
    left: 2vw;
    width: 17vw;
    opacity: 0;
    animation: fadeIn 2s 1.3s ease-in forwards;
}

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

.decRight_pc {
    top: 8vh;
    right: 4vw;
    width: 19vw;
    opacity: 0;
    animation: fadeIn 2s 1.3s ease-in forwards;
}

.decHuman {
    top: 42vh;
    right: 31vw;
    width: 29vw;
    opacity: 0;
    animation: fadeIn 2s 1.3s ease-in forwards;
}

.decorate01_pc {
    width: 97vw;
    height: 93vh;
}

.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: 6vh;
    left: 29.5vw;
    width: 49vw;
    opacity: 0;
    animation: fadeIn 1.8s 2.5s ease-in forwards;
}

.btn_start {
    bottom: 8vh;
    /* left: 84.5vw; */
    right: 2vw;
    width: 10.9vw;
    /* width: 210px; */
    opacity: 0;
    animation: fadeIn 1s 3s ease-in forwards, scaleAnimation 1s ease-in infinite alternate;
    cursor: pointer;

    z-index: 1;
}

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

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

.decorate05_pc {
    top: 6vh;
    right: 3vw;
    width: 420px;
    /* width: 21.9vw;
height: 47vh; */
    opacity: 0;
}

.overAll-img {
    top: 22%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* width: 18.2vw; */
    /* width: 19.5vw; */
    width: 375px;
    /* width: 350px; */
    /* height: 5vh; */
    opacity: 0;
}

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

    opacity: 0;
    cursor: pointer;
}

.overAll-text-pc {
    position: absolute;
    /* top: 43vh;
    left: 50%; */
    top: 28vh;
    /* left: 725px; */
    padding-right: 5px;
    /* transform: translate(-50%, -50%); */
    /* width: 16%; */
    /* width: 459px; */
    width: 490px;
    overflow-y: auto;
    overflow-x: hidden;
    /* height: 29vh; */
    height: 51vh;
    color: #231815;
    /* letter-spacing: 3px; */
    line-height: 2;
    text-align: center;
    opacity: 0;
    font-family: "LXGW WenKai TC", serif;
}

.overAll-text {
    font-size: 22px;
    font-weight: lighter;
    color: #231815;
    /* letter-spacing: 3px; */
    text-align: center;
    opacity: 0;
    font-family: "LXGW WenKai TC", serif;
}

/* 自訂滾動條 */
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: 48.4vw; */
    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 {
    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;
}

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

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

    .decorate05_pc {
        /* width: 320px; */
        width: 25.9vw;
    }

    .logo_all {
        width: 48.4%;
    }

}

@media (max-width: 1400px) {
    .decorate04_pc {
        width: 26.6vw;
    }

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

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


/* 手機板 */
@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/bg_ph.png);
        z-index: -1;
        opacity: 0;
        background-size: cover;
    }

    .decorate01_pc,
    .decorate02_pc,
    .decorate03_pc,
    .decorate04_pc,
    .decorate05_pc,
    .logo_all,
    .overAll-text,
    .decLeft_pc,
    .decMiddle_pc,
    .decRight_pc,
    .overAll-text-pc {
        display: none;
    }

    .decorate01_ph,
    .decorate02_ph,
    .decorate03_ph,
    .decorate04_ph,
    .decorate05_ph,
    .overAll-text-ph,
    .decUp_ph,
    .decLeft_ph,
    .decRight_ph,
    .overAll-text-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: 7vh;
        left: 9.5vw;
        width: 82.5vw;
        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;
    }

    .decLeft_ph {
        top: 36vh;
        /* right: 31vw; */
        left: 4vw;
        width: 67vw;
        opacity: 0;
        animation: fadeIn 2s 1.3s ease-in forwards;
    }

    .decRight_ph {
        top: 28vh;
        /* right: 31vw; */
        right: 4vw;
        width: 44vw;
        opacity: 0;
        animation: fadeIn 2s 1.3s ease-in forwards;
    }


    .decorate01_ph {
        width: 95vw;
        height: 91.5vh;
        left: 2vw;
        top: 1vh;
    }

    .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: 85vh;
        /* left: 84.5vw; */
        right: 5vw;
        width: 20.9vw;
        /* width: 210px; */
        opacity: 0;
        animation: fadeIn 1s 3s ease-in forwards, scaleAnimation 1s ease-in infinite alternate;
        cursor: pointer;
        z-index: 1;
    }


    /* 導覽頁 */
    .overAll-img {
        top: 29vh;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 42.5vw;
        /* 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: 37.5%;
        transform: translate(-50%, -50%);
        width: 26.4vw;
        opacity: 0;
        cursor: pointer;
    }



    .overAll-text-PH {
        position: absolute;
        top: 35vh;
        /* left: 50vw; */
        padding-right: 5px;
        /* transform: translate(-50%, -50%); */
        /* width: 16%; */
        width: 56vw;
        height: 27.5vh;
        overflow-y: auto;
        overflow-x: hidden;
        color: #231815;
        /* letter-spacing: 3px; */
        line-height: 2;
        text-align: center;
        opacity: 0;
        font-family: "LXGW WenKai TC", serif;
    }


    .overAll-text-ph {
        /* font-size: 22px; */
        font-size: 30px;
        font-weight: lighter;
        /* width: 16%; */
        color: #231815;
        text-align: center;
        opacity: 0;
        font-family: "LXGW WenKai TC", serif;
    }

}

@media (max-width: 820px) and (orientation: portrait) {
    .btn_enter {
        top: 69vh;
        left: 36.5%;
        transform: translate(-50%, -50%);
        width: 26.4vw;
        opacity: 0;
        cursor: pointer;
    }
}

@media (max-height: 921px) and (orientation: portrait) {
    .decLeftPaint {
        top: 0vh;
        left: 0vw;

        width: 35vw;
        opacity: 0;
        animation: fadeIn 2.0s 0.5s ease-in forwards;
    }

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

    .decLeft_ph {
        top: 36vh;
        left: 4vw;
        width: 51vw;
        opacity: 0;
        animation: fadeIn 2s 1.3s ease-in forwards;
    }

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

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

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

    .title1 {
        top: 5vh;
        left: 14.5vw;
        width: 72.5vw;
        opacity: 0;
        animation: fadeIn 1.8s 2.5s ease-in forwards;
    }

    /* 導覽頁 */
    .decorate04_ph {
        bottom: 0vh;
        left: 0%;
        width: 27.9vw;
        opacity: 0;
    }

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

    .overAll-text-ph {
        position: absolute;
        font-size: 22px;
        font-weight: lighter;
        padding-right: 5px;
        /* width: 16%; */
        /* width: 56vw;
        height: 25.5vh; */
        line-height: 2;
        text-align: center;
        opacity: 0;
        color: #231815;
        overflow-y: auto;
        font-family: "LXGW WenKai TC", serif;
    }

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

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

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

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

    .title1 {
        top: 10vh;
        left: 8.5vw;
        width: 83.5vw;
        opacity: 0;
        animation: fadeIn 1.8s 2.5s ease-in forwards;
    }

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



    .decLeft_ph {
        top: 43vh;
        /* right: 31vw; */
        left: 3.5vw;
        width: 68vw;
        opacity: 0;
        animation: fadeIn 2s 1.3s ease-in forwards;
    }

    .decRight_ph {
        top: 28.5vh;
        /* right: 31vw; */
        right: 4vw;
        width: 53vw;
        opacity: 0;
        animation: fadeIn 2s 1.3s ease-in forwards;
    }

    .decorate01_ph {
        width: 95vw;
        height: 91.5vh;
        left: 2vw;
        top: 1vh;
    }

    .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;
    }

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

    .btn_start {
        top: 80vh;
        right: 4vw;
        width: 27.4vw;
        opacity: 0;
        animation: fadeIn 1s 3s ease-in forwards, scaleAnimation 1s ease-in infinite alternate;
        cursor: pointer;
        z-index: 1;
    }

    /* 導覽頁 */
    .overAll-img {
        top: 26vh;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 57.5vw;
        /* 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: 66vh;
        left: 34.5%;
        transform: translate(-50%, -50%);
        width: 31.4vw;
        opacity: 0;
        cursor: pointer;
    }

    .overAll-text-ph {
        font-size: 14px;
        font-weight: lighter;
        /* width: 16%; */
        color: #231815;
        text-align: center;
        opacity: 0;
        font-family: "LXGW WenKai TC", serif;
    }
}


@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 {
        right: 0dvw;
        bottom: 0dvh;
        width: 59vw;
        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 {
        top: 11dvh;
        left: 6.5dvw;
        width: 87.5dvw;
        opacity: 0;
        animation: fadeIn 1.8s 2.5s ease-in forwards;
    }

    .decHuman {
        top: 59dvh;
        /* right: 31vw; */
        left: 3dvw;
        width: 89dvw;
        opacity: 0;
        animation: fadeIn 2s 1.3s ease-in forwards;
    }



    .decLeft_ph {
        top: 39dvh;
        /* right: 31vw; */
        left: 3dvw;
        width: 103dvw;
        opacity: 0;
        animation: fadeIn 2s 1.3s ease-in forwards;
    }

    .decRight_ph {
        top: 30.5dvh;
        /* right: 31vw; */
        right: 4dvw;
        width: 58dvw;
        opacity: 0;
        animation: fadeIn 2s 1.3s ease-in forwards;
    }

    .decorate01_ph {
        width: 95dvw;
        height: 97.5dvh;
        left: 2dvw;
        top: 1dvh;
    }

    .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: 88dvh;
        right: 4dvw;
        width: 31.4dvw;
        opacity: 0;
        animation: fadeIn 1s 3s ease-in forwards, scaleAnimation 1s ease-in infinite alternate;
        cursor: pointer;
        z-index: 1;
    }

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

    .decorate04_ph {
        bottom: 0dvh;
        left: 0dvw;
        width: 42.9dvw;
        opacity: 0;
    }

    .decorate05_ph {
        top: 0dvh;
        right: -1dvw;
        width: 36.5dvw;
        opacity: 0;
    }

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

    .overAll-text-PH {
        position: absolute;
        top: 31dvh;
        padding-right: 5px;
        /* width: 16%; */
        width: 76%;
        height: 37.5dvh;
        overflow-y: auto;
        overflow-x: hidden;
        color: #231815;
        /* letter-spacing: 3px; */
        line-height: 2;
        text-align: center;

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


    .overAll-text-ph {
        font-size: 14px;
        font-weight: lighter;
        /* width: 16%; */
        color: #231815;
        text-align: center;
        opacity: 0;
        font-family: "LXGW WenKai TC", serif;
    }
}

@media (max-width: 375px) {

    .decHuman {
        top: 50dvh;
        /* right: 31vw; */
        left: 3dvw;
        width: 89dvw;
        opacity: 0;
        animation: fadeIn 2s 1.3s ease-in forwards;
    }

    .decLeft_ph {
        top: 39dvh;
        /* right: 31vw; */
        left: 3dvw;
        width: 86dvw;
        opacity: 0;
        animation: fadeIn 2s 1.3s ease-in forwards;
    }

    .btn_start {
        top: 85dvh;
        right: 4dvw;
        width: 31.4dvw;
        opacity: 0;
        animation: fadeIn 1s 3s ease-in forwards, scaleAnimation 1s ease-in infinite alternate;
        cursor: pointer;
        z-index: 1;
    }
}