@charset "UTF-8";

html,body {height: 100%; }
body {background-color:#f3f3f3;}

/*레이아웃*/
#wrap{padding-left:190px;}

#side{position: fixed; top:0; left:0; bottom:0; z-index:1000; width:190px; height:100%; background: #2d3136;}
#header{position:fixed;top:0; width:100%; z-index: 999; height:40px;line-height: 40px;margin-left:-190px; color:#fff; font-size:18px;background: #1f9483; }

#container{width:100%; box-sizing: border-box;}

#search{position: -webkit-sticky;position: sticky; top: 40px;min-width:1660px;  z-index: 999;display: flex; align-items: center; height:70px; padding-left:30px; border-bottom:1px solid #dedede; background: #fff; box-sizing: border-box;}
#contents{min-width:1660px; padding:60px 25px 30px 25px;   }

#header h1{margin-left:220px; display: inline-block;}
#header span a{float:right; font-size:12px; color:#fff; padding-right: 30px; }
.user{width:190px; height:40px; font-size: 14px; line-height: 40px;  color:#a9aaab; background: url(../images/icn-user.png)no-repeat 20px 12px, #222529; padding-left:44px; box-sizing: border-box; }

.gnb{padding-top:34px; box-sizing: border-box; }
.gnb li a{color:#a5a7a9; }
.gnb li a:hover{color:#fff;} 
.gnb li.on a{color:#1f9483;}
.gnb li{display:block;width:160px; height:30px; line-height: 30px; margin-bottom: 45px; padding-left: 44px; box-sizing: border-box;}
.gnb li:nth-child(1){background: url(../images/gnb_01.png)no-repeat 20px 6px}
.gnb li:nth-child(1).on{background: url(../images/gnb_01_on.png)no-repeat 20px 6px}
.gnb li:nth-child(2){background: url(../images/gnb_02.png)no-repeat 20px 6px}
.gnb li:nth-child(2).on{background: url(../images/gnb_02_on.png)no-repeat 20px 6px}
.gnb li:nth-child(3){background: url(../images/gnb_03.png)no-repeat 20px 6px}
.gnb li:nth-child(3).on{background: url(../images/gnb_03_on.png)no-repeat 20px 6px}
.gnb li:nth-child(4){background: url(../images/gnb_04.png)no-repeat 20px 6px}
.gnb li:nth-child(4).on{background: url(../images/gnb_04_on.png)no-repeat 20px 6px}
.gnb li:nth-child(5){background: url(../images/gnb_05.png)no-repeat 20px 6px}
.gnb li:nth-child(5).on{background: url(../images/gnb_05_on.png)no-repeat 20px 6px}
.gnb li:nth-child(6){background: url(../images/gnb_06.png)no-repeat 20px 6px}
.gnb li:nth-child(6).on{background: url(../images/gnb_06_on.png)no-repeat 20px 6px}
.gnb li:nth-child(7){background: url(../images/gnb_05.png)no-repeat 20px 6px}
.gnb li:nth-child(7).on{background: url(../images/gnb_05_on.png)no-repeat 20px 6px}
.gnb li:nth-child(8){background: url(../images/gnb_08.png)no-repeat 20px 6px}
.gnb li:nth-child(8).on{background: url(../images/gnb_08_on.png)no-repeat 20px 6px}
.gnb li:nth-child(9){background: url(../images/gnb_09.png)no-repeat 20px 6px}
.gnb li:nth-child(9).on{background: url(../images/gnb_09_on.png)no-repeat 20px 6px}
.gnb li:nth-child(10){background: url(../images/gnb_10.png)no-repeat 20px 6px}
.gnb li:nth-child(10).on{background: url(../images/gnb_10_on.png)no-repeat 20px 6px}
.gnb li:nth-child(11){background: url(../images/gnb_05.png)no-repeat 20px 6px}
.gnb li:nth-child(11).on{background: url(../images/gnb_05_on.png)no-repeat 20px 6px}

/*공통*/
/*margin*/
.mt4{margin-top:4px;}
.mt8{margin-top:8px;}
.mt10{margin-top:10px;}
.mt20{margin-top:20px;}
.mt50{margin-top:50px;}

.mr10{margin-right:10px;}
.mr20{margin-right:20px;}

.ml10{margin-left:10px;}
.ml15{margin-left:15px;}
.ml20{margin-left:20px;}

.mb10{margin-bottom:10px;}
.mb15{margin-bottom:15px;}
.mb17{margin-bottom:17px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb40{margin-bottom:40px;}

.float_l{float:left;}
.float_r{float:right;}
.up{content:""; display:inline-block; width:9px; height:9px; background: url(../images/up.png);margin:0 4px;}
.down{content:""; display:inline-block; width:9px; height:9px; background: url(../images/down.png);margin:0 4px;}
.equal {content:""; display:inline-block;width:18px; color:#000; font-weight: 400; font-size:12px;}

/*칼라*/
.t_red{ color:#9c2006; }
.t_green{color:#09590f;}
.t_blue{color:#2d5e88;}
.bold{font-weight: 500;}
/*search*/
.time{display:inline-block; width:80px; height:36px; line-height: 36px; text-align: center;}

/*버튼*/
button{font-size:14px;  text-align: center;}
.btn_bk{width:80px; color:#fff; background: #262626; padding:8px 0; border:0;font-family: "Montserrat"; }
.time_btn{width:36px; height:36px; background:#fff;border:1px solid #e3e3e3;padding:0; vertical-align: top;}
.btn_basic{width:128px; height:30px; line-height: 30px; font-size:12px;background: #2b2b2b; color:#fff;border-radius: 3px; }
.btn_pop{font-size:14px; line-height:20px; padding:8px 0; text-align: center; background: #fff;}
button.btn_b{width:80px; color:#fff; background: #262626; border:0; }
button.btn_c{width:80px; color:#1b1b1b; background: #eee; border:0; }
button.btn_g{width:100px; color:#fff; background: #262626; border:0; }

button.view{font-size:11px; padding:2px 6px; border:1px solid #eee;color:#888; background: #f3f3f3;}
/*box*/
.cont_box0{ background: #fff; padding:10px 0; border:1px solid #e6e6e6; border-radius: 3px; box-shadow: 1px 1px 2px 0 rgba(0,0,0,.1);}
.cont_box{ clear:both;background: #fff; padding:30px;border:1px solid #e6e6e6; border-radius: 3px; box-shadow: 1px 1px 2px 0 rgba(0,0,0,.1); box-sizing: border-box;}
.cont_box2{ clear:both;background: #fff; padding:20px;border:1px solid #e6e6e6; border-radius: 3px; box-shadow: 1px 1px 2px 0 rgba(0,0,0,.1); box-sizing: border-box;}
.cont_nodatabox{height:173px; display: flex; align-items: center; justify-content: center;background: #fff; border:1px solid #e6e6e6; border-radius: 3px; box-shadow: 1px 1px 2px 0 rgba(0,0,0,.1); box-sizing: border-box;}

/*table*/
table.basic{width:100%;}
table.basic thead th{height:38px; font-size:14px; line-height: 38px;  color:#999; background: #fbfbfb; text-align: left;border-top:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0;}
table.basic tbody td{height:59px; font-size:14px; line-height: 59px;  color:#4d4d4d; text-align: center;border-top:1px solid #f3f3f3;border-bottom:1px solid #f3f3f3; text-align: left;  box-sizing: border-box;}
table.basic tbody th{height:59px; font-size:14px; line-height: 59px;  color:#333; font-weight: 500; text-align: center;border-top:1px solid #f3f3f3;border-bottom:1px solid #f3f3f3;  padding-left:30px; box-sizing: border-box;}

table.basic2{width:100%;text-align: left;}
table.basic2 th,table.basic2 td{vertical-align: middle; font-size:14px;padding:10px 0 10px 20px;}
table.basic2 th{line-height: 38px;  color:#999; background: #fbfbfb; border-top:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0;}
table.basic2 td{font-size:14px; line-height: 18px;  color:#4d4d4d; border-top:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0;}

table.basic3{width:100%;}
table.basic3 thead th, table.basic3 tbody td,table.basic3 tbody th{text-align: center;vertical-align: middle;border:1px solid #f0f0f0;}
table.basic3 thead th{height:38px; font-size:14px; line-height: 38px;  color:#999; background: #fbfbfb;}
table.basic3 tbody td{height:45px; font-size:14px; line-height: 26px;  color:#4d4d4d; box-sizing: border-box;}
table.basic3 tbody th{ background: #fbfbfb; font-size:14px; line-height: 26px;  color:#333; font-weight: 500; padding:8px 0;  box-sizing: border-box;}
table.basic3 tbody td.txt_l{text-align: left; padding-left: 10px;	}


/*공통끝*/


/*메뉴-QC작업 패턴 분석*/
.cont_top_l{ float: left; width:45%; height:180px; overflow-x: auto;}
.cont_top_l ul{display:flex; flex-wrap:nowrap;}
.cont_top_l ul li{-webkit-flex:1; -ms-flex:1; flex:1; margin-right: 10px;}
.cont_top_l ul li:last-child{margin-right:0;}
.cont_top_l ul li.ct_select{border:2px solid #1f9483; border-radius: 4px;}
.cont_top_r{float:right;width:54%; height:160px;  }

.vessel{width:100%; height:110px; background:#f3f3f3; clear:both; position: -webkit-sticky;position: sticky; top: 110px; padding-top:4px;z-index:10;}

.vessel ul.v_top {;height:51px;}
.vessel ul li{float:left;}
.vessel ul.v_top > li:first-child{width:104px;height:51px;  background: url(../images/vessel_01.jpg)no-repeat;}
.vessel ul.v_top > li:last-child{width:58px;height:51px;  background: url(../images/vessel_end01.jpg)no-repeat;}
.vessel ul.v_top ul{ height:51px; background: url(../images/vessel_bg.jpg);}
.vessel ul.v_top ul li.hatch{width:4px; height:51px; background: url(../images/hatch.jpg);}
.vessel ul.v_top ul li{ width:79px; height:51px;}

.vessel ul.v_bottom { height:20px; }
.vessel ul.v_bottom > li:first-child{width:277px;height:20px;  background: url(../images/vessel_02.jpg)no-repeat;}
.vessel ul.v_bottom > li:last-child{width:214px;height:20px;  background: url(../images/vessel_end02.jpg)no-repeat;}
.vessel ul.v_bottom > li:nth-child(2){height:20px;background: url(../images/vessel_b_bg.jpg);}
.vessel ul.v_bottom ul.v_center li{width:83px; height:20px; }

.vessel ul.v_name {margin-top: 5px;height:35px;}
.vessel ul.v_name > li:first-child{width:108px;height:20px;  }
.vessel ul.v_name > li:last-child{width:65px;height:20px;  }
.vessel ul.v_name > li{ width:83px; height:35px; text-align: center; line-height:14px;}
.vessel ul.v_name > li p{font-size:10px;}

/*Vessel List*/
.v_tit{font-size:14px; line-height: 45px; text-indent:40px;font-weight: 500; border-bottom: 1px solid #ececec; min-width:120px; background: url(../images/vessel.png)no-repeat 14px;}
.v_list{font-size:24px; line-height: 52px; border-bottom:1px dotted #bdbdbd; text-align: right;margin:0 12px;}
.v_list:last-child{border:0;}
.v_list span{font-size:12px; float:left; padding-left: 3px;}

.v_list2{font-size:14px; line-height: 52px; border-bottom:1px dotted #bdbdbd; text-align: right;margin:0 12px;}
.v_list2:last-child{border:0;}
.v_list2 span{display:inline;font-size:12px;float:left; padding-left: 3px;font-weight: 600;}

/*graph_box*/
.cont_box .g_l{float:left; width:65%;}
.cont_box .g_r{float:right; width:35%; padding-left:20px; box-sizing: border-box;}
.cont_box:after{content:"";display:block; clear:both;}
.cont_box .g_r .gr_table{width:100%; font-size: 12px; line-height: 16px; border-top:1px solid #f3f3f3;}
.cont_box .g_r .gr_table th{height:39px;  color:#999; border-bottom:1px solid #f3f3f3; vertical-align: middle;text-align: left; padding-left:10px;background: #fbfbfb;}
.cont_box .g_r .gr_table td{height:39px;  color:#414141; border-bottom:1px solid #f3f3f3; vertical-align: middle; text-align: center;}
.g_legend{font-size:11px;margin-bottom: 10px;}
.g_legend span{display:inline-block; margin-right:5px;width:14px; height:5px;}
.leg_b{ background:#4a84e8;}
.leg_v{background: #9a4dbd;}
.leg_g{background: #666;}
.leg_o{background: #ffb733;}

/*QC Plan*/
.cont_h2{font-size:16px; font-weight: 600; line-height: 20px; margin-bottom:20px;}
.cont_h2_l{font-size:16px; font-weight: 600; line-height: 20px; margin-bottom:20px;float:left;}
.cont_rt{float:right; display: flex; align-items: center;}
.bay_job{ display: flex; align-items: top; margin:9px 0;}
.bay_job dt{font-size:14px;width:79px; line-height: 22px; font-weight: 500;}
.bay_job dd{display:inline-block; width:79px;margin-right:4px;font-size:12px;     }
.bay_job .job_blue li{background: #d9f0f4;border:1px solid #b7d3f1;color:#4e5257;}
.bay_job .job_red li{background: #f2dfdc;border:1px solid #f6c9b9;color:#f15d5d;}
.bay_job .job_gray li{background: #e7e7e7;border:1px solid #d7d7d7;color:#222;}

.bay_job li{width:77px; height:20px;line-height: 18px; float:left;text-align:center;}
.bay_job li.blank{background: #fff; height:21px;border:0; border-left:1px solid rgba(0,0,0,0);}
.bay_job li.half{width:38px;}
.bay_job li.bb_n{border-bottom:0;}
.bay_job li.bl_n{border-left:0;}
.bay_job li.bt_n{border-top:0;}

.bay_job_w{margin-top:10px;display: flex; align-items: top;}
.bay_job_w dt{width:79px;font-size:14px; line-height: 22px; font-weight: 500;}
.bay_job_w dd{display:inline-block;width:79px;margin-right:4px; }
.bay_job_w dd span{width:77px; height:20px;line-height: 18px;font-size:12px;  float:left;text-align:center;border:1px solid #e3e3e3;color:#2d3136;}


/*QC별 작업 그래프*/
.list_box{position: relative;width: -moz-fit-content; width: fit-content;border-bottom:1px solid #666; margin-left:79px;}

.list_box .qc_time{position: absolute; font-size:12px;  left:-55px; top:calc(-0.5px - 9px);}
.list_box .qc_time_last{position: absolute; font-size:12px;  left:-55px; bottom:calc(3px - 9px);}

.list_box .yard_crash{ position:absolute; width:83px;background:#34ff64; z-index: 5;}

table.view_list ul li div, table.detail ul li div{text-align: center; font-size:12px;padding-top:24px; box-sizing: border-box; font-weight: bold;}
table.view_list ul li div p, table.detail ul li div p{color:#ab0505; margin-top:10px;}

table.view_list {height:80px;  }
table.view_list td{height:80px; border-left:1px solid #eee;  }
table.view_list td ul{width:90%;margin:0 auto;}
table.view_list td li{position: relative; float:left;width:32.4%; min-height:1px;}
table.view_list td li.plan{ margin-right:1px;}
table.view_list td li.real{ margin-right:1px;}
table.view_list td li.plan .dash01 { position:absolute;width:100%;  background: #75a1e1; }
table.view_list td li.real .dash02 {  position:absolute;  width:100%;  background: #ae71ca; }
table.view_list td li.pred .dash03 {  position:absolute; width:100%; background: #ffb733; }

table.detail {padding:0;}
table.detail tr{background: url(../images/1min_line.gif)repeat;}
table.detail td{background: url(../images/10min_line.gif)repeat; height:360px; border-left:1px solid #eee;}
table.detail td:first-child{border-left:0;}
table.detail td ul{width:90%;margin:0 auto;}
table.detail td li{position: relative; float:left;width:32.4%; min-height:1px;}
table.detail td li.plan{ margin-right:1px;}
table.detail td li.real { margin-right:1px;}
table.detail td li .w100{ width:100%;}
table.detail td li div span{ position:absolute; width:50%; height:100%; border-left:1px solid #fff; z-index: 2;}
table.detail td li .w50{ width:50%;}
table.detail td li.plan .dash01{ position:absolute;  background: #75a1e1; padding:0;}     
table.detail td li.real .dash02 {  position:absolute;  background: #ae71ca; padding:0}
table.detail td li.pred .dash03 {  position:absolute;  background: #ffb733; padding:0}

.hide{display:none;}
.show{display: block;}
.more{position:absolute;top:-2px; right:-35px; width:30px; height:15px;background:rgba(0,0,0,0); border-radius: 2px; cursor: pointer;z-index: 2;}

.d_info{position:absolute; top:-2px; right:-35px; width:30px; height:15px; line-height: 12px;background:#060606; color:#fff; font-size:10px;padding-top:2px;box-sizing: border-box; text-align:center; border-radius: 3px; cursor: pointer;z-index: 1;}
.summary{position:absolute; top:-2px; right:-35px; width:30px; height:15px; line-height: 12px;background:#060606; color:#fff; font-size:10px;padding-top:2px;box-sizing: border-box;  text-align:center; border-radius: 3px; cursor: pointer;z-index: 1;}


/*Yard혼잡도*/
.traffic_l{position:absolute; right:260px;}
.traffic_l dd{position: relative;float:left;padding-right:60px;height:30px; display: flex; align-items: center;}
.traffic_l dd .circle{position: absolute; left:55px; top:9px; width:14px; height:14px; border-radius: 14px;  }
.c1{ background: #c23131; }
.c2{ background: #d18e36; }
.c3{ background: #21693a; }
.c4{ background: #b0b0b0; position: absolute; left:95px;}

.traffic_box{position:relative; width:1582px; height:464px; margin:50px auto; background: url(../images/traffic_bg0.jpg);}

.tf{height:4px; position: absolute;}

/*YardCrane 분석*/
.legend { height:40px; margin-left:20px;}
.legend dt{display: block; line-height:30px; }
.legend dd{float:left; padding-right:15px;line-height: 12px; font-size:12px; }

.sq{display: inline-block; width:29px; height:7px; margin-right: 3px;box-sizing: border-box;}
.jt{display: inline-block;border: 1px solid #333; width:29px; height:7px; margin-right: 3px;box-sizing: border-box;}

.p01{background: #a4acb9;}
.p02{background: #90b387;}
.p03{background: #4a9cb6;}
.p04{background: #fcc742;}
.p05{background: #fa7e23;}


.p01_l{border: 2px solid #a4acb9; }
.p02_l{border: 2px solid #90b387;}
.p03_l{border: 2px solid #4a9cb6;}
.p04_l{border: 2px solid #fcc742;}
.p05_l{border: 2px solid #fa7e23;}

.pl_r{background: #fddee4; border: 2px solid #be73e1;}
.pl_n{background: #eaeaea; border: 2px solid #bfafc6;}

.ds{background: #a3a0fb; }
.ld{background: #4ad7ff; }
.mi{background: #9abfdf; }
.mo{background: #9adbdf; }
.gi{background: #ffb25f; }
.go{background: #ffda83; }
.rh{background: #5ee3a1; }
.non{background: #dbdfe7; }
.wt{background: #fff; }


.b_infobox{display:flex; width:100%; padding:15px 0;}
.block{position: relative; flex:1;  flex-wrap:nowrap; border:1px solid #b7b7b7;padding:5px;margin-right: 22px;box-sizing: border-box;}
.block:nth-child(3n){margin-right:0;}
.bl_num{display:inline-block; width:54px; height:37px; font-size:18px; color:#fff; text-align:center; border-radius: 3px; background:#383838;line-height: 37px; }

table.bi_sec{ width:100%; font-size:12px; }
table.bi_sec td{padding:0 3px; box-sizing: border-box;}
table.bi_sec td.check{vertical-align: top; text-align: right;}

table.bi_sec .top_info ul{display: flex; align-items: center; width:100%; height:38px;border-bottom:1px solid #dedede;box-sizing: border-box;}
table.bi_sec .top_info li{height:10px; float:left;display: flex; align-items: center; box-sizing: border-box; }
table.bi_sec .top_info li:nth-child(1){width:30%; padding-left: 10px;	 }
table.bi_sec .top_info li:nth-child(2){width:18%; padding-right: 10px;display: flex; justify-content: flex-end;}
table.bi_sec .top_info li:nth-child(3){width:2%; text-align: center; }
table.bi_sec .top_info li:nth-child(4){width:30%; padding-left: 10px;	}
table.bi_sec .top_info li:nth-child(5){width:18%; padding-right: 10px; display: flex; justify-content: flex-end;}

table.bi_sec .top_info2 ul{display: flex; align-items: center; width:100%; height:38px;border-bottom:1px solid #dedede;box-sizing: border-box;}
table.bi_sec .top_info2 li{height:10px; float:left;display: flex; align-items: center; box-sizing: border-box; }
table.bi_sec .top_info2 li:nth-child(1){width:15%; padding-left: 10px;	 }
table.bi_sec .top_info2 li:nth-child(2){width:17%; padding-right: 10px;display: flex; justify-content: flex-end;}
table.bi_sec .top_info2 li:nth-child(3){width:2%; text-align: center; }
table.bi_sec .top_info2 li:nth-child(4){width:15%; padding-left: 10px;	}
table.bi_sec .top_info2 li:nth-child(5){width:17%; padding-right: 10px; display: flex; justify-content: flex-end;}
table.bi_sec .top_info2 li:nth-child(6){width:2%; text-align: center; }
table.bi_sec .top_info2 li:nth-child(7){width:15%; padding-left: 10px;	}
table.bi_sec .top_info2 li:nth-child(8){width:17%; padding-right: 10px; display: flex; justify-content: flex-end;}

table.bi_sec .m_info ul{width:100%; margin-top:4px;}
table.bi_sec .m_info ul li{float: left;}
table.bi_sec .m_01{font-size: 14px; line-height:28px; text-align: center;}
table.bi_sec .m_02{display: flex; align-items: center; justify-content:center; width:100%; height:34px; line-height:28px;box-sizing: border-box;}

.m01{border: 3px solid #a4acb9; }
.m02{border: 3px solid #90b387;}
.m03{border: 3px solid #4a9cb6;}
.m04{border: 3px solid #fcc742;}
.m05{border: 3px solid #fa7e23;}


table.bi_sec .b_info ul{width:100%;margin-top:3px;}
table.bi_sec .b_info ul li{float: left;}
table.bi_sec .b_01{line-height:24px; text-align: center;}
table.bi_sec .b_02{width:100%; height:7px;  box-sizing: border-box;}

.b01{border-bottom: 7px solid #a4acb9; }
.b02{border-bottom: 7px solid #90b387;}
.b03{border-bottom: 7px solid #4a9cb6;}
.b04{border-bottom: 7px solid #fcc742;}
.b05{border-bottom: 7px solid #fa7e23;}


/*CHE 패턴분석2-비고*/
table.bi_sec .pl_r01{display: flex; align-items: center; justify-content:center;background: #fddee4; border: 3px solid #be73e1; width:100%; height:28px; margin:3px 0 1px 0;line-height:22px;box-sizing: border-box;}
table.bi_sec .pl_n01{display: flex; align-items: center; justify-content:center;background: #eaeaea; border: 3px solid #bfafc6; width:100%; height:28px; margin:3px 0 1px 0;line-height:22px;box-sizing: border-box;}

/*CHE 패턴분석2-Container Type*/
table.bi_sec .m_info li .con_t li{display: flex; align-items: center; justify-content:center; height:34px; line-height:28px;box-sizing: border-box;}
/*CHE 패턴분석2-Job Type*/
table.bi_sec .m_info li .con_t2 ul li:nth-child(1){border-left:1px solid #333; }

table.bi_sec .m_info li .con_t2 li{display: flex;  border-top:1px solid #333;border-bottom:1px solid #333;align-items: center; justify-content:center; height:34px; margin-top:10px;box-sizing: border-box;}}

/*미니맵공통*/
.yc_traffic{width:490px;  border:1px solid #e2e2e2; }
ul.cont_top {width:100%; height:140px;display: flex; justify-content:space-between;}
ul.cont_top > li:nth-child(1){float:left;height:140px; display: flex; align-items: flex-end; justify-content:space-between; }
ul.cont_top > li:nth-child(2){display: flex; align-items: flex-end;}
ul.cont_top > li:nth-child(2) li button{margin-top: 5px;}

/* tab */
.tabCont {display:none; width:100%; margin-top: 20px; }
.p_tab { width:100%;padding:10px 50px; box-sizing: border-box; }
.p_tab ul {position:relative; width:393px; height:118px; background: url(../images/traffic_s_bg.jpg)no-repeat;}
.p_tab li a.tab01{ position:absolute; top:22px; left:43px; width:126px; height:28px; background: rgba(255,255,255,0.6); }
.p_tab li a.tab02{position:absolute; top:20px; left:177px; width:105px; height:28px; background: rgba(255,255,255,0.6);}
.p_tab li a.tab03{position:absolute; top:20px; left:290px; width:110px; height:28px; background: rgba(255,255,255,0.6);}
.p_tab li a.tab04{position:absolute; top:54px; left:28px; width:140px; height:28px; background: rgba(255,255,255,0.6);}
.p_tab li a.tab05{position:absolute; top:51px; left:175px; width:105px; height:56px; background: rgba(255,255,255,0.6);}
.p_tab li a.tab06{position:absolute; top:51px; left:290px; width:110px; height:25px; background: rgba(255,255,255,0.6);}
.p_tab li a.tab07{position:absolute; top:79px; left:290px; width:108px; height:30px; background: rgba(255,255,255,0.6);}

.p_tab span{ z-index:2; width:23px; height:22px;font-size:12px; line-height:22px;text-align:center; border-radius:2px;background: rgba(180,180,180,0.8);  }
.p_tab span.num_01{position: absolute;top:21px; left:43px;}
.p_tab span.num_02{position: absolute;top:21px; left:175px;}
.p_tab span.num_03{position: absolute;top:21px; left:287px;}
.p_tab span.num_04{position: absolute;top:54px; left:43px;}
.p_tab span.num_05{position: absolute;top:51px; left:175px;}
.p_tab span.num_06{position: absolute;top:51px; left:287px;}
.p_tab span.num_07{position: absolute;top:80px; left:287px;}

.p_tab li.selected span{  background: #1f9483; color:#fff;}
.p_tab li.selected a{z-index:1;  color:#000; opacity: 0; }



table.bi_sec .t_info2_l{float:left;}
table.bi_sec .t_info2_l ul{display: flex; align-items: center; width:100%; height:38px;box-sizing: border-box;margin-left: 	5px;}
table.bi_sec .t_info2_l li{width:34px; height:28px; line-height: 28px;}
table.bi_sec .t_info2_r{float:right;}
table.bi_sec .t_info2_r ul{display: flex; align-items: center; width:100%; height:38px;box-sizing: border-box;}
table.bi_sec .t_info2_r li{width:44px; height:28px;line-height: 28px; background:#dedede;margin-right:19px; text-align: center; border-radius: 3px;  }


table.bi_sec .m_info2{border-bottom:1px solid #dedede;}
table.bi_sec .m_info2_l{float:left;}
table.bi_sec .m_info2_l ul{display: flex; align-items: center; width:100%; height:38px;box-sizing: border-box;margin-left: 	5px;}
table.bi_sec .m_info2_l li{width:70px;font-size: 14px; font-weight: 600; height:28px; line-height: 28px;box-sizing: border-box; }

table.bi_sec .m_info2_l li:nth-child(3){width:30px; text-align: right;color:#666;}
table.bi_sec .m_info2_r{float:right;}
table.bi_sec .m_info2_r ul{display: flex; align-items: center; width:100%; height:38px;box-sizing: border-box;}
table.bi_sec .m_info2_r li{width:43px; height:28px;line-height: 28px; margin-right:19px; text-align: center;   }

/*최적 장비 투입댓수*/
.legend2 { height:20px; margin-left:20px; float: right;}
.legend2 dt{display: block; line-height:30px; }
.legend2 dd{float:left; padding-right:15px;line-height: 12px; font-size:12px;  }

.cont_left{float:left; width:21%;}
.cont_right{float:right; width:78%;overflow: auto; }

table.qc_table{position: relative; min-width:1200px;}
table.qc_table caption.time{ width:100%; height:30px;padding-top: 20px;}
table.qc_table caption.time span{position: absolute; font-size:12px;line-height: 30px;}
table.qc_table caption.time span:nth-child(1){position: absolute;left:3px;}
table.qc_table caption.time span:nth-child(2){position: absolute;left:360px;}
table.qc_table caption.time span:nth-child(3){position: absolute;left:720px;}
table.qc_table caption.time span:nth-child(4){position: absolute;left:1080px;}
table.qc_table caption.time span:nth-child(5){position: absolute;left:1440px;}
table.qc_table caption.time span:nth-child(6){position: absolute;left:1800px;}
table.qc_table caption.time span:nth-child(7){position: absolute;left:2160px;}
table.qc_table caption.time span:nth-child(8){position: absolute;left:2520px;}
table.qc_table caption.time span:nth-child(9){position: absolute;left:2880px;}
table.qc_table caption.time span:nth-child(10){position: absolute;left:3240px;}
table.qc_table caption.time span:nth-child(11){position: absolute;left:3600px;}
table.qc_table caption.time span:nth-child(12){position: absolute;left:3960px;}
table.qc_table caption.time span:nth-child(13){position: absolute;left:4320px;}
table.qc_table caption.time span:nth-child(14){position: absolute;left:4680px;}
table.qc_table caption.time span:nth-child(15){position: absolute;left:5040px;}
table.qc_table caption.time span:nth-child(16){position: absolute;left:5400px;}
table.qc_table caption.time span:nth-child(17){position: absolute;left:5760px;}
table.qc_table caption.time span:nth-child(18){position: absolute;left:6120px;}
table.qc_table caption.time span:nth-child(19){position: absolute;left:6480px;}
table.qc_table caption.time span:nth-child(20){position: absolute;left:6840px;}
table.qc_table caption.time span:nth-child(21){position: absolute;left:7200px;}
table.qc_table caption.time span:nth-child(22){position: absolute;left:7560px;}
table.qc_table caption.time span:nth-child(23){position: absolute;left:7920px;}
table.qc_table caption.time span:nth-child(24){position: absolute;left:8280px;}
table.qc_table caption.time span:nth-child(25){position: absolute;left:8640px;}

table.qc_table .qc_time_last{position: absolute; right:3px;font-size:12px;  line-height: 30px;  }

table.qc_table caption.hatch{ width:10px; height:10px;}
table.qc_table caption.hatch span{position: absolute; font-size:10px;line-height: 12px;}
table.qc_table caption.hatch span:nth-child(1){position: absolute;top:60px;left:4px;}
table.qc_table caption.hatch span:nth-child(2){position: absolute;top:70px;left:4px;}
table.qc_table caption.hatch span:nth-child(3){position: absolute;top:80px;left:4px;}
table.qc_table caption.hatch span:nth-child(4){position: absolute;top:90px;left:4px;}
table.qc_table caption.hatch span:nth-child(5){position: absolute;top:100px;left:4px;}
table.qc_table caption.hatch span:nth-child(6){position: absolute;top:110px;left:4px;}
table.qc_table caption.hatch span:nth-child(7){position: absolute;top:120px;left:4px;}
table.qc_table caption.hatch span:nth-child(8){position: absolute;top:130px;left:4px;}
table.qc_table caption.hatch span:nth-child(9){position: absolute;top:140px;left:4px;}
table.qc_table caption.hatch span:nth-child(10){position: absolute;top:150px;left:4px;}
table.qc_table caption.hatch span:nth-child(11){position: absolute;top:160px;left:4px;}
table.qc_table caption.hatch span:nth-child(12){position: absolute;top:170px;left:4px;}
table.qc_table caption.hatch span:nth-child(13){position: absolute;top:180px;left:4px;}
table.qc_table caption.hatch span:nth-child(14){position: absolute;top:190px;left:4px;}
table.qc_table caption.hatch span:nth-child(15){position: absolute;top:200px;left:4px;}
table.qc_table caption.hatch span:nth-child(16){position: absolute;top:210px;left:4px;}
table.qc_table caption.hatch span:nth-child(17){position: absolute;top:220px;left:4px;}
table.qc_table caption.hatch span:nth-child(18){position: absolute;top:230px;left:4px;}
table.qc_table caption.hatch span:nth-child(19){position: absolute;top:240px;left:4px;}
table.qc_table caption.hatch span:nth-child(20){position: absolute;top:250px;left:4px;}
table.qc_table caption.hatch span:nth-child(21){position: absolute;top:260px;left:4px;}
table.qc_table caption.hatch span:nth-child(22){position: absolute;top:270px;left:4px;}
table.qc_table caption.hatch span:nth-child(23){position: absolute;top:280px;left:4px;}
table.qc_table caption.hatch span:nth-child(24){position: absolute;top:290px;left:4px;}
table.qc_table caption.hatch span:nth-child(25){position: absolute;top:300px;left:4px;}
table.qc_table tr{background: url(../images/1min_line2.gif)repeat;}
table.qc_table td{background: url(../images/10min_line2.gif)repeat; border:1px solid #ccc; height:10px;}
table.qc_table ul{width:100%;}

.vs01{position:absolute;height:10px; background: rgba(46,113,108,0.8);}
.vs02{position:absolute;height:10px; background: rgba(230,160,60,0.8);}
.vs03{position:absolute;height:10px; background: rgba(193,57,52,0.8);}
.vs04{position:absolute;height:10px; background: rgba(61,162,225,0.8);}
.vs05{position:absolute;height:10px; background: rgba(24,50,91,0.8);}

.qc{display: inline-block;width:10px; height:10px; margin-right: 3px;box-sizing: border-box;}
.c01{background: rgba(46,113,108,0.8);}
.c02{background: rgba(230,160,60,0.8);}
.c03{background: rgba(193,57,52,0.8);}
.c04{background: rgba(61,162,225,0.8);}
.c05{background: rgba(24,50,91,0.8);}

/*프로세스 흐름분석*/
.pcont_top{display: flex; justify-content: space-between;}
ul.pcont_box {display:flex; flex-wrap:nowrap;margin-top: 10px;}
ul.pcont_box li{-webkit-flex:1; -ms-flex:1; flex:1; padding:0 10px; box-sizing: border-box;}
ul.pcont_box .pcont_h2{position: relative; line-height: 30px;font-weight: 500;font-size:15px; letter-spacing: -0.5px;}
ul.pcont_box .pcont_h2 span.add{ position: absolute;right:3px; font-size:12px; cursor:pointer;}
ul.pcont_box .close_s{position: absolute;right:3px;top:9px;content: ""; width:18px; height:18px;  background: url(../images/icn-l-close.png);}
ul.pcont_box .pcont_cont{height:130px; overflow-y:auto; border: 1px solid #e6e6e6; }
ul.pcont_box .pcont_cont p{position: relative; width:100%;line-height: 36px; padding-left:5px;margin-top: 3px; border:1px solid #eee; border-radius:10px;box-sizing: border-box;}

.pc_gbox{width: 100%;  }
.pc_gbox .pcg_tit{width:130px; float:left;margin: 10px 20px 0 0;padding:10px; background:#eee; border-radius:10px; font-weight: 500; text-align:center; box-sizing: border-box; line-height: 30px;}
.pc_gbox ul{ width:90%; float:left; }
.pc_gbox ul li{margin-right:10px; display: inline-block; padding:10px 0;}
.pc_gbox ul p{text-align: center; font-size:12px;line-height: 26px;}
hr.a{width: 100%;border-top:1px solid #ececec;}

.priductivityText{ height: 70px; float: left; }
.productivityBtn{ position: -webkit-sticky;position: sticky; top: 40px;  display: flex; align-items: center; height:70px; padding-left:30px; background: #fff; box-sizing: border-box; margin-top: -25px; float: right;}

/*팝업*/
#mask{position: fixed; left:0; top:0; z-index: 9999;width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5);}

.pop_wrap{position:relative; padding:30px;}
.pop_box{ position:fixed; left:50%; top:50%; z-index: 10000;  max-height: 730px; overflow-y: auto; background: #fff; transform:translate(-50%, -50%);box-sizing: border-box;border-radius: 4px;}

.pop_h1{font-size:20px; color:#1b1b1b; font-weight:500; line-height:28px; }
.pop_conttxt1{ margin-top:12px; line-height:20px;color:#a4a4a4;}
.pop_cont{margin-top:20px; }
.pop_cont:after{content: ""; display: block; clear: both;}
.pop_btn{display: flex; justify-content:space-between; margin-top:30px;}
.pop_close{content:""; display:block; position: absolute; top:15px; right:15px;width:25px; height:25px;background: url(../images/btn_pop_close.png);background-size: 25px 25px; }

.pop_conttxt1{ margin-top:12px; line-height:20px;color:#a4a4a4;}
.pop_conttxt2{ margin-top:12px; line-height:20px;color:#414141;}

.pbox_l{position:relative; width:280px; height:330px; float:left;}
.pbox_r{width:280px; height:330px; float:right;}

.pop_bs_tit{font-size: 14px; line-height: 20px; padding-bottom:10px; }
.pop_bs{position: absolute; top:0; left:0; }
.pbox_l .pbox_s{height:300px;overflow:auto; border:1px solid #e3e3e3;}
.pbox_r .pbox_s{height:300px;overflow:auto; border:1px solid #e3e3e3;}

.pbox_s ul{width:240px; margin:0 auto; padding-top:11px;}
.pbox_s ul li{padding:7px 0;}
.pbox_s ul li p{display: inline; }
.pbox_s_txt{display: flex; align-items: center; justify-content: center; width:100%; height:300px; color:#a4a4a4;}
.pcheck_txt{color:#414141; margin-left: 7px; line-height: 22px;}

.pop_table{table-layout: fixed;  border-collapse: collapse;}
.pop_table thead {display:block;background: #fbfbfb;}
.pop_table tbody {display:block; overflow:auto; height:420px; width:100%;}
.pop_table thead th, tbody td{text-align: center;}

.pop_table thead th{height:39px; font-size: 12px; line-height: 16px; color:#a4a4a4; border-top:1px solid #f3f3f3; border-bottom:1px solid #f3f3f3; vertical-align: middle;}
.pop_table tbody td{height:49px; font-size: 14px; line-height: 20px; color:#414141; border-bottom:1px solid #f3f3f3; vertical-align: middle;}

.pop_table thead th:nth-child(n+2):nth-child(-n+3){text-align: left;padding-left:12px;}
.pop_table tbody td:nth-child(n+2):nth-child(-n+3){text-align: left;padding-left:10px;}

.pop_bt_input{display:block; clear:both; width:100%; padding-top: 20px;}
.group_add{width:100%; height:41px;overflow-y: auto; margin-top: 10px;}
.group{ float: left;  height:36px; line-height:20px; font-weight:500; text-align: middle; 
    padding:8px 16px; margin:5px 10px 5px 0; cursor: pointer;  border-radius: 18px;
     background:#f3f3f3; box-sizing: border-box;}

button.btn_close{width:22px; height:14px; background: url(../images/icn-close.png)8px 2px no-repeat;padding:0; ;}