.element {
  /*background-color:#092800;
  */
  display:flex;
  flex-direction:row;
  justify-content:center;
  width: 380px;
  position: relative;
  margin: auto;
}
.element .overlap-wrapper {
  background-color:#000000;
  overflow:hidden;
  max-width:24.375rem;
  max-height:50.75rem;
}
.element .overlap {
  /*position:relative;
  */
}
.element .element-render-abstract {
  position:absolute;
  width:100%;
  /*height:100%;
  */
  /*top:0;
	*/
  /*left:0;
	*/
  object-fit:cover;
}
.element .games {
  position:relative;
  /*width:24.375rem;
  */
  /*height:12rem;
	*/
  /*top:5.5625rem;
	*/
  /*left:0;
	*/
  object-fit:cover;
  /*z-index:1000;*/
  width:100%;
  margin-top:20px;
}
.element .group {
  position:absolute;
  width:24.625rem;
  height:23.75rem;
  top:17.5625rem;
  left:0.3125rem;
}
.element .overlap-group {
  position:relative;
  width:23.75rem;
  height:23.75rem;
  background-image:url(../img/background.png);
  background-size:cover;
  background-position:50% 50%;
}
.element .img {
  position:absolute;
  width:23.75rem;
  height:23.75rem;
  top:0;
  left:0;
  object-fit:cover;
}
.element .rodar {
  position:absolute;
  top:11.1875rem;
  left:9.375rem;
  font-family:"Mont-Bold",Helvetica;
  font-weight:700;
  color:#ffc060;
  font-size:1.375rem;
  text-align:center;
  letter-spacing:0;
  line-height:normal;
}
.element .text-wrapper {
  position:absolute;
  width:5.5rem;
  top:3.375rem;
  left:9.125rem;
  font-family:"Mont-Bold",Helvetica;
  font-weight:700;
  color:#221103;
  font-size:1rem;
  text-align:center;
  letter-spacing:0;
  line-height:1rem;
}
.element .vector {
  position:absolute;
  width:5.5rem;
  height:2.5rem;
  top:17.875rem;
  left:9.125rem;
}
.element .vector-2 {
  position:absolute;
  width:4.875rem;
  height:6rem;
  top:12.3125rem;
  left:16.0625rem;
}
.element .vector-3 {
  position:absolute;
  width:4.875rem;
  height:6rem;
  top:5.1875rem;
  left:3.1875rem;
}
.element .vector-4 {
  position:absolute;
  width:4.875rem;
  height:6rem;
  top:12.3125rem;
  left:3.125rem;
}
.element .vector-5 {
  position:absolute;
  width:4.875rem;
  height:6rem;
  top:5.1875rem;
  left:16rem;
}
.element .div {
  top:17.5rem;
  left:9.9375rem;
  transform:rotate(-180deg);
  position:absolute;
  font-family:"Mont-Bold",Helvetica;
  font-weight:700;
  color:#ffffff;
  font-size:2.25rem;
  text-align:center;
  letter-spacing:0;
  line-height:normal;
}
.element .text-wrapper-2 {
  top:6.9375rem;
  left:4.125rem;
  transform:rotate(-60deg);
  position:absolute;
  font-family:"Mont-Bold",Helvetica;
  font-weight:700;
  color:#ffffff;
  font-size:2.25rem;
  text-align:center;
  letter-spacing:0;
  line-height:normal;
}
.element .text-wrapper-3 {
  top:6.8125rem;
  left:17.125rem;
  transform:rotate(60deg);
  position:absolute;
  font-family:"Mont-Bold",Helvetica;
  font-weight:700;
  color:#ffffff;
  font-size:2.25rem;
  text-align:center;
  letter-spacing:0;
  line-height:normal;
}
.element .text-wrapper-4 {
  top:13.625rem;
  left:17.3125rem;
  transform:rotate(120deg);
  position:absolute;
  font-family:"Mont-Bold",Helvetica;
  font-weight:700;
  color:#ffffff;
  font-size:2.25rem;
  text-align:center;
  letter-spacing:0;
  line-height:normal;
}
.element .text-wrapper-5 {
  top:13.625rem;
  left:4.25rem;
  transform:rotate(-120deg);
  position:absolute;
  font-family:"Mont-Bold",Helvetica;
  font-weight:700;
  color:#ffffff;
  font-size:2.25rem;
  text-align:center;
  letter-spacing:0;
  line-height:normal;
}
.element .frame {
  flex-direction:column;
  position:relative;
  text-align:center;
  gap:0.625rem;
  margin-top:1.25rem;
  top: -100px;
}
.div-wrapper {
  justify-content:center;
  padding:1rem 1.25rem;
  position:relative;
  flex:0 0 auto;
  background-color:#80dc6a;
  border-radius:0.625rem;
  display:inline-flex;
  align-items:center;
  gap:0.625rem;
  cursor: pointer;
}
.text-wrapper-6 {
  position:relative;
  width:fit-content;
  /*margin-top:-0.0625rem;*/
  font-family:"Mont-Bold",Helvetica;
  font-weight:700;
  color:#000000;
  font-size:1rem;
  text-align:center;
  letter-spacing:0;
  /*line-height:1.5rem;*/
  white-space:nowrap;
  -moz-user-select:none; /*火狐*/
  -webkit-user-select:none; /*webkit浏览器*/
  -ms-user-select:none; /*IE10*/
  -khtml-user-select:none; /*早期浏览器*/
  user-select:none;
}
.element .p {
  position:relative;
  font-family:"Mont-Bold",Helvetica;
  font-weight:700;
  color:#ffffff;
  font-size:1rem;
  text-align:center;
  letter-spacing:0;
  line-height:1rem;
  white-space:nowrap;
}
.element .betfrom-official {
  position:relative;
  /*width:10rem;*/
  /*height:1.8125rem;
  */
  /*top:2.625rem;
	*/
  /*left:7.1875rem;
	*/
  object-fit:cover;
  z-index:1000;
  margin:0rem auto 0 auto;
  padding-top:34px;
  display:block;
}
.my-lucky {
  margin:auto;
  text-align: center;
}

