@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, video, iframe, header, article, aside, details, figcaption, figure, footer, hgroup, menu, nav, section { margin: 0; padding: 0; }

header, article, aside, details, figcaption, figure, footer, hgroup, menu, nav, section { display: block; vertical-align: baseline; }

body { color: #000; line-height: 1; font-size: 16px; font-family: "맑은 고딕", "Malgun gothic", "돋움", "dotum", sans-serif; }

input, textarea, button, select { font-size: 16px; font-family: "맑은 고딕", "Malgun gothic", "돋움", "dotum", sans-serif; }

img, fieldset, button { border: 0; }

input, button, textarea { outline: 0; }

button { cursor: pointer; }

table { border-collapse: collapse; border-spacing: 0; }

ul, ol { list-style: none; }

a, a:link { text-decoration: none; color: #000; background-color: transparent; }

.blind { position: absolute; top: 0; left: 0; overflow: hidden; visibility: hidden; width: 0; height: 0; font-size: 0; line-height: 0; }

/* layout */
#wrap { position: relative; overflow: hidden; max-width: 1920px; min-width: 1280px; margin: 0 auto; }

#wrap .bg_wrap { position: absolute; top: 0; left: 0; width: 99.99%; height: 3767px; padding-left: 0.01%; background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_7F7EAA756FC67849/bg_wrap.jpg") center top no-repeat; }

.section { position: relative; }

.section .container { position: relative; width: 1280px; height: 100%; margin: 0 auto; }

/* gnb */
.gnbWrapper { min-width: 1280px !important; }

/* header */
#header { position: absolute; top: 0; left: 0; width: 100%; z-index: 100; }

#header button span, #header a span { display: block; text-indent: -99999px; overflow: hidden; background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_7F7EAA756FC67849/spr_header.png") no-repeat; }

#header .util { position: absolute; top: 20px; right: 20px; }

#header .util, #header .util ul { *zoom: 1; }

#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 .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 { margin-left: 10px; }

#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 { position: absolute; top: 0; right: 0; left: 0; bottom: 0; width: 180px; background: #4900db; background-color: rgba(73, 0, 219, 0.95); z-index: 100; transition: left 400ms ease; }

.fixed #lnb { position: fixed; }

#lnb h1 a, #lnb li a .txt, #lnb li a .thumb, #lnb .btn_toggle span, #lnb .nav .deco { display: block; text-indent: -99999px; overflow: hidden; background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_7F7EAA756FC67849/spr_lnb.png") no-repeat; }

#lnb .lnb_wrap { position: relative; height: 100%; margin-right: -30px; }

#lnb #mCSB_1_scrollbar_vertical { right: 27px !important; }

#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 { left: -140px; }

#lnb.hide .btn_toggle span { background-position: -113px -85px; }

#lnb.hide .btn_toggle:hover span { background-position: -200px -85px; }

#lnb h1 { position: absolute; top: 34px; left: 48px; }

#lnb h1 a { width: 84px; height: 99px; }

#lnb .nav { position: relative; width: 180px; margin-top: 166px; }

#lnb .nav .deco { position: absolute; left: 0; width: 100%; height: 7px; background-position: 0 -737px; z-index: 1; }

#lnb .nav ._d1 { top: -3px; }

#lnb .nav ._d2 { top: 566px; }

#lnb li { position: relative; background: #260072; padding-bottom: 30px; }

#lnb li.disabled { background: none; }

#lnb li.nav1 { padding-top: 30px; }

#lnb li.nav3 { margin-bottom: 30px; }

#lnb li a { position: relative; display: block; height: 60px; }

#lnb li .txt, #lnb li .thumb { position: absolute; top: 0; height: 100%; }

#lnb li .txt { left: 12px; width: 97px; }

#lnb li .thumb { right: 10px; width: 60px; height: 60px; transition: right 300ms ease; }

#lnb li .thumb .border { position: absolute; top: 0; right: 0; left: 0; bottom: 0; display: none; border: 1px solid #fff; }

#lnb li .thumb .plus { background: #fff; }

#lnb li .thumb .v { position: absolute; top: 26px; left: 30px; width: 1px; height: 9px; transform: scale(1, 0); }

#lnb li .thumb .h { position: absolute; top: 30px; left: 26px; width: 9px; height: 1px; transform: scale(0, 1); }

#lnb li .thumb .rhombus { position: absolute; top: 50%; left: 50%; width: 13px; height: 13px; background: #8a6a5f; border: 1px solid #fff; transform: rotate(45deg) scale(0); margin: -7px 0 0 -7px; }

#lnb li .thumb .rhombus, #lnb li .thumb .plus { transition: transform 200ms ease; }

#lnb li.on .thumb, #lnb li a:hover .thumb { right: -30px; }

#lnb li a:hover .thumb .rhombus { transform: rotate(45deg) scale(1); }

#lnb li.on .border, #lnb li a:hover .thumb .border { display: block; }

#lnb li a:hover .thumb .plus { transform: scale(1, 1); transition-delay: 200ms; }

#lnb li.nav1 .txt { background-position: 0 -177px; }

#lnb li.nav1 a:hover .txt, #lnb li.nav1.on a .txt { background-position: -162px -177px; }

#lnb li.nav1 .thumb { background-position: -300px -177px; }

#lnb li.nav2 .txt { background-position: 0 -267px; }

#lnb li.nav2 a:hover .txt, #lnb li.nav2.on a .txt { background-position: -162px -267px; }

#lnb li.nav2 .thumb { background-position: -300px -267px; }

#lnb li.nav3 .txt { background-position: 0 -357px; }

#lnb li.nav3 a:hover .txt, #lnb li.nav3.on a .txt { background-position: -162px -357px; }

#lnb li.nav3 .thumb { background-position: -300px -357px; }

#lnb li.nav4 .txt { background-position: 0 -457px; }

#lnb li.nav4 a:hover .txt, #lnb li.nav4.on a .txt { background-position: -162px -457px; }

#lnb li.nav4 .thumb { background-position: -300px -457px; }

#lnb li.nav5 .txt { background-position: 0 -547px; }

#lnb li.nav5 a:hover .txt, #lnb li.nav5.on a .txt { background-position: -162px -547px; }

#lnb li.nav5 .thumb { background-position: -300px -547px; }

#lnb li.nav6 .txt { background-position: 0 -637px; }

#lnb li.nav6 a:hover .txt, #lnb li.nav6.on a .txt { background-position: -162px -637px; }

#lnb li.nav6 .thumb { background-position: -300px -637px; }

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

/* layerpop */
.modal-popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999999; overflow: hidden; opacity: opacity(0); overflow-y: auto; }

.modal-popup.show { display: block; }

.modal-popup .dim { position: absolute; top: 0; right: 0; left: 0; width: 100%; min-height: 100%; background: #000; opacity: opacity(0.5); }

.modal-popup .modal-wrap { position: absolute; top: 50%; left: 50%; }

.modal-popup button { display: block; text-indent: -99999px; overflow: hidden; background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_7F7EAA756FC67849/spr_btn_pop.png") no-repeat; }

.modal-popup .btn_x { position: absolute; left: 50%; width: 67px; height: 67px; background-position: -136px 0; margin-left: -34px; }

.modal-popup .btn_x:hover { background-position: -224px 0; }

.modal-popup.scrollpop .modal-wrap { top: 20px; margin-top: 0 !important; margin-bottom: 20px; }

.modal-popup.scrollpop .dim { padding-bottom: 40px; }

/* lnb popup */
.pop_lnb { width: 360px; height: 212px; background: url("bg_pop_lnb.jpg") no-repeat; margin: -106px 0 0 -180px; }

.pop_lnb .btn_x { top: -28px; }

.pop_lnb .btn_confirm { bottom: 10px; left: 10px; width: 340px; height: 60px; background-position: 0 -90px; }

.pop_lnb .btn_confirm:hover { background-position: 0 -170px; }

/* video pop */
.pop_video { width: 1024px; height: 631px; margin: -315px 0 0 -512px; padding-top: 35px; }

.pop_video .frame_wrap { position: relative; width: 100%; height: 576px; background: #1b1b1b; }

.pop_video .frame_wrap iframe { width: 100%; height: 100%; }

.pop_video .deco { position: absolute; left: 0; display: block; text-indent: -99999px; overflow: hidden; background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_7F7EAA756FC67849/spr_pop_video.png") no-repeat; width: 100%; }

.pop_video .deco._d1 { top: 31px; height: 7px; }

.pop_video .deco._d2 { bottom: 0; height: 59px; background-position: 0 -18px; }

.pop_video .btn_x { top: 0; }

.pop_video .btn_hide_video { right: 28px; bottom: 21px; width: 129px; height: 14px; }

/* channeling */
.naver .modal-pop .modal-wrap { margin-top: 0 !important; }

.naver .modal-pop .pop_lnb { top: 300px; }

.naver .modal-pop .pop_video { top: 150px; }

/* common */
.section .object_wrap { position: absolute; left: 0; width: 100%; }

.section .object_wrap div, .section .object_wrap span { position: absolute; }

/* intro */
.intro { height: 993px; }

.intro .title_wrap span, .intro .char span { opacity: 0; }

.intro .title_wrap span { background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_7F7EAA756FC67849/spr_title_intro.png") 0 0 no-repeat; }

.intro .title_wrap .headline span { top: 0; height: 100%; transition: opacity 300ms ease, transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275); }

.intro .title_wrap ._h1 { top: 473px; left: 428px; height: 100px; }

.intro .title_wrap ._h1 span { transform-origin: 50% 50% 100px; transform: perspective(500px) rotateX(180deg); }

.intro .title_wrap ._h2 { top: 591px; left: 212px; height: 186px; }

.intro .title_wrap ._h2 span { transform-origin: 50% 50% -100px; transform: perspective(500px) rotateX(180deg); }

.intro .title_wrap ._h1 ._t1 { left: 0px; width: 104px; background-position: -243px 0; transition-delay: 1200ms; }

.intro .title_wrap ._h1 ._t2 { left: 109px; width: 98px; background-position: -352px 0; transition-delay: 1300ms; }

.intro .title_wrap ._h1 ._t3 { left: 212px; width: 106px; background-position: -455px 0; transition-delay: 1400ms; }

.intro .title_wrap ._h1 ._t4 { left: 324px; width: 100px; background-position: -567px 0; transition-delay: 1500ms; }

.intro .title_wrap ._h2 ._t1 { left: 0px; width: 199px; background-position: -27px -119px; transition-delay: 1600ms; }

.intro .title_wrap ._h2 ._t2 { left: 203px; width: 183px; background-position: -230px -119px; transition-delay: 1700ms; }

.intro .title_wrap ._h2 ._t3 { left: 402px; width: 199px; background-position: -429px -119px; transition-delay: 1800ms; }

.intro .title_wrap ._h2 ._t4 { left: 605px; width: 194px; background-position: -632px -119px; transition-delay: 1900ms; }

.intro .title_wrap ._h2 ._t5 { left: 800px; width: 57px; background-position: -827px -119px; transition-delay: 2000ms; }

.intro .title_wrap .shadow { top: 446px; left: 185px; width: 911px; height: 358px; background-position: 0 -342px; transition: opacity 200ms linear; transition-delay: 2300ms; }

.intro .bar { position: absolute; left: -320px; bottom: 0; width: 1920px; height: 78px; }

.intro .bar span { position: absolute; top: 0; height: 100%; transform: skewX(-45deg); transform-origin: 0 50%; }

.intro .bar ._b1 { left: -29px; width: 636px; background: #7218ff; }

.intro .bar ._b2 { left: 595px; width: 836px; background: #5011b2; }

.intro .bar ._b3 { left: 1290px; width: 670px; background: #7719b2; }

.intro .char { position: absolute; top: 54px; left: 264px; width: 738px; height: 961px; }

.intro .char span { position: absolute; background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_7F7EAA756FC67849/spr_char_intro.png") 0 0 no-repeat; }

.intro .char .body, .intro .char .body span { top: 0; left: 0; width: 100%; height: 100%; }

.intro .char .body span { transition: opacity 300ms linear; animation: doongdoong 600ms infinite alternate linear; }

.intro .char .bubble { transform-origin: 0 80%; top: 108px; left: 624px; width: 268px; height: 267px; transition: opacity 300ms ease; background-position: -788px 0; }

.intro .circle_wrap span { transform: scale(0); border-radius: 100%; transition: transform 300ms cubic-bezier(0, 0.3, 0.3, 1.5); }

.intro .circle_wrap ._c1 { top: 485px; left: -12px; width: 109px; height: 109px; background: #631bff; opacity: 0.5; transition-delay: 3000ms; }

.intro .circle_wrap ._c2 { top: 65px; left: 460px; width: 83px; height: 83px; background: #631bff; opacity: 0.7; transition-delay: 3080ms; }

.intro .circle_wrap ._c3 { top: 99px; left: 756px; width: 32px; height: 32px; background: #fff; opacity: 0.3; transition-delay: 3160ms; }

.intro .circle_wrap ._c4 { top: 184px; left: 1070px; width: 79px; height: 79px; background: #631bff; opacity: 0.6; transition-delay: 3240ms; }

.intro .circle_wrap ._c5 { top: 599px; left: 1151px; width: 83px; height: 83px; background: #631bff; opacity: 0.5; transition-delay: 3320ms; }

.intro.load .title_wrap span, .intro.load .char span { opacity: 1; }

.intro.load .title_wrap span { transform: rotateX(0); }

.intro.load .char .body { animation: comming 1.5s steps(3, start); }

.intro.load .char .bubble { animation: bubble 450ms ease; transition-delay: 2550ms; animation-delay: 2550ms; }

.intro.load .circle_wrap span { transform: scale(1); }

.content1 { height: 2774px; }

.content1 .content_wrap span, .content1 .content_wrap a { background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_7F7EAA756FC67849/spr_txt_content1.png") 0 0 no-repeat; }

.content1 .content_wrap .ribbon { top: 0; height: 46px; }

.content1 .content_wrap .h3 { top: 69px; height: 64px; }

.content1 .content_wrap a { position: absolute; display: block; text-indent: -99999px; overflow: hidden; }

.content1 .content_wrap .btn_event { transition: transform 300ms ease; }

.content1 .content_wrap .btn_event span { left: 50%; width: 254px; height: 58px; background-position: 0 -2559px; margin-left: -127px; }

.content1 .content_wrap .btn_event:hover { transform: translateY(-15px); }

.content1 .content_wrap .btn_event:hover span { background-position: -284px -2559px; }

.content1 ._cnt1 { top: 84px; }

.content1 ._cnt1 .ribbon { left: 540px; width: 201px; background-position: -503px 0; }

.content1 ._cnt1 .h3 { left: 266px; width: 747px; background-position: -229px -69px; }

.content1 ._cnt1 .description { top: 155px; left: 305px; width: 668px; height: 58px; background-position: -268px -155px; }

.content1 ._cnt1 .btn { top: 240px; left: 473px; width: 334px; height: 66px; background-position: -243px -240px; }

.content1 ._cnt1 .btn:hover { background-position: -630px -240px; }

.content1 ._cnt1 .box { top: 340px; left: 42px; width: 1198px; height: 272px; }

.content1 ._cnt1 .box span { top: 0; height: 100%; }

.content1 ._cnt1 .box .left { left: 0; width: 245px; background-position: -5px -340px; }

.content1 ._cnt1 .box .right { right: 0; width: 945px; background-position: -258px -340px; }

.content1 ._cnt2 { top: 770px; }

.content1 ._cnt2 .ribbon { left: 515px; width: 251px; background-position: -477px -673px; }

.content1 ._cnt2 .h3 { left: 296px; width: 688px; height: 63px; background-position: -268px -741px; }

.content1 ._cnt2 .description { top: 152px; left: 459px; width: 351px; height: 25px; background-position: -428px -825px; }

.content1 ._cnt2 .link { top: 214px; left: 43px; width: 1197px; height: 568px; background: #3400A0; }

.content1 ._cnt2 .link:before { position: absolute; top: 10px; right: 10px; left: 10px; bottom: 10px; content: ""; display: block; border: 1px solid #5B2CBF; }

.content1 ._cnt2 .link .btn_event { top: 61px; width: 327px; height: 443px; z-index: 1; }

.content1 ._cnt2 .link .btn_event span { bottom: 32px; }

.content1 ._cnt2 .link .btn1 { left: 81px; background-position: -86px -947px; }

.content1 ._cnt2 .link .btn2 { left: 434px; background-position: -439px -947px; }

.content1 ._cnt2 .link .btn3 { left: 787px; background-position: -792px -947px; }

.content1 ._cnt3 { top: 1643px; }

.content1 ._cnt3 .btn_event { width: 502px; height: 474px; }

.content1 ._cnt3 .btn_event span { bottom: 44px; }

.content1 ._cnt3 .btn1 { left: 124px; top: 0px; background-position: -85px -1445px; }

.content1 ._cnt3 .btn2 { left: 655px; top: 0px; background-position: -616px -1445px; }

.content1 ._cnt3 .btn3 { left: 124px; top: 526px; background-position: -85px -1971px; }

.content1 ._cnt3 .btn4 { left: 655px; top: 526px; background-position: -616px -1971px; }

.content1 .shape_wrap .shape, .content1 .shape_wrap .bar { width: 0; }

.content1 .shape_wrap .bar { height: 87px; }

.content1 .shape_wrap .char { opacity: 0; transition: all 300ms ease; }

.content1 .shape_wrap.active .shape, .content1 .shape_wrap.active .bar { width: 1920px; }

.content1 .shape_wrap.active .shape { transition: width 600ms ease; }

.content1 .shape_wrap.active .bar { transition: width 700ms ease; }

.content1 .shape_wrap.active .char { opacity: 1; transform: translateX(0); transition: opacity 300ms linear, transform 2s cubic-bezier(0, 1, 0.3, 1); }

.content1 ._shape1 { top: 84px; }

.content1 ._shape1 .shape { top: 200px; right: -320px; height: 1116px; background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_7F7EAA756FC67849/bg_shape1_content1.png") 100% 0 no-repeat; }

.content1 ._shape1 .char { top: -311px; left: 531px; width: 1396px; height: 1353px; transform: translateX(200px); background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_7F7EAA756FC67849/bg_char1_content1.png") 0 0 no-repeat; }

.content1 ._shape1 .bar { top: 738px; left: -320px; height: 603px; background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_7F7EAA756FC67849/bg_bar1_content1.png") 0 0 no-repeat; }

.content1 ._shape1.active .bar { transition-delay: 500ms; }

.content1 ._shape1.active .char { transition-delay: 700ms; }

.content1 ._shape2 { top: 1396px; }

.content1 ._shape2 .shape { top: 652px; left: -320px; height: 726px; background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_7F7EAA756FC67849/bg_shape2_content1.png") 0 0 no-repeat; }

.content1 ._shape2 .char { top: 0; left: -519px; width: 867px; height: 1195px; transform: translateX(-200px); background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_7F7EAA756FC67849/bg_char2_content1.png") 0 0 no-repeat; background-position: 100% 0; }

.content1 ._shape2 .bar { top: 652px; right: -320px; height: 604px; background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_7F7EAA756FC67849/bg_bar2_content1.png") 100% 0 no-repeat; }

.content1 ._shape2.active .bar { transition-delay: 800ms; }

.content1 ._shape2.active .shape { transition-delay: 200ms; }

.footer { height: 84px; background: #000; }

.footer .copyright { position: absolute; top: 34px; left: 50%; display: block; text-indent: -99999px; overflow: hidden; background: url("https://ssl.nexon.com/s2/game/baram/2020/event/0213_event_7F7EAA756FC67849/copyright.png") no-repeat; width: 359px; height: 15px; margin-left: -180px; }

@keyframes doongdoong { 0% { transform: translateY(0); }
  100% { transform: translateY(5px); } }

@keyframes comming { 0% { transform: scale(0); }
  100% { transform: scale(1); } }

@keyframes bubble { 0% { transform: rotate(45deg); }
  50% { transform: rotate(-10deg); }
  70% { transform: rotate(5deg); }
  90% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); } }