.wrapper {
    width: 100%;

}

.img16 {
    position: fixed;
    width: 2.43rem;
    right: 0;
    bottom: 1.3rem;
    z-index: 100;
    animation: 2.5s linear infinite fdsx;
}

.detailsCon1>div,
.detailsCon2>div,
.detailsCon3>div,
.detailsCon4>div {
    transform: rotateZ(90deg);
}



.detailsCon>div>div {
    opacity: 0;
}

.detailsCon>div>div.on {
    animation: 2s ondh1 linear forwards;
}

.detailsCon>div>div.on1 {
    animation: 2s ondh2 linear forwards;
}

.detailsCon>div>div.on2 {
    animation: 2s ondh3 linear forwards;
}

.detailsCon>div>div.on3 {
    animation: 2s ondh4 linear forwards;
}

.detailsCon>div>div.on4 {
    animation: 2s ondh5 linear forwards;
}

@keyframes ondh1 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes ondh2 {
    0% {
        opacity: 0;
        transform: rotateZ(90deg) translateX(-80px);
    }

    100% {
        opacity: 1;
        transform: rotateZ(90deg) translateX(0);
    }
}

@keyframes ondh3 {
    0% {
        opacity: 0;
        transform: rotateZ(90deg) translateX(80px);
    }

    100% {
        opacity: 1;
        transform: rotateZ(90deg) translateX(0);
    }
}

@keyframes ondh4 {
    0% {
        opacity: 0;
        transform: rotateZ(90deg) translateY(80px);
    }

    100% {
        opacity: 1;
        transform: rotateZ(90deg) translateY(0);
    }
}

@keyframes ondh5 {
    0% {
        opacity: 0;
        transform: rotateZ(90deg) translateY(-80px);
    }

    100% {
        opacity: 1;
        transform: rotateZ(90deg) translateY(0);
    }
}

