.hs-hotspot-pro{margin:0 auto;max-width:1400px;padding:40px 20px}.hotspot-layout{align-items:center;display:flex;gap:100px;justify-content:center;position:relative}.hotspot-content{flex-shrink:0;min-height:280px;width:360px}.content-item{background:#fff;border-radius:12px;box-shadow:0 30px 60px rgba(0,0,0,.12);display:none;opacity:0;padding:35px;transform:translateY(20px) scale(.98);transition:opacity .5s ease,transform .6s cubic-bezier(.175,.885,.32,1.275)}.content-item.active{display:block;opacity:1;transform:translateY(0) scale(1)}.content-item h4{color:#111;font-size:22px;margin:0 0 15px;opacity:0;text-transform:uppercase;transform:translateY(10px)}.content-item .desc{color:#555;font-size:15px;line-height:1.7;opacity:0;transform:translateY(10px)}.content-item.active h4{animation:hotspotTextIn .5s ease .2s forwards}.content-item.active .desc{animation:hotspotTextIn .5s ease .4s forwards}@keyframes hotspotTextIn{to{opacity:1;transform:translateY(0)}}.hotspot-image{display:inline-block;position:relative}.hotspot-point{cursor:pointer;height:36px;position:absolute;transform:translate(-50%,-50%);width:36px;z-index:10}.dot{align-items:center;background:#000;border-radius:50%;display:flex;height:100%;justify-content:center;position:relative;transition:background .3s ease,transform .3s ease;width:100%;z-index:2}.dot:after,.dot:before{background:#fff;content:"";position:absolute;transition:transform .3s ease}.dot:before{height:2px;width:14px}.dot:after,.dot:before{left:50%;top:50%;transform:translate(-50%,-50%)}.dot:after{height:16px;width:2px}.hotspot-point.active .dot{background:#754c9f;box-shadow:0 0 0 10px rgba(108,60,255,.15)}.hotspot-point.active .dot:after,.hotspot-point.active .dot:before{transform:translate(-50%,-50%) rotate(45deg)}.pulse{pointer-events:none;z-index:0}.pulse,.pulse:after,.pulse:before{border-radius:50%;inset:0;position:absolute}.pulse,.pulse:after,.pulse:before{animation:rippleAnimation 3s linear infinite;border:1.5px solid rgba(108,60,255,.5);content:""}.pulse:before{animation-delay:1s}.pulse:after{animation-delay:2s}@keyframes rippleAnimation{0%{opacity:0;transform:scale(1)}10%{opacity:1}to{opacity:0;transform:scale(1.5)}}.connector-container{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:1}.connector-container .line-h,.connector-container .line-v{background:#bbb;opacity:0;pointer-events:none;position:absolute;transition:all .5s cubic-bezier(.4,0,.2,1);z-index:1}.connector-container .line-h{height:2px}.connector-container .line-v{width:2px}@media (max-width:768px){.hotspot-layout{flex-direction:column;gap:40px}.hotspot-content{min-height:auto;width:100%}.connector-container{display:none!important}.hotspot-point{height:44px;width:44px}}.content-item .desc ul{font-size:14px;font-weight:500;list-style:none!important;margin:15px 0 0;padding:0!important}.content-item .desc li{color:#333;display:block;line-height:1.5;margin-bottom:10px;padding-left:20px;position:relative}.content-item .desc li:before{background:url(/hubfs/43929624/list-setting.png) no-repeat;background-size:cover;content:"";display:block;height:12px;left:1px;position:absolute;top:7px;width:12px}.line-h-short{background:#bbb;height:2px;opacity:0;position:absolute;transition:all .5s ease}