@charset "UTF-8";

body {
    font-family: "微軟正黑體", "Malgun Gothic", Dotum, Tahoma, sans-serif;
    background-color: #FFF;
    color: #000;
}
/*body::-webkit-scrollbar {
    display: none;
}*/

body{
    overflow-y: scroll;
    overflow-x: hidden;
}

.container{
    position: relative;
}
.section .container img{
    width: 100%;
}

img{
    max-width: 100%;
}

/*樣式共用區*/



/*--------------*/


/* nav */
.navbar-nav{
    float: right;
}
/* .youtube {
    display: block;
    position: absolute;
    top: 12px;
    right: 245px;
} */

/* 主視覺首頁 */

.main{
    display: none;
}
.section{
    display: none;
    position: relative;
}
.active{
    display: block;
}


/* 共用分頁選單 */
.wrapper .bt_menu{
    position: absolute;
    width: 100%;
    height: 160px;
    max-height: 25vh;
    top: 80vh;
}

.wrapper .bt_menu .page_menu{
    display: inline-block;
    width: 1170px;
    max-width: 100%;
    margin: auto;
    position: absolute;
    left: 50%;
    top: 30px;
    transform: translate(-50%,0);   
    text-align: center;
    padding: 0px;
}

.wrapper .bt_menu li{
    display: inline-block;
    cursor: pointer;
    transition: .3s all;
    text-shadow: 0px 0px 5px rgba(0,0,0,1);
}
.wrapper .bt_menu li:hover{
    
    transition: .3s all;
}
.wrapper .bt_menu .page_menu li:nth-of-type(1):hover{
    background-image: url('../images/menu_1_on.png');
}
.wrapper .bt_menu .page_menu li:nth-of-type(2):hover{
    background-image: url('../images/menu_2_on.png');
}
.wrapper .bt_menu .page_menu li:nth-of-type(3):hover{
    background-image: url('../images/menu_3_on.png');
}
.wrapper .bt_menu .page_menu li:nth-of-type(4):hover{
    background-image: url('../images/menu_4_on.png');
}
.wrapper .bt_menu .page_menu li:nth-of-type(1){
    position: relative;
    background-image: url('../images/menu_1.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 93px
}
.wrapper .bt_menu .page_menu li:nth-of-type(2){
    position: relative;
    background-image: url('../images/menu_2.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 93px
}
.wrapper .bt_menu .page_menu li:nth-of-type(3){
    position: relative;
    background-image: url('../images/menu_3.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 93px
}.wrapper .bt_menu .page_menu li:nth-of-type(4){
    position: relative;
    background-image: url('../images/menu_4.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 93px
}
/* 
.wrapper .bt_menu_fix .page_menu li:nth-of-type(1){
    width: 200px;
}
.wrapper .bt_menu_fix .page_menu li:nth-of-type(2){
    width: 400px;
}
.wrapper .bt_menu_fix .page_menu li:nth-of-type(3){
    width: 200px;
} */
/* .wrapper .bt_menu_fix .page_menu li:nth-of-type(1)::before{
    content: '霧的侵蝕';
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
}
.wrapper .bt_menu_fix .page_menu li:nth-of-type(2)::before{
    content: '萌新友善直升LV83';
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
}
.wrapper .bt_menu_fix .page_menu li:nth-of-type(3)::before{
    content: '竹林副本';
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
} */


/* 第一頁主視覺 */
.main_1{
    position: relative;
    height: 100vh;
    max-width: 100%;
    
    padding-top: 50px;
    background-image: url('../images/page1_main_bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    box-shadow: 0px 2px 25px rgba(0,0,0,1),0px 2px 25px rgba(0,0,0,1);
}
.main_1 .bg_txt{
    position: absolute;
    width: 376px;
    height: 598px;
    right: 30px;
    top: 13vh;
    background-image: url('../images/bg_txt.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    filter: contrast(200%) saturate(200%);
    opacity: .9;
    
}

.main_1 .char{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-image: url('../images/char.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}



.main_1 .bg_light{
    position: absolute;
    width: 100vw;
    height: 100%;
    left: 50%;
    top: 0px;
    transform: translate(-50%,0);
    opacity: .8;
    filter: brightness(170%);
    position: absolute;
    min-height: 100vh;
    padding-top: 50px;
    background-image: url('../images/page1_main_light.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    animation: p1light 8s ease 0s infinite;
    filter: brightness(150%) contrast(150%) saturate(300%);
    opacity: .3;
}
@keyframes p1light{
    0%{
        opacity: .8;
    }
    6%{
        opacity: .3;
    }
    7%{
        opacity: .8;
    }
    8%{
        opacity: .3;
    }
    11%{
        opacity: .3;
    }
    12%{
        opacity: .8;
    }
    20%{
        opacity: .8;
    }
    22%{
        opacity: .3;
    }
    23%{
        opacity: .8;
    }
    27%{
        opacity: .8;
    }
    28%{
        opacity: .3;
    }
    29%{
        opacity: .8;
    }
    40%{
        opacity: .8;
    }
    42%{
        opacity: .3;
    }
    47%{
        opacity: .8;
    }
    80%{
        opacity: .8;
    }
    81%{
        opacity: .3;
    }
    82%{
        opacity: .8;
    }
    83%{
        opacity: .8;
    }
    84%{
        opacity: .3;
    }
    100%{
        opacity: .3;
    }



}

.main_1 .container{
    text-align: center;
}
.main_1 .container .title {
    text-align: center;
    position: relative;
    margin: auto;
    top: 50vh;
}
.main_1 .container .title .title_1{
    position: relative;
    top: -30px;
}

.main_1 .container .title h1{
    margin: 0px auto;
}









/* 第二頁主視覺 */



/* 第三頁主視覺 */

/* 落葉樣式 */







/* 第一頁內容 */

.section .container{
    padding: 150px 0 150px 0;
}
.section_1 .wrapper_2 .container{
    padding: 0px;
}

.section .wrapper{
    position: relative;
    overflow: hidden;
}
.section_1 .wrapper img{
    margin: 50px 0px;
}


.section_1 .wrapper_1::before{
    content: '';
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
    width: 1920px;
    min-width: 100%;
    height: 100%;
    background-image: url('../images/page1_con_bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    z-index: -1;
}
.section_1 .wrapper_2{
    background-image: url('../images/page1_con2_bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    box-shadow: 0px 2px 25px rgba(0,0,0,1), 0px 2px 25px rgba(0,0,0,1);
    z-index: 1;
}

/* 第二頁內容 */
.section_2 .bg{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100vw;
    min-height: 100vh;
    height: 1080px;
    background-image: url('../images/page1_con_bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -1;
}

.section_2 .map {
    position: relative;
    margin: 100px 0;
}
.section_2 .container .map::before,
.section_2 .container .map::after{
    position: absolute;
    content: '';
    z-index: -1;
    width: 2600px;
    height: 282px;
    left: 50%;
    transform: translateX(-50%);
}

.section_2 .container .map1::before{
    background-image: url('../images/page2_content_light_W.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    top: -141px;
}
.section_2 .container .map1::after{
    background-image: url('../images/page2_content_light_W.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    bottom: -141px;
}
.section_2 .container .map2::before{
    background-image: url('../images/page2_content_light_B.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    top: -141px;
}
.section_2 .container .map2::after{
    background-image: url('../images/page2_content_light_B.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    bottom: -141px;
}





/* 第三頁內容 */
.section_3 .container{
    padding: 0px;
}
.section_3 .wrapper{
    max-height: 100vh;
    overflow: hidden;
}

.section_3 .wrapper_1 .bg{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    max-height: 100vh;
    background-image: url('../images/page3_con1_bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -1;
}
.section_3 .wrapper .res{
    position: absolute;
}
.section_3 .wrapper_1 .rab_1{
    bottom: 0px;
    right: 10%;
    max-width: 50vw;
    opacity: 0;
    animation: rab1 8s linear 0s infinite;
}
.section_3 .wrapper_1 .rab_2{
    top: 50%;
    left: 10%;
    max-width: 50vw;
    opacity: 0;
    animation: rab2 6s linear 1s infinite;
}

@keyframes rab1{
    0%{
        opacity: 0;
        bottom: 50px;
        right: 10%;
        transform: rotate(0deg);
    }
    20%{
        opacity: 1;
    }
    60%{
        opacity: 1;
    }
    80%{
        bottom: 100px;
        right: -10%;
        transform: rotate(30deg);
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}

@keyframes rab2{
    0%{
        opacity: 0;
        top: 50%;
        left: 10%;
        transform: rotate(0deg);
    }
    20%{
        opacity: 1;
    }
    60%{
        opacity: 1;
    }
    80%{
        top: 45%;
        left: 0%;
        transform: rotate(-30deg);
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}
.section_3 .wrapper_1 .gun1{
    top: 0px;
    left: 30px;
    max-width: 40vw;
    transform-origin: 50% 0%;
    transform: rotate(-5deg);
    animation: gun 6s ease-in-out 0s infinite;
}
.section_3 .wrapper_1 .gun2{
    top: 0px;
    left: 200px;
    max-width: 40vw;
    transform-origin: 50% 0%;
    transform: rotate(-5deg);
    animation: gun 4s ease-in-out 0s infinite;
}
.section_3 .wrapper_1 .gun3{
    top: 0px;
    right: -200px;
    max-width: 40vw;
    transform-origin: 50% 0%;
    transform: rotate(-5deg);
    animation: gun 8s ease-in-out 0s infinite;
}
.section_3 .wrapper_1 .gun4{
    top: 0px;
    right: 100px;
    max-width: 20vw;
    transform-origin: 50% 0%;
    transform: rotate(-5deg);
    animation: gun 3s ease-in-out 0s infinite;
}


@keyframes gun{
    0%{   
        transform: rotate(-5deg);
    }
    50%{
        transform: rotate(5deg);
    }
}

.section_3 .wrapper_1 .star{
    overflow: hidden;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-image: url('../images/page3_con1_star.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    animation: star 5s ease-in-out 0s infinite;
}

@keyframes star{
    0%{   
        opacity: 0;
        filter: blur(5px);
    }
    40%{
        opacity: 1;
        filter: blur(0px);
    }
    60%{
        opacity: 1;
        filter: blur(0px);
    }
    100%{   
        opacity: 0;
        filter: blur(5px);
    }
}

.section_3 .wrapper_1 .stove{
    bottom: -200px;
    left: 0px;
    width: 467px;
    max-width: 40vw;
    height: 814px;
    background-image: url('../images/page3_con1_fire_off.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center 75%;
    animation: stove 5s ease-in-out 0s infinite;
}
@keyframes stove{
    0%{   
        background-image: url('../images/page3_con1_fire_off.png');
    }
    40%{
        background-image: url('../images/page3_con1_fire.png');
    }
    60%{
        background-image: url('../images/page3_con1_fire.png');
    }
    100%{   
        background-image: url('../images/page3_con1_fire_off.png');
    }
}


.section_3 .wrapper_1 .bless{
    bottom: 10%;
    right: 30px;
    width: 140px;
    max-width: 30vw;
    height: 80px;
    background-image: url(https://images.mangot5.com/template/newportal/event/200529/images/btn_a_bless.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    animation: bgi_change 3s ease-in infinite;
}
@keyframes bgi_change{
    0%{   
        background-image: url(https://images.mangot5.com/template/newportal/event/200529/images/btn_a_bless.png)
    }
    50%{
        background-image: url(https://images.mangot5.com/template/newportal/event/200529/images/btn_a_bless_on.png);
    }
    100%{   
        background-image: url(https://images.mangot5.com/template/newportal/event/200529/images/btn_a_bless.png)
    }
}

.section_3 .wrapper_2 .bg{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    max-height: 100vh;
    background-image: url('../images/page3_con2_bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -1;
}
.section_3 .wrapper_2 .gun1{
    top: 15%;
    right: 15%;
    max-width: 40vw; 
}
.section_3 .wrapper_2 .char_1{
    bottom: -80px;
    left: 0%;
    max-width: 100vw; 
}

.section_3 .wrapper_2 .txt{
    bottom: 80px;
    right: 10%;
    max-width: 90vw; 
}



.section_3 .wrapper_3 .bg{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    max-height: 100vh;
    background-image: url('../images/page3_con3_bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -1;
}
.section_3 .wrapper_3 .pum1{
    bottom: -50px;
    left: -50px;
    width: 345px;
    max-width: 40vw;
    height: 309px;
    background-image: url('../images/page3_con3_pum1_off.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center 75%;
    animation: pum1 5s ease-in-out 0s infinite;
}
.section_3 .wrapper_3 .pum2{
    bottom: -50px;
    right: 10%;
    width: 355px;
    max-width: 40vw;
    height: 243px;
    background-image: url('../images/page3_con3_pum2_off.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center 75%;
    animation: pum2 5s ease-in-out 1s infinite;
}
.section_3 .wrapper_3 .pum3{
    bottom: -30px;
    right: -50px;
    width: 480px;
    max-width: 50vw;
    height: 330px;
    background-image: url('../images/page3_con3_pum3_off.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center 75%;
    animation: pum3 5s ease-in-out 3s infinite;
}





@keyframes pum1{
    0%{   
        background-image: url('../images/page3_con3_pum1_off.png');
    }
    40%{
        background-image: url('../images/page3_con3_pum1_on.png');
    }
    60%{
        background-image: url('../images/page3_con3_pum1_on.png');
    }
    100%{   
        background-image: url('../images/page3_con3_pum1_off.png');
    }
}
@keyframes pum2{
    0%{   
        background-image: url('../images/page3_con3_pum2_off.png');
    }
    40%{
        background-image: url('../images/page3_con3_pum2_on.png');
    }
    60%{
        background-image: url('../images/page3_con3_pum2_on.png');
    }
    100%{   
        background-image: url('../images/page3_con3_pum2_off.png');
    }
}
@keyframes pum3{
    0%{   
        background-image: url('../images/page3_con3_pum3_off.png');
    }
    40%{
        background-image: url('../images/page3_con3_pum3_on.png');
    }
    60%{
        background-image: url('../images/page3_con3_pum3_on.png');
    }
    100%{   
        background-image: url('../images/page3_con3_pum3_off.png');
    }
}

/* 第四頁內容 */
.section_4 .bg{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100vw;
    min-height: 100vh;
    height: 1080px;
    background-image: url('../images/page1_con_bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -1;
}




@media screen and (max-width: 1200px){
    .main_1 .bg_txt{
        display: none;
    }
}

@media screen and (max-width: 480px){
    .home img{
        width: 170px;
        /* transform: translate(-45px,5px); */
    }

    .fb{
        display: none;
    }    
    .wrapper .bt_menu .page_menu li:nth-of-type(1),
    .wrapper .bt_menu .page_menu li:nth-of-type(2),
    .wrapper .bt_menu .page_menu li:nth-of-type(3),
    .wrapper .bt_menu .page_menu li:nth-of-type(4){
        height: 50px;
    }
}

/* note */
.note.section{
    display: block;
}

.note .wrapper{
    z-index: 0;
    background-image: url('../images/page1_con3_bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


/* .footer */

.copyright {
    background: #000;
    padding: 00 0 0;
    text-align: center;
    position: relative;
    /*    top: -800px;*/
}


@media screen and (max-width: 768px){
    .navbar-nav{
        float: unset
    }
    .main_1 .container .title{
        top: 48vh;
    }
    .section_2 .wrapper::before{
        display:none;
    }
    .section .container{
        padding: 80px 0px;
    }
    .section_3 .wrapper_2 .txt{
        bottom: 0px;
        right: 5%;
        max-width: 90vw; 
    }
    .section_3 .wrapper_2 .gun1{
        top: 15%;
        right: 15%;
        max-width: 70vw; 
    }
    .section_3 .wrapper_2 .char_1{
        bottom: 0px;
        
    }
    .section_2 .container img{
        margin: 0px 0;
    }
    
    
}

@media screen and (max-width: 991px){
    .container {
        width: 100vw;
    }
    
    
}


@media (max-width:1200px) {
    /* .wrapper .bt_menu_fix .page_menu li:nth-of-type(1){
        width: 30%;
    }
    .wrapper .bt_menu_fix .page_menu li:nth-of-type(2){
        width: 40%;
    }
    .wrapper .bt_menu_fix .page_menu li:nth-of-type(3){
        width: 29%;
    } */

    
}



@media (max-width: 480px){
    .section .wrapper img{
        padding: 0px 15px ;
    }
    .main_1 .container .title{
        top: 50vh;
    }
    .wrapper .bt_menu .page_menu{
        padding: 10px 0px;
        top: 0px;
    }
    .wrapper .bt_menu .page_menu li:nth-of-type(1){
        font-size: 12px;
    }
    /* .wrapper .bt_menu_fix .page_menu li:nth-of-type(1){
        width: 30%;
    }
    .wrapper .bt_menu_fix .page_menu li:nth-of-type(2){
        width: 40%;
    }
    .wrapper .bt_menu_fix .page_menu li:nth-of-type(3){
        width: 29%;
    } */
    .wrapper .bt_menu{
        height: 70px;
        top: unset;
        bottom: 0px;
    }
    .section_1 .wrapper{
        overflow: hidden;
    }
    .section_1 .wrapper::before{
        width: 150%;
        left: 50%;
        transform: translateX(-50%);
    }

 
    .section_1 .wrapper img{
        margin: 20px 0px;
    }
}