@charset "UTF-8";
body {
  background: #fff; }

.news-container {
  width: 100%;
  margin: 0 auto; }

.news-list {
  width: 100%;
  margin-left: 0;
  height: auto;
  overflow: auto;
  margin-bottom: 50px;
  position: sticky;
  top: 80px; }
  .news-list li {
    height: 120px;
    padding: 15px;
    margin-right: 10px;
    position: relative;
    cursor: pointer; }
    .news-list li.active {
      background: #f7f7f7; }
      .news-list li.active .title {
        color: #ff9a0c; }
      .news-list li.active .detail {
        color: #ff9a0c;
        background: url(../../images/arrow-orage.png) 90% 50% no-repeat;
        background-size: 18px 13px; }
    .news-list li .cover {
      width: 120px;
      height: 120px;
      overflow: hidden;
      position: absolute;
      left: 15px;
      top: 15px; }
    .news-list li img {
      width: 120px;
      height: 120px;
      object-fit: cover; }
    .news-list li .title {
      position: absolute;
      left: 140px;
      top: 15px;
      font-size: 14px;
      line-height: 26px;
      width: 220px; }
    .news-list li .date {
      font-size: 12px;
      position: absolute;
      left: 140px;
      top: 80px;
      line-height: 14px;
      display: flex;
      flex-direction: row;
      align-items: center; }
      .news-list li .date .spot {
        width: 4px;
        height: 4px;
        background: #ff9a0c;
        border-radius: 50%;
        margin-right: 5px; }
    .news-list li .detail {
      position: absolute;
      right: 15px;
      bottom: 20px;
      width: 80px;
      font-size: 12px;
      background: url(../../images/arrow.png) 90% 50% no-repeat;
      background-size: 18px 13px; }
      .news-list li .detail img {
        width: 20px;
        height: 12px;
        top: 50%;
        margin-top: -6px;
        left: auto;
        right: 20px; }
    .news-list li:hover {
      background: #f7f7f7; }

.news-list::-webkit-scrollbar {
  width: 5px;
  height: 5px; }

.news-detail img {
  width: 100%;
  margin: 10px auto;
  border-radius: 5px; }

/*正常情况下滑块的样式*/
.news-list::-webkit-scrollbar-thumb {
  background-color: rgba(255, 154, 12, 0.2);
  border-radius: 10px;
  -webkit-box-shadow: inset1px1px0rgba(0, 0, 0, 0.1); }

/*鼠标悬浮在该类指向的控件上时滑块的样式*/
.news-list:hover::-webkit-scrollbar-thumb {
  background-color: rgba(255, 154, 12, 0.4);
  border-radius: 10px;
  -webkit-box-shadow: inset1px1px0rgba(0, 0, 0, 0.1); }

/*鼠标悬浮在滑块上时滑块的样式*/
.news-list::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 154, 12, 0.8);
  -webkit-box-shadow: inset1px1px0rgba(0, 0, 0, 0.1); }

/*正常时候的主干部分*/
.news-list::-webkit-scrollbar-track {
  border-radius: 10px;
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0);
  background-color: white;
  border-right: 1px solid #ff9a0c; }

/*鼠标悬浮在滚动条上的主干部分*/
.news-list::-webkit-scrollbar-track:hover {
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.4);
  background-color: rgba(0, 0, 0, 0.01); }

.news-info-con {
  padding: 30px 5%;
  height: 100%;
  width: 90%;
  position: fixed;
  top: 80px;
  left: 0;
  background: #fff;
  overflow: hidden;
  overflow-y: auto;
  z-index: 4; }

.news-info .news-detail {
  padding-bottom: 150px; }

.close {
  position: fixed;
  height: 30px;
  font-size: 12px;
  background: #ff9a0c;
  color: #fff;
  width: 100%;
  z-index: 5;
  top: 60px;
  left: 0;
  text-indent: 20px;
  line-height: 30px; }

.news-con {
  display: flex;
  flex-direction: row; }

.news-title {
  line-height: 1.5rem;
  font-size: 1rem; }

.news-date {
  line-height: 80px;
  font-size: 14px;
  color: #ff9a0c; }

.news-detail {
  font-size: 14px;
  line-height: 30px;
  color: #333; }