.lucky-box {
  position:relative;
}
.lucky-btn {
  width:3.125rem;
  height:3.125rem;
  color:#fff;
  cursor:pointer;
  background:slateblue;
  text-align:center;
  line-height:3.125rem;
  border-radius:0.625rem;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

.custom-model-main {
  text-align: center;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; /* z-index: 1050; */
  -webkit-overflow-scrolling: touch;
  outline: 0;
  opacity: 0;
  -webkit-transition: opacity 0.15s linear, z-index 0.15;
  -o-transition: opacity 0.15s linear, z-index 0.15;
  transition: opacity 0.15s linear, z-index 0.15;
  z-index: -1;
  overflow-x: hidden;
  overflow-y: auto;
}

.model-open {
  z-index: 99999;
  opacity: 1;
  overflow: hidden;
}
.custom-model-inner {
  /*-webkit-transform: translate(0, -25%);*/
  /*-ms-transform: translate(0, -25%);*/
  /*transform: translate(0, -25%);*/
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: -webkit-transform 0.3s ease-out;
  -o-transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  display: inline-block;
  vertical-align: middle;
  width: 600px;
  margin: auto;
  max-width: 97%;
  display: grid;
  place-items: center;
}
.custom-model-wrap {
  display: block;
  width: 80%;
  height: 260px;
  /*position: relative;*/
  background-color: #eeecd5;
  /*border: 1px solid #999;*/
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  background-clip: padding-box;
  outline: 0;
  text-align: left;
  padding: 20px 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% ,-50% );
  z-index: 1000;
}
.model-open .custom-model-inner {
  /*-webkit-transform: translate(0, 0);*/
  /*-ms-transform: translate(0, 0);*/
  /*transform: translate(0, 0);*/
  position: relative;
  z-index: 999;
  height: 100%;
}
.model-open .bg-overlay {
  background: rgba(0, 0, 0, 0.6);
  z-index: 99;
}
.bg-overlay {
  background: rgba(0, 0, 0, 0);
  height: 100vh;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  -webkit-transition: background 0.15s linear;
  -o-transition: background 0.15s linear;
  transition: background 0.15s linear;
}
.close-btn {
  position: absolute;
  right: 0;
  top: -30px;
  cursor: pointer;
  z-index: 99;
  font-size: 30px;
  color: #fff;
}

