@charset "UTF-8";
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 微軟正黑體,'Arial';
}

body {
  font-size: 16px;background-color: #000;overflow-x: hidden;
}

.anone{display: none;}
.wrap {
  width: 100%;
  height: 896px;
  /*background-image: url("../images/bg.png");*/
  background-position: center center; background-repeat: no-repeat;
}

.wrap .wrap-inner {
  width: 1000px;
  height: 896px;
  margin: 0 auto;
  position: relative;
}

.wrap .wrap-inner .menu-group {
    width: 100%;
    height: 63px;
    font-size: 0;
    position: absolute;
    margin: 0 auto;
    padding: 0 0;
    top: 0;
    left: -80px;
    z-index: 100;
    /* background-image: url(../images/menu-line.png); */
    background-color: #000;
}

.wrap .wrap-inner .menu-group a {
  display: inline-block;
/*  width: 133px;*/
  height: 57px;
  background-image: url("../images/menu.png");
}

.wrap .wrap-inner .menu-group a:nth-child(1) {
    width: 125px;
  background-position: 0px 0;
}

.wrap .wrap-inner .menu-group a:hover:nth-child(1) {
     width: 125px;
  background-position: 0px -57px;
}

.wrap .wrap-inner .menu-group a:nth-child(2) {
     width: 125px;
  background-position: -125px 0;
}

.wrap .wrap-inner .menu-group a:hover:nth-child(2) {
  background-position: -125px -57px;
}

.wrap .wrap-inner .menu-group a:nth-child(3) {
     width: 110px;
  background-position: -250px 0;
}

.wrap .wrap-inner .menu-group a:hover:nth-child(3) {
      width: 110px;
  background-position: -250px -57px;
}

.wrap .wrap-inner .menu-group a:nth-child(4) {
     width: 110px;
  background-position: -350px 0;
}

.wrap .wrap-inner .menu-group a:hover:nth-child(4) {
     width:110px;
  background-position: -350px -57px;
}

.wrap .wrap-inner .menu-group a:nth-child(5) {
     width: 150px;
  background-position: -460px 0;
}

.wrap .wrap-inner .menu-group a:hover:nth-child(5) {
     width: 150px;
  background-position: -460px -57px;
}


.wrap .wrap-inner .menu-group a:nth-child(6) {
    
    width: 180px;
  background-position: -605px 0;
}

.wrap .wrap-inner .menu-group a:hover:nth-child(6) {
    width: 180px;
  background-position: -605px -57px;
}

.wrap .wrap-inner .menu-group a:nth-child(7) {
    
    width: 190px;
  background-position: -786px 0;
}

.wrap .wrap-inner .menu-group a:hover:nth-child(7) {
    width: 190px;
  background-position: -786px -57px;
}

/*

.wrap .wrap-inner .menu-group a:nth-child(8) {
    
    width: 100px;
  background-position: -895px 0;
}

.wrap .wrap-inner .menu-group a:hover:nth-child(8) {
    width: 100px;
  background-position: -895px -57px;
}

*/



.wrap .wrap-inner .logo {
     width: 450px;
    height: 250px;
    position: absolute;
    top: 100px;
    left:250px;
    z-index: 100;
}

.wrap .wrap-inner .logo img {
  width: 450px;
}

.wrap .wrap-inner .video-btn {
  width: 159px;
  height: 138px;
  position: absolute;
  top: 671px;
  left: 288px;
  cursor: pointer;
  z-index: 2;
}

.wrap .wrap-inner .download-btn {
  width: 159px;
  height: 138px;
  position: absolute;
  top: 559px;
  left: 422px;
  cursor: pointer;
  z-index: 2;
}

.wrap .wrap-inner .memeber-btn {
  width: 159px;
  height: 138px;
  position: absolute;
  top: 607px;
  left: 572px;
  cursor: pointer;
  z-index: 2;
}

.wrap .wrap-inner .sign-btn {
  width: 172px;
  height: 191px;
  position: absolute;
  top: 419px;
  left: 528px;
  cursor: pointer;
  z-index: 2;
}

