@charset "utf-8";
@import url('./jquery-ui.css');
@import url('./swiper.css');
@import url('./common.css');

/*****----- 공통 -----*****/
/* 타이틀 */
.titArea {display:flex; align-items:center; justify-content:space-between; margin:0 -20px 20px; padding:0 20px 20px; border-bottom:1px solid #E3E3E3; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s}
.titArea h3 {line-height:28px; font-size:22px; font-weight:700; color:#000; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s}
.titArea h4 {line-height:24px; font-size:18px; font-weight:700; color:#000; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s}
.titArea h3 .label {margin-right:18px; height:28px; border-color:#AAA; color:#AAA; vertical-align:top}
.titArea h4 span.txt {display:inline-block; margin-left:10px; font-size:13px; color:#CCC; font-weight:400}
.titArea .right {float:right}
.titArea:not(:first-child) {margin-top:28px}
.titArea.v2 {margin:0 -15px 15px; padding:0 15px 15px}
@media (max-width: 767px) {
	.titArea {margin:0 -15px 15px; padding:0 15px 15px}
	.titArea h3 {line-height:24px; font-size:18px}
	.titArea h4 {line-height:20px; font-size:14px}
	.titArea h3 .label {margin-right:14px; height:24px}
	.titArea h4 span.txt {margin-left:8px}
	.titArea:not(:first-child) {margin-top:24px}
}

/* 버튼 */
.btn {display:inline-block; padding:0 16px; border-radius:5px; border:1px solid #03386D; line-height:38px; text-align:center; color:#fff; background:#03386D}
.btnR {display:inline-block; padding:0 12px; border-radius:20px; border:1px solid #03386D; line-height:30px; font-size:13px; color:#fff; font-weight:600; background:#03386D}
.btnIco {display:inline-flex; align-items:center; justify-content:center; border:none; border-radius:5px; width:30px; height:40px; background:none}
.btnR.ss {min-width:52px; line-height:26px}
.icoAdd {display:block; width:100%; height:100%; text-indent:-9999px; background:url("../images/ico-add.svg") no-repeat center/100%}
.icoSet {display:block; width:100%; height:100%; text-indent:-9999px; background:url("../images/ico-set.png") no-repeat center/25px}
.btnWhite {border-color:#E3E3E3 !important; color:#333; background:#fff !important}
.btnGray {border-color:#333 !important; color:#fff; background:#333 !important}
.btnLGray {border-color:#66686A !important; color:#fff; background:#66686A !important}
.btnLBlue {border-color:#3363AB !important; color:#fff; background:#3363AB !important}
.btnBLine {color:#03386D; background:#fff}
.btnGLine {border-color:#C6C6C6; color:#999; background:#F4F6F7}
.btnOrange {border-color:#FF4400 !important; color:#fff; background:#FF4400 !important}
.btnBlack {border-color:#303030 !important; color:#fff; background:#303030 !important}
.btnTxt {line-height:40px; text-decoration:underline; font-size:15px; font-weight:500; color:#333}
.btnCenter {display:flex; align-items:center; justify-content:center; gap:10px; margin-top:44px}
.icoPlus {display:inline-block; padding-left:20px; white-space:nowrap; background:url("../images/ico-add-w.svg") no-repeat left center}
.icoPlus.blue {background-image:url("../images/ico-add-b.svg")}
.icoPlus.gray {background-image:url("../images/ico-add-g.svg")}
.icoArrow {display:inline-block; padding-right:20px; white-space:nowrap; background:url("../images/ico-arrow-down.svg") no-repeat right center}
.icoArrow.up {background-image:url("../images/ico-arrow-up.svg")}
.tabBtn {display:flex; padding:4px; border-radius:5px; background:#EAEEF1} 
.tabBtn li a {display:block; padding:0 10px; border-radius:3px; line-height:30px; font-size:13px; font-weight:500; color:#606060}
.tabBtn li.curr a {font-weight:700; color:#161616; box-shadow:0 0 5px rgba(0,0,0,0.2); background:#fff}
@media (max-width: 767px) {
	.btn {padding:0 14px; line-height:34px}
	.btnR {padding:0 12px; line-height:28px; font-size:12px}
	.btnIco {width:28px; height:36px}
	.btnR.ss {min-width:52px; line-height:26px}
	.btnTxt {line-height:36px; font-size:14px}
	.btnCenter {gap:8px; margin-top:30px}
	.icoPlus {padding-left:15px}
	.tabBtn li a {padding:0 6px; font-size:11px; letter-spacing:-0.05em}
}

/* 버튼 정렬 */
.btnFlex {display:flex; gap:8px}
.btnFlex > * {flex:1; white-space:nowrap}

/* 탭 */
.tabWrap {overflow:hidden; border-radius:6px; background:#0E1619}
.tabWrap > ul {display:flex}
.tabWrap > ul li {flex:1}
.tabWrap > ul li + li {border-left:1px solid #17252a}
.tabWrap > ul li a {display:block; padding:0 10px; text-align:center; line-height:30px; color:#ddd; font-size:13px; background:#20363e; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s}
.tabWrap > ul li.curr a {color:#fff; font-weight:700; background:#0E1619}
.tabWrap .tabBox > div {padding:15px}

/* 상세 테이블 */
.rowTable {border-top:2px solid #002858}
.rowTable table {width:100%}
.rowTable table th,
.rowTable table td {padding:12px; border-bottom:1px solid #DBDBDB; text-align:left; line-height:1.2; font-size:14px; color:#454545}
.rowTable table th {color:#002858; font-weight:600; background:#F2F2F6}
@media (max-width: 767px) {
	.rowTable table col:first-child {width:110px !important}
	.rowTable table th,
	.rowTable table td {padding:8px 10px; font-size:13px}
}

/* 리스트 테이블 */
.colTable {overflow-x:auto; border:1px solid #E3E3E3; border-radius:5px}
.colTable table {min-width:100%; width:auto; table-layout:fixed}
.colTable table th, 
.colTable table td {padding:0 12px 0 20px; height:55px; text-align:left; color:#666; font-weight:400; white-space:nowrap}
.colTable table th {border-bottom:2px solid #345B74; height:68px; color:#345B74; font-weight:700}
.colTable table .txtC {padding:0 12px}
.colTable table tbody td {background:#F6F7F8}
.colTable table tbody tr:nth-child(2n) td {background:#fff}
.colTable table th:first-child, 
.colTable table td:first-child {padding-left:25px}
.colTable table th:last-child, 
.colTable table td:last-child {padding-right:25px}
.colTable table tbody tr.on td {background:#e1ebfa !important; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s}
.colTable.l1 table th:nth-child(1),
.colTable.l1 table td:nth-child(1),
.colTable.l2 table th:nth-child(2),
.colTable.l2 table td:nth-child(2),
.colTable.l3 table th:nth-child(3),
.colTable.l3 table td:nth-child(3),
.colTable.l4 table th:nth-child(4),
.colTable.l4 table td:nth-child(4),
.colTable.l5 table th:nth-child(5),
.colTable.l5 table td:nth-child(5),
.colTable.l6 table th:nth-child(6),
.colTable.l6 table td:nth-child(6) {border-right:1px solid #ccc}
@media (max-width: 1160px) {
	.colTable table th, 
	.colTable table td {height:50px}
	.colTable table th {height:60px}
}
@media (max-width: 767px) {
	.colTable table th, 
	.colTable table td {padding:0 8px 0 15px; height:45px}
	.colTable table th {height:55px}
	.colTable table .txtC {padding:0 8px}
	.colTable table th:first-child, 
	.colTable table td:first-child {padding-left:15px}
	.colTable table th:last-child, 
	.colTable table td:last-child {padding-right:15px}
}

/* 장소 수정 — 사용처(로봇/작업/구분) 소형 테이블 */
.colTable.locationUsageMini { border-color:#e5e8eb; }
.colTable.locationUsageMini table td { height:auto; min-height:36px; padding:7px 11px 7px 15px; line-height:1.35; font-size:13px; white-space:normal; }
.colTable.locationUsageMini table th { height:auto; min-height:50px; padding:12px 11px 12px 15px; line-height:1.35; font-size:13px; font-weight:700; color:#345B74; border-bottom-width:1px; white-space:normal; }
.colTable.locationUsageMini table th:first-child,
.colTable.locationUsageMini table td:first-child { padding-left:14px; }
.colTable.locationUsageMini table th:last-child,
.colTable.locationUsageMini table td:last-child { padding-right:14px; }
@media (max-width: 1160px) {
	.colTable.locationUsageMini table td { min-height:34px; padding:6px 10px 6px 14px; }
	.colTable.locationUsageMini table th { min-height:46px; padding-top:10px; padding-bottom:10px; }
}
@media (max-width: 767px) {
	.colTable.locationUsageMini table td { padding:6px 9px; min-height:32px; font-size:12px; }
	.colTable.locationUsageMini table th { min-height:42px; padding:9px; font-size:12px; }
}

/* 토탈 */
.totalArea {display:flex; padding:20px; margin:15px 0; border-radius:5px; border:1px solid #E6EAED}
.totalArea dl {display:flex}
.totalArea dl + dl {margin-left:60px}
.totalArea dl dt {margin-right:8px; line-height:30px; font-weight:600}
.totalArea dl dd {padding:0 15px; border-radius:30px; min-width:60px; text-align:center; line-height:30px; font-size:15px; color:#306CC6; font-weight:700; background:#F1F1F1}
.totalArea dl + dl dd {color:#AC0B2E; background:#F8D3D7}
@media (max-width: 767px) {
	.totalArea dl + dl {margin-left:20px}
}

/* 검색영역 */
.searchArea {display:flex; padding:15px 11px; border:1px solid #E3E3E3; border-radius:5px}
.searchArea > div {display:flex}
.searchArea > div > input,
.searchArea > div > select {width:160px; max-width:100%}
.searchArea > div > * {margin:5px 9px}
.searchArea > input[type=hidden] + div {flex-wrap:wrap; flex:1}
.searchArea > div:first-child {flex-wrap:wrap; flex:1}
.searchArea > div:last-child {white-space:nowrap; align-items:end; justify-content:end}
.searchArea > div > dl dt {display:flex; margin-bottom:8px; line-height:30px; font-size:16px; font-weight:700; color:#101010}
.searchArea > div > dl dt img {margin-right:10px; width:30px}
.searchArea > div dl.row {display:flex}
.searchArea > div dl.row dt {margin:0 12px 0 0; line-height:40px; font-size:16px; color:#666; font-weight:500; white-space:nowrap}
.searchArea > div dl.row dd select {min-width:150px; text-overflow:ellipsis}
.searchArea > div .searchBox select {min-width:150px}
.searchArea > div .total {line-height:40px; color:#474D52}
.searchArea > .searchBox {margin:15px 11px}
.searchArea > .searchBox > * {flex-shrink:1; min-width:0}
.searchArea > .searchBox > select {text-overflow:ellipsis}
.searchArea > .searchBox > .btn {white-space:nowrap}
.searchArea .right {display:flex; flex:1; align-items:center; justify-content:end}
.searchArea + .colTable {margin-top:-1px; border-radius:0 0 5px 5px}
.searchArea.v2 {padding:0 0 20px; border:none; border-radius:0}
.searchArea.v2 > div > * {margin:0}
.searchArea.v2 > div > * + * {margin-left:20px}
.searchArea:has(+ .colTable) {border-radius:5px 5px 0 0; border-bottom:none}
.listArea .searchArea > div {justify-content:space-between}
@media (max-width: 1399px) {
	.searchArea:has(.btnIco) {position:relative; padding-right:50px; flex-direction:column}
	.searchArea:has(.flexR) {flex-direction:row}
	.searchArea > div {max-width:100%}
	.searchArea > div .searchBox input {max-width:628px}
	.searchArea > div .btnIco {position:absolute; top:20px; right:20px; margin:0}
	.searchArea > div:first-child .btnIco {margin-top:2px}
}
@media (max-width: 767px) {
	.searchArea {padding:10px; flex-direction:column !important}
	.searchArea > div:not(.flexR) {flex-direction:column}
	.searchArea > div:not(.flexR) > *:not(.btnIco) {margin:5px 0; width:100%}
	.searchArea > div .btnIco {margin:0; top:16px; right:10px}
	.searchArea .right {justify-content:start}
	.searchArea > div dl.row dt {margin-right:8px; line-height:36px; font-size:14px}
	.searchArea > div dl.row dd select {min-width:120px}
	.searchArea > div .searchBox select {min-width:120px}
	.searchArea > div .total {line-height:1.4}
	.searchArea > .searchBox {display:flex; margin:5px 0; justify-content:start; flex-wrap:wrap}
	.searchArea > .searchBox > select {flex:1; width:auto; max-width:inherit !important; min-width:100%}
	.searchArea > .searchBox > select:has(+ .btn) {min-width:auto; max-width:calc(100% - 60px) !important}
	.searchArea.v2 {padding-bottom:10px}
	.searchArea.v2 > div > * + * {margin-left:10px}
}

/* 페이지네이션 */
.paging {display:flex; align-items:center; justify-content:center; margin-top:26px}
.paging a,
.paging strong {display:block; margin:0 5px; border-radius:5px; width:32px; text-align:center; line-height:32px; font-size:14px; font-weight:400; background:#F1F1F1}
.paging strong {color:#fff; background:#3363AB}
.paging .btnFirst,
.paging .btnPrev,
.paging .btnNext,
.paging .btnLast {width:28px; text-indent:-9999px; background:#F1F1F1 no-repeat center}
.paging .btnFirst {background-image:url("../images/btn-first.svg")}
.paging .btnPrev {background-image:url("../images/btn-prev.svg")}
.paging .btnNext {background-image:url("../images/btn-next.svg")}
.paging .btnLast {background-image:url("../images/btn-last.svg")}
@media (max-width: 767px) {
	.paging {margin-top:20px}
	.paging a,
	.paging strong {margin:0 2px; width:30px; line-height:30px; font-size:13px}
	.paging .btnFirst,
	.paging .btnPrev,
	.paging .btnNext,
	.paging .btnLast {background-size:12px}
}

/* 팝업 */
.layerPop {display:none; position:fixed; top:0; left:0; z-index:1000; width:100%; height:100%; background:rgba(0,0,0,0.60)}
.layerPop > .inner {overflow:hidden; position:fixed; top:50%; left:50%; padding:61px 0 0; border-radius:16px; max-width:100%; max-height:90%; background:#fff; transform:translate(-50%, -50%) scale(0); -webkit-transform:translate(-50%, -50%) scale(0); -moz-tansform:translate(-50%, -50%) scale(0); transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; box-sizing:border-box}
.layerPop > .inner .tit {display:block; position:absolute; top:0; left:0; padding:17px 30px; border-bottom:1px solid #E3E3E3; width:100%; line-height:26px; font-size:18px; font-weight:700; color:#333}
.layerPop > .inner .tit span {display:block; margin-top:5px; line-height:16px; font-size:13px; font-weight:400; color:#666}
.layerPop > .inner .cont {overflow:hidden; overflow-y:auto; padding:25px 30px 10px}
.layerPop > .inner .cont .btnCenter {display:flex; justify-content:center; position:absolute; bottom:0; left:0; right:0; padding:0 30px 24px}
.layerPop > .inner .cont .btnCenter:before {display:block; content:""; position:absolute; top:-29px; left:0; right:0; height:30px; background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 40%)}
.layerPop > .inner .cont .btnCenter .btn {position:relative; z-index:10; padding:0 20px; border-color:#3363AB; width:158px; line-height:54px; font-weight:700; background:#3363AB}
.layerPop > .inner:has(.btnCenter) {padding-bottom:100px}
.layerPop > .inner:has(.tit span) {padding-top:80px}
.layerPop > .inner .btnClose {position:absolute; top:0; right:20px; border:none; width:40px; height:60px; text-indent:-9999px; background:url("../images/btn-close.svg") no-repeat center}
.layerPop.on > .inner {transform:translate(-50%, -50%) scale(1); -webkit-transform:translate(-50%, -50%) scale(1); -moz-transform:translate(-50%, -50%) scale(1)}
.layerPop.alert > .inner {padding:53px 0 54px}
.layerPop.alert > .inner .tit {padding:0 24px; line-height:52px; font-size:18px}
.layerPop.alert > .inner .tit.v1 {color:#fff; background:#E31100}
.layerPop.alert > .inner .tit.v2 {color:#fff; background:#DE9407}
.layerPop.alert > .inner .cont {padding:34px 24px 42px; text-align:center; line-height:1.5; text-align:center}
.layerPop.alert > .inner .cont strong {display:block; margin-bottom:4px; line-height:23px; font-size:16px; font-weight:600; color:#3B3737}
.layerPop.alert > .inner .cont strong span {display:block; font-weight:700}
.layerPop.alert > .inner .cont p {line-height:23px; font-size:13px; font-weight:400}
.layerPop.alert > .inner .cont .btnCenter .btn {flex:1; height:40px; line-height:38px}
.layerPop.alert > .inner .cont .btnCenter .btnWhite,
.layerPop.alert > .inner .cont .btnCenter .btnGray {flex:none}
.layerPop.alert > .inner .cont .btnCenter .btnWhite:last-child {flex:1}
.layerPop.alert > .inner .cont .btnCenter .btnWhite {flex:none; width:70px}
.layerPop.detect {background:rgba(0,0,0,0.7); animation:detect 0.6s infinite; -ms-animation:detect 0.6s infinite; -moz-animation:detect 0.6s infinite; -webkit-animation:detect 0.6s infinite; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s}
@-webkit-keyframes detect{
	50% {background:rgba(106, 0, 0, 0.60)}
	100% {background:rgba(0,0,0,0.7)}
}
@-ms-keyframes detect{
	50% {background:rgba(106, 0, 0, 0.60)}
	100% {background:rgba(0,0,0,0.7)}
}
@-moz-keyframes detect{
	50% {background:rgba(106, 0, 0, 0.60)}
	100% {background:rgba(0,0,0,0.7)}
}
@keyframes detect{
	50% {background:rgba(106, 0, 0, 0.60)}
	100% {background:rgba(0,0,0,0.7)}
}
@media (min-width: 768px){
	#draggable {background:none}
	#draggable > .inner {top:calc(50% - 250px); left:calc(50% - 250px); box-shadow:0 0 10px rgba(0,0,0,0.2); cursor:all-scroll; transform:scale(0); -webkit-transform:scale(0); -moz-tansform:scale(0); transition:all 0s; -webkit-transition:all 0s; -moz-transition:all 0s}
	#draggable.on > .inner {transform:scale(1); -webkit-transform:scale(1); -moz-tansform:scale(1)}
}
@media (max-width: 767px){
	.layerPop > .inner {padding:51px 0 0; border-radius:8px; max-width:90%}
	.layerPop > .inner .tit {padding:13px 20px; line-height:24px; font-size:17px; background:#fff}
	.layerPop > .inner .cont {padding:15px 20px}
	.layerPop > .inner .cont .btnCenter {padding:0 20px 15px}
	.layerPop > .inner .cont .btnCenter:before {top:-19px; height:20px}
	.layerPop > .inner .cont .btnCenter .btn {padding:0 20px; width:120px; line-height:40px}
	.layerPop > .inner:has(.btnCenter) {padding-bottom:68px}
	.layerPop > .inner:has(.tit span) {padding-top:76px}
	.layerPop > .inner .btnClose {width:30px; height:55px; background-size:18px}
	.layerPop.alert > .inner {padding:46px 0 54px; width:320px !important}
	.layerPop.alert > .inner .tit {padding:0 20px; line-height:44px; font-size:17px}
	.layerPop.alert > .inner .cont {padding:20px 20px}
	.layerPop.alert > .inner .cont strong {line-height:20px; font-size:15px}
	.layerPop.alert > .inner .cont .btnCenter .btn {height:36px; line-height:34px}
	#draggable.on > .inner {top:50% !important; left:50% !important}
}

/* 토스트 팝업 */
.pop {position:absolute; bottom:-100%; right:24px; z-index:200; padding:20px; border-radius:16px; width:480px; background:rgba(16, 16, 16, 0.70); opacity:0; animation:pop 4s linear; -ms-animation:pop 4s linear; -moz-animation:pop 4s linear; -webkit-animation:pop 4s linear; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s}
.pop p {display:flex; align-items:center; position:relative; padding-left:48px; min-height:40px; line-height:1.5; font-size:16px; font-weight:600; color:#fff}
.pop p:before {display:block; content:""; position:absolute; top:50%; left:0; margin-top:-20px; width:40px; height:40px; background:url("../images/ico-noti.svg") no-repeat 0 0 }
@-webkit-keyframes pop{
	10% {bottom:24px; opacity:1; -webkit-animation:pop 4s linear}
	80% {bottom:24px; opacity:1; -webkit-animation:pop 4s linear}
	100% {bottom:-100%; opacity:0; -webkit-animation:pop 4s linear}
}s-keyframes pop{
	10% {bottom:24px; opacity:1; -webkit-animation:pop 4s linear}
	80% {bottom:24px; opacity:1; -webkit-animation:pop 4s linear}
	100% {bottom:-100%; opacity:0; -webkit-animation:pop 4s linear}
}
@-moz-keyframes pop{
	10% {bottom:24px; opacity:1; -webkit-animation:pop 4s linear}
	80% {bottom:24px; opacity:1; -webkit-animation:pop 4s linear}
	100% {bottom:-100%; opacity:0; -webkit-animation:pop 4s linear}
}
@keyframes pop{
	10% {bottom:24px; opacity:1; -webkit-animation:pop 4s linear}
	80% {bottom:24px; opacity:1; -webkit-animation:pop 4s linear}
	100% {bottom:-100%; opacity:0; -webkit-animation:pop 4s linear}
}


/* 입력영역 */
.dateWrap {display:flex; align-items:center}
.dateWrap p {flex:1; width:160px}
.dateWrap span {display:block; width:18px; text-align:center; font-size:16px; color:#707070}
.searchBox {display:flex; align-items:center; gap:6px; flex-shrink:1; min-width:0}
.searchBox select {flex:1; max-width:35%}
.searchBox input {flex:1; max-width:320px; width:320px; flex-shrink:1; min-width:0}
.searchBox > * {margin:0 !important}
.checkbox {display:inline-block; position:relative}
.checkbox input {position:absolute; top:0; left:0; width:100%; height:100% !important; opacity:0}
.checkbox input + label {display:block; padding-left:30px; line-height:24px; font-weight:600; color:#30383E; background:no-repeat left center/24px; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s}
.checkbox input[type=checkbox] + label {background-image:url("../images/checkbox.svg")}
.checkbox input[type=checkbox]:checked + label {background-image:url("../images/checkbox-on.svg")}
.checkbox input[type=radio] + label {background-image:url("../images/radio.svg")}
.checkbox input[type=radio]:checked + label {background-image:url("../images/radio-on.svg")}
.checkbox.only input + label {padding:0; width:24px; height:24px; text-indent:-9999px; background-position:center}
.checkbox.r input + label {padding:0 26px 0 0; background-position:right center; background-size:20px}
.checkboxWrap {display:flex; flex-wrap:wrap; gap:10px 24px}
.checkSlide {display:inline-block; position:relative; width:64px; height:32px}
.checkSlide input {position:absolute; top:0; left:0; width:100%; height:100%; opacity:0}
.checkSlide input + label {display:block; position:relative; border-radius:16px; line-height:32px; font-size:12px; color:#fff; font-weight:400; background:#888; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s}
.checkSlide input + label:before {display:block; content:"OFF"; padding-left:23px; text-align:center}
.checkSlide input + label:after {display:block; content:""; position:absolute; top:3px; left:3px; border-radius:50%; width:26px; height:26px; background:#fff; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s}
.checkSlide input[type=checkbox]:checked + label {background:#3363AB}
.checkSlide input[type=checkbox]:checked + label:before {content:"ON"; padding:0 23px 0 0}
.checkSlide input[type=checkbox]:checked + label:after {left:35px}
.flex {display:flex; gap:8px}
.flex .txt {display:flex; align-items:center; white-space:nowrap}
@media (max-width: 767px){
	
}

/* 입력 리스트 */
.inputList > dl + dl {margin-top:25px}
.inputList > dl > dt {display:flex; position:relative; margin-bottom:5px; line-height:25px; font-weight:700}
.inputList > dl > dt .btnIco {position:absolute; top:0; right:0; width:24px; height:24px}
.inputList > dl > dt .checkbox {position:absolute; top:2px; right:0}
.inputList > dl > dt > span {display:block; margin-left:4px; line-height:25px; font-size:14px}
.inputList > dl > dt > span.cRed {font-weight:400}
.inputList > dl > dt > span.cGray {color:#707070 !important; font-weight:400}
.inputList > dl.row {display:flex}
.inputList > dl.row > dt {display:flex; align-items:center; margin-bottom:0; min-width:108px; line-height:32px}
.inputList > dl.row > dd {display:flex; align-items:center; flex:1} 
.inputList > dl > dd + dd {margin-top:8px}
.inputList > dl > dd input {color:#101010}
.inputList > dl > dd input::-webkit-input-placeholder {color:#999}
.inputList > dl > dd input::-moz-placeholder {color:#999}
.inputList > dl > dd input:-ms-input-placeholder {color:#999}
.inputList > dl > dd input:-moz-placeholder {color:#999}
.inputList.txtList > dl + dl {margin-top:10px}
.inputList ul > li + li {margin-top:15px}
.inputList ul > li .mapArea {width:100%; min-width:100%; max-width:100%; min-height:350px}
* + .inputList {margin-top:24px}
@media (max-width: 767px){
	.inputList > dl + dl {margin-top:20px}
	.inputList > dl > dt {line-height:22px}
	.inputList > dl > dt .btnIco {margin-top:-1px}
	.inputList > dl > dt .checkbox {top:0}
	.inputList > dl > dt > span {line-height:22px; font-size:13px}
	.inputList > dl > dt > span.cRed {line-height:22px; font-size:13px}
	.inputList > dl > dt > span.cGray {line-height:22px; font-size:13px}
	.inputList > dl.row {display:flex}
	.inputList > dl.row > dt {display:flex; align-items:center; margin-bottom:0; min-width:108px; line-height:32px}
	.inputList > dl.row > dd {display:flex; align-items:center; flex:1} 
	.inputList > dl > dd + dd {margin-top:8px}
	.inputList > dl > dd input {color:#101010}
	.inputList > dl > dd input::-webkit-input-placeholder {color:#999}
	.inputList > dl > dd input::-moz-placeholder {color:#999}
	.inputList > dl > dd input:-ms-input-placeholder {color:#999}
	.inputList > dl > dd input:-moz-placeholder {color:#999}
	.inputList.txtList > dl + dl {margin-top:10px}
	.inputList ul >  li + li {margin-top:10px}
	* + .inputList {margin-top:20px}
}

/* 정렬 */
.txtC {text-align:center !important}
.flexR {display:flex; align-items:center; justify-content:end}

/* 너비 */
.w120 {width:120px !important}
.w250 {width:250px !important}
.mW320 {max-width:320px !important}

/* 텍스트 */
.cRed {color:#E31100 !important}
.cGray {color:#707070 !important}
.cGreen {color:#04B014 !important}
.cBlue {color:#306CC6 !important}
.c01 {color:#3868C1 !important}
.c02 {color:#04B014 !important}
.c03 {color:#FF9D2D !important}
.c04 {color:#E31100 !important}
.bold {font-weight:700 !important}

/* 파일첨부 */
.fileWrap {display:flex; position:relative; max-width:100%}
.fileWrap input[type=file] {position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; cursor:pointer}
.fileWrap input[type=text] {padding-left:40px; flex:1; background:url("../images/ico-file.svg") no-repeat 12px center}
.fileArea {display:flex; align-items:end; gap:8px}
.fileArea dl {flex:1}
.fileArea dl dt {margin-bottom:4px; line-height:1.5; color:#999; font-weight:400}

/* 라벨 */
.labelArea {display:flex; flex-wrap:wrap; gap:8px}
.label {display:inline-flex; align-items:center; padding:0 16px; overflow:hidden; border:1px solid #dbdbdb; border-radius:20px; height:30px; line-height:28px; font-size:12px; color:#333; background:#fff}
.label:has(input) {border-color:#3B3737}
.label input {padding:0 12px; margin:0 -12px; border:none; width:130px; height:30px; font-size:12px}
.label input::-webkit-input-placeholder {color:#999}
.label input::-moz-placeholder {color:#999}
.label input:-ms-input-placeholder {color:#999}
.label input:-moz-placeholder {color:#999}
.label input + .btnDel {margin:0 -5px 0 10px; background:url("../images/btn-del.svg") no-repeat center/18px}
.label .btnDel {display:block; margin:0 -8px 0 5px; width:24px; height:24px; text-indent:-9999px; background:url("../images/btn-del02.svg") no-repeat center/10px}
.label.v2 {border-color:#DADBDD; color:#AAA}
.label.v3 {border-color:#aaa; color:#333}
.label.type01 {border-color:#1F6AFF; color:#1F6AFF; font-weight:700; background:#E1F0FF}
.label.type02 {border-color:#fb6a00; color:#fb6a00; font-weight:700; background:#ffe8ce}
.label.on {padding:0 15px; border:2px solid #1F6AFF; line-height:26px; color:#1F6AFF}
.searchArea.v2 + .labelArea {padding:15px 0; border-top:1px solid #aaa; border-bottom:1px solid #aaa}
.label.st1 {border-color:#DADBDD; color:#AAA}
.label.st2 {border-color:#aaa; color:#333}
.label.st3 {border-color:#1F6AFF; color:#1F6AFF}
.label.st4 {border-color:#fb6a00; color:#fb6a00}
.label.st5 {border-color:#00C9A7; color:#00C9A7}
@media (max-width: 767px) {
	.labelArea {gap:5px}
}

/* 박스 */
.box {padding:20px; border-radius:8px; border:1px solid #B6C5CE; background:#fff}
@media (max-width: 767px) {
	.box {padding:15px}
}

/* 영역 나눔 */
.splitWrap {display:flex; flex-shrink:1; gap:20px}
.splitWrap + .splitWrap {margin-top:20px}
.splitWrap > * {flex:1; max-width:calc(50% - 10px); flex-shrink:1; min-width:0}
@media (max-width: 1160px) {
	.splitWrap {gap:15px}
	.splitWrap + .splitWrap {margin-top:15px}
}
@media (max-width: 767px) {
	.splitWrap {flex-direction:column; gap:12px}
	.splitWrap + .splitWrap {margin-top:12px}
	.splitWrap > * {max-width:100%}
}

/*****----- 레이아웃 -----*****/
#header {display:flex; align-items:center; justify-content:space-between; position:relative; z-index:101; padding-right:20px; height:60px; background:#041620; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s}
#header h1 {position:fixed; display:flex; align-items:center; justify-content:center; position:relative; z-index:1; margin-right:25px; min-width:180px; height:60px}
#header h1 img {height:18px}
#header .btnMenuH {display:none}
#header .gnbWrap {display:flex; align-items:center; width:100%}
#header .gnbWrap .tit strong {display:flex; align-items:center; justify-content:center; position:absolute; top:0; left:0; z-index:-1; padding:0 20px 0 180px; width:100%; height:60px; font-size:18px; color:#fff;  white-space:nowrap; font-weight:600; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s}
#header .gnbWrap .tit strong span {display:inline-block; margin-left:5px; font-size:18px; color:#fff}
#header .gnbWrap .tit select {padding:0 30px 0 12px; border-radius:5px; border:1px solid #005A7F; width:auto !important; height:34px; white-space:nowrap; text-overflow:ellipsis; font-size:13px; color:#CBCBCB; background:url("../images/common/bl-arrow.svg") no-repeat right 12px center}
#header .gnbWrap .tit span {display:inline-block; line-height:34px; white-space:nowrap; font-size:13px; color:#CBCBCB}
#header .gnbWrap  .util {display:flex; align-items:center; justify-content:end; flex:1; margin-left:20px; white-space:nowrap}
#header .gnbWrap  .util p {margin-left:12px; line-height:20px; font-size:13px; color:#B1B1B1}
#header .gnbWrap  .util p span {display:inline-block; margin-left:10px; font-size:13px; color:#fff; font-weight:700}
#header .gnbWrap  .util .user {position:relative; display:block; margin-left:20px; padding-left:28px; line-height:20px; font-size:13px; font-weight:600; color:#B1B1B1}
#header .gnbWrap  .util .user:before {display:block; content:""; position:absolute; top:0; left:0; border-radius:50%; width:20px; height:20px; background: url("../images/common/ico-user.svg") no-repeat center bottom}
#header .gnbWrap  .util .btnLogout {display:block; padding:0 12px; margin-left:18px; border-radius:20px; text-align:center; line-height:30px; font-size:13px; font-weight:600; color:#fff; background:#717171}
#header .gnbWrap  .util .btnPlay {display:block; padding:0 18px; border:1px solid #C6C6C6; border-radius:30px; text-align:center; line-height:28px; font-size:13px; font-weight:600; color:#fff; background:none}
#header .gnbWrap  .util .btnPlay span {display:inline-block; padding-left:21px; color:#fff; background:url("../images/common/ico-play.svg") no-repeat left center}
#gnb {position:fixed; top:60px; left:0; bottom:0; z-index:10; background:#041620}
#gnb .btnMenu {position:absolute; top:-8px; right:-8px; z-index:100; width:30px; height:30px; text-indent:-9999px; background:url("../images/common/btn-menu.svg") no-repeat right top/100%}
#gnb .btnMenu span {display:inline-block; padding-right:20px; font-size:14px; font-weight:700; color:#fff; background:url("../images/common/ico-close.svg") no-repeat right center}
#gnb .btnMenu p {display:none} 
#gnb > ul {position:absolute; top:0; left:0; bottom:0; width:100%; overflow-y:auto; padding-top:20px; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s}
#gnb > ul > li > a {display:block; position:relative; padding:0 35px 0 50px; white-space:nowrap; line-height:46px; font-weight:400; color:#B1B1B1}
#gnb > ul > li > a span {display:flex; align-items:center; justify-content:center; position:absolute; top:50%; left:15px; width:20px; height:20px; transform:translate(0, -50%); -webkit-transform:translate(0, -50%); -moz-transform:translate(0, -50%)}
#gnb > ul > li > a span img {max-height:100%; max-width:100%}
#gnb > ul > li > a span img + img {display:none}
#gnb > ul > li:has(ul) > a {background:url("../images/common/ico-arrow.svg") no-repeat right 18px center/10px auto}
#gnb > ul > li:has(ul).curr > a {color:#F8F8F8; background:url("../images/common/ico-arrow-on.svg") no-repeat right 18px center/10px auto}
#gnb > ul > li > ul {display:none; padding:5px 0}
#gnb > ul > li > ul > li > a {display:block; padding-left:50px; line-height:36px; font-size:14px; color:#fff}
#gnb > ul > li > ul > li.curr > a {background:#2C67BF}
#gnb > ul > li.curr > a {font-weight:600; color:#F8F8F8}
#gnb > ul > li.curr > a span img {display:none}
#gnb > ul > li.curr > a span img + img {display:block}
#container {display:flex; flex-direction:column; overflow-y:auto; padding:20px; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s}
#container .noticeArea {display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; padding:10px 20px; border-radius:6px; background:#0E1619}
#container .noticeArea p {line-height:1.4; color:#CCC; font-weight:400}
#container .noticeArea p strong {font-weight:600; color:#fff}
#container .noticeArea .btnArea {display:flex; align-items:center}
#container .noticeArea .btnArea .btnAlarm {display:inline-block; padding:0 12px; border-radius:5px; line-height:30px; font-size:13px; color:#fff; font-weight:600; background:#3363AB}
#container .noticeArea .btnArea .btnClose {display:inline-block; margin-left:10px; width:20px; height:30px; text-indent:-9999px; background:url("../images/common/btn-close.svg") no-repeat center/14px}
#container .contents {padding:20px 20px 30px; flex:1; background:#fff}
@media (max-width: 1399px) {
	#header .gnbWrap .tit {display:flex; align-items:center}
	#header .gnbWrap .tit strong {position:static; padding:0; margin-right:25px; width:auto}
}
@media (min-width: 1161px) {
	#wrap {height:100vh}
	#header .gnbWrap {display:flex !important}
	#gnb {width:180px; transition:width 0.2s; -webkit-transition:width 0.2s; -moz-transition:width 0.2s}
	#gnb.close {width:50px}
	#gnb.close h1 {padding-left:0; justify-content:center}
	#gnb.close h1 img {display:none}
	#gnb.close h1 img + img {display:block}
	#gnb.close .btnMenu {transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg)}
	#gnb.close .btnMenu span {display:none}
	#gnb.close .btnMenu p {display:block; line-height:1.5; font-size:14px; color:#fff}
	#gnb.close .btnMenu p img {display:block}
	#gnb.close > ul > li > a {display:flex; align-items:center; padding-left:50px; background:none !important}
	#wrap:has(#gnb.close) #container {margin-left:50px}
	#container {margin-left:180px; height:calc(100vh - 60px)}
}
@media (max-width: 1160px) {
	#header {position:fixed; top:0; left:0; right:0; justify-content:center; padding:0 20px}
	#header h1 {margin:0; min-width:inherit}
	#header h1 img {height:18px}
	#header .btnMenuH {display:block; position:absolute; top:0; right:10px; bottom:0; width:44px; text-indent:-9999px; background:url("../images/common/btn-menu-w.svg") no-repeat center; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s}
	#header .btnMenuH.on {background:url("../images/common/btn-close-w.svg") no-repeat center}
	#header .gnbWrap {display:flex; align-items:start; flex-direction:column; position:fixed; top:60px; left:-100%; bottom:0; overflow-y:auto; padding:15px 20px; border-top:1px solid #005A7F; width:100%; background:#041620; transition:left 0.2s; -webkit-transition:left 0.2s; -moz-transition:left 0.2s}
	#header .gnbWrap .tit {order:1; margin-bottom:10px; justify-content:space-between; width:100%; flex:none}
	#header .gnbWrap .tit strong {display:block; margin:0; height:auto}
	#header .gnbWrap .tit span {display:inline-block; white-space:nowrap; color:#CBCBCB}
	#header .gnbWrap .util {display:flex; justify-content:start; flex:none; flex-wrap:wrap; order:2; margin:0 -20px 10px; padding:0 20px 20px; border-bottom:1px solid rgba(255,255,255,0.2); width:calc(100% + 40px)}
	#header .gnbWrap .util p {order:2; margin:0 0 0 15px}
	#header .gnbWrap .util p span {margin-left:5px}
	#header .gnbWrap .util .user {order:1; margin:0; padding-left:28px}
	#header .gnbWrap .util .btnLogout {order:4; margin-left:10px}
	#header .gnbWrap .util .btnPlay {order:3; margin-left:15px; font-size:14px}
	#header .gnbWrap .util .btnPlay span {font-size:14px}
	#header .gnbWrap.open {left:0}
	#gnb {order:3; position:static; flex:1; width:100%}
	#gnb .btnMenu {display:none}
	#gnb > ul {position:static; overflow-y:hidden; padding-top:0}
	#gnb > ul > li > a {padding:0 20px 0 40px}
	#gnb > ul > li > a span {left:10px}
	#gnb > ul > li:has(ul) > a {background-position:right 10px center}
	#container {margin-top:60px; min-height:calc(100vh - 60px)}
}
@media (max-width: 767px) {
	#header {padding:0 15px}
	#header .gnbWrap {padding:15px}
	#header .gnbWrap .tit strong {font-size:16px}
	#header .gnbWrap .tit strong span {font-size:16px}
	#header .gnbWrap .tit select {height:30px}
	#header .gnbWrap  .util p {margin:0 0 10px 10px; font-size:12px; min-width:50%}
	#header .gnbWrap  .util p span {margin-left:5px; font-size:12px}
	#header .gnbWrap  .util .user { margin:0 0 10px; padding-left:28px; width:100%; font-size:12px}
	#header .gnbWrap  .util .btnLogout {margin-left:8px; min-width:calc(50% - 4px); font-size:12px}
	#header .gnbWrap  .util .btnPlay {margin:0; font-size:12px; min-width:calc(50% - 4px)}
	#header .gnbWrap  .util .btnPlay span {font-size:12px}
	#header .btnMenuH {right:5px}
	#gnb > ul > li > a {padding:0 25px 0 35px}
	#gnb > ul > li > a span {left:5px}
	#gnb > ul > li:has(ul) > a {}
	#container {padding:15px; min-height:clac(100vh - 60px)}
	#container .noticeArea {display:block; position:relative; margin-bottom:20px; padding:10px 50px 10px 15px}
	#container .noticeArea p {margin:0 0 10px}
	#container .noticeArea .btnArea .btnAlarm {white-space:nowrap}
	#container .noticeArea .btnArea .btnClose {position:absolute; top:6px; right:15px}
	#container .contents {padding:15px}
}
/*****----- 페이지 -----*****/

/* 메인 */
.mainContents .boxGrad {padding:15px; border-radius:8px; background:linear-gradient(90deg, #030D9F 0%, #001339 100%)}
.mainContents .top {white-space:nowrap}
.mainContents .top > .v1 {min-width:calc(40% - 15px)}
.mainContents .top > .v1 .titArea {border-color:#ccc}
.mainContents .top > .v1 .titArea h4 {color:#fff}
.mainContents .top > .v1 .titArea div {margin-left:20px}
.mainContents .top > .v1 .titArea div p {line-height:20px; font-size:13px; color:#ccc}
.mainContents .top > .v1 .safetyScore {margin:15px -15px 0}
.mainContents .top > .v1 .safetyScore ul {display:flex}
.mainContents .top > .v1 .safetyScore ul li {position:relative; flex:1; text-align:center}
.mainContents .top > .v1 .safetyScore ul li:before {display:block; content:""; height:12px}
.mainContents .top > .v1 .safetyScore ul li:nth-child(1):before {background:#FF363E}
.mainContents .top > .v1 .safetyScore ul li:nth-child(2):before {background:#FF7A01}
.mainContents .top > .v1 .safetyScore ul li:nth-child(3):before {background:#FAC600}
.mainContents .top > .v1 .safetyScore ul li:nth-child(4):before {background:#00E690}
.mainContents .top > .v1 .safetyScore ul li:nth-child(5):before {background:#01C000}
.mainContents .top > .v1 .safetyScore ul li span {display:block; margin-top:10px; line-height:18px; color:#999}
.mainContents .top > .v1 .safetyScore ul li.on span {font-weight:700}
.mainContents .top > .v1 .safetyScore ul li.on:nth-child(1) span {color:#FF363E}
.mainContents .top > .v1 .safetyScore ul li.on:nth-child(2) span {color:#FF7A01}
.mainContents .top > .v1 .safetyScore ul li.on:nth-child(3) span {color:#FAC600}
.mainContents .top > .v1 .safetyScore ul li.on:nth-child(4) span {color:#00E690}
.mainContents .top > .v1 .safetyScore ul li.on:nth-child(5) span {color:#01C000}
.mainContents .top > .v1 .safetyScore ul li:after {display:block; content:""; position:absolute; top:-8px; left:50%; margin-left:-10px; width:21px; height:28px; background:no-repeat center}
.mainContents .top > .v1 .safetyScore ul li.v1:after {left:5%}
.mainContents .top > .v1 .safetyScore ul li.v2:after {left:27.5%}
.mainContents .top > .v1 .safetyScore ul li.v3:after {left:50%}
.mainContents .top > .v1 .safetyScore ul li.v4:after {left:72.5%}
.mainContents .top > .v1 .safetyScore ul li.v5:after {left:95%}
.mainContents .top > .v1 .safetyScore ul li.on:nth-child(1):after {background-image:url("../images/ico-score01.svg")}
.mainContents .top > .v1 .safetyScore ul li.on:nth-child(2):after {background-image:url("../images/ico-score02.svg")}
.mainContents .top > .v1 .safetyScore ul li.on:nth-child(3):after {background-image:url("../images/ico-score03.svg")}
.mainContents .top > .v1 .safetyScore ul li.on:nth-child(4):after {background-image:url("../images/ico-score04.svg")}
.mainContents .top > .v1 .safetyScore ul li.on:nth-child(5):after {background-image:url("../images/ico-score05.svg")}
.mainContents .top > .v2 {width:calc(17% - 15px)}
.mainContents .top > .v2 .titArea {margin-bottom:0; border-bottom:none}
.mainContents .top > .v2 .titArea h4 {color:#fff}
.mainContents .top > .v2 .cameraNum {display:flex; align-items:center; justify-content:center}
.mainContents .top > .v2 .cameraNum .inBox {display:flex; align-items:center}
.mainContents .top > .v2 .cameraNum .inBox strong {display:block; margin-right:14px; line-height:50px; font-size:40px; font-weight:700; color:#0BEBFF}
.mainContents .top > .v2 .cameraNum .inBox ul li {line-height:20px; color:#fff}
.mainContents .top > .v2 .cameraNum .inBox ul li + li {color:#C4D200}
.mainContents .top > .v3 {min-width:calc(26% - 15px)}
.mainContents .top > .v3 {display:flex; padding:0; flex-wrap:wrap}
.mainContents .top > .v3 dl {flex:1; padding:12px 15px; min-width:50%; max-width:50%}
.mainContents .top > .v3 dl:nth-child(2n) {border-left:1px solid #fff}
.mainContents .top > .v3 dl:nth-child(3),
.mainContents .top > .v3 dl:nth-child(4) {border-top:1px solid #fff}
.mainContents .top > .v3 dl dt {line-height:20px; color:#fff}
.mainContents .top > .v3 dl dd {line-height:20px; color:#6CCCFF; font-weight:700}
.mainContents .top > .v4 {padding:15px 20px; width:calc(17% - 15px); border-color:#8FB3E8}
.mainContents .top > .v4 span {display:block; margin-bottom:3px; line-height:20px; color:#666}
.mainContents .top > .v4 p {margin-bottom:8px; line-height:20px; color:#333; font-weight:600}
.mainContents .top > .v4 p strong {display:inline-block; margin-left:10px; padding-left:35px; vertical-align:top; line-height:25px; font-size:19px; font-weight:700; color:#333; background:no-repeat left center/30px auto}
.mainContents .top > .v4 p strong.v1 {background-image:url("../images/ico-weather01.svg")}
.mainContents .top > .v4 p strong.v2 {background-image:url("../images/ico-weather02.svg")}
.mainContents .top > .v4 p strong.v3 {background-image:url("../images/ico-weather03.svg")}
.mainContents .top > .v4 p strong.v4 {background-image:url("../images/ico-weather04.svg")}
.mainContents .top > .v4 p strong.v5 {background-image:url("../images/ico-weather05.svg")}
.mainContents .top > .v4 p strong.v6 {background-image:url("../images/ico-weather06.svg")}
.mainContents .top > .v4 p strong.v7 {background-image:url("../images/ico-weather07.svg")}
.mainContents .top > .v4 p strong.v8 {background-image:url("../images/ico-weather08.svg")}
.mainContents .top > .v4 p strong.v9 {background-image:url("../images/ico-weather09.svg")}
.mainContents .top > .v4 > div {display:flex; flex-wrap:wrap; margin:0 -5px}
.mainContents .top > .v4 > div dl {display:flex; justify-content:space-between; flex:1; padding:0 5px; min-width:50%; max-width:50%}
.mainContents .top > .v4 > div dl dt {line-height:20px; color:#AAA}
.mainContents .top > .v4 > div dl dd {line-height:20px; color:#53506B}
.mainContents .top > .v4 > div dl:nth-child(3) dd {color:#00A748}
.mainContents .top > .v4 > div dl:nth-child(4) dd {color:#004891}
.mainContents .middle > .v1 {display:flex; flex-direction:column; padding:20px 0; min-width:calc(58% - 10px)}
.mainContents .middle > .v1 .titArea {margin:0 0 20px}
.mainContents .middle > .v1 dl {display:flex; align-items:center; flex:1; white-space:nowrap}
.mainContents .middle > .v1 dl dt {width:calc(16.6666% - 7px); padding:0 20px; border-right:1px solid #CCC; box-sizing:content-box}
.mainContents .middle > .v1 dl dd {padding-left:20px; flex:1; overflow-x:auto}
.mainContents .middle > .v1 dl dd > div {display:flex; flex:1}
.mainContents .middle > .v1 dl dd > div > div {margin-left:6px; flex:1}
.mainContents .middle > .v1 dl dd > div > div:last-child {padding-right:20px}
.mainContents .middle > .v1 dl dd .semiCircChart + strong {color:#666}
.mainContents .middle > .v2 .splitWrap .chartArea {display:flex; flex-direction:column}
.mainContents .middle > .v2 .splitWrap .chartArea h5 {margin-bottom:5px; line-height:16px; font-size:13px; color:#5B6064; font-weight:500}
.mainContents .middle > .v2 .splitWrap .chartArea .chartBox {flex:1}
.mainContents .middle > .v2 .splitWrap table th,
.mainContents .middle > .v2 .splitWrap table td {padding:2px 10px; text-align:left; line-height:16px; font-size:14px; font-weight:600; color:#666}
.mainContents .middle > .v2 .splitWrap table th {padding:5px 10px; color:#999; font-size:13px; font-weight:700}
.mainContents .middle > .v2 .splitWrap table td + td {color:#333}
.mainContents .bottom .legendArea {display:flex; gap:10px 15px; margin-bottom:10px}
.mainContents .bottom .legendArea span {display:block; position:relative; padding-left:15px; line-height:16px; font-size:13px; color:#666}
.mainContents .bottom .legendArea span:before {display:block; content:""; position:absolute; top:50%; left:0; margin-top:-6px; width:12px; height:12px; box-sizing:border-box}
.mainContents .bottom .legendArea.v2 {margin:10px 0 0 0; justify-content:end}
.mainContents .bottom .legendArea.v2 span:before {border-radius:50%}
.mainContents .bottom .legendArea span.on {font-weight:700; color:#000}
.mainContents .bottom > .v1 {min-width:calc(58% - 10px)}

.mainContents .bottom > .v1 .legendArea span.v0:before {background:#000000}  
.mainContents .bottom > .v1 .legendArea span.v1:before {background:#3F5679}  
.mainContents .bottom > .v1 .legendArea span.v2:before {background:#FF8C00}   /* 1 사람넘어짐 - 경고 오렌지 */
.mainContents .bottom > .v1 .legendArea span.v3:before {background:#FFD600}   /* 2 차량상부에 사람있음 - 주황빛 노랑 */
.mainContents .bottom > .v1 .legendArea span.v4:before {background:#007bff}   /* 3 안전장구미착용 - 경고 파랑 */
.mainContents .bottom > .v1 .legendArea span.v5:before {background:#DC3545}   /* 4 화재 - 강렬한 빨강 */
.mainContents .bottom > .v1 .legendArea span.v6:before {background:#00C9A7}   /* 5 안전장구(안전문) - (기존 유지) */
.mainContents .bottom > .v1 .legendArea span.v7:before {background:#990000}   /* 6 보행위반 - 신호등 빨강 */
.mainContents .bottom > .v1 .legendArea span.v8:before {background:#FF4500}   /* 7 고온 - 열정적 주황 */

.mainContents .bottom > .v2 .legendArea span.v0:before {background:#000000}  /*구역별 전체 */
.mainContents .bottom > .v2 .legendArea span.v1:before {background:#4169E1}
.mainContents .bottom > .v2 .legendArea span.v2:before {background:#6A5ACD}
.mainContents .bottom > .v2 .legendArea span.v3:before {background:#4B9CD3}
.mainContents .bottom > .v2 .legendArea span.v4:before {background:#40E0D0}
.mainContents .bottom > .v2 .legendArea span.v5:before {background:#87CEFA}
.mainContents .bottom > .v2 .legendArea span.v6:before {background:#B0E0E6}
.mainContents .bottom > .v2 .legendArea span.v7:before {background:#4A646C}
.mainContents .bottom > .v2 .legendArea span.v8:before {background:#3C3B6E}
.mainContents .bottom > .v2 .legendArea span.v9:before {background:#5A4FCF}
.mainContents .bottom > .v2 .legendArea span.v10:before {background:#2A6191}
.mainContents .bottom > .v3 {min-width:calc(58% - 10px)}
.mainContents .bottom > .v3 .mapArea {border:none; border-radius:0; max-height:390px; min-height:390px; background:none}
.mainContents .bottom > .v3 .legendArea span.v1:before {background:#FF002D}
.mainContents .bottom > .v3 .legendArea span.v2:before {background:#FF9300}
.mainContents .bottom > .v3 .legendArea span.v3:before {background:#FBCE00}
.mainContents .bottom > .v3 .legendArea span.v4:before {background:#00E07C}
.mainContents .bottom > .v3 .legendArea span.v5:before {background:#00A300}
.mainContents .bottom > .v3 .legendArea span.v6:before {background:#A9A9A9}
.mainContents .bottom > .v4 .colTable {overflow-y:auto; height:370px}
.mainContents .chartBox {overflow:hidden; height:200px}
.mainContents .semiCircChart {display:flex; align-items:end; justify-content:center; margin:0 auto; padding:0; list-style-type:none; overflow:hidden; position:relative; width:92px; height:46px}
.mainContents .semiCircChart *,
.mainContents .semiCircChart::before {box-sizing:border-box;}
.mainContents .semiCircChart::before {position:absolute; content:''; width:inherit; height:inherit; border:16px solid #ECECEC; border-bottom:none; border-top-left-radius:46px; border-top-right-radius:46px}
.mainContents .semiCircChart p {position:absolute; top:101%; left:0; z-index:4; width:inherit; height:inherit; border:16px solid; border-top:none; border-bottom-left-radius:46px; border-bottom-right-radius:46px; transform-origin:50% 0; border-color:#B2BDC8; animation:chart 0.5s linear forwards}
.mainContents .semiCircChart span {display:block; line-height:20px; font-size:16px; color:#7A8B98; font-weight:600}
.mainContents .semiCircChart + strong {display:block; margin-top:6px; text-align:center; line-height:20px; font-size:16px; color:#7A8B98; font-weight:500; letter-spacing:-0.05em}

.mainContents .semiCircChart.v1 p {border-color:#FF8C00; animation:chart01 0.5s linear forwards}
.mainContents .semiCircChart.v1 span {color:#FF8C00}
.mainContents .semiCircChart.v2 p {border-color:#FFD600; animation:chart02 0.5s linear forwards}
.mainContents .semiCircChart.v2 span {color:#FFD600}
.mainContents .semiCircChart.v3 p {border-color:#007bff; animation:chart03 0.5s linear forwards}
.mainContents .semiCircChart.v3 span {color:#007bff}
.mainContents .semiCircChart.v4 p {border-color:#DC3545; animation:chart04 0.5s linear forwards}
.mainContents .semiCircChart.v4 span {color:#DC3545}
.mainContents .semiCircChart.v5 p {border-color:#00C9A7; animation:chart04 0.5s linear forwards}
.mainContents .semiCircChart.v5 span {color:#00C9A7}
.mainContents .semiCircChart.v6 p {border-color:#990000; animation:chart04 0.5s linear forwards}
.mainContents .semiCircChart.v6 span {color:#990000}
.mainContents .semiCircChart.v7 p {border-color:#FF4500; animation:chart04 0.5s linear forwards}
.mainContents .semiCircChart.v7 span {color:#FF4500}

@keyframes chart {0% {transform:rotateZ(0)} 100% {transform:rotateZ(180deg)}}
@media (max-width: 1399px) {
	.mainContents .top {flex-wrap:wrap}
	.mainContents .top > .v1,
	.mainContents .top > .v2,
	.mainContents .top > .v3,
	.mainContents .top > .v4 {width:auto; min-width:inherit; max-width:inherit}
	.mainContents .top > .v2 {max-width:180px}
	.mainContents .top > .v4 {max-width:210px}
	.mainContents .middle {flex-direction:column}
	.mainContents .middle > .v1,
	.mainContents .middle > .v2 {min-width:100%; max-width:100%}
	.mainContents .bottom {flex-wrap:wrap}
	.mainContents .bottom > .v1,
	.mainContents .bottom > .v2 {min-width:calc(50% - 10px); max-width:calc(50% - 10px)}
	.mainContents .bottom > .v3,
	.mainContents .bottom > .v4 {min-width:100%; max-width:100%}
	.mainContents .bottom > .v4 .colTable {height:auto}
}
@media (max-width: 1160px) {
	.mainContents .bottom .legendArea {flex-wrap:wrap}
	/* .mainContents .top {flex-direction:column} */
	.mainContents .top > .v1 {width:100%; min-width:100%; max-width:100%}
	.mainContents .top > .v2,
	.mainContents .top > .v3,
	.mainContents .top > .v4 {width:calc(33.3333% - 10px); min-width:calc(33.3333% - 10px); max-width:calc(33.3333% - 10px)}
}
@media (max-width: 767px) {
	.mainContents .top {flex-direction:row}
	.mainContents .top > .v2 {width:40%; min-width:40%; max-width:40%}
	.mainContents .top > .v3 {width:inherit; min-width:inherit; max-width:inherit}
	.mainContents .top > .v4 {width:100%; min-width:100%; max-width:100%}
	.mainContents .middle > .v1 {padding:15px 0}
	.mainContents .middle > .v1 .titArea {margin:0 0 15px}
	.mainContents .middle > .v1 dl dt {padding:0 15px}
	.mainContents .middle > .v1 dl dd {padding-left:15px}
	.mainContents .middle > .v1 dl dd > div > div:last-child {padding-right:15px}
	.mainContents .bottom > .v1,
	.mainContents .bottom > .v2 {min-width:100%; max-width:100%}
	.mainContents .bottom > .v3 .searchArea > div {position:relative}
	.mainContents .bottom > .v3 .searchArea > div .right {position:absolute; top:0; right:0; width:auto}
	.mainContents .bottom .legendArea {gap:8px}
	.mainContents .semiCircChart {width:80px; height:40px}
	.mainContents .semiCircChart::before {border-top-left-radius:40px; border-top-right-radius:40px}
	.mainContents .semiCircChart p {border-bottom-left-radius:40px; border-bottom-right-radius:40px}
	.mainContents .semiCircChart span {line-height:20px; font-size:14px}
	.mainContents .semiCircChart + strong {line-height:20px; font-size:14px}
}
@media (max-width: 650px) {
	.mainContents .middle > .v1 dl {display:block}
	.mainContents .middle > .v1 dl dt {margin:0 0 20px; padding:0 0 20px; border:none; border-bottom:1px solid #CCC; width:100%}
	.mainContents .middle > .v1 dl dd {padding-left:0; flex-wrap:wrap; gap:5px}
	.mainContents .middle > .v1 dl dd > div {padding-left:15px}
	.mainContents .middle > .v2 .splitWrap .chartArea .chartBox img {height:100px}
}
@media (max-width: 500px) {
	.mainContents .top > .v2,
	.mainContents .top > .v3 {width:100%; min-width:100%; max-width:100%}
	.mainContents .top > .v2 {display:flex; justify-content:space-between}
	.mainContents .top > .v2 .titArea {padding-bottom:0}
}
@media (max-width: 767px) and (min-width: 400px) {
	.mainContents .top > .v4 {position:relative; padding:15px}
	.mainContents .top > .v4 p {margin-bottom:0}
	.mainContents .top > .v4 > div {position:absolute; top:18px; right:15px; width:150px}
}

/* 로봇홈 */
.robotContents .top  {margin-bottom:20px}
.robotContents .top .box {padding:20px 0}
.robotContents .top .box > strong {display:block; padding:0 20px; line-height:18px; font-size:15px; color:#8F9396}
.robotContents .top .box > div {display:flex; margin-top:10px}
.robotContents .top .box > div dl {flex:1; padding:0 20px}
.robotContents .top .box > div dl + dl {border-left:1px solid #B6C5CE}
.robotContents .top .box > div dl dt {margin-bottom:5px; line-height:20px; font-size:19px; color:#161616; font-weight:700}
.robotContents .top .box > div dl dd p {line-height:28px; font-size:19px; color:#1F6AFF; font-weight:700}
.robotContents .top .box > div dl dd em {line-height:28px; font-size:19px; color:#161616}
.robotContents .top .box > div dl dd select.title {font-size:19px}
.robotContents .top .box > div dl dd .battery {position:relative; display:inline-block; width:45px; height:45px; border-radius:50%; margin:-22px 0 -3px 55px}
.robotContents .top .box > div dl dd .battery span {display:block; position:absolute; top:50%; left:50%; width:38px; height:38px; border-radius:50%; text-align:center; line-height:38px; text-indent:-9999px; transform:translate(-50%, -50%); background:#fff no-repeat center}
.robotContents .middle .box .stationArea {overflow-y:auto; margin:-20px; padding:20px; height:380px}
.robotContents .middle .box .stationArea .inBox {padding:0; border:none}
.robotContents .middle .box .stationArea .inBox > dl > dt {margin-bottom:10px}
.robotContents .middle .box .stationArea .inBox > dl > dd {display:flex; align-items:center; padding:0 22px; border-radius:5px; border:1px solid #0D3A56; height:30px}
.robotContents .middle .box .stationArea .inBox > dl > dd img {margin-right:20px}
.robotContents .middle .box .stationArea .inBox > dl > dd img + img {display:none}
.robotContents .middle .box .stationArea .inBox > dl > dd * {font-size:13px; color:#161616; font-weight:700}
.robotContents .middle .box .stationArea .inBox > dl > dd strong {flex:1}
.robotContents .middle .box .stationArea .inBox > dl > dd + dd {margin-top:4px}
.robotContents .middle .box .stationArea .inBox > dl > dd.on {border-color:#A31A1A}
.robotContents .middle .box .stationArea .inBox > dl > dd.on strong {color:#A31A1A}
.robotContents .middle .box .stationArea .inBox > dl > dd.on img {display:none}
.robotContents .middle .box .stationArea .inBox > dl > dd.on img + img {display:block}
.robotContents .middle .box .noticeList {overflow-y:auto; margin:-20px; height:380px}
.robotContents .middle .box .noticeList ul li {display:flex; align-items:center; padding:0 20px; height:42px; background:#F6F7F8}
.robotContents .middle .box .noticeList ul li:nth-child(2n) {background:#fff}
.robotContents .middle .box .noticeList ul li div {display:flex; flex:1; align-items:center; flex-shrink:1; min-width:0}
.robotContents .middle .box .noticeList ul li p,
.robotContents .middle .box .noticeList ul li span {line-height:1.2; font-size:13px; color:#666}
.robotContents .middle .box .noticeList ul li p {margin-right:5px; flex-shrink:1; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.robotContents .middle .box .noticeList ul li .btn {display:flex; align-items:center; justify-content:center; margin-right:10px; padding:3px; white-space:nowrap}
.robotContents .middle .box .noticeList ul li .btn img {width:15px}
.robotContents .middle .resizeBox {display:flex; flex-direction:column; height:446px}
.robotContents .middle .resizeBox .box {display:flex; flex-direction:column; flex:1; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s}
.robotContents .middle .resizeBox .box .titArea {display:flex; align-items:center}
.robotContents .middle .resizeBox .box .titArea dl {flex:1}
.robotContents .middle .resizeBox .box .titArea dl + dl {margin-left:20px}
.robotContents .middle .resizeBox .box .titArea dl dt {line-height:24px; font-size:15px; font-weight:700; color:#6D6F83}
.robotContents .middle .resizeBox .box .titArea dl dd {line-height:20px; font-size:13px; white-space:nowrap}
.robotContents .middle .resizeBox .box .titArea .btnFull {display:block; margin-left:20px; min-width:26px; height:26px; text-indent:-9999px; background:url("../images/btn-full.svg") no-repeat 0 0/100%}
.robotContents .middle .resizeBox .box .mapArea {flex:1; max-height:290px}
.robotContents .middle .resizeBox + .splitWrap .box {overflow:hidden} 
.robotContents .bottom .listBox {overflow-y:auto; margin:0 -20px -20px; padding:0 20px 20px; height:539px}
.robotContents .bottom .listBox > div {display:flex; position:relative; padding:20px; border-radius:5px; border:1px solid #E3E3E3}
.robotContents .bottom .listBox > div + div {margin-top:15px}
.robotContents .bottom .listBox > div ul {flex:1}
.robotContents .bottom .listBox > div ul li {display:flex; white-space:nowrap}
.robotContents .bottom .listBox > div ul li > * {flex:1; line-height:30px}
.robotContents .bottom .listBox > div ul li strong {font-weight:600; color:#666}
.robotContents .bottom .listBox > div ul li p {font-weight:700; color:#161616}
.robotContents .bottom .listBox > div ul li p span {font-weight:400}
.robotContents .bottom .listBox > div .btnArea {display:flex; align-items:center; justify-content:end; width:34%}
.robotContents .bottom .listBox > div .btnArea span {position:absolute; top:20px; right:20px; line-height:20px; font-size:13px; color:#999}
.robotContents .bottom .listBox > div .btnArea a {display:inline-block; padding-left:35px; line-height:30px; font-size:15px; color:#FF8913; font-weight:700; background:url("../images/ico-del.svg") no-repeat left center/30px}
.robotContents.full {position:relative; flex:1; display:flex; flex-direction:column}
.robotContents.full .middle {margin-top:0; flex:1}
.robotContents.full .middle .resizeBox {position:static; min-width:calc(100% - 325px); height:auto}
.robotContents.full .middle .resizeBox .box .titArea .btnFull {background-image:url("../images/btn-full-on.svg")}
.robotContents.full .middle .resizeBox .box .mapArea {max-height:calc(100vh - 227px)}
.noticeArea + .robotContents.full .middle .resizeBox + .splitWrap .box .stationArea,
.noticeArea + .robotContents.full .middle .resizeBox + .splitWrap .box .noticeList {height:calc(50vh - 163px)}
.noticeArea + .robotContents.full .middle .resizeBox .box .mapArea {max-height:calc(100vh - 299px)}
.robotContents.full .middle .box {height:auto}
.robotContents.full .top,
.robotContents.full .bottom {display:none}
@media (min-width: 1399px) {
	.robotContents.full .middle .resizeBox + .splitWrap {flex-direction:column}
	.robotContents.full .middle .resizeBox + .splitWrap .box {display:flex; flex-direction:column; min-width:100%}
	.robotContents.full .middle .resizeBox + .splitWrap .box .stationArea,
	.robotContents.full .middle .resizeBox + .splitWrap .box .noticeList {height:calc(50vh - 127px)}
}
@media (max-width: 1399px) and (min-width: 1161px) {
	.robotContents .middle .resizeBox {min-width:calc(100% - 325px)}
	.robotContents .middle .resizeBox + .splitWrap {flex-direction:column}
	.robotContents .middle .resizeBox + .splitWrap .box {flex:1; min-width:100%}
	.robotContents .middle .resizeBox + .splitWrap .box .stationArea,
	.robotContents .middle .resizeBox + .splitWrap .box .noticeList {height:146px}
}
@media (max-width: 1160px) {
	.robotContents .middle {flex-direction:column}
	.robotContents .middle .resizeBox {min-width:100%}
	.robotContents .middle .resizeBox + .splitWrap {max-width:100%}
	.robotContents .middle .box .stationArea,
	.robotContents .middle .box .noticeList {height:250px !important}
	.robotContents .bottom .listBox > div .btnArea {margin-left:20px; width:90px}
	.robotContents .bottom .listBox > div {flex-wrap:wrap}
	.robotContents .bottom .listBox > div ul li strong {max-width:40%; min-width:90px}
	.robotContents .bottom .listBox > div .btnArea {display:flex; justify-content:space-between; margin:10px 0 0 0; padding-top:10px; border-top:1px solid #E3E3E3; min-width:100%}
	.robotContents .bottom .listBox > div .btnArea span {position:static}
	.robotContents.full .middle .resizeBox {min-width:100%}
	.robotContents .bottom .listBox {height:auto; max-height:456px; min-height:200px}
	.robotContents .bottom .searchArea + .colTable {overflow-y:auto; max-height:380px}
}
@media (max-width: 767px) {
	.robotContents .top  {margin-bottom:15px}
	.robotContents .top .box {padding:15px 0}
	.robotContents .top .box > strong {padding:0 15px; font-size:14px}
	.robotContents .top .box > div {flex-wrap:wrap; margin-top:10px}
	.robotContents .top .box > div dl:first-child {padding:0 0 10px; margin:0 15px 15px 15px; border-bottom:1px solid #B6C5CE;  min-width:calc(100% - 30px)}
	.robotContents .top .box > div dl {padding:0 15px}
	.robotContents .top .box > div dl + dl {border-left:none}
	.robotContents .top .box > div dl + dl + dl {border-left:1px solid #B6C5CE}
	.robotContents .top .box > div dl dt {font-size:16px}
	.robotContents .top .box > div dl dd p {line-height:22px; font-size:16px}
	.robotContents .top .box > div dl dd em {line-height:22px; font-size:16px}
	.robotContents .top .box > div dl dd select.title {font-size:16px}
	.robotContents .middle .box .stationArea {overflow-y:hidden; margin:-15px; padding:15px; height:auto !important}
	.robotContents .middle .box .noticeList {overflow-y:hidden; margin:-15px; height:auto !important}
	.robotContents .middle .resizeBox .box .titArea {flex-wrap:wrap; gap:10px; position:relative; padding-right:60px}
	.robotContents .middle .resizeBox .box .titArea dl {flex:1; min-width:calc(50% - 20px)}
	.robotContents .middle .resizeBox .box .titArea dl + dl {margin-left:0}
	.robotContents .middle .resizeBox .box .titArea dl dt {line-height:22px; font-size:14px}
	.robotContents .middle .resizeBox .box .titArea .btnFull {margin-left:0; position:absolute; top:0; right:15px}
	.robotContents .bottom .listBox {margin:0; padding:0; height:auto; max-height:inherit; min-height:inherit}
	.robotContents .bottom .listBox > div {padding:15px}
	.robotContents .bottom .listBox > div + div {margin-top:10px}
	.robotContents .bottom .searchArea + .colTable {max-height:inherit; min-height:inherit}
	.robotContents .bottom .searchArea > div {flex-direction:row; justify-content:space-between}
	.robotContents .bottom .searchArea > div > a {width:auto; margin-left:20px}
}

/* 로그인*/
.loginWrap {display:flex; align-items:center; justify-content:center; height:100vh; background:url("../images/common/bg-login.svg") no-repeat center/cover}
.loginWrap .loginBox {padding:48px 50px 50px; border-radius:8px; width:380px; background:linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(12, 26, 52, 0.9) 100%); transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s}
.loginWrap .loginBox h1 {margin-bottom:40px; text-align:center; line-height:1.3}
.loginWrap .loginBox h1 strong {display:flex; align-items:center; justify-content:center; margin-top:7px}
.loginWrap .loginBox h1 strong img {height:17px}
.loginWrap .loginBox h1 p {line-height:25px; font-size:21px; font-weight:300; color:#fff}
.loginWrap .loginBox h1 p span {font-weight:600; font-size:21px}
.loginWrap .loginBox ul {margin-bottom:40px; padding:0 7px}
.loginWrap .loginBox ul li {position:relative}
.loginWrap .loginBox ul li + li {margin-top:12px}
.loginWrap .loginBox ul li input {padding-left:55px; border-radius:0; border-color:#02060b; color:#B3B3B3; color:#fff; background:#02060b}
.loginWrap .loginBox ul li input::-webkit-input-placeholder {color:#B3B3B3}
.loginWrap .loginBox ul li input::-moz-placeholder {color:#B3B3B3}
.loginWrap .loginBox ul li input:-ms-input-placeholder {color:#B3B3B3}
.loginWrap .loginBox ul li input:-moz-placeholder {color:#B3B3B3}
.loginWrap .loginBox ul li:nth-child(1):before,
.loginWrap .loginBox ul li:nth-child(2):before {display:block; content:""; position:absolute; top:0; left:0; width:55px; height:36px; background:#010406 no-repeat center/auto 16px}
.loginWrap .loginBox ul li:nth-child(1):before {background-image:url("../images/ico01.svg")}
.loginWrap .loginBox ul li:nth-child(2):before {background-image:url("../images/ico02.svg")}
.loginWrap .loginBox ul li.checked {display:flex; justify-content:space-between; margin-top:20px}
.loginWrap .loginBox ul li.checked label {padding-left:30px; color:#CBCBCB}
.loginWrap .loginBox ul li.checked input[type=checkbox]:checked + label {background-image:url("../images/checkbox-on-w.svg")}
.loginWrap .loginBox ul li.checked a {display:block; line-height:24px; color:#CBCBCB; text-decoration:underline}
.loginWrap .loginBox .btn {width:100%; font-weight:600}
@media (max-width: 767px) {
	.loginWrap .loginBox {padding:30px 35px 35px; width:300px}
	.loginWrap .loginBox h1 {margin-bottom:30px}
	.loginWrap .loginBox h1 strong {margin-top:5px}
	.loginWrap .loginBox h1 strong img {height:12px}
	.loginWrap .loginBox h1 p {line-height:22px; font-size:18px}
	.loginWrap .loginBox h1 p span {font-size:18px}
	.loginWrap .loginBox ul {margin-bottom:30px; padding:0 5px}
	.loginWrap .loginBox ul li + li {margin-top:10px}
	.loginWrap .loginBox ul li.checked {margin-top:15px}
}

/* 리스트(지도) */
.mapWrap {display:flex}
.mapWrap .mapArea {width:37.5%; min-width:37.5%; min-height:535px}
.mapWrap > * {flex:1; padding-left:20px; width:62.5%}
.mapArea {overflow:hidden; position:relative; max-width:100%; border-radius:8px; border:1px solid #DBDBDB; background:#F7F7FA}
.mapArea .icoCamera {position:absolute; display:flex; align-items:center; padding-left:5px; width:46px; height:30px; font-size:11px; color:#fff; background:no-repeat 0 0/100%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%)}
.mapArea .icoCamera.v1 {background-image:url("../images/ico-camera01.svg")}
.mapArea .icoCamera.v2 {background-image:url("../images/ico-camera02.svg")}
.mapArea .icoCamera.v3 {background-image:url("../images/ico-camera03.svg")}
.mapArea .icoCamera.v4 {background-image:url("../images/ico-camera04.svg")}
.mapArea .icoCamera.v5 {background-image:url("../images/ico-camera05.svg")}
.mapArea .icoCamera.v6 {background-image:url("../images/ico-camera06.svg")}
@media (max-width: 767px){
	.mapWrap {display:block !important}
	.mapWrap .mapArea {width:100%; min-width:100%; min-height:290px}
	.mapWrap > * {padding:15px 0 0 0; width:100%}
	.mapArea .icoCamera {padding-left:5px; width:46px; height:30px; font-size:11px}
}

/* 지도 추가 */
.mapWrap.v2 .mapArea {width:546px; height:514px; min-height:auto; background:#dbdbdb url("../images/img-none-map.svg") no-repeat center/cover}
.mapWrap.v2 .mapArea img {display:block; width:100%}
.mapWrap.v2 .mapArea:has(img) {height:auto}
.mapWrap.v2 .mapArea + * {flex:1; margin-left:20px} 
.mapArea.full {width:100%; max-width:100%}
.mapSize {position:absolute; top:15px; right:15px; z-index:100}
.mapSize a {display:block; width:24px; height:24px; text-indent:-9999px; background:#fff url("../images/ico-plus.svg") no-repeat center/100%}
.mapSize a + a {margin-top:4px; background-image:url("../images/ico-minus.svg")}
@media (max-width: 767px){
	.mapWrap.v2 .mapArea {width:100%; height:290px}
	.mapWrap.v2 .mapArea + * {margin:0} 
}

/* 슬라이더 추가 */
.inspArea > dl + dl {margin-top:25px; padding-top:25px; border-top:2px solid #aaa}
.inspArea > dl > dt {display:flex; align-items:center; margin-bottom:20px}
.inspArea > dl > dt select {width:160px}
.inspArea > dl > dt span {display:block; margin-left:15px; line-height:30px; font-size:14px; font-weight:300}
.inspArea > dl > dd {padding-left:20px}
.inspArea > dl > dd dl + dl {margin-top:15px}
.inspArea > dl > dd dl dt {display:flex; justify-content:space-between; margin-bottom:10px}
.inspArea > dl > dd dl dt select {width:200px}
.inspArea > dl > dd dl dd ul {border-radius:4px; border:1px solid #dbdbdb}
.inspArea > dl > dd dl dd ul li {display:flex; padding:0 20px}
.inspArea > dl > dd dl dd ul li + li {border-top:1px solid #dbdbdb}
.inspArea > dl > dd dl dd ul li strong {display:block; border-right:1px solid #dbdbdb; width:140px; line-height:40px; font-size:14px}
.inspArea > dl > dd dl dd ul li > div {position:relative; margin:0 100px 0 20px; flex:1; height:40px}
.inspArea > dl > dd dl dd ul li > div > div {position:static; margin-top:17px; height:6px}
.inspArea > dl > dd dl dd ul li > div > div span {margin-top:15px}
.inspArea > dl > dd dl dd ul li > div > div input {position:absolute; top:5px; left:calc(100% + 20px); width:60px; height:30px}
.inspArea > dl > dd dl dd ul li > div > div em {position:absolute; top:5px; left:calc(100% + 85px); display:block; width:15px; line-height:30px; font-size:13px}
.inspArea > dl > dd .btnArea {margin-top:20px}
.inspArea > dl > dd .btnArea .btn {width:100%}

/* 레포트 팝업 */
.reportArea {overflow-y:auto; border-radius:4px; border:1px solid #ddd}
.reportInput {padding-top:20px}
.reportInput dl {display:flex}
.reportInput dl dt {display:flex; align-items:center; margin-right:10px; padding:0 15px; border-radius:4px; color:#161616; font-weight:600; background:#F6F6F6}
.reportInput dl dd {display:flex; flex:1}
.reportInput dl dd textarea {flex:1; margin-right:5px; height:85px}
.reportInput dl dd .btnArea {display:flex; flex-direction:column}
.reportInput dl dd .btnArea .btn + .btn {margin-top:5px}
@media (max-width: 767px){
	.reportInput {padding-top:15px}
	.reportInput dl dt {margin-right:8px; padding:0 12px}
	.reportInput dl dd textarea {height:76px}
}

/* 미리보기 팝업 */
.stationArea {display:flex; flex-direction:column; min-width:400px; max-width:100%}
.stationArea > h4 {margin-bottom:10px; line-height:20px; font-weight:400}
.stationArea > h4 span {color:#AAA}
.stationArea .inBox {padding:20px; flex:1; border-radius:8px; border:1px solid #E1E1E1}
.stationArea .inBox > dl {padding-bottom:16px; border-bottom:1px solid #E1E1E1}
.stationArea .inBox > dl + dl {margin-top:16px}
.stationArea .inBox > dl > dt {margin-bottom:30px; line-height:26px; font-weight:400}
.stationArea .inBox > dl > dt > span {color:#AAA}
.stationArea .inBox > dl > dt em {display:inline-block; margin-right:6px; border-radius:50%; border:1px solid #333; width:26px; text-align:center; line-height:24px; font-size:13px; color:#333}
.stationArea .inBox > dl > dt > dl {display:flex; align-items:center; padding-left:32px}
.stationArea .inBox > dl > dt > dl dd {margin-left:10px; flex:1}
.stationArea .inBox > dl > dd + dd {margin-top:25px}
.stationArea .inBox > dl > dd .labelArea {padding-left:113px; margin-top:10px}
.stationArea .inBox > dl > dd dl {display:flex}
.stationArea .inBox > dl > dd dl dt {margin-right:25px; width:88px; line-height:22px; font-size:16px; font-weight:700}
.stationArea .inBox > dl > dd dl dt span {display:block; line-height:20px; font-size:13px; font-weight:400}
.stationArea .inBox > dl > dd dl dd {display:flex; align-items:center; flex:1; position:relative; padding:14px; border:1px solid #00303F; border-radius:6px}
.stationArea .inBox > dl > dd dl dd strong {display:block; position:absolute; top:-10px; left:50%; padding:0 10px; line-height:20px; font-size:13px; font-weight:700; color:#00303F; background:#fff; transform:translate(-50%, 0); -webkit-transform:translate(-50%, 0); -moz-transform:translate(-50%, 0)}
.stationArea .inBox > dl > dd dl dd div {flex:1}
.stationArea .inBox > dl > dd dl dd div p {display:flex; justify-content:space-between}
.stationArea .inBox > dl > dd dl dd div p span {line-height:20px; font-size:13px; color:#00303F; font-weight:700}
.stationArea .inBox > dl > dd dl dd div p em {line-height:20px; font-weight:700}
.stationArea .inBox > dl > dd dl dd + dd {margin-left:10px; border-color:#606060}
.stationArea .inBox > dl > dd dl dd + dd strong,
.stationArea .inBox > dl > dd dl dd + dd div p span {color:#606060}
@media (max-width: 767px){
	.stationArea {min-width:inherit}
	.stationArea > h4 {margin-bottom:10px; line-height:20px; font-weight:400}
	.stationArea > h4 span {color:#AAA}
	.stationArea .inBox {padding:15px}
	.stationArea .inBox > dl {padding-bottom:12px}
	.stationArea .inBox > dl + dl {margin-top:12px}
	.stationArea .inBox > dl > dt {margin-bottom:20px; line-height:24px}
	.stationArea .inBox > dl > dt em {margin-right:5px; width:24px; line-height:22px; font-size:12px}
	.stationArea .inBox > dl > dd + dd {margin-top:20px}
	.stationArea .inBox > dl > dd .labelArea {padding-left:0; margin-top:10px}
	.stationArea .inBox > dl > dd dl {flex-wrap:wrap}
	.stationArea .inBox > dl > dd dl dt {margin:0 0 15px; width:100%; font-size:15px}
	.stationArea .inBox > dl > dd dl dt span {line-height:18px}
	.stationArea .inBox > dl > dd dl dd {padding:12px; min-width:calc(50% - 5px)}
}

/* 작업추가 */
.sliderBox {display:flex; align-items:center}
.sliderBox .slider {flex:1; border:none; border-radius:3px; height:6px; background:#EBEBEB}
.sliderBox .slider div {background:#306CC6}
.sliderBox .slider span {top:50%; margin-top:-8px; border-radius:50%; border:3px solid #306CC6; width:16px; height:16px; background:#fff}
.sliderBox input {margin:0 5px 0 10px; width:70px}
.sliderBox em {width:24px}
.addTaskArea {margin-top:30px; padding-top:30px; border-top:1px solid #aaa}
.addTaskArea > .btn {margin-top:10px; width:100%}
.addTaskArea > .areaAddWrap > div {padding:15px; border-radius:8px; border:1px solid #E1E1E1; background:#FAFAFA}
.addTaskArea > .areaAddWrap > div + div {margin-top:20px}
.addTaskArea > .areaAddWrap > div > .top {display:flex; justify-content:space-between; margin-bottom:15px}
.addTaskArea > .areaAddWrap > div > .top div {display:flex}
.addTaskArea > .areaAddWrap > div > .top div strong {display:flex; align-items:center; justify-content:center; width:35px; height:30px; background:#EDEDED}
.addTaskArea > .areaAddWrap > div > .top div strong span {display:inline-block; border-radius:50%; border:1px solid #333; width:22px; height:22px; line-height:20px; text-align:center; font-size:12px; color:#333; background:#fff}
.addTaskArea > .areaAddWrap > div > .top div .btnArea {display:flex; margin-left:5px; width:66px; height:30px; background:#EDEDED url("../images/bg-ud.svg") no-repeat center}
.addTaskArea > .areaAddWrap > div > .top div .btnArea a {flex:1; opacity:0}
.addTaskArea > .areaAddWrap > div > .top div .btn {padding:0 12px; line-height:28px}
.addTaskArea > .areaAddWrap > div > .btn {margin-top:10px; width:100%}
.addTaskArea > .areaAddWrap > div .inputList .txt {color:#aaa}
.addTaskArea > .areaAddWrap > div .inspAddWrap {margin-top:20px}
.addTaskArea > .areaAddWrap > div .inspAddWrap > div {padding:15px; border-radius:6px; border:1px solid #C6C6C6; background:#F4F6F7}
.addTaskArea > .areaAddWrap > div .inspAddWrap > div + div {margin-top:15px}
.addTaskArea > .areaAddWrap > div .inspAddWrap > div .top {display:flex; justify-content:end; margin-bottom:12px}
.addTaskArea > .areaAddWrap > div .inspAddWrap > div .top .btn {padding:0 12px; line-height:28px}
.addTaskArea > .areaAddWrap > div .inspAddWrap > div .searchBox {margin-bottom:12px}
.addTaskArea > .areaAddWrap > div .inspAddWrap > div .labelArea {margin-bottom:26px}
.addTaskArea > .areaAddWrap > div .inspAddWrap > div .line {display:flex; justify-content:space-between}
.addTaskArea > .areaAddWrap > div .inspAddWrap > div .line + .line {margin-top:20px}
.addTaskArea > .areaAddWrap > div .inspAddWrap > div .line > * {max-width:calc(33.3333% - 13px)}
.addTaskArea > .areaAddWrap > div .inspAddWrap > div .line dl dt {margin-bottom:5px; line-height:20px; font-size:16px; color:#00303F; font-weight:500}
.addTaskArea > .areaAddWrap > div .inspAddWrap > div .line dl dd {display:flex}
.addTaskArea > .areaAddWrap > div .inspAddWrap > div .line dl dd input {flex:1; border-color:#CCC; text-align:center; height:35px}
.addTaskArea > .areaAddWrap > div .inspAddWrap > div .line dl dd span {margin-left:3px; color:#666}
.addTaskArea > .areaAddWrap > div .inspAddWrap > div .line dl dd .btnUD {display:flex; flex-direction:column; margin-left:6px; width:24px; height:35px; background:url("../images/bg-ud02.svg") no-repeat center}
.addTaskArea > .areaAddWrap > div .inspAddWrap > div .line dl dd .btnUD button {flex:1; height:50%; opacity:0}
.addTaskArea > .areaAddWrap > div .inspAddWrap > div .line dl dd .btnPM {display:flex; border-radius:5px; background:#fff}
.addTaskArea > .areaAddWrap > div .inspAddWrap > div .line dl dd .btnPM input {border:none; border-radius:0; flex:1}
.addTaskArea > .areaAddWrap > div .inspAddWrap > div .line dl dd .btnPM button {border:none; width:35px; height:35px; text-indent:-9999px; background:no-repeat center}
.addTaskArea > .areaAddWrap > div .inspAddWrap > div .line dl dd .btnPM .btnU {background-image:url("../images/btn-p.svg")}
.addTaskArea > .areaAddWrap > div .inspAddWrap > div .line dl dd .btnPM .btnD {background-image:url("../images/btn-m.svg")}
.addTaskArea > .areaAddWrap > div:first-child > .top div .btnArea,
.addTaskArea > .areaAddWrap > div:last-child > .top div .btnArea {width:30px}
.addTaskArea > .areaAddWrap > div:first-child > .top div .btnArea {background-position:right 8px center}
.addTaskArea > .areaAddWrap > div:last-child > .top div.btnArea {background-position:left 8px center}
.addTaskArea > .areaAddWrap > div:first-child > .top div .btnArea a {display:none}
.addTaskArea > .areaAddWrap > div:first-child > .top div .btnArea a + a{display:block}
.addTaskArea > .areaAddWrap > div:last-child > .top div.btnArea a + a {display:none}
.addTaskArea > .areaAddWrap > div:first-child:last-child > .top div .btnArea {width:0; background:none}
.addTaskWrap {overflow-y:auto; padding:25px 30px 10px 10px; margin:-25px -30px -10px 20px !important}
@media (max-width: 767px){
	.sliderBox {margin-left:-10px; padding-left:10px}
	.addTaskArea {margin-top:20px; padding-top:20px}
	.addTaskArea > .areaAddWrap > div {padding:12px}
	.addTaskArea > .areaAddWrap > div + div {margin-top:15px}
	.addTaskArea > .areaAddWrap > div > .top {margin-bottom:10px}
	.addTaskArea > .areaAddWrap > div > .top div {display:flex}
	.addTaskArea > .areaAddWrap > div > .top div strong {display:flex; align-items:center; justify-content:center; width:35px; height:30px; background:#EDEDED}
	.addTaskArea > .areaAddWrap > div > .top div strong span {display:inline-block; border-radius:50%; border:1px solid #333; width:22px; height:22px; line-height:20px; text-align:center; font-size:12px; color:#333; background:#fff}
	.addTaskArea > .areaAddWrap > div > .top div .btnArea {display:flex; margin-left:5px; width:66px; height:30px; background:#EDEDED url("../images/bg-ud.svg") no-repeat center}
	.addTaskArea > .areaAddWrap > div > .top div .btnArea a {flex:1; opacity:0}
	.addTaskArea > .areaAddWrap > div > .top div .btn {padding:0 12px; line-height:28px}
	.addTaskArea > .areaAddWrap > div > .btn {margin-top:10px; width:100%}
	.addTaskArea > .areaAddWrap > div .inputList .txt {color:#aaa}
	.addTaskArea > .areaAddWrap > div .inspAddWrap {margin-top:20px}
	.addTaskArea > .areaAddWrap > div .inspAddWrap > div {padding:10px}
	.addTaskArea > .areaAddWrap > div .inspAddWrap > div + div {margin-top:10px}
	.addTaskArea > .areaAddWrap > div .inspAddWrap > div .top {margin-bottom:10px}
	.addTaskArea > .areaAddWrap > div .inspAddWrap > div .searchBox {margin-bottom:10px}
	.addTaskArea > .areaAddWrap > div .inspAddWrap > div .labelArea {margin-bottom:15px}
	.addTaskArea > .areaAddWrap > div .inspAddWrap > div .line + .line {display:block; margin-top:12px}
	.addTaskArea > .areaAddWrap > div .inspAddWrap > div .line > * {max-width:100%}
	.addTaskArea > .areaAddWrap > div .inspAddWrap > div .line dl + dl {margin-top:12px}
	.addTaskArea > .areaAddWrap > div .inspAddWrap > div .line dl dt {font-size:15px}
	.addTaskWrap {overflow-y:hidden; padding:0 0 0 10px; margin:20px 0 0 -10px !important; max-height:inherit !important; width:auto}
}

.emergency {position:absolute; bottom:40px; left:0; z-index:999999999; width:180px; height:100px; background:url("../images/icon-emer.png") no-repeat center/80px}
.emergency p {position:absolute; top:14px; left:50%; width:50px; height:50px; margin-left:-25px}
.emergency p span {display:block; position:absolute; top:50%; left:50%; width:150%; height:150%; border-radius:50%; background:#FF363E; transform:translate(-50%, -50%) scale(0); -webkit-transform:translate(-50%, -50%) scale(0); -moz-transform:translate(-50%, -50%) scale(0); opacity:1; animation:emer 1s infinite}
.emergency p span + span {animation-delay:0.25s}
.emergency p span + span + span {animation-delay:0.5s}
.emergency p span + span + span + span {animation-delay:0.75s}
@keyframes emer {
  100% {transform:translate(-50%, -50%) scale(1); -webkit-transform:translate(-50%, -50%) scale(1); -moz-transform:translate(-50%, -50%) scale(1); opacity:0.4}
}

/* 긴급출동 */
.mapWrap.v3 {display:flex; flex-wrap:wrap}
.mapWrap.v3 .searchArea {margin-bottom:20px; min-width:100%}
.mapWrap.v3 .searchArea > div {justify-content:start}
.mapWrap.v4 > .mapArea {width:546px; height:580px; min-height:auto}
.btnBox {display:flex; justify-content:center; gap:5px}
.btnBox .btnControl {display:flex; flex-wrap:wrap; justify-content:space-between; gap:5px; width:120px; height:120px; overflow:hidden}
.btnBox .btnControl > a {display:flex; flex:1; border:1px solid #ddd; text-indent:-9999px; max-width:30%; min-width:30%}
.btnBox .btnControl > a em {display:block; flex:1; background:url("../images/ico-btn.png") no-repeat center}
.btnBox .btnControl > a.btnReset {flex:1; max-width:30%; min-width:30%; background:#9F9F9F url("../images/ico-reset.svg") no-repeat center/35px}
.btnBox .btnControl > a.btnReset em {opacity:0}
.btnBox .btnControl > a.btnA em {transform:rotate(225deg)}
.btnBox .btnControl > a.btnB em {transform:rotate(-90deg)}
.btnBox .btnControl > a.btnC em {transform:rotate(-45deg)}
.btnBox .btnControl > a.btnD em {transform:rotate(180deg)}
.btnBox .btnControl > a.btnF em {transform:rotate(135deg)}
.btnBox .btnControl > a.btnG em {transform:rotate(90deg)}
.btnBox .btnControl > a.btnH em {transform:rotate(45deg)}
.btnBox .btnZoom {display:flex; flex-direction:column; gap:5px; width:56px; height:120px}
.btnBox .btnZoom > a {display:flex; flex:1; border:1px solid #ddd; text-indent:-9999px}
.btnBox .btnZoom > a.btnI {background:url("../images/ico-zoom-in.png") no-repeat center}
.btnBox .btnZoom > a.btnJ {background:url("../images/ico-zoom-out.png") no-repeat center}
.flexWrap {display:flex; gap:8px}
.flexWrap .mapArea {flex:1; height:auto !important; min-height:inherit !important; width:auto !important; min-width:inherit !important}
.flexWrap .sliderBox {margin-top:5px}
.flexWrap .sliderBox input {margin-right:0}
@media (min-width: 768px){
	.mapWrap.v3 > .mapArea {width:60%; min-width:60%}
	.mapWrap.v3 > * {padding-left:20px; width:40%}
}
@media (max-width: 767px){
	.mapWrap.v3 .searchArea {padding:15px}
}

/* 숙박 */
.scrollD {overflow-y:auto}
.hide {position:absolute; top:-9999px; left:-9999px}
.accoContents {display:flex; flex:1; position:relative; padding-right:320px}
.accoContents .contantWrap {display:flex; flex-direction:column; flex:1}
.accoContents .contantWrap .infoArea {position:relative; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:15px; position:relative; margin-bottom:22px; padding:15px 20px; border-radius:6px; background:#0E1619}
.accoContents .contantWrap .infoArea * {white-space:nowrap}
.accoContents .contantWrap .listWrap {flex:1}
.accoContents .contantWrap .listWrap > ul {display:flex; flex-wrap:wrap; gap:10px}
.accoContents .contantWrap .listWrap > ul > li {display:flex; flex-direction:column; position:relative; padding:15px; border-radius:6px; border:1px solid #dfdfdf; width:calc(20% - 8px); max-width:calc(20% - 8px); background:#fdfdfd}
.accoContents .contantWrap .listWrap > ul > li .number {display:block; position:relative; padding-left:15px; font-weight:700; line-height:24px}
.accoContents .contantWrap .listWrap > ul > li .number:before {display:block; content:""; position:absolute; top:50%; left:0; border-radius:50%; margin-top:-3px; opacity:0.2; width:6px; height:6px; animation:status 0.6s infinite; -ms-animation:status 0.6s infinite; -moz-animation:status 0.6s infinite; -webkit-animation:status 0.6s infinite}
.accoContents .contantWrap .listWrap > ul > li .number.v1:before {background:#00C9A7}
.accoContents .contantWrap .listWrap > ul > li .number.v2:before {background:#DC3545}
.accoContents .contantWrap .listWrap > ul > li .label {position:absolute; top:15px; right:15px; padding:0 8px; height:24px; line-height:22px}
.accoContents .contantWrap .listWrap > ul > li .roopType {margin-left:15px; font-size:14px}
.accoContents .contantWrap .listWrap > ul > li .bot {margin-top:auto; padding-top:10px}
.accoContents .contantWrap .listWrap > ul > li .bot p {line-height:1.3; color:#2C67BF; font-weight:600; font-size:14px}
.accoContents .contantWrap .listWrap > ul > li .bot strong {display:block; flex:1; line-height:1.3; color:#000}
.accoContents .contantWrap .listWrap > ul > li .bot .btnFlex {margin-top:10px}
.accoContents .contantWrap .listWrap > ul > li .bot .btnFlex .btn {line-height:30px; font-size:13px}
.accoContents .contantWrap .listWrap > ul > li .bot .icoArea {display:flex}
.accoContents .contantWrap .listWrap > ul > li .bot .icoArea img {display:block; width:20px; height:20px}
.accoContents .contantWrap .listWrap > ul > li .temp {display:flex; align-items:center; justify-content:end; margin-top:-5px}
.accoContents .contantWrap .listWrap > ul > li .temp span {display:block; padding-left:16px; line-height:16px; font-size:13px; background:url("../images/user-set.png") no-repeat left center/auto 16px}
.accoContents .contantWrap .listWrap > ul > li .temp span + span {position:relative; margin-left:10px; padding-left:14px; background-image:url("../images/ico-temp.png")}
.accoContents .contantWrap .listWrap > ul > li .temp span + span:before {display:block; content:""; position:absolute; top:50%; left:-7px; border-radius:50%; margin-top:-2px; width:4px; height:4px; background:#aaa}
.accoContents .contantWrap .infoArea .alloStatus {display:flex; align-items:center}
.accoContents .contantWrap .infoArea .alloStatus dl {display:flex; margin-right:10px}
.accoContents .contantWrap .infoArea .alloStatus dl dt {margin-right:10px; font-weight:700; color:#fff}
.accoContents .contantWrap .infoArea .alloStatus dl dd {color:#ccc}
.accoContents .contantWrap .infoArea .alloStatus dl dd + dd {margin-left:10px; padding-left:10px; border-left:1px solid #ccc}
.accoContents .contantWrap .infoArea .alloStatus dl dd span {font-weight:500; color:#fff}
.accoContents .contantWrap .infoArea .searchBox * {height:36px; line-height:34px}
.accoContents .contantWrap .infoArea .btnR {padding:0 16px; line-height:34px}
.accoContents .contantWrap .infoArea .btnR span {font-size:13px}
.accoContents .contantWrap .infoArea .btnR .icoPlus {padding-left:15px}
.accoContents .contantWrap .infoArea .btnR .icoArrow {padding-right:15px}
.accoContents .contantWrap .infoArea .setArea {display:flex; align-items:center; gap:10px}
.accoContents .contantWrap .infoArea .setArea .btnIco {width:36px; height:36px}
.accoContents .contantWrap .infoArea .alloStatusMore {display:none; position:absolute; top:100%; left:0; right:0; border-radius:6px; background:#424242; box-shadow:0 0 10px rgba(0,0,0,0.4)}
.accoContents .contantWrap .infoArea .alloStatusMore dl {display:flex; padding:10px 20px}
.accoContents .contantWrap .infoArea .alloStatusMore dl + dl {border-top:1px solid #555}
.accoContents .contantWrap .infoArea .alloStatusMore dl dt {display:flex; align-items:center;margin-right:15px; line-height:30px; font-weight:500; color:#fff}
.accoContents .contantWrap .infoArea .alloStatusMore dl dt .btnRefresh {display:inline-block; margin-left:10px; width:25px; height:30px; text-indent:-9999px; background:url("../images/ico-reset.svg") no-repeat center}
.accoContents .contantWrap .infoArea .alloStatusMore dl dd {display:flex; flex-wrap:wrap; gap:5px}
.accoContents .contantWrap .infoArea .alloStatusMore dl dd p {padding:0 8px; border:1px solid #555; border-radius:3px; line-height:28px; font-size:13px; color:#ccc}
.accoContents .contantWrap .infoArea .alloStatusMore dl dd p * {font-size:13px; color:#ccc}
.accoContents .contantWrap .infoArea .alloStatusMore dl dd p strong {color:#fff; font-weight:500}
.accoContents .contantWrap .infoArea .set {display:none; position:absolute; top:100%; right:0; border-radius:6px; width:280px; max-height:400px; background:#424242; box-shadow:0 0 10px rgba(0,0,0,0.4)}
.accoContents .contantWrap .infoArea .set .inputList {padding:20px}
.accoContents .contantWrap .infoArea .set .inputList > strong {display:block; margin-bottom:10px; line-height:24px; font-size:18px; font-weight:500; color:#fff}
.accoContents .contantWrap .infoArea .set .inputList > dl + dl {margin-top:15px}
.accoContents .contantWrap .infoArea .set .inputList dl dt {font-weight:500; color:#fff}
.accoContents .contantWrap .infoArea .set .inputList dl dd .checkbox label {color:#ccc; font-size:14px; font-weight:300}
.accoContents .contantWrap .infoArea .set .inputList dl dd .checkbox input[type=checkbox]:checked + label {background-image:url("../images/checkbox-on-w.svg")}
.accoContents .contantWrap .infoArea .set .inputList dl dd .radioCheck {display:flex; overflow:hidden; border-radius:5px; background:#0E1619}
.accoContents .contantWrap .infoArea .set .inputList dl dd .radioCheck span {position:relative; flex:1}
.accoContents .contantWrap .infoArea .set .inputList dl dd .radioCheck span + span {border-left:1px solid #424242}
.accoContents .contantWrap .infoArea .set .inputList dl dd .radioCheck span input {display:block; position:absolute; top:0; left:0; width:100%; height:100%; opacity:0}
.accoContents .contantWrap .infoArea .set .inputList dl dd .radioCheck span label {display:block; padding:0 10px; text-align:center; line-height:34px; font-size:13px; color:#ccc; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s}
.accoContents .contantWrap .infoArea .set .inputList dl dd .radioCheck span input[type=radio]:checked + label {color:#3363AB; font-weight:700; background:#fff}
.accoContents .contantWrap .infoArea .set .inputList dl dd.flex {justify-content:space-between}
.accoContents .contantWrap .infoArea .set .inputList dl dd.flex .radioCheck span label {line-height:24px; font-size:13px}
.accoContents .contantWrap .infoArea .searchBox {flex:1}
.accoContents .contantWrap .infoArea .searchBox input {max-width:inherit; width:auto}
.accoContents .asideWrap {position:absolute; top:0; right:0; width:300px; height:100%; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s}
.accoContents .asideWrap .btnAside {position:absolute; top:11px; left:15px; z-index:100; overflow:hidden; border-radius:50%; width:35px; height:35px; text-indent:-9999px; background:#fff url("../images/common/btn-menu-b.svg") no-repeat center/100%; transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s}
.accoContents .asideWrap .inBox {display:flex; flex-direction:column; overflow:hidden; height:100%; border-radius:6px; background:#424242; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s}
.accoContents .asideWrap .inBox .titArea {display:flex; align-items:center; justify-content:space-between; position:relative; padding:10px 20px 10px 60px; margin:0; border:none; background:#0E1619}
.accoContents .asideWrap .inBox .titArea h4 {display:flex; align-items:center; color:#fff}
.accoContents .asideWrap .inBox .titArea h4 .label {margin-left:10px}
.accoContents .asideWrap .inBox .titArea .btnSound {display:block; width:20px; height:36px; text-indent:-9999px; background:url("../images/ico-speaker01.png") no-repeat center/20px}
.accoContents .asideWrap .inBox .titArea .soundSet {display:none; position:absolute; top:calc(100% + 2px); right:0; width:100px; height:300px; border-radius:6px; background:#0E1619}
.accoContents .asideWrap .inBox .scrollD {flex:1; max-height:calc(100% - 56px)}
.accoContents .asideWrap .inBox dl {padding:20px}
.accoContents .asideWrap .inBox dl + dl {display:flex; flex-direction:column; margin-top:-20px; flex:1}
.accoContents .asideWrap .inBox dl dt {display:flex; justify-content:space-between; margin-bottom:10px; color:#fff}
.accoContents .asideWrap .inBox dl dt strong {font-weight:700}
.accoContents .asideWrap .inBox dl dt span {font-size:13px}
.accoContents .asideWrap .inBox dl dd table {table-layout:fixed; margin:-8px 0; text-align:left}
.accoContents .asideWrap .inBox dl dd table th,
.accoContents .asideWrap .inBox dl dd table td {padding:8px 5px; font-size:13px; color:#aaa; font-weight:700}
.accoContents .asideWrap .inBox dl dd table tbody tr > *,
.accoContents .asideWrap .inBox dl dd table tfoot tr > * {border-top:1px solid #20363e}
.accoContents .asideWrap .inBox dl dd table tfoot td {text-align:center}
.accoContents .asideWrap .inBox dl dd table th {color:#fff; font-weight:400}
.accoContents .asideWrap .inBox dl + dl dd .list li {display:flex; justify-content:space-between; align-items:center; position:relative; padding:10px 10px 10px 15px; border-left:4px solid #1F6AFF}
.accoContents .asideWrap .inBox dl + dl dd .list li + li {margin-top:2px; border-top:1px solid #20363e}
.accoContents .asideWrap .inBox dl + dl dd .list li strong {display:block; font-size:13px; font-weight:700; color:#fff}
.accoContents .asideWrap .inBox dl + dl dd .list li p span {font-size:13px; color:#ddd}
.accoContents .asideWrap .inBox dl + dl dd .list li p span + span {margin-left:10px}
.accoContents.close .contantWrap .listWrap > ul > li {width:calc(16.66666% - 9px); max-width:calc(16.66666% - 9px)}
@media (max-width: 1500px) {
	.accoContents .contantWrap .infoArea {flex-wrap:wrap}
	.accoContents .contantWrap .infoArea .alloStatus {min-width:100%}
	.accoContents .contantWrap .listWrap > ul > li {width:calc(25% - 8px); max-width:calc(25% - 8px)}
	.accoContents.close .contantWrap .listWrap > ul > li {width:calc(20% - 8px); max-width:calc(20% - 8px)}
}
@media (max-width: 1350px) {
	.accoContents .contantWrap .listWrap > ul > li {width:calc(33.3333% - 7px); max-width:calc(33.3333% - 7px)}
	.accoContents.close .contantWrap .listWrap > ul > li {width:calc(25% - 8px); max-width:calc(25% - 8px)}
}
@media (max-width: 950px) {
	.accoContents:not(.close) .contantWrap .infoArea .setArea {justify-content:end; min-width:100%}
	.accoContents .contantWrap .listWrap > ul > li {width:calc(50% - 5px); max-width:calc(50% - 5px)}
	.accoContents.close .contantWrap .listWrap > ul > li {width:calc(33.3333% - 7px); max-width:calc(33.3333% - 7px)}
}
@media (min-width: 768px) {
	.accoContents.close {padding-right:20px}
	.accoContents.close .asideWrap {overflow:hidden; right:-20px; width:40px}
	.accoContents.close .asideWrap .btnAside {left:4px; border:1px solid #000; transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg)}
	.accoContents.close .asideWrap .inBox {margin-left:20px; width:300px}
}
@media (max-width: 768px) {
	.accoContents .contantWrap .listWrap > ul > li {width:calc(50% - 5px); max-width:calc(50% - 5px)}
	.accoContents.close .contantWrap .listWrap > ul > li {width:calc(50% - 5px); max-width:calc(50% - 5px)}
}
@media (max-width: 767px) {
	.accoContents {padding-right:0; margin-bottom:15px}
	.accoContents .contantWrap .infoArea {gap:10px; padding:15px}
	.accoContents .contantWrap .infoArea .alloStatusMore dl {padding:10px 15px}
	.accoContents .contantWrap .infoArea .set {height:calc(100vh - 280px)}
	.accoContents .contantWrap .infoArea .set .inputList {padding:15px}
	.accoContents .contantWrap .infoArea .set .inputList > dl + dl {margin-top:10px}
	.accoContents .contantWrap .infoArea .btnR {padding:0 12px; line-height:34px}
	.accoContents .asideWrap {position:fixed; top:inherit; left:15px; right:15px; bottom:15px; z-index:999; padding-top:17px; width:auto; max-height:calc(100% - 73px)}
	.accoContents .asideWrap .btnAside {top:0; left:50%; margin-left:-18px; box-shadow:0 0 10px rgba(0,0,0,0.5); transform:rotate(-90deg); -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg)}
	.accoContents .asideWrap .inBox .titArea {padding-left:20px; padding-top:20px}
	.accoContents.close .asideWrap {bottom:calc(-100% + 110px)}
	.accoContents.close .asideWrap .btnAside {transform:rotate(90deg); -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg)}
}
@media (max-width: 500px) {
	.accoContents .contantWrap .infoArea .setArea {min-width:100%}
	.accoContents .contantWrap .infoArea .setArea > .btnR {flex:1; text-align:center}
	.accoContents .contantWrap .infoArea .set {right:inherit; left:0}
}
@media (max-width: 400px) {
	.accoContents .contantWrap .listWrap > ul > li {width:100%; max-width:100%}
	.accoContents.close .contantWrap .listWrap > ul > li {width:100%; max-width:100%}
	.accoContents .contantWrap .infoArea .alloStatus dl {flex-wrap:wrap}
	.accoContents .contantWrap .infoArea .alloStatus dl dd + dd {border-left:none; padding-left:0; margin-left:63px}
}
@-webkit-keyframes status{100% {opacity:1}}
@-ms-keyframes status{100% {opacity:1}}
@-moz-keyframes status{100% {opacity:1}}
@keyframes status{100% {opacity:1}}

.info {display:flex; flex-direction:column; gap:8px; margin-bottom:10px; padding:15px 20px; border-radius:6px; border:1px solid #dfdfdf; background:#fdfdfd}
.info .status {display:flex; gap:15px}
.info .status p {position:relative; padding-left:12px}
.info .status p::before {display:block; content:""; position:absolute; top:50%; left:0; border-radius:50%; margin-top:-3px; width:6px; height:6px; background:#1F6AFF}
.info .status p + p::before {background:#fb6a00}
.info .status p span {font-weight:500}
.info .labelArea .label {display:inline-flex; align-items:center}
.info .labelArea .label em {display:inline-block; border-radius:2px; margin-left:5px; width:20px; text-align:center; line-height:20px; font-size:12px; font-weight:600; color:#fff}
.info .labelArea .label.st3 em {background:#1F6AFF}
.info .labelArea .label.st4 em {background:#fb6a00}
.list {flex:1; margin-bottom:15px}
.list > ul {display:flex; flex-wrap:wrap; gap:10px}
.list > ul > li {display:flex; flex-direction:column; gap:8px; position:relative; padding:15px; border-radius:6px; border:1px solid #2C67BF; width:calc(33.3333% - 7px); max-width:calc(33.3333% - 7px); background:#fdfdfd}
.list > ul > li span {display:block; font-weight:700; line-height:24px}
.list > ul > li p {line-height:1.3; color:#2C67BF; font-weight:600; font-size:14px}
.list > ul > li .icoArea strong {display:block; flex:1; line-height:1.3; color:#000}
.list > ul > li .icoArea {display:flex}
.list > ul > li .icoArea img {display:block; width:20px; height:20px}
.list > ul > li .searchBox select {max-width:inherit; background-color:#fff}
@media (max-width: 767px){
	.list {margin-bottom:0}
	.list > ul > li {width:calc(50% - 5px); max-width:calc(50% - 5px)}
}
@media (max-width: 400px){
	.list > ul > li {width:100%; max-width:100%}
}