@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,object,video,iframe{margin:0;padding:0}
html{overflow-y:scroll}
header,article,aside,details,figcaption,figure,footer,hgroup,menu,nav,section{display:block;margin:0;padding:0;vertical-align:baseline}
body{position:relative;width:100%;font-family:"맑은 고딕","Malgun Gothic","돋움","dotum",sans-serif;font-size:15px;color:#01081a;background:#fff;line-height:1}
input,textarea,button,select{font-size:inherit;font-family:"맑은 고딕","Malgun Gothic","돋움","dotum",sans-serif;color:#01081a}
img,fieldset,button, textarea{border:0}
table{border-collapse:collapse;border-spacing:0}
ul,ol{list-style:none}
em,address{font-style:normal}
a,a:link{text-decoration:none;color:#876969}
a,a:link, a:active{background-color:transparent}
a,img{vertical-align:top}
hr{display:none}
legend, .blind{overflow:hidden;visibility:hidden;position:absolute;top:0;left:0;width:0;height:0;font-size:0;line-height:0}
.ir{text-indent:-9999px;overflow:hidden}
textarea{outline:0}
button{border:0;cursor:pointer;outline:0}

/* layout */ 
#wrap{position:relative;width:100%;overflow:hidden;min-width:1280px;max-width:1920px;margin:0 auto}
#wrap .section{position:relative;width:100%}
.section .container{position:relative;width:1280px;height:100%;margin:0 auto}
.bg_section{position:absolute;top:0;bottom:0;left:0;width:99.99%;padding-left:0.01%}

/* common */
.gnbWrapper{min-width:1280px !important}
.section .object_wrap{position:absolute;left:0;width:100%}
.section .object_wrap div, .section .object_wrap span{position:absolute}
#header a, #header button, #footer .copyright, #quick a span, .intro .big_list li a, .intro .small_list li a span, .content2 .cnt3 .btn_rate, .layerpop .btn_close{display:block;text-indent:-9999px;overflow:hidden;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/spr.png") no-repeat}

/* screen */
#screen{display:none;position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background:#000;z-index:100}

/* header */
#header{position:absolute;top:0;left:0;width:100%;z-index:100}
#header h1{position:absolute;top:16px;left:30px}
#header h1 a{width:239px;height:102px}
#header .util{position:absolute;top:31px;right:31px;padding-left:213px}
#header .util ul{overflow:hidden}
#header .util li{float:left;margin-left:3px}
#header .util li a{width:41px;height:49px}
#header .util li .btn_home{background-position:-503px -66px}
#header .util li .btn_fb{background-position:-547px -66px}
#header .util li .btn_tw{background-position:-591px -66px}
#header .util li .btn_home:hover{background-position:-502px -123px}
#header .util li .btn_fb:hover{background-position:-546px -123px}
#header .util li .btn_tw:hover{background-position:-590px -123px}
#header .util .btn_game{position:absolute;top:10px;left:0;width:195px;height:24px;background-position:-290px -78px}
#header .util .btn_game:hover{background-position:-290px -135px}
#header .util .btn_today{width:142px;height :22px;background-position:-290px -29px;margin:4px 0 0 -5px}

/* intro */
.intro{height:1252px}
.intro .bg_wrap{position:absolute;top:0;left:0;width:100%;height:100%}
.intro .bg_wrap .bg_section{bottom:-116px}
.intro .bg_wrap span{position:absolute}
.intro .bg_wrap .rainbow, .intro .bg_wrap .cloud, .intro .bg_wrap .blur{opacity:0;transition:opacity 500ms ease}
.intro .bg_wrap .cloud, .intro .bg_wrap .blur{transition-delay:200ms}
.intro.load .bg_wrap .rainbow, .intro.load .bg_wrap .cloud, .intro.load .bg_wrap .blur{opacity:1}
.intro .bg_wrap .sky{background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_intro.jpg") center top no-repeat}
.intro .bg_wrap .cloud{background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_cloud_intro.png") center top no-repeat}
.intro .bg_wrap .rainbow{top:4px;left:50%;width:784px;height:398px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_rainbow_intro.png") no-repeat;margin-left:289px}
.intro .bg_wrap .blur{top:473px;left:50%;width:1044px;height:936px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_blur_intro.png") no-repeat;margin-left:-755px}
.intro .char_wrap .char{background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/spr_char_intro.png") no-repeat;transition:opacity 300ms linear, transform 1s cubic-bezier(0, 1, 0.1, 1)}
.intro .char_wrap .char, .intro .char_wrap .bubble{opacity:0}
.intro.load .char_wrap .char{opacity:1;transform:translate(0, 0)}
.intro .char_wrap ._c1{top:159px;left:-51px;width:194px;height:217px;background-position:-915px 0;transform:translate(-20px, 70px)}
.intro.load .char_wrap ._c1{transition:opacity 300ms linear, transform 700ms cubic-bezier(0, 0.3, 0, 4);transition-delay:240ms}
.intro .char_wrap ._c2{top:169px;left:-393px;width:655px;height:1118px;z-index:1;transform:translate(-150px, 0);}
.intro .char_wrap ._c3{top:159px;left:1050px;width:349px;height:845px;background-position:-760px -489px;transform:translate(80px, 0);transition:opacity 300ms linear, transform 800ms ease;transition-delay:160ms}
.intro .char_wrap ._c4{top:151px;left:999px;width:859px;height:1230px;background-position:-1141px 0;z-index:1;transform:translate(150px, 0);transition-delay:80ms}
.intro .char_wrap .cover{top:366px;left:494px;width:1082px;height:719px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_cover_intro.png") no-repeat}
.intro .char_wrap .bubble{top:1px;left:-117px;width:691px;height:696px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_bubble_intro.png") no-repeat;transform:translateY(15px)}
.intro.load .char_wrap .bubble{opacity:0.5;transform:translateY(0);transition:opacity 300ms ease, transform 1s ease;transition-delay:400ms}
.intro .title_wrap span{background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/spr_title_intro.png") no-repeat;opacity:0}
.intro.load .title_wrap span{opacity:1}
.intro .title_wrap .headline._h1{top:119px;left:258px;width:734px;height:149px}
.intro .title_wrap .headline._h2{top:351px;left:271px;width:738px;height:134px}
.intro .title_wrap .headline .txt{top:0;height:100%;transition:opacity 0ms ease, transform 500ms ease;-ms-transition:opacity 30ms linear, transform 500ms ease}
.intro .title_wrap .headline._h1 .txt{transform:perspective(500px) rotateX(90deg) translateY(60px);-ms-transform:perspective(500px) rotateX(89deg) translateY(60px)}
.intro .title_wrap .headline._h2 .txt{transform:perspective(500px) rotateX(-90deg) translateY(-60px);-ms-transform:perspective(500px) rotateX(-89deg) translateY(-60px)}
.intro.load .title_wrap .headline .txt{transform:perspective(500px) rotateX(0) translateY(0)}
.intro .title_wrap .headline .shadow{top:1px;left:-8px;transform:translateY(-8px);transition:all 300ms ease}
.intro.load .title_wrap .headline .shadow{transform:translateY(0)}
.intro .title_wrap ._h1 ._t1{left:0;width:134px;background-position:-8px 0;transition-delay:300ms}
.intro .title_wrap ._h1 ._t2{left:154px;width:130px;background-position:-162px 0;transition-delay:350ms}
.intro .title_wrap ._h1 ._t3{left:303px;width:134px;background-position:-311px 0;transition-delay:400ms}
.intro .title_wrap ._h1 ._t4{left:455px;width:128px;background-position:-463px 0;transition-delay:450ms}
.intro .title_wrap ._h1 ._t5{left:606px;width:128px;background-position:-614px 0;transition-delay:500ms}
.intro .title_wrap ._h2 ._t1{left:0;width:121px;background-position:-8px -539px;transition-delay:550ms}
.intro .title_wrap ._h2 ._t2{left:128px;width:115px;background-position:-136px -539px;transition-delay:600ms}
.intro .title_wrap ._h2 ._t3{left:250px;width:120px;background-position:-258px -539px;transition-delay:650ms}
.intro .title_wrap ._h2 ._t4{left:373px;width:121px;background-position:-381px -539px;transition-delay:700ms}
.intro .title_wrap ._h2 ._t5{left:497px;width:121px;background-position:-505px -539px;transition-delay:750ms}
.intro .title_wrap ._h2 ._t6{left:623px;width:115px;background-position:-631px -539px;transition-delay:800ms}
.intro .title_wrap ._h1 .shadow{width:756px;height:170px;background-position:0 -166px;transition-delay:700ms}
.intro .title_wrap ._h2 .shadow{width:760px;height:155px;background-position:0 -721px;transition-delay:950ms}
.intro .title_wrap .x{top:279px;left:608px;width:63px;height:64px}
.intro .title_wrap .x span{top:0;left:0;width:100%;height:100%;transform:scale(0)}
.intro.load .title_wrap .x span{transform:scale(1);transition:opacity 0ms linear, transform 300ms cubic-bezier(0, 0.7, 0, 1.3);transition-delay:1s}
.intro .title_wrap .x ._x1{background-position:0 -384px}
.intro .title_wrap .x ._x2{background-position:-114px -384px}
.intro .title_wrap .description{top:523px;left:277px;width:727px;height:62px;background-position:0 -924px;transform:scale(0.8)}
.intro.load .title_wrap .description{transform:scale(1);transition:opacity 300ms ease, transform 300ms cubic-bezier(0, 0.7, 0, 1.2);transition-delay:1.2s}
.intro .butterfly_wrap span{background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/spr_butterfly_intro.png") no-repeat;opacity:0;transition:opacity 300ms linear, transform 1s ease}
.intro.load .butterfly_wrap span{opacity:1;transform:translate(0, 0)}
.intro .butterfly_wrap ._b1{top:158px;left:-93px;width:55px;height:94px;transform:translate(-30px, 30px);transition-delay:850ms}
.intro .butterfly_wrap ._b2{top:327px;left:34px;width:88px;height:84px;background-position:-229px -108px;transform:translate(0, 30px);transition-delay:1000ms}
.intro .butterfly_wrap ._b3{top:290px;left:131px;width:48px;height:83px;background-position:-326px -71px;transform:translate(30px, -10px);transition-delay:1200ms}
.intro .butterfly_wrap ._b4{top:242px;left:177px;width:46px;height:54px;background-position:-372px -23px;transform:translate(30px, 30px);transition-delay:900ms}
.intro .butterfly_wrap ._b5{top:374px;left:147px;width:72px;height:82px;background-position:-342px -155px;transform:translate(-30px, 30px);transition-delay:1150ms}
.intro .butterfly_wrap ._b6{top:404px;left:1023px;width:64px;height:110px;background-position:0 -295px;transform:translate(-30px, -30px);transition-delay:950ms}
.intro .butterfly_wrap ._b7{top:894px;left:1313px;width:64px;height:75px;background-position:-354px -308px;transition-delay:700ms}
.intro .butterfly_wrap ._b8{top:961px;left:1254px;width:64px;height:110px;background-position:-295px -375px;transition-delay:750ms}
.intro .butterfly_wrap ._b9{top:1011px;left:1124px;width:117px;height:113px;background-position:-165px -425px;transform:translate(-10px, 30px);transition-delay:1050ms}
.intro .butterfly_wrap ._b10{top:1073px;left:1275px;width:96px;height:113px;background-position:-316px -487px;transform:translate(-30px, 30px);transition-delay:1200ms}
.intro .link_list{position:absolute}
.intro .link_list:after{content:"";display:block;clear:both}
.intro .link_list li{float:left}
.intro .big_list{top:613px;left:100px;width:1092px;height:374px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_big_intro.png") no-repeat;opacity:0;transform:translateY(30px)}
.intro.load .big_list{opacity:1;transform:translateY(0);transition:opacity 300ms ease, transform 500ms ease;transition-delay:1.3s}
.intro .big_list ul{padding:97px 0 0 204px}
.intro .big_list .link1{margin-right:65px}
.intro .big_list li a{height:169px}
.intro .big_list li a:hover{animation:link1Hover 1s infinite linear}
.intro .big_list .link1 a{width:285px;background-position:0 -731px}
.intro .big_list .link2 a{width:356px;background-position:-328px -731px}
.intro .big_list .twinkle{position:absolute;top:166px;left:512px;width:29px;height:32px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_twinkle_big.png") no-repeat;animation:link1Twinkle 800ms infinite linear}
.intro .small_list{top:967px;left:212px}
.intro .small_list li{margin-right:2px}
.intro .small_list li a{position:relative;display:block;width:212px;height:216px}
.intro .small_list li a:hover{animation:link2Hover 1s infinite linear}
.intro .small_list li a span{position:absolute;opacity:0;transition:all 300ms ease}
.intro.load .small_list li a span{position:absolute;opacity:1}
.intro .small_list li .box{top:0;left:0;width:100%;height:100%;background-position:-328px -379px;transform:scale(0)}
.intro.load .small_list li .box{transform:scale(1)}
.intro .small_list li .txt{top:65px;height:85px;transform:translateY(10px)}
.intro.load .small_list li .txt{transform:translateY(0)}
.intro .small_list .link3 .box{transition-delay:1.45s}
.intro .small_list .link4 .box{transition-delay:1.5s}
.intro .small_list .link5 .box{transition-delay:1.55s}
.intro .small_list .link6 .box{transition-delay:1.6s}
.intro .small_list .link3 .txt{left:39px;width:141px;background-position:0 -615px;transition-delay:1.6s}
.intro .small_list .link4 .txt{left:59px;width:94px;background-position:-235px -615px;transition-delay:1.65s}
.intro .small_list .link5 .txt{left:70px;width:72px;background-position:-461px -615px;transition-delay:1.7s}
.intro .small_list .link6 .txt{left:36px;width:141px;background-position:-641px -615px;transition-delay:1.75s}

/* content */
.content .title_wrap span{background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/spr_title_content.png") no-repeat;opacity:0}
.content.active .title_wrap span{opacity:1}
.content .title_wrap .headline span{top:0;height:100%}
.content .title_wrap .small span{transform:translateY(50px)}
.content.active .title_wrap .small span{transform:translateY(0);transition:opacity 300ms ease, transform 300ms cubic-bezier(0, 0.7, 0, 1.2);-ms-transition:opacity 300ms linear, transform 300ms cubic-bezier(0, 0.7, 0, 1.2)}
.content .title_wrap .headline.big span{transform:perspective(500px) rotateX(-90deg);-ms-transform:perspective(500px) rotateX(-89deg)}
.content.active .title_wrap .big span{transform:perspective(500px) rotateX(0);transition:opacity 0ms ease, transform 500ms ease;-ms-transition:opacity 300ms linear, transform 500ms ease}
.content .title_wrap .ribbon{top:65px;left:497px;width:284px;height:104px}
.content .title_wrap .ribbon span{transform:scale(0)}
.content.active .title_wrap .ribbon span{transform:scale(1);transition:opacity 300ms ease, transform 300ms cubic-bezier(0, 0.7, 0, 1.5)}
.content4 .title_wrap .ribbon, .content5 .title_wrap .ribbon{top:86px}
.content .title_wrap .ribbon .shape{top:0;left:0;width:100%;height:100%}
.content .title_wrap .ribbon .txt{top:19px;left:126px;width:42px;height:27px}

/* content1 */
.content1{height:4351px}
.content1 .bg_cloud{top:-116px;bottom:auto;height:236px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_cloud_content1.png") center top no-repeat}
.content1 .bg_sky{top:120px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_content1.jpg") center top no-repeat}
.content1 .title_wrap .ribbon .txt{background-position:-325px 0}
.content1 .headline.small{top:177px;left:382px;width:514px;height:58px;background-position:-628px 0}
.content1.active .title_wrap .small ._t1{width:50px;background-position:-628px 0}
.content1.active .title_wrap .small ._t2{left:54px;width:49px;background-position:-682px 0}
.content1.active .title_wrap .small ._t3{left:107px;width:53px;background-position:-735px 0}
.content1.active .title_wrap .small ._t4{left:176px;width:54px;background-position:-804px 0}
.content1.active .title_wrap .small ._t5{left:233px;width:49px;background-position:-861px 0}
.content1.active .title_wrap .small ._t6{left:302px;width:49px;background-position:-930px 0}
.content1.active .title_wrap .small ._t7{left:356px;width:50px;background-position:-984px 0}
.content1.active .title_wrap .small ._t8{left:410px;width:48px;background-position:-1038px 0}
.content1.active .title_wrap .small ._t9{left:464px;width:50px;background-position:-1092px 0}
.content1.active .title_wrap .small ._t1{transition-delay:100ms}
.content1.active .title_wrap .small ._t2{transition-delay:125ms}
.content1.active .title_wrap .small ._t3{transition-delay:150ms}
.content1.active .title_wrap .small ._t4{transition-delay:175ms}
.content1.active .title_wrap .small ._t5{transition-delay:200ms}
.content1.active .title_wrap .small ._t6{transition-delay:225ms}
.content1.active .title_wrap .small ._t7{transition-delay:250ms}
.content1.active .title_wrap .small ._t8{transition-delay:275ms}
.content1.active .title_wrap .small ._t9{transition-delay:300ms}
.content1 .title_wrap .big{top:246px;left:214px;width:850px;height:106px}
.content1 .title_wrap .big ._t1{left:0;width:74px;background-position:-460px -69px}
.content1 .title_wrap .big ._t2{left:77px;width:102px;background-position:-537px -69px}
.content1 .title_wrap .big ._t3{left:181px;width:93px;background-position:-641px -69px}
.content1 .title_wrap .big ._t4{left:315px;width:95px;background-position:-775px -69px}
.content1 .title_wrap .big ._t5{left:415px;width:102px;background-position:-875px -69px}
.content1 .title_wrap .big ._t6{left:552px;width:91px;background-position:-1012px -69px}
.content1 .title_wrap .big ._t7{left:651px;width:98px;background-position:-1111px -69px}
.content1 .title_wrap .big ._t8{left:755px;width:95px;background-position:-1215px -69px}
.content1.active .title_wrap .big ._t1{transition-delay:350ms}
.content1.active .title_wrap .big ._t2{transition-delay:400ms}
.content1.active .title_wrap .big ._t3{transition-delay:450ms}
.content1.active .title_wrap .big ._t4{transition-delay:500ms}
.content1.active .title_wrap .big ._t5{transition-delay:550ms}
.content1.active .title_wrap .big ._t6{transition-delay:600ms}
.content1.active .title_wrap .big ._t7{transition-delay:650ms}
.content1.active .title_wrap .big ._t8{transition-delay:700ms}
.content1 .char{background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/spr_char_content1.png") no-repeat}
.content1 .cnt2 ._c2, .content1 .cnt3 ._c1 span{opacity:0}
.content1 .cnt2 ._c2.active, .content1 .cnt3 ._c1.active span{opacity:1;transform:translateX(0);transition:opacity 300ms linear, transform 1s cubic-bezier(0, 1, 0.1, 1)}
.content1 .cnt1{top:398px;height:411px}
.content1 .cnt1 .char{top:-9px;left:1102px;width:534px;height:918px;animation:doongdoong1 1s infinite alternate ease;z-index:1}
.content1 .cnt1 .bg_cnt{top:270px;left:25px;width:1143px;height:606px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_cnt1_content1.png") no-repeat}
.content1 .cnt2{top:1360px}
.content1 .cnt2 .bg_cnt{top:250px;left:102px;width:1076px;height:1025px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_cnt2_content1.png") no-repeat}
.content1 .cnt2 ._c1{top:1061px;left:-283px;width:423px;height:353px;background-position:-777px 0;animation:doongdoong2 2s infinite alternate ease;z-index:1}
.content1 .cnt2 ._c2{top:436px;left:1095px;width:822px;height:889px;background-position:-678px -459px;transform:translateX(200px)}
.content1 .cnt2 ._b2{top:529px;left:1050px;width:151px;height:424px;background-position:-459px -1074px}
.content1 .cnt2 ._b1{top:1113px;left:-231px;width:383px;height:400px;background-position:0 -978px;z-index:1}
.content1 .cnt3{top:2721px}
.content1 .cnt3 .bg_cnt{top:250px;left:105px;width:1066px;height:1243px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_cnt3_content1.png") no-repeat}
.content1 .cnt3 ._c1{top:668px;left:-360px;width:573px;height:846px}
.content1 .cnt3 ._c1 span{transform:translateX(-200px)}
.content1 .cnt3 ._c1 .hand{top:310px;left:440px;width:150px;height:210px;background-position:-1967px -310px;z-index:1}
.content1 .cnt3 ._c1 .body{top:0;left:0;width:100%;height:100%;;background-position:-1527px 0}
.content1 .cnt3 ._b1{top:473px;left:-258px;width:179px;height:203px;background-position:-1301px 0}
.content1 .cnt3 ._b2{top:1280px;left:-112px;width:141px;height:203px;background-position:-1959px -1295px;opacity:0.5}
.content1 .content_wrap .stripe{background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/spr_stripe_content1.png") no-repeat}
.content1 .cnt1 ._s1{top:297px;left:-320px;width:0;height:114px;background-position:0 -197px}
.content1 .cnt1.active ._s1{width:258px;transition:width 129ms linear}
.content1 .cnt1 ._s2{bottom:0;left:-62px;width:110px;height:0;background-position:-258px 100%}
.content1 .cnt1.active ._s2{height:310px;transition:height 310ms linear;transition-delay:129ms}
.content1 .cnt1 ._s3{top:100px;left:48px;width:0;height:91px;background-position:-368px 0}
.content1 .cnt1.active ._s3{width:1552px;transition:width 776ms linear;transition-delay:439ms}
.content1 .cnt2 ._s1{top:-120px;right:-320px;width:0;height:114px;background-position:100% -379px}
.content1 .cnt2.active ._s1{width:258px;transition:width 129ms linear}
.content1 .cnt2 ._s2{top:-120px;right:-62px;width:110px;height:0;background-position:-1552px -380px}
.content1 .cnt2.active ._s2{height:310px;transition:height 155ms linear;transition-delay:129ms}
.content1 .cnt2 ._s3{top:99px;right:48px;width:0;height:91px;background-position:100% -875px}
.content1 .cnt2.active ._s3{width:1170px;transition:width 585ms linear;transition-delay:284ms}
.content1 .cnt2 ._s4{top:100px;left:-55px;width:118px;height:0;background-position:-264px -600px}
.content1 .cnt2.active ._s4{height:1218px;transition:height 609ms linear;transition-delay:869ms}
.content1 .cnt3 ._s1{top:-43px;left:-55px;width:111px;height:0;background-position:-264px -1818px}
.content1 .cnt3.active ._s1{height:233px;transition:height 117ms linear}
.content1 .cnt3 ._s2{top:99px;left:56px;width:0;height:92px;background-position:-375px -1960px}
.content1 .cnt3.active ._s2{width:1170px;transition:width 585ms linear;transition-delay:117ms}
.content1 .cnt3 ._s3{top:100px;left:1226px;width:131px;height:0;background-position:-1545px -1961px}
.content1 .cnt3.active ._s3{height:1301px;transition:height 650ms linear;transition-delay:702ms}
.content1 .cnt3 ._s4{top:1310px;left:1357px;width:0;height:91px;background-position:-1676px -3171px}
.content1 .cnt3.active ._s4{width:244px;transition:width 122ms linear;transition-delay:1352ms}
.content1 .content_wrap .h4 span, .content1 .content_wrap .duration{backgrounD:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/spr_txt_content1.png") no-repeat}
.content1 .content_wrap .duration{top:127px;left:180px;width:921px;height:39px;background-position:0 -564px}
.content1 .content_wrap .h4{top:0;left:398px;width:485px;height:100px}
.content1 .content_wrap .h4 .txt{top:0;left:0;width:100%;height:100%;transform:translateY(-15px);opacity:0}
.content1 .content_wrap.active .h4 .txt{transform:translateY(0);opacity:1;transition:all 300ms ease}
.content1 .cnt2 .h4 .txt{background-position:0 -138px}
.content1 .cnt3 .h4 .txt{background-position:0 -273px}
.content1 .content_wrap .h4 .line{top:46px;left:-14px;width:513px;height:0;background-position:0 -438px;opacity:0}
.content1 .content_wrap.active .h4 .line{height:54px;opacity:1;transition:opacity 300ms ease, height 100ms linear;transition-delay:600ms}

/* content2 */
.content2{height:4169px}
.content2 .bg_cloud{top:-151px;bottom:auto;height:290px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_cloud_content2.png") center top no-repeat}
.content2 .bg_sky{top:139px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_sky_content2.jpg") center top no-repeat}
.content2 .title_wrap .ribbon .shape{background-position:0 -142px}
.content2 .title_wrap .ribbon .txt{background-position:-325px -52px}
.content2 .headline.small{top:179px;left:381px;width:501px;height:60px}
.content2 .title_wrap .small ._t1{width:51px;background-position:-730px -237px}
.content2 .title_wrap .small ._t2{left:55px;width:50px;background-position:-785px -237px}
.content2 .title_wrap .small ._t3{left:109px;width:50px;background-position:-839px -237px}
.content2 .title_wrap .small ._t4{left:163px;width:49px;background-position:-893px -237px}
.content2 .title_wrap .small ._t5{left:218px;width:48px;background-position:-948px -237px}
.content2 .title_wrap .small ._t6{left:270px;width:48px;background-position:-1000px -237px}
.content2 .title_wrap .small ._t7{left:340px;width:53px;background-position:-1070px -237px}
.content2 .title_wrap .small ._t8{left:394px;width:53px;background-position:-1124px -237px}
.content2 .title_wrap .small ._t9{left:448px;width:53px;background-position:-1178px -237px}
.content2.active .title_wrap .small ._t1{transition-delay:100ms}
.content2.active .title_wrap .small ._t2{transition-delay:125ms}
.content2.active .title_wrap .small ._t3{transition-delay:150ms}
.content2.active .title_wrap .small ._t4{transition-delay:175ms}
.content2.active .title_wrap .small ._t5{transition-delay:200ms}
.content2.active .title_wrap .small ._t6{transition-delay:225ms}
.content2.active .title_wrap .small ._t7{transition-delay:250ms}
.content2.active .title_wrap .small ._t8{transition-delay:275ms}
.content2.active .title_wrap .small ._t9{transition-delay:300ms}
.content2 .headline.big{top:242px;left:111px;width:1055px;height:114px}
.content2 .title_wrap .big ._t1{left:0;width:96px;background-position:-460px -300px}
.content2 .title_wrap .big ._t2{left:101px;width:96px;background-position:-561px -300px}
.content2 .title_wrap .big ._t3{left:197px;width:95px;background-position:-657px -300px}
.content2 .title_wrap .big ._t4{left:322px;width:95px;background-position:-782px -300px}
.content2 .title_wrap .big ._t5{left:420px;width:95px;background-position:-880px -300px}
.content2 .title_wrap .big ._t6{left:519px;width:95px;background-position:-979px -300px}
.content2 .title_wrap .big ._t7{left:642px;width:95px;background-position:-1102px -300px}
.content2 .title_wrap .big ._t8{left:739px;width:93px;background-position:-1199px -300px}
.content2 .title_wrap .big ._t9{left:834px;width:103px;background-position:-1294px -300px}
.content2 .title_wrap .big ._t10{left:935px;width:92px;background-position:-1399px -300px}
.content2 .title_wrap .big ._t11{left:1032px;width:23px;background-position:-1496px -300px}
.content2.active .title_wrap .big ._t1{transition-delay:350ms}
.content2.active .title_wrap .big ._t2{transition-delay:400ms}
.content2.active .title_wrap .big ._t3{transition-delay:450ms}
.content2.active .title_wrap .big ._t4{transition-delay:500ms}
.content2.active .title_wrap .big ._t5{transition-delay:550ms}
.content2.active .title_wrap .big ._t6{transition-delay:600ms}
.content2.active .title_wrap .big ._t7{transition-delay:650ms}
.content2.active .title_wrap .big ._t8{transition-delay:700ms}
.content2.active .title_wrap .big ._t9{transition-delay:750ms}
.content2.active .title_wrap .big ._t10{transition-delay:800ms}
.content2.active .title_wrap .big ._t11{transition-delay:850ms}
.content2 .lens_wrap span{background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/spr_lens_content2.png") no-repeat}
.content2 .lens_wrap .view{opacity:0;animation:viewMotion1 6s infinite linear}
.content2 .lens_wrap div{width:300px;height:315px}
.content2 .lens_wrap .lens{top:0;left:0;width:100%;height:100%}
.content2 .lens_wrap .lens.left{background-position:-434px 0}
.content2 .lens_wrap ._l4 .lens, .content2 .lens_wrap ._l7 .lens{opacity:0.6}
.content2 .lens_wrap .lens .view{animation:viewMotion1 6s infinite linear}
.content2 .lens_wrap ._l1, .content2 .lens_wrap ._l3, .content2 .lens_wrap ._l5, .content2 .lens_wrap ._l7{animation:lensMotion1 3s infinite linear}
.content2 .lens_wrap ._l2, .content2 .lens_wrap ._l4, .content2 .lens_wrap ._l6{animation:lensMotion2 3s infinite linear}
.content2 .lens_wrap ._l6, .content2 .lens_wrap ._l6 .view{animation-delay:300ms}
.content2 .lens_wrap ._l1{top:171px;left:-265px}
.content2 .lens_wrap ._l2{top:396px;left:1314px}
.content2 .lens_wrap ._l3{top:1104px;left:1116px}
.content2 .lens_wrap ._l4{top:1700px;left:-70px}
.content2 .lens_wrap ._l5{top:2148px;left:1340px}
.content2 .lens_wrap ._l6{top:2675px;left:-290px}
.content2 .lens_wrap ._l7{top:3273px;left:1146px}
.content2 .lens_wrap ._l1 .view{top:69px;left:79px;width:135px;height:123px;background-position:0 -350px}
.content2 .lens_wrap ._l2 .view{top:75px;left:96px;width:139px;height:108px;background-position:-228px -357px}
.content2 .lens_wrap ._l3 .view{top:51px;left:91px;width:105px;height:176px;background-position:-413px -334px}
.content2 .lens_wrap ._l4 .view, .content2 .lens_wrap ._l7 .view{top:64px;left:114px;width:93px;height:142px;background-position:-564px -357px}
.content2 .lens_wrap ._l5 .view{top:52px;left:29px;width:170px;height:164px;background-position:0 -536px}
.content2 .lens_wrap ._l6 .view{top:52px;left:92px;width:131px;height:172px;background-position:-245px -528px}
.content2 .cnt1{top:401px}
.content2 .cnt2{top:1817px}
.content2 .cnt3{top:3013px}
.content2 .content_wrap div.char{opacity:0}
.content2 .content_wrap.active div.char{opacity:1;transition:opacity 300ms linear}
.content2 .content_wrap .char span, .content2 span.char{background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/spr_char_content2.png") no-repeat}
.content2 .content_wrap .char .body{top:0;left:0;width:100%;height:100%;transform-origin:50% 100%}
.content2 .cnt1 ._c1{top:209px;left:170px;width:129px;height:123px;transform:scale(0)}
.content2 .cnt1.active ._c1{transform:scale(1);transition:opacity 300ms ease, transform 350ms cubic-bezier(0, 0.7, 0, 1.2);transition-delay:300ms}
.content2 .cnt1 ._c2{top:614px;left:-5px;width:297px;height:276px}
.content2 .cnt1 ._c3{top:1107px;left:1053px;width:256px;height:264px}
.content2 .cnt1 ._c2 .body{background-position:-137px 0;animation:charRotate1 3s infinite linear}
.content2 .cnt1 ._c2 .shadow{top:97px;left:113px;width:143px;height:207px;background-position:0 -293px}
.content2 .cnt1 ._c3 .body{background-position:-544px 0;animation:charRotate2 3s infinite linear;animation-delay:100ms}
.content2 .cnt1 ._c3 .shadow{top:136px;left:54px;width:162px;height:138px;background-position:-223px -362px}
.content2 .cnt3 .char{top:719px;width:384px;height:368px}
.content2 .cnt3 ._c1{left:-571px;background-position:0 -550px}
.content2 .cnt3 ._c2{left:-163px}
.content2 .cnt3 ._c2 .body{background-position:-434px -536px;transform-origin:50% 100%;animation:charRotate2 3s infinite linear}
.content2 .cnt3 ._c2 .shadow{top:299px;left:40px;width:326px;height:97px;background-position:-474px -382px}
.content2 .cnt3 ._c3{left:1340px;background-position:-863px -536px}
.content2 .content_wrap .bg_cnt{top:0;left:108px;width:1064px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/spr_news_content2.png") no-repeat;opacity:0;transform:translateY(30px)}
.content2 .content_wrap.active .bg_cnt{opacity:1;transform:translateY(0);transition:opacity 300ms linear, transform 500ms ease}
.content2 .cnt1 .bg_cnt{height:1341px}
.content2 .cnt2 .bg_cnt{height:1121px;background-position:-1064px 0}
.content2 .cnt3 .bg_cnt{height:1068px;background-position:-2128px 0}
.content2 .cnt3 .btn_rate{position:absolute;top:918px;left:656px;width:325px;height:49px;background-position:-318px -224px;opacity:0;transform:translateY(15px)}
.content2 .cnt3.active .btn_rate{opacity:1;transform:translateY(0);transition:opacity 300ms linear, transform 400ms ease;transition-delay:200ms}
.content2 .cnt3 .btn_rate:hover{background-position:-318px -301px}

/* content3 */
.content3{height:1866px;overflow:hidden}
.content3 .bg_section{background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_content3.jpg") center top no-repeat}
.content3 .title_wrap .ribbon .shape{background-position:0 -284px}
.content3 .title_wrap .ribbon .txt{background-position:-325px -103px}
.content3 .twinkle_wrap span{width:30px;height:31px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_twinkle_content3.png") no-repeat;transform:translateY(-500px);opacity:0}
.content3.active .twinkle_wrap span{transform:translateY(0);opacity:1;transition:opacity 300ms ease, transform 800ms ease}
.content3.active .twinkle_wrap .o5{filter:alpha(opacity=50);opacity:0.5}
.content3 .twinkle_wrap ._t1, .content3 .twinkle_wrap ._t2, .content3 .twinkle_wrap ._t3, .content3 .twinkle_wrap ._t4{top:116px}
.content3 .twinkle_wrap ._t5, .content3 .twinkle_wrap ._t6{top:239px}
.content3 .twinkle_wrap ._t7, .content3 .twinkle_wrap ._t8{top:295px}
.content3 .twinkle_wrap ._t9, .content3 .twinkle_wrap ._t10, .content3 .twinkle_wrap ._t11, .content3 .twinkle_wrap ._t12{top:386px}
.content3 .twinkle_wrap ._t13, .content3 .twinkle_wrap ._t14{top:502px}
.content3 .twinkle_wrap ._t15, .content3 .twinkle_wrap ._t16{top:639px}
.content3 .twinkle_wrap ._t17, .content3 .twinkle_wrap ._t18{top:825px}
.content3 .twinkle_wrap ._t19, .content3 .twinkle_wrap ._t20{top:1239px}
.content3 .twinkle_wrap ._t21, .content3 .twinkle_wrap ._t22{top:1562px}
.content3 .twinkle_wrap ._t1, .content3 .twinkle_wrap ._t9, .content3 .twinkle_wrap ._t15{left:-212px}
.content3 .twinkle_wrap ._t2{left:59px}
.content3 .twinkle_wrap ._t3{left:1195px}
.content3 .twinkle_wrap ._t4, .content3 .twinkle_wrap ._t12, .content3 .twinkle_wrap ._t16, .content3 .twinkle_wrap ._t20{left:1463px}
.content3 .twinkle_wrap ._t5, .content3 .twinkle_wrap ._t13, .content3 .twinkle_wrap ._t17, .content3 .twinkle_wrap ._t19, .content3 .twinkle_wrap ._t21{left:-100px}
.content3 .twinkle_wrap ._t6, .content3 .twinkle_wrap ._t14, .content3 .twinkle_wrap ._t18, .content3 .twinkle_wrap ._t22{left:1351px}
.content3 .twinkle_wrap ._t7{left:164px}
.content3 .twinkle_wrap ._t8{left:1090px}
.content3 .twinkle_wrap ._t10{left:26px}
.content3 .twinkle_wrap ._t11{left:1225px}
.content3.active .twinkle_wrap ._t1{transition-delay:1100ms}
.content3.active .twinkle_wrap ._t2{transition-delay:1050ms}
.content3.active .twinkle_wrap ._t3{transition-delay:1000ms}
.content3.active .twinkle_wrap ._t4{transition-delay:950ms}
.content3.active .twinkle_wrap ._t5{transition-delay:900ms}
.content3.active .twinkle_wrap ._t6{transition-delay:850ms}
.content3.active .twinkle_wrap ._t7{transition-delay:800ms}
.content3.active .twinkle_wrap ._t8{transition-delay:750ms}
.content3.active .twinkle_wrap ._t9{transition-delay:700ms}
.content3.active .twinkle_wrap ._t10{transition-delay:650ms}
.content3.active .twinkle_wrap ._t11{transition-delay:600ms}
.content3.active .twinkle_wrap ._t12{transition-delay:550ms}
.content3.active .twinkle_wrap ._t13{transition-delay:500ms}
.content3.active .twinkle_wrap ._t14{transition-delay:450ms}
.content3.active .twinkle_wrap ._t15{transition-delay:400ms}
.content3.active .twinkle_wrap ._t16{transition-delay:350ms}
.content3.active .twinkle_wrap ._t17{transition-delay:300ms}
.content3.active .twinkle_wrap ._t18{transition-delay:250ms}
.content3.active .twinkle_wrap ._t19{transition-delay:200ms}
.content3.active .twinkle_wrap ._t20{transition-delay:150ms}
.content3.active .twinkle_wrap ._t21{transition-delay:100ms}
.content3.active .twinkle_wrap ._t22{transition-delay:50ms}
.content3 .content_wrap{top:445px}
.content3 .content_wrap .bg_cnt, .content3 .content_wrap .caution, .content3 .content_wrap .ribbon{background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_cnt_content3.png") no-repeat}
.content3 .content_wrap .caution, .content3 .content_wrap .ribbon{opacity:0;z-index:1;transform:translateY(30px)}
.content3 .content_wrap .bg_cnt{top:-61px;left:108px;width:1064px;height:1401px;opacity:0;transform:translateY(30px)}
.content3 .content_wrap.active .bg_cnt, .content3 .content_wrap.active .caution, .content3 .content_wrap.active .ribbon{opacity:1;transform:translateY(0);transition:opacity 300ms linear, transform 500ms ease}
.content3 .char_wrap{top:672px}
.content3 .char_wrap span{width:896px;height:639px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/spr_char_content3.png") no-repeat;opacity:0}
.content3 .char_wrap ._c1{top:-100px;left:-549px;transform:translateX(-150px)}
.content3 .char_wrap ._c2{top:193px;left:950px;background-position:-1037px 0;transform:translateX(150px)}
.content3 .char_wrap.active span{transform:translateX(0);opacity:1;transition:opacity 300ms linear, transform 1s cubic-bezier(0, 1, 0.1, 1)}
.content3 .char_wrap.active ._c2{transition-delay:200ms}
.content3 .content_wrap .caution{top:438px;left:221px;width:838px;height:116px;background-position:-113px -499px}
.content3 .content_wrap .ribbon{top:787px;left:204px;width:873px;height:64px;background-position:-96px -848px}
.content3 .headline.small{top:179px;left:381px;width:501px;height:66px}
.content3 .title_wrap .small ._t1{left:0;width:59px;background-position:-473px -469px}
.content3 .title_wrap .small ._t2{left:59px;width:51px;background-position:-532px -469px}
.content3 .title_wrap .small ._t3{left:110px;width:52px;background-position:-583px -469px}
.content3 .title_wrap .small ._t4{left:110px;width:52px;background-position:-583px -469px}
.content3 .title_wrap .small ._t5{left:162px;width:51px;background-position:-635px -469px}
.content3 .title_wrap .small ._t6{left:162px;width:51px;background-position:-635px -469px}
.content3 .title_wrap .small ._t7{left:213px;width:53px;background-position:-686px -469px}
.content3 .title_wrap .small ._t8{left:266px;width:62px;background-position:-739px -469px}
.content3 .title_wrap .small ._t9{left:328px;width:54px;background-position:-801px -469px}
.content3 .title_wrap .small ._t10{left:382px;width:65px;background-position:-855px -469px}
.content3 .title_wrap .small ._t11{left:447px;width:53px;background-position:-920px -469px}
.content3 .title_wrap .small ._t12{left:500px;width:59px;background-position:-973px -469px}
.content3.active .title_wrap .small ._t1{transition-delay:100ms}
.content3.active .title_wrap .small ._t2{transition-delay:125ms}
.content3.active .title_wrap .small ._t3{transition-delay:150ms}
.content3.active .title_wrap .small ._t4{transition-delay:175ms}
.content3.active .title_wrap .small ._t5{transition-delay:200ms}
.content3.active .title_wrap .small ._t6{transition-delay:225ms}
.content3.active .title_wrap .small ._t7{transition-delay:250ms}
.content3.active .title_wrap .small ._t8{transition-delay:275ms}
.content3.active .title_wrap .small ._t9{transition-delay:300ms}
.content3.active .title_wrap .small ._t10{transition-delay:325ms}
.content3.active .title_wrap .small ._t11{transition-delay:350ms}
.content3.active .title_wrap .small ._t12{transition-delay:375ms}
.content3 .headline.big{top:245px;left:368px;width:588px;height:138px}
.content3 .title_wrap .big ._t1{left:0;width:114px;background-position:-460px -534px}
.content3 .title_wrap .big ._t2{left:114px;width:142px;background-position:-574px -534px}
.content3 .title_wrap .big ._t3{left:256px;width:106px;background-position:-716px -534px}
.content3 .title_wrap .big ._t4{left:362px;width:111px;background-position:-822px -534px}
.content3 .title_wrap .big ._t5{left:473px;width:110px;background-position:-933px -534px}
.content3.active .title_wrap .big ._t1{transition-delay:425ms}
.content3.active .title_wrap .big ._t2{transition-delay:475ms}
.content3.active .title_wrap .big ._t3{transition-delay:525ms}
.content3.active .title_wrap .big ._t4{transition-delay:575ms}
.content3.active .title_wrap .big ._t5{transition-delay:625ms}
.content3 .light_wrap{top:0;height:100%}
.content3 .light_wrap span{height:0;opacity:0}
.content3.active .light_wrap span{opacity:1;transition:opacity 300ms ease}
.content3 .light_wrap ._l1{bottom:-126px;left:-320px;width:1920px;height:1992px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_light1_content3.png") center bottom no-repeat}
.content3 .light_wrap ._l2{bottom:779px;left:-149px;width:1574px;height:1087px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_light2_content3.png") center bottom no-repeat}
.content3.active .light_wrap ._l2{transition-delay:200ms}
.content3 .light_wrap ._l3{bottom:779px;left:88px;width:1102px;height:1087px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_light3_content3.png") center bottom no-repeat}
.content3.active .light_wrap ._l3{transition-delay:400ms}

/* content4 */
.content4{height:2516px}
.content4 .bg_section{background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_content4.jpg") center top no-repeat}
.content4 .title_wrap .ribbon .shape{background-position:0 -426px}
.content4 .title_wrap .ribbon .txt{background-position:-325px -155px}
.content4 .title_wrap .headline{top:198px;left:277px;width:726px;height:126px}
.content4 .headline ._t1{left:0;width:107px;background-position:-1077px -468px}
.content4 .headline ._t2{left:107px;width:97px;background-position:-1184px -468px}
.content4 .headline ._t3{left:204px;width:106px;background-position:-1281px -468px}
.content4 .headline ._t4{left:324px;width:103px;background-position:-1401px -468px}
.content4 .headline ._t5{left:427px;width:94px;background-position:-1504px -468px}
.content4 .headline ._t6{left:521px;width:102px;background-position:-1598px -468px}
.content4 .headline ._t7{left:623px;width:103px;background-position:-1700px -468px}
.content4.active .title_wrap .headline ._t1{transition-delay:100ms}
.content4.active .title_wrap .headline ._t2{transition-delay:150ms}
.content4.active .title_wrap .headline ._t3{transition-delay:200ms}
.content4.active .title_wrap .headline ._t4{transition-delay:250ms}
.content4.active .title_wrap .headline ._t5{transition-delay:300ms}
.content4.active .title_wrap .headline ._t6{transition-delay:350ms}
.content4.active .title_wrap .headline ._t7{transition-delay:400ms}
.content4 .content_wrap{top:374px}
.content4 .content_wrap .bg_cnt{top:-49px;left:77px;width:1126px;height:2076px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_cnt_content4.png") no-repeat;opacity:0;transform:translateY(30px)}
.content4 .content_wrap.active .bg_cnt{opacity:1;transform:translateY(0);transition:opacity 300ms linear, transform 500ms ease}
.content4 .monster_wrap span{background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/spr_monster_content4.png") no-repeat}
.content4 .monster_wrap .hole{top:0;left:0;width:100%;height:100%}
.content4 .monster_wrap .cover{left:0;width:100%}
.content4 .monster_wrap ._m1{top:172px;left:-106px;width:313px;height:98px}
.content4 .monster_wrap ._m1 .cover{top:56px;width:257px;height:121px;background-position:0 -179px}
.content4 .monster_wrap ._m1 .monster{top:-90px;left:39px;width:278px;height:216px;background-position:0 -484px;animation:catchMotion1 4s infinite linear}
.content4 .monster_wrap ._m2{top:210px;left:1393px;width:156px;height:49px}
.content4 .monster_wrap ._m2 .hole{background-position:-347px 0}
.content4 .monster_wrap ._m2 .cover{top:28px;height:118px;background-position:-347px -237px}
.content4 .monster_wrap ._m2 .monster{top:-8px;left:22px;width:130px;height:123px;background-position:-359px -575px;animation:catchMotion2 4s infinite linear}
.content4 .monster_wrap ._m3{top:509px;left:1196px;width:313px;height:98px}
.content4 .monster_wrap ._m3 .hole{background-position:-539px 0}
.content4 .monster_wrap ._m3 .cover{top:55px;width:300px;height:188px;background-position:-539px -188px}
.content4 .monster_wrap ._m3 .monster{top:-113px;left:41px;width:298px;height:276px;background-position:-570px -424px;animation:catchMotion3 5s infinite linear}
.content4 .monster_wrap ._m4{top:689px;left:-268px;width:156px;height:49px}
.content4 .monster_wrap ._m4 .hole{background-position:-884px 0}
.content4 .monster_wrap ._m4 .cover{top:28px;height:95px;background-position:-884px -205px}
.content4 .monster_wrap ._m4 .monster{left:10px;width:136px;height:123px;background-position:-894px -577px;animation:catchMotion4 3s infinite linear}
.content4 .monster_wrap ._m5{top:948px;left:1482px;width:156px;height:49px}
.content4 .monster_wrap ._m5 .hole{background-position:-1078px 0}
.content4 .monster_wrap ._m5 .cover{top:28px;height:140px;background-position:-1078px -205px}
.content4 .monster_wrap ._m5 .monster{top:-94px;left:32px;width:98px;height:178px;background-position:-1124px -522px;animation:catchMotion5 3s infinite linear}
.content4 .monster_wrap ._m6{top:1188px;left:-40px;width:156px;height:49px}
.content4 .monster_wrap ._m6 .hole{background-position:-1288px 0}
.content4 .monster_wrap ._m6 .cover{top:22px;height:138px;background-position:-1288px -205px}
.content4 .monster_wrap ._m6 .monster{top:-54px;left:29px;width:112px;height:126px;background-position:-1310px -574px;animation:catchMotion6 5s infinite linear}
.content4 .monster_wrap ._m7{top:1382px;left:1099px;width:313px;height:98px}
.content4 .monster_wrap ._m7 .hole{background-position:-1530px 0}
.content4 .monster_wrap ._m7 .cover{top:56px;height:167px;background-position:-1530px -150px}
.content4 .monster_wrap ._m7 .monster{top:-141px;left:36px;width:263px;height:344px;background-position:-1555px -356px;animation:catchMotion7 3s infinite linear}
.content4 .monster_wrap ._m8{top:1668px;left:-320px;width:279px;height:98px}
.content4 .monster_wrap ._m8 .hole{background-position:-1916px 0}
.content4 .monster_wrap ._m8 .cover{top:56px;width:329px;height:275px;background-position:-1916px -143px}
.content4 .monster_wrap ._m8 .monster{top:0;left:15px;width:298px;height:276px;background-position:-1941px -422px;animation:catchMotion8 3s infinite linear}
.content4 .monster_wrap ._m9{top:2153px;left:1396px;width:156px;height:49px}
.content4 .monster_wrap ._m9 .hole{background-position:-2264px 0}
.content4 .monster_wrap ._m9 .cover{top:28px;height:117px;background-position:-2264px -188px}
.content4 .monster_wrap ._m9 .monster{top:-54px;left:29px;width:112px;height:126px;background-position:-2320px -573px;animation:catchMotion9 4s infinite linear}

/* content5 */
.content5{height:4093px}
.content5 .bg_section{background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_content5.jpg") center top no-repeat}
.content5 .bg_stain{position:absolute;top:1556px;left:-320px;width:1872px;height:1308px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_stain_content5.png") center top no-repeat;z-index:1}
.content5 .title_wrap .ribbon .shape{background-position:0 -568px}
.content5 .title_wrap .ribbon .txt{background-position:-325px -206px}
.content5 .title_wrap .headline{top:198px;left:489px;width:311px;height:125px}
.content5 .headline ._t1{left:0;width:104px;background-position:-1077px -610px}
.content5 .headline ._t2{left:104px;width:94px;background-position:-1181px -610px}
.content5 .headline ._t3{left:198px;width:113px;background-position:-1275px -610px}
.content5.active .title_wrap .headline ._t1{transition-delay:100ms}
.content5.active .title_wrap .headline ._t2{transition-delay:150ms}
.content5.active .title_wrap .headline ._t3{transition-delay:200ms}
.content5 .cnt1, .content5 .monster_wrap{z-index:1}
.content5 .cnt1{top:373px}
.content5 .cnt1 .bg_cnt{top:0;left:80px;width:1120px;height:2584px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_cnt1_content5.png") no-repeat;opacity:0;transform:translateY(30px)}
.content5 .content_wrap.active .bg_cnt{opacity:1;transform:translateY(0);transition:opacity 300ms linear, transform 500ms ease}
.content5 .monster_wrap{top:2237px}
.content5 .monster_wrap span{background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/spr_monster_content5.png") no-repeat}
.content5 .monster_wrap .monster{top:0;left:0;width:100%;height:100%}
.content5 .monster_wrap .grass{width:258px;height:41px;background-position:-862px -319px}
.content5 .monster_wrap ._m1{top:0;left:-437px;width:627px;height:553px}
.content5 .monster_wrap ._m1 .monster{opacity:0;transform:translateX(-150px)}
.content5 .monster_wrap ._m1.active .monster{transform:translateX(0);opacity:1;transition:opacity 300ms linear, transform 1s cubic-bezier(0, 1, 0.1, 1)}
.content5 .monster_wrap ._m1 .grass{bottom:-3px;left:228px}
.content5 .monster_wrap ._m2{top:-267px;left:1264px;width:240px;height:267px}
.content5 .monster_wrap ._m2 .monster{background-position:-878px 0;animation:doongdoong2 1.2s infinite alternate ease}
.content5 .monster_wrap ._m2 .grass{left:-16px;top:226px}
.content5 .cnt2{top:3005px}
.content5 .cnt2 .bg_cnt{top:0;left:491px;width:297px;height:177px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_cnt2_content5.png") no-repeat}
.content5 .cnt2 .detail, .content5 .cnt2 .circle{opacity:0}
.content5 .cnt2 .detail{top:244px;left:349px;width:582px;height:563px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_detail_content5_v2.png") no-repeat}
.content5 .cnt2.active .detail{opacity:1;transition:opacity 300ms 400ms ease}
.content5 .cnt2 ._c1{top:-526px;left:-445px;width:2171px;height:2171px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_circle1_content5.png") no-repeat;transform:scale(0.7)}
.content5 .cnt2 ._c2{top:-252px;left:-171px;width:1623px;height:1623px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_circle2_content5.png") no-repeat;transform:scale(0.6)}
.content5 .cnt2 ._c3{top:16px;left:97px;width:1086px;height:1086px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_circle3_content5.png") no-repeat;transform:scale(0.6)}
.content5 .cnt2 ._c4{top:198px;left:279px;width:722px;height:722px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_circle4_content5.png") no-repeat;transform:scale(0)}
.content5 .cnt2.active .circle{opacity:1;transform:scale(1);transition:opacity 300ms linear, transform 600ms ease}
.content5 .cnt2.active ._c1{transition-delay:350ms}
.content5 .cnt2.active ._c2{transition-delay:250ms}
.content5 .cnt2.active ._c3{transition-delay:130ms}
.content5 .cnt2 .item, .content5 .cnt2 ._i1 .window{background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/spr_item_content5.png") no-repeat}
.content5 .cnt2 .item{width:218px;height:221px;opacity:0}
.content5 .cnt2 ._i1{top:77px;left:113px;width:248px;height:248px}
.content5 .cnt2 ._i1 .item{width:100%;height:100%;transform:translate(150px, 50px)}
.content5 .cnt2 ._i1 .window, .content5 .cnt2 ._i1 .gif{opacity:0}
.content5 .cnt2.active ._i1 .window, .content5 .cnt2.active ._i1 .gif{opacity:1}
.content5 .cnt2 ._i1 .window{top:-88px;left:-105px;width:481px;height:126px;background-position:0 -574px;transform:translateY(15px)}
.content5 .cnt2.active ._i1 .window{transform:translateY(0);transition:opacity 300ms ease, transform 500ms ease;transition-delay:900ms}
.content5 .cnt2 ._i1 .gif{top:70px;right:-57px;transform:scale(0)}
.content5 .cnt2.active ._i1 .gif{transform:scale(1);transition:opacity 300ms ease, transform 350ms cubic-bezier(0, 0.3, 0, 1.1);transition-delay:700ms}
.content5 .cnt2 ._i2, .content5 .cnt2 ._i6{top:304px}
.content5 .cnt2 ._i3, .content5 .cnt2 ._i7{top:568px}
.content5 .cnt2 ._i4, .content5 .cnt2 ._i8{top:783px}
.content5 .cnt2 ._i2{left:4px;background-position:-284px 0;transform:translate(200px, 25px)}
.content5 .cnt2 ._i3{left:4px;background-position:-538px 0;transform:translate(200px, -25px)}
.content5 .cnt2 ._i4{left:149px;background-position:-808px 0;transform:translate(150px, -50px)}
.content5 .cnt2 ._i5{top:84px;left:911px;background-position:0 -273px;transform:translate(-200px, 25px)}
.content5 .cnt2 ._i6{left:1056px;background-position:-284px -273px;transform:translate(-200px, 25px)}
.content5 .cnt2 ._i7{left:1056px;background-position:-538px -275px;transform:translate(-200px, -25px)}
.content5 .cnt2 ._i8{left:911px;background-position:-808px -275px;transform:translate(-200px, -50px)}
.content5 .cnt2.active .item{opacity:1;transform:translate(0, 0);transition:opacity 300ms ease, transform 600ms cubic-bezier(0, 0.3, 0, 1.1);-ms-transition:opacity 300ms linear, transform 500ms ease}
.content5 .cnt2.active ._i1 .item, .content5 .cnt2.active ._i5{transition-delay:450ms}
.content5 .cnt2.active ._i2, .content5 .cnt2.active ._i6{transition-delay:550ms}
.content5 .cnt2.active ._i3, .content5 .cnt2.active ._i7{transition-delay:650ms}
.content5 .cnt2.active ._i4, .content5 .cnt2.active ._i8{transition-delay:750ms}
.content5 .badge_wrap span{width:335px;height:336px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/spr_badge_content5.png") no-repeat;opacity:0;transform:scale(0)}
.content5.active .badge_wrap span{opacity:1;transform:scale(1);transition:opacity 300ms ease, transform 400ms cubic-bezier(0, 0.7, 0, 1.1)}
.content5 .badge_wrap ._b1{top:358px;left:-379px}
.content5 .badge_wrap ._b2{top:43px;left:-81px;background-position:-426px 0}
.content5 .badge_wrap ._b3{top:43px;left:1043px;background-position:-853px 0}
.content5 .badge_wrap ._b4{top:358px;left:1341px;background-position:-1279px 0}
.content5.active .badge_wrap ._b1{transition-delay:400ms}
.content5.active .badge_wrap ._b2{transition-delay:560ms}
.content5.active .badge_wrap ._b3{transition-delay:480ms}
.content5.active .badge_wrap ._b4{transition-delay:640ms}
.content5 .light_wrap span{top:0;opacity:0}
.content5.active .light_wrap span{opacity:1;transition:opacity 300ms ease}
.content5 .light_wrap ._l1{left:-320px;width:1920px;height:1173px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_light1_content5.png") no-repeat}
.content5 .light_wrap ._l2{left:-150px;width:1574px;height:1087px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_light2_content5.png") no-repeat}
.content5.active .light_wrap ._l2{transition-delay:200ms}

/* quick */
#quick{display:none;position:fixed;top:50%;right:20px;width:59px;z-index:100;margin-top:-182px}
#quick a{position:relative;display:block;background:rgba(0,0,0,0.3)}
#quick li{width:51px;height:51px;margin-bottom:8px}
#quick li a{float:right;height:100%;border-radius:6px}
#quick li a span{width:27px;height:100%;margin:0 12px;transition:width 300ms ease}
#quick .qu1 .txt{background-position:-20px -180px}
#quick .qu2 .txt{background-position:-20px -239px}
#quick .qu3 .txt{background-position:-20px -298px}
#quick .qu4 .txt{background-position:-20px -357px}
#quick .qu5 .txt{background-position:-20px -416px}
#quick .qu1.on .txt, #quick .qu1 a:hover .txt{background-position:-119px -180px}
#quick .qu2.on .txt, #quick .qu2 a:hover .txt{background-position:-93px -239px}
#quick .qu3.on .txt, #quick .qu3 a:hover .txt{background-position:-185px -298px}
#quick .qu4.on .txt, #quick .qu4 a:hover .txt{background-position:-152px -357px}
#quick .qu5.on .txt, #quick .qu5 a:hover .txt{background-position:-221px -416px}
#quick .qu1.on a span, #quick .qu1 a:hover span{width:152px}
#quick .qu2.on a span, #quick .qu2 a:hover span{width:178px}
#quick .qu3.on a span, #quick .qu3 a:hover span{width:86px}
#quick .qu4.on a span, #quick .qu4 a:hover span{width:119px}
#quick .qu5.on a span, #quick .qu5 a:hover span{width:50px}
#quick .qu1.on a, #quick .qu1 a:hover{background-color:#8259c8}
#quick .qu2.on a, #quick .qu2 a:hover{background-color:#a354d0}
#quick .qu3.on a, #quick .qu3 a:hover{background-color:#f09221}
#quick .qu4.on a, #quick .qu4 a:hover{background-color:#0558ad}
#quick .qu5.on a, #quick .qu5 a:hover{background-color:#33770b}
#quick .btn_top{width:67px;height:67px;border-radius:100%;margin-left:-8px}
#quick .btn_top:hover{background-color:#252525}
#quick .btn_top span{position:absolute;width:100%;height:100%;background-position:0 -477px}

/* footer */
#footer{background:#c8c8c8}
#footer .container{height:52px;padding-top:46px}
#footer .copyright{width:459px;height:18px;background-position:-290px 0;margin:0 auto}

/* layerpop */
.layerpop{display:none;position:fixed;top:0;left:0;right:0;bottom:0;height:100%;z-index:9999999;overflow:hidden;overflow-y:scroll;letter-spacing:-1px}
.layerpop.show{display:block;filter:alpha(opacity=0);opacity:0}
.layerpop .dimmed{position:absolute;top:0;left:0;right:0;width:100%;min-height:100%;background:#000;filter:alpha(opacity=85);opacity:0.85}
.layerpop.scrollpop .pop_content{top:40px;margin-top:0 !important;margin-bottom:40px}
.layerpop.scrollpop .dimmed{padding-bottom:80px}
.layerpop .pop_content{position:absolute;top:50%;left:50%;width:1016px;height:1260px;margin:-630px 0 0 -508px}
.layerpop .pop_body{position:relative;height:100%;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1114_event_370C29D25F27320C/bg_pop.png") no-repeat}
.layerpop .btn_close{position:absolute;top:-10px;right:-15px;width:90px;height:90px;background-position:-710px -54px}
.layerpop .btn_close:hover{background-position:-710px -160px}

@keyframes link1Hover{
    0%{transform:translateY(0)}
    25%{transform:translateY(-5px)}
    50%{transform:translateY(0)}
    75%{transform:translateY(5px)}
    100%{transform:translateY(0)}
}

@keyframes link2Hover{
    0%{transform:translateY(0)}
    40%{transform:translateY(8px)}
    70%{transform:translateY(-15px)}
    100%{transform:translateY(0)}
}

@keyframes link1Twinkle{
    0%{transform:scale(1)}
    20%{transform:scale(1.2)}
    80%{transform:scale(0.8)}
    100%{transform:scale(1)}
}

@keyframes doongdoong1{
    100%{transform:translateY(-50px)}
}

@keyframes doongdoong2{
    100%{transform:translateY(-80px) rotate(-5deg)}
}

@keyframes charRotate1{
    0%{transform:rotate(0)}
    25%{transform:rotate(-5deg)}
    50%{transform:rotate(0deg)}
    75%{transform:rotate(5deg)}
    100%{transform:rotate(0)}
}

@keyframes charRotate2{
    0%{transform:rotate(0)}
    25%{transform:rotate(5deg)}
    50%{transform:rotate(0deg)}
    75%{transform:rotate(-5deg)}
    100%{transform:rotate(0)}
}

@keyframes catchMotion1{
    0%{transform:translateY(0)}
    5%{transform:translateY(50px)}
    60%{transform:translateY(50px)}
    65%{transform:translateY(-50px)}
    95%{transform:translateY(-50px)}
    100%{transform:translateY(0)}
}

@keyframes catchMotion2{
    0%{transform:translateY(0)}
    7%{transform:translateY(-50px)}
    80%{transform:translateY(-50px)}
    90%{transform:translateY(20px)}
    95%{transform:translateY(20px)}
    100%{transform:translateY(0)}
}

@keyframes catchMotion2{
    0%{transform:translateY(0)}
    15%{transform:translateY(-50px)}
    80%{transform:translateY(-50px)}
    90%{transform:translateY(20px)}
    95%{transform:translateY(20px)}
    100%{transform:translateY(0)}
}

@keyframes catchMotion3{
    0%{transform:translateY(0)}
    50%{transform:translateY(0)}
    55%{transform:translateY(50px)}
    60%{transform:translateY(50px)}
    65%{transform:translateY(0)}
    100%{transform:translateY(0)}
}

@keyframes catchMotion4{
    0%{transform:translateY(0)}
    40%{transform:translateY(0)}
    50%{transform:translateY(-60px)}
    80%{transform:translateY(-60px)}
    90%{transform:translateY(0)}
    100%{transform:translateY(0)}
}

@keyframes catchMotion5{
    0%{transform:translateY(0)}
    50%{transform:translateY(0)}
    60%{transform:translateY(70px)}
    70%{transform:translateY(70px)}
    80%{transform:translateY(0)}
    100%{transform:translateY(0)}
}

@keyframes catchMotion6{
    0%{transform:translateY(0)}
    5%{transform:translateY(-30px)}
    60%{transform:translateY(-30px)}
    65%{transform:translateY(20px)}
    95%{transform:translateY(20px)}
    100%{transform:translateY(0)}
}

@keyframes catchMotion7{
    0%{transform:translateY(0)}
    5%{transform:translateY(20px)}
    45%{transform:translateY(20px)}
    55%{transform:translateY(-40px)}
    95%{transform:translateY(-40px)}
    100%{transform:translateY(0)}
}

@keyframes catchMotion8{
    0%{transform:translateY(0)}
    30%{transform:translateY(0)}
    40%{transform:translateY(-100px)}
    70%{transform:translateY(-100px)}
    80%{transform:translateY(0)}
    100%{transform:translateY(0)}
}

@keyframes catchMotion9{
    0%{transform:translateY(0)}
    10%{transform:translateY(0)}
    17%{transform:translateY(60px)}
    70%{transform:translateY(60px)}
    77%{transform:translateY(0)}
    100%{transform:translateY(0)}
}

@keyframes lensMotion1{
    0%{transform:translate(0,0)}
    15%{transform:translate(30px, 30px)}
    70%{transform:translate(30px, 30px)}
    90%{transform:translate(-10px, 10px)}
    100%{transform:translate(0, 0)}
}

@keyframes viewMotion1{
    0%{opacity:0}
    60%{opacity:0;transform:scale(0.9)}
    63%{opacity:1;transform:scale(1.05)}
    64%{opacity:1;transform:scale(1)}
    80%{opacity:1}
    95%{opacity:1}
    100%{opacity:0}
}

@keyframes lensMotion2{
    0%{transform:translate(0,0)}
    15%{transform:translate(-30px, -30px)}
    70%{transform:translate(-30px, -30px)}
    90%{transform:translate(15px, -15px)}
    100%{transform:translate(0, 0)}
}

@keyframes viewMotion2{
    0%{opacity:0}
    60%{opacity:0;transform:scale(0.9)}
    65%{opacity:1;transform:scale(1)}
    80%{opacity:1}
    95%{opacity:1}
    100%{opacity:0}
}