@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;
}
#wrap { 
    position: relative;
    overflow: hidden;
    max-width: 2560px;
    min-width: 1280px;
    margin: 0 auto; 

    background:url('https://lwi.nexon.com/tales/2021/1021_B924CAB0E23910BA/bg.jpg') 50% 0 no-repeat;
}
/* common */
.event1 h2,
.event1 h3,
.event1 p,
.contents h3 > span,
.skill > span,
.intro .title > *,
#header .logo, #header .util li a, #header .util button, .quick a, .top_btn a { 
  display: block; 
  overflow: hidden; 

  font-size:0;
  text-indent: -999999999px;
  white-space: nowrap;
}
.top_btn a,
.shortcut a,
.shortcut,
#wrap > #header .logo,
#lnb .logo,
#lnb button.btn_toggle,
#header .util li a, 
#header .util button,
#lnb ul li a {
    background:url("https://lwi.nexon.com/tales/2021/1021_B924CAB0E23910BA/button_BC370DC0117FE878.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: 20px; height:75px; right: 20px; z-index: 1; padding:0 0 0 145px;  }
#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: 14px; 
    left: 0; 
    width: 124px; 
    height: 21px;

    background-position: -103px -14px; 
}
#header .util li .btn_home { 
    background-position: -248px 0; 
}
#header .util li .btn_fb { 
    background-position: -293px 0; 
}
#header .util li .btn_tw { 
    background-position: -338px 0; 
}
#header .util .btn_game:hover { 
    background-position: -103px -93px 
}
#header .util li .btn_home:hover { 
    background-position: -248px -79px; 
}
#header .util li .btn_fb:hover { 
    background-position: -293px -79px; 
}
#header .util li .btn_tw:hover { 
    background-position: -338px -79px; 
}
#header .util .btn_today { 
    width: 131px; 
    height: 17px; 
    margin: 7px 0 0 0;

    background-position: -248px -52px;  
}
#header .util .btn_today:hover {
    background-position: -248px -131px;  
}

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

[data-ready] {
    opacity:0;
}
@keyframes slideUp {
    0% {
        opacity:0;
        transform:translateY(10%);
        -webkit-transform:translateY(10%);
        -moz-transform:translateY(10%);
        -ms-transform:translateY(10%);
        -o-transform:translateY(10%);
    }
}
[data-scrollTarget]:not([data-ready]) > *:not(.skill),
[data-scrollTarget]:not(.event1):not([data-ready]) > h3:before,
[data-scrollTarget]:not(.event1):not([data-ready]) > h3:after {
    animation:slideUp .5s ease-in-out .2s backwards;
    -webkit-animation:slideUp .5s ease-in-out .2s backwards;
}
[data-scrollTarget]:not(.event1):not([data-ready]) > h3:before,
.event1[data-scrollTarget]:not([data-ready]) > h2 {
    animation-delay:.3s;
}
[data-scrollTarget]:not(.event1):not([data-ready]) > h3:after,
.event1[data-scrollTarget]:not([data-ready]) > h3 {
    animation-delay:.6s;
}
.event1[data-scrollTarget]:not([data-ready]) > p {
    animation-delay:.9s;
}

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

#wrap > #header .logo,
#lnb a {
    display: block;
    text-indent: -99999px;
    overflow: hidden;
}

.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:119px;

    vertical-align:top;
}

#lnb .nav3,
#lnb .nav2 {
    height:103px;
}
#lnb .nav1 {
    background-position:0 -147px;
}
#lnb .nav2 {
    background-position: 0 -285px;
}

#lnb .nav3 {
    background-position: 0 -407px;
}

#lnb .nav4 {
    background-position: -189px -392px;
}

#lnb .on .nav1,
#lnb .nav1:hover {
    background-position:-94px -147px;
}

#lnb .on .nav2,
#lnb .nav2:hover {
    background-position: -94px -285px;
}

#lnb .on .nav3,
#lnb .nav3:hover {
    background-position: -94px -407px;
}

#lnb .on .nav4,
#lnb .nav4:hover {
    background-position: 0 -147px;
}

#lnb button.btn_toggle {
    position: absolute;
    top: -16px;
    left:100%;
    width: 35px;
    height: 65px;

    background-position:-387px 15px;
}
#lnb button.btn_toggle:hover {
    background-position-x:-430px;
}

#lnb button.btn_toggle span {
    position: absolute;
    top: calc(50% - 1.5px);
    left: calc(50% - 9.5px);
    width: 19px;
    height: 3px;

    background-color: #fff;
    transition: all 200ms ease;
    opacity:.7;
    transition:opacity .2s;
    -webkit-transition:opacity .2s;
    -moz-transition:opacity .2s;
    -ms-transition:opacity .2s;
    -o-transition:opacity .2s;
}
#lnb button.btn_toggle:hover span {
    opacity:1;
}

