@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+KR:400&subset=korean");
/* 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;
}

html {
  overflow-y: scroll;
}

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

input, textarea, button, select {
  font-size: 15px;
  font-family: "Noto Sans KR", "맑은 고딕", "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;
}

a, img {
  vertical-align: top;
}

.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;
  min-width: 1280px;
}

section {
  position: relative;
}

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

/* common */
header .logo, header .btn, .content .btn_reserve:after, .btn_reserve:before, .btn_top, .layerpop button {
  display: block;
  text-indent: -99999px;
  overflow: hidden;
  background: url("https://lwi.nexon.com/baram/2020/0709_event_79C83AA0FDAB1F8D/spr_btn.png") no-repeat;
}

section .object_wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

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

#lnb {
  position: absolute;
  top: 0;
  left: 0;
  width: 142px;
  height: 100%;
  z-index: 100;
  background: rgba(55, 23, 51, 0.9);
  transition: left 300ms ease;
}

.fixed #lnb {
  position: fixed;
}

#lnb .lnb_wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#lnb a {
  display: block;
  text-indent: -99999px;
  overflow: hidden;
  background: url("https://lwi.nexon.com/baram/2020/0709_event_79C83AA0FDAB1F8D/spr_lnb.png") no-repeat;
}

#lnb h1 {
  position: relative;
  height: 150px;
}

#lnb h1 a {
  position: absolute;
  top: 26px;
  left: 32px;
  width: 84px;
  height: 99px;
  background-position: -416px 0;
}

#lnb .btn_toggle {
  position: absolute;
  top: 0;
  left: 142px;
  width: 36px;
  height: 36px;
  background: #312430;
}

#lnb .btn_toggle span {
  position: absolute;
  top: 16px;
  left: 7px;
  width: 22px;
  height: 3px;
  background: #fff;
  transition: all 300ms ease;
}

#lnb .btn_toggle span:first-child {
  transform: rotate(45deg) skew(-45deg);
}

#lnb .btn_toggle span:last-child {
  transform: rotate(-45deg) skew(45deg);
}

#lnb.hide {
  left: -142px;
}

#lnb.hide .btn_toggle span {
  width: 11px;
}

#lnb.hide .btn_toggle span:first-child {
  transform: rotate(45deg) skew(-45deg) translate(-5px, -6px);
}

#lnb.hide .btn_toggle span:last-child {
  transform: rotate(-45deg) skew(45deg) translate(-5px, 6px);
}

#lnb nav {
  width: 136px;
  margin: 0 auto 26px;
}

#lnb nav li {
  margin-bottom: 3px;
}

#lnb nav a {
  height: 149px;
  background-position-x: 0;
}

#lnb nav li.on a, #lnb nav a:hover {
  background-position-x: -139px;
}

#lnb nav .nav1 a {
  background-position-y: 0px;
}

#lnb nav .nav2 a {
  background-position-y: -152px;
}

#lnb nav .nav3 a {
  background-position-y: -304px;
}

#lnb nav .nav4 a {
  background-position-y: -456px;
}

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

header .logo {
  position: absolute;
  top: 26px;
  left: 32px;
  width: 84px;
  height: 99px;
  background-position: -723px 0;
}

header .util {
  position: absolute;
  top: 14px;
  right: 0;
  height: 54px;
  background: url("https://lwi.nexon.com/baram/2020/0709_event_79C83AA0FDAB1F8D/spr_btn.png") -112px 0 no-repeat;
  padding-left: 229px;
}

header .util ul {
  width: 98px;
  display: flex;
  justify-content: center;
  padding-right: 7px;
}

header .util ul li {
  margin: 0 8px;
}

header .util ul a {
  width: 26px;
}

header .util ul .btn_h {
  background-position-x: -356px;
}

header .util ul .btn_c {
  background-position-x: -399px;
}

header .btn {
  height: 54px;
  background-position-y: -54px;
}

header .btn:hover {
  background-position-y: -108px;
}

header .btn_start {
  position: absolute;
  top: 0;
  left: 0;
  width: 229px;
  height: 54px;
  background-position-x: -112px;
}

.intro {
  height: 1100px;
}

.intro:before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  content: "";
  width: 99.99%;
  background: url("https://lwi.nexon.com/baram/2020/0709_event_79C83AA0FDAB1F8D/bg_intro.jpg") center top no-repeat;
  padding-left: 0.01%;
}

.intro #screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 300;
}

.intro #screen.hide {
  opacity: 0;
  transition: opacity 500ms linear;
}

.intro .char_wrap span, .intro .bomb_wrap span, .intro .fragment, .intro .monster_wrap span, .intro .title_wrap span:not(.txt), .intro .title_wrap .info {
  opacity: 0;
}

