라그나로크 소개
공지사항
업데이트
이벤트
확률공개
결제/충전 내역 확인
충전내역
구매내역
선물내역
RO포인트 전환내역
1:1문의
내 문의내역
이용약관/정책
이용약관
유료서비스 이용약관
개인정보 처리방침
청소년 보호정책
모바일 이용약관
모바일 개인정보 처리방침
업데이트
챕터 1 버려진 연구소 제로셀 업데이트안내
9/17/2025
<style> .cubePopup { max-width: 600px; max-height: 80vh; max-height: calc(100vh - 100px); padding-top: 50px; position: relative; overscroll-behavior: contain; } .cubePopup__title { position: sticky; top: 0; } .cubePopup__wrap { max-height: 750px; overflow-x: hidden; overflow-y: auto; overflow-anchor: none; font-size: 0; position: relative; } .cubePopup__wrap::-webkit-scrollbar { width: 3px; } .cubePopup__wrap::-webkit-scrollbar-track { background-color: rgba(5, 75, 39, 0.418); } .cubePopup__wrap::-webkit-scrollbar-thumb { border-radius: 3px; background-color: rgba(45, 247, 197, 0.9); } .cubePopup__wrap::-webkit-scrollbar-button { width: 0; height: 0; } .cubePopup .enchant-btn-wrap { display: grid; grid-template-areas: ". . ."; grid-auto-columns: min-content; justify-content: center; background-color: #03110c; padding: 10px 0; } .cubePopup .enchant-btn { background: none; border: 0; cursor: pointer; padding: 10px; } .cubePopup .content-img-wrap { background-color: #000; text-align: center; } .cubePopup1 .content-btn-wrap { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 16px 20px; justify-content: center; } .cubePopup .content-btn-wrap button { background-color: transparent; border: 0; padding: 0; } .cubePopup1 .content-btn-wrap img { width: 100%; } .cubePopup2 .content-btn-wrap { display: grid; grid-template-areas: ". ."; gap: 5px; padding: 0 16px 20px; justify-content: center; } .cubePopup .content-btn { cursor: pointer; } .cubePopup .enchant-btn img:nth-child(1), .cubePopup .content-btn img:nth-child(1) { display: block; } .cubePopup .enchant-btn img:nth-child(2), .cubePopup .content-btn img:nth-child(2) { display: none; } .cubePopup .enchant-btn.active img:nth-child(1), .cubePopup .content-btn.active img:nth-child(1) { display: none; } .cubePopup .enchant-btn.active img:nth-child(2), .cubePopup .content-btn.active img:nth-child(2) { display: block; } .cubePopup__topBtn { border: 0; padding: 0; margin: 0; outline: none; cursor: pointer; color: #fff; background: #000; position: absolute; text-align: center; right: 11px; bottom: 12px; width: 50px; height: 50px; line-height: 50px; border-radius: 50px; } .pop1-content-box,.pop2-content-box { display: none; background-color: #000; } .pop1-content-box.active,.pop2-content-box.active {display: block;} </style> <div class="wrap-box" style="position: relative; width: 650px; z-index: 1"> <div style="overflow: hidden; position: absolute; left: 0; top: 0; z-index: 1; width: 0; height: 0; font: normal 0/0 dotum"> <h1>버려진 연구소 제로셀</h1> </div> <div style="position: relative; left: 0; top: 0; z-index: 2"> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/common.webp" alt="버려진 연구소 제로셀" usemap="#commonMap" /> <map name="item" id="eventMap"> <area shape="rect" data-tab="1" data-src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/tab1.webp" href="javascript:void(0)" title="퀘스트" coords="51, 29, 321, 101" style="cursor: pointer"/> <area shape="rect" data-tab="2" data-src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/tab2.webp" href="javascript:void(0)" title="교환 아이템" coords="332, 29, 601, 101" style="cursor: pointer"/> </map> <section class="content-wrap" id="content1" style="display: block; z-index: 2; position: relative"> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/tab1.webp" class="eventContent" usemap="#item" style="vertical-align: top; position: relative; z-index: 2" /> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/1.webp" alt="퀘스트" /> </section> <section class="content-wrap" id="content2" style="display: none; z-index: 2; position: relative"> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/tab2.webp" class="eventContent" usemap="#item" style="vertical-align: top; position: relative; z-index: 2" /> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/2.webp" alt="교환 아이템" usemap="#itemView1" alt="" style="border: 0; vertical-align: top; position: relative; z-index: 2" /> <map name="itemView1"> <area shape="rect" coords="225,2189,445,2215" target="_blank" href="https://ro.gnjoy.com/guide/runemidgarts/result.asp?runSearch=%EB%B2%84%EB%A0%A4%EC%A7%84%EC%97%B0%EA%B5%AC%EC%86%8C%EC%A0%9C%EB%A1%9C%EC%85%80%EA%B2%BD%EA%B3%84%EC%9D%98%EC%A1%B0%EC%9C%A8" style="cursor: pointer" alt="경계의 조율 자세히 보기" /> <area shape="rect" coords="199,2404,451,2428" target="_blank" href="https://ro.gnjoy.com/guide/runemidgarts/result.asp?runSearch=%23%EB%B2%84%EB%A0%A4%EC%A7%84%EC%97%B0%EA%B5%AC%EC%86%8C%EC%9D%B4%EC%B0%A8%EC%9B%90%EC%9D%98%EC%A1%B0%EC%9C%A8" style="cursor: pointer" alt="이차원의 조율 자세히 보기" /> <area shape="rect" coords="23,2521,208,2580" href="#cubePopup1" class="btnCube" id="btnCube1" style="cursor: pointer" alt="잠식된 무기" /> <area shape="rect" coords="229,2521,430,2580" href="#cubePopup2" class="btnCube" id="btnCube2" style="cursor: pointer" alt="룬 크라운 인챈트" /> <area shape="rect" coords="453,2521,634,2580" target="_blank" href="https://ro.gnjoy.com/guide/runemidgarts/result.asp?runSearch=%EB%B2%84%EB%A0%A4%EC%A7%84%EC%97%B0%EA%B5%AC%EC%86%8C%EC%8B%A0%EA%B7%9C%EC%95%84%EC%9D%B4%ED%85%9C" style="cursor: pointer" alt="신규 아이템 및 구성품" /> </map> </section> <div class="cubePopup cubePopup1" id="cubePopup1" style="border: 0; display: none; position: absolute; top: 50px; left: 40px; z-index: 4"> <!--팝업 닫기--> <a href="javascript:void(0)" class="btnClose enchant-btn-close" id="btnClose" style="position: absolute; right: 0; top: 0" title="팝업 닫기"><img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/close_popup.webp" alt="" /></a> <div class="cubePopup__wrap"> <div class="cubePopup__title"><img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/img_popup_title1.webp" usemap="#closePopup" alt="인챈트 리스트" /></div> <div class="cubePopup__body"> <div class="enchant-btn-wrap"> <button type="button" class="enchant-btn active" data-btn="pop1-btn"> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/pop-btn-02-off.webp" alt="마법계열 무기 랜덤 옵션" /> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/pop-btn-02-on.webp" alt="마법계열 무기 랜덤 옵션" /> </button> <button type="button" class="enchant-btn" data-btn="pop1-btn"> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/pop-btn-03-off.webp" alt="물리계열 무기 랜덤 옵션" /> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/pop-btn-03-on.webp" alt="물리계열 무기 랜덤 옵션" /> </button> </div> <!-- 마법계열 무기 랜덤 옵션 --> <div class="pop1-content-box pop1-content1 active"> <div class="content-top-wrap"> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/pop1-content2-title.webp" alt="" /> </div> <div class="content-btn-wrap" style="flex-wrap:nowrap;"> <button type="button" class="content-btn active" data-content="2-1"> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/pop1-content2-sub-btn1-off.webp" alt="마법 계열 한손 무기" /> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/pop1-content2-sub-btn1-on.webp" alt="마법 계열 한손 무기" /> </button> <button type="button" class="content-btn" data-content="2-2"> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/pop1-content2-sub-btn2-off.webp" alt="마법 계열 양손 무기" /> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/pop1-content2-sub-btn2-on.webp" alt="마법 계열 양손 무기" /> </button> </div> <div class="content-img-wrap"> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/2-1.webp" alt="마법계열 무기 컨텐츠" id="content2Img"/> </div> </div> <!-- 물리계열 무기 랜덤 옵션 --> <div class="pop1-content-box pop1-content2"> <div class="content-top-wrap"> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/pop1-content3-title.webp" alt="" /> </div> <div class="content-btn-wrap"> <button type="button" class="content-btn active" data-content="3-1"> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/pop1-content3-sub-btn1-off.webp" alt="근접 계열 한손 무기" /> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/pop1-content3-sub-btn1-on.webp" alt="근접 계열 한손 무기" /> </button> <button type="button" class="content-btn" data-content="3-2"> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/pop1-content3-sub-btn2-off.webp" alt="근접 계열 한손 무기 (크리티컬 계열)" /> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/pop1-content3-sub-btn2-on.webp" alt="근접 계열 한손 무기 (크리티컬 계열)" /> </button> <button type="button" class="content-btn" data-content="3-3"> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/pop1-content3-sub-btn3-off.webp" alt="원거리 계열 한손 무기" /> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/pop1-content3-sub-btn3-on.webp" alt="원거리 계열 한손 무기" /> </button> <button type="button" class="content-btn" data-content="3-4"> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/pop1-content3-sub-btn4-off.webp" alt="원거리 계열 한손 무기 (크리티컬 계열)" /> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/pop1-content3-sub-btn4-on.webp" alt="원거리 계열 한손 무기 (크리티컬 계열)" /> </button> <button type="button" class="content-btn" data-content="3-5"> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/pop1-content3-sub-btn5-off.webp" alt="근접 계열 양손 무기" /> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/pop1-content3-sub-btn5-on.webp" alt="근접 계열 양손 무기" /> </button> <button type="button" class="content-btn" data-content="3-6"> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/pop1-content3-sub-btn6-off.webp" alt="근접 계열 양손 무기 (크리티컬 계열)" /> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/pop1-content3-sub-btn6-on.webp" alt="근접 계열 양손 무기 (크리티컬 계열)" /> </button> <button type="button" class="content-btn" data-content="3-7"> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/pop1-content3-sub-btn7-off.webp" alt="원거리 계열 양손 무기" /> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/pop1-content3-sub-btn7-on.webp" alt="원거리 계열 양손 무기" /> </button> <button type="button" class="content-btn" data-content="3-8"> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/pop1-content3-sub-btn8-off.webp" alt="원거리 계열 양손 무기 (크리티컬 계열)" /> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/pop1-content3-sub-btn8-on.webp" alt="원거리 계열 양손 무기 (크리티컬 계열)" /> </button> </div> <div class="content-img-wrap"> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/3-1.webp" alt="물리계열 무기 컨텐츠" id="content3Img"/> </div> </div> </div> </div> <button type="button" data-popup="cubePopup1" class="cubePopup__topBtn" title="TOP">TOP</button> </div> <div class="cubePopup cubePopup2" id="cubePopup2" style="border: 0; display: none; position: absolute; top: 50px; left: 42px; z-index: 4"> <!--팝업 닫기--> <a href="javascript:void(0)" class="btnClose enchant-btn-close" id="btnClose" style="position: absolute; right: 0; top: 0" title="팝업 닫기"><img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/close_popup.webp" alt="" /></a> <div class="cubePopup__wrap"> <div class="cubePopup__title"><img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/img_popup_title2.webp" usemap="#closePopup" alt="인챈트 리스트" /></div> <div class="cubePopup__body"> <!-- 룬 크라운 인챈트 옵션 --> <div class="pop2-content-box pop2-content1 active"> <div class="content-box"> <div class="content-btn-wrap" style="margin-top: 20px;"> <button type="button" class="content-btn active" data-content="4-1"> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/pop2-content4-sub-btn1-off.webp" alt="룬 크라운 인챈트 옵션" /> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/pop2-content4-sub-btn1-on.webp" alt="룬 크라운 인챈트 옵션" /> </button> <button type="button" class="content-btn" data-content="4-2"> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/pop2-content4-sub-btn2-off.webp" alt="룬 크라운 인챈트 정보" /> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/pop2-content4-sub-btn2-on.webp" alt="룬 크라운 인챈트 정보" /> </button> </div> <div class="content-img-wrap"> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/4-1.webp" alt="룬 크라운 인챈트 옵션 컨텐츠" id="content4Img"/> </div> </div> </div> <!-- 룬 크라운 인챈트 --> <div class="pop2-content-box pop2-content2"> <div class="content-btn-wrap"> <button type="button" class="content-btn active" data-content="5-1"> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/pop2-content5-sub-btn1-off.webp" alt="룬 크라운 인챈트 옵션" /> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/pop2-content5-sub-btn1-on.webp" alt="룬 크라운 인챈트 옵션" /> </button> <button type="button" class="content-btn" data-content="5-2"> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/pop2-content5-sub-btn2-off.webp" alt="룬 크라운 인챈트 정보" /> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/pop2-content5-sub-btn2-on.webp" alt="룬 크라운 인챈트 정보" /> </button> </div> <div class="content-img-wrap"> <img src="https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images/5-1.webp" alt="룬 크라운 인챈트 컨텐츠" id="content5Img"/> </div> </div> </div> </div> <button type="button" data-popup="cubePopup2" class="cubePopup__topBtn" title="TOP">TOP</button> </div> <!-- dim --> <div class="layerOn" style="display: none; position: absolute; top: 0; left: 0; width: 650px; height: 100%; background-color: black; opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; z-index: 3"></div> </div> </div> <script type="text/javascript"> var _scrollTop = 0; $(document).ready(function () { $('.btnCube').on('click', function () { var $id = $(this).attr('id').split('btnCube')[1]; $('.cubePopup' + $id).show(); _scrollTop = $(document).scrollTop() - $('.wrap-box').offset().top; $('.cubePopup' + $id).css('top', _scrollTop + 50); $('.layerOn').css('display', 'block'); return false; }); $('.btnClose').on('click', function () { $(".cubePopup__wrap").scrollTop(0); $('.cubePopup').hide(); $('.layerOn').css('display', 'none'); if($(this).hasClass('enchant-btn-close')) { $('#cubePopup1 .enchant-btn').eq(0).click(); $('#cubePopup2 .enchant-btn').eq(0).click(); // $('.pop1-content1 .content-btn-wrap > .content-btn').eq(0).click(); $('.pop1-content2 .content-btn-wrap > .content-btn').eq(0).click(); $('.pop1-content3 .content-btn-wrap > .content-btn').eq(0).click(); $('.pop2-content1 .content-btn-wrap > .content-btn').eq(0).click(); $('.pop2-content2 .content-btn-wrap > .content-btn').eq(0).click(); } return false; }); // 팝업 내부 상단 버튼 let imgUrl = 'https://imgc.gnjoy.com/event/2025/09/0916_ro1_zerosell_JDB13NVK9/images'; $('.enchant-btn').on("click",function(){ $('.pop1-content2 .content-btn-wrap > .content-btn').eq(0).click(); $('.pop1-content3 .content-btn-wrap > .content-btn').eq(0).click(); $('.pop2-content1 .content-btn-wrap > .content-btn').eq(0).click(); $('.pop2-content2 .content-btn-wrap > .content-btn').eq(0).click(); let $targetNum = $(this).index() + 1; $(this).addClass('active').siblings().removeClass('active'); let $target; if($(this).data('btn') === "pop1-btn") { $target = $(`.pop1-content${$targetNum}`); } else if($(this).data('btn') === 'pop2-btn') { $target = $(`.pop2-content${$targetNum}`); } console.log($targetNum); $target.addClass('active').siblings().removeClass('active'); }); //팝업 내부 서브 버튼 $(".content-btn").on("click",function(){ $(this).addClass('active').siblings().removeClass('active'); const $imgTarget = $(this).parent('.content-btn-wrap').next().children('img'); const $imgContent = $(this).data('content'); console.log($imgTarget); $imgTarget.attr('src',`${imgUrl}/${$imgContent}.webp`) }); // 팝업 내에 top 버튼 액션 $('.cubePopup__topBtn').click(function (e) { $(this).prev('.cubePopup__wrap').stop().animate({ scrollTop: 0 }, 600); e.preventDefault(); }); $(document).keyup(function (e) { if (e.key === 'Escape') { closed_blind(); $('.cubePopup').fadeOut('fast'); } }); // 블라인드 비 활성화 함수. function closed_blind() { $('.layerOn').fadeOut('fast'); } $('#eventMap area[data-tab]').click(function () { var content = $('.eventContent'); var thisSrc = $(this).attr('data-src'); var thisTab = $(this).attr('data-tab'); $('.content-wrap').hide(); if (thisTab === '3') { $('#content' + thisTab).css({ display: 'inline-block' }); } else { $('#content' + thisTab).css({ display: 'block' }); } }); }); </script>
