@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);
/*!
 * 클로저스 검은양팀 7지역 업데이트  Stylesheet
 * http://closers.nexon.com
 * Create: 16.08.01 Update: 16.08.04
 */

/* CSS Reset
-------------------------------------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, img, strong, small, dl, dt, dd, ol, ul, li, fieldset, form, input, button, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; font-size: 100%; }
img, fieldset, button { border: 0; }
article, aside, figcaption, figure, video, audio, footer, header, hgroup, menu, nav, section { display: block; }
body, input, button, textarea, select, table { line-height: 1.2; font-family: '나눔고딕', 'Nanum Gothic', 'Malgun Gothic', '맑은 고딕', '돋움', dotum, Helvetica, sans-serif; font-size: 14px; color: #555; }
ol, ul { list-style: none; }
a { text-decoration: none; color: #555; transition: color 0.3s ease; -moz-transition: color 0.3s ease; -o-transition: color 0.3s ease; -webkit-transition: color 0.3s ease; }
a:hover, a:focus, a:active { text-decoration: underline; color: #555; }
img { vertical-align: middle; }
button { overflow: visible !important; }
button, label { cursor: pointer; }
button::-moz-focus-inner, input::-moz-focus-inner {
padding:0;
border:0;
}
table { border-collapse: collapse; border-spacing: 0; }
caption, legend { width: 0; height: 0; font-size: 0; line-height: 0; text-indent: -9999px; visibility: hidden; }
/* topArea
-------------------------------------------------------------- */
#topArea { z-index: 200; position: fixed; left: 0; top: 0px; width: 100%; min-width: 1280px; height: 100px; background: url(https://landing.mangot5.com/template/closers/event/170616/images/bg_pattern_top.png) repeat-x; }
#topArea h1 { z-index: 100; position: relative; padding: 14px 0 0 10px; float: left; }
#topArea .slideArea { margin: 0 0 0 -438px; position: absolute; left: 50%; top: 0; width: 986px; height: 100px; }
#topArea .slideArea .mask { position: relative; left: 0; width: 100%; height: 100%; overflow: hidden; }
#topArea .evLink { z-index: 50; position: absolute; left: 0; top: 0; text-align: center; }
#topArea .evLink li { display: inline-block; zoom: 1; margin: 0 0px; }
#topArea .evLink li a { position: relative; display: block; width: 160px; height: 100px; opacity: .75; transition: all .3s ease; }
#topArea .evLink li a:hover { opacity: 1; }
#topArea .evLink li a img { height: 100%; }
#topArea .evLink li a .dim { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0.4; filter: alpha(opacity=40); }
#topArea .etcArea { z-index: 100; position: relative; padding: 5px 20px 0 0; float: right; width: 176px; }
#topArea .snsArea { /*padding-left: 5px;*/ }
#topArea .snsArea li { padding-left: 7px; float: right; }
#topArea .snsArea li a { display: block; height: 50px; background: url(https://landing.mangot5.com/template/closers/event/170616/images/spr_snsBtn.png) no-repeat; text-indent: -9999px; }
#topArea .snsArea li .index { width: 50px; background-position: -120px 0; }
#topArea .snsArea li .register { width: 50px; background-position: -63px 0; }
#topArea .snsArea li .home { width: 50px; background-position: -6px 0; }
#topArea .etcArea .btnDownload { padding: 0px 0 0 13px; }
#topArea .etcArea .btnDownload a { display: block; width: 164px; height: 42px; background: url(https://landing.mangot5.com/template/closers/event/170616/images/spr_snsBtn.png) no-repeat -6px -50px; text-indent: -9999px; }
ul.qlink { position: fixed; top: 50%; margin-top: -100px; left: 0; z-index: 9999; }
ul.qlink li { margin-bottom: 10px; }
ul.qlink li a { text-indent:-9999px; background-image:url(https://landing.mangot5.com/template/closers/event/170705/images/qlink.png); display: block; width: 219px; height: 48px; transition: all ease .3s; margin-left: -140px; background-repeat: no-repeat; }
ul.qlink li.ev1 a { background-position: left top; }
ul.qlink li.ev2 a { background-position: left bottom; }
ul.qlink li a:hover { margin-left: 0; }

/* Reserved Class
-------------------------------------------------------------- */
.blind { width: 1px; height: 1px; font-size: 0; line-height: 0; position: absolute; top: 0; left: -1000%; overflow: hidden; }
.show { display: block; }
.hide { display: none; }
.fL { float: left; }
.fR { float: right; }
.clearFix { zoom: 1; }
.clearFix:after { clear: both; display: block; content: ''; }
.btn { background: none; border: 0 none; outline: none; }
.sprSet { background: url(http://s.nx.com/s2/game/arpiel/event/2015/1112_gstar/spr_set.png); text-indent: -9999px; display: block; }
.fix { position: fixed !important; }
.player {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1070px;
    z-index: 0;
}
.playermask { opacity:.95; width:100%; height:950px; background-image:url(../images/mask.png); background-position:center center; background-size:contain; position:absolute; z-index:1; top:0; left:0;}
.copyright { height:100px; position:absolute; bottom:0; width:980px; left:50%; margin-left:-490px; opacity:.5;}

.sBubble {
    color: #eee;
    padding: 4px 5px;
    font-size: 15px;
	font-weight:bold;
    text-shadow: 0px 0px 0px #000;
    font-family: Helvetica,Arial,sans-serif,"微軟正黑體";
}
.sBubble, .sBubbleArw {
	line-height:30px;
	position:fixed;
	z-index:200;
}
.swiper-container { position:absolute; top:1900px; left:50%; width:1280px; height:950px; margin-left:-640px;z-index:-1; /*background-image: url(../images/swiper.jpg);*/}

.swiper-slide {
	text-align: center;
	font-size: 18px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 20px;
}
.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: #9b8e82;
	opacity:.35;
}
.swiper-pagination-bullet-active {
    opacity: 1;
}
.swiper-button-next, .swiper-button-prev {
    margin-top: 436px;
    width: 18px;
    height: 20px;
    -moz-background-size: 18px 20px;
    -webkit-background-size: 18px 20px;
    background-size: 18px 20px;
	opacity:.35;
}
.swiper-button-next:hover, .swiper-button-prev:hover {
	opacity:1;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    background-image: url(../images/swiper-button-next.png);
    right: 516px;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    background-image: url(../images/swiper-button-prev.png);
    left: 516px;
}
/* Styles
-------------------------------------------------------------- */
body, html { width: 100%; height: 100%; background: #fff; }
#wrap .btn { cursor: default; }
/* 공통 */
#wrap { position: relative; width: 100%; min-width: 1280px; background-image:url(../images/bg.jpg); background-position: center 964px; background-color:#100505; background-repeat:no-repeat; }
#wrap>.innerWrap { z-index: 180; position: relative; margin: 0 auto;  height: 5464px; /*width: 1280px; background: url(../images/bg.jpg) no-repeat center 0;*/ }
.light { position: absolute; left: 0; top: 0; opacity: 0; filter: alpha(opacity=0); width: 1280px; height: 913px; background: url(../images/bg_light.jpg) no-repeat; text-indent: -9999px; }
.common { position: relative; height: 964px; overflow:hidden; }
.common .wordArea { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.common .wordArea .title { z-index: 50; position: absolute; top: 120px; left: 50%; margin-left:-360px; }
.common .btn_play { width:81px; height:81px; z-index: 50; position: absolute; top: 620px; left: 50%; margin-left:-40px; cursor:pointer; background-position:top center; background: url(../images/btn_play.png) no-repeat; }
.evTab { z-index: 150; position: absolute; top: 812px; left: 0; width: 100%; height:137px; padding-top: 15px; background-position:top center; background: url(../images/evTab.png) no-repeat; }
.evTab ul { width:1050px; margin:0 auto;}
.evTab li { float: left; }
.evTab li a { display: block; text-indent: -9999px; height: 93px; width:355px; background: url(../images/spr_tab2.png) no-repeat; }
.evTab li.tab0 a { background-position: 0 0; }
.evTab li.tab1 a { width: 340px; background-position-x: -355px; }
.evTab li.tab2 a { background-position-x: -695px; }
.evTab li.on a, .evTab li a:hover { background-position-y: -93px; }

.char { z-index: 170; position: absolute; top: 327px; left: -87px; }
.section { z-index: 100; width: 1280px; margin:0 auto; }
.section .char { position: absolute; top: 1666px; left: -140px; }
#sec0 { position: relative; height: 4500px; background: url(../images/bg_sec1.jpg) no-repeat; }
#sec0 .char.type1_1 { top: 880px; left: -160px; }
#sec0 .char.type1_2 { top: 2380px; left: -90px; }
#sec0 .char.type1_3 { top: 3580px; left: 970px; }
#sec1 { position: relative; height: 3040px; /*width: 100%;*/ background: url(../images/bg_sec2.jpg) no-repeat; }
#sec1 .char.type2_1 { top: 90px; left: 750px; }
#sec1 .char.type2_2 { top: 2380px; left: auto; right: -110px; }
#sec1 .btn.get { position: absolute; top: 1422px; left: 506px; }
#sec1 .btn.get button { display: block; text-indent: -9999px; width: 268px; height: 71px; }
#sec1 .btn.detail { position: absolute; top: 2188px; left: 765px; }
#sec1 .btn.detail a { display: block; text-indent: -9999px; width: 83px; height: 27px; background: none; }
#sec2 { position: relative; height: 3042px;  background: url(../images/bg_sec3.jpg) no-repeat; }
#sec2 .char.type3_1 { top: 2070px; left: -100px; }
#sec2 .char.type3_2 { top: 2070px; left: 900px; }
.quick { z-index: 200; position: absolute; right: 160px; top: 315px; width: 89px; }
.quick .btn.play { padding: 6px 0 0 0; }
.quick .btn.play button { display: block; text-indent: -9999px; height: 74px; width: 100%; }
.quick a { display: block; height: 100%; text-indent: -9999px; }
#quick0 { height: 346px; background: url(../images/bg_quick1.png) no-repeat; }
#quick0 .q0 { height: 79px; }
#quick0 .q1 { height: 71px; }
#quick0 .q2 { height: 71px; }
#quick0 .q3 { height: 71px; }
#quick0 .qLast { height: 54px; }
#quick1 { height: 280px; background: url(../images/bg_quick2.png) no-repeat; }
#quick1 .q0 { height: 79px; }
#quick1 .q1 { height: 71px; }
#quick1 .q2 { height: 71px; }
#quick1 .qLast { height: 54px; }
#quick2 { height: 280px; background: url(../images/bg_quick3.png) no-repeat; }
#quick2 .q0 { height: 79px; }
#quick2 .q1 { height: 71px; }
#quick2 .q2 { height: 71px; }
#quick2 .qLast { height: 54px; }



/* S : 댓글 */
.recommentArea { margin: 0 0 0 -462px; position: absolute; top: 3512px; left: 50%; width: 924px; }
.recommentArea .listLength { position: absolute; top: -24px; width: 100%; padding: 0 0 5px 0; color: #6f625e; text-align: right; font-size: 13px; }
.recommentArea .listLength span { color: #8e7f7b; }
.inputBox { margin-bottom: 11px; position: relative; width: 924px; height: 88px; background: #322421; border: 1px solid #412f2b; }
.recommentArea .char { position: absolute; left: 17px; top: 17px; width: 67px; height: 54px; background: url(../images/bx_char.png) no-repeat; }
.inputBox textarea { padding: 10px; float: left; margin: 17px 0 0 90px; width: 738px; height: 32px; background: #fff; border: 1px solid #e62828; resize: none; font-size: 13px; color: #919191; }
.inputBox .btn { float: left; margin-top: 17px; }
.inputBox .btn button { display: block; width: 56px; height: 54px; background: url(../images/btn_reg.jpg) no-repeat; text-indent: -9999px; }
.commentList { max-height: 870px; width: 924px; }
.commentList li { position: relative; min-height: 83px; border-bottom: 1px solid #2c2120; color: #776f6e; }
.commentList .noList { text-align: center; color: #b9d6ff; line-height: 80px; }
.commentList li .char { position: absolute; left: 17px; top: 15px; }
.commentList li .desc { padding: 5px 0; position: relative; margin: 0 0 0 100px; font-size: 13px; color: #776f6e; word-break: break-all; word-wrap: break-word; }
.commentList li .desc .standard { display: inline-block; width: 1px; height: 73px; vertical-align: middle; }
.commentList li .desc .group { display: inline-block; width: 666px; *display:inline;
zoom: 1; vertical-align: middle; }
.commentList li .desc .nick { padding-bottom: 8px; color: #875b51; }
.commentList li .desc .date { position: absolute; right: 18px; top: 20px; color: #875b51; }
.commentList .ico_del, .commentList .ico_new { margin-left: 5px; }
.paging { padding-top: 30px; text-align: center; }
.paging ul { display: inline-block; *display:inline;
zoom: 1; }
.paging li { float: left; }
.paging li strong { padding: 0 8px; color: #d53b17; display: inline-block; height: 18px; }
.paging li a { padding: 0 8px; display: inline-block; font-size: 14px; color: #7e5448; }
.paging li .first, .paging li .prev, .paging li .next, .paging li .last { margin-top: -1px; display: block; text-indent: -9999px; }
.paging li .first { width: 12px; height: 16px; background: url(../images/ico_fir.png) no-repeat center center; }
.paging li .prev { width: 5px; height: 16px; background: url(../images/ico_prev.png) no-repeat center center; }
.paging li .next { width: 5px; height: 16px; background: url(../images/ico_next.png) no-repeat center center; }
.paging li .last { width: 12px; height: 16px; background: url(../images/ico_last.png) no-repeat center center; }
/* E : 댓글 */

#footer { padding: 50px 0 100px 0; text-align: center; }
.nav { z-index: 500; position: absolute; right: 0; top: 214px; width: 125px; height: 539px; background: url(http://s.nx.com/s2/game/closers/2016/events/160728_tinaAgent/spr_nav.png) no-repeat; }
.nav li { position: relative; width: 125px; }
.nav li a { display: block; text-indent: -9999px; width: 125px; }
.nav .nav0 a { height: 89px; }
.nav .nav1 a { height: 91px; }
.nav .nav2 a { height: 90px; }
.nav .nav3 a { height: 91px; }
.nav .nav4 a { height: 91px; }
.nav .nav5 a { height: 91px; }
.overlay { z-index: 200; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0.5; filter: alpha(opacity = 50); display: none; }
.layerPop { z-index: 300; position: fixed; left: 50%; top: 50%; }
.layerPop .confirm { position: absolute; bottom: 19px; left: 223px; }
.layerPop .close { position: absolute; right: 0px; top: 0; }
.layerPop .close button { display: block; text-indent: -9999px; width: 40px; height: 40px; }
.layerPop .confirm button { display: block; text-indent: -9999px; width: 128px; height: 40px; }
.customSelect { position: absolute; left: 155px; top: 186px; width: 263px; height: 37px; }
.customSelect .txt { padding-bottom: 0; width: 100%; height: 100%; line-height: 35px; background: none; text-indent: 10px; position: absolute; left: 0; top: 0; _display: none; color: #070707; font-size: 13px; text-align: left; }
.customSelect select { width: 100%; height: 100%; cursor: pointer; position: relative; opacity: 0; filter: alpha(opacity=0); }
#showMovie1 { z-index: 20000000; margin: -312px 0 0 -550px; width: 1090px; height: 614px; border: 1px solid #ff1313; background: #000; }
#showMovie1 .close { position: absolute; right: -1px; top: -50px; }
#showMovie1 .close button { display: block; text-indent: -9999px; width: 49px; height: 49px; background: url(../images/btn_close_movie.jpg) no-repeat; }
#showMovie1 .nowCheck { padding: 20px 0 0 0; }
#showMovie1 .nowCheck label { display: block; width: 125px; height: 17px; background: url(http://s.nx.com/s2/game/closers/2016/events/160623_teaser3/img_nowCheck.png) no-repeat; text-indent: -9999px; }
#showMovie1 .nowCheck label.on { background-position: 0 -17px; }
#popDrawing { position: absolute; top: 300px; left: 50%; margin: 0 0 0 -275px; width: 550px; height: 825px; background: url(http://s.nx.com/s2/game/closers/2016/events/160714_teaser3_0958632155/img_popChar8524630199.jpg) no-repeat; }
#popDrawing .down { position: absolute; left: 196px; bottom: -64px; }
#popDrawing .down a { display: block; text-indent: -9999px; background: none; width: 160px; height: 50px; background: url(http://s.nx.com/s2/game/closers/2016/events/160714_teaser3_0958632155/btn_down.jpg) no-repeat; }
#popDrawing .close { right: -45px; top: 0; }
#choiceChar { margin: -249px 0 0 -255px; width: 510px; height: 498px; background: url(../images/pop_choiceChar.jpg) no-repeat; }
#choiceChar .close { position: absolute; top: -43px; width: 41px; height: 41px; background: url(../images/btn_close.png) no-repeat; }
#choiceChar .close button { display: block; text-indent: -9999px; width: 41px; height: 41px; }
#choiceChar .confirm { bottom: 24px; left: 185px; }
#choiceChar .confirm button { width: 140px; height: 40px; }
#popDetail1 { margin: -138px 0 0 -177px; width: 354px; height: 276px; background: url(../images/bg_popDetail.png) no-repeat; }
.customSelect { position: absolute; left: 54px; top: 124px; width: 404px; height: 30px; }
.customSelect .txt { padding-bottom: 0; width: 100%; height: 100%; line-height: 30px; background: none; text-indent: 10px; position: absolute; left: 0; top: 0; _display: none; color: #070707; font-size: 13px; text-align: left; }
.customSelect select { width: 100%; height: 100%; cursor: pointer; position: relative; opacity: 0; filter: alpha(opacity=0); }
/*#popCharList .btn {position: absolute; right: 0; top: 18px; }
#popCharList .btn {}*/

#PS_Dimmed { position: fixed !important; }
iframe[name='google_conversion_frame'] { width: 1px; height: 1px; font-size: 0; line-height: 0; position: absolute; top: 0; left: -1000%; overflow: hidden; }