/* common */
/* default btn */
.header .btn-lobby, .main .content .btn, .lobby .contents .lobby_btn_wrap .btn, .search_company-item .btn_wrap .btn, .modal .btn {display: inline-block; padding: 12px 24px; background: #4a1480; background: -webkit-gradient( linear, left top, right top, color-stop(1%, #9327ff), to(#4a1480)); background: linear-gradient(to right, #9327ff 1%, #4a1480 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$btn_color1', endColorstr='$btn_color2', GradientType=1); border-radius: 52px; color: #fff; -webkit-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.3); font-size: 0; vertical-align: middle; outline: 0;}

.header .btn-lobby > span, .main .content .btn > span, .lobby .contents .lobby_btn_wrap .btn > span, .search_company-item .btn_wrap .btn > span, .modal .btn > span {display: inline-block; font-size: 16px; font-weight: 700; letter-spacing: -0.9px; line-height: 1.7;}

.header .btn-lobby > span.has_ico, .main .content .btn > span.has_ico, .lobby .contents .lobby_btn_wrap .btn > span.has_ico, .search_company-item .btn_wrap .btn > span.has_ico, .modal .btn > span.has_ico {position: relative; padding-right: 14px;}

.header .btn-lobby > span.has_ico:before, .main .content .btn > span.has_ico:before, .lobby .contents .lobby_btn_wrap .btn > span.has_ico:before, .search_company-item .btn_wrap .btn > span.has_ico:before, .modal .btn > span.has_ico:before {position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 7px; height: 12px; background: url(../img/arrow-right.png) no-repeat 0 50%; background-size: auto 12px; content: "";}

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

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

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: 10%; 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 24px; background: #6768AB; border-radius: 30px; opacity: 0.8; transition: all 0.4s; -webkit-box-shadow: 0px 0px 15px 1px rgba(0, 0, 0, 6%); box-shadow: 0px 0px 15px 1px rgba(0, 0, 0, 6%); color: #fff; font-size: 20px;}
.skip-btn button:hover {opacity: 1;}

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

/* loading */
.loading {position: fixed; top: 0; left: 0; width: 100%; height: 100%; animation: bgRemove 0.4s 2.3s ease-in-out forwards;}
.loading .bg_01 {position: absolute; width: 100%; height: 100%; background-color:#3cb9dd; z-index: 99;}
.loading .bg_02 {position: absolute; bottom: 0; width: 100%; height: 0%; background-color: #fff; animation: bgUp 1.2s 0.75s ease-in-out forwards; z-index: 100;}
.loading .bg_03 {position: absolute; bottom: 0; width: 100%; height: 0%; background-color:#4d997b ; animation: bgUp 0.9s 1.15s ease-in-out forwards; z-index: 101;}

/* page */
.total_wrap {position: relative; width: 100%; height: 100%; background-color: #6768AB; z-index: -1;}
.loop_text_box {display: flex; align-items: center; white-space: nowrap; width: 100%; height: 50px; position: absolute; top: 0; left: 0; overflow: hidden;}
.loop_text_box .each_text {display: flex; animation: textLoop 18s linear infinite forwards;}
.loop_text_box .each_text span {font-size: 20px; color: #fff; font-weight: 600; margin: 0 30px;}
.main {display: flex; justify-content: center; position: absolute; top: 50px; width: 100%; height: 100%;}
.main .content {position: relative; width: 98%;height: calc(100% - 120px);overflow: hidden; border-radius: 50px;}
.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(메인 이미지) */
.main .lobby_bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center;}
.not_mobile {display: block !important;}
.main .lobby_bg .lobby_btn_wrap .bg_img_island{display: flex; align-items: center; width: 100%; height: 100%;}
.main .lobby_bg .lobby_btn_wrap .bg_img_island img {width: 100%; height: 100%; object-fit: cover;}
.main .lobby_btn_wrap {position: relative; width: 100%; height: 100%;}
.lobby_btn_wrap .each_lobby {display: flex; flex-direction: column-reverse; align-items: center; position: absolute; left: 50%; transform: translate(-50%, -50%); z-index: 10;}
.each_lobby.modal_lobby_enter {width: 100%; bottom: 8%;}
.lobby_btn_wrap .each_btn span {font-size: 20px; font-weight: 600; color: #fff; transition: font-size 0.3s;}
.lobby_btn_wrap .each_btn span b{color: #EE7CEE; font-size: 26px;}
.lobby_btn_wrap .each_btn:hover span {font-size: 22px;}
.lobby_btn_wrap .each_btn.on {background-image: url(../img/btn-close-modal.png);}
.lobby .contents .lobby_btn_wrap .btn {position: absolute; z-index: 1;}

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

/* footer */
.footer {display: flex; align-items: center; justify-content: space-between; position: absolute; width: 100%; height: 70px; bottom: 50px; left: 0; padding: 0 30px;}

.footer .toggle_bgm_box {display: flex; align-items: center; transition: transform 0.3s;}
.footer .toggle_bgm_box:hover {transform: scale(1.1);}
.footer .toggle_bgm_box .toggle_bar {position: relative; width: 45px; height: 16px; background-color: #fff; border-radius: 10px;}
.footer .toggle_bgm_box .toggle_bar::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 24px; height: 24px; background-color: #ff6bb3; border-radius: 100%;}
.footer .toggle_bgm_box .bgm_text {padding-left: 10px; font-size: 22px; color: #fff; font-weight: 600; letter-spacing: -1.8px;}
.bgOn .toggle_bar::before {animation: bgmOnBtn 0.7s forwards;}
.bgOff .toggle_bar::before {animation: bgmOffBtn 0.7s forwards;}

.footer .info_btn_box {display: flex; align-items: center;}
.footer .info_btn_box ul {display: flex; align-items: center;}
.footer .info_btn_box ul li {padding: 0 20px;}
.footer .info_btn_box a {display: block; height: 100%;}
.footer .info_btn_box a:hover img{transform: scale(1.2);}
.footer .info_btn_box a img {height: 34px;}
.footer .info_btn_box a.NFT_btn img {height: 36px;}
.footer .info_btn_box .mobile_menu_btn {display: none; width: 34px; height: 34px; background: url(../img/ico_footer_menu.png) no-repeat center center; background-size: 100% 100%;}
.footer .info_btn_box.active ul {display: none;}
.footer .info_btn_box.active .mobile_menu_btn {display: block;}
.footer .info_btn_box.active ul.open {display: flex; justify-content: center; position: absolute; width: 100%; left: 50%; bottom: 100%; transform: translateX(-50%); padding: 10px 0; z-index: 999; background: #6768AB;}
.footer .info_btn_box.active ul.open li {padding: 0 1vw;}
.footer .info_btn_box.active .mobile_menu_btn.up {width: 34px; height: 34px; background: url(../img/ico_footer_menu_up.png) no-repeat center center; background-size: 100% 100%;}

.footer .total_logo_box {display: flex; align-items: center;}
.footer .total_logo_box .main_logo {height: 40px; padding: 0 10px;}
.footer .total_logo_box .main_logo img {height: 100%;}

/* modal */
.modal.sns {display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; font-size: 16px; font-weight: 400; letter-spacing: -0.8px; line-height: 1.87; color: #fff; word-break: keep-all; z-index: 999;}
.modal.sns .modal_snsBg {display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 300; background: rgba(0,0,0,.5); z-index: 300;}

.modal.sns {display: none; position: fixed; width: 98%; height: calc(100% - 120px); top: 50px; left: 50%; transform: translateX(-50%); font-size: 16px; font-weight: 400; letter-spacing: -0.8px; line-height: 1.87; color: #fff; word-break: keep-all; z-index: 999;}
.modal.sns .modal_snsBg {display: none; position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 50px; z-index: 300; background: rgba(0,0,0,.5); z-index: 300;}

.modal.sns .modal_inner {position: absolute; top: 50%; left: 50%; text-align: center; border-radius: 5px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 999;}
.modal.sns .modal_inner .modal_title {height: 80px;}
.modal.sns .modal_inner .modal_title img {height: 100%;}
.modal.sns .modal_inner .modal_contents_box {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; width: 500px; padding: 20px; margin: 20px auto 20px; background: rgba(255, 255, 255, 0.7); border-radius: 40px;}
.modal.sns .modal_inner .modal_each_content {padding: 10px 15px; position: relative;}
/* .modal.sns .modal_inner .modal_each_content.discord {transition: opacity 0.3s;} */
.modal.sns .modal_inner .modal_each_content.discord span {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); line-height: 1.2; opacity: 0; transition: opacity 0.5s; color: #2e2e2e; font-weight: 600;}
.modal.sns .modal_inner .modal_each_content.discord img {opacity: 1;}
.modal.sns .modal_inner .modal_each_content.discord:hover img {opacity: 0;}
.modal.sns .modal_inner .modal_each_content.discord:hover span {opacity: 1;}
.modal.sns .modal_inner .modal_each_content a {display: block; width: 100%; height: 100%;}
.modal.sns .modal_inner .modal_each_content a img {height: 34px;}
.modal.sns .modal_inner .modal_each_content.email a img {height: 30px;}
.modal.sns .modal_inner .modal_footer {font-size: 20px; font-weight: 500;}

.modal.speech_box {display: flex; align-items: flex-end; position: absolute; bottom: 0; width: 100%; max-height: 300px; padding: 30px 40px; background-color: rgba(0,0,0,.6); border-radius: 20px 20px 0 0; z-index: 199;}
.modal.speech_box .close_btn {background: url(../img/ico_cancel.png) no-repeat center center; background-size: 100% 100%; position: absolute; top: 20px; right: 20px; width: 30px; height: 30px;}
.modal.speech_box .img_box {padding: 0 20px;}
.modal.speech_box .img_box img {width: 300px; border-radius: 20px;}
.modal.speech_box .text_box {padding: 0 0 50px 40px;}
.modal.speech_box .text_box p, .modal.speech_box .text_box pre {font-size: 18px; font-weight: 500; color: #fff; padding-bottom: 5px; line-height: 1.6;}
.modal.speech_box .text_box p:last-child {color: #EE7CEE;}
.modal.speech_box .text_box .title {font-size: 26px; font-weight: 600; color: #ffcb01;}
.modal.speech_box .text_box .char_script {height: 70px;}
.modal.speech_box .text_box .char_script pre:after {content: ''; margin-left: .4rem; border-right: 2px solid #777; animation: cursor .9s infinite steps(2);}
.modal.speech_box .text_box .info {opacity: 0;}
.modal.speech_box .text_box .info.on {opacity: 1;}

/* garage css */
.garage_video .videoplayer {display: block;}
.garage .modal.speech_box {max-height: 300px;}
.garage .modal.speech_box .text_box {padding: 0 0 40px 40px;}

/*------------------------------ media query ------------------------------*/
@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: 1024px) {
  /* default btn */
  .header .btn-lobby, .main .content .btn, .lobby .contents .lobby_btn_wrap .btn, .search_company-item .btn_wrap .btn, .modal .btn {padding: 6px 14px;}
  .header .btn-lobby > span, .main .content .btn > span, .lobby .contents .lobby_btn_wrap .btn > span, .search_company-item .btn_wrap .btn > span, .modal .btn > span {font-size: 14px;}
  /* base */
  html,
  html body {height: 100%;}
  /* main (공통)*/
  .main {height: 100%; overflow: overlay;}  
  /* hall */
  /* .modal.speech_box {max-height: 230px;}
  .modal.speech_box .img_box {padding: 0; padding-right: 20px;}
  .modal.speech_box .img_box img {width: 250px;}
  .modal.speech_box .text_box {padding: 0 0 20px 0px;} */

  /* hall */
  .modal.speech_box {flex-direction: column; align-items: flex-start; justify-content: flex-end; max-height: 200px; padding: 3vw 4vw;}
  .modal.speech_box .img_box {position: absolute; bottom: 100%; padding-bottom: 14px; padding-right: 0; padding-left: 0;}
  .modal.speech_box .img_box img {width: 15vw;}
  .modal.speech_box .text_box {padding: 0!important;}
  .modal.speech_box .text_box .title {font-size: 22px;}
  .modal.speech_box .text_box p, .modal.speech_box .text_box pre {font-size: 16px;}

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

@media screen and (max-width: 1024px) and (orientation: landscape) {
  /* default btn */
  .header .btn-lobby, .main .content .btn, .lobby .contents .lobby_btn_wrap .btn, .search_company-item .btn_wrap .btn, .modal .btn {padding: 6px 14px;}
  .header .btn-lobby > span, .main .content .btn > span, .lobby .contents .lobby_btn_wrap .btn > span, .search_company-item .btn_wrap .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_btn_wrap .each_btn span {font-size: 18px;}
  .lobby_btn_wrap .each_btn:hover span {font-size: 20px;}
  .lobby_btn_wrap .each_btn span b {font-size: 24px;}

  /* footer */
  .footer .info_btn_box a {padding: 0 14px;}
  .modal.sns .modal_inner .modal_footer {font-size: 1.5rem;}

  /* hall */
  /* .modal.speech_box {flex-direction: column; align-items: flex-start; justify-content: flex-end; max-height: 200px; padding: 3vw 4vw;}
  .modal.speech_box .img_box {position: absolute; bottom: 100%; padding-bottom: 14px; padding-right: 0;}
  .modal.speech_box .img_box img {width: 15vw;}
  .modal.speech_box .text_box {padding: 0!important;}
  .modal.speech_box .text_box .title {font-size: 22px;}
  .modal.speech_box .text_box p, .modal.speech_box .text_box pre {font-size: 16px;} */
}

@media screen and (max-width: 690px) {
  .modal.sns .modal_inner .modal_contents_box {width: 70vw;}
  .modal.sns .modal_inner .modal_each_content a img, .modal.sns .modal_inner .modal_each_content.email a img {height: 6vw;}
  /* hall - vr player */
  .vr-player.mobile{padding-top: 56px;}
  /* hall */
  .modal.speech_box .text_box .char_script {height: 12.5vw;}
  .modal.speech_box .img_box {padding-bottom: 8px;}
  .modal.speech_box .img_box img {width: 20vw;}
  .modal.speech_box .text_box .title {font-size: 4vw;}
  .modal.speech_box .text_box p, .modal.speech_box .text_box pre {font-size: 2.7vw;}
  
}

@media screen and (max-height: 530px) {
  /* wrap_scroll */
  .wrap_scroll {width: 960px !important;}
  /* intro - lobby(메인 이미지) */
  .lobby_btn_wrap .each_btn {width: 36px; height: 36px;}
}

@media screen and (max-width: 480px) {
  .loop_text_box {height: 40px;}
  .loop_text_box .each_text span {font-size: 18px;}

  .main {top: 40px;}
  .main .content {width: 100%; height: calc(100% - 90px); border-radius: 0;}
  /* intro - entry_video */
  .skip-btn button{font-size: 18px; padding: 8px 20px;}

  .lobby_btn_wrap .each_btn span {padding: 0 8px; font-size: 13px;}
  .lobby_btn_wrap .each_btn:hover span {font-size: 17px;}
  .lobby_btn_wrap .each_btn span b {font-size: 18px;}
  .each_lobby.modal_lobby_enter{bottom: 10%;}

  /* footer */
  .footer {height: 50px; bottom: 40px; padding: 0 14px;}
  .footer .toggle_bgm_box .bgm_text {font-size: 20px;}
  .footer .total_logo_box .main_logo {height: 7vw;}

  .modal.speech_box .text_box p, .modal.speech_box .text_box pre {font-size: 3vw;}
  .modal.speech_box .close_btn {width: 5.5vw; height: 5.5vw; top: 3.5vw; right: 3.5vw;}

  .modal.sns {width: 100%; height: calc(100% - 90px); top: 40px;}
  .modal.sns .modal_snsBg {border-radius: 0;}
  .modal.sns .modal_inner .modal_contents_box {flex-direction: column; width: 30vw; margin: 8px auto;}
  .modal.sns .modal_inner .modal_each_content {padding: 1.2vw;}
}

@media screen and (max-width: 360px) {
  .footer .toggle_bgm_box:hover {transform: none;}
  .footer .toggle_bgm_box .toggle_bar {width: 40px; height: 12px;}
  .footer .toggle_bgm_box .toggle_bar::before {width: 20px; height: 20px;}
  .footer .toggle_bgm_box .bgm_text {padding-left: 8px; font-size: 18px;}
  .footer .info_btn_box a {padding: 0 1.7vw;}
  .footer .info_btn_box a img {height: 30px;}
  .footer .info_btn_box a.NFT_btn img {height: 30px;}
  .footer .info_btn_box.active .mobile_menu_btn {width: 30px; height: 30px;}
}

@media screen and (max-width: 290px) {
  .modal.speech_box .text_box .char_script {height: 20vw;}
}

/*------------------------------ 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 circleLoop {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

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