@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; }
/* 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: 950px; z-index: 0; }
.playermask { opacity: .95; width: 100%; height: 950px; background-image: url(../images/mask.png); background-position: center top; position: absolute; z-index: 1; top: 0; left: 0; }
.copyright { height: 100px; width: 980px; opacity: .5; margin: 0 auto; }
.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: #000; 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: 950px; overflow: hidden; }
.common .wordArea { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.common .wordArea .title { z-index: 50; position: absolute; top: 50%; left: 50%; margin-top: -30px; margin-left: -420px; }
.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; overflow:hidden; }
.btn_play { z-index: 50; position: absolute; top: 50%; left: 50%; margin-top: 175px; margin-left: -136px; cursor: pointer; }
.btn_play:hover { animation: pulse 1s infinite; }
.btn_play2 { top: 269px; left: 532px; }
.btn_img_char1 { width: 240px; height: 120px; z-index: 50; position: absolute; top: 743px; left: 1244px; cursor: pointer; }
.btn_img_char2 { width: 240px; height: 120px; z-index: 50; position: absolute; top: 720px; left: 640px; cursor: pointer; }
.panel { height: 950px; position: relative; }
.panel_1 { background: url(../images/panel_1.jpg) no-repeat; }
.panel_2 { background: url(../images/panel_2.jpg) no-repeat; }
.panel_3 { background: url(../images/panel_3.jpg) no-repeat; }
.panel_2 .btn_play { background: url(../images/btn_play2.png) no-repeat; }
.btn_play3 { top: 160px; left: 1252px; }
.btn_play4 { top: 264px; left: 1075px; }
#sec1 { position: relative; height: 3550px; /*width: 100%;*/ background: url(../images/bg_sec2.jpg) no-repeat center top; }
#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: 30px; top: 400px; width: 100px; height: 205px; background: url(../images/bg_quick1.png) no-repeat -100px top;  }
.quick li { margin-bottom:8px;}
.quick li.q3,.quick li.qLast { margin-bottom:0px;}
.quick li a { display:block; height:40px;}
.quick li.qLast a { height:20px;}

ul.qlink { position: fixed; top: 50%; margin-top: -150px; left: 0; z-index: 199; }
ul.qlink li { margin-bottom: 10px; }
ul.qlink li a { text-indent:-9999px; background-image:url(https://landing.mangot5.com/template/closers/event/170719/images/qlink.png); display: block; width: 120px; height: 90px; /*transition: all ease .3s; margin-left: -140px;*/ background-repeat: no-repeat; }
ul.qlink li.ev1 a { background-position: 0 0; }
ul.qlink li.ev2 a { background-position: 0 -90px; }
ul.qlink li a:hover { margin-left: 0; }
@keyframes pulse { 0% {
 transform: scale(1);
 opacity: 1;
}
 50% {
 transform: scale(1.2);
 opacity: .55;
}
 100% {
 transform: scale(1);
 opacity: 1;
}
}
@keyframes pulse2 { 0% {
 transform: scale(1);
 opacity: 1;
}
 100% {
 transform: scale(1.5);
 opacity: 0;
}
}


.role { position:absolute; top:50%; left:50%; margin-top:-485px; margin-left:-140px; opacity:0; /*margin-top:-474px; margin-left:-200px;*/ z-index:2;}
.mv { position:absolute; top:50%; left:50%; margin-top:-60px; margin-left:-341px; z-index:1; width:445px; height:auto; opacity:.35;}
.play_wrap { width:94px; height:92px; background-image:url(../images/play.png); background-position:center center; background-repeat:no-repeat; position:absolute; top:50%; left:50%; margin-top:20px; margin-left:-165px; z-index:3; cursor:pointer;}
.play:hover { animation: pulse2 2s infinite; }
.guide { display:none;}
.guide_01 { display: block;}

#btnNav { width: 201px; height: 522px; position: absolute; margin-left: -557px; top: 393px; left: 50%; right: 0; z-index: 8 }
#btnNav li { width: 201px; height: 54px; background: url(../images/btn_over.png) no-repeat 50% 50%; margin-bottom: 2px; position: relative; transform-origin: left top; transform: rotate(-11.5deg) }
#btnNav li a { display: block; width: 201px; height: 54px;  /*background: url(../images/btn_bg.png) no-repeat center top;*/}
#btnNav li a img {opacity: 1;}
#btnNav li a:after { content: ''; width: 100px; height: 43px;  position: absolute; top: 2px; left: 17px; z-index: 2; transform-origin: left top; transform: rotate(11.5deg);}
#btnNav li.haruto a:after { background: url(../images/btn_haruto_txt.png) no-repeat center top;}
#btnNav li.mikoto a:after { background: url(../images/btn_mikoto_txt.png) no-repeat center top; }
#btnNav li.yuri a:after { background: url(../images/btn_yuri_txt.png) no-repeat center top;  }
#btnNav li.j a:after { background: url(../images/btn_j_txt.png) no-repeat center top;  }
#btnNav li.nata a:after { background: url(../images/btn_nata_txt.png) no-repeat center top;  }
#btnNav li.mistil a:after { background: url(../images/btn_mistil_txt.png) no-repeat center top;  }
#btnNav li.levia a:after { background: url(../images/btn_levia_txt.png) no-repeat center top;  }
#btnNav li.harpy a:after { background: url(../images/btn_harpy_txt.png) no-repeat center top;  }
#btnNav li.tina a:after { background: url(../images/btn_tina_txt.png) no-repeat center top;  }

#btnNav li.active a img {opacity: .5;}

/* 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.7; filter: alpha(opacity = 7); 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); }
.layerPop { z-index: 20000000; margin: -312px 0 0 -550px; width: 1090px; height: 614px; border: 1px solid #ff1313; background: #000; }
.layerPop .close { position: absolute; right: -1px; top: -50px; }
.layerPop .close button { display: block; text-indent: -9999px; width: 49px; height: 49px; background: url(../images/btn_close_movie.jpg) no-repeat; }
#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; }