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

/* layout */
#wrap{position:relative;overflow:hidden;min-width:1280px;background:#78BFFF;padding-left:155px}
#wrap .section{position:relative;width:100%}
.section .container{position:relative;width:1101px;height:100%;margin:0 auto}

/* common */
.section .bg_section{position:absolute;top:0;left:50%;width:1765px;height:100%;margin-left:-883px}
#lnb h1 a, #lnb .btn_event, .util a, .util button, .section .link_twit, .intro .btn, .quick li a span, .quick .btn_top{display:block;text-indent:-9999px;overflow:hidden;background:url("https://ssl.nexon.com/S2/Game/maplestory2/event/2018/0426_mofun/spr_btn.png") no-repeat}
.section .link_twit{position:absolute;width:269px;height:18px}
.ptc{position:absolute}
.active .ptc{transition:all 180ms linear}

/* lnbr */
#lnb{position:absolute;top:0;left:0;width:155px;background:#419CFE;z-index:100}
#lnb.fixed{position:fixed}
@media (-webkit-min-device-pixel-ratio: 2){
    #lnb{min-height:100%}    
}
#lnb h1{position:absolute;top:30px;left:26px}
#lnb h1 a{width:102px;height:66px}
#lnb .event_list{padding:119px 0 20px}
#lnb .btn_event{width:134px;height:37px;background-position:-1px -99px;margin:0 auto 20px}

/* util */
.util{position:absolute;top:51px;right:45px;padding-right:187px;z-index:100}
.util ul{overflow:hidden}
.util li{float:left}
.util li a{width:41px;height:47px;margin-left:3px}
.util .btn_home a{background-position:-195px 0}
.util .btn_fb a{background-position:-239px 0}
.util .btn_tw a{background-position:-283px 0}
.util .btn_game{position:absolute;top:2px;right:0 ;width:176px;height:48px;background-position:-335px -2px}
.util .btn_game:hover{top:5px;height:45px;background-position:-335px -68px}
.util .btn_today{position:absolute;top:57px;right:18px;width:138px;height:19px;background-position:-322px -430px}

/* intro */
#wrap .intro{height:2872px}
.intro .ptc_left{top:1386px;left:-398px;width:515px;height:1749px;background:url("https://ssl.nexon.com/S2/Game/maplestory2/event/2018/0426_mofun/particle_intro_left.png") repeat-y}
.intro .ptc_right{top:1657px;right:-255px;width:358px;height:1290px;background:url("https://ssl.nexon.com/S2/Game/maplestory2/event/2018/0426_mofun/particle_intro_right.png") repeat-y}
.intro .bg_section{background:url("https://ssl.nexon.com/S2/Game/maplestory2/event/2018/0426_mofun/bg_intro.png") no-repeat}
.intro .char{position:absolute;opacity:0}
.intro .cr{top:508px;right:-179px;width:552px;height:933px;transform:translate(100px, -100px)}
.intro .cr span{background:url("https://ssl.nexon.com/S2/Game/maplestory2/event/2018/0426_mofun/img_char_right.png") no-repeat}
.intro .cr .body{display:block;width:100%;height:100%}
.intro .cr .ear{position:absolute;top:45px;left:291px;width:112px;height:148px;background-position:-291px -45px;z-index:1}
.intro .cl{top:488px;left:-157px;width:456px;height:886px;background:url("https://ssl.nexon.com/S2/Game/maplestory2/event/2018/0426_mofun/img_char_left.png") no-repeat;transform:translate(-100px, -100px)}
.intro.motion .char{opacity:1;transform:translate(0, 0);transition:all 0.4s ease}
.intro.motion .cl{transition-delay:0.3s;animation:doongLeft 0.7s 0.7s infinite alternate linear}
.intro.motion .cr{transition-delay:0.4s;animation:doongRight 0.7s 0.8s infinite alternate linear}
.intro .title_wrap{position:absolute;top:171px;left:-94px;width:1278px;height:475px;background:url("https://ssl.nexon.com/S2/Game/maplestory2/event/2018/0426_mofun/title_wrap.png") no-repeat}
.intro .cafe_wrap{position:absolute;top:1830px;left:0;width:100%;height:1042px}
.intro .btn{position:absolute}
.intro .btn_cafe{top:2544px;left:56px;width:160px;height:38px;background-position:0 -184px}
.intro .btn_cafe:hover{background-position:0 -224px}
.intro .btn_map{left:354px;top:2720px;width:390px;height:85px;background-position:-316px -205px}
.intro .btn_map:hover{background-position:-316px -303px}

