* {
    margin: 0;
    list-style: none;
}
.summary{
    padding: 0;
}
a {
    text-decoration: none;
    color: #fff;
}

body {
    background-color: #F5F5F5;
}
.containter {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0%;
}
p{font-family: "pingfang" !important;}
body,
html {
    height: 100%;
    overflow: hidden;
}
.page {
    width: 100%;
    height: 100%;
    /* background: pink; */
}

.page1 {
    position: relative;
    display: flex;
    background-image: url(../../public/images/what-background2.png);
    background-size: 94% 104%;
    background-position: -911px 207px;
    background-repeat: no-repeat;
}
.page1Right {
    width: 50%;
    height: auto;
    /* background-image: url(../../public/images/what-background1.png);
    background-size: 155% 115%;
    background-position: 270px -174px;
    background-repeat: no-repeat; */
}
.whatbg{
    position: relative;
    width: 1860px;
    height: 1050px;
    left: 0px;
    top: -140px;
    animation:whatbg 1s;
}
.summaryContent {
    position: relative;
    width: 50%;
    height: auto;
    top: 35vh;
    left: 130px;
    display: flex;
    flex-direction: column;
    animation:summaryContent 1s;
    -webkit-animation:summaryContent 1s;
}	

.page2 {
    position: relative;
    display: flex;
    width: 100%;
}

.left {
    /* margin-top: 20vh; */
    margin-left: 140px;
    width: 40%;
    /* background-color: #F5F5F5; */
}

.title1,
.title2 {
    font-weight: bold;
    position: absolute;
    font-family: "SourceHanSansCN-Bold";
}

.title1 {
    left: 0px;
    z-index: 1;
    font-size: 90px;
    top: 20vh;
    /* animation-name: title1;
    animation-duration: 2s; */
}

.title2 {
    color: #316DF7;
    transform: scale(1.1, 1);
    left: 300px;
    /* top: 213px; */
    top: 22vh;
    font-size: 85px;
    animation-name: title2;
    animation-duration: 2s;
}

.summary {
    margin-top: 40vh;
    
}

.summary li {
    opacity: 0;
    color: #666666;
    font-size: 25px;
    position: relative;
    margin-bottom: 30px;
    /* animation-name: fontAppear;
    animation-duration: 2s; */
}

.summary li::before {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    position: absolute;
    top: 20px;
    left: -15px;
    background: #999;
    border-radius: 50%
}
.summaryContent span{
    font-family: "SourceHanSansCN-Bold";
    font-weight: bold;
}
.right {
    width: 67vw;
    background-color: #F5F5F5;
}

