<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
  <meta http-equiv="Pragma" content="no-cache" /> 
  <meta http-equiv="Expires" content="0" /> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>10统计图demo</title> 
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Cache-Control" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  <meta name="renderer" content="webkit" />
  <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
  <link href="../eui/css/theme/coolblue/eui.css" rel="stylesheet" type="text/css" />
  <script>var $relpath = "../";</script>
  <script src="../eui/eui.js"></script>
  <script src="../eui/modules/uibase.js"></script>
  <link href="../ebibase/user/coolrptshow/css/coolrptshow.css" rel="stylesheet" type="text/css" />
  <link href="../ebipro/user/coolrptdsn/css/floatdlg.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
@charset "utf-8";
/* CSS Document */

.editorscroll {
        overflow: hidden !important;
}

@charset "utf-8";

.nh-container{
		position: absolute;
		width: 500px;
		height: 500px;
		border: 2px solid rgba(92,255,255,0.1);
		background: rgba(10,106,255,0.1) url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/nhdemo/wange.png) repeat 50% 50% !important;
		background-blend-mode: screen;
		overflow: visible;
}

.nh-container:before,.nh-container:after{
		content: "";
		position: absolute;
		top: -2px;
		width: 5px;
		height: 5px;
		border-color: #0a6aff;
		border-style: solid;
		border-top-width: 2px;
		border-bottom-width:0;
}

.nh-container:before{
		left: -2px;
		border-left-width: 2px;
		border-right-width: 0;
}

.nh-container:after{
		right: -2px;
		border-left-width: 0;
		border-right-width: 2px;
}

.nh-container .nh-content{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
}

.nh-container .nh-content:before,.nh-container .nh-content:after{
		content: "";
		position: absolute;
		bottom: -2px;
		width: 5px;
		height: 5px;
		border-color: #0a6aff;
		border-style: solid;
		border-top-width: 0;
		border-bottom-width:2px;
}

.nh-container .nh-content:before{
		left: -2px;
		border-left-width: 2px;
		border-right-width: 0;
}

.nh-container .nh-content:after{
		right: -2px;
		border-left-width: 0;
		border-right-width: 2px;
}

.nh-container .nh-container-title{
		position: absolute;
		height: 26px;
		font-size: 16px;
		font-family: "Microsoft YaHei UI";
		color: #00c2ff;
		line-height: 26px;
		padding: 0 0 0 20px;
		left: 10px;
		right: 10px;
		top: 10px;
}

.nh-container .nh-container-title:before{
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		margin-top: -7px;
		width: 14px;
		height: 14px;
		background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/nhdemo/nh-container-title.png) no-repeat 0% 0%;
}

.nh-container .nh-container-body{
		position: absolute;
		top: 40px;
		left: 0px;
		right: 0px;
		bottom: 0px;
}
@charset "utf-8";
/* CSS Document */
.pd-info {
  position: absolute;
  width:100%;
  height: 100%;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes bounceInUp {
  from,
		60%,
		75%,
		90%,
		to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInUp {
  from,
		60%,
		75%,
		90%,
		to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

.pd-info .pd-info-center {
  position: absolute;
  top: 50%;
  left:50%;
  width:100%;
  height: 100%;
  transform: translate(-50%,-50%);
}
.pdt-container {
  position: absolute;
}

.pdt-container > div:nth-child(1) {
  left: -25px !important;
}
.pdt-container .pdt-info {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -2.5em;
  transform: translate(0%,-50%);
  white-space: nowrap;
}
.before {
  margin-right: 6px;
  display: inline-block;
  width:12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 2em, 0 0 4em, 0 0 6em, 0 0 8em, 0 0 10em, 0 0 0 0.5em rgba(255, 255, 0, 0.1);
}

.pdt-container .pdt-info > span {
  font-size: 16px;
  color: #0072bc;
  vertical-align: middle;
}
.pdt-container .pdt-info > span:nth-child(1) {
  text-decoration: underline;
}
.pdt-container .pdt-info > span:nth-child(1):hover {
  color: #00aeef;
}
.pdt-container .pdt-info > span:nth-child(2) {
  font-family: Arial;
}

@charset "utf-8";
/* CSS Document */
@charset "utf-8";
/* CSS Document */
.lineDom{
    width:100%;
    height:100%;
}
@charset "utf-8";
/* CSS Document */
.precent{
    width:100%;
    height:100%;
}
.precent .updef {
    position: absolute;
    width: 68%;
    height: 8px;
    left: 3px;
    top: 47%;
    background: rgba(6, 21, 104, 0.5);
    border-radius: 4px;
    box-shadow: 0px 0px 10px #066fe2 inset;
}
.definfo {
        position: absolute;
        top: 50%;
        transform: translate(0%,-50%);
        white-space: nowrap;
        font-size: 14px;
    }
    .definfo span:nth-child(1){
        display: block;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    }
    .definfo span:nth-child(2){
        display: block;
        position: absolute;
        width: 0px;
        margin-left: 21px;
    }
    .definfo0 span:nth-child(1){
        background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/hnyj/icon_ls.png) repeat 0 0 !important;
    }
    .definfo0 span:nth-child(2){
        height: 60px;
        border: 1px dashed #3a962f;
    }
    .definfo0{
        margin-top: -62px;
        margin-left: 30%;
    }
    .definfo1 span:nth-child(1){
        background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/hnyj/icon_hs.png) repeat 0 0 !important;
    }
    .definfo1 span:nth-child(2){
        height: 81px;
        border: 1px dashed #fff600;
    }
    .definfo1{
        margin-top: -93px;
    margin-left: 37%;
    }
    .definfo2{
        margin-top: -92px;
    margin-left: 23%;
    }
    .definfo2 span:nth-child(1){
        background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/hnyj/icon_cs.png) repeat 0 0 !important;
    }
    .definfo2 span:nth-child(2){
        height: 101px;
    border: 1px dashed #ff9232;
    }
    .definfo3{
        margin-top: -41px;
    margin-left: 19%;
    }
    .definfo3 span:nth-child(1){
        background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/hnyj/icon_zs.png) repeat 0 0 !important;
    }
    .definfo3 span:nth-child(2){
        height: 55px;
    border: 1px dashed #5e50e5;
    }
    .definfo4{
        margin-top: -77px;
    margin-left: 14%;
    }
    .definfo4 span:nth-child(1){
        background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/hnyj/icon_ml.png) repeat 0 0 !important;
    }
    .definfo4 span:nth-child(2){
        height: 72px;
    border: 1px dashed #00c172;
    }
    .definfo5{
        margin-top: -43px;
    margin-left: 42%;
    }
    .definfo5 span:nth-child(1){
        background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/hnyj/icon_sl.png) repeat 0 0 !important;
    }
    .definfo5 span:nth-child(2){
        height: 90px;
    border: 1px dashed #1342f1;
    }
    .definfo6{
        margin-top: -72px;
    margin-left: 49%;
    }
    .definfo6 span:nth-child(1){
        background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/hnyj/icon_ql.png) repeat 0 0 !important;
    }
    .definfo6 span:nth-child(2){
        height: 101px;
    border: 1px dashed #0681fd;
    }
    .definfo7{
        margin-top: -51px;
        margin-left: 55%;
    }
    .definfo7 span:nth-child(1){
        background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/hnyj/icon_qql.png) repeat 0 0 !important;
    }
    .definfo7 span:nth-child(2){
        height: 46px;
    border: 1px dashed #2bcbe6;
    }
@charset "utf-8";
/* CSS Document */
@font-face {
  font-family: 'DIGITALDREAMFAT';
  src: url("../vfs/root/products/ebi/sys/coolrpt/coolresource/fonts/DIGITALDREAMFAT.eot");
  src: url("../vfs/root/products/ebi/sys/coolrpt/coolresource/fonts/DIGITALDREAMFAT.eot") format("embedded-opentype"), url("../vfs/root/products/ebi/sys/coolrpt/coolresource/fonts/DIGITALDREAMFAT.woff2") format("woff2"), url("../vfs/root/products/ebi/sys/coolrpt/coolresource/fonts/DIGITALDREAMFAT.woff") format("woff"), url("../vfs/root/products/ebi/sys/coolrpt/coolresource/fonts/DIGITALDREAMFAT.ttf") format("truetype"), url("../vfs/root/products/ebi/sys/coolrpt/coolresource/fonts/DIGITALDREAMFAT.svg#DIGITALDREAMFAT") format("svg");
}
.animated {
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
       animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
       animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
       animation-iteration-count: infinite;
}
.pd-info-left{
    width:100%;
    height:100%;
}
.y-left {
  position: absolute;
  top: 16px;
  left: 30px;
  width: 234px;
  height: 234px;
}
.y-left > [class^=info-1] {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center center;
}
.y-left .info-1-0 {
  background-image: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/info-1-0.png);
  -webkit-animation-duration: 20s;
     -moz-animation-duration: 20s;
       -o-animation-duration: 20s;
          animation-duration: 20s;
}
.y-left .info-1-1 {
  background-image: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/info-1-1.png);
  -webkit-animation-duration: 20s;
     -moz-animation-duration: 20s;
       -o-animation-duration: 20s;
          animation-duration: 20s;
  -webkit-animation-delay: 3s;
     -moz-animation-delay: 3s;
       -o-animation-delay: 3s;
          animation-delay: 3s;
}
.y-left .info-1-2 {
  background-image: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/info-1-2.png);
  -webkit-animation-duration: 20s;
     -moz-animation-duration: 20s;
       -o-animation-duration: 20s;
          animation-duration: 20s;
  -webkit-animation-delay: 8s;
     -moz-animation-delay: 8s;
       -o-animation-delay: 8s;
          animation-delay: 8s;
}
.y-left .info-1-3 {
  background-image: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/info-1-3.png);
  -webkit-animation-duration: 10s;
     -moz-animation-duration: 10s;
       -o-animation-duration: 10s;
          animation-duration: 10s;
  -webkit-animation-delay: 5s;
     -moz-animation-delay: 5s;
       -o-animation-delay: 5s;
          animation-delay: 5s;
}
.y-left .info-1-4 {
  background-image: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/info-1-4.png);
  -webkit-animation-duration: 5s;
     -moz-animation-duration: 5s;
       -o-animation-duration: 5s;
          animation-duration: 5s;
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes rotate {
  0% {
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
         transform-origin: center;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
         transform: rotate(0deg);
  }
  100% {
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
         transform-origin: center;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
         transform: rotate(360deg);
  }
}
@-o-keyframes rotate {
  0% {
    -webkit-transform-origin: center;
    -o-transform-origin: center;
       transform-origin: center;
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
       transform: rotate(0deg);
  }
  100% {
    -webkit-transform-origin: center;
    -o-transform-origin: center;
       transform-origin: center;
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
       transform: rotate(360deg);
  }
}
@keyframes rotate {
  0% {
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
      -o-transform-origin: center;
         transform-origin: center;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
         transform: rotate(0deg);
  }
  100% {
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
      -o-transform-origin: center;
         transform-origin: center;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
      -o-transform: rotate(360deg);
         transform: rotate(360deg);
  }
}
.rotate {
  -webkit-animation-name: rotate;
  -moz-animation-name: rotate;
    -o-animation-name: rotate;
       animation-name: rotate;
  -webkit-animation-timing-function: linear;
     -moz-animation-timing-function: linear;
       -o-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes rotateF {
  100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

@-moz-keyframes rotateF {
  100% {
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
         transform-origin: center;
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
         transform: rotate(-360deg);
  }
}

@-o-keyframes rotateF {
  100% {
    -webkit-transform-origin: center;
    -o-transform-origin: center;
       transform-origin: center;
    -webkit-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
       transform: rotate(-360deg);
  }
}

@keyframes rotateF {
  100% {
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
      -o-transform-origin: center;
         transform-origin: center;
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
      -o-transform: rotate(-360deg);
         transform: rotate(-360deg);
  }
}
.rotateF {
  -webkit-animation-name: rotateF;
  -moz-animation-name: rotateF;
    -o-animation-name: rotateF;
       animation-name: rotateF;
  -webkit-animation-timing-function: linear;
     -moz-animation-timing-function: linear;
       -o-animation-timing-function: linear;
          animation-timing-function: linear;
}
@-webkit-keyframes flashPD {
  0%,
		90% {
    opacity: 1;
  }
  92%,98% {
    opacity: 0;
  }
  96%,
		100% {
    opacity: 1;
  }
}
@-moz-keyframes flashPD {
  0%,
		90% {
    opacity: 1;
  }
  92%,98% {
    opacity: 0;
  }
  96%,
		100% {
    opacity: 1;
  }
}
@-o-keyframes flashPD {
  0%,
		90% {
    opacity: 1;
  }
  92%,98% {
    opacity: 0;
  }
  96%,
		100% {
    opacity: 1;
  }
}
@keyframes flashPD {
  0%,
		90% {
    opacity: 1;
  }
  92%,98% {
    opacity: 0;
  }
  96%,
		100% {
    opacity: 1;
  }
}
.flashPD {
  -webkit-animation-name: flashPD;
  -moz-animation-name: flashPD;
    -o-animation-name: flashPD;
       animation-name: flashPD;
}

.y-number {
  position: absolute;
  left: 0;
  padding-left: 290px;
  -webkit-animation-timing-function: cubic-bezier(1, 0, 0.6, 0.6);
     -moz-animation-timing-function: cubic-bezier(1, 0, 0.6, 0.6);
       -o-animation-timing-function: cubic-bezier(1, 0, 0.6, 0.6);
          animation-timing-function: cubic-bezier(1, 0, 0.6, 0.6);
}
.y-number-1 {
  -webkit-animation-delay: 1s;
     -moz-animation-delay: 1s;
       -o-animation-delay: 1s;
          animation-delay: 1s;
  background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/info-left-line-01.png) no-repeat 180px center;
  height: 60px;
  top: 15px;
}
.y-number-1 .y-number-bg {
  -webkit-animation-delay: 2s;
     -moz-animation-delay: 2s;
       -o-animation-delay: 2s;
          animation-delay: 2s;
  background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/info-left-bg-01.png) no-repeat 50% 50%;
}
.y-number-1 .y-number-icon {
  background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/info-left-icon-01.png) no-repeat 50% 50%;
}
.y-number-2 {
  -webkit-animation-delay: 1.25s;
     -moz-animation-delay: 1.25s;
       -o-animation-delay: 1.25s;
          animation-delay: 1.25s;
  background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/info-left-line-02.png) no-repeat 180px center;
  height: 60px;
  top: 70px;
  padding-left: 350px;
}
.y-number-2 .y-number-bg {
  -webkit-animation-delay: 2.5s;
     -moz-animation-delay: 2.5s;
       -o-animation-delay: 2.5s;
          animation-delay: 2.5s;
  background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/info-left-bg-02.png) no-repeat 50% 50%;
}
.y-number-2 .y-number-icon {
  background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/info-left-icon-02.png) no-repeat 50% 50%;
}
.y-number-3 {
  -webkit-animation-delay: 1.5s;
     -moz-animation-delay: 1.5s;
       -o-animation-delay: 1.5s;
          animation-delay: 1.5s;
  background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/info-left-line-02.png) no-repeat 180px center;
  height: 60px;
  top: 135px;
  padding-left: 350px;
}
.y-number-3 .y-number-bg {
  -webkit-animation-delay: 3s;
     -moz-animation-delay: 3s;
       -o-animation-delay: 3s;
          animation-delay: 3s;
  background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/info-left-bg-03.png) no-repeat 50% 50%;
}
.y-number-3 .y-number-icon {
  background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/info-left-icon-03.png) no-repeat 50% 50%;
}
.y-number-4 {
  -webkit-animation-delay: 1.75s;
     -moz-animation-delay: 1.75s;
       -o-animation-delay: 1.75s;
          animation-delay: 1.75s;
  background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/info-left-line-01.png) no-repeat 180px center;
  height: 60px;
  top: 190px;
}
.y-number-4 .y-number-bg {
  -webkit-animation-delay: 3.5s;
     -moz-animation-delay: 3.5s;
       -o-animation-delay: 3.5s;
          animation-delay: 3.5s;
  background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/info-left-bg-04.png) no-repeat 50% 50%;
}
.y-number-4 .y-number-icon {
  background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/info-left-icon-04.png) no-repeat 50% 50%;
}
.y-number .y-number-bg {
  width: 54px;
  height: 54px;
  position: absolute;
  top: 5px;
  -webkit-animation-duration: 5s;
     -moz-animation-duration: 5s;
       -o-animation-duration: 5s;
          animation-duration: 5s;
}
.y-number .y-number-icon {
  width: 54px;
  height: 54px;
  position: absolute;
  top: 5px;
}
.y-number .y-number-text {
  display: inline-block;
  color: #0072bc;
  font-size: 18px;
  padding: 10px 0 0 60px;
}
.y-number .y-number-text > span {
  display:block;
}
.y-number .y-number-text > span:nth-child(2) {
  font-size: 22px;
  color: #00aeef;
  line-height: 28px;
  padding: 0;
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-moz-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-50%, 0, 0);
    -moz-transform: translate3d(-50%, 0, 0);
         transform: translate3d(-50%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
  }
}
@-o-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-50%, 0, 0);
    -moz-transform: translate3d(-50%, 0, 0);
         transform: translate3d(-50%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
  }
}
.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
       animation-name: fadeInLeft;
}
.odometer.odometer-theme-digital{
    background: transparent!important;
}
@charset "utf-8";
/* CSS Document */
@charset "utf-8";
/* CSS Document */
#nh_radar{
    width:100%;
    height:100%;
}
@charset "utf-8";
/* CSS Document */
.piechartdom{
    width:100%;
    height:100%;
}
.svg_dom{
    width:100%;
    height:100%;
    position:absolute;
    top: 0;
}
.cir_arrow{
    width: 17px;
    height: 17px;
    offset-distance: 0%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
.cir_arrow1{
        background: url("vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZHSF/icon_circle1.png") no-repeat 50% 50%;
        -webkit-animation: cir_arrow1 5s linear infinite;
    	animation: cir_arrow1 5s linear infinite;
    	offset-path: path("m117,210c0,-51.65746 41.61878,-93.5 93,-93.5c51.38122,0 93,41.84254 93,93.5c0,51.65746 -41.61878,93.5 -93,93.5c-51.38122,0 -93,-41.84254 -93,-93.5z");
}
.cir_arrow2{
        background: url("vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZHSF/icon_circle2.png") no-repeat 50% 50%;
        -webkit-animation: cir_arrow2 5s linear infinite;
   	 	animation: cir_arrow2 5s linear infinite;
    	offset-path: path("m134,210c0,-41.71271 34.01105,-75.5 76,-75.5c41.98895,0 76,33.78729 76,75.5c0,41.71271 -34.01105,75.5 -76,75.5c-41.98895,0 -76,-33.78729 -76,-75.5z");
}
@keyframes cir_arrow1{
    0%{
            offset-distance: 0%;
    opacity: 1;
    }
    100%{
            offset-distance: 100%;
    opacity: 1;
    }
}
@keyframes cir_arrow2{
    0%{
            offset-distance: 100%;
    opacity: 1;
    }
    100%{
            offset-distance: 0%;
    opacity: 1;
    }
}
@charset "utf-8";
/* CSS Document */
@charset "utf-8";
/* CSS Document */
@charset "utf-8";
/* CSS Document */
.chart{
    width:100%;
    height:100%;
}
.pie{
    position:absolute;
    top: 0;
    width: 100%;
    height: 100%;
}
.pies{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: center center;
}
.pie1{
    background-image: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/triangle/whcircle.png);
    animation: mymove 20s linear infinite;
    -webkit-animation:mymove 20s linear infinite;
}
.pie2{
    background-image: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/triangle/circle2.png);
    animation: moveto 20s linear infinite;
    -webkit-animation:moveto 20s linear infinite;
}
.pie3{
    background-image: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/triangle/inner.png);
}
.pie4{
    position:absolute;
    top: 49%;
    left: 36%;
    width: 76px;
    height: 1px;
      background: linear-gradient(to right,rgb(31,38,103),rgb(90,250,253),rgb(31,38,103));
}
@-webkit-keyframes mymove{
    0%{
            -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    }
    100%{
        -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    }
}
@keyframes mymove{
    0%{
      -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    }
    100%{
        -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    }
}
@-webkit-keyframes moveto{
    0%{
            -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    }
    100%{
        -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    }
}
@keyframes moveto{
    0%{
            -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    }
    100%{
        -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
    }
}
@charset "utf-8";
/* CSS Document */
.rollLine_main{
    width:100%;
    height:100%;
}
@charset "utf-8";
/* CSS Document */

