#intelligentServices {
  width: 80px;
  height: 80px;
  background-image: url(/Content/images/Theme/Services/intelligent.png);
  /*background-size:100% 100%;*/
  background-repeat: no-repeat;
  background-position: center center;
  position: fixed;
  z-index: 77;
  top: 116px;
  right: -27px;
  cursor: pointer;
  /*transition:width .5s,height .5s,background-image .5s,top .5s;
  -webkit-transition:width .5s,height .5s,background-image .5s,top .5s;*/
  overflow: hidden;
}

#intelligentServices:hover,
#intelligentServices.open {
  /*width: 80px;
      height: 80px;*/
  /*top: 105px;*/
  right: 0px;
  background-image: url(/Content/images/Theme/Services/intelligent_open.png);
}

.intelligent_shadow {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999999;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
}

.intelligent_page {
  width: 0px;
  height: 0px;
  background: rgba(0, 0, 0, 0);
  position: absolute;
  z-index: 99;
  top: 116px;
  right: 0;
  /*transition: width 1s,height 1s,top 1s, right 1s;
  -webkit-transition: width 1s,height 1s,top 1s ,right 1s;
  transition-timing-function: linear;
  -webkit-transition-timing-function: linear;*/
}

.intelligent_page.animation {
  animation: intelligent 0.8s;
  -webkit-animation: intelligent 0.8s;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
}

@keyframes intelligent {
  0% {
    width: 0px;
    height: 0px;
    top: 116px;
    right: 0;
  }

  30% {
    width: 50px;
    height: 50px;
    top: 50%;
    right: 6%;
  }

  40% {
    top: 70%;
    right: 14%;
  }

  80% {
    width: 500px;
    height: 378px;
    top: 0;
    right: calc(50% - 250px);
  }

  100% {
    width: 1200px;
    height: 578px;
    top: calc(50% - 289px);
    right: calc(50% - 600px);
  }
}

@-webkit-keyframes intelligent /* Safari 与 Chrome */ {
  0% {
    width: 0px;
    height: 0px;
    top: 116px;
    right: 0;
  }

  30% {
    width: 20px;
    height: 20px;
    top: 30%;
    right: 5%;
  }

  40% {
    top: 60%;
    right: 10%;
  }

  80% {
    width: 500px;
    height: 378px;
    top: 0;
    right: calc(50% - 250px);
  }

  100% {
    width: 1200px;
    height: 578px;
    top: calc(50% - 289px);
    right: calc(50% - 600px);
  }
}

.intelligent_page.open {
  width: 1200px;
  height: 578px;
  top: calc(50% - 289px);
  right: calc(50% - 600px);
}

#intelligentIframe {
  width: 100%;
  height: 100%;
  border: none;
}

.intelligent_close {
  position: absolute;
  width: 30px;
  height: 30px;
  background: url(./img/icon.png) no-repeat;
  background-position: -149px -31px;
  top: -12px;
  right: -12px;
  cursor: pointer;
}

.intelligent_close:hover {
  background-position: -180px -31px;
}