@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:#fff}
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}

/* 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/0725_intro_435F728674B478EC/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:1022px;background:#47295f}
.intro .object_wrap span, .intro .bg_wrap .radial, .intro .sook span{opacity:0}
.intro.load .object_wrap span, .intro.load .bg_wrap .radial, .intro.load .sook span{opacity:1}
.intro .bg_wrap{position:absolute;top:0;left:50%;width:1920px;height:100%;margin-left:-960px}
.intro .bg_wrap span{position:absolute}
.intro .bg_wrap .bar{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0822_event02_ADC50F7412CBF032/spr_bar_intro.png") no-repeat;width:0;transition:width 400ms ease}
.intro .bg_wrap .radial{top:454px;left:50%;width:1010px;height:1010px;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0822_event02_ADC50F7412CBF032/bg_radial_intro.png") no-repeat;margin-left:-447px;transform:scale(0)}
.intro.load .bg_wrap .radial{transform:scale(1);transition:opacity 300ms ease, transform 300ms ease}
.intro .bg_wrap .left{left:0}
.intro .bg_wrap .right{bottom:0}
.intro .bg_wrap ._b1{top:103px;height:145px}
.intro .bg_wrap ._b2{top:-129px;height:411px;background-position:0 -296px}
.intro .bg_wrap ._b3{top:-98px;height:408px;background-position:0 -763px}
.intro .bg_wrap ._b4{top:232px;height:106px;background-position:0 -1322px}
.intro .bg_wrap ._b5{left:1229px;height:259px;background-position:-937px 0}
.intro .bg_wrap ._b6{left:1304px;height:422px;background-position:-937px -404px}
.intro .bg_wrap ._b7{left:1374px;height:390px;background-position:-937px -932px}
.intro .bg_wrap ._b8{left:1437px;height:130px;background-position:-937px -1489px}
.intro.load .bg_wrap ._b1{width:270px;transition-delay:100ms}
.intro.load .bg_wrap ._b2{width:842px;transition-delay:300ms;transition-duration:700ms}
.intro.load .bg_wrap ._b3{width:842px;transition-delay:200ms;transition-duration:700ms}
.intro.load .bg_wrap ._b4{width:204px;transition-delay:400ms}
.intro.load .bg_wrap ._b5{width:553px;transition-delay:350ms;transition-duration:500ms}
.intro.load .bg_wrap ._b6{width:699px;transition-delay:450ms;transition-duration:600ms}
.intro.load .bg_wrap ._b7{width:831px;transition-delay:150ms;transition-duration:700ms}
.intro.load .bg_wrap ._b8{width:277px;transition-delay:250ms}
.intro .title_wrap span{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0822_event02_ADC50F7412CBF032/spr_title_intro.png") no-repeat}
.intro .title_wrap .ribbon{top:143px;left:99px;width:1041px;height:136px}
.intro .title_wrap .ribbon .shape{top:0;left:0;width:0;height:100%;z-index:1}
.intro.load .title_wrap .ribbon .shape{width:1040px;transition:opacity 300ms linear, width 500ms ease;transition-delay:500ms}
.intro .title_wrap .ribbon .tail{top:32px;left:-3px}
.intro .title_wrap .ribbon .txt{top:19px;left:20px;width:356px;height:76px;background-position:0 -176px;z-index:1;transition:opacity 300ms ease, transform 300ms ease;transform:translateX(-10px);transition-delay:550ms}
.intro.load .title_wrap .ribbon .txt{transform:translateX(0)}
.intro .title_wrap .ribbon ._t1{width:278px;height:0;background-position:-1100px 0}
.intro .title_wrap .ribbon ._t2{width:739px;height:728px;background-position:0 -835px}
.intro.load .title_wrap .ribbon ._t1{height:723px;transition:opacity 300ms linear, height 400ms linear;transition-delay:600ms}
.intro.load .title_wrap .ribbon ._t2{width:739px;transition:opacity 300ms linear, width 600ms ease;transition-delay:750ms}
.intro .title_wrap .ribbon .big{top:377px;left:452px;width:382px;height:334px;background-position:-1410px -1222px;transition:opacity 300ms ease;transition-delay:950ms}
.intro .title_wrap .headline{transform:translateX(-100px) skewX(10deg);transition:opacity 300ms ease, transform 500ms cubic-bezier(0, 1, 1, 1)}
.intro.load .title_wrap .headline{transform:translateX(0) skewX(0)}
.intro .title_wrap .headline._h1, .intro .title_wrap .headline._h2{top:274px;height:172px}
.intro .title_wrap .headline._h1{left:56px;width:359px;background-position:0 -340px;transition-delay:800ms}
.intro .title_wrap .headline._h2{left:667px;width:511px;background-position:-379px -340px;transition-delay:900ms}
.intro .title_wrap .headline._h3{top:433px;left:814px;width:336px;height:165px;background-position:-379px -151px;transition-delay:1s}
.intro .sook{position:absolute;top:-20px;left:125px;width:941px;height:1325px}
.intro .sook span{position:absolute;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0822_event02_ADC50F7412CBF032/bg_sook_intro.png") no-repeat;opacity:0;transform:translateY(300px)}
.intro.load .sook span{opacity:1;transform:translateY(0);transition:opacity 300ms ease, transform 400ms cubic-bezier(0, .3, 0, 1.8);transition-delay:300ms}
.intro .sook .body{top:0;left:0;width:100%;height:100%}
.intro .sook .head{top:289px;left:178px;width:402px;height:206px;background-position:-178px -289px;z-index:1}
.intro .sook .arm{top:529px;left:0;width:338px;height:290px;background-position:0 -529px;z-index:1}
.intro .particle_wrap span{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0822_event02_ADC50F7412CBF032/spr_particle_intro.png") no-repeat}
.intro .particle_wrap .pink{transition:transform 300ms cubic-bezier(0, .3, 0, 1.2)}
.intro .particle_wrap .peacock{transition:opacity 300ms ease, transform 700ms cubic-bezier(0, 0.99, 1, 1)}
.intro .particle_wrap ._p1{top:228px;left:-31px;width:40px;height:25px;transform:translate(631px, 272px) rotate(-270deg);transition-delay:80ms}
.intro .particle_wrap ._p2{top:97px;left:704px;width:40px;height:54px;background-position:0 -89px;transform:translate(-62px, 188px) rotate(720deg);transition-delay:720ms}
.intro .particle_wrap ._p3{top:303px;left:-169px;width:67px;height:40px;background-position:0 -199px;transform:translate(368px, 88px) rotate(-360deg);transition-delay:480ms}
.intro .particle_wrap ._p4{top:138px;left:1188px;width:65px;height:51px;background-position:0 -296px;transform:translate(-278px, 169px) rotate(360deg);transition-delay:320ms}
.intro .particle_wrap ._p5{top:744px;left:-88px;width:100px;height:42px;background-position:0 -404px;transform:translate(319px, -133px) rotate(540deg);transition-delay:560ms}
.intro .particle_wrap ._p6{top:919px;left:186px;width:47px;height:69px;background-position:0 -493px;transform:translate(195px, -227px) rotate(-540deg);transition-delay:240ms}
.intro .particle_wrap ._p7{top:681px;left:1154px;width:70px;height:45px;background-position:0 -608px;transform:translate(-295px, -102px) rotate(-450deg);transition-delay:400ms}
.intro .particle_wrap ._p8{top:337px;left:1232px;width:43px;height:23px;background-position:0 -722px;transform:translate(-327px, 76px) rotate(450deg);transition-delay:640ms}
.intro .particle_wrap ._p9{top:900px;left:1443px;width:42px;height:28px;background-position:0 -823px;transform:translate(-411px, -207px) rotate(270deg);transition-delay:160ms}
.intro .particle_wrap ._p10{top:415px;left:-394px;;width:441px;height:179px;background-position:-247px 0;transform:scale(0) rotate(15deg);transition-delay:200ms}
.intro .particle_wrap ._p11{top:842px;left:-226px;width:342px;height:225px;background-position:-247px -292px;transform:scale(0) rotate(-15deg);transition-delay:600ms}
.intro .particle_wrap ._p12{top:-120px;left:836px;width:179px;height:247px;background-position:-100px -644px;transform:scale(0) rotate(-15deg);transition-delay:400ms}
.intro .particle_wrap ._p13{top:472px;left:1275px;width:369px;height:212px;background-position:-404px -679px;transform:scale(0) rotate(15deg);transition-delay:800ms}
.intro.load .particle_wrap .peacock{transform:translate(0, 0) rotate(0)}
.intro.load .particle_wrap .pink{transform:scale(1) rotate(0)}

.intro .scroll{position:absolute;bottom:34px;left:50%;width:123px;height:40px;background:#fedadf;border-radius:20px;margin-left:-63px}
.intro .scroll span{position:absolute;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0725_intro_435F728674B478EC/bg_scroll.png") no-repeat}
.intro .scroll .txt{top:12px;left:35px;width:50px;height:17px;text-indent:-99999px;overflow:hidden}
.intro .scroll .arrow{opacity:0;left:20px;width:81px;height:5px;background-position:0 -23px;animation:scrollOpacity 1s infinite alternate linear}
.intro .scroll ._a1{top:13px}
.intro .scroll ._a2{top:19px;animation-delay:150ms}
.intro .scroll ._a3{top:25px;animation-delay:300ms}

/* content */
.content{height:3874px;background:#5dffd4}
.content .event_list{position:absolute;left:0;width:100%;z-index:1}
.content ._list1{top:167px}
.content ._list2{top:908px}
.content ._list3{top:1649px}
.content ._list4{top:2390px}
.content ._list5{top:3131px}
.content .event_list li{position:absolute;width:576px;height:618px}
.content .event_list li span{display:block;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0822_event02_ADC50F7412CBF032/spr_event.png") no-repeat}
.content .event_list .event1, .content .event_list .event3, .content .event_list .event5, .content .event_list .event7{top:0;left:18px}
.content .event_list .event2{top:0;left:605px}
.content .event_list .event4{top:0;left:605px;height:938px}
.content .event_list .event6{top:320px;left:605px}
.content .event_list .event8{top:320px;left:605px}
.content .event_list li .card, .content .event_list li a{position:relative;display:block;width:100%;height:100%}
.content .event_list li .card{transform:perspective(2000px);transform-style:preserve-3d}
.content .event_list li .card a{-ms-perspective:2000px}
.content .event_list li .card .disabled{cursor:default}
.content .event_list li .front{position:absolute;top:0;left:0;width:100%;height:100%;transform:rotateY(-90deg);-ms-transform:rotateY(-89deg);opacity:0}
.content .event_list li .front span{position:absolute;text-indent:-99999px;overflow:hidden}
.content .event_list li .front .txt{top:0;left:0;width:100%;height:100%}
.content .event_list.active .front{transform:rotateY(0);-ms-transform:rotateY(0);opacity:1;transition:all 600ms ease}
.content .event_list.active li:first-of-type .front{transition-delay:400ms}
.content .event_list.active li:nth-of-type(2) .front{transition-delay:600ms}
.content .event_list .event1 .front .txt{background-position:-622px -163px}
.content .event_list .event2 .front .txt{background-position:0 -163px}
.content .event_list .event3 .front .txt{background-position:-1243px -163px}
.content .event_list .event4 .front .txt{background-position:-3108px -163px}
.content .event_list .event5 .front .txt{background-position:-622px -806px}
.content .event_list .event6 .front .txt{background-position:-1243px -806px}
.content .event_list .event7 .front .txt{background-position:-1842px -163px}
.content .event_list .event8 .front .txt{background-position:-1842px -806px}
.content .event_list .event9 .front .txt{top:-9px;left:-30px;width:606px;height:627px;background-position:-3700px -154px}
.content .event_list li .sort{position:absolute;top:-69px;left:47px;width:508px;height:55px}
.content .event_list li .sort span{position:absolute;top:0;height:100%;opacity:0}
.content .event_list.active li .sort span{opacity:1}
.content .event_list li .sort .gradient{right:0;width:0;background-position:100% 0}
.content .event_list.active .sort .gradient{width:100%;transition:opacity 300ms ease, width 500ms ease}
.content .event_list li .sort .num{right:0;width:86px;opacity:0}
.content .event_list.active .sort .num{right:424px;opacity:1;transition:opacity 300ms ease, right 500ms ease}
.content .event_list.active li:nth-of-type(2) .sort span{transition-delay:300ms}
.content .event_list .event1 .num{background-position:-2999px 0}
.content .event_list .event2 .num{background-position:-3096px 0}
.content .event_list .event3 .num{background-position:-3202px 0}
.content .event_list .event4 .num{background-position:-3308px 0}
.content .event_list .event5 .num{background-position:-3416px 0}
.content .event_list .event6 .num{background-position:-3521px 0}
.content .event_list .event7 .num{background-position:-3629px 0}
.content .event_list .event8 .num{background-position:-2999px -73px}
.content .event_list .event9 .num{background-position:-3096px -73px}
.content .sook_wrap span{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0725_event02_93CBF8DFCFB5A23B/spr_sook_content.png") no-repeat;opacity:0}
.content .sook_wrap.active span{opacity:1}
.content .sook_wrap .sook{top:0;transform-origin:50% 100%}
.content .sook_wrap.active .sook{transition:opacity 300ms ease}
.content .sook_wrap .gradient{width:0;height:0;transform:translate(-50px, -50px)}
.content .sook_wrap.active .gradient{transform:translate(0, 0);width:561px;height:531px;transition:all 600ms ease}
.content .sook_wrap .gradient.blue{background-position:-763px 0}
.content .sook_wrap .circle{width:314px;height:314px;transform:scale(0)}
.content .sook_wrap.active .circle{transform:scale(1);transition:transform 300ms cubic-bezier(0, 0.1, 0, 1.2)}
.content .sook_wrap ._p1{width:835px;height:457px}
.content .sook1{top:-39px}
.content .sook1 .sook{left:567px;width:773px;height:1383px;background-position:-6px -695px;z-index:1}
.content .sook1.active .sook{animation:sook1Animation 600ms ease}
.content .sook1 ._g1{top:173px;left:-349px}
.content .sook1 ._g2{top:346px;left:1198px}
.content .sook1.active ._g2{transition-delay:300ms}
.content .sook1 ._c1{top:369px;left:-253px;background-position:0 -2274px}
.content .sook1.active ._c1{transition-delay:100ms}
.content .sook1 ._c2{top:79px;left:710px;background-position:-482px -2274px}
.content .sook1.active ._c2{transition-delay:300ms}
.content .sook1 ._c3{top:569px;left:1347px;background-position:-1789px -2274px}
.content .sook1.active ._c3{transition-delay:500ms}
.content .sook2{top:651px}
.content .sook2 .bg{top:542px;right:-360px;width:1920px;height:2738px;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0725_event02_93CBF8DFCFB5A23B/bg_sook2_D43850CDC2B4C5D3.png") center top no-repeat}
.content .sook2 .sook{left:-436px;width:965px;height:1573px;background-position:-864px -601px}
.content .sook2.active .sook{animation:sook2Animation 100ms 5 linear}
.content .sook2 ._g1{top:145px;left:-284px}
.content .sook2.active ._g1{transition-delay:300ms}
.content .sook2 ._g2{top:214px;left:868px}
.content .sook2 ._g3{top:842px;left:283px}
.content .sook2.active ._g3{transition-delay:500ms}
.content .sook2 ._p1{top:450px;left:1058px;background-position:-1582px 0}
.content .sook2 ._p2{top:725px;left:1307px;width:306px;height:272px;background-position:-2525px 0}
.content .sook3{top:2103px}
.content .sook3 .sook{left:760px;width:831px;height:1565px;background-position:-2000px -515px}
.content .sook3.active .sook{animation:sook3Animation 500ms ease}
.content .sook3 ._g1{top:-161px;left:966px}
.content .sook3.active ._g1{transition-delay:100ms}
.content .sook3 ._g2{top:536px;left:1129px}
.content .sook3.active ._g2{transition-delay:300ms}
.content .sook3 ._g3{top:23px;left:-359px}
.content .sook3.active ._g3{transition-delay:500ms}
.content .sook3 ._c1{top:302px;left:1375px;background-position:-1348px -2274px}
.content .sook3 ._c2{top:-250px;left:-133px;background-position:-919px -2274px}
.content .sook3.active ._c2{transition-delay:300ms}
.content .sook3 ._c3{top:894px;left:699px;background-position:-2260px -2274px}
.content .sook3.active ._c3{transition-delay:400ms}
.content .sook3 ._c4{top:-386px;left:1206px;background-position:-919px -2274px}
.content .sook3 ._p1{top:589px;left:-592px;background-position:-3056px 0}
.content .sook3 ._p2{top:473px;left:206px;width:585px;height:908px;background-position:-3181px -611px}

/* copyright */
.copyright{position:absolute;bottom:125px;left:644px;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;transform:translateY(30px);opacity:0}
.copyright.active{opacity:1;transition:all 400ms 1s ease;transform:translateY(0)}

/* 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 scrollOpacity {
    0%{opacity:0}
    80%{opacity:1}
    100%{opacity:1}
}

@keyframes sook1Animation{
    0%{transform:rotate(0)}
    30%{transform:rotate(3deg)}
    50%{transform:rotate(-2deg)}
    70%{transform:rotate(1deg)}
    90%{transform:rotate(-1deg)}
    100%{transform:rotate(0)}
}

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

@keyframes sook3Animation{
    0%{transform:translateY(0)}
    10%{transform:translateY(40px)}
    40%{transform:translateY(-30px)}
    60%{transform:translateY(20px)}
    80%{transform:translateY(-10px)}
    100%{transform:translateY(0)}
}

@keyframes numAnimation{
    0%{transform:scale(0)}
    40%{transform: scale(1.1)}
    60%{transform:scale(0.8)}
    80%{transform:scale(1.1)}
    100%{transform:scale(1)}
}

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