.desktop-58,
.desktop-58 * {
  box-sizing: border-box;
}
.desktop-58 {
  background: #ffffff;
  height: 2501px;
  position: relative;
  overflow: hidden;
}
.logobottom-1 {
  width: 891px;
  height: 34px;
  position: absolute;
  left: 50%;
  translate: -50%;
  bottom: 69px;
  overflow: visible;
}
.frame-70 {
  display: flex;
  flex-direction: column;
  gap: 106px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 886px;
  height: 2152px;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 170px;
}
.frame-69 {
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.about {
  color: #000000;
  text-align: left;
  font-family: "Inter-Black", sans-serif;
  font-size: 24px;
  font-weight: 900;
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.frame-68 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-51 {
  flex-shrink: 0;
  width: 403px;
  height: 545px;
  position: relative;
  overflow: hidden;
}
.rectangle-3997 {
  background: #d9d9d9;
  width: 403px;
  height: 545px;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 0px;
}
.img-7989-1 {
  width: 403px;
  height: 603px;
  position: absolute;
  left: 0px;
  top: 0px;
  object-fit: cover;
  aspect-ratio: 403/603;
}
.frame-67 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 443px;
  position: relative;
}
.daname-1 {
  flex-shrink: 0;
  width: 300px;
  height: 70px;
  position: relative;
  overflow: visible;
}
.i-aim-to-bring-my-ideas-to-life-without-being-bound-by-conventions-my-work-spans-across-various-digital-media-including-games-web-applications-and-interactive-art-always-focusing-on-the-essence-rather-than-the-medium-for-me-technology-is-merely-a-tool-what-truly-matters-is-conveying-a-feeling-or-sparking-movement-in-someone-s-mind-i-value-efficiency-and-authenticity-above-all-i-don-t-showcase-work-i-m-not-proud-of-and-i-always-listen-to-feedback-without-resistance-i-stay-open-to-new-tools-and-platforms-and-i-enjoy-experimenting-and-prototyping-as-part-of-the-creative-process-at-the-heart-of-everything-i-do-is-the-drive-to-turn-imagination-into-something-real-something-that-might-surprise-delight-or-quietly-make-someone-stop-and-think {
  color: #000000;
  text-align: left;
  font-family: "Inter-Medium", sans-serif;
  font-size: 20px;
  font-weight: 500;
  position: relative;
  width: 443px;
  height: 439px;
}
.frame-72 {
  display: flex;
  flex-direction: row;
  gap: 14px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.game {
  color: #000000;
  text-align: left;
  font-family: "Inter-Medium", sans-serif;
  font-size: 20px;
  font-weight: 500;
  position: relative;
}
.application {
  color: #000000;
  text-align: left;
  font-family: "Inter-Medium", sans-serif;
  font-size: 20px;
  font-weight: 500;
  position: relative;
}
.web {
  color: #000000;
  text-align: left;
  font-family: "Inter-Medium", sans-serif;
  font-size: 20px;
  font-weight: 500;
  position: relative;
}
.interactive-art {
  color: #000000;
  text-align: left;
  font-family: "Inter-Medium", sans-serif;
  font-size: 20px;
  font-weight: 500;
  position: relative;
}
.frame-66 {
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.project {
  color: #000000;
  text-align: left;
  font-family: "Inter-Black", sans-serif;
  font-size: 24px;
  font-weight: 900;
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.frame-48 {
  display: flex;
  flex-direction: row;
  gap: 17px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  height: 416px;
  position: relative;
  box-shadow: inset 0px 0px 4px 0px rgba(255, 255, 255, 0.25);
}
.frame-54 {
  flex-shrink: 0;
  width: 284px;
  height: 414px;
  position: relative;
  overflow: hidden;
}
.frame-59 {
  width: 284px;
  height: 109px;
  position: absolute;
  left: 0px;
  top: 284px;
}
.frame-71 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 284px;
  position: absolute;
  left: 0px;
  top: 12px;
}
.name {
  color: #000000;
  text-align: left;
  font-family: "Inter-Black", sans-serif;
  font-size: 25.119171142578125px;
  font-weight: 900;
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.musam-is-a-2-d-art-project-that-explores-visual-rhythm-and-composition-through-the-lens-of-digital-minimalism-created-entirely-using {
  color: #000000;
  text-align: left;
  font-family: "Inter-Regular", sans-serif;
  font-size: 13px;
  font-weight: 400;
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
._2023 {
  color: #000000;
  text-align: left;
  font-family: "Inter-Regular", sans-serif;
  font-size: 11px;
  font-weight: 400;
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.frame-63 {
  width: 284px;
  height: 284px;
  position: absolute;
  left: 0px;
  top: 0px;
  overflow: hidden;
}
.rectangle-4003 {
  width: 283.61px;
  height: 390.24px;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 0px;
  box-shadow: inset 0px 0px 10.99px 0px rgba(255, 255, 255, 0.25);
}
.img-5408-1 {
  width: 284px;
  height: 284px;
  position: absolute;
  left: 0px;
  top: 0px;
  object-fit: cover;
  aspect-ratio: 1;
}
.rectangle-4010 {
  background: #ffffff;
  width: 284px;
  height: 284px;
  position: absolute;
  left: 0px;
  top: 0px;
  mix-blend-mode: saturation;
  transition: background-color 0.3s ease;
}

.rectangle-4010:hover {
  background-color: rgba(0, 0, 0, 0); /* 투명하게 */
}
.frame-55 {
  flex-shrink: 0;
  width: 284px;
  height: 414px;
  position: relative;
  overflow: hidden;
}
.frame-56 {
  flex-shrink: 0;
  width: 284px;
  height: 414px;
  position: relative;
  overflow: hidden;
}
.works {
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.works2 {
  color: #000000;
  text-align: left;
  font-family: "Inter-Black", sans-serif;
  font-size: 24px;
  font-weight: 900;
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.frame-592 {
  display: flex;
  flex-direction: row;
  gap: 17px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 886px;
  height: 416px;
  position: relative;
  box-shadow: inset 0px 0px 4px 0px rgba(255, 255, 255, 0.25);
}
.frame-60 {
  display: flex;
  flex-direction: row;
  gap: 17px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 886px;
  height: 416px;
  position: relative;
  box-shadow: inset 0px 0px 4px 0px rgba(255, 255, 255, 0.25);
}
.group-189 {
  width: 997px;
  height: 165px;
  position: fixed;
  left: 50%;
  translate: -50%;
  top: -19px;
}
.rectangle-4007 {
  background: #ffffff;
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: 0%;
  top: 0%;
  backdrop-filter: blur(25px);
}
.logodasvg-1 {
  width: 908px;
  height: 78.07px;
  position: absolute;
  left: 25px;
  top: 72px;
  overflow: visible;
}
.vector-230-1 {
  width: 1.6%;
  height: 9.7%;
  position: absolute;
  right: 37.51%;
  left: 60.88%;
  bottom: 32.73%;
  top: 57.58%;
  overflow: visible;
}
.frame-50 {
  display: flex;
  flex-direction: row;
  gap: 15px;
  align-items: center;
  justify-content: flex-end;
  width: 35.11%;
  height: 13.33%;
  position: absolute;
  right: 6.52%;
  left: 58.38%;
  bottom: 19.39%;
  top: 67.27%;
}
.about2 {
  color: #000000;
  text-align: left;
  font-family: "Inter-Medium", sans-serif;
  font-size: 18.204130172729492px;
  font-weight: 500;
  text-transform: uppercase;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.project2 {
  color: #000000;
  text-align: left;
  font-family: "Inter-Medium", sans-serif;
  font-size: 18.204130172729492px;
  font-weight: 500;
  text-transform: uppercase;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.works3 {
  color: #000000;
  text-align: left;
  font-family: "Inter-Medium", sans-serif;
  font-size: 18.204130172729492px;
  font-weight: 500;
  text-transform: uppercase;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.contact {
  color: #000000;
  text-align: left;
  font-family: "Inter-Medium", sans-serif;
  font-size: 18.204130172729492px;
  font-weight: 500;
  text-transform: uppercase;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}