@charset "utf-8";
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden;background:#111}
body{font-family:Pretendard,"Malgun Gothic",sans-serif;-webkit-user-select:none;user-select:none}
body.is-loading .main-map{animation-play-state:paused}
button,input{font:inherit}
button{margin:0;padding:0;border:0;background:none;cursor:pointer}
img{display:block;border:0;-webkit-user-drag:none}
#container{width:100%;height:100vh;height:100dvh;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;-ms-overflow-style:none}
#container::-webkit-scrollbar{display:none}
#loadingScreen{position:fixed;inset:0;z-index:20000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#120c0a;color:#fff3d2;opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s linear .35s;will-change:opacity}
#loadingScreen.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
#loadingScreen.is-hidden .loading-indicator span{animation:none}
#loadingScreen .loading-logo{width:min(42vw,520px);height:auto;filter:drop-shadow(0 12px 24px rgba(0,0,0,.45))}
.loading-indicator{display:flex;align-items:center;gap:8px;height:18px}
.loading-indicator span{width:10px;height:10px;border-radius:50%;background:#d79732;animation:loading-dot .9s infinite ease-in-out}
.loading-indicator span:nth-child(2){animation-delay:.12s}
.loading-indicator span:nth-child(3){animation-delay:.24s}
.section{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;background:#111}
.stage{position:absolute;top:50%;left:50%;z-index:2;width:1920px;height:1080px;transform:translate(-50%,-50%) scale(var(--stage-scale,1));transform-origin:center}
.stage-item{position:absolute;display:block}
.stage-fixed{position:fixed;z-index:30;pointer-events:none}
.section-video{z-index:1;display:block;object-fit:cover}
.image-button{line-height:0;transition:filter .2s,transform .2s}
.image-button:hover{filter:brightness(1.08);transform:scale(1.025)}
.main-maps{position:absolute;inset:0;z-index:1;overflow:hidden;--map-start:calc(min(50vw,88.8vh) - 88.8vh);--map-end:max(-150vh,calc(100vw - 346.584615vh))}
.main-map{position:absolute;top:0;left:0;z-index:0;width:346.584615vh;height:110vh;opacity:0;transform:translate3d(var(--map-start),0,0);background-position:0 0;background-repeat:no-repeat;background-size:100% 100%;backface-visibility:hidden}
.main-map.is-active,.main-map.is-entering{animation:map-pan 4s linear forwards;will-change:transform,opacity}
.main-map.is-active{z-index:1;opacity:1}
.main-map.is-entering{z-index:2;opacity:1;transition:opacity .4s linear}
.main-map-1{background-image:url("https://imgcdn.topgame.kr/tqgame/skull/pre-register/pc/main-bg-1.webp")}
.main-map-2{background-image:url("https://imgcdn.topgame.kr/tqgame/skull/pre-register/pc/main-bg-2.webp")}
.main-map-3{background-image:url("https://imgcdn.topgame.kr/tqgame/skull/pre-register/pc/main-bg-3.webp")}
.main-map-4{background-image:url("https://imgcdn.topgame.kr/tqgame/skull/pre-register/pc/main-bg-4.webp")}
.main-title{top:111px;left:536px;width:847px;height:302px}
.main-characters{top:515px;left:585px;width:750px;height:162px}
.main-button{top:725px;left:702px;width:516px;height:106px}
.main-button img{width:100%}
.store-buttons{top:850px;left:590px;display:flex;width:740px;height:59px;gap:8px}
.store-buttons button,.store-buttons img{width:179px;height:59px}
.store-buttons button{transition:transform .18s,filter .18s}
.store-buttons button:hover{z-index:2;filter:brightness(1.1);transform:translateY(-3px)}
.main-kakao{top:390px;left:1550px;width:211px;height:153px}
.main-naver{top:560px;left:1550px;width:211px;height:153px}
.main-kakao img,.main-naver img{width:100%}
.reserve-layout{position:absolute;inset:0;transform:translateY(-18px) scale(.94);transform-origin:center}
.reserve-title{top:131px;left:416px;width:1088px;height:156px}
.reserve-content{top:272px;left:363px;width:1194px;height:711px}
.reserve-phone{top:563px;left:1093px;width:365px;height:58px;padding:0 20px;border:1px solid #8b7a67;border-radius:0;outline:0;background:#fff;color:#2d2118;font-size:19px;text-align:center;-webkit-user-select:text;user-select:text}
.reserve-phone:focus{border-color:#2d2118;box-shadow:none}
.reserve-phone::placeholder{color:#3e352f;opacity:1}
.reserve-check{left:1099px;width:17px;height:17px;margin:0;border:1px solid #6a5946;border-radius:1px;appearance:none;-webkit-appearance:none;background:#fff;cursor:pointer}
.reserve-check:checked{background:#c64a32 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/13px 13px}
.reserve-check-privacy{top:637px}
.reserve-check-age{top:659px}
.reserve-check-marketing{top:681px}
.detail-button{width:100px;height:24px;background:transparent}
.detail-button img{width:73px;height:14px}
.detail-privacy{top:634px;left:1309px}
.detail-marketing{top:680px;left:1320px}
.reserve-submit{top:750px;left:1091px;width:363px;height:92px;-webkit-tap-highlight-color:transparent}
.reserve-submit:focus,.reserve-submit:active{border:0;outline:0}
.reserve-submit img{width:100%}
.reserve-submit.is-loading{filter:grayscale(1);pointer-events:none}
.channel-layout{position:absolute;inset:0;transform:scale(.93);transform-origin:center}
.channel-title{top:81px;left:385px;width:1150px;height:193px}
.channel-content{top:312px;left:301px;width:1318px;height:614px}
.channel-kakao{top:810px;left:490px;width:282px;height:84px}
.channel-naver{top:810px;left:1150px;width:282px;height:84px}
.channel-kakao img,.channel-naver img{width:100%}
.feature-stage{z-index:3}
.feature-title{top:110px;left:402px;width:1115px;height:168px}
.feature-slide{position:absolute;top:0;left:0;width:324px;height:553px;opacity:0;transform:translate3d(410px,390px,0) scale(.92);transition:opacity .25s,transform .4s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 8px 10px rgba(0,0,0,.35));backface-visibility:hidden;will-change:transform,opacity;pointer-events:none}
.feature-slide img{position:absolute;top:0;left:0;transition:opacity .2s}
.feature-image-main{width:324px;height:553px;opacity:0}
.feature-image-sub{width:266px;height:449px;opacity:1}
.feature-slide.is-current{z-index:2;opacity:1;transform:translate3d(798px,320px,0) scale(1)}
.feature-slide.is-current .feature-image-main{opacity:1}
.feature-slide.is-current .feature-image-sub{opacity:0}
.feature-slide.is-prev{z-index:1;opacity:1;transform:translate3d(590px,372px,0) scale(1)}
.feature-slide.is-next{z-index:1;opacity:1;transform:translate3d(1064px,372px,0) scale(1)}
.feature-slide.is-hidden-left{transform:translate3d(410px,390px,0) scale(.92)}
.feature-slide.is-hidden-right{transform:translate3d(1190px,390px,0) scale(.92)}
.feature-arrow{position:absolute;top:558px;width:50px;height:80px;transition:transform .2s,filter .2s}
.feature-arrow img{width:100%;height:100%}
.feature-arrow:hover{filter:brightness(1.15);transform:scale(1.08)}
.feature-arrow-prev{left:490px}
.feature-arrow-next{left:1380px}
.side-nav{position:absolute;top:305px;left:90px;display:grid;width:235px;height:485px;padding:149px 0 0 27px;grid-template-columns:171px;grid-template-rows:repeat(4,61px);gap:4px;align-content:start;pointer-events:auto}
.side-nav-bg{position:absolute;inset:0;width:235px;height:485px}
.side-nav-item{position:relative;z-index:1;width:171px;height:61px;line-height:0}
.side-nav-item img{position:absolute;inset:0;width:171px;height:61px}
.side-nav-item .off{opacity:1}
.side-nav-item .on{opacity:0}
.side-nav-item:hover .off,.side-nav-item.is-on .off{opacity:0}
.side-nav-item:hover .on,.side-nav-item.is-on .on{opacity:1}
#scrollGuide{position:fixed;z-index:31;bottom:8px;left:50%;width:75px;height:71px;transform:translateX(-50%) rotate(0deg);transition:transform .25s}
#scrollGuide img{width:75px;height:71px;animation:scroll-bounce 1.5s infinite ease-in-out;will-change:transform}
#scrollGuide.is-last{transform:translateX(-50%) rotate(180deg)}
#scrollGuide.is-last img{animation-name:scroll-bounce-last}
.modal-overlay{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(12,7,5,.72)}
.modal-overlay.is-open{display:flex}
.alert-box,.policy-box{border:3px solid #402116;background:#f8e8c3;color:#2e1b13;box-shadow:0 14px 50px rgba(0,0,0,.48)}
.alert-box{position:relative;width:390px;padding:38px 28px 26px;overflow:hidden;border:2px solid #24140f;border-radius:18px;background:linear-gradient(180deg,#fff9ea 0%,#f5dfb6 100%);box-shadow:0 18px 55px rgba(0,0,0,.5),inset 0 0 0 2px #e7ba65;text-align:center}
.alert-box::before{content:"";position:absolute;top:0;left:28px;right:28px;height:4px;border-radius:0 0 4px 4px;background:#cf8c2e}
.alert-box p{min-height:48px;margin:0 0 24px;color:#2b1711;font-family:Pretendard,"Malgun Gothic",sans-serif;font-size:17px;font-weight:650;line-height:1.55}
.alert-box button{width:100%;height:50px;border:2px solid #24140f;border-radius:10px;background:#b63c2c;color:#fff7df;font-size:16px;font-weight:800;transition:background .18s,transform .18s}
.alert-box button:hover{background:#c84835}
.alert-box button:active{transform:translateY(1px)}
.policy-box{position:relative;width:min(680px,94vw);max-height:82vh;padding:42px 36px;overflow-y:auto;user-select:text}
.policy-box h2{margin:0 0 24px;font-size:24px;text-align:center}
.policy-box h3{margin:26px 0 12px;font-size:17px}
.policy-box p{margin:0 0 22px;font-size:14px;line-height:1.7}
.policy-box ul{margin:0;padding-left:20px;font-size:14px;line-height:1.65}
.policy-box li+li{margin-top:7px}
.policy-box table{width:100%;border-collapse:collapse;font-size:13px}
.policy-box th,.policy-box td{padding:12px 10px;border:1px solid #94765a;text-align:center;line-height:1.5}
.policy-box th{background:#ead1a2}
.policy-box .policy-note{margin:16px 0 0;color:#6c3c2d}
.policy-close{position:absolute;top:8px;right:14px;color:#5a392b;font-size:32px;line-height:1}
@keyframes map-pan{0%{transform:translate3d(var(--map-start),0,0)}100%{transform:translate3d(var(--map-end),0,0)}}
@keyframes loading-dot{0%,100%{transform:translate3d(0,0,0);opacity:.45}50%{transform:translate3d(0,-7px,0);opacity:1}}
@keyframes scroll-bounce{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-9px,0)}}
@keyframes scroll-bounce-last{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,9px,0)}}