.screen {
  background-color: #ffffff;
  width: 100%;
  min-width: 1920px;
  min-height: 1080px;
  position: relative;
}

.screen .ASSIT-MODE {
  position: absolute;
  top: 50px;
  right: 50px;
  width: 1818px;
  height: 352px;
}

.screen .AS-ARTIFICIAL {
  position: absolute;
  width: calc(100% - 102px);
  top: calc(50% - 69px);
  left: 51px;
  font-family: "Helvetica-Regular", Helvetica;
  font-weight: 400;
  color: #121212;
  font-size: 30px;
  text-align: center;
  letter-spacing: -0.60px;
  line-height: 39px;
}

.screen .IN-CO-PROCESS-WITH {
  position: absolute;
  right: 51px;
  bottom: 79px;
  width: 277px;
  font-family: "Helvetica-Regular", Helvetica;
  font-weight: 400;
  color: #121212;
  font-size: 30px;
  text-align: right;
  letter-spacing: -0.60px;
  line-height: 39px;
}

.screen .AUTONOMY-ERROR-WAIT {
  position: absolute;
  left: 52px;
  bottom: 79px;
  width: 277px;
  font-family: "Helvetica-Regular", Helvetica;
  font-weight: 400;
  color: #121212;
  font-size: 30px;
  letter-spacing: -0.60px;
  line-height: 39px;
}

.screen .frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 30px;
  position: absolute;
  top: 753px;
  left: calc(50% - 142px);
  background-color: #121212;
  border-radius: 100px;
}

.screen .text-wrapper {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Helvetica-Bold", Helvetica;
  font-weight: 700;
  color: #ffffff;
  font-size: 30px;
  text-align: center;
  letter-spacing: -0.60px;
  line-height: 39px;
  white-space: nowrap;
}

.screen .ellipse {
  position: absolute;
  top: 500px;
  left: calc(50% - 13px);
  width: 26px;
  height: 26px;
  background-color: #121212;
  border-radius: 13px;
}

.screen .HUMAN-VER {
  position: absolute;
  left: calc(50% - 594px);
  bottom: 50px;
  width: 1188px;
  height: 178px;
}

.screen .div {
  position: absolute;
  top: 665px;
  left: 50px;
  width: 1820px;
  height: 62px;
}

.screen .line-stroke {
  position: absolute;
  top: 7px;
  left: 0;
  width: 1820px;
  height: 5px;
}

.screen .text-wrapper-2 {
  position: absolute;
  width: calc(100% - 1785px);
  top: 29px;
  left: 2px;
  font-family: "D-DIN Condensed-DINCondensed-Bold", Helvetica;
  font-weight: 700;
  color: #000000;
  font-size: 30px;
  letter-spacing: -0.60px;
  line-height: normal;
  white-space: nowrap;
}

.screen .text-wrapper-3 {
  width: calc(100% - 1765px);
  left: 1765px;
  text-align: right;
  position: absolute;
  top: 29px;
  font-family: "D-DIN Condensed-DINCondensed-Bold", Helvetica;
  font-weight: 700;
  color: #000000;
  font-size: 30px;
  letter-spacing: -0.60px;
  line-height: normal;
  white-space: nowrap;
}

.screen .text-wrapper-4 {
  width: calc(100% - 1773px);
  left: 882px;
  text-align: center;
  position: absolute;
  top: 29px;
  font-family: "D-DIN Condensed-DINCondensed-Bold", Helvetica;
  font-weight: 700;
  color: #000000;
  font-size: 30px;
  letter-spacing: -0.60px;
  line-height: normal;
  white-space: nowrap;
}

.screen .text-wrapper-5 {
  width: calc(100% - 1774px);
  left: 436px;
  text-align: center;
  position: absolute;
  top: 29px;
  font-family: "D-DIN Condensed-DINCondensed-Bold", Helvetica;
  font-weight: 700;
  color: #000000;
  font-size: 30px;
  letter-spacing: -0.60px;
  line-height: normal;
  white-space: nowrap;
}

