@charset "UTF-8";

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

html, body{
	background-color:#fefefe;
	width: 100%;
	height: 100%;
	margin: 0; 
	padding: 0;
}
h1,h2,h3,h4,ul,p,input,select,address{margin:0;padding:0}
img{border:0;vertical-align:top}
ul,li{list-style:none}

/*header*/
header{
    background-color: #000;
    width: 100%;
    max-width: 1920px;
    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: 1200px;
	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(../images/bh.png) top center no-repeat;}
.fb{background: url(../images/fb.png) top center no-repeat;}
.bh:hover,.fb:hover{opacity: 0.8}

/*wrapper*/
.wrapper{     
	background: url(../images/bg.jpg) top center no-repeat;
	width: 100%;
	max-width: 1920px;
    min-width: 1200px;
	position: relative;
	margin: 0 auto;
	overflow: hidden;
}
/*index*/
.index{height: 698px;}
#canvas{
	position: relative;
    z-index: 100;
}
.people{
	background: url(../images/people.png) top center no-repeat;
	width: 815px;	
	height: 1036px;
	position: absolute;
	left: 50%;
	margin-left: -407px;
	animation: heartmov 5s infinite linear;
}
.milk{	
	background: url(../images/milk.png) top center no-repeat;
	width: 1920px;	
	height: 814px;
	position: absolute;
	left: 50%;
	margin-left: -960px;
	margin-top:450px;
	animation:  heartmov 5s infinite linear;
}
.logo{
	background: url(../images/logo.png) top center no-repeat;
	width: 257px;	
	height: 106px;
	position: absolute;
	left: 50%;
	margin-left: -411px;
	margin-top: 20px;
	z-index: 300;
}
.logo:hover{
	margin-left: -408px;
	margin-top: 23px;
}
/*btn*/
.tabs{position:absolute;left:0;width:100%;z-index:100;}
/*.tabs ul{margin:0 auto;width:1100px;overflow:hidden;_zoom:1}
.tabs li{float:left}
.tabs li a:hover img,.tabs li .on img{margin-top:-222px}*/
.menu{width:100%;}
.sticky{position:fixed;top:0;left:0;background-color:#fefefe;height: 122px;text-align: center;min-width: 1200px;}
.btn{
	width: 217px;
	height: 210px;	
	position: absolute;
	left: 50%;
}
.btn1 {
	background: url(../images/btn1.png) top center no-repeat;
    margin-left: 317px;
    margin-top: -208px;
	animation: heartmov 4s infinite linear;
}
@keyframes heartmov {
	0%{
		top:0;
	}
	50%{
		top:-30px;
	}
	100%{
		top:0;
	}
}
.btn1:hover{background: url(../images/btn1_h.png) top center no-repeat;}
.btn2 {
	background: url(../images/btn2.png) top center no-repeat;
    margin-left: -490px;
    margin-top: -451px;
    animation: heartmov 4s infinite linear;
}
.btn2:hover{background: url(../images/btn2_h.png) top center no-repeat;}
.btn3 {
	background: url(../images/btn3.png) top center no-repeat;
    margin-left: 250px;
    margin-top: -603px;
	animation: heartmov 4s .5s infinite linear;
}
.btn3:hover{background: url(../images/btn3_h.png) top center no-repeat;}

.btnline{
	margin: -10px;	
	width: 266px;
	height: 146px;
}
.btn4{background: url(../images/btn4.png) top center no-repeat;}
.btn4:hover{background: url(../images/btn4_h.png) top center no-repeat;}
.btn5{background: url(../images/btn5.png) top center no-repeat;}
.btn5:hover{background: url(../images/btn5_h.png) top center no-repeat;}
.btn6{background: url(../images/btn6.png) top center no-repeat;}
.btn6:hover{background: url(../images/btn6_h.png) top center no-repeat;}
.btn7{
	background: url(../images/btn7.png) top center no-repeat;
	width: 205px;
	height: 147px;
}
.btn7:hover{
	background: url(../images/btn7_h.png) top center no-repeat;
}
.choc{
	position:relative;
	background: url(../images/choc.png) top center no-repeat;
	width:130px;
	height:146px;
	display: none;
}

.content{position:relative;margin:80px auto 0;width: 1200px;text-align: center;}
.content p{padding:119px 0 0 0}
.p1p{	
	background: url(../images/p1p.png) top center no-repeat;
	width: 839px;
	height: 986px;
    position: absolute;
    left: 50%;
    margin-left: 158px;
    margin-top: -649px;
}
.p2p{	
	background: url(../images/p2p.png) top center no-repeat;
	width: 839px;
	height: 761px;
    position: absolute;
    right: 50%;
	margin-right: 214px;
    margin-top: -546px;
}
.p3p{	
	background: url(../images/p3p.png) top center no-repeat;
	width: 973px;
	height: 723px;
    position: absolute;
    left: 50%;
    margin-left: 165px;
    margin-top: -615px;
}
@media screen and (max-width: 1500px) {
    .p1p, .p2p, .p3p{display: none;}
}
.event{position: relative;}
.click{
	font-size: 0;
	text-decoration: none;
	position: absolute;
    top: 1728px;
    left: 50%;
    margin-left: 250px;
    width: 50px;
    height: 20px;
    cursor: pointer;
}
.airball{
	background: url(../images/airball.png)top center no-repeat;
	width: 217px;
	height: 210px;	
	position: absolute;
	left: 50%;
}
.air1{
    margin-left: -790px;
    margin-top: 551px;
	animation: heartmov 4s .5s infinite linear;
}
.air2{
	margin-left: 590px;
    margin-top: 1481px;
	animation: heartmov 4s infinite linear;
}

/*footer*/
.footer{
	background: url(../images/footer.png)top center no-repeat;
    width: 851px;
    height: 87px;
    position: relative;
    margin: 0 auto 20px;
}