@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{width:100%;background:#fff;font-family:'맑은 고딕','malgunGothic',sans-serif;font-size:15px;color:#000;line-height:1;background:#fff}
input,textarea,button,select{font-size:inherit;font-family:'맑은 고딕','malgunGothic', sans-serif}
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}
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}
button{border:0;cursor:pointer;outline:0}
button:focus{outline:initial}

/* layout */
#wrap{position:relative;overflow:hidden;min-width:1200px}
.section{position:relative}
.section .container{position:relative;width:1200px;height:100%;margin:0 auto}

/* tab */
.tab_menu{overflow:hidden;font-size:0}
.tab_menu li{float:left}
.tab_menu li a{display:block}
.tab_wrap .tab_content{position:relative;display:none}
.tab_wrap .tab_content.on{display:block}

/* header */
#header .util, #header .util li span, #header .short_page .tab_menu li a,  #header .short_page .tab_menu li .txt, #header .short_page .tab_event li a, #header .short_page .tab_update li a span{background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/spr_header.png") no-repeat}
#header{position:absolute;top:0;left:0;width:313px;height:312px;background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1214/bg_header.png") no-repeat;z-index:100}
#wrap.fixed #header{position:fixed}
#header .header_wrap{padding:34px 0 0 43px}
#header .util{width:225px;height:48px;background-position:-124px 0;margin:24px 0 0 2px}
#header .util ul{overflow:hidden;padding:9px 0 0 8px}
#header .util li{float:left}
#header .util li a{position:relative;height:30px;padding:2px 0 0 39px}
#header .util li a, #header .util li a span{display:block}
#header .util li .icon{position:absolute;top:0;left:0;width:32px;height:100%}
#header .util li .text{width:46px;height:26px;text-indent:-9999px;overflow:hidden}
#header .util .ut1{margin-right:26px}
#header .util .ut1 .icon{background-position:0 -52px}
#header .util .ut1 a:hover .icon{background-position:-46px -52px}
#header .util .ut2 .icon{background-position:0 -98px}
#header .util .ut2 a:hover .icon{background-position:-46px -98px}
#header .util .ut2 .text{background-position:-55px 0}
#header .short_page{width:226px;margin-top:38px}
#header .short_page .tab_menu li{width:50%}
#header .short_page .tab_menu li a{height:73px;background-position:-210px -68px;padding-top:26px}
#header .short_page .tab_menu .on a{background-position:-97px -68px}
#header .short_page .tab_menu li .txt{display:block;height:19px;text-indent:-9999px;overflow:hidden;margin:0 auto}
#header .short_page .tab_menu .tab1 .txt{width:45px;background-position:-335px -74px}
#header .short_page .tab_menu .tab2 .txt{width:60px;background-position:-335px -106px}
#header .short_page .tab_wrap{position:relative;height:502px;background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/bg_header_menu.png") no-repeat;margin-top:-32px}
#header .short_page .tab_content li{position:relative}
#header .short_page .tab_content li a{display:block}
#header .short_page .tab_event{padding-top:18px}
#header .short_page .tab_event li{height:61px;background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/bg_header_tab-1.png") 29px 1px repeat-y;padding-left:14px}
#header .short_page .tab_event .pg8{background:none}
#header .short_page .tab_event li a{height:36px}
#header .short_page .tab_event .pg1 a{background-position:-488px -215px}
#header .short_page .tab_event .pg2 a{background-position:-488px -276px}
#header .short_page .tab_event .pg3 a{background-position:-488px -336px}
#header .short_page .tab_event .pg4 a{background-position:-488px -397px}
#header .short_page .tab_event .pg5 a{background-position:-488px -457px}
#header .short_page .tab_event .pg6 a{background-position:-488px -518px}
#header .short_page .tab_event .pg7 a{background-position:-488px -578px}
#header .short_page .tab_event .pg8 a{background-position:-488px -639px}
#header .short_page .tab_event .pg1.on a, #header .short_page .tab_event .pg1 a:hover{background-position:-744px -215px}
#header .short_page .tab_event .pg2.on a, #header .short_page .tab_event .pg2 a:hover{background-position:-744px -276px}
#header .short_page .tab_event .pg3.on a, #header .short_page .tab_event .pg3 a:hover{background-position:-744px -336px}
#header .short_page .tab_event .pg4.on a, #header .short_page .tab_event .pg4 a:hover{background-position:-744px -397px}
#header .short_page .tab_event .pg5.on a, #header .short_page .tab_event .pg5 a:hover{background-position:-744px -457px}
#header .short_page .tab_event .pg6.on a, #header .short_page .tab_event .pg6 a:hover{background-position:-744px -518px}
#header .short_page .tab_event .pg7.on a, #header .short_page .tab_event .pg7 a:hover{background-position:-744px -578px}
#header .short_page .tab_event .pg8.on a, #header .short_page .tab_event .pg8 a:hover{background-position:-744px -639px}
#header .short_page .tab_update li{background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/bg_header_tab-2.png") 0 100% repeat-x;padding-bottom:2px}
#header .short_page .tab_update li a{height:124px;padding-top:42px}
#header .short_page .tab_update li a span{display:block;text-indent:-9999px;overflow:hidden}
#header .short_page .tab_update li .off{position:relative;height:82px;margin:0 auto}
#header .short_page .tab_update li .on{display:none;position:absolute;right:-16px;bottom:2px;height:160px}
#header .short_page .tab_update li.on .on, #header .short_page .tab_update li a:hover .on{display:block}
#header .short_page .tab_update li.on .off, #header .short_page .tab_update li a:hover .off{display:none}
#header .short_page .tab_update .u1 .off{width:99px;background-position: 0 -277px}
#header .short_page .tab_update .u2 .off{width:91px;background-position: 0 -416px}
#header .short_page .tab_update .u3 .off{width:100px;background-position: 0 -555px}
#header .short_page .tab_update .u1 .on{width:259px;background-position:-161px -209px}
#header .short_page .tab_update .u2 .on{width:256px;background-position:-164px -375px}
#header .short_page .tab_update .u3{background:none;padding-bottom:0}
#header .short_page .tab_update .u3 .on{width:276px;bottom:0;background-position:-144px -540px}
#header .btn_gomain{display:block;width:225px;height:48px;text-indent:-9999px;overflow:hidden;background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/btn_header_gomain.png") no-repeat;margin-top:15px}
#header .btn_gomain:hover{background-position:0 -52px}

