:root {
  --project-main-color: rgba(249, 119, 48, 1);
  --project-main-color-hover: rgb(249, 119, 48, .7);
  --project-sub-color: rgba(7, 63, 22, 1);
  --project-sub-color-hover: rgb(7, 63, 22, .8);
}

/* project font */
@font-face {
  font-family: 'Cafe24ClassicType-Regular';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2210-2@1.0/Cafe24ClassicType-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

.point_font {
  font-family: 'Cafe24ClassicType-Regular', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.56px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* common */
/* default button style */
.default_btn {
  padding: 10px 20px;
  background-color: var(--project-main-color);
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
  color: #fff;
}

.default_btn:hover {
  background-color: var(--project-main-color-hover);
}

.mbr {
  display: none;
}

/* base */
::-webkit-scrollbar {
  width: 2px;
  height: 10px;
  background: transparent;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--project-main-color);
  border-radius: 20px;
}

html body,
html button,
html input,
html select,
html table,
html textarea {
  color: var(--project-main-color);
}

html,
html body {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
}

body.fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

img.pc {
  display: block;
}

img.mo {
  display: none;
}

/* intro - entry_video */
.intro_video_wrap {
  position: relative;
  height: 100vh;
}

.intro_video {
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: cover;
  object-fit: cover;
  background: url(../assets/video/intro_poster.png) no-repeat 50% 50%;
  background-size: cover;
}

.intro_video.pc {
  display: block;
}

.intro_video.mobile {
  display: none;
}

.intro_title_wrap {
  position: fixed;
  bottom: 40px;
  left: 30px;
}

.intro_title {
  height: 60px;
  margin-bottom: 10px;
}

.intro_title img {
  height: 100%;
}

.intro_desc {
  padding: 10px 0 20px 0;
}

.intro_desc p {
  line-height: 1.67;
}

.intro_enter_btn {
  display: inline-block;
}

.intro_enter_btn .default_btn {
  background-color: var(--project-sub-color);
  font-size: 17px;
}



.wrap_skip-btn {
  display: none;
  position: fixed;
  left: 50%;
  bottom: 0;
  margin-bottom: 60px;
  transform: translateX(-50%);
  z-index: 20;
  color: #fff;
  text-align: center;
}

.wrap_skip-btn.active {
  display: block;
  z-index: 1000;
}

.skip-btn {
  display: flex;
  align-items: center;
}

.skip-btn button {
  padding: 10px 45px;
  background: rgba(214, 255, 255, 1);
  color: #000;
  font-size: 20px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(214, 255, 255, 0.6);
  box-shadow: 0px 0px 10px 0px rgba(214, 255, 255, 0.6);
  opacity: 1;
  transition: all 0.4s;
}

.skip-btn button::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 4px;
  left: 4px;
  border: 1px solid #d6ffff;
  border-radius: 10px;
  z-index: -1;
}

.skip-btn button:hover {
  opacity: 0.8;
}

/* nav */
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;
  width: 100%;
  height: 50px;
  padding: 0 20px;
  background-color: var(--project-main-color);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.header_wrap {
  display: flex;
  align-items: center;
  height: 100%;
}

/* .site_logo { position: absolute; top: 50%; left: 16px; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 99;} */
.site_logo h1 {
  width: 130px;
  height: 32px;
  background: url(../static/logo/logo_brand.png) no-repeat 0 50%;
  background-size: auto 100%;
}

/* nav */
.nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  padding-left: 30px;
  color: #fff;
  z-index: 99;
}

.nav ul {
  display: flex;
  align-items: center;
  height: 100%;
}

.nav ul li {
  height: 100%;
  padding: 0 20px;
}

.nav ul li a {
  display: flex;
  align-items: center;
  height: 100%;
}

.nav .right ul li {
  padding: 0;
}

.pc_nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.mobile_menu_btn {
  display: none;
  width: 30px;
  height: 30px;
  background: url(../static/ico/ico_nav_menu.svg) no-repeat center center;
  background-size: 100% auto;
}

.mobile_nav {
  display: none;
  position: absolute;
  top: 50px;
  right: -100%;
  width: 100vw;
  height: calc(100vh - 50px);
  background-color: rgba(0, 0, 0, .4);
  color: #fff;
  transition: right .3s;
}

.mobile_nav.open {
  right: 0;
}

.mobile_nav .middle {
  text-align: right;
  font-size: 50px;
  padding: 50px 20px;
}

.mobile_nav .middle li {
  padding: 10px 0;
}

/* .global { position: absolute; top: 50%; right: 16px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } */

.global-item {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-left: 12px;
  border-radius: 24px;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
  vertical-align: middle;
}

.global-btn,
.global .btn_help_pop {
  display: block;
  width: 100%;
  height: 100%;
  background: no-repeat 50% 50%;
  background-size: 24px;
  outline: 0;
}

.global .btn_help_pop {
  background-image: url(../static/ico/ico_help-w.svg);
}


/* intro_footer */
#footer {
  position: fixed;
  bottom: 30px;
  right: 40px;
  z-index: 1;
  font-size: 0;
  text-align: right;
}