.intro .fragment {
  position: absolute;
  top: 365px;
  left: -358px;
  width: 1997px;
  height: 782px;
  background: url("https://lwi.nexon.com/baram/2020/0709_event_79C83AA0FDAB1F8D/bg_fragment_intro.png") 0 0 no-repeat;
  transform: scale(0);
  transform-origin: 50% 100%;
}

.intro .monster_wrap span {
  background: url("https://lwi.nexon.com/baram/2020/0709_event_79C83AA0FDAB1F8D/spr_monster_intro.png") 0 0 no-repeat;
}

.intro .monster_wrap ._m1 {
  top: 650px;
  left: 740px;
  width: 199px;
  height: 256px;
  background-position: 0px 0px;
  transform: translate(20px, 20px);
}

.intro .monster_wrap ._m2 {
  top: 896px;
  left: 563px;
  width: 200px;
  height: 217px;
  background-position: 0px -300px;
  transform: translate(0px, 20px);
}

.intro .monster_wrap ._m3 {
  top: 866px;
  left: 178px;
  width: 325px;
  height: 213px;
  background-position: 0px -561px;
  transform: translate(20px, 20px);
}

.intro .monster_wrap ._m4 {
  top: 515px;
  left: -688px;
  width: 247px;
  height: 466px;
  background-position: 0px -1621px;
  transform: translate(-20px, 20px);
}

.intro .monster_wrap ._m5 {
  top: 292px;
  left: 1512px;
  width: 454px;
  height: 608px;
  background-position: -446px -1543px;
  transform: translate(20px, 20px);
}

.intro .monster_wrap ._m6 {
  top: 639px;
  left: -319px;
  width: 489px;
  height: 412px;
  background-position: -411px 0px;
  transform: translate(-20px, 20px);
}

.intro .monster_wrap ._m7 {
  top: 218px;
  left: 1227px;
  width: 806px;
  height: 698px;
  background-position: 0px -2151px;
  transform: translate(20px, 20px);
}

.intro .monster_wrap ._m8 {
  top: 303px;
  left: -755px;
  width: 680px;
  height: 703px;
  background-position: 0px -787px;
  transform: translate(-20px, 20px);
}

.intro .char_wrap {
  z-index: 1;
}

.intro .char_wrap span {
  background: url("https://lwi.nexon.com/baram/2020/0709_event_79C83AA0FDAB1F8D/spr_char_intro.png") 0 0 no-repeat;
}

.intro .char_wrap ._c1 {
  top: 24px;
  left: -301px;
  width: 566px;
  height: 876px;
  background-position: 0px 0;
}

.intro .char_wrap ._c2 {
  top: 34px;
  left: 688px;
  width: 1047px;
  height: 1376px;
  background-position: -566px 0;
}

.intro .bomb_wrap {
  height: 100%;
  transform-origin: 50% 280px;
}

.intro .bomb_wrap span {
  transform: scale(0) rotate(90deg);
}

.intro .bomb_wrap ._b1 {
  top: 54px;
  left: 411px;
  width: 415px;
  height: 416px;
  background: url("https://lwi.nexon.com/baram/2020/0709_event_79C83AA0FDAB1F8D/bg_bomb1.png") 0 0 no-repeat;
}

.intro .bomb_wrap ._b2 {
  top: -64px;
  left: 153px;
  width: 964px;
  height: 684px;
  background: url("https://lwi.nexon.com/baram/2020/0709_event_79C83AA0FDAB1F8D/bg_bomb2.png") 0 0 no-repeat;
}

.intro .bomb_wrap ._b3 {
  top: -50px;
  left: 178px;
  width: 925px;
  height: 656px;
  background: url("https://lwi.nexon.com/baram/2020/0709_event_79C83AA0FDAB1F8D/bg_bomb3.png") 0 0 no-repeat;
}

.intro .bomb_wrap ._b4 {
  top: -391px;
  left: -129px;
  width: 1717px;
  height: 1230px;
  background: url("https://lwi.nexon.com/baram/2020/0709_event_79C83AA0FDAB1F8D/bg_bomb4.png") 0 0 no-repeat;
}

.intro .bomb_wrap ._b5 {
  top: -299px;
  left: -267px;
  width: 1909px;
  height: 1304px;
  background: url("https://lwi.nexon.com/baram/2020/0709_event_79C83AA0FDAB1F8D/bg_bomb5.png") 0 0 no-repeat;
}

.intro .bomb_wrap ._b6 {
  top: -258px;
  left: -198px;
  width: 1696px;
  height: 1273px;
  background: url("https://lwi.nexon.com/baram/2020/0709_event_79C83AA0FDAB1F8D/bg_bomb6.png") 0 0 no-repeat;
}

.intro .bomb_wrap ._b4 {
  transform: scale(0) rotate(45deg);
}

.intro .bomb_wrap ._b5 {
  transform: scale(0) rotate(-45deg);
}

.intro .bomb_wrap ._b6 {
  transform: scale(0) rotate(45deg);
}

.intro .light_wrap {
  z-index: 1;
}

