:root {
  --project-main-color: rgba(100, 178, 191, 1);
  --project-main-color-hover: rgba(100, 178, 191, .7);
  --project-custom-color: rgba(0, 0, 0, 1);
  --project-custom-color-hover: rgba(0, 0, 0, .7);
  --project-title-font-color: rgba(17, 72, 113, 1);
}

@font-face {
  font-family: 'NanumSquareNeo-Variable';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2');
}

/* common */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: NanumSquareNeo-Variable;
}

body {
  overflow: hidden;
}

button {
  color: #fff;
  outline: 0;
  border: 0;
}

a {
  text-decoration: none;
}

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

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

.default_btn.prev {
  display: none;
  /* padding: 10px 20px; */
  background-color: var(--project-custom-color);
  /* border-radius: 30px; */
  /* font-size: 14px; */
  /* cursor: pointer; */
  /* transition: background-color 0.3s; */
}

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

/* scroll bar */
::-webkit-scrollbar {
  width: 4px;
}

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

::-webkit-scrollbar-thumb {
  background: #535353;
  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);
}

/* responsive */
.mbr {
  display: none;
}

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

#app {
  width: 100%;
  height: 100%;
}

.scroll_auto,
.scroll_auto body {
  overflow-y: visible !important;
}

/* nav ------------------------------------------------------------------------------------------------------------ */
/* header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 120;
  width: 100%;
  height: 60px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 13px 16px;
  background: #fff;
  font-size: 0;
}

.site_logo {
  position: absolute;
  top: 50%;
  left: 16px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.site_logo h1 {
  width: 270px;
  height: 50px;
  background: url(../../static/logo/logo_brand.png) no-repeat 0 50%;
  background-size: contain;
  font-size: 0;
}

/* pc nav */
.gnb {
  text-align: center;
  /* is_selected */
}

.gnb .gnb-btn {
  display: none;
}

.gnb .gnb-item {
  display: inline-block;
  vertical-align: middle;
}

.gnb .gnb-item:not(:first-child) {
  margin-left: 26px;
}

.gnb .gnb-item a,
.gnb .gnb-item button {
  display: block;
  position: relative;
  font-size: 16px;
  line-height: 34px;
  padding: 0;
  font-weight: 700;
  color: #222;
  -webkit-transition: color .4s ease-in-out;
  transition: color .4s ease-in-out;
}

.gnb .gnb-item a:before,
.gnb .gnb-item button:before {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 0;
  height: 2px;
  background: var(--project-main-color);
  content: '';
  -webkit-transition: width .4s ease-in-out;
  transition: width .4s ease-in-out;
}

.gnb .is_selected.gnb-item a,
.gnb .is_selected.gnb-item button,
.gnb.is_res .is_selected.gnb-item a,
.gnb.is_res .is_selected.gnb-item button {
  color: var(--project-main-color);
}

.gnb .is_selected.gnb-item a:before,
.gnb .gnb-item a:hover:before,
.gnb .gnb-item a:focus:before,
.gnb .is_selected.gnb-item button:before,
.gnb .gnb-item button:hover:before,
.gnb .gnb-item button:focus:before {
  width: 100%;
}

.gnb .gnb-item a span {
  font-size: 20px;
  color: #2e2e2e;
  font-weight: 600;
}

/* breadcrumbs */
.breadcrumbs {
  display: inline-block;
  padding-left: 30px;
  vertical-align: middle;
  opacity: .7;
}

.breadcrumbs_item {
  font-size: 16px;
  color: #fff;
}

.breadcrumbs_item strong {
  padding-left: 0;
}

/* help icon */
.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-item:first-child {
  margin-left: 0;
}

.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/img/ico_help.svg);
}

/* page - intro -----------------------------------------------------------------------------------------------------*/
/* Common class */
.container {
  padding-top: 60px;
}

.main {
  height: 100%;
  overflow-y: hidden;
  padding-top: 0 !important;
}