/* chrome_download */
.chrome_download .msg,
.chrome_download .btn_chrome {
  display: inline-block;
  color: #fff;
  vertical-align: middle;
}

.chrome_download .msg {
  font-size: 16px;
  letter-spacing: -0.8px;
}

.chrome_download .btn_chrome {
  margin-left: 10px;
  padding: 4px 8px;
  border: 1px solid #fff;
  border-radius: 5px;
  font-size: 12px;
  letter-spacing: -0.8px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.chrome_download .btn_chrome:hover,
.chrome_download .btn_chrome:focus {
  background: #fff;
}

.chrome_download .btn_chrome:hover span,
.chrome_download .btn_chrome:focus span {
  color: #b2b2b2;
}


@media screen and (max-width: 1023px) {
  .global {
    position: absolute;
    top: 50%;
    right: 65px;
    transform: translateY(-50%);
  }

  .global-item {
    margin-left: 6px;
  }
}

/* .global { position: absolute; top: 50%; right: 16px; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.global-item { display: inline-block; width: 24px; height: 24px!important; margin-left: 12px; border-radius: 24px; -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.15); box-shadow: 0 0 4px rgba(0, 0, 0, 0.15); vertical-align: middle; padding: 0;}
.global-item .btn_help_pop { display: block; width: 100%; height: 100%; background: no-repeat 50% 50%; background-size: 24px; outline: 0; background-image: url(../static/ico/ico_help-w.svg); }

@media screen and (max-width: 1023px) {
  .global { right: 10px; }
  .global-item { margin-left: 6px; }
} */

@media screen and (max-width: 1023px) {

  .site_logo h1 {
    background-position: 50% 50%;
  }

  .mobile_menu_btn {
    display: block;
  }

  .pc_nav {
    display: none;
  }

  .mobile_nav {
    display: block;
  }

  /* nav */
  .header_wrap {
    height: 100%;
    justify-content: space-between;
  }

  .nav {
    display: none;
  }
}

@media screen and (max-width: 690px) {
  .mobile_nav .middle {
    font-size: 40px;
    padding: 6.25vw 4.2vw;
  }
}

@media screen and (max-width: 480px) {
  .mobile_nav .middle {
    font-size: 6.67vw;
  }
}


/* @media screen and (max-width: 690px) { .site_logo h1 { width: 100px; height: 30px; } } */

.loading_box p {
  margin-bottom: 10px;
  font-size: 18px;
  text-align: center;
}

.loading_bar {
  position: relative;
  width: 380px;
  height: 20px;
  padding: 2px 4px;
  border: 1px solid;
}

.progress {
  width: 0%;
  height: 100%;
  background: var(--project-main-color);
  animation: progressBar 3s linear forwards;
}

/* intro */
/* 공통 css (intro_type) */
.not_mobile {
  display: block !important;
}

.intro_type.total_wrap {
  background-color: var(--project-main-color);
}

.intro_type .main {
  position: static;
  background-color: var(--project-main-color);
}

.main .lobby_bg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 70px;
  width: 100%;
  text-align: center;
}

.main .lobby_bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.line {
  width: 100%;
  height: 5px;
  background-color: var(--project-main-color);
  margin: 20px 0 30px 0;
}

.total_gate_box {
  display: flex;
  justify-content: center;
  width: 100%;
}

.total_gate_box .pub,
.total_gate_box .nagit {
  position: relative;
  width: 90%;
  max-width: 648px;
  height: 310px;
  border: 2px solid var(--project-main-color);
  border-top-width: 10px;
  border-bottom-width: 10px;
  background-color: #fff;
  -webkit-box-shadow: 9px 9px 16px 0px rgba(0, 0, 0, 0.48);
  box-shadow: 9px 9px 16px 0px rgba(0, 0, 0, 0.48);
  text-align: center;
}

/* intro */
.main_page .total_gate_box {
  flex-direction: column;
}

.main_page .total_gate_box .pub,
.main_page .total_gate_box .nagit {
  margin: auto;
}

.main_page .total_gate_box .pub {
  margin-bottom: 60px;
}

.main_page .nagit .brand_emblem_img {
  width: 100%;
}

.main_page .brand_emblem_img p {
  font-size: 20px;
}

.main_page .brand_emblem_img p:first-child {
  font-size: 30px;
  padding-bottom: 10px;
}

.each_lobby.modal_lobby_enter {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(100% - 50px);
  min-height: 900px;
  background: #fff url(../static/img/intro_bg-check.svg) 
}

.each_btn.lobby_enter {
  display: inline-block;
  position: relative;
  padding: 10px 45px;
  background: var(--project-sub-color);
  color: #fff;
  font-size: 20px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(214, 255, 255, 0.6);
  box-shadow: 0px 0px 10px 0px rgba(214, 255, 255, 0.6);
  margin-top: 30px;
  transition: background 0.2s;
  /* animation: btnBgChange 2s infinite; */
}

.each_btn.lobby_enter:hover {
  background: var(--project-sub-color-hover);
}

.nagit .each_btn.lobby_enter {
  visibility: visible;
}

/* .index_page .each_lobby.modal_lobby_enter {display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%;} */
/* .index_page .brand_emblem_img {padding: 40px 0;} */


