body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  font-weight: 300;
  color: #fff;
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.popup_wrap {
  position: absolute;
  width: 100vw;
  height: 100vh;
  z-index: 10;
}

.popup_wrap .popup_dim {
  width: inherit;
  height: inherit;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup_wrap .popup_dim .popup_bg {
  position: relative;
  background-color: #242424;
  border-radius: 20px;
  width: calc(100% - 60px);
  height: calc(100% - 90px);
  max-width: 740px;
  max-height: 510px;
  padding: 60px 30px 30px;
  overflow: hidden;
}

.popup_wrap .popup_dim .popup_bg_m {
  position: relative;
  width: calc(100% - 60px);
  height: calc(100% - 60px);
}

.popup_wrap .popup_dim .popup_bg_m button.close {
  right: 0;
  top: 0;
}

.popup_wrap button.close {
  width: 20px;
  height: 20px;
  background-image: url(assets/images/1a09789e080df9998463717b005d27f0.svg);
  background-repeat: no-repeat;
  background-color: rgba(0, 0, 0, 0);
  outline: none;
  border: 0;
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}

.popup_wrap button.download {
  width: 90px;
  height: 40px;
  padding: 0 15px;
  color: #242424;
  background-color: #fc0;
  outline: none;
  border: 0;
  cursor: pointer;
  border-radius: 8px;
  transition: 0.5s;
  box-sizing: border-box;
}

.popup_wrap button.download:hover {
  background-color: #c9a309;
}

.popup_title {
  width: 100%;
  text-align: left;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 25px;
}

.popup_contents {
  height: calc(100% - 20px);
  overflow: overlay;
  overflow: hidden;
}

.popup_contents::-webkit-scrollbar {
  width: 4px;
}

.popup_contents::-webkit-scrollbar-thumb {
  background-color: rgba(107, 107, 107, 0.3);
  border-radius: 100px;
}

.keyboard_wrap {
  height: 85px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

/* 0125 Key_infomation Mobile CSS Start */
.keyinfo_m {
  flex-direction: column;
}

.keyinfo_title {
  margin-bottom: 30px;
}

.keyinfo_m>.keyinfo_contents {
  width: 100%;
  max-height: calc(100% - 48px);
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
}

.tab {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.keyboard_subwrap {
  width: 130px;
  height: 85px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tab>.keyguide_subwrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.keyboard_subwrap:last-child {
  width: 60px;
}

.keyboard {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

.keyboard:nth-child(1) {
  top: 0;
  left: 45px;
}

.keyboard:nth-child(2) {
  top: 45px;
  left: 0;
}

.keyboard:nth-child(3) {
  top: 45px;
  left: 45px;
}

.keyboard:nth-child(4) {
  top: 45px;
  left: 90px;
}

.keyguide_subwrap {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

.keyguide_wrap_left,
.keyguide_wrap_right {
  width: calc(100% - 60px);
}

.keyguide_wrap.half .keyguide_subwrap {
  height: 40px;
}

.keyguide_subwrap .guide_title {
  font-size: 14px;
}

.keyguide_subwrap .guide_ico {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.keyguide_subwrap .guide_ico .mouse_left,
.keyguide_subwrap .guide_ico .mouse_wheel {
  width: 25px;
  height: 40px;
}

.keyguide_subwrap .guide_ico .ico_cam {
  width: 32px;
  height: 32px;
  background-image: url(assets/images/e32f70e8bddfb0fe88cf23386a117f46.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.keyguide_subwrap .guide_ico .ico_mic {
  width: 32px;
  height: 32px;
  background-image: url(assets/images/643e005238694598e0f5a6976a30de7d.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.keyguide_subwrap .guide_ico .ico_chat {
  width: 32px;
  height: 32px;
  background-image: url(assets/images/286fbf08faa6397ecfcd32b691af638f.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.keyguide_subwrap .guide_ico .ico_invite {
  width: 32px;
  height: 32px;
  background-image: url(assets/images/72191c53ba28d5e02799e7b1b0e62681.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.keyguide_subwrap .guide_ico .ico_set {
  width: 32px;
  height: 32px;
  background-image: url(assets/images/dba54f7fd058508cc2ac0a0748f06088.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.keyguide_subwrap .guide_ico .ico_exit {
  width: 32px;
  height: 32px;
  background-image: url(assets/images/1da7540c9ea7660d753a25997a63cda1.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.keyguide_subwrap .guide_ico .ico_bgm {
  width: 32px;
  height: 32px;
  background-image: url(assets/images/6416b093793c47f28bd85d9024757dce.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.keyguide_subwrap .guide_ico .ico_screenshot {
  width: 32px;
  height: 32px;
  background-image: url(assets/images/c80413c7837638e67b997e48b23a353e.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.keyguide_subwrap .guide_ico .ico_bookmark {
  width: 32px;
  height: 32px;
  background-image: url(assets/images/f73e1b8d75c5fa6c5a2e0ccc6cef2f5e.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.keyguide_subwrap .guide_ico .ico_partlist {
  width: 32px;
  height: 32px;
  background-image: url(assets/images/7906e338543af7f9e8583ccf362d893b.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.keyguide_subwrap .guide_ico .joystick {
  width: 50px;
  height: 50px;
  background-image: url(assets/images/8516b8203cc77895d8513b439fcdb695.svg);
  background-repeat: no-repeat;
}

.keyguide_subwrap .guide_ico .touch {
  width: 31px;
  height: 50px;
  background-image: url(assets/images/cc567f2b906e2604987a6685f6b25681.svg);
  background-repeat: no-repeat;
}

.keyguide_subwrap .guide_ico .pan {
  width: 34px;
  height: 46px;
  background-image: url(assets/images/ad234a3fd5d1ee7675327ea695e95557.svg);
  background-repeat: no-repeat;
}

.keyguide_subwrap .guide_ico .zoom {
  width: 35px;
  height: 50px;
  background-image: url(assets/images/71cab9462b7c2f567855c772ed2af1b1.svg);
  background-repeat: no-repeat;
}

.keyguide_subwrap .guide_ico .ico_scrchat {
  width: 36px;
  height: 36px;
  background-image: url(assets/images/556ea102ec114e0f8034f9397092ccb4.svg);
  background-repeat: no-repeat;
  margin: 0 10px;
}

.keyguide_subwrap .guide_ico .ico_whisper {
  width: 36px;
  height: 36px;
  background-image: url(assets/images/e82a708663e16886684fe08aa1986484.svg);
  background-repeat: no-repeat;
  margin: 0 10px;
}

.tab .guide_title {
  padding: 3px 10px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  margin-top: 10px;
}

.plus {
  margin: 0 15px;
  font-size: 14px;
  font-weight: bold;
  opacity: 0.7;
}

.keyboard_btn {
  height: 40px;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  color: rgba(255, 255, 255, 0.7);
}

.ml-10 {
  margin-left: 10px;
}

.mr-10 {
  margin-right: 10px;
}

.half {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: row;
  gap: 60px;
}

.half .guide_title {
  margin-right: 15px;
}

.half .plus {
  margin: 0;
  font-size: 12px;
}

.half ul {
  width: 45%;
}

.half li {
  margin-bottom: 5px;
  height: 36px;
}

/* 0125 Key_infomation Mobile CSS End */
/* popup_img01, popup_img02, popup_game, popup_entry_alret CSS start */
.popup_wrap .contents_wrap {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  display: none;
}

.popup_wrap .contents_wrap.img01 {
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
}

.popup_wrap .contents_wrap.img01 img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.popup_wrap .contents_wrap.img02 {
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

.popup_wrap .contents_wrap.img02 .img_wrap {
  max-width: 55%;
  width: calc(100% - 350px);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.popup_wrap .contents_wrap.img02 .img_wrap img {
  max-width: 100%;
  max-height: calc(100% - 50px);
}

.popup_wrap .contents_wrap.img02 .img_wrap button {
  margin: 10px auto 0;
}

.popup_wrap .contents_wrap.img02 .img_info_wrap {
  width: 45%;
  max-width: 320px;
  margin-left: 30px;
}

.popup_wrap .contents_wrap.img02 .img_title {
  font-size: 26px;
  line-height: 1.3;
  font-weight: bold;
  margin-bottom: 15px;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: justify;
}

.popup_wrap .contents_wrap.img02 .img_subtitle {
  max-height: 410px;
  overflow: overlay;
  line-height: 1.5;
  text-align: justify;
  margin-bottom: 15px;
}

.popup_wrap .contents_wrap.img02 .img_subtitle::-webkit-scrollbar {
  width: 4px;
}

.popup_wrap .contents_wrap.img02 .img_subtitle::-webkit-scrollbar-thumb {
  background-color: rgba(107, 107, 107, 0.3);
  border-radius: 2px;
}

.popup_wrap .contents_wrap.game {
  border-radius: unset;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
}

.popup_wrap .contents_wrap.game iframe {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.popup_wrap#entry_alret .popup_bg {
  max-width: 660px;
  max-height: 416px;
}

.popup_wrap .contents_wrap.entry_alret {
  box-sizing: border-box;
  display: none;
  justify-content: center;
  align-items: center;
}

.popup_wrap .contents_wrap.entry_alret .entry_alret_wrap {
  height: 100%;
  max-height: 416px;
}

.popup_wrap .contents_wrap.entry_alret .entry_alret_wrap .entry_title {
  width: 100%;
  height: 30px;
  max-width: 574px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
  font-size: 24px;
  text-align: center;
  margin: 0 auto;
}

.popup_wrap .contents_wrap.entry_alret .entry_alret_wrap .entry_alret_subwrap {
  width: 100%;
  height: 100%;
  max-height: 320px;
  margin: 20px auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.popup_wrap .contents_wrap.entry_alret .entry_alret_wrap .entry_alret_subwrap .img_wrap {
  margin: 0 20px;
  height: 100%;
  max-height: 320px;
}

.popup_wrap .contents_wrap.entry_alret .entry_alret_wrap .entry_alret_subwrap .img_wrap img {
  width: 100%;
  height: 100%;
  content: url(assets/images/55249ac6855bdbc29e34b29ce261aa98.png);
  display: block;
}

.popup_wrap .contents_wrap.entry_alret .entry_alret_wrap .entry_alret_subwrap .left_arr,
.popup_wrap .contents_wrap.entry_alret .entry_alret_wrap .entry_alret_subwrap .right_arr {
  opacity: 0.5;
  transition: 0.5s;
}

.popup_wrap .contents_wrap.entry_alret .entry_alret_wrap .entry_alret_subwrap .left_arr:hover,
.popup_wrap .contents_wrap.entry_alret .entry_alret_wrap .entry_alret_subwrap .right_arr:hover {
  opacity: 1;
}

.popup_wrap .contents_wrap.entry_alret .entry_alret_wrap .entry_alret_subwrap .left_arr img,
.popup_wrap .contents_wrap.entry_alret .entry_alret_wrap .entry_alret_subwrap .right_arr img {
  content: url(assets/images/b0f4303314d6da311a33643dba2ea65b.svg);
}

.popup_wrap .contents_wrap.entry_alret .entry_alret_wrap .entry_alret_subwrap .left_arr {
  transform: rotate(180deg);
}

.popup_wrap .contents_wrap.entry_alret .entry_alret_wrap .btn_not_view {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 574px;
  margin: 0 auto;
  height: 26px;
}

.popup_wrap .contents_wrap.entry_alret .entry_alret_wrap .btn_not_view input[type=checkbox] {
  width: 20px;
  height: 20px;
  border-radius: 5px;
}

.popup_wrap .contents_wrap.entry_alret .entry_alret_wrap .btn_not_view .entry_subtitle {
  font-size: 14px;
  margin-left: 7px;
  text-align: left;
  display: block;
  opacity: 0.7;
  width: calc(100% - 27px);
}

.popup_wrap#img01 .contents_wrap.img01 {
  display: flex;
}

.popup_wrap#img02 .contents_wrap.img02 {
  display: flex;
}

.popup_wrap#game .contents_wrap.game {
  display: flex;
}

.popup_wrap#entry_alret .contents_wrap.entry_alret {
  display: flex;
}

.popup_wrap#set_mic .contents_wrap.set_mic {
  display: flex;
}

.popup_wrap#set_cam .contents_wrap.set_cam {
  display: flex;
}

.popup_wrap#set_env .contents_wrap.set_env {
  display: flex;
}

.popup_wrap#keyinfo .contents_wrap.keyinfo {
  display: flex;
}

.popup_wrap#keyinfo_m .contents_wrap.keyinfo_m {
  display: none;
}

.popup_wrap#whisper .contents_wrap.whisper {
  display: flex;
}

/* popup_img01, popup_img02, popup_game, popup_entry_alret CSS end */
/* popup_set_sound CSS start */
.popup_wrap#set_mic .popup_bg {
  max-width: 740px;
  max-height: 411px;
}

.popup_wrap#set_cam .popup_bg {
  max-width: 740px;
  max-height: 510px;
}

.popup_wrap#set_env .popup_bg {
  max-width: 404px;
  max-height: 289px;
}

.contents_wrap.set_mic,
.contents_wrap.set_cam,
.contents_wrap.set_env {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.set_title {
  width: 100%;
  font-size: 20px;
  color: rgba(255, 255, 255, 1);
  font-weight: 300;
  margin-bottom: 24px;
}

.set_subtitle {
  font-size: 14px;
  width: 100%;
  margin-bottom: 10px;
}

.set_btnwrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.set_btn {
  width: 100px;
  height: 40px;
  outline: none;
  border: 0;
  color: #fff;
  font-size: 14px;
  letter-spacing: -0.8px;
  margin: 0 8px;
  background-color: #787878;
  cursor: pointer;
  transition: 0.5s;
  border-radius: 5px;
}

.set_btn:hover {
  background-color: #666;
}

.set_btn.btn_yellow {
  background-color: #ffcc00;
  color: #242424;
}

.set_btn.btn_yellow:hover {
  background-color: #c9a309;
}

.set_selectbox {
  width: 100%;
  font-size: 18px;
  color: #fff;
  background-color: #0a0a0a;
  border: 1px solid #333;
  padding: 13px 11px;
  outline: none;
  -o-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(assets/images/6d328c08acc37454b820c48a3c800357.svg);
  background-repeat: no-repeat;
  background-position: calc(100% - 20px) 20px;
  margin-bottom: 32px;
}

.set_selectbox option {
  padding: 30px 0;
  font-size: 15px;
  background: #000;
}

.set_sound_wrap,
.set_video_wrap {
  width: 100%;
}

.set_configuration_wrap {
  width: 400px;
}

.set_sounddevice {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.setdevice_mic,
.setdevice_speaker {
  width: 45%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.set_mictest_wrap {
  margin-top: 15px;
}

.mictest_txt,
.modal_txt {
  font-size: 14px;
  opacity: 0.7;
}

.set_mictest_subwrap {
  width: 100%;
  margin-top: 20px;
  display: flex;
  align-items: center;
}

.mictest_btn:hover {
  background-color: #c9a309;
}

.mictest_progress_wrap {
  position: relative;
  width: calc(100% - 100px);
  height: 30px;
  display: flex;
  justify-content: flex-start;
}

.mic_progress_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background-image: url(assets/images/59c61f0e656056ae590c58dad54313b8.svg);
  z-index: 2;
}

.mic_progress_gradient_wrap {
  width: 0%;
  height: 30px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transition: 0.2s;
}

.mic_progress_gradient {
  width: 100%;
  height: 30px;
  background-image: linear-gradient(to right, #ffa800, #fff600, #15cd56);
}

.mic_progress_txt {
  font-size: 12px;
  letter-spacing: -0.6px;
  position: absolute;
  top: 27px;
  left: 0;
  z-index: 3;
  display: none;
}

.mic_progress_txt.active {
  display: block;
}

.set_videodevice {
  width: 100%;
  height: 144px;
  border: 1px solid #2f2f2f;
  box-sizing: border-box;
  background-color: #141414;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.videotest_btn_wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: absolute;
  left: 0;
  z-index: 1;
}

.camera_test_img img {
  width: 50px;
  opacity: 0.2;
  content: url(assets/images/9f3f31b47828eaca7670fcffcda0c653.svg);
}

.set_mictest_subwrap .set_btn,
.videotest_btn_wrap .set_btn {
  height: 30px;
}

.videotest_vod {
  width: 256px;
  height: 144px;
  background-color: #000;
  z-index: 2;
  visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.videotest_vod video {
  width: 100%;
}

.videotest_txt {
  font-size: 13px;
  color: #a2a2a2;
  letter-spacing: -0.5;
  text-align: center;
  width: 100%;
  margin-top: 10px;
}

.videotest_txt_point {
  color: #ffcc00;
}

.set_modal_wrap {
  margin-top: 34px;
}

.video_modal_wrap {
  width: 100%;
  display: inline-flex;
  align-items: center;
}

.setdevice_camera_wrap {
  margin-top: 34px;
}

.range-slider {
  width: 100%;
  margin-top: 14px;
  z-index: 2;
}

.rs-range {
  width: 100%;
  height: 8px;
  margin-top: 5px;
  border-radius: 8px;
  -webkit-appearance: none;
  background: #454545;
}

.rs-range:focus {
  outline: none;
}

.rs-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  background: transparent;
  border-radius: 8px;
}

.rs-range::-moz-range-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  background: transparent;
  border-radius: 8px;
}

.rs-range::-webkit-slider-thumb {
  height: 26px;
  width: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 1);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -9px;
}

.rs-range::-moz-range-thumb {
  height: 26px;
  width: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 1);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -9px;
}

.rs-range::-moz-focus-outer {
  border: 0;
}

.rs-label {
  position: relative;
  transform-origin: center center;
  visibility: hidden;
  width: 40px;
  background: #333;
  border-radius: 5px;
  text-align: center;
  font-weight: bold;
  padding: 5px 7px;
  box-sizing: border-box;
  margin-left: -14px;
  margin-top: 10px;
  left: attr(value);
  color: #fff;
  font-size: 12px;
  display: block;
  font-weight: 100;
}

.rs-range:hover~.rs-label {
  visibility: visible;
}

.set_onoff_wrap {
  width: 100%;
}

.set_onoff_subwrap {
  padding-bottom: 15px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.set_onoff_subwrap>.set_subtitle {
  width: calc(100% - 58px);
  max-width: 300px;
}

.onoff_btn_wrap {
  width: 58px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video_modal_wrap .onoff_btn_wrap {
  margin-left: 25px;
}

.switch_input {
  position: absolute;
  /* hidden */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.switch_label {
  position: relative;
  cursor: pointer;
  display: inline-block;
  width: 58px;
  height: 28px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  transition: 0.2s;
}

.switch_label:hover {
  background: rgba(255, 255, 255, 0.3);
}

.onf_btn {
  position: absolute;
  top: 4px;
  left: 4px;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background: #fff;
  transition: 0.2s;
}

/* checking style */
.switch_input:checked+.switch_label {
  background: #ffcc00;
}

.switch_input:checked+.switch_label:hover {
  background: #c9a309;
}

/* move */
.switch_input:checked+.switch_label .onf_btn {
  left: 34px;
  background: #fff;
  box-shadow: 1px 2px 3px #00000020;
}

/* popup_set_sound CSS start */

/* keyinfo PC CSS start */
.popup_wrap#keyinfo .contents_wrap.keyinfo {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.contents_wrap.keyinfo .keyinfo_title {
  font-size: 24px;
  height: 25px;
  width: 100%;
  text-align: center;
}

.contents_wrap.keyinfo .keyinfo_contents {
  width: 100%;
  height: calc(100% - 55px);
  overflow: overlay;
  overflow-x: hidden;
  overflow-y: auto;
}

.contents_wrap.keyinfo .keyinfo_contents::-webkit-scrollbar {
  width: 4px;
}

.contents_wrap.keyinfo .keyinfo_contents::-webkit-scrollbar-thumb {
  background-color: hsla(0, 0%, 42%, 0.3);
  border-radius: 100px;
}

.contents_wrap.keyinfo .keyinfo_contents .keyboard_wrap {
  transform: scale(1.3);
  height: 160px;
}

.contents_wrap.keyinfo .keyinfo_contents .keyboard_wrap .keyboard_subwrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 20px;
}

.contents_wrap.keyinfo .keyinfo_contents .keyboard {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contents_wrap.keyinfo .keyinfo_contents .keyboard:nth-child(1) {
  top: 0;
  left: 45px;
}

.contents_wrap.keyinfo .keyinfo_contents .keyboard:nth-child(2) {
  top: 45px;
  left: 0;
}

.contents_wrap.keyinfo .keyinfo_contents .keyboard:nth-child(3) {
  top: 45px;
  left: 45px;
}

.contents_wrap.keyinfo .keyinfo_contents .keyboard:nth-child(4) {
  top: 45px;
  left: 90px;
}

.contents_wrap.keyinfo .keyinfo_contents .mouse_left {
  width: 50px;
  height: 80px;
  background-image: url(assets/images/51849ff4ac822b19b2e7eec9bad87f45.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

.contents_wrap.keyinfo .keyinfo_contents .mouse_wheel {
  width: 50px;
  height: 80px;
  background-image: url(assets/images/dfb194b76edbdc67cb82923551ff74de.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

.contents_wrap.keyinfo .keyinfo_contents .move_arr {
  width: 30px;
  height: 30px;
  background-image: url(assets/images/705a4356781884896622239c6d4c3d9f.svg);
}

.contents_wrap.keyinfo .keyinfo_contents .keyguide_subwrap {
  width: 100%;
  height: 80px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  box-sizing: border-box;
}

.contents_wrap.keyinfo .keyinfo_contents .guide_title {
  font-size: 18px;
}

.contents_wrap.keyinfo .keyinfo_contents .guide_ico {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.contents_wrap.keyinfo .keyinfo_contents .guide_ico .mouse_left,
.contents_wrap.keyinfo .keyinfo_contents .guide_ico .mouse_wheel {
  width: 25px;
  height: 40px;
}

.contents_wrap.keyinfo .keyinfo_contents .plus {
  margin: 0 15px;
  font-size: 20px;
  font-weight: bold;
  opacity: 0.7;
}

.contents_wrap.keyinfo .keyinfo_contents .keyboard_btn {
  height: 40px;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  color: rgba(255, 255, 255, 0.7);
}

.contents_wrap.keyinfo .keyinfo_contents .ml-10 {
  margin-left: 10px;
}

.contents_wrap.keyinfo .keyinfo_contents .mr-10 {
  margin-right: 10px;
}

.contents_wrap.keyinfo .keyinfo_contents .keyguide_wrap_left,
.contents_wrap.keyinfo .keyinfo_contents .keyguide_wrap_right {
  width: 45%;
}

.contents_wrap.keyinfo .keyinfo_contents .keyguide_wrap_left .keyguide_subwrap {
  height: 110px;
}

.contents_wrap.keyinfo .keyinfo_contents .half {
  margin-top: 40px;
}

/* keyinfo PC CSS end */

/* popup_whisper CSS start */
.popup_wrap#whisper .popup_dim {
  background-color: rgba(0, 0, 0, 0);
}

.popup_wrap#whisper .popup_bg {
  position: absolute;
  bottom: 150px;
  width: 90%;
  height: unset;
  min-width: 310px;
  max-width: 600px;
  padding: 30px;
}

.popup_wrap#whisper .popup_bg button.close {
  display: none;
}

.popup_wrap#whisper .contents_wrap.whisper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: unset;
}

.popup_wrap .contents_wrap.whisper .wisper_label {
  width: 24px;
  height: 24px;
  background-image: url(assets/images/20a256d5c08b6ac21156177fcd980252.svg);
  background-repeat: no-repeat;
  margin-right: 10px;
  background-size: contain;
  background-position: center center;
}

.popup_wrap .contents_wrap.whisper .wisper_input {
  width: calc(100% - 34px);
  height: 40px;
  padding: 5px 10px;
  box-sizing: border-box;
  outline: none;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
}

.popup_wrap .contents_wrap.whisper .wisper_input::placeholder {
  color: #ccc;
}

.popup_wrap .contents_wrap.whisper .wisper_input:focus {
  background: rgba(0, 0, 0, 0);
}

.popup_wrap .contents_wrap.whisper button {
  height: 40px;
  width: 100px;
  margin-left: 10px;
  border-radius: 5px;
  outline: none;
  background-color: #fc0;
  border: 1px solid rgb(209, 168, 4);
  color: #242424;
  transition: 0.5s;
}

.popup_wrap .contents_wrap.whisper button:hover {
  background-color: rgb(209, 168, 4);
}

.popup_wrap .contents_wrap.whisper button.whisper_close {
  background-color: #787878;
  color: #fff;
  border-color: #787878;
}

.popup_wrap .contents_wrap.whisper button.whisper_close:hover {
  background-color: #666;
  border-color: #666;
}

/* popup_whisper CSS end */
/* popup_loading CSS start */
.popup_wrap#loading .popup_dim {
  width: 100%;
  height: 100%;
  background-image: url(assets/images/d7b7d1a42d1ab8d2b476a8f219931c79.webp);
  background-size: cover;
}

.popup_wrap#loading .popup_dim#bg001 {
  width: 100%;
  height: 100%;
  background-image: url(assets/images/d7b7d1a42d1ab8d2b476a8f219931c79.webp);
  background-size: cover;
}

.popup_wrap#loading .popup_dim#bg002 {
  width: 100%;
  height: 100%;
  background-image: url(assets/images/7615bc5b4849bcf0705fa0f26f0493c1.webp);
  background-size: cover;
}

.popup_wrap#loading .popup_dim#bg003 {
  width: 100%;
  height: 100%;
  background-image: url(assets/images/9f93fcec9c5098623f780f50713c2d4d.webp);
  background-size: cover;
}

.popup_wrap#loading .popup_dim#bg004 {
  width: 100%;
  height: 100%;
  background-image: url(assets/images/b38ba6c62a258c51bf696588b52dd21a.webp);
  background-size: cover;
}

.popup_wrap#loading .popup_dim#bg005 {
  width: 100%;
  height: 100%;
  background-image: url(assets/images/d40a7c2d9d18a10593352a088b7f38d7.webp);
  background-size: cover;
}

.popup_wrap#loading .popup_dim#bg006 {
  width: 100%;
  height: 100%;
  background-image: url(assets/images/b31f5845741c9c2bad4c2bb309c8821f.webp);
  background-size: cover;
}

.popup_wrap#loading .popup_dim#bg007 {
  width: 100%;
  height: 100%;
  background-image: url(assets/images/47702e03bd3fd122ee72bc63ef0102e2.webp);
  background-size: cover;
}

.popup_wrap#loading .popup_dim#bg008 {
  width: 100%;
  height: 100%;
  background-image: url(assets/images/7e2212f51c9bf73607fa14da2592e5bd.webp);
  background-size: cover;
}

.popup_wrap#loading .popup_dim#bg009 {
  width: 100%;
  height: 100%;
  background-image: url(assets/images/1dc978da1a5a322a9f36d53ec1413d9a.webp);
  background-size: cover;
}

.popup_wrap#loading .popup_dim#bg010 {
  width: 100%;
  height: 100%;
  background-image: url(assets/images/723abb580294cc41e8d8e52dba8f67e1.webp);
  background-size: cover;
}

.popup_wrap#loading .popup_dim#bg011 {
  width: 100%;
  height: 100%;
  background-image: url(assets/images/8408e4bf797d416efd2cc76a0e91f88a.webp);
  background-size: cover;
}

.popup_wrap#loading .popup_dim#bg012 {
  width: 100%;
  height: 100%;
  background-image: url(assets/images/73510996cf2f27711bf2f4bb37325824.webp);
  background-size: cover;
}

.popup_wrap#loading .popup_bg {
  width: 100%;
  height: 100%;
  background-image: url(assets/images/629aac4bf826328d89b80a613e745e88.webp);
  background-position: bottom;
  background-size: cover;
  max-width: none;
  max-height: none;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 0;
  padding: 0;
  background-repeat: repeat-x;
}

.popup_wrap#loading .popup_bg button.close {
  display: none;
}

.popup_wrap#loading .contents_wrap.loading {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contents_wrap.loading .texts {
  font-size: 90px;
  color: #aaa;
  position: absolute;
  left: 6%;
  bottom: 8.5%;
  font-family: 'Pretendard-Light', sans-serif;
  font-weight: 100;
}

.contents_wrap.loading .texts>span {
  font-family: 'Pretendard-Extrabold', sans-serif;
  font-weight: 800;
  color: #fff;
}

/* popup_loading CSS end */

/* popup_floorinfo CSS start */
.popup_wrap#floorinfo .popup_bg {
  max-width: 400px;
}

.popup_wrap#floorinfo .contents_wrap.floorinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.contents_wrap.floorinfo .floorinfo_wrap,
.contents_wrap.floorinfo .floorinfo_subwrap {
  width: 100%;
  height: 100%;
}

.contents_wrap.floorinfo .floorinfo_title {
  width: 100%;
  margin: 0 auto 0px;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.contents_wrap.floorinfo .floorinfo_title .text_ko {
  font-size: 30px;
  font-weight: bold;
  margin-top: 0;
}

.contents_wrap.floorinfo .floorinfo_title .text_eg {
  font-size: 14px;
  opacity: 0.7;
  font-weight: normal;
}

.contents_wrap.floorinfo .floorinfo_title hr {
  width: 100%;
  height: 1px;
  border: 0;
  margin: 10px 0;
  background-color: #ffcc00;
}

.contents_wrap.floorinfo .floorinfo_table {
  width: 90%;
  max-height: 406px;
  overflow: overlay;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0 auto
}

.contents_wrap.floorinfo .floorinfo_table::-webkit-scrollbar {
  width: 4px;
}

.contents_wrap.floorinfo .floorinfo_table::-webkit-scrollbar-thumb {
  background-color: rgba(107, 107, 107, 0.3);
  border-radius: 100px;
}

.contents_wrap.floorinfo .floor_wrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  transition: 0.2s;
  color: #fff;
  margin-bottom: 30px;
  font-size: 20px;
}

.contents_wrap.floorinfo .floor_wrap:last-child {
  margin-bottom: 0;
}

.contents_wrap.floorinfo .floor_wrap:hover {
  color: #fc0;
  opacity: 1;
}

.contents_wrap.floorinfo .floor_num {
  width: 60px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
  font-weight: bold;
}

.contents_wrap.floorinfo .floor_name {
  display: flex;
  flex-direction: column;
  font-weight: normal;
}

/* popup_floorinfo CSS end */
/* popup_alret CSS Start */
.popup_wrap#alret .contents_wrap.alret {
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup_wrap#alret .popup_bg {
  width: auto;
  height: auto;
  padding: 30px;
}

.popup_wrap#alret .close {
  display: none;
}

.contents_wrap.alret .alret_wrap {
  max-width: 400px;
  box-sizing: border-box;
  gap: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.contents_wrap.alret .alret_subtitle {
  width: 100%;
  font-size: 16px;
  text-align: center;
  word-break: break-all;
  line-height: 1.5;
}

.contents_wrap.alret .alret_btn_wrap {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.contents_wrap.alret .alret_btn_wrap button {
  height: 40px;
  border-radius: 5px;
  outline: none;
  background-color: #fc0;
  border: 1px solid rgb(209, 168, 4);
  color: #242424;
  transition: 0.5s;
  padding: 0 20px;
  cursor: pointer;
}

.contents_wrap.alret .alret_btn_wrap button.alret_close {
  background-color: #787878;
  color: #fff;
  border-color: #787878;
}

/* popup_alert CSS end */

/* popup_videocall CSS start */
.popup_wrap#videocall button.close {
  display: none;
}

.popup_wrap#videocall .popup_dim .popup_bg {
  padding-top: 30px;
  max-width: 375px;
  max-height: 667px;
}

.contents_wrap.videocall {
  position: relative;
}

.contents_wrap.videocall.make {
  display: block;
}

.contents_wrap.videocall.make .tel-answer-before-dim {
  display: block;
}

.contents_wrap.videocall.make .tel-send-btn-wrap {
  display: flex;
}

.contents_wrap.videocall.call {
  display: block;
}

.contents_wrap.videocall.call .tel-answer-before-dim {
  display: block;
}

.contents_wrap.videocall.call .tel-answer-before-dim .tel-recive-btn-wrap {
  display: flex;
}

.contents_wrap.videocall.make.call .tel-answer-before-dim {
  display: none;
}

.contents_wrap.videocall.make.call .answer-user-wrap {
  display: none;
}

.contents_wrap.videocall.make.call .tel-answering-wrap {
  display: block;
}

.contents_wrap.videocall.make.call .tel-send-btn-wrap {
  display: flex;
}

.contents_wrap.videocall.make.call .tel-send-btn-wrap li:first-child,
.contents_wrap.videocall.make.call .tel-send-btn-wrap li:last-child {
  display: flex;
}

.contents_wrap.videocall.make.call .tel-answer-before-dim .answering-wave {
  visibility: hidden;
}

.contents_wrap.videocall .full-video-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
}

