.detail-card {
  border: 1px solid #ececec;
  border-radius: 5px;
  line-height: 1;
  overflow: hidden
}
.detail-card .card-content {
  background: #fafafc;
  padding: 15px
}
.detail-card .card-more-btn {
  background-color: #e1e1e1;
  color: #838383;
  cursor: pointer;
  font-size: 14px;
  padding: 8px 15px;
  text-align: center
}
.detail-card .card-detail-content {
  background: #fafafc;
  border-top: 1px solid #e9e9e9;
  cursor: pointer;
  padding: 5px 20px
}
.detail-card .card-detail-content.disabled {
  cursor: default
}
.ec-tooltip-remark-block {
  align-items: normal !important;
  border: 2px solid #e9e9e9;
  border-radius: 5px;
  display: flex;
  font-size: 12px;
  height: 42px;
  justify-content: space-between;
  line-height: 14px;
  padding: 5px;
  position: relative
}
.ec-tooltip-remark-block .remark-tooltip {
  background-color: #000;
  border-radius: 8px;
  color: #fff;
  left: 0;
  padding: 8px;
  position: absolute;
  top: -2px;
  transition: opacity .3s ease-out;
  visibility: hidden;
  word-break: break-all;
  z-index: 100
}
.ec-tooltip-remark-block .remark-tooltip.show {
  visibility: visible
}
.ec-tooltip-remark-block .remark-text {
  color: #545658;
  word-break: break-all
}
.ec-tooltip-remark-block .remark-text.hide-multiple-lines {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  overflow: hidden
}
.ec-tooltip-remark-block .more-place {
  align-items: center;
  cursor: pointer;
  display: flex;
  min-width: 30px
}
.ec-tooltip-remark-block .more-place .more-circle-btn {
  border: 1px solid #f8991d;
  border-radius: 10px;
  height: 15px;
  position: relative;
  width: 15px
}
.ec-tooltip-remark-block .more-place .more-circle-btn:after {
  color: #f8991d;
  content: "...";
  left: 2px;
  position: absolute;
  top: -4px
}
.anytime-rebate-history {
  display: flex;
  flex-direction: column
}
.anytime-rebate-history .tips {
  align-items: center;
  color: #545658;
  display: flex;
  font-size: 14px;
  margin-bottom: 10px
}
.anytime-rebate-history .tips i {
  font-size: 12px;
  margin-right: 4px
}
.anytime-rebate-history .anytime-rebate-card {
  background: #fafafc;
  border: 1px solid #ececec;
  border-radius: 5px
}
.anytime-rebate-history .anytime-rebate-card .detail-card {
  border: 0
}
.anytime-rebate-history .anytime-rebate-card .detail-card .card-content {
  background: 0 0;
  padding: 0
}
.anytime-rebate-history .anytime-rebate-card .detail-card .card-content .rebate-content {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 15px 20px
}
.anytime-rebate-history .anytime-rebate-card .detail-card .card-content .rebate-content .rebate-info {
  color: #939698
}
.anytime-rebate-history .anytime-rebate-card .detail-card .card-content .rebate-content .rebate-info .amount {
  color: #545658;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 5px
}
.anytime-rebate-history .anytime-rebate-card .detail-card .card-content .rebate-content .rebate-info .amount small {
  font-size: 14px;
  padding-left: 5px
}
.anytime-rebate-history .anytime-rebate-card .detail-card .card-content .rebate-content .rebate-info .date {
  font-size: 12px;
  margin-bottom: 8px
}
.anytime-rebate-history .anytime-rebate-card .detail-card .card-content .rebate-content .rebate-info .limit {
  color: #e94951;
  font-size: 12px;
  margin-bottom: 8px
}
.anytime-rebate-history .anytime-rebate-card .detail-card .card-content .rebate-content .rebate-info .title {
  font-size: 14px;
  font-weight: 400;
  margin: 0
}
.anytime-rebate-history .anytime-rebate-card .detail-card .card-content .rebate-content .rebate-func .nrc-button {
  border-radius: 5px;
  min-width: 110px;
  padding: 0 20px;
  text-align: center;
  transform: scale(.9)
}
.anytime-rebate-history .anytime-rebate-card .detail-card .card-content .rebate-content .rebate-func .nrc-button.disabled {
  background: #ccc;
  cursor: not-allowed
}
.anytime-rebate-history .anytime-rebate-card .card-detail-content .rebate-detail {
  color: #545658;
  font-size: 12px;
  line-height: 16px
}
.anytime-rebate-history .anytime-rebate-card .card-detail-content .rebate-detail .record {
  display: flex;
  justify-content: space-between
}
.anytime-rebate-history .anytime-rebate-card .card-detail-content .rebate-detail .record .record-item {
  flex: 3
}
.anytime-rebate-history .anytime-rebate-card .card-detail-content .rebate-detail .record .record-item:first-child {
  flex: 4
}
.member-center-promo-history {
  display: flex;
  flex-direction: column;
  height: 100%
}
.member-center-promo-history > .content-block {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: calc(100vh - 45px);
  padding: 20px
}
.member-center-promo-history .title-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px
}
.member-center-promo-history .title-wrapper .button-group .nrc-button {
  border-radius: 5px;
  height: auto;
  padding: 5px 20px
}
.member-center-promo-history .infinite-loader-wrapper {
  flex: 1
}
.member-center-promo-history .content-block {
  height: 100%
}
.member-center-promo-history .content-block.claim-all-padding {
  height: calc(100% - 30px)
}
.member-center-promo-history .promo-card {
  background: #fafafc;
  border: 1px solid #ececec;
  border-radius: 5px
}
.member-center-promo-history .promo-card .detail-card {
  border: 0
}
.member-center-promo-history .promo-card .detail-card .card-content {
  background: 0 0;
  padding: 0
}
.member-center-promo-history .promo-card .detail-card .card-content .promo-content {
  padding-bottom: 5px
}
.member-center-promo-history .promo-card .detail-card .ec-tooltip-remark-block {
  border: 0;
  height: 36px;
  line-height: 1.4;
  padding: 0
}
.member-center-promo-history .promo-card .detail-card .ec-tooltip-remark-block .remark-text.hide-multiple-lines {
  max-width: 350px;
  padding: 0
}
.member-center-promo-history .promo-card .detail-card .ec-tooltip-remark-block .more-place {
  justify-content: center
}
.member-center-promo-history .promo-card .promo-content {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 15px 20px
}
.member-center-promo-history .promo-card .promo-content .promo-info {
  color: #939698
}
.member-center-promo-history .promo-card .promo-content .promo-info .amount {
  color: #545658;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 5px
}
.member-center-promo-history .promo-card .promo-content .promo-info .amount small {
  font-size: 14px;
  padding-left: 5px
}
.member-center-promo-history .promo-card .promo-content .promo-info .date {
  font-size: 12px;
  margin-bottom: 8px
}
.member-center-promo-history .promo-card .promo-content .promo-info .date .timer {
  background: #e94951;
  border-radius: 2px;
  color: #fff;
  height: 20px;
  margin-left: 10px;
  padding: 0 4px
}
.member-center-promo-history .promo-card .promo-content .promo-info .date .timer span {
  padding: 0 2px
}
.member-center-promo-history .promo-card .promo-content .promo-info .title {
  font-size: 14px;
  font-weight: 400;
  margin: 0
}
.member-center-promo-history .promo-card .promo-content .promo-func .nrc-button {
  border-radius: 5px;
  min-width: 110px;
  padding: 0 20px;
  text-align: center;
  transform: scale(.9)
}
.member-center-promo-history .promo-card .promo-content .promo-func .nrc-button.disabled {
  background: #ccc;
  cursor: not-allowed
}
.member-center-promo-history.floating-promo-history .portal-modal .modal-content {
  padding: 0
}
.member-center-promo-history.floating-promo-history .portal-modal .modal-content .member-center-promo-history {
  padding: 24px
}
.member-center-promo-history.floating-promo-history .portal-modal .modal-content .member-center-promo-history .title-wrapper .title {
  color: #545658;
  font-size: 19px;
  font-weight: 600;
  line-height: 24px;
  margin-bottom: 20px
}
.member-center-promo-history .claim-all-wrapper {
  margin-bottom: 10px;
  text-align: right
}
.member-center-promo-history .rebate-top-info {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px
}
.member-center-promo-history .claim-all-btn {
  height: 30px
}
.floating-promo-center {
  cursor: pointer;
  height: 110px;
  padding: 5px;
  position: fixed;
  right: 38px;
  top: 300px;
  width: 110px;
  z-index: 500
}
.floating-promo-center.floating-promo-hide {
  visibility: hidden
}
.floating-promo-center > .btn-close {
  align-items: center;
  background-color: rgba(0, 0, 0, .55);
  border-radius: 50%;
  color: #ccc;
  display: flex;
  font-size: 21px;
  height: 26px;
  justify-content: center;
  position: absolute;
  right: -2px;
  top: -2px;
  transition: background-color .3s, box-shadow .3s, transform .3s;
  width: 26px;
  z-index: 3
}
.floating-promo-center > .btn-close span[data-promo-float=close] {
  height: 26px
}
.floating-promo-center .promo-img img {
  animation: shine .8s ease-in-out infinite alternate;
  width: 100%
}
@keyframes shine {
  0% {
    filter: drop-shadow(0 0 0 #ffe07f)
  }
  to {
    filter: drop-shadow(0 0 8px #ffe07f)
  }
}
.floating-promo-history .portal-modal {
  display: flex;
  flex-direction: column;
  height: 70vh
}
.floating-promo-history .portal-modal .modal-content {
  background-color: #f9f9f9;
  flex: 1;
  padding: 0 24px
}
.new-marquee {
  overflow: hidden;
  width: 100%
}
.new-marquee-content {
  display: inline-block;
  white-space: nowrap
}
.new-marquee-item {
  align-items: center;
  display: inline-flex
}
body {
  background-color: #e7e7e7;
  font-family: Microsoft YaHei, Microsoft JhengHei, PingFangTC, Helvetica;
  line-height: normal;
  min-width: 1200px
}
body * {
  box-sizing: border-box
}
main {
  min-height: calc(100vh - 410px);
  position: relative
}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0
}
input[type=number] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield
}
.main-wrap {
  margin: 0 auto;
  position: relative;
  width: 1200px
}
.main-container {
  display: flex;
  margin: auto;
  max-width: 1280px;
  min-width: 1004px;
  position: relative;
  width: 100%
}
.app:not(.account) {
  background-color: #727272;
  display: flex;
  flex-direction: column;
  min-height: 100vh
}
.app-body {
  flex-grow: 1;
  position: relative
}
.highlight-color {
  color: #f8991d
}
.color-failed {
  color: #d22323 !important
}
.color-brand {
  color: #f8991d !important
}
footer {
  background-color: #1b1a1a
}
footer .footer-curve, footer .footer-head {
  display: none
}
footer .footer-main .footer-cont {
  box-sizing: border-box;
  margin: 0 auto 10px;
  padding: 0 20px;
  text-align: center;
  width: 1200px
}
footer .footer-main .footer-cont > div {
  width: 100%
}
footer .footer-main .footer-cont .provider-list-box {
  align-items: center;
  justify-content: center;
  margin: 30px 0
}
footer .footer-main .footer-cont .provider-list-box img {
  margin: 0 5px;
  transform: scale(.95)
}
footer .footer-main .footer-cont .footer-links {
  align-items: center;
  display: flex;
  justify-content: center
}
footer .footer-main .footer-cont .footer-links a {
  color: #fff;
  font-size: 14px;
  margin-bottom: 15px;
  padding: 2px 10px;
  text-decoration: none
}
footer .footer-main .footer-cont .footer-links a:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, .1)
}
footer .footer-main .footer-cont .footer-links a:hover {
  color: #f8991d
}
footer .footer-main .copy {
  background-color: #161616;
  color: #aaa;
  font-size: 12px;
  padding: 20px;
  text-align: center
}
.quick-nav {
  background-color: #000;
  z-index: 14
}
.quick-nav .main-header {
  color: #fff;
  display: flex;
  height: 80px;
  justify-content: space-between;
  margin: 0 auto;
  width: 1200px
}
.quick-nav .logo img {
  background-position: 0;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
  height: calc(100% - 20px);
  margin: 10px 0;
  width: 135px
}
.quick-nav .right {
  align-items: center;
  display: flex;
  flex-direction: row;
  font-weight: 700;
  justify-content: flex-end
}
.quick-nav .right .btn {
  background-color: #f8991d;
  border-radius: 50px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  margin: 0 5px;
  min-width: 120px;
  padding: 10px;
  text-transform: uppercase
}
.quick-nav .right .btn.is-red {
  background-color: red;
  border-color: red;
  padding: 10px
}
.quick-nav .right .btn.is-red:hover {
  background-color: red
}
.quick-nav .right .id {
  background-color: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  padding: 0 10px
}
.quick-nav .primary-quick {
  order: 2
}
.quick-nav .secondary-quick {
  margin-right: 10px;
  order: 1
}
.quick-nav .logined-nav, .quick-nav .primary-quick, .quick-nav .secondary-quick {
  align-items: center;
  display: flex;
  justify-content: flex-end
}
.quick-nav .logined-nav li a, .quick-nav .wallet {
  cursor: pointer;
  display: block;
  font-size: 14px;
  height: 25px;
  line-height: 25px;
  padding: 0 10px
}
.quick-nav .logined-nav li a {
  color: #777
}
.quick-nav .logined-nav li a:hover {
  color: #fff
}
.quick-nav .wallet {
  color: #f8991d;
  font-weight: 700
}
.quick-nav .wallet i {
  margin-left: 5px
}
.quick-nav .lang {
  margin-right: 5px;
  position: relative
}
.quick-nav .lang .lang-toggle {
  cursor: pointer;
  display: flex;
  justify-content: space-between
}
.quick-nav .lang .lang-toggle i {
  margin: 0 1px
}
.quick-nav .lang .lang-list-wrap {
  height: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 24px;
  width: 130px;
  z-index: 99
}
.quick-nav .lang .lang-list {
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, .15);
  color: #333;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  padding: 5px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}
