/*共用区*/
a:focus {  outline:none; -moz-outline:none;}
/* .hide {display: none!important;} */

/*引用字库*/
@font-face { font-family:'electronicFont'; src: url("font/DS-DIGIT.TTF"); }

/*主体 - 禁选 - 进场 */
html,body { background: #000; height: 100%; color:#fff;  font-family: "microsoft yahei", simhei; moz-user-select: -moz-none; moz-user-select: none;  -o-user-select:none;  -khtml-user-select:none;  -webkit-user-select:none; -ms-user-select:none; user-select:none;}
body{  overflow-x: hidden; -webkit-animation:fadeIn 1s .2s ease both;  -moz-animation:fadeIn 1s .2s ease both;}
@-webkit-keyframes fadeIn{ 0%{opacity:0; } 100%{opacity:1;} }
#wrapper { float: left; width:100%; height: 100%;  background: url("../images/bg01warp.png") 50% 50% no-repeat; background-size: 100%; }

/*时间区*/
.timeCmp{position: relative;}
.date-timer{ text-align: center; position: absolute; left:15%; bottom:-10px;display: flex;align-items: center;}
.date-timer span { display:inline-block; font-family:'electronicFont';font-size:20px;}
.date-timer em {display: block;font-size: 16px; }
.date-timer ul {font-family:'electronicFont'; font-size: 20px;}
.date-timer ul li { display:inline-block;}


/* 弹窗 */
.filterbg{
	width: 100%;
	height: 100%;
	background: rgba(29,73,178,0.5);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999998;
	display: none;
}
.popup{
	width: 0;
	height: 0;
	/* background: #061f3e; */
  /* background: url(../../../../public/img/grid/bg2.png) no-repeat 100%; */
  background:rgba(0,0,0,0.8);
  background-size: cover;
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 999999;
	border-radius: 8px;
	display: none;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
.popup .popupClose{
	display: block;
	width: 44px;
	height: 44px;
	background: url(../images/s_ico3.png);
	background-size: 100 100%;
	position: absolute;
	top: -22px;
	right: -22px;
	display: none;
	transition: 0.3s;
}
.popup .popupClose:hover{
	transform: rotate(180deg);
}
.summary{
	/* width: 96%; */
	/* height: 92%; */
	/* margin: 2% auto; */
	display: none;
}
/* map地图边框 */
.visual_conBot{height:calc(100% - 136px);background:url(../images/ksh41.png) no-repeat;background-size:100% 100%;position:relative;margin: 15px;box-sizing: border-box;}
.visual_conBot>img{position:absolute;width:25px;height:25px;}
.visual_conBot .visual_conBot_l{position:absolute;left:0;top:0;}
.visual_conBot .visual_conBot_2{position:absolute;right:0;top:0;}
.visual_conBot .visual_conBot_3{position:absolute;right:0;bottom:0;}
.visual_conBot .visual_conBot_4{position:absolute;left:0;bottom:0;}
.visual_conBot .visual_chart{width:100%;height:100%;position:absolute;}

/* 边框 */
.visual_box{height:33.33%;box-sizing: border-box;}
.visual_box .visual_title{position:relative;height:35px;margin:5px 0;}
.visual_box .visual_title span{color:#fff;font-size:18px;line-height:35px;}
.visual_box .visual_title img{width:100%;position:absolute;left:0;bottom:0;}
.visual_box .visual_chart{height:calc(100% - 35px);}

/* 顶部大指标 */
.big-index-1 { position: relative; overflow: hidden;}
.big-index-1 ul {display: flex;}
.big-index-1 li {transition: all 0.1s ease;  cursor: pointer; position: relative;  overflow: hidden;box-sizing: border-box; width: 145px;height:54px;text-align: center; padding-top: 10px;background: url(../images/bg01bigindex.png) 0 0 no-repeat; margin-right: 16px;}
.big-index-1 li strong {line-height: 22px;display: block; color: #fff;font-family:'electronicFont'; font-size: 22px; font-weight: normal;}
.big-index-1 li p { display: block; color: #b8b9bb; font-size:12px;}
.big-index-1 li .animation-1 { -webkit-animation-iteration-count: infinite;   -webkit-animation-name:bounceInLeft1 ; -webkit-animation-duration: 9000ms; position: absolute; left: 12px; bottom:1px; height: 3px;  width: 345px; background: url(../images/bg04bigindex.png) 0 0 repeat-x;}
.big-index-1 li .animation-2 {position: absolute; right:0; top:1px; height: 16px;  width: 15px; background: url(../images/bg02bigindex.png) 0 0 no-repeat;}
.big-index-1 li .animation-3 {position: absolute; right:-1px; bottom:-1px; height: 4px;  width: 4px; background: url(../images/bg03bigindex.png) 50% 50% no-repeat;}
.big-index-1 li:hover .animation-2 { background: url(../images/bg02bigindex_.png) 0 0 no-repeat;}
.big-index-1 li:hover .animation-3 {  background: url(../images/bg03bigindex_.png) 50% 50% no-repeat;}
.big-index-1 li:hover .animation-1 {-webkit-animation-iteration-count: infinite;   -webkit-animation-name:bounceInRight1 ; -webkit-animation-duration:4000ms;}
.big-index-1 li:hover .animation-2, .big-index-1 li:hover .animation-3{ -webkit-animation:flash .2s .2s ease both; -moz-animation:flash .2s .2s ease both;}

@-webkit-keyframes bounceInLeft1{
    0%{-webkit-transform:translateX(-115px)}
    100%{-webkit-transform:translateX(0)}
}
@-webkit-keyframes bounceInRight1{
    0%{-webkit-transform:translateX(0)}
    100%{-webkit-transform:translateX(-115px)}

}


/* */
@-webkit-keyframes flash{  0%,50%,100%{opacity: 1;} 25%,75%{opacity: 0;} }
@-moz-keyframes flash{ 0%,50%,100%{opacity: 1;} 25%,75%{opacity: 0;} }
@-webkit-keyframes flash1{ 0%,50%,100%{opacity: 1;} 25%,75%{opacity: .5;} }
@-moz-keyframes flash1{ 0%,50%,100%{opacity: 1;} 25%,75%{opacity: .5;} }
@-webkit-keyframes flash2{  0%,50%,100%{opacity: .2;}  25%,75%{opacity: 0;} }
@-moz-keyframes flash1{ 0%,50%,100%{opacity:.2;}  25%,75%{opacity: 0;} }
/*左侧移动*/
h2{
    -webkit-animation:fadeInLeft 1s .1s ease both;
    -moz-animation:fadeInLeft 1s .1s ease both;

}
@-webkit-keyframes fadeInLeft{
    0%{opacity:0;
        -webkit-transform:translateX(-1000px)}
    100%{opacity:1;
        -webkit-transform:translateX(0)}
}
@-moz-keyframes fadeInLeft{
    0%{opacity:0;
        -moz-transform:translateX(-1000px)}
    100%{opacity:1;
        -moz-transform:translateX(0)}
}

.big-index-1{
    -webkit-animation:fadeInDown 1s .2s ease both;
    -moz-animation:fadeInDown 1s .2s ease both;}
@-webkit-keyframes fadeInDown{
    0%{opacity:0;
        -webkit-transform:translateY(-20px)}
    100%{opacity:1;
        -webkit-transform:translateY(0)}
}
@-moz-keyframes fadeInDown{
    0%{opacity:0;
        -moz-transform:translateY(-20px)}
    100%{opacity:1;
        -moz-transform:translateY(0)}
}

/*旋转*/
.logoline3{-webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite;  -webkit-animation-name:forotate ; -webkit-animation-duration: 6000ms; }
@-webkit-keyframes forotate{
    from{
        -webkit-transform:rotate(-360deg);
        opacity: .9;
       }
    to{
        -webkit-transform:rotate(0);
        opacity: 1;
        }
}

@-webkit-keyframes forotate1{
    from{
        -webkit-transform:rotate(0);
    }
    to{
        -webkit-transform:rotate(-180deg);
    }
}


/*弱光*/
@-webkit-keyframes bluePulse {
    from {
        text-shadow: 0 0 10px #003c81,
        0 0 20px #003c81,
        0 0 30px #003c81,
        0 0 40px #003c81,
        0 0 70px #007eff,
        0 0 80px #007eff,
        0 0 100px #007eff,
        0 0 150px #007eff;
    }
    to {
        text-shadow: 0 0 150px #007eff,
        0 0 100px #007eff,
        0 0 80px #007eff,
        0 0 70px #007eff,
        0 0 40px #003c81,
        0 0 30px #003c81,
        0 0 20px #003c81,
        0 0 15px #003c81;
    }
}

@-webkit-keyframes whitePulse {
    from {
        box-shadow: 0 0 26px #fff,
        0 0 4px #fff,
        0 0 2px #fff,
        0 0 0px #fff;

    }
    to {
        box-shadow: 0 0 0 #fff,
        0 0 2px #fff,
        0 0 4px #fff,
        0 0 26px #fff;
    }
}
/*淡入*/
.date-timer{ -webkit-animation:fadeInUp 2.2s .2s ease both;}
@-webkit-keyframes fadeInUp{
    0%{opacity:0;
        -webkit-transform:translateY(20px)}
    100%{opacity:1;
        -webkit-transform:translateY(0)}
}
