.circle-wrapper{position:relative;width:min(70vw,700px);height:min(70vw,700px)}.circle-dot{position:absolute;top:49%;left:48.5%;transform-origin:center;opacity:1;content:"";width:20px;height:20px;border:1px solid white;border-radius:50%;background:#111;display:block}.dot-label{position:absolute;font-size:20px;letter-spacing:.15em;opacity:.6;white-space:nowrap;color:white}.circle-dot.right .dot-label{left:30px;text-align:left;bottom:-5px}.circle-dot.top .dot-label{left:-120px;text-align:justify;bottom:25px}.circle-dot.bottom .dot-label{left:-65px;text-align:justify;top:25px}.circle-dot.left .dot-label{right:30px;text-align:right;bottom:-5px}@media (max-width:1024px){.circle-dot.right .dot-label{left:20px;font-size:.9rem}.circle-dot.top .dot-label{left:-80px;bottom:20px;font-size:.9rem}.circle-dot.bottom .dot-label{left:-45px;top:20px;font-size:.9rem}.circle-dot.left .dot-label{right:20px;font-size:.9rem}}@media (max-width:640px){.circle-dot{position:absolute;top:48%;left:48%;transform-origin:center;opacity:1;content:"";width:12px;height:12px;border:1px solid white;border-radius:50%;background:#111;display:block}.dot-label{position:absolute;font-size:20px;letter-spacing:.15em;opacity:.6;white-space:nowrap;color:white}.circle-dot .dot-label{font-size:.75rem;max-width:120px;line-height:1.3}.circle-dot.right .dot-label{left:-40px;top:14px}.circle-dot.top .dot-label{left:-88px;bottom:16px;text-align:center}.circle-dot.bottom .dot-label{left:-54px;top:16px;text-align:center}.circle-dot.left .dot-label{left:-40px;top:14px}}