.quick-nav .lang .lang-list li {
  cursor: pointer;
  padding: 5px 10px
}
.quick-nav .lang .lang-list li i {
  margin-right: 5px
}
.quick-nav .lang .lang-list li:hover {
  background-color: #eee
}
.quick-nav .lang.active .lang-list-wrap {
  height: auto
}
.app:not(.account) header {
  background-color: #f8991d;
  position: relative;
  z-index: 13
}
.app:not(.account) header .navigation {
  position: static
}
.app:not(.account) header .nav {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  width: 1200px
}
.app:not(.account) header .nav > li {
  align-items: center;
  display: flex;
  justify-content: center;
	  flex: 1;
}
.app:not(.account) header .nav > li.nav-item a, .app:not(.account) header .nav > li > div.nav-item {
  color: #000;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  height: 40px;
  line-height: 40px;
  padding: 0 15px;
  position: relative;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  width: 100%
}
.app:not(.account) header .nav > li.nav-item a:before, .app:not(.account) header .nav > li > div.nav-item:before {
  background-color: #fddcb1;
  bottom: 2px;
  content: "";
  height: 3px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  transition: all .3s cubic-bezier(.19, 1, .22, 1);
  width: 0
}
.app:not(.account) header .nav > li.nav-item a.active, .app:not(.account) header .nav > li.nav-item a:hover, .app:not(.account) header .nav > li > div.nav-item.active, .app:not(.account) header .nav > li > div.nav-item:hover {
  color: #fff
}
.app:not(.account) header .nav > li.nav-item a.active:before, .app:not(.account) header .nav > li.nav-item a:hover:before, .app:not(.account) header .nav > li > div.nav-item.active:before, .app:not(.account) header .nav > li > div.nav-item:hover:before {
  width: calc(100% - 10px)
}
.app:not(.account) header .nav .nav-item:hover + .submenu {
  height: 300px;
  opacity: 1
}
.app:not(.account) header .nav .submenu {
  background-color: #1d1d1d;
  box-shadow: 0 10px 10px rgba(0, 0, 0, .1);
  height: 0;
  left: 0;
  min-width: 1004px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  text-align: center;
  top: 40px;
  transition: .3s;
  width: 100%;
  z-index: 999
}
.app:not(.account) header .nav .submenu:hover {
  height: 300px;
  opacity: 1
}
.app:not(.account) header .nav .submenu ul {
  font-size: 0;
  height: 300px;
  margin: auto;
  position: relative
}
.app:not(.account) header .nav .submenu ul li {
  display: inline-block;
  height: 100%;
  position: relative
}
.app:not(.account) header .nav .submenu ul li a {
  display: block;
  height: 100%;
  padding: 0 15px;
  position: relative;
  transition: .3s
}
.app:not(.account) header .nav .submenu ul li a:hover {
  background-color: #131313
}
.app:not(.account) header .nav .submenu ul li a:hover:after {
  background-color: #f8991d;
  bottom: 0;
  content: "";
  height: 4px;
  left: 0;
  position: absolute;
  width: 100%
}
.app:not(.account) header .nav .submenu ul li img {
  display: block;
  height: 80%;
  position: relative;
  top: 10%
}
.app:not(.account) header .wallet {
  display: none
}
div.app.account header {
  background-color: #1d1d1d
}
div.app.account header .hello {
  font-weight: 400;
  padding: 8px 15px
}
div.app.account header .main-header {
  display: flex;
  height: 80px;
  justify-content: space-between
}
div.app.account header .main-header ul {
  top: 5px
}
div.app.account header .logo {
  background-size: contain;
  height: calc(100% - 20px);
  margin: 10px 0
}
.banner {
  margin-bottom: 20px
}
.banner .home-carousel {
  background-color: #1b1a1a;
  height: 34.375vw;
  max-height: 629.062px;
  min-height: 412.5px;
  overflow: hidden;
  position: relative
}
.banner .home-carousel .nrc-carousel {
  height: 100%;
  position: relative
}
.banner .home-carousel .nrc-carousel .carousel-control {
  width: 8%
}
.banner .home-carousel .nrc-carousel .carousel-wrapper {
  height: 100%;
  position: relative
}
.banner .home-carousel .nrc-carousel .carousel-wrapper .carousel-item {
  height: 100%;
  left: 50%;
  width: 100%
}
.banner .home-carousel .nrc-carousel .carousel-wrapper .carousel-item img {
  left: -50%;
  margin: auto;
  min-width: 1200px;
  position: relative;
  width: auto !important
}
.banner .home-section {
  height: 550px;
  position: relative;
  width: 100%
}
.banner .home-section .main-wrap {
  height: 100%
}
.banner .home-section .main-wrap .cont {
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  width: 350px
}
.banner .home-section .main-wrap .cont h2 {
  font-size: 35px;
  font-weight: 700;
  margin-bottom: 10px
}
.banner .home-section .main-wrap .cont p {
  font-size: 15px
}
.banner .home-section .main-wrap .cont .section-btn {
  margin-top: 25px
}
.banner .home-section.section-01 {
  background: #111 url("../images/banner-main.jpg") 50%/cover no-repeat;
  background-size: cover;
  height: 34.375vw;
  min-height: 345px
}
.marquee-container {
  position: relative;
  z-index: 12
}
.marquee-block {
  background-color: rgba(0, 0, 0, .5);
  height: 40px;
  line-height: 40px;
  position: absolute;
  width: 100%;
  z-index: 1
}
.marquee-block .marquee-news {
  margin: auto;
  position: relative;
  width: 1100px
}
.marquee-block .marquee-news .news-title {
  background-color: #f8991d;
  border-radius: 50%;
  color: #fff;
  height: 40px;
  margin: 0;
  padding: 0;
  text-align: center;
  transform: scale(.7);
  width: 40px
}
.marquee-block .marquee-news .news-title i {
  font-size: 22px;
  line-height: 40px;
  margin: 0;
  padding: 0;
  vertical-align: baseline
}
@media only screen and (max-width:1280px) {
  .marquee-block .marquee-news {
    max-width: 1180px
  }
}
.news.marquee-wrap {
  box-sizing: border-box;
  cursor: pointer;
  height: 40px;
  margin: auto;
  padding-left: 30px;
  position: relative;
  width: 100%
}
.news.marquee-wrap .visible-area {
  height: 100%;
  overflow: hidden;
  position: relative
}
.news.marquee-wrap .marquee-content {
  position: absolute;
  white-space: nowrap
}
.news.marquee-wrap .marquee-content.scrollLeft {
  animation: scrollLeft linear infinite;
  padding-left: 1100px
}
.news.marquee-wrap .visible-area .marquee-item {
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  margin-right: 30px
}
.news.marquee-wrap .visible-area .marquee-item:first-child {
  margin-left: 10px
}
.news.marquee-wrap .visible-area .marquee-item:last-child {
  margin-right: 0
}
@keyframes scrollLeft {
  0% {
    transform: translate(0)
  }
  to {
    transform: translate(-100%)
  }
}
.side-menu {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  z-index: 25
}
.side-menu li + li {
  margin-top: 5px
}
.side-menu li a {
  background-color: #f8991d;
  border-radius: 5px 0 0 5px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .2);
  color: #000;
  display: block;
  font-size: 12px;
  height: 60px;
  line-height: 1.4;
  overflow: hidden;
  padding-left: 60px;
  text-decoration: none;
  transform: translateZ(0);
  transition: transform .3s linear;
  width: 280px;
	vertical-align: middle;
}
.side-menu li a:hover {
  transform: translate3d(-220px, 0, 0);
  transition: transform .3s ease-out .2s
}
.side-menu li a > i {
  color: #000;
  font-size: 30px;
  height: 100%;
  left: 0;
  line-height: 60px;
  position: absolute;
  text-align: center;
  top: 0;
  width: 60px
}
.side-menu li a > i.mps-coin-fill {
  font-size: 45px
}
.side-menu li a > h2 {
  color: #49380d;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  padding: 10px 0 2px
}
.side-menu li a > p {
  color: #fff
}
.side-menu li a img {
  left: 0;
  position: absolute
}
.app.agent .app-body, .app.info .app-body {
  background: #1f1e23 url(https://img.gashinzo.com/img/static/actbet/desktop/home-bg.jpg) no-repeat top/contain
}
.app-body .general-layout {
  background-color: transparent;
  margin: auto;
  min-height: 650px;
  position: relative
}
.app-body .general-layout .gr-menu {
  background-color: transparent;
  text-align: center;
  width: 220px
}
.app-body .general-layout .gr-menu ul {
  background-color: #222;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .8);
  margin-top: 65px
}
.app-body .general-layout .gr-menu li {
  font-size: 16px
}
.app-body .general-layout .gr-menu li a {
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: block;
  overflow: hidden;
  padding: 15px;
  text-align: left;
  text-decoration: none;
  text-overflow: ellipsis;
  transition: .3s;
  white-space: nowrap;
  width: 100%
}
.app-body .general-layout .gr-menu li a.active:before {
  border-color: transparent transparent transparent #fff;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  content: "";
  display: inline-block;
  height: 0;
  margin: 0 6px 1px 0;
  width: 0
}
.app-body .general-layout .gr-menu li a.active, .app-body .general-layout .gr-menu li a:hover {
  background-color: #f8991d;
  color: #fff
}
.app-body .general-layout .cont {
  color: #fff;
  font-size: 16px;
  font-weight: 300;
  padding: 0 100px 50px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .8);
  text-shadow: 0 0 2px #1f1e23, 1px 1px 4px #1f1e23
}
.app-body .general-layout .cont h1, .app-body .general-layout .cont h3 {
  font-weight: 400
}
.app-body .general-layout .cont h1 {
  color: #f9c043;
  font-size: 30px;
  margin: 10px 0 20px;
  text-align: center;
  transform: skew(-4deg)
}
.app-body .general-layout .cont h3 {
  color: #ffea8f;
  font-size: 21px;
  line-height: 1.8;
  margin: 10px 0
}
.app-body .general-layout .cont p {
  white-space: pre-wrap
}
.app-body .general-layout .cont ol li {
  list-style-type: decimal;
  margin: 3px 0 3px 25px
}
.app-body .general-layout .cont span.tip {
  color: #ffea8f
}
.app-body .general-layout .cont .faqs {
  border-bottom: 1px solid #202232;
  box-sizing: border-box;
  margin-bottom: 20px;
  padding: 15px 10px 15px 40px
}
.app-body .general-layout .cont .faqs h2 {
  color: #ffea8f;
  font-size: 21px;
  line-height: 1.5;
  margin-bottom: 10px;
  margin-left: -35px
}
.sk-fading-circle {
  margin: auto;
  position: relative
}
.sk-fading-circle .sk-circle {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%
}
.sk-fading-circle .sk-circle:before {
  animation: sk-circleFadeDelay 1.2s ease-in-out infinite both;
  background-color: #999;
  border-radius: 100%;
  content: "";
  display: block;
  height: 15%;
  margin: 0 auto;
  width: 15%
}
.sk-fading-circle .sk-circle2 {
  transform: rotate(30deg)
}
.sk-fading-circle .sk-circle3 {
  transform: rotate(60deg)
}
.sk-fading-circle .sk-circle4 {
  transform: rotate(90deg)
}
.sk-fading-circle .sk-circle5 {
  transform: rotate(120deg)
}
.sk-fading-circle .sk-circle6 {
  transform: rotate(150deg)
}
.sk-fading-circle .sk-circle7 {
  transform: rotate(180deg)
}
.sk-fading-circle .sk-circle8 {
  transform: rotate(210deg)
}
.sk-fading-circle .sk-circle9 {
  transform: rotate(240deg)
}
.sk-fading-circle .sk-circle10 {
  transform: rotate(270deg)
}
.sk-fading-circle .sk-circle11 {
  transform: rotate(300deg)
}
.sk-fading-circle .sk-circle12 {
  transform: rotate(330deg)
}
.sk-fading-circle .sk-circle2:before {
  animation-delay: -1.1s
}
.sk-fading-circle .sk-circle3:before {
  animation-delay: -1s
}
.sk-fading-circle .sk-circle4:before {
  animation-delay: -.9s
}
.sk-fading-circle .sk-circle5:before {
  animation-delay: -.8s
}
.sk-fading-circle .sk-circle6:before {
  animation-delay: -.7s
}
.sk-fading-circle .sk-circle7:before {
  animation-delay: -.6s
}
.sk-fading-circle .sk-circle8:before {
  animation-delay: -.5s
}
.sk-fading-circle .sk-circle9:before {
  animation-delay: -.4s
}
.sk-fading-circle .sk-circle10:before {
  animation-delay: -.3s
}
.sk-fading-circle .sk-circle11:before {
  animation-delay: -.2s
}
.sk-fading-circle .sk-circle12:before {
  animation-delay: -.1s
}
@keyframes sk-circleFadeDelay {
  0%, 39%, to {
    opacity: 0
  }
  40% {
    opacity: 1
  }
}
.hot-icon-wrapper {
  position: relative
}
.hot-icon-wrapper .hot-game-icon {
  height: 12px;
  -o-object-fit: contain;
  object-fit: contain;
  position: absolute;
  right: -10px;
  top: 0;
  width: 23px
}
.message-slider-up {
  flex: 1;
  overflow: hidden;
  width: 100%
}
.message-slider-up-content {
  transition: opacity .3s ease-in, margin .3s ease-out
}
.app:not(.account) .quick-nav .nav .submenu .qr-item, .app:not(.account) header .nav .submenu .qr-item {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center
}
.app:not(.account) .quick-nav .nav .submenu .qr-item .qr-android, .app:not(.account) .quick-nav .nav .submenu .qr-item .qr-ios, .app:not(.account) header .nav .submenu .qr-item .qr-android, .app:not(.account) header .nav .submenu .qr-item .qr-ios {
  color: #fff;
  padding: 0 20px
}
.app:not(.account) .quick-nav .nav .submenu .hot-games .game-item, .app:not(.account) header .nav .submenu .hot-games .game-item {
  cursor: pointer;
  padding: 0 20px
}
.app:not(.account) .quick-nav .nav .submenu .hot-games .game-item > img, .app:not(.account) header .nav .submenu .hot-games .game-item > img {
  height: 60%;
  top: 20%
}
.deposit-ranking-detail-container {
  left: 0;
  position: fixed;
  top: 0;
  z-index: 103
}
.deposit-ranking-detail-overlay {
  background-color: rgba(0, 0, 0, .7);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1
}
.deposit-ranking-detail {
  background-color: #261f26;
  border-radius: 10px;
  box-shadow: 0 5px 18px 2px rgba(20, 20, 20, .4);
  color: #fff;
  display: flex;
  flex-direction: column;
  height: 311px;
  left: 50%;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 525px;
  z-index: 1
}
.deposit-ranking-detail .no-data {
  align-items: center;
  background-color: rgba(0, 0, 0, .8);
  display: flex;
  flex-direction: column;
  height: calc(100% - 45px);
  justify-content: center;
  left: 0;
  position: absolute;
  top: 45px;
  width: 100%;
  z-index: 1
}
.deposit-ranking-detail .no-data i {
  font-size: 60px;
  margin-bottom: 10px
}
.deposit-ranking-detail .dr-close {
  align-items: center;
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 5px 18px 2px rgba(20, 20, 20, .5);
  color: rgba(20, 20, 20, .5);
  cursor: pointer;
  display: flex;
  font-size: 28px;
  height: 32px;
  justify-content: center;
  position: absolute;
  right: -8px;
  top: -8px;
  width: 32px
}
.deposit-ranking-detail .dr-header {
  align-items: center;
  background-color: #bd1010;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  display: flex;
  font-size: 19px;
  height: 45px
}
.deposit-ranking-detail .dr-header .mps-sports {
  color: #febf4e;
  margin: 0 5px 0 20px
}
.deposit-ranking-detail .dr-marquee {
  align-items: center;
  background-color: #e29212;
  color: #fff;
  display: flex;
  height: 30px;
  position: relative
}
.deposit-ranking-detail .dr-marquee .mps-thai-clock {
  margin-right: 5px
}
.deposit-ranking-detail .dr-content {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: center
}
.deposit-ranking-detail .dr-left-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-start;
  padding: 0 20px;
  width: 215px
}
.deposit-ranking-detail .dr-left-item {
  display: flex;
  flex-direction: column;
  height: 78px;
  justify-content: center
}
.deposit-ranking-detail .dr-left-item > div {
  align-items: center;
  display: flex
}
.deposit-ranking-detail .dr-left-item .player-id {
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase
}
.deposit-ranking-detail .dr-left-item .mps-coin-fill {
  color: #febf4e;
  font-size: 22px;
  margin-top: 5px
}
.deposit-ranking-detail .dr-left-item .money {
  color: #ffcd57;
  font-size: 18px;
  font-weight: 500;
  margin-top: 5px
}
.deposit-ranking-detail .rank {
  border-radius: 10px;
  color: #fff;
  font-family: Avenir;
  font-size: 12px;
  font-weight: 900;
  margin-right: 5px;
  padding: 5px 8px 5px 7px
}
.deposit-ranking-detail .top-1 {
  background-color: #fda200;
  box-shadow: 0 1px 2.4px .6px rgba(20, 20, 20, .75), inset 0 -1px 4.5px .5px rgba(255, 248, 230, .91)
}
.deposit-ranking-detail .top-2 {
  background-color: #939dba;
  box-shadow: 0 1px 2.4px .6px rgba(20, 20, 20, .75), inset 0 -1px 4.5px .5px rgba(214, 214, 214, .91)
}
.deposit-ranking-detail .top-3 {
  background-color: #aa6538;
  box-shadow: 0 1px 2.4px .6px rgba(20, 20, 20, .75), inset 0 -1px 4.5px .5px rgba(245, 180, 116, .91)
}
.deposit-ranking-detail .dr-right-box {
  align-self: flex-start;
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden
}
.deposit-ranking-detail .dr-right-box > div {
  align-items: center;
  background-image: linear-gradient(0deg, #201e20, #2b292c);
  box-shadow: inset 0 -1px 0 0 #37363c;
  display: flex;
  flex-direction: row;
  height: 47px;
  padding: 0 10px
}
.deposit-ranking-detail .dr-right-box .right-item-rank {
  color: #febf4e;
  font-size: 13px;
  margin-right: 5px
}
.deposit-ranking-detail .dr-right-box .player-id {
  font-size: 15px;
  text-transform: uppercase
}
.deposit-ranking-detail .dr-right-box .money-box {
  background-color: #000;
  border-radius: 12px;
  box-shadow: inset 0 -1px 1.9px .1px rgba(0, 0, 0, .96);
  display: flex;
  margin-left: 10px;
  padding: 3px 27px 1px 3px
}
.deposit-ranking-detail .dr-right-box .mps-coin-fill {
  color: #febf4e;
  font-size: 18px
}
.deposit-ranking-detail .dr-right-box .money {
  color: #ffcd57;
  font-size: 15px;
  font-weight: 500
}
.marquee-item {
  display: inline-block;
  font-size: inherit !important
}
.marquee-item h1, .marquee-item h2, .marquee-item h3, .marquee-item h4, .marquee-item h5, .marquee-item h6, .marquee-item li, .marquee-item ol, .marquee-item p, .marquee-item ul {
  display: inline-block;
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
  padding: 0
}
.marquee-item em {
  font-style: italic
}
.marquee-item strong {
  font-weight: 700
}
.event-qmenu {
  animation: aqm 1.8s ease infinite;
  bottom: 10px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .8));
  left: 0;
  min-height: auto !important;
  position: fixed;
  transition: .3s ease;
  width: 110px;
  z-index: 21
}
.event-qmenu > * {
  box-sizing: border-box
}
@keyframes aqm {
  0% {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .8))
  }
  55% {
    filter: drop-shadow(0 2px 6px #faba67)
  }
  70% {
    filter: drop-shadow(0 2px 6px #fbc680)
  }
  to {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .8))
  }
}
.event-qmenu.menu-close {
  transform: translateX(-83px)
}
.event-qmenu.menu-close .handle:after {
  left: -13px;
  text-shadow: 0 1px 3px #db7f07;
  transform: translateY(-50%) rotate(0deg)
}
.event-qmenu .handle {
  bottom: 35px;
  cursor: pointer;
  position: absolute;
  right: 2px;
  width: 30px;
  background: #f8991d;
	padding: 5px;
	border-radius: 0 5px 5px 0;
}
/*.event-qmenu .handle:after {
  speak: none;
  color: #fff;
  content: "";
  font-family: iconmps !important;
  font-size: 55px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  left: 8px;
  line-height: 1;
  position: absolute;
  text-align: center;
  text-shadow: 0 -1px 3px #db7f07;
  text-transform: none;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  width: 30px
}*/
.event-qmenu .handle path {
  fill: #f8991d
}
.event-qmenu .cont {
  align-items: center;
  background-color: rgba(0, 0, 0, .8);
  border: 3px solid #f8991d;
  border-bottom-right-radius: 15px;
  border-left: 0;
  border-top-right-radius: 15px;
  display: flex;
  flex-wrap: wrap;
  min-height: 103px;
  padding: 10px;
  width: 80px
}
.event-qmenu .cont .event-item {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 60px;
  justify-content: center;
  margin: 5px 0;
  position: relative;
  transition: .3s ease;
  width: 60px
}
.event-qmenu .cont .event-item:hover {
  transform: scale(1.2)
}
.event-qmenu .cont .event-item img {
  display: block;
  max-height: 100%;
  max-width: 100%
}
.provider-list-box {
  display: flex;
  flex-wrap: wrap
}
.provider-list-box img {
  display: block;
  height: 42px;
  margin-bottom: 2px;
  margin-right: 20px
}