@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:#95b9e4;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:1277px;max-width:1921px;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;left:0;width:99.99%;padding-left:0.01%}

/* common */
.gnbWrapper{min-width:1277px !important}
.section .object_wrap{position:absolute;left:0;width:100%}
.section .object_wrap div, .section .object_wrap span{position:absolute}
#header h1 a, #header .util button, #header .util li a, #header .nav li a span, .content .btn_update span, .content3 .content_wrap .list .btn, #wrap .btn_top{display:block;text-indent:-9999px;overflow:hidden;background:url("https://ssl.nexon.com/s2/game/tales/event/2020/0109_update_F6E356C674310393/spr_btn.png") no-repeat}
.bg_content{position:absolute;top:0;left:0;width:100%;height:100%}
.section .box{position:absolute}
.content .box{top:0;left:50%;width:1820px;height:100%;margin-left:-910px}

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

/* section wrap */
.section_wrap{position:relative;transform-origin:50% 0;padding-top:132px}
.section_wrap .bg_wrap{position:absolute;top:0;left:50%;width:1921px;height:1105px;background:url("https://ssl.nexon.com/s2/game/tales/event/2020/0109_update_F6E356C674310393/bg_wrap.jpg") center top no-repeat;margin-left:-960px}

/* header */
#header{position:absolute;top:0;left:0;width:100%;z-index:100;min-width:1280px;transform-origin:0 0}
#header .bg{position:absolute;top:0;left:0;right:0;height:0;background:#2f2f2f}
#header h1{position:absolute;top:17px;left:50px}
#header h1 a{width:238px;height:102px}
#header .util{position:absolute;top:31px;right:50px;padding-left:213px}
#header .util ul:after{content:"";display:block;clear:both}
#header .util li{float:left;margin-left:3px}
#header .util li a{position:relative;display:block;width:41px;height:47px}
#header .util li a span{position:absolute;width:53px;height:57px}
#header .util li .btn_home, .fixed #header .util li .btn_home:hover{background-position:-513px 0}
#header .util li .btn_fb, .fixed #header .util li .btn_fb:hover{background-position:-557px 0}
#header .util li .btn_tw, .fixed #header .util li .btn_tw:hover{background-position:-601px 0}
#header .util li .btn_home:hover{background-position:-888px 0}
#header .util li .btn_fb:hover{background-position:-932px 0}
#header .util li .btn_tw:hover{background-position:-976px 0}
#header .util .btn_game{position:absolute;top:10px;left:0;width:195px;height:24px;background-position:-297px -10px}
#header .util .btn_game:hover{background-position:-672px -10px}
#header .util .btn_today{width:142px;height:22px;background-position:-500px -53px;margin:4px 0 0 -10px}
#header .nav{display:none;width:722px;margin:0 auto}
#header .nav ul:after{content:"";display:block;clear:both}
#header .nav li{float:left;width:172px;margin-right:92px}
#header .nav li a{display:block;position:relative;height:56px;padding-top:34px}
#header .nav li .txt{height:21px}
#header .nav li .txt, .fixed #header .util li a, .fixed #header .util button{filter:alpha(opacity=43);opacity:0.43}
#header .nav li a:hover .txt, #header .nav .on .txt, .fixed #header .util li a:hover, .fixed #header .util button:hover{opacity:1;filter:alpha(opacity=100)}
#header .nav li .over{position:absolute;left:50%;bottom:-17px;width:60px;height:40px;background-position:-1349px -633px;margin-left:-30px;opacity:0;filter:alpha(opacity=0);transform:translateY(-17px);transition:all 300ms ease}
#header .nav .on .over{opacity:1;filter:alpha(opacity=100);transform:translateY(0)}
#header .nav .nav1{margin-right:92px}
#header .nav .nav2{padding-right:22px}
#header .nav .nav3{margin-right:0}
#header .nav .nav1 .txt{background-position:-475px -643px}
#header .nav .nav2 .txt{background-position:-739px -643px}
#header .nav .nav3 .txt{background-position:-1025px -643px}
.fixed #header{position:fixed}
.fixed #header h1{top:10px}
.fixed #header h1 a{width:159px;height:68px;background-position:-237px -74px}
.fixed #header .bg{height:90px;transition:height 300ms ease}
.fixed #header .nav{display:block}
.fixed #header .util{top:20px;padding-left:157px}
.fixed #header .util .btn_today{display:none}
.fixed #header .util .btn_game{top:16px;width:146px;height:18px;background-position:-1083px -16px}

