* { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; box-sizing: border-box;-ms-overflow-style:none;scrollbar-width:none;-webkit-user-drag:none; }
*:active { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -moz-tap-highlight-color: rgba(0, 0, 0, 0); tap-highlight-color: rgba(0, 0, 0, 0); }

*::-webkit-scrollbar { display:none; }

html { scroll-behavior: smooth;height:100%;margin:0;min-height:100%;overflow:hidden;position:fixed;width:100%; }

body { background-color: #000; margin: 0; overflow-x: hidden;overflow-y:scroll; font-size:16px; font-family:"NanumSquareRoundR";letter-spacing:-0.1px;width: 100%;height:100%;overscroll-behavior-y: contain; }

img, p { margin:0;padding:0; }

ul { list-style: none;padding:0;margin:0; }

.fontL { font-family:"NanumSquareRoundL"; }
.fontR { font-family:"NanumSquareRoundR"; }
.fontB { font-family:"NanumSquareRoundB"; }
.fontEB { font-family:"NanumSquareRoundEB"; }
.fontMG { font-family:"Malgun Gothic"; }

.aft { z-index: 100; }
.hover:hover { cursor:pointer; }

.hidden { display:none; }

#main_canvas_container { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;overflow:hidden; }

.trans { transition:all 0.4s ease-in-out; }

.logo { position:absolute;top:30px;left:40px; }
.logo>img { width:100%; }

.loadContainer { position:absolute;top:0;left:0;width:100vw;height:100%;overflow:hidden; }
.loadContBack { position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);height:100vh; }
.loadText { white-space: nowrap;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);font-size:1.625em;line-height:46px;color:#fff;text-align:center;background:radial-gradient(ellipse closest-side, rgba(15,25,65, 0.5), transparent) no-repeat 50% 50%;padding:8vw;text-shadow:0 0 5px #0f1941; }
.loadPerc { position:absolute;bottom:80px;left:50%;transform:translateX(-50%);width:40vw;max-width:380px;height:5px;border-radius:5px;background-color:#fff;overflow:hidden; }
#percBar { position:absolute;top:0;left:0;width:0;height:5px;background-color:#3272fc;border-radius:5px; }
.percText { position:absolute;bottom:40px;left:50%;transform:translateX(-50%);font-size:1.25em;text-align:center;color:#fff; }

.toggleInOutContainer { position:absolute;bottom:125px;left:50%;transform:translateX(-50%);width:100%;max-width:1024px;margin:0 auto;padding:0 40px; }
.toggleInOut { display:flex;position:relative;width:150px;height:40px;border-radius:8px;overflow:hidden; }
.toggleInOutBtn { flex:1;background-color:#fff;text-align:center;line-height:40px; }
.toggleInOutBtn.active { background-color:rgba(0,0,0,0.7);color:#fff; }

#inOutBtn { position:absolute;top:50%;left:6px;width:28px;height:28px;border-radius:50%;background-color:#fff;transform:translateY(-50%); }
#inOutText { position:absolute;top:50%;left:50%;color:#fff;transform:translateY(-50%);white-space:nowrap; }

.listContainer { position:absolute;bottom:75px;left:50%;transform:translate(-50%);width:100%;max-width:1024px;padding:0 40px;margin: 0 auto; }

.outList { display:flex; }
.outListBtn { flex:1;height:36px;line-height:34px;background-color:#fff;font-size:0.875em;text-align:center;color:#444;border-radius:8px;border:1px solid rgba(0,0,0,0.15); }
.outListBtn:not(:last-child) { margin-right: 10px; }
.outListBtn.active, .inListBtn.active { background-color:rgba(0,0,0,0.7);color:#fff;  }

.inList { overflow-y:auto; }
.inListBtn { display:table-cell;min-width:148px;height:36px;line-height:34px;text-align:center;border:1px solid rgba(0,0,0,0.15);background-color:#fff;border-radius:8px; }
.inListbtw { display:table-cell;min-width:10px; }
.inListBtn:not(:last-child) { margin-right:10px; }

.mainBtnContainer { position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:100%;padding:15px 0; background-color:rgba(0,0,0,0.6); }
.mainBtnsGroup { display:flex;width:100%;max-width:1024px;margin:0 auto;padding:0 40px; }
.mainBtnGroup { display:flex;flex:1; }
.mainBtns { flex:1;width:100%;height:30px; }
#listLeft { background:url("./menu_img/leftArrow.png") no-repeat 0% 50%;background-size: 22px 26px; }
#menuBtn { width:26px;background:url("./menu_img/menuBtn.png") no-repeat 0% 50%;background-size: 26px 26px; }
#camLeft { background:url("./menu_img/cameraLeftArrow.png") no-repeat 50% 50%;background-size: 11px 19px; }
#camRight { background:url("./menu_img/cameraRightArrow.png") no-repeat 50% 50%;background-size: 11px 19px; }
#camUp { background:url("./menu_img/cameraUpArrow.png") no-repeat 50% 50%;background-size: 20px 10px; }
#camDown { background:url("./menu_img/cameraDownArrow.png") no-repeat 50% 50%;background-size: 20px 10px; }
#zoomIn { background:url("./menu_img/zoomIn.png") no-repeat 50% 50%;background-size: 32px 30px; }
#zoomOut { background:url("./menu_img/zoomOut.png") no-repeat 50% 50%;background-size: 32px 30px; }
#fullScreen { background:url("./menu_img/fullScreenOn.png") no-repeat 100% 50%;background-size: 30px 30px; }
#fullScreen.active { background:url("./menu_img/fullScreenOff.png") no-repeat 100% 50%;background-size: 30px 30px; }
#menuHide { background:url("./menu_img/menuOff.png") no-repeat 100% 50%;background-size: 32px 30px; }
#listRight { background:url("./menu_img/rightArrow.png") no-repeat 100% 50%;background-size: 22px 26px; }

#showMenu { position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);width:32px;height:30px;background:url("./menu_img/menuOn.png") no-repeat 50% 50%;background-size:32px 30px;opacity:0; }

.buildTitle { display:none;position:absolute;transform:translate(-50%, -50%);width:90px;height:40px;border-radius:20px;background-color:rgba(50, 114, 252, 0.78);color:#fff;text-align:center;line-height:40px; }
.btua { position:absolute;top:100%;left:50%;transform:translate(-50%, -50%) rotate(45deg);width:12px;height:12px;background-color:rgba(50, 114, 252, 0.78);; }

.viewVr { display:none;position:absolute;bottom:160px;left:50%;transform:translate(-50%, -50%);height:40px;line-height:40px;border-radius:20px;background-color:rgba(0,0,0,0.7);text-align:center;color:#fff;padding:0 15px; }

.inArrow { display:none;position:absolute;top:50%;transform:translateY(-50%);width:11px;height:19px; }
#inLeftArrow { left:11px;background:url("./menu_img/cameraLeftArrow.png") no-repeat 50% 50%;background-size:11px 19px; }
#inRightArrow { right:11px;background:url("./menu_img/cameraRightArrow.png") no-repeat 50% 50%;background-size:11px 19px; }

.minimap { display:none; position:absolute;top:80px;right:40px;width:400px;height:200px;background:url("./menu_img/minimap.png") no-repeat 50% 50%;background-size:100%; }
.mini { position:absolute;top:0;left:0;width:16px;height:16px;border-radius:50%;background-color:#3272fc;transform:translate(-50%, -50%); }
.miniInner { position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;border:2px solid #fff;border-radius:50%; }

.mini.active { background-color:#e43108;border:8px solid rgba(228, 49, 8,0.2);box-sizing:unset;background-clip:padding-box;z-index:101; }

#mini1 { top:48%;left:33%; }
#mini2 { top:81%;left:80%; }
#mini3 { top:21%;left:78%; }
#mini4 { top:81%;left:45%; }
#mini5 { top:81%;left:31%; }
#mini6 { top:54%;left:83%; }
#mini7 { top:68%;left:62%; }
#mini8 { top:23%;left:64%; }
#mini9 { top:31%;left:88%; }
#mini10 { top:49%;left:47%; }
#mini11 { top:56%;left:27%; }
#mini12 { top:103%;left:62%; }
#mini13 { top:16%;left:52%; }
#mini14 { top:34%;left:46%; }
#mini15 { top:14%;left:44%; }
#mini16 { top:41%;left:80%; }
#mini17 { top:48%;left:39%; }

.mapSize { display:none;position:absolute; top:10px;right:150px;width:130px;height:34px;line-height:36px;text-align:center;font-size:0.875em;color:#777;background-color:#fff;border-radius:17px;padding: 0 10px; }

#toggleMap { display:none;position:absolute;top:12px;right:40px;padding:0 20px 0 10px;color:#fff;height:34px;line-height:34px;background:url("./menu_img/cameraUpArrow.png") no-repeat 100% 50%;background-size:15px;cursor:pointer; }
#toggleMap.active { background:url("./menu_img/cameraDownArrow.png") no-repeat 100% 50%;background-size:15px;cursor:pointer; }

#compass { position:absolute;top:10%;left:40px;width:100px;height:100px;background:url("./menu_img/compass.png") no-repeat 50% 50%;background-size:100% 100%;transform:rotate(125deg); }
#compass>span { color:#fff;text-shadow:0 0 5px #000;display:block;position:absolute;text-align:center;width:16px;height:16px;margin:-8px 0 0 -8px;transform:rotate(-125deg); }
#east { top:50%;left:120%; }
#west { top:50%;left:-20%; }
#south { top:120%;left:50%; }
#north { top:-20%; left:50%; }

.loadding { display:none;position:absolute;top:50%;left:50%;width:100px;height:100px;border-radius:50%;transform:translate(-50%,-50%);color:#fff;text-align:center;line-height:100px;background-color:rgba(0,0,0,0.6); }

.loadAnim { animation:loading 2s infinite; }

.doublePlus { display:none;position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);max-width:50%; }

.doublePlus .plusContainer { display:block; }

.plusGroup:hover { cursor:pointer; }

.plusContainer { display:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);padding:40px;background:url("./menu_img/sideLogo.png") no-repeat 100% 100%,url("./menu_img/exit.png") no-repeat 100% 0%, #a6794a;background-size:150px, 40px;border-radius:12px;max-width:50%;line-height:160%;word-break:keep-all; }
.plusContainer .circle { position:absolute;top:5px;left:5px;width:30px;height:30px;line-height:30px;border-radius:50%;background:#fff;text-align: center; }
.plusContainer .circle.brown { background:#48230f;color:#fff; }

.plusContainer.double { position: relative;top:auto;left:auto;transform:unset;max-width:100%;}
.plusContainer.double:not(:last-child) { margin-bottom:20px; }

.fs-24 { font-size:24px; }
.fs-18 { font-size:18px; }
.fs-14 { font-size:14px; }
.fs-10 { font-size:10px; }

.lowInfo { display:none;position: absolute;top:20%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;color:#fff;z-index:999;padding:10px;background:rgba(0,0,0,0.6);border-radius:8px;border:1px solid #fff;text-align: center; }

.lowInfoBtn { display:inline-block;margin-top:10px;background:#fff;color:#000;padding:10px 20px;border-radius:8px;animation:glow 1s infinite; }

.bgAnchor { display:none;position:absolute;transform:translate(-50%,-50%);padding:10px 20px;background-color:rgba(0,0,0,0.6);border-radius:20px;color:#fff;animation: glow 1s infinite;top:-30px; }

.ctlContainer { display:none;position:absolute;bottom:200px;left:50%;transform:translateX(-50%); }
#ctlBody { position:absolute;width:100px;height:100px;border-radius:50%;border:3px solid #fff;transform:translate(-50%, -50%); }
#ctlMain { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background-color:#fff; }

@keyframes loading {
  0% {opacity: 1;}
  50% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes glow {
  0% { box-shadow:0 0 0px #fc0; }
  50% { box-shadow:0 0 10px #fc0; }
  100% { box-shadow:0 0 0px #fc0; }
}

@media screen and (max-width:700px), screen and (max-height:700px) {
  body { font-size:12px; }
  .bgAnchor { padding:5px 10px; }
  .logo { top:12px;left:12px;width:30%;max-width:110px; }
  #compass { top:60px;left:30px;width:60px;height:60px; }
  .toggleInOutContainer { padding: 0 12px; }
  .listContainer { padding:0 12px; }
  .loadText { width:100%;font-size:1.3em;line-height:2em; }
  .mainBtnCenterGroup { display:none !important; }
  .mainBtnsGroup { padding: 0 12px; }
  #toggleMap { right:12px; }
  .mapSize { right:100px;width:110px; }
  .minimap { top:60px;right:12px;width:200px;height:100px; }
  .miniInner { width:6px;height:6px; }
  .mini { width:12px;height:12px; }
  .mini.active { border:4px solid rgba(228, 49, 8,0.2); }
  .inListBtn { min-width:78px; }
  .inArrow { display:none !important; }
  .toggleInOut { width:100px;height:34px; }
  .toggleInOutBtn { line-height:34px; }
  .fs-18 { font-size:16px; }
  .fs-14 { font-size:12px; }
  .plusContainer { padding:30px;max-width:80%;width:80%;border-radius:8px;z-index:999;max-height:80%;overflow-y:auto; }
  .doublePlus { max-width:80%;width:80%;z-index:999; }
  .plusContainer.double { width:100%; }
  .plusContainer .circle { width:25px;height:25px;line-height:25px; }
  .ctlContainer { bottom:170px; }
  #ctlBody { width:80px;height:80px; }
  #ctlMain { width:20px;height:20px; }
}