@import url('menu.css');


::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #000000;
}

::-webkit-scrollbar {
    width: 6px;
    background-color: black;
}

::-webkit-scrollbar-thumb {
    background-color: #8f031a;
}

html{
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: black;

}

img {
    padding: 0;
    margin: 0;
    border: 0;
}

/* noMousePoint */
.noMousePoint {
    pointer-events: none;
    cursor: default;
    user-select: none;
}

.canMousePoint {
    pointer-events: auto;
    cursor: pointer;
    user-select: auto;
}


/*主內容 start*/

/*========== section_1 ===========*/
.section_1 {
    position: relative;
    width: 100vw;
    height: 59.8vw;
    background: url(../images/topbg.jpg) no-repeat;
    background-size: 100% auto;
    overflow: hidden;
}

.title {
    position: absolute;
    width: 12vw;
    height: 38vw;
    top: 8.5vw;
    right: 9.5vw;
    background: url(../images/title.png) no-repeat;
    background-size: 100% auto;
}

.people {
    position: relative;
    width: 68.5vw;
    height: 59.8vw;
}

.npc4 {
    position: absolute;
    left: 0;
    width: 29vw;
    top: 4.8vw;
    max-width: initial;
}

.npc3 {
    position: absolute;
    left: 0;
    width: 23vw;
    top: 17.3vw;
    max-width: initial;
}

.npc2 {
    position: absolute;
    left: 21.5vw;
    width: 28vw;
    top: 14.6vw;
    max-width: initial;
}

.npc1 {
    position: absolute;
    left: 0;
    width: 69vw;
    top: 10.8vw;
    max-width: initial;
}

.bottombg {
    position: absolute;
    bottom: 0;
    width: 100vw;
    height: 19.5vw;
    background: url(../images/topbgbottom.png) no-repeat;
    background-size: 100% auto;
}

@media (max-width: 768px) {
    .section_1 {
        height: 118vw;
        background: url(../images/topbgm.jpg) no-repeat;
        background-size: 100% auto;
    }

    .title {
        width: 20.6vw;
        height: 68.5vw;
        top: 16.5vw;
        right: 5.5vw;
        background: url(../images/title_m.png) no-repeat;
        background-size: 100% auto;
        z-index: 12;
    }

    .people {
        width: 100vw;
        height: 114.8vw;
    }

    .npc4 {
        left: -4vw;
        width: 43vw;
        top: 29.8vw;
    }

    .npc3 {
        left: -5vw;
        width: 35.6vw;
        top: 48.3vw;
    }

    .npc2 {
        left: 25.5vw;
        width: 43.6vw;
        top: 43.6vw;
    }

    .npc1 {
        left: -3.5vw;
        width: 101.7vw;
        top: 39.3vw;
    }

    .bottombg {
        width: 100vw;
        height: 25.6vw;
        background: url(../images/topbgbottomm.png) no-repeat;
        background-size: 100% auto;
    }
}


/*========== section_2 ===========*/
.section_2 {
    position: relative;
    width: 100vw;
    height: 41.7vw;
    background: url(../images/s2bg.jpg) no-repeat;
    background-size: 100% auto;
    overflow: hidden;
}

.rttext {
    display: block;
    width: 33vw;
    height: 2.2vw;
    margin: 2.4vw auto;
}

.rttextm {
    display: none;
}

.gifeboxtext {
    position: absolute;
    width: 16vw;
    height: 5.3vw;
    top: 8vw;
    right: 34.5vw;
    background: url(../images/rt041.png) no-repeat;
    background-size: 100% auto;
}

.giftBox {
    width: 57vw;
    height: 22.8vw;
    margin: 0 auto;
}

.giftBox ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
}

.giftBox li {
    width: 13vw;
    margin: 0 0.5vw;
}

.gift4 {
    width: 15.5vw !important;
    margin-left: -1.5vw !important;
}

.share {
    width: 13vw;
    height: 3.2vw;
    margin: 4vw auto 3vw auto;
}

.share ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.share li {
    width: 3.2vw;
    margin: 0 0.5vw;
}