/* content1 */
#wrap .content1{height:1303px;background:#FF87BA}
.content1 .bg_section{background:url("https://ssl.nexon.com/S2/Game/maplestory2/event/2018/0426_mofun/bg_content1.png") no-repeat}
.content1 .ptc_left{top:207px;left:-446px;width:584px;height:1281px;background:url("https://ssl.nexon.com/S2/Game/maplestory2/event/2018/0426_mofun/particle_content1_left.png") repeat-y}
.content1 .ptc_right{top:19px;right:-322px;width:311px;height:1027px;background:url("https://ssl.nexon.com/S2/Game/maplestory2/event/2018/0426_mofun/particle_content1_right.png") repeat-y}


/* content2 */
#wrap .content2{height:1459px;background:#78BFFF}
.content2 .bg_section{background:url("https://ssl.nexon.com/S2/Game/maplestory2/event/2018/0426_mofun/bg_content2.png") no-repeat}
.content2 .link_twit{bottom:116px;left:540px;background-position:-157px -143px}
.content2 .ptc_left{top:33px;left:-391px;width:352px;height:1685px;background:url("https://ssl.nexon.com/S2/Game/maplestory2/event/2018/0426_mofun/particle_content2_left.png") repeat-y}
.content2 .ptc_right{top:136px;right:-331px;width:307px;height:1272px;background:url("https://ssl.nexon.com/S2/Game/maplestory2/event/2018/0426_mofun/particle_content2_right.png") repeat-y}

/* event */
#wrap .event{background:#FFDC39}
.event .ptc_left{top:388px;left:-387px;width:800px;height:6845px;background:url("https://ssl.nexon.com/S2/Game/maplestory2/event/2018/0426_mofun/particle_event_left.png") repeat-y}
.event .ptc_right{top:95px;right:-333px;width:908px;height:6932px;background:url("https://ssl.nexon.com/S2/Game/maplestory2/event/2018/0426_mofun/particle_event_right.png") repeat-y}

/*event1*/
.event .event1{height:3395px}
.event1 .bg_section{background:url("https://ssl.nexon.com/S2/Game/maplestory2/event/2018/0426_mofun/bg_event1.png") no-repeat}
.event1 .gif_gift{position:absolute}
.event1 .gift1{top:1365px;left:118px}
.event1 .gift2{top:2050px;left:673px}
.event1 .link_twit{left:582px;bottom:73px;background-position:-160px -118px}

/* event2 */
.event .event2{height:1614px}
.event2 .bg_section{background:url("https://ssl.nexon.com/S2/Game/maplestory2/event/2018/0426_mofun/bg_event2.png") no-repeat}

/* event3 */
.event .event3{height:2098px}
.event3 .bg_section{background:url("https://ssl.nexon.com/S2/Game/maplestory2/event/2018/0426_mofun/bg_event3_0504.png") no-repeat}
.event3 .link_mail{position:absolute;left:401px;top:547px;display:block;width:425px;height:46px;line-height:42px;font-weight:500;font-size:30px;letter-spacing:-1px;text-align:center;color:#024100;background:#fff;border:3px solid #7CCD7A}

/* caution */
.caution{height:2012px;background:#78BFFF}
.caution .bg_section{background:url("https://ssl.nexon.com/S2/Game/maplestory2/event/2018/0426_mofun/bg_caution_0504.png") no-repeat}
.caution .ptc_left{top:219px;left:-463px;width:667px;height:2317px;background:url("https://ssl.nexon.com/S2/Game/maplestory2/event/2018/0426_mofun/particle_caution_left_0504.png") repeat-y}
.caution .ptc_right{top:-67px;right:-314px;width:345px;height:2567px;background:url("https://ssl.nexon.com/S2/Game/maplestory2/event/2018/0426_mofun/particle_caution_right_0504.png") repeat-y}

/* quick */
.quick{position:absolute;right:46px;height:562px;z-index:100}
.quick.fixed{position:fixed;top:50%;margin-top:-281px}
.quick li{margin-bottom:6px}
.quick li a{position:relative;display:block;width:113px;height:113px;transform:perspective(226px)}
.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 a{z-index:1}
.quick li:hover a span, .quick li.on a span{transition:all 200ms linear}
.quick li:hover .back, .quick li.on .back{filter:alpha(opacity=100);transform:rotateY(0deg)}
.quick li:hover .front, .quick li.on .front{transform:rotateY(180deg)}
.quick .quick1 .front{background-position:0 -318px}
.quick .quick1 .back{background-position:-166px -318px}
.quick .quick2 .front{background-position:0 -437px}
.quick .quick2 .back{background-position:-166px -437px}
.quick .quick3 .front{background-position:0 -556px}
.quick .quick3 .back{background-position:-166px -556px}
.quick .quick4 .front{background-position:0 -675px}
.quick .quick4 .back{background-position:-166px -675px}
.quick .btn_top{position:absolute;left:7px;bottom:0;width:99px;height:70px;background-position:-7px -810px}

@keyframes doongLeft{
    0%{transform:translate(0px, 0px)}
    100%{transform:translate(-20px, -20px)}
}

@keyframes doongRight{
    0%{transform:translate(0px, 0px)}
    100%{transform:translate(20px, -20px)}
}