.main .content {
  position: relative;
  width: 100%;
  height: 100%;
}

.main-title_box {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 20px 30px;
  z-index: 20;
  color: #fff;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
}

.main-title_box .main_title {
  height: 200px;
  margin-bottom: 25px;
  font-weight: 500;
}

.main-title_box .main_title-eng {
  display: block;
  font-size: 30px;
  font-weight: 400;
}

.main-title_box .main_title img {
  height: 100%;
}

.main-title_box .main_desc {
  font-size: 18px;
  word-break: keep-all;
}

.main .afterPlay {
  margin-top: 1%;
}

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

.header_logo {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 300px;
}

.header_logo .main_title {
  font-weight: 500;
  /* height: 30px; */
  width: 100%;
}

.header_logo .main_title img {
  height: 100%;
}

@media screen and (max-width: 690px) {
  .header_logo .main_title {
    height: 20px;
  }
}

#footer {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.main .afterPlay {
  margin-bottom: 40px;
  text-align: center;
}

.main .afterPlay .btn {
  background: rgba(255, 255, 255, .2);
  border: 1px solid #fff;
  opacity: .6;
  transition: opacity 0.3s;
}

.main .afterPlay .btn:hover {
  opacity: 1;
}

.main .afterPlay .btn span {
  font-size: 20px;
}

@media screen and (max-width: 690px) {
  .main-title_box {
    left: 10px;
  }

  .main .afterPlay {
    margin-bottom: 20px;
  }
}

/* elypecs logo */
.elypecs_logo {
  position: fixed;
  bottom: 3%;
  right: 40px;
  z-index: 1;
  height: 50px;
}

.elypecs_logo img {
  height: 100%;
}

/* chrome_download */
.chrome_download {
  position: fixed;
  bottom: 1%;
  left: 40px;
  z-index: 1;
  margin: 10px auto;
  font-size: 0;
  text-align: right;
}

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

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

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

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

/* page - Hall Common -------------------------------------------------------------------------------------- */
.hall {
  width: 100%;
  height: 100%;
}

.hall .contents {
  position: relative;
  width: 100%;
  height: 100%;
}

.vr-player {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

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


.guide_modal_btn {
  position: absolute;
  bottom: 10px;
  right: 16px;
  width: 20px;
  height: 20px;
  background: none;
  cursor: pointer;
  z-index: 999;
}

.guide_modal_btn>div {
  width: 100%;
  height: 100%;
  background: url('../../static/img/btn-icon-player-infoguide-df.png') no-repeat center center;
  background-size: 100% 100%;
}

.guide_modal_btn.open>div {
  background: url('../../static/img/btn-icon-player-infoguide-sl.png') no-repeat center center;
  background-size: 100% 100%;
}

/* 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: 45%;
  left: 50%;
  width: 625px;
  height: 480px;
  transform: translate3d(-50%, -50%, 0);
  z-index: 100;
}
.modal_box.custom {
  width: 645px;
  height: 530px;
}

.modal_box .modal_contents {
  border: 3px solid var(--project-main-color);
  border-radius: 10px;
  overflow: hidden;
  background-color: rgba(229, 238, 241, 100);
}

.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 {
  padding: 0;
  height: 100%;
  overflow: auto;
  color: #000;
}

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

.modal_item.custom .modal_scroll_box {
  max-height: 100%;
  margin-top: 0;
}

.modal_item.interaction.custom {
  padding: 15px 10px 30px;
}

.modal_item.custom .modal_scroll_box {max-height: 100%; margin-top: 0;}

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

.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: 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 */
.guide_box.lobby{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  height: 100%;
}
.lobby_title{
  background-color: transparent
}
.lobby_txt{
  margin: 80px 0;
  color: #111;
  font-weight: bold;
  line-height: 3;
  word-break: keep-all;
}
.modal_item .guide_box .guide_title {
  position: relative;
  padding: 10px 0 15px;
  color: var(--project-title-font-color);
  font-weight: 800;
  line-height: 1.3;
  font-size: 20px;
}

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

.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;
  color: var(--project-title-font-color);
  padding-bottom: 10px;
}

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

