*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body {background: #264274;background: #f3f3f3;}

.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}
*html .clearfix{height:1%}
.aa:before{content:"";display:inline-block;height:100%;width:0;vertical-align: middle;margin-left:-.25em;//这里是为了去除inline-block的空隙的影响}
.aa>.aaa{display:inline-block;vertical-align: middle;}
html,body{padding:0;margin:0;height:100%;width:100%;}
.aa{
  width:100%;
  height:100%;
  text-align:center;
  position: absolute;top: 0;left: 0;
}
.aaa{
  color: #278bb8;
  color: #777;
  font-size:2 4px;
  font-family: "Microsoft YaHei", "黑体",cursive;
  text-align: center;
  line-height: 34px;
}
.button {
  display: block;
  margin: 20px auto;
  width: 150px;
  height: 40px;
  line-height: 40px;
  position: relative;
  cursor: pointer;
  color: #666;
}
.enter_icon {
  
}


/*页面内容逐渐出现特效*/
@keyframes fade {
  from {opacity: 1.0;}80% {opacity: 0.6;}to{opacity: 1.0;}
}
@-webkit-keyframes fade {
  from {opacity: 1.0;}80% {opacity: 0.6;}to{opacity: 1.0;}
}   
/*.fade {
  animation: fade 3000ms ease infinite;
  -webkit-animation: fade 3000ms ease infinite;
}*/
@-webkit-keyframes welcom_content {
  from {opacity: 0;}to{opacity: 1.0;}
} 
.welcom_content {
  z-index: 999;
  animation: welcom_content 5000ms ease;
  -webkit-animation: welcom_content 5000ms ease;
}
.welcom_content img{
  margin-bottom: 20px;
  width: 150px;
}
.welcom_content h1{
  text-shadow: 5px 2px 6px #aaa;
  font-size: 30px;
}
.welcom_content h2{
  text-shadow: 5px 2px 6px #aaa;
  font-size: 24px;
}
.welcom_content p{
  line-height: 500px;
  font-size: 4em;
  text-shadow: 5px 2px 6px #aaa;
}
.welcom_content p:hover {
  text-shadow: 5px 2px 6px #aaa;
  color:#004b8d;
}
.icon {
  width: 1em; height: 1em;
  vertical-align: text-bottom;
  fill: currentColor;
  overflow: hidden;
}

/*背景地图焦点动画特效*/
.map-service{position:relative;/*height:760px;*/}
.map-service-right{/*padding-top:60px*/}
.china-map{
  position: relative;
  width: 1080px;
  height: 880px;
  margin: auto;
}
.region-list{position:absolute;left:0;top:0;opacity: 0.2;}

@-webkit-keyframes warn{
0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}
100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}
}
@-moz-keyframes warn{
0%{-moz-transform:scale(0);transform:scale(0);opacity:1}
100%{-moz-transform:scale(1);transform:scale(1);opacity:0}
}
@-o-keyframes warn{
0%{-o-transform:scale(0);transform:scale(0);opacity:1}
100%{-o-transform:scale(1);transform:scale(1);opacity:0}
}
@keyframes warn{
0%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0);opacity:1}
100%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);opacity:0}
}
.area-box .dot{position:absolute;left:2px;top:2px;width:10px;height:10px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;background:#a2a9b4;opacity:1;filter:alpha(opacity=100)}
.area-box .pulse{position:absolute;top:-28px;left:-28px;height:66px;width:66px;border:2px solid #b7b7b7;-webkit-border-radius:48px;-moz-border-radius:48px;border-radius:48px;-webkit-box-shadow:0 0 4px #82878f,0 0 10px #82878f inset;-moz-box-shadow:0 0 4px #82878f,0 0 10px #82878f inset;box-shadow:0 0 4px #82878f,0 0 10px #82878f inset;opacity:.12;filter:alpha(opacity=0);-webkit-animation:warn 2s ease-out both;-moz-animation:warn 2s ease-out both;-o-animation:warn 2s ease-out both;animation:warn 2s ease-out both;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;-o-animation-iteration-count:infinite;animation-iteration-count:infinite;background:0 0}
.area-box .delay-01{-webkit-animation-delay:0;-moz-animation-delay:0;-o-animation-delay:0;animation-delay:0}
.area-box .delay-02{-webkit-animation-delay:.4s;-moz-animation-delay:.4s;-o-animation-delay:.4s;animation-delay:.4s}
.area-box .delay-03{-webkit-animation-delay:.8s;-moz-animation-delay:.8s;-o-animation-delay:.8s;animation-delay:.8s}
.area-box .delay-04{-webkit-animation-delay:1.2s;-moz-animation-delay:1.2s;-o-animation-delay:1.2s;animation-delay:1.2s}
.area-box .delay-05{-webkit-animation-delay:1.6s;-moz-animation-delay:1.6s;-o-animation-delay:1.6s;animation-delay:1.6s}
.area-box .delay-06{-webkit-animation-delay:2s;-moz-animation-delay:2s;-o-animation-delay:2s;animation-delay:2s}
.area-box .delay-07{-webkit-animation-delay:2.4s;-moz-animation-delay:2.4s;-o-animation-delay:2.4s;animation-delay:2.4s}
.area-box .delay-08{-webkit-animation-delay:-.4s;-moz-animation-delay:-.4s;-o-animation-delay:-.4s;animation-delay:-.4s}
.area-box .delay-09{-webkit-animation-delay:-.8s;-moz-animation-delay:-.8s;-o-animation-delay:-.8s;animation-delay:-.8s}
.area-box .delay-10{-webkit-animation-delay:-1.2s;-moz-animation-delay:-1.2s;-o-animation-delay:-1.2s;animation-delay:-1.2s}
.area-box .delay-11{-webkit-animation-delay:4s;-moz-animation-delay:4s;-o-animation-delay:4s;animation-delay:4s}
.region-list.active .area-box .dot{background:#009fd9}
.region-list.active .area-box .pulse{border-color:#009fd9;top:-39px;left:-39px;height:88px;width:88px;-webkit-box-shadow:0 0 12px #0080d9,0 0 20px #0080d9 inset;-moz-box-shadow:0 0 12px #0080d9,0 0 20px #0080d9 inset;box-shadow:0 0 12px #0080d9,0 0 20px #0080d9 inset}
.region-list.waite .area-box .dot{background:#f90}
.region-list.waite .area-box .pulse{border-color:#f90}
.show-regin{position:absolute;left:2px;height:0;top:0;width:11px;opacity:0;-o-transition:all .5s ease-in-out;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;transition:all .5s ease-in-out}
.online-node .show-regin,.region-list:hover .show-regin,.underline-node .show-regin,.waite-node .show-regin{/*height:127px;*/opacity:1}
.show-regin span{width:80px;position:absolute;left:8px;top:-11px;padding:6px 10px;font-size:14px;color:#ccc;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;text-align:center;white-space:nowrap;}
.postition-10 .show-regin span{left:0}
.postition-6 .show-regin span{left:-72px}
.area-box{z-index:77}
.show-regin{z-index:66}
.region-list.active .show-regin span{position:relative;color:#ccc}
.region-list.waite .show-regin span{color:#ccc}
.postition-1{left:302px;top:308px}
.postition-2{left:401px;top:403px}
.postition-3{left:358px;top:516px}
.postition-4{left:473px;top:348px}
.postition-5{left:526px;top:394px}
.postition-6{left:526px;top:515px}
.postition-7{left:640px;top:240px}
.postition-7.region-list.active .area-box .pulse{top:-50px;left:-50px;width:110px;height:110px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}
.postition-8{left:559px;top:270px}
.postition-9{left: 610px;top: 410px;}
.postition-9.region-list.active .area-box .pulse{top:-50px;left:-50px;width:110px;height:110px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}
.postition-10{left:554px;top:539px}
.postition-11{left:604px;top:320px}
.postition-13{left:470px;top:280px}
.douhao{width:0}

/*鼠标点击按钮圆圈特效*/
.click_cicle {height: 0; width: 0; position: absolute; visibility: hidden;}


/* 鼠标悬停按钮边框动画特效 */
.position {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: 0%;
}

.spot {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.svg-wrapper {
  margin-top: 0;
  position: relative;
  width: 150px;
  height: 40px;
  display: inline-block;
  border-radius: 3px;
/*  margin-left: 5px;
  margin-right: 5px*/
}

#text {
  margin-top: -50px;
  text-align: center;
  font-size: 1.2em;
}

#shape {
  stroke-width: 6px;
  fill: transparent;
  stroke: #004b8d;
  stroke-dasharray: 110 400;
  stroke-dashoffset: -210;
  transition: 1s all ease;
}

.svg-wrapper:hover #shape {
  stroke-dasharray: 50 0;
  stroke-width: 3px;
  stroke-dashoffset: 0;
  stroke: #4f8dc4;
}
/*.button:hover {background: #ebfaff;;border-radius: 5px;}*/