@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; }
html { overflow-y: scroll; }
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 */
body{ 
    min-width: 1280px;

    background-image:linear-gradient(#0c0906, #251c15);
}
#wrap { 
    position: relative;
    overflow: hidden;
    max-width: 2560px;
    min-width: 1280px;
    margin: 0 auto; 
    background:url('https://lwi.nexon.com/tales/2021/0812_6B347891202261E9/bg.jpg') 50% 0 no-repeat;
}
/* common */
#header .logo, #header .util li a, #header .util button, .quick a, .top_btn a { 
  display: block; 
  text-indent: 200%;
  white-space: nowrap;
  overflow: hidden; 
  background:0 0 no-repeat; 
}
.event1 .button,
.top_btn a,
.shortcut .menu1 a[href]:after,
.shortcut .menu1,
#wrap > #header .logo,
#lnb .logo,
#header .util li a, 
#header .util button,
#lnb ul li a {
    background:url("https://lwi.nexon.com/tales/2021/0812_6B347891202261E9/button_93B630FF83A14FFB.png") 0 0 no-repeat;
}
/* header */
#header { position: absolute; top: 0; right: 0; left: 0; z-index: 100; min-width: 1279px; }
#header .logo { position: absolute; display: block; top: 18px; left: 48px; z-index: 1;}
#header .logo.hide {display: none;}
#header .util { position: absolute; top: 14px; height:75px; right: 10px; z-index: 1; padding:0 0 0 130px;  }
#header .util ul { *zoom: 1; }
#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 .btn_game {
    position: absolute; 
    top: 1px; 
    left: 0; 
    width: 121px; 
    height: 74px;

    background-position: -219px 0px;
}
#header .util li .btn_home { 
    background-position: -352px -3px; 
}
#header .util li .btn_fb { 
    background-position: -397px -3px; 
}
#header .util li .btn_tw { 
    background-position: -442px -3px; 
}
#header .util .btn_game:hover { 
    background-position: -219px -94px 
}
#header .util li .btn_home:hover { 
    background-position: -352px -97px; 
}
#header .util li .btn_fb:hover { 
    background-position: -397px -97px; 
}
#header .util li .btn_tw:hover { 
    background-position: -442px -97px; 
}
#header .util .btn_today { 
    width: 135px; 
    height: 20px; 
    margin: 4px 0 0 -2px;

    background-position: -350px -54px;  
}

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

[data-ready] {
    opacity:0;
}

/* lnb */
#lnb {
    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    height: 100%;
    background: #005ddb;
    z-index:999;
    transition: 0.3s ease;
}

.event1 .button,
.event1 h2,
.event1 p,
.intro h1 + p,
.shortcut .menu1 a,
#wrap > #header .logo,
#lnb a {
    overflow: hidden;

    font-size:0;
    text-indent: -99999px;
}

#wrap > #header .logo,
#lnb a {
    display: block;
}

.fixed #lnb {
    position: fixed;
    top: 0;
}

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

#wrap > #header .logo,
#lnb .logo {
    width:96px;
    height:42px;
}
#lnb a.logo {
    position: absolute;
    top: 9px;
    left: 9px;
}

#lnb ul {
    width:90px;
    margin:0 auto;
    padding-top:84px;
}
#lnb ul li:not(:first-child) {
    margin-top:32px;
}

#lnb ul li a {
    width:100%;
    height:102px;

    vertical-align:top;
}

#lnb .nav1 {
    background-position: 0 -62px;
}

#lnb .nav2 {
    background-position: 0 -184px;
}
#lnb .nav3,
#lnb .nav4 {
    height:118px;
}
#lnb .nav3 {
    
    background-position: 0 -300px;
}
#lnb .nav4 {
    background-position: 0 -438px;
}

#lnb .on .nav1,
#lnb .nav1:hover {
    background-position: -110px -62px;
}

