@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}
#wrap .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}
.bg_default{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0725_intro_435F728674B478EC/bg_intro.jpg") center top repeat;background-size:cover}

/* 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/0725_intro_435F728674B478EC/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{position:absolute;top:40%;left:0;width:100%;margin-top:349px}
#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:absolute;top:0;z-index:100}
#nav .nav_wrap{left:50%;width:1575px;height:129px;background-position:0 -356px;margin-left:-775px}
#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{top:35px;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:995px;min-height:900px;padding-bottom:85px}
.intro .intro_wrap{position:absolute;top:25%;left:0;width:100%;height:776px;margin-top:-215px}
.intro .object_wrap span{opacity:0}
.intro.load .object_wrap span{opacity:1}
.intro .circle_wrap span{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0725_intro_435F728674B478EC/spr_circle.png") no-repeat;transition:opacity 300ms linear, transform 400ms ease}
.intro .circle_wrap ._c4{top:212px;left:312px;width:576px;height:576px;transform:scale(0.5);transition-delay:100ms}
.intro .circle_wrap ._c3{top:12px;left:110px;width:980px;height:980px;background-position:-722px 0;transform:scale(0.6);transition-delay:200ms}
.intro .circle_wrap ._c2{top:-202px;left:-104px;width:1410px;height:1410px;background-position:-2108px 0;transform:scale(0.7);transition-delay:300ms}
.intro .circle_wrap ._c1{top:-415px;left:-317px;width:1836px;height:1836px;background-position:-3664px 0;transform:scale(0.8);transition-delay:400ms}
.intro.load .circle_wrap span{transform:scale(1)}
.intro .sook{position:absolute;top:23px;width:782px;height:1022px}
.intro .sook span{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0725_intro_435F728674B478EC/bg_sook.png") no-repeat}
.intro .sook .body{top:0;left:74px;width:100%;height:100%;transform:translateY(150px);transition:opacity 300ms ease, transform 300ms ease}
.intro.load .sook .body{transform:translateY(0)}
.intro .sook .pattern{top:211px;left:395px;width:436px;height:393px;background-position:-847px 0;transform:scale(0.6);transition:opacity 300ms ease, transform 400ms ease}
.intro.load .sook .pattern{transition-delay:50ms}
.intro.load .sook .pattern{transform:scale(1)}
.intro .item_wrap span{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0725_intro_435F728674B478EC/spr_item.png") no-repeat;transition:opacity 300ms ease, transform 400ms ease}
.intro .item_wrap ._i1{top:0;left:139px;width:226px;height:232px;transform:translate(87px, 50px);transition-delay:100ms}
.intro .item_wrap ._i2{top:173px;left:-139px;width:257px;height:263px;background-position:0 -270px;transform:translate(152px, 0);transition-delay:200ms}
.intro .item_wrap ._i3{top:514px;left:-58px;width:200px;height:206px;background-position:0 -570px;transform:translate(139px, -76px);transition-delay:300ms}
.intro .item_wrap ._i4{top:229px;left:1093px;width:262px;height:268px;background-position:-351px 0;transform:translate(-156px, -12px);transition-delay:400ms}
.intro .item_wrap ._i5{top:529px;left:976px;width:241px;height:247px;background-position:-351px -300px;z-index:101;transform:translate(-124px, -84px);transition-delay:500ms}
.intro.load .item_wrap span{transform:translate(0, 0)}
.intro .dot_wrap span{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0725_intro_435F728674B478EC/spr_dot.png") no-repeat;transform:scale(0);transition:opacity 300ms ease, transform 300ms cubic-bezier(0, 0.3, 0, 1.5)}
.intro.load .dot_wrap span{transform:scale(1)}
.intro .dot_wrap ._d1{top:17px;left:-42px;width:29px;height:30px}
.intro .dot_wrap ._d2{top:43px;left:-6px;width:87px;height:88px;background-position:0 -73px}
.intro .dot_wrap ._d3{top:326px;left:1461px;width:63px;height:63px;background-position:0 -187px}
.intro .dot_wrap ._d4{top:507px;left:-136px;width:50px;height:50px;background-position:0 -295px}
.intro .dot_wrap ._d5{top:1px;left:787px;width:32px;height:32px;background-position:0 -406px}
.intro .dot_wrap ._d6{top:564px;left:1268px;width:108px;width:108px;height:108px;background-position:0 -470px}
.intro .dot_wrap ._d7{top:119px;left:1177px;width:25px;height:25px;background-position:0 -613px}
.intro.load .dot_wrap ._d1{transition-delay:1020ms}
.intro.load .dot_wrap ._d2{transition-delay:1180ms}
.intro.load .dot_wrap ._d3{transition-delay:1340ms}
.intro.load .dot_wrap ._d4{transition-delay:940ms}
.intro.load .dot_wrap ._d5{transition-delay:1260ms}
.intro.load .dot_wrap ._d6{transition-delay:780ms}
.intro.load .dot_wrap ._d7{transition-delay:860ms}
.intro .title_wrap span{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0725_intro_435F728674B478EC/spr_title.png") no-repeat}
.intro .title_wrap .small{top:344px;left:225px;width:262px;height:94px;background-position:0 -370px}
.intro.load .title_wrap .small{animation:smallAnimation 2.5s infinite linear;animation-delay:1.2s;transition-delay:1.2s}
.intro .title_wrap .ribbon{top:459px;left:349px;width:502px;height:106px;background-position:-167px 0;transform:translateY(-20px)}
.intro.load .title_wrap .ribbon{transform:translateY(0);transition:opacity 300ms ease, transform 300ms cubic-bezier(0, 0.1, 0, 1.2);transition-delay:600ms}
.intro .title_wrap .headline{top:575px;left:182px;width:835px;height:148px}
.intro .title_wrap .headline span{top:0;left:0;height:100%;transform:translateX(-30px)}
.intro.load .title_wrap .headline span{transform:translateX(0);transition:opacity 300ms linear, transform 400ms ease}
.intro .title_wrap .headline ._h1{left:0;width:147px;background-position:0 -146px}
.intro .title_wrap .headline ._h2{left:158px;width:143px;background-position:-158px -146px}
.intro .title_wrap .headline ._h3{left:318px;width:147px;background-position:-318px -146px}
.intro .title_wrap .headline ._h4{left:476px;width:142px;background-position:-476px -146px}
.intro .title_wrap .headline ._h5{left:625px;width:52px;background-position:-625px -146px}
.intro .title_wrap .headline ._h6{left:683px;width:152px;background-position:-683px -146px;z-index:102}
.intro.load .title_wrap .headline ._h1{transition-delay:700ms}
.intro.load .title_wrap .headline ._h2{transition-delay:780ms}
.intro.load .title_wrap .headline ._h3{transition-delay:860ms}
.intro.load .title_wrap .headline ._h4{transition-delay:940ms}
.intro.load .title_wrap .headline ._h5{transition-delay:1020ms}
.intro.load .title_wrap .headline ._h6{transition-delay:1100ms}
.intro .title_wrap .bubble{top:40px;left:785px;width:329px;height:264px}
.intro .title_wrap .bubble .body{top:0;left:0;width:100%;height:100%;transform-origin:20% 100%;background-position:-906px 0}
.intro.load .title_wrap .bubble .body{animation:titleBubble1 400ms 600ms ease, titleBubble2 2.5s 2.5s infinite ease;transition:opacity 300ms ease;transition-delay:600ms}
.intro .title_wrap .bubble .pattern{top:22px;left:17px;width:290px;height:262px;background-position:-945px -305px;transform:scale(0.9)}
.intro.load .title_wrap .bubble .pattern{transform:scale(1);transition:opacity 300ms ease, transform 200ms ease;transition-delay:900ms}
.intro .twinkle_wrap span{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0725_intro_435F728674B478EC/spr_twinkle.png") no-repeat;transform:scale(0);transition:opacity 300ms ease, transform 300ms cubic-bezier(0, 0.3, 0, 2)}
.intro.load .twinkle_wrap span{transform:scale(1)}
.intro .twinkle_wrap ._t1{top:331px;left:233px;width:54px;height:54px}
.intro .twinkle_wrap ._t2{top:378px;left:841px;width:62px;height:62px;background-position:0 -78px}
.intro .twinkle_wrap ._t3{top:424px;left:902px;width:77px;height:77px;background-position:0 -162px}
.intro.load .twinkle_wrap ._t1{transition-delay:1.3s}
.intro.load .twinkle_wrap ._t2{transition-delay:1.2s}
.intro.load .twinkle_wrap ._t3{transition-delay:1.1s}
.copyright{position:absolute;bottom:-65px;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}

/* 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%}

/* max & chanelling */
#wrap.max #nav, .naver #nav{top:781px;margin-top:0}
#wrap.max .intro, .naver .intro{padding-bottom:0}
#wrap.max .intro_wrap, .naver .intro_wrap{top:34px;margin-top:0}
#wrap.max .copyright, .naver .copyright{bottom:25px}
.naver .modal-popup{height:995px;overflow:hidden}

@keyframes titleBubble1{
    0%{transform:rotate(45deg)}
    60%{transform:rotate(-20deg)}
    100%{transform:rotate(0deg)}
}

@keyframes titleBubble2{
    0%{transform:rotate(0deg)}
    5%{transform:rotate(-10deg)}
    10%{transform:rotate(10deg)}
    15%{transform:rotate(-7deg)}
    20%{transform:rotate(7deg)}
    25%{transform:rotate(0deg)}
}


@keyframes smallAnimation{
    0%{transform:scale(1)}
    2%{transform: scale(1.1)}
    4%{transform:scale(1)}
    6%{transform:scale(0.9)}
    8%{transform:scale(1)}
    10%{transform: scale(1.1)}
    12%{transform:scale(1)}
    14%{transform:scale(0.9)}
    16%{transform:scale(1)}
    100%{transform:scale(1)}
}