.i {
  top: calc(50% - 109.5px);
  left: calc(50% - 202px);
  display: inline-block;
  font-weight: 800;
  width: 295px;
  height: 32px;
}
.i,
.i1,
.icon {
  position: absolute;
}
.i1 {
  top: calc(50% - 57.5px);
  left: calc(50% - 233px);
  display: inline-block;
  font-weight: 300;
  color: var(--color-darkslategray);
  width: 487px;
}
.icon {
  top: calc(50% - 112.5px);
  left: calc(50% - 254px);
  width: 42px;
  height: 38.9px;
}
.parent {
  width: 508px;
  position: relative;
  height: 225px;
}
.i2 {
  top: calc(50% - 92.5px);
  left: calc(50% - 202px);
  display: inline-block;
  font-weight: 800;
  width: 295px;
  height: 32px;
}
.i2,
.i3,
.icon1 {
  position: absolute;
}
.i3 {
  top: calc(50% - 40.5px);
  left: calc(50% - 233px);
  display: inline-block;
  font-weight: 300;
  color: var(--color-darkslategray);
  width: 487px;
}
.icon1 {
  top: calc(50% - 95.5px);
  left: calc(50% - 254px);
  width: 42px;
  height: 38.9px;
}
.group {
  width: 508px;
  position: relative;
  height: 191px;
}
.autolayer3 {
  position: absolute;
  width: 100%;
  top: calc(50% - 206.5px);
  right: 0;
  left: 0;
  height: 654px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--padding-124xl);
  box-sizing: border-box;
  gap: var(--gap-28xl);
}
.game-introduction {
  position: absolute;
  top: calc(50% - 312.5px);
  left: calc(50% - 320.5px);
  font-size: var(--font-size-26xl);
  display: inline-block;
  font-weight: 900;
  text-align: center;
  width: 641px;
  height: 55px;
}
.svgrepo-iconcarrier {
  position: absolute;
  top: calc(50% - 379.5px);
  left: calc(50% - 36.5px);
  width: 74px;
  height: 67px;
}
.whatisdagame {
  position: absolute;
  width: 100%;
  top: calc(50% - 1449px);
  right: 0;
  left: 0;
  height: 895px;
  overflow: hidden;
  text-align: left;
  font-size: var(--font-size-9xl);
}
.in-game-screenshot {
  position: absolute;
  top: calc(50% - 453px);
  left: calc(50% - 320.5px);
  display: inline-block;
  font-weight: 900;
  width: 641px;
  height: 55px;
}
.frame-icon {
  position: absolute;
  top: calc(50% - 522px);
  left: calc(50% - 41.5px);
  width: 83px;
  height: 79px;
  overflow: hidden;
}
.image-1-icon,
.image-2-icon {
  width: 523px;
  position: relative;
  border-radius: var(--br-17xl);
  height: 323px;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.image-2-icon {
  width: 520px;
}
.autolayer2,
.inganescreenshot {
  position: absolute;
  width: 100%;
  right: 0;
  left: 0;
}
.autolayer2 {
  top: calc(50% - 323px);
  height: 845px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--padding-130xl);
  box-sizing: border-box;
  gap: var(--gap-30xl);
}
.inganescreenshot {
  top: calc(50% - 467px);
  height: 1044px;
  overflow: hidden;
}
.developers {
  position: absolute;
  top: calc(50% - 404.5px);
  left: calc(50% - 320.5px);
  display: inline-block;
  font-weight: 900;
  width: 641px;
  height: 55px;
}
.tools-and-utensils-programmer-icon {
  position: absolute;
  top: calc(50% - 471.5px);
  left: calc(50% - 38.5px);
  width: 74px;
  height: 67px;
  overflow: hidden;
}
.div1,
.icon2 {
  position: absolute;
}
.div1 {
  top: calc(50% - 71.5px);
  left: calc(50% - 235px);
  box-shadow: 0 4px 18.8px 7px rgba(0, 0, 0, 0.25);
  border-radius: var(--br-24xl);
  background-color: var(--color-whitesmoke);
  width: 470px;
  height: 143px;
}
.icon2 {
  top: calc(50% - 57.5px);
  left: calc(50% - 219px);
  border-radius: var(--br-17xl);
  width: 116px;
  height: 113px;
  object-fit: cover;
}
.i4,
.i5,
.i6 {
  position: absolute;
  top: calc(50% - 55.5px);
  left: calc(50% - 82px);
  display: inline-block;
  font-weight: 800;
  width: 289px;
}
.i5,
.i6 {
  top: calc(50% - 21.5px);
  left: calc(50% - 73px);
  font-size: var(--font-size-xl);
  font-weight: 500;
  width: 145px;
  height: 20px;
}
.i6 {
  top: calc(50% + 4.5px);
  font-size: var(--font-size-base);
  font-weight: 300;
  width: 259px;
  height: 41px;
}
.div {
  width: 470px;
  position: relative;
  height: 143px;
  transition: scale 0.1s ease;
}