#lnb .on .nav2,
#lnb .nav2:hover {
    background-position: -110px -184px;
}
#lnb .on .nav3,
#lnb .nav3:hover {
    background-position: -109px -300px;
}
#lnb .on .nav4,
#lnb .nav4:hover {
    background-position: -109px -438px;
}

#lnb button.btn_toggle {
    position: absolute;
    top: -1px;
    left:100%;
    width: 37px;
    height: 38px;
    background-color:#0069e0;
    border-radius:0 0 5px 0;
    -webkit-border-radius:0 0 5px 0;
    -moz-border-radius:0 0 5px 0;
    -ms-border-radius:0 0 5px 0;
    -o-border-radius:0 0 5px 0;
}

#lnb button.btn_toggle span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 19px;
    height: 3px;
    background-color: #00c6ff;
    margin: -1px 0 0 -10px;
    transition: all 200ms ease;
}
#lnb button.btn_toggle:hover span {
    background-color:#fff;
}

#lnb button.btn_toggle ._b1 {
    transform: rotate(-45deg);
}

#lnb button.btn_toggle ._b3 {
    transform: rotate(45deg);
}

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

.minimum #lnb button.btn_toggle span,
.toggle #lnb button.btn_toggle span {
    transform: rotate(0);
    margin-left: -11px;
}

.minimum #lnb button.btn_toggle ._b1,
.toggle #lnb button.btn_toggle ._b1 {
    margin-top: -8px;
}

.minimum #lnb button.btn_toggle ._b2,
.toggle #lnb button.btn_toggle ._b2 {
    visibility: visible;
    margin-top:-2px;
}

.minimum #lnb button.btn_toggle ._b3,
.toggle #lnb button.btn_toggle ._b3 {
    margin-top: 4px;
}

#wrap > #header .logo {
    opacity:0;
    pointer-events:none;
    transition:opacity .6s;
} 
#wrap.minimum > #header .logo,
#wrap.toggle  > #header .logo {
    opacity:1;
    pointer-events:all;
    transition-delay:.4s;
}

.shortcut {
    position:absolute;
    top:300px;
    right:0;
    z-index:2;
    width:280px;

    text-align:center;
}
.shortcut .menu1 {
    width:100%;
    padding:10px;

    background-position:-563px 0;
    box-sizing:border-box;
}
.shortcut .menu1 > li {
    width:100%;
    margin:1px auto;
}
.shortcut .menu1 a {
    display:block;
    position:relative;
    width:100%;
    height:55px;
    margin:0 auto;
}
.shortcut .menu1 > li:nth-child(5) a {
    height:54px;
}
.shortcut .menu1 a[href]:after {
    display:inline-block;
    position:absolute;
    right:0;
    bottom:0;
    width:24px;
    height:23px;

    background-position:-563px -365px;
    content:'';
}
.shortcut .menu1 a[href]:hover:after {
    background-position:-596px -365px;
}
.shortcut .menu1 .new a[href]:after {
    background-position:-563px -399px;
}
.shortcut .menu1 .new a[href]:hover:after {
    background-position:-596px -399px;
}

