@media(max-width: 1640px) and (min-width: 1367px) {
    .hp-list .year {
        font-size: 80px;
        line-height: 70px;
        width: 100px
    }
}

@media(max-width: 1366px) and (min-width: 1200px) {
    .hp-list .year {
        font-size: 60px;
        width: 70px;
        line-height: 50px;
        top: 20px
    }

    .hp-list .imgc {
        margin: 24px 20px 20px 62px
    }

    .footer-container {
        width: calc(100% - 40px)
    }

    .homepage .hero-section .hero-container {
        width: calc(100% - 200px)
    }

    .hp-list .hp-title {
        font-size: 16px
    }
}

@media (max-width: 1200px) {
    .header-container, .hero-container, .container, .footer-container {
        width: calc(100% - 40px)
    }

    .member-card {
        width: calc((100% - 80px)/3)
    }

    .member-grid.w-75 {
        width: 100% !important;
        margin: 0 auto
    }

    .homepage .hero-section .hero-container {
        grid-template-columns: 1fr
    }

    .hero-content {
        padding-right: 0
    }
}

@media (max-width: 993px) {
    .hero-content {
        text-align: center
    }

        .hero-content h1, .hero-subtitle {
            text-align: center
        }

    .hero-section, .member-section, .discussion-section, .news-section, .video-section {
        padding: 2rem 0
    }
}
@media(min-width: 768px){
    .hp-list:not(.slick-slider) {display: grid;grid-template-columns: 1fr 1fr;gap: 30px}
        .hp-list:not(.slick-slider) .hp-item {width: auto !important}
        .hp-list .hp-item:nth-child(n+5) {
            display: none
        }
}
@media (max-width: 768px) {
    .homepage .hero-section {
        padding: 20px 0
    }

    .header-container, .hero-container, .container, .footer-container {
        width: calc(100% - 20px)
    }

    .hp-list .hp-item {
        width: 100% !important;
        max-width: 420px;
        margin: 60px auto;
    }

        .hp-list .hp-item:first-child {
            margin-top: 0
        }

        .hp-list .hp-item:last-child {
            margin-bottom: 0
        }

    .sidebar {
        width: 80%;
        max-width: 400px;
    }

    .nav-item {
        padding: 10px 0
    }

        .nav-item .nav-text {
            font-size: 20px
        }

    .header {
        padding: 10px 0
    }

    .header-left .nav-text, .header-right {
        display: none
    }

    .sidebar-content {
        padding: 20px
    }

    .home-link, .timeline-item {
        margin-bottom: 13px;
        font-size: 16px
    }

        .timeline-item .title {
            font-size: 15px
        }

    .sidebar-close {
        padding: 0
    }

        .sidebar-close img {
            width: 20px
        }

    .brand-logo {
        width: 230px
    }

    .footer {
        padding: 10px 0
    }

        .footer .content {
            text-align: center
        }

    .hp-list .year {
        top: -15px
    }

    .hero-container {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 0 0 50px 0;
    }

    .hero-content h1 {
        font-size: 50px;
        margin-bottom: 20px
    }

    .hero-details {
        margin-top: 20px
    }

    .nav-number {
        font-size: 18px;
        padding: 5px;
        min-width: 40px;
        margin-right: 1rem
    }

    .hero-subtitle {
        font-size: 1.2rem;
        margin-bottom: 0
    }

    .hero-description {
        font-size: 1rem;
    }

    .discussion-grid {
        grid-template-columns: 1fr;
    }

    .discussion-header {
        margin-bottom: 20px
    }

    .discussion-item {
        padding: 20px 0
    }

    .member-card, .member-grid.w-75 .member-card {
        width: calc(50% - 20px)
    }

    .news-grid {
        gap: 20px
    }

    .news-title a {
        font-size: 15px
    }

    .news-grid .news-card:nth-child(1) .news-title a, .news-grid .news-card:nth-child(2) .news-title a {
        font-size: 18px
    }

    .bg-hero .bg-1 {
        max-width: 40%
    }

    .bg-hero .bg-3 {
        max-width: 30%
    }

        .bg-hero .bg-1 img, .bg-hero .bg-3 img {
            width: 100%
        }

    .bg-hero .bg-2, .bg-hero .bg-4 {
        display: none
    }

    .container {
        padding: 0
    }

    .member-card, .member-grid.w-75 .member-card {
        width: calc(50% - 5px)
    }

    .member-grid {
        gap: 10px;
        margin-block: 30px
    }

    .section-title {
        font-size: 30px;
        margin-block: 25px
    }

    .discussion-content h3 {
        font-size: 18px
    }

    .member-name {
        font-size: 16px
    }

    .sidebar-footer {
        padding: 1rem
    }

    #myModal #content-expert {
        display: block;
        padding: 10px
    }

    #myModal.modal .modal-dialog {
        top: 50px;
        max-height: calc(100% - 70px);
        overflow: auto
    }

    #myModal .modal-content .imgc {
        width: 100px;
        float: left;
        margin: 0 10px 10px 0
    }

    #myModal .modal-content .title {
        margin-bottom: 10px
    }

    #myModal .modal-content .content {
        max-height: none;
        overflow: visible
    }
}

@media(max-width: 640px) {
    .news-grid {
        grid-template-columns: 1fr 1fr
    }
}
@media(max-width: 480px){
    .hp-list .year {font-size: 80px;line-height: 70px;width: 90px;top: 0}
    .hp-list .imgc {margin-left: 80px}
}