html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow-y: hidden; 
}

body {
	font: 1em;
	line-height: 1.5em;

}
@font-face {
    font-family: fz;
    src: url('../../fonts/LESLIE.ttf');
}
::-webkit-scrollbar {
    width: 10px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset006pxrgba(0,0,0,0.3);
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.1);
    -webkit-box-shadow: inset006pxrgba(0,0,0,0.5);
}
.main {
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
}
/*日期*/
#curdates {
    position: absolute;
    z-index: 30;
    left: 15px;
    top: -30px;
    height: 80px;
    width: 25%;
    text-align: center;
    font-size: 18px;
    color: #ffffff;
    display: flex;
    flex-direction:row;
    justify-content: flex-start;
    align-items:flex-end;
}

.timetxt {
        font-family: fz;
    }

.timesize {
    font-size: 45px;
     vertical-align: bottom;
}
.timesize3 {
    font-size: 18px;
     vertical-align: bottom;
}
#curdate_txt span {
    vertical-align: bottom;
}

.timesize2 {
    font-size: 45px;
    vertical-align: bottom;
    margin-left:10px;
}
/*天气*/
#curweather {
    position: absolute;
    z-index: 30;
    right: 30px;
    top: -6px;
    height: 80px;
    width: 25%;    
    color: #ffffff;
    display: flex;
    flex-direction:row;
    justify-content: flex-end;
    align-items: center;
   
}
#curweather_m{
    display:flex;
    flex-direction:row;
    align-items:flex-end;
}
#curweather_m .r0{
    font-size: 20px;
    margin: 0 15px;
}
#curweather_m .r1{
    font-size: 45px;
}
#curweather_m .r2{
    margin-left: 15px;
    font-size: 20px;
}
#curweather_m .r3{
    margin-left: 15px;
    font-size: 20px;
}
#curweather_m .sss{
    margin-top:-10px;
}
.mapLeftArea {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        position: absolute;		
		bottom:0;
        width: 25%;
        height: 91%;
		z-index: 10;
		
    }
.mapLeftArea .chart-box {
	height:calc(33% - 2em);
	background: rgba(255, 255, 255, .1) url(../img/line.png) no-repeat;
	background-color: rgb(1,41,120,0.8);
	background-size: 102.5% 103.5%; 
}
	
.mapLeftArea .chart-box:nth-child(1){
    margin-top:4%;
}
.mapLeftArea .chart-box:nth-child(3){
    height:calc(33% - 2em);
}
/*大类统计*/
.spcount{
width:100%;
display: flex;
justify-content: center;
margin:10px auto;
color: #fff;
}

.spcounts{
font-size: 40px;
margin-left:10px;
}
#pspecies{
margin-top:-20px;
width:100%;
height:100%;
}

#bcategory{

}
#legend{
width: 100%;
height:100%;
z-index:100;
}
input[type="checkbox"] {
 
  background-color: #e93628;
}
.bie{
display: inline-block;
width: 100%;
height:100%;
z-index:100;
}
#dcounty{
margin-top:-20px;
width:100%;
height:100%;
}


.maptitleContainer {
        width: 100%;
        height: 2%;
        position: absolute;
        top: 60px;
        z-index: 100;
        display: flex;
        flex-direction: column;
        justify-content: center;
		
    }

.maptitleText {
        color: #fff;
        font-size: 55px;
        font-weight:bolder;
        margin:2px auto;
        width: 400px;
}
.input-group{
	
width:400px;	
margin:15px auto;	
	
}
.mapArea {
	position:absolute; 
    top: 0;
	left:0;
    width: 100%;
    height: 100%;
}
.maindistpoint a{cursor:pointer;}
#layerSwitcher{color: #fff;display: flex;flex-wrap: wrap;width:100px;position: absolute;left: 70%;bottom:1%;z-index: 100;font-size:14px;}
#layerSwitcher1{color: #fff;display: flex;flex-wrap: wrap;border-radius:5px;display: flex;align-items: center;width:142px;position: absolute;left: 25.3%;top:23%;z-index: 100;font-size:16px;}

#layerSwitcher1 .checkbox-item,#layerSwitcher .checkbox-item {
  display: flex;
  align-items: center;
  margin-right: 10px; 
  margin-bottom: 10px; 
  margin:5px;
}

.chart-box {
	width: calc(100% - 2em);
	padding: 1em;
	margin:1em;
	display: flex;
}


.chart {
	width: 100%;
	height: 100%;
}
/*中间类群统计*/
.centertopdiv:hover{cursor:pointer;}
.centercss {
    position: absolute;
    z-index: 999;    
    width: 80%;
	margin:0 auto;
    top:12%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center; 
    color: #fff;
}
.centertopdiv{
	position: relative;
    width: 68px;
    height: 60px;
    margin: 5px;

	}
.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ff0000; 
	border-radius:6px;
    z-index: -1;

}
.topcounttxt {
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;

    color: white;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
	text-align:center;

}
.topcounttxt .txttype {
font-size: 26px;
}

