body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div {
    margin: 0;
    padding: 0;
    border: 0;
}


body {
    background-image: url(../game/image/banner1.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    font: 13px/20px Arial, Helvetica, sans-serif;
    color: #525252;
    background-color: #17153d;
    position: relative;
    min-width: 960px;
    height: 100%;
    
}

.list_Rules ul {
    list-style: decimal;
    padding-left: 20px;
}
.add:hover {
    width: 50px;
    height: 50px;
    background: #000;
    text-align: center;
    cursor: pointer;
    position: inherit;
    z-index: 2;
    float: right;
     
}


.add {
    width: 50px;
    height: 50px;
    background: #e11515;
    text-align: center;
    cursor: pointer;
    position: inherit;
    z-index: 2;
    float: right;
     
}
.add div {
    height: 6px;
    background: white;
    display: inline-block;
    transition: 0.3s;
    width: 40px;
    
}

.add .add2 {
  margin-top: 15%;
  transform-origin: left;
  border-radius:3px;
}
.add .add3 {
  margin-top: 15%;
  transform-origin: left;
  border-radius:3px;    
}
.add .add4 {
  margin-top: 15%;
  transform-origin: left;
  border-radius:3px;    
}

.addfulid {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #000000ed;
    z-index: 1;
    top: 0%;
    transition: 1s;
    opacity: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    font-size: 35px;
    color: white;
    font-family: 微軟正黑體;
    justify-content: center;
}


/*===============================
         customer
===============================*/

#customer .return-to-service {
    font-family:'微軟正黑體', Arial,  'Microsoft JhengHei';
    position: fixed;
    right: 0px;
    top:255px;
    width: 90px;
    line-height: 40px;
    height: 40px;
    text-align: center;
    font-style:initial;
    font-size: 20px;
    font-weight: bold;
    z-index:999;
    color: #fff;
    cursor: pointer;
    background:#e11515;
  border-radius:3px;
  -webkit-transition: .5s; 
  -moz-transition:.5s; 
  -ms-transition:.5s; 
  -o-transition:.5s;
    transition: .5s;
}

#customer .return-to-service:hover {
    background:#ff0000;
    color: #fff;
}

#customer .return-to-service img{
  float: left;
  padding-left: 5px;
}


@media screen and (max-width: 640px) {
  .addfulid {
    height: 700px;
  }
}
@media screen and (max-width: 360px) {
  .addfulid {
    height: 640px;
  }
}
.addfulid title {
  width: 40%;
  height: 700px;
  border: 3px solid white;
  position: fixed;
  display: none;
}
@media screen and (max-width: 1220px) {
  .addfulid title {
    width: 50%;
  }
}
@media screen and (max-width: 640px) {
  .addfulid title {
    height: 360px;
  }
}
@media screen and (max-width: 360px) {
  .addfulid title {
    height: 360px;
    width: 80%;
  }
}

.addfulid div {
  cursor: pointer;
  transition: 0.3s;
  position: relative;
  height: 99px;
 
  text-align: center;
  display: none;
}
@media screen and (max-width: 640px) {
  .addfulid div {
   
    height: 70px;
  }
}
@media screen and (max-width: 360px) {
  .addfulid div {
    
    height: 70px;
  }
}
.addfulid div a {
  display: block;
  margin-top: 23%;
  animation: jeff 0.3s linear 0.7s forwards;
  text-decoration: none;
  color: white;
  transition: 0.3s;
}

@media screen and (max-width: 1220px) {
  .addfulid div a {
    font-size: 40px;
  }
}
@media screen and (max-width: 640px) {
  .addfulid div a {
    font-size: 40px;
  }
}
@media screen and (max-width: 640px) {
  .addfulid div a:nth-child(1) {
    font-size: 35px;
  }
}


@media screen and (max-width: 375px) {
  body {
    width: 417px;
  }
    .addfulid div {
    height: 70px;
}
    

}
@media screen and (max-width: 360px) {
  .addfulid div a {
    font-size: 40px;
  }
    

}

