/* 移动端适配 */
@media screen and (min-width: 765px) {
    .trend-list-item {
        width:calc(33.33333% - 13.33333px);
        margin-bottom: 18px;
        margin-right: 20px
    }

    .trend-list-item:nth-child(3n) {
        margin-right: 0
    }
}

@media screen and (min-width: 600px) and (max-width:800px) {
    .trend-list-item {
        width:calc(50% - 10px);
        margin-bottom: 18px;
        margin-right: 20px
    }

    .trend-list-item:nth-child(2n) {
        margin-right: 0
    }
}

@media screen and (max-width: 600px) {

    .trend-list-item {
        width:100%;
        margin-bottom: 16px
    }

    .page-title {
        display: none
    }

    .trending-card .news-card-left {
        width: 100%;
        height: 200px
    }

    .trending-card .news-card-right {
        padding-left: 0
    }
}



@media screen and (min-width: 765px) {
    .page-title {
        margin-bottom: 19px;
        font-size: 28px;
        line-height: 33px;
    }
}

@media screen and (max-width: 1040px) {
    .pc-header .search-bar-wrap {
        width:300px
    }
}

@media screen and (max-width: 840px) {
    .pc-header .search-bar-wrap {
        width:250px
    }
}

@media screen and (min-width: 765px) {
    .header-wrap {
        display:block
    }

    .mobile-header {
        display: none
    }
}

@media screen and (max-width: 765px) {
    .header-wrap {
        display:none
    }
    .mobile-header {
        display: flex
    }
}

@media screen and (min-width: 765px) {
    .page-layout {
        flex-direction: row;
    }
}
@media screen and (max-width: 765px) {
    .page-layout {
        flex-direction: column;
    }
}

@media screen and (min-width: 765px) {
    .page-layout-aside {
        display: block;
    }
}
@media screen and (max-width: 765px) {
    .page-layout-aside {
        display: none;
    }
}

@media screen and (max-width: 600px) {
    .recent-list-item {
        display: none;
    }
}


@media screen and (max-width: 600px) {
    .page03{
        display: none;
    }
}
@media screen and (min-width: 600px) {
    .page03{
        display: block;
    }
}

@media screen and (max-width: 600px) {
    .page01{
        margin-bottom: 0;
    }
}

@media screen and (max-width: 600px) {
    .article-list-item{
		display: none;
    }
	
}

@media screen and (min-width: 765px) {
    .page02 {
        display: block;
    }
}
@media screen and (max-width: 765px) {
    .page02 {
        display: none;
    }
}

@media screen and (max-width: 765px) {
    .page-layout .page-layout-main {
        margin-right: 0;
    }
}
@media screen and (max-width: 765px) {
    .card-img-wrap {
        width: 122px;
        height: 96px;
    }
}

@media screen and (max-width: 765px) {
    .card-category {
        font-size: 12px;
        line-height: 14px;
    }
}
@media screen and (max-width: 765px) {
    .card-info {
        margin-left: 7px;
    }
}

@media screen and (max-width: 765px) {
    .card-title {
        margin-bottom: 0;
        font-size: 14px;
        line-height: 20px;
    }
}

@media screen and (max-width: 765px) {
    .card-cnt {
        font-size: 12px;
        line-height: 14px;
    }
}
@media screen and (min-width: 765px) {
    .popup {
        display: none;
    }
}
@media screen and (max-width: 765px) {
    .header-container {
      /* height: 60px; */
      height: 45px;
      padding: 0 10px;
      justify-content: space-between;
    }

    .search-layout .header-container {
        justify-content: center;
        padding: 0 10px;
        height: 45px;
      }
  
    .menu-icon {
      display: block;
    }
    .help-icon {
        display: block;
      }
  
     .header-container .logo-link{
        margin-bottom: 0px;
      }

    .logo-link img {
      width: 140px;
      height: 54px;
    }
  

    .help-icon img {
      width: 20px;
      height: 20px;
    }

    .header-container .search {
      display: none;
    }
  
    .header-extra {
      display: none;
    }
    
    .popup{
        display: block; 
    }
    .news-content img {
        width: 100% !important;
        border-radius: 10px;
        height: 200px;
    }
  }

/*detail*/
@media screen and (max-width:1000px) {
    .detail-box{
            display: block;
        }	
        .detail-box .left .autor{
            display: flex;
        }
        .detail-box .left{
            width: 100%;
            margin: 0; 
        }
        .detail-box .left h1{
            margin-top: 10px;
        }
    }
  
    @media screen and (max-width: 768px) {
        .news-content table {
              width: 100%;
             table-layout: fixed;
             border-collapse: collapse;
             font-size: 16px;
             margin-bottom: 15px;
             line-height: 26px;
            
        }

    }