/* lobby */
.lobby_page .total_gate_box {
  top: 55%;
  display: flex;
  justify-content: center;
}

.welcome_img {
  position: absolute;
  width: 200px;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 45px;
  font-weight: bold;
  text-align: center;
  z-index: 999;
}

.welcome_img p {
  display: inline-block;
  position: relative;
}

.welcome_img p::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -40px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: url('../static/ico/pixelated-alien.png') no-repeat center center;
  background-size: 100% 100%;
}

.welcome_img p::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -40px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: url('../static/ico/pixelated-alien.png') no-repeat center center;
  background-size: 100% 100%;
}

.lobby_page .total_gate_box .pub,
.lobby_page .total_gate_box .nagit {
  height: 520px;
  margin: 0 40px;
}

.lobby_page .brand_emblem_img {
  width: 90%;
  color: var(--project-sub-color);
}

.lobby_page .brand_emblem_img .inner_cont {
  line-height: 1.7;
}

/* order */
.order_page .total_gate_box .pub,
.order_page .total_gate_box .nagit {
  overflow-y: auto;
  padding: 0 30px;
  max-width: 1048px;
  height: 740px;
}

.order_page .brand_emblem_img {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
}

.order_page .brand_emblem_img .inner_title {
  width: 20%;
}

.order_page .line {
  height: 2px;
}

.order_page .inner_cont_box {
  overflow-y: scroll;
}

.order_page .inner_cont {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
}

.order_page .cont_item {
  display: flex;
  flex-direction: column;
  width: 45%;
  height: 500px;
  border: 1px solid var(--project-main-color);
  margin-bottom: 20px;
  -webkit-box-shadow: 9px 9px 16px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 9px 9px 16px 0px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.3s;
}

.order_page .cont_item:hover {
  -webkit-box-shadow: 9px 9px 16px 0px rgba(0, 0, 0, 0.48);
  box-shadow: 9px 9px 16px 0px rgba(0, 0, 0, 0.48);
}

.order_page .cont_item .item_title {
  order: 2;
  height: 15%;
  background-color: var(--project-main-color);
  padding: 0 10px;
  word-break: keep-all;
}

.order_page .cont_item .item_title p {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #fff;
  font-size: 16px;
}

.order_page .cont_item .item_thumb {
  order: 1;
  height: 85%;
}

.order_page .cont_item .item_thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.three .cont_item {
  width: 32%;
  height: 300px;
}

.two .cont_item {
  width: 49%;
  height: 300px;
}


/* .total_gate_box .pub {padding-right: 20px;} */
/* .total_gate_box .nagit {padding-left: 20px;} */
/* .brand_txt_box {height: 100px;} */
/* .brand_txt_box .char_script p {line-height: 1.9; word-break: keep-all;} */
/* .brand_txt_box p.enter_txt {display: block;} */
/* .brand_txt_box p.coming_soom_txt {display: none;} */

/* .brand_txt_box .char_script pre:after {content: ''; margin-left: .4rem; border-right: 4px solid #d6ffff; animation: cursor .9s infinite steps(2);} */

/* 공사중 class */
/* .nagit .coming_soom {display: none;}
.main_page .nagit.preparing .brand_emblem_img > p, .main_page .nagit.preparing .brand_emblem_img img {opacity: .1;}
.nagit.preparing .coming_soom {display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(214,255,255,.5);}
.coming_soom i {position: absolute; width: 50px; height: 70px;}
.coming_soom i.left {background: url('../static/img/pixel_left.png') no-repeat center center; background-size: auto 100%; top: 36%; left: 5%;}
.coming_soom i.bottom {background: url('../static/img/pixel_bottom.png') no-repeat center center; background-size: auto 100%; bottom: 5%; left: 50%; transform: translateX(-50%); height: 90px;}
.coming_soom i.right {background: url('../static/img/pixel_right.png') no-repeat center center; background-size: auto 100%; top: 20%; right: 0%; transform: translateX(-50%); height: 130px;}
.coming_soom p {color: #fff; padding-top: 0; font-size: 50px;}
.nagit.preparing .brand_txt_box p.enter_txt {display: none;}
.nagit.preparing .brand_txt_box p.coming_soom_txt {display: block;}
.nagit.preparing .each_btn.lobby_enter {visibility: hidden;} */

/* page */
.total_wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: -1;
}

.loop_text_box {
  display: flex;
  align-items: center;
  white-space: nowrap;
  width: 100%;
  height: 40px;
  position: absolute;
  bottom: 0;
  left: 0;
  overflow: hidden;
  border-top: 1px solid;
}

.loop_text_box .each_text {
  display: flex;
  animation: textLoop 18s linear infinite forwards;
}

.loop_text_box .each_text span {
  font-size: 20px;
  color: #d6ffff;
  font-weight: 600;
  margin: 0 30px;
}

.loop_text_box.top {
  bottom: auto;
  top: 0;
  border-top: 0;
  border-bottom: 1px solid;
}

