/* login */
.cloud_01{position: absolute;left: 0;top: -260px;z-index: -10;opacity: 0.6; background: url(../images/cloud_01.png) no-repeat; width: 850px; height: 360px;-webkit-animation-name: cloud_01;-webkit-animation-duration: 60s; -webkit-animation-iteration-count: 3; animation-name:cloud_01 ;animation-duration: 60s;animation-iteration-count: infinite;}
.cloud_02{position: absolute;right: 0;bottom: -280px; z-index: -10; opacity: 0.6;background: url(../images/cloud_02.png) no-repeat; width: 768px; height: 642px;-webkit-animation-name: cloud_02;-webkit-animation-duration: 120s; -webkit-animation-iteration-count: 3; animation-name:cloud_02 ;animation-duration: 120s;animation-iteration-count: infinite;}
.con .cloud_01{position: absolute;left: 0;top:0;z-index: -10; background: url(../images/cloud_01.png) no-repeat; width: 850px; height: 360px;-webkit-animation-name: cloud_01;-webkit-animation-duration: 60s; -webkit-animation-iteration-count: 3; animation-name:cloud_01 ;animation-duration: 60s;animation-iteration-count: infinite;}
.con .cloud_02{position: absolute;right: 0;bottom: -160px; z-index: -10; background: url(../images/cloud_02.png) no-repeat; width: 768px; height: 642px;-webkit-animation-name: cloud_02;-webkit-animation-duration: 120s; -webkit-animation-iteration-count: 3; animation-name:cloud_02 ;animation-duration: 120s;animation-iteration-count: infinite;}

