body, html {
    margin: 0;
    /* overflow: hidden; */
    -webkit-transition: opacity 400ms;
    -moz-transition: opacity 400ms;
    transition: opacity 400ms;
    /* background: url(../images/bg.jpg) center no-repeat; */
/*    background: #000000ab;*/
    background-size: cover;
}


p.title { position: relative; top: 35%; font: 700 40px "Microsoft Yahei"; color: #fff; text-align: center;}


#toptop {
    background: url(../images/slogan2.png) center no-repeat;
    width: 27vw;
    height: 43.3vw;
    top: 2.2vw;
    left: 37.5vw;
    /* -moz-background-size: cover; */
    background-size: cover;
    margin: 0 auto;
    position: absolute;
    z-index: 999;
}

#leading {
   width: 100%;
  height: 100%;
    margin:0;
    padding:0;
    position:fixed;
    background:#000;
  position:fixed;
  top: 0;
  z-index: 99;
}



.gotop {
    background: url(../images/menu_05.png) center no-repeat;
/*    -moz-background-size: cover;*/
    background-size: cover;
    width: 5.2vw;
    height: 1.92vw;
    position: absolute;
    right: 0;
    top: 88.5%;
    z-index: 5;
    list-style: none;
    margin: 0;
    padding: 0;
    cursor:pointer;
}



.gotop:hover {
    background: url(../images/menu_05_h.png) center no-repeat;
        background-size: contain;
}




#box0 {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    /* background: url(../images/0.png) center no-repeat; */
    /* -moz-background-size: cover; */
    background-size: cover;
}



#tab-demo{ width:100%; height:100%;}
  /*#tab-demo > ul{ display:block; margin:0;list-style:none;}
  .tab-title{list-style:none;}
  #tab-demo > ul > li{ display:inline-block; vertical-align:top;font-family:'微軟正黑體'; margin:0 -1px -1px 0 ; border:1px solid #BCBCBC; height:25px; line-height:25px; background:#cdcdcd;padding:0 15px;list-style:none; box-sizing:border-box;}*/
/*#tab-demo >  ul > li a{ color:#000; text-decoration:none;}
#tab-demo > ul > li.active{ border-bottom:1px solid #fff; background:#fff;}
#tab-demo > .tab-inner{ clear:both; color:#000; border:1px #BCBCBC solid;}
.tab-inner{ padding:15px; height:50px;}

*/

.tab-title {
    /* width: 7vw; */
    /* right: -.3vw; */
    /* padding-top: 4.2vw; */
    /* height: 7vw; */
    /* background: #fff; */
    /* background: url(../images/tab-title.png) center no-repeat; */
    background-size: contain;
    bottom: 17.3vw;
    position: absolute;
    z-index: 999;
    cursor: pointer;
    list-style: none;
}


.tab-title li:nth-of-type(1) {
    height: 2.1vw;
    width: 7.01vw;
    background: url(../images/news_bnt1.png) center no-repeat;
    /* -moz-background-size: cover; */
    background-size: cover;
    float: left;
    margin-right: 0.7vw;
    cursor: pointer;
        transition: all .5s;
}


.tab-title li:nth-of-type(1):hover {
    background: url(../images/news_bnt1_h.png) center no-repeat;
    /* -moz-background-size: cover; */
    background-size: cover;
}


.tab-title li:nth-of-type(2) {
    height: 2.1vw;
    width: 7.01vw;
    background: url(../images/news_bnt2.png) center no-repeat;
    /* -moz-background-size: cover; */
    background-size: cover;
    float: left;
    margin-right: 0.7vw;
    cursor: pointer;
            transition: all .5s;
}


.tab-title li:nth-of-type(2):hover {
    background: url(../images/news_bnt2_h.png) center no-repeat;
    /* -moz-background-size: cover; */
    background-size: cover;
}


.tab-title li:nth-of-type(3) {
    height: 2.1vw;
    width: 7.01vw;
    background: url(../images/news_bnt3.png) center no-repeat;
    /* -moz-background-size: cover; */
    background-size: cover;
    float: left;
    margin-right: 0.7vw;
    cursor: pointer;
            transition: all .5s;
}

.tab-title li:nth-of-type(3):hover {
    background: url(../images/news_bnt3_h.png) center no-repeat;
    /* -moz-background-size: cover; */
    background-size: cover;
}


