@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');

/* 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;

    background:#091031;
}
#wrap { 
    position: relative;
    overflow: hidden;
    max-width: 2560px;
    min-width: 1280px;
    min-height:100vh;
    margin: 0 auto; 
    background:url(https://lwi.nexon.com/tales/2021/1028_7C83C0239186C615/bg.jpg) 50% 0 no-repeat;
}
/* common */
[class^="item"],
#layer04 h1,
#layer04 .box,
#layer05 h1,
#layer05 .box,
#layer03 table thead th,
#layer03 .paging > button,
#layer01 .dialog .cancel,
#layer01 dt,
.layer .submit,
.layer .close,
.attention h2,
.attention ul,
#event4 h2,
#event4 h2 + p,
#event4 th,
#event4 dt,
#event4 .event4_1 dd:not(:last-child),
#event4 .buttonLottery,
#event3 .buttonLogin,
#event3 .buttonSelectCharacter,
#event3 > p,
#event3 h3,
#event3 > div > dl dt,
#event3 .buttonPointRefresh,
#event3 .buttonPointCoupon,
#event2 .button,
#event1 + p,
#event1 li,
#event1 h2,
.shortcut > a,
.intro .desc dl,
.intro .desc > p,
.title,
#header .logo, #header .util li a, #header .util button, .top_btn a { 
  display: block; 
  text-indent: 200%;
  white-space: nowrap;
  overflow: hidden; 
  background:0 0 no-repeat; 
  font-size:0;
  line-height:0;
}

#layer03 .paging > button,
#layer01 .dialog .cancel,
#layer01 .select:after,
.layer .submit,
.layer .close,
#event4 .buttonLottery,
#event3 .buttonLogin,
#event3 .buttonSelectCharacter,
#event3 .buttonPointRefresh,
#event3 .buttonPointCoupon,
#event2 .button,
.top_btn a,
.shortcut > 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/1028_7C83C0239186C615/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: 24px; left: 28px; z-index: 1; width:181px; height:75px;}
#header .logo.hide {display: none;}
#header .util { position: absolute; top: 47px; height:75px; right: 30px; z-index: 1; padding:0 0 0 207px;  }
#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: 0; 
    left: 0; 
    width: 196px; 
    height: 44px;

    background-position: -186px 1px; 
}
#header .util li .btn_home { 
    background-position: -393px 0;
}
#header .util li .btn_fb { 
    background-position: -437px 0; 
}
#header .util li .btn_tw { 
    background-position: -481px 0; 
}
#header .util .btn_game:hover { 
    background-position: -186px -80px 
}
#header .util li .btn_home:hover { 
    background-position: -393px -81px; 
}
#header .util li .btn_fb:hover { 
    background-position: -437px -81px; 
}
#header .util li .btn_tw:hover { 
    background-position: -481px -81px; 
}
#header .util .btn_today { 
    width: 142px; 
    height: 22px; 
    margin: 6px 0 0 -13px;

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

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

@keyframes fadeIn {
    0% {
        opacity:0;
    }
}
@keyframes slideUp {
    0% {
        opacity:0;
        transform:translateY(70px);
        -webkit-transform:translateY(70px);
        -moz-transform:translateY(70px);
        -ms-transform:translateY(70px);
        -o-transform:translateY(70px);
    }
}
@keyframes scrollTarget {
    0% {
        opacity:0;
        transform:translateY(30px);
        -webkit-transform:translateY(30px);
        -moz-transform:translateY(30px);
        -ms-transform:translateY(30px);
        -o-transform:translateY(30px);
    }
}
[data-ready] {
    opacity:0;
}
#event1:not([data-ready]) li,
.intro .desc {
    animation:slideUp .3s ease-out backwards;
    -webkit-animation:slideUp .3s ease-out backwards;
}
[data-scrollTarget]:not([data-ready]) {
    animation:scrollTarget .3s ease-out backwards;
    -webkit-animation:scrollTarget .3s ease-out backwards;
}
#event1[data-scrollTarget]:not([data-ready]) {
    animation-name:fadeIn;
}

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

    background:#091031 url(https://lwi.nexon.com/tales/2021/1028_7C83C0239186C615/copyright.png) 50% 50% no-repeat;
}

.top_btn {
  display: none;
}
.top_btn a {
  display: block;
  width: 78px;
  height: 78px;
  margin:8px auto 0;
  
  background-position:-393px -335px;
}
.top_btn a:hover {
    background-position-x:-508px;
}

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

#wrap > #header .logo,
#lnb a {
    display: block;
    text-indent: -99999px;
    overflow: hidden;
}
body[data-layer="true"] #lnb,
.fixed #lnb {
    position: fixed;
    top: 0;
}

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

#lnb a.logo {
    position: absolute;
    top: 9px;
    left: 9px;
    width:96px;
    height:42px;

    background-position:0 -91px;
}

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

