@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}
html{overflow-y:scroll}
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:'돋움','dotum',sans-serif;font-size:14px;color:#262626;line-height:1;background:#000}
input,textarea,button,select{font-size:inherit;font-family:'돋움','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;overflow:hidden}
#wrap .section{position:relative;width:100%}
.section .container{position:relative;width:1200px;height:100%;margin:0 auto}
.section .bg_section{position:absolute;top:0;left:0;width:99.99%;height:100%;padding-left:0.01%}
.gnbWrapper{min-width:1280px !important}

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


/* common */
.object_wrap{position:absolute;top:0;left:0;width:100%}
.object_wrap div, .object_wrap span{position:absolute}

/* header */
#header h1 a, #header .btn_start, #header .util li a span{display:block;text-indent:-99999px;overflow:hidden;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0822_event06_B027853E806624CC/spr_header.png") no-repeat}
#header{position:absolute;top:0;left:0;right:0;z-index:100}
#header .bi{position:absolute;top:15px;left:50%;width:252px;height:17px;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0822_event02_ADC50F7412CBF032/bi.png") no-repeat;text-indent:-99999px;overflow:hidden;margin-left:-124px}
#header .util{position:absolute;top:135px;right:0;margin-right:26px}
#header .btn_start{position:absolute;top:-116px;right:2px;width:283px;height:91px;background-position:-121px 0}
#header .btn_start:hover{background-position:-121px -123px}
#header .util li a{position:relative;display:block;width:68px;height:68px}
#header .util li .btn{position:relative;width:100%;height:100%}
#header .util li .bubble{position:absolute;top:25px;right:73px;width:112px;height:19px;text-indent:0;text-align:center;line-height:17px;font-size:11px;font-family:'맑은 고딕', 'malgun gothic', sans-serif;color:#e5e5e5;padding-right:5px;opacity:0;filter:alpha(opacity=0);transform:translateX(10px);transition:all 300ms ease}
#header .util li a:hover .bubble{opacity:1;filter:alpha(opacity=100);transform:translateX(0)}
#header .util .btn_h{margin-bottom:5px}
#header .util .btn_h .btn{background-position:-509px 0}
#header .util .btn_c .btn{background-position:-509px -73px}
#header .util .btn_h a:hover .btn{background-position:-710px 0}
#header .util .btn_c a:hover .btn{background-position:-710px -73px}
#header .util .btn_h .bubble{background-position:-588px -22px}
#header .util .btn_c .bubble{background-position:-589px -98px}

/* lnb */
#lnb{position:absolute;top:0;left:0;width:181px;height:100%;background:#fff;z-index:100;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0725_intro_435F728674B478EC/bg_lnb.jpg") 0 top repeat-y;transition:left 300ms ease}
.fixed #lnb{position:fixed}
#lnb.hide{left:-162px}
#lnb .lnb_wrap{position:relative;height:100%}
#lnb .lnb_wrap li, #lnb .lnb_wrap a, #lnb .btn_toggle, #lnb .lnb_wrap li .new{display:block;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0822_intro_BFDF103BC5C93CA9/spr_lnb_ADC7468E6B0841F2.png") no-repeat}
#lnb .lnb_wrap a, #lnb .btn_toggle{text-indent:-99999px;overflow:hidden}
#lnb h1 a{width:162px;height:152px}
#lnb .lnb_wrap ul{padding-bottom:122px}
#lnb .lnb0{height:108px}
#lnb .lnb0.v3{height:128px}
#lnb .lnb_wrap li{position:relative;width:162px;background-position:-462px 100%;padding-bottom:8px}
#lnb .lnb_wrap li .new{position:absolute;top:50%;right:-19px;width:36px;height:36px;background-position:-256px 0;margin-top:-22px;transition:opacity 300ms ease}
#lnb .lnb_wrap .lnb0.v3 .new{margin-top:2px}
#lnb.hide .lnb_wrap li .new{opacity:0;filter:alpha(opacity=0)}
#lnb .lnb_wrap .lnb4{background:none;padding-bottom:0}
#lnb .lnb0 a{position:absolute;left:0;width:100%}
#lnb .lnb0 .lnb_intro{top:29px;height:27px;background-position:0 -1026px}
#lnb .lnb0 .lnb_video{top:56px;height:30px;background-position:0 -1053px}
#lnb .lnb0.v2 .lnb_intro{background-position:0 -192px}
#lnb .lnb0.v2 .lnb_video{background-position:0 -219px}
#lnb .lnb0.v3 .lnb_intro{top:68px;height:40px;background-position:0 -1202px}
#lnb .lnb0.v3 .lnb_video{top:19px;height:27px;background-position:0 -1153px}
#lnb .lnb1 a{height:85px;background-position:0 -279px}
#lnb .lnb2 a{height:108px;background-position:0 -872px}
#lnb .lnb2.v2 a{background-position:0 -372px}
#lnb .lnb2.v3 a{background-position:0 -1355px}
#lnb .lnb3 a{height:125px;background-position:0 -488px}
#lnb .lnb4 a{height:143px;background-position:0 -621px}
#lnb .lnb5 a{height:85px;background-position:0 -774px}
#lnb .lnb6 a{height:85px;background-position:0 -1259px}
#lnb .lnb0.on .lnb_intro, #lnb .lnb0 .lnb_intro:hover{background-position:-190px -1026px}
#lnb .lnb0.on .lnb_video, #lnb .lnb0 .lnb_video:hover{background-position:-190px -1053px}
#lnb .lnb0.v2.on .lnb_intro, #lnb .lnb0.v2 .lnb_intro:hover{background-position:-190px -192px}
#lnb .lnb0.v2.on .lnb_video, #lnb .lnb0.v2 .lnb_video:hover{background-position:-190px -219px}
#lnb .lnb0.v3.on .lnb_intro, #lnb .lnb0.v3 .lnb_intro:hover{background-position:-190px -1202px}
#lnb .lnb0.v3.on .lnb_video, #lnb .lnb0.v3 .lnb_video:hover{background-position:-190px -1153px}
#lnb .lnb1.on a, #lnb .lnb1 a:hover{background-position:-190px -279px}
#lnb .lnb2.on a, #lnb .lnb2 a:hover{background-position:-190px -872px}
#lnb .lnb2.v2.on a, #lnb .lnb2.v2 a:hover{background-position:-190px -372px}
#lnb .lnb2.v3.on a, #lnb .lnb2.v3 a:hover{background-position:-190px -1355px}
#lnb .lnb3.on a, #lnb .lnb3 a:hover{background-position:-190px -488px}
#lnb .lnb4.on a, #lnb .lnb4 a:hover{background-position:-190px -621px}
#lnb .lnb5.on a, #lnb .lnb5 a:hover{background-position:-190px -774px}
#lnb .lnb6.on a, #lnb .lnb6 a:hover{background-position:-190px -1259px}
#lnb .btn_toggle{position:absolute;top:0;left:162px;width:50px;height:50px;background-position:-180px -65px}
#lnb.hide .btn_toggle{background-position:-180px 0}
.mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{right:19px}


/* nav */
#nav .nav_wrap, #nav .btn_toggle, #nav .nav_wrap li a{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0704_intro_F51A1BF194149854/spr_nav_v2.png") no-repeat}
#nav .btn_toggle, #nav .nav_wrap{position:fixed;z-index:100}
#nav .nav_wrap{bottom:28px;left:50%;width:1575px;height:129px;background-position:0 -356px;margin-left:-775px}
#nav.toggle .nav_wrap{display:none}
#nav .nav_wrap ul{overflow:hidden;padding:12px 0 0 173px}
#nav .nav_wrap li{position:relative;float:left;height:105px}
#nav .nav_wrap li a{display:block;height:100%;text-indent:-99999px;overflow:hidden}
#nav .nav_wrap li .cover{position:absolute;top:0;left:0;width:100%;height:100%}
#nav .nav_wrap .nav1{width:296px}
#nav .nav_wrap .nav2{width:217px}
#nav .nav_wrap .nav3{width:329px}
#nav .nav_wrap .nav4{width:364px}
#nav .nav_wrap .nav1 a{background-position:0 13px}
#nav .nav_wrap .nav2 a{background-position:-296px 13px}
#nav .nav_wrap .nav3 a{background-position:-513px 13px}
#nav .nav_wrap .nav4 a{background-position:-842px 13px}
#nav .nav_wrap .nav1 a:hover, #nav .nav_wrap .nav1.on a{background-position:0 -97px}
#nav .nav_wrap .nav2 a:hover, #nav .nav_wrap .nav2.on a{background-position:-296px -97px}
#nav .nav_wrap .nav3 a:hover, #nav .nav_wrap .nav3.on a{background-position:-513px -97px}
#nav .nav_wrap .nav4 a:hover, #nav .nav_wrap .nav4.on a{background-position:-842px -97px}
#nav .btn_toggle{bottom:50px;left:45px;width:72px;height:72px;background-position:0 -215px}
#nav .btn_toggle span{position:absolute;left:31px;width:10px;height:6px;background:#F0E3D7;border-radius:6px;transition:all 300ms ease}
#nav .btn_toggle ._b1{top:22px}
#nav .btn_toggle ._b2{top:33px}
#nav .btn_toggle ._b3{top:44px}
#nav.toggle .btn_toggle span{left:19px;width:34px}

/* intro */
.intro{height:939px}
.intro .bg_section{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0822_event06_B027853E806624CC/bg_intro.jpg") center top no-repeat}
.intro .object_wrap div .front{z-index:1}
.intro .cn_wrap span, .intro .dragon_wrap span, .intro .title_wrap span, #contentsWrap.scrolling .intro .dragon_wrap span{opacity:0}
.intro.load .cn_wrap span, .intro.load .dragon_wrap span, .intro.load .title_wrap span{opacity:1}
.intro .dragon_wrap span{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0822_event06_B027853E806624CC/spr_dragon_intro.png") no-repeat;transition:opacity 500ms linear, transform 1s ease}
.intro .dragon_wrap ._d4{top:384px;left:170px;width:745px;height:670px}
.intro .dragon_wrap ._d4 span{top:0;left:0;width:100%;height:100%}
.intro .dragon_wrap ._d3{top:-60px;left:259px;width:630px;height:688px}
.intro .dragon_wrap ._d3 .front{top:0;left:0;width:100%;height:666px;background-position:0 -1365px}
.intro .dragon_wrap ._d3 .back{bottom:0;right:0;width:603px;height:100%;background-position:-693px -1365px}
.intro .dragon_wrap ._d2{top:45px;left:568px;width:775px;height:618px}
.intro .dragon_wrap ._d2 .front{top:0;right:0;width:709px;height:100%;background-position:0 -2116px}
.intro .dragon_wrap ._d2 .back{top:0;left:0;width:100%;height:584px;background-position:-801px -2116px}
.intro .dragon_wrap ._d1{top:200px;left:-13px;width:406px;height:502px}
.intro .dragon_wrap ._d1 .front{top:0;left:0;width:100%;height:484px;background-position:0 -742px}
.intro .dragon_wrap ._d1 .back{top:0;left:0;width:100%;height:100%;background-position:-505px -742px}
.intro .dragon_wrap ._d3 span{transition-delay:150ms}
.intro .dragon_wrap ._d2 span{transition-delay:300ms}
.intro .dragon_wrap ._d1 span{transition-delay:450ms}
.intro .dragon_wrap ._d4 span{transform:translate(0, 50px)}
.intro .dragon_wrap ._d3 span{transform:translate(0, 50px)}
.intro .dragon_wrap ._d2 span{transform:translate(-50px, 50px)}
.intro .dragon_wrap ._d1 span{transform:translate(50px, 50px)}
.intro.load .dragon_wrap div span{transform:translate(0,0)}
#contentsWrap.ready .intro .dragon_wrap span{transition-delay:0ms}
#contentsWrap.scrolling .intro .dragon_wrap ._d3 span, #contentsWrap.scrolling .intro .dragon_wrap ._d4 span{transform:translate(0, 50px)}
#contentsWrap.scrolling .intro .dragon_wrap ._d2 span{transform:translate(50px, -50px)}
#contentsWrap.scrolling .intro .dragon_wrap ._d1 span{transform:translate(-50px, -50px)}
.intro .cn_wrap span{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0822_event06_B027853E806624CC/spr_chinese_intro.png") no-repeat;transition:opacity 500ms linear}
.intro .cn_wrap ._c1{top:27px;left:-43px;width:333px;height:343px;background-position:-6px 0}
.intro .cn_wrap ._c2{top:31px;left:1067px;width:277px;height:336px;background-position:-419px -4px;transition-delay:80ms}
.intro .cn_wrap ._c3{top:399px;left:-49px;width:339px;height:341px;background-position:0 -372px;transition-delay:160ms}
.intro .cn_wrap ._c4{top:392px;left:1046px;width:325px;height:346px;background-position:-398px -365px;transition-delay:240ms}
.intro .wind_wrap span{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0822_event06_B027853E806624CC/spr_wind_intro.png") no-repeat}
.intro .wind_wrap ._w1{top:58px;left:-473px;width:774px;height:985px;background-position:0 -3px}
.intro .wind_wrap ._w2{top:55px;left:968px;width:516px;height:819px;background-position:-919px 0}
.intro .title_wrap span{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0822_event06_B027853E806624CC/spr_title_intro.png") no-repeat}
.intro .title_wrap .headline span, .intro .title_wrap .small span{top:0;height:100%}
.intro .title_wrap .small{top:282px;left:416px;width:380px;height:59px}
.intro .title_wrap .small span{transition:opacity 500ms linear}
.intro .title_wrap .small .dot{width:11px;background-position:-65px 0}
.intro .title_wrap .small ._t1{left:0;width:60px;transition-delay:150ms}
.intro .title_wrap .small ._t2{left:81px;width:62px;background-position:-81px 0;transition-delay:250ms}
.intro .title_wrap .small ._t3{left:160px;width:58px;background-position:-160px 0;transition-delay:350ms}
.intro .title_wrap .small ._t4{left:242px;width:56px;background-position:-242px 0;transition-delay:450ms}
.intro .title_wrap .small ._t5{left:320px;width:60px;background-position:-320px 0;transition-delay:550ms}
.intro .title_wrap .small ._d1{left:65px;transition-delay:200ms}
.intro .title_wrap .small ._d2{left:145px;background-position:-145px 0;transition-delay:300ms}
.intro .title_wrap .small ._d3{left:225px;background-position:-225px 0;transition-delay:400ms}
.intro .title_wrap .small ._d4{left:305px;background-position:-305px 0;transition-delay:500ms}
.intro .title_wrap .headline{top:356px;left:253px;width:714px;height:130px;transform:perspective(150px);transform-style:preserve-3d;-ms-perspective:150px}
.intro .title_wrap .headline ._h1{width:402px;background-position:0 -101px;transition-delay:700ms}
.intro .title_wrap .headline ._h2{left:450px;width:264px;background-position:-450px -101px;transition-delay:900ms}
.intro .title_wrap .headline span{transform:translateZ(-10px);transition:opacity 500ms linear, transform 1s ease}
.intro.load .title_wrap .headline span{transform:translateZ(0)}
.intro .title_wrap .update, .intro .title_wrap .descript{transform:translateY(-15px);transition:opacity 500ms linear, transform 800ms ease}
.intro.load .title_wrap .update, .intro.load .title_wrap .descript{transform:translateY(0)}
.intro .title_wrap .update{top:524px;left:471px;width:269px;height:50px;background-position:-465px 0;transition-delay:1s}
.intro .title_wrap .descript{top:576px;left:369px;width:468px;height:121px;background-position:0 -278px;transition-delay:1.15s}
.intro .fog_wrap span{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0822_event06_B027853E806624CC/spr_fog_intro.png") no-repeat;transform-origin:50% 100%}
.intro .fog_wrap ._f1, .intro .fog_wrap ._f3{top:216px;left:-638px;width:2534px;height:1260px;opacity:0}
.intro .fog_wrap ._f2, .intro .fog_wrap ._f4{top:302px;left:-410px;width:1916px;height:558px;opacity:0;background-position:-253px -1702px}
.intro .fog_wrap ._f1{animation:fog1Animation 25s infinite linear}
.intro .fog_wrap ._f2{animation:fog2Animation 7s infinite linear}
.intro .fog_wrap ._f3{animation:fog2Animation 15s infinite linear}
.intro .fog_wrap ._f4{animation:fog2Animation 40s infinite linear}
.intro .far_wrap span{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0822_event06_B027853E806624CC/spr_far_intro_v2.png") no-repeat}
.intro .far_wrap ._f1{top:699px;left:712px;width:245px;height:411px}
.intro .far_wrap ._f2{top:512px;left:77px;width:377px;height:408px;background-position:-255px 0}
.intro .far_wrap ._f3{top:527px;left:619px;width:774px;height:772px}
.intro .far_wrap ._f3 .back{top:0;left:0;width:100%;height:100%;background-position:0 -592px}
.intro .far_wrap ._f3 .front{top:0;left:428px;width:187px;height:118px;background-position:-649px 0}
.intro .far_wrap ._f4{top:-65px;left:1331px;width:243px;height:1364px;background-position:-862px 0}
.intro .middle_wrap div{height:728px}
.intro .middle_wrap span{top:0;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0822_event06_B027853E806624CC/spr_middle_intro_v2.png") no-repeat}
.intro .middle_wrap .back{left:0;width:100%;height:728px}
.intro .middle_wrap ._m1{top:315px;left:-360px;width:1024px}
.intro .middle_wrap ._m2{top:451px;left:569px;width:991px}
.intro .middle_wrap ._m2 .back{background-position:0 -752px}
.intro .middle_wrap ._m2 .front{left:649px;width:122px;height:140px;background-position:-1085px -752px}
.intro .middle_wrap ._m1 .front{left:281px;width:94px;height:193px;background-position:-1171px 0}
.intro .view span{opacity:1;transition:opacity 500ms linear, transform 800ms ease}
#contentsWrap.scrolling .intro .view span{opacity:0}
#contentsWrap.scrolling .intro .far_wrap ._f1, #contentsWrap.scrolling .intro .far_wrap ._f3 span{transform:translate(50px, 50px)}
#contentsWrap.scrolling .intro .far_wrap ._f2{transform:translate(-50px, 50px)}
#contentsWrap.scrolling .intro .far_wrap ._f1{transition-delay:100ms}
#contentsWrap.scrolling .intro .far_wrap ._f2, #contentsWrap.scrolling .intro .far_wrap ._f3 span{transition-delay:200ms}
#contentsWrap.scrolling .intro .far_wrap ._f4{transform:translate(50px, 0);transition-delay:300ms}
#contentsWrap.scrolling .intro .middle_wrap ._m1 span{transform:translate(-50px, 50px)}
#contentsWrap.scrolling .intro .middle_wrap ._m2 span{transform:translate(50px, 50px)}
#contentsWrap.scrolling .intro .view .front{transition-duration:0ms}
.intro .fire_wrap span{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0822_event06_B027853E806624CC/spr_fire_intro.png") no-repeat}
.intro .fire_wrap ._f1{top:-39px;left:-81px;width:155px;height:501px}
.intro .fire_wrap ._f2{top:-249px;left:1458px;width:155px;height:501px;background-position:-222px 0}
.intro .fire_wrap ._f3{top:295px;left:1089px;width:503px;height:590px;background-position:-531px -4px}
.intro .scroll{position:absolute;top:769px;left:568px;width:64px;height:31px}
.intro .scroll span{position:absolute;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0822_event06_B027853E806624CC/spr_scroll.png") no-repeat}
.intro .scroll .txt{top:0;left:0;width:64px;height:12px;animation:scroll1Animation 1s infinite alternate ease}
.intro .scroll .arrow{bottom:0;left:22px;width:18px;height:9px;background-position:-23px -22px;animation:scroll2Animation 1s infinite alternate ease}
.intro canvas{position:absolute;top:0;left:50%;margin-left:-960px;z-index:1}

/* contents wrap */
#contentsWrap{position:relative}
#wrap.fixed #contentsWrap{padding-top:939px}
#wrap.fixed #contentsWrap .intro{position:fixed;top:0;left:0}

/* content */
.content{height:3098px;background:#150f2d;z-index:1}
.content .tree_wrap{top:674px}
.content .tree_wrap .fog{top:545px;left:-926px;width:2500px;height:873px;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0822_event06_B027853E806624CC/bg_fog_content.png") no-repeat}
.content .tree_wrap .tree{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0822_event06_B027853E806624CC/spr_tree_content.png") no-repeat}
.content .tree_wrap ._t1{top:0;left:-360px;width:539px;height:1267px}
.content .tree_wrap ._t2{top:75px;left:1279px;width:281px;height:1246px;background-position:-929px 0}
.content .close_wrap span{left:-360px;width:1921px;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0822_event06_B027853E806624CC/spr_close.png") center top no-repeat}
.content .close_wrap ._c1{top:-300px;height:971px}
.content .close_wrap ._c2{top:209px;height:2889px;background-position:0 -1113px;transform:translateY(150px);opacity:0}
.content .close_wrap ._c2.active{transform:translateY(0);opacity:1;transition:opacity 500ms linear, transform 1s ease}
.content .bottom_wrap{top:1916px}
.content .bottom_wrap .monster{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0822_event06_B027853E806624CC/spr_monster_content.png") no-repeat;opacity:0}
.content .bottom_wrap ._m1{top:13px;left:-441px;width:2000px;height:1155px;background-position:0 -2043px}
.content .bottom_wrap ._m2{top:264px;left:210px;width:785px;height:608px;background-position:-1715px -1311px}
.content .bottom_wrap ._m3{top:0;left:1021px;width:539px;height:941px;background-position:-961px -1047px;transform:translate(-30px, 30px)}
.content .bottom_wrap ._m4{top:18px;left:-440px;width:880px;height:874px;background-position:0 -1065px;transform:translate(30px, 30px)}
.content .bottom_wrap ._m5{top:485px;left:-278px;width:692px;height:713px;background-position:0 -263px;transform:translate(50px, 50px)}
.content .bottom_wrap ._m6{top:222px;left:221px;width:1193px;height:973px;background-position:-899px 0;transform:translate(-50px, 50px)}
.content .bottom_wrap.active .monster{opacity:1;transform:translate(0,0);transition:opacity 500ms linear, transform 1s cubic-bezier(0, 1, 1, 1)}
.content .bottom_wrap.active ._m5{transition-delay:200ms}
.content .bottom_wrap.active ._m4{transition-delay:400ms}
.content .bottom_wrap.active ._m3{transition-delay:600ms}
.content .bottom_wrap .rock{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0822_event06_B027853E806624CC/spr_rock_content.png") no-repeat}
.content .bottom_wrap ._r1{top:679px;left:-440px;width:607px;height:522px}
.content .bottom_wrap ._r2{top:623px;left:905px;width:654px;height:577px;background-position:-684px 0}
.content .bottom_wrap .dust{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0822_event06_B027853E806624CC/spr_dust_content.png") no-repeat}
.content .bottom_wrap ._d1{top:623px;left:-441px;width:728px;height:577px;background-position:0 -89px}
.content .bottom_wrap ._d2{top:534px;left:822px;width:737px;height:664px;background-position:-875px 0}
.content .bottom_wrap .land{top:70px;left:-441px;width:2000px;height:1130px;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0822_event06_B027853E806624CC/bg_land_content.png") no-repeat}
.content .bottom_wrap .effect{top:434px;left:-441px;width:2000px;height:747px;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0822_event06_B027853E806624CC/bg_effect_content.png") no-repeat}
.content .bottom_wrap .fire{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0822_event06_B027853E806624CC/spr_fire_content.png") no-repeat}
.content .bottom_wrap ._f1{top:98px;left:-173px;width:40px;height:36px}
.content .bottom_wrap ._f2{top:192px;left:-152px;width:63px;height:46px;background-position:0 -93px}
.content .bottom_wrap ._f3{top:138px;left:56px;width:42px;height:40px;background-position:0 -181px}
.content .bottom_wrap ._f4{top:201px;left:140px;width:25px;height:27px;background-position:0 -261px}
.content .bottom_wrap ._f5{top:310px;left:167px;width:23px;height:25px;background-position:0 -311px}
.content .bottom_wrap ._f6{top:289px;left:765px;width:26px;height:27px;background-position:0 -375px}
.content .bottom_wrap ._f7{top:89px;left:1097px;width:27px;height:31px;background-position:0 -443px}
.content .bottom_wrap ._f8{top:49px;left:1285px;width:29px;height:33px;background-position:0 -489px}
.content .bottom_wrap ._f9{top:90px;left:296px;width:662px;height:480px;background-position:-215px -42px}
.content .cnt_wrap{padding-right:1px}
.content .cnt_wrap span, .content .cnt_wrap .btn_detail{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0822_event06_B027853E806624CC/spr_cnt_content_v2.png") no-repeat;opacity:0}
.content .cnt_wrap.active span, .content .cnt_wrap.active .btn_detail{opacity:1}
.content .cnt_wrap .h3, .content .cnt_wrap .descript, .content .cnt_wrap .item, .content .cnt_wrap .btn_detail, .content .cnt_wrap .copyright{transform:translateY(30px)}
.content .cnt_wrap.active .h3, .content .cnt_wrap.active .descript, .content .cnt_wrap.active .item, .content .cnt_wrap.active .btn_detail, .content .cnt_wrap.active .copyright{transform:translateY(0);transition:opacity 500ms linear, transform 1s ease}
.content .cnt_wrap .h3{top:0;height:59px}
.content .cnt_wrap .img{top:0;transform:scale(0.9)}
.content .cnt_wrap.active .img{transform:scale(1);transition:opacity 500ms linear, transform 800ms ease}
.content .cnt_wrap .num{left:50%;width:65px;height:42px;margin-left:-32px;transition:opacity 500ms linear, width 700ms ease, margin 700ms ease}
.content .cnt_wrap.active .num{width:808px;margin-left:-404px;transition-delay:150ms}
.content .cnt_wrap.active .descript{transition-delay:250ms}
.content .cnt1{top:70px}
.content .cnt2{top:492px}
.content .cnt3{top:1146px}
.content .cnt4{top:1733px}
.content .cnt5{top:2291px}
.content .cnt1 .h3{left:290px;width:618px}
.content .cnt2 .h3{left:236px;width:732px;background-position:0 -406px}
.content .cnt1 .item{top:154px;left:258px;width:678px;height:186px;background-position:0 -154px}
.content .cnt1 .descript{top:76px;left:403px;width:397px;height:24px;background-position:-145px -76px}
.content .cnt2 .img{top:152px;left:216px;width:777px;height:362px;background-position:0 -921px}
.content .cnt2.active .img{transition-delay:150ms}
.content .cnt3 .img{left:217px;width:776px;height:362px;background-position:-813px -921px}
.content .cnt4 .img{left:215px;width:778px;height:363px;background-position:0 -1300px}
.content .cnt5 .img{left:351px;width:508px;height:360px;background-position:-813px -1302px}
.content .cnt2 .descript{top:578px;left:245px;width:725px;height:23px;background-position:-877px -51px}
.content .cnt3 .descript{top:429px;left:394px;width:428px;height:50px;background-position:-989px -189px}
.content .cnt4 .descript{top:432px;left:351px;width:554px;height:22px;background-position:-947px -333px}
.content .cnt5 .descript{top:427px;left:407px;width:402px;height:22px;background-position:-1013px -508px}
.content .cnt2.active .descript{transition-delay:400ms}
.content .cnt2 .num{top:527px;background-position:50% -1704px}
.content .cnt3 .num{top:378px;background-position:50% -1761px}
.content .cnt4 .num{top:381px;background-position:50% -1813px}
.content .cnt5 .num{top:376px;background-position:50% -1865px}
.content .cnt2.active .num{transition-delay:300ms}
.content .cnt5 .btn_detail{position:absolute;top:553px;left:-105px;width:1466px;height:68px;background-position:0 -694px;text-indent:-9999px;overflow:hidden}
.content .cnt5 .btn_detail:hover{background-position:0 -802px}
.content .cnt5.active .btn_detail{transition-delay:450ms}
.content .cnt1.active .descript{transition-delay:100ms}
.content .cnt1.active .item{transition-delay:300ms}
.copyright{position:absolute;top:712px;left:50%;width:517px;height:44px;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0725_intro_435F728674B478EC/bg_copyright.png") no-repeat;text-indent:-999999px;overflow:hidden;margin-left:-258px;opacity:0}
.content .cnt5.active .copyright{transition-delay:550ms;opacity:1}

/* modal popup */
.modal-popup{display:none;position:fixed;top:0;left:0;right:0;bottom:0;height:100%;z-index:9999999;overflow:hidden;overflow-y:scroll}
.modal-popup.show{display:block;filter:alpha(opacity=0);opacity:0} 
.modal-popup .dim{position:absolute;top:0;left:0;right:0;width:100%;min-height:100%;background:#000;filter:alpha(opacity=80);opacity:0.8}
.modal-popup .modal-wrap{position:absolute;top:50%;left:50%;width:853px;height:480px;padding:60px 0 52px;margin:-296px 0 0 -427px}
.modal-popup.scrollpop .modal-wrap{top:20px;margin-top:0 !important;margin-bottom:20px}
.modal-popup.scrollpop .dim{padding-bottom:40px}

/* video layer */
.pop_video button, .pop_video .msg{position:absolute;display:block;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0725_intro_435F728674B478EC/spr_layer_video.png") no-repeat;text-indent:-9999px;overflow:hidden}
.pop_video .btn_close{top:0;right:0;width:45px;height:44px;background-position:-155px 0}
.pop_video .btn_hide_video{top:31px;right:77px;width:127px;height:16px}
.pop_video .msg{bottom:0;left:50%;width:401px;height:32px;background-position:0 -48px;margin-left:-200px}
.modal-wrap .frame_wrap{position:relative;width:100%;height:100%;background:#000}
.modal-wrap .frame_wrap iframe{width:100%;height:100%}

/* chanelling */
.naver #nav .btn_toggle, .naver #nav .nav_wrap{position:absolute;bottom:auto}
.naver #nav .nav_wrap{top:781px}
.naver #nav .btn_toggle{top:816px}
.naver .modal-popup{height:995px;overflow:hidden}

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

@keyframes fog2Animation{
    0%{transform:scale(0.5);opacity:0}
    45%{transform:scale(0.75);opacity:1}
    90%{transform:scale(1);opacity:0}
    100%{transform:scale(1);opacity:0}
}

@keyframes scroll1Animation{
    0%{transform:translateY(0)}
    100%{transform:translateY(-5px)}
}

@keyframes scroll2Animation{
    0%{transform:translateY(0)}
    100%{transform:translateY(5px)}
}