.contents_wrap.videocall .full-video-wrap .full-video-subwrap {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contents_wrap.videocall .full-video-wrap .full-video-subwrap img {
  display: none;
}

.contents_wrap.videocall .full-video-wrap .full-video-subwrap video {
  width: 100%;
  height: 100%;
  aspect-ratio: 9/16;
}

.contents_wrap.videocall.caller.lcam-off .tel-btn-cam {
  background-image: url(assets/images/469d0f447431ecf20e600e73ebbcb506.svg);
}



/*통화화면 영역 - 수/발신 연결 전 화면 CSS*/
.contents_wrap.videocall .tel-answer-before-dim {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.contents_wrap.videocall .tel-answer-before-dim.active {
  display: block;
}

.contents_wrap.videocall .tel-answer-before-dim .answer-before-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #fff;
  position: relative;
}

.contents_wrap.videocall .tel-answer-before-dim .answer-user-wrap {
  width: 90%;
  position: absolute;
  top: 15%;
  text-align: center;
}

.contents_wrap.videocall .tel-answer-before-dim .answer-user-wrap .answer-name {
  font-size: 24px;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
  font-weight: bold;
}

.contents_wrap.videocall .tel-answer-before-dim .answer-user-wrap .answer-messege {
  font-size: 16px;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
  margin-top: 10px;
  opacity: 0.7;
}

.contents_wrap.videocall .tel-answer-before-dim .tel-recive-btn-wrap {
  width: 100%;
  position: absolute;
  bottom: 5%;
  display: none;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.contents_wrap.videocall .tel-answer-before-dim .tel-recive-btn-wrap.active {
  display: flex;
}

.contents_wrap.videocall .tel-answer-before-dim .tel-recive-btn-wrap li {
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  background-position: center center;
  box-sizing: border-box;
  cursor: pointer;
  margin: 0 60px;
}

.contents_wrap.videocall .tel-answer-before-dim .tel-recive-btn-wrap li:first-child {
  margin-left: 0;
}

.contents_wrap.videocall .tel-answer-before-dim .tel-recive-btn-wrap li:last-child {
  margin-right: 0;
}

/*통화영역 - 버튼 CSS*/
.contents_wrap.videocall .tel-send-btn-wrap {
  width: 100%;
  position: absolute;
  bottom: 5%;
  display: none;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.contents_wrap.videocall .tel-send-btn-wrap li {
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  background-position: center center;
  box-sizing: border-box;
  cursor: pointer;
  margin: 0 20px;
}

.contents_wrap.videocall .tel-send-btn-wrap li:first-child {
  margin-left: 0;
  display: none;
}

.contents_wrap.videocall .tel-send-btn-wrap li:last-child {
  margin-right: 0;
  display: none;
}

.contents_wrap.videocall .tel-btn-mic,
.contents_wrap.videocall .tel-btn-cam {
  width: 55px;
  height: 55px;
  border: 2px solid #fff;
  opacity: 0.5;
  transition: .3s;
  background-color: rgba(0, 0, 0, 0.2);
}

.contents_wrap.videocall .tel-btn-mic:hover,
.contents_wrap.videocall .tel-btn-cam:hover {
  opacity: 1;
}

.contents_wrap.videocall .tel-btn-mic {
  background-image: url(assets/images/90e8a2975982d722bf8e0b5125f68514.svg);
  opacity: 1;
}

.contents_wrap.videocall .tel-btn-end {
  width: 65px;
  height: 65px;
  background-color: #ea4335;
  position: relative;
  background-image: url(assets/images/ba52134a309524a884d240c3e20c5dfc.svg);
}

.contents_wrap.videocall .tel-btn-end:hover {
  background-color: #d53528;
}

.contents_wrap.videocall .tel-btn-start {
  width: 65px;
  height: 65px;
  background-color: #3eb950;
  position: relative;
  background-image: url(assets/images/13339f3b04dd96b9adb30d9d47c26fa0.svg);
}

.contents_wrap.videocall .tel-btn-start:hover {
  background-color: #26a338;
}

.contents_wrap.videocall .tel-btn-cam {
  background-image: url(assets/images/e86451f1ddde9e864e0953a5d8d224d9.svg);
  opacity: 1;
}

.contents_wrap.videocall .answering-wave {
  width: 110%;
  height: 110%;
  border-radius: 50%;
  background-color: #fff;
  transform-origin: 50% 50%;
  position: absolute;
  opacity: 0.4;
  animation-duration: 1500ms;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
  animation-name: drift;
  z-index: -1;
  visibility: visible;
}

@keyframes drift {
  from {
    -webkit-transform: rotate(0deg) scale(0, 0);
    transform: rotate(0deg) scale(0, 0);
    opacity: 1;
  }

  to {
    -webkit-transform: rotate(360deg) scale(1.5, 1.5);
    transform: rotate(360deg) scale(1.5, 1.5);
    opacity: 0;
  }
}

/* 통화화면 영역 - 통화화면 CSS */
.contents_wrap.videocall .tel-answering-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: none;
}

.contents_wrap.videocall .tel-answering-wrap.active {
  display: block;
}

.contents_wrap.videocall .tel-answering-wrap .subcam-wrap {
  width: 30%;
  height: 166px;
  position: relative;
  top: 10px;
  left: 10px;
  background-color: #222;
  z-index: 2;
}

.contents_wrap.videocall .tel-answering-wrap .subcam-wrap .subcam-subwrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
}

.contents_wrap.videocall .tel-answering-wrap .subcam-wrap .subcam-subwrap img {
  position: relative;
  left: 0px;
  width: 100%;
  height: 100%;
  visibility: hidden;
}

.contents_wrap.videocall .tel-answering-wrap .subcam-wrap .subcam-subwrap video {
  aspect-ratio: 9/16;
  position: absolute;
  left: 0px;
  width: 100%;
  height: 100%;
}

.contents_wrap.videocall .tel-answering-wrap .subcam-wrap .subcam-camoff-dim {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  visibility: hidden;
}

.contents_wrap.videocall .tel-answering-wrap .subcam-wrap .subcam-micoff {
  width: 20px;
  height: 20px;
  background-image: url(assets/images/0e8d71adcadb524336915f15c2546479.svg);
  background-repeat: no-repeat;
  background-position: center;
  opacity: .7;
  position: absolute;
  top: 6px;
  right: 5px;
  z-index: 1;
  visibility: hidden;
}

.contents_wrap.videocall .tel-answering-wrap .subcam-wrap .vodswap-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-image: url(assets/images/646a3f66e09154e199f298e718168fda.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #25ac79;
  position: absolute;
  right: -15px;
  top: calc((100% - 30px) / 2);
  z-index: 10;
  visibility: hidden;
}

.contents_wrap.videocall .tel-answering-wrap .maincam-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.contents_wrap.videocall .tel-answering-wrap .maincam-wrap .maincam-subwrap {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.contents_wrap.videocall .tel-answering-wrap .maincam-wrap .maincam-camoff-dim {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  visibility: hidden;
}

.contents_wrap.videocall .tel-answering-wrap .maincam-wrap .maincam-camoff-dim .call_camera_off {
  background-image: url(assets/images/469d0f447431ecf20e600e73ebbcb506.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 50px;
  height: 50px;
}

.contents_wrap.videocall .tel-answering-wrap .maincam-wrap .maincam-camoff-dim p {
  font-size: 16px;
  letter-spacing: inherit;
  text-align: center;
  margin-top: 25px;
  color: #fff;
}

.contents_wrap.videocall .tel-answering-wrap .maincam-wrap .maincam-micoff {
  width: 20px;
  height: 20px;
  background-image: url(assets/images/0e8d71adcadb524336915f15c2546479.svg);
  background-repeat: no-repeat;
  background-position: center;
  opacity: .7;
  position: absolute;
  top: 10px;
  right: 10px;
  visibility: hidden;
}

.contents_wrap.videocall .tel-answering-wrap .mic-alret-wrap {
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  bottom: 130px;
  left: calc((100% - 80%) / 2);
  z-index: 10;
  visibility: hidden;
}

.contents_wrap.videocall .tel-answering-wrap .mic-alret-wrap p {
  color: #fff;
  text-align: center;
  font-size: 16px;
  transition: .5;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px 0;
  border-radius: 5px;
  box-sizing: border-box;
}

.contents_wrap.videocall.caller.lcam-off .subcam-camoff-dim {
  visibility: visible;
}

.contents_wrap.videocall.caller.lmic-off .tel-btn-mic {
  background-image: url(assets/images/7d543f7cda979779f252951deb901522.svg);
}

.contents_wrap.videocall.caller.lmic-off .subcam-micoff {
  visibility: visible;
}

.contents_wrap.videocall.caller.rcam-off .maincam-camoff-dim {
  visibility: visible;
}

.contents_wrap.videocall.caller.rmic-off .maincam-micoff {
  visibility: visible;
}

.contents_wrap.videocall.caller.rmic-off .mic-alret-wrap {
  visibility: visible;
}

.contents_wrap.videocall.callee.lcam-off .tel-btn-cam {
  background-image: url(assets/images/469d0f447431ecf20e600e73ebbcb506.svg);
}

.contents_wrap.videocall.callee.lcam-off .subcam-camoff-dim {
  visibility: visible;
}

.contents_wrap.videocall.callee.lcam-off .subcam-camoff-dim .call_camera_off {
  width: 30px;
  height: 30px;
  background-image: url(assets/images/469d0f447431ecf20e600e73ebbcb506.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.contents_wrap.videocall.callee.lmic-off .tel-btn-mic {
  background-image: url(assets/images/7d543f7cda979779f252951deb901522.svg);
}

.contents_wrap.videocall.callee.lmic-off .subcam-micoff {
  visibility: visible;
}

.contents_wrap.videocall.callee.rcam-off .maincam-camoff-dim {
  visibility: visible;
}

.contents_wrap.videocall.callee.rmic-off .maincam-micoff {
  visibility: visible;
}

.contents_wrap.videocall.callee.rmic-off .mic-alret-wrap {
  visibility: visible;
}

/* popup_videocall CSS end */

/* popup_share_window CSS start */
#share_window .popup_dim .popup_bg {
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
  border-radius: 0;
  background-color: rgba(0, 0, 0, 0);
  position: relative;
}

.popup_wrap#share_window .contents_wrap.share_window {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.popup_wrap#share_window .contents_wrap.share_window video {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.popup_wrap#share_window button.close {
  width: 30px;
  height: 30px;
  background-position: center;
  background-size: contain;
  opacity: 0.7;
  transition: 0.5s;
  z-index: 10;
}

.popup_wrap#share_window button.close:hover {
  opacity: 1;
}

.contents_wrap.share_window>button.ico_stopshare {
  width: 48px;
  height: 48px;
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer;
  outline: none;
  border: 0;
  opacity: 0.7;
  transition: 0.5s;
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
}

.contents_wrap.share_window>button.ico_stopshare:hover {
  opacity: 1;
}

.ico_stopshare {
  background-image: url(assets/images/712a689699bd374f8c15034cd1fd2a5e.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.contents_wrap.share_window .stopshare_titlewrap {
  z-index: 10;
}

.contents_wrap.share_window .stopshare_titlewrap .stopshare_subtitle {
  font-size: 32px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.contents_wrap.share_window .stopshare_titlewrap .stopshare_subtitle::before {
  content: '';
  width: 48px;
  height: 48px;
  background-image: url(assets/images/712a689699bd374f8c15034cd1fd2a5e.svg);
  background-size: contain;
  display: block;
}

/* popup_share_window CSS end */

/* popup_whiteboard CSS start */
#whiteboard .popup_dim .popup_bg {
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
  border-radius: 0;
  background-color: rgba(0, 0, 0, 0);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.popup_wrap#whiteboard .contents_wrap.whiteboard {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  position: relative;
}

.popup_wrap#whiteboard button.close {
  width: 30px;
  height: 30px;
  background-position: center;
  background-size: contain;
  opacity: 0.7;
  transition: 0.5s;
  z-index: 10;
}

.popup_wrap#whiteboard button.close:hover {
  opacity: 1;
}

.contents_wrap.whiteboard .canvas_wrap {
  width: 90%;
  height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  position: absolute;
  top: 5%;
}

.contents_wrap.whiteboard .canvas_wrap {
  background: rgba(255, 255, 255, .95);
  border-radius: 15px;
}

.contents_wrap.whiteboard .canvas_wrap .canvas_subwrap {
  /* width: 100%; */
  /* padding-bottom: 56.625%; */
  background-color: #fff;
  overflow: hidden;
  position: relative;
  border-radius: 15px;
}

.contents_wrap.whiteboard .canvas_wrap .canvas_subwrap canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.contents_wrap.whiteboard .canvas-container {
  max-width: 1920px;
  max-height: 1080px;
  overflow-x: hidden;
  overflow-y: auto;
}

.contents_wrap.whiteboard .canvas-container::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background: #fff;
}

.contents_wrap.whiteboard .canvas-container::-webkit-scrollbar-thumb {
  background: hsla(0, 0%, 42%, 0.3);
  border-radius: 3px;
}

.contents_wrap.whiteboard .cursor {
  position: absolute;
  width: 16px;
  height: 16px;
  z-index: 3;
  display: none;
  transition: top 0.1s, left 0.1s;
  border: 1px solid #fff;
  border-radius: 8px;
  background-color: #ff00ff;
  box-sizing: border-box;
}

.contents_wrap.whiteboard .custom_cursor.pointer {
  display: none;
  cursor: url(assets/images/51b8c06971040c0df02b8379f3274c59.svg) 8 8, default
}

.contents_wrap.whiteboard .custom_cursor.pen {
  display: none;
  cursor: url(assets/images/542c2fd16c453e476c9613de99b416b6.svg) 0 32, crosshair
}

.contents_wrap.whiteboard .custom_cursor.eraser {
  display: none;
  cursor: url(assets/images/fbf4c37c176c9328d089672ab7734442.svg) 0 32, crosshair
}

.contents_wrap.whiteboard .canvas_tool_wrap {
  position: fixed;
  top: 15px;
  left: calc((100% - 245px) /2);
  z-index: 3;
}

.contents_wrap.whiteboard .canvas_tool {
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  padding: 10px;
}

.contents_wrap.whiteboard .canvas_tool_btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  cursor: pointer;
  width: 25px;
  height: 25px;
  padding: 10px;
  transition: 0.5s;
  position: relative;
}

