@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* =========================================
   Typography Font-Face
   ========================================= */
@font-face {
  font-family: "OgRenaissanceSecret";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2312-1@1.1/OG_Renaissance_Secret-Rg.woff2") format("woff2");
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2") format("woff2");
  font-weight: 100;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2") format("woff2");
  font-weight: 200;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}
/* =========================================
   Typography 변수

   css변수와 scss 함수를 같이 쓰려면, scss변수에 rem()을 저장한뒤
   css 변수로 값 지정하기. 이때 샾{$변수} 로 저장해줘야지만 정상적으로 인식함
   ========================================= */
:root {
  --font-size-big-title: 9.6rem;
  --font-size-title: 4.8rem;
  --font-size-body: 1.6rem;
  --font-size-caption: 1.4rem;
}

@media (max-width: 768px) {
  :root {
    --font-size-big-title: 6.4rem;
    --font-size-title: 2.8rem;
  }
}
/* =========================================
   Typography Utility Classes
   ========================================= */
body {
  font-family: "OgRenaissanceSecret";
  color: #fff;
  line-height: 1.4;
}

.font-preten {
  font-family: "Pretendard";
}

.b-title {
  font-size: var(--font-size-big-title);
}

.title {
  font-size: var(--font-size-title);
}

.body {
  font-size: var(--font-size-body);
}

.caption {
  font-size: var(--font-size-caption);
  color: #8b8b8b !important;
}

html {
  font-size: 62.5%;
  width: 100%;
  min-width: 37.5rem;
  height: 100vh;
  min-height: 81.2rem;
}

body {
  background-color: #2b2b2e;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: polygon(0 0, 0 0, 0 0);
  white-space: nowrap; /* 줄바꿈 강제 금지 */
}

@media (max-width: 768px) {
  html {
    font-size: 50%;
  }
}
.input-error {
  animation: errorShake 0.3s;
}

@keyframes errorShake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-8px);
  }
  50% {
    transform: translateX(8px);
  }
  75% {
    transform: translateX(-8px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes rollingBanner {
  from {
    transform: perspective(500px) rotateY(0deg);
  }
  to {
    transform: perspective(500px) rotateY(360deg);
  }
}
input[type=text] {
  background-color: transparent;
  border: none;
  background: none;
  outline: none;
  box-shadow: none;
}

.input-wrap {
  position: relative;
  width: 30.3rem;
  height: 13.4rem;
}
.input-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/images/bg_button.svg") no-repeat center;
  background-size: contain;
  pointer-events: none;
}
.input-wrap .type01 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  border: none;
  background: none;
  outline: none;
  padding-left: 5rem;
  font-family: "OgRenaissanceSecret";
  color: #fff;
}

.btn {
  /* 초기화 css */
  background-color: transparent;
  border: none;
  /* 공통 스타일*/
  min-width: 12rem;
  min-height: 4.8rem;
  font-size: 2rem;
  color: #fff;
  /* 스타일링 */
}
.btn__type01 {
  width: 30.3rem;
  height: 13.4rem;
  background: url("/images/bg_button.svg");
  background-size: contain;
  font-family: "OgRenaissanceSecret";
}
.btn__type02 {
  background-color: #212124;
  border-radius: 0.4rem;
  font-family: "Pretendard";
  font-size: 1.8rem;
}
.btn__type02:hover {
  background-color: #252529;
}
.btn__type03 {
  display: inline-block;
  position: relative;
  min-width: unset;
  min-height: 3.2rem;
  padding: 0 1.6rem 0 3.2rem;
  font-family: "Pretendard";
  font-size: 1.6rem;
  color: #8b8b8b;
}
.btn__type03:hover {
  color: #fff;
}
.btn__type03:hover::after {
  content: "";
  display: block;
  width: 2.4rem;
  aspect-ratio: 1/1;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: url("/images/ic_select_arrow.svg") no-repeat center;
  background-size: contain;
}
.btn__type04 {
  border-radius: 0.4rem;
  font-family: "Pretendard";
  background-color: transparent;
  border: 1px solid #5a5a5d;
  color: #e4e4e5;
  font-size: 1.8rem;
}
.btn__type04:hover {
  border-radius: 4px;
  border: 1px solid #7a7a7d;
  background: rgba(255, 255, 255, 0.01);
}

.get-quest button {
  margin-top: 1rem;
  margin-right: 1rem;
}

