/* intro */
#intro{
    width: 100%;
    height: 100vh;
    padding: 50px 0;
}
#intro .logoSlogan{padding-top: 100px;}
#intro .logoSlogan .logoImg{margin-right: 7px;}
#intro .logoSlogan img{width: 65px;}
#intro .logoSlogan .brandName{color: #999;}
#intro .logoSlogan .brandName span{
    color: #333;
    font-size: 50px;
    font-weight: bold;
    line-height: 40px;
}
#intro .introBg{
    animation-duration: 1.5s;
    animation-name: introMainBox;
}
#intro .introBg img{
    width: 100%;
    animation-duration: 4s;
    animation-name: introMain;
    animation-iteration-count: unset;
    animation-fill-mode: forwards;
}
@keyframes introMainBox{
    from{opacity: 0;}
    to{opacity: 100;}
}
@keyframes introMain{
    from{width: 100%;margin-right: 0;}
    to{width: 110%;margin-right: 7%;}
}
/* intro */


/* container */
.container{
    position: relative;
    width: 90%;
    padding: 20px;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1),
                0 -10px 10px rgba(255,255,255,0.3);
    border-radius: 10px;
}
.container .contTit{
    padding: 0px 0 5px 0;
}
.container .contTit h3{
    font-size: 16px;
    font-weight: 500;
}
.container .contTit h3 i{
    margin-right: 5px;
    font-size: 14px;
}
.container .contItem{
    padding: 15px 10px;
    border-bottom: 1px solid #f1f1f1;
}
.container .contItem:last-child{
    padding: 15px 10px 0px 10px;
    border-bottom: none;
}
.container .contItem input.userEdit{
    display: none;
    width: calc(100% - 20px);
    padding: 5px 10px;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
}
.container .contItem .contItemInfo{
    width: calc(100% - 30px);
}
.container .contItem .contItemInfo.contItemInfoToggle{
    width: calc(100% - 45px);
}
.container .contItem label{
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
    color: #999;
}
.container .contItem label.info{
    width: 80%;
    margin-top: 5px;
    font-size: 12px;
    color: #ccc;
}
.container .contItem .itemBtn{
    width: 30px;
    height: 100%;
    font-size: 20px;
    color: #666;
    cursor: pointer;
}
.container .contItem .itemBtn.editBtn span{
    display: none;
    font-size: 14px;
    color: #00b0ff;
    font-weight: bold;
}
/* container */


/* contractRegBox  */
.contractRegBox{
    text-align: center;
    color: #999;
}
.contractRegBox i{
    margin-bottom: 30px;
    font-size: 60px;
}
.contractRegBox h3{
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 700;
    color: #333;
}
/* contractRegBox */


/* contractNone */
.contractContItem.contractNone p{
    font-size: 14px;
}
/* contractNone */


/* contractContItem */
.contractContItem.contItem ul p{
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 500;
}
.contractContItem.contItem ul li{
    padding-left: 10px;
    margin-bottom: 5px;
    font-size: 14px;
    color: #999;
}
/* contractContItem  */


