* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  background: #f8f8f8;
}
body {
  font-family: 'PingFangSC-Medium', 'Microsoft YaHei', 'Arial', 'Helvetica', 'sans-serif' !important;
  color: #414655;
  background: #f8f8f8;
}
html,
#app,
body {
  min-height: 100%;
  height: 100%;
}
input,
textarea,
button {
  outline: none;
  border: 0;
  vertical-align: middle;
  background: none;
}
input::-moz-placeholder, textarea::-moz-placeholder, button::-moz-placeholder {
  color: #999;
}
input::placeholder,
textarea::placeholder,
button::placeholder {
  color: #999;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
ul,
ol,
li {
  list-style: none;
}
.container:before {
  content: '';
  display: table;
  clear: both;
}
.container:after {
  content: '';
  display: table;
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
.scroll-y {
  overflow-y: auto;
}
.scroll-y::-webkit-scrollbar {
  width: 8px;
  scroll-behavior: smooth;
}
.scroll-y::-webkit-scrollbar-track {
  border-radius: 6px;
  background-color: #ffffff;
}
.scroll-y::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: #f5e8c4;
}
.scroll-x {
  overflow-x: scroll;
}
.flex {
  display: flex;
}
.flex1 {
  flex: 1;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.clear {
  clear: both;
}
.left {
  text-align: left;
}
.center {
  text-align: center;
}
.right {
  text-align: right;
}
.cursor {
  cursor: pointer;
}
.over-hidden {
  overflow: hidden !important;
}
.re {
  position: relative !important;
}
.ab {
  position: absolute !important;
}
.ai-c {
  align-items: center;
}
.w100 {
  width: 100%;
}
.h100 {
  height: 100%;
}
.block {
  display: block;
}
.radius50 {
  border-radius: 50%;
}
.bold {
  font-weight: 700 !important;
}
.flex-middle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.flex-middle-only {
  display: flex;
  align-items: center;
}
.flex-between {
  display: flex;
  justify-content: space-between;
}
.flex-center {
  display: flex;
  justify-content: center;
}
.flex-around {
  display: flex;
  justify-content: space-around;
}
.flex-end {
  display: flex;
  justify-content: flex-end;
}
.flex-start {
  display: flex;
  justify-content: flex-start;
}
.flex-1 {
  flex: 1 !important;
}
.flex-column {
  flex-direction: column;
}
.ab-middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.ab-middle-x {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.ab-middle-y {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.hide-scroll-bar::-webkit-scrollbar {
  width: 1px;
}
textarea {
  resize: none;
}
.white {
  color: #fff !important;
}
.golden {
  color: #E6C981 !important;
}
.bg-white {
  background-color: #fff !important;
}
.bg-golden {
  background-color: #E6C981 !important;
}
.red {
  color: #DB6372 !important;
}
.black {
  color: black!important;
}
.icon {
  display: inline-block;
  vertical-align: middle;
  background-image: url(../images/sprite.png);
}
.icon-downred {
  width: 0.1rem;
  height: 0.11rem;
  background-position: 0rem 0rem;
  background-size: 3.75rem 15.41rem;
}
.icon-icon-rotate {
  width: 0.13rem;
  height: 0.12rem;
  background-position: 0rem -0.12rem;
  background-size: 3.75rem 15.41rem;
}
.icon-back {
  width: 0.21rem;
  height: 0.2rem;
  background-position: 0rem -0.25rem;
  background-size: 3.75rem 15.41rem;
}
.icon-up {
  width: 0.21rem;
  height: 0.2rem;
  background-position: 0rem -0.46rem;
  background-size: 3.75rem 15.41rem;
}
.icon-bet-record {
  width: 0.21rem;
  height: 0.21rem;
  background-position: 0rem -0.67rem;
  background-size: 3.75rem 15.41rem;
}
.icon-down {
  width: 0.2rem;
  height: 0.21rem;
  background-position: 0rem -0.89rem;
  background-size: 3.75rem 15.41rem;
}
.icon-order {
  width: 0.21rem;
  height: 0.21rem;
  background-position: 0rem -1.11rem;
  background-size: 3.75rem 15.41rem;
}
.icon-record {
  width: 0.21rem;
  height: 0.21rem;
  background-position: 0rem -1.33rem;
  background-size: 3.75rem 15.41rem;
}
.icon-ding {
  width: 0.24rem;
  height: 0.24rem;
  background-position: 0rem -1.55rem;
  background-size: 3.75rem 15.41rem;
}
.icon-ball-bg {
  width: 0.27rem;
  height: 0.3rem;
  background-position: 0rem -1.8rem;
  background-size: 3.75rem 15.41rem;
}
.icon-ball-active {
  width: 0.4rem;
  height: 0.34rem;
  background-position: 0rem -2.11rem;
  background-size: 3.75rem 15.41rem;
}
.icon-ball {
  width: 0.4rem;
  height: 0.34rem;
  background-position: 0rem -2.46rem;
  background-size: 3.75rem 15.41rem;
}
.icon-cai-active {
  width: 0.37rem;
  height: 0.37rem;
  background-position: 0rem -2.81rem;
  background-size: 3.75rem 15.41rem;
}
.icon-cai {
  width: 0.37rem;
  height: 0.37rem;
  background-position: 0rem -3.19rem;
  background-size: 3.75rem 15.41rem;
}
.icon-car {
  width: 0.47rem;
  height: 0.47rem;
  background-position: 0rem -3.57rem;
  background-size: 3.75rem 15.41rem;
}
.icon-cart-grey {
  width: 0.47rem;
  height: 0.47rem;
  background-position: 0rem -4.05rem;
  background-size: 3.75rem 15.41rem;
}
.icon-play-bg {
  width: 0.535rem;
  height: 0.49rem;
  background-position: 0rem -4.53rem;
  background-size: 3.75rem 15.41rem;
}
.icon-i-ball0 {
  width: 0.595rem;
  height: 0.605rem;
  background-position: 0rem -5.03rem;
  background-size: 3.75rem 15.41rem;
}
.icon-i-ball1 {
  width: 0.595rem;
  height: 0.605rem;
  background-position: 0rem -5.645rem;
  background-size: 3.75rem 15.41rem;
}
.icon-i-ball2 {
  width: 0.595rem;
  height: 0.605rem;
  background-position: 0rem -6.26rem;
  background-size: 3.75rem 15.41rem;
}
.icon-i-ball3 {
  width: 0.595rem;
  height: 0.605rem;
  background-position: 0rem -6.875rem;
  background-size: 3.75rem 15.41rem;
}
.icon-i-ball4 {
  width: 0.595rem;
  height: 0.605rem;
  background-position: 0rem -7.49rem;
  background-size: 3.75rem 15.41rem;
}
.icon-i-ball5 {
  width: 0.595rem;
  height: 0.605rem;
  background-position: 0rem -8.105rem;
  background-size: 3.75rem 15.41rem;
}
.icon-i-ball6 {
  width: 0.595rem;
  height: 0.605rem;
  background-position: 0rem -8.72rem;
  background-size: 3.75rem 15.41rem;
}
.icon-i-ball7 {
  width: 0.595rem;
  height: 0.605rem;
  background-position: 0rem -9.335rem;
  background-size: 3.75rem 15.41rem;
}
.icon-i-ball8 {
  width: 0.595rem;
  height: 0.605rem;
  background-position: 0rem -9.95rem;
  background-size: 3.75rem 15.41rem;
}
.icon-i-ball9 {
  width: 0.595rem;
  height: 0.605rem;
  background-position: 0rem -10.565rem;
  background-size: 3.75rem 15.41rem;
}
.icon-area-bg {
  width: 1.36rem;
  height: 0.95rem;
  background-position: 0rem -11.18rem;
  background-size: 3.75rem 15.41rem;
}
.icon-tab-active {
  width: 0.72rem;
  height: 0.95rem;
  background-position: 0rem -12.14rem;
  background-size: 3.75rem 15.41rem;
}
.icon-tab-bg {
  width: 0.72rem;
  height: 0.95rem;
  background-position: 0rem -13.1rem;
  background-size: 3.75rem 15.41rem;
}
.icon-top-bg {
  width: 3.75rem;
  height: 1.35rem;
  background-position: 0rem -14.06rem;
  background-size: 3.75rem 15.41rem;
}
@font-face {
  font-family: Myriad Prol;
  src: url(../fonts/MyriadPro-Light.d1846886.woff);
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: Myriad ProB;
  src: url(../fonts/MYRIADPRO-SEMIBOLD.6fd5c55d.woff);
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: Myriad Pro;
  src: url(../fonts/MYRIADPRO-REGULAR.39338481.woff);
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: Myriad ProBold;
  src: url(../fonts/Myriad-Pro-Bold.5468e8ae.ttf);
  font-style: normal;
  font-weight: normal;
}
body {
  font-size: 14px;
}
html,
#app,
body {
  overflow: inherit;
  font-size: 14px;
}
.pb-30 {
  padding-bottom: 30px !important;
}
::-webkit-scrollbar {
  width: 6px;
  scroll-behavior: smooth;
}
::-webkit-scrollbar-track {
  border-radius: 6px;
  background-color: #ffffff;
}
::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: #f5e8c4;
}
input::-webkit-input-placeholder {
  color: #d9d9d8;
  font-size: 12px;
}
input:-internal-autofill-previewed,
input:-internal-autofill-selected {
  transition: background-color 5000s ease-in-out 0s !important;
}
/**fs12  fs24 */
.fs12 {
  font-size: 12px !important;
}
.fs14 {
  font-size: 14px !important;
}
.fs16 {
  font-size: 16px !important;
}
.fs18 {
  font-size: 18px !important;
}
.fs20 {
  font-size: 20px !important;
}
.fs22 {
  font-size: 22px !important;
}
.fs24 {
  font-size: 24px !important;
}
/**
 * 定义循环方法
 * @layout--传入的循环起始值
 * @len--循环的最大值  也可使用常量  eg:(@layout<4)
 */
.mg-4 {
  margin: 4px !important;
}
.m-t4 {
  margin-top: 4px !important;
}
.m-r4 {
  margin-right: 4px !important;
}
.m-b4 {
  margin-bottom: 4px !important;
}
.m-l4 {
  margin-left: 4px !important;
}
.pd-4 {
  padding: 4px !important;
}
.p-t4 {
  padding-top: 4px !important;
}
.p-r4 {
  padding-right: 4px !important;
}
.p-b4 {
  padding-bottom: 4px !important;
}
.p-l4 {
  padding-left: 4px !important;
}
.mg-5 {
  margin: 5px !important;
}
.m-t5 {
  margin-top: 5px !important;
}
.m-r5 {
  margin-right: 5px !important;
}
.m-b5 {
  margin-bottom: 5px !important;
}
.m-l5 {
  margin-left: 5px !important;
}
.pd-5 {
  padding: 5px !important;
}
.p-t5 {
  padding-top: 5px !important;
}
.p-r5 {
  padding-right: 5px !important;
}
.p-b5 {
  padding-bottom: 5px !important;
}
.p-l5 {
  padding-left: 5px !important;
}
.mg-8 {
  margin: 8px !important;
}
.m-t8 {
  margin-top: 8px !important;
}
.m-r8 {
  margin-right: 8px !important;
}
.m-b8 {
  margin-bottom: 8px !important;
}
.m-l8 {
  margin-left: 8px !important;
}
.pd-8 {
  padding: 8px !important;
}
.p-t8 {
  padding-top: 8px !important;
}
.p-r8 {
  padding-right: 8px !important;
}
.p-b8 {
  padding-bottom: 8px !important;
}
.p-l8 {
  padding-left: 8px !important;
}
.mg-10 {
  margin: 10px !important;
}
.m-t10 {
  margin-top: 10px !important;
}
.m-r10 {
  margin-right: 10px !important;
}
.m-b10 {
  margin-bottom: 10px !important;
}
.m-l10 {
  margin-left: 10px !important;
}
.pd-10 {
  padding: 10px !important;
}
.p-t10 {
  padding-top: 10px !important;
}
.p-r10 {
  padding-right: 10px !important;
}
.p-b10 {
  padding-bottom: 10px !important;
}
.p-l10 {
  padding-left: 10px !important;
}
.mg-12 {
  margin: 12px !important;
}
.m-t12 {
  margin-top: 12px !important;
}
.m-r12 {
  margin-right: 12px !important;
}
.m-b12 {
  margin-bottom: 12px !important;
}
.m-l12 {
  margin-left: 12px !important;
}
.pd-12 {
  padding: 12px !important;
}
.p-t12 {
  padding-top: 12px !important;
}
.p-r12 {
  padding-right: 12px !important;
}
.p-b12 {
  padding-bottom: 12px !important;
}
.p-l12 {
  padding-left: 12px !important;
}
.mg-15 {
  margin: 15px !important;
}
.m-t15 {
  margin-top: 15px !important;
}
.m-r15 {
  margin-right: 15px !important;
}
.m-b15 {
  margin-bottom: 15px !important;
}
.m-l15 {
  margin-left: 15px !important;
}
.pd-15 {
  padding: 15px !important;
}
.p-t15 {
  padding-top: 15px !important;
}
.p-r15 {
  padding-right: 15px !important;
}
.p-b15 {
  padding-bottom: 15px !important;
}
.p-l15 {
  padding-left: 15px !important;
}
.mg-16 {
  margin: 16px !important;
}
.m-t16 {
  margin-top: 16px !important;
}
.m-r16 {
  margin-right: 16px !important;
}
.m-b16 {
  margin-bottom: 16px !important;
}
.m-l16 {
  margin-left: 16px !important;
}
.pd-16 {
  padding: 16px !important;
}
.p-t16 {
  padding-top: 16px !important;
}
.p-r16 {
  padding-right: 16px !important;
}
.p-b16 {
  padding-bottom: 16px !important;
}
.p-l16 {
  padding-left: 16px !important;
}
.mg-20 {
  margin: 20px !important;
}
.m-t20 {
  margin-top: 20px !important;
}
.m-r20 {
  margin-right: 20px !important;
}
.m-b20 {
  margin-bottom: 20px !important;
}
.m-l20 {
  margin-left: 20px !important;
}
.pd-20 {
  padding: 20px !important;
}
.p-t20 {
  padding-top: 20px !important;
}
.p-r20 {
  padding-right: 20px !important;
}
.p-b20 {
  padding-bottom: 20px !important;
}
.p-l20 {
  padding-left: 20px !important;
}
.mg-24 {
  margin: 24px !important;
}
.m-t24 {
  margin-top: 24px !important;
}
.m-r24 {
  margin-right: 24px !important;
}
.m-b24 {
  margin-bottom: 24px !important;
}
.m-l24 {
  margin-left: 24px !important;
}
.pd-24 {
  padding: 24px !important;
}
.p-t24 {
  padding-top: 24px !important;
}
.p-r24 {
  padding-right: 24px !important;
}
.p-b24 {
  padding-bottom: 24px !important;
}
.p-l24 {
  padding-left: 24px !important;
}
.mg-30 {
  margin: 30px !important;
}
.m-t30 {
  margin-top: 30px !important;
}
.m-r30 {
  margin-right: 30px !important;
}
.m-b30 {
  margin-bottom: 30px !important;
}
.m-l30 {
  margin-left: 30px !important;
}
.pd-30 {
  padding: 30px !important;
}
.p-t30 {
  padding-top: 30px !important;
}
.p-r30 {
  padding-right: 30px !important;
}
.p-b30 {
  padding-bottom: 30px !important;
}
.p-l30 {
  padding-left: 30px !important;
}
.mg-40 {
  margin: 40px !important;
}
.m-t40 {
  margin-top: 40px !important;
}
.m-r40 {
  margin-right: 40px !important;
}
.m-b40 {
  margin-bottom: 40px !important;
}
.m-l40 {
  margin-left: 40px !important;
}
.pd-40 {
  padding: 40px !important;
}
.p-t40 {
  padding-top: 40px !important;
}
.p-r40 {
  padding-right: 40px !important;
}
.p-b40 {
  padding-bottom: 40px !important;
}
.p-l40 {
  padding-left: 40px !important;
}
.mg-45 {
  margin: 45px !important;
}
.m-t45 {
  margin-top: 45px !important;
}
.m-r45 {
  margin-right: 45px !important;
}
.m-b45 {
  margin-bottom: 45px !important;
}
.m-l45 {
  margin-left: 45px !important;
}
.pd-45 {
  padding: 45px !important;
}
.p-t45 {
  padding-top: 45px !important;
}
.p-r45 {
  padding-right: 45px !important;
}
.p-b45 {
  padding-bottom: 45px !important;
}
.p-l45 {
  padding-left: 45px !important;
}
.mg-50 {
  margin: 50px !important;
}
.m-t50 {
  margin-top: 50px !important;
}
.m-r50 {
  margin-right: 50px !important;
}
.m-b50 {
  margin-bottom: 50px !important;
}
.m-l50 {
  margin-left: 50px !important;
}
.pd-50 {
  padding: 50px !important;
}
.p-t50 {
  padding-top: 50px !important;
}
.p-r50 {
  padding-right: 50px !important;
}
.p-b50 {
  padding-bottom: 50px !important;
}
.p-l50 {
  padding-left: 50px !important;
}
.lh-12 {
  line-height: 12px !important;
}
.lh-20 {
  line-height: 20px !important;
}
.lh-24 {
  line-height: 24px !important;
}
.lh-30 {
  line-height: 30px !important;
}
.lh-35 {
  line-height: 35px !important;
}
.lh-40 {
  line-height: 40px !important;
}
.lh-45 {
  line-height: 45px !important;
}
.van-dialog {
  top: 35% !important;
}
.van-overlay {
  z-index: 2000 !important;
}
.van-popover__content {
  max-height: 200px !important;
  overflow: auto !important;
}
.van-popover__action {
  width: auto !important;
}
.myDialogCss {
  width: 300px;
  background-color: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid #fcefd5;
  border-radius: 20px;
  color: #fff;
  font-size: 13px;
  font-family: AppleSystemUIFont Regular;
}
.myDialogCss .van-dialog__confirm,
.myDialogCss .van-dialog__cancel {
  flex: unset;
  width: 110px;
  height: 40px;
  border-radius: 50px;
  margin: 0 auto 24px;
}
.myDialogCss .van-button--default {
  background: transparent linear-gradient(180deg, #f5e8c4 0%, #e3bb83 100%) 0% 0% no-repeat padding-box;
  font-weight: bold;
  font-size: 13px;
}
.myDialogCss .van-hairline--top:after,
.myDialogCss .van-dialog__footer:after {
  border: none;
}
.myDialogCss .van-dialog__message {
  padding: 28px 30px 20px;
}
:root {
  --van-overlay-z-index: 9999;
}
.my-notification {
  background: transparent linear-gradient(180deg, #FCEFD5 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
  border: 2px solid #FFFFFF;
  border-radius: 12px;
  opacity: 0.95;
  color: #493B32;
  padding: 20px;
  margin-bottom: 13px;
}
.vue-notification-wrapper .close-btn {
  display: none;
}
.vue-notification-wrapper:first-child .close-btn {
  display: block;
  display: flex;
  justify-content: flex-end;
}
.vue-notification-wrapper:first-child .close-btn button {
  background-image: url(../img/close-notify.c8415a02.svg);
}