.ys_container #wrapper {
  background-color: #fff; }

.note-header {
  height: 0.5rem;
  border-bottom: 1px solid #e1e1e1; }

.note-header .note-tab {
  position: relative;
  height: 100%;
  text-align: center;
  line-height: 0.5rem;
  padding: 0 0.12rem; }

.note-header .note-tab .title {
  font-size: 0.2rem;
  font-weight: 300;
  color: #323232; }

.futures {
  width: 100%;
  background: #fff; }

.futures ul {
  width: 100%;
  padding: 0 .16rem; }

.futures ul li {
  width: 50%;
  padding: 0.13rem .16rem;
  font-size: 0.16rem;
  overflow: hidden; }

.futures ul li:nth-child(2n-1) {
  border-right: 1px solid #F3F6FB;
  border-bottom: 1px solid #F3F6FB;
  padding-left: 0; }

.futures ul li:nth-child(2n) {
  border-bottom: 1px solid #F3F6FB;
  padding-right: 0; }

.futures ul li span {
  height: 0.22rem;
  line-height: .22rem; }

.futures ul li span.cl-red {
  color: #D7000F; }

.futures ul li span.cl-gray {
  color: #121C32; }

.futures ul li span.cl-black {
  color: #121C32; }

.futures ul li span.cl-green {
  color: #1F995C; }

.futures ul li .wss-type-down {
  background: #1F995C; }

.futures ul li .wss-type-up {
  background: #D7000F; }

.futures ul li span.content-name {
  text-align: left; }

.futures ul li span.content-val {
  text-align: right; }

.futures-login-tip {
  position: relative;
  display: flex;
  align-items: center;
  height: 0.4rem;
  padding: 0 0.16rem;
  background: rgba(228, 142, 19, 0.07);
  color: #E48E13;
  font-size: 0.12rem; }
  .futures-login-tip .futures-login-tip-icon {
    width: 0.14rem;
    height: 0.14rem;
    margin-right: 0.05rem;
    border-radius: 50%;
    border: 1px solid #F0B24A;
    position: relative; }
    .futures-login-tip .futures-login-tip-icon::before {
      content: "!";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-60%, -56%);
      font-size: 0.12rem;
      color: #F0B24A; }
  .futures-login-tip .futures-login-tip-login {
    text-decoration: underline; }

.futures-offline-toast {
  position: fixed;
  left: 50%;
  top: 20%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  padding: 0.06rem 0.08rem;
  min-height: 0.44rem;
  max-width: 90%;
  background: rgba(0, 0, 0, 0.75);
  border-radius: 0.08rem;
  color: #fff;
  font-size: 0.12rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); }
  .futures-offline-toast .futures-offline-toast-icon {
    flex-shrink: 0;
    width: 0.16rem;
    height: 0.16rem;
    margin-right: 0.04rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.55a11 11 0 0 1 14.08 0'/%3E%3Cpath d='M1.42 9a16 16 0 0 1 21.16 0'/%3E%3Cpath d='M8.53 16.11a6 6 0 0 1 6.95 0'/%3E%3Cline x1='12' y1='20' x2='12.01' y2='20'/%3E%3Cline x1='2' y1='2' x2='22' y2='22'/%3E%3C/svg%3E") center/contain no-repeat; }
  .futures-offline-toast .futures-offline-toast-refresh {
    padding: 0;
    font-size: inherit;
    color: #fff;
    background: transparent;
    border: 0;
    cursor: pointer;
    vertical-align: baseline; }
  .futures-offline-toast .futures-offline-toast-close {
    flex-shrink: 0;
    width: 0.16rem;
    height: 0.16rem;
    margin-left: 0.1rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    position: relative; }
    .futures-offline-toast .futures-offline-toast-close::before, .futures-offline-toast .futures-offline-toast-close::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0.14rem;
      height: 1px;
      background: #fff; }
    .futures-offline-toast .futures-offline-toast-close::before {
      transform: translate(-50%, -50%) rotate(45deg); }
    .futures-offline-toast .futures-offline-toast-close::after {
      transform: translate(-50%, -50%) rotate(-45deg); }