.intro .light_wrap span {
  transform: scale(0) rotate(15deg);
}

.intro .light_wrap ._l1 {
  top: -168px;
  left: -452px;
  width: 1727px;
  height: 1116px;
  background: url("https://lwi.nexon.com/baram/2020/0709_event_79C83AA0FDAB1F8D/bg_light1.png") 0 0 no-repeat;
}

.intro .light_wrap ._l2 {
  top: -52px;
  left: -183px;
  width: 1289px;
  height: 983px;
  background: url("https://lwi.nexon.com/baram/2020/0709_event_79C83AA0FDAB1F8D/bg_light2.png") 0 0 no-repeat;
}

.intro .title_wrap {
  z-index: 1;
}

.intro .title_wrap span, .intro .title_wrap a {
  background: url("https://lwi.nexon.com/baram/2020/0709_event_79C83AA0FDAB1F8D/spr_title_intro.png") 0 0 no-repeat;
}

.intro .title_wrap .headline {
  top: 158px;
  left: 317px;
  width: 662px;
  height: 539px;
}

.intro .title_wrap .headline span {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: 0 -181px;
  transform: translate(-800px, 160px) skewY(11deg);
}

.intro .title_wrap .date {
  top: 122px;
  left: 317px;
  width: 587px;
  height: 145px;
}

.intro .title_wrap .date span {
  transform: translate(400px, -80px) skewY(11deg);
}

.intro .title_wrap .date ._t1 {
  top: 117px;
  left: 0px;
  width: 24px;
  height: 28px;
  background-position: 0px 0px;
}

.intro .title_wrap .date ._t2 {
  top: 110px;
  left: 19px;
  width: 36px;
  height: 32px;
  background-position: -19px -110px;
}

.intro .title_wrap .date ._t3 {
  top: 106px;
  left: 59px;
  width: 26px;
  height: 27px;
  background-position: -59px 0px;
}

.intro .title_wrap .date ._t4 {
  top: 101px;
  left: 84px;
  width: 25px;
  height: 26px;
  background-position: -124px 0px;
}

.intro .title_wrap .date ._t5 {
  top: 92px;
  left: 105px;
  width: 37px;
  height: 32px;
  background-position: -105px -92px;
}

.intro .title_wrap .date ._t6 {
  top: 76px;
  left: 154px;
  width: 70px;
  height: 59px;
  background-position: -154px -76px;
}

.intro .title_wrap .date ._t7 {
  top: 55px;
  left: 260px;
  width: 63px;
  height: 58px;
  background-position: -260px -55px;
}

.intro .title_wrap .date ._t8 {
  top: 21px;
  left: 416px;
  width: 70px;
  height: 59px;
  background-position: -416px -21px;
}

.intro .title_wrap .date ._t9 {
  top: 0px;
  left: 517px;
  width: 70px;
  height: 59px;
  background-position: -517px 0px;
}

.intro .title_wrap .stit1 {
  top: 611px;
  left: 158px;
  width: 502px;
  height: 21px;
}

.intro .title_wrap .stit1 span {
  transform: translate(400px, -80px) skewY(11deg);
}

.intro .title_wrap .stit1 ._t1 {
  top: 81px;
  left: 0px;
  width: 136px;
  height: 133px;
  background-position: 0px -837px;
}

.intro .title_wrap .stit1 ._t2 {
  top: 54px;
  left: 114px;
  width: 143px;
  height: 119px;
  background-position: -189px -810px;
}

.intro .title_wrap .stit1 ._t3 {
  top: 27px;
  left: 232px;
  width: 148px;
  height: 137px;
  background-position: -369px -783px;
}

.intro .title_wrap .stit1 ._t4 {
  top: 0px;
  left: 359px;
  width: 143px;
  height: 132px;
  background-position: -552px -756px;
}

.intro .title_wrap .stit2 {
  top: 604px;
  left: 450px;
  width: 668px;
  height: 251px;
}

.intro .title_wrap .stit2 span {
  transform: translate(-400px, 80px) skewY(11deg);
}

.intro .title_wrap .stit2 ._t1 {
  top: 114px;
  left: 0px;
  width: 148px;
  height: 137px;
  background-position: 0px -986px;
}

.intro .title_wrap .stit2 ._t2 {
  top: 87px;
  left: 122px;
  width: 148px;
  height: 137px;
  background-position: -122px -1129px;
}

.intro .title_wrap .stit2 ._t3 {
  top: 53px;
  left: 286px;
  width: 140px;
  height: 131px;
  background-position: -286px -975px;
}

.intro .title_wrap .stit2 ._t4 {
  top: 26px;
  left: 401px;
  width: 149px;
  height: 137px;
  background-position: -401px -1129px;
}

.intro .title_wrap .stit2 ._t5 {
  top: 0px;
  left: 523px;
  width: 145px;
  height: 134px;
  background-position: -523px -970px;
}

