:root {
  --project-main-color: rgba(214,255,255,1);
  --project-main-color-hover: rgb(149, 175, 175);
  --project-sub-color: rgba(152, 31, 10,1);
  --project-sub-color-hover: rgb(152, 31, 10, .7);
  --project-third-color: rgba(2, 56, 187, 1);
  --project-third-color-hover: rgb(2, 56, 187, .7);
}
/* common */
/* default button style */
.default_btn {
  padding: 10px 20px;
  background-color: var(--project-sub-color);
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
  color: #fff;
}
.default_btn:hover {
  background-color: var(--project-sub-color-hover);
}
.mbr {display: none;}

/* base */
::-webkit-scrollbar {width: 2px; height: 10px; background: transparent;}
::-webkit-scrollbar-track {background: transparent;}
::-webkit-scrollbar-thumb {background: rgba(0, 0, 0, 0.3); border-radius: 20px;}

.ir_text,
.blind,
input[type='checkbox'] {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
}

html body,
html button,
html input,
html select,
html table,
html textarea {
  color: #fff;
}

html,
html body {width: 100%; height: 100%; overflow-y: hidden;}
body.fixed {position: fixed; left: 0; right: 0; bottom: 0; overflow: hidden;}

/* intro - entry_video */
.wrap_skip-btn {display: none; position: fixed; left: 50%; bottom: 0; margin-bottom: 80px; transform: translateX(-50%); z-index: 20; color: #fff; text-align: center;}
.wrap_skip-btn.active {display: block; z-index: 1000;}
.skip-btn button {font-size: 24px; transition: all 0.4s;}
.skip-btn button:hover {opacity: 0.6;}

/* nav */
.header {position: fixed; top: 0; left: 0; z-index: 500; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box;}

.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;}

/* page */
.total_wrap {position: relative; width: 100%; height: 100%; background-color: #000;}

.main {position: fixed; top: 0; left: 0; width: 100%; height: 100%;}
.main .content {position: relative; 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;}

/* intro - lobby(메인 이미지) */
.not_mobile {display: block !important;}
.each_lobby.modal_lobby_enter {width: 100%; height: 100%;}

.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;}


.main_page .brand_emblem_img {position: relative; max-width: 400px; margin-left: auto; margin-right: auto; border: 2px solid var(--project-main-color); border-radius: 20px; -webkit-box-shadow: 0px 0px 20px 0px rgba(214,255,255,0.7); box-shadow: 0px 0px 20px 0px rgba(214,255,255,0.7); margin-bottom: 40px; overflow: hidden;}
.main_page .brand_emblem_img p {font-size: 24px; font-weight: 900; text-align: center; padding-top: 20px;}
.main_page .brand_emblem_img img {width: 80%; padding: 20px 0;}
.each_btn.lobby_enter {position: relative; 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); margin-top: 30px; animation: btnBgChange 2s infinite;}
.each_btn.lobby_enter::before {content: ''; width: 100%; height: 100%; position: absolute; top: 4px; left: 4px; border: 1px solid #d6ffff; border-radius: 10px; z-index: -1; animation: btnBorderChange 9s infinite;}
.each_btn.lobby_enter:hover {background: rgb(166, 188, 188);}

.welcome_txt {position: absolute; top: 80px; left: 50%; transform: translateX(-50%); font-size: 45px; font-weight: bold; text-align: center; z-index: 999;}
.welcome_txt p {display: inline-block; position: relative;}
.welcome_txt 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_txt 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%;}
.gate_box {display: flex; justify-content: space-evenly; align-items: center; position: relative; width: 100%; height: 100%;}
.gate_box::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -48%); width: 3px; height: 65%; background-color: var(--project-main-color); border-radius: 5px;}
.gate_box .pub, .gate_box .nagit {width: 50%; text-align: center;}
.gate_box .pub {padding-right: 20px;}
.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;}
.nagit .each_btn.lobby_enter {visibility: visible;}