.contents_wrap.whiteboard .canvas_tool_btn:hover {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  color: rgba(255, 255, 255, 1);
}

.contents_wrap.whiteboard .canvas_tool_btn:hover i::after {
  padding: 10px;
  color: #fff;
  background-color: #666;
  border-radius: 5px;
  font-size: 13px;
  position: absolute;
  top: 35px;
  word-break: break-all;
  white-space: nowrap;
  z-index: 10 !important;
}

.contents_wrap.whiteboard .canvas_tool_btn.active {
  color: #fc0;
}

.contents_wrap.whiteboard .canvas_tool_btn:hover i.fa-bullseye::after {
  content: '레이저 포인터';
  left: -45px;
}

.contents_wrap.whiteboard .canvas_tool_btn:hover i.fa-shapes::after {
  content: '도형';
  left: -13px;
}

.contents_wrap.whiteboard .canvas_tool_btn:hover i.fa-pen::after {
  content: '그리기';
  left: -20px;
}

.contents_wrap.whiteboard .canvas_tool_btn:hover i.fa-eraser::after {
  content: '지우기';
  left: -20px;
}

.contents_wrap.whiteboard .canvas_tool_btn:hover i.fa-reply-all::after {
  content: '전체 지우기';
  left: -33px;
}

.contents_wrap.whiteboard .canvas_tool_btn i {
  font-size: 20px;
  position: relative;
}