.intro .title_wrap .description {
  top: 553px;
  left: 667px;
  width: 458px;
  height: 122px;
  background-position: -742px -1128px;
  transform: translate(400px, -80px) skewY(0);
}

.intro .title_wrap .info {
  transform: translate(200px, -20px);
}

.intro .title_wrap .info a {
  position: absolute;
  top: 97px;
  left: 30px;
  display: block;
  text-indent: -99999px;
  overflow: hidden;
  width: 180px;
  height: 56px;
  background-position: -742px -942px;
}

.intro .title_wrap .info .h3 {
  top: 0;
  left: 0;
  width: 163px;
  height: 70px;
}

.intro .title_wrap .info._i1 {
  top: 871px;
  left: 135px;
}

.intro .title_wrap .info._i1 .h3 {
  background-position: -742px 0px;
}

.intro .title_wrap .info._i1 .txt {
  top: 41px;
  left: 30px;
  width: 248px;
  height: 77px;
  background-position: -742px -347px;
}

.intro .title_wrap .info._i2 {
  top: 871px;
  left: 538px;
}

.intro .title_wrap .info._i2 .h3 {
  background-position: -742px -89px;
}

.intro .title_wrap .info._i2 .txt {
  top: 26px;
  left: 33px;
  width: 251px;
  height: 95px;
  background-position: -742px -460px;
}

.intro .title_wrap .info._i3 {
  top: 871px;
  left: 889px;
}

.intro .title_wrap .info._i3 .h3 {
  background-position: -742px -178px;
}

.intro .title_wrap .info._i3 .txt {
  top: 23px;
  left: 0px;
  width: 356px;
  height: 177px;
  background-position: -742px -618px;
}

.intro.load .char_wrap span, .intro.load .bomb_wrap span, .intro.load .fragment, .intro.load .monster_wrap span, .intro.load .title_wrap span:not(.txt), .intro.load .title_wrap .info {
  opacity: 1;
}

.intro.load .monster_wrap span {
  transform: translate(0, 0);
  transition: opacity 300ms linear, transform 500ms ease;
}

.intro.load .monster_wrap ._m1 {
  transition-delay: 560ms;
}

.intro.load .monster_wrap ._m2 {
  transition-delay: 480ms;
}

.intro.load .monster_wrap ._m3 {
  transition-delay: 400ms;
}

.intro.load .monster_wrap ._m4 {
  transition-delay: 320ms;
}

.intro.load .monster_wrap ._m5 {
  transition-delay: 240ms;
}

.intro.load .monster_wrap ._m6 {
  transition-delay: 160ms;
}

.intro.load .monster_wrap ._m7 {
  transition-delay: 80ms;
}

.intro.load .monster_wrap ._m8 {
  transition-delay: 0ms;
}

.intro.load .bomb_wrap {
  animation: vibration 80ms 40 ease-out;
}

.intro.load .bomb_wrap span {
  transform: scale(1) rotate(0);
}

.intro.load .bomb_wrap ._b1 {
  transition: transform 200ms ease, opacity 0ms ease;
  transition-delay: 300ms;
}

.intro.load .bomb_wrap ._b2 {
  transition: transform 200ms cubic-bezier(0.9, 0.1, 1, 1.2), opacity 0ms ease;
  transition-delay: 700ms;
}

.intro.load .bomb_wrap ._b3 {
  transition: transform 200ms cubic-bezier(0.9, 0.1, 1, 1.2), opacity 0ms ease;
  transition-delay: 800ms;
}

.intro.load .bomb_wrap ._b4 {
  transition: all 150ms ease;
  transition-delay: 400ms;
}

.intro.load .bomb_wrap ._b5 {
  transition: all 150ms ease;
  transition-delay: 450ms;
}

.intro.load .bomb_wrap ._b6 {
  transition: all 150ms ease;
  transition-delay: 500ms;
}

.intro.load .light_wrap span {
  transform: scale(1) rotate(0);
  transition: opacity 300ms ease, transform 300ms cubic-bezier(0, 1, 0.9, 1);
}

.intro.load .light_wrap ._l1 {
  transition-delay: 900ms;
}

.intro.load .light_wrap ._l2 {
  transition-delay: 1000ms;
}

.intro.load .char_wrap span {
  transition: opacity 300ms ease;
}

.intro.load .char_wrap ._c1 {
  animation: charMove1 1200ms ease;
  animation-delay: 950ms;
  transition-delay: 950ms;
}

.intro.load .char_wrap ._c2 {
  animation: charMove2 1200ms ease;
  animation-delay: 900ms;
  transition-delay: 900ms;
}

.intro.load .title_wrap span {
  transform: translate(0, 0) skewY(0);
}

.intro.load .title_wrap .date span {
  transition: opacity 300ms ease, transform 300ms cubic-bezier(0, 1, 0.9, 1);
}

