body{
    background-color: #fff;
}

/*中间内容*/


.banner-inner {
    z-index: 1;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}
.banner-wrapper {
    position: relative;
    height: 0;
    padding-top: 23.5%;
}


.banner-box{
    position:relative;
    /* width:100%; 
    height:100%; */
}
.banner-img-box{
    z-index: 1;
    /* position: absolute; */
    top: 0;
    width: 100%;
    height: 100%;
}
.banner-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*面包屑*/
.navigation-box{
    background-color: #fff;
    color:#999999;
    padding-bottom:15px;
}
.navigation-content{
    height:80px;
    line-height:80px;
    border-bottom: 1px solid #EEEEEE;
}
.navigation-item{
    font-size: 20px;
    font-family: Source Han Sans SC VF-Normal, Source Han Sans SC VF;
    font-weight: 400;
    color: #999999;
    line-height: 23px;
}
.navigation-end{
    font-size: 20px;
    font-family: Source Han Sans SC VF-Normal, Source Han Sans SC VF;
    font-weight: 400;
    color: #333333;
    line-height: 23px;
}
.navigation-active{
    color:#21A63B;
    padding-bottom:27px;
    border-bottom:2px solid #21A63B;
}
.navigation-item:last-child{
    margin-right:0;
}

/*发展历程*/
.development-box{
    background: url('../../images/fzlc_bg@2x.png') no-repeat #F1F1F1;
   
    /* background-size: auto; */
}
.development-box .container{
    -moz-transform: scale(1, 1);
}
.outerBox {
    /* 竖线样式 高度根据事件的多少调整*/
    width: 23px;
    min-height: 100vh;
    height:300vh;
    background: #14A83B;
    border-left:5px solid #000000 ; 
    border-right:5px solid #000000 ;
    margin: 0 auto;
    position: relative;
    -webkit-animation: heightSlide 2s linear;
}

@-webkit-keyframes heightSlide {

    /* 竖线的动画效果：以百分比来规定改变发生的时间，0% 是动画的开始时间，100% 动画的结束时间 */
    0% {
        height: 0;
    }

    100% {
        height: 900px;
    }
}

.outerBox:after {
    /* 竖线末尾文字样式 */
    /* content: '未完待续...'; */
    width: 100px;
    color: rgb(84, 84, 85);
    position: absolute;
    margin-left: -47px;
    text-align: center;
    bottom: -30px;
    -webkit-animation: showIn 5.5s ease;
}
.dateBox .date-item{
    background: url('../../images/fzlc_y@2x.png') no-repeat;
    background-size: 100% 100%;
    padding:30px 20px 30px 40px;
}
.date-img{
    width:642px;
    height:340px;
    margin-top:20px;
    margin-bottom:22px;
}

.dateLeftBox .date-item{
    background: url('../../images/fzlc_z@2x.png') no-repeat;
    padding:30px 45px 30px 20px;
    background-size: 100% 100%;
}

.outerBox .dateBox,
.outerBox .dateLeftBox {
    /* 球球的样式 */
    position: absolute;
    margin-left: -6px;
    margin-top: 213px;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    border: 4px solid #000;
    background: #000;
    -webkit-transition: all 0.5s;
    -webkit-animation: showIn ease;
}

.outerBox .dateBox:nth-child(1) {
    /* 第一个事件 设置动画在几秒内完成 */
    -webkit-animation-duration: 1s;
}

.outerBox .dateLeftBox:nth-child(2) {
    /* 第二个事件 设置动画在几秒内完成 */
    -webkit-animation-duration: 1.5s;
}

.outerBox .dateBox:nth-child(3) {
    /* 第三个事件 设置动画在几秒内完成 */
    -webkit-animation-duration: 2s;
}

.outerBox .dateLeftBox:nth-child(4) {
    /* 第四个事件 设置动画在几秒内完成 */
    -webkit-animation-duration: 2.5s;
}

.outerBox .dateBox:nth-child(5) {
    /* 第五个事件 设置动画在几秒内完成 */
    -webkit-animation-duration: 3s;
}

.outerBox .dateLeftBox:nth-child(6) {
    /* 第六个事件 设置动画在几秒内完成 */
    -webkit-animation-duration: 3.5s;
}

.outerBox .dateBox:nth-child(7) {
    /* 第七个事件 设置动画在几秒内完成 */
    -webkit-animation-duration: 4s;
}

.outerBox .dateLeftBox:nth-child(8) {
    /* 第八个事件 设置动画在几秒内完成 */
    -webkit-animation-duration: 4.5s;
}

