@charset "utf-8";
/* -----------------------------------------------
	* 스타일 초기화
--------------------------------------------------
	- 최초 작성일 : 2021.08.15
	- 최초 작성자 : 아보카도
	- 최종 수정일 : 
	- 최종 수정자 : 
--------------------------------------------------*/

/****************************************
	Import
****************************************/

@import url(./swiper.css);
@font-face {
	font-family: 'icon';
		src:	url('./fonts/icomoon.eot?y5isk6');
		src:	url('./fonts/icomoon.eot?y5isk6#iefix') format('embedded-opentype'),
				url('./fonts/icomoon.ttf?y5isk6') format('truetype'),
				url('./fonts/icomoon.woff?y5isk6') format('woff'),
				url('./fonts/icomoon.svg?y5isk6#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}
.sound_only { display: none; }


/****************************************
	소스코드 초기화
****************************************/

html {overflow-y:auto}
body {margin:0;padding:0;}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
ul, li {margin:0;padding:0;list-style:none}
legend {display: none;}
label, input, button, select, img {vertical-align:middle}
input, button {margin:0;padding:0;}
button {cursor:pointer}
textarea, select {font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;}
a:link, a:visited {text-decoration:none}
a:hover, a:focus, a:active {text-decoration:none}

ul,li { margin: 0; padding: 0; }
i,sup,em { font-style: normal; }

label { cursor: pointer; }

img { max-width: 100%; vertical-align: middle; }
table { width: 100%; }


/****************************************
	기본 레이아웃 정의
****************************************/

.fix-layout {
	position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
	  margin: 0 auto;
	padding: 0 0px; }
.fix-layout .fix-layout { padding: 0; margin:0; }

#body {min-height:100%; box-sizing:border-box; padding:30px 0;}


/****************************************
	애니메이션 효과 지정 / 초기화
****************************************/

* {transition: all .3s ease; -webkit-transition: all .3s ease; -ms-transition: all .3s ease;}

.trans,
.trans *,
.trans *:after,
.trans *:before { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; }

.none-trans,
.none-trans *,
.none-trans *:after,
.none-trans *:before { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; }


/****************************************
	텍스트 코드 정렬
****************************************/

.txt-left { text-align: left; }
.txt-center { text-align: center; }
.txt-right { text-align: right; }


/****************************************
	스크롤 스타일 정의
****************************************/

/* scrollbar : ie except */
*::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color: rgba(0, 0, 0, 0.2);}
*::-webkit-scrollbar { width: 5px; height: 5px; background-color: transparent;}
*::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background: #fff677; border: none; border-radius: 6.0em; }


/**********************
	폼 스타일
**********************/

.theme-form { width: 100%; }


/**************************************************************
	Web Size Viewer Control - 반응형 코딩
	-
	모바일 기준 :width 1024px
***************************************************************/

@media all and (min-width:1025px)  {
	.only-pc {}
	.only-ta {display:none !important;}
	.only-mo {display:none !important;}

	.not-pc {display:none !important;}
	.not-ta {}
	.not-mo {}
}

@media all and (max-width:1024px) and (min-width:1025px)  {
	.only-pc {display:none !important;}
	.only-ta {}
	.only-mo {display:none !important;}

	.not-pc {}
	.not-ta {display:none !important;}
	.not-mo {}
}
@media all and (max-width:1025px)  {
	.only-pc {display:none !important;}
	.only-ta {display:none !important;}
	.only-mo {}

	.not-pc {}
	.not-ta {}
	.not-mo {display:none !important;}
}


/**************************************************************
	messiah theme
***************************************************************/

:root{
    --deep: #03020d;
    --mid:  #0a0f2a;
    --tint: #ededed;
	  --tint-a : #3846dc;
    --edge: rgba(255,255,255,0.06);
	  --edge-px: 24px;
}

.main-box {
	margin: 0;
	padding: 0;
	position: fixed;
	width: 100%;
	height: 100%;
	overflow: hidden;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
  background: radial-gradient(80% 60% at 50% 0%, #080712 0%, rgba(8, 7, 18, 0.6) 40%, rgba(3, 2, 13, 0.9) 70%, #03020d 100%);
  background-color: #03020d;
}
.main-box:before {
	content: '';
	position: fixed; inset: 0; pointer-events:none; z-index:0;
	background-image: radial-gradient(circle at center, rgba(130,160,255,.24) 1px, transparent 1px);
	background-size: 22px 22px;
	opacity:.25;
	mask: radial-gradient(1800px 800px at 50% 20%, #000 70%, transparent 100%);
	will-change: background-position;
}

.main-header {
    position: fixed;
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    width: calc(100% - var(--edge-px)) !important;
    height: 52px !important;
    left: auto !important;
    right: 0;
    transform: translate(-24px, var(--edge-px));
    background-color: transparent !important;
    z-index: 999;
    pointer-events: none;
}

.main-header div{
   pointer-events: all;
    width: 40px;
    height: 52px;
    margin-right: 12px;
    display: flex;
	  flex-direction: column;
    justify-content: center;
    align-items: center;
	  cursor: pointer;
}

.main-header div svg {
    position: relative;
    width: 32px;
    height: 32px;
    z-index: 2;
	  opacity: .6;
	  pointer-events: none;
}

.main-header div svg *{
		stroke:var(--tint);
}

.main-header div:hover svg {
	  opacity: .9;
}


.outline-btn{
	    --clr:var(--tint);
      position:relative;
      border-radius:100%;
      background:var(--deep);
      overflow:hidden;
    }

    /* Spotlight */
.outline-btn::before{
      content:"";
      position:absolute;
      top:var(--y);
      left:var(--x);
      transform:translate(-50%,-50%);
      background:radial-gradient(var(--clr), transparent, transparent);
      width:120px;
      height:120px;
      opacity:0;
      transition:.3s, top 0s, left 0s;
      pointer-events:none;
    }
.outline-btn:hover::before{
      opacity:1;
    }

    /* Inner glass layer */
.outline-btn::after{
      content:"";
      position:absolute;
      inset:1px;
      border-radius:100%;
      background:var(--deep);
	    opacity: .75;
      pointer-events:none;
	    z-index: 1;
    }


#bottom-menu {
position: fixed;
    bottom: var(--edge-px);
    right: var(--edge-px);
    width: calc(100vw - var(--edge-px));
    z-index: 999;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex-direction: row;
    pointer-events: none;
}

#bottom-menu div{
    pointer-events: all;
	  width: 40px;
	  height: 52px;
	  margin-right: 24px;
	  display: flex;
	  flex-direction: column;
    justify-content: center;
    align-items: center;
	  cursor: pointer;
}

#bottom-menu div.chat-icon{
	  position: relative;
    pointer-events: all;
    width: 108px;
    height: 108px;
    margin-right: 24px;
	  margin-left: 8px;
    border-radius: 100%;
	  cursor: default;
	  overflow: hidden;
}
#bottom-menu div.chat-icon:before{
    content: '';
    background: radial-gradient(var(--tint-a), transparent, transparent);
    width: 300px;
    height: 300px;
    position: absolute;
    left: -58px;
    top: -58px;
}
#bottom-menu div.chat-icon:after{
    content: '';
    position: absolute;
    inset: 2px;
    background: var(--deep);
    border-radius: 100%;
}

