@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-Regular.woff2) format('woff2'),
        url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),
        url(https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');
}

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

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

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight:100;
    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:#FFC900}
input,textarea,button,select{font-size:inherit;font-family:"Noto Sans KR", "맑은 고딕","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%;overflow:hidden;min-width:1240px}
#wrap .section{position:relative;width:100%}
#wrap .section .container{position:relative;width:1100px;margin:0 auto;padding-left:1px}
#wrap .section .bg{position:absolute;left:50%;width:1920px;margin-left:-960px}

/* common */
.content1 button, .content2 .btn_coupon2, .content2 .share_btn a, .content2 .share_form .btn_submit, .content2 .share_area .pager .move, .quick li a span, .quick .btn_top, .pop_wrap .pop_content .btn_close, .pop_noti_char .btn_apply{display:block;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0519_secondrun/join/spr_btn.png") no-repeat;text-indent:-9999px;overflow:hidden}

/* 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{background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0519_secondrun/join/bg_intro.jpg") 50% 0 no-repeat}
.intro .container{height:1160px;padding-top:90px}
.intro .tit{position:absolute;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0519_secondrun/join/h2.png") no-repeat;opacity:0;transition:opacity 500ms ease, transform 1000ms ease}
.intro .t1{top:148px;left:-95px;width:1017px;height:482px;transform:translateX(100px);transition-delay:100ms}
.intro .t2{top:503px;left:616px;width:613px;height:413px;background-position:-1px -527px;transition-delay:300ms;transform:translateX(-100px)}
.intro.load .tit{opacity:1;transform:translateX(0)}
.intro .ptc{position:absolute}
.intro .dot{top:521px;left:-114px;width:70px;height:70px;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0519_secondrun/join/img_dot.png") no-repeat}
.intro .char{top:432px;left:92px;width:818px;height:820px;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0519_secondrun/join/img_char.png") no-repeat}

/* flowers */
#flower{position:absolute;top:0;width:100%}
#flower span{position:absolute;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0519_secondrun/join/spr_flower.png") no-repeat}
#flower .flutter{transition:transform 3000ms linear}
#flower .f1, #flower .f9{width:124px;height:102px}
#flower .f2, #flower .f7{width:61px;height:29px;background-position:0 -205px}
#flower .f3, #flower .f8{width:79px;height:37px;background-position:0 -539px}
#flower .f4{width:167px;height:114px;background-position:0 -747px}
#flower .f5{width:178px;height:122px;background-position:0 -1082px}
#flower .f6, #flower .f10{width:106px;height:73px;background-position:0 -327px}

.sub.section{padding-top:90px;margin-top:-90px}

/* content1 */
.content1 .container{height:1851px}
.content1 .bg{top:-302px;height:2243px;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0519_secondrun/join/bg_content1.png") 50% 0 no-repeat}
.content1 button{position:absolute}
.content1 .btn_coupon1_1{top:335px;right:150px;width:160px;height:42px}
.content1 .btn_coupon1_1:hover{background-position:0 -54px}
.content1 .btn_coupon1_2{top:1040px;left:242px;width:142px;height:38px;background-position:-191px 0}
.content1 .btn_coupon1_2:hover{background-position:-191px -55px}
.content1 .btn_apply_noti{top:597px;left:244px;width:615px;height:155px;background-position:0 -165px}
.content1 .btn_apply_noti:hover{background-position:0 -345px}

/* content2 */
.content2{z-index:1}
.content2 .bg_cnt{top:-346px;height:2919px;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0519_secondrun/join/bg_content2.png") 50% 0 no-repeat;padding-top:346px}
.content2 .bg_color{top:90px;bottom:392px;background:#FF87CF}
.content2 .container{padding:651px 0 123px}
.content2 .btn_coupon2{position:absolute;top:404px;right:144px;width:160px;height:42px;background-position:-367px 0}
.content2 .btn_coupon2:hover{background-position:-367px -54px}
.content2 .video_area{width:100%;height:619px;background:#000;margin-bottom:116px}
.content2 .share_area{width:938px;margin:0 auto}
.content2 .share_btn{font-size:0;text-align:center;margin-bottom:124px}
.content2 .share_btn a{display:inline-block;*text-indent:0;*zoom:1;width:240px;height:64px;margin:0 5px}
.content2 .share_btn .btn_fb{background-position:-672px 0}
.content2 .share_btn .btn_fb:hover{background-position:-672px -89px}
.content2 .share_btn .btn_tw{background-position:-672px -182px}
.content2 .share_btn .btn_tw:hover{background-position:-672px -281px}
.content2 .share_form{position:relative}
.content2 .share_form .textarea{position:relative;width:813px}
.content2 .share_form .textarea label, .content2 .share_form .textarea textarea{line-height:21px;font-weight:lighter}
.content2 .share_form .textarea label{position:absolute;top:17px;left:23px;cursor:text;color:#828282}
.content2 .share_form .textarea.focus label{display:none}
.content2 .share_form .textarea textarea{display:block;width:767px;height:96px;color:#393939;resize:none;border:0 none;overflow-y:auto;outline:0;background:#fff;padding:17px 23px 0}
.content2 .share_form .textarea .total_txt{position:absolute;right:10px;bottom:8px;font-size:14px;color:#5b5b5b}
.content2 .share_form .btn_submit{position:absolute;right:-36px;top:0;width:161px;height:128px;background-position:-672px -372px}
.content2 .share_list{padding-top:20px}
.content2 .share_list li{border-bottom:2px solid #EC7CBF;padding:20px 0 19px}
.content2 .share_list .info{font-size:0}
.content2 .share_list .game-id{display:inline-block;*zoom:1;font-size:16px;color:#4c1637;font-weight:600;margin:-1px 0 0 13px}
.content2 .share_list .cont{color:#4c1636;line-height:21px;word-break:break-all;margin:11px 0}
.content2 .share_list .btn-comt-delete{display:inline-block;*zoom:1;width:15px;height:15px;background:url(https://ssl.nexon.com/s2/game/tales/event/2018/0502_showcase/btn_comt_delete.png) no-repeat;vertical-align:bottom;margin:0 0 2px 5px}
.content2 .share_list .date{font-size:14px;color:#c75299}
.content2 .share_area .pager{font-size:0;text-align:center;margin-top:46px}
.content2 .share_area .pager span, .content2 .share_area .pager a{display:inline-block;*zoom:1;vertical-align:top}
.content2 .share_area .pager .move{display:inline-block;*display:inline;*zoom:1;*text-indent:0;width:25px;height:25px} 
.content2 .share_area .move.first{background-position:-910px -388px;margin-right:3px}
.content2 .share_area .move.prev{background-position:-938px -388px}
.content2 .share_area .move.last{background-position:-933px -431px}
.content2 .share_area .move.next{background-position:-905px -431px;margin-right:3px}
.content2 .share_area .pager .num{padding:0 15px}
.content2 .share_area .pager .num span, .content2 .share_area .pager .num a{font-size:16px;line-height:22px;padding:0 4px;margin:0 7px}
.content2 .share_area .pager .num span{color:#fff;border-bottom:4px solid #fff;padding-bottom:1px}
.content2 .share_area .pager .num a{color:#8b3352;padding-bottom:5px}

/* content3 */
.content3 .container{height:1584px}
.content3 .bg{top:-302px;height:1976px;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0519_secondrun/join/bg_content3.png") 50% 0 no-repeat}

/* quick */
.quick{position:absolute;top:140px;right:82px;width:141px;z-index:50}
.quick.fixed{position:fixed;top:50%;margin-top:-298px}
.quick li{padding-bottom:10px}
.quick li a{position:relative;display:block;width:141px;height:141px;transform:perspective(282px)}
.quick li a span{position:absolute;top:0;left:0;width:100%;height:100%;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.quick li a .front{transform:rotateY(0deg)}
.quick li a .back{transform:rotateY(180deg);filter:alpha(opacity=0)}
.quick li:hover a, .quick li .on{z-index:1}
.quick li:hover a span, .quick .on span{transition:all 200ms linear}
.quick li:hover .back, .quick .on .back{filter:alpha(opacity=100);transform:rotateY(0deg)}
.quick li:hover .front, .quick .on .front{transform:rotateY(180deg)}
.quick .quick1 .front{background-position:-1021px 0}
.quick .quick1 .back{background-position:-1191px 0}
.quick .quick2 .front{background-position:-1021px -151px}
.quick .quick2 .back{background-position:-1191px -151px}
.quick .quick3 .front{background-position:-1021px -302px}
.quick .quick3 .back{background-position:-1191px -302px}
.quick .quick4 .front{background-position:-1021px -453px}
.quick .quick4 .back{background-position:-1191px -453px}
.quick .btn_top{width:93px;height:73px;background-position:-1045px -613px;margin:10px auto 0}

/* popup */
.pop_wrap{display:none;position:absolute;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:#152346;filter:alpha(opacity=90);opacity:0.9}
.pop_wrap .pop_content{position:absolute;top:0;left:50%;width:880px;margin-left:-440px}
.pop_wrap .pop_content .btn_close{position:absolute;top:50px;right:70px;width:35px;height:35px;background-position:0 -565px}
.pop_wrap .pop_body{width:718px;margin:0 auto}
.pop_wrap h4{height:30px;line-height:29px;color:#fff;font-weight:normal}
.pop_wrap .ps li{position:relative;line-height:25px;padding-left:13px}
.pop_wrap .ps li:before{position:absolute;left:0;top:12px;width:3px;height:3px;content:""}
.pop_wrap .sect_coupon{margin-bottom:23px}
.pop_wrap .sect_coupon h4{width:353px;text-align:center;margin:0 auto 19px}
.pop_wrap .sect_coupon p{height:86px;line-height:85px;text-align:center;font-size:40px;background:#3761CD}
.pop_wrap .btn_cancel{position:absolute;bottom:66px;left:50%;width:187px;height:52px;line-height:50px;background:#fff;font-size:22px;color:#583100;margin-left:-94px}

/* popup - notification character */
.pop_noti_char .pop_content{height:1171px;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0519_secondrun/join/bg_pop_noti_char.png") no-repeat}
.pop_noti_char .pop_body{padding-top:205px}
.pop_noti_char dl{position:relative;*zoom:1}
.pop_noti_char dl:after{content:"";display:block;clear:both}
.pop_noti_char dt, .pop_noti_char dd{float:left}
.pop_noti_char .dl_char{z-index:1;margin-bottom:121px}
.pop_noti_char .dl_char dt{font-size:22px;line-height:57px;color:#477bff;padding-right:20px}
.pop_noti_char .dl_char .select{position:relative;min-width:228px;height:55px;border:1px solid #FFFFFF}
.pop_noti_char .dl_char .select a{display:block;width:206px;font-size:22px;padding-left:22px}
.pop_noti_char .dl_char .select .default{height:55px;line-height:55px;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0519_secondrun/join/blt_select.png") 100% 50% no-repeat}
.pop_noti_char .dl_char .select .option{display:none;position:absolute;top:55px;left:-1px;width:100%;border:1px solid #fff;border-top:0 none;background:#112659;padding-bottom:18px}
.pop_noti_char .dl_char .select.active .option{display:block}
.pop_noti_char .dl_char .select .option li a{height:32px;line-height:31px}
.pop_noti_char .dd_server{margin-right:74px}
.pop_noti_char .dl_phone{margin-bottom:57px}
.pop_noti_char .dl_phone dt{width:128px;line-height:46px;font-size:20px}
.pop_noti_char .dl_phone dd{font-size:0}
.pop_noti_char .dl_phone dd input{width:328px;height:45px;line-height:45px;background:none;font-size:18px;color:#9fbaff;border:1px solid #fff;padding-left:22px}
.pop_noti_char .dl_phone dd input, .pop_noti_char .dl_phone dd button{display:inline-block;*zoom:1;vertical-align:top}
.pop_noti_char .dl_phone dd button{width:107px;height:47px;line-height:47px;font-size:16px}
.pop_noti_char .dl_phone dd .btn_modify{background:#112659;margin:0 4px 0 20px}
.pop_noti_char .dl_phone dd .btn_refresh{background:#789EFF}
.pop_noti_char h4{background:#3761CD}
.pop_noti_char .sect_agree h4{width:335px;padding-left:18px;margin-bottom:17px}
.pop_noti_char .sect_agree p{border:1px solid #fff;font-size:14px;line-height:21px;padding:21px 22px;margin-bottom:19px}
.pop_noti_char .sect_agree .agree_check{font-size:0;margin-bottom:43px}
.pop_noti_char .sect_agree .agree_check input, .pop_noti_char .sect_agree .agree_check label{display:inline-block;*zoom:1;vertical-align:middle}
.pop_noti_char .sect_agree .agree_check input{width:13px;height:13px}
.pop_noti_char .sect_agree label{font-size:14px;line-height:17px;padding-left:10px}
.pop_noti_char .apply_btn{position:relative}
.pop_noti_char .apply_btn .shadow{position:absolute;left:50%;top:20px;width:300px;height:84px;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0519_secondrun/join/bg_btn_pop.png") no-repeat;margin-left:-150px}
.pop_noti_char .btn_apply{position:relative;width:240px;height:64px;background-position:-108px -551px;margin:0 auto}
.pop_noti_char .btn_apply:hover{background-position:-379px -551px}
.pop_noti_char .ps{margin-top:71px}
.pop_noti_char .ps li{font-size:14px;line-height:20px;color:#c2d3ff;margin-bottom:12px}
.pop_noti_char .ps li:before{top:10px;width:2px;height:2px;background:#B3C9FF}
.pop_noti_char .ps li strong{font-weight:normal;color:#fff}

/* popup - notification complete */
.pop_noti_coupon .pop_content{height:1034px;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0519_secondrun/join/bg_pop_noti_coupon.png") no-repeat}
.pop_noti_coupon .pop_body{padding-top:186px}
.pop_noti_coupon .msg_agree{color:#583100;font-size:21px;text-align:center;line-height:29px;margin-bottom:63px}
.pop_noti_coupon h4{background:#583100}
.pop_noti_coupon .ps li{color:#583100}
.pop_noti_coupon .ps li:before{width:3px;height:3px;background:#583100}
.pop_noti_coupon .ps ul{margin-top:3px}
.pop_noti_coupon .ps li li{font-size:14px;line-height:21px}
.pop_noti_coupon .ps li li:before{display:none}
.pop_noti_coupon .coupon2{margin-top:71px}

.pop_video_coupon .pop_content{height:590px;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/0519_secondrun/join/bg_pop_video_coupon.png") no-repeat}
.pop_video_coupon .pop_body{padding-top:212px}
.pop_video_coupon .sect_coupon h4{background:#6D2751}
.pop_video_coupon .ps li{color:#6d2751}
.pop_video_coupon .ps li:before{background:#6d2751}