.interactive-timeline { position: relative}

.interactive-timeline__progress {
    position: sticky;
    top: 40%;
    right: 0px;
    float: right;
    margin-top: 50px;
    width: 56px; z-index: 100; padding-top: 8px; 
    background: url('../images/titleunderline.png') no-repeat center top; background-size: 60px auto;
}

.interactive-timeline__link-items {
    margin: 0;
    padding: 0;
    list-style: none; background-color: #ffffff;
}

.interactive-timeline__year-marker {
    transition: .5s;
    border-bottom: #000000 1px solid;
    display: block; padding: 0 8px 0 12px; text-align: left; font-size: 16px; line-height: 24px; height: 24px; background: url(../images/timeline_itemsbg.png) no-repeat left top; background-size: 5px auto; color: #000000;
}

.interactive-timeline__year-marker.is-active { background: #c13c33; color: #ffffff;}

.timeline-article__image-column { grid-column: 1/span 5}
.timeline-article__content-column { grid-column: 6/span 7}
.timeline-article {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    /* padding: 20px 0; */ padding: 30px 0;
    }
.interactive-timeline__article-column {/* grid-column: 1/span 11;*/  grid-column: 1/span 12; /*border: #ff0000 1px solid; */padding-right: 20px;}
.interactive-timeline__year-column { grid-column: 13/span 2;}
.interactive-timeline__row {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(14, 1fr);
    grid-template-rows: auto; 
    padding: 20px 0;
    /* border-bottom: #dddddd 1px solid; */
}

.interactive-timeline__row+.interactive-timeline__row { 
    border-top: #f6f6f6 1px solid; padding-top: 20px;
    /* margin-top: var(--l-spacing-sub-section); margin-top: 20px;
    padding-top: calc(var(--l-spacing-title-a) - 1px);
    border-top: 1px solid var(--c-bd-divider); */
}
.interactive-timeline__row:not(.scrolled-into-view) { box-shadow: none;}
.interactive-timeline__row.scrolled-into-view .interactive-timeline__display-year {/*transform: scale(2.666666);*/ transform : scale(2.666666); transition: transform 750ms;}

.interactive-timeline__display-year {
    position: sticky;
    top: 40%; 
    /* top: 30%; */
    transform-origin: right top;
    transition: 1s; 
    text-align: right;
    font-size: 22px;
}

.interactive-timeline__article-row+.interactive-timeline__article-row { border-top:#f6f6f6 1px dashed;}

.timeline-article__content-column { display: block;/* padding: 1px 0; */ }

.timeline-article__title {
    min-height : 0;
    font-size: 20px;
    line-height: 1.1
}

.timeline-article__description {
    visibility : hidden;
    opacity    : 0;
    margin-top : 0;
    line-height: 0;
    transition : .5s 5s
}
.interactive-timeline__article-row.scrolled-into-view .timeline-article__description {
    visibility : visible;
    opacity    : 1;
    margin-top: 10px;
    /*  margin-top : var(--l-spacing-title-subtitle);
   line-height: 1.5; */
     font-size: 16px; line-height: 1.3;
    transition : line-height 250ms, margin 250ms, opacity 250ms 250ms, visibility 250ms 250ms
}
.timeline-article__image {
    width: 50%; border: #ffffff 2px solid;
    /* margin-left: auto; */ float: right;
    padding-top: 0;
    transition : 1s
}
.interactive-timeline__article-row .timeline-article__image .image_title {  opacity: 0; height: 0; transition: opacity .3s ease .7s; line-height: 1.2;  }
.interactive-timeline__article-row.scrolled-into-view .timeline-article__image { width: 100%; transition: 750ms 150ms;
    position: relative;
}
.interactive-timeline__article-row.scrolled-into-view .timeline-article__image .image_title { opacity: 1; height: auto;  position: absolute;
 width: 140%; bottom: 0; left: 100%; margin-left: 15px; z-index: 1; /*font-size: 16px; */ font-size: 15px; font-style: italic; color: #666666; padding-left: 20px;}
 .interactive-timeline__article-row.scrolled-into-view .timeline-article__image .image_title::before { float: left; width: 20px; color: #c13c33; content: '<'; margin-left: -20px;} 

/* @media (min-width:681px) and (max-width:1280px) {
    .interactive-timeline__container.container {
        padding-right: 70px;
    }
} */

.timelineyear_null .interactive-timeline__article-column { grid-column: 1 / span 14; padding-right: 0;}
.timelineyear_null .timeline-article__image-column { grid-column: 1 / span 4;}
.timelineyear_null .timeline-article__content-column {grid-column: 5 / span 8;}
.timelineyear_null .interactive-timeline__article-row .timeline-article__image .image_title { width: 200%; width: calc(200% + 30px)}

@media (min-width:768px) and (max-width:1500px) {
    .interactive-timeline__container.container {
        padding-right: 56px;  /*中屏时错开 progress 遮挡 year */
    }
}

@media (max-width:1200px) {
    .interactive-timeline__article-row.scrolled-into-view .timeline-article__image .image_title,.timelineyear_null .interactive-timeline__article-row.scrolled-into-view .timeline-article__image .image_title { display: none;}
}

@media (max-width:910px) {
    /* .timeline-article__image img {
        position: absolute;
        top     : 0;
        right   : 0;
        bottom  : 0;
        left    : 0
    }*/
    
    .interactive-timeline__article-column {grid-column: 1/span 4; /**/padding-right: 0px;}
    .interactive-timeline__year-column {grid-column: 5/span 2;}
    .interactive-timeline__row { grid-template-columns: repeat(6, 1fr); }
    .interactive-timeline__article-row.scrolled-into-view .timeline-article__image {  /*margin-top : 16px; padding-top: 56.25% */ height: auto;}
    .timeline-article__image {/* position: relative;height  : 0; */width   : 100%;} 
    .timeline-article__image .picHorizontal { padding-bottom: 0;}
    .interactive-timeline__article-row.scrolled-into-view .timeline-article__image .picHorizontal { padding-bottom: 56.25%; transition: all 1s;} 
    .timeline-article__title {margin-top: 15px;}

    .timeline-article { display: block;}
    .timeline-article__image-column { display: block; overflow: hidden;}
    .interactive-timeline__article-row.scrolled-into-view .timeline-article__image .image_title { display: block; width: 100%; position: static; margin-left: 0; padding-left: 0; margin-top: 5px; margin-bottom: 5px;}
    .interactive-timeline__article-row .timeline-article__image .image_title::before { display: none;}

    .timelineyear_null .timeline-article { display: grid;}
    .timelineyear_null .interactive-timeline__row { grid-template-columns: repeat(14, 1fr);}
    .timelineyear_null .interactive-timeline__article-column { grid-column: 1 / span 14;}
    .timelineyear_null .timeline-article__image-column { grid-column: 1 / span 4;}
    .timelineyear_null .timeline-article__content-column {grid-column: 5 / span 8;}
}
@media (max-width:768px) {
    .interactive-timeline__progress { display: none; }
    .interactive-timeline__row { grid-template-columns: repeat(4, 1fr); }
    .interactive-timeline__year-column { grid-column: 4/span 1;}
    .interactive-timeline__article-column { grid-column: 1/span 3; }
    .interactive-timeline__row.scrolled-into-view .interactive-timeline__display-year {transform : scale(1.2); color: #000000;}
    .interactive-timeline__display-year { color: #555555;}
    .timeline-article__title { font-size: 18px; line-height: 1.3; margin-top: 10px;}
    .interactive-timeline__article-row.scrolled-into-view .timeline-article__description { margin-top: 8px; font-size: 14px; line-height: 1.5; word-break: break-word;}

    .timelineyear_null .interactive-timeline__row,.timelineyear_null .timeline-article { display: block;}
    .timelineyear_null .interactive-timeline__article-row.scrolled-into-view .timeline-article__image .image_title { font-size: 14px; display: block; width: 100%; position: static; margin-left: 0; padding-left: 0; margin-top: 5px; margin-bottom: 5px;}
    
    /* .timelineyear_null .timeline-article { display: grid;}
    .timelineyear_null .interactive-timeline__row { grid-template-columns: repeat(14, 1fr);}
    .timelineyear_null .interactive-timeline__article-column { grid-column: 1 / span 14;}
    .timelineyear_null .timeline-article__image-column { grid-column: 1 / span 4;}
    .timelineyear_null .timeline-article__content-column {grid-column: 5 / span 8;} */
    
}