.pd-main{
      position: absolute;
      height:100%;
      width:100%;
}
.pd-main [class^=chart] {
  position: absolute;
  -webkit-transform-origin: left top;
     -moz-transform-origin: left top;
      -ms-transform-origin: left top;
       -o-transform-origin: left top;
          transform-origin: left top;
}
.pd-main .chart4 {
  width: 500px;
  height: 410px;
    top:55%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
       -moz-transform:translate(-50%,-50%);
        -ms-transform:translate(-50%,-50%);
         -o-transform:translate(-50%,-50%);
            transform:translate(-50%,-50%);
}

.compass {
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0.9);
     -moz-transform: scale(0.9);
      -ms-transform: scale(0.9);
       -o-transform: scale(0.9);
          transform: scale(0.9);
}
.compass .compass-bg-1, .compass .compass-bg-2, .compass .compass-bg-3, .compass .compass-bg-4, .compass .compass-bg-5, .compass .compass-bg-6, .compass .compass-bg-7 {
  position: absolute;
  bottom: 0px;
  left: 50%;
  -webkit-transform: rotateX(-80deg) rotateZ(45deg) rotateY(0deg);
     -moz-transform: rotateX(-80deg) rotateZ(45deg) rotateY(0deg);
          transform: rotateX(-80deg) rotateZ(45deg) rotateY(0deg);
}
.compass [class^=compass-bg-] {
  position: absolute;
  bottom: 0px;
}
.compass .compass-bg-1 {
  margin-left: -250px;
  bottom: -200px;
  width: 500px;
  height: 500px;
  background: -webkit-repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
  background: -moz-repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
  background: -o-repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
  background: repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
  display: none;
}
.compass .compass-bg-2 {
  margin-left: -220px;
  bottom: -170px;
  width: 440px;
  height: 440px;
  background: -webkit-repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
  background: -moz-repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
  background: -o-repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
  background: repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
  display: none;
}
.compass .compass-bg-3 {
  margin-left: -190px;
  bottom: -140px;
  width: 380px;
  height: 380px;
  background: -webkit-repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
  background: -moz-repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
  background: -o-repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
  background: repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
}
.compass .compass-bg-4 {
  margin-left: -160px;
  bottom: -110px;
  width: 320px;
  height: 320px;
  background: -webkit-repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
  background: -moz-repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
  background: -o-repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
  background: repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
}
.compass .compass-bg-5 {
  margin-left: -130px;
  bottom: -80px;
  width: 260px;
  height: 260px;
  -webkit-box-shadow: inset 0 0 10px 10px rgba(44, 183, 190, 0.8);
     -moz-box-shadow: inset 0 0 10px 10px rgba(44, 183, 190, 0.8);
          box-shadow: inset 0 0 10px 10px rgba(44, 183, 190, 0.8);
}
.compass .compass-bg-6 {
  margin-left: -100px;
  bottom: -50px;
  width: 200px;
  height: 200px;
  background: -webkit-repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
  background: -moz-repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
  background: -o-repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
  background: repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
  display: none;
}
.compass .compass-bg-7 {
  margin-left: -70px;
  bottom: -20px;
  width: 140px;
  height: 140px;
  background: -webkit-repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
  background: -moz-repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
  background: -o-repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
  background: repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
 -webkit-animation: bgshadow 3s linear infinite;     
 -moz-animation: bgshadow 3s linear infinite;
  -o-animation: bgshadow 3s linear infinite;
    animation: bgshadow 3s linear infinite;
}
@-webkit-keyframes bgshadow {
  0%,100% {
    -webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
  50% {
    -webkit-box-shadow: 0 0 30em white;
            box-shadow: 0 0 30em white;
  }
}
@-moz-keyframes bgshadow {
  0%,100% {
    -moz-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
         box-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
  50% {
    -moz-box-shadow: 0 0 30em white;
         box-shadow: 0 0 30em white;
  }
}
@-o-keyframes bgshadow {
  0%,100% {
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
  50% {
    box-shadow: 0 0 30em white;
  }
}
@keyframes bgshadow {
  0%,100% {
    -webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
       -moz-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
  50% {
    -webkit-box-shadow: 0 0 30em white;
       -moz-box-shadow: 0 0 30em white;
            box-shadow: 0 0 30em white;
  }
}
.compass .compass-bg-c-1 {
  width: 100%;
  height: 100%;
  background: url(../vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/compass-bg-1.png) no-repeat 50% 345px;
}
.compass .compass-bg-c-2 {
  width: 100%;
  height: 100%;
  background: url(../vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/compass-bg-2.png) no-repeat 65% 146px;
  opacity: 0.8;
  -webkit-animation: fadebg 3s linear infinite;
  -moz-animation: fadebg 3s linear infinite;
  -o-animation: fadebg 3s linear infinite;
     animation: fadebg 3s linear infinite;
}
.compass .compass-bg-c-3 {
  width: 100%;
  height: 100%;
  background: url(../vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/compass-bg-3.png) no-repeat 50% 227px;
}
.compass .compass-bg-c-4 {
  width: 100%;
  height: 100%;
  background: url(../vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/compass-bg-4.png) no-repeat 50% 63px;
  -webkit-animation: numberfade 5s linear infinite;
  -moz-animation: numberfade 5s linear infinite;
  -o-animation: numberfade 5s linear infinite;
     animation: numberfade 5s linear infinite;

}
.compass .compass-title {
  position: absolute;
  font-size: 20px;
  font-weight: bold;
  width: 100%;
  bottom: 98px;
  text-align: center;
  color: #fff;
}
.compass .compass-text {
  position: absolute;
  overflow: hidden;
  left: 50%;
  margin-left: -60px;
  font-size: 12px;
  background-color: rgba(0, 71, 157, 0.4);
  padding: 5px 10px;
  color: #00c2ff;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  line-height: 1.5;
  -webkit-transform: scale(0.8);
     -moz-transform: scale(0.8);
      -ms-transform: scale(0.8);
       -o-transform: scale(0.8);
          transform: scale(0.8);
  display: none;
}
@-webkit-keyframes wzgun {
  0% {
    bottom: -50px;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    bottom: 350px;
    opacity: 0;
  }
}
@-moz-keyframes wzgun {
  0% {
    bottom: -50px;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    bottom: 350px;
    opacity: 0;
  }
}
@-o-keyframes wzgun {
  0% {
    bottom: -50px;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    bottom: 350px;
    opacity: 0;
  }
}
@keyframes wzgun {
  0% {
    bottom: -50px;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    bottom: 350px;
    opacity: 0;
  }
}
.compass .compass-text span {
  display: block;
}
.compass .compass-text span:nth-child(1) {
  margin-top: 0px;
}
.compass .compass-text span:nth-child(2) {
  margin-top: 0px;
}
.compass .compass-text span:nth-child(3) {
  margin-top: 0px;
}
.compass .compass-text-1 {
  top: -70px;
  left: 48px;
}
.compass .compass-text-2 {
  top: -30px;
  left: 152px;
}
.compass .compass-text-3 {
  top: 0px;
  left: 250px;
}
.compass .compass-text-4 {
  top: 64px;
  left: 350px;
}
.compass .compass-text-5 {
  top: 93px;
  left: 450px;
}
.compass .compass-text-6 {
  color: #d57a31;
  bottom: -950px;
  -webkit-animation-delay: 25s;
     -moz-animation-delay: 25s;
       -o-animation-delay: 25s;
          animation-delay: 25s;
}
.compass .compass-text-7 {
  color: #d57a31;
  bottom: -1150px;
  -webkit-animation-delay: 30s;
     -moz-animation-delay: 30s;
       -o-animation-delay: 30s;
          animation-delay: 30s;
}
.compass .compass-number {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  bottom: 50px;
}
.compass .compass-number > div {
  position: absolute;
  bottom: 0;
  width: 55px;
  height: 0;
  -webkit-animation: sz 1s linear;
  -moz-animation: sz 1s linear;
  -o-animation: sz 1s linear;
     animation: sz 1s linear;
  -webkit-animation-fill-mode: forwards;
     -moz-animation-fill-mode: forwards;
       -o-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-transition: 1s;
  -o-transition: 1s;
  -moz-transition: 1s;
  transition: 1s;
}
@-webkit-keyframes sz {
  0% {
    height: 0;
  }
  100% {
    height: 70%;
  }
}
@-moz-keyframes sz {
  0% {
    height: 0;
  }
  100% {
    height: 70%;
  }
}
@-o-keyframes sz {
  0% {
    height: 0;
  }
  100% {
    height: 70%;
  }
}
@keyframes sz {
  0% {
    height: 0;
  }
  100% {
    height: 70%;
  }
}
.compass .compass-number > div:after {
  content: "NO." attr(title);
  position: absolute;
  display: inline-block;
  top: -20px;
  width: 100%;
  font-family: "DIGITALDREAMFAT";
  text-align: center;
}
.compass .compass-number > div:before {
  content: "";
  position: absolute;
  height: 100%;
  border-left: 1px dashed currentColor;
  height: 500px;
  top: 55px;
  left: 50%;
  margin-left: -1px;
}
.compass .compass-number > div > span {
  display: block;
  width: 55px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  padding-bottom: 55px;
  -webkit-box-shadow: inset 0 0 15px currentColor;
     -moz-box-shadow: inset 0 0 15px currentColor;
          box-shadow: inset 0 0 15px currentColor;
  -webkit-border-radius: 100%;
     -moz-border-radius: 100%;
          border-radius: 100%;
}
.compass .compass-number > .szscale {
  -webkit-transform: scale(1.2);
     -moz-transform: scale(1.2);
      -ms-transform: scale(1.2);
       -o-transform: scale(1.2);
          transform: scale(1.2);
  -webkit-transform-origin: center bottom;
     -moz-transform-origin: center bottom;
      -ms-transform-origin: center bottom;
       -o-transform-origin: center bottom;
          transform-origin: center bottom;
}
.compass .compass-number > div:nth-child(1) {
  left: 5%;
  color: #ff9232;
  -webkit-animation-delay: 0s;
     -moz-animation-delay: 0s;
       -o-animation-delay: 0s;
          animation-delay: 0s;
}
.compass .compass-number > div:nth-child(1):after {
  -webkit-animation-delay: 0s;
     -moz-animation-delay: 0s;
       -o-animation-delay: 0s;
          animation-delay: 0s;
}
.compass .compass-number > div:nth-child(2) {
  left: 25%;
  color: #d5c245;
  -webkit-animation-delay: 0.2s;
     -moz-animation-delay: 0.2s;
       -o-animation-delay: 0.2s;
          animation-delay: 0.2s;
  bottom: -10%;
}
.compass .compass-number > div:nth-child(2):after {
  -webkit-animation-delay: 2.85s;
     -moz-animation-delay: 2.85s;
       -o-animation-delay: 2.85s;
          animation-delay: 2.85s;
}
.compass .compass-number > div:nth-child(3) {
  left: 45%;
  color: #01a455;
  -webkit-animation-delay: 0.4s;
     -moz-animation-delay: 0.4s;
       -o-animation-delay: 0.4s;
          animation-delay: 0.4s;
  bottom: -20%;
}
.compass .compass-number > div:nth-child(3):after {
  -webkit-animation-delay: 5.7s;
     -moz-animation-delay: 5.7s;
       -o-animation-delay: 5.7s;
          animation-delay: 5.7s;
}
.compass .compass-number > div:nth-child(4) {
  left: 65%;
  color: #275fcc;
  -webkit-animation-delay: 0.6s;
     -moz-animation-delay: 0.6s;
       -o-animation-delay: 0.6s;
          animation-delay: 0.6s;
  bottom: -30%;
}
.compass .compass-number > div:nth-child(4):after {
  -webkit-animation-delay: 8.55s;
     -moz-animation-delay: 8.55s;
       -o-animation-delay: 8.55s;
          animation-delay: 8.55s;
}
.compass .compass-number > div:nth-child(5) {
  left: 85%;
  color: #275fcc;
  -webkit-animation-delay: 0.8s;
     -moz-animation-delay: 0.8s;
       -o-animation-delay: 0.8s;
          animation-delay: 0.8s;
  bottom: -40%;
}
.compass .compass-number > div:nth-child(5):after {
  -webkit-animation-delay: 11.4s;
     -moz-animation-delay: 11.4s;
       -o-animation-delay: 11.4s;
          animation-delay: 11.4s;
}
.compass .compass-number > div:nth-child(6) {
  left: 75%;
  color: #f674a0;
  -webkit-animation-delay: 1s;
     -moz-animation-delay: 1s;
       -o-animation-delay: 1s;
          animation-delay: 1s;
  bottom: -50%;
}
.compass .compass-number > div:nth-child(6):after {
  -webkit-animation-delay: 14.25s;
     -moz-animation-delay: 14.25s;
       -o-animation-delay: 14.25s;
          animation-delay: 14.25s;
}
.compass .compass-number > div:nth-child(7) {
  left: 87.5%;
  color: #275fcc;
  -webkit-animation-delay: 1.2s;
     -moz-animation-delay: 1.2s;
       -o-animation-delay: 1.2s;
          animation-delay: 1.2s;
  bottom: -60%;
}
.compass .compass-number > div:nth-child(7):after {
  -webkit-animation-delay: 17.1s;
     -moz-animation-delay: 17.1s;
       -o-animation-delay: 17.1s;
          animation-delay: 17.1s;
}

.line-sx .line-fs {
  width: 14px;
  height: 100%;
  background-image: url(../vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/line-fs.png);
  background-repeat: no-repeat;
  background-position: 50% 150%;
  position: absolute;
  z-index: -1;
  -webkit-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
  -moz-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
  -o-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
     animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
}
.line-sx > div:nth-child(2) {
  height: 90%;
  -webkit-animation-duration: 2s;
     -moz-animation-duration: 2s;
       -o-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-delay: 1.5s;
     -moz-animation-delay: 1.5s;
       -o-animation-delay: 1.5s;
          animation-delay: 1.5s;
  bottom: 0;
  left: 51px;
}
.line-sx > div:nth-child(3) {
  height: 100%;
  -webkit-animation-duration: 3s;
     -moz-animation-duration: 3s;
       -o-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-delay: 0s;
     -moz-animation-delay: 0s;
       -o-animation-delay: 0s;
          animation-delay: 0s;
  bottom: 32px;
  left: 89px;
}
.line-sx > div:nth-child(4) {
  height: 100%;
  -webkit-animation-duration: 2.5s;
     -moz-animation-duration: 2.5s;
       -o-animation-duration: 2.5s;
          animation-duration: 2.5s;
  -webkit-animation-delay: 1s;
     -moz-animation-delay: 1s;
       -o-animation-delay: 1s;
          animation-delay: 1s;
  bottom: 3px;
  left: 179px;
  -webkit-filter: hue-rotate(180deg);
          filter: hue-rotate(180deg);
}
.line-sx > div:nth-child(5) {
  height: 90%;
  -webkit-animation-duration: 2s;
     -moz-animation-duration: 2s;
       -o-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-delay: 2s;
     -moz-animation-delay: 2s;
       -o-animation-delay: 2s;
          animation-delay: 2s;
  bottom: 42px;
  left: 229px;
}
.line-sx > div:nth-child(6) {
  height: 100%;
  -webkit-animation-duration: 2.5s;
     -moz-animation-duration: 2.5s;
       -o-animation-duration: 2.5s;
          animation-duration: 2.5s;
  -webkit-animation-delay: 0.5s;
     -moz-animation-delay: 0.5s;
       -o-animation-delay: 0.5s;
          animation-delay: 0.5s;
  bottom: 11px;
  right: 48px;
}
.line-sx > div:nth-child(7) {
  height: 90%;
  -webkit-animation-duration: 3s;
     -moz-animation-duration: 3s;
       -o-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-delay: 2.5s;
     -moz-animation-delay: 2.5s;
       -o-animation-delay: 2.5s;
          animation-delay: 2.5s;
  bottom: -22px;
  right: 174px;
  -webkit-filter: hue-rotate(180deg);
          filter: hue-rotate(180deg);
}
.line-sx > div:nth-child(8) {
  height: 90%;
  -webkit-animation-duration: 3s;
     -moz-animation-duration: 3s;
       -o-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-delay: 1.5s;
     -moz-animation-delay: 1.5s;
       -o-animation-delay: 1.5s;
          animation-delay: 1.5s;
  bottom: -22px;
  right: 100px;
}
.line-sx > div:nth-child(9) {
  height: 100%;
  -webkit-animation-duration: 2.5s;
     -moz-animation-duration: 2.5s;
       -o-animation-duration: 2.5s;
          animation-duration: 2.5s;
  -webkit-animation-delay: 2s;
     -moz-animation-delay: 2s;
       -o-animation-delay: 2s;
          animation-delay: 2s;
  bottom: -10px;
  right: 220px;
}
.line-sx > div:nth-child(10) {
  height: 95%;
  -webkit-animation-duration: 2s;
     -moz-animation-duration: 2s;
       -o-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-delay: 1s;
     -moz-animation-delay: 1s;
       -o-animation-delay: 1s;
          animation-delay: 1s;
  bottom: -41px;
  right: 182px;
}

@-webkit-keyframes fs {
  0% {
    background-position: 50% 150%;
  }
  50% {
    background-position: 50% -132%;
  }
  100% {
    background-position: 50% -264%;
    opacity: 0;
  }
}

@-moz-keyframes fs {
  0% {
    background-position: 50% 150%;
  }
  50% {
    background-position: 50% -132%;
  }
  100% {
    background-position: 50% -264%;
    opacity: 0;
  }
}

@-o-keyframes fs {
  0% {
    background-position: 50% 150%;
  }
  50% {
    background-position: 50% -132%;
  }
  100% {
    background-position: 50% -264%;
    opacity: 0;
  }
}

@keyframes fs {
  0% {
    background-position: 50% 150%;
  }
  50% {
    background-position: 50% -132%;
  }
  100% {
    background-position: 50% -264%;
    opacity: 0;
  }
}

.show {
  display: block !important;
}

@charset "utf-8";
/* CSS Document */
.person{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}
.pers{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: center center;
    
}
.person1{
    background-image: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/triangle/online.png);
    transform: rotateX(64deg) rotateZ(0deg);
    top: 16%;
}
.person2{
        background-image: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/triangle/cir-2.png);
    animation: mmove 10s linear infinite;
    -webkit-animation: mmove 10s linear infinite;
    transform: rotateX(64deg);
    top: 16%;
}
.person3{
        background-image: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/triangle/person-1.png);
        top: 5%;
}
@-webkit-keyframes mmove{
    0%{
                transform: rotateX(-64deg) rotateZ(360deg);
    }
    100%{
            transform: rotateX(-64deg) rotateZ(0deg);
    }
}
@keyframes mmove{
    0%{
      transform: rotateX(-64deg) rotateZ(360deg);
    }
    100%{
        transform: rotateX(-64deg) rotateZ(0deg);
    }
}
.svgs{
    width:270px;
    height:260px;
    margin: auto;
    top: 0;
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
}
.text{
    position: absolute;
    width:50px;
    height:50px;
    background-image: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/triangle/cir-1.png);
    background-repeat: no-repeat;
    background-position: center center;
    color: rgb(114,198,230);
        text-align: center;
}
.per1{
    top: 215px;
    left: 50px;
}
.per2{
        top: 113px;
    left: 3px;
}
.per3{
        top: 45px;
    left: 35px;
}
.per4{
        left: 120px;
}
.per5{
        top: 45px;
    left: 190px;
}
.per6{
        top: 105px;
    left: 210px;
}
.per7{
        top: 215px;
    left: 180px;
}
.text span:nth-child(1){
    display:block;
    width: 52px;
    margin-top: 10px;
    line-height: 12px;
    transform: scale(0.85);
    height: 22px;
}
.text span:nth-child(2){
font-size: 14px;
    font-weight: bold;
}
@charset "utf-8";
/* CSS Document */
.chartdom{
    width:100%;
    height:100%;
}
.icon_img{
    width:100%;
     height:100%;
    background:url("vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZHSF/icon_nq.png") no-repeat center;
    position: absolute;
    left: 0;
    top: 0;
    animation: move1 5s linear infinite;
    -webkit-animation: move1 5s linear infinite;
}
.icon_img1{
    width:100%;
     height:100%;
    background:url("vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZHSF/icon_wq.png") no-repeat center;
    position: absolute;
    left: 0;
    top: 0;
    animation: move2 15s linear infinite;
    -webkit-animation: move2 15s linear infinite;
}
.icon_img2{
    width:100%;
     height:100%;
    background:url("vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZHSF/icon_zjq.png") no-repeat center;
    position: absolute;
    left: 0;
    top: 0;
    animation: move3 15s linear infinite;
    -webkit-animation: move3 15s linear infinite;
}
@keyframes move2{
    0%{
            transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
@keyframes move3{
    0%{
            transform: rotate(360deg);
    }
    100%{
        transform: rotate(0deg);
    }
}

@charset "utf-8";
/* CSS Document */
.cirdom{
    width:100%;
    height:100%;
}
.back_chart{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    background:url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZHSF/back_chart.png) no-repeat center;
}
.arrow_cir{
    width: 8px;
    height: 8px;
    offset-distance: 0%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
.arrow_cir1{
        background: url("vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZHSF/icon_04.png") no-repeat 50% 50%;
        -webkit-animation: arrow_cir1 5s linear infinite;
    	animation: arrow_cir1 5s linear infinite;
    	offset-path: path("m3,75c0,-39.77901 32.22099,-72 72,-72c39.77901,0 72,32.22099 72,72c0,39.77901 -32.22099,72 -72,72c-39.77901,0 -72,-32.22099 -72,-72z");
}
.arrow_cir2{
        background: url("vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZHSF/icon_05.png") no-repeat 50% 50%;
        -webkit-animation: arrow_cir2 5s linear infinite;
    	animation: arrow_cir2 5s linear infinite;
    	offset-path: path("m3,75c0,-39.77901 32.22099,-72 72,-72c39.77901,0 72,32.22099 72,72c0,39.77901 -32.22099,72 -72,72c-39.77901,0 -72,-32.22099 -72,-72z");
}
@keyframes arrow_cir1{
    0%{
            offset-distance: 40%;
    opacity: 1;
    }
    100%{
            offset-distance: 140%;
    opacity: 1;
    }
}
@keyframes arrow_cir2{
    0%{
            offset-distance: 0%;
    opacity: 1;
    }
    100%{
            offset-distance: 100%;
    opacity: 1;
    }
}
@charset "utf-8";
/* CSS Document */
@charset "utf-8";
/* CSS Document */
.pd-main-left {
  position: relative;
  width: 310px;
  height: 335px;
}
.pd-main-left .yun-container {
  width: 100%;
  height: 100%;
  background: url(../vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/pd-main-left-bg-2.png) no-repeat 50% 50%;
}
.pd-main-left .yun-container .yun-tree {
  width: 100%;
  height: 100%;
  background: url(../vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/pd-main-left-bg-tree.png) no-repeat 50% bottom;
  mix-blend-mode: screen;
}
.pd-main-left .yun-container .line-fs {
  width: 14px;
  height: 100%;
  background-image: url(../vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/line-fs.png);
  background-repeat: no-repeat;
  background-position: 50% 150%;
  position: absolute;
  z-index: -1;
  -webkit-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
     -moz-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
       -o-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
          animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
}
@-webkit-keyframes fs {
  0% {
    background-position: 50% 150%;
  }
  50% {
    background-position: 50% -132%;
  }
  100% {
    background-position: 50% -264%;
    opacity: 0;
  }
}
@-moz-keyframes fs {
  0% {
    background-position: 50% 150%;
  }
  50% {
    background-position: 50% -132%;
  }
  100% {
    background-position: 50% -264%;
    opacity: 0;
  }
}
@-o-keyframes fs {
  0% {
    background-position: 50% 150%;
  }
  50% {
    background-position: 50% -132%;
  }
  100% {
    background-position: 50% -264%;
    opacity: 0;
  }
}
@keyframes fs {
  0% {
    background-position: 50% 150%;
  }
  50% {
    background-position: 50% -132%;
  }
  100% {
    background-position: 50% -264%;
    opacity: 0;
  }
}
.pd-main-left .yun-container > div:nth-child(2) {
  height: 90%;
  -webkit-animation-duration: 2s;
     -moz-animation-duration: 2s;
       -o-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-delay: 1.5s;
     -moz-animation-delay: 1.5s;
       -o-animation-delay: 1.5s;
          animation-delay: 1.5s;
  bottom: 0;
  left: 51px;
}
.pd-main-left .yun-container > div:nth-child(3) {
  height: 100%;
  -webkit-animation-duration: 3s;
     -moz-animation-duration: 3s;
       -o-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-delay: 0s;
     -moz-animation-delay: 0s;
       -o-animation-delay: 0s;
          animation-delay: 0s;
  bottom: 32px;
  left: 89px;
}
.pd-main-left .yun-container > div:nth-child(4) {
  height: 100%;
  -webkit-animation-duration: 2.5s;
     -moz-animation-duration: 2.5s;
       -o-animation-duration: 2.5s;
          animation-duration: 2.5s;
  -webkit-animation-delay: 1s;
     -moz-animation-delay: 1s;
       -o-animation-delay: 1s;
          animation-delay: 1s;
  bottom: 3px;
  left: 179px;
  -webkit-filter: hue-rotate(180deg);
          filter: hue-rotate(180deg);
}
.pd-main-left .yun-container > div:nth-child(5) {
  height: 90%;
  -webkit-animation-duration: 2s;
     -moz-animation-duration: 2s;
       -o-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-delay: 2s;
     -moz-animation-delay: 2s;
       -o-animation-delay: 2s;
          animation-delay: 2s;
  bottom: 42px;
  left: 229px;
}
.pd-main-left .yun-container > div:nth-child(6) {
  height: 100%;
  -webkit-animation-duration: 2.5s;
     -moz-animation-duration: 2.5s;
       -o-animation-duration: 2.5s;
          animation-duration: 2.5s;
  -webkit-animation-delay: 0.5s;
     -moz-animation-delay: 0.5s;
       -o-animation-delay: 0.5s;
          animation-delay: 0.5s;
  bottom: 11px;
  right: 48px;
}
.pd-main-left .yun-container > div:nth-child(7) {
  height: 90%;
  -webkit-animation-duration: 3s;
     -moz-animation-duration: 3s;
       -o-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-delay: 2.5s;
     -moz-animation-delay: 2.5s;
       -o-animation-delay: 2.5s;
          animation-delay: 2.5s;
  bottom: -22px;
  right: 174px;
  -webkit-filter: hue-rotate(180deg);
          filter: hue-rotate(180deg);
}
.pd-main-left .yun-container > div:nth-child(8) {
  height: 90%;
  -webkit-animation-duration: 3s;
     -moz-animation-duration: 3s;
       -o-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-delay: 1.5s;
     -moz-animation-delay: 1.5s;
       -o-animation-delay: 1.5s;
          animation-delay: 1.5s;
  bottom: -22px;
  right: 100px;
}
.pd-main-left .yun-container > div:nth-child(9) {
  height: 100%;
  -webkit-animation-duration: 2.5s;
     -moz-animation-duration: 2.5s;
       -o-animation-duration: 2.5s;
          animation-duration: 2.5s;
  -webkit-animation-delay: 2s;
     -moz-animation-delay: 2s;
       -o-animation-delay: 2s;
          animation-delay: 2s;
  bottom: -10px;
  right: 220px;
}
.pd-main-left .yun-container > div:nth-child(10) {
  height: 95%;
  -webkit-animation-duration: 2s;
     -moz-animation-duration: 2s;
       -o-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-delay: 1s;
     -moz-animation-delay: 1s;
       -o-animation-delay: 1s;
          animation-delay: 1s;
  bottom: -41px;
  right: 182px;
}
.pd-main-left .yun-text {
  position: absolute;
  width: 318px;
  height: 195px;
  top: 0;
  left: 50%;
  margin-left: -161px;
  z-index: 2;
}
.pd-main-left .yun-text div {
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  width: 70px;
  height: 36px;
  line-height: 36px;
  word-wrap: break-word;
  word-break: break-all;
  opacity: 0.5;
  color: #00f6ff;
}
 .pd-main-left .yun-text div:nth-child(1) {
  top: 84px;
  left: 26px;
}
.pd-main-left .yun-text div:nth-child(2) {
  top: 13px;
  left: 157px;
}
.pd-main-left .yun-text div:nth-child(3) {
  top: 105px;
  left: 35px;
}
.pd-main-left .yun-text div:nth-child(4) {
  top: 38px;
  left: 89px;
}
.pd-main-left .yun-text div:nth-child(5) {
  top: 43px;
  left: 178px;
}
.pd-main-left .yun-text div:nth-child(6) {
  top: 76px;
  left: 227px;
}
 .pd-main-left .yun-text div:nth-child(7) {
  top: 63px;
  left: 66px;
}
.pd-main-left .yun-text div:nth-child(8) {
  top: 156px;
  left: 43px;
}
.pd-main-left .yun-text div:nth-child(9) {
  top: 130px;
  left: 16px;
}
.pd-main-left .yun-text div:nth-child(10) {
  top: 93px;
  left: 128px;
}
.pd-main-left .yun-text div:nth-child(11) {
  top: 106px;
  left: 241px;
}
.pd-main-left .yun-text div:nth-child(12) {
  top: 121px;
  left: 112px;
}
.pd-main-left .yun-text div:nth-child(13) {
  top: 67px;
  left: 153px;
}
.pd-main-left .yun-text div:nth-child(14) {
  top: 157px;
  left: 207px;
}
.pd-main-left .yun-text div:nth-child(15) {
  top: 132px;
  left: 206px;
}
.pd-main-left .yun-text div:nth-child(16) {
  top: 150px;
  left: 117px;
}
.pd-main-left .yun-text div span {
  font-size: 12px;
  cursor: pointer;
}
.pd-main-left .yun-text .span-flash {
  color: #00f6ff;
  font-size: 14px;
  -webkit-animation-name: yun-flash;
     -moz-animation-name: yun-flash;
       -o-animation-name: yun-flash;
          animation-name: yun-flash;
  -webkit-animation-duration: 1s;
     -moz-animation-duration: 1s;
       -o-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
     -moz-animation-iteration-count: 1;
       -o-animation-iteration-count: 1;
          animation-iteration-count: 1;
}
@-webkit-keyframes yun-flash {
  from,50%,
  to {
    opacity: 1;
  }
  25%,75% {
    opacity: 0;
  }
}
@-moz-keyframes yun-flash {
  from,50%,
  to {
    opacity: 1;
  }
  25%,75% {
    opacity: 0;
  }
}
@-o-keyframes yun-flash {
  from,50%,
  to {
    opacity: 1;
  }
  25%,75% {
    opacity: 0;
  }
}
@keyframes yun-flash {
  from,50%,
  to {
    opacity: 1;
  }
  25%,75% {
    opacity: 0;
  }
}
.bubble-8 {
  color: #2da4c0;
  -webkit-box-shadow: inset 0 0 20px #28358b, 0 0 5px #28358b, 0 0 10px #28358b;
     -moz-box-shadow: inset 0 0 20px #28358b, 0 0 5px #28358b, 0 0 10px #28358b;
          box-shadow: inset 0 0 20px #28358b, 0 0 5px #28358b, 0 0 10px #28358b;
}
@charset "utf-8";
/* CSS Document */
.bar-tooltip-hd{
    color:#cd9d5b;
}
.bar-tooltip {
    padding: 10px 13px;
    border: 1px dotted #cab06f;
    box-shadow: inset 0px 0px 6px 2px rgba(103, 59, 23, 0.3);
}
.bar-hide{
    display:none;
}
.bar_charts{
    width:100%;
    height:100%;
}
.bar_img{
    width:100%;
    height:100%;
    position:absolute;
    bottom:0;
   background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/fmjr/bk_circle.png) no-repeat center 97%;
    background-size: 100%;
    filter: hue-rotate(180deg);
}
.bar_img1{
    width:100%;
    height:100%;
    position:absolute;
    bottom:30%;
   background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/fmjr/bk_circle1.png) no-repeat center 97%;
    background-size: 75%;
    filter: hue-rotate(180deg);
}
.bar_img2{
    width:100%;
    height:100%;
    position:absolute;
    bottom:60%;
   background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/fmjr/bk_circle2.png) no-repeat center 97%;
    background-size: 50%;
    filter: hue-rotate(180deg);
}
@charset "utf-8";
/* CSS Document */
#bar_area{
    width:100%;
    height:100%;
}
@charset "utf-8";
/* CSS Document */
.nodetext{
    position: absolute;
    left: 50%;
    top: 51%;
    margin-left: -9px;
    -webkit-transform: translate(0%,-60%);
       -moz-transform: translate(0%,-60%);
        -ms-transform: translate(0%,-60%);
         -o-transform: translate(0%,-60%);
            transform: translate(0%,-60%);
    color:rgb(22,103,206);
    font-size:12px;
}
.text0{
    border-right: 2px rgba(29,122,248,0.54) solid;
    border-bottom: 2px rgba(29,122,248,0.54) solid;
    width: 70px;
    height: 50px;
    margin-left: -110px;
    margin-top: 25px;
}
.text1{
    border-right: 2px rgba(29,122,248,0.54) solid;
    border-bottom: 2px rgb(134,92,255) solid;
    width: 30px;
    height: 80px;
        margin-left: -50px;
    margin-top: 44px;
        -webkit-border-image: -webkit-gradient( linear, left top, left bottom, from(rgba(29,122,248,0.54)), to(rgb(134,92,255))) 2 2;
        -webkit-border-image: -webkit-linear-gradient( rgba(29,122,248,0.54), rgb(134,92,255)) 2 2;
           -moz-border-image: -moz-linear-gradient( rgba(29,122,248,0.54), rgb(134,92,255)) 2 2;
             -o-border-image: -o-linear-gradient( rgba(29,122,248,0.54), rgb(134,92,255)) 2 2;
                border-image: -webkit-gradient( linear, left top, left bottom, from(rgba(29,122,248,0.54)), to(rgb(134,92,255))) 2 2;
                border-image: linear-gradient( rgba(29,122,248,0.54), rgb(134,92,255)) 2 2;
}
.text2{
        border-right: 2px rgba(29,122,248,0.54) solid;
    width: 30px;
    height: 93px;
       margin-top: 53px;
    margin-left: -31px;
      -webkit-border-image: -webkit-gradient( linear, left top, left bottom, from(rgb(10,106,255)), color-stop(rgba(112,107,189,0.54)),to(rgb(214,108,123))) 2 2;
      -webkit-border-image: -webkit-linear-gradient( rgb(10,106,255), rgba(112,107,189,0.54),rgb(214,108,123)) 2 2;
         -moz-border-image: -moz-linear-gradient( rgb(10,106,255), rgba(112,107,189,0.54),rgb(214,108,123)) 2 2;
           -o-border-image: -o-linear-gradient( rgb(10,106,255), rgba(112,107,189,0.54),rgb(214,108,123)) 2 2;
              border-image: -webkit-gradient( linear, left top, left bottom, from(rgb(10,106,255)), color-stop(rgba(112,107,189,0.54)),to(rgb(214,108,123))) 2 2;
              border-image: linear-gradient( rgb(10,106,255), rgba(112,107,189,0.54),rgb(214,108,123)) 2 2;
}
.text3{
    border-left: 2px rgba(29,122,248,0.54) solid;
    border-bottom: 2px rgba(29,122,248,0.54) solid;
    width: 30px;
    height: 80px;
    margin-left: 18px;
    margin-top: 44px;
    -webkit-border-image: -webkit-gradient( linear, left top, left bottom, from(rgba(29,122,248,0.54)), color-stop(rgba(136,135,162,0.5)),to(rgb(249,161,77))) 2 2;
    -webkit-border-image: -webkit-linear-gradient( rgba(29,122,248,0.54), rgba(136,135,162,0.5),rgb(249,161,77)) 2 2;
       -moz-border-image: -moz-linear-gradient( rgba(29,122,248,0.54), rgba(136,135,162,0.5),rgb(249,161,77)) 2 2;
         -o-border-image: -o-linear-gradient( rgba(29,122,248,0.54), rgba(136,135,162,0.5),rgb(249,161,77)) 2 2;
            border-image: -webkit-gradient( linear, left top, left bottom, from(rgba(29,122,248,0.54)), color-stop(rgba(136,135,162,0.5)),to(rgb(249,161,77))) 2 2;
            border-image: linear-gradient( rgba(29,122,248,0.54), rgba(136,135,162,0.5),rgb(249,161,77)) 2 2;
}
.text4{
    border-left: 2px rgba(29,122,248,0.54) solid;
    border-bottom: 2px rgba(29,122,248,0.54) solid;
    width: 70px;
    height: 50px;
    margin-left: 40px;
    margin-top: 25px;
    -webkit-border-image: -webkit-gradient( linear, left top, left bottom, from(rgba(29,122,248,0.54)), color-stop(rgba(51,181,255,0.64)),to(rgb(92,255,255))) 2 2;
    -webkit-border-image: -webkit-linear-gradient( rgba(29,122,248,0.54), rgba(51,181,255,0.64),rgb(92,255,255)) 2 2;
       -moz-border-image: -moz-linear-gradient( rgba(29,122,248,0.54), rgba(51,181,255,0.64),rgb(92,255,255)) 2 2;
         -o-border-image: -o-linear-gradient( rgba(29,122,248,0.54), rgba(51,181,255,0.64),rgb(92,255,255)) 2 2;
            border-image: -webkit-gradient( linear, left top, left bottom, from(rgba(29,122,248,0.54)), color-stop(rgba(51,181,255,0.64)),to(rgb(92,255,255))) 2 2;
            border-image: linear-gradient( rgba(29,122,248,0.54), rgba(51,181,255,0.64),rgb(92,255,255)) 2 2;
}
.text0 span{
    position: absolute;
    margin-top: 50px;
}
.text1 span{
     position: absolute;
    margin-left: -50px;
    margin-top: 83px;
}
.text2 span{
    position: absolute;
    display: block;
    width: 330px;
    margin-left: 8px;
    margin-top: 100px;
}
.text3 span{
     position: absolute;
    display: block;
    width: 330px;
    margin-left: 6px;
    margin-top: 83px;
}
.text4 span{
    position: absolute;
    display: block;
    width: 330px;
    margin-left: 10px;
    margin-top: 50px;
}
.text0:before{
        content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    margin-top: 47px;
    -webkit-border-radius: 100%;
       -moz-border-radius: 100%;
            border-radius: 100%;
    background: rgb(47,138,240);
}
.text1:before{
        content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    margin-top: 77px;
    -webkit-border-radius: 100%;
       -moz-border-radius: 100%;
            border-radius: 100%;
    background: rgb(117,94,255);
}
.text2:before{
        content: '';
    position: absolute;
    width: 5px;
    height: 5px;
  margin-top: 92px;
    margin-left: 26px;
    -webkit-border-radius: 100%;
       -moz-border-radius: 100%;
            border-radius: 100%;
    background: rgb(197,73,89);
}
.text3:before{
        content: '';
    position: absolute;
    width: 5px;
    height: 5px;
        margin-top: 77px;
    margin-left: 27px;
    -webkit-border-radius: 100%;
       -moz-border-radius: 100%;
            border-radius: 100%;
    background: rgb(230,137,50);
}
.text4:before{
        content: '';
    position: absolute;
    width: 5px;
    height: 5px;
      margin-top: 47px;
    margin-left: 63px;
    -webkit-border-radius: 100%;
       -moz-border-radius: 100%;
            border-radius: 100%;
    background:rgb(56,208,231);
}
@charset "utf-8";
/* CSS Document */
.precent{
    width:100%;
    height:100%;
}
.preinfo{
    position: absolute;
    left: 63%;
    top: 50%;
    margin-left: -2.5em;
    -webkit-transform: translate(0%,-50%);
       -moz-transform: translate(0%,-50%);
        -ms-transform: translate(0%,-50%);
         -o-transform: translate(0%,-50%);
            transform: translate(0%,-50%);
    white-space: nowrap;
    font-size:13px;
}
.preinfo span:nth-child(1) {
    margin-right: 10px;
}
.preinfos {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1px;
    height: 58px;
    background-color: rgb(99, 139, 176);
    -webkit-transform-origin: 50% 0;
       -moz-transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
         -o-transform-origin: 50% 0;
            transform-origin: 50% 0;
}
.preinfos span:nth-child(1){
    width:8px;
    height:8px;
    -webkit-border-radius:100%;
       -moz-border-radius:100%;
            border-radius:100%;
    position:absolute;
    left: -3px;
    top: 50%;
}
.preinfos span:nth-child(2){
    width: 0;
    height: 0;
    border-width: 12px 5px 5px 5px;
    border-style: solid;
    position: absolute;
    left: -5px;
    top: 100%;
}
@charset "utf-8";
/* CSS Document */
.first {
            list-style-type: none;
    left: 240px;
    top: 100px;
    width: 240px;
    height: 240px;
    position: absolute;
    transform-style: preserve-3d;
    transform: rotateX(70deg) rotateZ(45deg);
            perspective: 2000px;
            perspective-origin: 50% 100%;
         animation: trigle_down1 1s linear;
    -webkit-animation: trigle_down1 1s linear; 
        }