@media (max-width: 768px) {
    .section_2 {
        height: 135.8vw;
        background: url(../images/s2bgm.jpg) no-repeat;
        background-size: 100% auto;
    }

    .rttext {
        display: none;
    }

    .rttextm {
        display: block;
        width: 62vw;
        height: 15.2vw;
        margin: 2.4vw auto;
    }

    .gifeboxtext {
        width: 30vw;
        height: 23.3vw;
        top: 39vw;
        right: 16.5vw;
        background: url(../images/rt041m.png) no-repeat;
        background-size: 100% auto;
    }

    .giftBox {
        width: 68vw;
        height: 100vw;
        margin: 0 auto;
    }

    .giftBox ul {
        height: 98vw;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: normal;
    }

    .giftBox li {
        width: 31vw;
        height: 31vw;
        margin: 3px 0.5vw;
    }

    .gift4 {
        width: 35.5vw !important;
        height: 52.7vw !important;
    }

    .share {
        width: 40vw;
        height: 8.2vw;
        margin: 3vw auto;
    }

    .share li {
        width: 8.2vw;
        margin: 0 1.5vw;
    }

}

/*========== section_3 ===========*/
.section_3 {
    position: relative;
    width: 100vw;
    height: 51vw;
    background: url(../images/s3bg.png) no-repeat;
    background-size: 100% auto;
    overflow: hidden;
}

.subtitle {
    width: 39.2vw;
    height: 7.2vw;
    margin: 3vw auto;
}

.storytext {
    width: 64vw;
    height: 23vw;
    background: url(../images/story.png) no-repeat;
    background-size: 100% auto;
    margin: 6.5vw auto;
}

.storybg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -99;
    background: url(../images/storybg.jpg) center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

@media (max-width: 768px) {
    .section_3 {
        height: 132.8vw;
        background: url(../images/s3bgm.jpg) no-repeat;
        background-size: 100% auto;
        overflow: hidden;
    }

    .subtitle {
        width: 78.2vw;
        height: 14.2vw;
        margin: 2.8vw auto;
    }

    .storytext {
        width: 84vw;
        height: 83vw;
        background: url(../images/storym.png) no-repeat;
        background-size: 100% auto;
        margin: 15.5vw auto;
    }

    .storybg {
        display: none;
    }
}

/*========== section_4 ===========*/
.section_4 {
    position: relative;
    width: 100vw;
    height: 51vw;
    background: url(../images/s4bg.jpg) no-repeat;
    background-size: 100% auto;
    overflow: hidden;
}

@media (max-width: 768px) {

    .section_4 {
        height: 161.4vw;
        background: url(../images/s4bgm.jpg) no-repeat;
        background-size: 100% auto;
        overflow: hidden;
    }
}


/*========== section_5 ===========*/
.section_5 {
    position: relative;
    width: 100vw;
    height: 53.7vw;
    background: url(../images/s5bg.png) no-repeat;
    background-size: 100% auto;
    overflow: hidden;
}

.subtitle4 {
    margin-top: 21vw;
}

/* .embed-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden; 
    max-width: 100%; 
}  */

/* .embed-container iframe, .embed-container object, .embed-container embed {
     position: absolute; 
     top: 0; 
     left: 0; 
     width: 100%; 
     height: 110%; 
     z-index: -99;
} */

/*-----------------------------------------------
    df-video
-----------------------------------------------*/

/* .df-video
{
    display: block;
    position: relative;
    padding: 0;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;


}

.df-video-item
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    z-index: -99;
} */

iframe {
    width: 100vw;
    height: 115vh;
    position: absolute;
    top: 0;
    z-index: -99;
}

.footercontainer {
    /* margin-top: -40.5vw; */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 94%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 99;
}

.social-icons ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.social-icons ul li {
    margin: 1vw 0.5vw;
}

.socialtext {
    width: 5vw;
    height: 1.2vw;
}

.social {
    width: 3vw;
    height: 3vw;
}

.copyright {
    width: 15vw;
    height: 0.8vw;
}



@media (max-width: 768px) {
    .section_5 {
        height: 100.4vw;
        background: url(../images/s5bgm.png) no-repeat;
        background-size: 100% auto;
        overflow: hidden;
    }

    .subtitle4 {
        margin-top: 37vw;
    }

    iframe {
        width: 120vw;
        top: -65vw;
        margin-left: -10vw;
    }

    .footercontainer {
        top: 89vw;
    }

    .social-icons ul li {
        margin: 1vw 1vw;
    }

    .socialtext {
        width: 11vw;
        height: 3.2vw;
    }

    .social {
        width: 8vw;
        height: 8vw;
    }

    .copyright {
        margin-top: 1.5vw;
        width: 32vw;
        height: 1.8vw;
    }



}