@charset "UTF-8";

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


*{font-family: Meiryo, "Meiryo UI", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif;}

html, body{
    background-color: #FFF;
	width: 100%;
	height: 100%;
	margin: 0; 
	padding: 0;
}

/*header*/
header{
    background-color: #000;
    width: 100%;
    min-width: 1200px;
    position: relative;
    margin: 0 auto;
    z-index: 300;
}
header a{
    color:#FFF;	
    font-size: 16px;
    font-weight: 900;
    text-decoration: none;
}
header a:hover{
	color:#ff0900;
	text-decoration: none;
}
.headercontent{
	width: 1150px;
	height: 54px;
    margin: 0 auto;
}
.headertext{
	float: right;
    margin-top: 20px;
    margin-left: 12px;
}
.headertoplogo{
	float:left; 
	margin-top: 10px;
	font-size: 0px;
}
.bh, .fb{
	float: right;
	font-size: 0px;
	margin-top: 5px;
    margin-left: 5px;
	width: 49px;
	height: 49px;
}
.bh{background: url("//landing.mangot5.com/template/hot/event/common/bh.png") top center no-repeat;}
.fb{background: url("//landing.mangot5.com/template/hot/event/common/fb.png") top center no-repeat;}
.bh:hover,.fb:hover{opacity: 0.8}

/*wrapper*/
.wrapper{   
	position: relative;
    margin: 0 auto;
    min-width: 1200px;
    max-width: 1920px;
    width: 100%;
}
.content{	
	position: relative;
    margin: 0 auto;
    overflow: hidden; 
}
.img{
	position: absolute;
	left: 50%;
	font-size: 0px;
}

.logo{
	background: url("//landing.mangot5.com/template/hot/event/common/logo.png") top center no-repeat;
	width: 257px;	
	height: 106px;
    margin-left: -588px;
    margin-top: 30px;
    z-index: 200;
}
.logo:hover{
	margin-left: -585px;
	margin-top: 33px;
}

.btnall{
	position: fixed;
	top:300px;
	left:0;
	z-index: 300;
}
.btn{
	background: url("../images/btn.png")no-repeat;
	width: 205px; 
	height: 61px;
	display: block;
	background-position-x: 0;
	font-size: 0;
	margin-bottom:5px; 
}
.btn1 {background-position-y:0;}
.btn2 {background-position-y:-61px;}
.btn3 {background-position-y:-122px;}
.btn4 {background-position-y:-183px;}
.btn5 {background-position-y:-244px;}
.btn6 {background-position-y:-305px;}
[class*="btn"]:hover,[class*="btn"].active{background-position-x: -205px;}

.bigbtnall{
	position: fixed;
    top: 300px;
    right: -7px;
    z-index: 200;
}
.bigbtn {
	background: url("../images/bigbtn.png") center top no-repeat;
	width: 174px;
	height: 174px;
	background-position-x: 0;
	display: block;
	font-size: 0;
	margin-top: -20px;
}
[class*="bigbtn"]:hover{background-position-x: -174px;}
.bigbtnmember{background-position-y:0;}
.bigbtndownload{background-position-y: -174px;}
.bigbtnfb{background-position-y: -348px;}
@media screen and (max-width: 1600px) {
	.btnall{top:370px;position: absolute;}
    .bigbtn {display: none;}
}

/*bg1*/
#bg1{
	background:url(../images/bg1.jpg) center -54px no-repeat;
	min-height: 900px;
}
#bg1 #btn6{display: none;}
.role1{
	background: url("../images/role1.png") center top no-repeat;
	width: 2121px;
	height: 1418px;
	/*position: absolute;
	left: 50%;
    margin-left: -1040px;
    top: -200px;*/
}
.slogan{
    background: url(../images/slogan.png) center top no-repeat;
    width: 436px;
    height: 852px;
    /*position: absolute;
    left: 50%;
    margin-left: 636px;
    top: 40px;*/
}
.mov{
	position: absolute;
    left: 50%;
    top: 395px;
    margin-left: -238px;
    z-index: 1000;
}
.movbtn{
	background: url(../images/movbtn.png) 0 0 no-repeat;
    width: 113px;
    height: 107px;
    display: block;
    cursor: pointer;
    outline:none;
}
.movbtn:hover{
	background-position-x: -113px;
}
.videobox{z-index: 100;}
#scene {
    width: 100%;
    min-width: 1000px;
    position: absolute;
    /*height: 600px;
    margin-top: 100px;
    left: 50%;*/
}
#scene li.tag1 {
    margin: 0 auto;
    left: 50%!important;
    margin-left: -980px;
    top: -200px!important;
    pointer-events: none;
}
/*#scene li.tag1 {
    margin: 0 auto;
    margin-top: -200px;
    margin-left: -86px;
    z-index: 1;
    pointer-events: none;
}*/

