@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:#efe8db;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 h1 a, #header .util button, #header li a span, #quick li a, .footer .copyright, .content .btn_detail{display:block;text-indent:-9999px;overflow:hidden;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1212_intro_90BB7DEB1792101F/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}

/* section wrap */
.section_wrap{position:relative;transform-origin:50% 0}

/* header */
#header{position:absolute;top:0;left:0;width:100%;height:119px;z-index:100;border-bottom:1px solid #fff;border-color:rgba(255,255,255,0.5);min-width:1280px;transform-origin:0 0}
#header .bg{display:none;position:absolute;top:0;bottom:-1px;width:100%;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1212_intro_90BB7DEB1792101F/bg_intro.jpg") center top no-repeat}
#header .bg:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background:#fff;opacity:0.5}
#header h1{position:absolute;top:15px;left:30px}
#header h1 a{display:block;width:216px;height:92px}
#header .util{position:absolute;top:31px;right:31px;z-index:1;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 span{background-position:-220px -128px}
#header .util li .btn_fb span{background-position:-279px -128px}
#header .util li .btn_tw span{background-position:-337px -128px}
#header .util li .btn_home:hover span{background-position:-220px -212px}
#header .util li .btn_fb:hover span{background-position:-279px -212px}
#header .util li .btn_tw:hover span{background-position:-337px -212px}
#header .util .btn_game{position:absolute;top:10px;left:0;width:210px;height:40px;background-position:0 -138px}
#header .util .btn_game:hover{background-position:0 -222px}
#header .util .btn_today{width:142px;height :22px;background-position:-423px -138px;margin:4px 0 0 -5px}
#header .nav{position:relative;width:744px;margin:0 auto}
#header .nav ul:after{content:"";display:block;clear:both}
#header .nav li{float:left}
#header .nav li a{display:block;position:relative;height:119px}
#header .nav .nav1 a{width:243px;margin-right:210px}
#header .nav .nav2 a{width:291px}
#header .nav li a span{position:absolute;width:100%}
#header .nav li a .txt{top:50%;left:0;height:29px;filter:alpha(opacity=40);opacity:0.4;margin-top:-11px;transition:opacity 300ms ease}
#header .nav .on a .txt, #header .nav li a:hover .txt{filter:alpha(opacity=100);opacity:1}
#header .nav .nav1 a .txt{background-position:-309px 0}
#header .nav .nav2 a .txt{background-position:-309px -78px}
#header .nav li a .bar{bottom:-1px;height:0;background:#fff;transition:height 300ms ease}
#header .nav .on a .bar, #header .nav li a:hover .bar{height:5px}
.fixed #header{position:fixed;height:89px}
.fixed #header .bg{display:block}
.fixed #header .util{top:19px}
.fixed #header .util .btn_today{display:none}
.fixed #header .nav li a{height:89px}
.fixed #header .nav li a .txt{margin-top:-14px}
.fixed #header h1{top:12px}
.fixed #header h1 a{width:165px;height:70px;background-position:-509px -203px}