.main {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.main .content {
  position: relative;
  overflow-y: auto;
  width: 100%;
  height: 100%;
}

.main_video {
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: cover;
  object-fit: cover;
  background: url(../assets/video/intro_thumbnail.jpg) no-repeat 50% 50%;
  background-size: cover;
}

/* hall - vr player */
.vr-player,
.videoplayer,
.total {
  position: absolute;
  left: 0;
  top: 50px;
  width: 100%;
  height: calc(100% - 50px);
  z-index: 100;
  object-fit: cover;
}

.vr-player .vr-iframe,
.total .vr-iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0px;
}



/* hall css */
.content.hall {
  overflow: hidden;
  height: 100%;
}

.content.video_page {
  display: block;
  height: calc(100% - 180px);
  top: 60px;
  width: 95%;
}

.content.video_page .sound_btn {
  position: absolute;
  top: 10px;
  right: 20px;
  z-index: 999;
}

.content.video_page .sound_btn i {
  display: block;
  background: url('../static/ico/ico_sound-unmute.svg') no-repeat center center;
  background-size: 100% auto;
  width: 24px;
  height: 24px;
}

.content.video_page .sound_btn.mute i {
  display: block;
  background: url('../static/ico/ico_sound-mute.svg') no-repeat center center;
  background-size: 100% auto;
  width: 24px;
  height: 24px;
}


/* modal setting */
.modal_area {
  display: none;
  position: fixed;
  z-index: 998;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal_area.open {
  display: block;
}

.modal_box {
  position: relative;
  top: 50%;
  left: 50%;
  width: 625px;
  /* border: 1px solid var(--project-main-color); */
  transform: translate3d(-50%, -50%, 0);
  background-color: rgba(255, 255, 255, 1);
  z-index: 100;
}

.modal_box .modal_box.total_guide.hide {
  display: none;
}

.modal_contents {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 10px 5px;
}

.modal_top_txt_box {
  position: absolute;
  bottom: 100%;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: var(--project-main-color);
  color: #fff;
  padding: 10px;
}

.modal_top_txt_box .left,
.modal_top_txt_box .middle,
.btn_modal_close {
  color: #fff;
  width: 33.33%;
  font-size: 12px;
}

.modal_top_txt_box .middle {
  text-align: center;
}

.modal_item {
  display: none;
  width: 100%;
  height: 100%;
  flex-direction: column;
  text-align: center;
  padding-bottom: 10px;
}

.modal_item.active {
  display: flex;
}

.modal_title_box {
  height: 20%;
  padding: 0;
}

.modal_scroll_box {
  height: 100%;
  padding: 0;
  overflow: auto;
}

.modal_item .brand_logo {
  height: 30px;
  padding-bottom: 0;
}

.modal_item .brand_logo img {
  height: 100%;
}

.modal_item .brand_logo .txt {
  font-size: 35px;
}

.modal_item .brand_title {
  margin-bottom: 40px;
  margin-top: 40px;
  font-size: 24px;
  font-weight: 800;
  color: var(--project-main-color);
}

.modal_item .brand_desc {
  margin-bottom: 35px;
  line-height: 1.7;
  word-break: keep-all;
}

.modal_scroll_box .brand_desc>p+p {
  margin-top: 20px;
}

.btn_modal_close {
  text-align: right;
}

.btn_modal_close .close_txt {
  margin-right: 4px;
}

.btn_modal_close::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: transparent url('../static/ico/btn-icon-x-light-gray.png') no-repeat center center;
  background-size: 100% 100%;
  vertical-align: middle;
}

.indicatorBox {
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  /* bottom: 14px; */
  left: 50%;
  transform: translateX(-50%);
}

.indicatorBox span {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background-color: var(--project-main-color);
}

.indicatorBox span+span {
  margin-left: 8px;
}

.indicatorBox span.on {
  width: 8px;
  height: 8px;
  border: 2px solid var(--project-main-color);
  background-color: inherit;
}

.start_btn_box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 10px;
  transition: background-color 0.3s;
}

.start_btn_box button {
  font-size: 20px;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 30px;
}

.start_btn_box:hover button {
  background-color: var(--project-main-color-hover);
}

/* guide_box 공통 css */
.modal_item .guide_box .top_img {
  width: 120px;
  text-align: center;
  z-index: 999;
}

.modal_item .guide_box .guide_title {
  position: relative;
  padding: 15px 0 20px;
  color: var(--project-main-color);
  font-weight: 800;
  line-height: 1.3;
  font-size: 20px;
}

.modal_item .guide_box .guide_title::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 2px;
  background-color: var(--project-main-color);
}

.modal_item .guide_box .guide_title.noline::before {
  display: none;
}

/* .modal_item .guide_box .guide_desc{
  padding-top: 10px;
} */

.modal_item .guide_box .guide_desc p {
  font-size: 14px;
  line-height: 1.7;
  color: #222;
}

.modal_item .guide_box .guide_icon {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px;
}

.modal_item .guide_box .guide_icon.mob {
  display: none;
}

.modal_item .guide_box .guide_icon .icon_box .icon_title {
  font-weight: 600;
  color: var(--project-main-color);
  padding-bottom: 10px;
}

.modal_item .guide_box .guide_icon .icon_box .icon_desc {
  padding-top: 10px;
  word-break: keep-all;
  line-height: 1.56;
  font-size: 14px;
}