.contents_wrap.whiteboard .canvas_tool li .canvas_tool_subwrap {
  display: none;
  justify-content: center;
  position: absolute;
  top: 60px;
  z-index: 1;
}

.contents_wrap.whiteboard .canvas_tool li.active>.canvas_tool_subwrap {
  display: flex;
}

.contents_wrap.whiteboard .canvas_tool_subwrap .subtool_wrap {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #313131;
  padding: 20px;
  border-radius: 10px;
  gap: 20px;
}


.contents_wrap.whiteboard .canvas_tool li .canvas_tool_subwrap .subtool_wrap li {
  width: 40px;
  height: 40px;
  font-size: 25px;
  cursor: pointer;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.5;
}

.contents_wrap.whiteboard .canvas_tool li .canvas_tool_subwrap .subtool_wrap li.shape-circle {
  background-image: url(assets/images/b979a2b078161bac569815fa208108b2.svg);
  box-sizing: border-box;
}

.contents_wrap.whiteboard .canvas_tool li .canvas_tool_subwrap .subtool_wrap li.shape-rect {
  background-image: url(assets/images/fa2f21bb2386017a0b2d3eb2e4f33582.svg);
  box-sizing: border-box;
}

.contents_wrap.whiteboard .canvas_tool li .canvas_tool_subwrap .subtool_wrap li.shape-triangle {
  background-image: url(assets/images/4260cb19deaa1292a5a847b5b8f4bde0.svg);
  box-sizing: border-box;
}

.contents_wrap.whiteboard .canvas_tool li .canvas_tool_subwrap .subtool_wrap li:first-child,
.contents_wrap.whiteboard .canvas_tool li .canvas_tool_subwrap .subtool_wrap li.active,
.contents_wrap.whiteboard .canvas_tool li .canvas_tool_subwrap .subtool_wrap li:hover {
  opacity: 1;
}

.contents_wrap.whiteboard .canvas_tool li .canvas_tool_subwrap .subtool-colorpicker {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  padding-right: 20px;
}

.contents_wrap.whiteboard .canvas_tool li .canvas_tool_subwrap .subtool_wrap li .color_fill {
  border: 2px solid #fff;
  width: 100%;
  height: 100%;
  background-image: url(assets/images/69d13b8b48cf5d0288941e6e4b911146.svg);
  box-sizing: border-box;
  border-radius: 50%;
  display: block;
  position: relative;
}

.contents_wrap.whiteboard .canvas_tool li .canvas_tool_subwrap .subtool_wrap .stroke {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.contents_wrap.whiteboard .canvas_tool li .canvas_tool_subwrap .subtool_wrap .stroke p {
  color: #fff;
  font-size: 13px;
}

.contents_wrap.whiteboard .canvas_tool li .canvas_tool_subwrap .subtool_wrap .stroke p:first-child {
  margin-bottom: 5px;
  height: 30px;
  background-color: rgba(255, 255, 255, 0.7);
}

.contents_wrap.whiteboard .canvas_tool li .canvas_tool_subwrap .subtool_wrap .stroke_1px {
  width: 1px;
}

.contents_wrap.whiteboard .canvas_tool li .canvas_tool_subwrap .subtool_wrap .stroke_3px {
  width: 3px;
}

.contents_wrap.whiteboard .canvas_tool li .canvas_tool_subwrap .subtool_wrap .stroke_5px {
  width: 5px;
}

.contents_wrap.whiteboard .canvas_tool li .canvas_tool_subwrap .subtool_wrap .stroke_8px {
  width: 8px;
}

.contents_wrap.whiteboard .canvas_tool li .canvas_tool_subwrap .subtool_wrap .stroke_12px {
  width: 12px;
}

/* colorPicker CSS */
.colorPicker {
  position: absolute;
  top: 30px;
  left: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  z-index: 10;
  height: 230px;
  box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
  background-color: #f4f4f4;
  border-radius: 15px;
  overflow: hidden;
}

.twod {
  width: 200px;
  height: 150px;
}

.twod .pointer {
  position: relative;
  z-index: 2;
  width: 8px;
}

.pointer .shape {
  position: absolute;
}

.pointer .shape1 {
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border: 2px solid black;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

.pointer .shape2 {
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border: 2px solid white;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

.twod .bg {
  width: 200px;
  height: 150px;
  position: absolute;
}

.twod .bg1 {
  z-index: 0;
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

.twod .bg2 {
  z-index: 1;
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 1)));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
}

.oned {
  width: 160px;
  height: 20px;
}

.oned:last-child {
  margin-bottom: 15px;
}

.oned .pointer {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

.oned .pointer .shape {
  position: absolute;
  margin: 0;
  width: 4px;
  height: 20px;
  border: 1px solid #b5b5b5;
  box-sizing: border-box;
  box-shadow: 0 0 10px rgb(0 0 0 / 20%);
  border-radius: 2px;
  background-color: #bbb;
  margin-top: -4px;
  margin-left: -2px;
}

.oned .bg {
  height: 11px;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 66%, #ff00ff 83%, #ff0000 100%);
  border: 1px solid #bbb;
  box-sizing: border-box;
}

.extras .alpha {
  background-image: url(assets/images/69d13b8b48cf5d0288941e6e4b911146.svg);
  border-radius: 10px;
  height: 10px;
}

.extras .alpha .bg {
  background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

/* main dimensions */
/*.colorPicker .twod,*/
/*.colorPicker .twod .bg {*/
/*  width: 200px;*/
/*  height: 200px;*/
/*  border-top-left-radius: 20px;*/
/*  border-top-right-radius: 20px;*/
/*}*/

/*.colorPicker .twod .bg {*/
/*  position: absolute;*/

/* These seem to cause issues in some browsers, careful!
  border: 1px solid #BBB;
  -moz-border-radius: .3em;
  border-radius: .3em;
  */
/*}*/
/*.colorPicker .twod .pointer {*/
/*  position: relative;*/
/*  z-index: 2;*/
/*  width: 8px;*/
/*}*/
/*.colorPicker .twod .pointer .shape {*/
/*  position: absolute;*/
/*}*/
/*.colorPicker .twod .pointer .shape1 {*/
/*  -webkit-transform: translate(-50%, -50%);*/
/*  -ms-transform: translate(-50%, -50%);*/
/*  transform: translate(-50%, -50%);*/
/*  width: 10px;*/
/*  height: 10px;*/
/*  border: 2px solid black;*/
/*  -moz-border-radius: 50%;*/
/*  border-radius: 50%;*/
/*}*/
/*.colorPicker .twod .pointer .shape2 {*/
/*  -webkit-transform: translate(-50%, -50%);*/
/*  -ms-transform: translate(-50%, -50%);*/
/*  transform: translate(-50%, -50%);*/
/*  width: 8px;*/
/*  height: 8px;*/
/*  border: 2px solid white;*/
/*  -moz-border-radius: 50%;*/
/*  border-radius: 50%;*/
/*}*/

/* gradients, tweak as needed based on which browsers you want to support */

/*.colorPicker .twod .bg1 {*/
/*  z-index: 0;*/
/*  background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);*/
/*  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));*/
/*  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);*/
/*  background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);*/
/*  background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);*/
/*}*/
/*.colorPicker .twod .bg2 {*/
/*  z-index: 1;*/
/*  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);*/
/*  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 1)));*/
/*  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);*/
/*  background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);*/
/*  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);*/
/*}*/

#hslPicker .twod .bg1 {
  background: -moz-linear-gradient(left, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 66%, #ff00ff 83%, #ff0000 100%);
  background: -webkit-gradient(linear,
      left top,
      right top,
      color-stop(0%, #ff0000),
      color-stop(17%, #ffff00),
      color-stop(33%, #00ff00),
      color-stop(50%, #00ffff),
      color-stop(66%, #0000ff),
      color-stop(83%, #ff00ff),
      color-stop(100%, #ff0000));
  background: -webkit-linear-gradient(left, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 66%, #ff00ff 83%, #ff0000 100%);
  background: -o-linear-gradient(left, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 66%, #ff00ff 83%, #ff0000 100%);
  background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 66%, #ff00ff 83%, #ff0000 100%);
}

#hslPicker .twod .bg2 {
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(127, 127, 127, 1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(127, 127, 127, 1)));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(127, 127, 127, 1) 100%);
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(127, 127, 127, 1) 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(127, 127, 127, 1) 100%);
}

#hslPicker .oned .bg {
  z-index: 1;
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
  background: -webkit-gradient(linear,
      left top,
      left bottom,
      color-stop(0%, rgba(255, 255, 255, 1)),
      color-stop(50%, rgba(0, 0, 0, 0)),
      color-stop(100%, rgba(0, 0, 0, 1)));
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 100%);
  background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
}

#hslPicker .extras {
  width: 100px;
}

#hslPicker .oned.alpha {
  margin: 0;
}

#hslPicker .oned.alpha .bg {
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(0, 0, 0, 1)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%);
  /* Opera 11.10+ */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%);
  /* W3C */
}

/* popup_whiteboard CSS end */


/* popup_map CSS start */
.popup_wrap#map .popup_dim {
  background-color: unset;
}

.popup_wrap#map .popup_dim .popup_bg {
  max-width: 1400px;
  max-height: 780px;
  padding: 0;
  border-radius: 50px;
  border: 10px solid #fff;
  box-shadow: 5px 8.7px 11px 0 rgba(105, 105, 105, 0.25);
  background-color: unset;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup_wrap#map .popup_dim .popup_bg>button.close {
  display: none;
}

.popup_wrap#map .contents_wrap.map {
  width: 100vw;
  height: 100vh;
  overflow: unset;
  border-radius: unset;
  /* 중앙 정렬 */
  align-items: center;
  display: flex;
  justify-content: center;
}

.popup_wrap#map .contents_wrap.map .map_wrap {
  position: relative;
  width: 1920px;
  height: 1080px;
  cursor: move;
  user-select: none;
  align-items: center;
  display: flex;
  justify-content: center;
}

.popup_wrap#map .contents_wrap.map .location {
  position: absolute;
  display: flex;
  justify-content: center;
  align-self: center;
}

.popup_wrap#map .contents_wrap.map .location .location_wrap {
  width: fit-content;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.popup_wrap#map .contents_wrap.map .location .location_wrap .mark {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 7px solid #fff;
  z-index: 2;
  background-color: #f00;
  cursor: pointer;
  transition: 0.3s;
  position: absolute;
}

.popup_wrap#map .contents_wrap.map .location .location_wrap .mark:hover {
  border: 20px solid #F00;
  background-color: #fff;
  transform: scale(1.05);
  transform-origin: center;
}

.popup_wrap#map .contents_wrap.map .location .location_wrap .title {
  padding: 10px 20px;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  z-index: 100;
  top: -90px;
  font-size: 22px;
  display: none;
  justify-content: center;
  z-index: 101;
}

.popup_wrap#map .contents_wrap.map .location .location_wrap .title::before {
  word-break: keep-all;
  white-space: wrap;
}

.popup_wrap#map .contents_wrap.map .location .location_wrap .mark:hover~.title {
  display: flex;
}

.popup_wrap#map .contents_wrap.map .location .location_wrap .title::after {
  content: url(assets/images/759826bdd2fd29f4c627f1d6e2afc5c5.svg);
  position: absolute;
  bottom: -35px;
  opacity: 0.8;
}

