.about .head { height: auto; overflow: hidden; position: relative; }
.about .head:before { width: 2px; content: ""; background: #ed1451; position: absolute; top: 30px; bottom: 0px; left: 20px; }

.about .head .ul { display: flex; flex-wrap: wrap; padding-top: 30px; }
.about .head .ul .li { width: 100%; }
.about .head .ul .li .time { display: flex; align-items: center; padding-left: 35px; }
.about .head .ul .li .time i { width: 12px; height: 12px; border: #ed1451 solid 2px; border-radius: 50%; display: block; }
.about .head .ul .li .time span { line-height: 30px; font-size: 20px; color: #ed1451; font-weight: bold; display: block; padding-left: 10px; }
.about .head .ul .li .content { padding: 15px 0px 15px 55px; font-size: 14px; }
.about .head .ul .li .content img { max-width: 100%; display: block; }

.about .video { height: 240px; }

@media (min-width: 768px) {

 .about .head:before { left: 50px; }

 .about .head .ul .li .time { padding-left: 80px; }
 .about .head .ul .li .time span { line-height: 40px; font-size: 24px; padding-left: 10px; }
 .about .head .ul .li .content { padding: 25px 0px 25px 110px; font-size: 16px; }

 .about .video { height: 300px; }
}

@media (min-width: 1000px) {

 .about .head:before { left: 50%; margin-left: -1px; }

 .about .head .ul .li { width: 50%; }
 .about .head .ul .li .time span { line-height: 40px; font-size: 24px; }

 .about .head .ul .li.leftPart .time { flex-flow: row-reverse; margin-top: 50px; padding-left: 0px; padding-right: 30px; }
 .about .head .ul .li.leftPart .time span { padding-right: 20px; }
 .about .head .ul .li.leftPart .content { padding: 25px 65px 25px 0px; font-size: 16px; text-align: right; }

 .about .head .ul .li.rightPart .time { margin-top: 120px; margin-left: -50px; }
 .about .head .ul .li.rightPart .time span { padding-left: 20px; }
 .about .head .ul .li.rightPart .content { padding: 25px 0px 25px 65px; font-size: 16px; text-align: left; }

 .about .video { height: 360px; }
}

@media (min-width: 1200px) {

 .about .video { height: 450px; }
}