.screen .text-wrapper-6 {
  width: calc(100% - 1774px);
  left: 1324px;
  text-align: center;
  position: absolute;
  top: 29px;
  font-family: "D-DIN Condensed-DINCondensed-Bold", Helvetica;
  font-weight: 700;
  color: #000000;
  font-size: 30px;
  letter-spacing: -0.60px;
  line-height: normal;
  white-space: nowrap;
}

.screen {
  width: 100vw !important;
  height: 100vh !important;
  min-width: 0 !important;
  min-height: 0 !important;
  position: relative !important;
  background-color: #ffffff;
}

.screen .ASSIT-MODE {
  position: absolute;
  top: 4.62963vh;
  right: 2.60417vw;
  width: 94.6875vw;
  height: 32.59259vh;
}

.screen .AS-ARTIFICIAL {
  position: absolute;
  width: calc(100vw - 5.3125vw);
  top: calc(50vh - 6.38889vh);
  left: 2.65625vw;
  font-family: "Helvetica-Regular", Helvetica;
  font-weight: 400;
  color: #121212;
  font-size: 30px;
  text-align: center;
  letter-spacing: -0.60px;
  line-height: 39px;
}

.screen .IN-CO-PROCESS-WITH {
  position: absolute;
  right: 2.65625vw;
  bottom: 7.31481vh;
  width: 14.42708vw;
  font-family: "Helvetica-Regular", Helvetica;
  font-weight: 400;
  color: #121212;
  font-size: 30px;
  text-align: right;
  letter-spacing: -0.60px;
  line-height: 39px;
}

.screen .AUTONOMY-ERROR-WAIT {
  position: absolute;
  left: 2.70833vw;
  bottom: 7.31481vh;
  width: 14.42708vw;
  font-family: "Helvetica-Regular", Helvetica;
  font-weight: 400;
  color: #121212;
  font-size: 30px;
  letter-spacing: -0.60px;
  line-height: 39px;
}

.screen .frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 30px;
  position: absolute;
  top: 69.72222vh;
  left: 50vw;
  transform: translateX(-50%);
  background-color: #121212;
  border-radius: 100px;
}

.screen .text-wrapper {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Helvetica-Bold", Helvetica;
  font-weight: 700;
  color: #ffffff;
  font-size: 30px;
  text-align: center;
  letter-spacing: -0.60px;
  line-height: 39px;
  white-space: nowrap;
}

.screen .ellipse {
  position: absolute;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, 0);
  width: 1.35417vw;
  height: 2.40741vh;
  background-color: #121212;
  border-radius: 9999px;
}

.screen .HUMAN-VER {
  position: absolute;
  left: 50vw;
  transform: translateX(-50%);
  bottom: 4.62963vh;
  width: 61.875vw;
  height: 16.48148vh;
}

.screen .div {
  position: absolute;
  top: 61.57407vh;
  left: 2.60417vw;
  width: 94.79167vw;
  height: 5.74074vh;
}

.screen .line-stroke {
  position: absolute;
  top: 0.64815vh;
  left: 0;
  width: 94.79167vw;
  height: 0.46296vh;
}

.screen .text-wrapper-2,
.screen .text-wrapper-3,
.screen .text-wrapper-4,
.screen .text-wrapper-5,
.screen .text-wrapper-6 {
  position: absolute;
  top: 2.68519vh;
  font-family: "D-DIN Condensed-DINCondensed-Bold", Helvetica;
  font-weight: 700;
  color: #000000;
  font-size: 30px;
  letter-spacing: -0.60px;
  line-height: normal;
  white-space: nowrap;
}

.screen .text-wrapper-2 {
  left: 0.10417vw;
}

.screen .text-wrapper-5 {
  left: 22.70833vw;
}

.screen .text-wrapper-4 {
  left: 45.93750vw;
}

.screen .text-wrapper-6 {
  left: 68.95833vw;
}

.screen .text-wrapper-3 {
  left: 91.92708vw;
  text-align: right;
}

