/* CSS Reset
-------------------------------------------------------------- */
body{
	overflow-x: hidden;
	background-color: #000;
}
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;
}
button {background:none;}
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: 966px; 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: 47px 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
-------------------------------------------------------------- */


.clearFix { zoom: 1; }

.player { position: absolute; left: 0; top: 0; width: 100%; height: 950px; z-index: 0; }
.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; }
.wrapint{}
.playbg { 
    /*opacity: .95; */
	width: 100%; 
	height: 1034px; 
	background-image: url(../images/mask.png); 
	background-position: center -50px; 
	position: absolute; 
	z-index: 1; 
	top: 0; 
	left: 0; 
}
.title{
	width: 614px;
	height: 260px;
	background-image: url(../images/bg_title.png);
	background-position: center top;
	position: absolute;
	z-index: 1;
	top: 36%;
	left: 50%;
	margin-left: -322px;
}

.main{
	width: 100%;
	height: 2000px;
	background-image: url(../images/mainbg.png);
	background-position: center top;
	position: absolute;
	z-index: 2;
	top: 960px;
	left: 0;
	background-repeat: no-repeat;
}
.pagel, .page2{
	width: 1200px;
	height: 940px;
	margin:0 auto;
	position:relative;
}
.img01{
	background-image: url(../images/imgname01.png);
	background-position: center top;
	height: 64px;
	width: 227px;
	position: absolute;
	top: 682px;
	left: 940px;
	float: left;
}
.img02{
	background-image: url(../images/imgname02.png);
	background-position: center top;
	height: 64px;
	width: 227px;
	position: absolute;
	top: 760px;
	left: 180px;
	float: left;
}
.footer{
	background-image: url(../images/footbg.png);
	background-repeat: repeat-x;
	background-position: center top;
	height: 154px;
	width: 100%;
	position:fixed;
	bottom:0;
}
.foot01{
	background-image: url(../images/footer.png);
	background-repeat: no-repeat;
	width: 1041px;
	height: 97px;
	margin: 54px auto 0;
}
.top{
	z-index: 5;
    position: absolute;
    bottom: 86px;
    left: 50%;
    margin-left: -17px;
}
.btnbg{
	background-image: url(../images/btnbg.png);
	background-position: center top;
	height: 326px;
	width: 700px;
	position: absolute;
	z-index: 1;
	top: 610px;
	left: 50%;
	margin-left: -442px;
}
.btn01{
    width: 138px;
    height: 138px;
	-webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
	position: absolute;
    top: 78px;
    left: 144px;

}                              
.btn02{
    width: 138px;
    height: 138px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
    position:absolute;
    top: 78px;
    left: 340px;
}                        
.btn01 a, .btn02 a{
	width: 138px;
    height: 138px;
	display:block;
}
.btn01 a img:hover{
	background-image: url(../images/btn01_h.png);
}
.btn02 a img:hover{
	background-image: url(../images/btn02_h.png);
}
button {
    overflow: visible !important;
}
.btn_play {
	width: 22px;
	height: 25px;
	z-index: 50;
	position: absolute;
	top: 110px;
	left: 441px;
	cursor: pointer;
	background-position: top center;
	background: url(../images/btn_play.png) no-repeat;
}
.thickbox{
	width: 22px;
	height: 25px;
	display:block;
	text-indent: -9999px;
}
.btn_play2 {

    top: 116px!important;
    left: 705px!important;

}
.btn_play:hover { animation: pulse 1s infinite; }
/* animate */
@-webkit-keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes pulse { 
 0% {
 transform: scale(1);
 opacity: 1;
}
 50% {
 transform: scale(1.2);
 opacity: .55;
}
 100% {
 transform: scale(1);
 opacity: 1;
}
}
ul.qlink { position: fixed; top: 50%; margin-top: -160px; left: 0; z-index: 199; }
ul.qlink li { margin-bottom: 10px; }
ul.qlink li a { filter: brightness(.75); width: 180px; height: 80px;  background-image:url(https://landing.mangot5.com/template/closers/event/170830/images/qlink.png); text-indent:-9999px; display: block; /*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 { filter: brightness(1); }