.need-height {
    height: 230px;
    padding-top: 60px;
}

@media screen and (max-width: 1500px) {
    .need-height {
        height: 230px;
    }

    .new-banner-font .swiper-slide .font h1 {
        font-size: 22px;
    }

    .new-banner-font .swiper-slide .font p {
        font-size: 18px;
    }

    .new-banner-font .swiper-slide .link {
        font-size: 18px;
    }
}

@media screen and (max-width: 1200px) {
    .index-page .common-banner .swiper-backface-hidden .swiper-slide {
        background-position-x: 100px !important;
    }

    .more-active-item:hover .bottom-text .text-content {
        transform: translateY(calc(-40rem / 16));
        transition: all .7s .2s;
    }

    .videos-page .videos-list {
        width: 90%;
    }

    .result-main {
        width: 90%;
    }

    .detail-page .detail-main {
        width: 80%;
        padding-left: calc(100rem / 16);
        padding-right: calc(100rem / 16);
    }
}

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

    .type-area,
    .new-swiper-cont {
        width: 90%;
    }

    .more-active-item {
        width: calc((100% - 80rem / 16) / 3);
    }

    .more-active-item:nth-of-type(4n + 2),
    .more-active-item:nth-of-type(4n + 3),
    .more-active-item:nth-of-type(4n + 4) {
        margin-left: 0;
    }

    .more-active-item:nth-of-type(3n + 2),
    .more-active-item:nth-of-type(3n + 3) {
        margin-left: calc(40rem / 16);
    }

    .video-container .video-list .swiper-slide {
        width: 30%;
    }

    .new-banner-font .swiper-slide .font h1 {
        font-size: 18px;
    }

    .new-banner-font .swiper-slide .font p {
        font-size: 16px;
    }

    .new-banner-font .swiper-slide .link {
        font-size: 18px;
        padding-right: 20px;
    }

}

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

    .index-page .common-banner .swiper-backface-hidden .swiper-slide {
        background-position-x: 40px !important;
        background-size: 100% !important;
    }

    .common-main-title {
        margin-top: 10%;
        font-size: 20px;
    }

    .common-banner {
        height: 240px;
    }

    .new-banner-font .swiper-slide .title img {
        width: 45%;
    }

    .common-b-title {
        margin-top: 30px;
        margin-bottom: 20px;
        font-size: 16px;
    }

    .type-area,
    .new-swiper-cont {
        width: 95%;
    }

    .header .search-container {
        height: 30px;
        width: 200px;
    }

    .header .search-container input[type="text"] {
        padding-left: 10px;
        font-size: 12px;
    }

    .header .search-container .sub-btn {
        font-size: 12px;
    }

    .recent-main .swiper-slide {
        width: 83%;
    }

    .recent-main .recent-button {
        top: 30%;
    }

    .recent-main .swiper-slide .text-content {
        height: 80px;
    }

    .recent-main .swiper-slide .text-content .title {
        font-size: 14px;
    }

    .recent-main .swiper-slide .text-content .day {
        font-size: 18px;
    }

    .more-active-list {
        margin-top: calc(-20rem / 16);
    }

    .more-active-item {
        width: calc(50% - 10rem / 16);
        margin-top: calc(20rem / 16);
    }

    .more-active-item:nth-of-type(3n + 2),
    .more-active-item:nth-of-type(3n + 3) {
        margin-left: 0;
    }

    .more-active-item:nth-of-type(2n + 2) {
        margin-left: calc(20rem / 16);
    }

    .more-active-item .bottom-text .time {
        font-size: 12px;
    }

    .more-active-item .bottom-text .title {
        font-size: 14px;
    }

    .video-container {
        margin-bottom: 30px;
    }

    .video-container .video-list .swiper-slide {
        width: 60%;
    }

    .video-container .video-list .title {
        font-size: 14px;
    }

    .video-container .title-more a {
        font-size: 12px;
    }

    .video-container .video-button-prev {
        left: 20.5%;
    }

    .video-container .video-button-next {
        right: 20.5%;
    }

    .footer {
        font-size: 12px;
    }

    .footer .footer-main {
        flex-direction: column;
        align-items: flex-end;
    }


    .videos-page .videos-list .videos-item {
        width: 100%;
        height: 180px;
    }

    .videos-page .videos-list .videos-item:nth-child(3n + 2) {
        margin-left: 0;
        margin-right: 0;
    }

    .detail-page .detail-main {
        width: 90%;
        padding-left: 5%;
        padding-right: 5%;
    }

    .detail-page .detail-main .title {
        font-size: 18px;
    }

    .detail-page .detail-main .text {
        font-size: 14px;
    }

    .detail-page .common-main-title {
        font-size: 20px;
    }

    .detail-page .common-banner {
        height: 200px;
    }

    .forum-main .b-title {
        padding-top: 0;
        font-size: 16px;
    }

    .forum-main .forum-item {
        flex-direction: column;
        padding: 20px 0;
    }

    .forum-main .forum-item .pic {
        width: 100%;
        height: 170px;
    }

    .forum-main .forum-item .forum-content {
        margin-left: 0;
    }

    .forum-main .forum-item .forum-content .title {
        font-size: 14px;
    }

    .forum-main .forum-item .forum-content .time {
        justify-content: flex-end;
        margin-top: 30px;
    }

    .forum-main .forum-item .forum-content .link {
        margin-top: 10px;
    }

    .forum-page .common-banner {
        height: 200px;
    }

    .need-height {
        height: 200px;
    }

    .result-main {
        margin-top: 10px;
    }

    .result-main .title {
        font-size: 18px;
    }

    .result-main .input-container {
        width: 90%;
    }

    .result-main .result-total {
        width: 90%;
        font-size: 12px;
    }

    .result-main .select-list a {
        font-size: 14px;
    }

    .forum-page.result .forum-main .forum-list {
        width: 90%;
    }

    .no-result-hint {
        width: 90%;
        font-size: 14px;
    }

    .videos-page .videos-list .title {
        font-size: 14px;
    }

    .videos-page .videos-list .play-btn {
        width: 50px;
        height: 50px;
    }

    .videos-page .videos-list .videos-item .hover-bg {
        height: 75%;
    }

    .header.have-back {
        align-items: flex-start;
    }

    .common-banner .right {
        flex-direction: column;
        align-items: flex-end;
    }

    .common-banner .right .search-container {
        margin-right: 0;
    }

    .common-banner .right .common-back-btn {
        margin-top: 10px;
        margin-right: 5px;
    }

    .videos-page .b-title {
        margin-top: 0;
        font-size: 16px;
        font-weight: bold;
    }

    .common-bg {
        background-size: 300%;
    }
}

@media (max-width: 560px) {
    .new-banner-font .swiper-slide .intro {
        margin-top: calc(20px + 8vw);
    }

    .new-banner-font .swiper-slide {
        padding-bottom: 13vw;
    }

    .new-banner-font .swiper-pagination {
        bottom: 14px !important;
    }

    .header {
        margin-top: calc(12rem / 16);
    }

    .new-banner {
        padding-top: 12vw;
    }

    .index-page .common-banner .swiper-backface-hidden .swiper-slide {
        background-position-y: top;
    }

    .new-banner-font .swiper-slide .intro .font {
        padding-right: 40px;
    }

    .new-banner-font .swiper-slide .font h1 {
        font-size: 14px;
    }

    .new-banner-font .swiper-slide .font p {
        font-size: 12px;
    }

    .new-banner-font .swiper-slide .link {
        font-size: 14px;
    }
}