@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: #fff; line-height: 1; font-size: 16px; font-family: "Noto Sans KR", "맑은 고딕", "Malgun gothic", "돋움", "dotum", sans-serif; }
input, textarea, button, select { font-size: 16px; 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: #fff; 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: 1400px;
}
#wrap {
    position: relative;
    overflow: hidden;
    max-width: 2560px;
    min-width: 1400px;
    min-height:100vh;
    margin: 0 auto;
}
#wrap .dimmed {
    position:fixed;
    top:0;
    left:0;
    z-index:9999;
    width:100%;
    height:100%;

    background-color:#fff;
    opacity:.8;
}

/* common */
.intro > dl,
.intro > a,
.contents .button,
#header .logo, 
#header .util li a, 
#header .util button, 
.shortcut a {
  display: block; 
  text-indent: 200%;
  white-space: nowrap;
  overflow: hidden; 
  background:0 0 no-repeat; 
  font-size:0;
  line-height:0;
}

.intro > a,
.contents .button,
#header .logo,
#header .util li a, 
#header .util button,
.shortcut a {
    background:url(https://lwi.nexon.com/tales/2022/0317_95C7B838AEFAE87A/button.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: 10px; left: 20px; z-index: 1; width:152px; height:63px; background-position:0 0}
#header .logo.hide {display: none;}
#header .util { position: absolute; top: 20px; height:75px; right: 20px; z-index: 1; padding:0 0 0 133px;  }
#header .util ul { *zoom: 1;}
#header .util ul:after { content: ""; display:block; clear: both;height:0; }
#header .util li { float: left; margin-left: 4px; }
#header .util li:first-child {margin-left:0;}
#header .util li a { display:block;width: 41px; height: 47px; }
#header .util .btn_game {
    position: absolute; 
    top: 1px; 
    left: 0; 
    width: 121px; 
    height: 74px;

    background-position: -164px -1px; 
}
#header .util li .btn_home { 
    background-position: -297px 0;
}
#header .util li .btn_fb { 
    background-position: -342px 0; 
}
#header .util li .btn_tw { 
    background-position: -387px 0; 
}
#header .util .btn_game:hover { 
    background-position: -164px -86px 
}
#header .util li .btn_home:hover { 
    background-position: -297px -85px; 
}
#header .util li .btn_fb:hover { 
    background-position: -342px -85px; 
}
#header .util li .btn_tw:hover { 
    background-position: -387px -85px; 
}
#header .util .btn_today { 
    width: 131px; 
    height: 23px; 
    margin: 4px 0 0 0;

    background-position: -297px -49px;  
}
/* #header .util .btn_today:hover {
    background-position: -359px -134px;  
} */

#wrap {
    overflow:hidden;

    background:#eff6ef url(https://lwi.nexon.com/tales/2022/0317_95C7B838AEFAE87A/bg.jpg) 50% 0 no-repeat;
}

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

.footer,
#wrap .contents {
    background:url(https://lwi.nexon.com/tales/2022/0317_95C7B838AEFAE87A/bg2.jpg) 50% 0 no-repeat;
}

.footer {
    height:70px;
    margin-top:0;
    
    background-position:50% 100%;
}

.shortcut {
    display:none;
    position:fixed;
    top:calc(50% - 446px/2);
    right:0;
    padding:5px 0 5px 5px;

    background-color:#fff;
    border-radius:38px 0 0 38px;
    -webkit-border-radius:38px 0 0 38px;
    -moz-border-radius:38px 0 0 38px;
    -ms-border-radius:38px 0 0 38px;
    -o-border-radius:38px 0 0 38px;
    pointer-events:none;
}
#wrap.sticky .shortcut {
    pointer-events: all;
}
.shortcut a {
    display:block;
    width:108px;
    height:94px;

    transition:background-color .2s;
    -webkit-transition:background-color .2s;
    -moz-transition:background-color .2s;
    -ms-transition:background-color .2s;
    -o-transition:background-color .2s;
}
.shortcut > a {
    margin-bottom:2px;

    background-color:#4badff;
}
.shortcut > a.active,
.shortcut > a:hover {
    background-color:#876af8;
}
.shortcut a.menu1 {
    background-position:-5px -175px;
    border-radius:34px 0 0 0;
    -webkit-border-radius:34px 0 0 0;
    -moz-border-radius:34px 0 0 0;
    -ms-border-radius:34px 0 0 0;
    -o-border-radius:34px 0 0 0;
}
.shortcut a.menu2 {
    background-position:-5px -271px;
}
.shortcut a.menu3 {
    background-position:-5px -367px;
}
.shortcut a.menu4 {
    background-position:-5px -463px;
}
.top_btn > a {
    height:52px;

    background-color:#63d8a5;
    background-position:-5px -559px;
    border-radius:0 0 0 34px;
    -webkit-border-radius:0 0 0 34px;
    -moz-border-radius:0 0 0 34px;
    -ms-border-radius:0 0 0 34px;
    -o-border-radius:0 0 0 34px;
}
.top_btn > a:hover {
    background-color:#3bc190;
}

