@charset "utf-8";


@import url(common.css);
@import url(layout.css);
@import url(font.css);




/* 햄버거버튼 모달 */
#lean_overlay { position:absolute; z-index:100; top: 0px; left: 0px; height:100%; width:100%; background:rgba(0,0,0,0); display: none;}
#loginmodal { width: 100%; /*팝업창의 크기조절*/
  margin-top:0;           /*팝업창 위아래 간격조절*/
  padding: 0 0 100px 0;
  background:#fff;
  /*-webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);*/
}

/* 로그인 */
.login-wrap { position: absolute; right: 0; top: 0; padding: 0 40px; width: 408px; height: 100%; box-sizing: border-box; z-index: 10; background: #fff;}
.login-h1 { text-align: center; padding-top: 100px;}
.login-h1 h1 img { width: 168px;}
.login-h1-txt { color: #999; font-size: 12px; letter-spacing:0.3px; margin-top: 8px; margin-bottom: 30px; font-weight: 300;}
a.login-pw-txt { color: #bfbfbf; text-decoration: underline; font-weight: 400;}
.login-btn { background:#0095d5; text-align:center; height:48px; line-height:48px; display:inline-block; color:#fff; border-radius:4px; font-size: 16px; font-weight: 400; box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);}
.login-btn a { color:#fff; display:block;}
.login-txt-conts { position: absolute; bottom: 70px; text-align: center;}
.login-manual { color: #0095d5; text-decoration: underline; margin-top: 5px;}
.login-manual-no { clear: both; text-align: left; margin-top: 30px;}
.login-manual-no dl { clear: both; margin: 7px 0; }
.login-manual-no dl dt { width: 24px; height: 24px; line-height: 24px; border-radius: 100%; display: inline-block; background: #bfbfbf; color: #fff; text-align: center; font-weight: 700;}
.login-manual-no dl dd { display: inline-block;}
.login-background { position: fixed; background: url(../img/main_s2_bg.png) center no-repeat; background-size: cover; width: 100%; height: 100%; z-index: 0;}

/*  팝업 */
#popup-conts { background: #fff;	width:90%; position: absolute; left: 50%; top: 50%;	transform: translate(-50%, -50%); z-index: 100;	overflow: hidden; box-sizing: border-box; border-radius:8px;}
.popup-conts-box { padding: 40px 40px; position: relative;}
.popup-conts-title { font-size: 20px; color: #333; text-align: center; font-weight: 700;}
.popup-conts-close { position: absolute; right: 34px; top: 40px;}
.popup-conts-close img { width: 34px;}
.popup-conts-txt { font-size: 12px; color: #999; margin-top: 19px; letter-spacing: -0.5px;}
.popup-conts-input { margin-top: 24px;}
.popup-conts-input .input_A { margin-top: 8px;}
.dim{position: fixed;top:0;left: 0;width: 100%;height: 100%;background-color: rgba(34,34,34,0.2); z-index:10;}
.popup-conts-square { border-radius: 0 !important;}

/* 그래프 */
.noline { border-top: none !important;}
.graph-conts { margin: 0 0 0 0;}
.graph-info { clear: both; border-top: 1px solid #efefef;}
.graph-info ul { display:flex;align-items: stretch;justify-content:flex-start; flex-wrap: wrap;}
.graph-info ul li { width:25%; color: #222; font-weight: 500; text-align: left; padding-left: 40px; box-sizing: border-box; margin-top: 5px;}

.graph-ok-txt { position: relative; padding-left: 20px;}
.graph-ok-txt::before { content: ''; position: absolute; left: 0; top: 3px; width: 13px; height: 13px; border-radius: 100%; background:#0095d5;}
.graph-ok-round { color: #0095d5; margin-left: 5px;}

.graph-care-txt{ position: relative; padding-left: 20px;}
.graph-care-txt::before { content: ''; position: absolute; left: 0; top: 3px; width: 13px; height: 13px; border-radius: 100%; background:#ffb400;}
.graph-care-round { color: #ffb400; margin-left: 5px;}

.graph-off-txt { position: relative; padding-left: 20px;}
.graph-off-txt::before { content: ''; position: absolute; left: 0; top: 3px; width: 13px; height: 13px; border-radius: 100%; background:#999;}
.graph-off-round { color: #999; margin-left: 5px;}

.graph-warning-txt { position: relative; padding-left: 20px;}
.graph-warning-txt::before { content: ''; position: absolute; left: 0; top: 3px; width: 13px; height: 13px; border-radius: 100%; background:#ff4848;}
.graph-warning-round { color: #ff4848; margin-left: 5px;}


.chart-position { position: relative; width: 115px;}
.chart-center {  display: flex; justify-content: center; align-items:center;}
.chart-position-no { position: absolute; font-size: 24px; font-weight: 700; color: #666;}

/* 공장 */
.factory-box-conts { margin: 15px 0 0 0;}
.factory-conts { position: relative; clear: both;}
.factory-conts-no { position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%); width: 64px; height: 64px; background: #efefef; border-radius: 100%; font-size: 32px; font-weight: 700; color: #666; display: flex; justify-content: center; align-items:center; line-height: 100%;}

.factory-conts-info { float: left; padding-left: 85px; margin-top: 5px; min-height: 64px;}
.factory-conts-info ul { display:flex;align-items: stretch;justify-content:flex-start; flex-wrap: wrap;}
.factory-conts-info ul li { width:25%; color: #222; font-weight: 500; text-align: left; box-sizing: border-box; padding-left: 40px; margin-top: 5px; font-size: 14px;}

.factory-ok-txt { position: relative; padding-left: 20px;}
.factory-ok-txt::before { content: ''; position: absolute; left: 0; top: 3px; width: 13px; height: 13px; border-radius: 100%; border:2px solid #0095d5; box-sizing: border-box;}
.factory-ok-round { color: #0095d5; margin-left: 5px;}

.factory-care-txt{ position: relative; padding-left: 20px;}
.factory-care-txt::before { content: ''; position: absolute; left: 0; top: 3px; width: 13px; height: 13px; border-radius: 100%; border:2px solid #ffb400; box-sizing: border-box;}
.factory-care-round { color: #ffb400; margin-left: 5px;}

.factory-off-txt { position: relative; padding-left: 20px;}
.factory-off-txt::before { content: ''; position: absolute; left: 0; top: 3px; width: 13px; height: 13px; border-radius: 100%; border:2px solid #999; box-sizing: border-box;}
.factory-off-round { color: #999; margin-left: 5px;}

.factory-warning-txt { position: relative; padding-left: 20px;}
.factory-warning-txt::before { content: ''; position: absolute; left: 0; top: 3px; width: 13px; height: 13px; border-radius: 100%; border:2px solid #ff4848; box-sizing: border-box;}
.factory-warning-round { color: #ff4848; margin-left: 5px;}

.factory-view { clear: both; position: relative; padding-right: 80px;}
.view-btn { border:1px solid #d8d8d8; border-radius: 4px; height: 24px; line-height: 24px; font-size: 12px; display: inline-block;  letter-spacing: -1px; background: #fff; margin-left:10px; vertical-align: middle;}
.view-btn a { display: block; padding: 0 10px;}

/* 조직별 모니터링 */
.dashboard-list { clear: both;}
.dashboard-list ul { margin-top: 32px; border-top: 1px solid #e0e0e0;}
.dashboard-list ul li { position: relative; width: 100%; display: inline-block; padding: 15px 35px 13px 15px; border-bottom: 1px solid #e0e0e0; box-sizing: border-box;}
.dashboard-list ul li.on { background:#efefef;}
.dashboard-list ul li .checkSave { background:#d8d8d8;}
.dashboard-a { position: absolute; right: 10px; top: 50%; margin-top: -10px;}

.dashboard-zoom { clear: both; margin-top: 48px; text-align: center;}
.dashboard-zoomm { position: relative; width: 24px; height: 24px; display: inline-block; border: 1px solid #bfbfbf; border-radius: 4px; }
.dashboard-zoomm:after { content: ''; position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);  width: 12px; height: 2px; background: #bfbfbf;}
.dashboard-zoom-oval { font-size: 16px; color: #222; font-weight: 600; vertical-align: top; margin-right: 10px;}
.dashboard-zoom-oval img { width: 24px; margin: 0 15px; vertical-align: top;}
.dashboard-zoomp { position: relative; width: 24px; height: 24px; display: inline-block; border: 1px solid #bfbfbf; border-radius: 4px; font-size: 20px;}
.dashboard-zoomp:before { content: ''; position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);  width: 2px; height: 12px; background: #bfbfbf;}
.dashboard-zoomp:after { content: ''; position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);  width: 12px; height: 2px; background: #bfbfbf;}


.dashboard-screen { clear: both; width:100%; overflow-x: scroll; margin-top: 5px;}
.dashboard-screen-x { width: 768px;  }


/* 조직별 모니터링 view */
.dashboard-view { clear: both;}
.dashboard-view ul { margin-top: 32px; border-top: 1px solid #e0e0e0;}
.dashboard-view ul li { position: relative; width: 100%; display: inline-block; padding: 15px 15px 13px 15px; border-bottom: 1px solid #e0e0e0; box-sizing: border-box;}
.dashboard-view ul li.on { background:#efefef;}
.dashboard-left img { transform: rotate(-180deg); margin-bottom:4px; }

.status-posi { position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%); margin-top: 0 !important; }
.oval-conts { position: relative;}
.ok-oval { position: absolute; right:0px; top:50%; margin-top: -6px; width: 13px; height: 13px; border-radius: 100%; background: #0095d5;} /* 정상 */
.care-oval { position: absolute; right:0px; top:50%; margin-top: -6px; width: 13px; height: 13px; border-radius: 100%; background: #ffb400;} /* 주의 */
.off-oval { position: absolute; right:0px; top:50%; margin-top: -6px; width: 13px; height: 13px; border-radius: 100%; background: #999;} /* off */
.warning-oval { position: absolute; right:0px; top:50%; margin-top: -6px; width: 13px; height: 13px; border-radius: 100%; background: #ff4848;} /* 경고 */

.oval-txt { padding-right:30px;}

table.dashboard-board {width:100%;}
table.dashboard-board thead th { color:#191919; padding:15px 15px 13px 5px; font-weight:500; word-break: break-all; }
table.dashboard-board tbody th { padding:15px 15px 13px 5px; color:#999; font-weight:300; line-height:170%; border-bottom: 1px solid #e0e0e0;}
table.dashboard-board tbody td { padding:15px 15px 13px 5px; color:#666; line-height:140%; height:28px; border-bottom: 1px solid #e0e0e0;}
table.dashboard-board .blue-on { background:#f4fcff;}
.bordernoline { border-bottom: none !important;}


/* 달력 */
.cal_normal { position:relative;}
.cal_normal button { position:absolute; top:3px; right:15px; background:url(../img/calendar-ic.png) left center no-repeat; width:20px; height:auto; min-height:35px; text-indent:-9999px; vertical-align:middle;}
.cal_normal input { height: 48px; border-radius: 4px; border:1px solid #e0e0e0;}
.cal_prev button { background:url(../img/btn_calendar.png) left center no-repeat; width:20px; height:35px; text-indent:-9999;}
.cal_next button { background:url(../img/btn_calendar2.png) left center no-repeat; width:20px; height:35px; text-indent:-9999;}

.tab-btn { margin-top: 10px;}
.tab-btn button { background: none;}
.tab-btn li { border:1px solid #d8e0ed; height:48px; color:#666; background:#f0f2f5;  border-radius:4px; margin-bottom:9px;display: flex; justify-content: center; align-items:center; box-sizing: border-box;}
.tab-btn li.tab-btn-on { background:#e8f8ff; color:#fff; border:1px solid #0095d5;border-radius:4px; box-sizing: border-box;}
.tab-btn li.tab-btn-on button { color: #0095d5;}

.select-2col { clear: both; position: relative;}
.select-2col-sel { padding-right: 90px;}
.select-2col-sel select { height: 48px;}
.select-2col-btn { position: absolute; right: 0; top: 0; width: 80px; }

.list-x { margin-left: 15px;font-size: 14px; color: #999;}
.list-x li { margin: 3px 0; }
.list-x li button { margin-left: 10px; background: none;}

/*  현재위치 */
.current { clear: both; margin: 25px 24px;}
.current:after{content:"."; display:block; height:0; clear:both; visibility:hidden;}
.current ul li { float: left; position: relative; padding: 0 10px 0 5px; font-size: 16px; color: #333;}
.current ul li span { color: #0095d5;}
.current ul li:last-child:after { content: '';}
.current ul li:after { content: '>'; position: absolute; right: 0px; top: 0;}

/* 공장 rolling 페이징 */
.section input[id*="slide"] {display:none;}
.section .slidewrap {max-width:1200px;margin:0 auto;}
.section .slidelist {white-space:nowrap;font-size:0;overflow:hidden;position:relative;}
.section .slidelist .slideitem {display:inline-block;vertical-align:middle;width:100%;transition:all .5s;}
.section .slidelist .slideitem > a {display:block;position:relative;}
.section .slidelist .slideitem > a img {width:100%;}
.section .slidelist label {position:absolute;z-index:10;top:50%;transform:translateY(-50%);padding:50px;cursor:pointer;}
.section .slidelist .textbox {position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);line-height:1.6;text-align:center;}
.section .slidelist .textbox h3 {font-size:36px;color:#fff;;transform:translateY(30px);transition:all .5s;}
.section .slidelist .textbox p {font-size:16px;color:#fff;opacity:0;transform:translateY(30px);transition:all .5s;}

.section input[id="slide01"]:checked ~ .slidewrap .slidelist .slideitem {transform:translateX(0%);}
.section input[id="slide02"]:checked ~ .slidewrap .slidelist .slideitem {transform:translateX(-100%);}
.section input[id="slide03"]:checked ~ .slidewrap .slidelist .slideitem {transform:translateX(-200%);}

.slide-pagelist {text-align:center;padding:10px;}
.slide-pagelist > li {display:inline-block;vertical-align:middle;}
.slide-pagelist > li > label {display:block;padding:4px;border-radius:30px;background:#bfbfbf;margin:5px 2px;cursor:pointer;}
.section input[id="slide01"]:checked ~ .slidewrap .slide-pagelist > li:nth-child(1) > label {background:#ff4848;}
.section input[id="slide02"]:checked ~ .slidewrap .slide-pagelist > li:nth-child(2) > label {background:#ff4848;}
.section input[id="slide03"]:checked ~ .slidewrap .slide-pagelist > li:nth-child(3) > label {background:#ff4848;}

/* 조직별 상세 팝업 */
#popup-conts-B { background: #fff;	width:100%; position: absolute; left:0; bottom:0;	z-index: 100;	overflow: hidden; box-sizing: border-box; border-radius:23px 23px 0 0;}
.popup-conts-titleb { font-size: 18px; color: #333; text-align: center; font-weight: 500;}

.popup-txt { padding: 50px 30px 20px; font-size: 16px; color: #222;}
.sel-conts { clear: both;}
.sel-conts ul { display: flex; flex-wrap: wrap;}
.sel-conts ul li { flex: 0 0 calc(20% - 8px); margin-right: 10px;}
.sel-conts ul li:last-child { margin-right: 0;}


/* 가로박스형태 공장 타입 */
.box-width { display: flex; justify-content: flex-start; align-items:center; border-radius: 16px; height: 100%; margin-top:25px;}
.box-width .graph-info { width:485px; padding-right: 30px; box-sizing: border-box;}
.box-width .sub-title,
.box-width .sub-title-txt { width: 210px; padding-left: 48px; box-sizing: border-box;}
.box-width .graph-conts { width: 60%; display: flex; justify-content: flex-start; align-items:center; padding: 32px 0px; box-sizing: border-box;}
.box-width-right { width: 40%; min-height:176px; border-radius: 0 16px 16px 0; background: #fff; border-left: 1px solid #f1f5f7; padding-left: 60px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items:center;}
.box-width-right ul { width: 100%;}
.box-width-right ul li { float: left; width: 45%;}

.box-width .factory-conts-info { width: 485px; min-height:100%; padding-left: 0;}

/* 스크린 모니터 */
.monitor-box-width { display: flex; justify-content: flex-start; align-items:flex-start; border-radius: 16px; height: 100%;}
.monitor-screen {width: 60%; float: left;}
.monitor-list { width: 40%; float: left;}

.monitor-list .dashboard-list ul li { padding: 0 0 0 0;}
.accordion_q .fr { margin-right: 20px;}
.accordion_q .fr a { display: block;}

.monitor-list .accordion_do .accordion_q:after { background: url(../img/arrow-small-01.png) center no-repeat; top: 30px;}
.monitor-list .accordion_q.active:after { transform:rotate(90deg)}
.monitor-list .accordion_do .accordion_q { margin-bottom: 15px; font-size: 14px; font-weight: 400;}
.monitor-list .accordion_do > li .accordion_do_conts { padding: 0; background: #fff;}


.board-list { clear: both; width: 100%;}
.accordion_do_line { border-top:1px solid #e0e0e0 !important;}
.accordion_do { margin: 0 auto; border-top: 1px solid #eeeeee;}
.accordion_do > li { border-bottom: 1px solid #eeeeee;  position: relative; }
.accordion_do > li .accordion_do_conts { width: 100%; display: none; padding:20px 24px 20px; border-top:1px solid #eee; box-sizing:border-box;}
.accordion_do .accordion_q { position:relative; display: block; cursor: pointer; font-weight: 600; user-select: none; padding:20px 24px 20px 24px; font-size:16px; color:#222; }
.accordion_do .accordion_q:after { content: " "; background:url(../img/arrow_01.png) center no-repeat; background-size:30px 30px; width:30px; height:30px; position: absolute; right: 15px; top:50%; margin-top:-15px; margin-top:-15px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
.accordion_do .accordion_do_conts { background:#f8f8f8; padding:24px;}
.accordion_q.active:after { transform: rotate(-180deg); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
.active:after active { content:''; transform: rotate(-45deg); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}


/* 검색 select */
.input-search { position: absolute; right: 10px; top: 50%; margin-top: -17px;}
.input-search-x { position: absolute; left: 15px; top: 50%; margin-top: -12px;}

/* 사용자관리 */
.user-box-width { position: relative; clear: both; margin-top: 24px; border:1px solid #dbe8ee; box-shadow: 0 4px 8px #e0e6e9; border-radius: 4px; height: 100%; overflow: hidden; background: #fff;}
.user-box-width:after{content:""; position:absolute; width: 1px; height:100%; clear:both; background:#dbe8ee; left: 25%;}
.user-box-tree { float: left; width: 25%; padding: 40px; box-sizing: border-box; height: 100%;}
.user-box-table { float: left; width: 75%; padding: 40px; box-sizing: border-box;height: 100%;}
.sel-blank li { margin: 10px 0;}
.user-box-width .board-A th { font-size: 14px; font-weight: 400;}
.user-box-width .board-A td { padding: 10px 15px; font-size: 13px;}
.user-btn-group a { display: inline-block; margin-left: 5px; font-weight: 400; font-size: 16px; color: #666;}

/* 주소 체크 */
.address-check { clear: both; position: relative; width: 100%;}
.address-check .address-check-input { padding-right: 98px; box-sizing:border-box; }
.address-check .address-check-btn { position: absolute; right: 0; top: 0; width: 90px; height: 46px; line-height: 46px; text-align: center; border-radius: 4px; background: #808184; display: inline-block;}
.address-check .address-check-btn a { color: #fff; font-weight: 300;}


/* 켐페인 체크 */
.campain-check { clear: both; position: relative; width: 100%;}
.campain-check .campain-check-input { padding-right: 128px; box-sizing:border-box; }
.campain-check .campain-check-btn { position: absolute; right: 0; top: 0; width: 120px; height: 46px; line-height: 46px; text-align: center; border-radius: 4px; background: #808184; display: inline-block;}
.campain-check .campain-check-btn a { color: #fff;}

.col3-input { display: flex; flex-wrap: wrap;}
.col3-input li { flex: 0 0 calc(33.333333% - 5.5px); margin-right: 8px;}
.col3-input li:last-child { margin-right: 0;}

.col2-input { display: flex; flex-wrap: wrap;}
.col2-input li { flex: 0 0 calc(50% - 4px); margin-right: 8px;}
.col2-input li:last-child { margin-right: 0;}

.user-table th { text-align: left; font-size: 16px; color: #222 !important; font-weight: 600 !important;}

/* select 디자인 */
.select { position: relative; padding-left:20px; font-size:14px; font-weight:400; border:1px solid #e0e0e0; height:46px; line-height:46px; color:#666; border-radius:4px; color: #cccccc; text-align: left;  -webkit-user-select: none; -moz-user-select: none;  -ms-user-select: none; user-select: none;  -webkit-touch-callout: none; box-sizing: border-box;}
.select .placeholder { width: 100%; position: relative; background-size:30px 30px; background:url(../img/arrow.png) right 49% no-repeat; cursor: pointer; display: inline-block;}
.select .placeholder:hover { position: relative; }
.select .placeholder:after {  position: absolute;  right: 1em;  top: 50%;  -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 10;}
.select.is-open .placeholder:after { content:''; background:#393d41 url(../img/arrow.png) right 49% no-repeat;}
.select.is-open ul { display: block;}
.select.select--white .placeholder {  background: #fff;  color: #999;}
.select.select--white .placeholder:hover {  background: #fafafa;}
.select ul {  display: none;  position: absolute; overflow: hidden;  width: 100%; top: 100%;  left: 0; margin:8px 0 0 0; z-index: 100;}
.select ul li { width: 100%; background: #fff; box-sizing: border-box; display: block;  text-align: left; border:1px solid #e0e0e0; height:48px; line-height:48px; color: #999; border-radius: 4px; margin-bottom: 8px; padding: 0 16px; }
/* .select ul li:hover {  background: #4ebbf0;  color: #fff;} */
.select-plus { position: relative; color: #0095d5;}
.select-plus button { color: #9ab2bd; font-size: 25px; display: inline-block; width: 25px; height: 25px; line-height: 25px; background:#fff; position: absolute; right: 0px; top: 10px;}
.select-delete-box { position: relative; background: #f9f9f9; width: 100%; height: 27px; line-height: 27px; border-radius: 15px; border: 1px solid #e0e0e0; display: inline-block; box-sizing: border-box; padding-left: 12px;}
.select-delete { position: absolute; top: 2px; right: 3px; padding: 0;}
.select-delete img { width:18px;}


/* 장소관리 박스 */
.place-box { clear: both; width: 100%; height: 400px; background: rgba(255, 72, 72, 0.11); margin-bottom: 25px;}

/* 패키지 관리 */
.package-table { clear: both;}
.package-table th { text-align: left; font-size: 16px; color: #222 !important; font-weight: 600 !important;  height: 46px !important;}
.package-table td { height: 46px !important;}


.switch { position: relative; display: inline-block; width:32px; height:16px; top: 7px;}
.switch input { opacity: 0; width: 0; height: 0;}
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right:0; bottom: 0; background: #e0e0e0; -webkit-transition: .4s; transition: .4s; height:7px; border-radius: 15px;}
.slider:before { position: absolute; content: ""; height:16px; width:16px; left:1px; background:#999; -webkit-transition: .4s; transition: .4s; border-radius: 100%; top: -5px;}
input:checked + .slider {  background: #e0e0e0; left:0; height:7px; border-radius: 15px;}
input:focus + .slider {  box-shadow: 0 0 0 #468cff;}
input:checked + .slider:before {  -webkit-transform: translateX(17px);  -ms-transform: translateX(17px);  transform: translateX(17px); background: #468cff;}


/* 캠페인 추가 */
.campain-add-wrap { clear: both; margin-top: 48px; display: flex; overflow: hidden; box-sizing: border-box;}
.campain-add-box { flex: 0 0 calc(50% - 10px); margin-right: 20px; background: #272638;border-radius: 4px; }
.campain-add-box:nth-child(2n+n) { margin-right: 0;}
.campain-add-title { position: relative; height: 54px; line-height: 54px; color: #fff; padding-left: 30px; font-size: 16px; background: #343345; border-radius: 4px 4px 0 0; box-sizing: border-box;}
.campain-add-title::before { content: 'ㆍ'; position: absolute; font-size: 20px; font-weight: 600; left: 10px; top: 1px;}
.campain-add-graph { padding: 40px; border-radius: 0 0 4px 4px;}
.col2-camp li { width:calc((100% - 8px)/2) !important;}
.ic-clock { position: absolute; right: 14px; top: 50%; margin-top: -12px;}

/* 디바이스 추가 */
.device-add { margin: 15px 0 40px; background:#f4fcff; border:1px solid #e0e0e0; padding:11px 15px 10px; color:#666; line-height:170%; min-height: 26px;}

/* 디자이스 관리 */
.device-3col { clear: both;}
.device-3col .device-3col-left { width: 18%; height: 310px; background: #fff; float: left; border-radius: 16px; border:1px solid #dbe8ee; box-sizing: border-box; margin-right: 2%; display: flex; justify-content: center; align-items:center;}
.device-3col .device-3col-center { width: 40%; float: left;box-sizing: border-box; padding-right: 15px;}
.device-3col .device-3col-center .board-C { clear: both;}
.device-3col .device-3col-center .board-C thead th,
.device-3col .device-3col-right .board-C thead th { background: #efefef; font-size: 14px; color: #666;}
.device-3col .device-3col-center .board-C tbody th,
.device-3col .device-3col-right .board-C tbody th { font-size: 14px; color: #666;}
.device-3col .device-3col-center .board-C tbody td,
.device-3col .device-3col-right .board-C tbody td { font-size: 14px; color: #666;}
.device-3col .device-3col-right { width: 40%; float: left;box-sizing: border-box;}

.device-3col-left .device-left-conts { text-align: center;}
.device-left-care { position: relative; font-size: 20px; color: #222; font-weight: 600; margin-bottom: 20px;}
.device-left-care .care-oval { position: absolute; left: 0; top: 0; width: 24px; height: 24px;}
.device-left-care .care-oval span { padding-left: 40px;}
.device-left-title { font-size: 14px; color: #666; line-height: 180%; }
.device-left-txt { font-size: 11px; color: #bfbfbf; }
/* 경고 */
.warning-device { position: relative; display: inline-block; padding-left: 30px;}
.warning-device::before { content: ''; position: absolute; left: 0; top: 2px; width: 24px; height: 24px; background: #ff4848; border-radius: 100%;}

/* 주의 */
.care-device { position: relative; display: inline-block; padding-left: 30px;}
.care-device::before { content: ''; position: absolute; left: 0; top: 2px; width: 24px; height: 24px; background: #ffb400; border-radius: 100%;}

/* 정상 */
.ok-device { position: relative; display: inline-block; padding-left: 30px;}
.ok-device::before { content: ''; position: absolute; left: 0; top: 2px; width: 24px; height: 24px; background: #0095d5; border-radius: 100%;}

/* off */
.off-device { position: relative; display: inline-block; padding-left: 30px;}
.off-device::before { content: ''; position: absolute; left: 0; top: 2px; width: 24px; height: 24px; background: #999; border-radius: 100%;}

.btn-blue-line { display:inline-block; width: 75px; height: 30px; line-height: 30px; border-radius: 4px; border: 1px solid #0095d5; text-align: center;font-size: 12px; color: #0095d5; font-weight: 600; background: #f4fcff;}
.btn-blue-line a { display: inline-block; width: 100%; height: 100%; }

.btn-red-line { display:inline-block; width: 75px; height: 30px; line-height: 30px; border-radius: 4px; border: 1px solid #da0000; text-align: center;font-size: 12px; color: #da0000; font-weight: 600; background: #fcf3f3;}
.btn-red-line a { display: inline-block; width: 100%; height: 100%; }

.btn-gray-line { display:inline-block; width: 75px; height: 30px; line-height: 30px; border-radius: 4px; border: 1px solid #999; text-align: center;font-size: 12px; color: #999; font-weight: 600; background: #f5f5f5;}
.btn-gray-line a { display: inline-block; width: 100%; height: 100%; }

/* 박스 닫기 */
.box-close { position: absolute; right: 20px; top: 15px;}
.box-close img { width: 32px;}

/* file css */
.fileBox_input { position:relative; clear:both; width:100%; margin-top:20px; border:1px solid #e1e4e7; border-right:none; }
.fileBox_input .fileName { height:43px;padding-left:0; line-height:35px; background-color:#fff; border:0px solid #e1e4e7; vertical-align:middle; width:calc(100% - 120px); box-sizing:border-box; }
.fileBox_input .input_file { position:absolute; right:0; top:-1px; font-size:14px; width:120px; height:45px; line-height:45px;text-align:center;vertical-align:middle; background:#3a3940; color:#fff; padding:0; box-sizing:border-box;font-weight:300;}
.fileBox_input input[type="file"] {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;box-sizing:border-box;}

/* 패키지 버튼 */
.package-btn .login-btn { box-shadow:0 0 0; height: 46px;}




/****************************************************************************************/
/****************************************************************************************/
/*Media Query*/
/****************************************************************************************/
/****************************************************************************************/


@media (max-width:768px) {

  /*.dashboard-screen img { width: 100%;} */
  
}

@media (max-width:410px) {


}