.addfulid div a:hover {
  color: orange;
  letter-spacing: 4px;
}


@keyframes jeff {
  0% {
    margin-top: 23%;
  }
  100% {
    margin-top: 0%;
  }
}
@keyframes circle {
  0% {
    padding: 30%;
  }
  100% {
    padding: 0%;
  }
}
@keyframes final {
  0% {
    padding: 30%;
  }
  100% {
    padding: 0%;
  }
}


.mid {
  width: 100%;
  display: inline-flex;
  justify-content: center;
}

.content {
  width: 300px;
  height: 300px;
}
.content img {
  width: 100%;
}

div.signin {
  display: inline-flex;
  font-size: 25px;
  margin-top: 2%;
  justify-content: center;
}
@media screen and (max-width: 640px) {
    div.signin {
        font-size: 12px;
  }
}
div.signin span {
  margin-left: 6%;
  font-family: 微軟正黑體;
}
div.signin span:hover {
  color: orange;
  transition: 0.5s;
}

.signinup {
  position: fixed;
  width: 100%;
  height: 900px;
  background: rgba(0, 0, 0, 0.5);
  z-index: 0;
  top: 0%;
  transition: 1s;
  opacity: 0;
  display: inline-flex;
  font-family: 微軟正黑體;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.sign {
    width: 20%;
    height: 250px;
    background: #ffffff94;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 0;
    opacity: 0;
    transition: 1s
}

.sign input {
    border: 0px solid #d94386;
    border-bottom: 1.5px solid rgba(0, 0, 0, 0.5);
    background: rgba(86, 39, 39, 0);
    padding: 22px 0px;
    outline: medium;
    width: 90%;

}

input::placeholder {
  color: white;
}


html {
    width: 100%;
}
 a[href^="tel:"] {
color: inherit;
text-decoration:none;
}

*{   
    
    margin: 0;
    padding: 0;
    
}

span{
    color: #ef666b;
    font-family:Microsoft JhengHei;
    font-weight: bold;
}

h3{
    
    color: #FFF;
    font-family:Microsoft JhengHei;
    font-weight: bold;
    height: 26px;
    line-height: 26px;
    font-size: 24px;
}
h4{
    color: #33807a;
    font-size: 16px;
    font-family:Microsoft JhengHei;
    font-weight:bold;
}
a {
    text-decoration: none;
    color: inherit;
    outline: none;
    transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
}
img{border:none;}
li{
    color: #525252;
    font-size: 16px;
}

.list_Rules ul li {
    margin-bottom: 3px;
    line-height: 1.8;
    text-align: left;
}

body nav {
    position: absolute;
    right: 0;
    color: white;
    top: 0;
}

body nav ul {
    padding: 0;
    margin: 0;
    padding: 5px;
}

body nav ul li {
    display: inline-block;
    border: 1px solid #ffffff33;
    width: 140px;
    text-align: center;
}

body nav ul li a {
    padding: 10px;
    display: block;
    color: #FFF;
    border-width: 1px;
    border-style: solid;
    border-radius: 9px;
    font-family:Microsoft JhengHei;
}

body button {
      cursor: pointer;
}

.myBox{
    margin:60px auto 0;
}

.myBox ul{
    margin:0 auto 0;
    position:relative;
    width:220px;
    height:220px;
    overflow:hidden;
}

.myBox li{
    width:100px;
    height:100px;
    text-align:center;
    line-height:100px;
    font-size:24px;
    -webkit-border-radius: 9;
    -moz-border-radius: 9;
    border-radius: 9px;
    font-family: Arial;
    
    color: #ffffff;
    text-shadow: black 0.1em 0.1em 0.2em;
}

.myBox li.on{
        background: rgb(255, 40, 40);
    
    

}

.logo {
    top: 0;
    left: 0;
    z-index: 1;
    position: inherit;
}

.text{
    height:300px;
    width:300px;
    margin:116px 117px 0;
    font-size:20px;
    line-height:50px;
    text-align:center;
    
}

.bt,.jg,.zt{text-align:center;width:200px;cursor:pointer;}
.bt{
    width:192px;height:192px;cursor:pointer;background-image: url(image/index-icon7.gif);background-repeat:no-repeat;overflow: hidden;position:relative;
    top:0px;
    left:0px;
    }
.ot{
    width: 220;
    height: 220px;
    margin: 95px 101px 30px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
}
em{font-size:30px;font-style:normal;
}

body .enter {
    padding-left: 3px;
}
body .enter {
    position: absolute;
    font-size: 16px;
    width: 100%;
    text-align: center;
    font-family: "Microsoft YaHei";
}


body button:hover {
    background-image: linear-gradient(to top, #22f1f1 0%, #f2b348 100%);
    color: #FFF;
    border-radius: 9px;
    font-size: 18px;
    border-style: solid;
    font-family: Microsoft JhengHei;
    width: 90px;
    height: 32px;
    border-style: none;
    box-shadow: 0px 15px 10px -15px #000;
}

body button {
    background-image: linear-gradient(to top, #ef636b 0%, #f2b049 100%);
    color: #FFF;
    border-radius: 9px;
    font-size: 18px;
    border-style: solid;
    font-family: Microsoft JhengHei;
    width: 90px;
    height: 32px;
    border-style: none;
    box-shadow: 0px 15px 10px -15px #000;
}




.btn1{
  background: #fef4e5;
  box-shadow:1px 1px 3px 2px rgba(20%,20%,40%,0.5) inset;
}

.btn2{
  background: #fef4e5;
  box-shadow:1px 1px 3px 2px rgba(20%,20%,40%,0.5) inset;
}

.btn3{
  background: #fef4e5;
  box-shadow:1px 1px 3px 2px rgba(20%,20%,40%,0.5) inset;
}

/***********/


.lottery-center {
    background: url(image/index-icon7.png)no-repeat;
    -webkit-background-size: 100% 100%;
    background-size: 50% 50%;
    -webkit-box-shadow: -1px -1px 5px 2px rgba(0, 0, 0, 0) inset!important;
    -moz-box-shadow: -1px -1px 5px 2px rgba(0, 0, 0, 0) inset!important;
    box-shadow: -1px -1px 5px 2px rgba(0, 0, 0, 0) inset!important;
    -webkit-transition: all 100ms;
    -moz-transition: all 100ms;
    -ms-transition: all 100ms;
    -o-transition: all 100ms;
    transition: all 100ms;
    
}
.lottery-center:active {
    -webkit-transform: scale(.98);
    -moz-transform: scale(.98);
    -ms-transform: scale(.98);
    -o-transform: scale(.98);
    transform: scale(.98);
}

.dot-menu1,
.dot-menu2 {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 480px;
    height: 480px;
}
.dot-menu2 {

}
.dot-menu1 li,
.dot-menu2 li {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 5px 2px #fff;
    -moz-box-shadow: 0 0 5px 2px #fff;
    box-shadow: 0 0 5px 2px #fff;
}
.dot-menu2 li {
    background: yellow;
}
.dot-a1 {top: 7px;left: 24px;}
.dot-a2 {top: 7px;left: 74px;}
.dot-a3 {top: 7px;left: 124px;}
.dot-a4 {top: 7px;left: 174px;}


.dot-a6 {top: 29px;left:2px;}
.dot-a7 {top: 79px;left: 2px;}
.dot-a8 {top: 129px;left: 2px;}
.dot-a9 {top: 179px;left: 2px;}


.dot-a11 {top: 205px;right: 182px;}
.dot-a12 {top: 205px;right: 132px;}
.dot-a13 {top: 205px;right: 82px;}
.dot-a14 {top: 205px;right: 32px;}


.dot-a16 {bottom: 182px;right: 10px;}
.dot-a17 {bottom: 132px;right: 10px;}
.dot-a18 {bottom: 82px;right: 10px;}
.dot-a19 {bottom: 32px;right: 10px;}


.dot-b1 {top: 7px;left: 24px;}
.dot-b2 {top: 7px;left: 74px;}
.dot-b3 {top: 7px;left: 124px;}
.dot-b4 {top: 7px;left: 174px;}


.dot-b6 {top: 29px;left:2px;}
.dot-b7 {top: 79px;left: 2px;}
.dot-b8 {top: 129px;left: 2px;}
.dot-b9 {top: 179px;left: 2px;}


.dot-b11 {top: 205px;right: 182px;}
.dot-b12 {top: 205px;right: 132px;}
.dot-b13 {top: 205px;right: 82px;}
.dot-b14 {top: 205px;right: 32px;}


.dot-b16 {bottom: 182px;right: 10px;}
.dot-b17 {bottom: 132px;right: 10px;}
.dot-b18 {bottom: 82px;right: 10px;}
.dot-b19 {bottom: 32px;right: 10px;}


body .index-box .headPage .tishiChouJiang {
   position: absolute;
    top: 3%;
    font-size: 16px;
    width: 100%;
    text-align: center;
    color: #177b1b;
    font-family: "Microsoft YaHei";
    z-index: 999;

}
body .index-box .headPage .tishiChouJiang span {
    padding-left: 3px;
    text-decoration: underline;
    cursor: pointer;
}
.inputInfo.active {
    top: 50%;
    visibility: visible;
    width: 360px;
    height: 300px;
}

.inputInfo {
    visibility: hidden;
    position: fixed;
    top: 60%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 10003;
    width: 360px;
    height: 300px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.4);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

body .goldContent {
    margin: 0 auto;
    width: 100%;
    height: auto;
}


body .goldContent .list_Content.paiMingAllDiv .contentDiv {
    width: 100%;
    height: auto;
}
body .goldContent .list_Content {
    width: 100%;
    height: auto;
    background-image: linear-gradient(to top, #e29615 0%, #ff9900 100%);
    width: 90%;
    padding-bottom: 3%;
    margin: 0 auto;
    margin-top: 23px;
    box-shadow: 1px 1px 3px 2px rgba(20%,20%,40%,0.5);
    border-radius: 9px;
}

body .goldContent .list_Content .titleDiv {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    height: 57px;
    overflow: hidden;
    top: 14px;
}
body .goldContent .list_Content .titleDiv .title_Div {
    width: 100px;
    height: auto;
    margin: 0 auto;
    padding: 5px 0;
    font-family: "Microsoft YaHei";
    font-size: 22px;
    position: absolute;
    left: 50%;
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    text-align: center;
    
}

body .goldContent .list_Content.rulesActivity .list_Rules {
    width: 82%;
    padding: 6% 6%;
    margin: 0 auto;
    background: #FFF;
    position: relative;
    overflow: hidden;
}


body .goldA {
    margin: 0 auto;
    width: 100%;
    height: auto;
    
}

body .bonus-list{
    text-align: center;
    margin: 50px 0;
}
body .bonus-list img{
    margin-top: 10px;
}

body .goldA .list_C {
    width: 100%;
    height: auto;
    background-image: linear-gradient(to top, #b11414 0%, #d61212 100%);
    width: 90%;
    padding-bottom: 3%;
    margin: 0 auto;
    margin-top: 15px;
    box-shadow: 1px 1px 3px 2px rgba(20%,20%,40%,0.5);
    border-radius: 9px;
   
    
}

body .goldA .list_C .titleA {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    height: 57px;
    overflow: hidden;
    top: 14px;
}

body .goldA .list_C .titleA .title_B {
    width: 100px;
    height: auto;
    margin: 0 auto;
    padding: 5px 0;
    
    font-family: "Microsoft YaHei";
    font-size: 22px;
    position: absolute;
    left: 50%;
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    text-align: center;
    
}
body .goldA .list_C.rulesB .list_frame {
    width: 82%;
    padding: 4% 6%;
    margin: 0 auto;
    background: #fff;
    position: relative;
    overflow: hidden;
}

body .goldA .list_C.rulesB .list_frame span.list_Time {
    width: 54%;
    text-align: left;
}

body .goldA .list_C.rulesB .list_frame span.list_Time {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #525252;
    font-family: 微軟正黑體, Arial, sans-serif;
    text-align: center;
    line-height: 28px;
}

body .goldA .list_C.rulesB .list_frame span.list_Things {
    width: 39%;
    
}

body .goldA .list_C.rulesB .list_frame span.list_Things {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #525252;
    font-family: 微軟正黑體, Arial, sans-serif;
    text-align: center;
}


body .goldA .list_C .titleA .icon {
    color: #FFF;
    cursor: pointer;
    float: right;
    width: 5%;
    margin-right: 29px;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.7));
}


body .goldA .list_C .titleA .icon1 {
    color: #FFF;
    cursor: pointer;
    float: right;
    width: 5%;
    margin-right: 21px;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.7));
}


body .goldA .list_C .bg_Dashed {
    width: 100%;
    height: 3px;
    border-top: solid;
    margin: 9px auto;
    color: #ef666b;
    margin-bottom: 10px;
    -moz-transform: scaleY(0.6);
    -ms-transform: scaleY(0.6);
    -webkit-transform: scaleY(0.6);
    transform: scaleY(0.6);
}

body .goldA .rulesB list_C .all_List_Div{
    height: 190px;
    overflow: hidden;
    position: relative;
}

body .goldA .list_C .all_List_Div .all_List_Div ul {
    width: 100%;
    height: auto;
}

ul{
    list-style: none;
}
@media screen and (max-width: 1440px){
body .linelink{margin: 1% 35%;}
}
@media screen and (max-width: 1024px){
body .linelink {margin: 1% 30%;}
body {
    background-image: url(../game/image/banner-1024px.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}  
    body {min-width:100%;}
}

@media screen and (max-width: 823px){
body .linelink{margin: 1% 25%;}
}

@media screen and (max-width: 768px){
body {
    background-image: url(../game/image/banner-768px.jpg);
    background-repeat: no-repeat;
    background-size: auto;}
 
    body nav ul li {width: 92px;}
    body .enter {position: relative;font-size: 16px;text-align: center;font-family: "Microsoft YaHei";z-index: 999;}
    body button{margin-left: 300px;}
    .myBox{margin: 130px auto 0;}
}

@media screen and (min-width: 768px){
    
.goldContent {
    width: 768px!important;
}
    .goldA{
    width: 768px!important; 
    }
}

@media screen and (max-width: 414px) and (min-width: 320px){
    
    .addfulid div {height: 77px;}
    .addfulid div a:nth-child(1) {font-size: 35px;}
    body button{margin-left: 320px;}
    body .linelink{margin: 1% 5%;padding: 3% 0;}
}
@media screen and (max-width: 380px){

 .list_C,.list_Content{left: 5%}   

}
@media screen and (max-width: 375px){
    body {background-image: url(../game/image/banner-375px.jpg);}
}
@media screen and (max-width: 360px){
    body {background-image: url(../game/image/banner-360px.jpg);}
}
@media screen and (max-width: 320px){
    body {background-image: url(../game/image/banner-320px.jpg);}
}





/*---------table----------*/


tr {
    height: 25px;
    background-color: #e0e0e0;
}

.wcd-th {
    width: 11%;
}
th {
    color: #fff;
    background: #34b3ff;
    text-align: center;
    padding: 5px!important;
    font-family: Microsoft JhengHei;
}
td {
    color: #717171;
    padding: 5px!important;
    text-align: center;
    font-family: Microsoft JhengHei;
}




/*---------標語----------*/
.loginSuccess{
  display: block;
  text-align: center;
}

.joinline{
  color: #fff;
  font-size: 17px;
  font-family: Microsoft JhengHei;
  line-height: 24px;
  font-weight: bold;
  display: block;
  text-align: center;
  z-index: 999;
  position: relative;
}
.linelink{
  border-radius: 20px;
  margin: 1% 38%;
  padding: .5% 0;
  background: #3eb13a;
}

.linelink a{
  font-size: 20px;
  font-style: italic;
  color: #1200ff;
  text-decoration: underline;
}

.linelink a:hover{
  color: #000;
}