.modal_btn_box {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

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

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

/* 모달 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;
  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: 16px;
  height: 16px;
  border: 2px solid #cccccc;
  border-radius: 100%;
  vertical-align: middle;
}

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

.btn_close {
  color: #fff;
}

/* modal_item - intro */

.modal_item.intro {
  background-color: #69A7B5;
}

.modal_item.intro .modal_item_inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 15px 10px 30px;
  width: 100%;
  height: 100%;
}

.modal_item.intro .brand_title {
  font-weight: 700;
  color: var(--project-title-font-color);
  font-size: 24px;
}

.modal_item.intro .brand_logo {
  width: 15%;
}

.modal_item.intro .brand_logo img {
  width: 100%;
}

.modal_item.intro .brand_logo .txt {
  font-size: 35px;
  font-weight: 600;
  color: var(--project-main-color);
}

.modal_item.intro .modal_scroll_box {
  flex: 1;
  width: 100%;
}

.modal_item.intro .modal_scroll_box .desc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  line-height: 1.5;
}

.modal_item.intro .modal_img.mobile {
  display: none;
}

.modal_item.intro .modal_img img {
  width: 100%;
}

/* interaction */

.modal_item.interaction .modal_item_inner {
  padding: 30px 0;
  height: 100%;
}

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

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

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

/* modal_guide 공통 css */
/* mobile display none */
.modal_guide .tutorial_item_mob {
  display: none;
}

.modal_guide .tutorial_item .tutorial_item_text p {
  font-size: 12px;
  color: #fff;
  line-height: 1.4;
  text-align: left;
  word-break: break-word;
  letter-spacing: -0.5px;
  padding-top: 4px;
  word-break: keep-all;
}

/* modal_guide - left 공통 css */
.modal_guide.left {
  position: absolute;
  top: 164px;
  left: 8px;
}

.modal_guide.left .tutorial_item {
  display: block;
  position: relative;
  height: 57px;
}

.modal_guide.left .tutorial_item:before {
  display: block;
  width: 54px;
  height: 54px;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  content: '';
}

.modal_guide.left .arrow_box::before {
  content: '';
  background: var(--project-main-color);
  position: absolute;
  top: 50%;
  margin-left: 50px;
}

.modal_guide.left .arrow_box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid var(--project-main-color);
  border-top: none;
  border-right: none;
}

.modal_guide.left .tutorial_item .tutorial_item_text {
  position: absolute;
  top: 0;
  left: 136px;
  width: 140px;
  margin-top: 58px;
}

.modal_guide.left .tutorial_item.minimap .tutorial_item_text {
  margin-top: 18px;
}

.modal_guide.left .tutorial_item.spot .tutorial_item_text {
  margin-top: 46px;
}

.modal_guide.left .tutorial_item.autoplay .tutorial_item_text {
  margin-right: 120px;
}

.modal_guide.left .tutorial_item.origin .tutorial_item_text {
  margin-bottom: 134px;
  margin-right: 50px;
}

.modal_guide.left .tutorial_item.fullscreen .tutorial_item_text {
  margin-right: -140px;
}

.modal_guide.left .tutorial_item.minimap .arrow_box::before {
  width: 80px;
  height: 1px;
}

.modal_guide.left .tutorial_item.minimap .arrow_box::after {
  content: none;
}

.modal_guide.left .tutorial_item.spot .arrow_box::before {
  width: 69px;
  height: 1px;
}

.modal_guide.left .tutorial_item.spot .arrow_box::after {
  width: 10px;
  height: 28px;
  margin-left: 118px;
  margin-top: 29px;
}

.modal_guide.left .tutorial_item.theme .arrow_box::before {
  width: 10px;
  height: 1px;
}

