@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 */
html, body {
    height:100%;
}
body{ 
    min-width: 1280px;
}
@keyframes fadeIn {
    0% {
        opacity:0;
    }
}
#wrap {
    position: relative;
    overflow: hidden;
    max-width: 2560px;
    min-width: 1280px;
    min-height:calc(100% - 63px);
    margin: 0 auto;

    background:url('https://lwi.nexon.com/tales/2021/0909_A3FBDD087CB50020/bg4.jpg') 50% 0 no-repeat;
}
#wrap:before {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;

    animation:.8s alternate-reverse fadeIn;
    -webkit-animation:.8s alternate-reverse fadeIn;
    animation-fill-mode: forwards;
    background-color:rgba(0,0,0,.8);
    content:'';
}
/* common */
.buttonLayer,
.clip .close,
#header .logo, #header .util li a, #header .util button { 
  display: block; 
  text-indent: 200%;
  white-space: nowrap;
  overflow: hidden; 
  background:0 0 no-repeat; 
}
.buttonLayer,
.clip .close,
.event1 li a,
#wrap > #header .logo,
#lnb .logo,
#header .util li a, 
#header .util button,
#lnb ul li a {
    background:url("https://lwi.nexon.com/tales/2021/0909_A3FBDD087CB50020/button_BF2830CEDC762CB5.png") 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: 38px; left: 10px; z-index: 1;}
#header .logo.hide {display: none;}
#header .util { position: absolute; top: 10px; 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: -222px 0px;
}
#header .util li .btn_home { 
    background-position: -355px -3px; 
}
#header .util li .btn_fb { 
    background-position: -400px -3px; 
}
#header .util li .btn_tw { 
    background-position: -445px -3px; 
}
#header .util .btn_game:hover { 
    background-position: -222px -83px 
}
#header .util li .btn_home:hover { 
    background-position: -355px -86px; 
}
#header .util li .btn_fb:hover { 
    background-position: -400px -86px; 
}
#header .util li .btn_tw:hover { 
    background-position: -445px -86px; 
}
#header .util .btn_today { 
    width: 135px; 
    height: 20px; 
    margin: 4px 0 0 -2px;

    background-position: -353px -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: #ed7a95;
    z-index:999;
    transition: 0.3s ease;
}

.event1 li 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;

    background-position:-10px 0;
}
#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:20px;
}

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

    vertical-align:top;
}

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

#lnb .nav2 {
    background-position: 0 -187px;
}
#lnb .nav3,
#lnb .nav4 {
    height:118px;
}
#lnb .nav3 {
    background-position: -510px 0;
}
#lnb .nav4 {
    background-position: -510px -138px;
}

#lnb .on .nav1,
#lnb .nav1:hover {
    background-position: -102px -65px;
}

#lnb .on .nav2,
#lnb .nav2:hover {
    background-position: -102px -187px;
}
#lnb .on .nav3,
#lnb .nav3:hover {
    background-position: -606px 0;
}
#lnb .on .nav4,
#lnb .nav4:hover {
    background-position: -606px -138px;
}

#lnb button.btn_toggle {
    position: absolute;
    top: -1px;
    left:100%;
    width: 37px;
    height: 38px;
    background-color:#da3e64;
    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: #fff;
    margin: -1px 0 0 -10px;
    transition: all 200ms ease;
}
#lnb button.btn_toggle:hover {
    background-color:#a41739;
}
#lnb button.btn_toggle:hover span {
    background-color:#ffbdcd;
}

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