#lnb ul li a {
    width:90px;
    height:102px;
    margin:0 auto;
}

#lnb .nav3,
#lnb .nav4 {
    height:119px;
}

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

#lnb .nav2 {
    background-position: -100px -443px;
}

#lnb .nav3 {
    background-position: -200px -443px;
}

#lnb .nav4 {
    background-position: -300px -569px;
}

#lnb .on .nav1,
#lnb .nav1:hover {
    background-position: 0 -569px;
}

#lnb .on .nav2,
#lnb .nav2:hover {
    background-position: -100px -569px;
}

#lnb .on .nav3,
#lnb .nav3:hover {
    background-position: -200px -569px;
}

#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:hover {
    background-color:#a41739;
}

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

.shortcut {
    position:fixed;
    top:calc(50% - 168px/2);
    right:20px;
    z-index:2;
}
.shortcut > a {
    display:block;
    width:103px;
    height:52px;

    border:3px solid #d4ae84;
}
.shortcut > a:not(:first-child) {
    border-top-width:0;
}
.shortcut > .menu1 {
    background-position:-380px -162px;
}
.shortcut > .menu2 {
    background-position:-380px -217px;
}
.shortcut > .menu3 {
    background-position:-380px -272px;
}
.shortcut > a[href].active,
.shortcut > a[href]:hover {
    background-position-x:-495px;
}

.intro {
    overflow:hidden;
    height:2133px;
}