.chat-wrapper {
  position: fixed;
  left: 50%;
  bottom: 2.4rem;
  transform: translateX(-50%);
  width: calc(100% - 4.8rem);
}
.chat-wrapper .chat-character {
  top: -75%;
  left: 1rem;
  position: absolute;
  content: "";
  display: block;
  width: 15.6rem;
  height: 18rem;
  background-color: gray; /* 기본 색상 */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: -1;
}
.chat-wrapper .chat-room {
  min-height: 13rem;
  padding: 2.4rem;
  background-color: #212124;
  border: 0.4rem solid #5e5e5e;
  border-radius: 1.6rem;
  z-index: 10;
}
.chat-wrapper .chat-room__name {
  padding-bottom: 1.6rem;
  font-size: 2rem;
}
.chat-wrapper .chat-room__msg {
  font-family: "Pretendard";
  font-size: 1.6rem;
  white-space: pre-wrap;
}
.chat-wrapper .flex-row {
  display: flex;
  gap: 0.4rem;
}

.option-list {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  width: 100%;
  max-width: 34rem;
  padding: 1.2rem 0;
  font-family: "Pretendard";
}

.option {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3rem;
  font-size: 1.6rem;
  color: #fff;
}

.option__label {
  width: 5rem;
  text-align: right;
}

.option__arrow {
  width: 3.2rem;
  height: 3.2rem;
  background: transparent;
  border: none;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.option__arrow--left {
  background-image: url("/images/ic_select_arrow.svg");
  transform: rotate(180deg);
}

.option__arrow--right {
  background-image: url("/images/ic_select_arrow.svg");
}

.option__value {
  position: relative;
  width: 18rem;
  height: 3rem;
  background-color: #212124;
  border-radius: 0.6rem;
  padding: 1.2rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.option__track {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  width: 54rem;
}

.option__item {
  width: 18rem;
  text-align: center;
}

.modal-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  overflow: hidden;
}
.modal-wrap.hidden {
  display: none;
}
.modal-wrap .modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 32rem;
  width: 50vw;
  max-width: 72rem;
  padding: 2.4rem;
  border-radius: 1.6rem;
  background-color: #2b2b2e;
}
.modal-wrap .modal__content__title {
  padding-bottom: 1.2rem;
  font-size: 2.4rem;
}
.modal-wrap .modal__content__text {
  padding-bottom: 1.2rem;
  font-family: "Pretendard";
}
.modal-wrap .modal__content__highlight {
  padding: 1.6rem;
  margin-bottom: 1.6rem;
  border-radius: 0.8rem;
  background-color: #39393c;
  font-family: "Pretendard";
  text-align: center;
}
.modal-wrap .modal__btnGroup {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
}
.modal-wrap .modal.type2 {
  min-width: unset;
  width: 100%;
  max-width: unset;
  background-color: transparent;
}
.modal-wrap .modal.type2 .modal__contetnt__title {
  color: #ffffff;
  font-size: 9.6rem;
  text-align: center;
}

.character-wrap {
  display: flex;
  justify-content: center;
  min-width: 42rem;
  padding: 3rem;
  margin-top: 4rem;
  background-color: #212124;
  border-radius: 1.6rem;
}
.character-wrap .character-box {
  position: relative;
  width: 22rem;
  height: 25rem;
}
.character-wrap .character-box__item {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.character-wrap .character-box__item.frame {
  z-index: 5;
  top: 50%;
  transform: translate(-50%, -50%);
  background-image: url("/images/character/frame.png");
}
.character-wrap .character-box__item#brow {
  z-index: 4;
  left: 50%;
  top: 5rem;
  transform: translateX(-50%);
  width: 11rem;
  height: 3rem;
}
.character-wrap .character-box__item#brow.type1 {
  background-image: url("/images/character/brow1.png");
}
.character-wrap .character-box__item#brow.type2 {
  background-image: url("/images/character/brow2.png");
}
.character-wrap .character-box__item#brow.type3 {
  top: 4rem;
  background-image: url("/images/character/brow3.png");
}
.character-wrap .character-box__item#eye {
  z-index: 3;
  top: 6.5rem;
  width: 8rem;
  height: 2.2rem;
}
.character-wrap .character-box__item#eye.type1 {
  background-image: url("/images/character/eye1.png");
}
.character-wrap .character-box__item#eye.type2 {
  background-image: url("/images/character/eye2.png");
}
.character-wrap .character-box__item#eye.type3 {
  background-image: url("/images/character/eye3.png");
}
.character-wrap .character-box__item#mouse {
  z-index: 2;
  top: 8rem;
  width: 4rem;
  height: 1.5rem;
}
.character-wrap .character-box__item#mouse.type1 {
  background-image: url("/images/character/mouse1.png");
}
.character-wrap .character-box__item#mouse.type2 {
  background-image: url("/images/character/mouse2.png");
}
.character-wrap .character-box__item#mouse.type3 {
  background-image: url("/images/character/mouse3.png");
}
.character-wrap .character-box__item#body {
  z-index: 1;
  top: 50%;
  transform: translate(-50%, -50%);
}
.character-wrap .character-box__item#body.type1 {
  background-image: url("/images/character/body1.png");
}
.character-wrap .character-box__item#body.type2 {
  background-image: url("/images/character/body2.png");
}
.character-wrap .character-box__item#body.type3 {
  background-image: url("/images/character/body3.png");
}