@-webkit-keyframes showIn {

    /* 球球、竖线、左右的模块的动画 */
    0%,
    70% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.outerBox .dateBox h2,
.outerBox .dateLeftBox h2 {
    /* 日期的样式 */
    /* position: absolute; */
    /* margin-left: -120px; */
    font-size: 38px;
    cursor: pointer;
    font-weight: bold;
    color: #333333;
    /* -webkit-animation: showIn 3s ease; */
}
.date-date{
    font-size: 38px;
    font-family: Source Han Sans SC VF-Bold, Source Han Sans SC VF;
    font-weight: bold;
    color: #333333;
    line-height: 45px;
    border-bottom: 1px solid #eee;
    padding-bottom:20px;
}
.outerBox .dateLeftBox h2 {
    /* 右边日期的样式 */
    /* margin-left: 60px; */
    /* margin-left:420px; */
    width: 100%;
}

.outerBox .dateBox:hover,
.outerBox .dateLeftBox:hover {
    /* 触摸事件后球球的样式 */
    background: #000;
    box-shadow: 0 0 2px 2px rgba(255, 255, 255, 0.4);
    width:40px;
    height:40px;
    margin-left:-14px;
    padding:0 !important;
}

.outerBox .dateBox .date-item,
.outerBox .dateLeftBox .date-item {
    /* 左右事件的样式 */
    position: absolute;
    top: -70px;
    /* margin-top: -15px; */
    left: 40px;
    width: 700px;
    /* width:100%; */
    height: 615px;
    /* border: 2px solid rgb(84, 84, 85); */
    border-radius: 6px;
    z-index: 2;
    overflow: hidden;
    cursor: pointer;
    /* -webkit-animation: showIn 5s ease; */
    -webkit-transition: all 0.5s;
    /* padding:0 !important; */
    -moz-transform: scale(.95,.95);
}

.outerBox .dateLeftBox .date-item {
    /* 左边事件的样式 */
    left: -737px;
}


.outerBox .dateBox .date-item p,
.outerBox .dateLeftBox .date-item p {
    /* 左右事件的字体样式 */
    color: rgb(84, 84, 85);
    font-weight: bold;
    text-align: center;
}

.outerBox .dateBox:before,
.outerBox .dateLeftBox:before {
    /* 右边事件的角标样式 */
    content: '';
    position: absolute;
    top: -3px;
    left: 37px;
    width: 0px;
    height: 0px;
    /* border: 7px solid transparent; */
    border-right: 7px solid rgb(84, 84, 85);
    z-index: -1;
    -webkit-animation: showIn 5s ease;
}

.outerBox .dateLeftBox:before {
    /* 左边事件的角标样式 */
    left: -34px;
    /* border: 7px solid transparent; */
    border-left: 7px solid rgb(84, 84, 85);
}

.outerBox .dateBox .date-item .date-desc,
.outerBox .dateLeftBox .date-item .date-desc {
    /* 左右事件触摸展开后内容的样式 */
    list-style: none;
    line-height:41px;
    /* padding: 4px; */
    /* border-top: 2px solid rgb(84, 84, 85); */
    color: #333;
    font-size: 24px;
}
@media screen and (min-width:1000px) and (max-width:1800px) {
    .place{
        -moz-transform: scale(1, 1);
        zoom: 0.95;
        zoom: 95%;
    }
    
    .outerBox .dateBox .date-item, .outerBox .dateLeftBox .date-item{
        width:600px;
        height:auto;
    }
    .date-img{
        max-width: 100%;
        height:auto;
    }
    .outerBox .dateLeftBox .date-item {
        left: -616px;}
        .outerBox .dateLeftBox h2{
            /* margin-left:305px; */
            text-align: end;
        }
        .outerBox .dateBox .date-item:hover,
.outerBox .dateLeftBox .date-item:hover {
    /* 触摸事件后的高度 */
   
    /* width: 765px;
    height: 675px;
    -moz-transform: scale(.9 , .9); */
}
.outerBox .dateBox .date-item:hover .date-desc,
.outerBox .dateLeftBox .date-item:hover .date-desc{
    /* 触摸事件后的高度 */
   font-size:32px;
}
.outerBox .dateLeftBox .date-item:hover {
    /* left:-783px;
    -moz-transform: scale(.9 , .9); */
}
.outerBox .dateBox .date-item:hover .date-img,
.outerBox .dateLeftBox .date-item:hover .date-img{
    /* 触摸事件后的高度 */
   /* width:682px;
   height:361px;
   -moz-transform: scale(.9 , .9); */
}
    
}
@media (max-width: 768px) {
    /*banner 和 导航*/
    .banner-title{
        font-size:20px;
    }
    .banner-wrapper {
        padding-top: 47%;
    }
    .banner-wrapper {
        position: relative;
        height: 0;
        padding-top: 23.5%;
    }
    .navigation-item,.navigation-end{
        font-size:16px;
    }
    .navigation-content{
        height:60px;
        line-height:60px;
    }


    .outerBox{
        width:10px;
        border-left: 2px solid #000000;
        border-right: 2px solid #000000;
    }
    .dateBox .date-item {
        background: url(../../images/fzlc_y@2x.png) no-repeat;
        background-size: 100% 100%;
        padding: 10px 10px 10px 15px;
    }
    .dateLeftBox .date-item {
        background: url(../../images/fzlc_z@2x.png) no-repeat;
        background-size: 100% 100%;
        padding: 10px 15px 10px 10px;
    }
    .outerBox .dateBox h2, .outerBox .dateLeftBox h2{
        font-size:16px;
        
    }
    .outerBox .dateLeftBox h2{
        /* margin-left:60px; */
        margin-left:0;
        text-align: right;
    }
    .date-img {
        width: 100%;
        height: auto;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .outerBox .dateBox .date-item, .outerBox .dateLeftBox .date-item{
        width:170px;
        height:auto;
        top:-24px;
    }
    .outerBox .dateBox .date-item .date-desc, .outerBox .dateLeftBox .date-item .date-desc{
        font-size:12px;
        line-height: 20px;
    }
    .outerBox .dateBox .date-item{
        left:15px;
    }
    .outerBox .dateLeftBox .date-item{
        left: -175px;
    }
    .outerBox .dateBox, .outerBox .dateLeftBox {
        margin-left: -2px;
        width: 10px;
        height: 10px;
        border:0;
        padding:0 !important;
        margin-top: 100px;
    }
    .outerBox .dateBox:hover, .outerBox .dateLeftBox:hover {
        width: 15px;
        height: 15px;
        padding:0 !important;
        margin-left: -4px;
    }
    .date-date{
        padding-bottom:0;
    }
   
}