@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;
}

html {
  overflow-y: scroll;
}

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

input, textarea, button, select {
  font-size: 15px;
  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;
}

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;
}

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

/* layout */
#wrap {
  position: relative;
  overflow: hidden;
  min-width: 1280px;
}

section {
  position: relative;
}

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

/* common */
header .logo, header .btn, .content .btn_reserve, .btn_top, .layerpop button, .yeon a, .yeon .char, .btn_top, .content1 .slider_wrap button {
  display: block;
  text-indent: -99999px;
  overflow: hidden;
  background: url("https://lwi.nexon.com/baram/2020/0702_event_477D164513C574B8/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;
}

.content .bg_cnt {
  position: absolute;
  left: 0;
  width: 100%;
}

.content .char {
  position: absolute;
  opacity: 0;
}

.content .char span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.content .char .glitch1 {
  animation: glitch1 1s infinite linear;
}

.content .char .glitch2 {
  animation: glitch2 1s infinite linear;
}

.content .char .glitch3 {
  animation: glitch3 1s infinite linear;
}

.content .char .glitch4 {
  animation: glitch4 1s infinite linear;
}

.content .char .glitch5 {
  animation: glitch5 1s infinite linear;
}

.content .char .glitch6 {
  animation: glitch6 1s infinite linear;
}

.content .char .glitch7 {
  animation: glitch7 1s infinite linear;
}

.content .char .glitch8 {
  animation: glitch8 1s infinite linear;
}

.content .char .glitch9 {
  animation: glitch9 1s infinite linear;
}

.content .char .glitch10 {
  animation: glitch10 1s infinite linear;
}

.content .title_wrap {
  height: 400px;
  transform: perspective(500px);
  -ms-perspective: 500px;
  transform-style: preserve-3d;
}

.content .title_wrap span {
  background: url("https://lwi.nexon.com/baram/2020/0702_event_477D164513C574B8/spr_title_content.png") 0 0 no-repeat;
  opacity: 0;
}

.content .title_wrap .h3 {
  height: 76px;
}

.content .title_wrap .h3 ._t1 {
  transform: translate3d(500px, -200px, 100px) scale(2);
}

.content .title_wrap .h3 ._t2 {
  transform: translate3d(-500px, -200px, 100px) scale(2);
}

.content .title_wrap .h3 span:not(.thunder) {
  top: 0;
  height: 100%;
}

.content .title_wrap .h3 .thunder {
  top: -13px;
  width: 57px;
  height: 102px;
  background-position: -764px 0;
  transform: translate3d(0, 0, 100px) scale(10);
}

.content .title_wrap .description {
  left: 255px;
  width: 770px;
  height: 28px;
  transform: scale(1.5) translateY(50px);
}

.content .content_wrap {
  height: 100%;
}

.content .content_wrap span {
  opacity: 0;
}

.content .content_wrap .caution {
  width: 0;
  left: 50%;
  height: 45px;
  background-position-x: 50%;
  transition: opacity 300ms ease, width 400ms ease, margin 400ms ease;
}

.content.active .content_wrap span {
  opacity: 1;
}

.content.active .title_wrap span {
  opacity: 1;
}

.content.active .title_wrap .h3 span {
  transform: translate3d(0, 0, 0) scale(1);
  transition: transform 400ms ease, opacity 300ms ease;
}

.content.active .title_wrap .h3 .thunder {
  animation: lightening 4s infinite linear;
  transition-delay: 200ms;
  animation-delay: 500ms;
}

.content.active .title_wrap .description {
  transform: scale(1) translateY(0);
  transition: all 300ms ease;
  transition-delay: 400ms;
}

.content .char.visible {
  transform: translateX(0);
  opacity: 1;
  transition: opacity 300ms ease, transform 1s cubic-bezier(0, 1, 0.1, 1);
}

/* lnb */
#lnb {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 100%;
  z-index: 100;
  background: #0d5bdd;
  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/0702_event_477D164513C574B8/spr_lnb.png") no-repeat;
}

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

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

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

#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: -150px;
}

#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: 122px;
  margin: 27px auto;
}

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

#lnb nav li:last-child {
  margin-bottom: 0;
}

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

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