.tab-title li:nth-of-type(4) {
    height: 2.1vw;
    width: 7.01vw;
    background: url(../images/news_bnt4.png) center no-repeat;
    /* -moz-background-size: cover; */
    background-size: cover;
    float: left;
    margin-right: 0.7vw;
    cursor: pointer;
            transition: all .5s;
}

.tab-title li:nth-of-type(4):hover {
    background: url(../images/news_bnt4_h.png) center no-repeat;
    /* -moz-background-size: cover; */
    background-size: cover;
}


#tab01 {
  width:100% ;
  height:100%;
}

#tab02 {
  width:100% ;
  height:100%;
}


#layout1 {
  width: 100%;
  height:100%;
/*  background:url(../images/0.png) center no-repeat;*/
/*    -moz-background-size: cover;*/
        background-size: cover;
}


#layout2 {
  width: 100%;
  height:100%;
  background:#AB1ECE;
  background:url(../images/3ok111.jpg) center no-repeat;
/*    -moz-background-size: cover;*/
        background-size: cover;
}



.app2019 {
width: 9vw;
    height: 9vw;
    background: url(../images/app2019.png) center no-repeat;
/*    -moz-background-size: cover;*/
    background-size: cover;
    position: fixed;
    z-index: 10;
    right: 0;
}


.scroll {
    width: 2vw;
    height: 6vw;
    background: url(../images/scroll.png) center no-repeat;
/*    -moz-background-size: cover;*/
    background-size: cover;
/*    background: #ffffff9e;*/
    position: fixed;
    bottom: 0;
    right: 0;
    cursor:pointer;
    z-index: 10;
}

/*
.scroll:hover {
    bottom: 0.1vw;
}*/

.comm_box {
width: 2.3vw;
    height: 2.3vw;
    top: 10vw;
    background: url(../images/comm_box.png) center no-repeat;
    /* -moz-background-size: cover; */
    background-size: cover;
    position: fixed;
    cursor: pointer;
    z-index: 10;
    right: 0;
}


.comm_box:hover {
-webkit-filter:brightness(1.5);
               transition: all .5s;
}





.a1 {
  width: 3vw;
  height:3vw;
/*  background:#fff000;*/
  position:absolute;
}




.comm_newyear {
    width: 2vw;
    height: 11.5vw;
    top: 0vw;
    border: none;
    background: url(../images/comm_newyear.png) center no-repeat;
    /* -moz-background-size: cover; */
    background-size: cover;
    position: fixed;
    cursor: pointer;
    z-index: 10;
    right: 0;
    transition: all .5s;
}


.comm_newyear:hover {
-webkit-filter:brightness(1.2);
               transition: all .8s;
}





.comm_gp {
width: 2.3vw;
    height: 2.3vw;
    top: 14vw;
    background: url(../images/comm_gp.png) center no-repeat;
/*    -moz-background-size: cover;*/
    background-size: cover;
    position: fixed;
    cursor: pointer;
    z-index: 10;
    right: 0;
               transition: all .5s;
}

.comm_gp:hover {
-webkit-filter:brightness(1.5);
               transition: all .8s;
}



.comm_ios {
width: 2.3vw;
    height: 2.3vw;
    top: 12vw;
    background: url(../images/comm_ios.png) center no-repeat;
    /* -moz-background-size: cover; */
    background-size: cover;
    position: fixed;
    cursor: pointer;
    z-index: 10;
    right: 0;
    transition: all .5s;
}

.comm_ios:hover {
-webkit-filter:brightness(1.5);
               transition: all .8s;
}


.comm_fb {
width: 2.3vw;
    height: 2.3vw;
    top: 16vw;
    background: url(../images/comm_fb.png) center no-repeat;
/*    -moz-background-size: cover;*/
    background-size: cover;
    position: fixed;
    cursor: pointer;
    z-index: 10;
    right: 0;
               transition: all .5s;
}

.comm_fb:hover {
-webkit-filter:brightness(1.5);
               transition: all .8s;
}


.commfb_gamer {
width: 2.3vw;
    height: 2.3vw;
    top: 18vw;
    background: url(../images/comm_gamer.png) center no-repeat;
/*    -moz-background-size: cover;*/
    background-size: cover;
    position: fixed;
    cursor: pointer;
    z-index: 10;
    right: 0;
           transition: all .5s;
}


