/* 移动端适配 */
@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
    }

    .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 (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: 44px;
        padding: 0 10px;
        justify-content: space-between;
    }

    .search-layout .header-container {
        height: 44px;
        margin: 0;
        padding: 0 20px;
    }

    .menu-icon {
        display: block;
    }

    .help-icon {
        display: block;
    }

    .header-container .logo-link {
        margin-bottom: 0px;
    }

    .logo-link img {
        width: 180px;
        height: 70px;
    }

    .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) {

    .header-container {
        display: flex;
        height: auto;
    }

    .layout-logo {
        font-size: 21px;
        line-height: 1;
        font-weight: 700;
        /* font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; */
    }

    .detail-layout .header {
        height: 36px;
        justify-content: center;
        padding: 0 20px;

    }


    .search-input {
        display: none;
    }

    .detail-header {
        height: 36px;
    }

    .detail-header .pc-header-extra {
        display: none;
    }

    .detail-header .header-content {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .detail-main {
        padding: 10px 20px;
    }

    .detail-box {
        display: block;
    }

    .detail-box .left .autor {
        display: flex;
    }

    .detail-box .left {
        width: 100%;
        margin: 0;
    }

    .detail-box .detail-page-title {
        font-size: 21px;
        line-height: 1.2;
        position: relative;
        -webkit-line-clamp: 4;
        font-weight: 800;
        color: #333;
        margin-bottom: 8px;
        font-family: "exo", Sans-Serif !important;
    }

    .detail-box .left h2 {
        font-size: 16px;
        font-weight: 700;
        line-height: 28px;
    }

    .detail-box .left h3 {
        font-size: 16px;
        font-weight: 700;

    }

    .detail-box .left p {
        font-size: 16px;
        font-weight: 400;
        color: #333;
        line-height: 24px;
        margin-bottom: 16px;
        font-family: "exo", Sans-Serif !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-all;
    }

    .detail-box .left .des {
        line-height: 22px;

    }

    .header_row {
        height: 36px;
    }

    .author hr {
        display: none;
    }
}

@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;
    }
}

@media screen and (max-width: 500px) {
    .feedback-modal .feedback-modal-body {
        width: 80vw;
    }
}

@media screen and (min-width: 765px) {
    .category-layout:before {
        top: 26px;
    }
}