@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:auto}
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:#000;line-height:1;background:#000}
input,textarea,button,select{font-size:inherit;font-family:'Noto Sans KR', '맑은 고딕','Malgun Gothic','돋움','dotum',sans-serif;color:#000}
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:1260px;background:#0A31B9}
.container{position:absolute;left:333px;width:66%;max-width:1254px;min-width:1050px}

/* gnb */
.gnbWrapper .gnbBarMargin, #GNB_Bar{width:1254px !important}

/* common */
#header a, #header button, #header .copyright, .layerpop button, #lnb .nav li a span, #lnb button{display:block;text-indent:-9999px;overflow:hidden;background:url("https://ssl.nexon.com/S2/Game/maplestory2/event/2018/0705_change/spr.png") no-repeat}
.h2_wrap{max-width:457px}
.h2_wrap span{display:block;width:76.81%;margin:0 0 3.07% 12.48%}
.h2_wrap h2{background-position:0 -41px}
.h2_wrap img, .section img{width:100%}

/* header */
#header{position:absolute;top:0;left:0;width:100%;z-index:100}
#header.fixed{position:fixed;filter:alpha(opacity=40);opacity:0.4;z-index:1}
#header h1, #header .util{position:absolute}
#header h1{top:40px;left:3.125%}
#header h1 a{width:149px;height:95px}
#header .util{right:3.23%;top:70px;padding-right:213px}
#header .util ul{overflow:hidden;margin-bottom:38px}
#header .util li{float:left}
#header .util li a{width:41px;height:47px;margin-left:3px}
#header .util .btn_home a{background-position:-190px -1px}
#header .util .btn_fb a{background-position:-234px -1px}
#header .util .btn_tw a{background-position:-278px -1px}
#header .util .btn_game{position:absolute;top:10px;right:0;width:184px;height:30px;background-position:-184px -65px}
#header .util .btn_today{position:absolute;bottom:0;right:2px;width:150px;height:19px;background-position:-350px 0}
#header .util .copyright{position:absolute;top:-25px;right:-1px;width:319px;height:13px;background-position:-82px -159px}

/* title */
.title{position:absolute;z-index:1}
.title{top:50%;left:0;width:100%;height:169px;margin-top:-361px}
.title .h2_wrap{width:36.45%}

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

/* lnb */
#lnb{position:absolute;top:31.55%;left:19px;width:140px;z-index:100}
#lnb .nav li{width:13px;height:13px;margin:0 auto;padding-top:23px}
#lnb .nav li a{position:relative;display:block;width:100%;height:100%}
#lnb .nav li .dot{width:100%;height:100%;background-position:-344px -35px}
#lnb .nav li .text{position:absolute;top:50%;left:50%;width:122px;height:29px;filter:alpha(opacity=0);opacity:0;transform:scale(0.94);transition:all 600ms ease;margin:-15px 0 0 -61px}
#lnb .nav .nav1 .text{background-position:0 -293px}
#lnb .nav .nav2 .text{background-position:0 -329px}
#lnb .nav .nav3 .text{background-position:0 -364px}
#lnb .nav .nav4 .text{background-position:0 -400px}
#lnb .nav .nav5 .text{background-position:0 -435px}
#lnb .nav .nav6 .text{background-position:0 -471px}
#lnb .nav .nav7 .text{background-position:0 -507px}
#lnb .nav .nav8 .text{background-position:0 -542px}
#lnb .nav .nav9 .text{background-position:0 -578px}
#lnb .nav .nav10 .text{background-position:0 -613px}
#lnb .nav .nav11 .text{background-position:0 -649px}
#lnb .nav li a:hover .dot{filter:alpha(opacity=0);opacity:0}
#lnb .nav li a:hover .text{filter:alpha(opacity=100);opacity:1;transform:scale(1)}
#lnb .nav .on .dot{background-position:-378px -35px}
#lnb .open_btn button{display:block;width:140px;height:46px}
#lnb .open_btn .btn_open1{background-position:0 -193px}
#lnb .open_btn .btn_open2{background-position:-150px -193px;margin-top:6px}

/*section */
.section_wrap{position:relative;width:100%;min-height:760px}
.section_wrap .section{position:absolute;top:100%;left:0;width:100%;height:100%;overflow:hidden}
.section_wrap .section.on{top:0}
.section .bg_char{position:absolute;top:0;left:50%;min-width:1920px;width:100%;height:100%;background-size:100% auto !important;margin-left:-960px;transform:scale(3)}
.section_wrap .active .bg_char{transform:scale(1);transition:all 2s cubic-bezier(0, 0.5, 0, 1)}
.section_wrap .container{top:50%;height:100%;margin-top:-361px}
.section_wrap .on .container{z-index:1}
.section_wrap h3{position:absolute;width:0;overflow:hidden;max-width:1920px;top:50px;left:-26.64%;opacity:0;margin:-19.45% 0 0 -100px}
.section_wrap .active h3{opacity:1;width:153.12%;transition:opacity 600ms 600ms ease, width 700ms 600ms ease}
.section_wrap .char_info{position:absolute;top:0;left:0;width:100%;opacity:0;margin-top:48.63%}
.section_wrap .active .char_info{opacity:1;transition:opacity 600ms 600ms ease}
.section_wrap .detail_box{width:55.83%;max-width:700px;text-align:center;margin-left:-10.77%}
.section_wrap .detail_box a{position:relative;display:block;width:23.58%;max-width:165px;margin:0 auto}
.section_wrap .detail_box a .over{position:absolute;top:0;left:0;filter:alpha(opacity=0);opacity:0;transform:scale(1.05)}
.section_wrap .detail_box a:hover .off{filter:alpha(opacity=0);opacity:0}
.section_wrap .detail_box a:hover .over{filter:alpha(opacity=100);opacity:1;transform:scale(1);transition:all 600ms ease}
.section_wrap .spec_box{position:absolute;bottom:0;right:-18.82%;width:63.8%;max-width:800px}

/* char1 */
.char1{background:#0A31B9}
.char1 .bg_char{background:url("https://ssl.nexon.com/S2/Game/maplestory2/event/2018/0705_change/bg_char1.jpg") 100% 50% no-repeat}
.char1.active h3{transition:opacity 600ms 600ms ease, width 800ms 600ms ease}

/* char2 */
.char2{background:#830e04}
.char2 .bg_char{background:url("https://ssl.nexon.com/S2/Game/maplestory2/event/2018/0705_change/bg_char2.jpg") 100% 50% no-repeat}
.char2.active h3{transition:opacity 600ms 600ms ease, width 1000ms 600ms ease}

/* char3 */
.char3{background:#bb1f95}
.char3 .bg_char{background:url("https://ssl.nexon.com/S2/Game/maplestory2/event/2018/0705_change/bg_char3.jpg") 100% 50% no-repeat}
.char3.active h3{transition:opacity 600ms 600ms ease, width 900ms 600ms ease}

/* char4 */
.char4{background:#005cff}
.char4 .bg_char{background:url("https://ssl.nexon.com/S2/Game/maplestory2/event/2018/0705_change/bg_char4.jpg") 100% 50% no-repeat}
.char4.active h3{transition:opacity 600ms 600ms ease, width 1100ms 600ms ease}

/* char5 */
.char5{background:#00B200}
.char5 .bg_char{background:url("https://ssl.nexon.com/S2/Game/maplestory2/event/2018/0705_change/bg_char5.jpg") 100% 50% no-repeat}
.char5.active h3{transition:opacity 600ms 600ms ease, width 1000ms 600ms ease}

/* char6 */
.char6{background:#ff4e1f}
.char6 .bg_char{background:url("https://ssl.nexon.com/S2/Game/maplestory2/event/2018/0705_change/bg_char6.jpg") 100% 50% no-repeat}
.char6.active h3{transition:opacity 600ms 600ms ease, width 1000ms 600ms ease}

/* char7 */
.char7{background:#00728e}
.char7 .bg_char{background:url("https://ssl.nexon.com/S2/Game/maplestory2/event/2018/0705_change/bg_char7.jpg") 100% 50% no-repeat}
.char7.active h3{transition:opacity 600ms 600ms ease, width 1100ms 600ms ease}

/* char8 */
.char8{background:#42287E}
.char8 .bg_char{background:url("https://ssl.nexon.com/S2/Game/maplestory2/event/2018/0705_change/bg_char8.jpg") 100% 50% no-repeat}
.char8.active h3{transition:opacity 600ms 600ms ease, width 1000ms 600ms ease}

/* char9 */
.char9{background:#6a42d4}
.char9 .bg_char{background:url("https://ssl.nexon.com/S2/Game/maplestory2/event/2018/0705_change/bg_char9.jpg") 100% 50% no-repeat}
.char9.active h3{transition:opacity 600ms 600ms ease, width 1000ms 600ms ease}

/* char10 */
.char10{background:#33343a}
.char10 .bg_char{background:url("https://ssl.nexon.com/S2/Game/maplestory2/event/2018/0705_change/bg_char10.jpg") 100% 50% no-repeat}
.char10.active h3{transition:opacity 600ms 600ms ease, width 1000ms 600ms ease}

/* char11 */
.char11{background:#0084ff}
.char11 .bg_char{background:url("https://ssl.nexon.com/S2/Game/maplestory2/event/2018/0705_change/bg_char11.jpg") 100% 50% no-repeat}
.char11.active h3{transition:opacity 600ms 600ms ease, width 1100ms 600ms ease}

/* w1280*/
.w1280 .container{left:50%;width:1100px;margin-left:-550px}
.w1280 .title .h2_wrap{margin:0 auto}
.w1280 .section_wrap h3{left:4%}
.w1280 .char_info{margin-top:45%}
.w1280 .char_info .detail_box, .w1280 .char_info .spec_box{margin:0 auto}
.w1280 .char_info .detail_box a{margin-bottom:5.97%}
.w1280 .char_info .spec_box{position:static}

/* layerpop */
.layerpop{display:none;position:fixed;top:0;left:0;width:100%;height:100%}

/* pop video */
.pop_video{z-index:9999999;overflow-y:auto}
.pop_video .bg{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;min-height:100%}
.pop_video .pop_content{position:absolute;top:50%;left:50%;width:1100px;z-index:1;padding-bottom:49px;margin:-406px 0 0 -550px}
.pop_video .btn_close{position:absolute;top:86px;right:0;width:60px;height:60px;background-position:0 -112px}
.pop_video .h2_wrap{width:473px;margin:0 auto -24px}
.pop_video .video_wrap{position:relative;width:100%;height:619px;z-index:1}
.pop_video .video_wrap.no_support{background:url("https://ssl.nexon.com/S2/Game/maplestory2/event/2018/0705_change/ie.png") no-repeat}
.pop_video .video_wrap.no_support iframe{display:none} 
.pop_video .btn_week{position:absolute;bottom:0;right:0;width:157px;height:22px;background-position:-82px -112px}
.pop_video.scrollpop .pop_content{top:20px;margin-top:0;margin-bottom:20px}
.pop_video.scrollpop .bg{padding-bottom:40px}

/*pop img */
.pop_img{background:#000;z-index:99999999}
.pop_img .btn_close{position:absolute;top:0;right:3.125%;width:89px;height:89px;background-position:-411px -220px;margin-top:3.125%}
.pop_img .pop_content{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;cursor:move}
.pop_img .img_wrap{position:absolute;top:0;left:0;width:100%;height:100%}
.pop_img .img_wrap img{width:100%}