.intro {
    position:relative;
    height:1330px;
    z-index:0;
    overflow:hidden;

    box-sizing:border-box;
}
.intro .title,
.intro [class^="obj"],
.intro .obj1:before {
    display:block;
    position:absolute;

    background:50% 50% no-repeat;
}
.intro .title,
.intro .obj1:before,
.intro .obj1 {
    top:0;
    left:0;
    right:0;
    bottom:0;
    
}
.intro .obj1:before,
.intro .obj1 {
    animation:.6s ease-out fadeIn;
    -webkit-animation:.6s ease-out fadeIn;
    animation-fill-mode: backwards;
}
.intro .obj1 {
    animation-duration:1s;
    animation-delay:.8s;

    background-image:url(https://lwi.nexon.com/tales/2021/0909_A3FBDD087CB50020/character4_01.png);
}
.intro .obj1[data-animate="done"] {
    animation:.2s ease-out alternate-reverse fadeIn;
    -webkit-animation:.2s ease-out alternate-reverse fadeIn;
    animation-fill-mode: backwards;
}
.intro .obj1[data-animate="done"]:before {
    display:block;

    background-image:url(https://lwi.nexon.com/tales/2021/0909_A3FBDD087CB50020/character4_02.png);
    content:'';
}
.intro .obj2,
.event1 .obj3 {
    background-image:url(https://lwi.nexon.com/tales/2021/0909_A3FBDD087CB50020/object.png);
}
@keyframes pop {
    0% {
        opacity:0;
        transform:translateY(80px) scale(.5);
        -webkit-transform:translateY(80px) scale(.5);
        -moz-transform:translateY(80px) scale(.5);
        -ms-transform:translateY(80px) scale(.5);
        -o-transform:translateY(80px) scale(.5);
    }
}
.intro .obj2 {
    top:-56px;
    left:0;
    right:0;
    height:309px;

    animation:.4s ease-out pop;
    -webkit-animation:.4s ease-out pop;
    animation-fill-mode: backwards;
    animation-delay:1.4s;
    background-position:50% 0;
}
.intro .title {
    animation:.4s ease-out fadeIn;
    -webkit-animation:.4s ease-out fadeIn;
    animation-fill-mode: backwards;
    animation-delay:2.3s;
    background-image:url(https://lwi.nexon.com/tales/2021/0909_A3FBDD087CB50020/title.png);
}
@keyframes contentsbg {
    0% {
        opacity:0;
        background-position:50% 120%;
    }
    100% {
        background-position:50% 100%;
    }
}
@keyframes pop {
    0% {
        opacity:0;
        transform:translateY(30%);
        -webkit-transform:translateY(30%);
        -moz-transform:translateY(30%);
        -ms-transform:translateY(30%);
        -o-transform:translateY(30%);
    }
}
.section.contents {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;

    animation:.4s contentsbg;
    -webkit-animation:.4s contentsbg;
    animation-fill-mode: backwards;
    animation-delay:.6s;
    background:url(https://lwi.nexon.com/tales/2021/0909_A3FBDD087CB50020/contents_bg.png) 50% 100% no-repeat;
}
@keyframes obj3 {
    0% {
        opacity:0;
        transform:translate(-50%, 50%);
        -webkit-transform:translate(-50%, 50%);
        -moz-transform:translate(-50%, 50%);
        -ms-transform:translate(-50%, 50%);
        -o-transform:translate(-50%, 50%);
}
}
.event1 .obj3 {
    position:absolute;
    top:677px;
    left:calc(50% + 648px);
    width:342px;
    height:252px;
    
    animation:.3s ease-out obj3;
    -webkit-animation:.3s ease-out obj3;
    animation-fill-mode: backwards;
    animation-delay:3.3s;
    background-position:-8px -319px;
}
.event1 ul {
    position:absolute;
    top:750px;
    left:calc(50% - 1242px/2);
}
.event1 ul:after {
    display:block;
    height:0;
    clear:both;
    content:'';
}
.event1 li,
.event1 ul:before {
    background:url(https://lwi.nexon.com/tales/2021/0909_A3FBDD087CB50020/contents4.png) 0 0 no-repeat;
}
.event1 ul:before {
    display:block;
    height:69px;
    margin-bottom:-8px;

    animation:.6s ease-out fadeIn;
    -webkit-animation:.6s ease-out fadeIn;
    animation-delay:2.4s;
    animation-fill-mode: backwards;
    content:'';
}
.event1 li {
    position:relative;
    float:left;
    height:417px;

    animation: .3s ease-out pop;
    -webkit-animation: .3s ease-out pop;
    animation-fill-mode: backwards;
}
.event1 li:first-child {
    width:308px;

    background-position:0 -74px;
}
.event1 li:first-child {
    animation-delay:2.4s;
}
.event1 li:nth-child(2) {
    width:313px;

    background-position:-308px -74px;
}
.event1 li:nth-child(2) {
    animation-delay:2.6s;
}
.event1 li:nth-child(3) {
    width:313px;

    background-position:-621px -74px;
}
.event1 li:nth-child(3) {
    animation-delay:2.8s;
}
.event1 li:nth-child(4) {
    width:308px;

    background-position:-934px -74px;
}
.event1 li:nth-child(4) {
    animation-delay:3s;
}
.event1 li a {
    position:absolute;
    top:307px;
    left:calc(50% - 102px);
    width:204px;
    height:70px;

    background-position:-222px -308px;
}
.event1 li a[href] {
    background-position:-222px -166px;
}
.event1 li a[href]:hover {
    background-position:-222px -237px;
}

.footer { 
    position: relative; 
    height: 100px; 
    margin-top:-100px;

    background:url(https://lwi.nexon.com/tales/2021/0909_A3FBDD087CB50020/copyright.png) 50% 50% no-repeat;
}

.layer {
    display:none;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:999;
    padding:180px 0 63px;

    text-align:center;
}
#wrap[data-clip="true"] {
    position:fixed;
    top:63px;
    left:0;
    right:0;
    overflow:hidden;
}
@keyframes dimmed {
    100% {
        background-color:rgba(0,0,0,.85);
    }
}
.layer[data-visible="true"] {
    display:block;
    animation:.6s dimmed;
    -webkit-animation:.6s dimmed;
    animation-fill-mode: forwards;
}
.layer[data-visible="true"] .clip {
    animation:.5s pop;
    -webkit-animation:.5s pop;
    animation-delay:.3s;
    animation-fill-mode: backwards;
}

.layer:before,
.layer .clip {
    display:inline-block;

    vertical-align:middle;
}

.layer:before {
    width:0;
    height:100%;
    margin-right:-4px;

    content:'';
}

.layer .clip {
    position:relative;
    width:1100px;
}
.clip .close {
    position:absolute;
    top:-104px;
    right:0;
    width:74px;
    height:74px;

    background-position:-433px -166px;
}
.clip iframe {
    display:block;
}
.clip footer {
    display:block;
    position:relative;
    height:52px;

    background:url(https://lwi.nexon.com/tales/2021/0909_A3FBDD087CB50020/clip_footer.jpg) 50% 50% no-repeat;
}
.clip footer .clip_notoday,
.clip footer .browserCheck {
    display:inline-block;
    position:absolute;
    overflow:hidden;

    font-size:0;
    text-indent:-9999999px;
}
.clip footer .browserCheck {
    left:482px;
    top:14px;
    width:141px;
    height:26px;
}
.clip footer .clip_notoday {
    top:16px;
    left:895px;
    width:178px;
    height:17px;

    background:none;
}

.buttonLayer {
    position:absolute;
    top:508px;
    left:calc(50% + 323px);
    width:153px;
    height:153px;

    animation:.3s ease-out fadeIn;
    -webkit-animation:.3s ease-out fadeIn;
    animation-delay:3s;
    animation-fill-mode: backwards;
    background-position:0 -300px;
}
.buttonLayer:hover {
    background-position:-433px -300px;
}