.intro .container,
.intro:after,
.intro .title,
.intro h1 > i,
.intro h1 > i:before,
.intro h1 > i:after,
.intro h1:before,
.intro h1:after,
.intro h1 + p,
.intro h1 + p:after {
    background:url(https://lwi.nexon.com/tales/2021/0812_6B347891202261E9/title.png) no-repeat;
}
.intro {
    position:relative;
    z-index:0;
    overflow:hidden;
    margin-bottom:-28px;
    padding-bottom:28px;

    box-sizing:border-box;
}
.intro:after {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:2;
    height:56px;

    background-position:50% -848px;
    content:'';
}
.intro .container {
    overflow:hidden;
    width:auto;
    height: 876px;

    background-position:50% 0;
}
@keyframes check {
    0% {
        opacity:0;
    }
}
.intro .title {
    position:absolute;
    top:110px;
    left:calc(50% - 165px);
    width:330px;
    height:590px;

    animation:.8s backwards ease-out check;
    -webkit-animation:.8s backwards ease-out check;
    animation-delay:.8s;
    background-position:-355px -927px;
}
.intro h1 {
    position:absolute;
    top:230px;
    left:calc(50% - 400px);
    width:800px;

    text-align:center;
}
.intro h1 > i,
.intro h1:before,
.intro h1:after {
    display:inline-block;
    height:207px;

    vertical-align:top;
}
.intro h1 > i {
    position:relative;
    width:135px;

    animation:.2s check;
    -webkit-animation:.2s check;
    animation-delay:1.8s;
    animation-fill-mode: backwards;
    background-position:-80px -908px;
}
.intro h1 > i:before,
.intro h1 > i:after {
    position:absolute;
    width:20px;

    content:'';
}
@keyframes check1 {
    0% {
        background-position-y:-992px;
        opacity:0;
    }
}
@keyframes check2 {
    0% {
        background-position-y:-842px;
    }
}
.intro h1 > i:before {
    top:77px;
    right:80px;
    height:64px;
    margin-bottom:1px;

    animation:.2s backwards check1;
    -webkit-animation:.2s backwards check1;
    animation-delay:2s;
    background-position:-242px -932px;
    transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
}
.intro h1 > i:after {
    bottom:65px;
    left:75px;
    height:87px;
    margin-bottom:-3px;

    animation:.2s backwards check2;
    -webkit-animation:.2s backwards check2;
    animation-delay:2.1s;
    background-position:-281px -932px;
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
}
@keyframes title {
    100% {
        transform:translateX(0);
        -webkit-transform:translateX(0);
        -moz-transform:translateX(0);
        -ms-transform:translateX(0);
        -o-transform:translateX(0);
    }
}
.intro h1:before,
.intro h1:after {
    width:275px;

    animation:.5s forwards ease-out title;
    -webkit-animation:.5s forwards ease-out title;
    animation-delay:1.2s;
    content:'';
}
.intro h1:before {
    background-position:-748px -927px;
    transform:translateX(62.5px);
    -webkit-transform:translateX(62.5px);
    -moz-transform:translateX(62.5px);
    -ms-transform:translateX(62.5px);
    -o-transform:translateX(62.5px);
}
.intro h1:after {
    background-position:-1149px -927px;
    transform:translateX(-62.5px);
    -webkit-transform:translateX(-62.5px);
    -moz-transform:translateX(-62.5px);
    -ms-transform:translateX(-62.5px);
    -o-transform:translateX(-62.5px);
}
@keyframes subtitle {
    0% {
        opacity:0;
        transform:translate(-50%, 50%) scale(.5);
        -webkit-transform:translate(-50%, 50%) scale(.5);
        -moz-transform:translate(-50%, 50%) scale(.5);
        -ms-transform:translate(-50%, 50%) scale(.5);
        -o-transform:translate(-50%, 50%) scale(.5);
    }
    50% {
        opacity:1;
        transform:translate(10%, -5%) scale(1.1);
        -webkit-transform:translate(10%, -5%) scale(1.1);
        -moz-transform:translate(10%, -5%) scale(1.1);
        -ms-transform:translate(10%, -5%) scale(1.1);
        -o-transform:translate(10%, -5%) scale(1.1);
    }
    60% {
        transform:scale(1);
        -webkit-transform:scale(1);
        -moz-transform:scale(1);
        -ms-transform:scale(1);
        -o-transform:scale(1);
    }
    70%, 90% {
        transform:rotate(-7deg);
        -webkit-transform:rotate(-7deg);
        -moz-transform:rotate(-7deg);
        -ms-transform:rotate(-7deg);
        -o-transform:rotate(-7deg);
    }
    80%, 100% {
        transform:rotate(7deg);
        -webkit-transform:rotate(7deg);
        -moz-transform:rotate(7deg);
        -ms-transform:rotate(7deg);
        -o-transform:rotate(7deg);
    }
}
.intro h1 + p {
    position:absolute;
    top:633px;
    left:calc(50% - 258px);
    overflow:visible;
    width:585px;
    height:42px;

    animation:.5s backwards ease-out check;
    -webkit-animation:.5s backwards ease-out check;
    animation-delay:2.2s;
    background-position:-1435px -926px;
}
.intro h1 + p:after {
    position:absolute;
    top:-51px;
    right:103px;
    width:59px;
    height:63px;

    animation:.5s backwards ease-out subtitle;
    -webkit-animation:.5s backwards ease-out subtitle;
    animation-delay:2.8s;
    background-position:-1px -927px;
    content:'';
}

.intro [class^=obj] {
    position:absolute;

    background:url(https://lwi.nexon.com/tales/2021/0812_6B347891202261E9/title.png);
}
.contents .obj9,
.contents .obj10,
.intro .obj1,
.intro .obj2,
.intro .obj3 {
    background:url(https://lwi.nexon.com/tales/2021/0812_6B347891202261E9/character.png);
}
@keyframes character {
    0% {
        opacity:0;
        transform:translateY(20%) scale(.9);
        -webkit-transform:translateY(20%) scale(.9);
        -moz-transform:translateY(20%) scale(.9);
        -ms-transform:translateY(20%) scale(.9);
        -o-transform:translateY(20%) scale(.9);
    }
    50% {
        transform:translateY(-5%) scale(1.02);
        -webkit-transform:translateY(-5%) scale(1.02);
        -moz-transform:translateY(-5%) scale(1.02);
        -ms-transform:translateY(-5%) scale(1.02);
        -o-transform:translateY(-5%) scale(1.02);
    }
}
.intro .obj1,
.intro .obj2,
.intro .obj3 {
    animation:.6s backwards ease-out character;
    -webkit-animation:.6s backwards ease-out character;
}
.intro .obj1 {
    top:-38px;
    left:calc(50% + 215px);
    width:548px;
    height:714px;

    animation-delay:.6s;
    background-position:0 0;
}
.intro .obj2 {
    top:21px;
    left:calc(50% - 754px);
    width:504px;
    height:528px;

    animation-delay:.8s;
    background-position:-567px 0;
}
.intro .obj3 {
    top:539px;
    left:calc(50% - 573px);
    z-index:1;
    width:418px;
    height:488px;

    animation-delay:1s;
    background-position:0 -734px;
}

@keyframes obj1 {
    0% {
        opacity:0;
        transform:translate(100%, -100%);
        -webkit-transform:translate(100%, -100%);
        -moz-transform:translate(100%, -100%);
        -ms-transform:translate(100%, -100%);
        -o-transform:translate(100%, -100%);
    }
}
@keyframes obj2 {
    0% {
        opacity:0;
        transform:translate(-100%, 100%);
        -webkit-transform:translate(-100%, 100%);
        -moz-transform:translate(-100%, 100%);
        -ms-transform:translate(-100%, 100%);
        -o-transform:translate(-100%, 100%);
    }
}
.intro .obj4,
.intro .obj5 {
    animation:.3s backwards ease-out obj1;
    -webkit-animation:.3s backwards ease-out obj1;
}
.intro .obj6,
.intro .obj7,
.intro .obj8 {
    animation:.3s backwards ease-out obj2;
    -webkit-animation:.3s backwards ease-out obj2;
}
.intro .obj4 {
    top:0;
    left:calc(50% + 20px);
    width:1221px;
    height:774px;

    background-position:0 -1558px;
}
.intro .obj5 {
    top:-179px;
    left:calc(50% - 960px);
    width:982px;
    height:774px;

    animation-delay:.2s;
    background-position:-1242px -1558px;
}
.intro .obj6 {
    bottom:0;
    left:calc(50% + 266px);
    width:528px;
    height:363px;

    animation-delay:.4s;
    background-position:-758px -1156px;
}
.intro .obj7 {
    top:277px;
    left:calc(50% - 1142px);
    width:412px;
    height:383px;

    animation-delay:.6s;
    background-position:-1306px -1155px;
}
.intro .obj8 {
    top:400px;
    left:calc(50% + 545px);
    width:408px;
    height:383px;

    animation-delay:.6s;
    background-position:-1731px -1154px;
}

.section.contents {
    overflow:hidden;
    padding:95px 0 77px;
}

.event1,
.event1 h2:after {
    background:url(https://lwi.nexon.com/tales/2021/0812_6B347891202261E9/contents_v2.png) no-repeat;
}
.event1 {
    position:relative;
    width:1040px;
    margin:0 auto;
    padding-top:1264px;

    background-position:50% -83px;
    text-align:center;
}
.event1 h2 {
    position:absolute;
    top:0;
    left:50%;
    overflow:visible;
}
.event1 h2:after {
    position:absolute;
    top:-18px;
    left:calc(50% + 382px);
    width:59px;
    height:63px;
    
    background-position:-843px 0;
    content:'';
}
.event1 h2:not([data-ready]):after {
    animation:.5s backwards ease-out subtitle;
    -webkit-animation:.5s backwards ease-out subtitle;
}

.event1 [class^="img0"] {
    position:absolute;
}
.event1 .img01 {
    top:193px;
    left:calc(50% - 386px);
}
.event1 .img02 {
    top:193px;
    left:calc(50% + 85px);
}
.event1 .img03,
.event1 .img04,
.event1 .img05 {
    top:530px;
}
.event1 .img06,
.event1 .img07,
.event1 .img08 {
    top:872px;
}
.event1 .img06,
.event1 .img03 {
    left:calc(50% - 450px);
}
.event1 .img07,
.event1 .img04 {
    left:calc(50% - 140px);
}
.event1 .img08,
.event1 .img05 {
    left:calc(50% + 170px);
}

.event1 .button {
    display:inline-block;
    width:324px;
    height:78px;

    background-position:-219px -184px;
    cursor:pointer;
    vertical-align:top;
}
.event1 .button:hover {
    background-position:-219px -274px;
}
.contents [class^="obj"] {
    position:absolute;
}
.contents .obj9 {
    top:244px;
    left:calc(50% - 874px);
    width:552px;
    height:504px;

    background-position:-567px -550px;
}
.contents .obj10 {
    top:746px;
    left:calc(50% + 360px);
    width:750px;
    height:942px;

    background-position:-1139px 0;
}
@keyframes character1 {
    0% {
        opacity:0;
        transform:translateX(-100px);
        -webkit-transform:translateX(-100px);
        -moz-transform:translateX(-100px);
        -ms-transform:translateX(-100px);
        -o-transform:translateX(-100px);
}
}
@keyframes character2 {
    0% {
        opacity:0;
        transform:translateX(100px);
        -webkit-transform:translateX(100px);
        -moz-transform:translateX(100px);
        -ms-transform:translateX(100px);
        -o-transform:translateX(100px);
}
}
.contents .obj9:not([data-ready]) {
    animation:.6s backwards ease-out character1;
    -webkit-animation:.6s backwards ease-out character1;
}
.contents .obj10:not([data-ready]) {
    animation:.6s backwards ease-out character2;
    -webkit-animation:.6s backwards ease-out character2;
}

.footer { 
    position: relative; 
    height: 60px; 

    background:#fff url(https://lwi.nexon.com/tales/2021/0812_6B347891202261E9/copyright.png) 50% 50% no-repeat;
}

.top_btn{
  display: none;
}
.top_btn a {
  display: block;
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 68px;
  height: 68px;
  z-index: 9999;
  
  background-position:-217px -366px;
}
.top_btn a:hover {
    background-position:-287px -366px;
}