@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video { font-family: 'Noto Sans TC', sans-serif; }
/* Reserved Class
-------------------------------------------------------------- */
body,
html {
	font-family: 'Noto Sans TC';
	width: 100%;
	height: 100%;
	background: #000;
}
/*!
 * 클로저스 검은양팀 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; }
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;
}
.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;
}
.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_01.jpg) no-repeat;*/ height: 950px; }
.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;
}
.bgArea div {
	z-index: 20;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	filter: alpha(opacity=0);
}
.bgArea .bg0 {
	opacity: 1;
	filter: alpha(opacity=100);
	background: url(../images/bg_sec0.jpg) no-repeat center 0;
}
.bg0Effect {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	filter: alpha(opacity=0);
	background: url(../images/bg_sec0_effect.jpg) no-repeat center 0;
}
.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/171121_1/images/qlink.png);
	display: block;
	width: 100px;
	height: 170px; /*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 -170px; }
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;
	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; }
/* E : 댓글 */

#footer {
	padding: 50px 0 100px 0;
	text-align: center;
}
.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;
}
.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 {}*/
iframe[name='google_conversion_frame'] {
	width: 1px;
	height: 1px;
	font-size: 0;
	line-height: 0;
	position: absolute;
	top: 0;
	left: -1000%;
	overflow: hidden;
}
.btn_fb {
	background-image: url(../images/btn_fb.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	width: 240px;
	height: 90px;
	position: absolute;
	top: 831px;
	left: 50%;
	margin-left: -121px;
	opacity:.75;
}
.pulse { animation: pulse 3s infinite ease-out; }
@keyframes pulse { 0% {
 transform: scale(1);
 opacity: .75;
}
 50%,100% {
 transform: scale(1.25);
 opacity: 0;
}
}