*{
	padding:0;
	margin:0;
	list-style: none; 
	max-height: 99999px; 
}

html, body {
	/*width:3840px;*/
	width: 100%;
	height:100%;
}

/*背景动画-开始*/
/*头部head--开始*/
#head{ 
	position:relative;
	width:100%;
	height: 12%;
}
#head .getDate{float:left;margin-left:34px;}
#head .getDate,.weather{font:22px 黑体;color:#ADC2FF; margin-top: 0.5%;}
#head .getDate span{margin-right: 35px;}
#head .weather{float:right;}
#head .weather span{margin-right:45px;}
#head .weather #state {
	display: inline-block;
	height:30px;
	width:80px;
	background: #009944;
	font-size: 16px;
	text-align: center;
	color:#FFF;
	border-radius: 8px;
	line-height: 30px;
}
#head h1{
	position: absolute;
	width:100%;
	height: 100%;
	font-size: 40px;
	margin:0 auto;
	font-weight:bold;
	background-image:-webkit-gradient(linear,0 top,0 bottom,from(#CAE0FF),to(#6EB2FF));
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
	text-align: center;
	align-content: center;
}
/*头部head--结束*/

/*板块切换*/
.navbar{ 
	position: absolute;
	left: 33%; 
	top:0;
	padding:10px 0 0; 
	font-size: 14px;
	z-index:10;
}
.navbar span{margin-right: 40px;color:#0089FF;}
.navbar span.active{ color:#fff; }

.content{
	position: relative;
	width: 100%;
	height:100%;
	/*box-sizing:border-box;*/
	padding-bottom: 0px;
	background:url("../images/bg.png"); 
	background-size: 100% 100%;
	overflow: hidden;
	font-size:30px;
}

.rel{position: relative;}

.clear{ clear:both; }
.clear::after{ content:""; display:block; clear:both; }
/*背景动画-开始*/
#animations{ position: absolute; width:100%;height:2160px; overflow: hidden; }
.animation{ position: absolute; }
.animation1{left:1%; top:1%; transform:scale(1); }
.animation2{left: 0.5%; bottom:13%; transform:scale(0.5); }
.animation3{left: 20%; top:60%; transform:scale(1); }
.animation4{left: 30%; top:15%; transform:scale(.9); }
.animation5{left: 45%; top:2%; transform:scale(0.3); }
.animation6{left: 60%; top:-2%; transform:scale(.8); }
.animation7{left: 70%; top:40%; transform:scale(1); }
.animation8{right: 12%; top:8%; transform:scale(1.1); }
.animation9{left: 90%; bottom:12%; transform:scale(1); }
.animation10{left: 50%; top:80%; transform:scale(1.5); }
.animation10 div{ animation-direction:reverse; }
.animation div{ position: absolute; top: 0;left: 0;width:318px; height:318px;  border-radius:50%; animation:move linear infinite;opacity: .3; filter:alpha(opacity=30);}
.animation .animate1{ background:url("../images/1.png") no-repeat; background-size: 100%; animation-duration:30s;}
.animation .animate2{ background:url("../images/2.png") no-repeat; background-size: 100%;  animation-duration:20s; animation-direction:reverse;}
.animation .animate3{ background:url("../images/3.png") no-repeat; background-size: 100%;  animation-duration:15s; }
.fanzhuan .animate1{ animation-direction:reverse; animation-duration:25s;}
.fanzhuan .animate2{ animation-direction:normal; animation-duration:15s;}
.fanzhuan .animate3{ animation-direction:reverse; animation-duration:10s;}
@keyframes move {
	0%{transform:rotate(0deg)}
	100%{transform:rotate(360deg)}	
} 


/*主体body--开始*/
#body{ height:53%}
#body>div{ float:left;}
/*主体左边区域*/
.bodyLeft{position: absolute; width:32.8%; height: 53%; margin-left: 0.5%;}

/*各区域挂牌数量*/
.bodyLeftTop{position: absolute; width:100%; height: 47%;}
.dataCenter{width:55%;background: rgb(0,102,255,0.3);margin-top:40px;margin-left: 8px;}
.dataCenter li{float:left;width:25%;text-align: center;padding-top: 0px;}
.dataCenter span{display: inherit; font-size:10px;color:#FFF600;font-family: "黑体";}
.dataCenter p{font-size: 10px;color:#FFFFFF;font-family: "黑体";}
.dataCenter i{width:46px;height:2px;background: #FFFFFF;display:block; margin:5px auto;}
.guapai{ width:55%; height: 65%; background: rgb(31,53,249,0.15); margin-left:8px;}
.yuyue{width:45%;height:100%;position: absolute;right:0; bottom:0;text-align: center;}
.yuyuejiankong{height:50%;margin-bottom: 8px;}
#left-top-right { width:100%;position: absolute; top:60%; left:15px;bottom:15px; font-size:12px;}
#left-top-right-circle { width:100%;height:60%;position: absolute;left:0;top:0;}
#left-top-right div{ width:100%;height:12px; line-height:0px;border-radius: 5px; vertical-align: middle;margin-bottom:15px;position: relative;}
#left-top-right ul{display:inline-block;height:100%;width:150px;vertical-align: middle; border: 2px solid #087BB2;border-radius: 5px;}
#left-top-right li{ width:10px;height:100%;margin-left:5px;float:left;background: #087BB2;overflow: hidden;}
#left-top-right p{display:inline-block;vertical-align: middle; height:12px;line-height:28px; margin-top:5px;margin-right:5px;font:bold 10px "simhei";color:#fff;}
#left-top-right span{float: right;width:50px;font-size:12px;color:#F3F120;padding-left: 20px2}
/*当前成交总数和月成交总数*/
.bodyLeftBottom{position: absolute; bottom: 1%; width:100%;height:46.5%; margin-top: 22px;}
.bodyLeftBottomLeft,.bodyLeftBottomRight{ float:left;width:50%;height:100%;}
#left-bottom{width: 100%;height: 80%;margin-top: 50px; margin-left:5px;}
.bodyLeftBottomRight .t-right{width:100%;height:152px;float:left;}
.bodyLeftBottomRight .t-right ul{width:100%;height:110px;position: absolute;left:0;top:30px;margin-bottom: 40px; }
.bodyLeftBottomRight .t-right li{width:100%;height:5px;margin-top:12px;}
.bodyLeftBottomRight .t-right span{display: inline-block;width:40px;height:5px;line-height: 5px;text-align: right;padding-right:10px;margin-top:-2px;font:bold 8px "微软雅黑";color:#293CF8;float: left;box-sizing:border-box;}
.bodyLeftBottomRight .t-right div{position:absolute;left:40px;display: inline-block;width:80%;height:5px;border:1px solid #1A6BD5;border-left: none; }
.bodyLeftBottomRight .t-right p{overflow:hidden;position: relative;color:#2137FF; display: inline-block;height:100%;line-height: 12px;float:left;font:bold 18px "微软雅黑";text-align: right;background: linear-gradient(90deg,rgba(28,40,200,1) ,rgba(15,182,252,1));transition: 2s; padding-right: 4px;}
.bodyLeftBottomRight .t-right .line{position: absolute;left:38px;top:0px;height: 195px;width: 0;border-right: 2px solid #293CF8;}
.bodyLeftBottomRight .t-right .active{border-right:2px solid rgba(255,255,0,1);animation:light2 0.5s linear infinite;transition: 2s;}
.bodyLeftBottomRight .t-right p i{animation:light1 2s ease infinite;position: absolute;left:0;display: inline-block;width:40px;height:100%;box-shadow:10px 0 30px rgba(15,182,252,1);background: #FFF;background: linear-gradient(90deg,rgba(255,255,255,0),rgba(15,182,252,1));}
.bodyLeftBottomRight .t-right p span{position: absolute;display: inline-block;height:100%;right:0;}
@keyframes light1{
	0%{left:0px;}
	100%{left:100%;}
}
@keyframes light2{
	0%{border-right:2px solid rgba(255,255,0,1)}
	100%{border-right:2px solid rgba(255,255,0,0)}
}
/*主体中间区域*/
.bodyMiddle{ 
	position: absolute;
	width:31%;
	height: 52.5%;
	/*height:534px !important;*/
	left: 50%;
    transform: translate(-50.5%, 0%);
	overflow: hidden;
}
/*全国草场面积监控*/
.bodyMiddleChild{ width:100%;height: 100%; position: relative;}
.chuangkou{width:2368px;height:1769px;position:absolute;top:361px;left:2631px;text-align: center;  background:url(../images/chuangkoubg.png) no-repeat;}
 #list{  }
 #list li{display:inline-block;width:30%;height:49px;margin-left:10px;background-size:100% 50% !important;background: url(../images/list.png) no-repeat;font:bold 10px "微软雅黑";line-height: 20px;}
 #list p{float:left;margin-left: 15px;font:12px 微软雅黑;}
 #list span{float:right;font:12px 微软雅黑;color:#ccff00;margin-right: 15px;}
.mapmain{position: absolute;z-index: 2;top:48px;width:100%;height:100%;}
.map{position: relative;  top:-105px;left:10px; width:100%;height:100%;}
.map>div:first-child{ z-index:0; }
#map1{ left:-12px; }
#sun{background:url(../images/a.png) no-repeat;animation:light 2s linear infinite;height:100%;background-size:100% 100%;}
/*北海地图svg样式*/
svg{ margin:0; padding-top:100px; width:100%; height:1000px; } 
.str0 {stroke:#fff;stroke-width:1}
.str{ stroke:#fff;stroke-width:1 }
.str1 {stroke:#fff;stroke-width:1}  
.fil3 {fill:none}
.fil0 {fill:#ACCE22}
.fil1 {fill:#D9E483}
.fil2 {fill:#DED572}
.fil4 {fill:#FFF582}
.fnt0 {fill:#C27A0C}
.fnt1 {fill:#000}
.fnt2 {fill:#FF1109}
path.hover{fill:red;stroke:red;stroke-width:2}
text{ font-size:18px; display:inline-block;}
@keyframes light{
	0%{opacity: 0.5;}
	50%{opacity: 1;}
	100%{opacity: 0.5;}
}
/*主体右边区域*/
.bodyRight{ 
	position: absolute;
	right: 0.8%;
    width: 32.8%;
    height: 53%;
}
/*挂牌产品类别*/
.bodyRightTop{ position: absolute;  width:100%; height:47%;}
.bodyRightBottom{
	position: absolute; 
	width:100%;
    height: 46.5%;
    bottom: 1%;
	margin-top: 23px;
}
.liushuihao{height:866px;background:rgb(14,37,125,0.5);}
.liushuihaoul li{ width:100%;height:30px; display:block; }
.liushuihaoul span{display: inline-block;float:left;width:16%;line-height: 12px;font-size:12px;text-overflow: ellipsis; overflow: hidden; white-space:nowrap;vertical-align: middle;text-align: center;}
.default{ height:14px; color:#fff;line-height: 12px;margin-top:50px;font-size:12px;}
.default span{ display: inline-block; float:left;width:16%; text-align: center;}
.bodyRightTopBG{ margin-left:8px;width:100%;height:70%;background: url("../images/001.png") no-repeat; }
.liushuihaoul{height:80%;overflow: hidden;position: relative;}
.winwatch{float:left;width:1162px;height:804px;margin-right: 36px;}
.pinjiawatch{height:804px;float:left;width:1375px;}
.winwatch .title,.pinjiawatch .title{margin-top: 36px;}
.pinjiachuangkou{height:611px;margin-top: 7px;width:1367px;}
.winwatchul{ width:1142px;height:600px;padding-top:10px;padding-left:10px;font-size:24px;margin-top: 7px;}
.winwatchul ul{ width:100%;}
.winwatchul li{ width:126px;height:102px;line-height:96px;float:left;text-align:center;color:#0089FF;font-size:24px;}
.pinjiachuangkou .childtitle{margin-top:26px;margin-left: 32px;}
.winwatchul .active{color:#ffffff;}
/*草牧商品价格动态*/
#jiagezoushi{ position: relative; top:0; width:100%; height:100%;}
/*主体body--结束*/

/*底部foot--开始*/
.content-foot {
	position: absolute;
	width: 100%;
    height: 32%;
    bottom: 1.5%;
    margin-top: 20px;
    padding-left: 0.4%;
}
.footparent0{width:23.5%;height: 100%; float:left;}
.footparent1{width:23.6%; height: 100%; float:left; margin-left: 1.6%;}
.footparent2{width:23.5%; height: 100%; float:right; margin-right:1.3%;}
.footparent3{width:23.6%; height: 100%; float:right; margin-right:1.5%;}
.footChild{
	overflow: hidden; 
	position: relative;  
	width:100%;
	height:100%;
}
/*挂牌会员实时监控*/
.huiYuanLst{ position: relative;width:50%;height:50%;float: left;}
.huiYuanLst:last-child{ top: -15px; }
.huiYuanLst3{ top: -15px; }
.huiyuan{ position: absolute;bottom:0;left:20%;display:inline-block;width:100%;padding-left:0px;box-sizing: border-box; font-size: 12px;}
.huiyuan:nth-child(1){  }
.huiyuan ul{ float:left;}
.huiyuan li{ float:left;width:4px;height:8px;margin-right: 4px;background: #1D2088; }
.huiyuan li:last-child{ margin-right:0; }
.huiyuan span{ float:right;line-height: 7px; margin-right:30%;color:#63D9FF;margin-top: 0px;}
.huiyuan p{clear:both;padding-top: 0px;color:#62C0EB; }
.yibiao{ position: absolute;width:50%;height:120px;top:35px;left:20%;}
.contgundong{ height:110px;position: relative;top:60px;overflow: hidden;}
.ruzhustatus{ position: absolute;color:#fff; font-size: 18px; left:15px;top:30px;}
/*北海市猪链网动态*/
#jiage{ position: absolute;bottom: 0;left: 0;width:100%;height:90%;}
/*交易大厅实时监控*/
.chengjiaoliang{ position: absolute;bottom: 20px; font-size: 12px;}
.chengjiaoliang>div{ display:inline-block; margin-left: 15px;}
.chengjiaoliang p{padding-right: 5px; text-align: right; color:#63D9FF;}
.chengjiaoliang ul{ display:inline-block; margin-top: 30px;width:10px;}
.chengjiaoliang li{ width:15px; height:10px; background: #1D2088; margin-bottom:5px;float:left; }
.chengjiaoliang li:last-child{ margin-bottom:0;  }
.chengjiaoliang span{ display:inline-block;width:12px; height:100%;  color:#62C0EB; }
#CJpie{ position: absolute; right:0; width:60%; height:100%;}
/*成交量实时监控*/
#timebar{ position: relative;height:30px; width:100%; margin:30px auto 0 ;padding:15px;}
#timebar .kedu{position: relative;margin-left:7px; width:100%;margin-top: 10px;}
#timebar .kedu li{ position: absolute;bottom:0;float:left; transition:2s ease;width:3px; height:6px;margin-right: 10px; background: #3BFE91;}
#timebar .kuang{ box-sizing:border-box;width:90%;height:24px;border:2px solid #3BFE91;border-radius:0 25px 25px 0/0 25px 25px 0; padding:5px;}
#timebar .tianchong{ width:90%;height:10px; transition:2s ease;background: linear-gradient(to right,#015B71,#3BFE90); border-radius:0 20px 20px 0/0 20px 20px 0;}
#timebar span{ position: absolute;top: 0;left:150px;transition:2s ease;display:inline-block;width:380px;text-align: center;color:#3BFE91;margin-left:-150px; font-size: 12px;}
#cjliang{ height:65%; }
/*底部foot--结束*/

/*公共部分--开始*/
/*边框*/
.footChild,.bodyRightBottom,.bodyRightTop,.bodyMiddleChild,.bodyLeftBottom,.bodyLeftTop{border:4px solid rgba(8,67,137,.7);}
/*背景色*/
.footChild,.bodyLeftTop,.bodyLeftBottom,.bodyMiddle,.bodyRightBottom,.bodyRightTop{background: rgb(31,53,249,0.15);}
/*小标题*/
.childtitle {
	position: absolute; 
	top:5px;
	left:8px;
	display:inline-block;
	background:url(../images/childtitle.png) no-repeat;
	background-size:100% 100%;
	padding:2px 15px 2px 15px;
}
.childtitle h2{
	text-align: left;
	font-size:18px;
	display: block;
}
.childtitle h2,#list p,#close{
	font-weight:bold;
	background-image:-webkit-gradient(linear,0 top,0 bottom,from(#CFE3FF),to(#74B3FC));
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
	/*color:#9ECBFF;*/
}
.bodyLeftTop .childtitle{}
.bodyRightTop .childtitle{}
/*放大按钮*/
.add{ 
	position: absolute; 
	z-index:10;
	height:30px; 
	line-height: 30px; 
	border:2px solid #1D53C0; 
	padding:0 10px; 
	right: 15px; 
	top: 5px; 
	font-size: 16px; 
	font-weight: bold; 
	color:#fff 
} 
.cancle{height:38px; line-height: 32px;  }
/*列表信息滚动*/
.moveul{position: absolute;top:0;width:100%;}
.moveul li{font-size:12px;color:#0089FF;}
.moveul li:hover{color:#FFFFFF;}
.huiYuanLst	.moveul span{display:inline-block;width:80%;height:100%;text-overflow: ellipsis; overflow: hidden; white-space:nowrap;}
.huiYuanLst	.moveul li{ height:15px; line-height: 15px;}
.huiYuanLst .moveul li i{ vertical-align: 10px; }
.moveul li i{display: inline-block;width:10px;height:10px;border-radius: 50%;background: #FBED14;margin-right: 10px;}

.call{ position: absolute;left:0;bottom:0; width:100%;height:30px; overflow: hidden;line-height: 28px;}
.call .moveul li{ float:left; height:28px; width:30%;padding-left:15px;}
.call .moveul li i{ background: #00F6FF; }
.call .moveul span{ color: #00F6FF; }

/*蒙版弹框*/
.mask{ display:none;position: absolute;top:0;left:0;z-index:11;width:100%; height:100%;background: linear-gradient(to right,#12296D,#030F32)}
.maskContent{ position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); }

/*公共部分--结束*/