body {
  font-family: "Noto Serif KR", serif;
  margin: 0;
  padding: 10pt;
  cursor: default;
}
h1 {
  font-size: 42px;
  color: #009460;
  cursor: help;
  transform: rotate(-10deg);
}
.container {
  display: flex;
  justify-content: flex-end;
  margin: 0 20px 20px 0;
}
.circle {
  width: 80px;
  height: 80px;
  background-color: #009460;
  border-radius: 50%;
  transform: rotate(-10deg);
}
ul.box {
  font-size: 42px;
  font-weight: bold;
  list-style: none;      
  padding: 0;
  margin: 0;
  text-align: center;
}
ul.box li {
  padding: 2.5pt 7pt;
  width: fit-content;
  margin: 5pt auto;  /*좌우 auto값으로, 중앙 정렬 시 주로 사용함 */
  box-sizing: border-box;
  transform: rotate(-10deg);
  background: linear-gradient(90deg, #009460,honeydew);
   -webkit-background-clip: text; 
  color: transparent; 
}
ul.box li:has(img) {
  margin: 0;
  padding: 0;
}
.image1, .image2, .image3, .image4, .image5, .image6, .image7, .image8, .image9 {
  display: none;
  position: absolute;
  top: 130px;
  left: 600px;
}
.text1, .text2, .text3, .text4, .text5, .text6, .text7, .text8, .text9 {
  cursor: help;
}
.text1:hover + li .image1 {
  display: block;
}
.text2:hover + li .image2 {
  display: block;
}
.text3:hover + li .image3 {
  display: block;
}
.text4:hover + li .image4 {
  display: block;
}
.text5:hover + li .image5 {
  display: block;
}
.text6:hover + li .image6 {
  display: block;
}
.text7:hover + li .image7 {
  display: block;
}
.text8:hover + li .image8 {
  display: block;
}
.text9:hover + li .image9 {
  display: block;
}