.modal_btn_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin-top: 14px; */
}

.modal_btn_box .prev {
  visibility: hidden;
  background-color: var(--project-main-color);
  color: #fff;
}

.modal_btn_box .prev:hover {
  background-color: var(--project-main-color-hover);
}

.modal_btn_box .prev.show {
  visibility: visible;
}

.modal_btn_box .next {
  color: #fff;
}

.modal_btn_box .btn_wrap {
  display: flex;
  justify-content: space-between;
  /* justify-content: flex-end; */
  width: 100%;
  padding: 0 10px;
}

.modal_btn_box .btn_wrap .btn {
  padding: 10px 20px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

/* custom modal style */
.custom_modal_style .guide_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.custom_modal_style .modal_title_box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom_modal_style .guide_box .guide_title {
  padding: 0;
}

/* 모달 button 공통 css */
.modal_btn_box .btn_wrap .custom {
  background-color: var(--project-custom-color);
}

.modal_btn_box .btn_wrap .custom:hover {
  background-color: var(--project-custom-color-hover);
}

.modal_btn_box .btn_wrap.one {
  /* flex: 1; */
  justify-content: center;
}

.modal_btn_box .inp_chk_wrap+.btn_wrap {
  width: auto;
}

.modal_btn_box .inp_chk_wrap+.btn_wrap .default_btn+.default_btn {
  margin-left: 10px;
}

/* modal check box */
.modal_btn_box .inp_chk+label {
  /* display: inline-block; */
  display: flex;
  align-items: center;
  outline: 0;
  margin-right: 5px;
  cursor: pointer;
}

.modal_btn_box .inp_chk+label span {
  vertical-align: middle;
}

.modal_btn_box .inp_chk+label:before {
  content: '';
  display: inline-block;
  margin-right: 10px;
  width: 14px;
  height: 14px;
  border: 2px solid #cccccc;
  border-radius: 100%;
  vertical-align: middle;
}

.modal_btn_box .inp_chk:checked+label:before {
  background: url('../static/ico/ico-modal-chk.png') no-repeat center / 60% auto var(--project-main-color);
}

.btn_close {
  color: #fff;
}

/* interaction guide */
.interaction .modal_title_box {
  height: auto;
}

.interaction .modal_scroll_box {
  height: auto;
}

.interaction .guide_box .guide_icon {
  justify-content: space-between;
  margin: 0 auto;
  width: 390px;
}

.interaction .guide_box .guide_icon .icon_box {
  margin-bottom: 20px;
  width: 180px;
}

/* tour tip guide */
.tour_tip .guide_box .guide_icon {
  width: 100%;
  margin: auto;
}

.tour_tip .guide_box .guide_icon .icon_box {
  margin-top: 10px;
  width: 90%;
}

/* contact modal css */
.modal_box.contact.hide {
  display: none;
}

.modal_box.contact {
  height: auto;
}

.modal_box.contact .guide_box {
  font-size: 14px;
}

.modal_box.contact p+p {
  padding-top: 10px;
}


/*------------------------------ media query ------------------------------*/
@media screen and (min-width: 2560px) {
  .main_page .brand_emblem_img p {
    font-size: 48px;
  }

  .coming_soom i {
    height: 100px;
  }

  .coming_soom i.bottom {
    height: 130px;
  }

  .coming_soom i.right {
    height: 176px;
  }

  .brand_txt_box .char_script p {
    font-size: 20px;
  }
}

@media screen and (min-width: 1921px) {

  .order_page .total_gate_box .pub,
  .order_page .total_gate_box .nagit {
    max-width: 54.58vw;
    height: 38.54vw;
  }
}



@media screen and (max-width: 1280px) {
  .modal_box {
    top: 50%;
  }
}

@media screen and (max-width: 1280px) and (orientation: landscape) {
  .modal_box {
    /* top: 45%; */
    width: 43vw;
    /* height: 400px; */
  }

  /* .modal_contents {
    padding: 25px 5px 35px 5px;
  } */
  .modal_item .brand_title {
    margin: 24px 0;
  }

  /* .modal_btn_box {
    margin-top: 10px;
  } */
}

/* @media screen and (max-width: 1280px) and (max-height: 777px) { */
@media screen and (max-width: 1280px) and (max-height: 777px) {

  /* intro */
  .main_page .total_gate_box .pub,
  .main_page .total_gate_box .nagit {
    margin-bottom: 4vh;
    height: 37vh;
  }

  .lobby_page .total_gate_box .pub,
  .lobby_page .total_gate_box .nagit {
    height: 59vh;
  }

  .main_page .pub .brand_emblem_img {
    width: 49vh;
  }

  .main_page .pub .brand_emblem_img p {
    font-size: 2.9vh;
  }

  .main_page .pub .brand_emblem_img p:first-child {
    font-size: 3.9vh;
  }

  .main_page .nagit .each_btn.lobby_enter {
    margin-top: 3.9vh;
  }

  .modal_box {
    top: 50%;
    width: 43vw;
  }
  /* .order_page .inner_cont_box {height: 50vh;} */
}

@media screen and (max-width: 1200px) {

  /* hall - vr player */
  .vr-player.mobile {
    padding-top: 70px;
  }

  .garage .modal.speech_box .text_box {
    padding: 0 0 20px 40px;
  }
}

@media screen and (max-width: 1140px) {
  .each_btn.lobby_enter {
    padding: 1.1vh 5vh;
    font-size: 2.25vh;
    margin-top: 3.1vh;
  }

  .nav ul li {
    font-size: 14px;
    padding-right: 14px;
  }
}

@media screen and (max-width: 1140px) and (orientation: landscape) {
  /* .welcome_img {font-size: 5vh;}
  .brand_emblem_img {width: 40vh; margin-left: auto; margin-right: auto;}
  .brand_txt_box p + p {padding-top: 2.3vh;}
  .each_btn.lobby_enter {padding: 1.1vh 5vh; font-size: 2.25vh; margin-top: 3.1vh;} */
}

@media screen and (max-width: 1023px) {
  img.pc {
    display: none;
  }

  img.mo {
    display: block;
  }

  /* default btn */
  .header .btn-lobby,
  .main .content .btn,
  .modal .btn {
    padding: 6px 14px;
  }

  .header .btn-lobby>span,
  .main .content .btn>span,
  .btn_wrap .btn>span,
  .modal .btn>span {
    font-size: 14px;
  }

  /* base */
  html,
  html body {
    height: 100%;
  }

  /* .nav {display: block; border-bottom: none; padding: 0;} */
  /* .nav .pc_nav {display: none; width: 100%; padding: 0 30px; background-color: rgba(0,0,0,.7);}
  .pc_nav .left, .pc_nav .middle, .pc_nav .right {width: 100%;}
  .nav .mobile_nav {display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0 30px; border-bottom: 1px solid #d6ffff;}
  .nav .left, .nav .right {display: block;}
  .nav .left ul, .right ul {display: block;} */

  /* .middle.pc {display: none;} */

  /* lobby */
  .lobby_page .total_gate_box .pub,
  .lobby_page .total_gate_box .nagit {
    margin: 0 20px;
  }

  .lobby_page .brand_emblem_img {
    width: 100%;
    padding: 0 20px;
  }


  /* main (공통)*/
  .main {
    height: 100%;
  }

  /* hall - vr player */
  .vr-player.mobile {
    padding-top: 66px;
  }

  .modal_area .modal_btn_box .btn_box_item * {
    font-size: 10px;
    line-height: 1.2;
  }

  .modal_btn_box.guide_bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    padding: 10px 0;
    border-top: 1px solid var(--project-main-color);
  }

  .modal_btn_box .btn {
    padding: 8px 23px;
  }

  .modal_box {
    width: 340px;
    height: 60%;
    /* transform: translate3d(-50%, -60%, 0); */
    /* border-radius: 5px; */
  }

  .modal_scroll_box {
    padding-bottom: 50px;
  }

  /* .modal_contents {
    padding: 25px 5px 25px 5px;
  } */
  .modal_top_txt_box .left,
  .modal_top_txt_box .middle,
  .btn_modal_close {
    font-size: 10px;
  }

  /* guide_box 공통 css */
  .modal_item .brand_logo {
    height: 22px;
  }

  .modal_item .brand_title {
    margin-top: 15px;
    margin-bottom: 20px;
    font-size: 14px;
  }

  .modal_item .brand_desc {
    padding: 0 5%;
    margin-bottom: 30px;
  }

  .modal_item .brand_desc p {
    font-size: 12px;
  }

  .modal_item .guide_box .guide_icon.pc {
    display: none;
  }

  .modal_item .guide_box .guide_icon.mob {
    display: flex;
    margin-top: 20px;
    width: 100%;
  }

  .modal_item .guide_box .guide_title {
    padding: 10px 0;
    font-size: 14px;
  }

  .modal_item .guide_box .guide_desc {
    /* margin: 0 auto 20px; */
    font-size: 12px;
  }

  .modal_item .guide_box .guide_desc p {
    font-size: 12px;
  }

  .modal_guide {
    display: none !important;
  }

  /* interaction guide */
  .interaction .guide_box .guide_icon .icon_box {
    padding: 0;
    width: 31.25%;
  }

  .interaction .guide_box .guide_icon .icon_box img {
    width: 58px;
  }

  .interaction .guide_box .guide_icon .icon_box .icon_title {
    font-size: 10px;
  }

  .interaction .guide_box .guide_icon .icon_box .icon_desc {
    font-size: 10px;
  }

  /* tour tip guide */
  .tour_tip .guide_box .guide_icon {
    justify-content: space-between;
    width: 90%;
    position: static;
    transform: none;
    margin: 0 auto;
  }

  .tour_tip .guide_box .guide_icon .icon_box {
    padding: 0;
    margin-bottom: 14px;
    margin-top: 0;
    /* width: 100%; */
  }

  .start_btn_box button {
    font-size: 18px;
    padding: 8px 14px;
  }

  .tour_tip .guide_box .guide_icon .icon_box .icon_desc {
    font-size: 12px;
  }

  /* with_header css */
  .with_header .modal_area {
    padding-top: 50px;
  }

  .with_header .modal_guide.left {
    top: 154px;
  }

  .with_header .right.top {
    top: 65px;
  }

  .with_header .vr-player {
    padding-top: 50px;
  }
}

