/*root.sass/common*/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

* {
  padding: 0;
  margin: 0;
}

body {
  padding: 0;
  margin: 0;
  color: #ffffff;
  font: 16px "Microsoft YaHei", Arial, Helvetica, sans-serif, "Zawgyi-One";
  text-decoration: none;
  list-style-type: none;
  background-color: #000;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

a {
  display: inline-block;
  text-decoration: none;
  outline: none;
  behavior: expression(this.onFocus=this.blur());
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

ul {
  margin: 0;
  padding: 0;
}
ul li {
  list-style-type: none;
}

p {
  margin: 0;
}

input[type=text]::-ms-clear {
  display: none;
}

input, select, option, textarea, button {
  outline: none;
  border: none;
}

input, button, textarea {
  font: 400 13.3333px Arial;
}

div:focus {
  outline: none;
}

h1, h2, h3, h4, h5, p {
  margin: 0;
}

h1 {
  font-size: 32px;
}
h1.h1-tits {
  font-size: 30px;
}

h2 {
  font-size: 24px;
}

h3 {
  font-size: 20px;
}

h4 {
  font-size: 16px;
}

span, h5 {
  font-size: 14px;
}

hr {
  margin: 5px 0;
  border-color: #ccc;
}

img {
  display: block;
}

body {
  background: url(../img/background.webp) #000 fixed;
  background-size: 100%;
}

main {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

header {
  width: 100%;
  height: 80px;
  position: fixed;
  left: 0;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: url(../img/Gclub-bg-header.webp) rgba(0, 0, 0, 0.5058823529);
  z-index: 9;
}
@media (max-width: 1080px) {
  header {
    height: 10.648vw;
  }
}
header .head {
  width: 100%;
  max-width: 1080px;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
}

.logo {
  width: 16.759259vw;
  max-width: 181px;
}
@media (max-width: 640px) {
  .logo {
    width: 27vw;
  }
}
.logo img {
  width: 100%;
}

.lang {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  right: 0;
  padding: 0 30px;
  height: 100%;
  cursor: pointer;
}
@media (max-width: 1080px) {
  .lang {
    padding: 0 3vw;
  }
}
@media (max-width: 640px) {
  .lang {
    padding: 0 4.7vw;
  }
}
.lang img {
  width: 3.24vw;
  max-width: 35px;
}
@media (max-width: 640px) {
  .lang img {
    width: 4.5vw;
  }
}
.lang .nav-lang {
  position: absolute;
  width: 130px;
  top: 80px;
  background: rgba(39, 39, 39, 0.7411764706);
  padding: 10px;
  right: 0;
  border-bottom-left-radius: 20px;
}
@media (max-width: 1080px) {
  .lang .nav-lang {
    width: 12vw;
    top: 10.648vw;
    padding: 1vw;
  }
}
.lang .li-lang {
  padding: 10px 0;
}
@media (max-width: 1080px) {
  .lang .li-lang {
    padding: 1vw 0;
  }
}
@media (max-width: 640px) {
  .lang .li-lang {
    padding: 2vw 0;
  }
}
.lang .li-lang a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  cursor: pointer;
}
@media (max-width: 640px) {
  .lang .li-lang a {
    display: block;
    text-align: center;
  }
  .lang .li-lang a img {
    margin: 0 auto;
  }
}
.lang .li-lang span {
  color: #fff;
  font-weight: bold;
  font-size: 18px;
}
@media (max-width: 1080px) {
  .lang .li-lang span {
    font-size: 1.66666666vw;
  }
}
@media (max-width: 640px) {
  .lang .li-lang span {
    font-size: 2.3vw;
  }
}

.banner {
  width: 100%;
  height: 1120px;
  background-size: 100% auto;
  position: relative;
}
@media (max-width: 1080px) {
  .banner {
    height: 103.7vw;
  }
}
.banner img.banner {
  width: 100%;
}
.banner img.txt_banner {
  position: absolute;
  top: 928px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 1;
}
@media (max-width: 1080px) {
  .banner img.txt_banner {
    top: 85.92592592vw;
  }
  .banner img.txt_banner:lang(tw) {
    width: 54.9vw;
  }
  .banner img.txt_banner:lang(cn) {
    width: 57.685185vw;
  }
  .banner img.txt_banner:lang(en) {
    width: 80vw;
  }
  .banner img.txt_banner:lang(th) {
    width: 75.462962963vw;
  }
}
.banner .photo {
  position: absolute;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 1;
  -webkit-animation: float 4s ease-in-out infinite;
          animation: float 4s ease-in-out infinite;
  -webkit-filter: drop-shadow(0 0 9px rgba(252, 131, 32, 0.5411764706));
          filter: drop-shadow(0 0 9px rgba(252, 131, 32, 0.5411764706));
}
@media (max-width: 1080px) {
  .banner .photo {
    -webkit-animation: floatM 4s ease-in-out infinite;
            animation: floatM 4s ease-in-out infinite;
    -webkit-filter: drop-shadow(0 0 0.8333vw rgba(252, 131, 32, 0.5411764706));
            filter: drop-shadow(0 0 0.8333vw rgba(252, 131, 32, 0.5411764706));
  }
}
.banner .photo01 {
  top: 554px;
  left: 12.2%;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
@media (max-width: 1080px) {
  .banner .photo01 {
    width: 21.4814814815vw;
    top: 51.2962962963vw;
  }
}
.banner .photo02 {
  top: 391px;
  left: 22.5%;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
@media (max-width: 1080px) {
  .banner .photo02 {
    width: 22.2222222222vw;
    top: 36.2vw;
  }
}
.banner .photo03 {
  top: 289px;
  left: 37.8%;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
@media (max-width: 1080px) {
  .banner .photo03 {
    width: 17.5vw;
    top: 26.7592592593vw;
  }
}
.banner .photo04 {
  top: 336px;
  left: 63.3%;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}
@media (max-width: 1080px) {
  .banner .photo04 {
    width: 17.5vw;
    top: 31.1111111111vw;
  }
}
.banner .photo05 {
  top: 390px;
  left: 76.5%;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
@media (max-width: 1080px) {
  .banner .photo05 {
    width: 25.37vw;
    top: 36.1111111111vw;
  }
}
.banner .photo06 {
  top: 543px;
  left: 88.2%;
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}
@media (max-width: 1080px) {
  .banner .photo06 {
    width: 20.462962963vw;
    top: 50.2777777778vw;
  }
}
@-webkit-keyframes float {
  0% {
    -webkit-transform: translateX(-50%) translateY(0) scale(1);
            transform: translateX(-50%) translateY(0) scale(1);
  }
  50% {
    -webkit-transform: translateX(-50%) translateY(-10px) scale(1.05);
            transform: translateX(-50%) translateY(-10px) scale(1.05);
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(0) scale(1);
            transform: translateX(-50%) translateY(0) scale(1);
  }
}
@keyframes float {
  0% {
    -webkit-transform: translateX(-50%) translateY(0) scale(1);
            transform: translateX(-50%) translateY(0) scale(1);
  }
  50% {
    -webkit-transform: translateX(-50%) translateY(-10px) scale(1.05);
            transform: translateX(-50%) translateY(-10px) scale(1.05);
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(0) scale(1);
            transform: translateX(-50%) translateY(0) scale(1);
  }
}
@-webkit-keyframes floatM {
  0% {
    -webkit-transform: translateX(-50%) translateY(0) scale(1);
            transform: translateX(-50%) translateY(0) scale(1);
  }
  50% {
    -webkit-transform: translateX(-50%) translateY(0.9259259259vw) scale(1.05);
            transform: translateX(-50%) translateY(0.9259259259vw) scale(1.05);
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(0) scale(1);
            transform: translateX(-50%) translateY(0) scale(1);
  }
}
@keyframes floatM {
  0% {
    -webkit-transform: translateX(-50%) translateY(0) scale(1);
            transform: translateX(-50%) translateY(0) scale(1);
  }
  50% {
    -webkit-transform: translateX(-50%) translateY(0.9259259259vw) scale(1.05);
            transform: translateX(-50%) translateY(0.9259259259vw) scale(1.05);
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(0) scale(1);
            transform: translateX(-50%) translateY(0) scale(1);
  }
}
.banner .banner-girl {
  position: absolute;
  z-index: 1;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  left: 49%;
  top: 318px;
}
@media (max-width: 1080px) {
  .banner .banner-girl {
    width: 66.2vw;
    top: 29.4444444444vw;
  }
}

.sec-new-bacc {
  width: 100%;
  position: relative;
}
.sec-new-bacc img {
  width: 100%;
}
.sec-new-bacc .img-title {
  width: 652px;
  position: absolute;
  left: 57%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  top: 120px;
}
@media (max-width: 1080px) {
  .sec-new-bacc .img-title {
    width: 60.37vw;
    top: 11.1111111111vw;
  }
}
.sec-new-bacc .img-title:lang(th) {
  width: 631px;
  left: 55%;
  top: 98px;
}
@media (max-width: 1080px) {
  .sec-new-bacc .img-title:lang(th) {
    width: 58.4259259259vw;
    top: 9vw;
  }
}
.sec-new-bacc .img-title:lang(en) {
  width: 659px;
  left: 56%;
  top: 121px;
}
@media (max-width: 1080px) {
  .sec-new-bacc .img-title:lang(en) {
    width: 61.0185185185vw;
    top: 11.2vw;
  }
}
.sec-new-bacc .img-girl {
  width: 272px;
  position: absolute;
  top: 397px;
  left: 131px;
}
@media (max-width: 1080px) {
  .sec-new-bacc .img-girl {
    width: 25.1851851852vw;
    top: 36.7592592593vw;
    left: 12.1296296296vw;
  }
}
.sec-new-bacc .bet-slider {
  width: 100%;
  height: 455px;
  position: absolute;
  overflow: hidden;
  top: 285px;
  -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(10%, rgba(0, 0, 0, 0)), color-stop(35%, #000000), color-stop(85%, #000000), to(rgba(0, 0, 0, 0)));
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 10%, #000000 35%, #000000 85%, rgba(0, 0, 0, 0) 100%);
          mask-image: -webkit-gradient(linear, left top, right top, color-stop(10%, rgba(0, 0, 0, 0)), color-stop(35%, #000000), color-stop(85%, #000000), to(rgba(0, 0, 0, 0)));
          mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 10%, #000000 35%, #000000 85%, rgba(0, 0, 0, 0) 100%);
}
@media (max-width: 1080px) {
  .sec-new-bacc .bet-slider {
    height: 42.1296296296vw;
    top: 26vw;
  }
}
.sec-new-bacc .bet-slider img {
  width: auto;
  -webkit-transform: rotate(20.89deg) translateX(-7.5%);
          transform: rotate(20.89deg) translateX(-7.5%);
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-animation: bet 20s infinite;
          animation: bet 20s infinite;
}
@media (max-width: 1080px) {
  .sec-new-bacc .bet-slider img {
    width: 300.1851851852vw;
  }
}
@-webkit-keyframes bet {
  0% {
    -webkit-transform: rotate(20.89deg) translateX(-7.5%);
            transform: rotate(20.89deg) translateX(-7.5%);
  }
  4.17% {
    -webkit-transform: rotate(20.89deg) translateX(-20.5%);
            transform: rotate(20.89deg) translateX(-20.5%);
  }
  25% {
    -webkit-transform: rotate(20.89deg) translateX(-20.5%);
            transform: rotate(20.89deg) translateX(-20.5%);
  }
  29.17% {
    -webkit-transform: rotate(20.89deg) translateX(-33%);
            transform: rotate(20.89deg) translateX(-33%);
  }
  50% {
    -webkit-transform: rotate(20.89deg) translateX(-33%);
            transform: rotate(20.89deg) translateX(-33%);
  }
  54.17% {
    -webkit-transform: rotate(20.89deg) translateX(-45.7%);
            transform: rotate(20.89deg) translateX(-45.7%);
  }
  75% {
    -webkit-transform: rotate(20.89deg) translateX(-45.7%);
            transform: rotate(20.89deg) translateX(-45.7%);
  }
  79.17% {
    -webkit-transform: rotate(20.89deg) translateX(-58.5%);
            transform: rotate(20.89deg) translateX(-58.5%);
  }
  99.9999% {
    -webkit-transform: rotate(20.89deg) translateX(-58.5%);
            transform: rotate(20.89deg) translateX(-58.5%);
  }
  100% {
    -webkit-transform: rotate(20.89deg) translateX(-7.5%);
            transform: rotate(20.89deg) translateX(-7.5%);
  }
}
@keyframes bet {
  0% {
    -webkit-transform: rotate(20.89deg) translateX(-7.5%);
            transform: rotate(20.89deg) translateX(-7.5%);
  }
  4.17% {
    -webkit-transform: rotate(20.89deg) translateX(-20.5%);
            transform: rotate(20.89deg) translateX(-20.5%);
  }
  25% {
    -webkit-transform: rotate(20.89deg) translateX(-20.5%);
            transform: rotate(20.89deg) translateX(-20.5%);
  }
  29.17% {
    -webkit-transform: rotate(20.89deg) translateX(-33%);
            transform: rotate(20.89deg) translateX(-33%);
  }
  50% {
    -webkit-transform: rotate(20.89deg) translateX(-33%);
            transform: rotate(20.89deg) translateX(-33%);
  }
  54.17% {
    -webkit-transform: rotate(20.89deg) translateX(-45.7%);
            transform: rotate(20.89deg) translateX(-45.7%);
  }
  75% {
    -webkit-transform: rotate(20.89deg) translateX(-45.7%);
            transform: rotate(20.89deg) translateX(-45.7%);
  }
  79.17% {
    -webkit-transform: rotate(20.89deg) translateX(-58.5%);
            transform: rotate(20.89deg) translateX(-58.5%);
  }
  99.9999% {
    -webkit-transform: rotate(20.89deg) translateX(-58.5%);
            transform: rotate(20.89deg) translateX(-58.5%);
  }
  100% {
    -webkit-transform: rotate(20.89deg) translateX(-7.5%);
            transform: rotate(20.89deg) translateX(-7.5%);
  }
}

.sec-donate {
  width: 100%;
  position: relative;
}
.sec-donate img {
  width: 100%;
}
.sec-donate .img-title {
  width: 680px;
  position: absolute;
  left: 35%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  top: 53px;
}
@media (max-width: 1080px) {
  .sec-donate .img-title {
    width: 62.962962963vw;
    top: 4.9074074074vw;
  }
}
.sec-donate .img-title:lang(th) {
  width: 570px;
  left: 30%;
  top: 14px;
}
@media (max-width: 1080px) {
  .sec-donate .img-title:lang(th) {
    width: 52.7777777778vw;
    top: 1.2962962963vw;
  }
}
.sec-donate .img-title:lang(en) {
  width: 776px;
  left: 40%;
  top: 25px;
}
@media (max-width: 1080px) {
  .sec-donate .img-title:lang(en) {
    width: 71.8518518519vw;
    top: 1.8518518519vw;
  }
}

.sec-hot-game {
  width: 100%;
  height: 1069px;
  background: url(../img/Gclub-bg-hotGame.webp);
  background-size: 100% 100%;
  position: relative;
}
@media (max-width: 1080px) {
  .sec-hot-game {
    height: 98.9814814815vw;
  }
}
.sec-hot-game .ui-hotTitle {
  position: absolute;
  top: 110px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media (max-width: 1080px) {
  .sec-hot-game .ui-hotTitle {
    top: 10.1851851852vw;
  }
}
.sec-hot-game .ui-hotTitle img {
  width: 100%;
}
.sec-hot-game .ui-hotTitle:lang(tw), .sec-hot-game .ui-hotTitle:lang(cn), .sec-hot-game .ui-hotTitle:lang(th) {
  width: 375px;
}
@media (max-width: 1080px) {
  .sec-hot-game .ui-hotTitle:lang(tw), .sec-hot-game .ui-hotTitle:lang(cn), .sec-hot-game .ui-hotTitle:lang(th) {
    width: 34.7222222222vw;
  }
}
.sec-hot-game .ui-hotTitle:lang(en) {
  width: 574px;
}
@media (max-width: 1080px) {
  .sec-hot-game .ui-hotTitle:lang(en) {
    width: 53.1481481481vw;
  }
}

.reg-gameList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 873px;
  margin: 0 auto;
  padding-top: 220px;
  gap: 41px 0;
}
@media (max-width: 1080px) {
  .reg-gameList {
    width: 80.83333vw;
    padding-top: 20.37vw;
    gap: 3.796296vw 0;
  }
}
.reg-gameList img {
  width: 261px;
  margin-bottom: 5px;
}
@media (max-width: 1080px) {
  .reg-gameList img {
    width: 24.1666666vw;
    margin-bottom: 0.5vw;
  }
}
.reg-gameList span {
  font-size: 28px;
  color: #fff;
  font-weight: bold;
  display: block;
  text-align: center;
}
@media (max-width: 1080px) {
  .reg-gameList span {
    font-size: 2.59259vw;
  }
}

footer {
  width: 100%;
  height: 216px;
  position: relative;
  background: url(../img/Gclub-bg-footer.webp);
  background-size: 100% 100%;
  position: relative;
}
@media (max-width: 1080px) {
  footer {
    height: 20vw;
  }
}

.reg-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 900px;
  margin: 0 auto;
  padding-top: 33px;
}
@media (max-width: 1080px) {
  .reg-button {
    width: 83.333333vw;
    padding-top: 3vw;
  }
}
.reg-button img {
  width: 418px;
  -webkit-filter: drop-shadow(0 0 25px rgba(255, 228, 0, 0.4));
          filter: drop-shadow(0 0 25px rgba(255, 228, 0, 0.4));
}
@media (max-width: 1080px) {
  .reg-button img {
    width: 38.7vw;
    -webkit-filter: drop-shadow(0 0 2.31vw rgba(255, 228, 0, 0.4));
            filter: drop-shadow(0 0 2.31vw rgba(255, 228, 0, 0.4));
  }
}

.go-to-top {
  width: 60px;
  position: fixed;
  right: calc(50% - 520px);
  bottom: 70px;
}
@media (max-width: 1080px) {
  .go-to-top {
    width: 45px;
    right: 2.7777777777vw;
    bottom: 13.888888888vw;
  }
}
@media (max-width: 640px) {
  .go-to-top {
    width: 45px;
  }
}
@media (max-width: 490px) {
  .go-to-top {
    width: 35px;
  }
}
.go-to-top img {
  width: 100%;
}