@keyframes trigle_down1{
    0%{
        top:-250px;
    }
    100%{
        top:80px
    }
}
        .first li {
            width: 100%;
            height: 100%;
            line-height: 200px;
            position: absolute;
            background-image: linear-gradient(#45fed4 1%,rgba(0,96,220,1));
    		opacity: 0.8;
        }
        .first li:nth-child(1) {
            transform: rotateX(0deg) translateZ(-35px) scale(0.79);
        }
        .first li:nth-child(2) {
             transform:translateZ(-100px) translateY(170px) rotateX(-70deg);
             height: 70px;
            line-height: 70px;
            transform-origin: 0 100%;
            clip-path: polygon(25px 0%,calc(100% - 25px) 0%,100% 100%,0% 100%);
         }
        .first li:nth-child(3) {
            transform: rotateX(-180deg) translateZ(100px);
        }
        .first li:nth-child(4) {
            height: 70px;
            line-height: 70px;
            transform-origin: 0 100%;
            transform: translateZ(-100px) translateY(-70px) rotateX(-110deg);
            clip-path: polygon(25px 0%,calc(100% - 25px) 0%,100% 100%,0% 100%);
        }
        .first li:nth-child(5) {
            width: 70px;
            transform-origin: 100% 100%;
            transform: translateZ(-100px) translateX(-70px) rotateY(110deg);
            clip-path: polygon(0% 25px,100% 0%,100% 100%,0% calc(100% - 25px));
        }
        .first li:nth-child(6) {
            width: 70px;
            transform-origin: 100% 100%;
            transform:translateZ(-100px) translateX(170px) rotateY(70deg);
            clip-path: polygon(0% 25px,100% 0%,100% 100%,0% calc(100% - 25px));
                background-image: linear-gradient(to left, rgba(0,96,220,1),#45fed4);
        }

.seconed {
                list-style-type: none;
                    left: 261px;
                    top: 65px;
                    width: 200px;
                    height: 195px;
                text-align: center;
                position: absolute;
                transform-style: preserve-3d;
                transform: rotateX(70deg) rotateZ(45deg);
                perspective: 2000px;
                perspective-origin: 50% 100%;
              animation: trigle_down2 2s linear;
    -webkit-animation: trigle_down2 2s linear; 
        }
@keyframes trigle_down2{
    0%{
        top:-300px;
    }
    50%{
        top:-300px;
    }
    100%{
        top:45px
    }
}
        .seconed li {
           width: 100%;
        height: 100%;
        position: absolute;
        background-image: linear-gradient(rgba(58,200,255,0.8) 25%,#616cff);
    	opacity: 0.8;
        }
        .seconed li:nth-child(1) {
            transform: rotateX(0deg) translateZ(-48px) scale(0.8);
        }
        .seconed li:nth-child(2) {
             transform:translateZ(-100px) translateY(140px) rotateX(-70deg);
             height: 55px;
            line-height: 55px;
            transform-origin: 0 100%;
            clip-path: polygon(18px 0%,calc(100% - 18px) 0%,100% 100%,0% 100%);
         }
        .seconed li:nth-child(3) {
            transform: rotateX(-180deg) translateZ(100px);
        }
        .seconed li:nth-child(4) {
            height: 55px;
            line-height: 55px;
            transform-origin: 0 100%;
            transform: translateZ(-100px) translateY(-55px) rotateX(-110deg);
            clip-path: polygon(18px 0%,calc(100% - 18px) 0%,100% 100%,0% 100%);
        }
        .seconed li:nth-child(5) {
            width: 55px;
            transform-origin: 100% 100%;
            transform: translateZ(-100px) translateX(-55px) rotateY(110deg);
            clip-path: polygon(0% 18px,100% 0%,100% 100%,0% calc(100% - 18px));
        }
        .seconed li:nth-child(6) {
            width: 55px;
            transform-origin: 100% 100%;
            transform:translateZ(-100px) translateX(145px) rotateY(70deg);
            clip-path: polygon(0% 18px,100% 0%,100% 100%,0% calc(100% - 18px));
        }

.third {
                list-style-type: none;
                left: 292px;
                top: 20px;
                width: 140px;
                height: 140px;
                text-align: center;
                position: absolute;
                transform-style: preserve-3d;
                transform: rotateX(70deg) rotateZ(45deg);
                perspective: 2000px;
                perspective-origin: 50% 100%;
     	animation: trigle_down3 3s linear;
   	 -webkit-animation: trigle_down3 3s linear; 
        }
@keyframes trigle_down3{
    0%{
        top:-250px;
    }
    66.66%{
        top:-250px;
    }
    100%{
        top:0px
    }
}
        .third li {
           width: 100%;
        height: 100%;
        position: absolute;
         background-image: linear-gradient(#f1e04f 5%,rgba(253,156,48,0.8));
    opacity: 0.7;
        }
        .third li:nth-child(1) {
            transform: rotateX(0deg) translateZ(-48px) scale(0.75);
        }
        .third li:nth-child(2) {
             transform:translateZ(-100px) translateY(85px) rotateX(-70deg);
             height: 55px;
            line-height: 55px;
            transform-origin: 0 100%;
            clip-path: polygon(18px 0%,calc(100% - 18px) 0%,100% 100%,0% 100%);
         }
        .third li:nth-child(3) {
            transform: rotateX(-180deg) translateZ(100px);
        }
        .third li:nth-child(4) {
            height: 55px;
            line-height: 55px;
            transform-origin: 0 100%;
            transform: translateZ(-100px) translateY(-55px) rotateX(-110deg);
            clip-path: polygon(18px 0%,calc(100% - 18px) 0%,100% 100%,0% 100%);
        }
        .third li:nth-child(5) {
            width: 55px;
            transform-origin: 100% 100%;
            transform: translateZ(-100px) translateX(-55px) rotateY(110deg);
            clip-path: polygon(0% 18px,100% 0%,100% 100%,0% calc(100% - 18px));
        }
        .third li:nth-child(6) {
            width: 55px;
            transform-origin: 100% 100%;
            transform:translateZ(-100px) translateX(85px) rotateY(70deg);
            clip-path: polygon(0% 18px,100% 0%,100% 100%,0% calc(100% - 18px));
        }

.four {
                list-style-type: none;
                    left: 310px;
                top: -8px;
                width: 105px;
                height: 106px;
                text-align: center;
                position: absolute;
                transform-style: preserve-3d;
                transform: rotateX(70deg) rotateZ(45deg);
                perspective: 2000px;
                perspective-origin: 50% 100%;
    animation: trigle_down4 4s linear;
   	 -webkit-animation: trigle_down4 4s linear; 
        }
@keyframes trigle_down4{
    0%{
        top:-250px;
    }
    75%{
        top:-250px;
    }
    100%{
        top:-28px
    }
}

        .four li {
           width: 100%;
        height: 100%;
        position: absolute;
         background-image: linear-gradient(rgba(112,245,100,0.8) 9%,#dbfe73);
    opacity: 0.7;
        }
        .four li:nth-child(1) {
            display:none;
            transform: rotateX(0deg) translateZ(-48px) scale(0.75);
        }
        .four li:nth-child(2) {
             transform:translateZ(-100px) translateY(-48px) rotateX(-70deg);
             height: 152px;
            transform-origin: 0 100%;
            clip-path: polygon(50% 0%,50% 0%,100% 100%,0% 100%);
         }
        .four li:nth-child(3) {
            transform: rotateX(-180deg) translateZ(100px);
        }
        .four li:nth-child(4) {
            height: 150px;
            transform-origin: 0 100%;
            transform: translateZ(-100px) translateY(-150px) rotateX(-110deg);
            clip-path: polygon(50% 0%,50% 0%,100% 100%,0% 100%);
        }
        .four li:nth-child(5) {
            width: 150px;
            transform-origin: 100% 100%;
            transform: translateZ(-100px) translateX(-150px) rotateY(110deg);
            clip-path: polygon(0% 50%,100% 0%,100% 100%,0% 50%);
        }
        .four li:nth-child(6) {
            width: 152px;
            transform-origin: 100% 100%;
            transform:translateZ(-100px) translateX(-48px) rotateY(70deg);
            clip-path: polygon(0% 50%,100% 0%,100% 100%,0% 50%);
        }

.trigle .back_img{   
    position: absolute;
    top: 195px;
    width: 100%;
    height: 300px;
    background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/AHWS/image/icon_db02.png) no-repeat center;
    transform: rotateX(0deg);
    background-size: 80% 84%;
}
.trigle .back_img1{   
        position: absolute;
    left: 0;
    top: 18%;
    width: 100%;
    height: 100%;
    background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/AHWS/image/icon_db03.png) no-repeat center;
    transform: rotateX(65deg);
    background-size: 62%;
    animation: trigle_move 10s linear infinite;
    -webkit-animation: trigle_move 10s linear infinite;
}
@keyframes trigle_move{
    0%{
        transform :   rotateX(65deg) rotateZ(360deg);
    }
    100%{
         transform :   rotateX(65deg) rotateZ(0deg);
    }
    
}
.trigle .back_img2{   
       position: absolute;
    top: 190px;
    width: 100%;
    height: 300px;
    background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/AHWS/image/icon_db04.png) no-repeat center;
    transform: rotateX(66deg);
    background-size: 39%;
    animation: trigle_move1 10s linear infinite;
    -webkit-animation: trigle_move1 10s linear infinite;
}
@keyframes trigle_move1{
    0%{
        transform :   rotateX(66deg) rotateZ(0deg);
    }
    100%{
         transform :   rotateX(66deg) rotateZ(360deg);
    }
    
}
.trigle .back_img3{   
         position: absolute;
    top: 247px;
    width: 100%;
    height: 300px;
    background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/AHWS/image/icon_db01.png) no-repeat center;
    transform: rotateX(50deg);
    background-size: 65% 100%;
}
.trigle .detail {
    width: 240px;
    height: 60px;
    position: absolute;
}
.trigle .detail.detail_1 {
    left: 2px;
    top: 245px;
}
.trigle .detail.detail_2 {
    left: 430px;
    top: 194px;
    width:290px;
}
.trigle .detail.detail_3 {
    left: 67px;
    top: 117px;
}
.trigle .detail.detail_4 {
    left: 379px;
    top: 60px;
}
.arrow.arrow_1 {
    width: 20px;
    height: 1px;
    background: #01ddb2;
    transform: rotate(30deg);
    display: inline-block;
    margin-top: 40px;
}
.trigle .arrow.arrow_1:before {
    content: '';
    width: 50px;
    height: 1px;
    background: #01ddb2;
    display: inline-block;
    transform: rotate(-30deg);
    position: absolute;
    left: 17px;
    top: -13px;
}
.trigle .arrow.arrow_1:after {
    content: '';
    width: 5px;
    height: 5px;
    background: #01ddb2;
    display: inline-block;
    border-radius: 50%;
    position: absolute;
    top: -2px;
    box-shadow: 0px 0px 5px 1px #01ddb2;
    left: -2px;
}
.arrow_contain {
    width: 80px;
    height: 100%;
    display: inline-block;
}
.arrow_contain.arrow_contain1, .arrow_contain.arrow_contain3{
    float: right;
}
.detail_txt {
    display: inline-block;
}
.detail_txt {
    width: calc(100% - 80px);
    height: 100%;
}
.detail_txt .precent_txt{
    width: 50px;
    height: 50px;
    display: inline-block;
    border-radius: 50%;
      margin: 5px;
}
.detail_txt .precent_txt.precent_txt1 {
    background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/AHWS/image/icon_xfq04.png) no-repeat center;
}
.detail_txt .precent_txt.precent_txt2 {
    background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/AHWS/image/icon_xfq03.png) no-repeat center;
}
.detail_txt .precent_txt.precent_txt3 {
    background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/AHWS/image/icon_xfq01.png) no-repeat center;
}
.detail_txt .precent_txt.precent_txt4 {
    background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/AHWS/image/icon_xfq02.png) no-repeat center;
}
.detail_txt .txt_right {
    padding: 10px 0;
    display: inline-block;
    float: right;
    height: 60px;
    width: calc(100% - 65px);
}
.detail_txt .txt_right .f_div {
    color: #2bb5ff;
    font-size: 16px;
}
.detail_txt .txt_right .s_div {
    font-size: 16px;
    font-weight: bold;
}
.detail_txt .txt_right1 .s_div1 {
    color: #01ddb2;
}
.detail_txt .txt_right .s_div2 {
    color: #5d83ff;
}
.detail_txt .txt_right .s_div3 {
    color: #e59138;
}
.detail_txt .txt_right .s_div4 {
    color: #77f364;
}
.arrow.arrow_3 {
    width: 20px;
    height: 1px;
    background: #ff9232;
    transform: rotate(30deg);
    display: inline-block;
    margin-top: 40px;
}
.trigle .arrow.arrow_3:before {
    content: '';
    width: 50px;
    height: 1px;
    background: #ff9232;
    display: inline-block;
    transform: rotate(-30deg);
    position: absolute;
    left: 17px;
    top: -13px;
}
.trigle .arrow.arrow_3:after {
    content: '';
    width: 5px;
    height: 5px;
    background: #ff9232;
    display: inline-block;
    border-radius: 50%;
    position: absolute;
    top: -2px;
    box-shadow: 0px 0px 5px 1px #ff9232;
    left: -2px;
}
.detail_txt.detail_txt2,.detail_txt.detail_txt4 {
    float: right;
}
.arrow_contain.arrow_contain2 ,.arrow_contain.arrow_contain4{
    float: left;
}
span.arrow.arrow_2 {
    width: 20px;
    height: 1px;
    background: #5f75ff;
    transform: rotate(-30deg);
    display: inline-block;
    margin-top: 40px;
    float: right;
}
span.arrow.arrow_2:before {
    content: '';
    width: 50px;
    height: 1px;
    background: #5f75ff;
    display: inline-block;
    transform: rotate(30deg);
    position: absolute;
    left: -47px;
    top: -13px;
}
.trigle .arrow.arrow_2:after {
    content: '';
    width: 5px;
    height: 5px;
    background: #5f75ff;
    display: inline-block;
    border-radius: 50%;
    position: absolute;
    top: -2px;
    box-shadow: 0px 0px 5px 1px #5f75ff;
    left: 17px;
}
span.arrow.arrow_4 {
    width: 20px;
    height: 1px;
    background: #77f364;
    transform: rotate(-30deg);
    display: inline-block;
    margin-top: 40px;
    float: right;
}
span.arrow.arrow_4:before {
    content: '';
    width: 50px;
    height: 1px;
    background: #77f364;
    display: inline-block;
    transform: rotate(30deg);
    position: absolute;
    left: -47px;
    top: -13px;
}
.trigle .arrow.arrow_4:after {
    content: '';
    width: 5px;
    height: 5px;
    background: #77f364;
    display: inline-block;
    border-radius: 50%;
    position: absolute;
    top: -2px;
    box-shadow: 0px 0px 5px 1px #77f364;
    left: 17px;
}
.txt_right .f_div.aharrow_up:before {
    content: '';
    background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/AHWS/image/icon_jt01.png) no-repeat center;
    width: 12px;
    height: 18px;
    display: block;
    float: right;
}
.txt_right .f_div.aharrow_down:before {
    content: '';
    background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/AHWS/image/icon_jt02.png) no-repeat center;
    width: 12px;
    height: 18px;
    display: block;
    float: right;
}
.chartsdom{
    width:100%;
    height:100%;
}
.arrow_contain.arrow_contain1 {
    animation : clip_line 2s linear;
    -webkit-animation: clip_line 2s linear; 
}
@keyframes clip_line{
    0%{
        clip-path: polygon(100% 0, 100% 0% ,100% 0, 100% 0);
    }
    50%{
          clip-path: polygon(100% 0, 100% 0% ,100% 0, 100% 0);
    }
    75%{
          clip-path: polygon(50% 0, 100% 0% ,100% 100%, 50% 100%);
    }
    100%{
         clip-path: polygon(0% 0, 100% 0% ,100% 100%, 0% 100%);
    }
}
.detail_txt.detail_txt1 {
    animation : opacity_path 3s linear;
    -webkit-animation: opacity_path 3s linear; 
}
@keyframes opacity_path{
    0%{
        opacity:0;
    }
    66.7%{
          opacity:0;
    }
    100%{
        opacity:1;
    }
}
.arrow_contain.arrow_contain2 {
    animation : clip_line2 3s linear;
    -webkit-animation: clip_line2 3s linear; 
}
@keyframes clip_line2{
    0%{
        clip-path: polygon(0% 0, 0% 0% ,0% 0, 0% 0);
    }
    66.66%{
          clip-path: polygon(0% 0, 0% 0% ,0% 0, 0% 0);
    }
    83%{
          clip-path: polygon(0% 0, 50% 0% ,50% 50%, 0% 50%);
    }
    100%{
         clip-path: polygon(0% 0, 100% 0% ,100% 100%, 0% 100%);
    }
}
.detail_txt.detail_txt2 {
    animation : opacity_path2 4s linear;
    -webkit-animation: opacity_path2 4s linear; 
}
@keyframes opacity_path2{
    0%{
        opacity:0;
    }
    75%{
          opacity:0;
    }
    100%{
        opacity:1;
    }
}
.arrow_contain.arrow_contain3 {
    animation : clip_line3 4s linear;
    -webkit-animation: clip_line3 4s linear; 
}
@keyframes clip_line3{
    0%{
        clip-path: polygon(100% 0, 100% 0% ,100% 0, 100% 0);
    }
    75%{
          clip-path: polygon(100% 0, 100% 0% ,100% 0, 100% 0);
    }
    93%{
          clip-path: polygon(50% 0, 100% 0% ,100% 100%, 50% 100%);
    }
    100%{
         clip-path: polygon(0% 0, 100% 0% ,100% 100%, 0% 100%);
    }
}

