@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:#fff;background-color:#e5ded6;line-height:1}
input,textarea,button,select{font-size:inherit;font-family:"맑은 고딕","Malgun Gothic","돋움","dotum",sans-serif;color:#fff}
img,fieldset,button{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:#393939}
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}
button{border:0;cursor:pointer;outline:0} 
*, *::after, *::before {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}


/* layout */ 
#wrap{position:relative;width:100%;overflow:hidden;max-width: 1920px;min-width: 1280px;margin:0 auto;}
.section{position:relative;width:100%;height:100%;padding:0 50px;transition: all .8s ease-out;max-width: 1920px;margin: 0 auto}
.section .inner{position:relative;width:100%;height:100%;background-size: contain !important;overflow: hidden;}

/* screen */
#screen{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10;background:#e5ded6}

/* common */
#header .util button, #header .util li a, #quick a, .btn a,#event .con li a,#intro .btn_left a,#intro .btn_right a{display:block;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/0822_renovation2_06C3A7A93C7D7E7C/spr_common.png");text-indent:-99999px;overflow:hidden}
.gnbWrapper{min-width:1280px !important}


/* header */
#header{position:absolute;top:0;left:0;right:0;z-index:100}
#header h1{position:absolute;top:19px;left:23px}
#header h1 a{width:246px;height:105px;display: block;text-indent: -100000px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/0822_renovation2_06C3A7A93C7D7E7C/logo.png") no-repeat}
#header .util{position:absolute;top:24px;right:55px;width: 369px;height: 81px}
#header .util .btn_game{position:absolute;top:0;left:0;width:235px;height:47px;background-position:-793px -68px}
#header .util .btn_game:hover{background-position:-793px -205px}
#header .util ul{position:absolute;right: 0;top: 0}
#header .util li{float:left;margin-right:3px}
#header .util li a{display:block;position:relative;width:41px;height:47px}
#header .util .btn_home{background-position:-1028px -68px}
#header .util .btn_fb{background-position:-1072px -68px}
#header .util .btn_tw{background-position:-1116px -68px}
#header .util .btn_home:hover{background-position:-1028px -205px}
#header .util .btn_fb:hover{background-position:-1072px -205px}
#header .util .btn_tw:hover{background-position:-1116px -205px}
#header .util .btn_today{width:142px;height:34px;background-position:-1020px -115px;position: absolute;right: 0;bottom: 0}

/* quick */
#quick{position:fixed;top:50%;right:15px;width:100px;z-index:100;margin-top:-160px;display: none;}
#quick ul{}
#quick li{width: 100%;height: 100px}
#quick li a{width: 100%;height: 100%}
#quick .qu1 a{background-position:-775px -430px}
#quick .qu2 a{background-position:-775px -530px}

#quick .qu1 a:hover, #quick .qu1.on a{background-position:-926px -430px}
#quick .qu2 a:hover, #quick .qu2.on a{background-position:-926px -530px}

#quick .btn_top{width:100px;height:100px;background-position:-775px -640px;margin:10px auto 0}
#quick .btn_top:hover{background-position:-926px -640px}

#intro{padding:0;height:1070px;background:#1d0417 url("https://ssl.nexon.com/s2/game/tales/event/2019/0822_renovation2_06C3A7A93C7D7E7C/bg_intro.jpg") center 0 no-repeat;background-size: contain;}
#content1{height: 1425px;margin-top:65px}
#content2{height: 1320px;margin-top:200px}
#content3{height: 1846px;margin-top:200px;padding-bottom: 200px}
#event{height: 1873px;margin-top:150px;}

.section .inner .char{position: absolute;right: 0;bottom: 0;width: 100%}
.scroll_down{padding:42px 0 0 44px;position: fixed;width: 145px;height: 52px;bottom: 10%;left:50%;margin-left:-72px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/0822_renovation2_06C3A7A93C7D7E7C/spr_common.png") -876px -817px no-repeat;z-index: 1}
.scroll_down span{display: inline-block;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/0822_renovation2_06C3A7A93C7D7E7C/spr_common.png") no-repeat;width: 10px;height:14px }
.scroll_down span.s1{background-position: -920px -899px}
.scroll_down span.s2{background-position: -930px -899px}
.scroll_down span.s3{background-position: -940px -899px;width:11px}
.scroll_down span.s4{background-position: -951px -899px}
.scroll_down span.s5{background-position: -961px -899px;width:9px}
.scroll_down span.s6{background-position: -970px -899px;width:9px}

.cover_l {display: none;position:fixed;left:0;top:0;width:100%;height:100%;background-color:#1d0417;z-index:100000;opacity:0}

#intro .btn_left{position: absolute;left: 2%;bottom:90px;width:418px;height: 418px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/0822_renovation2_06C3A7A93C7D7E7C/btn_intro.png") no-repeat }
#intro .btn_right{position: absolute;right: 2%;bottom:110px;width:413px;height: 383px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/0822_renovation2_06C3A7A93C7D7E7C/btn_intro.png") -437px 0 no-repeat }
#intro .btn_left a,
#intro .btn_right a{position: absolute;width: 273px;height: 37px;bottom: 70px;left:65px ;background-position: -134px -679px;overflow: visible;}
#intro .btn_left a{width:233px ;left:90px;bottom: 110px}
#intro .btn_left a .line,
#intro .btn_right a .line{bottom:0;width: 100%;height: 3px;background-color: #fff;left: 0;position: absolute; }
#intro .btn_left a .arrow,
#intro .btn_right a .arrow{top:6px;width: 17px;height: 18px;right: 0;position: absolute; background:url("https://ssl.nexon.com/s2/game/tales/event/2019/0822_renovation2_06C3A7A93C7D7E7C/spr_common.png") -134px -746px no-repeat}
#intro .btn_left:hover a .arrow{animation:floating .5s infinite alternate ease-out}
#intro .btn_right:hover a .arrow{animation:floating .5s infinite alternate ease-out}
#intro .title{position: absolute;left: 50%;top:30%;width:987px;height: 519px;margin-left:-494px}
#intro .title span{position:absolute;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/0822_renovation2_06C3A7A93C7D7E7C/title_intro.png") no-repeat }
#intro .title span.tt1{top:0;height:224px;width: 200px;left:176px;background-position: -176px 0}
#intro .title span.tt2{top:0;height:224px;width: 181px;left:376px;background-position: -376px 0}
#intro .title span.tt3{top:0;height:224px;width: 190px;left:557px;background-position: -557px 0}
#intro .title span.tb1{top:184px;height:224px;width: 194px;left:0;background-position: 0 -224px}
#intro .title span.tb2{top:184px;height:224px;width: 184px;left:194px;background-position: -194px -224px}
#intro .title span.tb3{top:184px;height:224px;width: 181px;left:378px;background-position: -378px -224px}
#intro .title span.tb4{top:184px;height:224px;width: 178px;left:559px;background-position: -559px -224px}
#intro .title span.tb5{top:184px;height:224px;width: 204px;left:737px;background-position: -737px -224px}
#intro .title span.t2{top:318px;height:201px;width: 340px;left:290px;background-position: 0 -448px;z-index: 1}
#intro .title span.ti{top:377px;height:62px;width: 376px;right:0;background-position: -361px -567px}


#content1 .inner{background:url("https://ssl.nexon.com/s2/game/tales/event/2019/0822_renovation2_06C3A7A93C7D7E7C/bg_mila.png") center bottom no-repeat}
#content1 .con{width: 1729px;height: 494px;left:36px;bottom: 103px;position: absolute;}
#content1 .con li{height: 100%;float: left;text-indent: -100000px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/0822_renovation2_06C3A7A93C7D7E7C/con_mila.png") no-repeat}
#content1 .con li.c1{width: 278px}
#content1 .con li.c2{width: 349px;background-position: -278px 0}
#content1 .con li.c3{width: 459px;background-position: -627px 0}
#content1 .con li.c4{width: 350px;background-position: -1086px 0}
#content1 .con li.c5{width: 293px;background-position: -1436px 0}
#content1 .name{position: absolute;width: 900px;height: 554px;left:90px;bottom:54%;}
#content1 .name strong{position: absolute;width: 100%;left:0;top:0;height:164px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/0822_renovation2_06C3A7A93C7D7E7C/char_name.png") no-repeat;text-indent: -100000px}
#content1 .name span{position: absolute;bottom:0;height:390px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/0822_renovation2_06C3A7A93C7D7E7C/char_name.png") no-repeat;text-indent: -100000px;transform-origin: center bottom;perspective-origin: left bottom;perspective:800px}
#content1 .name span.w1{width:354px;background-position:0 -164px ;left:0; }
#content1 .name span.w2{width:101px;background-position:-354px -164px;left:354px;  }
#content1 .name span.w3{width:87px;background-position:-454px -164px ;left:454px; }
#content1 .name span.w4{width:360px;background-position:-540px -164px;left:540px; }

#content2 .inner{background:url("https://ssl.nexon.com/s2/game/tales/event/2019/0822_renovation2_06C3A7A93C7D7E7C/bg_lsac.jpg") center bottom no-repeat}
#content2 .con{width: 1367px;height: 683px;left:55px;bottom: 66px;position: absolute;}
#content2 .con li{width:441px;height:441px;text-indent: -100000px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/0822_renovation2_06C3A7A93C7D7E7C/con_isac.png") no-repeat;position: absolute;}
#content2 .con li.c1{top:0;left:232px}
#content2 .con li.c2{top:0;left:695px;background-position: -441px 0}
#content2 .con li.c3{bottom:0;left:0;background-position: -882px 0}
#content2 .con li.c4{bottom:0;left:463px;background-position: -1326px 0}
#content2 .con li.c5{bottom:0;left:926px;background-position: -1767px 0}
#content2 .name{position: absolute;width: 900px;height: 572px;left:90px;bottom:56%;}
#content2 .name strong{position: absolute;width: 100%;left:0;top:0;height:164px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/0822_renovation2_06C3A7A93C7D7E7C/char_name.png") 0 -700px no-repeat;text-indent: -100000px}
#content2 .name span{position: absolute;bottom:0;height:390px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/0822_renovation2_06C3A7A93C7D7E7C/char_name.png") no-repeat;text-indent: -100000px;transform-origin: center bottom;perspective-origin: left bottom;perspective:800px}
#content2 .name span.w1{width:104px;background-position:0 -882px ;left:0; }
#content2 .name span.w2{width:240px;background-position:-104px -882px;left:104px;  }
#content2 .name span.w3{width:243px;background-position:-344px -882px ;left:344px; }
#content2 .name span.w4{width:250px;background-position:-587px -882px;left:587px; }
#content2 .name span.w5{width:250px;background-position:-839px -882px;left:839px; }


#content3 .inner{background:url("https://ssl.nexon.com/s2/game/tales/event/2019/0822_renovation2_06C3A7A93C7D7E7C/bg_roamini.jpg") center bottom no-repeat}
#content3 .con{width: 1732px;height: 721px;left:38px;bottom: 59px;position: absolute;}
#content3 .con li{height:478px;text-indent: -100000px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/0822_renovation2_06C3A7A93C7D7E7C/con_roamini.png") no-repeat;position: absolute;}
#content3 .con li.c1{height:323px;width: 350px;top:0;left:250px;background-position: -250px 0}
#content3 .con li.c2{height:323px;width: 350px;top:0;left:1119px;background-position: -1119px 0}
#content3 .con li.c3{width: 430px;bottom:0;left:0;background-position: 0 -323px}
#content3 .con li.c4{width: 436px;bottom:0;left:433px;background-position: -433px -323px}
#content3 .con li.c5{width: 434px;bottom:0;left:869px;background-position: -869px -323px}
#content3 .con li.c6{width: 429px;bottom:0;left:1303px;background-position: -1303px -323px}
#content3 .name{position: absolute;width: 1607px;height: 551px;left:90px;bottom:66.5%;}
#content3 .name strong{position: absolute;width: 100%;left:0;top:0;height:164px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/0822_renovation2_06C3A7A93C7D7E7C/char_name.png") 0 -1400px no-repeat;text-indent: -100000px}
#content3 .name span{position: absolute;bottom:0;height:387px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/0822_renovation2_06C3A7A93C7D7E7C/char_name.png") no-repeat;text-indent: -100000px;transform-origin: center bottom;perspective-origin: left bottom;perspective:800px}
#content3 .name span.w1{width:279px;background-position:0 -1564px ;left:0; }
#content3 .name span.w2{width:262px;background-position:-279px -1564px;left:279px;  }
#content3 .name span.w3{width:252px;background-position:-540px -1564px ;left:540px; }
#content3 .name span.w4{width:383px;background-position:-791px -1564px;left:791px; }
#content3 .name span.w5{width:96px;background-position:-1173px -1564px;left:1173px;  }
#content3 .name span.w6{width:262px;background-position:-1268px -1564px ;left:1268px; }
#content3 .name span.w7{width:79px;background-position:-1529px -1564px;left:1529px; }
#content3 .btn{position: absolute;bottom: 0;left:50%;margin-left:-273px;width: 545px;height: 120px}
#content3 .btn a{background-position: -97px -85px;width: 100%;height: 100%;}
#content3 .btn a:hover{background-position: -97px -234px}
#content3 .btn span{position: absolute;width: 299px;height: 20px;top:50px;right:-54px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/0822_renovation2_06C3A7A93C7D7E7C/spr_common.png") -337px -464px no-repeat}

#event .inner{background:url("https://ssl.nexon.com/s2/game/tales/event/2019/0822_renovation2_06C3A7A93C7D7E7C/bg_event.jpg") center top no-repeat;background-size: auto !important;}
#event .particle span{position:absolute;}
#event .particle .p1{width: 21px;height: 21px;background-color: #00927b;left:49px;top:70px;}
#event .particle .p2{width: 38px;height: 38px;background-color: #e29942;left:165px;top:193px;border-radius: 50%}
#event .particle .p3{width: 38px;height: 38px;background-color: #4285e2;left:42px;top:975px;border-radius: 50%}
#event .particle .p4{width: 21px;height: 21px;background-color: #00927b;left:192px;top:1160px;}
#event .particle .p5{width: 21px;height: 21px;background-color: #e29942;left:93px;top:1648px;}
#event .particle .p6{width: 38px;height: 38px;background-color: #e29942;right:184px;top:94px;border-radius: 50%}
#event .particle .p7{width: 21px;height: 21px;background-color: #00927b;right:74px;top:472px;}
#event .particle .p8{width: 38px;height: 38px;background-color: #e29942;right:234px;top:1002px;border-radius: 50%}
#event .particle .p9{width: 21px;height: 21px;background-color: #bd55be;right:86px;top:1313px;}
#event .title{position: absolute;width: 1258px;height: 212px;top:98px;left:50%;margin-left:-629px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/0822_renovation2_06C3A7A93C7D7E7C/title_event.png") no-repeat}
#event .con{position: absolute;width: 1364px;height: 1464px;top:348px;left:50%;margin-left:-682px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/0822_renovation2_06C3A7A93C7D7E7C/con_event.png") no-repeat}
#event .con li{width: 682px;height: 732px;float:left;position: relative;}
#event .con li a{position:absolute;width: 487px;height: 80px;left:85px;bottom:75px;border-top:3px solid #292929;background-position:-133px -939px }
#event .con li:hover a{border-top:3px solid #fff;background-position:-133px -833px }
#event .con li.c2 a,
#event .con li.c3 a{width: 310px;background-position: -890px -1096px;left:170px;}
#event .con li.c3 a,
#event .con li.c4 a{bottom:82px;}
#event .con li.c2:hover a,
#event .con li.c3:hover a{background-position: -890px -990px;}

#footer{height: 200px;}
#footer p{position:absolute;width: 459px;height: 18px;left: 50%;top:50%;margin-top:-9px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/0822_renovation2_06C3A7A93C7D7E7C/copy.png") no-repeat;margin:-9px 0 0 -230px;text-indent:-100000px;}

@media screen and (max-width: 1300px) {
    #intro{height: 714px}
    #content1{height: 951px;margin-top:44px}
    #content2{height: 881px;margin-top:135px}
    #content3{height: 1232px;margin-top:135px}
    #event{margin-top:100px;}

    #content1 .con,
    #content2 .con,
    #content3 .con,
    .section .name,
    #intro .title{transform: scale(.68);}
    #intro .btn_left,
    #intro .btn_right{bottom:0;transform: scale(.68);}
    #event .con,
    #event .title{transform: scale(.9);}
    #content3 .name{transform: scale(.63);}
    .section{width: 1280px}

}

@media screen and (min-width: 1300px) and (max-width: 1500px) {
    #intro{height: 825px}
    #content1{height: 1100px;margin-top:51px}
    #content2{height: 1019px;margin-top:155px}
    #content3{height: 1424px;margin-top:155px}
    #event{margin-top:117px;}

    #content1 .con,
    #content2 .con,
    #content3 .con,
    .section .name,
    #intro .title{transform: scale(.78);}
    #intro .btn_left,
    #intro .btn_right{bottom:0;transform: scale(.78);}
    #event .con,
    #event .title{transform: scale(.9);}
    #content3 .name{transform: scale(.74);}
}

@media screen and (min-width: 1500px) and (max-width: 1700px) {
    #intro{height: 937px}
    #content1{height: 1248px;margin-top:58px}
    #content2{height: 1156px;margin-top:176px}
    #content3{height: 1616px;margin-top:176px}
    #event{margin-top:133px;}

    #content1 .con,
    #content2 .con,
    #content3 .con,
    .section .name,
    #intro .title,
    #intro .btn_left,
    #intro .btn_right{transform: scale(.86);}
   
}

@media screen and (min-width: 0) and (max-width: 1850px) {
    #content1 .con,
    #content2 .con,
    #content3 .con,
    .section .name{left:0;transform-origin: left bottom;}  
    #intro .title{transform-origin: center top;}

    #intro .btn_left,
    #intro .btn_right  {transform-origin: center bottom;}
}

@keyframes floating{
    from{transform:translateX(5)}
    to{transform:translateX(-10px)}
}