.timeline{ margin-top:100px}
.intro {
 margin:30px 0;
  padding: 10px 0;
}

 
.intro h2 {
  font-size: 25px; color:#137bc1;margin:5px 0;padding:0
}
.intro h3 {
  font-size: 20px;;margin:5px 0;padding:0
}

        .intro hr {
         width:50px;border-top:2px solid #137bc1
        }

       
/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline ul {
  background: #fff;
  padding: 50px 0;
}

.timeline ul li {
  list-style-type: none;
  position: relative;
  width: 1px;
  margin: 0 auto; 
  margin-top:-100px;
  background: #e0e0e0;
}

 
.timeline ul li .box {
  position: relative;
  bottom: 0;
  width: 400px;
  padding: 15px;  
}

.timeline ul li:nth-child(odd) .box{ padding-right:80PX; 
   background-image:url("/images/icon/l.png");background-position:right;background-repeat:no-repeat
  
}

.timeline ul li:nth-child(even) .box{ padding-left:60PX; 
   background-image:url("/images/icon/l2.png");background-position:left;background-repeat:no-repeat
   
} 

.box .val{
  display: block;
  font-size: 25px;
  font-weight: bold;
  margin:15px 0 5px 0;
}

.box .place{
      display: block;
  font-size: 15px;
  font-weight: bold;
  margin:10px 0 15px 0;
}
.timeline ul li:nth-child(odd) div {
  left: -400px;
}

.timeline ul li:nth-child(even) div::before {
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent #F45B69 transparent transparent;
}

.timeline ul li:nth-child(even) .box {
  left: 1px;
}

.timeline ul li:nth-child(odd) .box::before {
  right: -15px;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #F45B69;
}

 


/* EFFECTS
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline ul li::after {
  transition: background .5s ease-in-out;
}

.timeline ul li.in-view::after {
  background: #fff;
}

.timeline ul li .box {
  visibility: hidden;
  opacity: 0;
  transition: all .5s ease-in-out;
}

.timeline ul li:nth-child(odd) .box {
  transform: translate3d(200px, 0, 0);
}

.timeline ul li:nth-child(even) .box {
  transform: translate3d(-200px, 0, 0);
}

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


/* GENERAL MEDIA QUERIES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

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

  .timeline ul li .box {
    width: 250px;
  }
  .timeline ul li:nth-child(odd) .box {
    left: -289px;
    /*250+45-6*/
  }

 .timeline ul li:nth-child(even) .box{padding:0;background:none;}
.timeline ul li:nth-child(odd) .box{padding:0;background:none}
}
 .timeline ul li div{margin-bottom:20px}


@media screen and (max-width: 768px) {
    .timeline ul li {
        all:unset;
    margin-top:50px;
    clear:both;display:block
    
    }
     

.timeline ul li:nth-child(odd) .box{  
    background-position:left;background-repeat:no-repeat;background:none;padding:0
}

.timeline ul li:nth-child(even) .box{  
    background-position:left;background-repeat:no-repeat;background:none;padding:0;left:45px
}


  .timeline ul li {
    margin-left: 20px;
  }
  .timeline ul li .box {
        all:unset;
     width: calc(100vw - 91px);
    
      

  }
  .timeline ul li:nth-child(odd) .box {
    left: 45px;margin-bottom:20px
  }
  .timeline ul li:nth-child(odd) .box::before {
    left: -15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent #F45B69 transparent transparent;
  }
 
}