@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:'Noto Sans KR','돋움','dotum',sans-serif;font-size:16px;color:#f2e8c4;line-height:1;background:#fff}
input,textarea,button,select{font-size:inherit;font-family:'Noto Sans KR','돋움','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:#f2e8c4}
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%}
#wrap .bg_section{position:absolute;top:0;left:0;width:99.99%;height:100%;padding-left:0.01%}
.gnbWrapper{min-width:1280px !important}

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

/* 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 .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:fixed;z-index:100}
#nav .nav_wrap{bottom:28px;left:50%;width:1575px;height:129px;background-position:0 -356px;margin-left:-775px}
#nav.toggle .nav_wrap{display:none}
#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{bottom:50px;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}

/* bg */
.bg_wrap{position:absolute;top:0;left:0;width:100%;height:100%}
.bg_wrap .bg_section{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0725_event01_58D8C275FC06D740/bg_wrap.jpg") center top no-repeat;background-size:cover}
.bg_wrap canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}

/* content */
.content_wrap{position:relative;min-height:995px}
.icon, .char_aside li a span, .content h3 .txt, .content h4{display:block;text-indent:-99999px;overflow:hidden;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0725_event01_58D8C275FC06D740/spr.png") no-repeat}
.content_wrap .content{display:none;position:absolute;top:0;left:0;width:100%;height:100%}
.content_wrap .content.on{display:block}
#wrap .icon{width:64px;height:74px}
.char0 .icon{background-position:-93px 0}
.char1 .icon{background-position:-93px -105px}
.char2 .icon{background-position:-93px -209px}
.char3 .icon{background-position:-93px -314px}
.char4 .icon{background-position:-93px -419px}
.char5 .icon{background-position:-93px -523px}
.char6 .icon{background-position:-93px -628px}
.char7 .icon{background-position:-93px -732px}
.char8 .icon{background-position:-93px -837px}
li.char0 .icon.back{background-position:0 0}
li.char1 .icon.back{background-position:0 -105px}
li.char2 .icon.back{background-position:0 -209px}
li.char3 .icon.back{background-position:0 -314px}
li.char4 .icon.back{background-position:0 -419px}
li.char5 .icon.back{background-position:0 -523px}
li.char6 .icon.back{background-position:0 -628px}
li.char7 .icon.back{background-position:0 -732px}
li.char8 .icon.back{background-position:0 -837px}
.content .char_img{position:absolute;bottom:0;left:50%;width:1921px;height:1058px;margin-left:-964px;transform:translateX(-100px);opacity:0}
@media screen and (min-height:1058px){
    .content .char_img{top:0;bottom:auto}
}
.content.active .char_img{opacity:1;filter:alpha(opacity=100);transform:translateX(0);transition:opacity 300ms linear, transform 2s cubic-bezier(0, 0.3, 0.1, 1);transition-delay:100ms}
.content.deactive .char_img{opacity:0;filter:alpha(opacity=0);transform:translateX(30px);transition:all 300ms linear}
.content.char0 .char_img{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0725_event01_58D8C275FC06D740/char_0.png") 0 100% no-repeat}
.content.char1 .char_img{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0725_event01_58D8C275FC06D740/char_1.png") 162px 100% no-repeat}
.content.char2 .char_img{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0725_event01_58D8C275FC06D740/char_2.png") 202px 100% no-repeat}
.content.char3 .char_img{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0725_event01_58D8C275FC06D740/char_3.png") 58px 100% no-repeat}
.content.char4 .char_img{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0725_event01_58D8C275FC06D740/char_4.png") 0 100% no-repeat}
.content.char5 .char_img{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0725_event01_58D8C275FC06D740/char_5.png") 0 100% no-repeat}
.content.char6 .char_img{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0725_event01_58D8C275FC06D740/char_6.png") 0 100% no-repeat;margin-left:-681px}
.content.char7 .char_img{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0725_event01_58D8C275FC06D740/char_7.png") 53px 100% no-repeat}
.content.char8 .char_img{background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0725_event01_58D8C275FC06D740/char_8.png") 0 100% no-repeat}
.content .description{position:absolute;top:132px;left:50%;right:100px;margin-left:94px;word-break:keep-all;z-index:1}
.content h3{position:relative;margin-bottom:23px}
.content h3 .txt{position:absolute;top:0;left:78px;width:183px;height:74px;opacity:0;filter:alpha(opacity=0);transform:translateX(-10px);opacity:0;transition:opacity 300ms ease, transform 500ms ease}
.content.active .desc_wrap{transition:opacity 300ms linear}
.content.active h3 .txt{transform:translateX(0)}
.content.active h3 .txt, .content.active .desc_wrap{opacity:1;filter:alpha(opacity=100)}
.content.deactive h3 .txt, .content .desc_wrap, .content.deactive .desc_wrap{opacity:0;filter:alpha(opacity=0)}
.char0 h3 .txt{background-position:-171px 0}
.char1 h3 .txt{background-position:-171px -105px}
.char2 h3 .txt{background-position:-171px -209px}
.char3 h3 .txt{background-position:-171px -314px}
.char4 h3 .txt{background-position:-171px -419px}
.char5 h3 .txt{background-position:-171px -523px}
.char6 h3 .txt{background-position:-171px -628px}
.char7 h3 .txt{background-position:-171px -732px}
.char8 h3 .txt{background-position:-171px -837px}
.content h4{width:134px;height:36px}
.content .h4_1{background-position:-436px -1px;margin-bottom:22px}
.content .h4_2{background-position:-436px -45px;margin-bottom:19px}
.content .desc_list{min-height:130px;padding-bottom:31px}
.char1 .desc_list, .char6 .desc_list{min-height:156px}
.char5 .desc_list{min-height:182px}
.char7 .desc_list{min-height:78px}
.char8 .desc_list{min-height:104px}
.content .desc_list li{position:relative;min-height:20px;line-height:20px;padding-left:28px;margin-bottom:6px}
.content .desc_list li .num{position:absolute;top:0;left:0;width:17px;height:100%;text-align:center;font-size:12px;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0725_event01_58D8C275FC06D740/blt_list.png") no-repeat}
.content .desc_list li li{font-size:15px;margin:6px 0 0 ;padding-left:0}
.content .skill_tab .tab_menu{position:relative;overflow:hidden;z-index:1;margin-bottom:14px}
.content .skill_tab .tab_menu li{float:left;margin:0 4px 5px 0}
.content .skill_tab .tab_menu li a{display:block;min-width:98px;height:31px;line-height:31px;color:#999;text-align:center;font-size:14px;background:#000;border:1px solid #4C4B47;padding:0 8px}
.content .skill_tab .tab_menu li a:hover, .content .skill_tab .tab_menu .on a{color:#fff;background-color:#BB2F32;border-color:#BF3437;border-top-color:#E96066}
.content .skill_tab .tab_menu li .new{color:#fff} 
.content .skill_tab .tab_content{position:relative}
.content .skill_tab .tab_content .gif{height:260px;margin-bottom:18px}
.content .skill_tab .tab_content .gif img{display:block}
.content .skill_tab .tab_content p{word-break:keep-all;line-height:20px}

/* char gnb */
.char_gnb{position:absolute;top:55.67%;left:50%;width:375px;padding-left:2px;overflow:hidden;margin-left:-433px;z-index:1}
.char_gnb ul{position:relative;overflow:hidden;margin-left:-2px}
.char_gnb li{float:left}
.char_gnb li a{position:relative;display:block}
.char_gnb li a span{position:absolute;top:0;left:0;transition:transform 300ms ease}
.char_gnb li .back{-webkit-transform:rotateY(-180deg);filter:alpha(opacity=0);opacity:0}
.char_gnb li.on a .back, .char_gnb li a:hover .back{-webkit-transform:rotateY(0deg);filter:alpha(opacity=100);opacity:1}
.char_gnb li.on a .front, .char_gnb li a:hover .front{-webkit-transform:rotateY(180deg);filter:alpha(opacity=0);opacity:0}
.char_nav{height:186px;background:url("https://ssl.nexon.com/s2/game/baram/2019/event/0725_event01_58D8C275FC06D740/bg_gnb.png") 0 100% no-repeat;margin-bottom:24px}
.char_nav ul{margin-right:-78px}
.char_nav li{margin:0 14px 16px 0}
.char_nav li a{width:64px;height:74px}

.char_aside li{margin-right:10px}
.char_aside li a{width:77px;height:77px}
.char_aside li a span{width:100%;height:100%}
.char_aside .aside1 a .front{background-position:-439px -107px}
.char_aside .aside2 a .front{background-position:-526px -107px}
.char_aside .aside1 a .back{background-position:-439px -206px}
.char_aside .aside2 a .back{background-position:-526px -206px}

/* copyright */
.copyright{position:absolute;bottom:25px;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:-555px}

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

/* chanelling */
.naver #nav .btn_toggle, .naver #nav .nav_wrap{position:absolute;bottom:auto}
.naver #nav .nav_wrap{top:781px}
.naver #nav .btn_toggle{top:816px}
.naver .modal-popup{height:995px;overflow:hidden}
.naver .content_wrap{height:995px}