.tl {
position: relative;
margin: 50px auto;
padding: 40px 0;
width: 100%;
box-sizing: border-box;
}
.tl:before {
content: '';
position: absolute;
left: 50%;
width: 4px;
height: 100%;
background: #c5c5c5;
}
.tl ul {
margin: 0;
padding: 0;
}
.tl ul li {
list-style: none;
line-height: normal;
position: relative;
width: 50%;
box-sizing: border-box;
margin-bottom: 100px;
}
.tl ul li:nth-child(odd) {
float:left;
text-align: right;
clear: both;
padding-right: 60px;
}
.tl ul li:nth-child(even) {
float: right;
text-align: left;
clear: both;
padding-left: 60px;
}
.tl ul li a {
text-decoration: none;
}
.time-content {
display: block;
padding: 10px 20px 20px 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 3px 3px 5px silver;
max-width: 85%;
transition: .2s;
}
.time-content:hover {
box-shadow: 10px 10px 10px silver;
}
.tl ul li:nth-child(odd):before {
content: '';
position: absolute;
right: -24px;
top: 15px;
width: 45px;
height: 45px;
background: rgba(242, 48, 56, 1);
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(242, 48, 56, 0.2);
}
.tl ul li:nth-child(even):before {
content: '';
position: absolute;
left: -21px;
top: 15px;
width: 45px;
height: 45px;
background: rgba(242, 48, 56, 1);
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(242, 48, 56, 0.2);
}
.tl ul li:nth-child(odd) .time-content {
float: right;
}
.tl ul li:nth-child(even) .time-content {
float: left;
}
.tl ul li h3 {
margin: 0;
padding: 0;
font-weight: 600;
color: rgba(242, 48, 56, 1);
}
.tl ul li p {
margin: 10px 0 0;
padding: 0;
font-size: 19px;
color: black
}
.tl ul li .time-date h4 {
margin: 0;
padding: 0;
font-size: 35px;
font-weight: 600;
}
.tl ul li:nth-child(odd) .time-date {
position: absolute;
top: 15px;
right: -125px;
margin: 0;
color: #adabab;
}
.tl ul li:nth-child(even) .time-date {
position: absolute;
top: 15px;
left: -125px;
margin: 0;
color: #adabab;
}
@media only screen and (max-device-width: 1100px) {
.time-content {
max-width: 100%;
}
}
@media only screen and (max-device-width: 700px) {
.time-content {
margin-top: 80px;
}
.tl:before {
left: 18px;
width: 8px;
}
.tl ul li {
margin-bottom: 100px;
}
.tl ul li p {
font-size: 35px;
}
.tl ul li h3 {
font-size: 40px;
}
.tl ul li:nth-child(odd),
.tl ul li:nth-child(even) {
width: 100%;
text-align: left;
padding: 0;
padding-left: 100px;
}
.tl ul li:nth-child(odd):before,
.tl ul li:nth-child(even):before {
top: 0px;
left: -8px;
width: 60px;
height: 60px;
}
.tl ul li:nth-child(odd) .time-date,
.tl ul li:nth-child(even) .time-date {
top: 0px;
left: 100px;
right: inherit;
}
.tl ul li:nth-child(odd) .time-content,
.tl ul li:nth-child(even) .time-content {
float: left;
}
.tl ul li .time-date h4 {
font-size:45px;
}
}