/* intro */
.intro{height:1260px}
.intro .bg_intro{position:absolute;top:0;left:50%;width:1920px;height:100%;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1212_intro_90BB7DEB1792101F/bg_intro.jpg") center top no-repeat;margin-left:-960px}
.intro .char_wrap{position:absolute;top:0;left:50%;width:1920px;height:100%;margin-left:-960px}
.intro .char_wrap .char{position:absolute;top:0;width:960px;height:100%}
.intro .char_wrap .char div, .intro .char_wrap .char div span, .intro .char_wrap .char a{position:absolute}
.intro .char_wrap ._cleft{left:0}
.intro .char_wrap ._cright{right:0}
.intro .char_wrap .char a{top:0;left:0;width:100%;height:100%;text-indent:-99999px;overflow:hidden;z-index:1}
.intro .char_wrap .char .figure{opacity:0}
.intro.load .char_wrap .char .figure{opacity:1;transform:translateX(0);transition:opacity 300ms ease, transform 1s cubic-bezier(0, 0.7, 0.1, 1)}
.intro .char_wrap .char .figure span{top:0;width:100%;height:100%}
.intro .char_wrap .char .figure .off{filter:alpha(opacity=0);width:0;opacity:0;transition:all 300ms ease}
.intro .char_wrap .char.blur .figure .off{filter:alpha(opacity=100);opacity:1;width:100%}
.intro .char_wrap ._cleft .figure{top:162px;left:-460px;width:1364px;height:1095px;transform:translateX(300px)}
.intro .char_wrap ._cleft .figure span{right:0;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1212_intro_90BB7DEB1792101F/bg_char_left_intro.png") no-repeat}
.intro .char_wrap ._cleft .figure .off{background-position:100% 0}
.intro .char_wrap ._cright .figure{top:96px;left:-349px;width:1767px;height:1158px;transform:translateX(-300px)}
.intro .char_wrap ._cright .figure span{left:0;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1212_intro_90BB7DEB1792101F/bg_char_right_intro.png") no-repeat}
.intro .char_wrap ._cright .figure .off{background-position:-1745px 0}
.intro .char_wrap .name{top:1000px;width:382px;height:88px;z-index:1}
.intro .char_wrap ._cleft .name{left:0}
.intro .char_wrap ._cright .name{right:0}
.intro .char_wrap .name span{background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1212_intro_90BB7DEB1792101F/spr_name_intro.png") no-repeat;opacity:0;transition:opacity 300ms ease, transform 500ms ease}
.intro.load .char_wrap .char .name span{opacity:1;transform:translateX(0)}
.intro .char_wrap .name .bg{top:0;left:0;width:100%;height:100%;transition-delay:300ms}
.intro .char_wrap .name .txt{transition-delay:380ms}
.intro .char_wrap ._cleft .name .bg{background-position:-165px 0}
.intro .char_wrap ._cleft.blur .name .bg{background-position:-165px -88px}
.intro .char_wrap ._cright.blur .name .bg{background-position:-547px -88px}
.intro .char_wrap .name .txt{top:22px;height:42px}
.intro .char_wrap ._cleft .name span{transform:translateX(-80px)}
.intro .char_wrap ._cright .name span{transform:translateX(80px)}
.intro .char_wrap ._cleft .name .txt{right:160px;width:124px;background-position:-610px 0}
.intro .char_wrap ._cright .name .txt{left:120px;width:207px;background-position:-782px 0}
.intro .title_wrap{position:absolute;top:170px;left:310px;width:660px;height:1029px;z-index:3}
.intro .title_wrap div, .intro .title_wrap span{position:absolute}
.intro .title_wrap .card{top:0;left:0;width:100%;height:100%;transform:perspective(2000px) rotateY(-180deg);transform-style:preserve-3d;opacity:0}
.intro.load .title_wrap .card{opacity:1;transform:perspective(2000px) rotateY(0deg);transition:all 400ms linear}
.intro .title_wrap .card span{top:0;left:-13px;width:702px;height:1063px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1212_intro_90BB7DEB1792101F/bg_card.png") no-repeat}
.intro .title_wrap .card .back{left:-29px;transform:rotateY(180deg);background-position:100% 0}
.intro.load .title_wrap .card .back{opacity:0;transition:opacity 400ms linear}
.intro .title_wrap .txt span{background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1212_intro_90BB7DEB1792101F/spr_title_intro.png") no-repeat;opacity:0}
.intro.load .title_wrap .txt span{opacity:1}
.intro .title_wrap .update{top:42px;left:153px;width:354px;height:46px}
.intro .title_wrap .update .bg{top:0;left:0;width:100%;height:100%;transform:scaleX(0)}
.intro.load .title_wrap .update .bg{transform:scaleX(1);transition:all 300ms ease;transition-delay:400ms}
.intro .title_wrap .update .txt{top:11px;left:30px;width:300px;height:23px;background-position:-380px 0}
.intro.load .title_wrap .update .txt{transition:opacity 300ms linear;transition-delay:500ms}
.intro .title_wrap .line span{top:0;height:100%}
.intro .title_wrap ._l1{top:219px;left:140px;width:387px;height:38px;transform:perspective(150px);-ms-perspective:150px;transform-style:preserve-3d}
.intro .title_wrap ._l1 span{transform:translateZ(-30px);-ms-transform:translateZ(-30px);transition:opacity 300ms ease, transform 300ms ease}
.intro.load .title_wrap ._l1 span{transform:translateZ(0);-ms-transform:translateZ(0)}
.intro .title_wrap ._l1 ._t1{left:0;width:34px;background-position:0 -88px;transition-delay:600ms}
.intro .title_wrap ._l1 ._t2{left:48px;width:29px;background-position:-48px -88px;transition-delay:625ms}
.intro .title_wrap ._l1 ._t3{left:92px;width:29px;background-position:-92px -88px;transition-delay:650ms}
.intro .title_wrap ._l1 ._t4{left:154px;width:36px;background-position:-154px -88px;transition-delay:675ms}
.intro .title_wrap ._l1 ._t5{left:197px;width:37px;background-position:-197px -88px;transition-delay:700ms}
.intro .title_wrap ._l1 ._t6{left:260px;width:33px;background-position:-260px -88px;transition-delay:725ms}
.intro .title_wrap ._l1 ._t7{left:305px;width:36px;background-position:-305px -88px;transition-delay:750ms}
.intro .title_wrap ._l1 ._t8{left:349px;width:38px;background-position:-349px -88px;transition-delay:775ms}
.intro .title_wrap ._l2{top:313px;left:36px;width:588px;height:193px;overflow:hidden}
.intro .title_wrap ._l2 span{transform:translateY(80px);transition:opacity 300ms linear, transform 300ms ease}
.intro.load .title_wrap ._l2 span{transform:translateY(0)}
.intro .title_wrap ._l2 ._t1{left:0;width:184px;background-position:0 -163px;transition-delay:900ms}
.intro .title_wrap ._l2 ._t2{left:222px;width:160px;background-position:-222px -163px;transition-delay:950ms}
.intro .title_wrap ._l2 ._t3{left:428px;width:160px;background-position:-428px -163px;transition-delay:1050ms}
.intro .title_wrap ._l3{top:515px;left:21px;width:624px;height:120px;transform:perspective(150px);-ms-perspective:150px;transform-style:preserve-3d}
.intro .title_wrap ._l3 span{transform:translateZ(50px);-ms-transform:translateZ(50px);transition:opacity 300ms linear, transform 300ms ease}
.intro.load .title_wrap ._l3 span{transform:translateZ(0);-ms-transform:translateZ(0)}
.intro .title_wrap ._l3 .shadow{top:-5px;width:100%;height:158px;background-position:0 -538px;transition-delay:1250ms}
.intro .title_wrap ._l3 .font{transition-delay:1300ms}
.intro .title_wrap ._l3 ._t1{left:18px;width:107px;background-position:-18px -397px}
.intro .title_wrap ._l3 ._t2{left:130px;width:119px;background-position:-130px -397px}
.intro .title_wrap ._l3 ._t3{left:252px;width:116px;background-position:-252px -397px}
.intro .title_wrap ._l3 ._t4{left:374px;width:110px;background-position:-374px -397px}
.intro .title_wrap ._l3 ._t5{left:488px;width:117px;background-position:-488px -397px}
.intro .title_wrap ._l4{top:672px;left:200px;width:260px;height:163px;overflow:hidden}
.intro .title_wrap ._l4 span{transform:translateY(-80px);transition:opacity 300ms ease, transform 300ms ease}
.intro.load .title_wrap ._l4 span{transform:translateY(0)}
.intro .title_wrap ._l4 ._t1{left:0;width:88px;background-position:0 -717px;transition-delay:1100ms}
.intro .title_wrap ._l4 ._t2{left:95px;width:165px;background-position:-95px -717px;transition-delay:1150ms}
.intro canvas{position:absolute;left:50%;bottom:0;margin-left:-960px}
.intro .bubble_wrap{position:absolute;bottom:0;left:50%;width:1920px;height:100%;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1212_intro_90BB7DEB1792101F/bg_bubble.png") center bottom no-repeat;margin-left:-960px}

/* content */
.content .title_wrap{top:157px}
.content .title_wrap span{opacity:0}
.content .title_wrap.active span{opacity:1}
.content .title_wrap div span{background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1212_intro_90BB7DEB1792101F/spr_title_content.png") no-repeat}
.content .title_wrap .ko{top:0;left:-158px;height:155px}
.content .title_wrap .ko span{top:0;height:100%;transform:translateY(106px)}
.content .title_wrap.active .ko span{transform:translateY(0);transition:opacity 300ms linear, transform 400ms ease}
.content .title_wrap.active .ko span:nth-child(2){transition-delay:50ms}
.content .title_wrap.active .ko span:nth-child(3){transition-delay:100ms}
.content .title_wrap.active .ko span:nth-child(4){transition-delay:150ms}
.content .title_wrap.active .ko span:nth-child(5){transition-delay:200ms}
.content .title_wrap .en span{transform-origin:0 100%;transform:rotate(-45deg)}
.content .title_wrap.active .en span{transform:rotate(0);transition:opacity 300ms ease, transform 600ms cubic-bezier(0, .3, 0, 1.5)}
.content .title_wrap.active .en span:nth-child(1){transition-delay:80ms}
.content .title_wrap.active .en span:nth-child(2){transition-delay:160ms}
.content .title_wrap.active .en span:nth-child(3){transition-delay:240ms}
.content .title_wrap.active .en span:nth-child(4){transition-delay:320ms}
.content .title_wrap.active .en span:nth-child(5){transition-delay:400ms}
.content .title_wrap.active .en span:nth-child(6){transition-delay:480ms}
.content .title_wrap.active .en span:nth-child(7){transition-delay:560ms}
.content .title_wrap.active .en span:nth-child(8){transition-delay:640ms}
.content .title_wrap .char{transform:translateX(500px)}
.content .title_wrap.active .char{transform:translateX(0);transition:opacity 300ms linear, transform 2s cubic-bezier(0, 0.7, 0.1, 1);transition-delay:500ms}
.content .bg_wrap{position:absolute;left:50%;width:1800px;margin-left:-900px}
.content .bg_wrap span{position:absolute}
.content .detail_list span{opacity:0}
.content .detail_list.active span{opacity:1;transform:translate(0, 0) scale(1);transition:opacity 300ms ease, transform 600ms ease}
.content .detail_list .gif{transform:translate(0, 80px)}
.content .detail_list .txt{width:448px;height:520px}
.content .btn_detail{position:absolute;left:306px;width:674px;height:143px}

/* content1 */
.content1{height:1873px}
.content1 .title_wrap .ko{width:450px}
.content1 .title_wrap .ko ._t1{left:0;width:130px}
.content1 .title_wrap .ko ._t2{left:149px;width:157px;background-position:-149px 0}
.content1 .title_wrap .ko ._t3{left:309px;width:141px;background-position:-309px 0}
.content1 .title_wrap .en{top:145px;left:-156px;width:939px;height:465px}
.content1 .title_wrap .en ._t1{top:18px;left:0;width:73px;height:339px;background-position:0 -253px}
.content1 .title_wrap .en ._t2{top:114px;left:95px;width:238px;height:243px;background-position:-95px -349px}
.content1 .title_wrap .en ._t3{top:116px;left:345px;width:240px;height:351px;background-position:-345px -351px}
.content1 .title_wrap .en ._t4{top:0;left:603px;width:75px;height:357px;background-position:-603px -235px}
.content1 .title_wrap .en ._t5{top:114px;left:699px;width:240px;height:243px;background-position:-699px -349px}
.content1 .title_wrap .char{top:113px;left:255px;width:1273px;height:1442px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1212_intro_90BB7DEB1792101F/bg_char_content1.png") no-repeat}
.content1 .bg_wrap{top:0;height:1655px}
.content1 .bg_wrap span{opacity:0;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1212_intro_90BB7DEB1792101F/spr_bg_content1.png") no-repeat}
.content1 .bg_wrap.active span{opacity:1;transform:translate(0, 0);transition:opacity 300ms ease, transform 500ms ease}
.content1 .bg_wrap ._b1{top:263px;left:0;width:1800px;height:1197px;transform:translate(-30px, 0)}
.content1 .bg_wrap ._b2{top:263px;left:296px;width:767px;height:355px;background-position:-1915px -1296px;transform:translate(0, -30px)}
.content1 .bg_wrap ._b3{top:263px;right:0;width:810px;height:254px;background-position:-2189px 0;transform:translate(30px, -15px)}
.content1 .bg_wrap ._b4{top:365px;right:0;width:979px;height:889px;background-position:-2017px -330px;transform:translate(30px, 0)}
.content1 .bg_wrap ._b5{top:1234px;left:0;width:611px;height:454px;background-position:0 -1622px;transform:translate(-30px, 30px)}
.content1 .bg_wrap ._b6{bottom:0;left:578px;width:1222px;height:425px;background-position:-693px -1651px;transform:translate(30px, 30px)}
.content1 .bg_wrap ._b7{top:1224px;left:243px;width:900px;height:258px;background-position:-2099px -1849px}
.content1 .detail_list{top:695px}
.content1 .detail_list .txt{background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1212_intro_90BB7DEB1792101F/spr_detail_content1.png") no-repeat}
.content1 .detail_list ._d1{top:0;left:57px;z-index:1;transform:translate(0, 125px) scale(0.8)}
.content1 .detail_list ._d2{top:385px;left:-164px;background-position:-448px 0;transform:translate(125px, -125px) scale(0.8)}
.content1 .detail_list ._d3{top:385px;left:278px;background-position:-896px 0;transform:translate(-125px, -125px) scale(0.8)}
.content1 .detail_list .gif{top:382px;left:739px}
.content1 .detail_list.active ._d2{transition-delay:150ms}
.content1 .detail_list.active ._d3{transition-delay:300ms}
.content1 .detail_list.active .gif{transition-delay:450ms}
.content1 .btn_detail{bottom:18px;background-position:0 -668px}
.content1 .btn_detail:hover{background-position:0 -831px}

/* content2 */
.content2{height:2314px}
.content2 .title_wrap .ko{width:755px}
.content2 .title_wrap .ko ._t1{left:0;width:146px;background-position:-497px 0}
.content2 .title_wrap .ko ._t2{left:148px;width:157px;background-position:-645px 0}
.content2 .title_wrap .ko ._t3{left:304px;width:157px;background-position:-811px 0}
.content2 .title_wrap .ko ._t4{left:471px;width:135px;background-position:-978px 0}
.content2 .title_wrap .ko ._t5{left:628px;width:130px;background-position:-1135px 0}
.content2 .title_wrap .en{top:171px;left:-168px;width:1625px;height:428px}
.content2 .title_wrap .en ._t1{left:0;width:246px;height:312px;background-position:0 -803px}
.content2 .title_wrap .en ._t2{top:105px;left:258px;width:219px;height:224px;background-position:-258px -891px}
.content2 .title_wrap .en ._t3{top:105px;left:489px;width:221px;height:323px;background-position:-489px -891px}
.content2 .title_wrap .en ._t4{top:105px;left:718px;width:219px;height:224px;background-position:-718px -891px}
.content2 .title_wrap .en ._t5{top:29px;left:942px;width:190px;height:300px;background-position:-942px -815px}
.content2 .title_wrap .en ._t6{top:105px;left:1143px;width:162px;height:224px;background-position:-1143px -891px}
.content2 .title_wrap .en ._t7{top:105px;left:1314px;width:226px;height:224px;background-position:-1314px -891px}
.content2 .title_wrap .en ._t8{top:0;left:1556px;width:69px;height:329px;background-position:-1556px -786px}
.content2 .bg_wrap{top:263px;height:1843px}
.content2 .bg_wrap .bg{top:0;left:0;width:100%;height:100%;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1212_intro_90BB7DEB1792101F/bg_content2.png") no-repeat}
.content2 .square_wrap{position:absolute;left:0;width:100%;overflow:hidden}
.content2 .square_wrap.square1{top:653px;height:540px}
.content2 .square_wrap.square2{top:1303px;height:360px}
.content2 .square_wrap span{width:180px;height:180px;opacity:0;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1212_intro_90BB7DEB1792101F/spr_square_content2.png") no-repeat}
.content2 .square_wrap.active span{opacity:1;transform:translate(0, 0);transition:opacity 300ms ease, transform 600ms ease}
.content2 .square_wrap ._s1{top:0;right:180px;background-position:-180px 0;transform:translate(90px, 0)}
.content2 .square_wrap ._s2{top:180px;right:360px;background-position:0 -180px;transform:translate(90px, 0)}
.content2 .square_wrap ._s3{top:180px;right:0;background-position:-360px -180px;transform:translate(0, 90px)}
.content2 .square_wrap ._s4{top:360px;right:180px;background-position:-180px -360px;transform:translate(0, -90px)}
.content2 .square_wrap ._s5{top:0;right:0;background-position:-360px -540px;transform:translate(-90px, 0)}
.content2 .square_wrap ._s6{top:0;left:540px;background-position:0 -540px;transform:translate(90px, 0)}
.content2 .square_wrap ._s7{top:180px;left:360px;background-position:0 -720px;transform:translate(0, 90px)}
.content2 .square_wrap ._s8{top:0;left:0;background-position:-540px -720px;transform:translate(0, -90px)}
.content2 .square_wrap.active ._s1, .content2 .square_wrap.active ._s6{transition-delay:150ms}
.content2 .square_wrap.active ._s2, .content2 .square_wrap.active ._s7{transition-delay:300ms}
.content2 .square_wrap.active ._s3{transition-delay:450ms}
.content2 .char{top:331px;left:389px;width:823px;height:1549px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1212_intro_90BB7DEB1792101F/bg_char_content2.png") no-repeat}
.content2 .detail_list{top:681px}
.content2 .detail_list .txt{background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1212_intro_90BB7DEB1792101F/spr_detail_content2.png") no-repeat}
.content2 .detail_list ._d1{top:0;left:-154px;transform:translate(125px, 125px) scale(0.8)}
.content2 .detail_list ._d2{top:292px;left:57px;background-position:-896px 0;transform:translate(-125px, 125px) scale(0.8)}
.content2 .detail_list ._d3{top:627px;left:-150px;background-position:-448px 0;transform:translate(125px, -125px) scale(0.8)}
.content2 .detail_list ._d4{top:627px;left:238px;background-position:-1344px 0;transform:translate(-125px, -125px) scale(0.8)}
.content2 .detail_list .gif{top:489px;left:739px}
.content2 .detail_list.active ._d2{transition-delay:150ms}
.content2 .detail_list.active ._d3{transition-delay:300ms}
.content2 .detail_list.active ._d4{transition-delay:450ms}
.content2 .detail_list.active .gif{transition-delay:600ms}
.content2 .btn_detail{bottom:200px;background-position:0 -1004px}
.content2 .btn_detail:hover{background-position:0 -1169px}


/* footer */
.footer{height:49px;background:#E5D8BF;padding-top:41px}
.footer .copyright{width:459px;height:18px;background-position:-215px -431px;margin:0 auto}

/* quick */
#quick{display:none;position:fixed;top:50%;right:15px;width:100px;margin-top:-150px}
#quick li a{height:100px}
#quick .qu1 a{background-position:0 -300px}
#quick .qu2 a{background-position:0 -400px}
#quick .qu3 a{background-position:0 -500px}
#quick .qu1.on a, #quick .qu1 a:hover{background-position:-100px -300px}
#quick .qu2.on a, #quick .qu2 a:hover{background-position:-100px -400px}
#quick .qu3.on a, #quick .qu3 a:hover{background-position:-100px -500px}