.details {
    width: 100%;
    height: 127.98rem;
    position: relative;
    background: url(http://greatnews.swmob.com/hsjyMobile/detailsBg.jpg) center center/100% 100%;

}

.detailsCon {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 127.98rem;
}

.detailsCon1 .renwu1 {
    position: absolute;
    width: 6.31rem;
    height: 4.33rem;
    left: 5.57%;
    top: 1.5%;
}

.detailsCon1 .title1 {
    position: absolute;
    width: 4.83rem;
    left: 23.13%;
    top: 8.15%;
}

.title1>img {
    width: 2.51rem;
    height: 0.39rem;
}

.detailsCon1 .title1 p {
    font-size: 0.28rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 0.36rem;
    margin-top: 0.26rem;
    letter-spacing: 0rem;
    color: #404040;
}

.detailsCon1 .title1 a {
    width: 2.45rem;
    height: 0.46rem;
    margin-top: 0.21rem;
    display: block;
    border-radius: 0.23rem;
}

.detailsCon .video1 {
    position: absolute;
    top: 12.7%;
    left: 4%;
}

.detailsFunctionList>a img:nth-child(2) {
    opacity: 0;
}

.detailsFunctionList>a.on img:nth-child(1) {
    opacity: 0;
}

.detailsFunctionList>a.on img:nth-child(2) {
    opacity: 1;
}

.detailsFunctionList>a {
    position: relative;
    display: block;
}

.detailsFunctionList>a img {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
}

.detailsFunctionList>img {
    width: 1.1rem;
    height: 0.4rem;
}

.detailsCon .video1 .videoTitle1 {
    width: 2.93rem;
    height: 0.42rem;
    margin: auto;
    margin-top: 0.34rem;
    margin-bottom: 0.13rem;
}

.logo {
    width: 2.15rem;
    height: 0.48rem;
    position: absolute;
    transform: rotateZ(90deg);
    top: 1.5%;
    right: 0;
}

.detailsCon .videoImg1,
.videoImg2,
.videoImg3,
.videoImg4 {
    width: 6.11rem;
    height: 3.42rem;
    padding: 0.1rem;
    background: url(http://greatnews.swmob.com/hsjyMobile//videoBj.png) center center / 100% 100%;
}

.detailsCon a {
    animation: 1.5s 3s fdsx infinite;
}

.detailsCon .video1 p {
    font-size: 0.28rem;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0rem;
    color: #404040;
    margin: auto;
    text-align: center;
}

.wenwuBox1 {
    width: 5.78rem;
    position: absolute;
    height: 5.06rem;
    top: 19%;
    left: 8%;
}

.detailsCon1 .info1 {
    position: absolute;
    width: 8.85rem;
    height: 4.77rem;
    left: -27%;
    top: 5.82rem;
}

.wenwuBox1 img {
    width: 100%;
    position: absolute;
    top: 0;
    height: 100%;
}

.wenwuBox1 .wenwuTitle {
    width: 3.4rem;
    height: 0.42rem;
    left: 0.46rem;
    top: 2.9rem;
}

.wenwuBox1 p {
    position: absolute;
    width: 4.61rem;
    height: 0.98rem;
    font-family: SourceHanSansCN-Regular;
    font-size: 0.28rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 0.35rem;
    letter-spacing: 0rem;
    color: #404040;
    top: 3.54rem;
    left: 0.48rem;
}

.wenwuBox1 .Btn {
    top: 2.19rem;
    width: 2.45rem;
    right: 0.17rem;
    display: block;
    position: absolute;
    height: 0.44rem;
}

.detailsCon1 .donghua1 .donghuaBg {
    position: absolute;
    width: 2.68rem;
    height: 1.20rem;
    left: 1.35rem;
    top: 13.8rem;
}

.detailsCon1 .donghua1 .donghuaimg1 {
    position: absolute;
    width: 0.76rem;
    height: 0.58rem;
    left: 3.5rem;
    top: 13.25rem;

}

.detailsCon1 .donghua1 .donghuaimg2 {
    position: absolute;
    width: 2.06rem;
    height: 1.40rem;
    left: 1.3rem;
    top: 12.5rem;

}

.videoTitle2 {
    width: 3.14rem !important;
    height: 0.41rem !important;
    display: block;
    margin: 0.24rem auto;
}

.video2 {
    position: absolute;
    top: 42%;
    left: 40px;
}

.video2 p {
    text-align: center;
}

.detailsCon1 .donghua1 .donghuaimg3 {
    position: absolute;
    width: 1.66rem;
    height: 1.35rem;
    left: 1.8rem;
    top: 13.8rem;
}

.detailsCon1 .donghua1 .donghuaimg1.on {
    animation: 2s penYd linear forwards;
}

.detailsCon1 .donghua1 .donghuaimg2.on {
    animation: 2s leftxz linear forwards;
}

.detailsCon1 .donghua1 .donghuaimg3.on {
    animation: 2s rightxz linear forwards;
}

.donghua1 .hb {
    position: absolute;
    width: 3rem;
    left: 1.2rem;
    top: 14rem;
    /* background-color: #8d0603; */

}

.renwu4 {
    width: 6.81rem;
    height: 5.42rem;
    position: absolute;
    top: 75%;
}

.info4 {
    width: 12.32rem;
    height: 5.14rem;
    top: 80.5%;
    left: -48%;
    position: absolute;
}

.donghua1 .hb .hbHD {
    opacity: 0;
}

.van-slider {
    background: transparent;

}


.van-slider::before {
    display: none;
}

.van-slider__bar {
    background-color: transparent;
}

.van-slider__button {
    width: 100px;
    height: 100px;

}

@keyframes leftxz {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: translate(0%, 20%) rotate(-10deg);
    }
}

@keyframes rightxz {
    0% {
        transform: rotate(0deg);
    }

    100% {
        left: 1.6rem;
        top: 13.63rem;
        transform: translate(0%, 0%) rotate(10deg);
    }
}

@keyframes penYd {
    0% {
        left: 3.5rem;
        top: 13.25rem;
    }

    20% {
        left: 3rem;
        top: 13.1rem;
    }

    50% {
        left: 2.8rem;
        top: 13.5rem;
    }

    70% {
        left: 1.9rem;
        top: 13.4rem;
    }

    90% {
        left: 1.7rem;
        top: 13.7rem;
    }

    100% {
        left: 1.3rem;
        top: 14.4rem;
    }

    /* 100%{
        left: 2rem;
        top: 13.5rem; 
    }  */
    /* 100%{
        left: 1.3rem;
        top: 14.4rem;
    } */
}

/* ------------------------------------ */

.detailsCon2 .renwu2 {
    position: absolute;
    width: 6.01rem;
    height: 4.52rem;
    left: 14px;
    top: 25.3%;
}



.detailRenwu {
    position: absolute;
    left: 16%;
    height: 5.05rem;
    width: 5.1rem;
    top: 30.2%;
}

.detailsCon2 .renwuName {
    width: 1.2rem;
    height: 0.4rem;
    position: absolute;
    left: 0;
    top: 2.37rem;
}

.detailsCon2 a {
    width: 2.3rem;
    height: 0.46rem;
    bottom: 0;
    position: absolute;
}
.detailRenwu a {
    top:4.8rem
}


.detailRenwu p {
    position: absolute;
    top: 2.91rem;
    width: 4.8rem;
    font-family: SourceHanSansCN-Regular;
    font-size: 0.28rem;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0rem;
    color: #404040;
}

.info2 {
    position: absolute;
    width: 13.95rem;
    top: 37%;
    left: -77%;
    height: 2.47rem;
}

.detailsCon2 .renwuImg {
    width: 2.81rem;
    height: 2.8rem;
    position: absolute;
    right: 0;
}

.title2>img {
    width: 3.36rem;
    height: 0.41rem;
}

.title2 p {
    margin-top: 0.14rem;
}

.detailsCon2 .title2 {
    position: absolute;
    width: 5.96rem;
    height: 2.6rem;
    top: 37%;
    left: 17%;
}


.luoye {}

.luoye .luoyebg {
    width: 2.64rem;
    height: 2.45rem;
    position: absolute;
    left: 1.1rem;
    top: 29rem;
}

.luoye .luoyebg2 {
    width: 1.35rem;
    height: 1.45rem;
    position: absolute;
    left: 1.05rem;
    top: 30rem;
    opacity: 0;
}

.luoye .luoyebg2.on {
    animation: 1s 2s LyByShow linear forwards;
}

.luoye .luoyeSy {
    width: 0.88rem;
    height: 0.96rem;
    position: absolute;
    left: 3rem;
    top: 29.5rem;
}

.luoye .luoyeSy.on {
    animation: 2s LyYd linear forwards;
}

@keyframes LyByShow {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes LyYd {
    0% {
        left: 3rem;
        top: 29.5rem;
    }

    50% {
        left: 2.3rem;
        top: 30.2rem;
    }

    80% {
        left: 1.8rem;
        top: 30.2rem;
    }

    100% {
        left: 1.8rem;
        top: 30.2rem;
        opacity: 0;
    }
}


.luoye .hb {
    position: absolute;
    width: 2rem;
    left: 1.2rem;
    top: 30rem;
    /* background-color: #8d0603; */
}

.luoye .hb .hbHD {
    opacity: 0;
}

/* --- */
.detailsCon3 .renwu3 {
    position: absolute;
    width: 7.34rem;
    height: 4.68rem;
    top: 49%;
}

.detailsCon3 .title3 {
    position: absolute;
    width: 4.63rem;
    height: 2.60rem;
    left: 2rem;
    top: 56%;
}

.title3>img {
    width: 4.28rem;
    height: 0.4rem;
}

.title3 p {
    margin-top: 0.15rem;
    font-size: 0.28rem;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0rem;
    color: #404040;
    margin-bottom: 0.31rem;
}

.title3 a {
    width: 2.45rem;
    height: 0.46rem;
    display: block;
}

.wenwuBox3 {
    width: 5.62rem;
    left: 7%;
    height: 6.02rem;
    position: absolute;
    top: 62.1%;
}

.wenwuBox3>img {
    width: 5.59rem;
    height: 6.02rem;
    position: absolute;
    top: 0;
}

.wenwuBox3 .Btn {
    position: absolute;
    display: block;
    top: 3.15rem;
    width: 2.45rem;
    height: 0.44rem;
    right: 0.17rem
}

.wenwuBox3 .wenwuTitle {
    position: absolute;
    top: 3.95rem;
    width: 3.41rem !important;
    height: 0.4rem !important;
    left: 0.5rem
}

.video3 {
    position: absolute;
    top: 68.5%;
    left: 0.6rem;
}

.videoImg3 {
    width: 6.26rem !important;
    height: 3.59rem;
}

.videoTitle3 {
    display: block;
    margin: 0.23rem auto 0.19rem;
    width: 2.27rem !important;
}

.video3 p {
    font-size: 0.28rem;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0rem;
    color: #404040;
    text-align: center;
}


.wenwuBox3 p {
    font-size: 0.28rem;
    width: 4.56rem;
    font-weight: normal;
    font-stretch: normal;
    bottom: 0.3rem;
    left: 0.53rem;
    position: absolute;
    letter-spacing: 0rem;
    color: #404040;
    position: absolute;
}

.detailsCon3 .info3 {
    position: absolute;
    width: 11.41rem;
    height: 5.11rem;
    left: -40%;
    top: 55.8%;

}


.Dth .Dthbg {
    width: 3.01rem;
    height: 2.05rem;
    position: absolute;
    left: 0.96rem;
    top: 45.9rem;
}

.Dth .DthSy {
    width: 0.82rem;
    height: 1.12rem;
    position: absolute;
    left: 2.1rem;
    top: 46.3rem;
}

.Dth .DthHua {
    width: 1.83rem;
    height: 2.51rem;
    position: absolute;
    left: 3rem;
    top: 45.5rem;
    transform: scale(0.1);
    opacity: 0;
}

.Dth .DthSy.on {
    animation: x-run 2s 0.1s linear forwards, y-run 2s 0.1s linear forwards;
}

.Dth .DthHua.on {
    animation: 2s huaXs linear forwards;
}

.detailsCon4 {}

@keyframes huaXs {
    0% {
        opacity: 0;
        transform: scale(0.1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes x-run {
    0% {
        left: 2.1rem;
    }

    10% {
        left: 2.2rem;
    }

    100% {
        left: 4rem
    }
}

@keyframes y-run {
    0% {
        top: 46rem;
    }

    10% {
        top: 46.4rem;
    }

    20% {
        top: 46.45rem;
    }

    50% {
        top: 46.5rem;
    }

    70% {
        top: 46.3rem;
    }

    100% {
        top: 45.5rem;
    }
}


.Dth .hb {
    position: absolute;
    width: 2rem;
    left: 2rem;
    top: 47rem;
    /* background-color: #8d0603; */
}

.Dth .hb .hbHD {
    opacity: 0;
}

/* ----------------------------------------------------- */

.title4>img {
    width: 2.98rem !important;
}

.wenwuBox4 a {
    position: absolute;
    right: 0.17rem;
    top: 2.31rem;
    width: 2.45rem !important;
    display: block;
}

.wenwuBox4 p {
    width: 4.37rem;
    font-family: SourceHanSansCN-Regular;
    font-size: 0.28rem;
    font-weight: normal;
    font-stretch: normal;
    top: 3.67rem;
    position: absolute;
    left: 0.42rem;
    letter-spacing: 0rem;
    color: #404040;
}

.wenwuBox4>img.wenwuTitle {
    width: 1.64rem;
    height: 0.36rem;
    position: absolute;
    top: 3.12rem;
    left: 0.39rem;
}

.wenwuBox4 {
    width: 5.59rem;
    position: absolute;
    height: 5.18rem;
    top: 88%;
}

.wenwuBox4>img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.detailsCon4 .title4 {
    position: absolute;
    width: 6.2rem;
    height: 2.60rem;
    left: 2rem;
    top: 83%;
}

.title4 a {
    margin-top: 0.34rem;
    width: 2.45rem;
    display: block;
    height: 0.46rem;

}

.title4 p {
    font-size: 0.28rem;
    font-weight: normal;
    font-stretch: normal;
    margin-top: 0.19rem;
    letter-spacing: 0rem;
    color: #404040;
}

.detailsCon4 .video4 {
    position: absolute;
    width: 6.23rem !important;
    bottom: 2.11rem;
    left: 0.6rem;
}

.video4 .videoTitle4 {
    width: 5.87rem;
    margin: 0.35rem auto 0;
    display: block;
}

.video4 p {
    width: 5.42rem;
    font-family: SourceHanSansCN-Regular;
    font-size: 0.28rem;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0rem;
    margin: auto;
    margin-top: 0.24rem;
    color: #404040;
    text-align: center;
}


@keyframes TaoShowYd {
    0% {
        left: 4.1rem;
        top: 61.3rem;
    }

    30% {
        left: 4rem;
        top: 61rem;
    }

    50% {
        left: 3.6rem;
        top: 61rem;
    }

    70% {
        left: 3.5rem;
        top: 60.9rem;
    }

    100% {
        left: 2.2rem;
        top: 60.8rem;
    }
}



/* ------------------------------------------------------------- */
.detailsFunction {
    position: fixed;
    height: 0.5rem;
    right: 0%;
    transform: rotateZ(90deg);
    bottom: 1rem;
}

.detailsFunction .detailsFunctionList {
    height: 100%;
    width: 100%;
    overflow-x: scroll;
    display: flex;
    align-items: center;
}

.detailsFunction .detailsFunctionList::-webkit-scrollbar {
    display: none;
}

.detailsFunction .detailsFunctionList a {
    margin-right: 0.1rem;
    display: block;
    height: 0.5rem;
}

.detailsFunction .detailsFunctionList a img {
    height: 100%;
    width: unset;
}

.detailsFunction .detailsFunctionImg2 {
    position: absolute;
    right: 0.2rem;
    bottom: 0.2rem;
    width: 0.19rem;
}


@keyframes fdsx {
    0% {
        transform: scale(1.05);
    }

    50% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1.05);
    }
}

.return {
    position: absolute;
    bottom: 0.7rem;
    left: -0.5rem;
    width: 2.15rem;
    transform: rotateZ(90deg);
    display: block;
    opacity: 1 !important;
    height: 0.78rem
}

.return img {
    width: 100%;
    height: 100%;
}

.sharepost {
    position: fixed;
    height: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotateZ(90deg);
    z-index: 1000;
    justify-content: space-between;
    align-items: center;
}

.sharepost .close {
    width: 0.5rem;
    margin: 20px auto;
}

.sharepost .sharepostImg {
    width: 8rem;
}