라그나로크 소개
공지사항
업데이트
이벤트
확률공개
결제/충전 내역 확인
충전내역
구매내역
선물내역
RO포인트 전환내역
1:1문의
내 문의내역
이용약관/정책
이용약관
유료서비스 이용약관
개인정보 처리방침
청소년 보호정책
모바일 이용약관
모바일 개인정보 처리방침
업데이트
메가 부스터 프로모션 상세 안내
2023-03-30
<style> @charset "UTF-8"; /*============================================== css import ==============================================*/ .sectionMain { width: 650px; height: 3247px; background: url(https://imgc1.gnjoy.com/event/2023/03/0331_ro1_boosterPromotionAllTheTime_VMWIEI123EDU/images/bg_booster_230419.jpg) repeat; position: relative; } /* 블라인드 */ .blind { display: none; background-color: rgba(0, 0, 0, 0.8); position: fixed; overflow-y: auto; -webkit-overflow-scrolling: touch; left: 0; top: 0; right: 0; bottom: 0; z-index: 50; text-align: left; } .blind--btnClosed { width: 24px; height: 24px; cursor: pointer; right: 10px; top: 10px; background: white; position: fixed; background: url(https://imgc1.gnjoy.com/event/2023/03/0331_ro1_boosterPromotionAllTheTime_VMWIEI123EDU/images/btn_closed.png) no-repeat; -webkit-transition: 0.5s all; transition: 0.5s all; -webkit-transition: -webkit-transform 0.6s ease-out; transition: -webkit-transform 0.6s ease-out; transition: transform 0.6s ease-out; transition: transform 0.6s ease-out, -webkit-transform 0.6s ease-out; } .blind--btnClosed:hover { -webkit-transform: rotate(1turn); transform: rotate(1turn); } .txthidden { font-size: 0; text-indent: -9999px; } #top { display: none; cursor: pointer; position: fixed; width: 70px; height: 70px; bottom: 1vw; right: 1vw; z-index: 12; background: url(https://imgc1.gnjoy.com/event/2023/03/0331_ro1_boosterPromotionAllTheTime_VMWIEI123EDU/images/btn-top_221109.png) no-repeat; background-size: contain; } @media (max-width: 1000px) { #top { display: none; bottom: 7vw; right: 3vw; width: 10vw; height: 10vw; } } #btn-back { display: none; cursor: pointer; position: fixed; width: 70px; height: 70px; bottom: 5vw; right: 1vw; z-index: 12; background: url(https://imgc1.gnjoy.com/event/2023/03/0331_ro1_boosterPromotionAllTheTime_VMWIEI123EDU/images/btn-back_221109.png) no-repeat; background-size: contain; } #btn-back a { display: block; width: 100%; height: 100%; } @media (max-width: 1000px) { #btn-back { display: none; bottom: 18vw; right: 3vw; width: 10vw; height: 10vw; } } .btn-popupOpen.giftPopup1 { position: absolute; bottom: 147px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 5; width: 451px; height: 86px; } .popup { display: none; position: fixed; top: 50%; left: 50%; width: auto; height: auto; z-index: 99; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); /* scroll width */ /* scroll Track */ /* scroll Handle */ /* scroll Handle on hover */ } .popup div.contents { max-height: 800px; overflow-y: scroll; display: block; width: 658px; overflow-x: hidden; } @media (max-width: 1800px) { .popup div.contents { max-height: 500px; } } .popup div.contents ul { width: 650px; height: 364px; position: relative; background: url(https://imgc1.gnjoy.com/event/2023/03/0331_ro1_boosterPromotionAllTheTime_VMWIEI123EDU/images/popup-menuWrap.jpg) no-repeat; padding-top: 149px; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; line-height: 0; -webkit-padding-start: initial; padding-inline-start: initial; list-style: none; } .popup div.contents ul li { width: 195px; height: 85px; background: url(https://imgc1.gnjoy.com/event/2023/03/0331_ro1_boosterPromotionAllTheTime_VMWIEI123EDU/images/popupMenuBtn-off.png) no-repeat; -webkit-transition: 0.5s all; transition: 0.5s all; margin: 0 7px; } .popup div.contents ul li:hover { background: url(https://imgc1.gnjoy.com/event/2023/03/0331_ro1_boosterPromotionAllTheTime_VMWIEI123EDU/images/popupMenuBtn-on.png) no-repeat; } .popup div.contents ul li.on { background: url(https://imgc1.gnjoy.com/event/2023/03/0331_ro1_boosterPromotionAllTheTime_VMWIEI123EDU/images/popupMenuBtn-on.png) no-repeat; } .popup div.contents ul li:nth-child(1) { background-position: -19px 0px; } .popup div.contents ul li:nth-child(2) { background-position: -228px 0px; } .popup div.contents ul li:nth-child(3) { background-position: -436px 0px; } .popup div.contents ul li:nth-child(4) { background-position: -84px -97px; width: 274px; } .popup div.contents ul li:nth-child(5) { background-position: -372px -97px; } .popup div.contents ul li a { display: block; width: 100%; height: 100%; } .popup div.contents__1-1 { display: block; } .popup div.contents__1-2 { display: none; position: relative; } .popup div.contents__1-2 ul.navWrap-giftPopup1-2 { width: 575px; height: 53px; position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: none; top: 20px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-top: 0; -ms-flex-wrap: nowrap; flex-wrap: nowrap; z-index: 3; } .popup div.contents__1-2 ul.navWrap-giftPopup1-2 li { width: 184px; height: 53px; background: url(https://imgc1.gnjoy.com/event/2023/03/0331_ro1_boosterPromotionAllTheTime_VMWIEI123EDU/images/popupMenu1-2Btn-off.png) no-repeat; -webkit-transition: 0.5s all; transition: 0.5s all; cursor: pointer; position: relative; top: 0px; } .popup div.contents__1-2 ul.navWrap-giftPopup1-2 li:hover { background: url(https://imgc1.gnjoy.com/event/2023/03/0331_ro1_boosterPromotionAllTheTime_VMWIEI123EDU/images/popupMenu1-2Btn-on.png) no-repeat; } .popup div.contents__1-2 ul.navWrap-giftPopup1-2 li.on { background: url(https://imgc1.gnjoy.com/event/2023/03/0331_ro1_boosterPromotionAllTheTime_VMWIEI123EDU/images/popupMenu1-2Btn-on.png) no-repeat; } .popup div.contents__1-2 ul.navWrap-giftPopup1-2 li:nth-child(1) { background-position: 0px 0px; } .popup div.contents__1-2 ul.navWrap-giftPopup1-2 li:nth-child(2) { background-position: -196px 0px; } .popup div.contents__1-2 ul.navWrap-giftPopup1-2 li:nth-child(3) { background-position: -389px 0px; } .popup div.contents__1-2 ul.navWrap-giftPopup1-2 li a { display: block; width: 100%; height: 100%; } .popup div.contents__1-3 { display: none; } .popup div.contents__1-4 { display: none; } .popup div.contents__1-5 { display: none; } .popup div.contents .giftPopup1-2-1 { display: block; } .popup div.contents .giftPopup1-2-2 { display: none; } .popup div.contents .giftPopup1-2-3 { display: none; } .popup div::-webkit-scrollbar { width: 8px; } .popup div::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.075); } .popup div::-webkit-scrollbar-thumb { background: rgba(221, 221, 221, 0.418); } .popup div::-webkit-scrollbar-thumb:hover { background: rgba(221, 221, 221, 0.418); } .popup .btn-popupTop { color: #fff; position: absolute; right: 11px; bottom: 12px; background: #000; width: 50px; height: 50px; line-height: 50px; text-align: center; border-radius: 50px; } .popup img { width: 100%; height: 100%; } @media (max-width: 1800px) { .popup img { image-rendering: auto; } } .contents__1-1 { position: relative; } .contents__1-3 { position: relative; } .popup img.img-boosterBox { width: 156px; height: 73px; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: -21px; z-index: 3; } .popup img.img-boosterCall { width: 173px; height: 116px; position: absolute; left: 321px; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: -26px; z-index: 3; } </style> <!-- 본문 내용 --> <div class="wrap"> <section class="sectionMain"> <div class="sectionMain__contentsWrap"> <a href="#" class="btn-popupOpen giftPopup1" title="메가 부스터 아이템 안내 확인 하기"></a> </div> </section> </div> <!-- 블라인드 --> <div class="blind"> <a href="" class="blind--btnClosed" title="닫기 버튼"></a> </div> <div class="popup giftPopup1"> <div class="contents"> <ul class="navWrap-giftPopup1-1"> <li class="on" data-giftpopupnumber="1-1"> <a href="#" title="부스터 팩"></a> </li> <li data-giftpopupnumber="1-2"> <a href="#" title="부스터 장비"></a> </li> <li data-giftpopupnumber="1-3"> <a href="#" title="부스터 콜 특전"></a> </li> <li data-giftpopupnumber="1-4"> <a href="#" title="부스터 미션 & 퀘스트"></a> </li> <li data-giftpopupnumber="1-5"> <a href="#" title="부스터 인챈트"></a> </li> </ul> <div class="contents__1-1"> <img class="img-boosterBox" src="https://imgc1.gnjoy.com/event/2023/03/0331_ro1_boosterPromotionAllTheTime_VMWIEI123EDU/images/img-boosterBox.png" alt="부스터팩 이미지" /> <img src="https://imgc1.gnjoy.com/event/2023/03/0331_ro1_boosterPromotionAllTheTime_VMWIEI123EDU/images/popup-giftPopup1-1-1_230921.webp" alt="부스터 팩" /> <img src="https://imgc1.gnjoy.com/event/2023/03/0331_ro1_boosterPromotionAllTheTime_VMWIEI123EDU/images/popup-giftPopup1-1-2_230419.jpg" alt="부스터 팩" /> <img src="https://imgc1.gnjoy.com/event/2023/03/0331_ro1_boosterPromotionAllTheTime_VMWIEI123EDU/images/popup-giftPopup1-1-3_230427.jpg" alt="부스터 팩" /> <img src="https://imgc1.gnjoy.com/event/2023/03/0331_ro1_boosterPromotionAllTheTime_VMWIEI123EDU/images/popup-giftPopup1-1-4_230419.jpg" alt="부스터 팩" /> </div> <div class="contents__1-2"> <ul class="navWrap-giftPopup1-2"> <li class="on" data-giftpopupnumber="1-2-1"> <a href="#" title="쉐도우 장비 소개"></a> </li> <li data-giftpopupnumber="1-2-2"> <a href="#" title="일루시온 장비 소개"></a> </li> <li data-giftpopupnumber="1-2-3"> <a href="#" title="오토매틱 장비 소개"></a> </li> </ul> <img class="giftPopup1-2-1" src="https://imgc1.gnjoy.com/event/2023/03/0331_ro1_boosterPromotionAllTheTime_VMWIEI123EDU/images/popup-giftPopup1-2-1_230419.jpg" alt="부스터 장비" /> <img class="giftPopup1-2-2" src="https://imgc1.gnjoy.com/event/2023/03/0331_ro1_boosterPromotionAllTheTime_VMWIEI123EDU/images/popup-giftPopup1-2-2_230419.jpg" alt="부스터 장비" /> <img class="giftPopup1-2-3" src="https://imgc1.gnjoy.com/event/2023/03/0331_ro1_boosterPromotionAllTheTime_VMWIEI123EDU/images/popup-giftPopup1-2-3_230419.jpg" alt="부스터 장비" /> </div> <div class="contents__1-3"> <img class="img-boosterCall" src="https://imgc1.gnjoy.com/event/2023/03/0331_ro1_boosterPromotionAllTheTime_VMWIEI123EDU/images/img-boostercall.png" alt="부스터콜 이미지" /> <img src="https://imgc1.gnjoy.com/event/2023/03/0331_ro1_boosterPromotionAllTheTime_VMWIEI123EDU/images/popup-giftPopup1-3_230419.jpg" alt="부스터 콜 특전" /> </div> <div class="contents__1-4"> <img src="https://imgc1.gnjoy.com/event/2023/03/0331_ro1_boosterPromotionAllTheTime_VMWIEI123EDU/images/popup-giftPopup1-4_230419.jpg" alt="부스터 미션 & 퀘스트" /> </div> <div class="contents__1-5"> <img src="https://imgc1.gnjoy.com/event/2023/03/0331_ro1_boosterPromotionAllTheTime_VMWIEI123EDU/images/popup-giftPopup1-5-1_230509.jpg" alt="부스터 인챈트" /> <!-- 230509 수정 --> <img src="https://imgc1.gnjoy.com/event/2023/03/0331_ro1_boosterPromotionAllTheTime_VMWIEI123EDU/images/popup-giftPopup1-5-2_230420.jpg" alt="부스터 인챈트" /> <img src="https://imgc1.gnjoy.com/event/2023/03/0331_ro1_boosterPromotionAllTheTime_VMWIEI123EDU/images/popup-giftPopup1-5-3_230420.jpg" alt="부스터 인챈트" /> <img src="https://imgc1.gnjoy.com/event/2023/03/0331_ro1_boosterPromotionAllTheTime_VMWIEI123EDU/images/popup-giftPopup1-5-4_230419.jpg" alt="부스터 인챈트" /> </div> </div> <a href="#" data-popupname="giftPopup1" class="btn-popupTop">TOP</a> </div> <script> /********************************* 스크립트 *********************************/ $(document).ready(function () { $('.giftPopup1 .contents ul.navWrap-giftPopup1-1 li').click(function () { $(this).siblings().removeClass('on'); $(this).addClass('on'); $('[class^=contents__]').hide(); $('.contents__' + $(this).data('giftpopupnumber')).show(); return false; }); $('.giftPopup1 .contents ul.navWrap-giftPopup1-2 li').click(function () { $(this).siblings().removeClass('on'); $(this).addClass('on'); $('[class^=giftPopup1-2-]').hide(); $('.giftPopup' + $(this).data('giftpopupnumber')).show(); return false; }); // 팝업 내에 top 버튼 액션 $('.btn-popupTop').click(function (e) { var targetPopup = $(this).data('popupname'); $('.' + targetPopup + ' div').animate({ scrollTop: 0 }, 600); e.preventDefault(); }); // 팝업 호출 버튼 클릭 시 액션 $('.btn-popupOpen').click(function (e) { open_blind(); var targetPopup = $(this).attr('class').split('btn-popupOpen ')[1]; $('.' + targetPopup).show(); e.preventDefault(); }); $(document).keyup(function (e) { if (e.key === 'Escape') { closed_blind(); $('.youtube').empty(); $('.youtube').hide(); $('[class^=popup]').fadeOut('fast'); } }); // 블라인드 활성화 함수. function open_blind() { $('.blind').show(); } // 블라인드 비 활성화 함수. function closed_blind() { $('.blind').hide(); } // 닫기 버튼 클릭 시 함수. function closed() { closed_blind(); $('[class^=popup]').fadeOut('fast'); } // 닫기버튼 클릭 시. $('[class*=btnClosed]').click(function () { closed(); return false; }); }); </script>
