@charset "utf-8";

/* reset */
html,body,div,p,img,span,a,em,strong,pre,h1,h2,h3,h4,h4,h5,h6,ul,ol,li,dl,dt,dd,table,tbody,thead,tfoot,tr,th,td,form,fieldset,legend,caption,input,textarea,button,select,object,video,iframe{margin:0;padding:0}
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:#fff;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:url("https://ssl.nexon.com/s2/game/tales/event/2018/1122_honey/bg_event.jpg") 0 1126px repeat-x}
#wrap.load{visibility:visible}
#wrap .section{position:relative;width:100%}
#wrap .section .container{position:relative;width:1000px;height:100%;margin:0 auto}

/* common */
#header a, #header button, .intro .link_list li a span, .section .btn_link, #quick li a span, #quick .btn_top{display:block;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/1122_honey/spr_btn.png") no-repeat;text-indent:-99999px;overflow:hidden}
.event .btn_link{position:absolute;left:50%;width:536px;height:95px;background-position:0 -626px;margin-left:-268px}
.event .btn_link:hover{background-position:-557px -626px}
.event h3{position:absolute;left:50%;text-indent:-99999px;overflow:hidden;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/1122_honey/spr_h3.png") no-repeat;transform:translateY(10px)}
.event.active h3{transform:translateY(0);transition:transform 300ms ease}
.event .moving{position:absolute}
.event .moving_char{background:url("https://ssl.nexon.com/s2/game/tales/event/2018/1122_honey/spr_moving_char.png")}
.event.hide{overflow:hidden}

/* header */
#header{position:absolute;top:0;left:0;width:100%;z-index:100}
#header h1{position:absolute;top:39px;left:60px}
#header h1 a{width:246px;height:106px}
#header .util{position:absolute;top:55px;right:50px;padding-left:204px}
#header .util ul{overflow:hidden}
#header .util li{float:left;margin-left:3px}
#header .util li a{width:41px;height:47px}
#header .util .btn_home{background-position:-513px 0}
#header .util .btn_fb{background-position:-557px 0}
#header .util .btn_tw{background-position:-601px 0}
#header .util .btn_game{position:absolute;top:0;left:0;width:198px;height:48px;background-position:-279px 0}
#header .util .btn_game:hover{background-position:-279px -68px}
#header .util .btn_today{width:142px;height:22px;background-position:-513px -81px;margin:23px 0 0 -10px}

/* intro */
.intro{height:1126px;background:#FEE042 url("https://ssl.nexon.com/s2/game/tales/event/2018/1122_honey/bg_intro.jpg") 50% 0 no-repeat;overflow:hidden}
.intro .tit_wrap{position:absolute;top:184px;left:50%;width:868px;margin-left:-428px}
.intro .tit_wrap span{display:block;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/1122_honey/spr_tit.png") no-repeat;text-indent:-99999px;overflow:hidden}
.intro .tit_wrap .sub_tit{width:436px;height:44px;margin:0 0 25px 210px}
.intro .tit_wrap .h2_shadow{opacity:0;position:absolute;top:451px;left:-60px;width:1013px;height:93px;background-position:0 -407px;bottom:-43px}
.load .intro .tit_wrap .h2_shadow{opacity:1;transition:opacity 300ms 400ms linear}
.intro .tit_wrap h2{position:relative;height:432px}
.intro .tit_wrap h2 span{position:absolute}
.intro .tit_wrap .h2_small{top:0;height:111px;background-position:0 -108px;transform:scale(0);opacity:0;margin:0 auto;transition:all 300ms cubic-bezier(0, 0.6, 0.0, 1.5)}
.load .intro .tit_wrap .h2_small{transform:scale(1);opacity:1}
.intro .tit_wrap .hs_1{left:227px;width:102px}
.intro .tit_wrap .hs_2{left:327px;width:103px;background-position:-100px -108px;transition-delay:100ms}
.intro .tit_wrap .hs_3{left:427px;width:107px;background-position:-200px -108px;transition-delay:200ms}
.intro .tit_wrap .hs_4{left:533px;width:97px;background-position:-306px -108px;transition-delay:300ms}
.intro .tit_wrap .h2_big{top:120px;height:311px;opacity:0;transform:perspective(2000px) rotateY(-25deg);opacity:0;transition:opacity 200ms 400ms linear, transform 0ms 1000ms linear}
.load .intro .tit_wrap .h2_big{opacity:1;animation: titleRotate1 700ms 400ms linear;transform:perspective(2000px) rotateY(0deg)}
.load .intro .tit_wrap .hb_3{animation:titleRotate2 700ms 400ms linear}
.intro .tit_wrap .hb_1{left:0;width:280px;background-position:-543px 0}
.intro .tit_wrap .hb_2{left:297px;width:267px;background-position:-840px 0}
.intro .tit_wrap .hb_3{right:0;width:281px;background-position:-1130px 0;transform:perspective(2000px) rotateY(25deg)}
.intro .link_list{position:absolute;top:778px;left:50%;width:1070px;margin-left:-535px}
.intro .link_list:after{content:"";display:block;clear:both}
.intro .link_list li{float:left}
.intro .link_list .link2{margin:0 40px}
.intro .link_list li a{position:relative;display:block;transition:margin-top 300ms ease}
.intro .link_list li .off, .intro .link_list li .on{position:absolute;left:50%;transition:top 250ms ease}
.intro .link_list li .off{top:-54px;width:127px;height:64px;background-position:0 -492px;margin-left:-63px}
.intro .link_list li a:hover{margin-top:-40px}
.intro .link_list li a:hover .off{top:64px}
.intro .link_list li a:hover .on{top:-44px}
.intro .link_list li .txt{position:relative;width:330px;height:268px}
.intro .link_list .link1 .txt{background-position:0 -181px}
.intro .link_list .link2 .txt{background-position:-370px -181px}
.intro .link_list .link3 .txt{background-position:-740px -181px}
.intro .link_list li .on{top:57px;width:145px;height:57px;margin-left:-74px}
.intro .link_list .link1 .on{background-position:-218px -492px}
.intro .link_list .link2 .on{background-position:-441px -492px}
.intro .link_list .link3 .on{background-position:-663px -492px}
.intro .object{position:absolute;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/1122_honey/spr_intro_obj.png") no-repeat}
.intro .figure{opacity:0;transform:scale(0);transition:all 300ms cubic-bezier(0, 0.5, 0.0, 1.2)}
.load .intro .figure{opacity:1;transform:scale(1)}
.intro .obj1{top:224px;left:99px;width:223px;height:191px;transform:scale(1) translate(0, 20px);transition-delay:800ms}
.intro .obj2{top:474px;left:-414px;width:353px;height:322px;background-position:0 -301px;transition-delay:600ms}
.intro .obj3{top:788px;left:-429px;width:232px;height:218px;background-position:0 -669px;transition-delay:700ms}
.intro .obj4{top:855px;left:1182px;width:232px;height:214px;background-position:0 -958px;transition-delay:550ms}
.intro .obj5{top:232px;left:703px;width:175px;height:172px;background-position:0 -1227px;transition-delay:900ms}
.intro .obj6{top:564px;left:-70px;width:291px;height:198px;background-position:0 -1476px;transition-delay:850ms}
.intro .obj7{top:590px;left:565px;width:296px;height:152px;background-position:0 -1730px;transition-delay:960ms}
.intro .obj8{top:559px;left:1004px;width:180px;height:177px;background-position:0 -1935px;transition-delay:750ms}
.intro .obj9{top:220px;left:1205px;width:493px;height:517px;background-position:0 -2263px;transition-delay:650ms}
.intro .bubble{opacity:0;top:164px;left:829px;width:173px;height:163px;background-position:-372px 0;transform:scale(0) rotate(-30deg)}
.load .intro .bubble, .load .intro .spring{opacity:1;transform-origin:0 100%}
.load .intro .bubble{transform:scale(1) rotate(0);transition:all 300ms 1050ms cubic-bezier(0.32, 0.19, 0.3, 1.46)}
.intro .spring{opacity:0;top:314px;left:956px;width:126px;height:104px;background-position:-372px -264px;transform:scale(0) translate(-100px, 100px)}
.load .intro .spring{transform:scale(1) translate(0, 0);transition:all 350ms 1200ms cubic-bezier(0.32, 0.19, 0.3, 2)}
.intro .snow_big{width:107px;height:119px;background-position:-438px -443px}
.intro .snow_small{width:58px;height:65px;background-position:-438px -623px}
.intro .snow1{top:199px;left:-317px;animation:snowRotate1 9s linear infinite}
.intro .snow2{top:253px;left:-199px;animation:snowRotate2 7s linear infinite}
.intro .snow3{top:-40px;left:991px;animation:snowRotate2 10s linear infinite}
.intro .snow4{top:409px;left:1177px;animation:snowRotate1 8s linear infinite}

/* event1 */
.event1{height:1150px}
.event1 .container{background:url("https://ssl.nexon.com/s2/game/tales/event/2018/1122_honey/cnt_event1.png") no-repeat}
.event1 h3{top:93px;width:845px;height:136px;margin-left:-422px}
.event1 .btn_link{bottom:110px}
.event1 .char1{top:169px;left:-331px;width:278px;height:329px}
.event1 .char2{top:721px;left:1030px;width:287px;height:393px;background-position:0 -533px}
.event1 .star1{top:377px;left:-444px;width:491px;height:870px;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/1122_honey/bg_moving_star1_event1.png") repeat-y}
.event1 .star2{top:0;left:924px;width:460px;height:1502px;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/1122_honey/bg_moving_star2_event1.png") repeat-y}

/* event2 */
.event2{height:1985px}
.event2 .container{background:url("https://ssl.nexon.com/s2/game/tales/event/2018/1122_honey/cnt_event2.png") no-repeat}
.event2 h3{top:97px;width:653px;height:277px;background-position:0 -225px;margin-left:-327px}
.event2 .btn_link{bottom:109px}
.event2 .char1{top:658px;left:-425px;width:465px;height:334px;background-position:0 -1066px}
.event2 .char2{top:1303px;left:1009px;width:386px;height:533px;background-position:0 -1568px}
.event2 .star1{top:161px;left:-377px;width:307px;height:1769px;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/1122_honey/bg_moving_star1_event2.png") repeat-y}
.event2 .star2{top:161px;left:981px;width:704px;height:2248px;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/1122_honey/bg_moving_star2_event2.png") repeat-y}

/* event3 */
.event3{height:1569px}
.event3 .container{background:url("https://ssl.nexon.com/s2/game/tales/event/2018/1122_honey/cnt_event3.png") no-repeat}
.event3 h3{top:97px;width:822px;height:278px;background-position:0 -575px;margin-left:-412px}
.event3 .btn_link{bottom:224px}
.event3 .bg_table{position:absolute;top:642px;left:-250px;width:1532px;height:550px;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/1122_honey/bg_table_event3.png") no-repeat}
.event3 .char1{top:430px;left:-467px;width:470px;height:506px;background-position:0 -2131px}
.event3 .char2{top:1147px;left:1124px;width:207px;height:263px;background-position:0 -2664px}
.event3 .star1{top:-146px;left:-429px;width:354px;height:2292px;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/1122_honey/bg_moving_star1_event3.png") repeat-y}
.event3 .star2{top:167px;left:771px;width:767px;height:1524px;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/1122_honey/bg_moving_star2_event3.png") repeat-y}

/* quick */
#quick{display:none;position:fixed;top:50%;right:40px;width:107px;height:328px;background:#fff;border-radius:8px;border:3px solid #fff;z-index:100;margin-top:-166px}
#quick ul{border-radius:6px;overflow:hidden}
#quick li{border-bottom:3px solid #fff}
#quick li a{display:block;height:82px}
#quick li a span{width:100%;height:100%;filter:alpha(opacity=50);opacity:0.5;transition:opacity 200ms ease}
#quick li.on span, #quick li a:hover span{filter:alpha(opacity=100);opacity:1}
#quick .qu1 a{background:#FD92C8}
#quick .qu1 span{background-position:-3px -760px}
#quick .qu2 a{background:#78BFFF}
#quick .qu2 span{background-position:-3px -844px}
#quick .qu3 a{background:#FFB424}
#quick .qu3 span{background-position:-3px -930px}
#quick .btn_top{position:absolute;left:50%;bottom:3px;width:78px;height:63px;background-position:-18px -1022px;margin-left:-39px}

/* particle */
#particle span{position:absolute;background:url("https://ssl.nexon.com/s2/game/tales/event/2018/1122_honey/spr_particle.png") no-repeat}
#particle .ptc1{width:29px;height:48px}
#particle .ptc2{width:45px;height:18px;background-position:0 -75px}
#particle .ptc3{width:32px;height:29px;background-position:0 -129px}
#particle .ptc4{width:51px;height:32px;background-position:0 -188px}
#particle .ptc5{width:42px;height:29px;background-position:0 -249px}
#particle .ptc6{width:56px;height:29px;background-position:0 -309px}
#particle .ptc7{width:44px;height:17px;background-position:0 -375px}
#particle .ptc8{width:84px;height:43px;background-position:0 -422px}
#particle .ptc9{width:46px;height:36px;background-position:0 -486px}
#particle .ptc10{width:57px;height:30px;background-position:0 -549px}
#particle .ptc11{width:24px;height:19px;background-position:0 -614px}
#particle .ptc12{width:27px;height:54px;background-position:0 -656px}
#particle .ptc13{width:56px;height:47px;background-position:0 -720px}
#particle .ptc14{width:52px;height:32px;background-position:0 -787px}
#particle .ptc15{width:57px;height:29px;background-position:0 -849px}
#particle .ptc16{width:58px;height:32px;background-position:0 -907px}
#particle .ptc17{width:48px;height:27px;background-position:0 -970px}
#particle .ptc18{width:31px;height:17px;background-position:0 -1035px}

@keyframes titleRotate1{
    0% {transform:perspective(2000px) rotateY(-25deg)}
    50% {transform:perspective(2000px) rotateY(25deg)}
    100% {transform:perspective(2000px) rotateY(0deg)}
}

@keyframes titleRotate2{
    0% {transform:perspective(2000px) rotateY(25deg)}
    50% {transform:perspective(2000px) rotateY(-25deg)}
    100% {transform:perspective(2000px) rotateY(0deg)}
}

@keyframes snowRotate1{
    0% {transform:rotate(0)}
    100% {transform:rotate(360deg)}
}

@keyframes snowRotate2{
    0% {transform:rotate(0)}
    100% {transform:rotate(-360deg)}
}