@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:#cd9794;background:#000;line-height:1}
input,textarea,button,select{font-size:inherit;font-family:"Noto Sans KR", "맑은 고딕","Malgun Gothic","돋움","dotum",sans-serif;color:#cd9794}
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} 

/* layout */
#wrap{position:relative;width:100%;overflow:hidden;min-width:1280px;background:#7D3B37}
#wrap.load{visibility:visible}
#wrap .section{position:relative;width:100%}
#wrap .section .container{position:relative;width:1100px;height:100%;margin:0 auto}

/* common */
.off, .over, #header .util li a, #header .btn_today, .content .share_form .btn_submit, .intro .link_list .stores, .intro .link_list .stores li a{display:block;overflow:hidden;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/1022_cor/spr_btn_v2.png") no-repeat;text-indent:-9999px}
.off, .over{width:100%;height:100%;transition:opacity 200ms linear}
.off{position:relative;transition-delay:100ms}
.over{position:absolute;top:0;left:0}
a:hover .off, button:hover .off, .over{filter:alpha(opacity=0);opacity:0}
a:hover .over, button:hover .over{filter:alpha(opacity=100);opacity:1}

/* header */
#header{position:absolute;top:0;left:0;width:100%;z-index:100;transition:background 300ms linear}
#header.fixed{position:fixed;height:91px;background:#311715}
#header h1{position:absolute;top:38px;left:34px;width:228px;height:99px}
#header.fixed h1{width:139px;top:15px;left:49px}
#header h1 a{display:block;width:100%;height:100%}
#header h1 a img{width:100%}
#header .util{position:absolute;top:42px;right:40px;padding-left:198px}
#header.fixed .util{top:22px}
#header .util ul{overflow:hidden;margin:0 0 12px 5px}
#header .util li{float:left;margin-left:3px}
#header .util li a{width:41px;height:47px}
#header .util .btn_home{background-position:-454px 0}
#header .util .btn_fb{background-position:-498px 0}
#header .util .btn_tw{background-position:-542px 0}
#header .btn_today{width:142px;height:22px;background-position:-625px 0}
#header.fixed .btn_today{display:none}
#header .btn_game{position:absolute;top:0;left:0;width:181px;height:81px}
#header .btn_game .over{background-position:0 -91px}
#header.fixed .btn_game{height:51px}
#header.fixed .btn_game .off{background-position:-231px 0}
#header.fixed .btn_game .over{background-position:-231px -91px}

/* bg */
.bg_wrap{position:absolute;top:0;left:0;width:100%;height:100%;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/1022_cor/bg_wrap.jpg") 50% 0 no-repeat}
.bg_wrap .noise{display:none;position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=8);opacity:0.08}
.bg_wrap .noise.active{display:block}
.bg_wrap .noise1{background:url("https://ssl.nexon.com/s2/game/tales/event/2018/1022_cor/bg_noise1.gif") 0 0 repeat}
.bg_wrap .noise2{background:url("https://ssl.nexon.com/s2/game/tales/event/2018/1022_cor/bg_noise2.gif") 0 0 repeat}
.bg_wrap .noise3{background:url("https://ssl.nexon.com/s2/game/tales/event/2018/1022_cor/bg_noise3.gif") 0 0 repeat}
.bg_wrap .noise4{background:url("https://ssl.nexon.com/s2/game/tales/event/2018/1022_cor/bg_noise4.gif") 0 0 repeat}
.bg_wrap .noise5{background:url("https://ssl.nexon.com/s2/game/tales/event/2018/1022_cor/bg_noise5.gif") 0 0 repeat}
.bg_wrap .noise6{background:url("https://ssl.nexon.com/s2/game/tales/event/2018/1022_cor/bg_noise6.gif") 0 0 repeat}
.bg_wrap .noise7{background:url("https://ssl.nexon.com/s2/game/tales/event/2018/1022_cor/bg_noise7.gif") 0 0 repeat}
.bg_wrap .noise8{background:url("https://ssl.nexon.com/s2/game/tales/event/2018/1022_cor/bg_noise8.gif") 0 0 repeat}
.bg_wrap .noise9{background:url("https://ssl.nexon.com/s2/game/tales/event/2018/1022_cor/bg_noise9.gif") 0 0 repeat}
.bg_wrap .noise10{background:url("https://ssl.nexon.com/s2/game/tales/event/2018/1022_cor/bg_noise10.gif") 0 0 repeat}

