@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:auto}
html, body{height:100%}
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:'Noto Sans KR','맑은 고딕','Malgun Gothic','돋움','dotum',sans-serif;font-size:14px;color:#fff;line-height:1;background:#fff}
input,textarea,button,select{font-size:inherit;font-family:'Noto Sans KR','맑은 고딕','Malgun Gothic','돋움','dotum',sans-serif;color:#fff}
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}
button{border:0;cursor:pointer;outline:0}

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

/* common */
.bg_section{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0502_children/bg.jpg") center 0 no-repeat}
.nav li a, #aside .banner, #aside .copyright, #wrap .scroll, #wrap .scroll span, .link span{display:block;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0502_children/spr.png") no-repeat;text-indent:-99999px;overflow:hidden}
.nav ul{position:relative;*zoom:1}
.nav ul:after{content:"";display:block;clear:both}
.nav li{float:left}
#wrap .scroll{position:absolute;bottom:2.91%;left:50%;width:63px;height:44px;background-position:0 -82px;margin-left:-31px}
#wrap .scroll span{position:absolute;left:47%;opacity:0;filter:alpha(opacity=100)}
#wrap .scroll ._a1{bottom:22px;width:23px;height:9px;background-position:-87px -95px;margin-left:-11px;animation:scrollOp1 2s infinite linear}
#wrap .scroll ._a2{bottom:33px;width:17px;height:7px;background-position:-90px -86px;margin-left:-8px;animation:scrollOp2 2s 200ms infinite linear}
#wrap .scroll ._a3{bottom:39px;width:13px;height:4px;background-position:-92px -83px;margin-left:-6px;animation:scrollOp3 2s 400ms infinite linear}
.section .cloud{top:20%;width:1920px;height:1057px;margin-top:-261px}
.section .cloud._c1{left:-410px;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0502_children/bg_cloud_intro_l.png") center 0 no-repeat}
.section .cloud._c2{right:-410px;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0502_children/bg_cloud_intro_r.png") 100% 0 no-repeat}
#wrap.max .bg_section{background-size:cover}
#wrap.max .shadow, #wrap.max .thunder, #wrap.max .flame, #wrap.max .cloud._c1, #wrap.max .cloud._c2{top:auto;bottom:0}

/* header */
#header h1 a, #header .util li a span, #header .util button{display:block;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0502_bj/spr.png") no-repeat;text-indent:-9999px;overflow:hidden}
#header{position:absolute;top:0;left:0;right:0;height:106px;border-bottom:1px solid #262626;z-index:100}
#header h1, #header .util{position:absolute}
#header h1{top:19px;left:46px}
#header h1 a{width:100px;height:69px}
#header .util{position:absolute;top:35px;right:42px;padding-right:324px}
#header .util ul{position:relative;*zoom:1}
#header .util ul:after{content:"";display:block;clear:both}
#header .util li{float:left;margin-left:10px}
#header .util li a{position:relative;display:block;width:36px;height:36px;border:1px solid #262626}
#header .util li a:hover{border-color:#EDEDED}
#header .util li a:before{content:"";position:absolute;bottom:0;left:0;display:block;width:100%;height:0;background:#ededed;transition:height 150ms ease}
#header .util li a:hover:before{top:0;height:100%}
#header .util li span{position:relative;width:100%;height:100%}
#header .util .btn_h span{background-position:-1px -263px}
#header .util .btn_c span{background-position:-49px -263px}
#header .util li .bubble{position:absolute;width:114px;height:25px;filter:alpha(opacity=0);opacity:0;pointer-events:none}
#header .util .btn_h .bubble{top:-32px;left:-94px;background-position:-454px -554px;transform:translateY(5px)}
#header .util .btn_c .bubble{bottom:-31px;left:-96px;background-position:-308px -554px;transform:translateY(-5px)}
#header .util li a:hover .bubble{filter:alpha(opacity=100);opacity:1;transition:all 300ms ease;transform:translateY(0)}
#header .util .btn_start{position:absolute;right:0;top:-3px;width:286px;height:43px;background-position:0 -112px}
#header .util .btn_start:hover{background-position:0 -189px}
#header .nav{position:absolute;top:49px;left:176px;overflow:hidden}
#header .nav ul{margin-left:-1px}
#header .nav li{width:176px;border-left:1px solid #000200}
#header .nav li a{width:114px;height:20px;margin:0 auto}
#header .nav .nav1 a{background-position:-176px 0}
#header .nav .nav2 a{background-position:-352px 0}
#header .nav .nav3 a{background-position:-528px 0}
#header .nav .nav0.on a, #header .nav .nav0 a:hover{background-position:0 -48px}
#header .nav .nav1.on a, #header .nav .nav1 a:hover{background-position:-176px -48px}
#header .nav .nav2.on a, #header .nav .nav2 a:hover{background-position:-352px -48px}
#header .nav .nav3.on a, #header .nav .nav3 a:hover{background-position:-528px -48px}

/* aside */
#aside{position:fixed;left:33px;bottom:32px;z-index:100}
#aside .banner{width:283px;height:135px;background-position:0 -150px;margin-bottom:30px}
#aside .copyright{width:280px;height:12px;background-position:-162px -98px}

/* content */
#content{position:relative;height:100%}
#content .section{position:absolute;top:100%;left:0;width:100%;height:100%}
#content .section.on{top:0}

/* intro */
.intro{top:0}
.intro .cloud, .intro .char, .intro .title_wrap div, .intro .title_wrap span{position:absolute}
.intro .char{top:20%;left:-9px;width:920px;height:1241px;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0502_children/bg_char_intro.png") no-repeat;transform:translateY(100px);filter:alpha(opacity=100);opacity:0;margin-top:-142px}
.intro.on .char{opacity:1;transform:translateY(0);transition:opacity 300ms ease, transform 500ms cubic-bezier(0, 0.8, 0.3, 1.4)}
.intro .title_wrap{position:relative;height:100%}
.intro .title_wrap div span{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0502_children/spr_title.png") no-repeat;opacity:0;filter:alpha(opacity=100)}
.intro.on .title_wrap div span{opacity:1}
.intro.on .title_wrap .headline .txt{transition:opacity 300ms linear, transform 600ms cubic-bezier(0, 1, 1, 1)}
.intro .title_wrap .headline .bubble{transform:scale(0.9)}
.intro.on .title_wrap .headline .bubble{transform:scale(1);transition:all 200ms ease}
.intro .title_wrap ._h1{top:20%;left:-229px;width:649px;height:301px;margin-top:-52px}
.intro .title_wrap ._h2{top:20%;left:668px;width:667px;height:302px;margin-top:29px}
.intro .title_wrap ._h1 .txt{transform:translate(400px, -48px)}
.intro .title_wrap ._h1 ._t1{top:58px;left:0;width:216px;height:243px;background-position:0 -58px}
.intro.on .title_wrap ._h1 ._t1{transition-delay:100ms}
.intro .title_wrap ._h1 ._t2{top:28px;left:226px;width:197px;height:245px;background-position:-226px -28px}
.intro.on .title_wrap ._h1 ._t2{transition-delay:150ms}
.intro .title_wrap ._h1 ._t3{top:0;left:456px;width:193px;height:243px;background-position:-456px 0}
.intro.on .title_wrap ._h1 ._t3{transition-delay:200ms}
.intro .title_wrap ._h1 .bubble{top:-110px;left:-53px;width:795px;height:471px;background-position:-882px 0}
.intro.on .title_wrap ._h1 .bubble{transition-delay:450ms}
.intro .title_wrap ._h2 .txt{transform:translate(-400px, 48px)}
.intro .title_wrap ._h2 ._t1{top:57px;left:0;width:216px;height:245px;background-position:0 -456px}
.intro.on .title_wrap ._h2 ._t1{transition-delay:400ms}
.intro .title_wrap ._h2 ._t2{top:29px;left:223px;width:214px;height:247px;background-position:-223px -428px}
.intro.on .title_wrap ._h2 ._t2{transition-delay:350ms}
.intro .title_wrap ._h2 ._t3{top:0;left:449px;width:218px;height:244px;background-position:-449px -399px}
.intro.on .title_wrap ._h2 ._t3{transition-delay:300ms}
.intro.on .title_wrap ._h2 .bubble{transition-delay:750ms}
.intro .title_wrap ._h2 .bubble{top:-76px;left:184px;width:554px;height:338px;background-position:-1123px -719px}
.intro.on .title_wrap .headline .txt{transform:translate(0, 0)}
.intro .title_wrap .subtitle{top:20%;left:98px;width:338px;height:286px;margin-top:160px;opacity:0;filter:alpha(opacity=100);transform:translate(200px, -50px)}
.intro .title_wrap .subtitle .txt{left:0;bottom:0;width:303px;height:238px;background-position:0 -819px}
.intro.on .title_wrap .subtitle{opacity:1;transform:translate(0,0);transition:opacity 300ms ease, transform 1.5s cubic-bezier(0, 0.8, 0, 1);transition-delay:600ms}
.intro .title_wrap .subtitle .wing{top:0;right:0;width:161px;height:129px;transform-origin:0 100%;background-position:-471px -836px}
.intro.on .title_wrap .subtitle .wing{animation:introWing 600ms 700ms ease-out;transition:opacity 300ms 700ms ease}
.intro .nav{position:absolute;top:20%;left:182px;margin-top:465px}
.intro .nav li{opacity:0;filter:alpha(opacity=100);transform:scale(0);margin-right:47px}
.intro.on .nav li{transform:scale(1);opacity:1;transition:opacity 300ms linear, transform 400ms cubic-bezier(0, 1, 0.1, 1.1)}
.intro .nav li a{position:relative;width:218px;height:218px}
.intro .nav li a:hover{animation:navHover 800ms infinite alternate ease}
.intro.on .nav .nav1{transition-delay:1.05s}
.intro.on .nav .nav2{transition-delay:1.15s}
.intro.on .nav .nav3{transition-delay:1.25s}
.intro .nav .nav1 a{background-position:0 -362px}
.intro .nav .nav2 a{background-position:-258px -362px}
.intro .nav .nav3{margin-right:0}
.intro .nav .nav3 a{background-position:-517px -362px}

/* sub */
.sub .content_wrap{position:relative;height:100%}
.sub .content_wrap h3, .sub .content_wrap .subtitle, .sub .content_wrap p, .sub2 .content_wrap .box, .sub3 .content_wrap li{position:absolute;top:20%;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0502_children/spr_content_sub.png") no-repeat;text-indent:-99999px;overflow:hidden;opacity:0;filter:alpha(opacity=100);transition:all 300ms ease}
.sub.on .content_wrap h3, .sub.on .content_wrap .subtitle, .sub.on .content_wrap p, .sub2.on .content_wrap .box, .sub3.on .content_wrap li{opacity:1}
.sub.on .content_wrap h3{transition-delay:100ms}
.sub1 .gif, .sub2 .content_wrap .box{transform:translateY(30px);transition:opacity 300ms linear, all 500ms ease}
.sub1.on .gif, .sub2.on .content_wrap .box{transform:translateY(0);opacity:1}
.sub.on .content_wrap p:nth-of-type(1){transition-delay:200ms}
.sub .object_wrap{position:absolute;top:0;left:0;width:100%;height:100%}
.sub .object_wrap span{position:absolute;top:20%;opacity:0}
.sub.on .object_wrap span{opacity:1;transform:translate(0,0) rotate(0) !important}

/* link */
.sub .link{display:none;position:fixed;bottom:0;right:0;width:218px;height:218px;transition:all 500ms ease}
.sub.on .link{display:block}
.sub .link span{position:absolute}
.sub .link .bg{top:0;right:0;width:100%;height:100%}
.sub .link .txt{top:74px;left:64px;width:128px;height:126px}
.sub .link .arrow{right:20px;bottom:23px;width:43px;height:43px;animation:linkArrow 600ms alternate infinite linear}
.sub .link .arrow span{top:-4px;left:-4px;width:100%;height:100%}

/* sub1 */
.sub1 .gif{position:absolute;top:20%;left:293px;opacity:0;filter:alhpa(opacity=100);margin-top:216px}
.sub1.on .gif{opacity:1;transition-delay:300ms}
.sub1 .link .bg{background-position:-982px 0}
.sub1 .link .txt{background-position:-854px -92px}
.sub1 .link .arrow{background-position:-857px 0}
.sub1 .link .arrow span{background-position:-939px 0}
.sub1 .content_wrap .subtitle{left:354px;width:335px;height:74px;background-position:-47px 0;margin-top:-53px}
.sub1 .content_wrap h3{left:307px;width:441px;height:82px;background-position:0 -86px;margin-top:33px}
.sub1 .content_wrap ._p2, .sub1 .content_wrap ._p3{transform:translateY(-20px)}
.sub1.on .content_wrap ._p2, .sub1.on .content_wrap ._p3{transform:translateY(0)}
.sub1 .content_wrap ._p1{left:355px;width:355px;height:63px;background-position:-48px -190px;margin-top:137px}
.sub1 .content_wrap ._p2{left:429px;width:230px;height:26px;background-position:-138px -305px;margin-top:595px}
.sub1.on .content_wrap ._p2{transition-delay:400ms}
.sub1 .content_wrap ._p3{left:291px;width:492px;height:22px;background-position:0 -346px;margin-top:636px}
.sub1.on .content_wrap ._p3{transition-delay:450ms}
.sub1 .object_wrap .thunder, .sub1 .object_wrap .shadow{height:1058px;margin-top:-262px}
.sub1 .object_wrap span{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0502_children/spr_obj_sub1.png") no-repeat}
.sub1 .object_wrap ._t1{left:-406px;width:468px;background-position:-1144px 0}
.sub1.on .object_wrap ._t1{animation:lightening 500ms 2 linear;transition-delay:1s}
.sub1 .object_wrap ._t2{left:1023px;width:432px;background-position:-1891px 0}
.sub1.on .object_wrap ._t2{animation:lightening 500ms 250ms 2 ease;transition-delay:1.25s}
.sub1.on .object_wrap .shadow{transition:opacity 300ms linear}
.sub1 .object_wrap ._s1{left:-410px;width:509px;background-position:-2684px 0}
.sub1 .object_wrap ._s2{left:980px;width:465px;background-position:-3383px 0}
.sub1 .object_wrap ._d1{left:-534px;width:726px;height:674px;margin-top:-395px}
.sub1.on .object_wrap ._d1{transition:opacity 300ms linear;transition-delay:600ms;animation:dragon1 2s 600ms ease-out}
.sub1 .object_wrap ._d2{left:837px;width:1000px;height:740px;background-position:0 -734px;margin-top:-11px}
.sub1.on .object_wrap ._d2{transition:opacity 300ms linear;transition-delay:400ms;animation:dragon2 2s 400ms ease-out}

/* sub2 */
.sub2 .link .bg{background-position:-982px -266px}
.sub2 .link .txt{background-position:-854px -358px}
.sub2 .link .arrow{background-position:-857px -266px}
.sub2 .link .arrow span{background-position:-939px -266px}
.sub2 .content_wrap .subtitle{left:380px;width:297px;height:66px;background-position:-194px -462px;margin-top:-51px}
.sub2 .content_wrap h3{left:186px;width:671px;height:85px;background-position:0 -541px;margin-top:28px}
.sub2 .content_wrap p{left:310px;width:453px;height:63px;background-position:-124px -658px;margin-top:145px}
.sub2 .content_wrap .box{left:111px;width:806px;height:342px;background-position:-865px 0;margin-top:246px}
.sub2.on .content_wrap .box{transition-delay:300ms}
.sub2 .content_wrap .box .plus{position:absolute;top:123px;left:373px;width:85px;height:85px}
.sub2 .content_wrap .box .plus span{position:absolute;background:#12FFAE;}
.sub2 .content_wrap .box .plus .h{top:0;left:29px;width:27px;height:85px}
.sub2 .content_wrap .box .plus .v{top:29px;left:0;width:85px;height:27px}
.sub2.on .content_wrap .box .plus{animation:rotation 800ms 400ms ease}
.sub2 .object_wrap .flame{position:absolute;top:20%;height:1058px;margin-top:-262px}
.sub2 .object_wrap .flame span{top:auto;bottom:0;width:100%;height:0;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0502_children/spr_flame_sub2.png") no-repeat}
.sub2.on .object_wrap .flame span{height:100%;transition:opacity 500ms linear, height 500ms ease}
.sub2 .object_wrap ._f1{left:-410px;width:909px}
.sub2 .object_wrap ._f1 span{right:0;background-position:0 100%}
.sub2 .object_wrap ._f2{left:608px;width:902px;transform-origin:0 100%}
.sub2 .object_wrap ._f2 span{left:0;background-position:100% 100%}
.sub2.on .object_wrap ._f2 span{transition-delay:200ms}
.sub2 .object_wrap .stone{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0502_children/spr_stone_sub2.png") no-repeat}
.sub2 .object_wrap .stone.sr{transform:translate(-50%, 50%)}
.sub2 .object_wrap .stone.sl{transform:translate(50%, 50%)}
.sub2.on .object_wrap .stone{transition:opacity 500ms ease, transform 2s cubic-bezier(0, 0.99, 1, 1)}
.sub2 .object_wrap ._s1{left:-363px;width:502px;height:750px;background-position:0 -1170px;margin-top:-319px}
.sub2 .object_wrap ._s2{left:-306px;width:257px;height:252px;background-position:0 -2025px;margin-top:535px}
.sub2 .object_wrap ._s3{left:156px;width:144px;height:123px;background-position:-373px -2151px;margin-top:675px}
.sub2 .object_wrap ._s4{left:-379px;width:484px;height:653px;background-position:-666px -1135px;margin-top:-167px}
.sub2 .object_wrap ._s5{left:-421px;width:241px;height:284px;background-position:-686px -2009px;margin-top:-227px}
.sub2 .object_wrap ._s6{left:-196px;width:166px;height:282px;background-position:-1014px -2071px;margin-top:339px}
.sub2 .object_wrap ._s7{left:-414px;width:249px;height:293px;background-position:0 -2343px;margin-top:48px}
.sub2 .object_wrap ._s8{left:-319px;width:405px;height:758px;background-position:-1595px -1102px;margin-top:-277px}
.sub2 .object_wrap ._s9{left:-441px;width:600px;height:287px;background-position:0 -2671px;margin-top:-50px}
.sub2 .object_wrap ._s10{left:-188px;width:386px;height:182px;background-position:-373px -2489px;margin-top:227px}
.sub2 .object_wrap ._s11{left:1333px;width:299px;height:437px;background-position:-2540px 0;margin-top:-361px}
.sub2 .object_wrap ._s12{left:685px;width:148px;height:221px;background-position:-2258px 0;margin-top:639px}
.sub2 .object_wrap ._s13{left:1134px;width:354px;height:379px;background-position:-2052px -420px;margin-top:519px}
.sub2 .object_wrap ._s14{left:1165px;width:192px;height:277px;background-position:-2332px -901px;margin-top:-327px}
.sub2 .object_wrap ._s15{left:1002px;width:566px;height:512px;background-position:-2000px -1326px;margin-top:15px}
.sub2 .object_wrap ._s16{left:1357px;width:189px;height:265px;background-position:-2566px -508px;margin-top:127px}
.sub2 .object_wrap ._s17{left:1154px;width:187px;height:307px;background-position:-2686px -858px;margin-top:137px}
.sub2 .object_wrap ._s18{left:1342px;width:186px;height:219px;background-position:-3029px -19px;margin-top:335px}
.sub2 .object_wrap ._s19{left:984px;width:167px;height:356px;background-position:-3375px 0;margin-top:-162px}
.sub2 .object_wrap ._s20{left:991px;width:290px;height:228px;background-position:-3397px -461px;margin-top:-77px}
.sub2 .object_wrap ._s21{left:991px;width:253px;height:362px;background-position:-2941px -460px;margin-top:-77px}
.sub2.on .object_wrap ._s1{transition-delay:160ms}
.sub2.on .object_wrap ._s2{transition-delay:80ms}
.sub2.on .object_wrap ._s3{transition-delay:300ms}
.sub2.on .object_wrap ._s4{transition-delay:50ms}
.sub2.on .object_wrap ._s5{transition-delay:150ms}
.sub2.on .object_wrap ._s6{transition-delay:400ms}
.sub2.on .object_wrap ._s7{transition-delay:250ms}
.sub2.on .object_wrap ._s8{transition-delay:550ms}
.sub2.on .object_wrap ._s9{transition-delay:450ms}
.sub2.on .object_wrap ._s10{transition-delay:200ms}
.sub2.on .object_wrap ._s11{transition-delay:350ms}
.sub2.on .object_wrap ._s12{transition-delay:250ms}
.sub2.on .object_wrap ._s13{transition-delay:180ms}
.sub2.on .object_wrap ._s14{transition-delay:350ms}
.sub2.on .object_wrap ._s15{transition-delay:500ms}
.sub2.on .object_wrap ._s16{transition-delay:150ms}
.sub2.on .object_wrap ._s17{transition-delay:650ms}
.sub2.on .object_wrap ._s18{transition-delay:100ms}
.sub2.on .object_wrap ._s19{transition-delay:430ms}
.sub2.on .object_wrap ._s20{transition-delay:600ms}
.sub2.on .object_wrap ._s21{transition-delay:80ms}

/* sub3 */
.sub3 .link .bg{background-position:-982px -562px}
.sub3 .link .txt{background-position:-854px -654px}
.sub3 .link .arrow{background-position:-857px -562px}
.sub3 .link .arrow span{background-position:-939px -562px}
.sub3 .content_wrap .subtitle{left:395px;width:301px;height:74px;background-position:-185px -836px;margin-top:-52px}
.sub3 .content_wrap h3{left:210px;width:647px;height:80px;margin-top:32px;background-position:0 -920px}
.sub3 .content_wrap p{left:459px;width:181px;height:26px;background-position:-249px -1031px;margin-top:143px}
.sub3 .content_wrap .box{position:absolute;top:20%;left:19px;margin-top:246px;*zoom:1}
.sub3 .content_wrap .box:after{content:"";display:block;clear:both}
.sub3 .content_wrap .box li{top:0;width:348px;height:342px}
.sub3 .content_wrap .box ._l1{left:0;background-position:-865px -390px;transform:translateY(-30px)}
.sub3 .content_wrap .box ._l2{left:348px;width:365px;background-position:-1213px -390px;transform:translateY(30px)}
.sub3 .content_wrap .box ._l3{left:731px;background-position:-1596px -389px;transform:translateY(-30px)}
.sub3 .content_wrap .box li{float:left;transition:opacity 300ms linear, transform 500ms ease}
.sub3.on .content_wrap .box li{transform:translateY(0)}
.sub3.on .content_wrap .box ._l1{transition-delay:350ms}
.sub3.on .content_wrap .box ._l2{transition-delay:450ms}
.sub3.on .content_wrap .box ._l3{transition-delay:550ms}
.sub3 .object_wrap .balloon{width:127px;height:186px;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0502_children/spr_obj_sub3.png") no-repeat} 
.sub3 .object_wrap .red{background-position:-191px 0}
.sub3 .object_wrap .blue{background-position:-382px 0}
.sub3 .object_wrap .purple{background-position:-573px 0}
.sub3 .object_wrap ._b1{left:-125px;margin-top:-36px;transform:translate(150px, 300px) rotate(15deg)}
.sub3 .object_wrap ._b2{left:-277px;margin-top:150px;transform:translate(-50px, 300px) rotate(-20deg)}
.sub3 .object_wrap ._b3{left:1101px;margin-top:432px;transform:translate(50px, 100px) rotate(10deg)}
.sub3 .object_wrap ._b5{left:-441px;margin-top:376px;transform:translate(100px, 300px) rotate(-10deg)}
.sub3 .object_wrap ._b6{left:-37px;margin-top:550px;transform:translate(100px, 200px) rotate(8deg)}
.sub3 .object_wrap ._b7{left:339px;margin-top:750px;transform:translate(150px, 200px)}
.sub3 .object_wrap ._b8{left:1121px;margin-top:628px;transform:translate(200px, 100px)}
.sub3 .object_wrap ._b9{left:1339px;margin-top:458px;transform:translate(200px, 200px) rotate(15deg)}
.sub3 .object_wrap ._b10{left:1125px;margin-top:29px;transform:translate(250px, 350px) rotate(10deg)}
.sub3 .object_wrap ._b11{left:869px;margin-top:-176px;transform:translate(-50px, 400px) rotate(10deg)}
.sub3.on .object_wrap .balloon{transition:opacity 300ms ease, transform 3s ease}
.sub3.on .object_wrap ._b1{transition-delay:600ms}
.sub3.on .object_wrap ._b3{transition-delay:50ms}
.sub3.on .object_wrap ._b5{transition-delay:400ms}
.sub3.on .object_wrap ._b6{transition-delay:100ms}
.sub3.on .object_wrap ._b7{transition-delay:300ms}
.sub3.on .object_wrap ._b8{transition-delay:500ms}
.sub3.on .object_wrap ._b9{transition-delay:800ms}
.sub3.on .object_wrap ._b10{transition-delay:200ms}
.sub3.on .object_wrap ._b11{transition-delay:700ms}

@keyframes rotation{
    0%{transform:rotate(450deg)}
    100%{transform:rotate(0)}
}

@keyframes scrollOp1{
    0%{opacity:0}
    20%{opacity:1}
    70%{opacity:1}
    90%{opacity:0}
    100%{opacity:0}
}

@keyframes scrollOp2{
    0%{opacity:0}
    30%{opacity:1}
    60%{opacity:1}
    80%{opacity:0}
    100%{opacity:0}
}

@keyframes scrollOp3{
    0%{opacity:0}
    40%{opacity:1}
    50%{opacity:1}
    70%{opacity:0}
    100%{opacity:0}
}

@keyframes linkArrow{
    0%{transform:translate(0, 0)}
    100%{transform:translate(5px, 8px)}
}

@keyframes lightening{
    0%{opacity:0}
    50%{opacity:1}
    70%{opacity:0}
    90%{opacity:1}
    100%{opacity:0}
}

@keyframes dragon1{
    0%{transform:translate(-121px, -108px);opacity:0}
    25%{transform:translate(-36px, -33px);opacity:1}
    100%{transform:translate(0, 0)}
}

@keyframes dragon2{
    0%{transform:translate(200px, 100px);opacity:0}
    15%{transform:translate(30px, 30px);opacity:1}
    100%{transform:translate(0, 0)}
}

@keyframes navHover{
    0%{transform:translateY(0)}
    100%{transform:translateY(-20px)}
}

@keyframes introWing{
    0%{transform:rotate(45deg)}
    50%{transform:rotate(-10deg)}
    80%{transform:rotate(10deg)}
    100%{transform:rotate(0deg)}
}

@keyframes titleLeft{
    0%{transform:translate(200px, -48px)}
    20%{transform:translate(40px, -10px)}
    100%{transform:translate(0, 0)}
}

@keyframes titleRight{
    0%{transform:translate(-200px, 50px)}
    20%{transform:translate(-60px, 10px)}
    100%{transform:translate(0, 0)}
}

.naver #wrap{height:995px}
.naver .sub .link{position:absolute}