/* progress */
#progress_fixed {height:70px; width:100%;}
#progress_wrap {width:100%; height:40px; padding-bottom:30px;}
#progress {width:1100px; height:40px; position:relative; margin:0 auto;}
#progress .progress_btn {position:absolute; left:0%; top:0;}
#progress .progress_btn a.play {display:block; width:21px; height:21px;font-size:0; background:url(../img/time/progress_play.png) no-repeat left top;}
#progress .progress_btn a.play.stop {font-size:0;background:url(../img/time/progress_stop.png) no-repeat left top;}
#progress .progress_timeseries {width:98%; position:absolute; left:25px; top:7px; height:6px; background:#f4f4f4; border:#ccc solid 1px; border-radius:3px;}
#progress .progress_timeseries .progress_bg {position:absolute; width:calc(99% - 16px); left:10px; height:6px; margin-left: 3px; }
#progress .progress_timeseries .year {position:absolute; width:1081px; top:10px; margin-left:-2px; }
/* cursor 에 정대경로 표시해야 Internet Explorer 에서 hand 모양이 나타남 */
/* 운영서버와 개발서버 이행에서 확인 필요 */
#progress .progress_timeseries .year .controller {position:absolute; width:13px; height:17px; background:url(../img/time/progress_controller.png) no-repeat left top; margin-top:-13px; margin-left:-6px; cursor:url(/regionState/ext/img/time/hand.cur),move; left:80%; z-index:10;}
#progress .progress_timeseries .year .controller:active {cursor:url(/regionState/ext/img/time/hand-h.cur),move;}
#progress .progress_timeseries .year ul {list-style-type:none; display:table; width:100%;}
#progress .progress_timeseries .year li { width:30px; margin-left:0px; z-index:5; display:inline; float: left; display:table-cell;}
#progress .progress_timeseries .year span.bar {display:block;margin-left:50%; top:0; width:1px; height:8px; background-color:#aaa;}
#progress .progress_timeseries .year strong {display:block; top:7px; text-align:center; font-family:'tahoma'; font-size:10px; font-weight:bold; color:#878787;}
#progress .progress_timeseries .year li.on strong {color:#333;}

#progress .progress_timeseriess {width:96%; position:absolute; left:25px; top:7px; height:6px; background:#f4f4f4; border:#ccc solid 1px; border-radius:3px;}
#progress .progress_timeseriess .progress_bg {position:absolute; width:calc(96% - 22px); left:10px; height:6px; margin-left: 17px; }
#progress .progress_timeseriess .year {position:absolute; width:1099px; top:10px; margin-left:-18px; }
#progress .progress_timeseriess .year .controller {position:absolute; width:13px; height:17px; background:url(../img/time/progress_controller.png) no-repeat left top; margin-top:-13px; margin-left:-6px; cursor:url(/regionState/ext/img/time/hand.cur),move; left:80%; z-index:10;}
#progress .progress_timeseriess .year .controller:active {cursor:url(/regionState/ext/img/time/hand-h.cur),move;}
#progress .progress_timeseriess .year ul {list-style-type:none; display:table; width:100%;}
#progress .progress_timeseriess .year li { width:90px; margin-left:0px; z-index:5; display:inline; float: left; display:table-cell;}
#progress .progress_timeseriess .year span.bar {display:block;margin-left:50%; top:0; width:1px; height:8px; background-color:#aaa;}
#progress .progress_timeseriess .year strong {display:block; top:7px; text-align:center; font-family:'tahoma'; font-size:10px; font-weight:bold; color:#878787;}
#progress .progress_timeseriess .year li.on strong {color:#333;}

#progress .progress_timeseriesss {width:96%; position:absolute; left:25px; top:7px; height:6px; background:#f4f4f4; border:#ccc solid 1px; border-radius:3px;}
#progress .progress_timeseriesss .progress_bg {position:absolute; width:calc(96% - 30px); left:10px; height:6px; margin-left: 17px; }
#progress .progress_timeseriesss .year {position:absolute; width:1099px; top:10px; margin-left:-18px; }
#progress .progress_timeseriesss .year .controller {position:absolute; width:13px; height:17px; background:url(../img/time/progress_controller.png) no-repeat left top; margin-top:-13px; margin-left:-6px; cursor:url(/regionState/ext/img/time/hand.cur),move; left:80%; z-index:10;}
#progress .progress_timeseriesss .year .controller:active {cursor:url(/regionState/ext/img/time/hand-h.cur),move;}
#progress .progress_timeseriesss .year ul {list-style-type:none; display:table; width:100%;margin-left:31px;}
#progress .progress_timeseriesss .year li { width:28px; margin-left:0px; z-index:5; display:inline; float: left; display:table-cell;}
#progress .progress_timeseriesss .year span.bar {display:block;margin-left:50%; top:0; width:1px; height:8px; background-color:#aaa;}
#progress .progress_timeseriesss .year span.barLong {display:block;margin-left:50%; top:0; width:1px; height:10px; background-color:#aaa;}
#progress .progress_timeseriesss .year strong {display:block; top:7px; text-align:center; font-family:'tahoma'; font-size:10px; font-weight:bold; color:#878787; width:52px; margin-left: -13px;}
#progress .progress_timeseriesss .year li.on strong {color:#333;}


#progressArea .progress_btn {position:absolute; left:0%; top:0;}
#progressArea .progress_btn a.play {display:block; width:21px; height:21px; font-size:0; background:url(../img/time/progress_play.png) no-repeat left top;}
#progressArea .progress_btn a.play.stop {font-size:0;background:url(../img/time/progress_stop.png) no-repeat left top;}

#ticks  {margin-top: -38px; margin-bottom: 20px;}
.quarter  { width:1125px; top:10px; margin-left:-29px; }
.quarter ul {list-style-type:none; display:table; width:100%;margin-left:11px;}
.quarter li { width:92px; margin-left:0px; z-index:5; display:inline; float: left; display:table-cell;}
.quarter strong {display:block; top:7px; text-align:center; font-family:'tahoma'; font-size:10px; font-weight:bold; color:#878787;}