@charset "utf-8";
/**
 * @Description: 首界面css样式
 * @Author: gisxk.com
 * @Date: 2020-09-01
 */

/* 不使用绝对宽度，字体大小;字体大小是页面默认大小的100%，即16px。字体不要使用绝对大小PX，要使用相对大小rem */
html,body{
	width:100%;
	height:100%;
	/*color: #FFF*/
}
/* 不同屏幕大小样式适配 */
/*媒体查询代码，表示只有在屏幕尺寸大于等于[1681,1920]像素的时候才会应用下面的样式*/
@media only screen and (min-width: 1681px) and (max-width: 1920px){
    html {font-size: 62.5%!important; /* 10÷16=62.5% */}
}
/*[1441,1680]*/
@media only screen and (min-width: 1441px) and (max-width: 1680px){
	html {font-size: 54.7%!important; /* 62.5%÷1920*1680=54.687% */}
}
/*[1280,1440]*/
@media only screen and (min-width: 1280px) and (max-width: 1440px){
	html {font-size: 46.875%!important; /* 62.5%÷1920*1440=46.875% */}
}
/*[801,1280]*/
@media only screen and (min-width: 801px) and (max-width: 1280px){
	html {font-size: 41.67%!important; /* 62.5%÷1920*1280=41.666% */}
}
/*小于等于800像素*/
@media only screen and (max-width: 800px) {
	html {font-size: 26.041%!important; /* 62.5%÷1920*800=26.041% */}
}
/*图片铺满div*/
.img_full{
	background-size:100% 100%;
	background-repeat: no-repeat;
}
/*顶部区域样式*/
.header{
	position: absolute;
	left:0px;
	top:0px;
	width:100%;
	height:10%;
	background-size:100% 100%;
	background-repeat: no-repeat;
	background-image: url('../img/topbg.jpg');
}
/*顶部标题*/
.header_title{
	font-weight: 700;
	font-style: normal;
	color: #FFF;
	font-size: 4rem;
}
/*顶部区域按钮*/
.header_bt{
	height:4rem;
	font-weight: 700;
	font-style: normal;
	font-size: 20px;
	cursor:pointer;
	padding:0.2rem;
	border-radius:1rem;
	color: #FFF;
}
.header_bt.active{
	color: #002060;
	background-color: #c5e0b4;
}
/*data_management数据管理的前面图标*/
.header .header_bt>.data_management{
	float: left;
    margin-left: 5px;
    margin-right: 5px;
    line-height: 3.6rem;
    font-size: 3rem;
}
.header .header_bt>.data_management:before {
    content: "\e600";
}
/*data_management数据管理的前面图标*/
.header .header_bt>.model_calculation{
	float: left;
    margin-left: 5px;
    margin-right: 5px;
    line-height: 3.6rem;
    font-size: 3rem;
}
.header .header_bt>.model_calculation:before {
    content: "\e618";
}

div.leftside{
    position:absolute;
	height:100%;
	width:50px;
	left:0%;
	top:0%;
    background-color: transparent;
}
div.leftside.show{
    position:absolute;
	height:100%;
	width:300px;
	left:0%;
	top:0%;
}
div.leftside>div.leftside_panel{
	position:absolute;
    left:5%;
    right:5%;
}
.leftside>.leftside_panel>.panel_title{
	position:absolute;
    height:4rem;
    /*padding-left:2rem;*/
	width:100%;
    background-color:rgba(46,62,87,0.6);
    line-height: 4rem;
    font-size: 2.5rem;
    color: #fff;
	cursor:pointer;
}
.leftside>.leftside_panel>.panel_title>.title_icon{
	position: absolute;
	top: 0.5rem;
	left:2rem;
	height:3rem;
	width:3rem;
}
.leftside>.leftside_panel>.panel_title>.title_text{
	position: absolute;
	left:5.5rem;
}
.leftside>.leftside_panel>.panel_title>.title_arrow{
	position: absolute;
	top: 1rem;
	right:2rem;
	height:2rem;
	width:2rem;
}
.leftside>.leftside_panel>.panel_body{
	position:absolute;
	top:4rem;
	width:100%;
    background-color:rgba(144,165,203,0.7);
}
.leftside>.leftside_panel>.panel_body>.item_group{
	position:absolute;
	width:100%;
    height:4rem;
	line-height: 4rem;
    font-size: 1.7rem;
	cursor:pointer;
	border-top: 1px solid #000;
}
.leftside>.leftside_panel>.panel_body>.item_group>.item_icon{
	position: absolute;
	top: 1.1rem;
	left:4rem;
	height:1.7rem;
	width:1.7rem;
	background-image: url('../img/folder_open.png');
}
.leftside>.leftside_panel>.panel_body>.item_group>.item_text{
	position: absolute;
	left:6.5rem;
	font-weight: 400;
}
/*
div.leftside>div.leftside_panel.show{
	width:250px;
}
div.leftside>div.leftside_panel.hide{
	width:0px;
	display: none;
}*/

div#hdwr_tool.hide{
	display: none;
}