@charset "utf-8";

/*********************************** 
디자이너 외에 수정이 불가합니다.
필요시 협의 부탁드립니다.
***********************************/
:root {
  --logo_url: url(/cproject/data/logo/logo_white.svg?1001)
}

html, body{ background-color:#999a9b; }

.wrap header{ background:url(../images/skin_1/t_bg.png) repeat-x top; }
.wrap header h1{ position:absolute; top:15px; left:20px; width:160px; height:40px; text-indent:-9999px; }
.wrap header h1 a{ background:var(--logo_url) no-repeat center; background-size:contain; }

.wrap header .btn_change_layout{ background:#5f86b1; border:2px #8aa6c4 solid; }
.wrap header .btn_change_layout.tree span.icon{ background-position:-108px -295px; }
.wrap header .btn_change_layout.menu span.icon{ background-position:-120px -295px; }
.wrap header .btn_change_layout:hover{ background:#5179a8; }

/* organization */
.wrap header .organization{ position:absolute; top:30px; left:240px; z-index:1009; min-width:1000px; height:22px; }
.wrap header .organization span{ color:#f4f4f4; }
.wrap header .organization div.select_organ{ }
.wrap header .organization div.select_organ a{ border:1px #385274 solid; color:#f4f4f4; background:url(../images/skin_1/organization_sel_bg.png) repeat-x bottom left;  }
.wrap header .organization div.select_organ a::after{ background:url(../images/skin_1/btn_arr_white.png) no-repeat right 50%; }
.wrap header .organization div.select_organ ul{ border:1px #385274 solid; }

.wrap header .organization .select2-container--default .select2-selection--single{ background:url(../images/skin_1/organization_sel_bg.png) repeat-x bottom left; border:1px #385274 solid; }
.wrap header .organization .select2-container--default .select2-selection--single .select2-selection__rendered{ color:#f4f4f4; }
.wrap header .organization .select2-container--default .select2-selection--single .select2-selection__arrow b{ border-color: #f4f4f4 transparent transparent transparent; }
.wrap header .organization .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{ border-color:transparent transparent #f4f4f4 transparent; }

/* t_util */
.wrap header .t_util>ul>li button{ color:#fff; }
.wrap header .t_util>ul>li button span.icon{ background:url(../images/skin_1/t_util_btn.png) no-repeat -40px -20px;}
.wrap header .t_util>ul>li button span.arrow{ background:url(../images/skin_1/btn_arr_white.png) no-repeat -8px 50%; }
.wrap header .t_util>ul>li.user button span.icon{  background-position: -40px -20px; }
.wrap header .t_util>ul>li.select_language button span.icon{ width:30px; background-position:0 -20px; }
.wrap header .t_util>ul>li.select_link button span.icon{ width:20px; height:20px; background-position:0 0px;  }
.wrap header .t_util>ul>li.btn_search button span.icon{ background-position:-133px 0; }
.wrap header .t_util>ul>li.btn_setting button span.icon{ background-position:0 0; }
.wrap header .t_util>ul>li.btn_help button span.icon{ background-position:-76px 0; }
.wrap header .t_util>ul>li.btn_alarm button span.icon{ background-position:-57px -20px; }
.wrap header .t_util>ul>li.btn_download button span.icon{ background-position:-57px -0px; }
.wrap header .t_util>ul>li.btn_topologyMap button span.icon{ background-position:-95px -20px; }
.wrap header .t_util>ul>li.bar{ color:#9caec2; font-size:10px; }
.wrap header .t_util>ul>li.btn_search button, .wrap header .t_util>ul>li.btn_setting button, .wrap header .t_util>ul>li.btn_help button, .wrap header .t_util>ul>li.btn_alarm button{ font-size:0; }
.wrap header .t_util>ul>li.select_link button span.icon{background:url(../images/tiscreen/link_icon_w.svg) no-repeat 0px 30%;}

/* tnb */
.tnb{ position:absolute; top:0; left:240px; }
.tnb>ul{}
.tnb>ul>li{ float:left; position:relative; }
.tnb>ul>li>a{ display:block; padding:14px 16px 6px 16px; height:60px; box-sizing:border-box; color:#fff; text-decoration:none; text-align: center; opacity:0.9; }
.tnb>ul>li>a>span.icon{ display:block; width:30px; height:22px; margin: 0 auto; background:url(../images/skin_1/tnb_icon.png) no-repeat 0 0; }
.tnb>ul>li.tifront>a>span.icon{ background-position:-90px 0; }
.tnb>ul>li.timatrix>a>span.icon{ background-position:-90px -35px }
.tnb>ul>li.tindm>a>span.icon{ background-position:-90px -70px }
.tnb>ul>li.network>a>span.icon{ background-position:-90px -105px }
.tnb>ul>li.report>a>span.icon{ background-position:-90px -140px }
.tnb>ul>li.cctv>a>span.icon{ background-position:-90px -280px }
.tnb>ul>li.plugins>a>span.icon{ background-position:-90px -175px }
.tnb>ul>li.configure>a>span.icon{ background-position:-90px -210px }
.tnb>ul>li.system>a>span.icon{ background-position:-90px -245px }
.tnb>ul>li.third_party>a>span.icon{ background-position:-90px -315px }
.tnb>ul>li.dhcp>a>span.icon{ background-position:-90px -350px }
.tnb>ul>li.tisdn>a>span.icon{ background-position:-90px -385px }
.tnb>ul>li.firmware>a>span.icon{ background-position:-90px -420px }

.tnb>ul>li.over>a{ opacity:1; background-color:rgba(0,0,0,0.20); }
.tnb>ul>li.selected>a{ }
.tnb>ul>li>span.icon_arrow{ display:none; width:11px; height:7px; background:url(../images/common/btn_icon.png) no-repeat -360px -36px; position:absolute; left:50%; margin-left:-5px; bottom:0; z-index:10; }
.tnb>ul>li>ul{ position:absolute; top:59px; left:50%; margin-left:-70px;  display:none; background-color:#fff; border:1px #2b4a6e solid; z-index:9; box-shadow:0px 7px 5px -3px rgba(0,0,0,0.3); }
.tnb>ul>li>ul>li{}
.tnb>ul>li>ul>li>a{ display:block; min-width:120px; line-height:1.0em; padding:7px 10px; color:#333; text-decoration:none;  }
.tnb>ul>li>ul>li.over>a{ background-color:#dde3ea; }
.tnb>ul>li>ul>li.selected>a{ background-color:#dde3ea; color:#2162ae;  }

/* wrap_tree */
.lnb_tree{ width:180px; height:100%; border:1px #767676 solid; position:absolute; background:#f3f3f3; top:0; left:10px; overflow:auto; box-sizing:border-box; }

/* lnb */
.wrap .container .lnb{ width:180px; height:100%; border:1px #767676 solid; position:absolute; background:#f3f3f3; top:0; left:10px; box-sizing:border-box; }
.wrap .container .lnb ul{ overflow:hidden; }
.wrap .container .lnb>ul>li{ overflow:hidden; background:#f3f3f3; }
.wrap .container .lnb>ul>li>a{ display:block; border-bottom:1px #ccc solid; cursor:pointer;  background:url(../images/skin_1/lnb_icon_new.png) -550px -100px; font-size:13px; font-weight:bold; color:#666; text-decoration:none; position:relative; }
.wrap .container .lnb>ul>li>a span{ display:inline-block; background:url(../images/skin_1/lnb_icon_new.png) no-repeat; vertical-align:middle; }
.wrap .container .lnb>ul>li>a span.icon{ width:29px; height:29px; }
.wrap .container .lnb>ul>li>a span.icon_arrow{ width:9px; height:9px; background:url(../images/skin_1/lnb_icon_new.png) no-repeat -550px -280px; position:absolute; right:10px; top:50%; margin-top:-4px; z-index:10; }
.wrap .container .lnb>ul>li.tifront a span.icon{ background-position:0 0; }
.wrap .container .lnb>ul>li.timatrix a span.icon{ background-position:0 -35px; }
.wrap .container .lnb>ul>li.tindm a span.icon{ background-position:0 -70px; }
.wrap .container .lnb>ul>li.network a span.icon{ background-position:0 -105px; }
.wrap .container .lnb>ul>li.report a span.icon{ background-position:0 -140px; }
.wrap .container .lnb>ul>li.cctv a span.icon{ background-position:0 -315px; }
.wrap .container .lnb>ul>li.plugins a span.icon{ background-position:0 -175px; }
.wrap .container .lnb>ul>li.configure a span.icon{ background-position:0 -245px; }
.wrap .container .lnb>ul>li.system a span.icon{ background-position:0 -280px; }
.wrap .container .lnb>ul>li.third_party a span.icon{ background-position:0 -350px; }
.wrap .container .lnb>ul>li.dhcp a span.icon{ background-position:0 -385px; }
.wrap .container .lnb>ul>li.tisdn a span.icon{ background-position:0 -420px; }
.wrap .container .lnb>ul>li.firmware a span.icon{ background-position:0 -455px; }
.wrap .container .lnb>ul>li.over>a{ background-position: -550px -130px; color:#555; }
.wrap .container .lnb>ul>li.open{ }
.wrap .container .lnb>ul>li.active>a{ border-bottom:none; border-top:none; background-position:-550px -160px; color:#fff; }
.wrap .container .lnb>ul>li.active>a span.icon{ background-position-x:-360px; }
.wrap .container .lnb>ul>li.open>a span.icon_arrow{ background-position:-559px -280px;  }
.wrap .container .lnb>ul>li.active>a span.icon_arrow{ background-position:-550px -289px;  }
.wrap .container .lnb>ul>li.active.open>a span.icon_arrow{ background-position:-559px -289px;  }

.wrap .container .lnb>ul>li>ul{ padding:4px 10px; display:none; border-bottom:1px #ddd solid; }
.wrap .container .lnb>ul>li>ul>li{ background:url(../images/skin_1/lnb_icon.png) no-repeat -557px -40px; }
.wrap .container .lnb>ul>li>ul>li a{ line-height:14px; padding:5px 10px 5px 20px; display:block; font-size:1.0em; color:#555; }
.wrap .container .lnb>ul>li>ul>li:hover{ background-position:-557px -40px; background-color:#eaeaea; }
.wrap .container .lnb>ul>li>ul>li.active{ background-position:-557px -5px; background-color:#dde3ea; }
.wrap .container .lnb>ul>li>ul>li:hover a{ color:#333; text-decoration:none; }
.wrap .container .lnb>ul>li>ul>li.active a{ color:#2162ae; text-decoration:none; }
.wrap .container .lnb>ul>li>ul>span.sub_tit{ display:block; font-size:0.9em; color:#888; font-weight:bold; padding:0 0 0 0; }

.wrap .container .lnb a:link{ text-decoration:none; }

.wrap .container a.dashboard{ display:block; background-color:#fce167; padding:0; border-bottom:1px #999 solid; position:relative; text-decoration:none; }
.wrap .container a.dashboard::before{ display:inline-block; width:29px; height:29px;  background:url(../images/skin_1/lnb_icon_new.png) no-repeat 0 -210px; content:''; vertical-align:middle; }
.wrap .container a.dashboard>span{ line-height:29px; color:#666; font-size:1.1em; font-weight:bold; }
.wrap .container a.dashboard:hover{ background-color:#fce167; }
.wrap .container a.dashboard:hover>span{ color:#000; }
.wrap .container a.dashboard>span.icon{ width:10px; height:10px; background:url(../images/skin_1/lnb_icon_new.png) no-repeat -568px -280px; position:absolute; right:8px; top:50%; margin-top:-5px; z-index:10; }
.wrap .container a.dashboard:hover>span.icon{ background-position-x:-578px; }



/* contents */
.wrap .container .conarea .contents{ margin:0 10px 0 200px; background:#fff; border:1px #767676 solid; box-sizing: border-box;  }


/* breadcrumb */
.wrap .container .conarea .contents .breadcrumb{ height:29px; line-height:29px; border-bottom:1px #c5c5c5 solid; background:url(../images/skin_1/breadcrumb_bg.png) repeat-x bottom; background-color:#fff; position:relative; z-index:1000; }
.wrap .container .conarea .contents .breadcrumb>ul{ padding-right:5px; display:inline-block; }
.wrap .container .conarea .contents .breadcrumb>ul>li{ float:left; padding:3px 30px 4px 15px; height:22px; line-height:22px; background:url(../images/skin_1/navi_dep_bg1.png) no-repeat right; font-size:1em; color:#888; }
.wrap .container .conarea .contents .breadcrumb>ul>li:first-child{ padding-left:20px; }
.wrap .container .conarea .contents .breadcrumb>ul>li>a{ font-size:1em; display:block; line-height:22px; }
.wrap .container .conarea .contents .breadcrumb>ul>li.home a{ background:url(../images/skin_1/navi_dep_home.png) no-repeat 0 4px; padding-left:15px; }
.wrap .container .conarea .contents .breadcrumb>ul>li:last-child{ font-size:14px; color:#333; font-weight:bold; line-height:22px; }
.wrap .container .conarea .contents .breadcrumb>ul>li:last-child>span.total{ font-weight:bold; color:#4982c4; font-size:0.8em; line-height:1em; }
/*.wrap .container .conarea .contents .breadcrumb ul li:last-child span.switch_status{ display:inline-block; width:26px; height:22px; vertical-align:middle; text-indent:-999px; overflow:hidden; }
.wrap .container .conarea .contents .breadcrumb ul li:last-child span.switch_status.active{ background-position:0 0; }
.wrap .container .conarea .contents .breadcrumb ul li:last-child span.switch_status.alert{ background-position:0 0; }
.wrap .container .conarea .contents .breadcrumb ul li:last-child span.switch_status.unreachable{ background-position:0 0; }
.wrap .container .conarea .contents .breadcrumb ul li:last-child span.switch_status.dormant{ background-position:0 0; }

.wrap .container .conarea .contents .breadcrumb ul li:last-child span.port_status{ display:inline-block; width:26px; height:22px; vertical-align:middle; text-indent:-999px; overflow:hidden; }
.wrap .container .conarea .contents .breadcrumb ul li:last-child span.port_status.on{ background-position:0 0; }
.wrap .container .conarea .contents .breadcrumb ul li:last-child span.port_status.alert{ background-position:0 0; }
.wrap .container .conarea .contents .breadcrumb ul li:last-child span.port_status.unreachable{ background-position:0 0; }
.wrap .container .conarea .contents .breadcrumb ul li:last-child span.port_status.dormant{ background-position:0 0; }
*/

.wrap .container .conarea .contents .breadcrumb .selected_num{ position:absolute; top:5px; right:10px; border-left:1px #d2d2d2 solid; padding:0 0 0 10px; color:#555; }


/* detail_area */
.detail_area .action_area{ background-color:#fff; }


footer p.copyright{ color:#fff; }
footer p.copyright span{ color:#fff; }