@charset "UTF-8";
/*   报价板块    */
.ys_container {
  position: fixed;
  display: block;
  top: 0;
  bottom: 0; }

.main {
  width: 100%;
  position: relative; }
  .main .cl-green {
    color: #1F995C; }
  .main .cl-black {
    color: #121C32; }
  .main .cl-red {
    color: #D7000F; }
  .main .cl-gray {
    color: #9A9DA5; }
  .main .bg-green {
    background-color: #5ab446;
    font-size: 0.16rem;
    text-align: center;
    height: 0.3rem;
    line-height: 0.3rem;
    width: 80%;
    color: #fff;
    float: right;
    border-radius: 0.05rem; }
  .main .bg-black {
    background-color: #999999;
    font-size: 0.16rem;
    text-align: center;
    height: 0.3rem;
    line-height: 0.3rem;
    width: 80%;
    color: #fff;
    float: right;
    border-radius: 0.05rem; }
  .main .bg-red {
    background-color: #fe473c;
    font-size: 0.16rem;
    text-align: center;
    height: 0.3rem;
    line-height: 0.3rem;
    width: 80%;
    color: #fff;
    float: right;
    border-radius: 0.05rem; }

.hot-spot-ad .spot-ad {
  display: block;
  width: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding-bottom: 25%; }

.main {
  background-color: #fff; }
  .main .nav-instrument {
    width: 2.18rem;
    height: .32rem;
    line-height: .32rem;
    border-radius: 0.2rem;
    margin: auto;
    padding: .13rem 0;
    box-sizing: content-box; }
    .main .nav-instrument div {
      float: left;
      height: 100%;
      width: 50%;
      font-size: .15rem;
      text-align: center;
      background: #F7F8FA;
      color: #808595; }
      .main .nav-instrument div.active {
        background-color: rgba(215, 0, 15, 0.0675);
        color: #D7000F; }

.main .instrument-spot {
  background-color: #F7F6F8; }

.main .main-nav {
  height: 0.4rem;
  line-height: 0.4rem;
  padding: 0 .16rem;
  font-size: .13rem;
  color: #9A9DA5;
  border-bottom: 1px solid #F3F6FB;
  background-color: #ffffff; }
  .main .main-nav div {
    width: 30%;
    text-align: right;
    white-space: nowrap;
    position: relative; }
    .main .main-nav div.nav-one {
      width: 40%;
      text-align: left; }
    .main .main-nav div.nav-two {
      width: 30%;
      text-align: right; }
    .main .main-nav div.nav-four {
      padding-right: .08rem; }
    .main .main-nav div .more {
      position: absolute;
      right: 0;
      bottom: 0.07rem;
      width: 00.1rem;
      height: 00.1rem;
      background: url(../../images/open-lists.png) center no-repeat;
      background-size: .06rem .06rem; }

.main .main-title {
  margin-bottom: .06rem; }
  .main .main-title .main-header {
    width: 100%;
    padding: 0 .15rem;
    height: .44rem;
    line-height: .44rem;
    color: #121C32;
    background-color: #fff;
    font-size: 0.13rem;
    position: relative; }
    .main .main-title .main-header .main-header-icon {
      position: absolute;
      width: 0.23rem;
      height: 0.23rem;
      right: 0.12rem;
      top: 0.11rem;
      transform: rotate(-180deg);
      transition: all 0.5s; }

.main .main-price-content {
  display: none; }

.main .details {
  padding: 0.1rem 0.12rem;
  line-height: 0.18rem;
  font-size: 0.12rem;
  color: #999;
  border-bottom: 1px solid #e1e1e1; }

.main .main_title_active .main-header span {
  transform: rotate(0deg); }

.main .main_title_active .main-price-content {
  display: block; }

.main .main-content {
  width: 100%;
  position: relative; }
  .main .main-content li {
    color: #121C32;
    border-bottom: 1px solid #F3F6FB;
    padding: 0.13rem 0.16rem;
    white-space: nowrap;
    background-color: #fff; }
    .main .main-content li h2 {
      height: 0.22rem !important;
      line-height: 0.22rem !important;
      margin-bottom: .06rem; }
      .main .main-content li h2 .content-title {
        font-size: .16rem;
        font-weight: 500;
        max-width: 60%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap; }
      .main .main-content li h2 .content-time,
      .main .main-content li h2 .content-unit {
        padding-left: 0.09rem;
        font-size: 0.13rem; }
    .main .main-content li .content-one {
      width: 40%;
      text-align: left; }
      .main .main-content li .content-one .content-price {
        font-size: .16rem;
        line-height: .22rem; }
    .main .main-content li .content-two {
      width: 30%;
      text-align: right; }
      .main .main-content li .content-two .content-average {
        font-size: .16rem;
        line-height: .22rem; }
    .main .main-content li .content-four {
      width: 30%;
      text-align: right; }
      .main .main-content li .content-four .change-value, .main .main-content li .content-four .change-rate {
        font-size: .16rem;
        line-height: .22rem; }
    .main .main-content li .content-origin {
      font-size: 0.12rem;
      color: #666666;
      font-weight: 300; }

.main .futures-title {
  height: 0.4rem;
  line-height: 0.4rem;
  padding: 0 .16rem;
  font-size: .13rem;
  color: #9A9DA5;
  border-bottom: 1px solid #F3F6FB;
  background-color: #fff; }
  .main .futures-title div {
    white-space: nowrap;
    position: relative; }
    .main .futures-title div.nav-one {
      width: 35%;
      text-align: left; }
    .main .futures-title div.nav-two {
      width: 15%;
      text-align: right; }
    .main .futures-title div.nav-three {
      width: 24%;
      text-align: right;
      padding-right: .08rem; }
    .main .futures-title div.nav-four {
      width: 26%;
      text-align: right;
      padding-right: .08rem; }
    .main .futures-title div .more {
      position: absolute;
      right: 0;
      bottom: 0.07rem;
      width: 00.1rem;
      height: 00.1rem;
      background: url(../../images/open-lists.png) center no-repeat;
      background-size: .06rem .06rem; }

.main .futures-content {
  width: 100%;
  position: relative; }
  .main .futures-content li {
    white-space: nowrap;
    padding: 0 .16rem; }
    .main .futures-content li .content-wrap {
      border-bottom: 1px solid #F3F6FB;
      padding: .13rem 0; }
      .main .futures-content li .content-wrap div {
        height: .22rem;
        line-height: .22rem;
        font-size: .16rem;
        font-weight: 500; }
        .main .futures-content li .content-wrap div.content-one {
          width: 35%;
          text-align: left;
          color: #121C32;
          display: flex;
          align-items: center;
          gap: 2px; }
        .main .futures-content li .content-wrap div.content-two {
          width: 15%;
          text-align: right; }
        .main .futures-content li .content-wrap div.content-three {
          width: 24%;
          text-align: right; }
        .main .futures-content li .content-wrap div.content-four {
          width: 26%;
          text-align: right;
          font-weight: 400; }
    .main .futures-content li.wss-type-down {
      background: rgba(31, 153, 92, 0.0339); }
    .main .futures-content li.wss-type-up {
      background: rgba(215, 0, 15, 0.0339); }

.metal-ad {
  display: flex;
  justify-content: center;
  text-align: center;
  background: #fff;
  padding: 10px 0; }
  .metal-ad .single {
    position: relative;
    width: 320px; }
    .metal-ad .single img {
      width: 320px;
      height: 60px; }
    .metal-ad .single .ad_position {
      width: 24px;
      height: 14px;
      position: absolute;
      right: 2px;
      bottom: 2px; }

/*   直播板块    */
.live-top {
  background: #fff;
  padding: .17rem .16rem;
  position: relative;
  border-bottom: 1px solid #f3f6fb;
  margin-top: .06rem;
  display: flex;
  align-items: center; }
  .live-top .title-line {
    width: 3px;
    height: 16px;
    background: #D7000F; }
  .live-top .title {
    margin-left: 8px;
    font-size: .16rem;
    color: #D7000F; }

.price-top {
  margin-top: 0;
  padding-top: 0; }

.top-no-morgin {
  margin-top: 0; }