.detail_txt.detail_txt3 {
    animation : opacity_path3 5s linear;
    -webkit-animation: opacity_path3 5s linear; 
}
@keyframes opacity_path3{
    0%{
        opacity:0;
    }
    80%{
          opacity:0;
    }
    100%{
        opacity:1;
    }
}
.arrow_contain.arrow_contain4 {
    animation : clip_line4 5s linear;
    -webkit-animation: clip_line4 5s linear; 
}
@keyframes clip_line4{
    0%{
        clip-path: polygon(0% 0, 0% 0% ,0% 0, 0% 0);
    }
    70%{
          clip-path: polygon(0% 0, 0% 0% ,0% 0, 0% 0);
    }
    85%{
          clip-path: polygon(0% 0, 50% 0% ,50% 50%, 0% 50%);
    }
    100%{
         clip-path: polygon(0% 0, 100% 0% ,100% 100%, 0% 100%);
    }
}
.detail_txt.detail_txt4 {
    animation : opacity_path4 6s linear;
    -webkit-animation: opacity_path4 6s linear; 
}
@keyframes opacity_path4{
    0%{
        opacity:0;
    }
    83.33%{
          opacity:0;
    }
    100%{
        opacity:1;
    }
}
</style>
 </head> 
 <body>
  <div class="editorscroll "> 
   <div id="editor" style="background-repeat: no-repeat; overflow: auto; transform-origin: 0px 0px 0px; background-image: url(&quot;vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/nhdemo/mf/bj.jpg&quot;); background-size: contain; background-position: 50% 0px; background-color: rgb(0, 0, 0); min-width: auto; width: 1920px; min-height: auto; height: 1080px;"> 
    <script src="vfs/root/products/ebi/sys/coolrpt/coolresource/js/echarts.js?time=123456654321">
		</script> 
    <div class="defelement" droppable="true" wid="elem" style="background-repeat: no-repeat; left: 0px; top: 0px; width: 100%; height: 80px; background-color: transparent; background-image: url(&quot;vfs/root/products/ebi/sys/picture/shubohui/kpchar_top.png&quot;); border: none; background-position: 65% 0px;"> 
    </div> 
    <div class="widgetobj_container nh-container" id="HHH17" wid="CHtmlWidgetLLSRQ11" style=";left:50px;top:110px;width:500px;height:550px"> 
     <div class="nh-content"> 
      <div class="nh-container-title"></div> 
      <div class="nh-container-body"> 
       <div id="HHH12" wid="CHtmlWidgetZWYWWPHB64" class="widgetobj_container " style=";left:0px;top:0px;width:100%;height:100%"> 
        <div class="pd-main"> 
         <div id="chart4" class="chart4"> 
          <div class="compass"> 
           <div class="compass-bg-1"></div> 
           <div class="compass-bg-2"></div> 
           <div class="compass-bg-3"></div> 
           <div class="compass-bg-4"></div> 
           <div class="compass-bg-5"></div> 
           <div class="compass-bg-6"></div> 
           <div class="compass-bg-7"></div> 
           <div class="compass-bg-c-1"></div> 
           <div class="compass-bg-c-2"></div> 
           <div class="compass-bg-c-3"></div> 
           <div class="compass-bg-c-4"></div> 
           <div class="compass-text compass-text-1"></div> 
           <div class="compass-text compass-text-2"></div> 
           <div class="compass-text compass-text-3"></div> 
           <div class="compass-text compass-text-4"></div> 
           <div class="compass-text compass-text-5"></div> 
           <div class="compass-number"> 
            <div title="1" class="rank-1">
             <span></span>
            </div> 
            <div title="2" class="rank-2">
             <span></span>
            </div> 
            <div title="3" class="rank-3">
             <span></span>
            </div> 
            <div title="4" class="rank-4">
             <span></span>
            </div> 
            <div title="5" class="rank-5">
             <span></span>
            </div> 
           </div> 
           <div class="line-sx"> 
            <div class="line-fs"></div> 
            <div class="line-fs"></div> 
            <div class="line-fs"></div> 
            <div class="line-fs"></div> 
            <div class="line-fs"></div> 
            <div class="line-fs"></div> 
            <div class="line-fs"></div> 
            <div class="line-fs"></div> 
            <div class="line-fs"></div> 
           </div> 
          </div> 
         </div> 
        </div>  
       </div> 
      </div> 
     </div>   
    </div> 
    <div class="widgetobj_container nh-container" id="HHH18" wid="CHtmlWidgetLLSRQ16" style=";left:975px;top:690px;width:895px;height:400px"> 
     <div class="nh-content"> 
      <div class="nh-container-title"></div> 
      <div class="nh-container-body"> 
       <div style="background-color:rgba(0,0,0,0);;left:0px;top:0px;width:100%;height:100%" id="HHH10" wid="CHtmlWidgetZWYFGZZ48" class="widgetobj_container "> 
        <div id="bar" style="width:100%;height:100%;"> 
        </div>  
       </div> 
      </div> 
     </div>   
    </div> 
    <div class="widgetobj_container nh-container" id="HHH19" wid="CHtmlWidgetLLSRQ94" style=";left:50px;top:690px;width:895px;height:400px"> 
     <div class="nh-content"> 
      <div class="nh-container-title"></div> 
      <div class="nh-container-body"> 
       <div style="width:400px;height:300px;left:0px;top:0px;width:100%;height:95%" id="HHH39" wid="4b6a86af23d9494a9f4a7d427f44652d23" class="widgetobj_container ">  
       </div> 
      </div> 
     </div>   
    </div> 
    <div class="widgetobj_container nh-container" id="HHH23" wid="CHtmlWidgetLLSRQ77" style=";left:512px;top:1120px;width:432px;height:400px"> 
     <div class="nh-content"> 
      <div class="nh-container-title"></div> 
      <div class="nh-container-body"> 
       <div style="width:240px;height:240px;left:0px;top:0px;width:100%;height:100%" id="HHH11" wid="CHtmlWidgetXZJBBT42" class="widgetobj_container "> 
        <div class="pie"> 
         <div class="pies pie1"></div> 
         <div class="pies pie2"></div> 
         <div class="pies pie3"></div> 
         <div class="pie4"></div> 
        </div> 
        <div class="chart"></div>  
       </div> 
      </div> 
     </div>   
    </div> 
    <div class="widgetobj_container nh-container" id="HHH20" wid="CHtmlWidgetLLSRQ91" style=";left:1370px;top:110px;width:500px;height:550px"> 
     <div class="nh-content"> 
      <div class="nh-container-title"></div> 
      <div class="nh-container-body"> 
       <div style="width:560px;height:500px;;left:0px;top:0px;width:100%;height:90%" id="HHH13" wid="CHtmlWidgetZWYGGXZPM56" class="widgetobj_container ">  
       </div> 
      </div> 
     </div>   
    </div> 
    <div class="widgetobj_container nh-container" id="HHH48" wid="CHtmlWidgetLLSRQ56" style=";left:50px;top:1120px;width:432px;height:400px"> 
     <div class="nh-content"> 
      <div class="nh-container-title"></div> 
      <div class="nh-container-body"> 
       <div style="width:420px;height:240px;left:23px;top:15px;width:90%;height:90%" id="HHH27" wid="46d787dc7c7f4a118b9c59da0ce89c3486" class="widgetobj_container "> 
        <div class="precent"></div>  
       </div> 
      </div> 
     </div>   
    </div> 
    <div class="widgetobj_container nh-container" id="HHH50" wid="CHtmlWidgetLLSRQ23" style=";left:1436px;top:1120px;width:432px;height:400px"> 
     <div class="nh-content"> 
      <div class="nh-container-title"></div> 
      <div class="nh-container-body"> 
       <div style="width:243px;height:236px;left:0px;top:0px;width:100%;height:100%" id="HHH41" wid="CHtmlWidgetDKDJBBBT40" class="widgetobj_container ">  
       </div> 
      </div> 
     </div>   
    </div> 
    <div class="widgetobj_container nh-container" id="HHH51" wid="CHtmlWidgetLLSRQ19" style=";left:974px;top:1120px;width:432px;height:400px"> 
     <div class="nh-content"> 
      <div class="nh-container-title"></div> 
      <div class="nh-container-body"> 
       <div id="HHH45" wid="CHtmlWidgetZWYHXBT60" class="widgetobj_container " style=";left:0px;top:0px;width:100%;height:100%"> 
        <div class="pd-info animated bounceInUp"> 
         <div class="pd-info-center pdt-container"></div> 
        </div>  
       </div> 
      </div> 
     </div>   
    </div> 
    <div class="widgetobj_container nh-container" id="HHH52" wid="CHtmlWidgetLLSRQ70" style=";left:50px;top:1548px;width:586px;height:400px"> 
     <div class="nh-content"> 
      <div class="nh-container-title"></div> 
      <div class="nh-container-body"> 
       <div id="HHH36" wid="0f98ee2c55ca4b8dbdbf0d1986e57a311" class="widgetobj_container " style=";left:0px;top:0px;width:100%;height:420px"> 
        <div class="lineDom"> 
        </div>  
       </div> 
      </div> 
     </div>   
    </div> 
    <div class="widgetobj_container nh-container" id="HHH53" wid="CHtmlWidgetLLSRQ44" style=";left:1282px;top:1548px;width:586px;height:400px"> 
     <div class="nh-content"> 
      <div class="nh-container-title"></div> 
      <div class="nh-container-body"> 
       <div style="background-color:rgba(255,255,255,.0);;left:0px;top:0px;width:100%;height:100%" id="HHH54" wid="e1e5124249d3497fa814cdaeff76ba4818" class="widgetobj_container "> 
        <div class="rollLine_main" id="rollLine"> 
        </div>  
       </div> 
      </div> 
     </div>   
    </div> 
    <div class="widgetobj_container nh-container" id="HHH49" wid="CHtmlWidgetLLSRQ39" style=";left:666px;top:1548px;width:586px;height:400px"> 
     <div class="nh-content"> 
      <div class="nh-container-title"></div> 
      <div class="nh-container-body"> 
       <div id="HHH56" wid="033f08ec73264ddd95ddf0926938fe4e48" class="widgetobj_container " style=";left:0px;top:0px;width:95%;height:95%">  
       </div> 
      </div> 
     </div>   
    </div> 
    <div class="widgetobj_container trigle" style="width:800px;height:500px;;left:600px;top:150px;width:720px;height:500px" id="HHH24" wid="e577fd81261947a5a1487b69e713d2a121"> 
     <div class="back_img3"></div> 
     <div class="back_img"></div> 
     <div class="back_img1"></div> 
     <div class="back_img2"></div> 
     <ul class="first"> 
      <li></li>
      <li></li>
      <li></li> 
      <li></li>
      <li></li>
      <li></li> 
     </ul> 
     <ul class="seconed"> 
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li> 
     </ul> 
     <ul class="third"> 
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li> 
     </ul> 
     <ul class="four"> 
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li> 
     </ul> 
     <div class="detail detail_1"> 
      <div class="detail_txt detail_txt1"> 
       <span class="precent_txt precent_txt1"> 
        <div class="chartsdom"></div> </span> 
       <div class="txt_right txt_right1"> 
        <span> 
         <div class="f_div">
          注册护士
         </div> 
         <div class="s_div s_div1">
          872人
         </div> </span> 
       </div> 
      </div> 
      <div class="arrow_contain arrow_contain1"> 
       <span class="arrow arrow_1"></span> 
      </div> 
     </div> 
     <div class="detail detail_2"> 
      <div class="detail_txt detail_txt2"> 
       <span class="precent_txt precent_txt2"> 
        <div class="chartsdom"></div> </span> 
       <div class="txt_right txt_right2"> 
        <span> 
         <div class="f_div">
          注册护士
         </div> 
         <div class="s_div s_div2">
          872人
         </div> </span> 
       </div> 
      </div> 
      <div class="arrow_contain arrow_contain2"> 
       <span class="arrow arrow_2"></span> 
      </div> 
     </div> 
     <div class="detail detail_3"> 
      <div class="detail_txt detail_txt3"> 
       <span class="precent_txt precent_txt3"> 
        <div class="chartsdom"></div> </span> 
       <div class="txt_right txt_right3"> 
        <span> 
         <div class="f_div">
          注册护士
         </div> 
         <div class="s_div s_div3">
          872人
         </div> </span> 
       </div> 
      </div> 
      <div class="arrow_contain arrow_contain3"> 
       <span class="arrow arrow_3"></span> 
      </div> 
     </div> 
     <div class="detail detail_4"> 
      <div class="detail_txt detail_txt4"> 
       <span class="precent_txt precent_txt4"> 
        <div class="chartsdom"></div> </span> 
       <div class="txt_right txt_right4"> 
        <span> 
         <div class="f_div">
          注册护士
         </div> 
         <div class="s_div s_div4">
          872人
         </div> </span> 
       </div> 
      </div> 
      <div class="arrow_contain arrow_contain4"> 
       <span class="arrow arrow_4"></span> 
      </div> 
     </div>  
    </div> 
    <div class="widgetobj_container nh-container" id="HHH55" wid="CHtmlWidgetLLSRQ38" style=";left:50px;top:1978px;width:432px;height:400px"> 
     <div class="nh-content"> 
      <div class="nh-container-title"></div> 
      <div class="nh-container-body"> 
       <div style="width:270px;height:260px;left:0px;top:0px;width:100%;height:100%" id="HHH58" wid="CHtmlWidgetRXZBT67" class="widgetobj_container "> 
        <div class="person"> 
         <div class="pers person1"></div> 
         <div class="pers person2"></div> 
         <div class="pers person3"></div> 
        </div> 
        <div class="svgs"> 
         <svg width="244" height="264" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
          <defs> 
           <lineargradient id="linear" x1="0%" y1="0%" x2="0%" y2="100%"> 
            <stop offset="0%" style="stop-color:#0a6aff;stop-opacity:0.47" /> 
            <stop offset="40%" style="stop-color:#5cffff;stop-opacity:1" /> 
            <stop offset="100%" style="stop-color:#0a6aff;stop-opacity:1" /> 
           </lineargradient> 
           <marker id="arrow" markerwidth="10" markerheight="10" refx="0" refy="3" orient="auto" markerunits="strokeWidth"> 
            <path d="M0,0 L0,6 L9,3 z" fill="rgb(11,108,255)" /> 
           </marker> 
          </defs> 
          <path d="M134 86C136 86 80 85 77 208" fill="none" stroke="url(#linear)" stroke-opacity="1" marker-end="url(#arrow)" /> 
          <path d="M136 86C138 86 212 88 204 208" fill="none" stroke="url(#linear)" stroke-opacity="1" marker-end="url(#arrow)" /> 
          <path d="M136 84C138 84 195 84 206 116" fill="none" stroke="url(#linear)" stroke-opacity="1" marker-end="url(#arrow)" /> 
          <path d="M134 84C136 84 81 82 58 123" fill="none" stroke="url(#linear)" stroke-opacity="1" marker-end="url(#arrow)" /> 
          <path d="M132 86C134 86 120 68 93 67" fill="none" stroke="url(#linear)" stroke-opacity="1" marker-end="url(#arrow)" /> 
          <path d="M134 86C136 86 132 78 134 74C136 69 150 52 150 52" fill="none" stroke="url(#linear)" stroke-opacity="1" marker-end="url(#arrow)" /> 
          <path d="M134 85C136 85 146 65 183 65" fill="none" fill-opacity="0" stroke="url(#linear)" marker-end="url(#arrow)" /> 
         </svg> 
        </div> 
        <div class="svgs"> 
         <div class="text per1">
          <span></span>
          <span></span>人
         </div> 
         <div class="text per2">
          <span></span>
          <span></span>人
         </div> 
         <div class="text per3">
          <span></span>
          <span></span>人
         </div> 
         <div class="text per4">
          <span></span>
          <span></span>人
         </div> 
         <div class="text per5">
          <span></span>
          <span></span>人
         </div> 
         <div class="text per6">
          <span></span>
          <span></span>人
         </div> 
         <div class="text per7">
          <span></span>
          <span></span>人
         </div> 
        </div>  
       </div> 
      </div> 
     </div>   
    </div> 
    <div style="width:350px;height:250px;left:644px;top:2409px;width:620px;height:400px" id="HHH63" wid="a25abe1190874b298eef90e59a7ec88c83" class="widgetobj_container "> 
     <div class="bar_img"></div> 
     <div class="bar_img1"></div> 
     <div class="bar_img2"></div> 
     <div class="bar_charts"></div>  
    </div> 
    <div class="widgetobj_container nh-container" id="HHH71" wid="CHtmlWidgetLLSRQ12" style=";left:512px;top:1978px;width:432px;height:400px"> 
     <div class="nh-content"> 
      <div class="nh-container-title"></div> 
      <div class="nh-container-body"> 
       <div style="width:310px;height:335px;left:55px;top:0px;width:80%;height:100%" id="HHH59" wid="23410f59a0ff498f888c21aeeafcef8c25" class="widgetobj_container "> 
        <div class="pd-main-left"> 
         <div class="yun-container"> 
          <div class="yun-tree"></div> 
          <div class="line-fs"></div> 
          <div class="line-fs"></div> 
          <div class="line-fs"></div> 
          <div class="line-fs"></div> 
          <div class="line-fs"></div> 
          <div class="line-fs"></div> 
          <div class="line-fs"></div> 
          <div class="line-fs"></div> 
          <div class="line-fs"></div> 
         </div> 
         <div id="yunText" class="yun-text"> 
          <div id="yunText-1"></div> 
          <div id="yunText-2"></div> 
          <div id="yunText-3"></div> 
          <div id="yunText-4"></div> 
          <div id="yunText-5"></div> 
          <div id="yunText-6"></div> 
          <div id="yunText-7"></div> 
          <div id="yunText-8"></div> 
          <div id="yunText-9"></div> 
          <div id="yunText-10"></div> 
          <div id="yunText-11"></div> 
          <div id="yunText-12"></div> 
          <div id="yunText-13"></div> 
          <div id="yunText-14"></div> 
          <div id="yunText-15"></div> 
          <div id="yunText-16"></div> 
         </div> 
        </div>  
       </div> 
      </div> 
     </div>   
    </div> 
    <div class="widgetobj_container nh-container" id="HHH72" wid="CHtmlWidgetLLSRQ63" style=";left:974px;top:1978px;width:432px;height:400px"> 
     <div class="nh-content"> 
      <div class="nh-container-title"></div> 
      <div class="nh-container-body"> 
       <div style="background-color:rgba(0,0,0,0);;left:0px;top:0px;width:100%;height:100%" id="HHH99" wid="CHtmlWidgetLIGHTBARAREA26" class="widgetobj_container "> 
        <div id="bar_area"> 
        </div>  
       </div> 
      </div> 
     </div>   
    </div> 
    <div class="widgetobj_container nh-container" id="HHH73" wid="CHtmlWidgetLLSRQ60" style=";left:1436px;top:1978px;width:432px;height:400px"> 
     <div class="nh-content"> 
      <div class="nh-container-title"></div> 
      <div class="nh-container-body"> 
       <div style="background-color:rgba(0,0,0,0);left:0px;top:0px;width:100%;height:100%" id="HHH44" wid="CHtmlWidgetZWYLDT40" class="widgetobj_container "> 
        <div id="nh_radar"> 
        </div>  
       </div> 
      </div> 
     </div>   
    </div> 
    <div class="widgetobj_container nh-container" id="HHH74" wid="CHtmlWidgetLLSRQ59" style=";left:50px;top:2408px;width:560px;height:400px"> 
     <div class="nh-content"> 
      <div class="nh-container-title"></div> 
      <div class="nh-container-body"> 
       <div style="width:620px;height:263px;left:0px;top:35px;width:100%;height:80%" id="HHH46" wid="CHtmlWidgetZWYYXZLB90" class="widgetobj_container "> 
        <div class="pd-info-left"> 
         <div class="y-left"> 
          <div class="info-1-0 animated infinite rotateF"></div> 
          <div class="info-1-1 animated infinite rotateF"></div> 
          <div class="info-1-2 animated infinite rotate"></div> 
          <div class="info-1-3 animated infinite rotate"></div> 
          <div class="info-1-4 animated infinite flashPD"></div> 
         </div> 
         <div class="y-number y-number-1 animated fadeInLeft"> 
          <div class="y-number-bg animated infinite rotate"></div> 
          <div class="y-number-icon"></div> 
          <div class="y-number-text"> 
           <span></span> 
           <span id="number1"></span> 
          </div> 
         </div> 
         <div class="y-number y-number-2 animated fadeInLeft"> 
          <div class="y-number-bg animated infinite rotateF"></div> 
          <div class="y-number-icon"></div> 
          <div class="y-number-text"> 
           <span></span> 
           <span id="number2"></span> 
          </div> 
         </div> 
         <div class="y-number y-number-3 animated fadeInLeft"> 
          <div class="y-number-bg animated infinite rotateF"></div> 
          <div class="y-number-icon"></div> 
          <div class="y-number-text"> 
           <span></span> 
           <span id="number3"></span> 
          </div> 
         </div> 
         <div class="y-number y-number-4 animated fadeInLeft"> 
          <div class="y-number-bg animated infinite rotate"></div> 
          <div class="y-number-icon"></div> 
          <div class="y-number-text"> 
           <span></span> 
           <span id="number4"></span> 
          </div> 
         </div> 
        </div>  
       </div> 
      </div> 
     </div>   
    </div> 
    <div class="widgetobj_container nh-container" id="HHH75" wid="CHtmlWidgetLLSRQ76" style=";left:1306px;top:2408px;width:560px;height:400px"> 
     <div class="nh-content"> 
      <div class="nh-container-title"></div> 
      <div class="nh-container-body"> 
       <div style="width:450px;height:360px;left:0px;top:0px;width:100%;height:100%" id="HHH35" wid="ae00bb3272714c3083c2198032a7a96079" class="widgetobj_container ">  
       </div> 
      </div> 
     </div>   
    </div> 
    <div class="widgetobj_container nh-container" id="HHH76" wid="CHtmlWidgetLLSRQ30" style=";left:512px;top:2838px;width:432px;height:400px"> 
     <div class="nh-content"> 
      <div class="nh-container-title"></div> 
      <div class="nh-container-body"> 
       <div style="width:150px;height:150px;left:125px;top:94px;width:150px;height:150px" id="HHH80" wid="77e6ea8e1d3b4795aa1a30136190c79839" class="widgetobj_container "> 
        <div class="back_chart"> 
         <svg width="100%" height="100%" viewbox="0 0 150 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
          <path id="svg_2" d="m3,75c0,-39.77901 32.22099,-72 72,-72c39.77901,0 72,32.22099 72,72c0,39.77901 -32.22099,72 -72,72c-39.77901,0 -72,-32.22099 -72,-72z" stroke="#2de6af" fill-opacity="null" fill="none" /> 
         </svg> 
        </div> 
        <div class="cirdom"></div> 
        <div class="arrow_cir arrow_cir1"></div> 
        <div class="arrow_cir arrow_cir2"></div>  
       </div> 
      </div> 
     </div>   
    </div> 
    <div class="widgetobj_container nh-container" id="HHH77" wid="CHtmlWidgetLLSRQ72" style=";left:1436px;top:2837px;width:432px;height:400px"> 
     <div class="nh-content"> 
      <div class="nh-container-title"></div> 
      <div class="nh-container-body"> 
       <div class="defelement" droppable="true" wid="elem" style="background-repeat: no-repeat; background-color: transparent; height: 420px; border: none; top: -40px; left: 6px; width: 420px;"> 
        <div style="width:420px;height:420px;left:0px;top:0px;width:420px;height:420px" id="HHH85" wid="e57a5e2e2bf04c669ffc6fdfeaa36cc660" class="widgetobj_container "> 
         <div class="piechartdom"></div> 
         <div class="svg_dom"> 
          <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
           <path id="svg_2" d="m117,210c0,-51.65746 41.61878,-93.5 93,-93.5c51.38122,0 93,41.84254 93,93.5c0,51.65746 -41.61878,93.5 -93,93.5c-51.38122,0 -93,-41.84254 -93,-93.5z" stroke="#bfbfbf" fill="none" stroke-dasharray="3,3" xmlns="http://www.w3.org/2000/svg" /> 
           <path id="svg_3" d="m134,210c0,-41.71271 34.01105,-75.5 76,-75.5c41.98895,0 76,33.78729 76,75.5c0,41.71271 -34.01105,75.5 -76,75.5c-41.98895,0 -76,-33.78729 -76,-75.5z" stroke="#bfbfbf" fill="none" stroke-dasharray="3,3" xmlns="http://www.w3.org/2000/svg" /> 
          </svg> 
         </div> 
         <div class="cir_arrow cir_arrow1"></div> 
         <div class="cir_arrow cir_arrow2"></div>  
        </div> 
       </div> 
      </div> 
     </div>   
    </div> 
    <div class="widgetobj_container nh-container" id="HHH78" wid="CHtmlWidgetLLSRQ20" style=";left:974px;top:2838px;width:432px;height:400px"> 
     <div class="nh-content"> 
      <div class="nh-container-title"></div> 
      <div class="nh-container-body"> 
       <div style="width:270px;height:200px;left:0px;top:0px;width:100%;height:100%" id="HHH38" wid="39f7dc05da2d4b1086e16242a4ff81b463" class="widgetobj_container "> 
        <div class="icon_img"></div> 
        <div class="icon_img1"></div> 
        <div class="icon_img2"></div> 
        <div class="chartdom"></div>  
       </div> 
      </div> 
     </div>   
    </div> 
    <div class="widgetobj_container nh-container" id="HHH79" wid="CHtmlWidgetLLSRQ42" style=";left:50px;top:2838px;width:432px;height:400px"> 
     <div class="nh-content"> 
      <div class="nh-container-title"></div> 
      <div class="nh-container-body"> 
       <div style="width:400px;height:400px;left:0px;top:0px;width:100%;height:100%" id="HHH34" wid="CHtmlWidgetZWYGGHXPD95" class="widgetobj_container "> 
        <div class="precent"></div>  
       </div> 
      </div> 
     </div>   
    </div> 
    <div class="defelement" droppable="true" wid="elem" style="width: 300px; background-repeat: no-repeat; left: 54px; top: 3253px; border: none; background-color: transparent; height: 100px;"> 
    </div> 
   </div> 
   <div class="defelement" id="closeImg" style="border: currentColor; border-image: none; top: 10px; width: 40px; height: 42px; right: 20px; cursor: pointer; background-image: url(&quot;vfs/root/products/ebi/sys/picture/关闭按钮1.png&quot;); background-repeat: no-repeat; background-color: transparent;" wid="elem" droppable="true"> 
   </div>  
  </div>
 </body>
 <head>
  <script src="../eui/modules/ecommonctrls.js"></script>
  <script src="../eui/modules/ecombobox.js"></script>
  <script src="../eui/modules/etree.js"></script>
  <script src="../eui/modules/edialog.js"></script>
  <script src="../eui/modules/efloathint.js"></script>
  <script src="../eui/third/jquery-1.9.1.min.js"></script>
  <script src="../ebibase/user/coolrptshow/coolcalcreq.js"></script>
  <script src="../ebibase/user/coolrptshow/minishowmgr.js"></script>
  <script src="../ebibase/user/coolrptshow/coolrptshow.js"></script>
  <script src="../ebibase/user/coolrptshow/widgetresult/cwidgetresult.js"></script>
  <script src="../ebibase/user/coolrptshow/widgetresult/cwidgetresultgrid.js"></script>
  <script src="../ebibase/user/coolrptshow/widgetresult/cwidgetresultchart.js"></script>
  <script src="../ebibase/user/coolrptshow/widgetresult/cwidgetresultminichart.js"></script>
  <script src="../emapmgr/ditu/echarts45.js"></script>
  <script src="../ebibase/user/coolrptshow/widgetresult/cwidgetresultmap.js"></script>
  <script src="../ebibase/user/coolrptshow/widgetresult/cwidgetresulthtml.js"></script>
  <script src="../ebipro/user/coolrptdsn/dlg/floatdlg.js"></script>
  <script id="vardefine">