:root {
  --split: 50;
  --split_vw: 50vw;
}

.screen {
  position: relative;
  isolation: isolate;
  background: linear-gradient(
    90deg,
    #000 0%,
    #000 var(--split_vw),
    #fff var(--split_vw),
    #fff 100%
  ) !important;
}

.content {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.content * {
  pointer-events: auto;
}

.content--normal {
  z-index: 10;
}

.content--inv {
  z-index: 11;
  filter: invert(1) hue-rotate(180deg);
  clip-path: inset(0 calc(100% - var(--split) * 1%) 0 0);
}

.ellipse {
  position: absolute;
  top: 50vh;
  left: 0;
  transform: translate(-50%, 0);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(90deg, #fff 50%, #000 50%);
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  z-index: 20;
  cursor: grab;
}

.ellipse:active {
  cursor: grabbing;
}

.frame {
  pointer-events: none;
}

.frame.is-ready {
  pointer-events: auto;
  cursor: pointer;
}

.screen .AS-ARTIFICIAL,
.screen .IN-CO-PROCESS-WITH,
.screen .AUTONOMY-ERROR-WAIT,
.screen .text-wrapper,
.screen .text-wrapper-2,
.screen .text-wrapper-3,
.screen .text-wrapper-4,
.screen .text-wrapper-5,
.screen .text-wrapper-6 {
  font-size: clamp(14px, 1.6vw, 30px);
  line-height: 1.28;
}

.slider-bg {
  position: absolute;
  left: 2.60417vw;          
  top: 59vh;               
  width: 94.79167vw;        
  height: 9vh;            
  border-radius: 20px;
  border: 3px solid #000000;
  background: transparent;
  pointer-events: none;
}

@media (max-width: 1400px), (max-height: 800px) {
  .screen .AS-ARTIFICIAL {
    width: min(92vw, 1400px);
    left: 50% !important;
    transform: translateX(-50%);
    top: calc(50vh - 10vh) !important;
  }
  .screen .frame {
    top: 74vh !important;
    left: 50% !important;
    transform: translateX(-50%);
  }
  .screen .div,
  .screen .ellipse {
    top: 63vh !important;
  }
}

@media (max-width: 1100px), (max-height: 700px) {
  .screen {
    display: grid;
    grid-template-rows: auto auto auto auto auto;
    grid-row-gap: 3vh;
    align-content: start;
    padding: 4vh 4vw;
  }

  .screen .ASSIT-MODE,
  .screen .AS-ARTIFICIAL,
  .screen .div,
  .screen .frame,
  .screen .HUMAN-VER,
  .screen .AUTONOMY-ERROR-WAIT,
  .screen .IN-CO-PROCESS-WITH {
    position: static !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: auto;
    height: auto;
    max-width: 100%;
  }

  .screen .ASSIT-MODE {
    justify-self: end;
    max-width: 90%;
  }

  .screen .AS-ARTIFICIAL {
    justify-self: center;
    text-align: center;
  }

  .screen .div {
    position: relative !important;
    height: auto;
  }

  .screen .line-stroke {
    width: 100% !important;
    position: static;
    height: 4px;
    display: block;
    margin: 10px 0;
  }

  .screen .frame {
    justify-self: center;
  }

  .screen .HUMAN-VER {
    justify-self: center;
    max-width: min(82vw, 1188px);
  }

  .screen .text-wrapper-5,
  .screen .text-wrapper-6 {
    display: none;
  }

  .ellipse {
    position: absolute !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}

.draw-cursor {
  position: fixed;
  width: 72px;   /* 커서 SVG 사이즈에 맞게 조정 */
  height: 72px;
  background: url("img/cursor.svg") no-repeat center / contain;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
}

body {
  cursor: none;
}

.screen .ellipse {
  cursor: none !important;
}

.frame,
.frame.is-ready {
  cursor: none !important;
}

@media (max-width: 780px), (max-height: 560px) {
  .screen .text-wrapper-4 {
    display: none;
  }
}