@charset "utf-8";


.timeline{ overflow: hidden;}


@media only screen and (min-width:992px){


.timeline ul li {list-style-type: none;position: relative;width: 6px;margin: 0 auto;background: #d70c18; margin-bottom: -20px;}


.timeline ul li::before{content: '';position: absolute;left: 50%;top: 6px;transform: translateX(-50%);width: 9px;height: 9px;z-index: 7;border-radius: 100%;background: #d70c18;}


.timeline ul li:nth-child(2)::before{ background:#e13273;}


.timeline ul li:nth-child(3)::before{ background:#ff7f3b;}


.timeline ul li:nth-child(4)::before{ background:#ffbf01;}


.timeline ul li:nth-child(5)::before{ background:#71c7f4;}


.timeline ul li:nth-child(6)::before{ background:#599f70;}


.timeline ul li:nth-child(7)::before{ background:#957fc1;}


.timeline ul li:nth-child(8)::before{ background:#ff6b6b;}


.timeline ul li:nth-child(9)::before{ background:#f4a961;}


.timeline ul li:nth-child(10)::before{ background:#da94e9;}


.timeline ul li:nth-child(11)::before{ background:#63aceb;}


.timeline ul li:nth-child(12)::before{ background:#d70c18;}


.timeline ul li::after{content: '';position: absolute;left: 50%;top: 0;transform: translateX(-50%);width: 21px;height: 21px;z-index: 2;border-radius: 100%;border: 3px solid #d70c18;background: #fff;}


.timeline ul li:nth-child(2)::after{ border: 3px solid #e13273;}


.timeline ul li:nth-child(3)::after{ border: 3px solid #ff7f3b;}


.timeline ul li:nth-child(4)::after{ border: 3px solid #ffbf01;}


.timeline ul li:nth-child(5)::after{ border: 3px solid #71c7f4;}


.timeline ul li:nth-child(6)::after{ border: 3px solid #599f70;}


.timeline ul li:nth-child(7)::after{ border: 3px solid #957fc1;}


.timeline ul li:nth-child(8)::after{ border: 3px solid #ff6b6b;}


.timeline ul li:nth-child(9)::after{ border: 3px solid #f4a961;}


.timeline ul li:nth-child(10)::after{ border: 3px solid #da94e9;}


.timeline ul li:nth-child(11)::after{ border: 3px solid #63aceb;}


.timeline ul li:nth-child(12)::after{ border: 3px solid #d70c18;}


.timeline ul li:first-child::after{content: '';position: absolute;left: 50%;top: 0;transform: translateX(-50%);background: #d70c18; width:35px; height:35px;}


.timeline ul li div {position: relative; width: 320px;}


.timeline ul li.in-view .line::before{content: '';position: absolute;width: 100px;left: 0%;top: 19px;height: 4px;margin-top: -2px;background: #d70c18;}





.timeline ul li:nth-child(2) .line::before{ background:#e13273;}


.timeline ul li:nth-child(3) .line::before{ background:#ff7f3b;}


.timeline ul li:nth-child(4) .line::before{ background:#ffbf01;}


.timeline ul li:nth-child(5) .line::before{ background:#71c7f4;}


.timeline ul li:nth-child(6) .line::before{ background:#599f70;}


.timeline ul li:nth-child(7) .line::before{ background:#957fc1;}


.timeline ul li:nth-child(8) .line::before{ background:#ff6b6b;}


.timeline ul li:nth-child(9) .line::before{ background:#f4a961;}


.timeline ul li:nth-child(10) .line::before{ background:#da94e9;}


.timeline ul li:nth-child(11) .line::before{ background:#63aceb;}


.timeline ul li:nth-child(12) .line::before{ background:#d70c18;}


.timeline ul li div time {position: absolute;background: #d70c18;width: 130px;line-height: 38px;/* top: -15px; */border-radius: 38px;display: flex;justify-content: center;align-items: center;font-size: 24px;color: #fff;font-weight: bold;}


.timeline ul li div time::before{ width:100px; height:3px; border:2px solid #d70c18;}


.timeline ul li:nth-child(2) div time{ background:#e13273;}


.timeline ul li:nth-child(3) div time{ background:#ff7f3b;}


.timeline ul li:nth-child(4) div time{ background:#ffbf01;}


.timeline ul li:nth-child(5) div time{ background:#71c7f4;}


.timeline ul li:nth-child(6) div time{ background:#599f70;}


.timeline ul li:nth-child(7) div time{ background:#957fc1;}


.timeline ul li:nth-child(8) div time{ background:#ff6b6b;}


.timeline ul li:nth-child(9) div time{ background:#f4a961;}


.timeline ul li:nth-child(10) div time{ background:#da94e9;}


.timeline ul li:nth-child(11) div time{ background:#63aceb;}


.timeline ul li:nth-child(12) div time{ background:#d70c18;}


.timeline ul li div div {display: flex;flex-direction: column;}


/*.timeline ul li div div p {text-align: center;}*/


.timeline ul li div .discovery { padding-top: 48px; line-height: 32px; margin-left: 20px; font-size:16px; color:#333333;font-weight: bold;}


.timeline ul li div .scientist{ margin-left: 20px; margin-top:5px; line-height:22px; font-size:14px; color:#666666;}


.timeline ul li:nth-of-type(odd) > div {padding-left: 100px;}


.timeline ul li:nth-of-type(even) > div {left: -390px;width: 310px;}


.timeline ul li:nth-of-type(even) > div .discovery{ width: 310px;}


.timeline ul li:nth-of-type(even) > div .scientist{ width: 310px;}


.timeline ul li:nth-of-type(even) .line::before{ left: 283px;}


.timeline ul li:nth-of-type(even) div time{right: 0;}


.timeline ul li div {visibility: hidden;opacity: 0;transition: all 0.5s ease-in-out;bottom: 7px;}


.timeline ul li:first-child div{ bottom:0;}


.timeline ul li:nth-of-type(odd) div {transform: translate3d(100px, -10px, 0) rotate(10deg);}


.timeline ul li:nth-of-type(even) div {transform: translate3d(-100px, -10px, 0) rotate(10deg);}


.timeline ul li.in-view div {transform: none;visibility: visible;opacity: 1;}


}


@media only screen and (max-width:992px){


.timeline ul li {list-style-type: none;position: relative;width: 6px;margin: 0 auto;background: #d70c18;margin-bottom: 0;padding-bottom: 20px;}


.timeline ul li::before{content: '';position: absolute;left: 50%;top: 16px;transform: translateX(-50%);width: 9px;height: 9px;z-index: 7;border-radius: 100%;background: #d70c18;}


.timeline ul li:nth-child(2)::before{ background:#e13273;}


.timeline ul li:nth-child(3)::before{ background:#ff7f3b;}


.timeline ul li:nth-child(4)::before{ background:#ffbf01;}


.timeline ul li:nth-child(5)::before{ background:#71c7f4;}


.timeline ul li:nth-child(6)::before{ background:#599f70;}


.timeline ul li:nth-child(7)::before{ background:#957fc1;}


.timeline ul li:nth-child(8)::before{ background:#ff6b6b;}


.timeline ul li:nth-child(9)::before{ background:#f4a961;}


.timeline ul li:nth-child(10)::before{ background:#da94e9;}


.timeline ul li:nth-child(11)::before{ background:#63aceb;}


.timeline ul li:nth-child(12)::before{ background:#d70c18;}


.timeline ul li::after{content: '';position: absolute;left: 50%;top: 10px;transform: translateX(-50%);width: 21px;height: 21px;z-index: 2;border-radius: 100%;border: 3px solid #d70c18;background: #fff;}


.timeline ul li:nth-child(2)::after{ border: 3px solid #e13273;}


.timeline ul li:nth-child(3)::after{ border: 3px solid #ff7f3b;}


.timeline ul li:nth-child(4)::after{ border: 3px solid #ffbf01;}


.timeline ul li:nth-child(5)::after{ border: 3px solid #71c7f4;}


.timeline ul li:nth-child(6)::after{ border: 3px solid #599f70;}


.timeline ul li:nth-child(7)::after{ border: 3px solid #957fc1;}


.timeline ul li:nth-child(8)::after{ border: 3px solid #ff6b6b;}


.timeline ul li:nth-child(9)::after{ border: 3px solid #f4a961;}


.timeline ul li:nth-child(10)::after{ border: 3px solid #da94e9;}


.timeline ul li:nth-child(11)::after{ border: 3px solid #63aceb;}


.timeline ul li:nth-child(12)::after{ border: 3px solid #d70c18;}


.timeline ul li:first-child::after{content: '';position: absolute;left: 50%;top: 0;transform: translateX(-50%);background: #d70c18; width:35px; height:35px;}


.timeline ul li div {position: relative;width: 320px;}


.timeline ul li.in-view .line::before{content: '';position: absolute;width: 32px;left: 0%;top: 27px;height: 4px;margin-top: -2px;background: #d70c18;}


.timeline ul li:first-child .line::before{ top: 20px;}


.timeline ul li:nth-child(2) .line::before{ background:#e13273;}


.timeline ul li:nth-child(3) .line::before{ background:#ff7f3b;}


.timeline ul li:nth-child(4) .line::before{ background:#ffbf01;}


.timeline ul li:nth-child(5) .line::before{ background:#71c7f4;}


.timeline ul li:nth-child(6) .line::before{ background:#599f70;}


.timeline ul li:nth-child(7) .line::before{ background:#957fc1;}


.timeline ul li:nth-child(8) .line::before{ background:#ff6b6b;}


.timeline ul li:nth-child(9) .line::before{ background:#f4a961;}


.timeline ul li:nth-child(10) .line::before{ background:#da94e9;}


.timeline ul li:nth-child(11) .line::before{ background:#63aceb;}


.timeline ul li:nth-child(12) .line::before{ background:#d70c18;}


/*.timeline ul li div .time {position: absolute;background: #d70c18; width: 100px; line-height: 38px; top: -15px; border-radius: 38px; display: flex; justify-content: center;align-items: center;font-size: 24px;color: #fff;font-weight: bold;}*/


/*.timeline ul li div .time{background: #d70c18;}*/


.timeline ul li div time{background:#d70c18;width: 110px;line-height: 35px;display: block;font-size: 16px;border-radius: 38px;text-align: center;color: #fff;font-weight: bold;}





.timeline ul li:nth-child(2) div time{background:#e13273;width: 110px;line-height: 35px;display: block;font-size: 16px;border-radius: 38px;text-align: center;color: #fff;font-weight: bold;position: -5px;}


.timeline ul li:nth-child(3) div time{ background:#ff7f3b;}


.timeline ul li:nth-child(4) div time{ background:#ffbf01;}


.timeline ul li:nth-child(5) div time{ background:#71c7f4;}


.timeline ul li:nth-child(6) div time{ background:#599f70;}


.timeline ul li:nth-child(7) div time{ background:#957fc1;}


.timeline ul li:nth-child(8) div time{ background:#ff6b6b;}


.timeline ul li:nth-child(9) div time{ background:#f4a961;}


.timeline ul li:nth-child(10) div time{ background:#da94e9;}


.timeline ul li:nth-child(11) div time{ background:#63aceb;}


.timeline ul li:nth-child(12) div time{ background:#d70c18;}


.timeline ul li div div { display: block;/* flex-direction: column; */}


/*.timeline ul li div div p {text-align: center;}*/


.timeline ul li div .discovery {padding-top: 15px;line-height: 23px;margin-left: 15px;font-size: 14px;color:#333333;font-weight: bold;}


.timeline ul li div .scientist{margin-left: 15px;margin-top:5px;line-height: 20px;font-size: 12px;color:#666666;}


.timeline ul li:nth-of-type(odd) > div {padding-left: 30px;}


.timeline ul li:nth-of-type(even) > div {left: -390px;width: 310px;}


.timeline ul li:nth-of-type(even) > div .discovery{/* width: 310px; */}


.timeline ul li:nth-of-type(even) > div .scientist{width: auto;}


.timeline ul li:nth-of-type(even) .line::before{left: 0%;}


.timeline ul li:nth-of-type(even) div time{right: 0;left: 0;}


.timeline ul li div {visibility: hidden;opacity: 0;transition: all 0.5s ease-in-out;bottom: 7px;}


.timeline ul li:first-child div{ bottom:0;}


.timeline ul li:nth-of-type(odd) div {transform: translate3d(100px, -10px, 0) rotate(10deg);}


.timeline ul li:nth-of-type(even) div {transform: translate3d(-100px, -10px, 0) rotate(10deg);}


.timeline ul li.in-view div {transform: none;visibility: visible;opacity: 1;width: calc(100vw - 91px);}





.line{ padding-top: 10px;}


.timeline ul li:first-child .line{padding-top: 5px;}





.timeline ul li {margin-left: 20px;}


.timeline ul li div {width: 250px;flex-direction: column;}


.timeline ul li div div {width: 80%;margin: 0;}


.timeline ul li:nth-of-type(even) > div {left: 0;padding-left: 30px;}


}


/*@media only screen and (max-width: 576px){


.timeline ul li {margin-left: 20px;}


.timeline ul li div{width: 100px;}


.timeline ul li:nth-of-type(even) > div {left: 45px;}


}*/