*, *::before, *::after {  box-sizing: border-box;}
#history .line {margin:60px 0 80px 0; border-top:2px dashed #ccc}
.m-content {  padding: 0px;  max-width: 100%;   position:relative;}
.m-content .year {position:absolute; text-shadow: 4px 4px 0 rgb(0 0 0 / 12%); font-size:50px; line-height:55px; 
 top:5px; width:45%; text-align:center; font-weight:600;  }
/*.m-content .year span.etc{display:block; padding:40px 0 }*/
.m-content .year span {display:block; position:relative; padding-bottom:50px; }
.m-content .year span::before { position: absolute;  top: 65px;    left: 49%;    display: block;    content: '';   
 width: 5px;    height: 30px;    background-color: #555;
    -webkit-transform: skew(-45deg);    transform: skew(-45deg);    -webkit-box-shadow: 4px 4px 0 0 rgb(0 0 0 / 10%);
    box-shadow: 4px 4px 0 0 rgb(0 0 0 / 10%);}
/*.m-timeline {  position: relative;  list-style: none;  padding: 0 0 50px 0;  margin: 0;   color: #333;
background:url("../img/bg.jpg") no-repeat 35px 18px;}*/
.m-timeline > li {  position: relative;  padding: 0px 0 20px 30px;  transition: all 100ms;}
.m-timeline > li::before, .m-timeline li::after {  transition: all 100ms;}
.m-timeline > li::before {  display: block;  content: '';  position: absolute;  top: 6px;  left: 0;  z-index: 2;  background-color: #fff;  
width: 14px;  height: 14px;  border-radius: 50%;  border: 3px solid #00498c;}
.m-timeline > li::after {  content: '';  display: block;  width: 2px;  background-color: #ddd;  position: absolute;
  top: 5px;  left: 0px;  height: 100%;  z-index: 1;}
.m-timeline > li:last-child::after {height:10px;}
/*.m-timeline > li:first-child::after {  top: 25px;}
  .m-timeline p {  margin: 0 0 .5em;}*/
.m-timeline__date { font-size: 18px; font-weight:500; margin:0; color:#333; /*color: #0072bc;*/}
span.detailD {color:#aaa; width:100px; display:inline-block;  padding: 0 10px 0 0; }
@media (min-width: 1024px) {
  /*.m-timeline > li:nth-child(odd) {   text-align: right;    padding-left: 0;    padding-right: calc(50% + 30px);  }*/
  .m-timeline > li {    padding-left: calc(50% + 20px);  }
  .m-timeline > li::before {    left: calc(50% - 6px);  }
  .m-timeline > li::after {    left: calc(50% - 0px);  }
}

/*.y2020 { background:url("../img/img1.jpg") no-repeat left 20px; }
.y2019 { background:url("../img/img2.jpg") no-repeat 100px 20px; }
.y2017 { background:url("../img/img3.jpg") no-repeat 100px 20px; }
.y2016 { background:url("../img/img4.jpg") no-repeat 100px 20px; }
.y2015 { background:url("../img/img5.jpg") no-repeat left 20px; }*/

/*ul.detail {list-style:none; padding:0; margin:}
ul.detail li {font-size:15px; line-height:30px; padding:0 0 0 18px; background:url("../img/bullet_01.gif") no-repeat 5px center }
ul.detail_L li {font-size:13px; line-height:28px; padding:0 18px 0 0; background:url("../img/bullet_01.gif") no-repeat 99.5% center }*/
/*ul.detail_L li span.detailD {color:#aaa;  float:right; padding: 0 0 0 10px;}*/

/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {
#history .line {margin:10px 0 50px 0; }	
.m-content .year {position:relative; width:100%; font-size:38px; line-height:45px;}	
.m-content .year span {display:inline-block; position:relative; padding-bottom:50px; padding-right:50px;  }
.m-content .year span::before { position: absolute;  top: 10px;    left: auto; right:22px;    display: block;    content: '';   
 width: 5px;    height: 30px;    background-color: #555;
    -webkit-transform: skew(0deg) rotate(90deg);    transform: skew(0deg) rotate(90deg);    -webkit-box-shadow: 4px 4px 0 0 rgb(0 0 0 / 10%);
    box-shadow: 4px 4px 0 0 rgb(0 0 0 / 10%);}    
ul.detail_L li {font-size:12px; line-height:25px; padding:0 0 0 18px; background:url("../img/bullet_01.gif") no-repeat 5px center }
.m-timeline > li {   padding: 0px 0 10px 25px;  }
.m-timeline > li::after {   left: 6px;  }
li span.detailD {color:#aaa; display:block;  padding: 0 10px 0 0; }
ul.detail_L li span.detailD {color:#aaa;  float:left; padding: 0 10 0 0px;}
.m-timeline {  position: relative;  list-style: none;  padding: 0 0 50px 0;  margin: 0;   color: #333;
background:none; }
.m-timeline__date { font-size: 16px; font-weight:500; margin:0; color:#333;  }


}
@media (max-width: 768px) {
}
@media (max-width: 640px) {
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}