.intro {
    height:1489px;
}
.obj2:before,
.obj2:after,
[class^="obj"],
.intro > dl,
.intro .title:before,
.intro .title:after {
    display:block;
    position:absolute;

    background:url(https://lwi.nexon.com/tales/2022/0317_95C7B838AEFAE87A/object.png) no-repeat;
}
@keyframes slideDown {
    0% {
        opacity:0;
        transform:translateY(-25%);
        -webkit-transform:translateY(-25%);
        -moz-transform:translateY(-25%);
        -ms-transform:translateY(-25%);
        -o-transform:translateY(-25%);
    }
    38% {
        opacity:1;
        transform:translateY(10%) scale(108%, 80%);
        -webkit-transform:translateY(10%) scale(108%, 80%);
        -moz-transform:translateY(10%) scale(108%, 80%);
        -ms-transform:translateY(10%) scale(108%, 80%);
        -o-transform:translateY(10%) scale(108%, 80%);
    }
    55% {
        transform:translateY(-4%) scale(96%, 106%);
        -webkit-transform:translateY(-4%) scale(96%, 106%);
        -moz-transform:translateY(-4%) scale(96%, 106%);
        -ms-transform:translateY(-4%) scale(96%, 106%);
        -o-transform:translateY(-4%) scale(96%, 106%);
    }
    78% {
        transform:translateY(2%) scale(102%, 98%);
        -webkit-transform:translateY(2%) scale(102%, 98%);
        -moz-transform:translateY(2%) scale(102%, 98%);
        -ms-transform:translateY(2%) scale(102%, 98%);
        -o-transform:translateY(2%) scale(102%, 98%);
    }
}
.intro .title:before,
.intro .title:after {
    left:calc(50% - 839px/2);
    width:839px;

    content:'';
}
#wrap:not([data-load]) .contents,
#wrap:not([data-load]) .intro > dl,
#wrap:not([data-load]) .intro > .title,
#wrap:not([data-load]) .intro > .title:before,
#wrap:not([data-load]) .intro > .title:after,
#wrap:not([data-load]) .intro > a,
#wrap:not([data-load]) #header {
    opacity:0;
}

#wrap:not([data-load]) .intro > dl,
#wrap:not([data-load]) .intro > a {
    transform:translateY(10%);
    -webkit-transform:translateY(10%);
    -moz-transform:translateY(10%);
    -ms-transform:translateY(10%);
    -o-transform:translateY(10%);
}

.contents,
.intro > dl,
.intro > a,
.intro .title:before,
#header {
    transition:opacity 1s, transform 1s;
    -webkit-transition:opacity 1s, transform 1s;
    -moz-transition:opacity 1s, transform 1s;
    -ms-transition:opacity 1s, transform 1s;
    -o-transition:opacity 1s, transform 1s;
}
.intro .title:before {
    top:84px;
    height:86px;

    background-position:0 0;
    transition-delay:.2s;
}
.intro .title:after {
    top:176px;
    height:252px;

    background-position:0 -92px;
}
#wrap[data-load="true"] .intro .title:after {
    animation:.7s linear .5s slideDown backwards;
    -webkit-animation:.7s linear .5s slideDown backwards;
}
.intro > dl {
    top:459px;
    left:calc(50% - 471px/2);
    width:471px;
    height:26px;

    background-position:-875px -14px;
    transition-delay:1.2s;
}
.intro > a {
    position:absolute;
    top:516px;
    left:calc(50% - 310px/2);
    width:310px;
    height:113px;

    background-position:-124px -390px;
    transition-delay:1.5s;
}
.intro > a[href] {
    height:105px;
    background-position:-124px -176px;
}
.intro > a[href]:hover {
    background-position:-124px -282px;
}
[data-ready] .obj1,
[data-ready] .obj2:before,
[data-ready] .obj3,
[data-ready] .obj4 {
    opacity:0;
}

.contents {
    margin-top:-259px;
    padding-top:259px;
}
#event1 {
    height:532px;
}
#event2 {
    height:736px;
}
#event3 {
    height:1040px;
}
@keyframes floatSide {
    0% {
        opacity:0;
        transform:translate(10%, 30%);
        -webkit-transform:translate(10%, 30%);
        -moz-transform:translate(10%, 30%);
        -ms-transform:translate(10%, 30%);
        -o-transform:translate(10%, 30%);
    }
}
.obj1 {
    top:2810px;
    left:calc(50% + 350px);
    width:585px;
    height:519px;

    background-position:-795px -658px;
}
#event3:not([data-ready]) .obj1 {
    animation:.6s ease-out floatSide backwards;
    -webkit-animation:.6s ease-out floatSide backwards;
}
#event4 {
    height:983px;
}
@keyframes floatUp {
    0% {
        opacity:0;
        transform:translate(2%, 10%);
        -webkit-transform:translate(2%, 10%);
        -moz-transform:translate(2%, 10%);
        -ms-transform:translate(2%, 10%);
        -o-transform:translate(2%, 10%);
    }
}
.obj2 {
    top:3375px;
    left:calc(50% - 843px);
    width:388px;
    height:812px;

    background:none;
}
.obj2:before,
.obj2:after {
    top:0;
    left:0;
    width:100%;
    height:100%;

    content:'';
}
.obj2:before {
    background-position:-395px -367px;
}
#event4:not([data-ready]) .obj2:before {
    animation:.8s ease-out floatUp backwards;
    -webkit-animation:.8s ease-out floatUp backwards;
}
.obj2:after {
    background-position:-1px -367px;
}
@keyframes slideRight {
    0% {
        opacity:0;
        transform:translateX(20%);
        -webkit-transform:translateX(20%);
        -moz-transform:translateX(20%);
        -ms-transform:translateX(20%);
        -o-transform:translateX(20%);
    }
}
.obj3 {
    top:3427px;
    left:calc(50% + 482px);
    width:461px;
    height:1305px;

    background-position:0 -1201px;
}
.obj4 {
    top:3926px;
    left:calc(50% + 236px);
    width:556px;
    height:803px;

    background-position:-661px -1201px;
}
#event4:not([data-ready]) .obj3,
#event4:not([data-ready]) .obj4 {
    animation:.6s ease-out slideRight backwards;
    -webkit-animation:.6s ease-out slideRight backwards;
}
#event4:not([data-ready]) .obj4 {
    animation-delay:.3s;
}