/* 공사중 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;}

/* hall - vr player */
.vr-player,
.videoplayer,
.total {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 10; object-fit: cover;}
.vr-player .vr-iframe,
.total .vr-iframe {width: 100% !important; height: 100% !important; border: 0px;}

/* total nav */
.total_nav {
  position: absolute;
  z-index: 100;
}
/* top_left_box */
.top_left_box {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1;
}
.top_left_box .top_logo {
  width: 100px;
}

.top_left_box .mobile_menu_btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 100%;
}
.mobile_menu_btn i {
  display: block;
  width: 20px;
  height: 2px;
  background-color: #fff;
}
.mobile_menu_btn i:not(:last-child) {
  margin-bottom: 4px;
}
.mobile_menu_btn.active i {
  position: absolute;
}
.mobile_menu_btn.active .top {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.mobile_menu_btn.active .middle {
  display: none;
}
.mobile_menu_btn.active .bottom {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}
.hall1 .top_left_box .mobile_menu_btn {
  background-color: var(--project-sub-color);
}
.hall2 .top_left_box .mobile_menu_btn {
  background-color: var(--project-third-color);
}


/* top_middle_nav */
.top_middle_nav {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.top_middle_nav ul {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  background-color: #fff;
  border-radius: 30px;
}
.top_middle_nav ul li {
  padding: 5px 14px;
  color: #222;
  font-size: 14px;
}
.top_middle_nav ul li.active {
  color: #fff;
  border-radius: 30px;
  -webkit-box-shadow: 0px 0px 7px -2px rgba(0,0,0,0.44); 
  box-shadow: 0px 0px 7px -2px rgba(0,0,0,0.44);
}
.top_middle_nav ul li.night_sft.active {
  background-color: var(--project-sub-color);
}
.top_middle_nav ul li.meta_sft.active {
  background-color: var(--project-third-color);
}

/* left_middle_nav */
.pc_nav {
  position: fixed;
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
  z-index: 1;
}
.pc_nav .nav_box {
  display: flex;
  align-items: center;
}
.pc_nav .nav_box .nav_line_box {
  position: relative;
  height: 242px;
  border-left: 1px solid #fff;
}
.pc_nav .nav_box .nav_line_box::before {
  content: '';
  position: absolute;
  top: -20px;
  left: -1px;
  width: 20px;
  height: 20px;
  border: 1px solid #fff;
  border-right: 0;
  border-bottom: 0;
  border-radius: 5px 0 0 0;
}
.pc_nav .nav_box .nav_line_box::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: -1px;
  width: 20px;
  height: 20px;
  border: 1px solid #fff;
  border-right: 0;
  border-top: 0;
  border-radius: 0 0 0 5px;
}
.pc_nav .nav_list {
  padding-left: 30px;
  font-size: 16px;
}
.pc_nav .nav_list li:not(:last-child) {
  padding-bottom: 50px;
}
.pc_nav .nav_list li .line {
  position: relative;
}
.pc_nav .nav_list li .line::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 1px;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  margin-right: 10px;
  background-color: #fff;
}

.mobile_nav {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
}
.mobile_nav .nav_list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.8);
  z-index: 1;
}
.mobile_nav .nav_list li:not(:last-child) {
  padding-bottom: 20px;
}
.mobile_nav .nav_list a {
  font-size: 50px;
}
.mobile_nav.open {
  display: block;
}

/* hall css */
.content.hall1, .content.hall2 {width: 100%; height: 100%;}
.content.video_page {display: block; width: 100%; height: 100%;}

.top_util {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 999;
}

.top_util-item {
  position: relative;
}
.top_util-item .btn {
  display: block;
  width: 24px;
  height: 24px;
  outline: 0;
  background: no-repeat 50% 50%;
  background-size: auto 100%;
  background-size: contain;
}

.text_help_box {
  display: block;
  padding: 5px 10px;
  white-space: nowrap;
  background: rgba(237, 237, 237, 0.9);
  border-radius: 5px;
  color: #000;
  font-size: 14px;
}
.text_help_box.unmute {
  display: none;
}

.top_util-item.item_sound .util-item-desc{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(100% + 10px);
}

