/* screen - index */

.index {
  align-items: flex-start;
  background-color: var(--cod-gray);
  display: flex;
  width: 1920px;
}

.index .overlap-group2 {
  height: 1080px;
  position: relative;
  width: 1920px;
}

.index .rectangle-3480352 {
  background-color: var(--black);
  height: 247px;
  left: 0;
  position: absolute;
  top: 833px;
  width: 1920px;
}

.index .rectangle-3480348 {
  height: 834px;
  left: 0;
  position: absolute;
  top: 0;
  width: 1920px;
}

.index .title {
  color: var(--white);
  font-family: var(--font-family-helvetica-bold);
  font-size: 184.7px;
  font-weight: 700;
  left: 33px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 850px;
  white-space: nowrap;
}

.index .overlap-group {
  align-items: flex-start;
  background-color: var(--onyx);
  border-radius: 28.86px;
  display: flex;
  height: 58px;
  justify-content: flex-end;
  left: 45px;
  min-width: 58px;
  padding: 13.3px 0.4px;
  position: absolute;
  top: 36px;
}

.index .x2do0 {
  line-height: normal;
  min-height: 31px;
  white-space: nowrap;
}

.index .span0 {
  letter-spacing: -0.88px;
}

.index .span1 {
  letter-spacing: -0.73px;
}

.index .span2 {
  letter-spacing: -0.59px;
}

.index .creator {
  color: #979797;
  font-family: var(--font-family-helvetica-regular);
  font-size: var(--font-size-m);
  font-weight: 400;
  left: 1710px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 884px;
  white-space: nowrap;
}

.index .number {
  color: #979797;
  font-family: var(--font-family-helvetica-regular);
  font-size: var(--font-size-m);
  font-weight: 400;
  left: 1558px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 881px;
  white-space: nowrap;
}

.index .portfolio {
  left: 1558px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 909px;
  white-space: nowrap;
}

.index .name {
  left: 1710px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 912px;
  white-space: nowrap;
}

.index .visual-experience-disital-survice {
  left: 1710px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 975px;
}

.index .overlap-group1 {
  height: 345px;
  left: 445px;
  position: absolute;
  top: 256px;
  width: 970px;
}

.index .hello-m-visual-c-reator {
  left: 0;
  line-height: 170px;
  position: absolute;
  text-align: center;
  top: 0;
}

.index .span1-1 {
  color: var(--white);
  font-family: var(--font-family-imperial_script);
  font-size: 177.1px;
  font-weight: 400;
  letter-spacing: -25.09px;
}

.index .span2-1 {
  color: var(--white);
  font-family: var(--font-family-imperial_script);
  font-size: 177.1px;
  font-weight: 400;
  letter-spacing: 0;
}

.index .group-1171278881 {
  align-items: flex-end;
  background-image: url(../img/image-6345277@2x.png);
  background-size: 100% 100%;
  display: flex;
  height: 160px;
  left: 576px;
  min-width: 44px;
  padding: 23.2px 10.2px;
  position: absolute;
  top: 1px;
}

.index .rectangle-3480349 {
  background-color: #202826;
  height: 6px;
  width: 10px;
}

.index .frame-1171278716 {
  -webkit-backdrop-filter: blur(14px) brightness(100%);
  align-items: center;
  backdrop-filter: blur(14px) brightness(100%);
  background-color: var(--black-2);
  border: 1.5px solid;
  border-color: var(--log-cabin);
  border-radius: 28.04px;
  cursor: pointer;
  display: flex;
  gap: 9.35px;
  height: 57px;
  justify-content: center;
  left: 870px;
  padding: 9.35px;
  position: absolute;
  top: 640px;
  transition: all 0.2s ease;
  width: 179px;
}

.index .frame-1171278716:hover {
  background-color: #222222
}

.index .place {
  color: #d9ff31;
  cursor: pointer;
  font-family: var(--font-family-pretendard-regular);
  font-size: 27.2px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  transition: all 0.2s ease;
  white-space: nowrap;
  width: fit-content;
}

.index .place:hover {
  color: #ffffff
}