@subject-maxwidth:1460px;
@subject-minwidth:1220px;
@font-face {
  font-family: 'iconfont';
  src: url('../../iconfont/iconfont.eot');
  src: url('../../iconfont/iconfont.eot?#iefix') format('embedded-opentype'),
  url('../../iconfont/iconfont.woff') format('woff'),
  url('../../iconfont/iconfont.ttf') format('truetype'),
  url('../../iconfont/iconfont.svg#iconfont') format('svg');
}
*{
  margin:0;
  padding:0;
  list-style: none;
  border:none;
  font-style: normal;
}
html{
  width: 100%;
  min-width: @subject-minwidth;
  font-family:"Source Han Sans SC","HanHei SC","PingFang SC","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}
img{
  display:block;
}
a{
  text-decoration: none;
  color: #333;
}
.iconfont{
  font-family:"iconfont" !important;
  font-size:14px;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
.screen-box{
  font-size: 14px;
  background: #f1f1f1;
  padding: 20px 0;
  .screen-content-box{
    width: 1220px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #ccc;
    padding: 5px 0;
    div:after{
      content: '';
      display: block;
      clear: both;
    }
    div{
      padding-left: 20px;
      span{
        float: left;
        line-height: 40px;
      }
      ul{
        float: left;
        li{
          float: left;
          padding: 6px 0;
          a{
            display: block;
            line-height: 26px;
            padding: 0 12px;
            margin-left: 10px;
          }
          a:hover{
            color: #fff;
            background: #f39800;
          }
          .all-btn{
            color: #fff;
            background: #f39800;
          }
        }
      }
      ul:after{
        content: '';
        display: block;
        clear: both;
      }
    }
  }
}
.result-box{
  font-size: 14px;
  background: #f1f1f1;
  padding-bottom: 30px;
  .result-content-box{
    width: 1220px;
    box-sizing: border-box;
    margin: 0 auto;
    border: 1px solid #ccc;
    background: #fff;
    padding: 0 12px 20px;
    .result-content-title:after{
      content: '';
      display: block;
      clear: both;
    }
    .result-content-title{
      border-bottom: 1px solid #ccc;
      padding: 10px 0 10px 6px ;
      div{
        span{
          margin-right: 45px;
          position: relative;
        }
      }
      .result-content-title-left{
        float: left;
        span{
          i{
            display: inline-block;
            position: absolute;
            top: -3px;
            margin-left: 2px;
            font-size: 20px;
          }
        }
      }
      .result-content-title-right{
        float: right;
        span{
          margin: 0;
          i{
            color: #f39800;
            font-size: 18px;
          }
        }
      }
    }
    .result-content-column{
      border-bottom: 1px solid #ccc;
      padding: 22px 0;
      ul:after{
        content: '';
        display: block;
        clear: both;
      }
      ul{
        li{
          float: left;
          font-size: 16px;
          text-align: center;
        }
        .column-name{
          width: 406px;
          margin:0 20px;
        }
        .column-time{
          width: 80px;
          margin:0 32px;
        }
        .column-source{
          width: 182px;
          margin:0 20px;
        }
        .column-area{
          width: 80px;
          margin:0 40px;
        }
        .column-countdown{
          width: 120px;
          margin: 0 20px;
        }
      }
    }
    .result-content-line{
      ul{
        li:hover{
          background: #f1f1f1;
          .names{
            color: #f39800;
          }
        }
        li{
          border-bottom: 1px dashed #ccc;
          padding: 15px 6px;
          line-height: 30px;
          a{
            display: inline-block;
            line-height: 30px;
          }
          span{
            display: inline-block;
          }
          .reds{
            background: #ffe7e7;
            border: 1px solid #f24645;
            color: #f24645;
          }
          .greens{
            background: #efffea;
            border: 1px solid #2abf01;
            color: #2abf01;
          }
          .blues{
            background: #def1ff;
            border: 1px solid #2fa4ff;
            color: #2fa4ff;
          }
          .icons{
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            display: inline-block;
            position: relative;
            width: 30px;
            height: 20px;
          }
          .names{
            width: 406px;
            margin-right: 28px;
            margin-left: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: bottom;
          }
          .times{
            width: 80px;
            margin-right: 50px;
            text-align: center;
          }
          .sources{
            width: 196px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: bottom;
            margin-right: 45px;
            text-align: center;
          }
          .areas{
            width: 100px;
            text-align: center;
            margin-right: 45px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: bottom;
            white-space:nowrap;
            text-overflow:ellipsis;
            overflow:hidden;
          }
          .countdowns{
            width: 120px;
            text-align: center;
            i{
              color: #f39800;
            }
          }
        }
      }
    }
    .result-content-paging{
      #paging{
        text-align: center;
        padding-top: 22px;
      }
    }
  }
}