body {display: flex;flex-direction: column;justify-content: space-between;min-height: 100vh;background-color: #f5f5f5;}
.container {width: 1440px;margin: auto;box-sizing: border-box;}

main {background-color: #fff;min-height: calc(100vh - 120px - 420px);padding: 40px 0 100px;}
main .intro img {width: 100%;display: block;}
main .intro.pc {display: block;}
main .intro.m {display: none;}
main ul.style {display: flex;flex-wrap: wrap;gap: 24px;padding: 40px 0;width: 845px;margin: auto;}
main ul.style li {width: calc(48% - 0px);}
main ul.style li:first-child {width: 100%;}
main ul.style li:first-child .picture,
main ul.style li:first-child .video {overflow: hidden;width: 100%;height: 423px;}
main ul.style li .picture,
main ul.style li .video {overflow: hidden;width: 100%;height: 220px;position: relative;z-index: 1;}
main ul.style li .picture img,
main ul.style li .video video {width: 100%;height: 100%;object-fit: cover;}
main ul.style li .title {padding: 16px 0 8px;color: #1f2b6c;font-size: 24px;font-weight: 900;line-height: 1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

.preview-warpper {display: none;position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;z-index: 10;background: rgba(0, 0, 0, 0.7);}
.preview-warpper .container {width: 1280px;}
.preview-warpper .preview-warpper-main {height: 90vh;padding-top: 10vh;}
.preview-warpper .close {position: absolute;right: 24px;top: 24px;width: 24px;height: 24px;background: url("../images/close.png") 0 0/contain no-repeat;}
.preview-warpper .swiper-container {width: 100%;height: 300px;margin-left: auto;margin-right: auto;}
.preview-warpper .gallery-top {height: 80%;width: 100%;margin-bottom: 20px;}
.preview-warpper .gallery-top .swiper-slide {display: flex;align-items: center;}
.preview-warpper .gallery-top img {height: auto;margin: auto;display: block;max-width: 100%;max-height: 100%;}
.preview-warpper .gallery-thumbs {height: 20%;box-sizing: border-box;padding: 10px 0;}
.preview-warpper .gallery-thumbs .swiper-slide {width: 25%;height: 100%;opacity: 0.4;display: flex;align-items: center;}
.preview-warpper .gallery-thumbs .swiper-slide-active {opacity: 1;}
.preview-warpper .gallery-thumbs img {width: 100%;}

@media screen and (min-width: 1280px) and (max-width: 1480px) {
    .container {width: auto;max-width: 1280px;margin: auto;}
}

@media screen and (max-width: 1280px) {
    .container {width: auto;max-width: 1280px;margin: auto;padding: 0 40px;}
    main {padding: 40px 0 100px;}
    .preview-warpper .container {width: 100%;}
}

@media screen and (max-width: 960px) {
    main ul.style {width: 100%;padding: 24px 24px 0;}
}

@media screen and (max-width: 768px) {
    html {font-size: calc(100vw / 7.5);font-size: -webkit-calc(100vw / 7.5);-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: transparent;user-select: none;scroll-behavior: smooth;}
    .container {width: 100%;max-width: 100%;margin: auto;padding: 0;flex: 1;}
    body {background-color: #fff;}

    main {padding: 0.24rem 0;font-size: 0;}
    main .intro.m {display: block;margin-bottom: 0.24rem;}
    main .intro.pc {display: none;}
    main ul.style {gap: 0.24rem;padding: 0 0.4rem;}
    main ul.style li {width: 48%;}
    main ul.style li:first-child .picture, 
    main ul.style li:first-child .video {height: 4.23rem;}
    main ul.style li .picture,
    main ul.style li .video {height: 2.2rem;}
    main ul.style li .title {padding: 0.16rem 0 0;font-size: 0.24rem;line-height: 1.6;}
    main ul.style li .picture[data-type="1"]::after {content: '';width: 0.8rem;height: 0.8rem;background: url("../images/playButton.png") 0 0/contain no-repeat;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}

    .preview-warpper {}
    .preview-warpper .preview-warpper-main {height: 80vh;padding: 20vh 0.4rem 0;}
    .preview-warpper .preview-warpper-main video {width: 100%;}
    .preview-warpper .close {position: absolute;right: 0.48rem;top: 0.96rem;width: 0.36rem;height: 0.36rem;}
    .preview-warpper .gallery-top {width: 100%;height: 3rem;margin-left: auto;margin-right: auto;}
    .preview-warpper .swiper-slide img{width: 100%;}
    .preview-warpper .gallery-top {height: 4rem;width: 100%;margin-bottom: 0.2rem;}
    .preview-warpper .gallery-top .swiper-slide img{width: auto;;max-width: 100%;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
    .preview-warpper .gallery-thumbs .swiper-slide img {width: 100%;height: 100%;object-fit: cover;}
    .preview-warpper .swiper-button-next:after, .preview-warpper .swiper-button-prev:after {font-size: 0;}
    .preview-warpper .swiper-button-prev, .preview-warpper .swiper-container-rtl .swiper-button-next {left: 0;}
    .preview-warpper .swiper-button-next, .preview-warpper .swiper-container-rtl .swiper-button-prev {right: 0;}
}