#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: 27px;
  left: 32px;
  width: 84px;
  height: 99px;
}

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

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

header .util {
  position: absolute;
  top: 34px;
  right: 24px;
  width: 134px;
  height: 59px;
  background: url("https://lwi.nexon.com/baram/2020/0702_event_477D164513C574B8/spr_btn.png") -294px 0 no-repeat;
  padding-left: 171px;
}

header .util ul {
  width: 102px;
  display: flex;
  justify-content: center;
}

header .util ul li {
  position: relative;
}

header .util ul li:before {
  position: absolute;
  top: 50%;
  left: 0;
  content: "";
  width: 1px;
  height: 16px;
  background: #001F53;
  margin-top: -8px;
}

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

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

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

header .btn_start {
  position: absolute;
  top: 0;
  left: 52px;
  width: 103px;
  background-position-x: -346px;
}

.intro {
  height: 1350px;
}

.intro .title_wrap span, .intro > .bg .coord, .intro .light, .intro .thunder, .intro canvas, .intro .char_wrap .char {
  opacity: 0;
}

.intro canvas {
  position: absolute;
  top: 0;
  left: 0;
}

.intro > .bg {
  height: 50%;
}

.intro > .bg, .intro > .bg span {
  position: absolute;
  left: 0;
  width: 100%;
}

.intro > .bg .coord {
  height: 0;
}

.intro > .bg .line {
  height: 100%;
  background: url("https://lwi.nexon.com/baram/2020/0702_event_477D164513C574B8/bg_line.png") 0 0 no-repeat;
  background-repeat: repeat-y;
}

.intro > .bg.bg_top, .intro > .bg.bg_top span {
  top: 0;
}

.intro > .bg.bg_top .coord:before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  content: "";
  width: 99.99%;
  background: url("https://lwi.nexon.com/baram/2020/0702_event_477D164513C574B8/bg_top_intro.jpg") center top no-repeat;
  padding-left: 0.01%;
}

.intro > .bg.bg_top .line {
  animation: topLine 5s linear infinite;
  opacity: 0.5;
}

.intro > .bg.bg_bottom, .intro > .bg.bg_bottom span {
  bottom: 0;
}

.intro > .bg.bg_bottom .coord:before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  content: "";
  width: 99.99%;
  background: url("https://lwi.nexon.com/baram/2020/0702_event_477D164513C574B8/bg_bottom_intro.jpg") center top no-repeat;
  padding-left: 0.01%;
}

.intro > .bg.bg_bottom .coord:before {
  top: auto;
  height: 100%;
  background-position: center bottom;
}

.intro > .bg.bg_bottom .line {
  animation: bottomLine 5s linear infinite;
  opacity: 0.2;
}

.intro .light {
  position: absolute;
  top: 67px;
  left: 50%;
  width: 1867px;
  height: 1124px;
  background: url("https://lwi.nexon.com/baram/2020/0702_event_477D164513C574B8/bg_light_intro.png") 0 0 no-repeat;
  margin-left: -977px;
}

.intro .title_wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.intro .title_wrap .txt, .intro .title_wrap .h2:before {
  background: url("https://lwi.nexon.com/baram/2020/0702_event_477D164513C574B8/spr_title_intro.png") 0 0 no-repeat;
}

.intro .title_wrap .effect {
  top: 0;
  left: -219px;
  width: 1601px;
  height: 969px;
  background: url("https://lwi.nexon.com/baram/2020/0702_event_477D164513C574B8/bg_effect_intro.png") 0 0 no-repeat;
  transform: scale(0);
}

.intro .title_wrap .h2 {
  top: 192px;
  left: 271px;
  width: 728px;
  height: 688px;
  transform: scale(10);
}

.intro .title_wrap .h2:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  opacity: 0.4;
}

.intro .title_wrap .date {
  top: 907px;
  left: 521px;
  width: 240px;
  height: 49px;
  z-index: 1;
  transform: perspective(500px);
  -ms-perspective: 500px;
  transform-style: preserve-3d;
  z-index: 2;
}

.intro .title_wrap .date .shape {
  top: -21px;
  left: 92px;
  width: 52px;
  height: 88px;
  background-position: -1091px 0;
  transform: translateZ(400px) scale(2);
}