/* intro */
.intro{height:974px;margin-bottom:78px}
.intro .char_wrap span, .intro .title_wrap span{opacity:0}
.intro.load .char_wrap span, .intro.load .title_wrap span{opacity:1;transform:translateX(0) !important}
.intro .box{bottom:0;left:50%;width:0;height:0;margin-left:0;transition:all 700ms ease-out}
.intro.load .box{left:50%;width:1820px;height:100%;margin-left:-910px}
.intro .box span{position:absolute;top:0;left:0;right:0;bottom:0}
.intro .box ._v{border-top:1px solid #fff;;border-bottom:1px solid #fff}
.intro .box ._h{border-left:1px solid #fff;;border-right:1px solid #fff;z-index:1}
.intro .char_wrap{height:973px}
.intro .char_wrap span{bottom:0;opacity:0;transition:opacity 300ms linear, transform 1s cubic-bezier(0, 0.6, 0.1, 1)}
.intro .char_wrap ._c1{left:-66px;width:1789px;height:956px;background:url("https://ssl.nexon.com/s2/game/tales/event/2020/0109_update_F6E356C674310393/bg_char1_intro.png") no-repeat;transform:translateX(-50px);transition-delay:550ms}
.intro .char_wrap ._c2{left:-427px;width:1567px;height:1105px;background:url("https://ssl.nexon.com/s2/game/tales/event/2020/0109_update_F6E356C674310393/bg_char2_intro.png") no-repeat;transform:translateX(50px);transition-delay:640ms}
.intro .char_wrap ._c3{left:594px;width:1021px;height:893px;background:url("https://ssl.nexon.com/s2/game/tales/event/2020/0109_update_F6E356C674310393/bg_char3_intro.png") no-repeat;transform:translateX(-50px);transition-delay:730ms}
.intro .char_wrap ._c4{left:-269px;width:907px;height:586px;background:url("https://ssl.nexon.com/s2/game/tales/event/2020/0109_update_F6E356C674310393/bg_char4_intro.png") no-repeat;transform:translateX(50px);transition-delay:820ms}
.intro .char_wrap ._c5{left:924px;width:707px;height:595px;background:url("https://ssl.nexon.com/s2/game/tales/event/2020/0109_update_F6E356C674310393/bg_char5_intro.png") no-repeat;transform:translateX(-50px);transition-delay:910ms}
.intro .title_wrap div span{background:url("https://ssl.nexon.com/s2/game/tales/event/2020/0109_update_F6E356C674310393/spr_title_intro.png") no-repeat}
.intro .title_wrap .headline span, .intro .title_wrap .small span{top:0;height:100%}
.intro .title_wrap .headline{top:398px;left:-76px;width:1381px;height:224px}
.intro .title_wrap .headline span{transform:translateX(200px);transition:opacity 300ms linear, transform 700ms cubic-bezier(0, 0.6, 0.1, 1)}
.intro .title_wrap .headline ._t1{left:0;width:520px;transition-delay:1.05s}
.intro .title_wrap .headline ._t2{left:530px;width:402px;background-position:-530px 0;transition-delay:1.15s}
.intro .title_wrap .headline ._t3{left:938px;width:443px;background-position:-938px 0;transition-delay:1.25s}
.intro .title_wrap .small{top:634px;left:454px;width:751px;height:89px}
.intro .title_wrap .small span{transform:translateX(-150px);transition:opacity 300ms linear, transform 500ms cubic-bezier(0, 0.5, 0.1, 1)}
.intro .title_wrap .small ._t1{left:0;width:225px;background-position:0 -256px;transition-delay:1.6s}
.intro .title_wrap .small ._t2{left:214px;width:61px;background-position:-246px -256px;transition-delay:1.55s}
.intro .title_wrap .small ._t3{left:267px;width:276px;background-position:-330px -256px;transition-delay:1.5s}
.intro .title_wrap .small ._t4{left:570px;width:181px;background-position:-633px -256px;transition-delay:1.45s}
.intro .title_wrap .date{top:744px;left:416px;width:896px;height:67px}
.intro .title_wrap .date span{transition:all 300ms ease}
.intro .title_wrap .date .bg{top:0;left:0;width:100%;height:100%;background-position:0 -391px;transform:translateX(100px);transition-delay:1.85s}
.intro .title_wrap .date .txt{top:14px;left:168px;width:483px;height:34px;background-position:-884px -284px;transform:translateX(-20px);transition-delay:2s}
.intro .title_wrap .shadow{top:2px;left:-320px;width:1920px;height:972px;background:url("https://ssl.nexon.com/s2/game/tales/event/2020/0109_update_F6E356C674310393/bg_intro.jpg") center -2px no-repeat;transition:opacity 300ms 2.35s linear}

/* content */
.content .object_wrap span{opacity:0}
.content .active span{opacity:1}
.content .title_wrap .num{top:104px;left:537px;width:206px;height:206px;transform:scale(0)}
.content .active .title_wrap .num{transform:scale(1);transition:all 500ms ease}
.content .title_wrap .headline span{top:0;height:100%;transform:translateY(20px)}
.content .active .title_wrap .headline span{transform:translateY(0);transition:opacity 300ms linear, transform 400ms ease}
.content .active .title_wrap .headline span:nth-child(1){transition-delay:200ms}
.content .active .title_wrap .headline span:nth-child(2){transition-delay:250ms}
.content .active .title_wrap .headline span:nth-child(3){transition-delay:300ms}
.content .active .title_wrap .headline span:nth-child(4){transition-delay:350ms}
.content .btn_update{position:absolute;bottom:167px;left:296px;width:689px;height:124px;transform:translateY(20px);opacity:0}
.content .active .btn_update{transform:translatey(0);transition:opacity 300ms ease, transform 500ms ease;opacity:1}
.content .btn_update span{position:absolute}
.content .btn_update .off{top:0;left:0;width:100%;height:100%}
.content .btn_update .over{top:-33px;left:-26px;width:741px;height:190px;pointer-events:none;opacity:0;filter:alpha(opacity=0);transition:opacity 300ms ease}
.content .btn_update:hover .over{opacity:1;filter:alpha(opacity=100)}
.content .parallax{position:absolute;width:100%}
.content .parallax._p1{top:0}

/* content1 */
.content1{height:1331px;margin-bottom:160px}
.content1 .parallax{bottom:0}
.content1 .box{background:url("https://ssl.nexon.com/s2/game/tales/event/2020/0109_update_F6E356C674310393/bg_content1.jpg") center top no-repeat}
.content1 .char{position:absolute;top:1px;left:-270px;width:1046px;height:1331px;background:url("https://ssl.nexon.com/s2/game/tales/event/2020/0109_update_F6E356C674310393/bg_char_content1.png") no-repeat}
.content1 .line_wrap span{background:url("https://ssl.nexon.com/s2/game/tales/event/2020/0109_update_F6E356C674310393/spr_line_content1.png") no-repeat}
.content1 .line_wrap ._l1{top:0;left:1235px;width:315px;height:323px}
.content1 .line_wrap ._l2{top:67px;left:1419px;width:131px;height:147px;background-position:-345px 0}
.content1 .line_wrap ._l3{top:318px;left:1123px;width:274px;height:283px;background-position:-506px 0}
.content1 .line_wrap ._l4{top:182px;left:1250px;width:300px;height:348px;background-position:-816px 0}
.content1 .line_wrap ._l5{top:254px;left:1367px;width:183px;height:187px;background-position:-1152px 0}
.content1 .title_wrap{top:0}
.content1 .title_wrap span{background:url("https://ssl.nexon.com/s2/game/tales/event/2020/0109_update_F6E356C674310393/spr_title_content1.png") no-repeat}
.content1 .title_wrap .headline{top:324px;left:211px;width:863px;height:142px}
.content1 .title_wrap .headline ._t1{left:0;width:267px;background-position:0 -220px}
.content1 .title_wrap .headline ._t2{left:298px;width:267px;background-position:-298px -220px}
.content1 .title_wrap .headline ._t3{left:592px;width:271px;background-position:-592px -220px}
.content1 .title_wrap .small{top:476px;left:50%;width:0;height:58px;background-position:50% -372px;margin-left:0}
.content1 .active .title_wrap .small{width:723px;margin-left:-362px;transition:all 300ms ease;transition-delay:450ms}
.content1 .content_wrap span{background:url("https://ssl.nexon.com/s2/game/tales/event/2020/0109_update_F6E356C674310393/spr_cnt_content1.png") no-repeat}
.content1 .content_wrap .list{top:576px;width:392px;height:428px}
.content1 .content_wrap .list span{position:absolute;top:0;left:0;width:100%;height:100%}
.content1 .content_wrap .list .txt{transform:scale(0.5)}
.content1 .content_wrap .list .line{transform:scale(0)}
.content1 .active .content_wrap .list span{transform:scale(1)}
.content1 .active .content_wrap .list .txt{transition:opacity 300ms linear, transform 400ms ease}
.content1 .active .content_wrap .list .line{transition:opacity 300ms linear, transform 500ms ease}
.content1 .content_wrap .list._l1{left:32px}
.content1 .content_wrap .list._l2{left:444px}
.content1 .content_wrap .list._l3{left:856px}
.content1 .content_wrap .list._l2 .txt{background-position:-412px 0}
.content1 .content_wrap .list._l3 .txt{background-position:-824px 0}
.content1 .content_wrap .list .line{background-position:-1234px 7px}
.content1 .active .content_wrap .list._l1 .txt{transition-delay:600ms}
.content1 .active .content_wrap .list._l2 .txt{transition-delay:680ms}
.content1 .active .content_wrap .list._l3 .txt{transition-delay:760ms}
.content1 .active .content_wrap .list._l1 .line{transition-delay:720ms}
.content1 .active .content_wrap .list._l2 .line{transition-delay:800ms}
.content1 .active .content_wrap .list._l3 .line{transition-delay:880ms}
.content1 .content_wrap .item{transform:scale(0) translateY(20px)}
.content1 .active .content_wrap .item{transform:scale(1) translateY(0);transition:opacity 300ms ease, transform 300ms cubic-bezier(0, 0.1, 0, 1.5)}
.content1 .content_wrap ._i1{top:897px;left:1136px;width:108px;height:108px;background-position:0 -452px}
.content1 .content_wrap ._i2{top:994px;left:1211px;width:139px;height:148px;background-position:-127px -452px}
.content1 .content_wrap ._i3{top:839px;left:1324px;width:116px;height:124px;background-position:-285px -452px}
.content1 .active .content_wrap ._i1{transition-delay:1300ms}
.content1 .active .content_wrap ._i2{transition-delay:1400ms}
.content1 .active .content_wrap ._i3{transition-delay:1500ms}
.content1 .active .btn_update{transition-delay:1100ms}
.content1 .btn_update .off{background-position:0 -167px}
.content1 .btn_update .over{background-position:-767px -134px}

/* content2 */
.content2{height:2567px;margin-bottom:50px}
.content2 .box{background:url("https://ssl.nexon.com/s2/game/tales/event/2020/0109_update_F6E356C674310393/bg_content2.jpg") center top no-repeat}
.content2 .title_wrap span{background:url("https://ssl.nexon.com/s2/game/tales/event/2020/0109_update_F6E356C674310393/spr_title_content2.png") no-repeat}
.content2 .title_wrap .headline{top:324px;left:128px;width:1026px;height:140px}
.content2 .title_wrap .headline ._t1{left:0;width:309px;background-position:0 -251px}
.content2 .title_wrap .headline ._t2{left:296px;width:73px;background-position:-354px -251px}
.content2 .title_wrap .headline ._t3{left:363px;width:384px;background-position:-530px -251px}
.content2 .title_wrap .headline ._t4{left:768px;width:258px;background-position:-968px -251px}
.content2 .content_wrap._cnt1{top:495px}
.content2 .parallax._p2{top:1081px}
.content2 .parallax._p3{top:1654px;bottom:0}
.content2 .content_wrap span{background:url("https://ssl.nexon.com/s2/game/tales/event/2020/0109_update_F6E356C674310393/spr_cnt_content2.png") no-repeat}
.content2 .content_wrap .num{left:465px;width:349px;height:147px}
.content2 .content_wrap .num ._d1, .content2 .content_wrap .num ._d2{top:63px;width:100px;height:21px;transform:scale(0, 1)}
.content2 .active .content_wrap .num ._d1, .content2 .active .content_wrap .num ._d2{transform:scale(1, 0)}
.content2 .content_wrap .num ._d1{background-position:0 -63px;transform-origin:100% 50%}
.content2 .content_wrap .num ._d2{right:0;background-position:-249px -63px;transform-origin:0 50%}
.content2 .content_wrap .num ._d3{left:100px;width:149px;height:100%;background-position:-100px 0;transform:scale(0, 0)}
.content2 .active .content_wrap .num .deco{transform:scale(1, 1);transition:all 300ms ease}
.content2 .content_wrap .num .txt{top:61px;left:150px;width:52px;height:31px}
.content2 .active .content_wrap .num .txt{transition:opacity 300ms linear;transition-delay:200ms}
.content2 ._cnt1 .num .txt{background-position:-489px 0}
.content2 ._cnt2 .num .txt{background-position:-562px 0}
.content2 ._cnt3 .num .txt{background-position:-637px 0}
.content2 .active ._cnt1 .num .deco{transition-delay:500ms}
.content2 .active ._cnt1 .num .txt{transition-delay:700ms}
.content2 .content_wrap .h4{top:137px;height:68px;opacity:0}
.content2 .active .content_wrap .h4{opacity:1;transition:opacity 300ms linear;transition-delay:300ms}
.content2 ._cnt1 .h4{left:463px;width:351px;background-position:0 -179px}
.content2 ._cnt2 .h4{left:484px;width:385px;background-position:-385px -179px}
.content2 ._cnt3 .h4{left:287px;width:703px;background-position:0 -278px}
.content2 .active ._cnt1 .h4{transition-delay:800ms}
.content2 .content_wrap .list{top:215px;width:274px;height:318px}
.content2 .content_wrap ._l1{left:189px}
.content2 .content_wrap ._l2{left:503px}
.content2 .content_wrap ._l3{left:817px}
.content2 .content_wrap .list span{top:0;left:0;width:100%;height:100%}
.content2 .content_wrap .list .bg{background-position:-1126px 0;transform:scale(0.5)}
.content2 .content_wrap .list .line{background-position:-779px 13px;transform:scale(0)}
.content2 .active .content_wrap .list .bg, .content2 .active .content_wrap .list .line{transform:scale(1)}
.content2 .active .content_wrap .list .bg{transition:opacity 300ms ease, transform 400ms ease}
.content2 .active .content_wrap .list .line{transition:opacity 300ms ease, transform 500ms ease}
.content2 .active .content_wrap .list .txt{transition:opacity 300ms linear}
.content2 .active ._cnt1 ._l1 .bg, .content2 .active ._cnt1 ._l1 .txt{transition-delay:900ms}
.content2 .active ._cnt1 ._l2 .bg, .content2 .active ._cnt1 ._l2 .txt{transition-delay:980ms}
.content2 .active ._cnt1 ._l3 .bg, .content2 .active ._cnt1 ._l3 .txt{transition-delay:1060ms}
.content2 .active ._cnt1 ._l1 .line{transition-delay:1020ms}
.content2 .active ._cnt1 ._l2 .line{transition-delay:1100ms}
.content2 .active ._cnt1 ._l3 .line{transition-delay:1180ms}
.content2 ._cnt2 .list{left:503px}
.content2 ._cnt2 .list .bg{background-position:-1122px -394px;padding:0 4px 6px 0}
.content2 .active ._cnt2 .list .bg, .content2 .active ._cnt2 .list .txt{transition-delay:400ms}
.content2 .active ._cnt2 .list .line{transition-delay:520ms}
.content2 ._cnt1 ._l1 .txt{background-position:0 -406px}
.content2 ._cnt1 ._l2 .txt{background-position:-314px -406px}
.content2 ._cnt1 ._l3 .txt{background-position:-628px -406px}
.content2 ._cnt2 .list .txt{background-position:-765px -765px}
.content2 ._cnt3 ._l1 .txt{background-position:0 -1106px}
.content2 ._cnt3 ._l2 .txt{background-position:-314px -1106px}
.content2 ._cnt3 ._l3 .txt{background-position:-628px -1106px}
.content2 .active ._cnt3 .list._l1 .bg, .content2 .active ._cnt3 .list._l1 .txt{transition-delay:400ms}
.content2 .active ._cnt3 .list._l2 .bg, .content2 .active ._cnt3 .list._l2 .txt{transition-delay:480ms}
.content2 .active ._cnt3 .list._l3 .bg, .content2 .active ._cnt3 .list._l3 .txt{transition-delay:560ms}
.content2 .active ._cnt3 .list._l1 .line{transition-delay:520ms}
.content2 .active ._cnt3 .list._l2 .line{transition-delay:600ms}
.content2 .active ._cnt3 .list._l3 .line{transition-delay:680ms}
.content2 ._cnt2 .bubble{width:344px;height:91px}
.content2 ._cnt2 ._b1, .content2 ._cnt2 ._b3{transform:translate(10px, 0) scale(0.9)}
.content2 ._cnt2 ._b2, .content2 ._cnt2 ._b4{transform:translate(-10px, 0) scale(0.9)}
.content2 .active ._cnt2 .bubble{transform:translate(0, 0);transition:opacity 300ms ease, transform 500ms ease}
.content2 ._cnt2 ._b1{top:251px;left:118px;background-position:0 -805px;transform-origin:100% 100%}
.content2 ._cnt2 ._b2{top:251px;left:818px;background-position:-376px -805px;transform-origin:0 100%}
.content2 ._cnt2 ._b3{top:355px;left:118px;background-position:0 -909px;transform-origin:100% 100%}
.content2 ._cnt2 ._b4{top:355px;left:818px;background-position:-376px -909px;transform-origin:0 100%}
.content2 .active ._cnt2 ._b1{transition-delay:650ms}
.content2 .active ._cnt2 ._b2{transition-delay:730ms}
.content2 .active ._cnt2 ._b3{transition-delay:810ms}
.content2 .active ._cnt2 ._b4{transition-delay:880ms}
.content2 ._cnt3 .bubble{top:445px;left:687px;width:540px;height:138px;background-position:0 -1462px;transform:translateY(15px)}
.content2 .active ._cnt3 .bubble{transform:translateY(0);transition:opacity 300ms ease, transform 500ms ease;transition-delay:1050ms}
.content2 .twinkle_wrap span{width:157px;height:156px;background:url("https://ssl.nexon.com/s2/game/tales/event/2020/0109_update_F6E356C674310393/bg_twinkle_content2.png") no-repeat}
.content2 .twinkle_wrap ._t1{top:107px;left:-109px}
.content2 .twinkle_wrap ._t2{top:310px;left:1235px}
.content2 .twinkle_wrap ._t3{top:575px;left:21px}
.content2 .twinkle_wrap ._t4{top:1111px;left:1039px}
.content2 .twinkle_wrap ._t5{top:1558px;left:-93px}
.content2 .active .btn_update{transition-delay:1350ms}
.content2 .btn_update .off{background-position:0 -414px}
.content2 .btn_update .over{background-position:-767px -381px}
.content2 .char{position:absolute;background:url("https://ssl.nexon.com/s2/game/tales/event/2020/0109_update_F6E356C674310393/spr_char_content2.png") no-repeat}
.content2 .char._c1{top:9px;left:-198px;width:486px;height:487px}
.content2 .char._c2{top:95px;left:1038px;width:407px;height:401px;background-position:-581px 0}
.content2 .char._c3{top:1484px;left:893px;width:736px;height:554px;background-position:0 -496px}

/* content3 */
.content3{height:1999px}
.content3 .box{background:url("https://ssl.nexon.com/s2/game/tales/event/2020/0109_update_F6E356C674310393/bg_content3.jpg") center top no-repeat}
.content3 .title_wrap span{background:url("https://ssl.nexon.com/s2/game/tales/event/2020/0109_update_F6E356C674310393/spr_title_content3.png") no-repeat}
.content3 .title_wrap .small{top:347px;left:435px;width:404px;height:79px;background-position:-438px 0;transform:perspective(1000px) rotateX(-90deg)}
.content3 .active .title_wrap .small{transform:perspective(1000px) rotateX(0);transition:opacity 300ms ease, transform 500ms ease;transition-delay:100ms}
.content3 .title_wrap .headline{top:437px;left:250px;width:780px;height:133px}
.content3 .title_wrap .headline ._t1{left:0;width:378px;background-position:-253px -90px}
.content3 .title_wrap .headline ._t2{left:406px;width:374px;background-position:-659px -90px}
.content3 .content_wrap .list{position:absolute;width:620px;height:585px;z-index:1}
.content3 .content_wrap ._l1, .content3 .content_wrap ._l2{top:619px}
.content3 .content_wrap ._l1, .content3 .content_wrap ._l3{left:0}
.content3 .content_wrap ._l2, .content3 .content_wrap ._l4{left:659px}
.content3 .content_wrap ._l3, .content3 .content_wrap ._l4{top:1252px}
.content3 .content_wrap .list div{top:0;left:0;width:100%;height:100%;opacity:0;transform:translateY(30px)}
.content3 .active .content_wrap .list div{transform:translateY(0);opacity:1;transition:opacity 300ms ease, transform 500ms ease}
.content3 .content_wrap .list .txt{top:0;left:0;width:100%;height:100%;background:url("https://ssl.nexon.com/s2/game/tales/event/2020/0109_update_F6E356C674310393/spr_cnt_content3.png") no-repeat}
.content3 .active .content_wrap ._l1 div{transition-delay:400ms}
.content3 .active .content_wrap ._l2 div{transition-delay:500ms}
.content3 .active .content_wrap ._l3 div{transition-delay:600ms}
.content3 .active .content_wrap ._l4 div{transition-delay:700ms}
.content3 .content_wrap ._l2 .txt{background-position:-620px 0}
.content3 .content_wrap ._l3 .txt{background-position:0 -585px}
.content3 .content_wrap ._l4 .txt{background-position:-620px -585px}
.content3 .content_wrap .list .square{width:47px;height:47px}
.content3 .content_wrap ._l1 .square{top:-24px;left:-21px;background:#1b8398;transform:translate(10px, 10px) scale(0);transform-origin:100% 100%}
.content3 .content_wrap ._l2 .square{top:-24px;right:-21px;background:#FFA626;transform:translate(-10px, 10px) scale(0);transform-origin:0 100%}
.content3 .content_wrap ._l3 .square{bottom:-24px;left:-21px;background:#6b6bcf;transform:translate(10px, -10px) scale(0);transform-origin:100% 0}
.content3 .content_wrap ._l4 .square{bottom:-24px;right:-21px;background:#09ab6d;transform:translate(-10px, -10px) scale(0);transform-origin:0 0}
.content3 .active .content_wrap .list .square{transform:translate(0, 0) scale(1);transition:transform 300ms cubic-bezier(0, 0.6, 0.1, 1.2)}
.content3 .active .content_wrap ._l1 .square{transition-delay:600ms}
.content3 .active .content_wrap ._l2 .square{transition-delay:700ms}
.content3 .active .content_wrap ._l3 .square{transition-delay:800ms}
.content3 .active .content_wrap ._l4 .square{transition-delay:900ms}
.content3 .content_wrap .list .btn{position:absolute;bottom:0;left:148px;width:360px;height:71px;background-color:#2f2f2f}
.content3 .content_wrap .list:hover .btn{height:64px;border-bottom:7px solid;transition:all 200ms ease}
.content3 .content_wrap ._l1 .btn{background-position:55px -710px}
.content3 .content_wrap ._l2 .btn{background-position:-359px -710px}
.content3 .content_wrap ._l3 .btn{background-position:-773px -710px}
.content3 .content_wrap ._l4 .btn{background-position:-1187px -710px}
.content3 .content_wrap ._l1:hover .btn{background-position:55px -715px;border-color:#5dcfef}
.content3 .content_wrap ._l2:hover .btn{background-position:-359px -715px;border-color:#ffa626}
.content3 .content_wrap ._l3:hover .btn{background-position:-773px -715px;border-color:#7b7beb}
.content3 .content_wrap ._l4:hover .btn{background-position:-1187px -715px;border-color:#09ab6d}
.content3 .char{position:absolute}
.content3 ._c1{top:0;left:624px;width:976px;height:944px;background:url("https://ssl.nexon.com/s2/game/tales/event/2020/0109_update_F6E356C674310393/bg_char1_content3.png") no-repeat}
.content3 ._c2{top:115px;left:-270px;width:1451px;height:1190px;background:url("https://ssl.nexon.com/s2/game/tales/event/2020/0109_update_F6E356C674310393/bg_char2_content3.png") no-repeat}
.content3 ._c3{top:986px;left:-270px;width:874px;height:1013px;background:url("https://ssl.nexon.com/s2/game/tales/event/2020/0109_update_F6E356C674310393/bg_char3_content3.png") no-repeat}
.content3 ._c4{top:1343px;left:592px;width:958px;height:656px;background:url("https://ssl.nexon.com/s2/game/tales/event/2020/0109_update_F6E356C674310393/bg_char4_content3.png") no-repeat}

/* footer */
.footer{height:149px}
.footer .copyright{position:absolute;top:71px;left:50%;width:459px;height:18px;background:url("https://ssl.nexon.com/s2/game/tales/event/2020/0109_update_F6E356C674310393/copyright.png") no-repeat;text-indent:-99999px;overflow:hidden;margin-left:-230px}

/* top */
#wrap .btn_top{display:none;position:fixed;bottom:149px;right:0;width:84px;height:84px;background-position:0 -603px}
#wrap .btn_top:hover{background-position:-135px -603px}