@charset "utf-8";
html,body{height: 100%;}
/* svg */
.red{
    display:none;
}
.show>svg .red{
    display:block;

    stroke-dasharray: 281;
    stroke-dashoffset: 281;
    -webkit-animation: dash 0.65s linear;
    -moz-animation: dash 0.65s linear;
    -o-animation: dash 0.65s linear;
    animation: dash 0.65s linear;

    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

    -webkit-animation-delay:0.65s;
    -moz-animation-delay:0.65s;
    -o-animation-delay:0.65s;
    animation-delay:0.65s;
    
}
.show>svg:last-child .red{
    -webkit-animation-delay:1.3s;
    -moz-animation-delay:1.3s;
    -o-animation-delay:1.3s;
    animation-delay:1.3s;
}
@keyframes dash
{
    from{
        stroke-dashoffset: 281;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@-moz-keyframes dash /* Firefox */
{
    from{
        stroke-dashoffset: 281;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@-webkit-keyframes dash /* Safari ºÍ Chrome */
{
    from{
        stroke-dashoffset: 281;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@-o-keyframes dash /* Opera */
{
    from{
        stroke-dashoffset: 281;
    }
    to {
        stroke-dashoffset: 0;
    }
}




/* ÄÚÈݲ¿·Ö */
/* box */
.box{
    width:100%;
    padding: 0 0.15rem;
    box-sizing: border-box;
}

div>.yearDivBox:first-child{padding-bottom: 0.45rem}
div>.yearDivBox:first-child>.yearDiv{margin-left: 0!important;margin-top: 0;}
.yearDivBox{
    position: relative;
    overflow: hidden;
}

svg{width: 30%;position: absolute;}

.box>.oh:first-child .yearDiv{
    margin-top:0;
}

div>.yearDivBox.pLeft>svg:first-child{
    left: 0;
}
div>.yearDivBox.pLeft>svg:last-child{
    right: -1%;
    bottom: -9%;
}
div>.yearDivBox.pRight>svg:first-child{
    right: 0;
}
div>.yearDivBox.pRight>svg:last-child{
    left: -1%;
    bottom: -8%;
}

.box div.yearDiv{
    padding:0;
}
.box div.yearDiv{
    float: left;
    height: 0.7rem;
    width: 47%;
    line-height: 0.7rem;
    color:#fff;
    background:#DA2727;
    font-size: 0.22rem;
    text-align: center;
    margin-left: 31%;
    margin-top: 21%;
    z-index: 2;
}
.box .pLeft div.yearDiv{
    margin-left: 23%;
}
.box .pRight div.yearDiv{}
.box div.item{
    padding-bottom:0.45rem;
    position: relative;
}
.box>.yearDivBox:first-child{
    padding-left: 0;
}
.item.pLeft{
    padding-left:0.25rem;
}
div>.yearDivBox.item::after,div>.yearDivBox.item::before{display: none;}
div>.yearDivBox:first-child::before,.item.pLeft::before,.item.pRight::before{
    position: absolute;
    display: block;
    content: '';
    width: 0;
    height: 100%;
    top: 0;
    bottom: 0;
    border-left: 1px solid #f1f1f1;
}
div>.yearDivBox:first-child::before,.item.pLeft::before,div>.yearDivBox:first-child::after,.item.pLeft::after{
    left: 0;
}
.item.pRight::before,.item.pRight::after{
    right: 0;
}
div>.yearDivBox:first-child::after,.item.pLeft::after,.item.pRight::after{
    position: absolute;
    display: block;
    content: '';
    width: 0;
    height: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    border-left: 1px solid #DA2727;
}
div>.yearDivBox.show:first-child::after,.item.pLeft.show::after,.item.pRight.show::after{
    -webkit-animation: showHeight 0.65s linear;
    animation: showHeight 0.65s linear;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes showHeight {
    to {
        height: 100%;
    }
}
@keyframes showHeight {
    to {
        height: 100%;
    }
}


.item.pRight{
    padding-right:0.25rem;
    text-align: right;
}
.box>.item:last-child::before,.box>.item:last-child::after{display: none;}
.box .year{
    font-size: 0.2rem;
    font-weight: bold;
    margin-bottom: 0.25rem;
    line-height: 0.18rem;
    margin-top: -0.05rem;
}
.box .desc{
    position:relative;
    padding: 0;
    color:#666;
    font-size: 0.17rem;
    line-height: 0.23rem;
}
.box .item img{
    width: 0.3rem;
    position: absolute;
    top: -0.02rem;
    z-index: 2;
    transform: translateX(-50%);
    opacity:0;
}
.pLeft img{
    left: 0;
}
.item.pRight img{
    right: -0.3rem;
}
.box .item img.show{
    -webkit-animation: imgOpa 0.35s linear;
    animation: imgOpa 0.35s linear;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-delay:0.3s;
    -webkit-animation-delay:0.3s;
}
@-webkit-keyframes imgOpa {
    to {
        opacity:1;
    }
}
@keyframes imgOpa {
    to {
        opacity:1;
    }
}

.videoBox{padding:0.1rem;}
.videoBox video{width: 100%;}