.guide {
  padding: 4rem;
}
.guide .wrapper {
  padding: 4rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 2.4rem;
  margin-bottom: 4rem;
}
.guide h2 {
  padding-bottom: 4rem;
  font-size: 3.2rem;
}
.guide .chat-container {
  position: relative;
  min-height: 30rem;
}
.guide .chat-container .chat-wrapper {
  position: absolute;
}

.index {
  background: url("/images/index_bg_pc.png") no-repeat center;
  background-size: cover;
}
.index .modal {
  position: relative;
  width: 100%;
  min-width: 37.5rem;
  height: 100vh;
  min-height: 81.2rem;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1;
}
.index h1 {
  padding-top: 20vh;
  text-align: center;
}
.index h1 p {
  position: relative;
  display: inline-block;
  padding-left: 32rem;
}
.index h1 p:after {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  content: "";
  display: block;
  width: 30.8rem;
  height: 9.4rem;
  background: url("/images/index_text.svg") no-repeat center;
  background-size: contain;
}
.index .bottom-wrap {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;
  margin-top: 4rem;
}

@media (max-width: 768px) {
  .index {
    background: url("/images/index_bg_moblie.png") no-repeat center;
    background-size: cover;
  }
  .index h1 p {
    padding-left: 21rem;
  }
  .index h1 p::after {
    width: 20rem;
    height: 70rem;
  }
  .index .bottom-wrap {
    position: absolute;
    left: 50%;
    bottom: 8rem;
    transform: translateX(-50%);
  }
}
.hidden {
  display: none !important;
}

.show {
  display: block;
}

.select-character section {
  display: flex;
  flex-flow: column;
  justify-content: center;
  gap: 2.4rem;
  align-items: center;
  min-width: 42rem;
  max-width: 50rem;
  margin: 20vh auto 0;
  text-align: center;
}
.select-character .user-name {
  display: flex;
}
.select-character .user-name__info {
  margin-top: -1.6rem;
  color: #8b8b8b;
}
.select-character .user-name__info.error {
  color: #ff4e4e !important;
}
.select-character .user-name .btn__type02 {
  max-width: 12rem;
}
.select-character .user-character__choice {
  display: flex;
  justify-content: center;
}

.get-quest {
  background: url("/images/bg_room.png") no-repeat center bottom/cover;
}
.get-quest .chat-character {
  display: none;
}
.get-quest .character-wrap {
  min-width: unset;
  padding: 0;
  background-color: transparent;
  margin: 0;
}

.select-door .door-wrap {
  width: 100%;
  height: 100vh;
  position: relative;
}
.select-door .door-wrap .door-list {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  gap: 20rem;
}
.select-door .door-wrap .door-list__item {
  width: 25rem;
  aspect-ratio: 2/3;
  transition: all 0.3s ease;
}
.select-door .door-wrap .door-list__item:hover {
  transform: scale(1.2);
}
.select-door .door-wrap .door-list__item:hover::after {
  position: absolute;
  width: 100%;
  top: -6rem;
  text-align: center;
  font-size: 3.2rem;
}
.select-door .door-wrap .door-list__item[data-index=developer-room] {
  background: url("/images/doors/개발스터_door.png") no-repeat center/cover;
}
.select-door .door-wrap .door-list__item[data-index=developer-room]:hover {
  background: url("/images/doors/개발스터_door_open.png") no-repeat center/cover;
}
.select-door .door-wrap .door-list__item[data-index=developer-room]:hover::after {
  content: "개발스터의 방";
}
.select-door .door-wrap .door-list__item[data-index=santa-room] {
  background: url("/images/doors/산타스터_door.png") no-repeat center/cover;
}
.select-door .door-wrap .door-list__item[data-index=santa-room]:hover {
  background: url("/images/doors/산타스터_door_open.png") no-repeat center/cover;
}
.select-door .door-wrap .door-list__item[data-index=santa-room]:hover::after {
  content: "산타스터의 방";
}
.select-door .door-wrap {
  /* 좌우 버튼 */
}
.select-door .door-wrap .btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 1rem 1.4rem;
  font-size: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  cursor: pointer;
  z-index: 10;
}
.select-door .door-wrap .btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
.select-door .door-wrap .btn.prev {
  left: 30px;
}
.select-door .door-wrap .btn.next {
  right: 30px;
}
.select-door .snow {
  z-index: -1;
  width: 100%;
  min-height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}
.select-door .snow .snow-wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.select-door .snow .snow-wrap .snowflake {
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
  background-color: #ffffff;
  transition: all 0.3s ease;
  animation: fall linear infinite;
}
@keyframes fall {
  0% {
    transform: translateY(-10%);
    opacity: 1;
  }
  100% {
    transform: translateY(110vh);
    opacity: 0;
  }
}

