.news{  max-width: 1600px; margin: 10px auto; position: relative;   display: flex; align-items: flex-start; padding: 10px; }

.news-type{ flex: 1; max-width: 15%; margin-left: 20px;  background: #FFFFFF; }
.news-type ul{padding: 20px 0px;}
.news-type ul li{   }

.news-type ul li a{ display: block; padding:10px 20px ;}

.news-type ul li.on { background:#68B88E; ; }
.news-type ul li.on a{color: #FFFFFF!important}

.news-type-back{display:none}
.news-type-back a{ padding:10px 20px!important;  }
.news-type-back a i{   margin: 0px; padding: 0px; display: block; }

.news-list{ flex: 3; display: flex; flex-wrap: wrap; align-items:flex-start; width: 100%; margin:  -8px -8px;}

.news-item{  width: 25%; padding: 8px;  }
.news-block{ display: block; background: #FFFFFF;border-radius: 5px; overflow: hidden;; }
.news-photo .square{padding-top: 60%;  }
.news-photo:hover .square > *{ width: 120% !important;	height: 120% !important; margin-top: -10%;}

.news-info{ padding: 15px; }
.news-info .news-title{flex:1; font-size: 13pt; font-weight: bold; line-height: 150%;  display: inline-block; margin-bottom: 10px;}
.news-info .icon-text{  color: #999999; font-size: 9pt;  }
.news-info .icon-text i{  color: #999999; font-size: 12pt;  }
.news-info .icon-text span{  margin: 0 5px; ;}

/*news-show*/
.news-show{flex: 3;  width: 100%; background: #FFFFFF; }
.news-show-content .news-function{ margin: 10px 0px; }
.news-show-content .icon-text{ font-size: 12pt;  }
.news-show-content .icon-text i{ font-size: 14pt;  }
.news-show-content .icon-text span{  margin: 0 10px; ;}

.news-show-image{ max-height: 500px; overflow: hidden; display: flex; align-items: center;}
 
.news-show-content .title{ font-size: 16pt; padding-left: 0px;;}
.news-content{ padding: 0px 15px; display: block; margin-bottom: 15px; min-height: 500px;}


.news-recomand{ padding: 20px; border-top: 1px solid #cccccc; margin-top: 10px; background: #333333;}
.news-recomand > h3{ font-size: 16pt; font-weight: bold; padding: 10px 0px 20px 10px; color: #FFFFFF;}


@media screen and (max-width:1200px) {  
    
    .news-list{  margin:  -5px;}
    .news-item{  width: 33.3333%; padding: 5px;  }
    
}
@media screen and (max-width:900px) {  
    
    .news-list{  margin:  -5px;}
    .news-item{  width: 50%; padding: 5px;  }
    
}

@media screen and (max-width:768px) {  
     


    .news{  margin: 0px auto;   display: flex; flex-wrap: wrap; padding: 0px;   }

    .news-type{   max-width: none; width: 100%; margin-left: 0px;order: 1;  }
    .news-type ul{padding: 0px 0px; display: flex; flex-wrap: nowrap;overflow-y: auto;}
 
    .news-type ul li a{ display: block; padding:15px 25px ; white-space: nowrap;}
    
    .news-type-back { display: block;  border-right: 1px solid #cccccc; }
    .news-type-back a{ padding:15px!important; }

    .news-list{  min-width: 100%;  order: 2;}
    .news-list{  margin:  0px;padding: 5px;}
    .news-item{  width: 50%; padding: 5px;  }

    

    .news-show{  min-width: 100%;  order: 2; margin: 10px 0px;;   }
}
 
@media screen and (max-width:568px) {
    .news-item{  width: 100%;  }  
    .news-item .news-block{ display: flex; flex-wrap: nowrap; align-items: center;  }

    .news-photo{order:2; width: 20%; margin: 10px;    }
    .news-photo .square{padding-top: 100%;   }

    .news-info{ order: 1; flex: 1; padding: 10px;  }
    
 
    .news-info .news-title{ font-size: 10pt; margin-bottom:5px;  }
   


}