@charset "utf-8";

.timeLineWrap {width:100%;}

.timeLineWrap ul.timeLine {display:flex; flex-wrap:wrap; position:relative; }
.timeLineWrap ul.timeLine:after {content:""; position:absolute; width:2px; height: 100%; background-color:#ddd; top:0; left:50%; transform:translateX(-50%); z-index:-2;} 
.timeLineWrap ul.timeLine .move_line {position:absolute; width:2px; height: 100%; background-color:#167058; top:0; left:50%; transform:translateX(-50%); z-index:-1;}
.timeLineWrap ul.timeLine .move_line.kill{background-color:transparent;}
/**타임라인 좌우 내용 */
.timeLineWrap ul.timeLine li.timeBox {width:100%; position:relative;}
.timeLineWrap ul.timeLine li.timeBox .descWrap {width:50%;}
.timeLineWrap ul.timeLine li.timeBox:not(:first-child) {margin-top:100px;}
.timeLineWrap ul.timeLine li.timeBox:nth-child(2),
.timeLineWrap ul.timeLine li.timeBox:nth-child(5){margin-top:-20rem;}
.timeLineWrap ul.timeLine li.timeBox:nth-child(7){margin-top:-13rem;}
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+1):nth-child(-n+3) .descWrap,
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+6):nth-child(-n+7) .descWrap  { text-align:left; padding-left:70px;}
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+4):nth-child(-n+5) .descWrap { text-align:right; }



/**타임라인 동그라미 */
/**년도 숫자*/
.timeLineWrap ul.timeLine li.timeBox .date {position:absolute; z-index:99; top:-20px }
/**년도 숫자 위치 */
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+1):nth-child(-n+3) .date{ left: calc(50% + 135px);transform: translateX(-50%); }
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+4) .date { left:calc(50% - 197px); transform: translateX(0); }
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+5) .date { left:calc(50% - 306px); transform: translateX(0); }
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+6):nth-child(-n+7) .date  {
  left: calc(50% + 191px);transform: translateX(-50%);
}
/**년도 옆에 동그라미 */
.timeLineWrap ul.timeLine li.timeBox .date h3 {position:relative; line-height:1em; padding-bottom:0; color: #167058; }
.timeLineWrap ul.timeLine li.timeBox .date h3:after {content:""; position:absolute; top:50%; transform: translateY(-50%); width:40px; height:1px; background-color:#b1d2cb; }

.timeLineWrap ul.timeLine li.timeBox:nth-child(n+1):nth-child(-n+3) .date h3:after, 
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+6):nth-child(-n+7) .date h3:after { left:-60px; }
.timeLineWrap ul.timeLine li.timeBox:nth-child(4) .date h3:after { right:-56px; }
.timeLineWrap ul.timeLine li.timeBox:nth-child(5) .date h3:after { right:-60px; }


.timeLineWrap ul.timeLine li.timeBox .date:before {content:""; position:absolute; top:50%; transform: translateY(-50%); width:20px; height:20px; border-radius:50%; background-color:#b1d2cb; }
.timeLineWrap ul.timeLine li.timeBox .date:after {content:""; position:absolute; top:50%; transform: translateY(-50%); width:10px; height:10px; border-radius:50%; background-color:#167058; }


/** 년도 숫자 좌우 위치 */
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+1):nth-child(-n+3) .date:before,
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+6):nth-child(-n+7) .date:before { left:-80px;}
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+4) .date:before { right:-76px;}
.timeLineWrap ul.timeLine li.timeBox:nth-child(n-5) .date:before { right:-76px;}
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+1):nth-child(-n+3) .date:after,
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+6):nth-child(-n+7) .date:after { left:-75px;}
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+4):nth-child(-n+5) .date:after { right:-71px;}



/**좌우 텍스트 레이아웃 */
.timeLineWrap ul.timeLine li.timeBox .descImgWrap {display:flex; padding-top:40px;}
.timeLineWrap ul.timeLine li.timeBox .descImgWrap .order1 {order:1;}
.timeLineWrap ul.timeLine li.timeBox .descImgWrap .order2 {order:2;}

.timeLineWrap ul.timeLine li.timeBox .descImgWrap .desc { width:100%; padding-top:10px;}

.timeLineWrap ul.timeLine li.timeBox .descImgWrap .desc .time_desc { width:calc(100% - 65px);}
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+1):nth-child(-n+3) .descImgWrap .desc .time_desc {order:2;}


.timeLineWrap ul.timeLine li.timeBox .descImgWrap .desc .time_desc > p { line-height:1.6em; padding:4px 0;}

.timeLineWrap ul.timeLine li.timeBox .descImgWrap .lineimg { position:relative; width:50%; height:100%; margin-top:-40px;}
.timeLineWrap ul.timeLine li.timeBox.li01 .descImgWrap .lineimg,
.timeLineWrap ul.timeLine li.timeBox.li06 .descImgWrap .lineimg{padding-right:70px; }
.timeLineWrap ul.timeLine li.timeBox:nth-child(4) .descImgWrap .lineimg { text-align:right; padding-left:70px;}
.timeLineWrap ul.timeLine li.timeBox .descImgWrap .lineimg img { width:100%; height:auto; max-width: 500px; }


@media screen and (max-width:1200px) {
  .timeLineWrap ul.timeLine li.timeBox:nth-child(2), .timeLineWrap ul.timeLine li.timeBox:nth-child(5){margin-top:-12rem;}
  .timeLineWrap ul.timeLine li.timeBox:nth-child(7) {margin-top:-9rem;}
}

