@charset "utf-8";

/*!
 * 클로저스 티저3 Stylesheet
 * http://closers.nexon.com
 * Create: 16.10.11 Update: 16.10.13
 */

/* 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: '돋움', 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;}

/* 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;}

/* Styles
-------------------------------------------------------------- */
body, html {width:100%; height:100%; background:#000;}
#wrap .btn {cursor: default;}
/* 공통 */
#wrap {margin:0 auto; position: relative;	width: 100%; min-width:1280px;  max-width:1920px;/*background:url(http://s.nx.com/s2/game/closers/2017/events/170119_teaserMain/bg_7012600587.png) center 0; */overflow:hidden;}
.movieArea {z-index: 50;margin:0 0 0 -960px; position:absolute; left:50%; top:0; width: 1920px; display:none;}
/*.movieArea .cover {position: absolute; top: 0; left: 0; width: 100%;height: 100%; background:url(http://s.nx.com/s2/game/astellia/event/161018_teaser/bg_pattern_intro.png);}*/
.player {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 950px;
    z-index: 0;
}
.innerWrap {z-index: 50;position: relative;margin:0 auto; width: 1280px; }


/* topArea
-------------------------------------------------------------- */
#topArea { z-index: 300; 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; }

.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: 300; }



.section {z-index: 270; position: relative; width: 100%; height: 1080px; overflow:hidden;}
.section .con {position: absolute;}

.screenShot {position: absolute;  top: 190px; left: 50%; margin-left:-486px;  width: 972px; height: 514px;opacity:0; filter:alpha(opacity=0);}
.screenShot .btn button {z-index: 100;position: absolute; left: 0; top: 0;}
.screenShot img {margin: 5px 0 0 5px;}
.screenShot ul {position: absolute; top: 5px; left: 5px;}
.screenShot li {position: absolute; left: 0; top: 0; width: 1020px; height: 520px; display:none;}
.screenShot li.on {display: block;}

.section .thumbArea {position: absolute; top: 699px; left: 50%; margin-left:-481px; width: 966px; height: 165px;opacity:0; filter:alpha(opacity=0);}
.section .thumbArea ul {position: absolute; top: 0px; left: 0px; }
.section .thumbArea li {float: left; margin:0 12px 0 0;}
.section .thumbArea li button {display: block; width: 310px; height: 165px; text-indent: -9999px;}

.section .imgDetail {position: absolute; top: 0px; left: 0px; display:none;}

