.index {

}

.index .index-title {
    font-size: 3rem;
    font-weight: bold;
}

.index .index-desc {
    padding: .5rem 0;
}

/*轮播图*/
.index .swiper {
    height: 50rem;
}

.index .swiper .swiper-item {
    width: 100%;
    height: 50rem;
}

.index .swiper .swiper-item img {
    width: 100%;
    height: 100%;
}

/*主区域*/
.index .main {
    padding: 3rem 20rem;
}

/*banner*/
.index .main .index-banner {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 1rem;
    grid-row-gap: 0;
}

.index .main .index-banner .index-banner-box {
    width: 26rem;
    height: 26rem;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.index .main .index-banner .big-banner {
    width: 100%;
}

.index .main .index-banner .index-banner-middle .small-banner {
    width: 100%;
    height: 100%;
}

.index .main .index-banner .index-banner-middle {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0;
    grid-row-gap: .8rem;
}

.index .main .index-banner .index-banner-middle .index-banner-middle-box {
    width: 26rem;
    height: 12.6rem;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.index .main .index-banner img {
    width: 100%;
    height: 100%;
}

/*产品推荐*/
.index .main .product {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.index .main .product .list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 1.5rem;
    grid-row-gap: 1rem;
}

.index .main .product .list .product-img {
    width: 39rem;
    height: 27.8rem;
}

.index .main .product .list .product-img img {
    width: 100%;
    height: 100%;
}

.index .main .product .list .product-item {
    position: relative;
    cursor: pointer;
}

.index .main .product .list .product-name {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 1.3rem;
    line-height: 5rem;
    color: #ffffff;
    background-color: rgba(0, 0, 0, .2);
}

.index .main .product .product-more {
    margin-top: 2rem;
    padding: .3rem 2rem;
    border-radius: .8rem;
    cursor: pointer;
    color: #ffffff;
    background-color: #222222;
}

/*视频体验*/
.index .video {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.index .video .list {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 1rem;
    grid-row-gap: 0;
}

.index .video .list .video-item {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.index .video .list .big-img {
    width: 52.5rem;
    height: 39.5rem;
}

.index .video .list .right {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0;
    grid-row-gap: 1rem;
}

.index .video .list .right .small-img {
    width: 26.5rem;
    height: 19.5rem
}

.index .video .video-item {
    position: relative;
    cursor: pointer;
}

.index .video .list img {
    width: 100%;
    height: 100%;
}

.index .video .video-item .video-play {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.index .video .video-item .big-video-play {
    width: 6rem;
    height: 6rem;
}

.index .video .video-item .small-video-play {
    width: 4rem;
    height: 4rem;
}

/*新闻资讯*/
.index .news {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.index .news .list {
    margin-top: .5rem;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr;
    grid-column-gap: 1.5rem;
    grid-row-gap: 0;
}

.index .news .list .left {
    width: 30rem;
    height: 30rem;
}

.index .news .list .left img {
    width: 100%;
    height: 100%;
}

.index .news .list .right {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0;
    grid-row-gap: 1rem;
}

.index .news .list .right .news-item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
}

.index .news .list .right .news-item .news-img {
    width: 18rem;
    height: 14.3rem;
}

.index .news .list .right .news-item .news-img img {
    width: 100%;
    height: 100%;
}

.index .news .list .right .news-item .news-info {
    margin-left: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.index .news .list .right .news-item .news-info .news-title {
    font-size: 1.5rem;
    font-weight: bold;
}

.index .news .list .right .news-item .news-info .news-desc {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-size: .8rem;
}

.index .news .list .right .news-item .news-info .news-desc .news-time {
    width: 6rem;
    margin-left: .5rem;
}

/*地图*/
.index .main #contact-map {
    margin-top: 4rem;
    width: 100%;
    height: 30rem;
}

@media screen and (max-width: 1440px) {
    .index .swiper {
        height: 37rem;
    }

    .index .swiper .swiper-item {
        height: 37rem;
    }

    .index .main .index-banner .index-banner-box {
        width: 16rem;
        height: 16rem;
    }

    .index .main .index-banner .index-banner-middle .index-banner-middle-box {
        width: 16rem;
        height: 7.6rem;
    }

    .index .main .product .list .product-img {
        width: 24.3rem;
        height: 17.3rem;
    }

    .index .video .list .big-img {
        width: 32.5rem;
        height: 19.5rem;
    }

    .index .video .list .right .small-img {
        width: 18.5rem;
        height: 9.3rem
    }

    .index .news .list .left {
        width: 20rem;
        height: 20rem;
    }

    .index .news .list .right .news-item .news-img {
        width: 13rem;
        height: 9.3rem;
    }
}

@media screen and (max-width: 1366px) {
    .index .swiper {
        height: 34rem;
    }

    .index .swiper .swiper-item {
        height: 34rem;
    }

    .index .main .index-banner .index-banner-box {
        width: 14.5rem;
        height: 14.5rem;
    }

    .index .main .index-banner .index-banner-middle .index-banner-middle-box {
        width: 14.5rem;
        height: 6.8rem;
    }

    .index .main .product .list .product-img {
        width: 22rem;
        height: 15rem;
    }

    .index .video .list .big-img {
        width: 28.5rem;
        height: 15.5rem;
    }

    .index .video .list .right .small-img {
        width: 16.5rem;
        height: 7.1rem
    }

    .index .news .list .left {
        width: 18rem;
        height: 18rem;
    }

    .index .news .list .right .news-item .news-img {
        width: 12rem;
        height: 8.3rem;
    }
}

@media screen and (max-width: 768px) {
    .index .index-title {
        font-size: 1.5rem;
    }

    /*轮播图*/
    .index .swiper {
        height: 10rem;
    }

    .index .swiper .swiper-item {
        height: 10rem;
    }

    /*主区域*/
    .index .main {
        padding: 1rem 1rem;
    }

    /*banner*/
    .index .main .index-banner {
        padding: 0;
        width: 100%;
        grid-template-columns: 1fr;
        grid-column-gap: 0;
        grid-row-gap: .5rem;
    }

    .index .main .index-banner .index-banner-box {
        width: 21rem;
        height: 21rem;
    }

    .index .main .index-banner .index-banner-middle {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 0;
        grid-row-gap: 0;
    }

    .index .main .index-banner .index-banner-middle .index-banner-middle-box {
        width: 21rem;
        height: 10.6rem;
    }

    .index .main .index-banner .big-banner {
        width: 100%;
        height: 21rem;
    }

    .index .main .index-banner .index-banner-middle .small-banner {
        width: 100%;
        height: 8.5rem;
    }

    /*产品推荐*/
    .index .main .product {
        margin-top: 1rem;
    }

    .index .main .product .list {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
        grid-column-gap: 0;
        grid-row-gap: .5rem;
    }

    .index .main .product .list .product-img {
        width: 21.3rem;
        height: 13.3rem;
    }

    .index .main .product .list .product-name {
        font-size: 1rem;
        line-height: 3rem;
    }

    /*视频体验*/
    .index .video {
        margin-top: 1rem;
    }

    .index .video .list {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-column-gap: 0;
        grid-row-gap: .5rem;
    }

    .index .video .list .big-img {
        width: 22rem;
        height: 17rem;
    }

    .index .video .list .right {
        grid-row-gap: .5rem;
    }

    .index .video .list .right .small-img {
        width: 22rem;
        height: 17rem
    }

    /*新闻资讯*/
    .index .news {
        margin-top: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .index .news .list {
        margin-top: .5rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

    .index .news .list .left {
        width: 21.5rem;
        height: 21.5rem;
    }

    .index .news .list .right {
        margin-top: .5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    .index .news .list .right .news-item {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    .index .news .list .right .news-item .news-img {
        width: 10rem;
        height: 8.3rem;
    }

    .index .news .list .right .news-item .news-img img {
        width: 100%;
        height: 100%;
    }

    .index .news .list .right .news-item .news-info {
        margin-left: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    .index .news .list .right .news-item .news-info .news-title {
        font-size: 1rem;
        font-weight: bold;
    }

    .index .news .list .right .news-item .news-info .news-desc {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        font-size: .5rem;
    }

    .index .news .list .right .news-item .news-info .news-desc .news-time {
        margin-left: .5rem;
        align-self: flex-end;
        text-align: right;
    }

    /*地图*/
    .index .main #contact-map {
        margin-top: 2rem;
        height: 15rem;
    }
}

@media screen and (max-width: 414px) and (min-width: 376px) {
    /*轮播图*/
    .index .swiper {
        height: 11rem;
    }

    .index .swiper .swiper-item {
        height: 11rem;
    }

    .index .main .product .list .product-img {
        width: 23.3rem;
        height: 15.3rem;
    }
}