@media screen and (max-width: 1023px) and (max-height: 820px) {

  /* img.mo {max-width: 75%; margin: auto;} */
  .icon_box {
    width: 80%;
  }
}

@media screen and (max-width: 1024px) and (orientation: landscape) {

  /* default btn */
  .header .btn-lobby,
  .main .content .btn,
  .modal .btn {
    padding: 6px 14px;
  }

  .header .btn-lobby>span,
  .main .content .btn>span,
  .modal .btn>span {
    font-size: 14px;
  }

  /* modal */
  .modal {
    font-size: 15px;
  }
}

@media screen and (max-height: 768px) {

  /* intro - entry_video */
  .skip-btn button span {
    font-size: 16px;
  }
}

@media screen and (max-width: 960px) {

  /* lobby */
  .welcome_img {
    width: 150px;
  }

  .coming_soom p {
    font-size: 32px;
  }

  .coming_soom i.left {
    height: 50px;
    left: 0;
  }

  .coming_soom i.bottom {
    height: 70px;
  }

  .coming_soom i.right {
    height: 100px;
    right: -10%;
  }

  .brand_txt_box .char_script p {
    font-size: 14px;
  }

  /* nav */
  .nav .info_btn_box a {
    padding: 0 14px;
  }
}

@media screen and (max-width: 850px) {
  .brand_txt_box {
    height: 130px;
  }
}

