.weiot-welcome {
  height: 700px;
  color: #fff;
  background: #11192a url('/resource/images/welcome-weiot-bg.jpg') center center no-repeat;
  background-size: auto 100%;
}

.phone-wrp {
  width: 286px;
  height: 590px;
  background: url('/resource/images/phone-frame.svg') center center no-repeat;
  background-size: 100% 100%;
  filter: drop-shadow(0px 2px 12px rgba(88, 180, 49, .2));
  display: flex;
  justify-content: center;
  align-items: center;
}
.phone-wrp .phone-inner {
  width: 250px;
  height: 444px;
}

.color-show-state.gradient-blue {
  background-image: linear-gradient(155deg, rgba(45, 140, 240, .3), rgba(45, 140, 240, 1));
}
.color-show-state.gradient-green {
  background-image: linear-gradient(155deg, rgba(59, 180, 113, .3), rgba(59, 180, 113, 1));
}
.color-show-state.gradient-red {
  background-image: linear-gradient(155deg, rgba(224, 81, 81, .3), rgba(224, 81, 81, 1));
}
.color-show-state.gradient-grey {
  background-image: linear-gradient(155deg, rgba(73, 80, 96, .3), rgba(73, 80, 96, 1));
}
.color-show-state .state-circle-dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .8);
  cursor: pointer;
}
.color-show-state .phone-inner {
  position: relative;
  color: #fff;
}
.color-show-state .phone-inner .wxapp-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  /*opacity: 0.5;*/
}
.color-show-state .phone-inner .wxapp-page {
  z-index: 1;
  position: relative;
  width: 100%;
  height: 100%;
}
.wxapp-page .current-value__area {
  position: absolute;
  top: 120px;
  height: 100px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wxapp-page .current-value__area .current-value__value {
  line-height: 1;
  font-size: 48px;
}
.wxapp-page .current-value__area .current-value__unit {
  margin: 30px 0 8px 5px;
  line-height: 1;
  font-size: 16px;
}
.wxapp-page .status__area {
  position: absolute;
  top: 270px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.wxapp-page .status__title {
  font-size: 20px;
}
.wxapp-page .status__des {
  font-size: 16px;
}
.wxapp-page .opr__area {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wxapp-page .opr-button {
  height: 40px;
  width: 40px;
}
.wxapp-page .opr-button-image {
  width: 100%;
  height: 100%;
  vertical-align: top;
}
/* 背景动画 */
.wxapp-page .animation__wrp {
  position: absolute;
  top: 40px;
  height: 250px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wxapp-page .circle__wrp {
  width: 166px;
  height: 166px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.4);
  position: relative;
}
.wxapp-page .circle__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 160px;
  height: 160px;
  transform: translate(-80px, -80px);
  transform-origin: 50% 50%;
  border-radius: 50%;
}
/* 告警动画 */
.circle-a, .circle-b, .circle-c {
  opacity: 0;
}
.circle-a {
  -webkit-animation: circle1 4.5s ease-out forwards infinite;
  animation: circle1 4.5s ease-out forwards infinite;
}
.circle-b {
  -webkit-animation: circle1 4.5s 1.5s ease-out forwards infinite;
  animation: circle1 4.5s 1.5s ease-out forwards infinite;
}
.circle-c {
  -webkit-animation: circle-a 4.5s 3s ease-out forwards infinite;
  animation: circle1 4.5s 3s ease-out forwards infinite;
}
@keyframes circle1 {
  0% {
    transform: translate(-80px, -80px) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 0.4;
  }
  100% {
    transform: translate(-80px, -80px) scale(1.8) ;
    opacity: 0;
  }
}
/* 运行动画 */
.circle__wrp.running {
  background: linear-gradient(0deg, rgba(63,249,220,0.1) 33%, rgba(63,249,220,1) 100%);
  animation: spin 2.5s linear 1s infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(359deg);
  }
}
/* 在线动画 */
.circle__wrp.online {
  animation: spin 12s linear 0s infinite;
}
.circle__inder-dot {
  position: absolute;
  top: 0px;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-5px, -3px);
  border-radius: 50%;
  background-color: #3ff9dc;
}

.wechat-tpl .phone-inner {
  background: url('/resource/images/wechat-tpl-message-bg.png') center center no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.wechat-tpl .phone-inner .message-wrp {
  position: absolute;
  top: 40px;
  width: 100%;
  height: 366px;
  overflow: hidden;
}
.wechat-tpl .phone-inner .message-wrp img{
  transform: translateY(0px);
  animation: wechat-tpl-slide 12s ease-out infinite;
}
@keyframes wechat-tpl-slide {
  0% { transform: translateY(360px); opacity: 1; }

  5% { transform: translateY(180px); }
  15% { transform: translateY(180px); }

  20% { transform: translateY(-40px); }
  30% { transform: translateY(-40px); }

  35% { transform: translateY(-230px); }
  45% { transform: translateY(-230px); }

  50% { transform: translateY(-410px); }
  60% { transform: translateY(-410px); }

  65% { transform: translateY(-610px); }
  75% { transform: translateY(-610px); }

  80% { transform: translateY(-800px); }
  90% { transform: translateY(-800px); opacity: 1; }
  92% { transform: translateY(-800px); opacity: 0; }

  100% { transform: translateY(360px); opacity: 0; }
}

.weiot-invitation {
  height: 700px;
  position: relative;
}
.weiot-invitation:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url('/resource/images/wxapp-page-gallery.jpg') center bottom no-repeat;
  background-size: auto 100%;
  z-index: -1;
  opacity: .3;
}