#footer{position:absolute;bottom:0;left:0;width:100%;height:48px;background:#000;text-align:center;color:#999;line-height:46px;font-size:11px}

/* 맨 위로~ */
.btn_top{display:none;position:absolute;bottom:-20px;width:173px;height:357px;right:128px;background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/spr_btn_top.png") no-repeat;overflow:hidden;text-indent:-9999px;opacity:0}
.btn_top:hover{background-position:-214px 0}

/**** common ****/
#wrap{min-height:1102px;padding-bottom:48px}
#wrap.fixed #header, #wrap.fixed .title{position:fixed}

/* title */
#wrap .title{position:absolute;top:0;left:0;width:100%;height:100%}
#wrap .title .title_char, #wrap .title .title_txt{position:absolute}

/* content */
#content{display:none;position:relative}
#content .bg_cover{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;filter:alpha(opacity=80);opacity:0.8}
#content .container{display:none;width:1001px;padding-top:76px}
#content h3{margin-bottom:29px}
#content .inner{position:relative;margin-bottom:108px}
#content .btn_view{position:absolute;width:241px;height:51px;background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/update1/btn_update_view.png") no-repeat;text-indent:-9999px;overflow:hidden}

/***** update1 ****/

/* title */
.update1 .title{height:1102px;background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/update1/bg_update1.jpg") 50% 0 no-repeat}
.update1 .title .title_char, .update1 .title .title_char span{background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/update1/title_char.png") 0 0 no-repeat}
.update1 .title .title_char{top:163px;left:69px;width:842px;height:803px}
.update1 .title .title_char span{position:absolute;top:234px;width:273px;height:238px;left:266px;background-position:-266px -234px}
.update1 .title .title_char .over{background-position:-854px -234px}
.update1 .title .title_txt{top:239px;right:-190px;width:412px;height:463px;background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/update1/title_txt.png") no-repeat}

/* content */
.update1 #content{height:3355px}
.update1 .content1{height:881px;background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/update1/img_content-1.png") no-repeat}
.update1 .content2{height:1178px;background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/update1/img_content-2.png") no-repeat}
.update1 .content3{height:683px;background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/update1/img_content-3.png") no-repeat}
.update1 .btn_view{bottom:53px;left:66px}


/*Update2*/
.update2 .title{height:1102px;background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/update2/bg_update2.jpg") 50% 0 no-repeat}
.line_effect{position:absolute; left:-223px;top:144px; width:1384px; height:736px;}
.line_effect div{width:250%;height:100%; float:left; overflow:hidden; position:relative; opacity:0;}
.line_effect div img{position:absolute; right:0; top:0;}
.update2 .title .title_char, .update2 .title .title_char span{background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/update2/title_char.png") 0 0 no-repeat}
.update2 .title .title_char{top:132px;left:-31px;width:1006px;height:842px}
.update2 .title .title_char span{float:left;width:1006px;height:842px;background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/update2/title_char.png") 0 0 no-repeat}
.update2 .title .title_char .over{background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/update2/title_char_on.png") 0 0 no-repeat}
.update2 .title .title_txt{top:239px;right:-190px;width:412px;height:463px;background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/update2/title_txt.png") no-repeat}

.update2 #content{height:3324px}
.update2 .content1{height:866px;background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/update2/img_content-1.png") no-repeat}
.update2 .content2{height:862px;background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/update2/img_content-2.png") no-repeat}
.update2 .content3{height:983px;background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/update2/img_content-3.png") no-repeat}
.update2 .btn_view{bottom:34px;left:60px}

/*Update3*/
.update3 .title{height:1102px;background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/update3/bg_update3.jpg") 50% 0 no-repeat}
.line_effect{position:absolute; left:-223px;top:144px; width:1384px; height:736px;}
.line_effect div{width:250%;height:100%; float:left; overflow:hidden; position:relative; opacity:0;}
.line_effect div img{position:absolute; right:0; top:0;}
.update3 .title .title_char, .update3 .title .title_char span{background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/update3/title_char.png") 0 0 no-repeat}
.update3 .title .title_char{top:86px;left:-59px;width:1262px;height:885px}
.update3 .title .title_char span{float:left;width:1006px;height:842px;background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/update3/title_char.png") 0 0 no-repeat}
.update3 .title .title_char .over{background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/update3/title_char_on.png") 0 0 no-repeat}
.update3 .title .title_txt{top:239px;right:-190px;width:469px;height:463px;background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/update3/title_txt.png") no-repeat}

.update3 #content{height:4481px}
.update3 .content1{height:1684px;background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/update3/img_content-1-0111.png") no-repeat}
.update3 .content2{height:1243px;background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/update3/img_content-2.png") no-repeat}
.update3 .content3{height:941px;background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/update3/img_content-3.png") no-repeat}
.update3 .btn_view{bottom:52px;right:46px}


.bn_char{position:absolute; left:-104px; top:208px;}
.bn_txt{position:absolute; left:318px; top:595px;}
.bn_wrap{width:584px; height:357px; position:absolute; left:347px; top:219px;}
.bn_page{width:600px; height:44px; position:absolute; left:338px; top:667px;}
.prve{float:left;}
.dot_list{height:44px;float:left;margin-top:9px; margin-left:20px;}
.dot_list li{float:left; width:27px; height:26px; background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/update3/dot_off.png") no-repeat; font-size:0;line-height:0; text-indent:100%; overflow:hidden; white-space:nowrap; cursor:pointer; margin:0 20px;}
.dot_list li:hover,.dot_list li.active{background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/update3/dot_on.png") no-repeat;}
.next{float:right;}
.bn_item_wrap{width:100%; height:100%; position:relative; overflow:hidden;}
.bn_item{width:800%; position:absolute; left:0; top:0;}
.bn_item li{float:left;}
.open_pop_btn{position:absolute; right:-150px; top:731px;}