@charset "UTF-8";

.all {
  width: 1200px;
  margin: 0 auto;
  padding: 100px 0 0 0;
}

@media (max-width: 1200px) {
  .all {
    width: 90%;
  }
}

@media (max-width: 1000px) {
  .all {
    padding: 150px 0 0 0;
  }
}

@media (max-width: 568px) {
  .all {
    padding: 120px 0 0 0;
  }
}

@media (max-width: 460px) {
  .all {
    width: 85%;
  }
}
 
 
.all-milestone {
  margin: 0 auto -80px auto;
}

@media (max-width: 460px) {
  .all-milestone {
    width: 85%;
  }
}
    
      
.milestone {position: relative;
  width: 1000px;
  margin: 30px auto 0 auto;
  padding: 0 0 80px 0;
}

@media (max-width: 1200px) {
  .milestone {
    width: 90%;
  }
}

.milestone-list {
  background: url(../images/milestone-bg-a.png) repeat-y 35px 0;/*transform: rotate(90deg);*/
}

@media (max-width: 460px) {
  .milestone-list {
    background: url(../images/milestone-bg-a.png) repeat-y 10px 0;
  }
}

.milestone-top {
  background: url(../images/milestone-bg-b.png) no-repeat 28px 6px;
  padding: 0 0 30px 130px;
  margin: 0 0 0 0;
  position: relative;
}

@media (max-width: 460px) {
  .milestone-top {
    background: url(../images/milestone-bg-b.png) no-repeat 3px 6px;
    padding: 0 0 30px 78px;
  }
}

.milestone-year {
  font-size: 34px;
  color: #296caf;
  font-weight: bold;
  line-height: 40px;
  text-align: left;
  /*padding: 20px 0 20px 0;*/
  margin: 0 0 10px 0;position: relative;
  top: -60px;
}

.milestone-month {
  color: #04b7b3;
  font-size: 22px;
  font-weight: bold;
  position: absolute;
  top: -30px;
  left: 65px;
}

@media (max-width: 460px) {
  .milestone-month {
    left: 23px;
    font-size: 20px;
  }
}

.milestone-text {
  margin: 0 0 70px 0;text-align: left;
}

.milestone-text span {
  display: inline-block;
  vertical-align: top;
 // width: 12%;
  margin: 0 10px 10px 0;
}

@media (max-width: 1200px) {
  .milestone-text span {
    width: 15%;
  }
}

@media (max-width: 1000px) {
  .milestone-text span {
    width: 100%;
  }
}

.milestone-text p {
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  //width: 86%;
  line-height: 28px;
}

@media (max-width: 1200px) {
  .milestone-text p {
    width: 80%;
  }
}

@media (max-width: 1000px) {
  .milestone-text p {
    width: 100%;
  }
}

.milestone-text b {
  font-size: 14px;
  color: #fff;
  padding: 5px 10px;
  margin: 0 20px 0 0;
  font-weight: normal;
}

@media (max-width: 460px) {
  .milestone-text {
    margin: 0 0 40px 0;
  }
}

.milestone-end{
  padding: 0 0 0 26px;text-align: left;
}

@media (max-width: 460px) {
  .milestone-end{
    padding: 0 0 0 0;
  }
}


 
.color-m17 {
  background:  #B88F48 ;
}






.allPC {
  width: 1200px;
  margin: 0 auto;
  padding: 100px 0 0 0;
} 
  
.milestonePC {
  width: 1000px;
  margin: 30px auto 0 auto;
  padding: 0 0 80px 0; 
  background: url(milestone-bg-aPC.png) repeat-x 35px 0;
  background-position: 20px 33px;position: relative;
}




.milestone-topPC {
  background: url(milestone-bg-bPC.png) no-repeat 65px 11px;
  position: relative;margin-top: 15px;display: flex; 
  width: 16%;
  justify-content: center;float: left;
}

.milestone-yearPC {
  font-size: 34px;writing-mode: vertical-lr;
  color: #5a35b8;
  font-weight: bold;
  line-height: 40px;
  
  padding: 20px 0 20px 0;
  margin: 0 0 100px 0;position: absolute;
  width: 34px;
  height: 650px;margin-left: -50px;text-align: left;letter-spacing: 3px;
}
.milestone-textPC {
  margin: 0 0 70px 0;margin-top: 130px;width: 40px;margin-left: -26px;
}

.milestone-textPC span {
  display: inline-block;
  vertical-align: top;
  margin: 0 10px 10px 0;
  background: #B88F48;
  padding: 5px 10px;writing-mode: vertical-lr;letter-spacing: 3px;
  display: flex;
}
.milestone-textPC p { 
  font-size: 16px;
  writing-mode: vertical-lr;margin: auto;padding-left: 3px;
}

.milestone-textPC b {
  font-size: 18px;
  color: #fff;
 letter-spacing: 3px;
  font-weight: normal;
}

.milestone-endPC{
  padding: 0 0 0 26px;position: absolute;
  right: 0px;
  top: 20px;
}