#scene li.tag2 {
    margin: 0 auto;
    left: 50%!important;
    margin-left: -330px;
    top: 20px!important;
    pointer-events: none;
}
/*#scene li.tag2 {
    margin: 0 auto;
    margin-top: 20px;
    margin-left: 595px;
    z-index: 2;
    pointer-events: none;
}*/
#scene li.tag3 {
    margin: 0 auto;
    left: 50%!important;
    margin-left: -250px;
    top: 370px!important;
    /*top: 400px!important;*/
    z-index: 100;
    /*pointer-events: auto;
}*/
}
/*#scene li.tag3 {
    margin: 0 auto;
    margin-top: 380px;
    margin-left: 688px;
    z-index: 3;
    pointer-events: auto;
}*/
/*bg2*/
#bg2{
	background:url(../images/bg2.jpg) center -54px no-repeat;
	min-height: 1400px;
}
#bg2 #btn6{display: none;}
/*bg3*/
#bg3{
	background:url(../images/bg3.jpg) center -54px no-repeat;
	min-height: 2500px;
}
#bg3 .arrowall{
	width: 400px;
    position: absolute;
    top: 544px;
    left: 50%;
    margin-left: 85px;
}
#bg3 .arrow1{
	position: absolute;
    left: 50%;
    margin-left: 120px;
	animation: arrowmov 1s infinite linear;
}
@keyframes arrowmov{
	0%{ 
		transform:translateX(0px);
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{ 
		transform:translateX(30px);
		opacity: 0;
	}
}
#bg3 .arrow2{
	position: absolute;
    left: 50%;
    margin-left: -196px;
    animation: arrowmov 1s infinite linear reverse;
}
#bg3 .arrow2 img{transform:rotate(180deg);}
#bg3 [class*="ev"]{
	width: 566px;
    height: 590px;
}
#bg3 .ev1{
	background: url(../images/p3_ev1.png) center top no-repeat;
	top: 945px;
    margin-left: -103px;
}
#bg3 .ev2{
	background: url(../images/p3_ev2.png) center top no-repeat;
	top: 1302px;
    margin-left: -561px;
}
#bg3 .ev3{
	background: url(../images/p3_ev3.png) center top no-repeat;
	top: 1679px;
    margin-left: 40px;
}
#bg3 .role1{
	background: url(../images/p3_role1.png) center top no-repeat;
	width: 432px;
    height: 871px;
    top: 979px;
    margin-left: 280px;
}
#bg3 .role2{
	background: url(../images/p3_role2.png) center top no-repeat;
	width: 966px;
    height: 653px;
    top: 1779px;
    margin-left: -880px;
}
/*bg4*/
#bg4{
	background:url(../images/bg4.jpg) center -54px no-repeat;
	min-height: 3600px;
}
#bg4 .role1{
	background: url(../images/p4_role1.png) center top no-repeat;
	width: 1564px;
    height: 1004px;
    top: -105px;
    margin-left: -760px;
	animation: p4role1mov .5s 1 ease;
}
@keyframes p4role1mov{
	0%{ 
		transform:translateX(300px);
	}
	100%{ 
		transform:translateX(0px);
	}
}
#bg4>.slogan{
	background: url(../images/p4_slogan.png) center top no-repeat;
	width:710px;
    height: 309px;
    top: 246px;
    margin-left: -560px;
	animation: p4sloganmov .3s .5s 1 backwards ease;
}
@keyframes p4sloganmov{
	0%{ 
		transform:translateY(150px);
		opacity: 0;
	}
	100%{ 
		transform:translateY(0px);
		opacity: 1;
	}
}
#bg4 .role2{
	background: url(../images/p4_role2.png) center top no-repeat;
	width: 1008px;
    height: 1055px;
    top: 950px;
    margin-left: -650px;
}
#bg4 [class*="ev1aw"]{
	width: 292px;
    height: 302px; 
    top: 1450px;
}
#bg4 .ev1aw1{
	background: url(../images/ev1aw1.png) center top no-repeat;
    margin-left: 48px;
}
#bg4 .ev1aw2{
	background: url(../images/ev1aw2.png) center top no-repeat;
    margin-left: 346px;
}
#bg4 [class*="ev2aw"]{
	width: 531px;
	margin-left: -450px;
	z-index: 200;
}
#bg4 .ev2aw1{
	background: url(../images/ev2aw1.png) center top no-repeat;
    height: 190px;
    top:2400px;
}
#bg4 .ev2aw2{
	background: url(../images/ev2aw2.png) center top no-repeat;
	height: 174px;
    top:2600px;
}
#bg4 .ev2aw3{
	background: url(../images/ev2aw3.png) center top no-repeat;
    height: 174px;
    top:2784px;
}
#bg4 .ev2aw4{
	background: url(../images/ev2aw4.png) center top no-repeat;  
	height: 174px;
    top:2968px;
}
#bg4 .ev2aw5{
	background: url(../images/ev2aw5.png) center top no-repeat;
    height: 174px;
    top:3152px;
}
#bg4 .ev2aw6{
	background: url(../images/ev2aw6.png) center top no-repeat;  
	height: 151px;
    top:3336px;
}
.cloudall{
	position: absolute;
	background: url(../images/cloud.png) top center no-repeat; 
	width: 2681px;
	height: 833px;
	bottom: -100px;
	z-index: 90;
}
.cloud1{
	left: 0px;
	animation: cloudmov1 80s infinite linear;
}
@keyframes cloudmov1{
	0%{ left: 0px;}
	100%{ left: -2681px}
}
.cloud2{	
	left: 2681px;
	animation: cloudmov2 80s infinite linear;
}
@keyframes cloudmov2{
	0%{ left: 2681px;}
	100%{ left: 0px;}
}
.cloudall2{
	opacity: .7;
	bottom: 200px;
	z-index: 80;
}
.cloudall2.cloud1{
	left: 2681px;
	animation: cloudmov1 300s infinite linear;
}
.cloudall2.cloud2{
	left: 0px;
	animation: cloudmov2 300s infinite linear;
}