.intro.load .title_wrap .date ._t1 {
  transition-delay: 1200ms;
}

.intro.load .title_wrap .date ._t2 {
  transition-delay: 1250ms;
}

.intro.load .title_wrap .date ._t3 {
  transition-delay: 1300ms;
}

.intro.load .title_wrap .date ._t4 {
  transition-delay: 1350ms;
}

.intro.load .title_wrap .date ._t5 {
  transition-delay: 1400ms;
}

.intro.load .title_wrap .date ._t6 {
  transition-delay: 1450ms;
}

.intro.load .title_wrap .date ._t7 {
  transition-delay: 1500ms;
}

.intro.load .title_wrap .date ._t8 {
  transition-delay: 1550ms;
}

.intro.load .title_wrap .date ._t9 {
  transition-delay: 1600ms;
}

.intro.load .title_wrap .headline span {
  transition: opacity 300ms ease, transform 800ms cubic-bezier(0, 0.9, 0, 1);
  transition-delay: 1900ms;
}

.intro.load .title_wrap .subtitle span {
  transition: opacity 300ms ease, transform 300ms cubic-bezier(0, 0.9, 0.9, 1);
}

.intro.load .title_wrap .stit1 ._t1 {
  transition-delay: 2100ms;
}

.intro.load .title_wrap .stit1 ._t2 {
  transition-delay: 2150ms;
}

.intro.load .title_wrap .stit1 ._t3 {
  transition-delay: 2200ms;
}

.intro.load .title_wrap .stit1 ._t4 {
  transition-delay: 2250ms;
}

.intro.load .title_wrap .stit2 ._t1 {
  transition-delay: 2500ms;
}

.intro.load .title_wrap .stit2 ._t2 {
  transition-delay: 2450ms;
}

.intro.load .title_wrap .stit2 ._t3 {
  transition-delay: 2400ms;
}

.intro.load .title_wrap .stit2 ._t4 {
  transition-delay: 2350ms;
}

.intro.load .title_wrap .stit2 ._t5 {
  transition-delay: 2300ms;
}

.intro.load .title_wrap .description {
  transition: opacity 300ms ease, transform 800ms cubic-bezier(0, 0.9, 0, 1);
  transition-delay: 2700ms;
}

.intro.load .title_wrap .info {
  transform: translate(0, 0);
  transition: opacity 300ms ease, transform 400ms cubic-bezier(0, 0.9, 0, 1);
}

.intro.load .title_wrap .info._i1 {
  transition-delay: 2900ms;
}

.intro.load .title_wrap .info._i2 {
  transition-delay: 3050ms;
}

.intro.load .title_wrap .info._i3 {
  transition-delay: 3200ms;
}

.intro.load .fragment {
  transform: scale(1);
  transition: transform 200ms cubic-bezier(0.5, 1, 0.9, 1);
}

.content .tit {
  position: absolute;
  left: 392px;
  width: 496px;
  display: block;
  text-indent: -99999px;
  overflow: hidden;
  background: url("https://lwi.nexon.com/baram/2020/0709_event_79C83AA0FDAB1F8D/spr_title_content.png") no-repeat;
}

.content .tit._t1 {
  top: 118px;
  height: 119px;
  background-position: 0 0px;
}

.content .tit._t2 {
  top: 986px;
  height: 52px;
  background-position: 0 -224px;
}

.content .tit._t3 {
  top: 154px;
  height: 52px;
  background-position: 0 -448px;
}

.content1 {
  height: 1344px;
  background: #312430;
}

.content1 .container {
  padding-top: 439px;
}

.content1 .bg_land {
  position: absolute;
  top: -589px;
  left: 50%;
  width: 2560px;
  height: 682px;
  margin-left: -1280px;
}

.content1 .bg_land:before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  content: "";
  width: 99.99%;
  background: url("https://lwi.nexon.com/baram/2020/0709_event_79C83AA0FDAB1F8D/bg_land.png") center top no-repeat;
  padding-left: 0.01%;
}

.content1 .bg_brush {
  position: absolute;
  top: 1153px;
  left: 50%;
  width: 2560px;
  height: 320px;
  margin-left: -1280px;
}

.content1 .bg_brush:before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  content: "";
  width: 99.99%;
  background: url("https://lwi.nexon.com/baram/2020/0709_event_79C83AA0FDAB1F8D/bg_brush.png") center top no-repeat;
  padding-left: 0.01%;
}

.content1 .btn_reserve {
  position: absolute;
  top: 272px;
  left: 393px;
  width: 463px;
  height: 123px;
  background: none;
  overflow: visible;
}

.content1 .btn_reserve:before, .content1 .btn_reserve:after {
  position: absolute;
  content: "";
}

.content1 .btn_reserve:after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: 0 -197px;
}

.content1 .btn_reserve:hover:after {
  background-position-y: -330px;
}

