@charset "utf-8";

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
유지보수 
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
/* maintenance_02 */
.maintenance_02 .flex_box{display:flex;align-items: center;}
.maintenance_02 .left_chart{width:23.438%;height:711px;position:relative}
.maintenance_02 .chart_box{width:100%;height:100%;position:absolute;left:22%;top:18%;transform:rotate3d(10, -10, 0, 180deg);}
/* .maintenance_02 .chart_box .chart_test{position:absolute;left:0;top:0} */
.maintenance_02 .chart_box .chart_svg{}
.maintenance_02 .chart_box .chart_num{position:absolute;left:59%;top:30%;font-size:70px;font-weight:500;color:#235bf5;transform:rotate3d(-50, 50, 0, 180deg);font-family: "Montserrat", sans-serif !important;}
.maintenance_02 .chart_box .chart_num::before{
    content: ''; display: block; border-radius: 50%; width: 466px; height: 466px; position: absolute; top: 51%; left: 35.5%; transform: translate(-50%,-50%);
    z-index: -1;
    border: 2px solid transparent; 
    background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), linear-gradient(to right, red 0%,  orange 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    display: none;
}
.maintenance_02 .chart_box .chart_num span.p{font-size:115px;font-weight:700;font-family: "Montserrat", sans-serif !important;}
.maintenance_02 .chart_box .chart_svg .apexcharts-datalabels-group{opacity:0 !important;visibility:hidden !important}
.maintenance_02 .right_txt{width:calc(100% - 23.438%);padding-left:318px}
/* maintenance_03 */
.maintenance_03 .in_box{display:flex;align-items:flex-start}
.maintenance_03 .left_txt{width:40.769%}
.maintenance_03 .right_graph{width:calc(100% - 40.769%)}
.maintenance_03 .right_graph .graph_box{}
.maintenance_03 .right_graph .graph_tit{display:flex;align-items:center}
.maintenance_03 .right_graph .graph_tit .graph_li:nth-child(1){flex-grow:1}
.maintenance_03 .right_graph .graph_tit .graph_li div:last-child{padding-right:0}
.maintenance_03 .right_graph .graph_tit .graph_li span{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:5px}
.maintenance_03 .right_graph .graph_tit .graph_li .cost span{background:#707070}

.maintenance_03 .maintenance_list{width:100%}
.maintenance_03 .maintenance_list .list_head{width:100%;display:table;table-layout:fixed;border-top:1px solid #ffffff;border-bottom:1px solid rgba(255,255,255,0.3)}
.maintenance_03 .maintenance_list .list_head > div{display:table-cell;text-align:center;vertical-align: middle;font-size:15px;font-weight:400;padding:15px 0;color: #000000;}
.maintenance_03 .maintenance_list .date{width:16%}
.maintenance_03 .maintenance_list .name{width:30%}
.maintenance_03 .maintenance_list .cont{width:29%}
.maintenance_03 .maintenance_list .gubun{width:12%}
.maintenance_03 .maintenance_list .reply{width:15%}
.maintenance_03 .maintenance_list .list_body li{width:100%;display:table;table-layout:fixed;border-bottom:1px solid rgba(255,255,255,0.3);list-style:none}
.maintenance_03 .maintenance_list .list_body li > div{display:table-cell;text-align:center;vertical-align: middle;font-size:14px;font-weight:400;padding:15.5px 0;color: #5d5d5d;}

.maintenance_03 .index01 .graph02{margin-top:70px}
.maintenance_03 .index01 .graph02 #graph02{width: 98%; margin: 0 0 0 auto;}
.maintenance_03 .index02{padding:8upx 0 0}

.maintenance_02 .chart_box .chart_num{color:#235bf4; font-family: "Montserrat", sans-serif !important;}
.maintenance_03 .maintenance_list .list_head{border-top:1px solid #000000;border-bottom:1px solid #eee}
.maintenance_03 .maintenance_list .list_body li{border-bottom:1px solid #eee}
.maintenance_03 .right_graph .graph_tit .graph_li .cost span{background:#dddddd}

/* 차트 수정 */
.maintenance_03 .graph01 .apexcharts-toolbar{display:none !important}
.maintenance_03 .graph01 .apexcharts-series path::barWidth{barwidth:100%}
/* .maintenance_03 .graph01 #SvgjsG1044 text{fill:#000 !important;}
.maintenance_03 .graph01 #SvgjsG1076 text{fill:#ffffff !important;} */
.maintenance_03 .apexcharts-xaxis-tick{display:none !important}
.maintenance_03 .graph-txt{font-size:14px;color:#ffffff !important;font-weight:400;fill:#ffffff !important}
.maintenance_03 .apexcharts-grid-row{fill:transparent !important}
.maintenance_03 .graph02 .graph02-txt{transform:rotate(0) !important;font-size:14px;fill:#ffffff !important;font-weight:400;line-height:20px}
.maintenance_03 .graph02 .graph02-txt:nth-child(1),
.maintenance_03 .graph02 .graph02-txt:nth-child(2),
.maintenance_03 .graph02 .graph02-txt:nth-child(4),
.maintenance_03 .graph02 .graph02-txt:nth-child(5),
.maintenance_03 .graph02 .graph02-txt:nth-child(7),
.maintenance_03 .graph02 .graph02-txt:nth-child(8),
.maintenance_03 .graph02 .graph02-txt:nth-child(10),
.maintenance_03 .graph02 .graph02-txt:nth-child(11),
.maintenance_03 .graph02 .graph02-txt:nth-child(13),
.maintenance_03 .graph02 .graph02-txt:nth-child(14),
.maintenance_03 .graph02 .graph02-txt:nth-child(16),
.maintenance_03 .graph02 .graph02-txt:nth-child(17),
.maintenance_03 .graph02 .graph02-txt:nth-child(19),
.maintenance_03 .graph02 .graph02-txt:nth-child(20),
.maintenance_03 .graph02 .graph02-txt:nth-child(22),
.maintenance_03 .graph02 .graph02-txt:nth-child(23),
.maintenance_03 .graph02 .graph02-txt:nth-child(25),
.maintenance_03 .graph02 .graph02-txt:nth-child(26),
.maintenance_03 .graph02 .graph02-txt:nth-child(28),
.maintenance_03 .graph02 .graph02-txt:nth-child(29){opacity:0 !important;visibility:hidden !important}
.maintenance_03 .graph01 g[seriesName="무상"] path{color:#235bf5 !important}
.maintenance_03 .graph02 .apexcharts-tooltip{box-shadow:0 0 0 !important;background:#235bf5 !important;border:0 !important}
.maintenance_03 .graph02 .apexcharts-tooltip-title{background:#235bf5 !important}
.maintenance_03 .graph02 .apexcharts-tooltip-title,
.maintenance_03 .graph02 .apexcharts-tooltip-text,
.maintenance_03 .graph02 .apexcharts-tooltip-text div,
.maintenance_03 .graph02 .apexcharts-tooltip-text div span{color:#ffffff !important}
.maintenance_03 .graph02 .apexcharts-xaxistooltip{background:#235bf5 !important;border:0 !important;box-shadow:0 0 0 !important}
.maintenance_03 .graph02 .apexcharts-xaxistooltip-bottom:before,
.maintenance_03 .graph02 .apexcharts-xaxistooltip-bottom:after{border-bottom-color:#235bf5 !important}


.maintenance_02 .bottom_cont p span.un_line::after{background:#235bf5}
.maintenance_02 .chart_box .chart_svg .apexcharts-track path{stroke:#d8dce9 !important;stroke-width:6.5%;fill: #fff;filter:drop-shadow(-2px -2px 0px #fff) drop-shadow(2px -1px 0px #fff) drop-shadow(2px 2px 0px #fff)drop-shadow(-1px 2px 0px #fff)}
.maintenance_02 .chart_box .chart_svg .apexcharts-radialbar-hollow{fill:#ffffff !important}
.maintenance_02 .chart_box .chart_svg .apexcharts-series path{stroke:#235bf5 !important}
.maintenance_02 .chart_box .chart_svg .apexcharts-canvas::before{
    content: ''; display: block; border-radius: 50%; width: 466px; height: 466px; position: absolute; top: 49%; left: 50.2%; transform: translate(-50%,-50%);
    z-index: 0;
    background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), linear-gradient(to right, #abacab 0%,  #f9fafa 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
}
.maintenance_03 .graph01 .apexcharts-datalabels:nth-last-child(2) text.apexcharts-datalabel{fill:#fff !important;}
.maintenance_03 .graph01 .apexcharts-datalabels:nth-last-child(1) text.apexcharts-datalabel{fill:#777 !important;}
/* .maintenance_03 .graph01 #SvgjsG1044 text.apexcharts-datalabel{fill:#fff !important;}
.maintenance_03 .graph01 #SvgjsG1076 text.apexcharts-datalabel{fill:#777 !important;} */
.maintenance_03 .graph01 g[seriesName="무상"] path{fill:#235bf5 !important; font-family: "Montserrat", sans-serif !important; font-size: 14px; font-weight: 400;}
.maintenance_03 .graph01 g[seriesName="유상"] path{fill:#dddddd !important; font-family: "Montserrat", sans-serif !important;}
.maintenance_03 .graph02 g[seriesName="무상"] path{stroke:#235bf5 !important}
.maintenance_03 .graph02 g[seriesName="유상"] path{stroke:#dddddd !important}
.maintenance_03 .graph02 g[seriesName="유상"] path:hover{stroke:#dddddd !important;fill:#dddddd !important;}
.maintenance_03 .graph02 g[seriesName="무상"] .apexcharts-series-markers circle.apexcharts-marker{fill:#235bf5 !important;stroke:#235bf5 !important}
.maintenance_03 .graph02 g[seriesName="유상"] .apexcharts-series-markers circle.apexcharts-marker{fill:#dddddd !important;stroke:#dddddd !important}
/* .maintenance_03 .graph02 g[seriesName="무상"] 
.maintenance_03 .graph02 g[seriesName="유상"] markers{stroke:#dddddd !important} */
.maintenance_03 .graph01 .apexcharts-xaxis .apexcharts-text tspan{font-family: "Montserrat", sans-serif !important;}
.maintenance_03 .graph-txt,
.maintenance_03 .graph-ltxt,
.maintenance_03 .graph02 .graph02-ltxt,
.maintenance_03 .graph02 .graph02-txt{fill:#5d5d5d !important; font-weight: 400 !important;}
.maintenance_03 .graph02 .apexcharts-tooltip{box-shadow:0 0 0 !important;background:#ffffff !important;border:1px solid #e5e5e5 !important}
.maintenance_03 .graph02 .apexcharts-tooltip-title{background:#ffffff !important;border-bottom:1px solid #235bf5 !important}
.maintenance_03 .graph02 .apexcharts-tooltip-title,
.maintenance_03 .graph02 .apexcharts-tooltip-text,
.maintenance_03 .graph02 .apexcharts-tooltip-text div,
.maintenance_03 .graph02 .apexcharts-tooltip-text div span{color:#235bf5 !important}
.maintenance_03 .graph02 .apexcharts-xaxistooltip{background:#ffffff !important;border:0 !important;box-shadow:0 0 0 !important;border:1px solid #e5e5e5 !important}
.maintenance_03 .graph02 .apexcharts-xaxistooltip-bottom:before{border-bottom-color:#e5e5e5 !important;}
.maintenance_03 .graph02 .apexcharts-xaxistooltip-bottom:after{border-bottom-color:#ffffff !important;}
.maintenance_03 .graph02 .apexcharts-tooltip-series-group:nth-child(2) .apexcharts-tooltip-marker{background-color:#235bf5 !important}
.maintenance_03 .graph02 .apexcharts-tooltip-series-group:nth-child(3) .apexcharts-tooltip-marker{background-color:#dddddd !important}


@media(min-width:2000px){
	/***** 유지보수 *****/
	.maintenance_02 .chart_box{left:-27%}	
}
@media(max-width:1700px){
	/***** 유지보수 *****/
	/* .maintenance_02 .left_chart{width:33.438%}
	.maintenance_02 .chart_box{left:-23%}
	.maintenance_02 .right_txt{width:calc(100% - 33.438%);padding:0 25px 0 10px}
	.maintenance_02 .chart_box .chart_num{top:22%;left:83%;font-size:34px} */
}
@media(max-width:1500px){
	/***** 유지보수 *****/
	.maintenance_02 .chart_box{left:-19%}
	.maintenance_02 .chart_box .chart_num{left:62%}
}
@media(max-width:1300px){
	/***** 유지보수 *****/
	/* .maintenance_02 .left_chart{width:42.438%}
	.maintenance_02 .chart_box{left:-25%}
	.maintenance_02 .chart_box .chart_num{left:86%}
	.maintenance_02 .right_txt{width:calc(100% - 42.438%)}
	.tab_wrap .info_radius .radius_box{width:12.959%}
	.tab_wrap .info_radius .radius_box + li{margin-left:4%} */
    .maintenance_02 .chart_box{left: 0;}
    .maintenance_02 .right_txt{padding-left: 250px;}
}
@media(max-width:1120px){
	/***** 유지보수 *****/
	/* .maintenance_02 .chart_box{left:-28%}
	.maintenance_02 .chart_box .chart_num{left:99%}
	.maintenance_02 .right_txt .top_cont p{display:block;line-height:45px} */
}
@media(max-width:991px){
	/***** 유지보수 *****/

	/* maintenance_02 */
	.maintenance_02 .flex_box{}
	/* .maintenance_02 .left_chart{width:330px;height:330px} */
	/* .maintenance_02{padding:0 0 64px;}
	 */
	.maintenance_02 .left_chart{width:47.438%;height:327.5px}
	.maintenance_02 .chart_box{left:-55%;top:24%;}
	.maintenance_02 .apexcharts-canvas{width:250px !important;height: 250px !important; left: 33%;}
	.maintenance_02 .chart_box svg{display:block;width:100% !important;height:100% !important}
	.maintenance_02 .chart_box .chart_num{font-size:24px;left:42%;top:28%}
	/* .maintenance_02 .chart_box .chart_test{position:absolute;left:0;top:0} */
	.maintenance_02 .bottom_cont p span.un_line{display:inline-block;position:relative}
	.maintenance_02 .bottom_cont p span.un_line::after{content:"";display:block;position:absolute;width:100%;height:0.8px;background:#ffffff;left:0;bottom:-1px}

    /* .maintenance_02 .chart_box .chart_svg .apexcharts-canvas::before{width: 261px; height: 261px; top: 46.5%; left: 50.2%;} */
	.maintenance_02 .chart_box .chart_svg .apexcharts-canvas::before{width: 223px; height: 223px;top: 47%;left: 51.2%;}

	/* maintenance_03 */
	.maintenance_03 .in_box{display:block}
	.maintenance_03 .left_txt{width:100%}
	.maintenance_03 .right_graph{width:100%;margin-top:70px}
	.maintenance_03 .right_graph .graph_tit{align-items:flex-start;;margin-bottom:10px}
    .maintenance_03 .right_graph .graph_tit .graph_li span{width: 9px; height: 9px;}
	.maintenance_03 .right_graph .graph_tit .graph_li p{font-size:25px}
	.maintenance_03 .right_graph .graph_tit .graph_li div{padding:0 9px;font-size:18px}
	.maintenance_03 .right_graph .graph_tit .graph_li div:first-child{padding-left:0}
	.maintenance_03 .index01 .graph02{margin-top:40px}

    .maintenance_03 .graph-txt,
    .maintenance_03 .graph-ltxt,
    .maintenance_03 .graph02 .graph02-ltxt,
    .maintenance_03 .graph02 .graph02-txt{font-size: 10px !important;}

	/* .maintenance_03 .graph-txt{transform: translateX(20px);} */

	.maintenance_03 .maintenance_list .list_head > div{font-size:16px;padding:14px 0}
	.maintenance_03 .maintenance_list .list_body li > div{font-size:15px;padding:16px 0}
    .maintenance_03 .maintenance_list .list_body li > div.name{text-align: left; padding-left: 20px; line-height: 23px;}
    .maintenance_03 .maintenance_list .list_body li > div.name .mcont{padding-top: 5px;}
	.maintenance_03 .maintenance_list .list_body li .cont{text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;}

	.sense_html.white .maintenance_02 .chart_box .chart_svg .apexcharts-track path{stroke-width:14%}

	/* 정기 유지보수 비용 */
	.tab_wrap .info_box .info_radius{margin-bottom:35px}
	.tab_wrap .info_radius .radius_box{width:29.33%;margin-bottom:35px}
	.tab_wrap .info_radius .radius_box + li{margin-left:6%}
	.tab_wrap .info_radius .radius_box .img_box{background-size:80%}
	.tab_wrap .info_radius .radius_box:nth-child(1) .img_box{background-image:url('http://404.fivesense.co.kr/')}
	.tab_wrap .info_radius .radius_box:nth-child(2) .img_box{background-image:url('http://404.fivesense.co.kr/')}
	.tab_wrap .info_radius .radius_box:nth-child(3) .img_box{background-image:url('http://404.fivesense.co.kr/')}
	.tab_wrap .info_radius .radius_box:nth-child(4) .img_box{background-image:url('http://404.fivesense.co.kr/')}
	.tab_wrap .info_radius .radius_box:nth-child(5) .img_box{background-image:url('http://404.fivesense.co.kr/')}
	.tab_wrap .info_radius .icon_tit{margin-top:17px}
	.tab_wrap .info_radius .icon_tit p{font-size:20px}
	.tab_wrap .info_radius .icon_tit span{display:block;margin-right:0;position:relative;margin-bottom:13px}
	.tab_wrap .info_radius .icon_tit span::after{width:10%;height:1px;position:absolute;bottom:-4px;left:50%;transform:translateX(-50%)}
	.tab_wrap .info_radius .arrow_box{left:-20px;top:54%}
	.tab_wrap .info_radius .arrow_box .arrow01{width:13px}
	.tab_wrap .info_radius .arrow_box .arrow02{width:6px}
	.tab_wrap .info_radius .radius_box:nth-child(4){padding-left:0;margin-left:0}
	.tab_wrap .info_radius .radius_box:nth-child(4) .arrow_box{display:none}
	.tab_wrap .info_txt .tit{width:135px}
	.tab_wrap .info_txt .tit h2,
	.tab_wrap .info_txt .info_cont p{font-size:18px}
	.tab_wrap .info_txt .info_cont p{line-height:25px}
	.tab_wrap .info_txt .info_cont p + p{margin-top:0}
	.tab_wrap .info_txt .info_cont{padding-left:0}
	/***** 유지보수 끝 *****/

}
@media(max-width:768px){
    .maintenance_02 .apexcharts-canvas{left: 28%;}
    .maintenance_03 .index02{padding:25px 0 0}
	.maintenance_02 .chart_box .chart_num{left:39%;}
}
@media(max-width:650px){
    .maintenance_02 .apexcharts-canvas{left: 23%;}
}
@media(max-width:500px){
    .maintenance_02 .apexcharts-canvas{left: 18%;}
}
@media(max-width:480px){
	/***** 유지보수 *****/
    .maintenance_02 .apexcharts-canvas{width:250px !important;height: 250px !important; left:11%;}
	.maintenance_02 .chart_box .chart_svg .apexcharts-canvas::before{width: 220px; height: 220px;top: 47%;left: 51.2%;}
	.maintenance_02 .left_chart{height: 280.5px;}

	.maintenance_02 .left_chart{width:57.438%}
	.maintenance_02 .chart_box{left:-67%}
	.maintenance_02 .chart_box .chart_num{font-size:19px;left:26%;top:30%}
	.maintenance_02 .chart_box .chart_svg .apexcharts-series path{stroke-width: 15.6585px;}
	.maintenance_02 .chart_box .chart_svg .apexcharts-track path{filter: drop-shadow(-1px 1px 0px #fff) drop-shadow(0px -1px 0px #fff) drop-shadow(0px 0px 0px #fff)drop-shadow(1px 0px 0px #fff)}

	.maintenance_03 .right_graph{margin-top:50px}
	.maintenance_03 .right_graph .graph_tit .graph_li p{font-size:18px}
	.maintenance_03 .right_graph .graph_tit .graph_li div{font-size:13px}
	
	.maintenance_03 .maintenance_list .list_head > div{font-size:12.5px;padding:17px 0}
	.maintenance_03 .maintenance_list .list_body li > div{font-size:12px;padding:9.25px 0}

	.maintenance_03 .graph-txt,
	.maintenance_03 .graph02 .graph02-txt{font-size:10px}
	.maintenance_03 .maintenance_list .name{width:32%}

	.maintenance_ul li.m_li span{font-size:13px;padding:0 10px;line-height:43px}
	.tab_wrap .tab_contet .title p{font-size:13px;line-height:21px}
	.tab_wrap .table_box th{font-size:12px;padding:14px 0}
	.tab_wrap .table_box td{font-size:12px;height:50px}
	.tab_wrap .table_box td.mob_height{width:180px;height:70px}
	.tab_wrap .tab_con01 .mob_table .table03 td.five_w{width:180px}
	.tab_wrap .tab_con01 .mob_table .table03 td.row_l{width:190px}
	.tab_wrap .table_box .table_msg p{font-size:12px}
	.tab_wrap .mob_table .table_msg p{padding-left:10px}
	.tab_wrap .info_radius .radius_box{width:28%}
	.tab_wrap .info_radius .radius_box + li{margin-left:7.51%}
	.tab_wrap .info_radius .icon_tit p{font-size:13px}
	.tab_wrap .info_txt .tit{width:110px}
	.tab_wrap .info_txt .tit h2, .tab_wrap .info_txt .info_cont p{font-size:13px}
	.tab_wrap .info_txt .info_cont p{line-height:21px}
	.tab_wrap .info_radius .arrow_box{left:-23px}
	.tab_wrap .info_radius .arrow_box .arrow02{top:-1.9px;right:-1px}
	/***** 유지보수 끝 *****/

}
@media(max-width:440px){
    .maintenance_02 .chart_box .chart_num{left: 28%;}
}
@media(max-width:375px){
    .maintenance_02 .apexcharts-canvas{left: 3%;}
}

/* 231213 유지보수 > 수주현황 */
.board-container.status_custom .list-wrap .right_wrap .form .list-board .list-body .list-item > div.wr-subject .item-subject>div{display: inline-block;}

@media all and (max-width: 991px) {
    .board-container.status_custom .list-wrap .right_wrap .form .list-board .list-body .list-item > div.wr-subject .item-subject>div{width: calc(100% - 15px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} 
}