.history{padding-top:40px;padding-bottom:60px;}
.history h3 {font-size:30px;color:#333;text-align:center;font-weight:bold;}
.history .list {position:relative;width:1000px;margin:40px auto 0;box-sizing:border-box;}
.history .item {position:relative;width:100%;display:flex;align-items:center;padding:20px 0;}
.history .item::before {content:"";position:absolute;width:4px;top:0;bottom:0;left:6px;background-color:#6477e2;height:100%;}
.history .item .content {flex:1;margin-left:30px;}
.history .item .content p {font-size:21px;color:#555;line-height:24px;font-weight:600;}
.history .item .content p ~ p {margin-top:10px;}
.history .item .date {display:flex;align-items:center;background:url(https://okki-shop.oss-cn-hangzhou.aliyuncs.com/884/upload/sort/005928487412c4e25e8dd528bd00f9f00d41233f8d6b5575e54cd02b8e80b77e.png) no-repeat left center;padding:0 0 0 124px;}
.history .item .txt{background:var(--color-primary);display:flex;justify-content:center;align-items:center;width:150px;height:50px;}
.history .item .txt img{height:40px;}
.history .item .txt span {font-size:24px;color:#fff;font-weight:900;}

.history .item .date::before {right:auto;left:-136px;background:url(https://okki-shop.oss-cn-hangzhou.aliyuncs.com/884/upload/sort/da2e20273d71ed646565c0ded6a5dcda7b96659b34dd3f3f335f55da453a35f9.png) no-repeat;top:38px;}

@media screen and (max-width:1024px) {
.history .list{width:100%;}
.history .item .content p{font-size:20px;}
}

@media screen and (max-width:768px) {
.history{padding-top:20px;padding-bottom:40px;}
.history .item .date{padding:0 0 0 80px;} 
.history .item .txt{width:120px;height:46px;}
.history .item .txt img{height:35px;}
.history .item .txt span {font-size:20px;}  
.history .item .content{margin-left:25px;}  
.history .item .content p{font-size:18px;}  
}

@media screen and (max-width:576px) {
.history .item .date{padding:0 0 0 60px;} 
.history .item .txt{width:100px;height:44px;}  
.history .item .txt img{width:auto;height:30px;}
.history .item .txt span {font-size:18px;}    
.history .item .content{margin-left:20px;}    
.history .item .content p{font-size:16px;}    

  

@media screen and (max-width:480px) {
.history .item{padding:15px 0;}
.history .item .date{padding:0 0 0 45px;}  
.history .item .txt{width:80px;height:40px;}  
.history .item .txt img{width:auto;height:20px;}
.history .item .txt span {font-size:16px;}    
.history .item .content{margin-left:20px;}    
.history .item .content p{font-size:15px;font-weight:400}    
}
  
@media screen and (max-width:420px) {
.history .item{padding:15px 0;}
.history .item .date{padding:0 0 0 35px;}  
.history .item .txt{width:80px;height:36px;}  
.history .item .txt span {font-size:15px;}    
.history .item .content{margin-left:15px;}    
}