.content1 .btn_reserve:before {
  top: 9px;
  left: 9px;
  content: "";
  width: 479px;
  height: 151px;
  background-position: -787px -238px;
}

.content1 .letter_list {
  position: relative;
  height: 411px;
}

.content1 .letter_list:before {
  position: absolute;
  top: 0;
  left: -178px;
  content: "";
  width: 1669px;
  height: 100%;
  background: url("https://lwi.nexon.com/baram/2020/0709_event_79C83AA0FDAB1F8D/bg_list_content.png") 0 0 no-repeat;
}

.content1 .letter_list .today {
  position: absolute;
  top: -37px;
  left: 383px;
  width: 512px;
  height: 512px;
  background: url("https://lwi.nexon.com/baram/2020/0709_event_79C83AA0FDAB1F8D/bg_today.png") 0 0 no-repeat;
}

.content1 .letter_list .today span {
  position: absolute;
}

.content1 .letter_list .today .letter {
  top: 166px;
  left: 127px;
  width: 255px;
  height: 117px;
  background: url("https://lwi.nexon.com/baram/2020/0709_event_79C83AA0FDAB1F8D/spr_txt_today.png") 0 0 no-repeat;
}

.content1 .letter_list .today .tit {
  top: 287px;
  left: 154px;
  width: 203px;
  height: 30px;
  background: url("https://lwi.nexon.com/baram/2020/0709_event_79C83AA0FDAB1F8D/txt_today.png") 0 0 no-repeat;
}

.content1 .letter_list.none .today span {
  display: none;
}

.content1 .letter_list ul {
  position: absolute;
  top: 40px;
  width: 629px;
}

.content1 .letter_list ul._u1 {
  left: 0px;
}

.content1 .letter_list ul._u2 {
  left: 650px;
}

.content1 .letter_list li {
  width: 629px;
  height: 44px;
  display: block;
  text-indent: -99999px;
  overflow: hidden;
  background: url("https://lwi.nexon.com/baram/2020/0709_event_79C83AA0FDAB1F8D/spr_letter_list.png") no-repeat;
  margin-bottom: 2px;
}

.content1 .letter_list li._0709 {
  background-position: 0px 0px;
}

.content1 .letter_list.d0709 .today .letter {
  background-position-y: 0px;
}

.content1 .letter_list.d0709 ._0709 {
  background-position-y: -322px;
}

.content1 .letter_list li._0710 {
  background-position: 0px -46px;
}

.content1 .letter_list.d0710 .today .letter {
  background-position-y: -117px;
}

.content1 .letter_list.d0710 ._0710 {
  background-position-y: -368px;
}

.content1 .letter_list li._0711 {
  background-position: 0px -92px;
}

.content1 .letter_list.d0711 .today .letter {
  background-position-y: -234px;
}

.content1 .letter_list.d0711 ._0711 {
  background-position-y: -414px;
}

.content1 .letter_list li._0712 {
  background-position: 0px -138px;
}

.content1 .letter_list.d0712 .today .letter {
  background-position-y: -351px;
}

.content1 .letter_list.d0712 ._0712 {
  background-position-y: -460px;
}

.content1 .letter_list li._0713 {
  background-position: 0px -184px;
}

.content1 .letter_list.d0713 .today .letter {
  background-position-y: -468px;
}

.content1 .letter_list.d0713 ._0713 {
  background-position-y: -506px;
}

.content1 .letter_list li._0714 {
  background-position: 0px -230px;
}

.content1 .letter_list.d0714 .today .letter {
  background-position-y: -585px;
}

.content1 .letter_list.d0714 ._0714 {
  background-position-y: -552px;
}

.content1 .letter_list li._0715 {
  background-position: 0px -276px;
}

.content1 .letter_list.d0715 .today .letter {
  background-position-y: -702px;
}

.content1 .letter_list.d0715 ._0715 {
  background-position-y: -598px;
}

.content1 .letter_list li._0716 {
  background-position: -650px 0px;
}

.content1 .letter_list.d0716 .today .letter {
  background-position-y: -819px;
}

.content1 .letter_list.d0716 ._0716 {
  background-position-y: -322px;
}

.content1 .letter_list li._0717 {
  background-position: -650px -46px;
}

.content1 .letter_list.d0717 .today .letter {
  background-position-y: -936px;
}

.content1 .letter_list.d0717 ._0717 {
  background-position-y: -368px;
}

.content1 .letter_list li._0718 {
  background-position: -650px -92px;
}

.content1 .letter_list.d0718 .today .letter {
  background-position-y: -1053px;
}

.content1 .letter_list.d0718 ._0718 {
  background-position-y: -414px;
}

.content1 .letter_list li._0719 {
  background-position: -650px -138px;
}

.content1 .letter_list.d0719 .today .letter {
  background-position-y: -1170px;
}

.content1 .letter_list.d0719 ._0719 {
  background-position-y: -460px;
}

.content1 .letter_list li._0720 {
  background-position: -650px -184px;
}