.intro .desc,
.intro .desc > p,
.intro .obj6:before,
.intro [class^="obj"] {
    display:block;
    position:absolute;
    background:url(https://lwi.nexon.com/tales/2021/1028_7C83C0239186C615/intro.png) 50% 0 no-repeat;
}
@keyframes bg {
    0% {
        opacity:0;
        transform:scale(8) rotate(100deg);
        -webkit-transform:scale(8) rotate(100deg);
        -moz-transform:scale(8) rotate(100deg);
        -ms-transform:scale(8) rotate(100deg);
        -o-transform:scale(8) rotate(100deg);
}
}
.intro .obj5 {
    top:0;
    left:0;
    width:100%;
    height:764px;

    animation:bg .7s ease-in-out backwards;
    -webkit-animation:bg .7s ease-in-out backwards;
    transform-origin: 1070px center;
}
@keyframes slideLeft {
    0% {
        width:0;

        opacity:0;
    }
}
.intro .obj6 {
    overflow:hidden;
    top:998px;
    left:0;
    width:100%;
    height:1137px;

    animation:slideLeft .6s 1.6s backwards;
    -webkit-animation:slideLeft .6s 1.6s backwards;
    background:none;
}
.intro .obj6:before {
    top:0;
    left:0;
    width:100vw;
    height:100%;

    background-position:50% -792px;
    content:'';
}
.intro .obj7 {
    top:241px;
    left:0;
    width:100%;
    height:1314px;

    animation:fadeIn 1s 2s backwards;
    -webkit-animation:fadeIn 1s 2s backwards;
    background:url(https://lwi.nexon.com/tales/2021/1028_7C83C0239186C615/character.png) 50% 0 no-repeat;
}

.title [class^="obj"] {
    top:50px;
    left:calc(50% - 960px/2);
    width:960px;
    height:960px;
}
@keyframes rotation {
    0% {
        opacity:0;
        transform:scale(1.2) rotate(0deg);
        -webkit-transform:scale(1.2) rotate(0deg);
        -moz-transform:scale(1.2) rotate(0deg);
        -ms-transform:scale(1.2) rotate(0deg);
        -o-transform:scale(1.2) rotate(0deg);
    }
    20% {
        opacity:1;
    }
    100% {
        transform:scale(1) rotate(360deg);
        -webkit-transform:scale(1) rotate(360deg);
        -moz-transform:scale(1) rotate(360deg);
        -ms-transform:scale(1) rotate(360deg);
        -o-transform:scale(1) rotate(360deg);
    }
}
@keyframes rotation2 {
    0% {
        opacity:0;
        transform:scale(1.2) rotate(0deg);
        -webkit-transform:scale(1.2) rotate(0deg);
        -moz-transform:scale(1.2) rotate(0deg);
        -ms-transform:scale(1.2) rotate(0deg);
        -o-transform:scale(1.2) rotate(0deg);
    }
    20% {
        opacity:1;
    }
    100% {
        transform:scale(1) rotate(-360deg);
        -webkit-transform:scale(1) rotate(-360deg);
        -moz-transform:scale(1) rotate(-360deg);
        -ms-transform:scale(1) rotate(-360deg);
        -o-transform:scale(1) rotate(-360deg);
    }
}
@keyframes pop {
    0% {
        opacity:0;
        transform:scale(.5);
        -webkit-transform:scale(.5);
        -moz-transform:scale(.5);
        -ms-transform:scale(.5);
        -o-transform:scale(.5);
    }
    40% {
        transform:scale(1.2);
        -webkit-transform:scale(1.2);
        -moz-transform:scale(1.2);
        -ms-transform:scale(1.2);
        -o-transform:scale(1.2);
    }
}
.title:after {
    position: absolute;
    top:270px;
    left:calc(50% - 520px/2);
    width: 520px;
    height: 520px;

    animation:pop 1.4s .5s backwards;
    -webkit-animation:pop 1.4s .5s backwards;
    background-color: rgb(36, 38, 62);
    border-radius: 50%;
    box-shadow:0 0 35px 21px rgba(175,100,230, .23);
    content:'';
}
.title .obj1,
.title .obj2,
.title .obj3 {
    animation:rotation 2.4s linear .6s backwards;
    -webkit-animation:rotation 2.4s linear .6s backwards;
}
.title .obj1 {
    animation-duration:2.2s;
    animation-delay:1.7s;
    background-position:-986px -2913px;
}
.title .obj2 {
    animation-name:rotation2;
    animation-delay:1.5s;
    background-position:-986px -1939px;
}
.title .obj3 {
    background-position:0 -1939px;
}
.title .obj4 {
    z-index:1;

    animation:fadeIn 1s 1.5s backwards;
    -webkit-animation:fadeIn 1s 1.5s backwards;
    background-position:0 -2913px;
}

.intro .desc {
    position:relative;
    top:1580px;
    width:1266px;
    height:432px;
    margin:0 auto;

    animation-delay:2s;
    background-position:0 -3887px;
}

@keyframes balloon {
    10%, 40% {
        transform:rotate(5deg);
        -webkit-transform:rotate(5deg);
        -moz-transform:rotate(5deg);
        -ms-transform:rotate(5deg);
        -o-transform:rotate(5deg);
    }
    20%, 60% {
        transform:rotate(-5deg);
        -webkit-transform:rotate(-5deg);
        -moz-transform:rotate(-5deg);
        -ms-transform:rotate(-5deg);
        -o-transform:rotate(-5deg);
    }
    80% {
        transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        -o-transform:rotate(0deg);
    }
}
#event1:not([data-ready]) + p,
.intro .desc[data-animation="done"] > p {
    animation:balloon 1.5s ease-in-out .4s infinite backwards;
    -webkit-animation:balloon 1.5s ease-in-out .4s infinite backwards;
    transform-origin:30% 70%;
}
.intro .desc > p {
    top:122px;
    right:-100px;
    width:198px;
    height:216px;

    background-position:-1271px -3887px;
}

.section.contents {
    margin-top:110px;
}
.attention,
#event4 [class^="obj"],
#event4 .event4_1,
#event4 .event4_2,
#event3,
#event2 .tooltip + div,
#event2 .obj10,
#event2 .obj11,
#event2 .obj12,
#event2 .obj13,
#event2 .obj14,
#event2 .obj15,
#event2,
#event1 + p,
#event1 [class^="obj"],
#event1 li,
#event1 h2 {
    background:url(https://lwi.nexon.com/tales/2021/1028_7C83C0239186C615/contents.png) 50% 0 no-repeat;
}

.section.contents > div {
    position:relative;
}
#event1 h2 {
    width:590px;
    height:98px;
    margin:0 auto;

    background-position:-709px 0;
}
#event1 ol {
    margin-top:83px;

    text-align:center;
}
#event1 li {
    display:inline-block;
    width:449px;
    height:441px;
    margin:0 -5px;
}
#event1 li:first-child {
    background-position:-308px -181px;
}
#event1:not([data-ready]) li:first-child {
    animation-delay:.5s;
}
#event1 li:nth-child(2) {
    background-position:-761px -181px;
}
#event1:not([data-ready]) li:nth-child(2) {
    animation-delay:.8s;
}
#event1 li:nth-child(3) {
    background-position:-1214px -181px;
}
#event1:not([data-ready]) li:nth-child(3) {
    animation-delay:1.1s;
}
#event1 [class^="obj"] {
    position:absolute;
}
#event1 .obj8 {
    top:359px;
    left:calc(50% - 852px);
    width:154px;
    height:246px;

    background-position:-135px -360px;
}
#event1 .obj9 {
    top:368px;
    left:calc(50% + 666px);
    width:222px;
    height:188px;

    background-position:-1680px -370px;
}
#event1 + p {
    position:absolute;
    top:-183px;
    left:calc(50% + 202px);
    width:184px;
    height:216px;

    background-position:-124px -3px;
}
#event1[data-ready] + p {
    opacity:0;
}