@media screen and (max-width: 690px) {

  /* lobby */
  .lobby_page .total_gate_box {
    flex-direction: column;
    justify-content: center;
  }

  .lobby_page .total_gate_box::before {
    content: none;
  }

  .lobby_page .total_gate_box .pub,
  .lobby_page .total_gate_box .nagit {
    width: 90%;
    height: 270px;
    padding: 0;
    margin: auto;
  }

  .lobby_page .total_gate_box .pub {
    margin-bottom: 20px;
  }

  .welcome_img {
    width: 120px;
  }

  .lobby_page .brand_emblem_img img {
    width: 40%;
  }

  .lobby_page .line {
    margin: 10px 0 20px 0;
  }

  .lobby_page .brand_emblem_img .inner_cont {
    font-size: 15px;
    line-height: 1.5;
  }

  /* intro */
  /* .main_page .pub .brand_emblem_img {width: 200px; margin-bottom: 20px;} */
  .brand_txt_box p {
    font-size: 14px;
    line-height: 1.6;
  }

  .brand_txt_box .char_script p {
    line-height: 1.6;
  }

  .coming_soom p {
    font-size: 20px;
  }

  .each_btn.lobby_enter {
    margin-top: 14px;
    font-size: 16px;
  }

  .mobile_menu_btn {
    width: 24px;
    height: 24px;
  }

  /* order */
  .order_page .cont_item {
    width: 80%;
    height: 43.47vw;
  }

  /* .order_page .inner_cont_box {height: 575px;} */

  /* hall - vr player */
  .vr-player.mobile {
    padding-top: 56px;
  }
}

@media screen and (max-width: 480px) {

  /* intro */
  .main_page .total_gate_box {
    width: 90%;
  }

  .main_page .pub .brand_emblem_img {
    width: 70vw;
  }

  .main_page .nagit .brand_emblem_img p {
    font-size: 4.16vw;
    padding-top: 2.08vw;
  }

  .main_page .nagit .brand_emblem_img p:first-child {
    font-size: 6.25vw;
  }

  .main_page .pub .brand_emblem_img img {
    width: 70%;
    padding: 2.91vw 0;
  }

  /* lobby */
  /* .lobby_page .total_gate_box .pub {padding-bottom: 8.33vw;} */
  .lobby_page .brand_emblem_img .inner_cont {
    font-size: 2.92vw;
  }

  .lobby_page .total_gate_box .pub,
  .lobby_page .total_gate_box .nagit {
    height: 56.25vw;
  }

  .welcome_img {
    width: 33.33vw;
  }

  /* order */
  .order_page .cont_item .item_title p {
    font-size: 3.33vw;
  }

  .brand_txt_box {
    height: auto;
    margin-bottom: 4.91vw;
  }

  .brand_txt_box p {
    font-size: 2.91vw;
  }

  .brand_txt_box .char_script p {
    font-size: 2.91vw;
  }

  .coming_soom i.left {
    height: 40px;
    left: 10%;
  }

  .coming_soom i.bottom {
    height: 50px;
    bottom: -5%;
  }

  .coming_soom i.right {
    height: 80px;
    right: 0;
  }

  .each_btn.lobby_enter {
    font-size: 3.33vw;
    margin-top: 3.16vw;
  }

  .loop_text_box {
    height: 40px;
  }

  .loop_text_box .each_text span {
    font-size: 16px;
  }

  .main .content {
    width: 100%;
    border-radius: 0;
  }

  /* intro - entry_video */
  .loading_box p {
    font-size: 3.75vw;
  }

  .loading_bar {
    width: 79.16vw;
  }

  .skip-btn button {
    font-size: 18px;
    padding: 8px 20px;
  }

  /* modal setting */
  .modal_box {
    width: 80%;
    height: 55%;
  }

  .modal_item .guide_box .top_img {
    display: none;
    width: 25vw;
  }

  .tour_tip .guide_box .guide_icon .icon_box .icon_desc {
    font-size: 2.5vw;
  }

  /* free form guide */
  .free_form .guide_box .guide_desc {
    padding-left: 5%;
    padding-right: 5%;
  }

  .free_form .guide_box .guide_contents {
    width: 56.66%;
  }

  .content.video_page {
    width: 95%;
    border-radius: 30px;
  }
}