.content1 .letter_list.d0720 .today .letter {
  background-position-y: -1287px;
}

.content1 .letter_list.d0720 ._0720 {
  background-position-y: -506px;
}

.content1 .letter_list li._0721 {
  background-position: -650px -230px;
}

.content1 .letter_list.d0721 .today .letter {
  background-position-y: -1404px;
}

.content1 .letter_list.d0721 ._0721 {
  background-position-y: -552px;
}

.content1 .letter_list li._0722 {
  background-position: -650px -276px;
}

.content1 .letter_list.d0722 .today .letter {
  background-position-y: -1521px;
}

.content1 .letter_list.d0722 ._0722 {
  background-position-y: -598px;
}

.content1 .letter_list li._0723 {
  background-position: -1300px 0px;
}

.content1 .letter_list.d0723 .today .letter {
  background-position-y: -1638px;
}

.content1 .letter_list.d0723 ._0723 {
  background-position-y: -322px;
}

.content1 .letter_list li._0724 {
  background-position: -1300px -46px;
}

.content1 .letter_list.d0724 .today .letter {
  background-position-y: -1755px;
}

.content1 .letter_list.d0724 ._0724 {
  background-position-y: -368px;
}

.content1 .letter_list li._0725 {
  background-position: -1300px -92px;
}

.content1 .letter_list.d0725 .today .letter {
  background-position-y: -1872px;
}

.content1 .letter_list.d0725 ._0725 {
  background-position-y: -414px;
}

.content1 .letter_list li._0726 {
  background-position: -1300px -138px;
}

.content1 .letter_list.d0726 .today .letter {
  background-position-y: -1989px;
}

.content1 .letter_list.d0726 ._0726 {
  background-position-y: -460px;
}

.content1 .letter_list li._0727 {
  background-position: -1300px -184px;
}

.content1 .letter_list.d0727 .today .letter {
  background-position-y: -2106px;
}

.content1 .letter_list.d0727 ._0727 {
  background-position-y: -506px;
}

.content1 .letter_list li._0728 {
  background-position: -1300px -230px;
}

.content1 .letter_list.d0728 .today .letter {
  background-position-y: -2223px;
}

.content1 .letter_list.d0728 ._0728 {
  background-position-y: -552px;
}

.content1 .letter_list li._0729 {
  background-position: -1300px -276px;
}

.content1 .letter_list.d0729 .today .letter {
  background-position-y: -2340px;
}

.content1 .letter_list.d0729 ._0729 {
  background-position-y: -598px;
}

.content1 .letter_list li._0730 {
  background-position: -1950px 0px;
}

.content1 .letter_list.d0730 .today .letter {
  background-position-y: -2457px;
}

.content1 .letter_list.d0730 ._0730 {
  background-position-y: -322px;
}

.content1 .named_list {
  position: relative;
  height: 415px;
  padding-left: 32px;
  margin-top: 233px;
  z-index: 1;
  background: url("https://lwi.nexon.com/baram/2020/0709_event_79C83AA0FDAB1F8D/bg_named_shadow.png") 33px 0 no-repeat;
}

.content1 .named_list ul {
  overflow: hidden;
}

.content1 .named_list li {
  float: left;
  width: 384px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  font-size: 26px;
  font-weight: bold;
  color: #fff;
  padding: 184px 16px 184px 0;
  margin-right: 14px;
  background: url("https://lwi.nexon.com/baram/2020/0709_event_79C83AA0FDAB1F8D/bg_named_list.png") 0 0 no-repeat;
}

.content1 .named_list li:last-child {
  margin-right: 0;
}

.content1 .named_list li.named {
  background-position-y: -403px;
}

.content1 .named_list ._n1 {
  background-position: 0px 0;
}

.content1 .named_list ._n2 {
  background-position: -414px 0;
}

.content1 .named_list ._n3 {
  background-position: -828px 0;
}

.content2 {
  height: 636px;
}

.content2:before {
  position: absolute;
  top: -516px;
  left: 0;
  bottom: 0;
  content: "";
  width: 99.99%;
  background: url("https://lwi.nexon.com/baram/2020/0709_event_79C83AA0FDAB1F8D/bg_bottom.png") center top no-repeat;
  padding-left: 0.01%;
}

.content2 .container {
  padding-top: 288px;
}

.content2 .caution {
  height: 348px;
  background: url("https://lwi.nexon.com/baram/2020/0709_event_79C83AA0FDAB1F8D/bg_caution.png") center top no-repeat;
}

footer {
  position: absolute;
  left: 0;
  bottom: 36px;
  width: 100%;
  height: 15px;
  background: url("https://lwi.nexon.com/baram/2020/0709_event_79C83AA0FDAB1F8D/copyright.png") 50% 0 no-repeat;
}

