@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:'Nanum Square','돋움','dotum',sans-serif;font-size:14px;color:#000;line-height:1;background:#fff}
input,textarea,button,select{font-size:inherit;font-family:'Nanum Square','돋움','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;max-width:2560px;overflow:hidden;margin:0 auto}
#wrap .section{position:relative;width:100%}
.section .container{position:relative;width:1198px;height:100%;margin:0 auto;padding-right:1px}
#wrap .bg_section{position:absolute;top:0;left:0;width:99.99%;height:100%;padding-left:0.01%}

/* common */
.object_wrap{position:absolute;top:0;left:0;width:100%}
.object_wrap div, .object_wrap span{position:absolute}
.object_wrap .box{height:0;opacity:0;transition:all 300ms ease}
.object_wrap .box span{opacity:0}

/* header */
#header{position:absolute;top:0;left:0;right:0;height:119px;z-index:100}
.fixed #header{position:fixed}
#header h1 a, #header .btn_start, #header .util li a span, #header .tab li a, .intro .btn_balance span{display:block;text-indent:-99999px;overflow:hidden;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0704_intro_F51A1BF194149854/spr_header.png") no-repeat}
#header .bg_header{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;filter:alpha(opacity=50);opacity:0.5}
#header h1{position:absolute;top:13px;left:30px}
#header h1 a{width:84px;height:99px;background-position:0 -123px}
#header .util{position:absolute;top:13px;right:37px;z-index:1}
#header .btn_start{display:block;width:283px;height:91px;background-position:-121px 0}
#header .btn_start:hover{background-position:-121px -123px}
#header .util ul{position:absolute;top:127px;right:0}
#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 200ms 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}
#header .tab{position:absolute;top:26px;left:196px}
#header .tab li{float:left;margin-right:19px}
#header .tab li a{width:229px;height:68px}
#header .tab .tab1 a{background-position:0 -267px}
#header .tab .tab2 a{background-position:-248px -267px}
#header .tab .tab1 a:hover{background-position:0 -365px}
#header .tab .tab2 a:hover{background-position:-248px -365px}

/* 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 .nav_wrap{display:none;position:absolute;top:131px;left:50%;width:1575px;height:129px;background-position:0 -356px;margin-left:-787px}
#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{position:absolute;top:165px;left:32px;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:3247px}
.intro .bg_section{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0704_event_873F4A493544B17A/bg_intro.jpg") center top no-repeat}
.intro .logo_wrap span{opacity:0;transform:scale(0);background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0704_event_873F4A493544B17A/spr_logo.png") no-repeat}
.intro .logo_wrap .top, .intro .logo_wrap ._l4.active{transition:opacity 300ms ease, transform 300ms cubic-bezier(0, .5, .3, 1.5)}
.intro .logo_wrap ._l1{top:591px;left:-122px;width:383px;height:394px;transition-delay:800ms}
.intro .logo_wrap ._l2{top:187px;left:1178px;width:274px;height:283px;background-position:-483px 0;transition-delay:1.1s}
.intro .logo_wrap ._l3{top:14px;left:-298px;width:288px;height:306px;background-position:-905px 0;transition-delay:950ms}
.intro .logo_wrap ._l4{top:1595px;left:1114px;width:314px;height:307px;background-position:-1386px 0}
.load .intro .logo_wrap .top, .intro .logo_wrap ._l4.active{opacity:1;transform:scale(1)}
.intro .title_wrap span{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0704_event_873F4A493544B17A/spr_title.png") no-repeat;opacity:0}
.load .intro .title_wrap span{opacity:1}
.intro .title_wrap .box{top:247px;left:291px;width:615px;height:0;border-top:2px solid #fbd931;border-bottom:2px solid #fbd931;transform:translateY(40px)}
.load .intro .title_wrap .box{height:80px;opacity:1;transform:translateY(0)}
.intro .title_wrap .txt{top:2px;height:89px}
.intro .title_wrap ._t1{left:2px;width:261px;background-position:-142px 0;transform:translateX(20px)}
.intro .title_wrap ._t2{left:312px;width:314px;background-position:-452px 0;transform:translateX(-20px)}
.load .intro .title_wrap .txt{transform:translateX(0);transition:all 300ms ease;transition-delay:400ms}
.intro .title_wrap .icon{left:242px;width:92px;height:92px;transform:scale(0);transition:opacity 300ms ease, transform 300ms cubic-bezier(0, .5, .3, 1.5)}
.load .intro .title_wrap .icon{transform:scale(1);transition-delay:200ms}
.intro .title_wrap .headline{transition:opacity 300ms ease, transform 300ms cubic-bezier(0, .5, .3, 2)}
.load .intro .title_wrap .headline{transform:scaleY(1) translateY(0)}
.intro .title_wrap ._h1{top:323px;left:216px;width:766px;height:227px;background-position:0 -146px;transform-origin:50% 100%;transform:scaleY(0.9) translateY(30px);transition-delay:550ms}
.intro .title_wrap ._h2{top:538px;left:345px;width:507px;height:168px;background-position:-129px -461px;transform-origin:50% 0;transform:scaleY(0.9) translateY(-30px);transition-delay:700ms}
.intro .title_wrap .descript, .intro .title_wrap .date, .intro .title_wrap .duration{transition:opacity 300ms linear}
.intro .title_wrap .descript{top:733px;left:307px;width:587px;height:60px;background-position:-91px -656px;transition-delay:900ms}
.intro .title_wrap .date{top:818px;left:255px;width:696px;height:58px;background-position:-39px -741px;transition-delay:950ms}
.intro .title_wrap .duration{top:893px;left:401px;width:394px;height:23px;background-position:-185px -816px;transition-delay:1s}
.intro .circle_wrap span{opacity:0;background:#fff;border-radius:100%;transition:opacity 1s linear, transform 1.5s ease-out}
.intro .circle_wrap ._c1, .intro .circle_wrap ._c2, .intro .circle_wrap ._c3, .intro .circle_wrap ._c4{transform:translate(200%, 200%)}
.intro .circle_wrap ._c5, .intro .circle_wrap ._c6, .intro .circle_wrap ._c7{transform:translate(-200%, 200%)}
.intro .circle_wrap ._c1{top:526px;left:193px;width:18px;height:18px;transition-delay:900ms}
.intro .circle_wrap ._c2{top:436px;left:129px;width:29px;height:29px;transition-delay:1.1s}
.intro .circle_wrap ._c3{top:397px;left:84px;width:9px;height:9px;transition-delay:600ms}
.intro .circle_wrap ._c4{top:326px;left:162px;width:42px;height:42px;transition-delay:700ms}
.intro .circle_wrap ._c5{top:392px;left:1007px;width:38px;height:38px;transition-delay:800ms}
.intro .circle_wrap ._c6{top:313px;left:947px;width:27px;height:27px;transition-delay:1s}
.intro .circle_wrap ._c7{top:291px;left:989px;width:7px;height:7px;transition-delay:1.2s}
.load .intro .circle_wrap span{opacity:1;transform:translate(0,0)}
.intro .char{position:absolute;top:160px;left:483px;width:1121px;height:1097px;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0704_event_873F4A493544B17A/bg_char.png") no-repeat;opacity:0;transform:translateX(-20px)}
.load .intro .char{transform:translateX(0);opacity:1;transition:opacity 300ms linear, transform 1s ease}
.intro .item_wrap{top:1020px}
.intro .item_wrap .line{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0704_event_873F4A493544B17A/bg_line.png") no-repeat}
.intro .item_wrap ._l1{top:178px;left:-27px;width:0;height:240px;background-position:-7px 0}
.intro .item_wrap.active ._l1{width:1202px;transition:width 600ms linear}
.intro .item_wrap ._l2{top:420px;left:1083px;width:137px;height:0;background-position:-1117px -242px}
.intro .item_wrap.active ._l2{height:328px;transition:height 300ms linear;transition-delay:600ms}
.intro .item_wrap ._l3{top:659px;right:119px;width:0;height:125px;background-position:100% -675px}
.intro .item_wrap.active ._l3{width:1113px;transition:width 600ms linear;transition-delay:900ms}
.intro .item_wrap .item{width:314px;height:422px;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0704_event_873F4A493544B17A/spr_item.png") no-repeat;opacity:0;transform:translateY(30px)}
.intro .item_wrap.active .item{opacity:1;transform:translateY(0);transition:opacity 300ms ease, transform 500ms cubic-bezier(0, .5, .3, 1.5)}
.intro .item_wrap ._i1{top:-11px;left:47px}
.intro .item_wrap ._i2{top:61px;left:455px;background-position:-374px 0}
.intro .item_wrap ._i3{top:133px;left:863px;background-position:-747px 0}
.intro .item_wrap ._i4{top:534px;left:619px;background-position:-1121px 0}
.intro .item_wrap ._i5{top:462px;left:211px;background-position:-1494px 0}
.intro .item_wrap.active ._i1{transition-delay:200ms}
.intro .item_wrap.active ._i2{transition-delay:450ms}
.intro .item_wrap.active ._i3{transition-delay:700ms}
.intro .item_wrap.active ._i4{transition-delay:950ms}
.intro .item_wrap.active ._i5{transition-delay:1200ms}
.intro .bar_wrap{top:1731px}
.intro .bar_wrap span{background:url(https://ssl.nexon.com/s2/game/baram/2019/event/0704_event_873F4A493544B17A/spr_bar.png) no-repeat}
.intro .bar_wrap ._b1, .intro .bar_wrap ._b2, .intro .bar_wrap ._b3{transform:translate(100%, -86%)}
.intro .bar_wrap ._b4, .intro .bar_wrap ._b5, .intro .bar_wrap ._b6{transform:translate(-100%, 86%)}
.intro .bar_wrap.active span{transform:translate(0,0);transition:transform 600ms ease}
.intro .bar_wrap ._b1{top:0;right:-619px}
.intro .bar_wrap ._b2{top:228px;right:-474px}
.intro .bar_wrap ._b3{top:291px;right:-613px}
.intro .bar_wrap ._b4{top:521px;left:-694px;transition-delay:200ms}
.intro .bar_wrap ._b5{top:549px;left:-492px;transition-delay:350ms}
.intro .bar_wrap ._b6{top:711px;left:-519px;transition-delay:450ms}
.intro .bar_wrap.active ._b2{transition-delay:150ms}
.intro .bar_wrap.active ._b3{transition-delay:300ms}
.intro .bar_wrap.active ._b4{transition-delay:200ms}
.intro .bar_wrap.active ._b5{transition-delay:350ms}
.intro .bar_wrap.active ._b6{transition-delay:450ms}
.intro .bar_wrap.max{left:50%}
.intro .bar_wrap.max ._b1{right:-258px}
.intro .bar_wrap.max ._b2{right:-112px}
.intro .bar_wrap.max ._b3{right:-253px}
.intro .bar_wrap.max ._b4{left:-333px}
.intro .bar_wrap.max ._b5{left:-131px}
.intro .bar_wrap.max ._b6{left:-158px}
.intro .bar_wrap .sky{width:480px;height:323px;background-position:-644px 0}
.intro .bar_wrap .blue{width:481px;height:324px;background-position:-1318px 0}
.intro .bar_wrap .purple{width:480px;height:324px}
.intro .content_wrap{top:2031px}
.intro .content_wrap span{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0704_event_873F4A493544B17A/spr_content.png") no-repeat;opacity:0}
.intro .content_wrap.active span{opacity:1}
.intro .content_wrap .box{top:0;left:271px;width:655px;height:0;border-top:2px solid #CEA5FF;border-bottom:2px solid #CEA5FF;transform:translateY(80px)}
.intro .content_wrap.active .box{height:158px;opacity:1;transform:translateY(0)}
.intro .content_wrap .box span{width:676px;height:59px}
.intro .content_wrap .box ._t1{top:17px;left:-5px;transform:translateY(7px)}
.intro .content_wrap .box ._t2{top:83px;background-position:0 -66px;transform:translateY(-7px)}
.intro .content_wrap.active .box span{transform:translateY(0);opacity:1;transition:opacity 300ms ease, transform 300ms ease;transition-delay:300ms}
.intro .content_wrap .url{top:183px;left:396px;width:415px;height:57px;background-position:0 -164px;transform:translateY(-15px)}
.intro .content_wrap.active .url{transform:translateY(0);transition:all 300ms ease;transition-delay:450ms}
.intro .content_wrap .phone{top:249px;width:547px;height:626px}
.intro .content_wrap ._p1{left:109px;background-position:-676px -231px;transform:translateX(30px)}
.intro .content_wrap ._p2{left:507px;background-position:-1496px -231px;transform:translateX(-30px)}
.intro .content_wrap.active .phone{transform:translateX(0);transition:opacity 300ms ease, transform 500ms ease;transition-delay:600ms}
.intro .content_wrap .arrow{top:520px;left:570px;width:60px;height:88px;background-position:-1413px -502px;transform:translateX(-20px)}
.intro .content_wrap.active .arrow{transform:translateX(0);transition:opacity 300ms ease, transform 300ms cubic-bezier(0, .5, .3, 1.5);transition-delay:700ms}
.intro .content_wrap .kakao{top:750px;left:859px;width:264px;height:150px;background-position:-1179px 0;transform:scale(0.8)}
.intro .content_wrap.active .kakao{transform:scale(1);transition:opacity 300ms ease, transform 300ms cubic-bezier(0, .5, .3, 2);transition-delay:750ms}
.intro .content_wrap ._b1{top:387px;left:-66px;width:400px;height:530px;background-position:0 -369px;transform:translateX(-15px)}
.intro .content_wrap ._b2{top:372px;left:839px;width:400px;height:530px;background-position:-2157px -354px;transform:translateX(15px)}
.intro .content_wrap.active .baby{transform:translateX(0);transition:opacity 300ms ease, transform 400ms ease;transition-delay:900ms}
.intro .content_wrap a{position:absolute;top:183px;left:396px;width:415px;height:57px}
.intro .btn_balance{position:absolute;top:378px;right:-41px;width:210px;height:210px;z-index:10;transition:transform 500ms ease}
.intro .btn_balance:hover{transform:translateX(-82px)}
.intro .btn_balance span{position:absolute;top:50%;left:50%;pointer-events:none}
.intro .btn_balance .circle{top:0;left:0;width:100%;height:100%;background-position:-1454px 0}
.intro .btn_balance .dot{top:50%;left:50%;width:280px;height:280px;background-position:-1420px -242px;margin:-140px 0 0 -140px}
.intro .btn_balance:hover .dot{animation:dotdot 300ms infinite alternate ease}
.intro .btn_balance .txt{top:54px;left:42px;width:119px;height:99px;background-position:-1496px -611px}

@media screen and (min-width:1921px) {
    .intro .bg_section{background-image:url("https://ssl.nexon.com/s2/game/baram/2019/event/0704_event_873F4A493544B17A/bg_intro_2560.jpg")}
}

/* footer */
.footer{background:#000}
#footer .bg_section{top:auto;bottom:80px;height:266px;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0704_event_873F4A493544B17A/bg_footer.png") center top no-repeat}
.footer .copyright{width:500px;height:80px;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0704_event_873F4A493544B17A/copyright.png") no-repeat;text-indent:-99999px;overflow:hidden;margin:0 auto}

@keyframes dotdot{
    0%{transform:scale(1)}
    100%{transform:scale(0.95)}
}