@charset "UTF-8";
@import url('font.css');
@import url('default.css');


/*
=====================
1: Base Setting
2: Common Setting
	2-1: Basic
	2-2: Layout
3: Main
4: Contents
5: Popup
=====================
*/


/* 1: Base Setting
=========================================================================================== */
.hidden {display:none;}
.blind {visibility:hidden;}


.cursor {cursor:pointer;}
.non-cursor {cursor:default;}

.ta-r {text-align:right !important;}
.ta-l {text-align:left !important;}
.ta-c {text-align:center !important;}

.va-t {vertical-align:top !important;}
.va-m {vertical-align:middle !important;}
.va-b {vertical-align:bottom !important;}

.clearfix {}
.clearfix:after {content:""; clear:both; display:table; height: 0;}
.fl-l {float:left;}
.fl-r {float:right;}


.blind {display:none;}
.clear {clear:both; height:0;}


.c-black {color:#000 !important;}
.c-red {color:rgb(255, 0, 0) !important;}
.c-gray {color:#8f8d8d !important;}
.c-color {color:#E35B0A !important;}
.c-blue {color:#3CC8FF !important;}


.fz-b1 {font-size: 18px;}

.d-b {display: block;}
.d-ib {display: inline-block;}

.d-t {display: table;}
.d-tc {display: table-cell; vertical-align: middle;}


.pa-b1 {padding-bottom:120px;}
.pa-b2 {padding-bottom:100px;}

.ma-b1 {margin-bottom:120px;}
.ma-b2 {margin-bottom:100px;}


iframe[name='google_conversion_frame'] {border:0; width:0; height:0; padding:0; margin:0; position:absolute; z-index:-1; visibility:hidden;}

.t-dot-solo {overflow:hidden; white-space:nowrap; text-overflow: ellipsis;}


 /* 2: Common Setting
=========================================================================================== */

/* 2-1: Basic
=========================== */
html {width:100%; font-size:16px;}
body {width:100%; min-width:1240px; font-family:'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif; color:#5a5a5a; font-weight: 300; font-size:16px; line-height:1.2; -webkit-text-size-adjust: 100%; letter-spacing:-0.03em;}
.inr-c {}


/*간격*/
.pr-mb1 {margin-bottom: 40px !important;}


/*버튼*/
.btn-bot {margin-top:40px;}
.btn-bot.line {text-align: center; margin-top: 30px; padding-top: 30px; border-top: 1px solid #eee;}
.btn-bot .btn-pk {min-width:110px;}


.btn-pk {
	display:inline-block; *display:inline-block; *zoom:1; padding:8px 10px; 
	color:#fff; font-size:14px; text-align: center; font-weight: 500;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	border: 1px solid #E6E6E6;
	-webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px;
	transition:all .3s ease; -webkit-transition:all .3s ease; -moz-transition:all .3s ease; -o-transition:all .3s ease;
}
.btn-pk.bdrs {border-radius: 50px;}

.btn-pk.s {min-width:48px; padding:6px 10px; font-size:12px; line-height: 14px;}
.btn-pk.n {min-width:70px; padding:12px 20px; font-size:14px; line-height: 18px;}
.btn-pk.b {min-width:100px; padding:15px 20px; font-weight: 500; font-size:16px; border-radius: 16px;}


.btn-pk.blue {border-color: #008BF9; color: #fff; background-color: #008BF9;}
.btn-pk.gray {border-color: #E6E6E6; color: #787878; background-color: #F6F6F6;}
.btn-pk.gray2 {border-color: #E6E6E6; color: #787878; background-color: #E6E6E6;}
.btn-pk.color {border-color: #E35B0A; color: #fff; background-color: #E35B0A;}
.btn-pk.dkgray {border-color: #404040; background-color: #404040; box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.04);}
.btn-pk.white {border-color: #E6E6E6; color: #3C3C3C; background-color: #fff;}



/*탭*/
.tab {}
.tab ul {font-size: 0;}
.tab li {position: relative; display: inline-block; *display: inline; *zoom: 1; vertical-align: top; }
_::-moz-svg-foreign-content, :root .tab li {float: left;}


.tab.ty1 {}
.tab.ty1 ul {font-size: 0;}
.tab.ty1 li {position: relative; display: inline-block; vertical-align: top;}
.tab.ty1 li:after {content:""; z-index: 0; position: absolute; left: -15px; top: 0; width: 23px; height: 100px; background-image: url(../images/common/bg_tab_lft_off.png); background-repeat: no-repeat; background-position: 0 0;}
.tab.ty1 li:before {content:""; z-index: 1; position: absolute; right: -15px; top: 0; width: 23px; height: 100px; background-image: url(../images/common/bg_tab_rgh_off.png); background-repeat: no-repeat; background-position: right 0;}
.tab.ty1 li a {display: block; padding: 18px 40px; font-weight: 600; font-size: 15px; line-height: 16px; color: #787878; background-color: #F6F6F6; border-radius: 16px 16px 0 0; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08);}
.tab.ty1 li.on {z-index: 1;}
.tab.ty1 li.on:after {background-image: url(../images/common/bg_tab_lft_on.png); }
.tab.ty1 li.on:before {background-image: url(../images/common/bg_tab_rgh_on.png); }
.tab.ty1 li.on a {color: #282828;  background-color: #fff;}


.tab.ty2 {}
.tab.ty2 ul {font-size: 0;}
.tab.ty2 li {display: inline-block; vertical-align: top; margin-left: 12px;}
.tab.ty2 li a {position: relative; padding-left: 20px; font-weight: 600; font-size: 12px; color: #282828;}
.tab.ty2 li a:after {content:""; position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 16px; border: 1px solid #E6E6E6;}
.tab.ty2 li.on a:before {content:""; position: absolute; left: 4px; top: 4px; width: 8px; height: 8px; background-color: #E35B0A; border-radius: 8px;}

.tab.ty3 {font-size: 0;}
.tab.ty3 li {display: inline-block; vertical-align: middle;}
.tab.ty3 li a {display: block; font-weight: 500; font-size: 12px; color: #A0A0A0; padding: 10px 12px; border-radius: 12px;}
.tab.ty3 li a span {position: relative;}
.tab.ty3 li.on a{color: #282828; background-color: #F6F6F6; }

.tab.ty3 .i_dot {position: absolute; right: -7px; top: -2px; width: 4px; height: 4px; border-radius: 4px; background-color: #FDAC2F;}
.tab.ty3 .i_dot.red {background-color: #FF3030;}


.tab.ty4 {font-size: 0;}
.tab.ty4 li {display: inline-block; vertical-align: middle; text-align: center;}
.tab.ty4 li a {display: block; width: 56px; padding: 12px 12px; font-weight: 600; font-size: 12px; color: #505050; line-height: 1; border-radius: 12px; border: 1px solid #fff; }
.tab.ty4 li.on a {border-color: #f0f0f0; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.03);}



/*테이블*/
.scrollX {overflow-x:auto; width: auto; min-width:100%; }

.tbl_basic {
	width: auto; min-width:100%;
	padding: 4px; 
	border: 1px solid #E6E6E6;
	border-radius: 20px; background-color: #fff;
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.04);
	box-sizing:border-box;
}
.tbl_basic table {overflow:hidden; font-weight: 400; font-size: 13px; table-layout:fixed; border-radius: 18px 18px 0 0;}
.tbl_basic td {padding: 10px 10px; height: 45px; text-align: left; color: #787878;}
.tbl_basic th {padding: 8px 10px; height: 40px; font-weight: 500; text-align: center; color: #505050; background-color: #FAFAFA;}


/*그리드*/
.tbl_basic.grid {}
.tbl_basic.grid table {border-radius: 0;}



.ico-state {
	display: inline-block; vertical-align: top;
	background: #FFFFFF;
	border: 1px solid #F0F0F0;
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.03);
	border-radius: 8px;
	padding: 8px 10px; font-size: 12px; font-weight: 500; color: #282828;
}
.ico-state > span {position: relative; display: inline-block; padding-left: 12px;}
.ico-state > span:after {content:""; position: absolute; left: 0; top: 50%; margin-top: -3px; width: 6px; height: 6px; border-radius: 50%; background-color: #ddd;}
.ico-state > span.i_appr:after {background-color: #00CF53;}
.ico-state > span.i_normal:after {background-color: #00CF53;}
.ico-state > span.i_stand:after {background-color: #FFDC5A;}
.ico-state > span.i_end:after {background-color: #ff0000;}
.ico-state > span.i_finish:after {background-color: #4b4b4b;}



.i_emp {color: #FF0000; position: relative;}
.i_emp:after {content:""; position: absolute; left: 4px; top: 0; width: 4px; height: 4px; background-color: #ff0000; border-radius: 5px;}



.tbl_basic table.view .i_emp,
.tbl_basic table.write .i_emp {font-size: 0; vertical-align: top;}

.tbl_basic table.view {}
.tbl_basic table.view tr {border-top: 1px solid #E6E6E6;}
.tbl_basic table.view tr:first-child {border-top: 0;}
.tbl_basic table.view th {width: 115px; height: 30px; padding-left: 20px; text-align: left; font-weight: 600; color: #3C3C3C;}
.tbl_basic table.view td {padding: 0 8px; height: 30px; color: #3C3C3C;}
.tbl_basic table.view td .inp_txt {/*border-color: #fff;*/ font-weight: 600; color: #3C3C3C;}
.tbl_basic table.view td select.select1 {/*border-color: #fff;*/ font-weight: 600; color: #3C3C3C;}
.tbl_basic table.view td.text1 {height: 88px; vertical-align: top; padding-top: 12px; padding-bottom: 12px;}
.tbl_basic table.view td.text2 {height: 48px; vertical-align: top; padding-top: 12px; padding-bottom: 12px;}
.tbl_basic table.view td .inp_txt:focus {border-color: #008BF9;}


.tbl_basic table.write {border-radius: 18px 0 0 18px;}
.tbl_basic table.write tr {border-top: 1px solid #F0F0F0;}
.tbl_basic table.write tr:first-child {border-top: 0;}
.tbl_basic table.write th {width: 100px; padding-left: 20px; text-align: left; font-weight: 600; color: #3C3C3C;}
.tbl_basic table.write td {padding: 5px 8px; color: #3C3C3C;}


.tbl_basic .tit {padding-left: 20px; text-align: left; font-weight: 600; font-size: 14px; line-height: 48px; color: #3C3C3C; background-color: #FAFAFA; border-radius: 18px;}
.tbl_basic .textarea1 {height: 500px; padding: 20px; border: 0; border-radius: 18px; border: 0; box-sizing:border-box;}
.tbl_basic .textarea1.half {height: 200px;}
.tbl_basic .textarea1.half2 {height: 120px;}


.tbl_basic.w30p {width: 33%;}
.tbl_basic.w50p {width: 50%;}
.tbl_basic.w66p {width: 66%;}
.tbl_basic.w70p {width: 70%;}


.tbl_basic.w30p,
.tbl_basic.w50p,
.tbl_basic.w66p,
.tbl_basic.w70p {min-width:auto;}



.tbl_basic.bd th {border-left: 1px solid #E6E6E6;}
.tbl_basic.bd th:first-child {border-left: 0;}
.tbl_basic.bd td {border-left: 1px solid #E6E6E6;}
.tbl_basic.bd td:first-child {border-left: 0;}

.tbl_basic .filebox1 {border: 0; box-shadow:none; padding-right: 0; width: 100%;}
.tbl_basic .filebox1 .inp_txt:disabled {width: 100%;}

.tbl_basic .box_sch.w100p {box-sizing:border-box; border-radius: 8px; padding-right: 0;}
.tbl_basic .box_sch.w100p .inp_txt {width: calc(100% - 40px); height: 32px; line-height: 32px;}


.tbl_botm {margin-top: 10px; text-align: right; font-size: 0;}
.tbl_botm .btn-pk.b {padding-left: 30px; padding-right: 30px; margin-left: 8px;}


.inp_txt.wid1 {width: 180px;}

.inp_addr {display: flex; align-items:center;}
.inp_addr .btn-pk {width: 100px;}

.inp_tel {font-size: 0;}
.inp_tel .inp_txt {width: 110px; margin-left: 8px;}
.inp_tel .select1 {width: 110px;}

.inp_email {display: flex; align-items:center; font-size: 15px; font-weight: 500; color: #505050;}
.inp_email > span {margin: 0 10px;}




.tbl_write {margin-bottom: 10px;}
.tbl_write .col {display: flex; padding: 4px 0;}
.tbl_write .col .tit {min-width: 120px; font-weight: 600; font-size: 14px; line-height: 48px; color: #3c3c3c;}
.tbl_write .col .cont {width: 100%;}
.tbl_write .inp_txt {height: 48px; line-height: 48px; padding: 0 16px; border-radius: 16px; box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.04);}
.tbl_write .textarea1 {padding: 16px; height: 580px; border-radius: 16px; box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.04);}
.tbl_write .textarea1.half {height: 200px;}
.tbl_write .textarea1.half2 {height: 120px;}
.tbl_write .inp_txt.w100 {width: 100px;}
.tbl_write .select1 {padding-left: 16px; height: 48px; line-height: 48px; border-radius: 16px; box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.04);}
.tbl_write .select1.w440 {width: 450px;}




.fix_tbl {display: flex;}
.fix_tbl > div {border-left: 1px solid #E6E6E6;}
.fix_tbl > div:first-child {border-left: 0;}
.fix_tbl table {box-sizing:border-box; border-radius: 0;}
.fix_tbl th,
.fix_tbl td {padding: 5px;}
.fix_tbl td {height: 25px;}
.fix_tbl td:first-child {padding-left: 12px; width: 30px;}
.fix_tbl tr:nth-child(even) {background-color: #FCFCFC;}





.filebox1 {position: relative; display: inline-block; border-radius: 16px; box-shadow: 0px 0px 12px rgb(0 0 0 / 4%); border: 1px solid #E6E6E6;  background-color: #fff;}
.filebox1 > .box {position: relative; display: flex; align-items:center; padding-right: 14px; height: 48px; border-top: 1px solid #E6E6E6;}
.filebox1 > .box:first-child {border-top: 0;}
.filebox1 .inp_txt:disabled {background: none; border: 0; box-shadow:none; width: 350px;}
.filebox1 label.btn-pk.s {cursor:pointer; min-width:55px;}
.filebox1 input[type="file"] {
	position: absolute;
	width: 1px;	height: 1px;
	padding: 0;	margin: -1px;
	overflow: hidden;
	clip:rect(0,0,0,0);
	border: 0;
}
.filebox1 .btn_del {position: relative; margin-left: 8px; width: 20px; height: 20px; background-color: #F0F0F0; border-radius: 50%; font-size: 0; border: 0;}
.filebox1 .btn_del:after {content:"\2715"; position: absolute; left: 0; top: 0; width: 20px; text-align: center; font-weight: 600; line-height: 20px; font-size: 10px; color: #787878;}
.filebox1 .btn_add {position: absolute; right: -40px; bottom: 10px; width: 28px; height: 28px; border: 0; font-size: 0; border: 1px solid #eee; border-radius: 50%; background: #eee url(../images/common/ico_plus2.png) center center no-repeat;}

.t_info {font-size: 14px; font-weight: 400; margin-top: 12px; color: #8C8C8C;}


.box_updown {overflow:hidden; display: inline-block; vertical-align: middle; border: 1px solid #E6E6E6; border-radius: 50px; font-size: 0; padding: 0 3px;}
.box_updown button {float: left; border: 0; padding: 0; width: 20px; height: 26px; border-radius: 0; background-position: center center; background-repeat: no-repeat;}
.box_updown button:first-child {border-right: 1px solid #E6E6E6; background-image: url('../images/common/ico_up.png'); }
.box_updown button:last-child {background-image: url('../images/common/ico_down.png'); }


/*IR 기법 아이콘 세트*/
.i-aft{position: relative;display: inline-block;*display: inline;*zoom: 1;}
.i-aft:after{content:""; position: absolute; left: 0;top: 50%;display: inline-block;overflow: hidden;width: 0;height: 0;content: '';text-align: left;text-indent: -9999px;background-image: url('../images/common/ico_common.png');background-repeat: no-repeat;*display: inline;*zoom: 1;}
.i-set{display: inline-block;overflow: hidden;text-align: left; text-indent: -9999px;line-height: 0;background-image: url('../images/common/ico_common.png');background-repeat: no-repeat;*display: inline;*zoom: 1;}


.i-aft.i_add {padding-top: 48px; }
.i-aft.i_add:after {left: 50%; top: 0; margin-left: -18px; width: 36px; height: 36px; background-position: -10px -10px;}
.i-aft.i_mem {padding-left: 32px; }
.i-aft.i_mem:after {left: 0; margin-top: -12px; width: 24px; height: 24px; background-position: -97px -10px;}

.i-aft.i_t_add {padding-left: 16px; }
.i-aft.i_t_add:after {left: 0; margin-top: -6px; width: 12px; height: 12px; background-position: -10px -97px;}
.i-aft.i_t_del {padding-left: 16px; }
.i-aft.i_t_del:after {left: 0; margin-top: -6px; width: 12px; height: 12px; background-position: -31px -97px;}
.i-aft.i_t_sch {padding-left: 16px; }
.i-aft.i_t_sch:after {left: 0; margin-top: -6px; width: 12px; height: 12px; background-position: -52px -97px;}
.i-aft.i_t_modify {padding-left: 16px; }
.i-aft.i_t_modify:after {left: 0; margin-top: -6px; width: 12px; height: 12px; background-position: -74px -97px;}
.i-aft.i_t_agree {padding-left: 16px; }
.i-aft.i_t_agree:after {left: 0; margin-top: -6px; width: 12px; height: 12px; background-position: -97px -97px;}
.i-aft.i_t_excel {padding-left: 16px; }
.i-aft.i_t_excel:after {left: 0; margin-top: -6px; width: 12px; height: 12px; background-position: -119px -97px;}
.i-aft.i_t_save {padding-left: 16px; }
.i-aft.i_t_save:after {left: 0; margin-top: -6px; width: 12px; height: 12px; background-position: -181px -97px;}
.i-aft.i_t_hand {padding-left: 16px; }
.i-aft.i_t_hand:after {left: 0; margin-top: -6px; width: 12px; height: 12px; background-position: -139px -97px;}
.i-aft.i_t_voice {padding-left: 16px; }
.i-aft.i_t_voice:after {left: 0; margin-top: -6px; width: 12px; height: 12px; background-position: -160px -97px;}




.i-aft.i_chk {padding-left: 12px; }
.i-aft.i_chk:after {left: 0; margin-top: -3px; width: 8px; height: 6px; background-position: -195px -10px;}
.color .i-aft.i_chk:after {background-position: -195px -26px;}
.i-aft.i_close {padding-left: 12px; }
.i-aft.i_close:after {left: 0; margin-top: -4px; width: 8px; height: 8px; background-position: -213px -10px;}

.i-aft.i_tab1 {padding-left: 24px; }
.i-aft.i_tab1:after {left: 0; margin-top: -8px; width: 16px; height: 16px; background-position: -155px -41px;}
.i-aft.i_tab2 {padding-left: 24px; }
.i-aft.i_tab2:after {left: 0; margin-top: -9px; width: 18px; height: 18px; background-position: -181px -41px;}
.i-aft.i_tab3 {padding-left: 24px; }
.i-aft.i_tab3:after {left: 0; margin-top: -8px; width: 16px; height: 16px; background-position: -209px -41px;}

.on .i-aft.i_tab1:after {background-position: -155px -69px;}
.on .i-aft.i_tab2:after {background-position: -181px -69px;}
.on .i-aft.i_tab3:after {background-position: -209px -69px;}


.i-aft.i_max {padding-left: 12px; }
.i-aft.i_max:after {left: 0; margin-top: -4px; width: 8px; height: 8px; background-position: -347px -10px;}

.i-aft.i_day {padding-left: 26px; }
.i-aft.i_day:after {left: 0; margin-top: -11px; width: 18px; height: 20px; background-position: -263px -97px;}


.i-aft.i_map_bt1 {padding-top: 32px; }
.i-aft.i_map_bt1:after {left: 50%; top: 0; margin-left: -13px; width: 26px; height: 26px; background-position: -301px -10px;}
.i-aft.i_map_bt2 {padding-top: 32px; }
.i-aft.i_map_bt2:after {left: 50%; top: 0; margin-left: -13px; width: 26px; height: 26px; background-position: -301px -46px;}
.i-aft.i_map_bt3 {padding-top: 32px; }
.i-aft.i_map_bt3:after {left: 50%; top: 0; margin-left: -13px; width: 26px; height: 26px; background-position: -301px -82px;}

.i-aft.i_c {padding-left: 16px; font-weight: 700; font-size: 14px; color: #282828; margin-right: 10px;}
.i-aft.i_c:after {left: 0; margin-top: -11px; width: 9px; height: 21px; background-position: -52px -63px;}

.i-aft.i_dig1 {padding-top: 26px;}
.i-aft.i_dig1:after {top: 0; left: 50%; margin-left: -9px; width: 18px; height: 18px; background-position: -263px -10px;}
.i-aft.i_dig2 {padding-top: 26px;}
.i-aft.i_dig2:after {top: 0; left: 50%; margin-left: -9px; width: 18px; height: 18px; background-position: -263px -38px;}

.i-aft.i_location {padding-left: 20px;}
.i-aft.i_location:after {left: 0; margin-top: -7.5px; width: 15px; height: 14px; background-position: -366px -10px;}



.i-aft.i_cctv {padding-top: 45px;}
.i-aft.i_cctv:after {top: 0; left: 50%; margin-left: -20px; width: 40px; height: 40px; background-position: -10px -128px;}
.i-aft.i_crusher {padding-top: 45px;}
.i-aft.i_crusher:after {top: -2px; left: 50%; margin-left: -20px; width: 40px; height: 40px; background-position: -60px -128px;}
.i-aft.i_load {padding-top: 45px;}
.i-aft.i_load:after {top: 0; left: 50%; margin-left: -21px; width: 42px; height: 40px; background-position: -110px -128px;}
.i-aft.i_speed {padding-top: 45px;}
.i-aft.i_speed:after {top: -2px; left: 50%; margin-left: -20px; width: 40px; height: 42px; background-position: -162px -128px;}
.i-aft.i_area {padding-top: 45px;}
.i-aft.i_area:after {top: -2px; left: 50%; margin-left: -21px; width: 42px; height: 42px; background-position: -212px -128px;}
.i-aft.i_yard {padding-top: 45px;}
.i-aft.i_yard:after {top: 0; left: 50%; margin-left: -21px; width: 42px; height: 40px; background-position: -264px -128px;}
.i-aft.i_ap {padding-top: 45px;}
.i-aft.i_ap:after {top: 0; left: 50%; margin-left: -20px; width: 40px; height: 40px; background-position: -314px -128px;}
.i-aft.i_feeding_area {padding-top: 45px;}
.i-aft.i_feeding_area:after {top: -2px; left: 50%; margin-left: -21px; width: 42px; height: 42px; background-position: -364px -128px;}




.i-set.i_alram {width: 16px; height: 19px; background-position: -71px -10px;}
.i-set.i_close {width: 24px; height: 24px; background-position: -131px -10px;}
.i-set.i_sch {width: 12px; height: 12px; background-position: -97px -54px;}
.i-set.i_prev {width: 6px; height: 10px; background-position: -10px -63px;}
.i-set.i_next {width: 6px; height: 10px; background-position: -26px -63px;}
.i-set.i_location {width: 15px; height: 14px; background-position: -366px -10px;}

.i-set.i_cctv {width: 40px; height: 40px; background-position: -10px -128px;}
.i-set.i_crusher {width: 40px; height: 40px; background-position: -60px -128px;}
.i-set.i_speed {width: 40px; height: 42px; background-position: -162px -128px;}
.i-set.i_yard {width: 42px; height: 40px; background-position: -264px -128px;}


.ico_ {display: inline-block; vertical-align: middle; font-size: 0; line-height: 0;}


/* 2-2: Layout
=========================== */
#wrap {overflow-x:hidden; min-width:1920px; word-break:keep-all; word-wrap:break-word;}


#header {
	z-index:10; overflow:hidden; position: relative; background-color: #2F2F2F; 
	transition:all .3s; -webkit-transition:all .3s; -moz-transition:all .3s; -o-transition:all .3s; 
}
#header .inner {z-index: 1; position: relative; margin-left: 32px; margin-right: 32px;}

#header .logo {position: relative; z-index: 2; display: inline-block; float: left;}
#header .logo a {display: block; width: 180px; line-height: 50px; font-size: 0; background-image: url(../images/common/logo_top.png); background-position: 0 center; background-repeat: no-repeat;}

#header .gnbbox {float: right; margin-top: 5px; font-size: 0;}
#header .gnbbox .btn-pk.s {line-height: 18px; vertical-align: middle; margin-left: 10px;}


.btn_alram {position: relative; display: inline-block; vertical-align: middle; width: 40px; height: 40px; border-radius: 16px; text-align: center; background-color: rgba(217, 217, 217, .2);}
.btn_alram .count {position: absolute; padding: 4px 7px; left: -10px; top: -4px; border-radius: 8px; background-color: #ff0000; color: #fff; font-weight: 800; font-size: 12px;}

.btn_my {display: inline-block; vertical-align: middle; margin-left: 10px; padding: 9px 20px 9px 8px; border-radius: 16px; font-weight: 700; font-size: 14px; line-height: 22px; color: #fff; background-color: rgba(217, 217, 217, .2);}






/*footer*/
#footer {clear: both; z-index: 2; position: relative; padding:10px 24px 10px; font-size: 12px; line-height: 14px; background-color:#1A1A1A; color: #979797; border-top: 1px solid #1A1A1A;}
#footer strong {font-weight: 600;}
#footer p span {position: relative; display: inline-block; vertical-align: top; padding-left: 10px; margin-left: 10px;}
#footer p span:after {content:""; position: absolute; left: 0; top: 50%; margin-top: -.5px; width: 1px; height: 1px; background-color: #979797;}
#footer p span:first-child {padding-left: 0; margin-left: 0;}
#footer p span:first-child:after {content:none;}




/*container*/
#container {position: relative; min-height: calc(100vh - 125px); background-color: #fafafa; box-sizing: border-box;}
#container.sub.s_hide .sidebar {left: -230px;}
#container.sub.s_hide .sidebar_area {display: none;}
#container.sub.s_hide .contents {margin-left: 50px;}


.sidebar {
	overflow-y:auto; z-index: 101;
	position: absolute; left: 0; top: 0; padding: 6px 0 0; 
	width: 286px; height: 100%; background-color: #282828; box-sizing:border-box;
	transition:all .2s ease; -webkit-transition:all .2s ease; -moz-transition:all .2s ease; -o-transition:all .2s ease;
}
.sidebar:after {
	content:""; position: absolute; left: 0; top: 0;
	width: 100%; height: 44px;
	background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
	opacity: 0.3;
}
.sidebar .tit {z-index: 1; position: relative; padding: 9px 20px 9px 28px; font-weight: 600; font-size: 14px; color: #fff;}
.sidebar .tit span {position: relative; display: inline-block; padding-right: 20px;}
.sidebar .tit span:after {
	content:""; position: absolute; right: 0; top: 50%; margin-top: -3px; width: 12px; height: 6px; 
	background-image: url(../images/common/sidebar_arr.svg); background-repeat: no-repeat; background-position: right center;
	transition:all .3s ease; -webkit-transition:all .3s ease; -moz-transition:all .3s ease; -o-transition:all .3s ease;
}
.sidebar .tit.on span:after {transform:rotate(180deg);}

.btn_menu {z-index: 1; position: absolute; right: 20px; top: 16px; width: 36px; height: 36px; text-align: right;}
.btn_menu span {position: relative; font-size: 0; width: 16px; height: 2px; vertical-align: middle; background-color: #282828;}
.btn_menu span:after {content:""; position: absolute; left: 0; top: -3px; width: 100%; height: 2px; background-color: #787878;}
.btn_menu span:before {content:""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 2px; background-color: #787878;}

.sidebar_area {padding-top: 12px; padding-bottom: 12px; border-top: 8px solid #1C1C1C;}
.sidebar_area:nth-of-type(1) {border-top: 0;}
.sidebar_area .stit {padding: 8px 7px; margin-bottom: 4px; font-weight: 600; font-size: 14px; color: rgba(255,255,255,.8);}
.sidebar_area .stit > span {padding-left: 29px; background-repeat: no-repeat; background-position: 0 center;}
.sidebar_area .smenu {padding: 0 20px; margin-bottom: 12px;}
.sidebar_area .smenu li a {
	display: block; padding: 10px 12px; font-size: 15px; color: rgba(255,255,255,.6); 
	border-radius: 12px;
	background-repeat: no-repeat;
	background-position: right 15px center;	
	transition:all .3s ease; -webkit-transition:all .3s ease; -moz-transition:all .3s ease; -o-transition:all .3s ease;
}

.ico_m1 {background-image: url(../images/common/main_ico1.svg);}
.ico_m2 {background-image: url(../images/common/main_ico2.svg);}
.ico_m3 {background-image: url(../images/common/main_ico3.svg);}
.ico_m4 {background-image: url(../images/common/main_ico4.svg);}
.ico_m5 {background-image: url(../images/common/main_ico5.svg);}
.ico_m6 {background-image: url(../images/common/main_ico6.svg);}
.ico_m7 {background-image: url(../images/common/main_ico7.svg);}

.sidebar_area .smenu li:hover a,
.sidebar_area .smenu li.on a {
	background-color: rgba(99, 99, 99, .3); 
	background-image: url(../images/common/ico_dot.png);
	color: #fff;
}




.contents {margin-left: 286px; overflow-x:auto;}
/*
.contents .inr-c {padding: 24px 32px 27px;}
*/
.contents .inr-c {padding: 10px 10px 10px;}

.contents .inr-c:after {content:""; clear: both; display: block;}


.path {margin-bottom: 30px; font-size: 0;}
.path ul {display: inline-block; vertical-align: top;}
.path li {display: inline-block; vertical-align: top; margin-right: 8px;}
.path li a,
.path li p {display: block; padding: 0 16px; font-weight: 500; font-size: 12px; line-height: 32px; border-radius: 50px; border: 1px solid #F0F0F0;}
.path li a {background-color: #fff; color: #5A5A5A; padding-right: 30px; background-image: url(../images/common/ico_path.png); background-repeat: no-repeat; background-position: right 16px center;}
.path li p {background-color: #008BF9; color: #fff; border-color: #008BF9;}
.path .btn-pk.s {padding-left: 16px; padding-right: 16px; line-height: 18px;}




.h_tit1 {font-weight: 700; font-size: 20px; color: #3C3C3C;}
.h_tit2 {font-weight: 700; font-size: 16px; color: #3C3C3C;}


.hd_tit1 {margin-bottom: 10px; display: flex; align-items:center; font-weight: 600; font-size: 14px; color: #A0A0A0;}
.hd_tit1 .h_tit1 {margin-right: 10px;}

.js-b {    justify-content: space-between;}


/*알림*/
.rgh_notice {z-index: 100; position: fixed; right: 0; top: 72px; width: 100%; height: calc(100% - 125px); text-align: right; display: none;}
.rgh_notice .notice_dim {
	z-index: 0;
	position: absolute; right: 0; top: 0; width: 100%; height: 100%;
	background: rgba(0, 0, 0, 0.05);
	backdrop-filter: blur(2px);
}
.notice_in {
	z-index: 1; position: relative; right: -100%; display: inline-block; vertical-align: top;
	width: 448px; height: 100%; background-color: #fff;
	padding: 16px; box-sizing:border-box; overflow-y:auto;
	transition:all .3s ease; -webkit-transition:all .3s ease; -moz-transition:all .3s ease; -o-transition:all .3s ease;
}
.notice_in .b_box {
	background: #FFFFFF;
	border: 1px solid #F0F0F0;
	box-shadow: 1px 1px 16px rgba(0, 0, 0, 0.04);
	border-radius: 16px;
	padding: 12px 16px; margin-bottom: 12px;
	font-size: 13px; font-weight: 500; color: #C8C8C8; text-align: left;
}
.notice_in .b_box .h1 {margin-bottom: 8px; font-weight: 600; font-size: 14px; line-height: 24px; color: #505050;}
.notice_in .b_box .btn {text-align: right;}
.notice_in .b_box .btn p {float: left; line-height: 32px;}
.notice_in .b_box .btn-pk.s {line-height: 20px; margin-left: 5px;}
.notice_in .b_box .btn-pk.s.gray {border-color: #f0f0f0;}

.notice_in .b_box.off {background: #FAFAFA; border-color: #f0f0f0;}
.notice_in .b_box.off .h1 {color: #a0a0a0;}

.rgh_notice.active .notice_in {right: 0;}




/* 3: Main
=========================================================================================== */
.wrap_login {position: relative; display: flex; align-items:center; padding: 30px 0; min-height: calc(100vh - 185px); background-repeat: no-repeat; background-position: 5% center; background-size: auto 100%;}
.wrap_login .inner {width:420px; margin: 0 auto;}
.wrap_login .inner.w700 {width: 700px;}
.wrap_login .copy {padding-top: 8px; font-weight: 500; font-size: 12px; color: rgba(255, 255, 255, 0.4); text-align: center;}


.box_login {padding: 70px 40px 50px; background-color: #fff; border-radius: 24px; border: 1px solid #E6E6E6; box-shadow: 1px 1px 16px rgba(0, 0, 0, 0.04);}
.box_login .tit {margin-bottom: 60px; text-align: center; font-size: 14px; color: #3c3c3c; }
.box_login .tit .t1 {margin-top: 20px; font-weight: 700; font-size: 16px; color: #282828;}
.box_login .tit .t2 {margin-top: 10px;}
.box_login .col .inp_txt {height: 48px; padding: 0 16px; border: 1px solid #E6E6E6; background-color: #fff; border-radius: 12px;}
.box_login .col .inp_txt:focus {box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);}
.box_login .chk_tx {text-align: right; margin-top: 10px;}
.box_login .btn-bot {display: flex;}
.box_login .btn-bot .btn-pk {margin-left: 10px;}
.box_login .btn-bot .btn-pk:first-child {margin-left: 0;}


.box_login.join {padding: 0;}
.box_login.join .tit {margin-bottom: 10px; padding: 13px 24px; text-align: left; border-radius: 22px 22px 0 0; background-position: right center; /*background-image: url(../images/common/bg_join_tit.png);*/}
.box_login.join .tit .h {font-weight: 600; font-size: 14px; color: #3C3C3C; line-height: 24px;}
.box_login.join .area_member {padding: 12px;}

.box_login.join .inr {padding: 12px;}





.b_inp {position: relative;}
.b_inp .btn_del {position: absolute; right: 12px; top: 12px;}


.btn_del {width: 24px; height: 24px; font-size: 0; background-image: url(../images/common/ico_del.png); background-position: center center; background-repeat: no-repeat; border: 0;}

.a_links {font-size: 0; text-align: center; margin-top: 20px;}
.a_links a {
  display: inline-block;
  vertical-align: middle;
  padding: 0px 12px;
  font-weight: 600;
  font-size: 14px;
  line-height: .8;
  color: #787878;
  border-left: 1px solid #C8C8C8;
}
.a_links a:first-child {padding-left: 0; border-left: 0;}
.a_link {color: #787878; text-decoration: underline;}

.t_error {font-size: 13px; color: #FF0000;}
.t_error.ty1 {margin-top: 30px;margin-bottom: -20px; font-size: 14px; font-weight: 700; text-align: center;}


.inp_btn {display: flex;}
.inp_btn .btn-pk {padding-left: 0; padding-right: 0; min-width: 100px; margin-left: 8px; font-size: 12px;}
.inp_btn .btn-pk.fz {min-width:50px; font-size: 24px; padding-top: 0; padding-bottom: 0;}
.inp_btn .tx {line-height: 40px; font-size: 15px; margin-left: 8px; font-weight: 500;}

.t_link {display: inline-block; vertical-align: top; line-height: 20px; font-size: 13px; color: #000; border-bottom: 1px solid #000;}


.area_member {}
.area_member .col {margin-bottom: 16px;}
.area_member .h1 {margin-bottom: 10px; padding-left: 12px; font-weight: 600; font-size: 14px; color: #505050; background-image: url(../images/common/ico_dot.png); background-position: 0 center; background-repeat: no-repeat;}
.area_member .h2 {margin-bottom: 10px;}
.area_member .h2 .inp_checkbox {vertical-align: top;}
.area_member .h2 .t_link {margin-left: 10px; float: right;}

.box_comp {
	padding: 25px;
	background: #FFFFFF;
	border: 2px solid #F0F0F0;
	box-shadow: 1px 1px 16px rgba(0, 0, 0, 0.04);
	border-radius: 24px;
	font-size: 32px; font-weight: 700; color: #282828; text-align: center;
}


/*메인*/
#container.main {padding-left: 8.33%; padding-right: 8.33%; padding-top: 30px; padding-bottom: 30px;}

.lst_prd {display: flex; flex-wrap:wrap; width: 101%;}
.lst_prd > .col {width: 19%; height: 200px;  margin-right: 1%; margin-bottom: 1%; background: #F6F6F6; border-radius: 20px;}
.lst_prd > .col.prd_box {
	display: flex; align-items:center; justify-content: center;
	background: #FFFFFF;
	border: 1px solid #E6E6E6;
	box-shadow: 1px 1px 16px rgba(0, 0, 0, 0.04);
	border-radius: 20px;
	text-align: center; font-weight: 500; font-size: 16px; color: #787878;
	/*
	background-image: url(../images/sub/bg_main.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	*/
	box-sizing:border-box;
	transition:all .3s ease; -webkit-transition:all .3s ease; -moz-transition:all .3s ease; -o-transition:all .3s ease;
}
.lst_prd > .col.prd_box:hover,
.lst_prd > .col.prd_box.on {
	border-color: #E35B0A;
	outline:1px solid #E35B0A;
}
.prd_box .prd_tit {margin-bottom: 8px; font-weight: 600; font-size: 24px; color: #505050;}
.prd_box .prd_btn {margin-top: 15px; font-size: 0;}
.prd_box .prd_btn .btn-pk.s {min-width:60px; height: 36px; margin: 0 3px; vertical-align: top; line-height: 22px;}


.lst_prd .btn_register {width: 100%; height: 100%; background-color: #fff; border-radius: 20px; font-size: 16px; color: #A0A0A0;}



.inp_txt.calendar {
	background-image: url(../images/common/ico_calendar.svg);
	background-repeat: no-repeat;
	background-position: right 12px center;
}






/* 4: Contents
=========================================================================================== */
.d-flex {display: flex; align-items:center;}
.d-iflex {display: inline-flex; align-items:center;}


.tbl_sch {display: flex; justify-content: space-between; margin-bottom: 10px;}
.tbl_sch span.line {display: inline-block; vertical-align: top; margin: 10px 4px 10px 12px; height: 28px; border-left: 1px solid #E6E6E6;}
.tbl_sch .lft {}
.tbl_sch .lft .select1 {vertical-align: top;}
.tbl_sch .lft .box_t_sch {margin-bottom: 0;}
.tbl_sch .rgh {font-size: 0;}
.tbl_sch .rgh .btn-pk.n {margin-left: 8px; font-size: 13px; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.03);}

.box_t_sch {
	margin-bottom: 12px;
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.03);
	background: #FFFFFF;
	border: 1px solid #E6E6E6;
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.03);
	border-radius: 12px;
	display: inline-flex; align-items:center;
}
.box_t_sch .inp_txt {border: 0; padding-left: 10px; height: 42px; line-height: 42px;}
.box_t_sch .inp_txt:focus {outline:0;}
.box_t_sch .inp_txt.w1 {width: 150px;}
.box_t_sch .select1 {border: 0; padding-left: 10px; height: 42px; line-height: 42px; font-size: 14px; font-weight: 500; width: 150px;}
.box_t_sch .select1:focus {outline:0;}
.box_t_sch .h {display: inline-block; padding: 0 16px; border-right: 1px solid #E6E6E6; font-size: 12px; color: #505050; line-height: 1;}
.box_t_sch .bt {width: 42px; height: 42px;}
.box_t_sch .bt:focus {}
.box_t_sch:hover {outline:2px solid #000;}

.box_t_sch div.calendar {position: relative; padding-right: 20px; background-image: url(../images/common/ico_calendar.svg); background-repeat: no-repeat; background-position: right 12px center;}
.box_t_sch div.calendar:after {content:"~"; position: absolute; left: 110px; top: 50%; margin-top: -10px;}
.box_t_sch div.calendar .inp_txt {width: 120px; background: none;}


/*모니터링*/
.wrap_monitoring {position: relative; }
.wrap_monitoring:after {
	content:""; z-index: 1;
	position: absolute; left: 0; top: 0;
	width: 100%; height: 150px;
	background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}
.wrap_monitoring .area_tbl {position: relative; z-index: 2;}


.tab_day {position: absolute; right: 32px; top: -52px; padding: 18px 40px; font-weight: 600; font-size: 15px; line-height: 16px; color: #787878; background-color: #F6F6F6; border-radius: 16px 16px 0 0; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08);}
.tab_day:after {content:""; z-index: 0; position: absolute; left: -15px; top: 0; width: 23px; height: 100px; background-image: url(../images/common/bg_tab_lft_off.png); background-repeat: no-repeat; background-position: 0 0;}
.tab_day:before {content:""; z-index: 1; position: absolute; right: -15px; top: 0; width: 23px; height: 100px; background-image: url(../images/common/bg_tab_rgh_off.png); background-repeat: no-repeat; background-position: right 0;}



.load_map {float: left; position: relative; z-index: 2; width: 58%; margin-bottom: 12px;}
.load_map .load_mapin {overflow:hidden; position: relative; height: 378px; border-radius: 16px;}

/*
.load_map .load_mapin img {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
*/
.load_map .load_mapin.h500 {height: 500px !important;}

.load_map .btns {z-index: 2; position: absolute; right: 12px; top: 12px;}
.load_map .btns button {
	padding: 8px; 
	background: rgba(40, 40, 40, .4);
	border-radius: 8px;
	font-size: 12px; color: #fff; text-align: center; line-height: 1;
}
.load_map .btns button.on {background-color: #E35B0A;}

.load_map .ico {position: absolute; z-index: 1; transform:translate(-50%,-50%);}

.load_map .ico_tbl {position: absolute; z-index: 1; padding-bottom: 14px; transform:translate(-50%,-50%);}
.load_map .ico_tbl table {overflow:hidden; width: 250px; table-layout:fixed; background-color: #fff; border: 4px solid #fff; border-radius: 16px;}
.load_map .ico_tbl table:after {content:""; position: absolute; left: 50%; margin-left: -20px; bottom: 0; width: 40px; height: 15px; background-image: url(../images/common/bg_pop_arrow.png); background-position: center 0; background-repeat: no-repeat;}
.load_map .ico_tbl td {padding: 4px 4px 4px;}
.load_map .ico_tbl th {height: 25px; font-size: 12px; color: #505050; border-left: 1px solid #E6E6E6; background-color: #F0F0F0; border-radius: 8px;}
.load_map .ico_tbl th:first-child {border-radius: 8px 0 0 8px;}
.load_map .ico_tbl th:last-child {border-radius: 0 8px 8px 0;}
.load_map .ico_tbl th:first-child {border-left: 0;}
.load_map .ico_tbl .select1 {font-size: 14px; padding-left: 10px; height: 30px; line-height: 28px; border-radius: 8px;}


.load_map .i_map_num {
	position: absolute; left: 50%; top: -32px; 
	transform:translateX(-50%);
	background: #E35B0A;
	border: 2px solid #FFFFFF;
	border-radius: 8px; height: auto !important; padding: 5px 10px !important;
	font-size: 12px; color: #fff; font-weight: 600; line-height: 1.2;
	white-space:nowrap;
}

.load_map .ico_start,
.load_map .ico_end {position: absolute; z-index: 1;}

.load_map .ico_start {
  margin-top: -52px;
  margin-left: -34px;
  width: 68px;
  border-width: 2px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.5);
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
}
.load_map .ico_start > div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 10px 0px;
  background-color: #E35B0A;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.load_map .ico_start:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;
  margin-left: -9px;
  width: 18px;
  height: 11px;
  background-image: url(../images/sub/img_map_start2.png);
  background-repeat: no-repeat;
  background-position: center 0;
  -webkit-background-size: 16px;
  background-size: 16px;
}
.load_map .ico_start.small {
	width: 37px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
}
.load_map .ico_start.small:after {
	background-image: url(../images/sub/img_map_start3.png);
	-webkit-background-size: auto 8px;
	background-size: auto 8px;
}
.load_map .ico_start.small > div {
	height: 28px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-color: #505050;
}
.load_map .ico_start.small .ico_truck,
.load_map .ico_start.small .ico_dig,
.load_map .ico_start.small .ico_loader {transform:scale(.7);}
.load_map .ico_end {
  margin-top: 0px;
  margin-top: 0vw;
  margin-left: -68px;
  width: 68px;
  border-width: 2px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.5);
  -webkit-border-radius: 12px 0px 12px 12px;
  -moz-border-radius: 12px 0px 12px 12px;
  border-radius: 12px 0px 12px 12px;
}
.load_map .ico_end > div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 10px 0px;
  background-color: #E35B0A;
  -webkit-border-radius: 10px 0px 10px 10px;
  -moz-border-radius: 10px 0px 10px 10px;
  border-radius: 10px 0px 10px 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.load_map .ico_truck {
  font-size: 0;
  display: inline-block;
  width: 51px;
  height: 24px;
  background-image: url(../images/common/ico_map_dump.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center center;
}
.load_map .ico_loader {
  margin-left: -3px;
  font-size: 0;
  display: inline-block;
  width: 56px;
  height: 26px;
  background-image: url(../images/common/ico_map_loader.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center center;
}
.load_map .ico_dig {
  font-size: 0;
  display: inline-block;
  width: 62px;
  height: 24px;
  background-image: url(../images/common/ico_map_dig.svg);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center center;
}




.area_cctv {float: right; position: relative; z-index: 2; width: 41%; font-size: 0;  margin-bottom: 12px;}
.area_cctv .item {position: relative; margin-bottom: 4px; margin-top: 0 !important;}
.area_cctv .item > span {display: block; height: 100%; background-color: #D9D9D9; border-radius: 12px;}
.area_cctv .swiper-wrapper {
	display: flex;
	flex-wrap: wrap;
    flex-direction: column;
	transform: translate3d(0px,0,0);
}
.area_cctv .item.active:after {content:""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border:4px solid #E35B0A; border-radius: 12px; box-sizing:border-box;}




/*
.area_cctv .cc_size3 .swiper-slide {height: calc((100% - 16px) / 3) !important; }
.area_cctv .cc_size2 .swiper-slide {height: calc((100% - 8px) / 3) !important; }

.area_cctv .slider {overflow:hidden; height: 357px; }
*/

.area_cctv .slider > .item {display: inline-block; vertical-align: top; margin-bottom: .5%; margin-right: .5%;}
.area_cctv .slider > .item:after {
	content:""; position: absolute; left: 0; top: 0;
	width: 100%; height: 100%;
	border: 4px solid transparent;
	border-radius: 12px;
	box-sizing:border-box;
	transition:all .3s ease; -webkit-transition:all .3s ease; -moz-transition:all .3s ease; -o-transition:all .3s ease;
}
.area_cctv .page {
	height: 20px;
	background: #FFFFFF;
	border: 1px solid #E6E6E6;
	border-radius: 8px;
	display: flex; align-items:center; justify-content: center;
}
.area_cctv .swiper-pagination-bullet {margin: 0 2px;}
.area_cctv .swiper-pagination-bullet-active {background-color: #E35B0A;}

.area_cctv .slider > .item:hover:after,
.area_cctv .slider > .item.active:after {border-color: #E35B0A;}

.area_cctv .slider.cc_size3 > .item {width: 33%; }
.area_cctv .slider.cc_size3 > .item:nth-child(3n) {margin-right: 0;}

.area_cctv .slider.cc_size2 > .item {width: 49.5%; }
.area_cctv .slider.cc_size2 > .item > span {padding-bottom: 55.4%;}
.area_cctv .slider.cc_size2 > .item:nth-child(2n) {margin-right: 0;}

.btn_max {
	z-index: 1;
	position: absolute; right: 8px; bottom: 8px;
	background: #787878;
	box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.04);
	border-radius: 8px; padding: 6px 8px;
	font-size: 10px; color: #fff;
}


.area_tbl {float: left; box-sizing:border-box;}
.area_tbl.w1 {width: 37%; margin-right: 1%; clear: both;}
.area_tbl.w2 {width: 20%; margin-right: 1%;}
.area_tbl.w3 {width: 41%;}
.area_tbl.w4 {width: 43%; margin-right: 1%; padding: 0; clear: both;}
.area_tbl.w4 .scrollX {position: relative; padding: 0 16px 16px; height: 270px; overflow:hidden; box-sizing:border-box;}
.area_tbl.w4 .tit {padding-left: 14px;}
.area_tbl.w5 {width: 29%; margin-right: 1%;}
.area_tbl.w6 {width: 26%;}


.area_tbl {
	overflow:hidden;
	padding: 4px;
	border: 1px solid #E6E6E6;
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.04);
	border-radius: 16px;
	background-color: #fff;
}
.area_tbl .tit {
	padding: 16px 10px;
	<!--
	background-image: url(../images/sub/bg_tit_tbl.png);
	-->
	background-repeat: no-repeat;
	background-position: right center;
	background-size: auto 100%;
}

.inr-c .tit {
	padding: 16px 10px;
	<!--
	background-image: url(../images/sub/bg_tit_tbl.png);
	-->
	background-repeat: no-repeat;
	background-position: right center;
	background-size: auto 100%;
	position: relative;
}
.inr-c .h_tit2 {
	padding-left: 12px; background-image: url(../images/common/ico_dot.png);
	background-repeat: no-repeat;
	background-position: 0 center;
}

.area_tbl .h_tit2 {
	padding-left: 12px; background-image: url(../images/common/ico_dot.png);
	background-repeat: no-repeat;
	background-position: 0 center;
}
.area_tbl .tit .h_tit2 .line {display: inline-block; vertical-align: middle; line-height: .8; color: #A0A0A0; font-size: 14px; padding-left: 8px; margin-left: 8px; font-weight: 500; border-left: 1px solid #DCDCDC;}

.area_tbl .tbl_basic {border: 0; box-shadow:none; border-radius:0 ; padding: 0; background: none;}
.area_tbl .tbl_basic table {border-radius: 8px 8px 0 0;}
.area_tbl .tbl_basic thead th {background-color: #f6f6f6; height: 14px;}
.area_tbl .tbl_basic thead th:first-child {border-radius: 8px 0 0 8px;}

.area_tbl .tbl_basic .ui-jqgrid tr.jqgrow td {padding: 7px 10px;}



.tbl_basic.typ_d1 {}
.tbl_basic.typ_d1 tbody td {height: 57px; font-size: 14px;}
.tbl_basic.typ_d1 tbody tr:nth-child(even) {background-color: #FAFAFA;}
.tbl_basic.typ_d1 tbody tr:first-child td:last-child {border-left: 1px solid #F0F0F0; text-align: center; font-size: 16px; color: #505050;}
.tbl_basic.typ_d1 tbody td {padding-left: 15px;}


.tbl_basic.typ_d2 col.th1 {width: 80px;}
.tbl_basic.typ_d2 th {padding-top: 5px; padding-bottom: 5px; height: 30px;}
.tbl_basic.typ_d2 thead th {text-align: left; padding-left: 16px; height: 21px;}
.tbl_basic.typ_d2 tbody th {background: none;}
.tbl_basic.typ_d2 tbody td {padding-top: 5px; padding-bottom: 5px; height: 40px; text-align: center; border-left: 1px solid #F0F0F0;}
.tbl_basic.typ_d2 tbody tr:nth-child(2) td {background-color: #FAFAFA;}
.tbl_basic.typ_d2 tbody td:first-child {border-left: 0;}
.tbl_basic.typ_d2 .bdl {border-left: 1px solid #F0F0F0;}




/*장비리스트*/
.swiper-scrollbar {background: #fff;}
.swiper-scrollbar-drag {background: #E6E6E6;}

.lst_gear {
	font-size: 0; display: flex;
	height: 100%; 
}
.lst_gear > .col {width: 40%; height: 50%; margin-right: .5%;}
.lst_gear .col > a {
	position: relative;
	display: flex; align-items:center; padding: 10px 10px 7px;
	background: #fff;
	border: 1px solid #F0F0F0;
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.06);
	border-radius: 20px;
	font-size: 11px;
}
.lst_gear .col > a:after {
	content:""; position: absolute; left: 0; top: 0;
	width: 100%; height: 100%;
	border: 2px solid #fff;
	border-radius: 20px;
	box-sizing:border-box;
	transition:all .3s ease; -webkit-transition:all .3s ease; -moz-transition:all .3s ease; -o-transition:all .3s ease;
}
.lst_gear .col > a:hover:after {border-color: #FDAC2F;}
.lst_gear .col .imgs {margin-right: 10px;}
.lst_gear .col .imgs img {max-width:95px}
.lst_gear .col .txt {width: 100%;}
.lst_gear .h1 {
	display: flex; align-items:center; justify-content: space-between;
	color: #282828; font-weight: 700;
	background: #FFFFFF;
	border: 1px solid #F0F0F0;
	box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.04);
	border-radius: 12px;
	padding-left: 12px; margin-bottom: 10px;
}
.lst_gear .h1 .ico-state {border: 0; box-shadow:none;}
.lst_gear .t1 {padding: 0 3px;}
.lst_gear .t1 p {
	display: flex; align-items:center; justify-content: space-between;
	margin: 3px 0; font-weight: 500; color: #282828;
}
.lst_gear .t1 p span:first-child {color: #505050;}



.filebox_img {
	position:relative; width: 160px; height: 97px; background-color: #D9D9D9; border-radius: 8px;

	background-image: url(../images/sub/noimg_truck.png);
	background-position: center center;
	background-repeat: no-repeat;
}
.filebox_img > input[type="file"] {
	position: absolute;
	width: 1px;	height: 1px;
	padding: 0;	margin: -1px;
	overflow: hidden;
	clip:rect(0,0,0,0);
	border: 0;
}
.filebox_img label {
	position: absolute; left: 50%; top: 50%;
	transform:translate(-50%,-50%);
	padding: 7px 9px; font-size: 11px; color: #fff;
	background: rgba(40, 40, 40, 0.6);
	border-radius: 8px;
	cursor:pointer;
}
.filebox_img .btn_del {position: absolute; right: 4px; top: 4px; opacity:.8;}


.lst_info1 {font-size: 12px; color: #505050;}
.lst_info1 li {display: flex; align-items:center; justify-content: space-between; padding: 4px 0;}
.lst_info1 li strong {font-size: 13px; color: #282828;}




.box_arrow {
	display: inline-block; vertical-align: top; 
	background: #FFFFFF;
	border: 1px solid #F0F0F0;
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04);
	border-radius: 12px;
	font-size: 13px; font-weight: 600; line-height: 30px; color: #505050;
}
.box_arrow button {width: 30px; height: 30px;}



.box_graph {}
.box_graph.h150 {height: 150px;}
.box_graph.h200 {height: 197px;}
.box_graph.h300 {height: 300px;}
.box_graph.h85 {height: 85px;}


.box_oil {text-align: center; float: left;}
.box_oil img {width: 52px;}
.box_oil .bar {
	position: relative;
	background: #F0F0F0;
	border: 1px solid #E6E6E6;
	border-radius: 4px;
	padding: 2px; margin-top: 12px;
}
.box_oil .bar span {display: block; height: 8px; background-color: #E35B0A; border-radius: 2px;}


.box_oiltx {margin-left: 70px; font-weight: 700; font-size: 12px; color: #282828;}
.box_oiltx p {display: flex; align-items:center; justify-content: space-between; padding: 3px 0;}
.box_oiltx p strong {font-size: 16px;}


.fix_bind {font-size: 0;}
.fix_bind > div {display: inline-block; vertical-align: top; width: 50%;}


.fix_bind2 {display: flex;}
.fix_bind2 > div {width: 100%; margin-left: 20px; float: none;}
.fix_bind2 > div:first-child {margin-left: 0;}
.fix_bind2 .top_btn {margin-bottom: 5px;}
.fix_bind2 .top_btn .btn-pk.s {padding: 8px 10px;}


.line-bot {
	position: relative; left: -4px;
	width: calc(100% + 8px); height: 24px;
	background: rgb(240,240,240);
	background: linear-gradient(180deg, rgba(240,240,240,0) 0%, rgba(240,240,240,1) 100%);
}


.c-color2 {color: #F1AD84 !important;}

.wrap_monitoring.typ1 {}
.wrap_monitoring.typ1 .area_tbl {width: 49.5%; margin-top: 1%;}
.wrap_monitoring.typ1 .area_tbl.mr {margin-right: 1%;}
.wrap_monitoring.typ1 .area_tbl.mr5p {margin-right: 0.5%;}
.wrap_monitoring.typ1 .area_tbl .box_graph {padding: 5px 10px; height: 270px;}
.wrap_monitoring.typ1 .area_tbl .tit {background-color: #FAFAFA; border-radius: 12px;}

.wrap_monitoring.typ1 .area_tbl.w100p {width: 100%; margin-top: 0;} 


.graph_moni1 {padding-right: 200px; position: relative;}
.graph_moni1 .list {position: absolute; right: 10px; top: 55px; width: 180px; height: 220px; border-top: 1px solid #E6E6E6;}
.graph_moni1 .list p {padding: 12px 0; font-size: 12px; color: #505050; border-bottom: 1px solid #E6E6E6;}
.graph_moni1 .list p strong {display: block; margin-top: 31px; text-align: right; font-size: 24px;}

.graph_moni00 {display: block; margin-top: 0px; text-align: right; font-size: 16px;}

.graph_moni2 {display: flex;}
.graph_moni2 .box_graph {width: 70%;}
.graph_moni2 .box_graph.ty2 {width: 30%;}


.graph_moni3 {display: flex; padding: 10px;}
.graph_moni3 .box_graph {flex:1; box-sizing:border-box; width: 20%;}



/*라벨추가*/
.graph_moni3 {min-height: 270px;}
.graph_moni3 > div {flex:1;}

.wrap_monitoring.typ1 .area_tbl .box_graph.half {height: auto;}
.wrap_monitoring.typ1 .area_tbl .box_graph.half .box_graph_chart {height: 200px;}
.wrap_monitoring.typ1 .area_tbl .box_graph.half2 .box_graph_chart {width: 70%; height: 200px; margin: 0 auto;}


.chart-legend {
	font-size: 0; margin-top: 10px; padding: 8px; 
	background: #FFFFFF;
	border: 1px solid #F0F0F0;
	box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.06);
	border-radius: 12px;
	box-sizing:border-box;
}
.chart-legend li {display: inline-block; vertical-align: top; font-size: 11px; margin: 1px 3px;}
.chart-legend li span {display: inline-block; vertical-align: middle;}
.chart-legend li span:first-child {width: 8px; height: 8px; margin-right: 5px; border-radius: 10px;}






.graph_moni4 {text-align: center; padding: 35px 0 25px;}
.graph_moni4 .select1 {
	width: 160px; margin: 0 auto 30px;
	box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.06);
}
.graph_moni4 ul {padding: 0 30px 10px; overflow-x:auto; display: flex; flex-wrap:nowrap;}
.graph_moni4 li {min-width: 20%;}
.graph_moni4 p {margin-bottom: 15px; font-size: 16px; font-weight: 700; color: #282828;}
.graph_moni4 .bb {display: flex; align-items:center; justify-content: center; width: 112px; height: 112px; margin: 0 auto; font-weight: 700; color: #505050; font-size: 16px; background-color: #DCDCDC; border-radius: 50%;}
.graph_moni4 .bb.active {background-color: #FF3030; color: #fff; font-size: 24px;}




/*생산실적관리*/
.wrap_record {}
.wrap_record .area_tbl {margin-bottom: 15px;}
.wrap_record .area_tbl .tit {background-color: #FAFAFA; border-radius: 12px;}
.wrap_record .area_tbl .cont {padding: 10px;}
.wrap_record .area_tbl .box_graph {height: 300px;}
.wrap_record .rgh_tab {right: 15px;}
.wrap_record .left_tab {left: 15px;}




/*권한 그룹관리*/
.area_inpbox {
	overflow:hidden;
	background: #FFFFFF;
	border: 1px solid #F0F0F0;
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.04);
	border-radius: 16px;
}
.area_inpbox ul {display: flex; align-items:center; flex-wrap:wrap; margin-bottom: -1px;}
.area_inpbox li {width: 25%; padding: 20px 24px; border-bottom: 1px solid #F0F0F0; border-right: 1px solid #F0F0F0; box-sizing:border-box;}
.area_inpbox li:nth-child(4n) {border-right: 0;}
.area_inpbox .inp_checkbox input + span {font-weight: 500; color: #282828;}



/*입출차량관리*/
.bind_vehcies {display: flex; margin-bottom: 16px;}
.bind_vehcies .item {
	flex:1; margin-left: 12px;
	padding: 12px;
	background: #FFFFFF;
	border: 1px solid #F0F0F0;
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.04);
	border-radius: 16px;
	font-size: 0;
}
.bind_vehcies .item:first-child {margin-left: 0;}
.bind_vehcies .item .col {display: inline-block; vertical-align: top; width: 49%;}
.bind_vehcies .item .col:first-child {margin-right: 2%;}
.bind_vehcies .t1 {display: flex; align-items:center; justify-content: space-between; margin: 10px 0; font-size: 12px; color: #505050;}
.bind_vehcies .t1 .h {font-weight: 600; font-size: 14px;}
.bind_vehcies .t1 .d {opacity:.5;}
.bind_vehcies .btns {margin-top: 20px; display: flex; align-items:center; justify-content: space-between;}
.bind_vehcies .btns .btn-pk {margin-left: 5px;}

.bind_vehcies .thumb {
	position: relative; height: 0; padding-bottom: 66.3%; 
	border-radius: 8px; border: 1px solid #dcdcdc;
	background-repeat: no-repeat; background-position: center center; background-size: contain;
}

.inp_veh {
	display: flex; align-items:center;
	padding: 8px;
	background: #FFFFFF;
	border: 1px solid #F0F0F0;
	border-radius: 12px;
}
.inp_veh .inp_txt {border: 0; padding-right: 0; height: 30px; line-height: 30px; width: 120px; font-weight: 600; font-size: 16px; color: #3c3c3c;}
.inp_veh .btn-pk.s {border-radius: 8px; line-height: 18px;}









/******************************************************************************************/
.layerPopup {
	overflow:hidden;
	z-index: 102;
	position: fixed;
	left: 50%;
	top: 50%;
	width: 720px;
	-webkit-border-radius: 24px;
	-moz-border-radius: 24px;
	border-radius: 24px;
	transform: translate(-50%,-50%);
	background-color: #fff;
	box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.15);
	display: none;
}
.layerPopup .popup {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.p_head {
	z-index: 1;
	position: relative;
	padding: 13px 0 11px 24px;
	font-size: 12px; color: #A0A0A0; line-height: 1.5;
	background-color: #FAFAFA;
	border-bottom: 1px solid #E6E6E6;
	/*
	background-image: url(../images/common/bg_popup.png);
	background-position: right center;
	background-repeat: no-repeat;
	background-size: auto 100%;
	*/
}
.p_head .btn_close {
	position: absolute;
	right: 0;
	top: 0;
	width: 48px;
	height: 48px;
	border: 0;
	padding-right: 20px;
	text-align: center;
}
.p_head .btn_close span {
	display: inline-block;
	vertical-align: middle;
	width: 18px;
	height: 2px;
	font-size: 0;
}
.p_head .btn_close span:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #787878;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}
.p_head .btn_close span:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #787878;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.p_head .tit {
	font-weight: 600;
	font-size: 14px;
	color: #3C3C3C;
}
.p_head .tit .line {display: inline-block; color: #A0A0A0; font-size: 12px; line-height: 10px; padding-left: 8px; margin-left: 8px; border-left: 1px solid #DCDCDC;}
.p_botm {font-size: 0; padding: 16px; text-align: right;}
.p_botm .btn-pk {margin-left: 10px; vertical-align: top;}
.p_botm .btn-pk:first-child {margin-left: 0;}

.p_cont {padding: 16px 16px 0; font-size: 14px; max-height:calc(100vh - 150px); overflow-y:auto;}
.p_cont.scrollY {max-height:80vh; overflow-y:auto;}
.popup_dim {
	z-index: 101;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.15);
	backdrop-filter: blur(2px);
}

/*alert*/
.alertPopoup {
  z-index: 104;
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.alertPopoup .popup {
  background-color: #fff;
  width: 300px;
  padding: 16px;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  border-radius: 24px;
}
.alertPopoup .popup .txt {
  padding: 28px 0px;
  font-size: 14px;
  font-weight: 600;
  color: #282828;
}
.alertPopoup .popup .botm {display: flex;}
.alertPopoup .popup .botm .btn-pk {flex: 1; margin-left: 10px;}
.alertPopoup .popup .botm .btn-pk:first-child {margin-left: 0;}
.alert_dim {
	z-index: 103;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.15);
	backdrop-filter: blur(2px);
}



/*팝업 : 대시보드 현장CCTV*/
.pop_control {width: 90%;}
.pop_control .load_map {width: calc(100% - 260px);}
.pop_control .load_map.w100p {width: 100%;}
.pop_control .load_map .load_mapin {height: calc(100vh - 250px); min-height:480px;}

.pop_control .sch_tit1 {display: flex; align-items:center; justify-content: space-between; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #F0F0F0;}
.pop_control .sch_tit1 .box_t_sch {margin-bottom: 0;}

.pop_control .sch_tit2 {margin-bottom: 10px;}


.box_control_wrap {
	position: relative;
	float: right; width: 240px; height: calc(100vh - 250px); min-height:480px;
	background: #FFFFFF;
	border: 1px solid #F0F0F0;
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.04);
	border-radius: 16px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 0; overflow:hidden;
}

.box_control {
	position: absolute; left: 50%; top: 50%; margin-top: -20px;
	width: 238px; height: 260px; transform:translate(-50%,-50%);
	background-image: url(../images/sub/img_control_off.jpg);
	background-position: center 0;
}
.box_control button {transition:all 0s ease; -webkit-transition:all 0s ease; -moz-transition:all 0s ease; -o-transition:all 0s ease;}


.box_control .btn_c_left {position: absolute; top: 98px; left: 76px; width: 24px; height: 24px;}
.box_control .btn_c_top {position: absolute; top: 66px; left: 108px; width: 24px; height: 24px;}
.box_control .btn_c_right {position: absolute; top: 98px; left: 140px; width: 24px; height: 24px;}
.box_control .btn_c_bottom {position: absolute; top: 130px; left: 108px; width: 24px; height: 24px;}
.box_control .btn_c_center {position: absolute; top: 98px; left: 108px; width: 24px; height: 24px;}
.box_control .btn_c_expand {position: absolute; top: 190px; left: 56px; width: 60px; height: 60px;}
.box_control .btn_c_cut {position: absolute; top: 190px; left: 124px; width: 60px; height: 60px;}
.box_control .btn_c_play {position: absolute; top: 270px; left: 20px; width: 44px; height: 44px;}
.box_control .btn_c_pause {position: absolute; top: 270px; left: 72px; width: 44px; height: 44px;}
.box_control .btn_c_stop {position: absolute; top: 270px; left: 124px; width: 44px; height: 44px;}
.box_control .btn_c_camera {position: absolute; top: 270px; left: 176px; width: 44px; height: 44px;}


.box_control .btn_c_left:hover {background-image: url(../images/sub/img_control_on.jpg); background-position: -76px -98px;}
.box_control .btn_c_top:hover {background-image: url(../images/sub/img_control_on.jpg); background-position: -108px -66px;}
.box_control .btn_c_right:hover {background-image: url(../images/sub/img_control_on.jpg); background-position: -140px -98px;}
.box_control .btn_c_bottom:hover {background-image: url(../images/sub/img_control_on.jpg); background-position: -108px -130px;}
.box_control .btn_c_center:hover {background-image: url(../images/sub/img_control_on.jpg); background-position: -108px -98px;}
.box_control .btn_c_expand:hover {background-image: url(../images/sub/img_control_on.jpg); background-position: -56px -190px;}
.box_control .btn_c_cut:hover {background-image: url(../images/sub/img_control_on.jpg); background-position: -124px -190px; }
.box_control .btn_c_play:hover {background-image: url(../images/sub/img_control_on.jpg); background-position: -20px -270px;}
.box_control .btn_c_pause:hover {background-image: url(../images/sub/img_control_on.jpg); background-position: -72px -270px;}
.box_control .btn_c_stop:hover {background-image: url(../images/sub/img_control_on.jpg); background-position: -124px -270px;}
.box_control .btn_c_camera:hover {background-image: url(../images/sub/img_control_on.jpg); background-position: -176px -270px; }



/*팝업 : 장비상세*/
.pop_gear {width: 920px;}
.pop_gear .p_cont {padding-bottom: 10px; max-height:895px;}
.pop_gear .area_tbl {margin-bottom: 8px;}
.pop_gear .area_tbl .tit {background: none; padding: 12px 10px;}
.pop_gear .area_tbl .tit .h_tit2 {font-size: 14px;}
.pop_gear .area_tbl .cont {padding: 0 12px 10px;}
.pop_gear .lst_info1 {margin-left: 180px; padding-bottom: 20px;}
.pop_gear .filebox_img {float: left;}


.area_tbl.pw1 {width: 100%;}
.area_tbl .hty1 {height: 214px; text-align: center;}
.area_tbl .hty1 img {max-height:100%;}


.pop_gear .txt1 {display: table; width: 100%; height: 120px; padding: 5px 0; text-align: center; font-size: 12px; color: #A0A0A0;}
.pop_gear .txt1 > div {display: table-cell; vertical-align: middle;}
.pop_gear .txt1 .t1 {margin: 8px 0 4px; font-size: 16px; font-weight: 500; color: #505050;}

.lst_txt_gear1 {overflow-y:auto; height: 130px; font-size: 12px; color: #A0A0A0;}
.lst_txt_gear1 li {border-top: 1px solid #f9f9f9; padding: 10px 0;}
.lst_txt_gear1 li:first-child {border-top: 0; padding-top: 0;}
.lst_txt_gear1 .t1 {display: flex; align-items:center; justify-content: space-between; margin-bottom: 3px;}
.lst_txt_gear1 .t1 p {display: inline-flex; align-items:center;}
.lst_txt_gear1 .ico {display: inline-block; font-size: 0;}
.lst_txt_gear1 .ico img {height: 12px; margin-right: 5px;}
.lst_txt_gear1 .ico-state {padding-top: 4px; padding-bottom: 4px;}
.lst_txt_gear1 .t2 {font-size: 13px; font-weight: 500; color: #505050;}

.area_tbl .tit {position: relative;}

.rgh_tab {position: absolute; right: 10px; top: 16px;}
.rgh_tab .tab {margin-bottom: 10px;}

.tit_gear1 {margin-bottom: 6px; margin-top: 16px;}
.tit_gear1 p {display: inline-block; vertical-align: middle; margin-right: 10px; font-weight: 600; color: #282828; font-size: 12px;}
.tit_gear1 p span {margin-left: 12px;}


.pos_inp {position: absolute; right: 8px; top: 4px;}
.pos_inp.box_t_sch div.calendar {background-size: 12px auto;}
.pos_inp.box_t_sch div.calendar .inp_txt {padding-left: 10px; padding-right: 10px; width: 90px; min-width:auto; height: 28px; line-height: 28px; font-size: 12px; border-radius: 8px; background-size: 12px; background-position: right 10px center;}
.pos_inp.box_t_sch div.calendar:after {left: 85px; font-size: 13px;}

.fix_bind1 {display: flex;}
.fix_bind1 > div {flex:1; margin-left: 8px;}
.fix_bind1 > div:first-child {margin-left: 0;}



/*생산량등록*/
.pop_record {width: 470px;}
.pop_record .tbl_basic table.write th {width: 100px;}


.inp_time {
	display: flex; align-items:center;
	padding-right: 12px;
	background: #FFFFFF;
	border: 1px solid #E6E6E6;
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.03);
	border-radius: 12px;
	font-weight: 400; font-size: 14px; color: #505050;
}
.inp_time .inp_txt {border: 0;}
.inp_time .inp_txt:focus {outline:none;}
.inp_time span {white-space:nowrap; font-weight: 500; font-size: 15px; color: #505050;}
.inp_time:focus,
.inp_time:hover {border-color: #000; outline:1px solid #000;}



/*실사재고등록*/
.pop_stock {width: 470px;}
.pop_stock .tbl_basic table.write th {width: 100px;}




/*실사재고등록*/
.pop_digging {width: 1252px;}
.pop_digging .cont {position: relative; float: right; width: 400px; padding-top: 5px;}
.pop_digging .h_tit2 {
	margin-bottom: 15px;
	padding-left: 12px; background-image: url(../images/common/ico_dot.png);
	background-repeat: no-repeat;
	background-position: 0 center;
}
.pop_digging .load_map {width: 800px; height: 528px; margin-bottom: 20px;}
.pop_digging .load_map .load_mapin {height: 100%;}
.pop_digging .p_botm {position: absolute; right: 0; bottom: 0; width: 400px; padding: 16px 16px 20px 0; }
.pop_digging .p_botm > .btn-pk {vertical-align: bottom; margin-top: 45px;}
.pop_digging .btns {float: left; display: inline-block; vertical-align: bottom;}
.pop_digging .btns .btn-pk.n {padding-left: 12px; padding-right: 12px; padding-top: 15px;}

.pop_digging .textarea1 {padding: 10px; border: 1px solid #E6E6E6; height: 80px; min-height:auto;  border-radius: 12px;}



/*상태초기화*/
.pop_keepgear {width: 470px;}
.pop_keepgear .textarea1 {padding: 10px; border: 1px solid #E6E6E6; height: 100px; border-radius: 12px;}



.pop_keepgear .textarea1 {padding: 10px; border: 1px solid #E6E6E6; height: 100px; border-radius: 12px;}


/*사고등록*/
.pop_safe {width: 470px;}
.pop_safe .textarea1 {padding: 10px; border: 1px solid #E6E6E6; height: 100px; border-radius: 12px;}


/*등록*/
.pop_member {width: 470px;}
.pop_member .textarea1 {padding: 10px; border: 1px solid #E6E6E6; height: 100px; border-radius: 12px;}
.pop_member .inp_tel .select1 {width: 90px;}
.pop_member .inp_tel input.inp_txt {width: 88px;}




/**/
.pop_project {}
.pop_project .tit {margin-top: 20px;}
.pop_project .tit .h {font-weight: 700; font-size: 16px; color: #3C3C3C; margin-bottom: 8px;}
.pop_project .tit:first-child {margin-top: 0;}





/*주문접수관리-요청주문등록*/
.pop_order {width: 1100px;}
.pop_order .h_tit2 {
	margin-bottom: 10px;
	padding-left: 12px; background-image: url(../images/common/ico_dot.png);
	background-repeat: no-repeat;
	background-position: 0 center;
}
.pop_order .inp_btn .btn-pk {min-width: 70px;}
.pop_order .tbl_basic table.write th {width: 80px;}
.pop_order .inp_tel {display: flex;}
.pop_order .inp_tel .select1 {padding-left: 10px;}
.pop_order .inp_tel .inp_txt {min-width:auto; width: 100%; padding-left: 10px; padding-right: 10px;}


.pop_order.ty1 {width: 500px;}
.pop_order.ty1 .tbl_basic table.view th {width: 90px;}
.pop_order.ty1 .t_txt {padding: 10px 0; line-height: 1.5;}


.pop_order.ty2 {width: 800px;}



/*주문접수관리-전표증*/
.pop_statement {width: 916px;}
.pop_statement .tit_sch {float: left !important; width: 32% !important; box-sizing:border-box;}
.pop_statement .tbl_basic {border-color: #F0F0F0; border-radius: 16px;}
.pop_statement .tbl_basic table.write td {height: 55px;}
.pop_statement .tbl_basic table.write th {padding-left: 12px; width: 60px;}


@page {
	size: A4 landscape;
	margin: 0;
}
@media print {
	html, body {
		width: 210mm;
		height: 290mm;
		background: #fff;
		height: 99%;
		page-break-after: avoid;
		page-break-before: avoid;
	}
	body {-webkit-print-color-adjust: exact;}
	#printDiv {
		overflow:hidden;
		margin: 0;
		padding: 0;
		border: initial;
		border-radius: initial;
		width: initial;
		min-height: initial;
		box-shadow: initial;
		background: initial;
		page-break-after:avoid;
		page-break-after: always;
		background-color: #fff;
		box-sizing:border-box;
	}
	.print {overflow:hidden; padding: 10px;}
	.view_statement .txt_qr img {width: 60px;}
}


.view_statement {float: left; width: 32%; margin-left: 2%; box-sizing:border-box;}
.view_statement:first-child {margin-left: 0;}
.view_statement {
	background: #FFFFFF;
	border: 1px solid #F0F0F0;
	box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.04);
	border-radius: 16px;
	padding: 4px;
}
.view_statement .tbl_basic {margin-bottom: 0px; border: 0; padding: 0;}
.view_statement .tbl_basic table.view {position: relative; border-radius: 4px; overflow:hidden;}
.view_statement .tbl_basic table.view:after {
	content:""; position: absolute; left: 0; top: 0; width: 85px; height: 100%; background-color: #f6f6f6; border-radius: 4px 0 0 4px; border-right: 4px solid #fff;
	background-image: url(../images/sub/bg_pop_th.png); background-position: center bottom; background-repeat: no-repeat; background-size: 100% auto;
}
.view_statement .tbl_basic table.view tr {border: 0;}
.view_statement .tbl_basic table.view th {position: relative; z-index: 1; background-color:transparent; width: 65px; padding-left: 10px;}
.view_statement .tbl_basic table.view td {padding-left: 14px;}
.view_statement .tbl_basic tbody tr:nth-child(even) {background-color: #F6F6F6;}
.view_statement .tit {position: relative; margin-bottom: 6px; text-align: center; background-color: #F6F6F6; background-image: url(../images/common/bg_table_thead.png); background-repeat: no-repeat; background-position: right center; border-radius: 12px;}
.view_statement .tit .h {font-weight: 700; font-size: 18px; line-height: 40px; color: #282828;}
.view_statement .tit .btn_qr {font-size: 0; position: absolute; top: 10px; right: 14px; width: 20px; height: 20px; background-image: url(../images/sub/ico_qr.svg); background-repeat: no-repeat; background-size: cover; border-radius: 0;}
.view_statement .txt {padding: 20px; font-weight: 500; font-size: 13px; color: #282828; text-align: center;}
.view_statement .txt .t1 {margin-bottom: 10px; font-weight: 600; font-size: 18px;}
.view_statement .txt .t_sign {position: relative; display: inline-block;}
.view_statement .txt .t_sign img {position: absolute; left:95%; top: -5px; max-width:60px;}
.view_statement .botm {
	padding: 12px; text-align: center; background: #FAFAFA;
	border-top: 1px solid #E6E6E6;
	border-bottom: 1px solid #E6E6E6;
}
.view_statement .botm p {font-size: 12px; margin-bottom: 3px; color: #787878; font-weight: 500;}
.view_statement .botm img {margin-top: 10px; height: 13px;}

.view_statement .txt_qr {padding: 9px; text-align: center;}
.view_statement .txt_qr img {width: 60px;}


.load_state {
	margin-left: 34%;
	padding: 32px 20px 20px; margin-bottom: 12px;
	background: #FFFFFF;
	border: 1px solid #F0F0F0;
	box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.04);
	border-radius: 16px;
}
.load_state ul {
  display: flex;
  justify-content: space-between;
}
.load_state li {
  position: relative;
  flex: 1;
  text-align: center;
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
  color: #777;
}
.load_state li:after {
  content: "";
  position: absolute;
  left: -50%;
  top: 12px;
  width: 100%;
  height: 6px;
  background-color: #f4bd9d;
}
.load_state li:first-child:after {
  -webkit-border-radius: 10px 0px 0px 10px;
  -moz-border-radius: 10px 0px 0px 10px;
  border-radius: 10px 0px 0px 10px;
  width: 50%;
  left: 0;
}
.load_state li:last-child:after {
  -webkit-border-radius: 0px 10px 10px 0px;
  -moz-border-radius: 0px 10px 10px 0px;
  border-radius: 0px 10px 10px 0px;
  width: 100%;
}
.load_state li .ico {
  position: relative;
  display: block;
  margin-bottom: 5px;
  height: 36px;
}
.load_state li .ico:after {
  content: "";
  z-index: 2;
  position: absolute;
  left: 50%;
  top: 8px;
  margin-left: -8px;
  width: 8px;
  height: 8px;
  border-width: 4px;
  border-style: solid;
  border-color: #f4bd9d;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  background-color: #fff;
}
.load_state li .t {
	display: block; margin-bottom: 3px;
}
.load_state li .t2 {
	display: inline-block; vertical-align: top;
	padding: 2px 8px; font-size: 12px; color: #787878;
	background: #F0F0F0;
	border-radius: 8px;
}
.load_state li:first-child:after {content:none;}
.load_state li.on:after {
  background-color: #E35B0A;
}
.load_state li.on .ico:after {
  border-color: #E35B0A;
  top: 4px;
  margin-left: -10px;
  width: 16px;
  height: 16px;
  background-image: url(../images/sub/ico_arr_color.svg);
  -webkit-background-size: 8px;
  background-size: 8px;
  background-position: center center;
  background-repeat: no-repeat;
}
.load_state li.on .t {
  font-weight: 600;
  font-size: 14px;
  color: #282828;
}
.load_state li.current .ico:after {
  margin-left: -30px;
  top: -10px;
  width: 60px;
  height: 48px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  background: none;
  border: 0;
  background-image: url(../images/common/img_dump.svg);
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: auto 46px;
  background-size: auto 46px;
}
.load_state.loader li.current .ico:after {
  background-image: url(../images/common/img_loader.svg);
}
.load_state.dig li.current .ico:after {
  background-image: url(../images/common/img_dig.svg);
}












/******************************************************************************************/
@media (max-width:1280px){
	.contents {margin-left: 200px;}
	.sidebar {width: 200px; padding-left: 0; padding-right: 0;}
	#container.sub.s_hide .sidebar {left: -145px;}
}




/*backdrop-filter not support*/
@supports (backdrop-filter: none) {
	
}


/**/
@supports (-ms-ime-align:auto) {
	html {overflow: hidden;	height: 100%; }
	body {overflow: auto;	height: 100%;	position: relative;	}
}
 
/*Ie 10/11*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	html {overflow: hidden;	height: 100%; }
	body{overflow: auto; height: 100%; position: relative;}
}






.flex_chart {display: flex;}
.flex_chart > * {flex:1; margin-left: 10px;}
.flex_chart >:first-child {margin-left: 0;}
.flex_chart canvas {width: 100%;}



/*2023.10.13 추가*/
/*2023.10.13 추가*/
.mySwiper2 .swiper-scrollbar {/*height: 5px; bottom: -5px;*/ background-color: rgba(0,0,0,.1);}
.mySwiper2 .swiper-scrollbar-drag {background-color: #282828;}

.area_cctv .tit {
   z-index: 1;
   position: absolute; left: 8px; top: 8px;
   background: #E35B0A;
   box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.04);
   border-radius: 8px; padding: 6px 8px;
   font-size: 11px; color: #fff; opacity:.8;
}

.area_cctv .swiper-wrapper {flex-direction: inherit;}
.area_cctv .cc_size2 .swiper-slide {height: auto;}

.select3 {
	appearance:none;
	-moz-appearance:none;
	-webkit-appearance:none;
	font-family:'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
	vertical-align:middle; line-height:normal;
	font-size: 14px;
    font-weight: 500;
	color: #505050 !important;;
	border: 1px solid #E6E6E6; background-color: #fff;
	 -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px;
	-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
}

.select3_none {
	appearance:none;
	-moz-appearance:none;
	-webkit-appearance:none;
	font-family:'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
	vertical-align:middle; line-height:normal;
	font-size: 14px;
    font-weight: 500;
	color: #505050 !important;;
}