body, ul{
  padding: 0;
  margin: 0;
}
li{
  list-style: none;
}

#circle{
  width: 262px;
  height: 262px;
  transition: all ease 0.5s;
}

#circle.circle1{
  background-image: url(../images/circle1.png);
}
#circle.circle2{
  background-image: url(../images/circle2.png);
}
#circle.circle3{
  background-image: url(../images/circle3.png);
}
#circle.circle4{
  background-image: url(../images/circle4.png);
}
#circle.circle5{
  background-image: url(../images/circle5.png);
}

.circle_wrapper{
  position: relative;
  margin-top: 80px;
  left: 50%;
  margin-left: -131px;
  width: 262px;
  height: 262px;
  background: url(../images/island.png) no-repeat center center;
}
.btn_key{
  position: absolute;
  top: 0;
  left: 0;
  width: 262px;
  height: 262px;
}
.key_button{
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.key_button a{
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all ease 0.3s;
  cursor: pointer;
}
.key_button a img{
  width: 100%;
  height: 100%;
}
.key_button a:hover{
  transform: scale(1.2);
}
#key1{ top: -60px; left: 112px; }
#key2{ top: 50px; right: -55px; }
#key3{ top: 255px; right: 0px; }
#key4{ top: 255px; left: 0px; }
#key5{ top: 50px; left: -55px; }

#key1 a{background-color: #0a8375;}
#key2 a{background-color: #ae194c;}
#key3 a{background-color: #3c5eaa;}
#key4 a{background-color: #d2ae0b;}
#key5 a{background-color: #ab529b;}


#message{
  width: 700px;
  margin: 90px auto;
  position: relative;
  height:200px;
}
.msg1{
  border-color: #0a8375;
  color: #0a8375;
}
.msg2{
  border-color: #ae194c;
  color: #ae194c;
}
.msg3{
  border-color: #3c5eaa;
  color: #3c5eaa;
}
.msg4{
  border-color: #d2ae0b;
  color: #d2ae0b;
}
.msg5{
  border-color: #ab529b;
  color: #ab529b;
}
.msg1 p{
  border-color: #0a8375;
  color: #0a8375;
  margin-bottom:10px;
}
.msg2 p{
  border-color: #ae194c;
  color: #ae194c;
  margin-bottom:10px;
}
.msg3 p{
  border-color: #3c5eaa;
  color: #3c5eaa;
  margin-bottom:10px;
}
.msg4 p{
  border-color: #d2ae0b;
  color: #d2ae0b;
 
  margin-bottom:10px;
}
.msg5 p{
  border-color: #ab529b;
  color: #ab529b;
  margin-bottom:10px;
}

.msg1 h2{
  font-size:23px;
  color: #0a8375;
}
.msg2 h2{
  font-size:23px;
  color: #ae194c;
}
.msg3 h2{
  font-size:23px;
  color: #3c5eaa;
}
.msg4 h2{
  font-size:23px;
  color: #d2ae0b;
}
.msg5 h2{
  font-size:23px;
  color: #ab529b;
}

.msg_inner{
  position: absolute;
  width: 630px;
  top: 0;
  left: 0;
  opacity: 0;
  padding: 20px 40px;
  border-radius: 20px;
  border-width: 3px;
  border-style: solid;
  transition: all ease 0.3s;
}
.msg_inner.active{
  opacity: 1;
}