.popDim {z-index: 100;position: absolute; left: 0; top: 0;width: 100%; height: 1080px; display:none;}
#sec0 .popDim {z-index: 170; display:block;}
.popDim.pink {background:#f5cfe0; opacity: 0.90; filter:alpha(opacity=90);}
.popDim.green {background:#5db465; opacity: 0.85; filter:alpha(opacity=85);}
.popDim.blue {background:#3d8ddb; opacity: 0.85; filter:alpha(opacity=85);}

.popPic {z-index: 130;margin:0 0 0 -560px; position: absolute; top: 186px; left: 50%; width: 1106px; height: 730px; }
.popPic .title {position: absolute; top: 0; }
.popPic .popPicArea {position: absolute; top: 0; left: 74px; width: 1038px; height: 618px; background:url(../images/img_sec2_popSlideArea.png) no-repeat;}
.popPic .popPicArea li {display:none;}
.popPic .popPicArea li img {margin:5px 0 0 5px;}
.popPic .popPicArea li.on {display: block;}
.popPic .dir {position: absolute; top: 255px;}
.popPic .prev button {width: 51px; height: 97px; display: block; text-indent: -9999px;background:url(../images/btn_prev.png) no-repeat;}
.popPic .next {right:0px;}
.popPic .next button {width: 51px; height: 97px; display: block; text-indent: -9999px;background:url(../images/btn_next.png) no-repeat;}
.popPic .close {position: absolute; top: -60px; right: 82px; }
.popPic .close button {display:block; width: 50px; height: 50px; text-indent: -9999px; background:url(../images/btn_close.png) no-repeat;}

#sec0 {background:#f5cfe0; background-image:url(../images/bg_sec0.png); background-repeat:no-repeat; background-position: center top;}

#sec0 .cover {z-index: 150; position: absolute; top: 0; left: 0; width: 100%; height: 1080px; background:#54b55e; opacity: 0.8; filter:alpha(opacity=80);}
#sec0 .innerWrap {z-index: 180; height: 100%; background:url(../images/bg_sec0_170420.png) no-repeat center 0;}
#sec0 .title {position: absolute; top: -380px;/*top: 90px;*/ left: 228px;}
#sec0 .movie {position: absolute; top: 683px; left: 589px;}
#sec0 .movie button {display: block; width: 100px; height: 100px; text-indent: -9999px;}
#sec0 .btnArea {position: absolute; top: 814px; left: 0; width: 100%;}
#sec0 .btnArea .btn a {display: block; width: 412px; height: 170px; text-indent: -9999px;}
#sec0 .btnArea .btn1 {position: absolute; left: 160px; top: 0px;}
#sec0 .btnArea .btn2 {position: absolute; left: 714px; top: 0px;}
#sec1 {background:url(../images/bg_sec1.jpg) no-repeat center 0;}
#sec2 {background:url(../images/bg_sec2.jpg) no-repeat center 0;}
#sec3 {background:url(../images/bg_sec3.jpg) no-repeat center 0;}
#sec4 {background:url(../images/bg_sec4.jpg) no-repeat center 0;}
#sec5 {background:url(../images/bg_sec5.jpg) no-repeat center 0;}

.title {position: absolute; top:-70px;/*top: 116px;*/ left: 514px;}

#sec1 .con1 {right: -960px;/*right: 368px;*/ top: 251px;}
#sec1 .con2 {left: -800px;/*left: -156px;*/ top: 175px;}
#sec1 .link {position: absolute; top: 687px; left: 156px;}
#sec1 .link a {display: block; width: 191px; height: 32px; text-indent: -9999px;}

#sec2 .screenShot .btn.detail1 {position: absolute; top: 202px; left: 326px;}
#sec2 .screenShot .btn.detail2 {position: absolute; top: 298px; left: 804px;}
#sec2 .screenShot .btn button {display: block; width: 69px; height: 69px;  text-indent: -9999px;}
#sec2 .con1 {top: 340px; left: -750px; /*left: -320px;*/}
#sec2 .con2 {top: 305px; right: -680px;/*right: -316px;*/}
#sec2 .popPic .img1 .title {top: -60px; left: 382px;}
#sec2 .popPic .img2 .title {top: -60px; left: 382px;}
#sec2 .popPic .img3 .title {top: -60px; left: 382px;}
#sec2 .thumbArea {background:url(../images/spr_sec2Thumb.png) no-repeat}

#sec3 .screenShot .btn.detail1 {position: absolute; top: 322px; left: 387px;}
#sec3 .screenShot .btn.detail2 {position: absolute; top: 304px; left: 771px;}
#sec3 .screenShot .btn button {display: block; width: 69px; height: 69px; text-indent: -9999px;}
#sec3 .con1 {top: 500px; left: -690px;/*left: -270px;*/}
#sec3 .con2 {top: 506px; right: -640px;/*right: -264px;*/}
#sec3 .popPic .img1 .title {top: -60px; left: 330px;}
#sec3 .popPic .img2 .title {top: -60px; left: 330px;}
#sec3 .popPic .img3 .title {top: -60px; left: 330px;}
#sec3 .popPic .popPicArea {background:url(../images/img_sec3_popSlideArea.png) no-repeat;}
#sec3 .thumbArea {background:url(../images/spr_sec3Thumb.png) no-repeat}

#sec4 .screenShot .btn.detail1 {position: absolute; top: 128px; left: 606px;}
#sec4 .screenShot .btn button {display: block; width: 69px; height: 69px; text-indent: -9999px;}
#sec4 .con1 {top: 220px; left: -760px;/*left: -250px;*/}
#sec4 .con2 {top: 638px; right: -720px;/*right: -278px;*/}
#sec4 .popPic .img1 .title {top: -60px; left: 362px;}
#sec4 .popPic .img2 .title {top: -60px; left: 362px;}
#sec4 .popPic .img3 .title {top: -60px; left: 362px;}
#sec4 .thumbArea {background:url(../images/spr_sec4Thumb.png) no-repeat;}


#sec5 .title {left: 358px;}
#sec5 .con1 {top: 174px; left: -780px; /*left: -190px;*/}
#sec5 .con2 {top: 125px; right: -800px; /*right: -196px;*/}
#sec5 .ev {position: absolute; top: 327px; left: 198px; width: 773px; height: 696px; opacity: 0; filter:alpha(opacity=0);}
#sec5 .link {position: absolute; top: 441px; left: 828px;}
#sec5 .link a {display: block; width: 121px; height: 22px; text-indent: -9999px;}

#popMovie {z-index: 180; position: absolute; top: 50%; left: 50%; z-index: 800;margin:-360px 0 0 -640px; width: 1280px; height: 720px; }
#popMovie .youtubeArea {position: absolute; top: 0px; left: 0px; background:#000;}
#popMovie .youtubeArea iframe {position: absolute; top: 0; left: 0;}
#popMovie .close {z-index: 100;position: absolute; right: 0; top: -56px; }
#popMovie .close button {display: block; width: 50px; height: 50px; background:url(../images/btn_close.png) no-repeat; text-indent: -9999px;}

#controller {z-index: 280;position: absolute; top: 318px; right: 8px; width: 130px; height: 360px;}
#controller a { height: 67px; display: block; width: 100%; background:url(../images/spr_tab2.png) no-repeat; text-indent: -9999px;}
#controller .m0 a { height: 26px; background-position-y: 0;}
#controller .m1 a { background-position-y: -26px;}
#controller .m2 a { background-position-y: -93px;}
#controller .m3 a { background-position-y: -160px;}
#controller .m4 a { background-position-y: -227px;}
#controller .top a { background-position-y: -294px;}
#controller a:hover,
#controller .on a { background-position-x:-130px;}

ul.qlink { position: fixed; top: 50%; margin-top: -150px; 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/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; }

.bear { position:absolute; top:50%; left:50%; margin-top:-140px; margin-left:260px;}

.copyright {
    height: 100px;
    width: 980px;
    opacity: .5;
    margin: 0 auto;
}

.commonQuick {top: 170px !important; }



#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;}