@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{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:not(.channel-kakao):not(.channel-naver):hover{filter:brightness(1.08)}
.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/main/pc/main-bg-1.webp")}
.main-map-2{background-image:url("https://imgcdn.topgame.kr/tqgame/skull/main/pc/main-bg-2.webp")}
.main-map-3{background-image:url("https://imgcdn.topgame.kr/tqgame/skull/main/pc/main-bg-3.webp")}
.main-map-4{background-image:url("https://imgcdn.topgame.kr/tqgame/skull/main/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}
.store-buttons{top:820px;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%}
.main-kakao:hover,.main-naver:hover{transform:scale(1.025)}
.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;width:235px;height:485px;pointer-events:auto}
.side-nav-bg{position:absolute;inset:0;width:235px;height:485px}
.side-nav-item{position:absolute;left:27px;z-index:1;width:171px;height:61px;line-height:0}
.side-nav-item-1{top:149px}
.side-nav-item-2{top:214px}
.side-nav-item-3{top:278px}
.side-nav-item-4{top:344px}
.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{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)}
@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)}}