@charset "UTF-8";

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

html, body{
	background:url(../images/bg.jpg) top center repeat;
	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{     
	width: 100%;
	max-width: 1920px;
    min-width: 1200px;
	min-height: 860px;
	position: relative;
	margin: 0 auto;
	overflow: hidden;
}

.titleall{	
	height: 950px; 	
	position: relative;
    margin: 0 auto;
}
.bg_sky{
	background: url(../images/bg_back.jpg) top center no-repeat;
	width: 1129px;
	height: 744px;
	position: absolute;
	left: 50%;
	margin-left: -565px;
	top:240px;
}
.bg_p1{
	background: url(../images/bg_p1.png) top center no-repeat;	
	width: 342px;
	height: 410px;
	position: absolute;
	left: 50%;
    margin-left: -655px;
    top: 412px;
    transform:rotate(10deg);
    animation: bgp1mov .5s 1 ease;
}
@keyframes bgp1mov {
	0%{
    margin-left: -800px;
    top: 700px;
	}
	80%{
    margin-left: -634px;
    top: 395px;
	}
	100%{
	margin-left: -655px;
    top: 412px;
	}
}
.bg_p2{
	background: url(../images/bg_p2.png) top center no-repeat;
	width: 280px;
	height: 336px;
	position: absolute;
	left: 50%;
    margin-left: -412px;
    top: 576px;
	transform:rotate(10deg);
    animation: bgp2mov .5s 1 ease;
}
@keyframes bgp2mov {
	0%{
    margin-left: -412px;
    top: 820px;
	}
	80%{
    margin-left: -412px;
    top: 541px;
	}
	100%{
    margin-left: -412px;
    top: 576px;
	}
}
.bg_p3{
	background: url(../images/bg_p3.png) top center no-repeat;
	width: 348px;
	height: 419px;
	position: absolute;
	left: 50%;
    margin-left: -244px;
    top: 480px;
    animation: bgp3mov .5s 1 ease;
}
@keyframes bgp3mov {
	0%{
    margin-left: -244px;
    top: 820px;
	}
	80%{
    margin-left: -244px;
    top: 420px;
	}
	100%{
    margin-left: -244px;
    top: 480px;
	}
}
.bg_p4{
	background: url(../images/bg_p4.png) top center no-repeat;
	width: 336px;
	height: 410px;
	position: absolute;
	left: 50%;
	margin-left: 0px;
    top: 462px;
    transform:rotate(-20deg);
    animation: bgp4mov .5s 1 ease;
}
@keyframes bgp4mov {
	0%{
	margin-left: 0px;
    top: 750px;
	}
	80%{
	margin-left: 0px;
    top: 402px;
	}
	100%{
	margin-left: 0px;
    top: 462px;
	}
}
.bg_grass{
	background: url(../images/bg_grass.png) top center no-repeat;
	width: 1129px;
	height: 747px;
	position: absolute;
	left: 50%;
	margin-left: -565px;
	top:280px;
}
.bg_mask{
	background: url(../images/bg_mask.png) top center no-repeat;
	width: 1920px;
	height: 1206px;
	position: absolute;
	left: 50%;
	margin-left: -960px;
}
.logo{
	background: url("//landing.mangot5.com/template/hot/event/common/logo.png") top center no-repeat;
	width: 257px;	
	height: 106px;
	cursor: pointer;
	position: absolute;
	left: 50%;
	margin-left: -500px;
	margin-top: 60px;
}
.logo:hover{
	margin-left: -497px;
	margin-top: 63px;
}
/*btn*/
body,h1,h2,h3,h4,ul,p,input,select,address{margin:0;padding:0}
img{border:0;vertical-align:top}
ul,li{list-style:none}
.tabs{position:absolute;left:0;width:100%;z-index:10;/*margin-top: -300px;*/}
.tabs ul{margin:0 auto;width:1200px;text-align: center;/*overflow:hidden;_zoom:1*/}
.tabs li{position:absolute;/*float:left; position: relative;margin: 0 auto;*/}
.tabs li a:hover img,.tabs li .on img{margin-top:-222px}
.menu{width:100%;}
.sticky{position:fixed;top:0;left:0;background-color:#fcdade;height:100px;/*margin-top:-30px;*/}
/*.topall{position:relative;margin:0 auto;width:1100px;display: none;}
.topall a{width: 218px;height: 220px;position:absolute;top: 150px;right: -900px;}
.top{background: url(../images/top.png) top center no-repeat;width: 100%;height: 100%;position: absolute;}
*/.content{position:relative;margin:0 auto 0;width:1200px;}
.content p{padding:168px 0 0 0}

.btn{background-image: url("../images/btn.png");background-repeat: no-repeat;}
.btn1,.btn2,.btn3,.btn4{position: absolute;}
.btn1 {
	background-position: 0 0; width: 226px; height: 130px;
	top: -600px;
    left: 50%;
    margin-left: 156px;
    }
.btn1:hover{ background-position: -226px 0; }
.btn2 {
	background-position: 0 -130px; width: 262px; height: 126px;
    top: -468px;
    left: 50%;
    margin-left: 189px;
}
.btn2:hover{background-position: -262px -130px;}
.btn3 {
	background-position: 0 -256px; width: 266px; height: 136px; 
    top: -538px;
    left: 50%;
    margin-left: 391px;
 }
.btn3:hover{background-position: -266px -256px;}
.btn4 {
	background-position: 0 -392px; width: 227px; height: 130px;
    top: -518px;
    left: 50%;
    margin-left: 653px;
}
.btn4:hover{background-position: -227px -392px;}
.btn5,.btn6,.btn7,.btn8{width: 277px; height: 80px;margin-top: 10px;margin-left: -10px;}
.btn5 {background-position: 0 -522px; }
.btn5:hover{ background-position: -277px -522px;}
.btn6 {background-position: 0 -620px;}
.btn6:hover{background-position: -277px -620px;}
.btn7 {background-position: 0 -718px;}
.btn7:hover{ background-position: -277px -718px;}
.btn8 {background-position: 0 -816px;}
.btn8:hover{background-position: -277px -816px;}
.top { background-image: url("../images/btn.png"); background-position: 0 -914px; width: 82px; height: 83px; background-repeat: no-repeat; }
.top:hover { background-position: -82px -914px; }

/*footer*/
.footer{
	background: url("//landing.mangot5.com/template/hot/event/common/footer.png")top center no-repeat;
    width: 851px;
    height: 87px;
    position: relative;
    margin: 50px auto 20px;
}