/* contractAdd */
.container .contItem .contractAdd{
    width: 100%;
}
.container .contItem .contractAdd label{
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}
.container .contItem .contractAdd label span{
    display: block;
    margin-top: 5px;
}
.container .contItem .contractAdd input{
    width: calc(100% - 55px);
    height: 40px;
    margin-right: 5px;
    padding: 0 10px;
    border: 1px solid #f1f1f1;
    border-radius: 10px;
}
.container .contItem .contractAdd input::placeholder{font-size: 14px;color: #ccc;}
.container .contItem .contractAdd input:focus{outline: none;}
.container .contItem .contractAdd button{
    width: 50px;
    height: 40px;
    background: #00b0ff;
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
}
.container .contItem .contractAdd p.warringMessage{
    display: none;
}
/* contractAdd */


/* contractInq */
.container .contItem .contractInq{
    display: none;
    width: 100%;
    margin-top: 15px;
}
.container .contItem .contractInq .contractInqTit{
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 500;
    color: #999;
}
.container .contItem .contractInq .contractInqTit label{
    margin-bottom: 0;
}
.container .contItem .contractInq .contractInqTit p{
    font-weight: 400;
}
.container .contItem .contractInq .userName{
    width: 100%;
    padding: 8px 15px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background: #f1f1f1;
    color: #999;
}
.container .contItem .contractInq .userName ul{
    margin: 20px 0;
}
.container .contItem .contractInq .userName ul:first-child{margin-top: 10px;}
.container .contItem .contractInq .userName ul:last-child{margin-bottom: 10px;}
/* contractInq End */


/* listType */
.listType{
    width: 90%;
    margin: 0 auto 10px auto;
}
.listType p{
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1),
    0 -10px 10px rgba(255,255,255,0.3);
    cursor: pointer;
}
.listType p:first-child{margin-right: 10px;}
.listType p a{
    width: 50px;
    height: 50px;
}
.listType p i{
    font-weight: bold;
    font-size: 25px;
    color: #ccc;
}
.listType p .listTypeCardBtn span{
    display: block;
    background: #ccc;
}
.listType p .listTypeCardBtn span.listTypeCardBtn01{
    width: 4px;
    height: 22px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.listType p .listTypeCardBtn span.listTypeCardBtn02{
    width: 20px;
    height: 28px;
    margin: 0 3px;
    border-radius: 5px;
}
.listType p .listTypeCardBtn span.listTypeCardBtn03{
    width: 4px;
    height: 22px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.listType p.active{
    background: #00b0ff;
}
.listType p.active i{
    color: #fff;
}
.listType p.active i.listTypeCardBtn span{
    background: #fff;
}
/* listType End */


/* searchBox */
.searchBox{
    width: 90%;
    margin: 0 auto 10px auto;
    padding: 10px;
    background: #333;
    border-radius: 10px;
    box-shadow: 2px 7px 15px 8px rgba(0,0,0,0.1);
    color: #fff;
}
.scrollEvent .searchBox{
    position: absolute;
    left: calc(50% - 45%);
    top: 70px;
    width: 90%;
    margin: 0 0 10px 0;
    padding: 10px;
    background: #333;
    border-radius: 10px;
    color: #fff;
    transition: 0.3s;
}
.issueToggle p{
    margin-right: 5px;
    font-size: 14px;
}
.searchBoxInput{
    height: 40px;
    padding: 0 10px;
    margin-top: 5px;
    background: #fff;
    border-radius: 10px;
}
.searchBoxInput i{
    color: #999;
    font-size: 20px;
}
.searchBoxInput input{
    width: calc(95% - 30px);
    border: none;
    font-size: 14px;
    color: #333;
}
.searchBoxInput input::placeholder{font-size: 14px;color: #999;}
.searchBoxInput input:focus{outline: none;}

.sec.scrollEvent{padding-top: 110px;}
.scrollEvent .searchBox.scrollEvent{
    position: fixed;left:calc(50% - 45%);
    top:10px;box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
    transform: scale(1.1);
}
.hidden {
    display: none;
}
/* searchBox */


/* listInfoBox */
.listInfoBox{
    width: 90%;
    margin: 10px auto 5px auto;
    padding: 0 0px 0px 10px;
}
.listInfoBox p{
    font-size: 14px;
    color: #999;
}
.listInfoBox p.helpBtn{
    width: 20px;
    height: 20px;
    margin-left: 5px;
    border: 2.5px solid #ccc;
    border-radius: 50%;
    color: #ccc;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
}
.listInfoBox p span{
    margin-right: 2px;
    font-size: 16px;
    color: #333;
    font-weight: 500;
}
.listInfoBox p span.issueCount{
    color: #999;
    font-size: 14px;
}
.sort p{
    font-size: 14px;
    color: #999;
}
.sort select{
    padding: 5px 5px;
    margin-left: 5px;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    font-size: 12px;
    color: #666;
}
/* listInfoBox */

.loader{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: white;
}

.load_div {
    position: absolute; left: 50%; top: 50%; z-index: 10; width: 150px;
    height: 150px; margin: -75px 0 0 -75px; border: 16px solid #f3f3f3; border-radius: 50%;
    border-top: 16px solid #3498db; width: 120px; height: 120px; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; 
}

@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }  	}


/* listItemBox */
.listItemBox{
    width: 90%;
    margin: 0 auto 10px auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1),
                0 -10px 10px rgba(255,255,255,0.3);
}
.listItemBox.adminListItemBox{
    box-shadow: 0 5px 10px rgba(0,0,0,0.4),
                0 -10px 10px rgba(255,255,255,0.3);
}
.listItemTit{
    padding: 10px 15px;
}
.ContNoTit > div{
    margin-right: 5px;
    padding: 5px 7px;
    background: #fff;
    border: 1px solid #f1f1f1;
    border-radius: 20px;
}
/*.ContNoTit > div.dealCdBox{*/
/*    width:38px;*/
/*    padding: 0;*/
/*    margin-right: 0px;*/
/*    background: none;*/
/*    border: none;*/
/*    border-radius: none;*/
/*    font-size: 14px;*/
/*    font-weight: 700;*/
/*    !*자산구분*!*/
/*}*/
/*.ContNoTit > div.dealCdBox pre{*/
/*    font-family: inherit !important;*/
/*}자산구분*/
.ContNoTit i{
    width: 20px;
    background: #fff;
    border-radius: 50%;
    text-align: center;
    font-size: 16px;
    color: #999;
}
.ContNoTit i.warring{color: #ff3100;}
.ContNoTit i.off{color: #FFCE00;}
.ContNoTit i.defrost{color: #00b0ff;}
.ContNoTit p{
    font-weight: 500;
}
.ContNoTit p.warring{color: #ff3100;}
.ContTimeTit p{
    font-weight: 500;
    font-size: 14px;
    color: #999;
}
.listItem{
    padding: 0 10px 5px 10px;
}
.listItem label{
    width: 70px;
    height: 28px;
    margin-right: 10px;
    background: #f1f1f1;
    border-radius: 10px;
    line-height: 28px;
    text-align: center;
    font-size: 14px;
    color: #333;
}
.listItem label.warring{
    background: #ff3100;
    color: #fff;
    font-weight: 500;
}
.listItem label.off{
    background: #FFCE00;
    color: #fff;
    font-weight: 500;
}
.listItem label.defrost{
    background: #4AD9FF;
    color: #fff;
}
.listItem p{
    width: calc(100% - 80px);
    font-size: 14px;
    font-weight: 500;
}
.listItem p.warring{color: #ff3100;}
.listItem p.defrost{color: #333;}
.listItemTemp{
    height: 50px;
    margin-top: 5px;
    border: 1px solid #f1f1f1;
    border-radius: 10px;
}
.listItemTemp div{
    width: 50%;
}
.listItemTemp div .tempTit{
    margin-right: 10px;
    padding-bottom: 2px;
    font-size: 12px;
    color: #999;
}
.listItemTemp div .temp{
    font-size: 20px;
    font-weight: bold;
}
.listItemTemp div .temp.over{color: #ff3100;}
.listItemTemp div .temp.less{color: #2251A1;}
.listItemTemp.listItemTempAdmin div{
    width: calc(100% / 2);
}
.listItemTemp.listItemTempAdmin div .tempTit{
    padding-left: 5px;
}
.listItemTemp.listItemTempAdmin div .temp{
    font-size: 16px;
}
.helpBtn.detailDashboard{
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1;
    width: 25px;
    height: 25px;
    line-height: 22px;
    border: 2.5px solid #ccc;
    border-radius: 50%;
    text-align: center;
    font-weight: bold;
    color: #ccc;
    cursor: pointer;
}
/* listItemBox */


/* cardListBox */
.cardListBox{
    position: relative;
}
.cardListBox .swiper-slide > div{
    width: 90%;
}
.cardListBox .swiper-slide > div .container.TempBox{
    width: 100%;
    padding: 100px 20px 60px 20px;
}
.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom, .swiper-pagination-fraction{
    bottom: -20px !important;
}
.cardListTit{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 50px;
    background: #333;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: #fff;
    padding: 0 20px;
}
.cardListTit h3{
    font-size: 16px;
    font-weight: 500;
}
.cardListTit p{
    padding-top: 3px;
    font-size: 14px;
    color: rgba(255,255,255,0.8);
}
.cardListFooter{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    padding: 0 20px;
    background: #333;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    color: #fff;
}
.cardListFooter p i{
    margin-left: 5px;
}
.cardListItemBox{
    width: 100%;
    margin-top: 10px;
    padding-top: 20px;
    border-top: 1px solid #f1f1f1;
}
.cardListItemBox .listItem{
    padding: 0 0 5px 0;
}
/* cardListBox */


/* dahBr */
.dahBrCntId{
    width: 90%;
    margin: 0 auto 10px auto;
    padding: 10px 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1),
                0 -10px 10px rgba(255,255,255,0.3);
}
.dahBrCntId .cntId{
    font-weight: 500;
}
.dahBrCntId .cntMdl{
    font-size: 14px;
    color: #999;
}
.TempBox{
    position: relative;
    padding: 50px 20px 10px 20px;
}
.crtTempBox{
    position: relative;
    margin-bottom: 30px;
}
.crtTemp{
    position: absolute;
    top: calc(50% - 67.5px);
    left: calc(50% - 67.5px);
    display: flex;
    flex-flow: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 135px;
    height: 135px;
    border-radius: 50%;
}
.crtTemp p{
    margin-bottom: 2px;
    font-size: 14px;
    color: #999;
}
.crtTemp h3{
    margin: 0 0 10px 0;
    font-size: 14px;
    color: #999;
}
.crtTemp h3.over{color: #ff3100 !important;}
.crtTemp h3.less{color: #2251A1 !important;}
.crtTemp h3.defrost{color: #4AD9FF !important;}
.crtTemp h3 span{
    margin-right: 5px;
    font-size: 30px;
    font-weight: bold;
    color: #333;
}
.crtTemp p.setTemp{
    margin-bottom: 5px;
    font-size: 14px;
    color: #999;
}
#slider2 .rs-handle.rs-move{
    display: none !important;
}

.slider2 .rs-handle.rs-move{
    display: none !important;
}
#slider3{
    position: absolute;
    top: 0;
}
#slider3 .rs-handle.rs-move{
    width: 30px !important;
    height: 30px !important;
    margin: -16px -10px 0px !important;
    background-color: #fff;
    border: 1px solid #f1f1f1;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    background-image: url(../../../images/spaceport/setting.png);
    background-repeat: no-repeat;
    background-size: 90%;
    background-position: center;
}
.slider3{
    position: absolute !important;
    top: 0;
}
.slider3 .rs-handle.rs-move{
    width: 30px !important;
    height: 30px !important;
    margin: -16px -10px 0px !important;
    background-color: #fff;
    border: 1px solid #f1f1f1;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    background-image: url(../../../images/spaceport/setting.png);
    background-repeat: no-repeat;
    background-size: 90%;
    background-position: center;
}
#slider4 .rs-handle.rs-move{
    display: none !important;
}
#slider5{
    position: absolute;
    top: 0;
}
#slider5 .rs-handle.rs-move{
    width: 35px !important;
    height: 35px !important;
    margin: -20px -10px 0px !important;
    background-color: #fff;
    border: 1px solid #f1f1f1;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    background-image: url(../../images/spaceport/setting.png);
    background-repeat: no-repeat;
    background-size: 90%;
    background-position: center;
}
.criteria{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.criteria p{
    position: absolute;
    font-size: 14px;
    color: #999;
}
.criteria p.bz30{bottom: 20px;left: -20px;}
.criteria p.bz20{bottom: 100px;left: -40px;}
.criteria p.bz10{bottom: 180px;left: -15px;}
.criteria p.z0{bottom: 220px;left: calc(50% - 3.5px)}
.criteria p.az10{bottom: 180px;right: -15px;}
.criteria p.az20{bottom: 100px;right: -35px;}
.criteria p.az30{bottom: 20px;right: -15px;}


.setTemp{
    text-align: center;
}
.setTemp label{
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
    color: #999;
}
.setTemp p{
    color: #333;
    font-size: 18px;
    font-weight: 500;
}
.adminTemp{
    width: 100%;
    margin-bottom: 10px;
}
.adminTemp div{
    width: calc(100% / 3);
}
.splyTemp label{
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
    color: #999;
}
.splyTemp p{
    color: #333;
    font-size: 18px;
    font-weight: 500;
}
.listItem.dahBrLstItem{
    padding: 0;
    margin-bottom: 5px;
}
.listItem.dahBrLstItem:last-child{
    margin-bottom: 0;
}
.listItem.dahBrLstItem.operationMode{
    padding-top: 20px;
}
.listItem.dahBrLstItem.operationMode ul{
    width: 100%;
    font-size: 14px;
}
.listItem.dahBrLstItem.operationMode li{
    width: 25%;
    color: #ccc;
}
.listItem.dahBrLstItem.operationMode li:last-child{
    border: none;
}
.listItem.dahBrLstItem.operationMode li.active{
    color: #333;
}
.listItem.dahBrLstItem.operationMode li i{
    margin-bottom: 5px;
    font-size: 12px;
}
.listItem.dahBrLstItem.operationMode li.active i{
    color: #69E00B;
}
.contTit.mapTit{
    padding: 0;
}
.map{
    display: none;
    width: 100%;
    height: 300px;
    margin-top: 20px;
    border-radius: 10px;
    overflow: hidden;
}
/* dahBr  */


/* dtst */
.dtstTapBox{
    width: 90%;
    margin: 0 auto;
}
.dtstTapBox li{
    width: 50%;
    padding: 10px 0;
    background: #f1f1f1;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1),
            0 -10px 10px rgba(255,255,255,0.3);
    cursor: pointer;
    color: #ccc;
    text-align: center;
    font-size: 14px;
}
.dtstTapBox li:first-child{border-top-left-radius: 10px;}
.dtstTapBox li:last-child{border-top-right-radius: 10px;}
.dtstTapBox li.active{
    position: relative;
    z-index: 1;
    background: #fff;
    color: #00b0ff;
    font-weight: 700;
}
.dtstBox{
    position: relative;
    z-index: 1;
    width: 90%;
    padding: 10px;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1),
                0 -10px 10px rgba(255,255,255,0.3);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.dtstDaily p{
    width: calc((100% / 3) - (10px / 3));
    padding: 7px 0;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    font-size: 14px;
    text-align: center;
    color: #999;
}
.dtstDaily p.active{
    border: 1px solid #00b0ff;
    color: #00b0ff;
    font-weight: 500;
}
.dtstDate{
    display: none;
}
.dtstDate input{
    width: calc((100% - 25px) / 2);
    padding: 5px 10px;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    font-size: 14px;
    color: #333;
}
.dtstDate span{
    display: block;
    text-align: center;
    width: 25px;
}
/* dtst */


/*** chartMain ***/
.chartMain .chrSrcCndBox{
    margin-bottom: 20px;
}
.chartMain .chrSrcCndBox div{
    margin-right: 5px;
    text-align: center;
    flex: 1 0 0;
}
.chartMain .chrSrcCndBox div input{
    display: none;
}
.chartMain .chrSrcCndBox div input + label::before{
    text-align: center;
    display: block;
    color: #999;
    border-radius: 10px;
    border: 1px solid #e2e2e2;
    border-top: 10px solid #e2e2e2;
    font-size: 14px;
    cursor: pointer;
    padding: 5px 0;
}
.chartMain .chrSrcCndBox div input[id="chrCrnTmp"] + label::before{content: '현재온도';}
.chartMain .chrSrcCndBox div input[id="chrStnTmp"] + label::before{content: '설정온도';}
.chartMain .chrSrcCndBox div input[id="chrTmpSns"] + label::before{content: '온도감지';}
.chartMain .chrSrcCndBox div input[id="chrHum"] + label::before{content: '습도';}
.chartMain .chrSrcCndBox div input[id="chrHumSns"] + label::before{content: '습도감지';}
.chartMain .chrSrcCndBox div input[id="chrCrnTmp2"] + label::before{content: '온도2';}
.chartMain .chrSrcCndBox div input[id="chrHum2"] + label::before{content: '습도2';}
.chartMain .chrSrcCndBox div input[id="chrCrnTmp"]:checked + label::before{border: 1px solid #D33600;border-top: 10px solid #D33600;color: #D33600;}
.chartMain .chrSrcCndBox div input[id="chrStnTmp"]:checked + label::before{border: 1px solid #4D75DC;border-top: 10px solid #4D75DC;color: #4D75DC;}
.chartMain .chrSrcCndBox div input[id="chrTmpSns"]:checked + label::before{border: 1px solid #747474;border-top: 10px solid #747474;color: #747474;}
.chartMain .chrSrcCndBox div input[id="chrHum"]:checked + label::before{border: 1px solid #109618;border-top: 10px solid #109618;color: #109618;}
.chartMain .chrSrcCndBox div input[id="chrHumSns"]:checked + label::before{border: 1px solid #FF9900;border-top: 10px solid #FF9900;color: #FF9900;}
.chartMain .chrSrcCndBox div input[id="chrCrnTmp2"]:checked + label::before{border: 1px solid #4374D9;border-top: 10px solid #4374D9;color: #4374D9;}
.chartMain .chrSrcCndBox div input[id="chrHum2"]:checked + label::before{border: 1px solid #009688;border-top: 10px solid #009688;color: #009688;}

.chartBox{
    width: 100%;
    overflow-x: auto;
}
.chartBox div{
    width: 1200px;
}
/* chartMain */


/* logCont */
.logContBox{
    width: 90%;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1),
                0 -10px 10px rgba(255,255,255,0.3);
    overflow: hidden;
}
.logTit{
    padding: 10px;
    background: #333;
}
.logBtn p{
    width: 30px;
    height: 30px;
    padding: 4px 0 0 1px;
    background: #f1f1f1;
    border-radius: 50%;
    font-size: 19px;
    color: #333;
}
.logBtn p a{
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
}
.logBtn h3{
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}
.logFilter p{
    margin-right: 5px;
    font-size: 14px;
    color: #fff;
}
.logItem{
    padding: 10px;
    background: #fff;
    border-bottom: 1px solid #f1f1f1;
    font-size: 14px;
}
.logItem.admLogItem{
    border-bottom: 1px solid #ccc;
}
.logItem i{
    width: 30px;
    height: 30px;
    margin-right: 7px;
    background: #f1f1f1;
    border: 1px solid #ccc;
    border-radius: 50px;
    line-height: 28px;
    text-align: center;
    font-size: 17px;
}
.logItem .logTempCont.over i{background: rgb(255, 49, 0, 0.3);border: 1px solid #ff3100;color: #ff3100;}
.logItem .logTempCont.over p{color: #ff3100;font-weight: 500;}
.logItem .logTempCont.less i{background: rgb(34, 81, 161, 0.3);border: 1px solid #2251A1;color: #2251A1;}
.logItem .logTempCont.less p{color: #2251A1;font-weight: 500;}
.logItem .logTempCont.warring p{color: #ff3100;}
.logTime i{
    position: relative;
}
.logTime i span{
    position: absolute;
    right: -5px;
    top: -5px;
    display: none;
    width: 15px;
    height: 15px;
    padding: 1px 0 0 1px;
    background: #ff3100;
    border-radius: 50%;
    line-height: 12px;
    font-weight: bold;
    font-size: 9px;
    color: #fff;
}
.logTime i span.active{
    display: block;
}
.pwrStt{
    width: 90px;
    background: #f1f1f1;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-weight: 500;
    color: #333;
}
.pwrStt.off{
    background: rgb(255, 49, 0, 0.05);
    border: 1px solid #ff3100;
    color: #ff3100;
}
.pwrStt i{
    width: auto;
    height: auto;
    background: rgba(0,0,0,0);
    border: none;
    font-size: 15px;
}
.logTemp:not(.admLogTemp) div{
    margin-top: 5px;
    flex: 1 0 0;
}
.logDetail{
    margin-top: 10px;
}
.logDetail div{
    margin-top: 5px;
}
.logDetail label{
    width: 70px;
    height: 28px;
    margin-right: 10px;
    background: #f1f1f1;
    border-radius: 10px;
    line-height: 28px;
    text-align: center;
    font-size: 14px;
    color: #333;
}
.logDetail div.warring label{
    background: #ff3100;
    font-weight: 500;
    color: #fff;
}
.logDetail div.warring p{
    color: #ff3100;
    font-weight: 500;
}
.logDetail div.off label{background: #FFCE00;color: #fff;font-weight: 500;}
.logDetail div.defrost label{background: #4AD9FF;color: #fff;}
/* logCont */


/* 관리자용 로그 이력  */
.logTemp.admLogTemp div{
    width: auto;
    margin: 10px 10px 0 0;
}
.logTemp.admLogTemp.operationLog{
    width: 100%;
}
.logTemp.admLogTemp.operationLog > div{
    flex: 1 0 0;
}
.logTemp.admLogTemp.operationLog > div p {
    color: #ccc;
    font-weight: 500;
}
.logTemp.admLogTemp.operationLog > div.running p{
    font-weight: 700;
    color: #69E00B;
}
.logTemp.admLogTemp div:last-child{
    margin-right: 0;
    padding-right: 0;
    border-right: none;
}
.logTemp.admLogTemp div span{
    margin-right: 5px;
    font-size: 12px;
}
.logTemp.admLogTemp div p{
    margin-top: 3px;
    font-weight: 700;
}
p.logAlarmCode{
    font-size: 12px;
    text-align: right;
}
p.logAlarmCode.warring{
    color: #ff3100;
}
/*.logDetail.admLogDetail div p.logAlarmCode.warring{color: #ff3100;}*/
/*.logDetail.admLogDetail label{*/
/*    width: 70px;*/
/*    height: 28px;*/
/*    margin-right: 10px;*/
/*    background: #f1f1f1;*/
/*    border-radius: 10px;*/
/*    line-height: 28px;*/
/*    text-align: center;*/
/*    font-size: 12px;*/
/*    color: #333;*/
/*}*/
/*.logDetail div.warring p {*/
/*    font-weight: 500;*/
/*    font-size: 12px;*/
/*    color: #ff3100;*/
/*}*/
/*.logDetail div.off label{*/
/*    background-color: #FFCE00;*/
/*    color: #fff;*/
/*    font-weight: 500;*/
/*}*/
/*.logDetail div.defrost label{*/
/*    background-color: #4AD9FF;*/
/*    color: #fff;*/
/*}*/
/* 관리자용 로그 이력 */


/* alrSetBox */
.alrSetBox.alrSetRadioBox{
    padding: 20px 0;
    border-top: 1px solid #f1f1f1;
}
.alrSetBox.alrSetRadioBox:last-child{padding-bottom: 0;}
.alrSetBox .alrSetItem{margin-bottom: 15px;
}
.alrSetBox .alrSetItem:last-child{margin-bottom: 0px;}
.alrSetBox.alrSetRadioBox .alrSetRadio{
    width: 90%;
}
.alrSetBox p{
    margin-bottom: 0;
}
.alrSetBox label{
    display: block;
    margin-top: 3px;
    line-height: 1rem;
    font-size: 12px;
    color: #999;
}
.alrSetBox input[type="radio"]{
    width: 20px;
    height: 20px;
}
.alrSetBox input[type="checkbox"]{
    width: 20px;
    height: 20px;
}
/* alrSetBox */


/* alrlstSet */
.alrlstSetItem{
    padding: 15px 5px;
    border-top: 1px solid #f1f1f1;
    color: #666;
}
.alrlstSetItem:last-child{padding-bottom: 0;}
.alrSetItem.alrlstSetItem{
    padding: 15px 0;
}
.itemLabelBox{
    width: 80%;
}
.itemLabelBox .itemInfo{
    display: block;
    margin-top: 3px;
    line-height: 1rem;
    font-size: 12px;
    color: #999;
}
/* alrlstSet */


/* alrSetRangeBox */
.alrSetRangeBox .alrSetItem:first-child{border-bottom: 1px solid #f1f1f1;padding-bottom: 20px;}
.alrSetSub{
    position: relative;
    padding: 0 5px;
    color: #000;
    font-size: 12px;
}
.alrSetSub p span.setTempBar{
    position: absolute;
    left: calc(50% - 1px);
    top: -35px;
    display: block;
    width: 2px;
    height: 30px;
    background: #e2e2e2;
}
.alrSetBtn{
    padding-top: 20px;
}
.alrSetBtn button{
    width: 70px;
    margin-right: 5px;
    padding: 7px 0;
    background: #fff;
    border: 1px solid #f1f1f1;
    border-radius: 10px;
    font-size: 14px;
    color: #333;
}
.alrSetBtn button.save{
    margin-right: 0;
    background: #00b0ff;
    border: none;
    font-weight: 500;
    color: #fff;
}
.detectionSet label{
    margin-bottom: 5px;
}
.detectionSet div{
    font-size: 12px;
}
.detectionSet div input{
    font-size: 14px;
    padding: 5px 7px;
    width: 60px;
    border-radius: 5px;
    border: 1px solid #ccc;
}
.detectionSet div input:focus{
    outline: 1px solid #999;
}
.detectionSet div input:disabled{
    background: #eee;
    color: #999;
}
.detectionSet div span{
    display: block;
    margin: 0 5px;
}
.detectionSet div span:nth-child(2){
    /*width: 45px;*/
}
/* alrSetRangeBox */


/* pushLog */
.container.pushLogBtn .contTit{
    padding-bottom: 0;
}
.pushLogItem{
    padding: 0 10px;
    background: #fff;
    font-size: 14px;
}
.pushLog{
    padding: 15px 10px;
    border-bottom: 1px solid #f1f1f1;
}
.pushLogItem:last-child .pushLog{
    border-bottom: none;
}
.pushPrvw{
    width: 100%;
}
.pushLogItem .pushDate{
    width: 50%;
}
.pushLogItem .pushType{
    width: 40%;
}
.pushLogItem .pushDtlBtn{
    position: relative;
    width: 10%;
    height: 20px;
}
.pushLogItem .pushDtlBtn span{
    position: absolute;
    display: block;
    width: 12px;
    height: 3px;
    background: #333;
    border-radius: 5px;
    transition: 0.3s;
}
.pushLogItem .pushDtlBtn span:nth-child(1){transform: rotate(40deg);right: 7px;}
.pushLogItem .pushDtlBtn span:nth-child(2){transform: rotate(-40deg);right: 0;}
.pushLogItem .pushDtlBtn span.active:nth-child(1){transform: rotate(-40deg);right: 7px;}
.pushLogItem .pushDtlBtn span.active:nth-child(2){transform: rotate(40deg);right: 0;}
.pushDetail{
    display: none;
    padding: 10px 5px 0 5px;
}
.pushDetail li{
    margin-bottom: 5px;
    color: #999;
}
.pushDetail li:last-child{
    margin-bottom: 0;
}
/* pushLogBtn */


/* etcBtn**/
.etcBtn{
    text-align: center;
    padding: 20px 0;
}
.etcBtn p{
    cursor: pointer;
    text-decoration: underline;
    font-size: 13px;
    color: #999;
}
/* etcBTn */


#fabBox{
    position: fixed;
    right: 20px;
    bottom: 70px;
    z-index: 10000;
}
#fabBox.fabList{
    bottom: 20px;
}
.fabMain{
    position: relative;
    z-index: 10002;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
    cursor: pointer;
}
.fabMain i{
    font-size: 30px;
    transition: 0.3s;
}
.fabMain i.active{
    transform: rotate(45deg);
}
.fabMain span{
    display: block;
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #333;
    transition: 0.3s;
}
.fabMain span:nth-child(1){left: 15px;top: calc(50% - 3.5px);}
.fabMain span:nth-child(2){}
.fabMain span:nth-child(3){right: 15px;top: calc(50% - 3.5px);}
.fabMain span:nth-child(1).active{top: 28px;left:15px;width: 30px;height: 4.5px;border-radius: 10px;transform: rotate(45deg);}
.fabMain span:nth-child(2).active{transform: scale(0%);}
.fabMain span:nth-child(3).active{top: 28px;right:15px;width: 30px;height: 4.5px;border-radius: 10px;transform: rotate(-45deg);}
.fabSub{
    position: absolute;
    bottom: 30px;
    z-index: 10001;
    display: flex;
    flex-direction: column-reverse;
}
.fabSub li{
    position: absolute;
    bottom: -22px;
    width: 50px;
    height: 50px;
    background: #333;
    border-radius: 50%;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    transform: scale(0%);
}
.fabSub li:nth-child(1){transition: 0.3s;}
.fabSub li:nth-child(2){transition: 0.35s;}
.fabSub li:nth-child(3){transition: 0.4s;}
.fabSub li:nth-child(4){transition: 0.45s;}
.fabSub li:nth-child(5){transition: 0.5s;}
.fabSub li:nth-child(6){transition: 0.55s;}
.fabSub li:nth-child(1).active{bottom: 40px;}
.fabSub li:nth-child(2).active{bottom: 95px;}
.fabSub li:nth-child(3).active{bottom: 150px;}
.fabSub li:nth-child(4).active{bottom: 205px;}
.fabSub li:nth-child(5).active{bottom: 260px;}
.fabSub li:nth-child(6).active{bottom: 315px;}
.fabSub li.active{
    transform: scale(100%);
}


.container .contTit.sildeTit p{
    position: relative;
    width: 30px;
    height: 19px;
    cursor: pointer;
}
.container .contTit.sildeTit p span{
    position: absolute;
    display: block;
    background-color: #333;
    border-radius: 5px;
    width: 13px;
    height: 3px;
    transition: 0.3s;
}
.container .contTit p.helpBtn{
    width: 20px;
    height: 20px;
    border: 2.5px solid #ccc;
    border-radius: 50%;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #ccc;
    cursor: pointer;
}
.container .contTit.sildeTit p span:nth-child(1){transform: rotate(40deg);right: 8px;}
.container .contTit.sildeTit p span:nth-child(2){transform: rotate(-40deg);right: 0;}
.container .contTit.sildeTit p span.active:nth-child(1){transform: rotate(-40deg);right: 8px;}
.container .contTit.sildeTit p span.active:nth-child(2){transform: rotate(40deg);right: 0;}
.container .contTit .toggle p{
    margin-right: 5px;
    font-size: 14px;
}

.editBtn2 span {
	font-size: 14px;
	color: #00b0ff;
	font-weight: bold;
	display: none;
}