*, *::before, *::after {  box-sizing: border-box;}
.m-content {  padding: 0px;  max-width: 100%;  margin: 0 auto;}
.m-timeline {  position: relative;  list-style: none;  padding: 0;  margin: 0;    color: #333;}
.m-timeline > li {  position: relative;  padding: 0px 0 100px 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: 18px;  left: 0;  z-index: 2;  background-color: #f99d1a;  
width: 11px;  height: 11px;  border-radius: 50%;  }
.m-timeline > li::after {  content: '';  display: block;  width: 1px;  background-color: #ddd;  position: absolute;
  top: 0;  left: 0px;  height: 100%;  z-index: 1;}
.m-timeline > li:first-child::after {  top: 18px;}
.m-timeline > li:last-child::after {  height: 64.7%;}
.m-timeline__date { font-size: 30px;  margin: 0 48px 1em 18px;  color: #f99d1a; font-weight: 700;}
.m-timeline p {  margin: 0 0 .5em;}
.m-content p.txtTitle { font-weight: bold; font-size: 50px; line-height: 50px; margin: 50px auto 80px; text-align: center; }
.m-content p.txtTitle span { font-weight: 300; font-size: 20px; color: #888; }
.m-content p.txtTitle span.second:before { content: ' | '; font-size: 18px; margin: 0 10px; }
@media (min-width: 1024px) {
  /* html엣 새로운 연도를 추가하면 아래 odd와 even을 서로 바꿔주세요 */
  .m-timeline > li:nth-child(even) {   text-align: right;    padding-left: 0;    padding-right: calc(50% + 30px);  }
  .m-timeline > li:nth-child(odd) {    padding-left: calc(50% + 30px);  }
  .m-timeline > li::before {    left: calc(50% - 5px);  }
  .m-timeline > li::after {    left: calc(50% - 0px);  }
}

ul.detail {list-style:none; padding:0; margin:}
ul.detail li {font-size:20px; line-height:200px; padding:0 0 0 18px; position: relative; } /*background:url("../img/bullet_01.gif") no-repeat 5px center*/
ul.detail_L li {font-size:20px; line-height:200px; padding:0 18px 0 0; } /*background:url("../img/bullet_01.gif") no-repeat 99.5% center*/
ul.detail_L li:after { content: ''; display: block; width: 40px; height: 1px; position: absolute; top: 50%; right: -30px; background:#ddd; }
ul.detail_R li:after { content: ''; display: block; width: 40px; height: 1px; position: absolute; top: 50%; left: -30px; background:#ddd; }
ul.detail li span.detailD {color:#aaa;   padding: 0 10px 0 0; display: none; }
ul.detail li span.more2line:before { content: ' / '; }
ul.detail_L li span.detailD {color:#aaa; float:right; padding: 0 0 0 10px; display: none;}

ul.detail_L li span.img { height: 200px; display: inline-block; position: absolute; top: 0; left: 130%; }
ul.detail_R li span.img { height: 200px; display: inline-block; position: absolute; top: 0; right: 130%; }

/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {  
.m-timeline > li::before { left: 4px; }
.m-content p.txtTitle { font-size: 40px; margin: 20px auto 80px; }
.m-content p.txtTitle span { font-size: 18px; line-height: 26px; display: block; margin-top: 10px; }
.m-content p.txtTitle span.second { margin-top: 0; }
.m-content p.txtTitle span.second:before { content: ''; margin: 0; }
ul.detail li {font-size: 18px; line-height: 25px; margin-bottom: 20px;}
ul.detail_L li {font-size:18px; line-height:25px; padding:0 0 0 18px; }
.m-timeline > li::after {  left: 9px;  }
.m-timeline > li:last-child::after { height: 50.6%; }
ul.detail li span { display: block; }
ul.detail li span.detailD {color:#aaa;  padding: 0 10px 0 0; display: none; width: 100%; margin-top: 13px; }
ul.detail_L li span.detailD {color:#aaa;  float:left; padding: 0 10 0 0px; display: none;}
ul.detail_R li span.detailD { margin-top: 26px; }
ul.detail li span.more2line:before { content: ''; }
ul.detail_L li:after { content: ''; display: block; width: 25px; position: absolute; top: 13px; left: -20px; background:#ddd; }
ul.detail_R li:after { content: ''; display: block; width: 25px; position: absolute; top: 13px; left: -20px; background:#ddd; }

ul.detail_L li span.img { position: relative; top: 0; left: 0; height: 140px; }
ul.detail_R li span.img { position: relative; top: 0; right: 0; height: 140px; }
ul.detail_L li span.img img { height: 140px; }
ul.detail_R li span.img img { height: 140px; }
}
@media (max-width: 768px) {
}
@media (max-width: 640px) {
}
@media (max-width: 480px) {

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

ul.detail_L li span.img img { max-width: 220px !important; }
ul.detail_R li span.img img { max-width: 220px !important; }

}