* ,h1, h2, h3, h4, h5, h6,p{
    padding:0;
    margin:0;
}
a{
    color:#333;
    text-decoration:none;
}
.article-main{
    width:1000px;
    margin:0 auto;
}
.flex {
    display:flex;
}
.justify-between{
    justify-content:space-between;
}
.search-top{
    padding:19px 27px 10px;
}

.justify-start {
	justify-content: flex-start;
}

.justify-end {
	justify-content: flex-end;
}

.justify-center {
	justify-content: center;
}

.search-main{
    width:472px;
    border:1px solid #E4E4E4;
    border-radius:20px;
    background-color:#fff;
    padding:4px  4px 4px 24px; 
    margin-left:90px;
     box-sizing: border-box;
}
.search-main .iconfont {
    color:#999;
    margin-right:12px;
}
.search-main input{
    border:0;
        width: calc(100% - 40px);
}
.search-btn{
    width:60px;
    height:32px;
    text-align:center;
    line-height:32px;
    background-color:#ff9000;
    color:#fff;
    font-size:16px;
    border-radius:17px;
    cursor:pointer;
}
.flex-sub {
	flex: 1;
}


.flex-direction {
	flex-direction: column;
}

.flex-wrap {
	flex-wrap: wrap;
}

.align-start {
	align-items: flex-start;
}

.align-end {
	align-items: flex-end;
}

.align-center {
	align-items: center;
}

.article-list{
    background-image:url(../images/article/article-bor.png);
    background-position:top center;
    background-repeat:no-repeat;
}
.list-left{
    width:166px;    
    margin-right:17px;
}

.left-item{
    height:69px;
    line-height:69px;
    text-align:center;
    font-size:22px;
    color:#333333;
    border-bottom:1px solid rgba(216, 216, 216, 0.5);
    border-right:1px solid rgba(216, 216, 216, 0.5);
    cursor: pointer;
}

.left-item.active{
    color:#FF9000;
    font-weight:bold;
}
.right-title h1{
    color:#333333;
    font-size:18px;
    padding-bottom:6px;
}
.right-title p{
    color:#999;
    font-size:14px;
    -webkit-line-clamp:2;
    display: -webkit-box;
    -webkit-box-orient:vertical;   
    overflow:hidden; 
    text-overflow: ellipsis;
}

.right-img{
    width:78px;
    margin-left:12px;
}
.right-img img{
    border-radius:100%;
    width: 100%;
}
.right-item{
    padding:16px 0;
    border-bottom:1px dotted rgba(216, 216, 216, 0.5);
    cursor:pointer;
}

.page-btn{
    background-color:#FF9000;
    width:86px;
    height:30px;
    line-height:30px;
    text-align:center;
    border-radius:15px;
    color:#FFFFFF;
    font-size:16px;
     cursor:pointer;
    border:1px solid #FF9000;
}
.page-btn.disable {
    background-color:#F5F5F5;
    border:1px solid #DBDBDB;
     color:#333;
}
.article-page{
    margin-bottom:60px;
}
.page-total{
    margin-left:15px;
    margin-right:15px;
}
.page-total input{
    border:0;
    border-bottom:1px solid #FF9000;
    width:49px;
    text-align:center;
    background-color:#f8f8f8;
}
.article-detail{
    margin:20px 0;
}
.detail-img{
    width:154px;
}
.detail-img img{
    width:100%;
}
.detail-title{
    margin-left:12px;
}
.detail-title h1{
    color:#333;
    font-size:22px;
    padding-bottom:8px;
    min-height:60px;
}
.detail-title span{
    color:#999;
    font-size:12px; 
}
.list-right{
    padding-bottom:70px;
}


.detail-main img{
    max-width:100%
}

@media screen and (max-width:1024px) {
   .article-main{
       width:96%
   }
}

@media screen and (max-width:768px) {
  .search-top.flex,.article-list.flex,.article-page.flex{
      display:block;
  }
  .search-main{
      margin-left:0;
      width:100%;
      margin-top:20px;
      padding-left:10px;
  } 
  .search-main .flex-sub{
      flex:auto

  }
  .list-left{
      width:100%;
          display: flex;
    flex-flow: wrap;
  }
  .left-item{
      height: 35px;
    line-height: 35px;
    font-size:18px;
    width: 20%;
  }
  .detail-img{
    width:100px;
}
  .detail-title h1{
      font-size:14px
  }
 .page-btn{
     margin:10px auto;
  }
 .page-total{
     text-align:center;
 }
 .list-right{
     padding-bottom:30px;
 }
 .article-page{
        margin-bottom:30px;
 }
}