.popup_wrap#map .contents_wrap.map .map_wrap .map_img {
  width: inherit;
  height: inherit;
  position: absolute;
  background-image: url(assets/images/218f736694c0acddba25014a7d4a5128.webp);
  z-index: 1;
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.lobby01 {
  top: 354px;
  left: 1468px
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.lobby01 .title::before {
  content: 'T1';
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.park01 {
  top: 390px;
  left: 1320px
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.park01 .title::before {
  content: 'Park';
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.showroom01 {
  top: 550px;
  left: 1390px
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.showroom01 .title::before {
  content: 'Showroom01';
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.showroom02 {
  top: 550px;
  left: 1275px
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.showroom02 .title::before {
  content: 'Showroom02';
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.showroom03 {
  top: 460px;
  left: 1260px
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.showroom03 .title::before {
  content: 'Showroom03';
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.lounge {
  top: 480px;
  left: 1340px
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.lounge .title::before {
  content: 'Lounge';
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.game01 {
  top: 570px;
  left: 1450px
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.game01 .title::before {
  content: 'Gameland';
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.station01 {
  top: 590px;
  left: 1520px
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.station01 .title::before {
  content: 'Station01';
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.restaurant01 {
  top: 550px;
  left: 1570px
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.restaurant01 .title::before {
  content: 'Cafe&Bar';
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.park02 {
  top: 820px;
  left: 1490px
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.park02 .title::before {
  content: 'Metaland';
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.convention01 {
  top: 650px;
  left: 1650px
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.convention01 .title::before {
  content: 'Convention';
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.museum01 {
  top: 490px;
  left: 1680px;
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.museum01 .title::before {
  content: 'Museum';
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.gallery01 {
  top: 410px;
  left: 1550px
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.gallery01 .title::before {
  content: 'Gallery';
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.lighthouse {
  top: 150px;
  left: 270px;
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.lighthouse .title::before {
  content: 'Lighthouse';
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.miniworld01 {
  top: 320px;
  left: 370px;
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.miniworld01 .title::before {
  content: 'Miniworld01';
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.miniworld02 {
  top: 510x;
  left: 230px
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.miniworld02 .title::before {
  content: 'Miniworld02';
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.artcenter01 {
  top: 580px;
  left: 660px
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.artcenter01 .title::before {
  content: 'Artcenter';
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.observatory01 {
  top: 770px;
  left: 420px
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.observatory01 .title::before {
  content: 'Observatory';
}


.popup_wrap#map .contents_wrap.map .map_wrap .location.spaceship01 {
  top: 940px;
  left: 530px;
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.spaceship01 .title::before {
  content: 'Spaceship';
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.station02 {
  top: 840px;
  left: 590px;
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.station02 .title::before {
  content: 'Station02';
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.hanok_cafe01 {
  top: 210px;
  left: 780px
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.hanok_cafe01 .title::before {
  content: 'Hanokcafe';
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.campingground {
  top: 210px;
  left: 875px;
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.campingground .title::before {
  content: 'Campground';
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.station03 {
  top: 350px;
  left: 875px;
}

.popup_wrap#map .contents_wrap.map .map_wrap .location.station03 .title::before {
  content: 'Station03';
}

/* popup_map CSS end */



/* joystick CSS start */
/* touch control */
.touch-area {
  user-select: none;
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  transition: opacity 0.3s ease 0s;
  will-change: opacity;
  opacity: 1;
  visibility: hidden;
}

.touch-area>.inner {
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
  width: 50px;
  height: 50px;
  border: 3px solid white;
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
  will-change: transform;
}

.touch-area>.outer {
  position: absolute;
  top: calc(50% - 60px);
  left: calc(50% - 60px);
  width: 120px;
  height: 120px;
  border: 2px solid white;
  border-radius: 50%;
  opacity: 0.5;
  pointer-events: none;
  box-sizing: border-box;
}

/* joystick CSS end */
/* room edit button CSS start */
.roomedit_btn {
  width: 230px;
  height: 60px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(to right, #1d75bd, #6900c7);
  font-size: 22px;
  border-radius: 30px;
  opacity: 0.7;
  transition: 0.5s;
  position: fixed;
  top: 24px;
  right: 24px;
  box-shadow: 5px 8.7px 13px 0 rgba(173, 178, 185, 0.1);
  box-sizing: border-box;
  outline: none;
  border: 0;
}

.roomedit_btn:hover {
  opacity: 1;
}

.roomedit_btn img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  content: url(assets/images/fc3969ae219078bbf2d8b4585ad093f2.svg);
}

/* map button CSS start */
button.map {
  width: 110px;
  height: 120px;
  background-image: url(assets/images/dfacadb1c2d590e73e9b2093443ff400.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-color: unset;
  outline: none;
  border: 0;
  position: fixed;
  top: 30px;
  right: 30px;
  transition: 0.3s;
  transform: scale(90%);
  cursor: pointer;
}

button.map:hover {
  transform: scale(100%);
}

button.map.on {
  width: 50px;
  height: 50px;
  background-image: url(assets/images/1a09789e080df9998463717b005d27f0.svg);
}

/* room edit button CSS end */
/* navigation CSS start */
.navigation_wrap {
  position: fixed;
  right: 24px;
  bottom: 24px;
  transition: opacity 0.3s ease 0.4s;
  transition: right 0.5s;
  will-change: opacity;
  opacity: 0;
  z-index: 2;
}

.navigation_subwrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.navigation_subwrap button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background-color: rgba(0, 0, 0, 0.2);
  transition: 0.5s;
  cursor: pointer;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.navigation_subwrap button:hover {
  border-color: rgb(255, 255, 255);
}

.navigation_subwrap button:not(.on):nth-child(1),
.navigation_subwrap button:not(.on):nth-child(2),
.navigation_subwrap button:not(.on):nth-child(3) {
  background-color: rgba(255, 255, 255, 0.5);
}

.navigation_subwrap button.on .menu_cam {
  content: url(assets/images/09b6636086b942b914517dae9aff8287.svg);
}

.navigation_subwrap button .menu_cam {
  content: url(assets/images/c476658b0dc22ec136a733e71939ac6d.svg);
}

.navigation_subwrap button.on .menu_mic {
  content: url(assets/images/f06ed517963a4eeefa4f7a3976e23ecb.svg);
}

.navigation_subwrap button .menu_mic {
  content: url(assets/images/85396cb1b0e5d632ebb5a5b314c15898.svg);
}

.navigation_subwrap button.on .menu_bgm {
  content: url(assets/images/f02c752d6d0c8852e98e7789c96c428b.svg);
}

.navigation_subwrap button .menu_bgm {
  content: url(assets/images/238d9330c7d2f2a33d805a4a7fea5908.svg);
}

.navigation_subwrap button.on .menu_chat {
  content: url(assets/images/487cb96ea30d1b529793628a0147d0d1.svg);
}

.navigation_subwrap button:not(.on).new::before {
  content: url(assets/images/ee0883714965815f28a787142a94b233.svg);
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  z-index: 2;
}

.navigation_subwrap button .menu_chat {
  content: url(assets/images/22db1b47aea2b7dbe361ad3a1c876cfc.svg);
}

.navigation_subwrap button .menu_invite {
  content: url(assets/images/658d8afb3c349cabde5f96b7152c5598.svg);
}

.navigation_subwrap button .menu_notice_popup {
  content: url(assets/images/3760fb499eed6fb1dd1fc46aaaa75599.svg);
}

.navigation_subwrap button.on .menu_bookmark {
  content: url(assets/images/98ce02e4ca4d01d96e7b51c71c072b04.svg);
}

.navigation_subwrap button .menu_bookmark {
  content: url(assets/images/11a6ecaadce285757a2ba7ed63ad18e8.svg);
}

.navigation_subwrap button.on .menu_list {
  content: url(assets/images/e15ab09ba9c18a5ee6a6a3f3b8cb40a4.svg);
}

.navigation_subwrap button .menu_list {
  content: url(assets/images/76413e74491c1249bba2e1123f7b1458.svg);
}

.navigation_subwrap button .menu_guide {
  content: url(assets/images/b3832503458ff76dda8b3f6dd5251d49.svg);
}

.navigation_subwrap button .menu_setting {
  content: url(assets/images/88dace0da02b5251295f7266a35120c6.svg);
}

.navigation_subwrap button .menu_exit {
  content: url(assets/images/4d0a3d3e99fec53cd2c46c54d7c7e8fd.svg);
}

.navigation_subwrap button .menu_screenshot {
  content: url(assets/images/61cda46cd0e39cbd4b295e8a509dd2c9.svg);
}

.navigation_subwrap button#back {
  display: none;
}

.navigation_subwrap button#back p {
  content: url(assets/images/9fb0323723a780f66f071c90e9c88255.svg);
}

.navigation_wrap.has_chat,
.navigation_wrap.has_user {
  right: 310px;
}

/* set_menu CSS start */
.navigation_subwrap button .setmenu_wrap {
  position: absolute;
  top: calc((100% - 120px) /2);
  left: -140px;
  background-color: #242424;
  width: fit-content;
  z-index: 2;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.1);
}

.navigation_subwrap button>.setmenu_wrap .setmenu_subwrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  border: 0;
  height: 40px;
  padding: 0 15px;
  color: #fff;
  font-size: 14px;
}

.navigation_subwrap button>.setmenu_wrap .setmenu_subwrap:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.navigation_subwrap button>.setmenu_wrap .setmenu_subwrap .setmenu_ico {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  background-position: center center;
  background-size: contain;
}

.navigation_subwrap button>.setmenu_wrap .setmenu_subwrap .setmenu_ico.mic {
  background-image: url(assets/images/30aa2b0e0669a1fd871c9793131f031e.svg);
}

.navigation_subwrap button>.setmenu_wrap .setmenu_subwrap .setmenu_ico.cam {
  background-image: url(assets/images/4d6578d38b23c6760a3db075e5ed83e7.svg);
}

.navigation_subwrap button>.setmenu_wrap .setmenu_subwrap .setmenu_ico.env {
  background-image: url(assets/images/6ba05eef9b4a7ec6270cbaad49c2cc8a.svg);
}

/* set_menu CSS end */
/* invite menu CSS start */
.invitemenu_wrap {
  position: absolute;
  top: calc((100% - 120px) /2);
  left: -340px;
  background-color: #242424;
  width: fit-content;
  z-index: 2;
  border-radius: 5px;
  box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.1);
  font-size: 14px;
  padding: 15px;
}

.invitemenu_wrap > .ico_close {
  content: '';
  top: -60px;
  position: absolute;
  left: calc((100% - 40px) /2);
  width: 10px;
  height: 10px;
  background-image: url(assets/images/1a09789e080df9998463717b005d27f0.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30%;
  background-color: rgba(0, 0, 0, 0.2);
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px;
  cursor: pointer;
}

.invitemenu_wrap .invitemenu_subwrap {
  width: 100%;
  color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.invitemenu_wrap .invitemenu_subwrap:first-child {
  margin-bottom: 15px;
}

.invitemenu_wrap .invitemenu_title {
  width: 70px;
  margin-right: 5px;
}

.invitemenu_wrap .invitemenu_subwrap .invitemenu_url {
  display: flex;
  align-items: center;
}

.invitemenu_wrap .invitemenu_subwrap .invitemenu_copy,
.invitemenu_wrap .invitemenu_subwrap .invitemenu_mail {
  width: calc(100% - 75px);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.invitemenu_wrap .invitemenu_subwrap .invitemenu_copy {
  background: #000;
  border: 0;
  padding: 5px 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  box-sizing: border-box;
  outline: none;
  border-radius: 5px;
}

.invitemenu_wrap .invitemenu_subwrap input {
  width: 100%;
  max-width: 180px;
  background: #000;
  border: 0;
  padding: 5px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  box-sizing: border-box;
  outline: none;
}

.invitemenu_wrap .invitemenu_subwrap .invitemenu_copy div {
  width: 15px;
  height: 15px;
  background-image: url(assets/images/5f80f91dbbdc93fc59963590230a3aa0.svg);
  background-size: cover;
  background-position: 0 0;
  background-repeat: no-repeat;
}

.invitemenu_wrap .invitemenu_subwrap .invitemenu_mail input {
  width: calc(100% - 55px);
  background: #000;
  border: 0;
  padding: 10px 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  box-sizing: border-box;
  outline: none;
  border-radius: 5px;
}

.invitemenu_wrap .invitemenu_subwrap .invitemenu_btn {
  width: 50px;
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffcc00;
  border-radius: 5px;
  transition: 0.5s;
  color: #242424;
  margin-left: 5px;
  font-size: 12px;
}

.invitemenu_wrap .invitemenu_subwrap .invitemenu_btn:hover {
  background-color: #c9a309;
}

.invitemenu_wrap .invitemenu_subwrap:nth-child(2) {
  margin-bottom: 15px;
}

.invitemenu_wrap .invitemenu_subwrap div.icon_sns {
  width: 50px;
  height: 34px;
  display: flex;
  justify-content: start;
  align-items: center;
  border-radius: 5px;
  transition: 0.5s;
  color: #242424;
  margin-left: 5px;
  font-size: 12px;
}

.invitemenu_wrap .invitemenu_subwrap div.icon_sns>img {
  width: 24px;
  height: 24px;
  margin-right: 5px;
  border-radius: 5px;
}

.invitemenu_wrap .invitemenu_subwrap div.icon_sns>img[data-for=kakaotalk] {
  content: url(assets/images/673447406a4be2028425cf5ce92dcc75.png);
}

.invitemenu_wrap .invitemenu_subwrap div.icon_sns>img[data-for=line] {
  content: url(assets/images/223454b2d2506638805c59cfb12925c8.png);
}

.invitemenu_wrap .invitemenu_subwrap div.icon_sns>img[data-for=twitter] {
  content: url(assets/images/bacb8c377bbe5079d098e2e572d00c76.png);
}

.invitemenu_wrap .invitemenu_subwrap div.icon_sns>img[data-for=facebook] {
  content: url(assets/images/811b689325e0ce7d4403fb5085ee6dd9.png);
}

.invitemenu_wrap .invitemenu_subwrap div.icon_sns>img[data-for=naver] {
  content: url(assets/images/09cb0f67b90c07576d3142b01ccf6392.png);
}

/* invite menu CSS end */

/* User List CSS start */
.user_wrap {
  background-color: #242424;
  width: 300px;
  height: 100vh;
  position: fixed;
  right: -300px;
  top: 0;
  transition: 0.5s;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  overflow: hidden;

  display: flex;
  flex-direction: column;
}

.user_wrap.on {
  right: 0;
}

.user_wrap .user_list_title {
  font-size: 14px;
  width: 100%;
  height: 50px;
  padding-left: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  cursor: default;
  color: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.user_wrap .user_list_title>.user_list_count {
  margin: 0 2px;
}

.user_wrap .all_userlist_wrap {
  width: 90%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 15px auto;
}

.all_userlist_wrap>.title {
  font-size: 14px;
  opacity: .8;
}

.user_wrap .userlist_help_wrap {
  font-size: 12px;
  padding: 10px 15px;
  line-height: 1.5;
  color: #999;
  text-align: center;
}

.user_wrap .userlist_help_wrap>a {
  opacity: 1;
  color: #fc0;
  margin-left: 5px;
}

.user_wrap .user_list_wrap {
  width: 100%;
  /* height: calc(100% - 170px); */
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  /* overflow: overlay; */
  position: relative;
}

.user_wrap .user_list_wrap::-webkit-scrollbar {
  width: 6px;
  border-radius: 3px;
}

.user_wrap .user_list_wrap::-webkit-scrollbar-thumb {
  background-color: hsla(0, 0%, 42%, 0.49);
  border-radius: 100px;
}

.user_wrap .user_list_subwrap {
  width: 90%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 15px auto;
}

.user_wrap .user_list_wrap .user_list_subwrap .user_name {
  width: calc(100% - 70px);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.user_wrap .user_list_wrap .user_list_subwrap.myname .user_name {
  width: 100%;
}

.user_wrap .user_list_wrap .user_list_subwrap .user_name span {
  color: #fff;
  padding-right: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
  font-size: 14px;
}

.user_wrap .user_list_wrap .user_list_subwrap.admin.myname .user_name {
  width: calc(100% - 70px);
}

.user_wrap .user_list_wrap:not(.admin) .user_list_subwrap.myname.admin {
  display: none;
}

.user_wrap .user_list_wrap.admin .user_list_subwrap.myname:not(.admin),
.user_wrap .user_list_wrap.admin .user_list_subwrap:not(.myname).admin {
  display: none;
}

.user_wrap .user_list_wrap .user_list_subwrap.myname .user_name::after {
  content: '(나)';
  color: #ffd800;
  font-size: 12px;
}

.user_wrap .user_list_wrap .user_list_subwrap.admin .user_name::before {
  content: '';
  background-image: url(assets/images/9b6ad0c55872003d52eda9ad9d1df212.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  flex-shrink: 0;
}

.user_wrap .user_list_wrap .user_list_subwrap.editor .user_name::before {
  content: '';
  background-image: url(assets/images/bb82ed46d55851b3c4b7814ad5e8895f.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  flex-shrink: 0;
}

.user_wrap .user_list_wrap .user_list_subwrap .user_btn_wrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
}

.user_wrap .user_list_wrap .user_list_subwrap>.dormant_date {
  font-size: 14px;
  opacity: .7;
}

.user_wrap .user_list_wrap>button.edit_grant {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: none;
  background-color: #efefef;
  border: 1px solid #ddd;
  outline: none;
  color: #242424;
  box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.1);
  font-size: 12px;
  height: 30px;
  padding: 0 15px;
  transition: 0.5s;
}

.user_wrap .user_list_wrap>button.edit_grant:hover {
  background-color: #fff;
}

.user_wrap .user_list_wrap>button.edit_grant.active {
  display: block;
}

.user_wrap .user_list_wrap .user_btn_wrap>button {
  width: 18px;
  height: 18px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: rgba(255, 255, 255, 0);
  border: 0;
  outline: none;
  opacity: 0.7;
  transition: 0.5s;
}

.user_wrap .user_list_wrap .user_btn_wrap>button:hover {
  opacity: 1;
}

.user_wrap .user_list_subwrap.myname .user_btn_wrap>button.ivc,
.user_wrap .user_list_subwrap.myname .user_btn_wrap>button.i11,
.user_wrap .user_list_subwrap.myname .user_btn_wrap>button.iws {
  display: none;
}

.user_wrap .user_list_subwrap.myname .user_btn_wrap>button.out {
  visibility: hidden;
}

.user_list_wrap.admin>.user_list_subwrap .user_name {
  width: calc(100% - 145px);
}

.user_list_wrap>.user_list_subwrap.editor .user_name {
  width: calc(100% - 125px);
}

.user_wrap .user_list_wrap:not(.admin) .user_btn_wrap>button.mic,
.user_wrap .user_list_wrap:not(.admin) .user_btn_wrap>button.cam,
.user_wrap .user_list_wrap:not(.admin) .user_btn_wrap>button.out {
  display: none;
}

.user_wrap .user_list_wrap .user_list_subwrap .user_btn_wrap>button.ivc {
  background-image: url(assets/images/1f36006cd84c6eb53c74c26c5be0b6c4.svg);
}

.user_wrap .user_list_wrap .user_list_subwrap .user_btn_wrap>button.i11 {
  background-image: url(assets/images/f28ea3e1fab3de3b85d8c362975f4717.svg);
  display: none;
}

.user_wrap .user_list_wrap .user_list_subwrap .user_btn_wrap>button.iws {
  background-image: url(assets/images/3b1ff2abc601bf18e60bb7d28af8172e.svg);
}

.user_wrap .user_list_wrap .user_list_subwrap .user_btn_wrap>button.mic {
  background-image: url(assets/images/1daee3d7fbe5e3955dce108c2faf8b66.svg);
}

.user_wrap .user_list_wrap .user_list_subwrap .user_btn_wrap.a>button.mic {
  background-image: url(assets/images/63d98167790f7a6553cb8a496a244b34.svg);
}

.user_wrap .user_list_wrap .user_list_subwrap .user_btn_wrap>button.cam {
  background-image: url(assets/images/5b65d136e504a840b083eeae1b5c546f.svg);
}

.user_wrap .user_list_wrap .user_list_subwrap .user_btn_wrap.v>button.cam {
  background-image: url(assets/images/a268e6ae1909f3c5cee44084bab1ba1f.svg);
}

.user_wrap .user_list_wrap .user_list_subwrap .user_btn_wrap>button.out {
  background-image: url(assets/images/717c0ca61f369595e5e290e45a7baea0.svg);
}

.user_wrap .user_list_wrap .user_list_subwrap .dormant_date {
  display: none;
}

/* .user_wrap .user_list_wrap .user_list_subwrap.dormant {
  display: none;
} */
.user_wrap .user_list_wrap .user_list_subwrap.dormant:not(.myname) {
  display: none;
}

.user_wrap .user_list_wrap.dormant .user_list_subwrap.dormant {
  display: flex;
}

.user_wrap .user_list_wrap .user_list_subwrap.dormant:not(.myname) .user_btn_wrap {
  display: none;
}

.user_wrap .user_list_wrap .user_list_subwrap.dormant:not(.myname) .dormant_date {
  display: inherit;
}

/* User List CSS end */

/* chat CSS start */
.chat_wrap {
  width: 300px;
  height: 100vh;
  position: fixed;
  top: 0;
  bottom: 0;
  right: -300px;
  z-index: 100;
  overflow: hidden;
  background: #242424;
  color: #fff;
  transition: 0.5s;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

.chat_wrap.on {
  right: 0;
}

.chat_wrap .chat_subwrap {
  position: static;
  height: calc(100% - 130px);
}

.chat_wrap .chat_subwrap .chat_title {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.chat_wrap .chat_subwrap .chat_title div {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 16px;
}

.chat_wrap .chat_subwrap .chat_title div.help {
  font-size: 12px;
  opacity: 0.5;
  text-decoration: underline;
  transition: 0.5s;
  justify-content: flex-end;
}

.chat_wrap .chat_subwrap .chat_title div.help:hover {
  opacity: 1;
  cursor: pointer;
}

.chat_wrap .chat_subwrap .chat_field {
  width: 100%;
  height: calc(100% - 50px);
  padding: 20px;
  box-sizing: border-box;
  overflow: overlay;
  font-size: 14px;
  color: #dedede;
  line-height: 1.5;
  font-weight: 300;
  z-index: 10;
  word-break: break-all;
  letter-spacing: 0.5px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
}

.chat_wrap .chat_subwrap .chat_field p span {
  display: inline-block;
}

.chat_wrap .chat_subwrap .chat_field p>span.user_name {
  font-weight: bold;
}

.chat_wrap .chat_subwrap .chat_field p.entery {
  width: 100%;
  color: #edc336;
  font-weight: bold;
  display: flex;
  justify-content: center;
}

.chat_wrap .chat_subwrap .chat_field p.notice,
.chat_wrap .chat_subwrap .chat_field p.whisper {
  padding: 14px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-align: justify;
  border-radius: 5px;
}

.chat_wrap .chat_subwrap .chat_field p.notice span.chat_notice {
  width: 13px;
  height: 13px;
  background-image: url(assets/images/ec1f27dac829a268227713be489cc609.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  display: inline-block;
  margin-right: 8px;
}

.chat_wrap .chat_subwrap .chat_field p.comment span.user_name {
  color: #fff;
  margin-right: 5px;
}

.chat_wrap .chat_subwrap .chat_field p.whisper {
  font-size: 14px;
  color: #ddd;
}

.chat_wrap .chat_subwrap .chat_field p.whisper span.chat_whisper {
  width: 13px;
  height: 13px;
  background-image: url(assets/images/5df0126fdfaec756d9d38afe1442391f.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  display: inline-block;
  margin-right: 8px;
}

.chat_wrap .chat_subwrap .chat_field p.whisper span.user_name {
  color: #fdbd39;
  font-weight: bold;
  margin-right: 3px;
}

.chat_wrap .chat_subwrap .chat_field p.whisper span.whisper_comment {
  display: block;
  font-weight: bold;
  margin-top: 5px;
}

.chat_wrap .chat_subwrap .chat_field p.exit {
  color: #e77079;
  font-weight: bold;
  width: 100%;
  display: flex;
  justify-content: center;
}

.chat_wrap .chat_subwrap .chat_field p.comment.admin,
.chat_wrap .chat_subwrap .chat_field p.comment.admin span.user_name {
  color: #6cfdc6;
}

.chat_wrap .chat_subwrap .chat_field::-webkit-scrollbar {
  width: 4px;
}

.chat_wrap .chat_subwrap .chat_field::-webkit-scrollbar-thumb {
  background: hsla(0, 0%, 42%, 0.5);
  border-radius: 2px;
}

.chat_wrap .chat_subwrap .chat_field .chatpop_whisper {
  padding: 15px;
  box-shadow: 6.5px 11.3px 21px 0 rgba(0, 0, 0, 0.2);
  background-color: #333;
  border-radius: 5px;
  display: none;
}

.chat_wrap .chat_subwrap .chat_field .chatpop_whisper.on {
  display: block;
}

.chat_wrap .chat_subwrap .chat_field .chatpop_whisper p.whisper {
  margin: 0;
  padding: 0;
  background: inherit;
  font-weight: 100;
  color: #ccc;
  font-size: 12px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.chat_wrap .chat_subwrap .chat_field .chatpop_whisper p.whisper span.chat_whisper {
  background-image: url(assets/images/4103d31c49ebf7eeded7fa0ac31d8424.svg);
  opacity: 0.5;
}

.chat_wrap .chat_subwrap .chat_field .chatpop_whisper .whisper_text_wrap {
  margin: 5px 0 15px 0;
  display: flex;
  align-items: center;
}

.chat_wrap .chat_subwrap .chat_field .chatpop_whisper .whisper_text_wrap input.whisper_text {
  width: calc(100% - 45px);
  height: 30px;
  padding: 5px 10px;
  box-sizing: border-box;
  outline: none;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 12px;
}

.chat_wrap .chat_subwrap .chat_field .chatpop_whisper .whisper_text_wrap .send_btn {
  height: 30px;
  width: 40px;
  margin-left: 5px;
  border-radius: 5px;
  outline: none;
  border: transparent;
  font-size: 12px;
}

.chat_wrap .chat_subwrap .chat_field .chatpop_whisper p.notify {
  margin-bottom: 0;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
}

.chat_wrap .chat_subwrap .chat_field .chatpop_whisper p.notify span.chat_notify {
  width: 13px;
  height: 13px;
  background-image: url(assets/images/5f93892bbe69a5a29d08526843a3d48e.svg);
  opacity: 0.5;
  margin-right: 5px;
}

.chat_wrap .chat_input_wrap {
  width: 100%;
  max-height: fit-content;
  min-height: 130px;
  position: absolute;
  bottom: 0;
  z-index: 100;
  word-break: break-all;
  background: rgba(0, 0, 0, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.chat_wrap .chat_input_wrap .chat_input {
  margin: 20px 20px 0 20px;
}

.chat_wrap .chat_input_wrap .chat_input p.user_name {
  color: #fff;
  font-weight: 300;
  font-size: 14px;
  font-weight: bold;
}

.chat_wrap .chat_input_wrap .chat_input .textbox {
  margin: 10px 0;
}

.chat_wrap .chat_input_wrap .chat_input .textbox[contenteditable="true"] {
  min-height: 22px;
  color: #fff;
  line-height: 1.5;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  letter-spacing: 0.5px;
  cursor: text;
  outline: none;
  font-size: 14px;
}

.chat_wrap .chat_input_wrap .chat_input .textbox[contenteditable="true"]:empty:before {
  content: attr(placeholder);
  color: rgba(255, 255, 255, 0.3);
  display: block;
  font-size: 14px;
  font-weight: 300;
  padding-bottom: 2px;
}

.chat_wrap .chat_input_wrap .chat_input .emoji_wrap {
  padding: 5px;
  background-color: rgba(0, 0, 0, 0);
  display: none;
}

.chat_wrap .chat_input_wrap .chat_input .emoji_wrap.on {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 7px;
}

.chat_wrap .chat_input_wrap .chat_input .emoji_wrap a {
  font-size: 18px;
  transition: 0.5s;
  text-decoration: none;
}

.chat_wrap .chat_input_wrap .chat_input .emoji_wrap a:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.chat_wrap .chat_input_wrap .chat_input_btn_wrap {
  margin: 0 20px 20px 20px;
  display: flex;
  justify-content: space-between;
}

.chat_wrap .chat_input_wrap .chat_input_btn_wrap ul {
  display: flex;
  align-items: center;
}

.chat_wrap .chat_input_wrap .chat_input_btn_wrap ul li.chat_input_btn {
  /* width: 20px; */
  /* height: 20px; */
  opacity: 0.5;
  transition: 0.5s;
  width: 18px;
  height: 18px;
  background-image: url(assets/images/81d9b81f49b9477ac9d49827a3720d41.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.chat_wrap .chat_input_wrap .chat_input_btn_wrap ul li.chat_input_btn:hover {
  opacity: 1;
}

.chat_wrap .chat_input_wrap .chat_input_btn_wrap ul li.chat_input_btn.emoji {
  /* width: 18px; */
  /* height: 18px; */
  background-image: url(assets/images/3f2811d0fd3bf4e2a7cac00e11647ad0.svg);
  /* background-repeat: no-repeat; */
  /* background-position: center center; */
  /* background-size: cover; */
}

/* .chat_wrap .chat_input_wrap .chat_input_btn_wrap ul li.chat_input_btn.keyboard {
  width: 18px;
  height: 18px;
  background-image: url("../img/chat_keyboard.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
} */

.chat_wrap .chat_input_wrap .chat_input_btn_wrap ul li.chat_word_count {
  font-weight: 100;
  font-size: 12px;
  color: #fff;
  margin-left: 5px;
}

.chat_wrap .chat_input_wrap .chat_input_btn_wrap .send_btn {
  font-size: 14px;
  outline: none;
  border: 0;
  transition: 0.5s;
  font-weight: bold;
  border-radius: 5px;
  width: 50px;
  height: 40px;
}

/* 채팅 도움말 CSS */

.chat_wrap .chat_help_wrap {
  width: 100%;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  background-color: #292a2d;
  z-index: 100;
  display: none;
}

.chat_wrap .chat_help_wrap.on {
  display: block;
}

.chat_wrap .chat_help_wrap .chat_help {
  height: 100%;
  font-size: 13px;
  font-weight: normal;
  color: #999;
  line-height: 1.5;
  position: relative;
}

.chat_wrap .chat_help_wrap .chat_help_content {
  height: calc(100% - 60px);
  overflow: auto;
}

.chat_wrap .chat_help_wrap .chat_help .help_contentwrap {
  margin-bottom: 20px;
}

.chat_wrap .chat_help_wrap .chat_help .help_contentwrap:last-child,
.chat_wrap .chat_help_wrap .chat_help .help_contentwrap div:last-child {
  margin-bottom: 0;
}

.chat_wrap .chat_help_wrap .chat_help .help_contentwrap div {
  margin-bottom: 5px;
}

.chat_wrap .chat_help_wrap .chat_help .help_contentwrap div.help_title {
  font-size: 16px;
  color: #fff;
}

.chat_wrap .chat_help_wrap .chat_help .help_contentwrap div.hathelp_img {
  width: 100%;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

.chat_wrap .chat_help_wrap .chat_help .help_contentwrap div.hathelp_img.img001 {
  height: 114px;
  background-image: url(assets/images/1d509ec08dc5fc533c5ee7642cf140f2.png);
}

.chat_wrap .chat_help_wrap .chat_help .help_contentwrap div.hathelp_img.img002 {
  height: 90px;
  background-image: url(assets/images/2de7eead58e6723b2c3856b0c03b1585.png);
}

.chat_wrap .chat_help_wrap .chat_help .help_contentwrap div.hathelp_img.img003 {
  height: 100px;
  background-image: url(assets/images/ce84f478bf490c735e7f071f023173b9.png);
}

.chat_wrap .chat_help_wrap .chat_help .help_contentwrap div.hathelp_img.img004 {
  height: 77px;
  background-image: url(assets/images/7777ece7610d8ca92f77fb31a9b28030.png);
}

.chat_wrap .chat_help_wrap .chat_help .chat_help_close {
  width: 100%;
  height: 40px;
  text-align: center;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  position: absolute;
  bottom: 0;
  border-radius: 5px;
  outline: none;
  border: 0;
  font-size: 14px;
}

/* chat CSS end */

/* NPC Chat CSS start */

#npc_chat {
  width: 130px;
  height: 130px;
  border: 7px solid #efefef;
  border-radius: 50%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  background-color: #fff;
  position: fixed;
  bottom: 50px;
  left: calc((100% - 130px)/2);
  transition: 0.3s;
  cursor: pointer;
}

#npc_chat:hover {
  border: 7px solid #b892ee;
}

.ico_npcchat {
  width: 60px;
  height: 60px;
  background-image: url(assets/images/064c6d90330f78378d18fae008d2afa9.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.npcchat_ballun {
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: 20px;
  background-color: #fff;
  margin: 40px auto 0;
  position: relative;
  z-index: 2;
}

.npcchat_ballun::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: calc((100% - 30px)/2);
  background-image: url(assets/images/26a6ad5e90847aa58224c34cfa08dc8f.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 30px;
  height: 30px;
}

.npcchat_subtitle {
  padding: 40px;
  max-width: 580px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: #292a2d;
  line-height: 1.5;
  box-sizing: border-box;
}

.npcchat_ok {
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 24px;
  height: 12px;
  background-color: transparent;
  background-image: url(assets/images/e4ef99c2bc3d4df1b020d39c4db12beb.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border: 0;
  outline: 0;
}

.npcchat_sound.active {
  display: flex;
}

.npcchat_sound {
  position: absolute;
  bottom: 15px;
  left: 15px;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background-color: #24a876;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.npcchat_sound>.ico {
  background-color: #24a876;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background-image: url(assets/images/c64a071a5ce6e05f40c02e861f82889f.svg);
  background-position: center;
  background-size: 50%;
  background-repeat: no-repeat;
  z-index: 2;
}

.npcchat_wrap {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.npcchat_wrap.on {
  display: flex;
}

.npcchat_wrap>#close,
.aichat_wrap>#close {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 1);
  background-color: rgba(0, 0, 0, 0);
  transition: 0.5s;
  cursor: pointer;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 20px;
  right: 20px;
}

.npcchat_wrap>#close>.ico_close,
.aichat_wrap>#close>.ico_close {
  width: 26px;
  height: 26px;
  background-image: url(assets/images/1a09789e080df9998463717b005d27f0.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.wave {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #000;
  transform-origin: 50% 50%;
  position: absolute;
  opacity: 0.4;
  animation-duration: 1500ms;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
  animation-name: drift;
  z-index: -1;
  visibility: visible;
}

@keyframes drift {
  from {
    -webkit-transform: rotate(0deg) scale(0, 0);
    transform: rotate(0deg) scale(0, 0);
    opacity: 1;
  }

  to {
    -webkit-transform: rotate(360deg) scale(1.5, 1.5);
    transform: rotate(360deg) scale(1.5, 1.5);
    opacity: 0;
  }
}


.npcchat_subwrap {
  width: 90%;
  max-width: 920px;
  height: calc(100% - 250px);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  margin: 0 auto;
  gap: 30px;
  justify-content: flex-start;
}

.npcchat_top {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
  position: relative;
  margin-top: 40px;
}

.npcchat_top>.npcchat_topwrap {
  width: 100%;
  position: absolute;
  z-index: 1;
}

.npcchat_top .chatbot_onoff_wrap {
  width: 100%;
  max-width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  z-index: 2;
  visibility: hidden;
}

.npcchat_wrap.on.cb .npcchat_top .chatbot_onoff_wrap {
  visibility: visible;
}

.npcchat_top .chatbot_onoff_wrap .chatbot_onoff_subwrap {
  width: 160px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  font-size: 14px;
}

.npcchat_middle {
  width: 100%;
  height: calc(100% - 170px);
  overflow-x: hidden;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  visibility: hidden;
  display: flex;
  padding: 20px;
  box-sizing: border-box;
}

.npcchat_middle::-webkit-scrollbar {
  width: 4px;
}

.npcchat_middle::-webkit-scrollbar-thumb {
  background: hsla(0, 0%, 42%, 0.5);
  border-radius: 2px;
}

.npcchat_middle .chatbot_content_wrap {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.npcchat_wrap.on.cb .npcchat_middle.active {
  visibility: visible;
}

.npcchat_middle .chatbot_content_wrap .chatbot_content_subwrap {
  width: 100%;
  height: auto;
  padding: 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  justify-content: flex-end;
}


.npcchat_middle .chatbot_content_wrap .chatbot_content_subwrap .chat_contents {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.npcchat_middle .chatbot_content_wrap .chatbot_content_subwrap .chat_contents>div {
  width: auto;
  max-width: 520px;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 5px;
  box-sizing: border-box;
  color: #000;
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.5;
  position: relative;
}

.npcchat_middle .chatbot_content_wrap .chatbot_content_subwrap .chat_contents.chatbot {
  align-items: flex-start;
}

.npcchat_middle .chatbot_content_wrap .chatbot_content_subwrap .chat_contents.user {
  align-items: flex-end;
}

.npcchat_middle .chatbot_content_wrap .chatbot_content_subwrap .chat_contents.chatbot>div {
  margin-left: 10px;
}

.npcchat_middle .chatbot_content_wrap .chatbot_content_subwrap .chat_contents.user>div {
  margin-right: 10px;
  background-color: rgba(255, 204, 0, 0.9);
}

.npcchat_middle .chatbot_content_wrap .chatbot_content_subwrap .chat_contents.chatbot>div::before {
  content: '';
  width: 10px;
  height: 10px;
  position: absolute;
  top: 10px;
  left: -10px;
  background-image: url(assets/images/e1023cafebff56b89d32fe96a2ed32ee.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.9;
}

.npcchat_middle .chatbot_content_wrap .chatbot_content_subwrap .chat_contents.user>div::after {
  content: '';
  width: 10px;
  height: 10px;
  position: absolute;
  top: 10px;
  right: -10px;
  background-image: url(assets/images/04aba971725d0832ab86fcc85c070add.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.9;
}

.npcchat_bottom {
  width: 100%;
  display: none;
}

.npcchat_wrap.on.cb .npcchat_bottom {
  display: inherit;
}

.npcchat_bottom .chatbot_input_wrap {
  width: 100%;
  padding: 15px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}

.npcchat_bottom .chatbot_input_wrap .chatbot_input_subwrap {
  width: calc(100% - 70px);
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  background-color: #fff;
  border: 1px solid #efefef;
  border-radius: 5px;
  padding: 0 0 0 15px;
  box-sizing: border-box;
  position: relative;
}

.npcchat_bottom .chatbot_input_wrap .chatbot_input_subwrap>input {
  width: calc(100% - 100px);
  outline: none;
  border: 0;
  font-size: 14px;
}

.npcchat_bottom .chatbot_input_wrap .chatbot_input_subwrap>input::placeholder {
  color: #bbb;
  letter-spacing: normal;
}

.npcchat_bottom .chatbot_input_wrap .chatbot_input_subwrap>button {
  width: 30px;
  height: 30px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  transition: 0.3s;
  outline: none;
  border: 0;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.npcchat_bottom .chatbot_input_wrap .chatbot_input_subwrap>button.input_delete {
  background-image: url(assets/images/c7d7055c7a7be9dbda19f7e223c8313e.svg);
  background-color: #f2f2f2;
}

.npcchat_bottom .chatbot_input_wrap .chatbot_input_subwrap>button.input_mic {
  margin-left: 5px;
  background-color: #ddd;
  position: absolute;
  right: 15px;
}

.npcchat_bottom .chatbot_input_wrap .chatbot_input_subwrap>button.input_mic>.ico {
  background-image: url(assets/images/dd7c3ecfe6115e7beef897c22a188296.svg);
  display: block;
  width: 100%;
  height: 100%;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 2;
}

.npcchat_bottom .chatbot_input_wrap .chatbot_input_subwrap>button.input_delete:hover {
  background-image: url(assets/images/a1a1c4f8cfbd845e29c6c7ad68f014ae.svg);
  background-color: #999;
}

.npcchat_bottom .chatbot_input_wrap .chatbot_input_subwrap>button.input_mic:hover,
.npcchat_bottom .chatbot_input_wrap .chatbot_input_subwrap>button.input_mic.active {
  background-color: #fc0
}

.npcchat_bottom .chatbot_input_wrap .chatbot_input_subwrap>button.input_mic:hover>.ico,
.npcchat_bottom .chatbot_input_wrap .chatbot_input_subwrap>button.input_mic.active>.ico {
  background-image: url(assets/images/accb666a34da9a799d61e09b211bde3b.svg);
  display: block;
  width: 100%;
  height: 100%;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
}

.npcchat_bottom .chatbot_input_wrap .chatbot_input_subwrap>button.input_mic>.wave {
  display: none;
}

.npcchat_bottom .chatbot_input_wrap .chatbot_input_subwrap>button.input_mic.active>.wave {
  display: block;
  background-color: rgb(153, 125, 12);
  z-index: 1;
}

.npcchat_bottom .chatbot_input_wrap>button.chat_send {
  width: 60px;
  height: 50px;
  border-radius: 5px;
  outline: none;
  background-color: #fc0;
  border: 1px solid rgb(209, 168, 4);
  color: #242424;
  transition: 0.5s;
  cursor: pointer;
}

.npcchat_bottom .chatbot_input_wrap>button.chat_send:hover {
  background-color: rgb(209, 168, 4);
}

/* NPC Chat CSS end */

/* ai-npc Chat CSS start */
.aichat_wrap {
  width: 100%;
  height: 100%;
  position: fixed;
  display: none;
  justify-content: center;
  align-items: center;
}

.aichat_wrap.on {
  display: flex;
}

.aichat_subwrap {
  width: 90%;
  max-width: 900px;
  height: 90%;
  max-height: 800px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
}

.aichat_profile_wrap {
  width: calc(100% - 30px);
  max-width: 200px;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 20px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
}

.aichat_profile_wrap>.aiprofile_img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: rgb(163, 175, 192);
  border: 5px solid rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 1;
  /* background-image: url(''); */
  background-position: center;
  background-size: contain;
  overflow: hidden;
}

.aichat_profile_wrap>.aiprofile_name {
  width: 100%;
  padding: 5px 8px;
  margin-top: -10px;
  text-align: center;
  word-break: break-all;
  font-size: 14px;
}

.aichat_profile_wrap .aiprofile_subwrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
}

.aichat_profile_wrap .aiprofile_subwrap .aiprofile_content_wrap {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.aichat_profile_wrap .aiprofile_subwrap .aiprofile_content_wrap>div {
  width: calc((100% - 10px) /2);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  box-sizing: border-box;
}

.aichat_profile_wrap .aiprofile_subwrap .aiprofile_content_wrap~div {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 12px;
}

.aichat_chat_wrap {
  width: calc(100% - 30px);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
}

.npcchat_middle.aichat_chat_subwrap {
  width: 100%;
  visibility: visible;
  height: calc(100% - 85px);
  overflow: hidden;
}

.npcchat_middle.aichat_chat_subwrap .chatbot_content_wrap {
  height: calc(100% - 20px);
  overflow-x: hidden;
  overflow-y: auto;
}

.npcchat_middle.aichat_chat_subwrap .chatbot_content_wrap .chatbot_content_subwrap {
  padding: 0;
}

.aichat_chat_subwrap~.npcchat_bottom {
  display: block;
}

/* ai-npc Chat CSS end */

/* navigation CSS end */

/* fullscreen CSS start */
.need_full {
  position: relative;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: white;
  gap: 20px;
  background-color: #222;
  z-index: 50;
  overflow: hidden;
}

.aos,
.ios {
  width: 90%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: none;
}
.aos.active,
.ios.active {
  display: flex;
}

.need_full .title {
  width: 100%;
  font-size: 16px;
  text-align: center;
  line-height: 1.5
}

.need_full .subtitle {
  list-style: decimal;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
}
.need_full .ios .title {
  font-size: 24px;
  font-weight: 700;
}
.need_full .ios .subtitle {
  padding-left: 15px;
  margin-top: 10px;
  text-align: center;
  line-height: 1.5;
}
.need_full .ios > .wait_ico {
  width: 100px;
  height: 100px;
  content: url(assets/images/707484cb835541ef54642a8d3d53ffcf.png);
}

.need_full .jog {
  width: 90%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.need_full .jog > .ico_jog {
  width: 50px;
  height: 50px;
  background-image: url(assets/images/56ab3a51cb02055402022876ef4f7fc4.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.need_full ol {
  list-style-type: decimal;
}

.rotate_ico {
  width: 25%;
  opacity: 0.5;
  margin-bottom: 15px;
}

.need_full .btn {
  text-align: center;
  background-color: #2bc48a;
  border-radius: 5px;
  color: #fff;
  text-decoration: none;
  transition: 0.3s;
  width: 190px;
  height: 40px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* fullscreen CSS end */

/* Mediaqurey CSS start */
@media (max-width: 960px) {
  .touch-area {
    /* display: block; */
    visibility: visible;
  }

  .roomedit_btn {
    display: none;
  }

  button.map {
    width: 85px;
    height: 90px;
    right: 20px;
    top: 20px;
  }

  button.map.on {
    width: 30px;
    height: 30px;
  }

  .navigation_subwrap {
    flex-direction: row;
  }

  .navigation_wrap.has_chat,
  .navigation_wrap.has_user {
    right: 270px;
  }

  .navigation_wrap.has_chat button#back,
  .navigation_wrap.has_user button#back {
    display: inherit;
  }

  .navigation_wrap.has_chat button:not(#back),
  .navigation_wrap.has_user button:not(#back) {
    opacity: 0;
  }

  .navigation_subwrap button {
    width: 36px;
    height: 36px;
    margin-top: 0;
    margin-left: 10px;
  }

  .navigation_subwrap button p {
    transform: scale(70%);
  }

  .new::before {
    top: -5px;
    left: -5px;
  }

  .navigation_subwrap button .setmenu_wrap {
    left: -75px;
    top: -50px;
  }

  .navigation_subwrap button>.setmenu_wrap .setmenu_subwrap {
    font-size: 12px;
  }

  .navigation_subwrap button .setmenu_wrap .setmenu_subwrap:nth-child(1),
  .navigation_subwrap button .setmenu_wrap .setmenu_subwrap:nth-child(2) {
    display: none;
  }

  .navigation_subwrap button>.setmenu_wrap .setmenu_subwrap .setmenu_ico {
    width: 18px;
    height: 18px;
    margin-right: 5px;
  }

  .navigation_subwrap button .invitemenu_wrap {
    left: -280px;
    bottom: 40px;
    top: unset;
  }

  .invitemenu_wrap .invitemenu_title {
    width: 60px;
    font-size: 12px;
    transform: scale(1);
  }

  .invitemenu_wrap .invitemenu_subwrap .invitemenu_copy,
  .invitemenu_wrap .invitemenu_subwrap .invitemenu_mail {
    width: calc(100% - 65px);
  }

  .popup_wrap .popup_dim .popup_bg {
    max-width: none;
    max-height: none;
    background-color: rgba(0, 0, 0, 0);
    padding: 0;
    overflow: visible;
  }

  .popup_wrap .contents_wrap {
    border-radius: unset;
  }

  .popup_wrap .popup_dim .popup_bg button.close {
    right: 0;
    top: 0;
  }

  .popup_wrap .contents_wrap.img02 .img_title {
    font-size: 20px;
  }

  .popup_wrap .contents_wrap.img02 .img_subtitle {
    font-size: 14px;
  }

  .popup_wrap .contents_wrap.img02 .img_info_wrap {
    margin-left: 15px;
    width: 60%;
    max-width: none;
  }

  .popup_wrap .contents_wrap.img02 .img_wrap {
    width: 40%;
    max-width: none;
  }

  .popup_wrap .contents_wrap.entry_alret .entry_alret_wrap .entry_alret_subwrap {
    width: 100%;
    height: calc(100% - 60px);
    margin: 10px auto;
    max-height: none;
  }

  .popup_wrap .contents_wrap.entry_alret .entry_alret_wrap .entry_alret_subwrap .left_arr {
    transform: rotate(180deg) scale(70%);
  }

  .popup_wrap .contents_wrap.entry_alret .entry_alret_wrap .entry_alret_subwrap .right_arr {
    transform: scale(70%);
  }

  .popup_wrap .contents_wrap.entry_alret .entry_alret_wrap .entry_alret_subwrap .img_wrap {
    max-height: none;
  }

  .popup_wrap .contents_wrap.entry_alret .entry_alret_wrap .entry_title {
    height: 20px;
    font-size: 18px;
  }

  .popup_wrap .contents_wrap.entry_alret .entry_alret_wrap .btn_not_view {
    width: calc(100% - 85px);
  }

  .popup_wrap .contents_wrap.entry_alret .entry_alret_wrap .btn_not_view .entry_subtitle {
    font-size: 12px;
  }

  .popup_wrap#set_mic .contents_wrap.set_mic,
  .popup_wrap#set_cam .contents_wrap.set_cam,
  .popup_wrap#keyinfo .contents_wrap.keyinfo {
    display: none;
  }

  .popup_wrap#keyinfo_m .contents_wrap.keyinfo_m {
    display: flex;
  }

  .popup_wrap#whisper .popup_bg {
    width: 70%;
    bottom: 30px;
    background-color: #242424;
    padding: 20px;
  }

  .contents_wrap.loading .texts {
    font-size: 50px;
    position: unset;
  }

  .popup_wrap#floorinfo .popup_bg {
    max-width: none;
  }

  .popup_wrap#floorinfo .contents_wrap.floorinfo {
    width: 90%;
    margin: 0 auto;
  }

  .contents_wrap.floorinfo .floorinfo_title .text_ko {
    font-size: 20px;
  }

  .contents_wrap.floorinfo .floorinfo_title {
    height: 60px;
  }

  .contents_wrap.floorinfo .floorinfo_table {
    height: calc(100% - 90px);
    max-height: none;
  }

  .contents_wrap.floorinfo .floor_wrap {
    font-size: 14px;
    margin-bottom: 15px;
  }

  .popup_wrap#alret .popup_bg {
    width: auto;
    height: auto;
    max-width: calc(100% - 60px);
    max-height: calc(100% - 60px);
    background-color: #242424;
  }

  .contents_wrap.alret .alret_subtitle {
    font-size: 14px;
  }

  .popup_wrap#videocall .popup_dim {
    background-color: rgba(0, 0, 0, 1);
  }

  .popup_wrap#videocall .popup_dim .popup_bg {
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .contents_wrap.videocall .tel-answering-wrap .subcam-wrap {
    width: 93px;
  }

  .user_wrap {
    width: 260px;
    right: -260px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }

  .chat_wrap {
    width: 260px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }

  .chat_wrap .chat_subwrap {
    height: calc(100% - 126px);
  }

  .chat_wrap .chat_subwrap .chat_title {
    height: 36px;
  }

  .chat_wrap .chat_subwrap .chat_title div {
    font-size: 14px;
  }

  .chat_wrap .chat_subwrap .chat_field {
    font-size: 12px;
    gap: 8px;
  }

  .chat_wrap .chat_input_wrap {
    min-height: 126px;
  }

  .chat_wrap .chat_input_wrap .chat_input p.user_name,
  .chat_wrap .chat_subwrap .chat_field p.whisper,
  .chat_wrap .chat_input_wrap .chat_input .textbox[contenteditable="true"],
  .chat_wrap .chat_input_wrap .chat_input .textbox[contenteditable="true"]:empty:before {
    font-size: 12px;
  }

  .chat_wrap .chat_input_wrap .chat_input_btn_wrap button {
    font-size: 12px;
    height: 30px;
  }

  .chat_wrap .chat_input_wrap .chat_input .emoji_wrap a {
    font-size: 14px;
  }

  .popup_wrap#share_window .popup_dim .popup_bg button.close {
    right: 20px;
    top: 20px;
    width: 30px;
    height: 30px;
  }

  .contents_wrap.share_window>button.ico_stopshare {
    width: 30px;
    height: 30px;
  }

  .popup_wrap#whiteboard button.close {
    width: 20px;
    height: 20px;
    top: 10px;
    right: 10px;
  }

  #npc_chat {
    width: 80px;
    height: 80px;
    bottom: 24px;
  }

  .ico_npcchat {
    width: 36px;
    height: 36px;
  }

  .npcchat_wrap>#close,
  .aichat_wrap>#close {
    width: 50px;
    height: 50px;
  }

  .npcchat_wrap>#close>.ico_close,
  .aichat_wrap>#close>.ico_close {
    width: 20px;
    height: 20px;
  }

  .npcchat_subwrap {
    height: calc(100% - 10%);
    gap: 10px;

  }

  .npcchat_ballun {
    width: 400px;
    margin: 0 auto;
    border-radius: 10px;
  }

  .npcchat_subtitle {
    max-width: 480px;
    padding: 15px 20px;
    font-size: 12px;
  }

  .npcchat_ballun::after {
    width: 20px;
    height: 20px;
    bottom: -20px;
    left: calc((100% - 20px)/2);
  }

  .npcchat_sound {
    width: 20px;
    height: 20px;
    bottom: 10px;
    left: 10px;
  }

  .npcchat_top .chatbot_onoff_wrap .chatbot_onoff_subwrap {
    font-size: 12px;
    width: auto;
  }

  .npcchat_middle .chatbot_content_wrap .chatbot_content_subwrap {
    gap: 15px;
    padding: 15px
  }

  .npcchat_top .chatbot_onoff_wrap .chatbot_onoff_subwrap .chatbot_onoff_title {
    display: none;
  }

  .npcchat_middle.active {
    z-index: 2;
  }

  .npcchat_middle .chatbot_content_wrap .chatbot_content_subwrap .chat_contents>div {
    font-size: 12px;
  }

  .user_wrap .all_userlist_wrap {
    margin-bottom: 10px;
  }

  .user_wrap .user_list_wrap {
    height: calc(100% - 180px);
  }

  /* popup_chatbot mobile CSS start */
  #chatbot .chatbot_wrap {
    gap: 10px;
  }

  #chatbot .chatbot_wrap .chatbot_onoff_wrap .chatbot_onoff_subwrap {
    width: auto;
    padding: 5px 10px;
  }

  #chatbot .chatbot_wrap .chatbot_input_wrap {
    padding: 10px;
    gap: 5px;
  }

  #chatbot .chatbot_wrap .chatbot_input_wrap .chatbot_input_subwrap,
  #chatbot .chatbot_wrap .chatbot_input_wrap>button.chat_send {
    height: 40px;
  }

  #chatbot .chatbot_wrap .chatbot_input_wrap .chatbot_input_subwrap>input,
  #chatbot .chatbot_wrap .chatbot_input_wrap>button.chat_send,
  #chatbot .chatbot_wrap .chatbot_onoff_wrap .chatbot_onoff_subwrap {
    font-size: 12px;
  }

  #chatbot .chatbot_wrap .chatbot_input_wrap .chatbot_input_subwrap>input {
    width: calc(100% - 80px);
  }

  #chatbot .chatbot_wrap .chatbot_input_wrap .chatbot_input_subwrap>button {
    width: 24px;
    height: 24px;
  }

  #chatbot .chatbot_wrap .chatbot_content_wrap {
    height: calc(100% - 120px);
  }

  #chatbot .chatbot_wrap .chatbot_content_wrap .chatbot_content_subwrap .chat_contents>div {
    font-size: 12px;
    padding: 6px;
  }

  /* popup_chatbot mobile CSS end */
  /* popup_map mobile CSS start */
  .popup_wrap#map .popup_dim .popup_bg {
    overflow: hidden;
    border: 3px;
    border-radius: 20px;
    width: 70%;
    height: 70%;
  }

  .popup_wrap#map .contents_wrap.map {
    transform: scale(70%);
  }

  .invitemenu_wrap > .ico_close {
    transform: scale(70%);
    top: -55px;
  }

  /* popup_map mobile CSS end */

}

/* Mediaqurey CSS end */

/* send button CSS start */
.send_btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: #ffcc00;
  transition: 0.3s;
}

.send_btn:hover {
  background-color: #c9a309;
}

.send_btn::before {
  content: '';
  width: 22px;
  height: 22px;
  background-image: url(assets/images/46dc91e5ad916e48ee981705764d2c79.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
}
body,html{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden}.renderer{position:absolute;top:0;left:0}.canvas{position:fixed;top:0;left:0;width:100%;height:100%}.canvas.has-cursor-grab{cursor:grab}.canvas.has-cursor-grabbing{cursor:grabbing}.canvas.has-cursor-pointer{cursor:pointer}.others{background:#fff}.others:after{border-right-color:#fff}.show{display:block}.hide{display:none}.obit-controls-gizmo{position:absolute;top:12px;left:0em;z-index:1000;background-color:rgba(255,255,255,0);border-radius:100%;transition:background-color .15s linear;cursor:pointer}.obit-controls-gizmo.dragging,.obit-controls-gizmo:hover{background-color:rgba(255,255,255,.2)}.obit-controls-gizmo.inactive{pointer-events:none;background-color:rgba(255,255,255,0) !important}#contextmenu{display:flex;align-items:center;justify-content:center;width:100vw;height:100vh}#contextmenu ul{display:flex;flex-direction:column;flex-wrap:wrap;align-items:center;height:90%;row-gap:3px;column-gap:3px}#contextmenu ul li{width:225px;z-index:999999;box-shadow:1px 1px 5px 0 rgba(0,0,0,.54);border:1px solid #9acd32;padding:5px 10px;cursor:pointer;font-weight:bold;background-color:#330;color:#fff}#contextmenu ul li:hover{background-color:#e8e8e8;color:#000}div.roomedit-wrap{width:165px;height:50px;display:flex;justify-content:right;position:absolute;right:20px;top:20px;cursor:pointer}div.roomedit-wrap img.demo{content:url(assets/images/093b3eb8f1e0df4980c817e642277b98.png)}div.roomedit-wrap img.priv{content:url(assets/images/5c34cb2de8ce64dfbc54d7c5a1e5cec4.png)}div.roomedit-wrap img.priv:hover{content:url(assets/images/3f64496a2cef7fd24527130424ce63ff.png)}#toast{position:fixed;bottom:30px;left:50%;padding:15px 20px;transform:translate(-50%, 10px);border-radius:30px;overflow:hidden;font-size:.8rem;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s,transform .5s;background:rgba(0,0,0,.35);color:#fff;z-index:10000}#toast.reveal{opacity:1;visibility:visible;transform:translate(-50%, 0)}#recommend{position:fixed;top:0px;left:80px}@media all and (max-width: 960px){#recommend{display:none}}.need_full{position:absolute;top:0;left:0;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;flex-direction:column;color:#fff;gap:20px;background-color:#222;z-index:50;overflow:hidden}.need_full .header-btn:hover{background-color:#279d70;color:inherit;text-decoration:inherit}.need_full .header-btn{text-align:center;padding:10px 30px;background-color:#2bc48a;border-radius:20px;margin:0 20px;color:#fff;text-decoration:none}div.logout-wrap{width:100vw;height:100vh;display:flex;justify-content:center;position:absolute;left:0px;top:0px}div.logout-wrap div.logout-contents{padding:50px 110px 40px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.6);border-radius:13px;position:absolute;bottom:80px;box-sizing:border-box}div.logout-wrap div.logout-contents p{font-family:"Nanum Gothic",sans-serif;text-align:center;font-weight:400;color:#fff;font-size:18px}div.logout-wrap div.logout-contents div{display:inline-flex}div.logout-wrap div.logout-contents button{width:140px;padding:14px 0;margin:10px 5px 10px 5px;cursor:pointer;border:0;border-radius:5px;outline:none;display:block;background:rgba(255,255,255,.1);color:#fff;transform:all;transition:.5s}div.logout-wrap div.logout-contents button:hover{background:#6b9be3}
body>div#card img.link{content:url(assets/images/09a7986da5bdfe491f0aae266675d6ef.webp);width:50%}
#player_action{position:absolute;left:0px;top:0px;display:none;cursor:pointer}#player_action:hover{display:flex}#player_action.on{display:flex}#player_action img{flex:auto}#player_action img#face{content:url(assets/images/b3b4691b8318243629e619a7cf7e72b2.png)}#player_action img#face:hover{content:url(assets/images/de41edc1b6f40d1a396e5c5939f20f6b.png)}#player_action img#chat{display:none;content:url(assets/images/4f375a543f22bc8ad6430cc8a743c1c1.png)}#player_action img#chat:hover{content:url(assets/images/82f989d65334a394c849cc816e97485b.png)}#player_action img#whsp{content:url(assets/images/856f19919dff963394c0422516c3b2fd.png)}#player_action img#whsp:hover{content:url(assets/images/c1816d9450569e4c5c300efbf5ce5b91.png)}