@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:'Noto Sans KR','돋움','dotum',sans-serif;font-size:14px;color:#262626;line-height:1;background:#9dbaff}
input,textarea,button,select{font-size:inherit;font-family:'Noto Sans KR','돋움','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%;overflow:hidden}
.section .container{position:relative;width:1199px;height:100%;margin:0 auto}
.section .bg_section{position:absolute;top:0;left:0;width:99.99%;height:100%;padding-left:0.01%}

/* common */
.section{min-height:900px}
#header h1 a, #header .util li a span, #header .util button, #wrap .copyright, .intro .banner span, .scroll_wrap span, .content .bj_list .btn, .content .bj_list .btn span, .content .btn_detail{display:block;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0620_bj_0zqvm7/spr.png") no-repeat;text-indent:-9999px;overflow:hidden}
.gnbWrapper{min-width:1280px !important}
.section .object_wrap{position:absolute;left:0;width:100%}
.object_wrap div, .object_wrap span{position:absolute}
.scroll_wrap{position:fixed;bottom:0;left:50%;width:202px;height:93px;overflow:hidden;margin-left:-101px;z-index:2}
.scroll_wrap .dot{position:absolute;top:0;left:0;width:100%;height:202px;background-position:-366px 0;animation:rotateScroll 20s infinite linear}
.scroll_wrap .scroll{position:absolute;top:44px;left:44px;width:100px;height:36px;background-position:-119px 0;overflow:visible}
.scroll_wrap .scroll .lever{position:absolute;top:-4px;right:-6px;width:8px;height:8px;background:#2DFFE9;border:4px solid #363636;border-radius:100%;animation:scrollLever 1.8s infinite ease}
.twinkle_wrap span{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0620_bj_0zqvm7/spr_twinkle.png") no-repeat}

/* header */
#wrap.fixed #header, #wrap.fixed .border_header{position:fixed}
#header{position:absolute;top:0;left:0;right:0;height:106px;z-index:100}
#wrap .border_header{position:absolute;top:106px;left:0;right:0;height:0;overflow:hidden;border-bottom:1px solid #262626;z-index:1}
#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}
 
/* nav */
#nav{position:absolute;top:52px;left:50%;margin-left:-544px}
#nav ul{position:relative;*zoom:1}
#nav ul:after{content:"";display:block;clear:both}
#nav li{float:left;min-width:164px;margin:0 71px 0 70px}
#nav li:first-child{width:164px}
#nav li:nth-child(2){width:175px}
#nav li a{display:block;position:relative;white-space:nowrap;text-align:center}
#nav li .txt{font-size:25px;letter-spacing:-0.03em}
#nav li .blt{position:absolute;bottom:-45px;left:50%;width:22px;height:22px;border:4px solid #3D3D3D;border-radius:100%;background:#F4F2EC;margin-left:-15px}
#nav li.on .blt, #nav li a:hover .blt{background:#2DFFE9}

/* flower shower */
#flower span{position:fixed;left:50%;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0620_bj_0zqvm7/spr_flowers.png") no-repeat;z-index:1;opacity:0;transition:opacity 200ms ease, transform 800ms ease}
#flower ._f1{top:198px;width:81px;height:90px;margin-left:-859px;transform:translate(-50%, -198px) rotate(-20deg);transition-delay:950ms}
#flower ._f2{top:211px;width:106px;height:116px;background-position:0 -122px;margin-left:-524px;transform:translate(20%, -411px) rotate(45deg);transition-delay:80ms}
#flower ._f3{top:124px;width:91px;height:107px;background-position:0 -277px;margin-left:45px;transform:translate(-10%, -524px) rotate(45deg);transition-delay:520ms}
#flower ._f4{top:22px;width:89px;height:117px;background-position:0 -416px;margin-left:240px;transform:translate(50%, -564px) rotate(80deg);transition-delay:300ms}
#flower ._f5{top:199px;width:80px;height:106px;background-position:0 -567px;margin-left:323px;transform:translate(-15%, -499px) rotate(-180deg)}
#flower ._f6{top:333px;width:78px;height:91px;background-position:0 -697px;margin-left:530px;transform:translate(8%, -533px) rotate(-45deg);transition-delay:420ms}
#flower ._f7{top:348px;width:102px;height:120px;background-position:0 -812px;margin-left:785px;transform:translate(-5%, -448px) rotate(120deg);transition-delay:250ms}
#flower ._f8{top:466px;width:97px;height:109px;background-position:0 -977px;margin-left:606px;transform:translate(28%, -466px) rotate(-80deg);transition-delay:400ms}
#flower ._f9{top:370px;width:90px;height:113px;background-position:0 -1126px;margin-left:-705px;transform:translate(20%, -370px) rotate(120deg);transition-delay:820ms}
#flower ._f10{top:465px;width:103px;height:122px;background-position:0 -1290px;margin-left:-643px;transform:translate(-40%, -465px) rotate(-75deg);transition-delay:200ms}
#flower ._f11{top:462px;width:107px;height:114px;background-position:0 -1439px;margin-left:-877px;transform:translate(5%, -462px) rotate(90deg);transition-delay:660ms}
#flower ._f12{top:706px;width:96px;height:114px;background-position:0 -1600px;margin-left:-883px;transform:translate(60%, -384px) rotate(-50deg);transition-delay:500ms}
#flower ._f13{top:807px;width:97px;height:115px;background-position:0 -1776px;margin-left:-699px;transform:translate(-45%, -435px) rotate(12deg);transition-delay:100ms}
#flower ._f14{top:889px;width:108px;height:117px;background-position:0 -1930px;margin-left:-1003px;transform:translate(25%, -476px) rotate(-12deg);transition-delay:720ms}
#flower ._f15{top:1013px;width:89px;height:117px;background-position:0 -2100px;margin-left:-498px;transform:translate(-15%, -538px) rotate(60deg);transition-delay:350ms}
#flower ._f16{top:927px;width:91px;height:113px;background-position:0 -2250px;margin-left:-271px;transform:translate(5%, -495px) rotate(-30deg);transition-delay:900ms}
#flower ._f17{top:1026px;width:97px;height:109px;background-position:0 -2390px;margin-left:366px;transform:translate(13%, -545px) rotate(20deg);transition-delay:150ms}
#flower ._f18{top:835px;width:107px;height:115px;background-position:0 -2550px;margin-left:641px;transform:translate(-33%, -449px) rotate(80deg);transition-delay:550ms}
#flower ._f19{top:691px;width:97px;height:108px;background-position:0 -2700px;margin-left:744px;transform:translate(10%, -377px) rotate(-28deg);transition-delay:650ms}
#flower ._f20{top:893px;width:108px;height:117px;background-position:0 -2858px;margin-left:901px;transform:translate(80%, -478px) rotate(68deg);transition-delay:450ms}
#flower ._f21{top:282px;width:82px;height:90px;background-position:0 -3050px;margin-left:-98px;transform:translate(3%, -282px) rotate(80deg);transition-delay:600ms}
#flower ._f22{top:378px;width:97px;height:115px;background-position:0 -3185px;margin-left:-145px;transform:translate(3%, -378px) rotate(-90deg);transition-delay:50ms}
.load #flower span{opacity:1;transform:translate(0,0) rotate(0deg)}

/* intro */
.intro .title_wrap{top:281px}
.max .intro .object_wrap{top:auto;bottom:0;max-height:995px}
.max .intro .title_wrap{height:714px}
.intro .object_wrap span{opacity:0;filter:alpha(opacity=100)}
.load .intro .object_wrap span{opacity:1}
.intro .title_wrap span{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0620_bj_0zqvm7/spr_title_intro.png") no-repeat}
.intro .title_wrap div span{transition:opacity 200ms ease, transform 300ms ease}
.load .intro .title_wrap div .front{transform:translateX(0)}
.intro .title_wrap .h2 span{height:100%}
.intro .title_wrap ._h1{top:60px;width:410px;height:218px}
.intro .title_wrap ._h1 span{top:0;width:389px;transition-delay:200ms}
.intro .title_wrap ._h1 .front{left:0;transform:translateX(21px)}
.intro .title_wrap ._h1 .back{right:0;background-position:-476px 0}
.intro .title_wrap ._h2{top:301px;left:18px;width:427px;height:125px;z-index:2}
.intro .title_wrap ._h2 span{top:0;width:413px;transition-delay:300ms}
.intro .title_wrap ._h2 .back{right:0;background-position:-476px -264px}
.intro .title_wrap ._h2 .front{left:0;background-position:0 -264px;transform:translateX(14px)}
.intro .title_wrap ._h3{top:0;left:716px;width:303px;height:283px}
.intro .title_wrap ._h3 span{width:277px;transition-delay:500ms}
.intro .title_wrap ._h3 .front{right:0;background-position:0 -477px;transform:translateX(-26px)}
.intro .title_wrap ._h3 .back{background-position:-438px -477px}
.intro .title_wrap ._h4{top:247px;left:860px;width:295px;height:286px}
.intro .title_wrap ._h4 span{transition-delay:600ms}
.intro .title_wrap ._h4 .back{width:100%;background-position:-438px -832px}
.intro .title_wrap ._h4 .front{width:268px;right:0;background-position:0 -832px;transform:translateX(-27px)}
.intro .title_wrap .ribbon{z-index:2;transform:scale(0.9);transition:opacity 200ms ease, transform 300ms cubic-bezier(0, .5, .3, 2)}
.load .intro .title_wrap .ribbon{transform:scale(1)}
.intro .title_wrap ._r1{top:403px;left:39px;width:575px;height:176px;background-position:0 -1168px;transition-delay:720ms}
.intro .title_wrap ._r2{top:455px;left:178px;width:528px;height:166px;background-position:-470px -1472px;transition-delay:800ms}
.intro .char_wrap{top:11px;height:984px}
.intro .char_wrap span{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0620_bj_0zqvm7/spr_char_intro.png") no-repeat}
.intro .char_wrap ._bj{bottom:0;left:279px;width:616px;height:984px;z-index:1;transform:translateY(100px)}
.intro .char_wrap ._bj span{width:100%;height:100%;transform-origin:50% 100%}
.load .intro .char_wrap ._bj span{animation:vibrate 80ms 7 linear}
.load .intro .char_wrap ._bj{transform:translateY(0);transition:opacity 300ms ease, transform 500ms ease-out}
.intro .char_wrap .bubble{transform-origin:0 100%;transition:opacity 300ms ease}
.intro .char_wrap ._b1{top:127px;left:689px;width:137px;height:78px;background-position:-812px 0}
.intro .char_wrap ._b2{top:173px;left:766px;width:154px;height:102px;background-position:-812px -124px}
.load .intro .char_wrap ._b1{animation:titleBubble1 450ms ease;transition-delay:350ms;animation-delay:350ms}
.load .intro .char_wrap ._b2{animation:titleBubble2 450ms ease;transition-delay:450ms;animation-delay:450ms}
.intro .twinkle_wrap{top:0;height:100%}
.intro .twinkle_wrap span{transition:opacity 200ms linear}
.intro .twinkle_wrap .t97{width:97px;height:97px}
.intro .twinkle_wrap .t48{width:48px;height:47px;background-position:-171px -25px}
.intro .twinkle_wrap .t61{width:61px;height:61px;background-position:-293px -18px}
.intro .twinkle_wrap .t36{width:36px;height:36px;background-position:-428px -30px}
.intro .twinkle_wrap ._t1{top:197px;left:-91px;animation:twinkle97_1 600ms steps(2, end) infinite}
.intro .twinkle_wrap ._t2{top:234px;left:215px;animation:twinkle48_2 600ms steps(2, start) infinite}
.intro .twinkle_wrap ._t3{top:501px;left:-135px;animation:twinkle97_2 600ms steps(2, start) infinite}
.intro .twinkle_wrap ._t4{top:872px;left:-9px;animation:twinkle61_1 600ms steps(2, end) infinite}
.intro .twinkle_wrap ._t5{top:173px;left:1266px;animation:twinkle61_1 600ms steps(2, end) infinite}
.intro .twinkle_wrap ._t6{top:382px;left:1115px;animation:twinkle61_2 600ms steps(2, start) infinite}
.intro .twinkle_wrap ._t7{top:447px;left:1355px;animation:twinkle36_1 600ms steps(2, end) infinite}
.intro .twinkle_wrap ._t8{top:624px;left:1454px;animation:twinkle61_2 600ms steps(2, start) infinite}
.intro .twinkle_wrap ._t9{top:847px;left:1091px;animation:twinkle97_2 600ms steps(2, start) infinite}

/* content */
.content{padding-bottom:319px}
.content .content_wrap{position:absolute;top:30%;left:0;width:100%;padding-bottom:3px;margin-top:-171px}
.content .title_wrap{position:relative;margin-bottom:13px}
.content .title_wrap h3, .content .title_wrap p, .content .bj_list li, .content .ps{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0620_bj_0zqvm7/spr_cnt_content.png") no-repeat}
.content .title_wrap h3, .content .title_wrap p, .content .ps{text-indent:-99999px;overflow:hidden}
.content .title_wrap h3{width:407px;height:250px}
.content .title_wrap p{position:absolute;top:95px;left:747px;width:420px;height:140px;background-position:-482px 0}
.content .twinkle_wrap{position:absolute;top:55px;left:704px}
.content .twinkle_wrap span{position:absolute}
.content .twinkle_wrap ._t1{top:0;;left:0;width:48px;height:47px;background-position:-528px -25px;animation:twinkleC1 600ms steps(2, end) infinite}
.content .twinkle_wrap ._t2{top:9px;left:86px;width:29px;height:30px;background-position:-614px -34px;animation:twinkleC2 600ms steps(2, start) infinite}
.content .twinkle_wrap ._t3{top:96px;left:1px;width:37px;height:36px;background-position:-681px -32px;animation:twinkleC3 600ms steps(2, start) infinite}
.content .bj_list{position:relative;margin-bottom:50px}
.content .bj_list ul{overflow:hidden;margin-right:-16px}
.content .bj_list li{position:relative;float:left;width:227px;height:144px;margin-right:16px;padding-top:254px}
.content .bj_list li p{color:#6b6b6b;text-align:center;line-height:17px;font-size:13px}
.content .bj_list ._bj1{background-position:0 -377px}
.content .bj_list ._bj2{background-position:-243px -377px}
.content .bj_list ._bj3{background-position:-486px -377px}
.content .bj_list ._bj4{background-position:-729px -377px}
.content .bj_list ._bj5{background-position:-972px -377px}
.content .bj_list .btn{position:absolute;bottom:19px;left:28px;width:163px;height:40px;overflow:visible;background-position:-121px -317px}
.content .bj_list .btn span{position:absolute}
.content .bj_list .btn .off, .content .bj_list .btn .over{top:12px;height:17px;transition:all 300ms ease}
.content .bj_list .btn .off{left:52px;width:90px;background-position:-327px -329px}
.content .bj_list .btn .over{left:23px;width:0;background-position:-448px -329px}
.content .bj_list .btn .icon{top:0;left:-1px;width:40px;height:40px;background-position:0 -317px;transition:left 350ms ease}
.content .bj_list .btn .over, .content .bj_list .btn:hover .off{filter:alpha(opacity=0);opacity:0}
.content .bj_list .btn:hover .off{opacity:0}
.content .bj_list .btn:hover .over{filter:alpha(opacity=100);opacity:1;width:119px;transition:width 400ms 100ms ease-out}
.content .bj_list .btn:hover .icon{left:124px;background-position:-60px -317px}
.content .ps{position:relative;width:712px;height:34px;background-position:0 -282px}
.content .btn_detail{position:absolute;right:0;bottom:0;width:356px;height:41px;background-position:-142px -260px}
.content .radial_wrap span{width:1725px;height:1725px;top:-492px;left:50%;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0620_bj_0zqvm7/spr_radial_content.png") no-repeat;margin-left:-862px}
.content .radial_wrap ._r1{animation:rotateReverse 360s infinite linear, twinkle1 600ms steps(2, start) infinite}
.content .radial_wrap ._r2{background-position:-1725px 0;animation:rotateReverse 360s infinite linear, ttwinkle2 600ms steps(2, end) infinite}
.content .caution{position:absolute;left:0;bottom:-319px;width:100%;height:319px;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0620_bj_0zqvm7/bg_caution.png") no-repeat;z-index:3}
.content, .content .caution{transition:bottom 300ms ease}
.content.bottom{padding-bottom:0}
.content.bottom .caution{bottom:0}

/* footer */
#wrap .copyright{position:fixed;left:31px;bottom:32px;width:280px;height:12px;background-position:0 -557px}

/* channeling */
.naver #wrap .section{height:995px}
.naver #wrap .scroll_wrap{display:none}

@keyframes scrollLever{
    80%{transform:translateY(32px)}
    100%{transform:translateY(32px)}
}

@keyframes twinkle1{
    0%{opacity:1}
    100%{opacity:0.5}
}

@keyframes twinkle2{
    0%{opacity:0.5}
    100%{opacity:1}
}

@keyframes rotateScroll{
    from{transform:rotate(0)}
    to{transform:rotate(360deg)}
}

@keyframes rotateReverse{
    from{transform:rotate(0)}
    to{transform:rotate(-360deg)}
}

@keyframes twinkle97_1{
    0%{background-position:0 0}
    100%{background-position:0 -194px}
}

@keyframes twinkle97_2{
    0%{background-position:0 -194px}
    100%{background-position:0 0}
}

@keyframes twinkle48_2{
    0%{background-position:-171px -218px}
    100%{background-position:-171px -25px}
}

@keyframes twinkle61_1{
    0%{background-position:-293px -18px}
    100%{background-position:-293px -211px}
}

@keyframes twinkle61_2{
    0%{background-position:-293px -211px}
    100%{background-position:-293px -18px}
}

@keyframes twinkle36_1{
    0%{background-position:-428px -30px}
    100%{background-position:-428px -223px}
}

@keyframes twinkleC1{
    0%{background-position:-528px -25px}
    100%{background-position:-528px -217px}
}

@keyframes twinkleC2{
    0%{background-position:-614px -226px}
    100%{background-position:-614px -34px}
}

@keyframes twinkleC3{
    0%{background-position:-681px -224px}
    100%{background-position:-681px -32px}
}

@keyframes titleBubble1{
    0%{transform:rotate(-15deg)}
    30%{transform:rotate(10deg)}
    60%{transform:rotate(-5deg)}
    80%{transform:rotate(5deg)}
    100%{transform:rotate(0deg)}
}

@keyframes titleBubble2{
    0%{transform:rotate(15deg)}
    30%{transform:rotate(-10deg)}
    60%{transform:rotate(5deg)}
    80%{transform:rotate(-5deg)}
    100%{transform:rotate(0deg)}
}

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