.btn_top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  transform: translateY(104px);
  opacity: 0;
  width: 57px;
  height: 104px;
  background-position: -535px 0;
  z-index: 100;
  transition: opacity 300ms ease, transform 300ms cubic-bezier(0, 0.3, 1, 1.2);
}

.btn_top.show {
  transform: translateY(0);
  opacity: 1;
}

.layerpop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999;
  opacity: 0;
  transition: opacity 200ms ease;
}

.layerpop.show {
  display: block;
}

.layerpop.fade {
  opacity: 1;
}

.layerpop .pop_wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  overflow-y: auto;
}

.layerpop .pop_content {
  position: relative;
  width: 755px;
  height: 382px;
  margin: auto;
  background: url("https://lwi.nexon.com/baram/2020/0709_event_79C83AA0FDAB1F8D/bg_layerpop.png") 0 0 no-repeat;
}

.layerpop .pop_content .btn_x {
  position: absolute;
  top: 22px;
  left: 742px;
  width: 51px;
  height: 38px;
  background-position: -541px -157px;
}

.layerpop .pop_content .btn_x:hover {
  background-position-y: -219px;
}

.layerpop .pop_body {
  position: relative;
  width: 561px;
  padding-top: 60px;
  margin: 0 auto;
}

.layerpop .message {
  color: #000;
  font-size: 42px;
  text-align: center;
  line-height: 50px;
  padding-left: 20px;
}

.layerpop .message .name {
  color: #cf27ff;
}

.layerpop .caution {
  position: absolute;
  top: 207px;
  left: 0;
  width: 100%;
  height: 20px;
  line-height: 19px;
  text-align: center;
  padding-left: 10px;
}

.layerpop .caution .icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("https://lwi.nexon.com/baram/2020/0709_event_79C83AA0FDAB1F8D/spr_blt_caution.png") 0 0 no-repeat;
  vertical-align: top;
  margin-right: 8px;
}

.layerpop .pop_btn {
  position: absolute;
  top: 250px;
  left: 0;
  width: 100%;
  height: 81px;
  text-align: center;
}

.layerpop .pop_btn button {
  display: inline-block;
  width: 327px;
  height: 100%;
  background-position-y: -496px;
}

.layerpop .pop_btn button:hover {
  background-position-y: -577px;
}

.layerpop .pop_btn .btn_confirm {
  background-position-x: 0;
}

.layerpop .pop_btn .btn_close {
  background-position-x: -939px;
}

.layerpop .pop_btn .btn_cancel {
  width: 217px;
  background-position-x: -364px;
  margin-right: -27px;
}

.layerpop .pop_btn .btn_get {
  background-position-x: -593px;
}

.pop_form {
  background: rgba(0, 0, 0, 0.5);
}

.pop_form h3 {
  height: 40px;
  display: block;
  text-indent: -99999px;
  overflow: hidden;
  background: url("https://lwi.nexon.com/baram/2020/0709_event_79C83AA0FDAB1F8D/h3_layerpop.png") center top no-repeat;
}

.pop_form .pop_body {
  padding-top: 49px;
}

.pop_form .input {
  position: relative;
  width: 509px;
  height: 76px;
  background: #ebdfea;
  margin: 27px 0 0 36px;
}

.pop_form .input:before, .pop_form .input:after {
  position: absolute;
  top: 0;
  content: "";
  width: 24px;
  height: 100%;
  background: #ebdfea;
  transform: skewX(-10deg);
}

.pop_form .input:before {
  left: -12px;
}

.pop_form .input:after {
  right: -12px;
}

.pop_form .input input {
  display: block;
  width: 400px;
  height: 100%;
  background: none;
  border: 0 none;
  font-size: 24px;
  color: #9b8199;
  text-align: center;
  margin: 0 auto;
}

.pop_form .input input::placeholder {
  color: #9b8199;
}

.pop_form .input input::-webkit-input-placeholder {
  color: #9b8199;
}

.pop_form .input input:-ms-input-placeholder {
  color: #9b8199;
}

.pop_form .input input::-ms-clear {
  display: none;
}

.pop_form .caution {
  color: #cf27ff;
}

.pop_confirm .caution {
  color: #ec0016;
}

.pop_confirm .caution .icon {
  background-position: 0 -20px;
}

@keyframes vibration {
  0% {
    transform: translate(2px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(0px, 2px) rotate(-4deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(2px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(2deg);
  }
  90% {
    transform: translate(2px, 2px) rotate(-3deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(1deg);
  }
}

@keyframes charMove1 {
  0% {
    transform: translate(550px, -200px) scale(0.5);
  }
  30% {
    transform: translate(750px, 200px) scale(1.2);
  }
  40% {
    transform: translate(750px, 200px) scale(1.2);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes charMove2 {
  0% {
    transform: translate(-600px, -400px) scale(0.5);
  }
  30% {
    transform: translate(-800px, -200px) scale(1.1);
  }
  40% {
    transform: translate(-800px, -200px) scale(1.1);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}