#event2 .obj16,
#event2 .obj17,
#event4 .obj25,
#event4 .obj26 {
    position:absolute;

    background:url(https://lwi.nexon.com/tales/2021/1028_7C83C0239186C615/character2.png) no-repeat;
}
#event2 {
    width:1027px;
    height:1406px;
    margin:206px auto 0;

    background-position:-487px -658px;
}
@keyframes twinkle {
    0% {
        opacity:.5;
        transform:scale(.95);
        -webkit-transform:scale(.95);
        -moz-transform:scale(.95);
        -ms-transform:scale(.95);
        -o-transform:scale(.95);
    }
}
#event4 [class^="obj"]:not(.obj25):not(.obj26),
#event2 .obj10,
#event2 .obj11,
#event2 .obj12,
#event2 .obj13,
#event2 .obj14,
#event2 .obj15 {
    position:absolute;

    animation:twinkle .6s linear infinite alternate-reverse backwards;
    -webkit-animation:twinkle .6s linear infinite alternate-reverse backwards;
    content:'';
}
#event2 .obj10 {
    top:219px;
    left:calc(50% + 686px);
    width:312px;
    height:313px;

    background-position:-1580px -867px;
}
#event2 .obj15,
#event2 .obj11 {
    top:76px;
    left:calc(50% + 640px);
    width:139px;
    height:140px;

    animation-delay:.2s;
    background-position:-1578px -717px;
}
#event2 .obj14,
#event2 .obj12 {
    top:162px;
    left:calc(50% + 874px);
    width:97px;
    height:98px;

    animation-delay:.4s;
    background-position:-1723px -759px;
}
#event2 .obj13 {
    top:266px;
    left:calc(50% - 1105px);
    width:312px;
    height:310px;

    animation-delay:.1s;
    background-position:-1520px -1222px;
}
#event2 .obj14 {
    top:259px;
    left:calc(50% - 838px);

    animation-delay:.3s;
    background-position:-1835px -1222px;
}
#event2 .obj15 {
    top:427px;
    left:calc(50% - 806px);

    animation-delay:.5s;
    background-position:-1835px -1324px;
}

#event2 .obj16 {
    top:822px;
    left:calc(50% - 1042px);
    width:488px;
    height:227px;

    background-position:-21px -1461px;
}
#event2 .obj17 {
    top:559px;
    left:calc(50% + 453px);
    width:756px;
    height:717px;

    background-position:-254px 0;
}
#event2 .button {
    position:absolute;
    top:1238px;
    left:calc(50% + 112px);
    z-index:2;
    width:365px;
    height:101px;

    background-position:0 -160px;
}
#event2 .button:hover {
    background-position-y:-287px;
}
#event2 .tooltip {
    position:absolute;
    top:423px;
    left:calc(50% - 73px);
    width:23px;
    height:23px;
    margin:0;
    padding:0;

    background-color:transparent;
    border:none;
}
#event2 .tooltip + div {
    display:none;
    position:absolute;
    top:448px;
    left:calc(50% - 203px);
    z-index:1;
    width:492px;
    height:75px;

    background-position:-487px -2077px;
}

#event3 {
    height:565px;
    margin:98px auto 0;

    background-position:50% -2180px;
}
#event3 .buttonPointCoupon,
#event3 .buttonPointRefresh {
    position:absolute;
    top:220px;
    height:38px;
}
#event3 .buttonPointRefresh {
    left:calc(50% + 180px);
    width:102px;

    background-position:-612px -283px;
}
#event3 .buttonPointCoupon {
    left:calc(50% + 292px);
    width:210px;

    background-position:-724px -283px;
}
#event3 .buttonPointCoupon:not([disabled]):hover,
#event3 .buttonPointRefresh:not([disabled]):hover {
    background-position-y:-325px;
}
#event3 .buttonPointCoupon[disabled],
#event3 .buttonPointRefresh[disabled] {
    background-position-y:-367px;
    cursor:auto;
}
#event3 .detail {
    position:absolute;
    top:276px;
    left:calc(50% - 498px);
    width:278px;
    height:153px;

    text-align:center;
}
#event3 .detail p {
    padding:30px 0 20px;

    color:#f0d4b5;
    font-size:16px;
    line-height:22px;
}
#event3 .detail .buttonLogin,
#event3 .detail .buttonSelectCharacter {
    display:block;
    width:242px;
    height:44px;
    margin:0 auto;

    cursor:pointer;
}
#event3 .detail .buttonLogin {
    background-position:-612px -409px;
}
#event3 .detail .buttonLogin:hover {
    background-position-y:-454px;
}
#event3 .detail .buttonSelectCharacter {
    background-position:-612px -501px;
}
#event3 .detail .buttonSelectCharacter:hover {
    background-position-y:-546px;
}
#event3 .detail .info {
    padding:10px 17px;
}
#event3 .detail .info dl {
    border-bottom:1px solid #d4ae84;
    line-height:38px;
    text-align:left;
}
#event3 .detail .info dl:last-child {
    border-bottom:none;
}
#event3 .detail .info dt,
#event3 .detail .info dd {
    display:inline-block;

    vertical-align:middle;
}
#event3 .detail .info dt {
    width:59px;

    color:#fbc37d;
}
#event3 .detail .info dd:before {
    display:inline-block;
    width:1px;
    height:14px;
    margin:-2px 10px 0 0;

    background-color:#d4ae84;
    content:'';
    vertical-align:middle;
}
#event3 > div > dl {
    position:absolute;
    top:365px;
    width:117px;

    font-size:30px;
    line-height:20px;
    text-align:right;
}
#event3 > div > dl:first-child {
    right:calc(50% - 16px);
}
#event3 > div > dl:nth-child(2) {
    left:calc(50% + 132px);
}
#event3 > div > dl:nth-child(3) {
    left:calc(50% + 364px);
}

