@charset "utf-8";
/* CSS Document */

:root {
	--color1: #4b5d67;
	/*--color2:#0b9e94;*/
	/*--color2:#e59cd3;*/
	--color2: #2c4d6c;
	--color2a: 229,156,211;
	/*--color3:#cf87b7;*/
	--color3: #2c4d6c;
	--color10: #e59cd3;
	--body-color: #def1ff;
	--header-height: 60px;
}

body{ font-family:Verdana, Geneva, sans-serif; color:var(--color1);}

.mmenu{ font-size:24px; width:50px; height:100%; display:inline-block; color:var(--color2); text-align:center; cursor:pointer; display:none;}
.mmenu i{ margin-top:17px;}
#mmenu{ display:none;}

.mmenu1{ 
	position:absolute; top:7px; right:0; font-size:18px; width:50px; height:100%; display:inline-block; color:var(--color1); 
	text-align:center; cursor:pointer; z-index:1; display:none; transition:0.8s;}
.mmenu1 i{ margin-top:17px;}
.mmenu1 .fa-close{ display:none;}
#mmenu1{ display:none;}

.db_wrap{ position:absolute; top:0; right:0; width:calc(100% - 120px); height:100%; background:rgba(var(--color2a),0.1); overflow:hidden;}
.db_wrap:before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url(../images/NPAC_Logo.png) no-repeat center; background-size:20%; z-index:-1; opacity:0.2}

.db_header{ background:var(--body-color); height:var(--header-height); width:100%; position:fixed; top:0; left:120px; z-index:1001; font-size:0;}
.db_header > *{ vertical-align:middle;}

.db_logo {
	width: 220px;
	height: var(--header-height);
	display: inline-block;
	/*background:url(../images/logo.png) no-repeat center;*/
	background:url(../images/NPAC_Logo.png) no-repeat center; 
	/*background: url(../images/NPAC_Logo-1.png) no-repeat center;*/
	background-size: auto 85%;
}

.db_title{ display:inline-block; width:calc(100% - 540px); text-transform:uppercase; text-align:center; color:var(--color2); font-size:18px; font-weight:bold;}

.db_header .db_top_menus{ width:200px; display:inline-block; height:100%; text-align:right; position:relative;}
.db_header .db_top_menus .inner{ height:var(--header-height); display:inline-block;}
.db_header .db_top_menus .inner > *{ vertical-align:middle; cursor:pointer;}
.db_header .db_top_menus .img{ width:40px; height:40px; border-radius:50%; overflow:hidden; display:inline-block; margin-right:10px; margin-top:10px;}
.db_header .db_top_menus .img img{ width:100%; height:100%;}
.db_header .db_top_menus .name{ display:inline-block; font-size:14px; margin-top:10px; margin-right:10px; color:var(--color1);}

.db_header .db_top_menus .inner:hover .dropmenus{ display:block;}
.db_header .db_top_menus .dropmenus{ 
	position:absolute; top:100%; right:0; background:#fff; font-size:14px; padding:5px 0; width:200px; text-align:left; 
	box-shadow:0 3px 5px rgba(0,0,0,0.25); display:none;}
.db_header .db_top_menus .dropmenus:before{ 
	content:""; position:absolute; top:-5px; left:83px; background:#fff; width:10px; height:10px;
	transform:rotate(45deg);}