.commfb_gamer:hover {
-webkit-filter:brightness(1.5);
               transition: all .8s;
}
/*
.commfb_ytb {
width: 2.3vw;
    height: 2.3vw;
    top: 15vw;
    background: url(../images/comm_ytb.png) center no-repeat;

    background-size: cover;
    position: fixed;
    cursor: pointer;
    z-index: 10;
    right: 0;
               transition: all .5s;
}

.commfb_ytb:hover {
    background: url(../images/comm_ytb_h.png) center no-repeat;
    background-size: cover;
}

*/



.yelogo {
    background: url(../images/logo.png) center no-repeat;
    /* background: #000fff50; */
    width: 4.2vw;
    height: 10vw;
    top: 0.5vw;
    left: 0.5vw;
    /* -moz-background-size: cover; */
    background-size: cover;
    margin: 0 auto;
    position: absolute;
        cursor: pointer;
    z-index: 9;
                   transition: all .5s;
}

.yelogo:hover {
-webkit-filter:brightness(0.8);
               transition: all .5s;
}



.logo {
    background: url(../images/slogan.png) center no-repeat;
    width: 27vw;
    height: 43.3vw;
    top: 2.2vw;
    left: 37.5vw;
    /* -moz-background-size: cover; */
    background-size: cover;
    margin: 0 auto;
    position: absolute;
    z-index: 10;
}


.play_bnt {
     background: url(../images/gogo.png) center no-repeat;
    width: 2vw;
    height: 10vw;
    top: 31.9vw;
    left: 49vw;
    /* -moz-background-size: cover; */
    background-size: cover;
    margin: 0 auto;
    position: absolute;
    z-index: 10;
    cursor: pointer;
    transition: all .5s;
}


.play_bnt:hover {
     background: url(../images/gogo_h.png) center no-repeat;
    /* -moz-background-size: cover; */
    background-size: cover;
}


.slogan {
    background: url(../images/slogan_01.png) center no-repeat;
    width: 34.5vw;
    height: 8.5vw;
    top: 34.1vw;
    left: 33vw;
    /* -moz-background-size: cover; */
    background-size: cover;
    margin: 0 auto;
    position: absolute;
    z-index: 10;
}


.go4bnt{
width: 27.5vw;
    height: 3vw;
top: 42.9vw;
    left: 36vw;
    /* background: url(../images/slogan_02.png) center no-repeat; */
    /* -moz-background-size: cover; */
    background-size: cover;
    margin: 0 auto;
    position: absolute;
    z-index: 10;
    transition: all .5s;
}


.gobnt_1 {
    width: 6.5vw;
    height: 3vw;
     background: url(../images/gobnt_1.png) center no-repeat;
    /* -moz-background-size: cover; */
    background-size: cover;
    margin-right: .5vw;
    float: left;
        cursor:pointer;
/*    transition: all .5s;*/
background-position-y:0;
}


.gobnt_1:hover {
     background: url(../images/gobnt_1.png) center no-repeat;
    /* -moz-background-size: cover; */
    background-size: cover;
    background-position-y:-3vw;
}



.gobnt_2 {
    width: 6.5vw;
    height: 3vw;
    background: #FF000070;
     background: url(../images/gobnt_2.png) center no-repeat;
    /* -moz-background-size: cover; */
    background-size: cover;
    margin-right: .5vw;
    float: left;
    cursor:pointer;
/*    transition: all .5s;*/
background-position-y:0;
}


.gobnt_2:hover {
     background: url(../images/gobnt_2.png) center no-repeat;
    /* -moz-background-size: cover; */
    background-size: cover;
        background-position-y:-3vw;
}

.gobnt_3 {
    width: 6.5vw;
    height: 3vw;
    background: #FF000070;
     background: url(../images/gobnt_3.png) center no-repeat;
    /* -moz-background-size: cover; */
    background-size: cover;
    margin-right: .5vw;
    float: left;
        cursor:pointer;
/*    transition: all .5s;*/
background-position-y:0;
}

.gobnt_3:hover {
     background: url(../images/gobnt_3.png) center no-repeat;
    /* -moz-background-size: cover; */
    background-size: cover;
        background-position-y:-3vw;
}


.gobnt_4 {
    width: 6.5vw;
    height: 3vw;
    background: #FF000070;
     background: url(../images/gobnt_4.png) center no-repeat;
    /* -moz-background-size: cover; */
    background-size: cover;
    float: left;
        cursor:pointer;
/*    transition: all .5s;*/

    background-position-y:0;
}

