.canvas{position: absolute; width:100%; left: 0; top: 0; height: 100%; z-index: 0;}
.map{
	 margin:auto;  width:70%; margin-top:10px;
}
.map img{ width:100%;opacity: 0.75;}
   .mapActived1 {
        position: absolute;
        top: 2.0%;
        left: 37%;
        width:120px;
        height: 100px;border-radius: 90px;
        cursor: pointer; 
    }
    .mapContent1 {
        position: absolute; padding-top:20px;
        height: 250px;
        width: 250px;
        top: 5%;
        left: 50%;
        background: rgba(0, 0, 0, .5);border-radius:10px;
    }
	
   .mapActived2 {
        position: absolute;
        top: 4.3%;
        left: 27%;
        width:100px;
        height: 80px;border-radius: 90px;
        cursor: pointer; 
    }
    .mapContent2 {
        position: absolute; padding-top:20px;
        height: 250px;
        width: 250px;
        top: 5%;
        left: 38%;
        background: rgba(0, 0, 0, .5);border-radius:10px;
    }
	
   .mapActived3 {
        position: absolute;
        top: 15%;
        left: 30%;
        width:120px;
        height: 100px;border-radius: 90px;
        cursor: pointer; 
    }
    .mapContent3 {
        position: absolute; padding-top:20px;
        height: 250px;
        width: 250px;
        top: 15%;
        left: 45%;
        background: rgba(0, 0, 0, .5);border-radius:10px;
    }
	
   .mapActived4 {
        position: absolute;
        top: 13%;
        left: 40%;
        width:120px;
        height: 70px;border-radius: 90px;
        cursor: pointer; 
    }
    .mapContent4 {
        position: absolute; padding-top:20px;
        height: 250px;
        width: 250px;
        top: 14%;
        left: 52%;
        background: rgba(0, 0, 0, .5);border-radius:10px;
    }
	
   .mapActived5 {
        position: absolute;
        top: 25%;
        left: 24%;
        width:110px;
        height: 80px;border-radius: 90px;
        cursor: pointer; 
    }
    .mapContent5 {
        position: absolute; padding-top:20px;
        height: 250px;
        width: 250px;
        top: 27%;
        left: 36%;
        background: rgba(0, 0, 0, .5);border-radius:10px;
    }
	
   .mapActived6 {
        position: absolute;
        top: 27%;
        left: 34%;
        width:100px;
        height: 90px;border-radius: 80px;
        cursor: pointer; 
    }
    .mapContent6 {
        position: absolute; padding-top:20px;
        height: 250px;
        width: 250px;
        top: 27%;
        left: 46%;
        background: rgba(0, 0, 0, .5);border-radius:10px;
    }
	
   .mapActived7 {
        position: absolute;
        top: 21%;
        left: 45%;
        width:110px;
        height: 50px;border-radius: 90px;
        cursor: pointer; 
    }
    .mapContent7 {
        position: absolute; padding-top:20px;
        height: 250px;
        width: 250px;
        top: 22%;
        left: 55%;
        background: rgba(0, 0, 0, .5);border-radius:10px;
    }
	
   .mapActived8 {
        position: absolute;
        top: 27%;
        left: 49%;
        width:44px;
        height: 30px;border-radius: 30px;
        cursor: pointer; 
    }
    .mapContent8 {
        position: absolute; padding-top:20px;
        height: 250px;
        width: 250px;
        top: 28%;
        left: 54%;
        background: rgba(0, 0, 0, .5);border-radius:10px;
    }
	
   .mapActived9 {
        position: absolute;
        top: 24%;
        left: 55%;
        width:45px;
        height: 100px;border-radius: 90px;
        cursor: pointer; 
    }
    .mapContent9 {
        position: absolute; padding-top:20px;
        height: 250px;
        width: 250px;
        top: 24%;
        left: 60%;
        background: rgba(0, 0, 0, .5);border-radius:10px;
    }
	
   .mapActived10 {
        position: absolute;
        top: 32%;
        left: 48%;
        width:50px;
        height: 60px;border-radius: 90px;
        cursor: pointer; 
    }
    .mapContent10 {
        position: absolute; padding-top:20px;
        height: 250px;
        width: 250px;
        top: 32%;
        left: 53%;
        background: rgba(0, 0, 0, .5);border-radius:10px;
    }
	
   .mapActived11 {
        position: absolute;
        top: 33%;
        left: 20%;
        width:110px;
        height: 90px;border-radius: 60px;
        cursor: pointer; 
    }
    .mapContent11 {
        position: absolute; padding-top:20px;
        height: 250px;
        width: 250px;
        top: 34%;
        left: 33%;
        background: rgba(0, 0, 0, .5);border-radius:10px;
    }
	
   .mapActived12 {
        position: absolute;
        top: 37%;
        left: 34%;
        width:120px;
        height: 90px;border-radius: 90px;
        cursor: pointer; 
    }
    .mapContent12 {
        position: absolute; padding-top:20px;
        height: 250px;
        width: 250px;
        top: 38%;
        left: 48%;
        background: rgba(0, 0, 0, .5);border-radius:10px;
    }
	
   .mapActived13 {
        position: absolute;
        top: 41%;
        left: 51%;
        width:60px;
        height: 80px;border-radius: 90px;
        cursor: pointer; 
    }
    .mapContent13 {
        position: absolute; padding-top:20px;
        height: 250px;
        width: 250px;
        top: 42%;
        left: 59%;
        background: rgba(0, 0, 0, .5);border-radius:10px;
    }
	
   .mapActived14 {
        position: absolute;
        top: 30%;
        left: 58%;
        width:80px;
        height: 120px;border-radius: 90px;
        cursor: pointer; 
    }
    .mapContent14 {
        position: absolute; padding-top:20px;
        height: 250px;
        width: 250px;
        top: 33%;
        left: 67%;
        background: rgba(0, 0, 0, .5);border-radius:10px;
    }
	
   .mapActived15 {
        position: absolute;
        top: 27%;
        left: 66%;
        width:130px;
        height: 80px;border-radius: 90px;
        cursor: pointer; 
    }
    .mapContent15 {
        position: absolute; padding-top:20px;
        height: 250px;
        width: 250px;
        top: 27%;
        left: 37%;
        background: rgba(0, 0, 0, .5);border-radius:10px;
    }
	
   .mapActived16 {
        position: absolute;
        top: 56%;
        left: 33%;
        width:80px;
        height: 60px;border-radius: 90px;
        cursor: pointer; 
    }
    .mapContent16 {
        position: absolute; padding-top:20px;
        height: 250px;
        width: 250px;
        top: 56%;
        left: 43%;
        background: rgba(0, 0, 0, .5);border-radius:10px;
    }
	
   .mapActived17 {
        position: absolute;
        top: 51%;
        left: 39%;
        width:60px;
        height: 80px;border-radius: 90px;
        cursor: pointer; 
    }
    .mapContent17 {
        position: absolute; padding-top:20px;
        height: 250px;
        width: 250px;
        top: 52%;
        left: 46%;
        background: rgba(0, 0, 0, .5);border-radius:10px;
    }
	
   .mapActived18 {
        position: absolute;
        top: 47%;
        left: 45%;
        width:80px;
        height: 70px;border-radius: 90px;
        cursor: pointer; 
    }
    .mapContent18 {
        position: absolute; padding-top:20px;
        height: 250px;
        width: 250px;
        top: 48%;
        left: 53%;
        background: rgba(0, 0, 0, .5);border-radius:10px;
    }
	
   .mapActived19 {
        position: absolute;
        top: 52%;
        left: 50%;
        width:110px;
        height: 70px;border-radius: 90px;
        cursor: pointer; 
    }
    .mapContent19 {
        position: absolute; padding-top:20px;
        height: 250px;
        width: 250px;
        top: 50%;
        left: 60%;
        background: rgba(0, 0, 0, .5);border-radius:10px;
    }
	
   .mapActived20 {
        position: absolute;
        top: 61%;
        left: 41%;
        width:100px;
        height: 70px;border-radius: 90px;
        cursor: pointer; 
    }
    .mapContent20 {
        position: absolute; padding-top:20px;
        height: 250px;
        width: 250px;
        top: 61%;
        left: 52%;
        background: rgba(0, 0, 0, .5);border-radius:10px;
    }
	
   .mapActived21 {
        position: absolute;
        top: 61%;
        left: 52%;
        width:70px;
        height: 65px;border-radius: 90px;
        cursor: pointer; 
    }
    .mapContent21 {
        position: absolute; padding-top:20px;
        height: 250px;
        width: 250px;
        top: 62%;
        left: 59%;
        background: rgba(0, 0, 0, .5);border-radius:10px;
    }
	
   .mapActived22 {
        position: absolute;
        top: 69%;
        left: 42%;
        width:60px;
        height: 100px;border-radius: 90px;
        cursor: pointer; 
    }
    .mapContent22 {
        position: absolute; padding-top:20px;
        height: 250px;
        width: 250px;
        top: 42%;
        left: 49%;
        background: rgba(0, 0, 0, .5);border-radius:10px;
    }
	
   .mapActived23 {
        position: absolute;
        top: 70%;
        left: 49%;
        width:60px;
        height: 140px;border-radius: 90px;
        cursor: pointer; 
    }
    .mapContent23 {
        position: absolute; padding-top:20px;
        height: 250px;
        width: 250px;
        top: 55%;
        left: 56%;
        background: rgba(0, 0, 0, .5);border-radius:10px;
    }
	
   .mapActived24 {
        position: absolute;
        top: 44%;
        left: 25%;
        width:120px;
        height: 100px;border-radius: 90px;
        cursor: pointer; 
    }
    .mapContent24 {
        position: absolute; padding-top:20px;
        height: 250px;
        width: 250px;
        top: 44%;
        left: 38%;
        background: rgba(0, 0, 0, .5);border-radius:10px;
    }
	
   .copyright{color:#FFF; font-size:16px; margin-top:60px; text-align:center}

    .mapContentFont {
        width: 85%;
        margin-left: 12%;
        font-size:14px;
        color: #0efcff;
        letter-spacing: .05vw;
        margin-bottom: .3vw;
    }
    .mapContentFonth1 {
        width: 85%;
        margin-left: 12%;
        font-size: 18px; font-weight:bold;
        color: #0efcff;
        letter-spacing: .05vw;
        margin-bottom: .3vw;
    }

    .mapContentFont:nth-child(1) {
        margin-top: .6vw;
    }

    .mapContentFont span {
        color: white;
    }