var g_rptid ="EANA$2$4$1$7a22a8c202ba402bb05b0c450493a445$0ca1259fa8ed410599d3915b9d23e26a.coolrpt";
var g_watermark ="0";
var g_hasmacroinhtml ="false";
var g_cwids ="";
var $relpath ="/abi/";
var g_userid ="demo";
var g_htmlmacro_hasrefresult ="false";
var g_isResultNew ="true";
var g_srcrptid ="null";
var g_username ="ESENSOFT";
var g_resid ="EANA$2$4$2$7a22a8c202ba402bb05b0c450493a445$092e8c31b1ba4833a23365f962bfb063.coolrpt";
var g_threadid ="EANA$2$4$2$7a22a8c202ba402bb05b0c450493a445$2343278.coolrpt";
var g_treeinfo ="%5B%22div%22%2C%22div%22%2C%7B%22HHH17%22%3A%5B%22HHH12%22%5D%2C%22iscallback%22%3Afalse%7D%2C%7B%22iscallback%22%3Afalse%2C%22HHH18%22%3A%5B%22HHH10%22%5D%7D%2C%7B%22iscallback%22%3Afalse%2C%22HHH19%22%3A%5B%22HHH39%22%5D%7D%2C%7B%22HHH23%22%3A%5B%22HHH11%22%5D%2C%22iscallback%22%3Afalse%7D%2C%7B%22iscallback%22%3Afalse%2C%22HHH20%22%3A%5B%22HHH13%22%5D%7D%2C%7B%22HHH48%22%3A%5B%22HHH27%22%5D%2C%22iscallback%22%3Afalse%7D%2C%7B%22iscallback%22%3Afalse%2C%22HHH50%22%3A%5B%22HHH41%22%5D%7D%2C%7B%22iscallback%22%3Afalse%2C%22HHH51%22%3A%5B%22HHH45%22%5D%7D%2C%7B%22iscallback%22%3Afalse%2C%22HHH52%22%3A%5B%22HHH36%22%5D%7D%2C%7B%22iscallback%22%3Afalse%2C%22HHH53%22%3A%5B%22HHH54%22%5D%7D%2C%7B%22HHH49%22%3A%5B%22HHH56%22%5D%2C%22iscallback%22%3Afalse%7D%2C%22HHH24%22%2C%7B%22HHH55%22%3A%5B%22HHH58%22%5D%2C%22iscallback%22%3Afalse%7D%2C%22HHH63%22%2C%7B%22iscallback%22%3Afalse%2C%22HHH71%22%3A%5B%22HHH59%22%5D%7D%2C%7B%22iscallback%22%3Afalse%2C%22HHH72%22%3A%5B%22HHH99%22%5D%7D%2C%7B%22iscallback%22%3Afalse%2C%22HHH73%22%3A%5B%22HHH44%22%5D%7D%2C%7B%22iscallback%22%3Afalse%2C%22HHH74%22%3A%5B%22HHH46%22%5D%7D%2C%7B%22iscallback%22%3Afalse%2C%22HHH75%22%3A%5B%22HHH35%22%5D%7D%2C%7B%22iscallback%22%3Afalse%2C%22HHH76%22%3A%5B%22HHH80%22%5D%7D%2C%7B%22HHH77%22%3A%5B%7B%22div%22%3A%5B%22HHH85%22%5D%2C%22iscallback%22%3Afalse%7D%5D%2C%22iscallback%22%3Afalse%7D%2C%7B%22HHH78%22%3A%5B%22HHH38%22%5D%2C%22iscallback%22%3Afalse%7D%2C%7B%22HHH79%22%3A%5B%22HHH34%22%5D%2C%22iscallback%22%3Afalse%7D%2C%22div%22%5D";
</script>
  <script id="page.js">
// JavaScript Document

//缩放
+function(){
    //关闭按钮
$("#closeImg").click(function(){
     window.close();
});  
    
    var bodydom = document.body;
    var editordom = document.getElementById("editor");
	var defwidth = 1920;
    var defheight = 1080;
	var xScale = bodydom.clientWidth/ defwidth;
    var yScale = bodydom.clientHeight/defheight;
    editordom.style.cssText += ";transform: scale(" + xScale + "," + yScale + ")";

$(window).resize(function () {
       xScale = bodydom.clientWidth/ defwidth;
        yScale = bodydom.clientHeight/defheight;
        editordom.style.cssText += ";transform: scale(" + xScale + "," + yScale + ")";
   })
}();
</script>
  <script src="../ebibase/user/coolrptshow/initmain.js"></script>
 </head>
 <body></body>
</html>