@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:15px;color:#01081a;background:#e4e4e4;line-height:1}
input,textarea,button,select{font-size:inherit;font-family:"Noto Sans KR", "맑은 고딕","Malgun Gothic","돋움","dotum",sans-serif;color:#01081a}
img,fieldset,button, textarea{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:#876969}
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}
textarea{outline:0}
button{border:0;cursor:pointer;outline:0}

/* layout */ 
#wrap{position:relative;width:100%;overflow:hidden;min-width:1280px;max-width:1920px;margin:0 auto}
#wrap .section{position:relative;width:100%}
.section .container{position:relative;width:1280px;height:100%;margin:0 auto}
.bg_section{position:absolute;top:0;left:0;width:99.99%;padding-left:0.01%}

/* common */
.gnbWrapper{min-width:1280px !important}
#header a, #header button, .intro .title_wrap .btn_banner span, .intro .intro_btn a span, #wrap .btn_top, #nav li .txt, .content1 .cnt1_wrap .btn_live span, .content1 .share_form button, .content1 .share_list li .btn-comt-delete, .content1 .share_wrap .pager .move, .content2 .cnt1 .btn_location, .layerpop .btn_close{display:block;text-indent:-99999px;overflow:hidden;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1108_event_65F6D07C5919B8B5/spr_btn_1122_84BA1E26869DD53C.png") no-repeat}
.section .object_wrap{position:absolute;left:0;width:100%}
.section .object_wrap div, .section .object_wrap span{position:absolute}

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

/* header */
#header{position:absolute;top:0;left:0;width:100%;z-index:100}
#header h1{position:absolute;top:15px;left:30px}
#header h1 a{width:239px;height:102px}
#header .util{position:absolute;top:32px;right:36px;padding-left:213px}
#header .util ul{overflow:hidden}
#header .util li{float:left;margin-left:3px}
#header .util li a{width:41px;height:49px}
#header .util li .btn_home{background-position:-502px 0}
#header .util li .btn_fb{background-position:-546px 0}
#header .util li .btn_tw{background-position:-590px 0}
#header .util li .btn_home:hover{background-position:-502px -51px}
#header .util li .btn_fb:hover{background-position:-546px -51px}
#header .util li .btn_tw:hover{background-position:-590px -51px}
#header .util .btn_game{position:absolute;top:10px;left:0;width:195px;height:24px;background-position:-286px -10px}
#header .util .btn_game:hover{background-position:-286px -61px}
#header .util .btn_today{width:142px;height :22px;background-position:-300px -220px;margin:4px 0 0 -5px}

/* nav */
#nav{position:absolute;top:1420px;left:0;right:0;height:119px;background-color:#121212;z-index:100}
#wrap.fixed #nav{position:fixed;top:0}
#nav ul{width:1280px;overflow:hidden;height:100%;margin:0 auto}
#nav .nav1{padding:0 229px 0 125px}
#nav li{position:relative;float:left;height:100%}
#nav li a{position:relative;display:block;height:100%}
#nav .nav1 a{width:464px}
#nav .nav2 a{width:352px}
#nav li .txt{position:absolute;top:47px;width:100%;height:26px}
#nav .nav1 .txt{background-position:0 -424px}
#nav .nav2 .txt{background-position:-502px -422px}
#nav .nav1 a:hover .txt, #nav .nav1.on .txt{background-position:0 -476px}
#nav .nav2 a:hover .txt, #nav .nav2.on .txt{background-position:-502px -476px}

/* intro */
#wrap .intro{height:1420px}
.intro .title_wrap .txt, .intro .about_wrap .txt{background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1108_event_65F6D07C5919B8B5/spr_txt_intro.png") no-repeat}
.intro .title_wrap .jellybee, .intro .object_wrap .txt, .intro .char_wrap span, .intro .intro_btn a span{opacity:0}
.intro.load .title_wrap .jellybee, .intro.load .object_wrap .txt, .intro.load .char_wrap span, .intro.load .intro_btn a span{opacity:1}
.intro .title_wrap{top:117px;height:767px}
.intro .title_wrap .box{bottom:0;right:-548px;width:0;height:767px;transform:skewX(35deg);background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1108_event_65F6D07C5919B8B5/bg_title_intro.jpg") 100% 100% no-repeat}
.intro.load .title_wrap .box{width:1500px;transform:skewX(0);transition:all 550ms ease}
.intro .title_wrap .headline{height:137px;transition:transform 600ms ease;transition-delay:500ms}
.intro .title_wrap .headline._h1{top:209px;left:456px;width:653px;transform:translateY(34px)}
.intro .title_wrap .headline._h2{top:479px;left:521px;width:523px;transform:translateY(-34px)}
.intro.load .title_wrap .headline{transform:translateY(0)}
.intro .title_wrap .headline span{top:0;height:100%;transform:scaleY(0)}
.intro.load .title_wrap .headline span{transform:scaleY(1)}
.intro .title_wrap .headline span{transition:opacity 300ms ease, transform 400ms cubic-bezier(0, 0.7, 0, 1.5)}
.intro .title_wrap .headline._h1 span{transform-origin:50% 100%}
.intro .title_wrap .headline._h2 span{transform-origin:50% 0}
.intro .title_wrap ._h1 ._t1{left:0;width:120px;background-position:0 -65px;transition-delay:500ms}
.intro .title_wrap ._h1 ._t2{left:129px;width:124px;background-position:-129px -65px;transition-delay:550ms}
.intro .title_wrap ._h1 ._t3{left:260px;width:133px;background-position:-260px -65px;transition-delay:600ms}
.intro .title_wrap ._h1 ._t4{left:399px;width:124px;background-position:-399px -65px;transition-delay:650ms}
.intro .title_wrap ._h1 ._t5{left:537px;width:116px;background-position:-537px -65px;transition-delay:700ms}
.intro .title_wrap ._h2 ._t1{left:0;width:120px;background-position:-65px -248px;transition-delay:500ms}
.intro .title_wrap ._h2 ._t2{left:128px;width:133px;background-position:-193px -248px;transition-delay:550ms}
.intro .title_wrap ._h2 ._t3{left:259px;width:136px;background-position:-345px -248px;transition-delay:600ms}
.intro .title_wrap ._h2 ._t4{left:433px;width:90px;background-position:-498px -248px;transition-delay:650ms}
.intro .title_wrap .x{top:349px;left:723px;width:122px;height:122px;opacity:0;transform:rotate(500deg) scale(0.5);transition:opacity 300ms ease, transform 800ms ease;transition-delay:500ms}
.intro.load .title_wrap .x{opacity:1;transform:rotate(0) scale(1)}
.intro .title_wrap .x span{top:50%;left:50%;background:#FFBE31;border:2px solid #F26421;border-radius:12px;-ms-transform:rotate(45deg);transform:rotate(45deg)}
.intro .title_wrap .x ._x1{width:10px;height:100%;margin:-61px 0 0 -5px}
.intro .title_wrap .x ._x2{width:100%;height:10px;margin:-5px 0 0 -61px}
.intro .title_wrap .duration{top:126px;left:458px;width:652px;height:34px}
.intro .title_wrap .duration .txt{top:0;left:47px;width:557px;height:100%;transform:translateY(15px);transition:opacity 300ms ease, transform 300ms cubic-bezier(0, 0.7, 0, 1.5)}
.intro.load .title_wrap .duration .txt{transform:translateY(0);transition-delay:450ms}
.intro .title_wrap .duration .bar{top:18px;width:0;height:2px;background:#2D2623;transition:all 200ms ease}
.intro .title_wrap .duration ._b1{right:619px;transform:translateX(10px)}
.intro .title_wrap .duration ._b2{left:619px;transform:translateX(-10px)}
.intro.load .title_wrap .duration .bar{width:33px;transform:translateX(0);transition-delay:500ms}
.intro .title_wrap .jellybee{width:473px;height:478px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1108_event_65F6D07C5919B8B5/bg_jellybee_intro.png") no-repeat;transform:translate(200px, 200px);transition:opacity 300ms ease, transform 500ms cubic-bezier(0, 0.7, 0, 1.4)}
.intro.load .title_wrap .jellybee{transform:translate(0, 0);animation:jellyIntro 6s infinite ease}
.intro .title_wrap .jellybee._j1{top:62px;left:1351px}
.intro .title_wrap .jellybee._j2{top:286px;left:1005px}
.intro.load .title_wrap .jellybee._j1{transition-delay:280ms;animation-delay:1600ms}
.intro.load .title_wrap .jellybee._j2{transition-delay:380ms;animation-delay:1500ms}
.intro .title_wrap .btn_banner{position:absolute;top:-10px;right:-320px;width:385px;height:94px;overflow:visible}
.intro .title_wrap .btn_banner:hover{animation:btnBanHover 2s infinite ease}
.intro .title_wrap .btn_banner span{pointer-events:none}
.intro .title_wrap .btn_banner .bg{top:0;right:-100%;width:100%;height:129px;background-position:0 -131px}
.intro.load .title_wrap .btn_banner .bg{right:0;transition:right 400ms ease;transition-delay:300ms}
.intro .title_wrap .btn_banner .link{top:26px;left:137px;width:212px;height:43px;background-position:-514px -157px;transform:translateX(-10px);opacity:0}
.intro.load .title_wrap .btn_banner .link{opacity:1;transform:translateX(0);transition:all 300ms ease;transition-delay:800ms}
.intro .title_wrap .btn_banner .icon{top:8px;left:46px;width:83px;height:73px;background-position:-400px -139px;transform:scale(0);transform-origin:50% 100%}
.intro.load .title_wrap .btn_banner .icon{transform:scale(1);transition:transform 300ms cubic-bezier(0, 0.7, 0, 1.2);transition-delay:700ms}
.intro .title_wrap .description{transform:translateY(15px);transition:opacity 300ms linear, transform 300ms ease}
.intro.load .title_wrap .description{transform:translateY(0)}
.intro .title_wrap ._d1{top:837px;left:522px;width:617px;height:52px;background-position:-4px -432px;transition-delay:750ms}
.intro .title_wrap ._d2{top:910px;left:518px;width:717px;height:60px;background-position:0 -505px;transition-delay:800ms}
.intro .char_wrap span{background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1108_event_65F6D07C5919B8B5/spr_char_intro.png") no-repeat;transition:opacity 300ms ease, transform 400ms cubic-bezier(0, 0.5, 0, 1.2)}
.intro .char_wrap ._c1{top:-5px;left:-412px;width:1010px;height:1412px;transform:translate(80px, 80px);transition-delay:1150ms}
.intro .char_wrap ._c2{top:996px;left:1051px;width:954px;height:523px;background-position:-1056px 0;transform:translate(-80px, 80px);transition-delay:1300ms}
.intro.load .char_wrap span{transform:translate(0, 0)}
.intro .intro_btn{position:absolute;top:1160px;left:709px}
.intro .intro_btn a{position:relative;display:block;width:385px;height:40px;transition:transform 250ms ease;margin-bottom:29px}
.intro .intro_btn a:hover{transform:translateX(15px)}
.intro .intro_btn a:after{content:"";position:absolute;top:0;left:0;width:0;height:100%;background:#F26422}
.intro.load .intro_btn a:after{animation:widthMove 450ms ease}
.intro.load .intro_btn .btn1:after{animation-delay:1100ms}
.intro.load .intro_btn .btn2:after{animation-delay:1200ms}
.intro .intro_btn span{position:absolute}
.intro .intro_btn .txt{top:4px;left:0;width:0;height:33px;border-bottom:3px solid #F26422}
.intro.load .intro_btn .txt{width:345px;transition:width 300ms linear}
.intro .intro_btn .btn1 .txt{background-position:2px -284px;transition-delay:1100ms}
.intro .intro_btn .btn2 .txt{background-position:2px -339px;transition-delay:1200ms}
.intro .intro_btn .btn1:hover .txt{background-position:-384px -284px}
.intro .intro_btn .btn2:hover .txt{background-position:-384px -339px}
.intro .intro_btn .arrow{top:0;left:345px;width:0;height:100%;background-position:-763px -220px;transition:width 200ms ease}
.intro.load .intro_btn .arrow{width:40px}
.intro .intro_btn .btn1 .arrow{transition-delay:1250ms}
.intro .intro_btn .btn2 .arrow{transition-delay:1350ms}
.intro .about_wrap{top:832px}
.intro .about_wrap div{transition:transform 300ms ease}
.intro .about_wrap ._a1{top:0;left:7px;width:346px;height:346px;transform:translateY(-30px);transition-delay:880ms}
.intro .about_wrap ._a2{top:313px;left:329px;width:305px;height:306px;transform:translateY(30px);transition-delay:980ms}
.intro.load .about_wrap div{transform:translateY(0)}
.intro .about_wrap .bg{top:0;left:0;width:100%;height:100%;transform:scale(0);transition:opacity 300ms ease, transform 300ms cubic-bezier(0, 0.5, 0, 1.2)}
.intro.load .about_wrap .bg{transform:scale(1)}
.intro .about_wrap .txt{width:210px;transition:opacity 300ms linear}
.intro .about_wrap ._a1 .bg{background-color:#7EB55B;border-radius:100%;overflow:hidden;transition-delay:880ms}
.intro .about_wrap ._a2 .bg{background-color:#F26422;transition-delay:980ms}
.intro .about_wrap ._a1 .txt{top:83px;left:68px;height:180px;background-position:0 -584px;transition-delay:1030ms}
.intro .about_wrap ._a2 .txt{top:43px;left:50px;height:180px;background-position:-267px -598px;transition-delay:1130ms}
.intro .figure_wrap span{transform:scale(0);transition:transform 300ms cubic-bezier(0, 0.5, 0, 1.2)}
.intro.load .figure_wrap span{transform:scale(1)}
.intro .figure_wrap .moon{top:563px;left:-416px;width:556px;height:563px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1108_event_65F6D07C5919B8B5/bg_moon_intro.png") no-repeat;transform-origin:100% 50%;transition-duration:400ms}
.intro .figure_wrap .rectangle{top:671px;left:-275px;width:76px;height:69px;background:#F26422;transition-delay:300ms}
.intro .figure_wrap .circle{border-radius:100%}
.intro .figure_wrap .green{width:37px;height:37px;background:#7EB55B}
.intro .figure_wrap .gray{width:176px;height:176px;background:#F3F3F3}
.intro .figure_wrap ._c1{top:394px;left:-189px;transition-delay:50ms}
.intro .figure_wrap ._c2{top:58px;left:1078px;transition-delay:250ms}
.intro .figure_wrap ._c3{top:-88px;left:231px;transition-delay:200ms}
.intro .figure_wrap ._c4{top:968px;left:1169px;transition-delay:150ms}

/* content1 */
.content1{padding-top:119px}
.content1 .container{padding-top:1334px}
.content1 .bg_section{top:119px;bottom:0;height:auto;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1108_event_65F6D07C5919B8B5/bg_content1.jpg") center top no-repeat}
.content1 canvas{position:absolute;top:119px;left:50%;margin-left:-960px}
.content1 .line_wrap{position:absolute;top:20px;bottom:20px;left:50%;width:1880px;margin-left:-940px}
.content1 .line_wrap span{position:absolute;left:0;width:100%}
.content1 .line_wrap .line{height:60px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1108_event_65F6D07C5919B8B5/spr_line_content1.png") no-repeat}
.content1 .line_wrap ._l1{top:0}
.content1 .line_wrap ._l2{bottom:0;background-position:0 -60px}
.content1 .line_wrap .repeat{top:60px;bottom:60px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1108_event_65F6D07C5919B8B5/bg_repeat_content1.png") 0 0 repeat-y}
.content1 .object_wrap .txt{background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1108_event_65F6D07C5919B8B5/spr_txt_content1.png") no-repeat}
.content1 .parallax .txt, .content1 .cnt1_wrap button{opacity:0}
.content1 .parallax.active .txt, .content1 .cnt1_wrap.active button{opacity:1}
.content1 .cnt1_wrap{top:185px}
.content1 .cnt1_wrap .headline span{top:0;height:100%}
.content1 .cnt1_wrap.active .txt, .content1 .cnt2_wrap.active .headline .txt, .content1 .cnt2_wrap.active .description{transition:opacity 300ms linear}
.content1 .cnt1_wrap .headline._h1{top:0;left:367px;width:550px;height:100px}
.content1 .cnt1_wrap .headline._h1 ._t1{left:0;width:98px;background-position:-265px 0}
.content1 .cnt1_wrap .headline._h1 ._t2{left:106px;width:91px;background-position:-371px 0}
.content1 .cnt1_wrap .headline._h1 ._t3{left:244px;width:101px;background-position:-509px 0}
.content1 .cnt1_wrap .headline._h1 ._t4{left:350px;width:91px;background-position:-615px 0;}
.content1 .cnt1_wrap .headline._h1 ._t5{left:452px;width:98px;background-position:-717px 0}
.content1 .cnt1_wrap .headline._h2{top:123px;left:102px;width:1074px;height:74px}
.content1 .cnt1_wrap .headline._h2 ._t1{left:0;width:69px;background-position:0 -123px}
.content1 .cnt1_wrap .headline._h2 ._t2{left:81px;width:62px;background-position:-81px -123px}
.content1 .cnt1_wrap .headline._h2 ._t3{left:154px;width:64px;background-position:-154px -123px}
.content1 .cnt1_wrap .headline._h2 ._t4{left:252px;width:75px;background-position:-252px -123px}
.content1 .cnt1_wrap .headline._h2 ._t5{left:331px;width:71px;background-position:-331px -123px}
.content1 .cnt1_wrap .headline._h2 ._t6{left:410px;width:60px;background-position:-410px -123px}
.content1 .cnt1_wrap .headline._h2 ._t7{left:480px;width:73px;background-position:-480px -123px}
.content1 .cnt1_wrap .headline._h2 ._t8{left:583px;width:72px;background-position:-583px -123px}
.content1 .cnt1_wrap .headline._h2 ._t9{left:658px;width:69px;background-position:-658px -123px}
.content1 .cnt1_wrap .headline._h2 ._t10{left:735px;width:72px;background-position:-735px -123px}
.content1 .cnt1_wrap .headline._h2 ._t11{left:809px;width:71px;background-position:-809px -123px}
.content1 .cnt1_wrap .headline._h2 ._t12{left:909px;width:68px;background-position:-909px -123px}
.content1 .cnt1_wrap .headline._h2 ._t13{left:987px;width:72px;background-position:-987px -123px}
.content1 .cnt1_wrap .headline._h2 ._t14{left:1066px;width:8px;background-position:-1066px -123px}
.content1 .cnt1_wrap.active .headline._h1 ._t2{transition-delay:60ms}
.content1 .cnt1_wrap.active .headline._h1 ._t3{transition-delay:120ms}
.content1 .cnt1_wrap.active .headline._h1 ._t4{transition-delay:30ms}
.content1 .cnt1_wrap.active .headline._h1 ._t5{transition-delay:90ms}
.content1 .cnt1_wrap.active .headline._h2 ._t1{transition-delay:270ms}
.content1 .cnt1_wrap.active .headline._h2 ._t2{transition-delay:390ms}
.content1 .cnt1_wrap.active .headline._h2 ._t3{transition-delay:450ms}
.content1 .cnt1_wrap.active .headline._h2 ._t4{transition-delay:510ms}
.content1 .cnt1_wrap.active .headline._h2 ._t5{transition-delay:150ms}
.content1 .cnt1_wrap.active .headline._h2 ._t6{transition-delay:360ms}
.content1 .cnt1_wrap.active .headline._h2 ._t7{transition-delay:420ms}
.content1 .cnt1_wrap.active .headline._h2 ._t8{transition-delay:300ms}
.content1 .cnt1_wrap.active .headline._h2 ._t9{transition-delay:540ms}
.content1 .cnt1_wrap.active .headline._h2 ._t10{transition-delay:180ms}
.content1 .cnt1_wrap.active .headline._h2 ._t11{transition-delay:480ms}
.content1 .cnt1_wrap.active .headline._h2 ._t12{transition-delay:240ms}
.content1 .cnt1_wrap.active .headline._h2 ._t13{transition-delay:330ms}
.content1 .cnt1_wrap.active .headline._h2 ._t14{transition-delay:210ms}
.content1 .cnt1_wrap ._d1{top:242px;left:468px;width:346px;height:45px;background-position:-366px -242px}
.content1 .cnt1_wrap ._d2{top:298px;left:103px;width:1074px;height:23px;background-position:-1px -298px}
.content1 .cnt1_wrap ._d3{top:348px;left:266px;width:744px;height:44px;background-position:-164px -348px}
.content1 .cnt1_wrap.active ._d1{transition-delay:600ms}
.content1 .cnt1_wrap.active ._d2{transition-delay:650ms}
.content1 .cnt1_wrap.active ._d3{transition-delay:750ms}
.content1 .cnt1_wrap .btn_live{position:absolute;top:465px;left:282px;width:716px;height:121px;background:#1C2635;border-top:8px solid #E2B36C;border-bottom:8px solid #1B2735;z-index:1;transform:translateY(20px)}
.content1 .cnt1_wrap.active .btn_live{transform:translateY(0);transition:opacity 300ms linear, transform 500ms ease;transition-delay:900ms}
.content1 .cnt1_wrap .btn_live .link{top:38px;left:49px;width:554px;height:28px;background-position:0 -674px}
.content1 .cnt1_wrap .btn_live:hover .link{background-position:-610px -674px}
.content1 .cnt1_wrap .btn_live .arrow{top:19px;right:31px;width:69px;height:71px;background-position:0 -726px}
.content1 .cnt1_wrap .btn_live:hover .arrow{background-position:-87px -726px}
.content1 .cnt1_wrap .btn_live .cover{top:-8px;left:0;width:716px;height:0;background-position:-201px -729px;transition:height 300ms ease}
.content1 .cnt1_wrap .btn_live:hover .cover{height:121px}
.content1 .cnt2_wrap{top:711px;height:546px}
.content1 .cnt2_wrap .bg_cnt2{position:absolute;top:0;left:50%;width:1920px;height:100%;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1108_event_65F6D07C5919B8B5/bg_center_content1.jpg") center top no-repeat;margin-left:-960px}
.content1 .cnt2_wrap .char{bottom:0;left:1097px;width:392px;height:645px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1108_event_65F6D07C5919B8B5/bg_char_content1.png") no-repeat}
.content1 .cnt2_wrap .pencil{top:113px;left:601px;width:79px;height:74px}
.content1 .cnt2_wrap .pencil .icon{top:0;left:0;width:74px;height:74px;background-position:0 -428px;transform:translateX(79px)}
.content1 .cnt2_wrap.active .pencil .icon{transform:translateX(0);transition:opacity 300ms ease, transform 600ms ease}
.content1 .cnt2_wrap .pencil .line{bottom:0;right:0;width:0;height:4px;background:#1C2635}
.content1 .cnt2_wrap.active .pencil .line{width:59px;transition:width 600ms ease}
.content1 .cnt2_wrap .headline{top:207px;left:474px;width:330px;height:153px}
.content1 .cnt2_wrap .headline span{height:49px}
.content1 .cnt2_wrap .headline .line{top:129px;left:288px;width:0;height:2px;background:#825410}
.content1 .cnt2_wrap.active .headline .line{width:38px;transition:width 300ms ease;transition-delay:700ms}
.content1 .cnt2_wrap .headline .line1{top:0}
.content1 .cnt2_wrap .headline .line2{top:52px}
.content1 .cnt2_wrap .headline .line3{top:108px}
.content1 .cnt2_wrap .headline ._t1{left:0;width:45px;background-position:-168px -428px}
.content1 .cnt2_wrap .headline ._t2{left:49px;width:41px;background-position:-217px -428px}
.content1 .cnt2_wrap .headline ._t3{left:92px;width:42px;background-position:-260px -428px}
.content1 .cnt2_wrap .headline ._t4{left:150px;width:47px;background-position:-318px -428px}
.content1 .cnt2_wrap .headline ._t5{left:197px;width:45px;background-position:-365px -428px}
.content1 .cnt2_wrap .headline ._t6{left:244px;width:39px;background-position:-412px -428px}
.content1 .cnt2_wrap .headline ._t7{left:286px;width:44px;background-position:-454px -428px}
.content1 .cnt2_wrap .headline ._t8{left:2px;width:45px;background-position:-170px -480px}
.content1 .cnt2_wrap .headline ._t9{left:54px;width:45px;background-position:-222px -480px}
.content1 .cnt2_wrap .headline ._t10{left:108px;width:45px;background-position:-276px -480px}
.content1 .cnt2_wrap .headline ._t11{left:183px;width:39px;background-position:-351px -480px}
.content1 .cnt2_wrap .headline ._t12{left:232px;width:45px;background-position:-400px -480px}
.content1 .cnt2_wrap .headline ._t13{left:285px;width:45px;background-position:-453px -480px}
.content1 .cnt2_wrap .headline ._t14{left:4px;width:46px;background-position:-172px -536px}
.content1 .cnt2_wrap .headline ._t15{left:59px;width:41px;background-position:-227px -536px}
.content1 .cnt2_wrap .headline ._t16{left:112px;width:48px;background-position:-280px -536px}
.content1 .cnt2_wrap .headline ._t17{left:166px;width:47px;background-position:-334px -536px}
.content1 .cnt2_wrap .headline ._t18{left:222px;width:48px;background-position:-390px -536px}
.content1 .cnt2_wrap .headline ._t19{left:273px;width:6px;background-position:-441px -536px}
.content1 .cnt2_wrap.active .headline ._t1{transition-delay:400ms}
.content1 .cnt2_wrap.active .headline ._t2{transition-delay:250ms}
.content1 .cnt2_wrap.active .headline ._t3{transition-delay:370ms}
.content1 .cnt2_wrap.active .headline ._t4{transition-delay:520ms}
.content1 .cnt2_wrap.active .headline ._t5{transition-delay:460ms}
.content1 .cnt2_wrap.active .headline ._t6{transition-delay:610ms}
.content1 .cnt2_wrap.active .headline ._t7{transition-delay:340ms}
.content1 .cnt2_wrap.active .headline ._t8{transition-delay:220ms}
.content1 .cnt2_wrap.active .headline ._t9{transition-delay:100ms}
.content1 .cnt2_wrap.active .headline ._t10{transition-delay:640ms}
.content1 .cnt2_wrap.active .headline ._t11{transition-delay:190ms}
.content1 .cnt2_wrap.active .headline ._t12{transition-delay:580ms}
.content1 .cnt2_wrap.active .headline ._t13{transition-delay:160ms}
.content1 .cnt2_wrap.active .headline ._t14{transition-delay:490ms}
.content1 .cnt2_wrap.active .headline ._t15{transition-delay:310ms}
.content1 .cnt2_wrap.active .headline ._t16{transition-delay:550ms}
.content1 .cnt2_wrap.active .headline ._t17{transition-delay:130ms}
.content1 .cnt2_wrap.active .headline ._t18{transition-delay:130ms}
.content1 .cnt2_wrap.active .headline ._t19{transition-delay:280ms}
.content1 .cnt2_wrap .description{top:396px;left:407px;width:466px;height:46px;background-position:-608px -428px}
.content1 .cnt2_wrap.active .description{transition-delay:900ms}
.content1 .cnt2_wrap .rhombus{top:77px;width:430px;height:430px}
.content1 .cnt2_wrap ._r1{left:17px;background-position:0 -643px;transform:translateX(30px)}
.content1 .cnt2_wrap ._r2{left:833px;background-position:-450px -643px;transform:translateX(-30px)}
.content1 .cnt2_wrap.active .rhombus{transform:translateX(0);transition:opacity 300ms linear, transform 600ms ease;transition-delay:1100ms}
.content1 .particle_wrap{top:711px}
.content1 .particle_wrap span{background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1108_event_65F6D07C5919B8B5/spr_particle_content1.png") no-repeat}
.content1 .particle_wrap span:nth-child(2n){animation:twinkle1 400ms linear alternate infinite}
.content1 .particle_wrap span:nth-child(2n+1){animation:twinkle2 400ms linear alternate infinite}
.content1 .particle_wrap ._p1{top:338px;left:-30px;width:28px;height:29px;background-position:0 -370px}
.content1 .particle_wrap ._p2{top:385px;left:20px;width:31px;height:30px;background-position:-50px -417px}
.content1 .particle_wrap ._p3{top:467px;left:291px;width:28px;height:23px;background-position:-322px -499px}
.content1 .particle_wrap ._p4{top:490px;left:289px;width:33px;height:28px;background-position:-319px -522px}
.content1 .particle_wrap ._p5{top:473px;left:355px;width:31px;height:29px;background-position:-385px -505px}
.content1 .particle_wrap ._p6{top:344px;left:443px;width:27px;height:25px;background-position:-473px -376px}
.content1 .particle_wrap ._p7{top:87px;left:680px;width:28px;height:29px;background-position:-710px -119px}
.content1 .particle_wrap ._p8{top:98px;left:802px;width:24px;height:26px;background-position:-832px -130px}
.content1 .particle_wrap ._p9{top:65px;left:834px;width:25px;height:25px;background-position:-864px -97px}
.content1 .particle_wrap ._p10{top:163px;left:860px;width:31px;height:29px;background-position:-890px -195px}
.content1 .particle_wrap ._p11{top:446px;left:797px;width:26px;height:26px;background-position:-827px -478px}
.content1 .particle_wrap ._p12{top:226px;left:1347px;width:31px;height:30px;background-position:-1377px -258px}
.content1 .particle_wrap ._p13{top:346px;left:1464px;width:29px;height:27px;background-position:-1494px -374px}
.content1 .particle_wrap ._p14{top:336px;left:1493px;width:24px;height:24px;background-position:-1522px -365px}
.content1 .particle_wrap ._p15{top:254px;left:1477px;width:31px;height:29px;background-position:-1507px -287px}
.content1 .particle_wrap ._p16{top:254px;left:1473px;width:35px;height:29px;background-position:-1503px -287px}
.content1 .particle_wrap ._p17{top:239px;left:1508px;width:17px;height:15px;background-position:-1537px -15px}
.content1 .particle_wrap ._p18{top:198px;left:1465px;width:17px;height:17px;background-position:-1492px -228px}
.content1 .particle_wrap ._p19{top:208px;left:1482px;width:24px;height:24px;background-position:-1511px -239px}
.content1 .particle_wrap ._p20{top:195px;left:1507px;width:26px;height:26px;background-position:-1539px -227px}
.content1 .share_wrap{position:relative;width:1134px;margin:0 auto;padding-bottom:137px}
.content1 .share_form{margin-bottom:20px}
.content1 .share_form .textarea{position:relative;width:895px;height:55px;border-top:5px solid #B48D57;border-bottom:5px solid #B48D57;padding:20px 55px 25px 30px}
.content1 .share_form .textarea.focus label{display:none}
.content1 .share_form textarea, .content1 .share_form label{color:#6a89b7;font-size:14px;line-height:20px}
.content1 .share_form textarea{width:100%;height:100%;background:none;resize:none;overflow-y:auto}
.content1 .share_form label{position:absolute;top:20px;left:30px;cursor:text}
.content1 .share_form .total_txt{position:absolute;bottom:17px;right:5px;font-size:14px;color:#6a89b7}
.content1 .share_form .total_txt span{color:#c8a976}
.content1 .share_form button{position:absolute;top:0;right:0;width:144px;height:110px;background-color:#B48D57;background-position:-1105px -214px}
.content1 .share_form button:hover{background-color:#d5973a}
.content1 .share_list ul{overflow:hidden;margin-right:-18px}
.content1 .share_list li{position:relative;float:left;width:239px;height:213px;background:#273e5d;margin:0 18px 20px 0;padding:44px 0 0 30px}
.content1 .share_list li .cont{font-size:15px;height:128px;line-height:21px;color:#a4b4ba;word-wrap:break-word;overflow:hidden;overflow-y:auto;padding-right:30px}
.content1 .share_list li .cont::-webkit-scrollbar{background-color:#263F5D}
.content1 .share_list li .cont::-webkit-scrollbar-track{background-color:#263F5D}
.content1 .share_list li .cont::-webkit-scrollbar-thumb{background-color:#314b6f}
.content1 .share_list li .info{font-size:0;margin-bottom:16px}
.content1 .share_list li .info span, .event2 .share_list li .info em{display:inline-block;*zoom:1;vertical-align:top}
.content1 .share_list li .info em{color:#ccdbe1;font-size:15px;margin-left:9px}
.content1 .share_list li .date{position:absolute;bottom:28px;right:30px;color:#5983be}
.content1 .share_list li .btn-comt-delete{position:absolute;top:0;right:0;width:30px;height:30px;background-position:-827px -227px}
.content1 .share_wrap .pager{text-align:center;font-size:0}
.content1 .share_wrap .pager .move, .content1 .share_wrap .pager span a, .content1 .share_wrap .pager span{display:inline-block;*zoom:1;height:28px;vertical-align:top}
.content1 .share_wrap .pager .num{padding:0 20px}
.content1 .share_wrap .pager .num span, .content1 .share_wrap .pager .num a{font-size:15px;line-height:26px;margin:0 10px;padding:0 5px}
.content1 .share_wrap .pager .num span{color:#fff}
.content1 .share_wrap .pager a{color:#385982}
.content1 .share_wrap .pager a:hover{text-decoration:underline}
.content1 .share_wrap .pager .move{width:28px;*text-indent:0}
.content1 .share_wrap .pager .first{background-position:-763px -281px;margin-right:5px}
.content1 .share_wrap .pager .prev{background-position:-796px -281px}
.content1 .share_wrap .pager .next{background-position:-829px -281px;margin-right:5px}
.content1 .share_wrap .pager .last{background-position:-862px -281px}
.content1 .share_form textarea::-webkit-scrollbar{background:#22263F}
.content1 .share_form textarea::-webkit-scrollbar-track{background:#22263F}
.content1 .share_form textarea::-webkit-scrollbar-thumb{background:#233652}
@media screen and (min-width:0vw), (-ms-high-contrast: active), (-ms-high-contrast: none){
    .content1 .share_list li .cont{scrollbar-highlight-color:#314b6f;scrollbar-3dlight-color:#314b6f;scrollbar-face-color:#314b6f;scrollbar-shadow-color:#314b6f;scrollbar-darkshadow-color:#314b6f;scrollbar-track-color:#263F5D;scrollbar-arrow-color:#314b6f}
    .content1 .share_form textarea{scrollbar-highlight-color:#233652;scrollbar-3dlight-color:#233652;scrollbar-face-color:#233652;scrollbar-shadow-color:#233652;scrollbar-darkshadow-color:#233652;scrollbar-track-color:#22263F;scrollbar-arrow-color:#233652}
}

/* TOP */
#wrap .btn_top{display:none;position:fixed;bottom:72px;right:17px;width:98px;height:98px;background-position:-945px 0;z-index:101}
#wrap .btn_top:hover{background-position:-1052px 0}

/* content2 */
.content2{height:3735px}
.content2 .bg_section{height:100%;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1108_event_65F6D07C5919B8B5/content2_2923C15383A47F87/bg_content2.jpg") center top no-repeat}
.content2 .title_wrap span, .content2 .content_wrap div span{background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1108_event_65F6D07C5919B8B5/content2_2923C15383A47F87/spr_txt_content2.png") no-repeat;opacity:0}
.content2 .title_wrap.active span, .content2 .content_wrap.active div span{opacity:1}
.content2 .title_wrap{top:106px}
.content2 .title_wrap .headline._h1{top:0;left:496px;width:282px;height:96px}
.content2 .title_wrap .headline._h1 span{top:0;height:100%;transform-origin:50% 0;transform:perspective(300px) rotateX(-45deg)}
.content2 .title_wrap.active .headline._h1 span{transform:perspective(300px) rotateX(0);transition:opacity 100ms ease, transform 400ms cubic-bezier(0, .5, .3, 2)}
.content2 .title_wrap .headline._h1 ._t1{left:0;width:83px;background-position:-305px 0}
.content2 .title_wrap .headline._h1 ._t2{left:92px;width:95px;background-position:-397px 0}
.content2 .title_wrap .headline._h1 ._t3{left:189px;width:93px;background-position:-494px 0}
.content2 .title_wrap.active .headline._h1 ._t2{transition-delay:50ms}
.content2 .title_wrap.active .headline._h1 ._t3{transition-delay:100ms}
.content2 .title_wrap .headline._h2{top:128px;left:205px;width:869px;height:259px}
.content2 .title_wrap .headline._h2 .shadow{top:-3px;left:-14px;width:897px;height:285px;background-position:0 -534px}
.content2 .title_wrap.active .headline._h2 .shadow{transition:opacity 300ms linear;transition-delay:1050ms}
.content2 .title_wrap .headline._h2 .font{height:120px;transform:scaleY(0);transform-origin:50% 100%}
.content2 .title_wrap.active .headline._h2 .font{transform:scaleY(1);transition:opacity 100ms ease, transform 400ms cubic-bezier(0, 0.5, 0, 1.2)}
.content2 .title_wrap .headline._h2 .line1{top:0}
.content2 .title_wrap .headline._h2 .line2{top:142px}
.content2 .title_wrap .headline._h2 ._t1{left:0;width:104px;background-position:-14px -128px}
.content2 .title_wrap .headline._h2 ._t2{left:116px;width:107px;background-position:-130px -128px}
.content2 .title_wrap .headline._h2 ._t3{left:234px;width:115px;background-position:-248px -128px}
.content2 .title_wrap .headline._h2 ._t4{left:356px;width:108px;background-position:-370px -128px}
.content2 .title_wrap .headline._h2 ._t5{left:481px;width:101px;background-position:-495px -128px}
.content2 .title_wrap .headline._h2 ._t6{left:634px;width:115px;background-position:-648px -128px}
.content2 .title_wrap .headline._h2 ._t7{left:754px;width:115px;background-position:-768px -128px}
.content2 .title_wrap .headline._h2 ._t8{left:134px;width:115px;background-position:-148px -275px}
.content2 .title_wrap .headline._h2 ._t9{left:254px;width:115px;background-position:-268px -275px}
.content2 .title_wrap .headline._h2 ._t10{left:374px;width:115px;background-position:-388px -275px}
.content2 .title_wrap .headline._h2 ._t11{left:499px;width:105px;background-position:-513px -275px}
.content2 .title_wrap.active .headline._h2 ._t1{transition-delay:150ms}
.content2 .title_wrap.active .headline._h2 ._t2{transition-delay:200ms}
.content2 .title_wrap.active .headline._h2 ._t3{transition-delay:250ms}
.content2 .title_wrap.active .headline._h2 ._t4{transition-delay:300ms}
.content2 .title_wrap.active .headline._h2 ._t5{transition-delay:350ms}
.content2 .title_wrap.active .headline._h2 ._t6{transition-delay:400ms}
.content2 .title_wrap.active .headline._h2 ._t7{transition-delay:450ms}
.content2 .title_wrap.active .headline._h2 ._t8{transition-delay:500ms}
.content2 .title_wrap.active .headline._h2 ._t9{transition-delay:550ms}
.content2 .title_wrap.active .headline._h2 ._t10{transition-delay:600ms}
.content2 .title_wrap.active .headline._h2 ._t11{transition-delay:650ms}
.content2 .title_wrap .stamp{top:136px;left:630px;width:134px;height:134px;background-position:-861px -320px;transform:rotate(20deg) scale(2)}
.content2 .title_wrap.active .stamp{transform:rotate(0) scale(1);transition:opacity 300ms ease, transform 300ms cubic-bezier(0, .5, .3, 1.2);transition-delay:850ms}
.content2 .content_wrap .headline span{top:0;height:100%;transform-origin:50% 0;transform:perspective(300px) rotateX(-45deg)}
.content2 .content_wrap.active .headline span{transform:perspective(300px) rotateX(0);transition:opacity 100ms ease, transform 400ms cubic-bezier(0, .5, .3, 2)}
.content2 .content_wrap.active .headline ._t1{transition-delay:300ms}
.content2 .content_wrap.active .headline ._t2{transition-delay:350ms}
.content2 .content_wrap.active .headline ._t3{transition-delay:400ms}
.content2 .content_wrap.active .headline ._t4{transition-delay:450ms}
.content2 .content_wrap.active .headline ._t5{transition-delay:500ms}
.content2 .content_wrap.active .headline ._t6{transition-delay:550ms}
.content2 .content_wrap.active .headline ._t7{transition-delay:600ms}
.content2 .content_wrap.active .headline ._t8{transition-delay:650ms}
.content2 .content_wrap.active .headline ._t9{transition-delay:700ms}
.content2 .content_wrap.active .headline ._t10{transition-delay:750ms}
.content2 .content_wrap.active .headline ._t11{transition-delay:800ms}
.content2 .cnt1 .headline{top:303px;left:167px;width:945px;height:86px}
.content2 .cnt1 .headline ._t1{left:0;width:72px;background-position:0 -1239px}
.content2 .cnt1 .headline ._t2{left:76px;width:74px;background-position:-76px -1239px}
.content2 .cnt1 .headline ._t3{left:155px;width:79px;background-position:-155px -1239px}
.content2 .cnt1 .headline ._t4{left:236px;width:75px;background-position:-236px -1239px}
.content2 .cnt1 .headline ._t5{left:319px;width:69px;background-position:-319px -1239px}
.content2 .cnt1 .headline ._t6{left:418px;width:79px;background-position:-418px -1239px}
.content2 .cnt1 .headline ._t7{left:497px;width:77px;background-position:-497px -1239px}
.content2 .cnt1 .headline ._t8{left:603px;width:79px;background-position:-603px -1239px}
.content2 .cnt1 .headline ._t9{left:684px;width:79px;background-position:-684px -1239px}
.content2 .cnt1 .headline ._t10{left:787px;width:82px;background-position:-787px -1239px}
.content2 .cnt1 .headline ._t11{left:873px;width:72px;background-position:-873px -1239px}
.content2 .cnt2 .headline{top:303px;left:193px;width:891px;height:82px}
.content2 .cnt2 .headline ._t1{left:0;width:78px;background-position:0 -1351px}
.content2 .cnt2 .headline ._t2{left:88px;width:70px;background-position:-88px -1351px}
.content2 .cnt2 .headline ._t3{left:169px;width:69px;background-position:-169px -1351px}
.content2 .cnt2 .headline ._t4{left:272px;width:81px;background-position:-272px -1351px}
.content2 .cnt2 .headline ._t5{left:353px;width:79px;background-position:-353px -1351px}
.content2 .cnt2 .headline ._t6{left:457px;width:79px;background-position:-457px -1351px}
.content2 .cnt2 .headline ._t7{left:542px;width:79px;background-position:-542px -1351px}
.content2 .cnt2 .headline ._t8{left:650px;width:74px;background-position:-650px -1351px}
.content2 .cnt2 .headline ._t9{left:733px;width:75px;background-position:-733px -1351px}
.content2 .cnt2 .headline ._t10{left:812px;width:79px;background-position:-812px -1351px}
.content2 .content_wrap .ribbon{top:-52px;left:397px;width:487px;height:173px}
.content2 .content_wrap.active .ribbon{animation:ribbonMove 500ms ease}
.content2 .content_wrap.active .ribbon span{transition:opacity 300ms ease}
.content2 .content_wrap .ribbon .bg{top:0;left:0;width:100%;height:100%}
.content2 .cnt1 .ribbon .bg{background-position:0 -885px}
.content2 .cnt2 .ribbon .bg{background-position:-508px -885px}
.content2 .content_wrap .ribbon .program{top:32px;left:141px;height:50px}
.content2 .cnt1 .ribbon .program{width:209px;background-position:0 -1117px}
.content2 .cnt2 .ribbon .program{width:264px;background-position:-264px -1117px}
.content2 .cnt1{top:631px}
.content2 .cnt2{top:2119px}
.content2 .content_wrap .bg_cnt{top:0;left:-209px;width:1694px}
.content2 .cnt1 .bg_cnt{height:1376px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1108_event_65F6D07C5919B8B5/content2_2923C15383A47F87/bg_cnt1_content2.png") no-repeat}
.content2 .cnt2 .bg_cnt{height:1445px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1108_event_65F6D07C5919B8B5/content2_2923C15383A47F87/bg_cnt2_content2.png") no-repeat}
.content2 .cnt1 .btn_location{position:absolute;top:681px;left:656px;width:567px;height:115px;background-position:0 -536px}
.content2 .cnt1 .btn_location:hover{animation:btnLocHover 2s infinite ease;background-position:-633px -536px}
.content2 .cnt2 .char{top:576px;left:1002px;width:711px;height:974px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1108_event_65F6D07C5919B8B5/content2_2923C15383A47F87/bg_char_cnt2_content2.png") no-repeat}
.content2 .jellybee_wrap span{background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1108_event_65F6D07C5919B8B5/content2_2923C15383A47F87/spr_jellybee_content2.png") no-repeat}
.content2 .jellybee_wrap ._j1{top:131px;left:-197px;width:292px;height:217px;transform-origin:0 100%;animation:jellyRotate1 1.8s infinite linear}
.content2 .jellybee_wrap ._j2{top:510px;left:-80px;width:152px;height:185px;background-position:-339px 0;animation:jellyMove2 3s infinite linear}
.content2 .jellybee_wrap ._j3{top:2592px;left:-285px;width:152px;height:185px;background-position:-339px 0;animation:jellyMove4 1.5s infinite alternate ease}
.content2 .jellybee_wrap ._j4{top:150px;left:1328px;width:144px;height:189px;background-position:-765px 0;animation:jellyMove4 1.5s infinite alternate ease}
.content2 .jellybee_wrap ._j5{top:771px;left:1503px;width:144px;height:189px;background-position:-765px 0;transform-origin:100% 100%;animation:jellyRotate2 1.5s infinite linear}
.content2 .jellybee_wrap ._j6{top:465px;left:1200px;width:148px;height:229px;background-position:-538px 0;animation:jellyMove6 3s infinite linear}
.content2 .jellybee_wrap ._j7{top:1016px;left:-322px;width:144px;height:189px;background-position:-964px 0;animation:jellyMove7 1s infinite alternate ease}
.content2 .jellybee_wrap ._j8{top:1233px;left:1376px;width:152px;height:185px;background-position:-339px 0;animation:jellyMove8 2s infinite linear}
.content2 .jellybee_wrap ._j9{top:1554px;left:-335px;width:292px;height:217px;background-position:-1187px 0;transform-origin:100% 100%;animation:jellyRotate2 2s infinite linear}
.content2 .jellybee_wrap ._j10{top:2011px;left:206px;width:140px;height:223px;background-position:-1560px 0;z-index:1;animation:jellyMove10 3s infinite linear}
.content2 .cloud_wrap span{width:253px;height:110px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1108_event_65F6D07C5919B8B5/content2_2923C15383A47F87/spr_cloud_content2.png") no-repeat}
.content2 .cloud_wrap .light{background-position:0 -110px}
.content2 .cloud_wrap ._c1{top:142px;left:-101px;animation:cloudMove1 50s infinite linear}
.content2 .cloud_wrap ._c2{top:127px;left:1164px;animation:cloudMove2 50s infinite linear}
.content2 .cloud_wrap ._c3{top:248px;left:1503px;animation:cloudMove3 50s infinite linear}
.content2 .cloud_wrap ._c4{top:510px;left:1138px;animation:cloudMove4 50s infinite linear}
.content2 .cloud_wrap ._c5{top:575px;left:-409px;animation:cloudMove5 50s infinite linear}
.content2 .cloud_wrap ._c6{top:872px;left:1473px;animation:cloudMove6 50s infinite linear}
.content2 .cloud_wrap ._c7{top:1156px;left:-213px;animation:cloudMove7 20s infinite linear}
.content2 .cloud_wrap ._c8{top:1720px;left:1326px;animation:cloudMove8 20s infinite linear}
.content2 .cloud_wrap ._c9{top:1940px;left:-336px;animation:cloudMove9 50s infinite linear}
.content2 .cloud_wrap ._c10{top:2572px;left:-423px;animation:cloudMove10 20s infinite linear}
.content2 .cloud_wrap ._c11{top:2854px;left:-209px;animation:cloudMove11 20s infinite linear}
.content2 .cloud_wrap ._c12{top:2480px;left:1285px;animation:cloudMove12 20s infinite linear}
.content2 .cloud_wrap ._c13{top:3225px;left:-391px;background-position:0 -220px;filter:alpha(opacity=50);opacity:0.5;animation:cloudMove13 20s infinite linear}

/* layerpop */
.layerpop{display:none;position:fixed;top:0;left:0;right:0;bottom:0;height:100%;z-index:9999999;overflow:hidden;overflow-y:scroll;letter-spacing:-1px}
.layerpop.show{display:block;filter:alpha(opacity=0);opacity:0}
.layerpop .dimmed{position:absolute;top:0;left:0;right:0;width:100%;min-height:100%;background:#000;filter:alpha(opacity=85);opacity:0.85}
.layerpop .bg_top{position:absolute;top:0;left:0;width:99.99%;padding-left:0.01%}
.layerpop.scrollpop .pop_content{top:40px;margin-top:0 !important;margin-bottom:40px}
.layerpop.scrollpop .dimmed{padding-bottom:80px}
.layerpop .pop_content{position:absolute;top:50%;left:50%;width:1020px;margin-left:-510px}
.layerpop h2, .layerpop .caution{text-indent:-99999px;overflow:hidden}
.layerpop .btn_close{position:absolute;top:32px;right:0;width:56px;height:56px}

/* video layer */
.pop_video .bg_top{height:673px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1108_event_65F6D07C5919B8B5/video_F3B81EBD748A5B8E/bg_pop_video.png") center top no-repeat}
.pop_video .pop_content{height:780px;margin-top:-390px}
.pop_video h2, .pop_video .caution{background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1108_event_65F6D07C5919B8B5/video_F3B81EBD748A5B8E/spr_txt_pop_video.png") no-repeat}
.pop_video h2{width:853px;height:122px;margin-bottom:33px}
.pop_video .video_wrap{position:relative;width:100%;height:575px;background:#000}
.pop_video .video_wrap iframe{width:100%;height:100%}
.pop_video .caution{width:100%;height:50px;background-position:0 -150px}
.pop_video .btn_close{background-position:-747px 0}
.pop_video .btn_close:hover{background-position:-824px 0}

/* map layer */
.pop_map .bg_top{height:503px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1108_event_65F6D07C5919B8B5/content2_2923C15383A47F87/bg_pop_map.png") center top no-repeat}
.pop_map .pop_content{height:705px;margin-top:-353px}
.pop_map h2{width:424px;height:99px;background:url("https://ssl.nexon.com/s2/game/tales/event/2019/1108_event_65F6D07C5919B8B5/content2_2923C15383A47F87/h2_pop_map.png") no-repeat;margin-bottom:31px}
.pop_map .map_wrap{width:100%;height:575px}
.pop_map .btn_close{background-position:-747px -70px}

@keyframes widthMove{
    0%{width:100%;transform:scaleX(0);transform-origin:0 50%}
    49%{width:100%;transform:scaleX(1);transform-origin:0 50%}
    51%{width:100%;transform:scaleX(1);transform-origin:100% 50%}
    100%{width:100%;transform:scaleX(0);transform-origin:100% 50%}
}

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

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

@keyframes ribbonMove{
    0%{transform:scaleX(0.9)}
    40%{transform:scaleX(1.05)}
    60%{transform:scaleX(0.85)}
    80%{transform:scaleX(1.02)}
    100%{transform:scaleX(1)}
}

@keyframes jellyMove4{
    100%{transform:translateY(-80px)}
}

@keyframes jellyMove7{
    100%{transform:translateY(-50px)}
}

@keyframes jellyMove8{
    0%{transform:translateY(0)}
    25%{transform:translateY(30px)}
    50%{transform:translateY(0)}
    75%{transform:translateY(-30px)}
    100%{transform:translateY(0)}
}

@keyframes jellyMove2{
    0%{transform:translate(0, 0)}
    50%{transform:translate(200px, -35px)}
    50.1%{transform:translate(200px, -35px) rotateY(180deg)}
    100%{transform:translate(0, 0) rotateY(180deg)}
}

@keyframes jellyMove6{
    0%{transform:translate(0, 0)}
    50%{transform:translate(-200px, -30px)}
    50.1%{transform:translate(-200px, -30px) rotateY(180deg)}
    100%{transform:translate(0, 0) rotateY(180deg)}
}

@keyframes jellyMove10{
    0%{transform:translate(0, 0) rotateY(180deg)}
    50%{transform:translate(-200px, 10px) rotateY(180deg)}
    50.1%{transform:translate(-200px, 10px) rotateY(0deg)}
    100%{transform:translate(0, 0) rotateY(0deg)}
}

@keyframes jellyRotate1{
    0%{transform:rotate(0)}
    25%{transform:rotate(-8deg)}
    50%{transform:rotate(0)}
    75%{transform:rotate(8deg)}
    100%{transform:rotate(0)}
}

@keyframes jellyRotate2{
    0%{transform:rotate(0)}
    25%{transform:rotate(8deg)}
    50%{transform:rotate(0)}
    75%{transform:rotate(-8deg)}
    100%{transform:rotate(0)}
}

@keyframes cloudMove1{
    0%{transform:translateX(0)}
    20%{opacity:1;transform:translateX(-472px)}
    20.1%{opacity:0;transform:translateX(-472px)}
    21%{opacity:0;transform:translateX(1701px)}
    21.1%{opacity:1;transform:translateX(1701px)}
    100%{opacity:1;transform:translateX(0)}
}

@keyframes cloudMove2{
    0%{transform:translateX(0)}
    80%{opacity:1;transform:translateX(-1737px)}
    80.1%{opacity:0;transform:translateX(-1737px)}
    81%{opacity:0;transform:translateX(436px)}
    81.1%{opacity:1;transform:translateX(436px)}
    100%{opacity:1;transform:translateX(0)}
}

@keyframes cloudMove3{
    0%{transform:translateX(0)}
    90%{opacity:1;transform:translateX(-2076px)}
    90.1%{opacity:0;transform:translateX(-2076px)}
    91%{opacity:0;transform:translateX(96px)}
    91.1%{opacity:1;transform:translateX(96px)}
    100%{opacity:1;transform:translateX(0)}
}

@keyframes cloudMove4{
    0%{transform:translateX(0)}
    80%{opacity:1;transform:translateX(-1711px)}
    80.1%{opacity:0;transform:translateX(-1711px)}
    81%{opacity:0;transform:translateX(461px)}
    81.1%{opacity:1;transform:translateX(461px)}
    100%{opacity:1;transform:translateX(0)}
}

@keyframes cloudMove5{
    0%{transform:translateX(0)}
    10%{opacity:1;transform:translateX(-164px)}
    10.1%{opacity:0;transform:translateX(-164px)}
    11%{opacity:0;transform:translateX(2008px)}
    11.1%{opacity:1;transform:translateX(2008px)}
    100%{opacity:1;transform:translateX(0)}
}

@keyframes cloudMove6{
    0%{transform:translateX(0)}
    90%{opacity:1;transform:translateX(-2045px)}
    90.1%{opacity:0;transform:translateX(-2045px)}
    91%{opacity:0;transform:translateX(127px)}
    91.1%{opacity:1;transform:translateX(127px)}
    100%{opacity:1;transform:translateX(0)}
}

@keyframes cloudMove7{
    0%{transform:translateX(0)}
    60%{opacity:1;transform:translateX(-360px)}
    60.1%{opacity:0;transform:translateX(-360px)}
    61%{opacity:0;transform:translateX(150px)}
    61.1%{opacity:1;transform:translateX(150px)}
    100%{opacity:1;transform:translateX(0)}
}

@keyframes cloudMove8{
    0%{transform:translateX(0)}
    40%{opacity:1;transform:translateX(-195px)}
    40.1%{opacity:0;transform:translateX(-195px)}
    41%{opacity:0;transform:translateX(274px)}
    41.1%{opacity:1;transform:translateX(274px)}
    100%{opacity:1;transform:translateX(0)}
}

@keyframes cloudMove9{
    0%{transform:translateX(0)}
    30%{opacity:1;transform:translateX(-237px)}
    30.1%{opacity:0;transform:translateX(-237px)}
    31%{opacity:0;transform:translateX(1936px)}
    31.1%{opacity:1;transform:translateX(1936px)}
    100%{opacity:1;transform:translateX(0)}
}

@keyframes cloudMove10{
    0%{transform:translateX(0)}
    40%{opacity:1;transform:translateX(-149px)}
    40.1%{opacity:0;transform:translateX(-149px)}
    41%{opacity:0;transform:translateX(376px)}
    41.1%{opacity:1;transform:translateX(376px)}
    100%{opacity:1;transform:translateX(0)}
}

@keyframes cloudMove11{
    0%{transform:translateX(0)}
    60%{opacity:1;transform:translateX(-364px)}
    60.1%{opacity:0;transform:translateX(-364px)}
    61%{opacity:0;transform:translateX(185px)}
    61.1%{opacity:1;transform:translateX(185px)}
    100%{opacity:1;transform:translateX(0)}
}

@keyframes cloudMove12{
    0%{transform:translateX(0)}
    40%{opacity:1;transform:translateX(-194px)}
    40.1%{opacity:0;transform:translateX(-194px)}
    41%{opacity:0;transform:translateX(315px)}
    41.1%{opacity:1;transform:translateX(315px)}
    100%{opacity:1;transform:translateX(0)}
}

@keyframes cloudMove13{
    0%{transform:translateX(0)}
    40%{opacity:1;transform:translateX(-182px)}
    40.1%{opacity:0;transform:translateX(-182px)}
    41%{opacity:0;transform:translateX(306px)}
    41.1%{opacity:1;transform:translateX(306px)}
    100%{opacity:1;transform:translateX(0)}
}

@keyframes btnBanHover{
    0%{transform:translateX(0)}
    5%{transform:translateX(15px)}
    10%{transform:translateX(0)}
    15%{transform:translateX(8px)}
    25%{transform:translateX(0)}
    100%{transform:translateX(0)}
}

@keyframes btnLocHover{
    0%{transform:translateX(0)}
    5%{transform:translateX(-8px)}
    10%{transform:translateX(8px)}
    15%{transform:translateX(-8px)}
    20%{transform:translateX(8px)}
    25%{transform:translateX(0)}
    100%{transform:translateX(0)}
}

@keyframes jellyIntro{
    0%{transform:translate(0,0)}
    8%{transform:translate(-30px, -30px)}
    14%{transform:translate(5px, 5px)}
    20%{transform:translate(0, 0)}
    100%{transform:translate(0, 0)}
    
}