.top_util-item .btn_sound-mute {
  background-image: url(../static/ico/ico_sound-mute.svg);
}

.top_util-item .btn_sound-mute.unmute {
  background-image: url(../static/ico/ico_sound-unmute.svg);
}


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

.modal_area.open {
  display: block;
  transition: all .3s;
}

.modal_box {
  display: none;
  position: relative;
  top: 45%;
  left: 50%;
  padding: 76px 25px 20px;
  width: 450px;
  border-radius: 10px;
  transform: translate3d(-50%, -50%, 0);
  background-color: rgba(255, 255, 255, .9);
  z-index: 100;
  color: #0E0E0E;
}

.modal_box.total_guide.active {
  display: block;
}

.modal_box.contact_box.active {
  display: block;
}

.modal_contents {
  width: 100%;
  height: 100%;
}

.modal_item {
  display: none;
  width: 100%;
  height: 100%;
  text-align: center;
}

.modal_item.active {
  display: block;
}

.modal_scroll_box {
  /* max-height: 240px; */
  overflow: auto;
}

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

.modal_box .btn_modal_close {
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  z-index: 100;
  width: 30px;
  height: 30px;
  cursor: pointer;
  background: transparent url('../assets/images/ico/ico-btn-modal-close.svg') no-repeat;
  background-size: cover;
}

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

.indicatorBox span {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background-color: rgba(255, 255, 255, 1);
}

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

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

/* guide_box 공통 css */
.modal_item .guide_box .guide_title {
  position: relative;
  color: #0E0E0E;
  font-weight: 800;
  line-height: 1.3;
  font-size: 22px;
}

.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 {
  font-size: 14px;
  line-height: 1.7;
}

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

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

.modal_item .guide_box .guide_icon .icon_box .icon_title {
  font-weight: 600;
}

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

.modal_btn_box {
  margin-top: 30px;
}

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

.modal_btn_box .btn_wrap *+* {
  margin-left: 5px;
}

/* 모달 button 공통 css */

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

.modal_btn_box .btn_wrap.one button {
  width: 100% !important;
}

.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_wrap {
  position: absolute;
  right: 0;
  left: 0;
  top: 102%;
  width: 100%;
  text-align: right;
}
.modal_btn_box .inp_chk+label {
  display: inline-block;
  outline: 0;
  margin-right: 5px;
  cursor: pointer;
  color: #fff;
}

.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: 16px;
  height: 16px;
  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_w.png) no-repeat center / 60% auto var(--project-sub-color);
}

.btn_close {
  color: #fff;
}

.modal_area .modal_box .brand_logo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -40%);
  padding-bottom: 0;
}

.modal_box .brand_logo {
  height: 120px;
}

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

.modal_box .brand_logo .txt {
  font-size: 26px;
}

.modal_box .title {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 800;
  color: #000;
  line-height: 1.5;
}

.modal_box .title .txt_acc {
  color: var(--project-color-red)
}

.modal_box .desc {
  margin-bottom: 0;
  line-height: 1.5;
  word-break: keep-all;
  color: #1E1E1E;
}

/* interaction guide */

.interaction .guide_box .guide_icon .icon_box {
  width: 20%;
}

.interaction .guide_box .guide_icon .icon_box+.icon_box {
  margin-left: 30px;
}

.interaction .guide_box .guide_icon .icon_box .icon_img {
  position: relative;
  width: 100%;
  height: 0;
  margin: 0 0 20px;
  padding-bottom: 100%;
  background: #fff;
  border-radius: 100%;
}

.interaction .guide_box .guide_icon .icon_box .icon_img img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
}


/*------------------------------ media query ------------------------------*/
@media screen and (max-width: 1200px) {
  /* hall - vr player */
  .vr-player.mobile{padding-top: 70px;}
}

