*{padding:0;margin:0;list-style: none; max-height: 99999px; box-sizing: border-box; }
html,body{width:100%;height:100%;overflow:hidden;background:rgb(17, 42, 109);}
.screen-wrap{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.content{position: relative;width:3840px;height:2160px;box-sizing:border-box;padding-bottom: 35px; background:rgb(17, 42, 109); overflow: hidden; font-size:30px;transform-origin:center center;flex-shrink:0;}
.rel{position: relative;}
.clear{ clear:both; }
.clear::after{ content:""; display:block; clear:both; }
/*背景动画-开始*/
#animations{ position: absolute; width:3840px;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:618px; height:618px;  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)}	
} 
/*背景动画-开始*/
/*头部head--开始*/
#head{ position:relative;width:3840px;height:240px;}
#head .getDate{position:absolute;left:124px;top:34px;font:48px 黑体;color:#ADC2FF;z-index:2;}
#head .getDate span{margin-right: 35px;}
#head h1{position:absolute;left:0;right:0;top:0;width:100%;height:240px;margin:0;font-size:80px;line-height:240px;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;pointer-events:none;}
#head .filter-bar{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:28px;font-size:24px;color:#ADC2FF;white-space:nowrap;z-index:20;}
#head .community-select{position:relative;width:420px;z-index:30;}
#head .community-select-trigger{
	display:flex;
	align-items:center;
	justify-content:space-between;
	width:100%;
	height:56px;
	padding:0 22px;
	border:1px solid rgba(47,111,224,.95);
	border-radius:10px;
	background:
		linear-gradient(180deg,rgba(24,74,168,.95) 0%,rgba(10,40,108,.96) 100%);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 18px rgba(15,140,255,.18);
	color:#F2F8FF;
	font:600 24px/1 "微软雅黑",sans-serif;
	cursor:pointer;
	outline:none;
	transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
#head .community-select-trigger:hover,
#head .community-select.open .community-select-trigger{
	border-color:#09F6FD;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 22px rgba(9,246,253,.28);
}
#head .community-select-label{
	flex:1;
	min-width:0;
	overflow:hidden;
	text-overflow:ellipsis;
	text-align:left;
}
#head .community-select-arrow{
	width:12px;
	height:12px;
	margin-left:16px;
	border-right:3px solid #9ECBFF;
	border-bottom:3px solid #9ECBFF;
	transform:rotate(45deg) translateY(-3px);
	transition:transform .2s ease, border-color .2s ease;
	flex-shrink:0;
}
#head .community-select.open .community-select-arrow{
	border-color:#09F6FD;
	transform:rotate(225deg) translateY(-2px);
}
#head .community-select-panel{
	display:none;
	position:absolute;
	left:0;
	right:0;
	top:calc(100% + 10px);
	max-height:420px;
	margin:0;
	padding:10px;
	list-style:none;
	overflow:auto;
	border:1px solid rgba(9,246,253,.55);
	border-radius:12px;
	background:linear-gradient(180deg,rgba(12,48,120,.98),rgba(7,28,82,.98));
	box-shadow:0 16px 40px rgba(0,0,0,.35),0 0 24px rgba(9,246,253,.16);
	backdrop-filter:blur(6px);
}
#head .community-select.open .community-select-panel{display:block;}
#head .community-select-panel li{
	height:48px;
	padding:0 18px;
	margin-bottom:6px;
	border-radius:8px;
	color:#C9DEFF;
	font:500 22px/48px "微软雅黑",sans-serif;
	cursor:pointer;
	overflow:hidden;
	text-overflow:ellipsis;
	transition:background .15s ease, color .15s ease;
}
#head .community-select-panel li:last-child{margin-bottom:0;}
#head .community-select-panel li:hover{
	background:rgba(9,246,253,.14);
	color:#FFFFFF;
}
#head .community-select-panel li.active{
	background:linear-gradient(90deg,rgba(29,83,192,.95),rgba(15,140,255,.55));
	color:#FFF600;
	box-shadow:inset 3px 0 0 #FBED14;
}
#head .date-range{display:flex;align-items:center;gap:14px;}
#head .date-range-sep{color:#9ECBFF;font-size:24px;font-weight:bold;}
#head .month-input{
	appearance:none;
	-webkit-appearance:none;
	height:56px;
	min-width:220px;
	padding:0 18px;
	border:1px solid rgba(47,111,224,.95);
	border-radius:10px;
	background:linear-gradient(180deg,rgba(24,74,168,.95) 0%,rgba(10,40,108,.96) 100%);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 18px rgba(15,140,255,.18);
	color:#F2F8FF;
	font:600 24px/1 "微软雅黑",sans-serif;
	outline:none;
	cursor:pointer;
	transition:border-color .2s ease, box-shadow .2s ease;
}
#head .month-input:hover,
#head .month-input:focus{
	border-color:#09F6FD;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 22px rgba(9,246,253,.28);
}
#head .month-input::-webkit-calendar-picker-indicator{
	filter:invert(1) brightness(1.4);
	cursor:pointer;
	opacity:.9;
}
/*头部head--结束*/