.div:hover {
  scale: 1.1;
}

.div:active {
  scale: 1.3;
}

.i7 {
  top: calc(50% - 55.5px);
  left: calc(50% - 82px);
  display: inline-block;
  font-weight: 800;
  width: 289px;
  height: 40px;
}
.autolayer,
.i7,
.i9 {
  position: absolute;
}
.i9 {
  top: calc(50% + 4.5px);
  left: calc(50% - 73px);
  font-size: var(--font-size-base);
  display: inline-block;
  font-weight: 300;
  width: 203px;
  height: 41px;
}
.autolayer {
  width: 100%;
  top: calc(50% - 317.5px);
  right: 0;
  left: 0;
  height: 789px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  padding: var(--padding-11xs) var(--padding-130xl);
  box-sizing: border-box;
  gap: var(--gap-42xl);
  text-align: left;
  font-size: var(--font-size-13xl);
}
.devs {
  top: calc(50% + 577px);
  height: 967px;
}
.devs,
.end,
.gamebackground-icon {
  position: absolute;
  width: 100%;
  right: 0;
  left: 0;
  overflow: hidden;
}
.end {
  bottom: 0;
  background-color: var(--color-darkgray);
  height: 365px;
}
.gamebackground-icon {
  top: calc(50% - 323px);
  max-width: 100%;
  height: 612px;
  object-fit: cover;
}
.gameicon {
  position: absolute;
  top: calc(50% - 276.9px);
  left: calc(50% - 719.5px);
  width: 1440px;
  height: 310.8px;
  opacity: 0;
  transform: scale(0);
  transition: transform 3s ease,opacity 3s ease 1s; /* transition duration corrected */
}

.gameicon.show {
  transform: scale(1);
  opacity: 1;
}


.i16,
.i17 {
  position: absolute;
  font-weight: 800;
  
}
.i16 {
  top: calc(50% + 34px);
  left: calc(50% - 719.5px);
  display: inline-block;
  width: 1440px;
  text-shadow: 0 4px 4.3px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 3s ease 1.5s;
}

.i16.show{
  opacity: 1;
}

.i17 {
  top: calc(50% + 142px);
  left: calc(50% - 46.5px);
  font-size: var(--font-size-mini);
  text-shadow: 0 4px 4.7px rgba(0, 0, 0, 0.71);
  opacity: 0;
  transition: opacity 3s ease 2s;
}

.image-2-icon:hover {
  transform: scale( 1.05, 1.05 );
}
.image-2-icon:active {
  transform: scale( 1.2, 1.2 );
}
.image-1-icon:hover {
  transform: scale( 1.05, 1.05 );
}
.image-1-icon:active {
  transform: scale( 1.2, 1.2 );
}

.d-1-icon:hover {
  transform: scale( 1.1, 1.1 )
}

.i17.show{
  opacity: 1;
}

.download-on-the-app-store-badg-icon,
.google-play-store-badge-en-1-icon {
  position: absolute;
  top: calc(50% - 26.65px);
  left: calc(50% - 218px);
  width: 180px;
  height: 53.3px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.5s ease 3s, transform 0.3s ease; /* opacity와 transform 속성에 대해 각각 transition 속성 적용 */
}


.google-play-store-badge-en-1-icon:hover,
.download-on-the-app-store-badg-icon:hover {
  transform: scale(1.1);
}

.google-play-store-badge-en-1-icon.show,
.download-on-the-app-store-badg-icon.show {
  opacity: 1;
}


.download-on-the-app-store-badg-icon {
  left: calc(50% + 38px);
}
.download {
  position: absolute;
  top: calc(50% + 169px);
  left: calc(50% - 217.5px);
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
  width: 436px;
  height: 53.3px;
}
.main1 {
  position: absolute;
  width: 100%;
  top: calc(50% - 2215px);
  right: 0;
  left: 0;
  background-color: var(--color-white);
  height: 766px;
  font-size: 96px;
  color: var(--color-white);
}
.d-1-icon {
  position: absolute;
  top: 16px;
  left: calc(50% - 98.5px);
  width: 198px;
  height: 45px;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.1s ease;
}
.meun-icon {
  position: absolute;
  top: calc(50% - 27.5px);
  left: 24px;
  width: 53px;
  height: 55px;
  overflow: hidden;
}
.head,
.main {
  width: 100%;
  background-color: var(--color-white);
  overflow: hidden;
}
.head {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  box-shadow: 0 4px 50px rgba(0, 0, 0, 0.25);
  height: 77px;
}
.main {
  position: relative;
  height: 4584px;
  text-align: center;
  font-size: var(--font-size-26xl);
  color: var(--color-black);
  font-family: var(--font-inter);
}