.timeline>li h2,.product-info h1 {
font-family:'Lato','Arial',Microsoft JhengHei,Lucida Sans Unicode,sans-serif;
font-weight:400;
}
/*timeline*/
.timeline {
list-style:none;
padding:20px 0 20px;
position:relative;
margin-bottom:10px;
}
/*center line*/
.timeline:before {
top:35px;
bottom:0;
position:absolute;
content:" ";
width:1px;
left:50%;
top:-37px;
margin-left:-2px;
background:#a69abd;
}
.timeline>li,.editor .timeline>li {
margin-top:30px;
position:relative;
}
.timeline>li:first-child,.editor .timeline>li:first-child {
margin-top:0;
}
.timeline>li .timeline-panel img,.timeline>li .timeline-panel-r img,.editor .timeline>li .timeline-panel img,.editor .timeline>li .timeline-panel-r img {
max-width:100%;
}
.editor .timeline>li:before,.timeline>li:before,.timeline>li:after {
content:" ";
display:table;
width:0;
}
.timeline>li:after {
clear:both;
}
/*right item*/
.editor .timeline>li>.timeline-panel,.timeline>li>.timeline-panel {
width:44%;
float:right;
border-bottom:1px solid #a69abd;
padding:0px;
position:relative;
padding:0 2% 20px 2%;
text-align:left;
background:rgba(255,255,255,0.1);
border-radius:6px;
}
/*dot*/
.timeline>li .timeline-badge {
color:#fff;
width:16px;
height:16px;
line-height:60px;
font-size:15px;
text-align:center;
position:absolute;
top:20px;
left:50%;
margin-left:-9px;
background-color:#bbdacf;
z-index:100;
border-top-right-radius:50%;
border-top-left-radius:50%;
border-bottom-right-radius:50%;
border-bottom-left-radius:50%;
}
/*h2*/
.timeline>li h2 {
color:#fff;
font-size:35px;
padding:0;
margin:0;
line-height:150%;
font-weight:normal;
}
/*p*/
.timeline>li p {
padding:0;
line-height:180%;
}
.timeline>li .timeline-panel-r h2 {
font-size:28px;
font-weight:bolder;
}
.timeline>li:nth-child(2n) .timeline-panel {
float:left;
width:42%;
}
/*right item arrow*/
.timeline>li .timeline-panel:after {
display:block;
content:"";
left:-16px;
top:19px;
position:absolute;
border-style:solid;
border-width:10px 16px 10px 0;
border-color:transparent rgba(255,255,255,0.1) transparent transparent;
}
/*left item
arrow*/
.timeline>li:nth-child(2n) .timeline-panel:after {
display:block;
content:"";
left:auto;
right:-16px;
top:19px;
position:absolute;
border-style:solid;
border-width:10px 0 10px 16px;
border-color:transparent transparent transparent rgba(255,255,255,0.1);
}
/** iphone & bootsrtap XS **/
@media screen and (max-width:768px) {
.editor .m-img100,.m-img100 {
width:100%;
max-width:100%;
}
/*end form*/
/*---- timeline----*/
.editor .timeline>li>.timeline-panel,.timeline>li>.timeline-panel {
float:none;
text-align:left;
width:90%;
margin:0 auto;
}
.editor .timeline>li>.timeline-panel:after,.timeline>li>.timeline-panel:after {
background:none;
}
.timeline>li:nth-child(2n) .timeline-panel:after {
border:none;
}
.editor .timeline>li>.timeline-panel p,.timeline>li>.timeline-panel p {
float:none;
}
.editor .timeline>li>.timeline-panel span,.timeline>li>.timeline-panel span {
width:100%;
float:none;
}
.editor .timeline>li>.timeline-panel span:first-child,.timeline>li>.timeline-panel span:first-child {
width:100%;
}
.timeline>li>.timeline-badge {
position:relative;
top:auto;
left:0px;
}
.timeline:before {
left:30px;
top:20px;
}
.timeline>li .timeline-panel:after {
display:none;
}
}.black-bg {
background:#485563;
/* fallback for old browsers */
background:-webkit-linear-gradient(to right,rgb(72,85,99),rgb(41,50,60));
/* Chrome 10-25,Safari 5.1-6 */
background:linear-gradient(to right,rgb(72,85,99),rgb(41,50,60));
/* W3C,IE 10+/ Edge,Firefox 16+,Chrome 26+,Opera 12+,Safari 7+ */
position:relative;
color:#ddd;
}
.editor {
line-height:220%;
}
.editor p {
padding-bottom:10px;
}
.editor ul {
padding-bottom:0px;
-webkit-padding-start:0px;
}
.editor ul li {
padding-left:30px;
position:relative;
}
.editor ul li:before {
background:#1f5a52;
margin-left:-20px;
content:'';
border-radius:11px;
width:8px;
height:8px;
display:block;
position:absolute;
top:15px;
}
.editor ul li img {
vertical-align:middle;
}
.padded-tb100 {
padding:100px 0;
}
.editor {
line-height:220%;
}
.width {
width:1200px;
margin:0 auto;
position:relative;
z-index:9;
}
@media screen and (max-width:1024px) {
.width {
width:95%;
max-width:95%;
}
}@media screen and (max-width:1199px) {
.width,.header,#top-wrap,.oe_menu {
width:100%;
min-width:100%;
}
}更新时间:2020-12-29 09:51:53
纯css实现自适应时间线