/* intro */
.intro{height:1642px}
.intro h2{position:absolute;top:96px;left:321px;width:1699px;height:1110px}
.intro h2 span{position:absolute;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/1022_cor/h2.png") no-repeat;text-indent:-9999px;overflow:hidden;opacity:0;transition:opacity 300ms 300ms linear, width 150ms 300ms ease, height 150ms 300ms ease}
.intro h2 .h2_1{top:0;left:7px;width:0;height:0}
.intro h2 .h2_2{top:354px;left:431px;width:0;height:178px;background-position:-1340px 0;transition-delay:380ms}
.intro h2 .h2_3{top:476px;left:234px;width:0;height:634px;background-position:0 -1106px;transition-delay:460ms}
.load .intro h2 span{opacity:1}
.load .intro h2 .h2_1{width:1105px;height:904px}
.load .intro h2 .h2_2{width:424px}
.load .intro h2 .h2_3{width:1465px}
.intro .container{background:url("https://ssl.nexon.com/s2/game/tales/event/2018/1022_cor/cnt_intro.png") 50% 1026px no-repeat}
.intro .link_list{position:absolute;top:1262px;left:50%;width:1074px;height:281px;margin-left:-537px}
.intro .link_list ul{overflow:hidden;margin-right:-10px}
.intro .link_list li{float:left}
.intro .link_list li a{position:relative;display:block}
.intro .link_list .stores{position:relative;width:532px;height:147px}
.intro .link_list .stores ul{position:absolute;top:75px;left:26px;overflow:hidden}
.intro .link_list .stores li{margin-right:27px}
.intro .link_list .stores li a{height:39px}
.intro .link_list .stores .aladin a{width:96px;background-position:0 -620px}
.intro .link_list .stores .aladin a:hover{background-position:0 -703px}
.intro .link_list .stores .yes24 a{width:91px;background-position:-123px -620px}
.intro .link_list .stores .yes24 a:hover{background-position:-123px -703px}
.intro .link_list .stores .interpark a{width:97px;background-position:-240px -620px}
.intro .link_list .stores .interpark a:hover{background-position:-240px -703px}
.intro .link_list .stores .kyobo a{width:109px;background-position:-364px -620px}
.intro .link_list .stores .kyobo a:hover{background-position:-364px -703px}
.intro .link_list .link1{background-position:0 -231px;margin-right:10px}
.intro .link_list .link2{background-position:0 -420px}
.intro .link_list .link3{position:absolute;bottom:0;left:50%;width:532px;height:87px;margin-left:-266px}
.intro .link_list .link3 a{height:100%}
.intro .link_list .link1 .off{background-position:0 -231px}
.intro .link_list .link2 .off{background-position:0 -567px}
.intro .link_list .link3 .off{background-position:0 -907px}
.intro .link_list .link1 .over{background-position:0 -399px}
.intro .link_list .link2 .over{background-position:0 -734px}
.intro .link_list .link3 .over{background-position:0 -1014px}

/* content */
.content .bg_section{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;filter:alpha(opacity=71);opacity:0.71}
.content .container{background:url("https://ssl.nexon.com/s2/game/tales/event/2018/1022_cor/cnt_content.png") 50% 61px no-repeat;padding:799px 0 82px}
.content .share_wrap{position:relative;width:938px;margin:0 auto;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/1022_cor/txt_bottom.png") 50% 100% no-repeat;padding-bottom:260px}
.content .share_form{position:relative}
.content .share_form .textarea{position:relative;width:813px;*overflow:hidden;border-right:0 none}
.content .share_form .textarea label, .content .share_form .textarea textarea{line-height:21px;font-weight:lighter}
.content .share_form .textarea label{position:absolute;top:17px;left:22px;cursor:text;color:#b2b2b2}
.content .share_form .textarea label span{color:#e03645}
.content .share_form .textarea.focus label{display:none}
.content .share_form .textarea textarea{display:block;width:769px;height:95px;*float:left;resize:none;border:0 none;overflow-y:auto;outline:0;background:#fff;color:#393939;padding:17px 22px 0}
.content .share_form .textarea .total_txt{position:absolute;right:26px;bottom:13px;font-size:14px;color:#5b5b5b}
.content .share_form .btn_submit{position:absolute;right:0;top:0;width:125px;height:113px;background-position:-454px -81px}
.content .share_list{position:relative;padding-top:20px}
.content .share_list li{border-bottom:2px solid #3A2524;padding:20px 0 19px}
.content .share_list .info{font-size:0}
.content .share_list .game-id{display:inline-block;*zoom:1;font-size:16px;font-weight:600;color:#f7d7d5;margin:-1px 0 0 13px}
.content .share_list .cont{line-height:21px;word-break:break-all;margin:11px 0}
.content .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}
.content .share_list .date{font-size:14px;color:#825e5b}
.content .share_wrap .pager{position:relative;font-size:0;text-align:center;margin-top:46px}
.content .share_wrap .pager span, .content .share_wrap .pager a{display:inline-block;*zoom:1;vertical-align:top}
.content .share_wrap .pager .move{display:inline-block;*display:inline;*zoom:1;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/1022_cor/spr_paging.png") no-repeat;width:25px;height:25px} 
.content .share_wrap .move.first{background-position:2px 4px;margin-right:4px}
.content .share_wrap .move.prev{background-position:-27px 4px}
.content .share_wrap .move.next{background-position:-83px 4px;margin-right:4px}
.content .share_wrap .move.last{background-position:-112px 4px}
.content .share_wrap .pager .num{padding:0 14px}
.content .share_wrap .pager .num span, .content .share_wrap .pager .num a{font-size:16px;line-height:22px;padding:0 4px;margin:0 7px}
.content .share_wrap .pager .num span{color:#fcd04a;border-bottom:4px solid #fcd04a;padding-bottom:1px}
.content .share_wrap .pager .num a{color:#ce9794;padding-bottom:5px}

/* screen */
.screen{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background:#000;z-index:999999}