@media screen and (max-width: 1023px) {
  /* 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 */
  .nav {display: block; border-bottom: none; padding: 0;}

  .wrap_skip-btn {
    margin-bottom: 60px;
  }
  /* main (공통)*/
  .main {height: 100%;}

  /* top_left_box */
  .top_logo {
    display: none;
  }
  .top_middle_nav {
    left: unset;
    transform: unset;
    right: 20px;
  }
  .top_middle_nav ul li {
    font-size: 13px;
  }

  .pc_nav {display: none;}
  .top_left_box .mobile_menu_btn{display: flex;}

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

  .modal_area .modal_box {
    top: 50%;
    padding: 60px 20px 16px;
    width: 360px;
    border-radius: 16px;
  }

  .modal_scroll_box {
    max-height: 200px;
  }

  .modal_box .desc {
    font-size: 14px;
  }

  /* guide_box 공통 css */
  .modal_item .guide_box .guide_icon.pc {
    display: none;
  }

  .modal_item .guide_box .guide_icon.mob {
    display: flex;
    margin-bottom: 15px;
  }

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

  .modal_guide {
    display: none !important;
  }

  /* interaction guide */
  .modal_box .title {
    font-size: 20px;
  }

  /* modal_box guide */
  .modal_box .brand_logo {
    height: 115px;
  }

  .interaction .guide_box .guide_icon .icon_box {
    width: 25%;
  }

  .interaction .guide_box .guide_icon .icon_box+.icon_box {
    margin-left: 5.5%;
  }

  .interaction .guide_box .guide_icon .icon_box .icon_img {
    margin: 0 0 10px;

  }

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

@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: 18px;}
}

@media screen and (max-width: 690px) {
  .wrap_skip-btn {
    margin-bottom: 40px;
  }
  .vr-player.mobile{padding-top: 56px;}
}

@media screen and (max-width: 480px) {
  .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: 20px; padding: 8px 20px;}

  .each_lobby.modal_lobby_enter{padding: 0 20px;}

  .mobile_nav .nav_list a {
    font-size: 40px;
  }

  /* modal setting */
  .modal_box {
    width: 80%;
  }
  /* modal common */
  .modal_area .modal_box {
    padding: 15.5vw 4.17vw 3.33vw;
    width: 95%;
  }
  .modal_area .modal_box .brand_logo {
    height: 23.96vw;
  }
  .modal_box .title {
    margin-bottom: 4vw;
    font-size: 4.5vw;
    line-height: 1.3;
  }

  .modal_box .desc {
    font-size: 3.13vw;
  }

  .modal_scroll_box .desc>p+p {
    margin-top: 2vw;
  }

  .modal_area .modal_btn_box {
    margin-top: 4vw;

  }

  .interaction .guide_box .guide_icon .icon_box .icon_title {
    font-size: 4.1vw;
  }

  .modal_area.gift_modal .modal_box {
    padding-top: 10vw;
  }

  .modal_area.gift_modal .modal_scroll_box .img {
    width: 65%;
  }
  .modal_btn_box .inp_chk+label {
    font-size: 13px;
  }
  .modal_btn_box .inp_chk+label:before {
    width: 14px;
    height: 14px;
  }
}

@media screen and (max-width: 480px) and (max-height: 800px)  {
  .welcome_txt{top: 4vh;}
  .main_page .brand_emblem_img {width: 39vh;}
}

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


/* this project only ====================================== */
.lobby_logo {position: absolute; top: 20px; left: 20px; width: 100px; z-index: 111;}
.lobby_logo img {width: 100%;}

@media screen and (max-width: 690px) {
  .text_help_box {font-size: 12px;}

  .lobby_logo {width: 70px;}
}

@media screen and (max-width: 375px) {
  .top_util-item.item_sound .util-item-desc {right: calc(100% + 3px);}
  .text_help_box {font-size: 3.2vw;}

  .lobby_logo {width: 18.667vw;}
}



/*------------------------------ animation keyframes ------------------------------*/
@keyframes progressBar {
  0% {
    width: 0%;
  }
  25% {
    width: 25%;
  }
  30% {
    width: 25%;
  }
  65% {
    width: 60%;
  }
  75% {
    width: 60%;
  }
  85% {
    width: 70%;
  }
  100% {
    width: 100%;
  }
}