.intro .title_wrap .date span:not(.shape) {
  top: 0;
  height: 100%;
}

.intro .title_wrap .date ._t1 {
  left: 0px;
  width: 98px;
  background-position: -796px -21px;
  transform: translate3d(150px, 100px, 300px);
}

.intro .title_wrap .date ._t2 {
  left: 137px;
  width: 103px;
  background-position: -933px -21px;
  transform: translate3d(-150px, 100px, 300px);
}

.intro .title_wrap .thunder {
  top: 0;
  left: 83px;
  width: 1046px;
  height: 1000px;
}

.intro .title_wrap .thunder span {
  background: url("https://lwi.nexon.com/baram/2020/0702_event_477D164513C574B8/bg_thunder_intro.png") 0 0 no-repeat;
  width: 50%;
  height: 50%;
}

.intro .title_wrap .thunder ._t1 {
  top: 0;
  left: 0;
  background-position: 0px 0px;
}

.intro .title_wrap .thunder ._t2 {
  top: 0;
  left: 50%;
  background-position: -523px 0px;
}

.intro .title_wrap .thunder ._t3 {
  top: 50%;
  left: 0;
  background-position: 0px -500px;
}

.intro .title_wrap .thunder ._t4 {
  top: 50%;
  left: 50%;
  background-position: -523px -500px;
}

.intro .title_wrap .description {
  top: 981px;
  left: 262px;
  width: 754px;
  height: 35px;
  background-position: -796px -118px;
  transform: perspective(300px) translate3d(0, 50px, 100px);
  z-index: 2;
}

