html,
body,
div,
h1,
h2,
h3,
h4,
h5,
h6,
p,
img,
dl,
dt,
dd,
ol,
ul,
li,
form,
table,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
img {
  border: 0;
}
ol,
ul {
  list-style: none;
}
i,
b,
em,
strong {
  font-style: normal;
  text-decoration: none;
  font-weight: normal;
}
a,
img {
  -webkit-touch-callout: none;
  text-decoration: none;
}
html {
  -webkit-text-size-adjust: 100%;
  /* 防止页面resize之后，字体未重新渲染的bug */
}
* {
  box-sizing: border-box;
}
html {
  min-height: 100%;
}
body {
  min-height: 100vh;
}
html body {
  font-size: 3.58974vw;
  font-family: 'PingFang SC-Regular';
  font-family: var(--Regular);
  touch-action: manipulation;
  background-color: var(--bg) !important;
  color: #282828;
  color: var(--TC1);
  font-weight: inherit;
  letter-spacing: normal;
}
:global(#root) {
  min-height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
a {
  transition: all ease-in-out 0.3s;
}
/* 主题切换使用方法
  import helper from "@/utils/helper";导入公共方法
  onClick={helper.switchTheme}绑定给按钮

  在样式里使用var
  background:"var(--FC)",
*/
/* 新系统主题 */
/* 白天  */
:root {
  --FC: #6C29EB;
  /* 主色 */
  --FC1: #A576FF;
  /* 辅色 1 */
  --FC2: #FFD034;
  /* 辅色 2 */
  --FC4: #F8F4FF;
  /* 辅色 4 */
  --FC-green: #2FBD85;
  /* 绿色 */
  --FC-red: #F6465D;
  /* 红色 */
  --TC-rebel: #FFFFFF;
  /* 黑白反色 */
  --BG-yellow: #FFFBEF;
  /* 浅黄 */
  --BG-purple: #F8F4FF;
  /* 浅紫 */
  --BG-red: #FEF0F2;
  /* 浅红 */
  --BG-blue: #FCFBFE;
  /* 浅蓝 */
  --VFC1: #7D2AAC;
  /* 可视化辅色 1 */
  --VFC2: #EB40B5;
  /* 可视化辅色 2 */
  --TC1: #282828;
  /* 文本标题 */
  --TC2: #858585;
  /* 文本次要 */
  --TC3: #A6A6A6;
  /* 文本提示 */
  --FC-white: #FFFFFF;
  /* 红绿蓝按钮文本 */
  --APP-BG: #FFFFFF;
  /* App 首页 */
  --APP-line1: #F2F2F2;
  /* App 分割线1 */
  --APP-line2: #FAFAFA;
  /* App 分割线2 */
  --DB: #E3E3E3;
  /* 深灰色 */
  --PB: #FFFFFF;
  /* 弹窗背景 */
  --BC: #F3F4F7;
  /* 按钮背景 */
  --BC-OFF: #F7F7F7;
  /* 禁用按钮 */
  --IB: #F7F7F8;
  /* 输入框背景 */
  --BG-tag: #F5F5F5;
  /* 默认标签 */
  --TB: #FAFAFA;
  /* 文本背景 */
  --IBG: #FAFAFA;
  /* Web 首页背景 */
  --IBG-card: #FFFFFF;
  /* Web 首页卡片 */
  --IBG-line: #EBEBEB;
  /* Web 首页分割线 */
  --TBG: #F7F7F7;
  /* Web 交易板块背景 */
  --TBG-card: #FFFFFF;
  /* Web 交易板块卡片 */
  --TBG-line: #F7F7F7;
  /* Web 交易板块分割线 */
  --TBG-line2: #FCFCFC;
  /* Web 交易板块分割线2 */
  --HBG: rgba(0, 0, 0, 0.02);
  /* 悬停背景 */
  --MBG: rgba(0, 0, 0, 0.5);
  /* 蒙版 */
  --FC-tips: #575757;
  /* 小提示 */
  --NAVH: 18.97436vw;
  /* HeaderNav 导航高度 */
  --background-purple: #f8f4ff;
  /* 我的等级背景 */
}
.detail-button {
  color: #6C29EB !important;
  color: var(--FC) !important;
  background-color: #FAFAFA !important;
  background-color: var(--TB) !important;
}
.detail-button:hover,
.detail-button:active,
.detail-button:focus {
  background-color: #FAFAFA !important;
  background-color: var(--TB) !important;
}
#root {
  color: #282828;
  color: var(--TC1);
}
/* 深色主题变量 */
[data-theme='dark'] {
  /* 同色调不再次定义 */
  --TC-rebel: #000000;
  /* 黑白反色 */
  --BG-yellow: #31322E;
  /* 浅黄 */
  --BG-purple: #2E2E3F;
  /* 浅紫 */
  --BG-red: #291E24;
  /* 浅红 */
  --BG-blue: #20222F;
  /* 浅蓝 */
  --FC4: #2E2E3F;
  /* 辅色 4 */
  --TC1: #E5E5E5;
  /* 文本标题 */
  --TC2: #71767F;
  /* 文本次要 */
  --TC3: #54595E;
  /* 文本提示 */
  --FC-white: #FFFFFF;
  /* 红绿蓝按钮文本 */
  --APP-BG: #171A1F;
  /* App 首页 */
  --APP-line1: #2B323B;
  /* App 分割线1 */
  --APP-line2: #22282F;
  /* App 分割线2 */
  --DB: #4B5563;
  /* 深灰色 */
  --PB: #24282E;
  /* 弹窗背景 */
  --BC: #31363F;
  /* 按钮背景 */
  --BC-OFF: #2D2F34;
  /* 禁用按钮 */
  --IB: #2D3239;
  /* 输入框背景 */
  --BG-tag: #272D35;
  /* 默认标签 */
  --TB: #25282D;
  /* 文本背景 */
  --IBG: #090A0C;
  /* Web 首页背景 */
  --IBG-card: #191D24;
  /* Web 首页卡片 */
  --IBG-line: #272D35;
  /* Web 首页分割线 */
  --TBG: #090A0C;
  /* Web 交易板块背景 */
  --TBG-card: #191D24;
  /* Web 交易板块卡片 */
  --TBG-line: #272D35;
  /* Web 交易板块分割线 */
  --TBG-line2: #20252C;
  /* Web 交易板块分割线2 */
  --HBG: rgba(255, 255, 255, 0.04);
  /* 悬停背景 */
  --MBG: rgba(0, 0, 0, 0.5);
  /* 蒙版 */
  --FC-tips: #C1C6CD;
  /* 小提示 */
  --background-purple: #2E2E3F;
  /* 我的等级背景 */
}
/* 
  //切换字体
  switchFont

  字体同上
  fontFamily:"var(--Regular)",
*/
/* 字体 */
:root {
  --Regular: 'PingFang SC-Regular';
  --Medium: 'PingFang SC-Medium';
  --UMedium: 'Urbanist-Medium';
  --Semibold: 'PingFang SC-Semibold';
}
[data-lang='en-us'] {
  --Regular: 'Urbanist-Regular';
  --Medium: 'Urbanist-Medium';
  --UMedium: 'Urbanist-Medium';
  --Semibold: 'Urbanist-SemiBold';
}
[data-lang='km-kh'] {
  --Regular: 'KantumruyPro-Regular';
  --Medium: 'KantumruyPro-Medium';
  --UMedium: 'KantumruyPro-Medium';
  --Semibold: 'KantumruyPro-SemiBold';
}
/* 新ui的字体 */
@font-face {
  font-family: 'PingFang SC-Regular';
  src: url(https://static.prod.xp009.com/static/media/regular.c42f2cf1.ttf) format('truetype');
}
@font-face {
  font-family: 'PingFang SC-Medium';
  src: url(https://static.prod.xp009.com/static/media/medium.67ee533e.ttf) format('truetype');
}
@font-face {
  font-family: 'PingFang SC-Semibold';
  src: url(https://static.prod.xp009.com/static/media/semibold.a39de046.ttf) format('truetype');
}
/* 英文与数字字体 */
@font-face {
  font-family: 'Urbanist-SemiBold';
  src: url(https://static.prod.xp009.com/static/media/Urbanist-Bold.1ffe51e2.ttf) format('truetype');
}
@font-face {
  font-family: 'Urbanist-Medium';
  src: url(https://static.prod.xp009.com/static/media/Urbanist-Medium.9ffbd4b2.ttf) format('truetype');
}
@font-face {
  font-family: 'Urbanist-Regular';
  src: url(https://static.prod.xp009.com/static/media/Urbanist-ExtraLight.9b0816f8.ttf) format('truetype');
}
/* 柬埔寨高棉语 */
@font-face {
  font-family: 'KantumruyPro-SemiBold';
  src: url(https://static.prod.xp009.com/static/media/KantumruyPro-SemiBold.2d695f51.ttf) format('truetype');
}
@font-face {
  font-family: 'KantumruyPro-Medium';
  src: url(https://static.prod.xp009.com/static/media/KantumruyPro-Medium.451b803c.ttf) format('truetype');
}
@font-face {
  font-family: 'KantumruyPro-Regular';
  src: url(https://static.prod.xp009.com/static/media/KantumruyPro-Regular.66749995.ttf) format('truetype');
}
/* 其他字体 */
@font-face {
  font-family: 'DIN-Regular';
  src: url(https://static.prod.xp009.com/static/media/DIN-Regular.ecb27f89.otf) format('opentype');
}
@font-face {
  font-family: 'AdobeSongStd-Light';
  src: url(https://static.prod.xp009.com/static/media/AdobeSongStd-Light.a5066e32.otf) format('opentype');
}

/**
 * 主题 CSS 变量定义
 * 基于 CSS 变量实现主题切换，性能最优
 * 所有组件都应使用 var(--变量名) 来引用这些变量
 */

/* ============================================
   全局触摸优化（替代 FastClick）
   ============================================ */
html {
  touch-action: manipulation; /* 禁用双击缩放，消除 300ms 延迟 */
}

/* ============================================
   默认主题变量（light 主题）
   ============================================ */
:root {
  /* 背景色 */
  --bg: #fafafa;
  --bg001: #f8f9fa;
  --bg002: #ffffff;
  --cardBg: #ffffff;
  --bg003: #f6f7f8;
  --bg004: #f0f2f5;
  --bg005: rgba(0, 0, 0, 0.05);
  --bg006: rgba(47, 125, 246, 0.1);
  --bg007: #f0f2f5;
  --bg008: #e9ecef;
  --bg009: #e9ecef;
  --bg010: #f8f9fa;
  --bg011: rgba(0, 0, 0, 0.05);
  --bgfff10: rgba(255, 255, 255, 0.1);
  --bg00010: rgba(0, 0, 0, 0.1);

  /* 按钮主题背景色 */
  --btn-theme-bg: #f3f4f7;

  /* 登录注册相关背景色 */
  --bg2: #445078;
  --bg3: rgba(130, 140, 185, 1);
  --bg4: rgba(40, 50, 80, 0);
  --bg5: #3b4361;
  --bg6: #161a2a;
  --bg7: #1a202c;

  /* 文字颜色 */
  --c001: #212529;
  --c002: #6c757d;
  --c003: #858585;
  --c004: #343a40;
  --c005: #181e29;
  --c006: #202734;
  --c007: #232933;

  /* 边框颜色 */
  --b001: #dee2e6;
  --b002: #ced4da;

  /* 主题色 */
  --white: #ffffff;
  --blue: #6c29eb;
  --purple: #6c29eb;
  --green: #08af7f;
  --red: #ff5361;
  --red_bg: rgba(255, 83, 97, 0.1);
  --green_bg: rgba(8, 175, 127, 0.1);
  --yellow: #fcb71e;
  --light_blue: #64b9fc;

  /* 透明度白色 */
  --fff100: rgba(255, 255, 255, 1);
  --fff95: rgba(255, 255, 255, 0.95);
  --fff90: rgba(255, 255, 255, 0.9);
  --fff85: rgba(255, 255, 255, 0.85);
  --fff80: rgba(255, 255, 255, 0.8);
  --fff75: rgba(255, 255, 255, 0.75);
  --fff70: rgba(255, 255, 255, 0.7);
  --fff60: rgba(255, 255, 255, 0.6);
  --fff50: rgba(255, 255, 255, 0.5);
  --fff45: rgba(255, 255, 255, 0.45);
  --fff40: rgba(255, 255, 255, 0.4);
  --fff35: rgba(255, 255, 255, 0.35);
  --fff30: rgba(255, 255, 255, 0.3);
  --fff25: rgba(255, 255, 255, 0.25);
  --fff20: rgba(255, 255, 255, 0.2);
  --fff15: rgba(255, 255, 255, 0.15);
  --fff10: rgba(255, 255, 255, 0.1);
  --fff05: rgba(255, 255, 255, 0.05);

  /* 输入框相关 */
  --input_bg: #f6f7f8;
  --input_border: #ced4da;
  --input_placeholder: #9ca5b0;
  --input_focus_border: #2f7df6;

  --blue_hover: rgba(31, 136, 229, 0.7);

  /* 过渡动画配置 */
  --theme-transition-duration: 0.2s;
  /* 用户等级标签 */
  --level-bg: #FFFBEF;
  --level-text: #FFD034;
}

/* ============================================
   深色主题变量覆盖
   ============================================ */
[data-theme='dark'] {
  /* 背景色 */
  --bg: #090a0c;
  --bg001: #1d2431;
  --bg002: #191d24;
  --cardBg: #191d24;
  --bg003: #2d3239;
  --bg004: #191f32;
  --bg005: rgba(10, 14, 23, 0.6);
  --bg006: rgba(47, 125, 246, 0.6);
  --bg007: #434f78;
  --bg008: #274d80;
  --bg009: #60677e;
  --bg010: #263142;
  --bg011: rgba(43, 53, 85, 0.4);
  --bgfff10: rgba(255, 255, 255, 0.1);
  --bg00010: rgba(0, 0, 0, 0.1);

  /* 按钮主题背景色 */
  --btn-theme-bg: #31363f;

  /* 登录注册相关背景色（深色主题） */
  --bg2: #14161f;
  --bg3: #1d1f24;
  --bg4: rgba(0, 0, 0, 0.3);
  --bg5: rgba(0, 0, 0, 0.2);
  --bg6: #24262b;
  --bg7: #212328;

  /* 文字颜色 */
  --c001: #c4cad7;
  --c002: #9ca5b0;
  --c003: #858585;
  --c004: #4e5c6d;
  --c005: #181e29;
  --c006: #202734;
  --c007: #232933;

  /* 边框颜色 */
  --b001: #424c6d;
  --b002: #67759f;

  /* 主题色保持不变 */
  /* --white, --blue, --purple, --green, --red, --yellow, --light_blue */

  /* 输入框相关 */
  --input_bg: #1a202c;
  --input_border: #3a4f73;
  --input_placeholder: #596e91;
  --input_focus_border: #2f7df6;

  /* 用户等级标签 */
  --level-bg: #31322e;
  --level-text: #FFD034;
}

/* ============================================
   全局过渡动画
   ============================================ */

/* 主题切换时的全局平滑过渡 */
/* * {
  transition-property: background-color, color, border-color, box-shadow, fill, stroke;
  transition-duration: var(--theme-transition-duration);
  transition-timing-function: var(--theme-transition-easing);
} */

/* 排除某些不需要过渡的元素 */
*:where(
  [data-no-transition],
  img,
  video,
  iframe,
  canvas,
  svg
) {
  transition: none !important;
}

/* 主题切换时的根元素过渡 */
:root {
  transition: background-color 0.2s var(--theme-transition-easing);
  transition: background-color var(--theme-transition-duration) var(--theme-transition-easing);
}

body {
  background-color: #fafafa !important;
  background-color: var(--bg) !important;
  color: #212529;
  color: var(--c001);
  transition:
    background-color 0.2s var(--theme-transition-easing),
    color 0.2s var(--theme-transition-easing);
  transition:
    background-color var(--theme-transition-duration) var(--theme-transition-easing),
    color var(--theme-transition-duration) var(--theme-transition-easing);
}

/* 主题切换中状态 */
.theme-transitioning {
  position: relative;
}

/* 无障碍性：减少动画 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --theme-transition-duration: 0.01ms;
  }

  *,
  *::before,
  *::after {
    -webkit-animation-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
            animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 移动设备优化：缩短动画时间 */
@media (max-width: 768px) {
  :root {
    --theme-transition-duration: 0.2s;
  }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
  :root {
    --b001: currentColor;
    --b002: currentColor;
  }
}

/* ============================================
   通用工具类
   ============================================ */

/* 背景色工具类 */
.bg-primary { background-color: #fafafa !important; background-color: var(--bg) !important; }
.bg-card { background-color: #ffffff !important; background-color: var(--cardBg) !important; }
.bg-secondary { background-color: #ffffff !important; background-color: var(--bg002) !important; }

/* 文字颜色工具类 */
.text-primary { color: #212529 !important; color: var(--c001) !important; }
.text-secondary { color: #6c757d !important; color: var(--c002) !important; }
.text-muted { color: #858585 !important; color: var(--c003) !important; }

/* 边框颜色工具类 */
.border-primary { border-color: #dee2e6 !important; border-color: var(--b001) !important; }
.border-secondary { border-color: #ced4da !important; border-color: var(--b002) !important; }

/* 主题色工具类 */
.text-blue { color: #6c29eb !important; color: var(--blue) !important; }
.text-purple { color: #6c29eb !important; color: var(--purple) !important; }
.text-green { color: #08af7f !important; color: var(--green) !important; }
.text-red { color: #ff5361 !important; color: var(--red) !important; }
.text-yellow { color: #fcb71e !important; color: var(--yellow) !important; }

.bg-blue { background-color: #6c29eb !important; background-color: var(--blue) !important; }
.bg-purple { background-color: #6c29eb !important; background-color: var(--purple) !important; }
.bg-green { background-color: #08af7f !important; background-color: var(--green) !important; }
.bg-red { background-color: #ff5361 !important; background-color: var(--red) !important; }
.bg-yellow { background-color: #fcb71e !important; background-color: var(--yellow) !important; }

/* 主题切换动画效果 */

/* 全局主题切换过渡（时长由 theme-variables.css 统一维护） */
:root {
  --theme-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 主题切换时的全局过渡 */
body {
  transition:
    background-color var(--theme-transition-duration) cubic-bezier(0.4, 0, 0.2, 1),
    color var(--theme-transition-duration) cubic-bezier(0.4, 0, 0.2, 1),
    border-color var(--theme-transition-duration) cubic-bezier(0.4, 0, 0.2, 1);
  transition:
    background-color var(--theme-transition-duration) var(--theme-transition-easing),
    color var(--theme-transition-duration) var(--theme-transition-easing),
    border-color var(--theme-transition-duration) var(--theme-transition-easing);
}

/* 主题切换动画类 */
.theme-transitioning {
  position: relative;
}

/* 元素进入动画 */
.theme-element-enter {
  -webkit-animation: elementEnter 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
          animation: elementEnter 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  -webkit-animation: elementEnter 0.4s var(--theme-transition-easing) forwards;
          animation: elementEnter 0.4s var(--theme-transition-easing) forwards;
}

@-webkit-keyframes elementEnter {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes elementEnter {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 淡入淡出动画 */
.theme-fade-enter {
  opacity: 0;
  -webkit-animation: fadeEnter var(--theme-transition-duration) cubic-bezier(0.4, 0, 0.2, 1) forwards;
          animation: fadeEnter var(--theme-transition-duration) cubic-bezier(0.4, 0, 0.2, 1) forwards;
  -webkit-animation: fadeEnter var(--theme-transition-duration) var(--theme-transition-easing) forwards;
          animation: fadeEnter var(--theme-transition-duration) var(--theme-transition-easing) forwards;
}

.theme-fade-exit {
  -webkit-animation: fadeExit var(--theme-transition-duration) cubic-bezier(0.4, 0, 0.2, 1) forwards;
          animation: fadeExit var(--theme-transition-duration) cubic-bezier(0.4, 0, 0.2, 1) forwards;
  -webkit-animation: fadeExit var(--theme-transition-duration) var(--theme-transition-easing) forwards;
          animation: fadeExit var(--theme-transition-duration) var(--theme-transition-easing) forwards;
}

@-webkit-keyframes fadeEnter {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeEnter {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@-webkit-keyframes fadeExit {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.05);
  }
}

@keyframes fadeExit {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.05);
  }
}

/* 主题切换按钮脉冲效果 */
.theme-switcher-pulse {
  position: relative;
}

.theme-switcher-pulse::after {
  content: '';
  position: absolute;
  top: -1.02564vw;
  left: -1.02564vw;
  right: -1.02564vw;
  bottom: -1.02564vw;
  border: 0.51282vw solid currentColor;
  border-radius: 50%;
  opacity: 0;
  -webkit-animation: switcherPulse 1.5s ease-out infinite;
          animation: switcherPulse 1.5s ease-out infinite;
}

@-webkit-keyframes switcherPulse {
  0% {
    opacity: 0.8;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}

@keyframes switcherPulse {
  0% {
    opacity: 0.8;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}

/* 颜色过渡效果 */
.color-transition {
  transition:
    color var(--theme-transition-duration) cubic-bezier(0.4, 0, 0.2, 1),
    background-color var(--theme-transition-duration) cubic-bezier(0.4, 0, 0.2, 1),
    border-color var(--theme-transition-duration) cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow var(--theme-transition-duration) cubic-bezier(0.4, 0, 0.2, 1);
  transition:
    color var(--theme-transition-duration) var(--theme-transition-easing),
    background-color var(--theme-transition-duration) var(--theme-transition-easing),
    border-color var(--theme-transition-duration) var(--theme-transition-easing),
    box-shadow var(--theme-transition-duration) var(--theme-transition-easing);
}

/* 背景过渡效果 */
.background-transition {
  transition:
    background-color var(--theme-transition-duration) cubic-bezier(0.4, 0, 0.2, 1),
    background-image var(--theme-transition-duration) cubic-bezier(0.4, 0, 0.2, 1);
  transition:
    background-color var(--theme-transition-duration) var(--theme-transition-easing),
    background-image var(--theme-transition-duration) var(--theme-transition-easing);
}

/* 文字颜色过渡 */
.text-color-transition {
  transition: color var(--theme-transition-duration) cubic-bezier(0.4, 0, 0.2, 1);
  transition: color var(--theme-transition-duration) var(--theme-transition-easing);
}

/* 边框颜色过渡 */
.border-color-transition {
  transition: border-color var(--theme-transition-duration) cubic-bezier(0.4, 0, 0.2, 1);
  transition: border-color var(--theme-transition-duration) var(--theme-transition-easing);
}

/* 阴影过渡效果 */
.shadow-transition {
  transition: box-shadow var(--theme-transition-duration) cubic-bezier(0.4, 0, 0.2, 1);
  transition: box-shadow var(--theme-transition-duration) var(--theme-transition-easing);
}

/* 主题切换时的加载动画 */
.theme-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--theme-transition-duration) cubic-bezier(0.4, 0, 0.2, 1);
  transition: opacity var(--theme-transition-duration) var(--theme-transition-easing);
}

.theme-loading.active {
  opacity: 1;
  pointer-events: all;
}

.theme-loading-spinner {
  width: 10.25641vw;
  height: 10.25641vw;
  border: 0.76923vw solid rgba(255, 255, 255, 0.3);
  border-top: 0.76923vw solid #ffffff;
  border-radius: 50%;
  -webkit-animation: themeSpin 1s linear infinite;
          animation: themeSpin 1s linear infinite;
}

@-webkit-keyframes themeSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes themeSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 响应式动画 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --theme-transition-duration: 0.1s;
  }

  *,
  *::before,
  *::after {
    -webkit-animation-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
            animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 组件级别的主题切换动画 */
.component-theme-transition {
  transition:
    color var(--theme-transition-duration) cubic-bezier(0.4, 0, 0.2, 1),
    background-color var(--theme-transition-duration) cubic-bezier(0.4, 0, 0.2, 1),
    border-color var(--theme-transition-duration) cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow var(--theme-transition-duration) cubic-bezier(0.4, 0, 0.2, 1);
  transition:
    color var(--theme-transition-duration) var(--theme-transition-easing),
    background-color var(--theme-transition-duration) var(--theme-transition-easing),
    border-color var(--theme-transition-duration) var(--theme-transition-easing),
    box-shadow var(--theme-transition-duration) var(--theme-transition-easing);
}

.component-theme-transition-exit {
  opacity: 0;
  transform: scale(0.9);
}

.component-theme-transition-enter {
  opacity: 1;
  transform: scale(1);
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
  .theme-transitioning {
    outline: none;
  }
}

/* 移动设备优化 */
@media (max-width: 768px) {
  :root {
    --theme-transition-duration: 0.2s;
  }

  .theme-loading-spinner {
    width: 32px;
    height: 32px;
    border-width: 2px;
  }
}

.upSlideBox .title {
  height: 13.8vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 5.1vw;
  color: var(--TC1);
  font-family: var(--Medium);
  padding: 0 4.1vw;
}
.upSlideBox .title .close {
  width: 6.2vw;
  height: 6.2vw;
  cursor: pointer;
}
.upSlideBox .inputText {
  line-height: 5.1vw;
  font-size: 3.1vw;
  color: var(--TC2);
  padding: 0 4.1vw;
  margin-top: 2.1vw;
}
.upSlideBox .redText {
  line-height: 6vw;
  font-size: 2.8vw;
  color: var(--FC-red);
  padding: 0 4.1vw;
}
.upSlideBox .inputValue {
  margin: 1.5vw 4.1vw 0 4.1vw;
  width: 91.8vw;
  height: 11.3vw;
  padding: 0 3.1vw;
  font-size: 3.6vw;
  color: var(--TC1);
  background: var(--IB);
  border-radius: 2.1vw;
  border: none;
}
.upSlideBox .inputValue::-webkit-input-placeholder {
  color: var(--TC3);
}
.upSlideBox .inputValue:focus-visible,
.upSlideBox .inputValue:focus {
  /* 为支持的浏览器应用精细样式 */
  outline: 0.3vw solid var(--FC);
}
.upSlideBox .button {
  width: 91.8vw;
  margin: 5.1vw 4.1vw 4.1vw 4.1vw;
  height: 10.8vw;
  font-size: 3.6vw;
  border-radius: 2.1vw;
  background: var(--FC);
  color: var(--FC-white);
}
.switch {
  width: 8.2vw !important;
  height: 5.2vw !important;
  padding: 0;
  background: var(--FC2);
  border-radius: 25.4vw;
}
.switch > span {
  padding: 0;
  width: 4.6vw !important;
  height: 4.6vw !important;
  margin-top: 0.3vw;
  transform: translateX(0.3vw);
}
.switch > span > span {
  background: var(--FC-white);
  border-radius: 50%;
}
.switch > span > span > span {
  box-shadow: 0 1vw 1.5vw 0 rgba(0, 0, 0, 0.1) !important;
}
.switch > span:nth-child(2) {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 0;
  transform: translateX(0);
  background: var(--BC);
  opacity: 1;
}
.switch .Mui-checked {
  transform: translateX(3.3vw) !important;
}
.text-ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.flex-center {
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-tb-center {
  line-height: 0;
  display: flex;
  align-items: center;
}
.flex-center-lr {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-lr {
  display: flex;
  justify-content: space-between;
}

@font-face {
  font-family: iconfontshble;
  src: url(https://static.prod.xp009.com/static/media/font.62759b1c.eot);
  src: url(https://static.prod.xp009.com/static/media/font.1b35b521.woff) format("woff"), url(https://static.prod.xp009.com/static/media/font.92acc682.ttf) format("truetype"), url(https://static.prod.xp009.com/static/media/font.ca5d4588.svg) format("svg");
}
.g-icon {
  display: inline-block;
  font-style: normal;
  vertical-align: baseline;
  text-align: center;
  text-transform: none;
  line-height: 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 5.12821vw;
}
.g-icon:before {
  font-family: iconfontshble;
  display: block;
}
.g-icon-step-forward:before {
  content: "\E600";
}
.g-icon-step-backward:before {
  content: "\E601";
}
.g-icon-forward:before {
  content: "\E602";
}
.g-icon-backward:before {
  content: "\E603";
}
.g-icon-caret-right:before {
  content: "\E604";
}
.g-icon-caret-left:before {
  content: "\E605";
}
.g-icon-caret-down:before {
  content: "\E606";
}
.g-icon-caret-up:before {
  content: "\E607";
}
.g-icon-caret-circle-right:before,
.g-icon-circle-right:before,
.g-icon-right-circle:before {
  content: "\E608";
}
.g-icon-caret-circle-left:before,
.g-icon-circle-left:before,
.g-icon-left-circle:before {
  content: "\E609";
}
.g-icon-caret-circle-up:before,
.g-icon-circle-up:before,
.g-icon-up-circle:before {
  content: "\E60A";
}
.g-icon-caret-circle-down:before,
.g-icon-circle-down:before,
.g-icon-down-circle:before {
  content: "\E60B";
}
.g-icon-right-circle-o:before {
  content: "\E60C";
}
.g-icon-caret-circle-o-right:before,
.g-icon-circle-o-right:before {
  content: "\E60C";
}
.g-icon-left-circle-o:before {
  content: "\E60D";
}
.g-icon-caret-circle-o-left:before,
.g-icon-circle-o-left:before {
  content: "\E60D";
}
.g-icon-up-circle-o:before {
  content: "\E60E";
}
.g-icon-caret-circle-o-up:before,
.g-icon-circle-o-up:before {
  content: "\E60E";
}
.g-icon-down-circle-o:before {
  content: "\E60F";
}
.g-icon-caret-circle-o-down:before,
.g-icon-circle-o-down:before {
  content: "\E60F";
}
.g-icon-verticle-left:before {
  content: "\E610";
}
.g-icon-verticle-right:before {
  content: "\E611";
}
.g-icon-rollback:before {
  content: "\E612";
}
.g-icon-retweet:before {
  content: "\E613";
}
.g-icon-shrink:before {
  content: "\E614";
}
.g-icon-arrow-salt:before,
.g-icon-arrows-alt:before {
  content: "\E615";
}
.g-icon-reload:before {
  content: "\E616";
}
.g-icon-double-right:before {
  content: "\E617";
}
.g-icon-double-left:before {
  content: "\E618";
}
.g-icon-arrow-down:before {
  content: "\E619";
}
.g-icon-arrow-up:before {
  content: "\E61A";
}
.g-icon-arrow-right:before {
  content: "\E61B";
}
.g-icon-arrow-left:before {
  content: "\E61C";
}
.g-icon-down:before {
  content: "\E61D";
}
.g-icon-up:before {
  content: "\E61E";
}
.g-icon-right:before {
  content: "\E61F";
}
.g-icon-left:before {
  content: "\E620";
}
.g-icon-minus-square-o:before {
  content: "\E621";
}
.g-icon-minus-circle:before {
  content: "\E622";
}
.g-icon-minus-circle-o:before {
  content: "\E623";
}
.g-icon-minus:before {
  content: "\E624";
}
.g-icon-plus-circle-o:before {
  content: "\E625";
}
.g-icon-plus-circle:before {
  content: "\E626";
}
.g-icon-plus:before {
  content: "\E627";
}
.g-icon-info-circle:before {
  content: "\E628";
}
.g-icon-info-circle-o:before {
  content: "\E629";
}
.g-icon-info:before {
  content: "\E62A";
}
.g-icon-exclamation:before {
  content: "\E62B";
}
.g-icon-exclamation-circle:before {
  content: "\E62C";
}
.g-icon-exclamation-circle-o:before {
  content: "\E62D";
}
.g-icon-close-circle:before,
.g-icon-cross-circle:before {
  content: "\E62E";
}
.g-icon-close-circle-o:before,
.g-icon-cross-circle-o:before {
  content: "\E62F";
}
.g-icon-check-circle:before {
  content: "\E630";
}
.g-icon-check-circle-o:before {
  content: "\E631";
}
.g-icon-check:before {
  content: "\E632";
}
.g-icon-close:before,
.g-icon-cross:before {
  content: "\E633";
}
.g-icon-customer-service:before,
.g-icon-customerservice:before {
  content: "\E634";
}
.g-icon-credit-card:before {
  content: "\E635";
}
.g-icon-code-o:before {
  content: "\E636";
}
.g-icon-book:before {
  content: "\E637";
}
.g-icon-bars:before {
  content: "\E639";
}
.g-icon-question:before {
  content: "\E63A";
}
.g-icon-question-circle:before {
  content: "\E63B";
}
.g-icon-question-circle-o:before {
  content: "\E63C";
}
.g-icon-pause:before {
  content: "\E63D";
}
.g-icon-pause-circle:before {
  content: "\E63E";
}
.g-icon-pause-circle-o:before {
  content: "\E63F";
}
.g-icon-clock-circle:before {
  content: "\E640";
}
.g-icon-clock-circle-o:before {
  content: "\E641";
}
.g-icon-swap:before {
  content: "\E642";
}
.g-icon-swap-left:before {
  content: "\E643";
}
.g-icon-swap-right:before {
  content: "\E644";
}
.g-icon-plus-square-o:before {
  content: "\E645";
}
.g-icon-frown-circle:before,
.g-icon-frown:before {
  content: "\E646";
}
.g-icon-ellipsis:before {
  content: "\E647";
}
.g-icon-copy:before {
  content: "\E648";
}
.g-icon-menu-fold:before {
  content: "\E9AC";
}
.g-icon-mail:before {
  content: "\E659";
}
.g-icon-logout:before {
  content: "\E65A";
}
.g-icon-link:before {
  content: "\E65B";
}
.g-icon-area-chart:before {
  content: "\E65C";
}
.g-icon-line-chart:before {
  content: "\E65D";
}
.g-icon-home:before {
  content: "\E65E";
}
.g-icon-laptop:before {
  content: "\E65F";
}
.g-icon-star:before {
  content: "\E660";
}
.g-icon-star-o:before {
  content: "\E661";
}
.g-icon-folder:before {
  content: "\E662";
}
.g-icon-filter:before {
  content: "\E663";
}
.g-icon-file:before {
  content: "\E664";
}
.g-icon-exception:before {
  content: "\E665";
}
.g-icon-meh-circle:before,
.g-icon-meh:before {
  content: "\E666";
}
.g-icon-meh-o:before {
  content: "\E667";
}
.g-icon-shopping-cart:before {
  content: "\E668";
}
.g-icon-save:before {
  content: "\E669";
}
.g-icon-user:before {
  content: "\E66A";
}
.g-icon-video-camera:before {
  content: "\E66B";
}
.g-icon-to-top:before {
  content: "\E66C";
}
.g-icon-team:before {
  content: "\E66D";
}
.g-icon-tablet:before {
  content: "\E66E";
}
.g-icon-solution:before {
  content: "\E66F";
}
.g-icon-search:before {
  content: "\E670";
}
.g-icon-share-alt:before {
  content: "\E671";
}
.g-icon-setting:before {
  content: "\E672";
}
.g-icon-poweroff:before {
  content: "\E6D5";
}
.g-icon-picture:before {
  content: "\E674";
}
.g-icon-phone:before {
  content: "\E675";
}
.g-icon-paper-clip:before {
  content: "\E676";
}
.g-icon-notification:before {
  content: "\E677";
}
.g-icon-mobile:before {
  content: "\E678";
}
.g-icon-menu-unfold:before {
  content: "\E9AD";
}
.g-icon-inbox:before {
  content: "\E67A";
}
.g-icon-lock:before {
  content: "\E67B";
}
.g-icon-qrcode:before {
  content: "\E67C";
}
.g-icon-play-circle:before {
  content: "\E6D0";
}
.g-icon-play-circle-o:before {
  content: "\E6D1";
}
.g-icon-tag:before {
  content: "\E6D2";
}
.g-icon-tag-o:before {
  content: "\E6D3";
}
.g-icon-tags:before {
  content: "\E67D";
}
.g-icon-tags-o:before {
  content: "\E67E";
}
.g-icon-cloud-o:before {
  content: "\E67F";
}
.g-icon-cloud:before {
  content: "\E680";
}
.g-icon-cloud-upload:before {
  content: "\E681";
}
.g-icon-cloud-download:before {
  content: "\E682";
}
.g-icon-cloud-download-o:before {
  content: "\E683";
}
.g-icon-cloud-upload-o:before {
  content: "\E684";
}
.g-icon-environment:before {
  content: "\E685";
}
.g-icon-environment-o:before {
  content: "\E686";
}
.g-icon-eye:before {
  content: "\E687";
}
.g-icon-eye-o:before {
  content: "\E688";
}
.g-icon-camera:before {
  content: "\E689";
}
.g-icon-camera-o:before {
  content: "\E68A";
}
.g-icon-windows:before {
  content: "\E68B";
}
.g-icon-apple:before {
  content: "\E68C";
}
.g-icon-apple-o:before {
  content: "\E6D4";
}
.g-icon-android:before {
  content: "\E938";
}
.g-icon-android-o:before {
  content: "\E68D";
}
.g-icon-aliwangwang:before {
  content: "\E68E";
}
.g-icon-aliwangwang-o:before {
  content: "\E68F";
}
.g-icon-export:before {
  content: "\E691";
}
.g-icon-edit:before {
  content: "\E692";
}
.g-icon-circle-down-o:before {
  content: "\E693";
}
.g-icon-circle-down-:before {
  content: "\E694";
}
.g-icon-appstore-o:before {
  content: "\E695";
}
.g-icon-appstore:before {
  content: "\E696";
}
.g-icon-scan:before {
  content: "\E697";
}
.g-icon-file-text:before {
  content: "\E698";
}
.g-icon-folder-open:before {
  content: "\E699";
}
.g-icon-hdd:before {
  content: "\E69A";
}
.g-icon-ie:before {
  content: "\E69B";
}
.g-icon-file-jpg:before {
  content: "\E69C";
}
.g-icon-like:before {
  content: "\E64C";
}
.g-icon-like-o:before {
  content: "\E69D";
}
.g-icon-dislike:before {
  content: "\E64B";
}
.g-icon-dislike-o:before {
  content: "\E69E";
}
.g-icon-delete:before {
  content: "\E69F";
}
.g-icon-enter:before {
  content: "\E6A0";
}
.g-icon-pushpin-o:before {
  content: "\E6A1";
}
.g-icon-pushpin:before {
  content: "\E6A2";
}
.g-icon-heart:before {
  content: "\E6A3";
}
.g-icon-heart-o:before {
  content: "\E6A4";
}
.g-icon-pay-circle:before {
  content: "\E6A5";
}
.g-icon-pay-circle-o:before {
  content: "\E6A6";
}
.g-icon-smile-circle:before,
.g-icon-smile:before {
  content: "\E6A7";
}
.g-icon-smile-o:before {
  content: "\E6A8";
}
.g-icon-frown-o:before {
  content: "\E6A9";
}
.g-icon-calculator:before {
  content: "\E6AA";
}
.g-icon-message:before {
  content: "\E6AB";
}
.g-icon-chrome:before {
  content: "\E6AC";
}
.g-icon-github:before {
  content: "\E6AD";
}
.g-icon-file-unknown:before {
  content: "\E6AF";
}
.g-icon-file-excel:before {
  content: "\E6B0";
}
.g-icon-file-ppt:before {
  content: "\E6B1";
}
.g-icon-file-word:before {
  content: "\E6B2";
}
.g-icon-file-pdf:before {
  content: "\E6B3";
}
.g-icon-desktop:before {
  content: "\E6B4";
}
.g-icon-upload:before {
  content: "\E6B6";
}
.g-icon-download:before {
  content: "\E6B7";
}
.g-icon-pie-chart:before {
  content: "\E6B8";
}
.g-icon-unlock:before {
  content: "\E6BA";
}
.g-icon-calendar:before {
  content: "\E6BB";
}
.g-icon-windows-o:before {
  content: "\E6BC";
}
.g-icon-dot-chart:before {
  content: "\E6BD";
}
.g-icon-bar-chart:before {
  content: "\E6BE";
}
.g-icon-code:before {
  content: "\E6BF";
}
.g-icon-api:before {
  content: "\E951";
}
.g-icon-plus-square:before {
  content: "\E6C0";
}
.g-icon-minus-square:before {
  content: "\E6C1";
}
.g-icon-close-square:before {
  content: "\E6C2";
}
.g-icon-close-square-o:before {
  content: "\E6C3";
}
.g-icon-check-square:before {
  content: "\E6C4";
}
.g-icon-check-square-o:before {
  content: "\E6C5";
}
.g-icon-fast-backward:before {
  content: "\E6C6";
}
.g-icon-fast-forward:before {
  content: "\E6C7";
}
.g-icon-up-square:before {
  content: "\E6C8";
}
.g-icon-down-square:before {
  content: "\E6C9";
}
.g-icon-left-square:before {
  content: "\E6CA";
}
.g-icon-right-square:before {
  content: "\E6CB";
}
.g-icon-right-square-o:before {
  content: "\E6CC";
}
.g-icon-left-square-o:before {
  content: "\E6CD";
}
.g-icon-down-square-o:before {
  content: "\E6CE";
}
.g-icon-up-square-o:before {
  content: "\E6CF";
}
.g-icon-loading:before {
  content: "\E64D";
}
.g-icon-spin {
  -webkit-animation: loading 1s infinite linear;
          animation: loading 1s infinite linear;
}
@-webkit-keyframes loading {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
@keyframes loading {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
.g-icon-loading-3-quarters:before {
  content: "\E6AE";
}
.g-icon-bulb:before {
  content: "\E649";
}
.g-icon-select:before {
  content: "\E64A";
}
.g-icon-addfile:before,
.g-icon-file-add:before {
  content: "\E910";
}
.g-icon-addfolder:before,
.g-icon-folder-add:before {
  content: "\E914";
}
.g-icon-switcher:before {
  content: "\E913";
}
.g-icon-rocket:before {
  content: "\E90F";
}
.g-icon-dingding:before {
  content: "\E923";
}
.g-icon-dingding-o:before {
  content: "\E925";
}
.g-icon-bell:before {
  content: "\E64E";
}
.g-icon-disconnect:before {
  content: "\E64F";
}
.g-icon-database:before {
  content: "\E650";
}
.g-icon-compass:before {
  content: "\E6DB";
}
.g-icon-barcode:before {
  content: "\E652";
}
.g-icon-hourglass:before {
  content: "\E653";
}
.g-icon-key:before {
  content: "\E654";
}
.g-icon-flag:before {
  content: "\E655";
}
.g-icon-layout:before {
  content: "\E656";
}
.g-icon-login:before {
  content: "\E657";
}
.g-icon-printer:before {
  content: "\E673";
}
.g-icon-sound:before {
  content: "\E6E9";
}
.g-icon-usb:before {
  content: "\E6D7";
}
.g-icon-skin:before {
  content: "\E6D8";
}
.g-icon-tool:before {
  content: "\E6D9";
}
.g-icon-sync:before {
  content: "\E6DA";
}
.g-icon-wifi:before {
  content: "\E6D6";
}
.g-icon-car:before {
  content: "\E6DC";
}
.g-icon-copyright:before {
  content: "\E6DE";
}
.g-icon-schedule:before {
  content: "\E6DF";
}
.g-icon-user-add:before {
  content: "\E6ED";
}
.g-icon-user-delete:before {
  content: "\E6E0";
}
.g-icon-usergroup-add:before {
  content: "\E6DD";
}
.g-icon-usergroup-delete:before {
  content: "\E6E1";
}
.g-icon-man:before {
  content: "\E6E2";
}
.g-icon-woman:before {
  content: "\E6EC";
}
.g-icon-shop:before {
  content: "\E6E3";
}
.g-icon-gift:before {
  content: "\E6E4";
}
.g-icon-idcard:before {
  content: "\E6E5";
}
.g-icon-medicine-box:before {
  content: "\E6E6";
}
.g-icon-red-envelope:before {
  content: "\E6E7";
}
.g-icon-coffee:before {
  content: "\E6E8";
}
.g-icon-trademark:before {
  content: "\E651";
}
.g-icon-safety:before {
  content: "\E6EA";
}
.g-icon-wallet:before {
  content: "\E6EB";
}
.g-icon-bank:before {
  content: "\E6EE";
}
.g-icon-trophy:before {
  content: "\E6EF";
}
.g-icon-contacts:before {
  content: "\E6F0";
}
.g-icon-global:before {
  content: "\E6F1";
}
.g-icon-shake:before {
  content: "\E94F";
}
.g-icon-fork:before {
  content: "\E6F2";
}
.g-icon-dashboard:before {
  content: "\E99A";
}
.g-icon-profile:before {
  content: "\E999";
}
.g-icon-table:before {
  content: "\E998";
}
.g-icon-warning:before {
  content: "\E997";
}
.g-icon-form:before {
  content: "\E996";
}
.g-icon-spin:before {
  display: inline-block;
  -webkit-animation: loadingCircle 1s infinite linear;
  animation: loadingCircle 1s infinite linear;
}
.g-icon-weibo-square:before {
  content: "\E6F5";
}
.g-icon-weibo-circle:before {
  content: "\E6F4";
}
.g-icon-taobao-circle:before {
  content: "\E6F3";
}
.g-icon-html5:before {
  content: "\E9C7";
}
.g-icon-weibo:before {
  content: "\E9C6";
}
.g-icon-twitter:before {
  content: "\E9C5";
}
.g-icon-wechat:before {
  content: "\E9C4";
}
.g-icon-youtube:before {
  content: "\E9C3";
}
.g-icon-alipay-circle:before {
  content: "\E9C2";
}
.g-icon-taobao:before {
  content: "\E9C1";
}
.g-icon-skype:before {
  content: "\E9C0";
}
.g-icon-qq:before {
  content: "\E9BF";
}
.g-icon-medium-workmark:before {
  content: "\E9BE";
}
.g-icon-gitlab:before {
  content: "\E9BD";
}
.g-icon-medium:before {
  content: "\E9BC";
}
.g-icon-linkedin:before {
  content: "\E9BB";
}
.g-icon-google-plus:before {
  content: "\E9BA";
}
.g-icon-dropbox:before {
  content: "\E9B9";
}
.g-icon-facebook:before {
  content: "\E9B8";
}
.g-icon-codepen:before {
  content: "\E9B7";
}
.g-icon-amazon:before {
  content: "\E9B6";
}
.g-icon-google:before {
  content: "\E9B5";
}
.g-icon-codepen-circle:before {
  content: "\E9B4";
}
.g-icon-alipay:before {
  content: "\E9B3";
}
.g-icon-ant-design:before {
  content: "\E9B2";
}
.g-icon-aliyun:before {
  content: "\E9F4";
}
.g-icon-zhihu:before {
  content: "\E703";
}
.g-icon-file-markdown:before {
  content: "\E704";
}
.g-icon-slack:before {
  content: "\E705";
}
.g-icon-slack-square:before {
  content: "\E706";
}
.g-icon-behance:before {
  content: "\E707";
}
.g-icon-behance-square:before {
  content: "\E708";
}
.g-icon-dribbble:before {
  content: "\E709";
}
.g-icon-dribbble-square:before {
  content: "\E70A";
}
.g-icon-instagram:before {
  content: "\E70B";
}
.g-icon-yuque:before {
  content: "\E70C";
}

@font-face {
  font-family: "iconfont";
  /* project id 839010 */
  src: url(https://static.prod.xp009.com/static/media/iconfont.4326c8de.eot);
  src: url(https://static.prod.xp009.com/static/media/iconfont.4326c8de.eot) format("embedded-opentype"), url(https://static.prod.xp009.com/static/media/iconfont.e97c392b.woff) format("woff"), url(https://static.prod.xp009.com/static/media/iconfont.b0bd360d.ttf) format("truetype"), url(https://static.prod.xp009.com/static/media/iconfont.c9608660.svg) format("svg");
}
.b-icon {
  display: inline-block;
  font-family: "iconfont";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-feature-settings: normal;
  font-variant: normal;
  text-transform: none;
  text-rendering: auto;
  line-height: 1;
  font-size: 6.15385vw;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: middle;
}
.b-icon span {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  line-height: 6.15385vw;
  padding: 0 1.28205vw;
}
.b-icon-googleplay:before {
  content: "\e688";
}
.b-icon-coingecko:before {
  content: "\e687";
}
.b-icon-feixiaohao:before {
  content: "\e684";
}
.b-icon-mytoken:before {
  content: "\e685";
}
.b-icon-coinmarketcap:before {
  content: "\e686";
}
.b-icon-delete1:before {
  content: "\e682";
}
.b-icon-save:before {
  content: "\e683";
}
.b-icon-levelunlimited:before {
  content: "\e681";
}
.b-icon-levelwithdraw:before {
  content: "\e67e";
}
.b-icon-levelcheck:before {
  content: "\e67f";
}
.b-icon-levellimited:before {
  content: "\e680";
}
.b-icon-triangle:before {
  content: "\e67c";
}
.b-icon-suspended1:before {
  content: "\e67d";
}
.b-icon-delete:before {
  content: "\e679";
}
.b-icon-checkedRadio2:before {
  content: "\e67b";
}
.b-icon-edit2:before {
  content: "\e67a";
}
.b-icon-flod:before {
  content: "\e677";
}
.b-icon-unflod:before {
  content: "\e678";
}
.b-icon-qq:before {
  content: "\e676";
}
.b-icon-testfight:before {
  content: "\e675";
}
.b-icon-medium:before {
  content: "\e66f";
}
.b-icon-linkedin:before {
  content: "\e670";
}
.b-icon-github:before {
  content: "\e671";
}
.b-icon-line:before {
  content: "\e672";
}
.b-icon-discord:before {
  content: "\e673";
}
.b-icon-biyong:before {
  content: "\e674";
}
.b-icon-count:before {
  content: "\e66e";
}
.b-icon-indicator:before {
  content: "\e66d";
}
.b-icon-contract:before {
  content: "\e66c";
}
.b-icon-dark:before {
  content: "\e669";
}
.b-icon-whiite:before {
  content: "\e66a";
}
.b-icon-cnyswitch:before {
  content: "\e66b";
}
.b-icon-download1:before {
  content: "\e656";
}
.b-icon-kline:before {
  content: "\e659";
}
.b-icon-Sort_left:before {
  content: "\e65a";
}
.b-icon-moreContent:before {
  content: "\e65d";
}
.b-icon-leftmore:before {
  content: "\e65e";
}
.b-icon-fullScreen:before {
  content: "\e65f";
}
.b-icon-Sort_right:before {
  content: "\e661";
}
.b-icon-moment:before {
  content: "\e662";
}
.b-icon-search1:before {
  content: "\e664";
}
.b-icon-check:before {
  content: "\e666";
}
.b-icon-screening:before {
  content: "\e667";
}
.b-icon-share1:before {
  content: "\e668";
}
.b-icon-order_down:before {
  content: "\e663";
}
.b-icon-order_up:before {
  content: "\e665";
}
.b-icon-slider:before {
  content: "\e62f";
}
.b-icon-notice:before {
  content: "\e660";
}
.b-icon-trade:before {
  content: "\e657";
}
.b-icon-asset:before {
  content: "\e658";
}
.b-icon-markets:before {
  content: "\e65b";
}
.b-icon-home:before {
  content: "\e65c";
}
.b-icon-back:before {
  content: "\e655";
}
.b-icon-search:before {
  content: "\e654";
}
.b-icon-paste1:before {
  content: "\e653";
}
.b-icon-brief:before {
  content: "\e652";
}
.b-icon-windows:before {
  content: "\e635";
}
.b-icon-weibo:before {
  content: "\e636";
}
.b-icon-telegram:before {
  content: "\e637";
}
.b-icon-apple:before {
  content: "\e638";
}
.b-icon-facebook:before {
  content: "\e63a";
}
.b-icon-android:before {
  content: "\e63b";
}
.b-icon-locked:before {
  content: "\e63c";
}
.b-icon-favorite:before {
  content: "\e63d";
}
.b-icon-favorited:before {
  content: "\e63e";
}
.b-icon-candels:before {
  content: "\e63f";
}
.b-icon-settings:before {
  content: "\e640";
}
.b-icon-day:before {
  content: "\e641";
}
.b-icon-night:before {
  content: "\e642";
}
.b-icon-announcement:before {
  content: "\e643";
}
.b-icon-pin:before {
  content: "\e644";
}
.b-icon-fullscreen:before {
  content: "\e645";
}
.b-icon-network:before {
  content: "\e646";
}
.b-icon-icon-test1:before {
  content: "\e648";
}
.b-icon-twitter:before {
  content: "\e64a";
}
.b-icon-intro:before {
  content: "\e639";
}
.b-icon-edit:before {
  content: "\e64b";
}
.b-icon-info_line:before {
  content: "\e64c";
}
.b-icon-appdownload:before {
  content: "\e64d";
}
.b-icon-announce:before {
  content: "\e64e";
}
.b-icon-download:before {
  content: "\e64f";
}
.b-icon-reddit:before {
  content: "\e650";
}
.b-icon-Icon_Authentication:before {
  content: "\e651";
}
.b-icon-dianhua:before {
  content: "\e609";
}
.b-icon-v:before {
  content: "\e69a";
}
.b-icon-loading:before {
  content: "\e615";
}
.b-icon-paypal:before {
  content: "\e89e";
}
.b-icon-send:before {
  content: "\e605";
}
.b-icon-kong:before {
  content: "\e600";
}
.b-icon-addPicture:before {
  content: "\e647";
}
.b-icon-usdt:before {
  content: "\e649";
}
.b-icon-alarm:before {
  content: "\e601";
}
.b-icon-arrowDown:before {
  content: "\e602";
}
.b-icon-close:before {
  content: "\e603";
}
.b-icon-attachment:before {
  content: "\e604";
}
.b-icon-filter:before {
  content: "\e606";
}
.b-icon-firstPage:before {
  content: "\e607";
}
.b-icon-fold:before {
  content: "\e608";
}
.b-icon-lastPage:before {
  content: "\e60a";
}
.b-icon-hidden:before {
  content: "\e60b";
}
.b-icon-moreAction:before {
  content: "\e60c";
}
.b-icon-nextPage:before {
  content: "\e60d";
}
.b-icon-prevPage:before {
  content: "\e60e";
}
.b-icon-Suspended:before {
  content: "\e60f";
}
.b-icon-unfold:before {
  content: "\e610";
}
.b-icon-unhidden:before {
  content: "\e611";
}
.b-icon-arrowUp:before {
  content: "\e612";
}
.b-icon-add:before {
  content: "\e613";
}
.b-icon-arrowRight:before {
  content: "\e614";
}
.b-icon-arrowLeft:before {
  content: "\e616";
}
.b-icon-checked:before {
  content: "\e617";
}
.b-icon-cancelled1:before {
  content: "\e61a";
}
.b-icon-finished1:before {
  content: "\e61d";
}
.b-icon-foldPage:before {
  content: "\e61e";
}
.b-icon-paste:before {
  content: "\e622";
}
.b-icon-lightsOFF:before {
  content: "\e625";
}
.b-icon-lightsON:before {
  content: "\e626";
}
.b-icon-transaction:before {
  content: "\e627";
}
.b-icon-unfoldPage:before {
  content: "\e628";
}
.b-icon-bankCard:before {
  content: "\e618";
}
.b-icon-wechatPay:before {
  content: "\e619";
}
.b-icon-alipay:before {
  content: "\e61b";
}
.b-icon-uncheck:before {
  content: "\e61c";
}
.b-icon-user:before {
  content: "\e61f";
}
.b-icon-checkedRadio:before {
  content: "\e620";
}
.b-icon-ucheckedRadio:before {
  content: "\e621";
}
.b-icon-time:before {
  content: "\e623";
}
.b-icon-code1:before {
  content: "\e624";
}
.b-icon-positive:before {
  content: "\e629";
}
.b-icon-reverse:before {
  content: "\e62a";
}
.b-icon-comment:before {
  content: "\e62b";
}
.b-icon-info:before {
  content: "\e62c";
}
.b-icon-praised:before {
  content: "\e62d";
}
.b-icon-upload:before {
  content: "\e62e";
}
.b-icon-logo:before {
  content: "\e631";
}
.b-icon-share:before {
  content: "\e632";
}
.b-icon-praise1:before {
  content: "\e633";
}
.b-icon-icon-test:before {
  content: "\e630";
}
.b-icon-wechat:before {
  content: "\e634";
}
.b-icon-youtube:before {
  content: "\e6a4";
}

.bg {
  background: #fafafa;
}
.blue {
  font-size: 3.59vw;
  color: #6c29eb;
}
.FC {
  color: var(--FC);
}
.paymentclass {
  font-size: 3.08vw;
  line-height: 5.13vw;
  padding-right: 3.08vw;
  position: relative;
  text-align: right;
}
.paymentLeftclass,
.paymentclassLeft36 {
  font-size: 3.08vw;
  line-height: 5.13vw;
  padding-left: 3.08vw;
  position: relative;
}
.paymentclassLeft36 {
  padding-left: 8.21vw;
}
.paymentclass:after {
  content: "";
  display: block;
  width: 0.51vw;
  height: 2.56vw;
  position: absolute;
  top: 50%;
  right: 0;
  background-color: var(--FC1);
  border-radius: 0.51vw 0 0.51vw 0;
  transform: translateY(-50%);
}
.paymentLeftclass:after {
  content: "";
  display: block;
  width: 0.51vw;
  height: 2.56vw;
  position: absolute;
  top: 50%;
  left: 0;
  background-color: var(--FC1);
  border-radius: 0.51vw 0 0.51vw 0;
  transform: translateY(-50%);
}
.paymentclassLeft36:after {
  content: "";
  display: block;
  width: 0.51vw;
  height: 2.56vw;
  position: absolute;
  top: 50%;
  left: 6.15vw;
  background-color: var(--FC1);
  border-radius: 0.51vw 0 0.51vw 0;
  transform: translateY(-50%);
}
.paymentsType0:after {
  background-color: #6C29EB;
}
.paymentsType1:after {
  background-color: #1777FF;
}
.paymentsType2:after {
  background-color: #00C250;
}
.paymentsType12:after {
  background-color: #005B7A;
}
.paymentsType13:after {
  background-color: #1B3351;
}
.paymentsType14:after {
  background-color: #FF8300;
}
.paymentsType15:after {
  background-color: #AACF39;
}
.paymentsType6:after {
  background-color: #E1222E;
}
.paymentsType17:after {
  background-color: #00BD8D;
}
.g-btn {
  display: inline-block;
  border: 0;
  text-align: center;
  transition: all 0.25s ease-out;
  vertical-align: middle;
  font-size: 3.58974vw;
  outline: none;
  padding: 1.53846vw 5.12821vw;
  background: #6c29eb;
  color: #ffffff;
  width: 100%;
  border-radius: 1.02564vw;
  cursor: pointer;
}
.g-btn:disabled {
  cursor: not-allowed;
  background: #60677e;
  color: #9ca5b0;
}
.g-btn:disabled:hover {
  background: #60677e;
  color: #9ca5b0;
}
.g-btn:hover {
  opacity: 0.6;
}
.g-btn-red {
  background: #ff5361;
}
.g-btn-green {
  background: #08af7f;
}
.g-btn-group {
  display: flex;
  width: 100%;
  border-top: 1px solid #424c6d;
}
.g-btn-group .g-btn {
  flex: 1 1;
  border-radius: 0;
}
.g-btn-group.g-btn-group-justify {
  display: flex;
  width: 100%;
}
.g-btn-group.g-btn-group-justify .g-btn,
.g-btn-group.g-btn-group-justify .g-btn-hollow {
  flex: 1 1;
}

.bg {
  background: #fafafa;
}
.blue {
  font-size: 3.59vw;
  color: #6c29eb;
}
.FC {
  color: var(--FC);
}
.paymentclass {
  font-size: 3.08vw;
  line-height: 5.13vw;
  padding-right: 3.08vw;
  position: relative;
  text-align: right;
}
.paymentLeftclass,
.paymentclassLeft36 {
  font-size: 3.08vw;
  line-height: 5.13vw;
  padding-left: 3.08vw;
  position: relative;
}
.paymentclassLeft36 {
  padding-left: 8.21vw;
}
.paymentclass:after {
  content: "";
  display: block;
  width: 0.51vw;
  height: 2.56vw;
  position: absolute;
  top: 50%;
  right: 0;
  background-color: var(--FC1);
  border-radius: 0.51vw 0 0.51vw 0;
  transform: translateY(-50%);
}
.paymentLeftclass:after {
  content: "";
  display: block;
  width: 0.51vw;
  height: 2.56vw;
  position: absolute;
  top: 50%;
  left: 0;
  background-color: var(--FC1);
  border-radius: 0.51vw 0 0.51vw 0;
  transform: translateY(-50%);
}
.paymentclassLeft36:after {
  content: "";
  display: block;
  width: 0.51vw;
  height: 2.56vw;
  position: absolute;
  top: 50%;
  left: 6.15vw;
  background-color: var(--FC1);
  border-radius: 0.51vw 0 0.51vw 0;
  transform: translateY(-50%);
}
.paymentsType0:after {
  background-color: #6C29EB;
}
.paymentsType1:after {
  background-color: #1777FF;
}
.paymentsType2:after {
  background-color: #00C250;
}
.paymentsType12:after {
  background-color: #005B7A;
}
.paymentsType13:after {
  background-color: #1B3351;
}
.paymentsType14:after {
  background-color: #FF8300;
}
.paymentsType15:after {
  background-color: #AACF39;
}
.paymentsType6:after {
  background-color: #E1222E;
}
.paymentsType17:after {
  background-color: #00BD8D;
}
.g-input {
  max-width: 100%;
  position: relative;
  border: 1px solid #67759f;
  border-radius: 0.76923vw;
  caret-color: #ffffff;
  color: #ffffff;
  transition: all ease-in-out 0.3s;
  height: 10.25641vw;
  display: flex;
  align-items: center;
}
.g-input .g-input-suffix,
.g-input .g-input-prefix {
  color: #67759f;
}
.g-input .g-input-suffix i,
.g-input .g-input-prefix i {
  color: #67759f;
}
.g-input.error {
  border-color: #ff5361;
}
.g-input:selection {
  border-color: #6c29eb;
}
.g-input input,
.g-input textarea {
  max-width: 100%;
  outline: none;
  width: 100%;
  height: 100%;
  font-size: 3.58974vw;
  line-height: 6.15385vw;
  padding: 0 2.5641vw;
  margin: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: none;
  color: #ffffff;
}
.g-input input::-webkit-input-placeholder, .g-input textarea::-webkit-input-placeholder {
  color: #68778b;
}
.g-input input:-ms-input-placeholder, .g-input textarea:-ms-input-placeholder {
  color: #68778b;
}
.g-input input::-ms-input-placeholder, .g-input textarea::-ms-input-placeholder {
  color: #68778b;
}
.g-input input::placeholder,
.g-input textarea::placeholder {
  color: #68778b;
}
.g-input input[type="checkbox"] {
  width: 5.12821vw;
  max-width: 5.12821vw;
  height: 5.12821vw;
  min-height: 5.12821vw;
  padding: 0;
  opacity: 0;
}
.g-input input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 7.69231vw #1d2431 inset;
  -webkit-text-fill-color: #ffffff !important;
}
.g-input input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff !important;
}
.g-input textarea {
  padding: 2.5641vw;
}
.g-input .g-input-suffix {
  color: #67759f;
  margin: 0 2.5641vw 0 0;
}
.g-input .g-input-prefix {
  color: #67759f;
  margin: 0 0 0 2.5641vw;
}
.g-input-error {
  border-color: #ff5361;
}
.g-input-focus {
  border-color: #ffffff;
  background-color: #2b3555;
}
.g-input-focus .g-input-suffix,
.g-input-focus .g-input-prefix {
  color: #ffffff;
}
.g-input-focus .g-input-suffix i,
.g-input-focus .g-input-prefix i {
  color: #ffffff;
}
.g-checkbox {
  position: relative;
  width: 4.10256vw;
  height: 4.10256vw;
  padding: 0;
  cursor: pointer;
}
.g-checkbox input {
  cursor: pointer;
}
.g-input-checked {
  background: #6c29eb;
}
.g-input-checked:before {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 11%;
  top: 13%;
  font-family: iconfontshble;
  content: "\E632";
  display: block;
  color: #ffffff;
  font-size: 3.07692vw;
}
.g-input-group {
  position: relative;
  max-width: 100%;
  display: flex;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.g-input-group .g-input {
  border: 0;
  flex: 1 1;
}
.g-input-group .g-input:last-child {
  border: 0;
}

.g-msgbox {
  width: 100%;
  top: 4.10256vw;
  left: 0;
  pointer-events: none;
  display: flex;
  justify-content: center;
  flex-direction: column;
  z-index: 1499;
}
.g-message,
.loadBox {
  pointer-events: none;
  position: fixed;
  max-width: 90%;
  z-index: 1900;
  color: var(--TC-rebel);
  margin: 0 auto 2.5641vw;
  top: 50%;
  left: 0;
  right: 0;
  transform: translate3d(0, -50%, 0);
  text-align: center;
  display: flex;
  flex-shrink: unset;
  align-items: center;
  justify-content: center;
  -webkit-animation: once 0.5s ease-in-out 1 forwards;
          animation: once 0.5s ease-in-out 1 forwards;
}
.g-message-inner {
  display: flex;
  background: var(--FC-tips);
  border: 1.28205vw;
  padding: 1.28205vw 2.5641vw;
  min-width: 30.76923vw;
  box-shadow: 0px 1px 1.28205vw rgba(36, 43, 50, 0.2), 0px 0.76923vw 1.02564vw rgba(36, 43, 50, 0.12), 0px 0.51282vw 1.02564vw rgba(36, 43, 50, 0.14);
  border-radius: 1.28205vw;
  align-items: center;
}
.g-message.close {
  -webkit-animation: close 0.5s ease-in-out 1 forwards;
          animation: close 0.5s ease-in-out 1 forwards;
}
.g-message i {
  height: 6.15385vw;
}
.g-message svg {
  flex: none;
}
.g-message span,
.loadBox span {
  display: block;
  font-size: 3.58974vw;
  line-height: 1.4;
  min-height: 5.12821vw;
  margin: 0 0 0 1.28205vw;
  max-width: 86%;
  word-break: break-all;
}
.g-message .b-icon-info {
  color: #3375e0;
}
.g-message .b-icon-suspended1 {
  color: #fcb71e;
}
.g-message .b-icon-delete {
  color: #f73a46;
}
.g-message .b-icon-check {
  color: #51d372;
}
@-webkit-keyframes once {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes once {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes close {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes close {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.loadBox .icon {
  width: 6.15385vw;
  height: 6.15385vw;
  -webkit-animation: rotateZ 4s linear 0s infinite;
          animation: rotateZ 4s linear 0s infinite;
}
.loadBg {
  pointer-events: auto;
  position: fixed;
  z-index: 1899;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: var(--MBG);
}
@-webkit-keyframes rotateZ {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
@keyframes rotateZ {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

.bg {
  background: #fafafa;
}
.blue {
  font-size: 3.59vw;
  color: #6c29eb;
}
.FC {
  color: var(--FC);
}
.paymentclass {
  font-size: 3.08vw;
  line-height: 5.13vw;
  padding-right: 3.08vw;
  position: relative;
  text-align: right;
}
.paymentLeftclass,
.paymentclassLeft36 {
  font-size: 3.08vw;
  line-height: 5.13vw;
  padding-left: 3.08vw;
  position: relative;
}
.paymentclassLeft36 {
  padding-left: 8.21vw;
}
.paymentclass:after {
  content: "";
  display: block;
  width: 0.51vw;
  height: 2.56vw;
  position: absolute;
  top: 50%;
  right: 0;
  background-color: var(--FC1);
  border-radius: 0.51vw 0 0.51vw 0;
  transform: translateY(-50%);
}
.paymentLeftclass:after {
  content: "";
  display: block;
  width: 0.51vw;
  height: 2.56vw;
  position: absolute;
  top: 50%;
  left: 0;
  background-color: var(--FC1);
  border-radius: 0.51vw 0 0.51vw 0;
  transform: translateY(-50%);
}
.paymentclassLeft36:after {
  content: "";
  display: block;
  width: 0.51vw;
  height: 2.56vw;
  position: absolute;
  top: 50%;
  left: 6.15vw;
  background-color: var(--FC1);
  border-radius: 0.51vw 0 0.51vw 0;
  transform: translateY(-50%);
}
.paymentsType0:after {
  background-color: #6C29EB;
}
.paymentsType1:after {
  background-color: #1777FF;
}
.paymentsType2:after {
  background-color: #00C250;
}
.paymentsType12:after {
  background-color: #005B7A;
}
.paymentsType13:after {
  background-color: #1B3351;
}
.paymentsType14:after {
  background-color: #FF8300;
}
.paymentsType15:after {
  background-color: #AACF39;
}
.paymentsType6:after {
  background-color: #E1222E;
}
.paymentsType17:after {
  background-color: #00BD8D;
}
.g-loadingBox {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  min-height: 5.12821vw;
}
.g-loadingContent {
  display: flex;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateZ(0);
  z-index: 10;
}
.g-loadingMask {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}

.bg {
  background: #fafafa;
}
.blue {
  font-size: 3.59vw;
  color: #6c29eb;
}
.FC {
  color: var(--FC);
}
.paymentclass {
  font-size: 3.08vw;
  line-height: 5.13vw;
  padding-right: 3.08vw;
  position: relative;
  text-align: right;
}
.paymentLeftclass,
.paymentclassLeft36 {
  font-size: 3.08vw;
  line-height: 5.13vw;
  padding-left: 3.08vw;
  position: relative;
}
.paymentclassLeft36 {
  padding-left: 8.21vw;
}
.paymentclass:after {
  content: "";
  display: block;
  width: 0.51vw;
  height: 2.56vw;
  position: absolute;
  top: 50%;
  right: 0;
  background-color: var(--FC1);
  border-radius: 0.51vw 0 0.51vw 0;
  transform: translateY(-50%);
}
.paymentLeftclass:after {
  content: "";
  display: block;
  width: 0.51vw;
  height: 2.56vw;
  position: absolute;
  top: 50%;
  left: 0;
  background-color: var(--FC1);
  border-radius: 0.51vw 0 0.51vw 0;
  transform: translateY(-50%);
}
.paymentclassLeft36:after {
  content: "";
  display: block;
  width: 0.51vw;
  height: 2.56vw;
  position: absolute;
  top: 50%;
  left: 6.15vw;
  background-color: var(--FC1);
  border-radius: 0.51vw 0 0.51vw 0;
  transform: translateY(-50%);
}
.paymentsType0:after {
  background-color: #6C29EB;
}
.paymentsType1:after {
  background-color: #1777FF;
}
.paymentsType2:after {
  background-color: #00C250;
}
.paymentsType12:after {
  background-color: #005B7A;
}
.paymentsType13:after {
  background-color: #1B3351;
}
.paymentsType14:after {
  background-color: #FF8300;
}
.paymentsType15:after {
  background-color: #AACF39;
}
.paymentsType6:after {
  background-color: #E1222E;
}
.paymentsType17:after {
  background-color: #00BD8D;
}
.g-dropdown {
  position: relative;
  width: 100%;
}
.g-dropdown .control {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  color: #68778b;
  cursor: default;
  outline: none;
  padding: 0.51282vw 0px 0.51282vw 2.5641vw;
  transition: all 200ms ease;
  width: 100%;
  height: 6.15385vw;
  font-size: 3.07692vw;
}
.g-dropdown .arrow {
  border-color: #68778b;
  border-style: solid;
  border-width: 1px 1px 0 0;
  content: " ";
  display: block;
  position: absolute;
  right: 2.05128vw;
  top: 1.28205vw;
  width: 2.05128vw;
  height: 2.05128vw;
  transform: rotateZ(135deg);
}
.g-dropdown .menu {
  background-color: #fafafa;
  box-sizing: border-box;
  margin-top: -1px;
  max-height: 76.92308vw;
  overflow-y: auto;
  position: absolute;
  top: 100%;
  width: 100%;
  z-index: 900;
  -webkit-overflow-scrolling: touch;
  color: #ffffff;
}
.g-dropdown .menu .group > .title {
  padding: 2.05128vw 2.5641vw;
  color: #ffffff;
  font-weight: bold;
  text-transform: capitalize;
}
.g-dropdown .option {
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer;
  display: block;
  padding: 3.07692vw 0px 2.5641vw 2.5641vw;
  transition: all 0.3s ease-in-out;
}
.g-dropdown .option:last-child {
  border-bottom-right-radius: 0.51282vw;
  border-bottom-left-radius: 0.51282vw;
}
.g-dropdown .option:hover {
  background-color: #6c29eb;
}
.g-dropdown .option.selected {
  background-color: #6c29eb;
}
.g-dropdown .noresults {
  box-sizing: border-box;
  color: #ffffff;
  cursor: default;
  display: block;
  padding: 2.05128vw 2.5641vw;
}

.bg {
  background: #fafafa;
}
.blue {
  font-size: 3.59vw;
  color: #6c29eb;
}
.FC {
  color: var(--FC);
}
.paymentclass {
  font-size: 3.08vw;
  line-height: 5.13vw;
  padding-right: 3.08vw;
  position: relative;
  text-align: right;
}
.paymentLeftclass,
.paymentclassLeft36 {
  font-size: 3.08vw;
  line-height: 5.13vw;
  padding-left: 3.08vw;
  position: relative;
}
.paymentclassLeft36 {
  padding-left: 8.21vw;
}
.paymentclass:after {
  content: "";
  display: block;
  width: 0.51vw;
  height: 2.56vw;
  position: absolute;
  top: 50%;
  right: 0;
  background-color: var(--FC1);
  border-radius: 0.51vw 0 0.51vw 0;
  transform: translateY(-50%);
}
.paymentLeftclass:after {
  content: "";
  display: block;
  width: 0.51vw;
  height: 2.56vw;
  position: absolute;
  top: 50%;
  left: 0;
  background-color: var(--FC1);
  border-radius: 0.51vw 0 0.51vw 0;
  transform: translateY(-50%);
}
.paymentclassLeft36:after {
  content: "";
  display: block;
  width: 0.51vw;
  height: 2.56vw;
  position: absolute;
  top: 50%;
  left: 6.15vw;
  background-color: var(--FC1);
  border-radius: 0.51vw 0 0.51vw 0;
  transform: translateY(-50%);
}
.paymentsType0:after {
  background-color: #6C29EB;
}
.paymentsType1:after {
  background-color: #1777FF;
}
.paymentsType2:after {
  background-color: #00C250;
}
.paymentsType12:after {
  background-color: #005B7A;
}
.paymentsType13:after {
  background-color: #1B3351;
}
.paymentsType14:after {
  background-color: #FF8300;
}
.paymentsType15:after {
  background-color: #AACF39;
}
.paymentsType6:after {
  background-color: #E1222E;
}
.paymentsType17:after {
  background-color: #00BD8D;
}
.g-layer {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 200;
  transform: translate(0, 0) translateZ(0);
}
.g-layer.hide {
  transform: translate(-150%, 0) translateZ(0);
}
.g-layer.hide .layer-inner {
  opacity: 0;
  transform: translate(-50%, -50%) translateZ(0) scale(0.1, 0.1);
}
.g-layer.close .layer-inner {
  opacity: 0;
  transform: translate(-50%, -50%) translateZ(0) scale(0.1, 0.1);
}
.g-layer .layer-inner {
  width: 141.02564vw;
  background: #333c5a;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: all 0.2s cubic-bezier(0.39, 0.58, 0.57, 1);
  transform: translate(-50%, -50%) scale(1, 1) translateZ(0);
  opacity: 1;
  border-radius: 1.28205vw;
}
.g-layer.android .layer-inner {
  transform: translate(-50%, -100%) scale(1, 1) translateZ(0);
}
.g-layer .layer-loading {
  width: 76.92308vw;
  padding: 5.12821vw 0;
  text-align: center;
}
.g-layer .layer-title {
  font-size: 4.10256vw;
  text-align: center;
  color: #ffffff;
  line-height: 15.38462vw;
  background: #333c5a;
  border-top-left-radius: 1.28205vw;
  border-top-right-radius: 1.28205vw;
  border-bottom: 1px solid #424c6d;
}
.g-layer .layer-content {
  color: #ffffff;
  border-top-left-radius: 1.28205vw;
  border-top-right-radius: 1.28205vw;
}
.g-layer .g-btn {
  border: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.g-layer .g-btn-group {
  border-bottom-left-radius: 1.28205vw;
  border-bottom-right-radius: 1.28205vw;
  overflow: hidden;
}
.g-layer .showCloseBtn {
  position: absolute;
  right: 6.15385vw;
  top: 6.15385vw;
  z-index: 100;
  color: #c4cad7;
  cursor: pointer;
}
.g-border-l {
  border-left: 1px solid #ffffff;
}

.bg {
  background: #fafafa;
}
.blue {
  font-size: 3.59vw;
  color: #6c29eb;
}
.FC {
  color: var(--FC);
}
.paymentclass {
  font-size: 3.08vw;
  line-height: 5.13vw;
  padding-right: 3.08vw;
  position: relative;
  text-align: right;
}
.paymentLeftclass,
.paymentclassLeft36 {
  font-size: 3.08vw;
  line-height: 5.13vw;
  padding-left: 3.08vw;
  position: relative;
}
.paymentclassLeft36 {
  padding-left: 8.21vw;
}
.paymentclass:after {
  content: "";
  display: block;
  width: 0.51vw;
  height: 2.56vw;
  position: absolute;
  top: 50%;
  right: 0;
  background-color: var(--FC1);
  border-radius: 0.51vw 0 0.51vw 0;
  transform: translateY(-50%);
}
.paymentLeftclass:after {
  content: "";
  display: block;
  width: 0.51vw;
  height: 2.56vw;
  position: absolute;
  top: 50%;
  left: 0;
  background-color: var(--FC1);
  border-radius: 0.51vw 0 0.51vw 0;
  transform: translateY(-50%);
}
.paymentclassLeft36:after {
  content: "";
  display: block;
  width: 0.51vw;
  height: 2.56vw;
  position: absolute;
  top: 50%;
  left: 6.15vw;
  background-color: var(--FC1);
  border-radius: 0.51vw 0 0.51vw 0;
  transform: translateY(-50%);
}
.paymentsType0:after {
  background-color: #6C29EB;
}
.paymentsType1:after {
  background-color: #1777FF;
}
.paymentsType2:after {
  background-color: #00C250;
}
.paymentsType12:after {
  background-color: #005B7A;
}
.paymentsType13:after {
  background-color: #1B3351;
}
.paymentsType14:after {
  background-color: #FF8300;
}
.paymentsType15:after {
  background-color: #AACF39;
}
.paymentsType6:after {
  background-color: #E1222E;
}
.paymentsType17:after {
  background-color: #00BD8D;
}
.g-switch {
  font-size: 3.58974vw;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.65);
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  display: inline-block;
  height: 5.64103vw;
  min-width: 11.28205vw;
  line-height: 5.12821vw;
  vertical-align: middle;
  border-radius: 25.64103vw;
  border: 1px solid transparent;
  background-color: rgba(0, 0, 0, 0.25);
  transition: all 0.36s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  cursor: pointer;
}
.g-switch span {
  color: #ffffff;
  font-size: 3.07692vw;
  margin-left: 6.15385vw;
  margin-right: 1.53846vw;
  display: block;
}
.g-switch:after,
.g-switch:before {
  position: absolute;
  width: 4.61538vw;
  height: 4.61538vw;
  left: 1px;
  top: 1px;
  border-radius: 4.61538vw;
  background-color: #ffffff;
  content: " ";
  cursor: pointer;
  transition: all 0.36s cubic-bezier(0.78, 0.14, 0.15, 0.86);
}
.g-switch-checked {
  background-color: #34C759;
}
.g-switch-checked span {
  margin-left: 1.53846vw;
  margin-right: 6.15385vw;
}
.g-switch-checked:after,
.g-switch-checked:before {
  left: 100%;
  margin-left: -4.87179vw;
}

.bg {
  background: #fafafa;
}
.blue {
  font-size: 3.59vw;
  color: #6c29eb;
}
.FC {
  color: var(--FC);
}
.paymentclass {
  font-size: 3.08vw;
  line-height: 5.13vw;
  padding-right: 3.08vw;
  position: relative;
  text-align: right;
}
.paymentLeftclass,
.paymentclassLeft36 {
  font-size: 3.08vw;
  line-height: 5.13vw;
  padding-left: 3.08vw;
  position: relative;
}
.paymentclassLeft36 {
  padding-left: 8.21vw;
}
.paymentclass:after {
  content: "";
  display: block;
  width: 0.51vw;
  height: 2.56vw;
  position: absolute;
  top: 50%;
  right: 0;
  background-color: var(--FC1);
  border-radius: 0.51vw 0 0.51vw 0;
  transform: translateY(-50%);
}
.paymentLeftclass:after {
  content: "";
  display: block;
  width: 0.51vw;
  height: 2.56vw;
  position: absolute;
  top: 50%;
  left: 0;
  background-color: var(--FC1);
  border-radius: 0.51vw 0 0.51vw 0;
  transform: translateY(-50%);
}
.paymentclassLeft36:after {
  content: "";
  display: block;
  width: 0.51vw;
  height: 2.56vw;
  position: absolute;
  top: 50%;
  left: 6.15vw;
  background-color: var(--FC1);
  border-radius: 0.51vw 0 0.51vw 0;
  transform: translateY(-50%);
}
.paymentsType0:after {
  background-color: #6C29EB;
}
.paymentsType1:after {
  background-color: #1777FF;
}
.paymentsType2:after {
  background-color: #00C250;
}
.paymentsType12:after {
  background-color: #005B7A;
}
.paymentsType13:after {
  background-color: #1B3351;
}
.paymentsType14:after {
  background-color: #FF8300;
}
.paymentsType15:after {
  background-color: #AACF39;
}
.paymentsType6:after {
  background-color: #E1222E;
}
.paymentsType17:after {
  background-color: #00BD8D;
}
:global .react-tabs__tab {
  padding: 3.07692vw 4.10256vw;
  font-size: 4.10256vw;
  margin: 0 5.12821vw;
  color: #ffffff;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border: 0;
  border-bottom: 0.51282vw solid rgba(0, 0, 0, 0);
  bottom: 0;
  transition: all 0.3s ease-in-out;
}
:global .react-tabs__tab:focus {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  border-color: rgba(0, 0, 0, 0);
}
:global .react-tabs__tab:hover {
  color: #6c29eb;
}
:global .react-tabs__tab-list {
  margin: 0;
}
:global .react-tabs__tab--selected {
  background: none;
  color: #6c29eb;
  border: 0;
  border-bottom: 0.51282vw solid #6c29eb;
  border-radius: 0;
}
:global .react-tabs__tab--selected:focus {
  border-bottom: 0.51282vw solid #6c29eb;
}
:global .react-tabs__tab--selected:focus::after {
  display: none;
}

.bg {
  background: #fafafa;
}
.blue {
  font-size: 3.59vw;
  color: #6c29eb;
}
.FC {
  color: var(--FC);
}
.paymentclass {
  font-size: 3.08vw;
  line-height: 5.13vw;
  padding-right: 3.08vw;
  position: relative;
  text-align: right;
}
.paymentLeftclass,
.paymentclassLeft36 {
  font-size: 3.08vw;
  line-height: 5.13vw;
  padding-left: 3.08vw;
  position: relative;
}
.paymentclassLeft36 {
  padding-left: 8.21vw;
}
.paymentclass:after {
  content: "";
  display: block;
  width: 0.51vw;
  height: 2.56vw;
  position: absolute;
  top: 50%;
  right: 0;
  background-color: var(--FC1);
  border-radius: 0.51vw 0 0.51vw 0;
  transform: translateY(-50%);
}
.paymentLeftclass:after {
  content: "";
  display: block;
  width: 0.51vw;
  height: 2.56vw;
  position: absolute;
  top: 50%;
  left: 0;
  background-color: var(--FC1);
  border-radius: 0.51vw 0 0.51vw 0;
  transform: translateY(-50%);
}
.paymentclassLeft36:after {
  content: "";
  display: block;
  width: 0.51vw;
  height: 2.56vw;
  position: absolute;
  top: 50%;
  left: 6.15vw;
  background-color: var(--FC1);
  border-radius: 0.51vw 0 0.51vw 0;
  transform: translateY(-50%);
}
.paymentsType0:after {
  background-color: #6C29EB;
}
.paymentsType1:after {
  background-color: #1777FF;
}
.paymentsType2:after {
  background-color: #00C250;
}
.paymentsType12:after {
  background-color: #005B7A;
}
.paymentsType13:after {
  background-color: #1B3351;
}
.paymentsType14:after {
  background-color: #FF8300;
}
.paymentsType15:after {
  background-color: #AACF39;
}
.paymentsType6:after {
  background-color: #E1222E;
}
.paymentsType17:after {
  background-color: #00BD8D;
}
:global .rc-slider-rail {
  background: #2b3555;
}
:global .rc-slider-track {
  background: #6c29eb;
}
:global .rc-slider-handle {
  border: 0.51282vw solid #6c29eb;
  background: #2b3555;
}
:global .rc-slider-handle:active,
:global .rc-slider-handle:focus {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
}
:global .rc-slider-tooltip-inner {
  padding: 0;
  min-width: 10.25641vw;
  height: 7.69231vw;
  font-size: 3.07692vw;
  line-height: 7.69231vw;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  background-color: #2b3555;
  border-radius: 0px;
  box-shadow: 0 1.02564vw 2.05128vw rgba(0, 0, 0, 0.5);
}
:global .rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
  border-top-color: #2b3555;
}

.bg {
  background: #fafafa;
}
.blue {
  font-size: 3.59vw;
  color: #6c29eb;
}
.FC {
  color: var(--FC);
}
.paymentclass {
  font-size: 3.08vw;
  line-height: 5.13vw;
  padding-right: 3.08vw;
  position: relative;
  text-align: right;
}
.paymentLeftclass,
.paymentclassLeft36 {
  font-size: 3.08vw;
  line-height: 5.13vw;
  padding-left: 3.08vw;
  position: relative;
}
.paymentclassLeft36 {
  padding-left: 8.21vw;
}
.paymentclass:after {
  content: "";
  display: block;
  width: 0.51vw;
  height: 2.56vw;
  position: absolute;
  top: 50%;
  right: 0;
  background-color: var(--FC1);
  border-radius: 0.51vw 0 0.51vw 0;
  transform: translateY(-50%);
}
.paymentLeftclass:after {
  content: "";
  display: block;
  width: 0.51vw;
  height: 2.56vw;
  position: absolute;
  top: 50%;
  left: 0;
  background-color: var(--FC1);
  border-radius: 0.51vw 0 0.51vw 0;
  transform: translateY(-50%);
}
.paymentclassLeft36:after {
  content: "";
  display: block;
  width: 0.51vw;
  height: 2.56vw;
  position: absolute;
  top: 50%;
  left: 6.15vw;
  background-color: var(--FC1);
  border-radius: 0.51vw 0 0.51vw 0;
  transform: translateY(-50%);
}
.paymentsType0:after {
  background-color: #6C29EB;
}
.paymentsType1:after {
  background-color: #1777FF;
}
.paymentsType2:after {
  background-color: #00C250;
}
.paymentsType12:after {
  background-color: #005B7A;
}
.paymentsType13:after {
  background-color: #1B3351;
}
.paymentsType14:after {
  background-color: #FF8300;
}
.paymentsType15:after {
  background-color: #AACF39;
}
.paymentsType6:after {
  background-color: #E1222E;
}
.paymentsType17:after {
  background-color: #00BD8D;
}
.g-table {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #333c5a;
}
.g-table .theader {
  display: flex;
  height: 10.25641vw;
  align-items: center;
  color: #9ca5b0;
  font-size: 3.07692vw;
}
.g-table .theader div {
  flex: 1 1;
}
.g-table .theader div:first-child {
  padding: 0 0 0 5.12821vw;
}
.g-table .tbody {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid #424c6d;
}
.g-table .item {
  display: flex;
  height: 10.25641vw;
  align-items: center;
  color: #ffffff;
  border-bottom: 1px solid #424c6d;
}
.g-table .item div {
  flex: 1 1;
  white-space: nowrap;
}
.g-table .item div:first-child {
  padding: 0 0 0 5.12821vw;
}
.g-table .item div .action {
  color: #64b9fc;
}
.g-table .item:hover {
  background: #2b3555;
}
.g-table .item .grey {
  color: #9ca5b0;
}
.g-table .item .grey02 {
  color: #c4cad7;
}
.g-table .noresult {
  min-height: 102.5641vw;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
}

.bg {
  background: #fafafa;
}
.blue {
  font-size: 3.59vw;
  color: #6c29eb;
}
.FC {
  color: var(--FC);
}
.paymentclass {
  font-size: 3.08vw;
  line-height: 5.13vw;
  padding-right: 3.08vw;
  position: relative;
  text-align: right;
}
.paymentLeftclass,
.paymentclassLeft36 {
  font-size: 3.08vw;
  line-height: 5.13vw;
  padding-left: 3.08vw;
  position: relative;
}
.paymentclassLeft36 {
  padding-left: 8.21vw;
}
.paymentclass:after {
  content: "";
  display: block;
  width: 0.51vw;
  height: 2.56vw;
  position: absolute;
  top: 50%;
  right: 0;
  background-color: var(--FC1);
  border-radius: 0.51vw 0 0.51vw 0;
  transform: translateY(-50%);
}
.paymentLeftclass:after {
  content: "";
  display: block;
  width: 0.51vw;
  height: 2.56vw;
  position: absolute;
  top: 50%;
  left: 0;
  background-color: var(--FC1);
  border-radius: 0.51vw 0 0.51vw 0;
  transform: translateY(-50%);
}
.paymentclassLeft36:after {
  content: "";
  display: block;
  width: 0.51vw;
  height: 2.56vw;
  position: absolute;
  top: 50%;
  left: 6.15vw;
  background-color: var(--FC1);
  border-radius: 0.51vw 0 0.51vw 0;
  transform: translateY(-50%);
}
.paymentsType0:after {
  background-color: #6C29EB;
}
.paymentsType1:after {
  background-color: #1777FF;
}
.paymentsType2:after {
  background-color: #00C250;
}
.paymentsType12:after {
  background-color: #005B7A;
}
.paymentsType13:after {
  background-color: #1B3351;
}
.paymentsType14:after {
  background-color: #FF8300;
}
.paymentsType15:after {
  background-color: #AACF39;
}
.paymentsType6:after {
  background-color: #E1222E;
}
.paymentsType17:after {
  background-color: #00BD8D;
}
.g-radio {
  display: flex;
  align-items: center;
}
.g-radio .radio {
  width: 4.10256vw;
  height: 4.10256vw;
  background: transparent;
  border-radius: 50%;
  border: 1px solid #c4cad7;
  display: flex;
  overflow: hidden;
  justify-items: center;
  align-items: center;
  margin: 0 2.05128vw 0 0;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.g-radio .radio::after {
  display: block;
  content: " ";
  width: 2.05128vw;
  height: 2.05128vw;
  border-radius: 50%;
  margin: 0 auto;
  transition: all 0.3s ease-in-out;
}
.g-radio-checked .radio {
  border: 1px solid #6c29eb;
}
.g-radio-checked .radio::after {
  background: #6c29eb;
}
.g-radio-disabled .radio {
  background: #9ca5b0;
}
.g-radio-disabled .radio::after {
  background: none;
}
.g-radio-suffix {
  font-size: 3.58974vw;
  color: #ffffff;
}

.bg {
  background: #fafafa;
}
.blue {
  font-size: 3.59vw;
  color: #6c29eb;
}
.FC {
  color: var(--FC);
}
.paymentclass {
  font-size: 3.08vw;
  line-height: 5.13vw;
  padding-right: 3.08vw;
  position: relative;
  text-align: right;
}
.paymentLeftclass,
.paymentclassLeft36 {
  font-size: 3.08vw;
  line-height: 5.13vw;
  padding-left: 3.08vw;
  position: relative;
}
.paymentclassLeft36 {
  padding-left: 8.21vw;
}
.paymentclass:after {
  content: "";
  display: block;
  width: 0.51vw;
  height: 2.56vw;
  position: absolute;
  top: 50%;
  right: 0;
  background-color: var(--FC1);
  border-radius: 0.51vw 0 0.51vw 0;
  transform: translateY(-50%);
}
.paymentLeftclass:after {
  content: "";
  display: block;
  width: 0.51vw;
  height: 2.56vw;
  position: absolute;
  top: 50%;
  left: 0;
  background-color: var(--FC1);
  border-radius: 0.51vw 0 0.51vw 0;
  transform: translateY(-50%);
}
.paymentclassLeft36:after {
  content: "";
  display: block;
  width: 0.51vw;
  height: 2.56vw;
  position: absolute;
  top: 50%;
  left: 6.15vw;
  background-color: var(--FC1);
  border-radius: 0.51vw 0 0.51vw 0;
  transform: translateY(-50%);
}
.paymentsType0:after {
  background-color: #6C29EB;
}
.paymentsType1:after {
  background-color: #1777FF;
}
.paymentsType2:after {
  background-color: #00C250;
}
.paymentsType12:after {
  background-color: #005B7A;
}
.paymentsType13:after {
  background-color: #1B3351;
}
.paymentsType14:after {
  background-color: #FF8300;
}
.paymentsType15:after {
  background-color: #AACF39;
}
.paymentsType6:after {
  background-color: #E1222E;
}
.paymentsType17:after {
  background-color: #00BD8D;
}
:global(.rc-menu) {
  outline: none;
  list-style: none;
  border-radius: 0.76923vw;
}
:global(.rc-menu)-hidden {
  display: none;
}
:global(.rc-menu)-collapse {
  overflow: hidden;
}
:global(.rc-menu)-collapse-active {
  transition: height 0.3s ease-out;
}
:global(.rc-menu)-item-group-list {
  margin: 0;
  padding: 0;
}
:global(.rc-menu)-item-group-title {
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
  padding: 2.05128vw 2.5641vw;
}
:global(.rc-menu)-item-active,
:global(.rc-menu)-submenu-active > :global(.rc-menu)-submenu-title {
  background-color: #6c29eb;
}
:global(.rc-menu)-item-active:first-child,
:global(.rc-menu)-submenu-active > :global(.rc-menu)-submenu-title:first-child {
  border-top-left-radius: 0.76923vw;
  border-top-right-radius: 0.76923vw;
}
:global(.rc-menu)-item-active:last-child,
:global(.rc-menu)-submenu-active > :global(.rc-menu)-submenu-title:last-child {
  border-bottom-left-radius: 0.76923vw;
  border-bottom-right-radius: 0.76923vw;
}
:global(.rc-menu)-item-selected {
  transform: translateZ(0);
}
:global(.rc-menu)-submenu-selected {
  background-color: #6c29eb;
}
:global(.rc-menu) > li:global(.rc-menu)-submenu {
  padding: 0;
}
:global(.rc-menu)-horizontal:global(.rc-menu)-sub,
:global(.rc-menu)-vertical:global(.rc-menu)-sub,
:global(.rc-menu)-vertical-left:global(.rc-menu)-sub,
:global(.rc-menu)-vertical-right:global(.rc-menu)-sub {
  min-width: 15.38462vw;
  margin-top: 0;
  background: #fafafa;
  color: #ffffff;
  font-size: 3.07692vw;
  cursor: pointer;
  box-shadow: 0px 0px 1.53846vw rgba(0, 0, 0, 0.3);
}
:global(.rc-menu)-horizontal:global(.rc-menu)-sub a,
:global(.rc-menu)-vertical:global(.rc-menu)-sub a,
:global(.rc-menu)-vertical-left:global(.rc-menu)-sub a,
:global(.rc-menu)-vertical-right:global(.rc-menu)-sub a {
  color: #ffffff;
}
:global(.rc-menu)-item,
:global(.rc-menu)-submenu-title {
  margin: 0;
  position: relative;
  display: block;
  padding: 1.79487vw;
  white-space: nowrap;
}
:global(.rc-menu) > :global(.rc-menu)-item-divider {
  height: 1px;
  margin: 1px 0;
  overflow: hidden;
  padding: 0;
  line-height: 0;
  background-color: #e5e5e5;
}
:global(.rc-menu)-submenu-popup {
  position: absolute;
  z-index: 10;
}
:global(.rc-menu) .rc-menu-submenu-title .anticon,
:global(.rc-menu) .rc-menu-item .anticon {
  width: 3.58974vw;
  height: 3.58974vw;
  margin-right: 2.05128vw;
  top: -1px;
}
:global(.rc-menu)-horizontal {
  border: none;
  box-shadow: none;
}
:global(.rc-menu)-horizontal > .rc-menu-item,
:global(.rc-menu)-horizontal > .rc-menu-submenu > .rc-menu-submenu-title {
  padding: 3.84615vw 5.12821vw;
}
:global(.rc-menu)-horizontal > .rc-menu-submenu,
:global(.rc-menu)-horizontal > .rc-menu-item {
  float: left;
  border-bottom: 0.51282vw solid transparent;
}
:global(.rc-menu)-horizontal > .rc-menu-submenu-active,
:global(.rc-menu)-horizontal > .rc-menu-item-active {
  background-color: #6c29eb;
  color: rgba(255, 255, 255, 0.6);
}
:global(.rc-menu)-horizontal:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
}
:global(.rc-menu)-vertical,
:global(.rc-menu)-vertical-left,
:global(.rc-menu)-vertical-right,
:global(.rc-menu)-inline {
  padding: 3.07692vw 0;
}
:global(.rc-menu)-vertical > .rc-menu-item,
:global(.rc-menu)-vertical-left > .rc-menu-item,
:global(.rc-menu)-vertical-right > .rc-menu-item,
:global(.rc-menu)-inline > .rc-menu-item,
:global(.rc-menu)-vertical > .rc-menu-submenu > .rc-menu-submenu-title,
:global(.rc-menu)-vertical-left > .rc-menu-submenu > .rc-menu-submenu-title,
:global(.rc-menu)-vertical-right > .rc-menu-submenu > .rc-menu-submenu-title,
:global(.rc-menu)-inline > .rc-menu-submenu > .rc-menu-submenu-title {
  padding: 3.07692vw;
}
:global(.rc-menu)-vertical .rc-menu-submenu-arrow,
:global(.rc-menu)-vertical-left .rc-menu-submenu-arrow,
:global(.rc-menu)-vertical-right .rc-menu-submenu-arrow,
:global(.rc-menu)-inline .rc-menu-submenu-arrow {
  display: inline-block;
  font: normal normal normal 3.58974vw/1 iconfontshble;
  font-size: inherit;
  vertical-align: baseline;
  text-align: center;
  text-transform: none;
  text-rendering: auto;
  position: absolute;
  right: 4.10256vw;
  line-height: 1.5em;
}
:global(.rc-menu)-vertical .rc-menu-submenu-arrow:before,
:global(.rc-menu)-vertical-left .rc-menu-submenu-arrow:before,
:global(.rc-menu)-vertical-right .rc-menu-submenu-arrow:before,
:global(.rc-menu)-inline .rc-menu-submenu-arrow:before {
  content: "\E61F";
}
:global(.rc-menu)-inline .rc-menu-submenu-arrow {
  transform: rotate(90deg);
  transition: transform 0.3s;
}
:global(.rc-menu)-inline .rc-menu-submenu-open > .rc-menu-submenu-title .rc-menu-submenu-arrow {
  transform: rotate(-90deg);
}
:global(.rc-menu)-vertical:global(.rc-menu)-sub,
:global(.rc-menu)-vertical-left:global(.rc-menu)-sub,
:global(.rc-menu)-vertical-right:global(.rc-menu)-sub {
  padding: 0;
}
:global(.rc-menu)-sub:global(.rc-menu)-inline {
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
:global(.rc-menu)-sub:global(.rc-menu)-inline > .rc-menu-item,
:global(.rc-menu)-sub:global(.rc-menu)-inline > .rc-menu-submenu > .rc-menu-submenu-title {
  padding-top: 2.05128vw;
  padding-bottom: 2.05128vw;
  padding-right: 0;
}
:global(.rc-menu)-open-slide-up-enter,
:global(.rc-menu)-open-slide-up-appear {
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  transform-origin: 0 0;
  opacity: 0;
  -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
          animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
:global(.rc-menu)-open-slide-up-leave {
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  transform-origin: 0 0;
  opacity: 1;
  -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
          animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
:global(.rc-menu)-open-slide-up-enter:global(.rc-menu)-open-slide-up-enter-active,
:global(.rc-menu)-open-slide-up-appear:global(.rc-menu)-open-slide-up-appear-active {
  -webkit-animation-name: rcMenuOpenSlideUpIn;
          animation-name: rcMenuOpenSlideUpIn;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
:global(.rc-menu)-open-slide-up-leave:global(.rc-menu)-open-slide-up-leave-active {
  -webkit-animation-name: rcMenuOpenSlideUpOut;
          animation-name: rcMenuOpenSlideUpOut;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
@-webkit-keyframes rcMenuOpenSlideUpIn {
  0% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scaleY(1);
  }
}
@keyframes rcMenuOpenSlideUpIn {
  0% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scaleY(1);
  }
}
@-webkit-keyframes rcMenuOpenSlideUpOut {
  0% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scaleY(1);
  }
  100% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: scaleY(0);
  }
}
@keyframes rcMenuOpenSlideUpOut {
  0% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scaleY(1);
  }
  100% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: scaleY(0);
  }
}
:global(.rc-menu)-open-zoom-enter,
:global(.rc-menu)-open-zoom-appear {
  opacity: 0;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  transform-origin: 0 0;
  -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
          animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
:global(.rc-menu)-open-zoom-leave {
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  transform-origin: 0 0;
  -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
          animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
:global(.rc-menu)-open-zoom-enter:global(.rc-menu)-open-zoom-enter-active,
:global(.rc-menu)-open-zoom-appear:global(.rc-menu)-open-zoom-appear-active {
  -webkit-animation-name: rcMenuOpenZoomIn;
          animation-name: rcMenuOpenZoomIn;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
:global(.rc-menu)-open-zoom-leave:global(.rc-menu)-open-zoom-leave-active {
  -webkit-animation-name: rcMenuOpenZoomOut;
          animation-name: rcMenuOpenZoomOut;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
@-webkit-keyframes rcMenuOpenZoomIn {
  0% {
    opacity: 0;
    transform: scale(0, 0);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@keyframes rcMenuOpenZoomIn {
  0% {
    opacity: 0;
    transform: scale(0, 0);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@-webkit-keyframes rcMenuOpenZoomOut {
  0% {
    transform: scale(1, 1);
  }
  100% {
    opacity: 0;
    transform: scale(0, 0);
  }
}
@keyframes rcMenuOpenZoomOut {
  0% {
    transform: scale(1, 1);
  }
  100% {
    opacity: 0;
    transform: scale(0, 0);
  }
}

.up-color {
  color: var(--FC-green) !important;
}
.up-color.reverse {
  color: var(--FC-red) !important;
}

.down-color {
  color: var(--FC-red) !important;
}
.down-color.reverse {
  color: var(--FC-green) !important;
}
.bordercolor{
  border-color: transparent !important;
  color: var(--TC2) !important;
}
.up-bordercolor  {
  border-color: var(--FC-green) !important;
  color: var(--FC-green) !important;
}
.up-bordercolor.reverse {
  border-color: var(--FC-red) !important;
  color: var(--FC-red) !important;
}

.down-bordercolor {
   border-color: var(--FC-red) !important;
  color: var(--FC-red) !important;
 
}
.down-bordercolor.reverse {
  border-color: var(--FC-green) !important;
  color: var(--FC-green) !important;
}
.up-bgcolor {
  background: var(--FC-green) !important;
  color: var(--FC-white) !important;
}
.up-bgcolor.reverse {
  background: var(--FC-red) !important;
}

.down-bgcolor {
  background: var(--FC-red) !important;
  color: var(--FC-white) !important;
}
.down-bgcolor.reverse {
  background: var(--FC-green) !important;
}

/* 数字字体要求 */
.number-font {
  font-family: 'Urbanist-Medium' !important;
}

.marquee {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.marquee div {
  display: block;
  width: 200%;
  height: 100%;

  position: absolute;
  overflow: hidden;

  -webkit-animation: marquee 15s linear infinite;

          animation: marquee 15s linear infinite;
}
.num-font {
  font-family: 'Urbanist-Regular' !important;
}
.num-font-medium {
  font-family: 'Urbanist-Medium' !important;
}
@-webkit-keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}
@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}
.side_type {
  width: 27.69231vw;
}
@media screen and (max-width: 1446px){
  .side_type {
    width: 82px;
  }
}
@media screen and (max-width: 1366px){
  .side_type {
    width: 72px;
  }
}
.MuiPaper-root.common-paper{
  background: var(--PB);
  color: var(--TC1) ;
}
.MuiButton-label .MuiButton-endIcon{
  margin-left: 0;
}
/* .banner_img.dark::before{
    background: linear-gradient( 270deg, rgba(9,10,12,0) 0%, rgba(9,10,12,0.5) 39%, #090A0C 93%);
}

.banner_img.light::before{
    background: linear-gradient( 270deg, rgba(250,250,250,0) 0%, rgba(250,250,250,0.5) 39%, #FAFAFA 93%);
}

.banner_img.dark::after{
    background: linear-gradient( 90deg, rgba(9,10,12,0) 0%, #090A0C 100%);
}
.banner_img.light::after{
    background: linear-gradient( 90deg, rgba(250,250,250,0) 0%, #FAFAFA 100%);
} */