.gobnt_4:hover {
     background: url(../images/gobnt_4.png) center no-repeat;
    /* -moz-background-size: cover; */
    background-size: cover;
        background-position-y:-3vw;
}


#box1 {
width: 100%;
    height: 100%;
    top: 100%;
    position: absolute;
    margin: 0;
    padding: 0;
    background: url(../images/3.png) center no-repeat;
    /* -moz-background-size: cover; */
    background-size: cover;
}


.npc_job {
    width: 75vw;
    height: 100%;
    position: absolute;
/*    left: 0;*/
    z-index: 9;
/*background: #1f414e91;*/
}


.bnt360 {
    width: 4.1vw;
    height: 4.1vw;
    background: #FF8800;
    position: absolute;
    z-index: 2;
    right: 25vw;
    bottom: 5vw;
    background: url(../images/360.png) center no-repeat;
    background-size: cover;
}


.job1 {
/*    width: 27.7vw;*/
    height: 100%;
/*    background: url(../images/job1.png) no-repeat;
    background-size: contain;*/
}

.job_title1 {
    width: 48vw;
    height: 100%;
    position: absolute;
    z-index: -2;
    left: 13.6vw;
     background: url(../images/job1.png) no-repeat;
    background-size: contain;

}


.job_title2 {
    width: 48vw;
    height: 100%;
    position: absolute;
    z-index: -2;
    left: 13.6vw;
     background: url(../images/job2.png) no-repeat;
    background-size: contain;

}


.job_title3 {
    width: 48vw;
    height: 100%;
    position: absolute;
    z-index: -2;
    left: 13.6vw;
     background: url(../images/job3.png) no-repeat;
    background-size: contain;

}


.job_title4 {
    width: 48vw;
    height: 100%;
    position: absolute;
    z-index: -2;
    left: 13.6vw;
     background: url(../images/job4.png) no-repeat;
    background-size: contain;

}





.job2 {
/*    width: 27.7vw;*/
    height: 100%;
}

.job3 {
/*    width: 27.7vw;*/
    height: 100%;
}

.job4 {
/*    width: 27.7vw;*/
    height: 100%;
}


#videobg {

right: 0;
    bottom: 0;
    width: 100%;
     height: 100%;
    z-index: -1;
    position: fixed;
}

.videobg_b {
    right: 0;
    bottom: 0;
    background: #000000a3;
    width: 100%;
    height: 100%;
    z-index: -1;
    position: fixed;
}



#myVideo {

    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}



#box2 {
    width: 100%;
    height: 100%;
    position: absolute;
    margin: 0;
    padding: 0;
    top: 200%;
/*    background: url(../images/2.jpg) center no-repeat;*/
    /* -moz-background-size: cover; */
    background-size: cover;
}

.tvc_slogan {

    width: 9vw;
    height: 36vw;
    top: 7vw;
    left: 45vw;
    background: url(../images/story.png) center no-repeat;
    background-size: cover;
    background-size: cover;
    margin: 0 auto;
    position: absolute;
    z-index: 10;
    transition: all .5s;


}


.tvc01 {
/*    background: #ffff0050;*/
    width: 26vw;
    height: 17vw;
    top: 14vw;
    left: 19vw;
    background: url(../images/pv_01_h.png) center no-repeat;
    background-size: cover;
    margin: 0 auto;
    position: absolute;
    z-index: 10;
    cursor: pointer;
    transition: all .5s;
}
/* .tvc01::after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
} */

.tvc01:hover {
    background: url(../images/pv_01_h.png) center no-repeat;
    background-size: cover;
    cursor: pointer;
    transition: all .5s;
}





.tvc02 {
    width: 26vw;
    height: 17vw;
    top: 14vw;
    right: 19vw;
    background: url(../images/pv_02_h.png) center no-repeat;
    background-size: cover;
    margin: 0 auto;
    position: absolute;
    z-index: 10;
    cursor: pointer;
    transition: all .5s;
}


.tvc02:hover {
    background: url(../images/pv_02_h.png) center no-repeat;
    background-size: cover;
    cursor: pointer;
    transition: all .5s;
}