.intro .char_wrap {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.intro .char_wrap span {
  width: 100%;
  height: 100%;
}

.intro .char_wrap ._c1 {
  top: 130px;
  left: 920px;
  width: 1000px;
  height: 1663px;
  transform: translate(500px, -500px);
}

.intro .char_wrap ._c1 span {
  background: url("https://lwi.nexon.com/baram/2020/0702_event_477D164513C574B8/bg_char1_intro.png") 0 0 no-repeat;
}

.intro .char_wrap ._c2 {
  top: 556px;
  left: -640px;
  width: 1486px;
  height: 1576px;
  transform: translate(-500px, 500px);
}

.intro .char_wrap ._c2 span {
  background: url("https://lwi.nexon.com/baram/2020/0702_event_477D164513C574B8/bg_char2_intro.png") 0 0 no-repeat;
}

.intro.load .title_wrap span, .intro.load > .bg .coord, .intro.load .light, .intro.load .thunder, .intro.load canvas, .intro.load .char_wrap .char {
  opacity: 1;
}

.intro.load > .bg .coord {
  height: 100%;
  transition: opacity 300ms ease, height 500ms ease;
}

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

.intro.load .light, .intro.load .effect {
  transition: all 300ms ease;
  transition-delay: 400ms;
}

.intro.load canvas, .intro.load .thunder {
  transition: opacity 300ms 800ms ease;
}

.intro.load .title_wrap .thunder span {
  animation: lightening 4s infinite linear;
}

.intro.load .title_wrap .thunder ._t1 {
  animation-delay: 850ms;
  animation-duration: 5s;
}

.intro.load .title_wrap .thunder ._t2 {
  animation-delay: 900ms;
  animation-duration: 4s;
}

.intro.load .title_wrap .thunder ._t3 {
  animation-delay: 950ms;
  animation-duration: 3s;
}

.intro.load .title_wrap .thunder ._t4 {
  animation-delay: 1000ms;
  animation-duration: 2s;
}

.intro.load .title_wrap .h2 {
  transform: scale(1);
  transition: transform 300ms cubic-bezier(0.9, 0.1, 1, 1.1), opacity 300ms ease;
  transition-delay: 700ms;
}

.intro.load .title_wrap .h2:before {
  width: 0;
  height: 0;
  opacity: 0;
  transform: scale(3);
  transition: opacity 500ms ease 1000ms, transform 700ms ease 1000ms, width 0ms 1800ms linear, height 0ms 1800ms linear;
}

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

.intro.load .title_wrap .date span:not(.shape) {
  transition-delay: 1300ms;
}

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

.intro.load .title_wrap .description {
  transform: perspective(300px) translate3d(0, 0, 0);
  transition: transform 250ms cubic-bezier(0, 1, 0.9, 1), opacity 300ms ease;
  transition-delay: 1600ms;
}

.intro.load .char_wrap .char {
  transform: translate(0, 0);
  transition: opacity 300ms ease, transform 1s cubic-bezier(0, 1, 0.1, 1);
  transition-delay: 200ms;
}

.content1 {
  height: 1375px;
}

.content1 .container {
  z-index: 1;
}

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

.content1 .title_wrap .h3 {
  top: 139px;
  left: 302px;
  width: 680px;
}

.content1 .title_wrap .h3 ._t1 {
  left: 0px;
  width: 322px;
  background-position: 0px 0;
}

.content1 .title_wrap .h3 ._t2 {
  left: 378px;
  width: 302px;
  background-position: -378px 0;
}

.content1 .title_wrap .h3 .thunder {
  left: 322px;
}

.content1 .title_wrap .description {
  top: 237px;
  background-position: 0 -400px;
}

.content1 .content_wrap {
  position: absolute;
  top: 314px;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  height: 0;
  overflow: hidden;
  background: url("https://lwi.nexon.com/baram/2020/0702_event_477D164513C574B8/bg_object_content1.jpg") 14px 14px no-repeat;
}

.content1 .content_wrap > span {
  position: absolute;
}

.content1 .content_wrap .bg {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 14px solid #016FFF;
}

.content1 .content_wrap .badge {
  top: 9px;
  left: 479px;
  width: 322px;
  height: 51px;
  background: url("https://lwi.nexon.com/baram/2020/0702_event_477D164513C574B8/bg_badge_content1.png") 0 0 no-repeat;
}

.content1 .slider_wrap {
  position: absolute;
  top: 161px;
  left: 225px;
  width: 826px;
  height: 523px;
  border: 2px solid #18ffed;
  z-index: 10;
}

.content1 .slider_wrap > button {
  position: absolute;
  top: 232px;
  width: 49px;
  height: 64px;
  background-position-y: -285px;
}

.content1 .slider_wrap > button:hover {
  background-position-y: -349px;
}

.content1 .slider_wrap > button.prev {
  background-position-x: -471px;
  left: -104px;
}

.content1 .slider_wrap > button.next {
  background-position-x: -551px;
  right: -104px;
}

.content1 .slider_wrap .slider_image li {
  width: 826px;
  height: 523px;
}

.content1 .slider_wrap .slider_nav {
  position: absolute;
  top: 553px;
  left: 50%;
  height: 15px;
  font-size: 0;
  margin-left: -49px;
}

.content1 .slider_wrap .slider_nav span {
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background: #7E8FB9;
  border-radius: 0;
  opacity: 1;
  margin: 0 9px;
}

.content1 .slider_wrap .slider_nav span.swiper-pagination-bullet-active {
  background-color: #18FFED;
}

.content1.active .content_wrap {
  height: 919px;
  transition: height 900ms ease;
  transition-delay: 600ms;
}

.content1.active .content_wrap .bg {
  border-width: 14px;
  transition: border 500ms ease;
}

.content2 {
  height: 1368px;
  z-index: 1;
}

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

.content2 .star_wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.content2 .star_wrap span, .content2 .star_wrap span:before, .content2 .star_wrap span:after {
  background: url("https://lwi.nexon.com/baram/2020/0702_event_477D164513C574B8/spr_star_content2.png") 0 0 no-repeat;
  background-position-x: 0;
}

.content2 .star_wrap span:before, .content2 .star_wrap span:after {
  content: "";
  position: absolute;
}

.content2 .star_wrap span:before {
  top: 684px;
}

.content2 .star_wrap span:after {
  top: -684px;
}

.content2 .star_wrap ._s1 {
  top: 171px;
  left: 30px;
  animation: moveStar2 50s infinite linear;
}

.content2 .star_wrap ._s2 {
  top: 116px;
  left: 973px;
  animation: moveStar1 30s infinite linear;
}

.content2 .star_wrap ._s3 {
  top: 163px;
  left: 1137px;
  animation: moveStar2 40s infinite linear;
}

.content2 .star_wrap ._s4 {
  top: 300px;
  left: 1070px;
  animation: moveStar1 25s infinite linear;
}

.content2 .star_wrap ._s5 {
  top: 295px;
  left: 152px;
  animation: moveStar2 60s infinite linear;
}

.content2 .star_wrap ._s6 {
  top: 370px;
  left: -56px;
  animation: moveStar1 80s infinite linear;
}

.content2 .star_wrap ._s7 {
  top: 927px;
  left: 1265px;
  animation: moveStar2 100s infinite linear;
}

.content2 .star_wrap ._s8 {
  top: 1015px;
  left: 1334px;
  animation: moveStar1 40s infinite linear;
}

.content2 .star_wrap .s21, .content2 .star_wrap .s21:before {
  width: 21px;
  height: 21px;
  background-position-y: 0px;
}

.content2 .star_wrap .s27, .content2 .star_wrap .s27:before {
  width: 27px;
  height: 27px;
  background-position-y: -128px;
}

.content2 .star_wrap .s29, .content2 .star_wrap .s29:before {
  width: 29px;
  height: 29px;
  background-position-y: -270px;
}

.content2 .star_wrap .s25, .content2 .star_wrap .s25:before {
  width: 25px;
  height: 25px;
  background-position-y: -414px;
}

.content2 .title_wrap .h3 {
  top: 146px;
  left: 418px;
  width: 448px;
}

.content2 .title_wrap .h3 ._t1 {
  left: 0px;
  width: 228px;
  background-position: 0px -130px;
}

.content2 .title_wrap .h3 ._t2 {
  left: 282px;
  width: 166px;
  background-position: -282px -130px;
}

.content2 .title_wrap .h3 .thunder {
  left: 223px;
}

.content2 .title_wrap .description {
  top: 244px;
  background-position: 0 -460px;
}

.content2 .content_wrap span {
  background: url("https://lwi.nexon.com/baram/2020/0702_event_477D164513C574B8/spr_object_content2.png") 0 0 no-repeat;
}

.content2 .content_wrap .caution {
  bottom: 140px;
  background-position-y: -1703px;
}

.content2 .content_wrap .circle {
  top: 388px;
  width: 506px;
  height: 506px;
}

.content2 .content_wrap .circle .bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border: 0 solid;
  box-sizing: border-box;
  transform: scale(0);
}