.modal_guide.left .tutorial_item.theme .arrow_box::after {
  width: 67px;
  height: 38px;
  margin-left: 60px;
  margin-top: 29px;
}

.modal_guide.left .tutorial_item.minimap:before {
  background-image: url('../../static/img/ico-help-minimap.png');
}

.modal_guide.left .tutorial_item.spot:before {
  background-image: url('../../static/img/ico-help-spot.png');
}

.modal_guide.left .tutorial_item.theme:before {
  background-image: url('../../static/img/ico-help-theme.png');
}

/* modal_guide - right 공통 css */
.modal_guide.right {
  position: absolute;
  top: 104px;
  right: 10px;
}

.modal_guide.right .tutorial_item {
  display: block;
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 100%;
}

.modal_guide.right .tutorial_item+.tutorial_item {
  margin-top: 14px;
}

.modal_guide.right .tutorial_item .tutorial_item_text {
  position: absolute;
  top: 0;
  right: 80px;
  width: 130px;
  margin-top: 16px;
}

.modal_guide.right .tutorial_item .tutorial_item_text p+p {
  margin-top: 5px;
}

.modal_guide.right .tutorial_item:before {
  display: block;
  width: 54px;
  height: 54px;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  content: '';
}

.modal_guide.right .arrow_box::before {
  content: '';
  background: var(--project-main-color);
  position: absolute;
  top: 50%;
  right: 100%;
  width: 26px;
  height: 1px;
}

.modal_guide.right .tutorial_item.custom:before {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: #e1e1e1;
}

/* modal_guide - right top (chat) 공통 css */
.modal_guide.right.top {
  right: 15px;
  top: 15px;
}

.modal_guide.right .tutorial_item.chat:before {
  background-image: url('../../static/img/ico-help-chat.png');
  background-position: center center;
}

/* modal_guide - bottom 공통 css */
.modal_guide.bottom {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
}

.modal_guide.bottom .tutorial_item {
  display: inline-block;
  position: relative;
  width: 36px;
}

.modal_guide.bottom .tutorial_item:before {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  content: '';
}

.modal_guide.bottom .tutorial_item .tutorial_item_text {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 140px;
  margin-bottom: 28px;
}

.modal_guide .tutorial_item .tutorial_item_text .tutorial_item_title {
  font-weight: 600;
  color: var(--project-main-color);
}

.modal_guide.bottom .tutorial_item.autoplay .tutorial_item_text {
  margin-right: 36px;
}

.modal_guide.bottom .tutorial_item.origin .tutorial_item_text {
  margin-bottom: 108px;
  margin-right: -118px;
}

.modal_guide.bottom .tutorial_item.fullscreen .tutorial_item_text {
  margin-right: -160px;
}

/* modal_guide - bottom - arrow */
.modal_guide.bottom .arrow_box::before {
  content: '';
  background: var(--project-main-color);
  position: absolute;
  bottom: 0%;
  left: 0;
}

.modal_guide.bottom .arrow_box::after {
  content: '';
  background: var(--project-main-color);
  position: absolute;
  bottom: 0%;
  left: 50%;
  margin-bottom: 26px;
  transform: translateX(-50%);
}

.modal_guide.bottom .tutorial_item.autoplay .arrow_box::before {
  width: 104px;
  height: 1px;
  margin-left: -86px;
  margin-bottom: 91px;
}

.modal_guide.bottom .tutorial_item.autoplay .arrow_box::after {
  width: 1px;
  height: 66px;
}

.modal_guide.bottom .tutorial_item.origin .arrow_box::before {
  content: none;
}

.modal_guide.bottom .tutorial_item.origin .arrow_box::after {
  width: 1px;
  height: 80px;
}

.modal_guide.bottom .tutorial_item.fullscreen .arrow_box::before {
  width: 30px;
  height: 1px;
  margin-left: 17px;
  margin-bottom: 76px;
}

