.topdemo{ position: relative; z-index: 2; width:100%; height: 100%;}
.topdemo .demobg{ position: relative;}
.topdemo .demobox{ position: relative;overflow:hidden}
.topdemo .demobg img{ opacity: 0;width: 100%;height:100%}
.topdemo .demobg::before{ content: ""; position: absolute; left: 0; top: 0; z-index: 5; width: 100%; height: 100px; background: linear-gradient(180deg, rgba(0, 0, 0, .3), transparent); }
.topdemo #demovideo{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 1; }
.topdemo .item{ position: absolute; list-style: none;}
.topdemo .dotlink{ display: block; position: relative; }
.topdemo .dot{ position: relative; animation: bordershow 3s infinite; display: block; width: 18px; height: 18px; background: #fff; border: 6px solid #3DCD58; border-radius: 50%; }
.blueStyle .dot{border-color:#2F4DA2;animation: bordershow1 3s infinite;}
.gradientStyle .dot{border-color: RGB(76, 133, 114);animation: bordershow2 3s infinite;}
.topdemo .dot::before{ content: ''; display: block; position: absolute; left: 50%; top: 50%; z-index: -1;  margin-top:-12.5px;margin-left:-12.5px; width: 25px; height: 25px; border-radius: 50%; background: rgba(109,234,124, 0.5); animation: boderM 3s .85s infinite; }
.topdemo .dot::after{ content: ''; display: block; position: absolute; left: 50%; top: 50%; z-index: -1;  margin-top:-12.5px;margin-left:-12.5px; width: 25px; height: 25px; border-radius: 50%; background: rgba(109,234,124, 0.5); animation: boderM 3s infinite; }
.blueStyle .dot::before,.blueStyle .dot::after{background: rgba(47,77,162, 0.5);}
.gradientStyle .dot::before,.gradientStyle .dot::after{background: rgba(139,186,61, 0.5);} 
.topdemo .dotlist{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 10; margin:0;padding:0}
@keyframes boderM{
  0%{
    transform: scale(1); opacity: 0;
    -ms-transform: scale(1); opacity: 0;
  }
  20%{
    opacity: 1
  }
  75%{
    transform:  scale(2); opacity: 0;
    -ms-transform: scale(2); opacity: 0;
  }
  100%{
    opacity: 0
  }
}
@keyframes bordershow{
  50%{
    box-shadow: 0px 0px 10px 0 #3DCD58;
  }
}
@keyframes bordershow1 {
  50% {
    box-shadow: 0px 0px 10px 0 #2F4DA2;
  }
}
@keyframes bordershow2 {
  50% {
    box-shadow: 0px 0px 10px 0 #8BBA3D;
  }
}
.topdemo .textblock{ font-size: 10px; position: absolute; min-width:30px;padding:0 10px;left: 0; text-align:center;top: 50%; z-index: 1; transform: translateY(-50%); white-space: nowrap; font-size: 16px; pointer-events: none; }
.topdemo .textblock::before{ content: ""; position: absolute; left: 0; top: 5px; z-index: -1; width: 0; height: 78%; background: #3DCD58; border-radius: 15px; }
.topdemo .blueStyle .textblock::before{background: #2F4DA2;}
.topdemo .gradientStyle .textblock::before{background-image: linear-gradient(90deg, #8BBA3D, #2F4DA2);}
.topdemo .textblock::after{ content: ""; position: absolute; right: 100%; top: 0; width: 42px; height: 100%; }
.topdemo .item.act .textblock,.topdemo .item.acts .textblock{ pointer-events: all;  transition: all .4s cubic-bezier(.34, .44, .41, 1.12);}
.topdemo .item.act .textblock::before,.topdemo .item.acts .textblock::before{ width: 100%; transition: all .4s cubic-bezier(.34, .44, .41, 1.12); }
.topdemo .item.act .textblock span,.topdemo .item.acts .textblock span{ opacity: 1; transition: all .36s .4s; }
.topdemo .showbottom .textblock{ left: auto; right: 0; transform: translate(50%, 20px); top: 100%; }
.topdemo .showbottom .textblock::after{ width: 100%; left: 0; top: -30px; }
.topdemo .textblock span{ opacity: 0; line-height: 32px;}
.topdemo .text{ color: #fff; font-size: 14px; vertical-align: middle; }
.topdemo .gradientStyle .text{color: #fff;}
.topdemo .blueStyle .text{color: #fff;}
.topdemo .tips{position:absolute;bottom:22%;right:28%;z-index:1;background:rgba(93,145,255, .5);color:#fff;font-size:11px;padding:10px 26px;border:1px solid #fff}
.topdemo .tips::before{ content: ''; display: block; position: absolute; left: 50%; top: 50%; z-index: -1; transform: translate(-50%, -50%); width: 116px; height: 30px ;border-radius: 20%; background: rgba(255,255,255, .2); animation: boderM 3s .75s infinite; }
.topdemo .tips::after{ content: ''; display: block; position: absolute; left: 50%; top: 50%; z-index: -1; transform: translate(-50%, -50%); width: 116px; height: 30px; border-radius: 20%; background: rgba(255,255,255, .2); animation: boderM 3s infinite; }
@media screen and (min-width:1200px){ 
  .item.hover,.item.hovers,.item:hover{ z-index: 20; }
  .topdemo .item.hover .textblock,.topdemo .item.hovers .textblock,.topdemo .item:hover .textblock{ pointer-events: all; transition: all .4s cubic-bezier(.34, .44, .41, 1.12);}
  .topdemo .item.hover .textblock::before,.topdemo .item.hovers .textblock::before,.topdemo .item:hover .textblock::before{ width: 100%; transition: all .4s cubic-bezier(.34, .44, .41, 1.12); }
  .topdemo .item.hover .textblock span,.topdemo .item.hovers .textblock span,.topdemo .item:hover .textblock span{ opacity: 1; transition: all .36s .4s; } }
@media screen and (max-width:1199px){
  .topdemo{height:auto}
}
@media screen and (max-width:1440px){
  .topdemo .textblock span{ line-height: 44px; }
  .topdemo .tips{right:29%; border-radius:15px;}
}
@media screen and (max-width:767px){
  .topdemo .textblock span{ line-height: 36px; }
  .topdemo .item12 .textblock{ top: 24px; }
  .topdemo .showleft .textblock{ left: auto; right: 30px; transform: translateY(-50%); top: 50%; }
  .topdemo .showleft .textblock::after{ width: 42px; left: 100%; top: 0; }
  .topdemo .dot{width:12px;height:12px;border-width:4px}
  .topdemo .dot::before,.topdemo .dot::after{width:15px;height:15px; margin-top:-7.5px;margin-left:-7.5px;}
}
@media screen and (max-width:430px) {
.topdemo .text{font-size: 12px;}
.topdemo .textblock span{line-height: 28px;}
.topdemo .tips{font-size: 10px;padding:5px;}
}
@media screen and (max-width:330px) {
.topdemo .text{font-size: 10px;}
}