@charset "UTF-8";
/* reset */
html, body, div, p, img, span, a, em, strong, pre, h1, h2, h3, h4, h4, h5, h6, ul, ol, li, dl, dt, dd, table, tbody, thead, tfoot, tr, th, td, form, fieldset, legend, caption, input, textarea, button, select, video, iframe, header, article, aside, details, figcaption, figure, footer, hgroup, menu, nav, section { margin: 0; padding: 0; }

header, article, aside, details, figcaption, figure, footer, hgroup, menu, nav, section { display: block; vertical-align: baseline; }

body { color: #000; line-height: 1; font-size: 16px; font-family: "맑은 고딕", "Malgun gothic", "돋움", "dotum", sans-serif; }

input, textarea, button, select { font-size: 16px; font-family: "맑은 고딕", "Malgun gothic", "돋움", "dotum", sans-serif; }

img, fieldset, button { border: 0; }

input, button, textarea { outline: 0; }

button { cursor: pointer; }

table { border-collapse: collapse; border-spacing: 0; }

ul, ol { list-style: none; }

a, a:link { text-decoration: none; color: #000; background-color: transparent; }

.blind { position: absolute; top: 0; left: 0; overflow: hidden; visibility: hidden; width: 0; height: 0; font-size: 0; line-height: 0; }

/* layout */
#wrap { position: relative; overflow: hidden; max-width: 1920px; min-width: 1280px; margin: 0 auto; }

#wrap .bg_wrap { position: absolute; top: 0; left: 0; width: 99.99%; height: 3500px; padding-left: 0.01%; background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_FE725A0E3F33EF7E/bg_wrap.jpg") center top no-repeat; }

.section { position: relative; }

.section .container { position: relative; width: 1280px; height: 100%; margin: 0 auto; }

/* gnb */
.gnbWrapper { min-width: 1280px !important; }

/* header */
#header { position: absolute; top: 0; left: 0; width: 100%; z-index: 100; }

#header button span, #header a span { display: block; text-indent: -99999px; overflow: hidden; background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_FE725A0E3F33EF7E/spr_header.png") no-repeat; }

#header .util { position: absolute; top: 20px; right: 20px; }

#header .util, #header .util ul { *zoom: 1; }

#header .util:after, #header .util ul:after { content: ""; display: block; clear: both; }

#header .util button, #header .util ul, #header .util li { float: left; }

#header .util button, #header .util a { position: relative; display: block; height: 46px; }

#header .util span { position: absolute; top: -5px; left: -5px; height: 57px; pointer-events: none; }

#header .util .btn_start { width: 147px; background: none; overflow: visible; }

#header .util .btn_start span { width: 157px; }

#header .util .btn_start:hover span { background-position: 0 -70px; }

#header .util li { margin-left: 10px; }

#header .util li a { width: 47px; }

#header .util li span { width: 57px; }

#header .util .btn_h span { background-position: -186px 0; }

#header .util .btn_h a:hover span { background-position: -186px -70px; }

#header .util .btn_c span { background-position: -271px 0; }

#header .util .btn_c a:hover span { background-position: -271px -70px; }

/* lnb */
#lnb { position: absolute; top: 0; right: 0; left: 0; bottom: 0; width: 180px; background: #000; background-color: rgba(25, 18, 8, 0.7); z-index: 100; transition: left 400ms ease; }

.fixed #lnb { position: fixed; }

#lnb h1 a, #lnb li a .txt, #lnb li a .thumb, #lnb .btn_toggle span, #lnb .nav .deco { display: block; text-indent: -99999px; overflow: hidden; background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_FE725A0E3F33EF7E/spr_lnb.png") no-repeat; }

#lnb .lnb_wrap { position: relative; height: 100%; margin-right: -30px; }

#lnb #mCSB_1_scrollbar_vertical { right: 27px !important; }

#lnb .btn_toggle { position: absolute; top: 54px; right: -27px; width: 55px; height: 55px; overflow: visible; background: none; }

#lnb .btn_toggle span { position: absolute; top: -7px; left: -7px; width: 67px; height: 67px; pointer-events: none; background-position: -116px 0; }

#lnb .btn_toggle:hover span { background-position: -203px 0; }

#lnb.hide { left: -140px; }

#lnb.hide .btn_toggle span { background-position: -113px -85px; }

#lnb.hide .btn_toggle:hover span { background-position: -200px -85px; }

#lnb h1 { position: absolute; top: 34px; left: 48px; }

#lnb h1 a { width: 84px; height: 99px; }

#lnb .nav { position: relative; width: 180px; margin-top: 166px; }

#lnb .nav .deco { position: absolute; left: 0; width: 100%; height: 7px; background-position: 0 -737px; z-index: 1; }

#lnb .nav ._d1 { top: -3px; }

#lnb .nav ._d2 { top: 566px; }

#lnb li { position: relative; background: #191208; padding-bottom: 30px; }

#lnb li.disabled { background: none; }

#lnb li.nav1 { padding-top: 30px; }

#lnb li.nav3 { margin-bottom: 30px; }

#lnb li a { position: relative; display: block; height: 60px; }

#lnb li .txt, #lnb li .thumb { position: absolute; top: 0; height: 100%; }

#lnb li .txt { left: 12px; width: 97px; }

#lnb li .thumb { right: 10px; width: 60px; height: 60px; transition: right 300ms ease; }

#lnb li .thumb .border { position: absolute; top: 0; right: 0; left: 0; bottom: 0; display: none; border: 1px solid #fff; }

#lnb li .thumb .plus { background: #fff; }

#lnb li .thumb .v { position: absolute; top: 26px; left: 30px; width: 1px; height: 9px; transform: scale(1, 0); }

#lnb li .thumb .h { position: absolute; top: 30px; left: 26px; width: 9px; height: 1px; transform: scale(0, 1); }

#lnb li .thumb .rhombus { position: absolute; top: 50%; left: 50%; width: 13px; height: 13px; background: #8a6a5f; border: 1px solid #fff; transform: rotate(45deg) scale(0); margin: -7px 0 0 -7px; }

#lnb li .thumb .rhombus, #lnb li .thumb .plus { transition: transform 200ms ease; }

#lnb li.on .thumb, #lnb li a:hover .thumb { right: -30px; }

#lnb li a:hover .thumb .rhombus { transform: rotate(45deg) scale(1); }

#lnb li.on .border, #lnb li a:hover .thumb .border { display: block; }

#lnb li a:hover .thumb .plus { transform: scale(1, 1); transition-delay: 200ms; }

#lnb li.nav1 .txt { background-position: 0 -177px; }

#lnb li.nav1 a:hover .txt, #lnb li.nav1.on a .txt { background-position: -162px -177px; }

#lnb li.nav1 .thumb { background-position: -300px -177px; }

#lnb li.nav2 .txt { background-position: 0 -267px; }

#lnb li.nav2 a:hover .txt, #lnb li.nav2.on a .txt { background-position: -162px -267px; }

#lnb li.nav2 .thumb { background-position: -300px -267px; }

#lnb li.nav3 .txt { background-position: 0 -357px; }

#lnb li.nav3 a:hover .txt, #lnb li.nav3.on a .txt { background-position: -162px -357px; }

#lnb li.nav3 .thumb { background-position: -300px -357px; }

#lnb li.nav4 .txt { background-position: 0 -457px; }

#lnb li.nav4 a:hover .txt, #lnb li.nav4.on a .txt { background-position: -162px -457px; }

#lnb li.nav4 .thumb { background-position: -300px -457px; }

#lnb li.nav5 .txt { background-position: 0 -547px; }

#lnb li.nav5 a:hover .txt, #lnb li.nav5.on a .txt { background-position: -162px -547px; }

#lnb li.nav5 .thumb { background-position: -300px -547px; }

#lnb li.nav6 .txt { background-position: 0 -637px; }

#lnb li.nav6 a:hover .txt, #lnb li.nav6.on a .txt { background-position: -162px -637px; }

#lnb li.nav6 .thumb { background-position: -300px -637px; }

/* screen */
#screen { position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 100%; background: #fff; z-index: 101; }

/* layerpop */
.modal-popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999999; overflow: hidden; opacity: opacity(0); overflow-y: auto; }

.modal-popup.show { display: block; }

.modal-popup .dim { position: absolute; top: 0; right: 0; left: 0; width: 100%; min-height: 100%; background: #000; opacity: opacity(0.5); }

.modal-popup .modal-wrap { position: absolute; top: 50%; left: 50%; }

.modal-popup button { display: block; text-indent: -99999px; overflow: hidden; background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_FE725A0E3F33EF7E/spr_btn_pop.png") no-repeat; }

.modal-popup .btn_x { position: absolute; left: 50%; width: 67px; height: 67px; background-position: -136px 0; margin-left: -34px; }

.modal-popup .btn_x:hover { background-position: -224px 0; }

.modal-popup.scrollpop .modal-wrap { top: 20px; margin-top: 0 !important; margin-bottom: 20px; }

.modal-popup.scrollpop .dim { padding-bottom: 40px; }

/* lnb popup */
.pop_lnb { width: 360px; height: 212px; background: url("bg_pop_lnb.jpg") no-repeat; margin: -106px 0 0 -180px; }

.pop_lnb .btn_x { top: -28px; }

.pop_lnb .btn_confirm { bottom: 10px; left: 10px; width: 340px; height: 60px; background-position: 0 -90px; }

.pop_lnb .btn_confirm:hover { background-position: 0 -170px; }

/* video pop */
.pop_video { width: 1024px; height: 631px; margin: -315px 0 0 -512px; padding-top: 35px; }

.pop_video .frame_wrap { position: relative; width: 100%; height: 576px; background: #1b1b1b; }

.pop_video .frame_wrap iframe { width: 100%; height: 100%; }

.pop_video .deco { position: absolute; left: 0; display: block; text-indent: -99999px; overflow: hidden; background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_FE725A0E3F33EF7E/spr_pop_video.png") no-repeat; width: 100%; }

.pop_video .deco._d1 { top: 31px; height: 7px; }

.pop_video .deco._d2 { bottom: 0; height: 59px; background-position: 0 -18px; }

.pop_video .btn_x { top: 0; }

.pop_video .btn_hide_video { right: 28px; bottom: 21px; width: 129px; height: 14px; }

/* channeling */
.naver .modal-pop .modal-wrap { margin-top: 0 !important; }

.naver .modal-pop .pop_lnb { top: 300px; }

.naver .modal-pop .pop_video { top: 150px; }

/* common */
.section .object_wrap { position: absolute; left: 0; width: 100%; }

.section .object_wrap div, .section .object_wrap span { position: absolute; }

.section .content_wrap span { opacity: 0; }

.section .content_wrap .deco { left: 49.9%; width: 0; margin-left: 0; }

.section .content_wrap .deco._d1 { height: 56px; }

.section .content_wrap .deco._d2 { height: 28px; }

.section .content_wrap .h3 span { top: 0; height: 100%; opacity: 0; transform: scale(0); }

.section .content_wrap.active span { opacity: 1; }

.section .content_wrap.active .deco { width: 1244px; margin-left: -622px; transition: opacity 300ms ease, width 800ms ease, margin 800ms ease; }

.section .content_wrap.active .h3 span { transform: scale(1); transition: opacity 300ms linear, transform 1s cubic-bezier(0, 1, 0.8, 1); }

.section .content_wrap.active .h3 ._t1 { transition-delay: 0ms; }

.section .content_wrap.active .h3 ._t2 { transition-delay: 80ms; }

.section .content_wrap.active .h3 ._t3 { transition-delay: 160ms; }

.section .content_wrap.active .h3 ._t4 { transition-delay: 240ms; }

/* intro */
.intro { height: 1200px; }

.intro .title_wrap div span, .intro .dragon, .intro .bg_flame { opacity: 0; }

.intro .title_wrap span { background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_FE725A0E3F33EF7E/spr_txt_intro.png") no-repeat; }

.intro .title_wrap .bi { top: 27px; left: 540px; width: 236px; height: 167px; z-index: 1; }

.intro .title_wrap ._h1 { top: 336px; left: 401px; width: 538px; height: 157px; z-index: 1; }

.intro .title_wrap ._h1 span { transform: translate(0, 0) scale(2); transition: opacity 500ms linear, transform 2s cubic-bezier(0, 1, 0.3, 1); }

.intro .title_wrap ._h1 ._t1 { top: 0; left: 0px; width: 170px; height: 100%; background-position: -280px 0; transition-delay: 1000ms; }

.intro .title_wrap ._h1 ._t2 { top: 0; left: 152px; width: 159px; height: 100%; background-position: -460px 0; transition-delay: 1150ms; }

.intro .title_wrap ._h1 ._t3 { top: 0; left: 304px; width: 148px; height: 100%; background-position: -636px 0; transition-delay: 1300ms; }

.intro .title_wrap ._h1 ._t4 { top: 57px; left: 451px; width: 87px; height: 93px; background-position: -813px -57px; transition-delay: 1450ms; }

.intro .title_wrap ._h2 { left: 0; top: 298px; }

.intro .title_wrap ._h2 span { transition: opacity 500ms linear, transform 2s cubic-bezier(0, 1, 0.8, 1); transition-delay: 1600ms; }

.intro .title_wrap ._h2 ._t1 { top: 0; left: -2px; width: 351px; height: 337px; background-position: 0 -273px; transform: translate(300px, 0); }

.intro .title_wrap ._h2 ._t2 { top: 0; left: 960px; width: 357px; height: 337px; background-position: -411px -273px; transform: translate(-300px, 0); }

.intro .title_wrap .subtxt { top: 528px; left: 386px; width: 510px; height: 63px; z-index: 1; }

.intro .title_wrap .subtxt span { transform: scale(5); transition: opacity 300ms linear, transform 300ms cubic-bezier(0, 1, 0.8, 1); }

.intro .title_wrap .subtxt ._t1 { top: 0px; width: 100%; height: 27px; background-position: 0 -187px; transition-delay: 2000ms; }

.intro .title_wrap .subtxt ._t2 { top: 36px; width: 100%; height: 27px; background-position: 0 -223px; transition-delay: 2500ms; }

.intro .dragon { position: absolute; top: 40px; left: -136px; width: 1415px; height: 1374px; background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_FE725A0E3F33EF7E/bg_dragon_intro.png") no-repeat; transform: translate(0, 200px); transition: opacity 500ms linear, transform 2s cubic-bezier(0, 1, 0.3, 1); }

.intro .cloud_wrap span { transition: transform 2s ease-out; }

.intro .cloud_wrap .cleft { transform-origin: 100% 50%; }

.intro .cloud_wrap .cright { transform-origin: 0 50%; }

.intro .cloud_wrap ._c1 { top: 876px; left: -155px; width: 941px; height: 526px; transform: translate(194.7px, 0); transition-delay: 50ms; background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_FE725A0E3F33EF7E/bg_cloud1_intro.png") no-repeat; }

.intro .cloud_wrap ._c2 { top: 21px; left: 1115px; width: 776px; height: 824px; transform: translate(-517.8px, 0); transition-delay: 100ms; background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_FE725A0E3F33EF7E/bg_cloud2_intro.png") no-repeat; }

.intro .cloud_wrap ._c3 { top: 415px; left: 306px; width: 1299px; height: 1073px; transform: translate(-189.3px, 0); transition-delay: 300ms; background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_FE725A0E3F33EF7E/bg_cloud3_intro.png") no-repeat; }

.intro .cloud_wrap ._c4 { top: 1407px; left: 514px; width: 1407px; height: 1043px; transform: translate(-346.5px, 0); transition-delay: 0ms; background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_FE725A0E3F33EF7E/bg_cloud4_intro.png") no-repeat; }

.intro .cloud_wrap ._c5 { top: 20px; left: -300px; width: 933px; height: 1042px; transform: translate(284.1px, 0); transition-delay: 200ms; background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_FE725A0E3F33EF7E/bg_cloud5_intro.png") no-repeat; }

.intro .cloud_wrap ._c6 { top: 655px; left: -441px; width: 900px; height: 622px; transform: translate(378.6px, 0); transition-delay: 350ms; background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_FE725A0E3F33EF7E/bg_cloud6_intro.png") no-repeat; }

.intro .cloud_wrap ._c7 { top: -44px; left: -78px; width: 444px; height: 372px; transform: translate(297.6px, 0); transition-delay: 150ms; background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_FE725A0E3F33EF7E/bg_cloud7_intro.png") no-repeat; }

.intro .bg_flame { position: absolute; top: -213px; left: -319px; width: 1958px; height: 1949px; background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_FE725A0E3F33EF7E/bg_flame_intro.png") no-repeat; transform: scale(0.5); transition: opacity 500ms linear, transform 2s cubic-bezier(0, 1, 0.3, 1); }

.intro canvas { position: absolute; top: 0; left: 50%; margin-left: -960px; }

.intro.load .title_wrap div span, .intro.load .dragon, .intro.load .bg_flame { opacity: 1; }

.intro.load .title_wrap .headline span { transform: translate(0, 0) scale(1); }

.intro.load .cloud_wrap span { transform: translate(0, 0); }

.intro.load .dragon { transform: translateY(0); }

.intro.load .bg_flame { transform: scale(1); }

.intro.load .subtxt span { transform: scale(1); }

.content1 { height: 1986px; z-index: 1; }

.content1 .dragon_wrap { top: -546px; }

.content1 .dragon_wrap div { opacity: 0; transform: translateY(200px); transition: opacity 300ms linear, transform 2s ease; }

.content1 .dragon_wrap span { top: 0; left: 0; width: 100%; height: 100%; background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_FE725A0E3F33EF7E/spr_dragon_content.png") no-repeat; }

.content1 .dragon_wrap ._d1 { top: 24px; left: -505px; width: 543px; height: 2040px; }

.content1 .dragon_wrap ._d1 span { background-position: 0px 0; transform-origin: 0 100%; }

.content1 .dragon_wrap ._d2 { top: 0px; left: 1229px; width: 473px; height: 2107px; }

.content1 .dragon_wrap ._d2 span { background-position: -722px 0; transform-origin: 100% 100%; }

.content1 .dragon_wrap.active div { opacity: 1; transform: translateY(0); }

.content1 .dragon_wrap.active span { animation: vibrate 80ms 25 linear; }

.content1 .content_wrap span { background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_FE725A0E3F33EF7E/spr_txt_content1.png") no-repeat; }

.content1 .content_wrap .h3 { top: 0; height: 83px; }

.content1 .content_wrap .list span { transform: translateY(50px); }

.content1 .content_wrap .deco._d1 { background-position: 50% -433px; }

.content1 .content_wrap .deco._d2 { background-position: 50% -514px; }

.content1 .content_wrap.active .list span { transform: translateY(0); transition: opacity 300ms linear, transform 600ms ease; }

.content1 ._cnt1 { top: 53px; }

.content1 ._cnt1 .h3 { left: 332px; width: 614px; }

.content1 ._cnt1 .h3 ._t1 { left: 0px; width: 150px; background-position: 0px 0; }

.content1 ._cnt1 .h3 ._t2 { left: 156px; width: 147px; background-position: -156px 0; }

.content1 ._cnt1 .h3 ._t3 { left: 315px; width: 146px; background-position: -315px 0; }

.content1 ._cnt1 .h3 ._t4 { left: 470px; width: 144px; background-position: -470px 0; }

.content1 ._cnt1 .list span { top: 149px; width: 378px; height: 269px; }

.content1 ._cnt1 .list ._l1 { left: 51px; background-position: 0px -139px; }

.content1 ._cnt1.active .list ._l1 { transition-delay: 550ms; }

.content1 ._cnt1 .list ._l2 { left: 449px; background-position: -398px -139px; }

.content1 ._cnt1.active .list ._l2 { transition-delay: 650ms; }

.content1 ._cnt1 .list ._l3 { left: 847px; background-position: -796px -139px; }

.content1 ._cnt1.active .list ._l3 { transition-delay: 750ms; }

.content1 ._cnt1 .deco._d1 { top: 91px; }

.content1 ._cnt1.active .deco._d1 { transition-delay: 390ms; }

.content1 ._cnt1 .deco._d2 { top: 430px; }

.content1 ._cnt1.active .deco._d2 { transition-delay: 1000ms; }

.content1 .stair { position: absolute; top: 791px; left: -320px; width: 1732px; height: 1026px; background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_FE725A0E3F33EF7E/bg_stair_content1.png") no-repeat; }

.content1 ._cnt2 { top: 640px; }

.content1 ._cnt2 .h3 { left: 403px; width: 476px; }

.content1 ._cnt2 .h3 ._t1 { left: 0px; width: 153px; background-position: -768px 0; }

.content1 ._cnt2 .h3 ._t2 { left: 162px; width: 148px; background-position: -930px 0; }

.content1 ._cnt2 .h3 ._t3 { left: 322px; width: 154px; background-position: -1090px 0; }

.content1 ._cnt2 ._d1 { top: 77px; }

.content1 ._cnt2.active ._d1 { transition-delay: 310ms; }

.content1 ._cnt2 .list ._l1 { top: 291px; left: 47px; width: 420px; height: 357px; background-position: -1px -650px; }

.content1 ._cnt2.active .list ._l1 { transition-delay: 460ms; }

.content1 ._cnt2 .list ._l2 { top: 141px; left: 430px; width: 792px; height: 420px; background-position: -453px -587px; }

.content1 ._cnt2.active .list ._l2 { transition-delay: 560ms; }

.content1 ._cnt2 .list ._l3 { top: 523px; left: 97px; width: 383px; height: 334px; background-position: -1px -1121px; }

.content1 ._cnt2.active .list ._l3 { transition-delay: 660ms; }

.content1 ._cnt2 .list ._l4 { top: 442px; left: 436px; width: 792px; height: 412px; background-position: -447px -1052px; }

.content1 ._cnt2.active .list ._l4 { transition-delay: 760ms; }

.content1 ._cnt2 .list ._l5 { top: 792px; left: 64px; width: 398px; height: 319px; background-position: 0px -1528px; }

.content1 ._cnt2.active .list ._l5 { transition-delay: 860ms; }

.content1 ._cnt2 .list ._l6 { top: 792px; left: 438px; width: 399px; height: 320px; background-position: -423px -1528px; }

.content1 ._cnt2.active .list ._l6 { transition-delay: 960ms; }

.content1 ._cnt2 .list ._l7 { top: 792px; left: 814px; width: 397px; height: 334px; background-position: -847px -1528px; }

.content1 ._cnt2.active .list ._l7 { transition-delay: 1060ms; }

.content2 { height: 2424px; }

.content2 .bg_object { position: absolute; top: 0; left: 50%; width: 1280px; margin-left: -640px; }

.content2 .bg_object div, .content2 .bg_object span { position: absolute; }

.content2 .star_wrap span { top: -627px; left: -354px; width: 2293px; height: 481px; background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_FE725A0E3F33EF7E/spr_star_content2.png") no-repeat; }

.content2 .star_wrap ._s1 { background-position: 0 0px; animation: twinkle1 600ms linear alternate infinite; }

.content2 .star_wrap ._s2 { background-position: 0 -481px; animation: twinkle2 500ms linear alternate infinite; }

.content2 .star_wrap ._s3 { background-position: 0 -962px; animation: twinkle1 300ms linear alternate infinite; }

.content2 .star_wrap ._s4 { background-position: 0 -1443px; animation: twinkle2 200ms linear alternate infinite; }

.content2 .star_wrap ._s5 { background-position: 0 -1924px; animation: twinkle1 400ms linear alternate infinite; }

.content2 .star_wrap ._s6 { background-position: 0 -2405px; animation: twinkle2 100ms linear alternate infinite; }

.content2 #canvasFire, .content2 .plane { position: absolute; top: -400px; left: 50%; width: 1920px; height: 602px; margin-left: -960px; }

.content2.webgl .plane img { display: none; }

.content2 .fire_wrap { display: none; }

.content2 .fire_wrap span { background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_FE725A0E3F33EF7E/spr_fire_content2.png") no-repeat; transform-origin: 50% 100%; }

.content2 .fire_wrap .fire { top: 0; left: 0; width: 100%; height: 100%; }

.content2 .fire_wrap ._f1 { top: 63px; left: -197px; width: 85px; height: 84px; }

.content2 .fire_wrap ._f1 .fire { background-position: 0px 0; }

.content2 .fire_wrap ._f1 .smoke { top: -296px; left: 1px; width: 223px; height: 363px; background-position: 0px -150px; }

.content2 .fire_wrap ._f2 { top: 42px; left: 144px; width: 71px; height: 96px; }

.content2 .fire_wrap ._f2 .fire { background-position: -111px 0; }

.content2 .fire_wrap ._f2 .smoke { top: -281px; left: -17px; width: 266px; height: 363px; background-position: -273px -150px; }

.content2 .fire_wrap ._f3 { top: 81px; left: 260px; width: 64px; height: 68px; }

.content2 .fire_wrap ._f3 .fire { background-position: -273px 0; }

.content2 .fire_wrap ._f3 .smoke { top: -252px; left: -5px; width: 279px; height: 317px; background-position: -592px -150px; }

.content2 .fire_wrap ._f4 { top: 22px; left: 324px; width: 81px; height: 98px; }

.content2 .fire_wrap ._f4 .fire { background-position: -395px 0; }

.content2 .fire_wrap ._f4 .smoke { top: 0px; left: 0px; width: 0px; height: 0px; background-position: 0px -150px; }

.content2 .fire_wrap ._f5 { top: -7px; left: 940px; width: 107px; height: 110px; }

.content2 .fire_wrap ._f5 .fire { background-position: -539px 0; }

.content2 .fire_wrap ._f5 .smoke { top: -50px; left: 9px; width: 154px; height: 151px; background-position: -944px -150px; }

.content2 .fire_wrap ._f6 { top: -71px; left: 1197px; width: 84px; height: 105px; }

.content2 .fire_wrap ._f6 .fire { background-position: -733px 0; }

.content2 .fire_wrap ._f6 .smoke { top: -338px; left: -30px; width: 308px; height: 443px; background-position: -1112px -150px; }

.content2 .fire_wrap ._f7 { top: -8px; left: 1506px; width: 397px; height: 397px; }

.content2 .fire_wrap ._f7 .fire { background-position: -879px 0; }

.content2 .fire_wrap ._f7 .smoke { top: 0px; left: 0px; width: 0px; height: 0px; background-position: 0px -150px; }

.content2 .bg_section { position: absolute; top: 0; left: 0; width: 99.99%; height: 2581px; padding-left: 0.01%; background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_FE725A0E3F33EF7E/bg_content2.png") center top no-repeat; top: -157px; }

.content2 .object_wrap span, .content2 .object_wrap a { background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_FE725A0E3F33EF7E/spr_txt_content2.png") no-repeat; }

.content2 .object_wrap .deco._d1 { background-position: 50% -215px; }

.content2 .object_wrap .deco._d2 { background-position: 50% -296px; }

.content2 ._cnt1 { top: 53px; }

.content2 ._cnt1 .h3 { top: 0; left: 325px; width: 628px; height: 128px; }

.content2 ._cnt1 .h3 ._t1 { left: 0px; width: 361px; background-position: 0px 0; }

.content2 ._cnt1 .h3 ._t2 { left: 384px; width: 244px; background-position: -384px 0; }

.content2 ._cnt1 .subtxt { top: 142px; left: 502px; width: 276px; height: 27px; background-position: 0 -146px; transform: scale(2); }

.content2 ._cnt1 .date { top: 279px; left: 522px; width: 231px; height: 26px; background-position: -655px 0; }

.content2 ._cnt1 .deco._d1 { top: 202px; }

.content2 ._cnt1.active .deco._d1 { transition-delay: 480ms; }

.content2 ._cnt1 .deco._d2 { top: 526px; }

.content2 ._cnt1.active .deco._d2 { transition-delay: 1250ms; }

.content2 ._cnt1 .calendar { top: 320px; }

.content2 ._cnt1 .calendar span { width: 160px; height: 169px; transform: translateY(50px); }

.content2 ._cnt1 .calendar ._c1 { left: 53px; background-position: -1px -366px; }

.content2 ._cnt1.active .calendar ._c1 { transition-delay: 630ms; }

.content2 ._cnt1 .calendar ._c2 { left: 222px; background-position: -170px -366px; }

.content2 ._cnt1.active .calendar ._c2 { transition-delay: 710ms; }

.content2 ._cnt1 .calendar ._c3 { left: 391px; background-position: -339px -366px; }

.content2 ._cnt1.active .calendar ._c3 { transition-delay: 790ms; }

.content2 ._cnt1 .calendar ._c4 { left: 560px; background-position: -508px -366px; }

.content2 ._cnt1.active .calendar ._c4 { transition-delay: 870ms; }

.content2 ._cnt1 .calendar ._c5 { left: 729px; background-position: -677px -366px; }

.content2 ._cnt1.active .calendar ._c5 { transition-delay: 950ms; }

.content2 ._cnt1 .calendar ._c6 { left: 898px; background-position: -846px -366px; }

.content2 ._cnt1.active .calendar ._c6 { transition-delay: 1030ms; }

.content2 ._cnt1 .calendar ._c7 { left: 1067px; background-position: -1015px -366px; }

.content2 ._cnt1.active .calendar ._c7 { transition-delay: 1110ms; }

.content2 ._cnt1.active .subtxt { transform: scale(1); transition: opacity 300ms linear, transform 300ms ease; transition-delay: 280ms; }

.content2 ._cnt1.active .calendar span { transform: translateY(0); transition: opacity 300ms linear, transform 600ms ease; }

.content2 ._cnt1.active .date { transition: opacity 300ms linear; transition-delay: 550ms; }

.content2 ._cnt2 { top: 709px; }

.content2 ._cnt2 .h3 { top: 0px; left: 495px; width: 292px; height: 82px; }

.content2 ._cnt2 .h3 ._t1 { left: 0px; width: 150px; background-position: -655px -46px; }

.content2 ._cnt2 .h3 ._t2 { left: 143px; width: 149px; background-position: -843px -46px; }

.content2 ._cnt2 .txt { top: 163px; left: 70px; width: 1160px; height: 1116px; background-position: 0 -580px; transform: translateY(30px); }

.content2 ._cnt2 .deco._d1 { top: 82px; }

.content2 ._cnt2.active .deco._d1 { transition-delay: 230ms; }

.content2 ._cnt2 .deco._d2 { top: 1309px; }

.content2 ._cnt2.active .deco._d2 { transition-delay: 630ms; }

.content2 ._cnt2.active .txt { transform: translateY(0); transition: opacity 300ms linear, transform 600ms ease; transition-delay: 480ms; }

.content2 .btn_wrap { top: 2071px; }

.content2 .btn_wrap a { position: absolute; top: 0; width: 580px; height: 158px; display: block; text-indent: -99999px; overflow: hidden; transform: translateY(50px); opacity: 0; }

.content2 .btn_wrap .btn1 { left: 54px; background-position: 0px -1830px; }

.content2 .btn_wrap .btn1:hover { background-position: 0px -2033px; }

.content2 .btn_wrap.active .btn1 { transition-delay: 0ms; }

.content2 .btn_wrap .btn2 { left: 647px; background-position: -638px -1830px; }

.content2 .btn_wrap .btn2:hover { background-position: -638px -2033px; }

.content2 .btn_wrap.active .btn2 { transition-delay: 100ms; }

.content2 .btn_wrap.active a { transform: translateY(0); transition: opacity 300ms linear, transform 800ms ease; opacity: 1; }

.content2 .copyright { position: absolute; top: 2358px; left: 485px; width: 311px; height: 13px; display: block; text-indent: -99999px; overflow: hidden; background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_FE725A0E3F33EF7E/copyright.png") no-repeat; }

#quick { display: none; position: fixed; top: 50%; right: 0; z-index: 100; width: 167px; height: 150px; margin-top: -75px; }

#quick, #quick a { background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_FE725A0E3F33EF7E/spr_quick.png") no-repeat; }

#quick a { display: block; text-indent: -99999px; overflow: hidden; }

#quick ul { padding: 17px 0 0 42px; }

#quick li a { width: 128px; height: 28px; }

#quick li.qu1 { margin-bottom: 12px; }

#quick li.qu1 a { background-position: -224px -17px; }

#quick li.qu1.on a, #quick li.qu1 a:hover { background-position: -384px -17px; }

#quick li.qu2 a { background-position: -224px -57px; }

#quick li.qu2.on a, #quick li.qu2 a:hover { background-position: -384px -57px; }

#quick .btn_top { position: absolute; left: 0; bottom: 0; width: 100%; height: 50px; background-position: -353px -100px; }

@keyframes vibrate { 0% { transform: rotate(0deg); }
  25% { transform: rotate(-0.02deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(0.02deg); }
  100% { transform: rotate(0deg); } }

@keyframes twinkle1 { from { opacity: 1; }
  to { opacity: 0; } }

@keyframes twinkle2 { from { opacity: 0; }
  to { opacity: 1; } }