.modal_guide.bottom .tutorial_item.fullscreen .arrow_box::after {
  width: 1px;
  height: 52px;
}

.modal_guide.bottom .tutorial_item.autoplay:before {
  background-image: url('../../static/img/icon-player-autoplay-df.png');
}

.modal_guide.bottom .tutorial_item.origin:before {
  background-image: url('../../static/img/icon-player-origin-df.png');
}

.modal_guide.bottom .tutorial_item.fullscreen:before {
  background-image: url('../../static/img/icon-player-fullscreen-df.png');
}

/* tour tip guide */
.tour_tip .guide_box .guide_icon {
  position: absolute;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -42%);
}

.tour_tip .guide_box .guide_icon .icon_box {
  margin-top: 30px;
  width: 33.33%;
}
.tour_tip .guide_box .guide_icon .icon_box img {width: 50%;}


/* Media Query ------------------------------------------------------------------------------------------------------------------- */

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

  /* nav */
  .gnb.is_pc .gnb-item:not(:first-child) {
    margin-left: 22px;
  }

}

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

  .modal_guide.left .tutorial_item.theme .arrow_box::before {
    content: none;
  }

  .modal_guide.left .tutorial_item.theme .arrow_box::after {
    width: 22px;
    margin-left: 50%;
    margin-top: 100%;
  }

  .modal_guide.left .tutorial_item.theme .tutorial_item_text {
    top: auto;
    margin-top: 28px;
    left: 58px;
  }
}

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

  .modal_item.interaction .title {
    margin: 24px 0;
  }

  .modal_scroll_box .desc {
    line-height: 1.7;
    word-break: keep-all;
  }

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

  .modal_btn_box {
    margin-top: 10px;
  }

  .lobby_txt{
    margin: 3vw 0;
    font-size: 1.15vw;
  }


}

