section.product-specification{width:100%;margin:0 auto}
.hotspot-wrap{position:relative;max-width:100%;display:flex;align-items:flex-start;gap:5%}
.hotspot-imgbox{position:relative;width:60%}
.hotspot-imgbox img{width:100%;display:block;user-select:none}
.hotspot-dot{position:absolute;width:26px;height:26px;border-radius:50%;background:#0e9fae;color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .15s ease,box-shadow .15s ease;z-index:3}
.hotspot-dot:hover,.hotspot-dot.active{transform:translate(-50%,-50%) scale(1.15);box-shadow:0 0 0 5px rgba(14,159,174,.25)}
.hotspot-specs{list-style:none;margin:0;padding:0;width:51%}
.hotspot-specs li{position:relative;display:flex;gap:14px;padding:12px 10px 12px 14px;border-radius:8px;border:2px solid transparent;cursor:pointer;scroll-margin-top:24px;transition:background .15s ease,border-color .15s ease}
.hotspot-specs li+li{border-top:1px solid #e3e8ec}
.hotspot-specs li .hotspot-icon{color:#0e9fae;flex:0 0 20px;padding-top:2px}
.hotspot-specs li .hotspot-icon-img{width:20px;height:20px;object-fit:contain;display:block}
.hotspot-specs li .hotspot-txt{font-size:14.5px;color:#1b1b1b;line-height:1.5}
.hotspot-specs li.active{background:#fff;border-color:#0e9fae;box-shadow:0 4px 14px rgba(14,159,174,.15)}
svg.hotspot-connector{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
svg.hotspot-connector path{fill:none;stroke:#32A9BC;stroke-width:1;stroke-dasharray:4 4;opacity:0;transition:opacity .15s ease}
svg.hotspot-connector path.show{opacity:1}
@media(max-width:780px){
    section.product-specification{width:90%}
    .hotspot-wrap{flex-direction:column;gap:24px;overflow:visible}
    .hotspot-imgbox,.hotspot-specs{width:100%}
    .hotspot-dot{width:28px;height:28px}
    .hotspot-dot::before{content:"";position:absolute;inset:-10px}
    .hotspot-connector{height:100%;min-height:800px}
}