@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, 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:'맑은 고딕','Malgun gothic','돋움','dotum',sans-serif;font-size:15px;color:#1f2f5f;line-height:1;background:#fff}
input,textarea,button,select{font-size:inherit;font-family:'맑은 고딕','Malgun gothic','돋움','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;min-height:0;overflow:hidden;margin:0 auto}
#wrap.load{min-height:800px}
#wrap .section{position:relative;width:100%;min-height:900px}
.section .container{position:relative;width:1075px;height:100%;margin:0 auto}
#wrap .bg_section{position:absolute;top:0;left:0;width:99.99%;height:100%;padding-left:0.01%}

/* common */
#header button span, #header a span, .intro .copyright{display:block;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/1205_event01_C827C06B15AEB463/spr_header.png") no-repeat;text-indent:-99999px;overflow:hidden}

/* screen */
#screen{position:fixed;top:0;left:0;right:0;width:100%;height:100%;background:#fff;z-index:101}

/* header */
#header{position:absolute;top:0;left:0;width:100%;z-index:100}
#header .util{position:absolute;top:20px;right:20px}
#header .util:after, #header .util ul:after{content:"";display:block;clear:both}
#header .util button, #header .util ul, #header .util li{float:left}
#header .util button, #header .util a{position:relative;display:block;height:46px}
#header .util span{position:absolute;top:-5px;left:-5px;height:57px;pointer-events:none}
#header .util li{margin-left:10px}
#header .util .btn_start{width:147px;background:none;overflow:visible}
#header .util .btn_start span{width:157px}
#header .util .btn_start:hover span{background-position:0 -70px}
#header .util li a{width:47px}
#header .util li span{width:57px}
#header .util .btn_h span{background-position:-186px 0}
#header .util .btn_h a:hover span{background-position: -186px -70px}
#header .util .btn_c span{background-position:-271px 0}
#header .util .btn_c a:hover span{background-position: -271px -70px}

/* lnb */
#lnb h1 a, #lnb li a .img span, #lnb .btn_toggle span{display:block;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/1205_event01_C827C06B15AEB463/spr_lnb.png") no-repeat;text-indent:-99999px;overflow:hidden}
#lnb{position:absolute;top:0;left:0;bottom:0;width:180px;background:#1d2025;background-color:rgba(29,32,37,0.7);z-index:100;transition:left 400ms ease}
#lnb.hide{left:-140px}
#lnb .lnb_wrap{position:relative;height:100%}
#lnb h1{position:absolute;top:34px;left:48px}
#lnb h1 a{width:84px;height:99px}
#lnb ul{padding-top:170px}
#lnb li a{position:relative;display:block;height:190px}
#lnb li .bg, #lnb li .hover{height:90px}
#lnb li .bg{margin-bottom:29px;transition:background-position 400ms ease}
#lnb li .hover{position:absolute;top:0;left:0;width:100%;filter:alpha(opacity=0);opacity:0}
#lnb .lnb1 .hover{background-position:-180px -192px}
#lnb .lnb2 .hover{background-position:-180px -360px}
#lnb li.on .hover, #lnb a:hover .hover{filter:alpha(opacity=100);opacity:1}
#lnb.hide li.on .hover, #lnb.hide a:hover .hover{filter:alpha(opacity=0);opacity:0}
#lnb .shape{position:absolute}
#lnb .shape span{position:absolute;background:#4E4947}
#lnb .shape .rhombus{width:5px;height:5px;transform:rotate(45deg);-ms-transform:rotate(45deg)}
#lnb .shape .line{top:0;left:0;width:100%;height:100%}
#lnb li .shape{top:104px;left:50%;width:72px;height:1px;margin-left:-36px}
#lnb li.on .shape, #lnb li a:hover .shape span{background:#F0E6D2}
#lnb li .shape .rhombus{top:-2px}
#lnb li .shape ._r1{left:0}
#lnb li .shape ._r2{right:0}
#lnb.hide li .shape{width:0;margin-left:0}
#lnb.hide li .shape ._r1{left:-2px}
#lnb.hide li .shape ._r2{right:-2px}
#lnb .shape.vertical{top:273px;right:20px;width:1px;height:72px;opacity:0;filter:alpha(opacity=0);transform:scaleY(0)}
#lnb.hide .shape.vertical{opacity:1;transform:scaleY(1);filter:alpha(opacity=100);transition:transform 300ms 300ms ease}
#lnb .shape.vertical .rhombus{left:-2px}
#lnb .shape.vertical ._r1{top:0}
#lnb .shape.vertical ._r2{bottom:0}
#lnb .lnb1 .bg{background-position:0 -192px}
#lnb .lnb2 .bg{background-position:0 -360px}
#lnb.hide .lnb1 a .bg{background-position:41px -192px}
#lnb.hide .lnb2 a .bg{background-position:57px -360px}
#lnb li .txt{width:100%;height:35px;transition:opacity 300ms ease}
#lnb.hide li .txt{opacity:0}
#lnb .lnb1 .txt{background-position:0 -311px}
#lnb .lnb2 .txt{background-position:0 -479px}
#lnb .lnb1.on .txt, #lnb .lnb1 a:hover .txt{background-position:-180px -311px}
#lnb .lnb2.on .txt, #lnb .lnb2 a:hover .txt{background-position:-180px -479px}
#lnb li .off{position:absolute;top:14px;right:11px;width:19px;height:61px;opacity:0;transform:translateX(-5px)}
#lnb.hide li .off{opacity:1;transform:translateX(0);transition:opacity 300ms ease, transform 300ms ease;transition-delay:300ms}
#lnb.hide .lnb1 .off{background-position:-309px 0}
#lnb.hide .lnb2 .off{background-position:-310px -80px}
#lnb .btn_toggle{position:absolute;top:54px;right:-27px;width:55px;height:55px;overflow:visible;background:none}
#lnb .btn_toggle span{position:absolute;top:-7px;left:-7px;width:67px;height:67px;pointer-events:none;background-position:-116px 0}
#lnb .btn_toggle:hover span{background-position:-203px 0}
#lnb.hide .btn_toggle span{background-position:-113px -85px}
#lnb.hide .btn_toggle:hover span{background-position:-200px -85px}

/* map */
#map{position:absolute;top:50%;left:50%;width:2304px;height:1296px;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/1205_event01_C827C06B15AEB463/bg_map.jpg") center center no-repeat;background-size:cover;margin:-648px 0 0 -1152px}

/* cloud */
.cloud_wrap{display:none;position:absolute;top:0;left:50%;width:1920px;height:1080px;margin-left:-960px}

/* intro */
.intro{position:absolute;top:0;left:0;width:100%;height:100%}
.intro .copyright{position:absolute;left:50%;bottom:2.31%;width:359px;height:15px;background-position:0 -185px;margin-left:-180px}
.intro .schedule span{position:absolute;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/1205_event01_C827C06B15AEB463/spr_schedule.png") no-repeat}
.intro .schedule{position:absolute;top:25%;right:23px;padding-right:15px}
.intro .schedule .bar{position:absolute;top:20px;right:0;display:block;width:1px;height:432px;background-position:-271px 0}
.intro .schedule li{position:relative}
.intro .schedule .list{padding-top:37px;margin-bottom:44px}
.intro .schedule .list li{width:227px;height:18px;margin-bottom:10px}
.intro .schedule .list li .txt{width:100%;height:100%}
.intro .schedule .list .dot{top:6px;right:-16px;width:3px;height:3px;background:#EAD7B4;border-radius:2px}
.intro .schedule .txt{top:0;right:0;display:block;text-indent:-9999px;overflow:hidden}
.intro .schedule .date{width:86px;height:22px}
.intro .schedule .d1219 .date{background-position:-141px 0}
.intro .schedule .d1219 ._u1 .txt{background-position:0 -37px}
.intro .schedule .d1219 ._u2 .txt{background-position:0 -65px}
.intro .schedule .d1219 ._u3 .txt{background-position:0 -93px}
.intro .schedule .d0102 .date{background-position:-141px -155px}
.intro .schedule .d0102 ._u1 .txt{background-position:0 -192px}
.intro .schedule .d0102 ._u2 .txt{background-position:0 -220px}
.intro .schedule .d0122 .date{background-position:-141px -282px}
.intro .schedule .d0122 ._u1 .txt{background-position:0 -319px}
.intro .schedule .d0122 ._u2 .txt{background-position:0 -347px}
.intro .schedule .d0200 .date{background-position:-141px -409px}
.intro .schedule .d0200 ._u1 .txt{background-position:0 -446px}
.load .intro .schedule .date{transition-delay:1500ms}
.load .intro .schedule li li:first-child .txt{transition-delay:1550ms}
.load .intro .schedule li li:nth-child(2) .txt{transition-delay:1600ms}
.load .intro .schedule li li:nth-child(3) .txt{transition-delay:1650ms}
.intro .schedule .rhombus{top:5px;right:-21px;width:13px;height:13px;background-position:-259px -487px}
.intro h2{position:absolute;top:16.29%;left:50%;width:860px;height:644px;margin-left:-430px;text-indent:-9999px;overflow:hidden;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/1205_event01_C827C06B15AEB463/title_04E1B2709517D932.png") 0 0 no-repeat;opacity:0}
.load .intro h2{opacity:1;transition:opacity 300ms 500ms linear}

/* channelling */
.naver #wrap{height:1080px}

@keyframes cloud1{
    90%{transform:translate(-50px, 10px)}
    100%{transform:translate(-50px, 10px)}
}

@keyframes cloud2{
    90%{transform:translate(80px, -20px)}
    100%{transform:translate(80px, -20px)}
}

@keyframes cloud3{
    90%{transform:translate(60px, 30px)}
    100%{transform:translate(60px, 30px)}
}

@keyframes cloud4{
    90%{transform:translate(-50px, -15px)}
    100%{transform:translate(-50px, -15px)}
}