@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}
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:16px;color:#fff;line-height:1;background:#14111A;overflow-y:hidden}
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:#fff}
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}

/* layout */
#wrap{position:relative;width:100%;height:1200px;max-height:1200px;overflow:hidden;min-width:1280px}
#wrap .section{position:absolute;left:0;width:100%;height:100%;text-align:center}
.section img{height:100%}

/* common */
.header .btn_hide, .preview .btn_top{background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0519_secondrun/main/spr_btn.png") no-repeat;text-indent:-9999px;overflow:hidden}
.list{position:absolute;left:0;width:100%;font-size:0}
.list li{display:inline-block;*display:inline;*zoom:1;height:100%}
.list li a{position:relative;display:block;width:100%;height:100%}

/* header */
#wrap .header{position:absolute;top:0;left:0;width:100%;height:90px;background:#477BFF;z-index:100}
#wrap .header.fixed{position:fixed}
.header a, .header .nav li a .cover, .header .btn_game{display:block;text-indent:-99999px;overflow:hidden;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0519_secondrun/spr_header.png") no-repeat}
.header .nav ul{text-align:center;font-size:0;margin-right:-5px}
.header .nav li{display:inline-block;*display:inline;*zoom:1}
.header .nav li a{position:relative;width:209px;height:90px;margin-right:5px}
.header .nav li a .cover{width:100%;height:100%;filter:alpha(opacity=0);opacity:0;transition:opacity 200ms linear}
.header .nav .on .cover, .header .nav a:hover .cover{filter:alpha(opacity=100);opacity:1}
.header .nav .nav1{margin-left:-13px}
.header .nav .nav1 a{width:222px;background-position:-169px 0}
.header .nav .nav1 .cover{background-position:-169px -119px}
.header .nav .nav2 a{background-position:-396px 0}
.header .nav .nav2 .cover{background-position:-396px -119px}
.header .nav .nav3 a{background-position:-610px 0}
.header .nav .nav3 .cover{background-position:-610px -119px}
.header .nav .nav4 a{background-position:-824px 0}
.header .nav .nav4 .cover{background-position:-824px -119px}
.header .util{position:absolute;top:23px;right:90px}
.header .util ul{overflow:hidden}
.header .util li{float:left}
.header .util li a{width:41px;height:47px;margin-left:3px}
.header .util .btn_home a{background-position:-601px -281px}
.header .util .btn_fb a{background-position:-645px -281px}
.header .util .btn_tw a{background-position:-689px -281px}
.header .util .btn_game{position:absolute;top:2px;left:-193px;width:176px;height:48px;background-position:-181px -282px;transition:top 50ms linear}
.header .util .btn_game:hover{top:5px;height:45px;background-position:-385px -282px}
.header .btn_hide{position:absolute;top:104px;right:0;width:140px;height:22px}

/* frame wrap */
.frame_wrap .obj{z-index:1}
.frame_wrap h1{position:absolute;top:125px;left:50%;margin-left:-77px}
.frame_wrap h1 a{width:199px;height:85px}
.frame_wrap .bd{position:absolute;visibility:hidden;filter:alpha(opacity=30);opacity:0.3;background:#fff;transition:all 300ms linear}
.frame_wrap .bd_tl, .frame_wrap .bd_tr{top:180px;height:1px;transform:scaleX(0)}
.frame_wrap .bd_tl, .frame_wrap .bd_l, .frame_wrap .bd_bl{left:90px}
.frame_wrap .bd_tr, .frame_wrap .bd_r, .frame_wrap .bd_br{right:90px}
.frame_wrap .bd_l, .frame_wrap .bd_r{top:181px;width:1px;bottom:91px;transform-origin:0 0;transform:scaleY(0);transition-delay:300ms}
.frame_wrap .bd_tl, .frame_wrap .bd_bl{right:50%}
.frame_wrap .bd_tr, .frame_wrap .bd_br{left:50%}
.frame_wrap .bd_tl{transform-origin:100% 0;margin-right:93px}
.frame_wrap .bd_tr{left:50%;transform-origin:0 0;margin-left:93px}
.frame_wrap .bd_bl{transform-origin:0 0}
.frame_wrap .bd_br{transform-origin:100% 0}
.frame_wrap .bd_br, .frame_wrap .bd_bl{height:1px;bottom:90px;transform:scaleX(0);transition-delay:600ms}
.frame_wrap .dt_tl, .frame_wrap .dt_tr{top:179px}
.frame_wrap .dt_br, .frame_wrap .dt_bl{bottom:89px}
.frame_wrap .dt_tl, .frame_wrap .dt_bl{left:89px}
.frame_wrap .dt_tr, .frame_wrap .dt_br{right:89px}
.frame_wrap .dot{position:absolute;visibility:hidden;width:3px;height:3px;transform:scale(0);background:#fff;transition:all 300ms 900ms linear}
.load .frame_wrap .bd, .load .frame_wrap .dot{transform:scale(1);visibility:visible}
.frame_wrap .copyright{position:absolute;bottom:30px;left:0;width:100%;height:13px;text-align:center}
.frame_wrap .copyright img{height:100%}

/* intro */
.intro{top:0;*position:static !important}
.intro .bg_video{position:absolute;top:0;left:0;width:100%;height:100%;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0519_secondrun/main/bg_video.jpg") 50% 0 no-repeat;overflow:hidden}
.intro .bg_video video{position:absolute;top:0;left:0}
.intro .bg_video .cover{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;filter:alpha(opacity=70);opacity:0.7}
.intro .bg_video .btn_sound{display:none}
.intro .bg_video .btn_sound:last-child{display:block;position:absolute;top:214px;right:117px;width:96px;height:10px;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0519_secondrun/main/spr_btn_sound.png") no-repeat;opacity:0.5;z-index:1}
.intro .bg_video .btn_sound:last-child .eq{position:absolute;bottom:0;width:4px;height:4px;background:#fff}
.intro .bg_video .btn_sound .eq:nth-child(2){right:16px}
.intro .bg_video .btn_sound .eq:nth-child(3){right:8px}
.intro .bg_video .btn_sound .eq:last-child{right:0}
.intro .bg_video .btn_sound:last-child.active{opacity:1;background-position:0 -23px;overflow:visible}
.intro .bg_video .btn_sound.active .eq:nth-child(2){height:50%;animation:equalize1 3s infinite alternate}
.intro .bg_video .btn_sound.active .eq:nth-child(3){heigth:150%;animation:equalize2 3s infinite alternate}
.intro .bg_video .btn_sound.active .eq:last-child{height:110.25%;animation:equalize3 3s infinite alternate}

.intro .bg_video .btn_sound.on{opacity:1;background-position:0 -23px}
.intro .container{position:relative;width:1240px;height:100%;margin:0 auto;*position:static}
.intro h2{position:absolute;top:34.3%;left:0;width:100%;height:23.75%;overflow:hidden;transform:translateY(10px)}
.intro .sub_tit{position:absolute;top:56.4%;height:3.084%;left:0;width:100%;overflow:hidden;transform:translateY(-10px)}
.intro .sub_tit p{position:relative;display:inline-block;*display:inline;*zoom:1;height:100%}
.intro .sub_tit span{position:absolute;top:48.65%;width:40.795%;height:1px;background:#fff;filter:alpha(opacity=20);opacity:0.2}
.intro h2, .intro .sub_tit{opacity:0;visibility:hidden}
.load .intro h2, .load .intro .sub_tit{visibility:visible;transform:translateY(0);opacity:1;transition:all 500ms 500ms linear}
.intro .sub_tit .bd_l{left:-46.57%}
.intro .sub_tit .bd_r{right:-46.57%}
.intro .video_btn, .intro .lnb{visibility:hidden;opacity:0}
.load .intro .video_btn, .load .intro .lnb{visibility:visible;opacity:1;transition:all 300ms 1s linear}
.intro .video_btn{position:absolute;left:0;top:64.6%;width:100%;height:9.75%}
.intro .video_btn button{position:relative;height:100%;background:none}
.intro .video_btn img{transition:all 200ms linear}
.intro .video_btn .over{position:absolute;top:0;left:0;filter:alpha(opacity=0);opacity:0;transform:scale(0.95)}
.intro .video_btn button:hover .off{*display:none;filter:alpha(opacity=0);opacity:0}
.intro .video_btn button:hover .over{*position:relative;*display:block;filter:alpha(opacity=100);opacity:1;transform:scale(1)}
.intro .lnb{bottom:6.34%;height:9.67%;z-index:1}
.intro .lnb li{overflow:hidden;margin:0 5px}
.intro .lnb li .off{transition:all 200ms linear}
.intro .lnb li a:hover .off{transform:scale(1.1)}
.intro .lnb .txt{position:absolute;left:0;top:68.9%;width:100%;height:auto}

/* preview */
.preview{position:absolute;top:100%;background:#14111A;overflow:hidden}
.preview .bg_cnt div{display:none;position:absolute;top:0;left:0;width:100%;height:100%}
.preview .bg_cnt .twinkle{position:absolute;top:50%;left:50%;width:1920px;height:1200px;margin:-600px 0 0 -960px}
.preview .bg_cnt .tw2{opacity:0}
.preview .bg_cnt .on{display:block}
.preview .bg_cnt div .particle span{position:absolute}
.preview .bg1{background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0519_secondrun/main/bg_content1.jpg") 50% 50% no-repeat}
.preview .bg2{background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0519_secondrun/main/bg_content2.jpg") 50% 50% no-repeat}
.preview .bg3{background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0519_secondrun/main/bg_content3.jpg") 50% 50% no-repeat}
.preview .bg1 .particle span{background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0519_secondrun/main/spr_flower.png") no-repeat;transition:transform 0ms linear}
.preview .bg1 .particle .f1{width:36px;height:19px}
.preview .bg1 .particle .f2{width:56px;height:39px;background-position:0 -156px}
.preview .bg1 .particle .f3{width:87px;height:49px;background-position:0 -316px}
.preview .bg1 .particle .f4{width:40px;height:50px;background-position:0 -481px}
.preview .bg1 .particle .f5{width:51px;height:61px;background-position:0 -641px}
.preview .bg1 .particle .f6{width:62px;height:76px;background-position:0 -799px}
.preview .bg2 .tw1{background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0519_secondrun/main/bg_content2_twinkle_1.png") 50% 50% no-repeat}
.preview .bg2 .tw2{background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0519_secondrun/main/bg_content2_twinkle_2.png") 50% 50% no-repeat}
.preview .bg2.on .tw1{animation:twinkle1 0.5s infinite alternate linear}
.preview .bg2.on .tw2{animation:twinkle2 0.5s infinite alternate linear}
.preview .bg3 .tw1{background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0519_secondrun/main/bg_content3_twinkle_1.png") 50% 50% no-repeat}
.preview .bg3 .tw2{background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0519_secondrun/main/bg_content3_twinkle_2.png") 50% 50% no-repeat}
.preview .bg3.on .tw1{animation:twinkle1 0.8s infinite alternate linear}
.preview .bg3.on .tw2{animation:twinkle2 0.9s infinite alternate linear}
.preview .bg3 .particle span{background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0519_secondrun/main/spr_light.png") no-repeat}
.preview .bg3 .particle .l1{width:29px;height:28px}
.preview .bg3 .particle .l2{width:34px;height:34px;background-position:0 -60px}
.preview .bg3 .particle .l3{width:34px;height:32px;background-position:0 -129px}
.preview .bg3 .particle .l4{width:26px;height:26px;background-position:0 -201px}
.preview .bg3 .particle .l5{width:28px;height:26px;background-position:0 -258px}
.preview .bg3 .particle .l6{width:29px;height:45px;background-position:0 -320px}
.preview .bg3 .particle .l7{width:25px;height:26px;background-position:0 -395px}
.preview .menu{position:absolute;top:41.67%;left:0;width:100%;height:24.34%;font-size:0}
.preview .menu li{margin:0 63px}
.preview .menu li img{transition:all 200ms linear}
.preview .menu li .over{position:absolute;top:0;left:0;filter:alpha(opacity=0);opacity:0;transform:scale(1.05)}
.preview .menu .on .over{filter:alpha(opacity=100);opacity:1;transform:scale(1)}
.preview .menu .on .off{filter:alpha(opacity=0);opacity:0}
.preview .btn_top{position:absolute;bottom:111px;right:111px;width:54px;height:54px;background-position:0 -206px}

/* sub */
.sub .frame_wrap .obj{z-index:10}
.sub .preview{z-index:5}

/* layer popup */
.pop_wrap{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index:9999999}
.pop_wrap.hide{display:none}
.pop_wrap .bg{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background:#14121b}
.pop_wrap .btn_close img, .pop_wrap .btn_hide_video img{position:absolute;top:0;left:0}
.pop_wrap .btn_close{position:absolute;top:50px;right:50px;width:79px;height:79px;background:none;z-index:1}
.pop_wrap .btn_hide_video{position:absolute;right:0;top:12.6%;background:none;width:169px;height:22px}
.pop_wrap .pop_content{position:absolute;top:50%;left:50%;width:1100px;height:930px;max-height:930px;text-align:center;margin:-465px 0 0 -550px}
.pop_wrap .pop_content.fixed{top:0;height:100%;margin-top:0}
.pop_wrap .tab_content{display:none;position:relative;width:100%;height:100%}
.pop_wrap .tab_content.on{display:block}
.pop_wrap .tab_content h2{height:17.74%}
.pop_wrap .tab_content h2 img{display:block;height:100%;margin:0 auto}
.pop_wrap .video_wrap{width:100%;height:66.6%;background:#000;margin:0 auto}
.pop_wrap .video_wrap iframe{width:100%;height:100%}
.pop_wrap .list{bottom:5.06%;height:6.88%}
.pop_wrap .list li{margin:0 10px}
.pop_wrap .list li a img{max-width:270px;height:162.5%;transition:all 100ms linear}
.pop_wrap .list li .over{position:absolute;left:0;top:-15.625%}
.pop_wrap .list li .over, .pop_wrap .list .on .off, .pop_wrap .list a:hover .off{filter:alpha(opacity=0);opacity:0}
.pop_wrap .list .on .over, .pop_wrap .list a:hover .over{filter:alpha(opacity=100);opacity:1}

/* animation */
@keyframes twinkle1{
    0% {opacity:1}
    100% {opacity:0}
}

@keyframes twinkle2{
    0% {opacity:0}
    100% {opacity:1}
}

@keyframes equalize1 {
  0% {height: 50%;}
  4% {height: 20.5%}
  8% {height: 50%}
  12% {height: 80.75%}
  16% {height: 120.5%}
  20% {height: 160.25%}
  24% {height: 150%}
  28% {height: 130.75%}
  32% {height: 130.75%}
  36% {height: 100%}
  40% {height: 120.5%;}
  44% {height: 120.5%;}
  48% {height: 130.75%;}
  52% {height: 150%;}
  56% {height: 160.25%;}
  60% {height: 150%;}
  64% {height: 90%;}
  68% {height: 130.75%;}
  72% {height: 120.5%}
  76% {height: 130.75%}
  80% {height: 150%}
  84% {height: 60%;}
  88% {height: 16.25%;}
  92% {height: 120.5%;}
  96% {height: 80.75%;}
  100% {height: 50%;}
}

@keyframes equalize2 {
  0% {height: 150%;}
  4% {height: 160.25%;}
  8% {height: 150%;}
  12% {height: 100%;}
  16% {height: 130.75%;}
  20% {height: 120.75%;}
  24% {height: 90.75%;}
  28% {height: 150%;}
  32% {height: 80%;}
  36% {height: 160.25%;}
  40% {height: 80.25%;}
  44% {height: 160.25%;}
  48% {height: 130.75%;}
  52% {height: 100%;}
  56% {height: 70.5%;}
  60% {height: 100%;}
  64% {height: 120.5%;}
  68% {height: 130.75%;}
  72% {height: 160.25%;}
  76% {height: 150%;}
  80% {height: 110%;}
  84% {height: 130.75%;}
  88% {height: 90.75%;}
  92% {height: 50.25%;}
  96% {height: 30.75%;}
  100% {height: 105%;}
}

@keyframes equalize3 {
  0% {height: 110.25%;}
  4% {height: 80.75%;}
  8% {height: 112.25%;}
  12% {height: 130.75%;}
  16% {height: 160.25%;}
  20% {height: 120.75%;}
  24% {height: 70.5%;}
  28% {height: 130.75%;}
  32% {height: 110.25%;}
  36% {height: 100%;}
  40% {height: 80.75%;}
  44% {height: 60.25%;}
  48% {height: 100%;}
  52% {height: 120.5%;}
  56% {height: 130.75%;}
  60% {height: 160.25%;}
  64% {height: 150%;}
  68% {height: 90.75%;}
  72% {height: 60.75%;}
  76% {height: 120.5%;}
  80% {height: 150%;}
  84% {height: 160.25%;}
  88% {height: 170.5%;}
  92% {height: 150%;}
  96% {height: 120.5%;}
  100% {height: 110.25%;}
}