.wrap .wrap-inner .page-group {
  width: 983px;
  height: 730px;
  position: absolute;
  top: 88px;
  left: 50%;
  transform: translate(-50%, 0%);
  overflow: hidden;
}

.wrap .wrap-inner .page-group.active {
  z-index: 9999;
}

.wrap .wrap-inner .page-group .pages {
  width: 983px;
  height: 730px;
  position: absolute;
  top: 100%;
  left: 0;
  background-image: url("../images/page-bg.png");
    border: 8px solid #000;
}

.wrap .wrap-inner .page-group .pages.active {
  z-index: 9999;
}

.wrap .wrap-inner .page-group .pages .title {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
}

.wrap .wrap-inner .page-group .pages .pages-content {
      width: 850px;
    height: 660px;
    margin-right: auto;
    margin-left: auto;
    display: none;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 50px 0 0 100px;
    /* top: 20px; */
}


/*
.wrap .wrap-inner .page-group .pages .pages-content {
  width: 920px;
  height: 478px;
  margin-right: auto;
  margin-left: auto;
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
}
*/

.wrap .wrap-inner .page-group .pages .pages-content.active {
  display: block;
}

.wrap .wrap-inner .page-group .pages .single-page {
  height: 578px;
  padding-top: 1rem;
}

.wrap .wrap-inner .page-group .pages .page-text {
  width: 800px;
  margin: 0px auto 28px;
  color: #fff;
  line-height: 2;
}

.wrap .wrap-inner .page-group .pages .close-btn {
  width: 32px;
  height: 32px;
  background-image: url("../images/close-btn.png");
  position: absolute;
  top: 10px;
  right: 12px;
  cursor: pointer;
  z-index: 2;
}

.wrap .wrap-inner .page-group .pages .table-box {
  width: 800px;
  margin: 0 auto;
  position: relative;
}

.wrap .wrap-inner .page-group .pages .table-box:after {
  content: '';
  display: table;
  height: 0;
  clear: both;
}

.wrap .wrap-inner .page-group .pages .tables {
      width: 680px;
    color: #fff;
    text-align: center;
    border-collapse: collapse;
    margin: 18px 50px;
    float: right;
}

.wrap .wrap-inner .page-group .pages .tables thead tr th {
/*  border: 1px solid #fff;*/
  padding: 6px;
  background-color: #585757;
}

.wrap .wrap-inner .page-group .pages .tables tbody tr td {
/*  border: 1px solid #fff;*/
  padding: 10px  0px;
}


.wrap .wrap-inner .page-group .pages .table3 {
    width: 700px;
    color: #fff;
    text-align: center;
    border-collapse: collapse;
    margin: 18px 30px 18px 0px;
    float: right;
}

.wrap .wrap-inner .page-group .pages .table3 thead tr th {
  border: 1px solid #585757;
  padding: 6px;
  background-color: #585757;
}

.wrap .wrap-inner .page-group .pages .table3 tbody tr td {
  border: 1px solid #585757;
  padding: 14px;
}

.wrap .wrap-inner .page-group .pages .table3-2 {
      width: 600px;
    color: #fff;
    text-align: center;
    border-collapse: collapse;
    margin: 18px 80px 18px 0px ;
    float: right;
}

.wrap .wrap-inner .page-group .pages .table3-2 thead tr th {

  padding: 6px;
  background-color: #585757;
}

.wrap .wrap-inner .page-group .pages .table3-2 tbody tr td {
  
  padding: 10px 0px;
}




.wrap .wrap-inner .page-group .pages .tables2 {
  width: 380px;
  float: left;
}

.wrap .wrap-inner .page-group .pages .tables2:last-child {
  margin-left: 40px;
}

.wrap .wrap-inner .page-group .pages .labels {
    list-style-type: none;
    width: 150px;
    font-size: 0;
    margin: 8px auto 12px 12px;
    position: absolute;
}

/*
.wrap .wrap-inner .page-group .pages .labels {
  list-style-type: none;
  width: 880px;
  font-size: 0;
  margin: 70px auto 12px 25px;
}
*/

