.newest-page {
  padding: 0 50px 30px 50px;
  box-sizing: border-box;
  :global {
    .content-chart {
      height: 365px;
    }
    .content-none {
      text-align: center;
      padding: 50px 0;
    }
    .span-content {
      position: relative;
      .span-label {
        background: #5cdcf6;
        color: #ffffff;
        font-size: 12px;
        padding: 0 5px;
        border-radius: 5px;
        -moz-transform: scale(0.8);
        -webkit-transform: scale(0.8);
        -o-transform: scale(0.8);
        transform: scale(0.8);
        position: absolute;
        top: -10px;
        right: -30px;
      }
    }
  }
}
.showmore-btn {
  display: block;
  text-align: center;
  font-size: 18px;
  margin: 35px auto;
}
.login-text {
  color: #faa12f;
}
.jy-rank-wrapper {
  background: #f0f2f5;
  border-radius: 5px;
  :global {
    .jy-rank-content {
      .jy-rank-article {
        border-bottom: 2px dashed #dddddd;
        display: flex;
        align-items: flex-start;
        padding: 10px;
        &:last-child {
          border-bottom: none;
        }
        .jy-article {
          flex: 1;
          .jy-link-art {
            color: #000000;
          }
          .art-title {
            display: inline-block;
            margin-right: 10px;
            &:hover {
              color: #faa12f;
            }
          }
          .jy-otherlink {
            color: #faa12f;
            margin-right: 10px;
            cursor: pointer;
          }
        }
      }
    }
  }
}

.newest-top-banner {
  height: 117px;
  margin-bottom: 20px;
  width: 100%;
  display: flex;
  :global {
    .newest-banner-box {
      // background: rgba($color: #000000, $alpha: 0.5);
      border-radius: 8px;
      overflow: hidden;
    }
    .banner-t1 {
      width: 100%;
      display: inline-block;
      box-sizing: border-box;
    }
    .banner-t2 {
      width: calc(60% - 10px);
      margin-right: 10px;
      display: inline-block;
      box-sizing: border-box;
    }
    .banner-right-t2 {
      width: calc(40% - 10px);
      margin-left: 10px;
      display: inline-block;
    }
    .banner-right-t3 {
      width: calc(50% - 10px);
      display: inline-block;
    }
  }
}
.newestindex-label-wrapper {
  background: #ffffff;
  border-radius: 47px;
  padding: 10px;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  :global {
    .newestindex-label-item {
      padding: 6px 20px;
      background: #F6F6F6;
      border-radius: 100px;
      margin: 0 10px;
      cursor: pointer;
      &:hover {
        background: #faa12f;
        color: #ffffff;
      }
    }
    .act-newestindex-label {
      background: #faa12f;
      color: #ffffff;
    }
    .newestindex-label-theme-item {
      padding: 6px 20px;
      background: #ffffff;
      border-radius: 8px;
      margin: 0 20px 10px 0;
      line-height: 22px;
      &:hover {
        background: #ffecbf;
        color: #e58204;
        cursor: pointer;
      }
    }
    .act-newestindex-theme-label {
      background: #ffecbf;
      color: #e58204;
    }
  }
}
.fixed-column-wrapper {
  position: fixed;
  bottom: 108px;
  right: 24px;
  z-index: 99;
  width: 40px;
  height: 40px;
  background: linear-gradient(180deg, #404040 0%, #131313 100%);
  color: #ffc961;
  font-size: 12px;
  border-radius: 50%;
  padding: 4px 8px;
  cursor: pointer;
  &:hover {
    :global {
      .fixed-column-close {
        display: block;
      }
    }
  }
  :global {
    .fixed-column-close {
      display: none;
      position: absolute;
      top: -8px;
      right: -6px;
      width: 14px;
      height: 14px;
    }
  }
}

// .newest-permission-wrapper {
//   height: 34px;
//   display: inline-flex;
//   justify-content: flex-start;
//   align-items: center;
//   border-radius: 100px;
//   background: #dcdfe6;
//   margin-bottom: 10px;
//   :global {
//     .newest-permission-item {
//       min-width: 96px;
//       line-height: 34px;
//       padding: 0 20px;
//       text-align: center;
//       height: 100%;
//       border-radius: 100px;
//       cursor: pointer;
//     }
//     .newest-act-permission {
//       background: #FAA12F;
//       color: #ffffff;
//     }
//   }
// }

@media screen and (max-width: 1024px) {
  .newest-page {
    padding: 0 20px 20px 20px;
  }
}
@media (max-width: 800px) {
  .newest-page {
    :global {
      .my-masonry-grid {
        margin-left: -15px;
      }
      .my-masonry-grid_column {
        padding-left: 15px;
      }
      .content-item {
        margin: 20px 5px;
      }
    }
  }
}
