/*
body{
    margin: 0;
    padding: 0;
    font-family: "Open Sans";
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
*/
.hot-container{
    width: 100%;
    max-width: 1200px;
    position: relative;
}

.hot-container img{
    width: 100%;
}

.hot-hotspot{
    width: 30px;
    height: 30px;
    background-color: #9acd32;
    border-radius: 50%;
    position: absolute;
    animation: wave 1.5s infinite;
    cursor: pointer;
}

.hot-bee{
    left: 48%;
    top: 32%;
    background-color: #fff;
}

.hot-focus-a{
    left: 35%;
    top: 12%;
    background-color: #1F497D;
}

.hot-focus-c{
    right: 35%;
    top: 12%;
    background-color: #FFC000;
}

.hot-focus-b{
    left: 20%;
    top: 35%;
    background-color: #552d0b;
}

.hot-focus-d{
    right: 20%;
    top: 35%;
    background-color: #aa3c23;
}

.hot-focus-e{
    left: 25%;
    bottom: 25%;
    background-color: #4F6228;
}

.hot-focus-f{
    right: 25%;
    bottom: 25%;
    background-color: #244061;
}
@keyframes wave{
    from{
        box-shadow: 0 0 0 0 #7d7d7d;
    }
    to{
        box-shadow: 0 0 0 20px #e3e3e10f;
    }
}

.hot-hotspot::before{
    content: attr(text);
    width: max-content;
    position: absolute;
    background-color: #222222dd;
    color: #fff;
    left: 50%;
    transform: translateX(-50%);
    top: 30px;
    padding: 8px 20px;
    font-size: 14px;
    border-radius: 3px;
  display: none; 
}

.hot-hotspot::after{
    content: "";
    border-color: transparent transparent #222222dd;
    border-width: 0 8px 6px;
    border-style: solid;
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
     display: none; 
}

.hot-hotspot:hover::before,
.hot-hotspot:hover::after{
    display: block;
}