/* 로그인 */
.login #section{height:100%;background-image:url(../images/contents/login_bg.png);background-repeat:repeat-x;background-position:center;}
.login .logo{width:11.5rem;height:3.375rem;background:url(../images/common/logo_login.png) no-repeat center/100%;text-indent:-9999rem;}
.login .box{padding:2.5rem 8.125rem;}
.login .bg-login{background-color:#4067b4;padding:2.5rem 3.125rem 3.125rem;}
.login .img{height:calc(50% - 0.625rem);border-radius:0.5rem;background-repeat:no-repeat;}
.login .img-01{background-image:url(../images/contents/login_01.png);background-position:center;background-size:100%;}
.login .img-02{background-color:#fff;}
/* 250106 로그인 팝업 이미지 2025버전으로 변경 및 크기 조정 kdy*/
/* .login .img-02::after{content:'';display:block;width:23.625rem;height:7.4375rem;background:url(../images/contents/login_02.png) no-repeat center/contain;margin:0 auto;} */
.login .img-02::after{content:'';display:block;width:23.625rem;height:13.4375rem;background:url(../images/contents/login_02.png) no-repeat center/contain;margin:0 auto;}
.login .img-02 .h1{position:relative;font-size:3.125rem;color:#4b2106;}
.login .img-02 .h1 i{display:inline-block;font-style:normal;font-size:2.1875rem;vertical-align:top;}

/* 로그인 > 팝업 */
.modal-agree .modal-body{color:#141824;}

/* 종합현황 */
.status #section{padding-bottom:4.375rem;}
/* .status #footer *{bottom:1.5625rem;} */
.status #footer > *{bottom:1.5625rem;}
.status .list-state{height:100%;overflow-y:auto;}
.status .list-state li{border-bottom:1px solid #e3e6ed;padding:0.625rem 0;}
.status .list-state li a{display:flex;align-items:center;border-radius:4px;padding:0.625rem;box-sizing:border-box;}
.status .list-state li a:hover{text-decoration:none;}
.status .list-state li .tit{width:7rem;height:2rem;font-size:0.875rem;line-height:2rem;text-align:center;color:#fff;border-radius:5px;margin-right:0.75rem;}
.status .list-state li .type{width:6rem;height:3rem;font-size:0.75rem;text-align:center;color:#525b75;border-radius:5px;background-color:#f2f4f8;padding:4px 0;box-sizing:border-box;margin-right:0.5rem;}
.status .list-state li .type i{margin:0 auto 2px;}
.status .list-state li .sub{width:100%;font-size:0.875rem;line-height:1.4;color:#a6b1d2;}
.status .list-state li .sub b{display:block;font-size:1rem;font-weight:400;color:#333d5a;overflow:hidden;}
.status .list-state li .sub b span{position:relative;display:block;width:fit-content;max-width:95%;padding-right:0.8125rem;box-sizing:border-box;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.status .list-state li .tag{margin-left:auto;}
.status .list-state li.hover-danger{border:1px solid #ff5c6d;border-radius:4px;background-color:rgba(255,92,109,.05);margin-top:0.625rem;}
.status .list-state li.hover-danger .type{background-color:#fff;}
.status .list-state li.hover-danger .sub b span::after{position:absolute;top:50%;right:0;transform:translateY(-50%);content:'';display:block;width:0.5rem;height:0.5rem;border-radius:100%;background-color:#ff4c5d;}
.status .list-state li.new a{border:1px solid #4f82f8;background-color:rgba(79,130,248,.1);}

/* 종합현황 > 전체사업장 */
.synthesis .num{width:20%;font-size:1.125rem;color:#525b75;text-align:center;padding-top:0.875rem;box-sizing:border-box;}
.synthesis .num b{display:block;font-size:2rem;color:#5297ff;margin-bottom:0.75rem;}
.synthesis .num  + .chart{position:relative;width:80%;}
.synthesis .num  + .chart::before{position:absolute;top:50%;left:0;transform:translate(-50%, -50%);content:'';display:block;width:1px;height:5rem;border:1px dashed #c7cdcc;}
.synthesis .chart .circle{float:left;display:block;width:6.25rem;height:6.25rem;}
.synthesis .chart .list{float:left;display:flex;flex-wrap:wrap;align-items:center;width:calc(100% - 7.75rem);}
.synthesis .chart .list li{position:relative;font-size:0.75rem;line-height:1;padding-left:0.5rem;box-sizing:border-box;margin:3px 0;}
.synthesis .chart .list li::before{position:absolute;top:5px;left:0;content:'';display:block;width:4px;height:4px;border-radius:100%;}
.synthesis .chart .list li.purple::before{background-color:#A51F87;}
.synthesis .chart .list li.red::before{background-color:#E55C10;}
.synthesis .chart .list li.orange::before{background-color:#F6990C;}
.synthesis .chart .list li.green::before{background-color:#009A3B;}
.synthesis .chart .list li.sky::before{background-color:#00D0DE;}
.synthesis .chart .list li.blue::before{background-color:#009BD1;}
.synthesis .chart .list li.wine::before{background-color:#D34EAE;}
.synthesis .chart .list.col3 li{width:33.33%;}
.synthesis .chart .list.col4 li{width:25%;}
.synthesis .table-sm thead tr th{font-weight:600;}
.synthesis .rank{display:inline-block;width:1.125rem;height:1.125rem;border-radius:4px;font-size:0.75rem;font-weight:500;line-height:1.125rem;text-align:center;color:#fff;vertical-align:middle;margin:-2px 0.625rem 0 0;}
.synthesis .border-left-dashed::before{position:absolute;top:50%;left:0;transform:translate(-50%, -55%);content:'';display:block;width:1px;height:90%;border:1px dashed #c7cdcc;}

/* 종합현황 > 개별사업장 */
.individual .custom-card{font-size:0.875rem;text-align:center;}
.individual .custom-card span{color:#333d5a;}
.individual .custom-card .box{position:relative;display:block;width:100%;height:3rem;border-radius:5px;padding:0.625rem;box-sizing:border-box;margin-top:0.5rem;}
.individual .custom-card .box span{display:inline-block;width:calc(100% - 2.5rem);line-height:1.875rem;text-align:center;border-left:1px solid #c7cddc;margin-left:0.625rem;}
.individual .control-monitoring{bottom:0;}
.individual p.h2.num{display:flex;align-items:center;justify-content:center;height:calc(100% - 1.875rem);}
.individual p.h2.num .fs-14{font-size:0.875rem;color:#9fa6bc;margin-left:4px;}
.individual .chart{position:relative}
.individual .chart-1 p{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:100%;}
.individual .chart-2 p{line-height:11.25rem;}
.individual .chart-3 .circle{width:5rem;height:5rem;}
.individual .chart-3 .list li{position:relative;font-size:0.875rem;padding-left:1rem;}
.individual .chart-3 .list li::before{position:absolute;top:5px;left:0;content:'';display:block;width:0.5rem;height:0.5rem;border-radius:100%;}
.individual .chart-3 .list li.blue-70::before{background-color:#4A63BE;}
.individual .chart-3 .list li.blue-60::before{background-color:#718FE7;}
.individual .chart-3 .list li.blue-50::before{background-color:#4EAAED;}
.individual .chart-3 .list li + li{margin-top:0.03rem;}
.individual .chart-3 .list li span{color:#9FA6BC;}
.time-box{padding:0 0.9375rem;box-sizing:border-box;}
.time-box .progress{display:block;height:auto;line-height:1;background-color:transparent;border-radius:0;overflow:visible;}
.time-box .progress .range, .time-box .progress .time{display:flex;align-items:center;justify-content:space-between;font-size:0.875rem;color:#9fa6bc;}
.time-box .progress .bar {
    position: relative;
    width: 100%;
    height: 0.625rem;
    border-radius: 2.5rem;
    background-color: #eff2f6;
}

.time-box .progress .bar::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*content: '';*/
    display: block;
    width: 1px;
    height: 1.25rem;
    border: 1px dashed #a6b1d2;
}

.time-box .progress .bar > * {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: block;
}

.time-box .progress .bar .icon-gif {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 50px;  /* 너비 설정 */
    height: auto; /* 높이를 자동으로 조정하여 비율 유지 */
    z-index: 10;
    transition: left 3s linear; /* 7초로 변경 */
}
.time-box .progress .bar .icon-gif {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 50px;  /* 기존 너비의 3배 */
    height: auto;  /* 높이를 자동으로 조정하여 비율 유지 */
    z-index: 10;
    transition: left 3s linear;
}

.icon-gif {
    width: 50px;  /* 기존 너비의 3배 */
    height: auto;  /* 높이를 자동으로 조정하여 비율 유지 */
    max-height: none; /* 최대 높이 제한을 없애기 위해 none으로 설정 */
}
/*
.time-box .progress .bar > lottie-player {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}
.time-box .progress .bar > lottie-player.animation-short {
    animation: move-short 12s linear infinite;
}
.time-box .progress .bar > lottie-player.animation-long {
    animation: none;
    left: 0;
    transition: left 5s linear;
}
.time-box .progress .bar > lottie-player.animation-show {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.time-box .progress .bar > lottie-player.animation-show {
    opacity: 0;
    z-index: 10;
    transition: opacity 1s ease-in-out;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
}
*/


@keyframes move-long {
    0% {
        left: 0;
    }
    100% {
        left: var(--end-position, 100%);
    }
}
@keyframes show {
    0% {
        left: 0;
    }
    100% {
        left: var(--end-position, 100%);
    }
}


.time-box .progress .bar span{width:3.125rem;height:0.625rem;border-radius:0.625rem;opacity:.5;}
.time-box .list{width:50%;border-top:1px dashed #d2d5da;}
.time-box .list li{border-bottom:1px dashed #d2d5da;padding:0.5rem 0;}
.time-box .list li span{display:inline-block;vertical-align:middle;}
.time-box .list li .tit{width:1.875rem;}
.time-box .list li .bar{position:relative;width:calc(100% - 2.1875rem);height:4px;}
.time-box .list li .bar span{position:absolute;top:0;left:0;display:block;height:100%;}
/* .time-box .second{display:inline-block;width:5.75rem;}  kdy 240810 5.75 >> 6.75 */

.time-box .second{display:inline-block;width:6.75rem;}
.list-sensor li{width:6.575vw;text-align:center;border-radius:0.625rem;background-color:#f2f4f8;padding:1rem 0.625rem 0.625rem 0.625rem;box-sizing:border-box;    transition: background-color 0.3s ease; /* 부드러운 전환 효과 추가 */
}
.list-sensor li i{width:3rem;height:3rem;}
.list-sensor li.abnormal-card {
    background-color: #ffcccc; /* 연한 빨간색 배경 */
}
.list-sensor li span{display:block;width:100%;font-size:0.875rem;text-align:center;color:#525b75;margin-top:4px;}
.list-sensor li .state{display:block;width:100%;height:1.5rem;font-size:1rem;line-height:1.375rem;text-align:center;color:#00afe6;border:1px solid #00afe6;border-radius:5px;background-color:#fff;margin-top:10px;}
.list-sensor li .state.off{color:#ff5c6d;border-color:#ff5c6d;}
.list-monitoring{margin:0 -0.312rem 0 -0.312rem;}
.list-monitoring li{width:calc(16.66% - 8.33px);font-size:1rem;font-weight:500;text-align:center;border:1px solid #4067b4;border-radius:0.625rem;background-color:#fff;margin-left:0.312rem;margin-right:0.312rem;margin-bottom:0.625rem;overflow:hidden;}
.list-monitoring li .tit{position:relative;display:block;height:1.875rem;line-height:1.875rem;color:#333d5a;background-color:#f2f4f8;}
.list-monitoring li .tit::before{position:absolute;bottom:0;left:50%;transform:translate(-50%, 100%);content:'';display:block;border-left:0.375rem solid transparent;border-right:0.375rem solid transparent;border-top:0.5rem solid #f2f4f8;}
.list-monitoring li .num{display:block;width:100%;;height:2.625rem;line-height:2.625rem;color:#5297ff;padding:0;}
.list-monitoring li.on .tit{background-color:#4067b4;color:#fff;}
.list-monitoring li.on .tit::before{border-top-color:#4067b4;}
.list-monitoring.scroll-cnt li{width:5.75rem;margin-right:0.625rem;margin-bottom:0;}
.list-monitoring.scroll-cnt li:last-child{margin-right:0;}
#carousel-monitoring{position:static;max-height:calc(100% - 19rem);overflow:hidden;}

/* 이력 */
.history .list-state{position:relative;max-height:32.5rem;overflow-y:auto;} /* 240728 kdy 27.5 >> 32.5 수정 이력(조회) 히스토리 부분 라인 맞추기 */
.history .list-state::before{position:absolute;top:4px;left:50.1%;content:'';display:block;width:1px;height:98%;background-color:#e3e6ed;z-index:0;}
.history .list-state li{display:flex;align-items:center;justify-content:center;}
.history .list-state li + li{margin-top:2.5rem;}
.history .list-state li .date{width:8.125rem;}
.history .box-state{position:absolute;bottom:0.25rem;left:0;display:flex;align-items:center;justify-content:space-between;width:100%;}
.history .box-state .box{width:calc(50% - 0.625rem);text-align:center;border-radius:0.625rem;background-color:#f2f4f8;padding:1.25rem 0;}
.history .chart{height:24.375rem;}
#modal-process form label{display:flex;}
#modal-process form label span{display:inline-block;width:2.5rem;height:1.875rem;font-size:0.875rem;line-height:1.875rem;text-align:center;border-radius:4px;background-color:#e3e6ed;}
#modal-process form label select{display:inline-block;}

/* 장비 */
.list-toggled li + li{margin-top:4px;}
.list-toggled > li{border-bottom:1px solid #e3e6ed;padding:1.25rem 0;margin:0 -5px;}
.list-toggled .btn{position:relative;width:100%;font-size:0.875rem;font-weight:500;text-align:left;color:#333d5a;padding:0 0 0 1.375rem;}
.list-toggled .btn::after{position:absolute;top:4px;left:0;content:'';display:block;width:0.5625rem;height:0.75rem;background:url(../images/common/ico_toggle_off.png) no-repeat;}
.list-toggled .btn[aria-expanded='true']{color:#5297ff;}
.list-toggled .btn[aria-expanded='true']::after{transform:rotate(90deg);background-image:url(../images/common/ico_toggle_on.png);}
.list-toggled ul{padding-left:2.625rem;box-sizing:border-box;}
.list-toggled ul.depth2{margin-top:0.5rem;}


/* contents */
/* 0804 kdy 퍼브리셔 버전 중 필요한 것만 추가 주석처리는 된 것은 확인필요한 부분, ex) 133줄은 기본파이차트 색 회색으로 변경하고 값 있는 파이차트도 어둡게해서 확인필요 */
.custom-box > div{width:calc(33.33% - 0.83rem) !important;flex:0 0 31%;}
.custom-chart{margin-top:-15px;}
/* .alimi .disabled .custom-chart{filter:grayscale(.8);} */
.alimi .disabled .card{position:relative;}
/* .alimi .disabled .card::before{position:absolute;top:0;left:0;content:'';display:block;width:100%;height:100%;border-radius:.25rem;background-color:rgba(255,255,255,.7);z-index:1;} */
/* .alimi .disabled .info{top:0;left:0.9375rem;width:calc(100% - 0.9375rem);height:calc(100% - 1rem);display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:0.625rem;z-index:2;} */

.alimi .disabled .info{top:0;left:0.9375rem;width:calc(100% - 0.9375rem);height:calc(100% - 1rem);display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:0.625rem;background-color:rgba(255,255,255,.7);}
.alimi .disabled .info .list{position:relative;display:flex;justify-content:center;z-index:1;}

.alimi .disabled .info .list span{display:block;width:5rem;height:5rem;font-size:0.875rem;line-height:1.4;text-align:center;color:#a6b1d2;border:1px solid #4067b4;border-radius:0.625rem;background-color:#fff;padding-top:0.625rem;box-sizing:border-box;}
.alimi .disabled .info .list span + span{margin-left:2.5rem;}
.alimi .disabled .info .list em{position:absolute;content:'';display:block;width:0;height:1px;border:1px dashed #e60012;z-index:-1;animation:arrow 1.2s ease infinite;}
.alimi .disabled .info .list em::after{position:absolute;top:-3.5px;content:'';display:block;width:5px;height:7px;background:url(../images/common/ico_arrow_red.png) no-repeat;}
.alimi .disabled .info .list em.arrow-right{top:1.875rem;left:23%;}
.alimi .disabled .info .list em.arrow-right::after{right:-7px;}
.alimi .disabled .info .list em.arrow-left{bottom:1.875rem;right:23%;}
.alimi .disabled .info .list em.arrow-left::after{left:-7px;transform:rotate(180deg);}
.alimi .disabled .info .text{width:20rem;font-size:1rem;line-height:1.5;text-align:center;color:#fff;border-radius:0.625rem;background-color:#a6b1d2;padding:6px 0;opacity:.8;margin:1.25rem 0 0 0;}

@keyframes arrow {
    100% {
        width:10rem;
    }
}

@media (max-width:1880px){
    .list-sensor li{width:6.475vw;}
}

@media (max-width:1740px){
    .list-sensor li{width:6.375vw;}
}

@media (max-width:1640px){
    .list-sensor li{width:6.475vw;}
}

@media (max-width:1600px){
    .login .box{padding:2.5rem 7.125rem;}
}



.chart-info{display:flex;align-items:center;justify-content:end;}
.chart-info span{position:relative;font-size:0.75rem;padding-left:1rem;}
.chart-info span::before{position:absolute;top:2px;left:0;content:'';display:block;width:0.5rem;height:0.5rem;border-radius:100%;}
.chart-info span.blue-70::before{background-color:#4A63BE;}
.chart-info span.blue-60::before{background-color:#718FE7;}
.chart-info span.blue-50::before{background-color:#4EAAED;}
.chart-info span.blue-40::before{background-color:#5297FF;}
.chart-info span.blue-20::before{background-color:#91A1CF;}
.chart-info span.red-50::before{background-color:#DF7B3B;}
.chart-info span.purple::before{background-color:#A51F87;}
.chart-info span.green::before{background-color:#4CAF0F;}
.chart-info span + span{margin-left:1.25rem;}
/* 아래 align-items:end; start에서 변경되어 있었습니다. 전체페이지 사이즈 관련해서 수정한 걸로 추측됩니다. kdy 241016 */
.chart-info.vertical{flex-direction:column;align-items:end;}
.chart-info.vertical span + span{margin-left:0;margin-top:6px;}

.status-chat{height:100%;border-top:1px solid #e3e6ed;overflow-y:auto;box-sizing:border-box;}
.status-chat .day{border-bottom:1px solid #e3e6ed;padding:0 0.625rem 1rem;box-sizing:border-box;}
/* .status-chat .day{border-bottom:1px solid #e3e6ed;padding:0 0.625rem 1rem;box-sizing:border-box;} */
.status-chat .day .info{display:flex;align-items:center;padding:1.25rem 0 1rem;box-sizing:border-box;margin:0;}
.status-chat .day .info .type{width:3rem;height:3rem;font-size:0.75rem;text-align:center;color:#525b75;border:1px solid #DBE0EC;border-radius:5px;background-color:#fff;padding:4px 0;box-sizing:border-box;margin-right:0.5rem;}
.status-chat .day .info .type i{margin:0 auto 2px;}
/* .status-chat .day .info .sub{width:16.14vw;font-size:0.875rem;line-height:1.4;color:#84d4f0;} */
.status-chat .day .info .sub{width:16.14vw;font-size:0.875rem;line-height:1.4;color:#000000;}
.status-chat .day .info .sub b{display:block;font-size:1rem;font-weight:400;color:#333d5a;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}

/* 실시간에 글씨부분 배경 및 스타일 수정을 위해 추가 kdy 241016 */
/* .status-chat .day .chat > span{display:block;width:fit-content;max-width:80%;min-height:2.75rem;line-height:1.5rem;color:#525B75;border-radius:5px;background-color:#f2f4f8;padding:10px;} */
.status-chat .day .chat > span{display:block;width:fit-content;max-width:80%;min-height:2.75rem;line-height:1.5rem;color:#525B75;border-radius:5px;background-color:#f2f4f8;padding:10px;}

.status-chat .day .info.alert-style {

    border: 1px solid #ff5c6d;  /* 빨간 테두리 */
    border-radius: 4px;         /* 약간의 둥근 모서리 */
    background-color: rgba(255, 92, 109, 0.05); /* 붉은 배경 색상 */
    margin-top: 0.625rem;
    padding: 10px;              /* 내부 여백 추가 */
    color: #333;                /* 글씨 색상 */
    display: flex;
    align-items: center;        /* 내용 정렬 */
}




/* 왼쪽 채팅 스타일 */
.status-chat .day .chat.left > span {
    display: block;
    width: fit-content;
    max-width: 90%;
    min-height: 1rem;
    line-height: 1rem;
    color: #000000;
    border-radius: 5px;
    background-color: #FFFF00; /* 노란색 배경 */
    padding: 10px;
}

/* 오른쪽 채팅 스타일 */
.status-chat .day .chat.right > span {
    display: block;
    width: fit-content;
    max-width: 80%;
    min-height: 1rem;
    line-height: 1rem;
    /* color: #525B75; */
    color: #000000;
    border-radius: 5px;
    background-color: #84D4F0; /* 파랑색 배경 */
    padding: 10px;
    text-align: right;
}

/* 왼쪽 채팅 스타일 */
.status-chat .day .chat.alarm > span {
    display: block;
    width: fit-content;
    max-width: 80%;
    min-height: 1rem;
    line-height: 1rem;
    color: #000000;
    border-radius: 5px;
    background-color: #FFF0F0; /* 빨간색 배경 */
    padding: 10px;
}

.status-chat .day .chat > span .date{font-weight:400;color:#A6B1D2;margin-left:10px;}
.status-chat .day .chat > span .tag{margin-left:20px;}
.status-chat .day .chat > span + span{margin-top:.5rem;}
.status-chat .day .chat + .chat{margin-bottom:0.4rem;}
.status-chat .day .chat.left > span{margin-right:auto;}
.status-chat .day .chat.right > span{margin-left:auto;}
.status-chat .day .state{display:flex;align-items:center;justify-content:center;width:100%;font-size:14px;color:#525b75;border-radius:5px;background-color:#F2F4F8;padding:8px;margin:0;}
.status-chat .day .state > span{width:35%;text-align:center;}
.status-chat .day .state > span .tag{line-height:1.5rem;color:#fff;margin-left:10px;}