@charset "utf-8";

/* --------------------------------------------
 * default
/* ------------------------------------------ */
html,body{width:100%;height:100%;}
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video {margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;}
body {font-family:'Malgun Gothic', '맑은 고딕', '돋움', 'Dotum', Apple Gothic, Tahoma, Verdana, sans-serif;font-size:12px;color:#333;line-height:1.25;}

/* --------------------------------------------
 * html5 block
 ------------------------------------------ */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {display:block;}


/* --------------------------------------------
	link#wrap .evt2 .use-entry .use-select .btn-select
/* ------------------------------------------ */
a {color:#333;text-decoration:none;}


/* --------------------------------------------
	list
/* ------------------------------------------ */
ul, ol{list-style:none;}


/* --------------------------------------------
 * etc
/* ------------------------------------------ */
address,em {font-style:normal;}
hr {display:none;}
sup {position:relative;top:-3px;padding-left:3px;font-size:11px;}


/* --------------------------------------------
 * img
/* ------------------------------------------ */
img {vertical-align:top;}


/* --------------------------------------------
 * table
/* ------------------------------------------ */
table {width:100%;border-collapse:collapse;border-spacing:0;}
tbody, tfoot, thead, tr, th, td {word-break:break-all;}
caption {display:none;}


/* --------------------------------------------
 * fieldset
/* ------------------------------------------ */
fieldset {border:none;}
legend {visibility:hidden;width:0;height:0;font-size:0;line-height:0;position:absolute;left:0;top:-999999px;}


/* --------------------------------------------
 * form
/* ------------------------------------------ */
/*input[type=text]::-ms-clear{display:none;width:0;height:0;}*/
input[type=button],
input[type=submit] {cursor:pointer;}
input[type="radio"],
input[type="checkbox"] {width:13px;height:13px;margin:-2px 0 0;}
button {width:auto;overflow:visible;background:none;border:none;cursor:pointer;margin:0;padding:0;}
button > span{position:relative;}
textarea {resize:none;padding:10px;border:1px solid #999;color:#333;}
select {height:26px;font:12px '돋움', 'Dotum', Apple Gothic, Tahoma, Verdana, sans-serif;color:#333;padding:1px;box-sizing:border-box;-webkit-box-sizing:border-box;-ms-box-sizing:border-box;}
input,button,select,textarea {color:#333;font:12px '돋움', 'Dotum', Apple Gothic, Tahoma, Verdana, sans-serif;vertical-align:middle;}
input.intx1 {padding:5px 10px;height:26px;border:1px solid #999;color:#333;box-sizing:border-box;-webkit-box-sizing:border-box;-ms-box-sizing:border-box;}


/* --------------------------------------------
/* input - placeholder
/* ------------------------------------------ */
::-webkit-input-placeholder{color:#000;}
::-moz-placeholder{color:#000;}
:-ms-input-placeholder{color:#000;}
:-moz-placeholder{color:#000;}
.placeholder{color:#000;}

[placeholder]:focus::-webkit-input-placeholder{color:transparent;}
[placeholder]:focus::-moz-placeholder{color:transparent;}
[placeholder]:focus:-moz-placeholder{color:transparent;}
[placeholder]:focus:-ms-input-placeholder {color:transparent;}



/* common */
#skipNavi {z-index:99999;position:absolute;width:100%;height:0px;left:0px;top:-40px;}
#skipNavi a:active, #skipNavi a:focus {z-index:99999;position:absolute;width:100%;height:30px;left:0px;top:40px;padding-top:10px;font-size:16px;text-align:center;border-bottom:1px solid #333;background:#fff;}
.blind{display:block;overflow:hidden;position:absolute;left:-1000%;top:0;width:0;height:0;font-size:0;line-height:0;text-indent:-10000px;}
.al {text-align:left !important;}
.ac {text-align:center !important;}
.ar {text-align:right !important;}
.hide{display:none;}
.btn-area{padding:26px 0 0 0;text-align:center;}
.ir{display:block;overflow:hidden;text-indent:-9999px;}

html,body{height:100%;background-color:#000;}
#bgVideo{position:absolute;top:0;left:-50%;width:200%; height:100%; overflow: hidden;background:url(https://ssl.nexon.com/s2/game/Baram/2017/event/0713/event1/bg_gate_wrap.jpg) no-repeat 50% 50%;}
#bgVideo video{position: absolute;top: 0;right: 0;left: 0;margin: auto;min-width: 50%;}
.video-cover{z-index:2;position:fixed;top:0;left:0; min-width: 100%; min-height: 100%; width: auto; height: auto;overflow:hidden;background:url(https://ssl.nexon.com/s2/game/Baram/2017/event/0713/event1/img_video_event_cover.png) no-repeat 50% 0/cover;}
#wrap{overflow-x:hidden;display:none;position:relative;width:100%;height:100%;min-width:1280px;max-width:1920px;margin:0 auto;}
#wrap:after{display:block;clear:both;content:'';}
#header{z-index:10;top:0;left:0;position:absolute;width:100%;height:122px;}
.layerOpen #header{z-index:-1;}
#header:after{display:block;content:'';clear:both;}
#header .logo{float:left;margin:49px 0 0 80px;}
#header .utill{float:right;overflow:hidden;margin:35px 39px 0 0;}
#header .utill a, #header .utill button{float:left;}
#header .utill .btn-home{margin:0 16px 0 0;}
#footer{z-index:10;position:absolute;left:0;bottom:0;width:100%;height:107px;text-align:center;}
#footer:after{display:block;content:'';clear:both;}
#footer p{float:right;padding:68px 43px 0 0;}

#contianer{z-index:3;position:relative;overflow:hidden;height:100%;}
#contianer:after{display:block;content:'';content:'';}
#contianer .head{position:absolute;top:0;left:50%;width:302px;height:100%;margin:0 0 0 -151px;background:url(https://ssl.nexon.com/s2/game/Baram/2017/event/0713/event1/bg_title_gate.png) no-repeat 50% 0;}
#contianer .head h2{z-index:11;position: relative;margin: -295px 0 0 -70px;top: 50%;}
#contianer .head .btn-video{z-index:12;display: block;overflow: hidden;position: absolute;top: 50%;left: 80px;width: 67px;height: 16px;margin: 90px 0 0 30px;text-indent: -9999px;background: url(https://ssl.nexon.com/s2/game/Baram/2017/event/0713/event1/btn_gate_video.png) no-repeat 0 0;}
#contianer .head .btn-video:hover{background-position:0 -34px}
#contianer .head .btn-layer-close {z-index:12;display:none;position: absolute;left: 50%;top: 62px;overflow: hidden;width: 55px;height: 51px;margin: 0 0 0 -52px;text-indent: -9999px;background: url(https://ssl.nexon.com/s2/game/Baram/2017/event/0713/event1/btn_layer_close.png) no-repeat 0 0;}
#contianer .gate-wrap{overflow:hidden;height:100%;}
#contianer .gate-wrap:after{display:block;content:'';content:'';}
#contianer .gate-wrap .inner{position:relative;top:50%;margin:-132px 0 0 0;text-align:center;}
#contianer .gate-wrap .inner > h3{display:inline-block;overflow:hidden;text-indent:-9999px;}
#contianer .gate-wrap .btn-site-link{position:absolute;top:0;left:50%;display:inline-block;height:14px;line-height:12px;margin:0 0 0 -54px;padding:228px 0 0 19px;color:#fff;background:url(https://ssl.nexon.com/s2/game/Baram/2017/event/0713/event1/ico_menu.png) no-repeat 0 100%;}
#contianer .gate-wrap .over-line,
#contianer .gate-wrap .over-line2{position:absolute;top:50%;margin:27px 0 0 0;height:1px;}
#contianer .gate-wrap .update-area{position:relative;float:left;width:50%;height:100%;}
#contianer .gate-wrap .update-area .inner{margin-right:202px;}
#contianer .gate-wrap .update-area .inner > h3{width:161px;height:194px;margin:0 0 0 16px;background:url(https://ssl.nexon.com/s2/game/Baram/2017/event/0713/event1/stit_gate_update.png) no-repeat 0 0;}
#contianer .gate-wrap .update-area .over-line{right:0;width:100%;background:url(https://ssl.nexon.com/s2/game/Baram/2017/event/0713/event1/bg_over_line.png) no-repeat 50% 0;}
#contianer .gate-wrap .update-area .over-line2{right:0;width:100%;}
#contianer .gate-wrap .update-area.hover h3{background-position:0 -214px}
#contianer .gate-wrap .update-area.hover .over-line2{background:url(https://ssl.nexon.com/s2/game/Baram/2017/event/0713/event1/bg_over_line01.png) no-repeat 50% 0;}
#contianer .gate-wrap .event-area{position:relative;float:left;width:50%;height:100%;}
#contianer .gate-wrap .event-area .inner{margin-left:202px;}
#contianer .gate-wrap .event-area .inner > h3{width:138px;height:195px;margin:0 0 0 27px;background:url(https://ssl.nexon.com/s2/game/Baram/2017/event/0713/event1/stit_gate_event.png) no-repeat 0 0;}
#contianer .gate-wrap .event-area .btn-site-link{margin:0 0 0 -40px;}
#contianer .gate-wrap .event-area .over-line{left:0;width:100%;background:url(https://ssl.nexon.com/s2/game/Baram/2017/event/0713/event1/bg_over_line.png) no-repeat 50% 0;}
#contianer .gate-wrap .event-area .over-line2{left:0;width:100%;}
#contianer .gate-wrap .event-area.hover .over-line2{background:url(https://ssl.nexon.com/s2/game/Baram/2017/event/0713/event1/bg_over_line02.png) no-repeat 50% 0;}
#contianer .gate-wrap .event-area.hover h3{background-position:0 -214px}
#contianer .gate-wrap .menu-layer{position:absolute;top:0;left:0;display:none;width:100%;height:100%;text-align:center;background-color:#000;}
#contianer .gate-wrap .menu-layer h3{margin:0 0 47px 0;clear:both;}
#contianer .gate-wrap .menu-layer .ud{z-index:13;position:relative;top:50%;overflow:hidden;width:557px;margin:-192px 0 0 69px;}
#contianer .gate-wrap .menu-layer .ud h4{padding:0 0 8px 0;border-bottom:1px solid #333;}
#contianer .gate-wrap .menu-layer .ud .list{float:left;width:33.33333%;padding:7px 0 0 0;}
#contianer .gate-wrap .menu-layer .ud .list li{margin:12px 0 0 0;}
#contianer .gate-wrap .menu-layer .ud .list li a{display:block;overflow:hidden;height:17px;}
#contianer .gate-wrap .menu-layer .ud .list li a:hover img{margin:-37px 0 0 0;}
#contianer .gate-wrap .menu-layer .ev{z-index:13;position:relative;top:50%;overflow:hidden;float:right;width:450px;margin:-192px 69px 0 0;}
#contianer .gate-wrap .menu-layer .ev .full{float:left;text-align:left;}
#contianer .gate-wrap .menu-layer .ev .evp{float:left;margin:0 0 0 65px;text-align:left;}
#contianer .gate-wrap .menu-layer .ev li{margin:18px 0 0 0;}
#contianer .gate-wrap .menu-layer .ev li:first-child{margin:0;}
#contianer .gate-wrap .menu-layer .ev li a{display:inline-block;overflow:hidden;height:17px;font-size:0;line-height:0;vertical-align:middle}
#contianer .gate-wrap .menu-layer .ev li.blank a{padding-right:22px;background:url(https://ssl.nexon.com/s2/game/Baram/2017/event/0713/event1/ico_new_window02.png) no-repeat 100% 50%;}
#contianer .gate-wrap .menu-layer .ev li a:hover img{margin:-37px 0 0 0;}

.layerOpen #contianer .head .btn-layer-close{display:block;}

/* modal popup */
.modal-popup{display:none;z-index:99999999;position:fixed;top:0;left:50%;width:100%;min-width:1280px;width:100%;height:100%;min-height:768px;margin:0 0 0 -50%}
.modal-popup .modal-wrap{z-index:99999990;position:relative;}
.modal-popup .modal-wrap .inner-cont{position: relative;}
.modal-popup .modal-wrap .btn-layer{background-color:#313131;color:#fff;}
.modal-popup .btn-close{z-index:99999999999;position:absolute;right:38px;top:37px;overflow:hidden;display:block;width:55px;height:51px;text-indent:-9999px;background:url(https://ssl.nexon.com/s2/game/Baram/2017/event/0713/event1/btn_layer_close04.png) no-repeat 0 0;}
#videoModal .video-wrap{position:relative;}
#videoModal .t-view{position: absolute; right: 114px; top: -13px; height: 20px; line-height: 18px; padding: 0 0 0 31px; font-size: 13px; color: #fff; background: url(https://ssl.nexon.com/s2/game/Baram/2017/event/0713/event1/btn_today_view.png) no-repeat 0 0;}
#videoModal .video-wrap .img{overflow:hidden;overflow-y:auto;width:1280px;height:720px;margin:0 auto;background:#000;}
#videoModal .video-wrap .video{overflow:hidden;width:1280px;height:720px;margin:0 auto;background:#000;}
#videoModal .video-wrap .video iframe{border:1px solid #000;background:#000;}
#videoModal .video-wrap button{z-index:20;overflow:hidden;position:absolute;top:50%;width:139px;height:94px;margin:-13px 0 0 0;text-indent:-9999px;}
#videoModal .video-wrap .prev{display:none;left:60px;background:url(https://ssl.nexon.com/s2/game/Baram/2017/event/0713/event1/btn_layer_prev.png) no-repeat 0 0;}
#videoModal .video-wrap .next{right:60px;background:url(https://ssl.nexon.com/s2/game/Baram/2017/event/0713/event1/btn_layer_next.png) no-repeat 0 0;}
#videoModal .video-wrap .prev:hover{background-position:0 -111px}
#videoModal .video-wrap .next:hover{background-position:0 -110px}
#videoModal h2{margin:64px 0 30px 0;text-align:center;}


#imgModal .modal-wrap .inner-cont{width:870px;margin:0 auto;padding: 200px 0 0 0;}
#imgModal h2{position:relative;z-index:2;}
#imgModal .t-view{position: absolute;right: 114px;top: 51px;height: 20px;line-height: 18px;padding: 0 0 0 31px;font-size: 13px;color: #fff;background: url(https://ssl.nexon.com/s2/game/Baram/2017/event/0713/event1/btn_today_view.png) no-repeat 0 0;}
#imgModal .img-wrap{position:relative;}
#imgModal .img-wrap .img{margin:0 0 0 -77px;text-align:center;}
#imgModal .img-wrap button{z-index:20;overflow:hidden;position:absolute;top:50%;width:139px;height:94px;margin:-13px 0 0 0;text-indent:-9999px;}
#imgModal .img-wrap .prev{display:none;left:60px;background:url(https://ssl.nexon.com/s2/game/Baram/2017/event/0713/event1/btn_layer_prev.png) no-repeat 0 0;}
#imgModal .img-wrap .next{right:60px;background:url(https://ssl.nexon.com/s2/game/Baram/2017/event/0713/event1/btn_layer_next.png) no-repeat 0 0;}
#imgModal .img-wrap .prev:hover{background-position:0 -111px}
#imgModal .img-wrap .next:hover{background-position:0 -110px}
#imgModal h2{position: absolute;left: 50%;margin: 0 0 0 -500px;top: 110px;}







#player{background-color:#000 !important;}
.dim{display:none;z-index:99999998;position:fixed;top:0;left:0;width:100%;height:100%;background:url(https://ssl.nexon.com/s2/game/Baram/2017/event/0629/bg_dim.png) repeat-x 0 0;}