.db_header .db_top_menus .dropmenus a{ display:block; padding:10px; text-decoration:none; color:var(--color1);}
.db_header .db_top_menus .dropmenus a:hover{ background:#f8f8f8;}

.db_left_menus .mheader{ display:none;}

.db_left_menus{ position:fixed; top:0; left:0; width:120px; height:100%; overflow:auto; background:var(--body-color); border-right:#dae0d5 solid 1px; box-sizing:border-box; z-index:1001;}
.db_left_menus .db_left_menus_wrap{ font-size:0;}
.db_left_menus .db_left_menus_wrap a{ 
	padding:15px 10px; text-align:center; width:100%; display:inline-block; box-sizing:border-box; font-size:13px; text-decoration:none; 
	border-bottom:#dae0d5 solid 1px; color:var(--color1); vertical-align:top;}
.db_left_menus .db_left_menus_wrap a span{ display:block;}
.db_left_menus .db_left_menus_wrap a svg{ width:45px; height:45px; margin-bottom:10px; fill:var(--color1);}
.db_left_menus .db_left_menus_wrap a:hover{ background:#fff; color:var(--color2);}
.db_left_menus .db_left_menus_wrap a:hover svg{ fill:var(--color2);}

.db_left_menus::-webkit-scrollbar, .db_right_menu::-webkit-scrollbar { width: 0 !important }
.db_left_menus, .db_right_menu { overflow: -moz-scrollbars-none; }
.db_left_menus, .db_right_menu { -ms-overflow-style: none; }

.db_right_menu{ 
	width:100px; position:absolute; top:var(--header-height); right:0; background:#fff; height:calc(100% - var(--header-height)); 
	box-shadow:0 0 3px rgba(0,0,0,0.15); transition:0.8s; z-index:1000; overflow:auto;}
.db_right_menu a{ 
	padding:6px 10px; text-align:center; width:100%; display:inline-block; box-sizing:border-box; font-size:13px; text-decoration:none; 
	border-bottom:#dae0d5 solid 1px; color:var(--color1); vertical-align:top;}
.db_right_menu a span{ display:block;}
.db_right_menu a svg{ width:45px; height:45px; margin-bottom:10px; fill:var(--color1);}
.db_right_menu a:hover{ background:var(--color2); color:#fff;}
.db_right_menu a:hover svg{ fill:#fff;}
.db_right_menu + .db_container{ width:calc(100% - 100px);}

.db_container{ height:calc(100% - var(--header-height)); width:100%; margin-top:var(--header-height);}

.btm_menus.open {
    bottom: -18px;
}

.btm_menus {
    background:var(--color3); color: #fff; box-shadow: 0 0 1px rgba(0,0,0,.85); z-index: 1; position: fixed; bottom: -100%; right: 0;
    width: calc(100% - 106px); transition: 0.5s; overflow-x: scroll;
}

.btm_menus::after { content: ""; display: block; clear: both; }

.btm_menus .btm_menus_wrap { margin: 0; padding: 0 100px 0 0; float: left; width: 3000px; }

.btm_menus a { 
	float: left!important; width: 120px; height: 100px; border-right: rgba(0,0,0,.08) solid 1px; position: relative; list-style: none;
	color:#fff; text-align:center; text-decoration:none;
}

.btm_menus a svg {
	width: 40px; height: 40px; fill: #fff;
}

.btm_menus a span {
	display: block;
	margin-top: 5px;
}

.btm_menus a:hover, .btm_menus .active a {
	background:var(--body-color);
	color: #555;
}

.btm_menus a:hover svg , .btm_menus a.active svg  {
	fill: #555;
}

@media only screen and (max-width:425px){
	.db_left_menus .db_left_menus_wrap a span:nth-child(1){ width:35px; height:35px;}
	.db_left_menus .db_left_menus_wrap a svg{ width:35px; height:35px;}
	}

@media only screen and (min-width:425px) and (max-width:767px){
	.db_left_menus .db_left_menus_wrap a span:nth-child(1){ width:45px; height:45px;}
	.db_left_menus .db_left_menus_wrap a svg{ width:45px; height:45px;}
	}

@media only screen and (max-width:767px){
	.mmenu{ display:inline-block;}
	#mmenu:checked ~ .db_left_menus{ left:0;}
	#mmenu:checked ~ .db_left_menus .mheader{ left:0;}
	
	.mmenu1{ display:inline-block;}
	#mmenu1:checked ~ .db_right_menu{ right:0;}
	#mmenu1:checked ~ .db_container .db_subtitle_sec{ left:-120px;}
	#mmenu1:checked ~ .db_container .db_subtitle_sec .mmenu1 .fa-close{ display:block; color:#eb3236;}
	#mmenu1:checked ~ .db_container .db_subtitle_sec .mmenu1 .fa-bars{ display:none;}
	
	.db_wrap{ width:100%;}
	.db_wrap:before{ background-size:80%;}
	.db_header{ left:0;}
	
	.db_header .db_logo{ width:calc(100% - 105px);}
	
	.db_left_menus .mheader{ height:var(--header-height); background:#e6ece0; position:fixed; top:0; left:-100%; width:100%; display:block; transition:0.8s;}
	.db_left_menus .mheader .mmenu{ position:absolute; top:0; right:0;}
	
	.db_left_menus{ width:100%; height:100%; top:auto; bottom:0; background:#fff; left:-100%; transition:0.8s; z-index:1002;}
	.db_left_menus .db_left_menus_wrap{ margin-top:var(--header-height);}
	.db_left_menus .db_left_menus_wrap a{ width:calc(100% / 3); border-right:#ddd solid 1px; height:135px;}
	.db_left_menus .db_left_menus_wrap a:nth-child(3n){ border-right:0px;}
	.db_left_menus .db_left_menus_wrap a span:nth-child(1){ border-radius:10px; padding:10px; margin:0 auto 10px; box-sizing:content-box;}
	.db_left_menus .db_left_menus_wrap a svg{ fill:#fff;}
	
	.db_left_menus .db_left_menus_wrap a span:nth-child(1){ background:#f6bb42;}
	.db_left_menus .db_left_menus_wrap a:nth-child(2n+2) span:nth-child(1){ background:#da4453;}
	.db_left_menus .db_left_menus_wrap a:nth-child(3n+3) span:nth-child(1){ background:#3bafda;}
	.db_left_menus .db_left_menus_wrap a:nth-child(4n+2) span:nth-child(1){ background:#37bc9b;}
	
	.db_header .db_title{ display:none;}
	
	.db_header .db_top_menus{ width:40px; padding-right:15px;}
	.db_header .db_top_menus .name{ display:none;}
	.db_header .db_top_menus .dropmenus:before{ left:175px;}
	
	.db_right_menu{ right:-120px;}
	
	.db_right_menu + .db_container { width:100%;}
	
	.btm_menus{ display:none;}
	
	.table tr:nth-child(2n){ background:rgba(0,0,0,0.04);}
	.table thead th{ display:none;}
	
	.table td, .table>tbody>tr>td{ display:block; position:relative; padding-top:30px !important;}
	.table td:after{ content:attr(data-name); position:absolute; top:0; left:0; color:var(--color2); padding:8px; font-weight:bold; width:135px; font-size:12px;}
	
	}

/*.table td, .table>tbody>tr>td{ display:block; position:relative; padding-left:145px;}
	.table td:before{ content:""; position:absolute; top:0; left:0; height:100%; background:var(--color2); width:135px;}
	.table td:after{ content:attr(data-name); position:absolute; top:0; left:0; color:#fff; padding:8px; font-weight:bold; width:135px;}*/