/*主体body--开始*/
#body{ margin-top: 20px; height:1132px; }
#body>div{ float:left; height:100%; }
/*主体左边区域*/
.bodyLeft{ width:1265px; margin-left: 20px;}

/*小区户数数据*/
.bodyLeftTop{ width:1265px; height:548px; position: relative;}
.household-panel{
	display:flex;
	align-items:stretch;
	margin-top:58px;
	padding:0 16px 14px;
	height:calc(100% - 58px);
	gap:20px;
	box-sizing:border-box;
	overflow:hidden;
}
.household-stats{
	width:240px;
	flex-shrink:0;
	display:flex;
	flex-direction:column;
	gap:14px;
	justify-content:flex-start;
}
.household-stats li{
	flex:none;
	height:90px;
	background:rgba(0,102,255,0.22);
	border:1px solid rgba(29,83,192,0.65);
	border-left:5px solid #09F6FD;
	border-radius:8px;
	padding:6px 8px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	text-align:center;
	box-sizing:border-box;
}
.household-stats li:nth-child(4){ border-left-color:#FBED14; }
.household-stats span{
	font-size:40px;
	color:#FFF600;
	font-family:"黑体";
	line-height:1;
	font-weight:bold;
}
.household-stats p{
	font-size:22px;
	color:#FFFFFF;
	margin-top:6px;
	font-family:"黑体";
	font-weight:bold;
	text-align:center;
}
.household-chart{
	flex:1;
	min-width:0;
	min-height:0;
	background:rgba(31,53,249,0.08);
	border:1px solid rgba(8,67,137,.45);
	border-radius:8px;
	cursor:pointer;
}
/*当前成交总数和月成交总数*/
.bodyLeftBottom{ width:1265px;height:550px; margin-top: 23px;}
.bodyLeftBottomLeft,.bodyLeftBottomRight{ float:left;width:50%;height:100%;position:relative;}
.bodyLeftBottomLeft{overflow:hidden;z-index:1;}
.bodyLeftBottomRight{z-index:2;}
#left-bottom{width:100%;height:calc(100% - 88px);margin-top:52px;margin-left:0;overflow:hidden;}
.fee-hint{position:absolute;left:0;bottom:10px;width:100%;text-align:center;color:#ADC2FF;font-size:18px;letter-spacing:1px;pointer-events:none;}
.bodyLeftBottomRight .t-right{width:100%;height:100%;}
.bodyLeftBottomRight .t-right ul{width:610px;height:500px;position:absolute;left:8px;top:56px;z-index:3;}
.bodyLeftBottomRight .t-right li{width:610px;height:26px;margin-top:20px;position:relative;cursor:pointer;}
.bodyLeftBottomRight .t-right li.line{cursor:default;}
.bodyLeftBottomRight .t-right li:hover .fee-name{color:#09F6FD;}
.bodyLeftBottomRight .t-right .fee-name{display:inline-block;width:108px;height:26px;line-height:26px;text-align:right;padding-right:10px;font:bold 18px "微软雅黑";color:#9ECBFF;float:left;box-sizing:border-box;}
.bodyLeftBottomRight .t-right .fee-track{position:absolute;left:108px;display:inline-block;width:490px;height:26px;border:1px solid #1A6BD5;border-left:none;}
.bodyLeftBottomRight .t-right .fee-paid{overflow:hidden;position:relative;color:#fff;display:inline-block;height:100%;line-height:24px;float:left;font:bold 16px "微软雅黑";text-align:right;background:linear-gradient(90deg,rgba(28,40,200,1),rgba(15,182,252,1));transition:2s;padding-right:6px;box-sizing:border-box;}
.bodyLeftBottomRight .t-right .line{position:absolute;height:470px;width:0;border-right:2px solid #293CF8;left:108px;top:-10px;margin-top:0;}
.bodyLeftBottomRight .t-right .fee-paid.active{border-right:2px solid rgba(255,255,0,1);animation:light2 0.5s linear infinite;}
.bodyLeftBottomRight .t-right .fee-paid 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:linear-gradient(90deg,rgba(255,255,255,0),rgba(15,182,252,1));}
.bodyLeftBottomRight .t-right .fee-num{position:absolute;right:8px;top:0;z-index:2;height:100%;line-height:24px;width:auto;color:#fff;font-size:15px;text-align:right;text-shadow:0 0 4px #000;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .2s ease;}
.bodyLeftBottomRight .t-right li:hover .fee-num{opacity:1;visibility:visible;}
@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{ width:1196px;margin-left: 32px;height:1134px !important;overflow: hidden;}
/*全国草场面积监控*/
.bodyMiddleChild{ width:1190px;height:1130px; -position: relative;}
.chuangkou{width:2368px;height:1769px;position:absolute;top:361px;left:2631px;text-align: center;  background:url(../images/chuangkoubg.png) no-repeat;}
 #list{margin-top: 44px;}
 #list li{display:inline-block;width:343px;height:49px;margin-left:30px;background-size:100% 50%;background: url(../images/list.png) no-repeat;font:bold 25px "微软雅黑";line-height: 49px;}
 #list p{float:left;margin-left: 25px;}
 #list span{float:right;font:25px 微软雅黑;color:#ccff00;margin-top: 10px;margin-right: 22px;}
.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; }
#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{ width:1262px; margin-left: 38px;}
/*挂牌产品类别*/
.bodyRightTop{width:1262px; height:548px; }
.bodyRightBottom{ width:1262px;height:550px; margin-top: 23px;}
.liushuihao{height:866px;background:rgb(14,37,125,0.5);}
.liushuihaoul li{ width:100%;height:50px; display:block; }
.liushuihaoul span{display: inline-block;float:left;width:208px;line-height: 50px;font-size:26px;text-overflow: ellipsis; overflow: hidden; white-space:nowrap;vertical-align: middle;text-align: center;box-sizing:border-box;padding:0 4px;}
.default{ height:52px; color:#fff;line-height: 52px;margin-top:16px;font-size:29px;}
.default span{ display: inline-block; float:left;width:208px; text-align: center;font-size:26px;text-overflow: ellipsis; overflow: hidden; white-space:nowrap;box-sizing:border-box;padding:0 4px;}
/* 工单编号列收窄，避免编号显示溢出；多出的宽度给报修内容 */
.default span.num,
.liushuihaoul li span:nth-child(1){ width:160px; }
.default span.name,
.liushuihaoul li span:nth-child(2){ width:256px; }
.default span.time,
.liushuihaoul li span:nth-child(3){ width:200px; }
.default span.status,
.liushuihaoul li span:nth-child(4){ width:180px; }
.default span:nth-child(5),
.liushuihaoul li span:nth-child(5){ width:230px; }
.default span:nth-child(6),
.liushuihaoul li span:nth-child(6){ width:222px; }
.bodyRightTopBG{ margin-left:8px;width:1248px;height:calc(100% - 70px);background: url("../images/001.png") no-repeat;background-size:100% 100%;}
.liushuihaoul{height:calc(100% - 78px);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--开始*/
#foot{ margin-top: 42px; height:707px; padding-left: 20px; }
#foot>div{ float:left; }
.footparent0{margin-right:32px;}
.footparent1{margin-right:38px;}
.footparent2{margin-right:0;}
.footChild{ overflow: hidden; position: relative; height:705px;}
.footChild0{ width:1265px; }
.footChild1{ width:1196px; }
.footChild2{ width:1262px; }
#jiage{ position:relative;width:100%;height:calc(100% - 88px);margin-top:52px;overflow:hidden;}
.chengjiaoliang{ position: absolute;left:20px;bottom: 36px; font-size: 24px;z-index:2;}
.chengjiaoliang>div{ display:inline-block; margin-left: 18px; vertical-align:bottom; text-align:center; width:84px; cursor:pointer;}
.chengjiaoliang>div:hover .cjl-name{ color:#09F6FD; }
.chengjiaoliang p{ text-align: center; color:#63D9FF; padding:0; margin:0 0 8px; font-size:22px; font-weight:bold;}
.chengjiaoliang ul{ display:inline-block; margin:0 auto;width:50px;}
.chengjiaoliang li{ width:50px; height:24px; background: #1D2088; margin-bottom:15px;float:left; }
.chengjiaoliang li:last-child{ margin-bottom:0;  }
.chengjiaoliang .cjl-name{ display:block; width:100%; max-width:84px; margin:12px auto 0; color:#62C0EB; font-size:18px; line-height:1.35; overflow:hidden; white-space:normal; word-break:break-all; word-wrap:break-word;}
#CJpie{ position: absolute; right:0; width:640px; height:100%;}
#cjliang{ position: absolute;bottom: 0;left: 0;width:100%;height:90%;}
/*底部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; left:8px;top:12px;display:inline-block;background:url(../images/childtitle.png) no-repeat;background-size:100% 100%;left:8px;top:12px;padding:2px 50px 2px 15px;}
.childtitle h2{text-align: left;font-size:42px;display: inline-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{ position: relative; }
.bodyRightBottom .childtitle{ position: relative; }
/*放大按钮*/
.add{ position: absolute; z-index:30;height:51px; line-height: 51px; border:2px solid #1D53C0; padding:0 10px; right: 15px; top: 15px; font-size: 42px; font-weight: bold; color:#fff; cursor:pointer; } 
.cancle{height:38px; line-height: 32px;  }
/*列表信息滚动*/
.moveul{position: absolute;top:0;width:100%;}
.moveul li{font-size:26px;color:#0089FF;}
.moveul li:hover{color:#FFFFFF;}
.moveul li i{display: inline-block;width:15px;height:15px;border-radius: 50%;background: #FBED14;margin-right: 10px;}
/*蒙版弹框*/
.mask{ display:none;position: absolute;top:0;left:0;z-index:50;width:100%; height:100%;background:rgb(17, 42, 109);}
.maskContent{ position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); }
.bill-modal{display:none;position:absolute;top:0;left:0;z-index:200;width:100%;height:100%;background:rgba(3,15,50,.72);}
.bill-dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:1680px;max-height:78%;background:#112A6D;border:2px solid #1D53C0;border-radius:12px;padding:28px 36px 32px;box-sizing:border-box;z-index:201;}
.bill-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.bill-head h3{font-size:43px;color:#CFE3FF;font-weight:bold;}
.bill-close{font-size:55px;color:#fff;cursor:pointer;line-height:1;padding:0 8px;}
.bill-summary{color:#FBED14;font-size:29px;margin-bottom:16px;}
.bill-table-wrap{max-height:980px;overflow:auto;}
.bill-table-wrap table{width:100%;border-collapse:collapse;color:#fff;font-size:29px;}
.bill-table-wrap th,.bill-table-wrap td{padding:14px 12px;text-align:center;border-bottom:1px solid rgba(29,83,192,.55);}
.bill-table-wrap th{color:#ADC2FF;font-size:29px;background:rgba(0,102,255,.18);}
.bill-table-wrap tr:hover td{background:rgba(9,246,253,.08);}
.bill-status-paid{color:#3BFE91;}
.bill-status-unpaid{color:#FF6B6B;font-weight:bold;}
.household-detail-dialog{width:1880px;}
.household-detail-table{max-height:860px;}
.household-status{font-weight:bold;}
.household-status-1{color:#3BFE91;}
.household-status-2{color:#09F6FD;}
.household-status-3{color:#ADC2FF;}
.household-status-4{color:#FBED14;}
.household-status-5{color:#FF8A5B;}
.household-status-6{color:#D66BFD;}
.detail-pager{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:18px;}
.detail-pager .pager-btn{
	min-width:120px;
	height:52px;
	padding:0 20px;
	border:1px solid #2F6FE0;
	border-radius:8px;
	background:linear-gradient(180deg,rgba(24,74,168,.95),rgba(10,40,108,.96));
	color:#E8F3FF;
	font-size:27px;
	cursor:pointer;
}
.detail-pager .pager-btn:hover{border-color:#09F6FD;color:#fff;}
.detail-pager .pager-btn:disabled{opacity:.4;cursor:not-allowed;}
.detail-pager .pager-info{color:#FBED14;font-size:29px;min-width:160px;text-align:center;}
/*板块切换*/
.navbar{ position: absolute;left: 420px; right: 90px; top:0;padding:24px 0 0; font-size: 27px;z-index:10;white-space:nowrap;overflow-x:auto;overflow-y:hidden;}
.navbar span{margin-right: 28px;color:#0089FF;cursor:pointer;display:inline-block;}
.navbar span.active{ color:#fff; }
/*公共部分--结束*/
</style>