@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}
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{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:relative;height:48px;background:#000;text-align:center;color:#999;line-height:46px;font-size:11px}

/* gate */
.gate_wrap{height:1102px;background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/gate0125/bg_gate.jpg") 50% 0 no-repeat}
.gate_wrap .bg{position:absolute;width:100%;height:100%;top:0;left:0}
.gate_wrap .bg_effect{background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/gate0125/bg_effect.png") 50% 0 no-repeat}
.gate_wrap .char_wrap{position:absolute;left:50%;width:1200px;height:100%;margin-left:-600px}
.gate_wrap .char{position:absolute;bottom:0;filter:alpha(opacity=0);opacity:0}
.gate_wrap .char.c_male{left:-410px;width:1877px;height:1057px;background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/gate0125/char_male.png") 0 0 no-repeat}
.gate_wrap .char.c_female{left:-238px;width:1499px;height:1094px;background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/gate0125/char_female.png") 0 0 no-repeat}
.gate_wrap .tit_wrap{position:absolute;left:240px;top:467px;width:721px;height:587px;background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/gate0125/bg_title.png") no-repeat}
.gate_wrap .tit_wrap h2, .gate_wrap .tit_wrap p, .gate_wrap .tit_wrap a{background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/gate0125/spr_title.png") no-repeat;text-indent:-9999px;overflow:hidden}
.gate_wrap .tit_wrap, .gate_wrap .tit_wrap p, .gate_wrap .tit_wrap .tit_btn{filter:alpha(opacity=0);opacity:0}
.gate_wrap .tit_wrap h2{width:391px;height:296px;margin:0 auto}
.gate_wrap .tit_wrap p{position:absolute;top:320px;left:47px;width:627px;height:61px;background-position:0 -350px}
.gate_wrap .tit_wrap .tit_btn{position:absolute;top:400px;left:68px;overflow:hidden}
.gate_wrap .tit_wrap a{display:block;float:left}
.gate_wrap .tit_wrap .btn_update{width:279px;height:118px;background-position:0 -459px;margin-right:21px}
.gate_wrap .tit_wrap .btn_update:hover{background-position:0 -614px}
.gate_wrap .tit_wrap .btn_event{width:283px;height:114px;background-position:-301px -459px}
.gate_wrap .tit_wrap .btn_event:hover{background-position:-301px -614px}
.gate_wrap .bubble, .gate_wrap .spark{position:absolute;left:0;width:100%;height:500px}
.gate_wrap .bubble{bottom:0}
.gate_wrap .bubble span{position:absolute;background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/gate0125/spr_bubble.png") no-repeat}
.gate_wrap .bubble .bb1{width:29px;height:29px}
.gate_wrap .bubble .bb2{width:17px;height:17px;background-position:-9px -37px}
.gate_wrap .bubble .bb3{width:17px;height:17px;background-position:-21px -68px}
.gate_wrap .bubble .bb4{width:64px;height:64px;background-position:-77px -9px}
.gate_wrap .bubble .bb5{width:45px;height:45px;background-position:-109px -77px}
.gate_wrap .bubble .bb6{width:34px;height:34px;background-position:-4px -97px}
.gate_wrap .bubble .bb7{width:34px;height:34px;background-position:-251px -58px}
.gate_wrap .bubble .bb8{width:76px;height:76px;background-position:-163px -41px}
.gate_wrap .bubble .bb9{width:45px;height:45px;background-position:-147px -154px}
.gate_wrap .bubble .bb10{width:76px;height:76px;background-position:-201px -122px}
.gate_wrap .bubble .bb11{width:34px;height:34px;background-position:-285px -141px}
.gate_wrap .bubble .bb12{width:49px;height:49px;background-position:-295px -68px}
.gate_wrap .bubble .bb13{width:64px;height:64px;background-position:-333px -135px}
.gate_wrap .bubble .bb14{width:17px;height:17px;background-position:-248px -14px}
.gate_wrap .bubble .bb15{width:49px;height:49px;background-position:-344px -5px}
.gate_wrap .bubble .bb16{width:17px;height:17px;background-position:-297px -182px}
.gate_wrap .spark{top:0}
.gate_wrap .spark span{position:absolute;background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/gate0125/spr_spark.png") no-repeat}
.gate_wrap .spark .fr1{width:21px;height:21px;background-position:-22px 0}
.gate_wrap .spark .fr2{width:46px;height:46px;background-position:-10px -78px}
.gate_wrap .spark .fr3{width:53px;height:53px;background-position:-6px -166px}
.gate_wrap .spark .fr4{width:33px;height:33px;background-position:-16px -266px}
.gate_wrap .spark .fr5{width:65px;height:65px;background-position:0 -341px}

.gate_wrap .btn_video{position:absolute;top:41px;right:17px;width:139px;height:200px;background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1215/spr_btn_video.png") no-repeat;text-indent:-9999px;overflow:hidden}
.gate_wrap .btn_video:hover{background-position:-141px 0}

/* 비디오 */
.video_wrap{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index:10000;min-height:684px}
.video_wrap .dim{position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%;background:#000;filter:alpha(opacity=70);opacity:0.7}
.video_wrap .video_content{position:absolute;top:50%;left:50%;width:968px;height:545px;border:10px solid #000;background:rgba(0,0,0,0.7);margin:-272px 0 0 -484px}
.video_wrap .video_content div{width:100%;height:100%}
.video_wrap .video_content button{position:absolute;left:50%;text-indent:-999px;overflow:hidden}
.video_wrap .video_content .btn_close{top:-79px;left:50%;width:52px;height:52px;background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/btn_pop_close.png") no-repeat;margin-left:-26px}
.video_wrap .video_content .hide_today{bottom:-61px;width:195px;height:36px;background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/gate/btn_hide-today.png") no-repeat;margin-left:-98px}
.video_wrap .tab_video{position:absolute;top:-69px;right:-10px;overflow:hidden}
.video_wrap .tab_video li{float:left;padding-left:6px}
.video_wrap .tab_video li a{display:block;width:132px;height:33px;background:url("https://ssl.nexon.com/s2/game/baram/2017/event/1228_update/gate0125/spr_btn_video.png") no-repeat}
.video_wrap .tab_video .on .video1, .video_wrap .tab_video li .video1:hover{background-position:0 -43px}
.video_wrap .tab_video li .video2{background-position:0 -92px}
.video_wrap .tab_video .on .video2, .video_wrap .tab_video li .video2:hover{background-position:0 -135px}