/*중요 표시*/
.notice_p{ font-size:16px; line-height:160%; margin-top:15px; color:#777; }

/*어드민*/
.admin_box{ margin-top:30px; }
.admin_box a{ display:inline-block; margin-top:5px;}

/*현황판 스타일01*/
.jobState_box01 > div{ display:flex; align-items:center; flex-wrap:wrap; padding:35px; border:1px solid #ddd; margin-bottom:30px; }
.jobState_box01 > div:last-child{ margin-bottom:0px; }
.jobState_box01 > div > div{ float:left; display:flex; }
.jobState_box01 > div > div.img_box{ width:42%; padding-right:60px; }
.jobState_box01 > div > div.img_box > div{ margin:0 auto; }
.jobState_box01 > div > div.img_box img{ width:100%; }
.jobState_box01 > div > div.text_box{ width:58%;}
.jobState_box01 > div > div.text_box strong{ display:block; font-size:22px; color:#007cc3; font-weight:bold; margin-bottom:15px; line-height:140%; }
.jobState_box01 > div > div.text_box span{ display:block; margin-bottom:10px; }
.jobState_box01 > div > div.text_box span p{ display:inline-block; font-size:16px; margin:0px; }
.jobState_box01 > div > div.text_box p{ font-size:16px; margin:0px; line-height:160%; }
.jobState_box01 > div > div.text_box b{ display:inline-block; vertical-align:middle; border:1px solid #ddd; padding:3px 5px; font-size:16px; text-align:center; font-weight:500; margin-right:10px; }
.jobState_box01 > div > div.text_box ul{ margin:0px; margin-top:10px; }
.jobState_box01 > div > div.text_box li{ font-size:16px; margin-top:5px; padding-left:15px; position:relative; line-height:160%; }
.jobState_box01 > div > div.text_box li:after{content:""; position:absolute; top:7px; left:0; width:4px; height:4px; border-radius:100%; background:#007cc3;}

.jobState_box01_2 > div > div.img_box{ width:35%; }
.jobState_box01_2 > div > div.text_box{ width:65%;}

/*현황판 스타일02*/
.jobState_box02{ background:#f5f5f5; padding:45px 15px; text-align:center; }
.jobState_box02 img{ width:20%; max-width:98px; min-width:60px; margin-bottom:20px; }
.jobState_box02 p{ margin:0; font-size:20px; line-height:150%; font-weight:700;}

/*현황판 리스트*/
.jobState_list{ margin:0px; display:flex; flex-wrap:wrap; }
.jobState_list > li{ position:relative; border:1px solid #333; float:left; width:23%; margin-right:2.666666666666667%; margin-top:2.666666666666667%; transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; }
.jobState_list > li:nth-child(-n+4){ margin-top:0%; }
.jobState_list > li:nth-child(4n+4){ margin-right:0%;}
.jobState_list > li > div{ border:5px solid #fff; padding:30px; transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; height:100%; }
.jobState_list > li > div img{ display:block; margin:0 auto; width:45%; max-width:85px; min-width:60px; }
.jobState_list > li > div strong{ display:block; text-align:center; font-size:22px; margin:20px 0; letter-spacing:-1px; line-height:140%; transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; }
.jobState_list > li > div a:last-child{ margin-top:13px; }
.jobState_list > li > div .jobState_btn{ margin-top:0px !important; height:50px; line-height:50px; padding:0 60px 0 20px; }
.jobState_list > li > div .jobState_btn:after{ height:50px; width:50px; background-size:19px; }

.jobState_list > li:hover{ border-color:#007cc3;}
.jobState_list > li:hover div{ border-color:#007cc3;}
.jobState_list > li:hover div strong{ color:#007cc3;}

/*현황판 버튼*/
.jobState_btn{ text-align:left; position:relative; border:1px solid #333; display:inline-block; width:100%; max-width:330px; height:70px; line-height:70px; padding:0 100px 0 30px; font-size:16px; vertical-align:top; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; background:#fff; }
.jobState_btn:after{ content:""; position:absolute; top:0; right:0; width:70px; height:69px; border-left:1px solid #333; background-color:#fff; background-image:url('/thema/Basic/img/jobState_btn_ico01.png'); background-position:center; background-repeat:no-repeat; border-bottom:1px solid #333; transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; } 
.jobState_btn:hover:after{ content:""; background-color:#007cc3; background-image:url('/thema/Basic/img/jobState_btn_ico02.png'); }

@media all and (max-width:1200px) {
	/*현황판 스타일01*/
	.jobState_box01 > div > div.text_box p br{ display:none; }

	/*현황판 스타일02*/
	.jobState_box02 p br{ display:none; }

	/*현황판 리스트*/
	.jobState_list > li > div{padding:20px;}
	
}
@media all and (max-width:1024px) {
	/*중요 표시*/
	.notice_p{ font-size:14px; margin-top:10px; }

	/*현황판 스타일01*/
	.jobState_box01 > div{ padding:30px; }
	.jobState_box01 > div > div.img_box{ padding-right:30px; }
	.jobState_box01 > div > div.text_box strong{ font-size:20px; }
	.jobState_box01 > div > div.text_box b,
	.jobState_box01 > div > div.text_box span p,
	.jobState_box01 > div > div.text_box p,
	.jobState_box01 > div > div.text_box li{ font-size:14px; }

	/*현황판 스타일02*/
	.jobState_box02 p{ font-size:18px;}

	/*현황판 리스트*/
	.jobState_list > li > div strong{font-size:18px; margin:15px 0; }
	.jobState_list > li{ width:32%; margin-right:2%; margin-top:2%;}
	.jobState_list > li:nth-child(-n+4){ margin-top:2%; }
	.jobState_list > li:nth-child(4n+4){ margin-right:2%;}
	.jobState_list > li:nth-child(-n+3){ margin-top:0%; }
	.jobState_list > li:nth-child(3n+3){ margin-right:0%;}

	/*현황판 버튼*/
	.jobState_btn{ height:50px; line-height:50px; max-width:250px; font-size:14px; padding: 0 65px 0 15px; }
	.jobState_btn:after{ width:50px; height:49px; background-size:17px;}
}
@media all and (max-width:910px) {
	/*현황판 스타일01*/
	.jobState_box01 > div > div.img_box,
	.jobState_box01 > div > div.text_box{ width:100%; padding:0px; }
	.jobState_box01 > div > div.img_box{ margin-bottom:30px; }
}
@media all and (max-width:768px) {
	/*현황판 스타일02*/
	.jobState_box02 p{ font-size:16px;}
	
	/*현황판 리스트*/
	.jobState_list > li > div{padding:15px;}
	.jobState_list > li > div strong{font-size:16px;}
	.jobState_list > li{width:49%; margin-right:2%; margin-top:2%;}
	.jobState_list > li:nth-child(-n+3){ margin-top:2%; }
	.jobState_list > li:nth-child(3n+3){ margin-right:2%;}
	.jobState_list > li:nth-child(-n+2){ margin-top:0%; }
	.jobState_list > li:nth-child(2n+2){ margin-right:0%;}

	/*현황판 버튼*/
	.jobState_btn{ height:45px; line-height:45px; padding: 0 60px 0 15px; max-width:100%; }
	.jobState_btn:after{ width:45px; height:44px; }
}
@media all and (max-width:620px) {
	/*현황판 스타일01*/
	.jobState_box01 > div{ padding:20px; }
	.jobState_box01 > div > div.text_box span p{ display:block; margin-top:10px; }

	/*현황판 리스트*/
	.jobState_list > li{width:100%; margin-right:0%; margin-top:4%;}
	.jobState_list > li:nth-child(-n+4),
	.jobState_list > li:nth-child(-n+3),
	.jobState_list > li:nth-child(-n+2){ margin-top:4%; }
	.jobState_list > li:nth-child(-n+1){ margin-top:0%; }
	.jobState_list > li:nth-child(3n+3){ margin-right:0%; }
}


/********************* 현황판 end *************************************************************************************************************************************************************************************/

.chart_top{ display:block; width:150px; height:35px; margin:0 auto; line-height:35px; margin-bottom:15px; border:1px solid #007cc3; font-size:16px; color:#007cc3; font-weight:700; }
.chart_container{ border:1px solid #ddd; position:relative; padding:150px 75px 75px; }
.chart_guide{ position:absolute; top:35px; right:35px; border:1px solid #333; font-size:16px; border:1px solid #333; padding:10px 15px; line-height:16px; font-weight:500; }
.chart_list_box{ background:#f5f5f5; padding:15px 10px 25px; text-align:center; font-size:0px; margin:75px 0 0; }
.chart_list_box li{ display:inline-block; font-size:16px; margin:10px 15px 0; }
.chart_list_box li:before{ content:""; display:inline-block; vertical-align:middle; margin-right:10px; width:21px; height:21px; border-radius:100%; }
.chart_list_box li.chart_color1:before{ background:#007cc3;}
.chart_list_box li.chart_color2:before{ background:#9e9c88;}
.chart_list_box li.chart_color3:before{ background:#ffa000;}
.chart_list_box li.chart_color4:before{ background:#eb6100;}
.chart_list_box li.chart_color5:before{ background:#72b022;}
.chart_list_box li.chart_color6:before{ background:#4a6d1d;}
.chart_list_box li.chart_color7:before{ background:#ad4d96;}
.chart_list_box li.chart_color8:before{ background:#9e9c88;}
.chart_list_box li.chart_color9:before{ background:#17bcb6;}
.chart_box{ overflow-y:hidden; overflow-x:auto;}
.chart_box > div{ width:100%; min-width:400px;}
.chart_box > div#curve_chart,
.chart_box > div#curve_chart2{max-width:1040px;}
.chart_box > div#barchart_material{max-width:900px;}

.chart_container .cont_view_btn{ display: block; font-size: 18px; color: #fff; width:100%; max-width: 250px; height: 60px; line-height: 60px; background: #007cc3; vertical-align: top; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; border-radius: 0px; text-align:center; }

@media all and (max-width:1024px) {
	.chart_top{ font-size:14px; height:35px; line-height:35px; }
	.chart_guide{ font-size:14px; padding:10px; }
	.chart_container{ padding:120px 45px 45px; }
	.chart_list_box{ margin-top:45px;}
	.chart_list_box li{ font-size:14px; margin:10px 10px 0; }

}

@media all and (max-width:768px) {
	.chart_container{ padding:100px 25px 25px; }
	.chart_list_box{ margin-top:25px;}
	.chart_list_box li:before{ width:15px; height:15px; margin-right:5px; }

	.chart_container .cont_view_btn{ height: 45px; line-height: 45px; font-size: 14px; }

}