#event4,
#event4 .event4_2 {
    margin-top:60px;
}
#event4 > div {
    position:relative;
}
#event4 .event4_1 {
    height:682px;

    background-position:50% -2767px;
}
#event4 table {
    position:relative;
    z-index:2;
    margin:0 auto;
}
#event4 .event4_1 table {
    top:520px;
    width:1107px;
}
#event4 .buttonLottery {
    display:block;
    height:43px;
    margin:0 auto;
}
#event4 .buttonLottery[disabled] {
    cursor:auto;
}
#event4 .event4_1 .buttonLottery {
    width:165px;

    background-position:0 -394px;
}
#event4 .event4_1 .buttonLottery:not([disabled]):hover {
    background-position:-169px -394px;
}
#event4 .event4_1 .buttonLottery[disabled] {
    background-position:-672px -181px;
}
#event4 .event4_2 {
    width:1293px;
    height:1387px;
    margin-left:auto;
    margin-right:auto;

    background-position:50% -3466px;
}
#event4 .event4_2 table {
    top:228px;
    width:1024px;

    font-size:14px;
}
#event4 .event4_2 table td {
    padding:232px 20px 24px 18px;
}
#event4 .event4_2 dd:not(:last-child) {
    padding:0 8px;

    color:#ffe77b;
    letter-spacing:-.045em;
    line-height:30px;
}
#event4 .event4_2 .buttonLottery {
    width:133px;
    margin-top:1px;

    background-position:-612px -233px;
}
#event4 .event4_2 .buttonLottery:not([disabled]):hover {
    background-position:-746px -233px;
}
#event4 .event4_2 .buttonLottery[disabled] {
    background-position:-687px -181px;
}
#event4 [class^="obj"] {
    position:absolute;
}
#event4 .obj18 {
    top:2085px;
    left:calc(50% + 480px);
    width:538px;
    height:547px;

    background-position:-868px -5103px;
}
#event4 .obj19 {
    top:2413px;
    left:calc(50% + 468px);
    width:49px;
    height:49px;

    animation-delay:.2s !important;
    background-position:-1657px -4868px;
}
#event4 .obj20 {
    top:2175px;
    left:calc(50% + 311px);
    width:90px;
    height:91px;

    animation-delay:.4s !important;
    background-position:-1898px -4870px;
}
#event4 .obj21 {
    top:1809px;
    left:calc(50% + 819px);
    width:256px;
    height:259px;

    animation-delay:.3s !important;
    background-position:-1672px -4593px;
}
#event4 .obj22 {
    top:2128px;
    left:calc(50% - 1164px);
    width:525px;
    height:550px;

    animation-delay:.2s !important;
    background-position:-323px -5103px;
}
#event4 .obj23 {
    top:2096px;
    left:calc(50% - 719px);
    width:52px;
    height:56px;

    background-position:-1722px -4868px;
}
#event4 .obj24 {
    top:2273px;
    left:calc(50% - 687px);
    width:89px;
    height:90px;

    animation-delay:.3s !important;
    background-position:-1791px -4868px;
}
#event4 .obj25 {
    top:1823px;
    right:calc(50% + 488px);
    width:509px;
    height:732px;

    background-position:0 -722px;
}
#event4 .obj26 {
    top:1716px;
    left:calc(50% + 615px);
    width:495px;
    height:957px;

    background-position:-515px -722px;
}
.attention {
    width:1293px;
    height:225px;
    margin:90px auto 127px;

    background-position:50% -4868px;
}
body[data-layer="true"] {
    position:fixed;
    left:0;
    right:0;
    overflow:hidden;
}
#layer01 .dialog:before,
.layer {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;

    background-color:rgba(0,0,0, .7);
}
.layer,
.layer .layerContainer,
.layer .dialog {
    display:none;
}
.layer {
    z-index:999;
    padding:63px 0 49px;
    overflow: auto;

    text-align:center;
    white-space:nowrap;
}
.layer:before {
    display:inline-block;
    height:100%;
    margin-right:-4px;

    content:'';
}
.layer:before,
.layer .layerContainer {
    vertical-align:middle;
    white-space:normal;
}
.layer .layerContainer {
    position:relative;
    width:684px;

    border:solid #d4ae84;
    border-width:0 8px;
}
.layer .layerContainer:before,
.layer .layerContainer:after {
    position:absolute;
    left:-8px;
    right:-8px;
    height:26px;
    z-index:0;

    background:url(https://lwi.nexon.com/tales/2021/1028_7C83C0239186C615/layer.png) no-repeat;
    content:'';
}
.layer .layerContainer:before {
    top:-25px;
    background-position:50% 0;
}
.layer .layerContainer:after {
    bottom:-25px;
    background-position:50% 100%;
}
.layer .layerContainer .inner {
    position:relative;
    margin:-17px 0;
    padding:42px 45px;
    z-index:1;

    background-color:#091031;
    border:1px solid #d4ae84;
}
@keyframes layerOpen {
    0% {
        opacity:.5;
        transform:translateY(50%);
        -webkit-transform:translateY(50%);
        -moz-transform:translateY(50%);
        -ms-transform:translateY(50%);
        -o-transform:translateY(50%);
    }
}
.dialog[data-visibled="true"] .box,
.layer .dialog[data-visibled="true"],
.layer[data-visibled="true"] {
    display:block;

    animation:.3s ease-out fadeIn;
    -webkit-animation:.3s ease-out fadeIn;
    animation-fill-mode: backwards;
}
.layerContainer[data-visibled="true"] {
    display:inline-block;

    animation:.2s ease-out layerOpen;
    -webkit-animation:.2s ease-out layerOpen;
    animation-fill-mode: backwards;
    animation-delay:.1s;
}
.layer .close {
    position:absolute;
    top:-52px;
    right:-36px;
    width:75px;
    height:77px;
    z-index:2;

    background-position:-857px -410px;
}
.layer .close:hover {
    background-position-y:-496px;
}
.layer .submit {
    display:block;
    width:105px;
    height:43px;
    margin:12px auto 0;

    background-position:-672px -47px;
}
.layer .submit:not([disabled]):hover {
    background-position-x:-782px;
}
.layer .submit[disabled] {
    cursor:auto;
    opacity:.5;
}
#layer05 h1,
#layer05 .box,
#layer05 .couponNumber,
#layer03 .tab01:before,
#layer03 .tab02:before,
#layer04 h1,
#layer04 .box,
.layer .box {
    display:block;

    background:url(https://lwi.nexon.com/tales/2021/1028_7C83C0239186C615/layer_contents.png) 50% 0 no-repeat;
}
#layer01 .box {
    width:600px;
    height:380px;
    padding-top:233px;

    box-sizing:border-box;
}
#layer01 .submit {
    background-position-y:0;
}
#layer01 dl {
    margin-bottom:10px;
    padding-left:121px;
}
#layer01 .select {
    display:block;
    position:relative;
    width:223px;
    height:35px;

    background-color:#5173ce;
}
#layer01 .select > button,
#layer01 .select label {
    display:block;

    cursor:pointer;
    text-align:left;
}
#layer01 .select label input {
    position:absolute;

    opacity:0;
}
#layer01 .select > button,
#layer01 .select > div {
    width:100%;
    padding:10px 12px;

    box-sizing:border-box;
}
#layer01 .select > div {
    display:none;
    position:absolute;
    top:calc(100% + 1px);
    left:0;
    z-index:2;
    overflow:auto;
    max-height:141px;

    background-color:#304dab;
    color:#c1cdec;
}
#layer01 .select > div input + span {
    line-height:24px;
}
#layer01 .select > div input:checked + span {
    color:#d4ae84;
}
#layer01 .select > button {
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    width:calc(100% + 37px);
    height:35px;
    padding-top:0;
    padding-bottom:0;
    padding-right:49px;

    background-color:transparent;
    color:#fff;
    font-size:16px;
}
#layer01 .select:after {
    position:absolute;
    top:0;
    left:calc(100% + 2px);
    width:35px;
    height:100%;

    background-position:-629px -64px;
    content:'';
}
#layer01 .select > div label:hover {
    text-decoration:underline;
}
.dialog .box {
    display:none;
    position:fixed;
    z-index:1001;
}
.dialog[data-visibled="true"] .box {
    animation-delay:.2s;
}
.dialog:before {
    z-index:1000;
    
    content:'';
}
#layer01 .dialog .box {
    top:calc(50% - 196px/2);
    left:calc(50% - 360px/2);
    width:360px;
    height:196px;
    padding:137px 0 0;

    background-position:50% -400px;
}