@media screen and (max-width: 360px) {
  .mbr {
    display: block;
  }

  .default_btn {
    padding: 2.22vw 3.33vw;
  }

  /* .modal_top_txt_box {align-items: flex-end;} */

  /* interaction guide */
  .interaction .guide_box .guide_icon .icon_box {
    margin-bottom: 20px;
    width: 100%;
  }

  /* lobby */
  .lobby_page .line {
    margin: 2.78vw 0;
  }

}

/*------------------------------ animation keyframes ------------------------------*/
@keyframes textLoop {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translateZ(0)
  }

  to {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
  }
}

@keyframes progressBar {
  0% {
    width: 0%;
  }

  25% {
    width: 25%;
  }

  30% {
    width: 25%;
  }

  65% {
    width: 60%;
  }

  75% {
    width: 60%;
  }

  85% {
    width: 70%;
  }

  100% {
    width: 100%;
  }
}

@keyframes btnBgChange {
  10% {
    background: #d6ffff;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(214, 255, 255, 0.6);
    box-shadow: 0px 0px 10px 0px rgba(214, 255, 255, 0.6);
  }

  20% {
    background: #00D0FC;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 208, 252, 0.6);
    box-shadow: 0px 0px 10px 0px rgba(0, 208, 252, 0.6);
  }

  30% {
    background: #00FF4C;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 255, 76, 0.6);
    box-shadow: 0px 0px 10px 0px rgba(0, 255, 76, 0.6);
  }

  40% {
    background: #CEFF00;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(206, 255, 0, 0.6);
    box-shadow: 0px 0px 10px 0px rgba(206, 255, 0, 0.6);
  }

  50% {
    background: #FF8000;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(255, 128, 0, 0.6);
    box-shadow: 0px 0px 10px 0px rgba(255, 128, 0, 0.6);
  }

  60% {
    background: #FF0000;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(255, 0, 0, 0.6);
    box-shadow: 0px 0px 10px 0px rgba(255, 0, 0, 0.6);
  }

  70% {
    background: #FE00CB;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(254, 0, 203, 0.6);
    box-shadow: 0px 0px 10px 0px rgba(254, 0, 203, 0.6);
  }

  80% {
    background: #6500FE;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(101, 0, 254, 0.6);
    box-shadow: 0px 0px 10px 0px rgba(101, 0, 254, 0.6);
  }

  90% {
    background: #0008FF;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 8, 255, 0.6);
    box-shadow: 0px 0px 10px 0px rgba(0, 8, 255, 0.6);
  }

  100% {
    background: #d6ffff;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(214, 255, 255, 0.6);
    box-shadow: 0px 0px 10px 0px rgba(214, 255, 255, 0.6);
  }
}

/* @keyframes btnBorderChange {
  10% {
    border: 1px solid#d6ffff;
  }
  20% {
    border: 1px solid#00D0FC;
  }
  30% {
    border: 1px solid#00FF4C;
  }
  40% {
    border: 1px solid#CEFF00;
  }
  50% {
    border: 1px solid#FF8000;
  }
  60% {
    border: 1px solid#FF0000;
  }
  70% {
    border: 1px solid#FE00CB;
  }
  80% {
    border: 1px solid#6500FE;
  }
  90% {
    border: 1px solid#0008FF;
  }
  100% {
    border: 1px solid#d6ffff;
  }
} */

/* @keyframes welcomeColorChange {
  10% {
    color: #d6ffff;
  }
  20% {
    color: #00D0FC;
  }
  30% {
    color: #00FF4C;
  }
  40% {
    color: #CEFF00;
  }
  50% {
    color: #FF8000;
  }
  60% {
    color: #FF0000;
  }
  70% {
    color: #FE00CB;
  }
  80% {
    color: #6500FE;
  }
  90% {
    color: #0008FF;
  }
  100% {
    color: #d6ffff;
  }
} */

@keyframes bgmOnBtn {
  0% {
    left: 0;
  }

  100% {
    left: 60%;
  }
}

@keyframes bgmOffBtn {
  0% {
    left: 60%;
  }

  100% {
    left: 0;
  }
}

@keyframes bgUp {
  0% {
    height: 0%;
  }

  100% {
    height: 100%;
  }
}

@keyframes bgRemove {
  0% {
    height: 100%;
  }

  100% {
    height: 0%;
  }
}

/* @keyframes cursor {
  from {border-right: 2px solid #fff; }
  to {border-right: 2px solid #777; }
} */