.developer-room {
  min-width: 1280px;
  width: 100%;
  min-height: 720px;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(11, 11, 11);
}
.developer-room .scene {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  min-width: 1280px;
  width: 100%;
  max-width: 1920px;
  min-height: 720px;
  height: 100%;
  max-height: 1080px;
  overflow: hidden;
  border: 6px solid rgba(255, 255, 255, 0.4);
  background-color: rgb(21, 21, 21);
}
.developer-room .scene .item {
  position: absolute;
  object-fit: contain;
  transition: all 0.3s ease;
  z-index: 1;
}
.developer-room .scene .item:hover {
  scale: 1.1;
  rotate: -1deg;
}
.developer-room .scene .item.group img.light {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
.developer-room .scene .item.group img.light.hidden {
  display: none;
}
.developer-room .scene .item img.hidden {
  display: none;
}
.developer-room .scene-back {
  position: relative;
  width: 100%;
  height: 40%;
  border-bottom: 5px solid rgb(53, 53, 53);
}
.developer-room .scene-back__book {
  width: 40em;
  bottom: -15%;
}
.developer-room .scene-back__door {
  width: 30rem;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.developer-room .scene-back__rug {
  width: 60rem;
  bottom: -150%;
  left: 50%;
  transform: translateX(-50%);
}
.developer-room .scene-back__chair {
  width: 30rem;
  bottom: -80%;
  left: 50%;
  transform: translateX(-50%);
}
.developer-room .scene-desk {
  position: relative;
  bottom: 0;
  width: 100%;
  height: 40%;
  background: url("/images/developerRoom/책상.png") no-repeat center bottom/cover;
  z-index: 1;
}
.developer-room .scene-desk__light {
  bottom: 0;
  top: -35rem;
  left: 30%;
}
.developer-room .scene-desk__light img {
  width: 50rem;
}
.developer-room .scene-desk__coffee {
  width: 8rem;
  top: 0;
  right: 20%;
}
.developer-room .scene-desk__macbook {
  bottom: 17%;
  left: 10%;
}
.developer-room .scene-desk__macbook img {
  width: 35rem;
}
.developer-room .scene-desk__monitor {
  bottom: -8%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.developer-room .scene-desk__monitor img {
  width: 80rem;
}
.developer-room .scene-desk__switch {
  width: 25rem;
  bottom: 0;
  left: 10%;
}
.developer-room .scene-desk__phone {
  bottom: 50%;
  right: 10%;
}
.developer-room .scene-desk__phone img {
  width: 10rem;
}
.developer-room .scene-desk__power {
  bottom: 0;
  right: 0;
}
.developer-room .scene-desk__power img {
  width: 30rem;
}
.developer-room .scene-desk__character {
  width: 35rem;
  aspect-ratio: 1/1;
  left: 50%;
  transform: translateX(-50%);
  top: -65%;
  background: url("/images/developerRoom/개발스터_기본.gif") no-repeat center/contain;
  z-index: 0 !important;
  transition: all 0.3s ease;
}
.developer-room .scene-desk__character:hover {
  scale: 1.1;
  rotate: -1deg;
  background: url("/images/developerRoom/개발스터_빡침.gif") no-repeat center/contain;
}
@media all and (max-height: 1000px) {
  .developer-room .scene-back__book {
    width: 35rem;
    bottom: -20%;
  }
  .developer-room .scene-back__rug {
    width: 55rem;
    bottom: -185%;
  }
  .developer-room .scene-desk__light {
    top: -30rem;
  }
  .developer-room .scene-desk__light img {
    width: 40rem;
  }
  .developer-room .scene-desk__coffee {
    width: 6rem;
  }
  .developer-room .scene-desk__monitor {
    bottom: -10%;
  }
  .developer-room .scene-desk__monitor img {
    width: 75rem;
  }
  .developer-room .scene-desk__switch {
    width: 20rem;
    bottom: 10%;
  }
  .developer-room .scene-desk__phone {
    bottom: 50%;
    right: 10%;
  }
  .developer-room .scene-desk__phone img {
    width: 8rem;
  }
  .developer-room .scene-desk__power {
    bottom: 0;
    right: 0;
  }
  .developer-room .scene-desk__power img {
    width: 25rem;
  }
  .developer-room .scene-desk__character {
    width: 35rem;
    aspect-ratio: 1/1;
    left: 50%;
    transform: translateX(-50%);
    top: -70%;
  }
}
@media all and (max-width: 768px) {
  .developer-room .scene-desk__character {
    width: 35rem;
    aspect-ratio: 1/1;
    left: 50%;
    transform: translateX(-50%);
    top: -50%;
  }
}

/*# sourceMappingURL=main.css.map */