#layer01 .dialog .submit,
#layer01 .dialog .cancel {
    display:inline-block;
    width:90px;
    height:36px;
    margin-top:0;
}
#layer01 .dialog .submit {
    background-position:-672px -95px;
}
#layer01 .dialog .submit:not([disabled]):hover {
    background-position:-672px -137px;
}
#layer01 .dialog .cancel {
    background-position:-768px -95px;
}
#layer01 .dialog .cancel:not([disabled]):hover {
    background-position:-768px -137px;
}

.tab {
    margin-bottom:10px;
}
.tab > button {
    float:left;
    width:50%;
    height:50px;

    background-color:#040a22;
    border-style:solid;
    border-width:1px 0;
    border-color:transparent transparent #6c91f5;
    color:#394d9a;
    line-height:48px;
    text-align:center;
}
[data-tab="0"] .tab > button:first-child,
[data-tab="1"] .tab > button:nth-child(2) {
    background-color:transparent;
    border-width:1px 1px 0;
    border-color:#6c91f5 #6c91f5 transparent;
    color:#6c91f5;
}
.tab:after {
    display:block;
    clear:both;
    height:0;

    content:'';
}

#layer02 .inner {
    background-color:#0d1846;
}
#layer02 .box {
    width:644px;
    margin:0 -26px;
}
#layer02 .box.box01 {
    height:44px;
    margin-bottom:22px;

    background-position:50% -1239px;
}
#layer02 [data-tab="0"] .box.box02 {
    height:1548px;

    background-position:50% -1308px;
}
#layer02 [data-tab="1"] .box.box02 {
    height:197px;

    background-position:50% -3362px;
}
#layer02 .box.box03 {
    position:relative;
    width:682px;
    height:410px;
    margin:20px -45px -121px;
    padding:23px 0 121px;

    background-color:#091031;
    background-position:50% -2872px;
}
#layer02 .box.box03:after {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:122px;

    background-color:#091031;
    content:'';
}
#layer02 .submit {
    position:relative;
    margin-top:45px;
    margin-bottom:-9px;
}