.popu-box{
  width: 160px;
  text-align: center;
  position: relative;
  height: 80px;
  margin: 40px auto 30px auto;
  line-height: 80px;
}
.popu-box img{
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.win-num{
  color: #ffffff;
  font-size: 40px;
  position: relative;
  font-family:"Mont-Bold",Helvetica;
  font-weight:700;
}
.pop-up-content-wrap{
  text-align: center;
  position: absolute;
  z-index: 11000;
}

.img-box {

  width: 98%;
  /*height: 350px;*/
  /*background: black;*/
  position: relative;

  z-index: 10000;
}

.img-bo-admin {
  -webkit-animation: fadeleftIn 1s;
  animation: fadeleftIn 1s;
  -webkit-animation-name: popIn;
  animation-name: popIn;
}

@-webkit-keyframes popIn {
  0% {
    -webkit-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
    opacity: 0;
  }
  /*50% {*/
  /*    -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);*/
  /*    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);*/
  /*}*/
  80% {
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
    transform: scale3d(1.2, 1.2, 1.2);
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 1;
  }
}

@keyframes popIn {
  0% {
    -webkit-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
    opacity: 0;
  }
  /*50% {*/
  /*    -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);*/
  /*    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);*/
  /*}*/
  80% {
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
    transform: scale3d(1.2, 1.2, 1.2);
    /*-webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);*/
    /*animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);*/
    opacity: 1;
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    /*-webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);*/
    /*animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);*/
    opacity: 1;
  }
}

.sun {
  position: absolute;
  /*top: 1em;*/
  /*right: 1em;*/
  z-index: 999;
  height: 20vmin;
  width: 20vmin;
  /*-webkit-animation: sunshine 4s infinite;*/
  /*animation: sunshine 4s infinite;*/
  /* -webkit-animation: spin 20s linear infinite; */
  -moz-animation: spin 10s linear infinite;
  animation: spin 10s linear infinite;
}
.ray:nth-child(1) {
  -webkit-animation: strengthen-1 4s infinite;
  animation: strengthen-1 4s infinite;
  transform: translate(-50%, 0) rotate(36deg) scale(1, 1);
}
.ray:nth-child(2) {
  -webkit-animation: strengthen-2 4s infinite;
  animation: strengthen-2 4s infinite;
  transform: translate(-50%, 0) rotate(72deg) scale(1, 1);
}
.ray:nth-child(3) {
  -webkit-animation: strengthen-3 4s infinite;
  animation: strengthen-3 4s infinite;
  transform: translate(-50%, 0) rotate(108deg) scale(1, 1);
}
.ray:nth-child(4) {
  -webkit-animation: strengthen-4 4s infinite;
  animation: strengthen-4 4s infinite;
  transform: translate(-50%, 0) rotate(144deg) scale(1, 1);
}
.ray:nth-child(5) {
  -webkit-animation: strengthen-5 4s infinite;
  animation: strengthen-5 4s infinite;
  transform: translate(-50%, 0) rotate(180deg) scale(1, 1);
}
.ray:nth-child(6) {
  -webkit-animation: strengthen-6 4s infinite;
  animation: strengthen-6 4s infinite;
  transform: translate(-50%, 0) rotate(216deg) scale(1, 1);
}
.ray:nth-child(7) {
  -webkit-animation: strengthen-7 4s infinite;
  animation: strengthen-7 4s infinite;
  transform: translate(-50%, 0) rotate(252deg) scale(1, 1);
}
.ray:nth-child(8) {
  -webkit-animation: strengthen-8 4s infinite;
  animation: strengthen-8 4s infinite;
  transform: translate(-50%, 0) rotate(288deg) scale(1, 1);
}
.ray:nth-child(9) {
  -webkit-animation: strengthen-9 4s infinite;
  animation: strengthen-9 4s infinite;
  transform: translate(-50%, 0) rotate(324deg) scale(1, 1);
}
.ray:nth-child(10) {
  -webkit-animation: strengthen-10 4s infinite;
  animation: strengthen-10 4s infinite;
  transform: translate(-50%, 0) rotate(360deg) scale(1, 1);
}
.ray {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 220px;
  width: 80px;
  background: linear-gradient(to bottom, rgba(255, 204, 0, 0), rgba(255, 252, 197, 0.25) 35%, rgba(255, 255, 255, 0) 100%);
  /*border-radius: 0 0 10em 10em;*/
  -webkit-clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%);
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%);
  transform-origin: center top;
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

:root {
  --default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC",
  "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei",
  "Source Han Sans CN", sans-serif;
}

.span {
  margin: auto;
  cursor: pointer;
  background: #70c55f;
  border: none;
  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  max-width: 320px;
  padding: 0 10px;
  height: 64px;
  width: 100%;
  display: block;
  color: #ffffff;
  font-family: Montserrat, var(--default-font-family);
  font-size: 20px;
  font-weight: 800;
  line-height: 64px;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 2px;
}


@media (max-width: 767px){
  .element {
    width: 100%
  }
}