* { box-sizing: border-box; }
/* 			img { border:1px solid #c00; } */
body { margin:0; }
.wrap { display: flex; justify-content:center; align-items: center; height:100vh; width:100vw; background:#f1f1f1; padding:20px; }
.inside { width:90%; max-width:1000px; position:relative; }
img { display:block; width:100%; height:auto; }
svg { display:block; width:100%; height:100%; }
.abs { position:absolute; top:0; left:0; width:100%; height:100%; }
.wrap-surface { position:relative; width:100%; max-width:1200px; }
.highlight-box svg .highlight { fill: #f00; opacity: 0; transition: all ease 100ms; }
.highlight-box svg .window { fill:#00f; }
.highlight-box svg g.on .highlight { opacity:0.5; }
.click-box svg g * { fill:transparent; opacity: 0; cursor: pointer; }