.wrap .wrap-inner .page-group .pages .labels .label-btn {
    display: inline-block;
    width: 160px;
    height: 33px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 33px;
    /* border-radius: 50px; */
    /* background-image: url(../images/btn.jpg); */
    margin-right: 4px;
    margin-bottom: 4px;
    cursor: pointer;
    border: 1px solid #585757;
}

.wrap .wrap-inner .page-group .pages .labels .label-btn a {
  color: #000;
  text-decoration: none;
}

.wrap .wrap-inner .page-group .pages .labels .label-btn:nth-child(5n) {
  margin-right: 0;
}

.wrap .wrap-inner .page-group .pages .labels .label-btn.active {
  color: #000;
/*     background-image: url(../images/btn-ov.jpg); */

    background-color: #fff;
  
  position: relative;
}

.wrap .wrap-inner .page-group .pages .labels .label-btn.active:before {
  content: '';
  width: 100%;
  height: 100%;
/*  background-image: url("../images/label-active.png");*/
  position: absolute;
  top: 0;
  left: 0;
}

.wrap .wrap-inner .page-group .pages .notices-box {
     width: 700px;
    color: #fff;
    margin: 10px 30px;
    float: right;
}

.wrap .wrap-inner .page-group .pages .notices-box ol > li {
  margin: 6px;
}

.wrap .wrap-inner .page-group .pages .notices-box .notice-list-s {
  margin-left: 22px;
  font-size: 14px;
  line-height: 1.5;
}

.notices-box{ width: 800px; float: left;}

.notices-box ol{margin-left: 0px;}





.wrap .wrap-inner .page-group .pages .notices-box2 {
     width: 650px;
    color: #fff;
    margin: 10px 30px;
    float: right;
}

.wrap .wrap-inner .page-group .pages .notices-box2 ol > li {
  margin: 6px;
}

.wrap .wrap-inner .page-group .pages .notices-box .notice-list-s {
  margin-left: 22px;
  font-size: 14px;
  line-height: 1.5;
}

.notices-box2{ width: 750px; float: left;}

.notices-box2 ol{margin-left: 0px;}




.wrap .wrap-inner .page-group .pages .table-title {
  color: #ff6a6a;
  width: 800px;
  margin: 0 auto;
  font-size: 24px;
  font-weight: bold;
}

.wrap .wrap-inner .page-group .pages.page2 .page2-c .tables td:nth-child(1) {
  width: 140px;
}

.wrap .wrap-inner .page-group .pages.page2 .page2-c .tables td:nth-child(2) {
  width: 160px;
}

.wrap .wrap-inner .page-group .pages.page2 .page2-c .tables td:nth-child(3) {
  width: 64px;
}

.wrap .wrap-inner .page-group .pages.page2 .page2-d .tables td:nth-child(1) {
  width: 72px;
}

.wrap .wrap-inner .page-group .pages.page2 .page2-d .tables td:nth-child(3) {
  width: 20px;
}

.wrap .wrap-inner .page-group .pages.page2 .page2-d .tables td:nth-child(4) {
  width: 80px;
}

.wrap .wrap-inner .page-group .pages.page2 .page2-e .tables td:nth-child(1) {
  width: 120px;
}

.wrap .wrap-inner .page-group .pages.page2 .page2-e .tables td:nth-child(2) {
  width: 72px;
}

.wrap .wrap-inner .page-group .pages.page2 .page2-e .tables td:nth-child(3) {
  width: 144px;
}

.wrap .wrap-inner .page-group .pages.page2 .page2-f .tables td:nth-child(1) {
  width: 144px;
}

.wrap .wrap-inner .page-group .pages.page2 .page2-f .tables td:nth-child(2) {
  width: 72px;
}

.wrap .wrap-inner .page-group .pages.page2 .page2-f .tables td:nth-child(3) {
  width: 144px;
}

.wrap .wrap-inner .page-group .pages.page2 .page2-g .tables td:nth-child(1) {
  width: 144px;
}