.tab01,
.tab02 {
    display:none;
}
#layer03 [data-tab="0"] .tab01,
#layer03 [data-tab="1"] .tab02 {
    display:block;
}
#layer03 .tab01:before,
#layer03 .tab02:before {
    display:block;
    height:40px;

    content:'';
}
#layer03 .tab01:before {
    background-position:50% -883px;
}
#layer03 .tab02:before {
    background-position:50% -928px;
}
#layer03 table {
    width:100%;
}
#layer03 td {
    width:33.333%;
    padding:10px;

    border:1px solid #886442;
    border-width:0 0 1px 1px;
    color:#97a2d1;
    font-size:15px;
    line-height:20px;
    text-align:center;
}
#layer03 td:first-child {
    border-left-width:0;
}
#layer03 .nodata td {
    height:204px;
    padding:0;
    
    line-height:25px;
}
#layer03 .tab02 td:first-child {
    width:120px;
}
#layer03 .tab02 td:nth-child(2) {
    width:180px;
}
#layer03 .tab02 td:nth-child(3) {
    width:auto;
}
#layer03 .paging {
    margin:10px 0;
}
#layer03 .paging > button,
#layer03 .paging > a {
    display:inline-block;

    color:#97a2d1;
    cursor:pointer;
    font-size:15px;
}
#layer03 .paging > a {
    padding:0 10px;

    line-height:28px;
}
#layer03 .paging > a:hover {
    text-decoration:underline;
}
#layer03 .paging > a[data-current="true"] {
    color:#c99b6c;
}
#layer03 .paging > button {
    width:28px;
    height:28px;
}
#layer03 .paging > .buttonFirst {
    background-position:-537px 0;
}
#layer03 .paging > .buttonPrev {
    background-position:-570px 0;
}
#layer03 .paging > .buttonNext {
    background-position:-603px 0;
}
#layer03 .paging > .buttonLast {
    background-position:-636px 0;
}
#layer03 .paging > button:hover {
    background-position-y:-33px;
}
#layer03 .tab01 .box {
    width:600px;
    height:74px;

    background-position:50% -972px;
}
#layer03 .tab02 .box {
    width:600px;
    height:170px;

    background-position:50% -1047px;
}
#layer03 .submit {
    margin-top:21px;
}

