* {
  box-sizing: border-box;
}

[v-clock] {
  display: none;
}
.highlight {
  background-color: yellow;
  /* 或者任何其他你想要的高亮样式 */
}
/* 隐藏滚动条的边框 */
*::-webkit-scrollbar {
  width: 0; /* 宽度为 0 */
  height: 0; /* 高度为 0 */
}

* {
  scrollbar-width: none; /* Firefox 兼容性 */
}
body,
dl,
dd,
ul,
ol,
h1,
h2,
h3,
h4,
h5,
h6,
p,
form,
header,
section,
article,
footer {
  margin: 0;
}
body,
button,
input,
select,
textarea {
  font: 12px/1.5 tahoma, "\5FAE\8F6F\96C5\9ED1", sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: 400;
}
em,
b {
  font-style: normal;
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
img {
  border: 0;
}
button,
input,
select,
textarea {
  font-size: 100%;
  outline: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th,
ul,
ol {
  padding: 0;
}
ul,
ol,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
@font-face {
  font-family: "f600";
  src: url(f600.ttf);
}
@font-face {
  font-family: "j600";
  src: url(j600W.ttf);
}
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
[v-cloak] {
  display: none;
}
.gray {
  filter: grayscale(100);
  pointer-events: none;
}
.main {
  width: 100%;
  height: 100%;
}
.wrap {
  width: 100%;
  height: 100%;
}
.wrap-pagination {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  top: 50%;
  left: -300px !important;
  right: auto !important;
  z-index: 9;
  transform: translate(0, -50%);
  transition: all 0.6s;
}
.wrap-pagination li {
  display: flex;
  width: auto;
  height: 66px;
  opacity: 1;
  border-radius: 0;
  background: none;
  margin: 40px 0 !important;
  cursor: pointer;
}
.wrap-pagination li:first-child {
  height: 0;
  margin: 0 !important;
}
.wrap-pagination li.swiper-pagination-bullet-active img {
  display: none;
}
.wrap-pagination li.swiper-pagination-bullet-active img:last-child {
  display: block;
}
.wrap-pagination img {
  width: auto;
  height: 100%;
}
.wrap-pagination img:last-child {
  display: none;
}
.wrap-pagination.active {
  left: 15px !important;
}
.wrap-pagination.regular {
  left: 50% !important;
  margin-left: -960px;
}
.page {
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../images/page.jpg) no-repeat top center/cover;
  overflow: hidden;
}
.special-page {
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../images/special-page.png) no-repeat top center/cover;
  overflow: hidden;
}
.page-after {
  position: absolute;
  left: 100%;
  bottom: 0;
  z-index: 4;
  pointer-events: none;
}
.page-after.regular {
  left: 50%;
  transform: translate(960px, 0);
}
.page-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1310px;
  height: 890px;
  background: url(../images/page-box.png) no-repeat center/cover;
  background-size: 100% 100%;
  position: relative;
  margin: 80px 0 0;
}
.page-box:before {
  content: "";
  width: 289px;
  height: 430px;
  background: url(../images/page-box-after.png) no-repeat center/cover;
  position: absolute;
  top: -180px;
  left: -54px;
}
.page-title {
  width: auto;
  /* height: 100px; */
  margin: -40px 0 0;
  position: relative;
}
.page-title:before {
  content: "";
  width: 96px;
  height: 151px;
  background: url(../images/page-title-before.png) no-repeat center/cover;
  position: absolute;
  top: 30px;
  left: -146px;
}
.page-title img {
  width: auto;
  height: 100%;
}
.page-box-info[lang="zh-tw"] {
  width: 481px;
  height: 102px;
  background: url(../images/info-title-tw.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.page-box-info[lang="zh"] {
  width: 481px;
  height: 102px;
  background: url(../images/info-title-zh.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.page-box-info[lang="en"] {
  width: 481px;
  height: 102px;
  background: url(../images/info-title-en.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.page-box-info[lang="id"] {
  width: 481px;
  height: 102px;
  background: url(../images/info-title-id.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.page-box-info[lang="th"] {
  width: 481px;
  height: 102px;
  background: url(../images/info-title-th.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.page-box-play[lang="zh-tw"] {
  width: 481px;
  height: 102px;
  background: url(../images/play-title-tw.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.page-box-play[lang="zh"] {
  width: 481px;
  height: 102px;
  background: url(../images/play-title-zh.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.page-box-play[lang="en"] {
  width: 481px;
  height: 102px;
  background: url(../images/play-title-en.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.page-box-play[lang="id"] {
  width: 481px;
  height: 102px;
  background: url(../images/play-title-id.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.page-box-play[lang="th"] {
  width: 481px;
  height: 102px;
  background: url(../images/play-title-th.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.page-box-game[lang="zh-tw"] {
  width: 481px;
  height: 102px;
  background: url(../images/game-title-tw.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.page-box-game[lang="zh"] {
  width: 481px;
  height: 102px;
  background: url(../images/game-title-zh.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.page-box-game[lang="en"] {
  width: 481px;
  height: 102px;
  background: url(../images/game-title-en.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.page-box-game[lang="id"] {
  width: 481px;
  height: 102px;
  background: url(../images/game-title-id.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.page-box-game[lang="th"] {
  width: 481px;
  height: 102px;
  background: url(../images/game-title-th.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.page-box-title[lang="zh-tw"] {
  width: 501px;
  height: 101px;
  background: url(../images/join-title-tw.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.page-box-title[lang="zh"] {
  width: 501px;
  height: 101px;
  background: url(../images/join-title-zh.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.page-box-title[lang="en"] {
  width: 501px;
  height: 101px;
  background: url(../images/join-title-en.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.page-box-title[lang="id"] {
  width: 501px;
  height: 101px;
  background: url(../images/join-title-id.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.page-box-title[lang="th"] {
  width: 501px;
  height: 101px;
  background: url(../images/join-title-th.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.page-box-title[lang="pt"] {
  width: 501px;
  height: 101px;
  background: url(../images/join-title-pt.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.page-box-title[lang="es"] {
  width: 501px;
  height: 101px;
  background: url(../images/join-title-es.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.page-box-h1 {
  margin-top: 40px;
  margin-bottom: 10px;
  width: 868px;
  height: 26px;
  font-size: 18px;
  padding-right: 30px;
  text-align: center;
  color: #fff1c9;
}
.page-con {
  display: flex;
  /* align-items: center; */
  position: relative;
  z-index: 3;
}
.home {
  flex-direction: column;
  justify-content: space-between;
  padding: 30px 0 60px;
  background-image: url(../images/home.jpg);
}
.home-role {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
}
.home-role.regular .home-role-left {
  left: 50%;
  margin-left: -960px;
}
.home-role.regular .home-role-right {
  left: auto;
  right: 50%;
}
.home-role.regular .home-role-right.home-role-3 {
  margin-right: -960px;
}
.home-role.regular .home-role-right.home-role-4 {
  margin-right: -960px;
}
.home-role img {
  position: absolute;
  bottom: 0;
  pointer-events: none;
}
.home-role-left {
  left: 0;
}
.home-role-right {
  left: 100%;
}
.home-role-0 {
  width: 928px;
  height: 767px;
}
.home-role-1 {
  width: 587px;
  height: 1080px;
}
.home-role-2 {
  width: 688px;
  height: 532px;
}
.home-role-3 {
  width: 778px;
  height: 454px;
  margin-left: -778px;
}
.home-role-4 {
  width: 335px;
  height: 670px;
  margin-left: -335px;
}
.home-head {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 20px;
  position: relative;
  z-index: 3;
}
.home-head .head-container {
  display: flex;
}
.home-logo {
  width: 234px;
  height: 149px;
  text-indent: -9999px;
  overflow: hidden;
  background: url(../images/logo.png) no-repeat center/cover;
}



.switch-lang-container {
  font-size: 24px;
  display: flex;
  justify-content: center;
  z-index: 10;
  margin-right: 20px;
}
.header-container .btn-group .lang-display {
  margin-top: 4px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAEIElEQVRYhZ1YO44UMRB95fGsICXYjIzNl4SElCsAQiJAIkTiCGRcZCUQ7AGIkEgIEAHkiBMQkMPM2Gg+7vq4bHdjqTVuf6rK5VevqofuvfgCIKM0IrrIOf/AoJHYRUrCskbu6lz1A6YfOjxnZzdXpc9PgB3Lk4l7UWRU2v12TJpxlKUfmmTmg+6AeOzkScAu5ec8BiWY1MqjQDopImW4Xc9ryjt7y/fpfi6LVYE9FvbevEwpvWQvhw/sBqIMmn4zgjPG73bOXxucfhAyyk0GxFWMMYTVbQCPUk6vdrtd4KvFW+/E9vK8NR5mLZbZ/xYiBU68KxKFTUoJKaXfKe0igHia/AbgHdQ1eUaQY4LXSFymlGOxDQEOBlHcbLZl2y2x6RdAj/eQrYVIL1hv1ij2DfFa/xBBDx6i7TtA9wH62VZAznjpBzPfj3q932OLY4scWYeJp0B+n0Fbz7ws4rXX2lfK/cID2ucWPjwTjTlvrGF2o8UZxIW3lEiJLMeTqalQ7rGGdtR7HspCkcXwCJ+jdxm8tDdUhwaG1+vNzg0YyyBeILJxnFJwNLQvuEc77dtgf7ajWWe4tpz9ipDVAAvLNRs0ot02y7dcG0hcemmjd/DAy3zqqOsYqcz+jmS0DIQpdGoZwQc1TVitL7+F0TwVEpbyW/v0LVmO0W+hXcEUpXVZ5gsjhbWa2lpNopkhaKEwoCevFXjzKgmcsfc9PbWz7M4w79Q+rtrMN9ebbfm6eqK5hmphEn/6qvwY/z+jZQ7MSwxtlXl1vGt8LTWYj8w8TCPCt+boEMkuLq3SJTDwyJCWeLTOLr2KlK9/aeN70Q5ZhFENb5i+xe2y668xrbN+16O+cK9Qa7HAuFkyy1WyLr0ZHpW49Mu+fmlieaGWP2c81FjKIut6pbMUVBvhVQB9o9r1vdQRW0u86K4x5+UkTSu+cv0u17fsmehpHr48j3jVPdTRvK8jX2Z9CIXRNhdmAYVWVd47AJxSQ9YKrU8dOXbcE/slq1d6pI6R5Owpa4IxvqXLn4/+QntKL3KzMl96qGBOh1hNRX1a0+ujZ6DGlecxEkaV1Mpf6lngUyqVlacOz15COOV6MoqLQb4Aryri/UxJvmK/BO9HO53upkFPNnhakd16n99IgESYGwl4KKHkXr0+URYX5xG4BkrraLbJHYajLwi4BnApbYvS6a0s0udYP5JHvOzV9ADuAPhMwLnVEZgrk9gg+95TDJNPUv/Gk3kkH9u507Mi5GtCPi82xBg+rdfxQYzxRjwaSAaXo9bG6OhTsZPZnwC4WyZjXD/bbTdXItcrA4eWjip6b96S2oiSYowft9s/V2qM6Sl1/KEphCoG6H/qyjGfDuUcsAr0ejdlwJOhElO1J1oFw5ieOAV4zct03M7W8evm72lu/4OMf2XC22bifxMHAAAAAElFTkSuQmCC) no-repeat;
  background-size: 100% 100%;
}
.switch-lang-container .lang-display {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 57px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAEIElEQVRYhZ1YO44UMRB95fGsICXYjIzNl4SElCsAQiJAIkTiCGRcZCUQ7AGIkEgIEAHkiBMQkMPM2Gg+7vq4bHdjqTVuf6rK5VevqofuvfgCIKM0IrrIOf/AoJHYRUrCskbu6lz1A6YfOjxnZzdXpc9PgB3Lk4l7UWRU2v12TJpxlKUfmmTmg+6AeOzkScAu5ec8BiWY1MqjQDopImW4Xc9ryjt7y/fpfi6LVYE9FvbevEwpvWQvhw/sBqIMmn4zgjPG73bOXxucfhAyyk0GxFWMMYTVbQCPUk6vdrtd4KvFW+/E9vK8NR5mLZbZ/xYiBU68KxKFTUoJKaXfKe0igHia/AbgHdQ1eUaQY4LXSFymlGOxDQEOBlHcbLZl2y2x6RdAj/eQrYVIL1hv1ij2DfFa/xBBDx6i7TtA9wH62VZAznjpBzPfj3q932OLY4scWYeJp0B+n0Fbz7ws4rXX2lfK/cID2ucWPjwTjTlvrGF2o8UZxIW3lEiJLMeTqalQ7rGGdtR7HspCkcXwCJ+jdxm8tDdUhwaG1+vNzg0YyyBeILJxnFJwNLQvuEc77dtgf7ajWWe4tpz9ipDVAAvLNRs0ot02y7dcG0hcemmjd/DAy3zqqOsYqcz+jmS0DIQpdGoZwQc1TVitL7+F0TwVEpbyW/v0LVmO0W+hXcEUpXVZ5gsjhbWa2lpNopkhaKEwoCevFXjzKgmcsfc9PbWz7M4w79Q+rtrMN9ebbfm6eqK5hmphEn/6qvwY/z+jZQ7MSwxtlXl1vGt8LTWYj8w8TCPCt+boEMkuLq3SJTDwyJCWeLTOLr2KlK9/aeN70Q5ZhFENb5i+xe2y668xrbN+16O+cK9Qa7HAuFkyy1WyLr0ZHpW49Mu+fmlieaGWP2c81FjKIut6pbMUVBvhVQB9o9r1vdQRW0u86K4x5+UkTSu+cv0u17fsmehpHr48j3jVPdTRvK8jX2Z9CIXRNhdmAYVWVd47AJxSQ9YKrU8dOXbcE/slq1d6pI6R5Owpa4IxvqXLn4/+QntKL3KzMl96qGBOh1hNRX1a0+ujZ6DGlecxEkaV1Mpf6lngUyqVlacOz15COOV6MoqLQb4Aryri/UxJvmK/BO9HO53upkFPNnhakd16n99IgESYGwl4KKHkXr0+URYX5xG4BkrraLbJHYajLwi4BnApbYvS6a0s0udYP5JHvOzV9ADuAPhMwLnVEZgrk9gg+95TDJNPUv/Gk3kkH9u507Mi5GtCPi82xBg+rdfxQYzxRjwaSAaXo9bG6OhTsZPZnwC4WyZjXD/bbTdXItcrA4eWjip6b96S2oiSYowft9s/V2qM6Sl1/KEphCoG6H/qyjGfDuUcsAr0ejdlwJOhElO1J1oFw5ieOAV4zct03M7W8evm72lu/4OMf2XC22bifxMHAAAAAElFTkSuQmCC) no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}
.switch-lang-container:hover .overlay {
  display: block;
}


.header-container .btn-group .overlay {
  background: #06223899;
}
.switch-lang-container .overlay {
  display: none;
  background: #062238ba;
  width: 174px;
  font-size: 17px;
  color: #607c89;
  position: absolute;
  top: 55px ;
  padding: 10px;
}
.switch-lang-container .lang-display .curr-lang {
  text-align: center;
  color: #336bcd;
  font-size: 19px;
}
.switch-lang-container .overlay .lang-item {
  text-align: center;
  cursor: pointer;
  height: 39px;
  line-height: 39px;
  font-weight: 700;
  transition: all .3s;
  border-bottom: 1px solid #607c89;
  &:hover {
    background: rgba(255, 250, 189, 0.65);
    color: #f1f1f1;
  }
  &.active {
    background: rgba(255, 250, 189, 0.65);
    color: #f1f1f1;
  }
}


.home-login[lang="zh-tw"] {
  width: 96px;
  height: 60.75px;
  text-indent: -9999px;
  overflow: hidden;
  background: url(../images/home-login-tw.png) no-repeat center/cover;
  background-size: 100% 100%;
  margin: 0 17px 0 0;
}
.home-login[lang="zh"] {
  width: 96px;
  height: 60.75px;
  text-indent: -9999px;
  overflow: hidden;
  background: url(../images/home-login-zh.png) no-repeat center/cover;
  background-size: 100% 100%;
  margin: 0 17px 0 0;
}
.home-login[lang="en"] {
  width: 116px;
  height: 60.75px;
  text-indent: -9999px;
  overflow: hidden;
  background: url(../images/home-login-en.png) no-repeat center/cover;
  background-size: 100% 100%;
  margin: 0 17px 0 0;
}
.home-login[lang="id"] {
  width: 116px;
  height: 60.75px;
  text-indent: -9999px;
  overflow: hidden;
  background: url(../images/home-login-id.png) no-repeat center/cover;
  background-size: 100% 100%;
  margin: 0 17px 0 0;
}
.home-login[lang="th"] {
  width: 116px;
  height: 60.75px;
  text-indent: -9999px;
  overflow: hidden;
  background: url(../images/home-login-th.png) no-repeat center/cover;
  background-size: 100% 100%;
  margin: 0 17px 0 0;
}
.home-login[lang="pt"] {
  width: 116px;
  height: 60.75px;
  text-indent: -9999px;
  overflow: hidden;
  background: url(../images/home-login-pt.png) no-repeat center/cover;
  background-size: 100% 100%;
  margin: 0 17px 0 0;
}
.home-login[lang="es"] {
  width: 116px;
  height: 60.75px;
  text-indent: -9999px;
  overflow: hidden;
  background: url(../images/home-login-es.png) no-repeat center/cover;
  background-size: 100% 100%;
  margin: 0 17px 0 0;
}

.home-logout[lang="zh-tw"] {
  background-image: url(../images/home-logout-tw.png);
}
.home-logout[lang="zh"] {
  background-image: url(../images/home-logout-zh.png);
}
.home-logout[lang="en"] {
  background-image: url(../images/home-logout-en.png);
}
.home-logout[lang="id"] {
  background-image: url(../images/home-logout-id.png);
}
.home-logout[lang="th"] {
  background-image: url(../images/home-logout-th.png);
}
.home-logout[lang="pt"] {
  background-image: url(../images/home-logout-pt.png);
}
.home-logout[lang="es"] {
  background-image: url(../images/home-logout-es.png);
}


.home-websiet[lang="zh-tw"] {
  width: 193px;
  height: 60.75px;
  text-indent: -9999px;
  overflow: hidden;
  background: url(../images/home-websiet-tw.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.home-websiet[lang="zh"] {
  width: 193px;
  height: 60.75px;
  text-indent: -9999px;
  overflow: hidden;
  background: url(../images/home-websiet-zh.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.home-websiet[lang="en"] {
  width: 193px;
  height: 60.75px;
  text-indent: -9999px;
  overflow: hidden;
  background: url(../images/home-websiet-en.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.home-websiet[lang="id"] {
  width: 293px;
  height: 60.75px;
  text-indent: -9999px;
  overflow: hidden;
  background: url(../images/home-websiet-id.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.home-websiet[lang="th"] {
  width: 193px;
  height: 60.75px;
  text-indent: -9999px;
  overflow: hidden;
  background: url(../images/home-websiet-th.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.home-websiet[lang="pt"] {
  width: 193px;
  height: 60.75px;
  text-indent: -9999px;
  overflow: hidden;
  background: url(../images/home-websiet-pt.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.home-websiet[lang="es"] {
  width: 193px;
  height: 60.75px;
  text-indent: -9999px;
  overflow: hidden;
  background: url(../images/home-websiet-es.png) no-repeat center/cover;
  background-size: 100% 100%;
}

.home-slogan-container {
  display: flex;
}
.home-slogan {
  width: 903px;
  height: 696px;
  text-indent: -9999px;
  overflow: hidden;
  background: url(../images/home-slogan.png) no-repeat center/cover;
  background-size: contain;
  margin: -100px 0 45px 1050px;
  pointer-events: none;
}
.home-slogan[lang="en"] {
  width: 1188px;
  height: 649px;
  background: url(../images/home-slogan-en.png) no-repeat center/cover;
  background-size: contain;
  margin: -100px 0 45px 830px;
}
.home-slogan[lang="id"] {
  width: 1188px;
  height: 649px;
  background: url(../images/home-slogan-en.png) no-repeat center/cover;
  background-size: contain;
  margin: -100px 0 45px 830px;
}
.home-slogan[lang="th"] {
  width: 1188px;
  height: 649px;
  background: url(../images/home-slogan-en.png) no-repeat center/cover;
  background-size: contain;
  margin: -100px 0 45px 830px;
}
.home-slogan2 {
  width: 228px;
  height: 168px;
  text-indent: -9999px;
  overflow: hidden;
  cursor: pointer;
  margin-top: 100px;
}
.home-slogan2[lang="zh-tw"] {
  background: url(../images/home-slogan-tw2.png) no-repeat center / cover;
  background-size: 100% 100%;

}
.home-slogan2[lang="zh"] {
  background: url(../images/home-slogan-zh2.png) no-repeat center / cover;
  background-size: 100% 100%;
}
.home-slogan2[lang="en"] {
  background: url(../images/home-slogan-en2.png) no-repeat center / cover;
  background-size: 100% 100%;
}
.home-slogan2[lang="id"] {
  background: url(../images/home-slogan-id2.png) no-repeat center / cover;
  background-size: 100% 100%;
}
.home-slogan2[lang="th"] {
  background: url(../images/home-slogan-th2.png) no-repeat center / cover;
  background-size: 100% 100%;
}
.home-slogan2[lang="pt"] {
  background: url(../images/home-slogan-pt2.png) no-repeat center / cover;
  background-size: 100% 100%;
}
.home-slogan2[lang="es"] {
  background: url(../images/home-slogan-es2.png) no-repeat center / cover;
  background-size: 100% 100%;
}
/* .home-slogan3[lang="zh-tw"] {
    width: 193px;
    height: 60px;
    text-indent: -9999px;
    overflow: hidden;
    background: url(../images/home-slogan3.png) no-repeat center / cover;
    background-size: 100% 100%;
    cursor: pointer;
  }
  .home-slogan3[lang="zh"] {
    width: 193px;
    height: 60px;
    text-indent: -9999px;
    overflow: hidden;
    background: url(../images/home-slogan4.png) no-repeat center / cover;
    background-size: 100% 100%;
    cursor: pointer;
  } */

.home-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.home-reserv {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 345px;
  height: 82px;
  border-radius: 16px;
  background: url(../images/home-reserv.png) no-repeat center/cover;
  box-shadow: 0 0 100px #fff;
}
.home-reserv span {
  font-size: 30px;
  color: #8b4805;
  font-family: "f600";
  background-image: -webkit-linear-gradient(top, #8e4a06, #c86b13);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-container {
  display: flex;
  margin: 30px 0 0;
}
.btn-container .btn-col {
  width: 206px;
  height: 131px;
  flex-direction: column;
  justify-content: space-between;
  display: flex;
  cursor: pointer;
  margin-right: 5px;
}
.btn-container .btn-item, .btn-container .pay {
  position: relative;
  overflow: hidden;
  transition: all .3s;
}

.btn-container .btn-item {
  display: flex;
  width: 100%;
}
.btn-container .btn-item>img {
  width: 100%;
}

.btn-container .pay {
  display: flex;
  width: 135px;
  height: 131px;
}

.home-dowload {
  display: flex;
  flex-wrap: wrap;
  width: 520px;
  margin: 30px 0 0;
}
.home-dowload a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 70px;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.7);
  margin: 3px;
}
.home-dowload a:after {
  content: "";
  width: 153px;
  height: 41px;
  background: url(../images/home-dowload.png) no-repeat 0 0/153px 164px;
}
.home-dowload a:nth-child(1):after {
  background-position: 0 0;
}
.home-dowload a:nth-child(2):after {
  background-position: 0 -41px;
}
.home-dowload a:nth-child(3):after {
  background-position: 0 -82px;
}
.home-dowload a:nth-child(4):after {
  background-position: 0 -123px;
}
.join .page-after {
  width: 418px;
  height: 810px;
  margin-left: -418px;
}
.join-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 699px;
  height: 430px;
  padding: 24px 5px 5px 0;
  background: url(../images/join-left.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.join-head {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 292px;
  height: 63px;
  font-size: 23px;
  color: #654b35;
  font-family: "f600";
  background: url(../images/join-head.png) no-repeat center/cover;
}
.join-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.join-form ul {
  display: flex;
  flex-direction: column;
  padding: 10px 0 0;
  height: 250px;
  justify-content: space-around;
}
.join-form li {
  display: flex;
  align-items: center;
  margin: 0 0 10px;
}
.join-form li:last-child {
  margin: 0 0 5px;
}
.join-form li:last-child label {
  /* font-size: 24px; */
}
.join-form label {
  display: flex;
  justify-content: right;
  align-items: center;
  /* text-align: right; */
  line-height: 1;
  width: 230px;
  height: 44px;
  font-size: 20px;
  justify-content: left;
  color: #8c6a50;
  font-family: "f600";
  border-radius: 44px;
  /* background-color: #ff9e3f; */
  margin: 0 15px 0 0;
}
.join-form div {
  display: flex;
  align-items: center;
  height: 46px;
}
.join-form input {
  border: none;
  outline: none;
}
.join-form .select {
  width: 305px;
  height: 46px;
  font-size: 24px;
  color: #b28864;
  text-align: center;
  font-family: "f600";
  border-style: solid;
  border-width: 1px;
  border-radius: 46px;
  border-color: #b28864;
  caret-color: #b28864;
}
.join-facebook a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 308px;
  height: 46px;
  font-size: 18px;
  color: #fff;
  font-family: "f600";
  border-radius: 46px;
  background: linear-gradient(to right, #5f7dbc, #3c5b99);
  position: relative;
}
.join-facebook a:before {
  content: "f";
  font-size: 24px;
  color: #fff;
  font-family: "f600";
  position: absolute;
  left: 20px;
}
.join-phone div {
  justify-content: space-between;
  width: 308px;
}
.join-phone dl {
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  position: relative;
  z-index: 3;
}
.join-phone dt {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 112px;
  height: 46px;
  font-size: 18px;
  color: #654b35;
  font-family: "f600";
  border-radius: 46px;
  border-style: solid;
  border-width: 1px;
  border-color: #b28864;
  padding: 0 5px;
  /* background-color: #f7d070; */
}
.join-phone dd {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 112px;
  height: 0;
  padding: 50px 0 0;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}
.join-phone dd p {
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 30px;
  font-size: 18px;
  color: #654b35;
  font-family: "f600";
  padding: 0 5px;
  background-color: #f7d070;
  opacity: 0.8;
  position: relative;
}
.join-phone dd p:after {
  content: "";
  width: 90%;
  border-top: 1px dashed #654b35;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
}
.join-phone dd p:first-child {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.join-phone dd p:last-child {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
.join-phone dd p:last-child:after {
  display: none;
}
.join-phone dd.active {
  height: 650px;
  transition: all 0.6s;
}
.join-phone input {
  width: 186px;
  height: 46px;
  font-size: 24px;
  color: #b28864;
  text-align: center;
  font-family: "f600";
  border-radius: 46px;
  border-style: solid;
  border-width: 1px;
  border-color: #b28864;
  caret-color: #b28864;
  /* background-color: #f7d070; */
}
.join-phone input::placeholder {
  font-size: 12px;
  color: rgba(100, 75, 53, 0.5);
}
.join-code div {
  justify-content: space-between;
}
.join-code input {
  width: 186px;
  height: 46px;
  font-size: 24px;
  color: #b28864;
  text-align: center;
  font-family: "f600";
  border-style: solid;
  border-width: 1px;
  border-radius: 46px;
  border-color: #b28864;
  caret-color: #b28864;
  /* background-color: #f7d070; */
}
.join-code input::placeholder {
  font-size: 12px;
  color: rgba(100, 75, 53, 0.5);
}
.join-code a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 123px;
  height: 57px;
  background: url(../images/join-form-sending.png) no-repeat center/cover;
  margin: 0 -6px 0 0;
  filter: grayscale(100%);
  pointer-events: none;
}
.join-code a em {
  font-size: 22px;
  color: #8b4805;
  font-family: "f600";
  font-style: normal;
  background-image: -webkit-linear-gradient(top, #8e4a06, #c86b13);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.join-code a.active {
  filter: grayscale(0);
  pointer-events: auto;
}

.join-address div {
  justify-content: space-between;
}
.join-address input {
  width: 305px;
  height: 46px;
  font-size: 24px;
  color: #b28864;
  text-align: center;
  font-family: "f600";
  border-style: solid;
  border-width: 1px;
  border-radius: 46px;
  border-color: #b28864;
  caret-color: #b28864;
  /* background-color: #f7d070; */
}
.join-address input::placeholder {
  font-size: 12px;
  color: rgba(100, 75, 53, 0.5);
}
.join-address a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 123px;
  height: 57px;
  background: url(../images/join-form-sending.png) no-repeat center/cover;
  margin: 0 -6px 0 0;
  filter: grayscale(100%);
  pointer-events: none;
}
.join-address a em {
  font-size: 22px;
  color: #8b4805;
  font-family: "f600";
  font-style: normal;
  background-image: -webkit-linear-gradient(top, #8e4a06, #c86b13);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.join-address a.active {
  filter: grayscale(0);
  pointer-events: auto;
}

.join-add-fb {
  display: flex;
  position: relative;
}
.join-add-fb > a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 308px;
  height: 46px;
  font-size: 26px;
  color: #fff;
  font-family: "f600";
  border-radius: 46px;
  background-color: #405f9e;
}
.join-add-fb > a:before {
  content: "";
  width: 25px;
  height: 25px;
  background: url(../images/icon-like.png) no-repeat center/cover;
  margin: -3px 10px 0 0;
}
.join-add .fb-page {
  height: 135px;
  position: absolute;
  top: -130px;
  left: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: all 0.6s;
}
.join-add .fb-page.active {
  opacity: 1;
  z-index: 9;
  pointer-events: auto;
}
.join-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 60px;
}
.join-link h6 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 482px;
  height: 73px;
  background: url(../images/join-link-title.png) no-repeat center/cover;
}
.join-link span {
  font-size: 38px;
  color: #8b4805;
  font-family: "f600";
  background-image: -webkit-linear-gradient(top, #8e4a06, #c86b13);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.join-link p {
  display: flex;
}
.join-link p a {
  width: 118px;
  height: 118px;
  text-indent: -9999px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin: 20px 15px;
}
.join-link p a:nth-child(1) {
  background-image: url(../images/join-link-facebook.png);
}
.join-link p a:nth-child(2) {
  background-image: url(../images/join-link-grocsig.png);
}
.join-link p a:nth-child(3) {
  background-image: url(../images/join-link-youtube.png);
}
.join-submit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 427px;
  height: 73px;
  font-size: 38px;
  color: #8b4805;
  font-family: "f600";
  background: url(../images/join-submit.png) no-repeat center/cover;
}
.join-right {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.join-right-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 228px;
  height: 58px;
  background: url(../images/join-right-btn.png) no-repeat center/cover;
  margin: -10px 0 -7px;
}
.join-right-btn em {
  font-size: 22px;
  color: #8b4805;
  font-family: "f600";
  font-style: normal;
  background-image: -webkit-linear-gradient(top, #8e4a06, #c86b13);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.join-reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 539px;
  height: 430px;
  padding: 16px 0 0;
  background: url(../images/join-reward.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.join-reward-head {
  display: flex;
  align-items: center;
}
.join-reward-rule {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  color: #946a47;
  font-family: "f600";
  margin: 4px 0 0 10px;
}
.join-reward-rule:before {
  content: "";
  width: 42px;
  height: 41px;
  background: url(../images/icon-rule.png) no-repeat center/cover;
}
.join-reward-item {
  display: flex;
  margin: 5px 0;
}
.join-reward-item li {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  margin: 0 15px;
}
.join-reward-item img {
  width: 120px;
  height: 120px;
}
.join-reward-intro {
  font-size: 20px;
  color: #967355;
  font-family: "f600";
  text-align: center;
  line-height: 1.2;
}
.page-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-join-num {
  font-size: 21px;
  font-family: 'f600';
  color: #e6c3a2;
  width: 100%;
  height: 59px;
  text-align: center;
  background: url(../images/join-num.png) no-repeat center/cover;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  span {
    margin-left: 5px;
    margin-right: 5px;
    color: #ffeddc;
    font-size: 36px;
  }
}
.page-join-num::before {
  content: "";
  display: block;
  width: 119px;
  height: 33px;
  background: url(../images/join-left-icon.png) no-repeat center/cover;
  margin-right: 10px;
}
.page-join-num::after {
  content: "";
  display: block;
  width: 119px;
  height: 33px;
  background: url(../images/join-right-icon.png) no-repeat center/cover;
  margin-left: 10px;
}
.join-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1220px;
  height: 289px;
  padding: 3px 0 0;
  background: url(../images/join-loading.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.loading-line0 {
  width: 1175px;
  height: 28px;
  padding: 16px 0 0;
  background: url(../images/join-loading-line0.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.loading-line1 {
  width: 1175px;
  height: 28px;
  padding: 16px 0 0;
  background: url(../images/join-loading-line1.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.loading-line2 {
  width: 1175px;
  height: 28px;
  padding: 16px 0 0;
  background: url(../images/join-loading-line2.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.loading-line3 {
  width: 1175px;
  height: 28px;
  padding: 16px 0 0;
  background: url(../images/join-loading-line3.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.loading-line4 {
  width: 1175px;
  height: 28px;
  padding: 16px 0 0;
  background: url(../images/join-loading-line4.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.loading-line5 {
  width: 1175px;
  height: 28px;
  padding: 16px 0 0;
  background: url(../images/join-loading-line5.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.loading-images {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 1220px;
  .complete[lang="zh-tw"] {
    background: url(../images/join-complete-tw.png) no-repeat center/cover;
    background-size: 100% 100%;
  }
  .uncomplete[lang="zh-tw"] {
    background: url(../images/join-uncomplete-tw.png) no-repeat center/cover;
    background-size: 100% 100%;
  }
  .complete[lang="zh"] {
    background: url(../images/join-complete-zh.png) no-repeat center/cover;
    background-size: 100% 100%;
  }
  .uncomplete[lang="zh"] {
    background: url(../images/join-uncomplete-zh.png) no-repeat center/cover;
    background-size: 100% 100%;
  }
  .complete[lang="en"] {
    background: url(../images/join-complete-en.png) no-repeat center/cover;
    background-size: 100% 100%;
  }
  .uncomplete[lang="en"] {
    background: url(../images/join-uncomplete-en.png) no-repeat center/cover;
    background-size: 100% 100%;
  }
  .complete[lang="id"] {
    background: url(../images/join-complete-id.png) no-repeat center/cover;
    background-size: 100% 100%;
  }
  .uncomplete[lang="id"] {
    background: url(../images/join-uncomplete-id.png) no-repeat center/cover;
    background-size: 100% 100%;
  }
  .complete[lang="th"] {
    background: url(../images/join-complete-th.png) no-repeat center/cover;
    background-size: 100% 100%;
  }
  .uncomplete[lang="th"] {
    background: url(../images/join-uncomplete-th.png) no-repeat center/cover;
    background-size: 100% 100%;
  }
  .complete[lang="pt"] {
    background: url(../images/join-complete-pt.png) no-repeat center/cover;
    background-size: 100% 100%;
  }
  .uncomplete[lang="pt"] {
    background: url(../images/join-uncomplete-pt.png) no-repeat center/cover;
    background-size: 100% 100%;
  }
  .complete[lang="es"] {
    background: url(../images/join-complete-es.png) no-repeat center/cover;
    background-size: 100% 100%;
  }
  .uncomplete[lang="es"] {
    background: url(../images/join-uncomplete-es.png) no-repeat center/cover;
    background-size: 100% 100%;
  }
}
.loading-image1 {
  width: 223px;
  height: 257px;
  padding: 3px 0 0;
  background: url(../images/join-loading-bg.png) no-repeat center/cover;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  position: relative;
  .loading-image-number1 {
    font-family: "j600";
    font-weight: normal;
    font-size: 18px;
    color: #fff4c8;
    line-height: 0px;
    text-stroke: 1px #964e06;
    text-align: center;
    font-style: normal;
    text-transform: none;
    -webkit-text-stroke: 1px #964e06;
    margin-top: 25px;
  }
  .loading-image-demo1 {
    width: 98.38px;
    height: 98.38px;
    background: url(../images/join-loading-demo1.png) no-repeat center/cover;
    background-size: 100% 100%;
    margin-top: 15px;
  }
  .loading-image-title1 {
    font-family: "j600";
    font-weight: normal;
    font-size: 16px;
    color: #cc6e14;
    max-width: 166px;
    word-wrap: break-word; /* 兼容性更好的属性 */
    text-align: center;
    font-style: normal;
    text-transform: none;
    margin-top: 5px;
  }
  .loading-image-button1 {
    position: absolute;
    bottom: 20px;
    left: 40px;
    width: 144px;
    height: 52px;
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    color: #964e06;
  }
  
}
.loading-image2 {
  width: 223px;
  height: 257px;
  padding: 3px 0 0;
  background: url(../images/join-loading-bg.png) no-repeat center/cover;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  .loading-image-number2 {
    font-family: "j600";
    font-weight: normal;
    font-size: 18px;
    line-height: 0px;
    color: #fff4c8;
    text-stroke: 1px #964e06;
    text-align: center;
    font-style: normal;
    text-transform: none;
    -webkit-text-stroke: 1px #964e06;
    margin-top: 25px;
  }
  .loading-image-demo2 {
    width: 98.38px;
    height: 98.38px;
    background: url(../images/join-loading-demo2.png) no-repeat center/cover;
    background-size: 100% 100%;
    margin-top: 15px;
  }
  .loading-image-title2 {
    font-family: "j600";
    font-weight: normal;
    font-size: 16px;
    color: #cc6e14;
    max-width: 166px;
    word-wrap: break-word; /* 兼容性更好的属性 */
    text-align: center;
    font-style: normal;
    text-transform: none;
    margin-top: 5px;
  }
  .loading-image-button2 {
    position: absolute;
    bottom: 20px;
    left: 40px;
    width: 144px;
    height: 52px;
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    color: #964e06;
  }
}
.loading-image3 {
  width: 223px;
  height: 257px;
  padding: 3px 0 0;
  background: url(../images/join-loading-bg.png) no-repeat center/cover;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  .loading-image-number3 {
    font-family: "j600";
    font-weight: normal;
    font-size: 18px;
    line-height: 0px;
    color: #fff4c8;
    text-stroke: 1px #964e06;
    text-align: center;
    font-style: normal;
    text-transform: none;
    -webkit-text-stroke: 1px #964e06;
    margin-top: 25px;
  }
  .loading-image-demo3 {
    width: 98.38px;
    height: 98.38px;
    background: url(../images/join-loading-demo3.png) no-repeat center/cover;
    background-size: 100% 100%;
    margin-top: 15px;
  }
  .loading-image-title3 {
    font-family: "j600";
    font-weight: normal;
    font-size: 16px;
    color: #cc6e14;
    max-width: 166px;
    word-wrap: break-word; /* 兼容性更好的属性 */
    text-align: center;
    font-style: normal;
    text-transform: none;
    margin-top: 5px;
  }
  .loading-image-button3 {
    position: absolute;
    bottom: 20px;
    left: 40px;
    width: 144px;
    height: 52px;
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    color: #964e06;
  }
}
.loading-image4 {
  width: 223px;
  height: 257px;
  padding: 3px 0 0;
  background: url(../images/join-loading-bg.png) no-repeat center/cover;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  .loading-image-number4 {
    font-family: "j600";
    font-weight: normal;
    font-size: 18px;
    line-height: 0px;
    color: #fff4c8;
    text-stroke: 1px #964e06;
    text-align: center;
    font-style: normal;
    text-transform: none;
    -webkit-text-stroke: 1px #964e06;
    margin-top: 25px;
  }
  .loading-image-demo4 {
    width: 98.38px;
    height: 98.38px;
    background: url(../images/join-loading-demo4.png) no-repeat center/cover;
    background-size: 100% 100%;
    margin-top: 15px;
  }
  .loading-image-title4 {
    font-family: "j600";
    font-weight: normal;
    font-size: 16px;
    color: #cc6e14;
    max-width: 166px;
    word-wrap: break-word; /* 兼容性更好的属性 */
    text-align: center;
    font-style: normal;
    text-transform: none;
    margin-top: 5px;
  }
  .loading-image-button4 {
    position: absolute;
    bottom: 20px;
    left: 40px;
    width: 144px;
    height: 52px;
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    color: #964e06;
  }
}
.loading-image5 {
  width: 223px;
  height: 257px;
  padding: 3px 0 0;
  background: url(../images/join-loading-bg.png) no-repeat center/cover;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  .loading-image-number5 {
    font-family: "j600";
    font-weight: normal;
    font-size: 18px;
    line-height: 0px;
    color: #fff4c8;
    text-stroke: 1px #964e06;
    text-align: center;
    font-style: normal;
    text-transform: none;
    -webkit-text-stroke: 1px #964e06;
    margin-top: 25px;
  }
  .loading-image-demo5 {
    width: 98.38px;
    height: 98.38px;
    background: url(../images/join-loading-demo5.png) no-repeat center/cover;
    background-size: 100% 100%;
    margin-top: 15px;
  }
  .loading-image-title5 {
    font-family: "j600";
    font-weight: normal;
    font-size: 16px;
    color: #cc6e14;
    max-width: 166px;
    word-wrap: break-word; /* 兼容性更好的属性 */
    text-align: center;
    font-style: normal;
    text-transform: none;
    margin-top: 5px;
    span {
      font-size: 11px;
    }
  }
  .loading-image-button5 {
    position: absolute;
    bottom: 20px;
    left: 40px;
    width: 144px;
    height: 52px;
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    color: #964e06;
  }
}
.join-slogan {
  width: 228px;
  height: 168px;
  position: absolute;
  right: 9rem;
  bottom: 3rem;
  z-index: 10;
  text-indent: -9999px;
  overflow: hidden;
  cursor: pointer;
  margin-top: 100px;
}
.join-slogan[lang="zh-tw"] {
  background: url(../images/home-slogan-tw2.png) no-repeat center / cover;
  background-size: 100% 100%;

}
.join-slogan[lang="zh"] {
  background: url(../images/home-slogan-zh2.png) no-repeat center / cover;
  background-size: 100% 100%;
}
.join-slogan[lang="en"] {
  background: url(../images/home-slogan-en2.png) no-repeat center / cover;
  background-size: 100% 100%;
}
.join-slogan[lang="id"] {
  background: url(../images/home-slogan-id2.png) no-repeat center / cover;
  background-size: 100% 100%;
}
.join-slogan[lang="th"] {
  background: url(../images/home-slogan-th2.png) no-repeat center / cover;
  background-size: 100% 100%;
}
.join-slogan[lang="pt"] {
  background: url(../images/home-slogan-pt2.png) no-repeat center / cover;
  background-size: 100% 100%;
}
.join-slogan[lang="es"] {
  background: url(../images/home-slogan-es2.png) no-repeat center / cover;
  background-size: 100% 100%;
}
.join-lottery {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 577px;
  height: 386px;
  padding: 16px 0 0;
  background: url(../images/join-lottery.png) no-repeat center/cover;
}
.join-lottery-head {
  display: flex;
  align-items: center;
}
.join-lottery-intro {
  font-size: 20px;
  color: #967355;
  font-family: "f600";
}
.join-lottery-reward {
  display: flex;
  align-items: flex-start;
}
.join-lottery-reward dt,
.join-lottery-reward dd {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.join-lottery-reward dt {
  width: 273px;
  height: 200px;
  padding: 0 5px 10px 0;
  background: url(../images/join-lottery-reward-big.png) no-repeat center/cover;
}
.join-lottery-reward dt img {
  width: 190px;
  height: 107px;
}
.join-lottery-reward dt p {
  width: 230px;
  font-size: 20px;
  text-align: center;
  line-height: 1.2;
  padding: 5px 0 0;
}
.join-lottery-reward dd img {
  width: 40px;
  height: 40px;
}
.join-lottery-reward dd p {
  width: 210px;
  font-size: 16px;
  text-align: center;
  line-height: 1;
  padding: 5px 0 0;
}
.join-lottery-reward div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 259px;
  height: 105px;
  padding: 0 5px 5px 0;
  background: url(../images/join-lottery-reward.png) no-repeat center/cover;
}
.join-lottery-reward div:last-child {
  margin: -5px 0 0;
}
.join-lottery-reward p {
  color: #dfa262;
  font-family: "f600";
}
.info .page-after {
  width: 424px;
  height: 639px;
  margin-left: -424px;
}
.info-tab {
  display: flex;
  flex-direction: column;
}
.info-tab li {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 255px;
  height: 80px;
  font-size: 18px;
  color: #b5a196;
  font-family: "f600";
  background: url(../images/info-tab.png) no-repeat center/cover;
  margin: 20px 0;
  cursor: pointer;
}
.info-tab li.active {
  color: #986248;
  background-image: url(../images/info-tab-active.png);
  position: relative;
  z-index: 5;
}
.info-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 1067px;
  height: 715px;
  padding: 0 90px 0 60px;
  background: url(../images/info-box.png) no-repeat center/cover;
  margin: -15px 0 0 -50px;
  position: relative;
  z-index: 3;
}
.info-tag {
  display: flex;
  flex-direction: column;
  position: relative;
}
.info-tag:after {
  content: "";
  width: 90px;
  height: 86px;
  background: url(../images/icon-balloon.png) no-repeat center/cover;
  position: absolute;
  right: 0;
  bottom: -90px;
}
.info-tag li {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 240px;
  height: 70px;
  font-size: 24px;
  text-align: center;
  color: #b59380;
  border-radius: 5px;
  font-family: "f600";
  background-color: #f2e0cb;
  margin: 15px 0;
  cursor: pointer;
}
.info-tag li.active {
  color: #fff;
  background-color: #b2866d;
}
.info-tag li.active:before {
  content: "";
  width: 41px;
  height: 46px;
  background: url(../images/icon-fox.png) no-repeat center/cover;
  background-size: 100% 100%;
  margin: -5px 5px 0 0;
}
.info-tag.noafter:after {
  display: none;
}
.info-imgtext {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.info-img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 640px;
  height: auto;
  border: 1px solid #e2bd86;
  border-radius: 20px;
  background-color: #e1c2a8;
  position: relative;
}
.info-img:after {
  content: "";
  width: calc(100% + 14px);
  height: calc(100% + 14px);
  border: 1px dashed #e2bd86;
  border-radius: 20px;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.info-img img {
  width: 100%;
  height: auto;
  border-radius: 20px;
}
.info-img iframe {
  border-radius: 20px;
}
.info-small {
  width: 350px;
}
.info-intro {
  display: flex;
  flex-direction: column;
  width: 640px;
  padding: 20px 0 0;
  height: 210px;
  overflow-y: auto;
  scrollbar-width: auto;
}

.info-intro::-webkit-scrollbar {
  width: 5px;
}
.info-intro::-webkit-scrollbar-thumb {
  background-color: #61baff;
  border-radius: 6px;
}

.info-intro p {
  font-size: 16px;
  color: #dfa262;
  line-height: 1.2;
  text-align: left;
  font-family: "f600";
  padding: 0 0 6px;
}
.info-intro p:last-child {
  padding: 0;
}
.info-prev,
.info-next {
  width: 34px;
  height: 51px;
  text-indent: -9999px;
  overflow: hidden;
  background: url(../images/info-prev.png) no-repeat center/cover;
  margin: 0 15px 0 0;
}
.info-prev.swiper-button-disabled,
.info-next.swiper-button-disabled {
  opacity: 0.5;
}
.info-next {
  transform: rotate(180deg);
  margin: 0 -30px 0 15px;
}
.info-swiper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.info-role {
  display: flex;
  align-items: center;
  position: relative;
}
.info-role:after {
  content: "";
  width: 90px;
  height: 86px;
  background: url(../images/icon-balloon.png) no-repeat center/cover;
  position: absolute;
  top: -10px;
  right: 0;
  z-index: 3;
}
.info-details {
  width: 860px;
}
.info-details .swiper-slide {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.info-data {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 414px;
  height: 472px;
  padding: 20px;
  background: url(../images/info-data.png) no-repeat center/cover;
}
.info-data div {
  display: flex;
  flex-direction: column;
}
.info-data p {
  font-size: 16px;
  color: #fff;
  font-family: "f600";
}
.info-data span {
  color: #fff4c8;
}
.info-image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 414px;
  height: 472px;
  background: url(../images/info-image.png) no-repeat center/cover;
}
.info-image img {
  max-width: 100%;
  max-height: 100%;
}
.info-pagination {
  width: 860px;
  padding: 30px 0 0;
}
.info-pagination .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  filter: grayscale(80%);
  cursor: pointer;
}
.info-pagination .slide-job {
  margin-left: 15px;
}
.info-pagination .swiper-slide div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 107px;
  height: 118px;
  background: url(../images/info-pagination.png) no-repeat center/cover;
  position: relative;
  color: #dfa262;
}
.info-pagination .swiper-slide div:before {
  content: "";
  width: 24px;
  height: 27px;
  background: url(../images/info-pagination-before.png) no-repeat center/cover;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}
.info-pagination .swiper-slide img {
  width: 75px;
  height: 75px;
  border-radius: 20px;
}
.info-pagination .swiper-slide.swiper-slide-thumb-active {
  filter: grayscale(0%);
}

.magic .middle-box{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 350px;
  margin-left: 430px;
}
.magic .middle-box .box{
  width: 582px;
  height: 606px;
  background: url(../images/qiu.png) no-repeat center/cover;
  background-size: 100% 100%;
  position: relative;
}

.magic .middle-box .box .text{
  width: 323px;
  height: 144px;
  position: absolute;
  left: 150px;
  top: 250px;
  color: #FFF79F;
  font-size: 36px;
}

.magic .middle-box .box .text[lang="zh-tw"]{
  background: url(../images/text-zh-tw.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.magic .middle-box .box .text[lang="zh"]{
  background: url(../images/text-zh.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.magic .middle-box .box .text[lang="en"]{
  left: 130px;
  background: url(../images/text-en.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.magic .middle-box .box .text[lang="id"]{
  left: 120px;
  width: 334px;
  height: 176px;
  top: 220px;
  background: url(../images/text-id.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.magic .middle-box .box .text[lang="th"]{
  left: 130px;

  background: url(../images/text-th.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.magic .middle-box .box .text[lang="pt"]{
  left: 130px;
  height: 190px;
  background: url(../images/text-pt.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.magic .middle-box .box .text[lang="es"]{
  left: 130px;
  height: 190px;
  background: url(../images/text-es.png) no-repeat center/cover;
  background-size: 100% 100%;
}

.magic .middle-box .box .text span{
  text-shadow: 4px 4px 4px #963497;
}

.magic .middle-box .box .text[lang="zh-tw"] span{
  position: absolute;
  left: 189px;
  top: 72px;
}
.magic .middle-box .box .text[lang="zh"] span{
  position: absolute;
  left: 189px;
  top: 72px;
}
.magic .middle-box .box .text[lang="en"] span{
  position: absolute;
  left: 269px;
  top: 88px;
}
.magic .middle-box .box .text[lang="id"] span{
  position: absolute;
  left: 245px;
  top: 110px;
}
.magic .middle-box .box .text[lang="th"] span{
  position: absolute;
  left: 221px;
  top: 72px;
}
.magic .middle-box .box .text[lang="pt"] span{
  position: absolute;
  left: 273px;
  top: 123px;
}
.magic .middle-box .box .text[lang="es"] span{
  position: absolute;
  left: 282px;
  top: 124px;
}

.magic .middle-box .box-btn{
  /* width: 480px; */
  width: 408px;
  height: 141px;
  margin-top: -90px;
  z-index: 99;
}
.magic .middle-box .box-btn[lang="zh-tw"]{
  background: url(../images/btn-zh-tw.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.magic .middle-box .box-btn[lang="zh"]{
  background: url(../images/btn-zh.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.magic .middle-box .box-btn[lang="en"]{
  background: url(../images/btn-en.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.magic .middle-box .box-btn[lang="id"]{
  background: url(../images/btn-id.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.magic .middle-box .box-btn[lang="th"]{
  background: url(../images/btn-th.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.magic .middle-box .box-btn[lang="pt"]{
  background: url(../images/btn-pt.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.magic .middle-box .box-btn[lang="es"]{
  background: url(../images/btn-es.png) no-repeat center/cover;
  background-size: 100% 100%;
}

.magic .magic-card{
  width: 678px;
  height: 994px;
  margin-left: 300px;
  position: relative;
}

.magic .magic-card[lang="zh-tw"]{
  background: url(../images/mabg-zh-tw.png) no-repeat center/cover;
  background-size: 100% 100%;
}

.magic .magic-card[lang="zh"]{
  background: url(../images/mabg-zh.png) no-repeat center/cover;
  background-size: 100% 100%;
}

.magic .magic-card[lang="en"]{
  background: url(../images/mabg-en.png) no-repeat center/cover;
  background-size: 100% 100%;
}

.magic .magic-card[lang="id"]{
  background: url(../images/mabg-id.png) no-repeat center/cover;
  background-size: 100% 100%;
}

.magic .magic-card[lang="th"]{
  background: url(../images/mabg-th.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.magic .magic-card[lang="pt"]{
  background: url(../images/mabg-pt.png) no-repeat center/cover;
  background-size: 100% 100%;
}
.magic .magic-card[lang="es"]{
  background: url(../images/mabg-es.png) no-repeat center/cover;
  background-size: 100% 100%;
}

.magic .magic-card .rules {
  position: absolute;
  right:82px;
  top: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  color: #946a47;
  font-family: "f600";
  margin: 4px 0 0 10px;
} 

.magic .magic-card .rules span {
  white-space: wrap;
  width: 60px;
  text-align: center;
}
.magic .magic-card .rules:before {
  content: "";
  width: 42px;
  height: 41px;
  background: url(../images/icon-rule.png) no-repeat center/cover;
}

.magic .magic-card .dialy-reward {
  position: absolute;
  right:260px;
  top: 340px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.magic .magic-card .dialy-reward .reward {
  width: 101px;
  height: 101px;
  margin: 20px 35px;
  background: url(../images/kuang.png) no-repeat center/cover;
  display: flex;
  flex-direction: column;
}

.magic .magic-card .reward {
  text-align: center;
}

.magic .magic-card .reward span {
  font-size: 18px;
  color: #fff;
  font-family: 'j600';
}

.magic .magic-card .reward span:first-child{
  margin-top: 100px;
}
.magic .magic-card .dialy-reward .reward span:nth-child(2){

}
.magic .magic-card .finally-reward {
  position: absolute;
  right:260px;
  top: 650px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.magic .magic-card .finally-reward .reward {
  width: 101px;
  height: 101px;
  margin: 20px 35px;
  background: url(../images/kuang.png) no-repeat center/cover;
  display: flex;
  flex-direction: column;
}

.magic .magic-card .share-loading {
  position: absolute;
  right:290px;
  top: 880px;
  font-size: 18px;
  font-family: 'j600';
  color: #800080;
}

.magic .magic-card .card-btn {
  width: 290px;
  height: 84px;
  margin: 20px 35px;
  position: absolute;
  right:170px;
  top: 880px;
}
.magic .magic-card .card-btn[lang="zh-tw"] {
  background: url(../images/share1-zh-tw.png) no-repeat center/cover;
}
.magic .magic-card .card-btn[lang="zh"] {
  background: url(../images/share1-zh.png) no-repeat center/cover;
}
.magic .magic-card .card-btn[lang="en"] {
  background: url(../images/share1-en.png) no-repeat center/cover;
}
.magic .magic-card .card-btn[lang="id"] {
  background: url(../images/share1-id.png) no-repeat center/cover;
}
.magic .magic-card .card-btn[lang="th"] {
  background: url(../images/share1-th.png) no-repeat center/cover;
}
.magic .magic-card .card-btn[lang="es"] {
  background: url(../images/share1-es.png) no-repeat center/cover;
}
.magic .magic-card .card-btn[lang="pt"] {
  background: url(../images/share1-pt.png) no-repeat center/cover;
}
.job .page-after {
  width: 585px;
  height: 760px;
  margin-left: -585px;
}
.job-info {
  display: flex;
  flex-direction: column;
  margin: 10px 30px 0;
}
.job-image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 564px;
  height: 318px;
  border-radius: 50px;
  position: relative;
  box-shadow: 5px 5px 8px rgba(93, 73, 63, 0.5);
}
.job-image:after {
  content: "";
  width: 550px;
  height: 306px;
  background: url(../images/job-image.png) no-repeat center/cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
}
.job-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50px;
}
.job-image iframe {
  border-radius: 50px;
}
.job-intro {
  display: flex;
  flex-direction: column;
  width: 564px;
  height: 319px;
  padding: 30px;
  border-radius: 50px;
  box-shadow: 5px 5px 8px rgba(93, 73, 63, 0.5);
  background: url(../images/job-intro.png) no-repeat center/cover;
  margin: 15px 0 0;
}
.job-intro p {
  font-size: 20px;
  color: #dfa262;
  font-family: "f600";
  line-height: 1.2;
  text-align: justify;
}
.job-swiper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.job-tab {
  width: 564px;
  height: 501px;
}
.job-tab .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../images/job-tab.png) no-repeat center/cover;
}
.job-tab .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.job-tag {
  width: 564px;
  margin: 10px 0 0;
}
.job-tag .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  filter: grayscale(80%);
  cursor: pointer;
}
.job-tag .swiper-slide div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 134px;
  height: 144px;
  border-radius: 20px;
  background-color: #faf6f1;
}
.job-tag .swiper-slide img {
  width: 104px;
  height: 104px;
}
.job-tag .swiper-slide p {
  font-size: 24px;
  color: #dfa262;
  font-family: "f600";
}
.job-tag .swiper-slide.swiper-slide-thumb-active {
  filter: grayscale(0%);
}
.play .page-after {
  width: 489px;
  height: 380px;
  margin-left: -489px;
}
.play-tab {
  display: flex;
  flex-direction: column;
}
.play-tab li {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 255px;
  height: 80px;
  font-size: 17px;
  color: #b5a196;
  font-family: "f600";
  background: url(../images/info-tab.png) no-repeat center/cover;
  margin: 20px 0;
  cursor: pointer;
  white-space: pre;
}
.job-li {
  /* font-size: 27px !important; */
}
.play-tab li.active {
  color: #986248;
  background-image: url(../images/info-tab-active.png);
  position: relative;
  z-index: 5;
}
.play-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1067px;
  height: 715px;
  padding: 0 90px 0 60px;
  background: url(../images/info-box.png) no-repeat center/cover;
  margin: -15px 0 0 -40px;
  position: relative;
  z-index: 3;
}
.play-box:after {
  /* content: "";
  width: 90px;
  height: 86px;
  background: url(../images/icon-balloon.png) no-repeat center/cover;
  position: absolute;
  top: 142px;
  left: 114px;
  pointer-events: none; */
}
.play-img1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 730px;
  height: auto;
  border: 1px solid #e2bd86;
  border-radius: 20px;
  background-color: #e1c2a8;
  position: relative;
}
.play-img1:after {
  content: "";
  width: calc(100% + 14px);
  height: calc(100% + 14px);
  border: 1px dashed #e2bd86;
  border-radius: 20px;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.play-img1 img {
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.play-img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 425px;
  height: auto;
  border: 1px solid #e2bd86;
  border-radius: 20px;
  background-color: #e1c2a8;
  position: relative;
}
.play-img:after {
  content: "";
  width: calc(100% + 14px);
  height: calc(100% + 14px);
  border: 1px dashed #e2bd86;
  border-radius: 20px;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.play-img img {
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.play-intro {
  display: flex;
  flex-direction: column;
  width: 730px;
  padding: 20px 0 0;
}
.play-intro p {
  font-size: 18px;
  color: #dfa262;
  line-height: 1.2;
  text-align: left;
  font-family: "f600";
  padding: 0 0 6px;
}
.play-intro p:last-child {
  padding: 0;
}
.play-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 427px;
  height: 73px;
  background: url(../images/play-btn.png) no-repeat center/cover;
}
.play-btn em {
  font-size: 38px;
  color: #8b4805;
  font-family: "f600";
  font-style: normal;
  background-image: -webkit-linear-gradient(top, #8e4a06, #c86b13);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.game .page-after {
  width: 489px;
  height: 380px;
  margin-left: -489px;
}
.game-box {
  display: flex;
  justify-content: space-between;
  width: 1271px;
  height: 707px;
  padding: 80px 75px 0;
  background: url(../images/game-box.png) no-repeat center/cover;
  position: relative;
}
.game-box:after {
  content: "";
  width: 90px;
  height: 86px;
  background: url(../images/icon-balloon.png) no-repeat center/cover;
  position: absolute;
  left: -34px;
  bottom: -34px;
  pointer-events: none;
}
.game-left,
.game-right {
  display: flex;
  flex-direction: column;
}
.game-img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 677px;
  height: auto;
  border: 1px solid #e2bd86;
  border-radius: 20px;
  background-color: #e1c2a8;
  position: relative;
}
.game-img:after {
  content: "";
  width: calc(100% + 14px);
  height: calc(100% + 14px);
  border: 1px dashed #e2bd86;
  border-radius: 20px;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.game-img img {
  width: 100%;
  height: auto;
  border-radius: 20px;
}
.game-intro {
  display: flex;
  flex-direction: column;
  width: 677px;
  padding: 20px 0 0;
}
.game-intro p {
  font-size: 24px;
  color: #dfa262;
  line-height: 1.2;
  text-align: justify;
  font-family: "f600";
  padding: 0 0 6px;
}
.game-intro p:last-child {
  padding: 0;
}
.game-video {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 396px;
  height: 467px;
  border: 1px solid #e2bd86;
  border-radius: 20px;
  background-color: #e1c2a8;
  position: relative;
}
.game-video:after {
  content: "";
  width: calc(100% + 14px);
  height: calc(100% + 14px);
  border: 1px dashed #e2bd86;
  border-radius: 20px;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.game-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}
.game-video a {
  width: 52px;
  height: 52px;
  text-indent: -9999px;
  overflow: hidden;
  background: url(../images/icon-play.png) no-repeat center/cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.game-btn {
  width: 420px;
  height: 94px;
  text-indent: -9999px;
  overflow: hidden;
  background: url(../images/game-btn.png) no-repeat center/cover;
  margin: 15px 0 0;
}
.dia {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.8);
  transition: all 0.6s;
  z-index: -1;
}
.dia.show {
  opacity: 1;
  z-index: 99;
  pointer-events: auto;
}
.dia-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 585px;
  height: auto;
  padding: 30px 0;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.dia-341 {
  height: 341px;
  background-image: url(../images/dia-341.png);
}
.dia-342 {
  width: 847px;
  height: 523px;
}
.dia-342[lang="zh-tw"] {
  background-image: url(../images/dia-342-zh-tw.png);
  background-size: 100% 100%;
}
.dia-342[lang="zh"] {
  background-image: url(../images/dia-342-zh.png);
  background-size: 100% 100%;
}
.dia-342[lang="en"] {
  background-image: url(../images/dia-342-en.png);
  background-size: 100% 100%;
}
.dia-342[lang="es"] {
  background-image: url(../images/dia-342-es.png);
  background-size: 100% 100%;
}
.dia-342[lang="pt"] {
  background-image: url(../images/dia-342-pt.png);
  background-size: 100% 100%;
}
.dia-342[lang="id"] {
  background-image: url(../images/dia-342-id.png);
  background-size: 100% 100%;
}
.dia-342[lang="th"] {
  background-image: url(../images/dia-342-th.png);
  background-size: 100% 100%;
}
.dia-391 {
  min-height: 391px;
  background-image: url(../images/dia-391.png);
  background-size: 100% 100%;
}
.dia-695431 {
  width: 695px;
  /* height: 431px; */
  background-image: url(../images/dia-695431.png);
  background-size: 100% 100%;
}
.dia-close {
  width: 41px;
  height: 41px;
  text-indent: -9999px;
  overflow: hidden;
  background: url(../images/dia-close.png) no-repeat center/cover;
  position: absolute;
  top: 22px;
  right: 20px;
}
.dia-ji {
  margin-top: 150px;
  font-size: 32px;
  color: #fff;
  font-family: 'j600';
  margin-left: -28px;
}
.dia-name {
  margin-top: 70px;
  font-size: 29px;
  color: #fff;
  font-family: 'j600';
  margin-left: -28px;

}
.dia-close2 {
  width: 93px;
  height: 92px;
  text-indent: -9999px;
  overflow: hidden;
  background: url(../images/dia-close2.png) no-repeat center/cover;
  position: absolute;
  top: 75px;
  right: 120px;
}
.dia-title {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 292px;
  height: 63px;
  font-size: 31px;
  color: #654b35;
  font-family: "f600";
  background: url(../images/dia-title.png) no-repeat center/cover;
}
.dia-btn {
  display: flex;
}
.dia-btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 223px;
  height: 71px;
  background: url(../images/dia-btn.png) no-repeat center/cover;
}
.dia-btn a span {
  font-size: 30px;
  color: #8b4805;
  font-family: "f600";
  background-image: -webkit-linear-gradient(top, #8e4a06, #c86b13);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.login-tips-en, .login-tips-th, .login-tips-id {
  font-size: 14px !important;
}

.dia-auto {
  flex: auto;
}
.dia-cdk {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.dia-cdk-text {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 402px;
  height: 45px;
  border-radius: 45px;
  background: #ffa145;
}
.dia-cdk p {
  font-size: 28px;
  color: #fff;
  font-family: "f600";
}
.dia-tips {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.dia-tips p {
  width: 400px;
  font-size: 24px;
  color: #967355;
  font-family: "f600";
  text-align: center;
}
.dia-reward {
  display: flex;
  flex-direction: column;
  width: 520px;
  padding: 10px 0 0;
}
.dia-reward li {
  font-size: 20px;
  color: #967355;
  font-family: "f600";
}
.dia-lottery {
  display: flex;
  flex-direction: column;
  width: 630px;
  padding: 10px 0 0;
}
.dia-lottery li {
  font-size: 20px;
  color: #967355;
  font-family: "f600";
  line-height: 1.1;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .8);
  z-index: 999;
  display: none;
}
.show {
  display: flex;
}

.modal-container .modal {
  width: 695px;
  height: 341px;
  background: url('../images/mobile/lottery/modal_bg.png') 0 0/100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 30px;
  box-sizing: border-box;
  position: relative;
}

.modal-container .modal-1 {
  width: 695px;
  height: 341px;
  background-image: url('../images/mobile/lottery/modal_bg_1.png');
}

.modal .modal-title {
  width: 331px;
}

.modal .modal-title-2-id, 
.modal .modal-title-2-en {
  width: 415px;
}

.modal .modal-close {
  position: absolute;
  right: 40px;
  top: 30px;
  width: 40.5px;
}

.modal-content {
  padding: 10px 54px;
  box-sizing: border-box;
}

.modal-content1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  /* height: 32vw; */
  padding-top: 10px;
  box-sizing: border-box;
  color: #967355;
  font-size: 22px;
  font-weight: bold;
}

.modal-content1 p {
  margin-top: 20px;
  text-align: center;
}

.modal-content1 img {
  margin-top: 50px;
  width: 233px;
}

.modal-content1-id img {
  width: 320px
}

.modal-content1-en img {
  margin-top: 60px;
  width: 320px
}


.modal-content-reward-list {
  height: 150px;
  overflow-y: auto;
}

/* .list_rule li {
  font-size: 2.533vw;
  line-height: 3.6vw;
  color: #967355;
  font-weight: bold;
} */

.modal-content-reward-item {
  width: 567px;
  display: flex;
  justify-content: space-between;
  text-align: center;
  color: #967355;
  font-size: 14px;
  font-weight: bold;
}

.modal-content-reward-list .modal-content-reward-item {
  margin-top: 3px;
}

.modal-content-reward-1 {
  text-align: left;
}

.modal-content-reward-1, .modal-content-reward-2, .modal-content-reward-3 {
  flex: 1;
  width: 0;
}

.modal-content-reward-4 {
  width: 8vw;
  text-align: right;
}

.modal-content-reward-title {
  font-size: 20px;
  margin-bottom: 15px;
}

.modal-content-reward-title[lang="en"] {
  font-size: 18px;
}

.modal-content-reward-title[lang="id"] {
  font-size: 18px;
}

.form-tab-banner {
  display: flex;
  gap: 15px;
}

.form-tab-banner .banner-btn {
  width: 240px;
  height: 52px;
  font-size: 14px;
  color: #8c6a50;
  background: url('../images/tab-btn.png');
  background-size: contain;
  background-position: center;
  align-items: center;
  justify-content: center;
  font-family: "f600";
  cursor: pointer;
  filter: grayscale(0.9);
}

.form-tab-banner .banner-btn.active{
  filter: none;
}

.done {
  filter: brightness(0.9);
  pointer-events: none;
}

.reward-cdk {
  font-size: 28px;
}

.copy-cdk {
  text-align: left;
  font-size: 28px;
  cursor: pointer;
}

.pre-head-img {
  background: url('../images/success-img.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 290px;
  height: 290px;
  margin-top: 10px;
}

.pre-head-word {
  color: #946e4e;
  font-size: 20px;
  font-weight: 600;
  padding-top: 5px;
  white-space: pre-wrap;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
}