.right .communityImg {
    height: 100px;
    opacity: 0;
    position: relative;
    top: 85px;
    left: 100px;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.right .carImg {
    height: 100px;
    position: absolute;
    left: 1500px;
    top: 130px;
}

.right .goods-trainImg {
    position: absolute;
    right: 400px;
    top: 0;
}
.page3 {
    position: relative;
    overflow: hidden;
}
.chronicletitle{
    position: relative;
    /* opacity: 0; */
}
.chronicletitle::after{ content:"";   display:block; clear:both }
.chronicletitle1,
.chronicletitle2 {
    position: absolute;
    font-weight: bold;
    font-family: "SourceHanSansCN-Bold";
}

.chronicletitle1 {
    top: 269px;
    left: 10%;
    font-size: 80px;
    z-index: 1;
    opacity: 0;
}

.chronicletitle2 {
    top: 209px;
    left: 7%;
    font-size: 70px;
    color: #316DF7;
    opacity: 0;
    
}
.card{
    position: relative;
    opacity: 0;
    height: 150px;
    width: 180px;
}
.card .year{
    width: 80px;
    /* position: absolute;
    z-index: 1; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.card .year span{
    font-size: 30px;
    color: #151111;
    font-weight: 600;
    position: relative;
}
.card .year span::after{
    content: " ";
    display: block;
    height: 15px;
    width: 80px;
    background-image:linear-gradient(to right,#316DF6,#EEEFF1);
    background-repeat: no-repeat;
    position: absolute;
    top: 25px;
    z-index: -1;
}
.card .happened{
    /* position: absolute; */
    margin-top: 5px;
    color: #151111;
    font-weight: 600;
    font-size: 18px;
    line-height: 2;
}
.ring{
    width: 10px;
    height: 10px;
    /* background-color: #009966; */
    border-radius: 50%;
    border: 5px solid #151111;
}
.card1{
    top: 74%;
    left: 7%;
}
.card2{
    top: 54%;
    left: 19%;
}
.card3{
    top: 28%;
    left:31%;
}
.card4{
    top: 3%;
    left: 43%;
}
.card5{
    top: -24%;
    left: 55%;
}
.page4 {
    display: flex;
    background-image: url(../../public/images/futureBg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: 700px -310px;
}

.futuretitle1,
.futuretitle2 {
    font-weight: bold;
    height: 30px;
    position: relative;
    font-family: "SourceHanSansCN-Bold";
}

.futuretitle1 {
    z-index: 1;
    left: 105px;
    font-size: 80px;
    top: -150px;

}
.futuretitle2 {
    color: #316DF7;
    transform: scale(1.1, 1);
    left: 475px;
    top: -148px;
    font-size: 60px;
}
.futureContent {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    top: 300px;
    margin-left: 50px;
    /* animation-name: futureContent;
    animation-duration: 2s; */
    opacity: 0;
}
.futureImg{
    position: relative;
    
}
.futureImg1,.futureImg2{
    position: absolute;
    left: 1110px;
    top: 180px;
    
}
.futureImg1{
    top: 44vh;
    left: 54%;
    width: 900px;
    height: 533px;
}
.futureImg2{
    left: 71%;
    opacity: 0;
    z-index: 2;
    /* width: 500px; */
    /* height: 800px; */
}
.futureImg1 img{
    /* width: 900px; */
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}
.mask{
    position: absolute;
    top: 404px;
    left: 1056px;
    z-index: 1;
    width: 900px;
    height: 533px;
    background-color: #F5F5F5;
    /* background: linear-gradient(#F5F5F5 0%); */
}
.futureImg2 img{
    width: auto;
    height: auto;
    max-width: 93%;
    max-height: 100%;
}

@keyframes animate{
    from {
        top : 404px;
    }
    to {
        top :-300px;
    }
}
@keyframes summaryContent{
    from{
        opacity: 0;
        left: -150px;
    }
    to{
        opacity: 1;
        left: 130px;
    }
}
@keyframes whatbg{
    from{
        opacity: 0;
        top: -10px;
    }
    to{
        opacity: 1;
        top: -140px;
    }
}
@keyframes page1leave{
    from{
        left: 130px;
    }
    to{
        left: -50px;
    }
}
.mouseMoveIn{
cursor: pointer;
}
.line{
    width: 98px;
    height: 0;
    margin-top: 5px;
    border: 1px solid #151111;
}

@media screen and (max-width:1470px){
    .page4{background-size: 92% 79%;background-position: 667px -211px;}
    /* .chronicletitle2{top: 196px;}
    .chronicletitle1{top: 153px;} */
    .card .year span{font-size: 28px;}
    .card .happened{font-size: 16px;}
    .card1{top: 74%;}
    .card2{top: 51%;}
    .card3{top: 23%;}
    .card4{top: -3%;}
    .card5{top: -33%;}
    .futureImg1 {
        top: 41vh;
        left: 46%;
        width: 900px;
        height: 533px;
    }
    .futureImg1 img {
        /* width: 900px; */
        width: auto;
        height: auto;
        max-width: 88%;
        max-height: 87%;
    }
    .mask{left: 627px;}
    .futureImg2{
        top: 219px;
    }
}