@charset "UTF-8";




/*공통*/
.container {padding: 40px 52px 40px 50px; min-height: 750px; overflow: hidden; display: flex; flex-direction: column}
.place_cmn{position: relative;}
.place_cmn .mid_tit{padding-bottom: 23px;font-size: 1.8rem;color: #222;font-weight: 600;}
.place_cmn .place_tit_box dt{font-size: 1.8rem; font-weight:500; }
.place_cmn .place_tit_box dd{border-radius: 10px;background-color: #f2f4f5; padding: 10px 20px}
.place_cmn .place_tit_box p span{}
.place_cmn .place_tit_box p span:nth-of-type(2){}
.place_cmn .place_tit_box > p{ display: flex; justify-content: space-between; padding: 5px 20px; align-items: center}
.place_cmn .place_tit_box > p > span{ font-size: 1.4rem }
.place_cmn .place_tit_box > p span:nth-of-type(1){}
.place_cmn .place_tit_box > p span:nth-of-type(2){font-size: 22px; color:#006AE5; font-weight: 700}
.place_cmn .place_tit_box dl{ display: flex; flex-direction: column; gap:10px; margin-bottom: 12px} 
.place_cmn .place_tit_box dd > p{ display: flex; justify-content: space-between; align-items: center} 
.place_cmn .place_tit_box dd > p + p{ margin-top: 5px} 
.place_cmn .place_tit_box dd>p span.red{ font-weight: 500} 
/*main*/
.container .top_inner,
.container .bottom_inner{gap: 25px; width: 100%; display: flex; flex: none}
.container .bottom_inner{margin-top:35px; justify-content: space-between}
.container .top_inner > section, .container .top_inner > section .gray_box, .container .bottom_inner > section, .container .bottom_inner > section .gray_box{ height: 100%; display: flex; flex-direction: column; justify-content: flex-start; gap:20px;  width: 100%} 
.container .top_inner > section, .container .bottom_inner > section{gap:15px} 
.container .bottom_inner > *{ width: 100%} 
.container .top_inner .clearfix:before,.container .bottom_inner .clearfix:before, .container .top_inner .clearfix:after,.container .bottom_inner .clearfix:after{ display: none !important} 

.container .top_inner h3, .container .bottom_inner h3{ padding-bottom: 0; width: 100%;} 
/*Accident free score*/
.acci_box{max-width: 270px;}
.acci_box .gray_box{}
.acci_box .gray_box dl dt{position: relative;padding: 8px 0 40px 38px;background: url(../img/sub/icon_calendar.png)no-repeat left top;background-size: 30px;color: #606060;font-size: 1.5rem;letter-spacing: -0.15px;font-weight: 600;}
.acci_box .gray_box dl dd{text-align: right;color: #222; font-size: 1.6rem;font-weight: 600;}
.acci_box .gray_box dl dd span{margin-right: 10px; font-weight: 700;font-size: 3.2rem;}
.acci_box .gray_box, .acci_box .gray_box ~ .gray_box{ margin-top: 0} 

/*Alert Progress Status*/
.aler_box{}
.container .top_inner > section .nodata, .container .bottom_inner > section .nodata{ height: 100% !important; min-height:250px} 
.aler_box .gray_box{padding: 0; }
.aler_box .aler_table{ margin-top: 10px}
.aler_box .aler_table thead tr th{border-bottom: 1px solid #e7e9eb; height: 40px; vertical-align: middle}
.aler_box .aler_table tbody tr {border-bottom: 1px solid #e7e9eb;}
.aler_box .aler_table tr th{color: #222;  font-weight: 500;}
.aler_box .aler_table tr td{text-align: center;padding:0px 0;vertical-align: middle; height: 48px}
.aler_box .aler_table tr td .factor_box{position: relative; margin: 0 auto; background-color: #f2f4f5;border-radius: 10px; width: 30px; height: 30px;}
.aler_box .aler_table tr td img{width: 18px; height: 18px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.aler_box .board-paging{ margin: 0 auto 30px auto} 
.aler_box .round_btn span{ width: auto; min-width: 50px} 
@media screen and (max-width: 1650px) {
    .aler_box .aler_table{ table-layout: auto;}
    .aler_box .aler_table tr th, .aler_box .aler_table tr td{ padding-left: 8px; padding-right: 8px} 
} 
/*Danger Prevention*/
.dang_box{ min-width: 300px}
.container .top_inner > section.dang_box .gray_box{ justify-content: flex-start; gap:0} 
.dang_box .gray_box{padding: 0;}
.dang_box h4{padding: 0 0 0 24px; border-bottom: 1px solid #e7e9eb;color: #222; height: 40px; margin-top: 10px; flex: none; line-height: 40px}
.dang_box .chart_box { display: flex; gap: 30px; justify-content: center; align-items: center; height: 100% }
.dang_box .chart_box .chart_img{width: 180px;height: 180px; position: relative}
.chart_list{}
.dang_box .chart_box  .chart_list li{display: flex;align-items: center;}
.dang_box .chart_box  .chart_list li ~ li{margin-top: 8px;}
.dang_box .chart_box  .chart_list li img{width: 34px; height: 34px;margin-right: 8px;}
.dang_box .chart_box  .chart_list li span{font-size: 1.5rem;font-weight: 600;color: #222;}


/* 차트 */
.chart_box { position: relative;}
.chart_box .chart_title {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: #000;display: flex;justify-content: center;align-items: center;flex-direction: column;}
.chart_box .chart_title span:first-child {font-size: 13px;}
.chart_box .chart_title span:last-child {margin-top: 1px;font-size: 24px;font-weight: 900;}
.chart_box canvas{ width: 100%; height: 100%} 


/*Weather Information*/
.weat_box{width: 350px !important; flex: none}
.weat_box .weather_today{border-bottom: 1px solid #f3f4f5; display: flex; justify-content: space-between; padding: 0 0 28px 0}
.weat_box .weather_today .today{ width:120px; height: 96px;  display: flex; align-items: center; justify-content: center } 
.weat_box .weather_today .today img{ width: 100%; height: 100%;object-fit: fill; max-width: none} 
.weat_box .weather_today ul{display: flex;gap: 10px;justify-content: space-between;}
.weat_box .weather_today ul li p{margin-bottom: 13px;font-size: 1.3rem; font-weight: 500;text-align: center;}
.weat_box .weather_today ul li .chart_box{width:68px; height: 68px}
.weat_box .weather_week{padding: 0px;}
.weat_box .weather_week ul{ display: flex;}
.weat_box .weather_week ul li{flex-grow: 1; text-align: center;}
.weat_box .weather_week ul p{margin-bottom: 10px;font-size: 1.3rem; font-weight: 500;}
.weat_box .weather_week ul img{margin-bottom: 10px;}
.weat_box .weather_week ul span {display: block; font-size: 1.3rem; font-weight: 800;}

.gauge_chart {position: relative;}
.gauge_chart .chart_title {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: #000;display: flex;align-items: center; flex-direction: row; justify-content: center}
.gauge_chart .chart_title span:first-child {font-size: 15px;font-weight: 800;}
.gauge_chart .chart_title span:last-child {margin-left: 2px;margin-bottom: 1px;color: #a4aeb9;font-size: 12px;}


/*Status of Safety prevention by Workplace*/
.container .bottom_inner .place_box{ width:calc(100% - 375px)} 
.place_box .gray_box{padding: 0;  width: 100%; overflow: hidden}
.workplace_box .workplace{ display: flex; padding: 0 50px; height: 300px}


.place_box .place_tit .mid_tit{}
.place_box .place_tit .place_tit_box{}
.place_box .place_mgmt,.place_box .place_tit{position: relative; padding: 25px; width: 100% }
.place_box .place_tit{border-right: 1px solid #e7e9eb;width: 280px; flex: none; display: flex; flex-direction: column; justify-content: space-between }
.place_box .place_mgmt .swiper-slide{ display: flex; flex-direction: column; justify-content: space-between} 
.place_box .place_mgmt .swiper{ margin: 0; height: 100%}
.place_box .place_mgmt .swiper-slide > p,.place_box .place_mgmt .swiper-slide > p > a{position: relative;font-size: 1.8rem;font-weight: 600;color: #222; display: flex; align-items: center; gap:10px; top: auto; right: auto}
.place_box .place_mgmt .swiper-slide > p .button_more::after{ display: block; margin: 0; border-width: 2px; width: 7px; height: 7px} 
.place_box .place_mgmt .swiper .place_mgmt_s01{}
.place_box .place_mgmt .swiper .place_mgmt_s01 ul{ display: flex; justify-content: space-around; padding-bottom: 20px}
.place_box .place_mgmt .swiper .place_mgmt_s01 ul li~li{}
.place_box .place_mgmt .swiper .place_mgmt_s01 ul li dt{margin-bottom: 21px;}
.place_box .place_mgmt .swiper .place_mgmt_s01 ul li dt .icon_box{background: #f2f4f5;  width: 70px; height: 70px;border-radius: 26px;display: flex;justify-content: center; align-items: center;}
.place_box .place_mgmt .swiper .place_mgmt_s01 ul li .icon_box img{width: 36px; height: 36px;}
.place_box .place_mgmt .swiper .place_mgmt_s01 dd span{display: block;font-size: 2.2rem;font-weight: 600;text-align: center;line-height: 1.6;}
.place_box .place_mgmt .swiper .place_mgmt_s02{display:flex;gap: 25px;}
.place_box .place_mgmt .swiper .place_mgmt_s02 .kpi01{ min-width: 150px;}
.place_box .place_mgmt .swiper .place_mgmt_s02 .kpi01 img{width: 117px;height: 117px;display: block;margin-left: 17px;}
.place_box .place_mgmt .swiper .place_mgmt_s02 .kpi01 .tit{margin-top: 12px;font-weight: 600;text-align: center;}
.place_box .place_mgmt .swiper .place_mgmt_s02 .kpi01 .tit span{font-size: 1.2rem;}
.place_box .place_mgmt .swiper .place_mgmt_s02 .kpi01 .tit p{color:#222;margin-top: 12px;}
.place_box .place_mgmt .swiper .place_mgmt_s02 .kpi01 .tit p strong{font-size: 2rem;}
.place_box .place_mgmt .swiper .place_mgmt_s02 .kpi02{flex-grow: 1;position: relative;}
.place_box .place_mgmt .swiper .place_mgmt_s02 .kpi02 img{width: 381px;height: 144px;}
.place_box .place_mgmt .swiper .place_mgmt_s02 .kpi02 span {font-size: 1.4rem;font-weight: 800;position: absolute;bottom: 35px;}
.place_box .place_mgmt .swiper .place_mgmt_s02 .kpi02 .this_case{left: 8px;}
.place_box .place_mgmt .swiper .place_mgmt_s02 .kpi02 .this_minute{left: 115px;}
.place_box .place_mgmt .swiper .place_mgmt_s02 .kpi02 .last_case{left: 214px;}
.place_box .place_mgmt .swiper .place_mgmt_s02 .kpi02 .last_minute{left: 320px;}




.place_box .place_tit .btn_on_off{top: 26px;right:25px;}
.btn_on_off.on{ background:#38b261;} 
.btn_on_off.off{ background:#606060;} 
.place_box .mgmtPage{position: absolute;bottom: 20px;left: calc(68% - 48px);}
.swiper-pagination-clickable .swiper-pagination-bullet.swiper-pagination-bullet-active{width: 24px; border-radius: 10px; background-color: #3339cd;}



.swiper-button-prev, .swiper-rtl .swiper-button-next,
.swiper-button-next, .swiper-rtl .swiper-button-prev{width: 32px;height: 32px;background: rgba(0, 0, 0, 0.07);color: #fff;border-radius: 50%;top: 57%;left: 25px;background-color: #3339cd; z-index: 9}
.swiper-button-next{right: 25px;left: auto;}
.swiper-button-prev:hover, .swiper-rtl .swiper-button-next:hover,
.swiper-button-next:hover, .swiper-rtl .swiper-button-prev:hover{background-color: #3339cd;}
.swiper-button-next:after, .swiper-button-prev:after{font-size: 1.5rem;font-weight: 600;}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{    background: rgba(0, 0, 0, 0.07); opacity: 1} 
/*Safety Minimap*/
.map_box{width: 350px !important; flex: none }
.map_box .gray_box{padding: 0;background: #eee;height: 300px !important; background-size: 100%; flex: none; position: relative; display: block !important}
.map_box .gray_box .pointer{ position: absolute; left: 50%; top: 50%; font-size: 12px; }
.map_box .gray_box .weather{ background:rgba(255,255,255,0.75); padding:3px 8px; border: 1px solid #666; border-radius: 10px; display: flex; gap:5px; align-items: center; justify-content: center; line-height: 1; margin-top: 5px} 
.map_box .gray_box .weather span+span:before{ content: "/"; padding-right: 5px; color: #ddd} 
/*more*/
section{position: relative;}
.button_more{position: absolute; top: 8px; right: 7px; font-size: 1.3rem;color: #999;font-weight: 300;}
.button_more::after{ margin-left: 5px; content: ''; display: inline-block; width: 5px; height: 5px; border-top: 1px solid #707070; border-right: 1px solid #707070; transform: rotate(45deg); }

/*main_pop*/
#popupLayer01{width:995px;}
.popup_header_box{}
.popup_header_box .pop_header{margin: 23px 30px 0 30px;font-size: 2rem;color: #222;font-weight: 600;border-bottom: 1px solid #e5e6ea;padding-bottom: 20px;}
.popup_body_box{display: flex; align-items: flex-start}
.popup_body_box .clearfix:before, .popup_body_box .clearfix:after{ display: none} 
.popup_body_box > div{position: relative;;padding: 24px 30px 26px; width: 100%}
.popup_body_box > div ~ div{border-left: 1px solid #f4f4f4;}
.popup_body_box .scd_tit{font-size: 18px; font-weight: 600; color: #222;margin-bottom: 14px;}
.popup_body_box .details_box{width: 355px; margin-top: 0; flex: none}
.popup_body_box .details_box .details_tit .place_tit_box{padding: 0 0 0 0;}
.popup_body_box .hazard_box{position: relative;}
.popup_body_box .hazard_box dl{display: flex;align-items: center;margin: 14px 0 12px;}
.popup_body_box .hazard_box dl dt{margin-right: 15px; }
.popup_body_box .hazard_box dl dd{line-height: 1.3;font-size: 1.4rem;color: #222;font-weight: 500;}
.popup_body_box .hazard_box .hazard_list{min-width: 260px;background: #f2f4f5;padding: 20px; border-radius: 10px;}
.popup_body_box .hazard_box .hazard_list li{ display: flex; font-size: 1.3rem;justify-content: space-between;}
.popup_body_box .hazard_box .hazard_list li ~ li{padding-top: 12px;}
.popup_body_box .hazard_box .btn_more{top: 25px; right: 35px;}
.popup_body_box .mg_box{ width: 100%; max-width:320px}
.popup_body_box .mg_box .mg_box_min{min-height: 96px;padding: 20px 58px 19px 20px; border-radius: 10px; border: solid 1px rgba(188, 188, 188, 0.6);}
.popup_body_box .mg_box .mg_box_min:nth-of-type(2){padding: 14px 58px 19px 20px; }
.popup_body_box .mg_box .mg_box_min ~ .mg_box_min{margin-top: 15px;}
.popup_body_box .mg_box .mg_box_min p.mg_tit{font-size: 1.3rem;color: #606060;padding: 3px 0 2px 40px; min-height: 20px}
.popup_body_box .mg_box .mg_box_min p.mg_tit:nth-of-type(1){background: url(../img/main/icon_pmg01.png) no-repeat left;background-size: 20px 20px;}
.popup_body_box .mg_box .mg_box_min p.mg_tit:nth-of-type(2){background: url(../img/main/icon_pmg02.png) no-repeat left;background-size: 20px 20px;}
.popup_body_box .mg_box .mg_box_min p.mg_tit:nth-of-type(3){background: url(../img/main/icon_pmg03.png) no-repeat left;background-size: 20px 20px;}
.popup_body_box .mg_box .mg_box_min p.mg_tit ~ p.mg_tit{margin-top: 14px;}
.popup_body_box .mg_box .mg_box_min p.mg_note{font-size: 1.3rem; color: #999;}
.popup_body_box .mg_box .btn_exc_resend{padding: 0 17px; display: flex; align-items: center; justify-content: center; top: 16px;right: 30px; } 
.btn_exc_resend:before{ display: none; } 


#popupLayer01 .popup_body_box .btn_on_off{top: 2px; ;right: 0px; }
#popupLayer01 .popup_body_box .button_more{top: 26px; right: 26px;}