#bottom-menu div svg {
    position: relative;
    width: 32px;
    height: 32px;
    z-index: 2;
	  opacity: .6;
	  pointer-events: none;
}
#bottom-menu div.chat-icon svg{
      width:60px !important;
      height:60px !important;
    }

#bottom-menu div svg *{
		stroke:var(--tint);
}
#bottom-menu div svg .svg-fill{
		fill:var(--tint);
}
#bottom-menu div:hover svg {
	  opacity: .9;
}

.glow-btn:hover{
	transition: .3s ease;
}

.glow-btn:hover{
	filter: drop-shadow(0px 0px 6px var(--tint));
}

.main-header div i, #bottom-menu div i {
	opacity: .6;
  font-family: mulish-variable;
  font-variation-settings: "wght" 400;
  font-size: 8pt;
	pointer-events: none;
}
.main-header div:hover i, #bottom-menu div:hover i {
	opacity: .9;
}

.modal {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #29292933;
    z-index: 998;
    backdrop-filter: blur(3px);
    cursor: pointer;
	  opacity: 1;
	  pointer-events: auto;
}


.team-modal.hidden,
.main-modal.hidden,
.sub-modal.hidden{
	opacity: 0;
	pointer-events: none;
	transition: none;
}


.team-modal.hidden .team-main-layout{
	transform: translateY(-120px);
}
.team-modal.hidden .team-sub-layout{
	transform: translateY(120px);
}

.team-modal .team-main-layout,
.team-modal .team-sub-layout{
	transform: translateY(0);
	opacity: 1;
}




.team-modal .team-main-layout {
    position: absolute;
    left: 48px;
    height: 100%;
    width: 320px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02)), transparent;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    cursor: default;
}

.team-modal .team-sub-layout {
    position: absolute;
    left: 380px;
    width: 100%;
    max-width: 1000px;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02)), transparent;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    background-color: var(--deep);
    cursor: default;
}



/****************************************************
	메인 탐사 박스
****************************************************/



 .explore-area {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 화면 전체에 중앙 정렬 */
  }
 .explore-area canvas {
  image-rendering: pixelated; /* 픽셀아트 */
 }

  .explore-area .panel{position: absolute;bottom: 36px;background:#13161c;border:1px solid #2b3140;padding:8px 10px;border-radius:8px;font-size:12px}
  .explore-area .kbd{background:#212634;border:1px solid #3a4255;border-bottom-width:3px;padding:2px 6px;border-radius:6px;font-weight:600}