.content2 .content_wrap .circle .description {
  top: 576px;
  height: 161px;
}

.content2 .content_wrap .circle._c1 {
  left: 83px;
}

.content2 .content_wrap .circle._c1 .bg {
  background-position: -14px -738px;
  border-color: #18ffed;
}

.content2 .content_wrap .circle._c1 .dragon {
  top: -82px;
  left: -96px;
  width: 660px;
  height: 620px;
  background-position: 0px 0;
  transform: translateY(-50px);
}

.content2 .content_wrap .circle._c1 .description {
  left: 78px;
  width: 339px;
  background-position: 0px -1374px;
}

.content2 .content_wrap .circle._c2 {
  left: 682px;
}

.content2 .content_wrap .circle._c2 .bg {
  background-position: -622px -738px;
  border-color: #ff2a00;
}

.content2 .content_wrap .circle._c2 .dragon {
  top: -83px;
  left: -15px;
  width: 552px;
  height: 638px;
  background-position: -905px 0;
  transform: translateY(50px);
}

.content2 .content_wrap .circle._c2 .description {
  left: -8px;
  width: 523px;
  background-position: -513px -1374px;
}

.content2 .char {
  top: -644px;
  left: 828px;
  width: 1092px;
  height: 1774px;
  transform: translateX(500px);
}

.content2 .char span {
  background: url("https://lwi.nexon.com/baram/2020/0702_event_477D164513C574B8/bg_char_content2.png") 0 0 no-repeat;
}

.content2.active .content_wrap .circle span {
  transition: opacity 300ms ease, transform 700ms ease, border 700ms ease;
}

.content2.active .content_wrap .circle .bg {
  border-width: 14px;
  transform: scale(1);
  transition-delay: 600ms;
}

.content2.active .content_wrap .circle .dragon {
  transform: translateY(0);
  transition-delay: 800ms;
}