[class^="item"] {
    display:block;
    width:248px;
    height:211px;
    margin:0 auto;
}
[data-item="item01"] { /* 프리미엄 메모라이즈 텔레포트 S10 [30일 기간제] 1개 */
    background:url(https://lwi.nexon.com/tales/2021/1028_7C83C0239186C615/images/item_01.png);
}
[data-item="item02"] { /* 경험의 군고구마 [7일 기간제] 1개 */
    background:url(https://lwi.nexon.com/tales/2021/1028_7C83C0239186C615/images/item_02.png);
}
[data-item="item03"] { /* 레어의 밤고구마 [7일 기간제] 1개 */
    background:url(https://lwi.nexon.com/tales/2021/1028_7C83C0239186C615/images/item_03.png);
}
[data-item="item04"] { /* 테일즈 포인트[TP] 충전 카드 [2,000] 1개 */
    background:url(https://lwi.nexon.com/tales/2021/1028_7C83C0239186C615/images/item_04.png);
}
[data-item="item05"] { /* 넥슨 캐시 1,000,000원 */
    background:url(https://lwi.nexon.com/tales/2021/1028_7C83C0239186C615/images/item_05.png);
}
[data-item="item06"] { /* 넥슨 캐시 100,000원 */
    background:url(https://lwi.nexon.com/tales/2021/1028_7C83C0239186C615/images/item_06.png);
}
[data-item="item07"] { /* 넥슨 캐시 50,000원 */
    background:url(https://lwi.nexon.com/tales/2021/1028_7C83C0239186C615/images/item_07.png);
}
[data-item="item08"] { /* 넥슨 캐시 30,000원 */
    background:url(https://lwi.nexon.com/tales/2021/1028_7C83C0239186C615/images/item_08.png);
}
[data-item="item09"] { /* 넥슨 캐시 10,000원 */
    background:url(https://lwi.nexon.com/tales/2021/1028_7C83C0239186C615/images/item_09.png);
}
[data-item="item10"] { /* 스페셜 스킬(ⓟ 연마 강화) */
    background:url(https://lwi.nexon.com/tales/2021/1028_7C83C0239186C615/images/item_10.png);
}
[data-item="item11"] { /* 스페셜 스킬(ⓟ 고급 체력 연마) */
    background:url(https://lwi.nexon.com/tales/2021/1028_7C83C0239186C615/images/item_11.png);
}
[data-item="item12"] { /* 스페셜 스킬(ⓟ 고급 방어구 연마) */
    background:url(https://lwi.nexon.com/tales/2021/1028_7C83C0239186C615/images/item_12.png);
}
[data-item="item13"] { /* 아퀼루스 건틀렛 */
    background:url(https://lwi.nexon.com/tales/2021/1028_7C83C0239186C615/images/item_13.png);
}
[data-item="item14"] { /* 아퀼루스 헬름 */
    background:url(https://lwi.nexon.com/tales/2021/1028_7C83C0239186C615/images/item_14.png);
}
[data-item="item15"] { /* 아퀼루스 아뮬렛 */
    background:url(https://lwi.nexon.com/tales/2021/1028_7C83C0239186C615/images/item_15.png);
}
[data-item="item16"] { /* 아퀼루스 윙 */
    background:url(https://lwi.nexon.com/tales/2021/1028_7C83C0239186C615/images/item_16.png);
}
[data-item="item17"] { /* 아퀼루스 부츠 */
    background:url(https://lwi.nexon.com/tales/2021/1028_7C83C0239186C615/images/item_17.png);
}
[data-item="item18"] { /* 아크론 요새의 문양 */
    background:url(https://lwi.nexon.com/tales/2021/1028_7C83C0239186C615/images/item_18.png);
}
[data-item="item19"] { /* 아크론 요새의 변환 장치 */
    background:url(https://lwi.nexon.com/tales/2021/1028_7C83C0239186C615/images/item_19.png);
}
[data-item="item20"] { /* 상속 주문서 */
    background:url(https://lwi.nexon.com/tales/2021/1028_7C83C0239186C615/images/item_20.png);
}
[data-item="item21"] { /* 융합된 기운 */
    background:url(https://lwi.nexon.com/tales/2021/1028_7C83C0239186C615/images/item_21.png);
}
[data-item="item22"] { /* 수호자의 영혼석 */
    background:url(https://lwi.nexon.com/tales/2021/1028_7C83C0239186C615/images/item_22.png);
}

#layer05 h1,
#layer04 h1 {
    height:43px;
    margin:0 auto 10px;

    background-position:50% -614px;
}
#layer04 .box {
    height:15px;
    margin-top:40px;
    
    background-position:50% -671px;
}
#layer04 .submit {
    margin-top:36px;
}

#layer05 h1 {
    background-position:50% -698px;
}
#layer05 .couponNumber {
    width:600px;
    height:55px;
    margin:16px auto 0;
    padding-left:121px;

    background-position:50% -752px;
    box-sizing:border-box;
    color:#d6ad79;
    font-size:20px;
    line-height:55px;
}
#layer05 .box {
    height:60px;
    margin-top:21px;

    background-position:50% -813px;
}