html, body {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;

    background-color: #f9f9f9;
}

* {
    user-select: none;
    -webkit-user-select: none;
}


.app {
    width: 100%;
    /* 全部显示 */
    /*height: 70.13rem;*/
    /* 隐藏p2/p5 */
    height: 59rem;
	/* height: 52rem; */
    /* 隐藏p1视频列表的高度 1.2rem */
    /*height: 51rem;*/
    overflow: hidden;
    background: url("./psbc_cfzg_231123_bg.jpg") top no-repeat;	
    background-size: 100% auto;
}


.arrow-down {
    position: absolute;
    left: 3.33rem;
    top: 80vh;
    width: .84rem;
    height: 1rem;
    animation: move 2s infinite;
}

.summary {
    margin-left: .765rem;
    margin-top: 13.7rem;
    width: 5.97rem;
    height: 10.24rem;
}

.part-box {
    width: 100%;
    padding: 0 0 .79rem;
}

.p1 {
    height: 8.82rem;
    /* 隐藏视频列表的高度 8.82-1.64*/
    /*height: 7.18rem;*/
    margin-top: .76rem;
}

.p2 {
    height: 6.9rem;
}

.p3 {
    height: 12.15rem;
}

.p4 {
    height: 6.17rem;
}

.p5 {
    height: 7.8rem;
    padding: 0;
}

.part-box .title {
    margin: 0 auto .32rem;
    width: 5.8rem;
    height: 1.58rem;
}

.part-box.p5 .title {
    height: 1.03rem;
    margin-bottom: .6rem;
}

.video {
    position: relative;
    width: 100%;
    height: 4.23rem;
}

.video-cover, .video-cover-photo, .video-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.video-cover .video-cover-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.3rem;
    height: 1.3rem;
    transform: translate(-50%, -50%);
}

.video-box > video {
    width: 100%;
    height: 100%;
}

.swiper {
    width: 100%;
}

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

.video-cover-swiper {
    width: 6.9rem;
    height: 1.64rem;
    margin: .28rem auto 0;
}

.video-cover-swiper .swiper-wrapper.center {
    justify-content: center;
}

.video-cover-swiper .swiper-slide {
    width: 2.06rem;
    height: 100%;
}

.video-cover-swiper .swiper-slide > img {
    width: 100%;
    height: 1.18rem;
}

.video-cover-swiper .swiper-slide .video-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: .1rem;
    color: #fff;
    font-size: .18rem;
    line-height: .26rem;
    background: rgb(61, 29, 14, 0.3);
}

.article-swiper {
    width: 100%;
    height: 4.66rem;
    margin: 0 auto;
}

.article-swiper .swiper-slide {
    position: relative;
    width: 100%;
    flex-flow: column;
    justify-content: flex-start;
}

.article-swiper .swiper-slide a {
    width: 100%;
    height: 100%;
}

.article-swiper .swiper-slide img {
    width: 6.9rem;
    height: 3.38rem;
    margin: 0 auto;
}

.article-swiper .swiper-slide .title {
    width: 6.9rem;
    /*height: 1.28rem;*/
    margin: 0 auto;
    padding: .18rem;
    color: #fff;
    font-size: .26rem;
    line-height: .46rem;
    background: #7e6d65;
    text-align: justify;
}

.article-swiper-pagination.swiper-pagination {
    position: relative;
    top: 0;
    bottom: 0;
    margin: .3rem auto .12rem;
}

.article-swiper-pagination .swiper-pagination-bullet {
    width: .23rem;
    height: .23rem;
    background: #fff;
    border: solid 1px #3d1d0e;
}

.article-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #3d1d0e;
}

.album-swiper {
    height: 3.48rem;
}

.album-swiper .swiper-slide {
    width: 6.2rem;
    height: 100%;
}


.poster-swiper {
    height: 6.2rem;
}

.poster-swiper .swiper-slide {
    width: 3.48rem;
    height: 100%;
}

.article-list {
    width: 6.2rem;
    height: 4.14rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.article-list .item {
    position: relative;
    width: 100%;
    height: 1.38rem;
}

.article-list .item a {
    width: 100%;
    height: 1.38rem;
    padding: .15rem 0;
    box-sizing: border-box;
    display: block;
}

.article-list .item .item-cover {
    width: 1.83rem;
    height: 100%;
    float: left;
}

.article-list .item .item-title {
    width: 4.37rem;
    height: 100%;
    float: left;
    padding: 0.22rem .8rem 0.22rem .3rem;
    font-size: .2rem;
    line-height: .32rem;
    background: linear-gradient(90deg, #fff, #fff 50%, rgba(255, 255, 255, 0));
}

.article-list .item:after {
    content: '';
    position: absolute;
    right: .38rem;
    top: .53rem;
    width: .17rem;
    height: .32rem;
    background: url("./psbc_cfzg_231123_arrow_right.png") no-repeat;
    background-size: 100% 100%;
}

.article-list .item a {
    border-top: 2px solid transparent;
    border-image: url("./psbc_cfzg_231123_dot_line.png") 540 2 stretch;
}

.article-list .item:first-child a {
    border: none;
}

@keyframes move {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}