* { -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; }
*: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 { position:absolute;width:100vw;height:100vh;min-height:100%;overflow:hidden; }

body { position:absolute;width:100%;height:100%;background:#000;margin:0;overflow:hidden;font-size:18px;font-family:"NanumBarunGothic";font-weight:normal;font-style:normal;letter-spacing:-0.36px;line-height:1.5; }

img, p { margin:0;padding:0; }
img { width:100%;display:block; }
.img { font-size:0; }

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

.aft { z-index:100; }

.bg { position:absolute;top:0px;left:0px;width:100%;height:100%;background:rgba(0,0,0,0.4); }

.hide,
.before_loading { display:none !important; }

.mb-14 { margin-bottom:14px !important; }
.mb-16 { margin-bottom:16px !important; }
.mb-24 { margin-bottom:24px !important; }

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

.loaderContainer { position:absolute;top:0px;left:0px;width:100%;height:100%;background:#234181; }
.loaderContainer p,
.loaderContainer span,
.loaderContainer b, { display:block; }
.loaderLogo { position:absolute;top:24px;left:22px;width:calc(70 * 100vh / 1080); }
.loaderMoon { position:absolute;top:40%;left:50%;transform:translate(-50%, -50%);width:calc(904 * 100vh / 1080);height:calc(814 * 100vh / 1080);max-width:906px;max-height:814px;border-radius:50%;background:rgba(41,76,152,0.48); }
.loaderBg { position:absolute;top:55%;left:50%;transform:translate(-50%, -50%);width:calc(2122 * 100vh / 1080);max-width:2122px; }
.loaderMain { position:absolute;top:55%;left:50%;transform:translate(-50%,-50%);width:calc(480 * 100vh / 1080);height:calc(720 * 100vh / 1080);max-width:480px;max-height:720px;border-radius:240px;border:8px solid #375eb2;overflow:hidden;background:#234181;box-shadow:inset 0 0 30px 0 rgba(0,0,0,0.3), 0 0 20px 0 rgba(9, 153, 240, 0.31); }
.loaderMainBg { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0.33;height:100%; }
.loaderCharacter { position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);width:calc(320 * 100vh / 1080);max-width:320px; }
.loaderLeaf { position:absolute;bottom:-30px;width:calc(508 * 100vh / 1080); }
.loaderLeaf.left { right:calc(50% + 120 * 100vh / 1080); }
.loaderLeaf.right { left:calc(50% + 120 * 100vh / 1080);transform:scaleX(-1); }
.loaderTitle { position:absolute;top:10%;left:50%;transform:translateX(-50%);text-align:center;color:#fff;font-size:24px;letter-spacing:-0.48px;white-space:nowrap; }
.loaderTitle>p:nth-child(2) { font-family:"EBS주시경";font-size:60px; }
.loaderProgress { position:absolute;top:20%;left:50%;width:calc(160 * 100vh / 1080);height:calc(160 * 100vh / 1080);transform:translate(-50%,-50%); }
.loaderText { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#fff;font-size:32px; }
.loaderPoint { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(12 * 100vh / 1080);height:calc(12 * 100vh / 1080);border-radius:50%;background:#fff;opacity:0.37;margin-top:calc(-80 * 100vh / 1080);transform-origin:calc(6 * 100vh / 1080) calc(86 * 100vh / 1080); }
.loaderInfo { position:absolute;bottom:0px;right:0px;color:#fff;font-size:1em;padding:10px;max-width:100%;  }

.mainBtnWrap { position:absolute;bottom:30px;left:50%;transform:translateX(-50%);display:flex;width:calc(100% - 32px);max-width:500px;padding:8px;border-radius:8px;background:#fff;border:solid #b3d1f5;border-width:0 0 2px 0; }
.mainBtnWrap>li { flex:1;line-height:40px;text-align:center;border-radius:8px;transition:0.6s ease;transition-property:box-shadow, background-color, color, font-weight;cursor:pointer; }
.mainBtnWrap>li:not(:last-child) { margin-right:4px; }
.mainBtnWrap>li.active { background:#114398 url(menu_img/mark1.png) no-repeat 100% 100%;background-size:auto 100%;box-shadow:inset 2px 2px 4px rgba(0,0,0,0.5);color:#fff;font-weight:bold; }

.infoWrap { position:absolute;width:100%; }
.infoWrap>div { overflow:hidden;width:100%;height:100%; }
.infoWrap .head { position:absolute;top:-1px;display:flex;width:100%;align-items:center;background: url(menu_img/markLarge1.png) no-repeat 100% 100%, url(menu_img/markLarge2.png) no-repeat 0% 100%,#234080;background-size:auto 100%, auto 100%, 100%;z-index:100; }
.infoWrap .head>img { width:72px;margin:24px 16px 24px 24px; }
.infoWrap .head>span { font-size:36px;font-family:"EBS주시경";font-weight:bold;color:#fff;letter-spacing:-0.8px; }
.infoWrap .body { padding:144px 24px 132px;background:#fff;margin-bottom:-1px; }
.infoWrap .body>*:not(:last-child) { margin-bottom:24px; }
.infoWrap .footer { position:absolute;bottom:0;width:100%;padding:0 24px 24px;background:#fff;border-bottom-left-radius:24px;border-bottom-right-radius:24px; }
.footer.shadow { padding-top:24px;box-shadow:0 -5px 10px 0 rgba(153,153,153,0.1); }
#m1 .footer.shadow { padding-top:12px; }
.infoWrap .footer>.dot { margin-bottom:12px; }
.infoWrap .footer>.dot { display:flex;justify-content:center; }
.infoWrap .footer>.dot>li { width:12px;height:12px;border-radius:50%;background:#e6e6e6;cursor:pointer; }
.infoWrap .footer>.dot>li:not(:last-child) { margin-right:8px; }
.infoWrap .footer>.dot>li.active { background:#234080; }
.infoWrap .footer>.exit { width:100%;line-height:60px;text-align:center;background:#e6e6e6;border-radius:8px;cursor:pointer; }

.infoWrap .arrow { position:absolute;top:50%;transform:translateY(-50%);width:60px;height:60px;border-radius:50%;cursor:pointer;background-size:100%;background-repeat:no-repeat;background-position:50%,50%;transition:opacity 0.4s ease, background 0.4s ease; }
.infoWrap .arrow.disable { opacity:0.4; }
.infoWrap .arrow.active { background-color:rgba(255,255,255,0.4);opacity:1; }
.infoWrap .arrow:hover:not(.disable) { background-color:rgba(255,255,255,0.4); }
.infoWrap .arrow.left { right:calc(100% + 24px);background-image:url(menu_img/arrowLeft.png); }
.infoWrap .arrow.right { left:calc(100% + 24px);background-image:url(menu_img/arrowRight.png); }

#ticketbox.infoWrap .body>p { line-height:1; }
#ticketbox.infoWrap .body>p:not(:last-child) { margin:0; }
#ticketbox.infoWrap .body>table { border-collapse:collapse;width:100%; }
#ticketbox.infoWrap .body>table td { padding:0 12px; }
#ticketbox.infoWrap .body>table thead tr td { background:rgba(128,178,239,0.2);height:54px;line-height:1.25; }
#ticketbox.infoWrap .body>table thead tr td:not(:first-child),
#ticketbox.infoWrap .body>table tbody tr td:nth-child(2),
#ticketbox.infoWrap .body>table tbody tr td:nth-child(3) { text-align:center; }
#ticketbox.infoWrap .body>table tbody tr td { height:66px; }
#ticketbox.infoWrap .body>table tr td:not(:last-child) { border-right:1px solid #e6e6e6; }
#ticketbox.infoWrap .body>table tbody tr td { border-bottom:1px solid #e6e6e6; }
#ticketbox.infoWrap .body>ul { display:flex;flex-flow:wrap;/*font-size:16px;*/ }
#ticketbox.infoWrap .body>ul>li { width:50%; }
#ticketbox.infoWrap .body>ul>li>span { font-size:16px; }

.anchor:not(.sub) { cursor:pointer; }
.anchor.list { position:absolute;border-radius:8px;letter-spacing:-0.32px;font-size:16px;border:1px solid #18336a;line-height:48px;text-align:center;min-width:120px;background-color:#114398;background-image: url(menu_img/mark1.png);background-repeat:no-repeat;background-position:100% 100%;background-size:auto 100%;color:#fff;box-shadow:inset 2px 2px 4px rgba(256,256,256,0.5),inset -2px -2px 4px rgba(0,0,0,0.5);padding:0 8px;font-weight:bold;transition:background-color 0.4s ease, border 0.4s ease, box-shadow 0.4s ease; }
.anchor.list.active { border:1px solid #528bd1;background-color:#80b2ef;box-shadow:inset 2px 2px 4px rgba(0,0,0,0.5); }
.anchor.enter,
.anchor.more { position:absolute;border-radius:8px;letter-spacing:-0.32px;font-size:16px;background:#fff;display:flex;padding-right:8px;min-width:90px; }
.anchor.enter img,
.anchor.more img { width:40px;height:40px;padding:8px; }
.anchor.enter span,
.anchor.more span { line-height:40px; }
.anchor.sub { position:absolute;width:44px;height:44px; }
.anchor#toilet_anc { background:url(menu_img/toilet.png) no-repeat 50% 50%;background-size:100%; }
.anchor#park_anc { background:url(menu_img/park.png) no-repeat 50% 50%;background-size:100%; }

#h4_exit { position:absolute;bottom:110px;left:50%;width:90px;line-height:40px;font-size:16px;transform:translateX(-50%); }

.white_btn { border-radius:8px;background:#fff;text-align:center;cursor:pointer;padding:0 8px;border:solid #b3d1f5;border-width:0 0 2px 0; }
.white_btn.next { background:#234080;color:#fff;border:solid #15264d;border-width:0 0 2px 0; }

.m4_head { position:absolute;top:30px;left:50%;transform:translateX(-50%);min-width:146px;line-height:50px; }
.m4_btns { display:flex;position:absolute;bottom:30px;left:50%;transform:translateX(-50%);width:100%;max-width:396px; }
.m4_btns>div { flex:1;line-height:56px; }
.m4_btns>div:not(:last-child) { margin-right:12px; }

.logo { position:absolute;top:16px;left:16px;width:92px;cursor:pointer; }

.infoWrap .body .img { position:relative; }
.source { position:absolute;bottom:12px;left:0;width:100%;font-size:14px;color:#fff;transition:left 0.4s ease;text-shadow:0 0 5px rgba(0,0,0,0.2);word-break:break-all;padding:0 12px; }
.source span { font-size:12px; }

.guideWrap { position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6); }
.guideImg { position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:100%; }
.guideImgSize { height:100vh;width:calc(100vh / 9 * 16); }
.guideDot { position:absolute;top:calc(100vw / 1920 * 507);left:calc(100vw / 1920 * 310);display:flex; }
.guideDot>li { width:calc(100vw / 1920 * 28);height:calc(100vw / 1920 * 28);cursor:pointer; }
.guideBtns { position:absolute;top:calc(100vw / 1920 * 609);left:calc(100vw / 1920 * 316);display:flex; }
.guideBtn { width:calc(100vw / 1920 * 60);height:calc(100vw / 1920 * 60);cursor:pointer;border-radius:50%; }
.guideBtn:hover { background-color:rgba(255,255,255,0.4); }
.guideBtn.disable { opacity:0.4; }
.guideBtn.left { background-image:url(menu_img/guide/arrowLeft.png);background-size:100%; }
.guideBtn.right { background-image:url(menu_img/guide/arrowRight.png);background-size:100%; }
.guideBtn.exit { background-image:url(menu_img/guide/exit.png);background-size:100%; }
.guideBtn:not(:last-child) { margin-right:calc(100vw / 1920 * 24); }
.fingerGroup { position:absolute;width:100%;height:100%;top:0;left:0; }
.finger { position:absolute;width:calc(100vw / 1920 * 42); }
.finger.f1 { top:calc(100vw / 1920 * 416);left:calc(100vw / 1920 * 746);animation:f1 1s infinite ease; }
.finger.f2 { top:calc(100vw / 1920 * 618);left:calc(100vw / 1920 * 956);transform:rotate(180deg);animation:f2 1s infinite ease; }

.guideImgSize .guideDot { top:calc(100vh / 1080 * 507);left:calc(100vh / 1080 * 310); }
.guideImgSize .guideDot>li { width:calc(100vh / 1080 * 28);height:calc(100vh / 1080 * 28); }
.guideImgSize .guideBtns { top:calc(100vh / 1080 * 609);left:calc(100vh / 1080 * 316); }
.guideImgSize .guideBtn { width:calc(100vh / 1080 * 60);height:calc(100vh / 1080 * 60); }
.guideImgSize .finger { width:calc(100vh / 1080 * 42); }
.guideImgSize .finger.f1 { top:calc(100vh / 1080 * 416);left:calc(100vh / 1080 * 746); }
.guideImgSize .finger.f2 { top:calc(100vh / 1080 * 618);left:calc(100vh / 1080 * 956); }

.m_guide { position:absolute;top:0;left:0;width:100%;height:100%; }
.guideBg { position:absolute;width:100%;height:100%;object-fit:cover; }
.m_guide .exit { position:absolute;top:3px;right:3px;width:44px;height:44px; }
.m_guide .title { position:absolute;top:40px;left:50%;transform:translateX(-50%);color:#fff;font-size:16px;text-align:center;letter-spacing:-0.32px; }
.m_guide .title b { font-size:18px;letter-spacing:-0.36px; }
.m_guideDot { display:flex;justify-content:center;margin-bottom:16px; }
.m_guideDot>li { width:10px;height:10px;border-radius:50%;background:#fff;opacity:0.4; }
.m_guideDot>li.active { opacity:1; }
.m_guideDot>li:not(:last-child) { margin-right:8px; }
.m_guideImg { position:absolute;top:107px;left:50%;transform:translateX(-50%);width:calc(100% - 32px);height:calc(100% - 212px); }
.m_guideImg>img,
.m_fingerGroup>img { width:100%;height:100%;object-fit:contain; }
.m_finger { position:absolute;top:0;left:0;width:100%;height:100%; }
.m_finger.mf1 { animation:mf1 1s infinite ease; }
.m_finger.mf2 { animation:mf2 1s infinite ease; }
.m_guide_footer { position:absolute;bottom:0;left:0;width:100%;padding:16px;line-height:46px; }
.m_guide_btn { border-bottom:2px solid #b3d1f5; }

.scrollArrow { position:absolute;bottom:120px;right:24px;width:40px;height:40px;border:1px solid #e6e6e6;background:#fff url(menu_img/scrollArrow.png) no-repeat 50% 50%;background-size:18px;border-radius:50%;cursor:pointer; }
.scrollArrow.on { transform:scaleY(-1); }

@media screen and (min-width:768px) and (min-height:500px) {
  .mobile { display:none !important; }
  .infoWrap { top:50%;left:50%;transform:translate(-50%, calc(-50% - 43px));max-width:604px; }
  .infoWrap>div { border-radius:24px;height:760px;max-height:calc(100vh - 30px - 56px - 30px - 30px); }
  .infoWrap .head { border-top-left-radius:24px;border-top-right-radius:24px; }
}

@media screen and (max-width:1023px) and (orientation:landscape) {
  .pc.loader_pc { display:block !important }
  .mobile.loader_mobile { display:none !important; }
  .loaderBg { width:90% !important; }
}

@media screen and (max-width:767px), screen and (max-height:500px) {
  .pc { display:none !important; }
  body { font-size:14px;letter-spacing:-0.28px; }
  .mainBtnWrap { bottom:16px;border-radius:4px;padding:6px; }
  .mainBtnWrap>li { line-height:32px;border-radius:4px; }
  .infoWrap { height:100%;background:#fff; }
  .infoWrap .footer { position:absolute;bottom:0px;width:100%;padding:16px; }
  .infoWrap .head { position:absolute;top:0; }
  .infoWrap .body { margin-top:60px;padding:16px;margin-bottom:80px; }
  .infoWrap#ticketbox .body { margin-bottom:120px; }
  .infoWrap .head>img { width:44px;margin:8px 8px 8px 16px; }
  .infoWrap .head>span { font-size:24px; }
  .footer.shadow { box-shadow:0 -5px 10px 0 rgba(153,153,153,0.1); }

  .infoWrap .body .img { margin-bottom:16px; }

  .anchor.list { min-width:68px;line-height:32px;font-size:12px;letter-spacing:-0.24px;border-radius:4px; }
  .anchor.enter,
  .anchor.more { min-width:62px;font-size:12px;letter-spacing:-0.24px;padding-right:4px;border-radius:4px; }
  .anchor.enter img,
  .anchor.more img { width:26px;height:26px;padding:4px; }
  .anchor.enter span,
  .anchor.more span { line-height:26px; }
  #h4_exit { bottom:77px;width:44px;line-height:26px;font-size:12px;letter-spacing:-0.24px;padding:0 4px;border-radius:4px; }
  .anchor.sub { width:26px;height:26px; }
  #ticketbox.infoWrap .body>ul>li { font-size:14px; }
  #ticketbox.infoWrap .body>ul>li>span { font-size:12px; }

  .mb-14,
  .mb-16 { margin-bottom:8px !important; }
  .mb-24 { margin-bottom:16px !important; }

  .infoWrap .footer>.exit { line-height:48px; }

  .m4_head { top:16px;min-width:96px;line-height:32px;border-radius:4px; }
  .m4_btns { bottom:16px;width:calc(100% - 32px); }
  .m4_btns>div { line-height:44px;border-radius:4px;border:solid #b3d1f5;border-width:0 0 2px 0; }

  .logo { top:8px;left:8px;width:61px; }

  .loaderContainer { background:#162233; }
  .loaderLogo { top:16px;left:12px;width:30px; }
  .loaderTitle { top:5%;font-size:16px;letter-spacing:-0.32px; }
  .loaderTitle>p:nth-child(2) { font-size:28px; }
  .loaderText { font-size:14px; }
  .loaderMain { width:calc(242 * 100vh / 640);height:calc(404 * 100vh / 640);border-width:3px; }
  .loaderCharacter{ bottom:10px;width:calc(160 * 100vh / 640);max-width:160px; }
  .loaderMoon { width:calc(400 * 100vh / 640);height:calc(350 * 100vh / 640);max-width:400px;max-height:350px;top:43%;border-top-left-radius:100%;border-top-right-radius:100%;border-bottom-left-radius:0;border-bottom-right-radius:0; }
  .loaderBg { width:100%;max-width:100%;max-height:70vh; }
  .loaderBg img:nth-child(2) { max-width:100vh;position:relative;left:50%;transform:translateX(-50%); }
  .loaderBg img:nth-child(3) { position:absolute;bottom:0;max-width:100vh;left:50%;transform:translateX(-50%); }
  .loaderLeaf { bottom:-30px;width:100%;max-width:100vh;left:50%;transform:translateX(-50%); }
  .loaderProgress { top:25%;width:calc(80 * 100vh / 640);height:calc(80 * 100vh / 640); }
  .loaderPoint { margin-top:calc(-40 * 100vh / 640); }
  .loaderBg2 { position:absolute;top:50%;left:50%;width:100%;height:100vh;transform:translate(-50%,-50%);background:#234181; }
  .loaderInfo { width:100%;right:50%;transform:translateX(50%);text-align:center;word-break:keep-all;font-size:12px; }

  .loaderPoint { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(12 * 100vh / 640);height:calc(12 * 100vh / 640);border-radius:50%;background:#fff;opacity:0.20;margin-top:calc(-40 * 100vh / 640);transform-origin:calc(6 * 100vh / 640) calc(46 * 100vh / 640); }

  .source { font-size:12px; }

  .scrollArrow { bottom:96px;right:16px; }
  #m1 .scrollArrow { bottom:120px; }
}

@keyframes blink {
  0% { opacity:0.37;width:calc(12 * 100vh / 1080);height:calc(12 * 100vh / 1080);transform-origin:calc(6 * 100vh / 1080) calc(86 * 100vh / 1080); }
  40% { opacity:1;width:calc(16 * 100vh / 1080);height:calc(16 * 100vh / 1080);transform-origin:calc(8 * 100vh / 1080) calc(88 * 100vh / 1080); }
  60% { opacity:0.37;width:calc(12 * 100vh / 1080);height:calc(12 * 100vh / 1080);transform-origin:calc(6 * 100vh / 1080) calc(86 * 100vh / 1080); }
  100% { opacity:0.37;width:calc(12 * 100vh / 1080);height:calc(12 * 100vh / 1080);transform-origin:calc(6 * 100vh / 1080) calc(86 * 100vh / 1080); }
}

@keyframes blink_m {
  0% { opacity:0.2;width:calc(12 * 100vh / 640);height:calc(12 * 100vh / 640);transform-origin:calc(6 * 100vh / 640) calc(46 * 100vh / 640); }
  40% { opacity:1;width:calc(16 * 100vh / 640);height:calc(16 * 100vh / 640);transform-origin:calc(8 * 100vh / 640) calc(48 * 100vh / 640); }
  60% { opacity:0.2;width:calc(12 * 100vh / 640);height:calc(12 * 100vh / 640);transform-origin:calc(6 * 100vh / 640) calc(46 * 100vh / 640); }
  100% { opacity:0.2;width:calc(12 * 100vh / 640);height:calc(12 * 100vh / 640);transform-origin:calc(6 * 100vh / 640) calc(46 * 100vh / 640); }
}

@keyframes f1 {
  0% { transform:translateY(0%); }
  50% { transform:translateY(10%); }
  100% { transform:translateY(0%); }
}

@keyframes f2 {
  0% { transform:translateY(10%) rotate(180deg); }
  50% { transform:translateY(0%) rotate(180deg); }
  100% { transform:translateY(10%) rotate(180deg); }
}

@keyframes mf1 {
  0% { transform:translateX(2%); }
  50% { transform:translateX(0%); }
  100% { transform:translateX(2%); }
}

@keyframes mf2 {
  0% { transform:translateY(2%); }
  50% { transform:translateY(0%); }
  100% { transform:translateY(2%); }
}
