@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: 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: 2560px;
  min-width: 1280px;
  margin: 0 auto;
}

/* lnb */
#lnb {
  position: absolute;
  top: 0;
  left: -130px;
  width: 130px;
  height: 100%;
  z-index: 100;
  transition: left 400ms ease;
}

.fixed #lnb {
  position: fixed;
}

#lnb, #lnb .btn_toggle {
  background: rgba(0, 0, 0, 0.65);
}

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

#lnb .lnb_wrap h1 {
  height: 98px;
  background: #050507;
}

#lnb .lnb_wrap a {
  display: block;
  width: 100%;
  height: 100%;
  display: block;
  text-indent: -99999px;
  overflow: hidden;
  background: url("https://ssl.nexon.com/s2/game/tales/event/2020/0518_event_44DC26849FA5C40F/spr_lnb.png") no-repeat;
}

#lnb .lnb_wrap li {
  height: 140px;
}

#lnb .lnb_wrap .lnb1 a {
  background-position: 0 -98px;
}

#lnb .lnb_wrap .lnb1.on a, #lnb .lnb_wrap .lnb1 a:hover {
  background-position: -130px -98px;
}

#lnb .lnb_wrap .lnb2 a {
  background-position: 0 -238px;
}

#lnb .lnb_wrap .lnb2.on a, #lnb .lnb_wrap .lnb2 a:hover {
  background-position: -130px -238px;
}

#lnb .btn_toggle {
  position: absolute;
  top: 0;
  right: -60px;
  display: block;
  text-indent: -99999px;
  overflow: hidden;
  width: 60px;
  height: 60px;
}

#lnb .btn_toggle span {
  position: absolute;
  left: 50%;
  width: 25px;
  height: 3px;
  background: #616C81;
  margin-left: -12px;
  transition: 300ms ease;
}

#lnb .btn_toggle:hover span {
  background: #fff;
}

#lnb .btn_toggle ._b1 {
  top: 20px;
}

#lnb .btn_toggle ._b2 {
  top: 28px;
}

#lnb .btn_toggle ._b3 {
  top: 36px;
}

#lnb.show {
  left: 0;
}

#lnb.show .btn_toggle ._b1, #lnb.show .btn_toggle ._b3 {
  width: 32px;
  margin-left: -16px;
}

#lnb.show .btn_toggle ._b1 {
  transform: rotate(45deg) skew(-45deg);
  margin-top: 8px;
}

#lnb.show .btn_toggle ._b2 {
  visibility: hidden;
}

#lnb.show .btn_toggle ._b3 {
  transform: rotate(-45deg) skew(45deg);
  margin-top: -8px;
}
/* //lnb */


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

/* header */
#header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10;
}

#header .logo a{
  position: absolute;
  top: 12px;
  left: 69px;
  width: 203px;
  height: 86px;
  background: url("https://ssl.nexon.com/s2/game/tales/event/2020/0518_event_44DC26849FA5C40F/spr_btn.png") no-repeat;
  background-position: 0 -608px;
  z-index: 1;
  text-indent: -9999px;
  cursor: pointer;
}

#header .logo.hide {
  display: none;
}

#header .util {
  position: absolute;
  top: 0;
  right: 0;
  width: 949px;
  height:180px;
  background: url("https://ssl.nexon.com/s2/game/tales/event/2020/0518_event_44DC26849FA5C40F/spr_btn.png") no-repeat;
  background-position: 0 0;
}

#header .util .btn{
  background: url("https://ssl.nexon.com/s2/game/tales/event/2020/0518_event_44DC26849FA5C40F/spr_btn.png") no-repeat;
  text-indent: -9999px;
  display: block;
}

#header .util .game_start {
  background: none;
}

#header .util .game_start span {
  position: absolute;
  top: 33px;
  right: 160px;
  width: 189px;
  height: 40px;
  background-position: 0 -220px;

}

#header .util .game_start:hover span {
  background-position: 0 -296px;
}

#header .util ul {
  *zoom: 1;
  position: absolute;
  width:132px;
  height:47px;
  right:20px;
  top:25px;
}

#header .util ul:after {
  content: "";
  display: block;
  clear: both;
}

#header .util li {
  float: left;
  margin-left: 3px;

}

#header .util li a {
  width: 41px;
  height: 47px;
}

#header .util li .btn_home {
  background-position: -189px -212px;
}

#header .util li .btn_home:hover {
  background-position: -189px -288px;
}

#header .util li .btn_fb {
  background-position: -233px -212px;
}

#header .util li .btn_fb:hover {
  background-position: -233px -288px;
}