.wrap .wrap-inner .page-group .pages.page2 .page2-g .tables td:nth-child(2) {
  width: 72px;
}

.wrap .wrap-inner .page-group .pages.page2 .page2-g .tables td:nth-child(3) {
  width: 144px;
}

.wrap .wrap-inner .page-group .pages.page2 .page2-h .tables td:nth-child(1) {
  width: 100px;
}

.scrollbar-inner > .scroll-element.scroll-x {
  height: 0;
  bottom: 0;
}

.titlearea{     width: 800px;
    margin: 0 auto;
    padding: 0 0;
    margin: 10px auto; color: #fff;}


.tablea{ color: #f4d501; font-weight: bold;}

.title_txt{ color: #fff; font-size: 20px; font-weight: bold;}

/*
.r_man{ width: 158px;     height: 534px;
    background-image: url(../images/man1.png);
    position: absolute;
    background-repeat: no-repeat;left:30px;}


.r_man2{ width: 178px;     height: 528px;
    background-image: url(../images/man2.png);
    position: absolute;
    background-repeat: no-repeat;}


.r_man3{width:212px;      height: 552px;
    background-image: url(../images/man3.png);
    position: absolute;
    background-repeat: no-repeat;left:-10px; }

.r_man4{width:237px;     height: 559px;
    background-image: url(../images/man4.png);
    position: absolute;
    background-repeat: no-repeat;}

.r_man5{ width:268px;    height: 652px;
    background-image: url(../images/man5.png);
    position: absolute;
    background-repeat: no-repeat;left:-9px;}

.r_man6{ width:204px;    height: 480px;
    background-image: url(../images/man6.png);
    position: absolute;
    background-repeat: no-repeat;}


.r_man7{ width:227px;    height: 549px;
    background-image: url(../images/man7.png);
    position: absolute;
    background-repeat: no-repeat; bottom:-22px; }

.r_man8{ width:245px;    height: 378px;
    background-image: url(../images/man8.png);
    position: absolute;
    background-repeat: no-repeat;bottom: 50px;}

.r_man9{ width:273px;    height: 523px;
    background-image: url(../images/man9.png);
    position: absolute;
    background-repeat: no-repeat; bottom:5px; }

.r_man10{ width:160px;    height: 524px;
    background-image: url(../images/man10.png);
    position: absolute;
    background-repeat: no-repeat; left: 30px; bottom:5px; }

.r_man11{ width:160px;    height: 524px;
    background-image: url(../images/man10.png);
    position: absolute;
    background-repeat: no-repeat; left: 30px;}
.r_man12{ width:201px;    height: 566px;
    background-image: url(../images/man11.png);
    position: absolute;
    background-repeat: no-repeat; left: 30px;}
*/



.girlarea{ width: 1392px; height: 852px;position: absolute;    left: -203px;
    top:0px; z-index: 10;}

.f1area{ width: 677px; height: 606px; position: absolute;   left: 388px;
    top: 180px; z-index: 8;}

.f2area{ width: 399px; height:612px; position: absolute;      right: -55px;
    top: 65px;}


.cr{     width: 1000px;
    height: auto;
    position: absolute;
    /* position: fixed; */
    bottom: -61px;
    z-index: 100;}

.loginarea{ width:143px; height: 137px;position: absolute; z-index: 10;bottom: 70px;
    right:0px;z-index: 100;}

.slognarea{ width: 731px; height: 241px; position: absolute; z-index: 10;bottom: 50px;
    left: 150px; z-index: 20;}

.service_lk{ background-color: #fecf07; color: #000; padding:0px 5px; text-decoration: none;}

.act_lk{     background-color: #19d9e5;
    line-height: 30px;
    color: #000;
    padding: 0px 5px;
    text-decoration: none;
    font-size: 22px;
    padding: 10px 20px;
    /* padding: 20px 20px; */}




.right_top_area{ width: 230px;
    height: 70px;
    position: absolute;
    right: -140px;
    top: 10px;
    z-index: 100;
    list-style-type: none;}

.right_top_area li.bt-baha a{ width: 45px; height: 46px; display: block; float: left; background-image: url(../images/bt-comm01.png); background-position: left top; text-indent: -9999px;margin-left:15px; }
.right_top_area li.bt-gamebase a{ width: 45px; height: 46px; display: block; float: left; background-image: url(../images/bt-comm02.png); background-position: left top; text-indent: -9999px;margin-left:15px; }
.right_top_area li.bt-fb a{ width: 45px; height: 46px; display: block; float: left; background-image: url(../images/bt-comm03.png); background-position: left top; text-indent: -9999px;margin-left:15px; }

.right_top_area li.bt-youtube a{ width: 45px; height: 46px; display: block; float: left; background-image: url(../images/bt-comm04.png); background-position: left top; text-indent: -9999px;margin-left:15px; }


.right_top_area li a:hover{background-position: left bottom; }








#buttonarea{    width: 501px;
    height: 310px;
    display: block;
    top: 300px;
    position: absolute;
    z-index: 100;}


/****按鈕*****/

.nav__item {
  float:left;
  width: 100px; height: 100px;
  padding: 0px 0px;
  margin: 20px 20px;
  display: inline-block;
  *display: inline;
  *zoom: 1;
  vertical-align: top;
    
    transform:rotate(45deg);   -ms-transform:rotate(45deg); /* Internet Explorer */   -moz-transform:rotate(45deg); /* Firefox */   -webkit-transform:rotate(45deg); /* Safari 和 Chrome */   -o-transform:rotate(45deg); /* Opera */
  /*    border:2px solid #00ffde; background:cover;*/
    
}

.bignav__item {
  float:left;
  width: 501px; height: 310px;
  padding: 0px 0px;
  margin:0 auto;
  display: inline-block;
  *display: inline;
  *zoom: 1;
  vertical-align: top;
    
    transform:rotate(45deg);   
    -ms-transform:rotate(45deg); /* Internet Explorer */  
    -moz-transform:rotate(45deg); /* Firefox */   
    -webkit-transform:rotate(45deg); /* Safari 和 Chrome */   -o-transform:rotate(45deg); /* Opera */

    
}

.story_title{width: 466px;
    height: 247px;
    position: absolute;
    top: 70px;
   
    background-image:url("../img/story_title.png") ;background-repeat: no-repeat;
    
    text-indent: -9999px;margin-left: 250px;

}








.index-main .nav__item {
  margin: 0;
  padding: 0;
}
.nav__item a {
  display: block;
  height: 100px;
}

.bignav__item a {
	display: block;
	height: 400px;
}

/*
.nav__item-s_r{ margin: 100px 0 0 -45px; }
.nav__item-s_r2{ margin: 180px 0 0 -180px; }
.nav__item-s_r3{ margin: 260px 0 0 -100px; }
*/
.nav__item-s_r{ margin: -25px 0px 0px -60px; }

.nav__item-s_r1{ margin:-80px 0px 0px -58px; }
.nav__item-s_r2{ margin:5px 0px 0px -55px; }
.nav__item-s_r3{ margin:-79px 0px 0px -50px; }
.nav__item-s_r4{ margin: 5px 0px 0px -50px; }
.nav__item-s_r5{ margin:88px 0px 0px -150px;}
.nav__item-s_r6{ margin: -123px 0px 0px 385px;}

.nav__item-s_r6{ margin:-78px 0px 0px -53px;}



.bignav__item a {
  background: url("../img/mainbtn1.png") 100% 0 no-repeat;
}
.bignav__item a:hover {
  background: url("../img/mainbtn1-ov.png") 100% 0 no-repeat;
}




.nav__item-a a {
  background: url("../img/01.png") 50% 0 no-repeat;
}
.nav__item-a a:hover {
  background: url("../img/01-ov.png") 50% 0 no-repeat;
}



.nav__item-s a {
  background: url("../img/mainbtn1_2.png") 50% 0 no-repeat;
}
.nav__item-s a:hover {
  background: url("../img/mainbtn1_2-ov.png") 50% 0 no-repeat;
}
.nav__item-s .nav__item--cur {
  background: url("../img/mainbtn1_2-ov.png") 50% 0 no-repeat;
}

.nav__item-q a {
  background: url("../img/mainbtn0.png") 50% 0 no-repeat;
}
.nav__item-q a:hover {
  background: url("../img/mainbtn0-ov.png") 50% 0 no-repeat;
}
.nav__item-q .nav__item--cur {
  background: url("../img/mainbtn0-ov.png") 50% 0 no-repeat;
}


.nav__item-h a {
  background: url("../img/mainbtn2.png") 50% 0 no-repeat;
}
.nav__item-h a:hover {
  background: url("../img/mainbtn2-ov.png") 50% 0 no-repeat;
}
.nav__item-h .nav__item--cur {
  background: url("../img/mainbtn2-ov.png") 50% 0 no-repeat;
}
.nav__item-f a {
  background: url("../img/mainbtn4.png") 50% 0 no-repeat;
}
.nav__item-f a:hover {
  background: url("../img/mainbtn4-ov.png") 50% 0 no-repeat;
}
.nav__item-f .nav__item--cur {
  background: url("../img/mainbtn4-ov.png") 50% 0 no-repeat;
}
.nav__item-c a {
  background: url("../img/mainbtn3.png") 50% 0 no-repeat;
}
.nav__item-c a:hover {
  background: url("../img/mainbtn3-ov.png") 50% 0 no-repeat;
}
.nav__item-c .nav__item--cur {
  background: url("../img/mainbtn3-ov.png") 50% 0 no-repeat;
}

.nav__item-b a {
  background: url("../img/mainbtn5.png") 50% 0 no-repeat;
}
.nav__item-b a:hover {
  background: url("../img/mainbtn5-ov.png") 50% 0 no-repeat;
}
.nav__item-b .nav__item--cur {
  background: url("../img/mainbtn5-ov.png") 50% 0 no-repeat;
}





#bannerarea{    width: 667px;
    height: 875px;
    padding: 10px 10px;
    position: absolute;
    right: 0;
    top: 20px; }


#slogan {   position: absolute;
    z-index: 100;
    left: 150px;
    top: 350px;}




.bt1{ width: 148px; height: 170px; position: absolute; left: 250px; top:250px;}
.bt2{ width: 148px; height: 170px; position: absolute; left: 400px; top:250px;}
.bt3{ width: 148px; height: 170px; position: absolute; left: 550px; top:250px;}
.bt4{ width: 241px; height: 81px; position: absolute; left: 350px; top:430px;}





.user-box{
    width: 600px;
    margin: 0 auto;
    text-align: center;
}
.user-img{
    display: block;
    margin: 16px auto;
}
.user-img.w6{
  width: 600px;
}
.user-box .user-subtitle{
    color:rgb(255, 175, 175);
}
.wrap .wrap-inner .page-group .pages .user.table3 thead tr th{
    padding: 14px;
    text-align: center;
    background-color: #000;
    font-weight: bold;
}
.wrap .wrap-inner .page-group .pages .user.table3 tbody tr td{
    text-align: center;
}
.wrap .wrap-inner .page-group .pages .user.table3 tbody tr td.user-td-bg{
    background-color: #000;
}
.user-img-title{
  display: block;
  margin: 12px 0;
}
.page-title{
  width: 700px;
  font-size: 24px;
  color:#fff;
  margin: 30 auto;
    text-align: center;
}
.pages-box{
  width: 800px;
  height: 600px;
  margin: 0 auto;
/*  padding: 24px;*/
  overflow-x: hidden;
  overflow-y: auto;
}
.pages-box .box-title{
    color:#fff;
    font-size: 16px;
    text-align:left;
}
.sub-title{
  color:#73f3fb;
  text-align: center;
}
.box-content{
  color:#fff;
  text-align: left;
  font-size: 16px;
}
.btn5{
  width: 148px;
  height: 170px;
  position: absolute;
      top: 250px;
    left: 700px;
}
.btn6{
  width: 148px;
  height: 170px;
  position: absolute;
  top: 250px;
  left: 98px;
}