@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,object,video,iframe{margin:0;padding:0}
header,article,aside,details,figcaption,figure,footer,hgroup,menu,nav,section{display:block;margin:0;padding:0;vertical-align:baseline}
body{position:relative;width:100%;font-family:'맑은 고딕','Malgun gothic','돋움','dotum',sans-serif;font-size:15px;color:#1f2f5f;line-height:1;background:#000}
input,textarea,button,select{font-size:inherit;font-family:'맑은 고딕','Malgun gothic','돋움','dotum',sans-serif;font-family:inherit}
img,fieldset,button{border:0}
table{border-collapse:collapse;border-spacing:0}
ul,ol{list-style:none}
em,address{font-style:normal}
a,a:link{text-decoration:none;color:#000}
a,a:link, a:active{background-color:transparent}
a,img{vertical-align:top}
hr{display:none}
legend, .blind{overflow:hidden;visibility:hidden;position:absolute;top:0;left:0;width:0;height:0;font-size:0;line-height:0}
.ir{text-indent:-9999px;overflow:hidden}
input, button, textarea{outline:0}
button{border:0;cursor:pointer}

/* layout */
#wrap{position:relative;width:100%;min-width:1280px;max-width:1920px;overflow:hidden;margin:0 auto}
#wrap.load{min-height:800px}
#wrap .section{position:relative;width:100%}
.section .container{position:relative;width:1280px;height:100%;margin:0 auto;padding-right:1px}
.bg_section{position:absolute;top:0;left:0;width:99.99%;padding-left:0.01%}

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

/* common */
.gnbWrapper{min-width:1280px !important}
.section .object_wrap, .section .object_wrap div, .section .object_wrap span{position:absolute}
.section .object_wrap{left:0;width:100%}

/* header */
#header button span, #header a span{display:block;background:url("https://ssl.nexon.com/s2/game/baram/2020/event/0122_intro_A17575FCB344E245/spr_header.png") no-repeat;text-indent:-99999px;overflow:hidden}
#header{position:absolute;top:0;left:0;width:100%;z-index:100}
#header .util{position:absolute;top:20px;right:20px}
#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 li{margin-left:10px}
#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 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 h1 a, #lnb li a .txt, #lnb li a .thumb, #lnb .btn_toggle span, #lnb .nav .deco{display:block;background:url("https://ssl.nexon.com/s2/game/baram/2020/event/0122_intro_A17575FCB344E245/spr_lnb_24D69AFDEC7921AC.png") no-repeat;text-indent:-99999px;overflow:hidden}
#lnb{position:absolute;top:0;left:0;bottom:0;width:180px;background:#000;background-color:rgba(0,0,0,0.7);z-index:100;transition:left 400ms ease}
#lnb.hide{left:-140px}
#lnb .lnb_wrap{position:relative;height:100%;margin-right:-30px}
#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:#000;padding-bottom:30px}
#lnb li.disabled{background:none}
#lnb .nav1{padding-top:30px}
#lnb .nav3{margin-bottom:30px}
#lnb li a{position:relative;display:block;height:60px}
#lnb li a .txt, #lnb li a .thumb{position:absolute;top:0;height:100%}
#lnb li a .txt{left:12px;width:97px}
#lnb .nav1 .txt{background-position:0 -177px}
#lnb .nav2 .txt{background-position:0 -267px}
#lnb .nav3 .txt{background-position:0 -357px}
#lnb .nav4 .txt{background-position:0 -457px}
#lnb .nav5 .txt{background-position:0 -547px}
#lnb .nav6 .txt{background-position:0 -637px}
#lnb .nav1 a:hover .txt, #lnb .nav1.on a .txt{background-position:-162px -177px}
#lnb .nav2 a:hover .txt, #lnb .nav2.on a .txt{background-position:-162px -267px}
#lnb .nav3 a:hover .txt, #lnb .nav3.on a .txt{background-position:-162px -357px}
#lnb .nav4 a:hover .txt, #lnb .nav4.on a .txt{background-position:-162px -457px}
#lnb .nav5 a:hover .txt, #lnb .nav5.on a .txt{background-position:-162px -547px}
#lnb .nav6 a:hover .txt, #lnb .nav6.on a .txt{background-position:-162px -637px}
#lnb li a .thumb{right:10px;width:60px;height:60px;transition:right 300ms ease}
#lnb .nav1 .thumb{background-position:-300px -177px}
#lnb .nav2 .thumb{background-position:-300px -267px}
#lnb .nav3 .thumb{background-position:-300px -357px}
#lnb .nav4 .thumb{background-position:-300px -457px}
#lnb .nav5 .thumb{background-position:-300px -547px}
#lnb .nav6 .thumb{background-position:-300px -637px}
#lnb li a:hover .thumb, #lnb .on a .thumb{right:-30px}
#lnb li a .thumb span{position:absolute}
#lnb li a .thumb .border{display:none;top:0;left:0;bottom:0;right:0;border:1px solid #fff}
#lnb li a:hover .thumb .border, #lnb .on a .thumb .border{display:block}
#lnb li .thumb .rhombus, #lnb li .thumb .plus{transition:transform 200ms ease}
#lnb li a:hover .thumb .rhombus{transition-delay:100ms}
#lnb li a:hover .thumb .plus{transition-delay:200ms}
#lnb li .thumb .rhombus{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 a:hover .thumb .rhombus{transform:rotate(45deg) scale(1)}
#lnb li .thumb .plus{background:#fff}
#lnb li .thumb .v{top:26px;left:30px;width:1px;height:9px;transform:scale(1, 0)}
#lnb li .thumb .h{top:30px;left:26px;width:9px;height:1px;transform:scale(0, 1)}
#lnb li a:hover .thumb .plus{transform:scale(1,1)}
#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 .btn_toggle span{background-position:-113px -85px}
#lnb.hide .btn_toggle:hover span{background-position:-200px -85px}
.fixed #lnb{position:fixed}
#lnb #mCSB_1_scrollbar_vertical{right:27px !important}

/* motion common */
.parallax span{opacity:0}
.parallax.active span{opacity:1}
.object_wrap.active .list .txt, .object_wrap.active .list .bg{transition:opacity 300ms linear}
.object_wrap .list .shape{transform:scale(0)}
.object_wrap .list .deco{width:0}
.object_wrap.active .list .deco{transition:all 200ms ease}
.object_wrap.active .list .shape{transform:scale(1);transition:transform 300ms ease}
.content_wrap.active .item{transform:translate(0, 0) !important;transition:opacity 300ms linear, transform 500ms ease}
.object_wrap .list svg{position:absolute;opacity:0}
.object_wrap.active .list svg{position:absolute;opacity:1;-ms-transition:opacity 300ms linear}
.object_wrap.active .list._l2 svg path{transition-delay:100ms !important}
.object_wrap.active .list._l3 svg path{transition-delay:200ms !important}
.object_wrap.active .list._l4 svg path{transition-delay:300ms !important}
.object_wrap.active .list._l1 .shape{transition-delay:150ms}
.object_wrap.active .list._l2 .shape{transition-delay:250ms}
.object_wrap.active .list._l3 .shape{transition-delay:350ms}
.object_wrap.active .list._l4 .shape{transition-delay:450ms}
.object_wrap.active .list._l1 .txt, .object_wrap.active .list._l1 .bg{transition-delay:280ms}
.object_wrap.active .list._l2 .txt, .object_wrap.active .list._l2 .bg{transition-delay:380ms}
.object_wrap.active .list._l3 .txt, .object_wrap.active .list._l3 .bg{transition-delay:480ms}
.object_wrap.active .list._l4 .txt, .object_wrap.active .list._l4 .bg{transition-delay:580ms}

/* intro */
.intro{height:2385px}
.intro .bg_wrap{position:absolute;top:0;left:0;width:100%;height:100%}
.intro .bg_wrap .bg_obj{position:absolute;left:50%}
.intro .bg_wrap .sky{height:1346px;background:url("https://ssl.nexon.com/s2/game/baram/2020/event/0122_intro_A17575FCB344E245/bg_sky_intro.jpg") center top no-repeat}
.intro .bg_wrap .monster, .intro .bg_wrap .ssno, .intro .title_wrap span{opacity:0}
.intro.load .bg_wrap .monster, .intro.load .bg_wrap .ssno, .intro.load .title_wrap span{opacity:1}
.intro .bg_wrap .monster{background:url("https://ssl.nexon.com/s2/game/baram/2020/event/0122_intro_A17575FCB344E245/spr_monster_intro.png") center top no-repeat;transition:opacity 300ms linear, transform 2s cubic-bezier(0, 1, 0.9, 1)}
.intro .bg_wrap ._m1{top:144px;width:1148px;height:1326px;background-position:-1px -144px;margin-left:-960px;transform:translate(-200px, 200px)}
.intro .bg_wrap ._m2{top:0;width:408px;height:1443px;background-position:-1513px 0;margin-left:553px;transform:translate(200px, -200px);transition-delay:150ms}
.intro .bg_wrap ._m3{top:422px;width:842px;height:954px;background-position:0 -1469px;margin-left:-960px;transform:translate(-200px, -200px);transition-delay:450ms}
.intro .bg_wrap ._m4{top:533px;width:808px;height:1179px;background-position:-1112px -1580px;margin-left:151px;transform:translate(200px, 200px);transition-delay:300ms}
.intro .bg_wrap .ssno{top:-150px;width:1270px;height:1345px;margin-left:-252px;transform:translate(0, 200px);transition:opacity 300ms linear, transform 2s ease-out;transition-delay:600ms}
.intro .bg_wrap .ssno span{position:absolute;top:0;left:0;width:100%;height:100%;background:url("https://ssl.nexon.com/s2/game/baram/2020/event/0122_intro_A17575FCB344E245/bg_ssno_intro.png") 0 0 no-repeat;transform-origin:50% 100%}
.intro.load .bg_wrap .monster, .intro.load .bg_wrap .ssno{transform:translate(0, 0)}
.intro.load .bg_wrap .ssno span{animation:vibrate1 80ms 25 linear;animation-delay:600ms}
.intro .bg_wrap .ocean{top:528px;height:2163px;background:url("https://ssl.nexon.com/s2/game/baram/2020/event/0122_intro_A17575FCB344E245/bg_ocean_intro.png") center top no-repeat}
.intro .bg_wrap .wave{top:591px;left:50%;width:1920px;height:1638px;background:url("https://ssl.nexon.com/s2/game/baram/2020/event/0122_intro_A17575FCB344E245/bg_wave_intro.png") center top no-repeat;margin-left:-960px;transform-origin:50% 100%;animation:waveMotion 5s infinite ease-in}
.intro .bg_wrap .ship{top:528px;width:1710px;height:1377px;background:url("https://ssl.nexon.com/s2/game/baram/2020/event/0122_intro_A17575FCB344E245/bg_ship_intro.png") center top no-repeat;margin-left:-960px;animation:shipMotion 8s infinite alternate ease-out}
.intro .bg_wrap .water{top:32px;width:1086px;height:1144px;background:url("https://ssl.nexon.com/s2/game/baram/2020/event/0122_intro_A17575FCB344E245/bg_water_intro.png") no-repeat;margin-left:-191px}
.intro .bg_wrap .fog{background:url("https://ssl.nexon.com/s2/game/baram/2020/event/0122_intro_A17575FCB344E245/spr_fog_intro.png") no-repeat}
.intro .bg_wrap ._f1{top:-303px;width:896px;height:1547px;margin-left:-998px;animation:fog1Motion 25s infinite linear}
.intro .bg_wrap ._f2{opacity:0;top:174px;width:1382px;height:1273px;background-position:-1115px -587px;margin-left:-301px;animation:fog2Motion 10s 5s infinite linear}
.intro .bg_wrap .rain{width:1920px;left:50%;height:2385px;margin-left:-960px;-ms-animation:rainyMS 3s infinite linear}
.intro .bg_wrap ._r1{top:0;background:url("https://ssl.nexon.com/s2/game/baram/2020/event/0122_intro_A17575FCB344E245/bg_rain1_intro.png") repeat;-webkit-animation:rainyWebkit 3s infinite linear}
.intro .bg_wrap ._r2{top:-2385px}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
    .intro .bg_wrap .rain{background:url("https://ssl.nexon.com/s2/game/baram/2020/event/0122_intro_A17575FCB344E245/bg_rain_full_intro.png") no-repeat}
}
.intro .title_wrap span, .intro .list_wrap span{background:url("https://ssl.nexon.com/s2/game/baram/2020/event/0122_intro_A17575FCB344E245/spr_title_intro.png") no-repeat}
.intro .title_wrap .bi{top:15px;left:522px;width:236px;height:167px}
.intro .title_wrap .shape{top:115px;left:79px;width:259px;height:244px;transform:scale(0);transition:transform 100ms ease;transition-delay:700ms}
.intro .title_wrap .shape span{width:214px;height:214px;transition:transform 150ms ease}
.intro .title_wrap .shape ._s1{top:0;left:0;background-position:-281px 0;transform:translate(5px, -2px);transition-delay:950ms}
.intro .title_wrap .shape ._s2{bottom:0;right:0;background-position:-572px 0;transform:translate(-5px, 3px);transition-delay:950ms}
.intro.load .title_wrap .shape{transform:scale(1)}
.intro.load .title_wrap .shape span{transform:translate(0, 0)}
.intro .title_wrap .ja{top:176px;left:140px;width:140px;height:267px;transform:perspective(150px);-ms-perspective:150px;transform-style:preserve-3d}
.intro .title_wrap .ja span{transition:all 150ms ease}
.intro .title_wrap .ja ._t1{top:0;left:8px;width:121px;height:133px;background-position:0 -230px;transform:translate3d(0, -80px, 100px);transition-delay:1100ms}
.intro .title_wrap .ja ._t2{top:132px;left:0;width:140px;height:135px;background-position:-141px -230px;transform:translate3d(0, 80px, 100px);transition-delay:1200ms}
.intro .title_wrap .update{top:450px;left:195px;width:23px;height:0;background-position:0 -427px;transition:opacity 300ms ease, height 500ms ease;transition-delay:2200ms}
.intro.load .title_wrap .update{height:371px}
.intro .title_wrap .headline{top:299px;left:312px;width:229px;height:522px;transform:perspective(150px);-ms-perspective:150px;transform-style:preserve-3d}
.intro .title_wrap .headline span{transition:all 200ms ease}
.intro .title_wrap .headline ._t1{top:0;left:0;width:176px;height:199px;background-position:-105px -378px;transform:translate3d(-70px, 50px, 80px);transition-delay:1400ms}
.intro .title_wrap .headline ._t2{top:134px;left:61px;width:168px;height:210px;background-position:-327px -345px;transform:translate3d(70px, -50px, 80px);transition-delay:1500ms}
.intro .title_wrap .headline ._t3{top:313px;left:0;width:173px;height:209px;background-position:-541px -322px;transform:translate3d(-70px, 50px, 80px);transition-delay:1600ms}
.intro.load .title_wrap .headline span, .intro.load .title_wrap .ja span{transform:translate3d(0, 0, 0)}
.intro .title_wrap .description{top:692px;left:570px;width:600px;height:89px;background-position:-105px -620px}
.intro.load .title_wrap .description{transition:opacity 300ms linear;transition-delay:1900ms}
.intro .list_wrap{top:988px}
.intro .list_wrap .list{top:0;width:297px;height:297px;border-radius:100%}
.intro .list_wrap .list .bg{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(138,206,202,0.1);border-radius:100%}
.intro .list_wrap .list._l1{left:31px}
.intro .list_wrap .list._l2{left:338px}
.intro .list_wrap .list._l3{left:645px}
.intro .list_wrap .list._l4{left:952px}
.intro .list_wrap .list .deco{top:142px;height:19px}
.intro .list_wrap.active .list .deco{width:66px}
.intro .list_wrap.active .list._l1 .deco{transition-delay:400ms}
.intro .list_wrap.active .list._l2 .deco{transition-delay:500ms}
.intro .list_wrap.active .list._l3 .deco{transition-delay:600ms}
.intro .list_wrap.active .list._l4 .deco{transition-delay:700ms}
.intro .list_wrap .list ._d1{left:3px;background-position:-1020px 0}
.intro .list_wrap .list ._d2{right:3px;background-position:100% 0}
.intro .list_wrap .list .svg{position:absolute;top:50%;left:50%;width:400px;height:400px;transform:rotate(45deg);margin:-200px 0 0 -200px}
.intro .list_wrap .list .svg path{stroke-dasharray:500;stroke-dashoffset:500}
.intro .list_wrap.active .list .svg path{stroke-dasharray:500;stroke-dashoffset:0;transition:all 700ms ease}
.intro .list_wrap .list .svg ._s1{top:0;left:0}
.intro .list_wrap .list .svg ._s2{top:0;right:0;transform:rotate(180deg)}
.intro .list_wrap .list .txt{top:55px;height:202px}
.intro .list_wrap .list._l1 .txt{left:54px;width:195px;background-position:-344px -999px}
.intro .list_wrap .list._l2 .txt{left:80px;width:141px;background-position:-600px -999px}
.intro .list_wrap .list._l3 .txt{left:100px;width:99px;background-position:-824px -999px}
.intro .list_wrap .list._l4 .txt{left:52px;width:202px;background-position:-998px -999px}
.intro .list_wrap .list .shape{top:29px;left:105px;width:94px;height:94px;background:rgba(11,27,36,0.8);border-radius:100%}
.intro .content_wrap span{background:url("https://ssl.nexon.com/s2/game/baram/2020/event/0122_intro_A17575FCB344E245/spr_cnt_intro.png") no-repeat}
.intro .content_wrap{top:1432px}
.intro .content_wrap .shape{top:-27px;width:206px;height:194px;left:545px;transform:scale(0)}
.intro .content_wrap .shape span{width:169px;height:169px}
.intro .content_wrap .shape ._s1{top:0;left:0;background-position:0 -146px;transform:translate(4px, -2px)}
.intro .content_wrap .shape ._s2{bottom:0;right:0;background-position:-226px -146px;transform:translate(-5px, 1px)}
.intro .content_wrap.active .shape{transform:scale(1);transition:transform 100ms ease}
.intro .content_wrap .headline{top:0;left:325px;width:708px;height:146px;transform:perspective(150px);-ms-perspective:150px;transform-style:preserve-3d}
.intro .content_wrap .headline ._t1{top:0;left:290px;width:61px;height:39px;background-position:-457px -151px;transform:translate3d(0, 0, 100px)}
.intro .content_wrap .headline ._t2{top:35px;left:0;width:145px;height:78px;transform:translate3d(-30px, -30px, 80px)}
.intro .content_wrap .headline ._t3{top:46px;left:129px;width:152px;height:102px;background-position:-159px 0;transform:translate3d(-30px, 30px, 80px)}
.intro .content_wrap .headline ._t4{top:35px;left:369px;width:137px;height:99px;background-position:-351px 0;transform:translate3d(-30px, -30px, 80px)}
.intro .content_wrap .headline ._t5{top:36px;left:489px;width:224px;height:115px;background-position:-520px 0;transform:translate3d(-30px, 30px, 80px)}
.intro .content_wrap .headline .amp{top:38px;left:297px;width:61px;height:65px;opacity:0;transform:translate3d(0, 0, 100px)}
.intro .content_wrap.active .headline .amp{opacity:1}
.intro .content_wrap .headline .amp ._a1{top:0;left:0;width:43px;height:57px;background-position:-464px -198px;transform:translate(0, 2px)}
.intro .content_wrap .headline .amp ._a2{bottom:0;right:0;width:61px;height:47px;background-position:-533px -216px;transform:translate(0, -1px)}
.intro .content_wrap.active .headline .txt{transform:translate3d(0, 0, 0);transition:all 150ms ease}
.intro .content_wrap.active .headline .amp{transition-delay:260ms}
.intro .content_wrap.active .headline ._t2{transition-delay:100ms}
.intro .content_wrap.active .headline ._t3{transition-delay:180ms}
.intro .content_wrap.active .headline ._t4{transition-delay:340ms}
.intro .content_wrap.active .headline ._t5{transition-delay:420ms}
.intro .content_wrap.active .shape span, .intro .content_wrap.active .headline .amp span{transform:translate(0, 0);transition:transform 150ms ease;transition-delay:570ms}
.intro .content_wrap .item{width:282px;height:282px}
.intro .content_wrap .item._i1{top:185px;left:82px;background-position:0 -358px;transform:translate(-30px, -30px)}
.intro .content_wrap .item._i2{top:185px;left:359px;background-position:-297px -358px;transform:translate(-15px, -30px)}
.intro .content_wrap .item._i3{top:185px;left:636px;background-position:-594px -358px;transform:translate(15px, -30px)}
.intro .content_wrap .item._i4{top:185px;left:913px;background-position:-918px -358px;transform:translate(30px, -30px)}
.intro .content_wrap .item._i5{top:437px;left:222px;background-position:0 -678px;transform:translate(-15px, 30px)}
.intro .content_wrap .item._i6{top:437px;left:499px;background-position:-311px -678px;transform:translate(0, 30px)}
.intro .content_wrap .item._i7{top:437px;left:776px;background-position:-603px -678px;transform:translate(15px, 30px)}
.intro .content_wrap.active .item._i1, .intro .content_wrap.active .item._i4{transition-delay:770ms}
.intro .content_wrap.active .item._i2, .intro .content_wrap.active .item._i3{transition-delay:870ms}
.intro .content_wrap.active .item._i5, .intro .content_wrap.active .item._i7{transition-delay:970ms}
.intro .content_wrap.active .item._i6{transition-delay:1070ms}

/* content1 */
.content1{height:2426px;z-index:1}
.content1 .bg_section{top:-102px;height:2740px;background:url("https://ssl.nexon.com/s2/game/baram/2020/event/0122_intro_A17575FCB344E245/bg_content1.png") center top no-repeat}
.content1 .cnt1{top:0}
.content1 .content_wrap span{background:url("https://ssl.nexon.com/s2/game/baram/2020/event/0122_intro_A17575FCB344E245/spr_cnt_content1.png") no-repeat}
.content1 .content_wrap .headline{transform:perspective(150px);-ms-perspective:150px;transform-style:preserve-3d}
.content1 .content_wrap.active .headline span{transform:translate3d(0, 0, 0)}
.content1 .cnt1 .chandelier{top:0}
.content1 .chandelier div{top:0;width:159px;height:0;opacity:0}
.content1 .chandelier .shape{bottom:-240px;left:0;width:100%;height:234px}
.content1 .chandelier .line{top:0;left:50%;width:4px;height:100%;background:#b21918;border-radius:0 0 4px 4px;margin-left:-2px}
.content1 .chandelier ._c1{top:-29px;left:-175px}
.content1 .chandelier ._c2{top:0;left:1271px}
.content1 .chandelier ._c3{top:-72px;left:1406px}
.content1 .cnt1.active .chandelier div{height:100%;opacity:1;transition:height 500ms ease;transition:opacity 300ms ease, height 300ms cubic-bezier(0, 0.1, 0, 1.2)}
.content1 .cnt1.active .chandelier ._c1{height:155px;transition-delay:150ms}
.content1 .cnt1.active .chandelier ._c2{height:481px;transition-delay:300ms}
.content1 .cnt1.active .chandelier ._c3{height:78px}
.content1 .char .body, .content1 .char .flame{background:url("https://ssl.nexon.com/s2/game/baram/2020/event/0122_intro_A17575FCB344E245/spr_char_content1.png") no-repeat}
.content1 .char .body{top:-375px;left:-66px;width:1145px;height:1684px;transform:translate(15px, -15px)}
.content1 .cnt1.active .char .body{transform:translate(0, 0);transition:opacity 300ms linear, transform 1s ease;transition-delay:400ms}
.content1 .char ._f1{top:120px;left:-70px;width:528px;height:585px;background-position:-1272px 0;transform:translate(50px, 50px) rotate(-10deg) scale(0.8);transform-origin:100% 100%}
.content1 .char ._f2{top:615px;left:-85px;width:340px;height:155px;background-position:-1458px -638px;transform:translate(50px, 50px) rotate(-40deg) scale(0);transform-origin:100% 100%}
.content1 .char ._f3{top:289px;left:414px;width:142px;height:217px;background-position:-1658px -906px;transform:translate(50px, 50px) rotate(-180deg) scale(0);transform-origin:100% 100%}
.content1 .char ._f4{top:305px;left:769px;width:355px;height:375px;background-position:-2104px -1166px;transform:translate(-50px, -50px) rotate(-20deg) scale(0);transform-origin:0 100%}
.content1 .char ._f5{top:687px;left:888px;width:80px;height:161px;background-position:-1874px 0;transform:translate(-20px, -50px) rotate(-90deg) scale(0);transform-origin:0 50%}
.content1 .char ._f6{top:-196px;left:376px;width:648px;height:412px;background-position:-1202px -1244px;transform:translate(-100px, 200px) rotate(-10deg) scale(0.8);transform-origin:100% 100%}
.content1 .char ._f7{top:-143px;left:1092px;width:228px;height:378px;background-position:-2123px 0;transform:translate(-50px, 50px) rotate(-90deg) scale(0);transform-origin:50% 100%}
.content1 .char ._f8{top:34px;left:1101px;width:336px;height:540px;background-position:-2123px -523px;transform:translate(-100px, 50px) rotate(45deg) scale(0.8);transform-origin:50% 100%}
.content1 .cnt1.active .char .flame{transform:translate(0, 0) rotate(0) scale(1);transition:opacity 300ms linear, transform 1s cubic-bezier(0, 1, 0.5, 1)}
.content1 .cnt1.active .char ._f1{transition-delay:500ms}
.content1 .cnt1.active .char ._f2{transition-delay:750ms}
.content1 .cnt1.active .char ._f3{transition-delay:850ms}
.content1 .cnt1.active .char ._f4{transition-delay:650ms}
.content1 .cnt1.active .char ._f5{transition-delay:500ms}
.content1 .cnt1.active .char ._f6{transition-delay:900ms}
.content1 .cnt1.active .char ._f7{transition-delay:550ms}
.content1 .cnt1.active .char ._f8{transition-delay:700ms}
.content1 .cnt1 ._h1{top:283px;left:67px;width:200px;height:380px}
.content1 .cnt1 ._h1 span{left:0;width:200px;height:200px}
.content1 .cnt1 ._h1 ._t1{top:0;background-position:-179px 0;transform:translate3d(0, -50px, 80px)}
.content1 .cnt1 ._h1 ._t2{top:180px;background-position:-179px -210px;transform:translate3d(0, 50px, 80px)}
.content1 .cnt1 ._h2{top:247px;left:927px;width:338px;height:860px}
.content1 .cnt1 ._h2 span{left:0;width:337px;height:338px}
.content1 .cnt1 ._h2 ._t1{top:0;background-position:-416px 0;transform:translate3d(0, -50px, 80px)}
.content1 .cnt1 ._h2 ._t2{top:262px;background-position:-416px -356px;transform:translate3d(0, 0, 80px)}
.content1 .cnt1 ._h2 ._t3{top:523px;background-position:-416px -712px;transform:translate3d(0, 50px, 80px)}
.content1 .cnt1.active ._h1 span{transition:all 150ms ease}
.content1 .cnt1.active ._h2 span{transition:all 200ms ease}
.content1 .cnt1.active ._h1 ._t1{transition-delay:900ms}
.content1 .cnt1.active ._h1 ._t2{transition-delay:1000ms}
.content1 .cnt1.active ._h2 ._t1{transition-delay:1200ms}
.content1 .cnt1.active ._h2 ._t2{transition-delay:1300ms}
.content1 .cnt1.active ._h2 ._t3{transition-delay:1400ms}
.content1 .cnt1 .description{top:814px;left:75px;width:461px;height:97px;background-position:-794px 0}
.content1 .cnt1.active .description{transition:opacity 300ms linear;transition-delay:1600ms}
.content1 .cnt1 .rhombus{top:278px;left:241px;width:800px;height:800px}
.content1 .cnt1 .rhombus .bg{top:0;left:0;width:100%;height:100%;transform:rotate(-45deg)}
.content1 .cnt1 .rhombus ._b3, .content1 .cnt1 .rhombus .deco{background:url("https://ssl.nexon.com/s2/game/baram/2020/event/0122_intro_A17575FCB344E245/spr_rhombus_content1.png") no-repeat}
.content1 .cnt1 .rhombus .bg span{transform:scale(0)}
.content1 .cnt1 .rhombus ._b1{top:0;left:0;width:100%;height:100%;background:#5a0a05}
.content1 .cnt1 .rhombus ._b2{top:14px;left:14px;width:773px;height:773px;background:#3e0600}
.content1 .cnt1 .rhombus ._b3{top:24px;left:24px;width:752px;height:752px}
.content1 .cnt1.active .rhombus .bg span{transform:scale(1);transition:transform 500ms ease-out}
.content1 .cnt1.active .rhombus .bg ._b1{transition-delay:100ms}
.content1 .cnt1.active .rhombus .bg ._b2{transition-delay:50ms}
.content1 .cnt1 .rhombus .edge{width:16px;height:16px;background:#871911;transform:scale(0)}
.content1 .cnt1.active .rhombus .edge{transform:scale(1);transition:transform 300ms ease;transition-delay:100ms}
.content1 .cnt1 .rhombus .edge._e1{top:-3px;left:-3px}
.content1 .cnt1 .rhombus .edge._e2{top:-3px;right:-3px}
.content1 .cnt1 .rhombus .edge._e3{bottom:-3px;left:-3px}
.content1 .cnt1 .rhombus .edge._e4{bottom:-3px;right:-3px}
.content1 .cnt1 .rhombus .deco{top:50%;left:50%;width:0;height:19px;background-position:50% -828px;margin:-10px 0 0 0}
.content1 .cnt1.active .rhombus .deco{width:1059px;margin-left:-530px;transition:all 300ms ease;transition-delay:300ms}
.content1 .cnt2{top:1268px}
.content1 .cnt2 .list{width:374px;height:374px}
.content1 .cnt2 ._l1{left:66px}
.content1 .cnt2 ._l2{left:454px}
.content1 .cnt2 ._l3{left:843px}
.content1 .cnt2 svg{top:0;left:0}
.content1 .cnt2 svg path{stroke-dasharray:1100;stroke-dashoffset:1100}
.content1 .cnt2.active svg path{stroke-dasharray:1100;stroke-dashoffset:0;transition:all 1.1s ease}
.content1 .cnt2 .edge, .content1 .cnt2 .bg{top:50%;left:50%;width:264px;height:264px;transform:rotate(45deg);margin:-132px 0 0 -132px}
.content1 .cnt2 .edge{position:absolute}
.content1 .cnt2 .edge span{width:15px;height:15px;background:#ffc04b;z-index:1;transform:scale(0)}
.content1 .cnt2 ._e1{top:-2px;left:-2px}
.content1 .cnt2 ._e2{top:-2px;right:-2px}
.content1 .cnt2 ._e3{bottom:-2px;left:-2px}
.content1 .cnt2 ._e4{bottom:-2px;right:-2px}
.content1 .cnt2.active .edge span{transform:scale(1);transition:transform 100ms ease}
.content1 .cnt2.active .edge ._e1{transition-delay:650ms}
.content1 .cnt2.active .edge ._e2{transition-delay:750ms}
.content1 .cnt2.active .edge ._e3{transition-delay:850ms}
.content1 .cnt2.active .edge ._e4{transition-delay:950ms}
.content1 .cnt2 .bg{background:rgba(255,177,62,0.3)}
.content1 .cnt2 .shape{top:56px;left:50%;width:78px;height:78px;background:#470700;transform:rotate(45deg) scale(0);margin-left:-39px}
.content1 .cnt2.active .shape{transform:rotate(45deg) scale(1)}
.content1 .cnt2 .txt{top:74px;height:218px}
.content1 .cnt2 ._l1 .txt{left:136px;width:102px;background-position:-792px -377px}
.content1 .cnt2 ._l2 .txt{left:136px;width:103px;background-position:-959px -377px}
.content1 .cnt2 ._l3 .txt{left:90px;width:193px;background-position:-1127px -377px}
.content1 .cnt2 .deco{top:180px;height:19px}
.content1 .cnt2.active .deco{width:103px}
.content1 .cnt2.active .list._l1 .deco{transition-delay:700ms}
.content1 .cnt2.active .list._l2 .deco{transition-delay:800ms}
.content1 .cnt2.active .list._l3 .deco{transition-delay:900ms}
.content1 .cnt2.active .list._l4 .deco{transition-delay:1000ms}
.content1 .cnt2 ._d1{left:0;background-position:-1217px -165px}
.content1 .cnt2 ._d2{right:0;background-position:100% -207px}
.content1 .cnt3{top:1686px}
.content1 .cnt3 .headline{top:0;left:221px;width:903px;height:252px}
.content1 .cnt3 .headline .txt{top:80px;height:80px}
.content1 .cnt3 .headline ._t1{left:0;width:121px;background-position:0 -1145px;transform:translate3d(-30px, 0, 80px)}
.content1 .cnt3 .headline ._t2{left:142px;width:140px;background-position:-142px -1145px;transform:translate3d(-30px, 0, 80px)}
.content1 .cnt3 .headline ._t3{left:549px;width:121px;background-position:-661px -1145px;transform:translate3d(30px, 0, 80px)}
.content1 .cnt3 .headline ._t4{left:694px;width:209px;background-position:-806px -1145px;transform:translate3d(30px, 0, 80px)}
.content1 .cnt3 .headline .cn{top:0;left:293px;width:253px;height:252px;background-position:-355px -1065px;transform:translate3d(0, 0, 100px)}
.content1 .cnt3.active .headline .cn{transition:all 150ms ease}
.content1 .cnt3.active .headline .txt{transition:all 300ms ease}
.content1 .cnt3.active .headline ._t1{transition-delay:150ms}
.content1 .cnt3.active .headline ._t2{transition-delay:250ms}
.content1 .cnt3.active .headline ._t3{transition-delay:350ms}
.content1 .cnt3.active .headline ._t4{transition-delay:450ms}
.content1 .cnt3 .item{width:280px;height:279px}
.content1 .cnt3 ._i1{top:202px;left:93px;background-position:0 -1361px;transform:translate(-30px, -30px)}
.content1 .cnt3 ._i2{top:341px;left:230px;background-position:-137px -1670px;transform:translate(-15px, 30px)}
.content1 .cnt3 ._i3{top:202px;left:366px;background-position:-353px -1365px;transform:translate(-15px, -30px)}
.content1 .cnt3 ._i4{top:341px;left:501px;background-position:-493px -1670px;transform:translate(0, 30px)}
.content1 .cnt3 ._i5{top:202px;left:637px;background-position:-698px -1365px;transform:translate(30px, -30px)}
.content1 .cnt3 ._i6{top:341px;left:771px;background-position:-830px -1670px;transform:translate(15px, 30px)}
.content1 .cnt3 ._i7{top:202px;left:907px;background-position:-1040px -1361px;transform:translate(30px, -30px)}
.content1 .cnt3.active ._i1, .content1 .cnt3.active ._i7{transition-delay:700ms}
.content1 .cnt3.active ._i3, .content1 .cnt3.active ._i5{transition-delay:800ms}
.content1 .cnt3.active ._i2, .content1 .cnt3.active ._i6{transition-delay:900ms}
.content1 .cnt3.active ._i4{transition-delay:1000ms}

/* content2 */
.content2{height:2409px}
.content2 .bg_section{top:-57px;height:2466px;background:url("https://ssl.nexon.com/s2/game/baram/2020/event/0122_intro_A17575FCB344E245/bg_content2.jpg") center top no-repeat}
.content2 .content_wrap span{background:url("https://ssl.nexon.com/s2/game/baram/2020/event/0122_intro_A17575FCB344E245/spr_cnt_content2.png") no-repeat}
.content2 .cnt1 .char span{background:url("https://ssl.nexon.com/s2/game/baram/2020/event/0122_intro_A17575FCB344E245/spr_char_content2.png") no-repeat}
.content2 .cnt1 .char .body{top:366px;left:149px;width:1042px;height:1078px}
.content2 .cnt1 .char .body .base{top:0;left:0;width:100%;height:100%}
.content2 .cnt1 .char .body span{transform:translateY(50px)}
.content2 .cnt1 .char .body .zindex{top:391px;left:673px;width:192px;height:253px;background-position:-673px -391px;z-index:1}
.content2 .cnt1.active .char .body span{transform:translateY(0);transition:opacity 300ms linear, transform 1s ease-out;transition-delay:800ms;animation:doongdoong 1s 1.8s infinite linear alternate}
.content2 .cnt1 .cover{top:493px;left:50%;width:1920px;height:1176px;margin-left:-960px;background:url("https://ssl.nexon.com/s2/game/baram/2020/event/0122_intro_A17575FCB344E245/bg_cloud_content2.png") center top no-repeat}
.content2 .cnt1 .char ._f1{top:1165px;left:279px;width:288px;height:136px;background-position:-1106px 0;transform-origin:100% 100%}
.content2 .cnt1 .char ._f2{top:507px;left:314px;width:249px;height:137px;background-position:-1445px 0;transform-origin:50% 100%}
.content2 .cnt1 .char ._f3{top:548px;left:783px;width:304px;height:193px;background-position:-1738px 0;transform-origin:0 100%}
.content2 .cnt1 .char ._f4{top:1140px;left:94px;width:513px;height:228px;background-position:-1097px -231px;transform-origin:100% 100%}
.content2 .cnt1 .char ._f5{top:701px;left:713px;width:279px;height:178px;background-position:-1763px -266px;z-index:1;transform-origin:0 100%}
.content2 .cnt1 .char ._f6{top:927px;left:202px;width:344px;height:168px;background-position:-1097px -640px;transform-origin:100% 0}
.content2 .cnt1 .char ._f7{top:853px;left:792px;width:448px;height:371px;background-position:-1594px -567px;transform-origin:0 0}
.content2 .cnt1 .char ._f8{top:1369px;left:347px;width:579px;height:85px;background-position:-1104px -1048px}
.content2 .cnt1 .char .frozen{transform:scale(0)}
.content2 .cnt1.active .char .frozen{transform:scale(1);transition:opacity 300ms linear, transform 1s cubic-bezier(0, 1, 0.5, 1)}
.content2 .cnt1.active .char ._f1{transition-delay:1400ms}
.content2 .cnt1.active .char ._f2{transition-delay:1200ms}
.content2 .cnt1.active .char ._f3{transition-delay:900ms}
.content2 .cnt1.active .char ._f4{transition-delay:1300ms}
.content2 .cnt1.active .char ._f5{transition-delay:1050ms}
.content2 .cnt1.active .char ._f6{transition-delay:950ms}
.content2 .cnt1.active .char ._f7{transition-delay:1350ms}
.content2 .cnt1.active .char ._f8{transition-delay:1150ms}
.content2 .cnt1 .headline{top:216px;left:50%;width:1063px;height:370px;margin-left:-531px;transform:scaleX(0);opacity:0}
.content2 .cnt1 .headline, .content2 .cnt1 .headline .roll{transform-origin:50% 100%}
.content2 .cnt1 .headline .bg{top:0;left:0;width:100%;height:100%;background-position:50% -630px}
.content2 .cnt1 .headline .roll{top:119px;width:209px;height:311px}
.content2 .cnt1 .headline ._r1{left:-42px;background-position:-216px -142px;transform:scaleX(2)}
.content2 .cnt1 .headline ._r2{right:-26px;background-position:-475px -142px;transform:scaleX(2)}
.content2 .cnt1 .headline ._s1{top:51px;left:328px;width:409px;height:42px;background-position:-997px -188px}
.content2 .cnt1 .headline ._s2{top:76px;left:283px;width:495px;height:55px;background-position:-952px -243px}
.content2 .cnt1 .headline .big{top:109px;left:163px;width:745px;height:178px;background-position:-746px -379px}
.content2 .cnt1.active .headline .txt{transition:opacity 500ms linear}
.content2 .cnt1.active .headline ._s1{transition-delay:400ms}
.content2 .cnt1.active .headline ._s2{transition-delay:450ms}
.content2 .cnt1.active .headline .big{transition-delay:550ms}
.content2 .cnt1.active .headline{transform:scaleX(1);opacity:1;transition:opacity 300ms linear, transform 500ms ease}
.content2 .cnt1.active .roll{transform:scaleX(1);transition:transform 500ms ease}
.content2 .cnt1 .line ._l1{top:312px;left:-77px;width:154px;height:78px;transform:translateX(20px)}
.content2 .cnt1 .line ._l2{top:454px;left:-1px;width:206px;height:115px;background-position:0 -151px;transform:translateX(40px)}
.content2 .cnt1 .line ._l3{top:151px;left:250px;width:187px;height:105px;background-position:-524px 0;transform:translateX(20px)}
.content2 .cnt1 .line ._l4{top:204px;left:183px;width:211px;height:128px;background-position:-264px 0;transform:translateX(20px)}
.content2 .cnt1 .line ._l5{top:150px;left:882px;width:192px;height:102px;background-position:-792px 0;transform:translateX(-20px)}
.content2 .cnt1 .line ._l6{top:250px;left:952px;width:249px;height:138px;background-position:-1033px 0;transform:translateX(-40px)}
.content2 .cnt1 .line ._l7{top:567px;left:1287px;width:128px;height:36px;background-position:-1364px 0;transform:translateX(-20px)}
.content2 .cnt1 .line ._l8{top:441px;left:1046px;width:226px;height:95px;background-position:0 -373px;z-index:1;transform:translateX(-50px)}
.content2 .cnt1.active .line ._l1{transition-delay:650ms}
.content2 .cnt1.active .line ._l2{transition-delay:725ms}
.content2 .cnt1.active .line ._l3{transition-delay:600ms}
.content2 .cnt1.active .line ._l4{transition-delay:675ms}
.content2 .cnt1.active .line ._l5{transition-delay:525ms}
.content2 .cnt1.active .line ._l6{transition-delay:550ms}
.content2 .cnt1.active .line ._l7{transition-delay:625ms}
.content2 .cnt1.active .line ._l8{transition-delay:700ms}
.content2 .cnt1.active .line span{transform:translateX(0);transition:opacity 300ms linear, transform 500ms ease}
.content2 .cloud_wrap span{background:url("https://ssl.nexon.com/s2/game/baram/2020/event/0122_intro_A17575FCB344E245/spr_cloud_content2.png") no-repeat}
.content2 .cloud_wrap ._c1{top:952px;left:-523px;width:1165px;height:1148px;animation:cloud1Motion 5s infinite alternate linear}
.content2 .cloud_wrap ._c2{top:1217px;left:500px;width:1239px;height:1281px;background-position:-2166px 0;animation:cloud2Motion 5s infinite alternate linear}
.content2 .cnt2{top:1474px}
.content2 .cnt2 .list{top:0;width:393px;height:259px}
.content2 .cnt2 ._l1{left:31px}
.content2 .cnt2 ._l2{left:444px}
.content2 .cnt2 ._l3{left:857px}
.content2 .cnt2 .list .deco{top:119px;height:19px}
.content2 .cnt2 .list ._d1{left:37px;background-position:-1400px -981px}
.content2 .cnt2 .list ._d2{right:37px;width:91px;background-position:100% -949px}
.content2 .cnt2.active .list .deco{width:91px}
.content2 .cnt2.active .list._l1 .deco{transition-delay:700ms}
.content2 .cnt2.active .list._l2 .deco{transition-delay:800ms}
.content2 .cnt2.active .list._l3 .deco{transition-delay:900ms}
.content2 .cnt2.active .list._l4 .deco{transition-delay:1000ms}
.content2 .cnt2 .list .txt{top:41px;height:171px}
.content2 .cnt2 ._l1 .txt{left:146px;width:103px;background-position:0 -1037px}
.content2 .cnt2 ._l2 .txt{left:149px;width:99px;background-position:-206px -1037px}
.content2 .cnt2 ._l3 .txt{left:78px;width:235px;background-position:-357px -1037px}
.content2 .cnt2 .list .bg{top:0;left:0;width:100%;height:100%;background-position:-685px -1031px}
.content2 .cnt2 .list .shape{top:20px;left:154px;width:84px;height:84px;border-radius:100%;background:#1b2041}
.content2 .cnt2 .list .svg1{top:0;left:-2px}
.content2 .cnt2 .list .svg2{top:249px;left:109px}
.content2 .cnt2 .list svg path{stroke-dasharray:1100;stroke-dashoffset:1100}
.content2 .cnt2.active .list svg path{stroke-dasharray:1100;stroke-dashoffset:0;transition:all 1.2s ease}
.content2 .cnt2.active .list .svg2 path{transition-delay:500ms !important}
.content2 .cnt2 .item{width:342px;height:342px;top:278px}
.content2 .cnt2 .item._i1{left:56px;background-position:0 -1353px;transform:translate(-30px, 0)}
.content2 .cnt2 .item._i2{left:333px;background-position:-383px -1353px;transform:translate(-15px, 0)}
.content2 .cnt2 .item._i3{left:610px;background-position:-766px -1353px;transform:translate(15px, 0)}
.content2 .cnt2 .item._i4{left:887px;background-position:-1149px -1353px;transform:translate(30px, 0)}
.content2 .cnt2.active .item._i1, .content2 .cnt2.active .item._i4{transition-delay:700ms}
.content2 .cnt2.active .item._i2, .content2 .cnt2.active .item._i3{transition-delay:800ms}
.content2 .cnt2 .btn{position:absolute;top:647px;left:337px;width:606px;height:120px;background:url("https://ssl.nexon.com/s2/game/baram/2020/event/0122_intro_A17575FCB344E245/btn_update_content2.png") no-repeat;text-indent:-99999px;overflow:hidden;opacity:0;transform:translateY(15px)}
.content2 .cnt2 .btn:hover{background-position:0 -150px}
.content2 .cnt2.active .btn{opacity:1;transform:translateY(0);transition:opacity 300ms linear, transform 500ms ease;transition-delay:950ms}
.content2 .copyright{position:absolute;top:2346px;left:485px;width:311px;height:13px;background:url("https://ssl.nexon.com/s2/game/baram/2020/event/0122_intro_A17575FCB344E245/copyright.png") no-repeat;text-indent:-99999px;overflow:hidden}

/* quick */
#quick{display:none;position:fixed;top:50%;right:22px;width:81px;margin-top:-165px;z-index:1}
.naver #quick{top:200px;margin-top:0}
#quick ul, #quick li span, #quick .btn_top{background:url("https://ssl.nexon.com/s2/game/baram/2020/event/0122_intro_A17575FCB344E245/spr_quick_247116C77BA0F770.png") no-repeat}
#quick ul{height:319px;padding:16px 0 15px}
#quick li a{display:block;position:relative;height:79px;margin-bottom:1px}
#quick li span{position:absolute;text-indent:-9999px;overflow:hidden}
#quick li .symbol{top:50%;width:100%}
#quick .qu1 .symbol{height:44px;background-position:-314px 0;margin-top:-22px}
#quick .qu2 .symbol{height:54px;background-position:-314px -77px;margin-top:-27px}
#quick .qu3 .symbol{height:36px;background-position:-314px -164px;margin-top:-18px}
#quick .qu4 .symbol{height:42px;background-position:-312px -301px;margin-top:-21px}
#quick .qu1.on .symbol, #quick .qu1 a:hover .symbol{background-position:-399px 0}
#quick .qu2.on .symbol, #quick .qu2 a:hover .symbol{background-position:-399px -77px}
#quick .qu3.on .symbol, #quick .qu3 a:hover .symbol{background-position:-399px -164px}
#quick .qu4.on .symbol, #quick .qu4 a:hover .symbol{background-position:-392px -301px}
#quick li .txt{top:50%;width:80px;height:15px;margin-top:-7px}
#quick .qu1 .txt{background-position:-119px -15px}
#quick .qu2 .txt{background-position:-119px -96px}
#quick .qu3 .txt{background-position:-119px -176px}
#quick .qu4 .txt{background-position:-122px -315px}
#quick .qu1 a:hover .txt, #quick .qu1.on .txt{background-position:-223px -15px}
#quick .qu2 a:hover .txt, #quick .qu2.on .txt{background-position:-223px -96px}
#quick .qu3 a:hover .txt, #quick .qu3.on .txt{background-position:-223px -176px}
#quick .qu4 a:hover .txt, #quick .qu4.on .txt{background-position:-227px -315px}
#quick li .cancel{top:50%;width:81px;height:2px;background:#df002f;transform:scaleX(0);transition:transform 150ms ease;margin-top:-1px}
#quick .on .cancel, #quick li a:hover .cancel{transform:scaleX(1)}
#quick .btn_top{display:block;width:27px;height:39px;background-position:-347px -232px;text-indent:-99999px;overflow:hidden;margin:20px auto 0}
#quick .btn_top:hover{background-position:-396px -232px}

/* layerpop */
.modal-popup{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999999;overflow:hidden;opacity:0;overflow-y:auto}
.modal-popup.show{display:block}
.modal-popup .dim{position:absolute;top:0;left:0;right:0;width:100%;min-height:100%;background:#000;filter:alpha(opacity=50);opacity:0.5}
.modal-popup .modal-wrap{position:absolute;top:50%;left:50%}
.modal-popup button{position:absolute;background:url("https://ssl.nexon.com/s2/game/baram/2020/event/0122_intro_A17575FCB344E245/spr_btn_pop.png") no-repeat;text-indent:-9999px;overflow:hidden}
.modal-popup .btn_x{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 */
.modal-popup .pop_lnb{width:360px;height:212px;background:url("https://ssl.nexon.com/s2/game/baram/2020/event/0122_intro_A17575FCB344E245/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 */
.modal-popup .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;width:100%;background:url("https://ssl.nexon.com/s2/game/baram/2020/event/0122_intro_A17575FCB344E245/spr_pop_video.png") no-repeat;text-indent:-99999px;overflow:hidden}
.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-popup .modal-wrap{margin-top:0 !important}
.naver .modal-popup .pop_lnb{top:300px}
.naver .modal-popup .pop_video{top:150px}


@keyframes shipMotion{
    0%{transform:translate(0, 0)}
    50%{transform:translate(10px, -20px) rotate(5deg) skew(2deg, -2deg)}
    100%{transform:translate(-10px, 20px) rotate(-5deg) skew(-2deg, 2deg)}
}

@keyframes waveMotion{
    0%{transform:scale(0.95, 1)}
    60%{transform:scale(1, 1.05)}
    100%{transform:scale(0.95, 1)}
}

@keyframes rainyMS{
    from{transform:translate(0, 0)}
    to{transform:translate(980px, 2385px)}
}

@keyframes rainyWebkit{
    from{background-position:50% 50%}
    to{background-position:200% 250%}
}

@keyframes vibrate1{
    0% {transform:rotate(0deg)}
    25% {transform:rotate(-0.1deg)}
    50% {transform:rotate(0deg)}
    75% {transform:rotate(0.1deg)}
    100% {transform:rotate(0deg)}
}

@keyframes doongdoong{
    0%{transform:translateY(0)}
    100%{transform:translateY(30px)}
}

@keyframes fog1Motion{
    0%{transform:scale(0.5);opacity:0}
    45%{transform:scale(0.8);opacity:1}
    90%{transform:scale(1.2);opacity:0}
    100%{transform:scale(1.2);opacity:0}
}

@keyframes fog2Motion{
    0%{transform:scale(0);opacity:0}
    45%{transform:scale(0.8);opacity:1}
    90%{transform:scale(1);opacity:1}
    100%{transform:scale(1);opacity:0}
}

@keyframes cloud1Motion{
    90%{transform:translate(-50px, -20px) scaleX(1.3)}
    100%{transform:translate(-50px, -20px) scaleX(1.4);opacity:0}
}

@keyframes cloud2Motion{
    90%{transform:translate(60px, 30px) scaleX(1.2)}
    100%{transform:translate(60px, 30px) scaleX(1.3);opacity:0}
}