#header .util li .btn_tw {
  background-position: -277px -212px;
}

#header .util li .btn_tw:hover {
  background-position: -277px -288px;
}

#header .util .btn_today {
  position: absolute;
  top:74px;
  right:20px;
  width: 141px;
  height: 22px;
  background-position: -177px -261px;
}


/* intro & content */
.section {
  position: relative;
}

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

.section .content{
  position: relative;
}

.content_obj{
  background: url("https://ssl.nexon.com/s2/game/tales/event/2020/0518_event_44DC26849FA5C40F/spr_content.png") no-repeat;
}

/* intro */
.intro{
  position: relative;
}

.intro_bg{
  height: 1170px;
  background: url("https://ssl.nexon.com/s2/game/tales/event/2020/0518_event_44DC26849FA5C40F/bg_1.jpg") center top no-repeat;
}

.intro .container{
  position: absolute;
  top:0;
  left:50%;
  width:1280px;
  margin-left:-640px;

}
.intro .container .update_date{
  position: absolute;
  top:102px;
  left:0;
  width:1050px;
  height:71px;
  background-position: 0 -11px;
}

.intro .container .update_title{
  position: absolute;
  top:150px;
  left:0;
  width:1050px;
  height:548px;
  background-position: 0 -83px;
}

.intro .container .update_text{
  position: absolute;
  top:778px;
  left:0;
  width:1050px;
  height:74px;
  background-position: 0 -711px;
}
/* //intro */

/* content1 */
.content1{
  z-index: 2;
  margin-top:-174px;
  height:2166px;
  background: url("https://ssl.nexon.com/s2/game/tales/event/2020/0518_event_44DC26849FA5C40F/bg_2.png") center top no-repeat;
}

.content1 .container .new_item{
  position: relative;
  height:1114px;
}

.new_item_title{
  position: absolute;
  top:128px;
  left:50%;
  width:1396px;
  height:192px;
  margin-left: -698px;
  background-position: 0 -789px;
}

.new_item_flag{
  position: absolute;
  top:239px;
  left:50%;
  width:994px;
  height:0;
  margin-left: -497px;
  background-position: 0 -981px;
}

.flag_item_l{
  position: absolute;
  top:27px;
  left:65PX;
  width:342px;
  height:576px;
  background-position: 0 -1809px;
}

.flag_item_r{
  position: absolute;
  top:27px;
  left:587px;
  width:342px;
  height:576px;
  background-position: -342px -1809px;
}

.private_buff{
  position: relative;
  margin:0 auto;
  width:1216px;
  height:400px;
  background-position: 0 -2386px;
}

.reward_item{
  position: relative;
  margin:0 auto;
  width:1216px;
  height:493px;
  background-position: 0 -2786px;
}

.dragon{
  position: absolute;
  top: 780px;
  right: -868px;
  width: 939px;
  height: 960px;
  background-position: 0 -3279px;
}
/* //content1 */

/* content2 */
.content2{
  margin-top:-33px;
  z-index: 1;
  height:421px;
  background: url("https://ssl.nexon.com/s2/game/tales/event/2020/0518_event_44DC26849FA5C40F/bg_3.jpg") center top no-repeat;
}

.more_button a{
  display: block;
  position: absolute;
  left: 50%;
  top:112px;
  width: 600px;
  height: 143px;
  margin-left:-300px;
  text-indent: -99999px;
  background: url("https://ssl.nexon.com/s2/game/tales/event/2020/0518_event_44DC26849FA5C40F/spr_btn.png") no-repeat;
  background-position: 0 -373px;
  cursor: pointer;
}

.more_button a:hover{
  background-position: -600px -373px;
}

.content2 .copyright {
  position: absolute;
  left: 50%;
  bottom: 40px;
  width: 316px;
  height: 15px;
  margin-left: -158px;
  text-indent: -99999px;
  overflow: hidden;
  background: url("https://ssl.nexon.com/s2/game/tales/event/2020/0518_event_44DC26849FA5C40F/copyright.png") no-repeat;
}
/* //content2 */

/* quick */
#quick {
  display: none;
  position: fixed;
  width:91px;
  height: 91px;
  bottom: 30px;
  right: 20px;
  z-index: 100;
  background: url("https://ssl.nexon.com/s2/game/tales/event/2020/0518_event_44DC26849FA5C40F/spr_btn.png") no-repeat;
  background-position: 0 -517px;
  text-indent: -9999px;
  cursor: pointer;
}

#quick:hover{
  background-position: -91px -517px;
}
/* //quick */