@charset "utf-8";

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight:400;
    src: url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),
        url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),
        url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');
}

/* 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:"Noto Sans KR", "맑은 고딕","Malgun Gothic","돋움","dotum",sans-serif;font-size:16px;color:#fff;line-height:1;background:#3770FF}
input,textarea,button,select{font-size:inherit;font-family:"Noto Sans KR", "맑은 고딕","Malgun Gothic","돋움","dotum",sans-serif;color:#fff}
img,fieldset,button{border:0}
button{cursor:pointer;outline:0}
button:disabled, button[disabled]{cursor:default}
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}

/* layout */
#wrap{position:relative;width:100%;overflow:hidden;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0519_secondrun/book/bg.png") 50% 0 no-repeat;min-width:1240px}
#wrap .section{position:relative;width:100%;*overflow-x:hidden}
#wrap .section .container{position:relative;width:1119px;margin:0 auto}

/* common */
.intro .btn_intv, .intro .btn_intv span, .content .coupon_form button, .content .list_book .book_btn button span, .content .list_book .book_btn.disabled .cover,  .content .list_book .btn_event, .pop_video .pop_content .btn_close{display:block;text-indent:-9999px;overflow:hidden;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0519_secondrun/book/spr_btn.png") no-repeat}
#wrap .curtain{position:absolute;top:0;left:0;width:100%;height:100%;z-index:200;background:#fff}

/* 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 button{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 h1{position:absolute;top:14px;left:90px}
.header h1 a{width:146px;height:63px}
.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}

/* intro */
.intro .container{padding-top:90px;height:911px}
.intro .twinkle{position:absolute;top:0;left:50%;width:1920px;height:2568px;margin-left:-960px}
.intro .tw1{background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0519_secondrun/book/bg_twinkle_1.png") no-repeat;animation:twinkle1 1s infinite alternate linear}
.intro .tw2{opacity:0;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0519_secondrun/book/bg_twinkle_2.png") no-repeat;animation:twinkle2 1s infinite alternate linear}
.intro .txt_wrap{position:absolute;top:0;left:0;width:100%;height:100%}
.intro .txt_wrap span{position:absolute;opacity:0}
.intro .txt_wrap .load{opacity:1;transition:all 0.3s linear}
.intro .txt_wrap .mt{opacity:0;transform:scale(0.95);transition:all 1s 0.2s linear}
.intro .txt_wrap .st{position:absolute;top:0;left:0;transition:all 1s linear}
.intro .txt_wrap .load .mt{opacity:1;transform:scale(1)}
.intro .txt_wrap .load .st{opacity:0;transform:scale(1.05)}
.intro .txt_wrap .t1{left:-234px;top:306px}
.intro .txt_wrap .t2{left:1019px;top:664px}
.intro .txt_wrap .t3{left:237px;top:155px}
.intro .txt_wrap .t4{left:-372px;top:768px}
.intro .tit_wrap{position:absolute;top:283px;left:50%;width:989px;height:426px;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0519_secondrun/book/tit.png") no-repeat;margin-left:-486px}
.intro .btn_intv{position:absolute;top:756px;left:50%;width:279px;height:195px;margin-left:-140px}
.intro .btn_intv span{position:absolute;top:0;left:0;width:100%;height:100%;background-position:-351px 0;filter:alpha(opacity=0);opacity:0;transition:all 200ms linear}
.intro .btn_intv:hover span{filter:alpha(opacity=100);opacity:1}

/* content */
.content{height:1567px}
.content .container{padding-top:444px}
.content .coupon_form{position:relative;width:865px;overflow:hidden;margin:0 auto 89px}
.content .coupon_form label{position:absolute;top:2px;left:32px;cursor:text}
.content .coupon_form.focus label{display:none}
.content .coupon_form .text , .content .coupon_form label{font-size:30px;line-height:74px;color:#6f6f6f}
.content .coupon_form .text{width:670px;height:74px;border:2px solid #8C90A0;border-right:0;padding-left:30px}
.content .coupon_form .text, .content .coupon_form button{float:left}
.content .coupon_form .text:focus{outline:0}
.content .coupon_form button{width:163px;height:78px;background-color:#FF7234;border:2px solid #FFAB4E;background-position:-2px -234px;transition:all 200ms linear}
.content .coupon_form button:hover{background-color:#3872FF;border-color:#54ABFF}
.content .list_book{position:relative;height:696px}
.content .list_book .book_btn, .content .list_book .btn_event{position:absolute}
.content .list_book .btn_event{top:247px;width:210px;height:40px}
.content .list_book .book_btn{width:154px;height:52px}
.content .list_book .book_btn button, .content .list_book .book_btn button span{display:block;width:100%;height:100%}
.content .list_book .book_btn button{background:none;transition:all 50ms linear}
.content .list_book .book_btn button:hover{padding-top:6px}
.content .list_book .book_btn.disabled button{display:none}
.content .list_book .book_btn.disabled .cover{position:absolute;top:0;left:0;display:block;width:154px;height:46px;background-position:-526px -296px}
.content .list_book .floor1 .book_btn{top:114px}
.content .list_book .floor2 .book_btn{top:498px}
.content .list_book .part1 .book_btn{left:150px}
.content .list_book .part1 .book_btn button span{background-position:-193px -234px}
.content .list_book .part2 .book_btn{left:480px}
.content .list_book .part2 .book_btn button span{background-position:-358px -234px}
.content .list_book .part3 .book_btn{left:810px}
.content .list_book .part3 .book_btn button span{background-position:-193px -296px}
.content .list_book .part4 .book_btn{left:319px}
.content .list_book .part4 .book_btn button span{background-position:-358px -296px}
.content .list_book .part5 .book_btn{left:649px}
.content .list_book .part5 .book_btn button span{background-position:-526px -232px}
.content .list_book .part1 .btn_event{left:120px;background-position:0 -369px}
.content .list_book .part2 .btn_event{left:450px;background-position:-230px -369px}
.content .list_book .part3 .btn_event{left:780px;background-position:-470px -369px}

/* popup */
.pop_wrap{display:none;position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index:9999999}
.pop_wrap .bg{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background:#182441;filter:alpha(opacity=90);opacity:0.9}
.pop_wrap .pop_content{position:absolute;top:50%;left:50%}
.pop_video .pop_content{width:1100px;height:619px;background:#000;margin:-310px 0 0 -550px}
.pop_video .pop_content .btn_close{position:absolute;right:0;top:-84px;width:49px;height:49px;background-position:-651px 0}


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

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