@charset "utf-8";


/* dashboard home */
.dashboard-home { padding: 70px 50px 30px; }

/* 탭메뉴 */
ul.cont-tab { margin-top: 30px; padding-bottom:10px; margin-left: 0; border-bottom: 1px solid #dedfe5; width:100%; font-size: 13px;}

/* top 영역 */
.top-area { margin-top: 15px; margin-bottom: 15px; padding-bottom: 15px; border-bottom:1px solid #dedfe5; }
.top-area .float { float: left; width: 450px; background:#e7e9f4; border-radius: 8px; border:1px solid rgba(255,255,255,0.1)}
.top-area .float.center { width: calc(100% - 960px); margin: 0 30px; }
.top-area .date-wrap { padding: 64px 0; text-align: center; }
.top-area .date-wrap .icon-area { width:60px; height: 60px; position: relative; background:#f6f7fc; border-radius: 50%; margin: 0 auto; }
.top-area .date-wrap .icon-area img { width:25px; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); }
.top-area .date-wrap .date-area .day { font-size: 1.4rem; font-weight: 300; }
.top-area .date-wrap .date-area .date { font-size: 1.7rem; padding-top:3px; letter-spacing: 0; }
.top-area .date-wrap .time-area { clear: both; width: 100%; padding: 20px 0; }
.top-area .date-wrap .time-area .time { font-weight: 900; font-size: 4rem; letter-spacing: 1.2px; }
.top-area .date-wrap .time-area .time .txt { font-size: 1.6rem; font-weight: 500; letter-spacing: -0.5px; color: #12144d; }
.top-area .chart-wrap { padding: 40px; }
.top-area .chart-wrap .chart-box { text-align: center; }
.top-area .chart-wrap.center .chart-box { float: left; width: 50%; }
.top-area .chart-wrap .chart-box .tit { font-size: 1.6rem; padding-bottom:20px; font-weight: 500; color:#12144d;}
.top-area .chart-wrap .chart-box .chart img { height: 215px; }

/* printer list */
.printer-list-area .printer-box { float: left; width: calc(25% - 15px); padding:20px; border-radius: 8px; background:#fff; border: 1px solid #d2d8e9; box-shadow: 0 0 0 5px #e7e9f4; margin-bottom: 20px; cursor: pointer;}
.printer-list-area .printer-box:not(:nth-child(4n)) { margin-right:20px;}
.printer-list-area .printer-box:hover { border-color: #a9abbf;}
.printer-list-area .printer-box.error-box:hover,
.printer-list-area .printer-box.error-box { box-shadow: 0 0 0 5px #fbdfdf; border-color: #e69b9b; }
.printer-list-area .printer-box .printer-img { float: left; width: 150px; height:150px; position: relative; margin-right:20px; }
.printer-list-area .printer-box .printer-img img { max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 20px; }
.printer-list-area .printer-box .printer-info { float:left; width: calc(100% - 170px); }
.printer-list-area .printer-box .printer-info .tit { font-size: 1.9rem; font-weight: 600; padding-bottom: 5px;}
.printer-list-area .printer-box .printer-info .txt { font-size:1.3rem; color: #9e9eb4; font-weight: 500; }
.printer-list-area .printer-box .printer-chart { margin-top: 10px; }
.printer-list-area .printer-box .printer-chart .bar-wrap { float:left; text-align: center; }
.printer-list-area .printer-box .printer-chart .bar-wrap .bar { display: inline-block; height: 7px; width:100%; }
.printer-list-area .printer-box .printer-chart .bar-wrap.normal .bar { background: #4caf50;border-radius: 10px 0 0 10px; }
.printer-list-area .printer-box .printer-chart .bar-wrap.error .bar { background: #dc4747; border-radius: 0 10px 10px 0;}
.printer-list-area .printer-box .printer-chart .bar-wrap.error .txt { font-size: 1.2rem; }
.printer-list-area .printer-box .printer-status { margin-top: 15px; padding-top: 7px; border-top: 1px dashed #b6b8c3; }
.printer-list-area .printer-box .printer-status .status-tit { float: left; color: #9e9e9e; }
.printer-list-area .printer-box .printer-status .status { float: right; position: relative; padding: 3px 10px; letter-spacing: 0; border-radius: 3px; color:#fff;}
.printer-list-area .printer-box .printer-status .status.normal { background: #4caf50; }
.printer-list-area .printer-box .printer-status .status.error { background: #dc4747; }
.printer-list-area .printer-box .printer-status .status.check { background: #4e6672; }

.printer-list-area .printer-box .printer-cctv { display: block; margin-top: 15px;}
.printer-list-area .printer-box .printer-cctv a.videocam { display: inline-block; border-radius: 30px; background: #e7e9f4; font-size: 11px; line-height: 25px; font-weight: 500; padding: 0 15px; color: #989ac6; margin: 0 2px; transition: background .25s, color .25s; }
.printer-list-area .printer-box .printer-cctv a.videocam span.material-icons { font-size: 19px; position: relative; top: 5px; }
.printer-list-area .printer-box .printer-cctv a.videocam:hover { background: #d3d8e8; }

@keyframes c-opacity {
    0% { opacity: 1; }
    100% { opacity: 0; }
}