@media screen and (max-width:1024px) {
.timeLineWrap ul.timeLine li.timeBox:nth-child(odd) .date { left: calc(50% + -100px);}
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+1):nth-child(-n+3) .date { left: calc(50% + 123px);}
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+4) .date {left:calc(50% - 172px)}
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+5) .date {left: calc(50% - 261px);}
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+6):nth-child(-n+7) .date {left: calc(50% + 167px);}
.timeLineWrap ul.timeLine li.timeBox:nth-child(7) {margin-top:0rem;}
}
@media screen and (max-width:960px) {
  .timeLineWrap ul.timeLine li.timeBox:nth-child(7) {margin-top:2rem;}
}
@media screen and (max-width:768px){

.timeLineWrap {padding-top:65px;}
.timeLineWrap ul.timeLine:after,
.timeLineWrap ul.timeLine .move_line { left:0; transform:translateX(0); }
.timeLineWrap ul.timeLine li.timeBox {padding-bottom:70px}
.timeLineWrap ul.timeLine li.timeBox:last-child {padding-bottom:0;}
.timeLineWrap ul.timeLine li.timeBox:nth-child(even) {left:0; margin-top:0px;}
.timeLineWrap ul.timeLine li.timeBox:not(:first-child) {margin-top:0;}


.timeLineWrap ul.timeLine li.timeBox:nth-child(n+1):nth-child(-n+3) .date,
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+4) .date, 
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+6):nth-child(-n+7) .date {left:30px; transform:translateX(0);}

.timeLineWrap ul.timeLine li.timeBox:nth-child(n+1):nth-child(-n+3) .date:before, .timeLineWrap ul.timeLine li.timeBox:nth-child(n+6):nth-child(-n+7) .date:before, .timeLineWrap ul.timeLine li.timeBox:nth-child(n-5) .date:before {left:-38px}

.timeLineWrap ul.timeLine li.timeBox:nth-child(n+1):nth-child(-n+3) .date:after, .timeLineWrap ul.timeLine li.timeBox:nth-child(n+6):nth-child(-n+7) .date:after, .timeLineWrap ul.timeLine li.timeBox:nth-child(n-5) .date:after {left:-33px;}

.timeLineWrap ul.timeLine li.timeBox .descImgWrap .lineimg { padding-top: 50px;}
.timeLineWrap ul.timeLine li.timeBox:nth-child(4) .descImgWrap .lineimg {text-align:left;}

.timeLineWrap ul.timeLine li.timeBox .descImgWrap {flex-wrap:wrap; padding-top:10px;}
.timeLineWrap ul.timeLine li.timeBox .descImgWrap .descWrap {width:100%;}
.timeLineWrap ul.timeLine li.timeBox:nth-child(even) .descImgWrap .descWrap {text-align: left; padding-left: 30px;}
.timeLineWrap ul.timeLine li.timeBox:nth-child(odd) .descImgWrap .descWrap {text-align:left; padding-right:0; padding-left:30px;}


.timeLineWrap ul.timeLine li.timeBox:first-child .descImgWrap .lineimg img {padding-top:30px;}
.timeLineWrap ul.timeLine li.timeBox:not(:first-child) .descImgWrap .lineimg img {padding-top:50px;}

.timeLineWrap ul.timeLine li.timeBox .descImgWrap .lineimg.order1 {order:2;}
.timeLineWrap ul.timeLine li.timeBox .descImgWrap .descWrap.order2 {order:1;}


.timeLineWrap ul.timeLine li.timeBox:nth-child(even) .descImgWrap .date:before { left:inherit; right:calc(100%  + 19px);}
.timeLineWrap ul.timeLine li.timeBox:nth-child(odd) .descImgWrap .date:before { right:calc(100%  + 19px);}
.timeLineWrap ul.timeLine li.timeBox:nth-child(even) .descImgWrap .date:after { left:inherit; right:calc(100% + 24px);}
.timeLineWrap ul.timeLine li.timeBox:nth-child(odd) .descImgWrap .date:after { right:calc(100%  + 24px);}

.timeLineWrap ul.timeLine li.timeBox .descImgWrap .lineimg { width:100%; height:auto; padding-top:30px;}
.timeLineWrap ul.timeLine li.timeBox:nth-child(even) .descImgWrap .lineimg {padding-left:30px; }
.timeLineWrap ul.timeLine li.timeBox:nth-child(odd) .descImgWrap .lineimg { padding-right:0; padding-left:30px; text-align:left; }
.timeLineWrap ul.timeLine li.timeBox:nth-child(odd) .descImgWrap .desc .time_desc {order:2;}
.timeLineWrap ul.timeLine li.timeBox .descImgWrap .desc {padding-top:15px;}
.timeLineWrap ul.timeLine li.timeBox .descImgWrap .desc .time_desc {width: calc(100% - 33px)}
.timeLineWrap ul.timeLine li.timeBox .descImgWrap .desc .time_desc > ul > li .desc_tit { font-size:1.8rem; padding-bottom:5px; line-height: 1.3em;}

.timeLineWrap ul.timeLine li.timeBox .date {margin-bottom:10px;}
.timeLineWrap ul.timeLine li.timeBox .date h3:after { display:none; }
}
@media screen and (max-width:560px){
.timeLineWrap ul.timeLine li.timeBox .descImgWrap {padding-top:18px;}
}