.event2{
	background:url(../images/event2.png) center top no-repeat;
	width: 1392px;
	height: 1340px;
	position: absolute;
	left: 50%;
	margin-left: -300px;
	bottom:-100px;
	z-index: 100;
}
/*bg5*/
#bg5{
	background-color: #c8d400;
	/*background:url(../images/bg5.jpg) center -54px no-repeat;*/
	min-height: 1815px;
}
#bg5 .dot{
  width:30px;
  height:12px;
  position:absolute;
  background: url(../images/leaf.png);
  background-size: 100% 100%;
}
#bg5 #container {
	position: absolute;
	width:100%; 
	height:1000px;
}
#bg5 .titlebg{
	background: url(../images/p5_titlebg.png) center top no-repeat;
	width: 1801px;
    height: 1201px;
    /*top: 145px;
    margin-left: -1356px;*/
    top: -55px;
    margin-left: -928px;
}
#bg5>ul>li>.slogan{
	background: url(../images/p5_slogan.png) center top no-repeat;
	width: 600px;
    height: 766px;
    /*top: -6px;
    margin-left: 216px;*/
    top: 60px;
    margin-left: -315px;
}
#bg5 .role1{
	background: url(../images/p5_role1.png) center top no-repeat;
	width: 598px;
    height: 876px;
    top: 13px;
    /*margin-left: 642px;*/
    margin-left: -116px;
}
#bg5 .contentbg{
	background: url(../images/p5_contentbg.png) center top no-repeat;
	width: 1430px;
    height: 1144px;
    top: 802px;
    margin-left: -656px;
}
#bg5 .aw1{
	background: url(../images/p5_aw1.png) center top no-repeat;
	width: 545px;
    height: 424px;
    top: 1028px;
    margin-left: -425px;
}
#bg5 .aw2{
	background: url(../images/p5_aw2.png) center top no-repeat;
	width: 545px;
    height: 479px;
    top: 1293px;
    margin-left: 76px;
}
#bg5 #scene li.tag1 {
    margin: 0 auto;
    left: 50%!important;
    margin-left: -1868px;
    top: 0px!important;
    z-index: 1;
    pointer-events: none;
}

#bg5 #scene li.tag2 {
    margin: 0 auto;
    left: 50%!important;
    margin-left: 30px;
    top: 0px!important;
    z-index: 2;
    pointer-events: none;
}
#bg5 #scene li.tag3 {
    margin: 0 auto;
    left: 50%!important;
    margin-left: 24px;
    top: 20px!important;
    z-index: 3;
    pointer-events: none;
}
/*jump*/
#black{
	background-color: rgba(0,0,0,.8);
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 400;
	display: none;
}
#jump{
	position: relative;
    margin: -200px auto 0;
    width: 40%;
    height: 100%;
    transform: translateY(50%);
}
#jump p{
    color: #FFF; 
    font-size: 20px;
    text-indent: -20px;
    line-height: 30px;
}
#jumpclose{
    background: url(../images/close.png) center top no-repeat;
    width: 54px;
    height: 54px;
    cursor: pointer;
    font-size: 0px;
    display: inline-block;
    margin-left: 100%;
    margin-bottom: 10px;
}
#jumpclose:hover{
    animation: closemov .5s 1 linear;
}
@keyframes closemov{
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(360deg);
    }
}
/*footer*/
.footer{
    position: relative;
    font-size: 0;
    text-align: center;
    padding: 15px 0;
    background-color: #fff;
}

html::after { -webkit-transition: opacity 0.3s; transition: opacity 0.3s; content: "此為只支援直式顯示的頁面. \A 請將手機轉成直式!"; text-align: center; white-space: pre; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 24px; position: fixed; left: -100%; top: 0; bottom: 0; z-index: 9999; width: 100%; background: rgba(0, 0, 0, 0.9); opacity: 0; }

@media screen and (max-width: 1300px) and (orientation: landscape) { html { overflow: hidden; }
  html::after { left: 0; opacity: 1; } }
/*@media screen and (min-aspect-ratio: 13 / 9) and (orientation: landscape) { html { overflow: hidden; }
  html::after { left: 0; opacity: 1; } }*/