#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 {
    margin-left: -1px;

    transform: rotate(0);
}

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

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

    background:rgba(37,16,63,.6) url(https://lwi.nexon.com/tales/2021/1021_B924CAB0E23910BA/copyright.png) 50% 50% no-repeat;
}

.shortcut {
    position:fixed;
    top:442px;
    right:0;
    z-index:3;
    width:93px;
    height:260px;

    background-position:-379px -146px;
}
.shortcut a {
    position:absolute;
    left:calc(50% - 35px);
    width:70px;
    height:51px;
}
.shortcut a.menu1 {
    top:44px;

    background-position:-207px -197px;
}
.shortcut a.menu2 {
    top:124px;

    background-position:-207px -277px;
}
.shortcut > a:hover {
    background-position-x:-305px;
}

.top_btn a {
    top:200px;
    left:calc(50% - 33px/2);
    width: 33px;
    height: 17px;

    background-position:-226px -351px;
    transition:opacity .3s;
    -webkit-transition:opacity .3s;
    -moz-transition:opacity .3s;
    -ms-transition:opacity .3s;
    -o-transition:opacity .3s;
}
.top_btn a:hover {
    background-position:-324px -351px;
}
#wrap:not(.fixed) .top_btn a {
    opacity:0;
}

@keyframes fadeIn {
    0% {
        opacity:0;
    }
}
.intro {
    position:relative;
    overflow:hidden;
    height:1237px;
}
.intro .title,
.intro .title h1,
.intro .title p:last-child,
.intro .obj5 [class^="particle"],
.intro [class^="obj"] {
    position:absolute;
    z-index:2;

    background:url(https://lwi.nexon.com/tales/2021/1021_B924CAB0E23910BA/intro.png) 50% 0 no-repeat;
}
.intro .obj1,
.intro .obj3 {
    background:url(https://lwi.nexon.com/tales/2021/1021_B924CAB0E23910BA/character02.png) 0 0 no-repeat;
}
.intro .obj2 {
    background:url(https://lwi.nexon.com/tales/2021/1021_B924CAB0E23910BA/character.png) 0 0 no-repeat;
}
.intro:before {
    position:absolute;
    top:1133px;
    left:0;
    width:100vw;
    height:104px;
    z-index:1;

    background-color:#fff;
    content:'';
}
.intro:after {
    position:absolute;
    top:calc(1133px - 68px);
    left:calc(50% - 1px);
    width:2px;
    height:128px;
    z-index:1;

    background-color:#c43a55;
    content:'';
}
.intro .obj1,
.intro .obj2 {
    top:0;
    z-index:0;
    height:1133px;

    animation:slideUp .3s ease-in-out .1s backwards;
    -webkit-animation:slideUp .3s ease-in-out .1s backwards;
}
.intro .obj1 {
    left:calc(50% - 243px);
    width:1523px;

    background-position:-1038px 0;
}
.intro .obj2 {
    left:calc(50% - 1280px);
    width:1627px;

    animation-delay:.2s;
}
.intro .title,
.intro .title h1,
.intro .title p:last-child,
.intro .obj3,
.intro .obj4,
.intro .obj5 {
    animation:fadeIn .5s ease-in-out backwards;
    -webkit-animation:fadeIn .5s ease-in-out backwards;
}
.intro .obj3 {
    top:220px;
    left:calc(50% - 494px);
    width:999px;
    height:1028px;

    animation-delay:.4s;
}
.intro .obj4 {
    top:500px;
    left:calc(50% - 1826px/2);
    width:1826px;
    height:800px;

    animation-duration: 2s;
    animation-delay:.8s;
    background-position:0 -987px;
}
.intro .obj5 {
    top:250px;
    left:calc(50% - 2560px/2);
    width:2560px;
    height:969px;

    animation-delay:.6s;
    background-position:0 0;
}
@keyframes float {
    0% {
        transform:translateY(.3%);
        -webkit-transform:translateY(.3%);
        -moz-transform:translateY(.3%);
        -ms-transform:translateY(.3%);
        -o-transform:translateY(.3%);
    }
}
.intro .obj5[data-animation="done"] {
    animation:float 1s ease-in-out .5s infinite alternate-reverse;
    -webkit-animation:float 1s ease-in-out .5s infinite alternate-reverse;
}
@keyframes twinkle {
    0% {
        opacity:.2;
    }
}
.intro .obj5 [class^="particle"] {
    width:70px;
    height:80px;

    animation:twinkle .5s ease-in-out infinite alternate-reverse backwards;
    -webkit-animation:twinkle .5s ease-in-out infinite alternate-reverse backwards;
    background-position:-1830px -987px;
}
.intro .obj5 .particle1 {
    top:769px;
    left:calc(50% + 575px);
}
.intro .obj5 .particle2 {
    top:808px;
    left:calc(50% + 249px);

    animation-delay:.2s;
}
.intro .obj5 .particle3 {
    top:774px;
    left:calc(50% + 128px);
}
.intro .obj5 .particle4 {
    top:816px;
    left:calc(50% - 812px);

    transform:scale(.7);
    -webkit-transform:scale(.7);
    -moz-transform:scale(.7);
    -ms-transform:scale(.7);
    -o-transform:scale(.7);
}

.intro .title {
    position:absolute;
    top:96px;
    left:calc(50% - 912px/2);
    width:912px;
    height:460px;

    animation-delay:.8s;
    background-position:0 -1793px;
}
.intro .title h1 {
    position:absolute;
    top:120px;
    left:calc(50% - 781px/2);
    width:781px;
    height:162px;

    animation-delay:1.2s;
    background-position:-940px -1793px;
}
.intro .title p:last-child {
    position:absolute;
    top:266px;
    left:calc(50% - 314px/2);
    width:314px;
    height:141px;

    animation-delay:1.5s;
    background-position:-1174px -1960px;
}

.contents .container {
    box-sizing:border-box;
}
.event1 h2,
.event1 h3,
.contents h3:before,
.contents h3:after,
.event1 p {
    width:930px;
    margin:0 auto;

    background:url(https://lwi.nexon.com/tales/2021/1021_B924CAB0E23910BA/contents.png) 50% 0 no-repeat;
}
.contents h3:before,
.contents h3:after {
    display:block;

    content:'';
}
.event1 h3,
.contents h3:before {
    height:68px;
}
.event1 p,
.contents h3:after {
    height:28px;
    margin-top:33px;
}
.skill {
    text-align:center;
}
.container:not([data-ready]) .skill {
    animation:fadeIn .7s ease-in-out 1.1s backwards;
    -webkit-animation:fadeIn .7s ease-in-out 1.1s backwards;
}
.skill > span {
    display:inline-block;
    width:572px;
    margin:7px 4px;

    background:50% 50% no-repeat;
    vertical-align:top;
}
.event1 {
    height:742px;
    margin-top:-104px;
    padding-top:220px;
}
.event1 h2 {
    height:94px;
    margin-bottom:183px;

    background-position:50% -1px;
}
.event1 h3 {
    background-position:50% -166px;

}
.event1 h3:before,
.event1 h3:after {
    display:none;
}
.event1 p {
    background-position:50% -271px;
}

.event2 {
    height:1836px;
    padding-top:106px;
}
.event2 h3:before {
    background-position:50% -356px;
}
.event2 h3:after {
    height:80px;

    background-position:50% -467px;
}
.event2 .skill {
    margin-top:46px;
}
.event2 .skill > span {
    height:447px;

    background-color:#000;
}
.event2 .skill > span:nth-child(5),
.event2 .skill > span:nth-child(6),
.event2 .skill > span:nth-child(7) {
    width:377px;
    height:441px;
}
.event2 .skill > span:nth-child(1) {
    background-image:url(https://lwi.nexon.com/tales/2021/1021_B924CAB0E23910BA/gif/01_01.gif);
}
.event2 .skill > span:nth-child(2) {
    background-image:url(https://lwi.nexon.com/tales/2021/1021_B924CAB0E23910BA/gif/01_02.gif);
}
.event2 .skill > span:nth-child(3) {
    background-image:url(https://lwi.nexon.com/tales/2021/1021_B924CAB0E23910BA/gif/01_03.gif);
}
.event2 .skill > span:nth-child(4) {
    background-image:url(https://lwi.nexon.com/tales/2021/1021_B924CAB0E23910BA/gif/01_04.gif);
}
.event2 .skill > span:nth-child(5) {
    background-image:url(https://lwi.nexon.com/tales/2021/1021_B924CAB0E23910BA/gif/01_05.gif);
}
.event2 .skill > span:nth-child(6) {
    background-image:url(https://lwi.nexon.com/tales/2021/1021_B924CAB0E23910BA/gif/01_06.gif);
}
.event2 .skill > span:nth-child(7) {
    background-image:url(https://lwi.nexon.com/tales/2021/1021_B924CAB0E23910BA/gif/01_07.gif);
}

.event3 {
    height:1214px;
    padding-top:113px;
}
.event3 h3:before {
    background-position:50% -620px;
}
.event3 h3:after {
    background-position:50% -725px;
}
.event3 .skill {
    margin-top:35px;
}
.event3 .skill > span {
    height:392px;
}
.event3 .skill > span:nth-child(1) {
    background-image:url(https://lwi.nexon.com/tales/2021/1021_B924CAB0E23910BA/gif/02_01.gif);
}
.event3 .skill > span:nth-child(2) {
    background-image:url(https://lwi.nexon.com/tales/2021/1021_B924CAB0E23910BA/gif/02_02.gif);
}
.event3 .skill > span:nth-child(3) {
    background-image:url(https://lwi.nexon.com/tales/2021/1021_B924CAB0E23910BA/gif/02_03.gif);
}