@charset "utf-8";
/* reset */
body,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,p {margin:0;padding:0;}
body,h1,h2,h3,h4,h5,h6,input,textarea,select,button {color:#000;font-size:14px;line-height:1.2;font-family: Malgun Gothic, '맑은 고딕', Arial, '돋움', Dotum, AppleGothic, sans-serif;font-weight:400;}
body  {word-break:break-all;word-wrap:break-word;}
*:first-child+html body {word-wrap:normal;}/* ie break-word bug(float box) */
table {border-collapse:collapse;border-spacing:0;}
ol,ul {list-style:none;}
img,fieldset {border:0 none;}
img,input,select {vertical-align:middle;}
input,select,textarea {color:#000;}
a:link,a:visited,a:hover,a:active {color:#000;text-decoration:none;} 
a:hover {text-decoration:none;}
h1 img,h2 img,h3 img,h4 img,h5 img,h6 img,div img,li img,dl img,p img {vertical-align:top;}
legend {display:block;position:absolute;left:-9999px;top:-9999px;width:0;height:0;overflow:hidden;font-size:0;line-height:0;}
caption {display:none;}
hr#null {display:block;} /* 에디터 선긋기 */
input.checkbox {vertical-align:middle;}
.button, label {cursor:pointer;font-weight:normal;}
textarea:focus {outline:none;background:none;background-color:#f0f0f0;}
textarea {resize:vertical;}
.hidden {display:block;position:absolute;left:-9999em;top:auto;overflow:hidden;width:1px;height:1px;}
.clear_both {clear:both !important;}
figcaption {color:#959595;font-size:13px;}
::-webkit-input-placeholder {color:#584333;}
::-moz-placeholder {color:#584333;}
:-ms-input-placeholder {color:#584333;}
input:-moz-placeholder {color:#584333;}
input.button {-webkit-appearance:none;}
button{-webkit-appearance:none;background-color:transparent;border:0;vertical-align:top;cursor:pointer;padding:0}
input.text {border-radius:0;-webkit-appearance:none;border:0;background-color:none;color:#fff;}
a {outline: none;}
/* html5 */
article, aside, details, figcaption, figure, footer, header,  menu, nav, section, summary {display:block;margin:0;padding:0;}
time {display:inline;}
html, body {height:100%;}

body {min-width:1280px;background-color:#1b0505;}
#wrapper{position:relative;width:100%;}

#header{position:absolute;width:100%;height:111px;left:0;top:0;right:0;min-width:1280px;z-index:2;background:url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_battlefield/bar_BG.png) center 0 no-repeat}
#header h1{position:absolute;left:53px;top:22px;width:106px;height:73px;background:url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_jumong/logo.png) no-repeat;}
#header h1 a{width:100%;height:100%;display:block;text-indent:-1000000px}
#header .btn_start{position:absolute;right:42px;top:34px;width:286px;height:43px;text-indent:-100000px;background:url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_jumong/util.png) -124px 0 no-repeat;}
#header .btn_start:hover{background-position:-124px -45px}
#header .btn_jump{position:absolute;right:0;top:134px;width:361px;height:143px;}
#header .btn_jump a{display:block;width:100%;height:100%;text-indent:-100000px;background:url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_battlefield/btn_jump.png) no-repeat;}
#header .btn_jump a:hover{background-position:0 -150px;height:200px}

#header .util{position:absolute;right:366px;top:37px;width:auto;height:38px;}
#header .util li{width:38px;height:100%;margin-left:10px;float:left}
#header .util li a,
#header .util li button{display:block;width:100%;height:100%;background:url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_jumong/util.png) no-repeat;text-indent:-100000px;}
#header .util li.btn_h a{background-position:0 -3px}
#header .util li.btn_c button{background-position:-48px -3px}
#header .util li.btn_h a:hover{background-position:0 -47px}
#header .util li.btn_c button:hover{background-position:-48px -47px}

#footer{position:absolute;bottom:39px;height:12px;width:100%;left:0;background:url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_jumong/copy.png) center 0 no-repeat;text-indent:-100000px;}
.btn_top{position:fixed;right:82px;bottom:122px;width:72px;height:72px;text-indent:-100000px;background:url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_jumong/btn_top.png) no-repeat;z-index:2;}
.btn_top:hover{background-position:0 -74px}

.ap{display:none;}
.sticky #header{position:fixed;}
#lnb{position:fixed;left:52px;width:220px;height:414px;top:50%;margin-top:-207px;z-index:2;}
#lnb li{position:relative;width:100%;height:69px}
#lnb li a{position:absolute;left:0;top:0;width:100%;height:100%;text-indent:-100000px;background:url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_battlefield/lnb_title.png) no-repeat;z-index:1}
#lnb li.m1 a{background-position:0 26px}
#lnb li.m2 a{background-position:0 -43px}
#lnb li.m3 a{background-position:0 -112px}
#lnb li.m4 a{background-position:0 -181px}
#lnb li.m5 a{background-position:0 -250px}
#lnb li.m6 a{background-position:0 -319px}
#lnb li.m1 a:hover,
#lnb li.m1.active a{background-position:-220px 26px}
#lnb li.m2 a:hover,
#lnb li.m2.active a{background-position:-220px -43px}
#lnb li.m3 a:hover,
#lnb li.m3.active a{background-position:-220px -112px}
#lnb li.m4 a:hover,
#lnb li.m4.active a{background-position:-220px -181px}
#lnb li.m5 a:hover,
#lnb li.m5.active a{background-position:-220px -250px}
#lnb li.m6 a:hover,
#lnb li.m6.active a{background-position:-220px -319px}

#lnb li span{position:absolute;left:-52px;top:0;width:0;height:77px;background:url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_battlefield/lnb_over.png) 0 bottom no-repeat;-webkit-transition: all .1s ease-out;transition: all .1s ease-out}
#lnb li:hover span,
#lnb li.active span{width:284px;}

.btn_banner{position:fixed;bottom:40px;left:52px;width:191px;height:auto;z-index:2;}
.btn_banner a{display:block;width:100%;height:100%;margin-bottom:5px}
.btn_banner a:hover{box-shadow:0px 0px 20px #1b0505;}

#container{position:relative;width: 100%;height:100%;background:url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_battlefield/bg_war1.jpg) center 0 no-repeat;}

#container .section{position:relative;width:100%;}
#container .inner{position:relative;width:1280px;height:100%;margin:0 auto}
#container .section#index{height:1106px;}
#container .section#con1{height:3348px;background:url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_battlefield/bg_war2.png) center 0 no-repeat;}
#container .section#con2{height:1728px;background:url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_battlefield/bg_war3.jpg) center 0 no-repeat;}
#container .section#con3{height:1348px;background:url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_battlefield/bg_war4.jpg) center 0 no-repeat;overflow:hidden;}
#container .section#index .inner{overflow:hidden;}
#container .section#con1 .inner{background:url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_battlefield/inner_war2.png) right 410px no-repeat;width:1324px}
#container .section#con2 .inner{background:url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_battlefield/inner_war3.png) center 516px no-repeat;}
#container .section#con3 .inner{background:url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_battlefield/inner_war4.png) 33px 120px no-repeat;}

#index h1{position:absolute;left:237px;top:190px;width:771px;height:301px;overflow:hidden;z-index:1}
#index h1 span{position:relative;display:block;width:100%;height:9933px;background: url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_battlefield/title.png) no-repeat;text-indent:-100000px}

#index .video{position:absolute;top:0;left:0;width:100%;height:1408px;background:url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_battlefield/bg_war1.jpg) center 0 no-repeat;overflow:hidden;}
#index .video video {position: absolute;left:50%;top:0;width:1920px;margin-left:-960px;height:100%}
#index .video .cover {position:relative;width:100%;height:100%;background-color:#1b0505}
.loaded #index .video .cover{opacity:0;transition-duration:3s;}
#index .top_dim{}

#index .indicator{position:absolute;width:1320px;height:100%;top:0;left:0;background:url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_battlefield/intro_indicator.png) no-repeat;opacity:0}
#index .indicator.show{opacity:1;transition-duration:1s;}
#index .indicator li{position:relative;float:left;width:180px;height:100%;margin-right:40px}
#index .indicator li span{position:absolute;width:0;height:100%;top:-50px;left:89px;background:url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_battlefield/line.png) no-repeat;-webkit-transition: all .3s ease-in-out;transition: all .3s ease-in-out}
#index .indicator li.m3 span,
#index .indicator li.m5 span{left:86px;}
#index .indicator li.m4 span{left:84px;}
#index .indicator li a{position:absolute;width:180px;height:180px;left:0;top:579px;text-indent:-100000px;z-index:1}
#index .indicator li a:hover + span{width:7px}
#index .circle{position:absolute;width:180px;height:180px;top:579px;overflow:hidden}
#index .circle span{position:relative;display:block;width:100%;height:2700px;background:url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_battlefield/circle.png) no-repeat;text-indent:-100000px}
#index .circle._1{left:0}
#index .circle._2{left:220px}
#index .circle._3{left:440px}
#index .circle._4{left:660px}
#index .circle._5{left:880px}
#index .circle._6{left:1100px}
.scroll_down{position:fixed;bottom:40px;left:50%;width:49px;height:27px;margin-left:-25px;background:url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_battlefield/scroll_down.png) no-repeat;text-indent:-100000px;z-index:2;animation:move_down 1.5s ease-in-out infinite;}
#con1 h2{position:absolute;width:616px;height:222px;left:386px;top:103px;text-indent:-100000px;background:url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_battlefield/title_01.png) no-repeat; }
#con1 .btn_update{position:absolute;right:134px;top:465px;width:211px;height:23px;}
#con1 .btn_update a{display:block;width:100%;height:100%;text-indent:-100000px;background:url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_battlefield/btn_update.png) no-repeat;}
#con1 .btn_update a:hover{background-position-y:-25px}
#con1 .btn_update._2{top:1683px;}

#con1 .tab_gif{position:absolute;left:770px;top:736px;width:420px;height:auto;}
#con1 .tab_gif li{width:140px;height:36px;margin-bottom:57px;float:left;}
#con1 .tab_gif li a{display:block;width:100%;height:100%;text-indent:-100000px;background:url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_battlefield/tab.png) no-repeat;}
#con1 .tab_gif li.btn_gif1 a{background-position:0 0}
#con1 .tab_gif li.btn_gif2 a{background-position:-140px 0}
#con1 .tab_gif li.btn_gif3 a{background-position:-280px 0}
#con1 .tab_gif li.btn_gif4 a{background-position:0 -91px}
#con1 .tab_gif li.btn_gif5 a{background-position:-140px -91px}
#con1 .tab_gif li.btn_gif6 a{background-position:-280px -91px}
#con1 .tab_gif li.btn_gif7 a{background-position:0 -189px}
#con1 .tab_gif li.btn_gif8 a{background-position:-140px -189px}
#con1 .tab_gif li.btn_gif9 a{background-position:-280px -189px}

#con1 .tab_gif li.btn_gif1 a:hover,
#con1 .tab_gif li.btn_gif1.active a{background-position:-500px 0}
#con1 .tab_gif li.btn_gif2 a:hover,
#con1 .tab_gif li.btn_gif2.active a{background-position:-640px 0}
#con1 .tab_gif li.btn_gif3 a:hover,
#con1 .tab_gif li.btn_gif3.active a{background-position:-780px 0}
#con1 .tab_gif li.btn_gif4 a:hover,
#con1 .tab_gif li.btn_gif4.active a{background-position:-500px -91px}
#con1 .tab_gif li.btn_gif5 a:hover,
#con1 .tab_gif li.btn_gif5.active a{background-position:-640px -91px}
#con1 .tab_gif li.btn_gif6 a:hover,
#con1 .tab_gif li.btn_gif6.active a{background-position:-780px -91px}
#con1 .tab_gif li.btn_gif7 a:hover,
#con1 .tab_gif li.btn_gif7.active a{background-position:-500px -189px}
#con1 .tab_gif li.btn_gif8 a:hover,
#con1 .tab_gif li.btn_gif8.active a{background-position:-640px -189px}
#con1 .tab_gif li.btn_gif9 a:hover,
#con1 .tab_gif li.btn_gif9.active a{background-position:-780px -189px}

#con1 .btn_sr{position:absolute;width:225px;height:225px;left:325px;top:1185px;}
#con1 .btn_sr a{display:block;width:100%;height:100%;text-indent:-100000px}

#con1 .gif{position:absolute;left:162px;top:645px;width:550px;height:333px;}
#con1 .gif span{position:absolute;width:558px;height:343px;left:-4px;top:-5px;background:url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_battlefield/gif_frame.png) no-repeat;}


#con1 .gif2{position:absolute;left:162px;top:1845px;width:634px;height:346px;}
#con1 .gif2 span{position:absolute;width:644px;height:356px;left:-5px;top:-5px;background:url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_battlefield/war1_frame.png) no-repeat;}
#con1 .gif2._2 span{background:url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_battlefield/war2_frame.png) no-repeat;}
#con1 .gif2._3 span{background:url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_battlefield/war3_frame.png) no-repeat;}
#con1 .gif2._2{top:2321px}
#con1 .gif2._3{top:2803px}


#con2 h2{position:absolute;width:649px;height:329px;left:270px;top:160px;background:url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_battlefield/title_02.png) no-repeat}
#con2 .btn_view{position:absolute;bottom:158px;left:0;width:100%;height:54px;text-align:center}
#con2 .btn_view a{width:311px;height:100%;text-indent:-100000px;display:inline-block;background:url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_battlefield/btn_view.png) no-repeat}
#con2 .btn_view a:hover{box-shadow:0px 0px 20px #1b0505;}

.jumping1 {position:absolute;right:0;top:64px;width:570px;height:184px;background:url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_battlefield/jumping1.png) no-repeat;z-index:1;
          animation: jump1 1s ease-in-out infinite;}
.jumping2 {position:absolute;bottom:0;left:100px;width:534px;height:224px;background:url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_battlefield/jumping2.png) 0 100% no-repeat;
          animation: jump2 1s ease-in-out infinite;transform-origin:bottom; }

@keyframes jump1{
  40% {transform: rotate(-1deg) translateY(-8px);}
  50% {transform: rotate(1deg) translateY(-4px);}
  70% {transform: rotate(0) translateY(0);}
}
@keyframes jump2{
  10% {transform:rotateX(-45deg)}
  25% {transform:rotateX(0)}
}
@keyframes flicker {
  0% {
    transform: skewX(5deg);
  }
  25% {
    transform: skewX(-5deg);
  }
  50% {
    transform: skewX(10deg);
  }
  75% {
    transform: skewX(-10deg);
  }
  100% {
    transform: skewX(5deg);
  }
}
@keyframes move_down {
  0%   { transform:translate(0,-10px); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,10px); opacity: 0; }
}
#con3 .btn_help{position:absolute;bottom:113px;left:686px;width:57px;height:18px;}
#con3 .btn_help a{display:block;width:100%;height:100%;text-indent:-100000px}
#con3 .bg{position:absolute;bottom:0;left:0;width:100%;height:957px;background:url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_battlefield/bg_war4.png) center bottom no-repeat;animation: flicker 3s ease-in-out alternate infinite;}
#con3 .bg2{position:absolute;bottom:0;left:0;width:110%;height:420px;background-color:#1b0505}

/* 영상 팝업*/
#dim{position:fixed;left:0;top:0;height:100%;width:100%;background:#000;z-index:102;display:none;opacity:0.85;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";}
#layer_vod{position:fixed;width:853px;top:50%;left:50%;margin:-400px 0 0 -430px;z-index:103;height:738px;display:none;-webkit-transition: all .5s ease-out;transition: all .5s ease-out;background:url(https://ssl.nexon.com/s2/game/baram/2018/event/1220_battlefield/layer_title.png) center 0 no-repeat}
#layer_vod #video{position:absolute;width:100%;height:480px;bottom:45px;left:0;background-color:#000;}
.ie9 #layer_vod{background:url(https://ssl.nexon.com/s2/game/baram/2018/event/0628_2run2run/movie_alert.jpg) center 0 no-repeat;}
#layer_vod .v_close{position:absolute;bottom:477px;right:-53px;}
#layer_vod .v_today{position:absolute;bottom:0;left:332px;}

.naver #layer_vod{position:absolute;top:0;margin-top:20px}
.naver .scroll_down{position:absolute;top:850px;bottom:auto}
.naver .ap{display:block !important;}