.topcounttxt .name {
font-size: 11px;
}
/*中间名录列表*/
.centerlist {
    position: absolute;
    z-index: 60;    
    width: 51%;
	height:calc(33.3% - 2em);
    bottom:0;
	margin:0 auto;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center; 
    color: #fff;
}
.centerlist .chart-box {
	height:calc(100% - 2em);
	background: rgba(255, 255, 255, .1) url(../img/line.png) no-repeat;
	background-color: rgb(1,41,120,0.8);
	background-size: 102.5% 103.5%; 
}
.centerlist .titlediv .more{
justify-content: flex-end;
text-align:right;
font-size: 14px;
margin-left:65%;
z-index: 1000; 
}

.centerlist .types_2{
color: #fff;
font-size: 11px; 
margin:12px auto;
width: 100%;
height:10%;
z-index: 998; 
}

.centerlist .types_2  li {
margin: 0 50px; 
  }
  
  
.mapRightArea {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        position: absolute;
		bottom:0;
        width: 25%;
        height: 91%;
		margin-left:75%;
		z-index:100;
		
}

.mapRightArea .chart-box {
	height:calc(20% - 2em);
	background: rgba(255, 255, 255, .1) url(../img/line.png) no-repeat;
	background-color: rgb(1,41,120,0.8);
	background-size: 102.5% 103.5%; 
}
	
#chart_dataincrease {
	display: flex;
	justify-content: space-between;
}
.toplogo {
    padding: 0;
    margin: 0;
    line-height: 0;
    z-index: 20;
    position: absolute;
}

    .toplogo img {
        margin: 0;
        width: 100%;
        height: 100%;
    }


.types_1,.types_2{
	display: flex;
	align-items:center; 
	justify-content: center;
    background-color:#0033CC; 
    border-radius: 20px; 
color: #fff;
font-size: 11px; 
margin:8px auto;
width: 100%;
height:7%;
line-height:3.5%;
z-index: 998; 
}
.types_2{
    width: 95%;
    height:7%;
}
.types_1 ul,.types_2 ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
.types_1 a,.types_2 a {
    color: #fff;
    text-decoration: none;
  }
.clicked {
    background-color: #D9B44A;
    height:4%;
	
  }

.types_1  li,.types_2  li {
    display: inline-block;
    cursor: pointer;
  }
.types_1  li {
margin: 0 2px; 
  }
.types_2  li {
margin: 0 15px; 
  }
#splist{
width: 100%;
height:75%;
}
/*表格样式*/
.table1 {
	 border-collapse: collapse;
    text-align: center;
    width: 100%;
	color:#fff;
	font-size:11px;
}

.table1 th {
             background-color: #0033FF; 
             opacity: 0.5;
			 text-align: center;
			 height:16px;
			 padding: 0 10px; 
}			
.table1 td a{
			   color: white; 
               text-decoration: none;
			}		
.table1 td a:hover {
    color: #f00; 
  }					
.table1 td {
    line-height: 18px; 
}
.spname:hover{
	font-size:14px;
	cursor: pointer;
} 	
.mapRightArea .chart-box:nth-child(2){
	display: flex;
	flex-direction:row;
    justify-content: space-around;
	color: #ffffff;
    font-size: 14px;
}

.medialist{
margin-top:1.5%;
width: 100%;
height:100%;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
text-align: center;
color: #ffffff;
}
.video_thumb {
width:120px;
height:75px;

}

.video_thumb img {
	width: 100%;
    height: 100%;
}
.video_thumb .name{font-size: 12px;}
.play{margin-top:-160px;}

/*标题栏样式*/
.titlediv{
color: #fff;
display: flex;
flex-direction: row;
align-items: center;
white-space: nowrap;
}
.titlediv .title{
font-size: 16px;
}
.titlediv img{
margin-left:8px;
}
.titlediv .more{
justify-content: flex-end;
text-align:right;
font-size: 14px;
z-index: 1000; 
margin-left:25%;
}
.titlediv .more12,.titlediv .more13{
justify-content: flex-end;
text-align:right;
font-size: 14px;
z-index: 1000; 
margin-left:10%;
}
 .more a{
 cursor: pointer;
color: #fff;
    text-decoration: none;
}
/*模态框*/
 .modal::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); 
  }
.modal-dialog{
    padding: 0;
    margin: 0 auto;
    left:0;
    right:0;
    top:8.2%;
    bottom:8.2%;
    position: absolute;
    max-width: 90%;
}
 .myModa3dialog{top:12%;}
