@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){margin-top:-25rem;}
.timeLineWrap ul.timeLine li.timeBox:nth-child(4){margin-top:-26rem;}

.timeLineWrap ul.timeLine li.timeBox:nth-child(7){margin-top:-27rem;}
.timeLineWrap ul.timeLine li.timeBox:nth-child(9){margin-top:-8rem;}

.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:right;}

.timeLineWrap ul.timeLine li.timeBox:nth-child(n+3):nth-child(-n+5) .descWrap,
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+8):nth-child(-n+9) .descWrap { text-align:left; padding-left:70px; }


/**타임라인 동그라미 */
/**년도 숫자*/
.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+2) .date { right:50%; transform: translateX(-50%); }
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+3) .date { right:calc(50% - 197px); transform: translateX(0); }
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+4) .date { right:calc(50% - 197px); transform: translateX(0); }
.timeLineWrap ul.timeLine li.timeBox:nth-child(6) .date { right:50%; transform: translateX(-50%); }
.timeLineWrap ul.timeLine li.timeBox:nth-child(7) .date {right:calc(50% - 54px); transform: translateX(-50%); }
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+8):nth-child(-n+9) .date { left: calc(50% - 63px); 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+2) .date h3:after, 
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+6):nth-child(-n+7) .date h3:after { right:-56px; }
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+3):nth-child(-n+5) .date h3:after,
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+8):nth-child(-n+9) .date h3:after { left:-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+2) .date:before,
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+6):nth-child(-n+7) .date:before { right:-76px;}
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+3):nth-child(-n+5) .date:before,
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+8):nth-child(-n+9) .date:before { left:-76px;}

.timeLineWrap ul.timeLine li.timeBox:nth-child(n+1):nth-child(-n+2) .date:after,
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+6) .date:after,
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+7) .date:after { right:-71px;}
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+3):nth-child(-n+5) .date:after,
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+8):nth-child(-n+9) .date:after {left:-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-left:70px; }
.timeLineWrap ul.timeLine li.timeBox.li03 .descImgWrap .lineimg,
.timeLineWrap ul.timeLine li.timeBox.li08 .descImgWrap .lineimg{ text-align:right; padding-right: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(n+1):nth-child(-n+2) .date h3:after, 
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+6):nth-child(-n+7) .date h3:after {right:-65px; }
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+3):nth-child(-n+5) .date h3:after {left:-65px;}

.timeLineWrap ul.timeLine li.timeBox:nth-child(n+1):nth-child(-n+2) .date:after,
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+6) .date:after 
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+7) .date:after {right: -71px;}
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+3):nth-child(-n+5) .date:after,
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+8):nth-child(-n+9) .date:after {left:-70px;}

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

@media screen and (max-width:1024px) {
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+1):nth-child(-n+2) .date h3:after, 
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+6):nth-child(-n+7) .date h3:after {right:-65px; }
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+3):nth-child(-n+5) .date h3:after {left:-90px;}
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+1):nth-child(-n+2) .date:before, 
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+6):nth-child(-n+7) .date:before {right: -65px;}

.timeLineWrap ul.timeLine li.timeBox:nth-child(n+3):nth-child(-n+5) .date:before {left: -100px}
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+3):nth-child(-n+5) .date:after{left: -95px;}
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+8):nth-child(-n+9) .date:after {left: -71px;}


.timeLineWrap ul.timeLine li.timeBox:nth-child(n+1):nth-child(-n+2) .date:after {right: -60px;}
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+6):nth-child(-n+7) .date:after { right: -61px; }
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+6) .date:after {}
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+7) .date:after {}

.timeLineWrap ul.timeLine li.timeBox:nth-child(2) {margin-top: -12rem;}
.timeLineWrap ul.timeLine li.timeBox:nth-child(4) {margin-top:0;}
.timeLineWrap ul.timeLine li.timeBox:nth-child(9) {margin-top:10rem;}


}
@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,
.timeLineWrap ul.timeLine li.timeBox:nth-child(n+8):nth-child(-n+9) .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,.timeLineWrap ul.timeLine li.timeBox:nth-child(n+3):nth-child(-n+5) .date:before,  .timeLineWrap ul.timeLine li.timeBox:nth-child(n+8):nth-child(-n+9) .date:before {left:-38px}

.timeLineWrap ul.timeLine li.timeBox:nth-child(n+3):nth-child(-n+5) .date:after,.timeLineWrap ul.timeLine li.timeBox:nth-child(n+8):nth-child(-n+9) .date:after {left: -32px;}


.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;}
}