.content2.active .content_wrap .circle .description {
  transition-delay: 1000ms;
}

.content2.active .content_wrap .caution {
  width: 747px;
  margin-left: -373px;
  transition-delay: 1200ms;
}

.content3 {
  height: 867px;
  z-index: 1;
}

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

.content3 .char {
  position: absolute;
  top: -191px;
  left: -640px;
  left: -640px;
  width: 1439px;
  height: 1058px;
  transform: translateX(-500px);
}

.content3 .char span {
  background: url("https://lwi.nexon.com/baram/2020/0702_event_477D164513C574B8/bg_char_content3.png") 0 0 no-repeat;
}

.content3 .title_wrap .h3 {
  top: 143px;
  left: 418px;
  width: 448px;
}

.content3 .title_wrap .h3 ._t1 {
  left: 0px;
  width: 228px;
  background-position: 0px -260px;
}

.content3 .title_wrap .h3 ._t2 {
  left: 282px;
  width: 166px;
  background-position: -282px -260px;
}

.content3 .title_wrap .h3 .thunder {
  left: 223px;
}

.content3 .title_wrap .description {
  top: 238px;
  background-position: 0 -520px;
}

.content3 .content_wrap span {
  background: url("https://lwi.nexon.com/baram/2020/0702_event_477D164513C574B8/spr_object_content3.png") 0 0 no-repeat;
}

.content3 .content_wrap .item {
  top: 327px;
  transform: scale(0);
  width: 318px;
  height: 318px;
}

.content3 .content_wrap .item._i1 {
  left: 22px;
  background-position: 0px 0;
}

.content3 .content_wrap .item._i2 {
  left: 340px;
  background-position: -318px 0;
}

.content3 .content_wrap .item._i3 {
  left: 658px;
  background-position: -636px 0;
}

.content3 .content_wrap .item._i4 {
  left: 976px;
  background-position: -954px 0;
}

.content3 .content_wrap .caution {
  bottom: 115px;
  background-position-y: -382px;
}

.content3.active .content_wrap .item {
  transform: scale(1);
  transition: opacity 300ms ease, transform 500ms ease;
}

.content3.active .content_wrap .item._i1 {
  transition-delay: 600ms;
}

.content3.active .content_wrap .item._i2 {
  transition-delay: 680ms;
}

.content3.active .content_wrap .item._i3 {
  transition-delay: 760ms;
}

.content3.active .content_wrap .item._i4 {
  transition-delay: 840ms;
}

.content3.active .content_wrap .caution {
  width: 657px;
  margin-left: -328px;
  transition-delay: 1100ms;
}

.yeon {
  position: relative;
  height: 76px;
  z-index: 1;
  background: #92756a;
}

.yeon .container {
  padding: 10px 0 0 162px;
}

.yeon a {
  width: 536px;
  height: 56px;
  background-position: 0 -222px;
  background-color: #553d34;
}

.yeon .char {
  position: absolute;
  top: -78px;
  left: 740px;
  width: 378px;
  height: 144px;
  background-position: 0 -356px;
}

footer {
  height: 132px;
  background: #000;
}

footer p {
  color: #8c8c8d;
  font-size: 12px;
  text-align: center;
  line-height: 132px;
  font-family: '굴림', sans-serif;
}

.btn_top {
  position: fixed;
  bottom: 228px;
  right: 28px;
  width: 64px;
  height: 65px;
  background-position: -536px -435px;
  z-index: 100;
  transform: scale(0);
  opacity: 0;
  transition: all 300ms ease;
}

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

@keyframes lightening {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 0.2;
  }
  20% {
    opacity: 0.8;
  }
  30% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  62% {
    opacity: 0.2;
  }
  70% {
    opacity: 1;
  }
  80% {
    opacity: 0.1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes topLine {
  from {
    background-position: 50% 0;
  }
  to {
    background-position: 50% -100%;
  }
}

@keyframes bottomLine {
  from {
    background-position: 50% 0;
  }
  to {
    background-position: 50% 100%;
  }
}

@keyframes moveStar1 {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(-100px, -1386px);
  }
}

@keyframes moveStar2 {
  from {
    transform: translate(0px);
  }
  to {
    transform: translate(100px, -1386px);
  }
}