.login_wrap{width: 500px; height:290px; margin: 0 auto; margin-top: 300px;padding: 20px; background: #ffffff66; box-shadow: 10px 10px 40px #8fc8ce7a;border-radius: 10px;}
.login_wrap p{padding: 17px 5%;line-height: 30px;font-size: 24px;}
.login_wrap p span:first-child{color:#006FFF; font-weight:bold;}
.login_wrap p span:nth-child(2){color:#b1a080; font-weight:bold;}
.login_wrap .login_area{padding: 0 5%;}
.login_wrap .login_area input[type="text"], .login_area input[type="password"] {width: 100%;height: 30px;margin-bottom: 20px;padding-left: 10px;background: #ffffff8c;border:none; font-size: 14px;border-radius: 10px;}
.login_wrap .login_btn{width: 40%;float: right;margin: 0; background: linear-gradient(-170deg, #ffcfd2, #47d8e6);transition: 0.5s;}
.login_wrap .login_btn:hover{box-shadow: 5px 5px 10px #7ab5adad;}
.login_wrap .login_btn a{color: #fff; font-weight: bold;}
.login_wrap .loginCheck{width: 40%; float: left; margin-top: 10px; }
.login_wrap .loginCheck .loginCheck-text{color: #7a7a7a;}
.login_wrap input[type="checkbox"]{width:20px;height:20px;border: 1px solid #ccc; vertical-align:middle;}
.login_wrap button{width: 90%;margin:20px 25px 20px;padding: 10px 0px;background: #FED33A;border-radius: 20px;text-align: center;color: #3A1F20; font-weight: bold;}

/*main */
.main {display: flex; width: 100%; min-width: 1280px; margin: 0 auto;padding: 50px 30px 30px 30px;}
.bg_br {background:rgba(255, 255, 255, 0.8); border-radius: 20px;box-shadow:0 5px 20px #69878e61;}
.sub-title {display: inline-block;margin-top: 20px;padding: 8px 20px 8px 5px;background: #38455D;border-radius: 0 20px 20px 0;color: #fff;font-weight: 600;min-width: 130px;}
.sub-title_text {text-align: center;padding: 20px;font-weight: bold;}
/*nav*/
.main .left-area {display: inline-block;position: relative; min-width: 250px;/*height: 100%;*/margin-right: 30px; box-shadow:8px 3px 20px #69878e61;}
.main .left-area .logo {margin-top: 20px; text-align: center;}
.main .left-area .lg_btn:hover {box-shadow:0 0 8px #4977C8 ;}
.main .left-area .information {position: relative;}
.main .left-area .onoff-info, .main .left-area .drive-info, .main .left-area .control-info {margin: 28px;/*text-align: center;*/}
.main .left-area .Pinwheel {position: absolute; right: 0; bottom: -32px;}
/*ntent*/
.main .content-wrap {width:100%; min-width:940px;}
/*main content*/
.main .content-wrap .main-top {display:flex; justify-content: space-between; width: 100%;padding-bottom: 10px;}
.main-sign {display:inline-block;text-align: center; background: #38455D;border-radius: 20px;font-weight: 600;height: 40px;line-height: 40px;padding:0 20px;}
.main-sign .main-sign_text {margin-top: 20px;font-weight: bold;color: #fff;}
.main-sign2 {display:inline-block;text-align: center; background: #fff;border-radius: 20px;font-weight: 600;height: 40px;line-height: 40px;padding:0 4px 0 20px;}
.main-sign2 span:nth-child(2) {margin-top: 20px;font-weight: bold;color: #fff;text-align: center; background: #38455D;border-radius: 20px;padding:5px 10px;margin-left: 10px;}
.main-sign3 {display:inline-block;text-align: center; background: #fff;border-radius: 20px;font-weight: 600;height: 40px;line-height: 40px;padding:0 4px;}

.main .main-content{position: relative; width: 100%;/*height: 100vh;*/}
#cardbox-list {height:750px;}
.cardbox-line {border-bottom: 2px solid!important; height: 40px;line-height: 40px; display:flex;}
.cardbox-line span {float: right;  display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width:80%; margin-left:10%; text-align:end; padding-right:4px;}
.cardbox-img .edit-img {vertical-align: middle;padding-left: 6px;}
.cardbox-cont {width: 100%;padding-top: 20px;display: block;height: 90px;position: relative;box-sizing: border-box;}
.cardbox-cont .cardbox-txt{font-size: 40px;color: #0081f7;font-weight: bold;position: absolute;right: 0;bottom: 0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

/*입력품 */
.form-group {display: flex;justify-content: center;align-items: center;padding-bottom: .4rem}
.form-input {float: left;position: relative;width: 100%;}
.form-input-box {border: 1px solid #ddd;padding:4px 10px;height: 37px;overflow: auto;line-height: 24px;color: #797979;}
.form-label {font-weight: 600;font-size: 14px;width: 100px;text-align: left;}
.form-label-textarea {font-weight: 500;height: 50px;padding-top: calc(1rem + 1px);padding-bottom: calc(1rem + 1px);padding-left: calc(1rem + 1px);/*margin-bottom: 0;*/line-height: 1.5;background: #f9f9f9;border: 1px solid #ddd;border-right: 0px;border-radius: 2px 0 0 2px;margin-bottom: 4px;}
.form-label-calendar {font-weight: 500;height: 3.7rem;padding-top: calc(1rem + 1px);padding-bottom: calc(1rem + 1px);padding-left: calc(1rem + 1px);/*margin-bottom: 0;*/margin-right: 10px;}
/*셀렉트박스 */
.select-box {display: block;width: 100%;min-width:60px;height: 37px;padding: 6px;font-weight: 400;border-radius: 4px;line-height: 1.5;background-clip: padding-box;border: 1px solid #ddd;color: #797979;background-color: #fff;transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; text-align-last: center;}
.select-box label {position: absolute; top: 1px; left: 5px; padding: 6px;z-index: -1;}
.select-box2 {display: block;width: 100%;min-width:60px;height: 37px;padding: 6px;font-weight: 400;border-radius: 4px;line-height: 1.5;background-clip: padding-box;border: 1px solid #ddd;color: #797979;background-color: #fff;transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; text-align-last: left;}
.select-box2 label {position: absolute; top: 1px; left: 5px; padding: 6px;z-index: -1;}

.drive-info>ul>li.circle {text-align: center;width: 60px;height: 60px;line-height: 60px;background: #fff;font-weight: 600;border-radius: 50%;-webkit-border-radius: 50%;display: inline-block;box-shadow: 3px 1px 4px #69878e61;border: 1px solid #ddd;}
.drive-info>ul>li.circle.on button {text-align: center;width: 60px;height: 60px;line-height: 60px;color: #fff;font-weight: 600;background: radial-gradient( #20b4e2 20%, #2acdff 60%, #20c6fa 10% );border-radius: 50%;-webkit-border-radius: 50%;display: inline-block;/*box-shadow: 3px 1px 4px #c1c1c1;*/}
.drive-info {text-align: center;}
.onoff-info {margin: 20px 42px!important;width: 200px}
.onoff-info>ul>li.circle {text-align: center;width: 70px;height: 70px;line-height: 70px;background: #fff;font-weight: 600;border-radius: 50%;-webkit-border-radius: 50%;display: inline-block;box-shadow: 3px 1px 4px #69878e61;border: 1px solid #ddd;}
.onoff-info>ul>li.circle:nth-child(1) {margin-right: 30px}
.onoff-info>ul>li.circle02 {text-align: center;position: absolute;margin-left: 4px;width: 70px;height: 70px;line-height: 70px;background: #fff;font-weight: 600;border-radius: 50%;-webkit-border-radius: 50%;display: inline-block;box-shadow: 3px 1px 4px #69878e61;border: 1px solid #ddd;z-index: 9999;}
.onoff-info>ul>li.circle02.on button {text-align: center;width: 70px;height: 70px;line-height: 70px;color: #fff;font-weight: 600;background: radial-gradient( #20b4e2 20%, #2acdff 60%, #20c6fa 10% );border-radius: 50%;-webkit-border-radius: 50%;display: inline-block;/*box-shadow: 3px 1px 4px #69878e61;border: 1px solid #ddd;z-index: 9999;*/}
.onoff-info>ul>li.circle.on button {text-align: center;width: 70px;height: 70px;line-height: 70px;color: #fff;font-weight: 600;background: radial-gradient( #20b4e2 20%, #2acdff 60%, #20c6fa 10% );border-radius: 50%;-webkit-border-radius: 50%;display: inline-block;/*box-shadow: 3px 1px 4px #69878e61;border: 1px solid #ddd;z-index: 9999;*/}
.onoff-info>ul>li.circle.click button {text-align: center;width: 70px;height: 70px;line-height: 70px;color: #fff;font-weight: 600;background: radial-gradient( #20b4e2 20%, #2acdff 60%, #20c6fa 10% );border-radius: 50%;-webkit-border-radius: 50%;display: inline-block;z-index: 9999;/*box-shadow: 3px 1px 4px #69878e61;border: 1px solid #ddd;z-index: 9999;*/}
.onoff-info>ul>li.circle.unclick button {text-align: center;width: 70px;height: 70px;line-height: 70px;color: rgb(0, 0, 0);font-weight: 600;background: radial-gradient( #ffffff 20%, #ffffff 60%, #ffffff 10% );border-radius: 50%;-webkit-border-radius: 50%;display: inline-block;z-index: 9999;/*box-shadow: 3px 1px 4px #69878e61;border: 1px solid #ddd;z-index: 9999;*/}
.onoff-info>ul{padding: 20px 0;}
.onoff-info>ul:nth-child(1) {border-bottom: 1px solid #ddd;padding-top: 0px;}
/* 페이지 */
.paging {margin-top:70px; margin-bottom:60px;}
.paging ul {font-size:0; text-align:center; line-height:1;}
.paging ul li {display:inline-block; width:auto; min-width:28px; height:28px; box-sizing:border-box; border:1px solid #cccdd1; padding:0 5px; margin:0 5px;background: #fff;}
.paging ul li a {line-height:28px; display:block; font-size:12px;}
.paging ul li.on {background: #ef1931;border:1px solid #ef1931;}
.paging ul li.on a {color: #fff}
.paging ul li:first-child {margin-left:0;}
.paging ul li:last-child {margin-right:0;}
/* 레이어 팝업 */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 9999; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.row {display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;}
.modal-header {display: -ms-flexbox;display: flex;padding: 20px;border-bottom: 2px solid #1e1f21;box-sizing: border-box;}
.modal-header .modal-title {font-size: 24px;-ms-flex: 1;flex: 1;display: -ms-flexbox;display: flex;line-height: 24px;}
.close {color: #aaa;float: right;font-weight: 500;background: #fff;}
.close:hover,.close:focus {color: black;text-decoration: none;cursor: pointer;}
.modal .modal-content {background-color: #fefefe;margin: 5% auto; border-radius: 30px;/* 15% from the top and centered *//*padding: 20px;*/border: 1px solid #888;width: 50%; /*Could be more or less, depending on screen size */}
.modal .modal-content .modal-body {padding: 20px 40px}
.modal .modal-footer {padding: 30px;}
.col-100 {width: 100%;}
.col-50 {width: 50%;}
.col-20 {width: 25%;}
.col-80 {width: 75%;padding-right: 10px;}
.text-input {border-radius: 40px; height: 40px; border: 1px solid #eee;box-shadow: 1px 1px 4px #69878e61;padding-left: 10px;width: 100%}
.text-input02 {height: 40px; border: 1px solid #ddd;background: #fff;padding-left: 10px;width: 100%; text-align:center;}
.btn-success {background: #38455D;border-radius: 20px;padding: 10px 20px;color: #fff}
.btn-cancel {background: #fff;border-radius: 20px;padding: 10px 20px;border: 1px solid #eee;}
.btn-default {background: #38455D;border-radius: 20px;padding: 8px 16px;color: #fff}
.btn-default2 {border: 1px solid #38455D;border-radius: 20px;padding:5px 10px;margin-right: 10px;}
.modal-body>.modal-title, .form-group>.modal-title {display: inline-block;margin-top: 10px;margin-bottom: 10px;padding: 8px 20px 8px 20px;background: #38455D;border-radius: 20px;color: #fff;font-weight: 600;}
.btn-default a {color: #fff;font-weight: 600;}
.btn-default2 a {color: #000;font-weight: 600;}
.tc {text-align: center;}
.tr {text-align: right}
.fl{float: left;}
.di-inblock {display: inline-block;}
.btn-sm {border: 1px solid #ddd;background-color: #f9f9f9;color: #333;border-radius: 20px;font-size: 12px;padding: 6px 20px;}
.btn-default[disabled] {opacity: 0.5;}
.h100 {height: 100px}
#checkId {display:initial;}
#air-volume-status {display:inline-block;}
/* title */
h1{
  color: #aa8e8d;
  text-align: center;
  font-size: 32px;
  font-weight: 900;
}
/* tasks */
input[type=checkbox] {
  display: none;
}
.cardbox{
  display: inline-block;padding: 14px 10px;width: 14%;margin-bottom: 5px;border-radius: 20px;background: #fff;box-shadow:0 5px 20px #69878e61;box-sizing: border-box; user-select: none; 
           border: 3px solid white;
}
.cardbox-border{
  border: 3px solid #FFC57A;
}

.cardbox-background{
  border: 3px solid #FFC57A!important; background:#FFC57A!important;
}

/*
#label-1:checked ~ label[for=label-1],
#label-2:checked ~ label[for=label-2],
#label-3:checked ~ label[for=label-3],
#label-4:checked ~ label[for=label-4],
#label-5:checked ~ label[for=label-5],
#label-6:checked ~ label[for=label-6],
#label-7:checked ~ label[for=label-7],
#label-8:checked ~ label[for=label-8],

#label-10:checked ~ label[for=label-10]{
  border: 3px solid #FFC57A;
}
*/
/*
#label-1:checked ~ label[for=label-1] h2 span,
#label-4:checked ~ label[for=label-4] h2 span,
#label-3:checked ~ label[for=label-3] h2 span,
#label-4:checked ~ label[for=label-4] h2 span,
#label-5:checked ~ label[for=label-5] h2 span,
#label-6:checked ~ label[for=label-6] h2 span,
#label-7:checked ~ label[for=label-7] h2 span,
#label-8:checked ~ label[for=label-8] h2 span,

#label-10:checked ~ label[for=label-10] h2 span{
  color: #f6bd66;
}
#label-9:checked ~ label[for=label-9]{border: 3px solid #FFC57A!important; }
*/
em {}
@media all and (max-width: 1280px) {
 /*.cardbox{
    display: inline-block;padding: 14px 10px;width: 13.9%;margin-bottom: 20px;border-radius: 20px;background: #fff;box-shadow:0 5px 20px #69878e61; box-sizing: border-box;
  }*/
  .cardbox-cont .cardbox-txt{font-size: 34px;color: #0081f7;font-weight: bold;position: absolute;right: 0;bottom: 0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
}