@charset 'utf-8';
html{overflow-y:hidden!important;}
body{min-width:320px;padding: 0!important;}
html,body,#wrapper{height:100%;}

/* ******************************************************************************************************

    사이드 네비게이션

****************************************************************************************************** */

.nav-collapse-btn{position: relative;height:100%;color:transparent;}
.nav-collapse-btn > span{position:absolute;left:50%;top:50%;display:block;width:13px;height:2px;margin:-1px 0 0 -6.5px;background:#a7abb7;}
.nav-collapse-btn > span:before,
.nav-collapse-btn > span:after{content:'';display:block;position:absolute;left:0;width:100%;height:100%;background:#a7abb7;}
.nav-collapse-btn > span:before{top:-4px;}
.nav-collapse-btn > span:after{top:4px;}

.setting-list{display:none;position:absolute;z-index:100;top:100%;width:100%;max-height:600px;overflow-y:auto;background:#fff;border:1px solid #e2e2e2;border-radius:0 0 3px 3px;border-radius:3px;-webkit-box-shadow: 0px 0px 5px 0px rgba(140,140,140,0.5);-moz-box-shadow: 0px 0px 5px 0px rgba(140,140,140,0.5);box-shadow: 0px 0px 5px 0px rgba(140,140,140,0.5);}
.setting-list li{border-bottom:1px solid #e2e2e2;}
.setting-list li:last-child{border-bottom:0;}
.setting-list li > button,.setting-list li > a{display:block;text-align:center;width:100%;padding:11px 5px;color:#4a4a4a;font-weight:700;word-break: keep-all;}

/* 네비 전체박스 */
.nav-container{position: fixed;top:0;z-index:101;width:250px;height:100%;background:#2f3541;will-change: transform;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
html.direction-left .nav-container{left:0;}
html.direction-right .nav-container{right:0;}
html.direction-right .nav-container::-webkit-scrollbar { display: none;}
html.direction-right .nav-container{-ms-overflow-style: none;}
.nav-container.overflowY{overflow-y:auto;}
.nav-container .nav-header h1{margin:0;}
.nav-container.collapse{width:65px;}
.nav-container.collapse .nav-header{padding:15px;text-align:center;}
.nav-container.collapse .nav-header h1,
.nav-container.collapse .nav-header .page-settings{display:none;}
.nav-container.collapse .nav-header .nav-collapse-btn{position:relative;top:auto;left:auto;right:auto;}
.nav-container.collapse .main-menu > ul > li > a{color:transparent;line-height:0;text-indent:0;padding-top:15px;}
.nav-container.collapse .main-menu > ul > li > a > i{display:block;margin:0 auto;top:0;}
.nav-container.collapse .main-menu > ul > li > a > span.main-menu-arr{display:none;}
.nav-container.collapse .main-menu > ul > li{position: relative;}
.nav-container.collapse .main-menu > ul > li > ul{display:none;position: absolute;top: -1px;width:210px;}
.nav-container.collapse .main-menu > ul > li > a > img{display: block;margin: 0 auto;}
html.direction-left .nav-container.collapse .main-menu > ul > li > ul{left:100%;}
html.direction-right .nav-container.collapse .main-menu > ul > li > ul{right:100%;}
.nav-container.collapse .main-menu > ul li ul{display: none!important}
.nav-container.collapse .main-menu > ul li:hover ul{display: block!important;}
.nav-container.collapse .main-menu > ul > li > ul > li > a{padding-left:30px;}
.main-menu li{list-style:none;}
.main-menu > ul > li.is-active > a{background:#676FB2;}

/* 로고, 스킨, 설정, 메뉴 버튼 */
.nav-header{position: relative;padding:56px 0 16px 0;z-index:10;background:#2f3541;}
.nav-header h1 a{display:block;/*height:33px;*/font-size:0;}
.nav-header h1 a img{width: 158px;height: auto;display: block;margin-left: 29px;}
.nav-header .nav-collapse-btn{position: absolute;right:9px;top:9px;width:33px;height:30px;border:1px solid #595d67;border-radius:3px;text-indent: -999em;}
.nav-header .page-settings{position:absolute;right:56px;top:14px;}
.nav-header .page-settings > ul > li{position:relative;float:left;list-style:none;}
.nav-header .page-settings > ul > li > button{line-height:17px;color:transparent;overflow:hidden;text-indent: -999em;}
.nav-header .page-settings > ul > li.skin > button{width:19px;height:17px;margin-right:13px;background: url(/ccp_img/icon-color.png) 0 0 no-repeat;background-size:19px 17px;}
.nav-header .page-settings > ul > li.admin > button{width:19px;height:17px;margin-right:13px;background: url(/ccp_img/icon-admin.png) 0 0 no-repeat;background-size:19px 17px;}
html.ie8 .nav-header .page-settings > ul > li.skin > button{background: url(/ccp_img/ie8-icon-color.png) 0 0 no-repeat;}
html.ie8 .nav-header .page-settings > ul > li.admin > button{background: url(/ccp_img/ie8-icon-admin.png) 0 0 no-repeat;}
.nav-header .page-settings > ul > li.skin > ul > li > a{position:relative;padding-left:0;padding-right:0;text-align:left;text-indent:35px;color:#505050;}
.nav-header .page-settings > ul > li.skin > ul > li > a:before{content:'';position: absolute;top:13px;left:19px;display:block;width:12px;height:12px;margin-right:4px;background:red;}
.nav-header .page-settings > ul > li.skin > ul > li.current-skin > a:before{background:#2f3541;}
.nav-header .page-settings > ul > li.skin > ul > li.default > a:before{background:#a8acb8;}
.nav-header .page-settings > ul > li.skin > ul > li.black > a:before{background:#000000;}
.nav-header .page-settings > ul > li.skin > ul > li.blue > a:before{background:#084184;}
.nav-header .page-settings > ul > li.skin > ul > li.red > a:before{background:#ca2919;}
.nav-header .page-settings > ul > li.skin > ul > li.green > a:before{background:#25ba9c;}
.nav-header .page-settings > ul > li.config > button{width:17px;height:17px;background: url(/ccp_img/icon-setting.png) 0 0 no-repeat;background-size:17px 17px;}
html.ie8 .nav-header .page-settings > ul > li.config > button{background: url(/ccp_img/ie8-icon-setting.png) 0 0 no-repeat;}
.nav-header .page-settings > ul > li.config > ul > li > a{color:#525252;}
.nav-header .page-settings > ul > li > ul{width:140px;top:30px;overflow:visible;}
html.direction-left .nav-header .page-settings > ul > li > ul{left:-16px;}
html.direction-right .nav-header .page-settings > ul > li > ul{right:-16px;}
.nav-header .page-settings > ul > li > ul:after{content:'';display:block;position: absolute;top:-7px;width: 0;height: 0;border-style: solid;border-width: 0 5.5px 8px 5.5px;border-color: transparent transparent #ffffff transparent;}
html.direction-left .nav-header .page-settings > ul > li > ul:after{left:18px;}
html.direction-right .nav-header .page-settings > ul > li > ul:after{right:18px;}
html.direction-right .nav-header .page-settings > ul > li.skin > ul:after{right:32px;}

/* 메인 메뉴 */
.main-menu-wrap{width:100%;height: calc(100% - 105px)}
.main-menu-wrap .mCSB_inside >.mCSB_container{position: absolute !important;width:100%;margin:0;}
.main-menu-wrap .mCSB_scrollTools .mCSB_draggerRail{display:none;}
.main-menu-wrap .mCSB_scrollTools{width:4px;right:3px;opacity:0;}
.main-menu-wrap .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{border-radius:0;background-color:rgb(167,171,183);background-color:rgba(167,171,183,1);}
.main-menu-wrap .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:rgb(167,171,183);background-color:rgba(167,171,183,1);}
.main-menu{width:100%;}
.main-menu a{color:#fff;}
.main-menu > ul > li{border-bottom:1px solid #3d434f;}
.main-menu > ul > li:first-child{border-top:1px solid #3d434f;}
.main-menu > ul > li > ul > li:hover > a,
.main-menu > ul > li > ul > li.is-active > a{background:#656996;box-shadow: 0px 1px 6px 0px rgba(17, 17, 17, 0.75);-moz-box-shadow: 0px 1px 6px 0px rgba(17, 17, 17, 0.75);-webkit-box-shadow: 0px 1px 6px 0px rgba(17, 17, 17, 0.75);}
.main-menu > ul > li > a{position:relative;display:block;width:100%;height:49px;line-height:49px;text-indent:30px;overflow:hidden;}
.main-menu > ul > li > a > span.main-menu-arr{content:'';display:block;position:absolute;top:20px;right:30px;width:6px;height:9px;background: url(/ccp_img/icon-menu-arr-right.png) 0 0 no-repeat;background-size:6px 9px;}
.main-menu > ul > li.is-active > a > span.main-menu-arr{width:9px;height:6px;right:29px;background: url(/ccp_img/icon-menu-arr-down.png) 0 0 no-repeat;background-size:9px 6px;}
.main-menu > ul > li > a > img{vertical-align: middle;margin-right: 20px;width: 18px;height: 18px;}
.main-menu > ul > li > ul{background:#2c303b;padding:11px 0}
.main-menu > ul ul{display: none;}
.main-menu > ul > li > ul > li{background:transparent;}
.main-menu > ul > li > ul > li > a{display:block;padding:9px 0 9px 60px;font-size:12px;line-height:1;}
.main-menu > ul > li > ul > li:last-child{margin-bottom:0;}
.main-menu > ul > li > ul > li > ul > li{}
.main-menu > ul > li > ul > li > ul > li > a{display:block;padding:9px 0 9px 75px;font-size:12px;line-height:1;}
.nav-bottom{display:none;}

/* ******************************************************************************************************

    본문

****************************************************************************************************** */
.view-container{position:relative;height:100%;}
html.direction-left .view-container{margin-left:250px;}
html.direction-right .view-container{margin-right:250px;}
.view-container.m-expand{position: fixed;left:0;top:0;right:0;bottom:0;}
html.direction-left .view-container.collapse{margin-left:65px;}
html.direction-right .view-container.collapse{margin-right:65px;}
.page-content{height: 100%}
.page-view{position: absolute;bottom:0;width: 100%;height: calc(100% - 87px);}
.page-view .iframe{width: 100%;height: 100%;border: 0;}
.page-view div.iframe{padding: 30px 20px;overflow-y: scroll;}

/* 헤더 */
.header{position:relative;background: #fff;-webkit-box-shadow: 0 3px 4px 0 rgba(0,0,0,0.14), 0 3px 3px -2px rgba(0,0,0,0.12), 0 1px 8px 0 rgba(0,0,0,0.2);box-shadow: 0 3px 4px 0 rgba(0,0,0,0.14), 0 3px 3px -2px rgba(0,0,0,0.12), 0 1px 8px 0 rgba(0,0,0,0.2);z-index:99}
@media (max-width: 1024px) {
    
}
.header.set-fixed{position: fixed;top: 0;left: 0;z-index: 21;width: 100%;height: 39px;}
.header .user-info{position:relative;height:39px;background:#676fb2;}
.user-info .nav-collapse-btn{position: absolute;top:0;display:none;background:#2f3541;}
html.direction-left .user-info .nav-collapse-btn{left:0;}
html.direction-right .user-info .nav-collapse-btn{right:0;}
.user-info .nav-collapse-btn > span{width:15px;}
.user-info .site-setting{float:left;position:relative;min-width:192px;height:100%;}
.user-info .site-setting > button{width:100%;height:100%;color:#fff;border-right:1px solid #767fba;text-align:center;padding:0 35px 0 10px;
    background:url(/ccp_img/site_list_arr.png) no-repeat 93% 18px;background-size:9px 6px;word-break:keep-all;}
.ie8 .user-info .site-setting > button, 
.ie9 .user-info .site-setting > button{border:0;}
.user-info .site-setting .site.setting-list{border-top:0;border-radius:0 0 3px 3px;}
.setting-list li{list-style:none;}
.user-info .user-push{float:left;height:100%;padding-top:11px;}
.user-info .user-push > ul > li{float:left;padding:0 14px;}
.user-info .user-push > ul > li > a{position:relative;display:block;font-size:0;color:transparent;}
.user-info .user-push > ul > li > a > span{position: absolute;top:-4px;width:18px;height:18px;border-radius:50%;color:#fff;text-align:center;line-height:17px;font-size:11px;font-weight:700;}
.user-info .user-push > ul > li.error > a{width:17px;height:18px;background-position:-59px -102px;}
.user-info .user-push > ul > li.favorite > a{width:19px;height:19px;background-position:-5px -103px;}
.user-info .user-push > ul > li.alarm > a{width:15px;height:18px;background-position:-34px -102px;}
.user-info .user-push > ul > li.error > a > span{left:11px;background:#04b8ed;}
.user-info .user-push > ul > li.favorite > a > span{left:15px;background:#f44a39;}
.user-info .user-push > ul > li.alarm > a > span{left:10px;background:#f4db39;}
.user-info .user-state{float:right;padding-top:14px;line-height:1;height:100%;}
.user-info .user-state li{list-style:none;}
.user-info .user-state > ul > li{position:relative;float:left;color:#d8dcff;font-size:12px;}
.user-info .user-state > ul > li.user-name{position:relative;padding-right:27px;}
.user-info .user-state > ul > li.user-name:after{content:'';font-size:0;position:absolute;right:0;top:0;display:block;width:1px;height:13px;background:#e2e2e2;}
.user-info .user-state > ul > li.logout > a{padding:0 57px 0 27px;color:#d8dcff;background:url(/ccp_img/logout_top.png) no-repeat 83px 0;background-size: contain;}
.user-info .user-state > ul > li > strong{color:#fff;}
.user-info .user-state > ul > li > .user-picture{position: relative;top:-5px;right:6px;display:block;float:left;width:22px;height:22px;background-color:#a7abb6;border-radius:50%;text-align:center;overflow:hidden;vertical-align:middle;}
.user-info .user-state > ul > li > .user-picture img{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}
html.ie8 .user-info .site-setting > button{padding:0 20% 0 10%;text-align:left;background: url(/ccp_img/ie8-site_list_arr.png) no-repeat 89.58% 18px;}


.loaderbar {position: fixed;top: 0;left: 0;z-index: 40000;opacity: 0;-webkit-transition: opacity 0.4s linear 0.4s;transition: opacity 0.4s linear 0.4s;}
.loaderbar.is-loading {opacity: 1;-webkit-transition: none;transition: none;bottom:0;right:0;cursor:progress;}
.loaderbar .progress {position: fixed;top: 0;left: 0;z-index:40000;height: 3px;background: #bfd1fa;box-shadow: 0 0 10px rgba(188,209,255,0.8);-webkit-transition: width 0.4s ease;transition: width 0.4s ease;
will-change: width}


/* ******************************************************************************************************

    푸터

****************************************************************************************************** */
.footer{display: none;height:60px;text-align:center;color:#898989;}
.footer strong{color:#838bd2;}