.modal-header{
/*background-color: #007a7d; */
background-color: #0033FF;
height:40px;
color: #ffffff;
font-size: 20px; 
}
#myModal3 .modal-header{
background-color: #D9B44A;
}
.modal-body {
  height: 770px; 
  overflow-y: auto; 
}
.myModal1body{height: 800px; }
.myModa3body{
height: 700px; 
overflow-y: auto; 		
}
.bodymedia{
  height: 770px; 
  overflow-y: auto; 
}
.modal-body .checkbox-item {
  display: flex;
  align-items: center;
  margin-right: 10px; 
  margin-bottom: 10px; 

}
.checkbox-group{
display: flex;
display: inline-block;
flex-direction:row;
}
.inputtext-item{
display: flex;
justify-content: flex-end;
margin-top:-45px;
}
.modal-body .checkbox-item input[type="checkbox"] + label {
  margin-right: 17px;
}
.modal-body .checkbox-group input[type="checkbox"] + label {
  margin-right: 17px;
}
.searchKeyword{
	height:35px;
	width: 300px;
}
.searchKeyword1{
	height:28px;
	width: 250px;
}
.button {
  display: inline-block;
  height:35px;
  line-height: 1; 
  padding: 5px 10px; 
  font-size: 14px; 
  text-align: center; 
  text-decoration: none; 
  border: none; 
  background-color: #0033FF; 
  color: #fff; 
  cursor: pointer; 
  margin-left:-4px;
}
.button1 {
  display: inline-block;
  height:28px;
  line-height: 1; 
  padding: 5px 10px; 
  font-size: 14px; 
  text-align: center; 
  text-decoration: none; 
  border: none; 
  background-color: #0033FF; 
  color: #fff; 
  cursor: pointer; 
  margin-left:-4px;
}
.resetBtn {
  display: inline-block;
  height:35px;
  line-height: 1; 
  padding: 5px 10px; 
  font-size: 14px; 
  text-align: center; 
  text-decoration: none; 
  border: none; 
  color: #fff; 
  cursor: pointer; 
  margin-left:-40px;
}
/*物种列表*/
.tblist{
margin-top:20px;
display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.tblist .col-md-2 {
  flex-basis: 16.66667%;
  max-width: 16.66667%;
}
.table2 {

	border-spacing: 0 15px;
    text-align: center;
    width: 100%;
	color: #000;
	font-size:12px;
}
.table2 th {
             background-color: #4169E1;
             color:#000;
			 text-align: center;
			 height:33px;
}
.table2 tr {

}
.table2 tr:nth-child(even) {
  background-color:#87CEFA;
}

.table2 td a{
			   color: #000; 
               text-decoration: none;
			}		
.table2 td a:hover {
    color: #f00; 
  }			
/*监测影像列表*/
#medialist1,#medialist2 {
    list-style-type: none;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
     margin-bottom: 88px;
  }

  .thumbnail {
    height:160px;
    margin:38px 5px;
  }
   
  .thumbnail img {
    width: 100%;
	height: 150px;
  }

  .thumbnail a {
     color: #000; 
     text-decoration: none; 
  }

.filter{display:none;}

  
 /*视频播放*/  
#videoinfo{
display: flex;
	flex-direction:row;
}
.videos {
  width: 230px; 
  height:200px;
  margin:0 20px;
}
.videos video{
  width: 100%; 
  height:100%;
}

/*物种详情*/

.desptxt {

}
.sdespcontent {
  padding: 10px;
  width: 100%;
  box-sizing: border-box; 
}
.map1 {
  height: 420px; 
  border: 1px solid #ccc; 
  padding: 0;
}
#map1 {
  width: 100%;
  height: 420px; 
}
.spimg0{height:380px;}    
.spimg0 img{
width: 100%; 
height:100%;
}
#classlist{font-weight:500;font-size:16px;}
.namedesp{
	line-height:26px; 
	text-indent:2em;
}
.cname{color:#D9B44A;font-size:28px;font-weight:500;}
.sname{font-size:16px;font-style: italic;font-weight:500; }
#imglist {
    list-style-type: none;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;

	height:640px;overflow-y:auto;
	margin-top:45px;
  }

 #imglist .thumbnail {
    height:160px;
    margin:0 5px;
  }
   
 #imglist .thumbnail img {
    width: 100%;
	height: 152px;
  }

 #imglist .thumbnail a {
     color: #000; 
     text-decoration: none; 
  }

.hang3{margin-top:15px;}
.table3 {
	 border-collapse: collapse;
	 width: 100%;
	color: #000;
}
.table3 th {
      border: 1px solid #E0E0E0;
      padding: 8px;
      text-align: center;
	  width:150px;
}
.table3 td {
      border: 1px solid #E0E0E0;
      padding: 8px;
      text-align: center;
}
.table3 th {

    }
    

 /*大图*/ 
#bigphoto {

} 
#bigphoto .bigimg{
margin-top:15px; 
margin-bottom:20px; 
  height:10px;
text-align:center;
}
#bigphoto .bigimg img {
  width: 60%;
  height: auto; 
}
#bigphoto .bigvideo{
margin-top:15px;
}
#bigphoto video {
  width: 100%; 
  height:670px;
}
#bigphoto a:hover{
cursor:pointer;
}
.caption{cursor:pointer;}