@media screen and (max-width: 1280px) and (max-height: 770px) {
  .modal_guide.bottom {
    display: none;
  }
}

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

  /* nav */

  .gnb.is_pc .gnb-item:not(:first-child) {
    margin-left: 14px;
  }

  .gnb.is_pc .gnb-item a,
  .gnb.is_pc .gnb-item button {
    font-size: 14px;
  }
}

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

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

  .mbr {
    display: block;
  }


  /* nav */

  .header {
    height: 50px;
    padding: 13px 10px;
  }

  .site_logo {
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .site_logo h1 {
    background-position: 50% 50%;
    width: 50vw;
    height: 30px;
  }

  .global {
    right: 10px;
  }

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

  /* res nav */
  .gnb .gnb-wrap {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
  }

  .gnb .gnb-btn {
    display: block;
    position: absolute;
    width: 30px;
    height: 24px;
    z-index: 10;
    background: url(../../static/img/ico_menu_B.png) no-repeat 50% 50%;
    background-size: 18px;
    opacity: .7;
    -webkit-transition: all .3s;
    transition: all .3s;
    outline: 0;
  }

  .gnb .gnb-list {
    display: none;
    width: 100%;
    -webkit-box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.2);
  }

  .gnb .gnb-item {
    width: 100%;
    text-align: left;
    background: rgba(242, 242, 242, .5);
  }

  .gnb .gnb-item.is_selected {
    background: rgba(242, 242, 242, .8);
  }

  .gnb .gnb-item:not(:first-child) {
    margin-left: 0;
  }

  .gnb .gnb-item a,
  .gnb .gnb-item button {
    display: block;
    padding: 6px 17px;
    font-size: 16px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: -.7px;
    color: #6b6b6b;
  }

  .gnb .gnb-item a:before {
    content: none;
  }

  .gnb .gnb-title {
    display: block;
    position: relative;
  }
  .gnb .gnb-item a span {
    font-size: 18px;
  }

  /* page - intro */
  .container {
    padding-top: 50px;
  }

  .main-title_box {
    left: 0;
    bottom: 1.5%;
  }

  .main-title_box .main_title {
    height: 160px;
  }

  .main {
    overflow-y: visible;
    height: 100%;
  }

  .elypecs_logo {
    right: 10px;
    bottom: 1.5%;
  }

  .chrome_download {
    display: none;
  }


  /* modal setting */


  .modal_area .modal_btn_box {
    margin-top: 8px;
    flex-direction: column;
  }

  /* .modal_area .modal_btn_box .btn_box_item {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    width: 100%;
  } */

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

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

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

  .modal_scroll_box {
    
  }

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

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

  .modal_item .guide_box .guide_icon.mob {
    display: flex;
    margin-top: 50px;
    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_guide {
    display: none !important;
  }

  /* intro guide */

  .modal_item.intro .brand_title {
    font-size: 20px;
  }

  .modal_item.intro .modal_item_inner {
    padding: 25px 0 20px;
  }

  .modal_item.intro .modal_scroll_box .desc {
    font-size: 14px;
  }

  .modal_item.intro .modal_img.pc {
    display: none;
  }

  .modal_item.intro .modal_img.mobile {
    display: block;
  }


  /* interaction guide */

  .modal_item.interaction {
    border-radius: 4px;
  }

  .modal_item.interaction .title {
    margin-top: 15px;
    margin-bottom: 30px;
    font-size: 14px;
  }

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

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

  /* interaction guide */

  .modal_item.interaction .guide_box .guide_icon .icon_box {
    padding: 0;
    width: 31.25%;
  }

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

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

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

  /* indicatorBox */
  .indicatorBox {
    bottom: 10px;
  }

  /* modal */
  .modal_bg {
    top: 50px;
  }

  .lobby_txt{
    margin: 3vw 0;
    font-size: 1.5vw;
    line-height: 2;
  }
  .lobby_logo{
    width: 15vw;
  }

}


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

  /* page - Main */
  .main .intro_title {
    width: 240px;
  }

  .main-title_box .main_title {
    height: 120px;
  }

  .main .content .play_btn {
    bottom: 10%;
    width: 100%;
    text-align: center;
  }

  .elypecs_logo {
    height: 40px;
  }

}

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

  /* nav */

  .breadcrumbs_item span:not(.is_now) {
    display: none;
  }
}

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

  /* page - Main */
  .main .intro_title {
    width: 240px;
  }

  .main-title_box .main_title {
    height: 120px;
  }

  .main .afterPlay {
    margin-top: 10px;
  }

  .elypecs_logo {
    display: none;
    bottom: 16px;
    height: 20px;
  }

  .lobby_txt{
    font-size: 14px;
    line-height: 2;
  }

}
@media screen and (max-width: 480px) {
  .gnb .gnb-item a span {
    font-size: 3.33vw;
  }
}


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

  /* page - Main */
  .main-title_box .main_title img {
    height: 120px;
  }

  .lobby_title {
    font-size: 4.5vw !important;
  }
  .lobby_txt{
    font-size: 3.5vw;
  }
  .lobby_logo{
    width: 20vw;
  }

}

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

  /* default button style */
  .default_btn {
    padding: 3vw 6vw;
    font-size: 3.4vw;
  }

  /* modal setting */
  .modal_box, .modal_box.custom {
    width: 94vw;
    height: 100vw;
  }

  /* modal */
  
  .modal_item.intro .brand_title {
    font-size: 5.5vw;
  }

  .modal_item.intro .modal_scroll_box .desc {
    font-size: 3.8vw;
  }

  .modal_item.interaction.custom .guide_box .guide_icon.mob {
    margin-top: 10px;
  }

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

  .modal_item .guide_box .guide_icon.mob {
    margin-top: 10px;
  } 

}

/* 360px end */

@media screen and (max-width: 280px) {
  .modal_box, .modal_box.custom {
    width: 92%;
  }
}

/* 280px end */