.footer {
    background: url(../images/footer.png) center no-repeat;
/*    -moz-background-size: cover;*/
    background-size: cover;
/*
    background: #00BBFF50;*/
    width: 23vw;
    height: 4vw;
    right: 0;
    bottom: 0;
    background-size: cover;
    margin: 0 auto;
    position: absolute;
    z-index: 10;
    transition: all .5s;
}


/*

.icon_li {

    float: left;
    margin-right: .8vw;
}






.light {
margin: 0 auto;
    width: 13vw;
    height: 31vw;
    position: relative;
    top: -2.7vw;
}
*/
/*.reward {
    margin: 5vw auto 0vw auto;
    width: 80%;
    height: 80%;
    background: #481750b3;
}*/

.reward {
    margin: -0.5vw auto 0vw auto;
    width: 46.9vw;
    height: 41.5vw;
    background: url(../images/reward_1.png) center no-repeat;
/*    -moz-background-size: cover;*/
    background-size: cover;
}


#copyright {
    width: 30.5vw;
    height: 2.2vw;
    background: url(../images/copyright.png) center no-repeat;
    /* -moz-background-size: cover; */
    background-size: cover;
    position: fixed;
    right: -15.5vw;
    bottom: -400%;
    z-index: 999;
    cursor: pointer;
    transition: all .5s;
}

#copyright:hover {
    right: 0vw;
}


/*---------------Swiper----------------*/

    .swiper-container {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
/*background: #fff;*/

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }


/*---------------dog----------------*/


.zoombie {
width: 9.5vw;
    height: 9.5vw;
    position: absolute;
    left: 28.8vw;
    top: 29.5vw;
    background-image: url(../images/dog.png);
    background-size: cover;
    -webkit-animation: play .8s steps(8) infinite;
    -moz-animation: play .8s steps(8) infinite;
    -ms-animation: play .8s steps(8) infinite;
    -o-animation: play .8s steps(8) infinite;
    animation: play .8s steps(8) infinite;
}



/*---------------open----------------*/


.movie_ {
/*    display: none;*/
    z-index: 10003;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    max-width: 40vw;
    width: 100%;
    height: auto;
/*    border: 1px #2C2C2C solid;
    border-radius: 5px;*/
    margin: 10% auto;
/*    padding: 5px 5px 5px 5px;*/
}



.movie2_ {
    display: none;
    z-index: 10003;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    max-width: 40vw;
    width: 100%;
    height: auto;
/*    border: 1px #2C2C2C solid;
    border-radius: 5px;*/
    margin: 10% auto;
/*    padding: 5px 5px 5px 5px;*/
}




.close_ {
    cursor: pointer;
    position: relative;
    top: 26vw;
    right: 0px;
    z-index: 99999;
    opacity: 1;
}


.close2_ {
    cursor: pointer;
    position: relative;
    top: 26vw;
    right: 0px;
    z-index: 99999;
    opacity: 1;
}




.close_ img:hover {
    transform: rotateZ(180deg);
}


.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
}

.embed-responsive-16by9 {
    padding-bottom: 56.25%;
}

.embed-responsive-item {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


.cover_ {
    width: 100%;
    height: 100%;
    background: #000000e3;
    position: fixed;
    top: 0;
    z-index: 5;
}




.cover2_ {
    width: 100%;
    height: 100%;
    background: #6D0000;
    position: fixed;
    top: 0;
    z-index: 1;
}


/*----------------- V ------------------*/

.cover_1 {

  background: #000;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 370%;
    border: 0;
    opacity: .9;
    z-index: 99;
}

.movie_1 {
    display: none;
    z-index: 10003;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    max-width: 1000px;
    width: 100vw;
    height: 80vh;
    border: 1px #2C2C2C solid;
    border-radius: 5px;
    margin: 4% auto;
    padding: 5px 5px 5px 5px;
}


.close_ {
    cursor: pointer;
    position: absolute;
    top: 102%;
    width: 2.5vw;
    height: 2.6vw;
    background-image: url(../images/closebtn.png);
    /* -moz-background-size: cover; */
    background-size: cover;
    left: 47%;
    z-index: 99999;
    opacity: 1;
    transition: all .5s;
}


.close_:hover {
-webkit-filter:brightness(1.5);
               transition: all .8s;
}


.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
}

.embed-responsive-16by9 {
    padding-bottom: 56.25%;
}

.embed-responsive-item {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}



@keyframes play {
  from { background-position:    0px;  }
  to { background-position: -76vw;  }
}